// flows.jsx — Screen Sets 2, 3, 4, 5: Appointment / Class / Event / Membership // Each flow returns its checkout body; the screen wrapper (Phone/Desktop) provides // the studio header, scroll container, and sticky bottom CTA. const { useState: useStateF, useMemo: useMemoF } = React; // ──────────────────────────────────────────────────────────────── // Detail row used inside summary cards // ──────────────────────────────────────────────────────────────── function DetailRow({ icon, label, value, accent, brand }) { return (
{icon}
{label}
{value}
{accent}
); } // Tiny lucide-ish icons const ICONS = { calendar: , clock: , user: , pin: , edit: , spark: , }; // ──────────────────────────────────────────────────────────────── // ClassHero — concise "what you're booking" panel. // Sits visually apart from the action sections below: tinted // surface, large class photo, instructor avatar inline. // ──────────────────────────────────────────────────────────────── function ClassHero({ brand, c, tweaks, desktop }) { const photo = c.image || brand.classImage; const avatar = c.instructorImage || brand.instructorImage; if (desktop) { // Split-card: smaller photo on left, details panel on right return (
Class
{c.title}
From
${c.pricing[0].price}
{!avatar && c.instructor.split(' ').map(s => s[0]).slice(0,2).join('')}
With
{c.instructor}
{ICONS.calendar} {c.date} · {c.time} {ICONS.clock} {c.duration} {ICONS.pin} {c.location}
); } // Mobile: stacked layout — full-bleed 16:9 photo with title overlay return (
Class
{c.title}
{!avatar && c.instructor.split(' ').map(s => s[0]).slice(0,2).join('')}
With
{c.instructor}
From
${c.pricing[0].price}
{ICONS.calendar} {c.date} · {c.time} {ICONS.clock} {c.duration} {ICONS.pin} {c.location}
); } // ──────────────────────────────────────────────────────────────── // SignInCallout — prominent reminder for returning clients with // an existing membership / class pack to sign in instead of // paying again. // ──────────────────────────────────────────────────────────────── function SignInCallout({ brand }) { return (
Already have a membership or class pack?
Sign in to use credits — don't pay twice.
); } // ──────────────────────────────────────────────────────────────── // SectionCard — wraps a numbered (or unnumbered) form section in // a white card with a header. Used to group all the controls of // one logical step into a single visual container. // ──────────────────────────────────────────────────────────────── function SectionCard({ brand, step, title, children }) { return (
{step != null && (
{step}
)}
{title}
{children}
); } // ──────────────────────────────────────────────────────────────── // WaiverExpandable — collapsible liability waiver inside the // Payment card. Click the header to expand the full text; // a checkbox below requires explicit acceptance. // ──────────────────────────────────────────────────────────────── function WaiverExpandable({ brand, checked, onChange }) { const [open, setOpen] = useStateF(false); return (
{open && (

I, the undersigned, acknowledge that participation in the activities offered by {brand.name} carries inherent risks of physical injury. I confirm that I am physically able to participate and have disclosed any conditions, injuries, or pregnancy that may affect my safe practice.

I voluntarily assume all risk of injury, loss, or damage to person or property arising from participation, including (but not limited to) strains, sprains, falls, and contact with equipment. I agree to follow all instructor and studio guidance.

I release {brand.name}, its instructors, employees, and contractors from any and all claims, demands, and causes of action arising out of my participation, except where caused by gross negligence.

This waiver is binding upon me, my heirs, and my legal representatives. I have read this waiver in full and understand its terms.

)}
I've read and agree to the liability waiver. I'm participating at my own risk and have no conditions that prevent safe practice.
); } // ──────────────────────────────────────────────────────────────── // TierPicker — selectable price-option cards (drop-in/pack/membership) // ──────────────────────────────────────────────────────────────── function TierPicker({ brand, options, value, onChange }) { return (
{options.map(opt => { const active = value === opt.id; return ( ); })}
); } // ──────────────────────────────────────────────────────────────── // Customer info form chunk — reused across all flows // ──────────────────────────────────────────────────────────────── function CustomerInfo({ brand, returning, data, set }) { return ( <> set({ ...data, name: v })} autoComplete="name" /> set({ ...data, email: v })} type="email" autoComplete="email" /> set({ ...data, phone: v })} type="tel" autoComplete="tel" /> ); } // ──────────────────────────────────────────────────────────────── // Screen Set 2 — Appointment guest checkout // ──────────────────────────────────────────────────────────────── function AppointmentFlow({ brand, tweaks, customer, setCustomer, onSubmit }) { const a = brand.appointment; const [tierId, setTierId] = useStateF(tweaks.loggedIn ? 'membership-credit' : 'single'); const tier = a.pricing.find(t => t.id === tierId) || a.pricing[0]; const [notes, setNotes] = useStateF(''); const [waiverChecked, setWaiverChecked] = useStateF(false); const [policyChecked, setPolicyChecked] = useStateF(false); const [whoFor, setWhoFor] = useStateF({ self: true, family: [], guests: [] }); const [savePay, setSavePay] = useStateF(!tweaks.loggedIn); const [discount, setDiscount] = useStateF(0); const baseTotal = tier.price; const total = Math.max(0, baseTotal - discount); return ( <>
Appointment
{a.title}
from ${a.pricing[0].price}
{ICONS.edit} Edit } />
Who's this for? Choose how to pay {tweaks.loggedIn ? ( o.id)} /> ) : ( )} {tier.sessions > 1 && !tweaks.loggedIn && (
One credit applied to today's session. {tier.sessions - 1} remaining for future bookings.
)} Your details {tweaks.waiver && ( <> Studio waiver I've read and agree to the liability waiver. I'm participating at my own risk and have no conditions that prevent safe practice. )} {tweaks.cancelFee && (
)} Payment setDiscount(p.amt)} onApplyGift={g => setDiscount(g.amt)} /> 1 ? `Buy ${tier.label.toLowerCase()} & book` : 'Book and pay'} sub={`$${total} · ${a.time} on ${a.date}`} onClick={() => onSubmit({ kind: 'appointment', total, item: a, tier, whoFor, savePay })} disabled={(tweaks.waiver && !waiverChecked) || (tweaks.cancelFee && !policyChecked)} /> ); } // ──────────────────────────────────────────────────────────────── // Screen Set 3 — Class guest checkout // ──────────────────────────────────────────────────────────────── function ClassFlow({ brand, tweaks, customer, setCustomer, onSubmit, desktop }) { const c = brand.class; const isWaitlist = tweaks.capacity === 'waitlist'; const [tierId, setTierId] = useStateF(tweaks.loggedIn ? 'membership-credit' : 'dropin'); const tier = c.pricing.find(t => t.id === tierId) || c.pricing[0]; const [addons, setAddons] = useStateF({ socks: false, water: false }); const [whoFor, setWhoFor] = useStateF({ self: true, family: [], guests: [] }); const [policyChecked, setPolicyChecked] = useStateF(false); const [savePay, setSavePay] = useStateF(!tweaks.loggedIn); const [discount, setDiscount] = useStateF(0); const addonItems = [ { id: 'socks', label: 'Grip socks', sub: 'Required for first class', price: 14 }, { id: 'water', label: 'Spring water', sub: 'Glass bottle, refundable', price: 4 }, ]; const addonTotal = addonItems.reduce((s, x) => s + (addons[x.id] ? x.price : 0), 0); const total = Math.max(0, tier.price + addonTotal - discount); const loggedInOptions = [ { id: 'membership-credit', label: 'Use membership credit', sub: '6 credits left · unlimited monthly active', cost: 'Free' }, { id: 'dropin', label: 'Pay drop-in', sub: 'Save your credits for later', cost: `$${c.pricing[0].price}` }, ]; const [waiverChecked, setWaiverChecked] = useStateF(false); return ( <> {tweaks.loggedIn && ( )} {!isWaitlist && ( <> {!tweaks.loggedIn && } {tweaks.loggedIn ? ( ) : ( )} {tier.sessions > 1 && !tweaks.loggedIn && (
One credit applied to this class. {tier.sessions - 1} remaining for future bookings.
)} {tier.recurring && !tweaks.loggedIn && (
Membership starts today and includes this class. Pause or cancel any time, no fees.
)} {tweaks.addons && (
Add to your booking Optional
{addonItems.map(item => ( ))}
)}
setDiscount(p.amt)} onApplyGift={g => setDiscount(g.amt)} /> {tweaks.waiver && ( )} {tweaks.cancelFee && (
)} )} {isWaitlist && (
)} 1 ? `Buy ${tier.label.toLowerCase()} & book` : 'Book class'))} sub={isWaitlist ? `${c.title} · ${c.time}` : `$${total}${tier.recurring ? '/mo' : ''} · ${c.title}`} onClick={() => onSubmit({ kind: 'class', total, item: c, isWaitlist, tier })} disabled={!isWaitlist && ((tweaks.waiver && !waiverChecked) || (tweaks.cancelFee && !policyChecked))} /> ); } // ──────────────────────────────────────────────────────────────── // Screen Set 4 — Event / ticket purchase // ──────────────────────────────────────────────────────────────── function EventFlow({ brand, tweaks, customer, setCustomer, onSubmit }) { const e = brand.event; const [tier, setTier] = useStateF('member'); const [qty, setQty] = useStateF(1); const tiers = [ { id: 'member', label: 'Members', sub: '$5 off · ID at door', price: e.price - 5, available: 12 }, { id: 'standard', label: 'Standard', sub: 'Open to everyone', price: e.price, available: 28 }, ]; const selected = tiers.find(t => t.id === tier); const total = selected.price * qty; return ( <>
Event
{e.title}
{e.subtitle}
Choose tickets
{tiers.map(t => ( ))}
Quantity
Up to 6 per order
Your details {qty > 1 && (
Each guest gets their own QR ticket via email · names optional at the door.
)} Payment 1 ? `${qty} tickets` : 'ticket'}`} sub={`$${total} total`} onClick={() => onSubmit({ kind: 'event', total, item: e, qty, tier: selected.label })} /> ); } function Stepper({ brand, value, setValue, min=1, max=99 }) { const btn = { width: 32, height: 32, borderRadius: 8, border: `1px solid ${brand.border}`, background: brand.surface, color: brand.ink, fontSize: 16, fontWeight: 600, display: 'grid', placeItems: 'center', }; return (
{value}
); } // ──────────────────────────────────────────────────────────────── // Screen Set 5 — Membership (recurring) checkout // ──────────────────────────────────────────────────────────────── function MembershipFlow({ brand, tweaks, customer, setCustomer, onSubmit }) { const m = brand.membership; const [autoRenew, setAutoRenew] = useStateF(true); const [promoOpen, setPromoOpen] = useStateF(false); const [promo, setPromo] = useStateF(''); const total = m.price; return ( <>
Membership
{m.title}
{m.subtitle}
${m.price}
{m.cadence}
    {[ 'Unlimited classes, all instructors', '10% off privates and workshops', 'Pause or cancel any time, no fees', ].map(b => (
  • {b}
    • ))}
Auto-renew every 4 weeks
Pause or cancel from your profile, any time. Next charge on Tue, June 11.
Your details Payment {!promoOpen && ( )} {promoOpen && (
)} onSubmit({ kind: 'membership', total, item: m, autoRenew })} /> ); } // ──────────────────────────────────────────────────────────────── // Screen Set 5 — Class pack (non-recurring) checkout // ──────────────────────────────────────────────────────────────── function PackFlow({ brand, tweaks, customer, setCustomer, onSubmit }) { const packs = brand.packs || []; // Single-option: customer arrived via direct link with a specific pack pre-selected. // We default to the 10-class pack (most popular / common deep link target). const pack = packs.find(p => p.id === 'pack10') || packs[1] || packs[0]; const [promoOpen, setPromoOpen] = useStateF(false); const [promo, setPromo] = useStateF(''); if (!pack) return null; const total = pack.price; return ( <>
{pack.badge || 'Class pack'}
{pack.label}
{pack.sub}
${pack.price}
{pack.perCredit &&
${pack.perCredit}/class
}
One-time charge · no subscription, no auto-renew.
Your details Payment {!promoOpen && ( )} {promoOpen && (
)} onSubmit({ kind: 'pack', total, item: { ...pack, brandName: brand.name } })} /> ); } // ──────────────────────────────────────────────────────────────── function Toggle({ brand, on, setOn }) { return ( ); } // ──────────────────────────────────────────────────────────────── // Sticky bottom CTA — pinned to mobile screen base // ──────────────────────────────────────────────────────────────── function StickyCta({ brand, label, sub, onClick, disabled, loading }) { return (
{label}
); } // ──────────────────────────────────────────────────────────────── // Disclaimer (terms / cancellation) // ──────────────────────────────────────────────────────────────── function Disclaimer({ brand, membership }) { return (
By continuing you agree to {brand.name}'s policies {membership ? '. Memberships renew automatically until canceled.' : ' and our 24-hour cancellation policy.'}
); } // helper function returning(c) { return c && c.email && c.name; } Object.assign(window, { AppointmentFlow, ClassFlow, EventFlow, MembershipFlow, PackFlow, StickyCta, Toggle, Stepper, DetailRow, ICONS, TierPicker, CustomerInfo, SignInCallout, WaiverExpandable, });