// components.jsx — shared atoms used across all checkout flows
// Loaded as a global script; exports to window at the end.
const { useState, useEffect, useRef, useMemo } = React;
// ────────────────────────────────────────────────────────────────
// Studio brand chrome — header that wears the studio's identity
// ────────────────────────────────────────────────────────────────
function StudioHeader({ brand, returning, onSignIn, compact }) {
return (
{brand.initials}
{brand.name}
{brand.tagline}
{!returning && (
)}
{returning && (
Welcome back
)}
);
}
// ────────────────────────────────────────────────────────────────
// Section heading inside the checkout form
// ────────────────────────────────────────────────────────────────
function SectionTitle({ children, brand, step }) {
return (
{step != null && (
{step}
)}
{children}
);
}
// ────────────────────────────────────────────────────────────────
// Form field — text/email/tel/textarea, floating label
// ────────────────────────────────────────────────────────────────
function Field({ label, type='text', value, onChange, brand, hint, error, autoComplete, required, optional, rows }) {
const [focused, setFocused] = useState(false);
const filled = value && value.length > 0;
// Date inputs render the native "mm/dd/yyyy" placeholder INSIDE the input, which
// visually collides with the floating label. For date fields we drop the floating
// pattern and put a static label above the input instead.
const isDate = type === 'date';
const lifted = focused || filled;
const Tag = rows ? 'textarea' : 'input';
const borderColor = error ? '#C0392B' : (focused ? brand.accent : brand.border);
if (isDate) {
return (
);
}
return (
);
}
// ────────────────────────────────────────────────────────────────
// Primary CTA button — wears the studio's accent color
// ────────────────────────────────────────────────────────────────
function PrimaryButton({ children, onClick, brand, loading, disabled, full=true, sub }) {
return (
);
}
function Spinner({ size = 18, color = '#fff' }) {
return (
);
}
// ────────────────────────────────────────────────────────────────
// Capacity counter — three states
// ────────────────────────────────────────────────────────────────
function CapacityCounter({ state='plenty', brand, total=12 }) {
const cfg = ({
plenty: { taken: 4, bg: '#E8EDE4', text: '#3D5C2E', dot: '#6ABC5A', label: `${total - 4} of ${total} spots left` },
almost: { taken: 11, bg: '#F5EFE0', text: '#8A6620', dot: '#C4993A', label: `Only 1 spot left` },
waitlist:{ taken: 12, bg: '#F2E6E8', text: '#6C2030', dot: '#A04A5A', label: `Class is full · join waitlist` },
})[state];
return (
{cfg.label}
);
}
// ────────────────────────────────────────────────────────────────
// Wallet payment buttons — Apple Pay / Google Pay / Link
// ────────────────────────────────────────────────────────────────
function WalletButton({ kind, brand }) {
const styles = {
apple: { bg: '#000', fg: '#fff', label:
Pay
},
google: { bg: '#fff', fg: '#1F2A22', label: Pay },
link: { bg: '#00D66F', fg: '#0E1B14', label:
Link
},
}[kind];
return (
);
}
// Mock card field — looks like Stripe Elements
function CardField({ brand }) {
// Start fields empty so browser autofill / wallet-fill is the only thing
// that ever populates them. When autofill isn't available, the user just
// sees the placeholder hint (1234 1234 1234 1234, MM / YY, CVC, ZIP).
const [num, setNum] = useState('');
const [exp, setExp] = useState('');
const [cvc, setCvc] = useState('');
const [zip, setZip] = useState('');
const placeholderColor = brand.inkSoft || '#8C9690';
const inputStyle = {
flex: 1,
background: 'transparent',
border: 0,
fontSize: 14,
color: brand.ink,
outline: 'none',
fontFamily: brand.bodyFont,
padding: '14px 12px',
minWidth: 0,
};
return (