add subjects to templates (#364)

* add subjects to templates * use jsdom-env, add more tests * import template
sofn-xyz · Nov 28, 2022 · 5635a53 · 5635a53 · vercel · Nov 28, 2022
1 parent 6bae8ec
commit 5635a53
Show file tree

Hide file tree

Showing 17 changed files with 287 additions and 36 deletions.
diff --git a/jest.config.ts b/jest.config.ts
@@ -16,7 +16,7 @@ const jsdomConfig = async (): Promise<any> => {
       name: "jest.jsdom",
       color: "magenta",
     },
-    testEnvironment: "jest-environment-jsdom",
+    testEnvironment: "<rootDir>/jsdom.env.ts",
     setupFilesAfterEnv: ["<rootDir>/testSetup.ts"],
     testMatch: [
       "<rootDir>/packages/cli/src/pages/**/__test__/**/*.test.[jt]s?(x)",

diff --git a/jsdom.env.ts b/jsdom.env.ts
@@ -0,0 +1,21 @@
+/* eslint-disable @typescript-eslint/no-var-requires */
+import { TestEnvironment } from "jest-environment-jsdom";
+
+class CustomTestEnvironment extends TestEnvironment {
+  async setup() {
+    await super.setup();
+    // TextEncoder is required by node-html-parser
+    if (typeof this.global.TextEncoder === "undefined") {
+      const { TextEncoder } = require("util");
+      this.global.TextEncoder = TextEncoder;
+    }
+
+    // setImmediate is required by nodemailer
+    if (typeof this.global.setImmediate === "undefined") {
+      const { setImmediate } = require("timers");
+      this.global.setImmediate = setImmediate;
+    }
+  }
+}
+
+module.exports = CustomTestEnvironment;
diff --git a/packages/cli/src/components/PreviewSender.tsx b/packages/cli/src/components/PreviewSender.tsx
@@ -1,13 +1,11 @@
 import React, { useCallback, useEffect, useState } from "react";
 
 type PreviewSenderProps = {
-  html?: string;
-  previewFunction?: string;
-  previewClass?: string;
+  previewFunction: string;
+  previewClass: string;
 };
 
 const PreviewSender: React.FC<PreviewSenderProps> = ({
-  html,
   previewFunction,
   previewClass,
 }) => {
@@ -34,10 +32,8 @@ const PreviewSender: React.FC<PreviewSenderProps> = ({
         setSending(true);
         const payload: SendPreviewRequestBody = {
           to: email,
-          html,
           previewFunction,
           previewClass,
-          subject: `${previewClass} - ${previewFunction}`,
         };
 
         const response = await fetch("/api/previews/send", {
@@ -76,7 +72,7 @@ const PreviewSender: React.FC<PreviewSenderProps> = ({
         setSending(false);
       }
     },
-    [html, previewClass, previewFunction, email]
+    [previewClass, previewFunction, email]
   );
 
   const onInputChange: React.ChangeEventHandler<HTMLInputElement> = useCallback(

diff --git a/packages/cli/src/custom.d.ts b/packages/cli/src/custom.d.ts
@@ -10,10 +10,8 @@ type Intercept = {
 
 type SendPreviewRequestBody = {
   to: string;
-  html?: string;
-  previewFunction?: string;
-  previewClass?: string;
-  subject: string;
+  previewFunction: string;
+  previewClass: string;
 };
 
 type SendPreviewResponseBody = {

diff --git a/packages/cli/src/generator_templates/ts/emails/AccountCreated.tsx b/packages/cli/src/generator_templates/ts/emails/AccountCreated.tsx
@@ -17,8 +17,11 @@ import {
   textBase,
   textXl,
 } from "./components/theme";
+import { Template } from "mailing-core";
 
-const AccountCreated: React.FC<{ name: string }> = ({ name }) => (
+type AccountCreatedProps = { name: string };
+
+const AccountCreated: Template<AccountCreatedProps> = ({ name }) => (
   <Mjml>
     <Head />
     <MjmlBody width={600}>
@@ -76,4 +79,6 @@ const AccountCreated: React.FC<{ name: string }> = ({ name }) => (
   </Mjml>
 );
 
+AccountCreated.subject = ({ name }) => `Welcome to BookBook, ${name}!`;
+
 export default AccountCreated;
diff --git a/packages/cli/src/generator_templates/ts/emails/NewSignIn.tsx b/packages/cli/src/generator_templates/ts/emails/NewSignIn.tsx
@@ -25,8 +25,9 @@ type NewSignInProps = {
   body: ReactElement;
   bulletedList: ReactElement;
 };
+import { Template } from "mailing-core";
 
-const NewSignIn: React.FC<NewSignInProps> = ({
+const NewSignIn: Template<NewSignInProps> = ({
   name,
   headline,
   body,

diff --git a/packages/cli/src/generator_templates/ts/emails/Reservation.tsx b/packages/cli/src/generator_templates/ts/emails/Reservation.tsx
@@ -19,6 +19,7 @@ import {
   MjmlSpacer,
   MjmlDivider,
 } from "mjml-react";
+import { Template } from "mailing-core";
 
 type ReservationProps = {
   headline: string;
@@ -27,7 +28,7 @@ type ReservationProps = {
   ctaText?: string;
 };
 
-const Reservation: React.FC<ReservationProps> = ({
+const Reservation: Template<ReservationProps> = ({
   headline,
   body,
   bulletedList,

diff --git a/packages/cli/src/generator_templates/ts/emails/ResetPassword.tsx b/packages/cli/src/generator_templates/ts/emails/ResetPassword.tsx
@@ -14,14 +14,15 @@ import {
   MjmlSpacer,
   MjmlDivider,
 } from "mjml-react";
+import { Template } from "mailing-core";
 
 type ResetPasswordProps = {
   name: string;
   body: ReactElement;
   ctaText: string;
 };
 
-const ResetPassword: React.FC<ResetPasswordProps> = ({
+const ResetPassword: Template<ResetPasswordProps> = ({
   name,
   body,
   ctaText,

diff --git a/packages/cli/src/pages/api/previews/__test__/__snapshots__/index.test.tsx.snap b/packages/cli/src/pages/api/previews/__test__/__snapshots__/index.test.tsx.snap
@@ -0,0 +1,42 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`index should return previews 1`] = `
+{
+  "previewText": {
+    "/previews/AccountCreated/accountCreated": "Welcome to BookBook, Amelita!",
+    "/previews/NewSignIn/newSignIn": "Security Alert: New Sign-In Hello Amelita, We noticed a new sign-in to your BookBook account on a Mac device. If this was you, you don’t nee",
+    "/previews/Reservation/reservationChanged": "Reservation Changed • Salazar in Silver Lake • Sunday, Aug 22 at 1:30pm • Party of 4, patio You’re all set! Your reservation at Salazar has ",
+    "/previews/Reservation/reservationConfirmed": "Reservation Confirmed • Salazar in Silver Lake • Saturday, Aug 22 at 1:30pm • Party of 4, patio Thanks for booking your reservation at Salaz",
+    "/previews/Reservation/reservationWithError": "Reservation Canceled • Salazar in Silver Lake • Sunday, Aug 22 at 1:30pm • Party of 4, patio If this was a mistake or if you changed your mi",
+    "/previews/ResetPassword/resetPassword": "Hello Amelita, We’ve received your request to change your password. Use the link below to set up a new password for your account. This link ",
+  },
+  "previews": [
+    [
+      "AccountCreated",
+      [
+        "accountCreated",
+      ],
+    ],
+    [
+      "NewSignIn",
+      [
+        "newSignIn",
+      ],
+    ],
+    [
+      "Reservation",
+      [
+        "reservationWithError",
+        "reservationConfirmed",
+        "reservationChanged",
+      ],
+    ],
+    [
+      "ResetPassword",
+      [
+        "resetPassword",
+      ],
+    ],
+  ],
+}
+`;
diff --git a/packages/cli/src/pages/api/previews/__test__/index.test.tsx b/packages/cli/src/pages/api/previews/__test__/index.test.tsx
@@ -0,0 +1,37 @@
+import { NextApiRequest, NextApiResponse } from "next";
+import { createMocks } from "node-mocks-http";
+import index from "..";
+
+describe("index", () => {
+  it("should return previews", async () => {
+    const { req, res } = createMocks({
+      method: "GET",
+    });
+
+    await index(
+      req as unknown as NextApiRequest,
+      res as unknown as NextApiResponse
+    );
+
+    expect(res.statusCode).toBe(200);
+    const json = res._getJSONData();
+    expect(json).toMatchSnapshot();
+  });
+
+  it("should return template subject if it exists", async () => {
+    const { req, res } = createMocks({
+      method: "GET",
+    });
+
+    await index(
+      req as unknown as NextApiRequest,
+      res as unknown as NextApiResponse
+    );
+
+    expect(res.statusCode).toBe(200);
+    const json = res._getJSONData();
+    expect(json["previewText"]["/previews/AccountCreated/accountCreated"]).toBe(
+      "Welcome to BookBook, Amelita!"
+    );
+  });
+});
diff --git a/packages/cli/src/pages/api/previews/__test__/send.test.tsx b/packages/cli/src/pages/api/previews/__test__/send.test.tsx
@@ -12,6 +12,7 @@ jest.mock("../../../../moduleManifest", () => ({
 
 jest.mock("../../../../util/moduleManifestUtil", () => ({
   getPreviewComponent: jest.fn(),
+  getTemplateModule: jest.fn(),
 }));
 
 describe("send", () => {

diff --git a/packages/cli/src/pages/api/previews/index.ts b/packages/cli/src/pages/api/previews/index.ts
@@ -3,6 +3,7 @@ import { parse } from "node-html-parser";
 import { render } from "../../../util/mjml";
 import {
   getPreviewComponent,
+  getTemplateModule,
   previewTree,
 } from "../../../util/moduleManifestUtil";
 import { error } from "../../../util/log";
@@ -24,16 +25,34 @@ async function getPreviewFunction(
   try {
     const component = await getPreviewComponent(previewClass, name);
     if (!component) throw new Error(`${previewClass}#${name} not found`);
-    const { html } = render(component);
-    // slice out the body to minimize funky head parsing
-    const body = /<body[^>]*>((.|[\n\r])*)<\/body>/im.exec(html);
-    if (body && body[1]) {
-      const root = parse(body[1]);
-      text = root.text.replace(/\s+/g, " ").trim().substring(0, MAX_TEXT_CHARS);
+
+    // Try to build preview text from subject
+    const template = getTemplateModule(previewClass);
+    if (template) {
+      if (typeof template.subject === "function") {
+        text = template.subject(component.props);
+      } else if (typeof template.subject === "string") {
+        text = template.subject;
+      }
+    }
+
+    // If that didn't work, try to build preview text from the rendered preview
+    if (text.length === 0) {
+      const { html } = render(component);
+      // slice out the body to minimize funky head parsing
+      const body = /<body[^>]*>((.|[\n\r])*)<\/body>/im.exec(html);
+      if (body && body[1]) {
+        const root = parse(body[1]);
+        text = root.text
+          .replace(/\s+/g, " ")
+          .trim()
+          .substring(0, MAX_TEXT_CHARS);
+      }
     }
   } catch (e) {
     error(`error rendering text preview for ${previewClass}#${name}`, e);
   }
+
   return [`/previews/${previewClass}/${name}`, text];
 }
 

diff --git a/packages/cli/src/pages/api/previews/send.ts b/packages/cli/src/pages/api/previews/send.ts
@@ -1,7 +1,10 @@
 import type { NextApiRequest, NextApiResponse } from "next";
 import { error } from "../../../util/log";
 import { sendMail } from "../../../moduleManifest";
-import { getPreviewComponent } from "../../../util/moduleManifestUtil";
+import {
+  getPreviewComponent,
+  getTemplateModule,
+} from "../../../util/moduleManifestUtil";
 import { jsonStringifyError } from "../../../util/jsonStringifyError";
 
 export default async function send(
@@ -14,18 +17,25 @@ export default async function send(
   }
 
   const body: SendPreviewRequestBody = req.body;
-  const { to, subject, previewClass, previewFunction } = body;
-  let component;
+  const { to, previewClass, previewFunction } = body;
+  let subject = `${previewClass} - ${previewFunction}`;
 
-  if (previewClass && previewFunction) {
-    component = await getPreviewComponent(previewClass, previewFunction);
-  }
+  const component = await getPreviewComponent(previewClass, previewFunction);
   if (!component) {
     error("no component found");
     res.status(400).json({ error: "no html provided, no component found" });
     return;
   }
 
+  const template = getTemplateModule(previewClass);
+  if (template) {
+    if (typeof template.subject === "function") {
+      subject = template.subject(component.props);
+    } else if (typeof template.subject === "string") {
+      subject = template.subject;
+    }
+  }
+
   try {
     await sendMail({
       component,

diff --git a/packages/cli/src/pages/api/sendMail.ts b/packages/cli/src/pages/api/sendMail.ts
@@ -32,11 +32,6 @@ export default async function handler(
     return res.status(403).json({ error: "to, cc, or bcc must be specified" });
   }
 
-  // validate subject
-  if (typeof mailOptions.subject !== "string") {
-    return res.status(403).json({ error: "subject must be specified" });
-  }
-
   if (!html) {
     // validate template name
     if (typeof templateName !== "string") {

diff --git a/packages/cli/src/util/moduleManifestUtil.ts b/packages/cli/src/util/moduleManifestUtil.ts
@@ -1,4 +1,5 @@
 import { JSXElementConstructor, ReactElement } from "react";
+import { Template } from "mailing-core";
 import moduleManifest, { config } from "../moduleManifest";
 
 export function previewTree(): [string, string[]][] {
@@ -14,6 +15,14 @@ export function previewTree(): [string, string[]][] {
   });
 }
 
+export function getTemplateModule(name?: string) {
+  if (!name) return null;
+
+  return moduleManifest.templates[
+    name as keyof typeof moduleManifest.templates
+  ] as unknown as Template<any>;
+}
+
 export function getPreviewModule(name: string) {
   return moduleManifest.previews[name as keyof typeof moduleManifest.previews];
 }
@@ -29,6 +38,7 @@ export async function getPreviewComponent(
       }
     | undefined = previews[name as keyof typeof previews] as any;
   const previewComponent = previewModule?.[functionName];
+
   return typeof previewComponent === "function"
     ? await previewComponent()
     : undefined;