MichilisandClaude Opus 5
0d7651b17c
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>
96 lines
3.2 KiB
TypeScript
96 lines
3.2 KiB
TypeScript
'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>
|
|
);
|
|
}
|