/* global React, Icon, Button, usePaymentMethod, addStubCard, cardOnFileGet, cardOnFileSet, cardOnFileClear */ // ─── Payment Method screen ──────────────────────────────────────────── // Reached from Profile → "Payment method" (above Manage my membership). // Golfers save the card that gets put on file. PRE-STRIPE: we capture the // card client-side, keep a {brand,last4,holder,exp} display record on-device // (see payments-data.jsx), and satisfy the server "card on file" gate via // addStubCard(). The raw number/CVC never leave the form — once Stripe is // wired, CreditCardForm.onSubmit hands the number to Stripe.js for // tokenization and only the token + this same display shape comes back. // ── card brand + validation helpers ── function pmDigits(s) { return (s || '').replace(/\D+/g, ''); } function pmBrand(num) { const n = pmDigits(num); if (/^4/.test(n)) return 'visa'; if (/^(5[1-5]|2(2[2-9]|[3-6]\d|7[01]|720))/.test(n)) return 'mastercard'; if (/^3[47]/.test(n)) return 'amex'; if (/^(6011|64[4-9]|65|622)/.test(n)) return 'discover'; return 'card'; } const PM_BRAND = { visa: { label: 'VISA', len: 16, cvc: 3 }, mastercard: { label: 'Mastercard', len: 16, cvc: 3 }, amex: { label: 'AMEX', len: 15, cvc: 4 }, discover: { label: 'Discover', len: 16, cvc: 3 }, card: { label: 'Card', len: 16, cvc: 3 }, }; function pmGroups(brand) { return brand === 'amex' ? [4, 6, 5] : [4, 4, 4, 4]; } function pmFormatInput(digits, brand) { const g = pmGroups(brand), out = []; let i = 0; for (const size of g) { if (i >= digits.length) break; out.push(digits.slice(i, i + size)); i += size; } return out.join(' '); } function pmLuhn(num) { const n = pmDigits(num); if (n.length < 12) return false; let sum = 0, alt = false; for (let i = n.length - 1; i >= 0; i--) { let d = +n[i]; if (alt) { d *= 2; if (d > 9) d -= 9; } sum += d; alt = !alt; } return sum % 10 === 0; } function pmExpValid(mmYY) { const m = pmDigits(mmYY); if (m.length !== 4) return false; const mm = +m.slice(0, 2), yy = +m.slice(2); if (mm < 1 || mm > 12) return false; const now = new Date(); const curYY = now.getFullYear() % 100, curMM = now.getMonth() + 1; if (yy < curYY || (yy === curYY && mm < curMM)) return false; return true; } // Group any string into brand-shaped chunks (works on digits or • chars). function pmChunk(str, groups, sep) { const out = []; let i = 0; for (const size of groups) { out.push(str.slice(i, i + size)); i += size; } return out.filter(Boolean).join(sep); } // The number shown on the 3D card face. `mode`: // 'type' → the digits as typed, with placeholder dots for the rest // 'mask' → saved card: dots with only last4 shown function pmCardNumberFace({ digits, brand, mode, last4 }) { const len = PM_BRAND[brand].len; let chars; if (mode === 'mask') { chars = '•'.repeat(Math.max(0, len - 4)) + (last4 || '••••'); } else { const d = (digits || '').slice(0, len); chars = d + '•'.repeat(Math.max(0, len - d.length)); } return pmChunk(chars, pmGroups(brand), ' '); } // ── The single-sided 3D card (SBX-branded, tilts with the pointer) ── function PaymentCard3D({ digits, holder, exp, brand, mode, last4 }) { const tiltRef = React.useRef(null); const start = React.useRef({ down: false }); const TILT = 12; function onDown(e) { start.current.down = true; const el = tiltRef.current; if (el) el.style.transition = 'none'; } function onMove(e) { const el = tiltRef.current; if (!el || !start.current.down) return; const r = el.getBoundingClientRect(); const cx = e.clientX - r.left, cy = e.clientY - r.top; el.style.setProperty('--tx', `${((cy - r.height / 2) / (r.height / 2)) * -TILT}deg`); el.style.setProperty('--ty', `${((cx - r.width / 2) / (r.width / 2)) * TILT}deg`); el.style.setProperty('--mx', `${cx}px`); el.style.setProperty('--my', `${cy}px`); } function spring() { const el = tiltRef.current; if (!el) return; el.style.transition = 'transform 0.55s cubic-bezier(0.22,1,0.36,1)'; el.style.setProperty('--tx', '0deg'); el.style.setProperty('--ty', '0deg'); } function onUp() { if (start.current.down) { start.current.down = false; spring(); } } const brandLabel = PM_BRAND[brand].label; return (
{/* specular highlight follows the pointer */}
{/* top row: SBX brand + card network */}
Sandbox {brandLabel}
{/* chip + number */}
{pmCardNumberFace({ digits, brand, mode, last4 })}
{/* bottom row: holder + expiry */}
Card holder
{holder || 'YOUR NAME'}
Expires
{exp && pmDigits(exp).length >= 3 ? `${pmDigits(exp).slice(0, 2)}/${pmDigits(exp).slice(2, 4)}` : 'MM/YY'}
); } // ── The card-entry form (live-updates the 3D card above it) ── function CreditCardForm({ defaultHolder, onSubmit, submitting }) { const [number, setNumber] = React.useState(''); // formatted card number const [holder, setHolder] = React.useState(defaultHolder || ''); const [exp, setExp] = React.useState(''); const [cvc, setCvc] = React.useState(''); const [touched, setTouched] = React.useState({}); const brand = pmBrand(number); const meta = PM_BRAND[brand]; const digits = pmDigits(number); const valid = { number: pmLuhn(number) && digits.length === meta.len, holder: holder.trim().length >= 2, exp: pmExpValid(exp), cvc: cvc.length === meta.cvc, }; const allValid = valid.number && valid.holder && valid.exp && valid.cvc; function setNum(v) { const d = pmDigits(v).slice(0, PM_BRAND[pmBrand(v)].len); setNumber(pmFormatInput(d, pmBrand(v))); } function setExpiry(v) { let d = pmDigits(v).slice(0, 4); if (d.length >= 1 && +d[0] > 1) d = '0' + d; // 3→03 setExp(d.length > 2 ? `${d.slice(0, 2)}/${d.slice(2)}` : d); } function blur(k) { setTouched(t => ({ ...t, [k]: true })); } function submit() { setTouched({ number: true, holder: true, exp: true, cvc: true }); if (!allValid || submitting) return; onSubmit({ brand, last4: digits.slice(-4), holder: holder.trim(), exp: `${pmDigits(exp).slice(0, 2)}/${pmDigits(exp).slice(2, 4)}` }); } const field = { marginBottom: 14 }; const label = { fontSize: 11, fontFamily: 'var(--font-mono)', letterSpacing: '0.1em', textTransform: 'uppercase', color: 'var(--forest)', opacity: 0.7, marginBottom: 6, display: 'block' }; const input = (bad) => ({ width: '100%', boxSizing: 'border-box', padding: '13px 14px', borderRadius: 13, border: `1px solid ${bad ? 'rgba(178,59,43,0.6)' : 'rgba(14,28,19,0.14)'}`, background: 'var(--paper)', color: 'var(--ink)', fontSize: 15, fontFamily: 'var(--font-body)', outline: 'none', }); return (
{/* live preview */} {/* A real
with name/autocomplete hints so iOS Safari (and other browsers) offer credit-card autofill for each field. */} { e.preventDefault(); submit(); }}>
setNum(e.target.value)} onBlur={() => blur('number')} type="text" inputMode="numeric" name="cardnumber" autoComplete="cc-number" placeholder="1234 5678 9012 3456" style={{ ...input(touched.number && !valid.number), fontFamily: 'var(--font-mono)', letterSpacing: '0.06em' }}/>
setHolder(e.target.value)} onBlur={() => blur('holder')} type="text" name="ccname" autoComplete="cc-name" placeholder="Rob Piacenti" style={input(touched.holder && !valid.holder)}/>
setExpiry(e.target.value)} onBlur={() => blur('exp')} type="text" inputMode="numeric" name="cc-exp" autoComplete="cc-exp" placeholder="MM/YY" style={{ ...input(touched.exp && !valid.exp), fontFamily: 'var(--font-mono)' }}/>
setCvc(pmDigits(e.target.value).slice(0, meta.cvc))} onBlur={() => blur('cvc')} type="text" inputMode="numeric" name="cvc" autoComplete="cc-csc" placeholder={meta.cvc === 4 ? '1234' : '123'} style={{ ...input(touched.cvc && !valid.cvc), fontFamily: 'var(--font-mono)' }}/>
{/* the promise — consistent with PaymentGateSheet */}
You'll never be charged until your match is confirmed. Your card details are stored securely and never touch our servers in beta.
); } // ── The screen ── function PaymentMethodScreen({ go, profile, onClose, embedded }) { const userId = profile && profile.id; const dismiss = onClose || (() => go({ overlay: undefined })); const [method, refreshMethod] = usePaymentMethod(userId); // undefined=loading · null=none · {brand,last4} const [local, setLocal] = React.useState(() => cardOnFileGet(userId)); const [editing, setEditing] = React.useState(false); const [busy, setBusy] = React.useState(false); const [err, setErr] = React.useState(''); // Slide the whole screen up on open, back down on close (then navigate). // Embedded in the settings drawer, the PARENT panel owns the horizontal // slide — skip the vertical animation and dismiss immediately. const [shown, setShown] = React.useState(!!embedded); const [closing, setClosing] = React.useState(false); React.useEffect(() => { if (embedded) return undefined; const id = requestAnimationFrame(() => setShown(true)); return () => cancelAnimationFrame(id); }, []); function close() { if (embedded) { dismiss(); return; } if (closing) return; setClosing(true); setTimeout(dismiss, 340); } React.useEffect(() => { setLocal(cardOnFileGet(userId)); }, [userId]); const loading = method === undefined; const onFile = local || (method ? { brand: method.brand, last4: method.last4, holder: '', exp: '' } : null); const showForm = editing || (!loading && !onFile); async function handleSubmit(card) { setBusy(true); setErr(''); try { await addStubCard(userId); // satisfy the server card-on-file gate cardOnFileSet(userId, card); // rich display record (pre-Stripe) setLocal(card); refreshMethod(); setEditing(false); } catch (e) { setErr(e.message || 'Could not save your card.'); } setBusy(false); } const defaultHolder = (profile && (profile.name || profile.full_name || profile.display_name)) || ''; return (
{/* header */}
Payment Method
{showForm ? 'What card do you\nwant on file?'.split('\n').map((l, i) =>
{l}
) : 'Your card\non file'.split('\n').map((l, i) =>
{l}
)}
{showForm ? 'This is the card we put on file so we can lock your tee time the instant a match forms.' : 'This is the card on file for your matches. You won\'t be charged until a foursome locks in.'}
{loading ? (
Loading…
) : showForm ? ( <> {err &&
{err}
} {onFile && ( )} ) : ( <>
)}
); } Object.assign(window, { PaymentMethodScreen, CreditCardForm, PaymentCard3D });