@nevios/storefront-kit 1.3.0 → 1.5.0

package/dist/index.cjs

@@ -1,6 +1,6 @@
 'use strict';
 
-var React19 = require('react');
+var React27 = require('react');
 var jsxRuntime = require('react/jsx-runtime');
 var storefrontJs = require('@nevios/storefront-js');
 
@@ -22,15 +22,15 @@ function _interopNamespace(e) {
   return Object.freeze(n);
 }
 
-var React19__namespace = /*#__PURE__*/_interopNamespace(React19);
+var React27__namespace = /*#__PURE__*/_interopNamespace(React27);
 
 // src/provider.tsx
-var StorefrontContext = React19__namespace.createContext(null);
+var StorefrontContext = React27__namespace.createContext(null);
 function NeviosProvider({ client, children }) {
   return /* @__PURE__ */ jsxRuntime.jsx(StorefrontContext.Provider, { value: client, children });
 }
 function useStorefront() {
-  const client = React19__namespace.useContext(StorefrontContext);
+  const client = React27__namespace.useContext(StorefrontContext);
   if (!client) {
     throw new Error(
       "useStorefront must be used inside <NeviosProvider>. Wrap your app root with it."
@@ -39,7 +39,7 @@ function useStorefront() {
   return client;
 }
 function useStorefrontOptional() {
-  return React19__namespace.useContext(StorefrontContext);
+  return React27__namespace.useContext(StorefrontContext);
 }
 var DEFAULTS = {
   brand: "#111111",
@@ -75,7 +75,7 @@ function ThemeProvider({
   as: Tag = "div"
 }) {
   const style = themeToCssVars(theme);
-  return React19__namespace.createElement(
+  return React27__namespace.createElement(
     Tag,
     { "data-nevios-theme": "", style },
     children
@@ -84,6 +84,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",
@@ -238,6 +248,45 @@ var en = {
   "error.generic.title": "Something went wrong",
   "error.generic.body": "Please try again in a moment.",
   "error.home": "Back to home",
+  "subscriptions.mixPrice": "Fixed box price; shipping is separate",
+  "subscriptions.locked.inactive": "This subscription is not active",
+  "subscriptions.locked.cutoff": "The edit cutoff has passed",
+  "subscriptions.locked.in_flight": "This shipment or payment is already being processed",
+  "subscriptions.quantity": "Quantity",
+  "subscriptions.back": "Back",
+  "subscriptions.loading": "Loading subscription\u2026",
+  "subscriptions.loadingProducts": "Loading products\u2026",
+  "subscriptions.chargeDate": "Scheduled charge",
+  "subscriptions.noticeHeld": "The charge is waiting for a confirmed advance notice.",
+  "subscriptions.nextDelivery": "Next shipment",
+  "subscriptions.onlyNext": "Only in this shipment",
+  "subscriptions.toCharge": "Amount to charge",
+  "subscriptions.noticeStatus": "Renewal notice",
+  "subscriptions.notice.pending": "Pending",
+  "subscriptions.notice.queued": "Queued",
+  "subscriptions.notice.sent": "Sent",
+  "subscriptions.notice.failed": "Needs attention",
+  "subscriptions.notice.superseded": "Updated notice pending",
+  "subscriptions.editUntil": "Changes available until",
+  "subscriptions.changeInterval": "Change delivery frequency",
+  "subscriptions.addNext": "Add to next shipment",
+  "subscriptions.changeMix": "Change my mix",
+  "subscriptions.skip": "Skip next shipment",
+  "subscriptions.skipWarning": "This shipment and its one-time additions will be skipped. Following shipments keep their regular contents.",
+  "subscriptions.futureOnly": "Applies to future shipments. Existing orders stay unchanged.",
+  "subscriptions.nextUnchanged": "Next date",
+  "subscriptions.reviewTotal": "Reviewed amount",
+  "subscriptions.acceptChange": "I agree to the displayed contents, schedule and price.",
+  "subscriptions.reloadBeforeRetry": "Reload before another attempt",
+  "subscriptions.confirmChange": "Confirm change",
+  "subscriptions.reviewChange": "Review change",
+  "subscriptions.unit.week": "Every {count} week(s)",
+  "subscriptions.unit.month": "Every {count} month(s)",
+  "subscriptions.unit.year": "Every {count} year(s)",
+  "subscriptions.searchProducts": "Search products",
+  "subscriptions.addProduct": "Add product",
+  "subscriptions.mixCount": "{count} selected \xB7 choose {min}\u2013{max} units",
+  "subscriptions.addMix": "Add mix to cart",
   // account
   "account.title": "Your account",
   "account.signIn": "Sign in",
@@ -300,6 +349,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",
@@ -434,6 +493,45 @@ var cs = {
   "error.generic.title": "N\u011Bco se pokazilo",
   "error.generic.body": "Zkuste to pros\xEDm za chv\xEDli znovu.",
   "error.home": "Zp\u011Bt na \xFAvod",
+  "subscriptions.mixPrice": "Pevn\xE1 cena mixu; doprava se po\u010D\xEDt\xE1 zvl\xE1\u0161\u0165",
+  "subscriptions.locked.inactive": "P\u0159edplatn\xE9 nen\xED aktivn\xED.",
+  "subscriptions.locked.cutoff": "Term\xEDn pro \xFApravy t\xE9to z\xE1silky ji\u017E uplynul.",
+  "subscriptions.locked.in_flight": "Z\xE1silka nebo jej\xED platba se ji\u017E zpracov\xE1v\xE1.",
+  "subscriptions.quantity": "Mno\u017Estv\xED",
+  "subscriptions.back": "Zp\u011Bt",
+  "subscriptions.loading": "Na\u010D\xEDt\xE1n\xED p\u0159edplatn\xE9ho\u2026",
+  "subscriptions.loadingProducts": "Na\u010D\xEDt\xE1n\xED produkt\u016F\u2026",
+  "subscriptions.chargeDate": "Pl\xE1novan\xE9 str\u017Een\xED",
+  "subscriptions.noticeHeld": "Platba \u010Dek\xE1 na potvrzen\xE9 odesl\xE1n\xED upozorn\u011Bn\xED a sjednan\xFD p\u0159edstih.",
+  "subscriptions.nextDelivery": "P\u0159\xED\u0161t\xED z\xE1silka",
+  "subscriptions.onlyNext": "Jen v t\xE9to z\xE1silce",
+  "subscriptions.toCharge": "\u010C\xE1stka ke str\u017Een\xED",
+  "subscriptions.noticeStatus": "Upozorn\u011Bn\xED p\u0159ed platbou",
+  "subscriptions.notice.pending": "\u010Cek\xE1 na odesl\xE1n\xED",
+  "subscriptions.notice.queued": "Ve front\u011B",
+  "subscriptions.notice.sent": "Odesl\xE1no",
+  "subscriptions.notice.failed": "Vy\u017Eaduje pozornost",
+  "subscriptions.notice.superseded": "\u010Cek\xE1 na aktualizovan\xE9 upozorn\u011Bn\xED",
+  "subscriptions.editUntil": "\xDApravy mo\u017En\xE9 do",
+  "subscriptions.changeInterval": "Zm\u011Bnit interval doru\u010Den\xED",
+  "subscriptions.addNext": "P\u0159idat k p\u0159\xED\u0161t\xED z\xE1silce",
+  "subscriptions.changeMix": "Zm\u011Bnit vlastn\xED mix",
+  "subscriptions.skip": "P\u0159esko\u010Dit p\u0159\xED\u0161t\xED z\xE1silku",
+  "subscriptions.skipWarning": "Tato z\xE1silka se p\u0159esko\u010D\xED v\u010Detn\u011B jednor\xE1zov\u011B p\u0159idan\xFDch produkt\u016F. Dal\u0161\xED z\xE1silky budou m\xEDt b\u011B\u017En\xFD obsah p\u0159edplatn\xE9ho.",
+  "subscriptions.futureOnly": "Plat\xED pro budouc\xED z\xE1silky. Existuj\xEDc\xED objedn\xE1vky se nezm\u011Bn\xED.",
+  "subscriptions.nextUnchanged": "Nejbli\u017E\u0161\xED term\xEDn",
+  "subscriptions.reviewTotal": "Potvrzovan\xE1 \u010D\xE1stka",
+  "subscriptions.acceptChange": "Souhlas\xEDm se zobrazen\xFDm obsahem, term\xEDny a cenou.",
+  "subscriptions.reloadBeforeRetry": "Obnovit p\u0159ed dal\u0161\xEDm pokusem",
+  "subscriptions.confirmChange": "Potvrdit zm\u011Bnu",
+  "subscriptions.reviewChange": "Zkontrolovat zm\u011Bnu",
+  "subscriptions.unit.week": "Ka\u017Ed\xFDch {count} t\xFDdn\u016F",
+  "subscriptions.unit.month": "Ka\u017Ed\xFDch {count} m\u011Bs\xEDc\u016F",
+  "subscriptions.unit.year": "Ka\u017Ed\xFDch {count} let",
+  "subscriptions.searchProducts": "Hledat produkty",
+  "subscriptions.addProduct": "P\u0159idat produkt",
+  "subscriptions.mixCount": "Vybr\xE1no {count} \xB7 zvolte {min}\u2013{max} kus\u016F",
+  "subscriptions.addMix": "P\u0159idat mix do ko\u0161\xEDku",
   "account.title": "V\xE1\u0161 \xFA\u010Det",
   "account.signIn": "P\u0159ihl\xE1sit se",
   "account.signInBlurb": "Zadejte e-mail a po\u0161leme v\xE1m p\u0159ihla\u0161ovac\xED odkaz.",
@@ -541,13 +639,13 @@ function makeI18n(locale, messages) {
   return { locale, messages, t };
 }
 var DEFAULT_I18N = makeI18n("en", en);
-var I18nContext = React19__namespace.createContext(null);
+var I18nContext = React27__namespace.createContext(null);
 function I18nProvider({
   locale,
   messages,
   children
 }) {
-  const value = React19__namespace.useMemo(() => {
+  const value = React27__namespace.useMemo(() => {
     const lang = langOf(locale);
     if (locale && !(lang in BUNDLED) && !messages) {
       devWarn(
@@ -561,7 +659,7 @@ function I18nProvider({
   return /* @__PURE__ */ jsxRuntime.jsx(I18nContext.Provider, { value, children });
 }
 function useI18n() {
-  return React19__namespace.useContext(I18nContext) ?? DEFAULT_I18N;
+  return React27__namespace.useContext(I18nContext) ?? DEFAULT_I18N;
 }
 function useT() {
   return useI18n().t;
@@ -685,7 +783,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__namespace.useState(0);
+  const [active, setActive] = React27__namespace.useState(0);
   const imageBase = useStorefrontOptional()?.imageBase;
   if (media.length === 0) {
     return /* @__PURE__ */ jsxRuntime.jsx(
@@ -773,10 +871,10 @@ function matchVariant(product, selected) {
   ) ?? null;
 }
 function VariantPicker({ product, onChange }) {
-  const [selected, setSelected] = React19__namespace.useState(
+  const [selected, setSelected] = React27__namespace.useState(
     () => product.variants[0]?.options ?? []
   );
-  React19__namespace.useEffect(() => {
+  React27__namespace.useEffect(() => {
     onChange?.(matchVariant(product, selected));
   }, [product, selected]);
   if (product.options.length === 0) return null;
@@ -817,8 +915,8 @@ function BackInStockForm({
 }) {
   const t = useT();
   const client = useStorefront();
-  const [email, setEmail] = React19__namespace.useState(defaultEmail);
-  const [state, setState] = React19__namespace.useState("idle");
+  const [email, setEmail] = React27__namespace.useState(defaultEmail);
+  const [state, setState] = React27__namespace.useState("idle");
   if (!variant || variant.availability?.status !== "out_of_stock") return null;
   async function submit(e) {
     e.preventDefault();
@@ -918,7 +1016,7 @@ function ProductDetailPage({
   locale,
   addToCart
 }) {
-  const [variant, setVariant] = React19__namespace.useState(
+  const [variant, setVariant] = React27__namespace.useState(
     product.variants[0] ?? null
   );
   return /* @__PURE__ */ jsxRuntime.jsxs(
@@ -1150,12 +1248,28 @@ function TagFilter({ tags, selected = [], onChange }) {
     }) })
   ] });
 }
-var CartContext = React19__namespace.createContext(null);
-function CartProvider({ children }) {
+function PurchaseOptions({ plans, value, onChange, disabled, locale }) {
+  const t = useT();
+  const loc = useFormatLocale(locale);
+  const name = React27__namespace.useId();
+  const options = [{ id: null, name: t("subscriptions.once"), price: void 0 }, ...plans];
+  return /* @__PURE__ */ jsxRuntime.jsxs("fieldset", { disabled, style: { border: 0, padding: 0, margin: 0, display: "grid", gap: "0.5rem" }, children: [
+    /* @__PURE__ */ jsxRuntime.jsx("legend", { style: { marginBottom: "0.5rem", fontWeight: 500 }, children: t("subscriptions.purchaseOption") }),
+    options.map((option) => /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("input", { type: "radio", name, checked: value === option.id, onChange: () => onChange(option.id) }),
+      /* @__PURE__ */ jsxRuntime.jsx("span", { style: { flex: 1 }, children: option.name }),
+      option.price ? /* @__PURE__ */ jsxRuntime.jsx("span", { children: formatCents(option.price.amount_cents, option.price.currency, loc) }) : null
+    ] }, option.id ?? "once"))
+  ] });
+}
+var CartContext = React27__namespace.createContext(null);
+function CartProvider({
+  children
+}) {
   const client = useStorefront();
-  const [cart, setCart] = React19__namespace.useState(null);
-  const [loading, setLoading] = React19__namespace.useState(false);
-  const run = React19__namespace.useCallback(
+  const [cart, setCart] = React27__namespace.useState(null);
+  const [loading, setLoading] = React27__namespace.useState(false);
+  const run = React27__namespace.useCallback(
     async (op) => {
       setLoading(true);
       try {
@@ -1168,7 +1282,7 @@ function CartProvider({ children }) {
     },
     []
   );
-  const refresh = React19__namespace.useCallback(async () => {
+  const refresh = React27__namespace.useCallback(async () => {
     setLoading(true);
     try {
       setCart(await client.cart.get());
@@ -1176,16 +1290,22 @@ function CartProvider({ children }) {
       setLoading(false);
     }
   }, [client]);
-  React19__namespace.useEffect(() => {
+  React27__namespace.useEffect(() => {
     void refresh();
   }, [refresh]);
-  const value = React19__namespace.useMemo(
+  const value = React27__namespace.useMemo(
     () => ({
       cart,
       loading,
       itemCount: cart?.totals.item_count ?? 0,
       addLine: (input) => run(() => client.cart.addLine(input)),
+      setSubscriptionMix: (planId, lines, expectedLineIds) => run(
+        () => client.cart.setSubscriptionMix(planId, lines, expectedLineIds, {
+          expectedRevision: cart?.subscription?.revision
+        })
+      ),
       updateLine: (lineId, quantity) => run(() => client.cart.updateLine(lineId, quantity)),
+      clearSubscription: () => run(() => client.cart.clearSubscription()),
       removeLine: (lineId) => run(() => client.cart.removeLine(lineId)),
       refresh
     }),
@@ -1194,7 +1314,7 @@ function CartProvider({ children }) {
   return /* @__PURE__ */ jsxRuntime.jsx(CartContext.Provider, { value, children });
 }
 function useCart() {
-  const ctx = React19__namespace.useContext(CartContext);
+  const ctx = React27__namespace.useContext(CartContext);
   if (!ctx) {
     throw new Error("useCart must be used inside <CartProvider>.");
   }
@@ -1203,13 +1323,14 @@ function useCart() {
 function AddToCart({
   variant,
   quantity = 1,
+  subscriptionPlanId,
   children,
   onAdded
 }) {
   const t = useT();
   const { addLine } = useCart();
-  const [busy, setBusy] = React19__namespace.useState(false);
-  const [error, setError] = React19__namespace.useState(null);
+  const [busy, setBusy] = React27__namespace.useState(false);
+  const [error, setError] = React27__namespace.useState(null);
   const disabled = variant == null || busy;
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "0.5rem" }, children: [
     /* @__PURE__ */ jsxRuntime.jsx(
@@ -1222,7 +1343,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;
@@ -1251,7 +1372,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__ */ jsxRuntime.jsxs("div", { style: { display: "flex", gap: "0.85rem", alignItems: "flex-start", padding: "0.75rem 0" }, children: [
     /* @__PURE__ */ jsxRuntime.jsx(
       "div",
@@ -1280,6 +1401,7 @@ function CartLineItem({ line, locale }) {
     /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { flex: 1, minWidth: 0 }, children: [
       /* @__PURE__ */ jsxRuntime.jsx("div", { style: { fontWeight: 500, lineHeight: 1.3 }, children: line.title }),
       line.variant_title ? /* @__PURE__ */ jsxRuntime.jsx("div", { style: { color: "var(--nv-muted)", fontSize: "0.875em" }, children: line.variant_title }) : null,
+      line.subscription_plan_id ? /* @__PURE__ */ jsxRuntime.jsx("div", { style: { color: "var(--nv-muted)", fontSize: "0.875em" }, children: cart?.subscription?.plan?.name ?? t("subscriptions.title") }) : null,
       /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", alignItems: "center", gap: "0.75rem", marginTop: "0.5rem" }, children: [
         /* @__PURE__ */ jsxRuntime.jsxs(
           "div",
@@ -1358,7 +1480,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",
@@ -1379,6 +1501,7 @@ function CartSummary({
     t.tax_cents > 0 ? /* @__PURE__ */ jsxRuntime.jsx(Row, { label: tr("cart.tax"), value: formatCents(t.tax_cents, t.currency, loc), muted: true }) : null,
     /* @__PURE__ */ jsxRuntime.jsx("div", { style: { height: 1, background: "var(--nv-border)" } }),
     /* @__PURE__ */ jsxRuntime.jsx(Row, { label: tr("cart.total"), value: formatCents(t.total_cents, t.currency, loc), strong: true }),
+    cart.subscription?.error ? /* @__PURE__ */ jsxRuntime.jsx("p", { role: "alert", style: { margin: 0 }, children: cart.subscription.error.message }) : null,
     checkoutHref && !empty ? /* @__PURE__ */ jsxRuntime.jsx("a", { href: checkoutHref, style: ctaStyle, children: cta }) : /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", disabled: empty, onClick: onCheckout, style: ctaStyle, children: cta })
   ] });
 }
@@ -1485,15 +1608,15 @@ function CartDrawer({
     }
   );
 }
-var CheckoutContext = React19__namespace.createContext(null);
+var CheckoutContext = React27__namespace.createContext(null);
 function CheckoutProvider({
   children
 }) {
   const client = useStorefront();
-  const [checkout, setCheckout] = React19__namespace.useState(null);
-  const [loading, setLoading] = React19__namespace.useState(false);
-  const [error, setError] = React19__namespace.useState(null);
-  const run = React19__namespace.useCallback(
+  const [checkout, setCheckout] = React27__namespace.useState(null);
+  const [loading, setLoading] = React27__namespace.useState(false);
+  const [error, setError] = React27__namespace.useState(null);
+  const run = React27__namespace.useCallback(
     async (op, store) => {
       setLoading(true);
       try {
@@ -1511,23 +1634,36 @@ function CheckoutProvider({
     },
     []
   );
-  const refresh = React19__namespace.useCallback(async () => {
+  const refresh = React27__namespace.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__namespace.useEffect(() => {
+  React27__namespace.useEffect(() => {
     void refresh();
   }, [refresh]);
-  const pay = React19__namespace.useCallback(
+  const pay = React27__namespace.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 }),
@@ -1546,11 +1682,18 @@ function CheckoutProvider({
     },
     [checkout, client, run]
   );
-  const value = React19__namespace.useMemo(
+  const value = React27__namespace.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),
@@ -1571,7 +1714,7 @@ function CheckoutProvider({
   return /* @__PURE__ */ jsxRuntime.jsx(CheckoutContext.Provider, { value, children });
 }
 function useCheckout() {
-  const ctx = React19__namespace.useContext(CheckoutContext);
+  const ctx = React27__namespace.useContext(CheckoutContext);
   if (!ctx) {
     throw new Error("useCheckout must be used inside <CheckoutProvider>.");
   }
@@ -1730,11 +1873,11 @@ function AddressForm({
 }) {
   const t = useT();
   const { checkout, setAddress, loading } = useCheckout();
-  const [form, setForm] = React19__namespace.useState(
+  const [form, setForm] = React27__namespace.useState(
     () => seed(checkout?.email ?? null, checkout?.shipping_address ?? null)
   );
-  const touched = React19__namespace.useRef(/* @__PURE__ */ new Set());
-  React19__namespace.useEffect(() => {
+  const touched = React27__namespace.useRef(/* @__PURE__ */ new Set());
+  React27__namespace.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];
@@ -1799,11 +1942,11 @@ function ShippingPicker({
   const loc = useFormatLocale(locale);
   const { checkout, shippingQuotes, setShippingMethod, loading } = useCheckout();
   const heading = title ?? t("checkout.shippingMethod");
-  const [quotes, setQuotes] = React19__namespace.useState(null);
-  const [selected, setSelected] = React19__namespace.useState(null);
-  const [fetching, setFetching] = React19__namespace.useState(true);
+  const [quotes, setQuotes] = React27__namespace.useState(null);
+  const [selected, setSelected] = React27__namespace.useState(null);
+  const [fetching, setFetching] = React27__namespace.useState(true);
   const addressKey = checkout?.shipping_address ? `${checkout.shipping_address.country_code}:${checkout.shipping_address.postal_code}` : null;
-  React19__namespace.useEffect(() => {
+  React27__namespace.useEffect(() => {
     let live = true;
     setFetching(true);
     shippingQuotes().then((qs) => {
@@ -1878,20 +2021,45 @@ function PaymentMethodPicker({
     }
   );
 }
+function SubscriptionTerms({ quote, checked, onChange, locale }) {
+  const t = useT();
+  const loc = useFormatLocale(locale);
+  return /* @__PURE__ */ jsxRuntime.jsxs("fieldset", { style: { margin: 0, padding: "1rem", border: "1px solid var(--nv-border)", borderRadius: "var(--nv-radius)" }, children: [
+    /* @__PURE__ */ jsxRuntime.jsx("legend", { children: t("subscriptions.title") }),
+    /* @__PURE__ */ jsxRuntime.jsxs("p", { style: { margin: "0 0 0.5rem", fontWeight: 500 }, children: [
+      t("subscriptions.eachDelivery"),
+      ": ",
+      formatCents(quote.recurring_total_cents, quote.currency, loc)
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx("p", { style: { margin: "0 0 0.75rem", whiteSpace: "pre-wrap" }, children: quote.terms_text }),
+    /* @__PURE__ */ jsxRuntime.jsxs("label", { style: { display: "flex", alignItems: "flex-start", gap: "0.6rem", cursor: "pointer" }, children: [
+      /* @__PURE__ */ jsxRuntime.jsx("input", { type: "checkbox", checked, onChange: (event) => onChange(event.target.checked) }),
+      /* @__PURE__ */ jsxRuntime.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__namespace.useState(null);
-  const [fetching, setFetching] = React19__namespace.useState(true);
+  const { checkout, paymentMethods, setPaymentMethod, pay, loading, refresh } = useCheckout();
+  const [methods, setMethods] = React27__namespace.useState(null);
+  const [fetching, setFetching] = React27__namespace.useState(true);
   const selected = checkout?.payment_method ?? null;
-  React19__namespace.useEffect(() => {
+  const [acceptedDigest, setAcceptedDigest] = React27__namespace.useState(null);
+  const [actionBusy, setActionBusy] = React27__namespace.useState(false);
+  const quote = checkout?.subscription?.quote;
+  const needsConsent = Boolean(checkout?.subscription?.requires_consent);
+  const clickInFlight = React27__namespace.useRef(false);
+  const [actionError, setActionError] = React27__namespace.useState(null);
+  const accepted = Boolean(quote && acceptedDigest === quote.quote_digest);
+  React27__namespace.useEffect(() => {
     let live = true;
     setFetching(true);
     paymentMethods().then((ms) => {
@@ -1904,12 +2072,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__ */ jsxRuntime.jsx(Section, { title: heading, children: /* @__PURE__ */ jsxRuntime.jsx("p", { style: { color: "var(--nv-muted)", margin: 0 }, children: t("checkout.loadingPayment") }) });
@@ -1929,9 +2115,12 @@ function PaymentSection({
         label: heading
       }
     ),
+    quote && needsConsent ? /* @__PURE__ */ jsxRuntime.jsx(SubscriptionTerms, { locale, quote, checked: accepted, onChange: (value) => setAcceptedDigest(value && quote ? quote.quote_digest : null) }) : null,
+    checkout?.subscription?.error ? /* @__PURE__ */ jsxRuntime.jsx("p", { role: "alert", children: checkout.subscription.error.message }) : null,
+    actionError ? /* @__PURE__ */ jsxRuntime.jsx("p", { role: "alert", children: actionError }) : null,
     /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-      /* @__PURE__ */ jsxRuntime.jsx(Button, { onClick: placeOrder, busy: loading, disabled: selected == null, children: isGateway ? t("checkout.payNow") : t("checkout.placeOrder") }),
-      isGateway ? /* @__PURE__ */ jsxRuntime.jsx("p", { style: { fontSize: "0.8125rem", color: "var(--nv-muted)", marginTop: "0.6rem" }, children: t("checkout.gatewayRedirectNote") }) : null
+      /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("p", { style: { fontSize: "0.8125rem", color: "var(--nv-muted)", marginTop: "0.6rem" }, children: t("checkout.gatewayRedirectNote") }) : null
     ] })
   ] });
 }
@@ -2019,6 +2208,7 @@ function reachedStep(checkout) {
 }
 function CheckoutFlow({
   cartToken,
+  onSubscriptionPayment,
   onOrderPlaced,
   emptyState,
   renderConfirmation,
@@ -2028,19 +2218,19 @@ function CheckoutFlow({
 }) {
   const t = useT();
   const { checkout, loading, create } = useCheckout();
-  const [step, setStep] = React19__namespace.useState("address");
-  const [bootstrapped, setBootstrapped] = React19__namespace.useState(false);
-  React19__namespace.useEffect(() => {
+  const [step, setStep] = React27__namespace.useState("address");
+  const [bootstrapped, setBootstrapped] = React27__namespace.useState(false);
+  React27__namespace.useEffect(() => {
     if (checkout || !cartToken || bootstrapped) return;
     setBootstrapped(true);
     void create(cartToken).catch(() => {
     });
   }, [checkout, cartToken, bootstrapped, create]);
   const serverStep = reachedStep(checkout);
-  React19__namespace.useEffect(() => {
+  React27__namespace.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__ */ jsxRuntime.jsx(Shell, { summary: /* @__PURE__ */ jsxRuntime.jsx(OrderSummary, { locale }), children: renderConfirmation ? renderConfirmation(checkout) : /* @__PURE__ */ jsxRuntime.jsx(DefaultConfirmation, { checkout }) });
   }
   if (!checkout) {
@@ -2054,6 +2244,7 @@ function CheckoutFlow({
     step === "address" ? /* @__PURE__ */ jsxRuntime.jsx(AddressForm, { onComplete: () => setStep("shipping") }) : step === "shipping" ? /* @__PURE__ */ jsxRuntime.jsx(ShippingPicker, { onComplete: () => setStep("payment"), locale }) : /* @__PURE__ */ jsxRuntime.jsx(
       PaymentSection,
       {
+        onSubscriptionPayment,
         returnUrl,
         cancelUrl,
         onOrderPlaced,
@@ -2158,10 +2349,10 @@ function DefaultConfirmation({ checkout }) {
 }
 function useOrderStatus(statusToken, initial) {
   const client = useStorefront();
-  const [order, setOrder] = React19__namespace.useState(initial ?? null);
-  const [loading, setLoading] = React19__namespace.useState(false);
-  const [error, setError] = React19__namespace.useState(null);
-  const load = React19__namespace.useCallback(async () => {
+  const [order, setOrder] = React27__namespace.useState(initial ?? null);
+  const [loading, setLoading] = React27__namespace.useState(false);
+  const [error, setError] = React27__namespace.useState(null);
+  const load = React27__namespace.useCallback(async () => {
     if (!statusToken) return;
     setLoading(true);
     try {
@@ -2173,7 +2364,7 @@ function useOrderStatus(statusToken, initial) {
       setLoading(false);
     }
   }, [client, statusToken]);
-  React19__namespace.useEffect(() => {
+  React27__namespace.useEffect(() => {
     if (initial) return;
     void load();
   }, [load, initial]);
@@ -2181,12 +2372,12 @@ function useOrderStatus(statusToken, initial) {
 }
 function usePayment(token, initial) {
   const client = useStorefront();
-  const [payment, setPayment] = React19__namespace.useState(initial ?? null);
-  const [methods, setMethods] = React19__namespace.useState([]);
-  const [loading, setLoading] = React19__namespace.useState(false);
-  const [busy, setBusy] = React19__namespace.useState(false);
-  const [error, setError] = React19__namespace.useState(null);
-  const load = React19__namespace.useCallback(async () => {
+  const [payment, setPayment] = React27__namespace.useState(initial ?? null);
+  const [methods, setMethods] = React27__namespace.useState([]);
+  const [loading, setLoading] = React27__namespace.useState(false);
+  const [busy, setBusy] = React27__namespace.useState(false);
+  const [error, setError] = React27__namespace.useState(null);
+  const load = React27__namespace.useCallback(async () => {
     if (!token) return;
     setLoading(true);
     try {
@@ -2203,7 +2394,7 @@ function usePayment(token, initial) {
       setLoading(false);
     }
   }, [client, token]);
-  React19__namespace.useEffect(() => {
+  React27__namespace.useEffect(() => {
     if (!token) return;
     if (initial && initial.token === token) {
       setPayment(initial);
@@ -2212,7 +2403,7 @@ function usePayment(token, initial) {
     }
     void load();
   }, [token, load]);
-  const selectMethod = React19__namespace.useCallback(
+  const selectMethod = React27__namespace.useCallback(
     async (method) => {
       if (!token) return null;
       setBusy(true);
@@ -2230,7 +2421,7 @@ function usePayment(token, initial) {
     },
     [client, token]
   );
-  const startPayment = React19__namespace.useCallback(
+  const startPayment = React27__namespace.useCallback(
     async (input) => {
       if (!token) return null;
       setBusy(true);
@@ -2667,8 +2858,8 @@ function Row4({
 }
 function CopyRow({ label, value }) {
   const t = useT();
-  const [copied, setCopied] = React19__namespace.useState(false);
-  React19__namespace.useEffect(() => {
+  const [copied, setCopied] = React27__namespace.useState(false);
+  React27__namespace.useEffect(() => {
     if (!copied) return;
     const id = setTimeout(() => setCopied(false), 1800);
     return () => clearTimeout(id);
@@ -2752,12 +2943,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__namespace.useState(false);
-  React19__namespace.useEffect(() => {
+  const [verifying, setVerifying] = React27__namespace.useState(false);
+  React27__namespace.useEffect(() => {
     if (token) setVerifying(consumeHandoff(token));
   }, [token]);
   const settled = payment != null && !payment.can_pay && payment.blocked_reason === "already_paid";
-  React19__namespace.useEffect(() => {
+  React27__namespace.useEffect(() => {
     if (!verifying || !token || settled) return;
     let attempts = 0;
     const id = setInterval(() => {
@@ -2772,7 +2963,7 @@ function PaymentPage({
     }, POLL_MS);
     return () => clearInterval(id);
   }, [verifying, token, settled, reload]);
-  React19__namespace.useEffect(() => {
+  React27__namespace.useEffect(() => {
     if (!settled || !token || !payment) return;
     setVerifying(false);
     forgetHandoff(token);
@@ -2853,13 +3044,13 @@ function Amount({ label, value }) {
 function Link({ href, children }) {
   return /* @__PURE__ */ jsxRuntime.jsx("a", { href, style: { color: "var(--nv-brand)", fontSize: "0.875rem" }, children });
 }
-var AccountContext = React19__namespace.createContext(null);
+var AccountContext = React27__namespace.createContext(null);
 function AccountProvider({ children }) {
   const client = useStorefront();
-  const [customer, setCustomer] = React19__namespace.useState(null);
-  const [loading, setLoading] = React19__namespace.useState(true);
-  const [error, setError] = React19__namespace.useState(false);
-  const refresh = React19__namespace.useCallback(async () => {
+  const [customer, setCustomer] = React27__namespace.useState(null);
+  const [loading, setLoading] = React27__namespace.useState(true);
+  const [error, setError] = React27__namespace.useState(false);
+  const refresh = React27__namespace.useCallback(async () => {
     setLoading(true);
     setError(false);
     try {
@@ -2870,10 +3061,10 @@ function AccountProvider({ children }) {
       setLoading(false);
     }
   }, [client]);
-  React19__namespace.useEffect(() => {
+  React27__namespace.useEffect(() => {
     void refresh();
   }, [refresh]);
-  const value = React19__namespace.useMemo(
+  const value = React27__namespace.useMemo(
     () => ({
       customer,
       signedIn: customer != null,
@@ -2896,7 +3087,7 @@ function AccountProvider({ children }) {
   return /* @__PURE__ */ jsxRuntime.jsx(AccountContext.Provider, { value, children });
 }
 function useAccount() {
-  const ctx = React19__namespace.useContext(AccountContext);
+  const ctx = React27__namespace.useContext(AccountContext);
   if (!ctx) {
     throw new Error("useAccount must be used inside <AccountProvider>.");
   }
@@ -2904,9 +3095,9 @@ function useAccount() {
 }
 function useMagicLinkVerify(token) {
   const { verify } = useAccount();
-  const [status, setStatus] = React19__namespace.useState("idle");
-  const done = React19__namespace.useRef(false);
-  React19__namespace.useEffect(() => {
+  const [status, setStatus] = React27__namespace.useState("idle");
+  const done = React27__namespace.useRef(false);
+  React27__namespace.useEffect(() => {
     if (!token || done.current) return;
     done.current = true;
     setStatus("verifying");
@@ -2917,11 +3108,11 @@ function useMagicLinkVerify(token) {
 function LoginForm({ verifyPath = "/account/verify", onSent }) {
   const t = useT();
   const { requestMagicLink } = useAccount();
-  const [email, setEmail] = React19__namespace.useState("");
-  const [busy, setBusy] = React19__namespace.useState(false);
-  const [sent, setSent] = React19__namespace.useState(false);
-  const [error, setError] = React19__namespace.useState(false);
-  const [devLink, setDevLink] = React19__namespace.useState(null);
+  const [email, setEmail] = React27__namespace.useState("");
+  const [busy, setBusy] = React27__namespace.useState(false);
+  const [sent, setSent] = React27__namespace.useState(false);
+  const [error, setError] = React27__namespace.useState(false);
+  const [devLink, setDevLink] = React27__namespace.useState(null);
   async function submit(e) {
     e.preventDefault();
     setBusy(true);
@@ -3033,14 +3224,14 @@ function OrderHistory({
   const loc = useFormatLocale(locale);
   const { signedIn } = useAccount();
   const client = useStorefront();
-  const [orders, setOrders] = React19__namespace.useState(null);
-  const [error, setError] = React19__namespace.useState(false);
-  const [nextCursor, setNextCursor] = React19__namespace.useState(null);
-  const [pageLoading, setPageLoading] = React19__namespace.useState(false);
-  const [reload, setReload] = React19__namespace.useState(0);
-  const [reordering, setReordering] = React19__namespace.useState(null);
-  const [notice, setNotice] = React19__namespace.useState(null);
-  React19__namespace.useEffect(() => {
+  const [orders, setOrders] = React27__namespace.useState(null);
+  const [error, setError] = React27__namespace.useState(false);
+  const [nextCursor, setNextCursor] = React27__namespace.useState(null);
+  const [pageLoading, setPageLoading] = React27__namespace.useState(false);
+  const [reload, setReload] = React27__namespace.useState(0);
+  const [reordering, setReordering] = React27__namespace.useState(null);
+  const [notice, setNotice] = React27__namespace.useState(null);
+  React27__namespace.useEffect(() => {
     let live = true;
     if (!signedIn) {
       setOrders([]);
@@ -3151,7 +3342,7 @@ function OrderHistory({
 }
 function AddressForm2({ initial, onSubmit, onCancel, busy }) {
   const t = useT();
-  const [form, setForm] = React19__namespace.useState(() => ({
+  const [form, setForm] = React27__namespace.useState(() => ({
     first_name: initial?.first_name ?? "",
     last_name: initial?.last_name ?? "",
     company: initial?.company ?? "",
@@ -3249,17 +3440,17 @@ function AddressBook() {
   const t = useT();
   const { signedIn } = useAccount();
   const client = useStorefront();
-  const [addresses, setAddresses] = React19__namespace.useState(null);
-  const [mode, setMode] = React19__namespace.useState({ kind: "list" });
-  const [busy, setBusy] = React19__namespace.useState(false);
-  const load = React19__namespace.useCallback(() => {
+  const [addresses, setAddresses] = React27__namespace.useState(null);
+  const [mode, setMode] = React27__namespace.useState({ kind: "list" });
+  const [busy, setBusy] = React27__namespace.useState(false);
+  const load = React27__namespace.useCallback(() => {
     if (!signedIn) {
       setAddresses([]);
       return;
     }
     client.account.addresses().then(setAddresses).catch(() => setAddresses([]));
   }, [signedIn, client]);
-  React19__namespace.useEffect(() => {
+  React27__namespace.useEffect(() => {
     load();
   }, [load]);
   async function run(fn) {
@@ -3313,10 +3504,10 @@ function ProfileEditor() {
   const t = useT();
   const client = useStorefront();
   const { customer, refresh } = useAccount();
-  const [editing, setEditing] = React19__namespace.useState(false);
-  const [busy, setBusy] = React19__namespace.useState(false);
-  const [error, setError] = React19__namespace.useState(false);
-  const [form, setForm] = React19__namespace.useState({});
+  const [editing, setEditing] = React27__namespace.useState(false);
+  const [busy, setBusy] = React27__namespace.useState(false);
+  const [error, setError] = React27__namespace.useState(false);
+  const [form, setForm] = React27__namespace.useState({});
   if (!customer) return null;
   function startEdit() {
     setForm({
@@ -3397,13 +3588,13 @@ function AccountSecurity() {
   const client = useStorefront();
   const account = useAccount();
   const t = useT();
-  const [sessions, setSessions] = React19__namespace.useState(null);
-  const [email, setEmail] = React19__namespace.useState("");
-  const [busy, setBusy] = React19__namespace.useState(false);
-  const [notice, setNotice] = React19__namespace.useState(null);
-  const [confirmClose, setConfirmClose] = React19__namespace.useState(false);
-  const [retry, setRetry] = React19__namespace.useState(0);
-  React19__namespace.useEffect(() => {
+  const [sessions, setSessions] = React27__namespace.useState(null);
+  const [email, setEmail] = React27__namespace.useState("");
+  const [busy, setBusy] = React27__namespace.useState(false);
+  const [notice, setNotice] = React27__namespace.useState(null);
+  const [confirmClose, setConfirmClose] = React27__namespace.useState(false);
+  const [retry, setRetry] = React27__namespace.useState(0);
+  React27__namespace.useEffect(() => {
     let live = true;
     if (account.signedIn) client.account.sessions().then((s) => {
       if (live) setSessions(s);
@@ -3466,6 +3657,662 @@ function AccountSecurity() {
     ] }) : /* @__PURE__ */ jsxRuntime.jsx(Button, { disabled: busy, onClick: () => setConfirmClose(true), children: t("account.closeAccount") })
   ] });
 }
+function useCustomerSubscriptions() {
+  const client = useStorefront();
+  const { customer } = useAccount();
+  const [dataOwner, setDataOwner] = React27__namespace.useState(
+    void 0
+  );
+  const [subscriptions, setSubscriptions] = React27__namespace.useState([]);
+  const [loading, setLoading] = React27__namespace.useState(false);
+  const [error, setError] = React27__namespace.useState(null);
+  const generation = React27__namespace.useRef(0);
+  const owner = customer?.id;
+  const api = client.account.subscriptions;
+  const refresh = React27__namespace.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__namespace.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 [readRevision, setReadRevision] = React27__namespace.useState(0);
+  const [dataKey, setDataKey] = React27__namespace.useState("");
+  const [subscription, setSubscription] = React27__namespace.useState(null);
+  const [loading, setLoading] = React27__namespace.useState(false);
+  const [error, setError] = React27__namespace.useState(null);
+  const generation = React27__namespace.useRef(0);
+  const owner = customer?.id;
+  const api = client.account.subscriptions;
+  const refresh = React27__namespace.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);
+        setReadRevision((n) => n + 1);
+        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__namespace.useEffect(() => {
+    setSubscription(null);
+    void refresh();
+    return () => {
+      generation.current++;
+    };
+  }, [refresh]);
+  return {
+    subscription: dataKey === `${owner}:${id}` ? subscription : null,
+    loading,
+    error,
+    refresh,
+    api,
+    readRevision
+  };
+}
+function SubscriptionList({ href, locale }) {
+  const t = useT();
+  const { subscriptions, loading, error } = useCustomerSubscriptions();
+  return /* @__PURE__ */ jsxRuntime.jsxs("section", { style: { fontFamily: "var(--nv-font)", color: "var(--nv-fg)" }, children: [
+    /* @__PURE__ */ jsxRuntime.jsx("h2", { style: { fontSize: "1.125rem", fontWeight: 500 }, children: t("subscriptions.title") }),
+    loading ? /* @__PURE__ */ jsxRuntime.jsx("p", { children: t("checkout.loading") }) : error ? /* @__PURE__ */ jsxRuntime.jsx("p", { role: "alert", children: error.message }) : subscriptions.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("p", { children: t("subscriptions.empty") }) : /* @__PURE__ */ jsxRuntime.jsx("ul", { style: { listStyle: "none", margin: 0, padding: 0 }, children: subscriptions.map((sub) => /* @__PURE__ */ jsxRuntime.jsx("li", { style: { borderBottom: "1px solid var(--nv-border)", padding: "0.8rem 0" }, children: /* @__PURE__ */ jsxRuntime.jsxs("a", { href: href(sub.id), style: { color: "inherit", display: "flex", justifyContent: "space-between", gap: "1rem", flexWrap: "wrap" }, children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
+        "#",
+        sub.id
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx("span", { children: t(`subscriptions.status.${sub.status}`) }),
+      sub.status === "active" && sub.next_at ? /* @__PURE__ */ jsxRuntime.jsx("time", { dateTime: sub.next_at, children: new Date(sub.next_at).toLocaleDateString(locale) }) : null
+    ] }) }, sub.id)) })
+  ] });
+}
+var subscriptionPanel = {
+  fontFamily: "var(--nv-font)",
+  color: "var(--nv-fg)",
+  background: "var(--nv-bg)",
+  border: "1px solid var(--nv-border)",
+  borderRadius: "var(--nv-radius)",
+  padding: "1rem"
+};
+function SubscriptionButton({
+  primary = false,
+  style,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "button",
+    {
+      type: "button",
+      ...props,
+      style: {
+        font: "inherit",
+        fontWeight: 500,
+        padding: ".5rem .85rem",
+        borderRadius: "var(--nv-radius)",
+        border: "1px solid var(--nv-border)",
+        background: primary ? "var(--nv-brand)" : "var(--nv-bg)",
+        color: primary ? "var(--nv-brand-foreground)" : "var(--nv-fg)",
+        cursor: props.disabled ? "default" : "pointer",
+        opacity: props.disabled ? 0.55 : 1,
+        ...style
+      }
+    }
+  );
+}
+function ProductSelection({
+  load,
+  value,
+  onChange,
+  initialItems = [],
+  locale,
+  maxQuantity = 99
+}) {
+  const t = useT(), loc = useFormatLocale(locale), [query, setQuery] = React27__namespace.useState(""), [page, setPage] = React27__namespace.useState(0), [items, setItems] = React27__namespace.useState([]), [more, setMore] = React27__namespace.useState(false), [busy, setBusy] = React27__namespace.useState(false), [error, setError] = React27__namespace.useState("");
+  const known = React27__namespace.useRef({});
+  for (const item of initialItems) known.current[item.variant_id] = item;
+  React27__namespace.useEffect(() => {
+    const controller = new AbortController();
+    setBusy(true);
+    setError("");
+    const timer = setTimeout(() => {
+      void load(query, page * 50, controller.signal).then((result) => {
+        if (controller.signal.aborted) return;
+        for (const item of result.items)
+          known.current[item.variant_id] = item;
+        setItems((old) => page ? [...old, ...result.items] : result.items);
+        setMore(result.more);
+      }).catch((err) => {
+        if (!controller.signal.aborted)
+          setError(err instanceof Error ? err.message : String(err));
+      }).finally(() => {
+        if (!controller.signal.aborted) setBusy(false);
+      });
+    }, 180);
+    return () => {
+      clearTimeout(timer);
+      controller.abort();
+    };
+  }, [load, query, page]);
+  const selected = Object.keys(value).filter((id) => value[id] > 0).map((id) => known.current[id]).filter(Boolean);
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "grid", gap: ".75rem" }, children: [
+    selected.map((p) => /* @__PURE__ */ jsxRuntime.jsxs(
+      "label",
+      {
+        style: {
+          display: "flex",
+          justifyContent: "space-between",
+          gap: "1rem",
+          alignItems: "center"
+        },
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
+            p.title,
+            " ",
+            p.variant_title,
+            /* @__PURE__ */ jsxRuntime.jsx("small", { style: { display: "block", color: "var(--nv-muted)" }, children: p.sku })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "input",
+            {
+              "aria-label": `${t("subscriptions.quantity")}: ${p.title}`,
+              type: "number",
+              min: 0,
+              max: maxQuantity,
+              value: value[p.variant_id] ?? 0,
+              onChange: (e) => onChange({ ...value, [p.variant_id]: Number(e.target.value) }),
+              style: {
+                font: "inherit",
+                width: "4.5rem",
+                padding: ".5rem",
+                border: "1px solid var(--nv-border)",
+                borderRadius: "var(--nv-radius)",
+                color: "var(--nv-fg)",
+                background: "var(--nv-bg)"
+              }
+            }
+          )
+        ]
+      },
+      p.variant_id
+    )),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "input",
+      {
+        "aria-label": t("subscriptions.searchProducts"),
+        placeholder: t("subscriptions.searchProducts"),
+        value: query,
+        onChange: (e) => {
+          setQuery(e.target.value);
+          setPage(0);
+          setItems([]);
+        },
+        style: {
+          font: "inherit",
+          padding: ".65rem",
+          border: "1px solid var(--nv-border)",
+          borderRadius: "var(--nv-radius)",
+          background: "var(--nv-bg)",
+          color: "var(--nv-fg)"
+        }
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "ul",
+      {
+        style: {
+          listStyle: "none",
+          padding: 0,
+          margin: 0,
+          maxHeight: "18rem",
+          overflowY: "auto"
+        },
+        children: items.filter((p) => !value[p.variant_id]).map((p) => /* @__PURE__ */ jsxRuntime.jsxs(
+          "li",
+          {
+            style: {
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "space-between",
+              gap: "1rem",
+              padding: ".5rem 0",
+              borderBottom: "1px solid var(--nv-border)"
+            },
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
+                p.title,
+                " ",
+                p.variant_title,
+                /* @__PURE__ */ jsxRuntime.jsx("small", { style: { display: "block", color: "var(--nv-muted)" }, children: formatCents(p.unit_gross, p.currency, loc) })
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                SubscriptionButton,
+                {
+                  "aria-label": `${t("subscriptions.addProduct")}: ${p.title}`,
+                  onClick: () => onChange({ ...value, [p.variant_id]: 1 }),
+                  children: "+"
+                }
+              )
+            ]
+          },
+          p.variant_id
+        ))
+      }
+    ),
+    busy ? /* @__PURE__ */ jsxRuntime.jsx("p", { role: "status", children: t("subscriptions.loadingProducts") }) : more ? /* @__PURE__ */ jsxRuntime.jsx(SubscriptionButton, { onClick: () => setPage((p) => p + 1), children: t("account.loadMore") }) : null,
+    error && /* @__PURE__ */ jsxRuntime.jsx("p", { role: "alert", children: error })
+  ] });
+}
+function SubscriptionManager({
+  subscriptionId,
+  locale
+}) {
+  const state = useCustomerSubscription(subscriptionId), { customer } = useAccount(), t = useT();
+  if (!customer) return null;
+  if (state.error)
+    return /* @__PURE__ */ jsxRuntime.jsxs("p", { role: "alert", children: [
+      state.error.message,
+      " ",
+      /* @__PURE__ */ jsxRuntime.jsx(SubscriptionButton, { onClick: () => void state.refresh(), children: t("account.retry") })
+    ] });
+  if (!state.subscription)
+    return /* @__PURE__ */ jsxRuntime.jsx("p", { role: "status", children: t("subscriptions.loading") });
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Manager,
+    {
+      state,
+      locale
+    },
+    `${customer.id}:${subscriptionId}:${state.subscription.version}:${state.readRevision}`
+  );
+}
+function Manager({
+  state,
+  locale
+}) {
+  const { subscription: s, api, refresh } = state, t = useT(), loc = useFormatLocale(locale);
+  const [mode, setMode] = React27__namespace.useState(null);
+  const [option, setOption] = React27__namespace.useState("");
+  const [quantities, setQuantities] = React27__namespace.useState(
+    {}
+  );
+  const [quote, setQuote] = React27__namespace.useState(null);
+  const [busy, setBusy] = React27__namespace.useState(false), [locked, setLocked] = React27__namespace.useState(false), [error, setError] = React27__namespace.useState("");
+  const [consent, setConsent] = React27__namespace.useState(false);
+  const upcoming = s?.upcoming, heading = React27__namespace.useRef(null);
+  const loader = React27__namespace.useCallback(
+    (q, offset, signal) => api.products(s.id, {
+      q,
+      offset,
+      signal,
+      scope: mode === "mix" ? "mix" : "one_time"
+    }),
+    [api, s?.id, mode]
+  );
+  React27__namespace.useEffect(() => {
+    if (mode) heading.current?.focus();
+  }, [mode]);
+  if (!s || !upcoming) return null;
+  if (s.status !== "active")
+    return /* @__PURE__ */ jsxRuntime.jsx("section", { style: subscriptionPanel, children: /* @__PURE__ */ jsxRuntime.jsx("h2", { children: t(`subscriptions.status.${s.status}`) }) });
+  const money = (n) => formatCents(n, s.currency, loc);
+  const scope = mode === "mix" ? "recurring" : "one_time";
+  const selected = Object.entries(quantities).filter(([, quantity]) => quantity > 0).map(([variant_id, quantity]) => ({ variant_id, quantity }));
+  const changes = mode === "cadence" ? { cadence_option_id: option } : { lines: selected };
+  const amount = quote ? "recurring_total_cents" in quote ? quote.recurring_total_cents : quote.after.total_cents : upcoming.total_cents;
+  const enter = (next) => {
+    setMode(next);
+    setQuote(null);
+    setConsent(false);
+    setError("");
+    setOption("");
+    setQuantities(
+      Object.fromEntries(
+        upcoming.lines.filter(
+          (li) => li.scope === (next === "mix" ? "recurring" : "one_time")
+        ).map((li) => [li.variant_id, li.quantity])
+      )
+    );
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "section",
+    {
+      style: { ...subscriptionPanel, display: "grid", gap: "1rem" },
+      "aria-busy": busy,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("header", { children: [
+          /* @__PURE__ */ jsxRuntime.jsx("h2", { style: { margin: 0, fontWeight: 500 }, children: t("subscriptions.nextDelivery") }),
+          /* @__PURE__ */ jsxRuntime.jsxs("p", { children: [
+            t("subscriptions.chargeDate"),
+            ":",
+            " ",
+            /* @__PURE__ */ jsxRuntime.jsx("time", { dateTime: upcoming.due_at, children: new Date(upcoming.due_at).toLocaleString(loc) })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx("ul", { style: { listStyle: "none", margin: 0, padding: 0 }, children: upcoming.lines.map((li) => /* @__PURE__ */ jsxRuntime.jsxs(
+          "li",
+          {
+            style: {
+              display: "flex",
+              justifyContent: "space-between",
+              gap: "1rem",
+              padding: ".65rem 0",
+              borderBottom: "1px solid var(--nv-border)"
+            },
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
+                li.title ?? li.sku,
+                " \xD7 ",
+                li.quantity,
+                li.scope === "one_time" ? /* @__PURE__ */ jsxRuntime.jsx("small", { style: { display: "block", color: "var(--nv-muted)" }, children: t("subscriptions.onlyNext") }) : null
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsx("span", { children: money(li.unit_gross * li.quantity - (li.discount_cents ?? 0)) })
+            ]
+          },
+          li.line_id
+        )) }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", justifyContent: "space-between" }, children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { children: t("totals.shipping") }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { children: money(upcoming.shipping_cents) })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            style: {
+              display: "flex",
+              justifyContent: "space-between",
+              fontWeight: 500
+            },
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx("span", { children: t("subscriptions.toCharge") }),
+              /* @__PURE__ */ jsxRuntime.jsx("span", { children: money(upcoming.total_cents) })
+            ]
+          }
+        ),
+        upcoming.capabilities.reminder?.enabled ? /* @__PURE__ */ jsxRuntime.jsxs("p", { style: { color: "var(--nv-muted)", margin: 0 }, children: [
+          t("subscriptions.noticeStatus"),
+          ":",
+          " ",
+          t(`subscriptions.notice.${upcoming.reminder?.status ?? "pending"}`)
+        ] }) : null,
+        upcoming.charge_held_for_notice && /* @__PURE__ */ jsxRuntime.jsx("p", { role: "status", children: t("subscriptions.noticeHeld") }),
+        !upcoming.editable ? /* @__PURE__ */ jsxRuntime.jsx("p", { role: "status", children: t(
+          `subscriptions.locked.${upcoming.locked_reason_code ?? "in_flight"}`
+        ) }) : /* @__PURE__ */ jsxRuntime.jsxs("p", { style: { color: "var(--nv-muted)", margin: 0 }, children: [
+          t("subscriptions.editUntil"),
+          ":",
+          " ",
+          new Date(upcoming.edit_cutoff_at).toLocaleString(loc)
+        ] }),
+        !mode ? /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", gap: ".5rem", flexWrap: "wrap" }, children: [
+          !!upcoming.capabilities.cadence_options?.length && /* @__PURE__ */ jsxRuntime.jsx(
+            SubscriptionButton,
+            {
+              disabled: !upcoming.editable,
+              onClick: () => enter("cadence"),
+              children: t("subscriptions.changeInterval")
+            }
+          ),
+          upcoming.capabilities.one_time_addons && /* @__PURE__ */ jsxRuntime.jsx(
+            SubscriptionButton,
+            {
+              disabled: !upcoming.editable,
+              onClick: () => enter("addons"),
+              children: t("subscriptions.addNext")
+            }
+          ),
+          upcoming.capabilities.mix && /* @__PURE__ */ jsxRuntime.jsx(
+            SubscriptionButton,
+            {
+              disabled: !upcoming.editable,
+              onClick: () => enter("mix"),
+              children: t("subscriptions.changeMix")
+            }
+          ),
+          s.allowed_actions.skip && /* @__PURE__ */ jsxRuntime.jsx(SubscriptionButton, { onClick: () => enter("skip"), children: t("subscriptions.skip") })
+        ] }) : /* @__PURE__ */ jsxRuntime.jsx(
+          "form",
+          {
+            noValidate: true,
+            onSubmit: async (event) => {
+              event.preventDefault();
+              if (busy || locked) return;
+              setBusy(true);
+              setError("");
+              try {
+                if (mode === "skip") {
+                  if (!consent) return;
+                  try {
+                    await api.skipNext(s.id, s.version);
+                    await refresh();
+                  } catch (err) {
+                    setLocked(true);
+                    throw err;
+                  }
+                } else if (!quote) {
+                  const q = mode === "addons" ? await api.previewNextItems(s.id, { addons: selected }) : await api.previewChanges(s.id, changes);
+                  setQuote(q);
+                  setConsent(false);
+                } else {
+                  if (!consent) return;
+                  try {
+                    if (mode === "addons")
+                      await api.commitNextItems(
+                        s.id,
+                        { addons: selected },
+                        quote,
+                        "Customer explicitly accepted the displayed next-delivery contents and total"
+                      );
+                    else
+                      await api.commitChanges(
+                        s.id,
+                        changes,
+                        quote,
+                        "Customer explicitly accepted the displayed future terms, dates and price"
+                      );
+                    await refresh();
+                  } catch (err) {
+                    setLocked(true);
+                    throw err;
+                  }
+                }
+              } catch (err) {
+                setError(err instanceof Error ? err.message : String(err));
+              } finally {
+                setBusy(false);
+              }
+            },
+            style: {
+              borderTop: "1px solid var(--nv-border)",
+              paddingTop: "1rem",
+              display: "grid",
+              gap: "1rem"
+            },
+            children: /* @__PURE__ */ jsxRuntime.jsxs(
+              "fieldset",
+              {
+                disabled: busy,
+                style: {
+                  border: 0,
+                  margin: 0,
+                  padding: 0,
+                  display: "grid",
+                  gap: "1rem",
+                  minWidth: 0
+                },
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    "h3",
+                    {
+                      ref: heading,
+                      tabIndex: -1,
+                      style: { margin: 0, fontWeight: 500 },
+                      children: t(
+                        mode === "cadence" ? "subscriptions.changeInterval" : mode === "mix" ? "subscriptions.changeMix" : mode === "skip" ? "subscriptions.skip" : "subscriptions.addNext"
+                      )
+                    }
+                  ),
+                  mode === "skip" ? /* @__PURE__ */ jsxRuntime.jsx("p", { children: t("subscriptions.skipWarning") }) : quote ? /* @__PURE__ */ jsxRuntime.jsxs("div", { role: "status", children: [
+                    /* @__PURE__ */ jsxRuntime.jsx("p", { children: t(
+                      mode === "addons" ? "subscriptions.onlyNext" : "subscriptions.futureOnly"
+                    ) }),
+                    mode === "cadence" ? /* @__PURE__ */ jsxRuntime.jsxs("p", { children: [
+                      t("subscriptions.nextUnchanged"),
+                      ":",
+                      " ",
+                      new Date(
+                        String(quote.after.next_at)
+                      ).toLocaleString(loc)
+                    ] }) : null,
+                    "upcoming_dates" in quote && quote.upcoming_dates?.map((date) => /* @__PURE__ */ jsxRuntime.jsx("p", { children: new Date(date).toLocaleString(loc) }, date)),
+                    mode === "addons" && "addons" in quote.after && quote.after.addons.map(
+                      (li) => /* @__PURE__ */ jsxRuntime.jsxs("p", { children: [
+                        li.title ?? li.sku ?? li.variant_id,
+                        " \xD7 ",
+                        li.quantity
+                      ] }, li.variant_id)
+                    ),
+                    "display_items" in quote && quote.display_items?.map((li) => /* @__PURE__ */ jsxRuntime.jsxs("p", { children: [
+                      li.title,
+                      " \xD7 ",
+                      li.quantity
+                    ] }, li.variant_id)),
+                    /* @__PURE__ */ jsxRuntime.jsxs("strong", { children: [
+                      t("subscriptions.reviewTotal"),
+                      ": ",
+                      money(amount)
+                    ] })
+                  ] }) : mode === "cadence" ? /* @__PURE__ */ jsxRuntime.jsx(
+                    "div",
+                    {
+                      role: "group",
+                      "aria-label": t("subscriptions.changeInterval"),
+                      style: { display: "flex", gap: ".5rem", flexWrap: "wrap" },
+                      children: upcoming.capabilities.cadence_options?.map((o) => /* @__PURE__ */ jsxRuntime.jsx(
+                        SubscriptionButton,
+                        {
+                          "aria-pressed": option === o.id,
+                          onClick: () => setOption(o.id),
+                          children: t(`subscriptions.unit.${o.unit}`, { count: o.count })
+                        },
+                        o.id
+                      ))
+                    }
+                  ) : /* @__PURE__ */ jsxRuntime.jsx(
+                    ProductSelection,
+                    {
+                      maxQuantity: mode === "mix" ? upcoming.capabilities.mix?.per_sku_max ?? 99 : 99,
+                      load: loader,
+                      value: quantities,
+                      onChange: setQuantities,
+                      initialItems: upcoming.lines.filter((li) => li.scope === scope).map((li) => ({
+                        ...li,
+                        title: li.title ?? li.sku ?? li.variant_id,
+                        currency: s.currency,
+                        variant_title: li.variant_title ?? null,
+                        sku: li.sku ?? null
+                      })),
+                      locale: loc
+                    }
+                  ),
+                  (quote || mode === "skip") && /* @__PURE__ */ jsxRuntime.jsxs(
+                    "label",
+                    {
+                      style: {
+                        display: "flex",
+                        gap: ".5rem",
+                        alignItems: "flex-start"
+                      },
+                      children: [
+                        /* @__PURE__ */ jsxRuntime.jsx(
+                          "input",
+                          {
+                            type: "checkbox",
+                            checked: consent,
+                            onChange: (e) => setConsent(e.target.checked)
+                          }
+                        ),
+                        t("subscriptions.acceptChange")
+                      ]
+                    }
+                  ),
+                  error && /* @__PURE__ */ jsxRuntime.jsx("p", { role: "alert", children: error }),
+                  locked ? /* @__PURE__ */ jsxRuntime.jsx(SubscriptionButton, { onClick: () => void refresh(), children: t("subscriptions.reloadBeforeRetry") }) : /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", gap: ".5rem", flexWrap: "wrap" }, children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(
+                      SubscriptionButton,
+                      {
+                        disabled: busy,
+                        onClick: () => quote ? (setQuote(null), setConsent(false)) : enter(null),
+                        children: t(quote ? "subscriptions.back" : "account.cancel")
+                      }
+                    ),
+                    /* @__PURE__ */ jsxRuntime.jsx(
+                      SubscriptionButton,
+                      {
+                        type: "submit",
+                        primary: true,
+                        disabled: busy || (quote || mode === "skip" ? !consent : mode === "cadence" ? !option : mode === "mix" ? !selected.length : false),
+                        children: busy ? t("subscriptions.loading") : t(
+                          quote || mode === "skip" ? "subscriptions.confirmChange" : "subscriptions.reviewChange"
+                        )
+                      }
+                    )
+                  ] })
+                ]
+              }
+            )
+          }
+        )
+      ]
+    }
+  );
+}
 function serializeJsonLd(data) {
   return JSON.stringify(data).replace(/</g, "\\u003c").replace(/>/g, "\\u003e").replace(/&/g, "\\u0026");
 }
@@ -3569,6 +4416,118 @@ function OrganizationJsonLd({
   });
   return /* @__PURE__ */ jsxRuntime.jsx(JsonLd, { data });
 }
+function Mix({
+  plan,
+  marketId,
+  locale,
+  onAdded
+}) {
+  const client = useStorefront(), cart = useCart(), t = useT(), [value, setValue] = React27__namespace.useState({}), [busy, setBusy] = React27__namespace.useState(false), [error, setError] = React27__namespace.useState(""), [locked, setLocked] = React27__namespace.useState(false);
+  const load = React27__namespace.useCallback(
+    (q, offset, signal) => client.subscriptions.mixProducts(plan.id, {
+      q,
+      offset,
+      marketId,
+      signal
+    }),
+    [client, plan.id, marketId]
+  );
+  const loc = useFormatLocale(locale);
+  const mix = plan.capabilities?.mix;
+  if (!mix) return null;
+  const units = Object.values(value).reduce((a, b) => a + b, 0), lines = Object.entries(value).filter(([, q]) => q > 0).map(([variant_id, quantity]) => ({ variant_id, quantity }));
+  const valid = units >= mix.min_units && units <= mix.max_units && lines.every(
+    (li) => Number.isInteger(li.quantity) && li.quantity <= (mix.per_sku_max ?? 99)
+  ) && (mix.groups ?? []).every((g) => {
+    const n = lines.filter((li) => g.variant_ids.includes(li.variant_id)).reduce((a, li) => a + li.quantity, 0);
+    return n >= g.min_units && n <= g.max_units;
+  });
+  return /* @__PURE__ */ jsxRuntime.jsxs("section", { style: { ...subscriptionPanel, display: "grid", gap: "1rem" }, children: [
+    /* @__PURE__ */ jsxRuntime.jsx("h2", { style: { fontWeight: 500, margin: 0 }, children: plan.name }),
+    plan.price && /* @__PURE__ */ jsxRuntime.jsxs("p", { children: [
+      formatCents(plan.price.amount_cents, plan.price.currency, loc),
+      " \xB7",
+      " ",
+      t("subscriptions.mixPrice")
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx("p", { role: "status", children: t("subscriptions.mixCount", {
+      count: units,
+      min: mix.min_units,
+      max: mix.max_units
+    }) }),
+    mix.groups?.map((g) => /* @__PURE__ */ jsxRuntime.jsxs("p", { children: [
+      g.name,
+      ": ",
+      g.min_units,
+      "\u2013",
+      g.max_units
+    ] }, g.name)),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "fieldset",
+      {
+        disabled: busy || locked,
+        style: { border: 0, padding: 0, margin: 0, minWidth: 0 },
+        children: /* @__PURE__ */ jsxRuntime.jsx(
+          ProductSelection,
+          {
+            maxQuantity: mix.per_sku_max ?? 99,
+            load,
+            value,
+            onChange: (v) => {
+              setValue(v);
+              setError("");
+            },
+            locale
+          }
+        )
+      }
+    ),
+    error && /* @__PURE__ */ jsxRuntime.jsx("p", { role: "alert", children: error }),
+    locked ? /* @__PURE__ */ jsxRuntime.jsx(
+      SubscriptionButton,
+      {
+        onClick: async () => {
+          await cart.refresh();
+          setLocked(false);
+        },
+        children: t("subscriptions.reloadBeforeRetry")
+      }
+    ) : /* @__PURE__ */ jsxRuntime.jsx(
+      SubscriptionButton,
+      {
+        primary: true,
+        disabled: !valid || busy || cart.loading,
+        onClick: async () => {
+          setBusy(true);
+          setError("");
+          try {
+            await cart.setSubscriptionMix(
+              plan.id,
+              lines,
+              cart.cart?.line_items.filter((li) => li.subscription_plan_id).map((li) => li.id) ?? []
+            );
+            onAdded?.();
+          } catch (err) {
+            setLocked(true);
+            setError(err instanceof Error ? err.message : String(err));
+          } finally {
+            setBusy(false);
+          }
+        },
+        children: t("subscriptions.addMix")
+      }
+    )
+  ] });
+}
+function SubscriptionMix(props) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Mix,
+    {
+      ...props
+    },
+    `${props.plan.id}:${props.plan.version}:${props.marketId ?? ""}`
+  );
+}
 
 exports.AccountDashboard = AccountDashboard;
 exports.AccountProvider = AccountProvider;
@@ -3609,10 +4568,15 @@ exports.ProductDetailPage = ProductDetailPage;
 exports.ProductGallery = ProductGallery;
 exports.ProductJsonLd = ProductJsonLd;
 exports.ProfileEditor = ProfileEditor;
+exports.PurchaseOptions = PurchaseOptions;
 exports.ShippingPicker = ShippingPicker;
 exports.SortSelect = SortSelect;
 exports.StatusBanner = StatusBanner;
 exports.StockBadge = StockBadge;
+exports.SubscriptionList = SubscriptionList;
+exports.SubscriptionManager = SubscriptionManager;
+exports.SubscriptionMix = SubscriptionMix;
+exports.SubscriptionTerms = SubscriptionTerms;
 exports.TagFilter = TagFilter;
 exports.ThemeProvider = ThemeProvider;
 exports.TransferInstructions = TransferInstructions;
@@ -3630,6 +4594,8 @@ exports.themeToCssVars = themeToCssVars;
 exports.useAccount = useAccount;
 exports.useCart = useCart;
 exports.useCheckout = useCheckout;
+exports.useCustomerSubscription = useCustomerSubscription;
+exports.useCustomerSubscriptions = useCustomerSubscriptions;
 exports.useI18n = useI18n;
 exports.useMagicLinkVerify = useMagicLinkVerify;
 exports.useOrderStatus = useOrderStatus;