// Healify — Auth, onboarding, mental-health survey, permissions, error & empty states.
// Requires components.jsx + screens-primary.jsx loaded first.
//
// Architecture note: every screen here is reachable through a string route
// from the App router. Onboarding is a self-contained flow with internal
// step state — it doesn't push every step onto the global history stack
// (you don't want Back inside onboarding to feel like browser-back). One
// onboarding "screen" wraps all 8 steps; onboarding completes by
// resetting the stack to 'home'.
const { useState: useStateO, useEffect: useEffectO, useRef: useRefO } = React;
// ══════════════════════════════════════════════════════════════════════════
// Auth — splash + sign in + register + password reset + email verify + MFA
// ══════════════════════════════════════════════════════════════════════════
//
// The auth surface is split into many small screens rather than one giant
// stack so every state is screenshot-able for App Store / docs / QA. Each
// pushes onto the router and uses the standard HTopBar back affordance.
function AuthSplashScreen({ onNavigate }) {
return (
Your AI health coach
Daily check-ins. Your data, understood. Personal plans that adapt.
onNavigate('auth-register')}>Get started onNavigate('auth-signin')}>
I already have an account
By continuing you agree to the Terms & Privacy Policy.
);
}
// ── Tiny reusable input field ─────────────────────────────────────────────
function AuthInput({ label, type = 'text', value, onChange, error, autoFocus, trailing }) {
const [focused, setFocused] = useStateO(false);
return (
);
}
function AuthSignInScreen({ onNavigate, onBack }) {
const [email, setEmail] = useStateO('kathryn@example.com');
const [pw, setPw] = useStateO('');
const [showPw, setShowPw] = useStateO(false);
const [err, setErr] = useStateO(null);
const [social, setSocial] = useStateO(null); // 'apple' | 'google'
const submit = () => {
if (!email.includes('@')) { setErr('Enter a valid email'); return; }
if (pw.length < 6) { setErr('Password must be at least 6 characters'); return; }
setErr(null);
onNavigate('home', {});
};
useEffectO(() => {
if (!social) return;
const t = setTimeout(() => { setSocial(null); onNavigate('home'); }, 1400);
return () => clearTimeout(t);
}, [social]);
return (
);
}
function SurveyResultsScreen({ onNavigate, onBack, phq = 8, gad = 6, phq9 = 0 }) {
// PHQ-9 banding
const phqBand =
phq <= 4 ? { t: 'Minimal', c: H.success, body: 'Below typical screening thresholds.' } :
phq <= 9 ? { t: 'Mild', c: H.success, body: 'Within a normal range — keep an eye on patterns.' } :
phq <= 14 ? { t: 'Moderate', c: H.warning, body: 'Worth monitoring. Consider speaking with a clinician.' } :
phq <= 19 ? { t: 'Mod-severe', c: H.warning, body: 'Speaking with a clinician is recommended.' } :
{ t: 'Severe', c: H.danger, body: 'Speaking with a clinician is strongly recommended.' };
// GAD-7 banding
const gadBand =
gad <= 4 ? { t: 'Minimal', c: H.success, body: 'Below typical screening thresholds.' } :
gad <= 9 ? { t: 'Mild', c: H.success, body: 'Within a normal range.' } :
gad <= 14 ? { t: 'Moderate', c: H.warning, body: 'Worth monitoring.' } :
{ t: 'Severe', c: H.danger, body: 'Speaking with a clinician is recommended.' };
// PHQ-9 question 9 — self-harm flag
const selfHarm = (phq9 || 0) > 0;
return (
{selfHarm && (
We're glad you answered honestly
If you're having thoughts of self-harm, please reach out. In the US, call or text 988. In the UK, call Samaritans on 116 123. Anna will check in with you again tomorrow.
{}}>Get help now
)}
Depression · PHQ-9
{phq}
of 27
{phqBand.t}
{phqBand.body}
Anxiety · GAD-7
{gad}
of 21
{gadBand.t}
{gadBand.body}
What's next
Anna will check in weekly with shorter versions of these questions. Trends over time matter much more than any single score.
onNavigate('permissions-health')}>Connect health data onNavigate('home')}>Skip to dashboard
PHQ-9 & GAD-7 are validated screens, not diagnostic tools.
);
}
function ErrorPaymentDeclinedScreen({ onNavigate, onBack }) {
return (
Card declined
Your bank declined the charge. No money was taken.
Common fixes
{[
'Check that the card number, expiry, and CVV are correct',
'Make sure your card supports international charges',
'Try a different payment method (Apple Pay below)',
'Contact your bank if the issue persists',
].map((t, i) => (
{i+1}
{t}
))}
Try a different card Apple Pay
);
}
// ══════════════════════════════════════════════════════════════════════════
// Empty / first-time states
// ══════════════════════════════════════════════════════════════════════════
function EmptyHomeScreen({ onNavigate }) {
// First-time Home: no score yet, prompt to do basics
return (
Good morning
Let's set you up
Hi, I'm Anna
We'll build your Health Score as your data comes in. Start with one of these.
Get started
{[
{ i: HIcons.vitals, t: 'Connect Apple Health', s: 'Pulls in sleep, vitals, activity', cta: 'Connect', color: 'var(--focus-heart-100)', dest: 'permissions-health' },
{ i: HIcons.nutrition, t: 'Upload bloodwork', s: 'Anna will scan and explain', cta: 'Upload', color: 'var(--focus-nutrition-100)', dest: 'blood' },
{ i: HIcons.mind, t: 'Quick check-in', s: '4 short questions to start', cta: 'Begin', color: 'var(--focus-mental-100)', dest: 'survey-intro' },
].map((c, i) => (
onNavigate(c.dest)} style={{ padding: 14, display: 'flex', alignItems: 'center', gap: 14 }}>
{c.i(c.color)}
{c.t}
{c.s}
{c.cta}
))}
Don't worry about doing everything today. Connect one source and Anna will start tracking. Add more whenever you want.
);
}
function EmptyHealthScreen({ onNavigate }) {
return (
This week
Your Health
Score appears after 3 days of data
Building your baseline
Connect a data source and your Health Score will start computing.
onNavigate('permissions-health')}>Connect Apple Health