// Signup — 3-step stepper. State lives in parent App; we receive ctx + setCtx + go. const STEPS = ['DETAILS', 'WAIVER', 'CONFIRM']; const Stepper = ({ step }) => (
{STEPS.map((s, i) => (
{i < step ? '✓' : i + 1}
{s}
{i < STEPS.length - 1 &&
} ))}
); const calcAge = (mmddyyyy) => { const m = mmddyyyy?.match(/^(\d{2})\/(\d{2})\/(\d{4})$/); if (!m) return null; const [_, mm, dd, yyyy] = m; const bd = new Date(+yyyy, +mm - 1, +dd); // Validate the date didn't roll over (e.g. "02/30/2000" parses to March 2) if (bd.getFullYear() !== +yyyy || bd.getMonth() !== +mm - 1 || bd.getDate() !== +dd) return null; const today = new Date(2026, 4, 7); // local-midnight May 7, 2026 — avoids ISO-string UTC parsing let age = today.getFullYear() - bd.getFullYear(); const md = today.getMonth() - bd.getMonth(); if (md < 0 || (md === 0 && today.getDate() < bd.getDate())) age--; return age; }; // Field-level validators. All return true when the field is OK to submit. // Empty values short-circuit to false so they're not "valid" until typed. const isValidEmail = (s) => /^[^\s@]+@[^\s@]+\.[^\s@]{2,}$/.test((s || '').trim()); const isValidPhone = (s) => (s || '').replace(/\D/g, '').length === 10; const isValidBirthday = (s) => { const age = calcAge(s); return age !== null && age >= 14 && age <= 80; }; const SignupDetails = ({ ctx, setCtx, go, event }) => { const age = calcAge(ctx.birthday); const isMinor = age !== null && age < 18; const careers = Array.isArray(ctx.careers) ? ctx.careers : []; const toggleCareer = (code) => { setCtx(prev => { const list = Array.isArray(prev.careers) ? prev.careers : []; return { careers: list.includes(code) ? list.filter(c => c !== code) : [...list, code] }; }); }; // Per-field validity flags also drive inline error captions on the inputs. const emailOk = isValidEmail(ctx.email); const phoneOk = isValidPhone(ctx.phone); const birthdayOk = isValidBirthday(ctx.birthday); const guardianEmailOk = isValidEmail(ctx.guardianEmail); const guardianPhoneOk = !ctx.guardianPhone || isValidPhone(ctx.guardianPhone); // optional const canContinue = !!( ctx.first?.trim() && ctx.last?.trim() && emailOk && phoneOk && birthdayOk && careers.length > 0 && (!isMinor || (ctx.guardianName?.trim() && guardianEmailOk && guardianPhoneOk)) ); return (
// STEP 01 OF 03 Your details. We never share your information. * = required.
setCtx({ first: v })} /> setCtx({ last: v })} /> setCtx({ email: v })} type="email" error={ctx.email && !emailOk ? 'INVALID' : undefined} />
setCtx({ birthday: formatDate(v) })} ph="MM/DD/YYYY" error={ctx.birthday && !birthdayOk ? 'CHECK DATE / AGE 14–80' : undefined} /> setCtx({ phone: formatPhone(v) })} ph="(555) 555-5555" error={ctx.phone && !phoneOk ? 'INCOMPLETE' : undefined} />
{isMinor && (
// PARTICIPANT IS UNDER 18 · GUARDIAN INFO REQUIRED A parent or guardian must co-sign the waiver. They'll receive a copy at the email below.
setCtx({ guardianName: v })} /> setCtx({ guardianEmail: v })} error={ctx.guardianEmail && !guardianEmailOk ? 'INVALID' : undefined} /> setCtx({ guardianPhone: formatPhone(v) })} ph="(555) 555-5555" error={ctx.guardianPhone && !guardianPhoneOk ? 'INCOMPLETE' : undefined} />
)}
CAREER INTEREST · pick all that apply{careers.length > 0 ? ` · ${careers.length} selected` : ''}
{CAREER_FIELDS.map(c => { const active = careers.includes(c.code); return ( ); })}
go('signup', { step: 1 })}>Continue to waiver →
); }; const Signup = ({ ctx, setCtx, go, step = 0 }) => { const [allEvents] = useEventsStore(); const active = allEvents.filter(e => !e.archived); const event = allEvents.find(e => e.code === ctx.eventCode) || active[active.length - 1] || allEvents[0]; return (
{/* Header */}
SECURE FORM · SSL
{/* Event banner */}
// SIGNING UP FOR {event.city}, {event.state} · {event.date}
{event.venue.toUpperCase()}
{/* Stepper */}
{/* Step content */} {step === 0 && } {step === 1 && } {step === 2 && }
); }; window.Signup = Signup; window.calcAge = calcAge; window.isValidEmail = isValidEmail; window.isValidPhone = isValidPhone; window.isValidBirthday = isValidBirthday;