diff --git a/src/hooks/useOnboardingTour.ts b/src/hooks/useOnboardingTour.ts
index 14676d3..32de93e 100644
--- a/src/hooks/useOnboardingTour.ts
+++ b/src/hooks/useOnboardingTour.ts
@@ -24,26 +24,8 @@ export const useOnboardingTour = () => {
return;
}
- // Verificar se já foi mostrado nesta sessão
- const shownThisSession = sessionStorage.getItem(TOUR_SESSION_KEY) === 'true';
-
- console.log('🔍 [TOUR] Verificando condições:', {
- shownThisSession,
- location: location.pathname,
- sessionStorage: sessionStorage.getItem(TOUR_SESSION_KEY)
- });
-
- if (shownThisSession) {
- console.log('❌ [TOUR] Tour já foi exibido nesta sessão');
- setShouldShowTour(false);
- setTourShownThisSession(true);
- return;
- }
-
- // Verificar se há grupos cadastrados
- let hasGroups = false;
+ // Verificar se existe email no localStorage
const userEmail = localStorage.getItem('userEmail');
-
console.log('📧 [TOUR] Email do usuário para verificação:', userEmail);
if (!userEmail) {
@@ -52,6 +34,9 @@ export const useOnboardingTour = () => {
return;
}
+ // SEMPRE verificar se há grupos cadastrados (ignorar sessionStorage inicialmente)
+ let hasGroups = false;
+
try {
console.log('🔍 [TOUR] Buscando grupos para o usuário...');
const groups = await listWhatsAppGroups();
@@ -60,49 +45,63 @@ export const useOnboardingTour = () => {
quantidade: groups.length,
grupos: groups.map(g => ({ id: g.id, nome: g.nome_grupo, status: g.status, login: g.login }))
});
- console.log('📊 [TOUR] Query resultado completo:', groups);
} catch (error) {
console.log('⚠️ [TOUR] Erro ao verificar grupos, assumindo que não há grupos:', error);
hasGroups = false;
}
- // Tour deve aparecer se NÃO tiver grupos
- const shouldShow = !hasGroups;
-
- console.log('🎯 [TOUR] Resultado final da verificação:', {
- hasGroups,
- shouldShow,
- currentPath: location.pathname,
- userEmail: userEmail,
- shownThisSession
- });
-
- setShouldShowTour(shouldShow);
-
- // Se deve mostrar o tour e não foi mostrado ainda, abrir automaticamente
- if (shouldShow && !shownThisSession && !isOpen) {
- console.log('🚀 [TOUR] Abrindo tour automaticamente - usuário sem grupos');
- setTimeout(() => {
- console.log('🎬 [TOUR] Executando abertura do tour...');
- setIsOpen(true);
- setCurrentStep(0);
- setTourShownThisSession(true);
- sessionStorage.setItem(TOUR_SESSION_KEY, 'true');
- }, 2000); // Delay para garantir que tudo carregue
- } else if (!shouldShow) {
+ // Se tem grupos, não mostrar tour
+ if (hasGroups) {
console.log('✅ [TOUR] Usuário já tem grupos, não mostrar tour');
+ setShouldShowTour(false);
setIsOpen(false);
+ return;
}
+
+ // Se não tem grupos, verificar se já foi mostrado nesta sessão
+ const shownThisSession = sessionStorage.getItem(TOUR_SESSION_KEY) === 'true';
+ console.log('🔍 [TOUR] Usuário SEM grupos. Verificando se tour já foi exibido nesta sessão:', shownThisSession);
+
+ if (shownThisSession) {
+ console.log('❌ [TOUR] Tour já foi exibido nesta sessão para este usuário sem grupos');
+ setShouldShowTour(false);
+ setTourShownThisSession(true);
+ return;
+ }
+
+ // Tour deve aparecer: usuário sem grupos e tour não foi exibido ainda
+ console.log('🎯 [TOUR] CONDIÇÕES ATENDIDAS - Usuário sem grupos e tour não exibido ainda');
+ setShouldShowTour(true);
+
+ // Abrir tour automaticamente após um pequeno delay
+ console.log('🚀 [TOUR] Abrindo tour automaticamente - usuário sem grupos');
+ setTimeout(() => {
+ console.log('🎬 [TOUR] Executando abertura do tour...');
+ setIsOpen(true);
+ setCurrentStep(0);
+ // SÓ marcar como exibido quando realmente abrir
+ sessionStorage.setItem(TOUR_SESSION_KEY, 'true');
+ setTourShownThisSession(true);
+ }, 2000);
+
} catch (error) {
console.error('❌ [TOUR] Erro ao verificar condições do tour:', error);
setShouldShowTour(false);
}
};
+ // Função para limpar o tour (para quando o usuário cria um grupo)
+ const resetTourForNewGroups = () => {
+ console.log('🔄 [TOUR] Resetando tour - usuário criou grupos');
+ setIsOpen(false);
+ setShouldShowTour(false);
+ sessionStorage.removeItem(TOUR_SESSION_KEY);
+ setTourShownThisSession(false);
+ };
+
// Verificar condições quando a localização mudar ou na inicialização
useEffect(() => {
console.log('🔄 [TOUR] useEffect disparado - verificando condições do tour');
- // Aguardar um pouco para garantir que os dados do usuário estão disponíveis
const timer = setTimeout(() => {
checkTourConditions();
}, 1000);
@@ -115,7 +114,10 @@ export const useOnboardingTour = () => {
const handleUserLoggedIn = (event: CustomEvent) => {
console.log('🎉 [TOUR] Evento de login recebido:', event.detail);
if (location.pathname === '/') {
- console.log('📧 [TOUR] Login detectado no dashboard, verificando condições do tour');
+ console.log('📧 [TOUR] Login detectado no dashboard, re-verificando condições do tour');
+ // Limpar sessionStorage para nova verificação após login
+ sessionStorage.removeItem(TOUR_SESSION_KEY);
+ setTourShownThisSession(false);
setTimeout(() => {
checkTourConditions();
}, 2500);
@@ -134,7 +136,9 @@ export const useOnboardingTour = () => {
console.log('📧 [TOUR] Segundo useEffect - email disponível:', userEmail);
if (userEmail && location.pathname === '/') {
console.log('📧 [TOUR] Email detectado, re-verificando condições do tour');
- // Delay maior para garantir que o usuário já está logado completamente
+ // Limpar sessionStorage para nova verificação
+ sessionStorage.removeItem(TOUR_SESSION_KEY);
+ setTourShownThisSession(false);
setTimeout(() => {
checkTourConditions();
}, 1500);
@@ -147,6 +151,9 @@ export const useOnboardingTour = () => {
if (e.key === 'userEmail' && e.newValue) {
console.log('👤 [TOUR] Login detectado via storage event:', e.newValue);
if (location.pathname === '/') {
+ // Limpar sessionStorage para nova verificação após mudança de usuário
+ sessionStorage.removeItem(TOUR_SESSION_KEY);
+ setTourShownThisSession(false);
setTimeout(() => {
checkTourConditions();
}, 2000);
@@ -158,17 +165,6 @@ export const useOnboardingTour = () => {
return () => window.removeEventListener('storage', handleStorageChange);
}, [location.pathname]);
- // Limpar tour ao mudar de sessão
- useEffect(() => {
- const handleSessionStorageChange = () => {
- const shownThisSession = sessionStorage.getItem(TOUR_SESSION_KEY) === 'true';
- setTourShownThisSession(shownThisSession);
- };
-
- window.addEventListener('storage', handleSessionStorageChange);
- return () => window.removeEventListener('storage', handleSessionStorageChange);
- }, []);
-
const nextStep = () => {
console.log('➡️ [TOUR] Próximo step do tour:', currentStep + 1);
if (currentStep < 2) {
@@ -187,7 +183,7 @@ export const useOnboardingTour = () => {
console.log('❌ [TOUR] Fechando tour');
setIsOpen(false);
setCurrentStep(0);
- // Marcar como exibido nesta sessão
+ // Marcar como exibido nesta sessão apenas quando fechar
sessionStorage.setItem(TOUR_SESSION_KEY, 'true');
setTourShownThisSession(true);
};
@@ -209,6 +205,7 @@ export const useOnboardingTour = () => {
skipTour,
closeTour,
reopenTour,
+ resetTourForNewGroups,
setCurrentStep
};
};
diff --git a/src/pages/Index.tsx b/src/pages/Index.tsx
index 0a8b957..47a5dee 100644
--- a/src/pages/Index.tsx
+++ b/src/pages/Index.tsx
@@ -1,3 +1,4 @@
+
import { useState, useEffect } from 'react';
import Layout from '@/components/layout/Layout';
import SummaryCard from '@/components/dashboard/SummaryCard';
@@ -5,6 +6,7 @@ import TransactionsTable from '@/components/dashboard/TransactionsTable';
import CategoryChart from '@/components/dashboard/CategoryChart';
import MonthlyChart from '@/components/dashboard/MonthlyChart';
import { MonthFilter } from '@/components/filters/MonthFilter';
+import { OnboardingTour, useOnboardingTour } from '@/components/onboarding';
import { Wallet, ArrowUp, ArrowDown, PiggyBank } from 'lucide-react';
import { Transaction, CategorySummary, MonthlyData } from '@/types/financialTypes';
import { useToast } from "@/components/ui/use-toast";
@@ -24,6 +26,15 @@ const Dashboard = () => {
const [totals, setTotals] = useState({ receitas: 0, despesas: 0, saldo: 0, cartoes: 0 });
const { toast } = useToast();
+ // Hook do tour de onboarding
+ const {
+ isOpen: tourIsOpen,
+ currentStep: tourCurrentStep,
+ nextStep: tourNextStep,
+ skipTour,
+ closeTour
+ } = useOnboardingTour();
+
// Função para obter o mês atual no formato YYYY-MM
const getCurrentMonth = () => {
const now = new Date();
@@ -196,6 +207,15 @@ const Dashboard = () => {
+
+ {/* Tour de Onboarding */}
+
);
};