@capillarytech/creatives-library 7.13.5 → 7.13.7

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@capillarytech/creatives-library",
   "author": "meharaj",
-  "version": "7.13.05",
+  "version": "7.13.7",
   "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/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,369 @@
+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";
+
+// example cdn url
+// https://storage.crm.n.content-cdn.io/cdn-cgi/image/width=100,height=100,quality=75,format=auto/intouch_creative_assets/005710a7-6412-44fe-a19f-e72456b1.jpg
+
+/**
+ * regex tests presence of intouch_creative_assets in the url.
+ * We are not testing for extensions such as jpg/png because some channels like LINE - IMAGEMAP url doesn't contain extension.
+ */
+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 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';
+
+
+/**
+ * CHANNEL_CONFIGS maintains the transformation details for each channel (and optionally subchannel ex. FACEBOOK/LINE)
+ * In case of SUBCHANNELS, they are nested inside CHANNEL.
+ */
+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: {
+      quality: QUALITY_TYPE.DECREASE,
+    }
+  }
+};
+
+/**
+ * 
+ * @param {string} url : required 
+ * @param {number} height : optional | required when height needs to be manually specified for channels such as email.
+ * @param {number} width : optional | required when width needs to be manually specified for channels such as email.
+ * @param {string} channelName : required 
+ * @param {string} channelSubType : optional | required when channel has multiple subtypes
+ * 
+ * @returns 
+ * getCdnUrl : utility function to replace and return s3/cdn url with cdn url.
+ * Step 1. Basic validations:
+ *  a) If data type of cdn items stored in local storage is incorrect(maybe as a result of manual modification), the received url in param is returned.
+ *  b) If cdn local storage items are emtpy then received url in param is returned.
+ *  c) If url doesn't match with regex.
+ *  d) Channel/Subchannel not present in CHANNEL_CONFIGS
+ *  e) No quality and default quality mentioned in CHANNEL_CONFIGS for given channel.
+ *  f) If channels quality is non numeric(maybe as a result of manual modification) then quality=100 is returned.
+ * 
+ * Step 2. The CHANNEL_CONFIGS determine the applicableTransformations.
+ * Step 3. If applicable transformations are present `CREATIVES_CDN_TRANSFORMATION_URL_SUFFIX` is appended to cdn url and transformation properties are added.
+ * Step 4. The original s3 file name is appened at the end of the url to get complete cdn url and value is returned.
+ * 
+ * Error handling:
+ * In case of any unknown exception, url received in param is returned.
+ */
+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 {string} htmlContents accepts htmlContents - strigified.
+ * @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
+ * Transforms the email template's html by images replacing the s3 url / cdn url with cdn url.
+ */
+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
+  }
+};
+
+
+/**
+ * 
+ * @param {*} key 
+ * @param {*} parse 
+ * @returns Localstorage item with mentioned key. Parses the value if second param `parse` is true.
+ */
+export function getLocalStorageItem(key, parse = false){
+  const val = localStorage.getItem(key);
+  if(parse){
+    return JSON.parse(val);
+  }
+  return val;
+}
+
+/**
+ * Removes specified key from local storage.
+ */
+export function removeLocalStorageItem(key) {
+  localStorage.removeItem(key);
+  return;
+}
+
+/**
+ * Util function. Removes all cdn related local storage items.
+ */
+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);
+  }
+}
+
+/**
+ * 
+ * @param {*} configsResponse 
+ * This util function saves the getCdnConfigs response into the local storage.
+ * The following response items are mapped into the following keys in local storage:
+ * hostname -> CREATIVES_CDN_BASE_URL
+ * qualityCfg ->CREATIVES_CDN_QUALITY_CONFIG
+ * transformationUrlSuffix -> CREATIVES_CDN_TRANSFORMATION_URL_SUFFIX
+ * 
+ * 1. If configsReponse is empty. All above mentioned keys are deleted from localstorage.
+ * 2. If any one of the above keys is missing. The respective keys are deleted from localstorage.
+ * 3. Else it is saved into the localstorage.
+ */
+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");
+  }
+}