feat(frontend):Added cookie consent toast to all pages

packages/code-du-travail-frontend/package.json

@@ -36,6 +36,7 @@
     "final-form-arrays": "^3.0.1",
     "final-form-calculate": "^1.3.1",
     "isomorphic-unfetch": "^3.0.0",
+    "js-cookie": "2.2.1",
     "mdx-runtime-slim": "^1.4.5",
     "memoizee": "^0.4.14",
     "next": "^9.1.1",

packages/code-du-travail-frontend/pages/_app.js

@@ -7,6 +7,8 @@ import * as Sentry from "@sentry/browser";
 import { theme } from "@socialgouv/react-ui";
 import ErrorPage from "./_error";
 
+import CookieConsent from "../src/common/CookieConsent";
+
 import { initPiwik } from "../src/piwik";
 import { initializeSentry } from "../src/sentry";
 
@@ -74,6 +76,7 @@ export default class MyApp extends App {
       <ThemeProvider theme={theme.colors}>
         <GlobalStyles />
         <Component {...pageProps} />
+        <CookieConsent />
       </ThemeProvider>
     );
   }

packages/code-du-travail-frontend/src/common/CookieConsent.js

@@ -0,0 +1,56 @@
+import React, { useState, useEffect, useCallback } from "react";
+import styled from "styled-components";
+import cookie from "js-cookie";
+import { Toast, theme } from "@socialgouv/react-ui";
+
+const CookieConsent = () => {
+  const [isCookieConsentHidden, setCookieConsentHidden] = useState(true);
+  useEffect(() => {
+    setCookieConsentHidden(cookie.get("cookieConsent"));
+  }, []);
+  const onToastRemove = useCallback(() => {
+    setCookieConsentHidden(true);
+    cookie.set("cookieConsent", true, { expires: 365 });
+  }, []);
+
+  if (isCookieConsentHidden) return null;
+
+  return (
+    <Wrapper>
+      <Toast
+        variant="info"
+        wide
+        shadow
+        animate="from-bottom"
+        onRemove={onToastRemove}
+      >
+        En poursuivant votre navigation sur ce site, vous acceptez l’utilisation
+        de cookies pour établir des mesures de fréquentation et d’utilisation du
+        site.
+        <A
+          title="Mentions legales"
+          rel="noopener noreferrer"
+          href="http://master.code-du-travail-numerique.dev.factory.social.gouv.fr/mentions-legales"
+        >
+          En savoir plus
+        </A>
+      </Toast>
+    </Wrapper>
+  );
+};
+
+export default CookieConsent;
+
+const { spacing } = theme;
+
+const Wrapper = styled.div`
+  position: fixed;
+  bottom: 0;
+  padding: ${spacing.base};
+  width: 100%;
+  z-index: 1000;
+`;
+
+const A = styled.a`
+  padding: 0 ${spacing.tiny};
+`;

yarn.lock

@@ -2335,10 +2335,10 @@
     eslint-plugin-jest "^22.20.0"
     eslint-plugin-prettier "~3.1.1"
 
-"@socialgouv/[email protected].7":
-  version "1.0.7"
-  resolved "https://registry.yarnpkg.com/@socialgouv/fiches-vdd/-/fiches-vdd-1.0.7.tgz#7f78951c4c79c52069b01e6c7ac06905fc0863fa"
-  integrity sha512-MixzCz5oXg1jZvYz+teoJlrzl2sWy662kUtAEUZtzYEsy4HqmZNLzIpgQ53r0KROK11vnOqnpvkCy39YYdE2kA==
+"@socialgouv/[email protected].12":
+  version "1.0.12"
+  resolved "https://registry.yarnpkg.com/@socialgouv/fiches-vdd/-/fiches-vdd-1.0.12.tgz#0608996809d044d3161ec70733e5aaf70c816bc4"
+  integrity sha512-E2B5MIlBkYTfhimlRxDkQlLF9HfvsweWYRV+nTJB3b82vDFYR5jHR53URWzfSJjtyqUXRyEGR5j0rJRk7/BT+w==
   dependencies:
     node-fetch "^2.6.0"
     ora "^4.0.0"
@@ -10028,6 +10028,11 @@ jest@^24.9.0:
     import-local "^2.0.0"
     jest-cli "^24.9.0"
 
+[email protected]:
+  version "2.2.1"
+  resolved "https://registry.yarnpkg.com/js-cookie/-/js-cookie-2.2.1.tgz#69e106dc5d5806894562902aa5baec3744e9b2b8"
+  integrity sha512-HvdH2LzI/EAZcUwA8+0nKNtWHqS+ZmijLA30RwZA0bo7ToCckjK5MkGhjED9KoRcXO6BaGI3I9UIzSA1FKFPOQ==
+
 js-levenshtein@^1.1.3:
   version "1.1.6"
   resolved "https://registry.yarnpkg.com/js-levenshtein/-/js-levenshtein-1.1.6.tgz#c6cee58eb3550372df8deb85fad5ce66ce01d59d"