✨(app-desk) add new member to team

We integrate the endpoint to add a new member
to the team with the multi select seach user.
- If it is a unknown email, it will send an invitation,
- If it is a known user, it will add it to the team.

src/frontend/apps/desk/src/features/members/api/useCreateInvitation.tsx

@@ -5,6 +5,7 @@ import { User } from '@/features/auth';
 import { Team } from '@/features/teams';
 
 import { Invitation, Role } from '../types';
+import { OptionType } from '../typesSearchMembers';
 
 interface CreateInvitationParams {
   email: User['email'];
@@ -28,7 +29,10 @@ export const createInvitation = async ({
   if (!response.ok) {
     throw new APIError(
       `Failed to create the invitation for ${email}`,
-      await errorCauses(response, email),
+      await errorCauses(response, {
+        value: email,
+        type: OptionType.INVITATION,
+      }),
     );
   }
 

src/frontend/apps/desk/src/features/members/api/useCreateTeamAccess.tsx

@@ -5,6 +5,7 @@ import { User } from '@/features/auth';
 import { KEY_LIST_TEAM, KEY_TEAM, Team } from '@/features/teams';
 
 import { Access, Role } from '../types';
+import { OptionType } from '../typesSearchMembers';
 
 import { KEY_LIST_TEAM_ACCESSES } from '.';
 
@@ -32,7 +33,10 @@ export const createTeamAccess = async ({
   if (!response.ok) {
     throw new APIError(
       `Failed to add ${name} in the team.`,
-      await errorCauses(response),
+      await errorCauses(response, {
+        value: name,
+        type: OptionType.NEW_MEMBER,
+      }),
     );
   }
 

src/frontend/apps/desk/src/features/members/assets/add-member.svg

@@ -0,0 +1,14 @@
+<svg viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path
+    d="M21.34 26.04C20.9 26.02 20.46 26 20 26C15.16 26 10.64 27.34 6.78 29.64C5.02 30.68 4 32.64 4 34.7V40H22.52C20.94 37.74 20 34.98 20 32C20 29.86 20.5 27.86 21.34 26.04Z"
+    fill="currentColor"
+  />
+  <path
+    d="M20 24C24.4183 24 28 20.4183 28 16C28 11.5817 24.4183 8 20 8C15.5817 8 12 11.5817 12 16C12 20.4183 15.5817 24 20 24Z"
+    fill="currentColor"
+  />
+  <path
+    d="M33 24C28.032 24 24 28.032 24 33C24 37.968 28.032 42 33 42C37.968 42 42 37.968 42 33C42 28.032 37.968 24 33 24ZM36.6 33.9H33.9V36.6C33.9 37.095 33.495 37.5 33 37.5C32.505 37.5 32.1 37.095 32.1 36.6V33.9H29.4C28.905 33.9 28.5 33.495 28.5 33C28.5 32.505 28.905 32.1 29.4 32.1H32.1V29.4C32.1 28.905 32.505 28.5 33 28.5C33.495 28.5 33.9 28.905 33.9 29.4V32.1H36.6C37.095 32.1 37.5 32.505 37.5 33C37.5 33.495 37.095 33.9 36.6 33.9Z"
+    fill="currentColor"
+  />
+</svg>

src/frontend/apps/desk/src/features/members/components/ModalAddMembers.tsx

@@ -11,13 +11,22 @@ import { createGlobalStyle } from 'styled-components';
 
 import { APIError } from '@/api';
 import { Box, Text } from '@/components';
+import { useCunninghamTheme } from '@/cunningham';
 import { Team } from '@/features/teams';
 
-import { useCreateInvitation } from '../api';
-import { Invitation, Role } from '../types';
+import { useCreateInvitation, useCreateTeamAccess } from '../api';
+import IconAddMember from '../assets/add-member.svg';
+import { Role } from '../types';
+import {
+  OptionInvitation,
+  OptionNewMember,
+  OptionSelect,
+  OptionType,
+  isOptionNewMember,
+} from '../typesSearchMembers';
 
 import { ChooseRole } from './ChooseRole';
-import { OptionSelect, SearchMembers } from './SearchMembers';
+import { OptionsSelect, SearchMembers } from './SearchMembers';
 
 const GlobalStyle = createGlobalStyle`
   .c__modal {
@@ -25,6 +34,11 @@ const GlobalStyle = createGlobalStyle`
   }
 `;
 
+type APIErrorMember = APIError<{
+  value: string;
+  type: OptionType;
+}>;
+
 interface ModalAddMembersProps {
   currentRole: Role;
   onClose: () => void;
@@ -36,49 +50,81 @@ export const ModalAddMembers = ({
   onClose,
   team,
 }: ModalAddMembersProps) => {
+  const { colorsTokens } = useCunninghamTheme();
   const { t } = useTranslation();
-  const [selectedMembers, setSelectedMembers] = useState<OptionSelect>([]);
+  const [selectedMembers, setSelectedMembers] = useState<OptionsSelect>([]);
   const [selectedRole, setSelectedRole] = useState<Role>(Role.MEMBER);
   const { toast } = useToastProvider();
   const { mutateAsync: createInvitation } = useCreateInvitation();
+  const { mutateAsync: createTeamAccess } = useCreateTeamAccess();
 
-  const handleValidate = async () => {
-    const promisesMembers = selectedMembers.map((selectedMember) => {
-      return createInvitation({
-        email: selectedMember.value.email,
-        role: selectedRole,
-        teamId: team.id,
-      });
+  const switchActions = (selectedMembers: OptionsSelect) =>
+    selectedMembers.map(async (selectedMember) => {
+      switch (selectedMember.type) {
+        case OptionType.INVITATION:
+          await createInvitation({
+            email: selectedMember.value.email,
+            role: selectedRole,
+            teamId: team.id,
+          });
+          break;
+
+        case OptionType.NEW_MEMBER:
+          await createTeamAccess({
+            name: selectedMember.value.name,
+            role: selectedRole,
+            teamId: team.id,
+            userId: selectedMember.value.id,
+          });
+          break;
+      }
+
+      return selectedMember;
     });
 
-    const promises = await Promise.allSettled<Invitation>(promisesMembers);
+  const toastOptions = {
+    duration: 4000,
+  };
+
+  const onError = (dataError: APIErrorMember['data']) => {
+    const messageError =
+      dataError?.type === OptionType.INVITATION
+        ? t(`Failed to create the invitation for {{email}}`, {
+            email: dataError?.value,
+          })
+        : t(`Failed to add {{name}} in the team`, {
+            name: dataError?.value,
+          });
+
+    toast(messageError, VariantType.ERROR, toastOptions);
+  };
+
+  const onSuccess = (option: OptionSelect) => {
+    const message = !isOptionNewMember(option)
+      ? t('Invitation sent to {{email}}', {
+          email: option.value.email,
+        })
+      : t('Member {{name}} added to the team', {
+          name: option.value.name,
+        });
+
+    toast(message, VariantType.SUCCESS, toastOptions);
+  };
+
+  const handleValidate = async () => {
+    const settledPromises = await Promise.allSettled<
+      OptionInvitation | OptionNewMember
+    >(switchActions(selectedMembers));
 
     onClose();
-    promises.forEach((promise) => {
-      switch (promise.status) {
+    settledPromises.forEach((settledPromise) => {
+      switch (settledPromise.status) {
         case 'rejected':
-          const apiError = promise.reason as APIError<string>;
-          toast(
-            t(`Failed to create the invitation for {{email}}`, {
-              email: apiError.data,
-            }),
-            VariantType.ERROR,
-            {
-              duration: 4000,
-            },
-          );
+          onError((settledPromise.reason as APIErrorMember).data);
           break;
 
         case 'fulfilled':
-          toast(
-            t('Invitation sent to {{email}}', {
-              email: promise.value.email,
-            }),
-            VariantType.SUCCESS,
-            {
-              duration: 4000,
-            },
-          );
+          onSuccess(settledPromise.value);
           break;
       }
     });
@@ -106,7 +152,14 @@ export const ModalAddMembers = ({
         </Button>
       }
       size={ModalSize.MEDIUM}
-      title={t('Add members to the team')}
+      title={
+        <Box $align="center" $gap="1rem">
+          <IconAddMember width={48} color={colorsTokens()['primary-text']} />
+          <Text $size="h3" className="m-0">
+            {t('Add a member')}
+          </Text>
+        </Box>
+      }
     >
       <GlobalStyle />
       <Box className="mb-xl mt-l">

src/frontend/apps/desk/src/features/members/components/SearchMembers.tsx

@@ -3,20 +3,17 @@ import { useTranslation } from 'react-i18next';
 import { Options } from 'react-select';
 import AsyncSelect from 'react-select/async';
 
-import { User } from '@/features/auth';
 import { Team } from '@/features/teams';
 import { isValidEmail } from '@/utils';
 
 import { KEY_LIST_USER, useUsers } from '../api/useUsers';
+import { OptionSelect, OptionType } from '../typesSearchMembers';
 
-export type OptionSelect = Options<{
-  value: Partial<User> & { email: User['email'] };
-  label: string;
-}>;
+export type OptionsSelect = Options<OptionSelect>;
 
 interface SearchMembersProps {
   team: Team;
-  setSelectedMembers: (value: OptionSelect) => void;
+  setSelectedMembers: (value: OptionsSelect) => void;
 }
 
 export const SearchMembers = ({
@@ -26,7 +23,7 @@ export const SearchMembers = ({
   const { t } = useTranslation();
   const [input, setInput] = useState('');
   const [userQuery, setUserQuery] = useState('');
-  const resolveOptionsRef = useRef<((value: OptionSelect) => void) | null>(
+  const resolveOptionsRef = useRef<((value: OptionsSelect) => void) | null>(
     null,
   );
   const { data } = useUsers(
@@ -44,9 +41,10 @@ export const SearchMembers = ({
       return;
     }
 
-    let users: OptionSelect = options.map((user) => ({
+    let users: OptionsSelect = options.map((user) => ({
       value: user,
-      label: user.name || '',
+      label: user.name || user.email,
+      type: OptionType.NEW_MEMBER,
     }));
 
     if (userQuery && isValidEmail(userQuery)) {
@@ -57,6 +55,7 @@ export const SearchMembers = ({
           {
             value: { email: userQuery },
             label: userQuery,
+            type: OptionType.INVITATION,
           },
         ];
       }
@@ -67,8 +66,8 @@ export const SearchMembers = ({
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [options]);
 
-  const loadOptions = (): Promise<OptionSelect> => {
-    return new Promise<OptionSelect>((resolve) => {
+  const loadOptions = (): Promise<OptionsSelect> => {
+    return new Promise<OptionsSelect>((resolve) => {
       resolveOptionsRef.current = resolve;
     });
   };

src/frontend/apps/desk/src/features/members/typesSearchMembers.tsx

@@ -0,0 +1,26 @@
+import { User } from '@/features/auth';
+
+export enum OptionType {
+  INVITATION = 'invitation',
+  NEW_MEMBER = 'new_member',
+}
+
+export const isOptionNewMember = (
+  data: OptionSelect,
+): data is OptionNewMember => {
+  return 'id' in data.value;
+};
+
+export interface OptionInvitation {
+  value: { email: string };
+  label: string;
+  type: OptionType.INVITATION;
+}
+
+export interface OptionNewMember {
+  value: User;
+  label: string;
+  type: OptionType.NEW_MEMBER;
+}
+
+export type OptionSelect = OptionNewMember | OptionInvitation;

src/frontend/apps/desk/src/i18n/translations.json

@@ -5,6 +5,7 @@
       "404 - Page not found": "404 - Page introuvable",
       "Access to the cells menu": "Accès au menu cellules",
       "Add": "Ajouter",
+      "Add a member": "Ajouter un membre",
       "Add a team": "Ajouter un groupe",
       "Add members to the team": "Ajoutez des membres à votre groupe",
       "Add people to the “{{teamName}}“ group.": "Ajouter des personnes au groupe “{{teamName}}“.",
@@ -27,6 +28,7 @@
       "Empty teams icon": "Icône de groupe vide",
       "Enter the new name of the selected team": "Entrez le nouveau nom du groupe sélectionné",
       "Enter the new team name": "Entrez le nouveau nom de groupe",
+      "Failed to add {{name}} in the team": "Échec de l'ajout de {{name}} dans le groupe",
       "Failed to create the invitation for {{email}}": "Échec de la création de l'invitation pour {{email}}",
       "Favorite": "Favoris",
       "Find a member to add to the team": "Trouver un membre à ajouter au groupe",
@@ -41,6 +43,7 @@
       "Marianne Logo": "Logo Marianne",
       "Member": "Membre",
       "Member icon": "Icône de membre",
+      "Member {{name}} added to the team": "Membre {{name}} ajouté au groupe",
       "Members of “{{teamName}}“": "Membres de “{{teamName}}“",
       "Name the team": "Nommer le groupe",
       "Names": "Noms",