// screens-profile.jsx — orders history, profile/rewards, notifications // ─── Orders history screen ───────────────────────────────────────── function OrdersScreen({ app }) { const [filter, setFilter] = React.useState('all'); const [loading, setLoading] = React.useState(true); React.useEffect(() => { const t = setTimeout(() => setLoading(false), 500); return () => clearTimeout(t); }, []); // Add the active order in progress, if any const activeRow = app.activeOrder && !PAST_ORDERS.find(o => o.id === app.activeOrder.id) ? [{ id: app.activeOrder.id, restaurantId: app.activeOrder.restaurantId, date: 'Just now', total: app.activeOrder.total, status: 'in_progress', items: app.activeOrder.items.length, }] : []; const orders = [...activeRow, ...PAST_ORDERS]; const filtered = orders.filter(o => { if (filter === 'all') return true; if (filter === 'active') return o.status === 'in_progress'; if (filter === 'delivered') return o.status === 'delivered'; if (filter === 'cancelled') return o.status === 'cancelled' || o.status === 'refunded'; return true; }); return ( app.nav('profile')} onBell={() => app.nav('notifications')} initials={PROFILE.initials}/>
Your orders
The trail so far.
{/* Filter chips */} setFilter(c.toLowerCase())}/>
{loading ? [0,1,2].map(i => ) : filtered.length === 0 ? : filtered.map(o => ) }
); } // ─── Rate nudge — unrated delivered orders ────────────────────── function RateNudge({ app }) { const reviewedIds = new Set(MY_REVIEWS.map(rv => rv.restaurantId)); const [dismissed, setDismissed] = React.useState(false); const [rateOrder, setRateOrder] = React.useState(null); const [rated, setRated] = React.useState(() => new Set()); const [stars, setStars] = React.useState(0); const unrated = PAST_ORDERS.find(o => o.status === 'delivered' && !reviewedIds.has(o.restaurantId) && !rated.has(o.id)); if (dismissed || !unrated) return null; const r = RESTAURANT_LOOKUP[unrated.restaurantId]; return ( <>
How was {r?.name}?
Rate your {unrated.date} ride · +100 XP
setRateOrder(null)} title={r ? `Rate ${r.name}` : 'Rate your ride'}>
Your {unrated.date} order · {unrated.items} items · £{unrated.total.toFixed(2)}. Honest takes help the kitchen and the next hungry wrangler.
{[1,2,3,4,5].map(n => ( ))}
); } function OrderRow({ order, app }) { const r = RESTAURANT_LOOKUP[order.restaurantId]; const [receiptOpen, setReceiptOpen] = React.useState(false); if (!r) return null; const statusBadge = order.status === 'in_progress' ? Live : order.status === 'delivered' ? Delivered : order.status === 'cancelled' ? Cancelled : {order.status}; return ( <>
{ if (order.status === 'in_progress') app.nav('tracking'); else setReceiptOpen(true); }} style={{ display: 'flex', gap: 12, padding: 14, background: 'var(--bg-surface)', borderRadius: 18, border: '1.5px solid var(--soft-line)', cursor: 'pointer', alignItems: 'center', }}>
{r.name}
£{order.total.toFixed(2)}
{order.date} · {order.items} {order.items === 1 ? 'item' : 'items'}
{statusBadge}
#{order.id}
{order.status === 'in_progress' ? (
Track →
) : order.status === 'delivered' ? ( ) : (
View →
)}
setReceiptOpen(false)} order={order} app={app}/> ); } // ─── Receipt sheet — full itemised receipt for a past order ─────── function ReceiptSheet({ open, onClose, order, app }) { const r = RESTAURANT_LOOKUP[order.restaurantId]; const d = PAST_ORDER_DETAILS[order.id]; if (!d || !r) return ; const subtotal = d.items.reduce((s, i) => s + i.price * i.qty, 0); const dashed = { borderTop: '1.5px dashed var(--soft-line)', margin: '4px 0' }; return (
{/* Receipt card — ticket look */}
{/* header */}
{r.name}
#{order.id} · {d.time}
{d.refunded ? Refunded : Delivered}
{/* items */}
{d.items.map((it, i) => (
{it.qty}× {it.name} £{(it.price * it.qty).toFixed(2)}
))}
{/* totals */}
0 ? `£${d.fee.toFixed(2)}` : 'Free'}/> {d.tip > 0 && } {d.discount > 0 && (
{d.discountLabel} −£{d.discount.toFixed(2)}
)}
{/* meta */}
{d.card}
{d.address}
{d.rider && (
Delivered by {d.rider}
)} {d.xp > 0 && (
Earned +{d.xp} XP on this ride
)} {d.note &&
{d.note}
}
{/* torn edge */}
{!d.refunded && }
); } function SummaryLine({ label, value, bold }) { return (
{label} {value}
); } function OrderRowSkeleton() { return (
); } // ─── Profile / rewards screen ─────────────────────────────────────── function ProfileScreen({ app }) { const liveXp = app.xp != null ? app.xp : PROFILE.xp_points; const p = { ...PROFILE, xp_points: liveXp, xp_to_next: Math.max(0, PROFILE.xp_total_next - liveXp), streak_current: app.streak != null ? app.streak : PROFILE.streak_current, total_orders: app.ordersCount != null ? app.ordersCount : PROFILE.total_orders, }; const xpProgress = (p.xp_points / p.xp_total_next) * 100; const [sheet, setSheet] = React.useState(null); // 'addresses' | 'payments' | 'notifs' | 'receipts' // ── Signed-out state — auth entry point ───────────────────── if (!app.authed) { return (
Signed out
Saddle up, partner.
Sign in to see your orders, Trail points, streaks and rewards.
Checkout, rewards and Lucky Strike need an account — browsing the trail doesn't.
); } return ( {/* Dark hero */}
{p.initials}
{p.display_name}
{p.rank_label}
{/* XP bar */}
{p.xp_points.toLocaleString()} XP
{p.xp_to_next} to Trail Boss
{/* Stat row */}
{p.total_orders}} label="Orders"/> £{p.total_spend.toFixed(0)}} label="Spent"/> {p.streak_current}} label="Streak"/> £{app.walletBalance.toFixed(2)}} label="Wallet"/>
{/* Rewards shortcut — the deep gamification lives on the Rewards tab */}
app.replaceTo('rewards')} style={{ display: 'flex', alignItems: 'center', gap: 12, padding: '13px 15px', borderRadius: 18, cursor: 'pointer', background: 'linear-gradient(125deg,#3A1F11 0%,#1B120D 100%)', color: 'var(--dust-cream)', position: 'relative', overflow: 'hidden', }}>
Challenges, badges & the posse
{p.challenges.length} live challenges · {p.badge_count} badges · gift wallet credit
{/* Recent orders */}
app.nav('orders')}/>
{PAST_ORDERS.slice(0, 2).map(o => )}
{/* Account list */}
} label="Saved addresses" sub={`${ADDRESSES.length} saved`} onClick={() => setSheet('addresses')}/> } label="Payment methods" sub="Visa · 4242" onClick={() => setSheet('payments')}/> } label="Notifications" sub="On — order updates, promos" onClick={() => setSheet('notifs')}/> } label="Past receipts" sub={`${PAST_ORDERS.length} receipts`} onClick={() => setSheet('receipts')}/> } label="Trail Journal" sub="Your story so far, ride by ride" onClick={() => setSheet('journal')}/> } label="Your reviews" sub={`${MY_REVIEWS.length} posted · ${MY_REVIEWS.reduce((s, rv) => s + rv.helpful, 0)} found them helpful`} onClick={() => setSheet('reviews')}/>
{/* Session status + sign out */}
Signed in as {p.display_name}
setSheet(null)} app={app}/> setSheet(null)} app={app}/> setSheet(null)} app={app}/> setSheet(null)} app={app}/> setSheet(null)} app={app}/> setSheet(null)} app={app}/> ); } // ─── My reviews sheet ──────────────────────────────────────────── function MyReviewsSheet({ open, onClose, app }) { const [editing, setEditing] = React.useState(null); // review id const [draftText, setDraftText] = React.useState(''); const [draftStars, setDraftStars] = React.useState(5); const [overrides, setOverrides] = React.useState({}); // id -> {text, rating} const startEdit = (rv) => { const cur = overrides[rv.id] || rv; setEditing(rv.id); setDraftText(cur.text); setDraftStars(cur.rating); }; const saveEdit = (id) => { setOverrides(o => ({ ...o, [id]: { text: draftText.trim(), rating: draftStars } })); setEditing(null); app.toast('Review updated — the kitchen will see it', 'success'); }; return (
{MY_REVIEWS.map(rvRaw => { const rv = { ...rvRaw, ...(overrides[rvRaw.id] || {}) }; const r = RESTAURANT_LOOKUP[rv.restaurantId]; const isEditing = editing === rv.id; return (
{r?.name}
{[1,2,3,4,5].map(n => ( isEditing ? : = n ? 'var(--sun-orange)' : 'var(--soft-line)'} s={12}/> ))} {!isEditing && {rv.date}}
{rv.photo && !isEditing && With photo}
{isEditing ? ( <>
) : ( <>
“{rv.text}”
{rv.helpful} wranglers found this helpful
)}
); })}
); } // ─── Account sheets ────────────────────────────────────────────── function AddressesSheet({ open, onClose, app }) { const [defId, setDefId] = React.useState((ADDRESSES.find(a => a.default) || ADDRESSES[0]).id); return (
{ADDRESSES.map(a => { const on = a.id === defId; return ( ); })}
); } function PaymentsSheet({ open, onClose, app }) { const [defId, setDefId] = React.useState('visa'); const [topupOpen, setTopupOpen] = React.useState(false); const methods = [ { id: 'visa', label: 'Visa ···· 4242', sub: 'Expires 09/27', icon: }, { id: 'apple', label: 'Apple Pay', sub: 'jordan@lasso.io', icon: }, { id: 'google', label: 'Google Pay', sub: 'Linked account', icon: }, ]; return (
{/* Wallet first */}
Lasso wallet
Applies first at checkout
£{app.walletBalance.toFixed(2)}
{topupOpen && (
{[10, 20, 50].map(a => ( ))}
)} {methods.map(m => { const on = m.id === defId; return ( ); })}
); } function NotifPrefsSheet({ open, onClose, app }) { const [prefs, setPrefs] = React.useState({ orders: true, promos: true, rewards: true, sms: false }); const rows = [ { id: 'orders', label: 'Order updates', sub: 'Rider assigned, on the way, delivered' }, { id: 'promos', label: 'Promos & offers', sub: 'Deals from kitchens you follow' }, { id: 'rewards', label: 'Rewards & XP', sub: 'Challenges, badges, streak reminders' }, { id: 'sms', label: 'SMS backup', sub: 'Text me if a push doesn’t land' }, ]; return (
{rows.map(rw => { const on = prefs[rw.id]; return ( ); })}
); } function ReceiptsListSheet({ open, onClose, app }) { const [openReceipt, setOpenReceipt] = React.useState(null); return ( <>
{PAST_ORDERS.map(o => { const r = RESTAURANT_LOOKUP[o.restaurantId]; return ( ); })}
{openReceipt && setOpenReceipt(null)} order={openReceipt} app={app}/>} ); } // ─── Rewards + restaurant challenge table (opened from a loyalty card) ── function RewardsChallengeSheet({ card, onClose, app }) { if (!card) return ; const r = RESTAURANT_LOOKUP[card.restaurantId]; const mids = Array.from(new Set([ Math.max(1, Math.round(card.total / 2)), Math.max(2, card.total - 2), card.total, ])).sort((a, b) => a - b); const rewards = mids.map((at, i) => ({ at, reward: i === mids.length - 1 ? card.reward : (i === 0 ? 'Free drink' : 'Free side') })); const challenges = [ { title: 'Order 3 weeks running', xp: 300, progress: 2, total: 3, icon: 'flame' }, { title: `Try a new dish at ${r?.name || 'here'}`, xp: 120, progress: 0, total: 1, icon: 'star' }, { title: 'Bring a friend along', xp: 200, progress: 1, total: 2, icon: 'star' }, ]; return (
{/* Progress recap */}
{card.cardName}
{card.stamps} of {card.total} stamps
{Array.from({ length: card.total }).map((_, i) => (
{i < card.stamps && }
))}
{Math.max(0, card.total - card.stamps)} more to {card.reward}.
{/* Rewards table */}
Rewards
{rewards.map((t, i) => { const earned = card.stamps >= t.at; return (
0 ? '1px solid var(--soft-line)' : 'none' }}>
{t.at}
{t.reward}
{t.at} stamps
{earned ? Unlocked : {t.at - card.stamps} to go}
); })}
{/* Challenge table */}
Challenges at {card.restaurantName}
{challenges.map((c, i) => { const pct = (c.progress / c.total) * 100; return (
{c.icon === 'flame' ? : }
{c.title}
+{c.xp} XP
{c.progress}/{c.total}
); })}
); } function DarkStat({ value, label }) { return (
{value}
{label}
); } function ChallengeCard({ challenge: c }) { const pct = (c.progress / c.total) * 100; return (
{c.icon === 'flame' ? : }
{c.title}
+{c.xp} XP
{c.desc}
{c.progress}/{c.total}
· {c.expires}
); } function BadgeCard({ badge: b, onOpen }) { const palette = { orange: { bg: 'linear-gradient(135deg,#F28C1B,#D85A14)', fg: '#fff' }, sun: { bg: 'linear-gradient(135deg,#F4D8B0,#F28C1B)', fg: 'var(--horse-brown)' }, gold: { bg: 'linear-gradient(135deg,#F4E1C1,#D6A63A)', fg: 'var(--horse-brown)' }, gray: { bg: 'var(--bg-warm)', fg: 'var(--warm-stone)' }, }[b.kind]; return (
{b.name}
{b.desc}
); } function LoyaltyCard({ card: l, onOpen }) { const r = RESTAURANT_LOOKUP[l.restaurantId]; return (
{l.cardName}
{l.restaurantName}
{l.reward}
{Array.from({ length: l.total }).map((_, i) => (
{i < l.stamps && }
))}
{l.stamps} of {l.total} stamps
View rewards
); } function ProfileRow({ icon, label, sub, onClick }) { return ( ); } // ─── Notifications panel ──────────────────────────────────────────── function NotificationsScreen({ app }) { const items = [ { id: 'n1', type: 'order', title: 'Your order is on the way', sub: 'Diego picked up your Brisket Tacos · 7 min', time: 'now', icon: 'ride', unread: true }, { id: 'n2', type: 'reward', title: 'XP earned', sub: '+250 XP for completing "Three for the trail"', time: '2h', icon: 'badge', unread: true }, { id: 'n3', type: 'promo', title: 'Free delivery this Friday', sub: 'On orders over £20 at Rojo & Smoke', time: '1d', icon: 'ticket', unread: false }, { id: 'n4', type: 'order', title: 'Order delivered · LSO-22087', sub: 'Cactus & Cream · Rate your experience', time: '3d', icon: 'check', unread: false }, ]; return (
Notifications
{items.map(n => (
{n.icon === 'ride' && } {n.icon === 'badge' && } {n.icon === 'ticket' && } {n.icon === 'check' && }
{n.title}
{n.time}
{n.sub}
{n.unread &&
}
))}
); } Object.assign(window, { OrdersScreen, ProfileScreen, NotificationsScreen, OrderRow, ReceiptSheet, ChallengeCard, BadgeCard, LoyaltyCard, RewardsChallengeSheet, // shared with desktop AddressesSheet, PaymentsSheet, NotifPrefsSheet, ReceiptsListSheet, MyReviewsSheet, DarkStat, ProfileRow, RateNudge });