@capillarytech/creatives-library 7.12.93 → 7.12.94

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@capillarytech/creatives-library",
   "author": "meharaj",
-  "version": "7.12.93",
+  "version": "7.12.94",
   "description": "Capillary creatives ui",
   "main": "./index.js",
   "module": "./index.es.js",
@@ -24,6 +24,7 @@
     "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",

package/utils/cdnTransformation.js

@@ -0,0 +1,220 @@
+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 CDN_BASE_URL = `https://storage.crm.n.content-cdn.io`;
+const CDN_TRANSFORMATION_URL_SUFFIX = `/cdn-cgi/image/`;
+const QUALITY = 75;
+// 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,
+      },
+    }
+  },
+};
+
+/**
+ * getCdnUrl : utility function to replace and return s3/cdn url with cdn url.
+ */
+export const getCdnUrl = ({
+  url,
+  height,
+  width,
+  channelName: receivedChannelName,
+  channelSubType: receivedChannelSubType,
+}) => {
+  const channelName = receivedChannelName?.toUpperCase();
+  const channelSubType = receivedChannelSubType?.toUpperCase();
+
+  if (
+    !regex.test(url) ||
+    !CHANNEL_CONFIGS?.[channelName] ||
+    (channelSubType && !CHANNEL_CONFIGS?.[channelName]?.[channelSubType])
+  )
+    return url;
+
+  const [, assetKey] = url.split(INTOUCH_CREATIVE_ASSETS);
+
+  let newUrl = `${CDN_BASE_URL}`;
+
+  let applicableTransformations;
+
+  if (channelSubType) {
+    applicableTransformations =
+      CHANNEL_CONFIGS?.[channelName]?.[channelSubType]?.transformations;
+  } else {
+    applicableTransformations = CHANNEL_CONFIGS?.[channelName]?.transformations;
+  }
+
+  if (!isEmpty(applicableTransformations)) {
+
+    newUrl += 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) {
+              newUrl += `${transformationParam}=${QUALITY},`;
+            }
+            break;
+          default:
+            break;
+        }
+      } catch (e) {
+        console.log("some error occured while applying transformation",e);
+      }
+    })
+  }
+
+  newUrl += `/${INTOUCH_CREATIVE_ASSETS}${assetKey}`;
+  return newUrl;
+};
+
+/**
+ *
+ * @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
+  }
+};

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

@@ -0,0 +1,298 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`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",
+      },
+    ],
+  },
+}
+`;