@easypayment/medusa-paypal 0.1.0

package/src/admin/routes/settings/paypal/advanced-card-payments/page.tsx

@@ -0,0 +1,381 @@
+import React, {useEffect, useMemo, useRef, useState} from "react"
+import PayPalTabs from "../_components/Tabs"
+
+type DisabledCardBrand =
+  | "visa"
+  | "mastercard"
+  | "amex"
+  | "discover"
+  | "diners"
+  | "jcb"
+  | "unionpay"
+
+type ThreeDSContingency = "sli" | "when_required" | "always"
+
+type AdvancedCardPaymentsForm = {
+  enabled: boolean
+  title: string
+  disabledCards: DisabledCardBrand[]
+  threeDS: ThreeDSContingency
+  cardSaveEnabled: boolean
+}
+
+const DEFAULT_FORM: AdvancedCardPaymentsForm = {
+  enabled: true,
+  title: "Credit or Debit Card",
+  disabledCards: [],
+  threeDS: "when_required",
+  cardSaveEnabled: false,
+}
+
+function mergeWithDefaults(saved?: Partial<AdvancedCardPaymentsForm> | null) {
+ if (!saved) return { ...DEFAULT_FORM }
+ const entries = Object.entries(saved).filter(([, value]) => value !== undefined)
+  return {
+    ...DEFAULT_FORM,
+    ...(Object.fromEntries(entries) as Partial<AdvancedCardPaymentsForm>),
+  }
+}
+
+const CARD_BRANDS: { value: DisabledCardBrand; label: string }[] = [
+  { value: "visa", label: "Visa" },
+  { value: "mastercard", label: "Mastercard" },
+  { value: "amex", label: "American Express" },
+  { value: "discover", label: "Discover" },
+  { value: "diners", label: "Diners Club" },
+  { value: "jcb", label: "JCB" },
+  { value: "unionpay", label: "UnionPay" },
+]
+
+const THREE_DS_OPTIONS: { value: ThreeDSContingency; label: string; hint?: string }[] = [
+  {
+    value: "when_required",
+    label: "3D Secure when required",
+    hint: "Triggers 3DS only when the card / issuer requires it.",
+  },
+  {
+    value: "sli",
+    label: "3D Secure (SCA) / liability shift (recommended)",
+    hint: "Attempts to optimize for liability shift while remaining compliant.",
+  },
+  {
+    value: "always",
+    label: "Always request 3D Secure",
+    hint: "Forces 3DS challenge whenever possible (may reduce conversion).",
+  },
+]
+
+function cx(...parts: Array<string | false | undefined | null>) {
+  return parts.filter(Boolean).join(" ")
+}
+
+function Pill({
+  children,
+  onRemove,
+}: {
+  children: React.ReactNode
+  onRemove?: () => void
+}) {
+  return (
+    <span className="inline-flex items-center gap-1 rounded-md border border-ui-border-base bg-ui-bg-base px-2 py-1 text-sm text-ui-fg-base">
+      {children}
+      {onRemove ? (
+        <button
+          type="button"
+          onClick={onRemove}
+          className="ml-1 rounded px-1 text-ui-fg-subtle hover:text-ui-fg-base"
+          aria-label="Remove"
+        >
+          ×
+        </button>
+      ) : null}
+    </span>
+  )
+}
+
+function SectionCard({
+  title,
+  description,
+  right,
+  children,
+}: {
+  title: string
+  description?: string
+  right?: React.ReactNode
+  children: React.ReactNode
+}) {
+  return (
+    <div className="rounded-xl border border-ui-border-base bg-ui-bg-base shadow-sm">
+      <div className="flex items-start justify-between gap-4 border-b border-ui-border-base p-4">
+        <div>
+          <div className="text-base font-semibold text-ui-fg-base">{title}</div>
+          {description ? <div className="mt-1 text-sm text-ui-fg-subtle">{description}</div> : null}
+        </div>
+        {right}
+      </div>
+      <div className="p-4">{children}</div>
+    </div>
+  )
+}
+
+function FieldRow({
+  label,
+  hint,
+  children,
+}: {
+  label: string
+  hint?: React.ReactNode
+  children: React.ReactNode
+}) {
+  return (
+    <div className="grid grid-cols-12 items-start gap-4 py-3">
+      <div className="col-span-12 md:col-span-4">
+        <div className="text-sm font-medium text-ui-fg-base">{label}</div>
+        {hint ? <div className="mt-1 text-xs text-ui-fg-subtle">{hint}</div> : null}
+      </div>
+      <div className="col-span-12 md:col-span-8">{children}</div>
+    </div>
+  )
+}
+
+export default function AdvancedCardPaymentsTab() {
+const [form, setForm] = useState<AdvancedCardPaymentsForm>(() => ({ ...DEFAULT_FORM }))
+const [loading, setLoading] = useState(false)
+const [saving, setSaving] = useState(false)
+
+const [toast, setToast] = useState<{ type: "success" | "error"; message: string } | null>(null)
+const didInit = useRef(false)
+
+useEffect(() => {
+  if (didInit.current) return
+  didInit.current = true
+
+  ;(async () => {
+    try {
+      setLoading(true)
+      const r = await fetch("/admin/paypal/settings", {
+        credentials: "include",
+        headers: { "Accept": "application/json" },
+      })
+      if (!r.ok) return
+      const json = await r.json()
+      const payload = (json?.data ?? json) as any
+      const saved = payload?.advanced_card_payments
+      if (saved && typeof saved === "object") {
+        setForm(mergeWithDefaults(saved))
+      }
+    } finally {
+      setLoading(false)
+    }
+  })()
+}, [])
+
+async function onSave() {
+  try {
+    setSaving(true)
+    const r = await fetch("/admin/paypal/settings", {
+      method: "POST",
+      credentials: "include",
+      headers: {
+        "Content-Type": "application/json",
+        "Accept": "application/json",
+      },
+      body: JSON.stringify({ advanced_card_payments: form }),
+    })
+    if (!r.ok) {
+      const t = await r.text()
+      setToast({ type: "error", message: "Failed to save settings. " + t })
+      window.setTimeout(() => setToast(null), 3500)
+      return
+    }
+    const json = await r.json().catch(() => null)
+    const payload = (json?.data ?? json) as any
+    const saved = payload?.advanced_card_payments
+    if (saved && typeof saved === "object") {
+      setForm(mergeWithDefaults(saved))
+    }
+    setToast({ type: "success", message: "Settings saved" })
+    window.setTimeout(() => setToast(null), 2500)
+  } finally {
+    setSaving(false)
+  }
+}
+
+
+  const disabledSet = useMemo(() => new Set(form.disabledCards), [form.disabledCards])
+
+  function toggleDisabledCard(value: DisabledCardBrand) {
+    setForm((prev) => {
+      const exists = prev.disabledCards.includes(value)
+      return {
+        ...prev,
+        disabledCards: exists
+          ? prev.disabledCards.filter((v) => v !== value)
+          : [...prev.disabledCards, value],
+      }
+    })
+  }
+
+  function removeDisabledCard(value: DisabledCardBrand) {
+    setForm((prev) => ({
+      ...prev,
+      disabledCards: prev.disabledCards.filter((v) => v !== value),
+    }))
+  }
+
+  return (
+    <div className="p-6">
+      <div className="flex flex-col gap-6">
+        <div className="flex items-start justify-between gap-4">
+          <div>
+            <h1 className="text-xl font-semibold text-ui-fg-base">PayPal Gateway By Easy Payment</h1>
+           
+          </div>
+
+        
+        </div>
+
+        <PayPalTabs />
+
+        
+        {toast ? (
+          <div
+            className="fixed right-6 top-6 z-50 rounded-md border border-ui-border-base bg-ui-bg-base px-4 py-3 text-sm shadow-lg"
+            role="status"
+            aria-live="polite"
+          >
+            <span className={toast.type === "success" ? "text-ui-fg-base" : "text-ui-fg-error"}>
+              {toast.message}
+            </span>
+          </div>
+        ) : null}
+<SectionCard
+          title="Advanced Card Payments"
+          description="Control card checkout settings, 3D Secure behavior, and card saving."
+        
+          
+          right={(
+            <div className="flex items-center gap-3">
+              <button
+                type="button"
+                onClick={onSave}
+                disabled={saving || loading}
+                className="rounded-md bg-ui-button-neutral px-4 py-2 text-sm font-medium text-ui-fg-on-color shadow-sm hover:opacity-90 disabled:opacity-60"
+              >
+                {saving ? "Saving..." : "Save settings"}
+              </button>
+              {loading ? <span className="text-sm text-ui-fg-subtle">Loading…</span> : null}
+            </div>
+          )}
+        >
+          <div className="divide-y divide-ui-border-base">
+            <FieldRow label="Enable/Disable">
+              <label className="inline-flex items-center gap-2">
+                <input
+                  type="checkbox"
+                  checked={form.enabled}
+                  onChange={(e) => setForm((p) => ({ ...p, enabled: e.target.checked }))}
+                  className="h-4 w-4 rounded border-ui-border-base"
+                />
+                <span className="text-sm text-ui-fg-base">Enable Advanced Credit/Debit Card</span>
+              </label>
+            </FieldRow>
+
+            <FieldRow label="Title">
+              <input
+                value={form.title}
+                onChange={(e) => setForm((p) => ({ ...p, title: e.target.value }))}
+                className="w-full rounded-md border border-ui-border-base bg-ui-bg-base px-3 py-2 text-sm text-ui-fg-base outline-none focus:ring-2 focus:ring-ui-border-interactive"
+                placeholder="Credit or Debit Card"
+              />
+            </FieldRow>
+
+            <FieldRow
+              label="Disable specific credit cards"
+              hint="Select card brands to hide from the card form."
+            >
+              <div className="flex flex-col gap-2">
+                <div className="flex flex-wrap gap-2">
+                  {form.disabledCards.length ? (
+                    form.disabledCards.map((v) => {
+                      const label = CARD_BRANDS.find((b) => b.value === v)?.label ?? v
+                      return (
+                        <Pill key={v} onRemove={() => removeDisabledCard(v)}>
+                          {label}
+                        </Pill>
+                      )
+                    })
+                  ) : (
+                    <span className="text-sm text-ui-fg-subtle">No card brands disabled.</span>
+                  )}
+                </div>
+
+                <div className="rounded-md border border-ui-border-base p-3">
+                  <div className="grid gap-2 md:grid-cols-2">
+                    {CARD_BRANDS.map((b) => {
+                      const checked = disabledSet.has(b.value)
+                      return (
+                        <label
+                          key={b.value}
+                          className={cx(
+                            "flex items-center gap-2 rounded-md p-2",
+                            "hover:bg-ui-bg-subtle"
+                          )}
+                        >
+                          <input
+                            type="checkbox"
+                            checked={checked}
+                            onChange={() => toggleDisabledCard(b.value)}
+                            className="h-4 w-4 rounded border-ui-border-base"
+                          />
+                          <span className="text-sm text-ui-fg-base">{b.label}</span>
+                        </label>
+                      )
+                    })}
+                  </div>
+                </div>
+              </div>
+            </FieldRow>
+
+            <FieldRow
+              label="Contingency for 3D Secure"
+              hint="Choose when 3D Secure should be triggered during card payments."
+            >
+              <div className="flex flex-col gap-2">
+                <select
+                  value={form.threeDS}
+                  onChange={(e) => setForm((p) => ({ ...p, threeDS: e.target.value as ThreeDSContingency }))}
+                  className="w-full rounded-md border border-ui-border-base bg-ui-bg-base px-3 py-2 text-sm text-ui-fg-base outline-none focus:ring-2 focus:ring-ui-border-interactive"
+                >
+                  {THREE_DS_OPTIONS.map((o) => (
+                    <option key={o.value} value={o.value}>
+                      {o.label}
+                    </option>
+                  ))}
+                </select>
+
+                {THREE_DS_OPTIONS.find((o) => o.value === form.threeDS)?.hint ? (
+                  <div className="text-xs text-ui-fg-subtle">
+                    {THREE_DS_OPTIONS.find((o) => o.value === form.threeDS)?.hint}
+                  </div>
+                ) : null}
+              </div>
+            </FieldRow>
+
+            <FieldRow label="Card Save Enabled" hint="Allow customers to save a card at checkout for future use.">
+              <label className="inline-flex items-center gap-2">
+                <input
+                  type="checkbox"
+                  checked={form.cardSaveEnabled}
+                  onChange={(e) => setForm((p) => ({ ...p, cardSaveEnabled: e.target.checked }))}
+                  className="h-4 w-4 rounded border-ui-border-base"
+                />
+                <span className="text-sm text-ui-fg-base">Enable card saving at checkout</span>
+              </label>
+            </FieldRow>
+          </div>
+        </SectionCard>
+      </div>
+    </div>
+  )
+}

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

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

