/* global React, fmtMoney */
// =============================================================
// Chat widget — floating bottom-right, opens to full convo flow
// Bilingual, qualifying flow on homepage; pre-loaded car on car page
// =============================================================
const { useState: useChatState, useEffect: useChatEffect, useRef: useChatRef } = React;
const CHAT_TXT = {
en: {
open: "Chat",
title: "Chat with Eddie",
sub: "Office #2 · Nissan of Omaha",
typing: "Eddie is typing…",
placeholder: "Type a message",
send: "Send",
home_intro: "Hi! 👋 I'm here to help you find a car at Nissan of Omaha. What brings you in today?",
quick_intent: ["Under $15K", "SUVs", "Trucks", "New Specials", "Trade-in"],
ask_budget: "Got a budget in mind? Or a monthly payment range?",
quick_budget: ["Under $15k", "$15–25k", "$25–35k", "$35k+", "I'll know when I see it"],
ask_timeline: "When are you hoping to drive something home?",
quick_timeline: ["This week", "This month", "Just looking"],
ask_name: "Cool. What name should Eddie text?",
ask_phone: "And the best number to reach you?",
ask_time: "What's a good time for him to text you back?",
quick_time: ["ASAP", "After 5pm", "This weekend"],
done: "All set! Eddie will text you in 5 minutes. (You'd be lead #L0247.)",
car_intro: (car) => `Hi! I see you're checking out the ${car.year} ${car.model} ${car.trim}. Want me to lock in ${car.pricing_type === "lease" ? fmtMoney(car.monthly_payment) + "/mo" : car.pricing_type === "apr" ? car.apr_rate + "% APR" : fmtMoney(car.sale_price)} or schedule a quick visit?`,
car_quick: (car) => [
car.pricing_type === "lease" ? "Lock the lease rate" : car.pricing_type === "apr" ? "Lock the APR" : "Lock this price",
"Schedule a visit",
"Just have a question",
"Trade-in value",
],
car_done: (car) => `Eddie will text you in 5 minutes about the ${car.model}.`,
},
es: {
open: "Chat",
title: "Chatea con Eddie",
sub: "Office #2 · Nissan of Omaha",
typing: "Eddie está escribiendo…",
placeholder: "Tírame un mensaje",
send: "Enviar",
home_intro: "¡Quihúbole! 👋 Te ayudo a encontrar un carro aquí en Nissan of Omaha. ¿Qué andas buscando?",
quick_intent: ["Menos de $15K", "SUVs", "Trocas", "Especiales nuevos", "Cambio"],
ask_budget: "¿Tienes un budget en mente? ¿O un pago mensual?",
quick_budget: ["Menos de $15k", "$15–25k", "$25–35k", "$35k+", "Cuando lo vea lo sé"],
ask_timeline: "¿Cuándo te lo quieres llevar?",
quick_timeline: ["Esta semana", "Este mes", "Nomás viendo"],
ask_name: "Va. ¿A qué nombre te texteo?",
ask_phone: "¿Y al mejor número pa' textearte?",
ask_time: "¿A qué hora te cae bien que te texte?",
quick_time: ["Ahora", "Después de las 5pm", "Este fin"],
done: "¡Va! Eddie te texta en 5 minutos. (Serías el lead #L0247.)",
car_intro: (car) => `¡Quihúbole! Veo que andas viendo el ${car.year} ${car.model} ${car.trim}. ¿Te aparto ${car.pricing_type === "lease" ? fmtMoney(car.monthly_payment) + "/mes" : car.pricing_type === "apr" ? car.apr_rate + "% APR" : fmtMoney(car.sale_price)} o te agendo una visita?`,
car_quick: (car) => [
car.pricing_type === "lease" ? "Aparta la renta" : car.pricing_type === "apr" ? "Aparta el APR" : "Aparta el precio",
"Aparta visita",
"Tengo una pregunta",
"¿Cuánto vale el mío?",
],
car_done: (car) => `Eddie te texta en 5 minutos sobre el ${car.model}.`,
},
};
function ChatWidget({ lang, open, onOpen, onClose, vehicle }) {
const txt = CHAT_TXT[lang] || CHAT_TXT.en;
const [messages, setMessages] = useChatState([]);
const [typed, setTyped] = useChatState("");
const [typing, setTyping] = useChatState(false);
const [leadSubmitted, setLeadSubmitted] = useChatState(false);
const scrollRef = useChatRef(null);
// Seed opening message when widget opens or context changes
useChatEffect(() => {
if (!open) return;
setLeadSubmitted(false);
if (vehicle) {
setMessages([{ from: "bot", text: txt.car_intro(vehicle), quick: txt.car_quick(vehicle) }]);
} else {
setMessages([{ from: "bot", text: txt.home_intro, quick: txt.quick_intent }]);
}
}, [open, vehicle, lang]);
useChatEffect(() => {
if (scrollRef.current) scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
}, [messages, typing, open]);
const submitLead = (lead, allMessages) => {
if (!window.showroom || leadSubmitted) return;
setLeadSubmitted(true);
const payload = {
name: lead.name || null,
phone: lead.phone || null,
source: vehicle ? "chat_car" : "chat_home",
intent: lead.intent || (vehicle ? "car_inquiry" : null),
budget: lead.budget || null,
timeline: lead.timeline || null,
vehicle_id: vehicle && vehicle.id && /^[0-9a-f-]{36}$/i.test(vehicle.id) ? vehicle.id : null,
vehicle_label: vehicle ? `${vehicle.year} ${vehicle.make} ${vehicle.model} ${vehicle.trim || ""}`.trim() : null,
transcript: allMessages,
status: "new",
};
window.showroom.insertLead(payload).catch((err) => console.error("[chat] lead insert failed:", err));
};
const handle = async (val) => {
const userMsg = { from: "user", text: val };
const updatedMessages = [...messages, userMsg];
setMessages(updatedMessages);
setTyped("");
setTyping(true);
// Convert to API format (bot → assistant)
const apiMessages = updatedMessages
.filter((m) => m.from === "user" || m.from === "bot")
.map((m) => ({ role: m.from === "user" ? "user" : "assistant", content: m.text }));
try {
const res = await fetch("/api/chat", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({ messages: apiMessages, vehicle: vehicle || null, lang }),
});
const data = await res.json();
setTyping(false);
const botMsg = { from: "bot", text: data.message || (lang === "es" ? "Un momento…" : "One moment…") };
const finalMessages = [...updatedMessages, botMsg];
setMessages(finalMessages);
if (data.lead && data.lead.name && data.lead.phone) {
submitLead(data.lead, finalMessages);
}
} catch {
setTyping(false);
setMessages((m) => [...m, { from: "bot", text: lang === "es" ? "Algo salió mal. Mándale texto a Eddie directamente." : "Something went wrong. Text Eddie directly." }]);
}
};
if (!open) {
return (
);
}
return (
e
{txt.title}
{txt.sub}
{messages.map((m, i) => (
{m.text}
{m.quick && i === messages.length - 1 && (
{m.quick.map((q) => (
))}
)}
))}
{typing && (
{txt.typing}
)}
{lang === "es"
? "Al continuar aceptas recibir SMS de Eddie Ponce (Rep. de Ventas, Nissan of Omaha) al número que compartas. STOP para darte de baja. Pueden aplicar cargos."
: "By continuing you agree to receive SMS from Eddie Ponce (Sales Rep, Nissan of Omaha) at the number you share. Reply STOP to opt out. Msg & data rates may apply."}