@nevios/storefront-kit 1.2.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
@@ -226,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.",
@@ -407,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.",
@@ -491,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(
@@ -511,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;
@@ -635,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(
@@ -723,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;
@@ -767,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();
@@ -868,7 +896,7 @@ function ProductDetailPage({
   locale,
   addToCart
 }) {
-  const [variant, setVariant] = React10.useState(
+  const [variant, setVariant] = React19.useState(
     product.variants[0] ?? null
   );
   return /* @__PURE__ */ jsxs(
@@ -1100,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 {
@@ -1118,7 +1146,7 @@ function CartProvider({ children }) {
     },
     []
   );
-  const refresh = React10.useCallback(async () => {
+  const refresh = React19.useCallback(async () => {
     setLoading(true);
     try {
       setCart(await client.cart.get());
@@ -1126,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,
@@ -1144,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>.");
   }
@@ -1158,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(
@@ -1435,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 {
@@ -1461,7 +1489,7 @@ function CheckoutProvider({
     },
     []
   );
-  const refresh = React10.useCallback(async () => {
+  const refresh = React19.useCallback(async () => {
     setLoading(true);
     try {
       setCheckout(await client.checkout.get());
@@ -1470,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");
@@ -1496,7 +1524,7 @@ function CheckoutProvider({
     },
     [checkout, client, run]
   );
-  const value = React10.useMemo(
+  const value = React19.useMemo(
     () => ({
       checkout,
       loading,
@@ -1521,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>.");
   }
@@ -1680,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;
@@ -1734,11 +1777,11 @@ function ShippingPicker({
   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) => {
@@ -1766,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, 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
-          ] })
+          children: /* @__PURE__ */ jsx("span", { style: { display: "flex", flexDirection: "column" }, children: /* @__PURE__ */ jsx("span", { style: { fontWeight: 500 }, children: q.label }) })
         },
         q.rate_id
       );
@@ -1784,15 +1823,6 @@ 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,
@@ -1836,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) => {
@@ -1976,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) {
@@ -2106,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 {
@@ -2121,7 +2151,7 @@ function useOrderStatus(statusToken, initial) {
       setLoading(false);
     }
   }, [client, statusToken]);
-  React10.useEffect(() => {
+  React19.useEffect(() => {
     if (initial) return;
     void load();
   }, [load, initial]);
@@ -2129,12 +2159,12 @@ function useOrderStatus(statusToken, initial) {
 }
 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 () => {
+  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 {
@@ -2151,7 +2181,7 @@ function usePayment(token, initial) {
       setLoading(false);
     }
   }, [client, token]);
-  React10.useEffect(() => {
+  React19.useEffect(() => {
     if (!token) return;
     if (initial && initial.token === token) {
       setPayment(initial);
@@ -2160,7 +2190,7 @@ function usePayment(token, initial) {
     }
     void load();
   }, [token, load]);
-  const selectMethod = React10.useCallback(
+  const selectMethod = React19.useCallback(
     async (method) => {
       if (!token) return null;
       setBusy(true);
@@ -2178,7 +2208,7 @@ function usePayment(token, initial) {
     },
     [client, token]
   );
-  const startPayment = React10.useCallback(
+  const startPayment = React19.useCallback(
     async (input) => {
       if (!token) return null;
       setBusy(true);
@@ -2615,8 +2645,8 @@ function Row4({
 }
 function CopyRow({ label, value }) {
   const t = useT();
-  const [copied, setCopied] = React10.useState(false);
-  React10.useEffect(() => {
+  const [copied, setCopied] = React19.useState(false);
+  React19.useEffect(() => {
     if (!copied) return;
     const id = setTimeout(() => setCopied(false), 1800);
     return () => clearTimeout(id);
@@ -2700,12 +2730,12 @@ function PaymentPage({
   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(() => {
+  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";
-  React10.useEffect(() => {
+  React19.useEffect(() => {
     if (!verifying || !token || settled) return;
     let attempts = 0;
     const id = setInterval(() => {
@@ -2720,7 +2750,7 @@ function PaymentPage({
     }, POLL_MS);
     return () => clearInterval(id);
   }, [verifying, token, settled, reload]);
-  React10.useEffect(() => {
+  React19.useEffect(() => {
     if (!settled || !token || !payment) return;
     setVerifying(false);
     forgetHandoff(token);
@@ -2801,27 +2831,32 @@ function Amount({ label, value }) {
 function Link({ href, children }) {
   return /* @__PURE__ */ jsx("a", { href, style: { color: "var(--nv-brand)", fontSize: "0.875rem" }, children });
 }
-var AccountContext = React10.createContext(null);
+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);
@@ -2834,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>.");
   }
@@ -2847,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");
@@ -2860,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);
     }
@@ -2910,6 +2949,7 @@ function LoginForm({ verifyPath = "/account/verify", onSent }) {
             }
           )
         ] }),
+        error ? /* @__PURE__ */ jsx("p", { role: "alert", children: t("account.signInError") }) : null,
         /* @__PURE__ */ jsx(
           "button",
           {
@@ -2971,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);
@@ -3005,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: {
@@ -3052,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 ?? "",
@@ -3155,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) {
@@ -3219,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({
@@ -3299,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");
 }
@@ -3403,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, 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 };
+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