@easypayment/medusa-paypal 0.2.2 → 0.2.3

package/.medusa/server/src/admin/index.js

@@ -336,392 +336,98 @@ function AdditionalSettingsTab() {
     )
   ] }) });
 }
-const DEFAULT_FORM = {
-  enabled: true,
-  title: "Credit or Debit Card",
-  disabledCards: [],
-  threeDS: "when_required",
-  cardSaveEnabled: false
-};
-function mergeWithDefaults(saved) {
-  if (!saved) return { ...DEFAULT_FORM };
-  const entries = Object.entries(saved).filter(([, value]) => value !== void 0);
-  return {
-    ...DEFAULT_FORM,
-    ...Object.fromEntries(entries)
-  };
-}
-const CARD_BRANDS = [
-  { 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: "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)."
+const config = adminSdk.defineRouteConfig({
+  label: "PayPal Connection",
+  hide: true
+});
+if (typeof window !== "undefined") {
+  const preloadHref = "https://www.paypal.com/webapps/merchantboarding/js/lib/lightbox/partner.js";
+  const existingPreload = document.head.querySelector(
+    `link[rel="preload"][href="${preloadHref}"]`
+  );
+  if (!existingPreload) {
+    const preloadLink = document.createElement("link");
+    preloadLink.rel = "preload";
+    preloadLink.href = preloadHref;
+    preloadLink.as = "script";
+    document.head.appendChild(preloadLink);
+  }
+  const existingScript = document.getElementById(
+    "paypal-partner-js"
+  );
+  if (!existingScript) {
+    const ppScript = document.createElement("script");
+    ppScript.id = "paypal-partner-js";
+    ppScript.src = preloadHref;
+    ppScript.async = true;
+    document.head.appendChild(ppScript);
   }
-];
-function cx$1(...parts) {
-  return parts.filter(Boolean).join(" ");
 }
-function Pill$1({
-  children,
-  onRemove
-}) {
-  return /* @__PURE__ */ jsxRuntime.jsxs("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: [
-    children,
-    onRemove ? /* @__PURE__ */ jsxRuntime.jsx(
-      "button",
-      {
-        type: "button",
-        onClick: onRemove,
-        className: "ml-1 rounded px-1 text-ui-fg-subtle hover:text-ui-fg-base",
-        "aria-label": "Remove",
-        children: "×"
+const SERVICE_URL = "/admin/paypal/onboarding-link";
+const CACHE_KEY = "pp_onboard_cache";
+const RELOAD_KEY = "pp_onboard_reloaded_once";
+const CACHE_EXPIRY = 10 * 60 * 1e3;
+const ONBOARDING_COMPLETE_ENDPOINT = "/admin/paypal/onboard-complete";
+const STATUS_ENDPOINT = "/admin/paypal/status";
+const SAVE_CREDENTIALS_ENDPOINT = "/admin/paypal/save-credentials";
+const DISCONNECT_ENDPOINT = "/admin/paypal/disconnect";
+let cachedUrl = null;
+if (typeof window !== "undefined") {
+  try {
+    const cached = localStorage.getItem(CACHE_KEY);
+    if (cached) {
+      const data = JSON.parse(cached);
+      if ((/* @__PURE__ */ new Date()).getTime() - data.ts < CACHE_EXPIRY) {
+        cachedUrl = data.url;
       }
-    ) : null
-  ] });
-}
-function SectionCard$1({
-  title,
-  description,
-  right,
-  children
-}) {
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "rounded-xl border border-ui-border-base bg-ui-bg-base shadow-sm", children: [
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start justify-between gap-4 border-b border-ui-border-base p-4", children: [
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-base font-semibold text-ui-fg-base", children: title }),
-        description ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-1 text-sm text-ui-fg-subtle", children: description }) : null
-      ] }),
-      right
-    ] }),
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-4", children })
-  ] });
-}
-function FieldRow$1({
-  label,
-  hint,
-  children
-}) {
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-12 items-start gap-4 py-3", children: [
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "col-span-12 md:col-span-4", children: [
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-sm font-medium text-ui-fg-base", children: label }),
-      hint ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-1 text-xs text-ui-fg-subtle", children: hint }) : null
-    ] }),
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "col-span-12 md:col-span-8", children })
-  ] });
+    }
+  } catch (e) {
+    console.error("Cache read error:", e);
+  }
 }
-function AdvancedCardPaymentsTab() {
-  var _a, _b;
-  const [form, setForm] = react.useState(() => ({ ...DEFAULT_FORM }));
-  const [loading, setLoading] = react.useState(false);
-  const [saving, setSaving] = react.useState(false);
-  const [toast, setToast] = react.useState(null);
-  const didInit = react.useRef(false);
+function PayPalConnectionPage() {
+  const [env, setEnv] = react.useState("sandbox");
   react.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 == null ? void 0 : json.data) ?? json;
-        const saved = payload == null ? void 0 : payload.advanced_card_payments;
-        if (saved && typeof saved === "object") {
-          setForm(mergeWithDefaults(saved));
-        }
-      } finally {
-        setLoading(false);
-      }
-    })();
+    fetch("/admin/paypal/environment", { method: "GET" }).then((r) => r.json()).then((d) => {
+      const v = (d == null ? void 0 : d.environment) === "live" ? "live" : "sandbox";
+      setEnv(v);
+    }).catch(() => {
+    });
   }, []);
