feat(alta): conversión directa afluencia → alta de cliente

Tras registrar la afluencia, la pantalla de éxito ofrece 'Pasar a Alta
de Cliente': abre el wizard prellenado con los datos recién capturados
(nombre, email, celular) y el leadMondayId ya ligado, sin rebuscar el
lead. Quedan también 'Capturar otro' y 'Volver'.
This commit is contained in:
2026-09-01 20:30:14 +00:00
parent 2b87bf66a7
commit cd93aec91d
3 changed files with 56 additions and 16 deletions

View File

@@ -1,10 +1,13 @@
import { useState, type FormEvent } from 'react'
import { z } from 'zod'
import { crearLead } from '../services/api'
import { crearLead, type LeadResumen } from '../services/api'
import { DESARROLLOS_LEAD, ORIGENES_LEAD } from '../data/constantes'
interface Props {
onVolver: () => void
/** Conversión directa: tras registrar la afluencia, abrir el alta completa
* prellenada con los datos recién capturados (sin rebuscar el lead) */
onPasarAAltaCliente: (lead: LeadResumen) => void
}
const emailSchema = z.string().trim().email()
@@ -27,11 +30,11 @@ const FORM_INICIAL = { nombre: '', telefono: '', email: '', origen: '', desarrol
* lead en Monday y su oportunidad en etapa Afluencia. El alta completa de
* cliente sigue siendo el wizard del picker.
*/
export default function AltaAfluenciaForm({ onVolver }: Props) {
export default function AltaAfluenciaForm({ onVolver, onPasarAAltaCliente }: Props) {
const [form, setForm] = useState(FORM_INICIAL)
const [errores, setErrores] = useState<Errores>({})
const [enviando, setEnviando] = useState(false)
const [exito, setExito] = useState(false)
const [leadCreado, setLeadCreado] = useState<LeadResumen | null>(null)
const [aviso, setAviso] = useState('')
const cambiar = (campo: keyof typeof FORM_INICIAL) => (e: { target: { value: string } }) => {
@@ -65,7 +68,14 @@ export default function AltaAfluenciaForm({ onVolver }: Props) {
})
setEnviando(false)
if (res.ok) {
setExito(true)
setLeadCreado({
id: res.lead.id,
nombre: form.nombre.trim(),
telefono: form.telefono.trim(),
email: form.email.trim(),
estado: res.lead.estado,
origen: form.origen,
})
} else if (res.motivo === 'duplicado') {
setAviso(`Ya existe un lead con ese teléfono: ${res.nombre}.`)
} else {
@@ -77,10 +87,10 @@ export default function AltaAfluenciaForm({ onVolver }: Props) {
setForm(FORM_INICIAL)
setErrores({})
setAviso('')
setExito(false)
setLeadCreado(null)
}
if (exito) {
if (leadCreado !== null) {
return (
<div className="max-w-md">
<p
@@ -89,11 +99,18 @@ export default function AltaAfluenciaForm({ onVolver }: Props) {
>
Registrado en afluencia — se asignará por round-robin
</p>
<div className="mt-6 flex gap-3">
<div className="mt-6 flex flex-wrap gap-3">
<button
type="button"
onClick={() => onPasarAAltaCliente(leadCreado)}
className="bg-accent px-5 py-2.5 text-xs font-bold uppercase tracking-widest text-white transition-colors duration-150 hover:bg-neutral-900"
>
Pasar a Alta de Cliente
</button>
<button
type="button"
onClick={capturarOtro}
className="bg-accent px-5 py-2.5 text-xs font-bold uppercase tracking-widest text-white transition-colors duration-150 hover:bg-neutral-900"
className="border border-accent bg-white px-5 py-2.5 text-xs font-bold uppercase tracking-widest text-accent transition-colors duration-150 hover:bg-accent hover:text-white"
>
Capturar otro
</button>