// ui_kits/mobile/LearnTab.jsx // Learn hub: How-to / News / Literacy / Simulator. Same nav system as Money tab. const { useState: useStateLT } = React; const LEARN_PAGES = [ { key: 'howto', label: 'How-to' }, { key: 'news', label: 'Diaspora news' }, { key: 'literacy', label: 'Financial literacy' }, { key: 'simulator', label: 'Spending sim' }, ]; function LearnTabContainer({ hidden, onToggleHidden }) { const [page, setPage] = useStateLT(0); const isLanding = page === 0; const currentTitle = LEARN_PAGES[page].label; return (
{/* Crossfading header */}
Learn
setPage(0)} hidden={hidden} onToggleHidden={onToggleHidden} />
{/* Page dots */}
); } // ───────────────────────────────────────────────────────────── // HowToScreen — Goji-specific tours, "what is Safe to Spend", etc. // ───────────────────────────────────────────────────────────── function HowToScreen() { const tours = [ { eyebrow: 'Tour · 90s', title: 'What "Safe to Spend" means', body: 'The one number on your home screen — what it counts, what it deliberately ignores.', icon: 'sparkle' }, { eyebrow: 'How-to · 2m', title: 'Send money home for less', body: 'Compare corridor rates, set FX alerts, and time transfers when NPR is strong.', icon: 'send' }, { eyebrow: 'How-to · 1m', title: 'Set a goal that actually sticks', body: 'Three honest questions to ask before setting any savings target.', icon: 'target' }, { eyebrow: 'How-to · 90s', title: 'Voice add: bills, goals, expenses', body: 'Hold the FAB, speak naturally — Goji parses the intent.', icon: 'mic' }, { eyebrow: 'How-to · 2m', title: 'Hide amounts in public', body: 'Tap the eye in the header to mask all dollar values app-wide.', icon: 'eye' }, ]; return ( {/* Featured tour — gradient hero */}
Welcome tour · 3 min

Take the calm-money tour

Five short lessons covering Safe to Spend, sending home, goals, voice, and privacy.

Quick how-tos
{tours.map(t => (
{t.eyebrow}
{t.title}
{t.body}
))}
); } // ───────────────────────────────────────────────────────────── // DiasporaNewsScreen — curated diaspora finance + remittance headlines // ───────────────────────────────────────────────────────────── function DiasporaNewsScreen() { const featured = { eyebrow: 'Lead · today', source: 'Kathmandu Post', title: 'NPR strengthens against USD as remittances hit record month', body: 'November inflows rose 14% year-on-year, putting upward pressure on the rupee.', }; const stories = [ { source: 'Reuters · 2h', title: 'World Bank: global remittance fees fall under 6% for first time', tag: 'Fees' }, { source: 'Setopati · 5h', title: 'Nepal Rastra Bank tightens foreign currency disclosure rules', tag: 'Policy' }, { source: 'NPR · yesterday', title: 'How diaspora investors are reshaping Lalitpur real estate', tag: 'Real estate' }, { source: 'Economist · 1d', title: 'The new generation of mobile-first cross-border banks', tag: 'Fintech' }, { source: 'Online Khabar · 2d', title: 'Migration data: where Nepalis are sending home from in 2026', tag: 'Migration' }, ]; return (
{featured.eyebrow}

{featured.title}

{featured.body}

