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 new file mode 100644 index 0000000000..eaf0127fec --- /dev/null +++ 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 = async ( + previousState, + { identifiantProjet, utilisateur }, +) => { + await mediator.send({ + 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 index 94634cb556..028902d7ea 100644 --- 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 ( <> - diff --git a/packages/applications/ssr/src/components/molecules/abandon/ConfirmerAbandonForm.tsx b/packages/applications/ssr/src/components/molecules/abandon/ConfirmerAbandonForm.tsx new file mode 100644 index 0000000000..47f8b6f8a1 --- /dev/null +++ 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 ( + <> + + + + {state.error && } +
+

Êtes-vous sûr de vouloir confirmer cet abandon ?

+
+ + + modal.close(), + nativeButtonProps: { + 'aria-disabled': pending, + disabled: pending, + }, + children: 'Non', + }, + ]} + /> + +
+
+ + ); +}; diff --git a/packages/applications/ssr/src/components/pages/abandon/DetailAbandonPage.tsx b/packages/applications/ssr/src/components/pages/abandon/DetailAbandonPage.tsx index fe3499c829..c44978a732 100644 --- 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 = ({ identifiantProjet={projet.identifiantProjet} /> - {utilisateur.rôle === 'porteur-projet' && - ['demandé', 'confirmation-demandée'].includes(statut) && ( - + {utilisateur.rôle === 'porteur-projet' && + ['demandé', 'confirmation-demandée'].includes(statut) && ( + + )} + {utilisateur.rôle === 'porteur-projet' && statut === 'confirmation-demandée' && ( + )} + );