@wix/agent-skills 1.33.1 → 1.35.0

package/skills/wix-headless-templates/donations/tests/donation-contract.test.mjs

@@ -0,0 +1,71 @@
+// Local contracts only; no Wix requests or financial transactions. Node >=22.12:
+// node --experimental-strip-types --test skills/wix-headless-templates/donations/tests/*.test.mjs
+import test from 'node:test';
+import assert from 'node:assert/strict';
+import * as source from '../app/wix/donations/donations-core.ts';
+import * as project from '../project/src/wix/donations/donations-core.ts';
+
+for (const [name, api] of Object.entries({ source, project })) {
+  test(`${name}: campaign decimal strings become numeric one-time cart options`, () => {
+    const body = api.cartBody('campaign-id', { amount: '25.00', frequency: 'ONE_TIME', coverFee: false, note: '' });
+    assert.deepEqual(body, {
+      cart: { source: { channelType: 'WEB' } },
+      catalogItems: [{ quantity: 1, catalogReference: {
+        appId: '333b456e-dd48-4d6b-b32b-9fd48d74e163',
+        catalogItemId: 'campaign-id', options: { amount: 25 },
+      } }],
+    });
+    assert.equal(typeof JSON.parse(JSON.stringify(body)).catalogItems[0].catalogReference.options.amount, 'number');
+  });
+
+  for (const frequency of ['WEEK', 'MONTH', 'YEAR']) {
+    test(`${name}: ${frequency} and optional fee flag survive without inflating base amount`, () => {
+      const body = api.cartBody('campaign-id', { amount: 50, frequency, coverFee: true, note: 'In memory' });
+      assert.deepEqual(body.catalogItems[0].catalogReference.options, { amount: 50, frequency, donorCoveringFees: true });
+      assert.equal(body.cart.note, 'In memory');
+    });
+  }
+
+  test(`${name}: invalid inputs cannot reach cart creation`, () => {
+    for (const amount of ['', ' ', 'not-money', 0, -1, NaN, Infinity, null, true, {}]) {
+      assert.throws(() => api.donationLineItem('campaign-id', { amount, frequency: 'ONE_TIME' }), /positive donation amount/);
+    }
+    assert.throws(() => api.donationLineItem('campaign-id', { amount: 25, frequency: 'QUARTER' }), /supported donation frequency/);
+    assert.throws(() => api.donationLineItem('', { amount: 25, frequency: 'ONE_TIME' }), /campaign id/);
+  });
+
+  test(`${name}: Cart V2 id is passed directly to hosted checkout, with separate callbacks`, () => {
+    const id = api.cartIdOf({ cart: { id: 'cart-id' } });
+    assert.equal(api.cartIdOf({ _id: 'cart-id' }), id);
+    assert.deepEqual(api.redirectBody(id, 'campaign-id', 'https://donor.example.test'), {
+      ecomCheckout: { checkoutId: 'cart-id' },
+      callbacks: { postFlowUrl: 'https://donor.example.test/donate/campaign-id', thankYouPageUrl: 'https://donor.example.test/donate/thank-you' },
+    });
+    assert.throws(() => api.cartIdOf({}), /no cart id/);
+  });
+
+  test(`${name}: payment-related API errors keep their actual cause, status and body`, () => {
+    const error = Object.assign(new Error('Unsupported PAYMENT_METHOD'), { status: 400, body: { code: 'PAYMENT_METHOD_UNSUPPORTED' } });
+    assert.equal(api.checkoutError(error), error);
+    assert.equal(api.checkoutError(error, 'redirect', 'cart-id'), error);
+    assert.equal(error.stage, 'redirect');
+    assert.equal(error.cartId, 'cart-id');
+    assert.deepEqual(error.body, { code: 'PAYMENT_METHOD_UNSUPPORTED' });
+    assert.equal(api.checkoutError('network failure').cause, 'network failure');
+  });
+
+  test(`${name}: unavailable goal metrics differ from a verified zero and from an exceeded goal`, () => {
+    const goal = { targetAmount: { amount: '100' } };
+    assert.equal(api.toGoal(goal, null, 'USD').raised, '');
+    assert.notEqual(api.toGoal(goal, [], 'USD').raised, '');
+    const known = api.toGoal(goal, [{ currencyCode: 'USD', donationCount: 3, totalAmount: { amount: '125' } }], 'USD');
+    assert.equal(known.percent, 125);
+    assert.equal(known.donationCount, 3);
+    assert.equal(api.toGoal(null, [], 'USD'), null);
+  });
+}
+
+test('scaffold and deployable donation payloads remain identical', () => {
+  const input = { amount: 37.5, frequency: 'MONTH', coverFee: true, note: 'A message' };
+  assert.deepEqual(source.cartBody('campaign-id', input), project.cartBody('campaign-id', input));
+});

