@easypayment/medusa-paypal-ui 1.2.0 → 1.2.3

package/src/order.ts

@@ -1,134 +1,140 @@
-/**
- * Server-safe helpers for displaying PayPal payments on order / confirmation
- * pages.
- *
- * This module is intentionally free of React and any client-only code, so it
- * can be imported from Next.js **server components** (e.g. the order
- * confirmation page) without pulling in the checkout UI.
- *
- * @example
- * import { getPaymentLabel, fetchPayPalConfig } from "@easypayment/medusa-paypal-ui/order"
- *
- * // In the (async) server component that renders the payment method:
- * const titles = await fetchPayPalConfig({
- *   baseUrl: process.env.NEXT_PUBLIC_MEDUSA_BACKEND_URL!,
- *   publishableApiKey: process.env.NEXT_PUBLIC_MEDUSA_PUBLISHABLE_KEY,
- * })
- *
- * <Text>
- *   {getPaymentLabel(
- *     payment.provider_id,
- *     paymentInfoMap[payment.provider_id]?.title,
- *     titles
- *   )}
- * </Text>
- */
-
-import {
-  PAYPAL_WALLET_PROVIDER_ID,
-  PAYPAL_CARD_PROVIDER_ID,
-  isPayPalProviderId,
-} from "./constants"
-
-export { PAYPAL_WALLET_PROVIDER_ID, PAYPAL_CARD_PROVIDER_ID, isPayPalProviderId }
-
-export type PayPalPaymentInfo = { title: string }
-
-/** Built-in fallback titles, used only when admin titles aren't supplied. */
-export const paypalPaymentInfoMap: Record<string, PayPalPaymentInfo> = {
-  [PAYPAL_WALLET_PROVIDER_ID]: { title: "PayPal" },
-  [PAYPAL_CARD_PROVIDER_ID]: { title: "Credit or Debit Card" },
-}
-
-/** Admin-configured titles, as returned by `GET /store/paypal/config`. */
-export type PayPalConfigTitles = {
-  paypal_title?: string | null
-  card_title?: string | null
-}
-
-/**
- * Null-safe payment label resolver for order / confirmation pages.
- *
- * Precedence for the PayPal providers: **admin-configured title** (`titles`,
- * from {@link fetchPayPalConfig}) → built-in default. For any other provider:
- * `fallback` → raw id. Never throws on an unknown / missing provider, which is
- * what causes the common `Cannot read properties of undefined (reading 'title')`
- * crash on the order confirmation page.
- *
- * @param titles Admin titles so the order page shows the same labels configured
- *   in Medusa Admin → Settings → PayPal (e.g. a custom "Credit or Debit Card").
- */
-export function getPaymentLabel(
-  providerId: string | undefined | null,
-  fallback?: string,
-  titles?: PayPalConfigTitles
-): string {
-  if (!providerId) {
-    return fallback ?? ""
-  }
-  if (providerId === PAYPAL_WALLET_PROVIDER_ID) {
-    return (
-      titles?.paypal_title?.trim() ||
-      paypalPaymentInfoMap[PAYPAL_WALLET_PROVIDER_ID].title
-    )
-  }
-  if (providerId === PAYPAL_CARD_PROVIDER_ID) {
-    return (
-      titles?.card_title?.trim() ||
-      paypalPaymentInfoMap[PAYPAL_CARD_PROVIDER_ID].title
-    )
-  }
-  return fallback ?? providerId
-}
-
-/**
- * Fetch the admin-configured PayPal titles from the storefront API
- * (`GET /store/paypal/config`). Server-safe (uses the global `fetch`).
- *
- * Returns `{}` on any error/network failure so callers can fall back to the
- * built-in defaults without their own try/catch.
- */
-export async function fetchPayPalConfig(opts: {
-  baseUrl: string
-  publishableApiKey?: string
-  signal?: AbortSignal
-}): Promise<PayPalConfigTitles> {
-  const { baseUrl, publishableApiKey, signal } = opts
-  if (!baseUrl) {
-    return {}
-  }
-  try {
-    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 {}
-    }
-    const cfg = (await res.json()) as Record<string, unknown>
-    return {
-      paypal_title:
-        typeof cfg.paypal_title === "string" ? cfg.paypal_title : undefined,
-      card_title:
-        typeof cfg.card_title === "string" ? cfg.card_title : undefined,
-    }
-  } catch {
-    return {}
-  }
-}
+/**
+ * Server-safe helpers for displaying PayPal payments on order / confirmation
+ * pages.
+ *
+ * This module is intentionally free of React and any client-only code, so it
+ * can be imported from Next.js **server components** (e.g. the order
+ * confirmation page) without pulling in the checkout UI.
+ *
+ * @example
+ * import { getPaymentLabel, fetchPayPalConfig } from "@easypayment/medusa-paypal-ui/order"
+ *
+ * // In the (async) server component that renders the payment method:
+ * const titles = await fetchPayPalConfig({
+ *   baseUrl: process.env.NEXT_PUBLIC_MEDUSA_BACKEND_URL!,
+ *   publishableApiKey: process.env.NEXT_PUBLIC_MEDUSA_PUBLISHABLE_KEY,
+ * })
+ *
+ * <Text>
+ *   {getPaymentLabel(
+ *     payment.provider_id,
+ *     paymentInfoMap[payment.provider_id]?.title,
+ *     titles
+ *   )}
+ * </Text>
+ */
+
+import {
+  PAYPAL_WALLET_PROVIDER_ID,
+  PAYPAL_CARD_PROVIDER_ID,
+  isPayPalProviderId,
+} from "./constants"
+
+export {
+  PAYPAL_WALLET_PROVIDER_ID,
+  PAYPAL_CARD_PROVIDER_ID,
+  isPayPalProviderId,
+}
+
+export type PayPalPaymentInfo = { title: string }
+
+/** Built-in fallback titles, used only when admin titles aren't supplied. */
+export const paypalPaymentInfoMap: Record<string, PayPalPaymentInfo> = {
+  [PAYPAL_WALLET_PROVIDER_ID]: { title: "PayPal" },
+  [PAYPAL_CARD_PROVIDER_ID]: { title: "Credit or Debit Card" },
+}
+
+/** Admin-configured titles, as returned by `GET /store/paypal/config`. */
+export type PayPalConfigTitles = {
+  paypal_title?: string | null
+  card_title?: string | null
+}
+
+/**
+ * Null-safe payment label resolver for order / confirmation pages.
+ *
+ * Precedence for the PayPal providers: **admin-configured title** (`titles`,
+ * from {@link fetchPayPalConfig}) → built-in default. For any other provider:
+ * `fallback` → raw id. Never throws on an unknown / missing provider, which is
+ * what causes the common `Cannot read properties of undefined (reading 'title')`
+ * crash on the order confirmation page.
+ *
+ * @param titles Admin titles so the order page shows the same labels configured
+ *   in Medusa Admin → Settings → PayPal (e.g. a custom "Credit or Debit Card").
+ */
+export function getPaymentLabel(
+  providerId: string | undefined | null,
+  fallback?: string,
+  titles?: PayPalConfigTitles
+): string {
+  if (!providerId) {
+    return fallback ?? ""
+  }
+  if (providerId === PAYPAL_WALLET_PROVIDER_ID) {
+    return (
+      titles?.paypal_title?.trim() ||
+      paypalPaymentInfoMap[PAYPAL_WALLET_PROVIDER_ID].title
+    )
+  }
+  if (providerId === PAYPAL_CARD_PROVIDER_ID) {
+    return (
+      titles?.card_title?.trim() ||
+      paypalPaymentInfoMap[PAYPAL_CARD_PROVIDER_ID].title
+    )
+  }
+  return fallback ?? providerId
+}
+
+/**
+ * Fetch the admin-configured PayPal titles from the storefront API
+ * (`GET /store/paypal/config`). Server-safe (uses the global `fetch`).
+ *
+ * Returns `{}` on any error/network failure so callers can fall back to the
+ * built-in defaults without their own try/catch.
+ */
+export async function fetchPayPalConfig(opts: {
+  baseUrl: string
+  publishableApiKey?: string
+  signal?: AbortSignal
+}): Promise<PayPalConfigTitles> {
+  const { baseUrl, publishableApiKey, signal } = opts
+  if (!baseUrl) {
+    return {}
+  }
+  try {
+    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 {}
+    }
+    const cfg = (await res.json()) as Record<string, unknown>
+    return {
+      paypal_title:
+        typeof cfg.paypal_title === "string" ? cfg.paypal_title : undefined,
+      card_title:
+        typeof cfg.card_title === "string" ? cfg.card_title : undefined,
+    }
+  } catch {
+    return {}
+  }
+}

