@wix/agent-skills 1.26.0 → 1.28.0

package/skills/wix-headless-templates/restaurants/app/components/restaurants/MenuView.tsx

@@ -0,0 +1,257 @@
+// REFERENCE menu surface: menu tabs (when >1), section nav, the dish card, and the dish sheet
+// (variants, modifier groups, quantity, special request) on the @theme tokens. Correct and
+// complete; per the skill's model you design and build your own on useMenus + useOrderCart.
+// Note the load-bearing wiring: each card threads its menuId + sectionId from the render context
+// into addToOrder — never re-derive them — and every choice goes through the core's selection
+// helpers (initialSelection → toggleModifier → validateSelection → addToOrder).
+import { useState } from "react";
+import { useMenus } from "../../hooks/restaurants/useMenus";
+import { useOrderCart } from "../../hooks/restaurants/useOrderCart";
+import { imgAttrs } from "../../wix/media";
+import { initialSelection, itemPrice, needsSelection, ruleLabel, toggleModifier, validateSelection } from "../../wix/restaurants/menu-core";
+import { orderingUnavailableReason } from "../../wix/restaurants/ordering-core";
+import { zonedDateTimeLabel } from "../../wix/restaurants/time-core";
+import type { MenuData, MenuItem, OrderSelection, SiteMoney } from "../../wix/restaurants/types";
+
+const cta = "rounded-control bg-primary px-4 py-1.5 text-xs font-semibold text-primary-foreground transition-opacity hover:opacity-90 disabled:opacity-40";
+const field = "w-full rounded-md border border-border bg-background px-3 py-2 text-sm text-foreground outline-none focus:border-primary";
+
+export interface MenuItemSheetProps {
+  item: MenuItem;
+  money: SiteMoney;
+  busy: boolean;
+  onAdd: (quantity: number, selection: OrderSelection) => Promise<void>;
+  onClose: () => void;
+}
+
+/** The choices on a dish: variant radios, one fieldset per modifier group, quantity, note, live price. */
+export function MenuItemSheet({ item, money, busy, onAdd, onClose }: MenuItemSheetProps) {
+  const [selection, setSelection] = useState<OrderSelection>(() => initialSelection(item));
+  const [quantity, setQuantity] = useState(1);
+  const [errors, setErrors] = useState<Record<string, string>>({});
+  const [error, setError] = useState<string | null>(null);
+  const price = itemPrice(item, selection, quantity, money);
+
+  const submit = () => {
+    const check = validateSelection(item, selection);
+    setErrors(check.errors);
+    if (!check.ok) return;
+    setError(null);
+    onAdd(quantity, selection).then(onClose).catch((e: unknown) => setError(e instanceof Error ? e.message : String(e)));
+  };
+
+  return (
+    <div className="mt-3 rounded-lg border border-border bg-secondary/40 p-4">
+      {item.variants.length > 0 && (
+        <fieldset className="mb-3">
+          <legend className="text-xs font-semibold">Size</legend>
+          {item.variants.map((v) => (
+            <label key={v.variantId} className="mt-1 flex items-center justify-between gap-3 text-sm">
+              <span className="flex items-center gap-2">
+                <input type="radio" name={`${item.id}-variant`} checked={selection.variantId === v.variantId} onChange={() => setSelection({ ...selection, variantId: v.variantId })} />
+                {v.name}
+              </span>
+              <span className="text-muted-foreground">{v.price}</span>
+            </label>
+          ))}
+        </fieldset>
+      )}
+      {item.modifierGroups.map((g) => (
+        <fieldset key={g.id} className="mb-3">
+          <legend className="text-xs font-semibold">
+            {g.name} <span className="font-normal text-muted-foreground">· {ruleLabel(g)}</span>
+          </legend>
+          {g.modifiers.map((m) => {
+            const checked = (selection.modifiers[g.id] ?? []).includes(m.key);
+            return (
+              <label key={m.key} className={`mt-1 flex items-center justify-between gap-3 text-sm ${m.inStock ? "" : "opacity-50"}`}>
+                <span className="flex items-center gap-2">
+                  <input
+                    type={g.singleSelect ? "radio" : "checkbox"}
+                    name={`${item.id}-${g.id}`}
+                    disabled={!m.inStock}
+                    checked={checked}
+                    onChange={() => setSelection(toggleModifier(item, selection, g.id, m.key))}
+                  />
+                  {m.name}
+                  {!m.inStock && <span className="text-xs text-muted-foreground">(sold out)</span>}
+                </span>
+                {m.additionalCharge && <span className="text-muted-foreground">+{m.additionalCharge}</span>}
+              </label>
+            );
+          })}
+          {errors[g.id] && <p className="mt-1 text-xs text-destructive">{errors[g.id]}</p>}
+        </fieldset>
+      ))}
+      {item.acceptsSpecialRequests && (
+        <label className="mb-3 block text-sm">
+          <span className="text-xs font-semibold">Special request</span>
+          <textarea rows={2} value={selection.specialRequest} onChange={(e) => setSelection({ ...selection, specialRequest: e.target.value })} className={`mt-1 ${field}`} />
+        </label>
+      )}
+      <div className="flex flex-wrap items-center gap-3">
+        <div className="inline-flex items-center gap-3 rounded-control border border-border px-2 py-0.5">
+          <button type="button" aria-label="Decrease quantity" disabled={quantity <= 1} onClick={() => setQuantity(quantity - 1)} className="px-1 text-base disabled:opacity-40">−</button>
+          <span className="text-sm tabular-nums">{quantity}</span>
+          <button type="button" aria-label="Increase quantity" onClick={() => setQuantity(quantity + 1)} className="px-1 text-base">+</button>
+        </div>
+        <button type="button" disabled={busy} onClick={submit} className={cta}>
+          Add to order{price.formatted ? ` · ${price.formatted}` : ""}
+        </button>
+        <button type="button" onClick={onClose} className="text-xs text-muted-foreground underline">Cancel</button>
+      </div>
+      {error && <p className="mt-2 text-xs text-destructive">{error}</p>}
+    </div>
+  );
+}
+
+export interface MenuItemCardProps {
+  item: MenuItem;
+  menuId: string;
+  sectionId: string;
+  money: SiteMoney;
+}
+
+export function MenuItemCard({ item, menuId, sectionId, money }: MenuItemCardProps) {
+  const { addToOrder, ordering, orderingStatus, menuOrderable, busy } = useOrderCart();
+  const [open, setOpen] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const menuOk = menuOrderable(menuId);
+  // The add control's states, from the data: hidden for a market-priced dish or a menu that takes
+  // no online orders now; "Sold out" (the dish, or a required group with nothing in stock);
+  // the operation's reason (paused / unavailable); else "Add to order".
+  const showControl = !item.marketPrice && menuOk !== false && ordering !== null;
+  const unavailable = orderingUnavailableReason(orderingStatus);
+  const canAdd = ordering === true && item.orderable && !busy;
+  const label = item.soldOut ? "Sold out" : unavailable || "Add to order";
+  const pausedUntil =
+    orderingStatus?.status === "PAUSED_UNTIL" && orderingStatus.pausedUntilIso
+      ? zonedDateTimeLabel(new Date(orderingStatus.pausedUntilIso), orderingStatus.timeZone)
+      : "";
+
+  const add = (quantity: number, selection?: OrderSelection) =>
+    addToOrder(item, { menuId, sectionId }, quantity, selection).then(() => setError(null));
+
+  return (
+    <div id={`item-${item.id}`} className="flex scroll-mt-24 gap-4 rounded-lg border border-border p-4">
+      {item.imageUrl && (
+        <img
+          {...imgAttrs(item.imageUrl, "6rem")}
+          alt={item.name}
+          className="h-24 w-24 flex-shrink-0 rounded-md bg-secondary object-cover"
+        />
+      )}
+      <div className="min-w-0 flex-1">
+        <div className="flex items-baseline justify-between gap-3">
+          <p className="text-sm font-semibold">{item.name}</p>
+          <p className="whitespace-nowrap text-sm text-foreground">
+            {item.marketPrice ? "Market price" : (item.price ?? "")}
+          </p>
+        </div>
+        {item.labels.length > 0 && (
+          <p className="mt-0.5 text-xs text-muted-foreground">{item.labels.map((l) => l.name).join(" · ")}</p>
+        )}
+        {item.description && (
+          <p className="mt-1 text-xs leading-relaxed text-muted-foreground">{item.description}</p>
+        )}
+        {item.variants.length > 0 && (
+          <p className="mt-1 text-xs text-muted-foreground">
+            {item.variants.map((v) => `${v.name} ${v.price}`.trim()).join(" · ")}
+          </p>
+        )}
+        {item.modifierGroups.length > 0 && !open && (
+          <p className="mt-1 text-xs text-muted-foreground">Options: {item.modifierGroups.map((g) => g.name).join(", ")}</p>
+        )}
+        <div className="mt-2 flex flex-wrap items-center gap-3">
+          {showControl && (
+            <button
+              type="button"
+              disabled={!canAdd}
+              onClick={() => {
+                if (needsSelection(item)) setOpen((o) => !o);
+                else add(1).catch((e: unknown) => setError(e instanceof Error ? e.message : String(e)));
+              }}
+              className={cta}
+            >
+              {label}
+            </button>
+          )}
+          {pausedUntil && !item.soldOut && <p className="text-xs text-muted-foreground">Back at {pausedUntil}</p>}
+          {error && <p className="text-xs text-destructive">{error}</p>}
+        </div>
+        {open && canAdd && <MenuItemSheet item={item} money={money} busy={busy} onAdd={add} onClose={() => setOpen(false)} />}
+      </div>
+    </div>
+  );
+}
+
+export interface MenuViewProps {
+  initialMenus?: MenuData[];
+  emptyMessage?: string;
+}
+
+const tab = (active: boolean) =>
+  `rounded-control border px-4 py-1.5 text-sm font-medium transition-colors ${
+    active
+      ? "border-primary bg-primary text-primary-foreground"
+      : "border-border text-foreground hover:bg-secondary"
+  }`;
+
+export default function MenuView({
+  initialMenus,
+  emptyMessage = "The menu is being written — check back soon.",
+}: MenuViewProps) {
+  const { menus, activeMenuId, setActiveMenuId, activeMenu, error } = useMenus({ initialMenus });
+  const { menuOrderable } = useOrderCart();
+
+  if (menus === null) {
+    return (
+      <div aria-busy="true">
+        {Array.from({ length: 4 }, (_, i) => (
+          <div key={i} className="mb-4 h-24 animate-pulse rounded-lg bg-secondary" />
+        ))}
+      </div>
+    );
+  }
+  if (menus.length === 0) {
+    return <p className="py-16 text-center text-muted-foreground">{error ?? emptyMessage}</p>;
+  }
+
+  return (
+    <div>
+      {menus.length > 1 && (
+        <div className="mb-8 flex flex-wrap gap-2" role="group" aria-label="Menus">
+          {menus.map((m) => (
+            <button key={m.id} type="button" className={tab(m.id === activeMenuId)} onClick={() => setActiveMenuId(m.id)}>
+              {m.name}
+            </button>
+          ))}
+        </div>
+      )}
+      {activeMenu && menuOrderable(activeMenu.id) === false && (
+        <p className="mb-6 text-sm text-muted-foreground">This menu isn't available for online ordering right now.</p>
+      )}
+      {activeMenu && activeMenu.sections.length > 1 && (
+        <nav className="mb-8 flex flex-wrap gap-x-5 gap-y-1 text-sm" aria-label="Sections">
+          {activeMenu.sections.map((s) => (
+            <a key={s.id} href={`#section-${s.id}`} className="text-muted-foreground no-underline transition-colors hover:text-foreground">
+              {s.name}
+            </a>
+          ))}
+        </nav>
+      )}
+      {error && <p className="mb-4 text-sm text-destructive">{error}</p>}
+      {activeMenu?.sections.map((section) => (
+        <section key={section.id} id={`section-${section.id}`} className="mb-12">
+          <h2 className="text-lg font-semibold tracking-tight">{section.name}</h2>
+          {section.description && <p className="mt-1 text-sm text-muted-foreground">{section.description}</p>}
+          <div className="mt-4 grid grid-cols-1 gap-4 md:grid-cols-2">
+            {section.items.map((item) => (
+              <MenuItemCard key={item.id} item={item} menuId={activeMenu.id} sectionId={section.id} money={activeMenu.money} />
+            ))}
+          </div>
+        </section>
+      ))}
+    </div>
+  );
+}

