template email notifications with handlebars

devksingh4 · devksingh4 · commit 97683b9ecf05 · 2025-06-22T12:51:25.000-04:00
diff --git a/src/api/package.json b/src/api/package.json
@@ -44,6 +44,7 @@
     "fastify-plugin": "^5.0.1",
     "fastify-raw-body": "^5.0.0",
     "fastify-zod-openapi": "^4.1.1",
+    "handlebars": "^4.7.8",
     "ical-generator": "^8.1.1",
     "ioredis": "^5.6.1",
     "jsonwebtoken": "^9.0.2",
diff --git a/src/api/routes/stripe.ts b/src/api/routes/stripe.ts
@@ -296,7 +296,7 @@ const stripeRoutes: FastifyPluginAsync = async (fastify, _options) => {
                   payload: {
                     to: [unmarshalledEntry.userId],
                     subject: `Payment Recieved for Invoice ${unmarshalledEntry.invoiceId}`,
-                    content: `We're writing to notify you that ACM has received ${paidInFull ? "full" : "partial"} payment for Invoice ${unmarshalledEntry.invoiceId} (${withCurrency} by ${name} <${email}>).\n\nPlease contact Officer Board with any questions.`,
+                    content: `We're writing to notify you that ACM @ UIUC has received ${paidInFull ? "full" : "partial"} payment for Invoice ${unmarshalledEntry.invoiceId} (${withCurrency} by ${name} <${email}>).\n\nPlease contact Officer Board with any questions.`,
                   },
                 };
               if (!fastify.sqsClient) {
diff --git a/src/api/sqs/handlers/emailNotifications.ts b/src/api/sqs/handlers/emailNotifications.ts
@@ -4,6 +4,16 @@ import { SendEmailCommand, SESClient } from "@aws-sdk/client-ses";
 import { genericConfig } from "common/config.js";
 import { createAuditLogEntry } from "api/functions/auditLog.js";
 import { Modules } from "common/modules.js";
+import Handlebars from "handlebars";
+import emailTemplate from "./templates/notification.js";
+
+Handlebars.registerHelper("nl2br", (text) => {
+  let nl2br = `${text}`.replace(/([^>\r\n]?)(\r\n|\n\r|\r|\n)/g, "$1<br>$2");
+  nl2br = `<p>${nl2br.replace(/<br>/g, "</p><p>")}</p>`;
+  return new Handlebars.SafeString(nl2br);
+});
+
+const compiledTemplate = Handlebars.compile(emailTemplate);
 
 const stripHtml = (html: string): string => {
   return html
@@ -33,7 +43,7 @@ export const emailNotificationsHandler: SQSHandlerFunction<
       },
       Body: {
         Html: {
-          Data: content,
+          Data: compiledTemplate(payload),
           Charset: "UTF-8",
         },
         Text: {
diff --git a/src/api/sqs/handlers/templates/notification.ts b/src/api/sqs/handlers/templates/notification.ts
@@ -0,0 +1,75 @@
+const template = /*html*/ `
+<!doctype html>
+<html>
+    <head>
+        <title>{{subject}}</title>
+        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1">
+        <base target="_blank">
+        <style>
+            body {
+                background-color: #F0F1F3;
+                font-family: 'Helvetica Neue', 'Segoe UI', Helvetica, sans-serif;
+                font-size: 15px;
+                line-height: 26px;
+                margin: 0;
+                color: #444;
+            }
+            .wrap {
+                background-color: #fff;
+                padding: 30px;
+                max-width: 525px;
+                margin: 0 auto;
+                border-radius: 5px;
+            }
+            .button {
+                background: #0055d4;
+                border-radius: 3px;
+                text-decoration: none !important;
+                color: #fff !important;
+                font-weight: bold;
+                padding: 10px 30px;
+                display: inline-block;
+            }
+            .button:hover {
+                background: #111;
+            }
+            .footer {
+                text-align: center;
+                font-size: 12px;
+                color: #888;
+            }
+            img {
+                max-width: 100%;
+                height: auto;
+            }
+            a {
+                color: #0055d4;
+            }
+            a:hover {
+                color: #111;
+            }
+            @media screen and (max-width: 600px) {
+                .wrap {
+                    max-width: auto;
+                }
+            }
+        </style>
+    </head>
+<body>
+    <div class="gutter" style="padding: 30px;">&nbsp;</div>
+    <img src="https://static.acm.illinois.edu/banner-blue.png" style="height: 100px; width: 210px; align-self: center;"/>
+    <br />
+    <div class="wrap">
+        {{nl2br content}}
+    </div>
+    <div class="footer">
+        <p>
+            <a href="https://acm.illinois.edu">ACM @ UIUC Homepage</a>
+            <a href="mailto:admin@acm.illinois.edu">Email ACM @ UIUC</a>
+        </p>
+    </div>
+</body>
+</html>
+`;
+export default template;
diff --git a/yarn.lock b/yarn.lock
