// PLNTD Store Page — main app const { useState, useEffect, useRef, useMemo } = React; // Tweak defaults (persisted via EDITMODE markers) window.TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{ "darkMode": false } /*EDITMODE-END*/; // ─── Icons ────────────────────────────────────────────── const Icon = { cart: () => , user: () => , pin: () => , clock: () => , phone: () => , plus: () => , minus: () => , arrow: () => , check: () => , close: () => , bag: () => , wifi: () => , instagram: () => , leaf: () => , eye: () => }; // ─── Top Nav ──────────────────────────────────────────── function Nav({ cartCount, onOpenCart }) { return ( ); } // ─── Slim Banner + Status Cards ────────────────────────── function LeafSvg(props) { return ( ); } function StoreHeader({ store }) { const [hoursOpen, setHoursOpen] = useState(false); const today = store.hours[store.todayIndex]; const now = new Date(); const hh = now.getHours() + now.getMinutes() / 60; const [openH, openM] = today.open.split(':').map(Number); const [closeH, closeM] = today.close.split(':').map(Number); const isOpen = hh >= openH + openM / 60 && hh < closeH + closeM / 60; return ( <>
PLNTD. EAT CLEAN. LIVE GREEN.
document.getElementById('menu')?.scrollIntoView({ behavior: 'smooth', block: 'start' })}>
Pick up from
{store.address}, {store.addressLine2}
setHoursOpen(!hoursOpen)}>
{isOpen ? Store is: open : Store is: closed}
{isOpen ? `Until ${today.close}` : `Opens ${today.open}`}
{hoursOpen &&
{store.hours.map((h, i) =>
{h.day} {h.open}–{h.close}
)}
}
); } // ─── Menu Section ─────────────────────────────────────── // Mini category icons const CatIcon = { all: () => , smoothies: () => , juices: () => , coffee: () => , tea: () => }; function MenuSection({ onAdd, onView }) { const [activeTab, setActiveTab] = useState('all'); const tabs = [ { id: 'all', title: 'All drinks', icon: CatIcon.all }, { id: 'smoothies', title: 'Smoothies', icon: CatIcon.smoothies }, { id: 'juices', title: 'Fresh Juices', icon: CatIcon.juices }, { id: 'coffee', title: 'Coffee', icon: CatIcon.coffee }, { id: 'tea', title: 'Tea', icon: CatIcon.tea }]; const sections = activeTab === 'all' ? window.MENU : window.MENU.filter((s) => s.id === activeTab); return ( ); } function ProductCard({ item, onAdd, onView }) { const [added, setAdded] = useState(false); const cardRef = useRef(null); useEffect(() => { const node = cardRef.current; if (!node) return; if (typeof IntersectionObserver === 'undefined') { node.classList.add('in-view'); return; } const obs = new IntersectionObserver( (entries) => { entries.forEach((e) => { if (e.isIntersecting) { node.classList.add('in-view'); obs.unobserve(node); } }); }, { threshold: 0.12, rootMargin: '0px 0px -40px 0px' } ); obs.observe(node); return () => obs.disconnect(); }, []); const handleAdd = () => { onAdd(item); setAdded(true); setTimeout(() => setAdded(false), 900); }; return (
{item.img ? {item.name} :
{item.kind === 'tea' ? 'T' : 'C'}
}
{item.color && } {item.name}
{item.ingr}
{item.nutrition && }
£{item.price.toFixed(2)}
); } // ─── Order Sidebar (inline) ──────────────────────── function OrderSidebar({ items, onIncrement, onDecrement }) { const subtotal = items.reduce((sum, it) => sum + it.price * it.qty, 0); const totalQty = items.reduce((n, i) => n + i.qty, 0); return ( ); } // ─── About this store ──────────────────────────────────── function About() { return (
About this store

A small green corner of Leyton.

On the High Road, a few minutes from Leyton tube, our bar opens early for the morning rush — flat whites, cold-pressed greens and grab-and-go bowls (coming soon).

Everything is plant-based. Juices are pressed in-store each morning, smoothies are blended to order, and our beans come from a small London roaster.

Interior photo placeholder
); } // ─── Map + Location ───────────────────────────────────── function MapSection({ store }) { return (
Find us

{store.fullName}

Address {store.address}
{store.addressLine2}
Hours Mon–Thu 7:00–19:00
Fri 7:00–20:00
Sat 8:00–20:00 · Sun 9:00–18:00
Phone {store.phone}
Map placeholder
); } // ─── Other Stores ─────────────────────────────────────── function OtherStores() { return (

