5078 ability to invite team members (#5750)

## Added features - update team member setting page - add a section to send invitation by email - add a new invitation email - update email font to 'Trebuchet MS' as Google Inter font is not working, we need to use a web safe font https://templates.mailchimp.com/design/typography/ ## Demo https://github.com/twentyhq/twenty/assets/29927851/c731d883-1599-4281-87e3-0671f36994ae ## Invitation Email ![image](https://github.com/twentyhq/twenty/assets/29927851/d569fc64-fa0c-4769-a3dd-1193a12b495c)
2024-06-05 16:35:14 +02:00
parent 3c4b497846
commit e9d3ed99ca
28 changed files with 608 additions and 39 deletions
--- a/packages/twenty-docs/docs/start/self-hosting/self-hosting.mdx
+++ b/packages/twenty-docs/docs/start/self-hosting/self-hosting.mdx
@ -116,9 +116,9 @@ yarn command:prod cron:messaging:message-list-fetch

  You will need to provision an [App Password](https://support.google.com/accounts/answer/185833).
  - EMAIL_SMTP_HOST=smtp.gmail.com
-  - EMAIL_SERVER_PORT=465
-  - EMAIL_SERVER_USER=gmail_email_address
-  - EMAIL_SERVER_PASSWORD='gmail_app_password'
+  - EMAIL_SMTP_PORT=465
+  - EMAIL_SMTP_USER=gmail_email_address
+  - EMAIL_SMTP_PASSWORD='gmail_app_password'

  </TabItem>

@ -126,9 +126,9 @@ yarn command:prod cron:messaging:message-list-fetch

    Keep in mind that if you have 2FA enabled, you will need to provision an [App Password](https://support.microsoft.com/en-us/account-billing/manage-app-passwords-for-two-step-verification-d6dc8c6d-4bf7-4851-ad95-6d07799387e9).
    - EMAIL_SMTP_HOST=smtp.office365.com
-    - EMAIL_SERVER_PORT=587
-    - EMAIL_SERVER_USER=office365_email_address
-    - EMAIL_SERVER_PASSWORD='office365_password'
+    - EMAIL_SMTP_PORT=587
+    - EMAIL_SMTP_USER=office365_email_address
+    - EMAIL_SMTP_PASSWORD='office365_password'

  </TabItem>

@ -138,8 +138,8 @@ yarn command:prod cron:messaging:message-list-fetch
    - Run the smtp4dev image: `docker run --rm -it -p 8090:80 -p 2525:25 rnwood/smtp4dev`
    - Access the smtp4dev ui here: [http://localhost:8090](http://localhost:8090)
    - Set the following env variables:
-      - EMAIL_SERVER_HOST=localhost
-      - EMAIL_SERVER_PORT=2525
+      - EMAIL_SMTP_HOST=localhost
+      - EMAIL_SMTP_PORT=2525

  </TabItem>

@ -218,4 +218,3 @@ yarn command:prod cron:messaging:message-list-fetch
    ['CAPTCHA_SITE_KEY', '', 'The captcha site key'],
    ['CAPTCHA_SECRET_KEY', '', 'The captcha secret key'],
 ]}></OptionTable>
-
--- a/packages/twenty-emails/src/common-style.ts
+++ b/packages/twenty-emails/src/common-style.ts
@ -27,17 +27,25 @@ export const emailTheme = {
    colors: {
      highlighted: grayScale.gray60,
      primary: grayScale.gray50,
-      tertiary: grayScale.gray40,
+      tertiary: grayScale.gray35,
      inverted: grayScale.gray0,
    },
+    family: 'Trebuchet MS', // Google Inter not working, we need to use a web safe font, see https://templates.mailchimp.com/design/typography/
    weight: {
      regular: 400,
      bold: 600,
    },
    size: {
+      sm: '12px',
      md: '13px',
      lg: '16px',
+      xl: '24px',
    },
+    lineHeight: '20px',
+  },
+  border: {
+    radius: { sm: '4px', md: '8px' },
+    color: { highlighted: grayScale.gray20 },
  },
  background: {
    colors: { highlight: grayScale.gray15 },
--- a/packages/twenty-emails/src/components/BaseHead.tsx
+++ b/packages/twenty-emails/src/components/BaseHead.tsx
@ -7,12 +7,8 @@ export const BaseHead = () => {
    <Head>
      <title>Twenty email</title>
      <Font
-        fontFamily="Inter"
+        fontFamily={emailTheme.font.family}
        fallbackFontFamily="sans-serif"
-        webFont={{
-          url: 'https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap',
-          format: 'woff2',
-        }}
        fontStyle="normal"
        fontWeight={emailTheme.font.weight.regular}
      />
--- a/packages/twenty-emails/src/components/CallToAction.tsx
+++ b/packages/twenty-emails/src/components/CallToAction.tsx
@ -6,7 +6,7 @@ import { emailTheme } from 'src/common-style';
 const callToActionStyle = {
  display: 'flex',
  padding: '8px 32px',
-  borderRadius: '8px',
+  borderRadius: emailTheme.border.radius.md,
  border: `1px solid ${emailTheme.background.transparent.light}`,
  background: emailTheme.background.radialGradient,
  boxShadow: `0px 2px 4px 0px ${emailTheme.background.transparent.light}, 0px 0px 4px 0px ${emailTheme.background.transparent.medium}`,
--- a/packages/twenty-emails/src/components/HighlightedContainer.tsx
+++ b/packages/twenty-emails/src/components/HighlightedContainer.tsx
@ -0,0 +1,33 @@
+import React, { PropsWithChildren } from 'react';
+import { Container } from '@react-email/components';
+
+import { emailTheme } from 'src/common-style';
+
+type HighlightedContainerProps = PropsWithChildren;
+
+const highlightedContainerStyle = {
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  background: emailTheme.background.colors.highlight,
+  border: `1px solid ${emailTheme.border.color.highlighted}`,
+  borderRadius: emailTheme.border.radius.md,
+  padding: '24px 48px',
+  gap: '24px',
+};
+
+const divStyle = {
+  display: 'flex',
+  flexDirection: 'column',
+  alignItems: 'center',
+} as React.CSSProperties;
+
+export const HighlightedContainer = ({
+  children,
+}: HighlightedContainerProps) => {
+  return (
+    <Container style={highlightedContainerStyle}>
+      <div style={divStyle}>{children}</div>
+    </Container>
+  );
+};
--- a/packages/twenty-emails/src/components/HighlightedText.tsx
+++ b/packages/twenty-emails/src/components/HighlightedText.tsx
@ -1,34 +1,30 @@
-import { ReactNode } from 'react';
-import { Column } from '@react-email/components';
-import { Row } from '@react-email/row';
+import React, { ReactNode } from 'react';
 import { Text } from '@react-email/text';

 import { emailTheme } from 'src/common-style';

-const rowStyle = {
-  display: 'flex',
-};
-
 const highlightedStyle = {
-  borderRadius: '4px',
+  borderRadius: emailTheme.border.radius.sm,
  background: emailTheme.background.colors.highlight,
  padding: '4px 8px',
-  margin: 0,
  fontSize: emailTheme.font.size.lg,
  fontWeight: emailTheme.font.weight.bold,
  color: emailTheme.font.colors.highlighted,
 };

+const divStyle = {
+  display: 'flex',
+};
+
 type HighlightedTextProps = {
  value: ReactNode;
+  centered?: boolean;
 };

 export const HighlightedText = ({ value }: HighlightedTextProps) => {
  return (
-    <Row style={rowStyle}>
-      <Column>
-        <Text style={highlightedStyle}>{value}</Text>
-      </Column>
-    </Row>
+    <div style={divStyle}>
+      <Text style={highlightedStyle}>{value}</Text>
+    </div>
  );
 };
--- a/packages/twenty-emails/src/components/MainText.tsx
+++ b/packages/twenty-emails/src/components/MainText.tsx
@ -4,9 +4,12 @@ import { Text } from '@react-email/text';
 import { emailTheme } from 'src/common-style';

 const mainTextStyle = {
+  fontFamily: emailTheme.font.family,
  fontSize: emailTheme.font.size.md,
  fontWeight: emailTheme.font.weight.regular,
  color: emailTheme.font.colors.primary,
+  margin: '0 0 12px 0',
+  lineHeight: emailTheme.font.lineHeight,
 };

 export const MainText = ({ children }: MainTextProps) => {
--- a/packages/twenty-emails/src/components/ShadowText.tsx
+++ b/packages/twenty-emails/src/components/ShadowText.tsx
@ -0,0 +1,16 @@
+import { PropsWithChildren as ShadowTextProps } from 'react';
+import { Text } from '@react-email/text';
+
+import { emailTheme } from 'src/common-style';
+
+const shadowTextStyle = {
+  fontSize: emailTheme.font.size.sm,
+  fontWeight: emailTheme.font.weight.regular,
+  color: emailTheme.font.colors.tertiary,
+  margin: '0 0 12px 0',
+  lineHeight: emailTheme.font.lineHeight,
+};
+
+export const ShadowText = ({ children }: ShadowTextProps) => {
+  return <Text style={shadowTextStyle}>{children}</Text>;
+};
--- a/packages/twenty-emails/src/components/SubTitle.tsx
+++ b/packages/twenty-emails/src/components/SubTitle.tsx
@ -0,0 +1,23 @@
+import { ReactNode } from 'react';
+import { Heading } from '@react-email/components';
+
+import { emailTheme } from 'src/common-style';
+
+type SubTitleProps = {
+  value: ReactNode;
+};
+
+const subTitleStyle = {
+  fontFamily: emailTheme.font.family,
+  fontSize: emailTheme.font.size.lg,
+  fontWeight: emailTheme.font.weight.bold,
+  color: emailTheme.font.colors.highlighted,
+};
+
+export const SubTitle = ({ value }: SubTitleProps) => {
+  return (
+    <Heading style={subTitleStyle} as="h3">
+      {value}
+    </Heading>
+  );
+};
--- a/packages/twenty-emails/src/components/Title.tsx
+++ b/packages/twenty-emails/src/components/Title.tsx
@ -1,10 +1,23 @@
 import { ReactNode } from 'react';
 import { Heading } from '@react-email/components';

+import { emailTheme } from 'src/common-style';
+
 type TitleProps = {
  value: ReactNode;
 };

-export const Title = ({ value }: TitleProps) => {
-  return <Heading as="h1">{value}</Heading>;
+const titleStyle = {
+  fontFamily: emailTheme.font.family,
+  fontSize: emailTheme.font.size.xl,
+  fontWeight: emailTheme.font.weight.bold,
+  color: emailTheme.font.colors.highlighted,
+};
+
+export const Title = ({ value }: TitleProps) => {
+  return (
+    <Heading style={titleStyle} as="h1">
+      {value}
+    </Heading>
+  );
 };
--- a/packages/twenty-emails/src/components/WhatIsTwenty.tsx
+++ b/packages/twenty-emails/src/components/WhatIsTwenty.tsx
@ -0,0 +1,47 @@
+import { Column, Row } from '@react-email/components';
+
+import { Link } from 'src/components/Link';
+import { MainText } from 'src/components/MainText';
+import { ShadowText } from 'src/components/ShadowText';
+import { SubTitle } from 'src/components/SubTitle';
+
+export const WhatIsTwenty = () => {
+  return (
+    <>
+      <SubTitle value="What is Twenty?" />
+      <MainText>
+        A software to help businesses manage their customer data and
+        relationships efficiently.
+      </MainText>
+      <Row>
+        <Column>
+          <ShadowText>
+            <Link href="https://twenty.com/" value="Website" />
+          </ShadowText>
+        </Column>
+        <Column>
+          <ShadowText>
+            <Link href="https://github.com/twentyhq/twenty" value="Github" />
+          </ShadowText>
+        </Column>
+        <Column>
+          <ShadowText>
+            <Link href="https://twenty.com/user-guide" value="User guide" />
+          </ShadowText>
+        </Column>
+        <Column>
+          <ShadowText>
+            <Link href="https://docs.twenty.com/" value="Developers" />
+          </ShadowText>
+        </Column>
+      </Row>
+      <ShadowText>
+        Twenty.com Public Benefit Corporation
+        <br />
+        2261 Market Street #5275
+        <br />
+        San Francisco, CA 94114
+      </ShadowText>
+    </>
+  );
+};
--- a/packages/twenty-emails/src/emails/send-invite-link.email.tsx
+++ b/packages/twenty-emails/src/emails/send-invite-link.email.tsx
@ -0,0 +1,44 @@
+import { Img } from '@react-email/components';
+
+import { BaseEmail } from 'src/components/BaseEmail';
+import { CallToAction } from 'src/components/CallToAction';
+import { HighlightedContainer } from 'src/components/HighlightedContainer';
+import { HighlightedText } from 'src/components/HighlightedText';
+import { Link } from 'src/components/Link';
+import { MainText } from 'src/components/MainText';
+import { Title } from 'src/components/Title';
+import { WhatIsTwenty } from 'src/components/WhatIsTwenty';
+import { capitalize } from 'src/utils/capitalize';
+
+type SendInviteLinkEmailProps = {
+  link: string;
+  workspace: { name: string | undefined; logo: string | undefined };
+  sender: {
+    email: string;
+    firstName: string;
+  };
+};
+
+export const SendInviteLinkEmail = ({
+  link,
+  workspace,
+  sender,
+}: SendInviteLinkEmailProps) => {
+  return (
+    <BaseEmail width={333}>
+      <Title value="Join your team on Twenty" />
+      <MainText>
+        {capitalize(sender.firstName)} (
+        <Link href={sender.email} value={sender.email} />) has invited you to
+        join a workspace called <b>{workspace.name}</b>
+        <br />
+      </MainText>
+      <HighlightedContainer>
+        {workspace.logo && <Img src={workspace.logo} width={40} height={40} />}
+        {workspace.name && <HighlightedText value={workspace.name} />}
+        <CallToAction href={link} value="Accept invite" />
+      </HighlightedContainer>
+      <WhatIsTwenty />
+    </BaseEmail>
+  );
+};
--- a/packages/twenty-emails/src/index.ts
+++ b/packages/twenty-emails/src/index.ts
@ -2,3 +2,4 @@ export * from './emails/clean-inactive-workspaces.email';
 export * from './emails/delete-inactive-workspaces.email';
 export * from './emails/password-reset-link.email';
 export * from './emails/password-update-notify.email';
+export * from './emails/send-invite-link.email';
--- a/packages/twenty-emails/src/utils/capitalize.ts
+++ b/packages/twenty-emails/src/utils/capitalize.ts
@ -0,0 +1,7 @@
+import { isNonEmptyString } from '@sniptt/guards';
+
+export const capitalize = (stringToCapitalize: string) => {
+  if (!isNonEmptyString(stringToCapitalize)) return '';
+
+  return stringToCapitalize[0].toUpperCase() + stringToCapitalize.slice(1);
+};
--- a/packages/twenty-front/src/generated-metadata/graphql.ts
+++ b/packages/twenty-front/src/generated-metadata/graphql.ts
@ -139,6 +139,7 @@ export type ClientConfig = {
  authProviders: AuthProviders;
  billing: Billing;
  captcha: Captcha;
+  chromeExtensionId?: Maybe<Scalars['String']['output']>;
  debugMode: Scalars['Boolean']['output'];
  sentry: Sentry;
  signInPrefilled: Scalars['Boolean']['output'];
@ -391,6 +392,7 @@ export type Mutation = {
  generateTransientToken: TransientToken;
  impersonate: Verify;
  renewToken: AuthTokens;
+  sendInviteLink: SendInviteLink;
  signUp: LoginToken;
  syncRemoteTable: RemoteTable;
  syncRemoteTableSchemaChanges: RemoteTable;
@ -518,6 +520,11 @@ export type MutationRenewTokenArgs = {
 };


+export type MutationSendInviteLinkArgs = {
+  emails: Array<Scalars['String']['input']>;
+};
+
+
 export type MutationSignUpArgs = {
  captchaToken?: InputMaybe<Scalars['String']['input']>;
  email: Scalars['String']['input'];
@ -849,6 +856,12 @@ export enum RemoteTableStatus {
  Synced = 'SYNCED'
 }

+export type SendInviteLink = {
+  __typename?: 'SendInviteLink';
+  /** Boolean that confirms query was dispatched */
+  success: Scalars['Boolean']['output'];
+};
+
 export type Sentry = {
  __typename?: 'Sentry';
  dsn?: Maybe<Scalars['String']['output']>;
--- a/packages/twenty-front/src/generated/graphql.tsx
+++ b/packages/twenty-front/src/generated/graphql.tsx
@ -285,6 +285,7 @@ export type Mutation = {
  generateTransientToken: TransientToken;
  impersonate: Verify;
  renewToken: AuthTokens;
+  sendInviteLink: SendInviteLink;
  signUp: LoginToken;
  track: Analytics;
  updateBillingSubscription: UpdateBillingEntity;
@ -367,6 +368,11 @@ export type MutationRenewTokenArgs = {
 };


+export type MutationSendInviteLinkArgs = {
+  emails: Array<Scalars['String']>;
+};
+
+
 export type MutationSignUpArgs = {
  captchaToken?: InputMaybe<Scalars['String']>;
  email: Scalars['String'];
@ -584,6 +590,7 @@ export type RemoteServer = {
  foreignDataWrapperOptions?: Maybe<Scalars['JSON']>;
  foreignDataWrapperType: Scalars['String'];
  id: Scalars['ID'];
+  label: Scalars['String'];
  schema?: Maybe<Scalars['String']>;
  updatedAt: Scalars['DateTime'];
  userMappingOptions?: Maybe<UserMappingOptionsUser>;
@ -604,6 +611,12 @@ export enum RemoteTableStatus {
  Synced = 'SYNCED'
 }

+export type SendInviteLink = {
+  __typename?: 'SendInviteLink';
+  /** Boolean that confirms query was dispatched */
+  success: Scalars['Boolean'];
+};
+
 export type Sentry = {
  __typename?: 'Sentry';
  dsn?: Maybe<Scalars['String']>;
@ -1227,6 +1240,13 @@ export type DeleteCurrentWorkspaceMutationVariables = Exact<{ [key: string]: nev

 export type DeleteCurrentWorkspaceMutation = { __typename?: 'Mutation', deleteCurrentWorkspace: { __typename?: 'Workspace', id: any } };

+export type SendInviteLinkMutationVariables = Exact<{
+  emails: Array<Scalars['String']> | Scalars['String'];
+}>;
+
+
+export type SendInviteLinkMutation = { __typename?: 'Mutation', sendInviteLink: { __typename?: 'SendInviteLink', success: boolean } };
+
 export type UpdateWorkspaceMutationVariables = Exact<{
  input: UpdateWorkspaceInput;
 }>;
@ -2579,6 +2599,39 @@ export function useDeleteCurrentWorkspaceMutation(baseOptions?: Apollo.MutationH
 export type DeleteCurrentWorkspaceMutationHookResult = ReturnType<typeof useDeleteCurrentWorkspaceMutation>;
 export type DeleteCurrentWorkspaceMutationResult = Apollo.MutationResult<DeleteCurrentWorkspaceMutation>;
 export type DeleteCurrentWorkspaceMutationOptions = Apollo.BaseMutationOptions<DeleteCurrentWorkspaceMutation, DeleteCurrentWorkspaceMutationVariables>;
+export const SendInviteLinkDocument = gql`
+    mutation SendInviteLink($emails: [String!]!) {
+  sendInviteLink(emails: $emails) {
+    success
+  }
+}
+    `;
+export type SendInviteLinkMutationFn = Apollo.MutationFunction<SendInviteLinkMutation, SendInviteLinkMutationVariables>;
+
+/**
+ * __useSendInviteLinkMutation__
+ *
+ * To run a mutation, you first call `useSendInviteLinkMutation` within a React component and pass it any options that fit your needs.
+ * When your component renders, `useSendInviteLinkMutation` returns a tuple that includes:
+ * - A mutate function that you can call at any time to execute the mutation
+ * - An object with fields that represent the current status of the mutation's execution
+ *
+ * @param baseOptions options that will be passed into the mutation, supported options are listed on: https://www.apollographql.com/docs/react/api/react-hooks/#options-2;
+ *
+ * @example
+ * const [sendInviteLinkMutation, { data, loading, error }] = useSendInviteLinkMutation({
+ *   variables: {
+ *      emails: // value for 'emails'
+ *   },
+ * });
+ */
+export function useSendInviteLinkMutation(baseOptions?: Apollo.MutationHookOptions<SendInviteLinkMutation, SendInviteLinkMutationVariables>) {
+        const options = {...defaultOptions, ...baseOptions}
+        return Apollo.useMutation<SendInviteLinkMutation, SendInviteLinkMutationVariables>(SendInviteLinkDocument, options);
+      }
+export type SendInviteLinkMutationHookResult = ReturnType<typeof useSendInviteLinkMutation>;
+export type SendInviteLinkMutationResult = Apollo.MutationResult<SendInviteLinkMutation>;
+export type SendInviteLinkMutationOptions = Apollo.BaseMutationOptions<SendInviteLinkMutation, SendInviteLinkMutationVariables>;
 export const UpdateWorkspaceDocument = gql`
    mutation UpdateWorkspace($input: UpdateWorkspaceInput!) {
  updateWorkspace(data: $input) {
--- a/packages/twenty-front/src/modules/ui/input/components/TextInputV2.tsx
+++ b/packages/twenty-front/src/modules/ui/input/components/TextInputV2.tsx
@ -34,12 +34,17 @@ const StyledInputContainer = styled.div`
  width: 100%;
 `;

-const StyledInput = styled.input<Pick<TextInputV2ComponentProps, 'fullWidth'>>`
+const StyledInput = styled.input<
+  Pick<TextInputV2ComponentProps, 'fullWidth' | 'LeftIcon'>
+>`
  background-color: ${({ theme }) => theme.background.transparent.lighter};
  border: 1px solid ${({ theme }) => theme.border.color.medium};
-  border-bottom-left-radius: ${({ theme }) => theme.border.radius.sm};
+  border-bottom-left-radius: ${({ theme, LeftIcon }) =>
+    !LeftIcon && theme.border.radius.sm};
  border-right: none;
-  border-top-left-radius: ${({ theme }) => theme.border.radius.sm};
+  border-left: ${({ LeftIcon }) => LeftIcon && 'none'};
+  border-top-left-radius: ${({ theme, LeftIcon }) =>
+    !LeftIcon && theme.border.radius.sm};
  box-sizing: border-box;
  color: ${({ theme }) => theme.font.color.primary};
  display: flex;
@ -69,6 +74,18 @@ const StyledErrorHelper = styled.div`
  padding: ${({ theme }) => theme.spacing(1)};
 `;

+const StyledLeftIconContainer = styled.div`
+  align-items: center;
+  background-color: ${({ theme }) => theme.background.transparent.lighter};
+  border: 1px solid ${({ theme }) => theme.border.color.medium};
+  border-bottom-left-radius: ${({ theme }) => theme.border.radius.sm};
+  border-right: none;
+  border-top-left-radius: ${({ theme }) => theme.border.radius.sm};
+  display: flex;
+  justify-content: center;
+  padding-left: ${({ theme }) => theme.spacing(2)};
+`;
+
 const StyledTrailingIconContainer = styled.div`
  align-items: center;
  background-color: ${({ theme }) => theme.background.transparent.lighter};
@ -101,6 +118,7 @@ export type TextInputV2ComponentProps = Omit<
  fullWidth?: boolean;
  error?: string;
  RightIcon?: IconComponent;
+  LeftIcon?: IconComponent;
  onKeyDown?: (event: React.KeyboardEvent<HTMLInputElement>) => void;
  onBlur?: FocusEventHandler<HTMLInputElement>;
 };
@ -123,6 +141,7 @@ const TextInputV2Component = (
    disabled,
    tabIndex,
    RightIcon,
+    LeftIcon,
    autoComplete,
  }: TextInputV2ComponentProps,
  // eslint-disable-next-line @nx/workspace-component-props-naming
@ -143,6 +162,13 @@ const TextInputV2Component = (
    <StyledContainer className={className} fullWidth={fullWidth ?? false}>
      {label && <StyledLabel>{label + (required ? '*' : '')}</StyledLabel>}
      <StyledInputContainer>
+        {!!LeftIcon && (
+          <StyledLeftIconContainer>
+            <StyledTrailingIcon>
+              <LeftIcon size={theme.icon.size.md} />
+            </StyledTrailingIcon>
+          </StyledLeftIconContainer>
+        )}
        <StyledInput
          autoComplete={autoComplete || 'off'}
          ref={combinedRef}
@ -154,7 +180,7 @@ const TextInputV2Component = (
            onChange?.(event.target.value);
          }}
          onKeyDown={onKeyDown}
-          {...{ autoFocus, disabled, placeholder, required, value }}
+          {...{ autoFocus, disabled, placeholder, required, value, LeftIcon }}
        />
        <StyledTrailingIconContainer>
          {error && (
--- a/packages/twenty-front/src/modules/workspace/components/WorkspaceInviteTeam.tsx
+++ b/packages/twenty-front/src/modules/workspace/components/WorkspaceInviteTeam.tsx
@ -0,0 +1,143 @@
+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 { 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 { useSendInviteLinkMutation } from '~/generated/graphql';
+import { isDefined } from '~/utils/isDefined';
+
+const StyledContainer = styled.div`
+  display: flex;
+  flex-direction: row;
+`;
+
+const StyledLinkContainer = styled.div`
+  flex: 1;
+  margin-right: ${({ theme }) => theme.spacing(2)};
+`;
+
+const emailValidationSchema = (email: string) =>
+  z.string().email(`Invalid email '${email}'`);
+
+const validationSchema = () =>
+  z
+    .object({
+      emails: z.string().superRefine((value, ctx) => {
+        if (!value.length) {
+          return;
+        }
+        const emails = extractEmailsList(value);
+        if (emails.length === 0) {
+          ctx.addIssue({
+            code: z.ZodIssueCode.invalid_string,
+            message: 'Emails should not be empty',
+            validation: 'email',
+          });
+        }
+        const invalidEmails: string[] = [];
+        for (const email of emails) {
+          const result = emailValidationSchema(email).safeParse(email);
+          if (!result.success) {
+            invalidEmails.push(email);
+          }
+        }
+        if (invalidEmails.length > 0) {
+          ctx.addIssue({
+            code: z.ZodIssueCode.invalid_string,
+            message:
+              invalidEmails.length > 1
+                ? 'Emails "' + invalidEmails.join('", "') + '" are invalid'
+                : 'Email "' + invalidEmails.join('", "') + '" is invalid',
+            validation: 'email',
+          });
+        }
+      }),
+    })
+    .required();
+
+type FormInput = {
+  emails: string;
+};
+
+export const WorkspaceInviteTeam = () => {
+  const theme = useTheme();
+  const { enqueueSnackBar } = useSnackBar();
+  const [sendInviteLink] = useSendInviteLinkMutation();
+
+  const { reset, handleSubmit, control, formState } = useForm<FormInput>({
+    mode: 'onSubmit',
+    resolver: zodResolver(validationSchema()),
+    defaultValues: {
+      emails: '',
+    },
+  });
+
+  const submit = handleSubmit(async (data) => {
+    const emailsList = extractEmailsList(data.emails);
+    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,
+    });
+  });
+
+  const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
+    if (e.key === Key.Enter) {
+      submit();
+    }
+  };
+
+  const { isSubmitSuccessful } = formState;
+
+  useEffect(() => {
+    if (isSubmitSuccessful) {
+      reset();
+    }
+  }, [isSubmitSuccessful, reset]);
+
+  return (
+    <form onSubmit={submit}>
+      <StyledContainer>
+        <StyledLinkContainer>
+          <Controller
+            name="emails"
+            control={control}
+            render={({ field: { value, onChange }, fieldState: { error } }) => {
+              return (
+                <TextInput
+                  placeholder="tim@apple.com, jony.ive@apple.dev"
+                  LeftIcon={IconMail}
+                  value={value}
+                  onChange={onChange}
+                  error={error?.message}
+                  onKeyDown={handleKeyDown}
+                  fullWidth
+                />
+              );
+            }}
+          />
+        </StyledLinkContainer>
+        <Button
+          Icon={IconSend}
+          variant="primary"
+          accent="blue"
+          title="Invite"
+          type="submit"
+        />
+      </StyledContainer>
+    </form>
+  );
+};
--- a/packages/twenty-front/src/modules/workspace/graphql/mutations/sendInviteLink.ts
+++ b/packages/twenty-front/src/modules/workspace/graphql/mutations/sendInviteLink.ts
@ -0,0 +1,9 @@
+import { gql } from '@apollo/client';
+
+export const SEND_INVITE_LINK = gql`
+  mutation SendInviteLink($emails: [String!]!) {
+    sendInviteLink(emails: $emails) {
+      success
+    }
+  }
+`;
--- a/packages/twenty-front/src/modules/workspace/utils/tests/extractEmailList.test.ts
+++ b/packages/twenty-front/src/modules/workspace/utils/tests/extractEmailList.test.ts
@ -0,0 +1,28 @@
+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']);
+  });
+});
--- a/packages/twenty-front/src/modules/workspace/utils/extractEmailList.ts
+++ b/packages/twenty-front/src/modules/workspace/utils/extractEmailList.ts
@ -0,0 +1,10 @@
+export const extractEmailsList = (emails: string) => {
+  return Array.from(
+    new Set(
+      emails
+        .split(',')
+        .map((email) => email.trim())
+        .filter((email) => email.length > 0),
+    ),
+  );
+};
--- a/packages/twenty-front/src/pages/settings/SettingsWorkspaceMembers.tsx
+++ b/packages/twenty-front/src/pages/settings/SettingsWorkspaceMembers.tsx
@ -14,6 +14,7 @@ import { ConfirmationModal } from '@/ui/layout/modal/components/ConfirmationModa
 import { SubMenuTopBarContainer } from '@/ui/layout/page/SubMenuTopBarContainer';
 import { Section } from '@/ui/layout/section/components/Section';
 import { WorkspaceInviteLink } from '@/workspace/components/WorkspaceInviteLink';
+import { WorkspaceInviteTeam } from '@/workspace/components/WorkspaceInviteTeam';
 import { WorkspaceMemberCard } from '@/workspace/components/WorkspaceMemberCard';
 import { WorkspaceMember } from '@/workspace-member/types/WorkspaceMember';

@ -52,11 +53,18 @@ export const SettingsWorkspaceMembers = () => {
    <SubMenuTopBarContainer Icon={IconSettings} title="Settings">
      <SettingsPageContainer>
        <StyledH1Title title="Members" />
+        <Section>
+          <H2Title
+            title="Invite by email"
+            description="Send an invite email to your team"
+          />
+          <WorkspaceInviteTeam />
+        </Section>
        {currentWorkspace?.inviteHash && (
          <Section>
            <H2Title
-              title="Invite"
-              description="Send an invitation to use Twenty"
+              title="Or send an invite link"
+              description="Copy and send an invite link directly"
            />
            <WorkspaceInviteLink
              inviteLink={`${window.location.origin}/invite/${currentWorkspace?.inviteHash}`}
--- a/packages/twenty-server/.env.example
+++ b/packages/twenty-server/.env.example
@ -55,7 +55,7 @@ SIGN_IN_PREFILLED=true
 # SERVER_URL=http://localhost:3000
 # WORKSPACE_INACTIVE_DAYS_BEFORE_NOTIFICATION=30
 # WORKSPACE_INACTIVE_DAYS_BEFORE_DELETION=60
-# Email Server Settings, see this doc for more info: https://docs.twenty.com/start/self-hosting/environment-variables
+# Email Server Settings, see this doc for more info: https://docs.twenty.com/start/self-hosting/#email
 # EMAIL_FROM_ADDRESS=contact@yourdomain.com
 # EMAIL_SYSTEM_ADDRESS=system@yourdomain.com
 # EMAIL_FROM_NAME='John from YourDomain'
--- a/packages/twenty-server/src/engine/core-modules/workspace/dtos/send-invite-link.entity.ts
+++ b/packages/twenty-server/src/engine/core-modules/workspace/dtos/send-invite-link.entity.ts
@ -0,0 +1,9 @@
+import { Field, ObjectType } from '@nestjs/graphql';
+
+@ObjectType()
+export class SendInviteLink {
+  @Field(() => Boolean, {
+    description: 'Boolean that confirms query was dispatched',
+  })
+  success: boolean;
+}
--- a/packages/twenty-server/src/engine/core-modules/workspace/dtos/send-invite-link.input.ts
+++ b/packages/twenty-server/src/engine/core-modules/workspace/dtos/send-invite-link.input.ts
@ -0,0 +1,12 @@
+import { ArgsType, Field } from '@nestjs/graphql';
+
+import { ArrayNotEmpty, IsArray, IsEmail } from 'class-validator';
+
+@ArgsType()
+export class SendInviteLinkInput {
+  @Field(() => [String])
+  @IsArray()
+  @ArrayNotEmpty()
+  @IsEmail({}, { each: true })
+  emails: string[];
+}
--- a/packages/twenty-server/src/engine/core-modules/workspace/services/workspace.service.spec.ts
+++ b/packages/twenty-server/src/engine/core-modules/workspace/services/workspace.service.spec.ts
@ -8,6 +8,8 @@ import { User } from 'src/engine/core-modules/user/user.entity';
 import { BillingService } from 'src/engine/core-modules/billing/billing.service';
 import { UserWorkspaceService } from 'src/engine/core-modules/user-workspace/user-workspace.service';
 import { UserService } from 'src/engine/core-modules/user/services/user.service';
+import { EmailService } from 'src/engine/integrations/email/email.service';
+import { EnvironmentService } from 'src/engine/integrations/environment/environment.service';

 import { WorkspaceService } from './workspace.service';

@ -46,6 +48,14 @@ describe('WorkspaceService', () => {
          provide: BillingService,
          useValue: {},
        },
+        {
+          provide: EmailService,
+          useValue: {},
+        },
+        {
+          provide: EnvironmentService,
+          useValue: {},
+        },
      ],
    }).compile();

--- a/packages/twenty-server/src/engine/core-modules/workspace/services/workspace.service.ts
+++ b/packages/twenty-server/src/engine/core-modules/workspace/services/workspace.service.ts
@ -5,6 +5,8 @@ import assert from 'assert';

 import { TypeOrmQueryService } from '@ptc-org/nestjs-query-typeorm';
 import { Repository } from 'typeorm';
+import { SendInviteLinkEmail } from 'twenty-emails';
+import { render } from '@react-email/render';

 import { WorkspaceManagerService } from 'src/engine/workspace-manager/workspace-manager.service';
 import { Workspace } from 'src/engine/core-modules/workspace/workspace.entity';
@ -13,6 +15,9 @@ import { ActivateWorkspaceInput } from 'src/engine/core-modules/workspace/dtos/a
 import { UserWorkspace } from 'src/engine/core-modules/user-workspace/user-workspace.entity';
 import { UserWorkspaceService } from 'src/engine/core-modules/user-workspace/user-workspace.service';
 import { BillingService } from 'src/engine/core-modules/billing/billing.service';
+import { SendInviteLink } from 'src/engine/core-modules/workspace/dtos/send-invite-link.entity';
+import { EmailService } from 'src/engine/integrations/email/email.service';
+import { EnvironmentService } from 'src/engine/integrations/environment/environment.service';

 export class WorkspaceService extends TypeOrmQueryService<Workspace> {
  constructor(
@ -25,6 +30,8 @@ export class WorkspaceService extends TypeOrmQueryService<Workspace> {
    private readonly workspaceManagerService: WorkspaceManagerService,
    private readonly userWorkspaceService: UserWorkspaceService,
    private readonly billingService: BillingService,
+    private readonly environmentService: EnvironmentService,
+    private readonly emailService: EmailService,
  ) {
    super(workspaceRepository);
  }
@ -92,6 +99,46 @@ export class WorkspaceService extends TypeOrmQueryService<Workspace> {
    await this.reassignOrRemoveUserDefaultWorkspace(workspaceId, userId);
  }

+  async sendInviteLink(
+    emails: string[],
+    workspace: Workspace,
+    sender: User,
+  ): Promise<SendInviteLink> {
+    if (!workspace?.inviteHash) {
+      return { success: false };
+    }
+    const frontBaseURL = this.environmentService.get('FRONT_BASE_URL');
+    const inviteLink = `${frontBaseURL}/invite/${workspace.inviteHash}`;
+
+    for (const email of emails) {
+      const emailData = {
+        link: inviteLink,
+        workspace: { name: workspace.displayName, logo: workspace.logo },
+        sender: { email: sender.email, firstName: sender.firstName },
+      };
+      const emailTemplate = SendInviteLinkEmail(emailData);
+      const html = render(emailTemplate, {
+        pretty: true,
+      });
+
+      const text = render(emailTemplate, {
+        plainText: true,
+      });
+
+      await this.emailService.send({
+        from: `${this.environmentService.get(
+          'EMAIL_FROM_NAME',
+        )} <${this.environmentService.get('EMAIL_FROM_ADDRESS')}>`,
+        to: email,
+        subject: 'Join your team on Twenty',
+        text,
+        html,
+      });
+    }
+
+    return { success: true };
+  }
+
  private async reassignOrRemoveUserDefaultWorkspace(
    workspaceId: string,
    userId: string,
--- a/packages/twenty-server/src/engine/core-modules/workspace/workspace.resolver.ts
+++ b/packages/twenty-server/src/engine/core-modules/workspace/workspace.resolver.ts
@ -25,6 +25,8 @@ import { BillingSubscription } from 'src/engine/core-modules/billing/entities/bi
 import { BillingService } from 'src/engine/core-modules/billing/billing.service';
 import { DemoEnvGuard } from 'src/engine/guards/demo.env.guard';
 import { WorkspaceCacheVersionService } from 'src/engine/metadata-modules/workspace-cache-version/workspace-cache-version.service';
+import { SendInviteLink } from 'src/engine/core-modules/workspace/dtos/send-invite-link.entity';
+import { SendInviteLinkInput } from 'src/engine/core-modules/workspace/dtos/send-invite-link.input';

 import { Workspace } from './workspace.entity';

@ -122,4 +124,17 @@ export class WorkspaceResolver {
      workspaceId: workspace.id,
    });
  }
+
+  @Mutation(() => SendInviteLink)
+  async sendInviteLink(
+    @Args() sendInviteLinkInput: SendInviteLinkInput,
+    @AuthUser() user: User,
+    @AuthWorkspace() workspace: Workspace,
+  ): Promise<SendInviteLink> {
+    return await this.workspaceService.sendInviteLink(
+      sendInviteLinkInput.emails,
+      workspace,
+      user,
+    );
+  }
 }