@zappie/theme-base 0.0.0-stage → 0.1.1

package/dist/cart.js

@@ -0,0 +1,1140 @@
+"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 } : {}
+        }
+      )
+    ] });
+  } });
+}
+function CartReview({ themeClass } = {}) {
+  const bridge = useBaseHostBridge();
+  const cartOverlay = useOverlay("modal_id", "review-menu");
+  const countedOpen = useRef(false);
+  const [contactPhone, setContactPhone] = useState("");
+  const [contactPhoneTouched, setContactPhoneTouched] = useState(false);
+  const contactPhoneState = {
+    value: contactPhone,
+    touched: contactPhoneTouched,
+    update: setContactPhone,
+    touch: () => setContactPhoneTouched(true)
+  };
+  useEffect(() => {
+    if (cartOverlay.isOpen && !countedOpen.current) {
+      countEvent("bag");
+    }
+    countedOpen.current = cartOverlay.isOpen;
+  }, [cartOverlay.isOpen]);
+  return /* @__PURE__ */ jsx(ThemeClassProvider, { value: themeClass, children: /* @__PURE__ */ jsx(
+    Overlay.Root,
+    {
+      param: "modal_id",
+      id: "review-menu",
+      presentation: { base: "drawer", lg: "dialog" },
+      children: /* @__PURE__ */ jsxs(
+        Overlay.Content,
+        {
+          "data-zappie-theme": "base",
+          className: themeClass ? `z-base-cart ${themeClass}` : "z-base-cart",
+          children: [
+            /* @__PURE__ */ jsxs("header", { className: "z-base-cart-header", children: [
+              /* @__PURE__ */ jsx(Overlay.Title, { children: "Cart" }),
+              /* @__PURE__ */ jsx(
+                Overlay.Close,
+                {
+                  "aria-label": "Close cart",
+                  className: "z-base-button-secondary",
+                  children: "Close"
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsx(Cart.Root, { className: "z-base-cart-body", children: ({ isHydrated, lines }) => /* @__PURE__ */ jsxs(Fragment, { children: [
+              bridge.error && /* @__PURE__ */ jsx("p", { role: "alert", children: bridge.error }),
+              !isHydrated ? /* @__PURE__ */ jsx(Loading, {}) : lines.length === 0 ? /* @__PURE__ */ jsx(EmptyCart, {}) : /* @__PURE__ */ jsxs(Fragment, { children: [
+                /* @__PURE__ */ jsxs("div", { className: "z-base-cart-tools", children: [
+                  /* @__PURE__ */ jsx(Overlay.Close, { className: "z-base-button-secondary", children: "Add more items" }),
+                  /* @__PURE__ */ jsx(ClearCart, {})
+                ] }),
+                /* @__PURE__ */ jsx(CartIssues, {}),
+                /* @__PURE__ */ jsxs("div", { className: "z-base-cart-columns", children: [
+                  /* @__PURE__ */ jsx(CartLines, {}),
+                  /* @__PURE__ */ jsxs("div", { children: [
+                    /* @__PURE__ */ jsx(FulfilmentPanel, {}),
+                    /* @__PURE__ */ jsx(DeliveryDistance, {}),
+                    /* @__PURE__ */ jsx(CustomerDetails, { contactPhone: contactPhoneState }),
+                    /* @__PURE__ */ jsx(PromoSheet, {}),
+                    /* @__PURE__ */ jsx(RewardsSheet, {}),
+                    /* @__PURE__ */ jsx(Totals, { contactPhone: contactPhoneState })
+                  ] })
+                ] })
+              ] })
+            ] }) })
+          ]
+        }
+      )
+    }
+  ) });
+}
+
+export { CartReview };
+//# sourceMappingURL=cart.js.map
+//# sourceMappingURL=cart.js.map