Subchapter 20.103

INSTRUCTIONS

references/restaurants/INSTRUCTIONS.mdMarkdown18 KBView on GitHub

Wix Restaurants — ready-made client

The restaurant client is shipped as real files, not snippets to regenerate. It’s a complete menu + item ordering + server-cart + checkout, plus a table-reservation flow, styled with your app’s design tokens (base44’s src/index.css — the shadcn palette the design phase already set). Copy it into the app and wire the routes — you generate almost none of the restaurant code (the menu tree join, the order cart, the reservation hold→reserve flow all ship and are correct).

INSTRUCTIONS · Wix Vibe Headless · wix/skills · Skills Docs

file	what it is
`context/OrderCartContext.jsx`	`useOrderCart()` provider: resolves the ordering Operation, server cart, add/update/remove, checkout, `ordering` flag
`hooks/useItemOrder.js`	item-dialog add-to-order logic (stock + ordering-available gating, quantity)
`hooks/useReservation.js`	reservation flow (locations → date/party → AVAILABLE slots → hold → reserve)
`components/MenuItemCard.jsx`, `MenuList.jsx`	menu render UI (dish card + the menus→sections→items tree, with empty state)
`components/ItemDialog.jsx`	dish detail modal — description, price/variants, modifier groups (display), quantity, add-to-order
`components/OrderCartButton.jsx`	header order icon button with a live-count badge
`components/OrderCartDrawer.jsx`	slide-over order cart (mount once; opens from `useOrderCart`)
`components/WixManageBanner.jsx`	dev-only manage banner — drop it into your Layout (STEP 4)
`pages/Menu.jsx`, `pages/Reservations.jsx`	the two shipped routes (`/menu`, `/reservations`)
`rest/wix-config.js`	you set the ids here (STEP 2)
`rest/wix-client.js`	REST transport + visitor-token mint/refresh (the refresh token IS the cart identity)
`rest/wix-restaurants-menu.js`	menu read helpers — `getFullMenu` (the assembled tree; start here) + raw `list*`
`rest/wix-restaurants-ordering.js`	ordering — operations, add/update/remove, `checkout`
`rest/wix-restaurants-reservations.js`	reservations — locations, time slots, hold, reserve

import { useRef, useState, useEffect } from "react";
import { Routes, Route, Outlet } from "react-router-dom";
import { OrderCartProvider } from "@/context/OrderCartContext";
import OrderCartDrawer from "@/components/OrderCartDrawer";
import WixManageBanner from "@/components/WixManageBanner";   // shipped, dev-only · default export, no props
import Menu from "@/pages/Menu";                       // shipped · default export, no props
import Reservations from "@/pages/Reservations";       // shipped · default export, no props
import Home from "@/pages/Home";       // YOU build
import Header from "@/components/Header";   // YOU build — plain in-flow markup, NOT position:fixed
import Footer from "@/components/Footer";   // YOU build

function Layout() {
  const topRef = useRef(null);
  const [offset, setOffset] = useState(0);
  useEffect(() => {                                  // measure the fixed region → pad content below it
    const ro = new ResizeObserver(() => setOffset(topRef.current?.offsetHeight ?? 0));
    if (topRef.current) ro.observe(topRef.current);
    return () => ro.disconnect();
  }, []);
  return (<>
    <div ref={topRef} style={{ position: "fixed", top: 0, left: 0, right: 0, zIndex: 50 }}>
      <WixManageBanner />                    {/* null in prod / when dismissed */}
      <Header />                             {/* your brand header, in-flow inside this fixed block */}
    </div>
    <div style={{ paddingTop: offset }}>     {/* clears the chrome; shrinks when the banner is dismissed */}
      <Outlet />                             {/* shipped Menu/Reservations render here, untouched */}
      <Footer />
    </div>
    <OrderCartDrawer />                       {/* overlays every page */}
  </>);
}

<OrderCartProvider>
  <Routes>
    <Route element={<Layout />}>                                {/* chrome wraps all */}
      <Route path="/" element={<Home />} />                     {/* yours */}
      <Route path="/menu" element={<Menu />} />                 {/* shipped, as-is */}
      <Route path="/reservations" element={<Reservations />} /> {/* shipped, as-is */}
    </Route>
  </Routes>
