// Account.jsx — member dashboard with internal nav: overview / orders / subscription / settings / logout // SECURITY: identity is read from props (server-validated session in prod). No URL param parsing. // All user-supplied fields rendered via React {} (no innerHTML, no reflection). const Account = ({ user, onLogout, onShop }) => { const [view, setView] = React.useState('overview'); const [orders, setOrders] = React.useState([]); const [sub, setSub] = React.useState({ active: false, plan: 'NONE', frequency: '—', bag: '—', grind: '—', price: 0, next: '—', cardBrand: '—', cardLast4: '0000', history: [] }); React.useEffect(() => { window.OBC_API.getOrders().then(setOrders); window.OBC_API.getSubscription().then((s) => { if (s) setSub(s); }); }, []); const navItems = [ { id:'overview', label:'OVERVIEW', glyph:'~' }, { id:'orders', label:'ORDERS', glyph:'>' }, { id:'subscription', label:'SUBSCRIPTION', glyph:'#' }, { id:'settings', label:'SETTINGS', glyph:'$' }, ]; return (
{/* breadcrumb + identity strip */}

{'>'} /account

// authenticated as {user.handle} · tier: {user.tier}
{/* sidebar */} {/* main area */}
{view === 'overview' && } {view === 'orders' && } {view === 'subscription' && } {view === 'settings' && }
); }; // ===================== OVERVIEW ===================== const Overview = ({ user, orders, sub, onView, onShop }) => { const open = orders.filter((o) => o.status !== 'DELIVERED').length; const total = orders.reduce((s, o) => s + o.total, 0); const lastOrder = orders[0]; return (
$ cat welcome.txt
# welcome back, {user.handle}.
# last login: just now. ip: redacted. session: {Math.random().toString(36).slice(2, 10).toUpperCase()}._
{/* stat tiles */}
{/* quick blocks */}
{/* last order */} onView('orders')} cta="./view-all-orders →"> {lastOrder ? ( <>
{lastOrder.id}
placed: {lastOrder.placed} · ${lastOrder.total}
{lastOrder.items.map((i, k) => (
> {i.name} × {i.qty}
))}
) :
// no orders yet.
} {/* sub */} onView('subscription')} cta="./manage →">
{sub.plan}
next ship: {sub.next} · {sub.bag} · {sub.grind}
${sub.price}/mo · charged to •••• {sub.cardLast4}
 {/* shipping */} onView('settings')} cta="./edit →">
{user.shipping.line1}
{user.shipping.line2 && (<>{user.shipping.line2}
)} {user.shipping.city}, {user.shipping.state} {user.shipping.zip}
{user.shipping.country}
{/* tier */} onShop()} cta="./shop →">
{user.tier} {user.points.toLocaleString()} / 2000 PTS
// {2000 - user.points} pts to ROOT tier (free shipping, early drops)
); }; const Stat = ({ label, value, color }) => (
{label}
{value}
); const Block = ({ title, children, cta, onClick }) => (
{ if (onClick) { e.currentTarget.style.borderColor = '#00FF41'; e.currentTarget.style.boxShadow = '0 0 18px rgba(0,255,65,0.18)'; } }} onMouseLeave={(e) => { e.currentTarget.style.borderColor = 'rgba(255,255,255,0.22)'; e.currentTarget.style.boxShadow = 'none'; }}>
{title} {cta && {cta}}
{children}
); const StatusPill = ({ status }) => { const colors = { SHIPPED:'#FFD23F', DELIVERED:'#00FF41', PROCESSING:'#00E5FF', CANCELED:'#FF3344', ACTIVE:'#00FF41', PAUSED:'#FF8C42' }; const c = colors[status] || '#BFBFBF'; return [{status}]; }; // ===================== ORDERS ===================== const Orders = ({ orders }) => { const [open, setOpen] = React.useState(null); return (

./orders --all

