[DEMANDE DEVENIR AIDANT] Prépare le corps avec la signature de la charte pour l'API de création de la demande

Author: firefly33

mon-aide-cyber-ui/src/domaine/gestion-demandes/devenir-aidant/DevenirAidant.ts

@@ -1,18 +1,65 @@
 import { ReponseHATEOAS } from '../../Lien.ts';
 import { Departement } from '../departement.ts';
 import { TypeAidant } from '../parcours-aidant/reducteurEtapes.ts';
-import { Entreprise } from '../parcours-aidant/choix-type-aidant/ChoixTypeAidant.tsx';
 
 export type ReponseDemandeInitiee = ReponseHATEOAS & PreRequisDemande;
 export type PreRequisDemande = {
   departements: Departement[];
 };
+
+export enum TypeServiceEntite {
+  SERVICE_PUBLIC = 'ServicePublic',
+  SERVICE_ETAT = 'ServiceEtat',
+  ASSOCIATION = 'Association',
+}
+export type Entite = {
+  type: 'ServicePublic' | 'ServiceEtat' | 'Association';
+  nom?: string;
+  siret?: string;
+};
+
 export type CorpsDemandeDevenirAidant = {
   nom: string;
   prenom: string;
   mail: string;
   departement: string;
   cguValidees: boolean;
-  typeAidant?: TypeAidant;
-  entreprise?: Entreprise;
+  signatureCharte?: boolean;
+  entite?: Entite;
 };
+
+export const entiteEnFonctionDuTypeAidant = new Map<
+  TypeAidant,
+  (nom?: string, siret?: string) => Entite
+>([
+  [
+    'RepresentantEtat',
+    (nom, siret) => ({
+      type: TypeServiceEntite.SERVICE_ETAT,
+      nom,
+      siret,
+    }),
+  ],
+  [
+    'AgentPublic',
+    (nom, siret) => ({
+      type: TypeServiceEntite.SERVICE_PUBLIC,
+      nom,
+      siret,
+    }),
+  ],
+  [
+    'Association',
+    (nom, siret) => ({
+      type: TypeServiceEntite.ASSOCIATION,
+      nom,
+      siret,
+    }),
+  ],
+  [
+    'FuturAdherent',
+    () => ({
+      type: TypeServiceEntite.ASSOCIATION,
+    }),
+  ],
+]);

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

@@ -12,21 +12,9 @@ import { constructeurParametresAPI } from '../../../../fournisseurs/api/Construc
 import { useMACAPI } from '../../../../fournisseurs/api/useMACAPI.ts';
 import { useNavigate } from 'react-router-dom';
 import { TypographieH4 } from '../../../../composants/communs/typographie/TypographieH4/TypographieH4.tsx';
-import { TypeAidant } from '../../parcours-aidant/reducteurEtapes.ts';
 import { TypographieH5 } from '../../../../composants/communs/typographie/TypographieH5/TypographieH5.tsx';
 import Button from '../../../../composants/atomes/Button/Button.tsx';
 import { useState } from 'react';
