// book-trial.jsx — Calendar picker modal. Student picks a date, then a free slot. // Times displayed in the student's local timezone with the instructor's TZ shown. const BookTrialModal = ({ instructor, onClose, onBooked }) => { const auth = window.useAuth(); const studentTz = (Intl.DateTimeFormat().resolvedOptions().timeZone) || 'UTC'; // Anchor for the instructor's stored availability hours. Loaded from // profiles.timezone alongside the other per-instructor data below; // falls back to ET only if the profile row has no timezone set (legacy // rows pre-v33 trigger). const [instructorTz, setInstructorTz] = React.useState('America/New_York'); const [weekOffset, setWeekOffset] = React.useState(0); // 0 = this week, 1 = next, ... const [selectedDate, setSelectedDate] = React.useState(null); // ISO date string yyyy-mm-dd const [selectedHour, setSelectedHour] = React.useState(null); // ISO datetime string in UTC const [message, setMessage] = React.useState(''); const [availability, setAvailability] = React.useState([]); const [bookings, setBookings] = React.useState([]); const [loadingSlots, setLoadingSlots] = React.useState(true); const [busy, setBusy] = React.useState(false); const [error, setError] = React.useState(null); const [success, setSuccess] = React.useState(null); const [exceptions, setExceptions] = React.useState([]); React.useEffect(() => { (async () => { setLoadingSlots(true); const nowIso = new Date().toISOString(); const [{ data: avail }, { data: bks }, { data: exs }, { data: prof }] = await Promise.all([ window.supa.from('availability_slots').select('*').eq('instructor_id', instructor.id), window.supa.from('bookings').select('scheduled_at, duration_minutes').eq('instructor_id', instructor.id).gte('scheduled_at', nowIso), // Time-off / one-off blocks (v37). Anonymous viewers may not have a // session — RLS lets only authenticated callers SELECT, so anon // users get an empty list (no blocks shown). That's intentional: // the trial page is mostly for guests; the real booking flow uses // InstructorBookingPage which has tighter auth. window.supa.from('availability_exceptions').select('*') .eq('instructor_id', instructor.id).gte('end_at', nowIso), // instructors.id == profiles.id for instructor accounts, so we // pull the anchor zone for this instructor's availability hours // from profiles.timezone (same pattern as instructor-booking-page). window.supa.from('profiles').select('timezone').eq('id', instructor.id).maybeSingle(), ]); setAvailability(avail || []); setBookings(bks || []); setExceptions(exs || []); if (prof?.timezone) setInstructorTz(prof.timezone); setLoadingSlots(false); })(); }, [instructor.id]); // Build the 7 days of this/next week const today = startOfDay(new Date()); const weekDays = Array.from({ length: 7 }, (_, i) => addDays(today, i + weekOffset * 7)); // For the selected date, compute available 1-hour blocks. // Slots are anchored in the INSTRUCTOR's timezone: an "9 AM" row in // availability_slots means 9 AM on the instructor's clock, regardless // of where the student is. We build the slot's absolute moment via // Calendar.time.makeDate(...instructorTz), then let the student see it // formatted in their own zone downstream. const slotsForSelectedDate = React.useMemo(() => { if (!selectedDate) return []; const [y, m, d] = selectedDate.split('-').map(Number); // day_of_week in availability_slots is Sun=0. Use a UTC anchor for // the weekday lookup so the index doesn't shift by a day for // timezones west of UTC. const dow = new Date(Date.UTC(y, m-1, d)).getUTCDay(); const ranges = availability.filter(a => a.day_of_week === dow); const blocks = []; ranges.forEach(r => { const [sh] = r.start_time.split(':').map(Number); const [eh] = r.end_time.split(':').map(Number); for (let h = sh; h < eh; h++) { const slotStart = window.Calendar.time.makeDate(y, m, d, h, 0, instructorTz); // Skip if in the past if (slotStart.getTime() < Date.now() + 60 * 60 * 1000) return; // Skip if a booking already exists at this hour const conflict = bookings.some(b => { const bStart = new Date(b.scheduled_at).getTime(); const bEnd = bStart + (b.duration_minutes || 60) * 60000; const sStart = slotStart.getTime(); const sEnd = sStart + 60 * 60000; return bStart < sEnd && bEnd > sStart; }); // Skip if the time intersects any active exception block const blocked = window.Calendar.shape.isSlotBlocked && window.Calendar.shape.isSlotBlocked(exceptions, slotStart, 60); if (!conflict && !blocked) blocks.push(slotStart.toISOString()); } }); return blocks; }, [selectedDate, availability, bookings, exceptions, instructorTz]); const submit = async () => { if (!auth.user) { setError('Please sign in first.'); return; } if (!selectedHour) { setError('Pick a time slot to continue.'); return; } setBusy(true); setError(null); // Route through Bookings.db.bookAsStudent → student_book_lesson RPC. // The RPC enforces auth, the assignment check, the credit balance, // AND (since v54) the block-time check — closing the bypass where a // direct bookings.insert could land a row inside an availability // exception window. try { await window.Bookings.db.bookAsStudent({ instructorId: instructor.id, scheduledAt: selectedHour, durationMinutes: 60, message: message || null, }); setSuccess('Booking requested! The instructor will confirm shortly.'); setTimeout(() => { onBooked && onBooked(); }, 1200); } catch (e) { setError(e?.message || 'Booking failed. Please try again.'); } finally { setBusy(false); } }; return (
e.stopPropagation()} style={{ width: '100%', maxWidth: 720, background: '#fff', borderRadius: 18, padding: 32, boxShadow: '0 20px 60px rgba(0,0,0,0.25)', fontFamily: "'Plus Jakarta Sans', sans-serif", maxHeight: '90vh', overflowY: 'auto', }}>
Book a trial

with {window.MASTERY.maskTeacherName(instructor.full_name)}

60 min · ${instructor.rate} · Times shown in {studentTz}
{/* Week navigator */}
{weekDays[0].toLocaleDateString(undefined, { month: 'short', day: 'numeric' })} – {weekDays[6].toLocaleDateString(undefined, { month: 'short', day: 'numeric' })}
{/* Day picker */}
{weekDays.map(d => { const dateStr = isoDate(d); const isSelected = dateStr === selectedDate; const dow = d.getDay(); const hasAvail = availability.some(a => a.day_of_week === dow); return ( ); })}
{/* Time slot picker */}
{!selectedDate &&
Pick a date to see times.
} {selectedDate && loadingSlots &&
Loading slots…
} {selectedDate && !loadingSlots && slotsForSelectedDate.length === 0 && (
No open times on this day. Try another.
)} {selectedDate && slotsForSelectedDate.length > 0 && (
{slotsForSelectedDate.map(iso => { const dt = new Date(iso); const label = dt.toLocaleTimeString(undefined, { hour: 'numeric', minute: '2-digit' }); const isSelected = iso === selectedHour; return ( ); })}
)}
{/* Message + confirm */} {selectedHour && (