WIP add footer

rodekruis · Aug 15, 2024 · a99b5bd · a99b5bd
1 parent fe1a1bf
commit a99b5bd
Show file tree

Hide file tree

Showing 6 changed files with 69 additions and 9 deletions.
diff --git a/services/API-service/src/api/notification/email/email-template.service.ts b/services/API-service/src/api/notification/email/email-template.service.ts
@@ -20,6 +20,7 @@ import {
 } from '../dto/notification-date-per-event.dto';
 import { getMjmlBodyEvent } from './mjml/body-event';
 import { getMjmlEventAdminAreaTable } from './mjml/event-admin-area-table';
+import { getMjmlFooter } from './mjml/footer';
 import { getMjmlMapImage } from './mjml/map-image';
 
 const emailFolder = './src/api/notification/email';
@@ -572,6 +573,11 @@ export class EmailTemplateService {
     });
   }
 
+  public getMjmlFooter(countryName: string): object {
+    const ibfLogo = this.getLogoImageAsDataURL();
+    return getMjmlFooter({ ibfLogo, countryName });
+  }
+
   private getCurrentDateTimeString(countryCodeISO3: string): string {
     const date = new Date();
     return this.dateObjectToDateTimeString(date, countryCodeISO3);

diff --git a/services/API-service/src/api/notification/email/mjml.service.ts b/services/API-service/src/api/notification/email/mjml.service.ts
@@ -89,6 +89,10 @@ export class MjmlService {
 
     children.push(mailBody);
 
+    children.push(
+      this.emailTemplateService.getMjmlFooter(emailContent.country.countryName),
+    );
+
     const emailObject = {
       tagName: 'mjml',
       attributes: {},

diff --git a/services/API-service/src/api/notification/email/mjml/body-event.ts b/services/API-service/src/api/notification/email/mjml/body-event.ts
@@ -1,7 +1,7 @@
 import { TriggerStatusLabelEnum } from '../../dto/notification-date-per-event.dto';
 import {
   // getImageElement,
-  getInlineTriangleIcon,
+  getInlineImage,
   getReturnElement,
   getTextElement,
 } from '../../helpers/mjml.helper';
@@ -43,7 +43,7 @@ export const getMjmlBodyEvent = ({
   triangleIcon: string;
   triggerStatusLabel: string;
 }): object => {
-  const icon = getInlineTriangleIcon({ src: triangleIcon });
+  const icon = getInlineImage({ src: triangleIcon, size: 14 });
 
   const eventNameElement = getTextElement({
     attributes: { color },

diff --git a/services/API-service/src/api/notification/email/mjml/event-admin-area-table.ts b/services/API-service/src/api/notification/email/mjml/event-admin-area-table.ts
@@ -7,7 +7,7 @@ import {
 import {
   COLOR_WHITE,
   getAdminAreaTable,
-  getInlineTriangleIcon,
+  getInlineImage,
   getReturnElement,
   getTextElement,
 } from '../../helpers/mjml.helper';
@@ -31,7 +31,7 @@ export const getMjmlEventAdminAreaTable = ({
 }) => {
   const isTrigger = event.triggerStatusLabel === TriggerStatusLabelEnum.Trigger;
 
-  const icon = getInlineTriangleIcon({ src: triangleIcon });
+  const icon = getInlineImage({ src: triangleIcon, size: 14 });
 
   const titleElement = getTextElement({
     content: `${icon} <strong>${disasterTypeLabel} ${event.triggerStatusLabel} ${event.eventName}</strong>`,

diff --git a/services/API-service/src/api/notification/email/mjml/footer.ts b/services/API-service/src/api/notification/email/mjml/footer.ts
@@ -0,0 +1,47 @@
+import {
+  COLOR_PRIMARY,
+  COLOR_WHITE,
+  getImageElement,
+  getReturnElement,
+  getTextElement,
+} from '../../helpers/mjml.helper';
+
+export const getMjmlFooter = ({
+  ibfLogo,
+  countryName,
+}: {
+  ibfLogo: string;
+  countryName: string;
+}): object => {
+  const logoElement = getImageElement({
+    src: ibfLogo,
+    otherAttributes: { width: '45px' },
+  });
+
+  const textElement = getTextElement({
+    content: `Impact-Based Forecasting Portal (IBF) was co-developed by Netherlands
+    Red Cross 510 the together with the ${countryName} Red Cross
+    National Society. For questions contact us at [email protected]`,
+    attributes: { color: COLOR_WHITE },
+  });
+
+  const twoColumnSectionElement = {
+    tagName: 'mj-section',
+    children: [
+      {
+        tagName: 'mj-column',
+        children: [logoElement],
+        attributes: { width: '20%' },
+      },
+      {
+        tagName: 'mj-column',
+        children: [textElement],
+        attributes: { width: '80%' },
+      },
+    ],
+  };
+  return getReturnElement({
+    childrenEls: [twoColumnSectionElement],
+    attributes: { 'background-color': COLOR_PRIMARY },
+  });
+};
diff --git a/services/API-service/src/api/notification/helpers/mjml.helper.ts b/services/API-service/src/api/notification/helpers/mjml.helper.ts
@@ -144,11 +144,14 @@ export const getAdminAreaTable = ({
   };
 };
 
-// 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}" width="14" height="14" style="display: inline-block; width: 14px; height: 14px; max-width: 14px; max-height: 14px"></img>`;
+export const getInlineImage = ({
+  src,
+  size,
+}: {
+  src: string;
+  size: number;
+}): string =>
+  `<img src="${src}" width="${size}" height="${size}" style="display: inline-block; width: ${size}px; height: ${size}px; max-width: ${size}px; max-height: ${size}px"></img>`;
 
 export const getImageElement = ({
   src,