Chore/v2/onboarding flow cleanup (#5065)

frontend/src/core/hooks/useCookieConsent.ts

@@ -2,7 +2,7 @@ import { useEffect, useState, useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 import { BASE_PATH } from '@app/constants/app';
 import { useAppConfig } from '@app/contexts/AppConfigContext';
-import { useOnboarding } from '@app/contexts/OnboardingContext';
+import { TOUR_STATE_EVENT, type TourStatePayload } from '@app/constants/events';
 
 declare global {
   interface Window {
@@ -28,16 +28,11 @@ export const useCookieConsent = ({
 }: CookieConsentConfig = {}) => {
   const { t } = useTranslation();
   const { config } = useAppConfig();
-  const { isOpen: tourIsOpen } = useOnboarding();
   const [isInitialized, setIsInitialized] = useState(false);
 
   useEffect(() => {
-    if (!analyticsEnabled) {
-      console.log('Cookie consent not enabled - analyticsEnabled is false');
-      return;
-    }
+    if (!analyticsEnabled) return;
 
-    // Load the cookie consent CSS files first (always needed)
     const mainCSS = document.createElement('link');
     mainCSS.rel = 'stylesheet';
     mainCSS.href = `${BASE_PATH}css/cookieconsent.css`;
@@ -52,26 +47,19 @@ export const useCookieConsent = ({
       document.head.appendChild(customCSS);
     }
 
-    // Prevent double initialization
     if (window.CookieConsent) {
+      if (forceLightMode) {
+        document.documentElement.classList.remove('cc--darkmode');
+      }
       setIsInitialized(true);
-      // Force show the modal if it exists but isn't visible
-      setTimeout(() => {
-        window.CookieConsent?.show();
-      }, 100);
       return;
     }
 
-    // Load the cookie consent library
     const script = document.createElement('script');
     script.src = `${BASE_PATH}js/thirdParty/cookieconsent.umd.js`;
     script.onload = () => {
-      // Small delay to ensure DOM is ready
       setTimeout(() => {
-
-        // Detect current theme and set appropriate mode
         const detectTheme = () => {
-          // If forceLightMode is enabled, always use light mode
           if (forceLightMode) {
             document.documentElement.classList.remove('cc--darkmode');
             return false;
@@ -82,7 +70,6 @@ export const useCookieConsent = ({
           const hasDarkClass = document.documentElement.classList.contains('dark');
           const systemPrefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
 
-          // Priority: Mantine attribute > CSS classes > system preference
           let isDarkMode = false;
 
           if (mantineScheme) {
@@ -95,24 +82,17 @@ export const useCookieConsent = ({
             isDarkMode = systemPrefersDark;
           }
 
-          // Always explicitly set or remove the class
           document.documentElement.classList.toggle('cc--darkmode', isDarkMode);
-
           return isDarkMode;
         };
 
-        // Initial theme detection with slight delay to ensure DOM is ready
-        setTimeout(() => {
-          detectTheme();
-        }, 50);
+        setTimeout(() => detectTheme(), 50);
 
-        // Check if CookieConsent is available
         if (!window.CookieConsent) {
           console.error('CookieConsent is not available on window object');
           return;
         }
 
-        // Listen for theme changes (but not if forceLightMode is enabled)
         let themeObserver: MutationObserver | null = null;
         if (!forceLightMode) {
           themeObserver = new MutationObserver((mutations) => {
@@ -131,8 +111,6 @@ export const useCookieConsent = ({
           });
         }
 
-
-        // Initialize cookie consent with full configuration
         try {
           window.CookieConsent.run({
             autoShow: true,
@@ -160,15 +138,11 @@ export const useCookieConsent = ({
                   ...(config?.enablePosthog !== false && {
                     posthog: {
                       label: t('cookieBanner.services.posthog', 'PostHog Analytics'),
-                      onAccept: () => console.log('PostHog service accepted'),
-                      onReject: () => console.log('PostHog service rejected')
                     }
                   }),
                   ...(config?.enableScarf !== false && {
                     scarf: {
                       label: t('cookieBanner.services.scarf', 'Scarf Pixel'),
-                      onAccept: () => console.log('Scarf service accepted'),
-                      onReject: () => console.log('Scarf service rejected')
                     }
                   })
                 }
@@ -224,16 +198,11 @@ export const useCookieConsent = ({
             }
           });
 
-          // Force show after initialization
-          setTimeout(() => {
-            window.CookieConsent?.show();
-          }, 200);
-
         } catch (error) {
           console.error('Error initializing CookieConsent:', error);
         }
-      setIsInitialized(true);
-      }, 100); // Small delay to ensure DOM is ready
+        setIsInitialized(true);
+      }, 100);
     };
 
     script.onerror = () => {
@@ -243,7 +212,6 @@ export const useCookieConsent = ({
     document.head.appendChild(script);
 
     return () => {
-      // Cleanup script and CSS when component unmounts
       if (document.head.contains(script)) {
         document.head.removeChild(script);
       }
@@ -254,9 +222,8 @@ export const useCookieConsent = ({
         document.head.removeChild(customCSS);
       }
     };
-  }, [analyticsEnabled, config?.enablePosthog, config?.enableScarf, t]);
+  }, [analyticsEnabled, config?.enablePosthog, config?.enableScarf, t, forceLightMode]);
 
-  // Update theme when forceLightMode changes
   useEffect(() => {
     if (!isInitialized) return;
 
@@ -286,10 +253,8 @@ export const useCookieConsent = ({
       return isDarkMode;
     };
 
-    // Update theme immediately
     detectTheme();
 
-    // Set up or remove theme observer based on forceLightMode
     let themeObserver: MutationObserver | null = null;
     if (!forceLightMode) {
       themeObserver = new MutationObserver((mutations) => {
@@ -315,23 +280,23 @@ export const useCookieConsent = ({
     };
   }, [forceLightMode, isInitialized]);
 
-  // Hide cookie banner when tour is active
   useEffect(() => {
-    if (!isInitialized || !window.CookieConsent) {
-      return;
-    }
+    if (!isInitialized || !window.CookieConsent) return;
 
-    if (tourIsOpen) {
-      window.CookieConsent.hide();
-    } else {
-      // Only show if user hasn't made a choice yet
-      const consentCookie = window.CookieConsent.getCookie?.();
-      const hasConsented = consentCookie && Object.keys(consentCookie).length > 0;
-      if (!hasConsented) {
-        window.CookieConsent.show();
+    const handleTourState = (event: Event) => {
+      const { detail } = event as CustomEvent<TourStatePayload>;
+      if (detail?.isOpen) {
+        window.CookieConsent?.hide();
+      } else {
+        const consentCookie = window.CookieConsent?.getCookie?.();
+        const hasConsented = consentCookie && Object.keys(consentCookie).length > 0;
+        if (!hasConsented) window.CookieConsent?.show();
       }
-    }
-  }, [tourIsOpen, isInitialized]);
+    };
+
+    window.addEventListener(TOUR_STATE_EVENT, handleTourState);
+    return () => window.removeEventListener(TOUR_STATE_EVENT, handleTourState);
+  }, [isInitialized]);
 
   const showCookieConsent = useCallback(() => {
     if (isInitialized && window.CookieConsent) {