// screens-tracking.jsx — live order tracking (map-led + status-led variants) const STATUS_PIPELINE = [ { key: 'payment_pending', label: 'Payment pending', short: 'Payment', step: 0 }, { key: 'payment_confirmed', label: 'Order confirmed', short: 'Confirmed', step: 1 }, { key: 'sent_to_kitchen', label: 'Sent to kitchen', short: 'Sent', step: 2 }, { key: 'preparing', label: 'Being prepared', short: 'Cooking', step: 3 }, { key: 'ready_for_collection',label: 'Ready for pickup', short: 'Ready', step: 4 }, { key: 'agent_assigned', label: 'Rider assigned', short: 'Assigned', step: 5 }, { key: 'agent_collected', label: 'Order collected', short: 'Picked up', step: 6 }, { key: 'en_route', label: 'On the way', short: 'En route', step: 7 }, { key: 'delivered', label: 'Delivered', short: 'Delivered', step: 8 }, ]; const STATUS_TO_BADGE = { payment_pending: 'amber', payment_confirmed: 'gold', sent_to_kitchen: 'blue', preparing: 'blue', ready_for_collection: 'gold', agent_assigned: 'orange', agent_collected: 'orange', en_route: 'orange', delivered: 'live', cancelled: 'red', refunded: 'gray', }; const TRACKING_EVENTS = [ { status: 'payment_pending', message: 'Payment confirmation required', time: 'Just now' }, { status: 'payment_confirmed', message: 'Payment confirmed', time: 'Just now' }, { status: 'sent_to_kitchen', message: 'Order sent to the kitchen', time: '1 min ago' }, { status: 'preparing', message: 'Chef started prep · brisket on the smoke', time: '3 min ago' }, { status: 'ready_for_collection', message: 'Order is bagged and ready', time: '12 min ago' }, { status: 'agent_assigned', message: 'Diego accepted the ride', time: '14 min ago' }, { status: 'agent_collected', message: 'Diego picked up your order', time: '16 min ago' }, { status: 'en_route', message: 'Diego is 2 blocks away', time: '22 min ago' }, { status: 'delivered', message: 'Order delivered. Hope you enjoyed it!', time: '27 min ago' }, ]; // ─── Milestone theatre — brand-voice copy per step ────────────── function theatreFor(step, r) { const name = r ? r.name : 'the kitchen'; return { 1: { line: "Order's roped.", sub: `Payment cleared. ${name} gets it next.` }, 2: { line: 'The kitchen heard the bell.', sub: `${name} has your ticket on the rail.` }, 3: { line: "Fire's up. Smoke's rolling.", sub: 'Your order is on the heat right now.' }, 4: { line: 'Boxed and waiting at the pass.', sub: 'Packed hot. A rider is being wrangled.' }, 5: { line: "Diego's saddling up.", sub: 'Your rider is heading to the kitchen.', quote: 'On my way to grab it, partner.' }, 6: { line: "He's got it. Hold tight.", sub: 'Order in the crate, wheels rolling.', quote: 'Smells incredible back here.' }, 7: { line: 'Dust on the horizon.', sub: 'Diego is closing in on Avebury Boulevard.', quote: 'Two corners out. Get the table set.' }, 8: { line: 'Much obliged. Dig in.', sub: 'Delivered hot. The trail ends at your door.' }, }[step] || { line: 'On the trail.', sub: 'Your order is moving.' }; } // ─── Delivered confetti burst ─────────────────────────────── function DeliveredConfetti() { return ( ); } function TrackingScreen({ app }) { const tweakStatus = app.tweaks.trackingStatus; const [autoStep, setAutoStep] = React.useState(1); const [reviewSubmitted, setReviewSubmitted] = React.useState(false); const [rating, setRating] = React.useState(0); const [activeSheet, setActiveSheet] = React.useState(null); const detailsOpen = activeSheet === 'details'; const chatOpen = activeSheet === 'chat'; const callOpen = activeSheet === 'call'; const layout = app.tweaks.trackingLayout || 'map-led'; // Auto-progress: only when tweakStatus is 'auto' React.useEffect(() => { if (tweakStatus && tweakStatus !== 'auto') return; const t = setInterval(() => setAutoStep(s => Math.min(s + 1, 8)), 3500); return () => clearInterval(t); }, [tweakStatus]); // Resolve current status const currentStep = React.useMemo(() => { if (tweakStatus && tweakStatus !== 'auto') { return STATUS_PIPELINE.find(s => s.key === tweakStatus)?.step ?? autoStep; } return autoStep; }, [tweakStatus, autoStep]); const currentStatus = STATUS_PIPELINE.find(s => s.step === currentStep) || STATUS_PIPELINE[0]; const isDelivered = currentStatus.key === 'delivered'; const isException = ['payment_pending', 'cancelled', 'refunded'].includes(tweakStatus); // Resolve order const order = app.activeOrder || { id: 'LSO-22141', restaurantId: 'rojo-smoke', items: [{ item_name: 'Brisket Tacos', quantity: 1 }, { item_name: 'Smoked Mac', quantity: 1 }, { item_name: 'House Lemonade', quantity: 1 }], total: 24.50, address: ADDRESSES[0], }; const r = RESTAURANT_LOOKUP[order.restaurantId]; // ETA calculation const etaMin = isDelivered ? 0 : Math.max(1, 25 - currentStep * 3); // Events to show — only ones at or before current step const visibleEvents = TRACKING_EVENTS .filter(e => (STATUS_PIPELINE.find(s => s.key === e.status)?.step || 0) <= currentStep) .reverse(); if (isException) { return ; } const closeSheet = () => setActiveSheet(null); const sheetProps = { openDetails: () => setActiveSheet('details'), openChat: () => setActiveSheet('chat'), openCall: () => setActiveSheet('call'), }; const sheets = ( <> setActiveSheet('chat')}/> setActiveSheet('call')}/> ); if (layout === 'status-led') { return <> {sheets} ; } return <> {sheets} ; } // ─── Map-led layout ──────────────────────────────────────────────── function TrackingMapLed({ app, openDetails, openChat, openCall, currentStatus, currentStep, etaMin, order, r, visibleEvents, isDelivered, rating, setRating, reviewSubmitted, setReviewSubmitted }) { return (
{/* Map area */}
{window.L ? : } {/* Floating controls */}
Live
{/* Bottom sheet */}
{isDelivered && } {/* Hero status — milestone theatre */} {(() => { const th = theatreFor(currentStep, r); return (
{currentStatus.label}
{th.line}
{th.sub}
{!isDelivered && (
{etaMin} min out
)}
); })()} {/* Compact progress */} {/* Rider card — only when assigned */} {currentStep >= 5 && !isDelivered && } {/* Order summary line */}
From {r.name}
{order.items.length} items · £{order.total.toFixed(2)}
{/* Timeline */} {/* Review prompt */} {isDelivered && !reviewSubmitted && ( { setReviewSubmitted(true); app.toast('Review submitted', 'success'); }}/> )} {isDelivered && reviewSubmitted && (
Thanks for the review.
)}
); } // ─── Status-led layout (no big map; full status focus) ───────────── // ─── Fullscreen driver map overlay ──────────────────────────── function FullMapOverlay({ open, onClose, currentStep, isDelivered, etaMin }) { if (!open) return null; const layer = document.getElementById('lasso-sheet-layer'); const content = (
{window.L ? : }
{!isDelivered && (
Diego · {etaMin} min out
)}
); return layer ? ReactDOM.createPortal(content, layer) : content; } function TrackingStatusLed({ app, openDetails, openChat, openCall, currentStatus, currentStep, etaMin, order, r, visibleEvents, isDelivered, rating, setRating, reviewSubmitted, setReviewSubmitted }) { const [mapOpen, setMapOpen] = React.useState(false); return (
{/* Top bar */}
Order #{order.id}
{/* Big status hero — milestone theatre */}
{isDelivered && } {(() => { const th = theatreFor(currentStep, r); return (
{currentStatus.short} {!isDelivered && ( {etaMin} min out )}
{th.line}
{th.sub}
); })()}
{/* Stepper */}
{/* Rider — if assigned */} {currentStep >= 5 && !isDelivered && (
)} {/* Order summary */}
{r.name}
{order.items.length} items · £{order.total.toFixed(2)}
{order.address.line1}, {order.address.city}
{/* Timeline */}
Activity {isDelivered && !reviewSubmitted && (
{ setReviewSubmitted(true); app.toast('Review submitted', 'success'); }}/>
)}
setMapOpen(false)} currentStep={currentStep} isDelivered={isDelivered} etaMin={etaMin}/>
); } // ─── Exception screen (pending payment, cancelled, refunded) ─────── function TrackingExceptionScreen({ app, status, order }) { const conf = { payment_pending: { kind: 'amber', title: 'Payment pending', body: 'Your order is held until payment is confirmed.', cta: 'Refresh', tone: 'wait' }, cancelled: { kind: 'red', title: 'Order cancelled', body: 'Your order was cancelled. Any charge will be reversed.', cta: 'Order again', tone: 'bad' }, refunded: { kind: 'gray', title: 'Order refunded', body: 'A refund has been issued and will reach your card in 3–5 days.', cta: 'Back to home', tone: 'neutral' }, }[status]; return (
{status.replace('_', ' ')}
{conf.title}
{conf.body}
Order #{order.id}
 ); } // ─── Compact horizontal progress ─────────────────────────────────── function CompactProgress({ currentStep }) { // Compress the 8-step pipeline into 5 visual steps const steps = [ { label: 'Placed', step: 1 }, { label: 'Cooking', step: 3 }, { label: 'Picked up', step: 6 }, { label: 'On the way', step: 7 }, { label: 'Delivered', step: 8 }, ]; return (
{steps.map((s, i) => { const done = currentStep > s.step; const cur = currentStep >= s.step && (i === steps.length - 1 || currentStep < steps[i+1].step); const isLast = i === steps.length - 1; return (
p.step === s.step)?.key} style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', minWidth: 56 }}>
{done ? : (i+1)}
{s.label}
{!isLast && (
s.step ? '100%' : currentStep === s.step ? '50%' : '0%', transition: 'width 600ms var(--ease-out)', }}/>
)} ); })}
); } // ─── Vertical progress (status-led layout) ───────────────────────── function VerticalProgress({ currentStep }) { const steps = [ { label: 'Order confirmed', step: 1, key: 'payment_confirmed' }, { label: 'In the kitchen', step: 3, key: 'preparing' }, { label: 'Picked up by rider', step: 6, key: 'agent_collected' }, { label: 'On the way', step: 7, key: 'en_route' }, { label: 'Delivered', step: 8, key: 'delivered' }, ]; return (
Progress
{steps.map((s, i) => { const done = currentStep > s.step; const cur = currentStep >= s.step && (i === steps.length - 1 || currentStep < steps[i+1].step); const future = currentStep < s.step; return (
{done && } {cur &&
}
{i < steps.length - 1 && (
)}
{s.label}
{cur &&
Happening now
}
); })}
); } // ─── Timeline ────────────────────────────────────────────────────── function Timeline({ events }) { return (
{events.map((e, i) => (
{e.message}
{e.time}
))}
); } // ─── Rider card ──────────────────────────────────────────────────── function RiderCard({ onMsg, onCall, quote }) { return (
Diego Morales 4.9 · 312 rides
{quote ?
“{quote}”
:
Your courier · trail veteran
}
); } // ─── Review prompt ───────────────────────────────────────────────── function ReviewPrompt({ r, rating, setRating, onSubmit }) { const [comment, setComment] = React.useState(''); const [tip, setTip] = React.useState(0); return (
How was it?
Rate {r.name}
Your honest take helps the kitchen and rider.
{[1,2,3,4,5].map(n => ( ))}