-  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 == null ? void 0 : json.data) ?? json;
-      const saved = payload == null ? void 0 : 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 [connState, setConnState] = react.useState("loading");
+  const [error, setError] = react.useState(null);
+  const [finalUrl, setFinalUrl] = react.useState("");
+  const [showManual, setShowManual] = react.useState(false);
+  const [clientId, setClientId] = react.useState("");
+  const [secret, setSecret] = react.useState("");
+  const [merchantId, setMerchantId] = react.useState("");
+  const [statusInfo, setStatusInfo] = react.useState(null);
+  const [onboardingInProgress, setOnboardingInProgress] = react.useState(false);
+  const initLoaderRef = react.useRef(null);
+  const paypalButtonRef = react.useRef(null);
+  const errorLogRef = react.useRef(null);
+  const runIdRef = react.useRef(0);
+  const currentRunId = react.useRef(0);
+  const ppBtnMeasureRef = react.useRef(null);
+  const [ppBtnWidth, setPpBtnWidth] = react.useState(null);
+  const canSaveManual = react.useMemo(() => {
+    return clientId.trim().length > 0 && secret.trim().length > 0;
+  }, [clientId, secret]);
+  const maskValue = react.useCallback((value, visibleChars = 4) => {
+    if (!value) return "";
+    if (value.length <= visibleChars) {
+      return "•".repeat(value.length);
     }
-  }
-  const disabledSet = react.useMemo(() => new Set(form.disabledCards), [form.disabledCards]);
-  function toggleDisabledCard(value) {
-    setForm((prev) => {
-      const exists = prev.disabledCards.includes(value);
-      return {
-        ...prev,
-        disabledCards: exists ? prev.disabledCards.filter((v) => v !== value) : [...prev.disabledCards, value]
-      };
-    });
-  }
-  function removeDisabledCard(value) {
-    setForm((prev) => ({
-      ...prev,
-      disabledCards: prev.disabledCards.filter((v) => v !== value)
-    }));
-  }
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-6", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-6", children: [
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-start justify-between gap-4", children: /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "text-xl font-semibold text-ui-fg-base", children: "PayPal Gateway By Easy Payment" }) }) }),
-    /* @__PURE__ */ jsxRuntime.jsx(PayPalTabs, {}),
-    toast ? /* @__PURE__ */ jsxRuntime.jsx(
-      "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",
-        children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: toast.type === "success" ? "text-ui-fg-base" : "text-ui-fg-error", children: toast.message })
-      }
-    ) : null,
-    /* @__PURE__ */ jsxRuntime.jsx(
-      SectionCard$1,
-      {
-        title: "Advanced Card Payments",
-        description: "Control card checkout settings, 3D Secure behavior, and card saving.",
-        right: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3", children: [
-          /* @__PURE__ */ jsxRuntime.jsx(
-            "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",
-              children: saving ? "Saving..." : "Save settings"
-            }
-          ),
-          loading ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm text-ui-fg-subtle", children: "Loading…" }) : null
-        ] }),
-        children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "divide-y divide-ui-border-base", children: [
-          /* @__PURE__ */ jsxRuntime.jsx(FieldRow$1, { label: "Enable/Disable", children: /* @__PURE__ */ jsxRuntime.jsxs("label", { className: "inline-flex items-center gap-2", children: [
-            /* @__PURE__ */ jsxRuntime.jsx(
-              "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"
-              }
-            ),
-            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm text-ui-fg-base", children: "Enable Advanced Credit/Debit Card" })
-          ] }) }),
-          /* @__PURE__ */ jsxRuntime.jsx(FieldRow$1, { label: "Title", children: /* @__PURE__ */ jsxRuntime.jsx(
-            "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"
-            }
-          ) }),
-          /* @__PURE__ */ jsxRuntime.jsx(
-            FieldRow$1,
-            {
-              label: "Disable specific credit cards",
-              hint: "Select card brands to hide from the card form.",
-              children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-2", children: [
-                /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-wrap gap-2", children: form.disabledCards.length ? form.disabledCards.map((v) => {
-                  var _a2;
-                  const label = ((_a2 = CARD_BRANDS.find((b) => b.value === v)) == null ? void 0 : _a2.label) ?? v;
-                  return /* @__PURE__ */ jsxRuntime.jsx(Pill$1, { onRemove: () => removeDisabledCard(v), children: label }, v);
-                }) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm text-ui-fg-subtle", children: "No card brands disabled." }) }),
-                /* @__PURE__ */ jsxRuntime.jsx("div", { className: "rounded-md border border-ui-border-base p-3", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid gap-2 md:grid-cols-2", children: CARD_BRANDS.map((b) => {
-                  const checked = disabledSet.has(b.value);
-                  return /* @__PURE__ */ jsxRuntime.jsxs(
-                    "label",
-                    {
-                      className: cx$1(
-                        "flex items-center gap-2 rounded-md p-2",
-                        "hover:bg-ui-bg-subtle"
-                      ),
-                      children: [
-                        /* @__PURE__ */ jsxRuntime.jsx(
-                          "input",
-                          {
-                            type: "checkbox",
-                            checked,
-                            onChange: () => toggleDisabledCard(b.value),
-                            className: "h-4 w-4 rounded border-ui-border-base"
-                          }
-                        ),
-                        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm text-ui-fg-base", children: b.label })
-                      ]
-                    },
-                    b.value
-                  );
-                }) }) })
-              ] })
-            }
-          ),
-          /* @__PURE__ */ jsxRuntime.jsx(
-            FieldRow$1,
-            {
-              label: "Contingency for 3D Secure",
-              hint: "Choose when 3D Secure should be triggered during card payments.",
-              children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-2", children: [
-                /* @__PURE__ */ jsxRuntime.jsx(
-                  "select",
-                  {
-                    value: form.threeDS,
-                    onChange: (e) => setForm((p) => ({ ...p, threeDS: 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",
-                    children: THREE_DS_OPTIONS.map((o) => /* @__PURE__ */ jsxRuntime.jsx("option", { value: o.value, children: o.label }, o.value))
-                  }
-                ),
-                ((_a = THREE_DS_OPTIONS.find((o) => o.value === form.threeDS)) == null ? void 0 : _a.hint) ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-xs text-ui-fg-subtle", children: (_b = THREE_DS_OPTIONS.find((o) => o.value === form.threeDS)) == null ? void 0 : _b.hint }) : null
-              ] })
-            }
-          ),
-          /* @__PURE__ */ jsxRuntime.jsx(FieldRow$1, { label: "Card Save Enabled", hint: "Allow customers to save a card at checkout for future use.", children: /* @__PURE__ */ jsxRuntime.jsxs("label", { className: "inline-flex items-center gap-2", children: [
-            /* @__PURE__ */ jsxRuntime.jsx(
-              "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"
-              }
-            ),
-            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm text-ui-fg-base", children: "Enable card saving at checkout" })
-          ] }) })
-        ] })
-      }
-    )
-  ] }) });
-}
-const config = adminSdk.defineRouteConfig({
-  label: "PayPal Connection",
-  hide: true
-});
-if (typeof window !== "undefined") {
-  const preloadHref = "https://www.paypal.com/webapps/merchantboarding/js/lib/lightbox/partner.js";
-  const existingPreload = document.head.querySelector(
-    `link[rel="preload"][href="${preloadHref}"]`
-  );
-  if (!existingPreload) {
-    const preloadLink = document.createElement("link");
-    preloadLink.rel = "preload";
-    preloadLink.href = preloadHref;
-    preloadLink.as = "script";
-    document.head.appendChild(preloadLink);
-  }
-  const existingScript = document.getElementById(
-    "paypal-partner-js"
-  );
-  if (!existingScript) {
-    const ppScript = document.createElement("script");
-    ppScript.id = "paypal-partner-js";
-    ppScript.src = preloadHref;
-    ppScript.async = true;
-    document.head.appendChild(ppScript);
-  }
-}
-const SERVICE_URL = "/admin/paypal/onboarding-link";
-const CACHE_KEY = "pp_onboard_cache";
-const RELOAD_KEY = "pp_onboard_reloaded_once";
-const CACHE_EXPIRY = 10 * 60 * 1e3;
-const ONBOARDING_COMPLETE_ENDPOINT = "/admin/paypal/onboard-complete";
-const STATUS_ENDPOINT = "/admin/paypal/status";
-const SAVE_CREDENTIALS_ENDPOINT = "/admin/paypal/save-credentials";
-const DISCONNECT_ENDPOINT = "/admin/paypal/disconnect";
-let cachedUrl = null;
-if (typeof window !== "undefined") {
-  try {
-    const cached = localStorage.getItem(CACHE_KEY);
-    if (cached) {
-      const data = JSON.parse(cached);
-      if ((/* @__PURE__ */ new Date()).getTime() - data.ts < CACHE_EXPIRY) {
-        cachedUrl = data.url;
-      }
-    }
-  } catch (e) {
-    console.error("Cache read error:", e);
-  }
-}
-function PayPalConnectionPage() {
-  const [env, setEnv] = react.useState("sandbox");
-  react.useEffect(() => {
-    fetch("/admin/paypal/environment", { method: "GET" }).then((r) => r.json()).then((d) => {
-      const v = (d == null ? void 0 : d.environment) === "live" ? "live" : "sandbox";
-      setEnv(v);
-    }).catch(() => {
-    });
-  }, []);
-  const [connState, setConnState] = react.useState("loading");
-  const [error, setError] = react.useState(null);
-  const [finalUrl, setFinalUrl] = react.useState("");
-  const [showManual, setShowManual] = react.useState(false);
-  const [clientId, setClientId] = react.useState("");
-  const [secret, setSecret] = react.useState("");
-  const [merchantId, setMerchantId] = react.useState("");
-  const [statusInfo, setStatusInfo] = react.useState(null);
-  const [onboardingInProgress, setOnboardingInProgress] = react.useState(false);
-  const initLoaderRef = react.useRef(null);
-  const paypalButtonRef = react.useRef(null);
-  const errorLogRef = react.useRef(null);
-  const runIdRef = react.useRef(0);
-  const currentRunId = react.useRef(0);
-  const ppBtnMeasureRef = react.useRef(null);
-  const [ppBtnWidth, setPpBtnWidth] = react.useState(null);
-  const canSaveManual = react.useMemo(() => {
-    return clientId.trim().length > 0 && secret.trim().length > 0;
-  }, [clientId, secret]);
-  const maskValue = react.useCallback((value, visibleChars = 4) => {
-    if (!value) return "";
-    if (value.length <= visibleChars) {
-      return "•".repeat(value.length);
-    }
-    return `${"•".repeat(Math.max(0, value.length - visibleChars))}${value.slice(
-      -visibleChars
-    )}`;
-  }, []);
-  const fetchFreshLink = react.useCallback(
-    (runId) => {
-      if (initLoaderRef.current) {
-        const loaderText = initLoaderRef.current.querySelector("#loader-text");
-        if (loaderText)
-          loaderText.textContent = "Generating onboarding session...";
+    return `${"•".repeat(Math.max(0, value.length - visibleChars))}${value.slice(
+      -visibleChars
+    )}`;
+  }, []);
+  const fetchFreshLink = react.useCallback(
+    (runId) => {
+      if (initLoaderRef.current) {
+        const loaderText = initLoaderRef.current.querySelector("#loader-text");
+        if (loaderText)
+          loaderText.textContent = "Generating onboarding session...";
       }
       fetch(SERVICE_URL, {
         method: "POST",
@@ -921,301 +627,592 @@ function PayPalConnectionPage() {
         const txt = await res.text().catch(() => "");
         throw new Error(txt || `Save credentials failed (${res.status})`);
       }
-      setConnState("connected");
-      setStatusInfo({
-        seller_client_id_masked: maskValue(clientId.trim()),
-        seller_client_secret_masked: "••••••••"
-      });
-      setShowManual(false);
+      setConnState("connected");
+      setStatusInfo({
+        seller_client_id_masked: maskValue(clientId.trim()),
+        seller_client_secret_masked: "••••••••"
+      });
+      setShowManual(false);
+      try {
+        localStorage.removeItem(CACHE_KEY);
+        localStorage.removeItem(RELOAD_KEY);
+      } catch {
+      }
+    } catch (e) {
+      console.error(e);
+      setConnState("error");
+      setError((e == null ? void 0 : e.message) || "Failed to save credentials.");
+    } finally {
+      setOnboardingInProgress(false);
+    }
+  };
+  const handleDisconnect = async () => {
+    if (onboardingInProgress) return;
+    if (!window.confirm("Disconnect PayPal for this environment?")) return;
+    setOnboardingInProgress(true);
+    setConnState("loading");
+    setError(null);
+    setFinalUrl("");
+    setShowManual(false);
+    try {
+      const res = await fetch(DISCONNECT_ENDPOINT, {
+        method: "POST",
+        headers: { "content-type": "application/json" },
+        body: JSON.stringify({ environment: env })
+      });
+      if (!res.ok) {
+        const t = await res.text().catch(() => "");
+        throw new Error(t || `Disconnect failed (${res.status})`);
+      }
+      try {
+        localStorage.removeItem(CACHE_KEY);
+        localStorage.removeItem(RELOAD_KEY);
+      } catch {
+      }
+      currentRunId.current = ++runIdRef.current;
+      const runId = currentRunId.current;
+      fetchFreshLink(runId);
+    } catch (e) {
+      console.error(e);
+      setConnState("error");
+      setError((e == null ? void 0 : e.message) || "Failed to disconnect.");
+    } finally {
+      setOnboardingInProgress(false);
+    }
+  };
+  const handleEnvChange = async (e) => {
+    const next = e.target.value;
+    setEnv(next);
+    cachedUrl = null;
+    try {
+      await fetch("/admin/paypal/environment", {
+        method: "POST",
+        headers: { "content-type": "application/json" },
+        body: JSON.stringify({ environment: next })
+      });
+    } catch {
+    }
+    try {
+      localStorage.removeItem(CACHE_KEY);
+      localStorage.removeItem(RELOAD_KEY);
+    } catch {
+    }
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "p-6", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-6", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "text-xl font-semibold", children: "PayPal Gateway By Easy Payment" }),
+      /* @__PURE__ */ jsxRuntime.jsx(PayPalTabs, {}),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "rounded-md border border-ui-border-base p-4 shadow-sm", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-1 gap-y-6 md:grid-cols-[260px_1fr] md:items-start", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-sm font-medium pt-2", children: "Environment" }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "max-w-xl", children: /* @__PURE__ */ jsxRuntime.jsxs(
+          "select",
+          {
+            value: env,
+            onChange: handleEnvChange,
+            disabled: onboardingInProgress,
+            className: "w-full rounded-md border border-ui-border-base bg-transparent px-3 py-2 text-sm",
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx("option", { value: "sandbox", children: "Sandbox (Test Mode)" }),
+              /* @__PURE__ */ jsxRuntime.jsx("option", { value: "live", children: "Live (Production)" })
+            ]
+          }
+        ) }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-sm font-medium pt-2", children: env === "sandbox" ? "Connect to PayPal Sandbox" : "Connect to PayPal Live" }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "max-w-xl", children: connState === "connected" ? /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-sm text-green-600 bg-green-50 p-3 rounded border border-green-200", children: [
+            "✅ Successfully connected to PayPal!",
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "a",
+              {
+                "data-paypal-button": "true",
+                "data-paypal-onboard-complete": "onboardingCallback",
+                href: "#",
+                style: { display: "none" },
+                children: "PayPal"
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-3 rounded-md border border-ui-border-base bg-ui-bg-subtle p-3 text-xs text-ui-fg-subtle", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "font-medium text-ui-fg-base", children: "Connected PayPal account" }),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-1", children: [
+              "Email:",
+              " ",
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-mono text-ui-fg-base", children: (statusInfo == null ? void 0 : statusInfo.seller_email) || "Unavailable" })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-3 flex items-center gap-2", children: /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              type: "button",
+              onClick: handleDisconnect,
+              disabled: onboardingInProgress,
+              className: "rounded-md border border-ui-border-base px-3 py-2 text-sm font-medium hover:bg-ui-bg-subtle disabled:opacity-50 disabled:cursor-not-allowed",
+              children: "Disconnect"
+            }
+          ) })
+        ] }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            "div",
+            {
+              ref: initLoaderRef,
+              id: "init-loader",
+              className: `status-msg mb-4 ${connState !== "loading" ? "hidden" : "block"}`,
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx("div", { className: "loader inline-block align-middle mr-2" }),
+                /* @__PURE__ */ jsxRuntime.jsx("span", { id: "loader-text", className: "text-sm", children: onboardingInProgress ? "Configuring connection to PayPal…" : "Checking connection..." })
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `${connState === "ready" ? "block" : "hidden"}`, children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "a",
+              {
+                ref: (node) => {
+                  paypalButtonRef.current = node;
+                  ppBtnMeasureRef.current = node;
+                },
+                id: "paypal-button",
+                "data-paypal-button": "true",
+                href: finalUrl || "#",
+                "data-paypal-onboard-complete": "onboardingCallback",
+                onClick: handleConnectClick,
+                className: "btn-paypal",
+                style: {
+                  borderRadius: "50px",
+                  textDecoration: "none",
+                  display: "inline-block",
+                  fontWeight: "bold",
+                  border: "none",
+                  cursor: onboardingInProgress ? "not-allowed" : "pointer",
+                  opacity: onboardingInProgress ? 0.6 : 1,
+                  pointerEvents: onboardingInProgress ? "none" : "auto"
+                },
+                children: "Connect to PayPal"
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "div",
+              {
+                className: "mt-2",
+                style: {
+                  width: ppBtnWidth ? `${ppBtnWidth}px` : "auto",
+                  marginTop: "20px",
+                  marginBottom: "10px"
+                },
+                children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex justify-center", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[11px] text-ui-fg-muted leading-none", children: "OR" }) })
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-1", children: /* @__PURE__ */ jsxRuntime.jsx(
+              "button",
+              {
+                type: "button",
+                onClick: () => setShowManual(!showManual),
+                disabled: onboardingInProgress,
+                className: "text-sm text-ui-fg-interactive underline whitespace-nowrap disabled:opacity-50 disabled:cursor-not-allowed",
+                children: "Click here to insert credentials manually"
+              }
+            ) })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: `${connState === "ready" ? "hidden" : "block"} mt-3`, children: /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              type: "button",
+              onClick: () => setShowManual(!showManual),
+              disabled: onboardingInProgress,
+              className: "text-sm text-ui-fg-interactive underline whitespace-nowrap disabled:opacity-50 disabled:cursor-not-allowed",
+              children: "Click here to insert credentials manually"
+            }
+          ) }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              ref: errorLogRef,
+              id: "error-log",
+              className: `mt-4 text-left text-xs bg-red-50 text-red-600 p-3 border border-red-200 rounded ${connState === "error" && error ? "block" : "hidden"}`,
+              children: error
+            }
+          )
+        ] }) }),
+        showManual && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "md:col-span-2", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "ml-[260px] max-w-xl mt-4 grid grid-cols-1 gap-3 md:grid-cols-2", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-1", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("label", { className: "text-sm font-medium", children: "Client ID" }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "input",
+              {
+                type: "text",
+                value: clientId,
+                onChange: (e) => setClientId(e.target.value),
+                disabled: onboardingInProgress,
+                className: "rounded-md border border-ui-border-base bg-transparent px-3 py-2 text-sm disabled:opacity-50",
+                placeholder: env === "sandbox" ? "Sandbox Client ID" : "Live Client ID"
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-1", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("label", { className: "text-sm font-medium", children: "Client Secret" }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "input",
+              {
+                type: "password",
+                value: secret,
+                onChange: (e) => setSecret(e.target.value),
+                disabled: onboardingInProgress,
+                className: "rounded-md border border-ui-border-base bg-transparent px-3 py-2 text-sm disabled:opacity-50",
+                placeholder: env === "sandbox" ? "Sandbox Secret" : "Live Secret"
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-1 md:col-span-2", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("label", { className: "text-sm font-medium", children: "Merchant ID (optional)" }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "input",
+              {
+                type: "text",
+                value: merchantId,
+                onChange: (e) => setMerchantId(e.target.value),
+                disabled: onboardingInProgress,
+                className: "rounded-md border border-ui-border-base bg-transparent px-3 py-2 text-sm disabled:opacity-50",
+                placeholder: "Merchant ID"
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "md:col-span-2 flex items-center gap-2 mt-2", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "button",
+              {
+                type: "button",
+                className: "rounded-md border border-ui-border-base px-3 py-2 text-sm font-medium hover:bg-ui-bg-subtle disabled:opacity-50 disabled:cursor-not-allowed",
+                onClick: () => setShowManual(false),
+                disabled: onboardingInProgress,
+                children: "Cancel"
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "button",
+              {
+                type: "button",
+                className: "rounded-md border border-ui-border-base px-3 py-2 text-sm font-medium bg-ui-bg-base hover:bg-ui-bg-subtle disabled:opacity-50 disabled:cursor-not-allowed",
+                disabled: !canSaveManual || onboardingInProgress,
+                onClick: handleSaveManual,
+                children: "Save credentials"
+              }
+            )
+          ] })
+        ] }) })
+      ] }) })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx("style", { children: `
+        .loader {
+          border: 3px solid #f3f3f3;
+          border-top: 3px solid #0070ba;
+          border-radius: 50%;
+          width: 18px;
+          height: 18px;
+          animation: spin 1s linear infinite;
+          display: inline-block;
+          vertical-align: middle;
+          margin-right: 8px;
+        }
+        @keyframes spin {
+          0% { transform: rotate(0deg); }
+          100% { transform: rotate(360deg); }
+        }
+      ` })
+  ] });
+}
+const DEFAULT_FORM = {
+  enabled: true,
+  title: "Credit or Debit Card",
+  disabledCards: [],
+  threeDS: "when_required",
+  cardSaveEnabled: false
+};
+function mergeWithDefaults(saved) {
+  if (!saved) return { ...DEFAULT_FORM };
+  const entries = Object.entries(saved).filter(([, value]) => value !== void 0);
+  return {
+    ...DEFAULT_FORM,
+    ...Object.fromEntries(entries)
+  };
+}
+const CARD_BRANDS = [
+  { 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: "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$1(...parts) {
+  return parts.filter(Boolean).join(" ");
+}
+function Pill$1({
+  children,
+  onRemove
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("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: [
+    children,
+    onRemove ? /* @__PURE__ */ jsxRuntime.jsx(
+      "button",
+      {
+        type: "button",
+        onClick: onRemove,
+        className: "ml-1 rounded px-1 text-ui-fg-subtle hover:text-ui-fg-base",
+        "aria-label": "Remove",
+        children: "×"
+      }
+    ) : null
+  ] });
+}
+function SectionCard$1({
+  title,
+  description,
+  right,
+  children
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "rounded-xl border border-ui-border-base bg-ui-bg-base shadow-sm", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start justify-between gap-4 border-b border-ui-border-base p-4", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-base font-semibold text-ui-fg-base", children: title }),
+        description ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-1 text-sm text-ui-fg-subtle", children: description }) : null
+      ] }),
+      right
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-4", children })
+  ] });
+}
+function FieldRow$1({
+  label,
+  hint,
+  children
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-12 items-start gap-4 py-3", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "col-span-12 md:col-span-4", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-sm font-medium text-ui-fg-base", children: label }),
+      hint ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-1 text-xs text-ui-fg-subtle", children: hint }) : null
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "col-span-12 md:col-span-8", children })
+  ] });
+}
+function AdvancedCardPaymentsTab() {
+  var _a, _b;
+  const [form, setForm] = react.useState(() => ({ ...DEFAULT_FORM }));
+  const [loading, setLoading] = react.useState(false);
+  const [saving, setSaving] = react.useState(false);
+  const [toast, setToast] = react.useState(null);
+  const didInit = react.useRef(false);
+  react.useEffect(() => {
+    if (didInit.current) return;
+    didInit.current = true;
+    (async () => {
       try {
-        localStorage.removeItem(CACHE_KEY);
-        localStorage.removeItem(RELOAD_KEY);
-      } catch {
+        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 == null ? void 0 : json.data) ?? json;
+        const saved = payload == null ? void 0 : payload.advanced_card_payments;
+        if (saved && typeof saved === "object") {
+          setForm(mergeWithDefaults(saved));
+        }
+      } finally {
+        setLoading(false);
       }
-    } catch (e) {
-      console.error(e);
-      setConnState("error");
-      setError((e == null ? void 0 : e.message) || "Failed to save credentials.");
-    } finally {
-      setOnboardingInProgress(false);
-    }
-  };
-  const handleDisconnect = async () => {
-    if (onboardingInProgress) return;
-    if (!window.confirm("Disconnect PayPal for this environment?")) return;
-    setOnboardingInProgress(true);
-    setConnState("loading");
-    setError(null);
-    setFinalUrl("");
-    setShowManual(false);
+    })();
+  }, []);
+  async function onSave() {
     try {
-      const res = await fetch(DISCONNECT_ENDPOINT, {
+      setSaving(true);
+      const r = await fetch("/admin/paypal/settings", {
         method: "POST",
-        headers: { "content-type": "application/json" },
-        body: JSON.stringify({ environment: env })
+        credentials: "include",
+        headers: {
+          "Content-Type": "application/json",
+          "Accept": "application/json"
+        },
+        body: JSON.stringify({ advanced_card_payments: form })
       });
-      if (!res.ok) {
-        const t = await res.text().catch(() => "");
-        throw new Error(t || `Disconnect failed (${res.status})`);
+      if (!r.ok) {
+        const t = await r.text();
+        setToast({ type: "error", message: "Failed to save settings. " + t });
+        window.setTimeout(() => setToast(null), 3500);
+        return;
       }
-      try {
-        localStorage.removeItem(CACHE_KEY);
-        localStorage.removeItem(RELOAD_KEY);
-      } catch {
+      const json = await r.json().catch(() => null);
+      const payload = (json == null ? void 0 : json.data) ?? json;
+      const saved = payload == null ? void 0 : payload.advanced_card_payments;
+      if (saved && typeof saved === "object") {
+        setForm(mergeWithDefaults(saved));
       }
-      currentRunId.current = ++runIdRef.current;
-      const runId = currentRunId.current;
-      fetchFreshLink(runId);
-    } catch (e) {
-      console.error(e);
-      setConnState("error");
-      setError((e == null ? void 0 : e.message) || "Failed to disconnect.");
+      setToast({ type: "success", message: "Settings saved" });
+      window.setTimeout(() => setToast(null), 2500);
     } finally {
-      setOnboardingInProgress(false);
-    }
-  };
-  const handleEnvChange = async (e) => {
-    const next = e.target.value;
-    setEnv(next);
-    cachedUrl = null;
-    try {
-      await fetch("/admin/paypal/environment", {
-        method: "POST",
-        headers: { "content-type": "application/json" },
-        body: JSON.stringify({ environment: next })
-      });
-    } catch {
-    }
-    try {
-      localStorage.removeItem(CACHE_KEY);
-      localStorage.removeItem(RELOAD_KEY);
-    } catch {
+      setSaving(false);
     }
-  };
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "p-6", children: [
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-6", children: [
-      /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "text-xl font-semibold", children: "PayPal Gateway By Easy Payment" }),
-      /* @__PURE__ */ jsxRuntime.jsx(PayPalTabs, {}),
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "rounded-md border border-ui-border-base p-4 shadow-sm", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-1 gap-y-6 md:grid-cols-[260px_1fr] md:items-start", children: [
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-sm font-medium pt-2", children: "Environment" }),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "max-w-xl", children: /* @__PURE__ */ jsxRuntime.jsxs(
-          "select",
-          {
-            value: env,
-            onChange: handleEnvChange,
-            disabled: onboardingInProgress,
-            className: "w-full rounded-md border border-ui-border-base bg-transparent px-3 py-2 text-sm",
-            children: [
-              /* @__PURE__ */ jsxRuntime.jsx("option", { value: "sandbox", children: "Sandbox (Test Mode)" }),
-              /* @__PURE__ */ jsxRuntime.jsx("option", { value: "live", children: "Live (Production)" })
-            ]
-          }
-        ) }),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-sm font-medium pt-2", children: env === "sandbox" ? "Connect to PayPal Sandbox" : "Connect to PayPal Live" }),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "max-w-xl", children: connState === "connected" ? /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-sm text-green-600 bg-green-50 p-3 rounded border border-green-200", children: [
-            "✅ Successfully connected to PayPal!",
-            /* @__PURE__ */ jsxRuntime.jsx(
-              "a",
-              {
-                "data-paypal-button": "true",
-                "data-paypal-onboard-complete": "onboardingCallback",
-                href: "#",
-                style: { display: "none" },
-                children: "PayPal"
-              }
-            )
-          ] }),
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-3 rounded-md border border-ui-border-base bg-ui-bg-subtle p-3 text-xs text-ui-fg-subtle", children: [
-            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "font-medium text-ui-fg-base", children: "Connected PayPal account" }),
-            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-1", children: [
-              "Email:",
-              " ",
-              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-mono text-ui-fg-base", children: (statusInfo == null ? void 0 : statusInfo.seller_email) || "Unavailable" })
-            ] })
-          ] }),
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-3 flex items-center gap-2", children: /* @__PURE__ */ jsxRuntime.jsx(
-            "button",
-            {
-              type: "button",
-              onClick: handleDisconnect,
-              disabled: onboardingInProgress,
-              className: "rounded-md border border-ui-border-base px-3 py-2 text-sm font-medium hover:bg-ui-bg-subtle disabled:opacity-50 disabled:cursor-not-allowed",
-              children: "Disconnect"
-            }
-          ) })
-        ] }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-          /* @__PURE__ */ jsxRuntime.jsxs(
-            "div",
-            {
-              ref: initLoaderRef,
-              id: "init-loader",
-              className: `status-msg mb-4 ${connState !== "loading" ? "hidden" : "block"}`,
-              children: [
-                /* @__PURE__ */ jsxRuntime.jsx("div", { className: "loader inline-block align-middle mr-2" }),
-                /* @__PURE__ */ jsxRuntime.jsx("span", { id: "loader-text", className: "text-sm", children: onboardingInProgress ? "Configuring connection to PayPal…" : "Checking connection..." })
-              ]
+  }
+  const disabledSet = react.useMemo(() => new Set(form.disabledCards), [form.disabledCards]);
+  function toggleDisabledCard(value) {
+    setForm((prev) => {
+      const exists = prev.disabledCards.includes(value);
+      return {
+        ...prev,
+        disabledCards: exists ? prev.disabledCards.filter((v) => v !== value) : [...prev.disabledCards, value]
+      };
+    });
+  }
+  function removeDisabledCard(value) {
+    setForm((prev) => ({
+      ...prev,
+      disabledCards: prev.disabledCards.filter((v) => v !== value)
+    }));
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-6", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-6", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-start justify-between gap-4", children: /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "text-xl font-semibold text-ui-fg-base", children: "PayPal Gateway By Easy Payment" }) }) }),
+    /* @__PURE__ */ jsxRuntime.jsx(PayPalTabs, {}),
+    toast ? /* @__PURE__ */ jsxRuntime.jsx(
+      "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",
+        children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: toast.type === "success" ? "text-ui-fg-base" : "text-ui-fg-error", children: toast.message })
+      }
+    ) : null,
+    /* @__PURE__ */ jsxRuntime.jsx(
+      SectionCard$1,
+      {
+        title: "Advanced Card Payments",
+        description: "Control card checkout settings, 3D Secure behavior, and card saving.",
+        right: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "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",
+              children: saving ? "Saving..." : "Save settings"
             }
           ),
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `${connState === "ready" ? "block" : "hidden"}`, children: [
-            /* @__PURE__ */ jsxRuntime.jsx(
-              "a",
-              {
-                ref: (node) => {
-                  paypalButtonRef.current = node;
-                  ppBtnMeasureRef.current = node;
-                },
-                id: "paypal-button",
-                "data-paypal-button": "true",
-                href: finalUrl || "#",
-                "data-paypal-onboard-complete": "onboardingCallback",
-                onClick: handleConnectClick,
-                className: "btn-paypal",
-                style: {
-                  borderRadius: "50px",
-                  textDecoration: "none",
-                  display: "inline-block",
-                  fontWeight: "bold",
-                  border: "none",
-                  cursor: onboardingInProgress ? "not-allowed" : "pointer",
-                  opacity: onboardingInProgress ? 0.6 : 1,
-                  pointerEvents: onboardingInProgress ? "none" : "auto"
-                },
-                children: "Connect to PayPal"
-              }
-            ),
+          loading ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm text-ui-fg-subtle", children: "Loading…" }) : null
+        ] }),
+        children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "divide-y divide-ui-border-base", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(FieldRow$1, { label: "Enable/Disable", children: /* @__PURE__ */ jsxRuntime.jsxs("label", { className: "inline-flex items-center gap-2", children: [
             /* @__PURE__ */ jsxRuntime.jsx(
-              "div",
+              "input",
               {
-                className: "mt-2",
-                style: {
-                  width: ppBtnWidth ? `${ppBtnWidth}px` : "auto",
-                  marginTop: "20px",
-                  marginBottom: "10px"
-                },
-                children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex justify-center", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[11px] text-ui-fg-muted leading-none", children: "OR" }) })
+                type: "checkbox",
+                checked: form.enabled,
+                onChange: (e) => setForm((p) => ({ ...p, enabled: e.target.checked })),
+                className: "h-4 w-4 rounded border-ui-border-base"
               }
             ),
-            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-1", children: /* @__PURE__ */ jsxRuntime.jsx(
-              "button",
-              {
-                type: "button",
-                onClick: () => setShowManual(!showManual),
-                disabled: onboardingInProgress,
-                className: "text-sm text-ui-fg-interactive underline whitespace-nowrap disabled:opacity-50 disabled:cursor-not-allowed",
-                children: "Click here to insert credentials manually"
-              }
-            ) })
-          ] }),
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: `${connState === "ready" ? "hidden" : "block"} mt-3`, children: /* @__PURE__ */ jsxRuntime.jsx(
-            "button",
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm text-ui-fg-base", children: "Enable Advanced Credit/Debit Card" })
+          ] }) }),
+          /* @__PURE__ */ jsxRuntime.jsx(FieldRow$1, { label: "Title", children: /* @__PURE__ */ jsxRuntime.jsx(
+            "input",
             {
-              type: "button",
-              onClick: () => setShowManual(!showManual),
-              disabled: onboardingInProgress,
-              className: "text-sm text-ui-fg-interactive underline whitespace-nowrap disabled:opacity-50 disabled:cursor-not-allowed",
-              children: "Click here to insert credentials manually"
+              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"
             }
           ) }),
           /* @__PURE__ */ jsxRuntime.jsx(
-            "div",
+            FieldRow$1,
             {
-              ref: errorLogRef,
-              id: "error-log",
-              className: `mt-4 text-left text-xs bg-red-50 text-red-600 p-3 border border-red-200 rounded ${connState === "error" && error ? "block" : "hidden"}`,
-              children: error
+              label: "Disable specific credit cards",
+              hint: "Select card brands to hide from the card form.",
+              children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-2", children: [
+                /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-wrap gap-2", children: form.disabledCards.length ? form.disabledCards.map((v) => {
+                  var _a2;
+                  const label = ((_a2 = CARD_BRANDS.find((b) => b.value === v)) == null ? void 0 : _a2.label) ?? v;
+                  return /* @__PURE__ */ jsxRuntime.jsx(Pill$1, { onRemove: () => removeDisabledCard(v), children: label }, v);
+                }) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm text-ui-fg-subtle", children: "No card brands disabled." }) }),
+                /* @__PURE__ */ jsxRuntime.jsx("div", { className: "rounded-md border border-ui-border-base p-3", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid gap-2 md:grid-cols-2", children: CARD_BRANDS.map((b) => {
+                  const checked = disabledSet.has(b.value);
+                  return /* @__PURE__ */ jsxRuntime.jsxs(
+                    "label",
+                    {
+                      className: cx$1(
+                        "flex items-center gap-2 rounded-md p-2",
+                        "hover:bg-ui-bg-subtle"
+                      ),
+                      children: [
+                        /* @__PURE__ */ jsxRuntime.jsx(
+                          "input",
+                          {
+                            type: "checkbox",
+                            checked,
+                            onChange: () => toggleDisabledCard(b.value),
+                            className: "h-4 w-4 rounded border-ui-border-base"
+                          }
+                        ),
+                        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm text-ui-fg-base", children: b.label })
+                      ]
+                    },
+                    b.value
+                  );
+                }) }) })
+              ] })
             }
