From 78009ff3b05d703a878eb3baec10458cc092aec1 Mon Sep 17 00:00:00 2001
From: jessy-david-dev <ultralionfr@gmail.com>
Date: Tue, 27 Jan 2026 17:59:13 +0100
Subject: [PATCH] feat(cookies): add GDPR-compliant cookie consent banner

---
 component/ui/CookieBanner.tsx | 294 ++++++++++++++++++++++++++++++++++
 1 file changed, 294 insertions(+)
 create mode 100644 component/ui/CookieBanner.tsx

diff --git a/component/ui/CookieBanner.tsx b/component/ui/CookieBanner.tsx
new file mode 100644
index 0000000..b338e13
--- /dev/null
+++ b/component/ui/CookieBanner.tsx
@@ -0,0 +1,294 @@
+"use client";
+
+import { motion, AnimatePresence } from "framer-motion";
+import { Cookie, X, Check, Settings } from "lucide-react";
+import Link from "next/link";
+import { useState, useEffect } from "react";
+
+type CookiePreferences = {
+  necessary: boolean;
+  analytics: boolean;
+};
+
+const COOKIE_CONSENT_KEY = "cookie-consent";
+const COOKIE_PREFERENCES_KEY = "cookie-preferences";
+
+function getInitialPreferences(): CookiePreferences {
+  if (typeof window === "undefined") {
+    return { necessary: true, analytics: false };
+  }
+  const savedPreferences = localStorage.getItem(COOKIE_PREFERENCES_KEY);
+  if (savedPreferences) {
+    try {
+      return JSON.parse(savedPreferences);
+    } catch {
+      return { necessary: true, analytics: false };
+    }
+  }
+  return { necessary: true, analytics: false };
+}
+
+export default function CookieBanner() {
+  const [showBanner, setShowBanner] = useState(false);
+  const [showSettings, setShowSettings] = useState(false);
+  const [preferences, setPreferences] = useState<CookiePreferences>(
+    getInitialPreferences,
+  );
+
+  useEffect(() => {
+    // Vérifier si l'utilisateur a déjà donné son consentement
+    const consent = localStorage.getItem(COOKIE_CONSENT_KEY);
+    if (!consent) {
+      // Délai pour ne pas afficher immédiatement au chargement
+      const timer = setTimeout(() => setShowBanner(true), 1000);
+      return () => clearTimeout(timer);
+    } else {
+      // Appliquer les préférences sauvegardées au chargement
+      const savedPreferences = localStorage.getItem(COOKIE_PREFERENCES_KEY);
+      if (savedPreferences) {
+        try {
+          const prefs = JSON.parse(savedPreferences);
+          if (prefs.analytics) {
+            // @ts-expect-error - gtag n'est pas typé
+            window.gtag?.("consent", "update", {
+              analytics_storage: "granted",
+            });
+          }
+        } catch {
+          // Ignorer les erreurs de parsing
+        }
+      }
+    }
+  }, []);
+
+  const handleAcceptAll = () => {
+    const newPreferences = { necessary: true, analytics: true };
+    saveConsent(newPreferences);
+  };
+
+  const handleRejectAll = () => {
+    const newPreferences = { necessary: true, analytics: false };
+    saveConsent(newPreferences);
+  };
+
+  const handleSavePreferences = () => {
+    saveConsent(preferences);
+  };
+
+  const saveConsent = (prefs: CookiePreferences) => {
+    localStorage.setItem(COOKIE_CONSENT_KEY, "true");
+    localStorage.setItem(COOKIE_PREFERENCES_KEY, JSON.stringify(prefs));
+    setPreferences(prefs);
+    setShowBanner(false);
+    setShowSettings(false);
+
+    // Activer/désactiver Google Analytics selon le consentement
+    if (prefs.analytics) {
+      enableAnalytics();
+    } else {
+      disableAnalytics();
+    }
+  };
+
+  const enableAnalytics = () => {
+    // Active Google Analytics via GTM Consent Mode
+    if (typeof window !== "undefined") {
+      // @ts-expect-error - gtag n'est pas typé
+      window.gtag?.("consent", "update", {
+        analytics_storage: "granted",
+      });
+      // Envoyer un événement pour GTM
+      // @ts-expect-error - dataLayer n'est pas typé
+      window.dataLayer?.push({ event: "cookie_consent_analytics" });
+    }
+  };
+
+  const disableAnalytics = () => {
+    // Désactive Google Analytics via GTM Consent Mode
+    if (typeof window !== "undefined") {
+      // @ts-expect-error - gtag n'est pas typé
+      window.gtag?.("consent", "update", {
+        analytics_storage: "denied",
+      });
+    }
+  };
+
+  // Fonction pour rouvrir la bannière (appelable depuis le footer)
+  useEffect(() => {
+    const handleOpenCookieSettings = () => {
+      setShowBanner(true);
+      setShowSettings(true);
+    };
+
+    window.addEventListener("openCookieSettings", handleOpenCookieSettings);
+    return () =>
+      window.removeEventListener(
+        "openCookieSettings",
+        handleOpenCookieSettings,
+      );
+  }, []);
+
+  return (
+    <AnimatePresence>
+      {showBanner && (
+        <motion.div
+          initial={{ y: 100, opacity: 0 }}
+          animate={{ y: 0, opacity: 1 }}
+          exit={{ y: 100, opacity: 0 }}
+          transition={{ type: "spring", damping: 25, stiffness: 200 }}
+          className="fixed bottom-0 left-0 right-0 z-50 p-4 md:p-6"
+        >
+          <div className="container mx-auto max-w-4xl">
+            <div className="bg-slate-800/95 backdrop-blur-xl border border-slate-700 rounded-2xl shadow-2xl shadow-black/20 overflow-hidden">
+              {/* Header */}
+              <div className="flex items-center justify-between p-4 md:p-6 border-b border-slate-700">
+                <div className="flex items-center gap-3">
+                  <div className="p-2 bg-blue-500/20 rounded-lg">
+                    <Cookie className="w-5 h-5 text-blue-400" />
+                  </div>
+                  <h3 className="text-lg font-bold text-white">
+                    Gestion des cookies
+                  </h3>
+                </div>
+                <button
+                  onClick={() => setShowBanner(false)}
+                  className="p-2 text-slate-400 hover:text-white transition-colors rounded-lg hover:bg-slate-700"
+                  aria-label="Fermer"
+                >
+                  <X className="w-5 h-5" />
+                </button>
+              </div>
+
+              {/* Content */}
+              <div className="p-4 md:p-6">
+                {!showSettings ? (
+                  <>
+                    <p className="text-slate-300 mb-6">
+                      Ce site utilise des cookies pour améliorer votre
+                      expérience. Les cookies nécessaires sont essentiels au bon
+                      fonctionnement du site. Vous pouvez choisir
+                      d&apos;accepter ou de refuser les cookies analytiques.{" "}
+                      <Link
+                        href="/politique-de-confidentialite"
+                        className="text-blue-400 hover:text-blue-300 transition-colors underline"
+                      >
+                        En savoir plus
+                      </Link>
+                    </p>
+
+                    {/* Boutons */}
+                    <div className="flex flex-col sm:flex-row gap-3">
+                      <button
+                        onClick={handleRejectAll}
+                        className="flex-1 px-6 py-3 bg-slate-700 hover:bg-slate-600 text-white font-semibold rounded-xl transition-colors"
+                      >
+                        Refuser tout
+                      </button>
+                      <button
+                        onClick={() => setShowSettings(true)}
+                        className="flex-1 px-6 py-3 bg-slate-700 hover:bg-slate-600 text-white font-semibold rounded-xl transition-colors flex items-center justify-center gap-2"
+                      >
+                        <Settings className="w-4 h-4" />
+                        Personnaliser
+                      </button>
+                      <button
+                        onClick={handleAcceptAll}
+                        className="flex-1 px-6 py-3 bg-linear-to-r from-blue-600 to-purple-600 hover:from-blue-500 hover:to-purple-500 text-white font-semibold rounded-xl transition-all"
+                      >
+                        Accepter tout
+                      </button>
+                    </div>
+                  </>
+                ) : (
+                  <>
+                    <p className="text-slate-300 mb-6">
+                      Personnalisez vos préférences de cookies ci-dessous.
+                    </p>
+
+                    {/* Options de cookies */}
+                    <div className="space-y-4 mb-6">
+                      {/* Cookies nécessaires */}
+                      <div className="flex items-center justify-between p-4 bg-slate-900/50 rounded-xl">
+                        <div className="flex-1">
+                          <h4 className="font-semibold text-white mb-1">
+                            Cookies nécessaires
+                          </h4>
+                          <p className="text-sm text-slate-400">
+                            Essentiels au fonctionnement du site (session,
+                            sécurité, préférences).
+                          </p>
+                        </div>
+                        <div className="ml-4">
+                          <div className="w-12 h-6 bg-blue-600 rounded-full flex items-center justify-end px-1 cursor-not-allowed">
+                            <div className="w-4 h-4 bg-white rounded-full flex items-center justify-center">
+                              <Check className="w-3 h-3 text-blue-600" />
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+
+                      {/* Cookies analytiques */}
+                      <div className="flex items-center justify-between p-4 bg-slate-900/50 rounded-xl">
+                        <div className="flex-1">
+                          <h4 className="font-semibold text-white mb-1">
+                            Cookies analytiques
+                          </h4>
+                          <p className="text-sm text-slate-400">
+                            Google Analytics pour comprendre comment vous
+                            utilisez ce site.
+                          </p>
+                        </div>
+                        <div className="ml-4">
+                          <button
+                            onClick={() =>
+                              setPreferences((prev) => ({
+                                ...prev,
+                                analytics: !prev.analytics,
+                              }))
+                            }
+                            className={`w-12 h-6 rounded-full flex items-center px-1 transition-colors ${
+                              preferences.analytics
+                                ? "bg-blue-600 justify-end"
+                                : "bg-slate-600 justify-start"
+                            }`}
+                            aria-label={
+                              preferences.analytics
+                                ? "Désactiver les cookies analytiques"
+                                : "Activer les cookies analytiques"
+                            }
+                          >
+                            <div className="w-4 h-4 bg-white rounded-full flex items-center justify-center">
+                              {preferences.analytics && (
+                                <Check className="w-3 h-3 text-blue-600" />
+                              )}
+                            </div>
+                          </button>
+                        </div>
+                      </div>
+                    </div>
+
+                    {/* Boutons */}
+                    <div className="flex flex-col sm:flex-row gap-3">
+                      <button
+                        onClick={() => setShowSettings(false)}
+                        className="flex-1 px-6 py-3 bg-slate-700 hover:bg-slate-600 text-white font-semibold rounded-xl transition-colors"
+                      >
+                        Retour
+                      </button>
+                      <button
+                        onClick={handleSavePreferences}
+                        className="flex-1 px-6 py-3 bg-linear-to-r from-blue-600 to-purple-600 hover:from-blue-500 hover:to-purple-500 text-white font-semibold rounded-xl transition-all"
+                      >
+                        Sauvegarder mes choix
+                      </button>
+                    </div>
+                  </>
+                )}
+              </div>
+            </div>
+          </div>
+        </motion.div>
+      )}
+    </AnimatePresence>
+  );
+}