@easypayment/medusa-payment-paypal 0.9.21 → 0.9.24

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

@@ -17,26 +17,17 @@ const PARTNER_JS_URLS = {
     live: "https://www.paypal.com/webapps/merchantboarding/js/lib/lightbox/partner.js",
 };
 const SERVICE_URL = "/admin/paypal/onboarding-link";
-// We open the mini-browser popup ourselves, synchronously inside the click
-// gesture (see openOnboardingPopup) — the only reliable way to get a popup
-// rather than a blocked window or a new tab. The window name matches the
-// anchor's `target` and PayPal's conventional "PPFrame": partner.js opens the
-// flow with `window.open(url, target, ...)`, so when it runs right after us it
-// *reuses this already-open window* (a named-window navigation needs no user
-// activation) instead of trying — and failing, asynchronously — to spawn its
-// own. That lets partner.js still wire its completion bridge without ever
-// opening a second/late window.
+// 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 = 10 * 60 * 1000;
+const CACHE_EXPIRY = 6 * 60 * 60 * 1000; // 6 hours
 const ONBOARDING_COMPLETE_ENDPOINT = "/admin/paypal/onboard-complete";
 const STATUS_ENDPOINT = "/admin/paypal/status";
 const SAVE_CREDENTIALS_ENDPOINT = "/admin/paypal/save-credentials";
 const DISCONNECT_ENDPOINT = "/admin/paypal/disconnect";
 const ENVIRONMENT_ENDPOINT = "/admin/paypal/environment";
