feat: update emails to use html (#319)

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: "[email protected]",
           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;

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: "[email protected]",
-    TextBody: body,
-    HtmlBody: `<html><body><pre>${body}</pre></body></html>`,
+    TextBody: stripHtml(htmlBody),
+    HtmlBody: `<html><body>${htmlBody}</body></html>`,
     MessageStream: "outbound",
   });
 

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: "[email protected]",
     to: NEXT_PUBLIC_GLEAP_FEEDBACK_EMAIL_ADDR,
     subject: "Feedback: generation flagged",
-    body: emailContent,
+    htmlBody: emailContent,
   });
 };

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: "[email protected]",
     to: NEXT_PUBLIC_GLEAP_FEEDBACK_EMAIL_ADDR,
     subject: "Feedback: comparative judgement result flagged",
-    body: emailContent,
+    htmlBody: emailContent,
   });
 };

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: "[email protected]",
     to: NEXT_PUBLIC_GLEAP_FEEDBACK_EMAIL_ADDR,
     subject: "Feedback: generation flagged",
-    body: emailContent,
+    htmlBody: emailContent,
   });
 };

packages/core/src/utils/stripHtml.ts

@@ -0,0 +1,3 @@
+export function stripHtml(html: string) {
+  return html.replace(/<[^>]*>?/gm, "");
+}