// Tela: Central de Ajuda
const SHORTCUTS = [
{ cat: "Navegação", items: [
{ keys: ["⌘","K"], label: "Abrir busca global" },
{ keys: ["G","P"], label: "Ir para Pipeline" },
{ keys: ["G","C"], label: "Ir para Contatos" },
{ keys: ["G","D"], label: "Ir para Painel" },
{ keys: ["?"], label: "Mostrar atalhos" },
{ keys: ["Esc"], label: "Fechar diálogo aberto" },
]},
{ cat: "Ações", items: [
{ keys: ["N"], label: "Novo lead" },
{ keys: ["⌘","↵"], label: "Salvar e fechar" },
{ keys: ["⌘","D"], label: "Duplicar item selecionado" },
{ keys: ["⌘","⌫"], label: "Arquivar item" },
{ keys: ["A"], label: "Atribuir a alguém" },
{ keys: ["T"], label: "Adicionar tag" },
]},
{ cat: "Pipeline", items: [
{ keys: ["←","→"], label: "Mover lead entre etapas" },
{ keys: ["W"], label: "Marcar como ganho" },
{ keys: ["L"], label: "Marcar como perdido" },
{ keys: ["Espaço"], label: "Abrir detalhe do lead" },
]},
];
const ARTIGOS = [
{
id: 'pipeline-10min',
tit: "Como montar um pipeline em 10 minutos",
cat: "Primeiros passos",
t: "5 min",
conteudo: [
{
tipo: 'intro',
texto: 'O Pipeline de Vendas da Ezza organiza seus leads em colunas por etapa — da prospecção ao fechamento. Em menos de 10 minutos você já pode ter seus primeiros leads cadastrados e o funil funcionando.',
},
{
tipo: 'h2', texto: '1. Acesse o Pipeline',
},
{
tipo: 'p', texto: 'No menu lateral, clique em Pipeline (ícone de funil). Você verá as colunas padrão: Prospecção, Qualificação, Proposta, Negociação e Fechado.',
},
{
tipo: 'h2', texto: '2. Crie seu primeiro lead',
},
{
tipo: 'p', texto: 'Clique no botão + Novo Lead no canto superior direito. Preencha pelo menos o nome do lead ou empresa — os demais campos são opcionais para começar.',
},
{
tipo: 'lista', itens: [
'Nome do lead / empresa (obrigatório)',
'WhatsApp — para ativar a IA SDR',
'Valor estimado do negócio',
'Temperatura: Frio, Morno ou Quente',
'Origem (Indicação, Meta Ads, Site…)',
],
},
{
tipo: 'h2', texto: '3. Avance leads pelo funil',
},
{
tipo: 'p', texto: 'Arraste o card do lead para a próxima coluna conforme o relacionamento avança. Você também pode clicar no card e usar o seletor de etapa no drawer de detalhes.',
},
{
tipo: 'h2', texto: '4. Ative a IA SDR (opcional)',
},
{
tipo: 'p', texto: 'Ao criar ou editar um lead, ative a opção "IA de Voz Imediata". O agente ligará automaticamente para o lead assim que ele for salvo — você pode acompanhar a conversa em tempo real pelo ícone WhatsApp no card.',
},
{
tipo: 'dica', texto: 'Dica: Leads com status "Em conversa" têm uma borda roxa e o badge ⚡ IA no card, indicando que o agente está ativo naquela negociação.',
},
{
tipo: 'h2', texto: '5. Marque como ganho ou perdido',
},
{
tipo: 'p', texto: 'Abra o drawer do lead (clique no card) e use os botões "Ganhou 🎉" ou "Perdeu" para encerrar a negociação. Leads ganhos vão para a coluna Fechado; perdidos são removidos do funil.',
},
],
},
{
id: 'whatsapp-connect',
tit: "Conectando WhatsApp Business à Ezza",
cat: "Integrações",
t: "8 min",
conteudo: [
{
tipo: 'intro',
texto: 'Integrar seu número de WhatsApp Business à Ezza permite que a IA SDR e sua equipe enviem e recebam mensagens diretamente pelo CRM, sem precisar abrir o celular.',
},
{
tipo: 'h2', texto: 'Pré-requisitos',
},
{
tipo: 'lista', itens: [
'Número de WhatsApp Business ativo (não pode ser o pessoal)',
'Acesso à conta Meta Business Suite',
'Perfil de Administrador na Ezza',
],
},
{
tipo: 'h2', texto: '1. Acesse Configurações → WhatsApp',
},
{
tipo: 'p', texto: 'No menu lateral vá em Configurações (ícone de engrenagem) e clique na aba WhatsApp. Você verá o botão "Conectar número".',
},
{
tipo: 'h2', texto: '2. Autentique com a Meta',
},
{
tipo: 'p', texto: 'Clique em "Conectar número" — uma janela da Meta se abrirá. Faça login na sua conta Meta Business e selecione o número que deseja vincular à Ezza.',
},
{
tipo: 'h2', texto: '3. Configure os templates',
},
{
tipo: 'p', texto: 'Após conectar, cadastre os templates de mensagem aprovados pela Meta. Os templates são necessários para iniciar conversas proativamente (janela fria). Para respostas dentro de 24h, você pode usar texto livre.',
},
{
tipo: 'dica', texto: 'Atenção: A Meta pode levar até 24h para aprovar novos templates. Templates com palavras comerciais agressivas (ex: "oferta imperdível") costumam ser rejeitados.',
},
{
tipo: 'h2', texto: '4. Teste a integração',
},
{
tipo: 'p', texto: 'Na aba WhatsApp, use o campo "Enviar mensagem de teste" para verificar se o número está enviando corretamente. Se o teste falhar, verifique se o número está com status "Ativo" no Meta Business Suite.',
},
{
tipo: 'h2', texto: 'Resolvendo problemas comuns',
},
{
tipo: 'lista', itens: [
'Número desconectado após reiniciar: reautentique pelo mesmo fluxo de conexão',
'Mensagens não chegam: verifique o webhook URL nas configurações da Meta',
'Template rejeitado: remova linguagem de marketing e resubmeta',
'Erro 131030: número bloqueado por spam — contate o suporte Meta',
],
},
],
},
{
id: 'importar-csv',
tit: "Importar leads de uma planilha CSV",
cat: "Dados",
t: "3 min",
conteudo: [
{
tipo: 'intro',
texto: 'Se você já tem uma lista de leads em uma planilha do Excel ou Google Sheets, pode importar todos de uma vez para a Ezza em menos de 3 minutos.',
},
{
tipo: 'h2', texto: 'Formato do arquivo CSV',
},
{
tipo: 'p', texto: 'O arquivo deve ter as colunas na primeira linha (cabeçalho). As colunas obrigatórias são Nome e WhatsApp. As demais são opcionais:',
},
{
tipo: 'lista', itens: [
'nome — Nome do lead ou empresa (obrigatório)',
'whatsapp — Número com DDD, ex: 11999999999',
'email — E-mail do lead',
'empresa — Nome da empresa',
'valor — Valor estimado em reais (somente número)',
'temperatura — frio, morno ou quente',
'origem — Indicação, Meta Ads, Site, LinkedIn ou Evento',
'etapa — prospeccao, qualificacao, proposta, negociacao',
],
},
{
tipo: 'dica', texto: 'Dica: Baixe o modelo de CSV na tela de importação clicando em "Baixar modelo" — ele já vem com as colunas certas e exemplos preenchidos.',
},
{
tipo: 'h2', texto: 'Passo a passo',
},
{
tipo: 'lista', itens: [
'Acesse Pipeline → botão "Importar" no menu do cabeçalho',
'Selecione ou arraste o arquivo .csv para a área de upload',
'Mapeie as colunas da sua planilha para os campos da Ezza',
'Revise os dados na pré-visualização (primeiras 5 linhas)',
'Clique em "Importar X leads" para confirmar',
],
},
{
tipo: 'h2', texto: 'Após a importação',
},
{
tipo: 'p', texto: 'Todos os leads importados aparecem na coluna "Prospecção" do Pipeline. Leads duplicados (mesmo WhatsApp ou e-mail já cadastrado) são ignorados — você receberá um relatório de duplicatas ao final.',
},
],
},
{
id: 'automacoes-followup',
tit: "Configurando automações de follow-up",
cat: "Automações",
t: "12 min",
conteudo: [
{
tipo: 'intro',
texto: 'As automações da Ezza permitem que o sistema envie mensagens, crie tarefas e mova leads automaticamente com base em eventos — sem nenhuma ação manual da sua equipe.',
},
{
tipo: 'h2', texto: 'Conceitos básicos',
},
{
tipo: 'p', texto: 'Cada automação tem três partes: um Gatilho (o que acontece para disparar), uma Condição (filtro opcional) e uma Ação (o que a Ezza faz). Você pode encadear múltiplas ações em uma única regra.',
},
{
tipo: 'h2', texto: 'Automação de follow-up simples',
},
{
tipo: 'p', texto: 'O caso mais comum: enviar uma mensagem de acompanhamento quando um lead fica X dias sem resposta.',
},
{
tipo: 'lista', itens: [
'Gatilho: "Lead sem atualização por mais de N dias"',
'Condição: Etapa = Proposta (ou qualquer etapa que quiser)',
'Ação 1: Enviar mensagem WhatsApp com template de follow-up',
'Ação 2: Criar tarefa para o responsável ligar',
'Ação 3: Mudar temperatura para "Frio" (opcional)',
],
},
{
tipo: 'h2', texto: 'Como criar a automação',
},
{
tipo: 'lista', itens: [
'Vá em Configurações → Automações',
'Clique em "+ Nova automação"',
'Dê um nome descritivo (ex: "Follow-up 3 dias Proposta")',
'Selecione o Gatilho na lista de opções',
'Adicione condições se necessário (filtra quais leads serão afetados)',
'Clique em "+ Adicionar ação" e configure cada ação',
'Ative a automação com o toggle e salve',
],
},
{
tipo: 'dica', texto: 'Boas práticas: comece com 1-2 automações simples e monitore os resultados por 2 semanas antes de criar mais. Automações em excesso podem parecer spam para os leads.',
},
{
tipo: 'h2', texto: 'Gatilhos disponíveis',
},
{
tipo: 'lista', itens: [
'Lead criado',
'Lead mudou de etapa',
'Mensagem recebida sem resposta por X horas',
'Lead sem atualização por X dias',
'Proposta enviada',
'Data/hora específica',
'Lead marcado como quente/morno/frio',
],
},
{
tipo: 'h2', texto: 'Ações disponíveis',
},
{
tipo: 'lista', itens: [
'Enviar mensagem WhatsApp (template ou texto livre)',
'Enviar e-mail (template)',
'Criar tarefa para responsável',
'Atribuir lead a outro vendedor',
'Mover para etapa específica',
'Adicionar/remover tag',
'Notificar o time no Slack ou Teams',
],
},
],
},
{
id: 'round-robin',
tit: "Atribuição automática de leads em round-robin",
cat: "Automações",
t: "6 min",
conteudo: [
{
tipo: 'intro',
texto: 'O round-robin distribui novos leads automaticamente entre os vendedores da sua equipe de forma igualitária — cada novo lead vai para o próximo vendedor da fila, em rodízio.',
},
{
tipo: 'h2', texto: 'Por que usar round-robin?',
},
{
tipo: 'lista', itens: [
'Elimina o tempo perdido decidindo quem vai atender o lead',
'Distribui a carga de trabalho de forma justa',
'Reduz o tempo de primeiro contato (atende mais rápido)',
'Evita favorecimento ou conflitos entre vendedores',
],
},
{
tipo: 'h2', texto: 'Configurando o round-robin',
},
{
tipo: 'lista', itens: [
'Acesse Configurações → Automações',
'Crie uma nova automação com Gatilho "Lead criado"',
'Em Ação, selecione "Atribuir a vendedor (round-robin)"',
'Escolha os membros do time que participarão do rodízio',
'Salve e ative',
],
},
{
tipo: 'h2', texto: 'Opções avançadas',
},
{
tipo: 'p', texto: 'Você pode configurar pesos no round-robin — por exemplo, um vendedor sênior pode receber 2 leads a cada 1 que um júnior recebe. Isso é útil em equipes com capacidades diferentes.',
},
{
tipo: 'p', texto: 'Também é possível excluir vendedores temporariamente do rodízio (férias, sobrecarga) sem deletar a automação — use o toggle de "Pausar participante" na tela de configuração.',
},
{
tipo: 'dica', texto: 'Dica: combine round-robin com uma automação de "follow-up 30 minutos" para que o vendedor receba uma notificação caso não tenha contatado o lead dentro de meia hora.',
},
],
},
{
id: 'lgpd',
tit: "Boas práticas de LGPD no CRM",
cat: "Privacidade",
t: "9 min",
conteudo: [
{
tipo: 'intro',
texto: 'A Lei Geral de Proteção de Dados (LGPD) exige que sua empresa trate os dados de clientes e leads com transparência e segurança. A Ezza tem recursos que facilitam a conformidade.',
},
{
tipo: 'h2', texto: 'Princípios da LGPD relevantes para CRMs',
},
{
tipo: 'lista', itens: [
'Finalidade: colete dados apenas para fins específicos e informados',
'Necessidade: guarde somente o mínimo necessário de informação',
'Transparência: informe o titular sobre como os dados são usados',
'Segurança: proteja os dados contra acesso não autorizado',
'Responsabilização: mantenha registros do tratamento de dados',
],
},
{
tipo: 'h2', texto: 'Base legal para contato de leads',
},
{
tipo: 'p', texto: 'Antes de enviar mensagens via WhatsApp ou e-mail, você precisa de uma base legal. As mais comuns em CRMs são:',
},
{
tipo: 'lista', itens: [
'Consentimento: o lead preencheu um formulário autorizando contato',
'Legítimo interesse: lead veio por indicação ou já é cliente',
'Execução de contrato: comunicações sobre um negócio em andamento',
],
},
{
tipo: 'h2', texto: 'Recursos de conformidade na Ezza',
},
{
tipo: 'lista', itens: [
'Registro de consentimento: campo "Origem" e data de entrada do lead',
'Direito de exclusão: botão "Excluir contato" remove todos os dados do lead',
'Anonimização: na exportação CSV, campos sensíveis podem ser mascarados',
'Controle de acesso: defina quem da equipe pode ver dados de contato',
'Logs de atividade: todas as ações na conta ficam registradas por 90 dias',
],
},
{
tipo: 'dica', texto: 'Recomendação: inclua em seus formulários de captação uma checkbox de consentimento explícito com link para sua Política de Privacidade. Isso protege você legalmente e melhora a qualidade dos leads.',
},
{
tipo: 'h2', texto: 'Respondendo a solicitações de titulares',
},
{
tipo: 'p', texto: 'Quando um lead ou cliente pedir para ver, corrigir ou deletar seus dados:',
},
{
tipo: 'lista', itens: [
'Acesse Contatos e localize o registro pelo nome ou e-mail',
'Para ver os dados: compartilhe a tela ou exporte em CSV',
'Para corrigir: use o botão "Editar contato" e atualize os campos',
'Para deletar: MoreMenu → "Excluir contato" (irreversível)',
'Prazo legal para resposta: 15 dias após a solicitação',
],
},
],
},
];
// ─── DRAWER DE ARTIGO ────────────────────────────────────────────────────────
function ArticleDrawer({ artigo, onClose }) {
const { useEffect: useArtEffect, useRef: useArtRef } = React;
const scrollRef = useArtRef();
useArtEffect(() => {
const h = (e) => { if (e.key === 'Escape') onClose(); };
window.addEventListener('keydown', h);
return () => window.removeEventListener('keydown', h);
}, [onClose]);
const renderBloco = (b, i) => {
switch (b.tipo) {
case 'intro':
return (