Fix: Ensure onboarding tour activates

The onboarding tour should activate for users without a WhatsApp instance.

src/hooks/useOnboardingTour.ts

@@ -20,8 +20,14 @@ export const useOnboardingTour = () => {
       // Verificar se já foi mostrado nesta sessão
       const shownThisSession = sessionStorage.getItem(TOUR_SESSION_KEY) === 'true';
       
+      console.log('🔍 Verificando condições do tour:', {
+        shownThisSession,
+        instances: instances.length,
+        location: location.pathname
+      });
+
       if (shownThisSession) {
-        console.log('Tour já foi exibido nesta sessão');
+        console.log('❌ Tour já foi exibido nesta sessão');
         setShouldShowTour(false);
         setTourShownThisSession(true);
         return;
@@ -32,52 +38,76 @@ export const useOnboardingTour = () => {
         instance.status === 'connected' || instance.connectionState === 'open'
       );
 
-      // Verificar se há grupos cadastrados
-      const groups = await listWhatsAppGroups();
-      const hasGroups = groups.length > 0;
+      console.log('📱 Status das instâncias:', {
+        totalInstances: instances.length,
+        hasConnectedInstance,
+        instancesDetails: instances.map(i => ({ 
+          name: i.instanceName, 
+          status: i.status, 
+          connectionState: i.connectionState 
+        }))
+      });
 
-      // Tour deve aparecer se NÃO tiver instância OU NÃO tiver grupos
+      // Verificar se há grupos cadastrados
+      let hasGroups = false;
+      try {
+        const groups = await listWhatsAppGroups();
+        hasGroups = groups.length > 0;
+        console.log('👥 Grupos encontrados:', groups.length);
+      } catch (error) {
+        console.log('⚠️ Erro ao verificar grupos, assumindo que não há grupos:', error);
+        hasGroups = false;
+      }
+
+      // Tour deve aparecer se NÃO tiver instância conectada OU NÃO tiver grupos
       const shouldShow = !hasConnectedInstance || !hasGroups;
       
-      console.log('Tour conditions:', {
+      console.log('🎯 Resultado da verificação:', {
         hasConnectedInstance,
         hasGroups,
         shouldShow,
-        instances: instances.length,
-        shownThisSession
+        currentPath: location.pathname
       });
 
       setShouldShowTour(shouldShow);
       
       // Se deve mostrar o tour e não foi mostrado ainda, abrir automaticamente
       if (shouldShow && !shownThisSession && !isOpen) {
+        console.log('🚀 Abrindo tour automaticamente');
         setIsOpen(true);
         setCurrentStep(0);
         setTourShownThisSession(true);
         sessionStorage.setItem(TOUR_SESSION_KEY, 'true');
       } else if (!shouldShow) {
         // Se as condições foram atendidas, fechar o tour
+        console.log('✅ Condições atendidas, fechando tour se estiver aberto');
         setIsOpen(false);
       }
     } catch (error) {
-      console.error('Erro ao verificar condições do tour:', error);
+      console.error('❌ Erro ao verificar condições do tour:', error);
       setShouldShowTour(false);
     }
   };
 
-  // Verificar condições quando instâncias mudarem
-  useEffect(() => {
-    if (instances.length >= 0) { // Verificar mesmo quando não há instâncias
-      checkTourConditions();
-    }
-  }, [instances]);
-
-  // Verificar condições na inicialização
+  // Verificar condições quando instâncias mudarem ou na inicialização
   useEffect(() => {
+    console.log('🔄 Efeito disparado - verificando condições do tour');
     checkTourConditions();
+  }, [instances, location.pathname]);
+
+  // Limpar tour ao mudar de sessão
+  useEffect(() => {
+    const handleStorageChange = () => {
+      const shownThisSession = sessionStorage.getItem(TOUR_SESSION_KEY) === 'true';
+      setTourShownThisSession(shownThisSession);
+    };
+
+    window.addEventListener('storage', handleStorageChange);
+    return () => window.removeEventListener('storage', handleStorageChange);
   }, []);
 
   const nextStep = () => {
+    console.log('➡️ Próximo step do tour:', currentStep + 1);
     if (currentStep < 2) {
       setCurrentStep(currentStep + 1);
     } else {
@@ -86,10 +116,12 @@ export const useOnboardingTour = () => {
   };
 
   const skipTour = () => {
+    console.log('⏭️ Pulando tour');
     closeTour();
   };
 
   const closeTour = () => {
+    console.log('❌ Fechando tour');
     setIsOpen(false);
     setCurrentStep(0);
     // Marcar como exibido nesta sessão
@@ -97,6 +129,15 @@ export const useOnboardingTour = () => {
     setTourShownThisSession(true);
   };
 
+  // Função para forçar reabrir o tour (para testes)
+  const reopenTour = () => {
+    console.log('🔄 Reabrindo tour manualmente');
+    sessionStorage.removeItem(TOUR_SESSION_KEY);
+    setTourShownThisSession(false);
+    setIsOpen(true);
+    setCurrentStep(0);
+  };
+
   return {
     isOpen,
     currentStep,
@@ -104,6 +145,7 @@ export const useOnboardingTour = () => {
     nextStep,
     skipTour,
     closeTour,
+    reopenTour,
     setCurrentStep
   };
 };

src/pages/WhatsApp.tsx

@@ -9,6 +9,7 @@ import { useWhatsAppActions } from '@/hooks/useWhatsAppActions';
 import { useWhatsAppInstance, WHATSAPP_INSTANCE_KEY } from '@/hooks/whatsApp/useWhatsAppInstance';
 import { usePeriodicStatusCheck } from '@/hooks/whatsApp/usePeriodicStatusCheck';
 import { useExistingInstanceCheck } from '@/hooks/whatsapp/useExistingInstanceCheck';
+import { Button } from '@/components/ui/button';
 
 const WhatsApp = () => {
   const { 
@@ -83,6 +84,12 @@ const WhatsApp = () => {
     }
   };
 
+  // Função para resetar o tour (apenas para debug)
+  const resetTour = () => {
+    sessionStorage.removeItem('onboarding_tour_shown');
+    window.location.reload();
+  };
+
   if (checkingExistingInstance || isLoading) {
     return (
       <Layout>
@@ -100,6 +107,24 @@ const WhatsApp = () => {
           isRefreshing={checkingExistingInstance}
         />
         
+        {/* Botão temporário para debug do tour */}
+        {process.env.NODE_ENV === 'development' && (
+          <div className="p-4 bg-yellow-50 border border-yellow-200 rounded-lg">
+            <p className="text-sm text-yellow-700 mb-2">Debug do Tour:</p>
+            <Button 
+              onClick={resetTour} 
+              variant="outline" 
+              size="sm"
+              className="mr-2"
+            >
+              Resetar Tour
+            </Button>
+            <span className="text-xs text-gray-500">
+              (Este botão só aparece em desenvolvimento)
+            </span>
+          </div>
+        )}
+        
         <WhatsAppManager
           hasExistingInstance={hasExistingInstance}
           existingInstanceData={existingInstanceData}