{loop.map(function (item, i) { return ( {item} ); })}

); }; }, []); function dateParts(iso) { const d = new Date(iso + 'T12:00:00'); return { weekday: d.toLocaleDateString('en-US', { weekday: 'short' }), dayNum: String(d.getDate()), monthShort: d.toLocaleDateString('en-US', { month: 'short' }), full: d.toLocaleDateString('en-US', { weekday: 'long', month: 'long', day: 'numeric' }) }; } // Parse a "9:30 AM" style slot label into a 24h decimal hour (9.5). function slotTo24h(slot) { const parts = String(slot).trim().split(' '); const hm = parts[0].split(':'); let h = parseInt(hm[0], 10) || 0; const m = parseInt(hm[1], 10) || 0; const ap = (parts[1] || '').toUpperCase(); if (ap === 'PM' && h !== 12) h = h + 12; if (ap === 'AM' && h === 12) h = 0; return h + m / 60; } const [logoFailed, setLogoFailed] = useState(false); function renderWordmark() { if (logoFailed) { return ( MOONSHOT ); } return (

); } // Quiz-style progress: tracking label row + red→orange→yellow gradient fill. const ProgressBar = useMemo(function () { return function ProgressBar(props) { return (

{props.label} {props.pct + '%'}

); }; }, []); const BackButton = useMemo(function () { return function BackButton(props) { return ( ); }; }, []); const Skeleton = useMemo(function () { return function Skeleton(props) { return

; }; }, []); const ButtonSpinner = useMemo(function () { return function ButtonSpinner() { return ; }; }, []); const ErrorNote = useMemo(function () { return function ErrorNote(props) { return (

{props.message}

{props.onRetry ? ( ) : null}

); }; }, []); const SummaryRow = useMemo(function () { return function SummaryRow(props) { return (

{props.label} {props.value}

); }; }, []); const SuccessCheck = useMemo(function () { return function SuccessCheck() { return (

); }; }, []); const CtaArrow = useMemo(function () { return function CtaArrow() { return ; }; }, []); // The signature quiz CTA: red→orange gradient pill + glow + sheen sweep. const CtaButton = useMemo(function () { return function CtaButton(props) { return ( ); }; }, []); // Quiz-style option card: 7x7 letter circle that flips to a red→orange // gradient check once chosen. const DaypartCard = useMemo(function () { return function DaypartCard(props) { return ( ); }; }, []); // Animate once per step entry — parent re-renders must not replay ms-q-in. const StepEnter = useMemo(function () { return function StepEnter(props) { const ref = useRef(null); useEffect(function () { var el = ref.current; if (!el) return; el.style.animation = 'none'; void el.offsetHeight; el.style.animation = 'ms-q-in 500ms cubic-bezier(0.16,1,0.3,1) both'; }, [props.stepKey]); return (

