@easypayment/medusa-paypal 0.3.0 → 0.3.2

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

@@ -1,599 +1,510 @@
-import React, { useEffect, useMemo, useRef, 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 ButtonColor = "gold" | "blue" | "silver" | "black" | "white"
-type ButtonShape = "rect" | "pill"
-type ButtonWidth = "small" | "medium" | "large" | "responsive"
-type ButtonLabel = "paypal" | "checkout" | "buynow" | "pay"
-
-type DisplayLocation =
-  | "product"
-  | "cart"
-  | "checkout"
-  | "express"
-  | "mini_cart"
-
-type DisabledButton =
-  | "paypal"
-  | "paylater"
-  | "card"
-  | "venmo"
-  | "applepay"
-  | "googlepay"
-
-type PayPalSettingsForm = {
-  enabled: boolean
-  title: string
-  description: string
-  displayOn: DisplayLocation[]
-  disableButtons: DisabledButton[]
-  buttonColor: ButtonColor
-  buttonShape: ButtonShape
-  buttonWidth: ButtonWidth
-  buttonHeight: number
-  buttonLabel: ButtonLabel
-}
-
-const DISPLAY_LOCATION_OPTIONS: { value: DisplayLocation; label: string; disabled?: boolean; hint?: string }[] = [
-  { value: "product", label: "Product Page" },
-  { value: "cart", label: "Cart Page" },
-  { value: "express", label: "Express Checkout" },
-  { value: "checkout", label: "Checkout Page", disabled: true, hint: "Locked by PayPal eligibility / checkout config" },
-  { value: "mini_cart", label: "Mini Cart (Side Cart)" },
-]
-
-const DISABLE_BUTTON_OPTIONS: { value: DisabledButton; label: string }[] = [
-  { value: "paypal", label: "PayPal" },
-  { value: "paylater", label: "Pay Later" },
-  { value: "card", label: "Debit / Credit Card" },
-  { value: "venmo", label: "Venmo" },
-  { value: "applepay", label: "Apple Pay" },
-  { value: "googlepay", label: "Google Pay" },
-]
-
-const HIDDEN_DISABLE_BUTTONS = new Set<DisabledButton>(["applepay", "googlepay", "paylater"])
-
-const VISIBLE_DISABLE_BUTTON_OPTIONS = DISABLE_BUTTON_OPTIONS.filter(
-  (option) => !HIDDEN_DISABLE_BUTTONS.has(option.value)
-)
-
-function filterHiddenDisableButtons(list: DisabledButton[] = []) {
-  return list.filter((value) => !HIDDEN_DISABLE_BUTTONS.has(value))
-}
-
-const COLOR_OPTIONS: { value: ButtonColor; label: string }[] = [
-  { value: "gold", label: "Gold (Recommended)" },
-  { value: "blue", label: "Blue" },
-  { value: "silver", label: "Silver" },
-  { value: "black", label: "Black" },
-  { value: "white", label: "White" },
-]
-
-const SHAPE_OPTIONS: { value: ButtonShape; label: string }[] = [
-  { value: "rect", label: "Rect (Recommended)" },
-  { value: "pill", label: "Pill" },
-]
-
-const WIDTH_OPTIONS: { value: ButtonWidth; label: string }[] = [
-  { value: "small", label: "Small" },
-  { value: "medium", label: "Medium" },
-  { value: "large", label: "Large" },
-  { value: "responsive", label: "Responsive" },
-]
-
-const HEIGHT_OPTIONS: number[] = [32, 36, 40, 44, 48, 52, 56]
-
-const LABEL_OPTIONS: { value: ButtonLabel; label: string }[] = [
-  { value: "paypal", label: "PayPal (Recommended)" },
-  { value: "checkout", label: "Checkout" },
-  { value: "buynow", label: "Buy Now" },
-  { value: "pay", label: "Pay" },
-]
-
-function cx(...parts: Array<string | false | undefined | null>) {
-  return parts.filter(Boolean).join(" ")
-}
-
-function Pill({
-  children,
-  onRemove,
-  disabled,
-}: {
-  children: React.ReactNode
-  onRemove?: () => void
-  disabled?: boolean
-}) {
-  return (
-    <span
-      className={cx(
-        "inline-flex items-center gap-1 rounded-md border px-2 py-1 text-sm",
-        disabled ? "opacity-60" : "opacity-100"
-      )}
-    >
-      {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,
-  children,
-  right,
-}: {
-  title: string
-  description?: string
-  children: React.ReactNode
-  right?: 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 PayPalSettingsTab() {
-  const [form, setForm] = useState<PayPalSettingsForm>({
-    enabled: true,
-    title: "PayPal",
-    description: "Pay via PayPal; you can pay with your credit card if you don't have a PayPal account",
-    displayOn: ["product", "cart", "express", "mini_cart"],
-    disableButtons: [],
-    buttonColor: "gold",
-    buttonShape: "rect",
-    buttonWidth: "medium",
-    buttonHeight: 48,
-    buttonLabel: "paypal",
-  })
-  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)
-
-        // BEFORE:
-        // const r = await fetch("/admin/paypal/settings", {
-        //   credentials: "include",
-        //   headers: { Accept: "application/json" },
-        // })
-        // if (!r.ok) return
-        // const json = await r.json()
-        //
-        // AFTER: adminFetch attaches the Bearer token automatically
-        const json = await adminFetch<{ data?: { paypal_settings?: PayPalSettingsForm }; paypal_settings?: PayPalSettingsForm }>(
-          "/admin/paypal/settings"
-        )
-        const payload = (json?.data ?? json) as any
-        const saved = payload?.paypal_settings
-        if (saved && typeof saved === "object") {
-          setForm((prev) => ({
-            ...prev,
-            ...saved,
-            disableButtons: filterHiddenDisableButtons(saved.disableButtons),
-          }))
-        }
-      } catch {
-        // Silently ignore load errors — the form will use defaults
-      } finally {
-        setLoading(false)
-      }
-    })()
-  }, [])
-
-  async function onSave() {
-    try {
-      setSaving(true)
-      const cleaned = {
-        ...form,
-        disableButtons: filterHiddenDisableButtons(form.disableButtons),
-      }
-
-      // BEFORE:
-      // const r = await fetch("/admin/paypal/settings", {
-      //   method: "POST",
-      //   credentials: "include",
-      //   headers: { "Content-Type": "application/json", Accept: "application/json" },
-      //   body: JSON.stringify({ paypal_settings: cleaned }),
-      // })
-      // if (!r.ok) { ... }
-      // const json = await r.json().catch(() => null)
-      //
-      // AFTER: adminFetch attaches the Bearer token automatically
-      const json = await adminFetch<{ data?: { paypal_settings?: PayPalSettingsForm }; paypal_settings?: PayPalSettingsForm }>(
-        "/admin/paypal/settings",
-        {
-          method: "POST",
-          body: { paypal_settings: cleaned as unknown as Record<string, unknown> },
-        }
-      )
-      const payload = (json?.data ?? json) as any
-      const saved = payload?.paypal_settings
-      if (saved && typeof saved === "object") {
-        setForm((prev) => ({
-          ...prev,
-          ...saved,
-          disableButtons: filterHiddenDisableButtons(saved.disableButtons),
-        }))
-      }
-      setToast({ type: "success", message: "Settings saved" })
-      window.setTimeout(() => setToast(null), 2500)
-    } catch (e: unknown) {
-      setToast({
-        type: "error",
-        message:
-          (e instanceof Error ? e.message : "") ||
-          "Failed to save settings.",
-      })
-      window.setTimeout(() => setToast(null), 3500)
-    } finally {
-      setSaving(false)
-    }
-  }
-
-  const displayOnMap = useMemo(() => new Map(DISPLAY_LOCATION_OPTIONS.map((o) => [o.value, o])), [])
-
-  function toggleMulti<T extends string>(key: keyof PayPalSettingsForm, value: T) {
-    setForm((prev) => {
-      const list = (prev[key] as T[]) || []
-      const exists = list.includes(value)
-      const next = exists ? list.filter((v) => v !== value) : [...list, value]
-      return { ...prev, [key]: next }
-    })
-  }
-
-  function removeMulti<T extends string>(key: keyof PayPalSettingsForm, value: T) {
-    setForm((prev) => {
-      const list = (prev[key] as T[]) || []
-      return { ...prev, [key]: list.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 className="flex items-center gap-2">
-          </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}
-
-        {/* PayPal Settings */}
-        <SectionCard
-          title="PayPal Settings"
-          description="Enable PayPal, set title/description, and choose where Smart Buttons appear."
-          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 PayPal</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="PayPal"
-              />
-            </FieldRow>
-
-            <FieldRow label="Description">
-              <textarea
-                value={form.description}
-                onChange={(e) => setForm((p) => ({ ...p, description: e.target.value }))}
-                className="min-h-[84px] w-full resize-y 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="Pay via PayPal..."
-              />
-            </FieldRow>
-
-            <FieldRow
-              label="Display PayPal Buttons On"
-              hint="Choose where PayPal Smart Buttons should render."
-            >
-              <div className="flex flex-col gap-2">
-                {/* Selected pills */}
-                <div className="flex flex-wrap gap-2">
-                  {DISPLAY_LOCATION_OPTIONS.filter((o) => form.displayOn.includes(o.value)).map((o) => (
-                    <Pill
-                      key={o.value}
-                      disabled={o.disabled}
-                      onRemove={
-                        o.disabled
-                          ? undefined
-                          : () => removeMulti<DisplayLocation>("displayOn", o.value)
-                      }
-                    >
-                      {o.label}
-                      {o.disabled ? (
-                        <span className="ml-1 rounded bg-ui-bg-subtle px-1 py-[1px] text-[10px] text-ui-fg-subtle">
-                          Locked
-                        </span>
-                      ) : null}
-                    </Pill>
-                  ))}
-                  {form.displayOn.length === 0 ? (
-                    <span className="text-sm text-ui-fg-subtle">No locations selected.</span>
-                  ) : null}
-                </div>
-
-                {/* Toggle list */}
-                <div className="rounded-md border border-ui-border-base p-3">
-                  <div className="grid gap-2 md:grid-cols-2">
-                    {DISPLAY_LOCATION_OPTIONS.map((o) => {
-                      const checked = form.displayOn.includes(o.value)
-                      return (
-                        <label
-                          key={o.value}
-                          className={cx(
-                            "flex items-start gap-2 rounded-md p-2",
-                            o.disabled ? "opacity-60" : "hover:bg-ui-bg-subtle"
-                          )}
-                        >
-                          <input
-                            type="checkbox"
-                            disabled={o.disabled}
-                            checked={checked}
-                            onChange={() => toggleMulti<DisplayLocation>("displayOn", o.value)}
-                            className="mt-0.5 h-4 w-4 rounded border-ui-border-base"
-                          />
-                          <span className="flex flex-col">
-                            <span className="text-sm text-ui-fg-base">{o.label}</span>
-                            {o.hint ? <span className="text-xs text-ui-fg-subtle">{o.hint}</span> : null}
-                          </span>
-                        </label>
-                      )
-                    })}
-                  </div>
-                </div>
-              </div>
-            </FieldRow>
-          </div>
-        </SectionCard>
-
-        {/* Button Appearance */}
-        <SectionCard
-          title="Button Appearance"
-          description="Control PayPal Smart Button styling (color/shape/size/label) and optionally disable specific buttons."
-        >
-          <div className="divide-y divide-ui-border-base">
-            <FieldRow
-              label="Disable Specific Payment Buttons"
-              hint="Hide individual funding sources (ex: Card, Venmo)."
-            >
-              <div className="flex flex-col gap-2">
-                <div className="flex flex-wrap gap-2">
-                  {filterHiddenDisableButtons(form.disableButtons).map((v) => {
-                    const opt = VISIBLE_DISABLE_BUTTON_OPTIONS.find((o) => o.value === v)
-                    return (
-                      <Pill key={v} onRemove={() => removeMulti<DisabledButton>("disableButtons", v)}>
-                        {opt?.label ?? v}
-                      </Pill>
-                    )
-                  })}
-                  {filterHiddenDisableButtons(form.disableButtons).length === 0 ? (
-                    <span className="text-sm text-ui-fg-subtle">No buttons disabled.</span>
-                  ) : null}
-                </div>
-
-                <div className="rounded-md border border-ui-border-base p-3">
-                  <div className="grid gap-2 md:grid-cols-2">
-                    {VISIBLE_DISABLE_BUTTON_OPTIONS.map((o) => {
-                      const checked = form.disableButtons.includes(o.value)
-                      return (
-                        <label key={o.value} className="flex items-center gap-2 rounded-md p-2 hover:bg-ui-bg-subtle">
-                          <input
-                            type="checkbox"
-                            checked={checked}
-                            onChange={() => toggleMulti<DisabledButton>("disableButtons", o.value)}
-                            className="h-4 w-4 rounded border-ui-border-base"
-                          />
-                          <span className="text-sm text-ui-fg-base">{o.label}</span>
-                        </label>
-                      )
-                    })}
-                  </div>
-                </div>
-              </div>
-            </FieldRow>
-
-            <FieldRow label="Button Color">
-              <select
-                value={form.buttonColor}
-                onChange={(e) => setForm((p) => ({ ...p, buttonColor: e.target.value as ButtonColor }))}
-                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"
-              >
-                {COLOR_OPTIONS.map((o) => (
-                  <option key={o.value} value={o.value}>
-                    {o.label}
-                  </option>
-                ))}
-              </select>
-            </FieldRow>
-
-            <FieldRow label="Button Shape">
-              <select
-                value={form.buttonShape}
-                onChange={(e) => setForm((p) => ({ ...p, buttonShape: e.target.value as ButtonShape }))}
-                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"
-              >
-                {SHAPE_OPTIONS.map((o) => (
-                  <option key={o.value} value={o.value}>
-                    {o.label}
-                  </option>
-                ))}
-              </select>
-            </FieldRow>
-
-            <FieldRow label="Button Width">
-              <select
-                value={form.buttonWidth}
-                onChange={(e) => setForm((p) => ({ ...p, buttonWidth: e.target.value as ButtonWidth }))}
-                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"
-              >
-                {WIDTH_OPTIONS.map((o) => (
-                  <option key={o.value} value={o.value}>
-                    {o.label}
-                  </option>
-                ))}
-              </select>
-            </FieldRow>
-
-            <FieldRow label="Button Height">
-              <select
-                value={String(form.buttonHeight)}
-                onChange={(e) => setForm((p) => ({ ...p, buttonHeight: Number(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"
-              >
-                {HEIGHT_OPTIONS.map((h) => (
-                  <option key={h} value={h}>
-                    {h} px
-                  </option>
-                ))}
-              </select>
-            </FieldRow>
-
-            <FieldRow label="Button Label">
-              <select
-                value={form.buttonLabel}
-                onChange={(e) => setForm((p) => ({ ...p, buttonLabel: e.target.value as ButtonLabel }))}
-                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"
-              >
-                {LABEL_OPTIONS.map((o) => (
-                  <option key={o.value} value={o.value}>
-                    {o.label}
-                  </option>
-                ))}
-              </select>
-            </FieldRow>
-          </div>
-        </SectionCard>
-
-        {/* Optional: preview block (pure UI) */}
-        <div className="mt-6 rounded-md border border-ui-border-base bg-ui-bg-subtle p-4">
-          <div className="text-sm font-medium text-ui-fg-base">Preview (UI only)</div>
-          <div className="mt-2 text-sm text-ui-fg-subtle">
-            Color: <span className="text-ui-fg-base">{form.buttonColor}</span> · Shape:{" "}
-            <span className="text-ui-fg-base">{form.buttonShape}</span> · Width:{" "}
-            <span className="text-ui-fg-base">{form.buttonWidth}</span> · Height:{" "}
-            <span className="text-ui-fg-base">{form.buttonHeight}px</span> · Label:{" "}
-            <span className="text-ui-fg-base">{form.buttonLabel}</span>
-          </div>
-        </div>
-      </div>
-    </div>
-  )
-}
+import React, { useEffect, useRef, 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 ButtonColor = "gold" | "blue" | "silver" | "black" | "white"
+type ButtonShape = "rect" | "pill"
+type ButtonWidth = "small" | "medium" | "large" | "responsive"
+type ButtonLabel = "paypal" | "checkout" | "buynow" | "pay"
+
+type DisabledButton =
+  | "paypal"
+  | "paylater"
+  | "card"
+  | "venmo"
+  | "applepay"
+  | "googlepay"
+
+type PayPalSettingsForm = {
+  enabled: boolean
+  title: string
+  description: string
+  disableButtons: DisabledButton[]
+  buttonColor: ButtonColor
+  buttonShape: ButtonShape
+  buttonWidth: ButtonWidth
+  buttonHeight: number
+  buttonLabel: ButtonLabel
+}
+
+const DISABLE_BUTTON_OPTIONS: { value: DisabledButton; label: string }[] = [
+  { value: "paypal", label: "PayPal" },
+  { value: "paylater", label: "Pay Later" },
+  { value: "card", label: "Debit / Credit Card" },
+  { value: "venmo", label: "Venmo" },
+  { value: "applepay", label: "Apple Pay" },
+  { value: "googlepay", label: "Google Pay" },
+]
+
+const HIDDEN_DISABLE_BUTTONS = new Set<DisabledButton>(["applepay", "googlepay", "paylater"])
+
+const VISIBLE_DISABLE_BUTTON_OPTIONS = DISABLE_BUTTON_OPTIONS.filter(
+  (option) => !HIDDEN_DISABLE_BUTTONS.has(option.value)
+)
+
+function filterHiddenDisableButtons(list: DisabledButton[] = []) {
+  return list.filter((value) => !HIDDEN_DISABLE_BUTTONS.has(value))
+}
+
+const COLOR_OPTIONS: { value: ButtonColor; label: string }[] = [
+  { value: "gold", label: "Gold (Recommended)" },
+  { value: "blue", label: "Blue" },
+  { value: "silver", label: "Silver" },
+  { value: "black", label: "Black" },
+  { value: "white", label: "White" },
+]
+
+const SHAPE_OPTIONS: { value: ButtonShape; label: string }[] = [
+  { value: "rect", label: "Rect (Recommended)" },
+  { value: "pill", label: "Pill" },
+]
+
+const WIDTH_OPTIONS: { value: ButtonWidth; label: string }[] = [
+  { value: "small", label: "Small" },
+  { value: "medium", label: "Medium" },
+  { value: "large", label: "Large" },
+  { value: "responsive", label: "Responsive" },
+]
+
+const HEIGHT_OPTIONS: number[] = [32, 36, 40, 44, 48, 52, 56]
+
+const LABEL_OPTIONS: { value: ButtonLabel; label: string }[] = [
+  { value: "paypal", label: "PayPal (Recommended)" },
+  { value: "checkout", label: "Checkout" },
+  { value: "buynow", label: "Buy Now" },
+  { value: "pay", label: "Pay" },
+]
+
+function cx(...parts: Array<string | false | undefined | null>) {
+  return parts.filter(Boolean).join(" ")
+}
+
+function Pill({
+  children,
+  onRemove,
+  disabled,
+}: {
+  children: React.ReactNode
+  onRemove?: () => void
+  disabled?: boolean
+}) {
+  return (
+    <span
+      className={cx(
+        "inline-flex items-center gap-1 rounded-md border px-2 py-1 text-sm",
+        disabled ? "opacity-60" : "opacity-100"
+      )}
+    >
+      {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,
+  children,
+  right,
+}: {
+  title: string
+  description?: string
+  children: React.ReactNode
+  right?: 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 PayPalSettingsTab() {
+  const [form, setForm] = useState<PayPalSettingsForm>({
+    enabled: true,
+    title: "PayPal",
+    description: "Pay via PayPal; you can pay with your credit card if you don't have a PayPal account",
+    disableButtons: [],
+    buttonColor: "gold",
+    buttonShape: "rect",
+    buttonWidth: "medium",
+    buttonHeight: 48,
+    buttonLabel: "paypal",
+  })
+  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)
+
+        // BEFORE:
+        // const r = await fetch("/admin/paypal/settings", {
+        //   credentials: "include",
+        //   headers: { Accept: "application/json" },
+        // })
+        // if (!r.ok) return
+        // const json = await r.json()
+        //
+        // AFTER: adminFetch attaches the Bearer token automatically
+        const json = await adminFetch<{ data?: { paypal_settings?: PayPalSettingsForm }; paypal_settings?: PayPalSettingsForm }>(
+          "/admin/paypal/settings"
+        )
+        const payload = (json?.data ?? json) as any
+        const saved = payload?.paypal_settings
+        if (saved && typeof saved === "object") {
+          setForm((prev) => ({
+            ...prev,
+            ...saved,
+            disableButtons: filterHiddenDisableButtons(saved.disableButtons),
+          }))
+        }
+      } catch {
+        // Silently ignore load errors — the form will use defaults
+      } finally {
+        setLoading(false)
+      }
+    })()
+  }, [])
+
+  async function onSave() {
+    try {
+      setSaving(true)
+      const cleaned = {
+        ...form,
+        disableButtons: filterHiddenDisableButtons(form.disableButtons),
+      }
+
+      // BEFORE:
+      // const r = await fetch("/admin/paypal/settings", {
+      //   method: "POST",
+      //   credentials: "include",
+      //   headers: { "Content-Type": "application/json", Accept: "application/json" },
+      //   body: JSON.stringify({ paypal_settings: cleaned }),
+      // })
+      // if (!r.ok) { ... }
+      // const json = await r.json().catch(() => null)
+      //
+      // AFTER: adminFetch attaches the Bearer token automatically
+      const json = await adminFetch<{ data?: { paypal_settings?: PayPalSettingsForm }; paypal_settings?: PayPalSettingsForm }>(
+        "/admin/paypal/settings",
+        {
+          method: "POST",
+          body: { paypal_settings: cleaned as unknown as Record<string, unknown> },
+        }
+      )
+      const payload = (json?.data ?? json) as any
+      const saved = payload?.paypal_settings
+      if (saved && typeof saved === "object") {
+        setForm((prev) => ({
+          ...prev,
+          ...saved,
+          disableButtons: filterHiddenDisableButtons(saved.disableButtons),
+        }))
+      }
+      setToast({ type: "success", message: "Settings saved" })
+      window.setTimeout(() => setToast(null), 2500)
+    } catch (e: unknown) {
+      setToast({
+        type: "error",
+        message:
+          (e instanceof Error ? e.message : "") ||
+          "Failed to save settings.",
+      })
+      window.setTimeout(() => setToast(null), 3500)
+    } finally {
+      setSaving(false)
+    }
+  }
+
+  function toggleMulti<T extends string>(key: keyof PayPalSettingsForm, value: T) {
+    setForm((prev) => {
+      const list = (prev[key] as T[]) || []
+      const exists = list.includes(value)
+      const next = exists ? list.filter((v) => v !== value) : [...list, value]
+      return { ...prev, [key]: next }
+    })
+  }
+
+  function removeMulti<T extends string>(key: keyof PayPalSettingsForm, value: T) {
+    setForm((prev) => {
+      const list = (prev[key] as T[]) || []
+      return { ...prev, [key]: list.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 className="flex items-center gap-2">
+          </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}
+
+        {/* PayPal Settings */}
+        <SectionCard
+          title="PayPal Settings"
+          description="Enable PayPal and configure checkout title."
+          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 PayPal</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="PayPal"
+              />
+            </FieldRow>
+
+          </div>
+        </SectionCard>
+
+        {/* Button Appearance */}
+        <SectionCard
+          title="Button Appearance"
+          description="Control PayPal Smart Button styling (color/shape/size/label) and optionally disable specific buttons."
+        >
+          <div className="divide-y divide-ui-border-base">
+            <FieldRow
+              label="Disable Specific Payment Buttons"
+              hint="Hide individual funding sources (ex: Card, Venmo)."
+            >
+              <div className="flex flex-col gap-2">
+                <div className="flex flex-wrap gap-2">
+                  {filterHiddenDisableButtons(form.disableButtons).map((v) => {
+                    const opt = VISIBLE_DISABLE_BUTTON_OPTIONS.find((o) => o.value === v)
+                    return (
+                      <Pill key={v} onRemove={() => removeMulti<DisabledButton>("disableButtons", v)}>
+                        {opt?.label ?? v}
+                      </Pill>
+                    )
+                  })}
+                  {filterHiddenDisableButtons(form.disableButtons).length === 0 ? (
+                    <span className="text-sm text-ui-fg-subtle">No buttons disabled.</span>
+                  ) : null}
+                </div>
+
+                <div className="rounded-md border border-ui-border-base p-3">
+                  <div className="grid gap-2 md:grid-cols-2">
+                    {VISIBLE_DISABLE_BUTTON_OPTIONS.map((o) => {
+                      const checked = form.disableButtons.includes(o.value)
+                      return (
+                        <label key={o.value} className="flex items-center gap-2 rounded-md p-2 hover:bg-ui-bg-subtle">
+                          <input
+                            type="checkbox"
+                            checked={checked}
+                            onChange={() => toggleMulti<DisabledButton>("disableButtons", o.value)}
+                            className="h-4 w-4 rounded border-ui-border-base"
+                          />
+                          <span className="text-sm text-ui-fg-base">{o.label}</span>
+                        </label>
+                      )
+                    })}
+                  </div>
+                </div>
+              </div>
+            </FieldRow>
+
+            <FieldRow label="Button Color">
+              <select
+                value={form.buttonColor}
+                onChange={(e) => setForm((p) => ({ ...p, buttonColor: e.target.value as ButtonColor }))}
+                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"
+              >
+                {COLOR_OPTIONS.map((o) => (
+                  <option key={o.value} value={o.value}>
+                    {o.label}
+                  </option>
+                ))}
+              </select>
+            </FieldRow>
+
+            <FieldRow label="Button Shape">
+              <select
+                value={form.buttonShape}
+                onChange={(e) => setForm((p) => ({ ...p, buttonShape: e.target.value as ButtonShape }))}
+                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"
+              >
+                {SHAPE_OPTIONS.map((o) => (
+                  <option key={o.value} value={o.value}>
+                    {o.label}
+                  </option>
+                ))}
+              </select>
+            </FieldRow>
+
+            <FieldRow label="Button Width">
+              <select
+                value={form.buttonWidth}
+                onChange={(e) => setForm((p) => ({ ...p, buttonWidth: e.target.value as ButtonWidth }))}
+                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"
+              >
+                {WIDTH_OPTIONS.map((o) => (
+                  <option key={o.value} value={o.value}>
+                    {o.label}
+                  </option>
+                ))}
+              </select>
+            </FieldRow>
+
+            <FieldRow label="Button Height">
+              <select
+                value={String(form.buttonHeight)}
+                onChange={(e) => setForm((p) => ({ ...p, buttonHeight: Number(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"
+              >
+                {HEIGHT_OPTIONS.map((h) => (
+                  <option key={h} value={h}>
+                    {h} px
+                  </option>
+                ))}
+              </select>
+            </FieldRow>
+
+            <FieldRow label="Button Label">
+              <select
+                value={form.buttonLabel}
+                onChange={(e) => setForm((p) => ({ ...p, buttonLabel: e.target.value as ButtonLabel }))}
+                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"
+              >
+                {LABEL_OPTIONS.map((o) => (
+                  <option key={o.value} value={o.value}>
+                    {o.label}
+                  </option>
+                ))}
+              </select>
+            </FieldRow>
+          </div>
+        </SectionCard>
+
+        {/* Optional: preview block (pure UI) */}
+        <div className="mt-6 rounded-md border border-ui-border-base bg-ui-bg-subtle p-4">
+          <div className="text-sm font-medium text-ui-fg-base">Preview (UI only)</div>
+          <div className="mt-2 text-sm text-ui-fg-subtle">
+            Color: <span className="text-ui-fg-base">{form.buttonColor}</span> · Shape:{" "}
+            <span className="text-ui-fg-base">{form.buttonShape}</span> · Width:{" "}
+            <span className="text-ui-fg-base">{form.buttonWidth}</span> · Height:{" "}
+            <span className="text-ui-fg-base">{form.buttonHeight}px</span> · Label:{" "}
+            <span className="text-ui-fg-base">{form.buttonLabel}</span>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}