/* ============================================================ Tectus — Book a Demo scheduler (front-end flow). Timezone-aware date/time picker + form + validation + loading / success / error / retry states. Submits to a configurable backend endpoint (window.TECTUS_BOOKING_ENDPOINT); backend logic, Google Calendar + email are in backend/booking-backend.js. Internal notices → demo@tectusapp.com ============================================================ */ const { Button: ScButton, Field: ScField, Input: ScInput, Select: ScSelect, Textarea: ScTextarea } = window.TectusDesignSystem_c42b34; const DEMO_TYPES = ['Platform walkthrough', 'Client onboarding (Tectus)', 'Vendor onboarding (Tectus GO)', 'Enterprise / multi-site', 'Other']; /* Business hours offered, in US Eastern time (24h) */ const SLOT_HOURS = [9, 10, 11, 13, 14, 15, 16]; const BOOKING_KEY = 'tectus_booked_slots_v1'; const DEMO_TZ = 'America/Denver'; /* all demo times are Denver / Mountain Time */ /* ---- timezone helpers (fixed to US Eastern) ---- */ function localTZ() { return DEMO_TZ; } /* offset (minutes) of DEMO_TZ at a given instant */ function tzOffsetMin(date) { try { const dtf = new Intl.DateTimeFormat('en-US', { timeZone: DEMO_TZ, hourCycle: 'h23', year: 'numeric', month: '2-digit', day: '2-digit', hour: '2-digit', minute: '2-digit', second: '2-digit' }); const p = dtf.formatToParts(date).reduce((a, x) => { a[x.type] = x.value; return a; }, {}); const asUTC = Date.UTC(p.year, p.month - 1, p.day, p.hour, p.minute, p.second); return Math.round((asUTC - date.getTime()) / 60000); } catch (e) { return -300; } } function tzAbbr() { try { const parts = new Intl.DateTimeFormat('en-US', { timeZone: DEMO_TZ, timeZoneName: 'short' }).formatToParts(new Date()); return (parts.find((x) => x.type === 'timeZoneName') || {}).value || 'ET'; } catch (e) { return 'ET'; } } function fmtHour(h) { const am = h < 12; const hr = h % 12 === 0 ? 12 : h % 12; return `${hr}:00 ${am ? 'AM' : 'PM'}`; } function dayKey(d) { return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}-${String(d.getDate()).padStart(2, '0')}`; } function slotId(d, h) { return `${dayKey(d)}T${String(h).padStart(2, '0')}`; } /* next N selectable weekdays starting tomorrow */ function upcomingDays(n) { const out = []; const d = new Date(); d.setHours(0, 0, 0, 0); d.setDate(d.getDate() + 1); while (out.length < n) { const day = d.getDay(); if (day !== 0 && day !== 6) out.push(new Date(d)); d.setDate(d.getDate() + 1); } return out; } function readBooked() { try { return new Set(JSON.parse(localStorage.getItem(BOOKING_KEY) || '[]')); } catch (e) { return new Set(); } } function writeBooked(set) { try { localStorage.setItem(BOOKING_KEY, JSON.stringify([...set])); } catch (e) {} } /* ISO datetime for a day+hour interpreted as US Eastern wall-clock */ function isoWithOffset(d, h) { const off = tzOffsetMin(new Date(Date.UTC(d.getFullYear(), d.getMonth(), d.getDate(), h))); // ET offset (e.g. -240/-300) const sign = off >= 0 ? '+' : '-'; const a = Math.abs(off); const pad = (n) => String(n).padStart(2, '0'); return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}T${pad(h)}:00:00${sign}${pad(Math.floor(a / 60))}:${pad(a % 60)}`; } function validEmail(v) { return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(v); } function startOfMonth(d) { return new Date(d.getFullYear(), d.getMonth(), 1); } function sameDay(a, b) { return a && b && a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth() && a.getDate() === b.getDate(); } function isSelectable(d) { const t = new Date(); t.setHours(0, 0, 0, 0); const wd = d.getDay(); return d > t && wd !== 0 && wd !== 6; // future weekdays only } function DemoScheduler() { const today = React.useMemo(() => { const t = new Date(); t.setHours(0, 0, 0, 0); return t; }, []); const firstPick = React.useMemo(() => upcomingDays(1)[0], []); const [booked, setBooked] = useState(() => readBooked()); const [viewMonth, setViewMonth] = useState(() => startOfMonth(firstPick)); const [selDate, setSelDate] = useState(firstPick); const [hour, setHour] = useState(null); const [form, setForm] = useState({ name: '', email: '', company: '', phone: '', type: DEMO_TYPES[0], notes: '' }); const [errors, setErrors] = useState({}); const [status, setStatus] = useState('idle'); // idle | submitting | success | error const [errMsg, setErrMsg] = useState(''); const [result, setResult] = useState(null); const submitting = useRef(false); const tz = localTZ(); const abbr = tzAbbr(); const day = selDate; const set = (k, v) => { setForm((f) => ({ ...f, [k]: v })); if (errors[k]) setErrors((e) => ({ ...e, [k]: null })); }; function validate() { const e = {}; if (!form.name.trim()) e.name = 'Enter your full name'; if (!form.email.trim()) e.email = 'Enter your work email'; else if (!validEmail(form.email)) e.email = 'Enter a valid email'; if (!form.company.trim()) e.company = 'Enter your company'; if (hour == null) e.slot = 'Select a date and time'; setErrors(e); return Object.keys(e).length === 0; } async function submit(e) { if (e) e.preventDefault(); if (submitting.current) return; // guard double-click if (!validate()) return; const id = slotId(day, hour); // client-side double-booking guard (backend rechecks authoritatively) const fresh = readBooked(); if (fresh.has(id)) { setBooked(fresh); setHour(null); setErrors((x) => ({ ...x, slot: 'That time was just taken — please choose another.' })); return; } submitting.current = true; setStatus('submitting'); setErrMsg(''); const payload = { name: form.name.trim(), email: form.email.trim(), company: form.company.trim(), phone: form.phone.trim(), demoType: form.type, notes: form.notes.trim(), slotId: id, startISO: isoWithOffset(day, hour), endISO: isoWithOffset(day, hour + 1), timezone: tz, timezoneLabel: abbr, source: 'website:book-a-demo', internalEmail: 'demo@tectusapp.com', }; try { const endpoint = window.TECTUS_BOOKING_ENDPOINT || '/api/book-demo'; let ok = false, data = {}; const res = await fetch(endpoint, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(payload) }); data = await res.json().catch(() => ({})); if (res.status === 409) { const nb = readBooked(); nb.add(id); writeBooked(nb); setBooked(nb); setHour(null); setStatus('idle'); submitting.current = false; setErrors((x) => ({ ...x, slot: 'That time was just booked. Please pick another slot.' })); return; } ok = res.ok && data && data.status !== 'error'; if (!ok) throw new Error((data && data.message) || 'We could not complete the booking.'); const nb = readBooked(); nb.add(id); writeBooked(nb); setBooked(nb); setResult({ ...payload, ...data }); setStatus('success'); } catch (err) { setErrMsg(err.message || 'Something went wrong. Please try again.'); setStatus('error'); } finally { submitting.current = false; } } function reset() { setStatus('idle'); setHour(null); setResult(null); setErrMsg(''); setForm({ name: '', email: '', company: '', phone: '', type: DEMO_TYPES[0], notes: '' }); } /* ---------- SUCCESS ---------- */ if (status === 'success' && result) { const start = new Date(result.startISO); const dOpt = { weekday: 'long', month: 'long', day: 'numeric', year: 'numeric', timeZone: result.timezone }; const tOpt = { hour: 'numeric', minute: '2-digit', timeZone: result.timezone }; const dateStr = start.toLocaleDateString('en-US', dOpt); const timeStr = `${start.toLocaleTimeString('en-US', tOpt)} – ${new Date(result.endISO).toLocaleTimeString('en-US', tOpt)}`; return (

Your demo is booked

A calendar invite and confirmation email are on the way to {result.email}.

{[ ['calendar', 'Date', dateStr], ['clock', 'Time', `${timeStr}`], ['globe', 'Timezone', `US Eastern${result.timezoneLabel ? ' · ' + result.timezoneLabel : ''}`], ['briefcase', 'Demo type', result.demoType], ['building-2', 'Company', result.company], ].map(([ic, k, v]) => (
{k} {v}
))}
Reference {result.bookingId || result.slotId}
What happens next
Back to home }>Book another
); } /* ---------- SCHEDULER ---------- */ const slotErr = errors.slot; const monthLabel = viewMonth.toLocaleDateString('en-US', { month: 'long' }); const yearLabel = viewMonth.getFullYear(); // build calendar cells (leading blanks + days of month) const firstDow = viewMonth.getDay(); const daysInMonth = new Date(viewMonth.getFullYear(), viewMonth.getMonth() + 1, 0).getDate(); const cells = []; for (let i = 0; i < firstDow; i++) cells.push(null); for (let dnum = 1; dnum <= daysInMonth; dnum++) cells.push(new Date(viewMonth.getFullYear(), viewMonth.getMonth(), dnum)); const canPrev = startOfMonth(viewMonth) > startOfMonth(today); const dowLabels = ['SUN', 'MON', 'TUE', 'WED', 'THU', 'FRI', 'SAT']; return (
{/* calendar + time list */}
{/* calendar */}

