Email translation and snackbar translation (#10395)

This pull request focuses on improving localization by replacing
hardcoded strings with translatable strings using the `Trans` component
from `@lingui/react/macro`. Additionally, it introduces locale support
to several email components. Here are the most important changes:

### Localization Improvements:

* Replaced hardcoded strings with `Trans` components in various email
templates to support localization.
(`packages/twenty-emails/src/emails/clean-suspended-workspace.email.tsx`,
`packages/twenty-emails/src/emails/password-reset-link.email.tsx`,
`packages/twenty-emails/src/emails/password-update-notify.email.tsx`,
`packages/twenty-emails/src/emails/send-email-verification-link.email.tsx`,
`packages/twenty-emails/src/emails/send-invite-link.email.tsx`,
`packages/twenty-emails/src/emails/warn-suspended-workspace.email.tsx`)
[[1]](diffhunk://#diff-ca227a03c0aa66428daff938c743435e8a4dc3ffa960c0952f2697a23e280fdbR6-R25)
[[2]](diffhunk://#diff-ca227a03c0aa66428daff938c743435e8a4dc3ffa960c0952f2697a23e280fdbL42-R45)
[[3]](diffhunk://#diff-523cd37f5680ce418450946f62b7804b6586158efb190ced73920ef0fdf96bc8L1)
[[4]](diffhunk://#diff-523cd37f5680ce418450946f62b7804b6586158efb190ced73920ef0fdf96bc8L23-R23)
[[5]](diffhunk://#diff-cf16aa55d3eeb6be606bbe93de4c83b6f146c49b60d6f512d4b87e49fe14338cL29-R29)
[[6]](diffhunk://#diff-cf16aa55d3eeb6be606bbe93de4c83b6f146c49b60d6f512d4b87e49fe14338cL46-R46)
[[7]](diffhunk://#diff-16b613160f937563ec108176f595d8f275a1d87a5b8245d84df60d775f3efebeL1)
[[8]](diffhunk://#diff-16b613160f937563ec108176f595d8f275a1d87a5b8245d84df60d775f3efebeL22-R22)
[[9]](diffhunk://#diff-0da62e7cc5cfcb32cc25f067fa1d50123047c239af210398f065455ab6700886L1)
[[10]](diffhunk://#diff-0da62e7cc5cfcb32cc25f067fa1d50123047c239af210398f065455ab6700886L42-R41)
[[11]](diffhunk://#diff-0da62e7cc5cfcb32cc25f067fa1d50123047c239af210398f065455ab6700886L57-R56)
[[12]](diffhunk://#diff-483346065c074946a43c18492334bd680422a1d4cb994dc8c3cd39d0208e6016L1-R21)
[[13]](diffhunk://#diff-483346065c074946a43c18492334bd680422a1d4cb994dc8c3cd39d0208e6016L28-R31)
[[14]](diffhunk://#diff-483346065c074946a43c18492334bd680422a1d4cb994dc8c3cd39d0208e6016L53-R55)

### Locale Support:

* Added `locale` prop to email components to dynamically set the locale.
(`packages/twenty-emails/src/emails/clean-suspended-workspace.email.tsx`,
`packages/twenty-emails/src/emails/warn-suspended-workspace.email.tsx`)
[[1]](diffhunk://#diff-ca227a03c0aa66428daff938c743435e8a4dc3ffa960c0952f2697a23e280fdbR6-R25)
[[2]](diffhunk://#diff-483346065c074946a43c18492334bd680422a1d4cb994dc8c3cd39d0208e6016L1-R21)

### SnackBar Messages:

* Replaced hardcoded SnackBar messages with translatable strings using
the `t` function from `@lingui/react/macro`.
(`packages/twenty-front/src/modules/auth/components/VerifyEmailEffect.tsx`,
`packages/twenty-front/src/modules/auth/hooks/useVerifyLogin.ts`,
`packages/twenty-front/src/modules/auth/sign-in-up/hooks/useHandleResendEmailVerificationToken.ts`,
`packages/twenty-front/src/modules/auth/sign-in-up/hooks/useHandleResetPassword.ts`,
`packages/twenty-front/src/modules/object-record/record-field/components/LightCopyIconButton.tsx`,
`packages/twenty-front/src/modules/object-record/record-field/meta-types/display/components/PhonesFieldDisplay.tsx`)
[[1]](diffhunk://#diff-551f2f94eacd8856d22bab7e63dd3ad693f87e9fa9b289864802ebc387f72b42R7)
[[2]](diffhunk://#diff-551f2f94eacd8856d22bab7e63dd3ad693f87e9fa9b289864802ebc387f72b42L24-R29)
[[3]](diffhunk://#diff-551f2f94eacd8856d22bab7e63dd3ad693f87e9fa9b289864802ebc387f72b42L43-R51)
[[4]](diffhunk://#diff-428199461992a01325159f5fbf826d845f05f3361279eccd3f1ce416e0114845R7-R15)
[[5]](diffhunk://#diff-428199461992a01325159f5fbf826d845f05f3361279eccd3f1ce416e0114845L24-R26)
[[6]](diffhunk://#diff-cde42d6abfed63e52c2bda09d537a6577148d0baf957fde75ceaa8657ed58403R5)
[[7]](diffhunk://#diff-cde42d6abfed63e52c2bda09d537a6577148d0baf957fde75ceaa8657ed58403L16-R17)
[[8]](diffhunk://#diff-cde42d6abfed63e52c2bda09d537a6577148d0baf957fde75ceaa8657ed58403L28-R33)
[[9]](diffhunk://#diff-9332c1988864863f12516c2fb77e814af60bedb37c36ffa094f49afc335d5457R5-R17)
[[10]](diffhunk://#diff-9332c1988864863f12516c2fb77e814af60bedb37c36ffa094f49afc335d5457L27-R33)
[[11]](diffhunk://#diff-9332c1988864863f12516c2fb77e814af60bedb37c36ffa094f49afc335d5457L42-R44)
[[12]](diffhunk://#diff-8d64afa825b47ab71d18e3e284408e2097f5fd2365eae84d9d25d3568c48e49cR7)
[[13]](diffhunk://#diff-8d64afa825b47ab71d18e3e284408e2097f5fd2365eae84d9d25d3568c48e49cR20-R28)
[[14]](diffhunk://#diff-6e4361ded2b5656afaeb1befa8b1d23a45b490a1118550da290e27cdb8ebcdceR6)
[[15]](diffhunk://#diff-6e4361ded2b5656afaeb1befa8b1d23a45b490a1118550da290e27cdb8ebcdceR19-R20)
[[16]](diffhunk://#diff-6e4361ded2b5656afaeb1befa8b1d23a45b490a1118550da290e27cdb8ebcdceL29-R38)

packages/twenty-emails/src/emails/clean-suspended-workspace.email.tsx

@@ -3,25 +3,30 @@ import { BaseEmail } from 'src/components/BaseEmail';
 import { CallToAction } from 'src/components/CallToAction';
 import { MainText } from 'src/components/MainText';
 import { Title } from 'src/components/Title';
+import { APP_LOCALES } from 'twenty-shared';
 
 type CleanSuspendedWorkspaceEmailProps = {
   daysSinceInactive: number;
   userName: string;
   workspaceDisplayName: string | undefined;
+  locale: keyof typeof APP_LOCALES;
 };
 
 export const CleanSuspendedWorkspaceEmail = ({
   daysSinceInactive,
   userName,
   workspaceDisplayName,
+  locale,
 }: CleanSuspendedWorkspaceEmailProps) => {
-  const helloString = userName?.length > 1 ? `Hello ${userName}` : 'Hello';
-
   return (
-    <BaseEmail width={333} locale="en">
+    <BaseEmail width={333} locale={locale}>
-      <Title value="Deleted Workspace 🥺" />
+      <Title value={<Trans>Deleted Workspace</Trans>} />
       <MainText>
-        {helloString},
+        {userName?.length > 1 ? (
+          <Trans>Dear {userName},</Trans>
+        ) : (
+          <Trans>Hello,</Trans>
+        )}
         <br />
         <br />
         <Trans>
@@ -39,7 +44,7 @@ export const CleanSuspendedWorkspaceEmail = ({
       </MainText>
       <CallToAction
         href="https://app.twenty.com/"
-        value="Create a new workspace"
+        value={<Trans>Create a new workspace</Trans>}
       />
     </BaseEmail>
   );

packages/twenty-emails/src/emails/password-reset-link.email.tsx

@@ -1,4 +1,3 @@
-import { t } from '@lingui/core/macro';
 import { Trans } from '@lingui/react/macro';
 import { BaseEmail } from 'src/components/BaseEmail';
 import { CallToAction } from 'src/components/CallToAction';
@@ -20,8 +19,8 @@ export const PasswordResetLinkEmail = ({
 }: PasswordResetLinkEmailProps) => {
   return (
     <BaseEmail locale={locale}>
-      <Title value={t`Reset your password 🗝`} />
+      <Title value={<Trans>Reset your password 🗝</Trans>} />
-      <CallToAction href={link} value={t`Reset`} />
+      <CallToAction href={link} value={<Trans>Reset</Trans>} />
       <MainText>
         <Trans>
           This link is only valid for the next {duration}. If the link does not

packages/twenty-emails/src/emails/password-update-notify.email.tsx

@@ -26,7 +26,7 @@ export const PasswordUpdateNotifyEmail = ({
 
   return (
     <BaseEmail locale={locale}>
-      <Title value={t`Password updated`} />
+      <Title value={<Trans>Password updated</Trans>} />
       <MainText>
         {helloString},
         <br />
@@ -43,7 +43,7 @@ export const PasswordUpdateNotifyEmail = ({
         </Trans>
         <br />
       </MainText>
-      <CallToAction value={t`Connect to Twenty`} href={link} />
+      <CallToAction value={<Trans>Connect to Twenty</Trans>} href={link} />
     </BaseEmail>
   );
 };

packages/twenty-emails/src/emails/send-email-verification-link.email.tsx

@@ -1,4 +1,3 @@
-import { t } from '@lingui/core/macro';
 import { Trans } from '@lingui/react/macro';
 
 import { BaseEmail } from 'src/components/BaseEmail';
@@ -19,8 +18,8 @@ export const SendEmailVerificationLinkEmail = ({
 }: SendEmailVerificationLinkEmailProps) => {
   return (
     <BaseEmail width={333} locale={locale}>
-      <Title value={t`Confirm your email address`} />
+      <Title value={<Trans>Confirm your email address</Trans>} />
-      <CallToAction href={link} value={t`Verify Email`} />
+      <CallToAction href={link} value={<Trans>Verify Email</Trans>} />
       <br />
       <br />
       <MainText>

packages/twenty-emails/src/emails/send-invite-link.email.tsx

@@ -1,4 +1,3 @@
-import { t } from '@lingui/core/macro';
 import { Trans } from '@lingui/react/macro';
 import { Img } from '@react-email/components';
 import { emailTheme } from 'src/common-style';
@@ -39,7 +38,7 @@ export const SendInviteLinkEmail = ({
 
   return (
     <BaseEmail width={333} locale={locale}>
-      <Title value={t`Join your team on Twenty`} />
+      <Title value={<Trans>Join your team on Twenty</Trans>} />
       <MainText>
         {capitalize(sender.firstName)} (
         <Link
@@ -54,7 +53,7 @@ export const SendInviteLinkEmail = ({
       <HighlightedContainer>
         {workspaceLogo && <Img src={workspaceLogo} width={40} height={40} />}
         {workspace.name && <HighlightedText value={workspace.name} />}
-        <CallToAction href={link} value={t`Accept invite`} />
+        <CallToAction href={link} value={<Trans>Accept invite</Trans>} />
       </HighlightedContainer>
       <WhatIsTwenty />
     </BaseEmail>

packages/twenty-emails/src/emails/warn-suspended-workspace.email.tsx

@@ -1,15 +1,16 @@
-import { t } from '@lingui/core/macro';
 import { Trans } from '@lingui/react/macro';
 import { BaseEmail } from 'src/components/BaseEmail';
 import { CallToAction } from 'src/components/CallToAction';
 import { MainText } from 'src/components/MainText';
 import { Title } from 'src/components/Title';
+import { APP_LOCALES } from 'twenty-shared';
 
 type WarnSuspendedWorkspaceEmailProps = {
   daysSinceInactive: number;
   inactiveDaysBeforeDelete: number;
   userName: string;
   workspaceDisplayName: string | undefined;
+  locale: keyof typeof APP_LOCALES;
 };
 
 export const WarnSuspendedWorkspaceEmail = ({
@@ -17,6 +18,7 @@ export const WarnSuspendedWorkspaceEmail = ({
   inactiveDaysBeforeDelete,
   userName,
   workspaceDisplayName,
+  locale,
 }: WarnSuspendedWorkspaceEmailProps) => {
   const daysLeft = inactiveDaysBeforeDelete - daysSinceInactive;
   const dayOrDays = daysLeft > 1 ? 'days' : 'day';
@@ -25,8 +27,8 @@ export const WarnSuspendedWorkspaceEmail = ({
   const helloString = userName?.length > 1 ? `Hello ${userName}` : 'Hello';
 
   return (
-    <BaseEmail width={333} locale="en">
+    <BaseEmail width={333} locale={locale}>
-      <Title value="Suspended Workspace 😴" />
+      <Title value={<Trans>Suspended Workspace </Trans>} />
       <MainText>
         {helloString},
         <br />
@@ -50,7 +52,7 @@ export const WarnSuspendedWorkspaceEmail = ({
       </MainText>
       <CallToAction
         href="https://app.twenty.com/settings/billing"
-        value={t`Update your subscription`}
+        value={<Trans>Update your subscription</Trans>}
       />
     </BaseEmail>
   );

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

@@ -4,6 +4,7 @@ import { SnackBarVariant } from '@/ui/feedback/snack-bar-manager/components/Snac
 import { useSnackBar } from '@/ui/feedback/snack-bar-manager/hooks/useSnackBar';
 
 import { useReadCaptchaToken } from '@/captcha/hooks/useReadCaptchaToken';
+import { useLingui } from '@lingui/react/macro';
 import { useEffect, useState } from 'react';
 import { useSearchParams } from 'react-router-dom';
 import { useNavigateApp } from '~/hooks/useNavigateApp';
@@ -21,11 +22,11 @@ export const VerifyEmailEffect = () => {
 
   const navigate = useNavigateApp();
   const { readCaptchaToken } = useReadCaptchaToken();
-
+  const { t } = useLingui();
   useEffect(() => {
     const verifyEmailToken = async () => {
       if (!email || !emailVerificationToken) {
-        enqueueSnackBar(`Invalid email verification link.`, {
+        enqueueSnackBar(t`Invalid email verification link.`, {
           dedupeKey: 'email-verification-link-dedupe-key',
           variant: SnackBarVariant.Error,
         });
@@ -40,14 +41,14 @@ export const VerifyEmailEffect = () => {
           captchaToken,
         );
 
-        enqueueSnackBar('Email verified.', {
+        enqueueSnackBar(t`Email verified.`, {
           dedupeKey: 'email-verification-dedupe-key',
           variant: SnackBarVariant.Success,
         });
 
         navigate(AppPath.Verify, undefined, { loginToken: loginToken.token });
       } catch (error) {
-        enqueueSnackBar('Email verification failed.', {
+        enqueueSnackBar(t`Email verification failed.`, {
           dedupeKey: 'email-verification-dedupe-key',
           variant: SnackBarVariant.Error,
         });

packages/twenty-front/src/modules/auth/hooks/__tests__/useVerifyLogin.test.ts

@@ -1,5 +1,8 @@
+import { i18n } from '@lingui/core';
+import { I18nProvider } from '@lingui/react';
 import { renderHook } from '@testing-library/react';
 import { RecoilRoot } from 'recoil';
+import { SOURCE_LOCALE } from 'twenty-shared';
 
 import { AppPath } from '@/types/AppPath';
 import { SnackBarVariant } from '@/ui/feedback/snack-bar-manager/components/SnackBar';
@@ -8,6 +11,7 @@ import { useNavigateApp } from '~/hooks/useNavigateApp';
 import { useAuth } from '../useAuth';
 import { useVerifyLogin } from '../useVerifyLogin';
 
+import { dynamicActivate } from '~/utils/i18n/dynamicActivate';
 jest.mock('../useAuth', () => ({
   useAuth: jest.fn(),
 }));
@@ -20,9 +24,12 @@ jest.mock('~/hooks/useNavigateApp', () => ({
   useNavigateApp: jest.fn(),
 }));
 
+dynamicActivate(SOURCE_LOCALE);
+
 const renderHooks = () => {
   const { result } = renderHook(() => useVerifyLogin(), {
-    wrapper: RecoilRoot,
+    wrapper: ({ children }) =>
+      RecoilRoot({ children: I18nProvider({ i18n, children }) }),
   });
   return { result };
 };

packages/twenty-front/src/modules/auth/hooks/useVerifyLogin.ts

@@ -4,6 +4,7 @@ import { useAuth } from '@/auth/hooks/useAuth';
 import { isAppWaitingForFreshObjectMetadataState } from '@/object-metadata/states/isAppWaitingForFreshObjectMetadataState';
 import { AppPath } from '@/types/AppPath';
 import { useSnackBar } from '@/ui/feedback/snack-bar-manager/hooks/useSnackBar';
+import { useLingui } from '@lingui/react/macro';
 import { useSetRecoilState } from 'recoil';
 import { useNavigateApp } from '~/hooks/useNavigateApp';
 
@@ -11,6 +12,7 @@ export const useVerifyLogin = () => {
   const { enqueueSnackBar } = useSnackBar();
   const navigate = useNavigateApp();
   const { getAuthTokensFromLoginToken } = useAuth();
+  const { t } = useLingui();
 
   const setIsAppWaitingForFreshObjectMetadata = useSetRecoilState(
     isAppWaitingForFreshObjectMetadataState,
@@ -21,7 +23,7 @@ export const useVerifyLogin = () => {
       setIsAppWaitingForFreshObjectMetadata(true);
       await getAuthTokensFromLoginToken(loginToken);
     } catch (error) {
-      enqueueSnackBar('Authentication failed', {
+      enqueueSnackBar(t`Authentication failed`, {
         variant: SnackBarVariant.Error,
       });
       navigate(AppPath.SignInUp);

packages/twenty-front/src/modules/auth/sign-in-up/hooks/__tests__/useHandleResetPassword.test.ts

@@ -1,29 +1,46 @@
+import { i18n } from '@lingui/core';
+import { I18nProvider } from '@lingui/react';
 import { act, renderHook } from '@testing-library/react';
-import { useSnackBar } from '@/ui/feedback/snack-bar-manager/hooks/useSnackBar';
+import { RecoilRoot } from 'recoil';
-import { useEmailPasswordResetLinkMutation } from '~/generated/graphql';
+import { SOURCE_LOCALE } from 'twenty-shared';
+
 import { useHandleResetPassword } from '@/auth/sign-in-up/hooks/useHandleResetPassword';
 import { SnackBarVariant } from '@/ui/feedback/snack-bar-manager/components/SnackBar';
+import { useSnackBar } from '@/ui/feedback/snack-bar-manager/hooks/useSnackBar';
+import { useEmailPasswordResetLinkMutation } from '~/generated/graphql';
+import { dynamicActivate } from '~/utils/i18n/dynamicActivate';
 
 // Mocks
 jest.mock('@/ui/feedback/snack-bar-manager/hooks/useSnackBar');
 jest.mock('~/generated/graphql');
 
+dynamicActivate(SOURCE_LOCALE);
+
+const renderHooks = () => {
+  const { result } = renderHook(() => useHandleResetPassword(), {
+    wrapper: ({ children }) =>
+      RecoilRoot({ children: I18nProvider({ i18n, children }) }),
+  });
+  return { result };
+};
+
 describe('useHandleResetPassword', () => {
   const enqueueSnackBarMock = jest.fn();
   const emailPasswordResetLinkMock = jest.fn();
 
   beforeEach(() => {
+    jest.clearAllMocks();
+
     (useSnackBar as jest.Mock).mockReturnValue({
       enqueueSnackBar: enqueueSnackBarMock,
     });
     (useEmailPasswordResetLinkMutation as jest.Mock).mockReturnValue([
       emailPasswordResetLinkMock,
     ]);
-    jest.clearAllMocks();
   });
 
   it('should show error message if email is invalid', async () => {
-    const { result } = renderHook(() => useHandleResetPassword());
+    const { result } = renderHooks();
     await act(() => result.current.handleResetPassword('')());
 
     expect(enqueueSnackBarMock).toHaveBeenCalledWith('Invalid email', {
@@ -36,7 +53,7 @@ describe('useHandleResetPassword', () => {
       data: { emailPasswordResetLink: { success: true } },
     });
 
-    const { result } = renderHook(() => useHandleResetPassword());
+    const { result } = renderHooks();
     await act(() => result.current.handleResetPassword('test@example.com')());
 
     expect(enqueueSnackBarMock).toHaveBeenCalledWith(
@@ -50,10 +67,10 @@ describe('useHandleResetPassword', () => {
       data: { emailPasswordResetLink: { success: false } },
     });
 
-    const { result } = renderHook(() => useHandleResetPassword());
+    const { result } = renderHooks();
     await act(() => result.current.handleResetPassword('test@example.com')());
 
-    expect(enqueueSnackBarMock).toHaveBeenCalledWith('There was some issue', {
+    expect(enqueueSnackBarMock).toHaveBeenCalledWith('There was an issue', {
       variant: SnackBarVariant.Error,
     });
   });
@@ -62,7 +79,7 @@ describe('useHandleResetPassword', () => {
     const errorMessage = 'Network Error';
     emailPasswordResetLinkMock.mockRejectedValue(new Error(errorMessage));
 
-    const { result } = renderHook(() => useHandleResetPassword());
+    const { result } = renderHooks();
     await act(() => result.current.handleResetPassword('test@example.com')());
 
     expect(enqueueSnackBarMock).toHaveBeenCalledWith(errorMessage, {

packages/twenty-front/src/modules/auth/sign-in-up/hooks/useHandleResendEmailVerificationToken.ts

@@ -2,6 +2,7 @@ import { useCallback } from 'react';
 
 import { SnackBarVariant } from '@/ui/feedback/snack-bar-manager/components/SnackBar';
 import { useSnackBar } from '@/ui/feedback/snack-bar-manager/hooks/useSnackBar';
+import { t } from '@lingui/core/macro';
 import { useResendEmailVerificationTokenMutation } from '~/generated/graphql';
 
 export const useHandleResendEmailVerificationToken = () => {
@@ -13,7 +14,7 @@ export const useHandleResendEmailVerificationToken = () => {
     (email: string | null) => {
       return async () => {
         if (!email) {
-          enqueueSnackBar('Invalid email', {
+          enqueueSnackBar(t`Invalid email`, {
             variant: SnackBarVariant.Error,
           });
           return;
@@ -25,11 +26,11 @@ export const useHandleResendEmailVerificationToken = () => {
           });
 
           if (data?.resendEmailVerificationToken?.success === true) {
-            enqueueSnackBar('Email verification link resent!', {
+            enqueueSnackBar(t`Email verification link resent!`, {
               variant: SnackBarVariant.Success,
             });
           } else {
-            enqueueSnackBar('There was some issue', {
+            enqueueSnackBar(t`There was an issue`, {
               variant: SnackBarVariant.Error,
             });
           }

packages/twenty-front/src/modules/auth/sign-in-up/hooks/useHandleResetPassword.ts

@@ -2,17 +2,19 @@ import { useCallback } from 'react';
 
 import { SnackBarVariant } from '@/ui/feedback/snack-bar-manager/components/SnackBar';
 import { useSnackBar } from '@/ui/feedback/snack-bar-manager/hooks/useSnackBar';
+import { useLingui } from '@lingui/react/macro';
 import { useEmailPasswordResetLinkMutation } from '~/generated/graphql';
 
 export const useHandleResetPassword = () => {
   const { enqueueSnackBar } = useSnackBar();
   const [emailPasswordResetLink] = useEmailPasswordResetLinkMutation();
+  const { t } = useLingui();
 
   const handleResetPassword = useCallback(
     (email: string) => {
       return async () => {
         if (!email) {
-          enqueueSnackBar('Invalid email', {
+          enqueueSnackBar(t`Invalid email`, {
             variant: SnackBarVariant.Error,
           });
           return;
@@ -24,11 +26,11 @@ export const useHandleResetPassword = () => {
           });
 
           if (data?.emailPasswordResetLink?.success === true) {
-            enqueueSnackBar('Password reset link has been sent to the email', {
+            enqueueSnackBar(t`Password reset link has been sent to the email`, {
               variant: SnackBarVariant.Success,
             });
           } else {
-            enqueueSnackBar('There was some issue', {
+            enqueueSnackBar(t`There was an issue`, {
               variant: SnackBarVariant.Error,
             });
           }
@@ -39,7 +41,7 @@ export const useHandleResetPassword = () => {
         }
       };
     },
-    [enqueueSnackBar, emailPasswordResetLink],
+    [enqueueSnackBar, emailPasswordResetLink, t],
   );
 
   return { handleResetPassword };

packages/twenty-front/src/modules/object-record/record-field/components/LightCopyIconButton.tsx

@@ -4,6 +4,7 @@ import { IconCopy, LightIconButton } from 'twenty-ui';
 
 import { SnackBarVariant } from '@/ui/feedback/snack-bar-manager/components/SnackBar';
 import { useSnackBar } from '@/ui/feedback/snack-bar-manager/hooks/useSnackBar';
+import { useLingui } from '@lingui/react/macro';
 
 const StyledButtonContainer = styled.div`
   padding: 0 ${({ theme }) => theme.spacing(1)};
@@ -16,6 +17,7 @@ export type LightCopyIconButtonProps = {
 export const LightCopyIconButton = ({ copyText }: LightCopyIconButtonProps) => {
   const { enqueueSnackBar } = useSnackBar();
   const theme = useTheme();
+  const { t } = useLingui();
 
   return (
     <StyledButtonContainer>
@@ -23,7 +25,7 @@ export const LightCopyIconButton = ({ copyText }: LightCopyIconButtonProps) => {
         className="copy-button"
         Icon={IconCopy}
         onClick={() => {
-          enqueueSnackBar('Text copied to clipboard', {
+          enqueueSnackBar(t`Text copied to clipboard`, {
             variant: SnackBarVariant.Success,
             icon: <IconCopy size={theme.icon.size.md} />,
             duration: 2000,

packages/twenty-front/src/modules/object-record/record-field/meta-types/display/components/PhonesFieldDisplay.tsx

@@ -3,6 +3,7 @@ import { usePhonesFieldDisplay } from '@/object-record/record-field/meta-types/h
 import { SnackBarVariant } from '@/ui/feedback/snack-bar-manager/components/SnackBar';
 import { useSnackBar } from '@/ui/feedback/snack-bar-manager/hooks/useSnackBar';
 import { PhonesDisplay } from '@/ui/field/display/components/PhonesDisplay';
+import { useLingui } from '@lingui/react/macro';
 import React from 'react';
 import { useIcons } from 'twenty-ui';
 
@@ -15,6 +16,8 @@ export const PhonesFieldDisplay = () => {
 
   const { getIcon } = useIcons();
 
+  const { t } = useLingui();
+
   const IconCircleCheck = getIcon('IconCircleCheck');
   const IconExclamationCircle = getIcon('IconExclamationCircle');
 
@@ -26,13 +29,13 @@ export const PhonesFieldDisplay = () => {
 
     try {
       await navigator.clipboard.writeText(phoneNumber);
-      enqueueSnackBar('Phone number copied to clipboard', {
+      enqueueSnackBar(t`Phone number copied to clipboard`, {
         variant: SnackBarVariant.Success,
         icon: <IconCircleCheck size={16} color="green" />,
         duration: 2000,
       });
     } catch (err) {
-      enqueueSnackBar('Error copying to clipboard', {
+      enqueueSnackBar(t`Error copying to clipboard`, {
         variant: SnackBarVariant.Error,
         icon: <IconExclamationCircle size={16} color="red" />,
         duration: 2000,

packages/twenty-front/src/modules/object-record/record-field/meta-types/display/components/__stories__/perf/PhonesFieldDisplay.perf.stories.tsx

@@ -3,6 +3,7 @@ import { ComponentDecorator } from 'twenty-ui';
 
 import { PhonesFieldDisplay } from '@/object-record/record-field/meta-types/display/components/PhonesFieldDisplay';
 import { getFieldDecorator } from '~/testing/decorators/getFieldDecorator';
+import { I18nFrontDecorator } from '~/testing/decorators/I18nFrontDecorator';
 import { MemoryRouterDecorator } from '~/testing/decorators/MemoryRouterDecorator';
 import { SnackBarDecorator } from '~/testing/decorators/SnackBarDecorator';
 import { getProfilingStory } from '~/testing/profiling/utils/getProfilingStory';
@@ -13,6 +14,7 @@ const meta: Meta = {
     MemoryRouterDecorator,
     getFieldDecorator('person', 'phones'),
     ComponentDecorator,
+    I18nFrontDecorator,
     SnackBarDecorator,
   ],
   component: PhonesFieldDisplay,

packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/__stories__/NumberFieldInput.stories.tsx

@@ -8,6 +8,7 @@ import { SnackBarDecorator } from '~/testing/decorators/SnackBarDecorator';
 
 import { FieldContextProvider } from '@/object-record/record-field/meta-types/components/FieldContextProvider';
 import { StorybookFieldInputDropdownFocusIdSetterEffect } from '~/testing/components/StorybookFieldInputDropdownFocusIdSetterEffect';
+import { I18nFrontDecorator } from '~/testing/decorators/I18nFrontDecorator';
 import { useNumberField } from '../../../hooks/useNumberField';
 import { NumberFieldInput, NumberFieldInputProps } from '../NumberFieldInput';
 
@@ -108,7 +109,7 @@ const meta: Meta = {
     onTab: { control: false },
     onShiftTab: { control: false },
   },
-  decorators: [clearMocksDecorator, SnackBarDecorator],
+  decorators: [clearMocksDecorator, SnackBarDecorator, I18nFrontDecorator],
   parameters: {
     clearMocks: true,
   },

packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/__stories__/TextFieldInput.stories.tsx

@@ -7,6 +7,7 @@ import { FieldMetadataType } from '~/generated/graphql';
 import { SnackBarDecorator } from '~/testing/decorators/SnackBarDecorator';
 
 import { StorybookFieldInputDropdownFocusIdSetterEffect } from '~/testing/components/StorybookFieldInputDropdownFocusIdSetterEffect';
+import { I18nFrontDecorator } from '~/testing/decorators/I18nFrontDecorator';
 import { FieldContextProvider } from '../../../components/FieldContextProvider';
 import { useTextField } from '../../../hooks/useTextField';
 import { TextFieldInput, TextFieldInputProps } from '../TextFieldInput';
@@ -107,7 +108,7 @@ const meta: Meta = {
     onTab: { control: false },
     onShiftTab: { control: false },
   },
-  decorators: [clearMocksDecorator, SnackBarDecorator],
+  decorators: [clearMocksDecorator, SnackBarDecorator, I18nFrontDecorator],
   parameters: {
     clearMocks: true,
   },

packages/twenty-front/src/modules/settings/admin-panel/components/SettingsAdminWorkspaceContent.tsx

@@ -15,6 +15,7 @@ import { TableCell } from '@/ui/layout/table/components/TableCell';
 import { TableHeader } from '@/ui/layout/table/components/TableHeader';
 import { TableRow } from '@/ui/layout/table/components/TableRow';
 import styled from '@emotion/styled';
+import { useLingui } from '@lingui/react/macro';
 import { useState } from 'react';
 import { useRecoilState, useRecoilValue } from 'recoil';
 import { isDefined } from 'twenty-shared';
@@ -49,9 +50,11 @@ export const SettingsAdminWorkspaceContent = ({
   const { updateFeatureFlagState } = useFeatureFlagState();
   const userLookupResult = useRecoilValue(userLookupResultState);
 
+  const { t } = useLingui();
+
   const handleImpersonate = async (workspaceId: string) => {
     if (!userLookupResult?.user.id) {
-      enqueueSnackBar('Please search for a user first', {
+      enqueueSnackBar(t`Please search for a user first`, {
         variant: SnackBarVariant.Error,
       });
       return;

packages/twenty-front/src/modules/settings/developers/components/ApiKeyInput.tsx

@@ -5,7 +5,7 @@ import { Button, IconCopy } from 'twenty-ui';
 import { SnackBarVariant } from '@/ui/feedback/snack-bar-manager/components/SnackBar';
 import { useSnackBar } from '@/ui/feedback/snack-bar-manager/hooks/useSnackBar';
 import { TextInput } from '@/ui/input/components/TextInput';
-
+import { useLingui } from '@lingui/react/macro';
 const StyledContainer = styled.div`
   display: flex;
   flex-direction: row;
@@ -20,6 +20,7 @@ type ApiKeyInputProps = { apiKey: string };
 
 export const ApiKeyInput = ({ apiKey }: ApiKeyInputProps) => {
   const theme = useTheme();
+  const { t } = useLingui();
 
   const { enqueueSnackBar } = useSnackBar();
   return (
@@ -31,7 +32,7 @@ export const ApiKeyInput = ({ apiKey }: ApiKeyInputProps) => {
         Icon={IconCopy}
         title="Copy"
         onClick={() => {
-          enqueueSnackBar('API Key copied to clipboard', {
+          enqueueSnackBar(t`API Key copied to clipboard`, {
             variant: SnackBarVariant.Success,
             icon: <IconCopy size={theme.icon.size.md} />,
             duration: 2000,

packages/twenty-front/src/modules/settings/developers/components/__stories__/ApiKeyInput.stories.tsx

@@ -2,12 +2,13 @@ import { Meta, StoryObj } from '@storybook/react';
 import { ComponentDecorator } from 'twenty-ui';
 
 import { ApiKeyInput } from '@/settings/developers/components/ApiKeyInput';
+import { I18nFrontDecorator } from '~/testing/decorators/I18nFrontDecorator';
 import { SnackBarDecorator } from '~/testing/decorators/SnackBarDecorator';
 
 const meta: Meta<typeof ApiKeyInput> = {
   title: 'Modules/Settings/Developers/ApiKeys/ApiKeyInput',
   component: ApiKeyInput,
-  decorators: [ComponentDecorator, SnackBarDecorator],
+  decorators: [ComponentDecorator, SnackBarDecorator, I18nFrontDecorator],
   args: {
     apiKey:
       'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiJ0d2VudHktN2VkOWQyMTItMWMyNS00ZDAyLWJmMjUtNmFlY2NmN2VhNDE5IiwiaWF0IjoxNjk4MTQyODgyLCJleHAiOjE2OTk0MDE1OTksImp0aSI6ImMyMmFiNjQxLTVhOGYtNGQwMC1iMDkzLTk3MzUwYTM2YzZkOSJ9.JIe2TX5IXrdNl3n-kRFp3jyfNUE7unzXZLAzm2Gxl98',

packages/twenty-front/src/modules/settings/security/components/SSO/SettingsSSOOIDCForm.tsx

@@ -5,6 +5,7 @@ import { useSnackBar } from '@/ui/feedback/snack-bar-manager/hooks/useSnackBar';
 import { TextInput } from '@/ui/input/components/TextInput';
 import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
+import { useLingui } from '@lingui/react/macro';
 import { Controller, useFormContext } from 'react-hook-form';
 import { Button, H2Title, IconCopy, Section } from 'twenty-ui';
 import { REACT_APP_SERVER_BASE_URL } from '~/config';
@@ -35,6 +36,7 @@ export const SettingsSSOOIDCForm = () => {
   const { control } = useFormContext();
   const { enqueueSnackBar } = useSnackBar();
   const theme = useTheme();
+  const { t } = useLingui();
 
   const authorizedUrl = window.location.origin;
   const redirectionUrl = `${REACT_APP_SERVER_BASE_URL}/auth/oidc/callback`;
@@ -43,8 +45,8 @@ export const SettingsSSOOIDCForm = () => {
     <>
       <Section>
         <H2Title
-          title="Client Settings"
+          title={t`Client Settings`}
-          description="Provide your OIDC provider details"
+          description={t`Provide your OIDC provider details`}
         />
         <StyledInputsContainer>
           <StyledContainer>
@@ -59,7 +61,7 @@ export const SettingsSSOOIDCForm = () => {
             <StyledButtonCopy>
               <Button
                 Icon={IconCopy}
-                title="Copy"
+                title={t`Copy`}
                 onClick={() => {
                   enqueueSnackBar('Authorized Url copied to clipboard', {
                     variant: SnackBarVariant.Success,
@@ -75,7 +77,7 @@ export const SettingsSSOOIDCForm = () => {
             <StyledLinkContainer>
               <TextInput
                 readOnly={true}
-                label="Redirection URI"
+                label={t`Redirection URI`}
                 value={redirectionUrl}
                 fullWidth
               />
@@ -83,9 +85,9 @@ export const SettingsSSOOIDCForm = () => {
             <StyledButtonCopy>
               <Button
                 Icon={IconCopy}
-                title="Copy"
+                title={t`Copy`}
                 onClick={() => {
-                  enqueueSnackBar('Redirect Url copied to clipboard', {
+                  enqueueSnackBar(t`Redirect Url copied to clipboard`, {
                     variant: SnackBarVariant.Success,
                     icon: <IconCopy size={theme.icon.size.md} />,
                     duration: 2000,
@@ -99,8 +101,8 @@ export const SettingsSSOOIDCForm = () => {
       </Section>
       <Section>
         <H2Title
-          title="Identity Provider"
+          title={t`Identity Provider`}
-          description="Enter the credentials to set the connection"
+          description={t`Enter the credentials to set the connection`}
         />
         <StyledInputsContainer>
           <Controller

packages/twenty-front/src/modules/settings/security/components/SSO/SettingsSSOSAMLForm.tsx

@@ -6,6 +6,7 @@ import { useSnackBar } from '@/ui/feedback/snack-bar-manager/hooks/useSnackBar';
 import { TextInput } from '@/ui/input/components/TextInput';
 import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
+import { useLingui } from '@lingui/react/macro';
 import { ChangeEvent, useRef } from 'react';
 import { useFormContext } from 'react-hook-form';
 import { isDefined } from 'twenty-shared';
@@ -57,6 +58,7 @@ export const SettingsSSOSAMLForm = () => {
   const { enqueueSnackBar } = useSnackBar();
   const theme = useTheme();
   const { setValue, getValues, watch, trigger } = useFormContext();
+  const { t } = useLingui();
 
   const handleFileChange = async (e: ChangeEvent<HTMLInputElement>) => {
     if (isDefined(e.target.files)) {
@@ -64,7 +66,7 @@ export const SettingsSSOSAMLForm = () => {
       const samlMetadataParsed = parseSAMLMetadataFromXMLFile(text);
       e.target.value = '';
       if (!samlMetadataParsed.success) {
-        return enqueueSnackBar('Invalid File', {
+        return enqueueSnackBar(t`Invalid File`, {
           variant: SnackBarVariant.Error,
           duration: 2000,
         });
@@ -100,7 +102,7 @@ export const SettingsSSOSAMLForm = () => {
       `${REACT_APP_SERVER_BASE_URL}/auth/saml/metadata/${getValues('id')}`,
     );
     if (!response.ok) {
-      return enqueueSnackBar('Metadata file generation failed', {
+      return enqueueSnackBar(t`Metadata file generation failed`, {
         variant: SnackBarVariant.Error,
         duration: 2000,
       });
@@ -120,8 +122,8 @@ export const SettingsSSOSAMLForm = () => {
     <>
       <Section>
         <H2Title
-          title="Identity Provider Metadata XML"
+          title={t`Identity Provider Metadata XML`}
-          description="Upload the XML file with your connection infos"
+          description={t`Upload the XML file with your connection infos`}
         />
         <StyledUploadFileContainer>
           <StyledFileInput
@@ -133,7 +135,7 @@ export const SettingsSSOSAMLForm = () => {
           <Button
             Icon={IconUpload}
             onClick={handleUploadFileClick}
-            title="Upload file"
+            title={t`Upload file`}
           ></Button>
           {isXMLMetadataValid() && (
             <IconCheck
@@ -146,15 +148,15 @@ export const SettingsSSOSAMLForm = () => {
       </Section>
       <Section>
         <H2Title
-          title="Service Provider Details"
+          title={t`Service Provider Details`}
-          description="Enter the infos to set the connection"
+          description={t`Enter the infos to set the connection`}
         />
         <StyledInputsContainer>
           <StyledContainer>
             <Button
               Icon={IconDownload}
               onClick={downloadMetadata}
-              title="Download file"
+              title={t`Download file`}
             ></Button>
           </StyledContainer>
           <HorizontalSeparator text={'Or'} />
@@ -194,9 +196,9 @@ export const SettingsSSOSAMLForm = () => {
             <StyledButtonCopy>
               <Button
                 Icon={IconCopy}
-                title="Copy"
+                title={t`Copy`}
                 onClick={() => {
-                  enqueueSnackBar('Entity ID copied to clipboard', {
+                  enqueueSnackBar(t`Entity ID copied to clipboard`, {
                     variant: SnackBarVariant.Success,
                     icon: <IconCopy size={theme.icon.size.md} />,
                     duration: 2000,

packages/twenty-front/src/modules/settings/security/components/SSO/SettingsSecuritySSORowDropdownMenu.tsx

@@ -16,6 +16,7 @@ import { useSnackBar } from '@/ui/feedback/snack-bar-manager/hooks/useSnackBar';
 import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown';
 import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
 import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
+import { useLingui } from '@lingui/react/macro';
 import { UnwrapRecoilValue } from 'recoil';
 import { isDefined } from 'twenty-shared';
 import { SsoIdentityProviderStatus } from '~/generated/graphql';
@@ -36,6 +37,8 @@ export const SettingsSecuritySSORowDropdownMenu = ({
   const { deleteSSOIdentityProvider } = useDeleteSSOIdentityProvider();
   const { updateSSOIdentityProvider } = useUpdateSSOIdentityProvider();
 
+  const { t } = useLingui();
+
   const handleDeleteSSOIdentityProvider = async (
     identityProviderId: string,
   ) => {
@@ -43,7 +46,7 @@ export const SettingsSecuritySSORowDropdownMenu = ({
       identityProviderId,
     });
     if (isDefined(result.errors)) {
-      enqueueSnackBar('Error deleting SSO Identity Provider', {
+      enqueueSnackBar(t`Error deleting SSO Identity Provider`, {
         variant: SnackBarVariant.Error,
         duration: 2000,
       });
@@ -61,7 +64,7 @@ export const SettingsSecuritySSORowDropdownMenu = ({
           : SsoIdentityProviderStatus.Active,
     });
     if (isDefined(result.errors)) {
-      enqueueSnackBar('Error editing SSO Identity Provider', {
+      enqueueSnackBar(t`Error editing SSO Identity Provider`, {
         variant: SnackBarVariant.Error,
         duration: 2000,
       });
@@ -82,7 +85,7 @@ export const SettingsSecuritySSORowDropdownMenu = ({
           <MenuItem
             accent="default"
             LeftIcon={IconArchive}
-            text={SSOIdp.status === 'Active' ? 'Deactivate' : 'Activate'}
+            text={SSOIdp.status === 'Active' ? t`Deactivate` : t`Activate`}
             onClick={() => {
               toggleSSOIdentityProviderStatus(SSOIdp.id);
               closeDropdown();
@@ -91,7 +94,7 @@ export const SettingsSecuritySSORowDropdownMenu = ({
           <MenuItem
             accent="danger"
             LeftIcon={IconTrash}
-            text="Delete"
+            text={t`Delete`}
             onClick={() => {
               handleDeleteSSOIdentityProvider(SSOIdp.id);
               closeDropdown();

packages/twenty-front/src/modules/workflow/hooks/useRunWorkflowVersion.tsx

@@ -3,6 +3,7 @@ import { useSnackBar } from '@/ui/feedback/snack-bar-manager/hooks/useSnackBar';
 import { RUN_WORKFLOW_VERSION } from '@/workflow/graphql/mutations/runWorkflowVersion';
 import { useApolloClient, useMutation } from '@apollo/client';
 import { useTheme } from '@emotion/react';
+import { useLingui } from '@lingui/react/macro';
 import { IconSettingsAutomation } from 'twenty-ui';
 import {
   RunWorkflowVersionMutation,
@@ -21,6 +22,7 @@ export const useRunWorkflowVersion = () => {
   const { enqueueSnackBar } = useSnackBar();
 
   const theme = useTheme();
+  const { t } = useLingui();
 
   const runWorkflowVersion = async ({
     workflowVersionId,
@@ -36,7 +38,7 @@ export const useRunWorkflowVersion = () => {
     const workflowRunId = data?.runWorkflowVersion?.workflowRunId;
 
     if (!workflowRunId) {
-      enqueueSnackBar('Workflow run failed', {
+      enqueueSnackBar(t`Workflow run failed`, {
         variant: SnackBarVariant.Error,
       });
       return;
@@ -44,7 +46,7 @@ export const useRunWorkflowVersion = () => {
 
     const link = `/object/workflowRun/${workflowRunId}`;
 
-    enqueueSnackBar('Workflow is running...', {
+    enqueueSnackBar(t`Workflow is running...`, {
       variant: SnackBarVariant.Success,
       icon: (
         <IconSettingsAutomation
@@ -54,7 +56,7 @@ export const useRunWorkflowVersion = () => {
       ),
       link: {
         href: link,
-        text: 'View execution details',
+        text: t`View execution details`,
       },
     });
   };

packages/twenty-front/src/pages/settings/SettingsWorkspaceMembers.tsx

@@ -114,7 +114,7 @@ export const SettingsWorkspaceMembers = () => {
   const handleRemoveWorkspaceInvitation = async (appTokenId: string) => {
     const result = await deleteWorkspaceInvitation({ appTokenId });
     if (isDefined(result.errors)) {
-      enqueueSnackBar('Error deleting invitation', {
+      enqueueSnackBar(t`Error deleting invitation`, {
         variant: SnackBarVariant.Error,
         duration: 2000,
       });
@@ -124,7 +124,7 @@ export const SettingsWorkspaceMembers = () => {
   const handleResendWorkspaceInvitation = async (appTokenId: string) => {
     const result = await resendInvitation({ appTokenId });
     if (isDefined(result.errors)) {
-      enqueueSnackBar('Error resending invitation', {
+      enqueueSnackBar(t`Error resending invitation`, {
         variant: SnackBarVariant.Error,
         duration: 2000,
       });
@@ -134,7 +134,7 @@ export const SettingsWorkspaceMembers = () => {
   const getExpiresAtText = (expiresAt: string) => {
     const expiresAtDate = new Date(expiresAt);
     return expiresAtDate < new Date()
-      ? 'Expired'
+      ? t`Expired`
       : formatDistanceToNow(new Date(expiresAt));
   };
 

packages/twenty-front/src/pages/settings/workspace/SettingsCustomDomainRecords.tsx

@@ -1,14 +1,15 @@
-import { TableRow } from '@/ui/layout/table/components/TableRow';
+import { SnackBarVariant } from '@/ui/feedback/snack-bar-manager/components/SnackBar';
-import { TableHeader } from '@/ui/layout/table/components/TableHeader';
+import { useSnackBar } from '@/ui/feedback/snack-bar-manager/hooks/useSnackBar';
+import { Table } from '@/ui/layout/table/components/Table';
 import { TableBody } from '@/ui/layout/table/components/TableBody';
 import { TableCell } from '@/ui/layout/table/components/TableCell';
-import { Button } from 'twenty-ui';
+import { TableHeader } from '@/ui/layout/table/components/TableHeader';
-import { Table } from '@/ui/layout/table/components/Table';
+import { TableRow } from '@/ui/layout/table/components/TableRow';
-import { CustomDomainValidRecords } from '~/generated/graphql';
 import styled from '@emotion/styled';
-import { useSnackBar } from '@/ui/feedback/snack-bar-manager/hooks/useSnackBar';
+import { useLingui } from '@lingui/react/macro';
-import { SnackBarVariant } from '@/ui/feedback/snack-bar-manager/components/SnackBar';
+import { Button } from 'twenty-ui';
 import { useDebouncedCallback } from 'use-debounce';
+import { CustomDomainValidRecords } from '~/generated/graphql';
 
 const StyledTable = styled(Table)`
   border-bottom: 1px solid ${({ theme }) => theme.border.color.light};
@@ -41,9 +42,11 @@ export const SettingsCustomDomainRecords = ({
 }) => {
   const { enqueueSnackBar } = useSnackBar();
 
+  const { t } = useLingui();
+
   const copyToClipboard = (value: string) => {
     navigator.clipboard.writeText(value);
-    enqueueSnackBar('Copied to clipboard!', {
+    enqueueSnackBar(t`Copied to clipboard!`, {
       variant: SnackBarVariant.Success,
     });
   };

packages/twenty-server/src/engine/core-modules/auth/auth.resolver.ts

@@ -2,9 +2,9 @@ import { UseFilters, UseGuards } from '@nestjs/common';
 import { Args, Context, Mutation, Query, Resolver } from '@nestjs/graphql';
 import { InjectRepository } from '@nestjs/typeorm';
 
-import { SettingsPermissions, SOURCE_LOCALE } from 'twenty-shared';
-import { Repository } from 'typeorm';
 import omit from 'lodash.omit';
+import { SOURCE_LOCALE, SettingsPermissions } from 'twenty-shared';
+import { Repository } from 'typeorm';
 
 import { ApiKeyTokenInput } from 'src/engine/core-modules/auth/dto/api-key-token.input';
 import { AppTokenInput } from 'src/engine/core-modules/auth/dto/app-token.input';
@@ -25,6 +25,8 @@ import {
   AuthExceptionCode,
 } from 'src/engine/core-modules/auth/auth.exception';
 import { AvailableWorkspaceOutput } from 'src/engine/core-modules/auth/dto/available-workspaces.output';
+import { GetAuthorizationUrlForSSOInput } from 'src/engine/core-modules/auth/dto/get-authorization-url-for-sso.input';
+import { GetAuthorizationUrlForSSOOutput } from 'src/engine/core-modules/auth/dto/get-authorization-url-for-sso.output';
 import { GetLoginTokenFromEmailVerificationTokenInput } from 'src/engine/core-modules/auth/dto/get-login-token-from-email-verification-token.input';
 import { SignUpOutput } from 'src/engine/core-modules/auth/dto/sign-up.output';
 import { ResetPasswordService } from 'src/engine/core-modules/auth/services/reset-password.service';
@@ -36,6 +38,7 @@ import { CaptchaGuard } from 'src/engine/core-modules/captcha/captcha.guard';
 import { DomainManagerService } from 'src/engine/core-modules/domain-manager/services/domain-manager.service';
 import { EmailVerificationService } from 'src/engine/core-modules/email-verification/services/email-verification.service';
 import { I18nContext } from 'src/engine/core-modules/i18n/types/i18n-context.type';
+import { SSOService } from 'src/engine/core-modules/sso/services/sso.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 { User } from 'src/engine/core-modules/user/user.entity';
@@ -48,9 +51,6 @@ import { SettingsPermissionsGuard } from 'src/engine/guards/settings-permissions
 import { UserAuthGuard } from 'src/engine/guards/user-auth.guard';
 import { WorkspaceAuthGuard } from 'src/engine/guards/workspace-auth.guard';
 import { PermissionsGraphqlApiExceptionFilter } from 'src/engine/metadata-modules/permissions/utils/permissions-graphql-api-exception.filter';
-import { SSOService } from 'src/engine/core-modules/sso/services/sso.service';
-import { GetAuthorizationUrlForSSOOutput } from 'src/engine/core-modules/auth/dto/get-authorization-url-for-sso.output';
-import { GetAuthorizationUrlForSSOInput } from 'src/engine/core-modules/auth/dto/get-authorization-url-for-sso.input';
 
 import { GetAuthTokensFromLoginTokenInput } from './dto/get-auth-tokens-from-login-token.input';
 import { GetLoginTokenFromCredentialsInput } from './dto/get-login-token-from-credentials.input';
@@ -241,6 +241,7 @@ export class AuthResolver {
       user.id,
       user.email,
       workspace,
+      signUpInput.locale ?? SOURCE_LOCALE,
     );
 
     const loginToken = await this.loginTokenService.generateLoginToken(

packages/twenty-server/src/engine/core-modules/auth/services/auth.service.ts

@@ -3,6 +3,8 @@ import { InjectRepository } from '@nestjs/typeorm';
 
 import crypto from 'node:crypto';
 
+import { i18n } from '@lingui/core';
+import { t } from '@lingui/core/macro';
 import { render } from '@react-email/render';
 import { addMilliseconds } from 'date-fns';
 import ms from 'ms';
@@ -45,6 +47,7 @@ import {
   SignInUpBaseParams,
   SignInUpNewUserPayload,
 } from 'src/engine/core-modules/auth/types/signInUp.type';
+import { WorkspaceSubdomainCustomDomainAndIsCustomDomainEnabledType } from 'src/engine/core-modules/domain-manager/domain-manager.type';
 import { DomainManagerService } from 'src/engine/core-modules/domain-manager/services/domain-manager.service';
 import { EmailService } from 'src/engine/core-modules/email/email.service';
 import { EnvironmentService } from 'src/engine/core-modules/environment/environment.service';
@@ -56,7 +59,6 @@ import { WorkspaceInvitationService } from 'src/engine/core-modules/workspace-in
 import { WorkspaceAuthProvider } from 'src/engine/core-modules/workspace/types/workspace.type';
 import { Workspace } from 'src/engine/core-modules/workspace/workspace.entity';
 import { workspaceValidator } from 'src/engine/core-modules/workspace/workspace.validate';
-import { WorkspaceSubdomainCustomDomainAndIsCustomDomainEnabledType } from 'src/engine/core-modules/domain-manager/domain-manager.type';
 
 @Injectable()
 // eslint-disable-next-line @nx/workspace-inject-workspace-repository
@@ -424,12 +426,14 @@ export class AuthService {
     const html = render(emailTemplate, { pretty: true });
     const text = render(emailTemplate, { plainText: true });
 
+    i18n.activate(locale);
+
     this.emailService.send({
       from: `${this.environmentService.get(
         'EMAIL_FROM_NAME',
       )} <${this.environmentService.get('EMAIL_FROM_ADDRESS')}>`,
       to: user.email,
-      subject: 'Your Password Has Been Successfully Changed',
+      subject: t`Your Password Has Been Successfully Changed`,
       text,
       html,
     });

packages/twenty-server/src/engine/core-modules/auth/services/reset-password.service.ts

@@ -3,6 +3,8 @@ import { InjectRepository } from '@nestjs/typeorm';
 
 import crypto from 'crypto';
 
+import { i18n } from '@lingui/core';
+import { t } from '@lingui/core/macro';
 import { render } from '@react-email/render';
 import { addMilliseconds, differenceInMilliseconds } from 'date-fns';
 import ms from 'ms';
@@ -143,12 +145,14 @@ export class ResetPasswordService {
     const html = render(emailTemplate, { pretty: true });
     const text = render(emailTemplate, { plainText: true });
 
+    i18n.activate(locale);
+
     this.emailService.send({
       from: `${this.environmentService.get(
         'EMAIL_FROM_NAME',
       )} <${this.environmentService.get('EMAIL_FROM_ADDRESS')}>`,
       to: email,
-      subject: 'Action Needed to Reset Password',
+      subject: t`Action Needed to Reset Password`,
       text,
       html,
     });

packages/twenty-server/src/engine/core-modules/email-verification/email-verification.resolver.ts

@@ -1,9 +1,12 @@
-import { Args, Mutation, Resolver } from '@nestjs/graphql';
+import { Args, Context, Mutation, Resolver } from '@nestjs/graphql';
+
+import { SOURCE_LOCALE } from 'twenty-shared';
 
 import { DomainManagerService } from 'src/engine/core-modules/domain-manager/services/domain-manager.service';
 import { ResendEmailVerificationTokenInput } from 'src/engine/core-modules/email-verification/dtos/resend-email-verification-token.input';
 import { ResendEmailVerificationTokenOutput } from 'src/engine/core-modules/email-verification/dtos/resend-email-verification-token.output';
 import { EmailVerificationService } from 'src/engine/core-modules/email-verification/services/email-verification.service';
+import { I18nContext } from 'src/engine/core-modules/i18n/types/i18n-context.type';
 import { workspaceValidator } from 'src/engine/core-modules/workspace/workspace.validate';
 import { OriginHeader } from 'src/engine/decorators/auth/origin-header.decorator';
 
@@ -19,6 +22,7 @@ export class EmailVerificationResolver {
     @Args()
     resendEmailVerificationTokenInput: ResendEmailVerificationTokenInput,
     @OriginHeader() origin: string,
+    @Context() context: I18nContext,
   ): Promise<ResendEmailVerificationTokenOutput> {
     const workspace =
       await this.domainManagerService.getWorkspaceByOriginOrDefaultWorkspace(
@@ -30,6 +34,7 @@ export class EmailVerificationResolver {
     return await this.emailVerificationService.resendEmailVerificationToken(
       resendEmailVerificationTokenInput.email,
       workspace,
+      context.req.headers['x-locale'] ?? SOURCE_LOCALE,
     );
   }
 }

packages/twenty-server/src/engine/core-modules/email-verification/services/email-verification.service.ts

@@ -1,6 +1,8 @@
 import { Injectable } from '@nestjs/common';
 import { InjectRepository } from '@nestjs/typeorm';
 
+import { i18n } from '@lingui/core';
+import { t } from '@lingui/core/macro';
 import { render } from '@react-email/render';
 import { addMilliseconds, differenceInMilliseconds } from 'date-fns';
 import ms from 'ms';
@@ -13,6 +15,7 @@ import {
   AppTokenType,
 } from 'src/engine/core-modules/app-token/app-token.entity';
 import { EmailVerificationTokenService } from 'src/engine/core-modules/auth/token/services/email-verification-token.service';
+import { WorkspaceSubdomainCustomDomainAndIsCustomDomainEnabledType } from 'src/engine/core-modules/domain-manager/domain-manager.type';
 import { DomainManagerService } from 'src/engine/core-modules/domain-manager/services/domain-manager.service';
 import {
   EmailVerificationException,
@@ -21,7 +24,6 @@ import {
 import { EmailService } from 'src/engine/core-modules/email/email.service';
 import { EnvironmentService } from 'src/engine/core-modules/environment/environment.service';
 import { UserService } from 'src/engine/core-modules/user/services/user.service';
-import { WorkspaceSubdomainCustomDomainAndIsCustomDomainEnabledType } from 'src/engine/core-modules/domain-manager/domain-manager.type';
 
 @Injectable()
 // eslint-disable-next-line @nx/workspace-inject-workspace-repository
@@ -40,6 +42,7 @@ export class EmailVerificationService {
     userId: string,
     email: string,
     workspace: WorkspaceSubdomainCustomDomainAndIsCustomDomainEnabledType,
+    locale: keyof typeof APP_LOCALES,
   ) {
     if (!this.environmentService.get('IS_EMAIL_VERIFICATION_REQUIRED')) {
       return { success: false };
@@ -57,7 +60,7 @@ export class EmailVerificationService {
 
     const emailData = {
       link: verificationLink.toString(),
-      locale: 'en' as keyof typeof APP_LOCALES,
+      locale,
     };
 
     const emailTemplate = SendEmailVerificationLinkEmail(emailData);
@@ -68,12 +71,14 @@ export class EmailVerificationService {
       plainText: true,
     });
 
+    i18n.activate(locale);
+
     await this.emailService.send({
       from: `${this.environmentService.get(
         'EMAIL_FROM_NAME',
       )} <${this.environmentService.get('EMAIL_FROM_ADDRESS')}>`,
       to: email,
-      subject: 'Welcome to Twenty: Please Confirm Your Email',
+      subject: t`Welcome to Twenty: Please Confirm Your Email`,
       text,
       html,
     });
@@ -84,6 +89,7 @@ export class EmailVerificationService {
   async resendEmailVerificationToken(
     email: string,
     workspace: WorkspaceSubdomainCustomDomainAndIsCustomDomainEnabledType,
+    locale: keyof typeof APP_LOCALES,
   ) {
     if (!this.environmentService.get('IS_EMAIL_VERIFICATION_REQUIRED')) {
       throw new EmailVerificationException(
@@ -125,7 +131,7 @@ export class EmailVerificationService {
       await this.appTokenRepository.delete(existingToken.id);
     }
 
-    await this.sendVerificationEmail(user.id, email, workspace);
+    await this.sendVerificationEmail(user.id, email, workspace, locale);
 
     return { success: true };
   }

packages/twenty-server/src/engine/core-modules/workspace-invitation/services/workspace-invitation.service.ts

@@ -3,6 +3,8 @@ import { InjectRepository } from '@nestjs/typeorm';
 
 import crypto from 'crypto';
 
+import { i18n } from '@lingui/core';
+import { t } from '@lingui/core/macro';
 import { render } from '@react-email/render';
 import { addMilliseconds } from 'date-fns';
 import ms from 'ms';
@@ -288,6 +290,8 @@ export class WorkspaceInvitationService {
               }
             : {},
         });
+
+        // Todo: sender name and locale should come from workspace member not user!
         const emailData = {
           link: link.toString(),
           workspace: { name: workspace.displayName, logo: workspace.logo },
@@ -297,7 +301,7 @@ export class WorkspaceInvitationService {
             lastName: sender.lastName,
           },
           serverUrl: this.environmentService.get('SERVER_URL'),
-          locale: 'en' as keyof typeof APP_LOCALES,
+          locale: sender.locale as keyof typeof APP_LOCALES,
         };
 
         const emailTemplate = SendInviteLinkEmail(emailData);
@@ -306,10 +310,12 @@ export class WorkspaceInvitationService {
           plainText: true,
         });
 
+        i18n.activate(sender.locale);
+
         await this.emailService.send({
           from: `${sender.firstName} ${sender.lastName} (via Twenty) <${this.environmentService.get('EMAIL_FROM_ADDRESS')}>`,
           to: invitation.value.email,
-          subject: 'Join your team on Twenty',
+          subject: t`Join your team on Twenty`,
           text,
           html,
         });

packages/twenty-server/src/engine/workspace-manager/workspace-cleaner/services/cleaner.workspace-service.ts

@@ -1,6 +1,8 @@
 import { Injectable, Logger } from '@nestjs/common';
 import { InjectRepository } from '@nestjs/typeorm';
 
+import { i18n } from '@lingui/core';
+import { t } from '@lingui/core/macro';
 import { render } from '@react-email/render';
 import { differenceInDays } from 'date-fns';
 import {
@@ -112,18 +114,21 @@ export class CleanerWorkspaceService {
       inactiveDaysBeforeDelete: this.inactiveDaysBeforeSoftDelete,
       userName: `${workspaceMember.name.firstName} ${workspaceMember.name.lastName}`,
       workspaceDisplayName: `${workspaceDisplayName}`,
+      locale: workspaceMember.locale,
     };
     const emailTemplate = WarnSuspendedWorkspaceEmail(emailData);
     const html = render(emailTemplate, { pretty: true });
     const text = render(emailTemplate, { plainText: true });
 
+    i18n.activate(workspaceMember.locale);
+
     this.emailService.send({
       to: workspaceMember.userEmail,
       bcc: this.environmentService.get('EMAIL_SYSTEM_ADDRESS'),
       from: `${this.environmentService.get(
         'EMAIL_FROM_NAME',
       )} <${this.environmentService.get('EMAIL_FROM_ADDRESS')}>`,
-      subject: 'Action needed to prevent workspace deletion',
+      subject: t`Action needed to prevent workspace deletion`,
       html,
       text,
     });
@@ -186,6 +191,7 @@ export class CleanerWorkspaceService {
       daysSinceInactive: daysSinceInactive,
       userName: `${workspaceMember.name.firstName} ${workspaceMember.name.lastName}`,
       workspaceDisplayName,
+      locale: workspaceMember.locale,
     };
     const emailTemplate = CleanSuspendedWorkspaceEmail(emailData);
     const html = render(emailTemplate, { pretty: true });