/* global React, Icon, Button, Chip, MOCK, formatHandle, useGeolocation, useAvailability, useCourse, useCourseSlots, useFriendsOnSlots, useMyBookings, useMatchup, useMatchDetail, createBooking, cancelBooking, startBookedMatch, confirmMatchResult, useUserSearch, invitePartner */
// Golfer booking flow (Phase B):
// BookScreen — date-first availability: near-you courses + open slots
// CourseDetailScreen— hero + Sandbox 9 + the day's bookable slots
// BookingSheet — pick format (1v1/2v2) + partner, reserve a slot
// MyRoundsScreen — upcoming + past bookings, with cancel
//
// Reserve-only for now (no payment). Reads the courses-data.jsx hooks.
// ─── Shared: 7-day date strip ─────────────────────────────────────────
function nextDays(n) {
const out = [];
const base = new Date(); base.setHours(0, 0, 0, 0);
for (let i = 0; i < n; i++) {
const d = new Date(base); d.setDate(base.getDate() + i);
out.push(d);
}
return out;
}
function DateStrip({ selected, onSelect }) {
const days = nextDays(7);
const sameDay = (a, b) => a.toDateString() === b.toDateString();
return (
{days.map((d, i) => {
const active = sameDay(d, selected);
const label = i === 0 ? 'Today' : i === 1 ? 'Tmrw' : d.toLocaleDateString('en-US', { weekday: 'short' });
return (
);
})}
);
}
function fmtTime(iso) {
return new Date(iso).toLocaleTimeString('en-US', { hour: 'numeric', minute: '2-digit' });
}
// ─── Slot chip ────────────────────────────────────────────────────────
function SlotChip({ slot, onClick, friends }) {
return (
);
}
// ─── Book screen ──────────────────────────────────────────────────────
function BookScreen({ go, profile, embedded }) {
const [coords, geoStatus] = useGeolocation();
const [date, setDate] = React.useState(() => { const d = new Date(); d.setHours(0, 0, 0, 0); return d; });
const [q, setQ] = React.useState('');
const [list, loading] = useAvailability(date, coords);
const [booking, setBooking] = React.useState(null); // { slot, course }
const filtered = list.filter(({ course }) => {
if (!q.trim()) return true;
const s = q.trim().toLowerCase();
return course.shortName.toLowerCase().includes(s) || course.city.toLowerCase().includes(s);
});
const locLabel = geoStatus === 'ok' ? 'Near you'
: geoStatus === 'pending' ? 'Locating…'
: 'Miami, FL';
return (
{!embedded && (
)}
{!embedded ? (
Twilight tee times
Book a round.
) : (
{locLabel}
)}
{!embedded && (
{locLabel}
)}
setQ(e.target.value)} placeholder="Search courses…"
style={{ flex: 1, background: 'transparent', border: 'none', outline: 'none', fontSize: 14, color: 'var(--ink)', fontWeight: 600 }}/>
{q && }
{loading ? (
Loading availability…
) : filtered.length === 0 ? (
No courses found.
More courses are joining the Sandbox network soon.
) : (
filtered.map(({ course, slots, distanceMi }) => (
go({ screen: 'courseDetail', courseId: course.id })}
onPickSlot={(slot) => setBooking({ slot, course })}
/>
))
)}
);
}
function CourseAvailabilityCard({ course, slots, distanceMi, viewerId, onOpenCourse, onPickSlot }) {
const slotIds = React.useMemo(() => slots.map(s => s.id), [slots]);
const friendsBySlot = useFriendsOnSlots(viewerId, slotIds);
return (
{slots.length === 0 ? (
No open times this day.
) : (
{slots.map(s => onPickSlot(s)}/>)}
)}
);
}
// ─── Course detail ────────────────────────────────────────────────────
function CourseDetailScreen({ go, courseId, profile }) {
const [course, holes, loading] = useCourse(courseId);
const [date, setDate] = React.useState(() => { const d = new Date(); d.setHours(0, 0, 0, 0); return d; });
const [slots, slotsLoading] = useCourseSlots(courseId, date);
const [booking, setBooking] = React.useState(null);
if (loading) return Loading…
;
if (!course) return Course not found.
;
const totalYards = holes.reduce((s, h) => s + (h.sandbox_yards || 0), 0);
return (
{/* Hero */}
{/* Clay course-hole diorama (when no custom render set) */}
{!course.renderImg && (
)}
{course.shortName}
{course.city.toUpperCase()}, {course.state}
{/* Sandbox 9 summary */}
h.sandbox_yards || 0))}y` : '—'}/>
{course.description && (
{course.description}
)}
{course.realPar && (
PLAYS OVER {course.name.toUpperCase()} · REAL COURSE PAR {course.realPar} · {course.realYardage?.toLocaleString()} YDS
)}
{holes.length > 0 &&
}
{/* Booking */}
Pick a tee time
{slotsLoading ? (
Loading times…
) : slots.length === 0 ? (
No open times this day.
Try another day on the strip above.
) : (
{slots.map(s => (
))}
)}
{booking && (
setBooking(null)}
onBooked={() => { setBooking(null); go({ screen: 'myRounds' }); }}
/>
)}
Sandbox 9 · scorecard
| Hole |
{holes.map(h => {h.hole_number} | )}
TOT |
| Yards |
{holes.map(h => {h.sandbox_yards ?? '—'} | )}
{totYards || '—'} |
| Par |
{holes.map(h => {h.par} | )}
{totPar} |
);
}
function Stat({ label, value }) {
return (
);
}
function Divider() { return ; }
// ─── Booking sheet ────────────────────────────────────────────────────
function BookingSheet({ slot, course, profile, onClose, onBooked }) {
const [matchType, setMatchType] = React.useState('1v1');
const [hasPartner, setHasPartner] = React.useState(null); // null | true | false (2v2 only)
const [partner, setPartner] = React.useState(null); // profile row
const [q, setQ] = React.useState('');
const [results] = useUserSearch(q, 6);
const [busy, setBusy] = React.useState(false);
const [err, setErr] = React.useState('');
function pickFormat(k) {
setMatchType(k);
setHasPartner(null); setPartner(null); setQ(''); setErr('');
}
React.useEffect(() => {
const prev = document.body.style.overflow;
document.body.style.overflow = 'hidden';
return () => { document.body.style.overflow = prev; };
}, []);
async function reserve() {
if (matchType === '2v2') {
if (hasPartner === null) { setErr('Do you have a partner? Pick Yes or No.'); return; }
if (hasPartner === true && !partner) { setErr('Search and pick your partner, or choose No.'); return; }
}
setErr(''); setBusy(true);
try {
if (matchType === '2v2' && hasPartner && partner) {
// Invite a chosen partner — they must accept (consent) to be booked.
await invitePartner({ slotId: slot.id, partnerId: partner.id, price: slot.price });
} else {
await createBooking({
slotId: slot.id, userId: profile.id, partnerId: null,
needsPartner: matchType === '2v2' && hasPartner === false,
matchType, price: slot.price,
});
}
onBooked();
} catch (e) { setErr(e.message || 'Could not reserve.'); setBusy(false); }
}
const when = new Date(slot.starts_at);
const dateLabel = when.toLocaleDateString('en-US', { weekday: 'long', month: 'short', day: 'numeric' });
return (
{ if (e.target === e.currentTarget && !busy) onClose(); }} style={{
position: 'fixed', inset: 0, background: 'rgba(14,28,19,0.6)',
backdropFilter: 'blur(6px)', WebkitBackdropFilter: 'blur(6px)',
display: 'flex', alignItems: 'flex-end', justifyContent: 'center', zIndex: 1000,
}}>
Reserve your round
{course.shortName} · {dateLabel} · {fmtTime(slot.starts_at)}
{/* Format toggle */}
{[['1v1', 'Head-to-head'], ['2v2', '2v2 Scramble']].map(([k, l]) => (
))}
{/* 2v2: do you have a partner? */}
{matchType === '2v2' && (
Do you have a partner?
{[['yes', 'Yes — invite them', true], ['no', "No — pair me up", false]].map(([k, l, v]) => (
))}
{hasPartner === false && (
We'll pair you with another solo at this tee time. Your match locks only once a full foursome is set — you'll never be left in a 2-on-1.
)}
)}
{/* Partner picker — only when "Yes" */}
{matchType === '2v2' && hasPartner === true && (
Your partner
{partner ? (
{partner.avatar_url ?
: (partner.first_name || partner.handle || '?').replace(/^@/, '').charAt(0).toUpperCase()}
{[partner.first_name, partner.last_name].filter(Boolean).join(' ') || partner.handle}
{formatHandle(partner.handle)}
) : (
<>
setQ(e.target.value)} placeholder="Find a partner by @handle…" style={{ flex: 1, background: 'transparent', border: 'none', outline: 'none', fontSize: 14, fontWeight: 600, color: 'var(--ink)' }}/>
{q.trim() && results.length > 0 && (
{results.filter(r => r.id !== profile.id).map((r, i, arr) => (
))}
)}
)}
)}
{/* Price + reserve */}
Price (set by course)
${slot.price}
Reserve now, pay at the course. No charge yet.
{err &&
{err}
}
My Rounds
{loading ? (
Loading…
) : (
<>
{upcoming.length === 0 ? (
No rounds booked.
Find a twilight tee time near you.
) : (
{upcoming.map(b => cancel(b)} busy={busyId === b.id} go={go}/>)}
)}
{past.length > 0 && (
<>
{past.map(b => )}
)}
)}
);
}
function Section({ label }) {
return {label}
;
}
function RoundCard({ b, onCancel, busy, past, go }) {
const slot = b.slot || {};
const course = slot.course || {};
const when = slot.starts_at ? new Date(slot.starts_at) : null;
const within24h = when && (when.getTime() - Date.now() < 24 * 3600 * 1000);
return (
{b.match_type === '2v2' ? '2v2' : '1v1'}
{b.partner && (
Partner: {formatHandle(b.partner.handle)}
)}
{b.match_id && (
)}
{!past && !within24h && (
)}
{!past && within24h && (
Locked in — within 24h of tee time.
)}
);
}
// ─── Matchup reveal (scout your foursome / opponent) ──────────────────
function MatchupScreen({ go, matchId, profile }) {
const [data, loading] = useMatchup(matchId);
const [starting, setStarting] = React.useState(false);
const meId = profile && profile.id;
async function checkIn(mid) {
setStarting(true);
try { await startBookedMatch(mid); go({ screen: 'match', matchId: mid }); }
catch (_) { setStarting(false); }
}
if (loading) return Loading…
;
if (!data) return Matchup not found.
;
const { match, teamA, teamB } = data;
const is2v2 = (teamA.length + teamB.length) > 2;
const mySide = teamA.some(p => p.id === meId) ? 'A' : teamB.some(p => p.id === meId) ? 'B' : null;
return (
{is2v2 ? '2v2 Scramble' : 'Head-to-head'} · {match.course_name}
The Matchup
{match.status === 'completed' ? (
) : (
)}
Scout the field — know your SBX gap before the first tee.
);
}
function TeamBlock({ label, players, meId, go }) {
return (
{label}
{players.map(p => )}
);
}
function ScoutCard({ p, me, go }) {
const name = [p.first_name, p.last_name].filter(Boolean).join(' ') || p.handle;
const initial = (name || '?').replace(/^@/, '').charAt(0).toUpperCase();
return (
);
}
// ─── Match detail / summary (+ confirm result) ────────────────────────
function MatchDetailScreen({ go, matchId, profile }) {
const [data, loading] = useMatchDetail(matchId);
const [busy, setBusy] = React.useState(false);
const [err, setErr] = React.useState('');
const [selHole, setSelHole] = React.useState(null);
const meId = profile && profile.id;
if (loading) return Loading…
;
if (!data) return Match not found.
;
const { match: m, holes, teamA, teamB } = data;
const is2v2 = m.match_type === '2v2';
const youAreA = m.player_a === meId || m.player_a2 === meId;
const isParticipant = youAreA || m.player_b === meId || m.player_b2 === meId;
const decided = m.status === 'completed' || m.result != null;
// Result from your POV
let verdict = 'In progress';
if (m.result === 'H') verdict = 'Halved';
else if (m.result === 'A') verdict = youAreA ? 'Won' : 'Lost';
else if (m.result === 'B') verdict = youAreA ? 'Lost' : 'Won';
const won = verdict === 'Won';
const holesWon = holes.filter(h => (h.result === 'A' && youAreA) || (h.result === 'B' && !youAreA)).length;
const holesLost = holes.filter(h => (h.result === 'B' && youAreA) || (h.result === 'A' && !youAreA)).length;
const holesHalved = holes.filter(h => h.result === 'H').length;
const mySide = youAreA ? 'a' : 'b';
const iConfirmed = mySide === 'a' ? m.confirmed_a : m.confirmed_b;
const theyConfirmed = mySide === 'a' ? m.confirmed_b : m.confirmed_a;
const bothConfirmed = m.confirmed_a && m.confirmed_b;
async function confirm() {
setBusy(true); setErr('');
try {
await confirmMatchResult(matchId);
// Rating + points just recomputed server-side — refresh our profile.
try { if (typeof window.reloadProfile === 'function') window.reloadProfile(); } catch (_) {}
} catch (e) { setErr(e.message || 'Could not confirm.'); }
setBusy(false);
}
const teamLabel = (team) => team.map(p => p.first_name || p.handle).join(' + ') || '—';
return (
{/* Hero */}
{is2v2 ? '2v2 Scramble' : 'Head-to-head'} · {m.course_name}
{decided ? verdict : 'In progress'}
{m.final_margin && decided && (
{m.final_margin}
)}
{/* Teams */}
{youAreA ? 'Your side' : 'Team A'}
{teamLabel(teamA)}
vs
{!youAreA ? 'Your side' : (is2v2 ? 'Team B' : 'Opponent')}
{teamLabel(teamB)}
{/* Still in progress → let participants jump back in to finish it */}
{!decided && isParticipant && (
)}
{/* Your hole record */}
{/* Hole-by-hole — tap a hole for its stats */}
{holes.length > 0 && (
Hole by hole · tap for detail
{holes.map(h => {
const w = (h.result === 'A' && youAreA) || (h.result === 'B' && !youAreA);
const l = (h.result === 'B' && youAreA) || (h.result === 'A' && !youAreA);
const lab = h.result == null ? '·' : w ? 'W' : l ? 'L' : 'H';
const bg = w ? 'var(--forest)' : l ? '#C44536' : h.result === 'H' ? 'var(--paper)' : 'transparent';
const col = w ? 'var(--cream)' : l ? '#FFFFFF' : 'var(--forest)';
return (
);
})}
)}
{selHole && (
setSelHole(null)}/>
)}
{/* Confirmation */}
{isParticipant && decided && (
{bothConfirmed ? (
<>
✅
Result confirmed
Both sides agreed — this counts toward SBX.
) : iConfirmed ? (
<>
Confirmed on your side
Waiting for the other side to confirm…
) : (
<>
Confirm the result
Both sides confirm before it counts toward SBX. {theyConfirmed ? 'The other side already confirmed.' : ''}
{err &&
{err}
}
)}
)}
{label}
{value}
);
return (
{ if (e.target === e.currentTarget) onClose(); }} style={{
position: 'fixed', inset: 0, background: 'rgba(14,28,19,0.6)', backdropFilter: 'blur(6px)', WebkitBackdropFilter: 'blur(6px)',
display: 'flex', alignItems: 'flex-end', justifyContent: 'center', zIndex: 1000,
}}>
Hole {h.hole_number}
{verdict}
|
{h.distance_yards != null &&
}
|
|
{is2v2 ? (
<>
|
|
|
{/* Per-player breakdown (both teammates' own shots) */}
{playerStats.length > 0 && (
By player
{playerStats.map(s => {
const p = byId[s.player_id]; if (!p) return null;
const pname = [p.first_name, p.last_name].filter(Boolean).join(' ') || p.handle;
return (
{pname} {formatHandle(p.handle)}
{s.fairway ? `Fairway: ${fairLabel[s.fairway] || s.fairway} · ` : ''}
{s.gir != null ? `GIR: ${s.gir ? 'Yes' : 'No'}` : ''}
{s.zone ? ` · ${s.zone}` : ''}
);
})}
)}
) : (
<>
{(h.par || 3) >= 4 && |
}
|
|
)}