@thorprovider/blocks 4.0.0 → 4.3.0

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

@@ -0,0 +1,1346 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useId, useRef, useState } from "react";
+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 { AddressChoices } from "./address-choices.mjs";
+import { AddressForm } from "./address-form.mjs";
+import { CheckoutConfirmationView } from "./confirmation-view.mjs";
+import { BuyerSection } from "./buyer-section.mjs";
+import {
+  addressHeadline,
+  addressSummary,
+  amountText,
+  countLabel,
+  fill,
+  isFiniteAmount,
+  money,
+  pickupDetail,
+  taxLabel,
+  tierRangeLabel
+} from "./format.mjs";
+import { OptionGroup } from "./option-group.mjs";
+import { SummaryRow } from "./summary-row.mjs";
+const VARIANT_SECONDARY = "secondary";
+const VARIANT_OUTLINE = "outline";
+const VARIANT_GHOST = "ghost";
+const VARIANT_DESTRUCTIVE = "destructive";
+const ADDRESS_FORM_ERROR_PATHS = /* @__PURE__ */ new Set([
+  "firstName",
+  "lastName",
+  "line1",
+  "line2",
+  "company",
+  "city",
+  "province",
+  "postalCode",
+  "countryCode",
+  "phone"
+]);
+function interruptionActionLabel(action, labels) {
+  switch (action) {
+    case "acknowledge":
+      return labels.interruptionAcknowledgeLabel ?? "Acknowledge";
+    case "refresh":
+      return labels.interruptionRefreshLabel ?? "Refresh";
+    case "return-to-cart":
+      return labels.interruptionReturnToCartLabel ?? "Return to cart";
+    case "retry":
+      return labels.interruptionRetryLabel ?? "Try again";
+  }
+}
+function CheckoutView({
+  model,
+  actions
+}) {
+  const uid = useId();
+  const labels = model.labels;
+  const lines = model.lines;
+  const activeGroups = model.groups;
+  const addressBook = model.addresses;
+  const shippingAddressId = model.selectedShippingAddressId ?? "";
+  const contactName = model.contact.name;
+  const contactEmail = model.contact.email;
+  const contactPhone = model.contact.phone;
+  const session = model.session;
+  const [guestConfirmed, setGuestConfirmed] = useState(false);
+  const contactPhoneRequired = model.requirements?.contactPhone ?? true;
+  const [authPhoneComplete, setAuthPhoneComplete] = useState(
+    Boolean(model.contact.phone) || !contactPhoneRequired
+  );
+  const [localFormErrors, setLocalFormErrors] = useState({});
+  const formErrors = {
+    ...Object.fromEntries((model.errors ?? []).map(({ path, message }) => [path, message])),
+    ...localFormErrors
+  };
+  const addressFormErrors = Object.fromEntries(
+    (model.errors ?? []).filter(({ path }) => ADDRESS_FORM_ERROR_PATHS.has(path)).map(({ path, message }) => [path, message])
+  );
+  const orderError = model.states.order === "error";
+  const orderSummaryErrors = orderError ? (model.errors ?? []).filter(
+    ({ path }) => !["contactName", "contactEmail", "contactPhone"].includes(path)
+  ) : [];
+  const billingSame = model.billing.sameAsShipping;
+  const billingId = model.billing.addressId ?? "";
+  const setBillingSame = (same) => actions.onSelectAddress(billingId, "billing", same);
+  const setBillingId = (id) => actions.onSelectAddress(id, "billing", false);
+  const promotions = model.promotions;
+  const [addressOpen, setAddressOpen] = useState(false);
+  const [addressMode, setAddressMode] = useState("list");
+  const [addressSaveAttempt, setAddressSaveAttempt] = useState(null);
+  const [openPanel, setOpenPanel] = useState("");
+  const [confirmRemoveMain, setConfirmRemoveMain] = useState("");
+  const [assocOpen, setAssocOpen] = useState("");
+  const [couponOpen, setCouponOpen] = useState(false);
+  const [couponCode, setCouponCode] = useState("");
+  const [couponNoticeDismissed, setCouponNoticeDismissed] = useState(false);
+  const couponNotice = couponNoticeDismissed ? null : model.feedback?.couponNotice ?? null;
+  const [paymentOpen, setPaymentOpen] = useState(false);
+  const [openTiers, setOpenTiers] = useState([]);
+  const addingAssociate = model.feedback?.addingAssociate ?? "";
+  const removingLine = model.feedback?.removingLine ?? "";
+  const priceUpdating = model.feedback?.priceUpdating ?? "";
+  const stockMessage = model.feedback?.stockMessage ?? "";
+  const associateNotice = model.capabilities.associates ? model.feedback?.associateNotice ?? null : null;
+  const paymentError = model.states.payment === "error";
+  const creatingOrder = model.states.order === "submitting";
+  const blockedByInterruption = model.states.order === "interrupted" || model.interruption?.severity === "blocking";
+  const confirmation = model.confirmation ?? null;
+  const shippingAddress = model.addresses.find((address) => address.id === shippingAddressId) ?? null;
+  const paymentOptions = model.paymentMethods.map((method) => ({
+    id: method.id,
+    title: method.title ?? method.label,
+    detail: method.detail,
+    meta: method.meta,
+    disabled: method.disabled,
+    reason: method.reason
+  }));
+  const activePaymentId = model.selectedPaymentId ?? "";
+  const activeMethod = model.paymentMethods.find((method) => method.id === activePaymentId) ?? null;
+  const hasPaymentMethods = model.paymentMethods.length > 0;
+  const paymentSummaryLabel = activeMethod ? activeMethod.label : hasPaymentMethods ? labels.paymentChoose : labels.paymentUnavailable;
+  const paymentNotice = model.totals.paymentNotice ?? "";
+  const appliedCoupon = model.promotions.find((promotion) => promotion.kind === "coupon") ?? null;
+  const requiresShipping = model.totals.requiresShipping;
+  const pending = model.totals.pending;
+  const canConfirm = model.totals.canConfirm && !blockedByInterruption;
+  const blockedMessage = model.totals.blockedMessage;
+  const subtotal = model.totals.subtotalCents;
+  const tax = model.totals.taxCents;
+  const shippingFees = model.totals.shippingCents;
+  const pickupFees = model.totals.pickupCents;
+  const total = model.totals.totalCents;
+  const unitCount = isFiniteAmount(model.totals.unitCount) ? model.totals.unitCount : void 0;
+  const deliveriesLabel = countLabel(
+    activeGroups.length,
+    labels.deliveriesOne,
+    fill(labels.deliveriesMany, { count: activeGroups.length })
+  );
+  const purchaseBreakdown = unitCount === void 0 ? deliveriesLabel : fill(labels.purchaseBreakdown, {
+    items: countLabel(
+      unitCount,
+      labels.summaryItemOne,
+      fill(labels.summaryItems, { count: unitCount })
+    ),
+    deliveries: deliveriesLabel
+  });
+  const addressLocationProps = model.locationOptions && actions.onLocationChange ? {
+    locationMode: "host",
+    locationOptions: model.locationOptions,
+    onLocationChange: actions.onLocationChange,
+    ...model.requirements ? { requirements: model.requirements } : {}
+  } : {
+    locationMode: "demo",
+    ...model.requirements ? { requirements: model.requirements } : {}
+  };
+  const knownAssociateIds = useRef(
+    new Set(lines.filter((line) => line.isAssociate).map((line) => line.lineId))
+  );
+  useEffect(() => {
+    if (!addressSaveAttempt) return;
+    const saveState = model.savedAddressState;
+    if (!saveState) return;
+    if (saveState.pendingId) {
+      if (!addressSaveAttempt.pendingSeen) {
+        setAddressSaveAttempt({ ...addressSaveAttempt, pendingSeen: true });
+      }
+      return;
+    }
+    if (saveState.error) {
+      setAddressSaveAttempt(null);
+      return;
+    }
+    if (saveState.lastAction === "saved" && (addressSaveAttempt.pendingSeen || saveState.lastSavedId !== addressSaveAttempt.previousLastSavedId)) {
+      setAddressSaveAttempt(null);
+      setAddressOpen(false);
+      setAddressMode("list");
+    }
+  }, [addressSaveAttempt, model.savedAddressState]);
+  useEffect(() => {
+    const currentAssociateIds = new Set(
+      lines.filter((line) => line.isAssociate).map((line) => line.lineId)
+    );
+    const addedAssociate = [...currentAssociateIds].some(
+      (lineId) => !knownAssociateIds.current.has(lineId)
+    );
+    if (addedAssociate) setAssocOpen("");
+    knownAssociateIds.current = currentAssociateIds;
+  }, [lines]);
+  useEffect(() => {
+    if (model.feedback?.couponNotice?.status === "applied") setCouponCode("");
+  }, [model.feedback?.couponNotice]);
+  useEffect(() => {
+    if (!removingLine) setConfirmRemoveMain("");
+  }, [removingLine]);
+  const toggleTiers = (lineId) => {
+    setOpenTiers(
+      (current) => current.includes(lineId) ? current.filter((value) => value !== lineId) : [...current, lineId]
+    );
+  };
+  const openAddressEditor = () => {
+    setAddressOpen(true);
+    setAddressMode(addressBook.length === 0 ? "new" : "list");
+    actions.onAddressEditorOpen(`${uid}-address-panel`);
+  };
+  const createAddressId = actions.createAddressId;
+  const choosePickupPoint = (group, pointId) => {
+    actions.onSelectShippingOption(group.id, pointId, "pickup");
+    setOpenPanel("");
+  };
+  const selectMode = (group, mode) => actions.onSelectShippingOption(group.id, void 0, mode);
+  const recalc = (group) => actions.onRetry("shipping", group.id);
+  const changeBuyerField = (field, value) => {
+    const errorKey = field === "name" ? "contactName" : field === "email" ? "contactEmail" : "contactPhone";
+    setLocalFormErrors((current) => {
+      const next = { ...current };
+      delete next[errorKey];
+      return next;
+    });
+    actions.onContactChange({ [field]: value });
+  };
+  const validateGuestContact = () => {
+    const next = {};
+    if (!contactName.trim()) next.contactName = labels.contactNameMissing;
+    if (!contactEmail.trim() || !contactEmail.includes("@"))
+      next.contactEmail = labels.contactMissing;
+    if (contactPhoneRequired && !contactPhone.trim()) {
+      next.contactPhone = labels.contactPhoneMissing;
+    }
+    setLocalFormErrors(next);
+    return Object.keys(next).length === 0;
+  };
+  const saveGuestContact = () => {
+    if (!validateGuestContact()) {
+      setGuestConfirmed(false);
+      return;
+    }
+    setGuestConfirmed(true);
+  };
+  const saveAuthPhone = () => {
+    if (contactPhoneRequired && !contactPhone.trim()) {
+      setLocalFormErrors({ contactPhone: labels.contactPhoneMissing });
+      return;
+    }
+    setLocalFormErrors({});
+    setAuthPhoneComplete(true);
+  };
+  const retrySession = () => actions.onRetry("session");
+  const applyCoupon = () => {
+    if (!couponCode.trim()) {
+      setCouponNoticeDismissed(true);
+      return;
+    }
+    setCouponNoticeDismissed(false);
+    actions.onApplyPromo(couponCode);
+  };
+  const removeCoupon = () => actions.onApplyPromo(null);
+  const selectShippingAddress = (addressId) => {
+    actions.onSelectAddress(addressId);
+    setAddressOpen(false);
+    setAddressMode("list");
+  };
+  const saveNewAddress = (address, saveToAccount) => {
+    if (saveToAccount && model.savedAddressState) {
+      setAddressSaveAttempt({
+        pendingSeen: Boolean(model.savedAddressState.pendingId),
+        previousLastSavedId: model.savedAddressState.lastSavedId
+      });
+      actions.onCreateAddress(address, true);
+      return;
+    }
+    actions.onCreateAddress(address, saveToAccount);
+    setAddressOpen(false);
+    setAddressMode("list");
+  };
+  const chooseShippingOption = (group, optionId) => {
+    actions.onSelectShippingOption(group.id, optionId, "shipping");
+    setOpenPanel("");
+  };
+  const handleConfirm = () => {
+    if (!canConfirm || creatingOrder) return;
+    if (session === "guest" && !validateGuestContact()) {
+      setGuestConfirmed(false);
+      return;
+    }
+    if (session === "authenticated" && contactPhoneRequired && !contactPhone.trim()) {
+      setLocalFormErrors({ contactPhone: labels.contactPhoneMissing });
+      return;
+    }
+    if (session === "loading" || session === "error") return;
+    setLocalFormErrors({});
+    if (session === "guest") setGuestConfirmed(true);
+    actions.onSubmit();
+  };
+  const retryPayment = actions.onRetryPayment;
+  const onContinueShoppingAction = actions.onContinueShopping;
+  const changeQuantity = actions.onQuantityChange;
+  const requestRemoveLine = (line) => {
+    if (model.capabilities.associates && !line.isAssociate && (line.associateLines?.length ?? 0) > 0) {
+      setConfirmRemoveMain(line.lineId);
+      return;
+    }
+    actions.onRemoveItem(line.lineId);
+  };
+  const confirmRemoveMainLine = (line) => {
+    actions.onRemoveItem(line.lineId);
+  };
+  const selectPayment = (paymentId) => {
+    actions.onSelectPayment(paymentId);
+    setPaymentOpen(false);
+  };
+  if (model.states.cart === "loading") {
+    return /* @__PURE__ */ jsxs("div", { "aria-busy": "true", children: [
+      /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: model.labels.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: amountText(total, model), emphasis: true }) })
+        ]
+      }
+    );
+  }
+  if (confirmation) {
+    return /* @__PURE__ */ jsx(
+      CheckoutConfirmationView,
+      {
+        confirmation,
+        labels,
+        locale: model.locale,
+        currencyCode: model.currencyCode,
+        onContinueShopping: onContinueShoppingAction
+      }
+    );
+  }
+  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: model.labels.emptyTitle }),
+          /* @__PURE__ */ jsx("p", { className: "mx-auto mt-2 max-w-sm text-sm text-muted-foreground", children: model.labels.emptyBody }),
+          /* @__PURE__ */ jsx("div", { className: "mt-5", children: /* @__PURE__ */ jsx(Button, { type: "button", onClick: onContinueShoppingAction, children: model.labels.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: model.labels.title }),
+      /* @__PURE__ */ jsx("p", { className: "mt-1 text-sm text-muted-foreground", children: purchaseBreakdown })
+    ] }),
+    model.interruption ? /* @__PURE__ */ jsxs(
+      "div",
+      {
+        role: model.interruption.severity === "blocking" ? "alert" : "status",
+        className: model.interruption.severity === "blocking" ? "flex flex-col gap-3 rounded-md border border-destructive/50 bg-destructive/10 px-4 py-3 text-sm text-destructive" : "flex flex-col gap-3 rounded-md border border-amber-500/50 bg-amber-500/10 px-4 py-3 text-sm",
+        children: [
+          /* @__PURE__ */ jsxs("div", { children: [
+            /* @__PURE__ */ jsx("p", { className: "font-medium", children: model.interruption.title }),
+            /* @__PURE__ */ jsx("p", { children: model.interruption.message }),
+            model.interruption.changes?.length ? /* @__PURE__ */ jsx("ul", { className: "mt-2 list-disc pl-5", children: model.interruption.changes.map((change, index) => /* @__PURE__ */ jsxs("li", { children: [
+              change.label,
+              change.previous && change.next ? `: ${change.previous} \u2192 ${change.next}` : null
+            ] }, `${change.lineId ?? index}:${change.label}`)) }) : null
+          ] }),
+          actions.onInterruptionAction && model.interruption.actions.length > 0 ? /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-2", children: model.interruption.actions.map((action) => /* @__PURE__ */ jsx(
+            Button,
+            {
+              type: "button",
+              variant: VARIANT_OUTLINE,
+              size: "sm",
+              onClick: () => actions.onInterruptionAction?.(action),
+              children: interruptionActionLabel(action, labels)
+            },
+            action
+          )) }) : null
+        ]
+      }
+    ) : null,
+    orderError ? /* @__PURE__ */ jsxs("div", { className: "rounded-md border border-destructive/40 bg-destructive/10 p-3", children: [
+      orderSummaryErrors.length > 0 ? /* @__PURE__ */ jsx("div", { role: "alert", className: "text-sm text-destructive", children: orderSummaryErrors.map((error, index) => /* @__PURE__ */ jsx("p", { "data-error-path": error.path, children: error.message }, `${error.path}-${index}`)) }) : null,
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          type: "button",
+          size: "sm",
+          variant: VARIANT_OUTLINE,
+          className: "mt-2",
+          onClick: () => actions.onRetry("order"),
+          children: labels.orderRetry || labels.retryAction
+        }
+      )
+    ] }) : null,
+    /* @__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 : amountText(total, model) })
+      ] }),
+      /* @__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,
+              labels,
+              session,
+              name: contactName,
+              email: contactEmail,
+              phone: contactPhone,
+              guestConfirmed,
+              authPhoneComplete,
+              errors: formErrors,
+              onFieldChange: changeBuyerField,
+              onGuestSave: saveGuestContact,
+              onGuestEdit: () => {
+                setGuestConfirmed(false);
+                setLocalFormErrors({});
+              },
+              onAuthPhoneSave: saveAuthPhone,
+              onRetrySession: retrySession,
+              onStartRegistration: actions.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 ? model.capabilities.pickupPoints ? /* @__PURE__ */ jsx("p", { className: "mt-1 text-xs text-muted-foreground", children: labels.pickupOnlyAddress }) : null : 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: model.countries,
+                    ...addressLocationProps,
+                    authenticated: model.session === "authenticated",
+                    createAddressId,
+                    hostErrors: addressFormErrors,
+                    saving: addressSaveAttempt !== null || Boolean(model.savedAddressState?.pendingId),
+                    saveError: model.savedAddressState?.error,
+                    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 = group.state;
+            const groupLines = group.lines;
+            const point = group.selectedPickupPoint;
+            const ready = group.ready ?? false;
+            const fee = group.feeCents ?? null;
+            const baseFee = group.baseFeeCents ?? 0;
+            const feeDiscount = group.feeDiscountCents ?? 0;
+            const option = group.selectedShippingOption;
+            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 && model.capabilities.pickupPoints ? point?.label : ""
+            ].filter(Boolean).join(" \xB7 ") : [labels.modeShipping, ready ? option?.label : "", ready ? option?.eta : ""].filter(Boolean).join(" \xB7 ");
+            const pickupDetailLine = model.capabilities.pickupPoints && 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.shippingAvailable ?? false;
+            const pickupAvailable = group.pickupAvailable ?? false;
+            const bothModes = model.capabilities.pickupPoints && (group.bothModesAvailable ?? false);
+            const currentModeAvailable = group.currentModeAvailable ?? false;
+            const currentChoiceCount = group.currentChoiceCount ?? 0;
+            const canChange = group.canChange ?? false;
+            const requestedPanelMode = group.panelMode ?? state.mode;
+            const panelMode = !model.capabilities.pickupPoints && requestedPanelMode === "pickup" ? "shipping" : requestedPanelMode;
+            const shippingChoices = group.shippingOptions.map((item) => {
+              const discount = item.discountCents ?? 0;
+              const payable = item.payableFeeCents ?? item.feeCents;
+              return {
+                id: item.id,
+                title: item.label,
+                detail: item.eta,
+                meta: payable === 0 ? labels.groupFree : amountText(payable, model),
+                previousMeta: discount > 0 ? amountText(item.feeCents, model) : "",
+                disabled: item.disabled ?? false,
+                reason: item.disabledReason ?? ""
+              };
+            });
+            const pickupChoices = model.capabilities.pickupPoints ? group.pickupPoints.map((item) => {
+              const discount = item.discountCents ?? 0;
+              const payable = item.payableFeeCents ?? item.feeCents;
+              return {
+                id: item.id,
+                title: item.label,
+                detail: pickupDetail(item),
+                meta: payable === 0 ? labels.groupFree : amountText(payable, model),
+                previousMeta: discount > 0 ? amountText(item.feeCents, model) : "",
+                disabled: item.disabled ?? item.available === false,
+                reason: item.disabledReason ?? item.unavailableReason ?? ""
+              };
+            }) : [];
+            const modeChoices = [
+              {
+                id: "shipping",
+                title: labels.modeShipping,
+                detail: "",
+                meta: "",
+                disabled: false,
+                reason: ""
+              },
+              ...model.capabilities.pickupPoints ? [
+                {
+                  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 ? group.rateState === "pending" ? 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, model) }),
+                        /* @__PURE__ */ jsx("span", { children: fee === 0 ? labels.groupFree : money(fee, model) })
+                      ] }) : fee === 0 ? labels.groupFree : money(fee, model) }),
+                      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: [
+                      model.capabilities.pickupPoints ? /* @__PURE__ */ jsx(
+                        OptionGroup,
+                        {
+                          legend: labels.groupPickupPoints,
+                          options: pickupChoices,
+                          selectedId: state.pickupPointId ?? "",
+                          onSelect: (id) => choosePickupPoint(group, id),
+                          className: "grid gap-1.5"
+                        }
+                      ) : null,
+                      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 }),
+                    labels.groupNoCoverageHint ? /* @__PURE__ */ jsx("p", { className: "mt-0.5 text-xs text-muted-foreground", children: labels.groupNoCoverageHint }) : null,
+                    /* @__PURE__ */ jsxs("div", { className: "mt-1.5 flex flex-wrap gap-1.5", children: [
+                      model.capabilities.pickupPoints && 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 = line.currentUnitCents ?? line.unitCents;
+                    const tiers = line.tiers ?? [];
+                    const currentTier = line.currentTier ?? null;
+                    const nextTier = line.nextTier ?? null;
+                    const tierOpen = openTiers.includes(line.lineId);
+                    const nextReachable = line.nextTierReachable ?? false;
+                    const detailLine = [
+                      line.variant,
+                      ...isFiniteAmount(unitPrice) ? [fill(labels.each, { amount: money(unitPrice, model) })] : []
+                    ].filter(Boolean).join(" \xB7 ");
+                    const inventoryKnown = isFiniteAmount(line.stock);
+                    const unavailable = line.unavailable ?? (isFiniteAmount(line.stock) && line.stock < 1);
+                    const isAssociate = model.capabilities.associates && line.isAssociate === true;
+                    const currentQuantity = line.quantity ?? 0;
+                    const maxQty = line.availableMaxQuantity ?? line.stock;
+                    const minQty = isAssociate ? line.minQuantity ?? 1 : 1;
+                    const parentLine = line.parentLineId ? lines.find((entry) => entry.lineId === line.parentLineId) : void 0;
+                    const parentNote = model.capabilities.associates && parentLine && parentLine.groupId !== line.groupId ? fill(labels.associateOf, { name: parentLine.title }) : "";
+                    const relatedInGroup = Boolean(
+                      isAssociate && parentLine && parentLine.groupId === line.groupId
+                    );
+                    const associateDiscount = line.associateDiscount ?? null;
+                    const totalSavingCents = line.totalSavingCents ?? 0;
+                    const totalSavingPercent = line.totalSavingPercent ?? 0;
+                    const associateDefs = model.capabilities.associates && !isAssociate ? line.associates ?? [] : [];
+                    const associateLines = model.capabilities.associates ? line.associateLines ?? [] : [];
+                    const availableAssociates = line.availableAssociates ?? [];
+                    const addableAssociates = line.addableAssociates ?? [];
+                    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 = line.quantity !== void 0 && maxQty !== void 0 && maxQty > 0 && line.quantity >= maxQty;
+                    const canDecrease = line.quantity !== void 0 && inventoryKnown && !unavailable && (isAssociate ? minQty === 0 || line.quantity > minQty : line.quantity > 1);
+                    const canIncrease = line.quantity !== void 0 && inventoryKnown && !unavailable && maxQty !== void 0 && 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, model)
+                                      }) }),
+                                      /* @__PURE__ */ jsx("span", { className: "text-success", children: fill(labels.associateTotalSaving, {
+                                        amount: money(totalSavingCents, model),
+                                        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, model)
+                                    }) }) : null,
+                                    isAssociate ? /* @__PURE__ */ jsx(
+                                      "p",
+                                      {
+                                        className: atLimit ? "text-xs font-medium text-foreground" : "text-xs text-muted-foreground",
+                                        children: atLimit ? labels.associateLimitReached : maxQty !== void 0 || line.quantity !== void 0 ? fill(labels.associateMax, {
+                                          count: maxQty ?? currentQuantity
+                                        }) : null
+                                      }
+                                    ) : unavailable ? /* @__PURE__ */ jsx("p", { className: "text-xs text-destructive", children: labels.outOfStock }) : isFiniteAmount(line.stock) && 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: [
+                                  isFiniteAmount(line.netTotalCents) ? /* @__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(line.netTotalCents, model),
+                                          priceUpdating === line.lineId ? /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: labels.ellipsis }) : null
+                                        ]
+                                      }
+                                    )
+                                  ] }) : null,
+                                  /* @__PURE__ */ jsx("span", { "aria-live": "polite", className: "sr-only", children: priceUpdating === line.lineId ? labels.priceUpdating : "" }),
+                                  line.quantity !== void 0 ? /* @__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, currentQuantity - 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, currentQuantity + 1),
+                                        children: labels.increaseSymbol
+                                      }
+                                    )
+                                  ] }) : null
+                                ] })
+                              ]
+                            }
+                          ),
+                          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 && line.quantity !== void 0 ? /* @__PURE__ */ jsx("p", { className: "mt-1 text-xs text-muted-foreground", children: fill(labels.tierNext, {
+                              count: nextTier.minQuantity - currentQuantity,
+                              price: money(nextTier.unitCents, model)
+                            }) }) : 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, labels) }),
+                                        /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-1.5", children: [
+                                          /* @__PURE__ */ jsx("span", { className: "tabular-nums", children: money(tier.unitCents, model) }),
+                                          tierIsCurrent ? /* @__PURE__ */ jsx("span", { className: "text-xs font-normal text-muted-foreground", children: labels.tierCurrent }) : null
+                                        ] })
+                                      ]
+                                    },
+                                    tier.minQuantity
+                                  );
+                                })
+                              }
+                            ) : null
+                          ] }) : null,
+                          model.capabilities.associates && 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 = def.availableMaxQuantity ?? 0;
+                                  const defDiscount = def.discount ?? null;
+                                  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, model) }),
+                                            defDiscount ? /* @__PURE__ */ jsx("span", { className: "text-muted-foreground line-through tabular-nums", children: money(def.regularCents ?? 0, model) }) : null,
+                                            defDiscount ? /* @__PURE__ */ jsx("span", { className: "text-success", children: fill(labels.associateSavings, {
+                                              amount: money(defDiscount.amountCents, model),
+                                              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: () => actions.onAddAssociate?.(line.lineId, def.id),
+                                            children: adding ? labels.associateAdding : labels.associateAdd
+                                          }
+                                        )
+                                      ]
+                                    },
+                                    def.id
+                                  );
+                                })
+                              }
+                            ) : null
+                          ] }) : null,
+                          model.capabilities.associates && 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,
+                          line.removable === false ? 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: paymentSummaryLabel }),
+                activeMethod?.detail !== void 0 ? /* @__PURE__ */ jsx("p", { className: "truncate text-xs text-muted-foreground", children: activeMethod.detail }) : null
+              ] }),
+              hasPaymentMethods ? /* @__PURE__ */ jsx(
+                Button,
+                {
+                  type: "button",
+                  size: "sm",
+                  variant: VARIANT_OUTLINE,
+                  "aria-expanded": paymentOpen,
+                  "aria-controls": `${uid}-payment-panel`,
+                  onClick: () => setPaymentOpen(!paymentOpen),
+                  children: activeMethod ? labels.changeAction : labels.paymentSelectAction ?? labels.changeAction
+                }
+              ) : null
+            ] }),
+            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: selectPayment,
+                className: "grid gap-1.5"
+              }
+            ) }) : null,
+            labels.paymentProviderNote ? /* @__PURE__ */ jsx("p", { className: "mt-2 text-xs text-muted-foreground", children: labels.paymentProviderNote }) : null,
+            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 }),
+                  retryPayment ? /* @__PURE__ */ jsx("div", { className: "mt-2", children: /* @__PURE__ */ jsx(
+                    Button,
+                    {
+                      type: "button",
+                      size: "sm",
+                      variant: VARIANT_OUTLINE,
+                      onClick: retryPayment,
+                      children: labels.paymentRetry
+                    }
+                  ) }) : null
+                ]
+              }
+            ) : 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
+        ] }),
+        model.labels.footerNote ? /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: model.labels.footerNote }) : null
+      ] }),
+      /* @__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 }),
+          unitCount === void 0 ? null : /* @__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: amountText(subtotal, model),
+                emphasis: false
+              }
+            ),
+            promotions.map(
+              (promotion) => isFiniteAmount(promotion.amountCents) ? /* @__PURE__ */ jsx(
+                SummaryRow,
+                {
+                  label: promotion.label,
+                  value: `- ${money(promotion.amountCents, model)}`,
+                  emphasis: false
+                },
+                promotion.id
+              ) : null
+            ),
+            isFiniteAmount(tax) ? /* @__PURE__ */ jsx(
+              SummaryRow,
+              {
+                label: taxLabel(labels.tax, model.totals.taxRateBps),
+                value: money(tax, model),
+                emphasis: false
+              }
+            ) : null,
+            pending ? null : /* @__PURE__ */ jsxs(Fragment, { children: [
+              isFiniteAmount(shippingFees) && shippingFees > 0 ? /* @__PURE__ */ jsx(
+                SummaryRow,
+                {
+                  label: labels.shippingCost,
+                  value: money(shippingFees, model),
+                  emphasis: false
+                }
+              ) : null,
+              isFiniteAmount(pickupFees) && pickupFees > 0 ? /* @__PURE__ */ jsx(
+                SummaryRow,
+                {
+                  label: labels.pickupCost,
+                  value: money(pickupFees, model),
+                  emphasis: false
+                }
+              ) : null,
+              isFiniteAmount(model.totals.extraCents) && model.totals.extraCents > 0 ? /* @__PURE__ */ jsx(
+                SummaryRow,
+                {
+                  label: model.totals.extraLabel || labels.extraCost,
+                  value: money(model.totals.extraCents, model),
+                  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 : amountText(total, model) })
+            ] }) }),
+            pending ? labels.totalPendingNote ? /* @__PURE__ */ jsx("p", { className: "mt-1 text-xs text-muted-foreground", children: labels.totalPendingNote }) : null : labels.totalDemoNote ? /* @__PURE__ */ jsx("p", { className: "mt-1 text-xs text-muted-foreground", children: labels.totalDemoNote }) : null
+          ] }),
+          model.capabilities.coupons ? /* @__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: appliedCoupon.code ? fill(labels.promoApplied, { code: appliedCoupon.code }) : appliedCoupon.label }),
+            /* @__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);
+                    setCouponNoticeDismissed(true);
+                  },
+                  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
+            }
+          ) }) : null
+        ] }),
+        /* @__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 })
+        ] }) })
+      ] }) })
+    ] })
+  ] });
+}
+export {
+  CheckoutView
+};
+//# sourceMappingURL=checkout-view.mjs.map