@easypayment/medusa-paypal-ui 1.0.50 → 1.0.52

package/src/components/PayPalSmartButtons.tsx

@@ -1,10 +1,15 @@
 "use client"
-import React, { useMemo, useState } from "react"
-import { PayPalButtons } from "@paypal/react-paypal-js"
+import React, { useCallback, useMemo, useState } from "react"
+import { PayPalButtons, usePayPalScriptReducer } from "@paypal/react-paypal-js"
 import { createPayPalStoreApi, markPaymentComplete } from "../client/paypal"
 import type { PayPalConfig } from "../client/types"
+import { isNextRouterError } from "../utils/next-errors"
+import { showProcessingOverlay, hideProcessingOverlay } from "../utils/processing-overlay"
 
-const SPIN_STYLE = `@keyframes _pp_spin { to { transform: rotate(360deg) } }`
+const SPIN_STYLE = `
+@keyframes _pp_spin { to { transform: rotate(360deg) } }
+@keyframes _pp_progress { 0% { transform: translateX(-100%) } 100% { transform: translateX(350%) } }
+`
 
 const BUTTON_WIDTH_MAP: Record<string, string> = {
   small: "300px",
@@ -29,6 +34,14 @@ export function PayPalSmartButtons(props: {
 
   const [error, setError] = useState<string | null>(null)
   const [processing, setProcessing] = useState(false)
+  const [buttonsReady, setButtonsReady] = useState(false)
+  const [{ isPending, isResolved, isRejected }] = usePayPalScriptReducer()
+
+  const handleInit = useCallback(() => {
+    setButtonsReady(true)
+  }, [])
+
+  const showSpinner = isPending || (isResolved && !buttonsReady)
 
   if (!config.currency_supported) return null
 
@@ -40,42 +53,148 @@ export function PayPalSmartButtons(props: {
 
       {processing && (
         <div
+          role="status"
+          aria-label="Processing payment"
           style={{
-            position: "absolute",
+            position: "fixed",
             inset: 0,
-            zIndex: 10,
-            background: "rgba(255,255,255,0.90)",
-            borderRadius: 8,
+            zIndex: 9999,
+            background: "rgba(255,255,255,0.96)",
             display: "flex",
             flexDirection: "column",
             alignItems: "center",
             justifyContent: "center",
+            gap: 20,
+          }}
+        >
+          <div style={{ position: "relative", width: 56, height: 56 }}>
+            <div
+              style={{
+                position: "absolute",
+                inset: 0,
+                borderRadius: "50%",
+                border: "3px solid #e5e7eb",
+              }}
+            />
+            <div
+              style={{
+                position: "absolute",
+                inset: 0,
+                borderRadius: "50%",
+                border: "3px solid transparent",
+                borderTopColor: "#0070ba",
+                animation: "_pp_spin .8s linear infinite",
+              }}
+            />
+            <svg
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="#0070ba"
+              strokeWidth="1.8"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              style={{
+                position: "absolute",
+                top: "50%",
+                left: "50%",
+                transform: "translate(-50%, -50%)",
+                width: 24,
+                height: 24,
+              }}
+            >
+              <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z" />
+            </svg>
+          </div>
+          <div style={{ textAlign: "center" }}>
+            <div style={{ fontSize: 18, fontWeight: 600, color: "#111827", letterSpacing: "-0.01em" }}>
+              Processing your payment
+            </div>
+            <div style={{ fontSize: 14, color: "#6b7280", marginTop: 6, lineHeight: 1.5 }}>
+              This may take a few moments. Please do not close<br />
+              or refresh this page.
+            </div>
+          </div>
+          <div
+            style={{
+              width: 200,
+              height: 3,
+              background: "#e5e7eb",
+              borderRadius: 3,
+              overflow: "hidden",
+              marginTop: 4,
+            }}
+          >
+            <div
+              style={{
+                width: "40%",
+                height: "100%",
+                background: "linear-gradient(90deg, #0070ba, #003087)",
+                borderRadius: 3,
+                animation: "_pp_progress 1.5s ease-in-out infinite",
+              }}
+            />
+          </div>
+        </div>
+      )}
+
+      {showSpinner && (
+        <div
+          role="status"
+          aria-label="Loading PayPal"
+          style={{
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
             gap: 10,
-            minHeight: 60,
+            padding: "18px 16px",
+            background: "#f9fafb",
+            border: "1px solid #e5e7eb",
+            borderRadius: 8,
+            minHeight: 55,
           }}
         >
           <div
             style={{
-              width: 28,
-              height: 28,
+              width: 22,
+              height: 22,
               borderRadius: "50%",
               border: "2.5px solid #e5e7eb",
               borderTopColor: "#0070ba",
               animation: "_pp_spin .7s linear infinite",
+              flexShrink: 0,
             }}
           />
-          <div style={{ textAlign: "center" }}>
-            <div style={{ fontSize: 13, color: "#374151", fontWeight: 500 }}>
-              Processing your payment…
-            </div>
-            <div style={{ fontSize: 12, color: "#6b7280", marginTop: 4 }}>
-              Please do not close or refresh this page
-            </div>
+          <div style={{ fontSize: 13, fontWeight: 500, color: "#6b7280" }}>
+            Loading PayPal…
           </div>
         </div>
       )}
 
-      {config.environment === "sandbox" && (
+      {isRejected && (
+        <div
+          role="alert"
+          style={{
+            display: "flex",
+            alignItems: "flex-start",
+            gap: 8,
+            padding: "10px 14px",
+            background: "#fef2f2",
+            border: "1px solid #fecaca",
+            borderRadius: 8,
+            fontSize: 13,
+            color: "#b91c1c",
+            lineHeight: 1.5,
+          }}
+        >
+          <span style={{ flexShrink: 0, fontSize: 15 }}>⚠️</span>
+          <span>
+            PayPal failed to load. Please refresh the page or try a different
+            payment method.
+          </span>
+        </div>
+      )}
+
+      {config.environment === "sandbox" && buttonsReady && (
         <div
           style={{
             display: "flex",
@@ -111,50 +230,69 @@ export function PayPalSmartButtons(props: {
         </div>
       )}
 
-      <PayPalButtons
-        style={{
-          layout: "vertical",
-          color: config.button_color,
-          shape: config.button_shape,
-          label: config.button_label,
-          height: config.button_height,
-        }}
-        createOrder={async () => {
-          setError(null)
-          const r = await api.createOrder(cartId)
-          return r.id
-        }}
-        onApprove={async (data: { orderID?: string }) => {
-          try {
-            setProcessing(true)
+      {isResolved && (
+        <div style={buttonsReady ? undefined : { position: "absolute", left: -9999, opacity: 0, pointerEvents: "none" }}>
+        <PayPalButtons
+          forceReRender={[config.currency, config.intent, cartId]}
+          onInit={handleInit}
+          style={{
+            layout: "vertical",
+            color: config.button_color,
+            shape: config.button_shape,
+            label: config.button_label,
+            height: config.button_height,
+          }}
+          createOrder={async () => {
+            if (processing) throw new Error("Payment already processing")
             setError(null)
-            const orderId = String(data?.orderID || "")
-            const result = await api.captureOrder(cartId, orderId)
+            setProcessing(true)
+            try {
+              const r = await api.createOrder(cartId)
+              return r.id
+            } catch (e: unknown) {
+              setProcessing(false)
+              throw e
+            }
+          }}
+          onApprove={async (data: { orderID?: string }) => {
+            try {
+              setProcessing(true)
+              showProcessingOverlay()
+              setError(null)
+              const orderId = String(data?.orderID || "")
+              if (!orderId) throw new Error("PayPal order ID is missing from approval response")
+              const result = await api.captureOrder(cartId, orderId)
 
-            const completeResult = await markPaymentComplete(baseUrl, cartId, publishableApiKey)
+              const completeResult = await markPaymentComplete(baseUrl, cartId, publishableApiKey)
 
-            onPaid?.({ ...result, ...completeResult })
-          } catch (e: unknown) {
-            const msg = e instanceof Error ? e.message : "Payment capture failed"
+              await onPaid?.({ ...result, ...completeResult })
+            } catch (e: unknown) {
+              if (isNextRouterError(e)) throw e
+              hideProcessingOverlay()
+              setProcessing(false)
+              const msg = e instanceof Error ? e.message : "Payment capture failed"
+              setError(msg)
+              onError?.(msg)
+            }
+          }}
+          onCancel={() => {
+            hideProcessingOverlay()
+            setProcessing(false)
+          }}
+          onError={(err: Error | { message?: string }) => {
+            hideProcessingOverlay()
+            setProcessing(false)
+            const msg = err instanceof Error ? err.message : err?.message || "PayPal error"
             setError(msg)
             onError?.(msg)
-          } finally {
-            setProcessing(false)
-          }
-        }}
-        onCancel={() => {
-          setProcessing(false)
-        }}
-        onError={(err: Error | { message?: string }) => {
-          setProcessing(false)
-          const msg = err instanceof Error ? err.message : err?.message || "PayPal error"
-          setError(msg)
-          onError?.(msg)
-        }}
-      />
+          }}
+        />
+        </div>
+      )}
 
       {error ? (
         <div
+          role="alert"
           style={{
             marginTop: 10,
             display: "flex",

package/src/hooks/usePayPalConfig.ts

@@ -11,9 +11,18 @@ type Args = {
   enabled?: boolean
 }
 
+const MAX_CACHE_ENTRIES = 50
 const _cache = new Map<string, { config: PayPalConfig; at: number }>()
 const CACHE_TTL = 5 * 60 * 1000
 
+function cacheSet(key: string, value: { config: PayPalConfig; 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 `${baseUrl}::${cartId ?? ""}`
 }
@@ -66,12 +75,12 @@ export function usePayPalConfig({
       try {
         const cfg = await api.getConfig(cartId, controller.signal)
         if (!mounted || id !== fetchIdRef.current) return
-        _cache.set(k, { config: cfg, at: Date.now() })
+        cacheSet(k, { config: cfg, at: Date.now() })
         setConfig(cfg)
-      } catch (e: any) {
-        if (e?.name === "AbortError") return
+      } catch (e: unknown) {
+        if (e instanceof Error && e.name === "AbortError") return
         if (!mounted || id !== fetchIdRef.current) return
-        setError(e?.message || "Failed to load PayPal config")
+        setError(e instanceof Error ? e.message : "Failed to load PayPal config")
       } finally {
         if (mounted && id === fetchIdRef.current) setLoading(false)
       }

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()
+}