package/skills/wix-headless-templates/donations/tests/donation-form.test.cjs

@@ -0,0 +1,137 @@
+// Component contracts only; hooks and checkout are stubbed, never Wix requests.
+// Run with a project that already has typescript, react, react-dom and jsdom installed:
+// DONATIONS_TEST_PROJECT=/path/to/project node --test <this-file>
+const test = require('node:test');
+const assert = require('node:assert/strict');
+const { readFileSync } = require('node:fs');
+const { resolve, join } = require('node:path');
+const { createRequire } = require('node:module');
+const dependencies = createRequire(join(resolve(process.env.DONATIONS_TEST_PROJECT || process.cwd()), 'package.json'));
+const ts = dependencies('typescript');
+const React = dependencies('react');
+const { renderToStaticMarkup } = dependencies('react-dom/server');
+const { JSDOM } = dependencies('jsdom');
+
+const campaign = { id: 'campaign-id', options: {
+  currency: 'USD', frequencies: [{ value: 'ONE_TIME', label: 'One-time' }, { value: 'MONTH', label: 'Monthly' }],
+  presets: [{ amount: 25, label: '$25', impact: 'Care' }, { amount: 50, label: '$50', impact: 'Supplies' }],
+  customAmount: { enabled: true, minLabel: '$5', maxLabel: '$1,000' },
+  askCoverFee: true, commentsEnabled: true, commentMaxLength: 100,
+} };
+const state = overrides => ({
+  available: true, frequency: 'ONE_TIME', presetAmount: 25, customMode: false, customAmount: '',
+  coverFee: false, note: '', messages: {}, showErrors: false, valid: true, submitting: false,
+  buttonLabel: 'Donate $25', selectPreset() {}, selectCustom() {}, setCustomAmount() {},
+  setFrequency() {}, setCoverFee() {}, setNote() {}, donate: async () => {}, ...overrides,
+});
+
+function loadComponent(file, hook, value) {
+  const compiled = ts.transpileModule(readFileSync(file, 'utf8'), { compilerOptions: {
+    target: ts.ScriptTarget.ES2022, module: ts.ModuleKind.CommonJS, jsx: ts.JsxEmit.ReactJSX,
+  } }).outputText;
+  const result = { exports: {} };
+  const requireStub = name => name.includes('/hooks/donations/') ? { [hook]: () => typeof value === 'function' ? value() : value } : dependencies(name);
+  new Function('require', 'module', 'exports', compiled)(requireStub, result, result.exports);
+  return result.exports.default;
+}
+function render(file, value, copies = 1) {
+  const Form = loadComponent(file, 'useDonation', value);
+  const html = renderToStaticMarkup(React.createElement('div', null,
+    ...Array.from({ length: copies }, (_, key) => React.createElement(Form, { campaign, key }, 'Campaign closed'))));
+  return new JSDOM(html).window.document;
+}
+
+for (const [name, path] of [['source', '../app/components/donations/'], ['project', '../project/src/components/donations/']]) {
+  const file = resolve(__dirname, path, 'DonateForm.tsx');
+
+  test(`${name}: choices are labelled native radio groups with separate frequency and amount names`, () => {
+    const document = render(file, state());
+    const groups = [...document.querySelectorAll('fieldset')];
+    assert.deepEqual(groups.map(group => group.querySelector('legend').textContent), ['How often', 'Amount']);
+    const frequency = [...groups[0].querySelectorAll('input[type=radio]')];
+    const amounts = [...groups[1].querySelectorAll('input[type=radio]')];
+    assert.equal(frequency.length, 2); assert.equal(amounts.length, 3);
+    assert.ok([...frequency, ...amounts].every(input => input.labels.length === 1));
+    assert.equal(new Set(frequency.map(input => input.name)).size, 1);
+    assert.equal(new Set(amounts.map(input => input.name)).size, 1);
+    assert.notEqual(frequency[0].name, amounts[0].name);
+    frequency[1].click();
+    assert.equal(frequency[1].checked, true); assert.equal(frequency[0].checked, false);
+    assert.equal(amounts[0].checked, true);
+  });
+
+  test(`${name}: two forms for the same campaign do not share ids or radio-group names`, () => {
+    const document = render(file, state({ customMode: true }), 2);
+    const ids = [...document.querySelectorAll('[id]')].map(el => el.id);
+    assert.equal(new Set(ids).size, ids.length);
+    const forms = document.querySelectorAll('form');
+    assert.notEqual(forms[0].querySelector('input[type=radio]').name, forms[1].querySelector('input[type=radio]').name);
+  });
+
+  test(`${name}: invalid custom amount and note reference their actual error text`, () => {
+    const document = render(file, state({ customMode: true, showErrors: true, valid: false,
+      messages: { customAmount: 'Enter an amount.', note: 'Keep the note short.' } }));
+    const amount = document.querySelector('input[inputmode=decimal]');
+    assert.equal(amount.getAttribute('aria-invalid'), 'true');
+    assert.equal(document.getElementById(amount.getAttribute('aria-describedby')).textContent, 'Enter an amount.');
+    const note = document.querySelector('textarea');
+    assert.equal(note.getAttribute('aria-invalid'), 'true');
+    assert.ok(note.getAttribute('aria-describedby').split(' ').every(id => document.getElementById(id)));
+  });
+
+  test(`${name}: pending submission disables choices, fields and repeated submits`, () => {
+    const document = render(file, state({ customMode: true, submitting: true }));
+    assert.ok([...document.querySelectorAll('input,textarea,button')].every(el => el.matches(':disabled')));
+    assert.equal(document.querySelector('button[type=submit]').getAttribute('aria-busy'), 'true');
+  });
+
+  test(`${name}: invalid submit focuses the field after rendering, including a repeated attempt`, async () => {
+    const dom = new JSDOM('<div id="root"></div>', { pretendToBeVisual: true });
+    const globals = { window: dom.window, document: dom.window.document, navigator: dom.window.navigator,
+      requestAnimationFrame: dom.window.requestAnimationFrame.bind(dom.window), IS_REACT_ACT_ENVIRONMENT: true };
+    const previous = new Map(Object.keys(globals).map(key => [key, Object.getOwnPropertyDescriptor(globalThis, key)]));
+    for (const [key, value] of Object.entries(globals)) Object.defineProperty(globalThis, key, { configurable: true, writable: true, value });
+    const { createRoot } = dependencies('react-dom/client');
+    const act = React.act || dependencies('react-dom/test-utils').act;
+    const root = createRoot(dom.window.document.getElementById('root'));
+    const Form = loadComponent(file, 'useDonation', () => {
+      const [showErrors, setShowErrors] = React.useState(false);
+      return state({ customMode: true, valid: false, showErrors, messages: { customAmount: 'Enter an amount.' },
+        donate: async () => setShowErrors(true) });
+    });
+    try {
+      await act(async () => root.render(React.createElement(Form, { campaign })));
+      for (let attempt = 0; attempt < 2; attempt++) {
+        dom.window.document.querySelector('button[type=submit]').focus();
+        await act(async () => dom.window.document.querySelector('form').dispatchEvent(new dom.window.Event('submit', { bubbles: true, cancelable: true })));
+        await new Promise(resolve => dom.window.requestAnimationFrame(resolve));
+        assert.equal(dom.window.document.activeElement, dom.window.document.querySelector('input[inputmode=decimal]'));
+      }
+    } finally {
+      await act(async () => root.unmount());
+      dom.window.close();
+      for (const [key, descriptor] of previous) {
+        if (descriptor) Object.defineProperty(globalThis, key, descriptor);
+        else delete globalThis[key];
+      }
+    }
+  });
+
+  test(`${name}: a closed campaign has no donation controls`, () => {
+    const document = render(file, state({ available: false }));
+    assert.equal(document.querySelector('form'), null);
+    assert.match(document.body.textContent, /Campaign closed/);
+  });
+
+  test(`${name}: direct or unreadable returns have a heading and next step without submission claims`, () => {
+    const receiptFile = resolve(__dirname, path, 'DonationReceipt.tsx');
+    for (const orderId of ['', 'unverified-order']) {
+      const Receipt = loadComponent(receiptFile, 'useDonationReceipt', { orderId, loading: false, receipt: null });
+      const document = new JSDOM(renderToStaticMarkup(React.createElement(Receipt))).window.document;
+      assert.ok(document.querySelector('h1'));
+      assert.ok(document.querySelector('a[href="/donate"]'));
+      assert.doesNotMatch(document.body.textContent, /has been received|has been submitted|Thank you for your donation/);
+      assert.match(document.body.textContent, /not a payment confirmation|could not be verified/);
+    }
+  });
+}