package/src/utils/next-errors.ts

@@ -1,21 +1,21 @@
-/**
- * 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") ||
-      // Next.js 15: notFound()/forbidden()/unauthorized() throw
-      // HTTPAccessFallbackError with digest "NEXT_HTTP_ERROR_FALLBACK;<status>".
-      digest.startsWith("NEXT_HTTP_ERROR_FALLBACK"))
-  )
-}
+/**
+ * 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") ||
+      // Next.js 15: notFound()/forbidden()/unauthorized() throw
+      // HTTPAccessFallbackError with digest "NEXT_HTTP_ERROR_FALLBACK;<status>".
+      digest.startsWith("NEXT_HTTP_ERROR_FALLBACK"))
+  )
+}

package/src/utils/processing-overlay.ts

@@ -1,96 +1,96 @@
-const OVERLAY_ID = "__pp_processing_overlay"
-
-let cleanupNavListener: (() => void) | null = null
-
-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)
-
-  // Auto-remove on client-side navigation (Next.js App Router uses
-  // pushState/replaceState for soft navigations, not full reloads).
-  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()
-  }
-
-  // bfcache restore: the overlay intentionally survives the unload of a
-  // full-page navigation (that's its purpose), but when the buyer presses
-  // Back the browser restores this page from the back/forward cache with the
-  // overlay element still in the DOM and the URL equal to startUrl — no nav
-  // listener ever fires, leaving checkout permanently covered. `pageshow`
-  // with `persisted: true` is exactly that restore.
-  const onPageShow = (e: PageTransitionEvent) => {
-    if (e.persisted) hideProcessingOverlay()
-  }
-  window.addEventListener("pageshow", onPageShow)
-
-  cleanupNavListener = () => {
-    window.removeEventListener("popstate", onNav)
-    window.removeEventListener("pageshow", onPageShow)
-    history.pushState = origPush
-    history.replaceState = origReplace
-  }
-}
-
-export function hideProcessingOverlay() {
-  if (typeof document === "undefined") return
-  cleanupNavListener?.()
-  cleanupNavListener = null
-  document.getElementById(OVERLAY_ID)?.remove()
-}
+const OVERLAY_ID = "__pp_processing_overlay"
+
+let cleanupNavListener: (() => void) | null = null
+
+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)
+
+  // Auto-remove on client-side navigation (Next.js App Router uses
+  // pushState/replaceState for soft navigations, not full reloads).
+  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()
+  }
+
+  // bfcache restore: the overlay intentionally survives the unload of a
+  // full-page navigation (that's its purpose), but when the buyer presses
+  // Back the browser restores this page from the back/forward cache with the
+  // overlay element still in the DOM and the URL equal to startUrl — no nav
+  // listener ever fires, leaving checkout permanently covered. `pageshow`
+  // with `persisted: true` is exactly that restore.
+  const onPageShow = (e: PageTransitionEvent) => {
+    if (e.persisted) hideProcessingOverlay()
+  }
+  window.addEventListener("pageshow", onPageShow)
+
+  cleanupNavListener = () => {
+    window.removeEventListener("popstate", onNav)
+    window.removeEventListener("pageshow", onPageShow)
+    history.pushState = origPush
+    history.replaceState = origReplace
+  }
+}
+
+export function hideProcessingOverlay() {
+  if (typeof document === "undefined") return
+  cleanupNavListener?.()
+  cleanupNavListener = null
+  document.getElementById(OVERLAY_ID)?.remove()
+}