/* global React, SEQ_UI, SEQ_DATA */ const { Wordmark, Avatar, TempPill, StatusChip, Icon, brl, fmtDur } = window.SEQ_UI; const { PROPOSTAS: PROPOSTAS_FALLBACK } = window.SEQ_DATA; // Lê id do hash query (#/proposta?id=xxx) ou pega a primeira da lista. function getProposalId() { const h = window.location.hash || ""; const q = h.split("?")[1]; if (!q) return null; return new URLSearchParams(q).get("id"); } function transformProposalDetail(api) { const sentAt = api.sentAt; const statusMap = { accepted: "aceita", viewed: "viewing", sent: "sent", rejected: "rejeitada", expired: "expirada", draft: "rascunho" }; const tempMap = { hot: "quente", warm: "morno", cold: "frio", fervendo: "fervendo" }; return { id: api.id, title: api.title, intro: api.intro || "", cliente: api.client?.name || "—", empresa: api.client?.company || "—", avatar: (api.client?.name || "—").split(" ").map(s=>s[0]).slice(0,2).join(""), email: api.client?.email || "", phone: api.client?.phone || "", valor: (api.totalAmount ?? 0) / 100, valorCents: api.totalAmount ?? 0, pagamento: api.paymentTerms || "Único", status: statusMap[api.status] || api.status, tempo: tempMap[api.temperature] || "frio", enviadaEm: sentAt ? new Date(sentAt).toLocaleString("pt-BR") : "rascunho", enviadaEmISO: sentAt, aceitaEmISO: api.acceptedAt, visualizacoes: api.viewCount ?? 0, tempoTotalSeg: api.totalViewSeconds ?? 0, iaScore: api.aiScore ?? 0, iaLabel: api.aiLabel || "Sem sinal", iaInsight: api.aiInsight || "", link: `pay.kaleidos.com.br/p/${api.publicSlug || api.id}`, canais: { email: "—", whatsapp: "—" }, timeline: [], eventos: [], insights: [], }; } function parseDevice(ua) { if (!ua) return "—"; if (/iPad/i.test(ua)) return "iPad"; if (/iPhone/i.test(ua)) return "iPhone"; if (/Android/i.test(ua)) return /Mobile/i.test(ua) ? "Android" : "Android tablet"; if (/Macintosh/i.test(ua)) return "Mac"; if (/Windows/i.test(ua)) return "Windows"; if (/Linux/i.test(ua)) return "Linux"; if (/Bun\//i.test(ua)) return "Bun (test)"; if (/curl/i.test(ua)) return "curl"; return "Web"; } function fmtDateTime(iso) { if (!iso) return "—"; const d = new Date(iso); return d.toLocaleString("pt-BR", { day: "2-digit", month: "short", hour: "2-digit", minute: "2-digit" }); } function fmtSec(s) { if (!s || s < 1) return "0s"; if (s < 60) return `${s}s`; const m = Math.floor(s / 60); const r = s % 60; return r > 0 ? `${m}min ${r}s` : `${m}min`; } function buildLiveTimeline(p, views) { const events = []; if (p.aceitaEmISO) { events.push({ kind: "accept", label: "Proposta aceita!", sub: `Aceita por ${p.cliente}`, date: fmtDateTime(p.aceitaEmISO), live: true }); } // Agrupa views: opens são "âncoras" de sessão; heartbeats subsequentes somam duração const sorted = [...views].sort((a, b) => new Date(b.viewedAt).getTime() - new Date(a.viewedAt).getTime()); let sessionAccum = 0; let lastWasOpen = false; for (const v of sorted) { const dev = parseDevice(v.userAgent); if (v.section === "open") { events.push({ kind: "view", label: lastWasOpen ? "Cliente reabriu a proposta" : "Cliente abriu a proposta", sub: `Sessão ${sessionAccum > 0 ? `· ${fmtSec(sessionAccum)} de leitura · ` : "· "}${dev}${v.ip ? ` · IP ${v.ip}` : ""}`, date: fmtDateTime(v.viewedAt), }); sessionAccum = 0; lastWasOpen = true; } else if (v.section === "heartbeat" || v.section === "blur" || v.section === "unload") { sessionAccum += v.durationSeconds || 0; } } if (p.enviadaEmISO) { events.push({ kind: "send", label: "Proposta enviada", sub: "Via E-mail + WhatsApp · entregues em segundos", date: fmtDateTime(p.enviadaEmISO) }); } return events; } function PropostaDetalhe() { const [p, setP] = React.useState(PROPOSTAS_FALLBACK[0]); const [views, setViews] = React.useState([]); const [tab, setTab] = React.useState("timeline"); const [copied, setCopied] = React.useState(false); const [editOpen, setEditOpen] = React.useState(false); const [proposalId, setProposalId] = React.useState(null); React.useEffect(() => { const id = getProposalId(); if (id) { setProposalId(id); window.SEQ_API.getProposal(id) .then(d => d?.proposal && setP(transformProposalDetail(d.proposal))) .catch(() => {}); window.SEQ_API.listProposalViews(id) .then(d => setViews(d.views || [])) .catch(() => {}); } else { // Sem id explícito: pega a mais recente do banco window.SEQ_API.listProposals() .then(d => { if (d.proposals?.[0]) { const proposal = d.proposals[0]; setProposalId(proposal.id); setP(transformProposalDetail(proposal)); window.SEQ_API.listProposalViews(proposal.id) .then(dd => setViews(dd.views || [])) .catch(() => {}); } }) .catch(() => {}); } }, []); // Refresh views a cada 30s pra capturar leituras em tempo real React.useEffect(() => { if (!proposalId) return; const id = setInterval(() => { window.SEQ_API.listProposalViews(proposalId) .then(d => setViews(d.views || [])) .catch(() => {}); window.SEQ_API.getProposal(proposalId) .then(d => d?.proposal && setP(transformProposalDetail(d.proposal))) .catch(() => {}); }, 30000); return () => clearInterval(id); }, [proposalId]); const liveTimeline = React.useMemo(() => buildLiveTimeline(p, views), [p, views]); const liveEventos = React.useMemo(() => views.map(v => ({ date: fmtDateTime(v.viewedAt), action: (v.section || "VIEW").toUpperCase(), detail: `${parseDevice(v.userAgent)}${v.durationSeconds ? ` · ${fmtSec(v.durationSeconds)}` : ""}${v.ip ? ` · ${v.ip}` : ""}`, weight: v.section === "open" ? 0.7 : 0.4, })), [views]); const copyLink = () => { navigator.clipboard?.writeText("https://" + p.link).catch(()=>{}); setCopied(true); setTimeout(()=>setCopied(false), 1400); }; return (
setEditOpen(true)} />
{editOpen && ( setEditOpen(false)} onSaved={() => { setEditOpen(false); window.location.reload(); }} /> )}
); } // ─── WhatsApp helpers ─────────────────────────────────── function buildWhatsAppLink(p) { const phone = (p.phone || "").replace(/\D/g, ""); if (!phone) return null; const firstName = (p.cliente || "").split(" ")[0] || ""; const link = `https://${p.link}`; const valor = p.valor != null ? p.valor.toLocaleString("pt-BR", { style: "currency", currency: "BRL" }) : ""; const lines = [ `Oi ${firstName}, tudo bem?`, "", `Passando aqui pra lembrar da proposta "${p.title}"${valor ? ` (${valor})` : ""}.`, "", `Quando puder dá uma olhada: ${link}`, "", "Qualquer dúvida me chama por aqui mesmo. 🙌", ]; return `https://wa.me/${phone}?text=${encodeURIComponent(lines.join("\n"))}`; } // ─── Top bar ──────────────────────────────────────────── function DetailTopBar({ p, onEdit }) { const waLink = React.useMemo(() => buildWhatsAppLink(p), [p]); return (
Propostas |
{p.title}
{waLink ? ( Lembrar via WhatsApp ) : ( Sem telefone )}
); } // ─── Edit modal ───────────────────────────────────────── function EditPropostaModal({ p, onClose, onSaved }) { const [title, setTitle] = React.useState(p.title || ""); const [intro, setIntro] = React.useState(p.intro || ""); const [valor, setValor] = React.useState( p.valor != null ? String(p.valor).replace(".", ",") : "" ); const [paymentTerms, setPaymentTerms] = React.useState( p.pagamento && p.pagamento !== "Único" ? p.pagamento : "" ); const [submitting, setSubmitting] = React.useState(false); const [error, setError] = React.useState(null); async function submit(e) { e.preventDefault(); if (!title.trim()) { setError("Título é obrigatório."); return; } setSubmitting(true); setError(null); try { const cleaned = String(valor).replace(/[^0-9.,]/g, "").replace(",", "."); const cents = cleaned ? Math.round(parseFloat(cleaned) * 100) : 0; const res = await fetch(`/api/proposals/${p.id}`, { method: "PATCH", credentials: "include", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ title: title.trim(), intro: intro.trim() || null, totalAmount: cents, paymentTerms: paymentTerms.trim() || null, }), }); if (!res.ok) { const j = await res.json().catch(() => ({})); throw new Error(j.error || `Falha (${res.status})`); } onSaved(); } catch (err) { setError(err.message || "Falha ao salvar."); setSubmitting(false); } } return (
e.stopPropagation()} className="kp-card" style={{ padding: 28, maxWidth: 560, width: "100%", background: "var(--kp-paper)" }}>
EDITAR PROPOSTA

Ajustar os detalhes