@nevios/storefront-kit 1.0.0 → 1.2.0

package/dist/index.js

@@ -179,6 +179,37 @@ var en = {
   "order.terminal.cancelled": "This order was cancelled.",
   "order.terminal.refunded": "This order was refunded.",
   "order.terminal.returned": "This order was returned.",
+  // payment page — the four situations it can be in
+  "payment.title": "Pay for order {order}",
+  "payment.amountDue": "Amount due",
+  "payment.methodLabel": "Payment method",
+  "payment.payNow": "Pay now",
+  "payment.finish": "Finish payment",
+  "payment.loading": "Loading payment\u2026",
+  "payment.loadError": "Couldn't load this payment.",
+  "payment.actionError": "That didn't go through. Please try again.",
+  // …paid
+  "payment.paidTitle": "Paid",
+  "payment.paidBody": "Order {order} is paid. Nothing further is needed.",
+  "payment.paidAmount": "Paid",
+  // …returning from a gateway, callback still in flight
+  "payment.verifyingTitle": "Checking your payment\u2026",
+  "payment.verifyingBody": "This takes a few seconds. Don't pay again \u2014 we'll update this page.",
+  // …locked, one sentence per reason
+  "payment.blockedTitle": "This order can't be paid",
+  "payment.blocked.orderCancelled": "This order was cancelled, so there is nothing to pay.",
+  "payment.blocked.alreadyPaid": "This order is already paid.",
+  "payment.blocked.authorizationHeld": "Your bank is holding the funds for this order. Once the payment settles this page will show it as paid.",
+  "payment.blocked.documentIssued": "An invoice has been issued for this order, so the amount is fixed. Contact us to change how you pay.",
+  // …bank transfer
+  "payment.account": "Account",
+  "payment.beneficiary": "Beneficiary",
+  "payment.variableSymbol": "Variable symbol",
+  "payment.amount": "Amount",
+  "payment.copy": "Copy",
+  "payment.copied": "Copied",
+  "payment.qrAlt": "QR code for the payment",
+  "payment.qrCaption": "Scan in your banking app",
   // error pages
   "error.notFound.title": "Page not found",
   "error.notFound.body": "This page doesn't exist or isn't available in your region.",
@@ -335,6 +366,33 @@ var cs = {
   "order.terminal.cancelled": "Tato objedn\xE1vka byla zru\u0161ena.",
   "order.terminal.refunded": "Tato objedn\xE1vka byla refundov\xE1na.",
   "order.terminal.returned": "Tato objedn\xE1vka byla vr\xE1cena.",
+  // platební stránka — čtyři situace, ve kterých může být
+  "payment.title": "Zaplatit objedn\xE1vku {order}",
+  "payment.amountDue": "K \xFAhrad\u011B",
+  "payment.methodLabel": "Zp\u016Fsob platby",
+  "payment.payNow": "Zaplatit",
+  "payment.finish": "Dokon\u010Dit platbu",
+  "payment.loading": "Na\u010D\xEDt\xE1n\xED platby\u2026",
+  "payment.loadError": "Platbu se nepoda\u0159ilo na\u010D\xEDst.",
+  "payment.actionError": "Nepovedlo se to. Zkuste to pros\xEDm znovu.",
+  "payment.paidTitle": "Zaplaceno",
+  "payment.paidBody": "Objedn\xE1vka {order} je zaplacen\xE1. Nic dal\u0161\xEDho d\u011Blat nemus\xEDte.",
+  "payment.paidAmount": "Uhrazeno",
+  "payment.verifyingTitle": "Ov\u011B\u0159ujeme platbu\u2026",
+  "payment.verifyingBody": "Chvilku to trv\xE1. Nepla\u0165te pros\xEDm znovu \u2014 str\xE1nka se sama aktualizuje.",
+  "payment.blockedTitle": "Tuhle objedn\xE1vku te\u010F zaplatit nejde",
+  "payment.blocked.orderCancelled": "Objedn\xE1vka byla zru\u0161en\xE1, tak\u017Ee nen\xED co platit.",
+  "payment.blocked.alreadyPaid": "Objedn\xE1vka je u\u017E zaplacen\xE1.",
+  "payment.blocked.authorizationHeld": "Banka na tuhle objedn\xE1vku dr\u017E\xED pen\xEDze. Jakmile se platba dokon\u010D\xED, uvid\xEDte to tady.",
+  "payment.blocked.documentIssued": "K objedn\xE1vce je vystaven\xE1 faktura, tak\u017Ee je \u010D\xE1stka pevn\xE1. Pokud chcete platit jinak, ozv\u011Bte se n\xE1m.",
+  "payment.account": "\xDA\u010Det",
+  "payment.beneficiary": "P\u0159\xEDjemce",
+  "payment.variableSymbol": "Variabiln\xED symbol",
+  "payment.amount": "\u010C\xE1stka",
+  "payment.copy": "Kop\xEDrovat",
+  "payment.copied": "Zkop\xEDrov\xE1no",
+  "payment.qrAlt": "QR k\xF3d k platb\u011B",
+  "payment.qrCaption": "Na\u010Dt\u011Bte v bankovn\xED aplikaci",
   "error.notFound.title": "Str\xE1nka nenalezena",
   "error.notFound.body": "Tato str\xE1nka neexistuje nebo nen\xED ve va\u0161em regionu dostupn\xE1.",
   "error.generic.title": "N\u011Bco se pokazilo",
@@ -1142,6 +1200,7 @@ function AddToCart({
 }
 function CartLineItem({ line, locale }) {
   const t = useT();
+  const loc = useFormatLocale(locale);
   const { updateLine, removeLine } = useCart();
   return /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: "0.85rem", alignItems: "flex-start", padding: "0.75rem 0" }, children: [
     /* @__PURE__ */ jsx(
@@ -1213,7 +1272,7 @@ function CartLineItem({ line, locale }) {
         )
       ] })
     ] }),
