// SignupPage.jsx — The Club Tennis checkout/signup flow // Mock checkout — collects parent + player info, waiver, payment details. // No real charge until Stripe is wired. On submit, shows a confirmation screen. const SignupPage = ({ onNavigate }) => { const TIERS = { dropin: { name: 'Drop In Session', price: 100, per: 'one session', recurring: false, requiresDate: true, accent: '#AAAAAA' }, monthly: { name: 'Monthly Membership', price: 720, per: 'per month', recurring: true, requiresDate: false, accent: '#FF2D8A' }, unlimited: { name: 'Unlimited Membership', price: 1120, per: 'per month', recurring: true, requiresDate: false, accent: '#39FF14' }, tournament: { name: 'Tournament Team', price: 500, per: 'per season', recurring: false, requiresDate: false, accent: '#FF2D8A' }, spain: { name: 'Spain Camp Deposit', price: 1500, per: 'one time (balance $3,000 invoiced later)', recurring: false, requiresDate: false, accent: '#39FF14' }, }; const getInitialTier = () => { try { const saved = sessionStorage.getItem('tct_signup_tier'); return saved && TIERS[saved] ? saved : 'monthly'; } catch { return 'monthly'; } }; const [tierKey, setTierKey] = React.useState(getInitialTier); const tier = TIERS[tierKey]; const [form, setForm] = React.useState({ parentFirst: '', parentLast: '', parentEmail: '', parentPhone: '', playerFirst: '', playerLast: '', playerAge: '', ustaRating: '', emergencyName: '', emergencyPhone: '', allergies: '', medical: '', sessionDate: '', waiverAccepted: false, cardName: '', cardNumber: '', cardExp: '', cardCvc: '', cardZip: '', }); const [submitted, setSubmitted] = React.useState(false); const [errors, setErrors] = React.useState({}); const update = (key, val) => setForm(f => ({ ...f, [key]: val })); // Tax (CA — Stripe Tax will determine; clinics typically not taxable, but UI shows estimate at 0%) const subtotal = tier.price; const tax = 0; const total = subtotal + tax; // Generate next 30 days of valid clinic dates (Mon–Sat, no Sundays) const upcomingClinicDates = React.useMemo(() => { const dates = []; const today = new Date(); for (let i = 1; i <= 45 && dates.length < 14; i++) { const d = new Date(today); d.setDate(today.getDate() + i); const day = d.getDay(); if (day === 0) continue; // skip Sunday const dayLabel = ['Sun','Mon','Tue','Wed','Thu','Fri','Sat'][day]; const sessionType = (day === 2 || day === 4 || day === 5) ? 'L5 USTA' : 'Regular'; const iso = d.toISOString().slice(0, 10); const display = `${dayLabel}, ${d.toLocaleDateString('en-US', { month: 'short', day: 'numeric' })} — ${sessionType}`; dates.push({ iso, display }); } return dates; }, []); const validate = () => { const e = {}; if (!form.parentFirst.trim()) e.parentFirst = 'Required'; if (!form.parentLast.trim()) e.parentLast = 'Required'; // RFC 5321 compliant email check if (!/^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)+$/.test(form.parentEmail)) e.parentEmail = 'Valid email required'; if (!/^\+?[\d\s\-().]{7,20}$/.test(form.parentPhone)) e.parentPhone = 'Valid phone required'; if (!form.playerFirst.trim()) e.playerFirst = 'Required'; if (!form.playerLast.trim()) e.playerLast = 'Required'; if (!form.playerAge || +form.playerAge < 5 || +form.playerAge > 19) e.playerAge = 'Age 5–19'; if (!form.emergencyName.trim()) e.emergencyName = 'Required'; if (!/^\+?[\d\s\-().]{7,20}$/.test(form.emergencyPhone)) e.emergencyPhone = 'Valid phone required'; if (tier.requiresDate && !form.sessionDate) e.sessionDate = 'Pick a session date'; if (!form.waiverAccepted) e.waiverAccepted = 'You must accept the waiver'; if (!form.cardName.trim()) e.cardName = 'Required'; if (form.cardNumber.replace(/\s/g, '').length < 13) e.cardNumber = 'Invalid card'; if (!/^\d{2}\/\d{2}$/.test(form.cardExp)) e.cardExp = 'MM/YY'; if (!/^\d{3,4}$/.test(form.cardCvc)) e.cardCvc = '3–4 digits'; if (!/^\d{5}(-\d{4})?$/.test(form.cardZip)) e.cardZip = 'Valid ZIP'; setErrors(e); return Object.keys(e).length === 0; }; const handleSubmit = (ev) => { ev.preventDefault(); if (!validate()) { // scroll to first error const firstErr = document.querySelector('[data-err="true"]'); if (firstErr) firstErr.scrollIntoView({ behavior: 'smooth', block: 'center' }); return; } setSubmitted(true); window.scrollTo(0, 0); }; // ----- Confirmation screen ----- if (submitted) { return (
✓
You're In

WELCOME TO THE CLUB.

We've sent a confirmation to {form.parentEmail} with your receipt and a magic link to access your account portal.

Order Summary
{tier.name} ${tier.price.toLocaleString()}.00
Player {form.playerFirst} {form.playerLast}
{tier.requiresDate && form.sessionDate && (
Session date {upcomingClinicDates.find(d => d.iso === form.sessionDate)?.display}
)} {tier.recurring && (
Next charge {(() => { const d = new Date(); d.setMonth(d.getMonth() + 1); return d.toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' }); })()}
)}
Demo Mode

No card was charged. This is a preview of the checkout flow. Real Stripe payments will go live once the account is connected.

); } // ----- Field component ----- // maxLength defaults keep individual fields ≤ what the server schema allows const FIELD_MAX = { parentFirst: 100, parentLast: 100, parentEmail: 254, parentPhone: 20, playerFirst: 100, playerLast: 100, playerAge: 2, ustaRating: 10, emergencyName: 100, emergencyPhone: 20, allergies: 500, cardName: 100, cardNumber: 19, cardExp: 5, cardCvc: 4, cardZip: 10, }; const Field = ({ label, name, type = 'text', placeholder, required, half, ...rest }) => (
update(name, e.target.value)} placeholder={placeholder} maxLength={FIELD_MAX[name]} style={{ width: '100%', background: '#0A0A0A', border: `1px solid ${errors[name] ? '#FF2D8A' : '#2A2A2A'}`, color: '#F5F5F5', fontSize: 15, padding: '12px 14px', borderRadius: 4, outline: 'none', fontFamily: "'Outfit',sans-serif", transition: 'border-color 120ms', }} onFocus={e => e.target.style.borderColor = errors[name] ? '#FF2D8A' : '#39FF14'} onBlur={e => e.target.style.borderColor = errors[name] ? '#FF2D8A' : '#2A2A2A'} {...rest} /> {errors[name] &&
{errors[name]}
}
); const SectionHeader = ({ num, title, sub }) => (
0{num}

{title}

{sub &&
{sub}
}
); return (
{/* Header */}
Sign Up

JOIN THE CLUB

One form. Card info goes through Stripe.

{/* LEFT: form */}
{/* Tier selector */}
{['dropin', 'monthly', 'unlimited'].map(k => ( ))}
{['tournament', 'spain'].map(k => ( ))}
{/* Date picker (drop-in only) */} {tier.requiresDate && ( <>
{errors.sessionDate &&
{errors.sessionDate}
}
)} {/* Player */}
{/* Parent */}
{/* Emergency + medical */}