@easypayment/medusa-payment-paypal 0.9.18 → 0.9.19

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

@@ -308,6 +308,12 @@ function AdvancedCardPaymentsTab() {
     )
   ] }) });
 }
+function PayPalApplePayPage() {
+  return /* @__PURE__ */ jsxRuntime.jsx(reactRouterDom.Navigate, { to: "/settings/paypal/connection", replace: true });
+}
+function PayPalGooglePayPage() {
+  return /* @__PURE__ */ jsxRuntime.jsx(reactRouterDom.Navigate, { to: "/settings/paypal/connection", replace: true });
+}
 const config = adminSdk.defineRouteConfig({
   label: "PayPal Connection"
 });
@@ -316,37 +322,97 @@ 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";
+const POPUP_NAME = "PPMiniBrowser";
+const CACHE_PREFIX = "pp_onboard_cache";
 const CACHE_EXPIRY = 10 * 60 * 1e3;
 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";
+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 ((/* @__PURE__ */ 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 {
+  }
+  return null;
+}
+function writeCachedUrl(env, url) {
+  try {
+    localStorage.setItem(cacheKeyFor(env), JSON.stringify({ url, ts: Date.now() }));
+  } catch {
+  }
+}
+function clearCachedUrl(env) {
+  try {
+    if (env) {
+      localStorage.removeItem(cacheKeyFor(env));
+    } else {
+      localStorage.removeItem(cacheKeyFor("sandbox"));
+      localStorage.removeItem(cacheKeyFor("live"));
+    }
+  } catch {
+  }
+}
+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;
+  }
+}
+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 {};
+  }
+  if (typeof data === "string") {
+    const s = data.trim();
+    if (!s) return {};
+    if (s.startsWith("{")) {
+      try {
+        return extractAuth(JSON.parse(s));
+      } catch {
+      }
+    }
+    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") || void 0;
+        const sharedId = sp.get("sharedId") || sp.get("shared_id") || void 0;
+        if (authCode && sharedId) return { authCode, sharedId };
+      } catch {
       }
     }
-  } catch (e) {
-    console.error("Cache read error:", e);
   }