{monthLabel} {yearLabel}

{dowLabels.map((l) =>
{l}
)}
{cells.map((d, i) => { if (!d) return
; const selectable = isSelectable(d); const full = selectable && SLOT_HOURS.every((h) => booked.has(slotId(d, h))); const on = sameDay(d, selDate); const usable = selectable && !full; return ( ); })}
{/* time list */}

{selDate.toLocaleDateString('en-US', { weekday: 'long', month: 'short', day: 'numeric' })}

Denver time{abbr ? ` · ${abbr}` : ''}

{SLOT_HOURS.map((h) => { const taken = booked.has(slotId(selDate, h)); const on = hour === h; return ( ); })}
{slotErr &&
{slotErr}
}
{/* form */}

Your details

set('name', e.target.value)} placeholder="Jordan Avery" /> set('email', e.target.value)} placeholder="you@company.com" /> set('company', e.target.value)} placeholder="Company" />
set('phone', e.target.value)} placeholder="(555) 000-0000" /> set('type', e.target.value)}>{DEMO_TYPES.map((o) => )}
set('notes', e.target.value)} placeholder="Team size, use case, sites…" /> {status === 'error' && (
{errMsg}
)}
{hour != null && (
{day.toLocaleDateString('en-US', { weekday: 'short', month: 'short', day: 'numeric' })} · {fmtHour(hour)}–{fmtHour(hour + 1)} · Denver{abbr ? ` (${abbr})` : ''}
)} }> {status === 'submitting' ? 'Booking…' : 'Confirm booking'}

You'll receive a confirmation email immediately after booking.

); } window.DemoScheduler = DemoScheduler;