setup localization for twenty-emails (#9806)

One of the steps to address #8128 

How to test:
Please change the locale in the settings and click on change password
button. A password reset email in the preferred locale will be sent.


![image](https://github.com/user-attachments/assets/2b0c2f81-5c4d-4e49-b021-8ee76e7872f2)

![image](https://github.com/user-attachments/assets/0453e321-e5aa-42ea-beca-86e2e97dbee2)

Todo:
- Remove the hardcoded locales for invitation, warn suspended workspace
email, clean suspended workspace emails
- Need to test invitation, email verification, warn suspended workspace
email, clean suspended workspace emails
- The duration variable `5 minutes` is always in english. Do we need to
do something about that? It does seems odd in case of chinese
translations.

Notes:
- Only tested the password reset , password update notify templates.
- Cant test email verification due to error during sign up `Internal
server error: New workspace setup is disabled`

---------

Co-authored-by: Félix Malfait <felix@twenty.com>

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

@@ -1,3 +1,5 @@
+import { t } from '@lingui/core/macro';
+import { Trans } from '@lingui/react/macro';
 import { Img } from '@react-email/components';
 import { emailTheme } from 'src/common-style';
 
@@ -10,7 +12,7 @@ import { MainText } from 'src/components/MainText';
 import { Title } from 'src/components/Title';
 import { WhatIsTwenty } from 'src/components/WhatIsTwenty';
 import { capitalize } from 'src/utils/capitalize';
-import { getImageAbsoluteURI } from 'twenty-shared';
+import { APP_LOCALES, getImageAbsoluteURI } from 'twenty-shared';
 
 type SendInviteLinkEmailProps = {
   link: string;
@@ -21,6 +23,7 @@ type SendInviteLinkEmailProps = {
     lastName: string;
   };
   serverUrl: string;
+  locale: keyof typeof APP_LOCALES;
 };
 
 export const SendInviteLinkEmail = ({
@@ -28,14 +31,15 @@ export const SendInviteLinkEmail = ({
   workspace,
   sender,
   serverUrl,
+  locale,
 }: SendInviteLinkEmailProps) => {
   const workspaceLogo = workspace.logo
     ? getImageAbsoluteURI({ imageUrl: workspace.logo, baseUrl: serverUrl })
     : null;
 
   return (
-    <BaseEmail width={333}>
-      <Title value="Join your team on Twenty" />
+    <BaseEmail width={333} locale={locale}>
+      <Title value={t`Join your team on Twenty`} />
       <MainText>
         {capitalize(sender.firstName)} (
         <Link
@@ -43,13 +47,14 @@ export const SendInviteLinkEmail = ({
           value={sender.email}
           color={emailTheme.font.colors.blue}
         />
-        ) has invited you to join a workspace called <b>{workspace.name}</b>
+        )<Trans>has invited you to join a workspace called </Trans>
+        <b>{workspace.name}</b>
         <br />
       </MainText>
       <HighlightedContainer>
         {workspaceLogo && <Img src={workspaceLogo} width={40} height={40} />}
         {workspace.name && <HighlightedText value={workspace.name} />}
-        <CallToAction href={link} value="Accept invite" />
+        <CallToAction href={link} value={t`Accept invite`} />
       </HighlightedContainer>
       <WhatIsTwenty />
     </BaseEmail>