{props.children}

); }; }, []); function contactField(name) { if (!contactCaptureFlowEnabled()) return null; var fields = CONTACT_CAPTURE.fields || {}; var f = fields[name]; if (!f || !f.enabled) return null; return f; } function totalFlowSteps() { return contactCaptureFlowEnabled() ? 5 : 4; } function flowProgressPct(step, done) { if (done) return 100; var total = totalFlowSteps(); return Math.round(((step - 1) / total) * 100 + (100 / total) / 2); } function classicBookingSteps() { return contactCaptureFlowEnabled() ? 4 : 3; } function classicStepPct(stepNum, total) { return Math.round(((stepNum - 1) / total) * 100 + (100 / total) / 2); } function renderContactInput(opts) { return ( {opts.label}{opts.required ? ' *' : ''} ); } // ─── Flow UI (authored in Flow Scheduler — edit there, then re-export) ─── const [screen, setScreen] = useState('steps'); // steps | done const [step, setStep] = useState(1); // 1 daypart, 2 day, 3 time, 4 confirm const [daypart, setDaypart] = useState(null); // 'morning' | 'afternoon' const [slotWait, setSlotWait] = useState(false); const [confirming, setConfirming] = useState(false); const [confirmError, setConfirmError] = useState(null); const [booked, setBooked] = useState(null); const confirmOnceRef = useRef(false); // ─── Durable flow-state restore (survives FlowOS Page remount; done is sticky) ─── useEffect(function () { if (booked) msFlowSaveState({ done: true, booked: booked }); }, [booked]); var msPersistDirtyRef = useRef(false); useEffect(function () { if (!msPersistDirtyRef.current) { msPersistDirtyRef.current = true; return; } msFlowSaveState({ step: step, daypart: daypart }); }, [step, daypart]); var msFlowRestoreRef = useRef(false); useEffect(function () { if (msFlowRestoreRef.current) return; msFlowRestoreRef.current = true; var s = msFlowReadState(); if (!s) return; if (s.done) { if (s.booked) setBooked(s.booked); setScreen('done'); return; } if (s.daypart) setDaypart(s.daypart); if (typeof s.step === 'number' && s.step > 1) setStep(s.step); }, []); const [contactEmail, setContactEmail] = useState(''); const [contactFirst, setContactFirst] = useState(''); const [contactLast, setContactLast] = useState(''); const [contactPhone, setContactPhone] = useState(''); const [contactError, setContactError] = useState(null); const days = availableDays || []; const timeSlots = availableSlots || []; const hasContactStep = contactCaptureFlowEnabled(); const daypartStep = hasContactStep ? 2 : 1; const dayStep = hasContactStep ? 3 : 2; const timeStep = hasContactStep ? 4 : 3; const confirmStep = hasContactStep ? 5 : 4; useEffect(function () { if (!slotWait) return; if (timeSlots.length > 0) { setSlotWait(false); return; } const t = setTimeout(function () { setSlotWait(false); }, 1600); return function () { clearTimeout(t); }; }, [slotWait, timeSlots.length]); const filteredSlots = useMemo(function () { if (!daypart) return timeSlots; const out = []; for (let i = 0; i < timeSlots.length; i++) { const h = slotTo24h(timeSlots[i]); if (daypart === 'morning' ? h < 12 : h >= 12) out.push(timeSlots[i]); } return out; }, [timeSlots, daypart]); // If the chosen daypart has nothing on this day, gracefully show everything. const showAll = filteredSlots.length === 0 && timeSlots.length > 0; const displaySlots = showAll ? timeSlots : filteredSlots; function flowSessionKey(suffix) { var cfgId = ''; try { if (typeof NYLAS_ACCOUNT !== 'undefined' && NYLAS_ACCOUNT && NYLAS_ACCOUNT.configurationId) { cfgId = NYLAS_ACCOUNT.configurationId; } } catch (e) {} return 'ms_flow_' + (cfgId || 'contact') + '_' + suffix; } function hydrateContactFields() { if (!contactCaptureFlowEnabled()) return; if (contactEmail.trim()) return; try { if (flowContact) { var src = flowContact.contact || flowContact.selections; if (src) { if (src.email) setContactEmail(String(src.email)); if (src.firstName || src.first_name) setContactFirst(String(src.firstName || src.first_name || '')); if (src.lastName || src.last_name) setContactLast(String(src.lastName || src.last_name || '')); if (src.phone) setContactPhone(String(src.phone)); } } var raw = sessionStorage.getItem(flowSessionKey('contact')); if (raw) { var saved = JSON.parse(raw); if (saved.email) setContactEmail(saved.email); if (saved.firstName) setContactFirst(saved.firstName); if (saved.lastName) setContactLast(saved.lastName || ''); if (saved.phone) setContactPhone(saved.phone || ''); } } catch (e) {} } function contactValid() { var emailF = contactField('email'); var firstF = contactField('first_name'); var lastF = contactField('last_name'); var phoneF = contactField('phone'); if (emailF && emailF.required && !contactEmail.trim()) return false; if (firstF && firstF.required && !contactFirst.trim()) return false; if (lastF && lastF.required && !contactLast.trim()) return false; if (phoneF && phoneF.required && !contactPhone.trim()) return false; if (emailF && contactEmail.trim() && contactEmail.indexOf('@') < 1) return false; return true; } function handleContactContinue() { if (!contactValid()) { setContactError('Please fill in the required fields.'); return; } setContactError(null); var payload = { email: contactEmail.trim(), firstName: contactFirst.trim(), lastName: contactLast.trim(), }; if (contactPhone.trim()) payload.phone = contactPhone.trim(); if (setGuestContact) { setGuestContact({ email: payload.email, firstName: payload.firstName, lastName: payload.lastName, phone: payload.phone || '', }); } try { sessionStorage.setItem(flowSessionKey('contact'), JSON.stringify(payload)); sessionStorage.setItem(flowSessionKey('step'), String(daypartStep)); } catch (e) {} setStep(daypartStep); } useEffect(function () { hydrateContactFields(); }, []); function pickDaypart(value) { setDaypart(value); setStep(dayStep); } function pickDay(day) { setSelectedDay(day); setSlotWait(true); setStep(timeStep); } function pickSlot(slot) { setSelectedSlot(slot); setStep(confirmStep); } function retrySlots() { if (selectedDay) { setSelectedDay(selectedDay); setSlotWait(true); } } async function handleConfirm() { if (confirmOnceRef.current) return; confirmOnceRef.current = true; setConfirming(true); setConfirmError(null); let res = null; try { res = await confirmBooking(); } catch (err) { res = { success: false, error: 'Something went wrong on our end.' }; } setConfirming(false); if (res && res.success) { const payload = { bookingId: res.bookingId, selectedDay: selectedDay, selectedSlot: selectedSlot }; setBooked(payload); if (onSubmit) onSubmit(payload); setScreen('done'); } else { setConfirmError((res && res.error) || 'That did not go through. Please try again.'); confirmOnceRef.current = false; } } const slotsLoading = schedIsLoading || slotWait; const pct = flowProgressPct(step, screen === 'done'); const selDay = selectedDay; const selSlot = selectedSlot; return (

