feat(cotizador): historial, compartir WhatsApp, folio+QR, comparador de unidades, alertas de inventario
- Mis cotizaciones (guardar con cliente, retomar, nueva) asociadas al vendedor del token - Compartir: resumen copiable + deep link wa.me; PDF con folio, vigencia y QR - GET /api/cotizaciones/:id/publico (público, datos mínimos sin PII del cliente) - Comparador lado a lado de 2 unidades (mismo o distinto desarrollo) - POST /api/cotizaciones/alertas-inventario: avisa al vendedor si una unidad cotizada cambia de estatus (dedup; wire con syncs documentado) - Fix: labels de propuesta mapeados a los reales del board Oportunidades - Tests: api 201, cotizador 82
This commit is contained in:
184
apps/cotizador/src/components/ComparadorUnidades.tsx
Normal file
184
apps/cotizador/src/components/ComparadorUnidades.tsx
Normal file
@@ -0,0 +1,184 @@
|
||||
import { useMemo, useState } from 'react'
|
||||
import type { Unidad, TipoPropuesta } from '../types'
|
||||
import { compararUnidades, type ColumnaComparador } from '../lib/comparadorUnidades'
|
||||
import { formatoMoneda } from '../lib/formatters'
|
||||
import { LISTA_DESARROLLOS, obtenerDesarrollo } from '../data/desarrollos'
|
||||
|
||||
interface Props {
|
||||
unidades: Unidad[]
|
||||
/** Tipo de propuesta activa en el cotizador (se aplica a ambas unidades) */
|
||||
tipo: TipoPropuesta
|
||||
apartado: number
|
||||
acabados: boolean
|
||||
}
|
||||
|
||||
const formatoM2 = (v: number | null): string => (v === null ? '—' : `${v.toLocaleString('es-MX')} m²`)
|
||||
|
||||
interface Fila {
|
||||
etiqueta: string
|
||||
obtener: (c: ColumnaComparador) => string
|
||||
destacada?: boolean
|
||||
}
|
||||
|
||||
/**
|
||||
* Comparador de 2 unidades (del mismo o distinto desarrollo), lado a lado,
|
||||
* con la propuesta activa calculada por el motor con los parámetros de cada
|
||||
* desarrollo.
|
||||
*/
|
||||
export function ComparadorUnidades({ unidades, tipo, apartado, acabados }: Props) {
|
||||
const [abierto, setAbierto] = useState(false)
|
||||
const [codigoA, setCodigoA] = useState('')
|
||||
const [codigoB, setCodigoB] = useState('')
|
||||
|
||||
const porCodigo = useMemo(() => {
|
||||
const m = new Map<string, Unidad>()
|
||||
for (const u of unidades) m.set(`${u.desarrollo ?? 'DIAGONAL'}|${u.codigo}`, u)
|
||||
return m
|
||||
}, [unidades])
|
||||
|
||||
const unidadA = porCodigo.get(codigoA) ?? null
|
||||
const unidadB = porCodigo.get(codigoB) ?? null
|
||||
|
||||
const comparacion = useMemo(
|
||||
() => (unidadA && unidadB ? compararUnidades(unidadA, unidadB, tipo, apartado, acabados) : null),
|
||||
[unidadA, unidadB, tipo, apartado, acabados],
|
||||
)
|
||||
|
||||
const filas: Fila[] = [
|
||||
{ etiqueta: 'Desarrollo', obtener: (c) => c.desarrolloNombre },
|
||||
{ etiqueta: 'Modelo', obtener: (c) => c.unidad.modelo },
|
||||
{ etiqueta: 'Estatus', obtener: (c) => c.unidad.status },
|
||||
{ etiqueta: 'Sup. construcción', obtener: (c) => formatoM2(c.supConstruccion) },
|
||||
{ etiqueta: 'Precio de lista', obtener: (c) => formatoMoneda(c.precioLista) },
|
||||
{ etiqueta: 'Precio final c/desc.', obtener: (c) => formatoMoneda(c.propuesta.precioFinal) },
|
||||
{ etiqueta: 'Enganche', obtener: (c) => formatoMoneda(c.propuesta.enganche) },
|
||||
{
|
||||
etiqueta: 'Mensualidad',
|
||||
obtener: (c) =>
|
||||
c.propuesta.notaMensualidades
|
||||
? `— (${c.propuesta.notaMensualidades})`
|
||||
: c.propuesta.mensualidad === null
|
||||
? 'N/A'
|
||||
: `${c.propuesta.numMensualidades} × ${formatoMoneda(c.propuesta.mensualidad)}`,
|
||||
},
|
||||
{ etiqueta: 'Pago final', obtener: (c) => formatoMoneda(c.propuesta.pagoFinal) },
|
||||
{
|
||||
etiqueta: 'Total pagado',
|
||||
obtener: (c) => (c.total === null ? '—' : formatoMoneda(c.total)),
|
||||
destacada: true,
|
||||
},
|
||||
]
|
||||
|
||||
const selector = (id: string, valor: string, onChange: (v: string) => void, etiqueta: string) => (
|
||||
<div>
|
||||
<label htmlFor={id} className="mb-2 block text-xs font-bold tracking-widest text-neutral-500 uppercase">
|
||||
{etiqueta}
|
||||
</label>
|
||||
<select
|
||||
id={id}
|
||||
value={valor}
|
||||
onChange={(e) => onChange(e.target.value)}
|
||||
className="w-full border border-neutral-300 bg-white px-3 py-2.5 text-sm transition-colors duration-150 focus:border-neutral-900 focus:outline-none"
|
||||
>
|
||||
<option value="">Selecciona una unidad…</option>
|
||||
{LISTA_DESARROLLOS.map((dev) => {
|
||||
const delDesarrollo = unidades.filter((u) => (u.desarrollo ?? 'DIAGONAL') === dev)
|
||||
if (delDesarrollo.length === 0) return null
|
||||
return (
|
||||
<optgroup key={dev} label={obtenerDesarrollo(dev).nombre}>
|
||||
{delDesarrollo.map((u) => (
|
||||
<option key={`${dev}|${u.codigo}`} value={`${dev}|${u.codigo}`}>
|
||||
{u.codigo} — {u.modelo}
|
||||
</option>
|
||||
))}
|
||||
</optgroup>
|
||||
)
|
||||
})}
|
||||
</select>
|
||||
</div>
|
||||
)
|
||||
|
||||
return (
|
||||
<section className="mt-16" aria-labelledby="comparador-unidades-titulo">
|
||||
<div className="flex flex-wrap items-center justify-between gap-4">
|
||||
<h2
|
||||
id="comparador-unidades-titulo"
|
||||
className="text-xs font-bold tracking-widest text-neutral-500 uppercase"
|
||||
>
|
||||
Comparar unidades
|
||||
</h2>
|
||||
<button
|
||||
type="button"
|
||||
aria-expanded={abierto}
|
||||
aria-controls="comparador-unidades-contenido"
|
||||
onClick={() => setAbierto((v) => !v)}
|
||||
className="border border-neutral-900 bg-white px-5 py-2.5 text-xs font-bold tracking-widest text-neutral-900 uppercase transition-colors duration-150 hover:bg-neutral-100"
|
||||
>
|
||||
{abierto ? 'Ocultar comparación' : 'Comparar 2 unidades'}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{abierto && (
|
||||
<div id="comparador-unidades-contenido" className="mt-6 border border-neutral-200 bg-white p-6">
|
||||
<div className="grid gap-6 md:grid-cols-2">
|
||||
{selector('comparador-a', codigoA, setCodigoA, 'Unidad A')}
|
||||
{selector('comparador-b', codigoB, setCodigoB, 'Unidad B')}
|
||||
</div>
|
||||
|
||||
{!comparacion ? (
|
||||
<p className="mt-6 text-sm text-neutral-500">
|
||||
Selecciona dos unidades para ver la comparación lado a lado.
|
||||
</p>
|
||||
) : (
|
||||
<div className="mt-6 overflow-x-auto">
|
||||
<table className="w-full min-w-[480px] border-collapse text-sm">
|
||||
<thead>
|
||||
<tr>
|
||||
<th scope="col" className="w-48 p-3 text-left">
|
||||
<span className="sr-only">Concepto</span>
|
||||
</th>
|
||||
{[comparacion.a, comparacion.b].map((c) => (
|
||||
<th
|
||||
key={`${c.desarrolloId}|${c.unidad.codigo}`}
|
||||
scope="col"
|
||||
className="p-3 text-right text-xs font-bold tracking-widest text-neutral-900 uppercase"
|
||||
>
|
||||
{c.unidad.codigo}
|
||||
</th>
|
||||
))}
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{filas.map((fila) => (
|
||||
<tr key={fila.etiqueta}>
|
||||
<th
|
||||
scope="row"
|
||||
className="border-t border-neutral-200 p-3 text-left text-xs font-bold tracking-widest text-neutral-500 uppercase"
|
||||
>
|
||||
{fila.etiqueta}
|
||||
</th>
|
||||
{[comparacion.a, comparacion.b].map((c) => (
|
||||
<td
|
||||
key={`${c.desarrolloId}|${c.unidad.codigo}`}
|
||||
className={`border-t border-neutral-200 p-3 text-right whitespace-nowrap ${
|
||||
fila.destacada ? 'font-bold text-accent' : 'font-light text-neutral-900'
|
||||
}`}
|
||||
>
|
||||
{fila.obtener(c)}
|
||||
</td>
|
||||
))}
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
<p className="mt-6 text-xs text-neutral-400">
|
||||
Cada unidad se calcula con los parámetros de su desarrollo y el mismo apartado.
|
||||
El enganche ya incluye la deducción del apartado.
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</section>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user