// ========== Comparador de productos · cart + página ========== // // Cart de comparación (hasta 4 productos), persistido en localStorage, // con evento global "holai:compare-change" para que los componentes // se re-rendericen al cambiar. // // Página /comparar renderiza una tabla con las attribute rows del // schema (capital, tasa, edades, etc.), una columna por producto, // y resalta el "ganador" por row cuando el atributo tiene orden. // ── Cart global ───────────────────────────────────────────────────────────── (function setupCompareCart() { const KEY = 'holai-compare'; const MAX = 4; function readList() { try { return JSON.parse(localStorage.getItem(KEY) || '[]'); } catch { return []; } } function writeList(list) { localStorage.setItem(KEY, JSON.stringify(list)); window.dispatchEvent(new CustomEvent('holai:compare-change', { detail: list })); } function makeId(companyId, productId) { return `${companyId}::${productId}`; } window.holai = window.holai || {}; window.holai.compare = { list: readList, max: () => MAX, has: (companyId, productId) => readList().includes(makeId(companyId, productId)), add: (companyId, productId) => { const list = readList(); const id = makeId(companyId, productId); if (list.includes(id) || list.length >= MAX) return false; writeList([...list, id]); return true; }, remove: (companyId, productId) => { const list = readList(); const id = makeId(companyId, productId); if (!list.includes(id)) return false; writeList(list.filter(x => x !== id)); return true; }, toggle: (companyId, productId) => { return window.holai.compare.has(companyId, productId) ? window.holai.compare.remove(companyId, productId) : window.holai.compare.add(companyId, productId); }, clear: () => writeList([]), }; })(); // ── Hook: useCompareList() ────────────────────────────────────────────────── function useCompareList() { const [list, setList] = React.useState(() => window.holai.compare.list()); React.useEffect(() => { const onChange = (e) => setList(e.detail || window.holai.compare.list()); window.addEventListener('holai:compare-change', onChange); return () => window.removeEventListener('holai:compare-change', onChange); }, []); return list; } // ── Resolver id ("company::product") a {company, product} ─────────────────── function resolveCompareItem(id) { const [companyId, productId] = id.split('::'); const catalog = window.HOLAI_INSURANCE_CATALOG || []; const company = catalog.find(c => c.id === companyId); if (!company) return null; const product = company.productos.find(p => (p.id || p.nombre) === productId); if (!product) return null; return { company, product }; } // ── Atributos a comparar ──────────────────────────────────────────────────── // Cada attribute: // key : id único // label : etiqueta legible // group : sección (ej: "Precio", "Capital", "Edades") // value : (product, company) → cualquier valor o null // format : (value) → string para mostrar // compare : 'higher' | 'lower' | null → para resaltar ganador // applyTo : array de ramos donde aplica (si vacío = todos) const COMPARE_ATTRS = [ // ── Precio ─────────────────────────────────────────────────────────────── { key:'precio', group:'Precio', label:'Prima desde', value: p => p.desde ? { monto: p.desde, unit: p.unit, moneda: p.detail?.moneda } : null, format: v => v ? `$${v.monto.toLocaleString('es-CL')} / ${v.unit}` : '—', compare: 'lower', cmpKey: v => v?.monto }, { key:'moneda', group:'Precio', label:'Moneda del producto', value: p => p.detail?.moneda, format: v => v || 'CLP', compare: null }, // ── Capital ────────────────────────────────────────────────────────────── { key:'cap-min', group:'Capital', label:'Capital mínimo', value: p => p.detail?.capital?.min ? { min: p.detail.capital.min, unit: p.detail.capital.unit } : null, format: v => v ? `${v.unit || ''} ${v.min.toLocaleString('es-CL')}` : '—', compare: 'lower', cmpKey: v => v?.min }, { key:'cap-max', group:'Capital', label:'Capital máximo', value: p => p.detail?.capital?.max ? { max: p.detail.capital.max, unit: p.detail.capital.unit } : null, format: v => v ? `${v.unit || ''} ${v.max.toLocaleString('es-CL')}` : '—', compare: 'higher', cmpKey: v => v?.max }, // ── Edades ─────────────────────────────────────────────────────────────── { key:'edad-min', group:'Edades', label:'Edad mínima de ingreso', value: p => p.detail?.edadIngresoMin, format: v => v ? `${v} años` : '—', compare: 'lower' }, { key:'edad-max', group:'Edades', label:'Edad máxima de ingreso', value: p => p.detail?.edadIngresoMax, format: v => v ? `${v} años` : '—', compare: 'higher' }, { key:'edad-perm', group:'Edades', label:'Permanencia máxima', value: p => p.detail?.edadPermanencia, format: v => v === 'vitalicio' ? 'Vitalicia' : (v ? `Hasta ${v} años` : '—'), compare: null }, // ── Económicos ─────────────────────────────────────────────────────────── { key:'tasa', group:'Económicos', label:'Tasa garantizada', value: p => p.detail?.tasaGarantizada, format: v => typeof v === 'number' ? `${(v*100).toFixed(2)}% anual` : '—', compare: 'higher' }, { key:'rent-hist', group:'Económicos', label:'Rentabilidad histórica', value: p => p.detail?.rentabilidadHist, format: v => typeof v === 'number' ? `${(v*100).toFixed(2)}% anual` : '—', compare: 'higher' }, { key:'comision', group:'Económicos', label:'Comisión anual', value: p => p.detail?.comisionAnual, format: v => typeof v === 'number' ? `${(v*100).toFixed(2)}%` : '—', compare: 'lower' }, { key:'aporte-min', group:'Económicos', label:'Aporte mínimo', value: p => p.detail?.aporteMinimo, format: v => v ? `${v.unit || ''} ${(v.monto || '').toLocaleString?.('es-CL') || v.monto || ''} / ${v.periodicidad || '—'}` : '—', compare: 'lower', cmpKey: v => v?.monto }, { key:'regimen', group:'Económicos', label:'Régimen APV', value: p => p.detail?.regimenAPV, format: v => v || '—', compare: null }, // ── Ahorro (seguros de vida con ahorro) ────────────────────────────────── { key:'costo-cobertura', group:'Ahorro', label:'Costo de cobertura', value: p => p.detail?.costoCobertura, format: v => v ? (v.label || (typeof v.pct === 'number' ? `${(v.pct*100).toFixed(1)}% de la prima` : '—')) : '—', compare: 'lower', cmpKey: v => (v && typeof v.pct === 'number') ? v.pct : null }, { key:'gasto-asegurador', group:'Ahorro', label:'Gasto asegurador', value: p => p.detail?.gastoAsegurador, format: v => v ? (v.label || (typeof v.pct === 'number' ? `${(v.pct*100).toFixed(2)}% anual` : '—')) : '—', compare: 'lower', cmpKey: v => (v && typeof v.pct === 'number') ? v.pct : null }, { key:'beneficios', group:'Ahorro', label:'Beneficios adicionales', value: p => p.detail?.beneficiosAdicionales, format: v => Array.isArray(v) && v.length ? v.join(' · ') : '—', compare: 'higher', cmpKey: v => Array.isArray(v) ? v.length : 0 }, // ── Cobertura salud ────────────────────────────────────────────────────── { key:'copago-amb', group:'Cobertura salud', label:'Cobertura ambulatoria', value: p => p.detail?.copagoAmbulatorio, format: v => typeof v === 'number' ? `${Math.round(v*100)}%` : '—', compare: 'higher' }, { key:'copago-hosp', group:'Cobertura salud', label:'Cobertura hospitalaria', value: p => p.detail?.copagoHospital, format: v => typeof v === 'number' ? `${Math.round(v*100)}%` : '—', compare: 'higher' }, { key:'red', group:'Cobertura salud', label:'Red de prestadores', value: p => p.detail?.redPrestadores, format: v => v ? (v.charAt(0).toUpperCase() + v.slice(1)) : '—', compare: null }, { key:'maternidad', group:'Cobertura salud', label:'Maternidad', value: p => p.detail?.maternidadCubierta, format: v => v === true ? '✓ Cubierta' : v === false ? '✗ No cubierta' : '—', compare: null }, // ── Cobertura general (vida / autos / hogar) ──────────────────────────── { key:'coberturas', group:'Coberturas', label:'Coberturas incluidas', value: p => (p.detail?.coberturas || p.detail?.coberturasIncluidas), format: v => Array.isArray(v) && v.length ? v.join(' · ') : '—', compare: 'higher', cmpKey: v => Array.isArray(v) ? v.length : 0 }, { key:'modalidades', group:'Coberturas', label:'Modalidades', value: p => p.detail?.modalidades, format: v => Array.isArray(v) && v.length ? v.join(' · ') : '—', compare: 'higher', cmpKey: v => Array.isArray(v) ? v.length : 0 }, { key:'carencia', group:'Coberturas', label:'Carencia', value: p => p.detail?.carenciaMeses, format: v => typeof v === 'number' ? (v === 0 ? 'Sin carencia' : `${v} meses`) : '—', compare: 'lower' }, { key:'examenes', group:'Coberturas', label:'Exámenes médicos', value: p => p.detail?.examenesMedicos, format: v => v || '—', compare: null }, { key:'deducible', group:'Coberturas', label:'Deducible', value: p => p.detail?.deducible, format: v => v ? `${v.monto}${v.unit || ''} (${v.tipo})` : '—', compare: 'lower', cmpKey: v => v?.monto }, // ── Identificación ─────────────────────────────────────────────────────── { key:'producto-url', group:'Más info', label:'Página del producto', value: (p, c) => p.detail?.productoUrl || c.url, format: v => v ? Ir al sitio → : '—', compare: null }, ]; // ── Compare row con highlight del ganador ─────────────────────────────────── function CompareRow({ attr, items }) { const values = items.map(it => attr.value(it.product, it.company)); const formatted = values.map(v => attr.format(v)); const allEmpty = values.every(v => v == null || v === '' || (Array.isArray(v) && v.length === 0)); if (allEmpty) return null; // Identificar ganador(es) const winners = new Set(); if (attr.compare && values.length >= 2) { const numeric = values.map(v => { if (v == null) return null; if (attr.cmpKey) return attr.cmpKey(v); if (typeof v === 'number') return v; return null; }); const valid = numeric.filter(n => n != null); if (valid.length >= 2) { const winnerVal = attr.compare === 'higher' ? Math.max(...valid) : Math.min(...valid); numeric.forEach((n, i) => { if (n === winnerVal) winners.add(i); }); } } return ( {attr.label} {formatted.map((v, i) => ( {v} {winners.has(i) && winners.size < items.length && ( MEJOR )} ))} ); } // ── Página /comparar ──────────────────────────────────────────────────────── function CompararPage({ go }) { const compareIds = useCompareList(); const items = compareIds.map(id => resolveCompareItem(id)).filter(Boolean); const grouped = COMPARE_ATTRS.reduce((acc, a) => { (acc[a.group] = acc[a.group] || []).push(a); return acc; }, {}); return (
{items.length === 0 && (
Sin productos para comparar
Andá al o al y agregá productos al comparador.
Podés comparar hasta 4 a la vez.
)} {items.length > 0 && ( <> {/* Acciones */}
{/* Tabla */}
{items.map((it, i) => ( ))} {Object.entries(grouped).map(([group, attrs]) => ( {attrs.map(attr => )} ))}
ATRIBUTO
{it.company.name}
{it.product.nombre}
{group}
MEJOR resalta el producto que gana en cada métrica comparable. La comparación es referencial — confirmá con la póliza oficial de cada compañía antes de contratar.
)}
); } // ── Pill flotante "X productos · Comparar" ────────────────────────────────── function CompareCartPill({ go }) { const list = useCompareList(); if (list.length < 2) return null; return ( ); } // ── Botón "Comparar" reutilizable (sale por product + company) ────────────── function CompareToggleButton({ company, product, size = 'md' }) { const list = useCompareList(); const id = `${company.id}::${product.id || product.nombre}`; const isIn = list.includes(id); const isFull = list.length >= window.holai.compare.max() && !isIn; const small = size === 'sm'; return ( ); } Object.assign(window, { CompararPage, CompareCartPill, CompareToggleButton, useCompareList });