-// Onboarding URLs are environment-specific and short-lived, so the cache must be
-// keyed per environment — a single shared key let a stale sandbox URL leak into
-// the live flow (and vice-versa) after a reload.
 const cacheKeyFor = (env) => `${CACHE_PREFIX}_${env}`;
 function readCachedUrl(env) {
     if (typeof window === "undefined")
@@ -60,9 +51,10 @@ function readCachedUrl(env) {
 function writeCachedUrl(env, url) {
     try {
         localStorage.setItem(cacheKeyFor(env), JSON.stringify({ url, ts: Date.now() }));
+        return readCachedUrl(env) === url;
     }
     catch {
-        /* ignore quota / disabled storage */
+        return false;
     }
 }
 function clearCachedUrl(env) {
@@ -79,9 +71,6 @@ function clearCachedUrl(env) {
         /* ignore */
     }
 }
-// PayPal delivers the seamless-onboarding result by posting a message to
-// window.opener. We validate the sender is actually a PayPal origin before
-// trusting authCode/sharedId.
 function isPayPalOrigin(origin) {
     try {
         const host = new URL(origin).hostname.toLowerCase();
@@ -94,26 +83,31 @@ function isPayPalOrigin(origin) {
         return false;
     }
 }
-// The completion message shape is not strongly documented, so extract
-// authCode/sharedId defensively from objects, JSON strings, or query strings.
-// We only ever act when BOTH values are present, which keeps the many unrelated
-// intermediate postMessages PayPal emits from triggering a false completion.
+// 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;
+        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"]) {
+        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 {};
     }
@@ -121,7 +115,7 @@ function extractAuth(data) {
         const s = data.trim();
         if (!s)
             return {};
-        if (s.startsWith("{")) {
+        if (s.startsWith("{") || s.startsWith("[")) {
             try {
                 return extractAuth(JSON.parse(s));
             }
@@ -146,9 +140,6 @@ function extractAuth(data) {
 }
 function PayPalConnectionPage() {
     const [env, setEnv] = (0, react_1.useState)("live");
-    // We must not generate/fetch an onboarding link until we know which
-    // environment the server is actually on, otherwise the first fetch races the
-    // GET /environment response and can target the wrong environment.
     const [envReady, setEnvReady] = (0, react_1.useState)(false);
     const [connState, setConnState] = (0, react_1.useState)("loading");
     const [error, setError] = (0, react_1.useState)(null);
@@ -164,20 +155,16 @@ function PayPalConnectionPage() {
     const errorLogRef = (0, react_1.useRef)(null);
     const runIdRef = (0, react_1.useRef)(0);
     const currentRunId = (0, react_1.useRef)(0);
-    // Live mirrors of state so the document-level capture click listener (set up
-    // once) and the stable completion callback always see current values.
+    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 envRef = (0, react_1.useRef)(env);
-    envRef.current = env;
     const popupRef = (0, react_1.useRef)(null);
-    const popupPollRef = (0, react_1.useRef)(null);
-    // Guards against the two redundant completion paths (our own message listener
-    // and partner.js's onboardingCallback bridge) both POSTing the same result.
+    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);
@@ -188,18 +175,16 @@ function PayPalConnectionPage() {
         setConnState("error");
         setError(msg);
     }, []);
-    const stopPopupPoll = (0, react_1.useCallback)(() => {
-        if (popupPollRef.current) {
-            clearInterval(popupPollRef.current);
-            popupPollRef.current = null;
+    const stopPoll = (0, react_1.useCallback)(() => {
+        if (pollRef.current) {
+            clearInterval(pollRef.current);
+            pollRef.current = null;
         }
     }, []);
-    // Open the PayPal mini-browser ourselves, synchronously, inside the click
-    // gesture. This is the crux of the fix: browsers only render window.open() as
-    // a real popup (instead of a tab — or blocking it) when it runs synchronously
-    // in a user gesture. Because finalUrl is already in state at click time, we
-    // never need an await before opening, and we never depend on winning a race
-    // with partner.js's asynchronous click binding.
+    // 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;
@@ -225,30 +210,23 @@ function PayPalConnectionPage() {
             catch {
                 /* ignore */
             }
-            stopPopupPoll();
-            popupPollRef.current = setInterval(() => {
-                if (!popupRef.current || popupRef.current.closed) {
-                    stopPopupPoll();
-                }
-            }, 1000);
         }
         return popup;
-    }, [stopPopupPoll]);
-    // Exchange the seller authCode/sharedId for credentials. Reached from BOTH
-    // PayPal's partner.js bridge (window.onboardingCallback) and our own postMessage
-    // listener; completedRef makes it idempotent so we only POST once.
+    }, []);
+    // 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 {
-            /* ignore */
-        }
+        catch { }
         const activeEnv = envRef.current === "sandbox" ? "sandbox" : "live";
         setOnboardingInProgress(true);
         setConnState("loading");
@@ -265,45 +243,37 @@ function PayPalConnectionPage() {
                 const txt = await res.text().catch(() => "");
                 throw new Error(txt || `Onboarding exchange failed (${res.status})`);
             }
-            // Close the popup we opened, plus any partner.js-managed flow.
             try {
                 popupRef.current?.close();
             }
-            catch {
-                /* ignore */
-            }
-            stopPopupPoll();
+            catch { }
             try {
                 const close1 = window.PAYPAL?.apps?.Signup?.MiniBrowser?.closeFlow;
                 if (typeof close1 === "function")
                     close1();
             }
-            catch {
-                /* ignore */
-            }
+            catch { }
             try {
                 const close2 = window.PAYPAL?.apps?.Signup?.miniBrowser &&
                     window.PAYPAL.apps.Signup.miniBrowser.closeFlow;
                 if (typeof close2 === "function")
                     close2();
             }
-            catch {
-                /* ignore */
-            }
+            catch { }
             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 {
-                /* ignore — still consider it connected below */
-            }
+            catch { }
             setConnState("connected");
             setShowManual(false);
         }
         catch (e) {
-            // Allow a retry after a failed exchange.
             completedRef.current = false;
             console.error(e);
             setConnState("error");
@@ -312,30 +282,60 @@ function PayPalConnectionPage() {
         finally {
             setOnboardingInProgress(false);
         }
-    }, [stopPopupPoll]);
-    const fetchFreshLink = (0, react_1.useCallback)((runId, targetEnv) => {
+    }, [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)
                 loaderText.textContent = "Generating onboarding session...";
         }
-        fetch(SERVICE_URL, {
-            method: "POST",
-            headers: { "content-type": "application/json" },
-            credentials: "include",
-            body: JSON.stringify({
-                products: ["PPCP"],
-                // Generate the link for the explicitly selected environment so it can
-                // never depend on a racing POST /environment having landed yet.
-                environment: targetEnv,
-            }),
-        })
-            .then((r) => {
-            if (!r.ok)
-                throw new Error(`Service returned ${r.status}`);
-            return r.json();
-        })
-            .then((data) => {
+        try {
+            const res = await fetch(SERVICE_URL, {
+                method: "POST",
+                headers: { "content-type": "application/json" },
+                credentials: "include",
+                body: JSON.stringify({ products: ["PPCP"], environment: targetEnv }),
+            });
+            if (!res.ok)
+                throw new Error(`Service returned ${res.status}`);
+            const data = await res.json();
             if (runId !== currentRunId.current)
                 return;
             const href = data?.onboarding_url;
@@ -344,17 +344,21 @@ function PayPalConnectionPage() {
                 return;
             }
             const url = href + (href.includes("?") ? "&" : "?") + "displayMode=minibrowser";
-            writeCachedUrl(targetEnv, url);
+            const persisted = writeCachedUrl(targetEnv, url);
+            if (persisted) {
+                window.location.reload();
+                return;
+            }
             setFinalUrl(url);
             setConnState("ready");
-        })
-            .catch(() => {
+        }
+        catch {
             if (runId !== currentRunId.current)
                 return;
             showError("Unable to connect to service.");
-        });
+        }
     }, [showError]);
