Add profile pictures to people and fix account/workspace deletion (#984)

* Fix LinkedIn URL not redirecting to the right url

* add avatars for people and seeds

* Fix delete account/workspace

* Add people picture on other pages

* Change style of delete button

* Revert modal to previous size

* Fix tests

front/src/generated/graphql.tsx

@@ -1185,6 +1185,7 @@ export type Person = {
   ActivityTarget?: Maybe<Array<ActivityTarget>>;
   _activityCount: Scalars['Int'];
   activities: Array<Activity>;
+  avatarUrl?: Maybe<Scalars['String']>;
   city?: Maybe<Scalars['String']>;
   comments: Array<Comment>;
   company?: Maybe<Company>;
@@ -1204,6 +1205,7 @@ export type Person = {
 
 export type PersonCreateInput = {
   ActivityTarget?: InputMaybe<ActivityTargetCreateNestedManyWithoutPersonInput>;
+  avatarUrl?: InputMaybe<Scalars['String']>;
   city?: InputMaybe<Scalars['String']>;
   company?: InputMaybe<CompanyCreateNestedOneWithoutPeopleInput>;
   createdAt?: InputMaybe<Scalars['DateTime']>;
@@ -1242,6 +1244,7 @@ export type PersonOrderByRelationAggregateInput = {
 
 export type PersonOrderByWithRelationInput = {
   ActivityTarget?: InputMaybe<ActivityTargetOrderByRelationAggregateInput>;
+  avatarUrl?: InputMaybe<SortOrder>;
   city?: InputMaybe<SortOrder>;
   company?: InputMaybe<CompanyOrderByWithRelationInput>;
   companyId?: InputMaybe<SortOrder>;
@@ -1263,6 +1266,7 @@ export type PersonRelationFilter = {
 };
 
 export enum PersonScalarFieldEnum {
+  AvatarUrl = 'avatarUrl',
   City = 'city',
   CompanyId = 'companyId',
   CreatedAt = 'createdAt',
@@ -1280,6 +1284,7 @@ export enum PersonScalarFieldEnum {
 
 export type PersonUpdateInput = {
   ActivityTarget?: InputMaybe<ActivityTargetUpdateManyWithoutPersonNestedInput>;
+  avatarUrl?: InputMaybe<Scalars['String']>;
   city?: InputMaybe<Scalars['String']>;
   company?: InputMaybe<CompanyUpdateOneWithoutPeopleNestedInput>;
   createdAt?: InputMaybe<Scalars['DateTime']>;
@@ -1316,6 +1321,7 @@ export type PersonWhereInput = {
   ActivityTarget?: InputMaybe<ActivityTargetListRelationFilter>;
   NOT?: InputMaybe<Array<PersonWhereInput>>;
   OR?: InputMaybe<Array<PersonWhereInput>>;
+  avatarUrl?: InputMaybe<StringNullableFilter>;
   city?: InputMaybe<StringNullableFilter>;
   company?: InputMaybe<CompanyRelationFilter>;
   companyId?: InputMaybe<StringNullableFilter>;
@@ -2376,7 +2382,7 @@ export type GetPeopleQueryVariables = Exact<{
 }>;
 
 
-export type GetPeopleQuery = { __typename?: 'Query', people: Array<{ __typename?: 'Person', id: string, phone?: string | null, email?: string | null, city?: string | null, firstName?: string | null, lastName?: string | null, displayName: string, jobTitle?: string | null, linkedinUrl?: string | null, createdAt: string, _activityCount: number, company?: { __typename?: 'Company', id: string, name: string, domainName: string } | null }> };
+export type GetPeopleQuery = { __typename?: 'Query', people: Array<{ __typename?: 'Person', id: string, phone?: string | null, email?: string | null, city?: string | null, firstName?: string | null, lastName?: string | null, displayName: string, jobTitle?: string | null, linkedinUrl?: string | null, avatarUrl?: string | null, createdAt: string, _activityCount: number, company?: { __typename?: 'Company', id: string, name: string, domainName: string } | null }> };
 
 export type GetPersonPhoneByIdQueryVariables = Exact<{
   id: Scalars['String'];
@@ -2432,7 +2438,7 @@ export type GetPersonQueryVariables = Exact<{
 }>;
 
 
-export type GetPersonQuery = { __typename?: 'Query', findUniquePerson: { __typename?: 'Person', id: string, firstName?: string | null, lastName?: string | null, displayName: string, email?: string | null, createdAt: string, city?: string | null, jobTitle?: string | null, linkedinUrl?: string | null, phone?: string | null, _activityCount: number, company?: { __typename?: 'Company', id: string, name: string, domainName: string } | null } };
+export type GetPersonQuery = { __typename?: 'Query', findUniquePerson: { __typename?: 'Person', id: string, firstName?: string | null, lastName?: string | null, displayName: string, email?: string | null, createdAt: string, city?: string | null, jobTitle?: string | null, linkedinUrl?: string | null, avatarUrl?: string | null, phone?: string | null, _activityCount: number, company?: { __typename?: 'Company', id: string, name: string, domainName: string } | null } };
 
 export type UpdateOnePersonMutationVariables = Exact<{
   where: PersonWhereUniqueInput;
@@ -2469,7 +2475,7 @@ export type GetPipelineProgressQueryVariables = Exact<{
 }>;
 
 
-export type GetPipelineProgressQuery = { __typename?: 'Query', findManyPipelineProgress: Array<{ __typename?: 'PipelineProgress', id: string, pipelineStageId: string, progressableType: PipelineProgressableType, progressableId: string, amount?: number | null, closeDate?: string | null, pointOfContactId?: string | null, probability?: number | null, pointOfContact?: { __typename?: 'Person', id: string, firstName?: string | null, lastName?: string | null, displayName: string } | null }> };
+export type GetPipelineProgressQuery = { __typename?: 'Query', findManyPipelineProgress: Array<{ __typename?: 'PipelineProgress', id: string, pipelineStageId: string, progressableType: PipelineProgressableType, progressableId: string, amount?: number | null, closeDate?: string | null, pointOfContactId?: string | null, probability?: number | null, pointOfContact?: { __typename?: 'Person', id: string, firstName?: string | null, lastName?: string | null, displayName: string, avatarUrl?: string | null } | null }> };
 
 export type UpdateOnePipelineProgressMutationVariables = Exact<{
   id?: InputMaybe<Scalars['String']>;
@@ -2523,7 +2529,7 @@ export type SearchPeopleQueryVariables = Exact<{
 }>;
 
 
-export type SearchPeopleQuery = { __typename?: 'Query', searchResults: Array<{ __typename?: 'Person', id: string, phone?: string | null, email?: string | null, city?: string | null, firstName?: string | null, lastName?: string | null, displayName: string, createdAt: string }> };
+export type SearchPeopleQuery = { __typename?: 'Query', searchResults: Array<{ __typename?: 'Person', id: string, phone?: string | null, email?: string | null, city?: string | null, firstName?: string | null, lastName?: string | null, displayName: string, avatarUrl?: string | null, createdAt: string }> };
 
 export type SearchUserQueryVariables = Exact<{
   where?: InputMaybe<UserWhereInput>;
@@ -3617,6 +3623,7 @@ export const GetPeopleDocument = gql`
     displayName
     jobTitle
     linkedinUrl
+    avatarUrl
     createdAt
     _activityCount
     company {
@@ -3928,6 +3935,7 @@ export const GetPersonDocument = gql`
     city
     jobTitle
     linkedinUrl
+    avatarUrl
     phone
     _activityCount
     company {
@@ -4152,6 +4160,7 @@ export const GetPipelineProgressDocument = gql`
       firstName
       lastName
       displayName
+      avatarUrl
     }
     probability
   }
@@ -4383,6 +4392,7 @@ export const SearchPeopleDocument = gql`
     firstName
     lastName
     displayName
+    avatarUrl
     createdAt
   }
 }

front/src/modules/activities/components/ActivityRelationPicker.tsx

@@ -216,7 +216,12 @@ export function ActivityRelationPicker({ activity }: OwnProps) {
               pictureUrl={entity.avatarUrl}
             />
           ) : (
-            <PersonChip key={entity.id} name={entity.name} id={entity.id} />
+            <PersonChip
+              key={entity.id}
+              name={entity.name}
+              id={entity.id}
+              pictureUrl={entity.avatarUrl ?? ''}
+            />
           ),
         )}
       </StyledRelationContainer>

front/src/modules/people/components/EditablePeopleFullName.tsx

@@ -10,7 +10,12 @@ type OwnProps = {
     | Partial<
         Pick<
           Person,
-          'id' | 'firstName' | 'lastName' | 'displayName' | '_activityCount'
+          | 'id'
+          | 'firstName'
+          | 'lastName'
+          | 'displayName'
+          | 'avatarUrl'
+          | '_activityCount'
         >
       >
     | null
@@ -44,6 +49,7 @@ export function EditablePeopleFullName({
           <PersonChip
             name={`${person?.firstName ?? ''} ${person?.lastName ?? ''}`}
             id={person?.id ?? ''}
+            pictureUrl={person?.avatarUrl ?? ''}
           />
         </NoEditModeContainer>
       }

front/src/modules/people/hooks/useSetPeopleEntityTable.ts

@@ -108,6 +108,7 @@ export function useSetPeopleEntityTable() {
               lastName: person.lastName ?? null,
               commentCount: person._activityCount,
               displayName: person.displayName ?? null,
+              avatarUrl: person.avatarUrl ?? null,
             });
           }
         }

front/src/modules/people/queries/select.ts

@@ -30,6 +30,7 @@ export const GET_PEOPLE = gql`
       displayName
       jobTitle
       linkedinUrl
+      avatarUrl
       createdAt
       _activityCount
       company {
@@ -69,6 +70,7 @@ export function useFilteredSearchPeopleQuery({
         id: entity.id,
         entityType: CommentableType.Person,
         name: `${entity.firstName} ${entity.lastName}`,
+        avatarUrl: entity.avatarUrl,
         avatarType: 'rounded',
       } as CommentableEntityForSelect),
     searchFilter,

front/src/modules/people/queries/show.ts

@@ -14,6 +14,7 @@ export const GET_PERSON = gql`
       city
       jobTitle
       linkedinUrl
+      avatarUrl
       phone
       _activityCount
       company {

front/src/modules/people/states/peopleNamesFamilyState.ts

@@ -6,6 +6,7 @@ export const peopleNameCellFamilyState = atomFamily<
     lastName: string | null;
     commentCount: number | null;
     displayName: string | null;
+    avatarUrl: string | null;
   },
   string
 >({
@@ -15,5 +16,6 @@ export const peopleNameCellFamilyState = atomFamily<
     lastName: null,
     commentCount: null,
     displayName: null,
+    avatarUrl: null,
   },
 });

front/src/modules/people/table/components/EditablePeopleFullNameCell.tsx

@@ -13,9 +13,8 @@ export function EditablePeopleFullNameCell() {
 
   const [updatePerson] = useUpdateOnePersonMutation();
 
-  const { commentCount, firstName, lastName, displayName } = useRecoilValue(
+  const { commentCount, firstName, lastName, displayName, avatarUrl } =
-    peopleNameCellFamilyState(currentRowEntityId ?? ''),
+    useRecoilValue(peopleNameCellFamilyState(currentRowEntityId ?? ''));
-  );
 
   return (
     <EditablePeopleFullName
@@ -25,6 +24,7 @@ export function EditablePeopleFullNameCell() {
         firstName,
         lastName,
         displayName: displayName ?? undefined,
+        avatarUrl: avatarUrl,
       }}
       onSubmit={(newFirstValue, newSecondValue) =>
         updatePerson({

front/src/modules/pipeline/editable-field/components/PipelineProgressPointOfContactEditableField.tsx

@@ -10,7 +10,7 @@ import { PipelineProgressPointOfContactPickerFieldEditMode } from './PipelinePro
 
 type OwnProps = {
   pipelineProgress: Pick<PipelineProgress, 'id' | 'pointOfContactId'> & {
-    pointOfContact?: Pick<Person, 'id' | 'displayName'> | null;
+    pointOfContact?: Pick<Person, 'id' | 'displayName' | 'avatarUrl'> | null;
   };
 };
 
@@ -36,6 +36,9 @@ export function PipelineProgressPointOfContactEditableField({
               <PersonChip
                 id={pipelineProgress.pointOfContact.id}
                 name={pipelineProgress.pointOfContact.displayName}
+                pictureUrl={
+                  pipelineProgress.pointOfContact.avatarUrl ?? undefined
+                }
               />
             ) : (
               <></>

front/src/modules/pipeline/queries/select.ts

@@ -43,6 +43,7 @@ export const GET_PIPELINE_PROGRESS = gql`
         firstName
         lastName
         displayName
+        avatarUrl
       }
       probability
     }

front/src/modules/settings/components/SettingsNavbar.tsx

@@ -52,17 +52,6 @@ export function SettingsNavbar() {
         }
       />
       <NavTitle label="Workspace" />
-      <NavItem
-        label="Members"
-        to="/settings/workspace-members"
-        icon={<IconUsers size={theme.icon.size.md} />}
-        active={
-          !!useMatch({
-            path: useResolvedPath('/settings/workspace-members').pathname,
-            end: true,
-          })
-        }
-      />
       <NavItem
         label="General"
         to="/settings/workspace"
@@ -74,6 +63,17 @@ export function SettingsNavbar() {
           })
         }
       />
+      <NavItem
+        label="Members"
+        to="/settings/workspace-members"
+        icon={<IconUsers size={theme.icon.size.md} />}
+        active={
+          !!useMatch({
+            path: useResolvedPath('/settings/workspace-members').pathname,
+            end: true,
+          })
+        }
+      />
       <NavTitle label="Other" />
       <NavItem
         label="Logout"

front/src/modules/settings/profile/components/DeleteAccount.tsx

@@ -0,0 +1,58 @@
+import { useCallback, useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+
+import { useAuth } from '@/auth/hooks/useAuth';
+import { AppPath } from '@/types/AppPath';
+import { ButtonVariant } from '@/ui/button/components/Button';
+import { SubSectionTitle } from '@/ui/title/components/SubSectionTitle';
+import { useDeleteUserAccountMutation } from '~/generated/graphql';
+
+import { DeleteModal, StyledDeleteButton } from './DeleteModal';
+
+export function DeleteAccount() {
+  const [isDeleteAccountModalOpen, setIsDeleteAccountModalOpen] =
+    useState(false);
+
+  const [deleteUserAccount] = useDeleteUserAccountMutation();
+  const { signOut } = useAuth();
+  const navigate = useNavigate();
+
+  const handleLogout = useCallback(() => {
+    signOut();
+    navigate(AppPath.SignIn);
+  }, [signOut, navigate]);
+
+  const deleteAccount = async () => {
+    await deleteUserAccount();
+    handleLogout();
+  };
+
+  return (
+    <>
+      <SubSectionTitle
+        title="Danger zone"
+        description="Delete account and all the associated data"
+      />
+
+      <StyledDeleteButton
+        onClick={() => setIsDeleteAccountModalOpen(true)}
+        variant={ButtonVariant.Secondary}
+        title="Delete account"
+      />
+
+      <DeleteModal
+        isOpen={isDeleteAccountModalOpen}
+        setIsOpen={setIsDeleteAccountModalOpen}
+        title="Account Deletion"
+        subtitle={
+          <>
+            This action cannot be undone. This will permanently delete your
+            entire account. <br /> Please type in your email to confirm.
+          </>
+        }
+        handleConfirmDelete={deleteAccount}
+        deleteButtonText="Delete account"
+      />
+    </>
+  );
+}

front/src/modules/settings/profile/components/DeleteModal.tsx

@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import { ReactNode, useState } from 'react';
 import styled from '@emotion/styled';
 import { AnimatePresence, LayoutGroup } from 'framer-motion';
 import { useRecoilValue } from 'recoil';
@@ -12,7 +12,7 @@ import { debounce } from '~/utils/debounce';
 interface DeleteModalProps {
   isOpen: boolean;
   title: string;
-  subtitle: string;
+  subtitle: ReactNode;
   setIsOpen: (val: boolean) => void;
   handleConfirmDelete: () => void;
   deleteButtonText?: string;
@@ -23,6 +23,10 @@ const StyledTitle = styled.div`
   font-weight: ${({ theme }) => theme.font.weight.semiBold};
 `;
 
+const StyledSubtitle = styled.div`
+  text-align: center;
+`;
+
 const StyledModal = styled(Modal)`
   color: ${({ theme }) => theme.font.color.primary};
   > * + * {
@@ -70,22 +74,18 @@ export function DeleteModal({
     250,
   );
 
-  const errorMessage =
-    email && !isValidEmail ? 'email provided is not correct' : '';
-
   return (
     <AnimatePresence mode="wait">
       <LayoutGroup>
-        <StyledModal isOpen={isOpen}>
+        <StyledModal isOpen={isOpen} onOutsideClick={() => setIsOpen(!isOpen)}>
           <StyledTitle>{title}</StyledTitle>
-          <div>{subtitle}</div>
+          <StyledSubtitle>{subtitle}</StyledSubtitle>
           <TextInput
             value={email}
             onChange={handleEmailChange}
             placeholder={userEmail}
             fullWidth
             key={'email-' + userEmail}
-            error={errorMessage}
           />
           <StyledDeleteButton
             onClick={handleConfirmDelete}

front/src/modules/settings/profile/components/DeleteWorkspace.tsx

@@ -5,21 +5,15 @@ import { useAuth } from '@/auth/hooks/useAuth';
 import { AppPath } from '@/types/AppPath';
 import { ButtonVariant } from '@/ui/button/components/Button';
 import { SubSectionTitle } from '@/ui/title/components/SubSectionTitle';
-import {
+import { useDeleteCurrentWorkspaceMutation } from '~/generated/graphql';
-  useDeleteCurrentWorkspaceMutation,
-  useDeleteUserAccountMutation,
-} from '~/generated/graphql';
 
 import { DeleteModal, StyledDeleteButton } from './DeleteModal';
 
 export function DeleteWorkspace() {
   const [isDeleteWorkSpaceModalOpen, setIsDeleteWorkSpaceModalOpen] =
     useState(false);
-  const [isDeleteAccountModalOpen, setIsDeleteAccountModalOpen] =
-    useState(false);
 
   const [deleteCurrentWorkspace] = useDeleteCurrentWorkspaceMutation();
-  const [deleteUserAccount] = useDeleteUserAccountMutation();
   const { signOut } = useAuth();
   const navigate = useNavigate();
 
@@ -33,16 +27,6 @@ export function DeleteWorkspace() {
     handleLogout();
   };
 
-  const deleteAccount = async () => {
-    await deleteUserAccount();
-    handleLogout();
-  };
-
-  const subtitle = (
-    type: 'workspace' | 'account',
-  ) => `This action cannot be undone. This will permanently delete your
-  entire ${type}. Please type in your email to confirm.`;
-
   return (
     <>
       <SubSectionTitle
@@ -55,33 +39,19 @@ export function DeleteWorkspace() {
         title="Delete workspace"
       />
 
-      <SubSectionTitle
-        title=""
-        description="Delete account and all the associated data"
-      />
-      <StyledDeleteButton
-        onClick={() => setIsDeleteAccountModalOpen(true)}
-        variant={ButtonVariant.Secondary}
-        title="Delete account"
-      />
-
       <DeleteModal
         isOpen={isDeleteWorkSpaceModalOpen}
         setIsOpen={setIsDeleteWorkSpaceModalOpen}
         title="Workspace Deletion"
-        subtitle={subtitle('workspace')}
+        subtitle={
+          <>
+            This action cannot be undone. This will permanently delete your
+            entire workspace. <br /> Please type in your email to confirm.
+          </>
+        }
         handleConfirmDelete={deleteWorkspace}
         deleteButtonText="Delete workspace"
       />
-
-      <DeleteModal
-        isOpen={isDeleteAccountModalOpen}
-        setIsOpen={setIsDeleteAccountModalOpen}
-        title="Account Deletion"
-        subtitle={subtitle('account')}
-        handleConfirmDelete={deleteAccount}
-        deleteButtonText="Delete account"
-      />
     </>
   );
 }

front/src/modules/ui/layout/show-page/components/ShowPageSummaryCard.tsx

@@ -22,7 +22,7 @@ const StyledShowPageSummaryCard = styled.div`
   align-items: center;
   display: flex;
   flex-direction: column;
-  gap: ${({ theme }) => theme.spacing(6)};
+  gap: ${({ theme }) => theme.spacing(3)};
   justify-content: center;
   padding: ${({ theme }) => theme.spacing(6)} ${({ theme }) => theme.spacing(3)}
     ${({ theme }) => theme.spacing(3)} ${({ theme }) => theme.spacing(3)};

front/src/modules/ui/modal/components/Modal.tsx

@@ -1,7 +1,12 @@
-import React from 'react';
+import React, { useRef } from 'react';
 import styled from '@emotion/styled';
 import { motion } from 'framer-motion';
 
+import {
+  ClickOutsideMode,
+  useListenClickOutside,
+} from '@/ui/hooks/useListenClickOutside';
+
 const StyledContainer = styled.div`
   align-items: center;
   display: flex;
@@ -32,6 +37,7 @@ const BackDrop = styled(motion.div)`
 type Props = React.PropsWithChildren &
   React.ComponentProps<'div'> & {
     isOpen?: boolean;
+    onOutsideClick?: () => void;
   };
 
 const modalVariants = {
@@ -40,13 +46,25 @@ const modalVariants = {
   exit: { opacity: 0 },
 };
 
-export function Modal({ isOpen = false, children, ...restProps }: Props) {
+export function Modal({
+  isOpen = false,
+  children,
+  onOutsideClick,
+  ...restProps
+}: Props) {
+  const modalRef = useRef(null);
+
+  useListenClickOutside({
+    refs: [modalRef],
+    callback: () => onOutsideClick?.(),
+    mode: ClickOutsideMode.absolute,
+  });
+
   if (!isOpen) {
     return null;
   }
 
   return (
-    <>
     <BackDrop>
       <ModalDiv
         layout
@@ -54,10 +72,10 @@ export function Modal({ isOpen = false, children, ...restProps }: Props) {
         animate="visible"
         exit="exit"
         variants={modalVariants}
+        ref={modalRef}
       >
         <StyledContainer {...restProps}>{children}</StyledContainer>
       </ModalDiv>
     </BackDrop>
-    </>
   );
 }

front/src/modules/ui/table/editable-cell/types/EditableCellURL.tsx

@@ -36,10 +36,7 @@ export function EditableCellURL({
         loading ? (
           <CellSkeleton />
         ) : (
-          <RawLink
+          <RawLink onClick={(e) => e.stopPropagation()} href={url ?? ''}>
-            onClick={(e) => e.stopPropagation()}
-            href={url ? 'https://' + url : ''}
-          >
             {url}
           </RawLink>
         )

front/src/pages/people/PersonShow.tsx

@@ -33,6 +33,7 @@ export function PersonShow() {
           <ShowPageSummaryCard
             id={person?.id}
             title={person?.displayName ?? 'No name'}
+            logoOrAvatar={person?.avatarUrl ?? undefined}
             date={person?.createdAt ?? ''}
             renderTitleEditComponent={() =>
               person ? <PeopleFullNameEditableField people={person} /> : <></>

front/src/pages/settings/SettingsProfile.tsx

@@ -1,6 +1,6 @@
 import styled from '@emotion/styled';
 
-import { DeleteWorkspace } from '@/settings/profile/components/DeleteWorkspace';
+import { DeleteAccount } from '@/settings/profile/components/DeleteAccount';
 import { EmailField } from '@/settings/profile/components/EmailField';
 import { NameFields } from '@/settings/profile/components/NameFields';
 import { ProfilePictureUploader } from '@/settings/profile/components/ProfilePictureUploader';
@@ -52,7 +52,7 @@ export function SettingsProfile() {
           </StyledSectionContainer>
 
           <StyledSectionContainer>
-            <DeleteWorkspace />
+            <DeleteAccount />
           </StyledSectionContainer>
         </StyledContainer>
       </>

front/src/pages/settings/SettingsWorkspace.tsx

@@ -1,5 +1,6 @@
 import styled from '@emotion/styled';
 
+import { DeleteWorkspace } from '@/settings/profile/components/DeleteWorkspace';
 import { NameField } from '@/settings/workspace/components/NameField';
 import { WorkspaceLogoUploader } from '@/settings/workspace/components/WorkspaceLogoUploader';
 import { IconSettings } from '@/ui/icon';
@@ -40,6 +41,10 @@ export function SettingsWorksapce() {
             />
             <NameField />
           </StyledSectionContainer>
+
+          <StyledSectionContainer>
+            <DeleteWorkspace />
+          </StyledSectionContainer>
         </StyledContainer>
       </div>
     </SubMenuTopBarContainer>

front/src/testing/mock-data/people.ts

@@ -17,6 +17,7 @@ type MockedPerson = RequiredAndNotNull<
     | '__typename'
     | 'phone'
     | 'city'
+    | 'avatarUrl'
     | '_activityCount'
     | 'createdAt'
   > & {
@@ -33,6 +34,8 @@ export const mockedPeopleData: MockedPerson[] = [
     displayName: 'Alexandre Prot',
     email: 'alexandre@qonto.com',
     linkedinUrl: 'https://www.linkedin.com/in/alexandreprot/',
+    avatarUrl:
+      'data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAASABIAAD/4QCMRXhpZgAATU0AKgAAAAgABQESAAMAAAABAAEAAAEaAAUAAAABAAAASgEbAAUAAAABAAAAUgEoAAMAAAABAAIAAIdpAAQAAAABAAAAWgAAAAAAAABIAAAAAQAAAEgAAAABAAOgAQADAAAAAQABAACgAgAEAAAAAQAAADygAwAEAAAAAQAAADwAAAAA/+0AOFBob3Rvc2hvcCAzLjAAOEJJTQQEAAAAAAAAOEJJTQQlAAAAAAAQ1B2M2Y8AsgTpgAmY7PhCfv/AABEIADwAPAMBIgACEQEDEQH/xAAfAAABBQEBAQEBAQAAAAAAAAAAAQIDBAUGBwgJCgv/xAC1EAACAQMDAgQDBQUEBAAAAX0BAgMABBEFEiExQQYTUWEHInEUMoGRoQgjQrHBFVLR8CQzYnKCCQoWFxgZGiUmJygpKjQ1Njc4OTpDREVGR0hJSlNUVVZXWFlaY2RlZmdoaWpzdHV2d3h5eoOEhYaHiImKkpOUlZaXmJmaoqOkpaanqKmqsrO0tba3uLm6wsPExcbHyMnK0tPU1dbX2Nna4eLj5OXm5+jp6vHy8/T19vf4+fr/xAAfAQADAQEBAQEBAQEBAAAAAAAAAQIDBAUGBwgJCgv/xAC1EQACAQIEBAMEBwUEBAABAncAAQIDEQQFITEGEkFRB2FxEyIygQgUQpGhscEJIzNS8BVictEKFiQ04SXxFxgZGiYnKCkqNTY3ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqCg4SFhoeIiYqSk5SVlpeYmZqio6Slpqeoqaqys7S1tre4ubrCw8TFxsfIycrS09TV1tfY2dri4+Tl5ufo6ery8/T19vf4+fr/2wBDAAoHCBUSFRgSEhUYGBgYGBgYGBgYGBgYGBgYGBgZGRgaGBgcIS4lHB4rIRgYJjgmKy8xNTU1GiQ7QDszPy40NTH/2wBDAQwMDBAPEBwSEh40ISQkMTQ0NjQxNDQ2NDQ0NDQ0MTQ0NDQ0NDQ0NDQ0NDE0NDQ0NDQ0PzQ0NDQ0NDQ0NDQ0NDT/3QAEAAT/2gAMAwEAAhEDEQA/AOtApcUtLWpkJiub1TxlawHaC0pGM+WAQM9ixIGfal8bas8ESwwjMs5KLjqq4+ZgO55A/wCBe1cDceGLxVyYCysOqfNjnoQOQfzqJTs7GkYNq53uleLba5KoCyO2fldcDI7b/uk/jW8VrxSSJowQ6OPqhwPxxXofw81Mz27IxyYmCjPUKRlee/f8qIyuKUbHT4oxT6SrIP/Q6+ilorUyOJ147tTjzjbFArEk4A3M/wD9au20u4Rl+R1bHXawJFZ89vGbgM4GWj2898HI/rTbXSIo5lkj5fpuyWO3upPccVx1H7zO6nH3EizroBjbIB/KuL+H0eJ7soMIBGPx3Ocfkf1rUbRPPzM0jYYtv3MTjkjCDOF7flS+C7Hyo5XznzZSRxjhAEH16E1VH4ia/wAJ0dFFLXUcZ//R7HFIRWXq/iS1teJZRu6hEG9+/JC9Bx1OK43VPiM7ZW2iCejyHc34Ivyj8zWpmdtqkiq8QfoxYe3bGfryKbNb8HEzIwyUYKCQCOnbP0IPasPwtKb+3JlcvICUck8hgSVYAcLkFSMelSya3LbL5U8Bl28K67efTcD0P0rjm7zZ3UtIocsZEQhDEu5IXrnaTks+Scnqa3LWBY1EaDCqMDkn9TXCSapNBIb+ZR0ZRGSQArY+Vf8Aa4GD9a6XRvE9tdYCuFc/8s3IVvw7MPcVtRStcwrybZuilpopa2Oc/9Ly0J/kUBaVTS1sZl7SNWmtH8yB9pPBBGVYZzhl7j9R611T/ERmHzWqFvXzDt+uNuevb9a4eiolCMtyozlHYu6zrE12QZSAF+6ijCjPfHc+5/Ss3bUlFUkkrITbbuze8P8Aiqe0IDMZIsjcjEsQOh8ticqcduhx26163FKGUMpyGAII6EEZBrwQmvX/AAFIXso93O0ug/3Vdgo/KmI//9k=',
     jobTitle: 'CEO',
     company: {
       id: '5c21e19e-e049-4393-8c09-3e3f8fb09ecb',
@@ -53,6 +56,7 @@ export const mockedPeopleData: MockedPerson[] = [
     lastName: 'Doe',
     displayName: 'John Doe',
     linkedinUrl: 'https://www.linkedin.com/in/johndoe/',
+    avatarUrl: '',
     jobTitle: 'CTO',
     email: 'john@linkedin.com',
     company: {
@@ -74,6 +78,7 @@ export const mockedPeopleData: MockedPerson[] = [
     lastName: 'Doe',
     displayName: 'Jane Doe',
     linkedinUrl: 'https://www.linkedin.com/in/janedoe/',
+    avatarUrl: '',
     jobTitle: 'Investor',
     email: 'jane@sequoiacap.com',
     company: {
@@ -96,6 +101,7 @@ export const mockedPeopleData: MockedPerson[] = [
     displayName: 'Janice Dane',
     email: 'janice@facebook.com',
     linkedinUrl: 'https://www.linkedin.com/in/janicedane/',
+    avatarUrl: '',
     jobTitle: 'CEO',
     company: {
       id: '7dfbc3f7-6e5e-4128-957e-8d86808cdf6i',

server/src/database/migrations/20230728193900_add_avatar_url_to_people_table/migration.sql

@@ -0,0 +1,2 @@
+-- AlterTable
+ALTER TABLE "people" ADD COLUMN     "avatarUrl" TEXT;

server/src/database/schema.prisma

@@ -266,6 +266,9 @@ model Person {
   /// @Validator.IsString()
   /// @Validator.IsOptional()
   city        String?
+  /// @Validator.IsString()
+  /// @Validator.IsOptional()
+  avatarUrl   String?
 
   company            Company?           @relation(fields: [companyId], references: [id])
   companyId          String?