feat: update email templates

Add SPM email attachment

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;

package-lock.json

@@ -19809,6 +19809,7 @@
         "@aws-sdk/signature-v4-crt": "^3.410.0",
         "@documenso/email": "*",
         "@documenso/prisma": "*",
+        "@documenso/signing": "*",
         "@next-auth/prisma-adapter": "1.0.7",
         "@pdf-lib/fontkit": "^1.1.1",
         "@scure/base": "^1.1.3",
@@ -19862,17 +19863,23 @@
     "packages/signing": {
       "name": "@documenso/signing",
       "version": "1.0.0",
-      "license": "MIT",
+      "license": "AGPLv3",
       "dependencies": {
         "@documenso/tsconfig": "*",
         "node-forge": "^1.3.1",
         "node-signpdf": "^2.0.0",
-        "pdf-lib": "^1.17.1"
+        "pdf-lib": "^1.17.1",
+        "ts-pattern": "^5.0.5"
       },
       "devDependencies": {
         "@types/node-forge": "^1.3.4"
       }
     },
+    "packages/signing/node_modules/ts-pattern": {
+      "version": "5.0.5",
+      "resolved": "https://registry.npmjs.org/ts-pattern/-/ts-pattern-5.0.5.tgz",
+      "integrity": "sha512-tL0w8U/pgaacOmkb9fRlYzWEUDCfVjjv9dD4wHTgZ61MjhuMt46VNWTG747NqW6vRzoWIKABVhFSOJ82FvXrfA=="
+    },
     "packages/tailwind-config": {
       "name": "@documenso/tailwind-config",
       "version": "0.0.0",

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,15 +1,15 @@
-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) => {
@@ -27,39 +27,56 @@ 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={`${process.env.NEXT_PUBLIC_WEBAPP_URL}/signup`}
+            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 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="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"
+            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 { 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>

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

@@ -20,7 +20,6 @@ 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}
                 />