feat: implementation widget CC pour telerc (#5817)

* feat: implementation widget CC pour telerc

* fix: broken search

* chore: clean

* feat: implement test e2e widget

* chore: ts fix

* fix: ts

* chore: pipeline fix

* fix: wording

---------

Co-authored-by: Victor <victor.zeinstra@gmail.com>

packages/code-du-travail-frontend/cypress/integration/light/integration.spec.ts

@@ -0,0 +1,102 @@
+Cypress.Commands.add("getIframe" as any, () => {
+  return cy
+    .get("iframe")
+    .its("0.contentDocument.body")
+    .should("not.be.empty")
+    .then(cy.wrap);
+});
+
+describe("Pages integration convention collective", () => {
+  it("should display iframe moteur de recherche", () => {
+    cy.visit("/integration/moteur-recherche", {
+      onBeforeLoad(win) {
+        // start spying
+        cy.spy(win, "postMessage").as("postMessage");
+      },
+    });
+
+    // @ts-ignore
+    cy.getIframe().as("iframe");
+
+    cy.get("@iframe")
+      .find("label", { timeout: 10000 })
+      .should(
+        "have.text",
+        "Trouvez les réponses à vos questions en droit du travail"
+      );
+    cy.get("@iframe").find("#button-search").click();
+    cy.get("@postMessage").should("be.calledOnce");
+  });
+  it("should display iframe convention collective", () => {
+    cy.visit("/integration/convention-collective", {
+      onBeforeLoad(win) {
+        // start spying
+        cy.spy(win, "postMessage").as("postMessage");
+      },
+    });
+
+    // @ts-ignore
+    cy.getIframe().as("iframe");
+
+    cy.get("@iframe").contains("Trouver sa convention collective");
+    cy.get("@iframe").find("#enterprise-search").as("entreprise-search");
+    cy.get("@entreprise-search").type("carrefour");
+    cy.get("@iframe").find("button[type=submit]").as("button-submit");
+    cy.get("@button-submit").click();
+    cy.get("@iframe").contains("CARREFOUR HYPERMARCHES").as("entreprise");
+    cy.get("@entreprise").click();
+    cy.get("@iframe").contains("Conventions collectives").as("cc");
+    cy.get("@cc").click();
+    cy.get("@postMessage").should("be.calledOnce");
+  });
+
+  it("should display iframe modèle de courrier", () => {
+    cy.visit("/integration/modeles-de-courriers");
+    // @ts-ignore
+    cy.getIframe().contains(
+      "Affichage obligatoire relatif au harcèlement sexuel"
+    );
+  });
+
+  it("should display iframe indemnité licenciement", () => {
+    cy.visit("/integration/indemnite-licenciement");
+
+    // @ts-ignore
+    cy.getIframe().contains("Calculer l'indemnité de licenciement");
+  });
+
+  it("should display iframe préavis de démission", () => {
+    cy.visit("/integration/preavis-demission");
+
+    // @ts-ignore
+    cy.getIframe().contains("Calculer le préavis de démission");
+  });
+
+  it("should display iframe indemnité de précarité", () => {
+    cy.visit("/integration/indemnite-precarite");
+
+    // @ts-ignore
+    cy.getIframe().contains("Calculer l'indemnité de précarité");
+  });
+
+  it("should display iframe préavis de licenciement", () => {
+    cy.visit("/integration/preavis-licenciement");
+
+    // @ts-ignore
+    cy.getIframe().contains("Calculer le préavis de licenciement");
+  });
+
+  it("should display iframe préavis de retraite", () => {
+    cy.visit("/integration/preavis-retraite");
+
+    // @ts-ignore
+    cy.getIframe().contains("Calculer le préavis de départ à la retraite");
+  });
+
+  it("should display iframe procédure de licenciement", () => {
+    cy.visit("/integration/procedure-licenciement");
+
+    // @ts-ignore
+    cy.getIframe().contains("Comprendre sa procédure de licenciement");
+  });
+});

packages/code-du-travail-frontend/pages/integration/[slug].tsx

@@ -22,7 +22,14 @@ const IntegrationPage = (props): JSX.Element => {
     <Layout>
       <Metas title={metaTitle} description={metaDescription} />
       <Section>
-        <Breadcrumbs items={[{ label: "Integration", slug: "/integration" }]} />
+        <Breadcrumbs
+          items={[
+            {
+              label: "Intégrer les outils du Code du travail numérique",
+              slug: "/integration",
+            },
+          ]}
+        />
         <IntegrationContainer
           id={id}
           description={description}

packages/code-du-travail-frontend/pages/widgets/[slug].tsx

@@ -3,6 +3,8 @@ import { GetServerSideProps } from "next";
 import React from "react";
 import styled from "styled-components";
 import { useIframeResizer } from "../../src/common/hooks";
+import { useRouter } from "next/router";
+
 import { Footer } from "../../src/widgets";
 
 import {
@@ -48,6 +50,7 @@ function Widgets({
 }: Props): JSX.Element {
   useIframeResizer();
   const Tool = toolsBySlug[slug];
+  const router = useRouter();
 
   return (
     <>
@@ -63,6 +66,7 @@ function Widgets({
           displayTitle={displayTitle}
           slug={slug}
           widgetMode
+          {...router.query}
         />
         <Footer />
       </StyledContainer>

packages/code-du-travail-frontend/src/common/tiles/LinkedTile.tsx

@@ -15,23 +15,26 @@ export type Props = {
   centerTitle?: boolean;
   wide?: boolean;
   custom?: boolean;
+  noRedirect?: boolean;
   onClick?: () => void;
 };
 
 export const LinkedTile = React.forwardRef<HTMLAnchorElement, Props>(
   function useLnkedTile(
-    { children, onClick, href, ...props }: Props,
+    { children, onClick, href, noRedirect, ...props }: Props,
     ref: ForwardedRef<any>
   ): JSX.Element {
     const router = useRouter();
     const handleClick = async (e) => {
       if (onClick) onClick();
       e.preventDefault();
-      if (props.target === "_blank") {
-        window.open(href, "_blank");
-        return false;
+      if (!noRedirect) {
+        if (props.target === "_blank") {
+          window.open(href, "_blank");
+          return false;
+        }
+        router.push(href);
       }
-      router.push(href);
       return false;
     };
     return (

packages/code-du-travail-frontend/src/integration/Components/Integration.tsx

@@ -159,13 +159,19 @@ const IntegrationContainer = ({
     const iframe = document.getElementById('cdtn-iframe-${id}');
     if (
       source === iframe.contentWindow
-      && data.kind === "click"
+      ${Object.keys(messages).map((key) => `&& data.kind === "${key}"`)}
     ) {
-      ${messages.click.map(
-        ({ name, description }) => `
-      data.name === '${name}' // ${description}`
+      ${Object.keys(messages).map((key) =>
+        messages[key].map(({ name, description, extra }) => {
+          let extraString = "";
+          if (extra) {
+            extraString = Object.entries(extra)
+              .map(([key, value]) => `\n\tdata.extra.${key} // ${value}`)
+              .join();
+          }
+          return `\tdata.name === '${name}' // ${description}${extraString}`;
+        })
       )}
-
     }
   }
 );`}

packages/code-du-travail-frontend/src/integration/data/integration.json

@@ -7,7 +7,7 @@
       "Vous pouvez intégrer le moteur de recherche du Code du travail numérique sur votre site grâce à un module (widget). Ce module permettra à l’utilisateur de faire une recherche depuis votre site dans la barre de recherche du module. Une fois la recherche lancée, cela ouvrira la page de recherche sur le site du Code du travail numérique."
     ],
     "shortTitle": "Moteur de recherche du Code du travail numérique",
-    "shortDescription": "Effectuer une recherche depuis votre site sur le Code du travail numérique",
+    "shortDescription": "Effectuez une recherche depuis votre site sur le Code du travail numérique",
     "url": "/widgets/search",
     "id": "widget",
     "messages": {
@@ -32,7 +32,7 @@
       "Utilisez le menu déroulant ci-dessous pour afficher le modèle que vous souhaitez. Le code Javascript à intégrer dans votre page (disponible sous le modèle) se mettra automatiquement à jour selon le modèle sélectionné."
     ],
     "shortTitle": "Modèles de documents",
-    "shortDescription": "Télécharger et personnaliser les modèles de documents et de lettres pour vos démarches en lien avec le droit du travail",
+    "shortDescription": "Téléchargez et personnalisez les modèles de documents et de lettres pour vos démarches en lien avec le droit du travail",
     "select": {
       "url": "/api/modeles",
       "labelPath": "title",
@@ -49,7 +49,7 @@
       "Vous pouvez intégrer l’outil de calcul de l'indemnité de licenciement du Code du travail numérique sur votre site grâce à un module (widget). Ce module permettra à l’utilisateur de calculer le montant de l'indemnité à verser au salarié en cas de licenciement. Afin de personnaliser le résultat, l’utilisateur pourra, s’il le souhaite, renseigner ou rechercher (à partir du nom de l’entreprise) sa convention collective."
     ],
     "shortTitle": "Indemnité de licenciement",
-    "shortDescription": "Estimer le montant de l’indemnité à verser au salarié en cas de licenciement",
+    "shortDescription": "Estimez le montant de l’indemnité à verser au salarié en cas de licenciement",
     "url": "/widgets/indemnite-licenciement",
     "id": "indemnite-licenciement"
   },
@@ -61,7 +61,7 @@
       "Vous pouvez intégrer l’outil de calcul du préavis de démission du Code du travail numérique sur votre site grâce à un module (widget). Ce module permettra à l’utilisateur de calculer la durée du préavis accordée au salarié en cas de démission. Afin de personnaliser le résultat, l’utilisateur pourra, s’il le souhaite, renseigner ou rechercher (à partir du nom de l’entreprise) sa convention collective."
     ],
     "shortTitle": "Préavis de démission",
-    "shortDescription": "Calculer la durée de préavis à respecter en cas de démission",
+    "shortDescription": "Calculez la durée de préavis à respecter en cas de démission",
     "url": "/widgets/preavis-demission",
     "id": "preavis-demission"
   },
@@ -73,7 +73,7 @@
       "Vous pouvez intégrer l’outil de calcul de l'indemnité de précarité du Code du travail numérique sur votre site grâce à un module (widget). Ce module permettra à l’utilisateur de calculer le montant de l’indemnité de fin de contrat ou de fin de mission (dite “prime de précarité”) d’un salarié en CDD ou en contrat d’intérim. Afin de personnaliser le résultat, l’utilisateur pourra, s’il le souhaite, renseigner ou rechercher (à partir du nom de l’entreprise) sa convention collective."
     ],
     "shortTitle": "Indemnité de précarité",
-    "shortDescription": "Estimer le montant de l'indemnité de fin de CDD ou intérim",
+    "shortDescription": "Estimez le montant de l'indemnité de fin de CDD ou intérim",
     "url": "/widgets/indemnite-precarite",
     "id": "indemnite-precarite"
   },
@@ -85,7 +85,7 @@
       "Vous pouvez intégrer l’outil de calcul du préavis de licenciement du Code du travail numérique sur votre site grâce à un module (widget). Ce module permettra à l’utilisateur de calculer la durée du préavis accordée au salarié en cas de licenciement. Afin de personnaliser le résultat, l’utilisateur pourra, s’il le souhaite, renseigner ou rechercher (à partir du nom de l’entreprise) sa convention collective."
     ],
     "shortTitle": "Préavis de licenciement",
-    "shortDescription": "Calculer la durée de préavis à respecter en cas de licenciement",
+    "shortDescription": "Calculez la durée de préavis à respecter en cas de licenciement",
     "url": "/widgets/preavis-licenciement",
     "id": "preavis-licenciement"
   },
@@ -97,9 +97,21 @@
       "Vous pouvez intégrer l’outil permettant à un usager de trouver sa convention collective sur votre site grâce à un module (widget). Grâce à ce module l'utilisateur pourra dans un premier temps identifier sa convention collective à partir du nom de son entreprise (ou son siret). Il pourra ensuite accéder aux questions-réponses fréquentes de cette convention collective sur le site du code du travail numérique."
     ],
     "shortTitle": "Trouver sa convention collective",
-    "shortDescription": "Trouver une convention collective à partir du nom de l'entreprise ou son SIRET",
+    "shortDescription": "Trouvez une convention collective à partir du nom de l'entreprise ou son SIRET",
     "url": "/widgets/convention-collective",
-    "id": "convention-collective"
+    "id": "convention-collective",
+    "messages": {
+      "select": [
+        {
+          "name": "agreement",
+          "description": "le message envoyé lors de la selection d'une convention collective",
+          "extra": {
+            "idcc": "id de la convention collective",
+            "title": "nom de la convention collective"
+          }
+        }
+      ]
+    }
   },
   "preavis-retraite": {
     "metaTitle": "Intégrer l’outil de calcul du préavis de retraite du Code du travail numérique",
@@ -109,7 +121,7 @@
       "Vous pouvez intégrer l’outil de calcul du préavis de retraite du Code du travail numérique sur votre site grâce à un module (widget). Ce module permettra à l’utilisateur de calculer la durée de préavis à respecter en cas de départ ou de mise à la retraite. Afin de personnaliser le résultat, l’utilisateur pourra, s’il le souhaite, renseigner ou rechercher (à partir du nom de l’entreprise) sa convention collective."
     ],
     "shortTitle": "Préavis de départ ou mise à la retraite",
-    "shortDescription": "Calculer la durée de préavis à respecter en cas de départ à la retraite ou de mise à la retraite",
+    "shortDescription": "Calculez la durée de préavis à respecter en cas de départ à la retraite ou de mise à la retraite",
     "url": "/widgets/preavis-retraite",
     "id": "preavis-retraite"
   },
@@ -121,7 +133,7 @@
       "Vous pouvez intégrer l’outil « comprendre sa procédure de licenciement » du Code du travail numérique sur votre site grâce à un module (widget). Ce module permettra dans un premier temps à l’utilisateur d’identifier la procédure de licenciement qui s’applique dans sa situation. Il pourra ensuite accéder à une page qui détaille les étapes de la procédure sous format infographie et texte. Des modèles de courrier téléchargeables, des simulateurs et d’autres ressources sont également associés à chacune des procédures."
     ],
     "shortTitle": "Comprendre sa procédure de licenciement",
-    "shortDescription": "Accéder à la procédure de licenciement qui correspond à votre situation",
+    "shortDescription": "Accédez à la procédure de licenciement qui correspond à votre situation",
     "url": "/widgets/procedure-licenciement",
     "id": "procedure-licenciement"
   }

packages/code-du-travail-frontend/src/integration/data/type.ts

@@ -2,6 +2,9 @@ export type WidgetMessage = {
   [action: string]: {
     name: string;
     description: string;
+    extra?: {
+      [key: string]: string;
+    };
   }[];
 };
 

packages/code-du-travail-frontend/src/outils/ConventionCollective/index.tsx

@@ -23,13 +23,15 @@ interface Props {
   title: string;
   displayTitle: string;
   widgetMode?: boolean;
+  noRedirect?: string;
 }
 
 function AgreementSearchTool({
   icon,
   title,
   displayTitle,
   widgetMode,
+  noRedirect,
 }: Props): JSX.Element {
   const router = useRouter();
 
@@ -99,7 +101,12 @@ function AgreementSearchTool({
       setScreen(ScreenType.agreementSelection);
     } else {
       router.push(
-        `/${SOURCES.TOOLS}/convention-collective/${ScreenType.agreementSelection}`
+        `/${SOURCES.TOOLS}/convention-collective/${ScreenType.agreementSelection}`,
+        {
+          query: {
+            noRedirect,
+          },
+        }
       );
     }
   }
@@ -169,6 +176,7 @@ function AgreementSearchTool({
           onBackClick={clearSelection}
           onUserAction={onUserAction}
           isWidgetMode={widgetMode}
+          noRedirect={noRedirect === "true"}
         />
       );
       break;

packages/code-du-travail-frontend/src/outils/ConventionCollective/steps/AgreementSelection.tsx

@@ -13,12 +13,14 @@ import { useRouter } from "next/router";
 type EnterpriseSearchStepProps = {
   onBackClick: () => void;
   isWidgetMode?: boolean;
+  noRedirect?: boolean;
 } & TrackingProps;
 
 const AgreementSelectionStep = ({
   onBackClick,
   onUserAction,
   isWidgetMode,
+  noRedirect,
 }: EnterpriseSearchStepProps): JSX.Element => {
   const { enterprise } = useNavContext();
   const router = useRouter();
@@ -54,6 +56,7 @@ const AgreementSelectionStep = ({
                   onUserAction={onUserAction}
                   agreement={agreement}
                   isWidgetMode={isWidgetMode}
+                  noRedirect={noRedirect}
                 />
               ) : (
                 <Tile