phase-2: identity, from the landing hook to the profile screen
Flows A1 to A6 and E3 end to end. A visitor types a RUC on the landing page, sees their real filing dates, registers, verifies a six digit code, grants consent, completes a three step setup and lands on the first run screen, with the profile, consent and audit rows to show for it. API: public RUC lookup behind a token bucket (10/min/IP), the full /me surface (profile, dependents, consents, notification prefs, data export, account deletion), an append-only audit module that exports an insert and nothing else, and a PII module that is the only thing allowed near those tables. Deletion and consent revocation both freeze the account and drop every session, reusing better-auth's ban flag rather than adding a second notion of disabled. Nothing is destroyed yet: the purge is a job for phase 4. deadlineDigit is always derived server side, never accepted from the client. Web: landing with the RUC hook, registration, OTP verification, consent, the setup wizard, the profile screen with "Tus datos", and legal pages that ship as marked placeholders per COPY.md section 13. Money, Skeleton, Switch and EmptyState components added. The seed is now complete for identity: Maria at 4123456-1, filing digit 6 and day 19, with a dependant, consents and prefs; Carlos as an IVA-only company. Two real defects found by building the screens and fixed with tests: the OTP boxes dropped a digit because the handler fired effects inside a setState updater that React 19 invokes twice, and the switch knob rendered outside its track because translate-x-5.5 does not resolve. 232 vitest tests, 26 Playwright tests across mobile and desktop, coverage still 100% on the rules, typecheck and lint clean. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
Michilis
co-authored by
Claude Opus 5
Claude Opus 5
parent
80b10c958e
commit
0d7651b17c
@@ -0,0 +1,8 @@
|
||||
import { setRequestLocale } from 'next-intl/server';
|
||||
import { SetupWizard } from './setup-wizard';
|
||||
|
||||
export default async function SetupPage({ params }: { params: Promise<{ locale: string }> }) {
|
||||
const { locale } = await params;
|
||||
setRequestLocale(locale);
|
||||
return <SetupWizard locale={locale} />;
|
||||
}
|
||||
@@ -0,0 +1,386 @@
|
||||
'use client';
|
||||
|
||||
import type { LookupDto, Obligation, Relationship } from '@impuestos/contracts';
|
||||
import { formatGsAmount, isLocale } from '@impuestos/i18n';
|
||||
import { useMutation } from '@tanstack/react-query';
|
||||
import { useState } from 'react';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Card } from '@/components/ui/card';
|
||||
import { Input } from '@/components/ui/input';
|
||||
import { Label } from '@/components/ui/label';
|
||||
import { Switch } from '@/components/ui/switch';
|
||||
import { useRouter } from '@/i18n/navigation';
|
||||
import { useT } from '@/i18n/t';
|
||||
import { api } from '@/lib/api';
|
||||
import { cn } from '@/lib/utils';
|
||||
|
||||
const TOTAL_STEPS = 3;
|
||||
const RELATIONSHIPS: Relationship[] = ['conyuge', 'hijo', 'padre', 'otro'];
|
||||
|
||||
interface Dependent {
|
||||
displayName: string;
|
||||
relationship: Relationship;
|
||||
}
|
||||
|
||||
/** Flow A5: three steps, progress dots, nothing that cannot be changed later in /perfil. */
|
||||
export function SetupWizard({ locale }: { locale: string }) {
|
||||
const t = useT();
|
||||
const router = useRouter();
|
||||
|
||||
const [step, setStep] = useState(1);
|
||||
const [fullName, setFullName] = useState('');
|
||||
const [doc, setDoc] = useState('');
|
||||
const [lookup, setLookup] = useState<LookupDto | null>(null);
|
||||
const [taxpayerKind, setTaxpayerKind] = useState<'individual' | 'company'>('individual');
|
||||
const [hasIva, setHasIva] = useState(false);
|
||||
const [hasIrp, setHasIrp] = useState(false);
|
||||
const [income, setIncome] = useState('');
|
||||
const [dependents, setDependents] = useState<Dependent[]>([]);
|
||||
const [emailAlerts, setEmailAlerts] = useState(true);
|
||||
|
||||
const check = useMutation({
|
||||
mutationFn: (value: string) => api.lookupRuc(value),
|
||||
onSuccess: setLookup,
|
||||
});
|
||||
|
||||
const save = useMutation({
|
||||
mutationFn: async () => {
|
||||
const resolved = lookup?.valid ? lookup : await api.lookupRuc(doc.trim());
|
||||
if (!resolved.valid) throw new Error('invalid_document');
|
||||
|
||||
const since = new Date().toISOString().slice(0, 10);
|
||||
const obligations: Obligation[] = [];
|
||||
// "No estoy seguro" leaves both off, which lands on the IRP view (FLOWS.md A5).
|
||||
if (hasIva) obligations.push({ code: 'iva_120', active: true, since });
|
||||
if (hasIrp || (!hasIva && !hasIrp)) obligations.push({ code: 'irp_515', active: true, since });
|
||||
|
||||
await api.putProfile({
|
||||
fullName: fullName.trim(),
|
||||
docType: resolved.docType,
|
||||
ruc: resolved.docType === 'ruc' ? resolved.base : null,
|
||||
rucDv: resolved.dv === null ? null : String(resolved.dv),
|
||||
ci: resolved.docType === 'ci' ? resolved.base : resolved.base,
|
||||
taxpayerKind,
|
||||
obligations,
|
||||
irpGrossEstimate: income === '' ? null : Number(income.replace(/\D/g, '')),
|
||||
autoConfirmDays: 7,
|
||||
locale: isLocale(locale) ? locale : 'es',
|
||||
});
|
||||
|
||||
for (const dependent of dependents) {
|
||||
await api.createDependent(dependent);
|
||||
}
|
||||
await api.patchNotificationPrefs({ emailEnabled: emailAlerts });
|
||||
},
|
||||
onSuccess: () => router.push('/inicio'),
|
||||
});
|
||||
|
||||
const canContinue =
|
||||
step === 1 ? fullName.trim().length > 0 && lookup?.valid === true : true;
|
||||
|
||||
return (
|
||||
<div className="space-y-6 py-4">
|
||||
<ProgressDots step={step} />
|
||||
|
||||
{step === 1 ? (
|
||||
<Card className="space-y-4">
|
||||
<h1 className="text-2xl font-semibold tracking-tight">{t('setup.step1.title')}</h1>
|
||||
|
||||
<div className="space-y-1.5">
|
||||
<Label htmlFor="fullName">{t('setup.fullName')}</Label>
|
||||
<Input
|
||||
id="fullName"
|
||||
value={fullName}
|
||||
autoComplete="name"
|
||||
onChange={(event) => setFullName(event.target.value)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="space-y-1.5">
|
||||
<Label htmlFor="doc">{t('setup.docLabel')}</Label>
|
||||
<Input
|
||||
id="doc"
|
||||
inputMode="numeric"
|
||||
value={doc}
|
||||
aria-invalid={lookup !== null && !lookup.valid}
|
||||
aria-describedby="doc-help"
|
||||
onChange={(event) => {
|
||||
setDoc(event.target.value);
|
||||
setLookup(null);
|
||||
}}
|
||||
onBlur={() => {
|
||||
if (doc.trim().length > 0) check.mutate(doc.trim());
|
||||
}}
|
||||
/>
|
||||
<p id="doc-help" className="text-sm text-[var(--text-muted)]">
|
||||
{t('setup.docHelp')}
|
||||
</p>
|
||||
{lookup !== null && !lookup.valid ? (
|
||||
<p role="alert" className="text-sm text-overdue">
|
||||
{t('landing.invalidDoc')}
|
||||
</p>
|
||||
) : null}
|
||||
{lookup?.valid ? (
|
||||
<p className="text-sm text-positive">
|
||||
{t('setup.deadlineNote', { day: lookup.deadlineDay })}
|
||||
</p>
|
||||
) : null}
|
||||
</div>
|
||||
|
||||
<fieldset className="space-y-2">
|
||||
<legend className="text-sm font-medium text-[var(--text-muted)]">
|
||||
{t('setup.taxpayerKind.q')}
|
||||
</legend>
|
||||
<div className="grid grid-cols-2 gap-2">
|
||||
<ChoiceCard
|
||||
selected={taxpayerKind === 'individual'}
|
||||
onSelect={() => setTaxpayerKind('individual')}
|
||||
title={t('setup.taxpayerKind.ind')}
|
||||
/>
|
||||
<ChoiceCard
|
||||
selected={taxpayerKind === 'company'}
|
||||
onSelect={() => setTaxpayerKind('company')}
|
||||
title={t('setup.taxpayerKind.com')}
|
||||
/>
|
||||
</div>
|
||||
</fieldset>
|
||||
</Card>
|
||||
) : null}
|
||||
|
||||
{step === 2 ? (
|
||||
<Card className="space-y-4">
|
||||
<h1 className="text-2xl font-semibold tracking-tight">{t('setup.step2.title')}</h1>
|
||||
|
||||
<div className="space-y-2">
|
||||
<ChoiceCard
|
||||
selected={hasIva}
|
||||
onSelect={() => setHasIva(!hasIva)}
|
||||
title={t('setup.oblig.iva.title')}
|
||||
body={t('setup.oblig.iva.body')}
|
||||
/>
|
||||
<ChoiceCard
|
||||
selected={hasIrp}
|
||||
onSelect={() => setHasIrp(!hasIrp)}
|
||||
title={t('setup.oblig.irp.title')}
|
||||
body={t('setup.oblig.irp.body')}
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
className="w-full py-2 text-sm text-[var(--text-muted)] underline"
|
||||
onClick={() => {
|
||||
setHasIva(false);
|
||||
setHasIrp(false);
|
||||
setStep(3);
|
||||
}}
|
||||
>
|
||||
{t('setup.oblig.unsure')}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{hasIrp ? (
|
||||
<>
|
||||
<div className="space-y-1.5">
|
||||
<Label htmlFor="income">{t('setup.income.q')}</Label>
|
||||
<Input
|
||||
id="income"
|
||||
inputMode="numeric"
|
||||
value={income === '' ? '' : formatGsAmount(Number(income))}
|
||||
aria-describedby="income-help"
|
||||
onChange={(event) => setIncome(event.target.value.replace(/\D/g, ''))}
|
||||
/>
|
||||
<p id="income-help" className="text-sm text-[var(--text-muted)]">
|
||||
{t('setup.income.help')}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<DependentsEditor
|
||||
dependents={dependents}
|
||||
onChange={setDependents}
|
||||
relationships={RELATIONSHIPS}
|
||||
/>
|
||||
</>
|
||||
) : null}
|
||||
</Card>
|
||||
) : null}
|
||||
|
||||
{step === 3 ? (
|
||||
<Card className="space-y-4">
|
||||
<h1 className="text-2xl font-semibold tracking-tight">{t('setup.step3.title')}</h1>
|
||||
<p className="text-sm text-[var(--text-muted)] text-pretty">{t('setup.push.body')}</p>
|
||||
|
||||
<label className="flex items-center justify-between gap-4">
|
||||
<span className="text-sm">{t('notif.email')}</span>
|
||||
<Switch
|
||||
checked={emailAlerts}
|
||||
onCheckedChange={setEmailAlerts}
|
||||
label={t('notif.email')}
|
||||
/>
|
||||
</label>
|
||||
|
||||
{save.isError ? (
|
||||
<p role="alert" className="text-sm text-overdue">
|
||||
{t('common.error.generic')}
|
||||
</p>
|
||||
) : null}
|
||||
</Card>
|
||||
) : null}
|
||||
|
||||
<div className="flex gap-3">
|
||||
{step > 1 ? (
|
||||
<Button type="button" variant="secondary" onClick={() => setStep(step - 1)}>
|
||||
{t('common.back')}
|
||||
</Button>
|
||||
) : null}
|
||||
|
||||
{step < TOTAL_STEPS ? (
|
||||
<Button
|
||||
type="button"
|
||||
size="lg"
|
||||
block
|
||||
disabled={!canContinue}
|
||||
onClick={() => setStep(step + 1)}
|
||||
>
|
||||
{t('common.continue')}
|
||||
</Button>
|
||||
) : (
|
||||
<Button
|
||||
type="button"
|
||||
size="lg"
|
||||
block
|
||||
disabled={save.isPending}
|
||||
onClick={() => save.mutate()}
|
||||
>
|
||||
{save.isPending ? t('common.saving') : t('setup.finish')}
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function ProgressDots({ step }: { step: number }) {
|
||||
const t = useT();
|
||||
return (
|
||||
<div
|
||||
className="flex items-center gap-2"
|
||||
role="status"
|
||||
aria-label={t('setup.progress', { step, total: TOTAL_STEPS })}
|
||||
>
|
||||
{Array.from({ length: TOTAL_STEPS }).map((_, index) => (
|
||||
<span
|
||||
key={index}
|
||||
aria-hidden
|
||||
className={cn(
|
||||
'h-1.5 flex-1 rounded-full transition-colors',
|
||||
index < step ? 'bg-accent-600' : 'bg-[var(--border-subtle)]',
|
||||
)}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function ChoiceCard({
|
||||
selected,
|
||||
onSelect,
|
||||
title,
|
||||
body,
|
||||
}: {
|
||||
selected: boolean;
|
||||
onSelect: () => void;
|
||||
title: string;
|
||||
body?: string;
|
||||
}) {
|
||||
return (
|
||||
<button
|
||||
type="button"
|
||||
aria-pressed={selected}
|
||||
onClick={onSelect}
|
||||
className={cn(
|
||||
'rounded-2xl border p-4 text-left transition-colors',
|
||||
'focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent-600',
|
||||
selected ? 'border-accent-600 bg-accent-50' : 'bg-[var(--surface-raised)]',
|
||||
)}
|
||||
>
|
||||
<span className="block font-medium">{title}</span>
|
||||
{body ? (
|
||||
<span className="mt-1 block text-sm text-[var(--text-muted)] text-pretty">{body}</span>
|
||||
) : null}
|
||||
</button>
|
||||
);
|
||||
}
|
||||
|
||||
function DependentsEditor({
|
||||
dependents,
|
||||
onChange,
|
||||
relationships,
|
||||
}: {
|
||||
dependents: Dependent[];
|
||||
onChange: (next: Dependent[]) => void;
|
||||
relationships: Relationship[];
|
||||
}) {
|
||||
const t = useT();
|
||||
const [name, setName] = useState('');
|
||||
const [relationship, setRelationship] = useState<Relationship>('hijo');
|
||||
|
||||
return (
|
||||
<div className="space-y-3 border-t pt-4">
|
||||
<div>
|
||||
<h2 className="font-medium">{t('setup.dependents.title')}</h2>
|
||||
<p className="text-sm text-[var(--text-muted)] text-pretty">{t('setup.dependents.help')}</p>
|
||||
</div>
|
||||
|
||||
{dependents.length > 0 ? (
|
||||
<ul className="space-y-2">
|
||||
{dependents.map((dependent, index) => (
|
||||
<li key={`${dependent.displayName}-${index}`} className="flex items-center justify-between gap-3 text-sm">
|
||||
<span>
|
||||
{dependent.displayName} ({t(`relationship.${dependent.relationship}` as const)})
|
||||
</span>
|
||||
<button
|
||||
type="button"
|
||||
className="text-sm text-overdue underline"
|
||||
onClick={() => onChange(dependents.filter((_, i) => i !== index))}
|
||||
>
|
||||
{t('common.remove')}
|
||||
</button>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
) : null}
|
||||
|
||||
<div className="flex flex-wrap gap-2">
|
||||
<Input
|
||||
aria-label={t('setup.dependents.name')}
|
||||
placeholder={t('setup.dependents.name')}
|
||||
value={name}
|
||||
className="flex-1"
|
||||
onChange={(event) => setName(event.target.value)}
|
||||
/>
|
||||
<select
|
||||
aria-label={t('setup.dependents.rel')}
|
||||
value={relationship}
|
||||
onChange={(event) => setRelationship(event.target.value as Relationship)}
|
||||
className="h-12 rounded-2xl border bg-[var(--surface-raised)] px-3 text-base"
|
||||
>
|
||||
{relationships.map((value) => (
|
||||
<option key={value} value={value}>
|
||||
{t(`relationship.${value}` as const)}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
<Button
|
||||
type="button"
|
||||
variant="secondary"
|
||||
disabled={name.trim().length === 0}
|
||||
onClick={() => {
|
||||
onChange([...dependents, { displayName: name.trim(), relationship }]);
|
||||
setName('');
|
||||
}}
|
||||
>
|
||||
{t('common.add')}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,95 @@
|
||||
'use client';
|
||||
|
||||
import { useMutation } from '@tanstack/react-query';
|
||||
import { useState } from 'react';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Card } from '@/components/ui/card';
|
||||
import { Switch } from '@/components/ui/switch';
|
||||
import { Link, useRouter } from '@/i18n/navigation';
|
||||
import { useT } from '@/i18n/t';
|
||||
import { api } from '@/lib/api';
|
||||
|
||||
/**
|
||||
* Flow A4. Plain language, two switches, one screen. Data processing is required to
|
||||
* continue; notifications are genuinely optional and nothing nags about them later.
|
||||
*/
|
||||
export function ConsentForm() {
|
||||
const t = useT();
|
||||
const router = useRouter();
|
||||
const [dataProcessing, setDataProcessing] = useState(false);
|
||||
const [notifications, setNotifications] = useState(true);
|
||||
|
||||
const grant = useMutation({
|
||||
mutationFn: async () => {
|
||||
await api.postConsent({ kind: 'data_processing', granted: true });
|
||||
await api.postConsent({ kind: 'notifications', granted: notifications });
|
||||
},
|
||||
onSuccess: () => router.push('/configuracion'),
|
||||
});
|
||||
|
||||
return (
|
||||
<Card className="space-y-6">
|
||||
<div className="space-y-3">
|
||||
<h1 className="text-2xl font-semibold tracking-tight text-balance">{t('consent.title')}</h1>
|
||||
<p className="text-sm text-[var(--text-muted)] text-pretty">{t('consent.intro')}</p>
|
||||
<ul className="space-y-2 text-sm text-[var(--text-muted)]">
|
||||
{['consent.bullet1', 'consent.bullet2', 'consent.bullet3'].map((key) => (
|
||||
<li key={key} className="flex gap-2">
|
||||
<span aria-hidden className="text-positive">
|
||||
✓
|
||||
</span>
|
||||
<span className="text-pretty">{t(key as 'consent.bullet1')}</span>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div className="space-y-4">
|
||||
<label className="flex items-start justify-between gap-4">
|
||||
<span className="text-sm text-pretty">{t('consent.dataProcessing')}</span>
|
||||
<Switch
|
||||
checked={dataProcessing}
|
||||
onCheckedChange={setDataProcessing}
|
||||
label={t('consent.dataProcessing')}
|
||||
/>
|
||||
</label>
|
||||
<label className="flex items-start justify-between gap-4">
|
||||
<span className="text-sm text-pretty">{t('consent.notifications')}</span>
|
||||
<Switch
|
||||
checked={notifications}
|
||||
onCheckedChange={setNotifications}
|
||||
label={t('consent.notifications')}
|
||||
/>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
{!dataProcessing ? (
|
||||
<p className="text-sm text-[var(--text-muted)]">{t('consent.required')}</p>
|
||||
) : null}
|
||||
|
||||
{grant.isError ? (
|
||||
<p role="alert" className="text-sm text-overdue">
|
||||
{t('common.error.generic')}
|
||||
</p>
|
||||
) : null}
|
||||
|
||||
<div className="space-y-3">
|
||||
<Button
|
||||
type="button"
|
||||
size="lg"
|
||||
block
|
||||
disabled={!dataProcessing || grant.isPending}
|
||||
onClick={() => grant.mutate()}
|
||||
>
|
||||
{grant.isPending ? t('common.saving') : t('consent.accept')}
|
||||
</Button>
|
||||
<Link
|
||||
href="/legal/privacidad"
|
||||
className="block text-center text-sm text-accent-700 hover:underline"
|
||||
>
|
||||
{t('consent.policyLink')}
|
||||
</Link>
|
||||
</div>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,8 @@
|
||||
import { setRequestLocale } from 'next-intl/server';
|
||||
import { ConsentForm } from './consent-form';
|
||||
|
||||
export default async function ConsentPage({ params }: { params: Promise<{ locale: string }> }) {
|
||||
const { locale } = await params;
|
||||
setRequestLocale(locale);
|
||||
return <ConsentForm />;
|
||||
}
|
||||
@@ -1,15 +1,17 @@
|
||||
import { isApiError } from '@impuestos/contracts';
|
||||
import { ScanLine } from 'lucide-react';
|
||||
import { setRequestLocale } from 'next-intl/server';
|
||||
import { getT } from '@/i18n/t';
|
||||
import { redirect } from '@/i18n/navigation';
|
||||
import { buttonClasses } from '@/components/ui/button';
|
||||
import { Card } from '@/components/ui/card';
|
||||
import { LanguageSwitcher } from '@/components/language-switcher';
|
||||
import { EmptyState } from '@/components/ui/empty-state';
|
||||
import { Link, redirect } from '@/i18n/navigation';
|
||||
import { getT } from '@/i18n/t';
|
||||
import { serverApi } from '@/lib/api-server';
|
||||
|
||||
/**
|
||||
* Phase 0 shell. It exists to prove the whole chain end to end: browser to the Next
|
||||
* rewrite, to the API, through the typed client, with the session cookie intact.
|
||||
* The real dashboard (FLOWS.md Flow C) replaces this in phase 4.
|
||||
* Flow A6, the first run state. The dashboard proper (Flow C, with the position header,
|
||||
* next action strip and insight feed) replaces this body in phase 4; deadlines come from
|
||||
* the deadline engine then, not from a second copy of the rules in the browser.
|
||||
*/
|
||||
export default async function InicioPage({ params }: { params: Promise<{ locale: string }> }) {
|
||||
const { locale } = await params;
|
||||
@@ -19,34 +21,40 @@ export default async function InicioPage({ params }: { params: Promise<{ locale:
|
||||
const api = await serverApi();
|
||||
const profile = await api.getProfile().catch((error: unknown) => {
|
||||
if (!isApiError(error)) throw error;
|
||||
// 404 is the documented state for a user who has not finished setup yet.
|
||||
if (error.code === 'not_found') return null;
|
||||
if (error.code === 'unauthorized') redirect({ href: '/login', locale });
|
||||
throw error;
|
||||
});
|
||||
|
||||
return (
|
||||
<div className="mx-auto flex min-h-dvh max-w-2xl flex-col">
|
||||
<header className="flex items-center justify-between px-5 py-4">
|
||||
<h1 className="text-base font-semibold tracking-tight">{t('home.title')}</h1>
|
||||
<LanguageSwitcher />
|
||||
</header>
|
||||
// No profile means setup was never finished, so send them there rather than showing an
|
||||
// empty shell they cannot act on.
|
||||
if (!profile) redirect({ href: '/configuracion', locale });
|
||||
|
||||
<main className="px-5 pb-16">
|
||||
<Card className="space-y-2">
|
||||
{profile ? (
|
||||
<>
|
||||
<p className="text-sm text-[var(--text-muted)]">{t('setup.fullName')}</p>
|
||||
<p className="text-2xl font-semibold tracking-tight">{profile.fullName}</p>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<h2 className="text-xl font-semibold tracking-tight">{t('setup.step1.title')}</h2>
|
||||
<p className="text-sm text-[var(--text-muted)]">{t('setup.income.help')}</p>
|
||||
</>
|
||||
)}
|
||||
</Card>
|
||||
</main>
|
||||
return (
|
||||
<div className="space-y-6 py-4">
|
||||
<div>
|
||||
<h1 className="text-2xl font-semibold tracking-tight">{t('home.title')}</h1>
|
||||
<p className="text-sm text-[var(--text-muted)]">{profile?.fullName}</p>
|
||||
</div>
|
||||
|
||||
<Card>
|
||||
<EmptyState
|
||||
icon={<ScanLine aria-hidden className="size-8" />}
|
||||
title={t('home.firstRun.title')}
|
||||
body={t('home.firstRun.body')}
|
||||
action={
|
||||
<div className="flex flex-col items-center gap-2">
|
||||
{/* Scanning and manual entry arrive with the ingestion pipeline in phase 3. */}
|
||||
<Link href="/comprobantes" className={buttonClasses({ size: 'lg' })}>
|
||||
{t('home.firstRun.scan')}
|
||||
</Link>
|
||||
<Link href="/comprobantes" className="text-sm text-accent-700 hover:underline">
|
||||
{t('home.firstRun.manual')}
|
||||
</Link>
|
||||
</div>
|
||||
}
|
||||
/>
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -0,0 +1,24 @@
|
||||
import type { ReactNode } from 'react';
|
||||
import { LanguageSwitcher } from '@/components/language-switcher';
|
||||
import { Link } from '@/i18n/navigation';
|
||||
import { useT } from '@/i18n/t';
|
||||
|
||||
export default function AppLayout({ children }: { children: ReactNode }) {
|
||||
const t = useT();
|
||||
return (
|
||||
<div className="mx-auto flex min-h-dvh w-full max-w-2xl flex-col">
|
||||
<header className="flex items-center justify-between px-5 py-4">
|
||||
<Link href="/inicio" className="text-base font-semibold tracking-tight">
|
||||
{t('common.appName')}
|
||||
</Link>
|
||||
<div className="flex items-center gap-4">
|
||||
<LanguageSwitcher />
|
||||
<Link href="/perfil" className="text-sm font-medium text-accent-700 hover:underline">
|
||||
{t('profile.title')}
|
||||
</Link>
|
||||
</div>
|
||||
</header>
|
||||
<main className="flex-1 px-5 pb-16">{children}</main>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,132 @@
|
||||
'use client';
|
||||
|
||||
import { useMutation, useQuery } from '@tanstack/react-query';
|
||||
import { useRef, useState } from 'react';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Card } from '@/components/ui/card';
|
||||
import { Input } from '@/components/ui/input';
|
||||
import { Label } from '@/components/ui/label';
|
||||
import { useT } from '@/i18n/t';
|
||||
import { api } from '@/lib/api';
|
||||
import { authClient } from '@/lib/auth-client';
|
||||
|
||||
/**
|
||||
* "Tus datos", the trust section of FLOWS.md E3: what we hold, the consent behind it,
|
||||
* and the two ways to take it back. The export is a plain link so the browser downloads
|
||||
* it; deletion is a native dialog that will not proceed until the email is typed out.
|
||||
*/
|
||||
export function DangerZone() {
|
||||
const t = useT();
|
||||
const dialog = useRef<HTMLDialogElement>(null);
|
||||
const [confirmText, setConfirmText] = useState('');
|
||||
|
||||
const session = useQuery({
|
||||
queryKey: ['session'],
|
||||
queryFn: async () => (await authClient.getSession()).data,
|
||||
});
|
||||
const email = session.data?.user.email ?? '';
|
||||
|
||||
const revoke = useMutation({
|
||||
mutationFn: () => api.postConsent({ kind: 'data_processing', granted: false }),
|
||||
onSuccess: () => window.location.assign('/'),
|
||||
});
|
||||
|
||||
const remove = useMutation({
|
||||
mutationFn: () => api.deleteAccount({ confirmText }),
|
||||
onSuccess: () => window.location.assign('/'),
|
||||
});
|
||||
|
||||
return (
|
||||
<Card className="space-y-5">
|
||||
<div>
|
||||
<h2 className="font-semibold tracking-tight">{t('profile.myData.title')}</h2>
|
||||
<p className="text-sm text-[var(--text-muted)] text-pretty">{t('profile.myData.body')}</p>
|
||||
</div>
|
||||
|
||||
<p className="text-sm text-[var(--text-muted)] text-pretty">{t('profile.myData.stored')}</p>
|
||||
|
||||
{/* A plain link, not a fetch: the browser saves the file and the API sets the name. */}
|
||||
<a
|
||||
href="/api/me/data-export"
|
||||
download
|
||||
className="inline-flex text-sm font-medium text-accent-700 hover:underline"
|
||||
>
|
||||
{t('profile.myData.export')}
|
||||
</a>
|
||||
|
||||
<div className="space-y-2 border-t pt-4">
|
||||
<p className="text-sm text-[var(--text-muted)] text-pretty">
|
||||
{t('profile.consent.revokeWarn')}
|
||||
</p>
|
||||
<Button
|
||||
type="button"
|
||||
variant="secondary"
|
||||
disabled={revoke.isPending}
|
||||
onClick={() => revoke.mutate()}
|
||||
>
|
||||
{t('profile.consent.revoke')}
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2 border-t pt-4">
|
||||
<p className="text-sm text-overdue text-pretty">{t('profile.myData.deleteWarn')}</p>
|
||||
<Button
|
||||
type="button"
|
||||
variant="secondary"
|
||||
className="border-overdue text-overdue"
|
||||
onClick={() => dialog.current?.showModal()}
|
||||
>
|
||||
{t('profile.myData.delete')}
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<dialog
|
||||
ref={dialog}
|
||||
aria-label={t('profile.myData.delete')}
|
||||
className="m-auto w-[min(28rem,calc(100vw-2rem))] rounded-2xl border bg-[var(--surface-raised)] p-6 text-[var(--text)] backdrop:bg-black/40"
|
||||
>
|
||||
<div className="space-y-4">
|
||||
<h3 className="text-lg font-semibold tracking-tight">{t('profile.myData.delete')}</h3>
|
||||
<p className="text-sm text-[var(--text-muted)] text-pretty">
|
||||
{t('profile.myData.deleteWarn')}
|
||||
</p>
|
||||
|
||||
<div className="space-y-1.5">
|
||||
<Label htmlFor="confirmText">{t('profile.myData.deletePrompt', { email })}</Label>
|
||||
<Input
|
||||
id="confirmText"
|
||||
value={confirmText}
|
||||
autoComplete="off"
|
||||
aria-invalid={remove.isError}
|
||||
onChange={(event) => setConfirmText(event.target.value)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{remove.isError ? (
|
||||
<p role="alert" className="text-sm text-overdue">
|
||||
{t('common.error.generic')}
|
||||
</p>
|
||||
) : null}
|
||||
|
||||
<div className="flex justify-end gap-2">
|
||||
<Button type="button" variant="ghost" onClick={() => dialog.current?.close()}>
|
||||
{t('common.cancel')}
|
||||
</Button>
|
||||
<Button
|
||||
type="button"
|
||||
className="bg-overdue hover:bg-overdue"
|
||||
disabled={
|
||||
remove.isPending ||
|
||||
confirmText.trim().toLowerCase() !== email.toLowerCase() ||
|
||||
email === ''
|
||||
}
|
||||
onClick={() => remove.mutate()}
|
||||
>
|
||||
{t('profile.myData.deleteCta')}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</dialog>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,116 @@
|
||||
'use client';
|
||||
|
||||
import type { Relationship } from '@impuestos/contracts';
|
||||
import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
|
||||
import { useState } from 'react';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Card } from '@/components/ui/card';
|
||||
import { Input } from '@/components/ui/input';
|
||||
import { Skeleton } from '@/components/ui/skeleton';
|
||||
import { useT } from '@/i18n/t';
|
||||
import { api } from '@/lib/api';
|
||||
|
||||
const RELATIONSHIPS: Relationship[] = ['conyuge', 'hijo', 'padre', 'otro'];
|
||||
|
||||
export function DependentsSection() {
|
||||
const t = useT();
|
||||
const queryClient = useQueryClient();
|
||||
const [name, setName] = useState('');
|
||||
const [relationship, setRelationship] = useState<Relationship>('hijo');
|
||||
|
||||
const dependents = useQuery({
|
||||
queryKey: ['me', 'dependents'],
|
||||
queryFn: ({ signal }) => api.listDependents(signal),
|
||||
});
|
||||
|
||||
const invalidate = () => queryClient.invalidateQueries({ queryKey: ['me', 'dependents'] });
|
||||
|
||||
const add = useMutation({
|
||||
mutationFn: () => api.createDependent({ displayName: name.trim(), relationship }),
|
||||
onSuccess: async () => {
|
||||
setName('');
|
||||
await invalidate();
|
||||
},
|
||||
});
|
||||
|
||||
const remove = useMutation({
|
||||
mutationFn: (id: string) => api.deleteDependent(id),
|
||||
onSuccess: invalidate,
|
||||
});
|
||||
|
||||
return (
|
||||
<Card className="space-y-4">
|
||||
<div>
|
||||
<h2 className="font-semibold tracking-tight">{t('profile.dependents')}</h2>
|
||||
<p className="text-sm text-[var(--text-muted)] text-pretty">{t('setup.dependents.help')}</p>
|
||||
</div>
|
||||
|
||||
{dependents.isPending ? <Skeleton name="doc-list-item" count={2} /> : null}
|
||||
|
||||
{dependents.isError ? (
|
||||
<div className="space-y-2">
|
||||
<p role="alert" className="text-sm text-overdue">
|
||||
{t('common.error.generic')}
|
||||
</p>
|
||||
<Button type="button" variant="secondary" onClick={() => void dependents.refetch()}>
|
||||
{t('common.retry')}
|
||||
</Button>
|
||||
</div>
|
||||
) : null}
|
||||
|
||||
{dependents.data?.length === 0 ? (
|
||||
<p className="text-sm text-[var(--text-muted)]">{t('profile.dependents.empty')}</p>
|
||||
) : null}
|
||||
|
||||
{dependents.data && dependents.data.length > 0 ? (
|
||||
<ul className="space-y-2">
|
||||
{dependents.data.map((dependent) => (
|
||||
<li key={dependent.id} className="flex items-center justify-between gap-3 text-sm">
|
||||
<span>
|
||||
{dependent.displayName} ({t(`relationship.${dependent.relationship}` as const)})
|
||||
</span>
|
||||
<button
|
||||
type="button"
|
||||
className="text-sm text-overdue underline disabled:opacity-50"
|
||||
disabled={remove.isPending}
|
||||
onClick={() => remove.mutate(dependent.id)}
|
||||
>
|
||||
{t('common.remove')}
|
||||
</button>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
) : null}
|
||||
|
||||
<div className="flex flex-wrap gap-2 border-t pt-4">
|
||||
<Input
|
||||
aria-label={t('setup.dependents.name')}
|
||||
placeholder={t('setup.dependents.name')}
|
||||
value={name}
|
||||
className="flex-1"
|
||||
onChange={(event) => setName(event.target.value)}
|
||||
/>
|
||||
<select
|
||||
aria-label={t('setup.dependents.rel')}
|
||||
value={relationship}
|
||||
onChange={(event) => setRelationship(event.target.value as Relationship)}
|
||||
className="h-12 rounded-2xl border bg-[var(--surface-raised)] px-3 text-base"
|
||||
>
|
||||
{RELATIONSHIPS.map((value) => (
|
||||
<option key={value} value={value}>
|
||||
{t(`relationship.${value}` as const)}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
<Button
|
||||
type="button"
|
||||
variant="secondary"
|
||||
disabled={name.trim().length === 0 || add.isPending}
|
||||
onClick={() => add.mutate()}
|
||||
>
|
||||
{t('setup.dependents.add')}
|
||||
</Button>
|
||||
</div>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,150 @@
|
||||
'use client';
|
||||
|
||||
import type { ProfileDto } from '@impuestos/contracts';
|
||||
import { formatGsAmount } from '@impuestos/i18n';
|
||||
import { deadlineDay } from '@impuestos/rules';
|
||||
import { useMutation, useQueryClient } from '@tanstack/react-query';
|
||||
import { useState } from 'react';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Card } from '@/components/ui/card';
|
||||
import { Input } from '@/components/ui/input';
|
||||
import { Label } from '@/components/ui/label';
|
||||
import { Switch } from '@/components/ui/switch';
|
||||
import { useT } from '@/i18n/t';
|
||||
import { api } from '@/lib/api';
|
||||
|
||||
export function IdentitySection({ profile }: { profile: ProfileDto }) {
|
||||
const t = useT();
|
||||
const queryClient = useQueryClient();
|
||||
|
||||
const [fullName, setFullName] = useState(profile.fullName);
|
||||
const [income, setIncome] = useState(
|
||||
profile.irpGrossEstimate === null ? '' : String(profile.irpGrossEstimate),
|
||||
);
|
||||
const [autoConfirmDays, setAutoConfirmDays] = useState(String(profile.autoConfirmDays));
|
||||
const [obligations, setObligations] = useState(profile.obligations);
|
||||
|
||||
const save = useMutation({
|
||||
mutationFn: () =>
|
||||
api.putProfile({
|
||||
...profile,
|
||||
fullName: fullName.trim(),
|
||||
obligations,
|
||||
irpGrossEstimate: income === '' ? null : Number(income),
|
||||
autoConfirmDays: Number(autoConfirmDays || '0'),
|
||||
}),
|
||||
onSuccess: () => queryClient.invalidateQueries({ queryKey: ['me'] }),
|
||||
});
|
||||
|
||||
function toggle(code: 'iva_120' | 'irp_515') {
|
||||
const existing = obligations.find((obligation) => obligation.code === code);
|
||||
if (existing) {
|
||||
setObligations(
|
||||
obligations.map((obligation) =>
|
||||
obligation.code === code ? { ...obligation, active: !obligation.active } : obligation,
|
||||
),
|
||||
);
|
||||
return;
|
||||
}
|
||||
setObligations([
|
||||
...obligations,
|
||||
{ code, active: true, since: new Date().toISOString().slice(0, 10) },
|
||||
]);
|
||||
}
|
||||
|
||||
const active = (code: 'iva_120' | 'irp_515') =>
|
||||
obligations.some((obligation) => obligation.code === code && obligation.active);
|
||||
|
||||
return (
|
||||
<Card className="space-y-5">
|
||||
<h2 className="font-semibold tracking-tight">{t('profile.identity')}</h2>
|
||||
|
||||
<div className="space-y-1.5">
|
||||
<Label htmlFor="fullName">{t('setup.fullName')}</Label>
|
||||
<Input id="fullName" value={fullName} onChange={(event) => setFullName(event.target.value)} />
|
||||
</div>
|
||||
|
||||
{/* The document is read only: it decides real filing dates, so changing it is a
|
||||
support conversation rather than a text field. */}
|
||||
<div className="space-y-1.5">
|
||||
<Label htmlFor="doc">{t('setup.docLabel')}</Label>
|
||||
<Input
|
||||
id="doc"
|
||||
readOnly
|
||||
value={
|
||||
profile.docType === 'ruc' && profile.ruc
|
||||
? `${profile.ruc}-${profile.rucDv ?? ''}`
|
||||
: (profile.ci ?? '')
|
||||
}
|
||||
className="bg-transparent text-[var(--text-muted)]"
|
||||
/>
|
||||
<p className="text-sm text-[var(--text-muted)]">
|
||||
{t('vto.explainer', {
|
||||
digit: profile.deadlineDigit,
|
||||
day: deadlineDay(profile.deadlineDigit),
|
||||
})}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<fieldset className="space-y-3">
|
||||
<legend className="text-sm font-medium text-[var(--text-muted)]">
|
||||
{t('profile.obligations')}
|
||||
</legend>
|
||||
<label className="flex items-center justify-between gap-4">
|
||||
<span className="text-sm">{t('setup.oblig.iva.title')}</span>
|
||||
<Switch
|
||||
checked={active('iva_120')}
|
||||
onCheckedChange={() => toggle('iva_120')}
|
||||
label={t('setup.oblig.iva.title')}
|
||||
/>
|
||||
</label>
|
||||
<label className="flex items-center justify-between gap-4">
|
||||
<span className="text-sm">{t('setup.oblig.irp.title')}</span>
|
||||
<Switch
|
||||
checked={active('irp_515')}
|
||||
onCheckedChange={() => toggle('irp_515')}
|
||||
label={t('setup.oblig.irp.title')}
|
||||
/>
|
||||
</label>
|
||||
</fieldset>
|
||||
|
||||
{active('irp_515') ? (
|
||||
<div className="space-y-1.5">
|
||||
<Label htmlFor="income">{t('profile.income')}</Label>
|
||||
<Input
|
||||
id="income"
|
||||
inputMode="numeric"
|
||||
value={income === '' ? '' : formatGsAmount(Number(income))}
|
||||
onChange={(event) => setIncome(event.target.value.replace(/\D/g, ''))}
|
||||
/>
|
||||
</div>
|
||||
) : null}
|
||||
|
||||
<div className="space-y-1.5">
|
||||
<Label htmlFor="autoConfirm">{t('profile.autoConfirm')}</Label>
|
||||
<Input
|
||||
id="autoConfirm"
|
||||
inputMode="numeric"
|
||||
value={autoConfirmDays}
|
||||
aria-describedby="autoConfirm-help"
|
||||
onChange={(event) => setAutoConfirmDays(event.target.value.replace(/\D/g, ''))}
|
||||
/>
|
||||
<p id="autoConfirm-help" className="text-sm text-[var(--text-muted)] text-pretty">
|
||||
{t('profile.autoConfirm.help')}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-3">
|
||||
<Button type="button" disabled={save.isPending} onClick={() => save.mutate()}>
|
||||
{save.isPending ? t('common.saving') : t('common.save')}
|
||||
</Button>
|
||||
{save.isSuccess ? <span className="text-sm text-positive">{t('profile.saved')}</span> : null}
|
||||
{save.isError ? (
|
||||
<span role="alert" className="text-sm text-overdue">
|
||||
{t('common.error.generic')}
|
||||
</span>
|
||||
) : null}
|
||||
</div>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,109 @@
|
||||
'use client';
|
||||
|
||||
import type { ProfileDto } from '@impuestos/contracts';
|
||||
import { SUPPORTED_LOCALES, type Locale } from '@impuestos/i18n';
|
||||
import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
|
||||
import { Card } from '@/components/ui/card';
|
||||
import { Skeleton } from '@/components/ui/skeleton';
|
||||
import { Switch } from '@/components/ui/switch';
|
||||
import { usePathname, useRouter } from '@/i18n/navigation';
|
||||
import { useT } from '@/i18n/t';
|
||||
import { api } from '@/lib/api';
|
||||
|
||||
const LABEL_KEY = { es: 'common.languageEs', en: 'common.languageEn' } as const;
|
||||
|
||||
export function NotificationsSection({ profile }: { profile: ProfileDto }) {
|
||||
const t = useT();
|
||||
const queryClient = useQueryClient();
|
||||
const router = useRouter();
|
||||
const pathname = usePathname();
|
||||
|
||||
const prefs = useQuery({
|
||||
queryKey: ['me', 'notification-prefs'],
|
||||
queryFn: ({ signal }) => api.getNotificationPrefs(signal),
|
||||
});
|
||||
|
||||
const update = useMutation({
|
||||
mutationFn: api.patchNotificationPrefs,
|
||||
onSuccess: () => queryClient.invalidateQueries({ queryKey: ['me', 'notification-prefs'] }),
|
||||
});
|
||||
|
||||
/**
|
||||
* Changing the language here persists it to the profile, because the API sends
|
||||
* notifications, emails and error messages in the locale stored there.
|
||||
*/
|
||||
const setLocale = useMutation({
|
||||
mutationFn: (locale: Locale) => api.putProfile({ ...profile, locale }),
|
||||
onSuccess: async (_data, locale) => {
|
||||
await queryClient.invalidateQueries({ queryKey: ['me'] });
|
||||
router.replace(pathname, { locale });
|
||||
},
|
||||
});
|
||||
|
||||
return (
|
||||
<Card className="space-y-5">
|
||||
<h2 className="font-semibold tracking-tight">{t('profile.notifications')}</h2>
|
||||
|
||||
{prefs.isPending ? <Skeleton name="doc-list-item" count={2} /> : null}
|
||||
|
||||
{prefs.isError ? (
|
||||
<p role="alert" className="text-sm text-overdue">
|
||||
{t('common.error.generic')}
|
||||
</p>
|
||||
) : null}
|
||||
|
||||
{prefs.data ? (
|
||||
<div className="space-y-4">
|
||||
<label className="flex items-center justify-between gap-4">
|
||||
<span className="text-sm">{t('notif.email')}</span>
|
||||
<Switch
|
||||
checked={prefs.data.emailEnabled}
|
||||
onCheckedChange={(emailEnabled) => update.mutate({ emailEnabled })}
|
||||
label={t('notif.email')}
|
||||
/>
|
||||
</label>
|
||||
|
||||
<label className="flex items-center justify-between gap-4">
|
||||
<span className="text-sm">{t('notif.digestHour')}</span>
|
||||
<select
|
||||
aria-label={t('notif.digestHour')}
|
||||
value={prefs.data.digestHour}
|
||||
onChange={(event) => update.mutate({ digestHour: Number(event.target.value) })}
|
||||
className="tnum h-11 rounded-2xl border bg-[var(--surface-raised)] px-3"
|
||||
>
|
||||
{Array.from({ length: 24 }).map((_, hour) => {
|
||||
// A clock time, not copy: the same in every locale.
|
||||
const label = `${String(hour).padStart(2, '0')}:00`;
|
||||
return (
|
||||
<option key={hour} value={hour}>
|
||||
{label}
|
||||
</option>
|
||||
);
|
||||
})}
|
||||
</select>
|
||||
</label>
|
||||
|
||||
{/* Push and Telegram are hidden until they are configured (FLOWS.md section 9).
|
||||
They are wired with the notification channels in phase 4. */}
|
||||
</div>
|
||||
) : null}
|
||||
|
||||
<div className="flex items-center justify-between gap-4 border-t pt-4">
|
||||
<span className="text-sm">{t('common.language')}</span>
|
||||
<select
|
||||
aria-label={t('common.language')}
|
||||
value={profile.locale}
|
||||
disabled={setLocale.isPending}
|
||||
onChange={(event) => setLocale.mutate(event.target.value as Locale)}
|
||||
className="h-11 rounded-2xl border bg-[var(--surface-raised)] px-3"
|
||||
>
|
||||
{SUPPORTED_LOCALES.map((code) => (
|
||||
<option key={code} value={code}>
|
||||
{t(LABEL_KEY[code])}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,8 @@
|
||||
import { setRequestLocale } from 'next-intl/server';
|
||||
import { ProfileScreen } from './profile-screen';
|
||||
|
||||
export default async function ProfilePage({ params }: { params: Promise<{ locale: string }> }) {
|
||||
const { locale } = await params;
|
||||
setRequestLocale(locale);
|
||||
return <ProfileScreen />;
|
||||
}
|
||||
@@ -0,0 +1,64 @@
|
||||
'use client';
|
||||
|
||||
import { isApiError } from '@impuestos/contracts';
|
||||
import { useQuery } from '@tanstack/react-query';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Card } from '@/components/ui/card';
|
||||
import { Skeleton } from '@/components/ui/skeleton';
|
||||
import { useT } from '@/i18n/t';
|
||||
import { api } from '@/lib/api';
|
||||
import { DangerZone } from './danger-zone';
|
||||
import { DependentsSection } from './dependents-section';
|
||||
import { IdentitySection } from './identity-section';
|
||||
import { NotificationsSection } from './notifications-section';
|
||||
|
||||
/**
|
||||
* Flow E3. This screen is the trust feature: what we hold, who saw it, and the two
|
||||
* buttons that take it all back. Everything on it is reachable in one scroll.
|
||||
*/
|
||||
export function ProfileScreen() {
|
||||
const t = useT();
|
||||
|
||||
const profile = useQuery({
|
||||
queryKey: ['me'],
|
||||
queryFn: ({ signal }) => api.getProfile(signal),
|
||||
retry: (count, error) => !isApiError(error) && count < 1,
|
||||
});
|
||||
|
||||
if (profile.isPending) {
|
||||
return (
|
||||
<div className="space-y-4 py-4">
|
||||
<Card>
|
||||
<Skeleton name="profile-section" />
|
||||
</Card>
|
||||
<Card>
|
||||
<Skeleton name="profile-section" />
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (profile.isError) {
|
||||
const notSetUp = isApiError(profile.error) && profile.error.code === 'not_found';
|
||||
return (
|
||||
<Card className="my-4 space-y-3">
|
||||
<p role="alert" className="text-sm">
|
||||
{notSetUp ? t('setup.step1.title') : t('common.error.generic')}
|
||||
</p>
|
||||
<Button type="button" onClick={() => void profile.refetch()}>
|
||||
{t('common.retry')}
|
||||
</Button>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="space-y-4 py-4">
|
||||
<h1 className="text-2xl font-semibold tracking-tight">{t('profile.title')}</h1>
|
||||
<IdentitySection profile={profile.data} />
|
||||
<DependentsSection />
|
||||
<NotificationsSection profile={profile.data} />
|
||||
<DangerZone />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user