@nevios/storefront-kit 1.4.0 → 1.5.0

package/dist/index.cjs

@@ -248,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",
@@ -454,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.",
@@ -1185,7 +1263,9 @@ function PurchaseOptions({ plans, value, onChange, disabled, locale }) {
   ] });
 }
 var CartContext = React27__namespace.createContext(null);
-function CartProvider({ children }) {
+function CartProvider({
+  children
+}) {
   const client = useStorefront();
   const [cart, setCart] = React27__namespace.useState(null);
   const [loading, setLoading] = React27__namespace.useState(false);
@@ -1219,6 +1299,11 @@ function CartProvider({ children }) {
       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)),
@@ -3575,7 +3660,9 @@ function AccountSecurity() {
 function useCustomerSubscriptions() {
   const client = useStorefront();
   const { customer } = useAccount();
-  const [dataOwner, setDataOwner] = React27__namespace.useState(void 0);
+  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);
@@ -3599,7 +3686,8 @@ function useCustomerSubscriptions() {
         setError(null);
       }
     } catch (err) {
-      if (current === generation.current) setError(err instanceof Error ? err : new Error(String(err)));
+      if (current === generation.current)
+        setError(err instanceof Error ? err : new Error(String(err)));
     } finally {
       if (current === generation.current) setLoading(false);
     }
@@ -3611,11 +3699,18 @@ function useCustomerSubscriptions() {
       generation.current++;
     };
   }, [refresh]);
-  return { subscriptions: dataOwner === owner ? subscriptions : [], loading, error, refresh, api };
+  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);
@@ -3636,11 +3731,13 @@ function useCustomerSubscription(id) {
       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)));
+      if (current === generation.current)
+        setError(err instanceof Error ? err : new Error(String(err)));
     } finally {
       if (current === generation.current) setLoading(false);
     }
@@ -3652,7 +3749,14 @@ function useCustomerSubscription(id) {
       generation.current++;
     };
   }, [refresh]);
-  return { subscription: dataKey === `${owner}:${id}` ? subscription : null, loading, error, refresh, api };
+  return {
+    subscription: dataKey === `${owner}:${id}` ? subscription : null,
+    loading,
+    error,
+    refresh,
+    api,
+    readRevision
+  };
 }
 function SubscriptionList({ href, locale }) {
   const t = useT();
@@ -3669,6 +3773,546 @@ function SubscriptionList({ href, locale }) {
     ] }) }, 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");
 }
@@ -3772,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;
@@ -3818,6 +4574,8 @@ 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;