From 630b535bf4f686fc5f6ba259af47748d783defc7 Mon Sep 17 00:00:00 2001 From: "gpt-engineer-app[bot]" <159125892+gpt-engineer-app[bot]@users.noreply.github.com> Date: Sat, 21 Jun 2025 14:48:47 +0000 Subject: [PATCH] Refactor: Split CreateInstanceForm.tsx into smaller components This commit refactors the CreateInstanceForm.tsx component into smaller, more manageable files to improve code organization and maintainability. This includes splitting the form into logical sub-components and potentially moving related hooks or utilities into separate files. Unused imports and files are also removed. --- .../whatsapp/CreateInstanceForm.tsx | 351 ++---------------- .../whatsapp/ExistingInstanceDisplay.tsx | 50 +++ .../whatsapp/InstanceCreationForm.tsx | 123 ++++++ .../whatsapp/useExistingInstanceCheck.ts | 60 +++ src/hooks/whatsapp/useInstanceCreation.ts | 151 ++++++++ 5 files changed, 410 insertions(+), 325 deletions(-) create mode 100644 src/components/whatsapp/ExistingInstanceDisplay.tsx create mode 100644 src/components/whatsapp/InstanceCreationForm.tsx create mode 100644 src/hooks/whatsapp/useExistingInstanceCheck.ts create mode 100644 src/hooks/whatsapp/useInstanceCreation.ts diff --git a/src/components/whatsapp/CreateInstanceForm.tsx b/src/components/whatsapp/CreateInstanceForm.tsx index 2c06884..cfee19f 100644 --- a/src/components/whatsapp/CreateInstanceForm.tsx +++ b/src/components/whatsapp/CreateInstanceForm.tsx @@ -1,15 +1,10 @@ -import { useState, useEffect } from 'react'; -import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'; -import { Input } from '@/components/ui/input'; -import { Button } from '@/components/ui/button'; -import { Label } from '@/components/ui/label'; -import { MessageCircle, AlertCircle } from 'lucide-react'; -import { useToast } from '@/hooks/use-toast'; -import { createWhatsAppInstance } from '@/services/whatsAppService'; -import { updateUserWhatsAppInstance, getUserWhatsAppInstance, activateUserWorkflow } from '@/services/whatsAppInstanceService'; import { WhatsAppInstance } from '@/types/whatsAppTypes'; -import { Alert, AlertDescription } from '@/components/ui/alert'; +import { Card, CardContent } from '@/components/ui/card'; +import { useExistingInstanceCheck } from '@/hooks/whatsapp/useExistingInstanceCheck'; +import { useInstanceCreation } from '@/hooks/whatsapp/useInstanceCreation'; +import ExistingInstanceDisplay from './ExistingInstanceDisplay'; +import InstanceCreationForm from './InstanceCreationForm'; interface CreateInstanceFormProps { onInstanceCreated: (instance: WhatsAppInstance) => void; @@ -20,203 +15,25 @@ const CreateInstanceForm = ({ onInstanceCreated, initialInstanceName = '' }: CreateInstanceFormProps) => { - const { toast } = useToast(); - const [loading, setLoading] = useState(false); - const [ddd, setDdd] = useState(''); - const [phoneNumber, setPhoneNumber] = useState(''); - const [hasExistingInstance, setHasExistingInstance] = useState(false); - const [checkingExistingInstance, setCheckingExistingInstance] = useState(true); - const [existingInstanceData, setExistingInstanceData] = useState(null); const currentUserId = localStorage.getItem('userId') || ''; const userEmail = (localStorage.getItem('userEmail') || '').toLowerCase(); - const instanceName = userEmail; - // Verificar se o usuário já tem uma instância - useEffect(() => { - const checkExistingInstance = async () => { - if (!userEmail) { - console.log('❌ Email do usuário não encontrado'); - setCheckingExistingInstance(false); - return; - } + const { + hasExistingInstance, + checkingExistingInstance, + existingInstanceData, + setHasExistingInstance, + setExistingInstanceData + } = useExistingInstanceCheck(userEmail); - try { - console.log('🔍 Verificando se usuário já tem instância:', userEmail); - const existingInstance = await getUserWhatsAppInstance(userEmail); - - console.log('📋 Dados da instância encontrados:', existingInstance); - - // Verificação rigorosa - deve ter instancia_zap válida - const hasValidInstance = !!( - existingInstance && - existingInstance.instancia_zap && - existingInstance.instancia_zap.trim() !== '' && - existingInstance.instancia_zap !== 'null' && - existingInstance.instancia_zap !== null - ); - - console.log('✅ Usuário possui instância válida:', hasValidInstance, { - instancia_zap: existingInstance?.instancia_zap, - status_instancia: existingInstance?.status_instancia - }); - - setHasExistingInstance(hasValidInstance); - setExistingInstanceData(existingInstance); - - } catch (error) { - console.error('❌ Erro ao verificar instância existente:', error); - setHasExistingInstance(false); - setExistingInstanceData(null); - } finally { - setCheckingExistingInstance(false); - } - }; - - checkExistingInstance(); - }, [userEmail]); - - const handleCreateInstance = async () => { - // Validate form fields - if (!userEmail) { - toast({ - title: "Erro", - description: "Email do usuário não encontrado. Faça login novamente.", - variant: "destructive", - }); - return; - } - - // Validar DDD (2 dígitos) - if (!ddd.trim() || !/^[0-9]{2}$/.test(ddd)) { - toast({ - title: "Erro", - description: "Insira um DDD válido com 2 dígitos (ex: 11, 21, 31)", - variant: "destructive", - }); - return; - } - - // Validar número (8 ou 9 dígitos) - if (!phoneNumber.trim() || !/^[0-9]{8,9}$/.test(phoneNumber)) { - toast({ - title: "Erro", - description: "Insira um número válido com 8 ou 9 dígitos (ex: 987654321)", - variant: "destructive", - }); - return; - } - - // Montar número completo: +55 + DDD + número - const fullPhoneNumber = `55${ddd}${phoneNumber}`; - - // Ensure user is logged in - if (!currentUserId) { - toast({ - title: "Erro de autenticação", - description: "Você precisa estar logado para criar uma instância", - variant: "destructive", - }); - return; - } - - // Verificar novamente se já existe instância antes de criar - if (hasExistingInstance) { - toast({ - title: "Erro", - description: "Você já possui uma instância WhatsApp. Apenas uma instância por usuário é permitida.", - variant: "destructive", - }); - return; - } - - setLoading(true); - - try { - console.log(`🚀 Iniciando criação de instância com nome ${instanceName} e número ${fullPhoneNumber}`); - - // 1. Criar instância na API - console.log('📡 Passo 1: Criando instância na API...'); - const data = await createWhatsAppInstance(instanceName, fullPhoneNumber); - console.log('✅ Resposta da API de criação de instância:', data); - - // 2. Atualizar o banco de dados com status "conectado" - console.log('💾 Passo 2: Atualizando banco de dados...'); - await updateUserWhatsAppInstance(userEmail, { - instanceName, - status: 'conectado' - }); - console.log('✅ Instância registrada no banco de dados com status "conectado"'); - - // 3. Ativar o workflow do usuário no n8n - console.log('🔄 Passo 3: Ativando workflow do usuário no n8n...'); - try { - await activateUserWorkflow(userEmail); - console.log('✅ Workflow ativado com sucesso no n8n'); - } catch (workflowError) { - console.error('⚠️ Erro ao ativar workflow, mas instância foi criada:', workflowError); - toast({ - title: "Aviso", - description: "Instância criada, mas houve um problema ao ativar a automação. Entre em contato com o suporte.", - variant: "destructive", - }); - } - - // 4. Criar objeto da instância - const newInstance: WhatsAppInstance = { - instanceName, - instanceId: instanceName, - phoneNumber: fullPhoneNumber, - userId: currentUserId, - status: data.instance?.status || 'created', - qrcode: data.qrcode?.base64 || null, - connectionState: 'closed' - }; - - console.log('✅ Nova instância criada:', newInstance); - - // 5. Atualizar estado para evitar nova criação - setHasExistingInstance(true); - setExistingInstanceData({ - instancia_zap: instanceName, - status_instancia: 'conectado' - }); - - // 6. Notificar componente pai - onInstanceCreated(newInstance); - - toast({ - title: "Sucesso!", - description: "Instância do WhatsApp criada e ativada com sucesso!" - }); - - // Reset form fields - setDdd(''); - setPhoneNumber(''); - - } catch (error) { - console.error("💥 Erro ao criar instância WhatsApp:", error); - - // Se houve erro na API, tentar reverter no banco de dados - try { - await updateUserWhatsAppInstance(userEmail, { - instanceName: '', - status: 'desconectado' - }); - console.log('🔄 Instância removida do banco devido ao erro na API'); - } catch (dbError) { - console.error('❌ Erro ao reverter instância no banco:', dbError); - } - - toast({ - title: "Erro na criação da instância", - description: "Ocorreu um erro ao conectar com a API. Tente novamente mais tarde.", - variant: "destructive", - }); - } finally { - setLoading(false); - } - }; + const { loading, createInstance } = useInstanceCreation( + userEmail, + currentUserId, + onInstanceCreated, + setHasExistingInstance, + setExistingInstanceData + ); if (checkingExistingInstance) { return ( @@ -232,132 +49,16 @@ const CreateInstanceForm = ({ } if (hasExistingInstance && existingInstanceData) { - return ( - - -
- - WhatsApp já Conectado -
- - Você já possui uma instância WhatsApp vinculada ao seu email - - - - - - - Apenas uma instância WhatsApp por usuário é permitida. - Sua instância atual: {existingInstanceData.instancia_zap} - - - -
-

