Consult AS Technology
d59c8c0d7e
Headers sticky con marca y acciones, contenedores max-w-[1280px], grids de contenido con rails laterales sticky (cotizador, mi-dia, detalle de cobranza), stepper vertical en el wizard de alta, toolbar+ tabla unificadas en cobranza, tabs como segmented control en dashboards, chat con barra de entrada fija y preguntas sugeridas, landing con navbar + hero + grid de modulos + footer.
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 px-6 py-5">
|
|
<input
|
|
id="tieneCoacreditado"
|
|
type="checkbox"
|
|
className="h-5 w-5 accent-accent"
|
|
{...metodos.register('tieneCoacreditado')}
|
|
/>
|
|
<span className="text-sm font-medium text-[#111827]">¿Hay co-acreditado o cónyuge?</span>
|
|
</label>
|
|
|
|
{tieneCoacreditado && (
|
|
<div className="border-t border-[#E5E7EB]">
|
|
<DatosGeneralesCampos prefix="generales." compacto />
|
|
<EmpleoCampos prefix="empleo." />
|
|
<EconomicosCampos prefix="economicos." />
|
|
</div>
|
|
)}
|
|
|
|
<Navegacion onAnterior={onAnterior} />
|
|
</form>
|
|
</FormProvider>
|
|
)
|
|
}
|