/* COMERCIAL · CLIENTES — conversas Digi↔cliente no WhatsApp. 3 colunas: lista · thread · contexto (colapsável). O comercial observa, pode Assumir, Sugerir à Digi ou Resolver. */ // ============ mock data ============ const CLIENTES_CONVOS = [ { id: 'grafica-norte', name: 'João Afonso', company: 'Gráfica Norte Lda', avatar: 'JA', avatarBg: 'oklch(0.58 0.14 28)', state: 'urgente', // activa · espera · urgente · resolvida lastSnippet: 'Então se calhar marcamos para amanhã de manhã...', lastTime: 'há 3 min', unread: 2, mine: true, digiTyping: false, messages: [ { id: 1, from: 'client', text: 'Olá, recebi a proposta mas tenho dúvidas sobre o plano PrintPlan', time: '09:42' }, { id: 2, from: 'digi', text: 'Bom dia João. Claro — o PrintPlan é uma modalidade onde a Digidelta entrega o equipamento sem custo inicial e cobra um valor fixo por m² impresso. Para o vosso volume (~820 m²/mês) fica em 1,74 €/m².', time: '09:42' }, { id: 3, from: 'digi', text: 'Posso enviar-vos a simulação completa em PDF?', time: '09:42' }, { id: 4, from: 'client', text: 'Sim por favor', time: '09:43' }, { id: 5, from: 'digi', text: '📄 Proposta-UCJV330-GraficaNorte.pdf\n2,1 MB · PrintPlan Care · 60 meses', time: '09:43', attachment: true }, { id: 6, from: 'client', text: 'Obrigado. Mas tenho uma questão: se quisermos cancelar ao fim de 2 anos, há penalização?', time: '10:14' }, { id: 7, from: 'digi', text: 'Há sim — no PrintPlan Care existe uma fidelização de 36 meses. Se terminarem antes, há lugar ao pagamento de 40% das mensalidades remanescentes.\n\nSe a preocupação for a duração, posso simular-vos o PrintPlan flexível (24m) — sai 1,92 €/m². Queres que envie?', time: '10:14' }, { id: 8, from: 'client', text: 'Ok. E o Daniel pode cá vir amanhã explicar melhor?', time: '10:32' }, { id: 9, from: 'digi', text: 'Com certeza. Ele tem disponibilidade amanhã às 10h30 ou às 14h00. Qual prefere?', time: '10:32' }, { id: 10, from: 'client', text: 'Então se calhar marcamos para amanhã de manhã, 10h30', time: '10:47' }, ], context: { ltv: '487.2k €', lastBuy: '67 dias', openOp: '1 · stage 80', health: 'risco', tickets: 0, brands: ['Mimaki', 'Decal', 'PPE100'], }, }, { id: 'signpro', name: 'Maria Almeida', company: 'SignPro', avatar: 'MA', avatarBg: 'oklch(0.56 0.16 256)', state: 'activa', lastSnippet: 'Digi: Envio a ficha do PPE100 agora?', lastTime: 'há 8 min', unread: 0, mine: true, digiTyping: true, }, { id: 'visualmax', name: 'Pedro Costa', company: 'Visualmax Publicidade', avatar: 'PC', avatarBg: 'oklch(0.58 0.14 152)', state: 'activa', lastSnippet: 'Cliente: quanto custa a versão 160cm?', lastTime: 'há 22 min', unread: 1, mine: true, }, { id: 'multiprint', name: 'Ana Rocha', company: 'Multiprint Lda', avatar: 'AR', avatarBg: 'oklch(0.58 0.11 60)', state: 'espera', lastSnippet: 'Digi: pode pagar até 15 de maio?', lastTime: 'há 1h', unread: 0, mine: true, }, { id: 'grupo-siena', name: 'Ricardo Dias', company: 'Grupo Siena', avatar: 'RD', avatarBg: 'oklch(0.56 0.14 300)', state: 'activa', lastSnippet: 'Digi: agendei briefing para 6 maio 14h', lastTime: 'há 2h', unread: 0, mine: false, }, { id: 'olimpo', name: 'Rui Barros', company: 'Olimpo Lda', avatar: 'RB', avatarBg: 'oklch(0.58 0.14 20)', state: 'resolvida', lastSnippet: '✓ Ticket SAT #2147 resolvido', lastTime: 'ontem', unread: 0, mine: false, }, ]; const CLIENTE_FILTERS = [ { id: 'todas', label: 'Todas', count: 6 }, { id: 'activas', label: 'Activas', count: 3 }, { id: 'urgentes', label: 'Urgentes', count: 1, highlight: 'var(--danger)' }, { id: 'minhas', label: 'Minhas', count: 4 }, { id: 'equipa', label: 'Equipa', count: 2 }, ]; const stateMeta = { activa: { color: 'var(--success)', label: '🟢 Activa' }, espera: { color: 'var(--warning)', label: '🟡 Espera' }, urgente: { color: 'var(--danger)', label: '🔴 Urgente' }, resolvida: { color: 'var(--text-dim)', label: '✓ Resolvida' }, }; // ============ column 1 — lista ============ const ConvoListItem = ({ c, active, onClick }) => { const st = stateMeta[c.state]; return ( ); }; const ConvoList = ({ active, onSelect }) => { const [filter, setFilter] = React.useState('todas'); const [search, setSearch] = React.useState(''); const filtered = CLIENTES_CONVOS.filter(c => { if (search && !(c.name.toLowerCase() + ' ' + c.company.toLowerCase()).includes(search.toLowerCase())) return false; if (filter === 'activas') return c.state === 'activa'; if (filter === 'urgentes') return c.state === 'urgente'; if (filter === 'minhas') return c.mine; if (filter === 'equipa') return !c.mine; return true; }); return ( ); }; // ============ column 2 — thread ============ const ThreadHeader = ({ convo, onToggleContext, contextOpen, onAssume, onSuggest, onResolve, assumed }) => { const st = stateMeta[convo.state]; return (
{convo.avatar}
{convo.name} · {convo.company}
{assumed ? Tu estás a responder · Digi pausada : convo.digiTyping ? Digi a escrever resposta… : Digi a conduzir · {st.label} }
); }; const WAMessage = ({ m, showAvatar, avatar, avatarBg }) => { const isClient = m.from === 'client'; const isDigi = m.from === 'digi'; const isUser = m.from === 'user'; const isLight = document.documentElement.dataset.theme !== 'dark'; const side = isClient ? 'right' : 'left'; const bubbleBg = isClient ? 'var(--wa-client)' : (isUser ? 'var(--warning)' : 'var(--bg-elev)'); const bubbleColor = isClient ? (isLight ? 'var(--text)' : '#fff') : (isUser ? '#fff' : 'var(--text)'); return (
{/* avatar pocket - 24px reserved always for alignment stability */}
{showAvatar && isDigi && (
)} {showAvatar && isClient && (
{avatar}
)} {showAvatar && isUser && (
DM
)}
{m.text}
{m.time} {isClient && ✓✓}
); }; const TypingBubble = () => (
{[0,1,2].map(i => ( ))}
); const ThreadComposer = ({ active, onSend, assumed, onOpenSuggest }) => { const [text, setText] = React.useState(''); if (!active) { return (
A Digi está a conduzir esta conversa. Assume para responder directamente, ou sugere uma abordagem à Digi.
); } return (
{assumed && (
Tu estás a responder · mensagens vão directas ao WhatsApp do cliente
)}