diff --git a/frontend/src/hooks/useCookieConsent.ts b/frontend/src/hooks/useCookieConsent.ts index 302d16223..3eacaa7bd 100644 --- a/frontend/src/hooks/useCookieConsent.ts +++ b/frontend/src/hooks/useCookieConsent.ts @@ -26,7 +26,6 @@ export const useCookieConsent = ({ analyticsEnabled = false }: CookieConsentConf // Prevent double initialization if (window.CookieConsent) { - console.log('Cookie consent already loaded, forcing show...'); setIsInitialized(true); // Force show the modal if it exists but isn't visible setTimeout(() => { @@ -35,38 +34,34 @@ export const useCookieConsent = ({ analyticsEnabled = false }: CookieConsentConf return; } - console.log('Loading cookie consent library...'); - // Load the cookie consent CSS files first const mainCSS = document.createElement('link'); mainCSS.rel = 'stylesheet'; mainCSS.href = '/css/cookieconsent.css'; document.head.appendChild(mainCSS); - + const customCSS = document.createElement('link'); customCSS.rel = 'stylesheet'; customCSS.href = '/css/cookieconsentCustomisation.css'; document.head.appendChild(customCSS); - + // Load the cookie consent library const script = document.createElement('script'); script.src = '/js/thirdParty/cookieconsent.umd.js'; script.onload = () => { - console.log('Cookie consent script loaded successfully'); // Small delay to ensure DOM is ready setTimeout(() => { - console.log('Initializing cookie consent...'); - + // Detect current theme and set appropriate mode const detectTheme = () => { const mantineScheme = document.documentElement.getAttribute('data-mantine-color-scheme'); const hasLightClass = document.documentElement.classList.contains('light'); 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) { isDarkMode = mantineScheme === 'dark'; } else if (hasLightClass) { @@ -76,15 +71,13 @@ export const useCookieConsent = ({ analyticsEnabled = false }: CookieConsentConf } else { isDarkMode = systemPrefersDark; } - - console.log('Theme detection:', { mantineScheme, hasLightClass, hasDarkClass, systemPrefersDark, isDarkMode }); - + // 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(); @@ -95,26 +88,23 @@ export const useCookieConsent = ({ analyticsEnabled = false }: CookieConsentConf console.error('CookieConsent is not available on window object'); return; } - + // Listen for theme changes const themeObserver = new MutationObserver((mutations) => { mutations.forEach((mutation) => { - if (mutation.type === 'attributes' && - (mutation.attributeName === 'data-mantine-color-scheme' || + if (mutation.type === 'attributes' && + (mutation.attributeName === 'data-mantine-color-scheme' || mutation.attributeName === 'class')) { - console.log('Theme changed, re-detecting...'); detectTheme(); } }); }); - + themeObserver.observe(document.documentElement, { attributes: true, attributeFilter: ['data-mantine-color-scheme', 'class'] }); - // Clear any existing cookie to force show - document.cookie = 'cc_cookie=; expires=Thu, 01 Jan 1970 00:00:01 GMT; path=/'; // Initialize cookie consent with full configuration try { @@ -190,26 +180,20 @@ export const useCookieConsent = ({ analyticsEnabled = false }: CookieConsentConf } } }); - + // Force show after initialization setTimeout(() => { - console.log('Forcing cookie consent to show...'); window.CookieConsent.show(); - + // Debug: Check if modal elements exist const ccMain = document.getElementById('cc-main'); const consentModal = document.querySelector('.cm-wrapper'); - console.log('cc-main element:', ccMain); - console.log('consent modal element:', consentModal); - if (ccMain) { - console.log('cc-main styles:', window.getComputedStyle(ccMain)); - } + }, 200); - + } catch (error) { console.error('Error initializing CookieConsent:', error); } - console.log('Cookie consent initialized successfully'); setIsInitialized(true); }, 100); // Small delay to ensure DOM is ready }; diff --git a/frontend/src/index.tsx b/frontend/src/index.tsx index 9443f0be6..ff906a47a 100644 --- a/frontend/src/index.tsx +++ b/frontend/src/index.tsx @@ -7,6 +7,7 @@ import { ColorSchemeScript } from '@mantine/core'; import { BrowserRouter } from 'react-router-dom'; import App from './App'; import './i18n'; // Initialize i18next +import posthog from 'posthog-js'; import { PostHogProvider } from 'posthog-js/react'; // Compute initial color scheme @@ -21,22 +22,39 @@ function getInitialScheme(): 'light' | 'dark' { } } +posthog.init(import.meta.env.VITE_PUBLIC_POSTHOG_KEY, { + api_host: import.meta.env.VITE_PUBLIC_POSTHOG_HOST, + defaults: '2025-05-24', + capture_exceptions: true, // This enables capturing exceptions using Error Tracking, set to false if you don't want this + debug: false, + opt_out_capturing_by_default: false, // We handle opt-out via cookie consent +}); + +function UpdatePosthogConsent(){ + if(typeof(posthog) == "undefined") { + return; + } + const optIn = (window.CookieConsent as any).acceptedCategory('analytics'); + optIn? + posthog.opt_in_capturing() : posthog.opt_out_capturing(); + + console.log("Updated analytics consent: ", optIn? "opted in" : "opted out"); + } + +window.addEventListener("cc:onConsent", UpdatePosthogConsent); +window.addEventListener("cc:onChange", UpdatePosthogConsent); + const container = document.getElementById('root'); if (!container) { throw new Error("Root container missing in index.html"); } + const root = ReactDOM.createRoot(container); // Finds the root DOM element root.render(