diff --git a/src/components/layout/Header.tsx b/src/components/layout/Header.tsx index 74f1875..57aede5 100644 --- a/src/components/layout/Header.tsx +++ b/src/components/layout/Header.tsx @@ -1,70 +1,31 @@ -import { useState, useEffect } from 'react'; -import { useNavigate } from 'react-router-dom'; -import { Button } from "@/components/ui/button"; -import { LogOut, User } from 'lucide-react'; -import { useToast } from "@/components/ui/use-toast"; -import { - DropdownMenu, - DropdownMenuContent, - DropdownMenuItem, - DropdownMenuLabel, - DropdownMenuSeparator, - DropdownMenuTrigger, -} from "@/components/ui/dropdown-menu"; -import { supabase } from '@/integrations/supabase/client'; -const Header = () => { - const navigate = useNavigate(); - const { toast } = useToast(); - const [userName, setUserName] = useState('Usuário'); +import { Menu } from 'lucide-react'; +import { Button } from '@/components/ui/button'; +import { useIsMobile } from '@/hooks/use-mobile'; - useEffect(() => { - const { data: { subscription } } = supabase.auth.onAuthStateChange((_event, session) => { - setUserName(session?.user?.email || 'Usuário'); - }); - - return () => subscription.unsubscribe(); - }, []); +interface HeaderProps { + onMenuToggle: () => void; +} - const handleLogout = async () => { - const { error } = await supabase.auth.signOut(); - - if (error) { - console.error('Error logging out:', error); - toast({ - title: "Erro no logout", - description: "Não foi possível desconectar. Tente novamente.", - variant: 'destructive' - }); - } else { - toast({ - title: "Logout realizado", - description: "Você foi desconectado com sucesso" - }); - navigate('/auth', { replace: true }); - } - }; +export default function Header({ onMenuToggle }: HeaderProps) { + const isMobile = useIsMobile(); return ( -
- - - - - - Minha conta - - - - Sair - - - +
+ {isMobile && ( + + )} +
+

Finance Home

+
); -}; - -export default Header; +} diff --git a/src/components/onboarding/OnboardingTour.tsx b/src/components/onboarding/OnboardingTour.tsx index aa6d19d..b5d170a 100644 --- a/src/components/onboarding/OnboardingTour.tsx +++ b/src/components/onboarding/OnboardingTour.tsx @@ -88,9 +88,10 @@ const OnboardingTour: React.FC = ({ width: rect.width + 20, height: rect.height + 20, borderRadius: '8px', - boxShadow: '0 0 0 9999px rgba(0, 0, 0, 0.7), 0 0 20px rgba(59, 130, 246, 0.8)', + boxShadow: '0 0 0 9999px rgba(0, 0, 0, 0.8), 0 0 30px rgba(59, 130, 246, 1), inset 0 0 0 3px rgba(59, 130, 246, 0.8)', pointerEvents: 'none' as const, - zIndex: 9998 + zIndex: 9998, + border: '2px solid rgba(59, 130, 246, 0.9)' }; }; @@ -98,7 +99,7 @@ const OnboardingTour: React.FC = ({ <> {/* Overlay escuro */}
@@ -109,7 +110,7 @@ const OnboardingTour: React.FC = ({ {/* Card do tour */}
- +

@@ -142,10 +143,17 @@ const OnboardingTour: React.FC = ({

- -
diff --git a/src/hooks/useOnboardingTour.ts b/src/hooks/useOnboardingTour.ts index d290b29..ae4e4f9 100644 --- a/src/hooks/useOnboardingTour.ts +++ b/src/hooks/useOnboardingTour.ts @@ -4,16 +4,29 @@ import { useLocation } from 'react-router-dom'; import { useWhatsAppInstances } from '@/hooks/useWhatsAppInstances'; import { listWhatsAppGroups } from '@/services/whatsAppGroupsService'; +const TOUR_SESSION_KEY = 'onboarding_tour_shown'; + export const useOnboardingTour = () => { const [isOpen, setIsOpen] = useState(false); const [currentStep, setCurrentStep] = useState(0); const [shouldShowTour, setShouldShowTour] = useState(false); + const [tourShownThisSession, setTourShownThisSession] = useState(false); const location = useLocation(); const { instances } = useWhatsAppInstances(); // Verificar se o tour deve ser exibido const checkTourConditions = async () => { try { + // Verificar se já foi mostrado nesta sessão + const shownThisSession = sessionStorage.getItem(TOUR_SESSION_KEY) === 'true'; + + if (shownThisSession) { + console.log('Tour já foi exibido nesta sessão'); + setShouldShowTour(false); + setTourShownThisSession(true); + return; + } + // Verificar se há instâncias conectadas const hasConnectedInstance = instances.some(instance => instance.status === 'connected' || instance.connectionState === 'open' @@ -30,16 +43,19 @@ export const useOnboardingTour = () => { hasConnectedInstance, hasGroups, shouldShow, - instances: instances.length + instances: instances.length, + shownThisSession }); setShouldShowTour(shouldShow); - // Se deve mostrar o tour e não está aberto, abrir automaticamente - if (shouldShow && !isOpen) { + // Se deve mostrar o tour e não foi mostrado ainda, abrir automaticamente + if (shouldShow && !shownThisSession && !isOpen) { setIsOpen(true); setCurrentStep(0); - } else if (!shouldShow && isOpen) { + setTourShownThisSession(true); + sessionStorage.setItem(TOUR_SESSION_KEY, 'true'); + } else if (!shouldShow) { // Se as condições foram atendidas, fechar o tour setIsOpen(false); } @@ -56,11 +72,10 @@ export const useOnboardingTour = () => { } }, [instances]); - // Verificar condições periodicamente + // Verificar condições na inicialização useEffect(() => { - const interval = setInterval(checkTourConditions, 5000); // A cada 5 segundos - return () => clearInterval(interval); - }, [instances]); + checkTourConditions(); + }, []); const nextStep = () => { if (currentStep < 2) { @@ -77,6 +92,9 @@ export const useOnboardingTour = () => { const closeTour = () => { setIsOpen(false); setCurrentStep(0); + // Marcar como exibido nesta sessão + sessionStorage.setItem(TOUR_SESSION_KEY, 'true'); + setTourShownThisSession(true); }; return {