WIP implement mjml with header

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

@@ -7,6 +7,7 @@ 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 {
@@ -18,6 +19,7 @@ export class EmailService {
   public constructor(
     private readonly notificationContentService: NotificationContentService,
     private readonly emailTemplateService: EmailTemplateService,
+    private readonly mjmlService: MjmlService,
   ) {}
 
   private async getSegmentId(
@@ -47,17 +49,19 @@ 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(
-      emailContent,
-      date,
-    );
+    // emailHtml = await this.emailTemplateService.createHtmlForTriggerEmail(
+    //   emailContent,
+    //   date,
+    // );
+
+    const emailHtml = this.mjmlService.getHtmlOutput({ emailContent, date });
+
     if (isApiTest) {
       return emailHtml;
     }

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

@@ -0,0 +1,57 @@
+import { Injectable } from '@nestjs/common';
+
+import mjml2html from 'mjml';
+
+import { ContentEventEmail } from '../dto/content-trigger-email.dto';
+import { getMjmlHeader } from './mjml/header';
+
+@Injectable()
+export class MjmlService {
+  public getHtmlOutput({
+    emailContent,
+    date,
+  }: {
+    emailContent: ContentEventEmail;
+    date: Date;
+  }): string {
+    const {
+      // disasterType,
+      disasterTypeLabel,
+      // indicatorMetadata,
+      // linkEapSop,
+      // dataPerEvent,
+      // mapImageData,
+      // defaultAdminLevel,
+      // defaultAdminAreaLabel,
+      // country,
+    } = emailContent;
+
+    const header = getMjmlHeader({
+      disasterTypeLabel,
+      nrOfEvents: emailContent.dataPerEvent.length,
+      sentOnDate: date.toISOString(),
+      timeZone: 'UTC',
+    });
+
+    // const bodyEventList =
+    //   this.emailTemplateService.getMjmlEventListBody(emailContent);
+
+    const emailObject = {
+      tagName: 'mjml',
+      attributes: {},
+      children: [
+        {
+          tagName: 'mj-body',
+          children: [
+            {
+              tagName: 'mj-column',
+              children: [header],
+            },
+          ],
+        },
+      ],
+    };
+
+    return mjml2html(emailObject).html;
+  }
+}

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

@@ -0,0 +1,31 @@
+export const getMjmlHeader = ({
+  disasterTypeLabel,
+  nrOfEvents,
+  sentOnDate,
+  timeZone,
+}: {
+  disasterTypeLabel: string;
+  nrOfEvents: number;
+  sentOnDate: string;
+  timeZone: string;
+}): object => {
+  const titleElement = {
+    tagName: 'mj-text',
+    attributes: { 'font-size': '36px', color: '#ffffff', align: 'center' },
+    content: `${nrOfEvents} ${disasterTypeLabel} alerts`,
+  };
+
+  const subtitleElement = {
+    tagName: 'mj-text',
+    attributes: { 'font-size': '16px', color: '#ffffff', align: 'center' },
+    content: `IBF alert sent on ${sentOnDate} (${timeZone})`,
+  };
+
+  return {
+    tagName: 'mj-column',
+    attributes: {
+      'background-color': '#4f22d7',
+    },
+    children: [titleElement, subtitleElement],
+  };
+};

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

@@ -8,6 +8,7 @@ import { AdminAreaDynamicDataModule } from './../admin-area-dynamic-data/admin-a
 import { EventModule } from './../event/event.module';
 import { EmailTemplateService } from './email/email-template.service';
 import { EmailService } from './email/email.service';
+import { MjmlService } from './email/mjml.service';
 import { NotificationInfoEntity } from './notifcation-info.entity';
 import { NotificationContentModule } from './notification-content/notification-content.module';
 import { NotificationController } from './notification.controller';
@@ -25,6 +26,11 @@ import { WhatsappModule } from './whatsapp/whatsapp.module';
     TyphoonTrackModule,
   ],
   controllers: [NotificationController],
-  providers: [NotificationService, EmailService, EmailTemplateService],
+  providers: [
+    NotificationService,
+    EmailService,
+    EmailTemplateService,
+    MjmlService,
+  ],
 })
 export class NotificationModule {}