Merge pull request #430 from documenso/feat/update-email-templates

feat: update email templates

apps/marketing/src/components/(marketing)/single-player-mode/create-single-player-document.action.ts

@@ -177,9 +177,7 @@ export const createSinglePlayerDocument = async (
     },
   );
 
-  // Todo: Handle `downloadLink`
   const template = createElement(DocumentSelfSignedEmailTemplate, {
-    downloadLink: `${process.env.NEXT_PUBLIC_MARKETING_URL}/single-player-mode/${documentToken}`,
     documentName: documentName,
     assetBaseUrl: process.env.NEXT_PUBLIC_WEBAPP_URL || 'http://localhost:3000',
   });
@@ -197,6 +195,7 @@ export const createSinglePlayerDocument = async (
     subject: 'Document signed',
     html: render(template),
     text: render(template, { plainText: true }),
+    attachments: [{ content: Buffer.from(pdfBytes), filename: documentName }],
   });
 
   return documentToken;

packages/email/template-components/template-document-completed.tsx

@@ -1,7 +1,9 @@
-import { Button, Column, Img, Row, Section, Tailwind, Text } from '@react-email/components';
+import { Button, Column, Img, Section, Tailwind, Text } from '@react-email/components';
 
 import * as config from '@documenso/tailwind-config';
 
+import { TemplateDocumentImage } from './template-document-image';
+
 export interface TemplateDocumentCompletedProps {
   downloadLink: string;
   documentName: string;
@@ -27,27 +29,20 @@ export const TemplateDocumentCompleted = ({
         },
       }}
     >
-      <Section>
+      <TemplateDocumentImage className="mt-6" assetBaseUrl={assetBaseUrl} />
-        <Row className="table-fixed">
-          <Column />
 
-          <Column>
+      <Section>
-            <Img
+        <Section className="mb-4">
-              className="h-42 mx-auto"
+          <Column align="center">
-              src={getAssetUrl('/static/document.png')}
+            <Text className="text-base font-semibold text-[#7AC455]">
-              alt="Documenso"
+              <Img
-            />
+                src={getAssetUrl('/static/completed.png')}
+                className="-mt-0.5 mr-2 inline h-7 w-7 align-middle"
+              />
+              Completed
+            </Text>
           </Column>
