@easypayment/medusa-payment-paypal 0.9.22 → 0.9.24

package/.medusa/server/src/admin/routes/settings/paypal/connection/page.js

@@ -17,15 +17,10 @@ const PARTNER_JS_URLS = {
     live: "https://www.paypal.com/webapps/merchantboarding/js/lib/lightbox/partner.js",
 };
 const SERVICE_URL = "/admin/paypal/onboarding-link";
-// PayPal's conventional mini-browser window name; also used as the anchor's
-// `target` so partner.js opens the flow in a popup.
+// PayPal's conventional mini-browser window name (also the anchor target).
 const POPUP_NAME = "PPFrame";
-// The onboarding link is cached in the browser for 6 hours. This is the heart of
-// the integration: partner.js can only wire the mini-browser + completion
-// callback if the anchor already carries a valid onboarding href when partner.js
-// initializes. By caching the link (and reloading once to populate the cache on
-// a cold start) the link is always present on page load, so partner.js can take
-// over the click and run its flow exactly as documented.
+// The onboarding link is cached in the browser for 6 hours so it is always
+// present for the mini-browser flow without regenerating on every load.
 const CACHE_PREFIX = "pp_onboard_cache";
 const CACHE_EXPIRY = 6 * 60 * 60 * 1000; // 6 hours
 const ONBOARDING_COMPLETE_ENDPOINT = "/admin/paypal/onboard-complete";
@@ -33,9 +28,6 @@ const STATUS_ENDPOINT = "/admin/paypal/status";
 const SAVE_CREDENTIALS_ENDPOINT = "/admin/paypal/save-credentials";
 const DISCONNECT_ENDPOINT = "/admin/paypal/disconnect";
 const ENVIRONMENT_ENDPOINT = "/admin/paypal/environment";
-// Onboarding URLs are environment-specific, so the cache is keyed per
-// environment — a single shared key let a stale sandbox URL leak into the live
-// flow (and vice-versa).
 const cacheKeyFor = (env) => `${CACHE_PREFIX}_${env}`;
 function readCachedUrl(env) {
     if (typeof window === "undefined")
@@ -56,8 +48,6 @@ function readCachedUrl(env) {
     }
     return null;
 }
