From e39aee06e1f6328e7e92e19cb879db7d30885c01 Mon Sep 17 00:00:00 2001 From: martmull Date: Wed, 10 Jan 2024 14:43:14 +0100 Subject: [PATCH] Update email template --- .../emails/clean-inactive-workspace.email.tsx | 35 +++++++++++++++---- .../workspace/emails/components/BaseHead.tsx | 20 +++++++++++ .../emails/components/CallToAction.tsx | 6 ++++ .../emails/components/HighlightedText.tsx | 27 ++++++++++++++ .../src/workspace/toto.command.ts | 15 ++++++-- 5 files changed, 95 insertions(+), 8 deletions(-) create mode 100644 packages/twenty-server/src/workspace/emails/components/BaseHead.tsx create mode 100644 packages/twenty-server/src/workspace/emails/components/CallToAction.tsx create mode 100644 packages/twenty-server/src/workspace/emails/components/HighlightedText.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 51a498c6c94..a323fe00dd0 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,15 +1,38 @@ import * as React from 'react'; -import { Button } from '@react-email/button'; -import { Hr } from '@react-email/hr'; import { Html } from '@react-email/html'; import { Text } from '@react-email/text'; +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'; + +export const CleanInactiveWorkspaceEmail = ({ title, daysLeft, userName }) => { + const daysLeftInfo = daysLeft > 1 ? `${daysLeft} days left` : `One day left`; -export const CleanInactiveWorkspaceEmail = () => { return ( - Some title -
- + + + {title} + + + Hello {userName}, +
+
+ It appears that there has been a period of inactivity on your Stripe + 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. + + + ); }; diff --git a/packages/twenty-server/src/workspace/emails/components/BaseHead.tsx b/packages/twenty-server/src/workspace/emails/components/BaseHead.tsx new file mode 100644 index 00000000000..020083bfbd4 --- /dev/null +++ b/packages/twenty-server/src/workspace/emails/components/BaseHead.tsx @@ -0,0 +1,20 @@ +import { Font, Head } from '@react-email/components'; +import * as React from 'react'; + +export const BaseHead = () => { + return ( + + Twenty email + + + ); +}; diff --git a/packages/twenty-server/src/workspace/emails/components/CallToAction.tsx b/packages/twenty-server/src/workspace/emails/components/CallToAction.tsx new file mode 100644 index 00000000000..d77646f2f5e --- /dev/null +++ b/packages/twenty-server/src/workspace/emails/components/CallToAction.tsx @@ -0,0 +1,6 @@ +import { Button } from '@react-email/button'; +import * as React from 'react'; + +export const CallToAction = ({ value, href }) => { + return ; +}; diff --git a/packages/twenty-server/src/workspace/emails/components/HighlightedText.tsx b/packages/twenty-server/src/workspace/emails/components/HighlightedText.tsx new file mode 100644 index 00000000000..79019c83b3e --- /dev/null +++ b/packages/twenty-server/src/workspace/emails/components/HighlightedText.tsx @@ -0,0 +1,27 @@ +import * as React from 'react'; +import { Row } from '@react-email/row'; +import { Text } from '@react-email/text'; +import { Column } from '@react-email/components'; + +const rowStyle = { + display: 'flex', +}; + +const highlightedStyle = { + borderRadius: '4px', + background: '#f1f1f1', + padding: '4px 8px', + fontSize: '16px', + fontWeight: 600, + color: '#333', +}; + +export const HighlightedText = ({ value }) => { + return ( + + + {value} + + + ); +}; diff --git a/packages/twenty-server/src/workspace/toto.command.ts b/packages/twenty-server/src/workspace/toto.command.ts index 95869f4da42..67fe92e3a36 100644 --- a/packages/twenty-server/src/workspace/toto.command.ts +++ b/packages/twenty-server/src/workspace/toto.command.ts @@ -13,8 +13,19 @@ export class TotoCommand extends CommandRunner { } async run(): Promise { - const html = render(CleanInactiveWorkspaceEmail(), { pretty: true }); - const text = render(CleanInactiveWorkspaceEmail(), { plainText: true }); + const emailData = { + title: 'Inactive Workspace 😴', + daysLeft: 10, + userName: 'Martin Müller', + }; + const html = render(CleanInactiveWorkspaceEmail(emailData), { + pretty: true, + }); + const text = render(CleanInactiveWorkspaceEmail(emailData), { + plainText: true, + }); + + console.log(html); await this.emailService.send({ to: 'martmull@hotmail.fr', html, text }); //await this.emailService.send({ to: 'martmull@hotmail.fr', html, text });