- ✓ Instância ativa: {existingInstanceData.instancia_zap} -

-

- Status: {existingInstanceData.status_instancia || 'conectado'} -

-

- Para gerenciar sua instância, utilize os botões na lista de instâncias abaixo. -

-
- - - ); + return ; } return ( - - -
- - Vincular WhatsApp ao App -
- - Preencha os campos abaixo para conectar sua conta WhatsApp - - - -
- - -

- O nome da instância será automaticamente seu email de login -

-
- -
- - - {/* Código do país fixo */} -
-
- - +55 - -
- - {/* Campo DDD */} -
- { - const value = e.target.value.replace(/\D/g, '').slice(0, 2); - setDdd(value); - }} - placeholder="11" - maxLength={2} - className="text-center" - /> -
- - {/* Campo número */} -
- { - const value = e.target.value.replace(/\D/g, '').slice(0, 9); - setPhoneNumber(value); - }} - placeholder="987654321" - maxLength={9} - /> -
-
- -

- Digite seu DDD e o número do seu celular -

-
- - - -
-

Importante:

-
    -
  • • Apenas uma instância por usuário é permitida
    • -
  • • O nome da instância será seu email de login
    • -
  • • Após criar, você precisará escanear o QR Code para conectar
    • -
  • • Sua automação financeira será ativada automaticamente
    • -