-// Returns true only if the value was actually persisted (storage enabled), which
-// lets the caller decide whether reloading to pick up the cache is safe.
 function writeCachedUrl(env, url) {
     try {
         localStorage.setItem(cacheKeyFor(env), JSON.stringify({ url, ts: Date.now() }));
@@ -81,18 +71,79 @@ function clearCachedUrl(env) {
         /* ignore */
     }
 }
+function isPayPalOrigin(origin) {
+    try {
+        const host = new URL(origin).hostname.toLowerCase();
+        return (host === "www.paypal.com" ||
+            host === "www.sandbox.paypal.com" ||
+            host.endsWith(".paypal.com") ||
+            host.endsWith(".paypalobjects.com"));
+    }
+    catch {
+        return false;
+    }
+}
+// Defensively pull authCode/sharedId out of whatever shape PayPal posts back
+// (object, JSON string, or query string; possibly nested). We only act when both
+// are present, which ignores the many unrelated intermediate messages PayPal
+// emits.
+function extractAuth(data) {
+    if (!data)
+        return {};
+    if (typeof data === "object") {
+        const obj = data;
+        const authCode = obj.authCode ?? obj.auth_code ?? obj.authcode ?? obj.code;
+        const sharedId = obj.sharedId ?? obj.shared_id ?? obj.sharedid;
+        if (authCode && sharedId) {
+            return { authCode: String(authCode), sharedId: String(sharedId) };
+        }
+        for (const key of ["data", "payload", "message", "detail", "body", "params"]) {
+            if (obj[key] && typeof obj[key] === "object") {
+                const inner = extractAuth(obj[key]);
+                if (inner.authCode && inner.sharedId)
+                    return inner;
+            }
+            if (typeof obj[key] === "string") {
+                const inner = extractAuth(obj[key]);
+                if (inner.authCode && inner.sharedId)
+                    return inner;
+            }
+        }
+        return {};
+    }
+    if (typeof data === "string") {
+        const s = data.trim();
+        if (!s)
+            return {};
+        if (s.startsWith("{") || s.startsWith("[")) {
+            try {
+                return extractAuth(JSON.parse(s));
+            }
+            catch {
+                /* not JSON */
+            }
+        }
+        if (/auth_?code/i.test(s) && /shared_?id/i.test(s)) {
+            try {
+                const sp = new URLSearchParams(s.replace(/^[?#]/, ""));
+                const authCode = sp.get("authCode") || sp.get("auth_code") || undefined;
+                const sharedId = sp.get("sharedId") || sp.get("shared_id") || undefined;
+                if (authCode && sharedId)
+                    return { authCode, sharedId };
+            }
+            catch {
+                /* not a query string */
+            }
+        }
+    }
+    return {};
+}
 function PayPalConnectionPage() {
     const [env, setEnv] = (0, react_1.useState)("live");
-    // We must know the server's environment before generating/looking up a link so
-    // the per-environment cache and the generated link always match.
     const [envReady, setEnvReady] = (0, react_1.useState)(false);
     const [connState, setConnState] = (0, react_1.useState)("loading");
-    // True once partner.js has loaded and bound its click interceptor to the
-    // button. The button stays in the DOM but is not clickable until then, so a
-    // click can never fall through to the native anchor (which would open a tab
-    // without partner.js's onboarding flow / completion callback).
-    const [partnerReady, setPartnerReady] = (0, react_1.useState)(false);
     const [error, setError] = (0, react_1.useState)(null);
+    const [popupBlocked, setPopupBlocked] = (0, react_1.useState)(false);
     const [finalUrl, setFinalUrl] = (0, react_1.useState)("");
     const [showManual, setShowManual] = (0, react_1.useState)(false);
     const [clientId, setClientId] = (0, react_1.useState)("");
@@ -100,13 +151,20 @@ function PayPalConnectionPage() {
     const [statusInfo, setStatusInfo] = (0, react_1.useState)(null);
     const [onboardingInProgress, setOnboardingInProgress] = (0, react_1.useState)(false);
     const initLoaderRef = (0, react_1.useRef)(null);
+    const paypalButtonRef = (0, react_1.useRef)(null);
     const errorLogRef = (0, react_1.useRef)(null);
     const runIdRef = (0, react_1.useRef)(0);
     const currentRunId = (0, react_1.useRef)(0);
     const envRef = (0, react_1.useRef)(env);
     envRef.current = env;
-    // Guards against partner.js's bridge invoking the completion callback more
-    // than once.
+    const finalUrlRef = (0, react_1.useRef)(finalUrl);
+    finalUrlRef.current = finalUrl;
+    const connStateRef = (0, react_1.useRef)(connState);
+    connStateRef.current = connState;
+    const inProgressRef = (0, react_1.useRef)(onboardingInProgress);
+    inProgressRef.current = onboardingInProgress;
+    const popupRef = (0, react_1.useRef)(null);
+    const pollRef = (0, react_1.useRef)(null);
     const completedRef = (0, react_1.useRef)(false);
     const ppBtnMeasureRef = (0, react_1.useRef)(null);
     const [ppBtnWidth, setPpBtnWidth] = (0, react_1.useState)(null);
@@ -117,16 +175,156 @@ function PayPalConnectionPage() {
         setConnState("error");
         setError(msg);
     }, []);
-    // Generate a fresh onboarding link, cache it for 6 hours, then reload the page
-    // so that on the next load the cached link is already present for partner.js.
-    // If browser storage is unavailable we fall back to using the link in-place
-    // (no reload) so we can never get stuck in a reload loop.
+    const stopPoll = (0, react_1.useCallback)(() => {
+        if (pollRef.current) {
+            clearInterval(pollRef.current);
+            pollRef.current = null;
+        }
+    }, []);
+    // Open PayPal's mini-browser ourselves, synchronously inside the click gesture.
+    // This is the only reliable way to get a popup (rather than a new tab, which is
+    // what happens when partner.js's asynchronous open misses the user-activation
+    // window). Named POPUP_NAME and sized like PayPal's mini-browser.
+    const openOnboardingPopup = (0, react_1.useCallback)((url) => {
+        const w = 450;
+        const h = 600;
+        const baseLeft = typeof window.screenX === "number" ? window.screenX : window.screenLeft || 0;
+        const baseTop = typeof window.screenY === "number" ? window.screenY : window.screenTop || 0;
+        const outerW = window.outerWidth || document.documentElement.clientWidth || 1024;
+        const outerH = window.outerHeight || document.documentElement.clientHeight || 768;
+        const left = Math.round(baseLeft + Math.max(0, (outerW - w) / 2));
+        const top = Math.round(baseTop + Math.max(0, (outerH - h) / 2));
+        const features = `popup=yes,width=${w},height=${h},left=${left},top=${top},scrollbars=yes,resizable=yes`;
+        let popup = null;
+        try {
+            popup = window.open(url, POPUP_NAME, features);
+        }
+        catch {
+            popup = null;
+        }
+        if (popup) {
+            popupRef.current = popup;
+            try {
+                popup.focus();
+            }
+            catch {
+                /* ignore */
+            }
+        }
+        return popup;
+    }, []);
+    // Exchange authCode/sharedId for seller credentials. Idempotent so the multiple
+    // completion signals (our message listener, partner.js's bridge, the status
+    // poll) only run it once.
+    const completeOnboarding = (0, react_1.useCallback)(async (authCode, sharedId) => {
+        if (!authCode || !sharedId)
+            return;
+        if (completedRef.current)
+            return;
+        completedRef.current = true;
+        stopPoll();
+        try {
+            window.onbeforeunload = null;
+        }
+        catch { }
+        const activeEnv = envRef.current === "sandbox" ? "sandbox" : "live";
+        setOnboardingInProgress(true);
+        setConnState("loading");
+        setError(null);
+        setPopupBlocked(false);
+        try {
+            const res = await fetch(ONBOARDING_COMPLETE_ENDPOINT, {
+                method: "POST",
+                headers: { "content-type": "application/json" },
+                credentials: "include",
+                body: JSON.stringify({ authCode, sharedId, env: activeEnv }),
+            });
+            if (!res.ok) {
+                const txt = await res.text().catch(() => "");
+                throw new Error(txt || `Onboarding exchange failed (${res.status})`);
+            }
+            try {
+                popupRef.current?.close();
+            }
+            catch { }
+            try {
+                const close1 = window.PAYPAL?.apps?.Signup?.MiniBrowser?.closeFlow;
+                if (typeof close1 === "function")
+                    close1();
+            }
+            catch { }
+            try {
+                const close2 = window.PAYPAL?.apps?.Signup?.miniBrowser &&
+                    window.PAYPAL.apps.Signup.miniBrowser.closeFlow;
+                if (typeof close2 === "function")
+                    close2();
+            }
+            catch { }
+            clearCachedUrl(activeEnv);
+            try {
+                const statusRes = await fetch(`${STATUS_ENDPOINT}?environment=${activeEnv}`, {
+                    method: "GET",
+                    credentials: "include",
+                });
+                const refreshedStatus = await statusRes.json().catch(() => ({}));
+                setStatusInfo(refreshedStatus || null);
+            }
+            catch { }
+            setConnState("connected");
+            setShowManual(false);
+        }
+        catch (e) {
+            completedRef.current = false;
+            console.error(e);
+            setConnState("error");
+            setError(e?.message || "Exchange failed while saving credentials.");
+        }
+        finally {
+            setOnboardingInProgress(false);
+        }
+    }, [stopPoll]);
+    // After the popup is opened, poll the server. If the credentials get saved by
+    // any completion path, the status flips to "connected" and we sync the UI even
+    // if a message was missed.
+    const startStatusPoll = (0, react_1.useCallback)(() => {
+        stopPoll();
+        let ticks = 0;
+        pollRef.current = setInterval(async () => {
+            ticks += 1;
+            if (completedRef.current || ticks > 150 /* ~5 min */) {
+                stopPoll();
+                return;
+            }
+            try {
+                const r = await fetch(`${STATUS_ENDPOINT}?environment=${envRef.current}`, {
+                    method: "GET",
+                    credentials: "include",
+                });
+                const st = await r.json().catch(() => ({}));
+                if (st?.status === "connected" && st?.seller_client_id_present === true) {
+                    completedRef.current = true;
+                    stopPoll();
+                    try {
+                        popupRef.current?.close();
+                    }
+                    catch { }
+                    clearCachedUrl(envRef.current);
+                    setStatusInfo(st);
+                    setConnState("connected");
+                    setShowManual(false);
+                    setOnboardingInProgress(false);
+                }
+            }
+            catch {
+                /* keep polling */
+            }
+        }, 2000);
+    }, [stopPoll]);
     const generateLinkAndReload = (0, react_1.useCallback)(async (targetEnv, runId) => {
         if (initLoaderRef.current) {
             const loaderText = initLoaderRef.current.querySelector("#loader-text");
-            if (loaderText) {
+            if (loaderText)
                 loaderText.textContent = "Generating onboarding session...";
-            }
         }
         try {
             const res = await fetch(SERVICE_URL, {
@@ -148,13 +346,9 @@ function PayPalConnectionPage() {
             const url = href + (href.includes("?") ? "&" : "?") + "displayMode=minibrowser";
             const persisted = writeCachedUrl(targetEnv, url);
             if (persisted) {
-                // The cache survived; reload so the link is present at first render and
-                // partner.js initializes against it. The post-reload load finds the
-                // cache (no regeneration), so this can't loop.
                 window.location.reload();
                 return;
             }
-            // Storage disabled — use the link directly without reloading.
             setFinalUrl(url);
             setConnState("ready");
         }
@@ -183,11 +377,7 @@ function PayPalConnectionPage() {
             alive = false;
         };
     }, []);
-    // Page-load flow:
-    //   1. If already connected, show the connected state.
-    //   2. Else if a valid cached link exists, use it (partner.js will bind it).
-    //   3. Else generate a link, cache it for 6h, and reload so the cached link is
-    //      present for partner.js on the next load.
+    // Page-load flow: connected? -> cached link? -> else generate + cache + reload.
     (0, react_1.useEffect)(() => {
         if (!envReady)
             return;
@@ -198,6 +388,7 @@ function PayPalConnectionPage() {
         const run = async () => {
             setConnState("loading");
             setError(null);
+            setPopupBlocked(false);
             setFinalUrl("");
             try {
                 const r = await fetch(`${STATUS_ENDPOINT}?environment=${env}`, {
@@ -233,30 +424,15 @@ function PayPalConnectionPage() {
             cancelled = true;
         };
     }, [env, envReady, generateLinkAndReload]);
-    // Load partner.js once the anchor exists with its real (cached) href, then run
-    // PayPal's initializer. In a React SPA partner.js's own DOMContentLoaded hook
-    // already fired before this route mounted, so we must call init()/render()
-    // ourselves for it to discover the button and take over the click into the
-    // mini-browser — opening the popup, and wiring its postMessage bridge that
-    // invokes window.onboardingCallback and closes the popup on completion.
+    // Load partner.js + init for its postMessage->onboardingCallback bridge (a
+    // secondary completion path next to our own message listener). We open the
+    // popup ourselves, so partner.js is NOT relied on to open the window.
     (0, react_1.useEffect)(() => {
         if (connState !== "ready" || !finalUrl)
             return;
         const scriptUrl = PARTNER_JS_URLS[env];
         let cancelled = false;
         let pollTimer;
-        // The button is gated on partnerReady; reset it for this (re)load.
-        setPartnerReady(false);
-        // Safety net: if partner.js can't load (e.g. blocked), enable the button
-        // anyway after a few seconds rather than leaving it permanently disabled.
-        const readyFallback = setTimeout(() => {
-            if (!cancelled)
-                setPartnerReady(true);
-        }, 6000);
-        const markReady = () => {
-            if (!cancelled)
-                setPartnerReady(true);
-        };
         const initPartner = (attempt = 0) => {
             if (cancelled)
                 return;
@@ -273,7 +449,6 @@ function PayPalConnectionPage() {
                 catch (e) {
                     console.error("[paypal] partner.js init failed:", e);
                 }
-                markReady();
                 return;
             }
             if (typeof signup?.render === "function") {
@@ -283,11 +458,8 @@ function PayPalConnectionPage() {
                 catch (e) {
                     console.error("[paypal] partner.js render failed:", e);
                 }
-                markReady();
                 return;
             }
-            // The namespace may not be populated the instant onload fires; retry
-            // briefly before giving up.
             if (attempt < 40) {
                 pollTimer = setTimeout(() => initPartner(attempt + 1), 50);
                 return;
@@ -296,10 +468,7 @@ function PayPalConnectionPage() {
                 document.dispatchEvent(new Event("DOMContentLoaded"));
             }
             catch { }
-            markReady();
         };
-        // Remove any stale copy + namespace so the fresh load re-registers against
-        // the current environment (sandbox vs live partner.js differ).
         const existingScript = document.getElementById("paypal-partner-js");
         if (existingScript) {
             existingScript.parentNode?.removeChild(existingScript);
@@ -315,85 +484,45 @@ function PayPalConnectionPage() {
         ppScript.src = scriptUrl;
         ppScript.async = true;
         ppScript.onload = () => initPartner();
-        ppScript.onerror = () => markReady();
         document.body.appendChild(ppScript);
         return () => {
             cancelled = true;
-            clearTimeout(readyFallback);
-            if (pollTimer) {
+            if (pollTimer)
                 clearTimeout(pollTimer);
-            }
-            if (ppScript.parentNode) {
+            if (ppScript.parentNode)
                 ppScript.parentNode.removeChild(ppScript);
-            }
         };
     }, [connState, finalUrl, env]);
-    // partner.js calls this (by the name in data-paypal-onboard-complete) when the
-    // seller finishes onboarding, passing the authCode + sharedId to exchange for
-    // seller credentials.
-    const completeOnboarding = (0, react_1.useCallback)(async (authCode, sharedId) => {
-        if (!authCode || !sharedId)
-            return;
-        if (completedRef.current)
-            return;
-        completedRef.current = true;
-        try {
-            window.onbeforeunload = null;
-        }
-        catch { }
-        const activeEnv = envRef.current === "sandbox" ? "sandbox" : "live";
-        setOnboardingInProgress(true);
-        setConnState("loading");
-        setError(null);
-        try {
-            const res = await fetch(ONBOARDING_COMPLETE_ENDPOINT, {
-                method: "POST",
-                headers: { "content-type": "application/json" },
-                credentials: "include",
-                body: JSON.stringify({ authCode, sharedId, env: activeEnv }),
-            });
-            if (!res.ok) {
-                const txt = await res.text().catch(() => "");
-                throw new Error(txt || `Onboarding exchange failed (${res.status})`);
-            }
-            // Close the partner.js mini-browser.
+    // PRIMARY completion path: receive PayPal's onboarding postMessage ourselves.
+    // The diagnostic log lets us confirm the exact origin/shape PayPal sends in a
+    // real run if a tweak to the parser is ever needed.
+    (0, react_1.useEffect)(() => {
+        const onMessage = (ev) => {
+            let serialized = "";
             try {
-                const close1 = window.PAYPAL?.apps?.Signup?.MiniBrowser?.closeFlow;
-                if (typeof close1 === "function")
-                    close1();
+                serialized =
+                    typeof ev.data === "string" ? ev.data : JSON.stringify(ev.data);
             }
-            catch { }
-            try {
-                const close2 = window.PAYPAL?.apps?.Signup?.miniBrowser &&
-                    window.PAYPAL.apps.Signup.miniBrowser.closeFlow;
-                if (typeof close2 === "function")
-                    close2();
+            catch {
+                serialized = String(ev.data);
             }
-            catch { }
-            // The link has been consumed; drop it so a future flow regenerates one.
-            clearCachedUrl(activeEnv);
-            try {
-                const statusRes = await fetch(`${STATUS_ENDPOINT}?environment=${activeEnv}`, {
-                    method: "GET",
-                    credentials: "include",
-                });
-                const refreshedStatus = await statusRes.json().catch(() => ({}));
-                setStatusInfo(refreshedStatus || null);
+            const looksRelevant = isPayPalOrigin(ev.origin) ||
+                /auth_?code|shared_?id|onboard|merchantId/i.test(serialized || "");
+            if (looksRelevant) {
+                // eslint-disable-next-line no-console
+                console.info("[PayPal onboarding] message from", ev.origin, "·", (serialized || "").slice(0, 500));
             }
-            catch { }
-            setConnState("connected");
-            setShowManual(false);
-        }
-        catch (e) {
-            completedRef.current = false;
-            console.error(e);
-            setConnState("error");
-            setError(e?.message || "Exchange failed while saving credentials.");
-        }
-        finally {
-            setOnboardingInProgress(false);
-        }
-    }, []);
+            if (!isPayPalOrigin(ev.origin))
+                return;
+            const { authCode, sharedId } = extractAuth(ev.data);
+            if (authCode && sharedId) {
+                completeOnboarding(authCode, sharedId);
+            }
+        };
+        window.addEventListener("message", onMessage);
+        return () => window.removeEventListener("message", onMessage);
+    }, [completeOnboarding]);
+    // SECONDARY completion path: partner.js's bridge calls this by name.
     (0, react_1.useLayoutEffect)(() => {
         window.onboardingCallback = (authCode, sharedId) => {
             completeOnboarding(authCode, sharedId);
@@ -402,6 +531,39 @@ function PayPalConnectionPage() {
             window.onboardingCallback = undefined;
         };
     }, [completeOnboarding]);
+    // Capture-phase opener: runs before partner.js, opens the popup synchronously,
+    // and stops partner.js's (unreliable, async) open + the native anchor so we get
+    // exactly one popup and never a new tab.
+    (0, react_1.useEffect)(() => {
+        const onCaptureClick = (e) => {
+            const btn = paypalButtonRef.current;
+            if (!btn)
+                return;
+            const target = e.target;
+            if (!target || !btn.contains(target))
+                return;
+            e.preventDefault();
+            e.stopImmediatePropagation();
+            if (connStateRef.current !== "ready" ||
+                !finalUrlRef.current ||
+                inProgressRef.current) {
+                return;
+            }
+            completedRef.current = false;
+            const popup = openOnboardingPopup(finalUrlRef.current);
+            if (!popup) {
+                setPopupBlocked(true);
+                return;
+            }
+            setPopupBlocked(false);
+            startStatusPoll();
+        };
+        document.addEventListener("click", onCaptureClick, true);
+        return () => document.removeEventListener("click", onCaptureClick, true);
+    }, [openOnboardingPopup, startStatusPoll]);
+    (0, react_1.useEffect)(() => {
+        return () => stopPoll();
+    }, [stopPoll]);
     (0, react_1.useLayoutEffect)(() => {
         const el = ppBtnMeasureRef.current;
         if (!el)
@@ -427,6 +589,11 @@ function PayPalConnectionPage() {
                 window.removeEventListener("resize", update);
         };
     }, [connState, env, finalUrl]);
+    // Defensive: the capture listener handles the click; this just guarantees the
+    // native href can never navigate.
+    const handleConnectClick = (e) => {
+        e.preventDefault();
+    };
     const handleSaveManual = async () => {
         if (!canSaveManual || onboardingInProgress)
             return;
@@ -491,8 +658,6 @@ function PayPalConnectionPage() {
             }
             clearCachedUrl(env);
             completedRef.current = false;
-            // Generate a fresh link for the now-disconnected environment and reload so
-            // the onboarding button is ready again.
             currentRunId.current = ++runIdRef.current;
             await generateLinkAndReload(env, currentRunId.current);
         }
@@ -511,9 +676,8 @@ function PayPalConnectionPage() {
             return;
         completedRef.current = false;
         clearCachedUrl();
+        setPopupBlocked(false);
         setConnState("loading");
-        // Persist the environment BEFORE switching local state so the post-reload
-        // GET /environment returns the same value the cache was keyed under.
         try {
             await fetch(ENVIRONMENT_ENDPOINT, {
                 method: "POST",
@@ -528,19 +692,13 @@ function PayPalConnectionPage() {
     return ((0, jsx_runtime_1.jsxs)("div", { className: "p-6", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col gap-6", children: [(0, jsx_runtime_1.jsx)("div", { className: "flex items-start justify-between gap-4", children: (0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)("h1", { className: "text-xl font-semibold text-ui-fg-base", children: "PayPal Gateway By Easy Payment" }) }) }), (0, jsx_runtime_1.jsx)(Tabs_1.default, {}), (0, jsx_runtime_1.jsx)("div", { className: "rounded-xl border border-ui-border-base bg-ui-bg-base shadow-sm", children: (0, jsx_runtime_1.jsxs)("div", { className: "grid grid-cols-1 gap-y-6 p-4 md:grid-cols-[260px_1fr] md:items-start", children: [(0, jsx_runtime_1.jsx)("div", { className: "text-sm font-medium pt-2", children: "Environment" }), (0, jsx_runtime_1.jsx)("div", { className: "max-w-xl", children: (0, jsx_runtime_1.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: [(0, jsx_runtime_1.jsx)("option", { value: "sandbox", children: "Sandbox (Test Mode)" }), (0, jsx_runtime_1.jsx)("option", { value: "live", children: "Live (Production)" })] }) }), (0, jsx_runtime_1.jsx)("div", { className: "text-sm font-medium pt-2", children: env === "sandbox" ? "Connect to PayPal (Sandbox)" : "Connect to PayPal" }), (0, jsx_runtime_1.jsx)("div", { className: "max-w-xl", children: connState === "connected" ? ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("div", { className: "text-sm text-green-600 bg-green-50 p-3 rounded border border-green-200", children: "\u2705 Successfully connected to PayPal!" }), (0, jsx_runtime_1.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: [(0, jsx_runtime_1.jsx)("div", { className: "font-medium text-ui-fg-base", children: "Connected PayPal account" }), (0, jsx_runtime_1.jsxs)("div", { className: "mt-1", children: ["Email:", " ", (0, jsx_runtime_1.jsx)("span", { className: "font-mono text-ui-fg-base", children: statusInfo?.seller_email || "Unavailable" })] })] }), (0, jsx_runtime_1.jsx)("div", { className: "mt-3 flex items-center gap-2", children: (0, jsx_runtime_1.jsx)("button", { type: "button", onClick: handleDisconnect, disabled: onboardingInProgress, 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: "Disconnect" }) })] })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", { ref: initLoaderRef, id: "init-loader", className: `status-msg mb-4 ${connState !== "loading" ? "hidden" : "block"}`, children: [(0, jsx_runtime_1.jsx)("div", { className: "loader inline-block align-middle mr-2" }), (0, jsx_runtime_1.jsx)("span", { id: "loader-text", className: "text-sm", children: onboardingInProgress
                                                             ? "Configuring connection to PayPal…"
                                                             : "Checking connection..." })] }), (0, jsx_runtime_1.jsxs)("div", { className: `${connState === "ready" ? "block" : "hidden"}`, children: [(0, jsx_runtime_1.jsx)("a", { ref: (node) => {
+                                                            paypalButtonRef.current = node;
                                                             ppBtnMeasureRef.current = node;
-                                                        }, id: "paypal-button", target: POPUP_NAME, "data-paypal-button": "true", href: finalUrl || "#", "data-paypal-onboard-complete": "onboardingCallback", "aria-disabled": onboardingInProgress || !partnerReady, className: "transition-fg relative inline-flex w-fit items-center justify-center overflow-hidden rounded-md outline-none no-underline 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", style: {
-                                                            cursor: onboardingInProgress || !partnerReady
-                                                                ? "not-allowed"
-                                                                : "pointer",
-                                                            opacity: onboardingInProgress || !partnerReady ? 0.6 : 1,
-                                                            // Keep the anchor mounted (partner.js must find it to bind)
-                                                            // but un-clickable until partner.js has taken over the
-                                                            // click — so it can never open a tab via the native href.
-                                                            pointerEvents: onboardingInProgress || !partnerReady ? "none" : "auto",
-                                                        }, children: partnerReady || onboardingInProgress
-                                                            ? "Connect to PayPal"
-                                                            : "Preparing PayPal…" }), (0, jsx_runtime_1.jsx)("div", { className: "mt-2", style: {
+                                                        }, id: "paypal-button", target: POPUP_NAME, "data-paypal-button": "true", href: finalUrl || "#", "data-paypal-onboard-complete": "onboardingCallback", onClick: handleConnectClick, className: "transition-fg relative inline-flex w-fit items-center justify-center overflow-hidden rounded-md outline-none no-underline 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", style: {
+                                                            cursor: onboardingInProgress ? "not-allowed" : "pointer",
+                                                            opacity: onboardingInProgress ? 0.6 : 1,
+                                                            pointerEvents: onboardingInProgress ? "none" : "auto",
+                                                        }, children: "Connect to PayPal" }), popupBlocked && ((0, jsx_runtime_1.jsx)("div", { className: "mt-3 text-left text-xs bg-amber-50 text-amber-700 p-3 border border-amber-200 rounded", children: "Your browser blocked the PayPal popup. Please allow popups for this site, then click \u201CConnect to PayPal\u201D again." })), (0, jsx_runtime_1.jsx)("div", { className: "mt-2", style: {
                                                             width: ppBtnWidth ? `${ppBtnWidth}px` : "auto",
                                                             marginTop: "20px",
                                                             marginBottom: "10px",