5623 add an inviteteam onboarding step (#5769)

## Changes
- add a new invite Team onboarding step
- update currentUser.state to currentUser.onboardingStep

## Edge cases
We will never display invite team onboarding step 
- if number of workspaceMember > 1
- if a workspaceMember as been deleted

## Important changes
Update typeorm package version to 0.3.20 because we needed a fix on
`indexPredicates` pushed in 0.3.20 version
(https://github.com/typeorm/typeorm/issues/10191)

## Result
<img width="844" alt="image"
src="https://github.com/twentyhq/twenty/assets/29927851/0dab54cf-7c66-4c64-b0c9-b0973889a148">



https://github.com/twentyhq/twenty/assets/29927851/13268d0a-cfa7-42a4-84c6-9e1fbbe48912

packages/twenty-front/src/App.tsx

@@ -48,6 +48,7 @@ import { RecordShowPage } from '~/pages/object-record/RecordShowPage';
 import { ChooseYourPlan } from '~/pages/onboarding/ChooseYourPlan';
 import { CreateProfile } from '~/pages/onboarding/CreateProfile';
 import { CreateWorkspace } from '~/pages/onboarding/CreateWorkspace';
+import { InviteTeam } from '~/pages/onboarding/InviteTeam';
 import { PaymentSuccess } from '~/pages/onboarding/PaymentSuccess';
 import { SyncEmails } from '~/pages/onboarding/SyncEmails';
 import { SettingsAccounts } from '~/pages/settings/accounts/SettingsAccounts';
@@ -143,6 +144,7 @@ const createRouter = (isBillingEnabled?: boolean) =>
           <Route path={AppPath.CreateWorkspace} element={<CreateWorkspace />} />
           <Route path={AppPath.CreateProfile} element={<CreateProfile />} />
           <Route path={AppPath.SyncEmails} element={<SyncEmails />} />
+          <Route path={AppPath.InviteTeam} element={<InviteTeam />} />
           <Route path={AppPath.PlanRequired} element={<ChooseYourPlan />} />
           <Route
             path={AppPath.PlanRequiredSuccess}

packages/twenty-front/src/effect-components/PageChangeEffect.tsx

@@ -101,6 +101,14 @@ export const PageChangeEffect = () => {
         setHotkeyScope(PageHotkeyScope.CreateWokspace);
         break;
       }
+      case isMatchingLocation(AppPath.SyncEmails): {
+        setHotkeyScope(PageHotkeyScope.SyncEmail);
+        break;
+      }
+      case isMatchingLocation(AppPath.InviteTeam): {
+        setHotkeyScope(PageHotkeyScope.InviteTeam);
+        break;
+      }
       case isMatchingLocation(AppPath.PlanRequired): {
         setHotkeyScope(PageHotkeyScope.PlanRequired);
         break;

packages/twenty-front/src/generated-metadata/graphql.ts

@@ -407,7 +407,7 @@ export type Mutation = {
   renewToken: AuthTokens;
   sendInviteLink: SendInviteLink;
   signUp: LoginToken;
-  skipSyncEmailOnboardingStep: SkipSyncEmailOnboardingStep;
+  skipSyncEmailOnboardingStep: OnboardingStepSuccess;
   syncRemoteTable: RemoteTable;
   syncRemoteTableSchemaChanges: RemoteTable;
   track: Analytics;
@@ -636,6 +636,18 @@ export type ObjectFieldsConnection = {
   pageInfo: PageInfo;
 };
 
+/** Onboarding step */
+export enum OnboardingStep {
+  InviteTeam = 'INVITE_TEAM',
+  SyncEmail = 'SYNC_EMAIL'
+}
+
+export type OnboardingStepSuccess = {
+  __typename?: 'OnboardingStepSuccess';
+  /** Boolean that confirms query was dispatched */
+  success: Scalars['Boolean']['output'];
+};
+
 export type PageInfo = {
   __typename?: 'PageInfo';
   /** The cursor of the last returned record. */
@@ -888,12 +900,6 @@ export type SessionEntity = {
   url?: Maybe<Scalars['String']['output']>;
 };
 
-export type SkipSyncEmailOnboardingStep = {
-  __typename?: 'SkipSyncEmailOnboardingStep';
-  /** Boolean that confirms query was dispatched */
-  success: Scalars['Boolean']['output'];
-};
-
 /** Sort Directions */
 export enum SortDirection {
   Asc = 'ASC',
@@ -1078,12 +1084,12 @@ export type User = {
   firstName: Scalars['String']['output'];
   id: Scalars['UUID']['output'];
   lastName: Scalars['String']['output'];
+  onboardingStep?: Maybe<OnboardingStep>;
   passwordHash?: Maybe<Scalars['String']['output']>;
   /** @deprecated field migrated into the AppTokens Table ref: https://github.com/twentyhq/twenty/issues/5021 */
   passwordResetToken?: Maybe<Scalars['String']['output']>;
   /** @deprecated field migrated into the AppTokens Table ref: https://github.com/twentyhq/twenty/issues/5021 */
   passwordResetTokenExpiresAt?: Maybe<Scalars['DateTime']['output']>;
-  state: UserState;
   supportUserHash?: Maybe<Scalars['String']['output']>;
   updatedAt: Scalars['DateTime']['output'];
   workspaceMember?: Maybe<WorkspaceMember>;
@@ -1118,11 +1124,6 @@ export type UserMappingOptionsUser = {
   user?: Maybe<Scalars['String']['output']>;
 };
 
-export type UserState = {
-  __typename?: 'UserState';
-  skipSyncEmailOnboardingStep?: Maybe<Scalars['Boolean']['output']>;
-};
-
 export type UserWorkspace = {
   __typename?: 'UserWorkspace';
   createdAt: Scalars['DateTime']['output'];

packages/twenty-front/src/generated/graphql.tsx

@@ -300,7 +300,7 @@ export type Mutation = {
   renewToken: AuthTokens;
   sendInviteLink: SendInviteLink;
   signUp: LoginToken;
-  skipSyncEmailOnboardingStep: SkipSyncEmailOnboardingStep;
+  skipSyncEmailOnboardingStep: OnboardingStepSuccess;
   track: Analytics;
   updateBillingSubscription: UpdateBillingEntity;
   updateOneObject: Object;
@@ -459,6 +459,18 @@ export type ObjectFieldsConnection = {
   pageInfo: PageInfo;
 };
 
+/** Onboarding step */
+export enum OnboardingStep {
+  InviteTeam = 'INVITE_TEAM',
+  SyncEmail = 'SYNC_EMAIL'
+}
+
+export type OnboardingStepSuccess = {
+  __typename?: 'OnboardingStepSuccess';
+  /** Boolean that confirms query was dispatched */
+  success: Scalars['Boolean'];
+};
+
 export type PageInfo = {
   __typename?: 'PageInfo';
   /** The cursor of the last returned record. */
@@ -643,12 +655,6 @@ export type SessionEntity = {
   url?: Maybe<Scalars['String']>;
 };
 
-export type SkipSyncEmailOnboardingStep = {
-  __typename?: 'SkipSyncEmailOnboardingStep';
-  /** Boolean that confirms query was dispatched */
-  success: Scalars['Boolean'];
-};
-
 /** Sort Directions */
 export enum SortDirection {
   Asc = 'ASC',
@@ -804,12 +810,12 @@ export type User = {
   firstName: Scalars['String'];
   id: Scalars['UUID'];
   lastName: Scalars['String'];
+  onboardingStep?: Maybe<OnboardingStep>;
   passwordHash?: Maybe<Scalars['String']>;
   /** @deprecated field migrated into the AppTokens Table ref: https://github.com/twentyhq/twenty/issues/5021 */
   passwordResetToken?: Maybe<Scalars['String']>;
   /** @deprecated field migrated into the AppTokens Table ref: https://github.com/twentyhq/twenty/issues/5021 */
   passwordResetTokenExpiresAt?: Maybe<Scalars['DateTime']>;
-  state: UserState;
   supportUserHash?: Maybe<Scalars['String']>;
   updatedAt: Scalars['DateTime'];
   workspaceMember?: Maybe<WorkspaceMember>;
@@ -834,11 +840,6 @@ export type UserMappingOptionsUser = {
   user?: Maybe<Scalars['String']>;
 };
 
-export type UserState = {
-  __typename?: 'UserState';
-  skipSyncEmailOnboardingStep?: Maybe<Scalars['Boolean']>;
-};
-
 export type UserWorkspace = {
   __typename?: 'UserWorkspace';
   createdAt: Scalars['DateTime'];
@@ -1140,7 +1141,7 @@ export type ImpersonateMutationVariables = Exact<{
 }>;
 
 
-export type ImpersonateMutation = { __typename?: 'Mutation', impersonate: { __typename?: 'Verify', user: { __typename?: 'User', id: any, firstName: string, lastName: string, email: string, canImpersonate: boolean, supportUserHash?: string | null, state: { __typename?: 'UserState', skipSyncEmailOnboardingStep?: boolean | null }, workspaceMember?: { __typename?: 'WorkspaceMember', id: any, colorScheme: string, avatarUrl?: string | null, locale: string, name: { __typename?: 'FullName', firstName: string, lastName: string } } | null, defaultWorkspace: { __typename?: 'Workspace', id: any, displayName?: string | null, logo?: string | null, domainName?: string | null, inviteHash?: string | null, allowImpersonation: boolean, subscriptionStatus: string, activationStatus: string, currentCacheVersion?: string | null, featureFlags?: Array<{ __typename?: 'FeatureFlag', id: any, key: string, value: boolean, workspaceId: string }> | null, currentBillingSubscription?: { __typename?: 'BillingSubscription', id: any, status: string, interval?: string | null } | null }, workspaces: Array<{ __typename?: 'UserWorkspace', workspace?: { __typename?: 'Workspace', id: any, logo?: string | null, displayName?: string | null, domainName?: string | null } | null }> }, tokens: { __typename?: 'AuthTokenPair', accessToken: { __typename?: 'AuthToken', token: string, expiresAt: string }, refreshToken: { __typename?: 'AuthToken', token: string, expiresAt: string } } } };
+export type ImpersonateMutation = { __typename?: 'Mutation', impersonate: { __typename?: 'Verify', user: { __typename?: 'User', id: any, firstName: string, lastName: string, email: string, canImpersonate: boolean, supportUserHash?: string | null, onboardingStep?: OnboardingStep | null, workspaceMember?: { __typename?: 'WorkspaceMember', id: any, colorScheme: string, avatarUrl?: string | null, locale: string, name: { __typename?: 'FullName', firstName: string, lastName: string } } | null, defaultWorkspace: { __typename?: 'Workspace', id: any, displayName?: string | null, logo?: string | null, domainName?: string | null, inviteHash?: string | null, allowImpersonation: boolean, subscriptionStatus: string, activationStatus: string, currentCacheVersion?: string | null, featureFlags?: Array<{ __typename?: 'FeatureFlag', id: any, key: string, value: boolean, workspaceId: string }> | null, currentBillingSubscription?: { __typename?: 'BillingSubscription', id: any, status: string, interval?: string | null } | null }, workspaces: Array<{ __typename?: 'UserWorkspace', workspace?: { __typename?: 'Workspace', id: any, logo?: string | null, displayName?: string | null, domainName?: string | null } | null }> }, tokens: { __typename?: 'AuthTokenPair', accessToken: { __typename?: 'AuthToken', token: string, expiresAt: string }, refreshToken: { __typename?: 'AuthToken', token: string, expiresAt: string } } } };
 
 export type RenewTokenMutationVariables = Exact<{
   appToken: Scalars['String'];
@@ -1172,7 +1173,7 @@ export type VerifyMutationVariables = Exact<{
 }>;
 
 
-export type VerifyMutation = { __typename?: 'Mutation', verify: { __typename?: 'Verify', user: { __typename?: 'User', id: any, firstName: string, lastName: string, email: string, canImpersonate: boolean, supportUserHash?: string | null, state: { __typename?: 'UserState', skipSyncEmailOnboardingStep?: boolean | null }, workspaceMember?: { __typename?: 'WorkspaceMember', id: any, colorScheme: string, avatarUrl?: string | null, locale: string, name: { __typename?: 'FullName', firstName: string, lastName: string } } | null, defaultWorkspace: { __typename?: 'Workspace', id: any, displayName?: string | null, logo?: string | null, domainName?: string | null, inviteHash?: string | null, allowImpersonation: boolean, subscriptionStatus: string, activationStatus: string, currentCacheVersion?: string | null, featureFlags?: Array<{ __typename?: 'FeatureFlag', id: any, key: string, value: boolean, workspaceId: string }> | null, currentBillingSubscription?: { __typename?: 'BillingSubscription', id: any, status: string, interval?: string | null } | null }, workspaces: Array<{ __typename?: 'UserWorkspace', workspace?: { __typename?: 'Workspace', id: any, logo?: string | null, displayName?: string | null, domainName?: string | null } | null }> }, tokens: { __typename?: 'AuthTokenPair', accessToken: { __typename?: 'AuthToken', token: string, expiresAt: string }, refreshToken: { __typename?: 'AuthToken', token: string, expiresAt: string } } } };
+export type VerifyMutation = { __typename?: 'Mutation', verify: { __typename?: 'Verify', user: { __typename?: 'User', id: any, firstName: string, lastName: string, email: string, canImpersonate: boolean, supportUserHash?: string | null, onboardingStep?: OnboardingStep | null, workspaceMember?: { __typename?: 'WorkspaceMember', id: any, colorScheme: string, avatarUrl?: string | null, locale: string, name: { __typename?: 'FullName', firstName: string, lastName: string } } | null, defaultWorkspace: { __typename?: 'Workspace', id: any, displayName?: string | null, logo?: string | null, domainName?: string | null, inviteHash?: string | null, allowImpersonation: boolean, subscriptionStatus: string, activationStatus: string, currentCacheVersion?: string | null, featureFlags?: Array<{ __typename?: 'FeatureFlag', id: any, key: string, value: boolean, workspaceId: string }> | null, currentBillingSubscription?: { __typename?: 'BillingSubscription', id: any, status: string, interval?: string | null } | null }, workspaces: Array<{ __typename?: 'UserWorkspace', workspace?: { __typename?: 'Workspace', id: any, logo?: string | null, displayName?: string | null, domainName?: string | null } | null }> }, tokens: { __typename?: 'AuthTokenPair', accessToken: { __typename?: 'AuthToken', token: string, expiresAt: string }, refreshToken: { __typename?: 'AuthToken', token: string, expiresAt: string } } } };
 
 export type CheckUserExistsQueryVariables = Exact<{
   email: Scalars['String'];
@@ -1224,9 +1225,9 @@ export type GetClientConfigQuery = { __typename?: 'Query', clientConfig: { __typ
 export type SkipSyncEmailOnboardingStepMutationVariables = Exact<{ [key: string]: never; }>;
 
 
-export type SkipSyncEmailOnboardingStepMutation = { __typename?: 'Mutation', skipSyncEmailOnboardingStep: { __typename?: 'SkipSyncEmailOnboardingStep', success: boolean } };
+export type SkipSyncEmailOnboardingStepMutation = { __typename?: 'Mutation', skipSyncEmailOnboardingStep: { __typename?: 'OnboardingStepSuccess', success: boolean } };
 
-export type UserQueryFragmentFragment = { __typename?: 'User', id: any, firstName: string, lastName: string, email: string, canImpersonate: boolean, supportUserHash?: string | null, state: { __typename?: 'UserState', skipSyncEmailOnboardingStep?: boolean | null }, workspaceMember?: { __typename?: 'WorkspaceMember', id: any, colorScheme: string, avatarUrl?: string | null, locale: string, name: { __typename?: 'FullName', firstName: string, lastName: string } } | null, defaultWorkspace: { __typename?: 'Workspace', id: any, displayName?: string | null, logo?: string | null, domainName?: string | null, inviteHash?: string | null, allowImpersonation: boolean, subscriptionStatus: string, activationStatus: string, currentCacheVersion?: string | null, featureFlags?: Array<{ __typename?: 'FeatureFlag', id: any, key: string, value: boolean, workspaceId: string }> | null, currentBillingSubscription?: { __typename?: 'BillingSubscription', id: any, status: string, interval?: string | null } | null }, workspaces: Array<{ __typename?: 'UserWorkspace', workspace?: { __typename?: 'Workspace', id: any, logo?: string | null, displayName?: string | null, domainName?: string | null } | null }> };
+export type UserQueryFragmentFragment = { __typename?: 'User', id: any, firstName: string, lastName: string, email: string, canImpersonate: boolean, supportUserHash?: string | null, onboardingStep?: OnboardingStep | null, workspaceMember?: { __typename?: 'WorkspaceMember', id: any, colorScheme: string, avatarUrl?: string | null, locale: string, name: { __typename?: 'FullName', firstName: string, lastName: string } } | null, defaultWorkspace: { __typename?: 'Workspace', id: any, displayName?: string | null, logo?: string | null, domainName?: string | null, inviteHash?: string | null, allowImpersonation: boolean, subscriptionStatus: string, activationStatus: string, currentCacheVersion?: string | null, featureFlags?: Array<{ __typename?: 'FeatureFlag', id: any, key: string, value: boolean, workspaceId: string }> | null, currentBillingSubscription?: { __typename?: 'BillingSubscription', id: any, status: string, interval?: string | null } | null }, workspaces: Array<{ __typename?: 'UserWorkspace', workspace?: { __typename?: 'Workspace', id: any, logo?: string | null, displayName?: string | null, domainName?: string | null } | null }> };
 
 export type DeleteUserAccountMutationVariables = Exact<{ [key: string]: never; }>;
 
@@ -1243,7 +1244,7 @@ export type UploadProfilePictureMutation = { __typename?: 'Mutation', uploadProf
 export type GetCurrentUserQueryVariables = Exact<{ [key: string]: never; }>;
 
 
-export type GetCurrentUserQuery = { __typename?: 'Query', currentUser: { __typename?: 'User', id: any, firstName: string, lastName: string, email: string, canImpersonate: boolean, supportUserHash?: string | null, state: { __typename?: 'UserState', skipSyncEmailOnboardingStep?: boolean | null }, workspaceMember?: { __typename?: 'WorkspaceMember', id: any, colorScheme: string, avatarUrl?: string | null, locale: string, name: { __typename?: 'FullName', firstName: string, lastName: string } } | null, defaultWorkspace: { __typename?: 'Workspace', id: any, displayName?: string | null, logo?: string | null, domainName?: string | null, inviteHash?: string | null, allowImpersonation: boolean, subscriptionStatus: string, activationStatus: string, currentCacheVersion?: string | null, featureFlags?: Array<{ __typename?: 'FeatureFlag', id: any, key: string, value: boolean, workspaceId: string }> | null, currentBillingSubscription?: { __typename?: 'BillingSubscription', id: any, status: string, interval?: string | null } | null }, workspaces: Array<{ __typename?: 'UserWorkspace', workspace?: { __typename?: 'Workspace', id: any, logo?: string | null, displayName?: string | null, domainName?: string | null } | null }> } };
+export type GetCurrentUserQuery = { __typename?: 'Query', currentUser: { __typename?: 'User', id: any, firstName: string, lastName: string, email: string, canImpersonate: boolean, supportUserHash?: string | null, onboardingStep?: OnboardingStep | null, workspaceMember?: { __typename?: 'WorkspaceMember', id: any, colorScheme: string, avatarUrl?: string | null, locale: string, name: { __typename?: 'FullName', firstName: string, lastName: string } } | null, defaultWorkspace: { __typename?: 'Workspace', id: any, displayName?: string | null, logo?: string | null, domainName?: string | null, inviteHash?: string | null, allowImpersonation: boolean, subscriptionStatus: string, activationStatus: string, currentCacheVersion?: string | null, featureFlags?: Array<{ __typename?: 'FeatureFlag', id: any, key: string, value: boolean, workspaceId: string }> | null, currentBillingSubscription?: { __typename?: 'BillingSubscription', id: any, status: string, interval?: string | null } | null }, workspaces: Array<{ __typename?: 'UserWorkspace', workspace?: { __typename?: 'Workspace', id: any, logo?: string | null, displayName?: string | null, domainName?: string | null } | null }> } };
 
 export type AddUserToWorkspaceMutationVariables = Exact<{
   inviteHash: Scalars['String'];
@@ -1394,9 +1395,7 @@ export const UserQueryFragmentFragmentDoc = gql`
   email
   canImpersonate
   supportUserHash
-  state {
-    skipSyncEmailOnboardingStep
-  }
+  onboardingStep
   workspaceMember {
     id
     name {

packages/twenty-front/src/hooks/__tests__/usePageChangeEffectNavigateLocation.test.ts

@@ -36,6 +36,7 @@ const testCases = [
   { loc: AppPath.Verify, status: OnboardingStatus.OngoingWorkspaceActivation, res: AppPath.CreateWorkspace },
   { loc: AppPath.Verify, status: OnboardingStatus.OngoingProfileCreation, res: AppPath.CreateProfile },
   { loc: AppPath.Verify, status: OnboardingStatus.OngoingSyncEmail, res: AppPath.SyncEmails },
+  { loc: AppPath.Verify, status: OnboardingStatus.OngoingInviteTeam, res: AppPath.InviteTeam },
   { loc: AppPath.Verify, status: OnboardingStatus.Completed, res: defaultHomePagePath },
   { loc: AppPath.Verify, status: OnboardingStatus.CompletedWithoutSubscription, res: defaultHomePagePath },
 
@@ -47,6 +48,7 @@ const testCases = [
   { loc: AppPath.SignInUp, status: OnboardingStatus.OngoingWorkspaceActivation, res: AppPath.CreateWorkspace },
   { loc: AppPath.SignInUp, status: OnboardingStatus.OngoingProfileCreation, res: AppPath.CreateProfile },
   { loc: AppPath.SignInUp, status: OnboardingStatus.OngoingSyncEmail, res: AppPath.SyncEmails },
+  { loc: AppPath.SignInUp, status: OnboardingStatus.OngoingInviteTeam, res: AppPath.InviteTeam },
   { loc: AppPath.SignInUp, status: OnboardingStatus.Completed, res: defaultHomePagePath },
   { loc: AppPath.SignInUp, status: OnboardingStatus.CompletedWithoutSubscription, res: defaultHomePagePath },
 
@@ -58,6 +60,7 @@ const testCases = [
   { loc: AppPath.Invite, status: OnboardingStatus.OngoingWorkspaceActivation, res: AppPath.CreateWorkspace },
   { loc: AppPath.Invite, status: OnboardingStatus.OngoingProfileCreation, res: AppPath.CreateProfile },
   { loc: AppPath.Invite, status: OnboardingStatus.OngoingSyncEmail, res: AppPath.SyncEmails },
+  { loc: AppPath.Invite, status: OnboardingStatus.OngoingInviteTeam, res: AppPath.InviteTeam },
   { loc: AppPath.Invite, status: OnboardingStatus.Completed, res: undefined },
   { loc: AppPath.Invite, status: OnboardingStatus.CompletedWithoutSubscription, res: undefined },
 
@@ -69,6 +72,7 @@ const testCases = [
   { loc: AppPath.ResetPassword, status: OnboardingStatus.OngoingWorkspaceActivation, res: AppPath.CreateWorkspace },
   { loc: AppPath.ResetPassword, status: OnboardingStatus.OngoingProfileCreation, res: AppPath.CreateProfile },
   { loc: AppPath.ResetPassword, status: OnboardingStatus.OngoingSyncEmail, res: AppPath.SyncEmails },
+  { loc: AppPath.ResetPassword, status: OnboardingStatus.OngoingInviteTeam, res: AppPath.InviteTeam },
   { loc: AppPath.ResetPassword, status: OnboardingStatus.Completed, res: undefined },
   { loc: AppPath.ResetPassword, status: OnboardingStatus.CompletedWithoutSubscription, res: undefined },
 
@@ -80,6 +84,7 @@ const testCases = [
   { loc: AppPath.CreateWorkspace, status: OnboardingStatus.OngoingWorkspaceActivation, res: undefined },
   { loc: AppPath.CreateWorkspace, status: OnboardingStatus.OngoingProfileCreation, res: AppPath.CreateProfile },
   { loc: AppPath.CreateWorkspace, status: OnboardingStatus.OngoingSyncEmail, res: AppPath.SyncEmails },
+  { loc: AppPath.CreateWorkspace, status: OnboardingStatus.OngoingInviteTeam, res: AppPath.InviteTeam },
   { loc: AppPath.CreateWorkspace, status: OnboardingStatus.Completed, res: defaultHomePagePath },
   { loc: AppPath.CreateWorkspace, status: OnboardingStatus.CompletedWithoutSubscription, res: defaultHomePagePath },
 
@@ -91,6 +96,7 @@ const testCases = [
   { loc: AppPath.CreateProfile, status: OnboardingStatus.OngoingWorkspaceActivation, res: AppPath.CreateWorkspace },
   { loc: AppPath.CreateProfile, status: OnboardingStatus.OngoingProfileCreation, res: undefined },
   { loc: AppPath.CreateProfile, status: OnboardingStatus.OngoingSyncEmail, res: AppPath.SyncEmails },
+  { loc: AppPath.CreateProfile, status: OnboardingStatus.OngoingInviteTeam, res: AppPath.InviteTeam },
   { loc: AppPath.CreateProfile, status: OnboardingStatus.Completed, res: defaultHomePagePath },
   { loc: AppPath.CreateProfile, status: OnboardingStatus.CompletedWithoutSubscription, res: defaultHomePagePath },
 
@@ -102,9 +108,22 @@ const testCases = [
   { loc: AppPath.SyncEmails, status: OnboardingStatus.OngoingWorkspaceActivation, res: AppPath.CreateWorkspace },
   { loc: AppPath.SyncEmails, status: OnboardingStatus.OngoingProfileCreation, res: AppPath.CreateProfile },
   { loc: AppPath.SyncEmails, status: OnboardingStatus.OngoingSyncEmail, res: undefined },
+  { loc: AppPath.SyncEmails, status: OnboardingStatus.OngoingInviteTeam, res: AppPath.InviteTeam },
   { loc: AppPath.SyncEmails, status: OnboardingStatus.Completed, res: defaultHomePagePath },
   { loc: AppPath.SyncEmails, status: OnboardingStatus.CompletedWithoutSubscription, res: defaultHomePagePath },
 
+  { loc: AppPath.InviteTeam, status: OnboardingStatus.Incomplete, res: AppPath.PlanRequired },
+  { loc: AppPath.InviteTeam, status: OnboardingStatus.Canceled, res: '/settings/billing' },
+  { loc: AppPath.InviteTeam, status: OnboardingStatus.Unpaid, res: '/settings/billing' },
+  { loc: AppPath.InviteTeam, status: OnboardingStatus.PastDue, res: undefined },
+  { loc: AppPath.InviteTeam, status: OnboardingStatus.OngoingUserCreation, res: AppPath.SignInUp },
+  { loc: AppPath.InviteTeam, status: OnboardingStatus.OngoingWorkspaceActivation, res: AppPath.CreateWorkspace },
+  { loc: AppPath.InviteTeam, status: OnboardingStatus.OngoingProfileCreation, res: AppPath.CreateProfile },
+  { loc: AppPath.InviteTeam, status: OnboardingStatus.OngoingSyncEmail, res: AppPath.SyncEmails },
+  { loc: AppPath.InviteTeam, status: OnboardingStatus.OngoingInviteTeam, res: undefined },
+  { loc: AppPath.InviteTeam, status: OnboardingStatus.Completed, res: defaultHomePagePath },
+  { loc: AppPath.InviteTeam, status: OnboardingStatus.CompletedWithoutSubscription, res: defaultHomePagePath },
+
   { loc: AppPath.PlanRequired, status: OnboardingStatus.Incomplete, res: undefined },
   { loc: AppPath.PlanRequired, status: OnboardingStatus.Canceled, res: undefined },
   { loc: AppPath.PlanRequired, status: OnboardingStatus.Unpaid, res: undefined },
@@ -113,6 +132,7 @@ const testCases = [
   { loc: AppPath.PlanRequired, status: OnboardingStatus.OngoingWorkspaceActivation, res: AppPath.CreateWorkspace },
   { loc: AppPath.PlanRequired, status: OnboardingStatus.OngoingProfileCreation, res: AppPath.CreateProfile },
   { loc: AppPath.PlanRequired, status: OnboardingStatus.OngoingSyncEmail, res: AppPath.SyncEmails },
+  { loc: AppPath.PlanRequired, status: OnboardingStatus.OngoingInviteTeam, res: AppPath.InviteTeam },
   { loc: AppPath.PlanRequired, status: OnboardingStatus.Completed, res: defaultHomePagePath },
   { loc: AppPath.PlanRequired, status: OnboardingStatus.CompletedWithoutSubscription, res: undefined },
 
@@ -124,6 +144,7 @@ const testCases = [
   { loc: AppPath.PlanRequiredSuccess, status: OnboardingStatus.OngoingWorkspaceActivation, res: undefined },
   { loc: AppPath.PlanRequiredSuccess, status: OnboardingStatus.OngoingProfileCreation, res: AppPath.CreateProfile },
   { loc: AppPath.PlanRequiredSuccess, status: OnboardingStatus.OngoingSyncEmail, res: AppPath.SyncEmails },
+  { loc: AppPath.PlanRequiredSuccess, status: OnboardingStatus.OngoingInviteTeam, res: AppPath.InviteTeam },
   { loc: AppPath.PlanRequiredSuccess, status: OnboardingStatus.Completed, res: defaultHomePagePath },
   { loc: AppPath.PlanRequiredSuccess, status: OnboardingStatus.CompletedWithoutSubscription, res: defaultHomePagePath },
 
@@ -135,6 +156,7 @@ const testCases = [
   { loc: AppPath.Index, status: OnboardingStatus.OngoingWorkspaceActivation, res: AppPath.CreateWorkspace },
   { loc: AppPath.Index, status: OnboardingStatus.OngoingProfileCreation, res: AppPath.CreateProfile },
   { loc: AppPath.Index, status: OnboardingStatus.OngoingSyncEmail, res: AppPath.SyncEmails },
+  { loc: AppPath.Index, status: OnboardingStatus.OngoingInviteTeam, res: AppPath.InviteTeam },
   { loc: AppPath.Index, status: OnboardingStatus.Completed, res: defaultHomePagePath },
   { loc: AppPath.Index, status: OnboardingStatus.CompletedWithoutSubscription, res: defaultHomePagePath },
 
@@ -146,6 +168,7 @@ const testCases = [
   { loc: AppPath.TasksPage, status: OnboardingStatus.OngoingWorkspaceActivation, res: AppPath.CreateWorkspace },
   { loc: AppPath.TasksPage, status: OnboardingStatus.OngoingProfileCreation, res: AppPath.CreateProfile },
   { loc: AppPath.TasksPage, status: OnboardingStatus.OngoingSyncEmail, res: AppPath.SyncEmails },
+  { loc: AppPath.TasksPage, status: OnboardingStatus.OngoingInviteTeam, res: AppPath.InviteTeam },
   { loc: AppPath.TasksPage, status: OnboardingStatus.Completed, res: undefined },
   { loc: AppPath.TasksPage, status: OnboardingStatus.CompletedWithoutSubscription, res: undefined },
 
@@ -157,6 +180,7 @@ const testCases = [
   { loc: AppPath.OpportunitiesPage, status: OnboardingStatus.OngoingWorkspaceActivation, res: AppPath.CreateWorkspace },
   { loc: AppPath.OpportunitiesPage, status: OnboardingStatus.OngoingProfileCreation, res: AppPath.CreateProfile },
   { loc: AppPath.OpportunitiesPage, status: OnboardingStatus.OngoingSyncEmail, res: AppPath.SyncEmails },
+  { loc: AppPath.OpportunitiesPage, status: OnboardingStatus.OngoingInviteTeam, res: AppPath.InviteTeam },
   { loc: AppPath.OpportunitiesPage, status: OnboardingStatus.Completed, res: undefined },
   { loc: AppPath.OpportunitiesPage, status: OnboardingStatus.CompletedWithoutSubscription, res: undefined },
 
@@ -168,6 +192,7 @@ const testCases = [
   { loc: AppPath.RecordIndexPage, status: OnboardingStatus.OngoingWorkspaceActivation, res: AppPath.CreateWorkspace },
   { loc: AppPath.RecordIndexPage, status: OnboardingStatus.OngoingProfileCreation, res: AppPath.CreateProfile },
   { loc: AppPath.RecordIndexPage, status: OnboardingStatus.OngoingSyncEmail, res: AppPath.SyncEmails },
+  { loc: AppPath.RecordIndexPage, status: OnboardingStatus.OngoingInviteTeam, res: AppPath.InviteTeam },
   { loc: AppPath.RecordIndexPage, status: OnboardingStatus.Completed, res: undefined },
   { loc: AppPath.RecordIndexPage, status: OnboardingStatus.CompletedWithoutSubscription, res: undefined },
 
@@ -179,6 +204,7 @@ const testCases = [
   { loc: AppPath.RecordShowPage, status: OnboardingStatus.OngoingWorkspaceActivation, res: AppPath.CreateWorkspace },
   { loc: AppPath.RecordShowPage, status: OnboardingStatus.OngoingProfileCreation, res: AppPath.CreateProfile },
   { loc: AppPath.RecordShowPage, status: OnboardingStatus.OngoingSyncEmail, res: AppPath.SyncEmails },
+  { loc: AppPath.RecordShowPage, status: OnboardingStatus.OngoingInviteTeam, res: AppPath.InviteTeam },
   { loc: AppPath.RecordShowPage, status: OnboardingStatus.Completed, res: undefined },
   { loc: AppPath.RecordShowPage, status: OnboardingStatus.CompletedWithoutSubscription, res: undefined },
 
@@ -190,6 +216,7 @@ const testCases = [
   { loc: AppPath.SettingsCatchAll, status: OnboardingStatus.OngoingWorkspaceActivation, res: AppPath.CreateWorkspace },
   { loc: AppPath.SettingsCatchAll, status: OnboardingStatus.OngoingProfileCreation, res: AppPath.CreateProfile },
   { loc: AppPath.SettingsCatchAll, status: OnboardingStatus.OngoingSyncEmail, res: AppPath.SyncEmails },
+  { loc: AppPath.SettingsCatchAll, status: OnboardingStatus.OngoingInviteTeam, res: AppPath.InviteTeam },
   { loc: AppPath.SettingsCatchAll, status: OnboardingStatus.Completed, res: undefined },
   { loc: AppPath.SettingsCatchAll, status: OnboardingStatus.CompletedWithoutSubscription, res: undefined },
 
@@ -201,6 +228,7 @@ const testCases = [
   { loc: AppPath.DevelopersCatchAll, status: OnboardingStatus.OngoingWorkspaceActivation, res: AppPath.CreateWorkspace },
   { loc: AppPath.DevelopersCatchAll, status: OnboardingStatus.OngoingProfileCreation, res: AppPath.CreateProfile },
   { loc: AppPath.DevelopersCatchAll, status: OnboardingStatus.OngoingSyncEmail, res: AppPath.SyncEmails },
+  { loc: AppPath.DevelopersCatchAll, status: OnboardingStatus.OngoingInviteTeam, res: AppPath.InviteTeam },
   { loc: AppPath.DevelopersCatchAll, status: OnboardingStatus.Completed, res: undefined },
   { loc: AppPath.DevelopersCatchAll, status: OnboardingStatus.CompletedWithoutSubscription, res: undefined },
 
@@ -212,6 +240,7 @@ const testCases = [
   { loc: AppPath.Impersonate, status: OnboardingStatus.OngoingWorkspaceActivation, res: AppPath.CreateWorkspace },
   { loc: AppPath.Impersonate, status: OnboardingStatus.OngoingProfileCreation, res: AppPath.CreateProfile },
   { loc: AppPath.Impersonate, status: OnboardingStatus.OngoingSyncEmail, res: AppPath.SyncEmails },
+  { loc: AppPath.Impersonate, status: OnboardingStatus.OngoingInviteTeam, res: AppPath.InviteTeam },
   { loc: AppPath.Impersonate, status: OnboardingStatus.Completed, res: undefined },
   { loc: AppPath.Impersonate, status: OnboardingStatus.CompletedWithoutSubscription, res: undefined },
 
@@ -223,6 +252,7 @@ const testCases = [
   { loc: AppPath.Authorize, status: OnboardingStatus.OngoingWorkspaceActivation, res: AppPath.CreateWorkspace },
   { loc: AppPath.Authorize, status: OnboardingStatus.OngoingProfileCreation, res: AppPath.CreateProfile },
   { loc: AppPath.Authorize, status: OnboardingStatus.OngoingSyncEmail, res: AppPath.SyncEmails },
+  { loc: AppPath.Authorize, status: OnboardingStatus.OngoingInviteTeam, res: AppPath.InviteTeam },
   { loc: AppPath.Authorize, status: OnboardingStatus.Completed, res: undefined },
   { loc: AppPath.Authorize, status: OnboardingStatus.CompletedWithoutSubscription, res: undefined },
 
@@ -234,6 +264,7 @@ const testCases = [
   { loc: AppPath.NotFoundWildcard, status: OnboardingStatus.OngoingWorkspaceActivation, res: AppPath.CreateWorkspace },
   { loc: AppPath.NotFoundWildcard, status: OnboardingStatus.OngoingProfileCreation, res: AppPath.CreateProfile },
   { loc: AppPath.NotFoundWildcard, status: OnboardingStatus.OngoingSyncEmail, res: AppPath.SyncEmails },
+  { loc: AppPath.NotFoundWildcard, status: OnboardingStatus.OngoingInviteTeam, res: AppPath.InviteTeam },
   { loc: AppPath.NotFoundWildcard, status: OnboardingStatus.Completed, res: undefined },
   { loc: AppPath.NotFoundWildcard, status: OnboardingStatus.CompletedWithoutSubscription, res: undefined },
 
@@ -245,6 +276,7 @@ const testCases = [
   { loc: AppPath.NotFound, status: OnboardingStatus.OngoingWorkspaceActivation, res: AppPath.CreateWorkspace },
   { loc: AppPath.NotFound, status: OnboardingStatus.OngoingProfileCreation, res: AppPath.CreateProfile },
   { loc: AppPath.NotFound, status: OnboardingStatus.OngoingSyncEmail, res: AppPath.SyncEmails },
+  { loc: AppPath.NotFound, status: OnboardingStatus.OngoingInviteTeam, res: AppPath.InviteTeam },
   { loc: AppPath.NotFound, status: OnboardingStatus.Completed, res: undefined },
   { loc: AppPath.NotFound, status: OnboardingStatus.CompletedWithoutSubscription, res: undefined },
 ];

packages/twenty-front/src/hooks/usePageChangeEffectNavigateLocation.ts

@@ -25,6 +25,7 @@ export const usePageChangeEffectNavigateLocation = () => {
     isMatchingLocation(AppPath.CreateWorkspace) ||
     isMatchingLocation(AppPath.CreateProfile) ||
     isMatchingLocation(AppPath.SyncEmails) ||
+    isMatchingLocation(AppPath.InviteTeam) ||
     isMatchingLocation(AppPath.PlanRequired) ||
     isMatchingLocation(AppPath.PlanRequiredSuccess);
 
@@ -79,6 +80,13 @@ export const usePageChangeEffectNavigateLocation = () => {
     return AppPath.SyncEmails;
   }
 
+  if (
+    onboardingStatus === OnboardingStatus.OngoingInviteTeam &&
+    !isMatchingLocation(AppPath.InviteTeam)
+  ) {
+    return AppPath.InviteTeam;
+  }
+
   if (
     onboardingStatus === OnboardingStatus.Completed &&
     isMatchingOnboardingRoute &&

packages/twenty-front/src/modules/auth/components/Title.tsx

@@ -5,30 +5,30 @@ import { AnimatedEaseIn } from '@/ui/utilities/animation/components/AnimatedEase
 
 type TitleProps = React.PropsWithChildren & {
   animate?: boolean;
-  withMarginTop?: boolean;
+  noMarginTop?: boolean;
 };
 
-const StyledTitle = styled.div<Pick<TitleProps, 'withMarginTop'>>`
+const StyledTitle = styled.div<Pick<TitleProps, 'noMarginTop'>>`
   color: ${({ theme }) => theme.font.color.primary};
   font-size: ${({ theme }) => theme.font.size.xl};
   font-weight: ${({ theme }) => theme.font.weight.semiBold};
   margin-bottom: ${({ theme }) => theme.spacing(4)};
-  margin-top: ${({ theme, withMarginTop }) =>
-    withMarginTop ? theme.spacing(4) : 0};
+  margin-top: ${({ theme, noMarginTop }) =>
+    !noMarginTop ? theme.spacing(4) : 0};
 `;
 
 export const Title = ({
   children,
   animate = false,
-  withMarginTop = true,
+  noMarginTop = false,
 }: TitleProps) => {
   if (animate) {
     return (
-      <StyledTitle withMarginTop={withMarginTop}>
+      <StyledTitle noMarginTop={noMarginTop}>
         <AnimatedEaseIn>{children}</AnimatedEaseIn>
       </StyledTitle>
     );
   }
 
-  return <StyledTitle withMarginTop={withMarginTop}>{children}</StyledTitle>;
+  return <StyledTitle noMarginTop={noMarginTop}>{children}</StyledTitle>;
 };

packages/twenty-front/src/modules/auth/hooks/__test__/useOnboardingStatus.test.ts

@@ -12,6 +12,7 @@ import {
 import { isVerifyPendingState } from '@/auth/states/isVerifyPendingState';
 import { tokenPairState } from '@/auth/states/tokenPairState';
 import { billingState } from '@/client-config/states/billingState';
+import { OnboardingStep } from '~/generated/graphql';
 
 const tokenPair = {
   accessToken: { token: 'accessToken', expiresAt: 'expiresAt' },
@@ -26,7 +27,7 @@ const currentUser = {
   email: 'test@test',
   supportUserHash: '1',
   canImpersonate: false,
-  state: { skipSyncEmailOnboardingStep: true },
+  onboardingStep: null,
 } as CurrentUser;
 const currentWorkspace = {
   activationStatus: 'active',
@@ -196,7 +197,7 @@ describe('useOnboardingStatus', () => {
       setBilling(billing);
       setCurrentUser({
         ...currentUser,
-        state: { skipSyncEmailOnboardingStep: false },
+        onboardingStep: OnboardingStep.SyncEmail,
       });
       setCurrentWorkspace({
         ...currentWorkspace,
@@ -214,6 +215,39 @@ describe('useOnboardingStatus', () => {
     expect(result.current.onboardingStatus).toBe('ongoing_sync_email');
   });
 
+  it('should return "ongoing_invite_team"', async () => {
+    const { result } = renderHooks();
+    const {
+      setTokenPair,
+      setBilling,
+      setCurrentUser,
+      setCurrentWorkspace,
+      setCurrentWorkspaceMember,
+    } = result.current;
+
+    act(() => {
+      setTokenPair(tokenPair);
+      setBilling(billing);
+      setCurrentUser({
+        ...currentUser,
+        onboardingStep: OnboardingStep.InviteTeam,
+      });
+      setCurrentWorkspace({
+        ...currentWorkspace,
+        subscriptionStatus: 'active',
+      });
+      setCurrentWorkspaceMember({
+        ...currentWorkspaceMember,
+        name: {
+          firstName: 'John',
+          lastName: 'Doe',
+        },
+      });
+    });
+
+    expect(result.current.onboardingStatus).toBe('ongoing_invite_team');
+  });
+
   it('should return "completed"', async () => {
     const { result } = renderHooks();
     const {

packages/twenty-front/src/modules/auth/sign-in-up/components/SignInUpForm.tsx

@@ -4,6 +4,7 @@ import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
 import { motion } from 'framer-motion';
 import { useRecoilState, useRecoilValue } from 'recoil';
+import { Key } from 'ts-key-enum';
 import { IconGoogle, IconMicrosoft } from 'twenty-ui';
 
 import { FooterNote } from '@/auth/sign-in-up/components/FooterNote';
@@ -69,7 +70,7 @@ export const SignInUpForm = () => {
   const handleKeyDown = async (
     event: React.KeyboardEvent<HTMLInputElement>,
   ) => {
-    if (event.key === 'Enter') {
+    if (event.key === Key.Enter) {
       event.preventDefault();
 
       if (signInUpStep === SignInUpStep.Init) {

packages/twenty-front/src/modules/auth/states/currentUserState.ts

@@ -4,7 +4,7 @@ import { User } from '~/generated/graphql';
 
 export type CurrentUser = Pick<
   User,
-  'id' | 'email' | 'supportUserHash' | 'canImpersonate' | 'state'
+  'id' | 'email' | 'supportUserHash' | 'canImpersonate' | 'onboardingStep'
 >;
 
 export const currentUserState = createState<CurrentUser | null>({

packages/twenty-front/src/modules/auth/utils/__test__/getOnboardingStatus.test.ts

@@ -1,6 +1,7 @@
 import { CurrentUser } from '@/auth/states/currentUserState';
 import { CurrentWorkspace } from '@/auth/states/currentWorkspaceState';
 import { WorkspaceMember } from '@/workspace-member/types/WorkspaceMember';
+import { OnboardingStep } from '~/generated/graphql';
 
 import { getOnboardingStatus } from '../getOnboardingStatus';
 
@@ -22,7 +23,7 @@ describe('getOnboardingStatus', () => {
         activationStatus: 'inactive',
       } as CurrentWorkspace,
       currentUser: {
-        state: { skipSyncEmailOnboardingStep: true },
+        onboardingStep: null,
       } as CurrentUser,
       isBillingEnabled: false,
     });
@@ -38,7 +39,7 @@ describe('getOnboardingStatus', () => {
         activationStatus: 'active',
       } as CurrentWorkspace,
       currentUser: {
-        state: { skipSyncEmailOnboardingStep: true },
+        onboardingStep: null,
       } as CurrentUser,
       isBillingEnabled: false,
     });
@@ -57,7 +58,26 @@ describe('getOnboardingStatus', () => {
         activationStatus: 'active',
       } as CurrentWorkspace,
       currentUser: {
-        state: { skipSyncEmailOnboardingStep: false },
+        onboardingStep: OnboardingStep.SyncEmail,
+      } as CurrentUser,
+      isBillingEnabled: false,
+    });
+
+    const ongoingInviteTeam = getOnboardingStatus({
+      isLoggedIn: true,
+      currentWorkspaceMember: {
+        id: '1',
+        name: {
+          firstName: 'John',
+          lastName: 'Doe',
+        },
+      } as WorkspaceMember,
+      currentWorkspace: {
+        id: '1',
+        activationStatus: 'active',
+      } as CurrentWorkspace,
+      currentUser: {
+        onboardingStep: OnboardingStep.InviteTeam,
       } as CurrentUser,
       isBillingEnabled: false,
     });
@@ -76,7 +96,7 @@ describe('getOnboardingStatus', () => {
         activationStatus: 'active',
       } as CurrentWorkspace,
       currentUser: {
-        state: { skipSyncEmailOnboardingStep: true },
+        onboardingStep: null,
       } as CurrentUser,
       isBillingEnabled: false,
     });
@@ -96,7 +116,7 @@ describe('getOnboardingStatus', () => {
         subscriptionStatus: 'incomplete',
       } as CurrentWorkspace,
       currentUser: {
-        state: { skipSyncEmailOnboardingStep: true },
+        onboardingStep: null,
       } as CurrentUser,
       isBillingEnabled: true,
     });
@@ -116,7 +136,7 @@ describe('getOnboardingStatus', () => {
         subscriptionStatus: 'incomplete',
       } as CurrentWorkspace,
       currentUser: {
-        state: { skipSyncEmailOnboardingStep: true },
+        onboardingStep: null,
       } as CurrentUser,
       isBillingEnabled: false,
     });
@@ -136,7 +156,7 @@ describe('getOnboardingStatus', () => {
         subscriptionStatus: 'canceled',
       } as CurrentWorkspace,
       currentUser: {
-        state: { skipSyncEmailOnboardingStep: true },
+        onboardingStep: null,
       } as CurrentUser,
       isBillingEnabled: true,
     });
@@ -145,6 +165,7 @@ describe('getOnboardingStatus', () => {
     expect(ongoingWorkspaceActivation).toBe('ongoing_workspace_activation');
     expect(ongoingProfileCreation).toBe('ongoing_profile_creation');
     expect(ongoingSyncEmail).toBe('ongoing_sync_email');
+    expect(ongoingInviteTeam).toBe('ongoing_invite_team');
     expect(completed).toBe('completed');
     expect(incomplete).toBe('incomplete');
     expect(canceled).toBe('canceled');

packages/twenty-front/src/modules/auth/utils/getOnboardingStatus.ts

@@ -1,6 +1,7 @@
 import { CurrentUser } from '@/auth/states/currentUserState';
 import { CurrentWorkspace } from '@/auth/states/currentWorkspaceState';
 import { WorkspaceMember } from '@/workspace-member/types/WorkspaceMember';
+import { OnboardingStep } from '~/generated/graphql';
 
 export enum OnboardingStatus {
   Incomplete = 'incomplete',
@@ -11,6 +12,7 @@ export enum OnboardingStatus {
   OngoingWorkspaceActivation = 'ongoing_workspace_activation',
   OngoingProfileCreation = 'ongoing_profile_creation',
   OngoingSyncEmail = 'ongoing_sync_email',
+  OngoingInviteTeam = 'ongoing_invite_team',
   Completed = 'completed',
   CompletedWithoutSubscription = 'completed_without_subscription',
 }
@@ -59,10 +61,14 @@ export const getOnboardingStatus = ({
     return OnboardingStatus.OngoingProfileCreation;
   }
 
-  if (!currentUser.state.skipSyncEmailOnboardingStep) {
+  if (currentUser.onboardingStep === OnboardingStep.SyncEmail) {
     return OnboardingStatus.OngoingSyncEmail;
   }
 
+  if (currentUser.onboardingStep === OnboardingStep.InviteTeam) {
+    return OnboardingStatus.OngoingInviteTeam;
+  }
+
   if (isBillingEnabled && currentWorkspace.subscriptionStatus === 'canceled') {
     return OnboardingStatus.Canceled;
   }

packages/twenty-front/src/modules/onboarding/hooks/useSetNextOnboardingStep.ts

@@ -0,0 +1,41 @@
+import { useRecoilCallback, useSetRecoilState } from 'recoil';
+
+import { currentUserState } from '@/auth/states/currentUserState';
+import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular';
+import { useFindManyRecords } from '@/object-record/hooks/useFindManyRecords';
+import { WorkspaceMember } from '@/workspace-member/types/WorkspaceMember';
+import { OnboardingStep } from '~/generated/graphql';
+
+const getNextOnboardingStep = (
+  currentOnboardingStep: OnboardingStep,
+  workspaceMembers: WorkspaceMember[],
+) => {
+  if (currentOnboardingStep === OnboardingStep.SyncEmail) {
+    return workspaceMembers && workspaceMembers.length > 1
+      ? null
+      : OnboardingStep.InviteTeam;
+  }
+  return null;
+};
+
+export const useSetNextOnboardingStep = () => {
+  const setCurrentUser = useSetRecoilState(currentUserState);
+  const { records: workspaceMembers } = useFindManyRecords<WorkspaceMember>({
+    objectNameSingular: CoreObjectNameSingular.WorkspaceMember,
+  });
+  return useRecoilCallback(
+    () => (currentOnboardingStep: OnboardingStep) => {
+      setCurrentUser(
+        (current) =>
+          ({
+            ...current,
+            onboardingStep: getNextOnboardingStep(
+              currentOnboardingStep,
+              workspaceMembers,
+            ),
+          }) as any,
+      );
+    },
+    [setCurrentUser, workspaceMembers],
+  );
+};

packages/twenty-front/src/modules/types/AppPath.ts

@@ -9,6 +9,7 @@ export enum AppPath {
   CreateWorkspace = '/create/workspace',
   CreateProfile = '/create/profile',
   SyncEmails = '/sync/emails',
+  InviteTeam = '/invite-team',
   PlanRequired = '/plan-required',
   PlanRequiredSuccess = '/plan-required/payment-success',
 

packages/twenty-front/src/modules/types/PageHotkeyScope.ts

@@ -3,6 +3,8 @@ export enum PageHotkeyScope {
   CreateWokspace = 'create-workspace',
   SignInUp = 'sign-in-up',
   CreateProfile = 'create-profile',
+  InviteTeam = 'invite-team',
+  SyncEmail = 'sync-email',
   PlanRequired = 'plan-required',
   ShowPage = 'show-page',
   PersonShowPage = 'person-show-page',

packages/twenty-front/src/modules/ui/display/text/components/SeparatorLineText.tsx

@@ -0,0 +1,34 @@
+import React from 'react';
+import styled from '@emotion/styled';
+
+const StyledContainer = styled.div`
+  display: flex;
+  align-items: center;
+  width: 100%;
+  font-size: ${({ theme }) => theme.font.size.md};
+  font-weight: ${({ theme }) => theme.font.weight.semiBold};
+  color: ${({ theme }) => theme.font.color.extraLight};
+
+  &:before,
+  &:after {
+    content: '';
+    height: 1px;
+    flex-grow: 1;
+    background: ${({ theme }) => theme.background.transparent.light};
+  }
+
+  &:before {
+    margin: 0 ${({ theme }) => theme.spacing(4)} 0 0;
+  }
+  &:after {
+    margin: 0 0 0 ${({ theme }) => theme.spacing(4)};
+  }
+`;
+
+export const SeparatorLineText = ({
+  children,
+}: {
+  children: React.ReactNode;
+}) => {
+  return <StyledContainer>{children}</StyledContainer>;
+};

packages/twenty-front/src/modules/ui/display/text/components/__stories__/SeparatorLineText.stories.tsx

@@ -0,0 +1,16 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { ComponentDecorator } from 'twenty-ui';
+
+import { SeparatorLineText } from '../SeparatorLineText';
+
+const meta: Meta<typeof SeparatorLineText> = {
+  title: 'UI/Display/Text/SeparatorLineText',
+  component: SeparatorLineText,
+  args: { children: 'Or' },
+  decorators: [ComponentDecorator],
+};
+
+export default meta;
+type Story = StoryObj<typeof SeparatorLineText>;
+
+export const Default: Story = {};

packages/twenty-front/src/modules/ui/input/components/TextInputV2.tsx

@@ -117,6 +117,7 @@ export type TextInputV2ComponentProps = Omit<
   onChange?: (text: string) => void;
   fullWidth?: boolean;
   error?: string;
+  noErrorHelper?: boolean;
   RightIcon?: IconComponent;
   LeftIcon?: IconComponent;
   onKeyDown?: (event: React.KeyboardEvent<HTMLInputElement>) => void;
@@ -134,6 +135,7 @@ const TextInputV2Component = (
     onKeyDown,
     fullWidth,
     error,
+    noErrorHelper = false,
     required,
     type,
     autoFocus,
@@ -207,7 +209,9 @@ const TextInputV2Component = (
           )}
         </StyledTrailingIconContainer>
       </StyledInputContainer>
-      {error && <StyledErrorHelper>{error}</StyledErrorHelper>}
+      {error && !noErrorHelper && (
+        <StyledErrorHelper>{error}</StyledErrorHelper>
+      )}
     </StyledContainer>
   );
 };

packages/twenty-front/src/modules/ui/layout/hooks/__tests__/useShowAuthModal.test.tsx

@@ -47,6 +47,7 @@ const testCases = [
   { loc: AppPath.Verify, status: OnboardingStatus.OngoingWorkspaceActivation, res: false },
   { loc: AppPath.Verify, status: OnboardingStatus.OngoingProfileCreation, res: false },
   { loc: AppPath.Verify, status: OnboardingStatus.OngoingSyncEmail, res: false },
+  { loc: AppPath.Verify, status: OnboardingStatus.OngoingInviteTeam, res: false },
   { loc: AppPath.Verify, status: OnboardingStatus.Completed, res: false },
   { loc: AppPath.Verify, status: OnboardingStatus.CompletedWithoutSubscription, res: false },
 
@@ -58,6 +59,7 @@ const testCases = [
   { loc: AppPath.SignInUp, status: OnboardingStatus.OngoingWorkspaceActivation, res: true },
   { loc: AppPath.SignInUp, status: OnboardingStatus.OngoingProfileCreation, res: true },
   { loc: AppPath.SignInUp, status: OnboardingStatus.OngoingSyncEmail, res: true },
+  { loc: AppPath.SignInUp, status: OnboardingStatus.OngoingInviteTeam, res: true },
   { loc: AppPath.SignInUp, status: OnboardingStatus.Completed, res: false },
   { loc: AppPath.SignInUp, status: OnboardingStatus.CompletedWithoutSubscription, res: false },
 
@@ -69,6 +71,7 @@ const testCases = [
   { loc: AppPath.Invite, status: OnboardingStatus.OngoingWorkspaceActivation, res: true },
   { loc: AppPath.Invite, status: OnboardingStatus.OngoingProfileCreation, res: true },
   { loc: AppPath.Invite, status: OnboardingStatus.OngoingSyncEmail, res: true },
+  { loc: AppPath.Invite, status: OnboardingStatus.OngoingInviteTeam, res: true },
   { loc: AppPath.Invite, status: OnboardingStatus.Completed, res: true },
   { loc: AppPath.Invite, status: OnboardingStatus.CompletedWithoutSubscription, res: true },
 
@@ -80,6 +83,7 @@ const testCases = [
   { loc: AppPath.ResetPassword, status: OnboardingStatus.OngoingWorkspaceActivation, res: true },
   { loc: AppPath.ResetPassword, status: OnboardingStatus.OngoingProfileCreation, res: true },
   { loc: AppPath.ResetPassword, status: OnboardingStatus.OngoingSyncEmail, res: true },
+  { loc: AppPath.ResetPassword, status: OnboardingStatus.OngoingInviteTeam, res: true },
   { loc: AppPath.ResetPassword, status: OnboardingStatus.Completed, res: true },
   { loc: AppPath.ResetPassword, status: OnboardingStatus.CompletedWithoutSubscription, res: true },
 
@@ -91,6 +95,7 @@ const testCases = [
   { loc: AppPath.CreateWorkspace, status: OnboardingStatus.OngoingWorkspaceActivation, res: true },
   { loc: AppPath.CreateWorkspace, status: OnboardingStatus.OngoingProfileCreation, res: true },
   { loc: AppPath.CreateWorkspace, status: OnboardingStatus.OngoingSyncEmail, res: true },
+  { loc: AppPath.CreateWorkspace, status: OnboardingStatus.OngoingInviteTeam, res: true },
   { loc: AppPath.CreateWorkspace, status: OnboardingStatus.Completed, res: false },
   { loc: AppPath.CreateWorkspace, status: OnboardingStatus.CompletedWithoutSubscription, res: false },
 
@@ -102,6 +107,7 @@ const testCases = [
   { loc: AppPath.CreateProfile, status: OnboardingStatus.OngoingWorkspaceActivation, res: true },
   { loc: AppPath.CreateProfile, status: OnboardingStatus.OngoingProfileCreation, res: true },
   { loc: AppPath.CreateProfile, status: OnboardingStatus.OngoingSyncEmail, res: true },
+  { loc: AppPath.CreateProfile, status: OnboardingStatus.OngoingInviteTeam, res: true },
   { loc: AppPath.CreateProfile, status: OnboardingStatus.Completed, res: false },
   { loc: AppPath.CreateProfile, status: OnboardingStatus.CompletedWithoutSubscription, res: false },
 
@@ -113,9 +119,22 @@ const testCases = [
   { loc: AppPath.SyncEmails, status: OnboardingStatus.OngoingWorkspaceActivation, res: true },
   { loc: AppPath.SyncEmails, status: OnboardingStatus.OngoingProfileCreation, res: true },
   { loc: AppPath.SyncEmails, status: OnboardingStatus.OngoingSyncEmail, res: true },
+  { loc: AppPath.SyncEmails, status: OnboardingStatus.OngoingInviteTeam, res: true },
   { loc: AppPath.SyncEmails, status: OnboardingStatus.Completed, res: false },
   { loc: AppPath.SyncEmails, status: OnboardingStatus.CompletedWithoutSubscription, res: false },
 
+  { loc: AppPath.InviteTeam, status: OnboardingStatus.Incomplete, res: true },
+  { loc: AppPath.InviteTeam, status: OnboardingStatus.Canceled, res: false },
+  { loc: AppPath.InviteTeam, status: OnboardingStatus.Unpaid, res: false },
+  { loc: AppPath.InviteTeam, status: OnboardingStatus.PastDue, res: false },
+  { loc: AppPath.InviteTeam, status: OnboardingStatus.OngoingUserCreation, res: true },
+  { loc: AppPath.InviteTeam, status: OnboardingStatus.OngoingWorkspaceActivation, res: true },
+  { loc: AppPath.InviteTeam, status: OnboardingStatus.OngoingProfileCreation, res: true },
+  { loc: AppPath.InviteTeam, status: OnboardingStatus.OngoingSyncEmail, res: true },
+  { loc: AppPath.InviteTeam, status: OnboardingStatus.OngoingInviteTeam, res: true },
+  { loc: AppPath.InviteTeam, status: OnboardingStatus.Completed, res: false },
+  { loc: AppPath.InviteTeam, status: OnboardingStatus.CompletedWithoutSubscription, res: false },
+
   { loc: AppPath.PlanRequired, status: OnboardingStatus.Incomplete, res: true },
   { loc: AppPath.PlanRequired, status: OnboardingStatus.Canceled, res: true },
   { loc: AppPath.PlanRequired, status: OnboardingStatus.Unpaid, res: false },
@@ -124,6 +143,7 @@ const testCases = [
   { loc: AppPath.PlanRequired, status: OnboardingStatus.OngoingWorkspaceActivation, res: true },
   { loc: AppPath.PlanRequired, status: OnboardingStatus.OngoingProfileCreation, res: true },
   { loc: AppPath.PlanRequired, status: OnboardingStatus.OngoingSyncEmail, res: true },
+  { loc: AppPath.PlanRequired, status: OnboardingStatus.OngoingInviteTeam, res: true },
   { loc: AppPath.PlanRequired, status: OnboardingStatus.Completed, res: false },
   { loc: AppPath.PlanRequired, status: OnboardingStatus.CompletedWithoutSubscription, res: true },
 
@@ -135,6 +155,7 @@ const testCases = [
   { loc: AppPath.PlanRequiredSuccess, status: OnboardingStatus.OngoingWorkspaceActivation, res: true },
   { loc: AppPath.PlanRequiredSuccess, status: OnboardingStatus.OngoingProfileCreation, res: true },
   { loc: AppPath.PlanRequiredSuccess, status: OnboardingStatus.OngoingSyncEmail, res: true },
+  { loc: AppPath.PlanRequiredSuccess, status: OnboardingStatus.OngoingInviteTeam, res: true },
   { loc: AppPath.PlanRequiredSuccess, status: OnboardingStatus.Completed, res: false },
   { loc: AppPath.PlanRequiredSuccess, status: OnboardingStatus.CompletedWithoutSubscription, res: false },
 
@@ -146,6 +167,7 @@ const testCases = [
   { loc: AppPath.Index, status: OnboardingStatus.OngoingWorkspaceActivation, res: true },
   { loc: AppPath.Index, status: OnboardingStatus.OngoingProfileCreation, res: true },
   { loc: AppPath.Index, status: OnboardingStatus.OngoingSyncEmail, res: true },
+  { loc: AppPath.Index, status: OnboardingStatus.OngoingInviteTeam, res: true },
   { loc: AppPath.Index, status: OnboardingStatus.Completed, res: false },
   { loc: AppPath.Index, status: OnboardingStatus.CompletedWithoutSubscription, res: false },
 
@@ -157,6 +179,7 @@ const testCases = [
   { loc: AppPath.TasksPage, status: OnboardingStatus.OngoingWorkspaceActivation, res: true },
   { loc: AppPath.TasksPage, status: OnboardingStatus.OngoingProfileCreation, res: true },
   { loc: AppPath.TasksPage, status: OnboardingStatus.OngoingSyncEmail, res: true },
+  { loc: AppPath.TasksPage, status: OnboardingStatus.OngoingInviteTeam, res: true },
   { loc: AppPath.TasksPage, status: OnboardingStatus.Completed, res: false },
   { loc: AppPath.TasksPage, status: OnboardingStatus.CompletedWithoutSubscription, res: false },
 
@@ -168,6 +191,7 @@ const testCases = [
   { loc: AppPath.OpportunitiesPage, status: OnboardingStatus.OngoingWorkspaceActivation, res: true },
   { loc: AppPath.OpportunitiesPage, status: OnboardingStatus.OngoingProfileCreation, res: true },
   { loc: AppPath.OpportunitiesPage, status: OnboardingStatus.OngoingSyncEmail, res: true },
+  { loc: AppPath.OpportunitiesPage, status: OnboardingStatus.OngoingInviteTeam, res: true },
   { loc: AppPath.OpportunitiesPage, status: OnboardingStatus.Completed, res: false },
   { loc: AppPath.OpportunitiesPage, status: OnboardingStatus.CompletedWithoutSubscription, res: false },
 
@@ -179,6 +203,7 @@ const testCases = [
   { loc: AppPath.RecordIndexPage, status: OnboardingStatus.OngoingWorkspaceActivation, res: true },
   { loc: AppPath.RecordIndexPage, status: OnboardingStatus.OngoingProfileCreation, res: true },
   { loc: AppPath.RecordIndexPage, status: OnboardingStatus.OngoingSyncEmail, res: true },
+  { loc: AppPath.RecordIndexPage, status: OnboardingStatus.OngoingInviteTeam, res: true },
   { loc: AppPath.RecordIndexPage, status: OnboardingStatus.Completed, res: false },
   { loc: AppPath.RecordIndexPage, status: OnboardingStatus.CompletedWithoutSubscription, res: false },
 
@@ -190,6 +215,7 @@ const testCases = [
   { loc: AppPath.RecordShowPage, status: OnboardingStatus.OngoingWorkspaceActivation, res: true },
   { loc: AppPath.RecordShowPage, status: OnboardingStatus.OngoingProfileCreation, res: true },
   { loc: AppPath.RecordShowPage, status: OnboardingStatus.OngoingSyncEmail, res: true },
+  { loc: AppPath.RecordShowPage, status: OnboardingStatus.OngoingInviteTeam, res: true },
   { loc: AppPath.RecordShowPage, status: OnboardingStatus.Completed, res: false },
   { loc: AppPath.RecordShowPage, status: OnboardingStatus.CompletedWithoutSubscription, res: false },
 
@@ -201,6 +227,7 @@ const testCases = [
   { loc: AppPath.SettingsCatchAll, status: OnboardingStatus.OngoingWorkspaceActivation, res: true },
   { loc: AppPath.SettingsCatchAll, status: OnboardingStatus.OngoingProfileCreation, res: true },
   { loc: AppPath.SettingsCatchAll, status: OnboardingStatus.OngoingSyncEmail, res: true },
+  { loc: AppPath.SettingsCatchAll, status: OnboardingStatus.OngoingInviteTeam, res: true },
   { loc: AppPath.SettingsCatchAll, status: OnboardingStatus.Completed, res: false },
   { loc: AppPath.SettingsCatchAll, status: OnboardingStatus.CompletedWithoutSubscription, res: false },
 
@@ -212,6 +239,7 @@ const testCases = [
   { loc: AppPath.DevelopersCatchAll, status: OnboardingStatus.OngoingWorkspaceActivation, res: true },
   { loc: AppPath.DevelopersCatchAll, status: OnboardingStatus.OngoingProfileCreation, res: true },
   { loc: AppPath.DevelopersCatchAll, status: OnboardingStatus.OngoingSyncEmail, res: true },
+  { loc: AppPath.DevelopersCatchAll, status: OnboardingStatus.OngoingInviteTeam, res: true },
   { loc: AppPath.DevelopersCatchAll, status: OnboardingStatus.Completed, res: false },
   { loc: AppPath.DevelopersCatchAll, status: OnboardingStatus.CompletedWithoutSubscription, res: false },
 
@@ -223,6 +251,7 @@ const testCases = [
   { loc: AppPath.Impersonate, status: OnboardingStatus.OngoingWorkspaceActivation, res: true },
   { loc: AppPath.Impersonate, status: OnboardingStatus.OngoingProfileCreation, res: true },
   { loc: AppPath.Impersonate, status: OnboardingStatus.OngoingSyncEmail, res: true },
+  { loc: AppPath.Impersonate, status: OnboardingStatus.OngoingInviteTeam, res: true },
   { loc: AppPath.Impersonate, status: OnboardingStatus.Completed, res: false },
   { loc: AppPath.Impersonate, status: OnboardingStatus.CompletedWithoutSubscription, res: false },
 
@@ -234,6 +263,7 @@ const testCases = [
   { loc: AppPath.Authorize, status: OnboardingStatus.OngoingWorkspaceActivation, res: true },
   { loc: AppPath.Authorize, status: OnboardingStatus.OngoingProfileCreation, res: true },
   { loc: AppPath.Authorize, status: OnboardingStatus.OngoingSyncEmail, res: true },
+  { loc: AppPath.Authorize, status: OnboardingStatus.OngoingInviteTeam, res: true },
   { loc: AppPath.Authorize, status: OnboardingStatus.Completed, res: false },
   { loc: AppPath.Authorize, status: OnboardingStatus.CompletedWithoutSubscription, res: false },
 
@@ -245,6 +275,7 @@ const testCases = [
   { loc: AppPath.NotFoundWildcard, status: OnboardingStatus.OngoingWorkspaceActivation, res: true },
   { loc: AppPath.NotFoundWildcard, status: OnboardingStatus.OngoingProfileCreation, res: true },
   { loc: AppPath.NotFoundWildcard, status: OnboardingStatus.OngoingSyncEmail, res: true },
+  { loc: AppPath.NotFoundWildcard, status: OnboardingStatus.OngoingInviteTeam, res: true },
   { loc: AppPath.NotFoundWildcard, status: OnboardingStatus.Completed, res: false },
   { loc: AppPath.NotFoundWildcard, status: OnboardingStatus.CompletedWithoutSubscription, res: false },
 
@@ -256,6 +287,7 @@ const testCases = [
   { loc: AppPath.NotFound, status: OnboardingStatus.OngoingWorkspaceActivation, res: true },
   { loc: AppPath.NotFound, status: OnboardingStatus.OngoingProfileCreation, res: true },
   { loc: AppPath.NotFound, status: OnboardingStatus.OngoingSyncEmail, res: true },
+  { loc: AppPath.NotFound, status: OnboardingStatus.OngoingInviteTeam, res: true },
   { loc: AppPath.NotFound, status: OnboardingStatus.Completed, res: false },
   { loc: AppPath.NotFound, status: OnboardingStatus.CompletedWithoutSubscription, res: false },
 ];

packages/twenty-front/src/modules/ui/layout/hooks/useShowAuthModal.ts

@@ -28,7 +28,8 @@ export const useShowAuthModal = () => {
       OnboardingStatus.OngoingUserCreation === onboardingStatus ||
       OnboardingStatus.OngoingProfileCreation === onboardingStatus ||
       OnboardingStatus.OngoingWorkspaceActivation === onboardingStatus ||
-      OnboardingStatus.OngoingSyncEmail === onboardingStatus
+      OnboardingStatus.OngoingSyncEmail === onboardingStatus ||
+      OnboardingStatus.OngoingInviteTeam === onboardingStatus
     ) {
       return true;
     }

packages/twenty-front/src/modules/ui/utilities/animation/components/AnimatedTranslation.tsx

@@ -0,0 +1,33 @@
+import { useTheme } from '@emotion/react';
+import { motion } from 'framer-motion';
+
+type AnimatedTranslationProps = {
+  children: React.ReactNode;
+};
+
+export const AnimatedTranslation = ({ children }: AnimatedTranslationProps) => {
+  const theme = useTheme();
+
+  return (
+    <motion.div
+      initial="hidden"
+      animate="visible"
+      variants={{
+        hidden: {
+          opacity: 0,
+          y: -20,
+        },
+        visible: {
+          opacity: 1,
+          y: 0,
+          transition: {
+            duration: theme.animation.duration.normal, // Replace this with your theme's duration
+            ease: 'easeInOut',
+          },
+        },
+      }}
+    >
+      {children}
+    </motion.div>
+  );
+};

packages/twenty-front/src/modules/users/graphql/fragments/userQueryFragment.ts

@@ -8,9 +8,7 @@ export const USER_QUERY_FRAGMENT = gql`
     email
     canImpersonate
     supportUserHash
-    state {
-      skipSyncEmailOnboardingStep
-    }
+    onboardingStep
     workspaceMember {
       id
       name {

packages/twenty-front/src/modules/workspace/components/WorkspaceInviteTeam.tsx

@@ -1,17 +1,16 @@
 import { useEffect } from 'react';
 import { Controller, useForm } from 'react-hook-form';
-import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
 import { zodResolver } from '@hookform/resolvers/zod';
 import { Key } from 'ts-key-enum';
-import { IconCopy, IconMail, IconSend } from 'twenty-ui';
+import { IconMail, IconSend } from 'twenty-ui';
 import { z } from 'zod';
 
 import { SnackBarVariant } from '@/ui/feedback/snack-bar-manager/components/SnackBar';
 import { useSnackBar } from '@/ui/feedback/snack-bar-manager/hooks/useSnackBar';
 import { Button } from '@/ui/input/button/components/Button';
 import { TextInput } from '@/ui/input/components/TextInput';
-import { extractEmailsList } from '@/workspace/utils/extractEmailList';
+import { sanitizeEmailList } from '@/workspace/utils/sanitizeEmailList';
 import { useSendInviteLinkMutation } from '~/generated/graphql';
 import { isDefined } from '~/utils/isDefined';
 
@@ -35,7 +34,7 @@ const validationSchema = () =>
         if (!value.length) {
           return;
         }
-        const emails = extractEmailsList(value);
+        const emails = sanitizeEmailList(value.split(','));
         if (emails.length === 0) {
           ctx.addIssue({
             code: z.ZodIssueCode.invalid_string,
@@ -69,7 +68,6 @@ type FormInput = {
 };
 
 export const WorkspaceInviteTeam = () => {
-  const theme = useTheme();
   const { enqueueSnackBar } = useSnackBar();
   const [sendInviteLink] = useSendInviteLinkMutation();
 
@@ -82,14 +80,13 @@ export const WorkspaceInviteTeam = () => {
   });
 
   const submit = handleSubmit(async (data) => {
-    const emailsList = extractEmailsList(data.emails);
+    const emailsList = sanitizeEmailList(data.emails.split(','));
     const result = await sendInviteLink({ variables: { emails: emailsList } });
     if (isDefined(result.errors)) {
       throw result.errors;
     }
     enqueueSnackBar('Invite link sent to email addresses', {
       variant: SnackBarVariant.Success,
-      icon: <IconCopy size={theme.icon.size.md} />,
       duration: 2000,
     });
   });

packages/twenty-front/src/modules/workspace/utils/__tests__/extractEmailList.test.ts

@@ -1,28 +0,0 @@
-import { extractEmailsList } from '@/workspace/utils/extractEmailList';
-
-describe('extractEmailList', () => {
-  it('should extract email list', () => {
-    expect(extractEmailsList('toto@toto.com')).toEqual(['toto@toto.com']);
-  });
-  it('should extract email list with multiple emails', () => {
-    expect(extractEmailsList('toto@toto.com,toto2@toto.com')).toEqual([
-      'toto@toto.com',
-      'toto2@toto.com',
-    ]);
-  });
-  it('should extract email list with multiple emails and wrong emails', () => {
-    expect(extractEmailsList('toto@toto.com,toto2@toto.com,toto')).toEqual([
-      'toto@toto.com',
-      'toto2@toto.com',
-      'toto',
-    ]);
-  });
-  it('should remove duplicates', () => {
-    expect(extractEmailsList('toto@toto.com,toto@toto.com')).toEqual([
-      'toto@toto.com',
-    ]);
-  });
-  it('should remove empty emails', () => {
-    expect(extractEmailsList('toto@toto.com,')).toEqual(['toto@toto.com']);
-  });
-});

packages/twenty-front/src/modules/workspace/utils/__tests__/sanitizeEmailList.test.ts

@@ -0,0 +1,24 @@
+import { sanitizeEmailList } from '@/workspace/utils/sanitizeEmailList';
+
+describe('sanitizeEmailList', () => {
+  it('should do nothing if sanitized email list', () => {
+    expect(sanitizeEmailList(['toto@toto.com', 'toto2@toto.com'])).toEqual([
+      'toto@toto.com',
+      'toto2@toto.com',
+    ]);
+  });
+  it('should trim spaces', () => {
+    expect(sanitizeEmailList([' toto@toto.com ', '  toto2@toto.com'])).toEqual([
+      'toto@toto.com',
+      'toto2@toto.com',
+    ]);
+  });
+  it('should filter empty emails', () => {
+    expect(sanitizeEmailList(['toto@toto.com', ''])).toEqual(['toto@toto.com']);
+  });
+  it('should remove duplicates', () => {
+    expect(sanitizeEmailList(['toto@toto.com', 'toto@toto.com'])).toEqual([
+      'toto@toto.com',
+    ]);
+  });
+});

packages/twenty-front/src/modules/workspace/utils/sanitizeEmailList.ts

@@ -1,8 +1,7 @@
-export const extractEmailsList = (emails: string) => {
+export const sanitizeEmailList = (emailList: string[]): string[] => {
   return Array.from(
     new Set(
-      emails
-        .split(',')
+      emailList
         .map((email) => email.trim())
         .filter((email) => email.length > 0),
     ),

packages/twenty-front/src/pages/onboarding/ChooseYourPlan.tsx

@@ -143,7 +143,7 @@ export const ChooseYourPlan = () => {
   return (
     prices?.getProductPrices?.productPrices && (
       <>
-        <Title withMarginTop={false}>Choose your Plan</Title>
+        <Title noMarginTop>Choose your Plan</Title>
         <SubTitle>
           Enjoy a {billing?.billingFreeTrialDurationInDays}-day free trial
         </SubTitle>

packages/twenty-front/src/pages/onboarding/CreateProfile.tsx

@@ -55,9 +55,7 @@ type Form = z.infer<typeof validationSchema>;
 
 export const CreateProfile = () => {
   const onboardingStatus = useOnboardingStatus();
-
   const { enqueueSnackBar } = useSnackBar();
-
   const [currentWorkspaceMember, setCurrentWorkspaceMember] = useRecoilState(
     currentWorkspaceMemberState,
   );
@@ -145,7 +143,7 @@ export const CreateProfile = () => {
 
   return (
     <>
-      <Title withMarginTop={false}>Create profile</Title>
+      <Title noMarginTop>Create profile</Title>
       <SubTitle>How you'll be identified on the app.</SubTitle>
       <StyledContentContainer>
         <StyledSectionContainer>

packages/twenty-front/src/pages/onboarding/CreateWorkspace.tsx

@@ -111,7 +111,7 @@ export const CreateWorkspace = () => {
 
   return (
     <>
-      <Title withMarginTop={false}>Create your workspace</Title>
+      <Title noMarginTop>Create your workspace</Title>
       <SubTitle>
         A shared environment where you will be able to manage your customer
         relations with your team.

packages/twenty-front/src/pages/onboarding/InviteTeam.tsx

@@ -0,0 +1,220 @@
+import { useCallback } from 'react';
+import {
+  Controller,
+  SubmitHandler,
+  useFieldArray,
+  useForm,
+} from 'react-hook-form';
+import { useTheme } from '@emotion/react';
+import styled from '@emotion/styled';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { useRecoilValue } from 'recoil';
+import { Key } from 'ts-key-enum';
+import { IconCopy } from 'twenty-ui';
+import { z } from 'zod';
+
+import { SubTitle } from '@/auth/components/SubTitle';
+import { Title } from '@/auth/components/Title';
+import { currentUserState } from '@/auth/states/currentUserState';
+import { currentWorkspaceState } from '@/auth/states/currentWorkspaceState';
+import { useSetNextOnboardingStep } from '@/onboarding/hooks/useSetNextOnboardingStep';
+import { PageHotkeyScope } from '@/types/PageHotkeyScope';
+import { SeparatorLineText } from '@/ui/display/text/components/SeparatorLineText';
+import { SnackBarVariant } from '@/ui/feedback/snack-bar-manager/components/SnackBar';
+import { useSnackBar } from '@/ui/feedback/snack-bar-manager/hooks/useSnackBar';
+import { LightButton } from '@/ui/input/button/components/LightButton';
+import { MainButton } from '@/ui/input/button/components/MainButton';
+import { TextInputV2 } from '@/ui/input/components/TextInputV2';
+import { AnimatedTranslation } from '@/ui/utilities/animation/components/AnimatedTranslation';
+import { useScopedHotkeys } from '@/ui/utilities/hotkey/hooks/useScopedHotkeys';
+import { OnboardingStep, useSendInviteLinkMutation } from '~/generated/graphql';
+import { isDefined } from '~/utils/isDefined';
+
+const StyledAnimatedContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  padding: ${({ theme }) => theme.spacing(8)} 0;
+  gap: ${({ theme }) => theme.spacing(4)};
+  overflow-y: scroll;
+  overflow-x: hidden;
+  width: 100%;
+`;
+
+const StyledActionLinkContainer = styled.div`
+  display: flex;
+  justify-content: center;
+`;
+
+const StyledButtonContainer = styled.div`
+  display: flex;
+  justify-content: center;
+  width: 200px;
+`;
+
+const validationSchema = z.object({
+  emails: z.array(
+    z.object({ email: z.union([z.literal(''), z.string().email()]) }),
+  ),
+});
+
+type FormInput = z.infer<typeof validationSchema>;
+
+export const InviteTeam = () => {
+  const theme = useTheme();
+  const { enqueueSnackBar } = useSnackBar();
+  const [sendInviteLink] = useSendInviteLinkMutation();
+  const setNextOnboardingStep = useSetNextOnboardingStep();
+  const currentUser = useRecoilValue(currentUserState);
+  const currentWorkspace = useRecoilValue(currentWorkspaceState);
+  const {
+    control,
+    handleSubmit,
+    watch,
+    formState: { isValid, isSubmitting },
+  } = useForm<FormInput>({
+    mode: 'onChange',
+    defaultValues: {
+      emails: [{ email: '' }, { email: '' }, { email: '' }],
+    },
+    resolver: zodResolver(validationSchema),
+  });
+
+  const { fields, append, remove } = useFieldArray({
+    control,
+    name: 'emails',
+  });
+
+  watch(({ emails }) => {
+    if (!emails) {
+      return;
+    }
+    const emailValues = emails.map((email) => email?.email);
+    if (emailValues[emailValues.length - 1] !== '') {
+      append({ email: '' });
+    }
+    if (emailValues.length > 3 && emailValues[emailValues.length - 2] === '') {
+      remove(emailValues.length - 1);
+    }
+  });
+
+  const getPlaceholder = (emailIndex: number) => {
+    if (emailIndex === 0) {
+      return 'tim@apple.dev';
+    }
+    if (emailIndex === 1) {
+      return 'craig@apple.dev';
+    }
+    if (emailIndex === 2) {
+      return 'mike@apple.dev';
+    }
+    return 'phil@apple.dev';
+  };
+
+  const copyInviteLink = () => {
+    if (isDefined(currentWorkspace?.inviteHash)) {
+      const inviteLink = `${window.location.origin}/invite/${currentWorkspace?.inviteHash}`;
+      navigator.clipboard.writeText(inviteLink);
+      enqueueSnackBar('Link copied to clipboard', {
+        variant: SnackBarVariant.Success,
+        icon: <IconCopy size={theme.icon.size.md} />,
+        duration: 2000,
+      });
+    }
+  };
+
+  const onSubmit: SubmitHandler<FormInput> = useCallback(
+    async (data) => {
+      const emails = Array.from(
+        new Set(
+          data.emails
+            .map((emailData) => emailData.email.trim())
+            .filter((email) => email.length > 0),
+        ),
+      );
+      const result = await sendInviteLink({ variables: { emails } });
+
+      setNextOnboardingStep(OnboardingStep.InviteTeam);
+
+      if (isDefined(result.errors)) {
+        throw result.errors;
+      }
+      if (emails.length > 0) {
+        enqueueSnackBar('Invite link sent to email addresses', {
+          variant: SnackBarVariant.Success,
+          duration: 2000,
+        });
+      }
+    },
+    [enqueueSnackBar, sendInviteLink, setNextOnboardingStep],
+  );
+
+  useScopedHotkeys(
+    [Key.Enter],
+    () => {
+      handleSubmit(onSubmit)();
+    },
+    PageHotkeyScope.InviteTeam,
+    [handleSubmit],
+  );
+
+  if (currentUser?.onboardingStep !== OnboardingStep.InviteTeam) {
+    return <></>;
+  }
+
+  return (
+    <>
+      <Title noMarginTop>Invite your team</Title>
+      <SubTitle>
+        Get the most out of your workspace by inviting your team.
+      </SubTitle>
+      <StyledAnimatedContainer>
+        {fields.map((field, index) => (
+          <Controller
+            key={index}
+            name={`emails.${index}.email`}
+            control={control}
+            render={({
+              field: { onChange, onBlur, value },
+              fieldState: { error },
+            }) => (
+              <AnimatedTranslation>
+                <TextInputV2
+                  autoFocus={index === 0}
+                  type="email"
+                  value={value}
+                  placeholder={getPlaceholder(index)}
+                  onBlur={onBlur}
+                  error={error?.message}
+                  onChange={onChange}
+                  noErrorHelper
+                  fullWidth
+                />
+              </AnimatedTranslation>
+            )}
+          />
+        ))}
+        {isDefined(currentWorkspace?.inviteHash) && (
+          <>
+            <SeparatorLineText>Or</SeparatorLineText>
+            <StyledActionLinkContainer>
+              <LightButton
+                title="Copy invitation link"
+                accent="tertiary"
+                onClick={copyInviteLink}
+                Icon={IconCopy}
+              />
+            </StyledActionLinkContainer>
+          </>
+        )}
+      </StyledAnimatedContainer>
+      <StyledButtonContainer>
+        <MainButton
+          title="Finish"
+          disabled={!isValid || isSubmitting}
+          onClick={handleSubmit(onSubmit)}
+          fullWidth
+        />
+      </StyledButtonContainer>
+    </>
+  );
+};

packages/twenty-front/src/pages/onboarding/SyncEmails.tsx

@@ -1,21 +1,25 @@
 import React, { useState } from 'react';
-import { useNavigate } from 'react-router-dom';
 import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
-import { useSetRecoilState } from 'recoil';
+import { useRecoilValue } from 'recoil';
+import { Key } from 'ts-key-enum';
 import { IconGoogle } from 'twenty-ui';
 
 import { SubTitle } from '@/auth/components/SubTitle';
 import { Title } from '@/auth/components/Title';
-import { isCurrentUserLoadedState } from '@/auth/states/isCurrentUserLoadingState';
+import { currentUserState } from '@/auth/states/currentUserState';
 import { OnboardingSyncEmailsSettingsCard } from '@/onboarding/components/OnboardingSyncEmailsSettingsCard';
+import { useSetNextOnboardingStep } from '@/onboarding/hooks/useSetNextOnboardingStep';
 import { useTriggerGoogleApisOAuth } from '@/settings/accounts/hooks/useTriggerGoogleApisOAuth';
 import { AppPath } from '@/types/AppPath';
+import { PageHotkeyScope } from '@/types/PageHotkeyScope';
 import { MainButton } from '@/ui/input/button/components/MainButton';
 import { ActionLink } from '@/ui/navigation/link/components/ActionLink';
+import { useScopedHotkeys } from '@/ui/utilities/hotkey/hooks/useScopedHotkeys';
 import {
   CalendarChannelVisibility,
   MessageChannelVisibility,
+  OnboardingStep,
   useSkipSyncEmailOnboardingStepMutation,
 } from '~/generated/graphql';
 
@@ -35,9 +39,9 @@ const StyledActionLinkContainer = styled.div`
 
 export const SyncEmails = () => {
   const theme = useTheme();
-  const navigate = useNavigate();
   const { triggerGoogleApisOAuth } = useTriggerGoogleApisOAuth();
-  const setIsCurrentUserLoaded = useSetRecoilState(isCurrentUserLoadedState);
+  const setNextOnboardingStep = useSetNextOnboardingStep();
+  const currentUser = useRecoilValue(currentUserState);
   const [visibility, setVisibility] = useState<MessageChannelVisibility>(
     MessageChannelVisibility.ShareEverything,
   );
@@ -59,15 +63,25 @@ export const SyncEmails = () => {
 
   const continueWithoutSync = async () => {
     await skipSyncEmailOnboardingStepMutation();
-    setIsCurrentUserLoaded(false);
-    navigate(AppPath.Index);
+    setNextOnboardingStep(OnboardingStep.SyncEmail);
   };
 
-  const isSubmitting = false;
+  useScopedHotkeys(
+    [Key.Enter],
+    async () => {
+      await continueWithoutSync();
+    },
+    PageHotkeyScope.SyncEmail,
+    [continueWithoutSync],
+  );
+
+  if (currentUser?.onboardingStep !== OnboardingStep.SyncEmail) {
+    return <></>;
+  }
 
   return (
     <>
-      <Title withMarginTop={false}>Emails and Calendar</Title>
+      <Title noMarginTop>Emails and Calendar</Title>
       <SubTitle>
         Sync your Emails and Calendar with Twenty. Choose your privacy settings.
       </SubTitle>
@@ -82,7 +96,6 @@ export const SyncEmails = () => {
         onClick={handleButtonClick}
         width={200}
         Icon={() => <IconGoogle size={theme.icon.size.sm} />}
-        disabled={isSubmitting}
       />
       <StyledActionLinkContainer>
         <ActionLink onClick={continueWithoutSync}>

packages/twenty-front/src/pages/onboarding/__stories__/InviteTeam.stories.tsx

@@ -0,0 +1,50 @@
+import { getOperationName } from '@apollo/client/utilities';
+import { Meta, StoryObj } from '@storybook/react';
+import { within } from '@storybook/test';
+import { graphql, HttpResponse } from 'msw';
+
+import { OnboardingStep } from '~/generated/graphql';
+import { AppPath } from '~/modules/types/AppPath';
+import { GET_CURRENT_USER } from '~/modules/users/graphql/queries/getCurrentUser';
+import { InviteTeam } from '~/pages/onboarding/InviteTeam';
+import {
+  PageDecorator,
+  PageDecoratorArgs,
+} from '~/testing/decorators/PageDecorator';
+import { graphqlMocks } from '~/testing/graphqlMocks';
+import { mockedOnboardingUsersData } from '~/testing/mock-data/users';
+
+const meta: Meta<PageDecoratorArgs> = {
+  title: 'Pages/Onboarding/InviteTeam',
+  component: InviteTeam,
+  decorators: [PageDecorator],
+  args: { routePath: AppPath.InviteTeam },
+  parameters: {
+    msw: {
+      handlers: [
+        graphql.query(getOperationName(GET_CURRENT_USER) ?? '', () => {
+          return HttpResponse.json({
+            data: {
+              currentUser: {
+                ...mockedOnboardingUsersData[0],
+                onboardingStep: OnboardingStep.InviteTeam,
+              },
+            },
+          });
+        }),
+        graphqlMocks.handlers,
+      ],
+    },
+  },
+};
+
+export default meta;
+
+export type Story = StoryObj<typeof InviteTeam>;
+
+export const Default: Story = {
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    await canvas.findByText('Invite your team');
+  },
+};

packages/twenty-front/src/pages/onboarding/__stories__/SyncEmails.stories.tsx

@@ -3,6 +3,7 @@ import { Meta, StoryObj } from '@storybook/react';
 import { within } from '@storybook/test';
 import { graphql, HttpResponse } from 'msw';
 
+import { OnboardingStep } from '~/generated/graphql';
 import { AppPath } from '~/modules/types/AppPath';
 import { GET_CURRENT_USER } from '~/modules/users/graphql/queries/getCurrentUser';
 import { SyncEmails } from '~/pages/onboarding/SyncEmails';
@@ -24,7 +25,10 @@ const meta: Meta<PageDecoratorArgs> = {
         graphql.query(getOperationName(GET_CURRENT_USER) ?? '', () => {
           return HttpResponse.json({
             data: {
-              currentUser: mockedOnboardingUsersData[0],
+              currentUser: {
+                ...mockedOnboardingUsersData[0],
+                onboardingStep: OnboardingStep.SyncEmail,
+              },
             },
           });
         }),

packages/twenty-front/src/testing/mock-data/users.ts

@@ -10,7 +10,7 @@ type MockedUser = Pick<
   | 'canImpersonate'
   | '__typename'
   | 'supportUserHash'
-  | 'state'
+  | 'onboardingStep'
 > & {
   workspaceMember: WorkspaceMember | null;
   locale: string;
@@ -93,7 +93,7 @@ export const mockedUsersData: Array<MockedUser> = [
     defaultWorkspace: mockDefaultWorkspace,
     locale: 'en',
     workspaces: [{ workspace: mockDefaultWorkspace }],
-    state: { skipSyncEmailOnboardingStep: true },
+    onboardingStep: null,
   },
   {
     id: '7dfbc3f7-6e5e-4128-957e-8d86808cdf6c',
@@ -116,7 +116,7 @@ export const mockedUsersData: Array<MockedUser> = [
     defaultWorkspace: mockDefaultWorkspace,
     locale: 'en',
     workspaces: [{ workspace: mockDefaultWorkspace }],
-    state: { skipSyncEmailOnboardingStep: true },
+    onboardingStep: null,
   },
 ];
 
@@ -143,7 +143,7 @@ export const mockedOnboardingUsersData: Array<MockedUser> = [
     defaultWorkspace: mockDefaultWorkspace,
     locale: 'en',
     workspaces: [{ workspace: mockDefaultWorkspace }],
-    state: { skipSyncEmailOnboardingStep: true },
+    onboardingStep: null,
   },
   {
     id: '7dfbc3f7-6e5e-4128-957e-8d86808cdf6d',
@@ -159,6 +159,6 @@ export const mockedOnboardingUsersData: Array<MockedUser> = [
     },
     locale: 'en',
     workspaces: [{ workspace: mockDefaultWorkspace }],
-    state: { skipSyncEmailOnboardingStep: true },
+    onboardingStep: null,
   },
 ];