From 44fcd1382e8922eed5becfe9405447592041904e Mon Sep 17 00:00:00 2001
From: Tom Wise <79859203+tomwisecodes@users.noreply.github.com>
Date: Wed, 30 Oct 2024 10:24:14 +0000
Subject: [PATCH] feat: update emails to use html

---
 packages/api/src/router/exports.ts            | 60 ++++++++++---------
 packages/core/src/utils/sendEmail.ts          | 18 ++++--
 .../sendEmailRequestingMoreGenerations.ts     |  4 +-
 .../src/utils/sendJudgementFeedbackEmail.ts   | 26 ++++----
 .../core/src/utils/sendQuizFeedbackEmail.ts   | 30 +++++-----
 packages/core/src/utils/stripHtml.ts          |  3 +
 6 files changed, 77 insertions(+), 64 deletions(-)
 create mode 100644 packages/core/src/utils/stripHtml.ts

diff --git a/packages/api/src/router/exports.ts b/packages/api/src/router/exports.ts
index e81f44cc1..e83b9bf0d 100644
--- a/packages/api/src/router/exports.ts
+++ b/packages/api/src/router/exports.ts
@@ -724,23 +724,23 @@ export const exportsRouter = router({
           to: userEmail,
           name: "Oak National Academy",
           subject: "Download your lesson made with Aila: " + lessonTitle,
-          body: `
-Hi ${userFirstName},
-
-These are the lesson resources that you created with Aila.
-You can use the following links to copy the lesson resources to your Google Drive.
-
-Lesson plan: ${`${lessonPlanLink.split("/edit")[0]}/copy`}
-Slides: ${`${slidesLink.split("/edit")[0]}/copy`}
-Worksheet: ${`${worksheetLink.split("/edit")[0]}/copy`}
-Starter quiz: ${`${starterQuizLink.split("/edit")[0]}/copy`}
-Exit quiz: ${`${exitQuizLink.split("/edit")[0]}/copy`}
-Additional materials: ${`${additionalMaterialsLink.split("/edit")[0]}/copy`}
-
-We hope the lesson goes well for you and your class. If you have any feedback for us, please let us know. You can simply reply to this email.
-
-Aila,
-Oak National Academy`,
+          htmlBody: `<p>Hi ${userFirstName},</p>
+
+        <p>These are the lesson resources that you created with Aila.<br>
+        You can use the following links to copy the lesson resources to your Google Drive.</p>  
+
+        <a href="${`${lessonPlanLink.split("/edit")[0]}/copy`}" target="_blank">Lesson plan</a><br>
+        <a href="${`${slidesLink.split("/edit")[0]}/copy`}" target="_blank">Slides</a><br>
+        <a href="${`${worksheetLink.split("/edit")[0]}/copy`}" target="_blank">Worksheet</a><br>
+        <a href="${`${starterQuizLink.split("/edit")[0]}/copy`}" target="_blank">Starter quiz</a><br>
+        <a href="${`${exitQuizLink.split("/edit")[0]}/copy`}" target="_blank">Exit quiz</a><br>
+        <a href="${`${additionalMaterialsLink.split("/edit")[0]}/copy`}" target="_blank">Additional materials</a></p><br>
+
+        
+        <p>We hope the lesson goes well for you and your class. If you have any feedback for us, please let us know. You can simply reply to this email.</p>
+        
+        <p>Aila<br>
+        Oak National Academy</p>`,
         });
 
         return emailSent ? true : false;
