{allowFamily && (
{
const next = !showAddFam;
setShowAddFam(next);
if (!next) {
setAddFams([{ name: '', dob: '', email: '', phone: '', waiverChecked: false, waiverOpen: false, smsTransactional: true, smsMarketing: true }]);
update({ addedFamily: [] });
}
}}>
{loggedIn ? '+ new family member' : '+ family member'}
)}
{allowGuest && (
{
const next = !showGuest;
setShowGuest(next);
if (!next) { setGuestList([{ name: '', email: '' }]); update({ guests: [] }); }
}}>
+ bring a guest
)}
)}
{/* Self details — booker contact info + birthdate + waiver, shown when
the account holder is booking for themselves and they aren't already
on file. Name/email/phone live here (not in the payment step) so
they're tied to the participant rather than the cardholder — useful
when someone else is paying. */}
{v.self && !loggedIn && (
We'll save them — and their signed waiver — to your account so you can book them again with one tap next time.
+ add another family member
)}
{/* Guest inline form — guests sign their waiver at check-in, so we
collect birthdate + contact info but not a waiver signature. */}
{showGuest && allowGuest && (
Their waiver will be requested at check-in. They won't be added to your account, but will have their own account for future bookings.
+ add another guest
)}
);
}
// Small section header used above the per-person field groups inside WhoFor.
function PersonHeader({ brand, label, onRemove }) {
return (
{label}
{onRemove && (
)}
);
}
// Compact per-person waiver row. Header + checkbox row are always visible;
// the legal copy expands in a small scrolling area when the user taps "Read".
// Designed to stack — multiple attendees collapse cleanly side by side.
function PersonWaiver({ brand, brandName, label, checked, onChange, open, setOpen }) {
return (
{open && (
I acknowledge that participation in the activities offered by {brandName} carries inherent risks of physical injury. I confirm that the participant is physically able to participate and have disclosed any conditions that may affect safe practice.
I voluntarily assume all risk of injury, loss, or damage to person or property arising from participation. I release {brandName}, its instructors, employees, and contractors from any and all claims arising out of participation, except where caused by gross negligence.
This waiver is binding upon the participant, their heirs, and their legal representatives.
)}
I've read and agree to the liability waiver on this participant's behalf.
);
}
// Two-row SMS opt-in matching the look used in the booking stepper's payment
// step. Rendered under the phone number of any participant whose contact
// info we're collecting (self always, family rows only when the dob makes
// them an adult).
function SmsConsentRows({ brand, transactional, setTransactional, marketing, setMarketing }) {
const row = (checked, onChange, label) => (
);
return (
{row(transactional, setTransactional, 'I agree to receive transactional SMS messages (class/appt reminders + confirmations).')}
{row(marketing, setMarketing, 'I agree to receive other SMS communication from the studio (news, promotions) and can opt-out at any time.')}
);
}
// Re-uses the same checkmark icon used by other compact controls.
function Checkbox({ brand, checked, onChange, children }) {
return (
);
}
// Selectable attendee card — same shape for self + family for visual consistency.
// Self uses a person icon; family uses initials. Both use checkmark + accent
// border + accentSoft fill when selected; muted state when not.
function AttendeeCard({ brand, kind, label, sub, initials, selected, onToggle, disabled }) {
return (
);
}
// Verification line that updates live as cards toggle.
function SummaryLine({ brand, count, names }) {
const isEmpty = count === 0;
const warnFg = '#9A4326';
const warnBg = '#FFEFE5';
return (
{count}
{isEmpty ? (
<>No one selected — select or add someone to reserve a spot.
) : (
<>
{count} spot{count > 1 ? 's' : ''} reserved
— {names.join(' + ')}
)}
);
}
function inputStyle(brand) {
return {
width: '100%', boxSizing: 'border-box',
padding: '10px 12px', borderRadius: 8,
border: `1px solid ${brand.border}`, background: '#fff',
fontSize: 13.5, color: brand.ink, fontFamily: 'inherit',
outline: 'none',
};
}
function Check() { return ; }
// Inline text-link "+ add another …" used under the family / guest forms.
function AddMoreLink({ brand, onClick, children }) {
return (
);
}
function MiniCheck({ brand, checked, onChange, children }) {
return (
);
}
// ────────────────────────────────────────────────────────────────
// 2. PromoAndGiftCard — a single collapsing row with two affordances
// "Apply gift card" and "Promo code". Both stay collapsed by default
// so the body of the form isn't crowded.
// ────────────────────────────────────────────────────────────────
function PromoAndGiftCard({ brand, giftBalance = 0, onApplyPromo, onApplyGift }) {
const [openPromo, setOpenPromo] = useStateS(false);
const [openGift, setOpenGift] = useStateS(false);
const [promo, setPromo] = useStateS('');
const [gift, setGift] = useStateS('');
const [appliedPromo, setAppliedPromo] = useStateS(null);
const [appliedGift, setAppliedGift] = useStateS(null);
const apply = (kind) => {
if (kind === 'promo' && promo.trim()) {
setAppliedPromo({ code: promo.trim().toUpperCase(), amt: 10 });
onApplyPromo && onApplyPromo({ code: promo.trim(), amt: 10 });
}
if (kind === 'gift' && gift.trim()) {
setAppliedGift({ code: gift.trim().toUpperCase(), amt: 50 });
onApplyGift && onApplyGift({ code: gift.trim(), amt: 50 });
}
};
const linkBtn = {
background: 'transparent', border: 0, padding: 0,
color: brand.accent, fontSize: 12.5, fontWeight: 600, cursor: 'pointer',
textDecoration: 'underline',
};
return (
);
}
// ────────────────────────────────────────────────────────────────
// 3. SavePayment — opt-in for new clients, auto-on (with toggle) for returning
// ────────────────────────────────────────────────────────────────
function SavePayment({ brand, returning, value, onChange }) {
return (
);
}
// ────────────────────────────────────────────────────────────────
// 4. CancelPolicyAck — 24-hour cancellation acknowledgment.
// Shown only when the studio configures fees (tweaks.cancelFee).
// ────────────────────────────────────────────────────────────────
function CancelPolicyAck({ brand, checked, onChange }) {
return (
);
}
// ────────────────────────────────────────────────────────────────
// 5. WaitlistBanner — when class is full, show waitlist position.
// ────────────────────────────────────────────────────────────────
function WaitlistBanner({ brand, position = 3 }) {
return (
{position}You'll be #{position} on the waitlist.
We'll text you the moment a spot opens. Your card isn't charged until then — you have 2 hours to confirm.
);
}
// ────────────────────────────────────────────────────────────────
// 6. LoggedInWalletStrip — the strip a returning, logged-in client sees at
// the top of any flow: their balance + active membership + alt-payment hint.
// ────────────────────────────────────────────────────────────────
function LoggedInWalletStrip({ brand, credits = 6, membership, giftBalance = 0 }) {
return (