package/src/admin/routes/settings/paypal/audit-logs/page.tsx

@@ -0,0 +1,131 @@
+import React, { useCallback, useEffect, useState } from "react"
+import PayPalTabs from "../_components/Tabs"
+
+type AuditLog = {
+  id: string
+  event_type: string
+  metadata?: Record<string, unknown>
+  created_at?: string | null
+}
+
+function formatDate(value?: string | null) {
+  if (!value) {
+    return ""
+  }
+  const parsed = new Date(value)
+  if (Number.isNaN(parsed.getTime())) {
+    return value
+  }
+  return parsed.toLocaleString()
+}
+
+export default function PayPalAuditLogsPage() {
+  const [logs, setLogs] = useState<AuditLog[]>([])
+  const [loading, setLoading] = useState(false)
+  const [error, setError] = useState<string | null>(null)
+
+  const fetchLogs = useCallback(async () => {
+    try {
+      setLoading(true)
+      setError(null)
+      const response = await fetch("/admin/paypal/audit-logs?limit=50", {
+        credentials: "include",
+        headers: {
+          Accept: "application/json",
+        },
+      })
+
+      if (!response.ok) {
+        const message = await response.text().catch(() => "")
+        throw new Error(message || "Failed to load audit logs.")
+      }
+
+      const data = await response.json().catch(() => ({}))
+      setLogs((data?.logs as AuditLog[]) || [])
+    } catch (fetchError: any) {
+      setError(fetchError?.message || "Failed to load audit logs.")
+      setLogs([])
+    } finally {
+      setLoading(false)
+    }
+  }, [])
+
+  useEffect(() => {
+    fetchLogs()
+  }, [fetchLogs])
+
+  return (
+    <div className="p-6">
+      <div className="flex flex-col gap-6">
+        <div>
+          <h1 className="text-xl font-semibold text-ui-fg-base">PayPal Audit Logs</h1>
+          <p className="mt-1 text-sm text-ui-fg-subtle">
+            Track administrative changes and credential events for PayPal configuration.
+          </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="flex items-center justify-between gap-4">
+              <div className="text-base font-semibold text-ui-fg-base">Latest events</div>
+              <button
+                type="button"
+                onClick={fetchLogs}
+                className="rounded-md border border-ui-border-base px-3 py-2 text-sm text-ui-fg-base"
+                disabled={loading}
+              >
+                {loading ? "Refreshing..." : "Refresh"}
+              </button>
+            </div>
+          </div>
+          <div className="p-4">
+            {error ? (
+              <div className="rounded-md border border-red-200 bg-red-50 p-3 text-sm text-red-600">
+                {error}
+              </div>
+            ) : null}
+
+            {!error && logs.length === 0 ? (
+              <div className="text-sm text-ui-fg-subtle">
+                {loading ? "Loading audit logs..." : "No audit log entries found yet."}
+              </div>
+            ) : null}
+
+            {logs.length > 0 ? (
+              <div className="overflow-x-auto">
+                <table className="min-w-full text-left text-sm">
+                  <thead className="text-ui-fg-muted">
+                    <tr>
+                      <th className="pb-2 pr-4 font-medium">Timestamp</th>
+                      <th className="pb-2 pr-4 font-medium">Event</th>
+                      <th className="pb-2 font-medium">Details</th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    {logs.map((entry) => (
+                      <tr key={entry.id} className="border-t border-ui-border-base">
+                        <td className="py-3 pr-4 text-ui-fg-base">
+                          {formatDate(entry.created_at) || "—"}
+                        </td>
+                        <td className="py-3 pr-4 text-ui-fg-base">
+                          {entry.event_type || "—"}
+                        </td>
+                        <td className="py-3 text-ui-fg-subtle">
+                          <pre className="whitespace-pre-wrap rounded-md bg-ui-bg-subtle p-2 text-xs text-ui-fg-subtle">
+                            {JSON.stringify(entry.metadata || {}, null, 2)}
+                          </pre>
+                        </td>
+                      </tr>
+                    ))}
+                  </tbody>
+                </table>
+              </div>
+            ) : null}
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}