// cl-reserve.jsx — 03 · Reservations. Two order types: // · Fresh-fried (Half/Full Dozen + Pinoy Palmer) — pickup Sat/Sun, 11:00–1:30 // · Frozen by the dozen ($20) — pickup any day, time confirmed by email // Live total via React state, underline inputs, clean success screen. Mock only. const { Section: SectionR, Statement: StatementR, SectionTag: SectionTagR, Kicker: KickerR } = window; const MENU = [ { id: 'half', name: 'Half Dozen', sub: '6 pieces · fresh-fried', price: 15, kind: 'fresh' }, { id: 'full', name: 'Full Dozen', sub: '12 pieces · fresh-fried', price: 25, kind: 'fresh' }, { id: 'frozen', name: 'Frozen Dozen', sub: '12 pieces · frozen, fry at home', price: 20, kind: 'frozen' }, { id: 'palmer', name: 'Pinoy Palmer', sub: 'black tea · calamansi', price: 5, kind: 'fresh' }, ]; const TIME_SLOTS = ['11:00 AM', '11:30 AM', '12:00 PM', '12:30 PM', '1:00 PM', '1:30 PM']; // ───────────────────────────────────────────────────────────────── // WEB3FORMS KEY — RESERVATION FORM -> orders@cuppalumpia.com // Paste the access key VERIFIED TO orders@cuppalumpia.com below. // (Create at web3forms.com using orders@cuppalumpia.com, confirm the // link sent to that alias, then paste the key here.) // ───────────────────────────────────────────────────────────────── const ORDERS_ACCESS_KEY = 'c2322977-6591-4940-a83c-c8943c13bf9e'; // verified to orders@cuppalumpia.com // ── Pickup-date rules ─────────────────────────────────────────── // Stand season: Sat & Sun, Jul 11 – Sep 30, 2026. // CLOSED_DATES → fully closed / away: blocks BOTH fresh-fried and frozen. // STAND_CLOSED_DATES → weekend stand off, but frozen pickup is still available. // Fresh-fried → weekend dates only (within season, minus BOTH closed lists). // Frozen → any day from today through Sep 30, minus CLOSED_DATES only. const SEASON_START = '2026-07-11'; const SEASON_END = '2026-09-30'; // Closed-date lists live in cl-brand.jsx (loaded first) as the single source of // truth, so the order calendar and the on-site closure notice never drift apart. const CLOSED_DATES = window.CL_CLOSED_DATES; // away — no fresh-fried AND no frozen const STAND_CLOSED_DATES = window.CL_STAND_CLOSED_DATES; // stand closed — fresh-fried off, frozen still OK function isoToDate(iso) { return new Date(iso + 'T12:00'); } function dateToISO(d) { return d.getFullYear() + '-' + String(d.getMonth() + 1).padStart(2, '0') + '-' + String(d.getDate()).padStart(2, '0'); } function todayISO() { return dateToISO(new Date()); } function tomorrowISO() { const d = new Date(); d.setDate(d.getDate() + 1); return dateToISO(d); } // Frozen sells year-round; cap the picker a year out so the native control stays sane. const FROZEN_MAX = (() => { const d = new Date(); d.setDate(d.getDate() + 365); return dateToISO(d); })(); function isClosed(iso) { return CLOSED_DATES.includes(iso); } // Fresh-fried is unavailable on full-closure days AND stand-only closures. function isStandClosed(iso) { return isClosed(iso) || STAND_CLOSED_DATES.includes(iso); } // Valid fresh-fried weekend dates: Sat/Sun, today-or-later, within the season, // excluding the two closed weekends. function buildFreshDates() { const out = [], today = todayISO(), end = isoToDate(SEASON_END); for (let d = isoToDate(SEASON_START); d <= end; d.setDate(d.getDate() + 1)) { const iso = dateToISO(d), day = d.getDay(); if ((day === 0 || day === 6) && !isStandClosed(iso) && iso >= today) out.push(iso); } return out; } const FRESH_DATES = buildFreshDates(); function isValidFresh(iso) { return FRESH_DATES.includes(iso); } // Frozen pickup: next-day at the earliest, year-round, excluding any weeks we're away. function isValidFrozen(iso) { return iso >= tomorrowISO() && iso <= FROZEN_MAX && !isClosed(iso); } // Frozen default: the next available day, skipping any week we're closed. function nextFrozenDate() { const d = new Date(); for (let i = 0; i < 400; i++) { d.setDate(d.getDate() + 1); const iso = dateToISO(d); if (isValidFrozen(iso)) return iso; } return tomorrowISO(); } function fmtOption(iso) { try { return isoToDate(iso).toLocaleDateString('en-US', { weekday: 'short', month: 'short', day: 'numeric' }); } catch { return iso; } } function Stepper({ value, onAdd }) { const btn = (dir, child, disabled) => ( ); return (
{btn(-1, , value === 0)}
0 ? 'var(--ink)' : 'var(--muted)', borderLeft: '1px solid var(--line)', borderRight: '1px solid var(--line)', lineHeight: '32px', height: 34 }}>{value}
{btn(1, , false)}
); } function Field({ label, children, hint, required }) { return ( ); } const inputStyle = { width: '100%', appearance: 'none', background: 'transparent', border: 'none', borderBottom: '1px solid var(--line)', borderRadius: 0, padding: '8px 2px', fontFamily: "'Lora',serif", fontSize: 17, color: 'var(--ink)', outline: 'none', transition: 'border-color .2s', }; function Reserve() { const [qty, setQty] = React.useState({ half: 0, full: 0, frozen: 0, palmer: 0 }); const [form, setForm] = React.useState({ name: '', email: '', phone: '', date: FRESH_DATES[0], time: '11:00 AM' }); const [done, setDone] = React.useState(null); const [err, setErr] = React.useState(''); const [sending, setSending] = React.useState(false); const [hp, setHp] = React.useState(''); // honeypot — humans never fill this const total = MENU.reduce((s, m) => s + qty[m.id] * m.price, 0); const count = MENU.reduce((s, m) => s + qty[m.id], 0); const hasFresh = qty.half + qty.full + qty.palmer > 0; const frozenOnly = qty.frozen > 0 && !hasFresh; const set = (k, v) => setForm((f) => ({ ...f, [k]: v })); // Keep the pickup date valid for the current order type: // fresh present → snap to the first valid weekend // frozen only → default to the next day (skipping closed weekends) React.useEffect(() => { if (hasFresh) { if (!isValidFresh(form.date)) set('date', FRESH_DATES[0]); } else if (frozenOnly) { if (!isValidFrozen(form.date) || isValidFresh(form.date)) set('date', nextFrozenDate()); } }, [hasFresh, frozenOnly]); // eslint-disable-line const submit = async (e) => { e.preventDefault(); if (hp) { setDone({ ...form, frozenOnly, hasFresh, items: [], total }); return; } // bot trapped — fake success, send nothing if (!form.name.trim()) return setErr('Add a name for the order.'); const emailOk = /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(form.email.trim()); const phoneOk = form.phone.replace(/\D/g, '').length >= 10; if (!emailOk) return setErr('Add a valid email so we can confirm your order.'); if (!phoneOk) return setErr('Add a valid phone number so we can reach you about pickup.'); if (count === 0) return setErr('Add at least one item.'); if (hasFresh && !isValidFresh(form.date)) { return setErr('Fresh-fried pickup is a weekend in the season (Jul 11 – Sep 30; closed Jul 25–26, Aug 1–2 & 22–23).'); } if (frozenOnly && !isValidFrozen(form.date)) { return setErr(isClosed(form.date) ? "We're away that week. Please pick another pickup day." : 'Frozen orders are next-day. Pick a day from tomorrow on.'); } setErr(''); const items = MENU.filter((m) => qty[m.id] > 0).map((m) => ({ ...m, n: qty[m.id] })); const orderLines = items.map((m) => `${m.n} × ${m.name} — $${m.price * m.n}`).join('\n'); setSending(true); try { const res = await fetch('https://api.web3forms.com/submit', { method: 'POST', headers: { 'Content-Type': 'application/json', Accept: 'application/json' }, body: JSON.stringify({ access_key: ORDERS_ACCESS_KEY, subject: `New order — ${form.name} — $${total}`, from_name: 'Cuppa Lumpia website', name: form.name, email: form.email, phone: form.phone, order_type: frozenOnly ? 'Frozen (any-day pickup)' : 'Fresh-fried (weekend)', pickup_date: fmtDate(form.date), pickup_time: frozenOnly ? 'Confirmed by email' : form.time, order: orderLines, total: `$${total}`, botcheck: '', }), }); const data = await res.json(); if (!data.success) throw new Error(data.message || 'failed'); setDone({ ...form, frozenOnly, hasFresh, items, total }); } catch (e2) { setErr('Sorry — your order did not go through. Please try again, or text us to reserve.'); } finally { setSending(false); } }; const reset = () => { setQty({ half: 0, full: 0, frozen: 0, palmer: 0 }); setForm({ name: '', email: '', phone: '', date: FRESH_DATES[0], time: '11:00 AM' }); setDone(null); setErr(''); }; const fmtDate = (iso) => { try { return new Date(iso + 'T12:00').toLocaleDateString('en-US', { weekday: 'long', month: 'long', day: 'numeric' }); } catch { return iso; } }; return (
Pre-orders held until 1:30 PM.
{!done ? ( <> We sell out most weekends. Reserve fresh-fried to skip the line, or order frozen dozens to fry any day.
{/* honeypot — off-screen; bots fill it, humans don't */} setHp(e.target.value)} aria-hidden="true" style={{ position: 'absolute', left: '-9999px', width: 1, height: 1, opacity: 0, pointerEvents: 'none' }} /> {/* order builder */}
Build your batch
{MENU.map((m) => (
{m.name} {m.kind === 'frozen' && Frozen}
{m.sub} · ${m.price}
setQty((q) => ({ ...q, [m.id]: Math.max(0, q[m.id] + d) }))} />
))}
Estimated total ${total}
{count > 0 ? `${count} item${count > 1 ? 's' : ''} · paid at pickup` : 'Tap + to start'}
{/* details */}
Your details e.target.style.borderColor = 'var(--accent)'} onBlur={(e) => e.target.style.borderColor = 'var(--line)'} onChange={(e) => set('name', e.target.value)} />
e.target.style.borderColor = 'var(--accent)'} onBlur={(e) => e.target.style.borderColor = 'var(--line)'} onChange={(e) => set('email', e.target.value)} /> e.target.style.borderColor = 'var(--accent)'} onBlur={(e) => e.target.style.borderColor = 'var(--line)'} onChange={(e) => set('phone', e.target.value)} />
{frozenOnly ? ( e.target.style.borderColor = 'var(--accent)'} onBlur={(e) => e.target.style.borderColor = isValidFrozen(form.date) ? 'var(--line)' : 'var(--accent)'} onChange={(e) => set('date', e.target.value)} /> ) : ( )} {frozenOnly ? (
Confirmed by text
) : ( )}
{err &&
{err}
}

