@thorprovider/blocks 4.0.0 → 4.1.0

package/dist/blocks/designs/checkout-commerce-v1/block.mjs

@@ -0,0 +1,2467 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { BlockDataProvider, useBlockData } from "./data-context.mjs";
+import { Badge } from "../../../ui/badge.mjs";
+import { Button } from "../../../ui/button.mjs";
+import { Card, CardContent, CardFooter, CardHeader } from "../../../ui/card.mjs";
+import { PRODUCT_IMAGE_FALLBACK } from "../../../lib/contracts.mjs";
+import { useEffect, useId, useRef, useState } from "react";
+function money(cents, data) {
+  const currencyFormatter = new Intl.NumberFormat(data.meta.locale, {
+    style: "currency",
+    currency: data.meta.currency,
+    minimumFractionDigits: 2
+  });
+  return currencyFormatter.format(cents / 100);
+}
+const VARIANT_SECONDARY = "secondary";
+const VARIANT_OUTLINE = "outline";
+const VARIANT_GHOST = "ghost";
+const VARIANT_DESTRUCTIVE = "destructive";
+const EMPTY_OPTION = "";
+const AUTOCOMPLETE_NAME = "name";
+const AUTOCOMPLETE_EMAIL = "email";
+const AUTOCOMPLETE_TEL = "tel";
+function fill(template, values) {
+  return Object.keys(values).reduce(
+    (text, key) => text.split(`{${key}}`).join(String(values[key])),
+    template
+  );
+}
+function countLabel(count, one, many) {
+  return count === 1 ? one : fill(many, { count });
+}
+function addressHeadline(address) {
+  return `${address.label} \xB7 ${address.province}`;
+}
+function addressSummary(address) {
+  return [address.line1, address.line2, address.city].filter(Boolean).join(", ");
+}
+function pickupDetail(point) {
+  return [point.address, point.hours].filter(Boolean).join(" \xB7 ");
+}
+function unitPriceFor(line, quantity) {
+  let price = line.unitCents;
+  for (const tier of line.tiers ?? []) {
+    if (quantity >= tier.minQuantity) price = tier.unitCents;
+  }
+  return price;
+}
+function currentTierFor(line, quantity) {
+  let current = null;
+  for (const tier of line.tiers ?? []) {
+    if (quantity >= tier.minQuantity) current = tier;
+  }
+  return current;
+}
+function nextTierFor(line, quantity) {
+  return (line.tiers ?? []).find((tier) => tier.minQuantity > quantity) ?? null;
+}
+function lineNetTotal(line) {
+  return unitPriceFor(line, line.quantity) * line.quantity - (line.lineDiscountCents ?? 0);
+}
+function tierRangeLabel(tier, data) {
+  return tier.maxQuantity > 0 ? fill(data.labels.tierRange, { min: tier.minQuantity, max: tier.maxQuantity }) : fill(data.labels.tierRangeFrom, { min: tier.minQuantity });
+}
+function moveOptionFocus(event, index, options, onSelect) {
+  const key = event.key;
+  let nextIndex = -1;
+  if (key === "ArrowDown" || key === "ArrowRight") nextIndex = (index + 1) % options.length;
+  if (key === "ArrowUp" || key === "ArrowLeft") nextIndex = (index - 1 + options.length) % options.length;
+  if (nextIndex < 0) return;
+  event.preventDefault();
+  const next = options[nextIndex];
+  if (next.disabled) return;
+  onSelect(next.id);
+  const siblings = event.currentTarget.parentElement?.children;
+  const target = siblings ? siblings[nextIndex] : void 0;
+  if (target instanceof HTMLElement) target.focus();
+}
+function OptionGroup({
+  legend,
+  options,
+  selectedId,
+  onSelect,
+  className
+}) {
+  const uid = useId();
+  const labelId = `${uid}-label`;
+  return /* @__PURE__ */ jsxs("div", { children: [
+    /* @__PURE__ */ jsx("p", { id: labelId, className: "text-xs font-medium text-muted-foreground", children: legend }),
+    /* @__PURE__ */ jsx("div", { role: "radiogroup", "aria-labelledby": labelId, className, children: options.map((option, index) => /* @__PURE__ */ jsx(
+      Button,
+      {
+        type: "button",
+        role: "radio",
+        "aria-checked": selectedId === option.id,
+        tabIndex: selectedId === option.id ? 0 : -1,
+        disabled: option.disabled,
+        variant: selectedId === option.id ? "secondary" : "outline",
+        className: "h-auto w-full min-w-0 justify-start whitespace-normal px-3 py-2 text-left hover:bg-muted hover:text-foreground",
+        onClick: () => onSelect(option.id),
+        onKeyDown: (event) => moveOptionFocus(event, index, options, onSelect),
+        children: /* @__PURE__ */ jsxs("span", { className: "flex w-full min-w-0 flex-col items-start gap-0.5", children: [
+          /* @__PURE__ */ jsxs("span", { className: "flex w-full min-w-0 items-center justify-between gap-2", children: [
+            /* @__PURE__ */ jsx("span", { className: "text-sm font-medium", children: option.title }),
+            /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-1.5", children: [
+              option.previousMeta ? /* @__PURE__ */ jsx("span", { className: "text-xs font-normal text-muted-foreground line-through", children: option.previousMeta }) : null,
+              option.meta ? /* @__PURE__ */ jsx("span", { className: "text-xs font-semibold", children: option.meta }) : null
+            ] })
+          ] }),
+          option.detail ? /* @__PURE__ */ jsx("span", { className: "text-xs font-normal text-muted-foreground", children: option.detail }) : null,
+          option.disabled && option.reason ? /* @__PURE__ */ jsx("span", { className: "text-xs font-normal text-destructive", children: option.reason }) : null
+        ] })
+      },
+      option.id
+    )) })
+  ] });
+}
+function AddressChoices({
+  legend,
+  name,
+  addresses,
+  selectedId,
+  onSelect,
+  labels
+}) {
+  return /* @__PURE__ */ jsxs("fieldset", { children: [
+    /* @__PURE__ */ jsx("legend", { className: "text-sm font-medium", children: legend }),
+    /* @__PURE__ */ jsx("div", { className: "mt-2 space-y-2", children: addresses.map((address) => /* @__PURE__ */ jsxs(
+      "label",
+      {
+        className: "flex cursor-pointer items-start gap-3 rounded-md border border-border bg-background p-3",
+        children: [
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              type: "radio",
+              name,
+              checked: selectedId === address.id,
+              onChange: () => onSelect(address.id),
+              className: "mt-1 size-4"
+            }
+          ),
+          /* @__PURE__ */ jsxs("span", { className: "flex min-w-0 flex-col gap-1", children: [
+            /* @__PURE__ */ jsxs("span", { className: "flex flex-wrap items-center gap-2", children: [
+              /* @__PURE__ */ jsx("span", { className: "text-sm font-medium", children: address.label }),
+              address.isDefault ? /* @__PURE__ */ jsx(Badge, { variant: VARIANT_SECONDARY, children: labels.addressDefaultBadge }) : null
+            ] }),
+            /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground", children: address.recipient }),
+            /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground", children: addressSummary(address) }),
+            /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground", children: address.phone })
+          ] })
+        ]
+      },
+      address.id
+    )) })
+  ] });
+}
+function AddressForm({
+  labels,
+  countries,
+  authenticated,
+  onSave,
+  onCancel
+}) {
+  const data = useBlockData();
+  const emptyDraft = {
+    firstName: "",
+    lastName: "",
+    phone: "",
+    countryCode: data.countries[0].code,
+    province: "",
+    city: "",
+    line1: "",
+    line2: "",
+    postalCode: "",
+    instructions: ""
+  };
+  const uid = useId();
+  const [draft, setDraft] = useState(emptyDraft);
+  const [saveToAccount, setSaveToAccount] = useState(authenticated);
+  const [errors, setErrors] = useState({});
+  const country = countries.find((item) => item.code === draft.countryCode);
+  const province = country?.provinces.find((item) => item.name === draft.province);
+  const postalRule = country?.postalCode ?? "hidden";
+  function setField(key, value) {
+    setDraft((current) => ({ ...current, [key]: value }));
+  }
+  function handleCountry(code) {
+    setDraft((current) => ({ ...current, countryCode: code, province: "", city: "" }));
+  }
+  function handleProvince(name) {
+    setDraft((current) => ({ ...current, province: name, city: "" }));
+  }
+  function handleSubmit(event) {
+    event.preventDefault();
+    const next = {};
+    if (!draft.firstName.trim()) next.firstName = labels.addressRequired;
+    if (!draft.lastName.trim()) next.lastName = labels.addressRequired;
+    if (!draft.phone.trim()) next.phone = labels.addressRequired;
+    if (!draft.countryCode) next.countryCode = labels.addressRequired;
+    if (!draft.province) next.province = labels.addressRequired;
+    if (!draft.city) next.city = labels.addressRequired;
+    if (!draft.line1.trim()) next.line1 = labels.addressRequired;
+    if (postalRule === "required" && !draft.postalCode.trim()) {
+      next.postalCode = labels.addressRequired;
+    }
+    setErrors(next);
+    if (Object.keys(next).length > 0) return;
+    const recipient = `${draft.firstName.trim()} ${draft.lastName.trim()}`;
+    onSave(
+      {
+        id: `created-${Date.now()}`,
+        label: saveToAccount ? fill(labels.addressNewLabel, { city: draft.city }) : labels.addressTemporary,
+        recipient,
+        line1: draft.line1.trim(),
+        line2: draft.line2.trim(),
+        city: draft.city,
+        province: draft.province,
+        postalCode: draft.postalCode.trim(),
+        phone: draft.phone.trim(),
+        isDefault: false
+      },
+      saveToAccount
+    );
+  }
+  function field(key, label, type, autoComplete, requiredField, span) {
+    const fieldId = `${uid}-${key}`;
+    const error = errors[key];
+    return /* @__PURE__ */ jsxs("div", { className: span ? "sm:col-span-2" : void 0, children: [
+      /* @__PURE__ */ jsx("label", { htmlFor: fieldId, className: "text-xs font-medium", children: label }),
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          id: fieldId,
+          type,
+          autoComplete,
+          value: draft[key],
+          required: requiredField,
+          onChange: (event) => setField(key, event.target.value),
+          "aria-invalid": error ? true : void 0,
+          "aria-describedby": error ? `${fieldId}-error` : void 0,
+          className: "mt-1 h-10 w-full rounded-md border border-input bg-background px-3 text-sm"
+        }
+      ),
+      error ? /* @__PURE__ */ jsx("p", { id: `${fieldId}-error`, className: "mt-1 text-xs text-destructive", children: error }) : null
+    ] });
+  }
+  return /* @__PURE__ */ jsxs("form", { onSubmit: handleSubmit, noValidate: true, children: [
+    /* @__PURE__ */ jsx("p", { className: "text-sm font-semibold", children: labels.addressFormTitle }),
+    /* @__PURE__ */ jsxs("div", { className: "mt-3 grid gap-3 sm:grid-cols-2", children: [
+      field("firstName", labels.addressFirstName, "text", "given-name", true, false),
+      field("lastName", labels.addressLastName, "text", "family-name", true, false),
+      field("phone", labels.addressPhone, "tel", "tel", true, false),
+      /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx("label", { htmlFor: `${uid}-country`, className: "text-xs font-medium", children: labels.addressCountry }),
+        /* @__PURE__ */ jsxs(
+          "select",
+          {
+            id: `${uid}-country`,
+            value: draft.countryCode,
+            onChange: (event) => handleCountry(event.target.value),
+            className: "mt-1 h-10 w-full rounded-md border border-input bg-background px-3 text-sm",
+            children: [
+              /* @__PURE__ */ jsx("option", { value: EMPTY_OPTION, children: labels.addressSelectPlaceholder }),
+              countries.map((item) => /* @__PURE__ */ jsx("option", { value: item.code, children: item.name }, item.code))
+            ]
+          }
+        ),
+        errors.countryCode ? /* @__PURE__ */ jsx("p", { className: "mt-1 text-xs text-destructive", children: errors.countryCode }) : null
+      ] }),
+      /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx("label", { htmlFor: `${uid}-province`, className: "text-xs font-medium", children: labels.addressProvince }),
+        /* @__PURE__ */ jsxs(
+          "select",
+          {
+            id: `${uid}-province`,
+            value: draft.province,
+            onChange: (event) => handleProvince(event.target.value),
+            className: "mt-1 h-10 w-full rounded-md border border-input bg-background px-3 text-sm",
+            children: [
+              /* @__PURE__ */ jsx("option", { value: EMPTY_OPTION, children: labels.addressSelectPlaceholder }),
+              (country?.provinces ?? []).map((item) => /* @__PURE__ */ jsx("option", { value: item.name, children: item.name }, item.name))
+            ]
+          }
+        ),
+        errors.province ? /* @__PURE__ */ jsx("p", { className: "mt-1 text-xs text-destructive", children: errors.province }) : null
+      ] }),
+      /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx("label", { htmlFor: `${uid}-city`, className: "text-xs font-medium", children: labels.addressCity }),
+        /* @__PURE__ */ jsxs(
+          "select",
+          {
+            id: `${uid}-city`,
+            value: draft.city,
+            onChange: (event) => setField("city", event.target.value),
+            className: "mt-1 h-10 w-full rounded-md border border-input bg-background px-3 text-sm",
+            children: [
+              /* @__PURE__ */ jsx("option", { value: EMPTY_OPTION, children: labels.addressSelectPlaceholder }),
+              (province?.cities ?? []).map((item) => /* @__PURE__ */ jsx("option", { value: item, children: item }, item))
+            ]
+          }
+        ),
+        errors.city ? /* @__PURE__ */ jsx("p", { className: "mt-1 text-xs text-destructive", children: errors.city }) : null
+      ] }),
+      field("line1", labels.addressLine1, "text", "address-line1", true, true),
+      field("line2", labels.addressLine2, "text", "address-line2", false, true),
+      postalRule === "hidden" ? null : field(
+        "postalCode",
+        labels.addressPostal,
+        "text",
+        "postal-code",
+        postalRule === "required",
+        false
+      ),
+      /* @__PURE__ */ jsxs("div", { className: "sm:col-span-2", children: [
+        /* @__PURE__ */ jsx("label", { htmlFor: `${uid}-instructions`, className: "text-xs font-medium", children: labels.addressInstructions }),
+        /* @__PURE__ */ jsx(
+          "textarea",
+          {
+            id: `${uid}-instructions`,
+            rows: 2,
+            value: draft.instructions,
+            onChange: (event) => setField("instructions", event.target.value),
+            className: "mt-1 w-full rounded-md border border-input bg-background px-3 py-2 text-sm"
+          }
+        )
+      ] })
+    ] }),
+    authenticated ? /* @__PURE__ */ jsxs("label", { className: "mt-3 flex items-center gap-2 text-sm", children: [
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          type: "checkbox",
+          checked: saveToAccount,
+          onChange: (event) => setSaveToAccount(event.target.checked),
+          className: "size-4"
+        }
+      ),
+      /* @__PURE__ */ jsx("span", { children: labels.addressSaveAccount })
+    ] }) : /* @__PURE__ */ jsx("p", { className: "mt-3 text-xs text-muted-foreground", children: labels.addressUseOnce }),
+    /* @__PURE__ */ jsxs("div", { className: "mt-3 flex flex-wrap gap-2", children: [
+      /* @__PURE__ */ jsx(Button, { type: "submit", size: "sm", children: labels.addressSave }),
+      /* @__PURE__ */ jsx(Button, { type: "button", size: "sm", variant: VARIANT_GHOST, onClick: onCancel, children: labels.addressCancel })
+    ] })
+  ] });
+}
+function BuyerSection({
+  uid,
+  session,
+  name,
+  email,
+  phone,
+  guestConfirmed,
+  authPhoneComplete,
+  errors,
+  onFieldChange,
+  onGuestSave,
+  onGuestEdit,
+  onAuthPhoneSave,
+  onRetrySession,
+  onStartRegistration
+}) {
+  const data = useBlockData();
+  const labels = data.labels;
+  const isGuest = session === "guest";
+  const title = isGuest ? labels.buyerTitleGuest : labels.buyerTitleAuth;
+  return /* @__PURE__ */ jsxs("section", { "aria-labelledby": `${uid}-buyer`, "aria-busy": session === "loading", children: [
+    /* @__PURE__ */ jsx(
+      "h3",
+      {
+        id: `${uid}-buyer`,
+        className: "text-xs font-semibold uppercase tracking-wide text-muted-foreground",
+        children: title
+      }
+    ),
+    session === "loading" ? /* @__PURE__ */ jsxs("div", { className: "mt-1", children: [
+      /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: labels.sessionLoading }),
+      /* @__PURE__ */ jsx("div", { className: "mt-2 h-4 w-40 rounded bg-muted" })
+    ] }) : session === "error" ? /* @__PURE__ */ jsxs("div", { className: "mt-1", children: [
+      /* @__PURE__ */ jsx("p", { className: "text-xs text-destructive", children: labels.sessionError }),
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          type: "button",
+          size: "xs",
+          variant: VARIANT_OUTLINE,
+          className: "mt-1.5",
+          onClick: onRetrySession,
+          children: labels.retryAction
+        }
+      )
+    ] }) : !isGuest ? /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsx("p", { className: "mt-1 text-sm font-medium", children: name }),
+      /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: [email, authPhoneComplete ? phone : ""].filter(Boolean).join(" \xB7 ") }),
+      !authPhoneComplete ? /* @__PURE__ */ jsxs(
+        "form",
+        {
+          className: "mt-2",
+          onSubmit: (event) => {
+            event.preventDefault();
+            onAuthPhoneSave();
+          },
+          noValidate: true,
+          children: [
+            /* @__PURE__ */ jsx("label", { htmlFor: `${uid}-buyer-phone`, className: "text-xs font-medium", children: labels.contactPhone }),
+            /* @__PURE__ */ jsxs("div", { className: "mt-1 flex flex-wrap items-start gap-2", children: [
+              /* @__PURE__ */ jsx(
+                "input",
+                {
+                  id: `${uid}-buyer-phone`,
+                  type: "tel",
+                  autoComplete: AUTOCOMPLETE_TEL,
+                  value: phone,
+                  onChange: (event) => onFieldChange("phone", event.target.value),
+                  "aria-invalid": errors.contactPhone ? true : void 0,
+                  "aria-describedby": errors.contactPhone ? `${uid}-buyer-phone-error` : void 0,
+                  className: "h-10 min-w-0 flex-1 rounded-md border border-input bg-background px-3 text-sm"
+                }
+              ),
+              /* @__PURE__ */ jsx(Button, { type: "submit", size: "sm", children: labels.buyerSavePhone })
+            ] }),
+            /* @__PURE__ */ jsx("p", { className: "mt-1 text-xs text-muted-foreground", children: labels.buyerPhoneHint }),
+            errors.contactPhone ? /* @__PURE__ */ jsx("p", { id: `${uid}-buyer-phone-error`, className: "mt-1 text-xs text-destructive", children: errors.contactPhone }) : null
+          ]
+        }
+      ) : null
+    ] }) : guestConfirmed ? /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsxs("div", { className: "mt-1 flex items-start justify-between gap-2", children: [
+        /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
+          /* @__PURE__ */ jsx("p", { className: "text-sm font-medium", children: name }),
+          /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: [email, phone].filter(Boolean).join(" \xB7 ") })
+        ] }),
+        /* @__PURE__ */ jsx(Button, { type: "button", size: "sm", variant: VARIANT_OUTLINE, onClick: onGuestEdit, children: labels.contactEdit })
+      ] }),
+      onStartRegistration ? /* @__PURE__ */ jsxs("div", { className: "mt-2 flex flex-wrap items-center gap-2", children: [
+        /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: labels.accountOptional }),
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            type: "button",
+            size: "xs",
+            variant: VARIANT_GHOST,
+            onClick: () => onStartRegistration({ name, email, phone }),
+            children: labels.createAccount
+          }
+        )
+      ] }) : null
+    ] }) : /* @__PURE__ */ jsxs(
+      "form",
+      {
+        className: "mt-2 grid gap-3 sm:grid-cols-2",
+        onSubmit: (event) => {
+          event.preventDefault();
+          onGuestSave();
+        },
+        noValidate: true,
+        children: [
+          /* @__PURE__ */ jsxs("div", { className: "sm:col-span-2", children: [
+            /* @__PURE__ */ jsx("label", { htmlFor: `${uid}-buyer-name`, className: "text-xs font-medium", children: labels.contactName }),
+            /* @__PURE__ */ jsx(
+              "input",
+              {
+                id: `${uid}-buyer-name`,
+                type: "text",
+                autoComplete: AUTOCOMPLETE_NAME,
+                value: name,
+                onChange: (event) => onFieldChange("name", event.target.value),
+                "aria-invalid": errors.contactName ? true : void 0,
+                "aria-describedby": errors.contactName ? `${uid}-buyer-name-error` : void 0,
+                className: "mt-1 h-10 w-full rounded-md border border-input bg-background px-3 text-sm"
+              }
+            ),
+            errors.contactName ? /* @__PURE__ */ jsx("p", { id: `${uid}-buyer-name-error`, className: "mt-1 text-xs text-destructive", children: errors.contactName }) : null
+          ] }),
+          /* @__PURE__ */ jsxs("div", { children: [
+            /* @__PURE__ */ jsx("label", { htmlFor: `${uid}-buyer-email`, className: "text-xs font-medium", children: labels.contactEmail }),
+            /* @__PURE__ */ jsx(
+              "input",
+              {
+                id: `${uid}-buyer-email`,
+                type: "email",
+                autoComplete: AUTOCOMPLETE_EMAIL,
+                value: email,
+                onChange: (event) => onFieldChange("email", event.target.value),
+                "aria-invalid": errors.contactEmail ? true : void 0,
+                "aria-describedby": errors.contactEmail ? `${uid}-buyer-email-error` : void 0,
+                className: "mt-1 h-10 w-full rounded-md border border-input bg-background px-3 text-sm"
+              }
+            ),
+            errors.contactEmail ? /* @__PURE__ */ jsx("p", { id: `${uid}-buyer-email-error`, className: "mt-1 text-xs text-destructive", children: errors.contactEmail }) : null
+          ] }),
+          /* @__PURE__ */ jsxs("div", { children: [
+            /* @__PURE__ */ jsx("label", { htmlFor: `${uid}-buyer-phone`, className: "text-xs font-medium", children: labels.contactPhone }),
+            /* @__PURE__ */ jsx(
+              "input",
+              {
+                id: `${uid}-buyer-phone`,
+                type: "tel",
+                autoComplete: AUTOCOMPLETE_TEL,
+                value: phone,
+                onChange: (event) => onFieldChange("phone", event.target.value),
+                "aria-invalid": errors.contactPhone ? true : void 0,
+                "aria-describedby": errors.contactPhone ? `${uid}-buyer-phone-error` : void 0,
+                className: "mt-1 h-10 w-full rounded-md border border-input bg-background px-3 text-sm"
+              }
+            ),
+            errors.contactPhone ? /* @__PURE__ */ jsx("p", { id: `${uid}-buyer-phone-error`, className: "mt-1 text-xs text-destructive", children: errors.contactPhone }) : null
+          ] }),
+          /* @__PURE__ */ jsx("div", { className: "sm:col-span-2", children: /* @__PURE__ */ jsx(Button, { type: "submit", size: "sm", children: labels.buyerContinue }) })
+        ]
+      }
+    )
+  ] });
+}
+function SummaryRow({
+  label,
+  value,
+  emphasis
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: "flex items-baseline justify-between gap-3", children: [
+    /* @__PURE__ */ jsx("dt", { className: emphasis ? "text-sm font-semibold" : "text-sm text-muted-foreground", children: label }),
+    /* @__PURE__ */ jsx("dd", { className: emphasis ? "text-sm font-semibold tabular-nums" : "text-sm tabular-nums", children: value })
+  ] });
+}
+function CheckoutCommerceV1Content({
+  data,
+  onQuantityChange,
+  onRemoveItem,
+  onSelectAddress,
+  onCreateAddress,
+  onStartRegistration,
+  onAddAssociate,
+  onConfirmOrder,
+  onContinueShopping
+}) {
+  const [scenarioId, setScenarioId] = useState(data.meta.initialScenarioId);
+  const scenario = data.scenarios.find((item) => item.id === scenarioId) ?? data.scenarios[0];
+  return /* @__PURE__ */ jsxs("div", { className: "w-full", children: [
+    /* @__PURE__ */ jsxs("div", { className: "mb-4 rounded-lg border border-border bg-muted/40 p-3", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-2", children: [
+        /* @__PURE__ */ jsx("p", { className: "text-xs font-semibold uppercase tracking-wide text-muted-foreground", children: data.meta.demoTitle }),
+        /* @__PURE__ */ jsx(Badge, { variant: VARIANT_OUTLINE, children: data.labels.demoBadge })
+      ] }),
+      /* @__PURE__ */ jsx("div", { className: "mt-2 flex flex-wrap gap-1.5", role: "group", "aria-label": data.labels.scenarioGroup, children: data.scenarios.map((item) => /* @__PURE__ */ jsx(
+        Button,
+        {
+          type: "button",
+          size: "sm",
+          variant: item.id === scenario.id ? "default" : "outline",
+          "aria-pressed": item.id === scenario.id,
+          "aria-label": item.name,
+          onClick: () => setScenarioId(item.id),
+          children: item.id
+        },
+        item.id
+      )) }),
+      /* @__PURE__ */ jsx("p", { className: "mt-2 text-xs text-muted-foreground", children: fill(data.meta.demoCurrent, { name: scenario.name, blurb: scenario.blurb }) }),
+      /* @__PURE__ */ jsx("p", { className: "mt-1 text-xs text-muted-foreground", children: data.meta.demoHint })
+    ] }),
+    /* @__PURE__ */ jsx(
+      CheckoutExperience,
+      {
+        scenario,
+        onQuantityChange,
+        onRemoveItem,
+        onSelectAddress,
+        onCreateAddress,
+        onStartRegistration,
+        onAddAssociate,
+        onConfirmOrder,
+        onContinueShopping
+      },
+      scenario.id
+    )
+  ] });
+}
+function CheckoutExperience({
+  scenario,
+  onQuantityChange,
+  onRemoveItem,
+  onSelectAddress,
+  onCreateAddress,
+  onStartRegistration,
+  onAddAssociate,
+  onConfirmOrder,
+  onContinueShopping
+}) {
+  const data = useBlockData();
+  const uid = useId();
+  const labels = data.labels;
+  const [lines, setLines] = useState(
+    () => scenario.groups.flatMap(
+      (group) => group.items.flatMap((item) => {
+        const mains = [{ ...item, groupId: group.id }];
+        const children = (item.associates ?? []).filter((associate) => (associate.initialQuantity ?? 0) > 0).map((associate) => ({
+          lineId: associate.lineId,
+          groupId: associate.groupId,
+          title: associate.title,
+          variant: associate.variant,
+          image: associate.image,
+          unitCents: associate.unitCents,
+          quantity: associate.initialQuantity ?? 1,
+          stock: associate.stock,
+          isAssociate: true,
+          parentLineId: item.lineId,
+          associateId: associate.id,
+          maxQuantity: associate.maxQuantity,
+          minQuantity: associate.minQuantity ?? 1,
+          maxPerMain: associate.maxPerMain ?? 0,
+          overflowPolicy: associate.overflowPolicy ?? "clamp",
+          regularCents: associate.regularCents,
+          discountLabel: associate.discountLabel,
+          tiers: associate.tiers,
+          lineDiscountCents: associate.lineDiscountCents,
+          lineDiscountLabel: associate.lineDiscountLabel
+        }));
+        return [...mains, ...children];
+      })
+    )
+  );
+  const [groupStates, setGroupStates] = useState(
+    () => scenario.groups.map((group) => ({
+      id: group.id,
+      mode: group.initialMode,
+      shippingOptionId: group.initialShippingOptionId,
+      pickupPointId: group.initialPickupPointId,
+      rateState: group.rateState
+    }))
+  );
+  const [addressBook, setAddressBook] = useState(() => scenario.customer.addresses);
+  const [shippingAddressId, setShippingAddressId] = useState(scenario.customer.defaultAddressId);
+  const [addressOpen, setAddressOpen] = useState(false);
+  const [addressMode, setAddressMode] = useState("list");
+  const [openPanel, setOpenPanel] = useState("");
+  const [addingAssociate, setAddingAssociate] = useState("");
+  const [failedAdds, setFailedAdds] = useState([]);
+  const [removingLine, setRemovingLine] = useState("");
+  const [confirmRemoveMain, setConfirmRemoveMain] = useState("");
+  const [associateNotice, setAssociateNotice] = useState(null);
+  const [assocOpen, setAssocOpen] = useState("");
+  const [contactName, setContactName] = useState(scenario.customer.name);
+  const [contactEmail, setContactEmail] = useState(scenario.customer.email);
+  const [contactPhone, setContactPhone] = useState(scenario.customer.phone);
+  const [guestConfirmed, setGuestConfirmed] = useState(false);
+  const [authPhoneComplete, setAuthPhoneComplete] = useState(Boolean(scenario.customer.phone));
+  const [sessionRetrying, setSessionRetrying] = useState(false);
+  const [formErrors, setFormErrors] = useState({});
+  const [paymentId, setPaymentId] = useState(scenario.selectedPaymentId);
+  const [billingSame, setBillingSame] = useState(scenario.sameAsShipping);
+  const [billingId, setBillingId] = useState(scenario.billingAddressId);
+  const [promotions, setPromotions] = useState(() => scenario.promotions);
+  const [couponOpen, setCouponOpen] = useState(false);
+  const [couponCode, setCouponCode] = useState("");
+  const [couponNotice, setCouponNotice] = useState(null);
+  const [paymentOpen, setPaymentOpen] = useState(false);
+  const [openTiers, setOpenTiers] = useState([]);
+  const [priceUpdating, setPriceUpdating] = useState("");
+  const priceTimer = useRef(null);
+  const [stockMessage, setStockMessage] = useState("");
+  const [paymentError, setPaymentError] = useState(false);
+  const [paymentRetried, setPaymentRetried] = useState(false);
+  const [creatingOrder, setCreatingOrder] = useState(false);
+  const orderTimer = useRef(null);
+  const [confirmation, setConfirmation] = useState(null);
+  const activeGroups = scenario.groups.filter(
+    (group) => lines.some((line) => line.groupId === group.id)
+  );
+  const session = sessionRetrying ? "loading" : scenario.customer.sessionState;
+  function stateFor(groupId) {
+    return groupStates.find((state) => state.id === groupId) ?? {
+      id: groupId,
+      mode: "shipping",
+      shippingOptionId: "",
+      pickupPointId: "",
+      rateState: "pending"
+    };
+  }
+  const shippingAddress = addressBook.find((address) => address.id === shippingAddressId) ?? null;
+  function coverageFor(group, addressId) {
+    if (!addressId) return "none";
+    return (group.blockedAddresses ?? []).includes(addressId) ? "none" : "ok";
+  }
+  function optionFor(group, state) {
+    return group.shippingOptions.find((option) => option.id === state.shippingOptionId) ?? null;
+  }
+  function pointFor(group, state) {
+    return group.pickupPoints.find((point) => point.id === state.pickupPointId) ?? null;
+  }
+  function readiness(group, state) {
+    if (state.rateState !== "ready") return false;
+    if (state.mode === "pickup") {
+      const point = pointFor(group, state);
+      return point !== null && point.available !== false;
+    }
+    return Boolean(shippingAddress) && coverageFor(group, shippingAddressId) === "ok" && Boolean(optionFor(group, state));
+  }
+  function feeFor(group, state) {
+    if (state.mode === "pickup") {
+      const point = pointFor(group, state);
+      return point ? Math.max(0, point.feeCents - (point.discountCents ?? 0)) : 0;
+    }
+    const option = optionFor(group, state);
+    return option ? Math.max(0, option.feeCents - (option.discountCents ?? 0)) : 0;
+  }
+  function baseFeeFor(group, state) {
+    if (state.mode === "pickup") return pointFor(group, state)?.feeCents ?? 0;
+    return optionFor(group, state)?.feeCents ?? 0;
+  }
+  function resolveRate(group, addressId) {
+    window.setTimeout(() => {
+      setGroupStates(
+        (current) => current.map((state) => {
+          if (state.id !== group.id) return state;
+          const covered = state.mode === "pickup" || coverageFor(group, addressId) === "ok";
+          return {
+            ...state,
+            rateState: covered ? "ready" : "none",
+            shippingOptionId: state.mode === "shipping" ? group.shippingOptions.some((option) => option.id === state.shippingOptionId) ? state.shippingOptionId : group.shippingOptions[0]?.id || "" : "",
+            pickupPointId: state.mode === "pickup" ? group.pickupPoints.some(
+              (point) => point.id === state.pickupPointId && point.available !== false
+            ) ? state.pickupPointId : group.pickupPoints.find((point) => point.available !== false)?.id || "" : ""
+          };
+        })
+      );
+    }, 900);
+  }
+  function recalc(group) {
+    setGroupStates(
+      (current) => current.map((state) => state.id === group.id ? { ...state, rateState: "pending" } : state)
+    );
+    resolveRate(group, shippingAddressId);
+  }
+  useEffect(() => {
+    scenario.groups.filter((group) => group.rateState === "pending").forEach((group) => resolveRate(group, scenario.customer.defaultAddressId));
+  }, []);
+  useEffect(
+    () => () => {
+      if (orderTimer.current) window.clearTimeout(orderTimer.current);
+    },
+    []
+  );
+  function selectMode(group, mode) {
+    const covered = mode === "pickup" || coverageFor(group, shippingAddressId) === "ok";
+    setGroupStates(
+      (current) => current.map(
+        (state) => state.id === group.id ? {
+          ...state,
+          mode,
+          rateState: covered ? "pending" : "none"
+        } : state
+      )
+    );
+    if (covered) resolveRate(group, shippingAddressId);
+  }
+  function chooseShippingOption(group, optionId) {
+    setGroupStates(
+      (current) => current.map(
+        (state) => state.id === group.id ? { ...state, mode: "shipping", shippingOptionId: optionId, rateState: "ready" } : state
+      )
+    );
+    setOpenPanel("");
+  }
+  function choosePickupPoint(group, pointId) {
+    const point = group.pickupPoints.find((item) => item.id === pointId);
+    if (!point || point.available === false) return;
+    setGroupStates(
+      (current) => current.map(
+        (state) => state.id === group.id ? { ...state, mode: "pickup", pickupPointId: pointId, rateState: "ready" } : state
+      )
+    );
+    setOpenPanel("");
+  }
+  function revalidateShipping(addressId) {
+    activeGroups.forEach((group) => {
+      const state = stateFor(group.id);
+      if (state.mode !== "shipping") return;
+      setGroupStates(
+        (current) => current.map(
+          (entry) => entry.id === group.id ? { ...entry, rateState: "pending" } : entry
+        )
+      );
+      resolveRate(group, addressId);
+    });
+  }
+  function selectShippingAddress(addressId) {
+    setShippingAddressId(addressId);
+    setAddressOpen(false);
+    setAddressMode("list");
+    onSelectAddress?.(addressId);
+    revalidateShipping(addressId);
+  }
+  function openAddressEditor() {
+    setAddressOpen(true);
+    setAddressMode(addressBook.length === 0 ? "new" : "list");
+    window.setTimeout(() => {
+      document.getElementById(`${uid}-address-panel`)?.scrollIntoView({ block: "center" });
+    }, 60);
+  }
+  function saveNewAddress(address, saveToAccount) {
+    const nextAddress = {
+      ...address,
+      label: saveToAccount ? address.label : labels.addressTemporary,
+      isDefault: addressBook.length === 0
+    };
+    setAddressBook((current) => [...current, nextAddress]);
+    setShippingAddressId(nextAddress.id);
+    setAddressOpen(false);
+    setAddressMode("list");
+    onCreateAddress?.({ ...nextAddress, saveToAccount });
+    revalidateShipping(nextAddress.id);
+  }
+  function associatesFor(mainLineId) {
+    for (const group of scenario.groups) {
+      const item = group.items.find((entry) => entry.lineId === mainLineId);
+      if (item?.associates) return item.associates;
+    }
+    return [];
+  }
+  function mainQuantityFor(line) {
+    if (!line.parentLineId) return line.quantity;
+    return lines.find((entry) => entry.lineId === line.parentLineId)?.quantity ?? line.quantity;
+  }
+  function associateMaxFor(line, mainQuantity) {
+    const base = line.maxQuantity ?? line.stock;
+    const perMain = line.maxPerMain ?? 0;
+    return Math.min(line.stock, Math.max(0, base + Math.max(0, mainQuantity - 1) * perMain));
+  }
+  function associateDefMax(def, mainQuantity) {
+    const perMain = def.maxPerMain ?? 0;
+    return Math.min(
+      def.stock,
+      Math.max(0, def.maxQuantity + Math.max(0, mainQuantity - 1) * perMain)
+    );
+  }
+  function associateDiscountFor(unitCents, regularCents) {
+    const regular = regularCents ?? 0;
+    if (regular <= unitCents) return null;
+    const amountCents = regular - unitCents;
+    return { amountCents, percent: Math.round(amountCents / regular * 100) };
+  }
+  function orderGroupLines(groupLines) {
+    const ordered = [];
+    const placed = /* @__PURE__ */ new Set();
+    for (const main of groupLines) {
+      if (main.isAssociate) continue;
+      ordered.push(main);
+      placed.add(main.lineId);
+      for (const child of groupLines) {
+        if (child.parentLineId === main.lineId) {
+          ordered.push(child);
+          placed.add(child.lineId);
+        }
+      }
+    }
+    for (const line of groupLines) {
+      if (!placed.has(line.lineId)) ordered.push(line);
+    }
+    return ordered;
+  }
+  function refreshGroup(groupId) {
+    const group = scenario.groups.find((entry) => entry.id === groupId);
+    if (!group) return;
+    if (stateFor(groupId).mode !== "shipping") return;
+    setGroupStates(
+      (current) => current.map((state) => state.id === groupId ? { ...state, rateState: "pending" } : state)
+    );
+    resolveRate(group, shippingAddressId);
+  }
+  function applyAssociatePolicy(nextLines, main, nextQuantity) {
+    let result = nextLines;
+    let notice = null;
+    const children = nextLines.filter((entry) => entry.parentLineId === main.lineId);
+    const removed = [];
+    for (const child of children) {
+      const max = associateMaxFor(child, nextQuantity);
+      const min = child.minQuantity ?? 1;
+      if (child.quantity <= max) continue;
+      if ((child.overflowPolicy ?? "clamp") === "remove" || max < min) {
+        result = result.filter((entry) => entry.lineId !== child.lineId);
+        removed.push(child);
+        notice = {
+          mainLineId: main.lineId,
+          text: fill(labels.associateRemoved, { name: child.title }),
+          error: false
+        };
+      } else {
+        result = result.map(
+          (entry) => entry.lineId === child.lineId ? { ...entry, quantity: max } : entry
+        );
+        onQuantityChange?.(child.lineId, max);
+        notice = {
+          mainLineId: main.lineId,
+          text: fill(labels.associateAdjusted, { name: child.title, count: max }),
+          error: false
+        };
+      }
+    }
+    removed.forEach((child) => {
+      onRemoveItem?.(child.lineId);
+    });
+    return { lines: result, notice };
+  }
+  function changeQuantity(lineId, next) {
+    const line = lines.find((item) => item.lineId === lineId);
+    if (!line) return;
+    if (line.isAssociate) {
+      const max = associateMaxFor(line, mainQuantityFor(line));
+      const min = line.minQuantity ?? 1;
+      if (min === 0 && next === 0) {
+        requestRemoveLine(line);
+        return;
+      }
+      if (next < min) return;
+      if (next > max) {
+        setAssociateNotice({
+          mainLineId: line.parentLineId ?? "",
+          text: fill(labels.associateMax, { count: max }),
+          error: false
+        });
+        return;
+      }
+    } else {
+      if (next < 1 || line.stock < 1) return;
+      if (next > line.stock) {
+        setStockMessage(fill(labels.stockMax, { name: line.title }));
+        return;
+      }
+    }
+    setStockMessage("");
+    setAssociateNotice(null);
+    const nextLines = lines.map(
+      (item) => item.lineId === lineId ? { ...item, quantity: next } : item
+    );
+    const adjusted = line.isAssociate ? { lines: nextLines, notice: null } : applyAssociatePolicy(nextLines, line, next);
+    setLines(adjusted.lines);
+    if (adjusted.notice) setAssociateNotice(adjusted.notice);
+    setPriceUpdating(lineId);
+    if (priceTimer.current) window.clearTimeout(priceTimer.current);
+    priceTimer.current = window.setTimeout(() => setPriceUpdating(""), 500);
+    onQuantityChange?.(lineId, next);
+  }
+  function addAssociate(main, def) {
+    if (addingAssociate) return;
+    if (def.eligible === false || def.stock < 1) return;
+    const max = associateDefMax(def, main.quantity);
+    if (max < 1) return;
+    setAssociateNotice(null);
+    setAddingAssociate(def.id);
+    window.setTimeout(() => {
+      if (def.simulateFailure && !failedAdds.includes(def.id)) {
+        setFailedAdds((current) => [...current, def.id]);
+        setAddingAssociate("");
+        setAssociateNotice({
+          mainLineId: main.lineId,
+          text: fill(labels.associateAddError, { name: def.title }),
+          error: true
+        });
+        return;
+      }
+      const quantity = Math.max(1, def.minQuantity ?? 1);
+      const nextLine = {
+        lineId: def.lineId,
+        groupId: def.groupId,
+        title: def.title,
+        variant: def.variant,
+        image: def.image,
+        unitCents: def.unitCents,
+        quantity,
+        stock: def.stock,
+        isAssociate: true,
+        parentLineId: main.lineId,
+        associateId: def.id,
+        maxQuantity: def.maxQuantity,
+        minQuantity: def.minQuantity ?? 1,
+        maxPerMain: def.maxPerMain ?? 0,
+        overflowPolicy: def.overflowPolicy ?? "clamp",
+        regularCents: def.regularCents,
+        discountLabel: def.discountLabel,
+        tiers: def.tiers,
+        lineDiscountCents: def.lineDiscountCents,
+        lineDiscountLabel: def.lineDiscountLabel
+      };
+      setLines(
+        (current) => current.some((entry) => entry.lineId === def.lineId) ? current : [...current, nextLine]
+      );
+      setAddingAssociate("");
+      setAssocOpen("");
+      onAddAssociate?.({
+        associateId: def.id,
+        parentLineId: main.lineId,
+        lineId: def.lineId,
+        groupId: def.groupId,
+        quantity,
+        unitCents: def.unitCents
+      });
+      refreshGroup(def.groupId);
+    }, 500);
+  }
+  function removeWithPending(mainLineId, ids, mainName) {
+    setRemovingLine(mainLineId);
+    window.setTimeout(() => {
+      const removed = lines.filter((entry) => ids.includes(entry.lineId));
+      const groups = [...new Set(removed.map((entry) => entry.groupId))];
+      setLines((current) => current.filter((entry) => !ids.includes(entry.lineId)));
+      removed.forEach((entry) => onRemoveItem?.(entry.lineId));
+      if (ids.length > 1) {
+        setAssociateNotice({
+          mainLineId: "",
+          text: fill(labels.associateMainRemoved, {
+            name: mainName,
+            count: ids.length - 1
+          }),
+          error: false
+        });
+      }
+      groups.forEach((groupId) => {
+        if (lines.some((entry) => entry.groupId === groupId && !ids.includes(entry.lineId))) {
+          refreshGroup(groupId);
+        }
+      });
+      setRemovingLine("");
+      setConfirmRemoveMain("");
+    }, 250);
+  }
+  function requestRemoveLine(line) {
+    if (line.isAssociate) {
+      removeWithPending(line.lineId, [line.lineId], line.title);
+      return;
+    }
+    const children = lines.filter((entry) => entry.parentLineId === line.lineId);
+    if (children.length > 0) {
+      setConfirmRemoveMain(line.lineId);
+      return;
+    }
+    removeWithPending(line.lineId, [line.lineId], line.title);
+  }
+  function confirmRemoveMainLine(line) {
+    const ids = [
+      line.lineId,
+      ...lines.filter((entry) => entry.parentLineId === line.lineId).map((entry) => entry.lineId)
+    ];
+    removeWithPending(line.lineId, ids, line.title);
+  }
+  function changeBuyerField(field, value) {
+    const errorKey = field === "name" ? "contactName" : field === "email" ? "contactEmail" : "contactPhone";
+    if (field === "name") setContactName(value);
+    if (field === "email") setContactEmail(value);
+    if (field === "phone") setContactPhone(value);
+    setFormErrors((current) => {
+      const next = { ...current };
+      delete next[errorKey];
+      return next;
+    });
+  }
+  function validateGuestContact() {
+    const next = {};
+    if (!contactName.trim()) next.contactName = labels.contactNameMissing;
+    if (!contactEmail.trim() || !contactEmail.includes("@")) next.contactEmail = labels.contactMissing;
+    if (!contactPhone.trim()) next.contactPhone = labels.contactPhoneMissing;
+    setFormErrors(next);
+    return Object.keys(next).length === 0;
+  }
+  function saveGuestContact() {
+    if (!validateGuestContact()) {
+      setGuestConfirmed(false);
+      return;
+    }
+    setGuestConfirmed(true);
+  }
+  function saveAuthPhone() {
+    if (!contactPhone.trim()) {
+      setFormErrors({ contactPhone: labels.contactPhoneMissing });
+      return;
+    }
+    setFormErrors({});
+    setAuthPhoneComplete(true);
+  }
+  function retrySession() {
+    setSessionRetrying(true);
+    window.setTimeout(() => setSessionRetrying(false), 800);
+  }
+  function toggleTiers(lineId) {
+    setOpenTiers(
+      (current) => current.includes(lineId) ? current.filter((value) => value !== lineId) : [...current, lineId]
+    );
+  }
+  const subtotal = lines.reduce((sum, line) => sum + lineNetTotal(line), 0);
+  const promotionsTotal = promotions.reduce((sum, promotion) => sum + promotion.amountCents, 0);
+  const tax = Math.max(
+    0,
+    Math.round((subtotal - promotionsTotal) * scenario.taxRateBps / 1e4)
+  );
+  const pickupCount = activeGroups.filter((group) => stateFor(group.id).mode === "pickup").length;
+  const unitCount = lines.reduce((sum, line) => sum + line.quantity, 0);
+  const hasUnavailable = lines.some((line) => line.stock < 1);
+  let shippingFees = 0;
+  let pickupFees = 0;
+  activeGroups.forEach((group) => {
+    const state = stateFor(group.id);
+    if (!readiness(group, state)) return;
+    if (state.mode === "pickup") pickupFees += feeFor(group, state);
+    else shippingFees += feeFor(group, state);
+  });
+  const pendingGroups = activeGroups.filter((group) => !readiness(group, stateFor(group.id)));
+  const pending = pendingGroups.length > 0;
+  const total = subtotal - promotionsTotal + tax + shippingFees + pickupFees + scenario.extraCents;
+  const paymentMethods = scenario.paymentIds.map((id) => data.paymentMethods.find((method) => method.id === id)).filter((method) => Boolean(method));
+  const anyPickup = pickupCount > 0;
+  const usable = (method) => method.enabled && !(method.kind === "cash" && anyPickup);
+  const firstUsable = paymentMethods.find(usable);
+  const selectedMethod = paymentMethods.find((method) => method.id === paymentId);
+  const activePaymentId = selectedMethod && usable(selectedMethod) ? selectedMethod.id : firstUsable?.id ?? "";
+  const activeMethod = paymentMethods.find((method) => method.id === activePaymentId) ?? null;
+  const paymentNotice = selectedMethod && !usable(selectedMethod) ? selectedMethod.kind === "cash" ? labels.paymentCashPickup : selectedMethod.reason : "";
+  const paymentOptions = paymentMethods.map((method) => {
+    const enabled = usable(method);
+    return {
+      id: method.id,
+      title: method.label,
+      detail: method.detail,
+      meta: method.kind === "cash" && !enabled ? labels.paymentUnavailable : "",
+      disabled: !enabled,
+      reason: enabled ? "" : method.kind === "cash" ? labels.paymentCashPickup : method.reason
+    };
+  });
+  const appliedCoupon = promotions.find((promotion) => promotion.kind === "coupon") ?? null;
+  const requiresShipping = activeGroups.some((group) => stateFor(group.id).mode === "shipping");
+  const missingAddress = requiresShipping && !shippingAddress;
+  const sessionBlocked = session === "loading" || session === "error";
+  const canConfirm = lines.length > 0 && !pending && activePaymentId !== "" && !hasUnavailable && !sessionBlocked;
+  const blockedMessage = lines.length === 0 ? labels.confirmBlockedCart : sessionBlocked ? labels.confirmBlockedSession : hasUnavailable ? labels.confirmBlockedStock : missingAddress ? labels.confirmBlockedAddress : pending ? labels.confirmBlockedRate : activePaymentId === "" ? labels.confirmBlockedPayment : labels.confirmNote;
+  function buildConfirmationOrder(reference) {
+    const orderGroups = activeGroups.map((group) => {
+      const state = stateFor(group.id);
+      const option = optionFor(group, state);
+      const point = pointFor(group, state);
+      const groupLines = orderGroupLines(lines.filter((line) => line.groupId === group.id));
+      return {
+        id: group.id,
+        title: group.title,
+        modeLabel: state.mode === "pickup" ? labels.modePickup : labels.modeShipping,
+        methodLabel: state.mode === "pickup" ? point?.label ?? "" : option?.label ?? "",
+        detailLabel: state.mode === "pickup" ? point ? pickupDetail(point) : "" : option?.eta ?? "",
+        feeCents: readiness(group, state) ? feeFor(group, state) : 0,
+        lines: groupLines.map((line) => ({ ...line }))
+      };
+    });
+    const billingAddress = billingSame ? shippingAddress : addressBook.find((address) => address.id === billingId) ?? null;
+    return {
+      reference,
+      totalCents: total,
+      subtotalCents: subtotal,
+      unitCount,
+      promotions: promotions.map((promotion) => ({ ...promotion })),
+      taxCents: tax,
+      taxRateBps: scenario.taxRateBps,
+      shippingCents: shippingFees,
+      pickupCents: pickupFees,
+      extraCents: scenario.extraCents,
+      extraLabel: scenario.extraLabel,
+      groups: orderGroups,
+      address: requiresShipping && shippingAddress ? { ...shippingAddress } : null,
+      paymentLabel: activeMethod?.label ?? "",
+      paymentDetail: activeMethod?.detail ?? "",
+      billingLabel: billingAddress ? billingSame && shippingAddress ? labels.confirmationBillingSame : billingAddress.label : "",
+      billingDetail: billingAddress ? addressSummary(billingAddress) : "",
+      customerName: contactName,
+      customerEmail: contactEmail
+    };
+  }
+  function completeOrder() {
+    if (creatingOrder || orderTimer.current) return;
+    const reference = data.meta.confirmationCode;
+    const order = buildConfirmationOrder(reference);
+    setPaymentError(false);
+    setCreatingOrder(true);
+    if (orderTimer.current) window.clearTimeout(orderTimer.current);
+    orderTimer.current = window.setTimeout(() => {
+      orderTimer.current = null;
+      setCreatingOrder(false);
+      setConfirmation(order);
+      onConfirmOrder?.({
+        reference,
+        totalCents: order.totalCents,
+        paymentId: activePaymentId,
+        groupIds: order.groups.map((group) => group.id)
+      });
+    }, 700);
+  }
+  function handleConfirm() {
+    if (!canConfirm || creatingOrder) return;
+    if (session === "guest" && !validateGuestContact()) {
+      setGuestConfirmed(false);
+      return;
+    }
+    if (session === "authenticated" && !contactPhone.trim()) {
+      setFormErrors({ contactPhone: labels.contactPhoneMissing });
+      return;
+    }
+    if (sessionBlocked) return;
+    setFormErrors({});
+    if (session === "guest") setGuestConfirmed(true);
+    if (scenario.simulateFailure && !paymentRetried) {
+      setPaymentError(true);
+      return;
+    }
+    completeOrder();
+  }
+  function retryPayment() {
+    setPaymentRetried(true);
+    setPaymentError(false);
+    completeOrder();
+  }
+  function applyCoupon() {
+    const code = couponCode.trim().toUpperCase();
+    if (!code) return;
+    const coupon = data.coupons.find((item) => item.code === code);
+    if (!coupon) {
+      setCouponNotice({ status: "invalid", message: labels.promoInvalid });
+      return;
+    }
+    if (coupon.outcome !== "valid") {
+      setCouponNotice({ status: coupon.outcome, message: coupon.message });
+      return;
+    }
+    setPromotions((current) => [
+      ...current.filter((promotion) => promotion.kind !== "coupon"),
+      {
+        id: `coupon-${coupon.code.toLowerCase()}`,
+        label: coupon.label,
+        kind: "coupon",
+        amountCents: coupon.amountCents,
+        code: coupon.code
+      }
+    ]);
+    setCouponCode("");
+    setCouponNotice({ status: "applied", message: fill(labels.promoApplied, { code: coupon.code }) });
+  }
+  function removeCoupon() {
+    setPromotions((current) => current.filter((promotion) => promotion.kind !== "coupon"));
+    setCouponNotice(null);
+  }
+  if (scenario.loading) {
+    return /* @__PURE__ */ jsxs("div", { "aria-busy": "true", children: [
+      /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: data.meta.loadingLabel }),
+      /* @__PURE__ */ jsx("p", { className: "mt-1 text-xs text-muted-foreground", children: labels.sessionLoading }),
+      /* @__PURE__ */ jsxs("div", { className: "mt-4 space-y-3", children: [
+        /* @__PURE__ */ jsx("div", { className: "h-24 rounded-lg bg-muted" }),
+        /* @__PURE__ */ jsx("div", { className: "h-24 rounded-lg bg-muted" }),
+        /* @__PURE__ */ jsx("div", { className: "h-24 rounded-lg bg-muted" })
+      ] })
+    ] });
+  }
+  if (creatingOrder) {
+    return /* @__PURE__ */ jsxs(
+      "section",
+      {
+        "aria-busy": "true",
+        "aria-labelledby": `${uid}-creating`,
+        "aria-live": "polite",
+        role: "status",
+        className: "mx-auto flex w-full max-w-md flex-col items-center rounded-xl border border-border bg-card p-8 text-center",
+        children: [
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              "aria-hidden": "true",
+              className: "flex h-12 w-12 items-center justify-center rounded-full bg-muted",
+              children: /* @__PURE__ */ jsx("span", { className: "h-5 w-5 animate-spin rounded-full border-2 border-muted-foreground border-t-transparent" })
+            }
+          ),
+          /* @__PURE__ */ jsx("h2", { id: `${uid}-creating`, className: "mt-4 text-xl font-semibold tracking-tight", children: labels.confirmationCreating }),
+          /* @__PURE__ */ jsx("p", { className: "mt-1 text-sm text-muted-foreground", children: labels.confirmationCreatingNote }),
+          /* @__PURE__ */ jsx("dl", { className: "mt-4 w-full rounded-lg bg-muted/40 px-3 py-2", children: /* @__PURE__ */ jsx(SummaryRow, { label: labels.total, value: money(total, data), emphasis: true }) })
+        ]
+      }
+    );
+  }
+  if (confirmation) {
+    const itemsLabel = countLabel(
+      confirmation.unitCount,
+      labels.summaryItemOne,
+      fill(labels.summaryItems, { count: confirmation.unitCount })
+    );
+    const deliveriesLabel = countLabel(
+      confirmation.groups.length,
+      labels.deliveriesOne,
+      fill(labels.deliveriesMany, { count: confirmation.groups.length })
+    );
+    const orderSteps = [
+      {
+        title: labels.confirmationNextOneTitle,
+        body: labels.confirmationNextOneBody
+      },
+      {
+        title: labels.confirmationNextTwoTitle,
+        body: labels.confirmationNextTwoBody
+      },
+      {
+        title: labels.confirmationNextThreeTitle,
+        body: labels.confirmationNextThreeBody
+      }
+    ];
+    return /* @__PURE__ */ jsxs("div", { className: "mx-auto flex w-full max-w-2xl flex-col gap-4", children: [
+      /* @__PURE__ */ jsxs(
+        "section",
+        {
+          "aria-labelledby": `${uid}-confirmed`,
+          className: "rounded-xl border border-success/40 bg-card p-5 sm:p-6",
+          children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-3", children: [
+              /* @__PURE__ */ jsx(
+                "span",
+                {
+                  "aria-hidden": "true",
+                  className: "flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-success/10 text-base font-semibold text-success",
+                  children: labels.checkSymbol
+                }
+              ),
+              /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
+                /* @__PURE__ */ jsx(Badge, { variant: VARIANT_SECONDARY, children: data.meta.confirmationBadge }),
+                /* @__PURE__ */ jsx(
+                  "h2",
+                  {
+                    id: `${uid}-confirmed`,
+                    className: "mt-2 text-xl font-semibold tracking-tight",
+                    children: data.meta.confirmationTitle
+                  }
+                ),
+                /* @__PURE__ */ jsx("p", { className: "mt-1 text-sm text-muted-foreground", children: fill(data.meta.confirmationBody, { name: confirmation.customerName }) }),
+                /* @__PURE__ */ jsx("p", { className: "mt-1 text-xs text-muted-foreground", children: fill(labels.confirmationEmailNote, { email: confirmation.customerEmail }) })
+              ] })
+            ] }),
+            /* @__PURE__ */ jsxs("dl", { className: "mt-4 grid gap-2 rounded-lg bg-muted/40 px-3 py-2 sm:grid-cols-2", children: [
+              /* @__PURE__ */ jsxs("div", { children: [
+                /* @__PURE__ */ jsx("dt", { className: "text-xs text-muted-foreground", children: data.meta.confirmationReference }),
+                /* @__PURE__ */ jsx("dd", { className: "text-sm font-medium tabular-nums", children: confirmation.reference })
+              ] }),
+              /* @__PURE__ */ jsxs("div", { className: "sm:text-right", children: [
+                /* @__PURE__ */ jsx("dt", { className: "text-xs text-muted-foreground", children: data.meta.confirmationTotal }),
+                /* @__PURE__ */ jsx("dd", { className: "text-sm font-semibold tabular-nums", children: money(confirmation.totalCents, data) })
+              ] })
+            ] }),
+            /* @__PURE__ */ jsx("p", { className: "mt-2 text-xs text-muted-foreground", children: labels.confirmationReferenceNote })
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsxs(
+        "section",
+        {
+          "aria-labelledby": `${uid}-next`,
+          className: "rounded-xl border border-border bg-card p-5",
+          children: [
+            /* @__PURE__ */ jsx("h3", { id: `${uid}-next`, className: "text-sm font-semibold", children: labels.confirmationNextTitle }),
+            /* @__PURE__ */ jsx("ol", { className: "mt-3 space-y-3", children: orderSteps.map((step, index) => /* @__PURE__ */ jsxs("li", { className: "flex gap-3", children: [
+              /* @__PURE__ */ jsx(
+                "span",
+                {
+                  "aria-hidden": "true",
+                  className: index === 0 ? "flex h-6 w-6 shrink-0 items-center justify-center rounded-full bg-success/10 text-xs font-semibold text-success" : "flex h-6 w-6 shrink-0 items-center justify-center rounded-full bg-muted text-xs font-medium text-muted-foreground",
+                  children: index + 1
+                }
+              ),
+              /* @__PURE__ */ jsxs("div", { children: [
+                /* @__PURE__ */ jsx("p", { className: "text-sm font-medium", children: step.title }),
+                /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: step.body })
+              ] })
+            ] }, step.title)) })
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsxs(
+        "section",
+        {
+          "aria-labelledby": `${uid}-order`,
+          className: "rounded-xl border border-border bg-card",
+          children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-baseline justify-between gap-2 border-b border-border px-4 py-3", children: [
+              /* @__PURE__ */ jsx("h3", { id: `${uid}-order`, className: "text-sm font-semibold", children: labels.confirmationOrderTitle }),
+              /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: fill(labels.purchaseBreakdown, {
+                items: itemsLabel,
+                deliveries: deliveriesLabel
+              }) })
+            ] }),
+            /* @__PURE__ */ jsx("div", { className: "divide-y divide-border", children: confirmation.groups.map((group) => {
+              const methodLine = [group.modeLabel, group.methodLabel, group.detailLabel].filter(Boolean).join(" \xB7 ");
+              return /* @__PURE__ */ jsxs("div", { className: "px-4 py-3", children: [
+                /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-baseline justify-between gap-2", children: [
+                  /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
+                    /* @__PURE__ */ jsx("p", { className: "text-sm font-medium", children: group.title }),
+                    /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: methodLine })
+                  ] }),
+                  /* @__PURE__ */ jsx("p", { className: "text-xs tabular-nums text-muted-foreground", children: group.feeCents === 0 ? labels.groupFree : money(group.feeCents, data) })
+                ] }),
+                /* @__PURE__ */ jsx("ul", { className: "mt-2 space-y-2", children: group.lines.map((line) => {
+                  const unitPrice = unitPriceFor(line, line.quantity);
+                  return /* @__PURE__ */ jsx(
+                    "li",
+                    {
+                      className: line.isAssociate ? "border-l border-border pl-3" : "",
+                      children: /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-2.5", children: [
+                        /* @__PURE__ */ jsx(
+                          "img",
+                          {
+                            src: line.image ?? PRODUCT_IMAGE_FALLBACK,
+                            alt: line.title,
+                            width: 40,
+                            height: 40,
+                            className: "h-10 w-10 shrink-0 rounded-md border border-border object-cover"
+                          }
+                        ),
+                        /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-1 flex-col gap-0.5", children: [
+                          /* @__PURE__ */ jsxs("p", { className: "text-sm font-medium", children: [
+                            line.title,
+                            line.isAssociate ? /* @__PURE__ */ jsx("span", { className: "ml-1.5 text-xs font-normal text-muted-foreground", children: labels.confirmationAssociateTag }) : null
+                          ] }),
+                          /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: line.variant }),
+                          /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: fill(labels.confirmationQuantity, {
+                            count: line.quantity,
+                            price: money(unitPrice, data)
+                          }) }),
+                          (line.lineDiscountCents ?? 0) > 0 ? /* @__PURE__ */ jsx("p", { className: "text-xs text-success", children: fill(labels.lineDiscount, {
+                            label: line.lineDiscountLabel ?? "",
+                            amount: money(line.lineDiscountCents ?? 0, data)
+                          }) }) : null
+                        ] }),
+                        /* @__PURE__ */ jsx("p", { className: "shrink-0 text-sm font-medium tabular-nums", children: money(lineNetTotal(line), data) })
+                      ] })
+                    },
+                    line.lineId
+                  );
+                }) })
+              ] }, group.id);
+            }) })
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsxs(
+        "section",
+        {
+          "aria-labelledby": `${uid}-details`,
+          className: "rounded-xl border border-border bg-card p-4",
+          children: [
+            /* @__PURE__ */ jsx("h3", { id: `${uid}-details`, className: "text-sm font-semibold", children: labels.confirmationDetailsTitle }),
+            /* @__PURE__ */ jsxs("div", { className: "mt-3 divide-y divide-border", children: [
+              confirmation.address ? /* @__PURE__ */ jsxs("div", { className: "py-3 first:pt-0 last:pb-0", children: [
+                /* @__PURE__ */ jsx("p", { className: "text-xs font-semibold uppercase tracking-wide text-muted-foreground", children: labels.addressDelivery }),
+                /* @__PURE__ */ jsx("p", { className: "mt-1 text-sm font-medium", children: confirmation.address.label }),
+                /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: addressSummary(confirmation.address) }),
+                /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: `${confirmation.address.recipient} \xB7 ${confirmation.address.phone}` })
+              ] }) : null,
+              /* @__PURE__ */ jsxs("div", { className: "py-3 first:pt-0 last:pb-0", children: [
+                /* @__PURE__ */ jsx("p", { className: "text-xs font-semibold uppercase tracking-wide text-muted-foreground", children: labels.paymentTitle }),
+                /* @__PURE__ */ jsx("p", { className: "mt-1 text-sm font-medium", children: confirmation.paymentLabel }),
+                confirmation.paymentDetail ? /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: confirmation.paymentDetail }) : null
+              ] }),
+              confirmation.billingLabel ? /* @__PURE__ */ jsxs("div", { className: "py-3 first:pt-0 last:pb-0", children: [
+                /* @__PURE__ */ jsx("p", { className: "text-xs font-semibold uppercase tracking-wide text-muted-foreground", children: labels.billingTitle }),
+                /* @__PURE__ */ jsx("p", { className: "mt-1 text-sm font-medium", children: confirmation.billingLabel }),
+                confirmation.billingDetail ? /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: confirmation.billingDetail }) : null
+              ] }) : null
+            ] })
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsxs(
+        "section",
+        {
+          "aria-labelledby": `${uid}-totals`,
+          className: "rounded-xl border border-border bg-card p-4",
+          children: [
+            /* @__PURE__ */ jsx("h3", { id: `${uid}-totals`, className: "text-sm font-semibold", children: labels.summaryTitle }),
+            /* @__PURE__ */ jsxs("dl", { className: "mt-3 space-y-2", children: [
+              /* @__PURE__ */ jsx(
+                SummaryRow,
+                {
+                  label: labels.subtotal,
+                  value: money(confirmation.subtotalCents, data),
+                  emphasis: false
+                }
+              ),
+              confirmation.promotions.map((promotion) => /* @__PURE__ */ jsx(
+                SummaryRow,
+                {
+                  label: promotion.label,
+                  value: `- ${money(promotion.amountCents, data)}`,
+                  emphasis: false
+                },
+                promotion.id
+              )),
+              /* @__PURE__ */ jsx(
+                SummaryRow,
+                {
+                  label: fill(labels.tax, { rate: String(confirmation.taxRateBps / 100) }),
+                  value: money(confirmation.taxCents, data),
+                  emphasis: false
+                }
+              ),
+              confirmation.shippingCents > 0 ? /* @__PURE__ */ jsx(
+                SummaryRow,
+                {
+                  label: labels.shippingCost,
+                  value: money(confirmation.shippingCents, data),
+                  emphasis: false
+                }
+              ) : null,
+              confirmation.pickupCents > 0 ? /* @__PURE__ */ jsx(
+                SummaryRow,
+                {
+                  label: labels.pickupCost,
+                  value: money(confirmation.pickupCents, data),
+                  emphasis: false
+                }
+              ) : null,
+              confirmation.extraCents > 0 ? /* @__PURE__ */ jsx(
+                SummaryRow,
+                {
+                  label: confirmation.extraLabel || labels.extraCost,
+                  value: money(confirmation.extraCents, data),
+                  emphasis: false
+                }
+              ) : null
+            ] }),
+            /* @__PURE__ */ jsx("dl", { className: "mt-2 border-t border-border pt-2", children: /* @__PURE__ */ jsx(
+              SummaryRow,
+              {
+                label: labels.total,
+                value: money(confirmation.totalCents, data),
+                emphasis: true
+              }
+            ) }),
+            /* @__PURE__ */ jsx("p", { className: "mt-2 text-xs text-muted-foreground", children: labels.totalDemoNote })
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsx("div", { className: "flex justify-end", children: /* @__PURE__ */ jsx(
+        Button,
+        {
+          type: "button",
+          size: "lg",
+          className: "w-full sm:w-auto",
+          onClick: onContinueShopping,
+          children: data.meta.confirmationCta
+        }
+      ) })
+    ] });
+  }
+  if (lines.length === 0) {
+    return /* @__PURE__ */ jsxs(
+      "section",
+      {
+        "aria-labelledby": `${uid}-empty`,
+        className: "rounded-xl border border-border bg-card p-8 text-center",
+        children: [
+          /* @__PURE__ */ jsx("h2", { id: `${uid}-empty`, className: "text-xl font-semibold tracking-tight", children: data.meta.emptyTitle }),
+          /* @__PURE__ */ jsx("p", { className: "mx-auto mt-2 max-w-sm text-sm text-muted-foreground", children: data.meta.emptyBody }),
+          /* @__PURE__ */ jsx("div", { className: "mt-5", children: /* @__PURE__ */ jsx(Button, { type: "button", onClick: onContinueShopping, children: data.meta.emptyCta }) })
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-5", children: [
+    /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsx("h2", { className: "text-xl font-semibold tracking-tight", children: data.meta.title }),
+      /* @__PURE__ */ jsx("p", { className: "mt-1 text-sm text-muted-foreground", children: fill(labels.purchaseBreakdown, {
+        items: countLabel(
+          unitCount,
+          labels.summaryItemOne,
+          fill(labels.summaryItems, { count: unitCount })
+        ),
+        deliveries: countLabel(
+          activeGroups.length,
+          labels.deliveriesOne,
+          fill(labels.deliveriesMany, { count: activeGroups.length })
+        )
+      }) })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "sticky top-0 z-10 flex items-center justify-between gap-3 rounded-xl border border-border bg-card/95 p-3 backdrop-blur md:hidden", children: [
+      /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: pending ? labels.totalPending : labels.total }),
+        /* @__PURE__ */ jsx("p", { className: "text-base font-semibold tabular-nums", children: pending ? labels.overviewPending : money(total, data) })
+      ] }),
+      /* @__PURE__ */ jsx(Button, { type: "button", disabled: !canConfirm || creatingOrder, onClick: handleConfirm, children: creatingOrder ? labels.confirmationCreating : labels.confirm })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "md:grid md:grid-cols-5 md:items-start md:gap-6", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-5 md:col-span-3", children: [
+        /* @__PURE__ */ jsxs("div", { className: "rounded-xl border border-border bg-card", children: [
+          /* @__PURE__ */ jsx("div", { className: "px-4 py-3", children: /* @__PURE__ */ jsx(
+            BuyerSection,
+            {
+              uid,
+              session,
+              name: contactName,
+              email: contactEmail,
+              phone: contactPhone,
+              guestConfirmed,
+              authPhoneComplete,
+              errors: formErrors,
+              onFieldChange: changeBuyerField,
+              onGuestSave: saveGuestContact,
+              onGuestEdit: () => {
+                setGuestConfirmed(false);
+                setFormErrors({});
+              },
+              onAuthPhoneSave: saveAuthPhone,
+              onRetrySession: retrySession,
+              onStartRegistration
+            }
+          ) }),
+          /* @__PURE__ */ jsx("div", { className: "border-t border-border px-4 py-3", children: /* @__PURE__ */ jsxs("section", { "aria-labelledby": `${uid}-shipping-address`, children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between gap-2", children: [
+              /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
+                /* @__PURE__ */ jsx(
+                  "h3",
+                  {
+                    id: `${uid}-shipping-address`,
+                    className: "text-xs font-semibold uppercase tracking-wide text-muted-foreground",
+                    children: labels.addressTitle
+                  }
+                ),
+                !requiresShipping ? /* @__PURE__ */ jsx("p", { className: "mt-1 text-xs text-muted-foreground", children: labels.pickupOnlyAddress }) : shippingAddress ? /* @__PURE__ */ jsxs(Fragment, { children: [
+                  /* @__PURE__ */ jsx("p", { className: "mt-1 text-sm font-medium", children: addressHeadline(shippingAddress) }),
+                  /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: addressSummary(shippingAddress) }),
+                  shippingAddress.recipient !== contactName || shippingAddress.phone !== contactPhone ? /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: [shippingAddress.recipient, shippingAddress.phone].filter(Boolean).join(" \xB7 ") }) : null
+                ] }) : /* @__PURE__ */ jsx("p", { className: "mt-1 text-sm text-destructive", children: labels.groupNeedsAddress })
+              ] }),
+              requiresShipping ? /* @__PURE__ */ jsx(
+                Button,
+                {
+                  type: "button",
+                  size: "sm",
+                  variant: VARIANT_OUTLINE,
+                  "aria-expanded": addressOpen,
+                  "aria-controls": `${uid}-address-panel`,
+                  onClick: () => addressOpen ? setAddressOpen(false) : openAddressEditor(),
+                  children: shippingAddress ? labels.changeAction : labels.groupAddAddress
+                }
+              ) : null
+            ] }),
+            addressOpen && requiresShipping ? /* @__PURE__ */ jsx(
+              "div",
+              {
+                id: `${uid}-address-panel`,
+                className: "mt-3 rounded-lg border border-border bg-muted/30 p-3",
+                children: addressMode === "new" ? /* @__PURE__ */ jsx(
+                  AddressForm,
+                  {
+                    labels,
+                    countries: data.countries,
+                    authenticated: scenario.customer.sessionState === "authenticated",
+                    onSave: saveNewAddress,
+                    onCancel: () => addressBook.length === 0 ? setAddressOpen(false) : setAddressMode("list")
+                  }
+                ) : /* @__PURE__ */ jsxs(Fragment, { children: [
+                  /* @__PURE__ */ jsx(
+                    AddressChoices,
+                    {
+                      legend: labels.addressSelectTitle,
+                      name: `${uid}-shipping-address`,
+                      addresses: addressBook,
+                      selectedId: shippingAddressId,
+                      onSelect: selectShippingAddress,
+                      labels
+                    }
+                  ),
+                  /* @__PURE__ */ jsxs("div", { className: "mt-3 flex flex-wrap gap-2", children: [
+                    /* @__PURE__ */ jsx(
+                      Button,
+                      {
+                        type: "button",
+                        size: "sm",
+                        variant: VARIANT_OUTLINE,
+                        onClick: () => setAddressMode("new"),
+                        children: labels.addressNew
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(
+                      Button,
+                      {
+                        type: "button",
+                        size: "sm",
+                        variant: VARIANT_GHOST,
+                        onClick: () => setAddressOpen(false),
+                        children: labels.addressCancel
+                      }
+                    )
+                  ] })
+                ] })
+              }
+            ) : null
+          ] }) })
+        ] }),
+        /* @__PURE__ */ jsxs("section", { "aria-labelledby": `${uid}-groups`, children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-baseline justify-between gap-2", children: [
+            /* @__PURE__ */ jsx("h3", { id: `${uid}-groups`, className: "text-sm font-semibold", children: labels.groupsTitle }),
+            /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: countLabel(
+              activeGroups.length,
+              labels.deliveriesOne,
+              fill(labels.deliveriesMany, { count: activeGroups.length })
+            ) })
+          ] }),
+          /* @__PURE__ */ jsx("p", { "aria-live": "polite", className: "mt-1 text-xs text-destructive", children: stockMessage }),
+          associateNotice && associateNotice.mainLineId === "" ? /* @__PURE__ */ jsx(
+            "p",
+            {
+              "aria-live": "polite",
+              className: associateNotice.error ? "mt-1 text-xs text-destructive" : "mt-1 text-xs text-muted-foreground",
+              children: associateNotice.text
+            }
+          ) : null,
+          /* @__PURE__ */ jsx("div", { className: "mt-3 space-y-4", children: activeGroups.map((group, index) => {
+            const state = stateFor(group.id);
+            const groupLines = orderGroupLines(
+              lines.filter((line) => line.groupId === group.id)
+            );
+            const point = pointFor(group, state);
+            const ready = readiness(group, state);
+            const fee = ready ? feeFor(group, state) : null;
+            const baseFee = baseFeeFor(group, state);
+            const feeDiscount = fee !== null ? Math.max(0, baseFee - fee) : 0;
+            const option = optionFor(group, state);
+            const heading = fill(state.mode === "pickup" ? labels.groupPickup : labels.groupDelivery, {
+              n: index + 1
+            });
+            const panelId = `${uid}-panel-${group.id}`;
+            const editing = openPanel === group.id;
+            const methodLine = state.mode === "pickup" ? [labels.modePickup, ready ? point?.label : ""].filter(Boolean).join(" \xB7 ") : [labels.modeShipping, ready ? option?.label : "", ready ? option?.eta : ""].filter(Boolean).join(" \xB7 ");
+            const pickupDetailLine = state.mode === "pickup" && point ? [point.address, point.hours].filter(Boolean).join(" \xB7 ") : "";
+            const needsAddress = state.mode === "shipping" && !shippingAddress;
+            const ratePending = state.rateState === "pending";
+            const rateError = state.rateState === "error";
+            const noCoverage = state.rateState === "none";
+            const shippingAvailable = group.modes.includes("shipping") && group.shippingOptions.length > 0 && Boolean(shippingAddress) && coverageFor(group, shippingAddressId) === "ok";
+            const pickupAvailable = group.modes.includes("pickup") && group.pickupPoints.some((item) => item.available !== false);
+            const bothModes = shippingAvailable && pickupAvailable;
+            const currentModeAvailable = state.mode === "shipping" ? shippingAvailable : pickupAvailable;
+            const currentChoiceCount = state.mode === "shipping" ? group.shippingOptions.length : group.pickupPoints.length;
+            const canChange = bothModes || (currentModeAvailable ? currentChoiceCount > 1 : pickupAvailable || shippingAvailable);
+            const panelMode = currentModeAvailable ? state.mode : pickupAvailable ? "pickup" : "shipping";
+            const shippingChoices = group.shippingOptions.map((item) => {
+              const discount = item.discountCents ?? 0;
+              const payable = Math.max(0, item.feeCents - discount);
+              return {
+                id: item.id,
+                title: item.label,
+                detail: item.eta,
+                meta: payable === 0 ? labels.groupFree : money(payable, data),
+                previousMeta: discount > 0 ? money(item.feeCents, data) : "",
+                disabled: false,
+                reason: ""
+              };
+            });
+            const pickupChoices = group.pickupPoints.map((item) => {
+              const discount = item.discountCents ?? 0;
+              const payable = Math.max(0, item.feeCents - discount);
+              return {
+                id: item.id,
+                title: item.label,
+                detail: pickupDetail(item),
+                meta: payable === 0 ? labels.groupFree : money(payable, data),
+                previousMeta: discount > 0 ? money(item.feeCents, data) : "",
+                disabled: item.available === false,
+                reason: item.available === false ? item.unavailableReason || "" : ""
+              };
+            });
+            const modeChoices = [
+              {
+                id: "shipping",
+                title: labels.modeShipping,
+                detail: "",
+                meta: "",
+                disabled: false,
+                reason: ""
+              },
+              {
+                id: "pickup",
+                title: labels.modePickup,
+                detail: "",
+                meta: "",
+                disabled: false,
+                reason: ""
+              }
+            ];
+            return /* @__PURE__ */ jsxs(
+              "section",
+              {
+                "aria-labelledby": `${uid}-group-${group.id}`,
+                className: "overflow-hidden rounded-xl border border-border bg-card",
+                children: [
+                  /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between gap-3 px-4 py-3", children: [
+                    /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
+                      /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [
+                        /* @__PURE__ */ jsx("h4", { id: `${uid}-group-${group.id}`, className: "text-sm font-semibold", children: heading }),
+                        group.special ? /* @__PURE__ */ jsx(Badge, { variant: VARIANT_SECONDARY, children: labels.groupSpecial }) : null
+                      ] }),
+                      /* @__PURE__ */ jsx("p", { className: "mt-0.5 text-xs text-muted-foreground", children: methodLine }),
+                      pickupDetailLine ? /* @__PURE__ */ jsx("p", { className: "mt-0.5 text-xs text-muted-foreground", children: pickupDetailLine }) : null
+                    ] }),
+                    /* @__PURE__ */ jsxs("div", { className: "flex shrink-0 flex-col items-end gap-1.5", children: [
+                      /* @__PURE__ */ jsx("p", { className: "text-sm font-semibold tabular-nums", children: fee === null ? labels.overviewPending : feeDiscount > 0 ? /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-2", children: [
+                        /* @__PURE__ */ jsx("span", { className: "text-xs font-normal text-muted-foreground line-through", children: money(baseFee, data) }),
+                        /* @__PURE__ */ jsx("span", { children: fee === 0 ? labels.groupFree : money(fee, data) })
+                      ] }) : fee === 0 ? labels.groupFree : money(fee, data) }),
+                      canChange ? /* @__PURE__ */ jsx(
+                        Button,
+                        {
+                          type: "button",
+                          size: "xs",
+                          variant: VARIANT_OUTLINE,
+                          "aria-expanded": editing,
+                          "aria-controls": panelId,
+                          onClick: () => setOpenPanel(editing ? "" : group.id),
+                          children: labels.changeAction
+                        }
+                      ) : null
+                    ] })
+                  ] }),
+                  editing && canChange ? /* @__PURE__ */ jsxs("div", { id: panelId, className: "border-t border-border bg-muted/30 px-4 py-3", children: [
+                    bothModes ? /* @__PURE__ */ jsx("div", { className: "mb-3", children: /* @__PURE__ */ jsx(
+                      OptionGroup,
+                      {
+                        legend: labels.modeTitle,
+                        options: modeChoices,
+                        selectedId: state.mode,
+                        onSelect: (mode) => selectMode(group, mode),
+                        className: "grid gap-1.5 sm:grid-cols-2"
+                      }
+                    ) }) : null,
+                    panelMode === "shipping" ? rateError ? /* @__PURE__ */ jsx("p", { className: "text-xs text-destructive", children: labels.rateError }) : ratePending ? /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: labels.groupRatePending }) : noCoverage ? /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: labels.groupNoCoverage }) : /* @__PURE__ */ jsx(
+                      OptionGroup,
+                      {
+                        legend: labels.groupShippingOptions,
+                        options: shippingChoices,
+                        selectedId: state.shippingOptionId,
+                        onSelect: (id) => chooseShippingOption(group, id),
+                        className: "grid gap-1.5"
+                      }
+                    ) : /* @__PURE__ */ jsxs("div", { children: [
+                      /* @__PURE__ */ jsx(
+                        OptionGroup,
+                        {
+                          legend: labels.groupPickupPoints,
+                          options: pickupChoices,
+                          selectedId: state.pickupPointId,
+                          onSelect: (id) => choosePickupPoint(group, id),
+                          className: "grid gap-1.5"
+                        }
+                      ),
+                      point?.note ? /* @__PURE__ */ jsx("p", { className: "mt-2 text-xs text-muted-foreground", children: point.note }) : null
+                    ] }),
+                    /* @__PURE__ */ jsx("div", { className: "mt-3", children: /* @__PURE__ */ jsx(
+                      Button,
+                      {
+                        type: "button",
+                        size: "xs",
+                        variant: VARIANT_GHOST,
+                        onClick: () => setOpenPanel(""),
+                        children: labels.done
+                      }
+                    ) })
+                  ] }) : null,
+                  needsAddress ? /* @__PURE__ */ jsx("p", { className: "px-4 pb-3 text-xs text-muted-foreground", children: labels.groupNoAddress }) : ratePending ? /* @__PURE__ */ jsx("p", { "aria-live": "polite", className: "px-4 pb-3 text-xs text-muted-foreground", children: labels.groupRatePending }) : rateError ? /* @__PURE__ */ jsxs("div", { className: "mx-4 mb-3 rounded-md border border-destructive/40 bg-destructive/10 p-2.5", children: [
+                    /* @__PURE__ */ jsx("p", { className: "text-xs text-destructive", children: labels.rateError }),
+                    /* @__PURE__ */ jsx(
+                      Button,
+                      {
+                        type: "button",
+                        size: "xs",
+                        variant: VARIANT_OUTLINE,
+                        className: "mt-1.5",
+                        onClick: () => recalc(group),
+                        children: labels.groupRetryRate
+                      }
+                    )
+                  ] }) : noCoverage ? /* @__PURE__ */ jsxs("div", { className: "mx-4 mb-3 rounded-md border border-warning/40 bg-warning/10 p-2.5", children: [
+                    /* @__PURE__ */ jsx("p", { className: "text-xs font-medium", children: labels.groupNoCoverage }),
+                    /* @__PURE__ */ jsx("p", { className: "mt-0.5 text-xs text-muted-foreground", children: labels.groupNoCoverageHint }),
+                    /* @__PURE__ */ jsxs("div", { className: "mt-1.5 flex flex-wrap gap-1.5", children: [
+                      group.modes.includes("pickup") ? /* @__PURE__ */ jsx(
+                        Button,
+                        {
+                          type: "button",
+                          size: "xs",
+                          variant: VARIANT_OUTLINE,
+                          onClick: () => selectMode(group, "pickup"),
+                          children: labels.groupPickupAvailable
+                        }
+                      ) : null,
+                      /* @__PURE__ */ jsx(
+                        Button,
+                        {
+                          type: "button",
+                          size: "xs",
+                          variant: VARIANT_GHOST,
+                          onClick: openAddressEditor,
+                          children: labels.groupChangeAddress
+                        }
+                      )
+                    ] })
+                  ] }) : null,
+                  group.note ? /* @__PURE__ */ jsx("p", { className: "mx-4 mb-3 rounded-md bg-muted/50 p-2 text-xs text-muted-foreground", children: group.note }) : null,
+                  /* @__PURE__ */ jsx("ul", { className: "divide-y divide-border border-t border-border", children: groupLines.map((line) => {
+                    const unitPrice = unitPriceFor(line, line.quantity);
+                    const tiers = line.tiers ?? [];
+                    const currentTier = currentTierFor(line, line.quantity);
+                    const nextTier = nextTierFor(line, line.quantity);
+                    const tierOpen = openTiers.includes(line.lineId);
+                    const nextReachable = nextTier !== null && line.stock >= nextTier.minQuantity && nextTier.unitCents < unitPrice;
+                    const detailLine = [
+                      line.variant,
+                      fill(labels.each, { amount: money(unitPrice, data) })
+                    ].join(" \xB7 ");
+                    const unavailable = line.stock < 1;
+                    const isAssociate = line.isAssociate === true;
+                    const mainQty = isAssociate ? mainQuantityFor(line) : line.quantity;
+                    const maxQty = isAssociate ? associateMaxFor(line, mainQty) : line.stock;
+                    const minQty = isAssociate ? line.minQuantity ?? 1 : 1;
+                    const parentLine = line.parentLineId ? lines.find((entry) => entry.lineId === line.parentLineId) : void 0;
+                    const parentNote = parentLine && parentLine.groupId !== line.groupId ? fill(labels.associateOf, { name: parentLine.title }) : "";
+                    const relatedInGroup = Boolean(
+                      isAssociate && parentLine && parentLine.groupId === line.groupId
+                    );
+                    const associateDiscount = isAssociate ? associateDiscountFor(unitPrice, line.regularCents) : null;
+                    const regularTotal = (line.regularCents ?? 0) * line.quantity;
+                    const lineNet = lineNetTotal(line);
+                    const totalSavingCents = associateDiscount ? Math.max(0, regularTotal - lineNet) : 0;
+                    const totalSavingPercent = associateDiscount && regularTotal > 0 ? Math.round(totalSavingCents / regularTotal * 100) : 0;
+                    const associateDefs = isAssociate ? [] : associatesFor(line.lineId);
+                    const associateLines = isAssociate ? [] : lines.filter((entry) => entry.parentLineId === line.lineId);
+                    const availableAssociates = associateDefs.filter(
+                      (def) => !lines.some((entry) => entry.lineId === def.lineId)
+                    );
+                    const addableAssociates = availableAssociates.filter(
+                      (def) => def.eligible !== false && def.stock > 0 && associateDefMax(def, line.quantity) > 0
+                    );
+                    const rowNotice = associateNotice && associateNotice.mainLineId === line.lineId ? associateNotice : null;
+                    const confirmingMain = confirmRemoveMain === line.lineId;
+                    const rowRemoving = removingLine === line.lineId || isAssociate && removingLine === line.parentLineId;
+                    const atLimit = maxQty > 0 && line.quantity >= maxQty;
+                    const canDecrease = !unavailable && (isAssociate ? minQty === 0 || line.quantity > minQty : line.quantity > 1);
+                    const canIncrease = !unavailable && maxQty > 0 && line.quantity < maxQty;
+                    const addingAny = addingAssociate !== "";
+                    return /* @__PURE__ */ jsxs(
+                      "li",
+                      {
+                        "aria-busy": priceUpdating === line.lineId || rowRemoving,
+                        className: "px-4 py-3",
+                        children: [
+                          /* @__PURE__ */ jsxs(
+                            "div",
+                            {
+                              className: relatedInGroup ? "flex flex-col gap-2 border-l border-border pl-3 sm:flex-row sm:items-start sm:gap-3" : "flex flex-col gap-2 sm:flex-row sm:items-start sm:gap-3",
+                              children: [
+                                /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-1 gap-3", children: [
+                                  /* @__PURE__ */ jsx(
+                                    "img",
+                                    {
+                                      src: line.image ?? PRODUCT_IMAGE_FALLBACK,
+                                      alt: line.title,
+                                      width: 48,
+                                      height: 48,
+                                      className: "h-12 w-12 shrink-0 rounded-md border border-border object-cover"
+                                    }
+                                  ),
+                                  /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-1 flex-col gap-0.5", children: [
+                                    /* @__PURE__ */ jsx("p", { className: "text-sm font-medium", children: line.title }),
+                                    /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: detailLine }),
+                                    isAssociate && associateDiscount ? /* @__PURE__ */ jsxs("p", { className: "flex flex-wrap items-center gap-x-2 gap-y-0.5 text-xs", children: [
+                                      /* @__PURE__ */ jsx("span", { className: "text-muted-foreground line-through tabular-nums", children: fill(labels.associatePreviousUnit, {
+                                        amount: money(line.regularCents ?? 0, data)
+                                      }) }),
+                                      /* @__PURE__ */ jsx("span", { className: "text-success", children: fill(labels.associateTotalSaving, {
+                                        amount: money(totalSavingCents, data),
+                                        percent: totalSavingPercent
+                                      }) })
+                                    ] }) : null,
+                                    parentNote ? /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: parentNote }) : null,
+                                    relatedInGroup && parentLine ? /* @__PURE__ */ jsx("span", { className: "sr-only", children: fill(labels.associateOf, { name: parentLine.title }) }) : null,
+                                    (line.lineDiscountCents ?? 0) > 0 ? /* @__PURE__ */ jsx("p", { className: "text-xs text-success", children: fill(labels.lineDiscount, {
+                                      label: line.lineDiscountLabel ?? "",
+                                      amount: money(line.lineDiscountCents ?? 0, data)
+                                    }) }) : null,
+                                    isAssociate ? /* @__PURE__ */ jsx(
+                                      "p",
+                                      {
+                                        className: atLimit ? "text-xs font-medium text-foreground" : "text-xs text-muted-foreground",
+                                        children: atLimit ? labels.associateLimitReached : fill(labels.associateMax, { count: maxQty })
+                                      }
+                                    ) : unavailable ? /* @__PURE__ */ jsx("p", { className: "text-xs text-destructive", children: labels.outOfStock }) : line.stock <= 3 ? /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: fill(labels.stockLeft, { count: line.stock }) }) : null
+                                  ] })
+                                ] }),
+                                /* @__PURE__ */ jsxs("div", { className: "flex w-full items-center justify-between gap-3 sm:w-28 sm:flex-col sm:items-end sm:gap-1.5", children: [
+                                  /* @__PURE__ */ jsxs("div", { className: "sm:text-right", children: [
+                                    /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: labels.subtotal }),
+                                    /* @__PURE__ */ jsxs(
+                                      "p",
+                                      {
+                                        className: priceUpdating === line.lineId ? "text-sm font-semibold tabular-nums text-muted-foreground" : "text-sm font-semibold tabular-nums",
+                                        children: [
+                                          money(lineNetTotal(line), data),
+                                          priceUpdating === line.lineId ? /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: labels.ellipsis }) : null
+                                        ]
+                                      }
+                                    )
+                                  ] }),
+                                  /* @__PURE__ */ jsx("span", { "aria-live": "polite", className: "sr-only", children: priceUpdating === line.lineId ? labels.priceUpdating : "" }),
+                                  /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
+                                    /* @__PURE__ */ jsx(
+                                      Button,
+                                      {
+                                        type: "button",
+                                        size: "icon",
+                                        variant: VARIANT_OUTLINE,
+                                        "aria-label": fill(labels.decrease, { name: line.title }),
+                                        disabled: !canDecrease || rowRemoving,
+                                        onClick: () => changeQuantity(line.lineId, line.quantity - 1),
+                                        children: labels.decreaseSymbol
+                                      }
+                                    ),
+                                    /* @__PURE__ */ jsx("span", { className: "min-w-8 text-center text-sm tabular-nums", children: line.quantity }),
+                                    /* @__PURE__ */ jsx(
+                                      Button,
+                                      {
+                                        type: "button",
+                                        size: "icon",
+                                        variant: VARIANT_OUTLINE,
+                                        "aria-label": fill(labels.increase, { name: line.title }),
+                                        disabled: !canIncrease || rowRemoving,
+                                        onClick: () => changeQuantity(line.lineId, line.quantity + 1),
+                                        children: labels.increaseSymbol
+                                      }
+                                    )
+                                  ] })
+                                ] })
+                              ]
+                            }
+                          ),
+                          tiers.length > 1 ? /* @__PURE__ */ jsxs("div", { className: "mt-2 rounded-lg bg-muted/40 px-3 py-2", children: [
+                            /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center justify-between gap-x-2 gap-y-1", children: [
+                              /* @__PURE__ */ jsx("p", { className: "text-xs font-medium text-muted-foreground", children: labels.tierBadge }),
+                              /* @__PURE__ */ jsx(
+                                Button,
+                                {
+                                  type: "button",
+                                  size: "xs",
+                                  variant: VARIANT_GHOST,
+                                  className: "px-0",
+                                  "aria-expanded": tierOpen,
+                                  "aria-controls": `${uid}-tiers-${line.lineId}`,
+                                  onClick: () => toggleTiers(line.lineId),
+                                  children: tierOpen ? labels.tierHide : labels.tierSee
+                                }
+                              )
+                            ] }),
+                            nextReachable && nextTier ? /* @__PURE__ */ jsx("p", { className: "mt-1 text-xs text-muted-foreground", children: fill(labels.tierNext, {
+                              count: nextTier.minQuantity - line.quantity,
+                              price: money(nextTier.unitCents, data)
+                            }) }) : null,
+                            tierOpen ? /* @__PURE__ */ jsx(
+                              "div",
+                              {
+                                id: `${uid}-tiers-${line.lineId}`,
+                                className: "mt-2 divide-y divide-border border-t border-border",
+                                children: tiers.map((tier) => {
+                                  const tierIsCurrent = currentTier?.minQuantity === tier.minQuantity;
+                                  return /* @__PURE__ */ jsxs(
+                                    "div",
+                                    {
+                                      "aria-current": tierIsCurrent ? "true" : void 0,
+                                      className: tierIsCurrent ? "flex items-center justify-between gap-2 py-1.5 text-xs font-medium" : "flex items-center justify-between gap-2 py-1.5 text-xs text-muted-foreground",
+                                      children: [
+                                        /* @__PURE__ */ jsx("span", { children: tierRangeLabel(tier, data) }),
+                                        /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-1.5", children: [
+                                          /* @__PURE__ */ jsx("span", { className: "tabular-nums", children: money(tier.unitCents, data) }),
+                                          tierIsCurrent ? /* @__PURE__ */ jsx("span", { className: "text-xs font-normal text-muted-foreground", children: labels.tierCurrent }) : null
+                                        ] })
+                                      ]
+                                    },
+                                    tier.minQuantity
+                                  );
+                                })
+                              }
+                            ) : null
+                          ] }) : null,
+                          associateDefs.length > 0 && (associateLines.length > 0 || addableAssociates.length > 0) ? /* @__PURE__ */ jsxs("div", { className: "mt-2 rounded-lg bg-muted/40 px-3 py-2", children: [
+                            /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center justify-between gap-x-2 gap-y-1", children: [
+                              /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: associateLines.length > 0 ? fill(
+                                associateLines.length === 1 ? labels.associatesSummaryOne : labels.associatesSummary,
+                                { count: associateLines.length }
+                              ) : labels.associatesTitle }),
+                              addableAssociates.length > 0 || assocOpen === line.lineId ? /* @__PURE__ */ jsx(
+                                Button,
+                                {
+                                  type: "button",
+                                  size: "xs",
+                                  variant: VARIANT_GHOST,
+                                  className: "px-0",
+                                  "aria-expanded": assocOpen === line.lineId,
+                                  "aria-controls": `${uid}-associates-${line.lineId}`,
+                                  onClick: () => setAssocOpen(assocOpen === line.lineId ? "" : line.lineId),
+                                  children: assocOpen === line.lineId ? labels.associatesHide : labels.associatesAddMore
+                                }
+                              ) : null
+                            ] }),
+                            rowNotice ? /* @__PURE__ */ jsx(
+                              "p",
+                              {
+                                "aria-live": "polite",
+                                className: rowNotice.error ? "mt-1.5 text-xs text-destructive" : "mt-1.5 text-xs text-muted-foreground",
+                                children: rowNotice.text
+                              }
+                            ) : null,
+                            assocOpen === line.lineId ? /* @__PURE__ */ jsx(
+                              "div",
+                              {
+                                id: `${uid}-associates-${line.lineId}`,
+                                className: "mt-2 divide-y divide-border border-t border-border",
+                                children: availableAssociates.length === 0 ? /* @__PURE__ */ jsx("p", { className: "py-2 text-xs text-muted-foreground", children: labels.associateOptionsNone }) : availableAssociates.map((def) => {
+                                  const defMax = associateDefMax(def, line.quantity);
+                                  const defDiscount = associateDiscountFor(
+                                    def.unitCents,
+                                    def.regularCents
+                                  );
+                                  const blocked = def.eligible === false || def.stock < 1 || defMax < 1;
+                                  const adding = addingAssociate === def.id;
+                                  const status = def.stock < 1 ? labels.associateNoStock : def.eligible === false ? `${labels.associateNotEligible} \xB7 ${def.reason ?? ""}` : defMax < 1 ? labels.associateLimitReached : "";
+                                  return /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-2.5 py-2", children: [
+                                    /* @__PURE__ */ jsx(
+                                      "img",
+                                      {
+                                        src: def.image ?? PRODUCT_IMAGE_FALLBACK,
+                                        alt: def.title,
+                                        width: 36,
+                                        height: 36,
+                                        className: "h-9 w-9 shrink-0 rounded-md border border-border object-cover"
+                                      }
+                                    ),
+                                    /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-1 flex-col gap-0.5", children: [
+                                      /* @__PURE__ */ jsx("p", { className: "text-xs font-medium", children: def.title }),
+                                      /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: def.variant }),
+                                      /* @__PURE__ */ jsxs("p", { className: "flex flex-wrap items-center gap-x-2 gap-y-0.5 text-xs", children: [
+                                        /* @__PURE__ */ jsx("span", { className: "tabular-nums", children: money(def.unitCents, data) }),
+                                        defDiscount ? /* @__PURE__ */ jsx("span", { className: "text-muted-foreground line-through tabular-nums", children: money(def.regularCents ?? 0, data) }) : null,
+                                        defDiscount ? /* @__PURE__ */ jsx("span", { className: "text-success", children: fill(labels.associateSavings, {
+                                          amount: money(defDiscount.amountCents, data),
+                                          percent: defDiscount.percent
+                                        }) }) : null,
+                                        defMax > 0 ? /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: fill(labels.associateMax, { count: defMax }) }) : null
+                                      ] }),
+                                      status ? /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: status }) : null
+                                    ] }),
+                                    /* @__PURE__ */ jsx(
+                                      Button,
+                                      {
+                                        type: "button",
+                                        size: "xs",
+                                        variant: VARIANT_OUTLINE,
+                                        disabled: blocked || addingAny || rowRemoving,
+                                        onClick: () => addAssociate(line, def),
+                                        children: adding ? labels.associateAdding : labels.associateAdd
+                                      }
+                                    )
+                                  ] }, def.id);
+                                })
+                              }
+                            ) : null
+                          ] }) : null,
+                          confirmingMain ? /* @__PURE__ */ jsxs("div", { className: "mt-2 rounded-md border border-border bg-muted/40 px-3 py-2", children: [
+                            /* @__PURE__ */ jsx("p", { className: "text-xs text-destructive", children: fill(labels.removeMainWarning, {
+                              name: line.title,
+                              count: associateLines.length
+                            }) }),
+                            /* @__PURE__ */ jsxs("div", { className: "mt-2 flex flex-wrap gap-2", children: [
+                              /* @__PURE__ */ jsx(
+                                Button,
+                                {
+                                  type: "button",
+                                  size: "xs",
+                                  variant: VARIANT_DESTRUCTIVE,
+                                  disabled: rowRemoving,
+                                  onClick: () => confirmRemoveMainLine(line),
+                                  children: labels.removeMainConfirm
+                                }
+                              ),
+                              /* @__PURE__ */ jsx(
+                                Button,
+                                {
+                                  type: "button",
+                                  size: "xs",
+                                  variant: VARIANT_GHOST,
+                                  onClick: () => setConfirmRemoveMain(""),
+                                  children: labels.associateKeep
+                                }
+                              )
+                            ] })
+                          ] }) : null,
+                          /* @__PURE__ */ jsx("div", { className: "mt-2 flex justify-end", children: /* @__PURE__ */ jsx(
+                            Button,
+                            {
+                              type: "button",
+                              size: "xs",
+                              variant: VARIANT_GHOST,
+                              className: "px-0 text-muted-foreground hover:text-destructive",
+                              "aria-label": fill(labels.removeNamed, { name: line.title }),
+                              disabled: rowRemoving,
+                              onClick: () => requestRemoveLine(line),
+                              children: rowRemoving ? labels.associateRemoving : labels.remove
+                            }
+                          ) })
+                        ]
+                      },
+                      line.lineId
+                    );
+                  }) })
+                ]
+              },
+              group.id
+            );
+          }) })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "rounded-xl border border-border bg-card", children: [
+          /* @__PURE__ */ jsxs("section", { "aria-labelledby": `${uid}-payment`, className: "px-4 py-3", children: [
+            /* @__PURE__ */ jsx(
+              "h3",
+              {
+                id: `${uid}-payment`,
+                className: "text-xs font-semibold uppercase tracking-wide text-muted-foreground",
+                children: labels.paymentTitle
+              }
+            ),
+            /* @__PURE__ */ jsxs("div", { className: "mt-2 flex flex-wrap items-center justify-between gap-2 rounded-lg bg-muted/40 px-3 py-2", children: [
+              /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
+                /* @__PURE__ */ jsx("p", { className: "text-sm font-medium", children: activeMethod ? activeMethod.label : labels.paymentUnavailable }),
+                /* @__PURE__ */ jsx("p", { className: "truncate text-xs text-muted-foreground", children: activeMethod ? activeMethod.detail : labels.paymentChoose })
+              ] }),
+              /* @__PURE__ */ jsx(
+                Button,
+                {
+                  type: "button",
+                  size: "sm",
+                  variant: VARIANT_OUTLINE,
+                  "aria-expanded": paymentOpen,
+                  "aria-controls": `${uid}-payment-panel`,
+                  onClick: () => setPaymentOpen(!paymentOpen),
+                  children: labels.changeAction
+                }
+              )
+            ] }),
+            paymentNotice ? /* @__PURE__ */ jsx("p", { className: "mt-1 text-xs text-destructive", children: paymentNotice }) : null,
+            paymentOpen ? /* @__PURE__ */ jsx("div", { id: `${uid}-payment-panel`, className: "mt-2", children: /* @__PURE__ */ jsx(
+              OptionGroup,
+              {
+                legend: labels.paymentChoose,
+                options: paymentOptions,
+                selectedId: activePaymentId,
+                onSelect: (id) => {
+                  setPaymentId(id);
+                  setPaymentError(false);
+                  setPaymentOpen(false);
+                },
+                className: "grid gap-1.5"
+              }
+            ) }) : null,
+            /* @__PURE__ */ jsx("p", { className: "mt-2 text-xs text-muted-foreground", children: labels.paymentProviderNote }),
+            paymentError ? /* @__PURE__ */ jsxs("div", { role: "alert", className: "mt-3 rounded-md border border-destructive/40 bg-destructive/10 p-3", children: [
+              /* @__PURE__ */ jsx("p", { className: "text-sm font-medium text-destructive", children: labels.paymentErrorTitle }),
+              /* @__PURE__ */ jsx("p", { className: "mt-1 text-xs text-muted-foreground", children: labels.paymentErrorBody }),
+              /* @__PURE__ */ jsx("div", { className: "mt-2", children: /* @__PURE__ */ jsx(Button, { type: "button", size: "sm", variant: VARIANT_OUTLINE, onClick: retryPayment, children: labels.paymentRetry }) })
+            ] }) : null
+          ] }),
+          addressBook.length > 0 ? /* @__PURE__ */ jsxs(
+            "section",
+            {
+              "aria-labelledby": `${uid}-billing`,
+              className: "border-t border-border px-4 py-3",
+              children: [
+                /* @__PURE__ */ jsx(
+                  "h3",
+                  {
+                    id: `${uid}-billing`,
+                    className: "text-xs font-semibold uppercase tracking-wide text-muted-foreground",
+                    children: labels.billingTitle
+                  }
+                ),
+                /* @__PURE__ */ jsx("div", { className: "mt-2", children: /* @__PURE__ */ jsxs(
+                  Button,
+                  {
+                    type: "button",
+                    role: "checkbox",
+                    "aria-checked": billingSame,
+                    variant: VARIANT_GHOST,
+                    size: "sm",
+                    onClick: () => setBillingSame(!billingSame),
+                    className: "w-full justify-start whitespace-normal px-0 text-left",
+                    children: [
+                      /* @__PURE__ */ jsx(
+                        "span",
+                        {
+                          "aria-hidden": "true",
+                          className: "flex size-4 shrink-0 items-center justify-center rounded-sm border border-input text-xs",
+                          children: billingSame ? labels.checkSymbol : null
+                        }
+                      ),
+                      /* @__PURE__ */ jsx("span", { className: "text-sm font-normal", children: labels.billingSame })
+                    ]
+                  }
+                ) }),
+                !billingSame ? /* @__PURE__ */ jsx("div", { className: "mt-2", children: /* @__PURE__ */ jsx(
+                  OptionGroup,
+                  {
+                    legend: labels.billingChoose,
+                    options: addressBook.map((address) => ({
+                      id: address.id,
+                      title: address.label,
+                      detail: addressSummary(address),
+                      meta: address.isDefault ? labels.addressDefaultBadge : "",
+                      disabled: false,
+                      reason: ""
+                    })),
+                    selectedId: billingId,
+                    onSelect: setBillingId,
+                    className: "grid gap-2"
+                  }
+                ) }) : null
+              ]
+            }
+          ) : null
+        ] }),
+        /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: data.meta.footerNote })
+      ] }),
+      /* @__PURE__ */ jsx("aside", { className: "md:col-span-2 md:sticky md:top-6", "aria-label": labels.summaryTitle, children: /* @__PURE__ */ jsxs(Card, { className: "gap-3 py-0 shadow-none", children: [
+        /* @__PURE__ */ jsx(CardHeader, { className: "border-b border-border px-4 py-3", children: /* @__PURE__ */ jsxs("div", { className: "flex items-baseline justify-between gap-2", children: [
+          /* @__PURE__ */ jsx("h3", { className: "text-sm font-semibold", children: labels.summaryTitle }),
+          /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: countLabel(unitCount, labels.summaryItemOne, fill(labels.summaryItems, { count: unitCount })) })
+        ] }) }),
+        /* @__PURE__ */ jsxs(CardContent, { className: "px-4 py-3", children: [
+          /* @__PURE__ */ jsxs("dl", { className: "space-y-2", children: [
+            /* @__PURE__ */ jsx(SummaryRow, { label: labels.subtotal, value: money(subtotal, data), emphasis: false }),
+            promotions.map((promotion) => /* @__PURE__ */ jsx(
+              SummaryRow,
+              {
+                label: promotion.label,
+                value: `- ${money(promotion.amountCents, data)}`,
+                emphasis: false
+              },
+              promotion.id
+            )),
+            /* @__PURE__ */ jsx(
+              SummaryRow,
+              {
+                label: fill(labels.tax, { rate: String(scenario.taxRateBps / 100) }),
+                value: money(tax, data),
+                emphasis: false
+              }
+            ),
+            pending ? null : /* @__PURE__ */ jsxs(Fragment, { children: [
+              shippingFees > 0 ? /* @__PURE__ */ jsx(
+                SummaryRow,
+                {
+                  label: labels.shippingCost,
+                  value: money(shippingFees, data),
+                  emphasis: false
+                }
+              ) : null,
+              pickupFees > 0 ? /* @__PURE__ */ jsx(
+                SummaryRow,
+                {
+                  label: labels.pickupCost,
+                  value: money(pickupFees, data),
+                  emphasis: false
+                }
+              ) : null,
+              scenario.extraCents > 0 ? /* @__PURE__ */ jsx(
+                SummaryRow,
+                {
+                  label: scenario.extraLabel || labels.extraCost,
+                  value: money(scenario.extraCents, data),
+                  emphasis: false
+                }
+              ) : null
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "mt-3 border-t border-border pt-3", children: [
+            /* @__PURE__ */ jsx("dl", { children: /* @__PURE__ */ jsxs("div", { className: "flex items-baseline justify-between gap-3", children: [
+              /* @__PURE__ */ jsx("dt", { className: "text-sm font-semibold", children: pending ? labels.totalPending : labels.total }),
+              /* @__PURE__ */ jsx("dd", { className: "text-base font-semibold tabular-nums", children: pending ? labels.overviewPending : money(total, data) })
+            ] }) }),
+            pending ? /* @__PURE__ */ jsx("p", { className: "mt-1 text-xs text-muted-foreground", children: labels.totalPendingNote }) : /* @__PURE__ */ jsx("p", { className: "mt-1 text-xs text-muted-foreground", children: labels.totalDemoNote })
+          ] }),
+          /* @__PURE__ */ jsx("div", { className: "mt-3", children: appliedCoupon ? /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-2", children: [
+            /* @__PURE__ */ jsx("p", { className: "text-xs text-success", children: fill(labels.promoApplied, { code: appliedCoupon.code }) }),
+            /* @__PURE__ */ jsx(
+              Button,
+              {
+                type: "button",
+                size: "xs",
+                variant: VARIANT_GHOST,
+                onClick: removeCoupon,
+                children: labels.remove
+              }
+            )
+          ] }) : couponOpen ? /* @__PURE__ */ jsxs("div", { children: [
+            /* @__PURE__ */ jsx("label", { htmlFor: `${uid}-coupon`, className: "text-xs font-medium", children: labels.promoLabel }),
+            /* @__PURE__ */ jsxs("div", { className: "mt-1 flex gap-2", children: [
+              /* @__PURE__ */ jsx(
+                "input",
+                {
+                  id: `${uid}-coupon`,
+                  value: couponCode,
+                  placeholder: labels.promoPlaceholder,
+                  onChange: (event) => {
+                    setCouponCode(event.target.value);
+                    setCouponNotice(null);
+                  },
+                  className: "h-9 min-w-0 flex-1 rounded-md border border-input bg-background px-3 text-sm"
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                Button,
+                {
+                  type: "button",
+                  size: "sm",
+                  variant: VARIANT_OUTLINE,
+                  onClick: applyCoupon,
+                  children: labels.promoApply
+                }
+              )
+            ] }),
+            couponNotice && couponNotice.status !== "applied" ? /* @__PURE__ */ jsx("p", { role: "alert", className: "mt-1 text-xs text-destructive", children: couponNotice.message }) : null
+          ] }) : /* @__PURE__ */ jsx(
+            Button,
+            {
+              type: "button",
+              size: "sm",
+              variant: VARIANT_GHOST,
+              onClick: () => setCouponOpen(true),
+              children: labels.promoOpen
+            }
+          ) })
+        ] }),
+        /* @__PURE__ */ jsx(CardFooter, { className: "px-4 pb-4", children: /* @__PURE__ */ jsxs("div", { className: "w-full", children: [
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              type: "button",
+              className: "hidden w-full md:inline-flex",
+              size: "lg",
+              disabled: !canConfirm || creatingOrder,
+              "aria-describedby": `${uid}-confirm-note`,
+              onClick: handleConfirm,
+              children: creatingOrder ? labels.confirmationCreating : labels.confirm
+            }
+          ),
+          /* @__PURE__ */ jsx("p", { id: `${uid}-confirm-note`, className: "mt-2 text-xs text-muted-foreground", children: creatingOrder ? labels.confirmationCreatingNote : canConfirm ? labels.confirmNote : blockedMessage })
+        ] }) })
+      ] }) })
+    ] })
+  ] });
+}
+function CheckoutCommerceV1({ data, ...props }) {
+  return /* @__PURE__ */ jsx(BlockDataProvider, { data, children: /* @__PURE__ */ jsx(CheckoutCommerceV1Content, { data, ...props }) });
+}
+export {
+  CheckoutCommerceV1 as default
+};
+//# sourceMappingURL=block.mjs.map