put back simulateur as it was

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

@@ -1,8 +1,8 @@
-"use client";
 import { Highlight } from "@codegouvfr/react-dsfr/Highlight";
 import { fr } from "@codegouvfr/react-dsfr";
 import { ContainerSimulator } from "../../layout/ContainerSimulator";
 import { RelatedItem } from "../../documents";
+import { SimulateurEmbauche } from "./SimulateurEmbauche";
 
 type Props = {
   relatedItems: {
@@ -26,13 +26,8 @@ export const HiringSimulator = ({ relatedItems, description }: Props) => {
         sur la situation d'une personne célibataire sans enfants ni
         patrimoine.
       </Highlight>
-      <div className={fr.cx("fr-col-12")} suppressHydrationWarning>
-        {/* eslint-disable-next-line @next/next/no-sync-scripts */}
-        <script
-          src="https://mon-entreprise.urssaf.fr/simulateur-iframe-integration.js"
-          data-couleur="#417DC4"
-          id="script-simulateur-embauche"
-        />
+      <div className={fr.cx("fr-col-12")}>
+        <SimulateurEmbauche></SimulateurEmbauche>
       </div>
     </ContainerSimulator>
   );

packages/code-du-travail-frontend/src/modules/outils/simulateur-embauche/SimulateurEmbauche.js

@@ -0,0 +1,66 @@
+"use client";
+import React from "react";
+
+class SimulateurEmbauche extends React.PureComponent {
+  simRef = React.createRef();
+  state = {
+    simulator: "loading",
+  };
+
+  onError = (error) => {
+    this.setState({ error, simulator: "error" });
+  };
+
+  onLoad = () => {
+    this.setState({ simulator: "success" });
+    if (
+      !this.simRef.current ||
+      !this.simRef.current.querySelector("#simulateurEmbauche")
+    ) {
+      this.setState({ error: "empty child", simulator: "error" });
+    }
+  };
+
+  componentDidMount() {
+    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 = this.onLoad;
+    script.onerror = this.onError;
+
+    if (this.simRef.current) {
+      this.simRef.current.appendChild(script);
+    }
+  }
+
+  render() {
+    const { simulator } = this.state;
+    return (
+      <>
+        {simulator === "loading" && <p>Chargement de l’outil</p>}
+        {simulator === "error" ? (
+          <>
+            <p>Le simulateur d’embauche n’est pas disponible actuellement.</p>
+            <p>
+              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={this.simRef} />
+        )}
+      </>
+    );
+  }
+}
+
+export { SimulateurEmbauche };