package/skills/wix-headless-templates/restaurants/app/components/restaurants/OrderCartButton.tsx

@@ -0,0 +1,26 @@
+// REFERENCE header order button with a live count badge — opens the OrderCartDrawer.
+// Correct and complete; per the skill's model you design your own chrome on useOrderCart.
+import { useOrderCart } from "../../hooks/restaurants/useOrderCart";
+
+export default function OrderCartButton() {
+  const { itemCount, openCart } = useOrderCart();
+  return (
+    <button
+      type="button"
+      aria-label={`Order, ${itemCount} items`}
+      onClick={openCart}
+      className="relative inline-flex items-center p-1.5 text-foreground transition-opacity hover:opacity-70"
+    >
+      <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6">
+        <path d="M6 2L3 6v14a2 2 0 002 2h14a2 2 0 002-2V6l-3-4z" />
+        <line x1="3" y1="6" x2="21" y2="6" />
+        <path d="M16 10a4 4 0 01-8 0" />
+      </svg>
+      {itemCount > 0 && (
+        <span className="absolute -right-1 -top-1 flex h-[18px] min-w-[18px] items-center justify-center rounded-full bg-primary px-1 text-[10px] font-bold text-primary-foreground">
+          {itemCount}
+        </span>
+      )}
+    </button>
+  );
+}

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

