// LOLA Consola Web — Módulo de PUBLICIDAD // Campañas multicanal (Facebook, Instagram, TikTok, WhatsApp y la app LOLA) al estilo // Meta Ads Manager / TikTok Ads: overview con métricas, rendimiento por canal, lista de // campañas y un asistente de creación con VISTA PREVIA EN VIVO por red social. // Exporta window.PublicidadView. const api = () => window.LOLA.api; // ── Compacto no-monetario (1.2K, 3.4M) ── const nc = (n) => { n = n || 0; if (Math.abs(n) >= 1e6) return (n / 1e6).toFixed(n >= 1e7 ? 0 : 1) + 'M'; if (Math.abs(n) >= 1e3) return (n / 1e3).toFixed(n >= 1e5 ? 0 : 1) + 'K'; return '' + n; }; // ── Íconos de red social (marcas simplificadas) ── function ChIcon({ ch, size = 16 }) { const s = size; if (ch === 'whatsapp') return ; if (ch === 'facebook') return ; if (ch === 'instagram') return ; if (ch === 'tiktok') return ; return ; } const CH = { facebook: { label: 'Facebook', color: '#1877F2' }, instagram: { label: 'Instagram', color: '#E1306C' }, tiktok: { label: 'TikTok', color: '#111418' }, whatsapp: { label: 'WhatsApp', color: '#25D366' }, app: { label: 'App LOLA', color: '#1D57A9' }, }; const CH_ORDER = ['facebook', 'instagram', 'tiktok', 'whatsapp', 'app']; const OBJETIVOS = [ { id: 'reconocimiento', label: 'Reconocimiento', desc: 'Que más gente conozca la marca', icon: 'Globe' }, { id: 'video', label: 'Reproducciones de video', desc: 'Que vean tu video primero', icon: 'Play' }, { id: 'trafico', label: 'Tráfico', desc: 'Llevar visitas a la app o web', icon: 'Cursor' }, { id: 'mensajes', label: 'Mensajes', desc: 'Conversaciones por WhatsApp', icon: 'Chat' }, { id: 'leads', label: 'Clientes potenciales', desc: 'Registrar interesados', icon: 'Users' }, { id: 'ventas', label: 'Ventas / solicitudes', desc: 'Generar solicitudes de carga', icon: 'Trend' }, ]; const objMeta = (id) => OBJETIVOS.find((o) => o.id === id) || OBJETIVOS[0]; const ESTADOS = { activa: { label: 'Activa', color: '#1F8A5B' }, pausada: { label: 'Pausada', color: '#D98A0B' }, borrador: { label: 'Borrador', color: '#8A929E' }, finalizada: { label: 'Finalizada', color: '#5B6470' }, }; const CTA_OPCIONES = ['Cotizar ahora', 'Enviar WhatsApp', 'Descargar app', 'Solicitar transporte', 'Más información', 'Registrarme']; const DEPTOS = ['Todo el país', 'Guatemala', 'Escuintla', 'Quetzaltenango', 'Petén', 'Izabal', 'Sacatepéquez']; const INTERESES = ['Carga seca', 'Refrigerada', 'Maquinaria', 'Materiales', 'Mudanzas', 'Paquetería']; const PlayGlyph = ({ size = 34, color = '#fff' }) => ( ); // Placeholder de creativo (rayado, con explicación monoespaciada) ───────────── function CreativeSlot({ tipo, ratio, dark }) { const t = window.WC; const vertical = ratio === '9:16'; return (
{tipo === 'video' ? : }
{tipo === 'video' ? 'TU VIDEO' : 'TU IMAGEN'} · {ratio}
); } // ── VISTA PREVIA en la red seleccionada ────────────────────────────────────── function AdPreview({ ch, tipo, titular, texto, cta, anunciante }) { const t = window.WC; const meta = CH[ch] || CH.facebook; const avatar = (
); const nombre = anunciante || 'LOLA Logística'; const ctaBtn = (full) => (
{ch === 'whatsapp' && }{cta}
); // Chat (WhatsApp) ───────────────────── if (ch === 'whatsapp') { return (
{avatar}
{nombre}
Cuenta de empresa
{titular}
{texto}
{ctaBtn(true)}
11:24 ✓✓
); } // Vertical (TikTok / App LOLA) ───────── if (ch === 'tiktok' || ch === 'app') { return (
{ch === 'app' && (
Publicidad · Saltar 5s
)}
{avatar}
{nombre}
Ad
{titular}
{texto}
{ctaBtn(true)}
); } // Feed (Facebook / Instagram) ───────── const ig = ch === 'instagram'; return (
{avatar}
{nombre}
Patrocinado · {ig ? 'Instagram' : 'Facebook'}
···
{!ig &&
{texto}
}
{titular}
{ig &&
{texto}
}
{ctaBtn(false)}
); } // ── Chips de canales ── function ChannelChips({ canales, size = 22 }) { return (
{canales.map((c, i) => { const m = CH[c] || {}; return ( ); })}
); } // ── Botón principal ── function PubBtn({ t, children, onClick, kind, disabled, style }) { const [h, setH] = React.useState(false); const bg = kind === 'ghost' ? '#fff' : t.brand; return ( ); } // ═══════════════════════ VISTA PRINCIPAL ═══════════════════════ function PublicidadView() { const t = window.WC, I = window.WI; const isMobile = window.useIsMobile(); const { data, loading, error, reload } = window.useAsync(() => api().campanias(), []); const [filtro, setFiltro] = React.useState('Todas'); const [crear, setCrear] = React.useState(false); const [busyId, setBusyId] = React.useState(null); if (loading) return ; if (error) return ; const items = (data && data.items) || []; const activas = items.filter((c) => c.estado === 'activa'); const agg = items.reduce((a, c) => { const m = c.metricas || {}; a.impresiones += m.impresiones || 0; a.alcance += m.alcance || 0; a.repro += m.reproducciones || 0; a.clics += m.clics || 0; a.gasto += c.gastado || 0; return a; }, { impresiones: 0, alcance: 0, repro: 0, clics: 0, gasto: 0 }); const ctr = agg.impresiones ? (agg.clics / agg.impresiones * 100) : 0; // rendimiento por canal const porCanal = {}; items.forEach((c) => (c.canales || []).forEach((ch) => { const m = c.metricas || {}; const share = (c.canales.length || 1); porCanal[ch] = (porCanal[ch] || 0) + (m.impresiones || 0) / share; })); const canalMax = Math.max(1, ...Object.values(porCanal)); const rows = items.filter((c) => filtro === 'Todas' ? true : filtro === 'Activas' ? c.estado === 'activa' : filtro === 'Pausadas' ? c.estado === 'pausada' : c.estado === 'borrador'); const toggle = async (c) => { setBusyId(c.id); try { await api().toggleCampania(c.id); reload(); } catch (e) { alert(e.message || 'No se pudo actualizar'); } setBusyId(null); }; return (
{/* Encabezado con CTA */}
{activas.length} activa(s) en Facebook · Instagram · TikTok · WhatsApp · App
setCrear(true)}> Crear campaña
{/* KPIs */}
} accent={t.brand}/> } accent={t.purple}/> } accent={t.accentDk}/> } accent={t.success}/>
{/* Rendimiento por canal + reparto de objetivos */}
{CH_ORDER.map((ch) => { const v = porCanal[ch] || 0; const m = CH[ch]; return (
{m.label}
{nc(Math.round(v))}
); })}
{nc(agg.impresiones)}
impresiones acumuladas
{ctr.toFixed(2)}%
CTR
{items.length}
campañas
{/* Lista de campañas */} }> {rows.length ? (
{rows.map((c, i) => { const es = ESTADOS[c.estado] || ESTADOS.borrador; const om = objMeta(c.objetivo); const m = c.metricas || {}; const OIcn = I[om.icon] || I.Trend; return (
{c.creativo && c.creativo.tipo === 'video' ? : }
{c.nombre}
{c.anunciante ? c.anunciante.nombre : 'LOLA'} {om.label}
{!isMobile && (
)} {es.label} {c.estado !== 'borrador' && ( )}
); })}
) : } {crear && setCrear(false)} onCreated={() => { setCrear(false); reload(); }}/>}
); } function Metric({ t, k, v }) { return (
{k}
{v}
); } // ═══════════════════════ ASISTENTE DE CREACIÓN ═══════════════════════ function CrearCampania({ t, onClose, onCreated }) { const isMobile = window.useIsMobile(900); const [nombre, setNombre] = React.useState(''); const [obj, setObj] = React.useState('reconocimiento'); const [anunTipo, setAnunTipo] = React.useState('lola'); const [anunEmpresa, setAnunEmpresa] = React.useState('Constructora Maya, S.A.'); const [canales, setCanales] = React.useState(['facebook', 'instagram', 'tiktok']); const [publico, setPublico] = React.useState('todos'); const [deptos, setDeptos] = React.useState(['Todo el país']); const [edad, setEdad] = React.useState('25-44'); const [intereses, setIntereses] = React.useState(['Carga seca']); const [tipo, setTipo] = React.useState('video'); const [titular, setTitular] = React.useState('A donde vayas, yo voy'); const [texto, setTexto] = React.useState('Cotiza, asigna y rastrea tu carga en minutos con LOLA.'); const [cta, setCta] = React.useState('Descargar app'); const [presTipo, setPresTipo] = React.useState('diario'); const [pres, setPres] = React.useState(300); const [dias, setDias] = React.useState(14); const [prevCh, setPrevCh] = React.useState('facebook'); const [busy, setBusy] = React.useState(false); React.useEffect(() => { if (!canales.includes(prevCh) && canales.length) setPrevCh(canales[0]); }, [canales]); const toggleArr = (arr, set, v) => set(arr.includes(v) ? arr.filter((x) => x !== v) : arr.concat(v)); const totalPres = presTipo === 'diario' ? pres * dias : pres; const factor = Math.max(1, canales.length); const reachLow = Math.round(totalPres * 26 * Math.sqrt(factor)); const reachHigh = Math.round(totalPres * 68 * Math.sqrt(factor)); const anunNombre = anunTipo === 'empresa' ? anunEmpresa : 'LOLA'; const publicar = async (estado) => { if (!canales.length) { alert('Elige al menos un canal.'); return; } setBusy(true); const payload = { nombre: nombre.trim() || (objMeta(obj).label + ' — ' + anunNombre), anunciante: { tipo: anunTipo, nombre: anunNombre }, objetivo: obj, canales, publico: { tipo: publico, deptos, edad, intereses }, creativo: { tipo, titular, texto, cta }, presupuesto: { tipo: presTipo, monto: pres, dias }, estado, }; try { await api().crearCampania(payload); onCreated(); } catch (e) { alert(e.message || 'No se pudo crear la campaña'); setBusy(false); } }; const Section = ({ n, title, sub, children }) => (
{n}
{title}
{sub &&
{sub}
}
{children}
); return (
e.stopPropagation()} style={{ background: '#fff', borderRadius: isMobile ? 0 : 20, width: '100%', maxWidth: 1000, height: isMobile ? '100%' : 'min(90vh, 860px)', overflow: 'hidden', display: 'flex', flexDirection: 'column', boxShadow: '0 40px 100px -30px rgba(0,0,0,.6)' }}> {/* header */}
Nueva campaña
Publica en redes sociales y en la app LOLA
{/* cuerpo: formulario + preview */}
{/* formulario */}
{OBJETIVOS.map((o) => { const on = obj === o.id; const Icn = window.WI[o.icon] || window.WI.Trend; return ( ); })}
{anunTipo === 'empresa' && ( )}
{CH_ORDER.map((ch) => { const on = canales.includes(ch); const m = CH[ch]; return ( ); })}
Ubicación
{DEPTOS.map((d) => toggleArr(deptos, setDeptos, d)}>{d})}
Edad
Intereses
{INTERESES.map((d) => toggleArr(intereses, setIntereses, d)}>{d})}
Botón (CTA)
{CTA_OPCIONES.map((o) => setCta(o)}>{o})}
{window.fmtK(pres)}
setPres(+e.target.value)} style={{ width: '100%', accentColor: t.brand }}/>
Q50Q2,000{presTipo === 'diario' ? '/día' : ''}
{presTipo === 'diario' && (
Duración
)}
{/* preview + resumen */}
Vista previa
{canales.length ? (
{canales.map((ch) => ( ))}
) :
Elige al menos un canal para ver la vista previa.
}
Alcance estimado
{nc(reachLow)} – {nc(reachHigh)}
personas · {window.fmtK(totalPres)} en {presTipo === 'diario' ? dias + ' días' : 'total'}
publicar('borrador')} disabled={busy} style={{ flex: 1 }}>Borrador publicar('activa')} disabled={busy} style={{ flex: 1.4 }}>{busy ? 'Publicando…' : 'Publicar campaña'}
); } // ── Controles compartidos del asistente ── function Seg({ t, options, value, onChange }) { return (
{options.map((o) => { const on = value === o.v; return ( ); })}
); } function Chip({ t, on, onClick, children }) { return ( ); } function PubField({ t, label, value, onChange, placeholder, area }) { return (