@@ -769,22 +769,26 @@ Oak National Academy`,
           return false;
         }
 
+        const htmlBody = `<p>Hi ${userFirstName},</p>
+        
+        <p>We made the lesson: <strong>${lessonTitle}</strong></p>
+        
+        <p>You can use the following link to copy the lesson resources <strong>${title.toLowerCase()}</strong> to your Google Drive: 
+          <a href="${`${link.split("/edit")[0]}/copy`}" target="_blank">${`${link.split("/edit")[0]}/copy`}</a>
+        </p>
+        
+        <p>We hope the lesson goes well for you and your class. If you have any feedback for us, please let us know. You can simply reply to this email.</p>
+        
+        <p>Best regards,<br>
+        Aila,<br>
+        Oak National Academy</p>`;
+
         const emailSent = await sendEmail({
           from: "aila@thenational.academy",
           to: userEmail,
           name: "Oak National Academy",
           subject: "Download your lesson made with Aila: " + lessonTitle,
-          body: `
-Hi ${userFirstName},
-
-We made the lesson: ${lessonTitle}
-
-You can use the following link to copy the lesson resources ${title.toLowerCase()} to your Google Drive: ${`${link.split("/edit")[0]}/copy`}
-
-We hope the lesson goes well for you and your class. If you have any feedback for us, please let us know. You can simply reply to this email.
-
-Aila,
-Oak National Academy`,
+          htmlBody: htmlBody,
         });
 
         return emailSent ? true : false;
diff --git a/packages/core/src/utils/sendEmail.ts b/packages/core/src/utils/sendEmail.ts
index 59a0c6052..c1b2c68b1 100644
--- a/packages/core/src/utils/sendEmail.ts
+++ b/packages/core/src/utils/sendEmail.ts
@@ -1,7 +1,9 @@
+import { stripHtml } from "./stripHtml";
+
 type EmailParams = {
   from: string;
   to: string;
-  body: string;
+  htmlBody: string;
   subject: string;
   name?: string;
 };
@@ -16,8 +18,9 @@ export const sendEmail = async ({
   from,
   to,
   subject,
-  body,
+
   name,
+  htmlBody,
 }: EmailParams) => {
   const url = "https://api.postmarkapp.com/email";
   const headers = {
@@ -26,14 +29,17 @@ export const sendEmail = async ({
     "X-Postmark-Server-Token": POSTMARK_SERVER_TOKEN,
   };
 
+  const formattedFrom = name
+    ? `${name} <${from}>`
+    : `Oak National Academy <${from}>`;
+
   const bodyJSON = JSON.stringify({
-    From: from,
+    From: formattedFrom,
     To: to,
     Subject: subject,
-    Name: name ?? "Oak National Academy",
     ReplyTo: "help@thenational.academy",
-    TextBody: body,
-    HtmlBody: `<html><body><pre>${body}</pre></body></html>`,
+    TextBody: stripHtml(htmlBody),
+    HtmlBody: `<html><body>${htmlBody}</body></html>`,
     MessageStream: "outbound",
   });
 
diff --git a/packages/core/src/utils/sendEmailRequestingMoreGenerations.ts b/packages/core/src/utils/sendEmailRequestingMoreGenerations.ts
index 03a3ada3d..25325dc67 100644
--- a/packages/core/src/utils/sendEmailRequestingMoreGenerations.ts
+++ b/packages/core/src/utils/sendEmailRequestingMoreGenerations.ts
@@ -12,13 +12,13 @@ export const sendEmailRequestingMoreGenerations = async (input: {
   userEmail: string;
 }) => {
   const emailContent = `
