// pages-start.jsx — Trial onboarding: email + topic → 1,200-token article delivery // Route: #/start | API: /api/trial/signup /api/trial/status/{id} 'use strict'; const TICKER_ITEMS = [ 'Researching the topic...', 'Drafting structure...', 'Adding citations...', 'Polishing prose...', 'Sending to your inbox...', ]; function StartPage() { const { t, lang } = useT ? useT() : { t: (k) => k, lang: 'en' }; // Screen state machine const [screen, setScreen] = React.useState('form'); // 'form' | 'pending' | 'done' // Form fields const [email, setEmail] = React.useState(''); const [topic, setTopic] = React.useState(''); const [consent, setConsent] = React.useState(false); // UI state const [error, setError] = React.useState(''); const [submitting, setSubmitting] = React.useState(false); const [tickerIndex, setTickerIndex] = React.useState(0); const [inboxNote, setInboxNote] = React.useState(false); const [revealed, setRevealed] = React.useState(false); const [copied, setCopied] = React.useState(false); // Trial data returned from backend const [trialData, setTrialData] = React.useState(null); // Refs (don't trigger re-renders) const fingerprintRef = React.useRef(''); const refCodeRef = React.useRef(''); // Compute fingerprint + read ?ref= on mount React.useEffect(() => { try { const fp = btoa( [ navigator.userAgent, navigator.language, window.screen.width + 'x' + window.screen.height, Intl.DateTimeFormat().resolvedOptions().timeZone, ].join('|') ).slice(0, 64); fingerprintRef.current = fp; } catch (_) { fingerprintRef.current = 'anon-' + Math.random().toString(36).slice(2); } const params = new URLSearchParams(window.location.search); refCodeRef.current = params.get('ref') || ''; }, []); // Pending screen: ticker + poll + 30s inbox note React.useEffect(() => { if (screen !== 'pending') return; const tickTimer = setInterval(() => { setTickerIndex((i) => (i + 1) % TICKER_ITEMS.length); }, 800); const pollTimer = trialData?.trial_id ? setInterval(async () => { try { const res = await fetch( window.location.origin + '/api/trial/status/' + trialData.trial_id ); if (res.ok) { const data = await res.json(); if (data.article_status === 'done') { setScreen('done'); } } } catch (_) {} }, 5000) : null; const noteTimer = setTimeout(() => setInboxNote(true), 30000); return () => { clearInterval(tickTimer); if (pollTimer) clearInterval(pollTimer); clearTimeout(noteTimer); }; }, [screen, trialData]); // Submit handler async function handleSubmit(e) { e.preventDefault(); if (!consent) { setError('Please check the consent box to continue.'); return; } setSubmitting(true); setError(''); try { const res = await fetch(window.location.origin + '/api/trial/signup', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ email, topic, fingerprint: fingerprintRef.current, consent: true, ref: refCodeRef.current || null, }), }); if (res.ok) { const data = await res.json(); setTrialData(data); setScreen('pending'); } else if (res.status === 409) { setError('This email or device has already used the trial.'); } else { setError('Something went wrong. Please try again.'); } } catch (_) { setError('Something went wrong. Please try again.'); } finally { setSubmitting(false); } } function copyKey() { const key = trialData?.api_key || ''; if (!key) return; navigator.clipboard.writeText(key).catch(() => {}); setCopied(true); setTimeout(() => setCopied(false), 2000); } function maskEmail(addr) { if (!addr || !addr.includes('@')) return addr || ''; const [name, domain] = addr.split('@'); return (name.slice(0, 2) || name) + '••••@' + domain; } // ─── Shared styles ─────────────────────────────────────────────── const wrap = { background: 'var(--paper)', color: 'var(--ink)', minHeight: '100vh', fontFamily: 'var(--sans)', }; const inputBase = { width: '100%', padding: '14px 16px', border: '2px solid var(--ink)', borderRadius: '6px', fontSize: '16px', fontFamily: 'var(--sans)', background: 'var(--paper)', color: 'var(--ink)', boxSizing: 'border-box', outline: 'none', display: 'block', }; const primaryBtn = { width: '100%', padding: '16px', background: 'var(--ink)', color: 'var(--accent)', border: '2px solid var(--ink)', borderRadius: '6px', fontSize: '16px', fontWeight: '700', cursor: 'pointer', letterSpacing: '0.5px', transition: 'opacity 0.15s', }; // ─── SCREEN 1: form ────────────────────────────────────────────── if (screen === 'form') { return (
FREE · 5 MIN

Get a cited article in your inbox

1,200 tokens. No card. Article in 5 minutes.

setEmail(e.target.value)} style={{ ...inputBase, marginBottom: '12px' }} />