@easypayment/medusa-payment-paypal 0.9.4 → 0.9.6

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

@@ -34,7 +34,73 @@ function PayPalTabs() {
     );
   }) }) });
 }
-async function adminFetch$2(path, opts = {}) {
+function SectionCard({
+  title,
+  description,
+  children,
+  right
+}) {
+  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({
+  label,
+  hint,
+  htmlFor,
+  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: [
+      htmlFor ? /* @__PURE__ */ jsxRuntime.jsx("label", { htmlFor, className: "text-sm font-medium text-ui-fg-base", children: label }) : /* @__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 Toast({ toast, onClose }) {
+  react.useEffect(() => {
+    if (!toast) return;
+    const duration = toast.kind === "error" ? 5e3 : 2500;
+    const t = setTimeout(() => onClose(), duration);
+    return () => clearTimeout(t);
+  }, [toast, onClose]);
+  if (!toast) return null;
+  const isSuccess = toast.kind === "success";
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "fixed right-6 top-6 z-[9999]", children: /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: [
+        "min-w-[280px] max-w-[420px] rounded-lg border px-4 py-3 shadow-md",
+        isSuccess ? "border-emerald-500/30 bg-emerald-500/10" : "border-rose-500/30 bg-rose-500/10"
+      ].join(" "),
+      role: isSuccess ? "status" : "alert",
+      "aria-live": isSuccess ? "polite" : "assertive",
+      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start gap-3", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: ["mt-0.5 h-2.5 w-2.5 rounded-full", isSuccess ? "bg-emerald-500" : "bg-rose-500"].join(" ") }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 text-sm text-ui-fg-base", children: toast.message }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            type: "button",
+            onClick: onClose,
+            className: "text-ui-fg-subtle hover:text-ui-fg-base",
+            "aria-label": "Close",
+            children: "×"
+          }
+        )
+      ] })
+    }
+  ) });
+}
+async function adminFetch(path, opts = {}) {
   var _a;
   const { method = "GET", body, query } = opts;
   let url = path;
@@ -73,7 +139,7 @@ const DEFAULT_FORM$1 = {
   landingPage: "no_preference",
   requireInstantPayment: false,
   sendItemDetails: true,
-  invoicePrefix: "WC-",
+  invoicePrefix: "PP-",
   creditCardStatementName: "PayPal"
 };
 function mergeWithDefaults$1(saved) {
@@ -81,40 +147,20 @@ function mergeWithDefaults$1(saved) {
   const entries = Object.entries(saved).filter(([, value]) => value !== void 0);
   return { ...DEFAULT_FORM$1, ...Object.fromEntries(entries) };
 }
-function SectionCard$2({ 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$2({ 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 AdditionalSettingsTab() {
   const [form, setForm] = react.useState(() => ({ ...DEFAULT_FORM$1 }));
   const [loading, setLoading] = react.useState(false);
   const [saving, setSaving] = react.useState(false);
   const [toast, setToast] = react.useState(null);
   const didInit = react.useRef(false);
+  const dismissToast = react.useCallback(() => setToast(null), []);
   react.useEffect(() => {
     if (didInit.current) return;
     didInit.current = true;
     (async () => {
       try {
         setLoading(true);
-        const json = await adminFetch$2("/admin/paypal/settings");
+        const json = await adminFetch("/admin/paypal/settings");
         const payload = (json == null ? void 0 : json.data) ?? json;
         const saved = payload == null ? void 0 : payload.additional_settings;
         if (saved && typeof saved === "object") setForm(mergeWithDefaults$1(saved));
@@ -128,15 +174,13 @@ function AdditionalSettingsTab() {
     try {
       setSaving(true);
       setToast(null);
-      const json = await adminFetch$2("/admin/paypal/settings", { method: "POST", body: { additional_settings: form } });
+      const json = await adminFetch("/admin/paypal/settings", { method: "POST", body: { additional_settings: form } });
       const payload = (json == null ? void 0 : json.data) ?? json;
       const saved = payload == null ? void 0 : payload.additional_settings;
       if (saved && typeof saved === "object") setForm(mergeWithDefaults$1(saved));
-      setToast({ type: "success", message: "Settings saved" });
-      window.setTimeout(() => setToast(null), 2500);
+      setToast({ kind: "success", message: "Settings saved" });
     } catch (e) {
-      setToast({ type: "error", message: e instanceof Error ? e.message : "Failed to save settings" });
-      window.setTimeout(() => setToast(null), 3500);
+      setToast({ kind: "error", message: e instanceof Error ? e.message : "Failed to save settings" });
     } finally {
       setSaving(false);
     }
@@ -144,75 +188,42 @@ function AdditionalSettingsTab() {
   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(Toast, { toast, onClose: dismissToast }),
     /* @__PURE__ */ jsxRuntime.jsx(
-      SectionCard$2,
+      SectionCard,
       {
         title: "Additional Settings",
         description: "These settings control checkout behavior and PayPal experience.",
         right: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3", children: [
           /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", onClick: onSave, disabled: saving || loading, className: "transition-fg relative inline-flex w-fit items-center justify-center overflow-hidden rounded-md outline-none shadow-buttons-neutral text-ui-fg-base bg-ui-button-neutral after:transition-fg after:absolute after:inset-0 after:content-[''] after:button-neutral-gradient hover:bg-ui-button-neutral-hover hover:after:button-neutral-hover-gradient active:bg-ui-button-neutral-pressed active:after:button-neutral-pressed-gradient focus-visible:shadow-buttons-neutral-focus disabled:bg-ui-bg-disabled disabled:border-ui-border-base disabled:text-ui-fg-disabled disabled:shadow-buttons-neutral disabled:after:hidden txt-compact-small-plus px-3 py-1.5", children: saving ? "Saving..." : "Save settings" }),
-          loading ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm text-ui-fg-subtle", children: "Loading..." }) : null
+          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$2, { label: "Payment action", children: /* @__PURE__ */ jsxRuntime.jsxs("select", { value: form.paymentAction, onChange: (e) => setForm((p) => ({ ...p, paymentAction: 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: [
+          /* @__PURE__ */ jsxRuntime.jsx(FieldRow, { label: "Payment action", htmlFor: "as-payment-action", children: /* @__PURE__ */ jsxRuntime.jsxs("select", { id: "as-payment-action", value: form.paymentAction, onChange: (e) => setForm((p) => ({ ...p, paymentAction: 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: [
             /* @__PURE__ */ jsxRuntime.jsx("option", { value: "capture", children: "Capture" }),
             /* @__PURE__ */ jsxRuntime.jsx("option", { value: "authorize", children: "Authorize" })
           ] }) }),
-          /* @__PURE__ */ jsxRuntime.jsx(FieldRow$2, { label: "Brand Name", children: /* @__PURE__ */ jsxRuntime.jsx("input", { value: form.brandName, onChange: (e) => setForm((p) => ({ ...p, brandName: 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" }) }),
-          /* @__PURE__ */ jsxRuntime.jsx(FieldRow$2, { label: "Landing Page", children: /* @__PURE__ */ jsxRuntime.jsxs("select", { value: form.landingPage, onChange: (e) => setForm((p) => ({ ...p, landingPage: 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: [
+          /* @__PURE__ */ jsxRuntime.jsx(FieldRow, { label: "Brand Name", htmlFor: "as-brand-name", children: /* @__PURE__ */ jsxRuntime.jsx("input", { id: "as-brand-name", value: form.brandName, onChange: (e) => setForm((p) => ({ ...p, brandName: 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" }) }),
+          /* @__PURE__ */ jsxRuntime.jsx(FieldRow, { label: "Landing Page", htmlFor: "as-landing-page", children: /* @__PURE__ */ jsxRuntime.jsxs("select", { id: "as-landing-page", value: form.landingPage, onChange: (e) => setForm((p) => ({ ...p, landingPage: 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: [
             /* @__PURE__ */ jsxRuntime.jsx("option", { value: "no_preference", children: "No Preference" }),
             /* @__PURE__ */ jsxRuntime.jsx("option", { value: "login", children: "Login" }),
             /* @__PURE__ */ jsxRuntime.jsx("option", { value: "billing", children: "Billing" })
           ] }) }),
-          /* @__PURE__ */ jsxRuntime.jsx(FieldRow$2, { label: "Instant Payments", children: /* @__PURE__ */ jsxRuntime.jsxs("label", { className: "inline-flex items-center gap-2", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(FieldRow, { label: "Instant Payments", children: /* @__PURE__ */ jsxRuntime.jsxs("label", { className: "inline-flex items-center gap-2", children: [
             /* @__PURE__ */ jsxRuntime.jsx("input", { type: "checkbox", checked: form.requireInstantPayment, onChange: (e) => setForm((p) => ({ ...p, requireInstantPayment: 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: "Require Instant Payment" })
           ] }) }),
-          /* @__PURE__ */ jsxRuntime.jsx(FieldRow$2, { label: "Send Item Details", hint: "Include all line item details in the payment request to PayPal so that they can be seen from the PayPal transaction details page.", children: /* @__PURE__ */ jsxRuntime.jsxs("label", { className: "inline-flex items-center gap-2", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(FieldRow, { label: "Send Item Details", hint: "Include all line item details in the payment request to PayPal so that they can be seen from the PayPal transaction details page.", children: /* @__PURE__ */ jsxRuntime.jsxs("label", { className: "inline-flex items-center gap-2", children: [
             /* @__PURE__ */ jsxRuntime.jsx("input", { type: "checkbox", checked: form.sendItemDetails, onChange: (e) => setForm((p) => ({ ...p, sendItemDetails: 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: "Send line item details to PayPal" })
           ] }) }),
-          /* @__PURE__ */ jsxRuntime.jsx(FieldRow$2, { label: "Invoice prefix", children: /* @__PURE__ */ jsxRuntime.jsx("input", { value: form.invoicePrefix, onChange: (e) => setForm((p) => ({ ...p, invoicePrefix: 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: "WC-" }) }),
-          /* @__PURE__ */ jsxRuntime.jsx(FieldRow$2, { label: "Credit Card Statement Name", children: /* @__PURE__ */ jsxRuntime.jsx("input", { value: form.creditCardStatementName, onChange: (e) => setForm((p) => ({ ...p, creditCardStatementName: 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" }) })
+          /* @__PURE__ */ jsxRuntime.jsx(FieldRow, { label: "Invoice prefix", htmlFor: "as-invoice-prefix", children: /* @__PURE__ */ jsxRuntime.jsx("input", { id: "as-invoice-prefix", value: form.invoicePrefix, onChange: (e) => setForm((p) => ({ ...p, invoicePrefix: 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: "PP-" }) }),
+          /* @__PURE__ */ jsxRuntime.jsx(FieldRow, { label: "Credit Card Statement Name", htmlFor: "as-cc-statement", children: /* @__PURE__ */ jsxRuntime.jsx("input", { id: "as-cc-statement", value: form.creditCardStatementName, onChange: (e) => setForm((p) => ({ ...p, creditCardStatementName: 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" }) })
         ] })
       }
     )
   ] }) });
 }
-async function adminFetch$1(path, opts = {}) {
-  var _a;
-  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 = { Accept: "application/json" };
-  if (body !== void 0) headers["Content-Type"] = "application/json";
-  if (typeof window !== "undefined") {
-    const token = (_a = window.__medusa__) == null ? void 0 : _a.token;
-    if (token) headers["Authorization"] = `Bearer ${token}`;
-  }
-  const res = await fetch(url, {
-    method,
-    headers,
-    credentials: "include",
-    body: body !== void 0 ? JSON.stringify(body) : void 0
-  });
-  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 {};
-  try {
-    return JSON.parse(text);
-  } catch {
-    return {};
-  }
-}
 const DEFAULT_FORM = {
   enabled: true,
   title: "Credit or Debit Card",
@@ -228,27 +239,6 @@ const THREE_DS_OPTIONS = [
   { 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 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 }));
@@ -256,13 +246,14 @@ function AdvancedCardPaymentsTab() {
   const [saving, setSaving] = react.useState(false);
   const [toast, setToast] = react.useState(null);
   const didInit = react.useRef(false);
+  const dismissToast = react.useCallback(() => setToast(null), []);
   react.useEffect(() => {
     if (didInit.current) return;
     didInit.current = true;
     (async () => {
       try {
         setLoading(true);
-        const json = await adminFetch$1("/admin/paypal/settings");
+        const json = await adminFetch("/admin/paypal/settings");
         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));
@@ -275,18 +266,16 @@ function AdvancedCardPaymentsTab() {
   async function onSave() {
     try {
       setSaving(true);
-      const json = await adminFetch$1("/admin/paypal/settings", {
+      const json = await adminFetch("/admin/paypal/settings", {
         method: "POST",
         body: { advanced_card_payments: form }
       });
       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);
+      setToast({ kind: "success", message: "Settings saved" });
     } catch (e) {
-      setToast({ type: "error", message: (e instanceof Error ? e.message : "") || "Failed to save settings." });
-      window.setTimeout(() => setToast(null), 3500);
+      setToast({ kind: "error", message: (e instanceof Error ? e.message : "") || "Failed to save settings." });
     } finally {
       setSaving(false);
     }
@@ -294,24 +283,24 @@ function AdvancedCardPaymentsTab() {
   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(Toast, { toast, onClose: dismissToast }),
     /* @__PURE__ */ jsxRuntime.jsx(
-      SectionCard$1,
+      SectionCard,
       {
         title: "Advanced Card Payments",
         description: "Control card checkout settings and 3D Secure behavior.",
         right: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3", children: [
           /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", onClick: onSave, disabled: saving || loading, className: "transition-fg relative inline-flex w-fit items-center justify-center overflow-hidden rounded-md outline-none shadow-buttons-neutral text-ui-fg-base bg-ui-button-neutral after:transition-fg after:absolute after:inset-0 after:content-[''] after:button-neutral-gradient hover:bg-ui-button-neutral-hover hover:after:button-neutral-hover-gradient active:bg-ui-button-neutral-pressed active:after:button-neutral-pressed-gradient focus-visible:shadow-buttons-neutral-focus disabled:bg-ui-bg-disabled disabled:border-ui-border-base disabled:text-ui-fg-disabled disabled:shadow-buttons-neutral disabled:after:hidden txt-compact-small-plus px-3 py-1.5", children: saving ? "Saving..." : "Save settings" }),
-          loading ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm text-ui-fg-subtle", children: "Loading..." }) : null
+          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(FieldRow, { 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: "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)) }),
+          /* @__PURE__ */ jsxRuntime.jsx(FieldRow, { label: "Title", htmlFor: "acp-title", children: /* @__PURE__ */ jsxRuntime.jsx("input", { id: "acp-title", 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, { label: "Contingency for 3D Secure", hint: "Choose when 3D Secure should be triggered during card payments.", htmlFor: "acp-threeds", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-2", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("select", { id: "acp-threeds", 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
           ] }) })
         ] })
@@ -326,35 +315,11 @@ function PayPalGooglePayPage() {
   return /* @__PURE__ */ jsxRuntime.jsx(reactRouterDom.Navigate, { to: "/settings/paypal/connection", replace: true });
 }
 const config = adminSdk.defineRouteConfig({
-  label: "PayPal Connection",
-  hide: true
+  label: "PayPal Connection"
 });
-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 PARTNER_JS_URL = "https://www.paypal.com/webapps/merchantboarding/js/lib/lightbox/partner.js";
 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";
@@ -377,12 +342,45 @@ if (typeof window !== "undefined") {
 function PayPalConnectionPage() {
   const [env, setEnv] = react.useState("live");
   react.useEffect(() => {
-    fetch("/admin/paypal/environment", { method: "GET" }).then((r) => r.json()).then((d) => {
+    fetch("/admin/paypal/environment", { method: "GET", credentials: "include" }).then((r) => r.json()).then((d) => {
       const v = (d == null ? void 0 : d.environment) === "sandbox" ? "sandbox" : "live";
       setEnv(v);
     }).catch(() => {
     });
   }, []);
+  react.useEffect(() => {
+    const preloadHref = PARTNER_JS_URL;
+    let preloadLink = null;
+    const existingPreload = document.head.querySelector(
+      `link[rel="preload"][href="${preloadHref}"]`
+    );
+    if (!existingPreload) {
+      preloadLink = document.createElement("link");
+      preloadLink.rel = "preload";
+      preloadLink.href = preloadHref;
+      preloadLink.as = "script";
+      document.head.appendChild(preloadLink);
+    }
+    let ppScript = null;
+    const existingScript = document.getElementById(
+      "paypal-partner-js"
+    );
+    if (!existingScript) {
+      ppScript = document.createElement("script");
+      ppScript.id = "paypal-partner-js";
+      ppScript.src = preloadHref;
+      ppScript.async = true;
+      document.head.appendChild(ppScript);
+    }
+    return () => {
+      if (preloadLink && preloadLink.parentNode) {
+        preloadLink.parentNode.removeChild(preloadLink);
+      }
+      if (ppScript && ppScript.parentNode) {
+        ppScript.parentNode.removeChild(ppScript);
+      }
+    };
+  }, []);
   const [connState, setConnState] = react.useState("loading");
   const [error, setError] = react.useState(null);
   const [finalUrl, setFinalUrl] = react.useState("");
@@ -411,10 +409,14 @@ function PayPalConnectionPage() {
       fetch(SERVICE_URL, {
         method: "POST",
         headers: { "content-type": "application/json" },
+        credentials: "include",
         body: JSON.stringify({
           products: ["PPCP"]
         })
-      }).then((r) => r.json()).then((data) => {
+      }).then((r) => {
+        if (!r.ok) throw new Error(`Service returned ${r.status}`);
+        return r.json();
+      }).then((data) => {
         if (runId !== currentRunId.current) return;
         const href = data == null ? void 0 : data.onboarding_url;
         if (!href) {
@@ -429,11 +431,6 @@ function PayPalConnectionPage() {
             ts: Date.now()
           })
         );
-        if (!localStorage.getItem(RELOAD_KEY)) {
-          localStorage.setItem(RELOAD_KEY, "1");
-          window.location.reload();
-          return;
-        }
         activatePayPal(finalUrl2, runId);
       }).catch(() => {
         if (runId !== currentRunId.current) return;
@@ -460,6 +457,8 @@ function PayPalConnectionPage() {
         paypalButtonRef.current.href = url;
       }
       setFinalUrl(url);
+      let attempts = 0;
+      const MAX_ATTEMPTS = 200;
       const tryInit = () => {
         var _a, _b;
         if (runId !== currentRunId.current) return;
@@ -467,6 +466,11 @@ function PayPalConnectionPage() {
           showUI();
           return;
         }
+        attempts++;
+        if (attempts >= MAX_ATTEMPTS) {
+          showError("PayPal partner script failed to load. Please refresh and try again.");
+          return;
+        }
         setTimeout(tryInit, 50);
       };
       tryInit();
@@ -483,7 +487,8 @@ function PayPalConnectionPage() {
       setFinalUrl("");
       try {
         const r = await fetch(`${STATUS_ENDPOINT}?environment=${env}`, {
-          method: "GET"
+          method: "GET",
+          credentials: "include"
         });
         const st = await r.json().catch(() => ({}));
         if (cancelled || runId !== currentRunId.current) return;
@@ -513,8 +518,7 @@ function PayPalConnectionPage() {
     window.onboardingCallback = async function(authCode, sharedId) {
       var _a, _b, _c, _d, _e, _f, _g;
       try {
-        ;
-        window.onbeforeunload = "";
+        window.onbeforeunload = null;
       } catch {
       }
       setOnboardingInProgress(true);
@@ -529,6 +533,7 @@ function PayPalConnectionPage() {
         const res = await fetch(ONBOARDING_COMPLETE_ENDPOINT, {
           method: "POST",
           headers: { "content-type": "application/json" },
+          credentials: "include",
           body: JSON.stringify(payload)
         });
         if (!res.ok) {
@@ -547,10 +552,22 @@ function PayPalConnectionPage() {
         }
         try {
           localStorage.removeItem(CACHE_KEY);
-          localStorage.removeItem(RELOAD_KEY);
         } catch {
         }
-        window.location.href = window.location.href;
+        try {
+          const statusRes = await fetch(`${STATUS_ENDPOINT}?environment=${env}`, {
+            method: "GET",
+            credentials: "include"
+          });
+          const refreshedStatus = await statusRes.json().catch(() => ({}));
+          setStatusInfo(refreshedStatus || null);
+          setConnState("connected");
+          setShowManual(false);
+        } catch {
+          setConnState("connected");
+          setShowManual(false);
+        }
+        setOnboardingInProgress(false);
       } catch (e) {
         console.error(e);
         setConnState("error");
@@ -596,6 +613,7 @@ function PayPalConnectionPage() {
       const res = await fetch(SAVE_CREDENTIALS_ENDPOINT, {
         method: "POST",
         headers: { "content-type": "application/json" },
+        credentials: "include",
         body: JSON.stringify({
           clientId: clientId.trim(),
           clientSecret: secret.trim(),
@@ -607,7 +625,8 @@ function PayPalConnectionPage() {
         throw new Error(txt || `Save credentials failed (${res.status})`);
       }
       const statusRes = await fetch(`${STATUS_ENDPOINT}?environment=${env}`, {
-        method: "GET"
+        method: "GET",
+        credentials: "include"
       });
       const refreshedStatus = await statusRes.json().catch(() => ({}));
       setConnState("connected");
@@ -615,7 +634,6 @@ function PayPalConnectionPage() {
       setShowManual(false);
       try {
         localStorage.removeItem(CACHE_KEY);
-        localStorage.removeItem(RELOAD_KEY);
       } catch {
       }
     } catch (e) {
@@ -634,10 +652,12 @@ function PayPalConnectionPage() {
     setError(null);
     setFinalUrl("");
     setShowManual(false);
+    setStatusInfo(null);
     try {
       const res = await fetch(DISCONNECT_ENDPOINT, {
         method: "POST",
         headers: { "content-type": "application/json" },
+        credentials: "include",
         body: JSON.stringify({ environment: env })
       });
       if (!res.ok) {
@@ -646,7 +666,6 @@ function PayPalConnectionPage() {
       }
       try {
         localStorage.removeItem(CACHE_KEY);
-        localStorage.removeItem(RELOAD_KEY);
       } catch {
       }
       currentRunId.current = ++runIdRef.current;
@@ -668,19 +687,19 @@ function PayPalConnectionPage() {
       await fetch("/admin/paypal/environment", {
         method: "POST",
         headers: { "content-type": "application/json" },
+        credentials: "include",
         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("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, {}),
       /* @__PURE__ */ jsxRuntime.jsx("div", { className: "rounded-xl border border-ui-border-base bg-ui-bg-base shadow-sm", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-1 gap-y-6 p-4 md:grid-cols-[260px_1fr] md:items-start", children: [
         /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-sm font-medium pt-2", children: "Environment" }),
@@ -704,6 +723,7 @@ function PayPalConnectionPage() {
             /* @__PURE__ */ jsxRuntime.jsx(
               "a",
               {
+                target: "PPFrame",
                 "data-paypal-button": "true",
                 "data-paypal-onboard-complete": "onboardingCallback",
                 href: "#",
@@ -752,6 +772,7 @@ function PayPalConnectionPage() {
                   ppBtnMeasureRef.current = node;
                 },
                 id: "paypal-button",
+                target: "PPFrame",
                 "data-paypal-button": "true",
                 href: finalUrl || "#",
                 "data-paypal-onboard-complete": "onboardingCallback",
@@ -810,10 +831,11 @@ function PayPalConnectionPage() {
         ] }) }),
         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("label", { htmlFor: "pp-manual-client-id", className: "text-sm font-medium", children: "Client ID" }),
             /* @__PURE__ */ jsxRuntime.jsx(
               "input",
               {
+                id: "pp-manual-client-id",
                 type: "text",
                 value: clientId,
                 onChange: (e) => setClientId(e.target.value),
@@ -824,10 +846,11 @@ function PayPalConnectionPage() {
             )
           ] }),
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-1", children: [
-            /* @__PURE__ */ jsxRuntime.jsx("label", { className: "text-sm font-medium", children: "Secret" }),
+            /* @__PURE__ */ jsxRuntime.jsx("label", { htmlFor: "pp-manual-secret", className: "text-sm font-medium", children: "Secret" }),
             /* @__PURE__ */ jsxRuntime.jsx(
               "input",
               {
+                id: "pp-manual-secret",
                 type: "password",
                 value: secret,
                 onChange: (e) => setSecret(e.target.value),
@@ -921,39 +944,6 @@ function PayPalConnectionPage() {
 function PayPalPayLaterMessagingPage() {
   return /* @__PURE__ */ jsxRuntime.jsx(reactRouterDom.Navigate, { to: "/settings/paypal/connection", replace: true });
 }
-async function adminFetch(path, opts = {}) {
-  var _a;
-  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 = { Accept: "application/json" };
-  if (body !== void 0) headers["Content-Type"] = "application/json";
-  if (typeof window !== "undefined") {
-    const token = (_a = window.__medusa__) == null ? void 0 : _a.token;
-    if (token) headers["Authorization"] = `Bearer ${token}`;
-  }
-  const res = await fetch(url, {
-    method,
-    headers,
-    credentials: "include",
-    body: body !== void 0 ? JSON.stringify(body) : void 0
-  });
-  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 {};
-  try {
-    return JSON.parse(text);
-  } catch {
-    return {};
-  }
-}
 const COLOR_OPTIONS = [
   { value: "gold", label: "Gold (Recommended)" },
   { value: "blue", label: "Blue" },
@@ -978,36 +968,6 @@ const LABEL_OPTIONS = [
   { value: "buynow", label: "Buy Now" },
   { value: "pay", label: "Pay" }
 ];
-function SectionCard({
-  title,
-  description,
-  children,
-  right
-}) {
-  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({
-  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 PayPalSettingsTab() {
   const [form, setForm] = react.useState({
     enabled: true,
@@ -1023,6 +983,7 @@ function PayPalSettingsTab() {
   const [saving, setSaving] = react.useState(false);
   const [toast, setToast] = react.useState(null);
   const didInit = react.useRef(false);
+  const dismissToast = react.useCallback(() => setToast(null), []);
   react.useEffect(() => {
     if (didInit.current) return;
     didInit.current = true;
@@ -1065,14 +1026,12 @@ function PayPalSettingsTab() {
           ...saved
         }));
       }
-      setToast({ type: "success", message: "Settings saved" });
-      window.setTimeout(() => setToast(null), 2500);
+      setToast({ kind: "success", message: "Settings saved" });
     } catch (e) {
       setToast({
-        type: "error",
+        kind: "error",
         message: (e instanceof Error ? e.message : "") || "Failed to save settings."
       });
-      window.setTimeout(() => setToast(null), 3500);
     } finally {
       setSaving(false);
     }
@@ -1083,15 +1042,7 @@ function PayPalSettingsTab() {
       /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center gap-2" })
     ] }),
     /* @__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(Toast, { toast, onClose: dismissToast }),
     /* @__PURE__ */ jsxRuntime.jsx(
       SectionCard,
       {
@@ -1123,9 +1074,10 @@ function PayPalSettingsTab() {
             ),
             /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm text-ui-fg-base", children: "Enable PayPal" })
           ] }) }),
-          /* @__PURE__ */ jsxRuntime.jsx(FieldRow, { label: "Title", children: /* @__PURE__ */ jsxRuntime.jsx(
+          /* @__PURE__ */ jsxRuntime.jsx(FieldRow, { label: "Title", htmlFor: "pp-title", children: /* @__PURE__ */ jsxRuntime.jsx(
             "input",
             {
+              id: "pp-title",
               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",
@@ -1141,36 +1093,40 @@ function PayPalSettingsTab() {
         title: "Button Appearance",
         description: "Control PayPal Smart Button styling (color/shape/size/label).",
         children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "divide-y divide-ui-border-base", children: [
-          /* @__PURE__ */ jsxRuntime.jsx(FieldRow, { label: "Button Color", children: /* @__PURE__ */ jsxRuntime.jsx(
+          /* @__PURE__ */ jsxRuntime.jsx(FieldRow, { label: "Button Color", htmlFor: "pp-btn-color", children: /* @__PURE__ */ jsxRuntime.jsx(
             "select",
             {
+              id: "pp-btn-color",
               value: form.buttonColor,
               onChange: (e) => setForm((p) => ({ ...p, buttonColor: 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: COLOR_OPTIONS.map((o) => /* @__PURE__ */ jsxRuntime.jsx("option", { value: o.value, children: o.label }, o.value))
             }
           ) }),
-          /* @__PURE__ */ jsxRuntime.jsx(FieldRow, { label: "Button Shape", children: /* @__PURE__ */ jsxRuntime.jsx(
+          /* @__PURE__ */ jsxRuntime.jsx(FieldRow, { label: "Button Shape", htmlFor: "pp-btn-shape", children: /* @__PURE__ */ jsxRuntime.jsx(
             "select",
             {
+              id: "pp-btn-shape",
               value: form.buttonShape,
               onChange: (e) => setForm((p) => ({ ...p, buttonShape: 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: SHAPE_OPTIONS.map((o) => /* @__PURE__ */ jsxRuntime.jsx("option", { value: o.value, children: o.label }, o.value))
             }
           ) }),
-          /* @__PURE__ */ jsxRuntime.jsx(FieldRow, { label: "Button Width", children: /* @__PURE__ */ jsxRuntime.jsx(
+          /* @__PURE__ */ jsxRuntime.jsx(FieldRow, { label: "Button Width", htmlFor: "pp-btn-width", children: /* @__PURE__ */ jsxRuntime.jsx(
             "select",
             {
+              id: "pp-btn-width",
               value: form.buttonWidth,
               onChange: (e) => setForm((p) => ({ ...p, buttonWidth: 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: WIDTH_OPTIONS.map((o) => /* @__PURE__ */ jsxRuntime.jsx("option", { value: o.value, children: o.label }, o.value))
             }
           ) }),
-          /* @__PURE__ */ jsxRuntime.jsx(FieldRow, { label: "Button Height", children: /* @__PURE__ */ jsxRuntime.jsx(
+          /* @__PURE__ */ jsxRuntime.jsx(FieldRow, { label: "Button Height", htmlFor: "pp-btn-height", children: /* @__PURE__ */ jsxRuntime.jsx(
             "select",
             {
+              id: "pp-btn-height",
               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",
@@ -1180,9 +1136,10 @@ function PayPalSettingsTab() {
               ] }, h))
             }
           ) }),
-          /* @__PURE__ */ jsxRuntime.jsx(FieldRow, { label: "Button Label", children: /* @__PURE__ */ jsxRuntime.jsx(
+          /* @__PURE__ */ jsxRuntime.jsx(FieldRow, { label: "Button Label", htmlFor: "pp-btn-label", children: /* @__PURE__ */ jsxRuntime.jsx(
             "select",
             {
+              id: "pp-btn-label",
               value: form.buttonLabel,
               onChange: (e) => setForm((p) => ({ ...p, buttonLabel: 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",