feat(DSFR): salaire brut / net (#6260)

* Revert "fix(simulateur embauche): revert DSFR sur simulateur embauche (#6245)"

This reverts commit 6a359dd.

* add click in test

* try to memoised

* update meta data

* fix snapshots

* more logging

* sans aysnc

* fix!!

packages/code-du-travail-frontend/app/outils/simulateur-embauche/page.tsx

@@ -0,0 +1,45 @@
+import { DsfrLayout } from "../../../src/modules/layout";
+import { fetchRelatedItems } from "../../../src/modules/documents";
+import { fetchTool } from "../../../src/modules/outils";
+import { notFound } from "next/navigation";
+import { generateDefaultMetadata } from "../../../src/modules/common/metas";
+import HiringSimulator from "../../../src/modules/outils/simulateur-embauche/HiringSimulator";
+
+export async function generateMetadata() {
+  const { metaTitle, metaDescription } = await getTool();
+
+  return generateDefaultMetadata({
+    title: metaTitle,
+    description: metaDescription,
+    path: `/outils/simulateur-embauche`,
+  });
+}
+
+async function HiringSimulatorPage() {
+  const tool = await getTool();
+  const relatedItems = await fetchRelatedItems(
+    { _id: tool._id },
+    "simulateur-embauche"
+  );
+  return (
+    <DsfrLayout>
+      <HiringSimulator
+        title={tool.displayTitle}
+        breadcrumbTitle={tool.title}
+        relatedItems={relatedItems}
+        description={tool.description}
+      />
+    </DsfrLayout>
+  );
+}
+
+const getTool = async () => {
+  const tool = await fetchTool("simulateur-embauche");
+
+  if (!tool) {
+    return notFound();
+  }
+  return tool;
+};
+
+export default HiringSimulatorPage;

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

@@ -3,7 +3,11 @@ import "cypress-iframe";
 describe("Outil - Salaire brut/net", () => {
   it("Valider que le simulateur s'affiche correctement dans l'iframe", () => {
     cy.visit("/outils/simulateur-embauche");
-    cy.get("h1").should("have.text", "Calculer le salaire brut/net");
+    cy.findByRole("heading", { level: 1 }).should(
+      "have.text",
+      "Calculer le salaire brut/net"
+    );
+    cy.findByRole("heading", { level: 1 }).click();
     cy.iframe("#simulateurEmbauche")
       .contains("Coût total employeur")
       .should("be.visible");

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

@@ -19,7 +19,6 @@ import {
   DureePreavisDemission,
   DureePreavisLicenciement,
   HeuresRechercheEmploi,
-  SimulateurEmbauche,
   SimulateurIndemnitePrecarite,
   CalculateurPreavisRetraite,
 } from "../../src/outils";
@@ -38,7 +37,6 @@ const toolsBySlug = {
   "preavis-demission": DureePreavisDemission,
   "preavis-licenciement": DureePreavisLicenciement,
   "preavis-retraite": CalculateurPreavisRetraite,
-  "simulateur-embauche": SimulateurEmbauche,
   "procedure-licenciement": DismissalProcess,
   "indemnite-rupture-conventionnelle": CalculateurRuptureConventionnelle,
 };

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

@@ -82,7 +82,7 @@ const StyledDiv = styled.div`
       height: 1.4rem;
       margin: 0 ${spacings.tiny} 0 ${spacings.small};
       transition: transform ${theme.animations.transitionTiming} linear;
-      fill: ${theme.primary};
+      fill: ${theme.colors.primary};
     }
   }
 `;

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

@@ -3,7 +3,7 @@
 exports[`<CallToActionTile /> should render 1`] = `
 <div>
   <div
-    class="sc-d47d8018-0 ezEIGw sc-98e66f5e-1 fCudut"
+    class="sc-d47d8018-0 ezEIGw sc-45a05aa-1 jNkAaK"
   >
     <div
       class="sc-d47d8018-2 eBZhiP"
@@ -53,13 +53,13 @@ exports[`<CallToActionTile /> should render 1`] = `
       class="sc-d47d8018-6 ipSAXR"
     >
       <div
-        class="sc-98e66f5e-0 bQDuAS"
+        class="sc-45a05aa-0 dqQtNN"
       >
         <p>
           Cette tuile vous fera dire bonjour !
         </p>
         <div
-          class="sc-98e66f5e-2 cDPdrN"
+          class="sc-45a05aa-2 gcKsUr"
         >
           <p
             class="sc-3633cc97-1 gDIqvu"

packages/code-du-travail-frontend/src/modules/outils/queries.ts

@@ -5,6 +5,8 @@ import {
 } from "../../api/utils";
 import { Tool } from "@socialgouv/cdtn-types";
 import { SOURCES } from "@socialgouv/cdtn-utils";
+import { DocumentElasticResult, fetchDocument } from "../documents";
+import { ElasticTool } from "./type";
 
 export const fetchTools = async <K extends keyof Tool>(
   fields: K[],
@@ -62,3 +64,27 @@ export const fetchTools = async <K extends keyof Tool>(
     .map(({ _source }) => _source)
     .filter((source) => source !== undefined);
 };
+
+export const fetchTool = async (
+  slug: string
+): Promise<DocumentElasticResult<ElasticTool>> => {
+  const result = await fetchDocument<
+    ElasticTool,
+    keyof DocumentElasticResult<ElasticTool>
+  >(["description", "metaDescription", "metaTitle", "title", "displayTitle"], {
+    query: {
+      bool: {
+        filter: [
+          { term: { source: SOURCES.TOOLS } },
+          { term: { slug } },
+          { term: { isPublished: true } },
+        ],
+      },
+    },
+    size: 1,
+  });
+  if (!result) {
+    throw new Error("Outils non trouvé");
+  }
+  return result;
+};

packages/code-du-travail-frontend/src/modules/outils/simulateur-embauche/HiringSimulator.tsx

@@ -0,0 +1,102 @@
+"use client";
+import { Highlight } from "@codegouvfr/react-dsfr/Highlight";
+import { fr } from "@codegouvfr/react-dsfr";
+import { createRef, memo, useEffect, useState } from "react";
+import { ContainerSimulator } from "../../layout/ContainerSimulator";
+import { RelatedItem } from "../../documents";
+import * as Sentry from "@sentry/nextjs";
+
+type Props = {
+  relatedItems: {
+    items: RelatedItem[];
+    title: string;
+  }[];
+  title: string;
+  breadcrumbTitle: string;
+  description: string;
+};
+
+const HiringSimulator = memo(function HiringSimulator({
+  relatedItems,
+  description,
+  title,
+  breadcrumbTitle,
+}: Props) {
+  const simRef = createRef<HTMLDivElement>();
+  const [state, setState] = useState({
+    error: "",
+    simulator: "loading",
+  });
+  const onError = (error) => {
+    console.log(`Erreur durant le chargement de l'iframe brut/net ${error}`);
+    setState({ error, simulator: "error" });
+    Sentry.captureMessage(`Erreur durant le chargement de l'iframe brut/net`);
+  };
+
+  const onLoad = () => {
+    setState({ simulator: "success", error: "" });
+    if (!simRef.current?.querySelector("#simulateurEmbauche")) {
+      console.log(
+        `Erreur durant le chargement de l'iframe brut/net, "empty child"`
+      );
+      setState({ error: "empty child", simulator: "error" });
+      Sentry.captureMessage(
+        `Erreur durant le chargement de l'iframe brut/net "empty child"`
+      );
+    }
+  };
+  useEffect(() => {
+    const script = document.createElement("script");
+
+    script.src =
+      "https://mon-entreprise.urssaf.fr/simulateur-iframe-integration.js";
+    script.id = "script-simulateur-embauche";
+    script.onload = onLoad;
+    script.onerror = onError;
+
+    if (simRef.current) {
+      simRef.current.appendChild(script);
+    }
+
+    return () => {
+      if (simRef.current) {
+        simRef.current.removeChild(script);
+      }
+    };
+  }, []);
+  const { simulator } = state;
+  return (
+    <ContainerSimulator
+      relatedItems={relatedItems}
+      title={breadcrumbTitle}
+      description={description}
+      segments={[{ label: "Simulateurs", linkProps: { href: "/outils" } }]}
+    >
+      <h1 id="simulateur-embauche">{title}</h1>
+      <Highlight size="lg" className={fr.cx("fr-mb-12v")}>
+        Pour information, l&apos;estimation du salaire net après impôt est basée
+        sur la situation d&apos;une personne célibataire sans enfants ni
+        patrimoine.
+      </Highlight>
+      {simulator === "loading" && <p>Chargement de l’outil</p>}
+      {simulator === "error" ? (
+        <p>
+          Le simulateur d’embauche n’est pas disponible actuellement.
+          <br />
+          Retrouvez les autres simulateurs autour du thème de l’entreprise, sur
+          le site:{" "}
+          <a
+            title="Voir les simulateurs"
+            href="https://mon-entreprise.urssaf.fr/"
+          >
+            https://mon-entreprise.urssaf.fr/
+          </a>
+        </p>
+      ) : (
+        <div ref={simRef} className={fr.cx("fr-col-12")} />
+      )}
+    </ContainerSimulator>
+  );
+});
+
+export default HiringSimulator;

packages/code-du-travail-frontend/src/modules/outils/simulateur-embauche/index.ts

@@ -0,0 +1 @@
+export * from "./HiringSimulator";

packages/code-du-travail-frontend/src/modules/outils/type.ts

@@ -0,0 +1,3 @@
+import { DocumentElasticWithSource, Tool } from "@socialgouv/cdtn-types";
+
+export type ElasticTool = DocumentElasticWithSource<Tool>;

packages/code-du-travail-frontend/src/outils/index.ts

@@ -5,7 +5,6 @@ export * from "./DureePreavisLicenciement";
 export * from "./IndemniteLicenciement";
 export * from "./HeuresRechercheEmploi";
 export * from "./IndemnitePrecarite";
-export * from "./SimulateurEmbauche";
 export * from "./DismissalProcess";
 export * from "./RuptureCoventionnelle";
 export * from "./api";