diff --git a/client/src/components/CookieConsent.tsx b/client/src/components/CookieConsent.tsx new file mode 100644 index 0000000..7496038 --- /dev/null +++ b/client/src/components/CookieConsent.tsx @@ -0,0 +1,248 @@ +import { useState, useEffect } from 'react'; +import { Button } from '@/components/ui/button'; +import { X } from 'lucide-react'; + +interface ConsentState { + necessary: boolean; + analytics: boolean; + advertising: boolean; +} + +export default function CookieConsent() { + const [showBanner, setShowBanner] = useState(false); + const [showDetails, setShowDetails] = useState(false); + const [consent, setConsent] = useState({ + necessary: true, + analytics: false, + advertising: false + }); + + useEffect(() => { + // Check if user has already given consent + const savedConsent = localStorage.getItem('cookie_consent'); + if (savedConsent) { + try { + const parsedConsent = JSON.parse(savedConsent); + setConsent(parsedConsent); + updateGoogleConsent(parsedConsent); + setShowBanner(false); // Don't show banner if consent already exists + } catch (error) { + // If parsing fails, show banner + setShowBanner(true); + } + } else { + // No saved consent, show banner + setShowBanner(true); + } + }, []); + + const updateGoogleConsent = (consentState: ConsentState) => { + if (window.gtag) { + window.gtag('consent', 'update', { + 'ad_storage': consentState.advertising ? 'granted' : 'denied', + 'analytics_storage': consentState.analytics ? 'granted' : 'denied', + 'ad_user_data': consentState.advertising ? 'granted' : 'denied', + 'ad_personalization': consentState.advertising ? 'granted' : 'denied' + }); + } + }; + + const handleAcceptAll = () => { + const newConsent = { + necessary: true, + analytics: true, + advertising: true + }; + + setConsent(newConsent); + updateGoogleConsent(newConsent); + localStorage.setItem('cookie_consent', JSON.stringify(newConsent)); + setShowBanner(false); + setShowDetails(false); + }; + + const handleRejectAll = () => { + const newConsent = { + necessary: true, + analytics: false, + advertising: false + }; + + setConsent(newConsent); + updateGoogleConsent(newConsent); + localStorage.setItem('cookie_consent', JSON.stringify(newConsent)); + setShowBanner(false); + setShowDetails(false); + }; + + const handleSavePreferences = () => { + updateGoogleConsent(consent); + localStorage.setItem('cookie_consent', JSON.stringify(consent)); + setShowBanner(false); + setShowDetails(false); + }; + + const handleConsentChange = (key: keyof ConsentState, value: boolean) => { + if (key === 'necessary') return; // Cannot disable necessary cookies + setConsent(prev => ({ ...prev, [key]: value })); + }; + + if (!showBanner) return null; + + return ( +
+
+
+ {!showDetails ? ( + // Simple banner +
+
+
+
+
+
+

Cookie-Einstellungen

+
+ +
+ +

+ Wir verwenden Cookies und ähnliche Technologien, um unsere Website zu verbessern, + Inhalte zu personalisieren und Werbung zu schalten. Durch das Fortsetzen der Nutzung + unserer Website stimmen Sie der Verwendung von Cookies zu. +

+ +
+ + + +
+
+ ) : ( + // Detailed settings +
+
+

Cookie-Einstellungen

+ +
+ +
+ {/* Necessary Cookies */} +
+
+

Notwendige Cookies

+
+ Immer aktiv +
+
+

+ Diese Cookies sind für das Funktionieren der Website erforderlich und können + in unseren Systemen nicht deaktiviert werden. +

+
+ + {/* Analytics Cookies */} +
+
+

Analyse-Cookies

+ +
+

+ Diese Cookies ermöglichen es uns, Besuche und Verkehrsquellen zu zählen, + damit wir die Leistung unserer Website messen und verbessern können. +

+
+ + {/* Advertising Cookies */} +
+
+

Werbe-Cookies

+ +
+

+ Diese Cookies werden von Werbepartnern über unsere Website gesetzt. Sie können + verwendet werden, um ein Profil Ihrer Interessen zu erstellen und relevante + Werbung auf anderen Websites zu zeigen. +

+
+
+ +
+ + + +
+
+ )} +
+
+
+ ); +} + +// Global declaration for gtag +declare global { + interface Window { + gtag: (...args: any[]) => void; + } +} \ No newline at end of file