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>
2026-09-03 23:33:10 +00:00
parent 80b10c958e
commit 0d7651b17c
61 changed files with 3776 additions and 82 deletions
@@ -0,0 +1,35 @@
+import type { ReactNode } from 'react';
+import { LanguageSwitcher } from '@/components/language-switcher';
+import { Link } from '@/i18n/navigation';
+import { useT } from '@/i18n/t';
+
+export default function MarketingLayout({ children }: { children: ReactNode }) {
+  const t = useT();
+  return (
+    <div className="flex min-h-dvh flex-col">
+      <header className="mx-auto flex w-full max-w-5xl items-center justify-between px-5 py-4">
+        <Link href="/" className="text-base font-semibold tracking-tight">
+          {t('common.appName')}
+        </Link>
+        <div className="flex items-center gap-4">
+          <LanguageSwitcher />
+          <Link href="/login" className="text-sm font-medium text-accent-700 hover:underline">
+            {t('auth.login.submit')}
+          </Link>
+        </div>
+      </header>
+
+      <main className="flex-1">{children}</main>
+
+      <footer className="mx-auto flex w-full max-w-5xl flex-wrap items-center gap-x-6 gap-y-2 px-5 py-8 text-sm text-[var(--text-muted)]">
+        <span>{t('common.appName')}</span>
+        <Link href="/legal/privacidad" className="hover:underline">
+          {t('landing.footer.privacy')}
+        </Link>
+        <Link href="/legal/terminos" className="hover:underline">
+          {t('landing.footer.terms')}
+        </Link>
+      </footer>
+    </div>
+  );
+}
@@ -0,0 +1,19 @@
+import { Card } from '@/components/ui/card';
+import { getT } from '@/i18n/t';
+
+/**
+ * COPY.md section 13: these ship as clearly marked placeholders. Never generate legal
+ * text. A human writes both documents before launch, tracked in DECISIONS.md.
+ */
+export async function LegalPlaceholder({ title, locale }: { title: string; locale: string }) {
+  const t = await getT(locale);
+  return (
+    <div className="mx-auto w-full max-w-2xl px-5 py-12">
+      <h1 className="text-3xl font-semibold tracking-tight text-balance">{title}</h1>
+      <Card className="mt-6 space-y-2">
+        <p className="font-medium text-attention">{t('legal.placeholder')}</p>
+        <p className="text-sm text-[var(--text-muted)] text-pretty">{t('legal.placeholderBody')}</p>
+      </Card>
+    </div>
+  );
+}
@@ -0,0 +1,10 @@
+import { setRequestLocale } from 'next-intl/server';
+import { LegalPlaceholder } from '../placeholder';
+import { getT } from '@/i18n/t';
+
+export default async function PrivacyPage({ params }: { params: Promise<{ locale: string }> }) {
+  const { locale } = await params;
+  setRequestLocale(locale);
+  const t = await getT(locale);
+  return <LegalPlaceholder title={t('legal.privacy.title')} locale={locale} />;
+}
@@ -0,0 +1,10 @@
+import { setRequestLocale } from 'next-intl/server';
+import { LegalPlaceholder } from '../placeholder';
+import { getT } from '@/i18n/t';
+
+export default async function TermsPage({ params }: { params: Promise<{ locale: string }> }) {
+  const { locale } = await params;
+  setRequestLocale(locale);
+  const t = await getT(locale);
+  return <LegalPlaceholder title={t('legal.terms.title')} locale={locale} />;
+}
@@ -0,0 +1,50 @@
+import { setRequestLocale } from 'next-intl/server';
+import { Card } from '@/components/ui/card';
+import { getT } from '@/i18n/t';
+import { RucHook } from './ruc-hook';
+
+export default async function LandingPage({ params }: { params: Promise<{ locale: string }> }) {
+  const { locale } = await params;
+  setRequestLocale(locale);
+  const t = await getT(locale);
+
+  const values = [
+    { title: t('landing.value1.title'), body: t('landing.value1.body') },
+    { title: t('landing.value2.title'), body: t('landing.value2.body') },
+    { title: t('landing.value3.title'), body: t('landing.value3.body') },
+  ];
+
+  return (
+    <div className="mx-auto w-full max-w-5xl px-5">
+      {/* A subtle canvas effect belongs behind this hero (FLOWS.md A1). It lands with the
+          rest of the motion work in phase 7, reduced-motion safe and degrading to this. */}
+      <section className="py-14 sm:py-20">
+        <h1 className="max-w-2xl text-4xl font-semibold tracking-tight text-balance sm:text-5xl">
+          {t('landing.hero.title')}
+        </h1>
+        <p className="mt-4 max-w-xl text-lg text-[var(--text-muted)] text-pretty">
+          {t('landing.hero.subtitle')}
+        </p>
+        <div className="mt-8 max-w-md">
+          <RucHook />
+        </div>
+      </section>
+
+      <section className="grid gap-4 pb-14 sm:grid-cols-3">
+        {values.map((value) => (
+          <Card key={value.title} className="space-y-2">
+            <h2 className="font-semibold tracking-tight">{value.title}</h2>
+            <p className="text-sm text-[var(--text-muted)] text-pretty">{value.body}</p>
+          </Card>
+        ))}
+      </section>
+
+      <section className="pb-16">
+        <Card className="space-y-2">
+          <h2 className="font-semibold tracking-tight">{t('landing.pricing.title')}</h2>
+          <p className="text-sm text-[var(--text-muted)]">{t('landing.pricing.body')}</p>
+        </Card>
+      </section>
+    </div>
+  );
+}
@@ -0,0 +1,111 @@
+'use client';
+
+import { isApiError, type LookupDto } from '@impuestos/contracts';
+import { formatDateLong, type Locale } from '@impuestos/i18n';
+import { useMutation } from '@tanstack/react-query';
+import { useLocale } from 'next-intl';
+import { useState } from 'react';
+import { Button, buttonClasses } from '@/components/ui/button';
+import { Card } from '@/components/ui/card';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { Skeleton } from '@/components/ui/skeleton';
+import { Link } from '@/i18n/navigation';
+import { useT } from '@/i18n/t';
+import { api } from '@/lib/api';
+
+/**
+ * Flow A2. Type a RUC or CI and see your own filing dates before signing up: the whole
+ * point is that the first screen already knows something true about you.
+ */
+export function RucHook() {
+  const t = useT();
+  const locale = useLocale() as Locale;
+  const [value, setValue] = useState('');
+
+  const lookup = useMutation<LookupDto, unknown, string>({
+    mutationFn: (input) => api.lookupRuc(input),
+  });
+
+  const result = lookup.data;
+  const invalid = result !== undefined && !result.valid;
+
+  return (
+    <div className="space-y-4">
+      <form
+        className="space-y-2"
+        onSubmit={(event) => {
+          event.preventDefault();
+          const trimmed = value.trim();
+          if (trimmed.length > 0) lookup.mutate(trimmed);
+        }}
+      >
+        <Label htmlFor="ruc">{t('landing.hero.inputLabel')}</Label>
+        {/* Stacks at 390px so the call to action never wraps to two lines. */}
+        <div className="flex flex-col gap-2 sm:flex-row">
+          <Input
+            id="ruc"
+            name="ruc"
+            inputMode="numeric"
+            autoComplete="off"
+            value={value}
+            aria-invalid={invalid}
+            aria-describedby={invalid ? 'ruc-error' : undefined}
+            onChange={(event) => setValue(event.target.value)}
+          />
+          <Button
+            type="submit"
+            className="whitespace-nowrap"
+            disabled={lookup.isPending || value.trim().length === 0}
+          >
+            {lookup.isPending ? t('landing.lookup.checking') : t('landing.hero.cta')}
+          </Button>
+        </div>
+
+        {invalid ? (
+          <p id="ruc-error" role="alert" className="text-sm text-overdue">
+            {t('landing.invalidDoc')}
+          </p>
+        ) : null}
+
+        {lookup.isError ? (
+          <p role="alert" className="text-sm text-overdue">
+            {isApiError(lookup.error) ? lookup.error.message : t('common.error.generic')}
+          </p>
+        ) : null}
+      </form>
+
+      {lookup.isPending ? (
+        <Card>
+          <Skeleton name="dashboard-position" />
+        </Card>
+      ) : null}
+
+      {result?.valid ? <Preview result={result} locale={locale} /> : null}
+    </div>
+  );
+}
+
+function Preview({ result, locale }: { result: LookupDto; locale: Locale }) {
+  const t = useT();
+  const [d1, d2, d3] = result.nextDeadlines as [string, string, string];
+
+  return (
+    <Card className="space-y-3">
+      <p className="text-sm font-medium text-[var(--text-muted)]">{t('landing.preview.title')}</p>
+      <p className="text-lg font-semibold tracking-tight text-balance">
+        {t('landing.preview.deadline', { day: result.deadlineDay })}
+      </p>
+      <p className="text-sm text-[var(--text-muted)]">
+        {t('landing.preview.next', {
+          d1: formatDateLong(locale, d1),
+          d2: formatDateLong(locale, d2),
+          d3: formatDateLong(locale, d3),
+        })}
+      </p>
+      <Link href="/registro" className={buttonClasses({ className: 'mt-2 w-full sm:w-auto' })}>
+        {t('landing.preview.cta')}
+      </Link>
+    </Card>
+  );
+}