Nouvelle page des gestion des membres d'une collectivité

app.territoiresentransitions.react/src/app/Layout/Header/__snapshots__/Header.stories.storyshot

@@ -3,6 +3,7 @@
 exports[`Storyshots app/Layout/Header Connected 1`] = `
 <header
   className="fr-header"
+  id="app-header"
   role="banner"
 >
   <div
@@ -496,6 +497,7 @@ exports[`Storyshots app/Layout/Header Connected 1`] = `
 exports[`Storyshots app/Layout/Header Connected Visite 1`] = `
 <header
   className="fr-header"
+  id="app-header"
   role="banner"
 >
   <div
@@ -930,6 +932,7 @@ exports[`Storyshots app/Layout/Header Connected Visite 1`] = `
 exports[`Storyshots app/Layout/Header Connected Visite Support 1`] = `
 <header
   className="fr-header"
+  id="app-header"
   role="banner"
 >
   <div
@@ -1423,6 +1426,7 @@ exports[`Storyshots app/Layout/Header Connected Visite Support 1`] = `
 exports[`Storyshots app/Layout/Header Not Connected 1`] = `
 <header
   className="fr-header"
+  id="app-header"
   role="banner"
 >
   <div

app.territoiresentransitions.react/src/app/Layout/__snapshots__/Layout.stories.storyshot

@@ -10,6 +10,7 @@ exports[`Storyshots app/Layout Exemple 1`] = `
   >
     <header
       className="fr-header"
+      id="app-header"
       role="banner"
     >
       <div

app.territoiresentransitions.react/src/app/Redirector.tsx

@@ -14,7 +14,7 @@ export const Redirector = () => {
   const {pathname} = useLocation();
   const {isConnected, user} = useAuth();
   const {data: DCP, isLoading: isLoadingDCP} = useDCP(user?.id);
-  const {invitationId, consume} = useInvitationState();
+  const {invitationId, invitationEmail, consume} = useInvitationState();
   const userCollectivites = useOwnedCollectivites();
   const isLandingConnected = isConnected && pathname === '/'; // L'utilisateur est connecté et arrive sur '/'.
 
@@ -53,10 +53,19 @@ export const Redirector = () => {
         });
       } else if (!isConnected && !consume) {
         // si déconnecté on redirige sur la page "créer un compte"
-        const signUpPathFromInvitation = getAuthPaths(
-          document.location.hostname,
-          `${document.location.href}?consume=1`
-        ).signUp;
+        const signUpPathFromInvitation = new URL(
+          getAuthPaths(
+            document.location.hostname,
+            `${document.location.href}?consume=1`
+          ).signUp
+        );
+        // ajoute l'email associé à l'invitation afin que le formulaire soit pré-rempli
+        if (invitationEmail) {
+          signUpPathFromInvitation.searchParams.append(
+            'email',
+            invitationEmail
+          );
+        }
 
         document.location.replace(signUpPathFromInvitation);
       }

app.territoiresentransitions.react/src/app/pages/collectivite/Users/Membres.tsx

@@ -5,20 +5,23 @@ import {
   useCurrentCollectivite,
 } from 'core-logic/hooks/useCurrentCollectivite';
 import {useUpdateCollectiviteMembre} from 'app/pages/collectivite/Users/useUpdateCollectiviteMembre';
-import {useCollectiviteMembres} from 'app/pages/collectivite/Users/useCollectiviteMembres';
+import {
+  PAGE_SIZE,
+  useCollectiviteMembres,
+} from 'app/pages/collectivite/Users/useCollectiviteMembres';
 import {useRemoveFromCollectivite} from 'app/pages/collectivite/Users/useRemoveFromCollectivite';
 import {
   Membre,
   TRemoveFromCollectivite,
   TUpdateMembre,
 } from 'app/pages/collectivite/Users/types';
 import MembreListTable from 'app/pages/collectivite/Users/components/MembreListTable';
