@zappie/theme-base 0.1.0 → 0.1.2

package/dist/cart.js

@@ -1,1071 +1,23 @@
 "use client";
-import { useAddressLookup } from './chunk-NTJONY3N.js';
-import { ClearCart, CartLine } from './chunk-FB5DRCU7.js';
-import './chunk-2MV6KU3R.js';
-import { useBaseHostBridge } from './chunk-QWST2TA2.js';
-import { ThemeClassProvider, useThemeClass } from './chunk-JFEI2OUZ.js';
-import { useCheckoutHandoff } from './chunk-IG63ONID.js';
-import { useOverlay, Overlay, Cart, Fulfilment, Branch, Totals as Totals$1, Money, Address, Schedule } from '@zappie/foundations';
-import { countEvent } from '@zappie/sdk/visits';
-import { useRef, useState, useEffect, Fragment, useId, useCallback } from 'react';
-import { jsx, jsxs } from 'react/jsx-runtime';
-import { useStore, useCart, useCartCatalogue } from '@zappie/sdk/react';
-import { isContactPhoneValid, payReadiness } from '@zappie/sdk/checkout';
-import { format } from '@zappie/sdk';
 
-var labels = {
-  remove_line: "Remove item",
-  accept_price: "Accept new price",
-  remove_promo: "Remove promo",
-  set_quantity: "Update quantity",
-  choose_option: "Choose options",
-  choose_other_option: "Change options",
-  change_address: "Change delivery address",
-  schedule: "Choose order time"
-};
-function Issue({
-  issue,
-  applyFix
-}) {
-  const editor = useOverlay("cart_edit", issue.lineId ?? "");
-  const address = useOverlay("cart_sheet", "address");
-  const schedule = useOverlay("cart_sheet", "schedule");
-  const [error, setError] = useState(null);
-  const fix = (value) => {
-    setError(null);
-    try {
-      if (value.action === "choose_option" || value.action === "choose_other_option") {
-        editor.open();
-      } else if (value.action === "change_address") {
-        address.open();
-      } else if (value.action === "schedule") {
-        schedule.open();
-      } else {
-        applyFix(issue, value);
-      }
-    } catch (error2) {
-      setError(
-        error2 instanceof Error ? error2.message : "Unable to apply this change"
-      );
-    }
-  };
-  return /* @__PURE__ */ jsxs("li", { children: [
-    /* @__PURE__ */ jsx("p", { children: issue.message }),
-    issue.fixes.filter((value) => labels[value.action]).map((value, index) => /* @__PURE__ */ jsx(
-      "button",
-      {
-        type: "button",
-        className: "z-base-button-secondary",
-        onClick: () => fix(value),
-        children: value.action === "set_quantity" ? `Set quantity to ${value.quantity}` : labels[value.action]
-      },
-      index
-    )),
-    error && /* @__PURE__ */ jsx("p", { role: "alert", children: error })
-  ] });
-}
-function CartIssues() {
-  return /* @__PURE__ */ jsx(Cart.Issues, { children: ({ issues, applyFix }) => issues.length > 0 && /* @__PURE__ */ jsxs("section", { className: "z-base-issues", "aria-label": "Cart issues", children: [
-    /* @__PURE__ */ jsx("h2", { children: "Review your cart" }),
-    /* @__PURE__ */ jsx("ul", { children: issues.map((issue, index) => /* @__PURE__ */ jsx(
-      Issue,
-      {
-        issue,
-        applyFix
-      },
-      `${issue.lineId}:${issue.code}:${index}`
-    )) })
-  ] }) });
-}
-
-// src/cart/cart-line-groups.ts
-function groupCartLinesByMenu(lines, catalogue) {
-  const names = new Map(
-    (catalogue?.menus ?? []).map((menu) => [menu.id, menu.name])
-  );
-  const groups = /* @__PURE__ */ new Map();
-  for (const line of lines) {
-    const menuId = line.menuId ?? "unknown";
-    const group = groups.get(menuId);
-    if (group) {
-      group.lines.push(line);
-      continue;
-    }
-    const menuName = names.get(menuId);
-    groups.set(menuId, {
-      menuId,
-      ...menuName !== void 0 ? { menuName } : {},
-      lines: [line]
-    });
-  }
-  const ordered = [];
-  for (const menu of catalogue?.menus ?? []) {
-    const group = groups.get(menu.id);
-    if (group) {
-      ordered.push(group);
-      groups.delete(menu.id);
-    }
-  }
-  return [...ordered, ...groups.values()];
-}
-function CartLines() {
-  const { lines } = useCart();
-  const catalogue = useCartCatalogue();
-  const groups = groupCartLinesByMenu(lines, catalogue);
-  const grouped = (catalogue?.menus?.length ?? 0) > 1;
-  return /* @__PURE__ */ jsx("section", { "aria-label": "Cart items", className: "z-base-lines", children: groups.map((group) => /* @__PURE__ */ jsxs(
-    "section",
-    {
-      "aria-label": group.menuName ?? "Other items",
-      className: "z-base-line-group",
-      children: [
-        grouped && /* @__PURE__ */ jsx("h2", { children: group.menuName ?? "Other items" }),
-        group.lines.map((line) => /* @__PURE__ */ jsx(CartLine, { line }, line.id))
-      ]
-    },
-    group.menuId
-  )) });
-}
-var FIELDS = [
-  { field: "firstName", label: "First name", autoComplete: "given-name" },
-  { field: "lastName", label: "Last name", autoComplete: "family-name" },
-  { field: "email", label: "Email", autoComplete: "email" }
-];
-function CustomerDetails({
-  contactPhone
-} = {}) {
-  const { customerDetails } = useBaseHostBridge();
-  const handoff = useCheckoutHandoff();
-  const showPhone = Boolean(
-    contactPhone && handoff.contactPhone && handoff.customer
-  );
-  const inputId = useId();
-  const hintId = useId();
-  const errorId = useId();
-  const invalid = Boolean(
-    contactPhone?.touched && !isContactPhoneValid(contactPhone.value)
-  );
-  if (!customerDetails && !showPhone) {
-    return null;
-  }
-  return /* @__PURE__ */ jsxs("section", { className: "z-base-fulfilment-panel", "aria-label": "Your details", children: [
-    /* @__PURE__ */ jsx("h2", { children: "Your details" }),
-    customerDetails && FIELDS.filter(
-      ({ field }) => field !== "email" || customerDetails.requiresEmail
-    ).map(({ field, label, autoComplete }) => /* @__PURE__ */ jsxs("label", { className: "z-base-field", children: [
-      label,
-      /* @__PURE__ */ jsx(
-        "input",
-        {
-          type: field === "email" ? "email" : "text",
-          autoComplete,
-          required: field !== "lastName",
-          value: customerDetails.values[field],
-          onChange: (event) => customerDetails.update(field, event.target.value)
-        }
-      )
-    ] }, field)),
-    showPhone && contactPhone && /* @__PURE__ */ jsxs("div", { className: "z-base-field", children: [
-      /* @__PURE__ */ jsx("label", { htmlFor: inputId, children: "Contact phone (optional)" }),
-      /* @__PURE__ */ jsx(
-        "input",
-        {
-          id: inputId,
-          type: "tel",
-          inputMode: "tel",
-          autoComplete: "tel",
-          value: contactPhone.value,
-          "aria-describedby": invalid ? `${hintId} ${errorId}` : hintId,
-          "aria-invalid": invalid,
-          onBlur: contactPhone.touch,
-          onChange: (event) => contactPhone.update(event.target.value)
-        }
-      ),
-      /* @__PURE__ */ jsx("span", { id: hintId, children: handoff.customer?.phoneLast4 ? `Leave blank to use your Zappie number ending ${handoff.customer.phoneLast4}` : "Leave blank to use your Zappie number" }),
-      invalid && /* @__PURE__ */ jsx("span", { id: errorId, role: "alert", children: "Enter a phone number with 7 to 15 digits" })
-    ] })
-  ] });
-}
-function DeliveryDistance() {
-  const distance = useBaseHostBridge().deliveryDistance;
-  if (!distance?.message) {
-    return null;
-  }
-  return /* @__PURE__ */ jsx(
-    "p",
-    {
-      role: distance.status === "too_far" ? "alert" : "status",
-      className: "z-base-notice",
-      "data-severity": distance.status === "too_far" ? "error" : "warning",
-      children: distance.message
-    }
-  );
-}
-function EmptyCart() {
-  return /* @__PURE__ */ jsxs(Cart.Empty, { className: "z-base-cart-empty", children: [
-    /* @__PURE__ */ jsx("h2", { children: "Your cart is empty" }),
-    /* @__PURE__ */ jsx("p", { children: "Add something from the menu to get started." }),
-    /* @__PURE__ */ jsx(Overlay.Close, { className: "z-base-button", children: "Browse menu" })
-  ] });
-}
-function CartSheet({
-  id,
-  title,
-  trigger,
-  children
-}) {
-  const rootClass = useThemeClass("z-base-cart z-base-editor");
-  const overlay = useOverlay("cart_sheet", id);
-  return /* @__PURE__ */ jsxs(
-    Overlay.Root,
-    {
-      param: "cart_sheet",
-      id,
-      presentation: { base: "sheet", lg: "dialog" },
-      children: [
-        /* @__PURE__ */ jsx(Overlay.Trigger, { className: "z-base-button-secondary", children: trigger }),
-        /* @__PURE__ */ jsxs(Overlay.Content, { "data-zappie-theme": "base", className: rootClass, children: [
-          /* @__PURE__ */ jsxs("header", { className: "z-base-cart-header", children: [
-            /* @__PURE__ */ jsx(Overlay.Title, { children: title }),
-            /* @__PURE__ */ jsx(Overlay.Close, { className: "z-base-button-secondary", children: "Cancel" })
-          ] }),
-          overlay.isOpen && /* @__PURE__ */ jsx("div", { className: "z-base-cart-body", children })
-        ] })
-      ]
-    }
-  );
-}
-function useAddressSelection(initial) {
-  const lookup = useAddressLookup();
-  const [selected, setSelected] = useState(initial);
-  const [query, setQuery] = useState(initial?.line1 ?? "");
-  const [busy, setBusy] = useState(false);
-  const [locating, setLocating] = useState(false);
-  const [error, setError] = useState(null);
-  const revision = useRef(0);
-  const sessions = useRef(/* @__PURE__ */ new Map());
-  const suggestions = useCallback(
-    async (query2) => {
-      const values = await lookup.suggest(query2);
-      return values.map((value) => {
-        sessions.current.set(value.placeId, value.sessionToken);
-        return {
-          id: value.placeId,
-          label: value.address,
-          address: { line1: value.address, placeId: value.placeId }
-        };
-      });
-    },
-    [lookup]
-  );
-  const changeQuery = (value) => {
-    revision.current++;
-    setQuery(value);
-    setSelected(void 0);
-    setBusy(false);
-    setLocating(false);
-    setError(null);
-  };
-  const run = async (request, operation, fillQuery) => {
-    try {
-      const resolved = await operation();
-      if (revision.current === request) {
-        setSelected(resolved);
-        if (fillQuery) {
-          setQuery(resolved.line1);
-        }
-      }
-    } catch (failure) {
-      const aborted = (failure instanceof Error || failure instanceof DOMException) && failure.name === "AbortError";
-      if (revision.current === request && !aborted) {
-        setError(
-          failure instanceof Error ? failure.message : "Unable to locate this address"
-        );
-      }
-    } finally {
-      if (revision.current === request) {
-        setBusy(false);
-        setLocating(false);
-      }
-    }
-  };
-  const select = (address) => {
-    const request = ++revision.current;
-    setLocating(false);
-    setBusy(true);
-    setError(null);
-    const resolve = lookup.resolve;
-    if (!resolve) {
-      setSelected(address);
-      setBusy(false);
-      return Promise.resolve();
-    }
-    return run(
-      request,
-      () => resolve(address, sessions.current.get(address.placeId ?? "")),
-      false
-    );
-  };
-  const findCurrentLocation = () => {
-    if (!lookup.reverse || !navigator.geolocation) {
-      return;
-    }
-    const reverse = lookup.reverse;
-    const request = ++revision.current;
-    setBusy(true);
-    setLocating(true);
-    setError(null);
-    navigator.geolocation.getCurrentPosition(
-      (position) => {
-        if (revision.current !== request) {
-          return;
-        }
-        void run(
-          request,
-          () => reverse({
-            lat: position.coords.latitude,
-            lng: position.coords.longitude
-          }),
-          true
-        );
-      },
-      (failure) => {
-        if (revision.current !== request) {
-          return;
-        }
-        if (failure.code === 1) {
-          setError("Location access is off. Search for your address instead.");
-        } else {
-          setError(
-            "We couldn't find your location. Search for your address instead."
-          );
-        }
-        setBusy(false);
-        setLocating(false);
-      },
-      { enableHighAccuracy: false, timeout: 1e4, maximumAge: 6e4 }
-    );
-  };
-  return {
-    selected,
-    query,
-    busy,
-    locating,
-    error,
-    suggestions,
-    changeQuery,
-    select,
-    findCurrentLocation
-  };
-}
-function AddressForm() {
-  const cart = useCart();
-  const lookup = useAddressLookup();
-  const bridge = useBaseHostBridge();
-  const overlay = useOverlay("cart_sheet", "address");
-  const current = cart.fulfilment?.type === "delivery" ? cart.fulfilment.address : void 0;
-  const {
-    selected,
-    query,
-    busy,
-    error: lookupError,
-    suggestions,
-    changeQuery,
-    select,
-    findCurrentLocation,
-    locating
-  } = useAddressSelection(current);
-  const [instructions, setInstructions] = useState(current?.instructions ?? "");
-  const [error, setError] = useState(null);
-  const save = () => {
-    if (!selected || !cart.branchId || busy) {
-      return;
-    }
-    setError(null);
-    try {
-      const fulfilment = {
-        type: "delivery",
-        branchId: cart.branchId,
-        address: { ...selected, instructions },
-        ...cart.fulfilment && "scheduledFor" in cart.fulfilment ? { scheduledFor: cart.fulfilment.scheduledFor } : {}
-      };
-      cart.actions.setFulfilment(fulfilment);
-      bridge.saveFulfilment?.(fulfilment);
-      overlay.close();
-    } catch (failure) {
-      setError(
-        failure instanceof Error ? failure.message : "Unable to save this address"
-      );
-    }
-  };
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    lookup.reverse && typeof navigator !== "undefined" && navigator.geolocation && /* @__PURE__ */ jsx(
-      "button",
-      {
-        type: "button",
-        className: "z-base-button-secondary",
-        disabled: busy,
-        onClick: findCurrentLocation,
-        children: locating ? "Finding your location\u2026" : "Use my current location"
-      }
-    ),
-    /* @__PURE__ */ jsx(
-      Address.Picker,
-      {
-        query,
-        onQueryChange: changeQuery,
-        getSuggestions: suggestions,
-        onSelect: (value) => {
-          if ("address" in value) {
-            void select(value.address);
-          }
-        },
-        children: ({ suggestions: suggestions2, status, isOpen }) => /* @__PURE__ */ jsxs(Fragment, { children: [
-          /* @__PURE__ */ jsxs("label", { className: "z-base-field", htmlFor: "z-base-delivery-address", children: [
-            "Delivery address",
-            /* @__PURE__ */ jsx(
-              Address.Input,
-              {
-                className: "z-base-input",
-                id: "z-base-delivery-address",
-                "aria-label": "Delivery address"
-              }
-            )
-          ] }),
-          status === "loading" && /* @__PURE__ */ jsx("p", { role: "status", children: "Finding addresses\u2026" }),
-          status === "error" && /* @__PURE__ */ jsx("p", { role: "alert", children: "Unable to find addresses. Try again." }),
-          isOpen && /* @__PURE__ */ jsx(Address.Suggestions, { className: "z-base-suggestions", children: suggestions2.map((value, index) => /* @__PURE__ */ jsx(
-            Address.Suggestion,
-            {
-              index,
-              className: "z-base-choice",
-              children: value.label
-            },
-            value.id
-          )) }),
-          isOpen && status === "ready" && query && suggestions2.length === 0 && /* @__PURE__ */ jsx("p", { children: "No matching addresses." })
-        ] })
-      }
-    ),
-    /* @__PURE__ */ jsxs("label", { className: "z-base-field", children: [
-      "Delivery instructions",
-      /* @__PURE__ */ jsx(
-        "textarea",
-        {
-          className: "z-base-input",
-          maxLength: 500,
-          value: instructions,
-          onChange: (event) => setInstructions(event.target.value)
-        }
-      )
-    ] }),
-    selected && lookup.Map && /* @__PURE__ */ jsx(lookup.Map, { address: selected }),
-    lookupError && /* @__PURE__ */ jsx("p", { role: "alert", children: lookupError }),
-    error && /* @__PURE__ */ jsx("p", { role: "alert", children: error }),
-    /* @__PURE__ */ jsx(
-      "button",
-      {
-        type: "button",
-        className: "z-base-button",
-        disabled: !selected || busy,
-        onClick: () => {
-          void save();
-        },
-        children: busy ? "Locating address\u2026" : "Save address"
-      }
-    )
-  ] });
-}
-function AddressSheet() {
-  const cart = useCart();
-  return /* @__PURE__ */ jsx(
-    CartSheet,
-    {
-      id: "address",
-      title: "Delivery address",
-      trigger: cart.fulfilment?.type === "delivery" ? "Change address" : "Add delivery address",
-      children: /* @__PURE__ */ jsx(AddressForm, {})
-    }
-  );
-}
-function RegionPicker() {
-  const bridge = useBaseHostBridge();
-  const regions = bridge.deliveryRegions;
-  if (!regions?.length || !bridge.setDeliveryRegion) {
-    return null;
-  }
-  const sorted = [...regions].sort((a, b) => a.name.localeCompare(b.name));
-  return /* @__PURE__ */ jsxs("label", { className: "z-base-field", children: [
-    "Delivery region",
-    /* @__PURE__ */ jsxs(
-      "select",
-      {
-        className: "z-base-input",
-        value: bridge.deliveryRegionId ?? "",
-        onChange: (event) => {
-          if (event.target.value) {
-            bridge.setDeliveryRegion?.(event.target.value);
-          }
-        },
-        children: [
-          /* @__PURE__ */ jsx("option", { value: "", disabled: true, children: "Choose a delivery region" }),
-          sorted.map((region) => /* @__PURE__ */ jsxs("option", { value: region.id, children: [
-            region.name,
-            " (",
-            format.money(region.fee),
-            ")"
-          ] }, region.id))
-        ]
-      }
-    )
-  ] });
-}
-
-// src/cart/cart-schedule.ts
-function cartScheduleLimits(menu, lines, maxDays) {
-  const sections = (menu?.menus ?? []).filter(
-    (section) => section.schedule?.preorder && lines.some(
-      (line) => line.menuId ? line.menuId === section.id : section.categoryIds.some(
-        (id) => menu?.categories.find((category) => category.id === id)?.itemIds.includes(line.itemId)
-      )
-    )
-  );
-  const notice = Math.max(
-    0,
-    ...sections.map((section) => section.schedule?.preorderNoticeHours ?? 0)
-  );
-  const horizons = sections.map((section) => section.schedule?.preorderMaxDays).filter((days) => typeof days === "number" && days > 0);
-  const limit = horizons.length > 0 ? Math.min(maxDays ?? Number.POSITIVE_INFINITY, ...horizons) : maxDays;
-  return {
-    noticeMinutes: notice * 60,
-    maxDays: limit === void 0 ? void 0 : Math.max(1, Math.min(90, limit))
-  };
-}
-function ScheduleForm({ branch }) {
-  const cart = useCart();
-  const bridge = useBaseHostBridge();
-  const overlay = useOverlay("cart_sheet", "schedule");
-  const menu = useCartCatalogue();
-  const limits = cartScheduleLimits(menu, cart.lines, bridge.scheduleMaxDays);
-  const [error, setError] = useState(null);
-  const fulfilment = cart.fulfilment;
-  if (!fulfilment || fulfilment.type === "dine_in") {
-    return /* @__PURE__ */ jsx("p", { children: "Add a delivery address or select pickup before choosing a time." });
-  }
-  return /* @__PURE__ */ jsx(
-    Schedule,
-    {
-      branch: bridge.scheduleOpeningTimes ? { ...branch, openingTimes: bridge.scheduleOpeningTimes } : branch,
-      maxDays: limits.maxDays,
-      noticeMinutes: limits.noticeMinutes,
-      defaultValue: fulfilment.scheduledFor ?? null,
-      children: ({ days, value, setValue, canAsap, isValid }) => /* @__PURE__ */ jsxs("div", { className: "z-base-field", children: [
-        /* @__PURE__ */ jsxs("p", { children: [
-          "Times are shown in ",
-          branch.timezone ?? "the store\u2019s timezone",
-          "."
-        ] }),
-        /* @__PURE__ */ jsxs("label", { className: "z-base-field", children: [
-          "Order time",
-          /* @__PURE__ */ jsxs(
-            "select",
-            {
-              className: "z-base-input",
-              value: value ?? "",
-              onChange: (event) => setValue(event.target.value || null),
-              children: [
-                /* @__PURE__ */ jsx("option", { value: "", disabled: !canAsap, children: "As soon as possible" }),
-                days.map((day) => /* @__PURE__ */ jsx("optgroup", { label: day.date, children: day.slots.map((slot) => /* @__PURE__ */ jsx("option", { value: slot.value, children: slot.label }, slot.value)) }, day.date))
-              ]
-            }
-          )
-        ] }),
-        !isValid && /* @__PURE__ */ jsx("p", { role: "alert", children: "Choose an available order time." }),
-        days.length === 0 && /* @__PURE__ */ jsx("p", { children: "No scheduled times are currently available." }),
-        error && /* @__PURE__ */ jsx("p", { role: "alert", children: error }),
-        /* @__PURE__ */ jsx(
-          "button",
-          {
-            type: "button",
-            className: "z-base-button",
-            disabled: !isValid,
-            onClick: () => {
-              try {
-                const next = { ...fulfilment };
-                if (value === null) {
-                  delete next.scheduledFor;
-                } else {
-                  next.scheduledFor = value;
-                }
-                cart.actions.setFulfilment(next);
-                bridge.saveFulfilment?.(next);
-                overlay.close();
-              } catch (failure) {
-                setError(
-                  failure instanceof Error ? failure.message : "Unable to save this time"
-                );
-              }
-            },
-            children: "Save time"
-          }
-        )
-      ] })
-    }
-  );
-}
-function ScheduleSheet({ branch }) {
-  return /* @__PURE__ */ jsx(CartSheet, { id: "schedule", title: "Schedule order", trigger: "Choose order time", children: /* @__PURE__ */ jsx(ScheduleForm, { branch }) });
-}
-function FulfilmentPanel() {
-  const cart = useCart();
-  const store = useStore();
-  const bridge = useBaseHostBridge();
-  const lookup = useAddressLookup();
-  const [error, setError] = useState(null);
-  const branch = store.data?.branches.find(
-    (branch2) => branch2.id === cart.branchId
-  );
-  const mode = bridge.fulfilmentMode ?? cart.fulfilment?.type ?? "delivery";
-  if (!branch) {
-    return null;
-  }
-  const scheduledFor = cart.fulfilment && "scheduledFor" in cart.fulfilment ? cart.fulfilment.scheduledFor : void 0;
-  return /* @__PURE__ */ jsxs("section", { className: "z-base-fulfilment-panel", "aria-label": "Fulfilment", children: [
-    /* @__PURE__ */ jsx("h2", { children: "Fulfilment" }),
-    /* @__PURE__ */ jsx(Fulfilment.Switch, { "aria-label": "Order fulfilment", children: ({ options }) => /* @__PURE__ */ jsx("div", { className: "z-base-line-actions", children: options.filter((option) => option !== "dine_in").map((option) => /* @__PURE__ */ jsx(
-      "button",
-      {
-        type: "button",
-        "aria-pressed": mode === option,
-        className: "z-base-button-secondary",
-        onClick: () => {
-          setError(null);
-          try {
-            if (!bridge.setFulfilmentMode(
-              option
-            )) {
-              setError(
-                "This menu does not allow that fulfilment option."
-              );
-            }
-          } catch (failure) {
-            setError(
-              failure instanceof Error ? failure.message : "Unable to change fulfilment"
-            );
-          }
-        },
-        children: option === "pickup" ? "Pickup" : "Delivery"
-      },
-      option
-    )) }) }),
-    /* @__PURE__ */ jsx(Branch.Picker, { branches: [branch], children: ({ selected }) => /* @__PURE__ */ jsxs("p", { children: [
-      mode === "pickup" ? "Collect from" : "Ordering from",
-      " ",
-      selected?.name,
-      selected?.address ? ` \u2014 ${selected.address}` : ""
-    ] }) }),
-    error && /* @__PURE__ */ jsx("p", { role: "alert", children: error }),
-    mode === "delivery" && /* @__PURE__ */ jsxs(Fragment, { children: [
-      cart.fulfilment?.type === "delivery" && /* @__PURE__ */ jsxs(Fragment, { children: [
-        /* @__PURE__ */ jsx("p", { children: cart.fulfilment.address.line1 }),
-        lookup.Map && /* @__PURE__ */ jsx(lookup.Map, { address: cart.fulfilment.address })
-      ] }),
-      /* @__PURE__ */ jsx(AddressSheet, {}),
-      /* @__PURE__ */ jsx(RegionPicker, {})
-    ] }),
-    scheduledFor && /* @__PURE__ */ jsxs("p", { children: [
-      "Scheduled for",
-      " ",
-      new Intl.DateTimeFormat("en", {
-        dateStyle: "medium",
-        timeStyle: "short",
-        timeZone: branch.timezone ?? store.data?.timezone
-      }).format(new Date(scheduledFor))
-    ] }),
-    branch.fulfilment.scheduling && /* @__PURE__ */ jsx(ScheduleSheet, { branch })
-  ] });
-}
-function Loading() {
-  const { error } = useStore();
-  if (error) {
-    return /* @__PURE__ */ jsx("p", { role: "alert", children: "Unable to load the cart. Reload the page to try again." });
-  }
-  return /* @__PURE__ */ jsxs("div", { className: "z-base-cart-empty", role: "status", "aria-busy": "true", children: [
-    /* @__PURE__ */ jsx("p", { children: "Loading cart\u2026" }),
-    /* @__PURE__ */ jsx("div", { className: "z-base-cart-placeholder", "aria-hidden": "true" })
-  ] });
-}
-function PromoForm() {
-  const cart = useCart();
-  const bridge = useBaseHostBridge();
-  const overlay = useOverlay("cart_sheet", "promo");
-  const [code, setCode] = useState(cart.promoCode ?? "");
-  const [error, setError] = useState(null);
-  const save = (value) => {
-    try {
-      cart.actions.setPromoCode(value);
-      overlay.close();
-    } catch (failure) {
-      setError(
-        failure instanceof Error ? failure.message : "Unable to apply this code"
-      );
-    }
-  };
-  return /* @__PURE__ */ jsxs(
-    "form",
-    {
-      className: "z-base-field",
-      onSubmit: (event) => {
-        event.preventDefault();
-        save(code.trim());
-      },
-      children: [
-        /* @__PURE__ */ jsxs("label", { className: "z-base-field", children: [
-          "Promo code",
-          /* @__PURE__ */ jsx(
-            "input",
-            {
-              className: "z-base-input",
-              autoComplete: "off",
-              value: code,
-              onChange: (event) => setCode(event.target.value)
-            }
-          )
-        ] }),
-        /* @__PURE__ */ jsx("p", { children: "Discounts are confirmed when your order totals update." }),
-        bridge.availablePromos?.length ? /* @__PURE__ */ jsxs("section", { "aria-label": "Available promos", children: [
-          /* @__PURE__ */ jsx("h3", { children: "Available promos" }),
-          /* @__PURE__ */ jsx("ul", { className: "z-base-option-list", children: bridge.availablePromos.map((promo) => /* @__PURE__ */ jsxs("li", { children: [
-            /* @__PURE__ */ jsxs("div", { children: [
-              /* @__PURE__ */ jsx("strong", { children: promo.name }),
-              /* @__PURE__ */ jsx("p", { children: promo.description })
-            ] }),
-            /* @__PURE__ */ jsxs(
-              "button",
-              {
-                className: "z-base-button-secondary",
-                type: "button",
-                disabled: promo.disabled,
-                onClick: () => save(promo.code),
-                children: [
-                  "Apply ",
-                  promo.code
-                ]
-              }
-            )
-          ] }, promo.id)) })
-        ] }) : null,
-        error && /* @__PURE__ */ jsx("p", { role: "alert", children: error }),
-        /* @__PURE__ */ jsx("button", { className: "z-base-button", type: "submit", disabled: !code.trim(), children: "Apply code" }),
-        cart.promoCode && /* @__PURE__ */ jsx(
-          "button",
-          {
-            className: "z-base-button-secondary",
-            type: "button",
-            onClick: () => save(null),
-            children: "Remove code"
-          }
-        )
-      ]
-    }
-  );
-}
-function PromoSheet() {
-  const cart = useCart();
-  const handoff = useCheckoutHandoff();
-  if (!handoff.customer) {
-    return null;
-  }
-  return /* @__PURE__ */ jsx(
-    CartSheet,
-    {
-      id: "promo",
-      title: "Promo code",
-      trigger: cart.promoCode ? `Promo: ${cart.promoCode}` : "Add promo code",
-      children: /* @__PURE__ */ jsx(PromoForm, {})
-    }
-  );
-}
-function RewardsSheet() {
-  const bridge = useBaseHostBridge();
-  const handoff = useCheckoutHandoff();
-  const [error, setError] = useState(null);
-  const rewards = bridge.rewards;
-  if (!handoff.customer || !rewards) {
-    return null;
-  }
-  const appliedByPerk = new Map(
-    rewards.applied.map((reward) => [reward.perkId, reward])
-  );
-  return /* @__PURE__ */ jsxs(
-    CartSheet,
-    {
-      id: "rewards",
-      title: "Rewards",
-      trigger: rewards.applied.length ? `Rewards (${rewards.applied.length})` : "Use rewards",
-      children: [
-        /* @__PURE__ */ jsxs("p", { children: [
-          "Your points: ",
-          rewards.balance
-        ] }),
-        error && /* @__PURE__ */ jsx("p", { role: "alert", children: error }),
-        rewards.items.length ? /* @__PURE__ */ jsx("ul", { className: "z-base-option-list", children: rewards.items.map((reward) => {
-          const applied = appliedByPerk.get(reward.id);
-          const busy = rewards.busyPerkId === reward.id;
-          const unavailable = reward.disabled || !applied && reward.pointsCost > rewards.balance;
-          return /* @__PURE__ */ jsxs("li", { children: [
-            /* @__PURE__ */ jsxs("div", { children: [
-              /* @__PURE__ */ jsx("strong", { children: reward.name }),
-              /* @__PURE__ */ jsx("p", { children: reward.description }),
-              /* @__PURE__ */ jsxs("p", { children: [
-                reward.pointsCost,
-                " points \xB7 ",
-                reward.reward
-              ] })
-            ] }),
-            applied ? /* @__PURE__ */ jsx(
-              "button",
-              {
-                className: "z-base-button-secondary",
-                type: "button",
-                disabled: busy,
-                onClick: () => {
-                  setError(null);
-                  void rewards.cancel(applied.redemptionId).catch((failure) => {
-                    setError(
-                      failure instanceof Error ? failure.message : "Unable to remove this reward"
-                    );
-                  });
-                },
-                children: "Remove"
-              }
-            ) : /* @__PURE__ */ jsx(
-              "button",
-              {
-                className: "z-base-button-secondary",
-                type: "button",
-                disabled: busy || unavailable,
-                onClick: () => {
-                  setError(null);
-                  void rewards.redeem(reward.id).catch((failure) => {
-                    setError(
-                      failure instanceof Error ? failure.message : "Unable to redeem this reward"
-                    );
-                  });
-                },
-                children: reward.pointsCost > rewards.balance ? "Not enough points" : "Redeem"
-              }
-            )
-          ] }, reward.id);
-        }) }) : /* @__PURE__ */ jsx("p", { children: "No rewards available yet." })
-      ]
-    }
-  );
-}
-var labels2 = {
-  pay: "Continue to payment",
-  sign_in: "Sign in to continue",
-  busy: "Please wait\u2026",
-  quoting: "Updating total\u2026",
-  retry: "Update totals to continue",
-  address: "Add a delivery address",
-  choose_area: "Choose a delivery area",
-  fix_issues: "Review your cart",
-  too_far: "Too far for delivery",
-  phone: "Check your phone number"
-};
-function toPayReadinessQuoteState(cartState, totalsStatus) {
-  if (cartState.status === "quoting") {
-    return { status: "loading" };
-  }
-  if (totalsStatus === "stale" || totalsStatus === "offline") {
-    return { status: "error" };
-  }
-  if (cartState.status === "quoted") {
-    return { status: "ready", quote: cartState.quote };
-  }
-  if (cartState.status === "needs_attention") {
-    if (cartState.quote) {
-      return { status: "ready", quote: cartState.quote };
-    }
-    return { status: "error" };
-  }
-  return { status: "idle" };
-}
-function checkoutButtonState({
-  busy,
-  cartState,
-  totalsStatus,
-  fulfilment,
-  customer,
-  contactPhoneValid = true,
-  deliveryDistance
-}) {
-  let status;
-  if (busy) {
-    status = "busy";
-  } else if (!customer) {
-    status = "sign_in";
-  } else if (deliveryDistance?.status === "too_far") {
-    status = "too_far";
-  } else {
-    const addressValid = fulfilment?.type !== "delivery" || Boolean(
-      fulfilment.address.line1 || fulfilment.address.placeId || fulfilment.address.coordinates
-    );
-    status = payReadiness(
-      toPayReadinessQuoteState(cartState, totalsStatus),
-      contactPhoneValid,
-      addressValid
-    );
-    if (status === "pay" && cartState.status === "needs_attention") {
-      status = "fix_issues";
-    }
-  }
-  return {
-    status,
-    label: labels2[status],
-    enabled: status === "pay" || status === "sign_in" || status === "phone"
-  };
-}
-function CheckoutCta({
-  totalsStatus,
-  contactPhone
-}) {
-  const cart = useCart();
-  const bridge = useBaseHostBridge();
-  const handoff = useCheckoutHandoff();
-  const [busy, setBusy] = useState(false);
-  const [error, setError] = useState(null);
-  const showContactPhone = Boolean(
-    contactPhone && handoff.contactPhone && handoff.customer
-  );
-  const buttonInput = {
-    busy,
-    cartState: cart.state,
-    totalsStatus,
-    fulfilment: cart.fulfilment,
-    customer: handoff.customer,
-    contactPhoneValid: !showContactPhone || isContactPhoneValid(contactPhone?.value ?? "")
-  };
-  if (bridge.deliveryDistance) {
-    buttonInput.deliveryDistance = bridge.deliveryDistance;
-  }
-  const button = checkoutButtonState(buttonInput);
-  const checkout = async () => {
-    if (!button.enabled) {
-      return;
-    }
-    if (button.status === "phone") {
-      contactPhone?.touch();
-      return;
-    }
-    setBusy(true);
-    setError(null);
-    try {
-      if (!handoff.customer) {
-        await handoff.signIn();
-      } else {
-        const payload = cart.actions.toCheckoutPayload();
-        if (showContactPhone && contactPhone) {
-          await handoff.pay(payload, { contactPhone: contactPhone.value });
-        } else {
-          await handoff.pay(payload);
-        }
-      }
-    } catch (error2) {
-      setError(
-        error2 instanceof Error ? error2.message : "Unable to continue to checkout"
-      );
-    } finally {
-      setBusy(false);
-    }
-  };
-  return /* @__PURE__ */ jsxs("div", { className: "z-base-checkout", children: [
-    error && /* @__PURE__ */ jsx("p", { role: "alert", children: error }),
-    /* @__PURE__ */ jsx(
-      "button",
-      {
-        type: "button",
-        className: "z-base-button",
-        disabled: !button.enabled,
-        onClick: () => {
-          void checkout();
-        },
-        children: button.label
-      }
-    )
-  ] });
-}
-function Totals({
-  contactPhone
-} = {}) {
-  const cart = useCart();
-  useBaseHostBridge();
-  const [error, setError] = useState(null);
-  const blocked = cart.issues.some((issue) => issue.severity === "blocking");
-  const refresh = async () => {
-    setError(null);
-    try {
-      await cart.actions.quote({ force: true });
-    } catch (error2) {
-      setError(
-        error2 instanceof Error ? error2.message : "Unable to update totals"
-      );
-    }
-  };
-  return /* @__PURE__ */ jsx(Totals$1, { className: "z-base-summary", children: ({ quote, status }) => {
-    const unpriced = blocked && (!quote || quote.subtotal.amountMinor === 0);
-    return /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsx("h2", { children: "Order summary" }),
-      status === "loading" && /* @__PURE__ */ jsx("p", { role: "status", children: "Updating totals\u2026" }),
-      status === "offline" && /* @__PURE__ */ jsx("p", { role: "alert", children: "Unable to connect. Try updating your totals again." }),
-      status === "stale" && !blocked && /* @__PURE__ */ jsx("p", { children: "Update totals before continuing." }),
-      error && /* @__PURE__ */ jsx("p", { role: "alert", children: error }),
-      unpriced && /* @__PURE__ */ jsx("p", { children: "Totals appear once the issues above are resolved." }),
-      blocked && !unpriced && /* @__PURE__ */ jsx("p", { children: "Your total may change once the issues above are resolved." }),
-      quote && !unpriced && /* @__PURE__ */ jsxs("dl", { className: "z-base-totals", children: [
-        /* @__PURE__ */ jsxs("div", { children: [
-          /* @__PURE__ */ jsx("dt", { children: "Subtotal" }),
-          /* @__PURE__ */ jsx("dd", { children: /* @__PURE__ */ jsx(Money, { value: quote.subtotal }) })
-        ] }),
-        quote.fees.map((fee, index) => /* @__PURE__ */ jsxs("div", { children: [
-          /* @__PURE__ */ jsx("dt", { children: fee.label }),
-          /* @__PURE__ */ jsx("dd", { children: /* @__PURE__ */ jsx(Money, { value: fee.amount }) })
-        ] }, `${fee.code}:${index}`)),
-        quote.delivery && /* @__PURE__ */ jsxs("div", { children: [
-          /* @__PURE__ */ jsx("dt", { children: "Delivery" }),
-          /* @__PURE__ */ jsx("dd", { children: /* @__PURE__ */ jsx(Money, { value: quote.delivery }) })
-        ] }),
-        quote.discounts.map((discount, index) => /* @__PURE__ */ jsxs("div", { children: [
-          /* @__PURE__ */ jsx("dt", { children: discount.label }),
-          /* @__PURE__ */ jsx("dd", { children: /* @__PURE__ */ jsx(Money, { value: discount.amount }) })
-        ] }, `${discount.code}:${index}`)),
-        /* @__PURE__ */ jsxs("div", { className: "z-base-total", children: [
-          /* @__PURE__ */ jsx("dt", { children: "Total" }),
-          /* @__PURE__ */ jsx("dd", { children: /* @__PURE__ */ jsx(Money, { value: quote.total }) })
-        ] })
-      ] }),
-      (status === "stale" || status === "offline") && !blocked && /* @__PURE__ */ jsx(
-        "button",
-        {
-          type: "button",
-          className: "z-base-button-secondary",
-          onClick: () => {
-            void refresh();
-          },
-          children: "Update totals"
-        }
-      ),
-      /* @__PURE__ */ jsx(
-        CheckoutCta,
-        {
-          totalsStatus: status,
-          ...contactPhone ? { contactPhone } : {}
-        }
-      )
-    ] });
-  } });
-}
+// src/cart/cart-review.tsx
+import { Cart, Overlay, useOverlay } from "@zappie/foundations";
+import { countEvent } from "@zappie/sdk/visits";
+import { Fragment, useEffect, useRef, useState } from "react";
+import { useBaseHostBridge } from "./host-bridge.js";
+import { CartIssues } from "./cart/cart-issues.js";
+import { CartLines } from "./cart/cart-lines.js";
+import { ClearCart } from "./cart/clear-cart.js";
+import { CustomerDetails } from "./cart/customer-details.js";
+import { DeliveryDistance } from "./cart/delivery-distance.js";
+import { EmptyCart } from "./cart/empty-cart.js";
+import { FulfilmentPanel } from "./cart/fulfilment-panel.js";
+import { Loading } from "./cart/loading.js";
+import { PromoSheet } from "./cart/promo-sheet.js";
+import { RewardsSheet } from "./cart/rewards-sheet.js";
+import { ThemeClassProvider } from "./cart/theme-class.js";
+import { Totals } from "./cart/totals.js";
+import { jsx, jsxs } from "react/jsx-runtime";
 function CartReview({ themeClass } = {}) {
   const bridge = useBaseHostBridge();
   const cartOverlay = useOverlay("modal_id", "review-menu");
@@ -1134,7 +86,7 @@ function CartReview({ themeClass } = {}) {
     }
   ) });
 }
-
-export { CartReview };
+export {
+  CartReview
+};
 //# sourceMappingURL=cart.js.map
-//# sourceMappingURL=cart.js.map