Session 12: i18n (10 languages, cookie-based), Africa tier .99, locale switcher, RTL Arabic (1305 tests)
This commit is contained in:
@@ -2,6 +2,7 @@
|
||||
|
||||
import { useEffect, useState } from 'react';
|
||||
import Link from 'next/link';
|
||||
import { useT } from '@/contexts/LocaleContext';
|
||||
|
||||
const STORAGE_KEY = 'vyndr_cookie_consent';
|
||||
|
||||
@@ -22,6 +23,7 @@ const STORAGE_KEY = 'vyndr_cookie_consent';
|
||||
* acknowledges that you saw the disclosure.
|
||||
*/
|
||||
export default function CookieConsent() {
|
||||
const t = useT();
|
||||
const [visible, setVisible] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
@@ -78,12 +80,12 @@ export default function CookieConsent() {
|
||||
}}
|
||||
>
|
||||
<span>
|
||||
We use cookies for authentication and anonymized analytics.{' '}
|
||||
{t('cookie.message')}{' '}
|
||||
<Link
|
||||
href="/privacy"
|
||||
style={{ color: 'var(--grade-a)', textDecoration: 'underline', textUnderlineOffset: 2 }}
|
||||
>
|
||||
Privacy policy
|
||||
{t('cookie.privacy_policy')}
|
||||
</Link>
|
||||
.
|
||||
</span>
|
||||
@@ -93,7 +95,7 @@ export default function CookieConsent() {
|
||||
className="btn-primary"
|
||||
style={{ padding: '6px 14px', fontSize: 12 }}
|
||||
>
|
||||
Accept
|
||||
{t('cookie.accept')}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -0,0 +1,139 @@
|
||||
'use client';
|
||||
|
||||
import { useState, useRef, useEffect } from 'react';
|
||||
import { LOCALES, LOCALE_META, LOCALE_COOKIE, Locale } from '@/lib/locales';
|
||||
import { useLocale } from '@/contexts/LocaleContext';
|
||||
|
||||
/**
|
||||
* Locale switcher (Session 12).
|
||||
*
|
||||
* Compact dropdown. Mounted alongside the BETA tag in Nav. On select,
|
||||
* writes the NEXT_LOCALE cookie (Path=/, 1-year expiry) and reloads
|
||||
* the page so the middleware picks up the new locale and the server
|
||||
* components rebuild with the new translations.
|
||||
*
|
||||
* SSR-safe: renders the current locale label before any state mutates
|
||||
* so hydration matches.
|
||||
*/
|
||||
export default function LocaleSwitcher() {
|
||||
const { locale } = useLocale();
|
||||
const [open, setOpen] = useState(false);
|
||||
const containerRef = useRef<HTMLDivElement>(null);
|
||||
|
||||
useEffect(() => {
|
||||
if (!open) return;
|
||||
function onDocClick(e: MouseEvent) {
|
||||
if (containerRef.current && !containerRef.current.contains(e.target as Node)) {
|
||||
setOpen(false);
|
||||
}
|
||||
}
|
||||
document.addEventListener('mousedown', onDocClick);
|
||||
return () => document.removeEventListener('mousedown', onDocClick);
|
||||
}, [open]);
|
||||
|
||||
function pick(next: Locale) {
|
||||
setOpen(false);
|
||||
if (next === locale) return;
|
||||
// 1-year cookie, root path, lax so server-side reads survive
|
||||
// cross-origin navigations (Stripe redirect, OAuth callback).
|
||||
const oneYear = 60 * 60 * 24 * 365;
|
||||
document.cookie = `${LOCALE_COOKIE}=${next}; Path=/; Max-Age=${oneYear}; SameSite=Lax`;
|
||||
// Hard reload so the middleware picks up the cookie and server
|
||||
// components rebuild. Soft router.refresh() would leave the
|
||||
// initial server-rendered locale stale on this page.
|
||||
window.location.reload();
|
||||
}
|
||||
|
||||
const current = LOCALE_META[locale];
|
||||
|
||||
return (
|
||||
<div ref={containerRef} style={{ position: 'relative', display: 'inline-block' }}>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setOpen((v) => !v)}
|
||||
aria-haspopup="listbox"
|
||||
aria-expanded={open}
|
||||
aria-label={`Language: ${current.label}`}
|
||||
className="mono"
|
||||
style={{
|
||||
background: 'transparent',
|
||||
border: '1px solid var(--border)',
|
||||
color: 'var(--text-1)',
|
||||
padding: '4px 8px',
|
||||
fontSize: 11,
|
||||
fontWeight: 700,
|
||||
letterSpacing: '0.08em',
|
||||
textTransform: 'uppercase',
|
||||
borderRadius: 4,
|
||||
cursor: 'pointer',
|
||||
display: 'inline-flex',
|
||||
alignItems: 'center',
|
||||
gap: 4,
|
||||
}}
|
||||
>
|
||||
{locale}
|
||||
<span aria-hidden style={{ fontSize: 8, opacity: 0.6 }}>▾</span>
|
||||
</button>
|
||||
{open && (
|
||||
<ul
|
||||
role="listbox"
|
||||
aria-label="Select language"
|
||||
style={{
|
||||
position: 'absolute',
|
||||
top: 'calc(100% + 6px)',
|
||||
right: 0,
|
||||
minWidth: 180,
|
||||
zIndex: 70,
|
||||
background: 'var(--bg-2, #15151F)',
|
||||
border: '1px solid var(--border)',
|
||||
borderRadius: 6,
|
||||
padding: 4,
|
||||
margin: 0,
|
||||
listStyle: 'none',
|
||||
boxShadow: '0 12px 32px rgba(0,0,0,0.6)',
|
||||
maxHeight: 320,
|
||||
overflowY: 'auto',
|
||||
}}
|
||||
>
|
||||
{LOCALES.map((code) => {
|
||||
const meta = LOCALE_META[code];
|
||||
const active = code === locale;
|
||||
return (
|
||||
<li key={code}>
|
||||
<button
|
||||
type="button"
|
||||
role="option"
|
||||
aria-selected={active}
|
||||
onClick={() => pick(code)}
|
||||
style={{
|
||||
width: '100%',
|
||||
textAlign: 'left',
|
||||
background: active ? 'var(--bg-3, #1A1A26)' : 'transparent',
|
||||
border: 0,
|
||||
padding: '8px 10px',
|
||||
cursor: 'pointer',
|
||||
color: active ? 'var(--grade-a)' : 'var(--text-1)',
|
||||
fontSize: 13,
|
||||
borderRadius: 4,
|
||||
display: 'flex',
|
||||
justifyContent: 'space-between',
|
||||
alignItems: 'baseline',
|
||||
gap: 8,
|
||||
}}
|
||||
>
|
||||
<span>{meta.native}</span>
|
||||
<span
|
||||
className="mono"
|
||||
style={{ fontSize: 10, opacity: 0.55, letterSpacing: '0.06em' }}
|
||||
>
|
||||
{code.toUpperCase()}
|
||||
</span>
|
||||
</button>
|
||||
</li>
|
||||
);
|
||||
})}
|
||||
</ul>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
+21
-11
@@ -4,20 +4,26 @@ import { useState } from 'react';
|
||||
import { useAuth } from '@/contexts/AuthContext';
|
||||
import Wordmark from '@/components/Wordmark';
|
||||
import NotificationBell from '@/components/NotificationBell';
|
||||
|
||||
const NAV_LINKS = [
|
||||
{ label: 'Read', href: '/scan' },
|
||||
{ label: 'Tracker', href: '/tracker' },
|
||||
{ label: 'Ledger', href: '/ledger' },
|
||||
{ label: 'Pricing', href: '/#pricing' },
|
||||
{ label: 'Blog', href: '/blog' },
|
||||
];
|
||||
import LocaleSwitcher from '@/components/LocaleSwitcher';
|
||||
import { useT } from '@/contexts/LocaleContext';
|
||||
|
||||
export default function Nav() {
|
||||
const { user, tier, scansRemaining, signOut } = useAuth();
|
||||
const t = useT();
|
||||
const [mobileOpen, setMobileOpen] = useState(false);
|
||||
const [menuOpen, setMenuOpen] = useState(false);
|
||||
|
||||
// Session 12 — translation labels resolved at render time so a
|
||||
// locale switch flips the nav without a code change. Hrefs stay
|
||||
// English (the [locale]/ refactor is a future session).
|
||||
const NAV_LINKS = [
|
||||
{ label: t('nav.scan'), href: '/scan' },
|
||||
{ label: t('nav.tracker'), href: '/tracker' },
|
||||
{ label: t('nav.ledger'), href: '/ledger' },
|
||||
{ label: t('nav.pricing'), href: '/pricing' },
|
||||
{ label: 'Blog', href: '/blog' },
|
||||
];
|
||||
|
||||
return (
|
||||
<nav
|
||||
style={{
|
||||
@@ -108,6 +114,7 @@ export default function Nav() {
|
||||
</span>
|
||||
)}
|
||||
<NotificationBell />
|
||||
<LocaleSwitcher />
|
||||
<button
|
||||
onClick={() => setMenuOpen((o) => !o)}
|
||||
aria-haspopup="menu"
|
||||
@@ -180,9 +187,12 @@ export default function Nav() {
|
||||
)}
|
||||
</div>
|
||||
) : (
|
||||
<a href="/login" className="btn-primary" style={{ padding: '8px 16px', fontSize: 13 }}>
|
||||
Log In
|
||||
</a>
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
|
||||
<LocaleSwitcher />
|
||||
<a href="/login" className="btn-primary" style={{ padding: '8px 16px', fontSize: 13 }}>
|
||||
{t('nav.login')}
|
||||
</a>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
|
||||
@@ -3,8 +3,10 @@
|
||||
import { useState } from 'react';
|
||||
import { useRouter } from 'next/navigation';
|
||||
import { useAuth } from '@/contexts/AuthContext';
|
||||
import { useT, useLocale } from '@/contexts/LocaleContext';
|
||||
import { AFRICA_LOCALES } from '@/lib/locales';
|
||||
|
||||
type TierId = 'free' | 'analyst' | 'desk';
|
||||
type TierId = 'free' | 'africa' | 'analyst' | 'desk';
|
||||
|
||||
interface TierConfig {
|
||||
id: TierId;
|
||||
@@ -29,7 +31,7 @@ const TIERS: TierConfig[] = [
|
||||
headline: 'Try the model. No card required.',
|
||||
cta: 'Start Free',
|
||||
features: [
|
||||
'5 reads per month',
|
||||
'3 reads per day',
|
||||
'Grade letter + projection',
|
||||
'Cross-book line comparison',
|
||||
'Confidence indicator',
|
||||
@@ -41,6 +43,29 @@ const TIERS: TierConfig[] = [
|
||||
],
|
||||
highlight: false,
|
||||
},
|
||||
// Session 12 — VYNDR Africa tier ($4.99/mo). Slotted between Free
|
||||
// and Analyst. Pricing component reorders dynamically based on
|
||||
// locale (African-language users see this first).
|
||||
{
|
||||
id: 'africa',
|
||||
name: 'VYNDR Africa',
|
||||
price: '$4.99',
|
||||
cadence: '/mo',
|
||||
headline: 'Built for African mobile bettors.',
|
||||
cta: 'Unlock Africa Pricing',
|
||||
features: [
|
||||
'10 reads per day',
|
||||
'Full factor analysis (40+ signals)',
|
||||
'Kill conditions surfaced inline',
|
||||
'Grade + reasoning visible',
|
||||
'World Cup soccer intelligence',
|
||||
],
|
||||
locked: [
|
||||
'Cascade alerts (Analyst+)',
|
||||
'Alt line ladder (Desk only)',
|
||||
],
|
||||
highlight: false,
|
||||
},
|
||||
{
|
||||
id: 'analyst',
|
||||
name: 'Analyst',
|
||||
@@ -88,9 +113,22 @@ const TIERS: TierConfig[] = [
|
||||
export default function Pricing() {
|
||||
const router = useRouter();
|
||||
const { session, loading: authLoading } = useAuth();
|
||||
const { locale } = useLocale();
|
||||
const t = useT();
|
||||
const [pending, setPending] = useState<TierId | null>(null);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
// Session 12 — Africa-language users see VYNDR Africa first. The
|
||||
// tier order is stable per locale (no flicker between renders).
|
||||
// Browser region (NG / KE / ZA / GH) isn't available server-side
|
||||
// without IP geolocation, so we use the locale as a proxy. Users
|
||||
// outside the locale set can still pick the Africa tier; it just
|
||||
// doesn't lead the card grid for them.
|
||||
const orderedTiers = AFRICA_LOCALES.has(locale)
|
||||
? [TIERS.find((x) => x.id === 'africa')!, TIERS.find((x) => x.id === 'free')!,
|
||||
TIERS.find((x) => x.id === 'analyst')!, TIERS.find((x) => x.id === 'desk')!]
|
||||
: TIERS;
|
||||
|
||||
async function startCheckout(tier: TierId) {
|
||||
setError(null);
|
||||
|
||||
@@ -100,6 +138,16 @@ export default function Pricing() {
|
||||
return;
|
||||
}
|
||||
|
||||
// Session 12 — Africa tier: Stripe product + backend validation
|
||||
// not yet wired (intentional this session). Show an honest
|
||||
// "coming soon" instead of a 400. When STRIPE_PRICE_AFRICA is
|
||||
// configured AND the backend accepts the tier, this short-circuit
|
||||
// gets removed and the standard checkout path takes over.
|
||||
if (tier === 'africa') {
|
||||
setError('VYNDR Africa launches once Stripe regional processing is finalized. Email support@vyndr.app to lock the $4.99/mo founder price.');
|
||||
return;
|
||||
}
|
||||
|
||||
// Anonymous → bounce to signup with a returnTo back to /#pricing.
|
||||
if (!session) {
|
||||
router.push('/signup?return=/%23pricing');
|
||||
@@ -171,7 +219,7 @@ export default function Pricing() {
|
||||
)}
|
||||
|
||||
<div className="pricing-grid" style={{ display: 'grid', gap: 24 }}>
|
||||
{TIERS.map((tier, i) => {
|
||||
{orderedTiers.map((tier, i) => {
|
||||
const isPending = pending === tier.id;
|
||||
const isDisabled = authLoading || (pending !== null && !isPending);
|
||||
return (
|
||||
@@ -270,7 +318,15 @@ export default function Pricing() {
|
||||
}
|
||||
@media (min-width: 768px) {
|
||||
:global(.pricing-grid) {
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
/* Session 12 — Africa tier brings the count to 4. On
|
||||
tablet we stay 2-up so cards don't squeeze; desktop
|
||||
unfolds to 4-up at >=1100px. */
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
}
|
||||
}
|
||||
@media (min-width: 1100px) {
|
||||
:global(.pricing-grid) {
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
}
|
||||
}
|
||||
`}</style>
|
||||
|
||||
Reference in New Issue
Block a user