feat: 6197 migration du simulateur brutnet (#6205)

* fix: dsfr * fix: dsfr * fix: dsfr * fix: tests * fix: build * fix: build * fix: build * feat(dsfr): ajout du footer (#6079) * feat: add code * fix: tests * fix: tests * fix: tests * fix: tests * fix: tests * fix: dernier titi * fix: autoclick * fix: bug * feat(css): ajout de la lib `panda-css` (zero-runtime) (#6085) * fix: pandacss * fix: build * fix: build * feat(dsfr): ajout de la page stats (#6090) * fix: pandacss * fix: build * fix: build * fix(stats): add page * fix: stats * fix: tests * fix: tests * Update packages/code-du-travail-frontend/src/modules/mentions-legales/index.tsx Co-authored-by: Martial Maillot <[email protected]> * fix(recherche): remonter les pré-qualifiés dans la recherche (#6082) * chore(release): version 4.151.1 * fix(csp): remove reporting on sentry (#6092) * fix: config * fix: config * fix: config * empty * fix: config * empty * Update packages/code-du-travail-frontend/src/modules/mentions-legales/index.tsx Co-authored-by: Martial Maillot <[email protected]> * Update packages/code-du-travail-frontend/src/modules/mentions-legales/index.tsx Co-authored-by: Martial Maillot <[email protected]> * fix: config * chore(dsfr): mise à jour de la version DSFR * fix(dsfr): ignore les exceptions d'hydratation * feat(tests): ajout du module de testing (#6096) * fix: tests * fix: tests * fix: command * fix: merge date * fix: tests * fix: tests * fix: tests * fix: tests * fix(dsfr): ignore les exceptions d'hydratation * fix: readme * feat(DSFR): migration de la page article du code du travail (#6099) * feat: 6093 dsfr page politique de confidentialit (#6094) * feat: implémentation page politique confidentialité dsfr * chore: clean * fix: iframe dark mode * chore: refacto + e2e test * feat: convert a to Link * chore: review * chore: rename test --------- Co-authored-by: victor <[email protected]> * feat(dsfr): ajout des liens d'évitement (#6120) * feat(dsfr): migration de la page plan du site (#6097) * feat(dsfr): mise à jour des snapshots * feat(dsfr): mise à jour des snapshots * chore(dsfr): mise à jour de la lib DSFR * feat(dsfr): ajout du composant "Avez-vous trouvé une réponse à votre question" (#6121) * fix: merge date * fix: satisfaction * fix: retours preavis * fix: retours preavis * fix: tests * move feedback component to the page articleCodeDuTravail.tsx * clean-up css * fix: feedback * fix: feedback * fix: tests * fix: tests * feat(dsfr): création du composant "Besoin de plus d'information" (#6135) * fix: ui * fix: composant --------- Co-authored-by: carolineBda <[email protected]> Co-authored-by: Martial Maillot <[email protected]> * fix: retours * fix: tests * feat: nouvelle API pour les articles du code du travail (#6132) Co-authored-by: carolineBda <[email protected]> * fix(spec) : fix de la spec article-code-du-travail.spec.ts * fix(dsfr): ajout de la config pour supprimer le `insafe-inline` des `scripts` dans les `csp` (#6151) * feat(dsfr): ajout de matomo pour tracker les events (#6157) * fix: matomo * fix: matomo --------- Co-authored-by: Martial Maillot <[email protected]> * fix(feedback): ajout d'une logique de caractères restants (#6156) * fix: tests * feat: limiter à 500 caractères la saisie * feat: limiter à 500 caractères la saisie --------- Co-authored-by: Martial Maillot <[email protected]> * feat(dsfr): ajout du nouveau logo (#6159) * feat(dsfr): ajout des pages d'erreurs (404 + 500) (#6146) * fix: pages * fix: 404 * fix: tests * fix: tests * fix: tests * fix: lint * test error * fix errors * Fix spec * add button to test error page * feat: force error 500 for testing purpose * feat: revert errors --------- Co-authored-by: carolineBda <[email protected]> Co-authored-by: Martial Maillot <[email protected]> * feat: séparation des anciennes API et des nouvelles (#6183) * fix(article code du travail): retrait du tag Code du travail (#6182) * feat(config): correction de `husky`, ajout de `prettier` pour le formattage et de `lint-staged` pour runner le formattage au `precommit` (#6192) * fix: prettier * fix: prettier * fix: readme * fix: readme * fix: bug * fix: prettier * fix: prettier * fix: tests * fix: tests * fix: prettier * fix: prettier * fix: branch * merge dev * feat: implémentation simulateur brut net * chore: fix ts * chore: snap * chore: clean * chore: clean * chore: clean * chore: review * feat: update responsive * Revert "Merge branch 'dev' into simulateur-brut-net-dsfr" This reverts commit 0748928, reversing changes made to cd15bc7. * chore: clean * feat: chore clean * chore: clean * chore: remove undesired files * chore: remove undesired files * chore: clean * fix: meta description share * feat: switch simu brut net couleur par defaut * fix: ts * fix: bug load --------- Co-authored-by: maxgfr <[email protected]> Co-authored-by: Caroline <[email protected]> Co-authored-by: Martial Maillot <[email protected]> Co-authored-by: Social Groovy Bot <[email protected]> Co-authored-by: victor <[email protected]> Co-authored-by: carolineBda <[email protected]>
SocialGouv · Oct 22, 2024 · 259e602 · 259e602
1 parent d78577a
commit 259e602
Show file tree

Hide file tree

Showing 10 changed files with 218 additions and 84 deletions.
diff --git a/packages/code-du-travail-frontend/app/outils/simulateur-embauche/page.tsx b/packages/code-du-travail-frontend/app/outils/simulateur-embauche/page.tsx
@@ -0,0 +1,49 @@
+import { DsfrLayout } from "../../../src/modules/layout";
+import { HiringSimulator } from "../../../src/modules/outils/simulateur-embauche";
+import {
+  DocumentElasticResult,
+  fetchRelatedItems,
+} from "../../../src/modules/documents";
+import { fetchTool } from "../../../src/modules/outils";
+import { notFound } from "next/navigation";
+import { generateDefaultMetadata } from "../../../src/modules/common/metas";
+import { ElasticTool } from "../../../src/modules/outils/type";
+
+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}
+        description={tool.description}
+      />
+    </DsfrLayout>
+  );
+}
+
+const getTool = async () => {
+  const tool: DocumentElasticResult<ElasticTool> = await fetchTool(
+    "simulateur-embauche"
+  );
+
+  if (!tool) {
+    return notFound();
+  }
+  return tool;
+};
+
+export default HiringSimulatorPage;
diff --git a/packages/code-du-travail-frontend/cypress/integration/light/outils/brut-net.spec.ts b/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");

