feat: ajout du consentement

mission-apprentissage · Sep 18, 2024 · 26b2d41 · 26b2d41
1 parent cb0e0a0
commit 26b2d41
Show file tree

Hide file tree

Showing 5 changed files with 48 additions and 9 deletions.
diff --git a/ui/app/components/ConsentManagement.tsx b/ui/app/components/ConsentManagement.tsx
@@ -0,0 +1,21 @@
+"use client";
+
+import { createConsentManagement } from "@codegouvfr/react-dsfr/consentManagement";
+
+export const {
+  ConsentBannerAndConsentManagement,
+  FooterConsentManagementItem,
+  FooterPersonalDataPolicyItem,
+  useConsent,
+} = createConsentManagement({
+  finalityDescription: ({ lang }) => ({
+    analytics: {
+      title: "Analyse",
+      description: "Nous utilisons des cookies pour mesurer l’audience de notre site et améliorer son contenu.",
+    },
+    personalization: {
+      title: "Personnalisation",
+      description: "Nous utilisons des cookies pour vous proposer des contenus adaptés à vos centres d’intérêts.",
+    },
+  }),
+});
diff --git a/ui/app/components/LogRocketInitializer.tsx b/ui/app/components/LogRocketInitializer.tsx
@@ -1,10 +1,14 @@
 "use client";
 import { useEffect } from "react";
 import LogRocket from "logrocket";
+import { useConsent } from "./ConsentManagement";
 
 export function LogRocketInitializer() {
+  const { finalityConsent } = useConsent();
+
   useEffect(() => {
-    process.env.NEXT_PUBLIC_LOGROCKET &&
+    finalityConsent?.analytics &&
+      process.env.NEXT_PUBLIC_LOGROCKET &&
       LogRocket.init(process.env.NEXT_PUBLIC_LOGROCKET, {
         network: {
           requestSanitizer: (request) => {
@@ -34,6 +38,6 @@ export function LogRocketInitializer() {
           },
         },
       });
-  });
+  }, [finalityConsent]);
   return null;
 }
diff --git a/ui/app/components/Plausible.tsx b/ui/app/components/Plausible.tsx
@@ -0,0 +1,17 @@
+"use client";
+import PlausibleProvider from "next-plausible";
+import { useConsent } from "./ConsentManagement";
+
+export function Plausible() {
+  const { finalityConsent } = useConsent();
+
+  return (
+    finalityConsent?.analytics && (
+      <PlausibleProvider
+        domain={process.env.NEXT_PUBLIC_DOMAIN || ""}
+        trackOutboundLinks={true}
+        taggedEvents={true}
+      ></PlausibleProvider>
+    )
+  );
+}
diff --git a/ui/app/components/RootLayout.tsx b/ui/app/components/RootLayout.tsx
@@ -3,12 +3,11 @@ import { getHtmlAttributes } from "@codegouvfr/react-dsfr/next-appdir/getHtmlAtt
 import StartDsfr from "#/app/StartDsfr";
 import { defaultColorScheme } from "#/app/defaultColorScheme";
 import Link from "next/link";
-import PlausibleProvider from "next-plausible";
 import { LogRocketInitializer } from "./LogRocketInitializer";
+import { Plausible } from "./Plausible";
 
 export default function RootLayout({ title, children }: { title?: string; children: JSX.Element }) {
   const lang = "fr";
-
   return (
     <html
       {...getHtmlAttributes({ defaultColorScheme, lang })}
@@ -39,11 +38,7 @@ export default function RootLayout({ title, children }: { title?: string; childr
             // //"Spectral-ExtraBold"
           ]}
         />
-        <PlausibleProvider
-          domain={process.env.NEXT_PUBLIC_DOMAIN || ""}
-          trackOutboundLinks={true}
-          taggedEvents={true}
-        ></PlausibleProvider>
+        <Plausible />
         <LogRocketInitializer />
       </head>
       <body

diff --git a/ui/app/layout.tsx b/ui/app/layout.tsx
@@ -6,6 +6,7 @@ import "./(accompagnateur)/style.scss";
 import Title from "./(accompagnateur)/components/Title";
 import Footer from "./components/Footer";
 import Link from "./components/Link";
+import { ConsentBannerAndConsentManagement } from "./components/ConsentManagement";
 
 export default function MainLayout({ children }: { children: JSX.Element }) {
   return (
@@ -15,6 +16,7 @@ export default function MainLayout({ children }: { children: JSX.Element }) {
         <Layout header={<Header title={title} tagline={tagline} />} title={title}>
           <>
             {children}
+            <ConsentBannerAndConsentManagement />
             <Footer
               brandTop={
                 <>