WIP update style

rodekruis · Aug 12, 2024 · fe1a1bf · fe1a1bf
1 parent 2362a45
commit fe1a1bf
Show file tree

Hide file tree

Showing 2 changed files with 145 additions and 54 deletions.
diff --git a/services/API-service/src/api/notification/email/mjml.service.ts b/services/API-service/src/api/notification/email/mjml.service.ts
@@ -3,6 +3,11 @@ import { Injectable } from '@nestjs/common';
 import mjml2html from 'mjml';
 
 import { ContentEventEmail } from '../dto/content-trigger-email.dto';
+import {
+  getReturnElement,
+  getTextElement,
+  WIDTH_BODY,
+} from '../helpers/mjml.helper';
 import { EmailTemplateService } from './email-template.service';
 import { getMjmlHeader } from './mjml/header';
 import { getMjmlNotificationAction } from './mjml/notification-actions';
@@ -19,60 +24,79 @@ export class MjmlService {
     emailContent: ContentEventEmail;
     date: Date;
   }): string {
-    // const {
-    //   // disasterType,
-    //   disasterTypeLabel,
-    //   // indicatorMetadata,
-    //   // linkEapSop,
-    //   // dataPerEvent,
-    //   // mapImageData,
-    //   // defaultAdminLevel,
-    //   // defaultAdminAreaLabel,
-    //   // country,
-    // } = emailContent;
+    const children = [];
 
-    const header = getMjmlHeader({
-      disasterTypeLabel: emailContent.disasterTypeLabel,
-      nrOfEvents: emailContent.dataPerEvent.length,
-      sentOnDate: date.toISOString(),
-      timeZone: 'UTC',
-    });
+    children.push(
+      getMjmlHeader({
+        disasterTypeLabel: emailContent.disasterTypeLabel,
+        nrOfEvents: emailContent.dataPerEvent.length,
+        sentOnDate: date.toISOString(),
+        timeZone: 'UTC',
+      }),
+    );
 
-    const bodyEventList =
-      this.emailTemplateService.getMjmlEventListBody(emailContent);
-
-    const notificationAction = getMjmlNotificationAction({
-      linkDashboard: process.env.DASHBOARD_URL,
-      linkEapSop: emailContent.linkEapSop,
-      socialMediaLink:
-        emailContent.country.notificationInfo.linkSocialMediaUrl ?? '',
-      socialMediaType:
-        emailContent.country.notificationInfo.linkSocialMediaType ?? '',
-    });
+    const mailBody = {
+      tagName: 'mj-section',
+      children: [],
+      attributes: {
+        'background-color': '#F4F5F8',
+        'padding-left': '90px',
+        'padding-right': '90px',
+      },
+    };
 
-    const triggerStatement = getMjmlTriggerStatement({
-      triggerStatement:
-        emailContent.country.notificationInfo.triggerStatement[
-          emailContent.disasterType
+    mailBody.children.push(
+      getReturnElement({
+        childrenEls: [
+          getTextElement({
+            content: 'Dear Reader,',
+          }),
         ],
-    });
+      }),
+    );
+
+    mailBody.children.push(
+      ...this.emailTemplateService.getMjmlEventListBody(emailContent),
+    );
 
-    const adminAreaTableList =
-      this.emailTemplateService.getMjmlAdminAreaTableList(emailContent);
+    mailBody.children.push(
+      getMjmlNotificationAction({
+        linkDashboard: process.env.DASHBOARD_URL,
+        linkEapSop: emailContent.linkEapSop,
+        socialMediaLink:
+          emailContent.country.notificationInfo.linkSocialMediaUrl ?? '',
+        socialMediaType:
+          emailContent.country.notificationInfo.linkSocialMediaType ?? '',
+      }),
+    );
+
+    mailBody.children.push(
+      getMjmlTriggerStatement({
+        triggerStatement:
+          emailContent.country.notificationInfo.triggerStatement[
+            emailContent.disasterType
+          ],
+      }),
+    );
+
+    mailBody.children.push(
+      ...this.emailTemplateService.getMjmlMapImages(emailContent),
+    );
+
+    mailBody.children.push(
+      ...this.emailTemplateService.getMjmlAdminAreaTableList(emailContent),
+    );
+
+    children.push(mailBody);
 
     const emailObject = {
       tagName: 'mjml',
       attributes: {},
       children: [
         {
           tagName: 'mj-body',
-          children: [
-            header,
-            ...bodyEventList,
-            notificationAction,
-            triggerStatement,
-            ...adminAreaTableList,
-          ],
+          children,
+          attributes: { width: WIDTH_BODY },
         },
       ],
     };

diff --git a/services/API-service/src/api/notification/helpers/mjml.helper.ts b/services/API-service/src/api/notification/helpers/mjml.helper.ts
@@ -1,3 +1,11 @@
+export const WIDTH_BODY = '632px';
+export const WIDTH_INNER_BODY = '437px';
+
+export const COLOR_PRIMARY = '#4f22d7';
+export const COLOR_SECONDARY = '#ffffff';
+export const COLOR_TERTIARY = '#cfbfff';
+export const COLOR_WHITE = '#ffffff';
+
 export const getReturnElement = ({
   childrenEls,
   attributes,
@@ -13,7 +21,11 @@ export const getReturnElement = ({
         children: childrenEls,
       },
     ],
-    attributes,
+    attributes: {
+      width: WIDTH_INNER_BODY,
+      padding: '0px 0px 20px 0px',
+      ...attributes,
+    },
   };
 };
 
@@ -27,31 +39,67 @@ export const getTextElement = ({
   return {
     tagName: 'mj-text',
     content,
-    attributes,
+    attributes: {
+      'line-height': '1.5',
+      padding: '0px',
+      'font-size': '14px',
+      ...attributes,
+    },
   };
 };
 
-export const getNotificationActionsSection = (
-  buttonText: string,
-  buttonLink: string,
-  descriptionn: string,
-): object => {
+export const getNotificationActionsSection = ({
+  buttonText,
+  buttonLink,
+  description,
+  primary,
+}: {
+  buttonText: string;
+  buttonLink: string;
+  description: string;
+  primary: boolean;
+}): object => {
   return {
     tagName: 'mj-section',
+    attributes: { padding: '0px 0px 10px 0px' },
     children: [
       {
         tagName: 'mj-column',
+        attributes: {
+          'vertical-align': 'middle',
+          width: '200px',
+        },
         children: [
           {
             tagName: 'mj-button',
-            attributes: { href: buttonLink },
+            attributes: {
+              href: buttonLink,
+              align: 'left',
+              width: '200px',
+              height: '28px',
+              'border-radius': '24px',
+              padding: '0px',
+              'background-color': primary ? COLOR_PRIMARY : COLOR_SECONDARY,
+              color: primary ? COLOR_SECONDARY : COLOR_PRIMARY,
+              border: `1px solid ${primary ? COLOR_PRIMARY : COLOR_TERTIARY}`,
+              'font-weight': 'bold',
+            },
             content: buttonText,
           },
         ],
       },
       {
         tagName: 'mj-column',
-        children: [getTextElement({ content: descriptionn })],
+        attributes: {
+          'vertical-align': 'middle',
+          width: '250px',
+        },
+        children: [
+          getTextElement({
+            content: description,
+            attributes: { 'padding-left': '10px' },
+          }),
+        ],
       },
     ],
   };
@@ -70,15 +118,17 @@ export const getAdminAreaTable = ({
   adminAreaList: { exposed?: number; name: string }[];
   isTrigger: boolean;
 }) => {
+  const align = isTrigger ? 'left' : 'center';
+
   const header = `
-    <tr>
+    <tr align="${align}">
       ${isTrigger ? '<th>Exposed ' + indicatorLabel + '</th>' : ''}
       <th>${adminAreaLabel} (${adminAreaParentLabel})</th>
     </tr>
   `;
 
   const row = (adminArea) => `
-    <tr>
+    <tr align="${align}">
       ${isTrigger ? '<td>' + adminArea.exposed + '</td>' : ''}
       <td>${adminArea.name}</td>
     </tr>
@@ -90,8 +140,25 @@ export const getAdminAreaTable = ({
   return {
     tagName: 'mj-table',
     content: tbody,
+    attributes: { 'container-background-color': COLOR_WHITE },
   };
 };
 
+// export const getInlineTriangleIcon = ({ src }: { src: string }): string =>
+//   `<img src="${src}" style="width: 14px; padding-right: 4px"></img>`;
+
 export const getInlineTriangleIcon = ({ src }: { src: string }): string =>
-  `<img src="${src}" style="width: 14px; padding-right: 4px"></img>`;
+  `<img src="${src}" width="14" height="14" style="display: inline-block; width: 14px; height: 14px; max-width: 14px; max-height: 14px"></img>`;
+
+export const getImageElement = ({
+  src,
+  otherAttributes,
+}: {
+  src: string;
+  otherAttributes?: object;
+}): object => {
+  return {
+    tagName: 'mj-image',
+    attributes: { src, ...otherAttributes },
+  };
+};