feat: Switch to mjml to handle email templates

services/API-service/package.json

@@ -44,6 +44,8 @@
     "jsonwebtoken": "^8.1.1",
     "juice": "^10.0.0",
     "mailchimp-api-v3": "^1.15.0",
+    "mjml": "^4.15.3",
+    "moment": "^2.30.1",
     "mysql": "^2.15.0",
     "passport": "^0.4.1",
     "passport-jwt": "^4.0.0",

services/API-service/src/api/notification/email/email.service.ts

@@ -1,3 +1,4 @@
+// import * as fs from 'fs';
 import { Injectable } from '@nestjs/common';
 
 import Mailchimp from 'mailchimp-api-v3';
@@ -6,7 +7,7 @@ import { EventSummaryCountry } from '../../../shared/data.model';
 import { DisasterType } from '../../disaster/disaster-type.enum';
 import { CountryEntity } from './../../country/country.entity';
 import { NotificationContentService } from './../notification-content/notification-content.service';
-import { EmailTemplateService } from './email-template.service';
+import { MjmlService } from './mjml.service';
 
 @Injectable()
 export class EmailService {
@@ -17,7 +18,7 @@ export class EmailService {
 
   public constructor(
     private readonly notificationContentService: NotificationContentService,
-    private readonly emailTemplateService: EmailTemplateService,
+    private readonly mjmlService: MjmlService,
   ) {}
 
   private async getSegmentId(
@@ -47,18 +48,22 @@ export class EmailService {
     date?: Date,
   ): Promise<void | string> {
     date = date ? new Date(date) : new Date();
-
     const emailContent =
       await this.notificationContentService.getContentTriggerNotification(
         country,
         disasterType,
         activeEvents,
       );
-    const emailHtml = await this.emailTemplateService.createHtmlForTriggerEmail(
+    let emailHtml = '';
+
+    emailHtml += this.mjmlService.getTriggerEmailHtmlOutput({
       emailContent,
       date,
-    );
+    });
+
     if (isApiTest) {
+      // NOTE: use this to test the email output instead of using Mailchimp
+      // fs.writeFileSync(`email.html`, emailHtml);
       return emailHtml;
     }
     const emailSubject = `IBF ${emailContent.disasterTypeLabel} alert`;
@@ -79,15 +84,19 @@ export class EmailService {
   ): Promise<void | string> {
     const disasterTypeLabel =
       await this.notificationContentService.getDisasterTypeLabel(disasterType);
-    const emailHtml =
-      await this.emailTemplateService.createHtmlForTriggerFinishedEmail(
+
+    const emailContent =
+      await this.notificationContentService.getContentTriggerNotification(
         country,
         disasterType,
         finishedEvents,
-        disasterTypeLabel,
-        date ? new Date(date) : new Date(),
       );
 
+    const emailHtml = this.mjmlService.getEventFinishedEmailHtmlOutput({
+      emailContent,
+      date,
+    });
+
     if (isApiTest) {
       return emailHtml;
     }

services/API-service/src/api/notification/email/mjml.service.ts

@@ -0,0 +1,182 @@
+import { Injectable } from '@nestjs/common';
+
+import mjml2html from 'mjml';
+
+import { ContentEventEmail } from '../dto/content-trigger-email.dto';
+import {
+  getFormattedDate,
+  getSectionElement,
+  getTextElement,
+  getTimezoneDisplay,
+  WIDTH_BODY,
+} from '../helpers/mjml.helper';
+import { getMjmlEventListBody } from './mjml/body-event';
+import { getMjmlAdminAreaTableList } from './mjml/event-admin-area-table';
+import { getMjmlFinishedEvents } from './mjml/event-finished';
+import { getMjmlFooter } from './mjml/footer';
+import { getMjmlHeader } from './mjml/header';
+import { getMjmlMapImages } from './mjml/map-image';
+import { getMjmlNotificationAction } from './mjml/notification-actions';
+import { getMjmlTriggerStatement } from './mjml/trigger-statement';
+
+@Injectable()
+export class MjmlService {
+  private mailOpening = getSectionElement({
+    childrenEls: [
+      getTextElement({
+        content: 'Dear Reader,',
+        attributes: { 'padding-top': '20px' },
+      }),
+    ],
+  });
+
+  private header = ({
+    emailContent,
+    date,
+  }: {
+    emailContent: ContentEventEmail;
+    date: string;
+  }) =>
+    getMjmlHeader({
+      disasterTypeLabel: emailContent.disasterTypeLabel,
+      nrOfEvents: emailContent.dataPerEvent.length,
+      sentOnDate: getFormattedDate({ date }),
+      timeZone: getTimezoneDisplay(emailContent.country.countryCodeISO3),
+      logosSrc:
+        emailContent.country.notificationInfo.logo[emailContent.disasterType],
+    });
+
+  private footer = ({ countryName }: { countryName: string }) =>
+    getMjmlFooter({ countryName });
+
+  private notificationAction = ({
+    linkDashboard,
+    linkEapSop,
+    socialMediaLink,
+    socialMediaType,
+  }: {
+    linkDashboard: string;
+    linkEapSop: string;
+    socialMediaLink: string;
+    socialMediaType: string;
+  }) =>
+    getMjmlNotificationAction({
+      linkDashboard,
+      linkEapSop,
+      socialMediaLink,
+      socialMediaType,
+    });
+
+  public getTriggerEmailHtmlOutput({
+    emailContent,
+    date,
+  }: {
+    emailContent: ContentEventEmail;
+    date: Date;
+  }): string {
+    const children = [];
+
+    children.push(
+      this.header({ emailContent, date: getFormattedDate({ date }) }),
+    );
+
+    children.push(this.mailOpening);
+
+    children.push(...getMjmlEventListBody(emailContent));
+
+    children.push(
+      this.notificationAction({
+        linkDashboard: process.env.DASHBOARD_URL,
+        linkEapSop: emailContent.linkEapSop,
+        socialMediaLink:
+          emailContent.country.notificationInfo.linkSocialMediaUrl ?? '',
+        socialMediaType:
+          emailContent.country.notificationInfo.linkSocialMediaType ?? '',
+      }),
+    );
+
+    children.push(
+      getMjmlTriggerStatement({
+        triggerStatement:
+          emailContent.country.notificationInfo.triggerStatement[
+            emailContent.disasterType
+          ],
+      }),
+    );
+
+    children.push(...getMjmlMapImages(emailContent));
+
+    children.push(...getMjmlAdminAreaTableList(emailContent));
+
+    children.push(
+      this.footer({ countryName: emailContent.country.countryName }),
+    );
+
+    const emailObject = {
+      tagName: 'mjml',
+      attributes: {},
+      children: [
+        {
+          tagName: 'mj-body',
+          children,
+          attributes: { width: WIDTH_BODY },
+        },
+      ],
+    };
+
+    return mjml2html(emailObject).html;
+  }
+
+  public getEventFinishedEmailHtmlOutput({
+    emailContent,
+    date,
+  }: {
+    emailContent: ContentEventEmail;
+    date: Date;
+  }): string {
+    const children = [];
+
+    children.push(
+      this.header({ emailContent, date: getFormattedDate({ date }) }),
+    );
+
+    children.push(this.mailOpening);
+
+    children.push(
+      ...getMjmlFinishedEvents({
+        disasterType: emailContent.disasterTypeLabel,
+        dataPerEvent: emailContent.dataPerEvent,
+        timezone: getTimezoneDisplay(emailContent.country.countryCodeISO3),
+      }),
+    );
+
+    children.push(
+      this.notificationAction({
+        linkDashboard: process.env.DASHBOARD_URL,
+        linkEapSop: emailContent.linkEapSop,
+        socialMediaLink:
+          emailContent.country.notificationInfo.linkSocialMediaUrl ?? '',
+        socialMediaType:
+          emailContent.country.notificationInfo.linkSocialMediaType ?? '',
+      }),
+    );
+
+    children.push(
+      this.footer({ countryName: emailContent.country.countryName }),
+    );
+
+    const emailObject = {
+      tagName: 'mjml',
+      attributes: {},
+      children: [
+        {
+          tagName: 'mj-body',
+          children,
+          attributes: { width: WIDTH_BODY },
+        },
+      ],
+    };
+
+    return mjml2html(emailObject).html;
+  }
+}