@easypayment/medusa-paypal-ui 1.0.51 → 1.0.53

package/src/hooks/usePayPalPaymentMethods.ts

@@ -19,9 +19,18 @@ type Result = {
   loading: boolean
 }
 
+const MAX_CACHE_ENTRIES = 50
 const _cache = new Map<string, { result: Result; at: number }>()
 const CACHE_TTL = 5 * 60 * 1000
 
+function cacheSet(key: string, value: { result: Result; at: number }) {
+  if (_cache.size >= MAX_CACHE_ENTRIES) {
+    const oldest = _cache.keys().next().value
+    if (oldest !== undefined) _cache.delete(oldest)
+  }
+  _cache.set(key, value)
+}
+
 function cacheKey(baseUrl: string, cartId?: string) {
   return `ppm::${baseUrl}::${cartId ?? ""}`
 }
@@ -90,13 +99,14 @@ export function usePayPalPaymentMethods({
           loading: false,
         }
 
-        _cache.set(k, { result: next, at: Date.now() })
+        cacheSet(k, { result: next, at: Date.now() })
         setResult(next)
-      } catch (e: any) {
-        if (e?.name === "AbortError") return
+      } catch (e: unknown) {
+        const msg = e instanceof Error ? e.message : ""
+        if (e instanceof Error && e.name === "AbortError") return
         if (!mounted || id !== fetchIdRef.current) return
 
-        if (e?.message?.includes("403") || e?.message?.includes("Forbidden")) {
+        if (msg.includes("403") || msg.includes("Forbidden")) {
           const disabled: Result = {
             ...DEFAULT_RESULT,
             paypalEnabled: false,

package/src/index.ts

@@ -8,3 +8,4 @@ export * from "./components/PayPalAdvancedCard"
 export * from "./adapters/MedusaNextPayPalAdapter"
 export * from "./components/PayPalPaymentSection"
 export * from "./hooks/usePayPalPaymentMethods"
+export { showProcessingOverlay, hideProcessingOverlay } from "./utils/processing-overlay"

package/src/order.ts

@@ -101,13 +101,26 @@ export async function fetchPayPalConfig(opts: {
     return {}
   }
   try {
-    const res = await fetch(`${baseUrl.replace(/\/$/, "")}/store/paypal/config`, {
-      headers: {
-        accept: "application/json",
-        ...(publishableApiKey ? { "x-publishable-api-key": publishableApiKey } : {}),
-      },
-      signal,
-    })
+    const timeoutMs = 30_000
+    let effectiveSignal = signal
+    let timeoutId: ReturnType<typeof setTimeout> | undefined
+    if (!signal) {
+      const controller = new AbortController()
+      timeoutId = setTimeout(() => controller.abort(), timeoutMs)
+      effectiveSignal = controller.signal
+    }
+    let res: Response
+    try {
+      res = await fetch(`${baseUrl.replace(/\/$/, "")}/store/paypal/config`, {
+        headers: {
+          accept: "application/json",
+          ...(publishableApiKey ? { "x-publishable-api-key": publishableApiKey } : {}),
+        },
+        signal: effectiveSignal,
+      })
+    } finally {
+      if (timeoutId !== undefined) clearTimeout(timeoutId)
+    }
     if (!res.ok) {
       return {}
     }

package/src/utils/next-errors.ts

@@ -0,0 +1,17 @@
+/**
+ * Detect Next.js router errors (redirect / notFound) that must be re-thrown.
+ *
+ * Next.js implements redirect() and notFound() by throwing special errors with
+ * a `digest` property starting with "NEXT_REDIRECT" or "NEXT_NOT_FOUND".
+ * Catching these in user-land try/catch blocks prevents the navigation from
+ * happening.  Because this package can't import from `next` (it's a peer dep),
+ * we detect them by duck-typing the digest.
+ */
+export function isNextRouterError(e: unknown): boolean {
+  if (typeof e !== "object" || e === null || !("digest" in e)) return false
+  const digest = (e as { digest: unknown }).digest
+  return (
+    typeof digest === "string" &&
+    (digest.startsWith("NEXT_REDIRECT") || digest.startsWith("NEXT_NOT_FOUND"))
+  )
+}

package/src/utils/processing-overlay.ts

@@ -0,0 +1,55 @@
+const OVERLAY_ID = "__pp_processing_overlay"
+
+export function showProcessingOverlay() {
+  if (typeof document === "undefined") return
+  if (document.getElementById(OVERLAY_ID)) return
+
+  const overlay = document.createElement("div")
+  overlay.id = OVERLAY_ID
+  overlay.setAttribute("role", "status")
+  overlay.setAttribute("aria-label", "Processing payment")
+
+  overlay.innerHTML = `
+    <style>
+      @keyframes _pp_spin { to { transform: rotate(360deg) } }
+      @keyframes _pp_progress { 0% { transform: translateX(-100%) } 100% { transform: translateX(350%) } }
+    </style>
+    <div style="position:relative;width:56px;height:56px">
+      <div style="position:absolute;inset:0;border-radius:50%;border:3px solid #e5e7eb"></div>
+      <div style="position:absolute;inset:0;border-radius:50%;border:3px solid transparent;border-top-color:#0070ba;animation:_pp_spin .8s linear infinite"></div>
+      <svg viewBox="0 0 24 24" fill="none" stroke="#0070ba" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"
+        style="position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:24px;height:24px">
+        <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/>
+      </svg>
+    </div>
+    <div style="text-align:center">
+      <div style="font-size:18px;font-weight:600;color:#111827;letter-spacing:-0.01em">Processing your payment</div>
+      <div style="font-size:14px;color:#6b7280;margin-top:6px;line-height:1.5">
+        This may take a few moments. Please do not close<br>or refresh this page.
+      </div>
+    </div>
+    <div style="width:200px;height:3px;background:#e5e7eb;border-radius:3px;overflow:hidden;margin-top:4px">
+      <div style="width:40%;height:100%;background:linear-gradient(90deg,#0070ba,#003087);border-radius:3px;animation:_pp_progress 1.5s ease-in-out infinite"></div>
+    </div>
+  `
+
+  Object.assign(overlay.style, {
+    position: "fixed",
+    inset: "0",
+    zIndex: "99999",
+    background: "rgba(255,255,255,0.96)",
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "center",
+    justifyContent: "center",
+    gap: "20px",
+    fontFamily: "-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif",
+  })
+
+  document.body.appendChild(overlay)
+}
+
+export function hideProcessingOverlay() {
+  if (typeof document === "undefined") return
+  document.getElementById(OVERLAY_ID)?.remove()
+}