Standardize the design and content of all email templates

.changeset/cyan-ears-shout.md

@@ -0,0 +1,5 @@
+---
+'hive': patch
+---
+
+Standardize the design and content of all email templates for consistency.

packages/services/emails/src/mjml.ts

@@ -8,7 +8,7 @@ type RawValue = {
   readonly content: string;
 };
 type SpecialValues = RawValue;
-type ValueExpression = string | SpecialValues;
+type ValueExpression = string | SpecialValues | MJMLValue;
 
 export function mjml(parts: TemplateStringsArray, ...values: ValueExpression[]): MJMLValue {
   let content = '';
@@ -29,6 +29,8 @@ export function mjml(parts: TemplateStringsArray, ...values: ValueExpression[]):
       content += token.content;
     } else if (typeof token === 'string') {
       content += escapeHtml(token);
+    } else if (token.kind === 'mjml') {
+      content += token.content;
     } else {
       throw new TypeError('mjml: Unexpected value expression.');
     }

packages/services/emails/src/templates/audit-logs-report.ts

@@ -1,27 +1,18 @@
-import { mjml } from '../mjml';
+import { button, email, mjml, paragraph } from './components';
 
 export function renderAuditLogsReportEmail(input: {
   organizationName: string;
   formattedStartDate: string;
   formattedEndDate: string;
   url: string;
 }) {
-  return mjml`
-      <mjml>
-        <mj-body>
-          <mj-section>
-            <mj-column>
-              <mj-image width="150px" src="https://graphql-hive.com/logo.png"></mj-image>
-              <mj-divider border-color="#ca8a04"></mj-divider>
-              <mj-text>
-                Audit Logs for your organization ${input.organizationName} from ${input.formattedStartDate} to ${input.formattedEndDate}
-              </mj-text>.
-              <mj-button href="${input.url}" background-color="#ca8a04">
-                Download Audit Logs CSV
-              </mj-button>
-            </mj-column>
-          </mj-section>
-        </mj-body>
-      </mjml>
-    `.content;
+  return email({
+    title: 'Your Requested Audit Logs Are Ready',
+    body: mjml`
+      ${paragraph(mjml`You requested audit logs for ${input.formattedStartDate} – ${input.formattedEndDate}, and they are now ready for download.`)}
+      ${paragraph('Click the link below to download your CSV file:')}
+      ${button({ url: input.url, text: 'Download Audit Logs' })}
+      ${paragraph(`If you didn't request this, please contact [email protected].`)}
+    `,
+  });
 }

packages/services/emails/src/templates/components.ts

@@ -0,0 +1,52 @@
+import { mjml, type MJMLValue } from '../mjml';
+
+export { mjml };
+
+export function paragraph(content: string | MJMLValue) {
+  return mjml`
+    <mj-text padding-bottom="10px" line-height="1.6" font-size="16px">
+      ${content}
+    </mj-text>
+  `;
+}
+
+export function button(input: { url: string; text: string }) {
+  return mjml`
+    <mj-button align="left" href="${input.url}" font-size="16px" border-radius="3px" color="#fff" background-color="#245850">
+      ${input.text}
+    </mj-button>
+  `;
+}
+
+export function email(input: { title: string | MJMLValue; body: MJMLValue }) {
+  return mjml`
+    <mjml>
+      <mj-body>
+        <mj-section background-color="#e6eded">
+          <mj-column>
+            <mj-text color="#245850" font-size="28px" font-weight="300">
+              Hive
+            </mj-text>
+          </mj-column>
+        </mj-section>
+
+        <mj-section>
+          <mj-column>
+            <mj-text color="#245850" font-size="24px" font-weight="300" padding-bottom="20px">
+              ${input.title}
+            </mj-text>
+            ${input.body}
+          </mj-column>
+        </mj-section>
+        <mj-section>
+          <mj-column>
+            <mj-divider border-width="1px" border-color="#eeeeee"></mj-divider>
+            <mj-text align="center" padding-bottom="20px" line-height="1.6" font-size="14px" color="#888888">
+    © ${mjml.raw(String(new Date().getFullYear()))} Hive. All rights reserved.
+              </mj-text>
+          </mj-column>
+        </mj-section>
+      </mj-body>
+    </mjml>
+  `.content;
+}