Cleanup

Author: mrubens

apps/web-roo-code/src/components/CookieConsent.tsx

@@ -1,14 +1,27 @@
 "use client"
 
-import React from "react"
-import { CookieConsent } from "./CookieConsent"
+import React, { useState, useEffect } from "react"
+import ReactCookieConsent from "react-cookie-consent"
+import { Cookie } from "lucide-react"
+import { getDomain } from "tldts"
+import { CONSENT_COOKIE_NAME } from "@/lib/constants"
 import { dispatchConsentEvent } from "@/lib/analytics/consent-manager"
 
 /**
- * Wrapper component for CookieConsent that handles consent callbacks
- * This is needed because we can't pass event handlers from server components
+ * GDPR-compliant cookie consent banner component
+ * Handles both the UI and consent event dispatching
  */
 export function CookieConsentWrapper() {
+	const [cookieDomain, setCookieDomain] = useState<string | null>(null)
+
+	useEffect(() => {
+		// Get the appropriate domain using tldts
+		if (typeof window !== "undefined") {
+			const domain = getDomain(window.location.hostname)
+			setCookieDomain(domain)
+		}
+	}, [])
+
 	const handleAccept = () => {
 		dispatchConsentEvent(true)
 	}
@@ -17,5 +30,82 @@ export function CookieConsentWrapper() {
 		dispatchConsentEvent(false)
 	}
 
-	return <CookieConsent onAccept={handleAccept} onDecline={handleDecline} enableDeclineButton={true} />
+	const extraCookieOptions = cookieDomain
+		? {
+				domain: cookieDomain,
+			}
+		: {}
+
+	const containerClasses = `
+		fixed bottom-2 left-2 right-2 z-[999]
+		bg-black/95 dark:bg-white/95
+		text-white dark:text-black
+		border-t-neutral-800 dark:border-t-gray-200
+		backdrop-blur-xl
+		border-t
+		font-semibold
+		rounded-t-lg
+		px-4 py-4 md:px-8 md:py-4
+		flex flex-wrap items-center justify-between gap-4
+		text-sm font-sans
+	`.trim()
+
+	const buttonWrapperClasses = `
+		flex
+		flex-row-reverse
+		items-center
+		gap-2
+	`.trim()
+
+	const acceptButtonClasses = `
+		bg-white text-black border-neutral-800
+		dark:bg-black dark:text-white dark:border-gray-200
+		hover:opacity-50
+		transition-opacity
+		rounded-md
+		px-4 py-2 mr-2
+		text-sm font-bold
+		cursor-pointer
+		focus:outline-none focus:ring-2 focus:ring-offset-2
+	`.trim()
+
+	const declineButtonClasses = `
+		dark:bg-white dark:text-black dark:border-gray-200
+		bg-black text-white border-neutral-800
+		hover:opacity-50
+		border border-border
+		transition-opacity
+		rounded-md
+		px-4 py-2
+		text-sm font-bold
+		cursor-pointer
+		focus:outline-none focus:ring-2 focus:ring-offset-2
+	`.trim()
+
+	return (
+		<div role="banner" aria-label="Cookie consent banner" aria-live="polite">
+			<ReactCookieConsent
+				location="bottom"
+				buttonText="Accept"
+				declineButtonText="Decline"
+				cookieName={CONSENT_COOKIE_NAME}
+				expires={365}
+				enableDeclineButton={true}
+				onAccept={handleAccept}
+				onDecline={handleDecline}
+				containerClasses={containerClasses}
+				buttonClasses={acceptButtonClasses}
+				buttonWrapperClasses={buttonWrapperClasses}
+				declineButtonClasses={declineButtonClasses}
+				extraCookieOptions={extraCookieOptions}
+				disableStyles={true}
+				ariaAcceptLabel={`Accept`}
+				ariaDeclineLabel={`Decline`}>
+				<div className="flex items-center gap-2">
+					<Cookie className="size-5 hidden md:block" />
+					<span>Like most of the internet, we use cookies. Are you OK with that?</span>
+				</div>
+			</ReactCookieConsent>
+		</div>
+	)
 }

apps/web-roo-code/src/components/CookieConsentWrapper.tsx

@@ -1,39 +1,24 @@
 /**
- * Consent Manager - Handles cookie consent state for analytics
- * Works with react-cookie-consent library
+ * Simple consent event system
+ * Dispatches events when cookie consent changes
  */
 
+import { getCookieConsentValue } from "react-cookie-consent"
 import { CONSENT_COOKIE_NAME } from "../constants"
 
-/**
- * Event name for consent changes
- */
 export const CONSENT_EVENT = "cookieConsentChanged"
 
 /**
  * Check if user has given consent for analytics cookies
+ * Uses react-cookie-consent's built-in function
  */
 export function hasConsent(): boolean {
-	// Only check on client side
-	if (typeof window === "undefined") {
-		return false
-	}
-
-	// Check if the consent cookie exists and has value "true"
-	const cookies = document.cookie.split(";")
-	for (const cookie of cookies) {
-		const [name, value] = cookie.trim().split("=")
-		if (name === CONSENT_COOKIE_NAME && value === "true") {
-			return true
-		}
-	}
-
-	return false
+	if (typeof window === "undefined") return false
+	return getCookieConsentValue(CONSENT_COOKIE_NAME) === "true"
 }
 
 /**
  * Dispatch a consent change event
- * This is used to notify providers when consent status changes
  */
 export function dispatchConsentEvent(consented: boolean): void {
 	if (typeof window !== "undefined") {

apps/web-roo-code/src/lib/analytics/consent-manager.ts

@@ -31,26 +31,5 @@ export const INTERNAL_LINKS = {
 	PRIVACY_POLICY_WEBSITE: "/privacy",
 }
 
-import { getDomain } from "tldts"
-
 // Cookie consent settings
 export const CONSENT_COOKIE_NAME = "roo-code-cookie-consent"
-
-/**
- * Get the appropriate domain for cookie consent
- * Uses tldts to extract the domain from the current hostname
- * Falls back to environment variable or roocode.com
- * Never returns null/undefined - always returns a valid domain string
- */
-export function getConsentCookieDomain(): string {
-	if (typeof window === "undefined") {
-		// Server-side fallback
-		return process.env.CONSENT_COOKIE_DOMAIN || "roocode.com"
-	}
-
-	// Extract the domain using tldts - this can return null for invalid hostnames
-	const domain = getDomain(window.location.hostname)
-
-	// Always return a valid string, never null/undefined
-	return domain || process.env.CONSENT_COOKIE_DOMAIN || "roocode.com"
-}