[DEMANDE DEVENIR AIDANT] Affiche l'encart de confirmation que la demande à bien été créée

Author: firefly33

mon-aide-cyber-ui/src/composants/atomes/LienMailtoMAC.tsx

@@ -0,0 +1,7 @@
+export const LienMailtoMAC = () => {
+  return (
+    <a href="mailto:[email protected]" target="_blank" rel="noreferrer">
+      [email protected]
+    </a>
+  );
+};

mon-aide-cyber-ui/src/composants/gestion-demandes/etre-aide/Confirmation.tsx

@@ -1,3 +1,5 @@
+import { LienMailtoMAC } from '../../atomes/LienMailtoMAC.tsx';
+
 type ProprietesConfirmation = {
   onClick: () => void;
 };
@@ -17,13 +19,7 @@ export const Confirmation = (proprietes: ProprietesConfirmation) => {
           </p>
           <p>
             Pensez à vérifier dans vos spams ou contactez-nous à{' '}
-            <a
-              href="mailto:[email protected]"
-              target="_blank"
-              rel="noreferrer"
-            >
-              [email protected]
-            </a>
+            <LienMailtoMAC />
           </p>
         </div>
         <button

mon-aide-cyber-ui/src/domaine/gestion-demandes/devenir-aidant/formulaire-devenir-aidant/CapteurFormulaireDevenirAidant.tsx

@@ -15,6 +15,7 @@ import { TypographieH4 } from '../../../../composants/communs/typographie/Typogr
 import { TypographieH5 } from '../../../../composants/communs/typographie/TypographieH5/TypographieH5.tsx';
 import Button from '../../../../composants/atomes/Button/Button.tsx';
 import { useState } from 'react';
+import { LienMailtoMAC } from '../../../../composants/atomes/LienMailtoMAC.tsx';
 
 export const CapteurFormulaireDevenirAidant = () => {
   const navigationMAC = useNavigationMAC();
@@ -91,18 +92,12 @@ export const CapteurFormulaireDevenirAidant = () => {
             <br />
             <br />
             Pensez à vérifier dans vos spams ou contactez-nous à&nbsp;
-            <a
-              href="mailto:[email protected]"
-              target="_blank"
-              rel="noreferrer"
-            >
-              [email protected]
-            </a>
+            <LienMailtoMAC />
           </p>
           <a href="/">
-            <button className="fr-btn bouton-mac bouton-mac-primaire">
+            <Button type="button" variant="primary">
               Retour à la page d&apos;accueil
-            </button>
+            </Button>
           </a>
         </div>
       </div>

mon-aide-cyber-ui/src/domaine/gestion-demandes/parcours-aidant/EcranDemandeDevenirAidant.tsx

@@ -3,6 +3,7 @@ import React, { useCallback, useReducer, useState } from 'react';
 import {
   choixTypeAidantFait,
   choixUtilisationFaite,
+  demandeDevenirAidantCreee,
   Etape,
   initialiseReducteur,
   reducteurEtapes,
@@ -32,6 +33,8 @@ import { FormulaireDevenirAidant } from '../devenir-aidant/formulaire-devenir-ai
 import { TypographieH5 } from '../../../composants/communs/typographie/TypographieH5/TypographieH5.tsx';
 import { Toast } from '../../../composants/communs/Toasts/Toast.tsx';
 import Button from '../../../composants/atomes/Button/Button.tsx';
+import { TypographieH4 } from '../../../composants/communs/typographie/TypographieH4/TypographieH4.tsx';
+import { LienMailtoMAC } from '../../../composants/atomes/LienMailtoMAC.tsx';
 
 export const EcranDemandeDevenirAidant = () => {
   const navigationMAC = useNavigationMAC();
@@ -84,8 +87,6 @@ export const EcranDemandeDevenirAidant = () => {
           'Une erreur est survenue lors de la demande devenir aidant'
         );
 
-      console.log({ corpsMutation });
-      return Promise.resolve();
       return macAPI.execute<void, void, CorpsDemandeDevenirAidant>(
         constructeurParametresAPI<CorpsDemandeDevenirAidant>()
           .url(actionSoumettre.url)
@@ -96,7 +97,8 @@ export const EcranDemandeDevenirAidant = () => {
       );
     },
     onSuccess: () => {
-      // navigate('#formulaire-formation');
+      envoie(demandeDevenirAidantCreee());
+      window.scrollTo({ top: 0 });
     },
   });
 
@@ -233,6 +235,37 @@ export const EcranDemandeDevenirAidant = () => {
         </FormulaireDevenirAidant>
       </div>,
     ],
+    [
+      'confirmationDemandeDevenirAidantPriseEnCompte',
+      <div
+        id="confirmationDemandeDevenirAidantPriseEnCompte"
+        className="fr-container fr-grid-row fr-grid-row--center zone-confirmation-formulaire-devenir-aidant"
+      >
+        <div className="fr-col-md-8 fr-col-sm-12 section confirmation">
+          <TypographieH4>
+            Votre demande a bien été prise en compte !
+          </TypographieH4>
+          <p>
+            Celle-ci sera traitée dans les meilleurs délais.
+            <br />
+            <br />
+            Celle-ci sera traitée dans les meilleurs délais. Vous allez être mis
+            en relation avec la délégation régionale de l’ANSSI de votre
+            territoire, qui reviendra vers vous par mail pour vous indiquer les
+            prochaines dates des ateliers Devenir Aidant MonAideCyber.
+            <br />
+            <br />
+            Pensez à vérifier dans vos spams ou contactez-nous à&nbsp;
+            <LienMailtoMAC />
+          </p>
+          <a href="/">
+            <Button type="button" variant="primary">
+              Retour à la page d&apos;accueil
+            </Button>
+          </a>
+        </div>
+      </div>,
+    ],
   ]);
 
   return (

mon-aide-cyber-ui/src/domaine/gestion-demandes/parcours-aidant/choix-type-aidant/ChoixTypeAidant.tsx

@@ -6,6 +6,7 @@ import { Entreprise } from '../Entreprise';
 import { SelecteurTypeAidant } from './SelecteurTypeAidant.tsx';
 import { RechercheEntreprise } from './RechercheEntreprise.tsx';
 import { TypographieH5 } from '../../../../composants/communs/typographie/TypographieH5/TypographieH5.tsx';
+import { LienMailtoMAC } from '../../../../composants/atomes/LienMailtoMAC.tsx';
 
 export const ChoixTypeAidant = ({
   surClick,
@@ -96,13 +97,13 @@ export const ChoixTypeAidant = ({
               surChoix={() => setChoix('FuturAdherent')}
               coche={choix === 'FuturAdherent'}
               contenuZoneDepliee={
-                <>
+                <p>
                   Vous pouvez consulter une liste d’associations dont font
                   partie certains de nos Aidants cyber : <br />
                   monaide.cyber.gouv.fr/associations-partenaires. <br />
                   Vous pouvez aussi proposer un partenariat en contactant
-                  l’équipe via [email protected]
-                </>
+                  l’équipe via <LienMailtoMAC />
+                </p>
               }
             />
           </div>

mon-aide-cyber-ui/src/domaine/gestion-demandes/parcours-aidant/ecran-demande-devenir-aidant.scss

@@ -181,6 +181,10 @@
     grid-area: entete;
   }
 
+  .zone-confirmation-formulaire-devenir-aidant {
+    grid-area: entete;
+  }
+
   .separation-formulaire {
     border-top: none;
     margin: 32px 0;

mon-aide-cyber-ui/src/domaine/gestion-demandes/parcours-aidant/reducteurEtapes.ts

@@ -17,7 +17,8 @@ export type Etape =
   | 'choixTypeAidant'
   | 'signatureCharteAidant'
   | 'signatureCGUs'
-  | 'formulaireDevenirAidant';
+  | 'formulaireDevenirAidant'
+  | 'confirmationDemandeDevenirAidantPriseEnCompte';
 
 type DemandeDevenirAidant = {
   type: TypeAidantEtSonEntite;
@@ -34,6 +35,7 @@ enum TypeActionEtapesDemande {
   CHOIX_UTILISATION_FAITE = 'CHOIX_UTILISATION_FAITE',
   CHOIX_TYPE_AIDANT_FAIT = 'CHOIX_TYPE_AIDANT_FAIT',
   CHARTE_AIDANT_SIGNEE = 'CHARTE_AIDANT_SIGNEE',
+  DEMANDE_DEVENIR_AIDANT_CREEE = 'DEMANDE_DEVENIR_AIDANT_CREEE',
   RETOUR_ETAPE_PRECEDENTE = 'RETOUR_ETAPE_PRECEDENTE',
 }
 
@@ -49,6 +51,7 @@ type ActionEtapesDemande =
   | {
       type: TypeActionEtapesDemande.CHARTE_AIDANT_SIGNEE;
     }
+  | { type: TypeActionEtapesDemande.DEMANDE_DEVENIR_AIDANT_CREEE }
   | {
       type: TypeActionEtapesDemande.RETOUR_ETAPE_PRECEDENTE;
     };
@@ -101,6 +104,11 @@ export const reducteurEtapes = (
         }),
         etapeCourante: 'formulaireDevenirAidant',
       };
+    case TypeActionEtapesDemande.DEMANDE_DEVENIR_AIDANT_CREEE:
+      return {
+        ...etat,
+        etapeCourante: 'confirmationDemandeDevenirAidantPriseEnCompte',
+      };
   }
 };
 
@@ -122,6 +130,10 @@ export const signeCharteAidant = (): ActionEtapesDemande => ({
   type: TypeActionEtapesDemande.CHARTE_AIDANT_SIGNEE,
 });
 
+export const demandeDevenirAidantCreee = (): ActionEtapesDemande => ({
+  type: TypeActionEtapesDemande.DEMANDE_DEVENIR_AIDANT_CREEE,
+});
+
 export const retourEtapePrecedente = (): ActionEtapesDemande => ({
   type: TypeActionEtapesDemande.RETOUR_ETAPE_PRECEDENTE,
 });

mon-aide-cyber-ui/test/domaine/gestion-demandes/parcours-aidant/reducteurEtapes.spec.ts

@@ -2,6 +2,7 @@ import { describe, expect } from 'vitest';
 import {
   choixTypeAidantFait,
   choixUtilisationFaite,
+  demandeDevenirAidantCreee,
   EtatEtapesDemande,
   initialiseReducteur,
   reducteurEtapes,
@@ -170,4 +171,31 @@ describe('Reducteur d’étapes pour le parcours Aidant', () => {
       });
     });
   });
+
+  describe('Demande devenir Aidant créée', () => {
+    it("Passe à l'étape suivante", () => {
+      const etat = reducteurEtapes(
+        {
+          etapeCourante: 'formulaireDevenirAidant',
+          demande: {
+            type: {
+              typeAidant: 'FuturAdherent',
+            },
+            signatureCharte: true,
+          },
+        },
+        demandeDevenirAidantCreee()
+      );
+
+      expect(etat).toStrictEqual<EtatEtapesDemande>({
+        etapeCourante: 'confirmationDemandeDevenirAidantPriseEnCompte',
+        demande: {
+          type: {
+            typeAidant: 'FuturAdherent',
+          },
+          signatureCharte: true,
+        },
+      });
+    });
+  });
 });