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.
630 lines
24 KiB
TypeScript
630 lines
24 KiB
TypeScript
import { useEffect, useRef, useState, type ReactNode } from 'react'
|
|
import AppHeader from '../components/AppHeader'
|
|
import Stepper from '../components/Stepper'
|
|
import DatosGeneralesForm from '../forms/DatosGeneralesForm'
|
|
import EmpleoForm from '../forms/EmpleoForm'
|
|
import EconomicosForm from '../forms/EconomicosForm'
|
|
import CoacreditadoForm from '../forms/CoacreditadoForm'
|
|
import ReferenciasForm from '../forms/ReferenciasForm'
|
|
import ViviendaCreditoForm from '../forms/ViviendaCreditoForm'
|
|
import DocumentosForm from '../forms/DocumentosForm'
|
|
import FirmasForm from '../forms/FirmasForm'
|
|
import { useAltaCliente, PASOS } from '../hooks/useAltaCliente'
|
|
import {
|
|
actualizarProgreso,
|
|
completarProgreso,
|
|
crearAltaCliente,
|
|
eliminarBorrador,
|
|
generarLigaRemota,
|
|
guardarBorrador,
|
|
iniciarProgreso,
|
|
listarBorradores,
|
|
obtenerBorrador,
|
|
obtenerCotizacion,
|
|
subirDocumentos,
|
|
type BorradorResumen,
|
|
type LeadResumen,
|
|
} from '../services/api'
|
|
import { cotizacionAPrellenado } from '../lib/cotizacionAlta'
|
|
import { leadAPrellenado } from '../lib/leadAlta'
|
|
import BusquedaLead from '../components/BusquedaLead'
|
|
import AltaAfluenciaForm from '../components/AltaAfluenciaForm'
|
|
|
|
/** Lee ?cotizacion=<id> del query string o del hash (#cotizacion=<id>) */
|
|
function paramCotizacion(): string | null {
|
|
const query = new URLSearchParams(window.location.search).get('cotizacion')
|
|
if (query) return query
|
|
const hash = window.location.hash.replace(/^#/, '')
|
|
return new URLSearchParams(hash).get('cotizacion')
|
|
}
|
|
|
|
const formatoFechaHora = (iso: string): string =>
|
|
new Date(iso).toLocaleString('es-MX', { day: '2-digit', month: '2-digit', year: 'numeric', hour: '2-digit', minute: '2-digit' })
|
|
|
|
/** Tarjeta del paso actual del wizard (el stepper queda fuera, a la izquierda en lg) */
|
|
function TarjetaPaso({ children }: { children: ReactNode }) {
|
|
return <div className="rounded-xl border border-[#E5E7EB] bg-white shadow-sm">{children}</div>
|
|
}
|
|
|
|
/** Cuadro con las iniciales de la opción (icono de la tarjeta de entrada) */
|
|
function IconoIniciales({ iniciales }: { iniciales: string }) {
|
|
return (
|
|
<span
|
|
aria-hidden="true"
|
|
className="flex h-11 w-11 items-center justify-center rounded-lg bg-accent/10 text-sm font-semibold text-accent"
|
|
>
|
|
{iniciales}
|
|
</span>
|
|
)
|
|
}
|
|
|
|
/** Flecha del CTA de las tarjetas de entrada */
|
|
function IconoFlecha() {
|
|
return (
|
|
<svg viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" className="h-4 w-4">
|
|
<path
|
|
fillRule="evenodd"
|
|
d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z"
|
|
clipRule="evenodd"
|
|
/>
|
|
</svg>
|
|
)
|
|
}
|
|
|
|
export default function AltaClientePage() {
|
|
const {
|
|
paso,
|
|
siguiente,
|
|
anterior,
|
|
irAPaso,
|
|
datos,
|
|
alta,
|
|
actualizar,
|
|
restaurar,
|
|
reiniciar,
|
|
agregarDocumento,
|
|
quitarDocumento,
|
|
} = useAltaCliente()
|
|
const [registro, setRegistro] = useState<string>('')
|
|
const [sinConexion, setSinConexion] = useState(false)
|
|
const [errorValidacion, setErrorValidacion] = useState<string>('')
|
|
|
|
// ---------- Borradores ----------
|
|
type Pantalla = 'cargando' | 'entrada' | 'picker' | 'afluencia' | 'wizard'
|
|
const [pantalla, setPantalla] = useState<Pantalla>('cargando')
|
|
const [borradores, setBorradores] = useState<BorradorResumen[]>([])
|
|
const [borradorId, setBorradorId] = useState<string | null>(null)
|
|
const [avisoBorrador, setAvisoBorrador] = useState('')
|
|
const [avisoProgreso, setAvisoProgreso] = useState('')
|
|
const [cargoDeBorrador, setCargoDeBorrador] = useState(false)
|
|
const [errorCarga, setErrorCarga] = useState('')
|
|
|
|
// ---------- Liga remota ----------
|
|
const [ligaUrl, setLigaUrl] = useState('')
|
|
const [ligaCopiada, setLigaCopiada] = useState(false)
|
|
const [errorLiga, setErrorLiga] = useState('')
|
|
|
|
// Al entrar: ?cotizacion=<id> prellena el alta y salta directo al wizard;
|
|
// si no, la entrada ofrece Alta Afluencia (captura ligera) y Alta de Cliente
|
|
useEffect(() => {
|
|
const cotizacionId = paramCotizacion()
|
|
if (cotizacionId) {
|
|
obtenerCotizacion(cotizacionId)
|
|
.then((c) => {
|
|
const pre = cotizacionAPrellenado(c)
|
|
actualizar('datosGenerales', { ...datos.datosGenerales, ...pre.datosGenerales })
|
|
actualizar('viviendaCredito', { ...datos.viviendaCredito, ...pre.viviendaCredito })
|
|
})
|
|
.catch(() => setErrorCarga('No se pudo cargar la cotización para prellenar el alta.'))
|
|
.finally(() => setPantalla('wizard'))
|
|
return
|
|
}
|
|
listarBorradores()
|
|
.then((lista) => {
|
|
setBorradores(lista)
|
|
setPantalla('entrada')
|
|
})
|
|
// Sin conexión: la entrada no depende de los borradores y conserva la
|
|
// opción de afluencia (el alta de cliente funcionará cuando vuelva la red)
|
|
.catch(() => setPantalla('entrada'))
|
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
}, [])
|
|
|
|
const continuarBorrador = async (id: string) => {
|
|
try {
|
|
const b = await obtenerBorrador(id)
|
|
restaurar(JSON.parse(b.datosJson) as typeof datos, b.paso)
|
|
setBorradorId(b.id)
|
|
setCargoDeBorrador(true)
|
|
setPantalla('wizard')
|
|
} catch {
|
|
setErrorCarga('No se pudo abrir el borrador.')
|
|
}
|
|
}
|
|
|
|
const borrarBorrador = async (id: string) => {
|
|
try {
|
|
await eliminarBorrador(id)
|
|
// Al borrar el último borrador el picker sigue siendo la pantalla de
|
|
// entrada (ofrece "Empezar nuevo" y la búsqueda de leads).
|
|
setBorradores((prev) => prev.filter((b) => b.id !== id))
|
|
} catch {
|
|
setErrorCarga('No se pudo eliminar el borrador.')
|
|
}
|
|
}
|
|
|
|
const empezarNuevo = () => {
|
|
reiniciar()
|
|
setBorradorId(null)
|
|
setCargoDeBorrador(false)
|
|
setPantalla('wizard')
|
|
}
|
|
|
|
// Alta nueva prellenada desde un lead de Monday (nombre, email, celular)
|
|
const empezarDesdeLead = (lead: LeadResumen) => {
|
|
reiniciar()
|
|
setBorradorId(null)
|
|
setCargoDeBorrador(false)
|
|
actualizar('datosGenerales', { ...datos.datosGenerales, ...leadAPrellenado(lead) })
|
|
actualizar('leadMondayId', lead.id)
|
|
setPantalla('wizard')
|
|
}
|
|
|
|
const guardar = async () => {
|
|
try {
|
|
const b = await guardarBorrador({ ...(borradorId ? { id: borradorId } : {}), paso, datos })
|
|
setBorradorId(b.id)
|
|
setAvisoBorrador(
|
|
`Borrador guardado ${new Date().toLocaleTimeString('es-MX', { hour: '2-digit', minute: '2-digit' })}`,
|
|
)
|
|
} catch {
|
|
setAvisoBorrador('No se pudo guardar el borrador')
|
|
}
|
|
}
|
|
|
|
// ---------- Guardado progresivo (borrador local + Contacto en Monday) ----------
|
|
// Guard in-flight: con clicks rápidos se omite el sync en curso; el siguiente
|
|
// avance manda el estado completo (el PATCH es idempotente).
|
|
const syncEnCurso = useRef(false)
|
|
|
|
const syncProgreso = async (datosSync: typeof datos) => {
|
|
if (syncEnCurso.current) return
|
|
if (datosSync.datosGenerales.nombreCompleto.trim() === '') return
|
|
syncEnCurso.current = true
|
|
try {
|
|
if (datosSync.progresoId) {
|
|
await actualizarProgreso(datosSync.progresoId, datosSync)
|
|
} else {
|
|
const r = await iniciarProgreso({
|
|
datosGenerales: datosSync.datosGenerales,
|
|
...(datosSync.leadMondayId ? { leadMondayId: datosSync.leadMondayId } : {}),
|
|
})
|
|
actualizar('progresoId', r.id)
|
|
}
|
|
setAvisoProgreso('')
|
|
} catch (err) {
|
|
console.warn('[alta] no se pudo sincronizar el avance con el servidor', err)
|
|
setAvisoProgreso('El avance quedó guardado local; no se pudo subir a Monday')
|
|
} finally {
|
|
syncEnCurso.current = false
|
|
}
|
|
}
|
|
|
|
/** Al avanzar de paso: guarda el borrador en silencio y sube el avance a Monday */
|
|
const guardarAvance = (datosNuevos: typeof datos, pasoDestino: number) => {
|
|
guardarBorrador({ ...(borradorId ? { id: borradorId } : {}), paso: pasoDestino, datos: datosNuevos })
|
|
.then((b) => {
|
|
setBorradorId(b.id)
|
|
setAvisoBorrador(
|
|
`Borrador guardado ${new Date().toLocaleTimeString('es-MX', { hour: '2-digit', minute: '2-digit' })}`,
|
|
)
|
|
})
|
|
.catch(() => setAvisoBorrador('No se pudo guardar el borrador'))
|
|
void syncProgreso(datosNuevos)
|
|
}
|
|
|
|
// Registra el alta en el API al llegar al paso de firmas; si el API no
|
|
// responde, el flujo continúa solo local (los PDFs se generan igual). Con
|
|
// guardado progresivo activo se cierra por el endpoint de progreso.
|
|
const registrarAlta = async () => {
|
|
const res = datos.progresoId
|
|
? await completarProgreso(datos.progresoId, alta)
|
|
: await crearAltaCliente(alta)
|
|
if (res.ok) {
|
|
await subirDocumentos(res.id, alta)
|
|
setRegistro(res.id)
|
|
setSinConexion(false)
|
|
setErrorValidacion('')
|
|
// El alta ya quedó registrada: el borrador usado ya no hace falta
|
|
if (borradorId) {
|
|
eliminarBorrador(borradorId).catch(() => undefined)
|
|
setBorradorId(null)
|
|
}
|
|
} else if (res.motivo === 'validacion') {
|
|
setRegistro('')
|
|
setSinConexion(false)
|
|
setErrorValidacion(res.detalle ?? 'Datos incompletos o inválidos')
|
|
} else {
|
|
setRegistro('')
|
|
setSinConexion(true)
|
|
setErrorValidacion('')
|
|
}
|
|
}
|
|
|
|
// Genera la liga pública y copia al portapapeles el texto listo para WhatsApp
|
|
const generarLiga = async () => {
|
|
setErrorLiga('')
|
|
setLigaCopiada(false)
|
|
try {
|
|
const liga = await generarLigaRemota(registro)
|
|
const urlAbsoluta = `${window.location.origin}${liga.url}`
|
|
setLigaUrl(urlAbsoluta)
|
|
const texto = `Hola ${alta.datosGenerales.nombreCompleto}, te comparto la liga para firmar tu expediente y subir tus documentos (vigencia 72 h): ${urlAbsoluta}`
|
|
await navigator.clipboard.writeText(texto)
|
|
setLigaCopiada(true)
|
|
} catch {
|
|
setErrorLiga('No se pudo generar la liga. Intenta de nuevo.')
|
|
}
|
|
}
|
|
|
|
if (pantalla === 'cargando') {
|
|
return (
|
|
<div className="min-h-screen bg-[#F8FAFC]">
|
|
<main className="mx-auto max-w-[1280px] px-4 py-16 sm:px-6">
|
|
<p className="text-sm text-[#64748B]">Cargando…</p>
|
|
</main>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
if (pantalla === 'entrada') {
|
|
return (
|
|
<div className="min-h-screen bg-[#F8FAFC]">
|
|
<AppHeader titulo="Alta de Clientes" />
|
|
<main className="mx-auto max-w-[1280px] px-4 py-8 sm:px-6 sm:py-12">
|
|
<div className="mx-auto max-w-4xl">
|
|
<p className="text-sm text-[#64748B]">
|
|
Elige cómo registrar al interesado: captura ligera de afluencia o formato completo de alta.
|
|
</p>
|
|
<div className="mt-6 grid gap-6 sm:grid-cols-2">
|
|
<button
|
|
type="button"
|
|
onClick={() => setPantalla('afluencia')}
|
|
className="rounded-xl border border-[#E5E7EB] bg-white p-6 text-left shadow-sm transition-all duration-200 ease-in-out hover:border-accent hover:shadow-md"
|
|
>
|
|
<IconoIniciales iniciales="AA" />
|
|
<span className="mt-4 block text-lg font-semibold text-[#111827]">Alta Afluencia</span>
|
|
<span className="mt-2 block text-sm text-[#64748B]">
|
|
Captura rápida del interesado; entra al embudo de ventas.
|
|
</span>
|
|
<span className="mt-5 inline-flex items-center gap-1.5 text-sm font-medium text-accent">
|
|
Comenzar
|
|
<IconoFlecha />
|
|
</span>
|
|
</button>
|
|
<button
|
|
type="button"
|
|
onClick={() => setPantalla('picker')}
|
|
className="rounded-xl border border-[#E5E7EB] bg-white p-6 text-left shadow-sm transition-all duration-200 ease-in-out hover:border-accent hover:shadow-md"
|
|
>
|
|
<IconoIniciales iniciales="AC" />
|
|
<span className="mt-4 block text-lg font-semibold text-[#111827]">Alta de Cliente</span>
|
|
<span className="mt-2 block text-sm text-[#64748B]">
|
|
Formato completo para quien aparta.
|
|
</span>
|
|
<span className="mt-5 inline-flex items-center gap-1.5 text-sm font-medium text-accent">
|
|
Comenzar
|
|
<IconoFlecha />
|
|
</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
if (pantalla === 'afluencia') {
|
|
return (
|
|
<div className="min-h-screen bg-[#F8FAFC]">
|
|
<AppHeader titulo="Alta Afluencia" />
|
|
<main className="mx-auto max-w-[1280px] px-4 py-8 sm:px-6 sm:py-10">
|
|
<div className="mx-auto max-w-3xl">
|
|
<p className="text-sm text-[#64748B]">
|
|
Captura rápida del interesado; entra al embudo de ventas.
|
|
</p>
|
|
<div className="mt-6 rounded-xl border border-[#E5E7EB] bg-white p-6 shadow-sm">
|
|
<AltaAfluenciaForm
|
|
onVolver={() => setPantalla('entrada')}
|
|
onPasarAAltaCliente={empezarDesdeLead}
|
|
/>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
if (pantalla === 'picker') {
|
|
return (
|
|
<div className="min-h-screen bg-[#F8FAFC]">
|
|
<AppHeader titulo="Alta de Clientes" />
|
|
<main className="mx-auto max-w-[1280px] px-4 py-8 sm:px-6 sm:py-10">
|
|
<div className="max-w-3xl">
|
|
{borradores.length > 0 && (
|
|
<>
|
|
<h2 className="text-xs font-semibold uppercase tracking-wider text-[#64748B]">
|
|
Tienes {borradores.length} borrador{borradores.length === 1 ? '' : 'es'} guardado
|
|
{borradores.length === 1 ? '' : 's'}
|
|
</h2>
|
|
<ul className="mt-6 divide-y divide-[#E5E7EB] rounded-xl border border-[#E5E7EB] bg-white shadow-sm">
|
|
{borradores.map((b) => (
|
|
<li key={b.id} className="flex flex-wrap items-center justify-between gap-4 px-4 py-3">
|
|
<div className="min-w-0">
|
|
<p className="truncate text-sm text-[#111827]">{b.nombre}</p>
|
|
<p className="mt-1 text-xs text-[#64748B]">
|
|
Paso {b.paso + 1} de {PASOS.length} · {formatoFechaHora(b.updatedAt)}
|
|
</p>
|
|
</div>
|
|
<div className="flex shrink-0 gap-2">
|
|
<button
|
|
type="button"
|
|
onClick={() => void continuarBorrador(b.id)}
|
|
className="rounded-lg border border-accent bg-white px-3 py-1.5 text-xs font-medium text-accent transition-all duration-100 ease-out hover:bg-accent hover:text-white"
|
|
>
|
|
Continuar
|
|
</button>
|
|
<button
|
|
type="button"
|
|
onClick={() => void borrarBorrador(b.id)}
|
|
className="rounded-lg border border-red-200 bg-white px-3 py-1.5 text-xs font-medium text-red-600 transition-all duration-100 ease-out hover:bg-red-50"
|
|
>
|
|
Eliminar
|
|
</button>
|
|
</div>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</>
|
|
)}
|
|
{errorCarga && <p className="mt-4 text-xs text-red-700">{errorCarga}</p>}
|
|
<button
|
|
type="button"
|
|
onClick={empezarNuevo}
|
|
className="mt-8 rounded-lg bg-accent px-5 py-2.5 text-sm font-medium text-white shadow-sm transition-all duration-100 ease-out hover:bg-accent-hover"
|
|
>
|
|
Empezar nuevo
|
|
</button>
|
|
|
|
<section aria-labelledby="titulo-lead" className="mt-12 border-t border-[#E5E7EB] pt-8">
|
|
<h3 id="titulo-lead" className="text-xs font-semibold uppercase tracking-wider text-[#64748B]">
|
|
Desde un lead de Monday
|
|
</h3>
|
|
<p className="mt-2 text-sm text-[#64748B]">
|
|
Empieza un alta nueva con el nombre, email y celular del lead ya capturados.
|
|
</p>
|
|
<div className="mt-4">
|
|
<BusquedaLead onSeleccion={empezarDesdeLead} />
|
|
</div>
|
|
</section>
|
|
</div>
|
|
</main>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
return (
|
|
<div className="min-h-screen bg-[#F8FAFC]">
|
|
<AppHeader
|
|
titulo="Alta de Clientes"
|
|
acciones={
|
|
<>
|
|
{avisoBorrador && (
|
|
<span role="status" className="text-xs text-[#64748B]">
|
|
{avisoBorrador}
|
|
</span>
|
|
)}
|
|
{avisoProgreso && (
|
|
<span role="status" className="text-xs text-amber-700">
|
|
{avisoProgreso}
|
|
</span>
|
|
)}
|
|
<button
|
|
type="button"
|
|
onClick={() => void guardar()}
|
|
className="rounded-lg border border-[#D1D5DB] bg-white px-5 py-2.5 text-sm font-medium text-[#374151] shadow-sm transition-all duration-100 ease-out hover:bg-[#F9FAFB]"
|
|
>
|
|
Guardar borrador
|
|
</button>
|
|
</>
|
|
}
|
|
/>
|
|
|
|
<main className="mx-auto max-w-[1280px] px-4 py-6 sm:px-6 sm:py-8">
|
|
<div className="lg:grid lg:grid-cols-[260px_minmax(0,1fr)] lg:gap-8">
|
|
<div className="mb-6 lg:sticky lg:top-20 lg:mb-0 lg:self-start">
|
|
<Stepper pasos={[...PASOS]} pasoActual={paso} onIrAPaso={irAPaso} />
|
|
</div>
|
|
|
|
<div className="w-full max-w-3xl">
|
|
{errorCarga && (
|
|
<p role="alert" className="mb-6 rounded-lg border border-amber-200 bg-amber-50 px-4 py-3 text-xs text-amber-700">
|
|
{errorCarga}
|
|
</p>
|
|
)}
|
|
|
|
{paso === 0 && (
|
|
<TarjetaPaso>
|
|
<DatosGeneralesForm
|
|
valores={datos.datosGenerales}
|
|
onSiguiente={(v) => {
|
|
actualizar('datosGenerales', v)
|
|
siguiente()
|
|
guardarAvance({ ...datos, datosGenerales: v }, paso + 1)
|
|
}}
|
|
/>
|
|
</TarjetaPaso>
|
|
)}
|
|
{paso === 1 && (
|
|
<TarjetaPaso>
|
|
<EmpleoForm
|
|
valores={datos.empleo}
|
|
onAnterior={anterior}
|
|
onSiguiente={(v) => {
|
|
actualizar('empleo', v)
|
|
siguiente()
|
|
guardarAvance({ ...datos, empleo: v }, paso + 1)
|
|
}}
|
|
/>
|
|
</TarjetaPaso>
|
|
)}
|
|
{paso === 2 && (
|
|
<TarjetaPaso>
|
|
<EconomicosForm
|
|
valores={datos.economicos}
|
|
onAnterior={anterior}
|
|
onSiguiente={(v) => {
|
|
actualizar('economicos', v)
|
|
siguiente()
|
|
guardarAvance({ ...datos, economicos: v }, paso + 1)
|
|
}}
|
|
/>
|
|
</TarjetaPaso>
|
|
)}
|
|
{paso === 3 && (
|
|
<TarjetaPaso>
|
|
<CoacreditadoForm
|
|
valores={datos.coacreditado}
|
|
onAnterior={anterior}
|
|
onSiguiente={(v) => {
|
|
actualizar('coacreditado', v)
|
|
siguiente()
|
|
guardarAvance({ ...datos, coacreditado: v }, paso + 1)
|
|
}}
|
|
/>
|
|
</TarjetaPaso>
|
|
)}
|
|
{paso === 4 && (
|
|
<TarjetaPaso>
|
|
<ReferenciasForm
|
|
valores={datos.referencias}
|
|
onAnterior={anterior}
|
|
onSiguiente={(v) => {
|
|
actualizar('referencias', v)
|
|
siguiente()
|
|
guardarAvance({ ...datos, referencias: v }, paso + 1)
|
|
}}
|
|
/>
|
|
</TarjetaPaso>
|
|
)}
|
|
{paso === 5 && (
|
|
<TarjetaPaso>
|
|
<ViviendaCreditoForm
|
|
valores={datos.viviendaCredito}
|
|
onAnterior={anterior}
|
|
onSiguiente={(v) => {
|
|
actualizar('viviendaCredito', v)
|
|
siguiente()
|
|
guardarAvance({ ...datos, viviendaCredito: v }, paso + 1)
|
|
}}
|
|
/>
|
|
</TarjetaPaso>
|
|
)}
|
|
{paso === 6 && (
|
|
<>
|
|
{cargoDeBorrador && (
|
|
<p
|
|
role="note"
|
|
className="mb-6 rounded-lg border border-amber-200 bg-amber-50 px-4 py-3 text-xs text-amber-700"
|
|
>
|
|
Retomaste un borrador: los archivos de los documentos no se guardan en el borrador,
|
|
vuelve a adjuntarlos.
|
|
</p>
|
|
)}
|
|
<TarjetaPaso>
|
|
<DocumentosForm
|
|
documentos={alta.documentos}
|
|
firmaDataUrl={alta.firma.firmaDataUrl}
|
|
onAgregar={agregarDocumento}
|
|
onQuitar={quitarDocumento}
|
|
onAplicarDatosGenerales={(campos) =>
|
|
actualizar('datosGenerales', { ...datos.datosGenerales, ...campos })
|
|
}
|
|
onAnterior={anterior}
|
|
onSiguiente={() => {
|
|
void registrarAlta()
|
|
siguiente()
|
|
guardarAvance(datos, paso + 1)
|
|
}}
|
|
/>
|
|
</TarjetaPaso>
|
|
</>
|
|
)}
|
|
{paso === 7 && (
|
|
<>
|
|
{registro && (
|
|
<p className="mb-6 rounded-lg border border-green-200 bg-green-50 px-4 py-3 text-sm font-medium text-green-700">
|
|
Alta registrada en el servidor: {registro}
|
|
</p>
|
|
)}
|
|
{sinConexion && (
|
|
<p
|
|
role="alert"
|
|
className="mb-6 rounded-lg border border-amber-200 bg-amber-50 px-4 py-3 text-xs text-amber-700"
|
|
>
|
|
Sin conexión al servidor — el expediente se generó solo localmente
|
|
</p>
|
|
)}
|
|
{errorValidacion && (
|
|
<p
|
|
role="alert"
|
|
className="mb-6 rounded-lg border border-red-200 bg-red-50 px-4 py-3 text-xs text-red-700"
|
|
>
|
|
El servidor rechazó el alta: {errorValidacion}
|
|
</p>
|
|
)}
|
|
{registro && (
|
|
<div className="mb-6 rounded-xl border border-[#E5E7EB] bg-white p-6 shadow-sm">
|
|
<p className="text-xs font-semibold uppercase tracking-wider text-[#64748B]">
|
|
Firma en remoto
|
|
</p>
|
|
<p className="mt-2 text-sm text-[#64748B]">
|
|
Genera una liga pública (vigencia 72 h) para que el cliente firme y suba sus
|
|
documentos desde su celular, sin usuario ni contraseña.
|
|
</p>
|
|
<button
|
|
type="button"
|
|
onClick={() => void generarLiga()}
|
|
className="mt-4 rounded-lg border border-[#D1D5DB] bg-white px-5 py-2.5 text-sm font-medium text-[#374151] shadow-sm transition-all duration-100 ease-out hover:bg-[#F9FAFB]"
|
|
>
|
|
Generar liga para firmar en remoto
|
|
</button>
|
|
{ligaUrl && (
|
|
<p className="mt-4 break-all text-xs text-[#111827]">
|
|
{ligaUrl}
|
|
{ligaCopiada && (
|
|
<span role="status" className="ml-2 font-medium text-accent">
|
|
Liga y mensaje de WhatsApp copiados
|
|
</span>
|
|
)}
|
|
</p>
|
|
)}
|
|
{errorLiga && <p className="mt-2 text-xs text-red-700">{errorLiga}</p>}
|
|
</div>
|
|
)}
|
|
<TarjetaPaso>
|
|
<FirmasForm
|
|
alta={alta}
|
|
onCambiarFirma={(f) => actualizar('firma', f)}
|
|
onAnterior={anterior}
|
|
/>
|
|
</TarjetaPaso>
|
|
</>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</main>
|
|
</div>
|
|
)
|
|
}
|