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};
+`;

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

@@ -0,0 +1,16 @@
+import React from "react";
+import { render } from "@testing-library/react";
+import cookie from "js-cookie";
+import CookieConsent from "../CookieConsent";
+
+describe("<CookieConsent />", () => {
+  it("should render", () => {
+    const { container } = render(<CookieConsent />);
+    expect(container).toMatchSnapshot();
+  });
+  it("should not render if cookie exist", () => {
+    cookie.get = jest.fn().mockImplementation(() => true);
+    const { container } = render(<CookieConsent />);
+    expect(container).toMatchSnapshot();
+  });
+});

packages/code-du-travail-frontend/src/common/__tests__/__snapshots__/CookieConsent.test.js.snap

@@ -0,0 +1,211 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<CookieConsent /> should not render if cookie exist 1`] = `<div />`;
+
+exports[`<CookieConsent /> should render 1`] = `
+.c6 {
+  display: inline-block;
+  padding: 0.625rem 1.5rem;
+  font-weight: 600;
+  font-size: 1rem;
+  line-height: inherit;
+  text-align: center;
+  vertical-align: middle;
+  border: 1px solid;
+  border-radius: 1.5rem;
+  cursor: pointer;
+  -webkit-transition: background-color 250ms ease;
+  transition: background-color 250ms ease;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  padding: 1rem;
+  color: #434956;
+  line-height: 0;
+  background-color: transparent;
+  border: none;
+}
+
+.c6:hover {
+  color: #8c94a6;
+}
+
+.c1 {
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+  -ms-flex-pack: justify;
+  justify-content: space-between;
+  box-sizing: border-box;
+  width: 100%;
+  min-height: 48px;
+  color: #434956;
+  background-color: #fff;
+  border-color: #e5f1fe;
+  border-style: solid;
+  border-width: 1px;
+  border-radius: 0.25rem;
+  box-shadow: 0 5px 10px 0 #ebeff3;
+  -webkit-animation: iowhYu 300ms ease-out;
+  animation: iowhYu 300ms ease-out;
+}
+
+.c2 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-flex: 0;
+  -webkit-flex-grow: 0;
+  -ms-flex-positive: 0;
+  flex-grow: 0;
+  -webkit-align-items: flex-start;
+  -webkit-box-align: flex-start;
+  -ms-flex-align: flex-start;
+  align-items: flex-start;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  padding: 1rem;
+  background-color: #e5f1fe;
+}
+
+.c3 {
+  -webkit-box-flex: 1;
+  -webkit-flex-grow: 1;
+  -ms-flex-positive: 1;
+  flex-grow: 1;
+  -webkit-align-self: center;
+  -ms-flex-item-align: center;
+  align-self: center;
+  padding: 1rem;
+  color: #434956;
+  text-align: left;
+}
+
+.c5 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-flex: 0;
+  -webkit-flex-grow: 0;
+  -ms-flex-positive: 0;
+  flex-grow: 0;
+  -webkit-align-items: flex-start;
+  -webkit-box-align: flex-start;
+  -ms-flex-align: flex-start;
+  align-items: flex-start;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+}
+
+.c0 {
+  position: fixed;
+  bottom: 0;
+  padding: 1rem;
+  width: 100%;
+  z-index: 1000;
+}
+
+.c4 {
+  padding: 0 0.25rem;
+}
+
+<div>
+  <div
+    class="c0"
+  >
+    <div
+      class="c1"
+    >
+      <div
+        class="c2"
+      >
+        <svg
+          fill="none"
+          height="24"
+          stroke="currentColor"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          stroke-width="2"
+          viewBox="0 0 24 24"
+          width="24"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <circle
+            cx="12"
+            cy="12"
+            r="10"
+          />
+          <line
+            x1="12"
+            x2="12"
+            y1="16"
+            y2="12"
+          />
+          <line
+            x1="12"
+            x2="12"
+            y1="8"
+            y2="8"
+          />
+        </svg>
+      </div>
+      <div
+        class="c3"
+        role="alert"
+      >
+        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
+          class="c4"
+          href="http://master.code-du-travail-numerique.dev.factory.social.gouv.fr/mentions-legales"
+          rel="noopener noreferrer"
+          title="Mentions legales"
+        >
+          En savoir plus
+        </a>
+      </div>
+      <div
+        class="c5"
+      >
+        <button
+          aria-label="Fermer"
+          class="c6"
+        >
+          <svg
+            fill="none"
+            height="24"
+            stroke="currentColor"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="2"
+            viewBox="0 0 24 24"
+            width="24"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <line
+              x1="18"
+              x2="6"
+              y1="6"
+              y2="18"
+            />
+            <line
+              x1="6"
+              x2="18"
+              y1="6"
+              y2="18"
+            />
+          </svg>
+        </button>
+      </div>
+    </div>
+  </div>
+</div>
+`;

yarn.lock

@@ -2315,10 +2315,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"
@@ -10008,6 +10008,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"