// PublicBooking // Pre-auth booking + payment landing for a single class. // Reached from the marketing website's "Book this class" button via // https://hit-zero.vercel.app/#book/ // // Flow: // 1. Read class_id from the hash on mount. // 2. Fetch the public class info (name, price, schedule, track, registration_open) // and the program payment posture (public_checkout_enabled). // 3. Show class details + a small booking form (athlete + parent). // 4. On submit: // - Always create a registration via /functions/v1/public-intake-v1 // (status='pending', payment_status='none'). // - If the gym has Square connected and public checkout is enabled, // render Square Web Payments after registration is recorded and // call /functions/v1/square-checkout-v1 with the registration_id. // - Otherwise show "you're on the list — MCA will email payment // instructions" so the parent isn't blocked by a missing // processor. // 5. The intake function also emails andrewemmelparttimepro@gmail.com // as a backup record (Resend, see public-intake-v1). // // No auth required. Uses the public anon key only (which is shipped in // every page of this PWA already). const _useS_pb = React.useState; const _useE_pb = React.useEffect; const _useR_pb = React.useRef; const PB_RESEND_NOTIFY = 'andrewemmelparttimepro@gmail.com'; function fmtCents(cents) { if (cents == null) return ''; const d = cents / 100; return Number.isInteger(d) ? `$${d}` : `$${d.toFixed(2)}`; } function unitFor(c) { if (!c) return ''; if (c.price_unit_label) return c.price_unit_label; switch (c.price_unit) { case 'per_month': return '/month'; case 'per_session': return '/session'; case 'per_session_per_month': return '/month per session'; case 'per_athlete': return '/athlete'; default: return ''; } } function pbFunctionsBase() { return (window.HZ_FN_BASE || window.HZ?.SUPABASE_URL || '').replace(/\/$/, ''); } function pbAnonKey() { return window.HZ_ANON_KEY || (window.HZ && window.HZ.SUPABASE_ANON_KEY) || ''; } function PublicBooking({ classId, onClose }) { const [klass, setKlass] = _useS_pb(null); const [program, setProgram] = _useS_pb(null); const [loadErr, setLoadErr] = _useS_pb(null); const [submitting, setSubmitting] = _useS_pb(false); const [submitErr, setSubmitErr] = _useS_pb(null); const [done, setDone] = _useS_pb(null); // { registrationId, willInvoice } const [form, setForm] = _useS_pb({ athleteName: '', athleteDob: '', parentName: '', parentEmail: '', parentPhone: '', notes: '', hp: '', }); const mountedAt = _useR_pb(Date.now()); _useE_pb(() => { let cancelled = false; // Direct REST fetch — bypasses any cached supabase-js client + any // service-worker layer. Adds a hard 8-second timeout so the page // can't hang indefinitely. async function restFetch(path) { const url = (window.HZ?.SUPABASE_URL || pbFunctionsBase()).replace(/\/$/, '') + '/rest/v1' + path; const anon = pbAnonKey(); const ctrl = new AbortController(); const t = setTimeout(() => ctrl.abort(), 8000); try { // No query-string cache buster — PostgREST tries to parse unknown // params as column filters. The no-store + no-cache headers below // are enough to bypass any HTTP cache, and the SW now skips // *.supabase.co entirely. const res = await fetch(url, { method: 'GET', headers: { apikey: anon, Authorization: `Bearer ${anon}`, 'Cache-Control': 'no-cache', 'Accept': 'application/json', }, cache: 'no-store', signal: ctrl.signal, }); if (!res.ok) { let msg = `Supabase ${res.status}`; try { const body = await res.text(); if (body) msg += ': ' + body.slice(0, 200); } catch {} throw new Error(msg); } return await res.json(); } finally { clearTimeout(t); } } (async () => { try { const classRows = await restFetch(`/public_program_classes?id=eq.${encodeURIComponent(classId)}&select=*&limit=1`); const c = Array.isArray(classRows) ? classRows[0] : classRows; if (!c) throw new Error('This class is no longer available.'); if (cancelled) return; setKlass(c); const progRows = await restFetch(`/program_public_directory?id=eq.${encodeURIComponent(c.program_id)}&select=id,slug,public_name,public_email,public_phone,address_line1,city,state,payment_provider,public_checkout_enabled,checkout_mode,public_payment_note&limit=1`); const p = Array.isArray(progRows) ? progRows[0] : progRows; if (cancelled) return; setProgram(p || null); } catch (err) { if (!cancelled) setLoadErr(err.name === 'AbortError' ? 'Connection timed out. Please refresh and try again.' : (err.message || 'Could not load this class.')); } })(); return () => { cancelled = true; }; }, [classId]); function set(k, v) { setForm(prev => ({ ...prev, [k]: v })); } async function handleSubmit(e) { e.preventDefault(); setSubmitErr(null); if (form.hp) { setDone({ registrationId: 'silent' }); return; } if (Date.now() - mountedAt.current < 1500) { setSubmitErr('Take a second to review and submit again.'); return; } if (!form.athleteName.trim()) { setSubmitErr('Athlete name is required.'); return; } if (!form.parentName.trim()) { setSubmitErr('Parent/guardian name is required.'); return; } const email = form.parentEmail.trim(); if (!email || !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) { setSubmitErr('Valid parent email is required.'); return; } setSubmitting(true); try { const fnBase = pbFunctionsBase(); const anon = pbAnonKey(); const res = await fetch(`${fnBase}/functions/v1/public-intake-v1`, { method: 'POST', headers: { apikey: anon, Authorization: `Bearer ${anon}`, 'Content-Type': 'application/json', }, body: JSON.stringify({ kind: 'registration', program_slug: program?.slug || klass?.program_slug || 'mca', class_id: classId, athlete_name: form.athleteName.trim(), athlete_dob: form.athleteDob || null, parent_name: form.parentName.trim(), parent_email: email, parent_phone: form.parentPhone.trim() || null, notes: form.notes.trim() || null, source: 'hit_zero_public_booking', }), }); const data = await res.json().catch(() => ({})); if (!res.ok || !data?.ok) { throw new Error(data?.message || 'Could not save your booking. Please try again.'); } setDone({ registrationId: data.registration_id, willInvoice: !program?.public_checkout_enabled, }); } catch (err) { setSubmitErr(err.message); } finally { setSubmitting(false); } } if (loadErr) { return (
This class is unavailable
We couldn't load that class.
{loadErr}
Back to programs
); } if (!klass) { return (
Loading class…
 ); } if (done) { return (
✓
You're on the list for {klass.name}.

{done.willInvoice ? <>MCA staff will email {form.parentEmail} within 48 hours with payment details and class info. : <>Pay below to lock in your spot.}

{done.willInvoice && PB_RESEND_NOTIFY && (

A copy of your booking was sent to MCA so nothing gets lost.

)}
More programs Back to website
); } const price = fmtCents(klass.price_cents); const unit = unitFor(klass); const closed = !klass.registration_open; const willInvoice = !program?.public_checkout_enabled; return (
{/* Class header */}
{klass.track_name ? `${klass.track_name} · ${program?.public_name || 'Magic City Athletics'}` : (program?.public_name || 'Booking')}
{klass.name}
{klass.schedule_summary && (
{klass.schedule_summary}
)}
{price} {unit && {unit}}
{willInvoice && (
Payment is handled by MCA outside the app for now — reserve below and you'll get an invoice within 48 hours.
)}
{/* Booking form or closed notice */} {closed ? (
Sign-ups for this class are closed.

Check back soon, or reach out for the next session.

Email the gym
) : (
Reserve your spot
set('athleteName', e.target.value)} required disabled={submitting}/> set('athleteDob', e.target.value)} disabled={submitting}/> set('parentName', e.target.value)} autoComplete="name" required disabled={submitting}/> set('parentEmail', e.target.value)} autoComplete="email" required disabled={submitting}/> set('parentPhone', e.target.value)} autoComplete="tel" disabled={submitting}/>