/** Crumbs — cart drawer + copy-paste checkout */ const { useState, useEffect, useMemo, useRef } = React; const buildOrderText = (cart, customer) => { const data = window.CRUMBS_DATA; const lines = cart.map(l => { const it = data.items.find(i => i.id === l.id); if (!it || !it.variants[l.vi]) return null; // item deleted — skip const v = it.variants[l.vi]; const tops = (l.toppings || []).map(tid => it.toppings?.find(t => t.id === tid)).filter(Boolean); const topPrice = tops.reduce((s, t) => s + t.price, 0); const lineUnit = v.price + topPrice; const lineTotal = lineUnit * l.qty; const topStr = tops.length ? `\n + toppings: ${tops.map(t => t.label).join(', ')}` : ''; return `• ${it.name} (${v.label}) × ${l.qty} — ₹${lineTotal.toLocaleString('en-IN')}${topStr}`; }).filter(Boolean); const total = cart.reduce((s, l) => { const it = data.items.find(i => i.id === l.id); if (!it || !it.variants[l.vi]) return s; // skip deleted items const tops = (l.toppings || []).map(tid => it.toppings?.find(t => t.id === tid)).filter(Boolean); const topPrice = tops.reduce((ss, t) => ss + t.price, 0); return s + (it.variants[l.vi].price + topPrice) * l.qty; }, 0); const parts = [ `hi crumbs! 🤍 i'd like to place an order:`, ``, ...lines, ``, `total — ₹${total.toLocaleString('en-IN')}`, ``, `name: ${customer.name || '—'}`, `phone: ${customer.phone || '—'}`, `uber / parcel: ${customer.delivery || '—'}`, customer.note ? `note: ${customer.note}` : null, ``, `please confirm the timing slot, final price & payment details. happy to give 4–12h notice 🤍`, ].filter(Boolean); return parts.join('\n'); }; const CartDrawer = ({ open, onClose, cart, dispatch, onCheckout }) => { const data = window.CRUMBS_DATA; // Filter out any cart lines whose item was deleted from the menu const liveCart = cart.filter(l => data.items.find(i => i.id === l.id)); const lineUnitPrice = (l) => { const it = data.items.find(i => i.id === l.id); if (!it || !it.variants[l.vi]) return 0; const tops = (l.toppings || []).map(tid => it.toppings?.find(t => t.id === tid)).filter(Boolean); return it.variants[l.vi].price + tops.reduce((s, t) => s + t.price, 0); }; const total = liveCart.reduce((s,l) => s + lineUnitPrice(l) * l.qty, 0); return (
your box
{liveCart.length === 0 ? 'still empty.' : 'almost there.'}
{liveCart.length === 0 ? (
add a bake from the menu to start.
) : ( <>
{liveCart.map((l, idx) => { const it = data.items.find(i => i.id === l.id); const v = it.variants[l.vi]; const tops = (l.toppings || []).map(tid => it.toppings?.find(t => t.id === tid)).filter(Boolean); return (
{it.name}
{v.label} · {fmt(lineUnitPrice(l))}
{tops.length > 0 && (
+ {tops.map(t => t.label).join(', ')}
)}
{l.qty}
); })}
subtotal{fmt(total)}
{/* Delivery fee — treated as a real line item */}
uber / rapido delivery paid to rider
calculated by the app based on your distance from Mehdipatnam — you pay the rider directly
your total
+ delivery fee on top
{fmt(total)}

we'll prep a quick message you can paste into our DMs. nothing is charged here.

)}
); }; // ─── CHECKOUT SHEET (copy-paste output) ────────────────────────────────── const CheckoutSheet = ({ open, onClose, cart, openToast }) => { const getSaved = () => { try { return JSON.parse(localStorage.getItem('crumbs-customer') || 'null'); } catch { return null; } }; const saved = getSaved(); const hasSaved = !!(saved?.name && saved?.phone); const blank = { name: '', phone: '', delivery: '', note: '' }; const [customer, setCustomer] = useState(() => saved ? { ...blank, ...saved } : blank); const [orderedBefore, setOrderedBefore] = useState(hasSaved); const [step, setStep] = useState('form'); const [copied, setCopied] = useState(false); const text = useMemo(() => buildOrderText(cart, customer), [cart, customer]); useEffect(() => { if (!open) { setStep('form'); setCopied(false); } if (open) { const s = getSaved(); if (s) { setCustomer({ ...blank, ...s }); setOrderedBefore(true); } else { setCustomer(blank); setOrderedBefore(false); } } }, [open]); const tapOrderedBefore = () => { const s = getSaved(); if (!orderedBefore) { if (s) { setCustomer({ ...blank, ...s }); } setOrderedBefore(true); } else { setCustomer(blank); setOrderedBefore(false); localStorage.removeItem('crumbs-customer'); } }; const valid = customer.name.trim() && customer.phone.trim(); const goSummary = () => { if (!valid) return; const { note, ...rest } = customer; localStorage.setItem('crumbs-customer', JSON.stringify({ ...rest, note: '' })); setOrderedBefore(true); setStep('summary'); }; const onCopy = async () => { try { await navigator.clipboard.writeText(text); setCopied(true); openToast('copied! now paste into our DM →'); setTimeout(() => setCopied(false), 2400); } catch { // fallback — select textarea const ta = document.getElementById('cb-text'); ta?.select(); document.execCommand('copy'); setCopied(true); setTimeout(() => setCopied(false), 2400); } }; const igUrl = `https://ig.me/m/crumbs.hyd`; return ( {step === 'form' ? (
almost done
{orderedBefore && customer.name ? `welcome back, ${customer.name.split(' ')[0]}.` : 'tell us where this box is going.'}
{/* I've ordered before toggle */} setCustomer({...customer, name: v})} placeholder="e.g. Anaya"/> setCustomer({...customer, phone: v})} placeholder="10-digit" inputMode="tel"/> setCustomer({...customer, delivery: v})} placeholder="share your area — we'll arrange uber or parcel (fee is yours)" multiline/> setCustomer({...customer, note: v})} placeholder="birthday on the 14th, surprise for…" multiline/>
) : (
your message
copy this. send it to us. we'll do the rest.