IMPLEMENTACAO-WHATSAPP-PERFIL.md

✅ Implementação Completa - Campo WhatsApp no Perfil

Status: Interface pronta | Schema pendente no Supabase

---

🎯 O que foi implementado

1. Interface no Perfil (/dashboard/profiles/[id])

Antes do vínculo:

┌─────────────────────────────────────┐
│ @username                           │
│ 1.2k seguidores • 150 posts         │
│                                     │
│ 📱 Vincular WhatsApp  ← BOTÃO NOVO │
└─────────────────────────────────────┘

Depois do vínculo:

┌─────────────────────────────────────┐
│ @username                           │
│ 1.2k seguidores • 150 posts         │
│                                     │
│ ✅ WhatsApp: 66632607531   editar  │
└─────────────────────────────────────┘

---

2. Modal de Vinculação

┌─────────────────────────────────────────────┐
│  🟢 Vincular WhatsApp              ✕        │
│  @username                                  │
├─────────────────────────────────────────────┤
│                                             │
│  👤 Seu Nome                                │
│  ┌─────────────────────────────────┐       │
│  │ Ex: João Silva                  │       │
│  └─────────────────────────────────┘       │
│                                             │
│  📱 Número do WhatsApp                      │
│  ┌─────────────────────────────────┐       │
│  │ Ex: 66632607531                 │       │
│  └─────────────────────────────────┘       │
│  Use apenas números (10-15 dígitos)        │
│                                             │
│  ┌─────────────────────────────────┐       │
│  │ ✓ Com WhatsApp vinculado:       │       │
│  │   • Criar conteúdo via WhatsApp │       │
│  │   • Aprovar carrosséis pelo 📱   │       │
│  │   • Receber slides prontos      │       │
│  │   • Solicitar auditorias        │       │
│  └─────────────────────────────────┘       │
│                                             │
│  [ Cancelar ]  [ Vincular WhatsApp ]       │
└─────────────────────────────────────────────┘

---

3. Arquivos Criados

API Routes

app/api/profiles/[id]/whatsapp/route.ts
├─ POST   /api/profiles/[id]/whatsapp    → Vincular/atualizar
└─ DELETE /api/profiles/[id]/whatsapp    → Desvincular

Validações implementadas:

• ✅ Telefone obrigatório (10-15 dígitos)
• ✅ Nome obrigatório
• ✅ Apenas números aceitos
• ✅ Verifica se telefone já está vinculado em outro perfil
• ✅ Cria registro em whatsapp_users automaticamente
• ✅ Atualiza active_profile_id para o perfil atual

Componentes

components/molecules/link-whatsapp-modal.tsx
├─ LinkWhatsAppModal
│  ├─ Formulário (nome + telefone)
│  ├─ Validações client-side
│  ├─ Estados de loading
│  ├─ Mensagens de erro
│  └─ Botão de desvincular

Scripts

scripts/verificar-whatsapp-schema.cjs
├─ Verifica se tabela whatsapp_users existe
├─ Verifica se coluna whatsapp_phone existe
├─ Lista usuários cadastrados
└─ Lista perfis com WhatsApp vinculado

---

🔴 O que FALTA (1 minuto)

Aplicar Schema no Supabase

Arquivo: database/whatsapp-users-schema.sql

O que ele faz:

1. Cria tabela whatsapp_users
2. Adiciona coluna whatsapp_phone em profiles
3. Cria foreign keys entre as tabelas
4. Configura RLS (Row Level Security)
5. Cria índices para performance
6. Insere primeiro usuário (Felipe Ricardo - 66632607531)

Como aplicar:

1. Abra: https://supabase.com/dashboard → seu projeto → SQL Editor
2. Copie: database/whatsapp-users-schema.sql
3. Cole no editor
4. Clique em Run (ou Ctrl + Enter)
5. Verifique: node scripts/verificar-whatsapp-schema.cjs

---

📊 Estrutura de Dados

Tabela whatsapp_users

┌──────────────────┬──────────────┬────────────────────────┐
│ Coluna           │ Tipo         │ Descrição              │
├──────────────────┼──────────────┼────────────────────────┤
│ id               │ UUID         │ PK                     │
│ phone            │ TEXT         │ UNIQUE (ex: 66632...)  │
│ name             │ TEXT         │ Nome do usuário        │
│ active_profile_id│ UUID         │ FK → profiles.id       │
│ authorized       │ BOOLEAN      │ Se pode usar o bot     │
│ created_at       │ TIMESTAMP    │ Data de cadastro       │
│ updated_at       │ TIMESTAMP    │ Última atualização     │
└──────────────────┴──────────────┴────────────────────────┘

Coluna adicionada em profiles

