@wix/agent-skills 1.33.0 → 1.34.0

package/skills/wix-headless-templates/restaurants/app/wix/restaurants/ordering-core.ts

@@ -1,15 +1,16 @@
 // Online-ordering rules and DTO mapping — transport-agnostic, imported by both ./ordering.ts (SDK)
 // and the REST twin in templates/restaurants/rest/ordering.ts (fetch). The restaurant cart rides
 // on the eCom current cart (Cart V2); what makes a line a RESTAURANT line is the catalogReference
-// built here: the Orders app id plus options { operationId, menuId, sectionId } and, exactly as
+// built here: the Orders app id plus options { operationId, menuId, menuSectionId } (sectionId is
+// sent too; Restaurants' checkout check reads menuSectionId) and, exactly as
 // Wix's own ordering code sends them, the visitor's choices: options.priceVariant { id,
 // formattedPrice }, options.modifierGroups [{ id, modifiers: [{ id, price, formattedPrice }] }],
 // options.specialRequests. Raw entities carry `_id` (SDK) or `id` (REST). Has its own formatMoney
 // (a copy of ../money.ts) so it stands alone when stripped. Imports are type-only except the zone
 // helpers from ./time-core (deployed beside this file).
-import type { FulfillmentMethodInfo, MenuItem, MenuOrderingInfo, OrderCart, OrderLine, OrderSelection, OrderingStatus, SiteMoney, WeeklyWindow } from "./types";
+import type { DeliveryAddress, FulfillmentChoice, FulfillmentMethodInfo, FulfillmentTime, MenuItem, MenuOrderingInfo, OrderCart, OrderLine, OrderSelection, OrderingStatus, SiteMoney, WeeklyWindow } from "./types";
 import type { ImgSrc, Raw } from "./menu-core";
-import { zonedMinutes, zonedParts } from "./time-core";
+import { zonedDayKey, zonedMinutes, zonedParts } from "./time-core";
 
 /** The Restaurants Orders app id — every restaurant cart line's catalogReference.appId. */
 export const RESTAURANTS_ORDERS_APP_ID = "9a5d83fd-8570-482e-81ab-cfa88942ee60";
@@ -169,6 +170,98 @@ export function toFulfillmentMethods(raws: Raw[], fulfillmentIds: string[], mone
     }));
 }
 