// {orders.length} records · sorted desc by date
{/* table header */}
ORDER ID PLACED STATUS TOTAL
{orders.map((o) => (
setOpen(open === o.id ? null : o.id)} style={{ display:'grid', gridTemplateColumns:'1.2fr 1fr 1fr 1fr 0.6fr', gap: 12, padding:'14px', borderBottom:'1px solid rgba(255,255,255,0.12)', cursor:'pointer', alignItems:'center', fontSize: 13, color:'#FFFFFF', background: open === o.id ? 'rgba(0,255,65,0.04)' : 'transparent', }} onMouseEnter={(e) => e.currentTarget.style.background = open === o.id ? 'rgba(0,255,65,0.06)' : 'rgba(255,255,255,0.03)'} onMouseLeave={(e) => e.currentTarget.style.background = open === o.id ? 'rgba(0,255,65,0.04)' : 'transparent'}> {o.id} {o.placed} ${o.total} {open === o.id ? '[ - ]' : '[ + ]'}
{open === o.id && (
{/* items */}
// ITEMS
{o.items.map((i, k) => (
{'>'} {i.name} × {i.qty} · {i.grind}{i.note ? ` ${i.note}` : ''} ${i.price * i.qty}
))}
{/* tracking + actions */}
// SHIPMENT
tracking: {o.track}
./track-shipment ./reorder ./request-help
)}
))}
); }; const SmallBtn = ({ children }) => ( ); // ===================== SUBSCRIPTION ===================== const Subscription = ({ sub, onShop }) => { const [paused, setPaused] = React.useState(!sub.active); const [confirming, setConfirming] = React.useState(null); // 'pause' | 'cancel' | null return (

./subscription

// recurring caffeine delivery
CURRENT PLAN
{sub.plan}
{[ ['NEXT SHIP', paused ? '— PAUSED —' : sub.next], ['FREQUENCY', sub.frequency], ['BAG / GRIND', `${sub.bag} · ${sub.grind}`], ['PRICE / SHIP', `$${sub.price}`], ].map(([k, v]) => (
{k}
{v}
))}
// payment: {sub.cardBrand} •••• {sub.cardLast4} · auto-renew on · cancel anytime.
./change-bean ./change-frequency setConfirming('pause')}>./{paused ? 'resume' : 'pause'} setConfirming('cancel')}>./cancel
{/* confirm dialog (inline, no enumeration vector) */} {confirming && (
// CONFIRM ./{confirming}
{confirming === 'cancel' ? "cancel subscription? your next shipment won't be charged or sent. you can re-subscribe anytime." : (paused ? "resume subscription? next shipment will be scheduled." : "pause subscription? next shipment will be skipped. resume anytime.")}
{ if (confirming === 'pause') setPaused(!paused); setConfirming(null); }}>./confirm setConfirming(null)}>./abort
)} {/* shipment history */}
// SHIPMENT HISTORY
{sub.history.map((h, i) => (
{'>'} {h.date} — {h.sku} ${h.price}
))}
); }; const ActionBtn = ({ children, color = '#00FF41', onClick }) => ( ); // ===================== SETTINGS ===================== const Settings = ({ user }) => { const [form, setForm] = React.useState({ name: user.name, email: user.email, handle: user.handle, ...user.shipping, }); const [saved, setSaved] = React.useState(false); const set = (k, v) => { setForm((f) => ({ ...f, [k]: v })); setSaved(false); }; const submit = (e) => { e.preventDefault(); // Demo only — no submit. In prod, POST to backend w/ CSRF token + server-side validation. setSaved(true); setTimeout(() => setSaved(false), 2400); }; return (

./settings

// identity · shipping · security
set('handle', v)} hint="// public. shown in your receipts." /> set('name', v)} /> set('email', v)} type="email" hint="// used for receipts + 2FA. changes require re-verification." /> set('line1', v)} /> set('line2', v)} />
set('city', v)} /> set('state', v)} /> set('zip', v)} />
{}} type="password" placeholder="required to change anything sensitive" /> {}} type="password" placeholder="min 12 chars · pwned-passwords checked" />
// 2fa: ENABLED (TOTP) · {' '}./regenerate-recovery-codes · {' '}./view-active-sessions
{saved && ( [ OK ] saved. )} // changes audit-logged.
); }; const SettingsGroup = ({ title, children }) => (
{title}
{children}
); const SField = ({ label, value, onChange, type = 'text', placeholder, hint }) => (
{'>'} {label}
onChange(e.target.value)} style={{ width:'100%', background:'#000', border:'1px solid rgba(255,255,255,0.28)', color:'#FFF', fontFamily:'inherit', fontSize: 13, padding:'10px 12px', borderRadius: 2, }} onFocus={(e) => { e.target.style.borderColor = '#00FF41'; e.target.style.boxShadow = '0 0 0 1px #00FF41'; }} onBlur={(e) => { e.target.style.borderColor = 'rgba(255,255,255,0.28)'; e.target.style.boxShadow = 'none'; }} /> {hint &&
{hint}
}
); const Toggle = ({ label, defaultChecked }) => { const [on, setOn] = React.useState(!!defaultChecked); return ( ); }; window.Account = Account;