@easypayment/medusa-payment-paypal 0.9.18 → 0.9.19

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

@@ -17,40 +17,137 @@ const PARTNER_JS_URLS = {
     live: "https://www.paypal.com/webapps/merchantboarding/js/lib/lightbox/partner.js",
 };
 const SERVICE_URL = "/admin/paypal/onboarding-link";
-const CACHE_KEY = "pp_onboard_cache";
+// The mini-browser popup is opened by us (see openOnboardingPopup). We give it a
+// stable window name so that, even if PayPal's partner.js *also* intercepts the
+// click, window.open() with the same name re-targets the one window instead of
+// spawning a second one.
+const POPUP_NAME = "PPMiniBrowser";
+const CACHE_PREFIX = "pp_onboard_cache";
 const CACHE_EXPIRY = 10 * 60 * 1000;
 const ONBOARDING_COMPLETE_ENDPOINT = "/admin/paypal/onboard-complete";
 const STATUS_ENDPOINT = "/admin/paypal/status";
 const SAVE_CREDENTIALS_ENDPOINT = "/admin/paypal/save-credentials";
 const DISCONNECT_ENDPOINT = "/admin/paypal/disconnect";
-let cachedUrl = null;
-if (typeof window !== "undefined") {
+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")
+        return null;
     try {
-        const cached = localStorage.getItem(CACHE_KEY);
-        if (cached) {
-            const data = JSON.parse(cached);
-            if (new Date().getTime() - data.ts < CACHE_EXPIRY) {
-                cachedUrl = data.url;
+        const raw = localStorage.getItem(cacheKeyFor(env));
+        if (!raw)
+            return null;
+        const data = JSON.parse(raw);
+        if (data &&
+            typeof data.url === "string" &&
+            Date.now() - (Number(data.ts) || 0) < CACHE_EXPIRY) {
+            return data.url;
+        }
+    }
+    catch {
+        /* ignore malformed cache */
+    }
+    return null;
+}
+function writeCachedUrl(env, url) {
+    try {
+        localStorage.setItem(cacheKeyFor(env), JSON.stringify({ url, ts: Date.now() }));
+    }
+    catch {
+        /* ignore quota / disabled storage */
+    }
+}
+function clearCachedUrl(env) {
+    try {
+        if (env) {
+            localStorage.removeItem(cacheKeyFor(env));
+        }
+        else {
+            localStorage.removeItem(cacheKeyFor("sandbox"));
+            localStorage.removeItem(cacheKeyFor("live"));
+        }
+    }
+    catch {
+        /* 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();
+        return (host === "www.paypal.com" ||
+            host === "www.sandbox.paypal.com" ||
+            host.endsWith(".paypal.com") ||
+            host.endsWith(".paypalobjects.com"));
+    }
+    catch {
+        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.
+function extractAuth(data) {
+    if (!data)
+        return {};
+    if (typeof data === "object") {
+        const obj = data;
+        const authCode = obj.authCode ?? obj.auth_code ?? obj.authcode;
+        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"]) {
+            if (obj[key] && typeof obj[key] === "object") {
+                const inner = extractAuth(obj[key]);
+                if (inner.authCode && inner.sharedId)
+                    return inner;
             }
         }
+        return {};
     }
-    catch (e) {
-        console.error("Cache read error:", e);
+    if (typeof data === "string") {
+        const s = data.trim();
+        if (!s)
+            return {};
+        if (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");
-    (0, react_1.useEffect)(() => {
-        fetch("/admin/paypal/environment", { method: "GET", credentials: "include" })
-            .then((r) => r.json())
-            .then((d) => {
-            const v = d?.environment === "sandbox" ? "sandbox" : "live";
-            setEnv(v);
-        })
-            .catch(() => { });
-    }, []);
+    // 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);
+    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)("");
@@ -62,6 +159,21 @@ 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 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 completedRef = (0, react_1.useRef)(false);
     const ppBtnMeasureRef = (0, react_1.useRef)(null);
     const [ppBtnWidth, setPpBtnWidth] = (0, react_1.useState)(null);
     const canSaveManual = (0, react_1.useMemo)(() => {
@@ -71,7 +183,148 @@ function PayPalConnectionPage() {
         setConnState("error");
         setError(msg);
     }, []);
-    const fetchFreshLink = (0, react_1.useCallback)((runId) => {
+    const stopPopupPoll = (0, react_1.useCallback)(() => {
+        if (popupPollRef.current) {
+            clearInterval(popupPollRef.current);
+            popupPollRef.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.
+    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 */
+            }
+            stopPopupPoll();
+            popupPollRef.current = setInterval(() => {
+                if (!popupRef.current || popupRef.current.closed) {
+                    stopPopupPoll();
+                }
+            }, 1000);
+        }
+        return popup;
+    }, [stopPopupPoll]);
+    // Single entry point for "Connect to PayPal". Hard-guards on a real, ready
+    // URL so a half-loaded button can never open anything.
+    const openConnect = (0, react_1.useCallback)(() => {
+        if (connStateRef.current !== "ready" ||
+            !finalUrlRef.current ||
+            inProgressRef.current) {
+            return;
+        }
+        completedRef.current = false;
+        const popup = openOnboardingPopup(finalUrlRef.current);
+        if (!popup) {
+            setPopupBlocked(true);
+            return;
+        }
+        setPopupBlocked(false);
+    }, [openOnboardingPopup]);
+    // 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.
+    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 {
+            /* ignore */
+        }
+        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})`);
+            }
+            // Close the popup we opened, plus any partner.js-managed flow.
+            try {
+                popupRef.current?.close();
+            }
+            catch {
+                /* ignore */
+            }
+            stopPopupPoll();
+            try {
+                const close1 = window.PAYPAL?.apps?.Signup?.MiniBrowser?.closeFlow;
+                if (typeof close1 === "function")
+                    close1();
+            }
+            catch {
+                /* ignore */
+            }
+            try {
+                const close2 = window.PAYPAL?.apps?.Signup?.miniBrowser &&
+                    window.PAYPAL.apps.Signup.miniBrowser.closeFlow;
+                if (typeof close2 === "function")
+                    close2();
+            }
+            catch {
+                /* ignore */
+            }
+            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 {
+                /* ignore — still consider it connected below */
+            }
+            setConnState("connected");
+            setShowManual(false);
+        }
+        catch (e) {
+            // Allow a retry after a failed exchange.
+            completedRef.current = false;
+            console.error(e);
+            setConnState("error");
+            setError(e?.message || "Exchange failed while saving credentials.");
+        }
+        finally {
+            setOnboardingInProgress(false);
+        }
+    }, [stopPopupPoll]);
+    const fetchFreshLink = (0, react_1.useCallback)((runId, targetEnv) => {
         if (initLoaderRef.current) {
             const loaderText = initLoaderRef.current.querySelector("#loader-text");
             if (loaderText)
@@ -83,6 +336,9 @@ function PayPalConnectionPage() {
             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) => {
@@ -99,7 +355,7 @@ function PayPalConnectionPage() {
                 return;
             }
             const url = href + (href.includes("?") ? "&" : "?") + "displayMode=minibrowser";
-            localStorage.setItem(CACHE_KEY, JSON.stringify({ url, ts: Date.now() }));
+            writeCachedUrl(targetEnv, url);
             setFinalUrl(url);
             setConnState("ready");
         })
@@ -108,22 +364,40 @@ function PayPalConnectionPage() {
                 return;
             showError("Unable to connect to service.");
         });
-    }, [env, showError]);
+    }, [showError]);
+    // Resolve the server's current environment before doing anything else.
+    (0, react_1.useEffect)(() => {
+        let alive = true;
+        fetch(ENVIRONMENT_ENDPOINT, { method: "GET", credentials: "include" })
+            .then((r) => r.json())
+            .then((d) => {
+            if (!alive)
+                return;
+            setEnv(d?.environment === "sandbox" ? "sandbox" : "live");
+        })
+            .catch(() => { })
+            .finally(() => {
+            if (alive)
+                setEnvReady(true);
+        });
+        return () => {
+            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.
     (0, react_1.useEffect)(() => {
         if (connState !== "ready" || !finalUrl)
             return;
         const scriptUrl = PARTNER_JS_URLS[env];
         let cancelled = false;
         let pollTimer;
-        // PayPal's partner.js wires the mini-browser handler to its own
-        // DOMContentLoaded listener. Inside the Medusa admin (a React SPA) that
-        // event fired long before this route mounted, so partner.js never scans the
-        // button and the click falls through to the plain target="_blank" anchor —
-        // which opens PayPal onboarding in a NEW TAB instead of the popup.
-        //
-        // To fix this we load partner.js only after the anchor exists with its real
-        // href, then explicitly run PayPal's initializer so it discovers the button
-        // and intercepts the click into the mini-browser popup.
         const initPartner = (attempt = 0) => {
             if (cancelled)
                 return;
@@ -151,22 +425,17 @@ function PayPalConnectionPage() {
                 }
                 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;
             }
-            // Last resort: partner.js exposed no initializer we recognise. Re-fire
-            // DOMContentLoaded so any listener it registered runs against the
-            // now-present button.
             try {
                 document.dispatchEvent(new Event("DOMContentLoaded"));
             }
             catch { }
         };
-        // Remove any stale copy + namespace so the fresh load re-scans the current
-        // button (href/environment may have changed since the last render).
+        // 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);
@@ -193,13 +462,35 @@ function PayPalConnectionPage() {
             }
         };
     }, [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.
     (0, react_1.useEffect)(() => {
+        const onMessage = (ev) => {
+            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]);
+    // 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}`, {
@@ -220,89 +511,57 @@ function PayPalConnectionPage() {
             catch (e) {
                 console.error(e);
             }
-            if (cachedUrl) {
-                setFinalUrl(cachedUrl);
+            if (cancelled || runId !== currentRunId.current)
+                return;
+            const cached = readCachedUrl(env);
+            if (cached) {
+                setFinalUrl(cached);
                 setConnState("ready");
             }
             else {
-                fetchFreshLink(runId);
+                fetchFreshLink(runId, env);
             }
         };
         run();
         return () => {
             cancelled = true;
-            currentRunId.current = 0;
         };
-    }, [env, fetchFreshLink]);
+    }, [env, envReady, fetchFreshLink]);
+    // Bridge partner.js's callback into our single idempotent completion handler.
     (0, react_1.useLayoutEffect)(() => {
-        window.onboardingCallback = async function (authCode, sharedId) {
-            try {
-                window.onbeforeunload = null;
-            }
-            catch { }
-            setOnboardingInProgress(true);
-            setConnState("loading");
-            setError(null);
-            const payload = {
-                authCode,
-                sharedId,
-                env: env === "sandbox" ? "sandbox" : "live",
-            };
-            try {
-                const res = await fetch(ONBOARDING_COMPLETE_ENDPOINT, {
-                    method: "POST",
-                    headers: { "content-type": "application/json" },
-                    credentials: "include",
-                    body: JSON.stringify(payload),
-                });
-                if (!res.ok) {
-                    const txt = await res.text().catch(() => "");
-                    throw new Error(txt || `Onboarding exchange failed (${res.status})`);
-                }
-                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 { }
-                try {
-                    localStorage.removeItem(CACHE_KEY);
-                }
-                catch { }
-                try {
-                    const statusRes = await fetch(`${STATUS_ENDPOINT}?environment=${env}`, {
-                        method: "GET",
-                        credentials: "include",
-                    });
-                    const refreshedStatus = await statusRes.json().catch(() => ({}));
-                    setStatusInfo(refreshedStatus || null);
-                    setConnState("connected");
-                    setShowManual(false);
-                }
-                catch {
-                    setConnState("connected");
-                    setShowManual(false);
-                }
-                setOnboardingInProgress(false);
-            }
-            catch (e) {
-                console.error(e);
-                setConnState("error");
-                setError(e?.message || "Exchange failed while saving credentials.");
-                setOnboardingInProgress(false);
-            }
+        window.onboardingCallback = (authCode, sharedId) => {
+            completeOnboarding(authCode, sharedId);
         };
         return () => {
             window.onboardingCallback = undefined;
         };
-    }, [env]);
+    }, [completeOnboarding]);
+    // Clean up the popup poll on unmount.
+    (0, react_1.useEffect)(() => {
+        return () => {
+            stopPopupPoll();
+        };
+    }, [stopPopupPoll]);
+    // Capture-phase click interceptor: guarantees WE own the popup. Running in the
+    // capture phase on the document means we execute before partner.js's own click
+    // handler, so we can suppress it (no duplicate window) and open the popup
+    // ourselves within the same user gesture. This is what makes the first click
+    // after a cold load reliably open a popup instead of 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();
+            openConnect();
+        };
+        document.addEventListener("click", onCaptureClick, true);
+        return () => document.removeEventListener("click", onCaptureClick, true);
+    }, [openConnect]);
     (0, react_1.useLayoutEffect)(() => {
         const el = ppBtnMeasureRef.current;
         if (!el)
@@ -328,10 +587,12 @@ function PayPalConnectionPage() {
                 window.removeEventListener("resize", update);
         };
     }, [connState, env, finalUrl]);
