Consult AS Technology
ecd4edac02
- Cotizador (/quote): 4 propuestas con formulas validadas del Excel, comparador, combobox de unidades, vigencia, PDF ANEXO A - Alta Clientes (/client): wizard 8 pasos, validacion CURP RENAPO, OCR de INE, checklist de expediente, firma digital, 5 PDFs legales - Cobranza (/pay): planes de enganche, mora, vista cobranza del dia, recibos PDF, bitacora, dashboard con filtros - Landing (/): entrada al ecosistema - Design system StudioBlank (monocromo, acento #1B4332) en las 4 apps - 123 tests vitest
46 lines
1.7 KiB
TypeScript
46 lines
1.7 KiB
TypeScript
import { useForm, FormProvider } from 'react-hook-form'
|
|
import { zodResolver } from '@hookform/resolvers/zod'
|
|
import type { Coacreditado } from '../types'
|
|
import { coacreditadoSchema } from '../lib/schemas'
|
|
import DatosGeneralesCampos from './DatosGeneralesCampos'
|
|
import EmpleoCampos from './EmpleoCampos'
|
|
import EconomicosCampos from './EconomicosCampos'
|
|
import Navegacion from './Navegacion'
|
|
import type { PasoProps } from './DatosGeneralesForm'
|
|
|
|
/** Paso 4: co-acreditado o cónyuge (opcional, toggle) */
|
|
export default function CoacreditadoForm({ valores, onAnterior, onSiguiente }: PasoProps<Coacreditado>) {
|
|
const metodos = useForm<Coacreditado>({
|
|
resolver: zodResolver(coacreditadoSchema),
|
|
defaultValues: valores,
|
|
mode: 'onSubmit',
|
|
})
|
|
const tieneCoacreditado = metodos.watch('tieneCoacreditado')
|
|
|
|
return (
|
|
<FormProvider {...metodos}>
|
|
<form onSubmit={metodos.handleSubmit(onSiguiente)} noValidate>
|
|
<label htmlFor="tieneCoacreditado" className="flex items-center gap-3 border border-neutral-200 bg-white p-6">
|
|
<input
|
|
id="tieneCoacreditado"
|
|
type="checkbox"
|
|
className="h-5 w-5 accent-accent"
|
|
{...metodos.register('tieneCoacreditado')}
|
|
/>
|
|
<span className="text-xs font-bold uppercase tracking-widest text-neutral-900">¿Hay co-acreditado o cónyuge?</span>
|
|
</label>
|
|
|
|
{tieneCoacreditado && (
|
|
<div className="mt-16 space-y-16">
|
|
<DatosGeneralesCampos prefix="generales." compacto />
|
|
<EmpleoCampos prefix="empleo." />
|
|
<EconomicosCampos prefix="economicos." />
|
|
</div>
|
|
)}
|
|
|
|
<Navegacion onAnterior={onAnterior} />
|
|
</form>
|
|
</FormProvider>
|
|
)
|
|
}
|