@capillarytech/creatives-library 7.12.108 → 7.12.109

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@capillarytech/creatives-library",
   "author": "meharaj",
-  "version": "7.12.108",
+  "version": "7.12.109",
   "description": "Capillary creatives ui",
   "main": "./index.js",
   "module": "./index.es.js",
@@ -12,7 +12,7 @@
   },
   "license": "LicenseRef-LICENSE",
   "dependencies": {
-    "@babel/polyfill": "^7.4.3",
+    "@babel/polyfill": "7.4.3",
     "@bugsnag/js": "^7.2.1",
     "@bugsnag/plugin-react": "^7.2.1",
     "@capillarytech/cap-ui-utils": "1.4.2",
@@ -24,8 +24,10 @@
     "jest-date-mock": "^1.0.8",
     "jquery": "^3.3.1",
     "load-script": "^1.0.0",
+    "node-html-parser": "^5.4.2-0",
     "normalizr": "^3.2.3",
     "papaparse": "^5.3.1",
+    "pre-push": "^0.1.2",
     "react-datepicker": "^0.46.0",
     "react-dropzone": "^11.3.4",
     "react-phone-input-2": "^2.15.0",

package/routes.js

@@ -13,6 +13,7 @@ import * as emailSagas from 'containers/Email/sagas';
 import * as templateSagas from 'containers/Templates/sagas';
 import * as lineSagas from 'containers/Line/Create/sagas';
 import * as languageSaga from './v2Containers/LanguageProvider/sagas';
+
 import pathConfig from './config/path';
 
 import {updateCharCount} from './utils/smsCharCountV2';

package/services/api.js

@@ -484,4 +484,9 @@ export const createWhatsappTemplate = ({ payload }) => {
 export const getSenderDetails = (channel, orgUnitId) => {
   const url = `${CAMPAIGNS_API_ORG_ENDPOINT}/meta/domainProperties?channel=${channel}`;
   return request(url, getAPICallObject('GET', null, false, true, orgUnitId));
-};
+};
+
+export const getCdnTransformationConfig = () => {
+  const url = `${API_ENDPOINT}/common/getCdnTransformationConfig`;
+  return request(url, getAPICallObject('GET'));
+}

package/utils/cdnTransformation.js

@@ -0,0 +1,316 @@
+import cloneDeep from "lodash/cloneDeep";
+import isEmpty from "lodash/isEmpty";
+import forOwn from "lodash/forOwn";
+import isNumber from "lodash/isNumber";
+/* eslint-disable no-unused-expressions */
+import { parse } from "node-html-parser";
+
+// https://storage.crm.n.content-cdn.io/cdn-cgi/image/width=100,height=100,quality=75,fit=cover,g=top,format=auto/intouch_creative_assets/005710a7-6412-44fe-a19f-e72456b1.jpg
+
+// const regex = /https:\/\/.*intouch_creative_assets.*(?:jpg|png|jpeg|gif)$/;
+const regex = /https:\/\/.*intouch_creative_assets.*$/;
+const INTOUCH_CREATIVE_ASSETS = "intouch_creative_assets";
+const SPECIFIED = "specified";
+const FORMAT_TYPES = { AUTO: "auto" };
+const QUALITY_TYPE = {
+  DECREASE: "decrease",
+  PRESERVE: "preserve",
+};
+
+const CHANNEL_CONFIGS = {
+  EMAIL: {
+    transformations: {
+      width: SPECIFIED,
+      height: SPECIFIED,
+      format: FORMAT_TYPES.AUTO,
+      quality: QUALITY_TYPE.DECREASE,
+    },
+  },
+  RCS: {
+    transformations: {
+      width: 1440,
+      height: 720,
+      quality: QUALITY_TYPE.DECREASE,
+    },
+  },
+  VIBER: {
+    transformations: {
+      width: 300,
+      height: 400,
+      quality: QUALITY_TYPE.DECREASE,
+    },
+  },
+  WHATSAPP: {
+    transformations: {
+      quality: QUALITY_TYPE.DECREASE, //TODO whatsapp itself might reduce quality. To be checked
+    },
+  },
+  MOBILE_PUSH: {
+    transformations: {
+      quality: QUALITY_TYPE.DECREASE,
+    },
+  },
+  FACEBOOK: {
+    IMAGE: {
+      transformations: {
+        width: 1080,
+        height: 1080,
+        quality: QUALITY_TYPE.DECREASE,
+      },
+    }
+  },
+  LINE: {
+    IMAGE: {
+      transformations: {
+        width: 300,
+        height: 400,
+        quality: QUALITY_TYPE.DECREASE,
+      },
+    },
+    CARD: {
+      transformations: {
+        width: 1024,
+        height: 1024,
+        quality: QUALITY_TYPE.DECREASE,
+      },
+    },
+    RICH_MESSAGE: {
+      //Rich Message in Line has Square and Custom templates. 
+      //Width (1040px) is same in both whereas height varies. Hence including width only.
+      transformations: {
+        width: 1040,
+        quality: QUALITY_TYPE.DECREASE,
+      },
+    }
+  },
+  WECHAT: {
+    transformations: {
+      width: 360,
+      height: 200,
+      quality: QUALITY_TYPE.DECREASE,
+      
+    }
+  }
+};
+
+const CREATIVES_CDN_BASE_URL_KEY = 'CREATIVES_CDN_BASE_URL';
+const CREATIVES_CDN_QUALITY_CONFIG_KEY = 'CREATIVES_CDN_QUALITY_CONFIG';
+const CREATIVES_CDN_TRANSFORMATION_URL_SUFFIX_KEY = 'CREATIVES_CDN_TRANSFORMATION_URL_SUFFIX';
+/**
+ * getCdnUrl : utility function to replace and return s3/cdn url with cdn url.
+ */
+export const getCdnUrl = ({
+  url,
+  height,
+  width,
+  channelName: receivedChannelName,
+  channelSubType: receivedChannelSubType,
+}) => {
+  try{
+    const channelName = receivedChannelName?.toUpperCase();
+    const channelSubType = receivedChannelSubType?.toUpperCase();
+  
+    const CREATIVES_CDN_BASE_URL = getLocalStorageItem(CREATIVES_CDN_BASE_URL_KEY);
+    const CREATIVES_CDN_QUALITY_CONFIG = getLocalStorageItem(CREATIVES_CDN_QUALITY_CONFIG_KEY, true);
+    const CREATIVES_CDN_TRANSFORMATION_URL_SUFFIX = getLocalStorageItem(CREATIVES_CDN_TRANSFORMATION_URL_SUFFIX_KEY);
+  
+    //Basic validations on data stored in local storage.
+    if (
+      typeof CREATIVES_CDN_QUALITY_CONFIG !== "object" ||
+      Array.isArray(CREATIVES_CDN_QUALITY_CONFIG) ||
+      CREATIVES_CDN_QUALITY_CONFIG === null ||
+      typeof CREATIVES_CDN_BASE_URL !== "string" || 
+      typeof CREATIVES_CDN_TRANSFORMATION_URL_SUFFIX !== "string"
+    )
+      return url;
+  
+    const QUALITY = CREATIVES_CDN_QUALITY_CONFIG?.[channelName] || CREATIVES_CDN_QUALITY_CONFIG?.DEFAULT;
+  
+    if (
+      !regex.test(url) ||
+      !CHANNEL_CONFIGS?.[channelName] ||
+      (channelSubType && !CHANNEL_CONFIGS?.[channelName]?.[channelSubType]) ||
+      !CREATIVES_CDN_BASE_URL ||
+      !CREATIVES_CDN_TRANSFORMATION_URL_SUFFIX ||
+      !QUALITY
+    )
+      return url;
+  
+    const [, assetKey] = url.split(INTOUCH_CREATIVE_ASSETS);
+  
+    let newUrl = `${CREATIVES_CDN_BASE_URL}`;
+  
+    let applicableTransformations;
+  
+    if (channelSubType) {
+      applicableTransformations =
+        CHANNEL_CONFIGS?.[channelName]?.[channelSubType]?.transformations;
+    } else {
+      applicableTransformations = CHANNEL_CONFIGS?.[channelName]?.transformations;
+    }
+  
+    if (!isEmpty(applicableTransformations)) {
+  
+      newUrl += `/${CREATIVES_CDN_TRANSFORMATION_URL_SUFFIX}/`;
+  
+      // Object.keys(applicableTransformations)?.forEach((transformationParam) => {
+      forOwn(applicableTransformations, (transformationParamVal, transformationParam)=>{
+        try {
+          switch (transformationParam) {
+            case "height":
+              if (transformationParamVal === SPECIFIED && height) {
+                newUrl += `${transformationParam}=${height},`;
+              } else if(transformationParamVal !== SPECIFIED && isNumber(transformationParamVal)) {
+                newUrl += `${transformationParam}=${transformationParamVal},`;
+              }
+              break;
+            case "width":
+              if (transformationParamVal === SPECIFIED && width) {
+                newUrl += `${transformationParam}=${width},`;
+              } else if(transformationParamVal !== SPECIFIED && isNumber(transformationParamVal)) {
+                newUrl += `${transformationParam}=${transformationParamVal},`;
+              }
+              break;
+            case "format":
+              if(transformationParamVal){
+                newUrl += `${transformationParam}=${transformationParamVal},`;
+              }
+              break;
+            case "quality":
+              if (transformationParamVal === QUALITY_TYPE?.DECREASE && QUALITY && typeof QUALITY === "number") {
+                newUrl += `${transformationParam}=${QUALITY},`;
+              } else {
+                newUrl += `${transformationParam}=100,`;
+              }
+              break;
+            default:
+              break;
+          }
+        } catch (e) {
+          console.log("some error occured while applying transformation",e);
+        }
+      })
+    }
+    newUrl += `/${INTOUCH_CREATIVE_ASSETS}${assetKey}`;
+    return newUrl;
+
+  }catch(e){
+    console.log('Some exception occurred in getCdnUrl',e);
+    return url;
+  }
+};
+
+/**
+ *
+ * @param {*} htmlContents
+ * @returns htmlContents with updated urls in image tag
+ */
+export const updateImagesInHtml = (htmlContents) => {
+  const copiedHtmlContents = htmlContents;
+  try {
+    const root = parse(htmlContents);
+    root.querySelectorAll("img").forEach((element) => {
+      const imageSrc = element.getAttribute("src");
+      const isAsset = regex.test(imageSrc);
+      if (isAsset) {
+        const height = element.getAttribute("height");
+        const width = element.getAttribute("width");
+        const newUrl = getCdnUrl({
+          url: imageSrc,
+          height,
+          width,
+          channelName: "EMAIL",
+        });
+        element.setAttribute("src", newUrl);
+      }
+    });
+    return root.toString();
+  } catch (e) {
+    console.log("An error occured while updating images in html", e);
+    return copiedHtmlContents; //return received input directly in case an exception is thrown
+  }
+};
+
+/**
+ *
+ * @param {*} contents
+ * @returns
+ */
+export const transformEmailTemplates = (contents) => {
+  const contentsCopy = cloneDeep(contents);
+  try {
+    const base = contentsCopy?.versions?.base;
+    const languages = base?.selectedLanguages;
+    languages?.forEach((lang) => {
+      const htmlContents = base?.[lang]?.["template-content"];
+      const newHtmlContents = updateImagesInHtml(htmlContents);
+      base[lang]["template-content"] = newHtmlContents;
+    });
+    return contentsCopy;
+  } catch (e) {
+    console.log("Some error has occured while transforming email templates", e);
+    return contents; //return received input directly in case an exception is thrown
+  }
+};
+
+
+
+export function getLocalStorageItem(key, parse = false){
+  const val = localStorage.getItem(key);
+  if(parse){
+    return JSON.parse(val);
+  }
+  return val;
+}
+
+export function removeLocalStorageItem(key) {
+  localStorage.removeItem(key);
+  return;
+}
+
+export function removeAllCdnLocalStorageItems() {
+  try{
+    removeLocalStorageItem(CREATIVES_CDN_BASE_URL_KEY);
+    removeLocalStorageItem(CREATIVES_CDN_QUALITY_CONFIG_KEY);
+    removeLocalStorageItem(CREATIVES_CDN_TRANSFORMATION_URL_SUFFIX_KEY);
+  }catch(e){
+    console.log('some error occured while deleting all keys for cdn', e);
+  }
+}
+
+export function saveCdnConfigs(configsResponse) {
+  try {
+    //If no response from api, then remove localStorage items if they were set previously
+    if (isEmpty(configsResponse)) {
+      removeAllCdnLocalStorageItems();
+      return;
+    }
+
+    if (configsResponse?.hostname) {
+      localStorage.setItem(
+        CREATIVES_CDN_BASE_URL_KEY,
+        configsResponse?.hostname
+      );
+    } else {
+      removeLocalStorageItem(CREATIVES_CDN_BASE_URL_KEY);
+    }
+
+    if (!isEmpty(configsResponse?.qualityCfg)) {
+      const qualityString = JSON.stringify(configsResponse?.qualityCfg);
+      localStorage.setItem(CREATIVES_CDN_QUALITY_CONFIG_KEY, qualityString);
+    } else {
+      removeLocalStorageItem(CREATIVES_CDN_QUALITY_CONFIG_KEY);
+    }
+
+    if (configsResponse?.transformationUrlSuffix) {
+      localStorage.setItem(
+        CREATIVES_CDN_TRANSFORMATION_URL_SUFFIX_KEY,
+        configsResponse?.transformationUrlSuffix
+      );
+    } else {
+      removeLocalStorageItem(CREATIVES_CDN_TRANSFORMATION_URL_SUFFIX_KEY);
+    }
+  } catch (e) {
+    console.log("some error while setting localstorage cdn configs");
+  }
+}

package/utils/tests/__snapshots__/cdnTransformation.test.js.snap

@@ -0,0 +1,298 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`cdnTransformationTests transformEmailTemplate() should transform email template 1`] = `
+Object {
+  "name": "test template1",
+  "type": "EMAIL",
+  "versions": Object {
+    "base": Object {
+      "activeTab": "en",
+      "base": true,
+      "en": Object {
+        "drag_drop_id": "",
+        "id": "5f7b61605f09ebe595ff404e",
+        "is_drag_drop": false,
+        "iso_code": "en",
+        "lang_id": 69,
+        "language": "English",
+        "tabKey": "6",
+        "template-content": "<!DOCTYPE html PUBLIC \\"-//W3C//DTD XHTML 1.0 Transitional //EN\\" \\"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\\">
+<html xmlns=\\"http://www.w3.org/1999/xhtml\\" xmlns:o=\\"urn:schemas-microsoft-com:office:office\\" xmlns:v=\\"urn:schemas-microsoft-com:vml\\">
+<head><meta http-equiv=\\"Content-Type\\" content=\\"text/html; charset=utf-8\\"><meta name=\\"viewport\\" content=\\"width=device-width\\">
+	<title></title>
+	
+	<style type=\\"text/css\\">body {
+  margin: 0;
+  padding: 0; }
+
+table,
+td,
+tr {
+  vertical-align: top;
+  border-collapse: collapse; }
+
+* {
+  line-height: inherit; }
+
+a[x-apple-data-detectors=true] {
+  color: inherit !important;
+  text-decoration: none !important; }
+	</style>
+	<style id=\\"media-query\\" type=\\"text/css\\">@media (max-width: 520px) {
+  .block-grid,
+.col {
+    min-width: 320px !important;
+    max-width: 100% !important;
+    display: block !important;
+  }
+
+  .block-grid {
+    width: 100% !important;
+  }
+
+  .col {
+    width: 100% !important;
+  }
+
+  .col > div {
+    margin: 0 auto;
+  }
+
+  img.fullwidth,
+img.fullwidthOnMobile {
+    max-width: 100% !important;
+  }
+
+  .no-stack .col {
+    min-width: 0 !important;
+    display: table-cell !important;
+  }
+
+  .no-stack.two-up .col {
+    width: 50% !important;
+  }
+
+  .no-stack .col.num4 {
+    width: 33% !important;
+  }
+
+  .no-stack .col.num8 {
+    width: 66% !important;
+  }
+
+  .no-stack .col.num4 {
+    width: 33% !important;
+  }
+
+  .no-stack .col.num3 {
+    width: 25% !important;
+  }
+
+  .no-stack .col.num6 {
+    width: 50% !important;
+  }
+
+  .no-stack .col.num9 {
+    width: 75% !important;
+  }
+
+  .video-block {
+    max-width: none !important;
+  }
+
+  .mobile_hide {
+    min-height: 0px;
+    max-height: 0px;
+    max-width: 0px;
+    display: none;
+    overflow: hidden;
+    font-size: 0px;
+  }
+
+  .desktop_hide {
+    display: block !important;
+    max-height: none !important;
+  }
+}
+	</style>
+</head>
+<body class=\\"clean-body\\" style=\\"margin: 0; padding: 0; -webkit-text-size-adjust: 100%; background-color: #FFFFFF;\\">
+<p>hello world</p>
+
+<p><img alt=\\"Capillary Image\\" height=\\"171\\" src=\\"https://storage.crm.n.content-cdn.io/cdn-cgi/image/width=257,height=171,format=auto,quality=75,/intouch_creative_assets/b4b63b22-8a81-41ee-a8df-6db967fc.jpg\\" width=\\"257\\"></p>
+
+<table bgcolor=\\"#FFFFFF\\" cellpadding=\\"0\\" cellspacing=\\"0\\" class=\\"nl-container\\" role=\\"presentation\\" style=\\"background-color:#ffffff; border-collapse:collapse; border-spacing:0; margin:0 auto; min-width:320px; mso-table-lspace:0pt; mso-table-rspace:0pt; table-layout:fixed; vertical-align:top; width:100%\\" valign=\\"top\\">
+	<tbody>
+		<tr style=\\"vertical-align:top\\" valign=\\"top\\">
+			<td style=\\"vertical-align:top; word-break:break-word\\">
+			<div style=\\"background-color:transparent\\">
+			<div class=\\"block-grid\\" style=\\"background-color:transparent; margin-bottom:0; margin-left:auto; margin-right:auto; margin-top:0; max-width:500px; min-width:320px; overflow-wrap:break-word; word-break:break-word; word-wrap:break-word\\">
+			<div style=\\"background-color:transparent; border-collapse:collapse; display:table; width:100%\\">
+			<div class=\\"col num12\\" style=\\"display:table-cell; max-width:500px; min-width:320px; vertical-align:top; width:500px\\">
+			<div style=\\"width:100% !important\\"></div>
+			</div>
+			</div>
+			</div>
+			</div>
+			</td>
+		</tr>
+	</tbody>
+</table>
+</body>
+</html>
+",
+      },
+      "selectedLanguages": Array [
+        "en",
+      ],
+      "subject": "hello subject",
+      "tabKey": "6",
+    },
+    "history": Array [
+      Object {
+        "activeTab": "en",
+        "base": true,
+        "en": Object {
+          "drag_drop_id": "",
+          "id": "5f7b61605f09ebe595ff404e",
+          "is_drag_drop": false,
+          "iso_code": "en",
+          "lang_id": 69,
+          "language": "English",
+          "tabKey": "6",
+          "template-content": "<!DOCTYPE html PUBLIC \\"-//W3C//DTD XHTML 1.0 Transitional //EN\\" \\"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\\">
+<html xmlns=\\"http://www.w3.org/1999/xhtml\\" xmlns:o=\\"urn:schemas-microsoft-com:office:office\\" xmlns:v=\\"urn:schemas-microsoft-com:vml\\">
+<head><!--[if gte mso 9]><xml><o:OfficeDocumentSettings><o:AllowPNG/><o:PixelsPerInch>96</o:PixelsPerInch></o:OfficeDocumentSettings></xml><![endif]--><meta http-equiv=\\"Content-Type\\" content=\\"text/html; charset=utf-8\\"><meta name=\\"viewport\\" content=\\"width=device-width\\"><!--[if !mso]><meta http-equiv=\\"X-UA-Compatible\\" content=\\"IE=edge\\"><!--<![endif]-->
+	<title></title>
+	<!--[if !mso]><!--<![endif]-->
+	<style type=\\"text/css\\">body {
+  margin: 0;
+  padding: 0; }
+
+table,
+td,
+tr {
+  vertical-align: top;
+  border-collapse: collapse; }
+
+* {
+  line-height: inherit; }
+
+a[x-apple-data-detectors=true] {
+  color: inherit !important;
+  text-decoration: none !important; }
+	</style>
+	<style id=\\"media-query\\" type=\\"text/css\\">@media (max-width: 520px) {
+  .block-grid,
+.col {
+    min-width: 320px !important;
+    max-width: 100% !important;
+    display: block !important;
+  }
+
+  .block-grid {
+    width: 100% !important;
+  }
+
+  .col {
+    width: 100% !important;
+  }
+
+  .col > div {
+    margin: 0 auto;
+  }
+
+  img.fullwidth,
+img.fullwidthOnMobile {
+    max-width: 100% !important;
+  }
+
+  .no-stack .col {
+    min-width: 0 !important;
+    display: table-cell !important;
+  }
+
+  .no-stack.two-up .col {
+    width: 50% !important;
+  }
+
+  .no-stack .col.num4 {
+    width: 33% !important;
+  }
+
+  .no-stack .col.num8 {
+    width: 66% !important;
+  }
+
+  .no-stack .col.num4 {
+    width: 33% !important;
+  }
+
+  .no-stack .col.num3 {
+    width: 25% !important;
+  }
+
+  .no-stack .col.num6 {
+    width: 50% !important;
+  }
+
+  .no-stack .col.num9 {
+    width: 75% !important;
+  }
+
+  .video-block {
+    max-width: none !important;
+  }
+
+  .mobile_hide {
+    min-height: 0px;
+    max-height: 0px;
+    max-width: 0px;
+    display: none;
+    overflow: hidden;
+    font-size: 0px;
+  }
+
+  .desktop_hide {
+    display: block !important;
+    max-height: none !important;
+  }
+}
+	</style>
+</head>
+<body class=\\"clean-body\\" style=\\"margin: 0; padding: 0; -webkit-text-size-adjust: 100%; background-color: #FFFFFF;\\">
+<p><!--[if IE]><div class=\\"ie-browser\\"><![endif]-->hello world</p>
+
+<p><img alt=\\"Capillary Image\\" height=\\"171\\" src=\\"https://crm-nightly-new-fileservice.s3.amazonaws.com/intouch_creative_assets/b4b63b22-8a81-41ee-a8df-6db967fc.jpg\\" width=\\"257\\" /></p>
+
+<table bgcolor=\\"#FFFFFF\\" cellpadding=\\"0\\" cellspacing=\\"0\\" class=\\"nl-container\\" role=\\"presentation\\" style=\\"background-color:#ffffff; border-collapse:collapse; border-spacing:0; margin:0 auto; min-width:320px; mso-table-lspace:0pt; mso-table-rspace:0pt; table-layout:fixed; vertical-align:top; width:100%\\" valign=\\"top\\">
+	<tbody>
+		<tr style=\\"vertical-align:top\\" valign=\\"top\\">
+			<td style=\\"vertical-align:top; word-break:break-word\\"><!--[if (mso)|(IE)]><table width=\\"100%\\" cellpadding=\\"0\\" cellspacing=\\"0\\" border=\\"0\\"><tr><td align=\\"center\\" style=\\"background-color:#FFFFFF\\"><![endif]-->
+			<div style=\\"background-color:transparent\\">
+			<div class=\\"block-grid\\" style=\\"background-color:transparent; margin-bottom:0; margin-left:auto; margin-right:auto; margin-top:0; max-width:500px; min-width:320px; overflow-wrap:break-word; word-break:break-word; word-wrap:break-word\\">
+			<div style=\\"background-color:transparent; border-collapse:collapse; display:table; width:100%\\"><!--[if (mso)|(IE)]><table width=\\"100%\\" cellpadding=\\"0\\" cellspacing=\\"0\\" border=\\"0\\" style=\\"background-color:transparent;\\"><tr><td align=\\"center\\"><table cellpadding=\\"0\\" cellspacing=\\"0\\" border=\\"0\\" style=\\"width:500px\\"><tr class=\\"layout-full-width\\" style=\\"background-color:transparent\\"><![endif]--><!--[if (mso)|(IE)]><td align=\\"center\\" width=\\"500\\" style=\\"background-color:transparent;width:500px; border-top: 0px solid transparent; border-left: 0px solid transparent; border-bottom: 0px solid transparent; border-right: 0px solid transparent;\\" valign=\\"top\\"><table width=\\"100%\\" cellpadding=\\"0\\" cellspacing=\\"0\\" border=\\"0\\"><tr><td style=\\"padding-right: 0px; padding-left: 0px; padding-top:5px; padding-bottom:5px;\\"><![endif]-->
+			<div class=\\"col num12\\" style=\\"display:table-cell; max-width:500px; min-width:320px; vertical-align:top; width:500px\\">
+			<div style=\\"width:100% !important\\"><!--[if (!mso)&(!IE)]><div style=\\"border-top:0px solid transparent; border-left:0px solid transparent; border-bottom:0px solid transparent; border-right:0px solid transparent; padding-top:5px; padding-bottom:5px; padding-right: 0px; padding-left: 0px;\\"><!--<![endif]--><!--[if (!mso)&(!IE)]></div><!--<![endif]--></div>
+			</div>
+			<!--[if (mso)|(IE)]></td></tr></table><![endif]--><!--[if (mso)|(IE)]></td></tr></table></td></tr></table><![endif]--></div>
+			</div>
+			</div>
+			<!--[if (mso)|(IE)]></td></tr></table><![endif]--></td>
+		</tr>
+	</tbody>
+</table>
+<!--[if (IE)]></div><![endif]--></body>
+</html>
+",
+        },
+        "selectedLanguages": Array [
+          "en",
+        ],
+        "subject": "hello subject",
+        "tabKey": "6",
+      },
+    ],
+  },
+}
+`;