-
- - + ); }; diff --git a/src/components/whatsapp/ExistingInstanceDisplay.tsx b/src/components/whatsapp/ExistingInstanceDisplay.tsx new file mode 100644 index 0000000..c6cc277 --- /dev/null +++ b/src/components/whatsapp/ExistingInstanceDisplay.tsx @@ -0,0 +1,50 @@ + +import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'; +import { Alert, AlertDescription } from '@/components/ui/alert'; +import { MessageCircle, AlertCircle } from 'lucide-react'; + +interface ExistingInstanceDisplayProps { + existingInstanceData: { + instancia_zap: string; + status_instancia: string; + }; +} + +const ExistingInstanceDisplay = ({ existingInstanceData }: ExistingInstanceDisplayProps) => { + return ( + + +
+ + WhatsApp já Conectado +
+ + Você já possui uma instância WhatsApp vinculada ao seu email + + + + + + + Apenas uma instância WhatsApp por usuário é permitida. + Sua instância atual: {existingInstanceData.instancia_zap} + + + +
+

+ ✓ Instância ativa: {existingInstanceData.instancia_zap} +

+

+ Status: {existingInstanceData.status_instancia || 'conectado'} +

+

+ Para gerenciar sua instância, utilize os botões na lista de instâncias abaixo. +