We only use your details to fill this order — never shared, never spammed.

{frozenOnly ? "Frozen orders are ready next day. We'll text a 3-hour pickup window and Venmo details, then grab them cold from the cooler at our door." : 'No payment now. We hold your batch and you settle up at the stand. Cash or Venmo @cuppalumpia.'}

) : ( )} ); } function Success({ done, fmtDate, onReset }) { const mapsUrl = 'https://www.google.com/maps/search/?api=1&query=9251%20NE%20Lovgreen%20Rd%20Bainbridge%20Island%20WA%2098110'; return (
{/* LEFT — reassurance + the single next step */}

Your order is in,
{done.name.split(' ')[0] || 'friend'}.

{done.frozenOnly ? (

Next up: we'll text your 3-hour pickup window for {fmtDate(done.date)}. Your frozen dozens wait cold in the cooler at our door.

) : (

We'll have it rolled and ready. Come by {fmtDate(done.date)} around {done.time} — held to 1:30, we roll till we run out.

)} {done.email && (

A confirmation is on its way to {done.email}.

)}
Get directions
{/* RIGHT — the receipt: items, total, pay (each once) */}
Order summary
{done.items.map((m) => (
{m.n}× {m.name} {m.kind === 'frozen' && frozen} ${m.n * m.price}
))}
Total ${done.total}
Pay at pickup — cash or Venmo @cuppalumpia
{done.frozenOnly ? 'Cuppa Lumpia · cooler pickup' : 'Cuppa Lumpia Farm Stand'}
9251 NE Lovgreen Rd, Bainbridge Island, WA
); } Object.assign(window, { Reserve });