feat(contribution): handle new contrib display (#5441)

* feat(contribution): handle new contrib display * revert changes * fix: ajout des modif * fix: modif clean * fix: modif clean * fix: modif clean * fix: xss * fix test * fix case when strong element with accordion summary * remove * fix: xss * put tst es index * fix build * update index * map table elements * handle multiple items accordion * spec + new index * try to fix query to get all contribs * add spec * add tests for events on contrib page * Empty-Commit * fix: branch * fix test * new index * update index * revert changes * revert changes * include only generics in /contribution page * fix nested summary * fix: retours de romain * feat(metallurgie): affichage au nouveau format pour les anciennes contribs pour les 2 question qui seront déployés (4 et 23). (#5445) * remove H2 + update test * "Texte applicable" spécifique pour question 4 * new index * Update packages/code-du-travail-frontend/src/contributions/ContributionCCPoc.tsx Co-authored-by: Maxime Golfier <[email protected]> * fix: migrations * revert index * fix: unit test --------- Co-authored-by: maxgfr <[email protected]> Co-authored-by: Martial Maillot <[email protected]>
SocialGouv · Dec 6, 2023 · 0db0c23 · 0db0c23
1 parent e57e7bf
commit 0db0c23
Show file tree

Hide file tree

Showing 48 changed files with 8,123 additions and 696 deletions.
diff --git a/...ages/code-du-travail-frontend/cypress/integration/contributions/contributions-old.spec.ts b/...ages/code-du-travail-frontend/cypress/integration/contributions/contributions-old.spec.ts
@@ -0,0 +1,39 @@
+describe("Contributions", () => {
+  it("je vois une page contribution", () => {
+    cy.visit("/contribution/quelle-peut-etre-la-duree-maximale-dun-cdd");
+    cy.get("h1").should(
+      "have.text",
+      "Quelle peut être la durée maximale d'un CDD ?"
+    );
+    cy.get("body").should("contain", "Que dit le code du travail");
+    cy.get("body").should("contain", "Texte applicable");
+    cy.get("body").should("contain", "Références");
+    cy.get("body").should("contain", "L1242-8-1");
+    cy.get("body").should("contain", "Que dit votre convention collective");
+  });
+
+  it("je vois une page contribution pour une CC", () => {
+    cy.visit("/contribution/2941-quelle-peut-etre-la-duree-maximale-dun-cdd");
+    cy.get("h1").should(
+      "have.text",
+      "Quelle peut être la durée maximale d'un CDD ?"
+    );
+    cy.get("h2").should(
+      "contain",
+      "Que dit la convention Aide, accompagnement, soins et services à domicile (BAD) ?"
+    );
+
+    cy.get("body").should(
+      "contain",
+      "Consultez les questions-réponses fréquentes pour la convention collective Aide, accompagnement, soins et services à domicile (BAD)"
+    );
+
+    cy.contains(
+      "la convention collective Aide, accompagnement, soins et services à domicile (BAD)"
+    ).should(
+      "have.attr",
+      "href",
+      "/convention-collective/2941-aide-accompagnement-soins-et-services-a-domicile-bad"
+    );
+  });
+});
diff --git a/packages/code-du-travail-frontend/cypress/integration/contributions/contributions.spec.ts b/packages/code-du-travail-frontend/cypress/integration/contributions/contributions.spec.ts
@@ -20,32 +20,38 @@ describe("Contributions", () => {
     );
   });
   it("je vois une page contribution", () => {
-    cy.visit("/contribution/quelle-peut-etre-la-duree-maximale-dun-cdd");
+    cy.visit("/contribution/la-periode-dessai-peut-elle-etre-renouvelee");
     cy.get("h1").should(
       "have.text",
-      "Quelle peut être la durée maximale d'un CDD ?"
+      "La période d’essai peut-elle être renouvelée ?"
     );
+    cy.contains(
+      "Accéder aux informations générales sans renseigner ma convention collective"
+    ).click();
     cy.get("body").should("contain", "Que dit le code du travail");
-    cy.get("body").should("contain", "Texte applicable");
+    cy.get("body").should(
+      "contain",
+      "La convention ou l’accord de branche étendu prévoit le renouvellement de la période d’essai"
+    );
     cy.get("body").should("contain", "Références");
-    cy.get("body").should("contain", "L1242-8-1");
-    cy.get("body").should("contain", "Que dit votre convention collective");
+    cy.get("body").should("contain", "L1221-21");
+    cy.get("body").should("contain", "Pour aller plus loin");
   });
 
   it("je vois une page contribution pour une CC", () => {
-    cy.visit("/contribution/2941-quelle-peut-etre-la-duree-maximale-dun-cdd");
+    cy.visit("/contribution/675-la-periode-dessai-peut-elle-etre-renouvelee");
     cy.get("h1").should(
       "have.text",
-      "Quelle peut être la durée maximale d'un CDD ?"
+      "La période d’essai peut-elle être renouvelée ?"
     );
     cy.get("h2").should(
       "contain",
-      "Que dit la convention Aide, accompagnement, soins et services à domicile (BAD) ?"
+      "Votre réponse pour la convention collective Maisons à succursales de vente au détail d'habillement"
     );
 
     cy.get("body").should(
       "contain",
-      "Consultez les questions-réponses fréquentes pour la convention collective Aide, accompagnement, soins et services à domicile (BAD)"
+      "Les conditions de renouvellement de la période d’essai varient selon la catégorie professionnelle du salarié."
     );
 
     cy.contains(
@@ -55,5 +61,10 @@ describe("Contributions", () => {
       "href",
       "/convention-collective/2941-aide-accompagnement-soins-et-services-a-domicile-bad"
     );
+    cy.get("h2").should("contain", "Pour aller plus loin");
+    cy.get("p").should(
+      "have.text",
+      "Quelle est la durée maximale de la période d'essai, sans et avec renouvellement ?"
+    );
   });
 });
diff --git a/packages/code-du-travail-frontend/package.json b/packages/code-du-travail-frontend/package.json
@@ -51,6 +51,7 @@
     "final-form-arrays": "^3.0.2",
     "final-form-calculate": "^1.3.2",
     "fuzzball": "^2.1.2",
+    "html-react-parser": "^5.0.6",
     "immer": "^9.0.14",
     "katex": "^0.13.13",
     "lit": "2.6.1",

diff --git a/packages/code-du-travail-frontend/pages/contribution/[slug].tsx b/packages/code-du-travail-frontend/pages/contribution/[slug].tsx
@@ -5,26 +5,41 @@ import Answer from "../../src/common/Answer";
 import Metas from "../../src/common/Metas";
 import Contribution from "../../src/contributions/Contribution";
 import { Layout } from "../../src/layout/Layout";
-import { Breadcrumb } from "@socialgouv/cdtn-utils";
+import {
+  Breadcrumb,
+  ElasticSearchContribution,
+  ElasticSearchContributionConventionnelle,
+  ElasticSearchContributionGeneric,
+} from "@socialgouv/cdtn-utils";
 import { handleError } from "../../src/lib/fetch-error";
 import { SITE_URL } from "../../src/config";
+import ContributionGenericPoc from "../../src/contributions/ContributionGenericPoc";
+import ContributionCCPoc from "../../src/contributions/ContributionCCPoc";
+import { showNewContribPage } from "../../src/contributions/utils";
+import EventTracker from "../../src/lib/tracking/EventTracker";
 import ContributionGeneric from "../../src/contributions/ContributionGeneric";
 import ContributionCC from "../../src/contributions/ContributionCC";
-import showNewContribPage from "../../src/contributions/slugFilter";
-import EventTracker from "../../src/lib/tracking/EventTracker";
 
 const fetchQuestion = ({ slug }) =>
   fetch(`${SITE_URL}/api/items/contributions/${slug}`);
 
-interface Props {
+type NewProps = {
+  contribution: ElasticSearchContribution;
+  isNewContribution: true;
+};
+
+type OldProps = {
   breadcrumbs: Breadcrumb[];
   description: string;
   title: string;
   slug: string;
-  content;
   answers;
   relatedItems: Array<any>;
-}
+  content;
+  isNewContribution: false;
+};
+
+type Props = NewProps | OldProps;
 
 const buildTitleAndDescription = (
   breadcrumbs,
@@ -50,53 +65,77 @@ const buildTitleAndDescription = (
 const SLUG_FOR_POC_GENERIC = ["les-conges-pour-evenements-familiaux"];
 
 function PageContribution(props: Props): React.ReactElement {
-  const {
-    breadcrumbs,
-    title,
-    answers,
-    description,
-    relatedItems,
-    content,
-    slug,
-  } = props;
+  let metas: any = {};
+
+  if (!props.isNewContribution) {
+    metas = buildTitleAndDescription(
+      props.breadcrumbs,
+      props.answers.conventionAnswer,
+      props.title,
+      props.description
+    );
+  }
 
-  const metas = buildTitleAndDescription(
-    breadcrumbs,
-    answers.conventionAnswer,
-    title,
-    description
-  );
   return (
     <Layout>
-      <Metas title={metas.title} description={metas.description} />
-      <Answer
-        title={title}
-        relatedItems={relatedItems}
-        breadcrumbs={breadcrumbs}
-      >
-        {SLUG_FOR_POC_GENERIC.indexOf(slug) >= 0 ? (
-          <ContributionGeneric
-            answers={answers}
-            slug={slug}
-            content={(content && content._source) || {}}
+      {props.isNewContribution ? (
+        <>
+          <Metas
+            title={props.contribution.title}
+            description={props.contribution.description}
           />
-        ) : (
-          <>
-            {showNewContribPage(slug) ? (
-              <ContributionCC
-                answers={answers}
-                slug={slug}
-                content={(content && content._source) || {}}
+          <Answer
+            title={props.contribution.title}
+            breadcrumbs={props.contribution.breadcrumbs}
+          >
+            {props.contribution.idcc === "0000" ? (
+              <ContributionGeneric
+                contribution={
+                  props.contribution as ElasticSearchContributionGeneric
+                }
               />
             ) : (
-              <Contribution
-                answers={answers}
-                content={(content && content._source) || {}}
+              <ContributionCC
+                contribution={
+                  props.contribution as ElasticSearchContributionConventionnelle
+                }
+              />
+            )}
+          </Answer>
+        </>
+      ) : (
+        <>
+          <Metas title={metas.title} description={metas.description} />
+          <Answer
+            title={props.title}
+            relatedItems={props.relatedItems}
+            breadcrumbs={props.breadcrumbs}
+          >
+            {SLUG_FOR_POC_GENERIC.indexOf(props.slug) >= 0 ? (
+              <ContributionGenericPoc
+                answers={props.answers}
+                slug={props.slug}
+                content={(props.content && props.content._source) || {}}
               />
+            ) : (
+              <>
+                {showNewContribPage(props.slug) ? (
+                  <ContributionCCPoc
+                    answers={props.answers}
+                    slug={props.slug}
+                    content={(props.content && props.content._source) || {}}
+                  />
+                ) : (
+                  <Contribution
+                    answers={props.answers}
+                    content={(props.content && props.content._source) || {}}
+                  />
+                )}
+              </>
             )}
-          </>
-        )}
-      </Answer>
+          </Answer>
+        </>
+      )}
       <EventTracker />
     </Layout>
   );
@@ -109,20 +148,47 @@ export const getServerSideProps = async ({ query }) => {
   }
   const data = await response.json();
 
-  // Check Content tag exist on markdown
-  const markdown =
-    ((((data || {})._source || {}).answers || {}).generic || {}).markdown || "";
+  if (
+    data._source?.type === "content" ||
+    data._source?.type === "fiche-sp" ||
+    data._source?.type === "cdt"
+  ) {
+    return {
+      props: {
+        contribution: data._source,
+        isNewContribution: true,
+      },
+    };
+  } else {
+    // Check Content tag exist on markdown
+    const markdown =
+      ((((data || {})._source || {}).answers || {}).generic || {}).markdown ||
+      "";
+
+    const contentUrl = extractMdxContentUrl(markdown);
+    if (contentUrl) {
+      const fetchContent = await fetch(
+        `${SITE_URL}/api/items?url=${contentUrl}`
+      );
+      const [content] = await fetchContent.json();
+      return {
+        props: {
+          relatedItems: data.relatedItems,
+          ...data._source,
+          content,
+          isNewContribution: false,
+        },
+      };
+    }
 
-  const contentUrl = extractMdxContentUrl(markdown);
-  if (contentUrl) {
-    const fetchContent = await fetch(`${SITE_URL}/api/items?url=${contentUrl}`);
-    const [content] = await fetchContent.json();
     return {
-      props: { relatedItems: data.relatedItems, ...data._source, content },
+      props: {
+        relatedItems: data.relatedItems,
+        ...data._source,
+        isNewContribution: false,
+      },
     };
   }
-
-  return { props: { relatedItems: data.relatedItems, ...data._source } };
 };
 
 export default PageContribution;