@easypayment/medusa-paypal-ui 1.2.8 → 1.3.0

package/src/hooks/usePayPalConfig.ts

@@ -1,52 +1,64 @@
 "use client"
 
+/* eslint-disable react-hooks/set-state-in-effect --
+   This hook mirrors an external module-level cache into React state inside
+   its fetch effect (cache seed, enabled gate, fetch results). Each sync set
+   runs at most once per key change, not per render, so no render cascade. */
+
 import { useEffect, useMemo, useRef, useState } from "react"
 import { createPayPalStoreApi } from "../client/paypal"
+import {
+  configCacheKey,
+  fetchPayPalConfigShared,
+  getCachedPayPalConfig,
+} from "../client/config-cache"
 import type { PayPalConfig } from "../client/types"
 
 type Args = {
   baseUrl: string
   publishableApiKey?: string
   cartId?: string
+  /**
+   * The cart's current currency code (e.g. "usd"). Optional, but recommended:
+   * when provided it becomes part of the cache key, so a region/currency
+   * switch on the same cart refetches the config instead of serving a stale
+   * one for up to 5 minutes.
+   */
+  currencyCode?: string
+  credentials?: RequestCredentials
   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 ?? ""}`
-}
-
 export function usePayPalConfig({
   baseUrl,
   publishableApiKey,
   cartId,
+  currencyCode,
+  credentials,
   enabled = true,
 }: Args) {
   const api = useMemo(
-    () => createPayPalStoreApi({ baseUrl, publishableApiKey }),
-    [baseUrl, publishableApiKey]
+    () => createPayPalStoreApi({ baseUrl, publishableApiKey, credentials }),
+    [baseUrl, publishableApiKey, credentials]
   )
 
-  const key = cacheKey(baseUrl, cartId)
-  const hit = _cache.get(key)
-  const seedConfig = hit && Date.now() - hit.at < CACHE_TTL ? hit.config : null
+  const key = configCacheKey({
+    baseUrl,
+    publishableApiKey,
+    cartId,
+    currencyCode,
+  })
+  const seedConfig = getCachedPayPalConfig(key)
 
   const [config, setConfig] = useState<PayPalConfig | null>(seedConfig)
   const [loading, setLoading] = useState<boolean>(
     seedConfig === null && enabled
   )
   const [error, setError] = useState<string | null>(null)
+  // Bumping this re-runs the effect after an error, bypassing nothing (the
+  // failed fetch was never cached) — gives consumers a retry() without
+  // tearing down the hook.
+  const [retryToken, setRetryToken] = useState(0)
 
   const fetchIdRef = useRef(0)
 
@@ -57,10 +69,9 @@ export function usePayPalConfig({
       return
     }
 
-    const k = cacheKey(baseUrl, cartId)
-    const cached = _cache.get(k)
-    if (cached && Date.now() - cached.at < CACHE_TTL) {
-      setConfig(cached.config)
+    const cached = getCachedPayPalConfig(key)
+    if (cached) {
+      setConfig(cached)
       setLoading(false)
       setError(null)
       return
@@ -68,18 +79,17 @@ export function usePayPalConfig({
 
     const id = ++fetchIdRef.current
     let mounted = true
-    const controller = new AbortController()
 
     setLoading(true)
     setError(null)
     ;(async () => {
       try {
-        const cfg = await api.getConfig(cartId, controller.signal)
+        const cfg = await fetchPayPalConfigShared(key, () =>
+          api.getConfig(cartId)
+        )
         if (!mounted || id !== fetchIdRef.current) return
-        cacheSet(k, { config: cfg, at: Date.now() })
         setConfig(cfg)
       } catch (e: unknown) {
-        if (e instanceof Error && e.name === "AbortError") return
         if (!mounted || id !== fetchIdRef.current) return
         setError(
           e instanceof Error ? e.message : "Failed to load PayPal config"
@@ -91,9 +101,10 @@ export function usePayPalConfig({
 
     return () => {
       mounted = false
-      controller.abort()
     }
-  }, [api, baseUrl, cartId, enabled])
+  }, [api, key, cartId, enabled, retryToken])
+
+  const retry = useMemo(() => () => setRetryToken((t) => t + 1), [])
 
-  return { config, loading, error }
+  return { config, loading, error, retry }
 }

package/src/hooks/usePayPalPaymentMethods.ts

@@ -1,12 +1,27 @@
 "use client"
 
+/* eslint-disable react-hooks/set-state-in-effect --
+   This hook mirrors an external module-level cache into React state inside
+   its fetch effect (cache seed, enabled gate, fetch results). Each sync set
+   runs at most once per key change, not per render, so no render cascade. */
+
 import { useEffect, useMemo, useRef, useState } from "react"
 import { createPayPalStoreApi } from "../client/paypal"
+import { HttpError } from "../client/http"
+import {
+  configCacheKey,
+  fetchPayPalConfigShared,
+  getCachedPayPalConfig,
+} from "../client/config-cache"
+import type { PayPalConfig } from "../client/types"
 
 type Args = {
   baseUrl: string
   publishableApiKey?: string
   cartId?: string
+  /** See `usePayPalConfig` — include to bust the cache on currency switches. */
+  currencyCode?: string
+  credentials?: RequestCredentials
   enabled?: boolean
 }
 
@@ -25,22 +40,6 @@ type Result = {
   error: string | null
 }
 
-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 ?? ""}`
-}
-
 const DEFAULT_RESULT: Result = {
   paypalEnabled: true,
   paypalTitle: "PayPal",
@@ -50,23 +49,46 @@ const DEFAULT_RESULT: Result = {
   error: null,
 }
 
+function toResult(cfg: PayPalConfig): Result {
+  return {
+    paypalEnabled: cfg.paypal_enabled !== false,
+    paypalTitle:
+      typeof cfg.paypal_title === "string" && cfg.paypal_title
+        ? cfg.paypal_title
+        : "PayPal",
+    cardEnabled: cfg.card_enabled !== false,
+    cardTitle:
+      typeof cfg.card_title === "string" && cfg.card_title
+        ? cfg.card_title
+        : "Credit or Debit Card",
+    loading: false,
+    error: null,
+  }
+}
+
 export function usePayPalPaymentMethods({
   baseUrl,
   publishableApiKey,
   cartId,
+  currencyCode,
+  credentials,
   enabled = true,
 }: Args): Result {
   const api = useMemo(
-    () => createPayPalStoreApi({ baseUrl, publishableApiKey }),
-    [baseUrl, publishableApiKey]
+    () => createPayPalStoreApi({ baseUrl, publishableApiKey, credentials }),
+    [baseUrl, publishableApiKey, credentials]
   )
 
-  const key = cacheKey(baseUrl, cartId)
-  const hit = _cache.get(key)
-  const seed = hit && Date.now() - hit.at < CACHE_TTL ? hit.result : null
+  const key = configCacheKey({
+    baseUrl,
+    publishableApiKey,
+    cartId,
+    currencyCode,
+  })
+  const seed = getCachedPayPalConfig(key)
 
   const [result, setResult] = useState<Result>(
-    seed ?? { ...DEFAULT_RESULT, loading: enabled }
+    seed ? toResult(seed) : { ...DEFAULT_RESULT, loading: enabled }
   )
   const fetchIdRef = useRef(0)
 
@@ -76,54 +98,38 @@ export function usePayPalPaymentMethods({
       return
     }
 
-    const k = cacheKey(baseUrl, cartId)
-    const cached = _cache.get(k)
-    if (cached && Date.now() - cached.at < CACHE_TTL) {
-      setResult(cached.result)
+    const cached = getCachedPayPalConfig(key)
+    if (cached) {
+      setResult(toResult(cached))
       return
     }
 
     const id = ++fetchIdRef.current
     let mounted = true
-    const controller = new AbortController()
 
     setResult((prev) => ({ ...prev, loading: true }))
     ;(async () => {
       try {
-        const cfg = await api.getConfig(cartId, controller.signal)
+        const cfg = await fetchPayPalConfigShared(key, () =>
+          api.getConfig(cartId)
+        )
         if (!mounted || id !== fetchIdRef.current) return
-
-        const next: Result = {
-          paypalEnabled: cfg.paypal_enabled !== false,
-          paypalTitle:
-            typeof cfg.paypal_title === "string" && cfg.paypal_title
-              ? cfg.paypal_title
-              : "PayPal",
-          cardEnabled: cfg.card_enabled !== false,
-          cardTitle:
-            typeof cfg.card_title === "string" && cfg.card_title
-              ? cfg.card_title
-              : "Credit or Debit Card",
-          loading: false,
-          error: null,
-        }
-
-        cacheSet(k, { result: next, at: Date.now() })
-        setResult(next)
+        setResult(toResult(cfg))
       } catch (e: unknown) {
-        const msg = e instanceof Error ? e.message : ""
-        if (e instanceof Error && e.name === "AbortError") return
         if (!mounted || id !== fetchIdRef.current) return
+        const msg = e instanceof Error ? e.message : ""
 
-        if (msg.includes("403") || msg.includes("Forbidden")) {
-          const disabled: Result = {
+        // 403 means the backend explicitly refused (plugin disabled for this
+        // sales channel / key). Branch on the status code, not message text —
+        // the backend's JSON message rarely contains the literal "403".
+        if (e instanceof HttpError && e.status === 403) {
+          setResult({
             ...DEFAULT_RESULT,
             paypalEnabled: false,
             cardEnabled: false,
             loading: false,
             error: msg || "PayPal is disabled",
-          }
-          setResult(disabled)
+          })
           return
         }
 
@@ -137,9 +143,8 @@ export function usePayPalPaymentMethods({
 
     return () => {
       mounted = false
-      controller.abort()
     }
-  }, [api, baseUrl, cartId, enabled])
+  }, [api, key, cartId, enabled])
 
   return result
 }

package/src/index.ts

@@ -1,5 +1,9 @@
 export * from "./client/types"
 export * from "./client/paypal"
+export { createHttpClient, HttpError } from "./client/http"
+export type { HttpOptions, RequestOptions } from "./client/http"
+export { invalidatePayPalConfigCache } from "./client/config-cache"
+export * from "./constants"
 export * from "./hooks/usePayPalConfig"
 export * from "./components/PayPalProvider"
 export * from "./components/PayPalCurrencyNotice"

package/src/order.ts

@@ -27,14 +27,18 @@
 import {
   PAYPAL_WALLET_PROVIDER_ID,
   PAYPAL_CARD_PROVIDER_ID,
+  PAYPAL_PROVIDER_IDS,
   isPayPalProviderId,
 } from "./constants"
+import type { PayPalProviderId } from "./constants"
 
 export {
   PAYPAL_WALLET_PROVIDER_ID,
   PAYPAL_CARD_PROVIDER_ID,
+  PAYPAL_PROVIDER_IDS,
   isPayPalProviderId,
 }
+export type { PayPalProviderId }
 
 export type PayPalPaymentInfo = { title: string }
 
@@ -102,13 +106,16 @@ export async function fetchPayPalConfig(opts: {
     return {}
   }
   try {
+    // Always arm the timeout — a caller-supplied signal composes with it
+    // rather than replacing it (matching the client-side HTTP client), so a
+    // signal that never fires can't leave the request hanging forever.
     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
+    const controller = new AbortController()
+    const timeoutId = setTimeout(() => controller.abort(), timeoutMs)
+    const onCallerAbort = () => controller.abort()
+    if (signal) {
+      if (signal.aborted) controller.abort()
+      else signal.addEventListener("abort", onCallerAbort)
     }
     let res: Response
     try {
@@ -119,10 +126,11 @@ export async function fetchPayPalConfig(opts: {
             ? { "x-publishable-api-key": publishableApiKey }
             : {}),
         },
-        signal: effectiveSignal,
+        signal: controller.signal,
       })
     } finally {
-      if (timeoutId !== undefined) clearTimeout(timeoutId)
+      clearTimeout(timeoutId)
+      if (signal) signal.removeEventListener("abort", onCallerAbort)
     }
     if (!res.ok) {
       return {}

package/src/utils/processing-overlay.ts

@@ -2,23 +2,35 @@ const OVERLAY_ID = "__pp_processing_overlay"
 
 let cleanupNavListener: (() => void) | null = null
 
+/** True while the shared DOM overlay is mounted. */
+export function isProcessingOverlayVisible(): boolean {
+  if (typeof document === "undefined") return false
+  return !!document.getElementById(OVERLAY_ID)
+}
+
 export function showProcessingOverlay() {
   if (typeof document === "undefined") return
   if (document.getElementById(OVERLAY_ID)) return
 
   const overlay = document.createElement("div")
   overlay.id = OVERLAY_ID
+  // role="status" announces the visible text politely; no aria-label so the
+  // text itself (which explains what's happening) is what gets read.
   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%) } }
+      @keyframes _pp_ov_spin { to { transform: rotate(360deg) } }
+      @keyframes _pp_ov_progress { 0% { transform: translateX(-100%) } 100% { transform: translateX(350%) } }
+      ._pp-ov-spin { animation: _pp_ov_spin .8s linear infinite }
+      ._pp-ov-progress { animation: _pp_ov_progress 1.5s ease-in-out infinite }
+      @media (prefers-reduced-motion: reduce) {
+        ._pp-ov-spin, ._pp-ov-progress { animation: none }
+      }
     </style>
-    <div style="position:relative;width:56px;height:56px">
+    <div style="position:relative;width:56px;height:56px" aria-hidden="true">
       <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>
+      <div class="_pp-ov-spin" style="position:absolute;inset:0;border-radius:50%;border:3px solid transparent;border-top-color:#0070ba"></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"/>
@@ -30,8 +42,8 @@ export function showProcessingOverlay() {
         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 style="width:200px;height:3px;background:#e5e7eb;border-radius:3px;overflow:hidden;margin-top:4px" aria-hidden="true">
+      <div class="_pp-ov-progress" style="width:40%;height:100%;background:linear-gradient(90deg,#0070ba,#003087);border-radius:3px"></div>
     </div>
   `
 
@@ -51,23 +63,16 @@ export function showProcessingOverlay() {
   document.body.appendChild(overlay)
 
   // Auto-remove on client-side navigation (Next.js App Router uses
-  // pushState/replaceState for soft navigations, not full reloads).
+  // pushState/replaceState for soft navigations, not full reloads). The URL is
+  // polled instead of monkeypatching history.pushState — patching fights with
+  // the Next router and any other library that wraps history, and a stale
+  // restore on cleanup could undo THEIR patch.
   const startUrl = location.href
   const onNav = () => {
     if (location.href !== startUrl) hideProcessingOverlay()
   }
   window.addEventListener("popstate", onNav)
-
-  const origPush = history.pushState.bind(history)
-  const origReplace = history.replaceState.bind(history)
-  history.pushState = function (...args) {
-    origPush(...args)
-    onNav()
-  }
-  history.replaceState = function (...args) {
-    origReplace(...args)
-    onNav()
-  }
+  const urlWatcher = window.setInterval(onNav, 250)
 
   // bfcache restore: the overlay intentionally survives the unload of a
   // full-page navigation (that's its purpose), but when the buyer presses
@@ -83,8 +88,7 @@ export function showProcessingOverlay() {
   cleanupNavListener = () => {
     window.removeEventListener("popstate", onNav)
     window.removeEventListener("pageshow", onPageShow)
-    history.pushState = origPush
-    history.replaceState = origReplace
+    window.clearInterval(urlWatcher)
   }
 }