+
+ + + ); +}; + +export default ExistingInstanceDisplay; diff --git a/src/components/whatsapp/InstanceCreationForm.tsx b/src/components/whatsapp/InstanceCreationForm.tsx new file mode 100644 index 0000000..c5d1d0a --- /dev/null +++ b/src/components/whatsapp/InstanceCreationForm.tsx @@ -0,0 +1,123 @@ + +import { useState } from 'react'; +import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'; +import { Input } from '@/components/ui/input'; +import { Button } from '@/components/ui/button'; +import { Label } from '@/components/ui/label'; +import { MessageCircle } from 'lucide-react'; + +interface InstanceCreationFormProps { + instanceName: string; + onCreateInstance: (ddd: string, phoneNumber: string) => Promise; + loading: boolean; + userEmail: string; +} + +const InstanceCreationForm = ({ + instanceName, + onCreateInstance, + loading, + userEmail +}: InstanceCreationFormProps) => { + const [ddd, setDdd] = useState(''); + const [phoneNumber, setPhoneNumber] = useState(''); + + const handleSubmit = async () => { + const success = await onCreateInstance(ddd, phoneNumber); + if (success) { + setDdd(''); + setPhoneNumber(''); + } + }; + + return ( + + +
+ + Vincular WhatsApp ao App +
+ + Preencha os campos abaixo para conectar sua conta WhatsApp + + + +
+ + +

+ O nome da instância será automaticamente seu email de login +

+
+ +
+ + +
+
+ + +55 + +
+ +
+ { + const value = e.target.value.replace(/\D/g, '').slice(0, 2); + setDdd(value); + }} + placeholder="11" + maxLength={2} + className="text-center" + /> +
+ +
+ { + const value = e.target.value.replace(/\D/g, '').slice(0, 9); + setPhoneNumber(value); + }} + placeholder="987654321" + maxLength={9} + /> +
+
+ +

+ Digite seu DDD e o número do seu celular +

+
+ + + +
+

Importante:

+
    +
  • • Apenas uma instância por usuário é permitida
    • +
  • • O nome da instância será seu email de login
    • +
  • • Após criar, você precisará escanear o QR Code para conectar
    • +
  • • Sua automação financeira será ativada automaticamente
    • +
