From 7b70dacc145ee3fbd78f0a0ce01f3df2155ab2a8 Mon Sep 17 00:00:00 2001 From: martmull Date: Wed, 10 Jan 2024 15:40:33 +0100 Subject: [PATCH] Add Base Email template --- .../emails/clean-inactive-workspace.email.tsx | 52 ++++++++----------- .../workspace/emails/components/BaseEmail.tsx | 17 ++++++ .../src/workspace/emails/components/Title.tsx | 6 +++ 3 files changed, 46 insertions(+), 29 deletions(-) create mode 100644 packages/twenty-server/src/workspace/emails/components/BaseEmail.tsx create mode 100644 packages/twenty-server/src/workspace/emails/components/Title.tsx diff --git a/packages/twenty-server/src/workspace/emails/clean-inactive-workspace.email.tsx b/packages/twenty-server/src/workspace/emails/clean-inactive-workspace.email.tsx index 68aa4e935a3..5f1888a65fc 100644 --- a/packages/twenty-server/src/workspace/emails/clean-inactive-workspace.email.tsx +++ b/packages/twenty-server/src/workspace/emails/clean-inactive-workspace.email.tsx @@ -1,12 +1,10 @@ import * as React from 'react'; -import { Html } from '@react-email/html'; -import { Container, Heading } from '@react-email/components'; -import { BaseHead } from 'src/workspace/emails/components/BaseHead'; import { HighlightedText } from 'src/workspace/emails/components/HighlightedText'; -import { CallToAction } from 'src/workspace/emails/components/CallToAction'; import { MainText } from 'src/workspace/emails/components/MainText'; -import { Logo } from 'src/workspace/emails/components/Logo'; +import { Title } from 'src/workspace/emails/components/Title'; +import { BaseEmail } from 'src/workspace/emails/components/BaseEmail'; +import { CallToAction } from 'src/workspace/emails/components/CallToAction'; export const CleanInactiveWorkspaceEmail = ({ title, @@ -17,30 +15,26 @@ export const CleanInactiveWorkspaceEmail = ({ const daysLeftInfo = daysLeft > 1 ? `${daysLeft} days left` : `One day left`; return ( - - - - - {title} - - - Hello {userName}, -
-
- It appears that there has been a period of inactivity on your{' '} - {workspaceDisplayName} workspace. -
-
- Please note that the account is due for deactivation soon, and all - associated data within this workspace will be deleted. -
-
- No need for concern, though! Simply log in to your workspace within - the next 10 days to retain access. - - - - + + + <HighlightedText value={daysLeftInfo} /> + <MainText> + Hello {userName}, + <br /> + <br /> + It appears that there has been a period of inactivity on your{' '} + <b>{workspaceDisplayName}</b> workspace. + <br /> + <br /> + Please note that the account is due for deactivation soon, and all + associated data within this workspace will be deleted. + <br /> + <br /> + No need for concern, though! Simply log in to your workspace within the + next 10 days to retain access. + </MainText> + <CallToAction href="https://app.twenty.com" value="Connect to Twenty" /> + </BaseEmail> ); }; diff --git a/packages/twenty-server/src/workspace/emails/components/BaseEmail.tsx b/packages/twenty-server/src/workspace/emails/components/BaseEmail.tsx new file mode 100644 index 00000000000..94997e6f896 --- /dev/null +++ b/packages/twenty-server/src/workspace/emails/components/BaseEmail.tsx @@ -0,0 +1,17 @@ +import * as React from 'react'; +import { Container, Html } from '@react-email/components'; + +import { BaseHead } from 'src/workspace/emails/components/BaseHead'; +import { Logo } from 'src/workspace/emails/components/Logo'; + +export const BaseEmail = ({ children }) => { + return ( + <Html lang="en"> + <BaseHead /> + <Container width={290}> + <Logo /> + {children} + </Container> + </Html> + ); +}; diff --git a/packages/twenty-server/src/workspace/emails/components/Title.tsx b/packages/twenty-server/src/workspace/emails/components/Title.tsx new file mode 100644 index 00000000000..1b5aed29a0d --- /dev/null +++ b/packages/twenty-server/src/workspace/emails/components/Title.tsx @@ -0,0 +1,6 @@ +import { Heading } from '@react-email/components'; +import * as React from 'react'; + +export const Title = ({ value }) => { + return <Heading as="h1">{value}</Heading>; +};