Update email template

2024-01-10 14:43:14 +01:00
parent 927a5bcd80
commit e39aee06e1
5 changed files with 95 additions and 8 deletions
@@ -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 (
    <Html lang="en">
-      <Text>Some title</Text>
-      <Hr />
-      <Button href="https://example.com">Click me</Button>
+      <BaseHead />
+      <Container width={290}>
+        <Heading as="h1">{title}</Heading>
+        <HighlightedText value={daysLeftInfo} />
+        <Text>
+          Hello {userName},
+          <br />
+          <br />
+          It appears that there has been a period of inactivity on your Stripe
+          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.
+        </Text>
+        <CallToAction href="https://app.twenty.com" value="Connect to Twenty" />
+      </Container>
    </Html>
  );
 };
@@ -0,0 +1,20 @@
+import { Font, Head } from '@react-email/components';
+import * as React from 'react';
+
+export const BaseHead = () => {
+  return (
+    <Head>
+      <title>Twenty email</title>
+      <Font
+        fontFamily="Inter"
+        fallbackFontFamily="sans-serif"
+        webFont={{
+          url: 'https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap',
+          format: 'woff2',
+        }}
+        fontWeight={400}
+        fontStyle="normal"
+      />
+    </Head>
+  );
+};
@@ -0,0 +1,6 @@
+import { Button } from '@react-email/button';
+import * as React from 'react';
+
+export const CallToAction = ({ value, href }) => {
+  return <Button href={href}>{value}</Button>;
+};
@@ -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 (
+    <Row style={rowStyle}>
+      <Column>
+        <Text style={highlightedStyle}>{value}</Text>
+      </Column>
+    </Row>
+  );
+};
@@ -13,8 +13,19 @@ export class TotoCommand extends CommandRunner {
  }

  async run(): Promise<void> {
-    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 });