-import InvitationForm from 'app/pages/collectivite/Users/components/InvitationForm';
-import {
-  AddUserToCollectiviteRequest,
-  AddUserToCollectiviteResponse,
-  useAddUserToCollectivite,
-} from 'app/pages/collectivite/Users/useAddUserToCollectivite';
+import {useAddUserToCollectivite} from 'app/pages/collectivite/Users/useAddUserToCollectivite';
+import {Button, Modal, Pagination} from '@tet/ui';
+import {Invite} from 'app/pages/collectivite/Users/components/Invite';
+import {useBaseToast} from 'core-logic/hooks/useBaseToast';
+import {useEffect, useState} from 'react';
+import {useSendInvitation} from 'app/pages/collectivite/Users/useSendInvitation';
 
 export type MembresProps = {
   membres: Membre[];
@@ -27,9 +30,6 @@ export type MembresProps = {
   currentUser: UserData;
   updateMembre: TUpdateMembre;
   removeFromCollectivite: TRemoveFromCollectivite;
-  addUser: (request: AddUserToCollectiviteRequest) => void;
-  addUserResponse: AddUserToCollectiviteResponse | null;
-  resetAddUser: () => void;
 };
 
 /**
@@ -43,19 +43,66 @@ export const Membres = ({
   currentUser,
   updateMembre,
   removeFromCollectivite,
-  addUser,
-  addUserResponse,
-  resetAddUser,
 }: MembresProps) => {
-  const canViewInvitation =
-    collectivite.niveau_acces === 'admin' ||
-    collectivite.niveau_acces === 'edition';
+  const {niveau_acces} = collectivite;
+  const canInvite = niveau_acces === 'admin' || niveau_acces === 'edition';
+  const {data, mutate: addUser} = useAddUserToCollectivite(
+    collectivite,
+    currentUser
+  );
+  const {data: sendData, mutate: sendInvitation} = useSendInvitation(
+    collectivite,
+    currentUser
+  );
+  const {setToast, renderToast} = useBaseToast();
+
+  // affichage des notifications après l'ajout ou l'envoi de l'invitation
+  useEffect(() => {
+    if (!data) return;
+    if (data.added) {
+      setToast(
+        'success',
+        'Nouveau membre ajouté avec succès à la collectivité !'
+      );
+    } else if (data.invitationId) {
+      setToast('success', mailSentMessage(collectivite, data));
+    } else if (data.error) {
+      setToast('info', data.error);
+    }
+  }, [data?.added, data?.error]);
+
+  // affichage de la notification après le renvoi d'une invitation
+  useEffect(() => {
+    if (sendData?.sent) {
+      setToast('success', mailSentMessage(collectivite, sendData));
+    } else if (sendData?.error) {
+      setToast('error', sendData.error);
+    }
+  }, [sendData?.sent, sendData?.email, sendData?.error]);
 
   return (
     <main data-test="Users" className="fr-container mt-9 mb-16">
-      <h1 className="mb-10 lg:mb-14 lg:text-center">Gestion des membres</h1>
+      <h1 className="mb-10 lg:mb-14 lg:text-center flex flex-row justify-between">
+        Gestion des membres
+        {canInvite && (
+          <Modal
+            title="Inviter un membre"
+            render={({close}) => (
+              <Invite
+                niveauAcces={niveau_acces}
+                onCancel={close}
+                onSubmit={data => {
+                  addUser(data);
+                  close();
+                }}
+              />
+            )}
+          >
+            <Button data-test="invite">Inviter un membre</Button>
+          </Modal>
+        )}
+      </h1>
 
-      <h2 className="">Liste des membres</h2>
       <MembreListTable
         currentUserId={currentUser.id}
         currentUserAccess={
@@ -65,53 +112,59 @@ export const Membres = ({
         isLoading={isLoading}
         updateMembre={updateMembre}
         removeFromCollectivite={removeFromCollectivite}
+        sendInvitation={sendInvitation}
       />
-
-      {canViewInvitation && (
-        <>
-          <h2 className="mt-12">Invitation</h2>
-          <p className="italic text-gray-500">
-            Tous les champs sont obligatoires
-          </p>
-          <InvitationForm
-            addUser={addUser}
-            addUserResponse={addUserResponse}
-            resetAddUser={resetAddUser}
-            currentUser={currentUser}
-            currentCollectivite={collectivite}
-          />
-        </>
-      )}
+      {renderToast()}
     </main>
   );
 };
 
+// formate le message affiché après l'envoi d'un email
+const mailSentMessage = (
+  collectivite: CurrentCollectivite,
+  data: {email: string}
+): string =>
+  `L'invitation à rejoindre la collectivité ${collectivite.nom} a bien été envoyée à ${data.email}`;
+
 const MembresConnected = () => {
   const auth = useAuth();
   const user = auth.user;
   const collectivite_id = useCollectiviteId();
   const collectivite = useCurrentCollectivite();
 
-  const {membres, isLoading: isMemberLoading} = useCollectiviteMembres();
+  const [page, setPage] = useState(1);
+  const {data, isLoading} = useCollectiviteMembres(page);
   const {updateMembre} = useUpdateCollectiviteMembre();
   const {removeFromCollectivite} = useRemoveFromCollectivite();
-  const {addUser, addUserResponse, resetAddUser} = useAddUserToCollectivite();
 
   if (!user?.id || !collectivite_id || !collectivite) return null;
 
+  const {membres, count} = data;
+
   return (
-    <Membres
-      addUser={addUser}
-      addUserResponse={addUserResponse}
-      resetAddUser={resetAddUser}
-      currentUser={user}
-      membres={membres}
-      collectivite={collectivite}
-      updateMembre={updateMembre}
-      removeFromCollectivite={removeFromCollectivite}
-      isLoading={isMemberLoading}
-    />
+    <>
+      <Membres
+        currentUser={user}
+        membres={membres}
+        collectivite={collectivite}
+        updateMembre={updateMembre}
+        removeFromCollectivite={removeFromCollectivite}
+        isLoading={isLoading}
+      />
+      {count > PAGE_SIZE && (
+        <Pagination
+          className="self-center"
+          selectedPage={page}
+          nbOfPages={Math.ceil(count / PAGE_SIZE)}
+          onChange={selectedPage => {
+            setPage(selectedPage);
+            document.getElementById('app-header')?.scrollIntoView();
+          }}
+        />
+      )}
+    </>
   );
 };
 
 export default MembresConnected;
+