Subchapter 16.667

Menu View

Pricing Plans

Rentalsstatic

Restaurants

815 more in the appendix

Menu Viewrestaurants

12 KB

Lines

257

Nearby

Source

restaurants/app/components/restaurants/MenuView.tsx

TypeScript257 lines12 KB

1// REFERENCE menu surface: menu tabs (when >1), section nav, the dish card, and the dish sheet
2// (variants, modifier groups, quantity, special request) on the @theme tokens. Correct and
3// complete; per the skill's model you design and build your own on useMenus + useOrderCart.
4// Note the load-bearing wiring: each card threads its menuId + sectionId from the render context
5// into addToOrder — never re-derive them — and every choice goes through the core's selection
6// helpers (initialSelection → toggleModifier → validateSelection → addToOrder).
7import { useState } from "react";
8import { useMenus } from "../../hooks/restaurants/useMenus";
9import { useOrderCart } from "../../hooks/restaurants/useOrderCart";

MenuView.tsx on GitHub

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 (

{item.variants.length > 0 && (

{item.variants.map((v) => (

<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) => (

{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 (

<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 && (

<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>

)}

<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>

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 (

{item.imageUrl && (

<img

{...imgAttrs(item.imageUrl, "6rem")}

alt={item.name}

className="h-24 w-24 flex-shrink-0 rounded-md bg-secondary object-cover"

/>

)}

{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 && (

{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>

)}

{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>

);

}

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 (

{Array.from({ length: 4 }, (_, i) => (

))}

</div>

);

}

if (menus.length === 0) {

return <p className="py-16 text-center text-muted-foreground">{error ?? emptyMessage}</p>;

}

return (

<div>

{menus.length > 1 && (

{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 && (

{activeMenu.sections.map((s) => (

{s.name}

</a>

))}

</nav>

)}

{error && <p className="mb-4 text-sm text-destructive">{error}</p>}

{activeMenu?.sections.map((section) => (

<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>}

{section.items.map((item) => (

))}

</div>

</section>

))}

</div>

);

}