@nevios/storefront-kit 1.3.0 → 1.4.0

package/dist/index.js

@@ -1,14 +1,14 @@
-import * as React19 from 'react';
+import * as React27 from 'react';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { imageSrcSet, StorefrontError } from '@nevios/storefront-js';
 
 // src/provider.tsx
-var StorefrontContext = React19.createContext(null);
+var StorefrontContext = React27.createContext(null);
 function NeviosProvider({ client, children }) {
   return /* @__PURE__ */ jsx(StorefrontContext.Provider, { value: client, children });
 }
 function useStorefront() {
-  const client = React19.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 React19.useContext(StorefrontContext);
+  return React27.useContext(StorefrontContext);
 }
 var DEFAULTS = {
   brand: "#111111",
@@ -53,7 +53,7 @@ function ThemeProvider({
   as: Tag = "div"
 }) {
   const style = themeToCssVars(theme);
-  return React19.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",
@@ -278,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",
@@ -519,13 +539,13 @@ function makeI18n(locale, messages) {
   return { locale, messages, t };
 }
 var DEFAULT_I18N = makeI18n("en", en);
-var I18nContext = React19.createContext(null);
+var I18nContext = React27.createContext(null);
 function I18nProvider({
   locale,
   messages,
   children
 }) {
-  const value = React19.useMemo(() => {
+  const value = React27.useMemo(() => {
     const lang = langOf(locale);
     if (locale && !(lang in BUNDLED) && !messages) {
       devWarn(
@@ -539,7 +559,7 @@ function I18nProvider({
   return /* @__PURE__ */ jsx(I18nContext.Provider, { value, children });
 }
 function useI18n() {
-  return React19.useContext(I18nContext) ?? DEFAULT_I18N;
+  return React27.useContext(I18nContext) ?? DEFAULT_I18N;
 }
 function useT() {
   return useI18n().t;
@@ -663,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] = React19.useState(0);
+  const [active, setActive] = React27.useState(0);
   const imageBase = useStorefrontOptional()?.imageBase;
   if (media.length === 0) {
     return /* @__PURE__ */ jsx(
@@ -751,10 +771,10 @@ function matchVariant(product, selected) {
   ) ?? null;
 }
 function VariantPicker({ product, onChange }) {
-  const [selected, setSelected] = React19.useState(
+  const [selected, setSelected] = React27.useState(
     () => product.variants[0]?.options ?? []
   );
-  React19.useEffect(() => {
+  React27.useEffect(() => {
     onChange?.(matchVariant(product, selected));
   }, [product, selected]);
   if (product.options.length === 0) return null;
@@ -795,8 +815,8 @@ function BackInStockForm({
 }) {
   const t = useT();
   const client = useStorefront();
-  const [email, setEmail] = React19.useState(defaultEmail);
-  const [state, setState] = React19.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();
@@ -896,7 +916,7 @@ function ProductDetailPage({
   locale,
   addToCart
 }) {
-  const [variant, setVariant] = React19.useState(
+  const [variant, setVariant] = React27.useState(
     product.variants[0] ?? null
   );
   return /* @__PURE__ */ jsxs(
@@ -1128,12 +1148,26 @@ function TagFilter({ tags, selected = [], onChange }) {
     }) })
   ] });
 }
-var CartContext = React19.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] = React19.useState(null);
-  const [loading, setLoading] = React19.useState(false);
-  const run = React19.useCallback(
+  const [cart, setCart] = React27.useState(null);
+  const [loading, setLoading] = React27.useState(false);
+  const run = React27.useCallback(
     async (op) => {
       setLoading(true);
       try {
@@ -1146,7 +1180,7 @@ function CartProvider({ children }) {
     },
     []
   );
-  const refresh = React19.useCallback(async () => {
+  const refresh = React27.useCallback(async () => {
     setLoading(true);
     try {
       setCart(await client.cart.get());
@@ -1154,16 +1188,17 @@ function CartProvider({ children }) {
       setLoading(false);
     }
   }, [client]);
-  React19.useEffect(() => {
+  React27.useEffect(() => {
     void refresh();
   }, [refresh]);
-  const value = React19.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
     }),
@@ -1172,7 +1207,7 @@ function CartProvider({ children }) {
   return /* @__PURE__ */ jsx(CartContext.Provider, { value, children });
 }
 function useCart() {
-  const ctx = React19.useContext(CartContext);
+  const ctx = React27.useContext(CartContext);
   if (!ctx) {
     throw new Error("useCart must be used inside <CartProvider>.");
   }
@@ -1181,13 +1216,14 @@ function useCart() {
 function AddToCart({
   variant,
   quantity = 1,
+  subscriptionPlanId,
   children,
   onAdded
 }) {
   const t = useT();
   const { addLine } = useCart();
-  const [busy, setBusy] = React19.useState(false);
-  const [error, setError] = React19.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(
@@ -1200,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;
@@ -1229,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",
@@ -1258,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",
@@ -1336,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",
@@ -1357,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 })
   ] });
 }
@@ -1463,15 +1501,15 @@ function CartDrawer({
     }
   );
 }
-var CheckoutContext = React19.createContext(null);
+var CheckoutContext = React27.createContext(null);
 function CheckoutProvider({
   children
 }) {
   const client = useStorefront();
-  const [checkout, setCheckout] = React19.useState(null);
-  const [loading, setLoading] = React19.useState(false);
-  const [error, setError] = React19.useState(null);
-  const run = React19.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 {
@@ -1489,23 +1527,36 @@ function CheckoutProvider({
     },
     []
   );
-  const refresh = React19.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]);
-  React19.useEffect(() => {
+  React27.useEffect(() => {
     void refresh();
   }, [refresh]);
-  const pay = React19.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 }),
@@ -1524,11 +1575,18 @@ function CheckoutProvider({
     },
     [checkout, client, run]
   );
-  const value = React19.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),
@@ -1549,7 +1607,7 @@ function CheckoutProvider({
   return /* @__PURE__ */ jsx(CheckoutContext.Provider, { value, children });
 }
 function useCheckout() {
-  const ctx = React19.useContext(CheckoutContext);
+  const ctx = React27.useContext(CheckoutContext);
   if (!ctx) {
     throw new Error("useCheckout must be used inside <CheckoutProvider>.");
   }
@@ -1708,11 +1766,11 @@ function AddressForm({
 }) {
   const t = useT();
   const { checkout, setAddress, loading } = useCheckout();
-  const [form, setForm] = React19.useState(
+  const [form, setForm] = React27.useState(
     () => seed(checkout?.email ?? null, checkout?.shipping_address ?? null)
   );
-  const touched = React19.useRef(/* @__PURE__ */ new Set());
-  React19.useEffect(() => {
+  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];
@@ -1777,11 +1835,11 @@ function ShippingPicker({
   const loc = useFormatLocale(locale);
   const { checkout, shippingQuotes, setShippingMethod, loading } = useCheckout();
   const heading = title ?? t("checkout.shippingMethod");
-  const [quotes, setQuotes] = React19.useState(null);
-  const [selected, setSelected] = React19.useState(null);
-  const [fetching, setFetching] = React19.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;
-  React19.useEffect(() => {
+  React27.useEffect(() => {
     let live = true;
     setFetching(true);
     shippingQuotes().then((qs) => {
@@ -1856,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] = React19.useState(null);
-  const [fetching, setFetching] = React19.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;
-  React19.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) => {
@@ -1882,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") }) });
@@ -1907,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
     ] })
   ] });
 }
@@ -1997,6 +2101,7 @@ function reachedStep(checkout) {
 }
 function CheckoutFlow({
   cartToken,
+  onSubscriptionPayment,
   onOrderPlaced,
   emptyState,
   renderConfirmation,
@@ -2006,19 +2111,19 @@ function CheckoutFlow({
 }) {
   const t = useT();
   const { checkout, loading, create } = useCheckout();
-  const [step, setStep] = React19.useState("address");
-  const [bootstrapped, setBootstrapped] = React19.useState(false);
-  React19.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);
-  React19.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) {
@@ -2032,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,
@@ -2136,10 +2242,10 @@ function DefaultConfirmation({ checkout }) {
 }
 function useOrderStatus(statusToken, initial) {
   const client = useStorefront();
-  const [order, setOrder] = React19.useState(initial ?? null);
-  const [loading, setLoading] = React19.useState(false);
-  const [error, setError] = React19.useState(null);
-  const load = React19.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 {
@@ -2151,7 +2257,7 @@ function useOrderStatus(statusToken, initial) {
       setLoading(false);
     }
   }, [client, statusToken]);
-  React19.useEffect(() => {
+  React27.useEffect(() => {
     if (initial) return;
     void load();
   }, [load, initial]);
@@ -2159,12 +2265,12 @@ function useOrderStatus(statusToken, initial) {
 }
 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 () => {
+  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 {
@@ -2181,7 +2287,7 @@ function usePayment(token, initial) {
       setLoading(false);
     }
   }, [client, token]);
-  React19.useEffect(() => {
+  React27.useEffect(() => {
     if (!token) return;
     if (initial && initial.token === token) {
       setPayment(initial);
@@ -2190,7 +2296,7 @@ function usePayment(token, initial) {
     }
     void load();
   }, [token, load]);
-  const selectMethod = React19.useCallback(
+  const selectMethod = React27.useCallback(
     async (method) => {
       if (!token) return null;
       setBusy(true);
@@ -2208,7 +2314,7 @@ function usePayment(token, initial) {
     },
     [client, token]
   );
-  const startPayment = React19.useCallback(
+  const startPayment = React27.useCallback(
     async (input) => {
       if (!token) return null;
       setBusy(true);
@@ -2645,8 +2751,8 @@ function Row4({
 }
 function CopyRow({ label, value }) {
   const t = useT();
-  const [copied, setCopied] = React19.useState(false);
-  React19.useEffect(() => {
+  const [copied, setCopied] = React27.useState(false);
+  React27.useEffect(() => {
     if (!copied) return;
     const id = setTimeout(() => setCopied(false), 1800);
     return () => clearTimeout(id);
@@ -2730,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] = React19.useState(false);
-  React19.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";
-  React19.useEffect(() => {
+  React27.useEffect(() => {
     if (!verifying || !token || settled) return;
     let attempts = 0;
     const id = setInterval(() => {
@@ -2750,7 +2856,7 @@ function PaymentPage({
     }, POLL_MS);
     return () => clearInterval(id);
   }, [verifying, token, settled, reload]);
-  React19.useEffect(() => {
+  React27.useEffect(() => {
     if (!settled || !token || !payment) return;
     setVerifying(false);
     forgetHandoff(token);
@@ -2831,13 +2937,13 @@ function Amount({ label, value }) {
 function Link({ href, children }) {
   return /* @__PURE__ */ jsx("a", { href, style: { color: "var(--nv-brand)", fontSize: "0.875rem" }, children });
 }
-var AccountContext = React19.createContext(null);
+var AccountContext = React27.createContext(null);
 function AccountProvider({ children }) {
   const client = useStorefront();
-  const [customer, setCustomer] = React19.useState(null);
-  const [loading, setLoading] = React19.useState(true);
-  const [error, setError] = React19.useState(false);
-  const refresh = React19.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 {
@@ -2848,10 +2954,10 @@ function AccountProvider({ children }) {
       setLoading(false);
     }
   }, [client]);
-  React19.useEffect(() => {
+  React27.useEffect(() => {
     void refresh();
   }, [refresh]);
-  const value = React19.useMemo(
+  const value = React27.useMemo(
     () => ({
       customer,
       signedIn: customer != null,
@@ -2874,7 +2980,7 @@ function AccountProvider({ children }) {
   return /* @__PURE__ */ jsx(AccountContext.Provider, { value, children });
 }
 function useAccount() {
-  const ctx = React19.useContext(AccountContext);
+  const ctx = React27.useContext(AccountContext);
   if (!ctx) {
     throw new Error("useAccount must be used inside <AccountProvider>.");
   }
@@ -2882,9 +2988,9 @@ function useAccount() {
 }
 function useMagicLinkVerify(token) {
   const { verify } = useAccount();
-  const [status, setStatus] = React19.useState("idle");
-  const done = React19.useRef(false);
-  React19.useEffect(() => {
+  const [status, setStatus] = React27.useState("idle");
+  const done = React27.useRef(false);
+  React27.useEffect(() => {
     if (!token || done.current) return;
     done.current = true;
     setStatus("verifying");
@@ -2895,11 +3001,11 @@ function useMagicLinkVerify(token) {
 function LoginForm({ verifyPath = "/account/verify", onSent }) {
   const t = useT();
   const { requestMagicLink } = useAccount();
-  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);
+  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);
@@ -3011,14 +3117,14 @@ function OrderHistory({
   const loc = useFormatLocale(locale);
   const { signedIn } = useAccount();
   const client = useStorefront();
-  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(() => {
+  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([]);
@@ -3129,7 +3235,7 @@ function OrderHistory({
 }
 function AddressForm2({ initial, onSubmit, onCancel, busy }) {
   const t = useT();
-  const [form, setForm] = React19.useState(() => ({
+  const [form, setForm] = React27.useState(() => ({
     first_name: initial?.first_name ?? "",
     last_name: initial?.last_name ?? "",
     company: initial?.company ?? "",
@@ -3227,17 +3333,17 @@ function AddressBook() {
   const t = useT();
   const { signedIn } = useAccount();
   const client = useStorefront();
-  const [addresses, setAddresses] = React19.useState(null);
-  const [mode, setMode] = React19.useState({ kind: "list" });
-  const [busy, setBusy] = React19.useState(false);
-  const load = React19.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]);
-  React19.useEffect(() => {
+  React27.useEffect(() => {
     load();
   }, [load]);
   async function run(fn) {
@@ -3291,10 +3397,10 @@ function ProfileEditor() {
   const t = useT();
   const client = useStorefront();
   const { customer, refresh } = useAccount();
-  const [editing, setEditing] = React19.useState(false);
-  const [busy, setBusy] = React19.useState(false);
-  const [error, setError] = React19.useState(false);
-  const [form, setForm] = React19.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({
@@ -3375,13 +3481,13 @@ 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(() => {
+  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);
@@ -3444,6 +3550,103 @@ function AccountSecurity() {
     ] }) : /* @__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");
 }
@@ -3548,6 +3751,6 @@ function OrganizationJsonLd({
   return /* @__PURE__ */ jsx(JsonLd, { data });
 }
 
-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 };
+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