// src/checkout.jsx — Decline-log Phase-1 checkout + confirmation (R2) // R2: card-brand detection from PAN BIN (Codex MED2 / Kimi LOW), mobile layout. const { useState: useStateCh, useEffect: useEffectCh, useMemo: useMemoCh, useRef: useRefCh } = React; // Goal → protocol_code mapping (mirrors src/results.jsx PROTOCOLS). function protocolFromGoal(goal) { return ({ weight_loss: 'GLP1-A', lean_muscle: 'BPC-TB', recovery: 'BPC-A', energy_vitality: 'CJC-IPA', longevity: 'CJC-IPA-L', sleep_stress: 'DSIP-A', hormone: 'KISS-A', })[goal] || 'GLP1-A'; } // Operator-mode flag is resolved by the local-dev gate in components.jsx. const __ckOperatorMode = typeof getInitialOperatorMode === 'function' && getInitialOperatorMode(); function Checkout({ onConfirmed, onExit, lead, answers }) { const { resolved, cohortKey } = useCohort(); const [card, setCard] = useStateCh({ number: '', exp: '', cvc: '', zip: '' }); // V3.5: shipping + contact captured for the /v1/intake/order POST. // (Card details are NOT sent to the API — brief: card payment is a separate Stripe step.) const [contact, setContact] = useStateCh({ email: lead?.email || '', full_name: lead?.name || '', // cont.12 Phase A1 (P8 PCI-safe pivot): phone REQUIRED at checkout per operator // anchor 2026-05-27 "get phone there as well". E.164-ish format: digits + optional // +()- separators; 7-20 chars. Backend pattern matches; admin reveal shows it. phone: lead?.phone || '', }); const [ship, setShip] = useStateCh({ line1: '', line2: '', city: '', region: '', postal: '', country: 'US', }); const [hp, setHp] = useStateCh(''); const idemKeyRef = useRefCh(null); const [status, setStatus] = useStateCh('idle'); // idle | reserving | reserved | retryable | failed const [errMsg, setErrMsg] = useStateCh(null); // cont.14 A.3.a (Sub-C §2.3): fire `checkout_shown` ONCE on first mount so the admin // Dashboard funnel records checkout-reached (was checkout_shown=0). Fire-and-forget per V2 F2. useEffectCh(() => { if (typeof window.sendFunnelEvent === 'function') { window.sendFunnelEvent('checkout_shown', { page: 'checkout' }); } }, []); const protocolCode = useMemoCh(() => protocolFromGoal(resolved.goal), [resolved.goal]); const clinicalConditions = useMemoCh(() => ( Array.isArray(answers?.medical) && answers.medical.length ? answers.medical : ['none'] ), [answers]); // PEP-G-013: the card form is COSMETIC. Stripe Elements / SetupIntent integration is // C-F2 (Phase 1.5+; not built yet). Card data NEVER leaves the browser — submitOrder // doesn't include it, the intake's ReservedOrderV1 schema is `extra='forbid'` so the // backend rejects it even if it were sent, and we DO NOT store PAN anywhere (PCI scope // we are not in). Card inputs stay in this component's local state only. // Gate enables on valid CONTACT + SHIPPING — the card section is visual-only for now. // This lets the operator track checkout-reached conversion (admin sees the order row // with status='declined_intentional', amount=0, encrypted email/name/shipping) WITHOUT // any PCI exposure. When real payments land (C-F2), the gate will require a Stripe // PaymentMethod id returned from Elements client-side tokenization — still never PAN. const cardValid = true; // intentionally not gated; see comment above // cont.12 Phase A1 (P8 PCI-safe pivot): phone is REQUIRED at checkout; match the same // pattern as the intake API: digits plus optional separators, 7-20 chars. const phoneValid = /^[+0-9\s()\-]{7,20}$/.test((contact.phone || '').trim()); const contactValid = /\S+@\S+\.\S+/.test(contact.email) && contact.full_name.trim().length >= 2 && phoneValid; const shipValid = ship.line1.trim().length >= 2 && ship.city.trim().length >= 1 && ship.region.trim().length >= 1 && ship.postal.trim().length >= 3 && ship.country.length === 2; const valid = cardValid && contactValid && shipValid; const detectedBrand = useMemoCh(() => detectCardBrand(card.number), [card.number]); async function submit() { if (!valid || status === 'reserving' || status === 'reserved') return; setStatus('reserving'); setErrMsg(null); // Reuse the same idempotency key across network retries; rotate only on 409. if (!idemKeyRef.current) idemKeyRef.current = uuidv4(); const res = await submitOrder({ email: contact.email, fullName: contact.full_name, // cont.12 Phase A1 (P8 PCI-safe pivot): phone REQUIRED; card_last4 + card_brand // + card_zip captured PCI-safe (NEVER full PAN/CVC — backend rejects via extra='forbid'). phone: contact.phone, shipping: ship, protocolCode, cohortKey, cardLast4: (card.number || '').replace(/\s/g, '').slice(-4), cardBrand: detectedBrand || null, cardZip: card.zip || null, conditions: clinicalConditions, idempotencyKey: idemKeyRef.current, }); if (res.ok) { setStatus('reserved'); // cont.11 R1 fold (Opus LOW-3): card_last4/card_brand were passed to onConfirmed for // a receipt row that was removed in V3 F12 (cont.11 P4) — dead data flow. The card // form is cosmetic per PEP-G-013; no card data should be tracked in app state at all. setTimeout(() => onConfirmed({}), 900); return; } // 409 = key conflict; api.jsx already rotated internally + retried. If still failing surface generic. if (res.status === 422) { setErrMsg('Please check your shipping + contact details and try again.'); setStatus('retryable'); return; } if (res.status === 429 || res.status === 503 || res.status === 0) { setErrMsg('We hit a busy moment. One more try should do it.'); setStatus('retryable'); return; } setErrMsg('Reservation could not be saved. Please try again in a moment.'); setStatus('retryable'); } function retry() { // Same idempotency key on a fresh attempt (replays, not double-submits). setStatus('idle'); setErrMsg(null); } function formatCard(v) { return v.replace(/\D/g, '').slice(0, 16).replace(/(\d{4})(?=\d)/g, '$1 '); } function formatExp(v) { const digits = v.replace(/\D/g, '').slice(0, 4); return digits.length >= 3 ? `${digits.slice(0, 2)}/${digits.slice(2)}` : digits; } return (
{/* cont.11 P4 (V3 F12): strip PCI-DSS compliance-fiction. No processor is wired yet (PEP-G-013 cosmetic form); claiming "PCI-DSS via processor" is the PEP-G-039 compliance-fiction anti-class. */} Secure intake · TLS encrypted Secure intake
{/* LEFT */}
RESERVE YOUR PROTOCOL {/* cont.11 P4 (V3 F12 page H1 + PCI-DSS-via-processor strip + V3 F13 email-fiction strip): the page H1 was "Save your payment method" which advertised a payment-method-save flow that does NOT EXIST (PEP-G-013 cosmetic form + no processor wired). Replaced with honest reservation language. "$0 authorization" + "validate your card" copy stripped — no card data is processed at this step. */} {/* cont.12 Phase A1 (P8 PCI-safe pivot — operator-ratified 2026-05-27): H1 + subtitle reframed as clinician-review submission. Full lead data + phone captured; card partial (last4 + brand + ZIP) stored PCI-safely (NEVER full PAN/CVC — backend rejects); user told they'll be contacted once approved. NO mention of "no card collection here" since the form DOES collect partial card data. */}