-    // Resolve the server's current environment before doing anything else.
+    // Resolve the server environment first.
     (0, react_1.useEffect)(() => {
         let alive = true;
         fetch(ENVIRONMENT_ENDPOINT, { method: "GET", credentials: "include" })
@@ -373,14 +377,56 @@ function PayPalConnectionPage() {
             alive = false;
         };
     }, []);
-    // partner.js is loaded ONLY for its postMessage->callback bridge
-    // (window.onboardingCallback), as a redundant path next to our own message
-    // listener below. It is NO LONGER responsible for opening the window — we do
-    // that synchronously in the click handler. We still init it so its message
-    // bridge registers inside this React SPA (its own DOMContentLoaded hook fired
-    // long before this route mounted). If partner.js also intercepts the click,
-    // the shared POPUP_NAME means it re-targets our single popup rather than
-    // opening a second window.
+    // Page-load flow: connected? -> cached link? -> else generate + cache + reload.
+    (0, react_1.useEffect)(() => {
+        if (!envReady)
+            return;
+        currentRunId.current = ++runIdRef.current;
+        const runId = currentRunId.current;
+        let cancelled = false;
+        completedRef.current = false;
+        const run = async () => {
+            setConnState("loading");
+            setError(null);
+            setPopupBlocked(false);
+            setFinalUrl("");
+            try {
+                const r = await fetch(`${STATUS_ENDPOINT}?environment=${env}`, {
+                    method: "GET",
+                    credentials: "include",
+                });
+                const st = await r.json().catch(() => ({}));
+                if (cancelled || runId !== currentRunId.current)
+                    return;
+                setStatusInfo(st);
+                const isConnected = st?.status === "connected" && st?.seller_client_id_present === true;
+                if (isConnected) {
+                    setConnState("connected");
+                    setShowManual(false);
+                    return;
+                }
+            }
+            catch (e) {
+                console.error(e);
+            }
+            if (cancelled || runId !== currentRunId.current)
+                return;
+            const cached = readCachedUrl(env);
+            if (cached) {
+                setFinalUrl(cached);
+                setConnState("ready");
+                return;
+            }
+            await generateLinkAndReload(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;
@@ -398,9 +444,6 @@ function PayPalConnectionPage() {
                     : null;
             if (target?.init) {
                 try {
-                    // Wires partner.js's click interceptor + its postMessage->callback
-                    // bridge. It will adopt the window we pre-open (same name) rather than
-                    // open its own.
                     target.init();
                 }
                 catch (e) {
@@ -426,8 +469,6 @@ function PayPalConnectionPage() {
             }
             catch { }
         };
-        // 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);
@@ -446,19 +487,31 @@ function PayPalConnectionPage() {
         document.body.appendChild(ppScript);
         return () => {
             cancelled = true;
-            if (pollTimer) {
+            if (pollTimer)
                 clearTimeout(pollTimer);
-            }
-            if (ppScript.parentNode) {
+            if (ppScript.parentNode)
                 ppScript.parentNode.removeChild(ppScript);
-            }
         };
     }, [connState, finalUrl, env]);
-    // Primary completion path: receive PayPal's seamless-onboarding postMessage
-    // ourselves. Independent of partner.js, so it works even when we opened the
-    // popup directly.
+    // 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);
@@ -469,57 +522,7 @@ function PayPalConnectionPage() {
         window.addEventListener("message", onMessage);
         return () => window.removeEventListener("message", onMessage);
     }, [completeOnboarding]);
-    // Status check + link generation. Gated on envReady so we always use the
-    // correct environment. runId guards against a stale response from a previous
-    // environment overwriting the current one.
-    (0, react_1.useEffect)(() => {
-        if (!envReady)
-            return;
-        currentRunId.current = ++runIdRef.current;
-        const runId = currentRunId.current;
-        let cancelled = false;
-        completedRef.current = false;
-        const run = async () => {
-            setConnState("loading");
-            setError(null);
-            setPopupBlocked(false);
-            setFinalUrl("");
-            try {
-                const r = await fetch(`${STATUS_ENDPOINT}?environment=${env}`, {
-                    method: "GET",
-                    credentials: "include",
-                });
-                const st = await r.json().catch(() => ({}));
-                if (cancelled || runId !== currentRunId.current)
-                    return;
-                setStatusInfo(st);
-                const isConnected = st?.status === "connected" && st?.seller_client_id_present === true;
-                if (isConnected) {
-                    setConnState("connected");
-                    setShowManual(false);
-                    return;
-                }
-            }
-            catch (e) {
-                console.error(e);
-            }
-            if (cancelled || runId !== currentRunId.current)
-                return;
-            const cached = readCachedUrl(env);
-            if (cached) {
-                setFinalUrl(cached);
-                setConnState("ready");
-            }
-            else {
-                fetchFreshLink(runId, env);
-            }
-        };
-        run();
-        return () => {
-            cancelled = true;
-        };
-    }, [env, envReady, fetchFreshLink]);
-    // Bridge partner.js's callback into our single idempotent completion handler.
+    // SECONDARY completion path: partner.js's bridge calls this by name.
     (0, react_1.useLayoutEffect)(() => {
         window.onboardingCallback = (authCode, sharedId) => {
             completeOnboarding(authCode, sharedId);
@@ -528,12 +531,39 @@ function PayPalConnectionPage() {
             window.onboardingCallback = undefined;
         };
     }, [completeOnboarding]);
-    // Clean up the popup poll on unmount.
+    // 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)(() => {
-        return () => {
-            stopPopupPoll();
+        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();
         };
-    }, [stopPopupPoll]);
+        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)
@@ -559,48 +589,8 @@ function PayPalConnectionPage() {
                 window.removeEventListener("resize", update);
         };
     }, [connState, env, finalUrl]);
