@easypayment/medusa-payment-paypal 0.9.22 → 0.9.24

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

@@ -224,6 +224,9 @@ function AdditionalSettingsTab() {
     )
   ] }) });
 }
+function PayPalApplePayPage() {
+  return /* @__PURE__ */ jsxRuntime.jsx(reactRouterDom.Navigate, { to: "/settings/paypal/connection", replace: true });
+}
 const DEFAULT_FORM = {
   enabled: true,
   title: "Credit or Debit Card",
@@ -308,12 +311,6 @@ 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"
 });
@@ -363,12 +360,62 @@ function clearCachedUrl(env) {
   } 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 ?? 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 {
+      }
+    }
+    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 {
+      }
+    }
+  }
+  return {};
+}
 function PayPalConnectionPage() {
   const [env, setEnv] = react.useState("live");
   const [envReady, setEnvReady] = react.useState(false);
   const [connState, setConnState] = react.useState("loading");
-  const [partnerReady, setPartnerReady] = react.useState(false);
   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("");
@@ -376,11 +423,20 @@ function PayPalConnectionPage() {
   const [statusInfo, setStatusInfo] = react.useState(null);
   const [onboardingInProgress, setOnboardingInProgress] = react.useState(false);
   const initLoaderRef = react.useRef(null);
+  const paypalButtonRef = react.useRef(null);
   const errorLogRef = react.useRef(null);
   const runIdRef = react.useRef(0);
   const currentRunId = react.useRef(0);
   const envRef = react.useRef(env);
   envRef.current = env;
+  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 popupRef = react.useRef(null);
+  const pollRef = react.useRef(null);
   const completedRef = react.useRef(false);
   const ppBtnMeasureRef = react.useRef(null);
   const [ppBtnWidth, setPpBtnWidth] = react.useState(null);
@@ -391,13 +447,139 @@ function PayPalConnectionPage() {
     setConnState("error");
     setError(msg);
   }, []);
+  const stopPoll = react.useCallback(() => {
+    if (pollRef.current) {
+      clearInterval(pollRef.current);
+      pollRef.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 {
+      }
+    }
+    return popup;
+  }, []);
+  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;
+      stopPoll();
+      try {
+        window.onbeforeunload = null;
+      } catch {
+      }
+      const activeEnv = envRef.current === "sandbox" ? "sandbox" : "live";
+      setOnboardingInProgress(true);
+      setConnState("loading");
+      setError(null);
+      setPopupBlocked(false);
+      try {
+        const res = await fetch(ONBOARDING_COMPLETE_ENDPOINT, {
+          method: "POST",
+          headers: { "content-type": "application/json" },
+          credentials: "include",
+          body: JSON.stringify({ authCode, sharedId, env: activeEnv })
+        });
+        if (!res.ok) {
+          const txt = await res.text().catch(() => "");
+          throw new Error(txt || `Onboarding exchange failed (${res.status})`);
+        }
+        try {
+          (_a = popupRef.current) == null ? void 0 : _a.close();
+        } catch {
+        }
+        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);
+      }
+    },
+    [stopPoll]
+  );
+  const startStatusPoll = react.useCallback(() => {
+    stopPoll();
+    let ticks = 0;
+    pollRef.current = setInterval(async () => {
+      var _a;
+      ticks += 1;
+      if (completedRef.current || ticks > 150) {
+        stopPoll();
+        return;
+      }
+      try {
+        const r = await fetch(`${STATUS_ENDPOINT}?environment=${envRef.current}`, {
+          method: "GET",
+          credentials: "include"
+        });
+        const st = await r.json().catch(() => ({}));
+        if ((st == null ? void 0 : st.status) === "connected" && (st == null ? void 0 : st.seller_client_id_present) === true) {
+          completedRef.current = true;
+          stopPoll();
+          try {
+            (_a = popupRef.current) == null ? void 0 : _a.close();
+          } catch {
+          }
+          clearCachedUrl(envRef.current);
+          setStatusInfo(st);
+          setConnState("connected");
+          setShowManual(false);
+          setOnboardingInProgress(false);
+        }
+      } catch {
+      }
+    }, 2e3);
+  }, [stopPoll]);
   const generateLinkAndReload = react.useCallback(
     async (targetEnv, runId) => {
       if (initLoaderRef.current) {
         const loaderText = initLoaderRef.current.querySelector("#loader-text");
-        if (loaderText) {
-          loaderText.textContent = "Generating onboarding session...";
-        }
+        if (loaderText) loaderText.textContent = "Generating onboarding session...";
       }
       try {
         const res = await fetch(SERVICE_URL, {
@@ -451,6 +633,7 @@ function PayPalConnectionPage() {
     const run = async () => {
       setConnState("loading");
       setError(null);
+      setPopupBlocked(false);
       setFinalUrl("");
       try {
         const r = await fetch(`${STATUS_ENDPOINT}?environment=${env}`, {
@@ -489,13 +672,6 @@ function PayPalConnectionPage() {
     const scriptUrl = PARTNER_JS_URLS[env];
     let cancelled = false;
     let pollTimer;
-    setPartnerReady(false);
-    const readyFallback = setTimeout(() => {
-      if (!cancelled) setPartnerReady(true);
-    }, 6e3);
-    const markReady = () => {
-      if (!cancelled) setPartnerReady(true);
-    };
     const initPartner = (attempt = 0) => {
       var _a2, _b2;
       if (cancelled) return;
@@ -507,7 +683,6 @@ function PayPalConnectionPage() {
         } catch (e) {
           console.error("[paypal] partner.js init failed:", e);
         }
-        markReady();
         return;
       }
       if (typeof (signup == null ? void 0 : signup.render) === "function") {
@@ -516,7 +691,6 @@ function PayPalConnectionPage() {
         } catch (e) {
           console.error("[paypal] partner.js render failed:", e);
         }
-        markReady();
         return;
       }
       if (attempt < 40) {
@@ -527,7 +701,6 @@ function PayPalConnectionPage() {
         document.dispatchEvent(new Event("DOMContentLoaded"));
       } catch {
       }
-      markReady();
     };
     const existingScript = document.getElementById("paypal-partner-js");
     if (existingScript) {
@@ -544,74 +717,39 @@ function PayPalConnectionPage() {
     ppScript.src = scriptUrl;
     ppScript.async = true;
     ppScript.onload = () => initPartner();
-    ppScript.onerror = () => markReady();
     document.body.appendChild(ppScript);
     return () => {
       cancelled = true;
-      clearTimeout(readyFallback);
-      if (pollTimer) {
-        clearTimeout(pollTimer);
-      }
-      if (ppScript.parentNode) {
-        ppScript.parentNode.removeChild(ppScript);
-      }
+      if (pollTimer) clearTimeout(pollTimer);
+      if (ppScript.parentNode) ppScript.parentNode.removeChild(ppScript);
     };
   }, [connState, finalUrl, env]);
-  const completeOnboarding = react.useCallback(async (authCode, sharedId) => {
-    var _a, _b, _c, _d, _e, _f, _g;
-    if (!authCode || !sharedId) return;
-    if (completedRef.current) return;
-    completedRef.current = true;
-    try {
-      window.onbeforeunload = null;
-    } catch {
-    }
-    const activeEnv = envRef.current === "sandbox" ? "sandbox" : "live";
-    setOnboardingInProgress(true);
-    setConnState("loading");
-    setError(null);
-    try {
-      const res = await fetch(ONBOARDING_COMPLETE_ENDPOINT, {
-        method: "POST",
-        headers: { "content-type": "application/json" },
-        credentials: "include",
-        body: JSON.stringify({ authCode, sharedId, env: activeEnv })
-      });
-      if (!res.ok) {
-        const txt = await res.text().catch(() => "");
-        throw new Error(txt || `Onboarding exchange failed (${res.status})`);
-      }
+  react.useEffect(() => {
+    const onMessage = (ev) => {
+      let serialized = "";
       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();
+        serialized = typeof ev.data === "string" ? ev.data : JSON.stringify(ev.data);
       } catch {
+        serialized = String(ev.data);
       }
-      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 {
+      const looksRelevant = isPayPalOrigin(ev.origin) || /auth_?code|shared_?id|onboard|merchantId/i.test(serialized || "");
+      if (looksRelevant) {
+        console.info(
+          "[PayPal onboarding] message from",
+          ev.origin,
+          "·",
+          (serialized || "").slice(0, 500)
+        );
       }
-      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 {
+      if (!isPayPalOrigin(ev.origin)) return;
+      const { authCode, sharedId } = extractAuth(ev.data);
+      if (authCode && sharedId) {
+        completeOnboarding(authCode, sharedId);
       }
-      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);
-    }
-  }, []);
+    };
+    window.addEventListener("message", onMessage);
+    return () => window.removeEventListener("message", onMessage);
+  }, [completeOnboarding]);
   react.useLayoutEffect(() => {
     window.onboardingCallback = (authCode, sharedId) => {
       completeOnboarding(authCode, sharedId);
@@ -620,6 +758,32 @@ function PayPalConnectionPage() {
       window.onboardingCallback = void 0;
     };
   }, [completeOnboarding]);
+  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();
+      if (connStateRef.current !== "ready" || !finalUrlRef.current || inProgressRef.current) {
+        return;
+      }
+      completedRef.current = false;
+      const popup = openOnboardingPopup(finalUrlRef.current);
+      if (!popup) {
+        setPopupBlocked(true);
+        return;
+      }
+      setPopupBlocked(false);
+      startStatusPoll();
+    };
+    document.addEventListener("click", onCaptureClick, true);
+    return () => document.removeEventListener("click", onCaptureClick, true);
+  }, [openOnboardingPopup, startStatusPoll]);
+  react.useEffect(() => {
+    return () => stopPoll();
+  }, [stopPoll]);
   react.useLayoutEffect(() => {
     const el = ppBtnMeasureRef.current;
     if (!el) return;
@@ -640,6 +804,9 @@ function PayPalConnectionPage() {
       else window.removeEventListener("resize", update);
     };
   }, [connState, env, finalUrl]);
+  const handleConnectClick = (e) => {
+    e.preventDefault();
+  };
   const handleSaveManual = async () => {
     if (!canSaveManual || onboardingInProgress) return;
     setOnboardingInProgress(true);
@@ -714,6 +881,7 @@ function PayPalConnectionPage() {
     if (next === env || onboardingInProgress) return;
     completedRef.current = false;
     clearCachedUrl();
+    setPopupBlocked(false);
     setConnState("loading");
     try {
       await fetch(ENVIRONMENT_ENDPOINT, {
@@ -784,6 +952,7 @@ function PayPalConnectionPage() {
               "a",
               {
                 ref: (node) => {
+                  paypalButtonRef.current = node;
                   ppBtnMeasureRef.current = node;
                 },
                 id: "paypal-button",
@@ -791,19 +960,17 @@ function PayPalConnectionPage() {
                 "data-paypal-button": "true",
                 href: finalUrl || "#",
                 "data-paypal-onboard-complete": "onboardingCallback",
-                "aria-disabled": onboardingInProgress || !partnerReady,
+                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 || !partnerReady ? "not-allowed" : "pointer",
-                  opacity: onboardingInProgress || !partnerReady ? 0.6 : 1,
-                  // Keep the anchor mounted (partner.js must find it to bind)
-                  // but un-clickable until partner.js has taken over the
-                  // click — so it can never open a tab via the native href.
-                  pointerEvents: onboardingInProgress || !partnerReady ? "none" : "auto"
+                  cursor: onboardingInProgress ? "not-allowed" : "pointer",
+                  opacity: onboardingInProgress ? 0.6 : 1,
+                  pointerEvents: onboardingInProgress ? "none" : "auto"
                 },
-                children: partnerReady || onboardingInProgress ? "Connect to PayPal" : "Preparing PayPal…"
+                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",
               {
@@ -959,6 +1126,9 @@ function PayPalConnectionPage() {
       ` })
   ] });
 }
+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 });
 }
@@ -1180,22 +1350,22 @@ const routeModule = {
       Component: AdditionalSettingsTab,
       path: "/settings/paypal/additional-settings"
     },
-    {
-      Component: AdvancedCardPaymentsTab,
-      path: "/settings/paypal/advanced-card-payments"
-    },
     {
       Component: PayPalApplePayPage,
       path: "/settings/paypal/apple-pay"
     },
     {
-      Component: PayPalGooglePayPage,
-      path: "/settings/paypal/google-pay"
+      Component: AdvancedCardPaymentsTab,
+      path: "/settings/paypal/advanced-card-payments"
     },
     {
       Component: PayPalConnectionPage,
       path: "/settings/paypal/connection"
     },
+    {
+      Component: PayPalGooglePayPage,
+      path: "/settings/paypal/google-pay"
+    },
     {
       Component: PayPalPayLaterMessagingPage,
       path: "/settings/paypal/pay-later-messaging"