mailing template and send sign request error handling

apps/web/pages/api/documents/[id]/send.ts

@@ -42,17 +42,20 @@ async function postHandler(req: NextApiRequest, res: NextApiResponse) {
   const recipients = prisma.recipient.findMany({
     where: {
       documentId: +documentId,
-      sendStatus: SendStatus.NOT_SENT, // TODO REDO AFTER DEBUG
+      // sendStatus: SendStatus.NOT_SENT, // TODO REDO AFTER DEBUG
     },
   });
+  (await recipients).forEach(async (recipient) => {
+    await sendSigningRequest(recipient, document)
+      .then(() => {
+        res.status(200).end();
+      })
+      .catch((err) => {
+        return res.status(502).end("Coud not send request for signing.");
+      });
+  });
 
   // todo check if recipient has an account and show them in their inbox or something
-  (await recipients).forEach(async (recipient) => {
-    await sendSigningRequest(recipient, document);
-  });
-
-  // todo way better error handling
-  return res.status(200).end();
 }
 
 export default defaultHandler({

packages/lib/mail/index.ts

@@ -1,2 +1,3 @@
 export { sendSigningRequest as sendSigningRequest } from "./sendSigningRequest";
 export { sendSignedMail } from "./sendSignedMail";
+export { transactionEmailTemplate } from "./transactionEmailTemplate"

packages/lib/mail/sendMail.ts

@@ -1,24 +1,23 @@
 import nodemailer from "nodemailer";
 import nodemailerSendgrid from "nodemailer-sendgrid";
 
-export const sendMail = async (
+export const sendMail = async (to: string, subject: string, body: string) => {
-  to: string,
-  subject: string,
-  htmlFormattedMessage: string
-) => {
   if (!process.env.SENDGRID_API_KEY)
     throw new Error("Sendgrid API Key not set.");
 
-  const transport = nodemailer.createTransport(
+  const transport = await nodemailer.createTransport(
     nodemailerSendgrid({
       apiKey: process.env.SENDGRID_API_KEY || "",
     })
   );
-
+  await transport
-  await transport.sendMail({
+    .sendMail({
-    from: process.env.MAIL_FROM,
+      from: process.env.MAIL_FROM,
-    to: to,
+      to: to,
-    subject: subject,
+      subject: subject,
-    html: htmlFormattedMessage,
+      html: body,
-  });
+    })
+    .catch((err) => {
+      throw err;
+    });
 };

packages/lib/mail/sendSignedMail.ts

@@ -1,50 +1,20 @@
 import { sendMail } from "./sendMail";
 import { NEXT_PUBLIC_WEBAPP_URL } from "@documenso/lib/constants";
+import { transactionEmailTemplate } from "@documenso/lib/mail";
 
 export const sendSignedMail = async (recipient: any, document: any) => {
   // todo check if recipient has an account
   await sendMail(
     document.User.email,
     `${recipient.email} signed "${document.title}"`,
-    `
+    transactionEmailTemplate(
-    <div style="background-color: #eaeaea; padding: 2%;">
+      `${document.User.name || recipient.email} has signed your document ${
-      <div style="text-align:center; margin: auto; font-size: 14px; font-color: #353434; max-width: 500px; border-radius: 0.375rem; background: white; padding: 50px">
+        document.title
-        <img src="${NEXT_PUBLIC_WEBAPP_URL}/logo_h.png" alt="Documenso Logo" style="width: 180px; display: block; margin: auto; margin-bottom: 14px;
+      }`,
-}">
+      document,
-      ${document.User.name || recipient.email} has signed your document ${
+      recipient,
-      document.title
+      `${NEXT_PUBLIC_WEBAPP_URL}/documents/${document.id}`,
-    }.
+      `View Document`
-        <p style="margin: 30px;">
+    )
-          <a href="${NEXT_PUBLIC_WEBAPP_URL}/documents/${
-      document.id
-    }" style="background-color: #37f095; color: white; border-color: transparent; border-width: 1px; border-radius: 0.375rem; font-size: 18px; padding-left: 16px; padding-right: 16px; padding-top: 10px; padding-bottom: 10px; text-decoration: none; margin-top: 4px; margin-bottom: 4px;">
-            View Document
-          </a>
-        </p>
-        <hr size="1" style="height:1px;border:none;color:#e0e0e0;background-color:#e0e0e0">
-          Click the button to view ${document.title}.<br>
-          <small>If you have questions about this document, your should ask ${
-            document.User.name
-          }.</small>
-        <hr size="1" style="height:1px;border:none;color:#e0e0e0;background-color:#e0e0e0">
-      </div>
-
-      <div style="text-align: left; line-height: 18px; color: #666666; margin: 24px">
-        <div>
-          <b>Do not forward.</b>
-          <br>
-          This email contains a link to a secure document. Keep it secret and do not forward this email.
-        </div>
-        <div style="margin-top: 12px">
-          <b>Need help?</b>
-          <br>
-          Contact us at <a href="mailto:hi@documenso.com">hi@documenso.com</a>  
-      </div>
-      <hr size="1" style="height: 1px; border: none; color: #D8D8D8; background-color: #D8D8D8">
-      <div style="text-align: center">
-        <small>Easy and beautiful document signing by Documenso.</small>
-      </div>
-    </div>
-    `
   );
 };

packages/lib/mail/sendSigningRequest.ts

@@ -2,47 +2,24 @@ import prisma from "@documenso/prisma";
 import { sendMail } from "./sendMail";
 import { SendStatus, DocumentStatus } from "@prisma/client";
 import { NEXT_PUBLIC_WEBAPP_URL } from "../constants";
+import { transactionEmailTemplate } from "@documenso/lib/mail";
 
 export const sendSigningRequest = async (recipient: any, document: any) => {
   // todo errror handling
   await sendMail(
     document.User.email,
     `Please sign ${document.title}`,
-    `
+    transactionEmailTemplate(
-    <div style="background-color: #eaeaea; padding: 2%;">
+      `${document.User.name} (${document.User.email}) has sent you a document to sign. `,
-      <div style="text-align:center; margin: auto; font-size: 14px; font-color: #353434; max-width: 500px; border-radius: 0.375rem; background: white; padding: 50px">
+      document,
-        <img src="${NEXT_PUBLIC_WEBAPP_URL}/logo_h.png" alt="Documenso Logo" style="width: 180px; display: block; margin: auto; margin-bottom: 14px;">
+      recipient,
-      ${document.User.name} (${document.User.email}) has sent you a document to sign. 
+      `${NEXT_PUBLIC_WEBAPP_URL}/documents/${document.id}/sign?token=${recipient.token}`,
-        <p style="margin: 30px;">
+      `Sign Document`
-          <a href="${NEXT_PUBLIC_WEBAPP_URL}/documents/${document.id}/sign?token=${recipient.token}" style="background-color: #37f095; color: white; border-color: transparent; border-width: 1px; border-radius: 0.375rem; font-size: 18px; padding-left: 16px; padding-right: 16px; padding-top: 10px; padding-bottom: 10px; text-decoration: none; margin-top: 4px; margin-bottom: 4px;">
+    )
-            Sign Document
+  ).catch((err) => {
-          </a>
+    console.log("catch 1");
-        </p>
+    throw err;
-        <hr size="1" style="height:1px;border:none;color:#e0e0e0;background-color:#e0e0e0">
+  });
-          Click the button to view and sign ${document.title}.<br>
-          <small>If you have questions about this document, your should ask ${document.User.name}.</small>
-        <hr size="1" style="height:1px;border:none;color:#e0e0e0;background-color:#e0e0e0">
-      </div>
-
-      <div style="text-align: left; line-height: 18px; color: #666666; margin: 24px">
-        <div>
-          <b>Do not forward.</b>
-          <br>
-          This email contains a link to a secure document. Keep it secret and do not forward this email.
-        </div>
-        <div style="margin-top: 12px">
-          <b>Need help?</b>
-          <br>
-          Contact us at <a href="mailto:hi@documenso.com">hi@documenso.com</a>  
-      </div>
-      <hr size="1" style="height: 1px; border: none; color: #D8D8D8; background-color: #D8D8D8">
-      <div style="text-align: center">
-        <small>Easy and beautiful document signing by Documenso.</small>
-      </div>
-    </div>
-    `
-  );
-
   await prisma.recipient.update({
     where: {
       id: recipient.id,

packages/lib/mail/transactionEmailTemplate.ts

@@ -0,0 +1,51 @@
+import { NEXT_PUBLIC_WEBAPP_URL } from "../constants";
+import { Document as PrismaDocument } from "@prisma/client";
+
+export const transactionEmailTemplate = (
+  message: string,
+  document: any,
+  recipient: any,
+  ctaLink: string,
+  ctaLabel: string
+) => {
+  const html = `
+    <div style="background-color: #eaeaea; padding: 2%;">
+      <div style="text-align:center; margin: auto; font-size: 14px; font-color: #353434; max-width: 500px; border-radius: 0.375rem; background: white; padding: 50px">
+        <img src="${NEXT_PUBLIC_WEBAPP_URL}/logo_h.png" alt="Documenso Logo" style="width: 180px; display: block; margin: auto; margin-bottom: 14px;">
+        ${message} 
+        <p style="margin: 30px;">
+          <a href="${ctaLink}" style="background-color: #37f095; color: white; border-color: transparent; border-width: 1px; border-radius: 0.375rem; font-size: 18px; padding-left: 16px; padding-right: 16px; padding-top: 10px; padding-bottom: 10px; text-decoration: none; margin-top: 4px; margin-bottom: 4px;">
+          ${ctaLabel}
+          </a>
+        </p>
+        <hr size="1" style="height:1px;border:none;color:#e0e0e0;background-color:#e0e0e0">
+        Click the button to view "${document.title}".<br>
+        <small>If you have questions about this document, you should ask ${document.User.name}.</small>
+        <hr size="1" style="height:1px;border:none;color:#e0e0e0;background-color:#e0e0e0">
+      </div>
+    `;
+
+  const footer = `     
+      <div style="text-align: left; line-height: 18px; color: #666666; margin: 24px">
+        <div>
+          <b>Do not forward.</b>
+          <br>
+          This email contains a link to a secure document. Keep it secret and do not forward this email.
+        </div>
+        <div style="margin-top: 12px">
+          <b>Need help?</b>
+          <br>
+          Contact us at <a href="mailto:hi@documenso.com">hi@documenso.com</a>  
+        </div>
+        <hr size="1" style="height: 1px; border: none; color: #D8D8D8; background-color: #D8D8D8">
+        <div style="text-align: center">
+          <small>Easy and beautiful document signing by Documenso.</small>
+        </div>
+      </div>
+    </div>
+      `;
+
+  return html + footer;
+};
+
+export default transactionEmailTemplate;