-    // Capture-phase click handler — the single, reliable opener.
-    //
-    // It runs on `document` in the CAPTURE phase, i.e. BEFORE the event reaches
-    // the anchor where partner.js binds its own (target-phase) handler. That
-    // ordering is the whole point:
-    //   1. We synchronously open the mini-browser popup here, inside the user
-    //      gesture, so the browser always renders a real popup (never a blocked
-    //      window, never a new tab).
-    //   2. We do NOT stop propagation, so partner.js's handler still runs a beat
-    //      later. Since it opens with the same window name (POPUP_NAME), it adopts
-    //      the window we just opened instead of asynchronously spawning its own
-    //      (which the browser was blocking — "multiple popups ... lack of user
-    //      activation") — and it still wires its postMessage->onboardingCallback
-    //      bridge that auto-closes the popup and saves credentials.
-    //   3. We always preventDefault so the anchor's href can never open a tab.
-    //
-    // Completion is handled by partner.js's bridge AND by our own postMessage
-    // listener (see below), funnelling through one idempotent completeOnboarding.
-    (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();
-            if (connStateRef.current !== "ready" ||
-                !finalUrlRef.current ||
-                inProgressRef.current) {
-                return;
-            }
-            completedRef.current = false;
-            const popup = openOnboardingPopup(finalUrlRef.current);
-            setPopupBlocked(!popup);
-        };
-        document.addEventListener("click", onCaptureClick, true);
-        return () => document.removeEventListener("click", onCaptureClick, true);
-    }, [openOnboardingPopup]);
-    // Defensive only: the capture-phase listener above already opened the popup
-    // and prevented the default. If for some reason it didn't run, make sure the
-    // native target still can't open a tab.
+    // Defensive: the capture listener handles the click; this just guarantees the
+    // native href can never navigate.
     const handleConnectClick = (e) => {
         e.preventDefault();
     };
@@ -669,8 +659,7 @@ function PayPalConnectionPage() {
             clearCachedUrl(env);
             completedRef.current = false;
             currentRunId.current = ++runIdRef.current;
-            const runId = currentRunId.current;
-            fetchFreshLink(runId, env);
+            await generateLinkAndReload(env, currentRunId.current);
         }
         catch (e) {
             console.error(e);
@@ -683,15 +672,12 @@ function PayPalConnectionPage() {
     };
     const handleEnvChange = async (e) => {
         const next = e.target.value;
+        if (next === env || onboardingInProgress)
+            return;
         completedRef.current = false;
-        setPopupBlocked(false);
-        // Drop both cached URLs so neither environment can serve a stale link.
         clearCachedUrl();
-        // Update local state immediately (drives the status/link refetch with the
-        // explicit environment) and persist the choice. Because the link/status
-        // fetches are environment-explicit, correctness no longer depends on this
-        // POST winning a race.
-        setEnv(next);
+        setPopupBlocked(false);
+        setConnState("loading");
         try {
             await fetch(ENVIRONMENT_ENDPOINT, {
                 method: "POST",
@@ -701,6 +687,7 @@ 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
                                                             ? "Configuring connection to PayPal…"