// MobileCheckout.jsx — full-screen mobile checkout, single-column stacked layout const MobileCheckout = ({ open, items, user, onClose, onComplete }) => { const [step, setStep] = React.useState(0); const [form, setForm] = React.useState({ email: user?.email || '', name: user?.name || '', line1: user?.shipping?.line1 || '', line2: user?.shipping?.line2 || '', city: user?.shipping?.city || '', state: user?.shipping?.state || '', zip: user?.shipping?.zip || '', country: user?.shipping?.country || 'US', shipping: 'STANDARD', card: '', exp: '', cvc: '', saveCard: false, }); const [errs, setErrs] = React.useState({}); const [processing, setProcessing] = React.useState(false); const [processLog, setProcessLog] = React.useState([]); const [orderId, setOrderId] = React.useState(null); const [showSummary, setShowSummary] = React.useState(false); React.useEffect(() => { if (open) { setStep(0); setOrderId(null); setProcessLog([]); setShowSummary(false); setForm((f) => ({ ...f, email: user?.email || f.email, name: user?.name || f.name, line1: user?.shipping?.line1 || f.line1, line2: user?.shipping?.line2 || f.line2, city: user?.shipping?.city || f.city, state: user?.shipping?.state || f.state, zip: user?.shipping?.zip || f.zip, country: user?.shipping?.country || f.country, })); setErrs({}); } }, [open]); React.useEffect(() => { if (open) document.body.style.overflow = 'hidden'; return () => { document.body.style.overflow = ''; }; }, [open]); if (!open) return null; const set = (k, v) => { setForm((f) => ({ ...f, [k]: v })); setErrs((e) => ({ ...e, [k]: null })); }; const subtotal = items.reduce((s, i) => s + i.p.price * i.qty, 0); const shippingCost = form.shipping === 'EXPRESS' ? 12 : form.shipping === 'PICKUP' ? 0 : 5; const tax = Math.round(subtotal * 0.08875 * 100) / 100; const total = subtotal + shippingCost + tax; const steps = ['ID', 'ADDR', 'PAY', 'EXEC']; const validate = (n) => { const next = {}; if (n === 0) { if (!form.email.includes('@')) next.email = 'invalid email'; if (!form.name.trim()) next.name = 'required'; } if (n === 1) { if (!form.line1.trim()) next.line1 = 'required'; if (!form.city.trim()) next.city = 'required'; if (!form.state.trim()) next.state = 'required'; if (!form.zip.match(/^[A-Za-z0-9 \-]{3,12}$/)) next.zip = 'invalid postal code'; } if (n === 2) { if (!form.card.replace(/\s/g,'').match(/^\d{12,19}$/)) next.card = 'invalid card number'; if (!form.exp.match(/^\d{2}\s?\/\s?\d{2}$/)) next.exp = 'MM/YY'; if (!form.cvc.match(/^\d{3,4}$/)) next.cvc = 'invalid CVC'; } setErrs(next); return Object.keys(next).length === 0; }; const advance = () => { if (!validate(step)) return; if (step < 2) setStep(step + 1); else execute(); }; const execute = () => { setProcessing(true); setStep(3); const lines = [ { t: 200, text: 'validating cart ............. [ OK ]' }, { t: 500, text: 'computing tax ............... [ OK ]' }, { t: 800, text: 'reserving inventory ......... [ OK ]' }, { t: 1200, text: 'tokenizing card ............. [ OK ]' }, { t: 1700, text: 'creating checkout ........... [ OK ]' }, { t: 2100, text: 'authorizing payment ......... [ OK ]' }, { t: 2500, text: 'capturing funds ............. [ OK ]' }, { t: 2900, text: 'creating order .............. [ OK ]' }, { t: 3300, text: 'queueing fulfillment ........ [ OK ]' }, { t: 3700, text: 'sending receipt ............. [ OK ]' }, ]; setProcessLog([]); lines.forEach((l) => setTimeout(() => setProcessLog((p) => [...p, l]), l.t)); setTimeout(() => { const id = Math.floor(Math.random() * 9999).toString().padStart(4, '0'); const orderNumber = '#' + Math.random().toString(16).slice(2, 6).toUpperCase() + '-' + id; setOrderId(orderNumber); setProcessing(false); }, 4100); }; const formatCard = (v) => v.replace(/\D/g, '').slice(0, 19).replace(/(.{4})/g, '$1 ').trim(); const formatExp = (v) => { const d = v.replace(/\D/g, '').slice(0, 4); return d.length > 2 ? d.slice(0,2) + ' / ' + d.slice(2) : d; }; const MckField = ({ label, value, onChange, type, placeholder, error, autoFocus, inputMode }) => (
{'>'} {label}{error && · {error}}
onChange(e.target.value)} placeholder={placeholder} autoFocus={autoFocus} autoComplete="off" maxLength={500} style={{ width: '100%', background: '#000', border: '1px solid ' + (error ? '#FF3344' : 'rgba(255,255,255,0.28)'), color: '#FFF', fontFamily: 'inherit', fontSize: 16, padding: '14px 13px', borderRadius: 2, minHeight: 48, }} onFocus={(e) => { if (!error) { e.target.style.borderColor = '#00FF41'; e.target.style.boxShadow = '0 0 0 1px #00FF41'; } }} onBlur={(e) => { if (!error) { e.target.style.borderColor = 'rgba(255,255,255,0.28)'; e.target.style.boxShadow = 'none'; } }} />
); return (
{/* HEADER */}
./checkout TLS 1.3
{/* STEP INDICATOR */}
{steps.map((s, i) => (
{s}
))}
{/* SCROLLABLE BODY */}
{/* COLLAPSIBLE ORDER SUMMARY */} {step < 3 && (
{showSummary && (
{items.map((it, i) => (
{'>'} {it.p.name} x{it.qty} ${it.p.price * it.qty}
))}
SUBTOTAL${subtotal}
SHIPPING{shippingCost === 0 ? 'FREE' : '$' + shippingCost}
TAX${tax.toFixed(2)}
)}
)} {/* STEP 0: IDENTIFY */} {step === 0 && (
{'>'} who_am_i ?
set('email', v)} placeholder="operator@target.coffee" error={errs.email} autoFocus inputMode="email" /> set('name', v)} placeholder="full name for shipping" error={errs.name} /> {!user && (
// already have an account?
// ./login first to use saved info.
)}
)} {/* STEP 1: ADDRESS + SHIPPING */} {step === 1 && (
{'>'} target_address ?
set('line1', v)} placeholder="127 Localhost Lane" error={errs.line1} /> set('line2', v)} placeholder="Unit 0x2A (optional)" /> set('city', v)} placeholder="Brooklyn" error={errs.city} />
set('state', v)} placeholder="NY" error={errs.state} /> set('zip', v)} placeholder="11201" error={errs.zip} inputMode="numeric" />
{'>'} SHIPPING METHOD
{[ { id: 'STANDARD', label: 'STANDARD', sub: '5-7 DAYS', price: 5 }, { id: 'EXPRESS', label: 'EXPRESS', sub: '2-3 DAYS', price: 12 }, { id: 'PICKUP', label: 'LOCAL PICKUP', sub: 'BROOKLYN', price: 0 }, ].map((opt) => ( ))}
)} {/* STEP 2: PAYMENT */} {step === 2 && (
{'>'} authorize_payment
set('card', formatCard(v))} placeholder="4242 4242 4242 4242" error={errs.card} inputMode="numeric" />
set('exp', formatExp(v))} placeholder="12 / 28" error={errs.exp} inputMode="numeric" /> set('cvc', v.replace(/\D/g,'').slice(0,4))} placeholder="000" error={errs.cvc} type="password" inputMode="numeric" />
// payments via stripe.js
// card data never touches our servers
// pci-dss scope: zero
)} {/* STEP 3: EXECUTE / CONFIRM */} {step === 3 && (
{processing || !orderId ? (
$ ./execute --commit
{processLog.map((l, i) => (
  {l.text}
))} {processLog.length < 10 && (
// processing█
)}
) : (
// ORDER CONFIRMED
[ ACCESS GRANTED ]
order {orderId}
queued for fulfillment.
receipt → {form.email}
roasted-to-order · ships 2-3 days
// drink responsibly. pwn responsibly.
)}
)}
{/* BOTTOM NAV BUTTONS — pinned above keyboard */} {step < 3 && (
{step > 0 ? ( ) : ( )}
)}
); }; window.MobileCheckout = MobileCheckout;