+    // Defensive fallback: the capture listener above normally handles the click
+    // and stops propagation before React sees it. If for any reason it didn't, we
+    // still prevent the native target from opening a tab and open the popup here.
     const handleConnectClick = (e) => {
-        if (connState !== "ready" || !finalUrl || onboardingInProgress) {
-            e.preventDefault();
-        }
+        e.preventDefault();
+        openConnect();
     };
     const handleSaveManual = async () => {
         if (!canSaveManual || onboardingInProgress)
@@ -362,10 +623,7 @@ function PayPalConnectionPage() {
             setConnState("connected");
             setStatusInfo(refreshedStatus || null);
             setShowManual(false);
-            try {
-                localStorage.removeItem(CACHE_KEY);
-            }
-            catch { }
+            clearCachedUrl(env);
         }
         catch (e) {
             console.error(e);
@@ -398,13 +656,11 @@ function PayPalConnectionPage() {
                 const t = await res.text().catch(() => "");
                 throw new Error(t || `Disconnect failed (${res.status})`);
             }
-            try {
-                localStorage.removeItem(CACHE_KEY);
-            }
-            catch { }
+            clearCachedUrl(env);
+            completedRef.current = false;
             currentRunId.current = ++runIdRef.current;
             const runId = currentRunId.current;
-            fetchFreshLink(runId);
+            fetchFreshLink(runId, env);
         }
         catch (e) {
             console.error(e);
@@ -417,10 +673,17 @@ function PayPalConnectionPage() {
     };
     const handleEnvChange = async (e) => {
         const next = e.target.value;
+        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);
-        cachedUrl = null;
         try {
-            await fetch("/admin/paypal/environment", {
+            await fetch(ENVIRONMENT_ENDPOINT, {
                 method: "POST",
                 headers: { "content-type": "application/json" },
                 credentials: "include",
@@ -428,21 +691,17 @@ function PayPalConnectionPage() {
             });
         }
         catch { }
-        try {
-            localStorage.removeItem(CACHE_KEY);
-        }
-        catch { }
     };
     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: "_blank", "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", 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" }), (0, jsx_runtime_1.jsx)("div", { className: "mt-2", style: {
+                                                        }, 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",