-    User ${input.userEmail} has requested more generations for app ${input.appSlug}.
+    <p>User ${input.userEmail} has requested more generations for app ${input.appSlug}.</p>
   `;
 
   return sendEmail({
     from: "ai.feedback@thenational.academy",
     to: NEXT_PUBLIC_GLEAP_FEEDBACK_EMAIL_ADDR,
     subject: "Feedback: generation flagged",
-    body: emailContent,
+    htmlBody: emailContent,
   });
 };
diff --git a/packages/core/src/utils/sendJudgementFeedbackEmail.ts b/packages/core/src/utils/sendJudgementFeedbackEmail.ts
index a562adee3..35f5017c5 100644
--- a/packages/core/src/utils/sendJudgementFeedbackEmail.ts
+++ b/packages/core/src/utils/sendJudgementFeedbackEmail.ts
@@ -22,27 +22,27 @@ export const sendJudgementFeedbackEmail = async (input: {
   const { user, feedback, flaggedItem } = input;
   const inputDataAsString = JSON.stringify(input);
 
-  const emailContent = `
-    User ${user.email} has clicked on the flag button on a comparative judgement. 
-    Please check the database for more information:
+  const emailContent = `<p>
+    User ${user.email} has clicked on the flag button on a comparative judgement. <br>
+    Please check the database for more information: <br>
 
+    <br>
+    <br>
 
-    
+    ${flaggedItem} <br>
+    Feedback: ${feedback.typedFeedback}<br>
+    Inappropriate content: ${feedback.contentIsInappropriate}<br>
+    Factually incorrect content: ${feedback.contentIsFactuallyIncorrect}<br>
+    Not helpful content: ${feedback.contentIsNotHelpful}<br>
+    Full data of the time of the flag:<br>
 
-    ${flaggedItem}
-    Feedback: ${feedback.typedFeedback}
-    Inappropriate content: ${feedback.contentIsInappropriate}
-    Factually incorrect content: ${feedback.contentIsFactuallyIncorrect}
-    Not helpful content: ${feedback.contentIsNotHelpful}
-    Full data of the time of the flag:
-
-    ${inputDataAsString}
+    ${inputDataAsString}</p>
   `;
 
   return sendEmail({
     from: "ai.feedback@thenational.academy",
     to: NEXT_PUBLIC_GLEAP_FEEDBACK_EMAIL_ADDR,
     subject: "Feedback: comparative judgement result flagged",
-    body: emailContent,
+    htmlBody: emailContent,
   });
 };
diff --git a/packages/core/src/utils/sendQuizFeedbackEmail.ts b/packages/core/src/utils/sendQuizFeedbackEmail.ts
index 867c64a9a..5cf01be3f 100644
--- a/packages/core/src/utils/sendQuizFeedbackEmail.ts
+++ b/packages/core/src/utils/sendQuizFeedbackEmail.ts
@@ -24,26 +24,26 @@ export const sendQuizFeedbackEmail = async (input: {
   const { user, feedback, flaggedItem, generationResponse } = input;
   const inputDataAsString = JSON.stringify(input);
 
-  const emailContent = `
-    User ${user.email} has clicked on the flag button.
-
-    Flagged content type: ${flaggedItem.type}
-    Flagged content: ${flaggedItem.value}
-    Generation ID: ${flaggedItem.lastGenerationId}
-    Feedback: ${feedback.typedFeedback}
-    Inappropriate content: ${feedback.contentIsInappropriate}
-    Factually incorrect content: ${feedback.contentIsFactuallyIncorrect}
-    Not helpful content: ${feedback.contentIsNotHelpful}
-    Generation response: ${generationResponse}
-    Full data of the time of the flag:
-
-    ${inputDataAsString}
+  const emailContent = `<p>
+    User ${user.email} has clicked on the flag button.<br>
+    <br>
+    Flagged content type: ${flaggedItem.type}<br>
+    Flagged content: ${flaggedItem.value}<br>
+    Generation ID: ${flaggedItem.lastGenerationId}<br>
+    Feedback: ${feedback.typedFeedback}<br>
+    Inappropriate content: ${feedback.contentIsInappropriate}<br>
+    Factually incorrect content: ${feedback.contentIsFactuallyIncorrect}<br>
+    Not helpful content: ${feedback.contentIsNotHelpful}<br>
+    Generation response: ${generationResponse}<br>
+    Full data of the time of the flag:<br>
+    <br>
+    ${inputDataAsString}</p>
   `;
 
   return sendEmail({
     from: "ai.feedback@thenational.academy",
     to: NEXT_PUBLIC_GLEAP_FEEDBACK_EMAIL_ADDR,
     subject: "Feedback: generation flagged",
-    body: emailContent,
+    htmlBody: emailContent,
   });
 };
diff --git a/packages/core/src/utils/stripHtml.ts b/packages/core/src/utils/stripHtml.ts
new file mode 100644
index 000000000..23671bb08
--- /dev/null
+++ b/packages/core/src/utils/stripHtml.ts
@@ -0,0 +1,3 @@
+export function stripHtml(html: string) {
+  return html.replace(/<[^>]*>?/gm, "");
+}