@easypayment/medusa-payment-paypal 0.9.24 → 0.9.26

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

@@ -12,15 +12,16 @@ const Tabs_1 = __importDefault(require("../_components/Tabs"));
 exports.config = (0, admin_sdk_1.defineRouteConfig)({
     label: "PayPal Connection",
 });
-const PARTNER_JS_URLS = {
-    sandbox: "https://www.sandbox.paypal.com/webapps/merchantboarding/js/lib/lightbox/partner.js",
-    live: "https://www.paypal.com/webapps/merchantboarding/js/lib/lightbox/partner.js",
-};
+// Let partner.js own the entire onboarding flow: it opens PayPal's mini-browser
+// itself (synchronously inside the click, so no new tab / no popup block), it
+// receives PayPal's completion postMessage, and it invokes the callback named in
+// `data-paypal-onboard-complete` with (authCode, sharedId). This is PayPal's
+// documented integration and matches the official @easypayment WooCommerce
+// plugin. Opening the popup ourselves (a previous attempt at fixing the "opens a
+// new tab" issue) stopped partner.js from receiving completion, which left the
+// popup stranded on PayPal's "isuDone" page and never saved credentials.
+const PARTNER_JS_URL = "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 the anchor target).
-const POPUP_NAME = "PPFrame";
-// 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";
@@ -51,10 +52,9 @@ function readCachedUrl(env) {
 function writeCachedUrl(env, url) {
     try {
         localStorage.setItem(cacheKeyFor(env), JSON.stringify({ url, ts: Date.now() }));
-        return readCachedUrl(env) === url;
     }
     catch {
-        return false;
+        /* ignore */
     }
 }
 function clearCachedUrl(env) {
@@ -71,79 +71,11 @@ 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");
     const [envReady, setEnvReady] = (0, react_1.useState)(false);
     const [connState, setConnState] = (0, react_1.useState)("loading");
     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)("");
@@ -155,17 +87,13 @@ function PayPalConnectionPage() {
     const errorLogRef = (0, react_1.useRef)(null);
     const runIdRef = (0, react_1.useRef)(0);
     const currentRunId = (0, react_1.useRef)(0);
+    const completedRef = (0, react_1.useRef)(false);
+    // Long-lived listeners/timers read the current env through a ref so they never
+    // capture a stale value from the render that registered them.
     const envRef = (0, react_1.useRef)(env);
     envRef.current = env;
-    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 pollTimerRef = (0, react_1.useRef)(null);
+    const pollAttemptsRef = (0, react_1.useRef)(0);
     const ppBtnMeasureRef = (0, react_1.useRef)(null);
     const [ppBtnWidth, setPpBtnWidth] = (0, react_1.useState)(null);
     const canSaveManual = (0, react_1.useMemo)(() => {
@@ -175,54 +103,87 @@ function PayPalConnectionPage() {
         setConnState("error");
         setError(msg);
     }, []);
-    const stopPoll = (0, react_1.useCallback)(() => {
-        if (pollRef.current) {
-            clearInterval(pollRef.current);
-            pollRef.current = null;
+    // Close PayPal's mini-browser via partner.js's API (works under both the
+    // `miniBrowser` and `MiniBrowser` casings PayPal has shipped over time).
+    const closeMiniBrowser = (0, react_1.useCallback)(() => {
+        try {
+            const close1 = window.PAYPAL?.apps?.Signup?.MiniBrowser?.closeFlow;
+            if (typeof close1 === "function")
+                close1();
+        }
+        catch { }
+        try {
+            const close2 = window.PAYPAL?.apps?.Signup?.miniBrowser?.closeFlow;
+            if (typeof close2 === "function")
+                close2();
+        }
+        catch { }
+    }, []);
+    const stopStatusPolling = (0, react_1.useCallback)(() => {
+        if (pollTimerRef.current) {
+            clearTimeout(pollTimerRef.current);
+            pollTimerRef.current = null;
         }
+        pollAttemptsRef.current = 0;
     }, []);
-    // 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;
+    // Fetch status for an env and, if the seller credentials are present, flip the
+    // UI to "connected" and close the PayPal popup. Returns true once connected.
+    const refreshStatusAndMaybeConnect = (0, react_1.useCallback)(async (activeEnv) => {
         try {
-            popup = window.open(url, POPUP_NAME, features);
+            const res = await fetch(`${STATUS_ENDPOINT}?environment=${activeEnv}`, {
+                method: "GET",
+                credentials: "include",
+            });
+            const st = await res.json().catch(() => ({}));
+            const connected = st?.status === "connected" && st?.seller_client_id_present === true;
+            if (connected) {
+                completedRef.current = true;
+                setStatusInfo(st);
+                setConnState("connected");
+                setShowManual(false);
+                setOnboardingInProgress(false);
+                clearCachedUrl(activeEnv);
+                closeMiniBrowser();
+                stopStatusPolling();
+            }
+            return connected;
         }
         catch {
-            popup = null;
+            return false;
         }
-        if (popup) {
-            popupRef.current = popup;
-            try {
-                popup.focus();
-            }
-            catch {
-                /* ignore */
+    }, [closeMiniBrowser, stopStatusPolling]);
+    // While a connect attempt is in flight, the seller may complete onboarding via
+    // a path that never reaches the opener (e.g. partner.js fails to fire its
+    // callback, or the popup's completion message is blocked). The return_url
+    // bridge still saves credentials server-side, so poll status as the reliable
+    // fallback: the moment credentials land, this flips to "connected" and closes
+    // the stranded popup.
+    const startStatusPolling = (0, react_1.useCallback)(() => {
+        stopStatusPolling();
+        const MAX_ATTEMPTS = 100; // ~5 min at 3s intervals
+        const tick = async () => {
+            pollAttemptsRef.current += 1;
+            const connected = await refreshStatusAndMaybeConnect(envRef.current);
+            if (connected || completedRef.current)
+                return;
+            if (pollAttemptsRef.current >= MAX_ATTEMPTS) {
+                stopStatusPolling();
+                return;
             }
-        }
-        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.
+            pollTimerRef.current = setTimeout(tick, 3000);
+        };
+        pollTimerRef.current = setTimeout(tick, 3000);
+    }, [refreshStatusAndMaybeConnect, stopStatusPolling]);
+    // Shared completion: exchange authCode/sharedId for seller credentials, then
+    // close the popup and refresh status. Invoked by partner.js's onboardingCallback
+    // and by the return_url bridge's postMessage. Guarded + server-idempotent so
+    // redundant invocations are harmless.
     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;
         }
@@ -231,7 +192,6 @@ function PayPalConnectionPage() {
         setOnboardingInProgress(true);
         setConnState("loading");
         setError(null);
-        setPopupBlocked(false);
         try {
             const res = await fetch(ONBOARDING_COMPLETE_ENDPOINT, {
                 method: "POST",
@@ -243,84 +203,99 @@ function PayPalConnectionPage() {
                 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 { }
+            closeMiniBrowser();
             clearCachedUrl(activeEnv);
             try {
-                const statusRes = await fetch(`${STATUS_ENDPOINT}?environment=${activeEnv}`, {
-                    method: "GET",
-                    credentials: "include",
-                });
+                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);
+            stopStatusPolling();
         }
         catch (e) {
             completedRef.current = false;
             console.error(e);
+            // The bridge may have already saved credentials server-side; if so the
+            // poll will surface "connected". Don't strand the user on an error.
             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;
-            }
+    }, [closeMiniBrowser, stopStatusPolling]);
+    // Bind partner.js to the connect button once it has a real onboarding URL.
+    const initPartner = (0, react_1.useCallback)(() => {
+        const signup = window.PAYPAL?.apps?.Signup;
+        const init = (signup?.miniBrowser && signup.miniBrowser.init) ||
+            (signup?.MiniBrowser && signup.MiniBrowser.init);
+        if (typeof init === "function") {
             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);
-                }
+                init();
+            }
+            catch (e) {
+                console.error("[paypal] partner.js init failed:", e);
+            }
+        }
+    }, []);
+    // Load partner.js once for the lifetime of the page.
+    (0, react_1.useEffect)(() => {
+        const existingScript = document.getElementById("paypal-partner-js");
+        if (existingScript)
+            return;
+        const preloadHref = PARTNER_JS_URL;
+        let preloadLink = null;
+        if (!document.head.querySelector(`link[rel="preload"][href="${preloadHref}"]`)) {
+            preloadLink = document.createElement("link");
+            preloadLink.rel = "preload";
+            preloadLink.href = preloadHref;
+            preloadLink.as = "script";
+            document.head.appendChild(preloadLink);
+        }
+        const ppScript = document.createElement("script");
+        ppScript.id = "paypal-partner-js";
+        ppScript.src = preloadHref;
+        ppScript.async = true;
+        document.head.appendChild(ppScript);
+        return () => {
+            if (preloadLink?.parentNode)
+                preloadLink.parentNode.removeChild(preloadLink);
+            if (ppScript.parentNode)
+                ppScript.parentNode.removeChild(ppScript);
+        };
+    }, []);
+    // Put the (cached or freshly generated) onboarding URL on the button, then wait
+    // for partner.js to be present before showing the button + initializing it. The
+    // button is only revealed once partner.js is ready, which is what guarantees
+    // the first click opens the mini-browser popup (never a new tab).
+    const activatePayPal = (0, react_1.useCallback)((url, runId) => {
+        if (paypalButtonRef.current) {
+            paypalButtonRef.current.href = url;
+        }
+        setFinalUrl(url);
+        let attempts = 0;
+        const MAX_ATTEMPTS = 200; // ~10s
+        const tryInit = () => {
+            if (runId !== currentRunId.current)
+                return;
+            if (window.PAYPAL?.apps?.Signup) {
+                initPartner();
+                setConnState("ready");
+                return;
             }
-            catch {
-                /* keep polling */
+            attempts++;
+            if (attempts >= MAX_ATTEMPTS) {
+                showError("PayPal partner script failed to load. Please refresh and try again.");
+                return;
             }
-        }, 2000);
-    }, [stopPoll]);
-    const generateLinkAndReload = (0, react_1.useCallback)(async (targetEnv, runId) => {
+            setTimeout(tryInit, 50);
+        };
+        tryInit();
+    }, [initPartner, showError]);
+    const fetchFreshLink = (0, react_1.useCallback)(async (targetEnv, runId) => {
         if (initLoaderRef.current) {
             const loaderText = initLoaderRef.current.querySelector("#loader-text");
             if (loaderText)
@@ -344,20 +319,15 @@ function PayPalConnectionPage() {
                 return;
             }
             const url = href + (href.includes("?") ? "&" : "?") + "displayMode=minibrowser";
-            const persisted = writeCachedUrl(targetEnv, url);
-            if (persisted) {
-                window.location.reload();
-                return;
-            }
-            setFinalUrl(url);
-            setConnState("ready");
+            writeCachedUrl(targetEnv, url);
+            activatePayPal(url, runId);
         }
         catch {
             if (runId !== currentRunId.current)
                 return;
             showError("Unable to connect to service.");
         }
-    }, [showError]);
+    }, [activatePayPal, showError]);
     // Resolve the server environment first.
     (0, react_1.useEffect)(() => {
         let alive = true;
@@ -377,7 +347,7 @@ function PayPalConnectionPage() {
             alive = false;
         };
     }, []);
-    // Page-load flow: connected? -> cached link? -> else generate + cache + reload.
+    // Page-load flow: connected? -> cached link? -> else generate a fresh link.
     (0, react_1.useEffect)(() => {
         if (!envReady)
             return;
@@ -388,7 +358,6 @@ function PayPalConnectionPage() {
         const run = async () => {
             setConnState("loading");
             setError(null);
-            setPopupBlocked(false);
             setFinalUrl("");
             try {
                 const r = await fetch(`${STATUS_ENDPOINT}?environment=${env}`, {
@@ -413,157 +382,52 @@ function PayPalConnectionPage() {
                 return;
             const cached = readCachedUrl(env);
             if (cached) {
-                setFinalUrl(cached);
-                setConnState("ready");
+                activatePayPal(cached, runId);
                 return;
             }
-            await generateLinkAndReload(env, runId);
+            await fetchFreshLink(env, runId);
         };
         run();
         return () => {
             cancelled = true;
         };
-    }, [env, envReady, generateLinkAndReload]);
-    // 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;
-        const initPartner = (attempt = 0) => {
-            if (cancelled)
-                return;
-            const signup = window.PAYPAL?.apps?.Signup;
-            const target = signup?.miniBrowser && typeof signup.miniBrowser.init === "function"
-                ? signup.miniBrowser
-                : signup?.MiniBrowser && typeof signup.MiniBrowser.init === "function"
-                    ? signup.MiniBrowser
-                    : null;
-            if (target?.init) {
-                try {
-                    target.init();
-                }
-                catch (e) {
-                    console.error("[paypal] partner.js init failed:", e);
-                }
-                return;
-            }
-            if (typeof signup?.render === "function") {
-                try {
-                    signup.render();
-                }
-                catch (e) {
-                    console.error("[paypal] partner.js render failed:", e);
-                }
-                return;
-            }
-            if (attempt < 40) {
-                pollTimer = setTimeout(() => initPartner(attempt + 1), 50);
-                return;
-            }
-            try {
-                document.dispatchEvent(new Event("DOMContentLoaded"));
-            }
-            catch { }
-        };
-        const existingScript = document.getElementById("paypal-partner-js");
-        if (existingScript) {
-            existingScript.parentNode?.removeChild(existingScript);
-        }
-        if (window.PAYPAL?.apps?.Signup) {
-            try {
-                delete window.PAYPAL.apps.Signup;
-            }
-            catch { }
-        }
-        const ppScript = document.createElement("script");
-        ppScript.id = "paypal-partner-js";
-        ppScript.src = scriptUrl;
-        ppScript.async = true;
-        ppScript.onload = () => initPartner();
-        document.body.appendChild(ppScript);
-        return () => {
-            cancelled = true;
-            if (pollTimer)
-                clearTimeout(pollTimer);
-            if (ppScript.parentNode)
-                ppScript.parentNode.removeChild(ppScript);
-        };
-    }, [connState, finalUrl, env]);
-    // 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 {
-                serialized =
-                    typeof ev.data === "string" ? ev.data : JSON.stringify(ev.data);
-            }
-            catch {
-                serialized = String(ev.data);
-            }
-            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));
-            }
-            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.
+    }, [env, envReady, fetchFreshLink, activatePayPal]);
+    // partner.js invokes this by name (data-paypal-onboard-complete) once PayPal
+    // returns the seller's authCode + sharedId.
     (0, react_1.useLayoutEffect)(() => {
         window.onboardingCallback = (authCode, sharedId) => {
-            completeOnboarding(authCode, sharedId);
+            void completeOnboarding(authCode, sharedId);
         };
         return () => {
             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.
+    // The return_url bridge (/store/paypal/onboard-return), which runs inside the
+    // popup after PayPal redirects to it, posts its params back here. The bridge has
+    // already exchanged credentials server-side, so we just refresh status to flip
+    // to "connected" and close the popup. If for some reason credentials aren't yet
+    // saved but PayPal forwarded an authCode/sharedId, complete it from here too.
     (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);
+        const onMessage = (event) => {
+            const data = event?.data;
+            if (!data || data.source !== "paypal-onboarding-return")
                 return;
-            }
-            setPopupBlocked(false);
-            startStatusPoll();
+            const params = data.params || {};
+            const authCode = params.authCode || params.auth_code;
+            const sharedId = params.sharedId || params.shared_id;
+            const activeEnv = envRef.current;
+            void (async () => {
+                const connected = await refreshStatusAndMaybeConnect(activeEnv);
+                if (!connected && authCode && sharedId) {
+                    await completeOnboarding(authCode, sharedId);
+                }
+            })();
         };
-        document.addEventListener("click", onCaptureClick, true);
-        return () => document.removeEventListener("click", onCaptureClick, true);
-    }, [openOnboardingPopup, startStatusPoll]);
-    (0, react_1.useEffect)(() => {
-        return () => stopPoll();
-    }, [stopPoll]);
+        window.addEventListener("message", onMessage);
+        return () => window.removeEventListener("message", onMessage);
+    }, [completeOnboarding, refreshStatusAndMaybeConnect]);
+    // Always stop polling when the component unmounts.
+    (0, react_1.useEffect)(() => stopStatusPolling, [stopStatusPolling]);
     (0, react_1.useLayoutEffect)(() => {
         const el = ppBtnMeasureRef.current;
         if (!el)
@@ -589,10 +453,17 @@ 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.
+    // Only block the click while we are not ready; when ready, let the native click
+    // through so partner.js can open the mini-browser. Start polling status so we
+    // detect completion (and close the popup) even if no completion message reaches
+    // this page.
     const handleConnectClick = (e) => {
-        e.preventDefault();
+        if (connState !== "ready" || !finalUrl || onboardingInProgress) {
+            e.preventDefault();
+            return;
+        }
+        completedRef.current = false;
+        startStatusPolling();
     };
     const handleSaveManual = async () => {
         if (!canSaveManual || onboardingInProgress)
@@ -639,6 +510,7 @@ function PayPalConnectionPage() {
             return;
         if (!window.confirm("Disconnect PayPal for this environment?"))
             return;
+        stopStatusPolling();
         setOnboardingInProgress(true);
         setConnState("loading");
         setError(null);
@@ -659,7 +531,7 @@ function PayPalConnectionPage() {
             clearCachedUrl(env);
             completedRef.current = false;
             currentRunId.current = ++runIdRef.current;
-            await generateLinkAndReload(env, currentRunId.current);
+            await fetchFreshLink(env, currentRunId.current);
         }
         catch (e) {
             console.error(e);
@@ -674,9 +546,9 @@ function PayPalConnectionPage() {
         const next = e.target.value;
         if (next === env || onboardingInProgress)
             return;
+        stopStatusPolling();
         completedRef.current = false;
         clearCachedUrl();
-        setPopupBlocked(false);
         setConnState("loading");
         try {
             await fetch(ENVIRONMENT_ENDPOINT, {
@@ -689,16 +561,16 @@ function PayPalConnectionPage() {
         catch { }
         setEnv(next);
     };
-    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
+    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.jsxs)("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.jsx)("a", { "data-paypal-button": "true", "data-paypal-onboard-complete": "onboardingCallback", href: "#", style: { display: "none" }, children: "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", 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: {
+                                                        }, id: "paypal-button", "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: {
+                                                        }, children: "Connect to PayPal" }), (0, jsx_runtime_1.jsx)("div", { className: "mt-2", style: {
                                                             width: ppBtnWidth ? `${ppBtnWidth}px` : "auto",
                                                             marginTop: "20px",
                                                             marginBottom: "10px",