+// ---- fulfillment choice ----------------------------------------------------------------------------------
+// Restaurants reads the order's fulfillment from the cart's delivery method code, and the hosted
+// checkout offers no pickup/delivery choice until one is set: "<TYPE>|ASAP" or
+// "<TYPE>|<startEpochMs>|<endEpochMs>" for a scheduled slot.
+
+/** The cart delivery-method code for a choice (no time → ASAP). */
+export function fulfillmentCode(choice: Pick<FulfillmentChoice, "type" | "time">): string {
+  if (choice.time && choice.time.type !== choice.type) throw new Error("The chosen time is for a different fulfillment type.");
+  return choice.time?.code ?? `${choice.type}|ASAP`;
+}
+
+const epochMs = (iso: unknown): number => new Date(String(iso ?? "")).getTime();
+
+/**
+ * The operation's time slots → FulfillmentTime[] (ASAP first, then earliest first). `asapSlots` is
+ * the first-available response (one ASAP entry per type), `daySlots` a per-date response; both carry
+ * `timeslotsPerFulfillmentType` (the API spells the type field `fulfilmentType`). The calls return
+ * only orderable slots (blocked ones are left out), so there is nothing to filter.
+ */
+export function toFulfillmentTimes(asapSlots: Raw | null | undefined, daySlots: Raw | null | undefined): FulfillmentTime[] {
+  const out: FulfillmentTime[] = [];
+  const seen = new Set<string>();
+  for (const raw of [...((asapSlots?.timeslotsPerFulfillmentType ?? []) as Raw[]), ...((daySlots?.timeslotsPerFulfillmentType ?? []) as Raw[])]) {
+    const type = (raw.fulfilmentType ?? raw.fulfillmentType) === "DELIVERY" ? "DELIVERY" : "PICKUP";
+    const slot: Raw = raw.timeSlot ?? {};
+    const start = epochMs(slot.startTime), end = epochMs(slot.endTime ?? slot.startTime);
+    if (!Number.isFinite(start) || !Number.isFinite(end)) continue;
+    const asap = slot.orderSchedulingType === "ASAP";
+    const code = asap ? `${type}|ASAP` : `${type}|${start}|${end}`;
+    if (seen.has(code)) continue;
+    seen.add(code);
+    out.push({ type, code, asap, startIso: new Date(start).toISOString(), endIso: new Date(end).toISOString() });
+  }
+  return out.sort((a, b) => Number(b.asap) - Number(a.asap) || a.startIso.localeCompare(b.startIso));
+}
+
+/** The per-date slots query for a "YYYY-MM-DD" day at the restaurant (`date.day`, `date.month`, `date.year`). */
+export function slotsDateQuery(dayKey: string): Record<string, string> {
+  const [year, month, day] = dayKey.split("-").map(Number);
+  return { "date.day": String(day), "date.month": String(month), "date.year": String(year) };
+}
+
+/**
+ * The time-slot calls' `deliveryAddress.*` query for a delivery address, so the delivery slots are
+ * those of the methods that deliver there ({} when there's no street or city yet).
+ */
+export function slotsAddressQuery(address: DeliveryAddress | undefined, region: { country: string; subdivision: string }): Record<string, string> {
+  if (!address?.addressLine?.trim() || !address.city?.trim()) return {};
+  const a = fulfillmentAddress({ type: "DELIVERY", address }, region) as DeliveryAddress;
+  const q: Record<string, string> = {};
+  for (const [k, v] of Object.entries(a)) if (v) q[`deliveryAddress.${k}`] = String(v);
+  return q;
+}
+
+/** Today at the restaurant, "YYYY-MM-DD" (the operation's timezone; "" → the visitor's). */
+export const restaurantToday = (timeZone: string, now: Date = new Date()): string => zonedDayKey(now, timeZone);
+
+/**
+ * The restaurant's country and subdivision ("US-CA"), from its pickup address or its delivery
+ * area's center. The cart needs a country before ANY delivery method — pickup included — is
+ * accepted (DELIVERY_METHOD_MISSING_ADDRESS), and Wix pre-fills one only from the visitor's location.
+ */
+export function toRestaurantRegion(rawMethods: Raw[]): { country: string; subdivision: string } {
+  for (const m of rawMethods) {
+    const a: Raw = m.pickupOptions?.address ?? m.deliveryOptions?.deliveryArea?.radiusOptions?.centerPointAddress ?? {};
+    if (!a.country) continue;
+    const sub = String(a.subdivision ?? "");
+    return { country: a.country, subdivision: sub && !sub.includes("-") ? `${a.country}-${sub}` : sub };
+  }
+  return { country: "", subdivision: "" };
+}
+
+/**
+ * The address a choice puts on the cart: the delivery address with the restaurant's country and
+ * subdivision filled in, or for pickup just the restaurant's country. Refuses a delivery choice
+ * without the fields Restaurants requires (street, city, country).
+ */
+export function fulfillmentAddress(choice: FulfillmentChoice, region: { country: string; subdivision: string }): DeliveryAddress | { country: string; subdivision?: string } {
+  if (choice.type !== "DELIVERY") {
+    if (!region.country) throw new Error("Pickup isn't set up for online orders. Choose delivery.");
+    return { country: region.country, ...(region.subdivision ? { subdivision: region.subdivision } : {}) };
+  }
+  const a = choice.address;
+  const country = a?.country?.trim() || region.country;
+  const subdivision = a?.subdivision?.trim() || (country === region.country ? region.subdivision : "");
+  if (!a?.addressLine?.trim() || !a.city?.trim() || !country) throw new Error("Enter a delivery address: street and city.");
+  return { ...a, country, ...(subdivision ? { subdivision } : {}) };
+}
+
+/** The message for a delivery method the cart refused: the address is outside every delivery area. */
+export const NOT_DELIVERABLE = "We don't deliver to this address. Choose pickup or another address.";
+
 // ---- cart --------------------------------------------------------------------------------------------------------
 
 export function toOrderLine(raw: Raw, currency: string, imgSrc: ImgSrc): OrderLine {
@@ -192,10 +285,11 @@ export function toOrderLine(raw: Raw, currency: string, imgSrc: ImgSrc): OrderLi
 export function toOrderCart(raw: Raw | null, subtotal: string, imgSrc: ImgSrc): OrderCart {
   const currency = cartCurrency(raw);
   const lines = ((raw?.lineItems ?? []) as Raw[]).map((l) => toOrderLine(l, currency, imgSrc));
-  return { lines, itemCount: lines.reduce((n, l) => n + l.quantity, 0), subtotal, currency };
+  const delivery: Raw = raw?.deliveryInfo ?? {};
+  return { lines, itemCount: lines.reduce((n, l) => n + l.quantity, 0), subtotal, currency, fulfillmentCode: delivery.method?.code ?? "" };
 }
 
-/** The after-discount subtotal from a cart estimate; "" when unknown. Fees, tax, delivery resolve at checkout. */
+/** The after-discount subtotal from a cart estimate; "" when unknown. Fees and tax resolve at checkout. */
 export function estimateSubtotal(estimate: Raw | null | undefined, raw: Raw): string {
   return formatMoney(estimate?.summary?.priceSummary?.subtotal, cartCurrency(raw));
 }
@@ -243,6 +337,7 @@ export function orderCatalogItem(
       options: {
         operationId: ctx.operationId,
         menuId: ctx.menuId,
+        menuSectionId: ctx.sectionId, // what Restaurants' checkout validates the dish against
         sectionId: ctx.sectionId,
         ...(variant ? { priceVariant: { id: variant.variantId, formattedPrice: variant.price } } : {}),
         ...(modifierGroups.length ? { modifierGroups } : {}),

package/skills/wix-headless-templates/restaurants/app/wix/restaurants/ordering.ts

@@ -4,11 +4,13 @@
 // the transport only. Copy as-is; extend by calling these exports, never by editing them. The
 // request shapes are exact and rewriting them is how carts break:
 //   - the catalogReference appId is the ORDERS app (9a5d83fd-…), never the Stores id;
-//   - options MUST carry operationId + menuId + sectionId (all three);
+//   - options MUST carry operationId + menuId + menuSectionId (sectionId rides along);
 //   - the visitor's choices ride in options.priceVariant / options.modifierGroups /
-//     options.specialRequests, the keys Wix's own ordering code sends (built in ordering-core).
+//     options.specialRequests, the keys Wix's own ordering code sends (built in ordering-core);
+//   - the fulfillment (pickup/delivery + time) is the cart's delivery method code, set BEFORE the
+//     checkout redirect: the hosted checkout has no picker for it and refuses the order without it.
 // Failures are loud: throws on a missing or paused ordering operation, an invalid selection,
-// unavailable lines, and an empty order at checkout — surface the message, don't swallow it.
+// unavailable lines, an undeliverable address, and an empty order at checkout — surface the message.
 // docs: https://dev.wix.com/docs/api-reference/business-solutions/restaurants/online-orders/operations/list-operations.md
 // docs: https://dev.wix.com/docs/api-reference/business-solutions/restaurants/online-orders/menu-ordering-settings/query-menu-ordering-settings.md
 // docs: https://dev.wix.com/docs/api-reference/business-solutions/restaurants/online-orders/fulfillment-methods/list-fulfillment-methods.md
@@ -17,6 +19,10 @@
 // docs: https://dev.wix.com/docs/api-reference/business-solutions/e-commerce/purchase-flow/cart-v2/add-line-items-to-current-cart.md
 // docs: https://dev.wix.com/docs/api-reference/business-solutions/e-commerce/purchase-flow/cart-v2/update-line-items.md
 // docs: https://dev.wix.com/docs/api-reference/business-management/headless/redirects/create-redirect-session.md
+// docs: https://dev.wix.com/docs/api-reference/business-solutions/e-commerce/purchase-flow/cart-v2/set-delivery-method-for-current-cart.md
+// docs: https://dev.wix.com/docs/api-reference/business-solutions/e-commerce/purchase-flow/cart-v2/update-current-cart.md
+// docs: https://dev.wix.com/docs/api-reference/business-solutions/restaurants/online-orders/operations/calculate-available-time-slots-for-date.md
+// docs: https://dev.wix.com/docs/api-reference/business-solutions/restaurants/online-orders/operations/calculate-first-available-time-slot-per-fulfillment-type.md
 import {
   operations as operationsModule,
   fulfillmentMethods as fulfillmentModule,
@@ -25,25 +31,33 @@ import {
 } from "@wix/restaurants";
 import { currentCartV2 } from "@wix/ecom";
 import { redirects as redirectsModule } from "@wix/redirects";
-import { wixModule } from "../sdk";
+import { wixFetch, wixModule } from "../sdk";
 import { imgSrc } from "../media";
 import { fetchSiteMoney } from "./menu";
 import { initialSelection, nextCursor, validateSelection, type Raw } from "./menu-core";
 import {
+  NOT_DELIVERABLE,
   RESTAURANTS_ORDERS_APP_ID,
   assertOrderAdded,
   assertOrderCheckoutable,
   assertOrderContext,
   assertOrderable,
   estimateSubtotal,
+  fulfillmentAddress,
+  fulfillmentCode,
   orderCatalogItem,
   rawId,
   resolveOperation,
+  restaurantToday,
+  slotsAddressQuery,
+  slotsDateQuery,
   toFulfillmentMethods,
+  toFulfillmentTimes,
   toMenuOrderingMap,
   toOrderCart,
+  toRestaurantRegion,
 } from "./ordering-core";
-import type { FulfillmentMethodInfo, MenuItem, MenuOrderingInfo, OrderCart, OrderSelection, OrderingStatus } from "./types";
+import type { DeliveryAddress, FulfillmentChoice, FulfillmentMethodInfo, FulfillmentTime, MenuItem, MenuOrderingInfo, OrderCart, OrderSelection, OrderingStatus } from "./types";
 
 export { RESTAURANTS_ORDERS_APP_ID };
 
@@ -98,12 +112,24 @@ export async function fetchMenuOrdering(): Promise<Record<string, MenuOrderingIn
 
 /**
  * The operation's enabled pickup/delivery methods (operation.fulfillmentIds only), fees and
- * minimums formatted in the site currency — for display; the buyer picks one on the hosted checkout.
+ * minimums formatted in the site currency — what the fulfillment picker offers.
  */
 export async function fetchFulfillmentMethods(): Promise<FulfillmentMethodInfo[]> {
   try {
-    const [status, money] = await Promise.all([resolveOrdering(), fetchSiteMoney()]);
+    const [status, money, raws] = await Promise.all([resolveOrdering(), fetchSiteMoney(), listFulfillmentRaws()]);
+    return toFulfillmentMethods(raws, status.fulfillmentIds, money);
+  } catch {
+    return []; // ordering still works without the list (pickup ASAP)
+  }
+}
+
+// The operation's raw fulfillment methods (operation.fulfillmentIds only), read once per session.
+let fulfillmentRawsPromise: Promise<Raw[]> | null = null;
+function listFulfillmentRaws(): Promise<Raw[]> {
+  fulfillmentRawsPromise ??= (async () => {
+    const status = await resolveOrdering();
     if (!status.fulfillmentIds.length) return [];
+    const wanted = new Set(status.fulfillmentIds);
     const raws: Raw[] = [];
     let cursor: string | null = null;
     do {
@@ -111,10 +137,12 @@ export async function fetchFulfillmentMethods(): Promise<FulfillmentMethodInfo[]
       raws.push(...((res.fulfillmentMethods ?? []) as Raw[]));
       cursor = nextCursor(res);
     } while (cursor);
-    return toFulfillmentMethods(raws, status.fulfillmentIds, money);
-  } catch {
-    return []; // display nicety — ordering still works without the list
-  }
+    return raws.filter((m) => wanted.has(rawId(m)));
+  })().catch((e) => {
+    fulfillmentRawsPromise = null; // transient failure — allow a retry on the next call
+    throw e;
+  });
+  return fulfillmentRawsPromise;
 }
 
 // A line's attributes.image may come back absent — join the menu items' images by the line's
@@ -212,17 +240,75 @@ export async function removeOrderLine(lineItemId: string): Promise<OrderCart> {
   return readCartWithSubtotal(cart as Raw);
 }
 
+// A raw Cart V2 / operations call under the SDK's auth, for the few calls this transport makes
+// by path. Throws an Error carrying the API's code (`.code`).
+async function wixJson(path: string, init?: RequestInit): Promise<Raw> {
+  const res = await wixFetch(path, { ...init, headers: { "Content-Type": "application/json", ...(init?.headers ?? {}) } });
+  const body: Raw = await res.json().catch(() => ({}));
+  if (!res.ok) {
+    const err = new Error(body?.message || `Request failed (${res.status})`) as Error & { code?: string };
+    err.code = body?.details?.applicationError?.code;
+    throw err;
+  }
+  return body;
+}
+
+/**
+ * The times the order can be fulfilled at: ASAP for each type, then the scheduled slots of `dayKey`
+ * ("YYYY-MM-DD" at the restaurant; default today), ASAP first. Pass the delivery `address` once the
+ * visitor has entered it: the delivery times are then those of the methods that deliver there (none
+ * when no method does). [] when there is no operation. Pass the chosen entry to setOrderFulfillment as `time`.
+ */
+export async function fetchFulfillmentTimes(dayKey?: string, address?: DeliveryAddress): Promise<FulfillmentTime[]> {
+  const { operationId, timeZone } = await resolveOrdering();
+  if (!operationId) return [];
+  const base = `/restaurants-operations/v1/operations/${operationId}`;
+  const where = slotsAddressQuery(address, address ? toRestaurantRegion(await listFulfillmentRaws()) : { country: "", subdivision: "" });
+  const day = new URLSearchParams({ ...slotsDateQuery(dayKey ?? restaurantToday(timeZone)), ...where });
+  const first = new URLSearchParams(where).toString();
+  const [asap, slots] = await Promise.all([
+    wixJson(`${base}/first-available-time-slot-per-fulfillment-type${first ? `?${first}` : ""}`, { method: "GET" }),
+    wixJson(`${base}/available-time-slots-per-date?${day}`, { method: "GET" }),
+  ]);
+  return toFulfillmentTimes(asap, slots);
+}
+
+/**
+ * Set how and when the order is fulfilled: pickup or delivery, a time from fetchFulfillmentTimes
+ * (omitted → ASAP), and for delivery the address (street, city; country and subdivision default to
+ * the restaurant's). Pickup puts the restaurant's country on the cart, which Wix requires before
+ * any delivery method. Throws NOT_DELIVERABLE when the address is outside every delivery area.
+ */
+export async function setOrderFulfillment(choice: FulfillmentChoice): Promise<OrderCart> {
+  const address = fulfillmentAddress(choice, toRestaurantRegion(await listFulfillmentRaws()));
+  await wixJson("/ecom/v2/carts/current", { method: "PATCH", body: JSON.stringify({ cart: { deliveryInfo: { address } } }) });
+  try {
+    const res = await wixJson("/ecom/v2/carts/current/set-delivery-method", { method: "POST", body: JSON.stringify({ deliveryMethod: { code: fulfillmentCode(choice) } }) });
+    return readCartWithSubtotal(res.cart ?? null);
+  } catch (e) {
+    if ((e as { code?: string }).code === "DELIVERY_METHOD_NOT_FOUND") {
+      throw new Error(choice.type === "DELIVERY" ? NOT_DELIVERABLE : "This pickup time isn't available. Choose another time.");
+    }
+    throw e;
+  }
+}
+
 /**
  * Start the Wix-hosted checkout for the current order and return the URL to navigate to.
- * The cart's id IS the checkout id — no separate checkout-creation call. Fulfillment
- * (pickup/delivery + time) and payment are collected on the hosted page. Call from the
- * browser: the return origin must be window.location.origin (https), never a server-derived
- * request origin (http behind the proxy → the return redirect 403s).
+ * The cart's id IS the checkout id — no separate checkout-creation call. The fulfillment must be
+ * on the cart first (setOrderFulfillment); a cart with none gets pickup ASAP. Payment is collected
+ * on the hosted page. Call from the browser: the return origin must be window.location.origin
+ * (https), never a server-derived request origin (http behind the proxy → the return redirect 403s).
  */
 export async function orderCheckoutUrl(): Promise<string> {
   const { cart } = await cartApi.getCurrentCart();
   const raw = cart as Raw;
   assertOrderCheckoutable(raw);
+  if (!raw.deliveryInfo?.method?.code) {
+    await setOrderFulfillment({ type: "PICKUP" }).catch(() => {
+      throw new Error("Choose pickup or delivery before checkout.");
+    });
+  }
   const origin = typeof window !== "undefined" ? window.location.origin : "";
   const session = await redirects.createRedirectSession({
     ecomCheckout: { checkoutId: rawId(raw) },

package/skills/wix-headless-templates/restaurants/app/wix/restaurants/types.ts

@@ -190,7 +190,7 @@ export interface MenuOrderingInfo {
   };
 }
 
-/** A pickup/delivery method the operation offers (the buyer picks one on the hosted checkout). */
+/** A pickup/delivery method the operation offers (display: name, fee, minimum). */
 export interface FulfillmentMethodInfo {
   id: string;
   type: "PICKUP" | "DELIVERY";
@@ -203,6 +203,38 @@ export interface FulfillmentMethodInfo {
   minOrderPriceAmount: string;
 }
 
+/**
+ * A time the order can be fulfilled at, from the operation's time slots. `code` is what the cart's
+ * delivery method takes ("PICKUP|ASAP", or "PICKUP|<startMs>|<endMs>" for a scheduled slot).
+ */
+export interface FulfillmentTime {
+  type: "PICKUP" | "DELIVERY";
+  code: string;
+  asap: boolean;
+  /** ISO start/end (equal for a point in time); render in OrderingStatus.timeZone. */
+  startIso: string;
+  endIso: string;
+}
+
+/**
+ * A delivery address. country (ISO-3166 alpha-2) and subdivision ("US-CA") default to the
+ * restaurant's when omitted — delivery is local.
+ */
+export interface DeliveryAddress {
+  addressLine: string;
+  city: string;
+  postalCode?: string;
+  country?: string;
+  subdivision?: string;
+}
+
+/** The visitor's fulfillment: pickup or delivery, a time (omitted → ASAP), and the address for delivery. */
+export interface FulfillmentChoice {
+  type: "PICKUP" | "DELIVERY";
+  time?: FulfillmentTime;
+  address?: DeliveryAddress;
+}
+
 export interface OrderLine {
   /** The cart line id — what update/remove take (NOT the menu item id). */
   lineItemId: string;
@@ -227,6 +259,8 @@ export interface OrderCart {
   /** Formatted subtotal (after discounts) — from the cart estimate, not hand-summed. */
   subtotal: string;
   currency: string;
+  /** The fulfillment code set on the cart ("PICKUP|ASAP", …); "" when none is set yet. */
+  fulfillmentCode: string;
 }
 
 /** A custom question the owner added to the reservation form. */

package/skills/wix-headless-templates/restaurants/project/src/components/restaurants/OrderCartDrawer.tsx

@@ -1,13 +1,51 @@
-// REFERENCE slide-over order cart with quantity stepper, remove, live subtotal, and the
-// Wix-hosted checkout. Mount ONCE per page; opens via useOrderCart().openCart(). Correct and
-// complete; per the skill's model you design your own chrome on useOrderCart.
+// REFERENCE slide-over order cart with quantity stepper, remove, live subtotal, pickup/delivery
+// with a time (and the address for delivery), and the Wix-hosted checkout. Mount ONCE per page;
+// opens via useOrderCart().openCart(). Correct and complete; per the skill's model you design your
+// own chrome on useOrderCart.
+import { useState } from "react";
 import { useOrderCart } from "../../hooks/restaurants/useOrderCart";
 import { imgAttrs } from "../../wix/media";
+import { zonedDateTimeLabel, zonedDayKey, zonedTimeLabel } from "../../wix/restaurants/time-core";
+import type { FulfillmentChoice } from "../../wix/restaurants/types";
 
 export default function OrderCartDrawer() {
-  const { cart, open, closeCart, busy, error, updateQuantity, removeLine, checkout } = useOrderCart();
+  const { cart, open, closeCart, busy, error, updateQuantity, removeLine, checkout, fulfillment, fulfillmentTimes, orderingStatus, chooseFulfillment, loadFulfillmentTimes } = useOrderCart();
+  const types = [...new Set((fulfillment ?? []).map((m) => m.type))];
+  const [type, setType] = useState<"PICKUP" | "DELIVERY" | null>(null);
+  const [timeCode, setTimeCode] = useState("");
+  const [street, setStreet] = useState("");
+  const [city, setCity] = useState("");
+  const [postalCode, setPostalCode] = useState("");
   if (!open) return null;
   const lines = cart?.lines ?? [];
+  const chosenType = type ?? (types.includes("PICKUP") || !types.length ? "PICKUP" : "DELIVERY");
+  const times = (fulfillmentTimes ?? []).filter((t) => t.type === chosenType);
+  const tz = orderingStatus?.timeZone ?? "";
+  const today = zonedDayKey(new Date(), tz);
+  // A slot on a later day than today (at the restaurant) carries its date: "Fri, Oct 24, 9:00 AM".
+  const timeLabel = (iso: string, asap: boolean) => {
+    const d = new Date(iso);
+    if (asap) return `As soon as possible (about ${zonedTimeLabel(d, tz)})`;
+    return zonedDayKey(d, tz) === today ? zonedTimeLabel(d, tz) : zonedDateTimeLabel(d, tz);
+  };
+  const deliveryMethod = (fulfillment ?? []).find((m) => m.type === "DELIVERY");
+
+  // Once street and city are in, delivery times come only from the methods that deliver there.
+  function refreshDeliveryTimes() {
+    if (street.trim() && city.trim()) void loadFulfillmentTimes(undefined, { addressLine: street, city, postalCode });
+  }
+
+  async function placeOrder() {
+    const choice: FulfillmentChoice = {
+      type: chosenType,
+      time: times.find((t) => t.code === timeCode),
+      ...(chosenType === "DELIVERY"
+        ? { address: { addressLine: street, city, postalCode } } // country and subdivision: the restaurant's
+        : {}),
+    };
+    await chooseFulfillment(choice); // the hosted checkout refuses an order with no fulfillment
+    await checkout();
+  }
 
   return (
     <div
@@ -104,11 +142,55 @@ export default function OrderCartDrawer() {
                 <strong className="font-semibold">{cart.subtotal}</strong>
               </div>
             )}
+            {types.length > 1 && (
+              <div role="radiogroup" aria-label="Pickup or delivery" className="mb-3 grid grid-cols-2 gap-2">
+                {(["PICKUP", "DELIVERY"] as const).map((t) => (
+                  <button
+                    key={t}
+                    type="button"
+                    role="radio"
+                    aria-checked={chosenType === t}
+                    onClick={() => { setType(t); setTimeCode(""); }}
+                    className={`rounded-control border py-2 text-sm ${chosenType === t ? "border-primary font-semibold" : "border-border text-muted-foreground"}`}
+                  >
+                    {t === "PICKUP" ? "Pickup" : "Delivery"}
+                  </button>
+                ))}
+              </div>
+            )}
+            {chosenType === "DELIVERY" && (
+              <div className="mb-3 grid gap-2">
+                <input aria-label="Street address" placeholder="Street address" value={street} onChange={(e) => setStreet(e.target.value)} onBlur={refreshDeliveryTimes} className="rounded-control border border-border bg-background px-3 py-2 text-sm" />
+                <div className="grid grid-cols-2 gap-2">
+                  <input aria-label="City" placeholder="City" value={city} onChange={(e) => setCity(e.target.value)} onBlur={refreshDeliveryTimes} className="rounded-control border border-border bg-background px-3 py-2 text-sm" />
+                  <input aria-label="Postal code" placeholder="Postal code" value={postalCode} onChange={(e) => setPostalCode(e.target.value)} className="rounded-control border border-border bg-background px-3 py-2 text-sm" />
+                </div>
+                {deliveryMethod && (deliveryMethod.fee || deliveryMethod.minOrderPrice) && (
+                  <p className="text-xs text-muted-foreground">
+                    {[deliveryMethod.fee && `Delivery ${deliveryMethod.fee}`, deliveryMethod.minOrderPrice && `minimum order ${deliveryMethod.minOrderPrice}`].filter(Boolean).join(" · ")}
+                  </p>
+                )}
+              </div>
+            )}
+            {times.length > 0 && (
+              <select
+                aria-label={chosenType === "PICKUP" ? "Pickup time" : "Delivery time"}
+                value={timeCode}
+                onChange={(e) => setTimeCode(e.target.value)}
+                className="mb-4 w-full rounded-control border border-border bg-background px-3 py-2 text-sm"
+              >
+                {times.map((t) => (
+                  <option key={t.code} value={t.asap ? "" : t.code}>
+                    {timeLabel(t.startIso, t.asap)}
+                  </option>
+                ))}
+              </select>
+            )}
             {error && <p className="mb-3 text-xs text-destructive">{error}</p>}
             <button
               type="button"
               disabled={busy}
-              onClick={() => checkout().catch(() => {})}
+              onClick={() => placeOrder().catch(() => {})}
               className="w-full rounded-control bg-primary py-3.5 text-sm font-semibold text-primary-foreground transition-opacity hover:opacity-90 disabled:opacity-50"
             >
               {busy ? "One moment…" : "Checkout"}

package/skills/wix-headless-templates/restaurants/project/src/hooks/restaurants/useOrderCart.ts

@@ -3,9 +3,11 @@
 import { useSyncExternalStore } from "react";
 import {
   addOrderLine,
+  chooseFulfillment,
   getOrderCartState,
   goToOrderCheckout,
   isMenuOrderable,
+  loadFulfillmentTimes,
   refreshOrderCart,
   removeLineFromOrder,
   setOrderCartOpen,
@@ -13,7 +15,7 @@ import {
   updateOrderLineQuantity,
   type OrderCartState,
 } from "../../wix/restaurants/order-store";
-import type { MenuItem, OrderSelection } from "../../wix/restaurants/types";
+import type { DeliveryAddress, FulfillmentChoice, MenuItem, OrderSelection } from "../../wix/restaurants/types";
 
 const SERVER_STATE = getOrderCartState();
 
@@ -29,6 +31,10 @@ export interface UseOrderCart extends OrderCartState {
   menuOrderable: (menuId: string) => boolean | null;
   updateQuantity: (lineItemId: string, quantity: number) => Promise<void>;
   removeLine: (lineItemId: string) => Promise<void>;
+  /** Set pickup or delivery, the time (a fulfillmentTimes entry; omitted → ASAP), and the delivery address. */
+  chooseFulfillment: (choice: FulfillmentChoice) => Promise<void>;
+  /** Reload fulfillmentTimes for another day ("YYYY-MM-DD" at the restaurant) and/or a delivery address. */
+  loadFulfillmentTimes: (dayKey?: string, address?: DeliveryAddress) => Promise<void>;
   checkout: () => Promise<void>;
   openCart: () => void;
   closeCart: () => void;
@@ -44,6 +50,8 @@ export function useOrderCart(): UseOrderCart {
     menuOrderable: isMenuOrderable,
     updateQuantity: updateOrderLineQuantity,
     removeLine: removeLineFromOrder,
+    chooseFulfillment,
+    loadFulfillmentTimes,
     checkout: goToOrderCheckout,
     openCart: () => setOrderCartOpen(true),
     closeCart: () => setOrderCartOpen(false),

package/skills/wix-headless-templates/restaurants/project/src/wix/restaurants/order-store.ts

@@ -4,16 +4,18 @@
 // Consume it through useOrderCart() (hooks/), or subscribe directly. Besides the cart it holds
 // the site's ordering gates: the operation's state and each menu's ordering settings, so an add
 // control can read "accepting orders?" and "is THIS menu orderable now?" without a fetch of its own.
-import type { FulfillmentMethodInfo, MenuItem, MenuOrderingInfo, OrderCart, OrderSelection, OrderingStatus } from "./types";
+import type { DeliveryAddress, FulfillmentChoice, FulfillmentMethodInfo, FulfillmentTime, MenuItem, MenuOrderingInfo, OrderCart, OrderSelection, OrderingStatus } from "./types";
 import { menuOrderable } from "./ordering-core";
 import {
   addToOrder as apiAdd,
   fetchFulfillmentMethods,
+  fetchFulfillmentTimes,
   fetchMenuOrdering,
   fetchOrderCart,
   orderCheckoutUrl,
   removeOrderLine as apiRemove,
   resolveOrdering,
+  setOrderFulfillment,
   updateOrderQuantity as apiUpdate,
 } from "./ordering";
 
@@ -25,8 +27,12 @@ export interface OrderCartState {
   orderingStatus: OrderingStatus | null;
   /** Per-menu ordering settings under the operation, keyed by menuId; null while loading or when unreadable. */
   menuOrdering: Record<string, MenuOrderingInfo> | null;
-  /** The operation's enabled pickup/delivery methods, for display; null while loading. */
+  /** The operation's enabled pickup/delivery methods (names, fees, minimums); null while loading. */
   fulfillment: FulfillmentMethodInfo[] | null;
+  /** When the order can be fulfilled (ASAP first, then today's slots); null while loading or unreadable. */
+  fulfillmentTimes: FulfillmentTime[] | null;
+  /** The fulfillment last set on the cart through chooseFulfillment; null → none chosen (checkout uses pickup ASAP). */
+  fulfillmentChoice: FulfillmentChoice | null;
   /**
    * True while any cart operation is in flight — the DRAWER's flag (its steppers, remove and
    * checkout controls), not a dish card's: a card disables its own add control on `pendingItemId`,
@@ -41,7 +47,7 @@ export interface OrderCartState {
   open: boolean;
 }
 
-const EMPTY: OrderCartState = { cart: null, ordering: null, orderingStatus: null, menuOrdering: null, fulfillment: null, busy: false, pendingItemId: null, error: null, open: false };
+const EMPTY: OrderCartState = { cart: null, ordering: null, orderingStatus: null, menuOrdering: null, fulfillment: null, fulfillmentTimes: null, fulfillmentChoice: null, busy: false, pendingItemId: null, error: null, open: false };
 
 let state: OrderCartState = EMPTY;
 const listeners = new Set<() => void>();
@@ -65,6 +71,7 @@ export function subscribeOrderCart(listener: () => void): () => void {
     void resolveOrdering().then((s) => setState({ ordering: s.status === "ENABLED", orderingStatus: s }));
     void fetchMenuOrdering().then((m) => setState({ menuOrdering: m })).catch(() => setState({ menuOrdering: null }));
     void fetchFulfillmentMethods().then((f) => setState({ fulfillment: f }));
+    void loadFulfillmentTimes();
   }
   return () => listeners.delete(listener);
 }
@@ -124,7 +131,29 @@ export async function removeLineFromOrder(lineItemId: string): Promise<void> {
   await run(() => apiRemove(lineItemId));
 }
 
-/** Navigate to the Wix-hosted checkout. Never hand-build a checkout URL. */
+/**
+ * Load the fulfillment times for `dayKey` ("YYYY-MM-DD" at the restaurant; default today). Pass the
+ * delivery address once entered: delivery times then come only from methods that deliver there.
+ */
+export async function loadFulfillmentTimes(dayKey?: string, address?: DeliveryAddress): Promise<void> {
+  try {
+    setState({ fulfillmentTimes: await fetchFulfillmentTimes(dayKey, address) });
+  } catch {
+    setState({ fulfillmentTimes: null }); // unreadable — checkout still works on ASAP
+  }
+}
+
+/**
+ * Set pickup or delivery, the time (a fulfillmentTimes entry; omitted → ASAP) and, for delivery,
+ * the address on the order. Throws (and sets .error) when the address isn't delivered to or the
+ * time is gone.
+ */
+export async function chooseFulfillment(choice: FulfillmentChoice): Promise<void> {
+  await run(() => setOrderFulfillment(choice));
+  setState({ fulfillmentChoice: choice });
+}
+
+/** Navigate to the Wix-hosted checkout (pickup ASAP when no fulfillment was chosen). Never hand-build a checkout URL. */
 export async function goToOrderCheckout(): Promise<void> {
   setState({ busy: true, error: null });
   try {