</OrderCartProvider>

import { useState, useEffect } from "react";
import { Link } from "react-router-dom";
import OrderCartButton from "@/components/OrderCartButton";

// Responsive header: choose ONE branch with a state flag, so <OrderCartButton/> mounts once.
// Do NOT render a desktop nav AND a mobile nav toggled by `hidden md:flex` / `md:hidden`:
// these navs are inline-styled, and an inline `display` beats a Tailwind class, so `hidden`
// never applies — BOTH branches render and you get two order buttons. One branch = one button.
export function Header() {
  const [mobile, setMobile] = useState(() => window.innerWidth < 768);
  useEffect(() => {
    const onResize = () => setMobile(window.innerWidth < 768);
    window.addEventListener("resize", onResize);            // keep it reactive to viewport changes
    return () => window.removeEventListener("resize", onResize);
  }, []);
  return (
    <nav style={{ display: "flex", alignItems: "center", justifyContent: "space-between" }}>
      {/* brand/logo */}
      {mobile
        ? <YourMenu />                                       // your hamburger + <OrderCartButton/> here
        : <div style={{ display: "flex", gap: 24, alignItems: "center" }}>
            <Link to="/menu">Menu</Link><Link to="/reservations">Reserve</Link><OrderCartButton />
          </div>}
    </nav>
  );
}

import { getFullMenu } from "@/rest/wix-restaurants-menu";
import { useOrderCart } from "@/context/OrderCartContext";

// getFullMenu() is the ONLY pre-joined shape and the entry point for any menu surface. It returns
// { menus: [{ ...menu, sections: [{ ...section, items: [assembledItem] }] }] }, already ordered.
// Each item is enriched with a resolved price / variants, modifierGroups, and labels.
const { menus } = await getFullMenu();            // [] when no menus → show the shipped empty state

// useOrderCart() gives:
// { cart, operation, ordering, itemCount, isOpen, setIsOpen, loading,
//   addItem(item, { menuId, sectionId }, qty=1),   // needs the menu/section the item was shown under
//   removeItem(lineItemId), updateQuantity(lineItemId, qty), checkout(), refreshCart() }
// `ordering` is false when no ordering Operation is configured — show an "ordering unavailable" state.

// Load-bearing field paths (the shipped components already do these):
// - item.image / section.image / label.icon are OBJECTS → render `.url`, never the object; //-urls → https:
// - MENU prices are plain decimal strings with NO currency symbol ("12.50") — format in the UI.
//   The eCom cart line price (line.price.formattedAmount) DOES include the symbol.
// - an item is priced by EITHER item.price (single) OR item.variants[] (one-of, each { name, price }).
// - a cart mutation uses cart.lineItems[].id (the lineItemId), NOT the menu item id.

// The raw list* helpers return UNRESOLVED refs and INCONSISTENT shapes (listMenus → { menus,
// nextCursor }; listSections/listItems/listVariants/listModifierGroups/listModifiers → bare arrays).
// Don't re-join them by hand — build on getFullMenu(). If you truly need a partial fetch, note they
// take an array of GUIDs: listSections(sectionIds), listItems(itemIds).

// Reservation status after reserve: RESERVED = confirmed, REQUESTED = manual approval pending
// (tell the user). firstName + phone (E.164, e.g. "+15551234567") are mandatory; a HELD reservation
// expires in 10 minutes — the hook passes the hold's { id, revision } into reserve for you.

INSTRUCTIONS

Wix Restaurants — ready-made client

INSTRUCTIONS

Wix Restaurants — ready-made client

Prerequisites

STEP 1 — The client is already in `src/`

STEP 2 — Credentials

STEP 3 — Theme (nothing to style on the shipped components)

STEP 4 — Wire routes + provider (surgical `find_replace` on `src/App.jsx`, never a rewrite)

What you build (not shipped)

Using the client from your own UI (menu, order cart)

Extending the client

Hard rules

Point the user to their dashboard

Seeding

Verify (before declaring done)