feat(auth-server): start rendering plaintext emails alongside html in storybook

packages/fxa-auth-server/.storybook/preview.js

@@ -2,6 +2,8 @@
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
+import '../lib/senders/emails/storybook.css';
+
 export const parameters = {
   actions: { argTypesRegex: '^on[A-Z].*' },
 };
@@ -28,12 +30,3 @@ export const globalTypes = {
     },
   },
 };
-
-const withTextDirectionality = (Story, context) => {
-  const container = document.createElement('div');
-  container.classList.add(context.globals.direction);
-  container.appendChild(Story(context));
-  return container;
-};
-
-export const decorators = [withTextDirectionality];

packages/fxa-auth-server/bin/mjml-server.ts

@@ -35,13 +35,13 @@ async function handleRequest(
       ...variables
     } = data;
     variables.baseUrl = baseUrl;
-    const { html, subject } = await fluentLocalizer.localizeEmail(
+    const { html, subject, text } = await fluentLocalizer.localizeEmail(
       templateName,
       layoutName || 'fxa',
       variables,
       acceptLanguage
     );
-    const result = JSON.stringify({ html, subject });
+    const result = JSON.stringify({ html, subject, text });
 
     res.writeHead(200, {
       'Content-Type': 'application/json',

packages/fxa-auth-server/lib/senders/emails/storybook-email.ts

@@ -10,6 +10,7 @@ export interface StorybookEmailArgs {
   acceptLanguage: string;
   doc?: string;
   variables: Record<string, any>;
+  direction: 'ltr' | 'rtl';
 }
 
 /* in production, `utm` parameters may also exist in the urls */
@@ -30,20 +31,34 @@ export const storybookEmail = ({
   acceptLanguage = 'en-US',
   doc,
   variables,
+  direction,
 }: StorybookEmailArgs): HTMLDivElement => {
-  const container = document.createElement('div');
-  container.innerHTML = 'Loading email...';
+  const container = document.createElement('article') as HTMLDivElement;
+  container.classList.add('email-template');
+  container.innerHTML = '<p class="message">Loading email...</p>';
   renderUsingMJML({ template, layout, acceptLanguage, variables })
-    .then(({ html, subject }) => {
+    .then(({ html, text, subject }) => {
       container.innerHTML = `
-        ${doc ? `<p>Template Description: ${doc}</p>` : ''}
-        <p>Email Subject: ${subject}</p>
-        <hr />
-        ${html}
+        <header>
+          <h1 class="template-name"><span>${layout} / </span>${template}</h1>
+          ${doc ? `<p class="template-description">${doc}</p>` : ''}
+          <p class="email-subject">Subject: ${subject}</p>
+        </header>
+
+        <main class="template-container">
+          <section class="template-html">
+            <span class="badge">HTML</span>
+            <div class="${direction}">${html}</div>
+          </section>
+          <section class="template-plaintext">
+            <span class="badge">Plaintext</span>
+            <div class="${direction}">${text}</div>
+          </section>
+        </main>
       `;
     })
     .catch((error: Error) => {
-      container.innerHTML = `Error loading email: ${error.message}`;
+      container.innerHTML = `<p class="message"><b>Loading error</b> - ${error.message}</p>`;
     });
 
   return container;
@@ -72,14 +87,14 @@ async function renderUsingMJML({
     }),
   });
   const result = await response.text();
-  const { html, subject } = await JSON.parse(result);
+  const { html, subject, text } = await JSON.parse(result);
   if (response.status !== 200) {
     throw new Error(result);
   }
-  return { html, subject };
+  return { html, subject, text };
 }
 
-export const Template: Story<StorybookEmailArgs> = (args) =>
-  storybookEmail(args);
+export const Template: Story<StorybookEmailArgs> = (args, context) =>
+  storybookEmail({ ...args, direction: context.globals.direction });
 
 export default storybookEmail;

packages/fxa-auth-server/lib/senders/emails/storybook.css

@@ -0,0 +1,73 @@
+.email-template .message {
+  margin: 0;
+}
+
+.email-template .message,
+.email-template header,
+.template-container .badge {
+  font-family: 'Helvetica Neue', Helvetica, arial, sans-serif;
+}
+
+.email-template header {
+  background: #f2f2f2;
+  padding: 16px;
+  border-radius: 4px;
+}
+
+.template-name {
+  font-size: 22px;
+  margin: 0 0 10px;
+}
+
+.template-name span {
+  color: #777;
+  font-weight: 500;
+}
+
+.template-description {
+  color: #777;
+  margin: 0;
+}
+
+.email-subject {
+  margin: 16px 0 0;
+  font-family: monospace;
+  font-size: 14px;
+}
+
+.template-container {
+  display: flex;
+  flex-direction: row;
+  margin-top: 28px;
+}
+
+.template-html {
+  flex: 0.75 0 0;
+  border-right: 1px solid #ddd;
+  margin-right: 28px;
+}
+
+.template-plaintext {
+  flex: 0.25 0 0;
+}
+
+.template-plaintext div {
+  padding-top: 24px;
+  font-family: monospace;
+  white-space: pre-wrap;
+}
+
+.template-plaintext .rtl {
+  direction: rtl;
+}
+
+.template-container .badge {
+  font-size: 12px;
+  text-transform: uppercase;
+  background-color: #eee;
+  padding: 3px 5px;
+  letter-spacing: 0.05em;
+  font-weight: 500;
+  border-radius: 3px;
+  color: #444;
+}

packages/fxa-auth-server/lib/senders/emails/templates/verificationReminderFirst/index.stories.ts

@@ -2,19 +2,14 @@
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
-import { Story, Meta } from '@storybook/html';
-import storybookEmail, {
-  StorybookEmailArgs,
-  commonArgs,
-} from '../../storybook-email';
+import { Meta } from '@storybook/html';
+import { commonArgs, Template } from '../../storybook-email';
 import { templateVariables } from '.';
 
 export default {
   title: 'Emails/verificationReminderFirst',
 } as Meta;
 
-const Template: Story<StorybookEmailArgs> = (args) => storybookEmail(args);
-
 const defaultVariables = {
   ...commonArgs,
   ...templateVariables,

packages/fxa-auth-server/lib/senders/emails/templates/verificationReminderSecond/index.stories.ts

@@ -2,19 +2,14 @@
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
-import { Story, Meta } from '@storybook/html';
-import storybookEmail, {
-  StorybookEmailArgs,
-  commonArgs,
-} from '../../storybook-email';
+import { Meta } from '@storybook/html';
+import { commonArgs, Template } from '../../storybook-email';
 import { templateVariables } from '.';
 
 export default {
   title: 'Emails/verificationReminderSecond',
 } as Meta;
 
-const Template: Story<StorybookEmailArgs> = (args) => storybookEmail(args);
-
 const defaultVariables = {
   ...commonArgs,
   ...templateVariables,