feat(admin): added prerequisites summary block to certification registry manager update certification page

Author: agarbe

packages/reva-admin-react/cypress/e2e/responsable-certifications/certifications/update-certification-page/fixtures/certification-bp-boucher.json

@@ -14,6 +14,7 @@
         "label": "Niveau 4 : Baccalauréat"
       },
       "domains": [],
+      "prerequisites": [],
       "competenceBlocs": [
         {
           "id": "008a6fab-55ad-4412-ab17-56bc4b8e2fd0",
@@ -51,7 +52,8 @@
               "id": "a8e39ba6-9463-48b2-aa99-f8ce1b83904c",
               "label": "Appliquer les règles relatives à l’alimentation, à l’hygiène, aux locaux et équipements dans l’environnement professionnel du boucher et de la boucherie"
             }
-          ]
+          ],
+          "prerequisites": []
         }
       ]
     }

packages/reva-admin-react/cypress/e2e/responsable-certifications/certifications/update-certification-page/update-certification-page.cy.ts

@@ -124,4 +124,23 @@ context("when i access the update certification page ", () => {
       );
     });
   });
+  context("prerequisites summary card", () => {
+    it("display the a default message when the certification has no prerequisite", function () {
+      interceptCertification();
+
+      cy.admin(
+        "/responsable-certifications/certifications/bf78b4d6-f6ac-4c8f-9e6b-d6c6ae9e891b",
+      );
+      cy.wait("@activeFeaturesForConnectedUser");
+      cy.wait("@getOrganismForAAPVisibilityCheck");
+      cy.wait("@getMaisonMereCGUQuery");
+      cy.wait(
+        "@getCertificationForCertificationRegistryManagerUpdateCertificationPage",
+      );
+
+      cy.get(
+        '[data-test="prerequisites-summary-card"] [data-test="no-prerequisite-message"]',
+      ).should("exist");
+    });
+  });
 });

packages/reva-admin-react/src/app/responsable-certifications/certifications/[certificationId]/page.tsx

@@ -3,6 +3,8 @@ import { useParams } from "next/navigation";
 import { useUpdateCertificationPage } from "./updateCertification.hook";
 import { CertificationCompetenceBlocsSummaryCard } from "@/components/certifications/certification-competence-blocs-summary-card/CertificationCompetenceBlocsSummaryCard";
 import { useRouter } from "next/navigation";
+import { SectionCard } from "../../../../components/card/section-card/SectionCard";
+import { SmallNotice } from "../../../../components/small-notice/SmallNotice";
 
 type CertificationForPage = Exclude<
   ReturnType<typeof useUpdateCertificationPage>["certification"],
@@ -38,20 +40,39 @@ const PageContent = ({
         validée et visible sur la plateforme, ces informations seront affichées
         aux AAP et aux candidats.
       </p>
-      <CertificationCompetenceBlocsSummaryCard
-        isEditable
-        competenceBlocs={certification.competenceBlocs}
-        onAddBlocCompetenceButtonClick={() =>
-          router.push(
-            `/responsable-certifications/certifications/${certification.id}/bloc-competence/add`,
-          )
-        }
-        onUpdateCompetenceBlocButtonClick={(blocId) =>
-          router.push(
-            `/responsable-certifications/certifications/${certification.id}/bloc-competence/${blocId}`,
-          )
-        }
-      />
+      <div className="flex flex-col gap-8">
+        <CertificationCompetenceBlocsSummaryCard
+          isEditable
+          competenceBlocs={certification.competenceBlocs}
+          onAddBlocCompetenceButtonClick={() =>
+            router.push(
+              `/responsable-certifications/certifications/${certification.id}/bloc-competence/add`,
+            )
+          }
+          onUpdateCompetenceBlocButtonClick={(blocId) =>
+            router.push(
+              `/responsable-certifications/certifications/${certification.id}/bloc-competence/${blocId}`,
+            )
+          }
+        />
+        <SectionCard
+          data-test="prerequisites-summary-card"
+          title="Prérequis obligatoires"
+          titleIconClass="fr-icon-success-fill"
+        >
+          {certification.prerequisites.length ? null : (
+            <p className="ml-10 mb-0" data-test="no-prerequisite-message">
+              Aucun prérequis renseigné pour cette certification.
+            </p>
+          )}
+          <SmallNotice className="mt-6">
+            Si les prérequis obligatoires ont pu être récupérés depuis France
+            compétences, ils seront affichés ci-dessus. Vous pouvez revoir
+            l'ordre des prérequis ou corriger des fautes de frappe en cliquant
+            sur le bouton “Modifier”.
+          </SmallNotice>
+        </SectionCard>
+      </div>
     </div>
   );
 };

packages/reva-admin-react/src/app/responsable-certifications/certifications/[certificationId]/updateCertification.hook.ts

@@ -19,6 +19,10 @@ const getCertificationQuery = graphql(`
           label
         }
       }
+      prerequisites {
+        id
+        label
+      }
     }
   }
 `);