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:
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user