Fix: Onboarding tour not starting on login

The onboarding tour was not starting correctly after login. This commit reviews the logic to ensure the tour starts when the user logs in and has no registered groups. Also, it moves the "Assinatura" menu item to the end of the sidebar, after "Calendário".
This commit is contained in:
gpt-engineer-app[bot] 2025-06-22 01:34:41 +00:00
parent d4eabdb831
commit bc4e03e7c2
2 changed files with 51 additions and 21 deletions

View File

@ -61,14 +61,6 @@ export default function Sidebar({ isOpen, onClose }: SidebarProps) {
<Home className="mr-2 h-4 w-4 transition-transform group-hover:scale-110" />
<span>Dashboard</span>
</NavLink>
<NavLink
to="/assinatura"
className={({ isActive }) => getNavLinkClass(isActive)}
onClick={isMobile ? onClose : undefined}
>
<Crown className="mr-2 h-4 w-4 transition-transform group-hover:scale-110" />
<span>Assinatura</span>
</NavLink>
<NavLink
to="/transacoes"
className={({ isActive }) => getNavLinkClass(isActive)}
@ -109,6 +101,14 @@ export default function Sidebar({ isOpen, onClose }: SidebarProps) {
<Calendar className="mr-2 h-4 w-4 transition-transform group-hover:scale-110" />
<span>Calendário</span>
</NavLink>
<NavLink
to="/assinatura"
className={({ isActive }) => getNavLinkClass(isActive)}
onClick={isMobile ? onClose : undefined}
>
<Crown className="mr-2 h-4 w-4 transition-transform group-hover:scale-110" />
<span>Assinatura</span>
</NavLink>
</div>
</div>

View File

@ -17,7 +17,7 @@ export const useOnboardingTour = () => {
try {
// Só mostrar o tour na página inicial (dashboard)
if (location.pathname !== '/') {
console.log('❌ Tour só aparece no dashboard');
console.log('❌ Tour só aparece no dashboard, página atual:', location.pathname);
setShouldShowTour(false);
return;
}
@ -39,10 +39,24 @@ export const useOnboardingTour = () => {
// Verificar se há grupos cadastrados
let hasGroups = false;
const userEmail = localStorage.getItem('userEmail');
console.log('📧 Email do usuário para verificação:', userEmail);
if (!userEmail) {
console.log('❌ Email não encontrado no localStorage');
setShouldShowTour(false);
return;
}
try {
console.log('🔍 Buscando grupos para o usuário...');
const groups = await listWhatsAppGroups();
hasGroups = groups.length > 0;
console.log('👥 Grupos encontrados:', groups.length);
console.log('👥 Grupos encontrados:', {
quantidade: groups.length,
grupos: groups.map(g => ({ id: g.id, nome: g.nome_grupo, status: g.status }))
});
} catch (error) {
console.log('⚠️ Erro ao verificar grupos, assumindo que não há grupos:', error);
hasGroups = false;
@ -51,24 +65,26 @@ export const useOnboardingTour = () => {
// Tour deve aparecer se NÃO tiver grupos
const shouldShow = !hasGroups;
console.log('🎯 Resultado da verificação:', {
console.log('🎯 Resultado final da verificação:', {
hasGroups,
shouldShow,
currentPath: location.pathname
currentPath: location.pathname,
userEmail: userEmail
});
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');
console.log('🚀 Abrindo tour automaticamente - usuário sem grupos');
setTimeout(() => {
setIsOpen(true);
setCurrentStep(0);
setTourShownThisSession(true);
sessionStorage.setItem(TOUR_SESSION_KEY, 'true');
}, 1000); // Delay para garantir que a página carregou completamente
} else if (!shouldShow) {
// Se as condições foram atendidas, fechar o tour
console.log('✅ Condições atendidas, fechando tour se estiver aberto');
console.log('✅ Usuário já tem grupos, não mostrar tour');
setIsOpen(false);
}
} catch (error) {
@ -79,10 +95,24 @@ export const useOnboardingTour = () => {
// Verificar condições quando a localização mudar ou na inicialização
useEffect(() => {
console.log('🔄 Efeito disparado - verificando condições do tour');
checkTourConditions();
console.log('🔄 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();
}, 500);
return () => clearTimeout(timer);
}, [location.pathname]);
// Verificar também quando o email do usuário estiver disponível
useEffect(() => {
const userEmail = localStorage.getItem('userEmail');
if (userEmail && location.pathname === '/') {
console.log('📧 Email detectado, re-verificando condições do tour');
checkTourConditions();
}
}, []);
// Limpar tour ao mudar de sessão
useEffect(() => {
const handleStorageChange = () => {