♻️ [ABANDON TO NEXT] Confirmer abandon (#1437)

* 🎨 confirmer form and action * ✨ add form to abandon page * 💄 use dsfr confirm modal * 💄 update style * 💄 wording
MTES-MCT · Nov 24, 2023 · 6d8eafd · 6d8eafd
1 parent ad4efaf
commit 6d8eafd
Show file tree

Hide file tree

Showing 4 changed files with 133 additions and 8 deletions.
diff --git a/packages/applications/ssr/src/app/laureat/[identifiant]/abandon/confirmerAbandon.action.ts b/packages/applications/ssr/src/app/laureat/[identifiant]/abandon/confirmerAbandon.action.ts
@@ -0,0 +1,31 @@
+'use server';
+
+import { mediator } from 'mediateur';
+import * as zod from 'zod';
+import { Abandon } from '@potentiel-domain/laureat';
+import { FormAction, FormState, formAction } from '@/utils/formAction';
+
+export type ConfirmerAbandonState = FormState;
+
+const schema = zod.object({
+  identifiantProjet: zod.string(),
+  utilisateur: zod.string().email(),
+});
+
+const action: FormAction<FormState, typeof schema> = async (
+  previousState,
+  { identifiantProjet, utilisateur },
+) => {
+  await mediator.send<Abandon.AbandonUseCase>({
+    type: 'CONFIRMER_ABANDON_USECASE',
+    data: {
+      identifiantProjetValue: identifiantProjet,
+      utilisateurValue: utilisateur,
+      dateConfirmationValue: new Date().toISOString(),
+    },
+  });
+
+  return previousState;
+};
+
+export const confirmerAbandonAction = formAction(action, schema);
diff --git a/packages/applications/ssr/src/components/molecules/abandon/AnnulerAbandonForm.tsx b/packages/applications/ssr/src/components/molecules/abandon/AnnulerAbandonForm.tsx
@@ -38,11 +38,7 @@ export const AnnulerAbandonForm = ({ identifiantProjet, utilisateur }: AnnulerAb
 
   return (
     <>
-      <Button
-        priority="primary"
-        onClick={() => modal.open()}
-        className="bg-blue-france-sun-base text-white mt-6"
-      >
+      <Button priority="secondary" onClick={() => modal.open()}>
         Annuler l'abandon
       </Button>
 

diff --git a/packages/applications/ssr/src/components/molecules/abandon/ConfirmerAbandonForm.tsx b/packages/applications/ssr/src/components/molecules/abandon/ConfirmerAbandonForm.tsx
@@ -0,0 +1,89 @@
+'use client';
+
+import { useFormState, useFormStatus } from 'react-dom';
+import { createModal } from '@codegouvfr/react-dsfr/Modal';
+import Alert from '@codegouvfr/react-dsfr/Alert';
+import {
+  ConfirmerAbandonState,
+  confirmerAbandonAction,
+} from '@/app/laureat/[identifiant]/abandon/confirmerAbandon.action';
+import { Utilisateur } from '@/utils/getUtilisateur';
+import { useRouter } from 'next/navigation';
+import Button from '@codegouvfr/react-dsfr/Button';
+import ButtonsGroup from '@codegouvfr/react-dsfr/ButtonsGroup';
+
+const initialState: ConfirmerAbandonState = {
+  error: undefined,
+  validationErrors: [],
+};
+
+type ConfirmerAbandonFormProps = {
+  identifiantProjet: string;
+  utilisateur: Utilisateur;
+};
+
+const modal = createModal({
+  id: 'confirm-confirmation',
+  isOpenedByDefault: false,
+});
+
+export const ConfirmerAbandonForm = ({
+  identifiantProjet,
+  utilisateur,
+}: ConfirmerAbandonFormProps) => {
+  const router = useRouter();
+  const { pending } = useFormStatus();
+  const [state, formAction] = useFormState(confirmerAbandonAction, initialState);
+
+  if (state.success) {
+    router.push(`/laureat/${encodeURIComponent(identifiantProjet)}/abandon`);
+  }
+
+  return (
+    <>
+      <Button
+        priority="primary"
+        className="bg-blue-france-sun-base text-white"
+        onClick={() => modal.open()}
+      >
+        Confirmer l'abandon
+      </Button>
+
+      <modal.Component title="Confirmer">
+        {state.error && <Alert severity="error" title={state.error} className="mb-4" />}
+        <div className="flex flex-col gap-5">
+          <p className="mt-3">Êtes-vous sûr de vouloir confirmer cet abandon ?</p>
+          <form action={formAction} method="post">
+            <input type={'hidden'} value={identifiantProjet} name="identifiantProjet" />
+            <input type={'hidden'} value={utilisateur.email} name="utilisateur" />
+            <ButtonsGroup
+              inlineLayoutWhen="always"
+              alignment="right"
+              buttons={[
+                {
+                  type: 'submit',
+                  nativeButtonProps: {
+                    'aria-disabled': pending,
+                    disabled: pending,
+                    className: 'bg-blue-france-sun-base text-white',
+                  },
+                  children: 'Oui',
+                },
+                {
+                  type: 'button',
+                  priority: 'secondary',
+                  onClick: () => modal.close(),
+                  nativeButtonProps: {
+                    'aria-disabled': pending,
+                    disabled: pending,
+                  },
+                  children: 'Non',
+                },
+              ]}
+            />
+          </form>
+        </div>
+      </modal.Component>
+    </>
+  );
+};
diff --git a/packages/applications/ssr/src/components/pages/abandon/DetailAbandonPage.tsx b/packages/applications/ssr/src/components/pages/abandon/DetailAbandonPage.tsx
@@ -1,6 +1,7 @@
 'use client';
 
 import { AnnulerAbandonForm } from '@/components/molecules/abandon/AnnulerAbandonForm';
+import { ConfirmerAbandonForm } from '@/components/molecules/abandon/ConfirmerAbandonForm';
 import { DetailDemandeAbandon } from '@/components/molecules/abandon/DetailDemandeAbandon';
 import { DetailInstructionAbandon } from '@/components/molecules/abandon/DetailInstructionAbandon';
 import { InstructionAbandonForm } from '@/components/molecules/abandon/InstructionAbandonForm';
@@ -46,13 +47,21 @@ export const DetailAbandonPage: FC<DetailAbandonPageProps> = ({
             identifiantProjet={projet.identifiantProjet}
           />
         </div>
-        {utilisateur.rôle === 'porteur-projet' &&
-          ['demandé', 'confirmation-demandée'].includes(statut) && (
-            <AnnulerAbandonForm
+        <div className="flex flex-col md:flex-row gap-6 mt-6">
+          {utilisateur.rôle === 'porteur-projet' &&
+            ['demandé', 'confirmation-demandée'].includes(statut) && (
+              <AnnulerAbandonForm
+                identifiantProjet={projet.identifiantProjet}
+                utilisateur={utilisateur}
+              />
+            )}
+          {utilisateur.rôle === 'porteur-projet' && statut === 'confirmation-demandée' && (
+            <ConfirmerAbandonForm
               identifiantProjet={projet.identifiantProjet}
               utilisateur={utilisateur}
             />
           )}
+        </div>
       </>
     </ProjetPageTemplate>
   );