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

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

@ -1,3 +1,4 @@
import { Trans } from '@lingui/react/macro';
import { BaseEmail } from 'src/components/BaseEmail';
import { CallToAction } from 'src/components/CallToAction';
import { MainText } from 'src/components/MainText';
@ -17,20 +18,24 @@ export const CleanSuspendedWorkspaceEmail = ({
const helloString = userName?.length > 1 ? `Hello ${userName}` : 'Hello';
return (
<BaseEmail width={333}>
<BaseEmail width={333} locale="en">
<Title value="Deleted Workspace 🥺" />
<MainText>
{helloString},
<br />
<br />
Your workspace <b>{workspaceDisplayName}</b> has been deleted as your
subscription expired {inactiveDaysBeforeDelete} days ago.
<Trans>
Your workspace <b>{workspaceDisplayName}</b> has been deleted as your
subscription expired {inactiveDaysBeforeDelete} days ago.
</Trans>
<br />
<br />
All data in this workspace has been permanently deleted.
<Trans>All data in this workspace has been permanently deleted.</Trans>
<br />
<br />
If you wish to use Twenty again, you can create a new workspace.
<Trans>
If you wish to use Twenty again, you can create a new workspace.
</Trans>
</MainText>
<CallToAction
href="https://app.twenty.com/"

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

@ -1,25 +1,32 @@
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 { Link } from 'src/components/Link';
import { MainText } from 'src/components/MainText';
import { Title } from 'src/components/Title';
import { APP_LOCALES } from 'twenty-shared';
type PasswordResetLinkEmailProps = {
duration: string;
link: string;
locale: keyof typeof APP_LOCALES;
};
export const PasswordResetLinkEmail = ({
duration,
link,
locale,
}: PasswordResetLinkEmailProps) => {
return (
<BaseEmail>
<Title value="Reset your password 🗝" />
<CallToAction href={link} value="Reset" />
<BaseEmail locale={locale}>
<Title value={t`Reset your password 🗝`} />
<CallToAction href={link} value={t`Reset`} />
<MainText>
This link is only valid for the next {duration}. If link does not work,
you can use the login verification link directly:
<Trans>
This link is only valid for the next {duration}. If the link does not
work, you can use the login verification link directly:
</Trans>
<br />
<Link href={link} value={link} />
</MainText>

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

@ -1,38 +1,49 @@
import { format } from 'date-fns';
import { i18n } from '@lingui/core';
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 PasswordUpdateNotifyEmailProps = {
userName: string;
email: string;
link: string;
locale: keyof typeof APP_LOCALES;
};
export const PasswordUpdateNotifyEmail = ({
userName,
email,
link,
locale,
}: PasswordUpdateNotifyEmailProps) => {
const helloString = userName?.length > 1 ? `Dear ${userName}` : 'Dear';
const helloString = userName?.length > 1 ? t`Dear ${userName}` : t`Hello`;
const formattedDate = i18n.date(new Date());
return (
<BaseEmail>
<Title value="Password updated" />
<BaseEmail locale={locale}>
<Title value={t`Password updated`} />
<MainText>
{helloString},
<br />
<br />
This is a confirmation that password for your account ({email}) was
successfully changed on {format(new Date(), 'MMMM d, yyyy')}.
<Trans>
This is a confirmation that password for your account ({email}) was
successfully changed on {formattedDate}.
</Trans>
<br />
<br />
If you did not initiate this change, please contact your workspace owner
immediately.
<Trans>
If you did not initiate this change, please contact your workspace
owner immediately.
</Trans>
<br />
</MainText>
<CallToAction value="Connect to Twenty" href={link} />
<CallToAction value={t`Connect to Twenty`} href={link} />
</BaseEmail>
);
};

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

@ -1,26 +1,34 @@
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 { Footer } from 'src/components/Footer';
import { MainText } from 'src/components/MainText';
import { Title } from 'src/components/Title';
import { APP_LOCALES } from 'twenty-shared';
type SendEmailVerificationLinkEmailProps = {
link: string;
locale: keyof typeof APP_LOCALES;
};
export const SendEmailVerificationLinkEmail = ({
link,
locale,
}: SendEmailVerificationLinkEmailProps) => {
return (
<BaseEmail width={333}>
<Title value="Confirm your email address" />
<CallToAction href={link} value="Verify Email" />
<BaseEmail width={333} locale={locale}>
<Title value={t`Confirm your email address`} />
<CallToAction href={link} value={t`Verify Email`} />
<br />
<br />
<MainText>
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.
<Trans>
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.
</Trans>
</MainText>
<Footer />
</BaseEmail>

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

@ -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>

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

@ -1,3 +1,5 @@
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';
@ -23,26 +25,32 @@ export const WarnSuspendedWorkspaceEmail = ({
const helloString = userName?.length > 1 ? `Hello ${userName}` : 'Hello';
return (
<BaseEmail width={333}>
<BaseEmail width={333} locale="en">
<Title value="Suspended Workspace 😴" />
<MainText>
{helloString},
<br />
<br />
It appears that your workspace <b>{workspaceDisplayName}</b> has been
suspended for {daysSinceInactive} days.
<Trans>
It appears that your workspace <b>{workspaceDisplayName}</b> has been
suspended for {daysSinceInactive} days.
</Trans>
<br />
<br />
The workspace will be deactivated in {remainingDays} {dayOrDays}, and
all its data will be deleted.
<Trans>
The workspace will be deactivated in {remainingDays} {dayOrDays}, and
all its data will be deleted.
</Trans>
<br />
<br />
If you wish to continue using Twenty, please update your subscription
within the next {remainingDays} {dayOrDays}.
<Trans>
If you wish to continue using Twenty, please update your subscription
within the next {remainingDays} {dayOrDays}.
</Trans>
</MainText>
<CallToAction
href="https://app.twenty.com/settings/billing"
value="Update your subscription"
value={t`Update your subscription`}
/>
</BaseEmail>
);