feat: amélioration du bandeau pour le questionnaire (#6117)

SocialGouv · Sep 11, 2024 · 34830c0 · 34830c0
1 parent 5656de1
commit 34830c0
Show file tree

Hide file tree

Showing 12 changed files with 117 additions and 43 deletions.
diff --git a/packages/code-du-travail-frontend/__tests__/__snapshots__/a-propos.test.tsx.snap b/packages/code-du-travail-frontend/__tests__/__snapshots__/a-propos.test.tsx.snap
@@ -174,7 +174,7 @@ exports[`<About /> should render 1`] = `
         class="sc-bddgXz koXLlw"
       >
         <span
-          class="sc-jdUcAg jEULqB"
+          class="sc-jdUcAg jKgGxC"
         >
           <svg
             class="sc-eIcdZJ ffrCUe"
@@ -206,12 +206,17 @@ exports[`<About /> should render 1`] = `
               y2="16"
             />
           </svg>
-          Votre avis compte ! Aidez-nous à nous améliorer.
+          Aidez-nous à améliorer le Code du travail numérique.
           <a
+            class="no-after"
             href="https://tally.so/r/3jLRW1"
             target="_blank"
           >
-            Répondre
+            <button
+              class="sc-kOPcWz jBdtLF"
+            >
+              Je donne mon avis
+            </button>
           </a>
         </span>
         <button

diff --git a/packages/code-du-travail-frontend/__tests__/__snapshots__/droit-du-travail.test.js.snap b/packages/code-du-travail-frontend/__tests__/__snapshots__/droit-du-travail.test.js.snap
@@ -174,7 +174,7 @@ exports[`<DroitDuTravail /> should render 1`] = `
         class="sc-epqpcT khryBk"
       >
         <span
-          class="sc-BQMaI OPPgB"
+          class="sc-BQMaI cUKlXC"
         >
           <svg
             class="sc-dwalKd bKNSlA"
@@ -206,12 +206,17 @@ exports[`<DroitDuTravail /> should render 1`] = `
               y2="16"
             />
           </svg>
-          Votre avis compte ! Aidez-nous à nous améliorer.
+          Aidez-nous à améliorer le Code du travail numérique.
           <a
+            class="no-after"
             href="https://tally.so/r/3jLRW1"
             target="_blank"
           >
-            Répondre
+            <button
+              class="sc-kOPcWz jBdtLF"
+            >
+              Je donne mon avis
+            </button>
           </a>
         </span>
         <button

diff --git a/...es/code-du-travail-frontend/__tests__/__snapshots__/fiche-ministere-travail.test.tsx.snap b/...es/code-du-travail-frontend/__tests__/__snapshots__/fiche-ministere-travail.test.tsx.snap
@@ -174,7 +174,7 @@ exports[`<FicheMT /> should render 1`] = `
         class="sc-epRvzc kODNCn"
       >
         <span
-          class="sc-djVXDX bXMYkb"
+          class="sc-djVXDX hCxnoI"
         >
           <svg
             class="sc-ggqIjW NzCUk"
@@ -206,12 +206,17 @@ exports[`<FicheMT /> should render 1`] = `
               y2="16"
             />
           </svg>
-          Votre avis compte ! Aidez-nous à nous améliorer.
+          Aidez-nous à améliorer le Code du travail numérique.
           <a
+            class="no-after"
             href="https://tally.so/r/3jLRW1"
             target="_blank"
           >
-            Répondre
+            <button
+              class="sc-kOPcWz jBdtLF"
+            >
+              Je donne mon avis
+            </button>
           </a>
         </span>
         <button

diff --git a/packages/code-du-travail-frontend/__tests__/__snapshots__/glossaire-[slug].test.tsx.snap b/packages/code-du-travail-frontend/__tests__/__snapshots__/glossaire-[slug].test.tsx.snap
@@ -174,7 +174,7 @@ exports[`<Term /> should render 1`] = `
         class="sc-bddgXz koXLlw"
       >
         <span
-          class="sc-jdUcAg jEULqB"
+          class="sc-jdUcAg jKgGxC"
         >
           <svg
             class="sc-eIcdZJ ffrCUe"
@@ -206,12 +206,17 @@ exports[`<Term /> should render 1`] = `
               y2="16"
             />
           </svg>
-          Votre avis compte ! Aidez-nous à nous améliorer.
+          Aidez-nous à améliorer le Code du travail numérique.
           <a
+            class="no-after"
             href="https://tally.so/r/3jLRW1"
             target="_blank"
           >
-            Répondre
+            <button
+              class="sc-kOPcWz jBdtLF"
+            >
+              Je donne mon avis
+            </button>
           </a>
         </span>
         <button

diff --git a/packages/code-du-travail-frontend/__tests__/__snapshots__/glossaire.test.tsx.snap b/packages/code-du-travail-frontend/__tests__/__snapshots__/glossaire.test.tsx.snap
@@ -174,7 +174,7 @@ exports[`<Glossaire /> should render 1`] = `
         class="sc-bddgXz koXLlw"
       >
         <span
-          class="sc-jdUcAg jEULqB"
+          class="sc-jdUcAg jKgGxC"
         >
           <svg
             class="sc-eIcdZJ ffrCUe"
@@ -206,12 +206,17 @@ exports[`<Glossaire /> should render 1`] = `
               y2="16"
             />
           </svg>
-          Votre avis compte ! Aidez-nous à nous améliorer.
+          Aidez-nous à améliorer le Code du travail numérique.
           <a
+            class="no-after"
             href="https://tally.so/r/3jLRW1"
             target="_blank"
           >
-            Répondre
+            <button
+              class="sc-kOPcWz jBdtLF"
+            >
+              Je donne mon avis
+            </button>
           </a>
         </span>
         <button

diff --git a/packages/code-du-travail-frontend/__tests__/__snapshots__/mentions-legales.test.tsx.snap b/packages/code-du-travail-frontend/__tests__/__snapshots__/mentions-legales.test.tsx.snap
@@ -174,7 +174,7 @@ exports[`<MentionLegales /> should render 1`] = `
         class="sc-bddgXz koXLlw"
       >
         <span
-          class="sc-jdUcAg jEULqB"
+          class="sc-jdUcAg jKgGxC"
         >
           <svg
             class="sc-eIcdZJ ffrCUe"
@@ -206,12 +206,17 @@ exports[`<MentionLegales /> should render 1`] = `
               y2="16"
             />
           </svg>
-          Votre avis compte ! Aidez-nous à nous améliorer.
+          Aidez-nous à améliorer le Code du travail numérique.
           <a
+            class="no-after"
             href="https://tally.so/r/3jLRW1"
             target="_blank"
           >
-            Répondre
+            <button
+              class="sc-kOPcWz jBdtLF"
+            >
+              Je donne mon avis
+            </button>
           </a>
         </span>
         <button

diff --git a/...ode-du-travail-frontend/__tests__/__snapshots__/modeles-de-courriers-[slug].test.tsx.snap b/...ode-du-travail-frontend/__tests__/__snapshots__/modeles-de-courriers-[slug].test.tsx.snap
@@ -174,7 +174,7 @@ exports[`<ModelesDeCourrier /> should render 1`] = `
         class="sc-bddgXz koXLlw"
       >
         <span
-          class="sc-jdUcAg jEULqB"
+          class="sc-jdUcAg jKgGxC"
         >
           <svg
             class="sc-eIcdZJ ffrCUe"
@@ -206,12 +206,17 @@ exports[`<ModelesDeCourrier /> should render 1`] = `
               y2="16"
             />
           </svg>
-          Votre avis compte ! Aidez-nous à nous améliorer.
+          Aidez-nous à améliorer le Code du travail numérique.
           <a
+            class="no-after"
             href="https://tally.so/r/3jLRW1"
             target="_blank"
           >
-            Répondre
+            <button
+              class="sc-kOPcWz jBdtLF"
+            >
+              Je donne mon avis
+            </button>
           </a>
         </span>
         <button

diff --git a/packages/code-du-travail-frontend/__tests__/__snapshots__/modeles-de-courriers.test.tsx.snap b/packages/code-du-travail-frontend/__tests__/__snapshots__/modeles-de-courriers.test.tsx.snap
@@ -174,7 +174,7 @@ exports[`<ModelesDeCourriers /> should render 1`] = `
         class="sc-bddgXz koXLlw"
       >
         <span
-          class="sc-jdUcAg jEULqB"
+          class="sc-jdUcAg jKgGxC"
         >
           <svg
             class="sc-eIcdZJ ffrCUe"
@@ -206,12 +206,17 @@ exports[`<ModelesDeCourriers /> should render 1`] = `
               y2="16"
             />
           </svg>
-          Votre avis compte ! Aidez-nous à nous améliorer.
+          Aidez-nous à améliorer le Code du travail numérique.
           <a
+            class="no-after"
             href="https://tally.so/r/3jLRW1"
             target="_blank"
           >
-            Répondre
+            <button
+              class="sc-kOPcWz jBdtLF"
+            >
+              Je donne mon avis
+            </button>
           </a>
         </span>
         <button

diff --git a/packages/code-du-travail-frontend/__tests__/__snapshots__/recherche.test.js.snap b/packages/code-du-travail-frontend/__tests__/__snapshots__/recherche.test.js.snap
@@ -94,7 +94,7 @@ exports[`<Recherche /> should render 1`] = `
         class="sc-hgRRfv jfmgFU"
       >
         <span
-          class="sc-kUdmhA cFscqR"
+          class="sc-kUdmhA cSpnBC"
         >
           <svg
             class="sc-cyRcrZ hxZFFi"
@@ -126,12 +126,17 @@ exports[`<Recherche /> should render 1`] = `
               y2="16"
             />
           </svg>
-          Votre avis compte ! Aidez-nous à nous améliorer.
+          Aidez-nous à améliorer le Code du travail numérique.
           <a
+            class="no-after"
             href="https://tally.so/r/3jLRW1"
             target="_blank"
           >
-            Répondre
+            <button
+              class="sc-kOPcWz jBdtLF"
+            >
+              Je donne mon avis
+            </button>
           </a>
         </span>
         <button

diff --git a/packages/code-du-travail-frontend/__tests__/__snapshots__/stats.test.tsx.snap b/packages/code-du-travail-frontend/__tests__/__snapshots__/stats.test.tsx.snap
@@ -174,7 +174,7 @@ exports[`<Stats /> should render 1`] = `
         class="sc-bddgXz koXLlw"
       >
         <span
-          class="sc-jdUcAg jEULqB"
+          class="sc-jdUcAg jKgGxC"
         >
           <svg
             class="sc-eIcdZJ ffrCUe"
@@ -206,12 +206,17 @@ exports[`<Stats /> should render 1`] = `
               y2="16"
             />
           </svg>
-          Votre avis compte ! Aidez-nous à nous améliorer.
+          Aidez-nous à améliorer le Code du travail numérique.
           <a
+            class="no-after"
             href="https://tally.so/r/3jLRW1"
             target="_blank"
           >
-            Répondre
+            <button
+              class="sc-kOPcWz jBdtLF"
+            >
+              Je donne mon avis
+            </button>
           </a>
         </span>
         <button

diff --git a/packages/code-du-travail-frontend/__tests__/__snapshots__/themes.test.tsx.snap b/packages/code-du-travail-frontend/__tests__/__snapshots__/themes.test.tsx.snap
@@ -174,7 +174,7 @@ exports[`<Theme /> should render 1`] = `
         class="sc-dwalKd kYvLXW"
       >
         <span
-          class="sc-cspYLC knIMa-d"
+          class="sc-cspYLC cpCWSq"
         >
           <svg
             class="sc-fmzyuX hnsrpg"
@@ -206,12 +206,17 @@ exports[`<Theme /> should render 1`] = `
               y2="16"
             />
           </svg>
-          Votre avis compte ! Aidez-nous à nous améliorer.
+          Aidez-nous à améliorer le Code du travail numérique.
           <a
+            class="no-after"
             href="https://tally.so/r/3jLRW1"
             target="_blank"
           >
-            Répondre
+            <button
+              class="sc-kOPcWz jBdtLF"
+            >
+              Je donne mon avis
+            </button>
           </a>
         </span>
         <button

diff --git a/packages/code-du-travail-frontend/src/layout/Feedback/index.tsx b/packages/code-du-travail-frontend/src/layout/Feedback/index.tsx
@@ -2,12 +2,18 @@ import styled from "styled-components";
 import { Button, icons, theme } from "@socialgouv/cdtn-ui";
 import React, { useState } from "react";
 import { AlertCircle } from "react-feather";
-import Link from "next/link";
+import { MatomoBaseEvent } from "../../lib";
+import { push as matopush } from "@socialgouv/matomo-next";
 
 export const Feedback = (): React.ReactNode => {
-  const key = "questionnaire_dsfr";
+  const key = "questionnaire_dsfr_new";
 
   const onClose = () => {
+    matopush([
+      MatomoBaseEvent.TRACK_EVENT,
+      MatomoBaseEvent.HEADER,
+      "close_bandeau",
+    ]);
     try {
       if (window) {
         window.localStorage?.setItem(key, "true");
@@ -19,6 +25,14 @@ export const Feedback = (): React.ReactNode => {
     }
   };
 
+  const onClick = () => {
+    matopush([
+      MatomoBaseEvent.TRACK_EVENT,
+      MatomoBaseEvent.HEADER,
+      "click_bandeau",
+    ]);
+  };
+
   const getLocalStorageClose = () => {
     try {
       return window.localStorage?.getItem(key) === "true";
@@ -37,21 +51,25 @@ export const Feedback = (): React.ReactNode => {
       aria-label="fermer le bandeau"
       onClick={onClose}
     >
-      <icons.Close
-        onClick={() => onClose}
-        title="Fermer le bandeau"
-      />
+      <icons.Close onClick={() => onClose} title="Fermer le bandeau" />
     </CloseButton>
   );
   return !closed ? (
     <Div>
       <IntroContainer variant="main">
         <Content>
           <AlertIcon />
-          Votre avis compte ! Aidez-nous à nous améliorer.
-          <Link passHref href="https://tally.so/r/3jLRW1" target="_blank">
-            Répondre
-          </Link>
+          Aidez-nous à améliorer le Code du travail numérique.
+          <a
+            onClick={onClick}
+            href="https://tally.so/r/3jLRW1"
+            target="_blank"
+            className="no-after"
+          >
+            <Button small variant="primary">
+              Je donne mon avis
+            </Button>
+          </a>
         </Content>
         {closeButton}
       </IntroContainer>
@@ -77,6 +95,7 @@ const Content = styled.span`
   align-items: center;
   flex-grow: 1;
   gap: ${spacings.medium};
+  font-size: 1.6rem;
   justify-content: center;
 `;