(hel-678) Changement du comportement de l’affichage du message. Et de…

src/frontend/configuration/wording/WordingFr.tsx

@@ -602,8 +602,9 @@ export class WordingFr implements Wording {
   //Comparaison
   //--Alert-comparaison
   readonly ALERTE_TYPE_DIFFERENT_TITRE: string = "Message d'information";
-  readonly ALERTE_TYPE_DIFFERENT_CORPS: string =
-    "Pour réaliser une comparaison, vous devez sélectionner des établissements de structure identique (Entité juridique, Etablissement sanitaire ou Etablissement médico-social)";
+  readonly ALERTE_TYPE_DIFFERENT_CORPS: string = `Actuellement, vous ne pouvez sélectionner que des établissements médico-sociaux, pour réaliser une comparaison.
+
+A venir : la comparaison des établissements sanitaires et entités juridiques.`;
   readonly TITRE_AJOUTER_DES_ETABLISSEMENTS: string = "Ajouter un ou plusieurs établissements";
   readonly LIBELLE_AJOUTER_DES_ETABLISSEMENTS: string = "A partir d'une recherche";
   readonly INFOBULLE_MOYENNE_ADMIN_NATIONAL: string = "Les données non renseignées sont exclues du calcul de la moyenne.";

src/frontend/ui/recherche-avancee/resultat-recherche-avancee/ResultatRechercheAvancee.module.css

@@ -0,0 +1,3 @@
+.multiline {
+  white-space: pre-line;
+}

src/frontend/ui/recherche-avancee/resultat-recherche-avancee/ResultatRechercheAvancee.tsx

@@ -1,12 +1,13 @@
 import { useContext, useState } from "react";
 
 import "@gouvfr/dsfr/dist/component/alert/alert.min.css";
-import { WordingFr } from "../../../configuration/wording/WordingFr";
 import { RechercheAvanceeContext } from "../../commun/contexts/RechercheAvanceeContext";
+import { useDependencies } from "../../commun/contexts/useDependencies";
 import { Table } from "../../commun/Table/Table";
 import { ComparaisonViewModel } from "../../home/ComparaisonViewModel";
 import { RechercheViewModel } from "../../home/RechercheViewModel";
 import { TableFooterRechercheAvancee } from "./resultat-recherche-avancee-footer/RechercheAvanceeFooter";
+import styles from "./ResultatRechercheAvancee.module.css"
 import { TableHeaderRechercheAvancee } from "./TableHeaderRechercheAvancee";
 
 const tableHeaders = [
@@ -34,8 +35,7 @@ type ResultatRechercheAvanceeProps = Readonly<{
 export const ResultatRechercheAvancee = ({ data, nombreRésultats, page, setPage, lastPage }: ResultatRechercheAvanceeProps) => {
   const [selectedRows, setSelectedRows] = useState<SelectedRows>({ 1: [] });
   const rechercheAvanceeContext = useContext(RechercheAvanceeContext);
-  const [showAlert, setShowAlert] = useState<boolean>(false);
-  const wording = new WordingFr();
+  const { wording } = useDependencies();
 
   const isAllSelected = data.length > 0 && selectedRows[page] && selectedRows[page].length === data.length;
 
@@ -47,22 +47,19 @@ export const ResultatRechercheAvancee = ({ data, nombreRésultats, page, setPage
     }
   };
 
+  const showAlert = () => {
+    return Object.values(selectedRows).flat().length >= 2;
+  }
+
   return (
     <>
-      {showAlert && (
-        <div className="fr-alert fr-alert--info fr-mt-2w fr-mb-1w">
+      {showAlert() && (
+        <div className={"fr-alert fr-alert--info fr-mt-2w fr-mb-1w " + styles['multiline']}>
           <h3 className="fr-alert__title">{wording.ALERTE_TYPE_DIFFERENT_TITRE}</h3>
-          <p>{wording.ALERTE_TYPE_DIFFERENT_CORPS}</p>{" "}
-          <button
-            className="fr-btn--close fr-btn"
-            onClick={() => {
-              setShowAlert(false);
-            }}
-            title="Masquer le message"
-          ></button>
+          <p>{wording.ALERTE_TYPE_DIFFERENT_CORPS}</p>
         </div>
       )}
-      <TableHeaderRechercheAvancee selectedRows={selectedRows} setShowAlert={setShowAlert} />
+      <TableHeaderRechercheAvancee selectedRows={selectedRows} />
       <Table
         data={data}
         handleSelectAll={handleSelectAll}

src/frontend/ui/recherche-avancee/resultat-recherche-avancee/TableHeaderRechercheAvancee.tsx

@@ -1,39 +1,36 @@
 import { useRouter } from "next/router";
-import { Dispatch, SetStateAction, useEffect, useState } from "react";
+import { useEffect, useState } from "react";
 
+import { AttribuesDefaults } from "../model/Attribues";
 import { SelectedRows } from "./ResultatRechercheAvancee";
 
 type TableHeaderRechercheAvanceeProps = Readonly<{
   selectedRows: SelectedRows;
-  setShowAlert: Dispatch<SetStateAction<boolean>>;
 }>;
 
-export const TableHeaderRechercheAvancee = ({ selectedRows, setShowAlert }: TableHeaderRechercheAvanceeProps) => {
+export const TableHeaderRechercheAvancee = ({ selectedRows }: TableHeaderRechercheAvanceeProps) => {
   const router = useRouter();
   const [disabledButton, setDisabledButton] = useState(false);
 
   useEffect(() => {
     setDisabledButton(false);
   }, [selectedRows])
 
+  const isCompareButtonDisabled = () => {
+    const formattedSelectedRows = Object.values(selectedRows).flat();
+    return formattedSelectedRows.length < 2 || formattedSelectedRows.some((row) => row.type !== AttribuesDefaults.etablissementMedicoSocial);
+  }
+
   const onClickComparer = () => {
     const formattedSelectedRows = Object.values(selectedRows).flat();
     const firstType = formattedSelectedRows[0].type;
-    const hasDifferentTypes = formattedSelectedRows.some((row) => row.type !== firstType);
     const listFinessNumbers = formattedSelectedRows.map((row) => row.numéroFiness);
 
-    if (hasDifferentTypes) {
-      setShowAlert(true);
-      setDisabledButton(true);
-    } else {
-      // Navigate if types are the same
-      sessionStorage.setItem("listFinessNumbers", JSON.stringify(listFinessNumbers));
-      sessionStorage.setItem("comparaisonType", firstType);
-      document.cookie = `list=${encodeURIComponent(JSON.stringify(listFinessNumbers))}; path=/`;
-      document.cookie = `type=${encodeURIComponent(firstType)}; path=/`;
-      setShowAlert(false);
-      router.push("/comparaison");
-    }
+    sessionStorage.setItem("listFinessNumbers", JSON.stringify(listFinessNumbers));
+    sessionStorage.setItem("comparaisonType", firstType);
+    document.cookie = `list=${encodeURIComponent(JSON.stringify(listFinessNumbers))}; path=/`;
+    document.cookie = `type=${encodeURIComponent(firstType)}; path=/`;
+    router.push("/comparaison");
   };
 
   return (
@@ -43,7 +40,7 @@ export const TableHeaderRechercheAvancee = ({ selectedRows, setShowAlert }: Tabl
         <li>
           <button
             className="fr-btn fr-btn--icon-left fr-btn--secondary"
-            disabled={Object.values(selectedRows).flat().length < 2 || disabledButton}
+            disabled={isCompareButtonDisabled() || disabledButton}
             id="table-header-button-primary-7842"
             onClick={onClickComparer}
           >