// Molara — Booking flow (multi-step, stateful) // Dental-care grouped reasons. Keys (k) match DOCTORS[i].k so we can shortlist matching dentists. const REASON_GROUPS = [ { k: 'emergency', label: 'Emergency 24/7', icon: 'shield', reasons: ['Severe tooth ache', 'Swelling or abscess', 'Broken or chipped tooth', 'Wisdom tooth flare-up', 'Bleeding after dental work', 'Other issue'] }, { k: 'toothache', label: 'Tooth ache', icon: 'tooth', reasons: ['Cold sensitivity', 'Pain while chewing', 'Cavity concern', 'Root canal second opinion', 'Gum bleeding', 'Other issue'] }, { k: 'kids', label: 'Kids tooth care', icon: 'baby', reasons: ['Child tooth pain', 'Milk tooth concern', 'Cavity prevention', 'Teething advice', 'Dental anxiety', 'Other issue'] }, { k: 'aligners', label: 'Aligners & braces', icon: 'settings', reasons: ['Clear aligner opinion', 'Braces consultation', 'Retainer concern', 'Bite correction', 'Mid-treatment review', 'Other issue'] }, { k: 'cosmetic', label: 'Whitening & cosmetic',icon: 'sparkle', reasons: ['Teeth whitening', 'Smile design', 'Veneers opinion', 'Chipped tooth bonding', 'Stain or discoloration', 'Other issue'] }, ]; const BOOKING_SLOTS = { Morning: ['9:00a','9:30a','10:15a','11:00a','11:45a'], Afternoon: ['1:00p','1:45p','2:15p','3:00p','3:45p','4:30p'], Evening: ['5:15p','6:00p','6:45p','7:30p'], }; function slotToMinutes(slot) { const m = /^(\d{1,2}):(\d{2})(a|p)$/i.exec(String(slot || '').trim()); if (!m) return 0; let h = Number(m[1]); const min = Number(m[2]); const mer = m[3].toLowerCase(); if (mer === 'p' && h !== 12) h += 12; if (mer === 'a' && h === 12) h = 0; return h * 60 + min; } function formatBookingDay(offset) { const d = new Date(); d.setDate(d.getDate() + offset); const month = d.toLocaleDateString('en-IN', { month: 'short' }); const day = d.getDate(); if (offset === 0) return `Today · ${month} ${day}`; if (offset === 1) return `Tomorrow · ${month} ${day}`; const weekday = d.toLocaleDateString('en-IN', { weekday: 'short' }); return `${weekday} · ${month} ${day}`; } function bookingDaysFromToday() { return [0, 1, 2, 3].map(formatBookingDay); } function nextBookingSlot() { const now = new Date(); const currentMinutes = now.getHours() * 60 + now.getMinutes(); const allSlots = Object.values(BOOKING_SLOTS).flat(); const future = allSlots.find((s) => slotToMinutes(s) > currentMinutes + 30); return future || allSlots[0]; } function bookingRouteParams(route) { const q = (route || window.location.hash.replace(/^#/, '') || '').split('?')[1] || ''; return new URLSearchParams(q); } function BookingFlow({ tone = 'warm', route = '' }) { const { user } = useAuth(); useDoctorReviews(); const routeParams = bookingRouteParams(route); const hasRequestedDoctor = routeParams.has('doctor'); const requestedDocId = Number(routeParams.get('doctor')); const requestedFollowup = routeParams.get('followup') === '1'; const requestedDoc = hasRequestedDoctor && Number.isFinite(requestedDocId) ? DOC_BY_ID(requestedDocId) : null; const doctorLocked = !!requestedDoc; const [step, setStep] = React.useState(1); const [specK, setSpecK] = React.useState(requestedDoc?.k || 'emergency'); const [reason, setReason] = React.useState('Severe tooth ache'); const [severity, setSev] = React.useState(2); const [slot, setSlot] = React.useState(() => nextBookingSlot()); const [day, setDay] = React.useState(() => slotToMinutes(nextBookingSlot()) === slotToMinutes(BOOKING_SLOTS.Morning[0]) && new Date().getHours() >= 19 ? 1 : 0); const [docId, setDocId] = React.useState(requestedDoc?.id || 1); const [mode, setMode] = React.useState('video'); const [note, setNote] = React.useState(''); const doc = DOC_BY_ID(docId); const BOOKING_DAYS = React.useMemo(() => bookingDaysFromToday(), []); const selectedDay = BOOKING_DAYS[day] || BOOKING_DAYS[0]; const selectedTime = formatSlot(slot); const visitFee = doc.fee + (mode === 'audio' ? -100 : mode === 'chat' ? -150 : 0); const activeGroup = REASON_GROUPS.find(g => g.k === specK) || REASON_GROUPS[0]; const availableReasonGroups = doctorLocked ? REASON_GROUPS.filter((g) => doctorMatchesSpec(requestedDoc, g.k)) : REASON_GROUPS; const flowSteps = doctorLocked ? [{ key: 1, label: 'Symptoms' }, { key: 3, label: 'Mode & Time' }, { key: 4, label: 'Confirm' }] : [{ key: 1, label: 'Symptoms' }, { key: 2, label: 'Dentist' }, { key: 3, label: 'Mode & Time' }, { key: 4, label: 'Confirm' }]; const currentStepIndex = Math.max(0, flowSteps.findIndex((s) => s.key === step)); const goPrev = () => setStep(flowSteps[Math.max(0, currentStepIndex - 1)].key); const goNext = () => setStep(flowSteps[Math.min(flowSteps.length - 1, currentStepIndex + 1)].key); const isFinalStep = step === flowSteps[flowSteps.length - 1].key; // Shortlist: prefer dentists for the chosen care type, then top-rated online others. const shortlist = React.useMemo(() => { const matched = DOCTORS.filter(d => d.online && doctorMatchesSpec(d, specK)); const others = DOCTORS.filter(d => d.online && !doctorMatchesSpec(d, specK)).sort((a,b) => Number(doctorStats(b).rating) - Number(doctorStats(a).rating)); return [...matched, ...others].slice(0, 4); }, [specK]); React.useEffect(() => { if (!requestedDoc) return; setDocId(requestedDoc.id); setSpecK(requestedDoc.k); const group = REASON_GROUPS.find(g => g.k === requestedDoc.k) || REASON_GROUPS[0]; setReason(group.reasons[0]); setStep((s) => s === 2 ? 3 : s); }, [requestedDoc?.id]); // When care type changes, default-pick the first matched dentist so step 2 makes sense. React.useEffect(() => { if (doctorLocked) return; if (shortlist[0] && !shortlist.some(d => d.id === docId)) setDocId(shortlist[0].id); }, [specK, doctorLocked]); return (
{/* Left: form */}
{/* Top bar */}
Encrypted · HIPAA
{/* Stepper */}
{flowSteps.map((s, i) => { const active = s.key === step; const done = i < currentStepIndex; return (
{done ? : i + 1} {s.label}
); })}
{step === 1 && (

{tone === 'warm' ? 'What dental issue brings you in today?' : 'Describe your dental concern.'}

{tone === 'warm' ? 'Pick what sounds closest — you can explain more in a minute.' : 'Select the dental category that best matches. Additional details collected next.'}

Dental care type
{/* Dental care tabs */}
{availableReasonGroups.map((g) => { const Ic = I[g.icon]; const active = g.k === specK; return ( ); })}
{activeGroup.reasons.map((r) => ( ))}
Pain level (if applicable)
{[0,1,2,3,4,5,6,7,8,9,10].map((n) => ( ))}
NONETOLERABLESEVERE
{doctorLocked && ( <>
{doc.avatar}
Selected dentist
{doc.n}
{doc.spec} · {doc.wait || '5 min'} wait
Online
Anything else {doc.n} should know? (optional)