admin/twenty
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

setup localization for twenty-emails (#9806)

Browse Source 
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>
This commit is contained in:
Anne Deepa Prasanna
2025-02-03 01:31:34 +05:30
committed by GitHub
parent 4b9414a002
commit 39e7f6cec3
58 changed files with 1752 additions and 344 deletions
Download Patch File Download Diff File Expand all files Collapse all files

53
packages/twenty-emails/src/components/BaseEmail.tsx
View File

@ -1,21 +1,56 @@
import { PropsWithChildren } from 'react';
import { i18n } from '@lingui/core';
import { I18nProvider } from '@lingui/react';
import { Container, Html } from '@react-email/components';
import { PropsWithChildren } from 'react';
import { BaseHead } from 'src/components/BaseHead';
import { Logo } from 'src/components/Logo';
import { APP_LOCALES } from 'twenty-shared';
import { messages as deMessages } from '../locales/generated/de';
import { messages as enMessages } from '../locales/generated/en';
import { messages as esMessages } from '../locales/generated/es';
import { messages as frMessages } from '../locales/generated/fr';
import { messages as itMessages } from '../locales/generated/it';
import { messages as jaMessages } from '../locales/generated/ja';
import { messages as koMessages } from '../locales/generated/ko';
import { messages as pseudoEnMessages } from '../locales/generated/pseudo-en';
import { messages as ptBRMessages } from '../locales/generated/pt-BR';
import { messages as ptPTMessages } from '../locales/generated/pt-PT';
import { messages as zhHansMessages } from '../locales/generated/zh-Hans';
import { messages as zhHantMessages } from '../locales/generated/zh-Hant';
type BaseEmailProps = PropsWithChildren<{
width?: number;
locale: keyof typeof APP_LOCALES;
}>;
export const BaseEmail = ({ children, width }: BaseEmailProps) => {
i18n.load('en', enMessages);
i18n.load('fr', frMessages);
i18n.load('pseudo-en', pseudoEnMessages);
i18n.load('ko', koMessages);
i18n.load('de', deMessages);
i18n.load('it', itMessages);
i18n.load('es', esMessages);
i18n.load('ja', jaMessages);
i18n.load('pt-PT', ptPTMessages);
i18n.load('pt-BR', ptBRMessages);
i18n.load('zh-Hans', zhHansMessages);
i18n.load('zh-Hant', zhHantMessages);
i18n.activate('en');
export const BaseEmail = ({ children, width, locale }: BaseEmailProps) => {
i18n.activate(locale);
return (
<Html lang="en">
<BaseHead />
<Container width={width || 290}>
<Logo />
{children}
</Container>
</Html>
<I18nProvider i18n={i18n}>
<Html lang={locale}>
<BaseHead />
<Container width={width || 290}>
<Logo />
{children}
</Container>
</Html>
</I18nProvider>
);
};