Other PLNTD stores.

{window.OTHER_STORES.map((s) =>
{s.name}
{s.area}
 )}
); } // ─── Brand Bar + Footer ───────────────────────────────── function BrandBar() { return (
EAT CLEAN. LIVE GREEN. FEEL GOOD.
@plntdlondon
); } function Footer() { return ( ); } // ─── Cart Drawer ─────────────────────────────────────── function CartDrawer({ open, onClose, items, onIncrement, onDecrement }) { const subtotal = items.reduce((sum, it) => sum + it.price * it.qty, 0); const total = subtotal; return ( <>
); } // ─── Nutrition Modal ───────────────────────────────────── function NutritionModal({ item, onClose }) { const [renderItem, setRenderItem] = useState(item); const [hiding, setHiding] = useState(false); useEffect(() => { if (item) { setRenderItem(item); setHiding(false); } else if (renderItem) { setHiding(true); const tm = setTimeout(() => {setRenderItem(null);setHiding(false);}, 220); return () => clearTimeout(tm); } }, [item]); useEffect(() => { if (!item) return; const onKey = (e) => {if (e.key === 'Escape') onClose();}; window.addEventListener('keydown', onKey); return () => window.removeEventListener('keydown', onKey); }, [item, onClose]); if (!renderItem) return null; const n = renderItem.nutrition || {}; const pct = Math.max(0, Math.min(1, (n.kcal || 0) / 2000)); const R = 88,C = 2 * Math.PI * R; const dash = C * pct; const rows = [ { label: 'Total energy (kJ)', val: n.kj != null ? `${n.kj} kJ` : null }, { label: 'Total energy (kcal)', val: n.kcal != null ? `${n.kcal} kcal` : null }, { label: 'Fat (g)', val: n.fat != null ? `${n.fat} g` : null }, { label: 'Saturated fat (g)', val: n.satFat != null ? `${n.satFat} g` : null }, { label: 'Carbohydrate (g)', val: n.carbs != null ? `${n.carbs} g` : null }, { label: 'Sugars (g)', val: n.sugars != null ? `${n.sugars} g` : null }, { label: 'Dietary fibre (g)', val: n.fibre != null ? `${n.fibre} g` : null }, { label: 'Protein (g)', val: n.protein != null ? `${n.protein} g` : null }, { label: 'Sodium (mg)', val: n.sodium != null ? `${n.sodium} mg` : null }]. filter((r) => r.val != null); return (
{renderItem.name}
Nutrition information
Percent based on a 2,000 calorie diet.
{n.kcal != null ? `${n.kcal} kcal` : '—'}
{n.kj != null ? `${n.kj} kJ` : ''}
{renderItem.noAddedSugar && (
No added sugar
)}

2,000 calories a day is used for general nutrition advice, but calorie needs vary. All menu items are prepared in an open kitchen that handles allergens and we cannot guarantee they are allergen-free.

Allergens
{renderItem.allergens && renderItem.allergens.length > 0 ? renderItem.allergens.map((a) =>
{a} Contains
) :
No declared allergens.
}
Nutrition
{rows.map((r) =>
{r.label} {r.val}
)}
); } // ─── App ─────────────────────────────────────────────── function App() { const [cart, setCart] = useState([]); const [cartOpen, setCartOpen] = useState(false); const [nutritionItem, setNutritionItem] = useState(null); const [t, setTweak] = useTweaks(window.TWEAK_DEFAULTS); useEffect(() => { document.body.classList.toggle('dark', !!t.darkMode); }, [t.darkMode]); const addToCart = (item) => { setCart((prev) => { const existing = prev.find((i) => i.name === item.name); if (existing) return prev.map((i) => i.name === item.name ? { ...i, qty: i.qty + 1 } : i); return [...prev, { ...item, qty: 1 }]; }); }; const increment = (item) => setCart((prev) => prev.map((i) => i.name === item.name ? { ...i, qty: i.qty + 1 } : i)); const decrement = (item) => setCart((prev) => prev.flatMap((i) => { if (i.name !== item.name) return [i]; if (i.qty === 1) return []; return [{ ...i, qty: i.qty - 1 }]; })); const cartCount = cart.reduce((n, i) => n + i.qty, 0); return (
); } ReactDOM.createRoot(document.getElementById('root')).render();