// ═══════════════════════════════════════════════ // JAGTAR STUDIO — Customer Account (login + orders) // Three views: identifier → OTP entry → profile. // Uses email or phone OTP via /api/customer/auth/*. // ═══════════════════════════════════════════════ const JagtarAccount = ({ onNavigate }) => { const { c, H2, H3, Body, Label, CTA, Section, Field } = JAGTAR; const [stage, setStage] = React.useState('checking'); // checking | login | otp | profile const [mode, setMode] = React.useState('email'); // email | phone const [identifier, setIdentifier] = React.useState(''); const [maskedIdentifier, setMaskedIdentifier] = React.useState(''); const [code, setCode] = React.useState(''); const [devCode, setDevCode] = React.useState(null); const [busy, setBusy] = React.useState(false); const [error, setError] = React.useState(null); const [info, setInfo] = React.useState(null); const [customer, setCustomer] = React.useState(null); const [orders, setOrders] = React.useState([]); const [expandedOrder, setExpandedOrder] = React.useState(null); // On mount: see if we already have a customer session. React.useEffect(() => { (async () => { try { const res = await window.api('/api/customer/auth/me'); if (res.ok) { const data = await res.json(); setCustomer(data.customer); await loadOrders(); setStage('profile'); } else { setStage('login'); } } catch { setStage('login'); } })(); }, []); async function loadOrders() { try { const res = await window.api('/api/customer/orders'); if (res.ok) { const data = await res.json(); setOrders(data.orders || []); setCustomer(c => c || data.customer); if ((data.orders || []).length > 0 && !expandedOrder) { setExpandedOrder(data.orders[0].order_number); } } } catch { /* ignore */ } } async function requestOtp() { setBusy(true); setError(null); setInfo(null); setDevCode(null); try { const res = await window.api('/api/customer/auth/request-otp', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ identifier: identifier.trim() }), }); const data = await res.json().catch(() => null); if (!res.ok) throw new Error((data && data.error) || `Request failed (${res.status})`); setMaskedIdentifier(data.identifier_masked || identifier); if (data.dev_code) setDevCode(data.dev_code); setStage('otp'); setInfo(`Code sent to ${data.identifier_masked || identifier}`); } catch (e) { setError(e.message); } finally { setBusy(false); } } async function verifyOtp() { setBusy(true); setError(null); try { const res = await window.api('/api/customer/auth/verify-otp', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ identifier: identifier.trim(), code: code.trim() }), }); const data = await res.json().catch(() => null); if (!res.ok) throw new Error((data && data.error) || `Verification failed (${res.status})`); setCustomer(data.customer); await loadOrders(); setStage('profile'); setCode(''); setInfo(null); } catch (e) { setError(e.message); } finally { setBusy(false); } } async function logout() { await window.api('/api/customer/auth/logout', { method: 'POST' }); setCustomer(null); setOrders([]); setIdentifier(''); setCode(''); setStage('login'); } // ─── Stage: checking ─── if (stage === 'checking') { return (

Loading your account…

); } // ─── Stage: login ─── if (stage === 'login') { const inputLabel = mode === 'email' ? 'Email address' : 'Phone number'; const placeholder = mode === 'email' ? 'jane@example.com' : '+44 7700 900123'; const valid = mode === 'email' ? /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(identifier.trim()) : /^\+?[1-9][\d\s\-().]{6,20}$/.test(identifier.trim()); return (

Your Account

Sign in

Enter your email or phone — we’ll send you a six-digit code. No password needed.

{/* Mode toggle */}

{[['email', 'Email'], ['phone', 'Phone']].map(([key, label]) => ( ))}

{error && (

{error}

)} setIdentifier(e.target.value)} autoComplete={mode === 'email' ? 'email' : 'tel'} required /> valid && !busy && requestOtp()} style={{ width: '100%', marginTop: 8, ...(!valid || busy ? { opacity: 0.5, cursor: 'not-allowed' } : {}), }} > {busy ? 'Sending code…' : 'Send code'} We use the email or phone you placed your order with. Don’t have an order yet?{' '} { e.preventDefault(); onNavigate('product'); }} href="#" style={{ color: c.charcoal, textDecoration: 'underline' }}> Start a commission .

); } // ─── Stage: OTP entry ─── if (stage === 'otp') { return (

Verify

Enter your code

