Merge branch '548-add-cookie-consent-bar' into 'dev'

Resolve "Add Cookie Consent Bar"

Closes #548

See merge request natural-solutions/ecoteka!347

docker-compose.yml

@@ -141,6 +141,7 @@ services:
       - MEILI_MASTER_KEY=${NS_ECOTEKA_MEILISEARCH_MASTER_KEY}
       - MAPILLARY_API_CLIENT=${NS_ECOTEKA_FRONTEND_MAPILLARY_API_CLIENT}
       - GOOGLE_ANALYTICS=${NS_ECOTEKA_FRONTEND_GOOGLE_ANALYTICS}
+      - COOKIE_CONSENT=${NS_ECOTEKA_FRONTEND_COOKIE_CONSENT}
 
   landing_page:
     image: ${NS_ECOTEKA_LANDING_PAGE_IMAGE}

frontend/components/AppLayout/Base.tsx

@@ -7,6 +7,7 @@ import { NoSsr } from "@material-ui/core";
 import { AbilityContext } from "@/components/Can";
 import { buildAbilityFor } from "@/abilities/genericOrganizationAbility";
 import { useAppContext } from "@/providers/AppContext";
+import CookieConsent from "react-cookie-consent";
 
 const AppLayout = createContext(null);
 
@@ -27,6 +28,27 @@ const AppLayoutBase: FC = ({ children }) => {
           {children}
           <Dialog ref={dialog} />
           <Snackbars ref={snackbar} />
+          <CookieConsent
+            enableDeclineButton
+            location="bottom"
+            buttonText={t("components.CookieConsent.buttonText")}
+            declineButtonText={t("components.CookieConsent.declineButtonText")}
+            cookieName="etk-cookie-consent"
+            style={{ background: "#384145" }}
+            buttonStyle={{
+              color: "#fff",
+              background: "#000",
+              fontSize: "13px",
+            }}
+            declinebuttonStyle={{
+              color: "#000",
+              background: "#fff",
+              fontSize: "13px",
+            }}
+            expires={150}
+          >
+            {t("components.CookieConsent.modalText")}
+          </CookieConsent>
         </NoSsr>
       </AppLayout.Provider>
     </AbilityContext.Provider>

frontend/components/NewsletterButton.tsx

@@ -2,11 +2,13 @@ import { FC } from "react";
 import { Button, Dialog, DialogContent } from "@material-ui/core";
 import { useState } from "react";
 import Head from "next/head";
+import { useTranslation } from "react-i18next";
 
 export interface NewsletterButtonProps {}
 
 const NewsletterButton: FC<NewsletterButtonProps> = ({}) => {
   const [isDialogOpen, setIsDialogOpen] = useState<boolean>(false);
+  const { t } = useTranslation();
 
   const handleFormNewsletter = () => {
     setIsDialogOpen(true);
@@ -39,7 +41,7 @@ const NewsletterButton: FC<NewsletterButtonProps> = ({}) => {
         </DialogContent>
       </Dialog>
       <Button color="primary" variant="outlined" onClick={handleFormNewsletter}>
-        {"s\u0027inscrire a la newsletter"}
+        {t("components.LayoutFooter.newsletterButton")}
       </Button>
     </>
   );

frontend/lib/ga.ts

@@ -1,11 +1,37 @@
+export function getCookie(cookieName) {
+  const name = cookieName + "=";
+  const decoded = decodeURIComponent(document.cookie);
+  const parts = decoded.split("; ");
+
+  let response;
+
+  parts.forEach((val) => {
+    if (val.indexOf(name) === 0) response = val.substring(name.length);
+  });
+
+  return response;
+}
+
 // log the pageview with their URL
 export const pageview = (url) => {
-  window.gtag("config", process.env.GOOGLE_ANALYTICS, {
-    page_path: url,
-  });
+  if (typeof window === "undefined") {
+    return;
+  }
+
+  if (getCookie("etk-cookie-consent") === "true") {
+    window.gtag("config", process.env.GOOGLE_ANALYTICS, {
+      page_path: url,
+    });
+  }
 };
 
 // log specific events happening.
 export const event = ({ action, params }) => {
-  window.gtag("event", action, params);
+  if (typeof window === "undefined") {
+    return;
+  }
+
+  if (getCookie("etk-cookie-consent") === "true") {
+    window.gtag("event", action, params);
+  }
 };

frontend/next.config.js

@@ -6,6 +6,7 @@ const envVars = {
   MEILI_MASTER_KEY: "%meili_master_key%",
   MAPILLARY_API_CLIENT: "%mapillary_api_client%",
   GOOGLE_ANALYTICS: "%google_analytics%",
+  COOKIE_CONSENT: "%cookie_consent%",
 };
 
 const excludeEnvVars = ["ASSET_PREFIX"];