feat(candidate): added a decision button leading to the drop out deci…

…sion page to the drop out warning
SocialGouv · Dec 27, 2024 · ffadde8 · ffadde8
1 parent bf634d4
commit ffadde8
Show file tree

Hide file tree

Showing 3 changed files with 43 additions and 14 deletions.
diff --git a/packages/reva-candidate/cypress/e2e/candidacy-dropout/candidacy-dropout-warning.cy.ts b/packages/reva-candidate/cypress/e2e/candidacy-dropout/candidacy-dropout-warning.cy.ts
@@ -45,6 +45,20 @@ context("Candidacy dropout warning", () => {
 
           cy.get('[data-test="drop-out-warning"]').should("exist");
         });
+
+        it("should let me click the decision button and lead me to the decision page", function () {
+          interceptCandidacy({ droppedOut: true });
+          cy.login();
+          cy.wait("@candidate_login");
+          cy.wait("@candidate_getCandidateWithCandidacy");
+          cy.wait("@activeFeaturesForConnectedUser");
+
+          cy.get('[data-test="drop-out-warning-decision-button"]').click();
+          cy.url().should(
+            "eq",
+            "http://localhost:3004/candidat/candidacy-dropout-decision/",
+          );
+        });
       });
       context("When the candidacy has  not been dropped out", () => {
         it("should not show the warning", function () {

diff --git a/packages/reva-candidate/src/app/_components/drop-out-warning/DropOutWarning.tsx b/packages/reva-candidate/src/app/_components/drop-out-warning/DropOutWarning.tsx
@@ -1,31 +1,43 @@
 import { format } from "date-fns";
 import fvaeWarning from "./assets/fvae_warning.png";
 import Image from "next/image";
+import Button from "@codegouvfr/react-dsfr/Button";
 
 export const DropOutWarning = ({
   dropOutDate,
   className,
+  onDecisionButtonClick,
 }: {
   dropOutDate: Date;
   className?: string;
+  onDecisionButtonClick?: () => void;
 }) => (
   <div
     data-test="drop-out-warning"
-    className={`flex flex-col gap-4 md:gap-0 md:flex-row items-center min-h-[160px] ${className || ""}`}
+    className={`flex flex-col ${className || ""}`}
   >
-    <Image
-      className="z-10"
-      alt="main levée devant un panneau d'interdiction"
-      style={{
-        width: "132px",
-        height: "154px",
-      }}
-      src={fvaeWarning}
-    />
-    <div className="md:-ml-16 p-6 md:pl-24 border-b-4 border-fvae-hard-red shadow-[0px_6px_18px_0px_rgba(0,0,18,0.16)]">
-      Votre accompagnateur a déclaré l’abandon de votre parcours VAE le{" "}
-      {format(dropOutDate, "dd/MM/yyyy")}. Vous avez 6 mois pour enregistrer
-      votre décision : accepter l’abandon ou continuer votre parcours.
+    <div className="flex flex-col gap-4 md:gap-0 md:flex-row items-center min-h-[160px]">
+      <Image
+        className="z-10"
+        alt="main levée devant un panneau d'interdiction"
+        style={{
+          width: "132px",
+          height: "154px",
+        }}
+        src={fvaeWarning}
+      />
+      <div className="md:-ml-16 p-6 md:pl-24 border-b-4 border-fvae-hard-red shadow-[0px_6px_18px_0px_rgba(0,0,18,0.16)]">
+        Votre accompagnateur a déclaré l’abandon de votre parcours VAE le{" "}
+        {format(dropOutDate, "dd/MM/yyyy")}. Vous avez 6 mois pour enregistrer
+        votre décision : accepter l’abandon ou continuer votre parcours.
+      </div>
     </div>
+    <Button
+      data-test="drop-out-warning-decision-button"
+      className="ml-auto -mt-3"
+      onClick={onDecisionButtonClick}
+    >
+      Enregistrer ma décision
+    </Button>
   </div>
 );
diff --git a/packages/reva-candidate/src/app/page.tsx b/packages/reva-candidate/src/app/page.tsx
@@ -47,6 +47,9 @@ export default function Home() {
         <DropOutWarning
           className="mb-16"
           dropOutDate={new Date(candidacy.candidacyDropOut.createdAt)}
+          onDecisionButtonClick={() =>
+            router.push("/candidacy-dropout-decision")
+          }
         />
       )}
       {!candidacy.candidacyDropOut && <CandidacyBanner />}