@@ -0,0 +1,121 @@
+// 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.
+import { useOrderCart } from "../../hooks/restaurants/useOrderCart";
+import { imgAttrs } from "../../wix/media";
+
+export default function OrderCartDrawer() {
+  const { cart, open, closeCart, busy, error, updateQuantity, removeLine, checkout } = useOrderCart();
+  if (!open) return null;
+  const lines = cart?.lines ?? [];
+
+  return (
+    <div
+      className="fixed inset-0 z-50 flex justify-end bg-foreground/40 backdrop-blur-[2px]"
+      onClick={closeCart}
+    >
+      <aside
+        role="dialog"
+        aria-label="Your order"
+        onClick={(e) => e.stopPropagation()}
+        className="flex h-full w-full max-w-md flex-col bg-background text-foreground shadow-2xl"
+      >
+        <div className="flex items-center justify-between border-b border-border px-6 py-5">
+          <span className="text-base font-semibold">
+            Your order{cart && cart.itemCount > 0 ? ` (${cart.itemCount})` : ""}
+          </span>
+          <button
+            type="button"
+            aria-label="Close order"
+            onClick={closeCart}
+            className="text-xl leading-none text-muted-foreground transition-colors hover:text-foreground"
+          >
+            ×
+          </button>
+        </div>
+
+        <div className="flex-1 overflow-y-auto px-6 py-5">
+          {lines.length === 0 && (
+            <p className="py-16 text-center text-sm text-muted-foreground">Your order is empty.</p>
+          )}
+          {lines.map((line) => (
+            <div className="mb-6 flex gap-4" key={line.lineItemId}>
+              {line.imageUrl ? (
+                <img
+                  {...imgAttrs(line.imageUrl, "4rem")}
+                  alt=""
+                  className="h-16 w-16 flex-shrink-0 rounded-md bg-secondary object-cover"
+                />
+              ) : (
+                <div aria-hidden="true" className="h-16 w-16 flex-shrink-0 rounded-md bg-secondary" />
+              )}
+              <div className="min-w-0 flex-1">
+                <p className="text-sm font-medium">{line.itemName}</p>
+                {line.descriptionLines.map((d) => (
+                  <p className="mt-0.5 text-xs text-muted-foreground" key={d}>
+                    {d}
+                  </p>
+                ))}
+                {line.status !== "IN_STOCK" && (
+                  <p className="mt-1 text-xs text-destructive">No longer available</p>
+                )}
+                <div className="mt-2 flex items-center">
+                  <div className="inline-flex items-center gap-3 rounded-control border border-border px-2 py-0.5">
+                    <button
+                      type="button"
+                      aria-label="Decrease quantity"
+                      disabled={busy || line.quantity <= 1}
+                      onClick={() => updateQuantity(line.lineItemId, line.quantity - 1).catch(() => {})}
+                      className="px-1 text-base disabled:opacity-40"
+                    >
+                      −
+                    </button>
+                    <span className="text-sm tabular-nums">{line.quantity}</span>
+                    <button
+                      type="button"
+                      aria-label="Increase quantity"
+                      disabled={busy}
+                      onClick={() => updateQuantity(line.lineItemId, line.quantity + 1).catch(() => {})}
+                      className="px-1 text-base disabled:opacity-40"
+                    >
+                      +
+                    </button>
+                  </div>
+                  <button
+                    type="button"
+                    disabled={busy}
+                    onClick={() => removeLine(line.lineItemId).catch(() => {})}
+                    className="ml-3 text-xs text-muted-foreground underline transition-colors hover:text-foreground disabled:opacity-40"
+                  >
+                    Remove
+                  </button>
+                </div>
+              </div>
+              <p className="text-sm font-medium">{line.linePrice}</p>
+            </div>
+          ))}
+        </div>
+
+        {lines.length > 0 && (
+          <div className="border-t border-border px-6 py-5">
+            {cart?.subtotal && (
+              <div className="mb-4 flex justify-between text-sm">
+                <span className="text-muted-foreground">Subtotal</span>
+                <strong className="font-semibold">{cart.subtotal}</strong>
+              </div>
+            )}
+            {error && <p className="mb-3 text-xs text-destructive">{error}</p>}
+            <button
+              type="button"
+              disabled={busy}
+              onClick={() => checkout().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"}
+            </button>
+          </div>
+        )}
+      </aside>
+    </div>
+  );
+}

package/skills/wix-headless-templates/restaurants/app/components/restaurants/ReservationView.tsx

@@ -0,0 +1,212 @@
+// REFERENCE reservations surface: party/date/time query → AVAILABLE slot pills → hold (or, under
+// manual approval, a plain pick) → the details form built from the location's form configuration →
+// confirmed / pending, on the @theme tokens. Correct and complete; per the skill's model you design
+// and build your own on useReservation (which owns ALL booking logic).
+import { useReservation } from "../../hooks/restaurants/useReservation";
+import { zonedDateTimeLabel } from "../../wix/restaurants/time-core";
+
+const input =
+  "w-full rounded-md border border-border bg-background px-3 py-2 text-sm text-foreground outline-none focus:border-primary";
+
+function Policy({ label, policy }: { label: string; policy: { url: string; text: string } }) {
+  return policy.url ? (
+    <a href={policy.url} target="_blank" rel="noreferrer" className="underline">{label}</a>
+  ) : (
+    <details className="inline-block">
+      <summary className="cursor-pointer underline">{label}</summary>
+      <p className="mt-1 whitespace-pre-wrap text-xs text-muted-foreground">{policy.text}</p>
+    </details>
+  );
+}
+
+export default function ReservationView() {
+  const r = useReservation();
+
+  if (r.locations === null) {
+    return <div className="h-64 animate-pulse rounded-lg bg-secondary" aria-busy="true" />;
+  }
+  if (r.locations.length === 0 || !r.location) {
+    return (
+      <p className="py-16 text-center text-muted-foreground">
+        Table reservations aren't set up yet — call us to book.
+      </p>
+    );
+  }
+  if (!r.location.onlineReservationsEnabled) {
+    // Premium-gated toggle is off — slots/booking would fail; be honest, don't fake a form.
+    return (
+      <p className="py-16 text-center text-muted-foreground">
+        Online reservations aren't open yet — call us to book a table.
+      </p>
+    );
+  }
+
+  if (r.confirmed) {
+    const { outcome } = r.confirmed;
+    return (
+      <div className="mx-auto max-w-md rounded-lg border border-border p-8 text-center">
+        <p className="text-lg font-semibold">
+          {outcome === "confirmed" ? "Table reserved" : outcome === "pending" ? "Request sent" : "Reservation not completed"}
+        </p>
+        <p className="mt-2 text-sm text-muted-foreground">
+          {outcome === "confirmed"
+            ? r.location.form.submitMessage || "See you soon — a confirmation is on its way."
+            : outcome === "pending"
+              ? "The restaurant will confirm your reservation shortly."
+              : `Status: ${r.confirmed.status.toLowerCase().replace(/_/g, " ")} — please call us.`}
+        </p>
+        <button
+          type="button"
+          onClick={r.reset}
+          className="mt-6 rounded-control border border-border px-5 py-2 text-sm font-medium hover:bg-secondary"
+        >
+          Make another reservation
+        </button>
+      </div>
+    );
+  }
+
+  const form = r.location.form;
+  const picked = r.selectedSlot;
+  const holdMinutes = r.holdSecondsLeft !== null ? `${Math.floor(r.holdSecondsLeft / 60)}:${String(r.holdSecondsLeft % 60).padStart(2, "0")}` : "";
+
+  return (
+    <div className="mx-auto max-w-xl">
+      {r.locations.length > 1 && (
+        <label className="mb-4 block text-sm">
+          <span className="text-muted-foreground">Location</span>
+          <select value={r.location.id} onChange={(e) => r.setLocationId(e.target.value)} className={`mt-1 ${input}`}>
+            {r.locations.map((l) => (
+              <option key={l.id} value={l.id}>{l.name || l.address || "Restaurant"}</option>
+            ))}
+          </select>
+        </label>
+      )}
+      <div className="grid grid-cols-1 gap-4 sm:grid-cols-3">
+        <label className="block text-sm">
+          <span className="text-muted-foreground">Guests</span>
+          <input
+            type="number"
+            min={r.location.partySizeMin}
+            max={r.location.partySizeMax}
+            value={r.partySize}
+            onChange={(e) => r.setPartySize(Number(e.target.value))}
+            className={`mt-1 ${input}`}
+          />
+        </label>
+        <label className="block text-sm">
+          <span className="text-muted-foreground">Date</span>
+          <input type="date" value={r.date} onChange={(e) => r.setDate(e.target.value)} className={`mt-1 ${input}`} />
+        </label>
+        <label className="block text-sm">
+          <span className="text-muted-foreground">Around</span>
+          <input type="time" value={r.time} onChange={(e) => r.setTime(e.target.value)} className={`mt-1 ${input}`} />
+        </label>
+      </div>
+      {r.approval === "MANUAL" && (
+        <p className="mt-2 text-xs text-muted-foreground">Reservations for this party size are confirmed by the restaurant.</p>
+      )}
+      <button
+        type="button"
+        disabled={r.loading}
+        onClick={() => void r.findSlots()}
+        className="mt-4 w-full rounded-control bg-primary py-3 text-sm font-semibold text-primary-foreground transition-opacity hover:opacity-90 disabled:opacity-50"
+      >
+        {r.loading && r.slots === null ? "Finding times…" : "Find a table"}
+      </button>
+
+      {r.error && <p className="mt-4 text-sm text-destructive">{r.error}</p>}
+
+      {r.slots !== null && r.slots.length === 0 && !r.error && (
+        <p className="mt-6 text-center text-sm text-muted-foreground">
+          No tables around that time — try another time or party size.
+        </p>
+      )}
+
+      {r.slots !== null && r.slots.length > 0 && !picked && (
+        <div className="mt-6 flex flex-wrap gap-2" role="group" aria-label="Available times">
+          {r.slots.map((slot) => (
+            <button
+              key={slot.startIso}
+              type="button"
+              disabled={r.loading}
+              onClick={() => void r.holdSlot(slot)}
+              className="rounded-control border border-border px-4 py-1.5 text-sm font-medium transition-colors hover:bg-secondary disabled:opacity-40"
+            >
+              {slot.label}
+            </button>
+          ))}
+        </div>
+      )}
+
+      {picked && (
+        <div className="mt-6 rounded-lg border border-border p-5">
+          <p className="text-sm font-medium">
+            {r.held ? "Holding" : "Requesting"} {zonedDateTimeLabel(new Date(picked.startIso), r.location.timeZone)} for {r.partySize}
+            {r.location.name ? ` at ${r.location.name}` : ""}
+            {r.held && holdMinutes ? ` — complete within ${holdMinutes}.` : r.held ? " — complete within 10 minutes." : "."}
+          </p>
+          <div className="mt-4 grid grid-cols-1 gap-3 sm:grid-cols-2">
+            <input
+              placeholder="First name *"
+              value={r.reservee.firstName}
+              onChange={(e) => r.setReserveeField("firstName", e.target.value)}
+              className={input}
+            />
+            <input
+              placeholder={form.lastNameRequired ? "Last name *" : "Last name"}
+              value={r.reservee.lastName ?? ""}
+              onChange={(e) => r.setReserveeField("lastName", e.target.value)}
+              className={input}
+            />
+            <input
+              placeholder="Phone (+15551234567) *"
+              type="tel"
+              value={r.reservee.phone}
+              onChange={(e) => r.setReserveeField("phone", e.target.value)}
+              className={input}
+            />
+            <input
+              placeholder={form.emailRequired ? "Email *" : "Email"}
+              type="email"
+              value={r.reservee.email ?? ""}
+              onChange={(e) => r.setReserveeField("email", e.target.value)}
+              className={input}
+            />
+            {form.customFields.map((f) => (
+              <input
+                key={f.id}
+                placeholder={f.required ? `${f.name} *` : f.name}
+                value={r.reservee.customFields?.[f.id] ?? ""}
+                onChange={(e) => r.setCustomField(f.id, e.target.value)}
+                className={`${input} sm:col-span-2`}
+              />
+            ))}
+          </div>
+          {form.marketingCheckbox && (
+            <label className="mt-3 flex items-center gap-2 text-sm">
+              <input type="checkbox" checked={r.reservee.marketingConsent === true} onChange={(e) => r.setMarketingConsent(e.target.checked)} />
+              Send me news and offers by email
+            </label>
+          )}
+          {(form.terms || form.privacy) && (
+            <p className="mt-3 text-xs text-muted-foreground">
+              By reserving you agree to our{" "}
+              {form.terms && <Policy label="terms and conditions" policy={form.terms} />}
+              {form.terms && form.privacy && " and "}
+              {form.privacy && <Policy label="privacy policy" policy={form.privacy} />}.
+            </p>
+          )}
+          <button
+            type="button"
+            disabled={!r.canConfirm}
+            onClick={() => void r.confirm()}
+            className="mt-4 w-full rounded-control bg-primary py-3 text-sm font-semibold text-primary-foreground transition-opacity hover:opacity-90 disabled:opacity-50"
+          >
+            {r.loading ? "Sending…" : r.held ? "Complete reservation" : "Request reservation"}
+          </button>
+        </div>
+      )}
+    </div>
+  );
+}

package/skills/wix-headless-templates/restaurants/app/hooks/restaurants/useMenus.ts

@@ -0,0 +1,34 @@
+// React binding of the menu store (wix/restaurants/menu-store.ts) — menu browsing and switching
+// live there, framework-free; this hook subscribes to one instance per mounted surface. SSR-friendly:
+// pass server-fetched menus as `initialMenus` (Astro frontmatter) and no client fetch happens; a SPA
+// passes nothing. Astro islands and React SPAs use this; a static page, Vue, or Svelte uses the store.
+import { useEffect, useRef, useSyncExternalStore } from "react";
+import { createMenuStore, type MenuStore } from "../../wix/restaurants/menu-store";
+import type { MenuData } from "../../wix/restaurants/types";
+
+export interface UseMenusOptions {
+  initialMenus?: MenuData[];
+}
+
+export interface UseMenus {
+  /** null while the first load is in flight — render skeletons, not an empty state. */
+  menus: MenuData[] | null;
+  /** Defaults to the first menu once loaded. */
+  activeMenuId: string | null;
+  setActiveMenuId: (id: string) => void;
+  /** The menu to render (its sections/items are display-ordered). */
+  activeMenu: MenuData | null;
+  error: string | null;
+}
+
+export function useMenus({ initialMenus }: UseMenusOptions = {}): UseMenus {
+  const ref = useRef<MenuStore | null>(null);
+  if (!ref.current) ref.current = createMenuStore({ initialMenus });
+  const store = ref.current;
+  useEffect(() => {
+    store.start();
+    return () => store.stop();
+  }, [store]);
+  const state = useSyncExternalStore(store.subscribe, store.getState, store.getState);
+  return { ...state, setActiveMenuId: store.setActiveMenuId };
+}