feat: email templates

adds email templates using `react-email` which will be used for invites, signing and document completion. authored by @dephraiim
2025-11-13 08:13:56 +10:00 · 2023-06-24 14:59:08 +10:00
parent 0b1c4fadc6
commit ca0f4eefd2
17 changed files with 6850 additions and 131 deletions
--- a/packages/email/templates/document-completed.tsx
+++ b/packages/email/templates/document-completed.tsx
@ -0,0 +1,129 @@
+import {
+  Body,
+  Button,
+  Container,
+  Head,
+  Html,
+  Img,
+  Link,
+  Preview,
+  Section,
+  Tailwind,
+  Text,
+} from '@react-email/components';
+
+import * as config from '@documenso/tailwind-config';
+
+interface DocumentCompletedEmailTemplateProps {
+  downloadLink?: string;
+  reviewLink?: string;
+  documentName?: string;
+  assetBaseUrl?: string;
+}
+
+export const DocumentCompletedEmailTemplate = ({
+  downloadLink = 'https://documenso.com',
+  reviewLink = 'https://documenso.com',
+  documentName = 'Open Source Pledge.pdf',
+  assetBaseUrl = 'http://localhost:3002',
+}: DocumentCompletedEmailTemplateProps) => {
+  const previewText = `Completed Document`;
+
+  const getAssetUrl = (path: string) => {
+    return new URL(path, assetBaseUrl).toString();
+  };
+
+  return (
+    <Html>
+      <Head />
+      <Preview>{previewText}</Preview>
+      <Tailwind
+        config={{
+          theme: {
+            extend: {
+              colors: config.theme.extend.colors,
+            },
+          },
+        }}
+      >
+        <Body className="mx-auto my-auto font-sans">
+          <Section className="bg-white">
+            <Container className="mx-auto mb-2 mt-8 max-w-xl rounded-lg border border-solid border-slate-200 p-2 backdrop-blur-sm">
+              <Section className="p-2">
+                <Img src={getAssetUrl('/static/logo.png')} alt="Documenso Logo" className="h-6" />
+
+                <Section className="mt-4 flex-row items-center justify-center">
+                  <div className="flex items-center justify-center p-4">
+                    <Img
+                      className="h-42"
+                      src={getAssetUrl('/static/document.png')}
+                      alt="Documenso"
+                    />
+                  </div>
+
+                  <Text className="mb-4 flex items-center justify-center text-center text-base font-semibold text-[#7AC455]">
+                    <Img
+                      src={getAssetUrl('/static/completed.png')}
+                      className="-mb-0.5 mr-2 inline h-7 w-7"
+                    />
+                    Completed
+                  </Text>
+
+                  <Text className="text-primary mb-0 text-center text-lg font-semibold">
+                    “{documentName}” was signed by all signers
+                  </Text>
+
+                  <Text className="my-1 text-center text-base text-slate-400">
+                    Continue by downloading or reviewing the document.
+                  </Text>
+
+                  <Section className="mb-6 mt-8 text-center">
+                    <Button
+                      className="mr-4 inline-flex items-center justify-center rounded-lg border border-solid border-slate-200 px-4 py-2 text-center text-sm font-medium text-black no-underline"
+                      href={reviewLink}
+                    >
+                      <Img
+                        src={getAssetUrl('/static/review.png')}
+                        className="-mb-1 mr-2 inline h-5 w-5"
+                      />
+                      Review
+                    </Button>
+                    <Button
+                      className="inline-flex items-center justify-center rounded-lg border border-solid border-slate-200 px-4 py-2 text-center text-sm font-medium text-black no-underline"
+                      href={downloadLink}
+                    >
+                      <Img
+                        src={getAssetUrl('/static/download.png')}
+                        className="-mb-1 mr-2 inline h-5 w-5"
+                      />
+                      Download
+                    </Button>
+                  </Section>
+                </Section>
+              </Section>
+            </Container>
+
+            <Container className="mx-auto max-w-xl">
+              <Section>
+                <Text className="my-4 text-base text-slate-400">
+                  This document was sent using{' '}
+                  <Link className="text-[#7AC455]" href="https://documenso.com">
+                    Documenso.
+                  </Link>
+                </Text>
+
+                <Text className="my-8 text-sm text-slate-400">
+                  Documenso
+                  <br />
+                  2261 Market Street, #5211, San Francisco, CA 94114, USA
+                </Text>
+              </Section>
+            </Container>
+          </Section>
+        </Body>
+      </Tailwind>
+    </Html>
+  );
+};
+
+export default DocumentCompletedEmailTemplate;