┌──────────────────┬──────────────┬────────────────────────┐
│ whatsapp_phone   │ TEXT         │ FK → whatsapp_users    │
└──────────────────┴──────────────┴────────────────────────┘

---

🧪 Como Testar (após aplicar schema)

1. Teste via Interface

# 1. Iniciar dev server
npm run dev

# 2. Abrir perfil
http://localhost:3000/dashboard/profiles/[id]

# 3. Clicar em "Vincular WhatsApp"

# 4. Preencher:
Nome: Seu Nome
WhatsApp: 66632607531

# 5. Clicar em "Vincular"

# 6. Verificar: aparece "✅ WhatsApp: 66632607531"

2. Teste via Script

# Vincular WhatsApp ao perfil
node scripts/vincular-whatsapp.js @username 66632607531

# Verificar vínculos
node scripts/verificar-whatsapp-schema.cjs

3. Verificar no Supabase

-- Ver todos os usuários WhatsApp
SELECT * FROM whatsapp_users;

-- Ver perfis com WhatsApp
SELECT username, whatsapp_phone
FROM profiles
WHERE whatsapp_phone IS NOT NULL;

---

🎉 Funcionalidades Disponíveis

Após vincular WhatsApp:

1. Criar conteúdo via WhatsApp

   • Enviar: "criar carrossel sobre liderança"
   • Sistema gera + envia para aprovação

2. Aprovar conteúdo via WhatsApp

   • Receber proposta
   • Responder: /aprovar
   • Receber slides prontos

3. Solicitar auditoria

   • Enviar: @concorrente
   • Receber análise completa

4. Consultar histórico

   • Enviar: /historico
   • Ver últimos 5 conteúdos

5. Verificar status

   • Enviar: /status
   • Ver criações em andamento

---

🔗 Integração com Backend

Webhook recebe mensagem → identifica usuário pelo telefone:

// /api/whatsapp/webhook
const { data: whatsappUser } = await supabase
  .from('whatsapp_users')
  .select('*, active_profile_id')
  .eq('phone', phone)
  .single()

if (whatsappUser?.active_profile_id) {
  // Usuário identificado → processar comando
  // Gerar conteúdo para o perfil vinculado
}

Enviar resposta → usando telefone do perfil:

// Buscar WhatsApp do perfil
const { data: profile } = await supabase
  .from('profiles')
  .select('whatsapp_phone')
  .eq('id', profileId)
  .single()

if (profile.whatsapp_phone) {
  // Enviar mensagem via UAZapi
  await fetch('/api/whatsapp/send', {
    method: 'POST',
    body: JSON.stringify({
      phone: profile.whatsapp_phone,
      message: 'Seu conteúdo está pronto!'
    })
  })
}

---

📝 Checklist de Implementação

Backend

• API route POST /api/profiles/[id]/whatsapp
• API route DELETE /api/profiles/[id]/whatsapp
• Validações de telefone (formato, duplicação)
• Criação automática em whatsapp_users
• Atualização de active_profile_id
• Schema aplicado no Supabase ⬅️ PENDENTE

Frontend

• Modal LinkWhatsAppModal
• Integração na página de perfil
• Exibição do WhatsApp vinculado
• Botão de editar
• Botão de desvincular
• Estados de loading
• Tratamento de erros
• Validações client-side

Scripts & Docs

• vincular-whatsapp.js (CLI)
• verificar-whatsapp-schema.cjs (verificação)
• VERIFICAR-WHATSAPP-SCHEMA.md (guia)
• IMPLEMENTACAO-WHATSAPP-PERFIL.md (este arquivo)

Testes

• Teste de vinculação via interface
• Teste de desvinculação
• Teste de duplicação (deve falhar)
• Teste de formato inválido (deve falhar)
• Teste de integração com webhook
• Teste de envio de mensagem

---

🚀 Próximos Passos

1. Aplicar schema no Supabase ⬅️ FAZER AGORA
2. Testar vinculação via interface
3. Enviar mensagem de boas-vindas ao vincular
4. Criar dashboard de usuários WhatsApp (admin)
5. Implementar notificações push via WhatsApp
6. Métricas de engajamento via WhatsApp

---

📚 Documentação Relacionada

• CLAUDE.md → Integração WhatsApp UAZapi
• database/whatsapp-users-schema.sql → Schema completo
• scripts/vincular-whatsapp.js → CLI de vinculação
• app/api/whatsapp/webhook/route.ts → Webhook UAZapi
• app/api/whatsapp/send/route.ts → Envio de mensagens

---

Implementado em: 2026-02-24 Status: Interface ✅ | Schema ⏳ Tempo estimado para completar: 1 minuto (aplicar SQL)