// EditBookingDrawer — opens for an existing booking. Partners first see a // read-only OVERVIEW of the booking, then choose to either Cancel it or // Amend it (change date / time / party size, add an email or phone number). // // Differs from the static design prototype in two ways, both required by the // live portal: // 1. Time slots in the amend panel come from LIVE availability // (usePpAvailability) for the drafted date × party size, not seed data. // 2. When the booking's timing (date / time / guests) changes, we run a // fresh availability look-up the instant the partner hits "Save changes" // and only commit if the chosen slot is still bookable. If it has gone // since they opened the drawer, we surface a warning and make them pick // another time before the amendment is confirmed. function EditBookingDrawer({ booking, onClose, onSave, onCancelBooking }) { const [mode, setMode] = React.useState('view'); // 'view' | 'amend' const [draft, setDraft] = React.useState(null); const [savedFlash, setSavedFlash] = React.useState(false); const [confirmCancel, setConfirmCancel] = React.useState(false); const [openChip, setOpenChip] = React.useState(null); // 'date' | 'time' | 'guests' | null const [check, setCheck] = React.useState({ status: 'idle' }); // idle | checking | gone const [saving, setSaving] = React.useState(false); // Re-seed the draft + reset to overview whenever a new booking is opened. React.useEffect(() => { if (booking) { setDraft({ ...booking }); setMode('view'); setSavedFlash(false); setConfirmCancel(false); setOpenChip(null); setCheck({ status: 'idle' }); setSaving(false); } }, [booking && booking.id]); React.useEffect(() => { if (!booking) return; const onKey = (e) => { if (e.key === 'Escape') onClose(); }; window.addEventListener('keydown', onKey); return () => window.removeEventListener('keydown', onKey); }, [booking, onClose]); // Resolve the venue up front — needed by the availability hook below, which // must run on every render (before any early return) to keep hook order // stable. Falls back to a name match for locally-created bookings. const venue = booking ? (venueById(booking.venueId) || venueById(VENUES.find(v => v.name === booking.venue)?.id) || { name: booking.venue, city: booking.city, operator: booking.operator }) : {}; // Live slots for the drafted date × party size. null = loading, [] = none. const slots = usePpAvailability(venue, booking && booking.product, draft && draft.date, draft && draft.guests); if (!booking || !draft) return null; const product = productById(booking.product) || { id: booking.product, name: booking.productName || booking.product }; const G = PRODUCT_GLYPHS[booking.product] || PRODUCT_GLYPHS.dinner; const dirty = JSON.stringify(draft) !== JSON.stringify(booking); const cancelled = booking.status === 'cancelled'; const timingChanged = draft.date !== booking.date || draft.time !== booking.time || draft.guests !== booking.guests; const update = (patch) => { setCheck({ status: 'idle' }); setDraft({ ...draft, ...patch }); }; const startAmend = () => { setDraft({ ...booking }); setConfirmCancel(false); setOpenChip(null); setCheck({ status: 'idle' }); setMode('amend'); }; const backToView = () => { setDraft({ ...booking }); setOpenChip(null); setCheck({ status: 'idle' }); setMode('view'); }; // Fresh availability look-up for the chosen slot — bypasses the slot cache so // the check reflects the operator's current inventory, not what was loaded // when the drawer opened. Local-only bookings (no compositeId) can't be // verified against Bookable, so they pass through. const recheckAvailability = async () => { const compositeId = booking.compositeId || (venue.composites && venue.composites[booking.product]); if (!compositeId) return true; try { const key = compositeId + '|' + draft.date + '|' + draft.guests; if (window.__pp_slot_cache) window.__pp_slot_cache.delete(key); const fresh = await ppLoadAvailability(compositeId, draft.date, draft.guests); return Array.isArray(fresh) && fresh.some(s => s.time === draft.time); } catch (e) { // If the look-up itself fails, don't block the partner — let the save // attempt surface any real error from the PATCH. return true; } }; const save = async () => { // Amending the timing requires a confirming availability look-up before we // commit. Contact-only edits (email / phone) skip straight to save. if (timingChanged) { setCheck({ status: 'checking' }); const ok = await recheckAvailability(); if (!ok) { setCheck({ status: 'gone' }); setOpenChip('time'); return; } } setCheck({ status: 'idle' }); setSaving(true); try { const ok = await onSave(draft); if (ok === false) { setCheck({ status: 'error' }); return; } setSavedFlash(true); setMode('view'); setTimeout(() => setSavedFlash(false), 2200); } finally { setSaving(false); } }; const status = draft.status || 'pending'; const statusLabel = status === 'confirmed' ? 'Confirmed' : status === 'pending' ? 'Pending' : status === 'cancelled' ? 'Cancelled' : status; return (
); } // Live time-slot picker for the amend panel. `slots` is null while the // availability look-up is in flight, [] when nothing is bookable. The current // booking time is shown as a disabled "current" chip when it isn't among the // freshly returned slots so the partner can still see what they had. function TimeSelect({ slots, value, onPick }) { if (slots === null) { return
Loading times…
; } const hasCurrent = value && slots.some(s => s.time === value); return (
{!hasCurrent && value && ( )} {slots.map(o => ( ))} {slots.length === 0 && ( No slots available for this date · party size. )}
); } function AlertGlyph({ size = 14 }) { return ( ); } function fmtBookingDate(iso) { if (!iso) return '—'; // A date-only string is parsed as UTC midnight; pin it to local midnight so a // negative-UTC timezone doesn't render the day before. Matches the amend // chip + DateRangeChip elsewhere. const d = new Date(iso.length === 10 ? iso + 'T00:00:00' : iso); if (isNaN(d.getTime())) return iso; return d.toLocaleDateString('en-GB', { weekday: 'short', day: 'numeric', month: 'short', year: 'numeric' }); } Object.assign(window, { EditBookingDrawer });