+
+ + + ); +}; + +export default InstanceCreationForm; diff --git a/src/hooks/whatsapp/useExistingInstanceCheck.ts b/src/hooks/whatsapp/useExistingInstanceCheck.ts new file mode 100644 index 0000000..c866b07 --- /dev/null +++ b/src/hooks/whatsapp/useExistingInstanceCheck.ts @@ -0,0 +1,60 @@ + +import { useState, useEffect } from 'react'; +import { getUserWhatsAppInstance } from '@/services/whatsAppInstanceService'; + +export const useExistingInstanceCheck = (userEmail: string) => { + const [hasExistingInstance, setHasExistingInstance] = useState(false); + const [checkingExistingInstance, setCheckingExistingInstance] = useState(true); + const [existingInstanceData, setExistingInstanceData] = useState(null); + + useEffect(() => { + const checkExistingInstance = async () => { + if (!userEmail) { + console.log('❌ Email do usuário não encontrado'); + setCheckingExistingInstance(false); + return; + } + + try { + console.log('🔍 Verificando se usuário já tem instância:', userEmail); + const existingInstance = await getUserWhatsAppInstance(userEmail); + + console.log('📋 Dados da instância encontrados:', existingInstance); + + // Verificação rigorosa - deve ter instancia_zap válida + const hasValidInstance = !!( + existingInstance && + existingInstance.instancia_zap && + existingInstance.instancia_zap.trim() !== '' && + existingInstance.instancia_zap !== 'null' && + existingInstance.instancia_zap !== null + ); + + console.log('✅ Usuário possui instância válida:', hasValidInstance, { + instancia_zap: existingInstance?.instancia_zap, + status_instancia: existingInstance?.status_instancia + }); + + setHasExistingInstance(hasValidInstance); + setExistingInstanceData(existingInstance); + + } catch (error) { + console.error('❌ Erro ao verificar instância existente:', error); + setHasExistingInstance(false); + setExistingInstanceData(null); + } finally { + setCheckingExistingInstance(false); + } + }; + + checkExistingInstance(); + }, [userEmail]); + + return { + hasExistingInstance, + checkingExistingInstance, + existingInstanceData, + setHasExistingInstance, + setExistingInstanceData + }; +}; diff --git a/src/hooks/whatsapp/useInstanceCreation.ts b/src/hooks/whatsapp/useInstanceCreation.ts new file mode 100644 index 0000000..b04e411 --- /dev/null +++ b/src/hooks/whatsapp/useInstanceCreation.ts @@ -0,0 +1,151 @@ + +import { useState } from 'react'; +import { useToast } from '@/hooks/use-toast'; +import { createWhatsAppInstance } from '@/services/whatsAppService'; +import { updateUserWhatsAppInstance, activateUserWorkflow } from '@/services/whatsAppInstanceService'; +import { WhatsAppInstance } from '@/types/whatsAppTypes'; + +export const useInstanceCreation = ( + userEmail: string, + currentUserId: string, + onInstanceCreated: (instance: WhatsAppInstance) => void, + setHasExistingInstance: (value: boolean) => void, + setExistingInstanceData: (data: any) => void +) => { + const { toast } = useToast(); + const [loading, setLoading] = useState(false); + + const createInstance = async (ddd: string, phoneNumber: string) => { + const instanceName = userEmail; + const fullPhoneNumber = `55${ddd}${phoneNumber}`; + + // Validations + if (!userEmail) { + toast({ + title: "Erro", + description: "Email do usuário não encontrado. Faça login novamente.", + variant: "destructive", + }); + return; + } + + if (!ddd.trim() || !/^[0-9]{2}$/.test(ddd)) { + toast({ + title: "Erro", + description: "Insira um DDD válido com 2 dígitos (ex: 11, 21, 31)", + variant: "destructive", + }); + return; + } + + if (!phoneNumber.trim() || !/^[0-9]{8,9}$/.test(phoneNumber)) { + toast({ + title: "Erro", + description: "Insira um número válido com 8 ou 9 dígitos (ex: 987654321)", + variant: "destructive", + }); + return; + } + + if (!currentUserId) { + toast({ + title: "Erro de autenticação", + description: "Você precisa estar logado para criar uma instância", + variant: "destructive", + }); + return; + } + + setLoading(true); + + try { + console.log(`🚀 Iniciando criação de instância com nome ${instanceName} e número ${fullPhoneNumber}`); + + // 1. Criar instância na API + console.log('📡 Passo 1: Criando instância na API...'); + const data = await createWhatsAppInstance(instanceName, fullPhoneNumber); + console.log('✅ Resposta da API de criação de instância:', data); + + // 2. Atualizar o banco de dados com status "conectado" + console.log('💾 Passo 2: Atualizando banco de dados...'); + await updateUserWhatsAppInstance(userEmail, { + instanceName, + status: 'conectado' + }); + console.log('✅ Instância registrada no banco de dados com status "conectado"'); + + // 3. Ativar o workflow do usuário no n8n + console.log('🔄 Passo 3: Ativando workflow do usuário no n8n...'); + try { + await activateUserWorkflow(userEmail); + console.log('✅ Workflow ativado com sucesso no n8n'); + } catch (workflowError) { + console.error('⚠️ Erro ao ativar workflow, mas instância foi criada:', workflowError); + toast({ + title: "Aviso", + description: "Instância criada, mas houve um problema ao ativar a automação. Entre em contato com o suporte.", + variant: "destructive", + }); + } + + // 4. Criar objeto da instância + const newInstance: WhatsAppInstance = { + instanceName, + instanceId: instanceName, + phoneNumber: fullPhoneNumber, + userId: currentUserId, + status: data.instance?.status || 'created', + qrcode: data.qrcode?.base64 || null, + connectionState: 'closed' + }; + + console.log('✅ Nova instância criada:', newInstance); + + // 5. Atualizar estado para evitar nova criação + setHasExistingInstance(true); + setExistingInstanceData({ + instancia_zap: instanceName, + status_instancia: 'conectado' + }); + + // 6. Notificar componente pai + onInstanceCreated(newInstance); + + toast({ + title: "Sucesso!", + description: "Instância do WhatsApp criada e ativada com sucesso!" + }); + + return true; + + } catch (error) { + console.error("💥 Erro ao criar instância WhatsApp:", error); + + // Se houve erro na API, tentar reverter no banco de dados + try { + await updateUserWhatsAppInstance(userEmail, { + instanceName: '', + status: 'desconectado' + }); + console.log('🔄 Instância removida do banco devido ao erro na API'); + } catch (dbError) { + console.error('❌ Erro ao reverter instância no banco:', dbError); + } + + toast({ + title: "Erro na criação da instância", + description: "Ocorreu um erro ao conectar com a API. Tente novamente mais tarde.", + variant: "destructive", + }); + + return false; + } finally { + setLoading(false); + } + }; + + return { + loading, + createInstance + }; +};