Submit for clinician review.

A licensed clinician will review your protocol within 24 hours. You will be contacted once approved — no charge is processed at this step. Card details captured are partial (last 4 digits + brand only) and held until your approval call.

Contact
setContact(c => ({ ...c, email: v }))} placeholder="you@example.com" disabled={status !== 'idle' && status !== 'retryable'} /> setContact(c => ({ ...c, full_name: v }))} placeholder="Tess Order" disabled={status !== 'idle' && status !== 'retryable'} /> {/* cont.12 Phase A1 (P8 PCI-safe pivot): phone REQUIRED at checkout per operator anchor "get phone there as well". `tel` input for mobile keyboard. Format hint shown to operator; backend validates ^[+0-9\s()-]{7,20}$. */} setContact(c => ({ ...c, phone: v.slice(0, 20) }))} placeholder="+1 (555) 123-4567" disabled={status !== 'idle' && status !== 'retryable'} />
Shipping address
setShip(s => ({ ...s, line1: v }))} placeholder="123 Main St" disabled={status !== 'idle' && status !== 'retryable'} /> setShip(s => ({ ...s, line2: v }))} placeholder="Apt 4B" disabled={status !== 'idle' && status !== 'retryable'} />
setShip(s => ({ ...s, city: v }))} placeholder="Austin" disabled={status !== 'idle' && status !== 'retryable'} /> setShip(s => ({ ...s, region: v.toUpperCase().slice(0, 8) }))} placeholder="TX" mono disabled={status !== 'idle' && status !== 'retryable'} /> setShip(s => ({ ...s, postal: v.slice(0, 12) }))} placeholder="78701" mono disabled={status !== 'idle' && status !== 'retryable'} />
Card details
{['VISA', 'MC', 'AMEX', 'DISCOVER'].map(b => ( {b} ))}
setCard(c => ({ ...c, number: formatCard(v) }))} placeholder="4242 4242 4242 4242" mono disabled={status !== 'idle'} rightLabel={detectedBrand} />
setCard(c => ({ ...c, exp: formatExp(v) }))} placeholder="MM/YY" mono disabled={status !== 'idle'} /> setCard(c => ({ ...c, cvc: v.replace(/\D/g, '').slice(0, 4) }))} placeholder="123" mono disabled={status !== 'idle'} /> setCard(c => ({ ...c, zip: v.replace(/\D/g, '').slice(0, 6) }))} placeholder="94110" mono disabled={status !== 'idle'} />
{/* cont.12 Phase A1 (P8 PCI-safe pivot — operator-ratified 2026-05-27): We capture last 4 digits + brand + ZIP for the clinician's review record. The full card number + CVC + expiration NEVER leave the browser — backend schema rejects them (extra='forbid'). Card is processed in a separate step ONLY after clinician approval. */} {__ckOperatorMode ? ( <>PCI-safe partial: last4 + brand + ZIP submitted (no PAN/CVC; extra='forbid' on backend). Full tokenization is C-F2 / v1.5. ) : ( <>For clinician review, we save only the last 4 digits and card brand — never the full number or CVC. You will be contacted to complete payment after approval. )}
{errMsg && (
{errMsg}
)} {/* cont.12 Phase A1 (P8 PCI-safe pivot — operator anchor 2026-05-27): CTA reframed as clinician-review submission (NOT "reserve my spot"). Submit captures full lead + phone + PCI-safe card partial; backend queues for clinician review; user gets contacted upon approval. */} {/* cont.12 Phase A1 (P8 PCI-safe pivot 2026-05-27): footer bullets reframed around clinician-review workflow. Operator-anchored honesty: no charge here; partial card only; clinician contact upon approval. */}
    {/* cont.12 R1 Codex F-Z + GPT-5.5 F6 HIGH FOLD (2026-05-28): the prior bullet "No PHI captured at this stage" was operator-compliance-fiction — we DO capture contact + shipping + phone + protocol code + cohort context + card ZIP, which in a peptide/GLP-1 clinician-review flow is at minimum sensitive health-context data. PEP-G-039 anti-class. Reframed honestly. */} No charge is processed at this step. We only collect the last 4 digits + brand + ZIP of your card for your clinician's record. If a clinician determines you're not a candidate, we tell you before any payment is ever requested. Contact, shipping, and clinician-review details are encrypted at rest. No PAN/CVC is collected or stored.
{/* RIGHT */}
); } function FormInput({ label, value, onChange, placeholder, mono, disabled, rightLabel, type }) { // cont.12 Phase A1: added optional `type` prop (defaults to "text") so the Phone field // can request `type="tel"` for the mobile keyboard. Also maps `type="tel"` to // inputMode="tel" automatically (mono path keeps its existing numeric mode). const resolvedType = type || 'text'; const resolvedInputMode = resolvedType === 'tel' ? 'tel' : (mono ? 'numeric' : undefined); return ( ); } function SumRow({ label, value, mono, strong }) { return (
{label} {value}
); } function Bullet({ children }) { return (
  • {children}
    • ); } // ───────────────────────────────────────────────────────────────────────────── // CONFIRMATION // ───────────────────────────────────────────────────────────────────────────── function Confirmation({ onExit, onRestart }) { const { cohortKey } = useCohort(); return (
    {/* Consumer view shows only the review status. Dev operator mode may append the build marker. */} SUBMITTED FOR CLINICIAN REVIEW {__ckOperatorMode && <> · ZRX-PRESALE-MVP}

    Thanks.

    {/* cont.12 Phase A1 (P8 PCI-safe pivot — operator-anchored verbatim 2026-05-27): "tell them they wil be contacted once they are approved." */} A licensed clinician will review your protocol — usually within 24 hours. You will be contacted once approved. No charge has been made. Only the last 4 digits and brand of your card were saved.

    CLINICIAN-REVIEW SUBMISSION · NOT A CHARGE
    {/* cont.12 Phase A1 (P8 PCI-safe pivot 2026-05-27): now that we DO collect the partial card (last4 + brand + ZIP) PCI-safely, the receipt shows the operator what was captured (so the clinician's call has the same reference). Full card data NEVER captured — what you see here is everything stored. cont.11 historical: row was removed because no card data was collected; cont.12 reinstates it with operator-ratified PCI-safe partial. */} {__ckOperatorMode && }

    {/* cont.12 Phase A1 (P8 PCI-safe pivot 2026-05-27): operator-anchored verbatim: "they will be contacted once they are approved." Removed prior "email follow-up" wording since there's no email backend yet — the clinician contact channel will be the phone number captured on the previous step. */} A licensed clinician will reach out at the phone number or email you provided once your protocol is approved. The partial card data we saved (last 4 digits + brand) lets the clinician identify your file during that call.

    ); } function Row2({ label, value, mono, accent }) { return (
    {label} {value}
    ); } Object.assign(window, { Checkout, Confirmation });