{featured.source}
Headlines
{stories.map((s, i) => (
{s.source}
{s.title}
{s.tag}
))}
); } // ───────────────────────────────────────────────────────────── // FinancialLiteracyScreen — structured lessons + progress // ───────────────────────────────────────────────────────────── function FinancialLiteracyScreen() { const tracks = [ { title: 'Budgeting basics', steps: 6, done: 4, color: '#E0876A' }, { title: 'Credit & credit scores', steps: 5, done: 2, color: '#9B7BD6' }, { title: 'Emergency funds', steps: 4, done: 4, color: '#6FCF97' }, { title: 'Investing fundamentals', steps: 8, done: 1, color: '#7BD6C9' }, { title: 'Taxes for diaspora', steps: 7, done: 0, color: '#7E6896' }, ]; return ( {/* Progress hero */}
Your literacy
11 of 30 lessons
~3 hours total · 18 min average per lesson
Tracks
{tracks.map(t => { const pct = Math.round((t.done / t.steps) * 100); return (
{t.title}
{t.done} / {t.steps}{pct === 100 ? ' · done' : ''}
); })}
); } // ───────────────────────────────────────────────────────────── // SpendingSimulator — "what if" projector. Add/remove categories, // swap between weekly and monthly horizons. // ───────────────────────────────────────────────────────────── const SIM_CATEGORY_LIBRARY = [ { name: 'Coffee & dining', color: '#D4AA45', defaultWeek: 20, defaultMonth: 80 }, { name: 'Delivery / takeout', color: '#E0876A', defaultWeek: 30, defaultMonth: 120 }, { name: 'Subscriptions', color: '#9B7BD6', defaultWeek: 15, defaultMonth: 60 }, { name: 'Rideshare', color: '#7BD6C9', defaultWeek: 20, defaultMonth: 80 }, { name: 'Groceries', color: '#92A878', defaultWeek: 80, defaultMonth: 320 }, { name: 'Shopping', color: '#C17A74', defaultWeek: 40, defaultMonth: 160 }, { name: 'Entertainment', color: '#6E7FD4', defaultWeek: 20, defaultMonth: 80 }, { name: 'Personal care', color: '#7DBEB7', defaultWeek: 15, defaultMonth: 60 }, ]; function SpendingSimulator() { const [horizon, setHorizon] = useStateLT('month'); // 'week' | 'month' // Active categories — list of { name, value } const [items, setItems] = useStateLT([ { name: 'Coffee & dining', value: { week: 20, month: 80 } }, { name: 'Delivery / takeout', value: { week: 30, month: 120 } }, { name: 'Subscriptions', value: { week: 15, month: 60 } }, ]); const [addOpen, setAddOpen] = useStateLT(false); const income = horizon === 'week' ? 1052 : 4210; const fixedSpend = horizon === 'week' ? 600 : 2400; const goalAmount = 2500; const goalLabel = 'trip goal'; const setItemValue = (name, v) => { setItems(arr => arr.map(it => it.name === name ? { ...it, value: { ...it.value, [horizon]: v } } : it )); }; const removeItem = (name) => setItems(arr => arr.filter(it => it.name !== name)); const addItem = (cat) => { setItems(arr => arr.concat([{ name: cat.name, value: { week: cat.defaultWeek, month: cat.defaultMonth } }])); setAddOpen(false); }; const totalDiscretionary = items.reduce((s, it) => s + (it.value[horizon] || 0), 0); const totalSpend = fixedSpend + totalDiscretionary; const periodSavings = income - totalSpend; const savingsRate = Math.max(0, Math.round((periodSavings / income) * 100)); // To project to goal, normalize to monthly first. const monthlySavings = horizon === 'week' ? periodSavings * 4.33 : periodSavings; const periodsToGoal = monthlySavings > 0 ? Math.ceil(goalAmount / monthlySavings * (horizon === 'week' ? 4.33 : 1)) : 99; const periodUnit = horizon === 'week' ? 'wk' : 'mo'; const colorFor = (name) => (SIM_CATEGORY_LIBRARY.find(c => c.name === name) || {}).color || '#888888'; const availableToAdd = SIM_CATEGORY_LIBRARY.filter(c => !items.some(it => it.name === c.name)); return ( {/* Horizon toggle */}
{/* Projection hero */}
If you keep this up
{savingsRate}%
Saved per {horizon}
{periodsToGoal}{periodUnit}
To $2,500 {goalLabel}
setAddOpen(o => !o) : undefined}> Tweak your {horizon} {/* Add-category drawer */}
{availableToAdd.map(cat => ( ))}
{items.length === 0 ? (
No categories yet. Tap + Add above to start tweaking.
) : ( items.map(it => ( setItemValue(it.name, v)} onRemove={() => removeItem(it.name)} color={colorFor(it.name)} /> )) )}
{items.length > 0 && ( <> If you cut this in half
Trimming discretionary by 50% would save an extra ${Math.round(totalDiscretionary / 2)} per {horizon}. That's ${Math.round((horizon === 'week' ? (totalDiscretionary / 2) * 4.33 : totalDiscretionary / 2) * 12)} a year toward your goal.
)} ); } function SimSlider({ label, value, min, max, onChange, color, onRemove }) { return (
{label}
{onRemove && ( )}
onChange(Number(e.target.value))} style={{ width: '100%', accentColor: color }} />
); } Object.assign(window, { LearnTabContainer, HowToScreen, DiasporaNewsScreen, FinancialLiteracyScreen, SpendingSimulator, SimSlider, });