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,8 +34,6 @@ 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';
@@ -52,10 +49,8 @@ export const useCookieConsent = ({ analyticsEnabled = false }: CookieConsentConf
     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 = () => {
@@ -77,8 +72,6 @@ export const useCookieConsent = ({ analyticsEnabled = false }: CookieConsentConf
             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);
 
@@ -102,7 +95,6 @@ export const useCookieConsent = ({ analyticsEnabled = false }: CookieConsentConf
             if (mutation.type === 'attributes' &&
                 (mutation.attributeName === 'data-mantine-color-scheme' ||
                  mutation.attributeName === 'class')) {
-              console.log('Theme changed, re-detecting...');
               detectTheme();
             }
           });
@@ -113,8 +105,6 @@ export const useCookieConsent = ({ analyticsEnabled = false }: CookieConsentConf
           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 {
@@ -193,23 +183,17 @@ 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 />