diff --git a/src/components/whatsapp/CreateInstanceForm.tsx b/src/components/whatsapp/CreateInstanceForm.tsx index ccdbaf9..2c06884 100644 --- a/src/components/whatsapp/CreateInstanceForm.tsx +++ b/src/components/whatsapp/CreateInstanceForm.tsx @@ -1,3 +1,4 @@ + import { useState, useEffect } from 'react'; import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'; import { Input } from '@/components/ui/input'; @@ -25,15 +26,17 @@ const CreateInstanceForm = ({ 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 - verificação mais rigorosa + // 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; } @@ -44,19 +47,27 @@ const CreateInstanceForm = ({ console.log('📋 Dados da instância encontrados:', existingInstance); - // Verificação mais rigorosa - deve ter instancia_zap E não pode estar vazio + // Verificação rigorosa - deve ter instancia_zap válida const hasValidInstance = !!( existingInstance && existingInstance.instancia_zap && - existingInstance.instancia_zap.trim() !== '' + existingInstance.instancia_zap.trim() !== '' && + existingInstance.instancia_zap !== 'null' && + existingInstance.instancia_zap !== null ); - console.log('✅ Usuário possui instância válida:', hasValidInstance); + 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); } @@ -166,6 +177,10 @@ const CreateInstanceForm = ({ // 5. Atualizar estado para evitar nova criação setHasExistingInstance(true); + setExistingInstanceData({ + instancia_zap: instanceName, + status_instancia: 'conectado' + }); // 6. Notificar componente pai onInstanceCreated(newInstance); @@ -216,7 +231,7 @@ const CreateInstanceForm = ({ ); } - if (hasExistingInstance) { + if (hasExistingInstance && existingInstanceData) { return ( @@ -233,13 +248,16 @@ const CreateInstanceForm = ({ Apenas uma instância WhatsApp por usuário é permitida. - Sua instância atual: {instanceName} + Sua instância atual: {existingInstanceData.instancia_zap}

