@nevios/storefront-kit 1.0.0 → 1.3.0

package/dist/index.js

@@ -1,14 +1,14 @@
-import * as React10 from 'react';
+import * as React19 from 'react';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { imageSrcSet } from '@nevios/storefront-js';
+import { imageSrcSet, StorefrontError } from '@nevios/storefront-js';
 
 // src/provider.tsx
-var StorefrontContext = React10.createContext(null);
+var StorefrontContext = React19.createContext(null);
 function NeviosProvider({ client, children }) {
   return /* @__PURE__ */ jsx(StorefrontContext.Provider, { value: client, children });
 }
 function useStorefront() {
-  const client = React10.useContext(StorefrontContext);
+  const client = React19.useContext(StorefrontContext);
   if (!client) {
     throw new Error(
       "useStorefront must be used inside <NeviosProvider>. Wrap your app root with it."
@@ -17,7 +17,7 @@ function useStorefront() {
   return client;
 }
 function useStorefrontOptional() {
-  return React10.useContext(StorefrontContext);
+  return React19.useContext(StorefrontContext);
 }
 var DEFAULTS = {
   brand: "#111111",
@@ -53,7 +53,7 @@ function ThemeProvider({
   as: Tag = "div"
 }) {
   const style = themeToCssVars(theme);
-  return React10.createElement(
+  return React19.createElement(
     Tag,
     { "data-nevios-theme": "", style },
     children
@@ -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.",
@@ -195,6 +226,20 @@ var en = {
   "account.signOut": "Sign out",
   "account.greeting": "Signed in as {email}",
   "account.orders": "Your orders",
+  "account.loadError": "Could not load your account. Please try again.",
+  "account.retry": "Try again",
+  "account.loadMore": "Load more",
+  "account.signInError": "Could not request a sign-in link. Please try again shortly.",
+  "account.security": "Account security",
+  "account.newEmail": "New email",
+  "account.changeEmail": "Verify new email",
+  "account.recentLogin": "Sign in again by email before making this change.",
+  "account.sessions": "Sessions",
+  "account.currentSession": "Current session",
+  "account.revokeSession": "Sign out",
+  "account.closeAccount": "Close account",
+  "account.closeWarning": "Closing your account signs out all devices and disables account access. Orders and invoices are retained. Contact the shop to restore access.",
+  "account.confirmClose": "Confirm account closure",
   "account.noOrders": "No orders yet.",
   "account.addresses": "Saved addresses",
   "account.noAddresses": "No saved addresses yet.",
@@ -335,6 +380,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",
@@ -349,6 +421,20 @@ var cs = {
   "account.signOut": "Odhl\xE1sit se",
   "account.greeting": "P\u0159ihl\xE1\u0161en jako {email}",
   "account.orders": "Va\u0161e objedn\xE1vky",
+  "account.loadError": "\xDAdaje se nepoda\u0159ilo na\u010D\xEDst. Zkuste to znovu.",
+  "account.retry": "Zkusit znovu",
+  "account.loadMore": "Na\u010D\xEDst dal\u0161\xED",
+  "account.signInError": "P\u0159ihl\xE1\u0161en\xED se nepoda\u0159ilo zah\xE1jit. Zkuste to za chv\xEDli znovu.",
+  "account.security": "Zabezpe\u010Den\xED \xFA\u010Dtu",
+  "account.newEmail": "Nov\xFD e-mail",
+  "account.changeEmail": "Ov\u011B\u0159it nov\xFD e-mail",
+  "account.recentLogin": "Pro tuto zm\u011Bnu se nejprve znovu p\u0159ihlaste p\u0159es e-mail.",
+  "account.sessions": "P\u0159ihl\xE1\u0161en\xED",
+  "account.currentSession": "Toto p\u0159ihl\xE1\u0161en\xED",
+  "account.revokeSession": "Odhl\xE1sit",
+  "account.closeAccount": "Uzav\u0159\xEDt \xFA\u010Det",
+  "account.closeWarning": "Uzav\u0159en\xEDm \xFA\u010Dtu ukon\u010D\xEDte p\u0159\xEDstup a odhl\xE1s\xEDte v\u0161echna za\u0159\xEDzen\xED. Objedn\xE1vky a doklady z\u016Fstanou zachov\xE1ny. Obnoven\xED p\u0159\xEDstupu \u0159e\u0161\xED podpora obchodu.",
+  "account.confirmClose": "Potvrdit uzav\u0159en\xED \xFA\u010Dtu",
   "account.noOrders": "Zat\xEDm \u017E\xE1dn\xE9 objedn\xE1vky.",
   "account.addresses": "Ulo\u017Een\xE9 adresy",
   "account.noAddresses": "Zat\xEDm \u017E\xE1dn\xE9 ulo\u017Een\xE9 adresy.",
@@ -433,13 +519,13 @@ function makeI18n(locale, messages) {
   return { locale, messages, t };
 }
 var DEFAULT_I18N = makeI18n("en", en);
-var I18nContext = React10.createContext(null);
+var I18nContext = React19.createContext(null);
 function I18nProvider({
   locale,
   messages,
   children
 }) {
-  const value = React10.useMemo(() => {
+  const value = React19.useMemo(() => {
     const lang = langOf(locale);
     if (locale && !(lang in BUNDLED) && !messages) {
       devWarn(
@@ -453,7 +539,7 @@ function I18nProvider({
   return /* @__PURE__ */ jsx(I18nContext.Provider, { value, children });
 }
 function useI18n() {
-  return React10.useContext(I18nContext) ?? DEFAULT_I18N;
+  return React19.useContext(I18nContext) ?? DEFAULT_I18N;
 }
 function useT() {
   return useI18n().t;
@@ -577,7 +663,7 @@ function ProductCard({ product, href, locale }) {
 var MAIN_WIDTHS = [600, 800, 1e3];
 var THUMB_WIDTHS = [56, 112];
 function ProductGallery({ media, alt }) {
-  const [active, setActive] = React10.useState(0);
+  const [active, setActive] = React19.useState(0);
   const imageBase = useStorefrontOptional()?.imageBase;
   if (media.length === 0) {
     return /* @__PURE__ */ jsx(
@@ -665,10 +751,10 @@ function matchVariant(product, selected) {
   ) ?? null;
 }
 function VariantPicker({ product, onChange }) {
-  const [selected, setSelected] = React10.useState(
+  const [selected, setSelected] = React19.useState(
     () => product.variants[0]?.options ?? []
   );
-  React10.useEffect(() => {
+  React19.useEffect(() => {
     onChange?.(matchVariant(product, selected));
   }, [product, selected]);
   if (product.options.length === 0) return null;
@@ -709,8 +795,8 @@ function BackInStockForm({
 }) {
   const t = useT();
   const client = useStorefront();
-  const [email, setEmail] = React10.useState(defaultEmail);
-  const [state, setState] = React10.useState("idle");
+  const [email, setEmail] = React19.useState(defaultEmail);
+  const [state, setState] = React19.useState("idle");
   if (!variant || variant.availability?.status !== "out_of_stock") return null;
   async function submit(e) {
     e.preventDefault();
@@ -810,7 +896,7 @@ function ProductDetailPage({
   locale,
   addToCart
 }) {
-  const [variant, setVariant] = React10.useState(
+  const [variant, setVariant] = React19.useState(
     product.variants[0] ?? null
   );
   return /* @__PURE__ */ jsxs(
@@ -1042,12 +1128,12 @@ function TagFilter({ tags, selected = [], onChange }) {
     }) })
   ] });
 }
-var CartContext = React10.createContext(null);
+var CartContext = React19.createContext(null);
 function CartProvider({ children }) {
   const client = useStorefront();
-  const [cart, setCart] = React10.useState(null);
-  const [loading, setLoading] = React10.useState(false);
-  const run = React10.useCallback(
+  const [cart, setCart] = React19.useState(null);
+  const [loading, setLoading] = React19.useState(false);
+  const run = React19.useCallback(
     async (op) => {
       setLoading(true);
       try {
@@ -1060,7 +1146,7 @@ function CartProvider({ children }) {
     },
     []
   );
-  const refresh = React10.useCallback(async () => {
+  const refresh = React19.useCallback(async () => {
     setLoading(true);
     try {
       setCart(await client.cart.get());
@@ -1068,10 +1154,10 @@ function CartProvider({ children }) {
       setLoading(false);
     }
   }, [client]);
-  React10.useEffect(() => {
+  React19.useEffect(() => {
     void refresh();
   }, [refresh]);
-  const value = React10.useMemo(
+  const value = React19.useMemo(
     () => ({
       cart,
       loading,
@@ -1086,7 +1172,7 @@ function CartProvider({ children }) {
   return /* @__PURE__ */ jsx(CartContext.Provider, { value, children });
 }
 function useCart() {
-  const ctx = React10.useContext(CartContext);
+  const ctx = React19.useContext(CartContext);
   if (!ctx) {
     throw new Error("useCart must be used inside <CartProvider>.");
   }
@@ -1100,8 +1186,8 @@ function AddToCart({
 }) {
   const t = useT();
   const { addLine } = useCart();
-  const [busy, setBusy] = React10.useState(false);
-  const [error, setError] = React10.useState(null);
+  const [busy, setBusy] = React19.useState(false);
+  const [error, setError] = React19.useState(null);
   const disabled = variant == null || busy;
   return /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "0.5rem" }, children: [
     /* @__PURE__ */ jsx(
@@ -1142,6 +1228,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 +1300,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 +1332,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 +1353,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 })
   ] });
 }
@@ -1375,15 +1463,15 @@ function CartDrawer({
     }
   );
 }
-var CheckoutContext = React10.createContext(null);
+var CheckoutContext = React19.createContext(null);
 function CheckoutProvider({
   children
 }) {
   const client = useStorefront();
-  const [checkout, setCheckout] = React10.useState(null);
-  const [loading, setLoading] = React10.useState(false);
-  const [error, setError] = React10.useState(null);
-  const run = React10.useCallback(
+  const [checkout, setCheckout] = React19.useState(null);
+  const [loading, setLoading] = React19.useState(false);
+  const [error, setError] = React19.useState(null);
+  const run = React19.useCallback(
     async (op, store) => {
       setLoading(true);
       try {
@@ -1401,7 +1489,7 @@ function CheckoutProvider({
     },
     []
   );
-  const refresh = React10.useCallback(async () => {
+  const refresh = React19.useCallback(async () => {
     setLoading(true);
     try {
       setCheckout(await client.checkout.get());
@@ -1410,10 +1498,10 @@ function CheckoutProvider({
       setLoading(false);
     }
   }, [client]);
-  React10.useEffect(() => {
+  React19.useEffect(() => {
     void refresh();
   }, [refresh]);
-  const pay = React10.useCallback(
+  const pay = React19.useCallback(
     async (opts = {}) => {
       const co = checkout;
       if (!co) throw new Error("pay() called before a checkout exists");
@@ -1436,7 +1524,7 @@ function CheckoutProvider({
     },
     [checkout, client, run]
   );
-  const value = React10.useMemo(
+  const value = React19.useMemo(
     () => ({
       checkout,
       loading,
@@ -1461,7 +1549,7 @@ function CheckoutProvider({
   return /* @__PURE__ */ jsx(CheckoutContext.Provider, { value, children });
 }
 function useCheckout() {
-  const ctx = React10.useContext(CheckoutContext);
+  const ctx = React19.useContext(CheckoutContext);
   if (!ctx) {
     throw new Error("useCheckout must be used inside <CheckoutProvider>.");
   }
@@ -1620,10 +1708,25 @@ function AddressForm({
 }) {
   const t = useT();
   const { checkout, setAddress, loading } = useCheckout();
-  const [form, setForm] = React10.useState(
+  const [form, setForm] = React19.useState(
     () => seed(checkout?.email ?? null, checkout?.shipping_address ?? null)
   );
-  const set = (key) => (e) => setForm((f) => ({ ...f, [key]: e.target.value }));
+  const touched = React19.useRef(/* @__PURE__ */ new Set());
+  React19.useEffect(() => {
+    const prefill = checkout?.customer_prefill;
+    const addresses = prefill?.addresses.filter((a) => !a.is_pickup);
+    const saved = addresses?.find((a) => a.is_default) ?? addresses?.[0];
+    const address = checkout?.shipping_address ?? (saved ? { ...saved, postal_code: saved.zip } : null);
+    const defaults = seed(checkout?.email ?? prefill?.email ?? null, address);
+    defaults.first_name || (defaults.first_name = prefill?.first_name ?? "");
+    defaults.last_name || (defaults.last_name = prefill?.last_name ?? "");
+    defaults.phone || (defaults.phone = prefill?.phone ?? "");
+    setForm((current) => Object.fromEntries(Object.entries(current).map(([key, value]) => [key, touched.current.has(key) ? value : value || defaults[key]])));
+  }, [checkout?.token]);
+  const set = (key) => (e) => {
+    touched.current.add(key);
+    setForm((f) => ({ ...f, [key]: e.target.value }));
+  };
   async function submit(e) {
     e.preventDefault();
     const { email, ...rest } = form;
@@ -1671,13 +1774,14 @@ 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);
-  const [selected, setSelected] = React10.useState(null);
-  const [fetching, setFetching] = React10.useState(true);
+  const [quotes, setQuotes] = React19.useState(null);
+  const [selected, setSelected] = React19.useState(null);
+  const [fetching, setFetching] = React19.useState(true);
   const addressKey = checkout?.shipping_address ? `${checkout.shipping_address.country_code}:${checkout.shipping_address.postal_code}` : null;
-  React10.useEffect(() => {
+  React19.useEffect(() => {
     let live = true;
     setFetching(true);
     shippingQuotes().then((qs) => {
@@ -1705,17 +1809,13 @@ function ShippingPicker({
   }
   return /* @__PURE__ */ jsxs(Section, { title: heading, children: [
     /* @__PURE__ */ jsx("div", { role: "radiogroup", style: { display: "flex", flexDirection: "column", gap: "0.6rem" }, children: quotes.map((q) => {
-      const days = estDays(q, t);
       return /* @__PURE__ */ jsx(
         SelectRow,
         {
           selected: selected === q.rate_id,
           onSelect: () => setSelected(q.rate_id),
-          trailing: q.is_free ? t("common.free") : formatCents(q.price_cents, q.currency, locale),
-          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
-          ] })
+          trailing: q.is_free ? t("common.free") : formatCents(q.price_cents, q.currency, loc),
+          children: /* @__PURE__ */ jsx("span", { style: { display: "flex", flexDirection: "column" }, children: /* @__PURE__ */ jsx("span", { style: { fontWeight: 500 }, children: q.label }) })
         },
         q.rate_id
       );
@@ -1723,14 +1823,38 @@ function ShippingPicker({
     /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(Button, { onClick: submit, busy: loading, disabled: selected == null, children: submitLabel ?? t("checkout.continueToPayment") }) })
   ] });
 }
-function estDays(q, t) {
-  const { estimated_days_min: lo, estimated_days_max: hi } = q;
-  if (lo == null && hi == null) return null;
-  if (lo != null && hi != null) {
-    return lo === hi ? t("shipping.days", { count: lo }) : t("shipping.daysRange", { min: lo, max: hi });
-  }
-  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,
@@ -1742,10 +1866,10 @@ function PaymentSection({
   const t = useT();
   const heading = title ?? t("checkout.payment");
   const { checkout, paymentMethods, setPaymentMethod, pay, loading } = useCheckout();
-  const [methods, setMethods] = React10.useState(null);
-  const [fetching, setFetching] = React10.useState(true);
+  const [methods, setMethods] = React19.useState(null);
+  const [fetching, setFetching] = React19.useState(true);
   const selected = checkout?.payment_method ?? null;
-  React10.useEffect(() => {
+  React19.useEffect(() => {
     let live = true;
     setFetching(true);
     paymentMethods().then((ms) => {
@@ -1772,19 +1896,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 +1919,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(
@@ -1883,16 +2006,16 @@ function CheckoutFlow({
 }) {
   const t = useT();
   const { checkout, loading, create } = useCheckout();
-  const [step, setStep] = React10.useState("address");
-  const [bootstrapped, setBootstrapped] = React10.useState(false);
-  React10.useEffect(() => {
+  const [step, setStep] = React19.useState("address");
+  const [bootstrapped, setBootstrapped] = React19.useState(false);
+  React19.useEffect(() => {
     if (checkout || !cartToken || bootstrapped) return;
     setBootstrapped(true);
     void create(cartToken).catch(() => {
     });
   }, [checkout, cartToken, bootstrapped, create]);
   const serverStep = reachedStep(checkout);
-  React10.useEffect(() => {
+  React19.useEffect(() => {
     setStep((cur) => rank(serverStep) > rank(cur) ? serverStep : cur);
   }, [serverStep]);
   if (checkout?.order_id) {
@@ -2013,10 +2136,10 @@ function DefaultConfirmation({ checkout }) {
 }
 function useOrderStatus(statusToken, initial) {
   const client = useStorefront();
-  const [order, setOrder] = React10.useState(initial ?? null);
-  const [loading, setLoading] = React10.useState(false);
-  const [error, setError] = React10.useState(null);
-  const load = React10.useCallback(async () => {
+  const [order, setOrder] = React19.useState(initial ?? null);
+  const [loading, setLoading] = React19.useState(false);
+  const [error, setError] = React19.useState(null);
+  const load = React19.useCallback(async () => {
     if (!statusToken) return;
     setLoading(true);
     try {
@@ -2028,12 +2151,85 @@ function useOrderStatus(statusToken, initial) {
       setLoading(false);
     }
   }, [client, statusToken]);
-  React10.useEffect(() => {
+  React19.useEffect(() => {
     if (initial) return;
     void load();
   }, [load, initial]);
   return { order, loading, error, reload: () => void load() };
 }
+function usePayment(token, initial) {
+  const client = useStorefront();
+  const [payment, setPayment] = React19.useState(initial ?? null);
+  const [methods, setMethods] = React19.useState([]);
+  const [loading, setLoading] = React19.useState(false);
+  const [busy, setBusy] = React19.useState(false);
+  const [error, setError] = React19.useState(null);
+  const load = React19.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]);
+  React19.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 = React19.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 = React19.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 +2325,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 +2346,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 +2359,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 +2468,7 @@ function OrderStatusPage({
   statusToken,
   order: initial,
   onContactSupport,
+  payHref,
   locale
 }) {
   const t = useT();
@@ -2321,6 +2520,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,27 +2572,291 @@ function Line({ label, value }) {
     /* @__PURE__ */ jsx("span", { style: { textAlign: "right" }, children: value })
   ] });
 }
-var AccountContext = React10.createContext(null);
+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] = React19.useState(false);
+  React19.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] = React19.useState(false);
+  React19.useEffect(() => {
+    if (token) setVerifying(consumeHandoff(token));
+  }, [token]);
+  const settled = payment != null && !payment.can_pay && payment.blocked_reason === "already_paid";
+  React19.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]);
+  React19.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 = React19.createContext(null);
 function AccountProvider({ children }) {
   const client = useStorefront();
-  const [customer, setCustomer] = React10.useState(null);
-  const [loading, setLoading] = React10.useState(true);
-  const refresh = React10.useCallback(async () => {
+  const [customer, setCustomer] = React19.useState(null);
+  const [loading, setLoading] = React19.useState(true);
+  const [error, setError] = React19.useState(false);
+  const refresh = React19.useCallback(async () => {
     setLoading(true);
+    setError(false);
     try {
       setCustomer(await client.account.me());
+    } catch {
+      setError(true);
     } finally {
       setLoading(false);
     }
   }, [client]);
-  React10.useEffect(() => {
+  React19.useEffect(() => {
     void refresh();
   }, [refresh]);
-  const value = React10.useMemo(
+  const value = React19.useMemo(
     () => ({
       customer,
       signedIn: customer != null,
       loading,
+      error,
       requestMagicLink: (email) => client.account.requestMagicLink(email),
       verify: async (token) => {
         const c = await client.account.verify(token);
@@ -2405,12 +2869,12 @@ function AccountProvider({ children }) {
       },
       refresh
     }),
-    [customer, loading, client, refresh]
+    [customer, loading, error, client, refresh]
   );
   return /* @__PURE__ */ jsx(AccountContext.Provider, { value, children });
 }
 function useAccount() {
-  const ctx = React10.useContext(AccountContext);
+  const ctx = React19.useContext(AccountContext);
   if (!ctx) {
     throw new Error("useAccount must be used inside <AccountProvider>.");
   }
@@ -2418,9 +2882,9 @@ function useAccount() {
 }
 function useMagicLinkVerify(token) {
   const { verify } = useAccount();
-  const [status, setStatus] = React10.useState("idle");
-  const done = React10.useRef(false);
-  React10.useEffect(() => {
+  const [status, setStatus] = React19.useState("idle");
+  const done = React19.useRef(false);
+  React19.useEffect(() => {
     if (!token || done.current) return;
     done.current = true;
     setStatus("verifying");
@@ -2431,18 +2895,22 @@ function useMagicLinkVerify(token) {
 function LoginForm({ verifyPath = "/account/verify", onSent }) {
   const t = useT();
   const { requestMagicLink } = useAccount();
-  const [email, setEmail] = React10.useState("");
-  const [busy, setBusy] = React10.useState(false);
-  const [sent, setSent] = React10.useState(false);
-  const [devLink, setDevLink] = React10.useState(null);
+  const [email, setEmail] = React19.useState("");
+  const [busy, setBusy] = React19.useState(false);
+  const [sent, setSent] = React19.useState(false);
+  const [error, setError] = React19.useState(false);
+  const [devLink, setDevLink] = React19.useState(null);
   async function submit(e) {
     e.preventDefault();
     setBusy(true);
+    setError(false);
     try {
       const r = await requestMagicLink(email);
       setSent(true);
       if (r.devToken) setDevLink(`${verifyPath}?token=${encodeURIComponent(r.devToken)}`);
       onSent?.(email);
+    } catch {
+      setError(true);
     } finally {
       setBusy(false);
     }
@@ -2481,6 +2949,7 @@ function LoginForm({ verifyPath = "/account/verify", onSent }) {
             }
           )
         ] }),
+        error ? /* @__PURE__ */ jsx("p", { role: "alert", children: t("account.signInError") }) : null,
         /* @__PURE__ */ jsx(
           "button",
           {
@@ -2542,20 +3011,47 @@ function OrderHistory({
   const loc = useFormatLocale(locale);
   const { signedIn } = useAccount();
   const client = useStorefront();
-  const [orders, setOrders] = React10.useState(null);
-  const [reordering, setReordering] = React10.useState(null);
-  const [notice, setNotice] = React10.useState(null);
-  React10.useEffect(() => {
+  const [orders, setOrders] = React19.useState(null);
+  const [error, setError] = React19.useState(false);
+  const [nextCursor, setNextCursor] = React19.useState(null);
+  const [pageLoading, setPageLoading] = React19.useState(false);
+  const [reload, setReload] = React19.useState(0);
+  const [reordering, setReordering] = React19.useState(null);
+  const [notice, setNotice] = React19.useState(null);
+  React19.useEffect(() => {
     let live = true;
     if (!signedIn) {
       setOrders([]);
       return;
     }
-    client.account.orders().then((o) => live && setOrders(o)).catch(() => live && setOrders([]));
+    setError(false);
+    setOrders(null);
+    client.account.ordersPage().then((page) => {
+      if (live) {
+        setOrders(page.orders);
+        setNextCursor(page.nextCursor);
+      }
+    }).catch(() => {
+      if (live) setError(true);
+    });
     return () => {
       live = false;
     };
-  }, [signedIn, client]);
+  }, [signedIn, client, reload]);
+  async function loadMore() {
+    if (!nextCursor || pageLoading) return;
+    setPageLoading(true);
+    setError(false);
+    try {
+      const page = await client.account.ordersPage({ beforeId: nextCursor });
+      setOrders((previous) => [...previous ?? [], ...page.orders]);
+      setNextCursor(page.nextCursor);
+    } catch {
+      setError(true);
+    } finally {
+      setPageLoading(false);
+    }
+  }
   async function reorder(statusToken) {
     setReordering(statusToken);
     setNotice(null);
@@ -2576,7 +3072,11 @@ function OrderHistory({
   }
   return /* @__PURE__ */ jsxs("section", { style: { display: "flex", flexDirection: "column", gap: "0.75rem" }, children: [
     /* @__PURE__ */ jsx("h2", { style: { margin: 0, fontSize: "1.1rem", fontWeight: 600 }, children: t("account.orders") }),
-    orders == null ? /* @__PURE__ */ jsx("p", { style: { color: "var(--nv-muted)", margin: 0 }, children: t("common.loadingShort") }) : orders.length === 0 ? /* @__PURE__ */ jsx("p", { style: { color: "var(--nv-muted)", margin: 0 }, children: t("account.noOrders") }) : /* @__PURE__ */ jsx("ul", { style: { listStyle: "none", margin: 0, padding: 0, display: "flex", flexDirection: "column", gap: "0.5rem" }, children: orders.map((o) => /* @__PURE__ */ jsxs(
+    error ? /* @__PURE__ */ jsxs("div", { role: "alert", children: [
+      /* @__PURE__ */ jsx("p", { children: t("account.loadError") }),
+      /* @__PURE__ */ jsx("button", { type: "button", onClick: () => orders ? void loadMore() : setReload((x) => x + 1), children: t("account.retry") })
+    ] }) : null,
+    orders == null ? error ? null : /* @__PURE__ */ jsx("p", { style: { color: "var(--nv-muted)", margin: 0 }, children: t("common.loadingShort") }) : orders.length === 0 ? /* @__PURE__ */ jsx("p", { style: { color: "var(--nv-muted)", margin: 0 }, children: t("account.noOrders") }) : /* @__PURE__ */ jsx("ul", { style: { listStyle: "none", margin: 0, padding: 0, display: "flex", flexDirection: "column", gap: "0.5rem" }, children: orders.map((o) => /* @__PURE__ */ jsxs(
       "li",
       {
         style: {
@@ -2623,12 +3123,13 @@ function OrderHistory({
         ]
       },
       o.status_token
-    )) })
+    )) }),
+    nextCursor ? /* @__PURE__ */ jsx("button", { type: "button", disabled: pageLoading, onClick: () => void loadMore(), children: pageLoading ? t("common.loadingShort") : t("account.loadMore") }) : null
   ] });
 }
 function AddressForm2({ initial, onSubmit, onCancel, busy }) {
   const t = useT();
-  const [form, setForm] = React10.useState(() => ({
+  const [form, setForm] = React19.useState(() => ({
     first_name: initial?.first_name ?? "",
     last_name: initial?.last_name ?? "",
     company: initial?.company ?? "",
@@ -2726,17 +3227,17 @@ function AddressBook() {
   const t = useT();
   const { signedIn } = useAccount();
   const client = useStorefront();
-  const [addresses, setAddresses] = React10.useState(null);
-  const [mode, setMode] = React10.useState({ kind: "list" });
-  const [busy, setBusy] = React10.useState(false);
-  const load = React10.useCallback(() => {
+  const [addresses, setAddresses] = React19.useState(null);
+  const [mode, setMode] = React19.useState({ kind: "list" });
+  const [busy, setBusy] = React19.useState(false);
+  const load = React19.useCallback(() => {
     if (!signedIn) {
       setAddresses([]);
       return;
     }
     client.account.addresses().then(setAddresses).catch(() => setAddresses([]));
   }, [signedIn, client]);
-  React10.useEffect(() => {
+  React19.useEffect(() => {
     load();
   }, [load]);
   async function run(fn) {
@@ -2790,10 +3291,10 @@ function ProfileEditor() {
   const t = useT();
   const client = useStorefront();
   const { customer, refresh } = useAccount();
-  const [editing, setEditing] = React10.useState(false);
-  const [busy, setBusy] = React10.useState(false);
-  const [error, setError] = React10.useState(false);
-  const [form, setForm] = React10.useState({});
+  const [editing, setEditing] = React19.useState(false);
+  const [busy, setBusy] = React19.useState(false);
+  const [error, setError] = React19.useState(false);
+  const [form, setForm] = React19.useState({});
   if (!customer) return null;
   function startEdit() {
     setForm({
@@ -2870,6 +3371,79 @@ function ProfileEditor() {
     ] })
   ] });
 }
+function AccountSecurity() {
+  const client = useStorefront();
+  const account = useAccount();
+  const t = useT();
+  const [sessions, setSessions] = React19.useState(null);
+  const [email, setEmail] = React19.useState("");
+  const [busy, setBusy] = React19.useState(false);
+  const [notice, setNotice] = React19.useState(null);
+  const [confirmClose, setConfirmClose] = React19.useState(false);
+  const [retry, setRetry] = React19.useState(0);
+  React19.useEffect(() => {
+    let live = true;
+    if (account.signedIn) client.account.sessions().then((s) => {
+      if (live) setSessions(s);
+    }).catch(() => {
+      if (live) setNotice(t("account.loadError"));
+    });
+    return () => {
+      live = false;
+    };
+  }, [client, account.signedIn, retry, t]);
+  async function act(operation) {
+    setBusy(true);
+    setNotice(null);
+    try {
+      await operation();
+    } catch (e) {
+      setNotice(e instanceof StorefrontError && e.status === 401 ? t("account.recentLogin") : t("account.loadError"));
+    } finally {
+      setBusy(false);
+    }
+  }
+  if (!account.signedIn) return null;
+  return /* @__PURE__ */ jsxs("section", { style: { display: "grid", gap: "0.75rem" }, children: [
+    /* @__PURE__ */ jsx("h2", { style: { margin: 0, fontSize: "1.1rem", fontWeight: 600 }, children: t("account.security") }),
+    notice ? /* @__PURE__ */ jsx("p", { role: "status", children: notice }) : null,
+    /* @__PURE__ */ jsxs(
+      "form",
+      {
+        style: { display: "flex", gap: "0.75rem", flexWrap: "wrap", alignItems: "end" },
+        onSubmit: (e) => {
+          e.preventDefault();
+          void act(async () => {
+            await client.account.requestEmailChange(email);
+            setNotice(t("account.checkEmail"));
+          });
+        },
+        children: [
+          /* @__PURE__ */ jsx(Field, { label: t("account.newEmail"), type: "email", required: true, value: email, onChange: (e) => setEmail(e.target.value) }),
+          /* @__PURE__ */ jsx(Button, { type: "submit", busy, children: t("account.changeEmail") })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx("h3", { children: t("account.sessions") }),
+    sessions ? sessions.map((s) => /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: "0.75rem", justifyContent: "space-between" }, children: [
+      /* @__PURE__ */ jsx("span", { children: s.current ? t("account.currentSession") : /* @__PURE__ */ jsx("time", { dateTime: s.created_at, children: s.created_at.slice(0, 10) }) }),
+      /* @__PURE__ */ jsx(Button, { busy, onClick: () => void act(async () => {
+        await client.account.revokeSession(s.id);
+        if (s.current) await account.logout();
+        else setSessions((old) => old?.filter((row) => row.id !== s.id) ?? null);
+      }), children: t("account.revokeSession") })
+    ] }, s.id)) : /* @__PURE__ */ jsx(Button, { onClick: () => setRetry((x) => x + 1), children: t("account.retry") }),
+    confirmClose ? /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsx("p", { children: t("account.closeWarning") }),
+      /* @__PURE__ */ jsx(Button, { busy, onClick: () => void act(async () => {
+        await client.account.close();
+        await account.refresh();
+      }), children: t("account.confirmClose") }),
+      " ",
+      /* @__PURE__ */ jsx(Button, { disabled: busy, onClick: () => setConfirmClose(false), children: t("account.cancel") })
+    ] }) : /* @__PURE__ */ jsx(Button, { disabled: busy, onClick: () => setConfirmClose(true), children: t("account.closeAccount") })
+  ] });
+}
 function serializeJsonLd(data) {
   return JSON.stringify(data).replace(/</g, "\\u003c").replace(/>/g, "\\u003e").replace(/&/g, "\\u0026");
 }
@@ -2974,6 +3548,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, AccountSecurity, 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