Step {step} of {total}

{title}

{/* Progress dots */}

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

))}

); } /* ─── 1. Item picker ─── */ function OrderItemPicker({ vendor: v, cart, setCart, onBack, onNext, dark }) { const liveTicket = useTickingMinute(v.ticket || 7); const cartCount = Object.values(cart).reduce((a, b) => a + b, 0); const cartTotal = (v.menu || []).reduce((sum, m) => sum + (cart[m.name] || 0) * m.price, 0); return (

} label="Accepting orders" /> } label="Ticket" value={bucketTicketCompact(liveTicket)} /> } label="On-site" />

{(v.menu || []).map((item) => ( setCart(c => ({ ...c, [item.name]: (c[item.name] || 0) + 1 }))} onRemove={() => setCart(c => { const n = { ...c, [item.name]: Math.max(0, (c[item.name] || 0) - 1) }; if (n[item.name] === 0) delete n[item.name]; return n; })} dark={dark} /> ))}

{/* Sticky CTA */}

); } /* ─── 2. Pickup window ─── */ function OrderPickup({ vendor: v, slot, setSlot, onBack, onNext, dark }) { return (

Live windows from {v.name}. Times update with ticket throughput.

{PICKUP_SLOTS.map((s, i) => { const active = slot === s.time; return ( ); })}

); } /* ─── 3. Confirm ─── */ function OrderConfirm({ vendor: v, cart, slot, onBack, onPlace, dark }) { const items = (v.menu || []).filter(m => cart[m.name] > 0); const subtotal = items.reduce((s, m) => s + cart[m.name] * m.price, 0); const tax = subtotal * 0.0875; const total = subtotal + tax; return (

{/* Vendor strip */}

{v.name.split(' ').map(w => w[0]).join('').slice(0,2)}

{v.name}

{v.kind} · {v.neighborhood}

{/* Items */}

{items.map((m, i) => (

0 ? (dark ? '0.5px solid rgba(255,255,255,0.06)' : '0.5px solid rgba(31,27,22,0.06)') : 'none', }}>

{cart[m.name]}×

{m.name}

{m.desc &&

{m.desc}

}

${(m.price * cart[m.name]).toFixed(2)}

))}

{/* Pickup slot card */}

Pickup window

{slot || '—'}

{/* Payment */}

VISA

Card on file

•••• 4242

{/* Totals */}

You'll get a ping when it's ready

); } function Row({ label, value, bold, muted }) { return (

{label} {value}

); } /* ─── 4. Ready notification ─── */ function OrderReady({ vendor: v, slot, cart, onClose, onMap, dark, preset, reducedMotion, intensity }) { // Fake ticking ETA const [secs, setSecs] = React.useState(7 * 60 + 12); React.useEffect(() => { const id = setInterval(() => setSecs(s => Math.max(0, s - 1)), 1000); return () => clearInterval(id); }, []); const mm = Math.floor(secs / 60); const ss = (secs % 60).toString().padStart(2, '0'); const totalItems = Object.values(cart).reduce((a, b) => a + b, 0); return (

Order placed · {v.name}

{mm < 3 ? Almost ready : <>Ready in {bucketTicketLong(mm)}}

Pickup at {slot}. We'll ping you when {totalItems > 1 ? 'they hit' : 'it hits'} the window.

{/* Live status track */}

{[ { label: 'Order received', done: true, when: 'now' }, { label: 'Accepted by kitchen', done: true, when: '12s ago' }, { label: 'On the grill', done: secs < 6*60, when: secs < 6*60 ? 'live' : '—' }, { label: 'Ready for pickup', done: secs === 0, when: secs === 0 ? 'now' : `~${mm}:${ss}` }, ].map((row, i, arr) => (

0 ? (dark ? '0.5px solid rgba(255,255,255,0.05)' : '0.5px solid rgba(31,27,22,0.05)') : 'none', }}>

{row.done && }

{row.label}

{row.when}

))}

Push notifications on. We'll only ping when there's news.

{/* Footer actions */}

); } window.OrderItemPicker = OrderItemPicker; window.OrderPickup = OrderPickup; window.OrderConfirm = OrderConfirm; window.OrderReady = OrderReady;