-
+        </Section>
-          <Column />
-        </Row>
-      </Section>
-
-      <Section>
-        <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
@@ -66,10 +61,13 @@ export const TemplateDocumentCompleted = ({
             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"
+            className="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" />
+            <Img
+              src={getAssetUrl('/static/download.png')}
+              className="mb-0.5 mr-2 inline h-5 w-5 align-middle"
+            />
             Download
           </Button>
         </Section>

packages/email/template-components/template-document-image.tsx

@@ -0,0 +1,28 @@
+import { Column, Img, Row, Section } from '@react-email/components';
+
+export interface TemplateDocumentImageProps {
+  assetBaseUrl: string;
+  className?: string;
+}
+
+export const TemplateDocumentImage = ({ assetBaseUrl, className }: TemplateDocumentImageProps) => {
+  const getAssetUrl = (path: string) => {
+    return new URL(path, assetBaseUrl).toString();
+  };
+
+  return (
+    <Section className={className}>
+      <Row className="table-fixed">
+        <Column />
+
+        <Column>
+          <Img className="h-42 mx-auto" src={getAssetUrl('/static/document.png')} alt="Documenso" />
+        </Column>
+
+        <Column />
+      </Row>
+    </Section>
+  );
+};
+
+export default TemplateDocumentImage;

packages/email/template-components/template-document-invite.tsx

@@ -1,7 +1,9 @@
-import { Button, Column, Img, Row, Section, Tailwind, Text } from '@react-email/components';
+import { Button, Section, Tailwind, Text } from '@react-email/components';
 
 import * as config from '@documenso/tailwind-config';
 
+import { TemplateDocumentImage } from './template-document-image';
+
 export interface TemplateDocumentInviteProps {
   inviterName: string;
   inviterEmail: string;
@@ -16,10 +18,6 @@ export const TemplateDocumentInvite = ({
   signDocumentLink,
   assetBaseUrl,
 }: TemplateDocumentInviteProps) => {
-  const getAssetUrl = (path: string) => {
-    return new URL(path, assetBaseUrl).toString();
-  };
-
   return (
     <Tailwind
       config={{
@@ -30,21 +28,7 @@ export const TemplateDocumentInvite = ({
         },
       }}
     >
-      <Section className="mt-4">
+      <TemplateDocumentImage className="mt-6" assetBaseUrl={assetBaseUrl} />
-        <Row className="table-fixed">
-          <Column />
-
-          <Column>
-            <Img
-              className="h-42 mx-auto"
-              src={getAssetUrl('/static/document.png')}
-              alt="Documenso"
-            />
-          </Column>
-
-          <Column />
-        </Row>
-      </Section>
 
       <Section>
         <Text className="text-primary mx-auto mb-0 max-w-[80%] text-center text-lg font-semibold">

packages/email/template-components/template-document-pending.tsx

@@ -1,7 +1,9 @@
-import { Column, Img, Row, Section, Tailwind, Text } from '@react-email/components';
+import { Column, Img, Section, Tailwind, Text } from '@react-email/components';
 
 import * as config from '@documenso/tailwind-config';
 
+import { TemplateDocumentImage } from './template-document-image';
+
 export interface TemplateDocumentPendingProps {
   documentName: string;
   assetBaseUrl: string;
@@ -25,27 +27,20 @@ export const TemplateDocumentPending = ({
         },
       }}
     >
-      <Section>
+      <TemplateDocumentImage className="mt-6" assetBaseUrl={assetBaseUrl} />
-        <Row className="table-fixed">
-          <Column />
 
-          <Column>
+      <Section>
-            <Img
+        <Section className="mb-4">
-              className="h-42 mx-auto"
+          <Column align="center">
-              src={getAssetUrl('/static/document.png')}
+            <Text className="text-base font-semibold text-blue-500">
-              alt="Documenso"
+              <Img
-            />
+                src={getAssetUrl('/static/clock.png')}
+                className="-mt-0.5 mr-2 inline h-7 w-7 align-middle"
+              />
+              Waiting for others
+            </Text>
           </Column>
-
+        </Section>
-          <Column />
-        </Row>
-      </Section>
-
-      <Section>
-        <Text className="mb-4 flex items-center justify-center text-center text-base font-semibold text-blue-500">
-          <Img src={getAssetUrl('/static/clock.png')} className="-mb-0.5 mr-2 inline h-7 w-7" />
-          Waiting for others
-        </Text>
 
         <Text className="text-primary mb-0 text-center text-lg font-semibold">
           “{documentName}” has been signed

packages/email/template-components/template-document-self-signed.tsx

@@ -1,18 +1,20 @@
-import { Button, Img, Section, Tailwind, Text } from '@react-email/components';
+import { Button, Column, Img, Link, Section, Tailwind, Text } from '@react-email/components';
 
 import * as config from '@documenso/tailwind-config';
 
+import { TemplateDocumentImage } from './template-document-image';
+
 export interface TemplateDocumentSelfSignedProps {
-  downloadLink: string;
   documentName: string;
   assetBaseUrl: string;
 }
 
 export const TemplateDocumentSelfSigned = ({
-  downloadLink,
   documentName,
   assetBaseUrl,
 }: TemplateDocumentSelfSignedProps) => {
+  const signUpUrl = `${process.env.NEXT_PUBLIC_WEBAPP_URL ?? 'http://localhost:3000'}/signup`;
+
   const getAssetUrl = (path: string) => {
     return new URL(path, assetBaseUrl).toString();
   };
@@ -27,39 +29,59 @@ export const TemplateDocumentSelfSigned = ({
         },
       }}
     >
+      <TemplateDocumentImage className="mt-6" assetBaseUrl={assetBaseUrl} />
+
       <Section className="flex-row items-center justify-center">
-        <div className="flex items-center justify-center p-4">
+        <Section>
-          <Img className="h-42" src={getAssetUrl('/static/document.png')} alt="Documenso" />
+          <Column align="center">
-        </div>
+            <Text className="text-base font-semibold text-[#7AC455]">
+              <Img
+                src={getAssetUrl('/static/completed.png')}
+                className="-mt-0.5 mr-2 inline h-7 w-7 align-middle"
+              />
+              Completed
+            </Text>
+          </Column>
+        </Section>
 
-        <Text className="mb-4 flex items-center justify-center text-center text-base font-semibold text-[#7AC455]">
+        <Text className="text-primary mb-0 mt-6 text-center text-lg font-semibold">
-          <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">
           You have signed “{documentName}”
         </Text>
 
-        <Text className="my-1 text-center text-base text-slate-400">
+        <Text className="mx-auto mb-6 mt-1 max-w-[80%] text-center text-base text-slate-400">
-          Check out our plans to access the full suite of features.
+          Create a{' '}
+          <Link
+            href={signUpUrl}
+            target="_blank"
+            className="text-documenso-700 hover:text-documenso-600 whitespace-nowrap"
+          >
+            free account
+          </Link>{' '}
+          to access your signed documents at any time.
         </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={signUpUrl}
+            className="mr-4 rounded-lg border border-solid border-slate-200 px-4 py-2 text-center text-sm font-medium text-black no-underline"
+          >
+            <Img
+              src={getAssetUrl('/static/user-plus.png')}
+              className="mb-0.5 mr-2 inline h-5 w-5 align-middle"
+            />
+            Create account
+          </Button>
+
+          <Button
+            className="rounded-lg border border-solid border-slate-200 px-4 py-2 text-center text-sm font-medium text-black no-underline"
             href="https://documenso.com/pricing"
           >
-            <Img src={getAssetUrl('/static/review.png')} className="-mb-1 mr-2 inline h-5 w-5" />
+            <Img
+              src={getAssetUrl('/static/review.png')}
+              className="mb-0.5 mr-2 inline h-5 w-5 align-middle"
+            />
             View plans
           </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>
     </Tailwind>

packages/email/template-components/template-forgot-password.tsx

@@ -1,7 +1,9 @@
-import { Button, Img, Section, Tailwind, Text } from '@react-email/components';
+import { Button, Section, Tailwind, Text } from '@react-email/components';
 
 import * as config from '@documenso/tailwind-config';
 
+import { TemplateDocumentImage } from './template-document-image';
+
 export type TemplateForgotPasswordProps = {
   resetPasswordLink: string;
   assetBaseUrl: string;
@@ -11,10 +13,6 @@ export const TemplateForgotPassword = ({
   resetPasswordLink,
   assetBaseUrl,
 }: TemplateForgotPasswordProps) => {
-  const getAssetUrl = (path: string) => {
-    return new URL(path, assetBaseUrl).toString();
-  };
-
   return (
     <Tailwind
       config={{
@@ -25,11 +23,9 @@ export const TemplateForgotPassword = ({
         },
       }}
     >
-      <Section className="mt-4 flex-row items-center justify-center">
+      <TemplateDocumentImage className="mt-6" assetBaseUrl={assetBaseUrl} />
-        <div className="flex items-center justify-center p-4">
-          <Img className="h-42" src={getAssetUrl('/static/document.png')} alt="Documenso" />
-        </div>
 
+      <Section className="flex-row items-center justify-center">
         <Text className="text-primary mx-auto mb-0 max-w-[80%] text-center text-lg font-semibold">
           Forgot your password?
         </Text>

packages/email/template-components/template-reset-password.tsx

@@ -1,7 +1,9 @@
-import { Img, Section, Tailwind, Text } from '@react-email/components';
+import { Button, Section, Tailwind, Text } from '@react-email/components';
 
 import * as config from '@documenso/tailwind-config';
 
+import { TemplateDocumentImage } from './template-document-image';
+
 export interface TemplateResetPasswordProps {
   userName: string;
   userEmail: string;
@@ -9,10 +11,6 @@ export interface TemplateResetPasswordProps {
 }
 
 export const TemplateResetPassword = ({ assetBaseUrl }: TemplateResetPasswordProps) => {
-  const getAssetUrl = (path: string) => {
-    return new URL(path, assetBaseUrl).toString();
-  };
-
   return (
     <Tailwind
       config={{
@@ -23,11 +21,9 @@ export const TemplateResetPassword = ({ assetBaseUrl }: TemplateResetPasswordPro
         },
       }}
     >
-      <Section className="mt-4 flex-row items-center justify-center">
+      <TemplateDocumentImage className="mt-6" assetBaseUrl={assetBaseUrl} />
-        <div className="flex items-center justify-center p-4">
-          <Img className="h-42" src={getAssetUrl('/static/document.png')} alt="Documenso" />
-        </div>
 
+      <Section className="flex-row items-center justify-center">
         <Text className="text-primary mx-auto mb-0 max-w-[80%] text-center text-lg font-semibold">
           Password updated!
         </Text>
@@ -35,6 +31,15 @@ export const TemplateResetPassword = ({ assetBaseUrl }: TemplateResetPasswordPro
         <Text className="my-1 text-center text-base text-slate-400">
           Your password has been updated.
         </Text>
+
+        <Section className="mb-6 mt-8 text-center">
+          <Button
+            className="bg-documenso-500 inline-flex items-center justify-center rounded-lg px-6 py-3 text-center text-sm font-medium text-black no-underline"
+            href={`${process.env.NEXT_PUBLIC_WEBAPP_URL ?? 'http://localhost:3000'}/signin`}
+          >
+            Sign In
+          </Button>
+        </Section>
       </Section>
     </Tailwind>
   );

packages/email/templates/document-completed.tsx

@@ -15,7 +15,7 @@ import {
   TemplateDocumentCompleted,
   TemplateDocumentCompletedProps,
 } from '../template-components/template-document-completed';
-import TemplateFooter from '../template-components/template-footer';
+import { TemplateFooter } from '../template-components/template-footer';
 
 export type DocumentCompletedEmailTemplateProps = Partial<TemplateDocumentCompletedProps>;
 

packages/email/templates/document-invite.tsx

@@ -18,7 +18,7 @@ import {
   TemplateDocumentInvite,
   TemplateDocumentInviteProps,
 } from '../template-components/template-document-invite';
-import TemplateFooter from '../template-components/template-footer';
+import { TemplateFooter } from '../template-components/template-footer';
 
 export type DocumentInviteEmailTemplateProps = Partial<TemplateDocumentInviteProps> & {
   customBody?: string;

packages/email/templates/document-self-signed.tsx

@@ -15,12 +15,11 @@ import {
   TemplateDocumentSelfSigned,
   TemplateDocumentSelfSignedProps,
 } from '../template-components/template-document-self-signed';
-import TemplateFooter from '../template-components/template-footer';
+import { TemplateFooter } from '../template-components/template-footer';
 
 export type DocumentSelfSignedTemplateProps = TemplateDocumentSelfSignedProps;
 
 export const DocumentSelfSignedEmailTemplate = ({
-  downloadLink = 'https://documenso.com',
   documentName = 'Open Source Pledge.pdf',
   assetBaseUrl = 'http://localhost:3002',
 }: DocumentSelfSignedTemplateProps) => {
@@ -54,7 +53,6 @@ export const DocumentSelfSignedEmailTemplate = ({
                 />
 
                 <TemplateDocumentSelfSigned
-                  downloadLink={downloadLink}
                   documentName={documentName}
                   assetBaseUrl={assetBaseUrl}
                 />

packages/email/templates/forgot-password.tsx

@@ -11,7 +11,7 @@ import {
 
 import config from '@documenso/tailwind-config';
 
-import TemplateFooter from '../template-components/template-footer';
+import { TemplateFooter } from '../template-components/template-footer';
 import {
   TemplateForgotPassword,
   TemplateForgotPasswordProps,

packages/email/templates/reset-password.tsx

@@ -14,7 +14,7 @@ import {
 
 import config from '@documenso/tailwind-config';
 
-import TemplateFooter from '../template-components/template-footer';
+import { TemplateFooter } from '../template-components/template-footer';
 import {
   TemplateResetPassword,
   TemplateResetPasswordProps,