@easypayment/medusa-paypal 0.2.6 → 0.2.8

package/src/admin/routes/settings/paypal/disputes/page.tsx

@@ -1,259 +1,186 @@
-import React, { useCallback, useEffect, useMemo, useState } from "react"
-import PayPalTabs from "../_components/Tabs"
-
-type Dispute = {
-  id: string
-  dispute_id: string
-  status?: string | null
-  reason?: string | null
-  stage?: string | null
-  amount?: string | null
-  currency_code?: string | null
-  transaction_id?: string | null
-  seller_transaction_id?: string | null
-  order_id?: string | null
-  cart_id?: string | null
-  created_at?: string
-  updated_at?: string
-}
-
-type Filters = {
-  dispute_id: string
-  status: string
-  order_id: string
-  cart_id: string
-}
-
-const EMPTY_FILTERS: Filters = {
-  dispute_id: "",
-  status: "",
-  order_id: "",
-  cart_id: "",
-}
-
-function formatDate(value?: string) {
-  if (!value) {
-    return ""
-  }
-  const parsed = new Date(value)
-  if (Number.isNaN(parsed.getTime())) {
-    return value
-  }
-  return parsed.toLocaleString()
-}
-
-export default function PayPalDisputesPage() {
-  const [filters, setFilters] = useState<Filters>({ ...EMPTY_FILTERS })
-  const [disputes, setDisputes] = useState<Dispute[]>([])
-  const [loading, setLoading] = useState(false)
-  const [error, setError] = useState<string | null>(null)
-
-  const queryString = useMemo(() => {
-    const params = new URLSearchParams()
-    Object.entries(filters).forEach(([key, value]) => {
-      if (value.trim()) {
-        params.set(key, value.trim())
-      }
-    })
-    const qs = params.toString()
-    return qs ? `?${qs}` : ""
-  }, [filters])
-
-  const fetchDisputes = useCallback(async (source: Filters) => {
-    try {
-      setLoading(true)
-      setError(null)
-      const params = new URLSearchParams()
-      Object.entries(source).forEach(([key, value]) => {
-        if (value.trim()) {
-          params.set(key, value.trim())
-        }
-      })
-
-      const qs = params.toString()
-      const resp = await fetch(`/admin/paypal/disputes${qs ? `?${qs}` : ""}`, {
-        credentials: "include",
-        headers: {
-          Accept: "application/json",
-        },
-      })
-
-      if (!resp.ok) {
-        const message = await resp.text().catch(() => "")
-        throw new Error(message || "Failed to load disputes")
-      }
-
-      const json = await resp.json().catch(() => ({}))
-      setDisputes((json?.disputes as Dispute[]) || [])
-    } catch (fetchError: any) {
-      setError(fetchError?.message || "Failed to load disputes")
-      setDisputes([])
-    } finally {
-      setLoading(false)
-    }
-  }, [])
-
-  useEffect(() => {
-    fetchDisputes(EMPTY_FILTERS)
-  }, [fetchDisputes])
-
-  const onSubmit = (event: React.FormEvent) => {
-    event.preventDefault()
-    fetchDisputes(filters)
-  }
-
-  const onReset = () => {
-    setFilters({ ...EMPTY_FILTERS })
-    fetchDisputes(EMPTY_FILTERS)
-  }
-
-  return (
-    <div className="p-6">
-      <div className="flex flex-col gap-6">
-        <div>
-          <h1 className="text-xl font-semibold text-ui-fg-base">PayPal Disputes</h1>
-          <p className="mt-1 text-sm text-ui-fg-subtle">
-            Review PayPal dispute activity tied to your Medusa orders. This view is read-only.
-          </p>
-        </div>
-
-        <PayPalTabs />
-
-        <div className="rounded-xl border border-ui-border-base bg-ui-bg-base shadow-sm">
-          <div className="border-b border-ui-border-base p-4">
-            <div className="text-base font-semibold text-ui-fg-base">Filters</div>
-          </div>
-          <div className="p-4">
-            <form onSubmit={onSubmit} className="flex flex-col gap-4">
-              <div className="grid grid-cols-1 gap-4 md:grid-cols-4">
-                <label className="flex flex-col gap-1 text-sm text-ui-fg-subtle">
-                  Dispute ID
-                  <input
-                    className="rounded-md border border-ui-border-base bg-ui-bg-base px-3 py-2 text-sm text-ui-fg-base"
-                    value={filters.dispute_id}
-                    onChange={(event) =>
-                      setFilters((prev) => ({ ...prev, dispute_id: event.target.value }))
-                    }
-                    placeholder="PP-D-123"
-                  />
-                </label>
-                <label className="flex flex-col gap-1 text-sm text-ui-fg-subtle">
-                  Status
-                  <input
-                    className="rounded-md border border-ui-border-base bg-ui-bg-base px-3 py-2 text-sm text-ui-fg-base"
-                    value={filters.status}
-                    onChange={(event) =>
-                      setFilters((prev) => ({ ...prev, status: event.target.value }))
-                    }
-                    placeholder="OPEN"
-                  />
-                </label>
-                <label className="flex flex-col gap-1 text-sm text-ui-fg-subtle">
-                  Order ID
-                  <input
-                    className="rounded-md border border-ui-border-base bg-ui-bg-base px-3 py-2 text-sm text-ui-fg-base"
-                    value={filters.order_id}
-                    onChange={(event) =>
-                      setFilters((prev) => ({ ...prev, order_id: event.target.value }))
-                    }
-                    placeholder="order_..."
-                  />
-                </label>
-                <label className="flex flex-col gap-1 text-sm text-ui-fg-subtle">
-                  Cart ID
-                  <input
-                    className="rounded-md border border-ui-border-base bg-ui-bg-base px-3 py-2 text-sm text-ui-fg-base"
-                    value={filters.cart_id}
-                    onChange={(event) =>
-                      setFilters((prev) => ({ ...prev, cart_id: event.target.value }))
-                    }
-                    placeholder="cart_..."
-                  />
-                </label>
-              </div>
-              <div className="flex flex-wrap gap-3">
-                <button
-                  type="submit"
-                  className="rounded-md bg-ui-fg-base px-4 py-2 text-sm font-medium text-ui-bg-base"
-                  disabled={loading}
-                >
-                  {loading ? "Loading..." : "Apply filters"}
-                </button>
-                <button
-                  type="button"
-                  className="rounded-md border border-ui-border-base px-4 py-2 text-sm text-ui-fg-base"
-                  onClick={onReset}
-                  disabled={loading}
-                >
-                  Reset
-                </button>
-                <span className="text-sm text-ui-fg-subtle">
-                  Showing {disputes.length} dispute{disputes.length === 1 ? "" : "s"}
-                  {queryString ? " (filtered)" : ""}
-                </span>
-              </div>
-            </form>
-          </div>
-        </div>
-
-        <div className="rounded-xl border border-ui-border-base bg-ui-bg-base shadow-sm">
-          <div className="border-b border-ui-border-base p-4">
-            <div className="text-base font-semibold text-ui-fg-base">Dispute Records</div>
-          </div>
-          <div className="overflow-x-auto">
-            <table className="min-w-full divide-y divide-ui-border-base text-sm">
-              <thead className="bg-ui-bg-subtle">
-                <tr className="text-left text-ui-fg-subtle">
-                  <th className="px-4 py-3 font-medium">Dispute</th>
-                  <th className="px-4 py-3 font-medium">Status</th>
-                  <th className="px-4 py-3 font-medium">Reason</th>
-                  <th className="px-4 py-3 font-medium">Stage</th>
-                  <th className="px-4 py-3 font-medium">Amount</th>
-                  <th className="px-4 py-3 font-medium">Order</th>
-                  <th className="px-4 py-3 font-medium">Cart</th>
-                  <th className="px-4 py-3 font-medium">Updated</th>
-                </tr>
-              </thead>
-              <tbody className="divide-y divide-ui-border-base text-ui-fg-base">
-                {disputes.length === 0 ? (
-                  <tr>
-                    <td className="px-4 py-6 text-center text-ui-fg-subtle" colSpan={8}>
-                      {loading ? "Loading disputes..." : "No disputes found."}
-                    </td>
-                  </tr>
-                ) : (
-                  disputes.map((dispute) => (
-                    <tr key={dispute.id}>
-                      <td className="px-4 py-3">
-                        <div className="font-medium text-ui-fg-base">{dispute.dispute_id}</div>
-                        <div className="text-xs text-ui-fg-subtle">
-                          {dispute.transaction_id || "No transaction"}
-                        </div>
-                      </td>
-                      <td className="px-4 py-3">{dispute.status || "Unknown"}</td>
-                      <td className="px-4 py-3">{dispute.reason || "-"}</td>
-                      <td className="px-4 py-3">{dispute.stage || "-"}</td>
-                      <td className="px-4 py-3">
-                        {dispute.amount ? `${dispute.amount} ${dispute.currency_code || ""}` : "-"}
-                      </td>
-                      <td className="px-4 py-3">{dispute.order_id || "-"}</td>
-                      <td className="px-4 py-3">{dispute.cart_id || "-"}</td>
-                      <td className="px-4 py-3 text-ui-fg-subtle">
-                        {formatDate(dispute.updated_at || dispute.created_at)}
-                      </td>
-                    </tr>
-                  ))
-                )}
-              </tbody>
-            </table>
-          </div>
-          {error ? (
-            <div className="border-t border-ui-border-base px-4 py-3 text-sm text-ui-fg-error">
-              {error}
-            </div>
-          ) : null}
-        </div>
-      </div>
-    </div>
-  )
-}
+import React, { useCallback, useEffect, useMemo, useState } from "react"
+import PayPalTabs from "../_components/Tabs"
+
+type AdminFetchOptions = {
+  method?: "GET" | "POST" | "PUT" | "DELETE" | "PATCH"
+  body?: Record<string, unknown>
+  query?: Record<string, string>
+}
+
+async function adminFetch<T = unknown>(path: string, opts: AdminFetchOptions = {}): Promise<T> {
+  const { method = "GET", body, query } = opts
+  let url = path
+  if (query && Object.keys(query).length > 0) {
+    const params = new URLSearchParams(query)
+    url = `${path}?${params.toString()}`
+  }
+  const headers: Record<string, string> = { Accept: "application/json" }
+  if (body !== undefined) headers["Content-Type"] = "application/json"
+  if (typeof window !== "undefined") {
+    const token = (window as any).__medusa__?.token
+    if (token) headers["Authorization"] = `Bearer ${token}`
+  }
+  const res = await fetch(url, {
+    method, headers, credentials: "include",
+    body: body !== undefined ? JSON.stringify(body) : undefined,
+  })
+  const text = await res.text().catch(() => "")
+  if (!res.ok) {
+    if (res.status === 401) throw new Error("Unauthorized (401) - session may have expired. Please reload and log in again.")
+    if (res.status === 403) throw new Error("Forbidden (403) - you do not have permission to perform this action.")
+    throw new Error(text || `Request failed with status ${res.status}`)
+  }
+  if (!text) return {} as T
+  try { return JSON.parse(text) as T } catch { return {} as T }
+}
+
+type Dispute = {
+  id: string
+  dispute_id: string
+  status?: string | null
+  reason?: string | null
+  stage?: string | null
+  amount?: string | null
+  currency_code?: string | null
+  transaction_id?: string | null
+  seller_transaction_id?: string | null
+  order_id?: string | null
+  cart_id?: string | null
+  created_at?: string
+  updated_at?: string
+}
+
+type Filters = {
+  dispute_id: string
+  status: string
+  order_id: string
+  cart_id: string
+}
+
+const EMPTY_FILTERS: Filters = { dispute_id: "", status: "", order_id: "", cart_id: "" }
+
+function formatDate(value?: string) {
+  if (!value) return ""
+  const parsed = new Date(value)
+  if (Number.isNaN(parsed.getTime())) return value
+  return parsed.toLocaleString()
+}
+
+export default function PayPalDisputesPage() {
+  const [filters, setFilters] = useState<Filters>({ ...EMPTY_FILTERS })
+  const [disputes, setDisputes] = useState<Dispute[]>([])
+  const [loading, setLoading] = useState(false)
+  const [error, setError] = useState<string | null>(null)
+
+  const queryString = useMemo(() => {
+    const params = new URLSearchParams()
+    Object.entries(filters).forEach(([key, value]) => { if (value.trim()) params.set(key, value.trim()) })
+    const qs = params.toString()
+    return qs ? `?${qs}` : ""
+  }, [filters])
+
+  const fetchDisputes = useCallback(async (source: Filters) => {
+    try {
+      setLoading(true)
+      setError(null)
+      const query: Record<string, string> = {}
+      Object.entries(source).forEach(([key, value]) => { if (value.trim()) query[key] = value.trim() })
+      const json = await adminFetch<{ disputes: Dispute[] }>("/admin/paypal/disputes", { query })
+      setDisputes(json?.disputes ?? [])
+    } catch (fetchError: unknown) {
+      setError(fetchError instanceof Error ? fetchError.message : "Failed to load disputes")
+      setDisputes([])
+    } finally {
+      setLoading(false)
+    }
+  }, [])
+
+  useEffect(() => { fetchDisputes(EMPTY_FILTERS) }, [fetchDisputes])
+
+  const onSubmit = (event: React.FormEvent) => { event.preventDefault(); fetchDisputes(filters) }
+  const onReset = () => { setFilters({ ...EMPTY_FILTERS }); fetchDisputes(EMPTY_FILTERS) }
+
+  return (
+    <div className="p-6">
+      <div className="flex flex-col gap-6">
+        <div>
+          <h1 className="text-xl font-semibold text-ui-fg-base">PayPal Disputes</h1>
+          <p className="mt-1 text-sm text-ui-fg-subtle">Review PayPal dispute activity tied to your Medusa orders. This view is read-only.</p>
+        </div>
+        <PayPalTabs />
+        <div className="rounded-xl border border-ui-border-base bg-ui-bg-base shadow-sm">
+          <div className="border-b border-ui-border-base p-4">
+            <div className="text-base font-semibold text-ui-fg-base">Filters</div>
+          </div>
+          <div className="p-4">
+            <form onSubmit={onSubmit} className="flex flex-col gap-4">
+              <div className="grid grid-cols-1 gap-4 md:grid-cols-4">
+                <label className="flex flex-col gap-1 text-sm text-ui-fg-subtle">
+                  Dispute ID
+                  <input className="rounded-md border border-ui-border-base bg-ui-bg-base px-3 py-2 text-sm text-ui-fg-base" value={filters.dispute_id} onChange={(e) => setFilters((p) => ({ ...p, dispute_id: e.target.value }))} placeholder="PP-D-123" />
+                </label>
+                <label className="flex flex-col gap-1 text-sm text-ui-fg-subtle">
+                  Status
+                  <input className="rounded-md border border-ui-border-base bg-ui-bg-base px-3 py-2 text-sm text-ui-fg-base" value={filters.status} onChange={(e) => setFilters((p) => ({ ...p, status: e.target.value }))} placeholder="OPEN" />
+                </label>
+                <label className="flex flex-col gap-1 text-sm text-ui-fg-subtle">
+                  Order ID
+                  <input className="rounded-md border border-ui-border-base bg-ui-bg-base px-3 py-2 text-sm text-ui-fg-base" value={filters.order_id} onChange={(e) => setFilters((p) => ({ ...p, order_id: e.target.value }))} placeholder="order_..." />
+                </label>
+                <label className="flex flex-col gap-1 text-sm text-ui-fg-subtle">
+                  Cart ID
+                  <input className="rounded-md border border-ui-border-base bg-ui-bg-base px-3 py-2 text-sm text-ui-fg-base" value={filters.cart_id} onChange={(e) => setFilters((p) => ({ ...p, cart_id: e.target.value }))} placeholder="cart_..." />
+                </label>
+              </div>
+              <div className="flex flex-wrap gap-3">
+                <button type="submit" className="rounded-md bg-ui-fg-base px-4 py-2 text-sm font-medium text-ui-bg-base" disabled={loading}>{loading ? "Loading..." : "Apply filters"}</button>
+                <button type="button" className="rounded-md border border-ui-border-base px-4 py-2 text-sm text-ui-fg-base" onClick={onReset} disabled={loading}>Reset</button>
+                <span className="text-sm text-ui-fg-subtle">Showing {disputes.length} dispute{disputes.length === 1 ? "" : "s"}{queryString ? " (filtered)" : ""}</span>
+              </div>
+            </form>
+          </div>
+        </div>
+        <div className="rounded-xl border border-ui-border-base bg-ui-bg-base shadow-sm">
+          <div className="border-b border-ui-border-base p-4">
+            <div className="text-base font-semibold text-ui-fg-base">Dispute Records</div>
+          </div>
+          <div className="overflow-x-auto">
+            <table className="min-w-full divide-y divide-ui-border-base text-sm">
+              <thead className="bg-ui-bg-subtle">
+                <tr className="text-left text-ui-fg-subtle">
+                  <th className="px-4 py-3 font-medium">Dispute</th>
+                  <th className="px-4 py-3 font-medium">Status</th>
+                  <th className="px-4 py-3 font-medium">Reason</th>
+                  <th className="px-4 py-3 font-medium">Stage</th>
+                  <th className="px-4 py-3 font-medium">Amount</th>
+                  <th className="px-4 py-3 font-medium">Order</th>
+                  <th className="px-4 py-3 font-medium">Cart</th>
+                  <th className="px-4 py-3 font-medium">Updated</th>
+                </tr>
+              </thead>
+              <tbody className="divide-y divide-ui-border-base text-ui-fg-base">
+                {disputes.length === 0 ? (
+                  <tr><td className="px-4 py-6 text-center text-ui-fg-subtle" colSpan={8}>{loading ? "Loading disputes..." : "No disputes found."}</td></tr>
+                ) : (
+                  disputes.map((dispute) => (
+                    <tr key={dispute.id}>
+                      <td className="px-4 py-3"><div className="font-medium text-ui-fg-base">{dispute.dispute_id}</div><div className="text-xs text-ui-fg-subtle">{dispute.transaction_id || "No transaction"}</div></td>
+                      <td className="px-4 py-3">{dispute.status || "Unknown"}</td>
+                      <td className="px-4 py-3">{dispute.reason || "-"}</td>
+                      <td className="px-4 py-3">{dispute.stage || "-"}</td>
+                      <td className="px-4 py-3">{dispute.amount ? `${dispute.amount} ${dispute.currency_code || ""}` : "-"}</td>
+                      <td className="px-4 py-3">{dispute.order_id || "-"}</td>
+                      <td className="px-4 py-3">{dispute.cart_id || "-"}</td>
+                      <td className="px-4 py-3 text-ui-fg-subtle">{formatDate(dispute.updated_at || dispute.created_at)}</td>
+                    </tr>
+                  ))
+                )}
+              </tbody>
+            </table>
+          </div>
+          {error ? <div className="border-t border-ui-border-base px-4 py-3 text-sm text-ui-fg-error">{error}</div> : null}
+        </div>
+      </div>
+    </div>
+  )
+}