Add Base Email template

2024-01-10 15:40:33 +01:00
parent c745260020
commit 7b70dacc14
3 changed files with 46 additions and 29 deletions
@@ -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 (
-    <Html lang="en">
-      <BaseHead />
-      <Container width={290}>
-        <Logo />
-        <Heading as="h1">{title}</Heading>
-        <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" />
-      </Container>
-    </Html>
+    <BaseEmail>
+      <Title value={title} />
+      <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>
  );
 };

@@ -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>
+  );
+};
@@ -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>;
+};