We sent a 6-digit code to {maskedIdentifier}. It expires in 10 minutes. {devCode && (

Dev mode: code is {devCode}

(Returned in the API response when NODE_ENV ≠ production. Will be removed in production with real Resend / Twilio delivery.)

)}

{error && (

{error}

)} setCode(e.target.value.replace(/\D/g, '').slice(0, 6))} placeholder="000000" autoComplete="one-time-code" inputMode="numeric" maxLength={6} style={{ width: '100%', boxSizing: 'border-box', padding: '20px 16px', fontFamily: "'Cormorant Garamond', Georgia, serif", fontSize: 32, textAlign: 'center', letterSpacing: '0.4em', color: c.charcoal, border: `1px solid ${c.border}`, background: '#fff', outline: 'none', marginBottom: 20, }} onFocus={e => e.target.style.borderColor = c.gold} onBlur={e => e.target.style.borderColor = c.border} /> code.length >= 4 && !busy && verifyOtp()} style={{ width: '100%', ...(code.length < 4 || busy ? { opacity: 0.5, cursor: 'not-allowed' } : {}), }} > {busy ? 'Verifying…' : 'Verify and sign in'}

); } // ─── Stage: profile ─── return ; }; // ─── Profile / orders view ─── const ProfileView = ({ customer, orders, expandedOrder, setExpandedOrder, onLogout, onNavigate }) => { const { c, H2, H3, Body, Label, CTA, Section } = JAGTAR; const fmtDate = (ts) => ts ? new Date(ts).toLocaleDateString(undefined, { month: 'long', day: 'numeric', year: 'numeric', }) : '—'; const fmtMonthYear = (ts) => ts ? new Date(ts).toLocaleDateString(undefined, { month: 'long', year: 'numeric', }) : '—'; const fmtShort = (ts) => ts ? new Date(ts).toLocaleDateString(undefined, { month: 'short', day: 'numeric', }) : ''; const StatusBadge = ({ status, label }) => { const colors = { order_placed: { bg: 'rgba(184,181,176,0.15)', color: c.gray }, photos_reviewed: { bg: 'rgba(184,181,176,0.15)', color: c.gray }, sculpting: { bg: 'rgba(176,141,92,0.12)', color: c.gold }, finishing: { bg: 'rgba(201,123,92,0.12)', color: c.terracotta }, shipped: { bg: 'rgba(92,122,92,0.12)', color: c.success }, }; const s = colors[status] || colors.order_placed; return ( {label} ); }; const customerLabel = customer?.email || customer?.phone || 'Guest'; const customerName = customer?.name || customer?.email?.split('@')[0] || 'Welcome'; return (

{/* Customer header */}

Your Account

{customerName}

{customerLabel}{customer?.created_at ? ` · Member since ${fmtMonthYear(customer.created_at)}` : ''}

onNavigate('product')} style={{ padding: '12px 24px', fontSize: 12 }}> New Commission

{/* Empty state */} {orders.length === 0 && (

No orders yet

When you place your first commission, it’ll show up here with a step-by-step timeline. onNavigate('product')}>Start a commission

)} {/* Orders */} {orders.length > 0 && Your Orders} {orders.map(order => { const expanded = expandedOrder === order.order_number; return (

{/* Order header */}

setExpandedOrder(expanded ? null : order.order_number)} style={{ padding: 'clamp(16px, 2vw, 24px)', cursor: 'pointer', display: 'grid', gridTemplateColumns: '1fr auto', gap: 16, alignItems: 'center', }} >

#{order.order_number}

{order.item} · {fmtDate(order.placed_at)} · {order.currency} ${Number(order.total_amount).toFixed(2)}

▾

{/* Expanded detail */} {expanded && (

{/* Progress timeline */}

{order.steps.map((step, i) => (

{i < order.steps.length - 1 && (

)}

{step.done && ( )}

{step.label} {step.active ? 'In progress' : fmtShort(step.date)}

))}

{/* Order details */}

{[ ['Order', `#${order.order_number}`], ['Date', fmtDate(order.placed_at)], ['Photos submitted', `${order.photos_submitted} photos`], [order.delivered_at ? 'Delivered' : 'Est. delivery', fmtDate(order.delivered_at || order.estimated_delivery_at)], ].map(([k, v]) => (

{k} {v}

))}

{order.delivered_at && (

Delivered on {fmtDate(order.delivered_at)}

)}

); })} {/* Help */}

Questions about your order? Email hello@jagtarstudio.com

); }; Object.assign(window, { JagtarAccount });