Merge pull request #42 from betagouv/feat/page-resultat-incertain

Feat/page resultat incertain
betagouv · Oct 23, 2023 · 3ad1bf2 · 3ad1bf2
2 parents 1203a09 + 9fbe8c1
commit 3ad1bf2
Show file tree

Hide file tree

Showing 24 changed files with 440 additions and 267 deletions.
diff --git a/anssi-nis2-ui/package.json b/anssi-nis2-ui/package.json
@@ -32,6 +32,7 @@
     "react-helmet": "^6.1.0",
     "react-markdown": "^9.0.0",
     "react-router-dom": "^6.15.0",
+    "ts-pattern": "^5.0.5",
     "tss-react": "^4.8.8"
   },
   "devDependencies": {

diff --git a/anssi-nis2-ui/src/App.css b/anssi-nis2-ui/src/App.css
@@ -31,6 +31,20 @@
     content: "";
 }
 
+.fr-nis2-icon-in-progress::before {
+    flex: 0 0 auto;
+    display: inline-block;
+    vertical-align: calc((0.75em - var(--icon-size)) * 0.5);
+    background-color: currentColor;
+    width: var(--icon-size);
+    height: var(--icon-size);
+    -webkit-mask-size: 100% 100%;
+    mask-size: 100% 100%;
+    -webkit-mask-image: url(assets/in-progress.svg);
+    mask-image: url(assets/in-progress.svg);
+    content: "";
+}
+
 legend.fr-text--regular,
 .fr-text--medium {
     font-weight: 500 !important;
@@ -69,10 +83,6 @@ legend.fr-text--medium {
         background-color: var(--green-menthe-975-75);
     }
 
-    &.fr-nis2-non-eligible {
-        background-color: var(--yellow-tournesol-925-125);
-    }
-
     &.fr-nis2-eligible {
         & h4, & .fr-nis2-icone {
             color: var(--green-menthe-sun-373-moon-652, #37635F);
@@ -83,6 +93,10 @@ legend.fr-text--medium {
         }
     }
 
+    &.fr-nis2-non-eligible {
+        background-color: var(--yellow-tournesol-925-125);
+    }
+
     &.fr-nis2-non-eligible {
         & h4, & .fr-nis2-icone {
             color: #A88E26;
@@ -93,6 +107,37 @@ legend.fr-text--medium {
         }
     }
 
+    &.fr-nis2-incertain {
+        background-color: var(--orange-terre-battue-975-75, #FEF4F2);
+        background-repeat: no-repeat;
+        background-position: top center;
+        background-image: url(assets/in-progress.svg);
+        background-position-y: 1rem;
+
+        padding-top: 7.5rem !important;
+
+        .fr-icon--xl::before,
+        .fr-icon--xl::after {
+            display: none;
+        }
+
+        .fr-icon--xl {
+            display: none;
+        }
+
+        & h4 {
+            font-size: 1.375rem;
+        }
+
+        & h4, & p {
+            color: var(--text-title-grey, #161616);
+        }
+
+        & .fr-nis2-icone {
+            text-align: center;
+        }
+    }
+
     .fr-icon--xl {
         font-size: 3rem !important;
     }

diff --git a/anssi-nis2-ui/src/Components/PagesEdito/PageEdito.tsx b/anssi-nis2-ui/src/Components/PagesEdito/PageEdito.tsx
@@ -1,11 +1,11 @@
 import { BandeauBleuMarianne } from "../General/BandeauBleuMarianne.tsx";
 import MiseEnPage from "../MiseEnPage.tsx";
-import { DefaultComponentExtensible, DefaultProps } from "../../Services/Props";
+import {
+  DefaultComponentExtensible,
+  PageEditoProps,
+} from "../../Services/Props";
 
-type PageEditoProps = {
-  titre: string;
-} & DefaultProps;
-export const PageEdito: DefaultComponentExtensible<PageEditoProps> = ({
+const PageEdito: DefaultComponentExtensible<PageEditoProps> = ({
   titre,
   children,
 }: PageEditoProps) => (
@@ -22,3 +22,5 @@ export const PageEdito: DefaultComponentExtensible<PageEditoProps> = ({
     </div>
   </MiseEnPage>
 );
+
+export default PageEdito;
diff --git a/anssi-nis2-ui/src/Components/Simulateur/Resultats/LigneResultat.tsx b/anssi-nis2-ui/src/Components/Simulateur/Resultats/LigneResultat.tsx
@@ -5,6 +5,7 @@ import Markdown, { Components } from "react-markdown";
 import { useEffect, useState } from "react";
 import { DefaultComponentExtensible } from "../../../Services/Props";
 import { SimulateurResultatProps } from "../../../Services/Simulateur/Props/simulateurResultatProps";
+// import MDPrecisionsSurReponseNegative from "../../../References/precisionsSurReponseNegative.md";
 
 const decaleTitre4Niveaux: Partial<Components> = {
   h1: "h4",
@@ -17,9 +18,10 @@ export const LigneResultat: DefaultComponentExtensible<
 > = ({ contenuResultat }: SimulateurResultatProps) => {
   const [contenuPrecistions, setContenuPrecisions] = useState("");
   useEffect(() => {
-    fetch(`/contenus/${contenuResultat.fichierPrecisionSurReponse}.md`)
-      .then((reponse) => reponse.text())
-      .then(setContenuPrecisions);
+    contenuResultat.fichierPrecisionSurReponse &&
+      fetch(`/contenus/${contenuResultat.fichierPrecisionSurReponse}.md`)
+        .then((reponse) => reponse.text())
+        .then(setContenuPrecisions);
   }, [contenuResultat.fichierPrecisionSurReponse]);
   return (
     <RowContainer>
@@ -30,22 +32,27 @@ export const LigneResultat: DefaultComponentExtensible<
             contenuResultat.classeDivResultat,
           ].join(" ")}
         >
-          <div className="fr-grid-row">
-            <div className="fr-col fr-nis2-icone">
-              <Icon
-                className={[contenuResultat.classIcone, "fr-icon--xl"].join(
-                  " ",
-                )}
-              />
+          {contenuResultat.classIcone && (
+            <div className="fr-grid-row">
+              <div className="fr-col fr-nis2-icone">
+                <Icon
+                  className={[contenuResultat.classIcone, "fr-icon--xl"].join(
+                    " ",
+                  )}
+                />
+              </div>
             </div>
-          </div>
+          )}
           <h4>{contenuResultat.titre}</h4>
+          {contenuResultat.sousTitre && <p>{contenuResultat.sousTitre}</p>}
         </div>
-        <div className="fr-px-4w fr-py-3w fr-nis2-resultat-explications">
-          <Markdown components={decaleTitre4Niveaux}>
-            {contenuPrecistions}
-          </Markdown>
-        </div>
+        {contenuResultat.fichierPrecisionSurReponse && (
+          <div className="fr-px-4w fr-py-3w fr-nis2-resultat-explications">
+            <Markdown components={decaleTitre4Niveaux}>
+              {contenuPrecistions}
+            </Markdown>
+          </div>
+        )}
       </CenteredContainer>
     </RowContainer>
   );

diff --git a/anssi-nis2-ui/src/Components/Simulateur/SimulateurEtapeForm.tsx b/anssi-nis2-ui/src/Components/Simulateur/SimulateurEtapeForm.tsx
@@ -12,6 +12,7 @@ import { SimulateurEtapeRenderedComponent } from "../../Services/Simulateur/Prop
 import { InformationEtapeForm } from "../../Services/Simulateur/informationsEtape.ts";
 import { SimulateurEtapeRenderedProps } from "../../Services/Simulateur/Props/simulateurEtapeProps";
 import { noRefClick } from "../../Services/Echaffaudages/AssistantsEchaffaudages.ts";
+import { AidezNousAmeliorerService } from "../AidezNousAmeliorerService.tsx";
 
 export const SimulateurEtapeForm: SimulateurEtapeRenderedComponent = ({
   propageActionSimulateur,
@@ -66,30 +67,37 @@ export const SimulateurEtapeForm: SimulateurEtapeRenderedComponent = ({
   );
 
   return (
-    <RowContainer className="fr-py-3w">
-      <CenteredContainer className="fr-background-alt--grey">
-        <Stepper
-          currentStep={etatEtapes.numeroEtapeCourante}
-          nextTitle={etatEtapes.titreSuivant}
-          stepCount={etatEtapes.collectionEtapes.nombreEtapes}
-          title={informationsEtape.titre}
-          className="fr-mb-5w"
-        />
+    <>
+      <RowContainer className="fr-py-3w">
+        <CenteredContainer className="fr-background-alt--grey">
+          <Stepper
+            currentStep={etatEtapes.numeroEtapeCourante}
+            nextTitle={etatEtapes.titreSuivant}
+            stepCount={etatEtapes.collectionEtapes.nombreEtapes}
+            title={informationsEtape.titre}
+            className="fr-mb-5w"
+          />
 
-        <hr className="fr-pb-5w" />
+          <hr className="fr-pb-5w" />
 
-        <EtapeCourante
-          propageActionSimulateur={propageActionSimulateur}
-          donneesFormulaire={donneesFormulaire}
-        />
+          <EtapeCourante
+            propageActionSimulateur={propageActionSimulateur}
+            donneesFormulaire={donneesFormulaire}
+          />
 
-        <StepperNavigation
-          validationReponses={informationsEtape.validationReponses}
-          donneesFormulaire={donneesFormulaire}
-          onClickPrevious={etapePrecedenteHandlerConcret}
-          onClickNext={etapeSuivantHandlerConcret}
-        />
-      </CenteredContainer>
-    </RowContainer>
+          <StepperNavigation
+            validationReponses={informationsEtape.validationReponses}
+            donneesFormulaire={donneesFormulaire}
+            onClickPrevious={etapePrecedenteHandlerConcret}
+            onClickNext={etapeSuivantHandlerConcret}
+          />
+        </CenteredContainer>
+      </RowContainer>
+      <RowContainer className=" fr-mb-7w">
+        <div className="fr-col-12 fr-col-md-10 fr-col-lg-8">
+          <AidezNousAmeliorerService />
+        </div>
+      </RowContainer>
+    </>
   );
 };
diff --git a/anssi-nis2-ui/src/Domaine/Simulateur/Operations/FiltreActivites.ts b/anssi-nis2-ui/src/Domaine/Simulateur/Operations/FiltreActivites.ts
@@ -28,3 +28,7 @@ export const fabriqueListeActivitesDesSecteurs = (
     }, new Set<Activite>()),
   );
 };
+export const auMoinsUneActiviteListee = (activites: Activite[]) =>
+  activites && activites.length && activites.some(estActiviteListee);
+export const aucuneActiviteListee = (activites: Activite[]) =>
+  activites.every(estActiviteAutre);
diff --git a/anssi-nis2-ui/src/Domaine/Simulateur/Operations/FiltresSecteurs.ts b/anssi-nis2-ui/src/Domaine/Simulateur/Operations/FiltresSecteurs.ts
@@ -0,0 +1,5 @@
+import { SecteurActivite } from "../SecteursActivite";
+import { estSecteurListe } from "./operationsSecteurs.ts";
+
+export const auMoinsUnSecteurListe = (secteurs: SecteurActivite[]) =>
+  secteurs.some(estSecteurListe);
diff --git a/anssi-nis2-ui/src/Domaine/Simulateur/Operations/FiltresTailleEntite.ts b/anssi-nis2-ui/src/Domaine/Simulateur/Operations/FiltresTailleEntite.ts
@@ -0,0 +1,20 @@
+import {
+  TrancheChiffreAffaire,
+  TrancheNombreEmployes,
+} from "../ChampsSimulateur";
+
+export const estPetiteEntreprise = (
+  nombreEmployes: TrancheNombreEmployes[],
+  chiffreAffaire: TrancheChiffreAffaire[],
+) => nombreEmployes.includes("petit") && chiffreAffaire.includes("petit");
+export const estMoyenneEntreprise = (
+  nombreEmployes: TrancheNombreEmployes[],
+  chiffreAffaire: TrancheChiffreAffaire[],
+) =>
+  (nombreEmployes.includes("moyen") && chiffreAffaire.includes("moyen")) ||
+  (nombreEmployes.includes("moyen") && chiffreAffaire.includes("petit")) ||
+  (nombreEmployes.includes("petit") && chiffreAffaire.includes("moyen"));
+export const estGrandeEntreprise = (
+  nombreEmployes: TrancheNombreEmployes[],
+  chiffreAffaire: TrancheChiffreAffaire[],
+) => nombreEmployes.includes("grand") || chiffreAffaire.includes("grand");