-          )
-        ] }) }),
-        showManual && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "md:col-span-2", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "ml-[260px] max-w-xl mt-4 grid grid-cols-1 gap-3 md:grid-cols-2", children: [
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-1", children: [
-            /* @__PURE__ */ jsxRuntime.jsx("label", { className: "text-sm font-medium", children: "Client ID" }),
-            /* @__PURE__ */ jsxRuntime.jsx(
-              "input",
-              {
-                type: "text",
-                value: clientId,
-                onChange: (e) => setClientId(e.target.value),
-                disabled: onboardingInProgress,
-                className: "rounded-md border border-ui-border-base bg-transparent px-3 py-2 text-sm disabled:opacity-50",
-                placeholder: env === "sandbox" ? "Sandbox Client ID" : "Live Client ID"
-              }
-            )
-          ] }),
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-1", children: [
-            /* @__PURE__ */ jsxRuntime.jsx("label", { className: "text-sm font-medium", children: "Client Secret" }),
-            /* @__PURE__ */ jsxRuntime.jsx(
-              "input",
-              {
-                type: "password",
-                value: secret,
-                onChange: (e) => setSecret(e.target.value),
-                disabled: onboardingInProgress,
-                className: "rounded-md border border-ui-border-base bg-transparent px-3 py-2 text-sm disabled:opacity-50",
-                placeholder: env === "sandbox" ? "Sandbox Secret" : "Live Secret"
-              }
-            )
-          ] }),
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-1 md:col-span-2", children: [
-            /* @__PURE__ */ jsxRuntime.jsx("label", { className: "text-sm font-medium", children: "Merchant ID (optional)" }),
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            FieldRow$1,
+            {
+              label: "Contingency for 3D Secure",
+              hint: "Choose when 3D Secure should be triggered during card payments.",
+              children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-2", children: [
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "select",
+                  {
+                    value: form.threeDS,
+                    onChange: (e) => setForm((p) => ({ ...p, threeDS: 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",
+                    children: THREE_DS_OPTIONS.map((o) => /* @__PURE__ */ jsxRuntime.jsx("option", { value: o.value, children: o.label }, o.value))
+                  }
+                ),
+                ((_a = THREE_DS_OPTIONS.find((o) => o.value === form.threeDS)) == null ? void 0 : _a.hint) ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-xs text-ui-fg-subtle", children: (_b = THREE_DS_OPTIONS.find((o) => o.value === form.threeDS)) == null ? void 0 : _b.hint }) : null
+              ] })
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(FieldRow$1, { label: "Card Save Enabled", hint: "Allow customers to save a card at checkout for future use.", children: /* @__PURE__ */ jsxRuntime.jsxs("label", { className: "inline-flex items-center gap-2", children: [
             /* @__PURE__ */ jsxRuntime.jsx(
               "input",
               {
-                type: "text",
-                value: merchantId,
-                onChange: (e) => setMerchantId(e.target.value),
-                disabled: onboardingInProgress,
-                className: "rounded-md border border-ui-border-base bg-transparent px-3 py-2 text-sm disabled:opacity-50",
-                placeholder: "Merchant ID"
-              }
-            )
-          ] }),
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "md:col-span-2 flex items-center gap-2 mt-2", children: [
-            /* @__PURE__ */ jsxRuntime.jsx(
-              "button",
-              {
-                type: "button",
-                className: "rounded-md border border-ui-border-base px-3 py-2 text-sm font-medium hover:bg-ui-bg-subtle disabled:opacity-50 disabled:cursor-not-allowed",
-                onClick: () => setShowManual(false),
-                disabled: onboardingInProgress,
-                children: "Cancel"
+                type: "checkbox",
+                checked: form.cardSaveEnabled,
+                onChange: (e) => setForm((p) => ({ ...p, cardSaveEnabled: e.target.checked })),
+                className: "h-4 w-4 rounded border-ui-border-base"
               }
             ),
-            /* @__PURE__ */ jsxRuntime.jsx(
-              "button",
-              {
-                type: "button",
-                className: "rounded-md border border-ui-border-base px-3 py-2 text-sm font-medium bg-ui-bg-base hover:bg-ui-bg-subtle disabled:opacity-50 disabled:cursor-not-allowed",
-                disabled: !canSaveManual || onboardingInProgress,
-                onClick: handleSaveManual,
-                children: "Save credentials"
-              }
-            )
-          ] })
-        ] }) })
-      ] }) })
-    ] }),
-    /* @__PURE__ */ jsxRuntime.jsx("style", { children: `
-        .loader {
-          border: 3px solid #f3f3f3;
-          border-top: 3px solid #0070ba;
-          border-radius: 50%;
-          width: 18px;
-          height: 18px;
-          animation: spin 1s linear infinite;
-          display: inline-block;
-          vertical-align: middle;
-          margin-right: 8px;
-        }
-        @keyframes spin {
-          0% { transform: rotate(0deg); }
-          100% { transform: rotate(360deg); }
-        }
-      ` })
-  ] });
-}
-function PayPalApplePayPage() {
-  return /* @__PURE__ */ jsxRuntime.jsx(reactRouterDom.Navigate, { to: "/settings/paypal/connection", replace: true });
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm text-ui-fg-base", children: "Enable card saving at checkout" })
+          ] }) })
+        ] })
+      }
+    )
+  ] }) });
 }
 function formatDate$2(value) {
   if (!value) {
@@ -1296,7 +1293,7 @@ function PayPalAuditLogsPage() {
     ] })
   ] }) });
 }
