setup localization for twenty-emails #9806

DeepaPrasanna · 2025-01-22T20:08:00Z

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.

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

FelixMalfait · 2025-01-22T20:37:54Z

packages/twenty-emails/.swcrc

@@ -0,0 +1,18 @@
+{


I see Babel in the emails folder. I think it's best to use SWC but it seemed to use Babel. But you didn't migrate twenty-emails to SWC here did you? I'm surprised it works. Want to take a shot at removing Babel?

Yes, I didn't migrated to SWC. I chose to go creating .swcrc because the vite.config.ts already imported React from @vitejs/plugin-react-swc
I will remove babel and will check how it goes then.

packages/twenty-emails/vite.config.ts

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

...-server/src/engine/workspace-manager/workspace-cleaner/crons/clean-inactive-workspace.job.ts

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

packages/twenty-emails/src/emails/clean-inactive-workspaces.email.tsx

charlesBochet · 2025-01-24T18:20:29Z

@DeepaPrasanna Thanks a lot for the PR! Would you be able to rebase on main to fix conflicts and to address @FelixMalfait feedbacks?

greptile-apps

PR Summary

This PR implements comprehensive email template localization for Twenty, supporting multiple languages (en, fr, pt, de, it, es, zh-Hans, zh-Hant) through the Lingui i18n framework.

Added loadAndActivateLocale utility in /packages/twenty-emails/src/utils/loadAndActivateLocale.ts for dynamic locale loading and activation
Hardcoded 'en' locale in server services needs to be replaced with user preferences from workspace settings
Duration strings (e.g., "5 minutes") remain in English across all translations, requiring localization
Email subjects in server services are still hardcoded in English and need localization
Some special characters in translation files show encoding issues (e.g., 'Ã' instead of 'í')

_{💡 (2/5) Greptile learns from your feedback when you react with 👍/👎!}

_{36 file(s) reviewed, 45 comment(s)}
_{Edit PR Review Bot Settings | Greptile}

greptile-apps · 2025-01-27T08:25:21Z

packages/twenty-emails/src/components/BaseEmail.tsx

 }>;

