/* global React, Icon, Button, Eyebrow, TBMark, useLanguage */ const { useState, useMemo, useRef, useEffect } = React; const AVAILABILITY_ENDPOINT = '/api/calcom/availability?days=21'; const BOOKING_ENDPOINT = '/api/calcom/book'; const NEW_YORK_TZ = 'America/New_York'; const keyFormatter = new Intl.DateTimeFormat('en-CA', { timeZone: NEW_YORK_TZ, year: 'numeric', month: '2-digit', day: '2-digit' }); function dateKey(value) { const parts = Object.fromEntries(keyFormatter.formatToParts(new Date(value)).filter(p => p.type !== 'literal').map(p => [p.type, p.value])); return `${parts.year}-${parts.month}-${parts.day}`; } function formatTime(value, locale) { return new Intl.DateTimeFormat(locale, { timeZone: NEW_YORK_TZ, hour: 'numeric', minute: '2-digit' }).format(new Date(value)); } function buildCalendarDays(locale, slotsByDay) { const weekday = new Intl.DateTimeFormat(locale, { timeZone: NEW_YORK_TZ, weekday: 'short' }); const month = new Intl.DateTimeFormat(locale, { timeZone: NEW_YORK_TZ, month: 'short' }); const dayNumber = new Intl.DateTimeFormat(locale, { timeZone: NEW_YORK_TZ, day: 'numeric' }); const out = []; const now = Date.now(); for (let i = 1; i <= 21; i++) { const d = new Date(now + i * 86400000); const key = dateKey(d); out.push({ key, dow: weekday.format(d).toLowerCase().replace('.', ''), day: dayNumber.format(d), month: month.format(d).toLowerCase().replace('.', ''), slots: slotsByDay[key] || [] }); } return out; } function BookingModal({ open, onClose }) { const { isPortuguese } = useLanguage(); const locale = isPortuguese ? 'pt-BR' : 'en-US'; const [step, setStep] = useState(0); const [selectedDay, setSelectedDay] = useState(null); const [selectedSlot, setSelectedSlot] = useState(null); const [info, setInfo] = useState({ name: '', email: '' }); const [availability, setAvailability] = useState([]); const [eventType, setEventType] = useState(null); const [loadStatus, setLoadStatus] = useState('idle'); const [status, setStatus] = useState('idle'); const [error, setError] = useState(''); const [booking, setBooking] = useState(null); const [honey, setHoney] = useState(''); const openedAt = useRef(Date.now()); useEffect(() => { if (!open) return undefined; let cancelled = false; const controller = new AbortController(); setLoadStatus('loading'); setError(''); fetch(AVAILABILITY_ENDPOINT, { signal: controller.signal, headers: { Accept: 'application/json' } }) .then(async response => { const result = await response.json().catch(() => ({})); if (!response.ok) throw new Error(result.message || 'Cal.com availability could not be loaded.'); return result; }) .then(result => { if (cancelled) return; setAvailability(Array.isArray(result.slots) ? result.slots : []); setEventType(result.event_type || null); setLoadStatus('ready'); }) .catch(err => { if (cancelled || err.name === 'AbortError') return; setLoadStatus('error'); setError(err.message || 'Scheduling is temporarily unavailable.'); }); return () => { cancelled = true; controller.abort(); }; }, [open]); const slotsByDay = useMemo(() => { const grouped = {}; availability.forEach(slot => { if (!slot?.start_time) return; const key = dateKey(slot.start_time); (grouped[key] ||= []).push(slot); }); Object.values(grouped).forEach(list => list.sort((a, b) => new Date(a.start_time) - new Date(b.start_time))); return grouped; }, [availability]); const days = useMemo(() => buildCalendarDays(locale, slotsByDay), [locale, slotsByDay]); const day = selectedDay ? days.find(d => d.key === selectedDay) : null; const duration = Number(eventType?.duration) || 20; if (!open) return null; const reset = () => { setStep(0); setSelectedDay(null); setSelectedSlot(null); setInfo({ name: '', email: '' }); setAvailability([]); setEventType(null); setLoadStatus('idle'); setStatus('idle'); setError(''); setBooking(null); setHoney(''); openedAt.current = Date.now(); onClose(); }; const refreshAvailability = async () => { setLoadStatus('loading'); const response = await fetch(AVAILABILITY_ENDPOINT, { headers: { Accept: 'application/json' } }); const result = await response.json().catch(() => ({})); if (!response.ok) throw new Error(result.message || 'Cal.com availability could not be loaded.'); setAvailability(result.slots || []); setEventType(result.event_type || eventType); setLoadStatus('ready'); }; const submitBooking = async () => { setError(''); if (!selectedSlot || !info.name.trim() || !/^\S+@\S+\.\S+$/.test(info.email.trim())) { setError(isPortuguese ? 'Adicione seu nome e um e-mail válido.' : 'Please add your name and a valid email address.'); return; } if (honey || Date.now() - openedAt.current < 1800) { setError(isPortuguese ? 'Aguarde um momento e tente novamente.' : 'Please wait a moment and try again.'); return; } try { setStatus('sending'); const response = await fetch(BOOKING_ENDPOINT, { method: 'POST', headers: { 'Content-Type': 'application/json', Accept: 'application/json' }, body: JSON.stringify({ start_time: selectedSlot.start_time, name: info.name.trim(), email: info.email.trim(), timezone: Intl.DateTimeFormat().resolvedOptions().timeZone || NEW_YORK_TZ }) }); const result = await response.json().catch(() => ({})); if (!response.ok) { if (response.status === 409 || result.error === 'SLOT_UNAVAILABLE') { setStatus('idle'); setStep(0); setSelectedDay(null); setSelectedSlot(null); await refreshAvailability(); throw new Error(isPortuguese ? 'Esse horário acabou de ficar indisponível. Escolha outro horário.' : 'That time just became unavailable. Please choose another time.'); } if (result.error === 'CALCOM_REQUIRED_FIELDS') throw new Error(isPortuguese ? 'Este tipo de evento possui campos obrigatórios adicionais no Cal.com.' : 'This Cal.com event type has additional required booking fields.'); throw new Error(result.message || (isPortuguese ? 'Não foi possível concluir o agendamento.' : 'The booking could not be completed.')); } setBooking(result.booking || result); setStatus('booked'); } catch (err) { if (status !== 'booked') setStatus('error'); setError(err.message || (isPortuguese ? 'Algo deu errado. Tente novamente.' : 'Something went wrong. Please try again.')); } }; const selectedLabel = selectedSlot ? formatTime(selectedSlot.start_time, locale) : ''; return (
e.stopPropagation()} style={{ width:'min(940px,100%)', maxHeight:'92vh', overflow:'auto', background:'var(--limestone)', borderRadius:4, boxShadow:'0 24px 60px -12px rgba(22,21,19,.5)' }}>
Cal.com · {isPortuguese ? 'disponibilidade ao vivo' : 'live availability'}
{duration}-{isPortuguese ? 'minutos · tainá borges' : 'minute intro · tainá borges'}
{status === 'booked' ?
{isPortuguese ? 'confirmado no Cal.com' : 'confirmed in Cal.com'}

{isPortuguese ? 'está agendado' : 'you’re booked'}.

{isPortuguese ? 'Seu horário foi criado no Cal.com e os detalhes serão enviados para ' : 'Your booking was created in Cal.com and the details will be sent to '}{info.email}. {day?.dow}, {day?.month} {day?.day} · {selectedLabel} ET.

{booking?.meeting_url &&

{isPortuguese ? 'Abrir reunião' : 'Open meeting'}

}
: <> {loadStatus === 'loading' &&
Cal.com · {isPortuguese ? 'sincronizando' : 'syncing'}

{isPortuguese ? 'buscando horários disponíveis…' : 'loading live availability…'}

} {loadStatus === 'error' &&
{isPortuguese ? 'agenda indisponível' : 'schedule unavailable'}

{error}

} {loadStatus === 'ready' && step === 0 &&
{isPortuguese ? 'passo 1 / 3 · escolha o dia' : 'step 1 / 3 · pick a day'}

{isPortuguese ? 'qual dia funciona melhor?' : 'which day works?'}

{days.map(d=>{const disabled=!d.slots.length;return })}

{isPortuguese ? 'disponibilidade ao vivo do Cal.com · horário de Nova York' : 'live Cal.com availability · New York time'}

} {loadStatus === 'ready' && step === 1 && day &&
{isPortuguese?'passo 2 / 3 · escolha o horário':'step 2 / 3 · pick a time'}

{day.dow}, {day.month} {day.day}

{day.slots.map(slot=>)}
} {loadStatus === 'ready' && step === 2 && selectedSlot &&
{isPortuguese?'passo 3 / 3 · confirmar':'step 3 / 3 · confirm'}

{day?.dow}, {day?.month} {day?.day} · {selectedLabel}

setInfo({...info,name:e.target.value})} placeholder={isPortuguese?'seu nome':'your name'} style={inpStyle}/>setInfo({...info,email:e.target.value})} placeholder="email" style={inpStyle}/>
{error&&

{error}

}
} }
); } const inpStyle={fontFamily:'var(--font-sans)',fontWeight:400,fontSize:14,padding:'13px 14px',background:'var(--paper)',border:'1px solid var(--line-strong)',borderRadius:2,color:'var(--fg-1)',outline:'none',width:'100%',boxSizing:'border-box'}; window.BookingModal=BookingModal;