@thorprovider/blocks 4.1.0 → 4.3.0

package/dist/blocks/designs/checkout-commerce-v1/demo/use-demo-checkout.mjs

@@ -0,0 +1,874 @@
+"use client";
+import { useEffect, useRef, useState } from "react";
+import { addressSummary, fill, pickupDetail } from "../view/format.mjs";
+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 useDemoCheckout({
+  data,
+  scenario,
+  onQuantityChange,
+  onRemoveItem,
+  onSelectAddress,
+  onCreateAddress,
+  onStartRegistration,
+  onAddAssociate,
+  onConfirmOrder,
+  onContinueShopping
+}) {
+  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 [addingAssociate, setAddingAssociate] = useState("");
+  const [failedAdds, setFailedAdds] = useState([]);
+  const [removingLine, setRemovingLine] = useState("");
+  const [associateNotice, setAssociateNotice] = useState(null);
+  const [contactName, setContactName] = useState(scenario.customer.name);
+  const [contactEmail, setContactEmail] = useState(scenario.customer.email);
+  const [contactPhone, setContactPhone] = useState(scenario.customer.phone);
+  const [sessionRetrying, setSessionRetrying] = useState(false);
+  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 [couponNotice, setCouponNotice] = useState(
+    null
+  );
+  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
+      )
+    );
+  }
+  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
+      )
+    );
+  }
+  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);
+    onSelectAddress?.(addressId);
+    revalidateShipping(addressId);
+  }
+  function createAddressId() {
+    return `created-${Date.now()}`;
+  }
+  function saveNewAddress(address, saveToAccount) {
+    const nextAddress = {
+      ...address,
+      label: saveToAccount ? address.label : labels.addressTemporary,
+      isDefault: addressBook.length === 0
+    };
+    setAddressBook((current) => [...current, nextAddress]);
+    setShippingAddressId(nextAddress.id);
+    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("");
+      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("");
+    }, 250);
+  }
+  function requestRemoveLine(line) {
+    const ids = line.isAssociate ? [line.lineId] : [
+      line.lineId,
+      ...lines.filter((entry) => entry.parentLineId === line.lineId).map((entry) => entry.lineId)
+    ];
+    removeWithPending(line.lineId, ids, line.title);
+  }
+  function changeBuyerField(field, value) {
+    if (field === "name") setContactName(value);
+    if (field === "email") setContactEmail(value);
+    if (field === "phone") setContactPhone(value);
+  }
+  function retrySession() {
+    setSessionRetrying(true);
+    window.setTimeout(() => setSessionRetrying(false), 800);
+  }
+  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;
+  const modelLines = lines.map((line) => {
+    const currentUnitCents = unitPriceFor(line, line.quantity);
+    const currentTier = currentTierFor(line, line.quantity);
+    const nextTier = nextTierFor(line, line.quantity);
+    const mainQuantity = line.parentLineId ? mainQuantityFor(line) : line.quantity;
+    const availableMaxQuantity = line.isAssociate ? associateMaxFor(line, mainQuantity) : line.stock;
+    const associateDiscount = line.isAssociate ? associateDiscountFor(currentUnitCents, line.regularCents) : null;
+    const netTotalCents = lineNetTotal(line);
+    const regularTotalCents = (line.regularCents ?? 0) * line.quantity;
+    const totalSavingCents = associateDiscount ? Math.max(0, regularTotalCents - netTotalCents) : 0;
+    const availableAssociates = (line.associates ?? []).filter((associate) => !lines.some((entry) => entry.lineId === associate.lineId)).map((associate) => ({
+      ...associate,
+      availableMaxQuantity: associateDefMax(associate, line.quantity),
+      discount: associateDiscountFor(associate.unitCents, associate.regularCents)
+    }));
+    return {
+      ...line,
+      currentUnitCents,
+      netTotalCents,
+      currentTier,
+      nextTier,
+      mainQuantity,
+      availableMaxQuantity,
+      associateDiscount,
+      totalSavingCents,
+      totalSavingPercent: associateDiscount && regularTotalCents > 0 ? Math.round(totalSavingCents / regularTotalCents * 100) : 0,
+      regularTotalCents,
+      unavailable: line.stock < 1,
+      nextTierReachable: nextTier !== null && line.stock >= nextTier.minQuantity && nextTier.unitCents < currentUnitCents,
+      associateLines: line.isAssociate ? [] : modelLinesForParent(line.lineId, lines),
+      availableAssociates,
+      addableAssociates: availableAssociates.filter(
+        (associate) => associate.eligible !== false && associate.stock > 0 && (associate.availableMaxQuantity ?? 0) > 0
+      ),
+      associates: line.associates?.map((associate) => ({
+        ...associate,
+        availableMaxQuantity: associateDefMax(associate, line.quantity),
+        discount: associateDiscountFor(associate.unitCents, associate.regularCents)
+      }))
+    };
+  });
+  function modelLinesForParent(parentLineId, sourceLines) {
+    return sourceLines.filter((entry) => entry.parentLineId === parentLineId).map(
+      (line) => ({
+        ...line,
+        currentUnitCents: unitPriceFor(line, line.quantity),
+        netTotalCents: lineNetTotal(line),
+        currentTier: currentTierFor(line, line.quantity),
+        nextTier: nextTierFor(line, line.quantity),
+        unavailable: line.stock < 1
+      })
+    );
+  }
+  const modelGroups = activeGroups.map((group) => {
+    const state = stateFor(group.id);
+    const selectedShippingOption = optionFor(group, state);
+    const selectedPickupPoint = pointFor(group, state);
+    const ready = readiness(group, state);
+    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 bothModesAvailable = shippingAvailable && pickupAvailable;
+    const currentModeAvailable = state.mode === "shipping" ? shippingAvailable : pickupAvailable;
+    const currentChoiceCount = state.mode === "shipping" ? group.shippingOptions.length : group.pickupPoints.length;
+    return {
+      ...group,
+      shippingOptions: group.shippingOptions.map((option) => ({
+        ...option,
+        payableFeeCents: Math.max(0, option.feeCents - (option.discountCents ?? 0))
+      })),
+      pickupPoints: group.pickupPoints.map((point) => ({
+        ...point,
+        payableFeeCents: Math.max(0, point.feeCents - (point.discountCents ?? 0))
+      })),
+      rateState: state.rateState,
+      state,
+      lines: orderGroupLines(modelLines.filter((line) => line.groupId === group.id)),
+      selectedShippingOption: selectedShippingOption ? {
+        ...selectedShippingOption,
+        payableFeeCents: Math.max(
+          0,
+          selectedShippingOption.feeCents - (selectedShippingOption.discountCents ?? 0)
+        )
+      } : null,
+      selectedPickupPoint: selectedPickupPoint ? {
+        ...selectedPickupPoint,
+        payableFeeCents: Math.max(
+          0,
+          selectedPickupPoint.feeCents - (selectedPickupPoint.discountCents ?? 0)
+        )
+      } : null,
+      selectedMode: state.mode,
+      selectedShippingOptionId: state.shippingOptionId,
+      selectedPickupPointId: state.pickupPointId,
+      ready,
+      feeCents: ready ? feeFor(group, state) : null,
+      baseFeeCents: baseFeeFor(group, state),
+      feeDiscountCents: ready ? Math.max(0, baseFeeFor(group, state) - feeFor(group, state)) : 0,
+      shippingAvailable,
+      pickupAvailable,
+      bothModesAvailable,
+      currentModeAvailable,
+      currentChoiceCount,
+      canChange: bothModesAvailable || (currentModeAvailable ? currentChoiceCount > 1 : pickupAvailable || shippingAvailable),
+      panelMode: currentModeAvailable ? state.mode : pickupAvailable ? "pickup" : "shipping"
+    };
+  });
+  const modelPaymentMethods = paymentOptions.map((option) => {
+    const method = paymentMethods.find((item) => item.id === option.id);
+    return {
+      ...method,
+      title: option.title,
+      enabled: !option.disabled,
+      reason: option.reason,
+      meta: option.meta,
+      disabled: option.disabled
+    };
+  });
+  const modelConfirmation = confirmation ? {
+    ...confirmation,
+    groups: confirmation.groups.map((group) => ({
+      ...group,
+      lines: group.lines.map((line) => ({
+        ...line,
+        currentUnitCents: unitPriceFor(line, line.quantity),
+        netTotalCents: lineNetTotal(line)
+      }))
+    }))
+  } : void 0;
+  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 (sessionBlocked) return;
+    if (scenario.simulateFailure && !paymentRetried) {
+      setPaymentError(true);
+      return;
+    }
+    completeOrder();
+  }
+  function retryPayment() {
+    setPaymentRetried(true);
+    setPaymentError(false);
+    completeOrder();
+  }
+  function applyCoupon(value) {
+    const code = value.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
+      }
+    ]);
+    setCouponNotice({
+      status: "applied",
+      message: fill(labels.promoApplied, { code: coupon.code })
+    });
+  }
+  function removeCoupon() {
+    setPromotions((current) => current.filter((promotion) => promotion.kind !== "coupon"));
+    setCouponNotice(null);
+  }
+  const model = {
+    labels: { ...data.meta, ...data.labels },
+    locale: data.meta.locale,
+    currencyCode: data.meta.currency,
+    countries: data.countries,
+    paymentMethods: modelPaymentMethods,
+    lines: modelLines,
+    groups: modelGroups,
+    addresses: addressBook,
+    selectedShippingAddressId: shippingAddressId,
+    contact: {
+      name: contactName,
+      email: contactEmail,
+      phone: contactPhone
+    },
+    session,
+    selectedPaymentId: activePaymentId,
+    billing: { sameAsShipping: billingSame, addressId: billingId },
+    promotions,
+    totals: {
+      subtotalCents: subtotal,
+      promotionsCents: promotionsTotal,
+      taxCents: tax,
+      taxRateBps: scenario.taxRateBps,
+      shippingCents: shippingFees,
+      pickupCents: pickupFees,
+      extraCents: scenario.extraCents,
+      extraLabel: scenario.extraLabel,
+      totalCents: total,
+      unitCount,
+      pickupCount,
+      pending,
+      hasUnavailable,
+      canConfirm,
+      blockedMessage,
+      requiresShipping,
+      missingAddress,
+      paymentNotice: paymentNotice || void 0
+    },
+    states: {
+      cart: scenario.loading ? "loading" : lines.length === 0 ? "empty" : "ready",
+      shipping: activeGroups.length === 0 ? "idle" : activeGroups.some((group) => stateFor(group.id).rateState === "pending") ? "loading" : pending ? "error" : "ready",
+      payment: paymentError ? "error" : activePaymentId ? "ready" : "idle",
+      order: confirmation ? "confirmed" : creatingOrder ? "submitting" : "idle"
+    },
+    feedback: {
+      addingAssociate,
+      removingLine,
+      priceUpdating,
+      stockMessage,
+      associateNotice,
+      couponNotice
+    },
+    ...modelConfirmation ? { confirmation: modelConfirmation } : {},
+    capabilities: { associates: true, pickupPoints: true, coupons: true }
+  };
+  const actions = {
+    onQuantityChange: changeQuantity,
+    onRemoveItem: (lineId) => {
+      const line = lines.find((item) => item.lineId === lineId);
+      if (line) requestRemoveLine(line);
+    },
+    onSelectAddress: (addressId, target = "shipping", sameAsShipping) => {
+      if (target === "shipping") {
+        selectShippingAddress(addressId);
+      } else if (sameAsShipping !== void 0) {
+        setBillingSame(sameAsShipping);
+        if (addressId) setBillingId(addressId);
+      } else {
+        setBillingSame(false);
+        setBillingId(addressId);
+      }
+    },
+    onCreateAddress: saveNewAddress,
+    onContactChange: (patch) => {
+      Object.entries(patch).forEach(([field, value]) => {
+        if (value !== void 0) changeBuyerField(field, value);
+      });
+    },
+    onSelectShippingOption: (groupId, optionId, mode) => {
+      const group = scenario.groups.find((item) => item.id === groupId);
+      if (!group) return;
+      if (mode && !optionId) {
+        selectMode(group, mode);
+      } else if (optionId && mode === "shipping") {
+        chooseShippingOption(group, optionId);
+      } else if (optionId && mode === "pickup") {
+        choosePickupPoint(group, optionId);
+      } else if (optionId && group.shippingOptions.some((option) => option.id === optionId)) {
+        chooseShippingOption(group, optionId);
+      } else if (optionId) {
+        choosePickupPoint(group, optionId);
+      }
+    },
+    onSelectPayment: (nextPaymentId) => {
+      setPaymentId(nextPaymentId);
+      setPaymentError(false);
+    },
+    onApplyPromo: (code) => code === null ? removeCoupon() : applyCoupon(code),
+    onSubmit: handleConfirm,
+    onRetryPayment: retryPayment,
+    onRetry: (area, groupId) => {
+      if (area === "session") {
+        retrySession();
+      } else if (area === "shipping" && groupId) {
+        const group = scenario.groups.find((item) => item.id === groupId);
+        if (group) recalc(group);
+      } else if (area === "payment" || area === "order") {
+        retryPayment();
+      }
+    },
+    onContinueShopping: () => onContinueShopping?.(),
+    ...onStartRegistration ? {
+      onStartRegistration: (contact) => onStartRegistration(contact)
+    } : {},
+    onAddressEditorOpen: (panelId) => {
+      window.setTimeout(() => {
+        document.getElementById(panelId)?.scrollIntoView({ block: "center" });
+      }, 60);
+    },
+    createAddressId,
+    ...scenario.groups.some(
+      (group) => group.items.some((item) => (item.associates?.length ?? 0) > 0)
+    ) ? {
+      onAddAssociate: (mainLineId, associateId) => {
+        const main = lines.find((line) => line.lineId === mainLineId);
+        const associate = associatesFor(mainLineId).find((item) => item.id === associateId);
+        if (main && associate) addAssociate(main, associate);
+      }
+    } : {}
+  };
+  return { model, actions };
+}
+export {
+  useDemoCheckout
+};
+//# sourceMappingURL=use-demo-checkout.mjs.map