-export const BaseEmail = ({ children, width }: BaseEmailProps) => {
+export const BaseEmail = ({ children, width, locale }: BaseEmailProps) => {


logic: locale prop is now required but no default value provided - could cause runtime errors if not passed

greptile-apps · 2025-01-27T08:25:21Z

packages/twenty-emails/src/components/BaseEmail.tsx

-        {children}
-      </Container>
-    </Html>
+    <I18nProvider i18n={i18n}>


logic: i18n instance needs to be initialized and configured before being used in I18nProvider

greptile-apps · 2025-01-27T08:25:22Z

packages/twenty-emails/src/components/BaseEmail.tsx

+    <I18nProvider i18n={i18n}>
+      <Html lang={locale}>
+        <BaseHead />
+        <Container width={width || 290}>


style: width default of 290 should be defined as a constant at the top level

greptile-apps · 2025-01-27T08:25:48Z

packages/twenty-emails/.swcrc

+         {
+           "runtimeModules": {
+             "i18n": ["@lingui/core", "i18n"],
+             "trans": ["@lingui/react", "Trans"]
+           }
+         }


style: indentation is inconsistent with the rest of the file (extra space before opening brace)

greptile-apps · 2025-01-27T08:30:37Z

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

-  const helloString = userName?.length > 1 ? `Dear ${userName}` : 'Dear';
+  await loadAndActivateLocale(locale);
+
+  const helloString = userName?.length > 1 ? t`Dear ${userName}` : t`Dear`;


logic: string interpolation in t macro may not work as expected - consider using Trans component instead for variable interpolation

greptile-apps · 2025-01-27T08:48:45Z

packages/twenty-emails/src/locales/en/messages.ts

@@ -0,0 +1 @@
+/*eslint-disable*/import type{Messages}from"@lingui/core";export const messages=JSON.parse("{\"A7zEzZ\":[[\"daysLeft\",\"plural\",{\"one\":[\"day left\"],\"other\":[\"days left\"]}]],\"0JB+B5\":[[\"daysLeft\",\"plural\",{\"one\":[\"No need for concern, though! Simply create or edit a record within the next \",[\"remainingDays\"],\" day to retain access.\"],\"other\":[\"No need for concern, though! Simply create or edit a record within the next \",[\"remainingDays\"],\" days to retain access.\"]}]],\"RPHFhC\":[\"Confirm your email address\"],\"791xh3\":[\"Dead Workspaces 😵 that should be deleted\"],\"JRzgV7\":[\"Dear\"],\"Lm5BBI\":[\"Dear \",[\"userName\"]],\"tGme7M\":[\"has invited you to join a workspace called \"],\"uzTaYi\":[\"Hello\"],\"r0OJlV\":[\"Hello \",[\"userName\"]],\"vq4f+3\":[\"Inactive Workspace 😴\"],\"Y4Nk3c\":[\"It appears that there has been a period of inactivity on your<0>\",[\"workspaceDisplayName\"],\"</0> workspace.<1/><2/>Please note that the account is due for deactivation soon, and all associated data within this workspace will be deleted.<3/><4/>\"],\"PviVyk\":[\"Join your team on Twenty\"],\"ja42wz\":[\"List of <0>workspaceIds</0> inactive since at least <1>\",[\"minDaysSinceInactive\"],\" days</1>:\"],\"ogtYkT\":[\"Password updated\"],\"OfhWJH\":[\"Reset\"],\"RE5NiU\":[\"Reset your password 🗝\"],\"7yDt8q\":[\"Thanks for registering for an account on Twenty! Before we get started, we just need to confirm that this is you. Click above to verify your email address.\"],\"wSOsS+\":[\"This is a confirmation that password for your account (\",[\"email\"],\") was successfully changed on \",[\"formattedDate\"],\".<0/><1/>If you did not initiate this change, please contact your workspace owner immediately.\"],\"RGs4CL\":[\"This link is only valid for the next \",[\"duration\"],\". If the link does not\\n          work, you can use the login verification link directly:<0/>\"],\"2oA637\":[\"This link is only valid for the next \",[\"duration\"],\". If the link does not work, you can use the login verification link directly:<0/>\"],\"wCKkSr\":[\"Verify Email\"]}")as Messages;


style: The file uses escaped newlines '\n' in some translations which may cause formatting inconsistencies. Consider using template literals or removing manual line breaks

greptile-apps · 2025-01-27T08:50:06Z

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

+    const html = await render(emailTemplate);
+    const text = await render(emailTemplate, {
      plainText: true,
    });


style: render() calls should be wrapped in try/catch to handle potential rendering errors

greptile-apps · 2025-01-27T08:50:43Z

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

@@ -55,15 +55,14 @@ export class EmailVerificationService {

    const emailData = {
      link: verificationLink.toString(),
+      locale: 'en',


logic: locale should not be hardcoded to 'en' - it should be obtained from user preferences or settings

greptile-apps · 2025-01-27T08:51:30Z

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

@@ -296,14 +296,13 @@ export class WorkspaceInvitationService {
            lastName: sender.lastName,
          },
          serverUrl: this.environmentService.get('SERVER_URL'),
+          locale: 'en',


logic: locale should not be hardcoded to 'en' - it should be passed from the user's preferences or system settings

...-server/src/engine/workspace-manager/workspace-cleaner/crons/clean-inactive-workspace.job.ts

Update version of @react-email/components and @react-email/render

Install packege to solve dynamic imports

add extract and compile commands, set up lingui config

use lingui macros for translations

translations added for de, en, es, fr, it, pt, zh-Hans, zh-Hant

workspaceId passed to fetch user's workspace locale

add await and remove {pretty :true} to fix this issue resend/react-email#1802

removed package vite-plugin-dynamic-import, removed await while calling email templates, updated loadAndActivateLocale to have static imports

downgrades @react-email/render version from 1.0.4 to 0.0.17 to fix dynamic imports during jest tests

update dto, mutation query to accept locale for updatePassword functionality

pass locale via header to sendEmailPasswordResetLink

DeepaPrasanna · 2025-01-29T18:07:17Z

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

@@ -336,6 +337,7 @@ export class AuthResolver {
  @Mutation(() => EmailPasswordResetLink)
  async emailPasswordResetLink(
    @Args() emailPasswordResetInput: EmailPasswordResetLinkInput,
+    @Context() context: I18nContext,


Context is undefined when this is called during logged out scenario. Need to address that

greptile-apps

PR Summary

(updates since last review)

Based on the provided information, I'll focus on the most recent changes and avoid repeating points from the previous review.

This PR continues the email template localization implementation with additional language support and infrastructure changes.

Added Lingui configuration in /packages/twenty-emails/lingui.config.js with TranslationIO service integration when API key is present
Added BaseEmail component locale prop requirement in /packages/twenty-emails/src/components/BaseEmail.tsx for consistent language handling
Inconsistent character encoding in translation files (e.g., 'ç' appearing as 'Ã§') needs to be fixed
Formal/informal address inconsistencies in German and Spanish translations should be standardized

The implementation is progressing well but requires attention to encoding and translation consistency issues before completion.

_{51 file(s) reviewed, 63 comment(s)}
_{Edit PR Review Bot Settings | Greptile}

greptile-apps · 2025-02-02T11:31:30Z

packages/twenty-emails/package.json

    }
  },
  "engines": {
-    "node": "^18.17.1",
+    "node": "^18.17.1", 


syntax: Extra space after ^18.17.1 should be removed

greptile-apps · 2025-02-02T11:31:37Z

packages/twenty-emails/lingui.config.js

+
+export default defineConfig({
+  sourceLocale: 'en',
+  locales: Object.values(APP_LOCALES),


style: Using Object.values() on APP_LOCALES could cause issues if the order of locales matters for fallback chains. Consider explicitly listing locales in desired order.

greptile-apps · 2025-02-02T11:32:28Z

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

-      <Title value="Reset your password 🗝" />
-      <CallToAction href={link} value="Reset" />
+    <BaseEmail locale={locale}>
+      <Title value={t`Reset your password 🗝`} />


style: The emoji in the title string may cause display issues in some email clients. Consider using a Unicode emoji or removing it for better compatibility.

greptile-apps · 2025-02-02T11:32:32Z

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

@@ -17,20 +18,24 @@ export const CleanSuspendedWorkspaceEmail = ({
  const helloString = userName?.length > 1 ? `Hello ${userName}` : 'Hello';


logic: helloString needs to be wrapped in <Trans> component for localization

greptile-apps · 2025-02-02T11:32:33Z

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

@@ -17,20 +18,24 @@ export const CleanSuspendedWorkspaceEmail = ({
  const helloString = userName?.length > 1 ? `Hello ${userName}` : 'Hello';

  return (
-    <BaseEmail width={333}>
+    <BaseEmail width={333} locale="en">


logic: locale="en" should not be hardcoded - should be passed as a prop from parent component

Suggested change

<BaseEmail width={333} locale="en">

<BaseEmail width={333} locale={locale}>

greptile-apps · 2025-02-02T11:41:00Z

packages/twenty-emails/vite.config.ts

+      plugins: [['@lingui/swc-plugin', {}]],
+    }),
+    lingui({
+      configPath: path.resolve(__dirname, './lingui.config.ts'),


logic: lingui.config.ts referenced here but the actual file is lingui.config.js

greptile-apps · 2025-02-02T11:41:00Z

packages/twenty-emails/vite.config.ts

+        ...Object.values(APP_LOCALES).reduce(
+          (acc, locale) => ({
+            ...acc,
+            [`locales/generated/${locale}`]: `src/locales/generated/${locale}.ts`,
+          }),
+          {},
+        ),


style: consider adding type safety for APP_LOCALES values and validation that the generated files exist

greptile-apps · 2025-02-02T11:42:43Z

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

+    return {
+      ...serverMessages,
+      ...emailMessages,
+    };


logic: mergeMessages could silently overwrite server messages with email messages due to spread operator order. Consider adding conflict detection/warning

greptile-apps · 2025-02-02T11:42:44Z

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

+      ...emailMessages,
+    };
+  }
+
  async onModuleInit() {


style: onModuleInit lacks error handling for failed message loading or merging

greptile-apps · 2025-02-02T11:43:17Z

packages/twenty-server/src/engine/metadata-modules/field-metadata/field-metadata.service.ts

  async resolveTranslatableString(
    fieldMetadata: FieldMetadataDTO,
    labelKey: 'label' | 'description',
-    locale: string | undefined,
+    locale: keyof typeof APP_LOCALES | undefined,
  ): Promise<string> {


style: Consider adding validation to ensure locale exists in APP_LOCALES before activating it

FelixMalfait · 2025-02-02T20:01:22Z

Thanks a lot @DeepaPrasanna! I'll merge even if it's not 100% finished (we need to implement the part that switches the locale), to avoid further conflicts

github-actions · 2025-02-02T20:04:54Z

	Fails
🚫	`node` failed.