feat(front): add relatedItems to tools (#3276)

* feat(front): add relatedItems to tools * fix(frontend): double survey
SocialGouv · Jan 29, 2021 · fce2d77 · fce2d77
1 parent 06fd791
commit fce2d77
Show file tree

Hide file tree

Showing 2 changed files with 68 additions and 45 deletions.
diff --git a/packages/code-du-travail-frontend/pages/outils/[slug].js b/packages/code-du-travail-frontend/pages/outils/[slug].js
@@ -1,9 +1,12 @@
 import tools from "@cdt/data...tools/internals.json";
+import * as Sentry from "@sentry/browser";
 import { Container, Section, theme, Wrapper } from "@socialgouv/cdtn-ui";
+import getConfig from "next/config";
 import React, { useEffect } from "react";
 import styled from "styled-components";
 
 import Metas from "../../src/common/Metas";
+import { RelatedItems } from "../../src/common/RelatedItems";
 import { Share } from "../../src/common/Share";
 import { Layout } from "../../src/layout/Layout";
 import { ToolSurvey } from "../../src/outils/common/ToolSurvey";
@@ -15,6 +18,12 @@ import { SimulateurIndemnitePrecarite } from "../../src/outils/IndemnitePrecarit
 import { SimulateurEmbauche } from "../../src/outils/SimulateurEmbauche";
 import { matopush } from "../../src/piwik";
 
+const { SOURCES } = require("@socialgouv/cdtn-sources");
+
+const {
+  publicRuntimeConfig: { API_URL },
+} = getConfig();
+
 const toolsBySlug = {
   "heures-recherche-emploi": HeuresRechercheEmploi,
   "indemnite-licenciement": CalculateurIndemnite,
@@ -24,7 +33,7 @@ const toolsBySlug = {
   "simulateur-embauche": SimulateurEmbauche,
 };
 
-function Outils({ description, icon, slug, title }) {
+function Outils({ description, icon, slug, relatedItems, title }) {
   const Tool = toolsBySlug[slug];
   useEffect(() => {
     matopush(["trackEvent", "outil", `view_step_${title}`, "start"]);
@@ -44,6 +53,7 @@ function Outils({ description, icon, slug, title }) {
             <Tool icon={icon} title={title} />
           </Wrapper>
           <ToolSurvey />
+          <RelatedItems disableSurvey items={relatedItems} />
         </Container>
       </StyledSection>
     </Layout>
@@ -55,10 +65,21 @@ export default Outils;
 Outils.getInitialProps = async ({ query }) => {
   const { slug } = query;
   const { description, icon, title } = tools.find((tool) => tool.slug === slug);
+  let relatedItems = [];
+  try {
+    const response = await fetch(`${API_URL}/items/${SOURCES.TOOLS}/${slug}`);
+    if (response.ok) {
+      relatedItems = await response.json().then((data) => data.relatedItems);
+    }
+  } catch (e) {
+    console.error(e);
+    Sentry.captureException(e);
+  }
 
   return {
     description,
     icon,
+    relatedItems,
     slug,
     title,
   };

diff --git a/packages/code-du-travail-frontend/src/common/RelatedItems.js b/packages/code-du-travail-frontend/src/common/RelatedItems.js
@@ -29,7 +29,7 @@ const matoSelectRelated = (reco, selection) => {
   ]);
 };
 
-export const RelatedItems = ({ items = [] }) => {
+export const RelatedItems = ({ disableSurvey = false, items = [] }) => {
   const isArticleSource = (source) =>
     ![SOURCES.EXTERNALS, SOURCES.LETTERS, SOURCES.TOOLS].includes(source);
 
@@ -47,53 +47,55 @@ export const RelatedItems = ({ items = [] }) => {
 
   return (
     <Container>
-      <SurveyModal>
-        {({
-          setModalVisible,
-          isPromptVisible,
-          isSurveyDisabled,
-          setPromptVisible,
-          setSurveyDisabled,
-        }) =>
-          !isSurveyDisabled &&
-          isPromptVisible && (
-            <PromptWrapper>
-              <Toast animate="from-right" wide shadow>
-                <CloseButton
-                  variant="naked"
-                  small
-                  narrow
-                  title="ne pas répondre aux questions"
-                  onClick={() => {
-                    setPromptVisible(false);
-                    setSurveyDisabled(true);
-                  }}
-                >
-                  <ScreenReaderOnly>fermer la modale</ScreenReaderOnly>
-                  <CloseIcon aria-hidden />
-                </CloseButton>
-                <PromptContainer>
-                  <Subtitle>Questionnaire</Subtitle>
-                  <PromptLabel>Aidez-nous à améliorer le site</PromptLabel>
-                  <Button
+      {!disableSurvey && (
+        <SurveyModal>
+          {({
+            setModalVisible,
+            isPromptVisible,
+            isSurveyDisabled,
+            setPromptVisible,
+            setSurveyDisabled,
+          }) =>
+            !isSurveyDisabled &&
+            isPromptVisible && (
+              <PromptWrapper>
+                <Toast animate="from-right" wide shadow>
+                  <CloseButton
+                    variant="naked"
                     small
+                    narrow
+                    title="ne pas répondre aux questions"
                     onClick={() => {
-                      matopush([
-                        "trackEvent",
-                        "survey",
-                        "open from related items",
-                      ]);
-                      setModalVisible(true);
+                      setPromptVisible(false);
+                      setSurveyDisabled(true);
                     }}
                   >
-                    Commencer
-                  </Button>
-                </PromptContainer>
-              </Toast>
-            </PromptWrapper>
-          )
-        }
-      </SurveyModal>
+                    <ScreenReaderOnly>fermer la modale</ScreenReaderOnly>
+                    <CloseIcon aria-hidden />
+                  </CloseButton>
+                  <PromptContainer>
+                    <Subtitle>Questionnaire</Subtitle>
+                    <PromptLabel>Aidez-nous à améliorer le site</PromptLabel>
+                    <Button
+                      small
+                      onClick={() => {
+                        matopush([
+                          "trackEvent",
+                          "survey",
+                          "open from related items",
+                        ]);
+                        setModalVisible(true);
+                      }}
+                    >
+                      Commencer
+                    </Button>
+                  </PromptContainer>
+                </Toast>
+              </PromptWrapper>
+            )
+          }
+        </SurveyModal>
+      )}
       {relatedGroups.map(
         ({ title, items }) =>
           items.length > 0 && (