-    /* @__PURE__ */ jsx("div", { style: { fontWeight: 500, whiteSpace: "nowrap" }, children: formatCents(line.line_total_cents, line.unit_price.currency, locale) })
+    /* @__PURE__ */ jsx("div", { style: { fontWeight: 500, whiteSpace: "nowrap" }, children: formatCents(line.line_total_cents, line.unit_price.currency, loc) })
   ] });
 }
 function StepBtn({ label, onClick }) {
@@ -1245,6 +1304,7 @@ function CartSummary({
   locale
 }) {
   const tr = useT();
+  const loc = useFormatLocale(locale);
   const { cart } = useCart();
   if (cart == null) return null;
   const t = cart.totals;
@@ -1265,10 +1325,10 @@ function CartSummary({
     opacity: empty ? 0.55 : 1
   };
   return /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "0.75rem" }, children: [
-    /* @__PURE__ */ jsx(Row, { label: tr("cart.subtotal"), value: formatCents(t.subtotal_with_tax_cents, t.currency, locale) }),
-    t.tax_cents > 0 ? /* @__PURE__ */ jsx(Row, { label: tr("cart.tax"), value: formatCents(t.tax_cents, t.currency, locale), muted: true }) : null,
+    /* @__PURE__ */ jsx(Row, { label: tr("cart.subtotal"), value: formatCents(t.subtotal_with_tax_cents, t.currency, loc) }),
+    t.tax_cents > 0 ? /* @__PURE__ */ jsx(Row, { label: tr("cart.tax"), value: formatCents(t.tax_cents, t.currency, loc), muted: true }) : null,
     /* @__PURE__ */ jsx("div", { style: { height: 1, background: "var(--nv-border)" } }),
-    /* @__PURE__ */ jsx(Row, { label: tr("cart.total"), value: formatCents(t.total_cents, t.currency, locale), strong: true }),
+    /* @__PURE__ */ jsx(Row, { label: tr("cart.total"), value: formatCents(t.total_cents, t.currency, loc), strong: true }),
     checkoutHref && !empty ? /* @__PURE__ */ jsx("a", { href: checkoutHref, style: ctaStyle, children: cta }) : /* @__PURE__ */ jsx("button", { type: "button", disabled: empty, onClick: onCheckout, style: ctaStyle, children: cta })
   ] });
 }