-import { Entreprise } from '../../parcours-aidant/Entreprise';
-
-export type CorpsMutationDemandeDevenirAidant = {
-  nom: string;
-  prenom: string;
-  mail: string;
-  departement: string;
-  cguValidees: boolean;
-  typeAidant?: TypeAidant;
-  entite?: Entreprise;
-};
 
 export const CapteurFormulaireDevenirAidant = () => {
   const navigationMAC = useNavigationMAC();
@@ -61,7 +49,7 @@ export const CapteurFormulaireDevenirAidant = () => {
 
   const { mutate, error, isError, isSuccess, isPending } = useMutation({
     mutationKey: ['demander-a-devenir-aidant'],
-    mutationFn: (corpsMutation: CorpsMutationDemandeDevenirAidant) => {
+    mutationFn: (corpsMutation: CorpsDemandeDevenirAidant) => {
       const actionSoumettre = new MoteurDeLiens(
         navigationMAC.etat
       ).trouveEtRenvoie('envoyer-demande-devenir-aidant');

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

@@ -22,13 +22,13 @@ import { MoteurDeLiens } from '../../MoteurDeLiens.ts';
 import { useMutation, useQuery } from '@tanstack/react-query';
 import {
   CorpsDemandeDevenirAidant,
+  entiteEnFonctionDuTypeAidant,
   ReponseDemandeInitiee,
 } from '../devenir-aidant/DevenirAidant.ts';
 import { constructeurParametresAPI } from '../../../fournisseurs/api/ConstructeurParametresAPI.ts';
 import { useMACAPI } from '../../../fournisseurs/api/useMACAPI.ts';
 import { useNavigationMAC } from '../../../fournisseurs/hooks.ts';
 import { FormulaireDevenirAidant } from '../devenir-aidant/formulaire-devenir-aidant/FormulaireDevenirAidant.tsx';
-import { CorpsMutationDemandeDevenirAidant } from '../devenir-aidant/formulaire-devenir-aidant/CapteurFormulaireDevenirAidant.tsx';
 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';
@@ -74,7 +74,7 @@ export const EcranDemandeDevenirAidant = () => {
     isError: mutationEnErreur,
   } = useMutation({
     mutationKey: ['demander-a-devenir-aidant'],
-    mutationFn: (corpsMutation: CorpsMutationDemandeDevenirAidant) => {
+    mutationFn: (corpsMutation: CorpsDemandeDevenirAidant) => {
       const actionSoumettre = new MoteurDeLiens(
         navigationMAC.etat
       ).trouveEtRenvoie('envoyer-demande-devenir-aidant');
@@ -84,6 +84,8 @@ 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)
@@ -100,6 +102,7 @@ export const EcranDemandeDevenirAidant = () => {
 
   const surClickChoixUtilisation = useCallback((choix: Utilisation) => {
     envoie(choixUtilisationFaite(choix));
+    window.scrollTo({ top: 0 });
   }, []);
 
   const surClickChoixTypeAidant = useCallback(
@@ -110,10 +113,21 @@ export const EcranDemandeDevenirAidant = () => {
           entite,
         })
       );
+      window.scrollTo({ top: 0 });
     },
     []
   );
 
+  const surSignatureCharteAidant = useCallback(() => {
+    envoie(signeCharteAidant());
+    window.scrollTo({ top: 0 });
+  }, []);
+
+  const surClickEtapePrecedente = useCallback(() => {
+    envoie(retourEtapePrecedente());
+    window.scrollTo({ top: 0 });
+  }, []);
+
   const etapes: Map<Etape, React.ReactElement> = new Map([
     [
       'choixUtilisation',
@@ -128,15 +142,15 @@ export const EcranDemandeDevenirAidant = () => {
         key="choixTypeAidant"
         typeAidant={etatEtapeCourante.demande?.type}
         surClick={surClickChoixTypeAidant}
-        precedent={() => envoie(retourEtapePrecedente())}
+        precedent={surClickEtapePrecedente}
       />,
     ],
     [
       'signatureCharteAidant',
       <SignatureCharteAidant
         key="signatureCharteAidant"
-        signeCharteAidant={() => envoie(signeCharteAidant())}
-        precedent={() => envoie(retourEtapePrecedente())}
+        signeCharteAidant={surSignatureCharteAidant}
+        precedent={surClickEtapePrecedente}
       />,
     ],
     ['signatureCGUs', <SignatureCGU key="signatureCGUs" />],
@@ -169,33 +183,48 @@ export const EcranDemandeDevenirAidant = () => {
           </FormulaireDevenirAidant.AvantPropos>
           <FormulaireDevenirAidant.Formulaire
             referentielDepartements={referentielDepartements}
-            surSoumission={(formulaire) =>
+            surSoumission={(formulaire) => {
+              const { typeAidant, entite: entiteDuFormulaire } =
+                etatEtapeCourante.demande!.type;
+
+              const entiteCorrespondante =
+                entiteEnFonctionDuTypeAidant.get(typeAidant);
+
               mutate({
                 ...formulaire,
-                typeAidant: etatEtapeCourante.demande?.type.typeAidant,
-                entite: etatEtapeCourante.demande?.type.entite,
-              })
-            }
+                signatureCharte: etatEtapeCourante.demande!.signatureCharte,
+                ...(entiteCorrespondante && {
+                  entite: entiteCorrespondante(
+                    entiteDuFormulaire?.nom,
+                    entiteDuFormulaire?.siret
+                  ),
+                }),
+              });
+            }}
             devientValide={(estFormulaireValide) => {
               setEstValide(estFormulaireValide);
             }}
           >
-            <Button
-              type="submit"
-              key="envoyer-demande-devenir-aidant"
-              className="fr-btn bouton-mac bouton-mac-primaire"
-              onClick={() => envoie(retourEtapePrecedente())}
-            >
-              Précédent
-            </Button>
-            <Button
-              type="submit"
-              key="envoyer-demande-devenir-aidant"
-              className="fr-btn bouton-mac bouton-mac-primaire"
-              disabled={!estValide}
-            >
-              Envoyer
-            </Button>
+            <div className="actions">
+              <Button
+                type="submit"
+                variant="secondary"
+                key="envoyer-demande-devenir-aidant"
+                onClick={surClickEtapePrecedente}
+              >
+                <i className="fr-icon-arrow-left-line"></i>
+                <span>Précédent</span>
+              </Button>
+              <Button
+                type="submit"
+                key="envoyer-demande-devenir-aidant"
+                className="fr-btn bouton-mac bouton-mac-primaire"
+                disabled={!estValide}
+              >
+                Envoyer
+                <span className="fr-icon-check-line" aria-hidden="true"></span>
+              </Button>
+            </div>
           </FormulaireDevenirAidant.Formulaire>
 
           {mutationEnErreur ? (

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

@@ -70,7 +70,8 @@ export const SignatureCharteAidant = ({
               precedent();
             }}
           >
-            Précédent
+            <i className="fr-icon-arrow-left-line"></i>
+            <span>Précédent</span>
           </Button>
           <Button
             disabled={!charteSignee}
@@ -80,7 +81,8 @@ export const SignatureCharteAidant = ({
               signeCharteAidant();
             }}
           >
-            Suivant
+            <span>Suivant</span>
+            <i className="fr-icon-arrow-right-line"></i>
           </Button>
         </div>
       </div>

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

@@ -5,6 +5,7 @@ import { TypeAidant, TypeAidantEtSonEntite } from '../reducteurEtapes.ts';
 import { Entreprise } from '../Entreprise';
 import { SelecteurTypeAidant } from './SelecteurTypeAidant.tsx';
 import { RechercheEntreprise } from './RechercheEntreprise.tsx';
+import { TypographieH5 } from '../../../../composants/communs/typographie/TypographieH5/TypographieH5.tsx';
 
 export const ChoixTypeAidant = ({
   surClick,
@@ -32,13 +33,19 @@ export const ChoixTypeAidant = ({
     <div className="fr-container fr-grid-row fr-grid-row--center zone-choix-type-aidant">
       <div className="fr-col-md-8 fr-col-sm-12 section">
         <div>
-          <p>Vous souhaitez œuvrer exclusivement pour l’intérêt général</p>
-          <img
-            className="text-center"
-            src={illustrationInteretGeneral}
-            alt="Illustration d’une personne oeuvrant pour l’intérêt général."
-          />
-          <p>Vous êtes :</p>
+          <TypographieH5>
+            Vous souhaitez oeuvrer exclusivement pour l&apos;intérêt général
+          </TypographieH5>
+          <div className="text-center">
+            <img
+              style={{ width: '342px' }}
+              src={illustrationInteretGeneral}
+              alt="Illustration d’une personne oeuvrant pour l’intérêt général."
+            />
+          </div>
+          <p>
+            <b>Vous êtes :</b>
+          </p>
           <div className="liste-choix-type-aidants">
             <SelecteurTypeAidant
               libelle="Un représentant des services de l’État"
@@ -108,7 +115,8 @@ export const ChoixTypeAidant = ({
                 precedent();
               }}
             >
-              Précédent
+              <i className="fr-icon-arrow-left-line"></i>
+              <span>Précédent</span>
             </Button>
             <Button
               disabled={!peutValiderEtape}
@@ -121,7 +129,8 @@ export const ChoixTypeAidant = ({
                 }
               }}
             >
-              Je valide ma sélection
+              <span>Je valide ma sélection</span>
+              <i className="fr-icon-arrow-right-line"></i>
             </Button>
           </div>
         </div>

mon-aide-cyber-ui/src/domaine/gestion-demandes/parcours-aidant/choix-utilisation/ChoixUtilisation.tsx

@@ -1,8 +1,9 @@
 import { TypographieH3 } from '../../../../composants/communs/typographie/TypographieH3/TypographieH3.tsx';
 import illustrationInteretGeneral from '../../../../../public/images/illustration-interet-general.svg';
 import illustrationCadreProfessionnel from '../../../../../public/images/illustration-cadre-professionnel.svg';
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import { Choix } from './choix/Choix.tsx';
+import useDefilementFluide from '../../../../hooks/useDefilementFluide.ts';
 
 export type Utilisation = 'InteretGeneral' | 'ActiviteProfessionnelle';
 
@@ -11,8 +12,16 @@ export const ChoixUtilisation = ({
 }: {
   surClick: (choix: Utilisation) => void;
 }) => {
+  useDefilementFluide();
   const [choix, setChoix] = useState<Utilisation | undefined>(undefined);
 
+  useEffect(() => {
+    if (!choix) return;
+    document
+      .getElementById('etape-suivante-bouton')
+      ?.scrollIntoView({ behavior: 'smooth' });
+  }, [choix]);
+
   return (
     <>
       <div className="choix-utilisation text-center">
@@ -119,6 +128,7 @@ export const ChoixUtilisation = ({
 
       <div className="validation">
         <button
+          id="etape-suivante-bouton"
           disabled={!choix}
           type="button"
           className="fr-btn bouton-mac bouton-mac-primaire"

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

@@ -7,6 +7,7 @@
   grid-row-gap: 1.5rem;
   grid-column-gap: 1.5rem;
   justify-content: center;
+  padding: 0 1rem 0 1rem;
 
   @include a-partir-de(md) {
     grid-template-columns: 55% auto;
@@ -199,5 +200,10 @@
       padding: 0 8px;
     }
   }
+
+  .actions {
+    display: flex;
+    gap: 1rem;
+  }
 }