-function PayPalGooglePayPage() {
+function PayPalApplePayPage() {
   return /* @__PURE__ */ jsxRuntime.jsx(reactRouterDom.Navigate, { to: "/settings/paypal/connection", replace: true });
 }
 const EMPTY_FILTERS = {
@@ -1491,6 +1488,9 @@ function PayPalDisputesPage() {
     ] })
   ] }) });
 }
+function PayPalGooglePayPage() {
+  return /* @__PURE__ */ jsxRuntime.jsx(reactRouterDom.Navigate, { to: "/settings/paypal/connection", replace: true });
+}
 function PayPalPayLaterMessagingPage() {
   return /* @__PURE__ */ jsxRuntime.jsx(reactRouterDom.Navigate, { to: "/settings/paypal/connection", replace: true });
 }
@@ -2052,30 +2052,30 @@ const routeModule = {
       Component: AdditionalSettingsTab,
       path: "/settings/paypal/additional-settings"
     },
-    {
-      Component: AdvancedCardPaymentsTab,
-      path: "/settings/paypal/advanced-card-payments"
-    },
     {
       Component: PayPalConnectionPage,
       path: "/settings/paypal/connection"
     },
     {
-      Component: PayPalApplePayPage,
-      path: "/settings/paypal/apple-pay"
+      Component: AdvancedCardPaymentsTab,
+      path: "/settings/paypal/advanced-card-payments"
     },
     {
       Component: PayPalAuditLogsPage,
       path: "/settings/paypal/audit-logs"
     },
     {
-      Component: PayPalGooglePayPage,
-      path: "/settings/paypal/google-pay"
+      Component: PayPalApplePayPage,
+      path: "/settings/paypal/apple-pay"
     },
     {
       Component: PayPalDisputesPage,
       path: "/settings/paypal/disputes"
     },
+    {
+      Component: PayPalGooglePayPage,
+      path: "/settings/paypal/google-pay"
+    },
     {
       Component: PayPalPayLaterMessagingPage,
       path: "/settings/paypal/pay-later-messaging"