@@ -1671,6 +1731,7 @@ function ShippingPicker({
   locale
 }) {
   const t = useT();
+  const loc = useFormatLocale(locale);
   const { checkout, shippingQuotes, setShippingMethod, loading } = useCheckout();
   const heading = title ?? t("checkout.shippingMethod");
   const [quotes, setQuotes] = React10.useState(null);
@@ -1711,7 +1772,7 @@ function ShippingPicker({
         {
           selected: selected === q.rate_id,
           onSelect: () => setSelected(q.rate_id),
-          trailing: q.is_free ? t("common.free") : formatCents(q.price_cents, q.currency, locale),
+          trailing: q.is_free ? t("common.free") : formatCents(q.price_cents, q.currency, loc),
           children: /* @__PURE__ */ jsxs("span", { style: { display: "flex", flexDirection: "column" }, children: [
             /* @__PURE__ */ jsx("span", { style: { fontWeight: 500 }, children: q.label }),
             days ? /* @__PURE__ */ jsx("span", { style: { fontSize: "0.8125rem", color: "var(--nv-muted)" }, children: days }) : null
@@ -1732,6 +1793,39 @@ function estDays(q, t) {
   const n = lo ?? hi;
   return t("shipping.days", { count: n });
 }
+function PaymentMethodPicker({
+  methods,
+  value,
+  onSelect,
+  currency,
+  locale,
+  disabled,
+  label
+}) {
+  const loc = useFormatLocale(locale);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      role: "radiogroup",
+      "aria-label": label,
+      style: { display: "flex", flexDirection: "column", gap: "0.6rem" },
+      children: methods.map((m) => /* @__PURE__ */ jsx(
+        SelectRow,
+        {
+          selected: value === m.method,
+          disabled,
+          onSelect: () => onSelect(m.method),
+          trailing: m.surcharge_cents > 0 ? `+${formatCents(m.surcharge_cents, currency, loc)}` : void 0,
+          children: /* @__PURE__ */ jsxs("span", { style: { display: "flex", flexDirection: "column" }, children: [
+            /* @__PURE__ */ jsx("span", { style: { fontWeight: 500 }, children: m.display_label }),
+            m.display_description ? /* @__PURE__ */ jsx("span", { style: { fontSize: "0.8125rem", color: "var(--nv-muted)" }, children: m.display_description }) : null
+          ] })
+        },
+        m.method
+      ))
+    }
+  );
+}
 function PaymentSection({
   title,
   returnUrl,
@@ -1772,19 +1866,17 @@ function PaymentSection({
     return /* @__PURE__ */ jsx(Section, { title: heading, children: /* @__PURE__ */ jsx("p", { style: { color: "var(--nv-muted)", margin: 0 }, children: t("checkout.noPayment") }) });
   }
   return /* @__PURE__ */ jsxs(Section, { title: heading, children: [
-    /* @__PURE__ */ jsx("div", { role: "radiogroup", style: { display: "flex", flexDirection: "column", gap: "0.6rem" }, children: methods.map((m) => /* @__PURE__ */ jsx(
-      SelectRow,
+    /* @__PURE__ */ jsx(
+      PaymentMethodPicker,
       {
-        selected: selected === m.method,
-        onSelect: () => void setPaymentMethod(m.method),
-        trailing: m.surcharge_cents > 0 && checkout ? `+${formatCents(m.surcharge_cents, checkout.totals.currency, locale)}` : void 0,
-        children: /* @__PURE__ */ jsxs("span", { style: { display: "flex", flexDirection: "column" }, children: [
-          /* @__PURE__ */ jsx("span", { style: { fontWeight: 500 }, children: m.display_label }),
-          m.display_description ? /* @__PURE__ */ jsx("span", { style: { fontSize: "0.8125rem", color: "var(--nv-muted)" }, children: m.display_description }) : null
-        ] })
-      },
-      m.method
-    )) }),
+        methods,
+        value: selected,
+        onSelect: (method) => void setPaymentMethod(method),
+        currency: checkout?.totals.currency ?? "CZK",
+        locale,
+        label: heading
+      }
+    ),
     /* @__PURE__ */ jsxs("div", { children: [
       /* @__PURE__ */ jsx(Button, { onClick: placeOrder, busy: loading, disabled: selected == null, children: isGateway ? t("checkout.payNow") : t("checkout.placeOrder") }),
       isGateway ? /* @__PURE__ */ jsx("p", { style: { fontSize: "0.8125rem", color: "var(--nv-muted)", marginTop: "0.6rem" }, children: t("checkout.gatewayRedirectNote") }) : null
@@ -1797,12 +1889,13 @@ function OrderSummary({
   locale
 }) {
   const tr = useT();
+  const loc = useFormatLocale(locale);
   const ctx = useCheckout();
   const checkout = override ?? ctx.checkout;
   if (checkout == null) return null;
   const t = checkout.totals;
   const c = t.currency;
-  const money = (cents) => formatCents(cents, c, locale);
+  const money = (cents) => formatCents(cents, c, loc);
   return /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "1rem" }, children: [
     !totalsOnly && checkout.line_items.length > 0 ? /* @__PURE__ */ jsx("ul", { style: { listStyle: "none", margin: 0, padding: 0, display: "flex", flexDirection: "column", gap: "0.75rem" }, children: checkout.line_items.map((li) => /* @__PURE__ */ jsxs("li", { style: { display: "flex", gap: "0.75rem", alignItems: "center" }, children: [
       li.image_url ? /* @__PURE__ */ jsx(
@@ -2034,6 +2127,79 @@ function useOrderStatus(statusToken, initial) {
   }, [load, initial]);
   return { order, loading, error, reload: () => void load() };
 }
+function usePayment(token, initial) {
+  const client = useStorefront();
+  const [payment, setPayment] = React10.useState(initial ?? null);
+  const [methods, setMethods] = React10.useState([]);
+  const [loading, setLoading] = React10.useState(false);
+  const [busy, setBusy] = React10.useState(false);
+  const [error, setError] = React10.useState(null);
+  const load = React10.useCallback(async () => {
+    if (!token) return;
+    setLoading(true);
+    try {
+      const [state, list] = await Promise.all([
+        client.payment.get(token),
+        client.payment.methods(token)
+      ]);
+      setPayment(state);
+      setMethods(list);
+      setError(null);
+    } catch (e) {
+      setError(e instanceof Error ? e : new Error(String(e)));
+    } finally {
+      setLoading(false);
+    }
+  }, [client, token]);
+  React10.useEffect(() => {
+    if (!token) return;
+    if (initial && initial.token === token) {
+      setPayment(initial);
+      client.payment.methods(token).then(setMethods).catch(() => setMethods([]));
+      return;
+    }
+    void load();
+  }, [token, load]);
+  const selectMethod = React10.useCallback(
+    async (method) => {
+      if (!token) return null;
+      setBusy(true);
+      try {
+        const next = await client.payment.selectMethod(token, method);
+        setPayment(next);
+        setError(null);
+        return next;
+      } catch (e) {
+        setError(e instanceof Error ? e : new Error(String(e)));
+        return null;
+      } finally {
+        setBusy(false);
+      }
+    },
+    [client, token]
+  );
+  const startPayment = React10.useCallback(
+    async (input) => {
+      if (!token) return null;
+      setBusy(true);
+      try {
+        const result = await client.payment.start(token, {
+          return_url: input?.returnUrl,
+          cancel_url: input?.cancelUrl
+        });
+        setError(null);
+        return result.redirect_url;
+      } catch (e) {
+        setError(e instanceof Error ? e : new Error(String(e)));
+        return null;
+      } finally {
+        setBusy(false);
+      }
+    },
+    [client, token]
+  );
+  return { payment, methods, loading, busy, error, reload: load, selectMethod, startPayment };
+}
 var PHASE_RANK = {
   placed: 0,
   paid: 1,
@@ -2129,6 +2295,7 @@ function OrderLines({
   order,
   locale
 }) {
+  const loc = useFormatLocale(locale);
   return /* @__PURE__ */ jsxs("ul", { style: { listStyle: "none", margin: 0, padding: 0, display: "flex", flexDirection: "column", gap: "0.75rem" }, children: [
     order.line_items.map((li) => /* @__PURE__ */ jsxs("li", { style: { display: "flex", gap: "0.75rem", alignItems: "center" }, children: [
       li.image_url ? /* @__PURE__ */ jsx(
@@ -2149,11 +2316,11 @@ function OrderLines({
           li.quantity
         ] })
       ] }),
-      /* @__PURE__ */ jsx("span", { style: { fontVariantNumeric: "tabular-nums" }, children: formatCents(li.total_with_tax_cents, order.currency, locale) })
+      /* @__PURE__ */ jsx("span", { style: { fontVariantNumeric: "tabular-nums" }, children: formatCents(li.total_with_tax_cents, order.currency, loc) })
     ] }, li.id)),
     order.fee_lines.map((f, i) => /* @__PURE__ */ jsxs("li", { style: { display: "flex", gap: "0.75rem", alignItems: "center" }, children: [
       /* @__PURE__ */ jsx("span", { style: { flex: 1, minWidth: 0 }, children: /* @__PURE__ */ jsx("span", { style: { display: "block", fontWeight: 500 }, children: f.title }) }),
-      /* @__PURE__ */ jsx("span", { style: { fontVariantNumeric: "tabular-nums" }, children: formatCents(f.total_with_tax_cents, order.currency, locale) })
+      /* @__PURE__ */ jsx("span", { style: { fontVariantNumeric: "tabular-nums" }, children: formatCents(f.total_with_tax_cents, order.currency, loc) })
     ] }, `fee-${i}`))
   ] });
 }
@@ -2162,9 +2329,10 @@ function OrderTotals({
   locale
 }) {
   const tr = useT();
+  const loc = useFormatLocale(locale);
   const t = order.totals;
   const c = order.currency;
-  const money = (cents) => formatCents(cents, c, locale);
+  const money = (cents) => formatCents(cents, c, loc);
   return /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "0.5rem" }, children: [
     /* @__PURE__ */ jsx(Row3, { label: tr("totals.subtotal"), value: money(t.subtotal_cents) }),
     t.discount_cents > 0 ? /* @__PURE__ */ jsx(Row3, { label: tr("totals.discount"), value: `\u2212${money(t.discount_cents)}`, muted: true }) : null,
@@ -2270,6 +2438,7 @@ function OrderStatusPage({
   statusToken,
   order: initial,
   onContactSupport,
+  payHref,
   locale
 }) {
   const t = useT();
@@ -2321,6 +2490,7 @@ function OrderStatusPage({
         /* @__PURE__ */ jsxs(Card, { title: t("order.payment"), children: [
           /* @__PURE__ */ jsx(Line, { label: t("order.method"), value: order.payment.method ?? "\u2014" }),
           /* @__PURE__ */ jsx(Line, { label: t("order.status"), value: order.payment.status }),
+          order.payment.token && payHref ? /* @__PURE__ */ jsx("a", { href: payHref(order.payment.token), style: { color: "var(--nv-brand)", fontWeight: 500 }, children: t("payment.finish") }) : null,
           order.payment.invoice_available && order.payment.invoice_url ? /* @__PURE__ */ jsx("a", { href: order.payment.invoice_url, style: { color: "var(--nv-brand)" }, children: t("order.downloadInvoice") }) : null
         ] }),
         order.actions.can_contact_support && onContactSupport ? /* @__PURE__ */ jsx(
@@ -2372,6 +2542,265 @@ function Line({ label, value }) {
     /* @__PURE__ */ jsx("span", { style: { textAlign: "right" }, children: value })
   ] });
 }
+function TransferInstructions({
+  instructions: i,
+  locale
+}) {
+  const t = useT();
+  const loc = useFormatLocale(locale);
+  const account = i.iban || i.account_number;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      style: {
+        display: "flex",
+        flexWrap: "wrap",
+        gap: "1.25rem",
+        alignItems: "flex-start",
+        padding: "1rem",
+        borderRadius: "var(--nv-radius)",
+        border: "1px solid var(--nv-border)"
+      },
+      children: [
+        /* @__PURE__ */ jsxs("dl", { style: { flex: "1 1 15rem", margin: 0, display: "flex", flexDirection: "column", gap: "0.7rem" }, children: [
+          account ? /* @__PURE__ */ jsx(CopyRow, { label: t("payment.account"), value: account }) : null,
+          i.beneficiary_name ? /* @__PURE__ */ jsx(Row4, { label: t("payment.beneficiary"), value: i.beneficiary_name }) : null,
+          /* @__PURE__ */ jsx(CopyRow, { label: t("payment.variableSymbol"), value: i.variable_symbol }),
+          /* @__PURE__ */ jsx(
+            Row4,
+            {
+              label: t("payment.amount"),
+              value: formatCents(i.amount_cents, i.currency, loc),
+              strong: true
+            }
+          )
+        ] }),
+        i.qr_svg_data_uri ? /* @__PURE__ */ jsxs("figure", { style: { margin: 0, textAlign: "center" }, children: [
+          /* @__PURE__ */ jsx(
+            "img",
+            {
+              src: i.qr_svg_data_uri,
+              alt: t("payment.qrAlt"),
+              width: 148,
+              height: 148,
+              style: { display: "block", borderRadius: "var(--nv-radius)" }
+            }
+          ),
+          /* @__PURE__ */ jsx("figcaption", { style: { fontSize: "0.75rem", color: "var(--nv-muted)", marginTop: "0.4rem" }, children: t("payment.qrCaption") })
+        ] }) : null,
+        i.instructions ? /* @__PURE__ */ jsx("p", { style: { flexBasis: "100%", margin: 0, fontSize: "0.8125rem", color: "var(--nv-muted)" }, children: i.instructions }) : null
+      ]
+    }
+  );
+}
+function Row4({
+  label,
+  value,
+  strong
+}) {
+  return /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "0.1rem" }, children: [
+    /* @__PURE__ */ jsx("dt", { style: { fontSize: "0.75rem", color: "var(--nv-muted)" }, children: label }),
+    /* @__PURE__ */ jsx(
+      "dd",
+      {
+        style: {
+          margin: 0,
+          fontWeight: strong ? 600 : 500,
+          fontVariantNumeric: "tabular-nums"
+        },
+        children: value
+      }
+    )
+  ] });
+}
+function CopyRow({ label, value }) {
+  const t = useT();
+  const [copied, setCopied] = React10.useState(false);
+  React10.useEffect(() => {
+    if (!copied) return;
+    const id = setTimeout(() => setCopied(false), 1800);
+    return () => clearTimeout(id);
+  }, [copied]);
+  async function copy() {
+    try {
+      await navigator.clipboard.writeText(value);
+      setCopied(true);
+    } catch {
+    }
+  }
+  return /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "0.1rem" }, children: [
+    /* @__PURE__ */ jsx("dt", { style: { fontSize: "0.75rem", color: "var(--nv-muted)" }, children: label }),
+    /* @__PURE__ */ jsxs("dd", { style: { margin: 0, display: "flex", alignItems: "center", gap: "0.5rem" }, children: [
+      /* @__PURE__ */ jsx("span", { style: { fontWeight: 500, fontVariantNumeric: "tabular-nums" }, children: value }),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          onClick: () => void copy(),
+          style: {
+            font: "inherit",
+            fontSize: "0.75rem",
+            cursor: "pointer",
+            padding: "0.15rem 0.5rem",
+            borderRadius: "var(--nv-radius)",
+            border: "1px solid var(--nv-border)",
+            background: "transparent",
+            color: "var(--nv-muted)"
+          },
+          children: copied ? t("payment.copied") : t("payment.copy")
+        }
+      )
+    ] })
+  ] });
+}
+var HANDOFF_TTL_MS = 30 * 60 * 1e3;
+var POLL_MS = 2e3;
+var POLL_ATTEMPTS = 6;
+var BLOCKED_MESSAGE = {
+  order_cancelled: "payment.blocked.orderCancelled",
+  already_paid: "payment.blocked.alreadyPaid",
+  authorization_held: "payment.blocked.authorizationHeld",
+  document_issued: "payment.blocked.documentIssued"
+};
+function handoffKey(token) {
+  return `nv_payment_handoff_${token}`;
+}
+function rememberHandoff(token) {
+  try {
+    sessionStorage.setItem(handoffKey(token), String(Date.now()));
+  } catch {
+  }
+}
+function consumeHandoff(token) {
+  try {
+    const raw = sessionStorage.getItem(handoffKey(token));
+    if (!raw) return false;
+    const fresh = Date.now() - Number(raw) < HANDOFF_TTL_MS;
+    if (!fresh) sessionStorage.removeItem(handoffKey(token));
+    return fresh;
+  } catch {
+    return false;
+  }
+}
+function forgetHandoff(token) {
+  try {
+    sessionStorage.removeItem(handoffKey(token));
+  } catch {
+  }
+}
+function PaymentPage({
+  token,
+  payment: initial,
+  returnUrl,
+  cancelUrl,
+  statusHref,
+  locale,
+  onPaid
+}) {
+  const t = useT();
+  const loc = useFormatLocale(locale);
+  const { payment, methods, loading, busy, error, reload, selectMethod, startPayment } = usePayment(token, initial);
+  const [verifying, setVerifying] = React10.useState(false);
+  React10.useEffect(() => {
+    if (token) setVerifying(consumeHandoff(token));
+  }, [token]);
+  const settled = payment != null && !payment.can_pay && payment.blocked_reason === "already_paid";
+  React10.useEffect(() => {
+    if (!verifying || !token || settled) return;
+    let attempts = 0;
+    const id = setInterval(() => {
+      attempts += 1;
+      if (attempts > POLL_ATTEMPTS) {
+        setVerifying(false);
+        forgetHandoff(token);
+        clearInterval(id);
+        return;
+      }
+      void reload();
+    }, POLL_MS);
+    return () => clearInterval(id);
+  }, [verifying, token, settled, reload]);
+  React10.useEffect(() => {
+    if (!settled || !token || !payment) return;
+    setVerifying(false);
+    forgetHandoff(token);
+    onPaid?.(payment);
+  }, [settled, token, payment, onPaid]);
+  if (!token) return null;
+  if (payment == null) {
+    return /* @__PURE__ */ jsx(Shell2, { children: /* @__PURE__ */ jsx("p", { style: { margin: 0, color: "var(--nv-muted)" }, children: loading ? t("payment.loading") : t("payment.loadError") }) });
+  }
+  const money = (cents) => formatCents(cents, payment.currency, loc);
+  if (settled) {
+    return /* @__PURE__ */ jsxs(Shell2, { title: t("payment.paidTitle"), children: [
+      /* @__PURE__ */ jsx("p", { style: { margin: 0 }, children: t("payment.paidBody", { order: payment.order_name ?? payment.order_number }) }),
+      /* @__PURE__ */ jsx(Amount, { label: t("payment.paidAmount"), value: money(payment.total_cents) }),
+      statusHref ? /* @__PURE__ */ jsx(Link, { href: statusHref, children: t("order.trackOrder") }) : null
+    ] });
+  }
+  if (payment.blocked_reason) {
+    return /* @__PURE__ */ jsxs(Shell2, { title: t("payment.blockedTitle"), children: [
+      /* @__PURE__ */ jsx("p", { style: { margin: 0 }, children: t(BLOCKED_MESSAGE[payment.blocked_reason]) }),
+      statusHref ? /* @__PURE__ */ jsx(Link, { href: statusHref, children: t("order.trackOrder") }) : null
+    ] });
+  }
+  if (verifying) {
+    return /* @__PURE__ */ jsx(Shell2, { title: t("payment.verifyingTitle"), children: /* @__PURE__ */ jsx("p", { style: { margin: 0, color: "var(--nv-muted)" }, children: t("payment.verifyingBody") }) });
+  }
+  const isBank = payment.category === "bank";
+  const isGateway = payment.category === "gateway";
+  async function pay() {
+    if (!token) return;
+    rememberHandoff(token);
+    const url = await startPayment({ returnUrl, cancelUrl });
+    if (url) {
+      window.location.assign(url);
+      return;
+    }
+    forgetHandoff(token);
+    await reload();
+  }
+  return /* @__PURE__ */ jsxs(Shell2, { title: t("payment.title", { order: payment.order_name ?? payment.order_number }), children: [
+    /* @__PURE__ */ jsx(Amount, { label: t("payment.amountDue"), value: money(payment.amount_due_cents) }),
+    methods.length > 0 ? /* @__PURE__ */ jsx(
+      PaymentMethodPicker,
+      {
+        methods,
+        value: payment.method,
+        onSelect: (method) => void selectMethod(method),
+        currency: payment.currency,
+        locale: loc,
+        disabled: busy,
+        label: t("payment.methodLabel")
+      }
+    ) : null,
+    isBank && payment.instructions ? /* @__PURE__ */ jsx(TransferInstructions, { instructions: payment.instructions, locale: loc }) : null,
+    !isBank ? /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsx(Button, { onClick: () => void pay(), busy, children: t("payment.payNow") }),
+      isGateway ? /* @__PURE__ */ jsx("p", { style: { fontSize: "0.8125rem", color: "var(--nv-muted)", marginTop: "0.6rem" }, children: t("checkout.gatewayRedirectNote") }) : null
+    ] }) : null,
+    error ? /* @__PURE__ */ jsx("p", { role: "alert", style: { margin: 0, color: "var(--nv-danger, #b3261e)" }, children: t("payment.actionError") }) : null,
+    statusHref ? /* @__PURE__ */ jsx(Link, { href: statusHref, children: t("order.trackOrder") }) : null
+  ] });
+}
+function Shell2({
+  title,
+  children
+}) {
+  return /* @__PURE__ */ jsxs("section", { style: { display: "flex", flexDirection: "column", gap: "1rem", maxWidth: "34rem" }, children: [
+    title ? /* @__PURE__ */ jsx("h1", { style: { margin: 0, fontSize: "1.25rem", fontWeight: 600 }, children: title }) : null,
+    children
+  ] });
+}
+function Amount({ label, value }) {
+  return /* @__PURE__ */ jsxs("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "baseline" }, children: [
+    /* @__PURE__ */ jsx("span", { style: { color: "var(--nv-muted)" }, children: label }),
+    /* @__PURE__ */ jsx("strong", { style: { fontSize: "1.35rem", fontVariantNumeric: "tabular-nums" }, children: value })
+  ] });
+}
+function Link({ href, children }) {
+  return /* @__PURE__ */ jsx("a", { href, style: { color: "var(--nv-brand)", fontSize: "0.875rem" }, children });
+}
 var AccountContext = React10.createContext(null);
 function AccountProvider({ children }) {
   const client = useStorefront();
@@ -2974,6 +3403,6 @@ function OrganizationJsonLd({
   return /* @__PURE__ */ jsx(JsonLd, { data });
 }
 
-export { AccountDashboard, AccountProvider, AddToCart, AddressBook, AddressForm, AvailabilityFilter, BackInStockForm, BreadcrumbJsonLd, CartDrawer, CartLineItem, CartProvider, CartSummary, CheckoutFlow, CheckoutProvider, CollectionPage, I18nProvider, JsonLd, LoginForm, MarketSwitcher, NeviosProvider, OrderConfirmation, OrderHistory, OrderStatusPage, OrderSummary, OrganizationJsonLd, PaymentSection, PriceMoney, PriceRangeFilter, ProductCard, ProductDetailPage, ProductGallery, ProductJsonLd, ProfileEditor, ShippingPicker, SortSelect, StockBadge, TagFilter, ThemeProvider, VariantPicker, absoluteUrl, bundledMessages, cs, en, formatCents, formatMoney, serializeJsonLd, stripHtml, themeToCssVars, useAccount, useCart, useCheckout, useI18n, useMagicLinkVerify, useOrderStatus, useStorefront, useStorefrontOptional, useT };
+export { AccountDashboard, AccountProvider, AddToCart, AddressBook, AddressForm, AvailabilityFilter, BackInStockForm, BreadcrumbJsonLd, CartDrawer, CartLineItem, CartProvider, CartSummary, CheckoutFlow, CheckoutProvider, CollectionPage, I18nProvider, JsonLd, LoginForm, MarketSwitcher, NeviosProvider, OrderConfirmation, OrderHistory, OrderLines, OrderStatusPage, OrderSummary, OrderTotals, OrganizationJsonLd, PaymentMethodPicker, PaymentPage, PaymentSection, PhaseTimeline, PriceMoney, PriceRangeFilter, ProductCard, ProductDetailPage, ProductGallery, ProductJsonLd, ProfileEditor, ShippingPicker, SortSelect, StatusBanner, StockBadge, TagFilter, ThemeProvider, TransferInstructions, VariantPicker, absoluteUrl, bundledMessages, cs, en, formatCents, formatMoney, isTerminal, serializeJsonLd, stripHtml, themeToCssVars, useAccount, useCart, useCheckout, useI18n, useMagicLinkVerify, useOrderStatus, usePayment, useStorefront, useStorefrontOptional, useT };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map