@nevios/storefront-kit 1.2.0 → 1.4.0

package/dist/index.js

@@ -1,14 +1,14 @@
-import * as React10 from 'react';
+import * as React27 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 = React27.createContext(null);
 function NeviosProvider({ client, children }) {
   return /* @__PURE__ */ jsx(StorefrontContext.Provider, { value: client, children });
 }
 function useStorefront() {
-  const client = React10.useContext(StorefrontContext);
+  const client = React27.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 React27.useContext(StorefrontContext);
 }
 var DEFAULTS = {
   brand: "#111111",
@@ -53,7 +53,7 @@ function ThemeProvider({
   as: Tag = "div"
 }) {
   const style = themeToCssVars(theme);
-  return React10.createElement(
+  return React27.createElement(
     Tag,
     { "data-nevios-theme": "", style },
     children
@@ -62,6 +62,16 @@ function ThemeProvider({
 
 // src/i18n/en.ts
 var en = {
+  "subscriptions.purchaseOption": "Purchase option",
+  "subscriptions.empty": "You have no subscriptions yet.",
+  "subscriptions.status.active": "Active",
+  "subscriptions.status.paused": "Paused",
+  "subscriptions.status.pending": "Awaiting payment",
+  "subscriptions.status.cancelled": "Cancelled",
+  "subscriptions.title": "Subscription",
+  "subscriptions.consent": "I agree to the recurring price, delivery schedule and terms shown above.",
+  "subscriptions.eachDelivery": "For each delivery",
+  "subscriptions.once": "One-time purchase",
   // common
   "common.free": "Free",
   "common.close": "Close",
@@ -226,6 +236,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.",
@@ -264,6 +288,16 @@ var en = {
 
 // src/i18n/cs.ts
 var cs = {
+  "subscriptions.purchaseOption": "Zp\u016Fsob n\xE1kupu",
+  "subscriptions.empty": "Zat\xEDm nem\xE1te \u017E\xE1dn\xE9 p\u0159edplatn\xE9.",
+  "subscriptions.status.active": "Aktivn\xED",
+  "subscriptions.status.paused": "Pozastaveno",
+  "subscriptions.status.pending": "\u010Cek\xE1 na platbu",
+  "subscriptions.status.cancelled": "Zru\u0161eno",
+  "subscriptions.title": "P\u0159edplatn\xE9",
+  "subscriptions.consent": "Souhlas\xEDm s uvedenou opakovanou cenou, pl\xE1nem doru\u010Den\xED a podm\xEDnkami.",
+  "subscriptions.eachDelivery": "Za ka\u017Ed\xE9 doru\u010Den\xED",
+  "subscriptions.once": "Jednor\xE1zov\xFD n\xE1kup",
   "common.free": "Zdarma",
   "common.close": "Zav\u0159\xEDt",
   "common.loadingShort": "\u2026",
@@ -407,6 +441,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 +539,13 @@ function makeI18n(locale, messages) {
   return { locale, messages, t };
 }
 var DEFAULT_I18N = makeI18n("en", en);
-var I18nContext = React10.createContext(null);
+var I18nContext = React27.createContext(null);
 function I18nProvider({
   locale,
   messages,
   children
 }) {
-  const value = React10.useMemo(() => {
+  const value = React27.useMemo(() => {
     const lang = langOf(locale);
     if (locale && !(lang in BUNDLED) && !messages) {
       devWarn(
@@ -511,7 +559,7 @@ function I18nProvider({
   return /* @__PURE__ */ jsx(I18nContext.Provider, { value, children });
 }
 function useI18n() {
-  return React10.useContext(I18nContext) ?? DEFAULT_I18N;
+  return React27.useContext(I18nContext) ?? DEFAULT_I18N;
 }
 function useT() {
   return useI18n().t;
@@ -635,7 +683,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] = React27.useState(0);
   const imageBase = useStorefrontOptional()?.imageBase;
   if (media.length === 0) {
     return /* @__PURE__ */ jsx(
@@ -723,10 +771,10 @@ function matchVariant(product, selected) {
   ) ?? null;
 }
 function VariantPicker({ product, onChange }) {
-  const [selected, setSelected] = React10.useState(
+  const [selected, setSelected] = React27.useState(
     () => product.variants[0]?.options ?? []
   );
-  React10.useEffect(() => {
+  React27.useEffect(() => {
     onChange?.(matchVariant(product, selected));
   }, [product, selected]);
   if (product.options.length === 0) return null;
@@ -767,8 +815,8 @@ function BackInStockForm({
 }) {
   const t = useT();
   const client = useStorefront();
-  const [email, setEmail] = React10.useState(defaultEmail);
-  const [state, setState] = React10.useState("idle");
+  const [email, setEmail] = React27.useState(defaultEmail);
+  const [state, setState] = React27.useState("idle");
   if (!variant || variant.availability?.status !== "out_of_stock") return null;
   async function submit(e) {
     e.preventDefault();
@@ -868,7 +916,7 @@ function ProductDetailPage({
   locale,
   addToCart
 }) {
-  const [variant, setVariant] = React10.useState(
+  const [variant, setVariant] = React27.useState(
     product.variants[0] ?? null
   );
   return /* @__PURE__ */ jsxs(
@@ -1100,12 +1148,26 @@ function TagFilter({ tags, selected = [], onChange }) {
     }) })
   ] });
 }
-var CartContext = React10.createContext(null);
+function PurchaseOptions({ plans, value, onChange, disabled, locale }) {
+  const t = useT();
+  const loc = useFormatLocale(locale);
+  const name = React27.useId();
+  const options = [{ id: null, name: t("subscriptions.once"), price: void 0 }, ...plans];
+  return /* @__PURE__ */ jsxs("fieldset", { disabled, style: { border: 0, padding: 0, margin: 0, display: "grid", gap: "0.5rem" }, children: [
+    /* @__PURE__ */ jsx("legend", { style: { marginBottom: "0.5rem", fontWeight: 500 }, children: t("subscriptions.purchaseOption") }),
+    options.map((option) => /* @__PURE__ */ jsxs("label", { style: { display: "flex", gap: "0.6rem", alignItems: "center", padding: "0.75rem", border: `1px solid ${value === option.id ? "var(--nv-fg)" : "var(--nv-border)"}`, borderRadius: "var(--nv-radius)", cursor: "pointer" }, children: [
+      /* @__PURE__ */ jsx("input", { type: "radio", name, checked: value === option.id, onChange: () => onChange(option.id) }),
+      /* @__PURE__ */ jsx("span", { style: { flex: 1 }, children: option.name }),
+      option.price ? /* @__PURE__ */ jsx("span", { children: formatCents(option.price.amount_cents, option.price.currency, loc) }) : null
+    ] }, option.id ?? "once"))
+  ] });
+}
+var CartContext = React27.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] = React27.useState(null);
+  const [loading, setLoading] = React27.useState(false);
+  const run = React27.useCallback(
     async (op) => {
       setLoading(true);
       try {
@@ -1118,7 +1180,7 @@ function CartProvider({ children }) {
     },
     []
   );
-  const refresh = React10.useCallback(async () => {
+  const refresh = React27.useCallback(async () => {
     setLoading(true);
     try {
       setCart(await client.cart.get());
@@ -1126,16 +1188,17 @@ function CartProvider({ children }) {
       setLoading(false);
     }
   }, [client]);
-  React10.useEffect(() => {
+  React27.useEffect(() => {
     void refresh();
   }, [refresh]);
-  const value = React10.useMemo(
+  const value = React27.useMemo(
     () => ({
       cart,
       loading,
       itemCount: cart?.totals.item_count ?? 0,
       addLine: (input) => run(() => client.cart.addLine(input)),
       updateLine: (lineId, quantity) => run(() => client.cart.updateLine(lineId, quantity)),
+      clearSubscription: () => run(() => client.cart.clearSubscription()),
       removeLine: (lineId) => run(() => client.cart.removeLine(lineId)),
       refresh
     }),
@@ -1144,7 +1207,7 @@ function CartProvider({ children }) {
   return /* @__PURE__ */ jsx(CartContext.Provider, { value, children });
 }
 function useCart() {
-  const ctx = React10.useContext(CartContext);
+  const ctx = React27.useContext(CartContext);
   if (!ctx) {
     throw new Error("useCart must be used inside <CartProvider>.");
   }
@@ -1153,13 +1216,14 @@ function useCart() {
 function AddToCart({
   variant,
   quantity = 1,
+  subscriptionPlanId,
   children,
   onAdded
 }) {
   const t = useT();
   const { addLine } = useCart();
-  const [busy, setBusy] = React10.useState(false);
-  const [error, setError] = React10.useState(null);
+  const [busy, setBusy] = React27.useState(false);
+  const [error, setError] = React27.useState(null);
   const disabled = variant == null || busy;
   return /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "0.5rem" }, children: [
     /* @__PURE__ */ jsx(
@@ -1172,7 +1236,7 @@ function AddToCart({
           setBusy(true);
           setError(null);
           try {
-            await addLine({ variant_id: variant.id, quantity });
+            await addLine({ variant_id: variant.id, quantity, ...subscriptionPlanId ? { subscription_plan_id: subscriptionPlanId } : {} });
             onAdded?.();
           } catch (err) {
             const code = err?.code;
@@ -1201,7 +1265,7 @@ function AddToCart({
 function CartLineItem({ line, locale }) {
   const t = useT();
   const loc = useFormatLocale(locale);
-  const { updateLine, removeLine } = useCart();
+  const { cart, updateLine, removeLine } = useCart();
   return /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: "0.85rem", alignItems: "flex-start", padding: "0.75rem 0" }, children: [
     /* @__PURE__ */ jsx(
       "div",
@@ -1230,6 +1294,7 @@ function CartLineItem({ line, locale }) {
     /* @__PURE__ */ jsxs("div", { style: { flex: 1, minWidth: 0 }, children: [
       /* @__PURE__ */ jsx("div", { style: { fontWeight: 500, lineHeight: 1.3 }, children: line.title }),
       line.variant_title ? /* @__PURE__ */ jsx("div", { style: { color: "var(--nv-muted)", fontSize: "0.875em" }, children: line.variant_title }) : null,
+      line.subscription_plan_id ? /* @__PURE__ */ jsx("div", { style: { color: "var(--nv-muted)", fontSize: "0.875em" }, children: cart?.subscription?.plan?.name ?? t("subscriptions.title") }) : null,
       /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: "0.75rem", marginTop: "0.5rem" }, children: [
         /* @__PURE__ */ jsxs(
           "div",
@@ -1308,7 +1373,7 @@ function CartSummary({
   const { cart } = useCart();
   if (cart == null) return null;
   const t = cart.totals;
-  const empty = t.item_count === 0;
+  const empty = t.item_count === 0 || cart.subscription?.available === false;
   const cta = checkoutLabel ?? tr("cart.checkout");
   const ctaStyle = {
     display: "block",
@@ -1329,6 +1394,7 @@ function CartSummary({
     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, loc), strong: true }),
+    cart.subscription?.error ? /* @__PURE__ */ jsx("p", { role: "alert", style: { margin: 0 }, children: cart.subscription.error.message }) : null,
     checkoutHref && !empty ? /* @__PURE__ */ jsx("a", { href: checkoutHref, style: ctaStyle, children: cta }) : /* @__PURE__ */ jsx("button", { type: "button", disabled: empty, onClick: onCheckout, style: ctaStyle, children: cta })
   ] });
 }
@@ -1435,15 +1501,15 @@ function CartDrawer({
     }
   );
 }
-var CheckoutContext = React10.createContext(null);
+var CheckoutContext = React27.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] = React27.useState(null);
+  const [loading, setLoading] = React27.useState(false);
+  const [error, setError] = React27.useState(null);
+  const run = React27.useCallback(
     async (op, store) => {
       setLoading(true);
       try {
@@ -1461,23 +1527,36 @@ function CheckoutProvider({
     },
     []
   );
-  const refresh = React10.useCallback(async () => {
+  const refresh = React27.useCallback(async () => {
     setLoading(true);
     try {
       setCheckout(await client.checkout.get());
       setError(null);
+    } catch (err) {
+      setError(err instanceof Error ? err : new Error(String(err)));
     } finally {
       setLoading(false);
     }
   }, [client]);
-  React10.useEffect(() => {
+  React27.useEffect(() => {
     void refresh();
   }, [refresh]);
-  const pay = React10.useCallback(
+  const pay = React27.useCallback(
     async (opts = {}) => {
       const co = checkout;
       if (!co) throw new Error("pay() called before a checkout exists");
       const idempotencyKey = opts.idempotencyKey ?? co.token;
+      if (co.subscription) {
+        if (co.subscription.subscription_id) {
+          const payment = await run(() => client.checkout.subscriptionPayment(), () => null);
+          setCheckout(await client.checkout.get());
+          return { kind: "subscription_payment", payment };
+        }
+        if (!opts.subscription) throw new Error("Accept the current subscription terms before paying");
+        const subscription = await run(() => client.checkout.enrollSubscription(opts.subscription), () => null);
+        setCheckout(await client.checkout.get());
+        return { kind: "subscription", subscription };
+      }
       if (co.payment_category === "gateway") {
         const start = await run(
           () => client.checkout.startPayment({ return_url: opts.returnUrl, cancel_url: opts.cancelUrl }),
@@ -1496,11 +1575,18 @@ function CheckoutProvider({
     },
     [checkout, client, run]
   );
-  const value = React10.useMemo(
+  const value = React27.useMemo(
     () => ({
       checkout,
       loading,
       error,
+      selectSubscription: (selection) => run(async () => {
+        const quote = await client.checkout.selectSubscription(selection);
+        setCheckout(await client.checkout.get());
+        return quote;
+      }, () => null),
+      clearSubscription: () => run(() => client.checkout.clearSubscription(), (r) => r),
+      reviewSubscription: () => run(() => client.checkout.reviewSubscription(), () => null),
       create: (cartToken, input) => run(() => client.checkout.create(cartToken, input), (r) => r),
       setAddress: (input) => run(() => client.checkout.setAddress(input), (r) => r),
       shippingQuotes: () => run(() => client.checkout.shippingQuotes(), () => null),
@@ -1521,7 +1607,7 @@ function CheckoutProvider({
   return /* @__PURE__ */ jsx(CheckoutContext.Provider, { value, children });
 }
 function useCheckout() {
-  const ctx = React10.useContext(CheckoutContext);
+  const ctx = React27.useContext(CheckoutContext);
   if (!ctx) {
     throw new Error("useCheckout must be used inside <CheckoutProvider>.");
   }
@@ -1680,10 +1766,25 @@ function AddressForm({
 }) {
   const t = useT();
   const { checkout, setAddress, loading } = useCheckout();
-  const [form, setForm] = React10.useState(
+  const [form, setForm] = React27.useState(
     () => seed(checkout?.email ?? null, checkout?.shipping_address ?? null)
   );
-  const set = (key) => (e) => setForm((f) => ({ ...f, [key]: e.target.value }));
+  const touched = React27.useRef(/* @__PURE__ */ new Set());
+  React27.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 +1835,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] = React27.useState(null);
+  const [selected, setSelected] = React27.useState(null);
+  const [fetching, setFetching] = React27.useState(true);
   const addressKey = checkout?.shipping_address ? `${checkout.shipping_address.country_code}:${checkout.shipping_address.postal_code}` : null;
-  React10.useEffect(() => {
+  React27.useEffect(() => {
     let live = true;
     setFetching(true);
     shippingQuotes().then((qs) => {
@@ -1766,17 +1867,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 +1881,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,
@@ -1826,20 +1914,45 @@ function PaymentMethodPicker({
     }
   );
 }
+function SubscriptionTerms({ quote, checked, onChange, locale }) {
+  const t = useT();
+  const loc = useFormatLocale(locale);
+  return /* @__PURE__ */ jsxs("fieldset", { style: { margin: 0, padding: "1rem", border: "1px solid var(--nv-border)", borderRadius: "var(--nv-radius)" }, children: [
+    /* @__PURE__ */ jsx("legend", { children: t("subscriptions.title") }),
+    /* @__PURE__ */ jsxs("p", { style: { margin: "0 0 0.5rem", fontWeight: 500 }, children: [
+      t("subscriptions.eachDelivery"),
+      ": ",
+      formatCents(quote.recurring_total_cents, quote.currency, loc)
+    ] }),
+    /* @__PURE__ */ jsx("p", { style: { margin: "0 0 0.75rem", whiteSpace: "pre-wrap" }, children: quote.terms_text }),
+    /* @__PURE__ */ jsxs("label", { style: { display: "flex", alignItems: "flex-start", gap: "0.6rem", cursor: "pointer" }, children: [
+      /* @__PURE__ */ jsx("input", { type: "checkbox", checked, onChange: (event) => onChange(event.target.checked) }),
+      /* @__PURE__ */ jsx("span", { children: t("subscriptions.consent") })
+    ] })
+  ] });
+}
 function PaymentSection({
   title,
   returnUrl,
   cancelUrl,
   onOrderPlaced,
-  locale
+  locale,
+  onSubscriptionPayment
 }) {
   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 { checkout, paymentMethods, setPaymentMethod, pay, loading, refresh } = useCheckout();
+  const [methods, setMethods] = React27.useState(null);
+  const [fetching, setFetching] = React27.useState(true);
   const selected = checkout?.payment_method ?? null;
-  React10.useEffect(() => {
+  const [acceptedDigest, setAcceptedDigest] = React27.useState(null);
+  const [actionBusy, setActionBusy] = React27.useState(false);
+  const quote = checkout?.subscription?.quote;
+  const needsConsent = Boolean(checkout?.subscription?.requires_consent);
+  const clickInFlight = React27.useRef(false);
+  const [actionError, setActionError] = React27.useState(null);
+  const accepted = Boolean(quote && acceptedDigest === quote.quote_digest);
+  React27.useEffect(() => {
     let live = true;
     setFetching(true);
     paymentMethods().then((ms) => {
@@ -1852,12 +1965,30 @@ function PaymentSection({
     return () => {
       live = false;
     };
-  }, []);
+  }, [checkout?.token, checkout?.shipping_method_id, checkout?.subscription?.selection.plan_id]);
   const selectedMethod = methods?.find((m) => m.method === selected) ?? null;
   const isGateway = selectedMethod?.category === "gateway";
   async function placeOrder() {
-    const result = await pay({ returnUrl, cancelUrl });
-    if (result.kind === "order") onOrderPlaced?.(result.checkout);
+    if (clickInFlight.current) return;
+    clickInFlight.current = true;
+    setActionBusy(true);
+    setActionError(null);
+    try {
+      const result = await pay({
+        returnUrl,
+        cancelUrl,
+        ...needsConsent && quote && accepted ? { subscription: { quote, consent: true } } : {}
+      });
+      if (result.kind === "subscription") await onSubscriptionPayment?.(result.subscription.payment);
+      if (result.kind === "subscription_payment") await onSubscriptionPayment?.(result.payment);
+      if (result.kind === "subscription" || result.kind === "subscription_payment") await refresh();
+      if (result.kind === "order") onOrderPlaced?.(result.checkout);
+    } catch (err) {
+      setActionError(err instanceof Error ? err.message : String(err));
+    } finally {
+      clickInFlight.current = false;
+      setActionBusy(false);
+    }
   }
   if (fetching && methods == null) {
     return /* @__PURE__ */ jsx(Section, { title: heading, children: /* @__PURE__ */ jsx("p", { style: { color: "var(--nv-muted)", margin: 0 }, children: t("checkout.loadingPayment") }) });
@@ -1877,9 +2008,12 @@ function PaymentSection({
         label: heading
       }
     ),
+    quote && needsConsent ? /* @__PURE__ */ jsx(SubscriptionTerms, { locale, quote, checked: accepted, onChange: (value) => setAcceptedDigest(value && quote ? quote.quote_digest : null) }) : null,
+    checkout?.subscription?.error ? /* @__PURE__ */ jsx("p", { role: "alert", children: checkout.subscription.error.message }) : null,
+    actionError ? /* @__PURE__ */ jsx("p", { role: "alert", children: actionError }) : null,
     /* @__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
+      /* @__PURE__ */ jsx(Button, { onClick: placeOrder, busy: loading || actionBusy, disabled: selected == null || Boolean(checkout?.subscription) && (needsConsent && (!accepted || !quote) || !onSubscriptionPayment || !checkout?.subscription?.available), children: isGateway ? t("checkout.payNow") : t("checkout.placeOrder") }),
+      isGateway && !checkout?.subscription ? /* @__PURE__ */ jsx("p", { style: { fontSize: "0.8125rem", color: "var(--nv-muted)", marginTop: "0.6rem" }, children: t("checkout.gatewayRedirectNote") }) : null
     ] })
   ] });
 }
@@ -1967,6 +2101,7 @@ function reachedStep(checkout) {
 }
 function CheckoutFlow({
   cartToken,
+  onSubscriptionPayment,
   onOrderPlaced,
   emptyState,
   renderConfirmation,
@@ -1976,19 +2111,19 @@ 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] = React27.useState("address");
+  const [bootstrapped, setBootstrapped] = React27.useState(false);
+  React27.useEffect(() => {
     if (checkout || !cartToken || bootstrapped) return;
     setBootstrapped(true);
     void create(cartToken).catch(() => {
     });
   }, [checkout, cartToken, bootstrapped, create]);
   const serverStep = reachedStep(checkout);
-  React10.useEffect(() => {
+  React27.useEffect(() => {
     setStep((cur) => rank(serverStep) > rank(cur) ? serverStep : cur);
   }, [serverStep]);
-  if (checkout?.order_id) {
+  if (checkout?.order_id && (!checkout.subscription || checkout.phase === "success")) {
     return /* @__PURE__ */ jsx(Shell, { summary: /* @__PURE__ */ jsx(OrderSummary, { locale }), children: renderConfirmation ? renderConfirmation(checkout) : /* @__PURE__ */ jsx(DefaultConfirmation, { checkout }) });
   }
   if (!checkout) {
@@ -2002,6 +2137,7 @@ function CheckoutFlow({
     step === "address" ? /* @__PURE__ */ jsx(AddressForm, { onComplete: () => setStep("shipping") }) : step === "shipping" ? /* @__PURE__ */ jsx(ShippingPicker, { onComplete: () => setStep("payment"), locale }) : /* @__PURE__ */ jsx(
       PaymentSection,
       {
+        onSubscriptionPayment,
         returnUrl,
         cancelUrl,
         onOrderPlaced,
@@ -2106,10 +2242,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] = React27.useState(initial ?? null);
+  const [loading, setLoading] = React27.useState(false);
+  const [error, setError] = React27.useState(null);
+  const load = React27.useCallback(async () => {
     if (!statusToken) return;
     setLoading(true);
     try {
@@ -2121,7 +2257,7 @@ function useOrderStatus(statusToken, initial) {
       setLoading(false);
     }
   }, [client, statusToken]);
-  React10.useEffect(() => {
+  React27.useEffect(() => {
     if (initial) return;
     void load();
   }, [load, initial]);
@@ -2129,12 +2265,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] = React27.useState(initial ?? null);
+  const [methods, setMethods] = React27.useState([]);
+  const [loading, setLoading] = React27.useState(false);
+  const [busy, setBusy] = React27.useState(false);
+  const [error, setError] = React27.useState(null);
+  const load = React27.useCallback(async () => {
     if (!token) return;
     setLoading(true);
     try {
@@ -2151,7 +2287,7 @@ function usePayment(token, initial) {
       setLoading(false);
     }
   }, [client, token]);
-  React10.useEffect(() => {
+  React27.useEffect(() => {
     if (!token) return;
     if (initial && initial.token === token) {
       setPayment(initial);
@@ -2160,7 +2296,7 @@ function usePayment(token, initial) {
     }
     void load();
   }, [token, load]);
-  const selectMethod = React10.useCallback(
+  const selectMethod = React27.useCallback(
     async (method) => {
       if (!token) return null;
       setBusy(true);
@@ -2178,7 +2314,7 @@ function usePayment(token, initial) {
     },
     [client, token]
   );
-  const startPayment = React10.useCallback(
+  const startPayment = React27.useCallback(
     async (input) => {
       if (!token) return null;
       setBusy(true);
@@ -2615,8 +2751,8 @@ function Row4({
 }
 function CopyRow({ label, value }) {
   const t = useT();
-  const [copied, setCopied] = React10.useState(false);
-  React10.useEffect(() => {
+  const [copied, setCopied] = React27.useState(false);
+  React27.useEffect(() => {
     if (!copied) return;
     const id = setTimeout(() => setCopied(false), 1800);
     return () => clearTimeout(id);
@@ -2700,12 +2836,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] = React27.useState(false);
+  React27.useEffect(() => {
     if (token) setVerifying(consumeHandoff(token));
   }, [token]);
   const settled = payment != null && !payment.can_pay && payment.blocked_reason === "already_paid";
-  React10.useEffect(() => {
+  React27.useEffect(() => {
     if (!verifying || !token || settled) return;
     let attempts = 0;
     const id = setInterval(() => {
@@ -2720,7 +2856,7 @@ function PaymentPage({
     }, POLL_MS);
     return () => clearInterval(id);
   }, [verifying, token, settled, reload]);
-  React10.useEffect(() => {
+  React27.useEffect(() => {
     if (!settled || !token || !payment) return;
     setVerifying(false);
     forgetHandoff(token);
@@ -2801,27 +2937,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 = React27.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] = React27.useState(null);
+  const [loading, setLoading] = React27.useState(true);
+  const [error, setError] = React27.useState(false);
+  const refresh = React27.useCallback(async () => {
     setLoading(true);
+    setError(false);
     try {
       setCustomer(await client.account.me());
+    } catch {
+      setError(true);
     } finally {
       setLoading(false);
     }
   }, [client]);
-  React10.useEffect(() => {
+  React27.useEffect(() => {
     void refresh();
   }, [refresh]);
-  const value = React10.useMemo(
+  const value = React27.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 +2975,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 = React27.useContext(AccountContext);
   if (!ctx) {
     throw new Error("useAccount must be used inside <AccountProvider>.");
   }
@@ -2847,9 +2988,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] = React27.useState("idle");
+  const done = React27.useRef(false);
+  React27.useEffect(() => {
     if (!token || done.current) return;
     done.current = true;
     setStatus("verifying");
@@ -2860,18 +3001,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] = React27.useState("");
+  const [busy, setBusy] = React27.useState(false);
+  const [sent, setSent] = React27.useState(false);
+  const [error, setError] = React27.useState(false);
+  const [devLink, setDevLink] = React27.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 +3055,7 @@ function LoginForm({ verifyPath = "/account/verify", onSent }) {
             }
           )
         ] }),
+        error ? /* @__PURE__ */ jsx("p", { role: "alert", children: t("account.signInError") }) : null,
         /* @__PURE__ */ jsx(
           "button",
           {
@@ -2971,20 +3117,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] = React27.useState(null);
+  const [error, setError] = React27.useState(false);
+  const [nextCursor, setNextCursor] = React27.useState(null);
+  const [pageLoading, setPageLoading] = React27.useState(false);
+  const [reload, setReload] = React27.useState(0);
+  const [reordering, setReordering] = React27.useState(null);
+  const [notice, setNotice] = React27.useState(null);
+  React27.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 +3178,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 +3229,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] = React27.useState(() => ({
     first_name: initial?.first_name ?? "",
     last_name: initial?.last_name ?? "",
     company: initial?.company ?? "",
@@ -3155,17 +3333,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] = React27.useState(null);
+  const [mode, setMode] = React27.useState({ kind: "list" });
+  const [busy, setBusy] = React27.useState(false);
+  const load = React27.useCallback(() => {
     if (!signedIn) {
       setAddresses([]);
       return;
     }
     client.account.addresses().then(setAddresses).catch(() => setAddresses([]));
   }, [signedIn, client]);
-  React10.useEffect(() => {
+  React27.useEffect(() => {
     load();
   }, [load]);
   async function run(fn) {
@@ -3219,10 +3397,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] = React27.useState(false);
+  const [busy, setBusy] = React27.useState(false);
+  const [error, setError] = React27.useState(false);
+  const [form, setForm] = React27.useState({});
   if (!customer) return null;
   function startEdit() {
     setForm({
@@ -3299,6 +3477,176 @@ function ProfileEditor() {
     ] })
   ] });
 }
+function AccountSecurity() {
+  const client = useStorefront();
+  const account = useAccount();
+  const t = useT();
+  const [sessions, setSessions] = React27.useState(null);
+  const [email, setEmail] = React27.useState("");
+  const [busy, setBusy] = React27.useState(false);
+  const [notice, setNotice] = React27.useState(null);
+  const [confirmClose, setConfirmClose] = React27.useState(false);
+  const [retry, setRetry] = React27.useState(0);
+  React27.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 useCustomerSubscriptions() {
+  const client = useStorefront();
+  const { customer } = useAccount();
+  const [dataOwner, setDataOwner] = React27.useState(void 0);
+  const [subscriptions, setSubscriptions] = React27.useState([]);
+  const [loading, setLoading] = React27.useState(false);
+  const [error, setError] = React27.useState(null);
+  const generation = React27.useRef(0);
+  const owner = customer?.id;
+  const api = client.account.subscriptions;
+  const refresh = React27.useCallback(async () => {
+    const current = ++generation.current;
+    setError(null);
+    if (!owner) {
+      setSubscriptions([]);
+      setLoading(false);
+      return;
+    }
+    setLoading(true);
+    try {
+      const rows = await api.list();
+      if (current === generation.current) {
+        setSubscriptions(rows);
+        setDataOwner(owner);
+        setError(null);
+      }
+    } catch (err) {
+      if (current === generation.current) setError(err instanceof Error ? err : new Error(String(err)));
+    } finally {
+      if (current === generation.current) setLoading(false);
+    }
+  }, [owner, api]);
+  React27.useEffect(() => {
+    setSubscriptions([]);
+    void refresh();
+    return () => {
+      generation.current++;
+    };
+  }, [refresh]);
+  return { subscriptions: dataOwner === owner ? subscriptions : [], loading, error, refresh, api };
+}
+function useCustomerSubscription(id) {
+  const client = useStorefront();
+  const { customer } = useAccount();
+  const [dataKey, setDataKey] = React27.useState("");
+  const [subscription, setSubscription] = React27.useState(null);
+  const [loading, setLoading] = React27.useState(false);
+  const [error, setError] = React27.useState(null);
+  const generation = React27.useRef(0);
+  const owner = customer?.id;
+  const api = client.account.subscriptions;
+  const refresh = React27.useCallback(async () => {
+    const current = ++generation.current;
+    setError(null);
+    if (!owner || !id) {
+      setSubscription(null);
+      setLoading(false);
+      return;
+    }
+    setLoading(true);
+    try {
+      const row = await api.management(id);
+      if (current === generation.current) {
+        setSubscription(row);
+        setDataKey(`${owner}:${id}`);
+        setError(null);
+      }
+    } catch (err) {
+      if (current === generation.current) setError(err instanceof Error ? err : new Error(String(err)));
+    } finally {
+      if (current === generation.current) setLoading(false);
+    }
+  }, [owner, id, api]);
+  React27.useEffect(() => {
+    setSubscription(null);
+    void refresh();
+    return () => {
+      generation.current++;
+    };
+  }, [refresh]);
+  return { subscription: dataKey === `${owner}:${id}` ? subscription : null, loading, error, refresh, api };
+}
+function SubscriptionList({ href, locale }) {
+  const t = useT();
+  const { subscriptions, loading, error } = useCustomerSubscriptions();
+  return /* @__PURE__ */ jsxs("section", { style: { fontFamily: "var(--nv-font)", color: "var(--nv-fg)" }, children: [
+    /* @__PURE__ */ jsx("h2", { style: { fontSize: "1.125rem", fontWeight: 500 }, children: t("subscriptions.title") }),
+    loading ? /* @__PURE__ */ jsx("p", { children: t("checkout.loading") }) : error ? /* @__PURE__ */ jsx("p", { role: "alert", children: error.message }) : subscriptions.length === 0 ? /* @__PURE__ */ jsx("p", { children: t("subscriptions.empty") }) : /* @__PURE__ */ jsx("ul", { style: { listStyle: "none", margin: 0, padding: 0 }, children: subscriptions.map((sub) => /* @__PURE__ */ jsx("li", { style: { borderBottom: "1px solid var(--nv-border)", padding: "0.8rem 0" }, children: /* @__PURE__ */ jsxs("a", { href: href(sub.id), style: { color: "inherit", display: "flex", justifyContent: "space-between", gap: "1rem", flexWrap: "wrap" }, children: [
+      /* @__PURE__ */ jsxs("span", { children: [
+        "#",
+        sub.id
+      ] }),
+      /* @__PURE__ */ jsx("span", { children: t(`subscriptions.status.${sub.status}`) }),
+      sub.status === "active" && sub.next_at ? /* @__PURE__ */ jsx("time", { dateTime: sub.next_at, children: new Date(sub.next_at).toLocaleDateString(locale) }) : null
+    ] }) }, sub.id)) })
+  ] });
+}
 function serializeJsonLd(data) {
   return JSON.stringify(data).replace(/</g, "\\u003c").replace(/>/g, "\\u003e").replace(/&/g, "\\u0026");
 }
@@ -3403,6 +3751,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, PurchaseOptions, ShippingPicker, SortSelect, StatusBanner, StockBadge, SubscriptionList, SubscriptionTerms, TagFilter, ThemeProvider, TransferInstructions, VariantPicker, absoluteUrl, bundledMessages, cs, en, formatCents, formatMoney, isTerminal, serializeJsonLd, stripHtml, themeToCssVars, useAccount, useCart, useCheckout, useCustomerSubscription, useCustomerSubscriptions, useI18n, useMagicLinkVerify, useOrderStatus, usePayment, useStorefront, useStorefrontOptional, useT };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map