- ✓ Instância ativa: {instanceName} + ✓ 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. diff --git a/src/components/whatsappGroups/CreateGroupForm.tsx b/src/components/whatsappGroups/CreateGroupForm.tsx index 0121aee..ccf928a 100644 --- a/src/components/whatsappGroups/CreateGroupForm.tsx +++ b/src/components/whatsappGroups/CreateGroupForm.tsx @@ -28,7 +28,7 @@ const CreateGroupForm = ({ userEmail, onSuccess }: CreateGroupFormProps) => { whatsapp: string | null; } | null>(null); - // Verificar se o usuário tem instância WhatsApp CONECTADA - verificação mais rigorosa + // Verificar se o usuário tem instância WhatsApp CONECTADA useEffect(() => { const checkUserInstance = async () => { if (!userEmail) { @@ -45,11 +45,13 @@ const CreateGroupForm = ({ userEmail, onSuccess }: CreateGroupFormProps) => { console.log('📋 Dados da instância encontrados:', instanceData); if (instanceData) { - // Verificação mais rigorosa: deve ter instancia_zap E status conectado + // Verificação rigorosa: deve ter instancia_zap válida E status conectado const hasValidInstance = !!( instanceData && instanceData.instancia_zap && instanceData.instancia_zap.trim() !== '' && + instanceData.instancia_zap !== 'null' && + instanceData.instancia_zap !== null && instanceData.status_instancia === 'conectado' ); @@ -59,13 +61,8 @@ const CreateGroupForm = ({ userEmail, onSuccess }: CreateGroupFormProps) => { hasValidInstance }); - if (hasValidInstance) { - setHasWhatsAppInstance(true); - setUserInstance(instanceData); - } else { - setHasWhatsAppInstance(false); - setUserInstance(instanceData); - } + setHasWhatsAppInstance(hasValidInstance); + setUserInstance(instanceData); } else { console.log('❌ Nenhuma instância encontrada'); setHasWhatsAppInstance(false); @@ -204,7 +201,7 @@ const CreateGroupForm = ({ userEmail, onSuccess }: CreateGroupFormProps) => { {userInstance && userInstance.instancia_zap && userInstance.status_instancia !== 'conectado' ? ( <> - Sua instância WhatsApp está desconectada. + Sua instância WhatsApp {userInstance.instancia_zap} está desconectada. Acesse o menu "Conectar WhatsApp" e escaneie o QR Code para conectar sua instância.
diff --git a/src/pages/WhatsApp.tsx b/src/pages/WhatsApp.tsx index 0cc4083..c9b23fa 100644 --- a/src/pages/WhatsApp.tsx +++ b/src/pages/WhatsApp.tsx @@ -10,9 +10,10 @@ import { useWhatsAppInstances } from '@/hooks/useWhatsAppInstances'; import { useWhatsAppActions } from '@/hooks/useWhatsAppActions'; import { useWhatsAppInstance, WHATSAPP_INSTANCE_KEY } from '@/hooks/whatsApp/useWhatsAppInstance'; import { usePeriodicStatusCheck } from '@/hooks/whatsApp/usePeriodicStatusCheck'; +import { getUserWhatsAppInstance } from '@/services/whatsAppInstanceService'; import { Button } from '@/components/ui/button'; import { RefreshCw } from 'lucide-react'; -import { useState } from 'react'; +import { useState, useEffect } from 'react'; const WhatsApp = () => { const { @@ -49,8 +50,54 @@ const WhatsApp = () => { clearInstanceName } = useWhatsAppInstance(currentUserId, addInstance); - // Toggle for showing the creation form - const [showCreateForm, setShowCreateForm] = useState(!instanceFound && instances.length === 0); + // State para controlar se deve mostrar o formulário de criação + const [showCreateForm, setShowCreateForm] = useState(false); + const [hasValidInstance, setHasValidInstance] = useState(false); + const [checkingUserInstance, setCheckingUserInstance] = useState(true); + + const userEmail = localStorage.getItem('userEmail') || ''; + + // Verificar se o usuário tem instância válida no banco de dados + useEffect(() => { + const checkUserInstanceFromDB = async () => { + if (!userEmail) { + setCheckingUserInstance(false); + setShowCreateForm(true); + return; + } + + try { + console.log('🔍 Verificando instância do usuário no banco:', userEmail); + const instanceData = await getUserWhatsAppInstance(userEmail); + + const hasInstance = !!( + instanceData && + instanceData.instancia_zap && + instanceData.instancia_zap.trim() !== '' && + instanceData.instancia_zap !== 'null' && + instanceData.instancia_zap !== null + ); + + console.log('📋 Usuário tem instância válida:', hasInstance, instanceData); + + setHasValidInstance(hasInstance); + setShowCreateForm(!hasInstance); + + if (hasInstance) { + setInstanceFound(true); + } + + } catch (error) { + console.error('❌ Erro ao verificar instância do usuário:', error); + setHasValidInstance(false); + setShowCreateForm(true); + } finally { + setCheckingUserInstance(false); + } + }; + + checkUserInstanceFromDB(); + }, [userEmail, setInstanceFound]); // Set up periodic status checking only after instances are loaded usePeriodicStatusCheck(instances.length, checkAllInstancesStatus); @@ -60,6 +107,7 @@ const WhatsApp = () => { console.log('🎉 Nova instância criada:', newInstance); addInstance(newInstance); setInstanceFound(true); + setHasValidInstance(true); setShowCreateForm(false); // Salvar o nome da instância no localStorage para uso futuro @@ -87,19 +135,27 @@ const WhatsApp = () => { if (instanceToDelete) { handleDeleteInstance(instanceId, instanceToDelete.instanceName); - // Se a instância excluída for a atual, limpar o nome salvo + // Se a instância excluída for a atual, limpar o nome salvo e permitir criação de nova if (instanceToDelete.instanceName === instanceName) { clearInstanceName(); + setHasValidInstance(false); setShowCreateForm(true); } } else { - console.error(`❌ Instância com ID ${instanceId} não encontrada para exclusão`); + console.error(`❌ Inst ncia com ID ${instanceId} não encontrada para exclusão`); } }; // Check if we have any instances to show const hasInstances = Array.isArray(instances) && instances.length > 0; - const userEmail = localStorage.getItem('userEmail') || ''; + + if (checkingUserInstance || isLoading) { + return ( + + + + ); + } return ( @@ -126,46 +182,40 @@ const WhatsApp = () => {

- {isLoading ? ( - - ) : ( - <> - {/* Always show create form if showCreateForm is true */} - {showCreateForm && ( - - )} - - {/* Toggle Create Form Button - only show if form is hidden */} - {!showCreateForm && ( - - )} - - {/* Only show stats if instances are available */} - {hasInstances && } - - {/* List of created instances */} - - + {/* Show create form if user doesn't have a valid instance */} + {showCreateForm && ( + )} + {/* Toggle Create Form Button - only show if form is hidden and user has instance */} + {!showCreateForm && hasValidInstance && ( + + )} + + {/* Only show stats if instances are available */} + {hasInstances && } + + {/* List of created instances */} + + {/* QR Code Dialog */}