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)
2025-02-23 21:15:41 +01:00
parent 2039986684
commit df0d23a365
33 changed files with 195 additions and 103 deletions
--- a/packages/twenty-emails/src/emails/clean-suspended-workspace.email.tsx
+++ b/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">
-      <Title value="Deleted Workspace 🥺" />
+    <BaseEmail width={333} locale={locale}>
+      <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>
  );
--- a/packages/twenty-emails/src/emails/password-reset-link.email.tsx
+++ b/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 🗝`} />
-      <CallToAction href={link} value={t`Reset`} />
+      <Title value={<Trans>Reset your password 🗝</Trans>} />
+      <CallToAction href={link} value={<Trans>Reset</Trans>} />
      <MainText>
        <Trans>
          This link is only valid for the next {duration}. If the link does not
--- a/packages/twenty-emails/src/emails/password-update-notify.email.tsx
+++ b/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>
  );
 };
--- a/packages/twenty-emails/src/emails/send-email-verification-link.email.tsx
+++ b/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`} />
-      <CallToAction href={link} value={t`Verify Email`} />
+      <Title value={<Trans>Confirm your email address</Trans>} />
+      <CallToAction href={link} value={<Trans>Verify Email</Trans>} />
      <br />
      <br />
      <MainText>
--- a/packages/twenty-emails/src/emails/send-invite-link.email.tsx
+++ b/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>
--- a/packages/twenty-emails/src/emails/warn-suspended-workspace.email.tsx
+++ b/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">
-      <Title value="Suspended Workspace 😴" />
+    <BaseEmail width={333} locale={locale}>
+      <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>
  );