@easypayment/medusa-paypal 0.1.0

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

@@ -0,0 +1,259 @@
+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>
+  )
+}

package/src/admin/routes/settings/paypal/google-pay/page.tsx

@@ -0,0 +1,5 @@
+import { Navigate } from "react-router-dom"
+
+export default function PayPalGooglePayPage() {
+  return <Navigate to="/settings/paypal/connection" replace />
+}

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

@@ -0,0 +1,16 @@
+import React from "react"
+import { defineRouteConfig } from "@medusajs/admin-sdk"
+import { Navigate } from "react-router-dom"
+
+export const config = defineRouteConfig({
+  label: "PayPal",
+  icon: "Coins",
+})
+
+/**
+ * Keep the left-side "PayPal" menu entry stable.
+ * Default tab -> PayPal Connection.
+ */
+export default function PayPalSettingsIndexRoute() {
+  return <Navigate to="connection" replace />
+}

package/src/admin/routes/settings/paypal/pay-later-messaging/page.tsx

@@ -0,0 +1,5 @@
+import { Navigate } from "react-router-dom"
+
+export default function PayPalPayLaterMessagingPage() {
+  return <Navigate to="/settings/paypal/connection" replace />
+}