Cookie consent banner linking to posthog

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' && 
+            if (mutation.type === 'attributes' &&
-                (mutation.attributeName === 'data-mantine-color-scheme' || 
+                (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
     };

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(
   <React.StrictMode>
     <ColorSchemeScript defaultColorScheme={getInitialScheme()} />
     <PostHogProvider
-      apiKey={import.meta.env.VITE_PUBLIC_POSTHOG_KEY}
+      client={posthog}
-      options={{
-        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: import.meta.env.MODE === 'development',
-      }}
     >
       <BrowserRouter>
         <App />