// src/cart.jsx — Cart screen (drawer-style) with delivery summary, tip, promo. function EmptyCart({ onNav, isMobile }) { const nearby = STORES.slice(0, 3); const quickCats = [ { id: "deli", label: "Deli", icon: "Baguette" }, { id: "coffee", label: "Coffee", icon: "Coffee" }, { id: "drinks", label: "Drinks", icon: "Snow" }, { id: "beer", label: "Beer & Wine", icon: "Beer" }, { id: "snacks", label: "Snacks", icon: "Cookie" }, { id: "produce", label: "Produce", icon: "Apple" }, ]; return (
{/* Hero */}
Cart · empty

Nothing in the bag yet.
Tell us what you need.

Describe your evening in one sentence and Opa builds the cart — or pick a store nearby and browse the old-fashioned way.

{/* Quick categories */}
Jump in
{quickCats.map(c => { const Icon = Icons[c.icon]; return ( ); })}
{/* Nearby stores */}
Near 98 Orchard St
{nearby.map(s => ( ))}
); } function Cart({ onNav, cart, addToCart, clear, tweaks, onPlaceOrder }) { const isMobile = useMedia("(max-width: 720px)"); const store = STORES.find(s => s.id === (cart.items[0]?.storeId)) || STORES[0]; const items = cart.items.map(i => ({ ...i, p: PRODUCT_INDEX[i.productId] })).filter(i => i.p); const subtotal = items.reduce((s, i) => s + i.p.price * i.qty, 0); const fee = subtotal > 0 ? 1.99 : 0; const serviceFee = subtotal > 0 ? Math.max(0.99, subtotal * 0.05) : 0; const [tipPct, setTipPct] = React.useState(15); const tip = subtotal * (tipPct / 100); const total = subtotal + fee + serviceFee + tip; if (items.length === 0) { return ; } return (
Your order

Cart

}>Clear
{/* Store info */}
{store.name}
Delivery · {store.eta} · {store.fee}
onNav({ screen: "store", storeId: store.id })} iconRight={}> Add more
{/* Items list */}
{items.map((i, idx) => (
{i.p.name}
{i.p.unit}
{money(i.p.price)} each
addToCart(store.id, i.productId, 1)} onRemove={() => addToCart(store.id, i.productId, -1)} size="md" pattern="stepper" tone="outline" /> {money(i.p.price * i.qty)}
))}
{/* Suggested add-ons */}
{["drk-topo", "snk-kind", "prd-lime", "hh-advil"].map(id => { const p = PRODUCT_INDEX[id]; return (
{p.name}
{money(p.price)} addToCart(store.id, id, 1)} onRemove={()=>{}} size="sm" pattern="morph" />
); })}
{/* Summary panel */}
); } function Row({ l, r, sub }) { return (
{l} {sub &&
{sub}
}
{r}
); } window.Cart = Cart;