Llamado de voz activo

Bypass manual · pedido telefónico

{mmss(sec)}

{[["Teléfono entrante", "+54 11 ____-____", "phone"], ["Nombre del cliente", "Buscar o crear cliente…", "user"], ["Dirección / retiro", "Cargar datos de entrega…", "pin"]].map(([l, ph, ic]) => (

{l}

{ph}

))}

Cancelar Cerrar llamado · {mmss(sec)}

); } /* —— Overlay alerta VIP (RF-2.1) —— */ function VipAlert({ chat, onOpen, onClose }) { return (

CLIENTE VIP ENTRANTE

{chat.customer}

Reenrutado al tope de la cola · push enviado al iPad

Atender

); } /* —— Pantalla Consola —— */ function ConsolaScreen({ chain }) { const order = (list) => [...list].sort((a, b) => (b.priority - a.priority) || (b.firstResponseSec == null) - (a.firstResponseSec == null) || (b.waitSec - a.waitSec)); const [chats, setChats] = useState([]); const [selId, setSelId] = useState(null); const [maxirestOnline, setMaxirestOnline] = useState(true); const [voice, setVoice] = useState(false); const [vip, setVip] = useState(null); const [confirmed, setConfirmed] = useState({}); const [queueTab, setQueueTab] = useState("cola"); const [logs, setLogs] = useState([]); const [operators, setOperators] = useState(() => MAKI.OPERATORS); const vipRef = useRef(0); const addLog = useCallback((action, detail, chatId) => { const at = new Date().toLocaleTimeString("es-AR", { hour: "2-digit", minute: "2-digit" }); setLogs(prev => [{ id: Date.now() + Math.random(), at, action, detail: detail || "", chatId }, ...prev].slice(0, 300)); window.dispatchEvent(new CustomEvent("maki:notif", { detail: { type: "log", text: `${action}${detail ? " · " + detail : ""}`, at } })); }, []); // tick timers useEffect(() => { const t = setInterval(() => setChats(cs => cs.map(c => confirmed[c.id] ? c : { ...c, waitSec: c.waitSec + 1 })), 1000); return () => clearInterval(t); }, [confirmed]); // Load queue + operators from API useEffect(() => { if (!window.API || !API.isAuthenticated()) return; API.getQueue().then(queue => { const mapped = (queue || []).map(a => API.mapQueueItem(a)); setChats(mapped); if (mapped.length > 0) setSelId(prev => prev || order(mapped)[0].id); }).catch(() => {}); API.getOperators().then(ops => { if (ops && ops.length > 0) { setOperators(ops.map(op => ({ id: op.userId, name: op.user?.displayName || op.displayName || "Operador", status: op.status, activeChats: op.activeChatsCount || 0, artSec: 0, }))); } }).catch(() => {}); const sock = API.connectOps((event, data) => { if (event === "chat:vip_incoming") { const newChat = { ...API.mapQueueItem(data), waitSec: 0, priority: true }; setChats(cs => [newChat, ...cs]); setVip(newChat); addLog("⭐ VIP entrante", newChat.customer, newChat.id); window.dispatchEvent(new CustomEvent("maki:notif", { detail: { type: "vip", text: `Cliente VIP: ${newChat.customer}`, at: new Date().toLocaleTimeString("es-AR", { hour: "2-digit", minute: "2-digit" }) } })); if (typeof makiBeep !== "undefined") makiBeep(2); setTimeout(() => setVip(v => v && v.id === newChat.id ? null : v), 6000); } if (event === "queue:update") { API.getQueue().then(queue => { const mapped = (queue || []).map(a => API.mapQueueItem(a)); setChats(mapped); setSelId(prev => (mapped.some(c => c.id === prev) ? prev : (mapped[0] ? order(mapped)[0].id : null))); }).catch(() => {}); } if (event === "chat:message") { const cid = data && data.conversationId; if (!cid) return; const at = new Date().toLocaleTimeString("es-AR", { hour: "2-digit", minute: "2-digit" }); setChats(cs => { const exists = cs.some(c => c.id === cid); if (!exists) { // Chat aún no cargado → recargar cola (trae el texto real vía lastMessage) API.getQueue().then(queue => { if (queue && queue.length > 0) setChats(queue.map(a => API.mapQueueItem(a))); }).catch(() => {}); return cs; } const img = data.mediaId ? API.mediaUrl(data.mediaId) : null; return cs.map(c => { if (c.id !== cid) return c; const last = c.thread[c.thread.length - 1]; if (img) { // Dedupe imagen por url if (last && last.from === "client" && last.image === img) return c; return { ...c, preview: data.body || "📷 Imagen", thread: [...c.thread, { from: "client", at, text: (data.body || ""), image: img }] }; } // Dedupe texto: evita duplicar si queue:update ya cargó este mismo texto if (last && last.from === "client" && last.text === data.body) return c; return { ...c, preview: data.body, thread: [...c.thread, { from: "client", at, text: data.body }] }; }); }); addLog(data.mediaId ? "🖼️ Imagen entrante" : "💬 Mensaje entrante", (data.body || (data.mediaId ? "imagen" : "")).slice(0, 32), cid); window.dispatchEvent(new CustomEvent("maki:notif", { detail: { type: "ok", text: `Nuevo mensaje de ${data.customerName || cid}`, at } })); if (typeof makiBeep !== "undefined") makiBeep(1); } if (event === "maxirest:offline") { setMaxirestOnline(false); window.dispatchEvent(new CustomEvent("maki:notif", { detail: { type: "error", text: "Maxirest offline — pedidos en cola de reintento", at: new Date().toLocaleTimeString("es-AR", { hour: "2-digit", minute: "2-digit" }) } })); } if (event === "maxirest:recovered") { setMaxirestOnline(true); window.dispatchEvent(new CustomEvent("maki:notif", { detail: { type: "ok", text: "Maxirest volvió a estar en línea", at: new Date().toLocaleTimeString("es-AR", { hour: "2-digit", minute: "2-digit" }) } })); } }); return () => API.disconnectOps(); }, []); // Filter by chain (from App header selector) const sorted = order(chats); const chainFiltered = !chain || chain === "todas" ? sorted : sorted.filter(c => c.chain === chain); const unconfirmed = chainFiltered.filter(c => !confirmed[c.id]); const sel = chainFiltered.find(c => c.id === selId) || unconfirmed[0] || chainFiltered[0] || sorted[0]; // Handlers const verifyPay = (id) => { const chat = chats.find(c => c.id === id); setChats(cs => cs.map(c => c.id === id ? { ...c, paymentVerified: true, paymentProof: c.paymentProof || "comprobante_cargado.jpg" } : c)); addLog("✓ Pago verificado", chat?.customer, id); if (window.API && chat && chat._orderId) API.verifyPayment(chat._orderId).catch(() => {}); }; const confirm = (chat) => { const state = maxirestOnline ? "injected" : "queued"; setConfirmed(s => ({ ...s, [chat.id]: state })); addLog(state === "injected" ? "⚡ Inyectado a Maxirest" : "⏳ En cola de reintento", chat.customer, chat.id); setQueueTab("procesados"); if (window.API && chat._orderId) API.confirmOrder(chat._orderId).catch(() => {}); }; const saveAddr = (chatId, addr) => { setChats(cs => cs.map(c => c.id === chatId ? { ...c, address: addr, addrOk: !!addr } : c)); addLog("📍 Dirección actualizada", addr, chatId); if (window.API && API.isAuthenticated()) API.updateContactData(chatId, addr, undefined).catch(() => {}); }; const saveAltRef = (chatId, altRef) => { setChats(cs => cs.map(c => c.id === chatId ? { ...c, altRef, altOk: !!altRef } : c)); addLog("📞 Referencia actualizada", altRef, chatId); if (window.API && API.isAuthenticated()) API.updateContactData(chatId, undefined, altRef).catch(() => {}); }; const saveAllergens = (chatId, flags) => { const chat = chats.find(c => c.id === chatId); setChats(cs => cs.map(c => c.id === chatId ? { ...c, allergens: flags } : c)); const labels = flags.map(f => (MAKI.ALLERGENS[f] || {}).label || f).join(", ") || "ninguno"; addLog("⚠️ Alérgenos actualizados", labels, chatId); if (window.API && API.isAuthenticated() && chat && chat.customerId) API.updateAllergens(chat.customerId, flags).catch(() => {}); }; const saveName = (chatId, name) => { setChats(cs => cs.map(c => c.id === chatId ? { ...c, customer: name, nameOk: !!name } : c)); addLog("✏️ Nombre corregido", name, chatId); if (window.API && API.isAuthenticated()) API.updateContactData(chatId, undefined, undefined, name).catch(() => {}); }; const saveItems = (chatId, items) => { setChats(cs => cs.map(c => c.id === chatId ? { ...c, items } : c)); const qty = items.reduce((s, i) => s + i.qty, 0); addLog("🍱 Pedido editado", `${items.length} líneas · ${qty} u.`, chatId); }; const setPay = (chatId, method) => { setChats(cs => cs.map(c => c.id === chatId ? { ...c, paymentMethod: method } : c)); addLog("💳 Medio de pago", (PAY_METHODS[method] || {}).l || method, chatId); }; const notifyErr = (msg) => window.dispatchEvent(new CustomEvent("maki:notif", { detail: { type: "error", text: msg, at: new Date().toLocaleTimeString("es-AR", { hour: "2-digit", minute: "2-digit" }) } })); // Envía mensaje al cliente (WhatsApp real vía Meta si está configurado; si no, queda en el hilo) const sendToCustomer = (chatId, text) => { const chat = chats.find(c => c.id === chatId); const at = new Date().toLocaleTimeString("es-AR", { hour: "2-digit", minute: "2-digit" }); setChats(cs => cs.map(c => c.id === chatId ? { ...c, thread: [...c.thread, { from: "agent", at, text }] } : c)); if (window.API && API.isAuthenticated() && chat && chat.phone) { API.sendWhatsapp(chat.phone, text) .then(r => { if (r && r.simulated) addLog("💬 Mensaje (simulado)", text.slice(0, 32), chatId); else { addLog("✅ WhatsApp enviado", text.slice(0, 32), chatId); window.dispatchEvent(new CustomEvent("maki:notif", { detail: { type: "ok", text: `WhatsApp enviado a ${chat.customer}`, at } })); } }) .catch(e => notifyErr("WhatsApp: " + (e.message || "error al enviar"))); } else { addLog("💬 Mensaje enviado", text.slice(0, 32), chatId); } }; const sendReply = (text) => sendToCustomer(sel.id, text); const requestPay = (chatId) => { sendToCustomer(chatId, "¡Hola! ¿Con qué medio vas a abonar? Efectivo, transferencia, tarjeta o Mercado Pago 🙏"); addLog("💬 Solicitó medio de pago", "", chatId); }; const assignChat = (chatId, operatorId) => { const op = operators.find(o => o.id === operatorId); setChats(cs => cs.map(c => c.id === chatId ? { ...c, assignedTo: operatorId, assignedToName: op?.name || operatorId } : c)); setOperators(ops => ops.map(o => o.id === operatorId ? { ...o, activeChats: (o.activeChats || 0) + 1 } : o)); addLog("👤 Asignado a", op?.name || operatorId, chatId); if (window.API && API.isAuthenticated()) API.assignChat(chatId, operatorId).catch(() => {}); }; const simulateVip = () => { if (window.API && API.isAuthenticated()) { API.simulateVip().catch(() => {}); return; } vipRef.current++; const names = [["Gastón Pereyra", ["shellfish"]], ["Embajada de Japón", []], ["Dra. Rivas", ["peanut"]]]; const [nm, al] = names[vipRef.current % names.length]; const id = "ch-vip-" + vipRef.current; const newChat = { id, customer: nm, phone: "+54 11 4" + (1000 + vipRef.current) + "-9921", channel: "whatsapp", chain: "sakura", segment: "VIP", allergens: al, altRef: "Encargado de seguridad en portería", address: "Pilará, Lote 12", mode: "Envío", priority: true, waitSec: 0, firstResponseSec: null, assignedTo: null, assignedToName: null, status: "queued", paymentMethod: "BANK_TRANSFER", paymentVerified: false, paymentProof: null, nameOk: true, addrOk: true, altOk: true, preview: "Hola, necesito un pedido urgente para hoy", items: mkItems([["Roll Salmón Premium x10", 3], ["Combinado Masaca x40", 1]]), thread: [{ from: "client", at: "ahora", text: "Hola, necesito un pedido urgente para hoy 🙏" }], }; setChats(cs => [newChat, ...cs]); setVip(newChat); addLog("⭐ VIP simulado", nm, id); window.dispatchEvent(new CustomEvent("maki:notif", { detail: { type: "vip", text: `VIP simulado: ${nm}`, at: new Date().toLocaleTimeString("es-AR", { hour: "2-digit", minute: "2-digit" }) } })); if (typeof makiBeep !== "undefined") makiBeep(2); setTimeout(() => setVip(v => v && v.id === id ? null : v), 6000); }; const loadDemo = () => { if (!(window.API && API.isAuthenticated())) return; API.seedQueue().then(() => API.getQueue()).then(queue => { const mapped = (queue || []).map(a => API.mapQueueItem(a)); setChats(mapped); if (mapped.length > 0) setSelId(order(mapped)[0].id); addLog("📋 Demo cargada", `${mapped.length} chats`); }).catch(() => {}); }; const clearQueue = () => { if (!(window.API && API.isAuthenticated())) return; API.clearQueue().then(() => { setChats([]); setSelId(null); addLog("🧹 Cola limpiada"); }).catch(() => {}); }; if (!sel) return (

Cola vacía · esperando chats entrantes de WhatsApp…

Cargar demo Simular VIP

); return (

{/* Toolbar */}

Puente Maxirest {maxirestOnline ? "en línea" : "offline"}

{/* Registro de llamada de voz — oculto (feature futura) */} {false && setVoice(true)}>Registrar llamado de voz}

{confirmed[sel.id] ? ( /* Vista de chat ya procesado */

{confirmed[sel.id] === "injected" ? "Pedido inyectado a Maxirest" : "En cola de reintento"}

{sel.customer}

{ setQueueTab("procesados"); }}>Ver todos los procesados

) : ( <> { const next = !maxirestOnline; setMaxirestOnline(next); if (window.API && API.isAuthenticated()) (next ? API.maxirestUp() : API.maxirestDown()).catch(() => {}); }} onVerifyPay={verifyPay} onConfirm={confirm} confirmedState={confirmed[sel.id]} onSaveName={(name) => saveName(sel.id, name)} onSaveAddr={(addr) => saveAddr(sel.id, addr)} onSaveAltRef={(altRef) => saveAltRef(sel.id, altRef)} onSaveAllergens={(flags) => saveAllergens(sel.id, flags)} onSaveItems={saveItems} onSetPay={setPay} onRequestPay={requestPay} logs={logs} /> )}

{voice && setVoice(false)} />} {vip && { setSelId(vip.id); setVip(null); setQueueTab("cola"); }} onClose={() => setVip(null)} />}

); } Object.assign(window, { ConsolaScreen });