feat(admin): add certification authority selector for DFF submission

Allow AAP to select from multiple certification authorities when submitting DFF documents
SocialGouv · Nov 22, 2024 · e755d63 · e755d63
1 parent 58c2fdb
commit e755d63
Show file tree

Hide file tree

Showing 2 changed files with 96 additions and 13 deletions.
diff --git a/...ility-aap/send-file-certification-authority/_components/CertificationAuthoritySection.tsx b/...ility-aap/send-file-certification-authority/_components/CertificationAuthoritySection.tsx
@@ -1,9 +1,52 @@
+import Select from "@codegouvfr/react-dsfr/Select";
+
+const CertificateursSelect = ({
+  certificationAuthorities,
+  certificationAuthoritySelectedId,
+  setCertificationAuthoritySelectedId,
+}: {
+  certificationAuthorities: { label: string; id: string }[];
+  certificationAuthoritySelectedId: string | undefined;
+  setCertificationAuthoritySelectedId: (id: string) => void;
+}) => {
+  return (
+    <Select
+      label={
+        <label className="block mt-[6px] mb-[10px] text-xs font-semibold">
+          SÉLECTIONNEZ L'AUTORITÉ DE CERTIFICATION
+        </label>
+      }
+      nativeSelectProps={{
+        onChange: (event) =>
+          setCertificationAuthoritySelectedId(event.target.value),
+        value: certificationAuthoritySelectedId || "",
+        required: true,
+      }}
+    >
+      <>
+        <option disabled hidden value="">
+          Sélectionner
+        </option>
+        {certificationAuthorities.map((c) => (
+          <option key={c.id} value={c.id}>
+            {c.label}
+          </option>
+        ))}
+      </>
+    </Select>
+  );
+};
+
 export default function CertificationAuthoritySection({
-  certificationAuthorityLabel,
+  certificationAuthorities,
+  certificationAuthoritySelectedId,
+  setCertificationAuthoritySelectedId,
 }: {
-  certificationAuthorityLabel?: string;
+  certificationAuthorities: { label: string; id: string }[];
+  certificationAuthoritySelectedId: string;
+  setCertificationAuthoritySelectedId: (id: string) => void;
 }) {
-  if (!certificationAuthorityLabel) {
+  if (!certificationAuthorities.length) {
     return null;
   }
 
@@ -13,7 +56,17 @@ export default function CertificationAuthoritySection({
         <span className="fr-icon-team-fill fr-icon--lg mr-2" />
         <h2 className="mb-0">Certificateur</h2>
       </div>
-      <p>{certificationAuthorityLabel}</p>
+      {certificationAuthorities.length === 1 ? (
+        <p>{certificationAuthorities[0].label}</p>
+      ) : (
+        <CertificateursSelect
+          certificationAuthorities={certificationAuthorities}
+          certificationAuthoritySelectedId={certificationAuthoritySelectedId}
+          setCertificationAuthoritySelectedId={
+            setCertificationAuthoritySelectedId
+          }
+        />
+      )}
     </div>
   );
 }
diff --git a/...aap)/candidacies/[candidacyId]/feasibility-aap/send-file-certification-authority/page.tsx b/...aap)/candidacies/[candidacyId]/feasibility-aap/send-file-certification-authority/page.tsx
@@ -1,6 +1,10 @@
 "use client";
 import { DecisionSentComponent } from "@/components/alert-decision-sent-feasibility/DecisionSentComponent";
-import { graphqlErrorToast, successToast } from "@/components/toast/toast";
+import {
+  errorToast,
+  graphqlErrorToast,
+  successToast,
+} from "@/components/toast/toast";
 import {
   Candidacy,
   DematerializedFeasibilityFile,
@@ -10,6 +14,7 @@ import Alert from "@codegouvfr/react-dsfr/Alert";
 import Button from "@codegouvfr/react-dsfr/Button";
 import { format } from "date-fns";
 import { useParams, useRouter } from "next/navigation";
+import { useEffect, useMemo, useState } from "react";
 import DffSummary from "../_components/DffSummary/DffSummary";
 import CertificationAuthoritySection from "./_components/CertificationAuthoritySection";
 import { useSendFileCertificationAuthority } from "./_components/sendFileCertificationAuthority.hook";
@@ -38,6 +43,19 @@ export default function SendFileCertificationAuthorityPage() {
     candidacy,
     feasibility,
   } = useSendFileCertificationAuthority();
+
+  const certificationAuthorities = useMemo(() => {
+    if (!candidacy?.certification?.certificationAuthorities) {
+      return [];
+    }
+    return candidacy.certification.certificationAuthorities;
+  }, [candidacy?.certification?.certificationAuthorities]);
+
+  const [
+    certificationAuthoritySelectedId,
+    setCertificationAuthoritySelectedId,
+  ] = useState<string>("");
+
   const decision = feasibility?.decision;
   const decisionSentAt = feasibility?.decisionSentAt;
   const decisionComment = feasibility?.decisionComment;
@@ -51,18 +69,19 @@ export default function SendFileCertificationAuthorityPage() {
     dematerializedFeasibilityFile?.isReadyToBeSentToCertificationAuthority;
 
   const handleSendFile = async () => {
-    if (
-      !dematerializedFeasibilityFile ||
-      !candidacy?.certification?.certificationAuthorities[0]
-    ) {
+    if (!dematerializedFeasibilityFile) {
+      return;
+    }
+
+    if (!certificationAuthoritySelectedId) {
+      errorToast("Veuillez sélectionner un certificateur");
       return;
     }
 
     try {
       await sendToCertificationAuthorityMutation({
         dematerializedFeasibilityFileId: dematerializedFeasibilityFile.id,
-        certificationAuthorityId:
-          candidacy.certification.certificationAuthorities[0].id,
+        certificationAuthorityId: certificationAuthoritySelectedId,
       });
       successToast("Le dossier de faisabilité a été envoyé au certificateur");
       router.push(feasibilitySummaryUrl);
@@ -71,6 +90,15 @@ export default function SendFileCertificationAuthorityPage() {
     }
   };
 
+  useEffect(() => {
+    if (
+      !certificationAuthoritySelectedId &&
+      certificationAuthorities.length === 1
+    ) {
+      setCertificationAuthoritySelectedId(certificationAuthorities[0].id);
+    }
+  }, [certificationAuthorities, certificationAuthoritySelectedId]);
+
   return (
     <div>
       <DffSummary
@@ -97,8 +125,10 @@ export default function SendFileCertificationAuthorityPage() {
         }
       />
       <CertificationAuthoritySection
-        certificationAuthorityLabel={
-          candidacy?.certification?.certificationAuthorities[0]?.label
+        certificationAuthorities={certificationAuthorities}
+        certificationAuthoritySelectedId={certificationAuthoritySelectedId}
+        setCertificationAuthoritySelectedId={
+          setCertificationAuthoritySelectedId
         }
       />