+  return {};
 }
 function PayPalConnectionPage() {
   const [env, setEnv] = react.useState("live");
-  react.useEffect(() => {
-    fetch("/admin/paypal/environment", { method: "GET", credentials: "include" }).then((r) => r.json()).then((d) => {
-      const v = (d == null ? void 0 : d.environment) === "sandbox" ? "sandbox" : "live";
-      setEnv(v);
-    }).catch(() => {
-    });
-  }, []);
+  const [envReady, setEnvReady] = react.useState(false);
   const [connState, setConnState] = react.useState("loading");
   const [error, setError] = react.useState(null);
+  const [popupBlocked, setPopupBlocked] = react.useState(false);
   const [finalUrl, setFinalUrl] = react.useState("");
   const [showManual, setShowManual] = react.useState(false);
   const [clientId, setClientId] = react.useState("");
@@ -358,6 +424,17 @@ function PayPalConnectionPage() {
   const errorLogRef = react.useRef(null);
   const runIdRef = react.useRef(0);
   const currentRunId = react.useRef(0);
+  const finalUrlRef = react.useRef(finalUrl);
+  finalUrlRef.current = finalUrl;
+  const connStateRef = react.useRef(connState);
+  connStateRef.current = connState;
+  const inProgressRef = react.useRef(onboardingInProgress);
+  inProgressRef.current = onboardingInProgress;
+  const envRef = react.useRef(env);
+  envRef.current = env;
+  const popupRef = react.useRef(null);
+  const popupPollRef = react.useRef(null);
+  const completedRef = react.useRef(false);
   const ppBtnMeasureRef = react.useRef(null);
   const [ppBtnWidth, setPpBtnWidth] = react.useState(null);
   const canSaveManual = react.useMemo(() => {
@@ -367,8 +444,124 @@ function PayPalConnectionPage() {
     setConnState("error");
     setError(msg);
   }, []);
+  const stopPopupPoll = react.useCallback(() => {
+    if (popupPollRef.current) {
+      clearInterval(popupPollRef.current);
+      popupPollRef.current = null;
+    }
+  }, []);
+  const openOnboardingPopup = react.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 {
+        }
+        stopPopupPoll();
+        popupPollRef.current = setInterval(() => {
+          if (!popupRef.current || popupRef.current.closed) {
+            stopPopupPoll();
+          }
+        }, 1e3);
+      }
+      return popup;
+    },
+    [stopPopupPoll]
+  );
+  const openConnect = react.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]);
+  const completeOnboarding = react.useCallback(
+    async (authCode, sharedId) => {
+      var _a, _b, _c, _d, _e, _f, _g, _h;
+      if (!authCode || !sharedId) return;
+      if (completedRef.current) return;
+      completedRef.current = true;
+      try {
+        window.onbeforeunload = null;
+      } catch {
+      }
+      const activeEnv = envRef.current === "sandbox" ? "sandbox" : "live";
+      setOnboardingInProgress(true);
+      setConnState("loading");
+      setError(null);
+      setPopupBlocked(false);
+      try {
+        const res = await fetch(ONBOARDING_COMPLETE_ENDPOINT, {
+          method: "POST",
+          headers: { "content-type": "application/json" },
+          credentials: "include",
+          body: JSON.stringify({ authCode, sharedId, env: activeEnv })
+        });
+        if (!res.ok) {
+          const txt = await res.text().catch(() => "");
+          throw new Error(txt || `Onboarding exchange failed (${res.status})`);
+        }
+        try {
+          (_a = popupRef.current) == null ? void 0 : _a.close();
+        } catch {
+        }
+        stopPopupPoll();
+        try {
+          const close1 = (_e = (_d = (_c = (_b = window.PAYPAL) == null ? void 0 : _b.apps) == null ? void 0 : _c.Signup) == null ? void 0 : _d.MiniBrowser) == null ? void 0 : _e.closeFlow;
+          if (typeof close1 === "function") close1();
+        } catch {
+        }
+        try {
+          const close2 = ((_h = (_g = (_f = window.PAYPAL) == null ? void 0 : _f.apps) == null ? void 0 : _g.Signup) == null ? void 0 : _h.miniBrowser) && window.PAYPAL.apps.Signup.miniBrowser.closeFlow;
+          if (typeof close2 === "function") close2();
+        } catch {
+        }
+        clearCachedUrl(activeEnv);
+        try {
+          const statusRes = await fetch(
+            `${STATUS_ENDPOINT}?environment=${activeEnv}`,
+            { method: "GET", credentials: "include" }
+          );
+          const refreshedStatus = await statusRes.json().catch(() => ({}));
+          setStatusInfo(refreshedStatus || null);
+        } catch {
+        }
+        setConnState("connected");
+        setShowManual(false);
+      } catch (e) {
+        completedRef.current = false;
+        console.error(e);
+        setConnState("error");
+        setError((e == null ? void 0 : e.message) || "Exchange failed while saving credentials.");
+      } finally {
+        setOnboardingInProgress(false);
+      }
+    },
+    [stopPopupPoll]
+  );
   const fetchFreshLink = react.useCallback(
-    (runId) => {
+    (runId, targetEnv) => {
       if (initLoaderRef.current) {
         const loaderText = initLoaderRef.current.querySelector("#loader-text");
         if (loaderText)
@@ -379,7 +572,10 @@ function PayPalConnectionPage() {
         headers: { "content-type": "application/json" },
         credentials: "include",
         body: JSON.stringify({
-          products: ["PPCP"]
+          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}`);
@@ -392,10 +588,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");
       }).catch(() => {
@@ -403,8 +596,21 @@ function PayPalConnectionPage() {
         showError("Unable to connect to service.");
       });
     },
-    [env, showError]
+    [showError]
   );
+  react.useEffect(() => {
+    let alive = true;
+    fetch(ENVIRONMENT_ENDPOINT, { method: "GET", credentials: "include" }).then((r) => r.json()).then((d) => {
+      if (!alive) return;
+      setEnv((d == null ? void 0 : d.environment) === "sandbox" ? "sandbox" : "live");
+    }).catch(() => {
+    }).finally(() => {
+      if (alive) setEnvReady(true);
+    });
+    return () => {
+      alive = false;
+    };
+  }, []);
   react.useEffect(() => {
     var _a, _b, _c;
     if (connState !== "ready" || !finalUrl) return;
@@ -468,12 +674,26 @@ function PayPalConnectionPage() {
     };
   }, [connState, finalUrl, env]);
   react.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]);
+  react.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}`, {
@@ -492,84 +712,46 @@ 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]);
   react.useLayoutEffect(() => {
-    window.onboardingCallback = async function(authCode, sharedId) {
-      var _a, _b, _c, _d, _e, _f, _g;
-      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 = (_d = (_c = (_b = (_a = window.PAYPAL) == null ? void 0 : _a.apps) == null ? void 0 : _b.Signup) == null ? void 0 : _c.MiniBrowser) == null ? void 0 : _d.closeFlow;
-          if (typeof close1 === "function") close1();
-        } catch {
-        }
-        try {
-          const close2 = ((_g = (_f = (_e = window.PAYPAL) == null ? void 0 : _e.apps) == null ? void 0 : _f.Signup) == null ? void 0 : _g.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 == null ? void 0 : e.message) || "Exchange failed while saving credentials.");
-        setOnboardingInProgress(false);
-      }
+    window.onboardingCallback = (authCode, sharedId) => {
+      completeOnboarding(authCode, sharedId);
     };
     return () => {
       window.onboardingCallback = void 0;
     };
-  }, [env]);
+  }, [completeOnboarding]);
+  react.useEffect(() => {
+    return () => {
+      stopPopupPoll();
+    };
+  }, [stopPopupPoll]);
+  react.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]);
   react.useLayoutEffect(() => {
     const el = ppBtnMeasureRef.current;
     if (!el) return;
@@ -591,9 +773,8 @@ function PayPalConnectionPage() {
     };
   }, [connState, env, finalUrl]);
   const handleConnectClick = (e) => {
-    if (connState !== "ready" || !finalUrl || onboardingInProgress) {
-      e.preventDefault();
-    }
+    e.preventDefault();
+    openConnect();
   };
   const handleSaveManual = async () => {
     if (!canSaveManual || onboardingInProgress) return;
@@ -623,10 +804,7 @@ function PayPalConnectionPage() {
       setConnState("connected");
       setStatusInfo(refreshedStatus || null);
       setShowManual(false);
-      try {
-        localStorage.removeItem(CACHE_KEY);
-      } catch {
-      }
+      clearCachedUrl(env);
     } catch (e) {
       console.error(e);
       setConnState("error");
@@ -655,13 +833,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);
       setConnState("error");
@@ -672,10 +848,12 @@ function PayPalConnectionPage() {
   };
   const handleEnvChange = async (e) => {
     const next = e.target.value;
+    completedRef.current = false;
+    setPopupBlocked(false);
+    clearCachedUrl();
     setEnv(next);
-    cachedUrl = null;
     try {
-      await fetch("/admin/paypal/environment", {
+      await fetch(ENVIRONMENT_ENDPOINT, {
         method: "POST",
         headers: { "content-type": "application/json" },
         credentials: "include",
@@ -683,10 +861,6 @@ function PayPalConnectionPage() {
       });
     } catch {
     }
-    try {
-      localStorage.removeItem(CACHE_KEY);
-    } catch {
-    }
   };
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "p-6", children: [
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-6", children: [
@@ -750,7 +924,7 @@ function PayPalConnectionPage() {
                   ppBtnMeasureRef.current = node;
                 },
                 id: "paypal-button",
-                target: "_blank",
+                target: POPUP_NAME,
                 "data-paypal-button": "true",
                 href: finalUrl || "#",
                 "data-paypal-onboard-complete": "onboardingCallback",
@@ -764,6 +938,7 @@ function PayPalConnectionPage() {
                 children: "Connect to PayPal"
               }
             ),
+            popupBlocked && /* @__PURE__ */ jsxRuntime.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 “Connect to PayPal” again." }),
             /* @__PURE__ */ jsxRuntime.jsx(
               "div",
               {
@@ -919,12 +1094,6 @@ function PayPalConnectionPage() {
       ` })
   ] });
 }
-function PayPalApplePayPage() {
-  return /* @__PURE__ */ jsxRuntime.jsx(reactRouterDom.Navigate, { to: "/settings/paypal/connection", replace: true });
-}
-function PayPalGooglePayPage() {
-  return /* @__PURE__ */ jsxRuntime.jsx(reactRouterDom.Navigate, { to: "/settings/paypal/connection", replace: true });
-}
 function PayPalPayLaterMessagingPage() {
   return /* @__PURE__ */ jsxRuntime.jsx(reactRouterDom.Navigate, { to: "/settings/paypal/connection", replace: true });
 }
@@ -1150,10 +1319,6 @@ const routeModule = {
       Component: AdvancedCardPaymentsTab,
       path: "/settings/paypal/advanced-card-payments"
     },
-    {
-      Component: PayPalConnectionPage,
-      path: "/settings/paypal/connection"
-    },
     {
       Component: PayPalApplePayPage,
       path: "/settings/paypal/apple-pay"
@@ -1162,6 +1327,10 @@ const routeModule = {
       Component: PayPalGooglePayPage,
       path: "/settings/paypal/google-pay"
     },
+    {
+      Component: PayPalConnectionPage,
+      path: "/settings/paypal/connection"
+    },
     {
       Component: PayPalPayLaterMessagingPage,
       path: "/settings/paypal/pay-later-messaging"