{renderWordmark()}

{screen === 'steps' && hasContactStep && step === 1 ? (

Before we book

Who should we send the invite to?

Takes 10 seconds — then you pick your time.

{contactField('email') ? ( renderContactInput({ label: 'Email', type: 'email', required: contactField('email').required, value: contactEmail, onChange: setContactEmail, placeholder: 'you@company.com' }) ) : null} {contactField('first_name') ? ( renderContactInput({ label: 'First name', required: contactField('first_name').required, value: contactFirst, onChange: setContactFirst, placeholder: 'Jane' }) ) : null} {contactField('last_name') ? ( renderContactInput({ label: 'Last name', required: contactField('last_name').required, value: contactLast, onChange: setContactLast, placeholder: 'Smith' }) ) : null} {contactField('phone') ? ( renderContactInput({ label: 'Phone', type: 'tel', required: contactField('phone').required, value: contactPhone, onChange: setContactPhone, placeholder: '(555) 555-5555' }) ) : null}

{contactError || flowContact.error ? (

) : null} Continue

) : null} {screen === 'steps' && step === daypartStep ? (

Book your call

Morning or afternoon?

When are you at your sharpest? That's when you should meet Brad.

) : null} {screen === 'steps' && step === dayStep ? (

Book your call

Good choice. Now pick a day —

Swipe through. Any of these work.

{schedError ?

: null} {schedIsLoading && days.length === 0 ? (

{[0, 1, 2, 3, 4].map(function (i) { return ; })}

) : days.length === 0 ? ( schedError ? null : (

No open days right now

Brad's calendar is packed. Check back soon.

) ) : (

{days.map(function (day) { const p = dateParts(day); const selected = selDay === day; return ( ); })}

)} ) : null} {screen === 'steps' && step === timeStep ? (

Book your call

{(daypart === 'morning' ? 'Morning it is. ' : 'Afternoon it is. ') + 'Pick your time —'}

{selDay ?

{dateParts(selDay).full} · 30 minutes

: null} {schedError ? (

) : slotsLoading ? (

{[0, 1, 2, 3, 4, 5].map(function (i) { return ; })}

) : timeSlots.length === 0 ? (

That day just filled up

Happens to the best of them. Grab another one.

) : (

{showAll ? (

{'No ' + daypart + ' times that day — here is everything:'}

) : null}

{displaySlots.map(function (slot) { return ( ); })}

)} ) : null} {screen === 'steps' && step === confirmStep ? (

Last step

Make it official —

{confirmError ?

: null} {schedError && !confirmError ?

: null}

{confirming ? : null} {confirming ? 'Locking it in…' : 'Lock it in'} {confirming ? null : }

Confirmation and Meet link hit your inbox right away.

) : null} {screen === 'done' ? (

Confirmed

Locked in.

{booked && booked.selectedDay ? dateParts(booked.selectedDay).full : ''} {booked && booked.selectedSlot ? ' · ' + booked.selectedSlot : ''}

That's momentum. Check your inbox — Brad will see you then.

30 min · Video call · Calendar invite on the way

) : null}

); } export default Page;