diff --git a/packages/code-du-travail-frontend/pages/outils/[slug].tsx b/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,
 };

diff --git a/packages/code-du-travail-frontend/src/modules/layout/ContainerSimulator.tsx b/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>
+  );
+};
diff --git a/packages/code-du-travail-frontend/src/modules/outils/queries.ts b/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,27 @@ export const fetchAllTools = 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", "title"], {
+    query: {
+      bool: {
+        filter: [
+          { term: { source: SOURCES.TOOLS } },
+          { term: { slug } },
+          { term: { isPublished: true } },
+        ],
+      },
+    },
+    size: 1,
+  });
+  if (!result) {
+    throw new Error("Outils non trouvé");
+  }
+  return result;
+};
diff --git a/packages/code-du-travail-frontend/src/modules/outils/simulateur-embauche/HiringSimulator.tsx b/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;
+  }[];
+  description: string;
+};
+
+export const HiringSimulator = ({ relatedItems, description }: 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.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>
+  );
+};
diff --git a/packages/code-du-travail-frontend/src/modules/outils/simulateur-embauche/index.ts b/packages/code-du-travail-frontend/src/modules/outils/simulateur-embauche/index.ts
@@ -0,0 +1 @@
+export * from "./HiringSimulator";
diff --git a/packages/code-du-travail-frontend/src/modules/outils/type.ts b/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>;
diff --git a/packages/code-du-travail-frontend/src/outils/SimulateurEmbauche.js b/packages/code-du-travail-frontend/src/outils/SimulateurEmbauche.js
diff --git a/packages/code-du-travail-frontend/src/outils/index.ts b/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";