package/skills/wix-headless-templates/restaurants/INSTRUCTIONS.md

@@ -28,7 +28,7 @@ components, plus your home page.
 | `wix/media.ts` · `wix/money.ts` | `imgAttrs(url, sizes)` — every `<img>` attribute for a DTO image (`src`, `srcSet`, `sizes`, lazy): `<img {...imgAttrs(item.imageUrl, "6rem")} alt={item.name} />`; `imgSrc()` / `imgSrcSet()` / `formatMoney()` underneath, already used by everything shipped |
 | `wix/restaurants/types.ts` | the DTOs (`MenuData`, `MenuSection`, `MenuItem`, `OrderSelection`, `OrderCart`, `OrderingStatus`, `ReservationLocationInfo`, `ReservationSlot`, …) — contracts below |
 | `wix/restaurants/menu.ts` | `fetchMenus` — the whole display-ordered menu tree, every price formatted with the site's currency + locale (read once from the eCommerce settings, `fetchSiteMoney`); the transport only — the id-array stitching, the item mapping, the money formatting, and the **modifier rule engine** (`initialSelection`, `toggleModifier`, `validateSelection`, `itemPrice`, `needsSelection`, `ruleLabel`) are in `menu-core.ts` beside it (shared with the REST layer) |
-| `wix/restaurants/ordering.ts` · `order-store.ts` | the operation's state (`resolveOrdering`), each menu's ordering settings under it (`fetchMenuOrdering`), the operation's fulfillment methods, dish add-to-cart (Orders-app `catalogReference` with the selection) + eCom Cart V2 + the hosted checkout, and the shared cart state (module store — spans Astro islands); the request shapes, the availability-window check, and the refusal checks are in `ordering-core.ts` |
+| `wix/restaurants/ordering.ts` · `order-store.ts` | the operation's state (`resolveOrdering`), each menu's ordering settings under it (`fetchMenuOrdering`), the operation's fulfillment methods and times, dish add-to-cart (Orders-app `catalogReference` with the selection) + eCom Cart V2, the order's pickup/delivery + time (the cart's delivery method) + the hosted checkout, and the shared cart state (module store — spans Astro islands); the request shapes, the availability-window check, and the refusal checks are in `ordering-core.ts` |
 | `wix/restaurants/reservations.ts` | locations (enabled for online reservations, with name/address/timezone/approval/form config), AVAILABLE slots in the location's timezone, `holdReservation` → `completeReservation` (automatic approval), `requestReservation` (manual approval, no hold); the mappers, the form validation, and the reservee body are in `reservations-core.ts` |
 | `wix/restaurants/time-core.ts` | wall-clock arithmetic in an IANA zone with `Intl` only (`zonedIso`, `zonedDayKey`, `zonedTimeLabel`, `zonedDateTimeLabel`) — what the two cores and the stores use for the restaurant's timezone |
 | `wix/restaurants/menu-store.ts` · `reservation-store.ts` | the menu-browsing and reservation state machines, framework-free (`createMenuStore()`, `createReservationStore()` — `getState`/`subscribe` + actions, one instance per surface); the hooks below bind them to React, every other stack uses them directly |
@@ -100,8 +100,12 @@ else. Look at the seeded menu before designing (how many menus, sections, photos
   modifiers disabled.
 - **Cart:** lines with quantity stepper and remove, `descriptionLines` under the name, `subtotal`
   as given, checkout as a button in the drawer; the order survives a reload (same visitor token) —
-  nothing to wire. Fulfillment (pickup/delivery, time) is collected on the hosted checkout;
-  `fulfillment` (the operation's methods, fees formatted) is for a line of copy in the drawer, not a picker.
+  nothing to wire. Pickup/delivery and the time are chosen in the drawer, before checkout: a
+  Pickup/Delivery switch when `fulfillment` has both types, a time select from `fulfillmentTimes`
+  of that type (ASAP first, labelled in `orderingStatus.timeZone`), and for delivery street, city
+  and postal code (country and subdivision default to the restaurant's; on blur the drawer reloads the
+  times with that address, so delivery times are only those of methods that deliver there) with the
+  delivery fee and minimum; the CTA calls `chooseFulfillment(choice)` then `checkout()`.
 - **Reservations:** only AVAILABLE times offered, labelled in the restaurant's timezone; the query
   date defaults to today at the restaurant; `approval === "AUTOMATIC"` → hold → details form with
   the `holdSecondsLeft` countdown → confirm; `approval === "MANUAL"` (or `slot.manualApproval`) →
@@ -151,12 +155,19 @@ else. Look at the seeded menu before designing (how many menus, sections, photos
 //   orderingStatus: { operationId, status: "ENABLED"|"DISABLED"|"PAUSED_UNTIL"|"NONE",
 //                     pausedUntilIso, timeZone, fulfillmentIds, defaultFulfillmentType }|null,
 //   menuOrderable(menuId): boolean|null,    // false → this menu takes no online orders now (no add control); null = unknown, let the add try
-//   fulfillment: [{ id, type: "PICKUP"|"DELIVERY", name, fee, minOrderPrice }]|null,  // formatted; display only
+//   fulfillment: [{ id, type: "PICKUP"|"DELIVERY", name, fee, minOrderPrice }]|null,  // formatted; which types the picker offers
+//   fulfillmentTimes: [{ type, code, asap, startIso, endIso }]|null,   // ASAP first, then today's slots (orderable only)
+//   fulfillmentChoice: { type, time?, address? }|null,                  // what chooseFulfillment last set
+//   chooseFulfillment({ type: "PICKUP"|"DELIVERY", time?: FulfillmentTime /* omitted → ASAP */,
+//                       address?: { addressLine, city, postalCode?, country?, subdivision? } /* delivery; country defaults to the restaurant's */ }),
+//                                           // rejects (and sets .error) on an address outside every delivery area
+//   loadFulfillmentTimes(dayKey?, address?), // another day's slots ("YYYY-MM-DD" at the restaurant); with the delivery
+//                                           // address, delivery times are only those of methods that deliver there
 //   busy /* the DRAWER's flag: any cart operation in flight */, pendingItemId /* the item whose add is in
 //   flight, else null — a dish card's add control disables on THIS, never on busy */, error, open,
 //   addToOrder(item, { menuId, sectionId }, quantity?, selection?),  // the DTO + ids from the render context — see hard rules
 //   updateQuantity(lineItemId, qty), removeLine(lineItemId),
-//   checkout(),                             // browser redirects to the Wix-hosted checkout
+//   checkout(),                             // browser redirects to the Wix-hosted checkout (pickup ASAP if nothing was chosen)
 //   openCart(), closeCart(), refresh() }
 // OrderLine = { lineItemId, itemName, quantity, unitPrice, linePrice, imageUrl,
 //               descriptionLines /* variant, modifiers, note — as the platform labels them */,
@@ -301,7 +312,8 @@ the stores replace the hooks, and you write the components in your framework to
   (`start()` when mounted, `stop()` when unmounted), `createReservationStore()` per reservation
   surface, the order store as-is (module-level: `subscribeOrderCart`/`getOrderCartState`,
   `isMenuOrderable`, `addOrderLine(item, { menuId, sectionId }, quantity?, selection?)`,
-  `updateOrderLineQuantity`, `removeLineFromOrder`, `goToOrderCheckout`, `setOrderCartOpen`).
+  `updateOrderLineQuantity`, `removeLineFromOrder`, `chooseFulfillment`, `loadFulfillmentTimes`,
+  `goToOrderCheckout`, `setOrderCartOpen`).
   State in, actions out — exactly the hooks' contracts above; the dish sheet's local state is an
   `OrderSelection` driven by the `menu-core` helpers;
 - your dish card, sheet, cart drawer, and reservation form to the recommended defaults above — the
@@ -323,14 +335,14 @@ root (config, plan, seed output) is never the upload. Same function names and DT
 above, so the contracts on this page hold unchanged: `fetchMenus`, `fetchSiteMoney` from
 `./js/wix/menu.js`; `resolveOrdering`, `resolveOperationId`, `fetchMenuOrdering`,
 `fetchFulfillmentMethods`, `fetchOrderCart`, `addToOrder(item, { menuId, sectionId }, quantity?,
-selection?)`, `updateOrderQuantity`, `removeOrderLine`, `orderCheckoutUrl` from
+selection?)`, `updateOrderQuantity`, `removeOrderLine`, `fetchFulfillmentTimes`, `setOrderFulfillment`, `orderCheckoutUrl` from
 `./js/wix/ordering.js`; `fetchReservationLocations`, `fetchReservationSlots`, `holdReservation`,
 `completeReservation`, `requestReservation` from `./js/wix/reservations.js`; the selection helpers
 from `./js/wix/menu-core.js`. The state machines ship too: `createMenuStore` from
 `./js/wix/menu-store.js` (`start()` once the page is up; `initialMenus` when you already have
 them), `./js/wix/order-store.js` (the cart — `subscribeOrderCart`/`getOrderCartState`,
 `isMenuOrderable`, `addOrderLine`, `updateOrderLineQuantity`, `removeLineFromOrder`,
-`goToOrderCheckout`, `setOrderCartOpen`), and `createReservationStore` from
+`chooseFulfillment`, `loadFulfillmentTimes`, `goToOrderCheckout`, `setOrderCartOpen`), and `createReservationStore` from
 `./js/wix/reservation-store.js` (the whole reservation flow). No components ship — you write the
 rendering in plain JS: one render function per surface that reads `getState()`, called from
 `subscribe`, with the surface's controls calling the store's actions. The drawer opens after every
@@ -387,7 +399,7 @@ Routes on Wix hosting: the host serves files only, so a clean route answers 404
 ## Hard rules
 
 - **Data and ordering logic only through the shipped exports** — `useOrderCart`/`addToOrder`
-  own the restaurant `catalogReference` (the Orders app id + `operationId`/`menuId`/`sectionId`
+  own the restaurant `catalogReference` (the Orders app id + `operationId`/`menuId`/`menuSectionId`
   — all three — plus the visitor's choices as `options.priceVariant`, `options.modifierGroups`,
   `options.specialRequests`), the line-refusal checks, and the checkout redirect. Never
   re-derive any of it, never hand-build a checkout URL; extend by adding a function in
@@ -418,13 +430,15 @@ Routes on Wix hosting: the host serves files only, so a clean route answers 404
   (`orderingStatus.status`, `pausedUntilIso`); `menuOrderable(id) === false` → no add controls and
   one notice for that menu; `onlineReservationsEnabled === false` → a "call us to book" notice (the
   toggle is premium-gated). Never mock menus, dishes, prices, slots, or availability.
-- **Fulfillment is collected on the hosted checkout** — pickup vs delivery, the time, the address.
-  The shipped layer does not pre-qualify it (no ASAP/scheduled slot picker, no delivery-address
-  check before checkout): that is a documented gap, not something to build ad hoc from the
-  operation's scheduling fields. `fulfillment` is display copy ("Pickup and delivery", fees) only.
+- **Fulfillment is set on the cart before checkout** — the hosted checkout has no pickup/delivery
+  or time picker for restaurant orders and refuses one without them ("There was an issue updating
+  your fulfillment details…"). Set it with `chooseFulfillment` (times from `fulfillmentTimes`, the
+  address for delivery); `checkout()` falls back to pickup ASAP only when nothing was chosen, and
+  says "Choose pickup or delivery" when the restaurant has no pickup. Never build the delivery
+  method code yourself.
 - Don't wrap shipped calls in your own API routes — they run client-side by design.
 - **Cart totals come from `cart`** — never summed or hardcoded in the client; fees, tax, and
-  delivery resolve on the hosted checkout. The sheet's `itemPrice` is a preview of one line, not a total.
+  delivery are shown on the hosted checkout. The sheet's `itemPrice` is a preview of one line, not a total.
 - **Browsing, ordering and reserving need no login.** They run on the visitor session the
   shipped client already holds; don't add a members/auth flow unless the brief asks for accounts.
 - **Call every hook before any conditional return.** Hooks first, branches after.

package/skills/wix-headless-templates/restaurants/app/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/app/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/app/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 {