feat: 6197 migration du simulateur brutnet

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

@@ -0,0 +1,40 @@
+import { DsfrLayout } from "../../../src/modules/layout";
+import { HiringSimulator } from "../../../src/modules/outils/simulateur-embauche";
+import { fetchRelatedItems } from "../../../src/modules/documents";
+import { fetchTool } from "../../../src/modules/outils";
+import { notFound } from "next/navigation";
+import { generateDefaultMetadata } from "../../../src/modules/common/metas";
+
+export async function generateMetadata() {
+  const { title, description } = await getTool();
+
+  return generateDefaultMetadata({
+    title: `Simulateur - ${title}`,
+    description: description,
+    path: `/outils/simulateur-embauche`,
+  });
+}
+
+async function HiringSimulatorPage() {
+  const tool = await getTool();
+  const relatedItems = await fetchRelatedItems(
+    { _id: tool._id },
+    "simulateur-embauche"
+  );
+  return (
+    <DsfrLayout>
+      <HiringSimulator relatedItems={relatedItems} />
+    </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,10 @@ 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.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/modules/layout/ContainerSimulator.tsx

@@ -0,0 +1,47 @@
+import { fr } from "@codegouvfr/react-dsfr";
+import { Breadcrumb, BreadcrumbProps } from "@codegouvfr/react-dsfr/Breadcrumb";
+
+import { RelatedItems } from "../common/RelatedItems";
+import { Share } from "../common/Share";
+import { RelatedItem } from "../documents";
+import { Feedback } from "../layout/feedback";
+
+type Props = {
+  relatedItems: { items: RelatedItem[]; title: string }[];
+  title: string;
+  description: string;
+  children: React.ReactNode;
+} & Pick<BreadcrumbProps, "segments">;
+
+export const ContainerSimulator = ({
+  children,
+  relatedItems,
+  title,
+  description,
+  segments = [],
+}: Props) => {
+  return (
+    <div className={fr.cx("fr-grid-row")}>
+      <Breadcrumb
+        currentPageLabel={title}
+        homeLinkProps={{
+          href: "/",
+        }}
+        segments={segments}
+        className={fr.cx("fr-mb-2v")}
+      />
+      <div>
+        {children}
+        <div className={fr.cx("fr-col-12", "fr-col-md-7", "fr-my-12v")}>
+          <Feedback />
+        </div>
+      </div>
+      <div className={fr.cx("fr-col-12", "fr-col-md-8")}>
+        <RelatedItems relatedItems={relatedItems} />
+      </div>
+      <div className={fr.cx("fr-col-12", "fr-col-md-4", "fr-mb-12v")}>
+        <Share title={title} metaDescription={description} />
+      </div>
+    </div>
+  );
+};

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 fetchAllTools = async <K extends keyof Tool>(
   fields: K[]
@@ -53,3 +55,23 @@ export const fetchAllTools = async <K extends keyof Tool>(
     .map(({ _source }) => _source)
     .filter((source) => source !== undefined);
 };
+
+export const fetchTool = async (
+  slug: string
+): Promise<DocumentElasticResult<ElasticTool> | undefined> => {
+  return await fetchDocument<
+    ElasticTool,
+    keyof DocumentElasticResult<ElasticTool>
+  >(["description", "title"], {
+    query: {
+      bool: {
+        filter: [
+          { term: { source: SOURCES.TOOLS } },
+          { term: { slug } },
+          { term: { isPublished: true } },
+        ],
+      },
+    },
+    size: 1,
+  });
+};

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

@@ -0,0 +1,88 @@
+"use client";
+import { Highlight } from "@codegouvfr/react-dsfr/Highlight";
+import { fr } from "@codegouvfr/react-dsfr";
+import { useEffect, createRef, useState } from "react";
+import { ContainerSimulator } from "../../layout/ContainerSimulator";
+import { RelatedItem } from "../../documents";
+
+type Props = {
+  relatedItems: {
+    items: RelatedItem[];
+    title: string;
+  }[];
+};
+
+export const HiringSimulator = ({ relatedItems }: Props) => {
+  const simRef = createRef<HTMLDivElement>();
+  const [state, setState] = useState({
+    error: "",
+    simulator: "loading",
+  });
+  const onError = (error) => {
+    setState({ error, simulator: "error" });
+  };
+
+  const onLoad = () => {
+    setState({ simulator: "success", error: "" });
+    if (
+      !simRef.current ||
+      !simRef.current.querySelector("#simulateurEmbauche")
+    ) {
+      setState({ error: "empty child", simulator: "error" });
+    }
+  };
+  useEffect(() => {
+    const script = document.createElement("script");
+
+    script.src =
+      "https://mon-entreprise.urssaf.fr/simulateur-iframe-integration.js";
+    script.async = true;
+    script.dataset.couleur = "#2975D1";
+    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="Calculer le salaire brut/net"
+      description="description"
+      segments={[{ label: "Simulateurs", linkProps: { href: "/outils" } }]}
+    >
+      <h1 id="simulateur-embauche">Calculer le salaire brut/net</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>
+  );
+};

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";