Add HTML email functionality. (#1575)

This is an attempt to support the sending of HTML emails, starting with Lee Munroe's Free Responsive Simple HTML Email Template. It also adds a `sendtesthtmlemail` management command that sends an example HTML email.

frontend/lib/dev/dev.tsx

@@ -26,6 +26,9 @@ import {
   ExamplePageWithAnchors2,
 } from "./example-pages-with-anchors";
 import { DemoDeploymentNote } from "../ui/demo-deployment-note";
+import { HtmlEmail, EmailCta } from "../static-page/html-email";
+import { createHtmlEmailStaticPageRoutes } from "../static-page/routes";
+import { asEmailStaticPage } from "../static-page/email-static-page";
 
 const LoadableExamplePage = loadable(
   () => friendlyLoad(import("./example-loadable-page")),
@@ -166,6 +169,25 @@ function ExampleQueryPage(): JSX.Element {
   );
 }
 
+const ExampleHtmlEmailStaticPage = asEmailStaticPage(() => (
+  <HtmlEmail
+    subject="This is a test HTML email!"
+    footer={<p>Here is some footer text.</p>}
+  >
+    <p>Hi there,</p>
+    <p>
+      Sometimes you just want to send a simple HTML email with a simple design
+      and clear call to action. This is it.
+    </p>
+    <EmailCta href="https://example.com/">Call To Action</EmailCta>
+    <p>
+      This is a really simple email template. Its sole purpose is to get the
+      recipient to click the button with no distractions.
+    </p>
+    <p>Good luck! Hope it works.</p>
+  </HtmlEmail>
+));
+
 export default function DevRoutes(): JSX.Element {
   const { siteRoutes } = useContext(AppContext);
   const dev = siteRoutes.dev;
@@ -227,6 +249,10 @@ export default function DevRoutes(): JSX.Element {
         exact
         component={ExampleStaticPageText}
       />
+      {createHtmlEmailStaticPageRoutes(
+        dev.examples.staticHtmlEmail,
+        ExampleHtmlEmailStaticPage
+      )}
       <Route
         path={dev.examples.anchors1}
         exact

frontend/lib/dev/routes.ts

@@ -1,4 +1,5 @@
 import { ROUTE_PREFIX } from "../util/route-util";
+import { createHtmlEmailStaticPageRouteInfo } from "../static-page/routes";
 
 export type DevRouteInfo = ReturnType<typeof createDevRouteInfo>;
 
@@ -28,6 +29,9 @@ export function createDevRouteInfo(prefix: string) {
       staticPage: `${prefix}/examples/static-page`,
       staticPagePdf: `${prefix}/examples/static-page.pdf`,
       staticPageTxt: `${prefix}/examples/static-page.txt`,
+      staticHtmlEmail: createHtmlEmailStaticPageRouteInfo(
+        `${prefix}/examples/static-html-email`
+      ),
       intl: `${prefix}/examples/intl`,
     },
   };

frontend/lib/static-page/email-static-page.tsx

@@ -3,8 +3,20 @@ import { StaticPage } from "./static-page";
 import { getAppStaticContext } from "../app-static-context";
 import { withRouter, RouteComponentProps } from "react-router-dom";
 
-export const EmailStaticPage: React.FC<{ children: JSX.Element }> = (props) => (
-  <StaticPage httpHeaders={{ "Content-Type": "text/plain; charset=utf-8" }}>
+export type EmailStaticPageOptions = {
+  isHtmlEmail?: boolean;
+};
+
+export const EmailStaticPage: React.FC<
+  { children: JSX.Element } & EmailStaticPageOptions
+> = (props) => (
+  <StaticPage
+    httpHeaders={
+      props.isHtmlEmail
+        ? undefined
+        : { "Content-Type": "text/plain; charset=utf-8" }
+    }
+  >
     <EmailContext.Provider value={true}>{props.children}</EmailContext.Provider>
   </StaticPage>
 );
@@ -27,9 +39,9 @@ export const EmailSubject = withRouter(
 
 export function asEmailStaticPage(
   Component: React.ComponentType<{}>
-): React.FC<{}> {
-  return () => (
-    <EmailStaticPage>
+): React.FC<EmailStaticPageOptions> {
+  return ({ isHtmlEmail }) => (
+    <EmailStaticPage isHtmlEmail={isHtmlEmail}>
       <Component />
     </EmailStaticPage>
   );