@capillarytech/creatives-library 7.12.114 → 7.12.116

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@capillarytech/creatives-library",
   "author": "meharaj",
-  "version": "7.12.114",
+  "version": "7.12.116",
   "description": "Capillary creatives ui",
   "main": "./index.js",
   "module": "./index.es.js",

package/utils/cdnTransformation.js

@@ -2,8 +2,11 @@ import cloneDeep from "lodash/cloneDeep";
 import isEmpty from "lodash/isEmpty";
 import forOwn from "lodash/forOwn";
 import isNumber from "lodash/isNumber";
+import Bugsnag from '@bugsnag/js';
+
 /* eslint-disable no-unused-expressions */
 import { parse } from "node-html-parser";
+import { EMAIL } from '../v2Containers/CreativesContainer/constants';
 
 // 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
@@ -12,8 +15,6 @@ import { parse } from "node-html-parser";
  * 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 = {
@@ -21,9 +22,13 @@ const QUALITY_TYPE = {
   PRESERVE: "preserve",
 };
 const CREATIVES_CDN_BASE_URL_KEY = 'CREATIVES_CDN_BASE_URL';
+const CREATIVES_S3_BUCKET_PATH_KEY = 'CREATIVES_S3_BUCKET_PATH';
 const CREATIVES_CDN_QUALITY_CONFIG_KEY = 'CREATIVES_CDN_QUALITY_CONFIG';
 const CREATIVES_CDN_TRANSFORMATION_URL_SUFFIX_KEY = 'CREATIVES_CDN_TRANSFORMATION_URL_SUFFIX';
 
+const HTTPS_STR = "https://"
+const ALLOWED_EXTENSIONS_STR = ".*(?:jpg|png|jpeg)$"
+const ANY_STR = ".*"
 
 /**
  * CHANNEL_CONFIGS maintains the transformation details for each channel (and optionally subchannel ex. FACEBOOK/LINE)
@@ -141,21 +146,31 @@ export const getCdnUrl = ({
     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);
-  
+    let CREATIVES_S3_BUCKET_PATH = getLocalStorageItem(CREATIVES_S3_BUCKET_PATH_KEY);
+    
+    //remove all leading and trailing forward slash with empty string, if leading/trailing forward slash is present in node env by mistake then url will not be correct hence removing them.
+    CREATIVES_S3_BUCKET_PATH = CREATIVES_S3_BUCKET_PATH.replace(/^\/|\/$/g, '');
+
     //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"
+      typeof CREATIVES_CDN_TRANSFORMATION_URL_SUFFIX !== "string" || 
+      typeof CREATIVES_S3_BUCKET_PATH !== 'string'
     )
       return url;
   
     const QUALITY = CREATIVES_CDN_QUALITY_CONFIG?.[channelName] || CREATIVES_CDN_QUALITY_CONFIG?.DEFAULT;
   
+    const regexWithExtension = new RegExp(HTTPS_STR + ANY_STR + CREATIVES_S3_BUCKET_PATH + ANY_STR + ALLOWED_EXTENSIONS_STR)
+    const regexWithoutExtension = new RegExp(HTTPS_STR + ANY_STR + CREATIVES_S3_BUCKET_PATH + ANY_STR);
+
+    let skipTransformations = true;
+
     if (
-      !regex.test(url) ||
+      !regexWithoutExtension.test(url) ||
       !CHANNEL_CONFIGS?.[channelName] ||
       (channelSubType && !CHANNEL_CONFIGS?.[channelName]?.[channelSubType]) ||
       !CREATIVES_CDN_BASE_URL ||
@@ -163,8 +178,13 @@ export const getCdnUrl = ({
       !QUALITY
     )
       return url;
-  
-    const [, assetKey] = url.split(INTOUCH_CREATIVE_ASSETS);
+
+    //Skip transformations if extensions are not proper. Else consider transformations if available.
+    if(regexWithExtension.test(url)){
+      skipTransformations = false;
+    }
+
+    const [, assetKey] = url.split(CREATIVES_S3_BUCKET_PATH);
   
     let newUrl = `${CREATIVES_CDN_BASE_URL}`;
   
@@ -177,7 +197,7 @@ export const getCdnUrl = ({
       applicableTransformations = CHANNEL_CONFIGS?.[channelName]?.transformations;
     }
   
-    if (!isEmpty(applicableTransformations)) {
+    if (!isEmpty(applicableTransformations) && !skipTransformations) {
   
       newUrl += `/${CREATIVES_CDN_TRANSFORMATION_URL_SUFFIX}/`;
   
@@ -215,15 +235,21 @@ export const getCdnUrl = ({
               break;
           }
         } catch (e) {
-          console.log("some error occured while applying transformation",e);
+          Bugsnag.leaveBreadcrumb("some error occured while applying transformation")
+          Bugsnag.notify(e, (event) => {
+            event.severity = "error";
+          });
         }
       })
     }
-    newUrl += `/${INTOUCH_CREATIVE_ASSETS}${assetKey}`;
+    newUrl += `/${CREATIVES_S3_BUCKET_PATH}${assetKey}`;
     return newUrl;
 
   }catch(e){
-    console.log('Some exception occurred in getCdnUrl',e);
+    Bugsnag.leaveBreadcrumb("Some exception occurred in getCdnUrl");
+    Bugsnag.notify(e, (event) => {
+      event.severity = "error";
+    });
     return url;
   }
 };
@@ -237,24 +263,24 @@ export const updateImagesInHtml = (htmlContents) => {
   const copiedHtmlContents = htmlContents;
   try {
     const root = parse(htmlContents);
-    root.querySelectorAll("img").forEach((element) => {
+    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);
-      }
+      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);
+    Bugsnag.leaveBreadcrumb("An error occured while updating images in html")
+    Bugsnag.notify(e, (event) => {
+      event.severity = "error";
+    });
     return copiedHtmlContents; //return received input directly in case an exception is thrown
   }
 };
@@ -277,7 +303,12 @@ export const transformEmailTemplates = (contents) => {
     });
     return contentsCopy;
   } catch (e) {
-    console.log("Some error has occured while transforming email templates", e);
+    Bugsnag.leaveBreadcrumb(
+      "Some error has occured while transforming email templates"
+    );
+    Bugsnag.notify(e, (event) => {
+      event.severity = "error";
+    });
     return contents; //return received input directly in case an exception is thrown
   }
 };
@@ -313,8 +344,12 @@ export function removeAllCdnLocalStorageItems() {
     removeLocalStorageItem(CREATIVES_CDN_BASE_URL_KEY);
     removeLocalStorageItem(CREATIVES_CDN_QUALITY_CONFIG_KEY);
     removeLocalStorageItem(CREATIVES_CDN_TRANSFORMATION_URL_SUFFIX_KEY);
+    removeLocalStorageItem(CREATIVES_S3_BUCKET_PATH_KEY);
   }catch(e){
-    console.log('some error occured while deleting all keys for cdn', e);
+    Bugsnag.leaveBreadcrumb("some error occured while deleting all keys for cdn");
+    Bugsnag.notify(e, (event) => {
+      event.severity = "error";
+    });
   }
 }
 
@@ -348,6 +383,15 @@ export function saveCdnConfigs(configsResponse) {
       removeLocalStorageItem(CREATIVES_CDN_BASE_URL_KEY);
     }
 
+    if (configsResponse?.bucketPath) {
+      localStorage.setItem(
+        CREATIVES_S3_BUCKET_PATH_KEY,
+        configsResponse?.bucketPath
+      );
+    } else {
+      removeLocalStorageItem(CREATIVES_S3_BUCKET_PATH_KEY);
+    }
+
     if (!isEmpty(configsResponse?.qualityCfg)) {
       const qualityString = JSON.stringify(configsResponse?.qualityCfg);
       localStorage.setItem(CREATIVES_CDN_QUALITY_CONFIG_KEY, qualityString);
@@ -364,6 +408,9 @@ export function saveCdnConfigs(configsResponse) {
       removeLocalStorageItem(CREATIVES_CDN_TRANSFORMATION_URL_SUFFIX_KEY);
     }
   } catch (e) {
-    console.log("some error while setting localstorage cdn configs");
+    Bugsnag.leaveBreadcrumb("some error while setting localstorage cdn configs");
+    Bugsnag.notify(e, (event) => {
+      event.severity = "error";
+    });
   }
 }

package/utils/tests/cdnTransformation.test.js

@@ -5,6 +5,7 @@ beforeEach(() => {
   var localStorageMock = (function () {
     var store = {
       CREATIVES_CDN_TRANSFORMATION_URL_SUFFIX: "cdn-cgi/image",
+      CREATIVES_S3_BUCKET_PATH: "intouch_creative_assets",
       CREATIVES_CDN_BASE_URL: "https://storage.crm.n.content-cdn.io",
       CREATIVES_CDN_QUALITY_CONFIG:
         '{"EMAIL":75,"RCS":75,"VIBER":75,"WHATSAPP":75,"MOBILE_PUSH":75,"FACEBOOK":75,"LINE":75,"DEFAULT":75}',
@@ -32,6 +33,9 @@ afterEach(() => {
     "CREATIVES_CDN_QUALITY_CONFIG",
     '{"EMAIL":75,"RCS":75,"VIBER":75,"WHATSAPP":75,"MOBILE_PUSH":75,"FACEBOOK":75,"LINE":75,"DEFAULT":75}'
   );
+  localStorage.setItem(
+    "CREATIVES_S3_BUCKET_PATH", "intouch_creative_assets"
+  );
 });
 
 describe("cdnTransformationTests", () => {
@@ -83,6 +87,44 @@ describe("cdnTransformationTests", () => {
       expect(GENERATED_CDN_URL).toEqual(EXPECTED_CDN_URL);
     });
 
+    it("Should replace s3 url with cdn url for email when bucket name is other than intouch_creatives_assets in case of prod.", () => {
+      localStorage.setItem("CREATIVES_S3_BUCKET_PATH", "fileservice.in/intouch_creative_assets");
+      const TEST_S3_URL = `https://crm-nightly-new-fileservice.s3.amazonaws.com/fileservice.in/intouch_creative_assets/2c9233ed-0959-4aff-b749-9171b5c8.jpg`;
+      const GENERATED_CDN_URL = cdnUtils.getCdnUrl({
+        url: TEST_S3_URL,
+        channelName: "EMAIL",
+        height: 100,
+        width: 200,
+      });
+      const EXPECTED_CDN_URL = `https://storage.crm.n.content-cdn.io/cdn-cgi/image/width=200,height=100,format=auto,quality=75,/fileservice.in/intouch_creative_assets/2c9233ed-0959-4aff-b749-9171b5c8.jpg`;
+      expect(GENERATED_CDN_URL).toEqual(EXPECTED_CDN_URL);
+    });
+
+    it("Should replace s3 url with cdn url for email when bucket name is other than intouch_creatives_assets in case of prod. It should remove leading/trailing forward slashes from bucket path", () => {
+      localStorage.setItem("CREATIVES_S3_BUCKET_PATH", "/fileservice.in/intouch_creative_assets/");
+      const TEST_S3_URL = `https://crm-nightly-new-fileservice.s3.amazonaws.com/fileservice.in/intouch_creative_assets/2c9233ed-0959-4aff-b749-9171b5c8.jpg`;
+      const GENERATED_CDN_URL = cdnUtils.getCdnUrl({
+        url: TEST_S3_URL,
+        channelName: "EMAIL",
+        height: 100,
+        width: 200,
+      });
+      const EXPECTED_CDN_URL = `https://storage.crm.n.content-cdn.io/cdn-cgi/image/width=200,height=100,format=auto,quality=75,/fileservice.in/intouch_creative_assets/2c9233ed-0959-4aff-b749-9171b5c8.jpg`;
+      expect(GENERATED_CDN_URL).toEqual(EXPECTED_CDN_URL);
+    });
+
+    it("Should replace s3 url with cdn url for email without transformation for formats other than jpg/png/jpeg", () => {
+      const TEST_S3_URL = `https://crm-nightly-new-fileservice.s3.amazonaws.com/intouch_creative_assets/2c9233ed-0959-4aff-b749-9171b5c8.avif`; //this is random url
+      const GENERATED_CDN_URL = cdnUtils.getCdnUrl({
+        url: TEST_S3_URL,
+        channelName: "EMAIL",
+        height: 100,
+        width: 200,
+      });
+      const EXPECTED_CDN_URL = `https://storage.crm.n.content-cdn.io/intouch_creative_assets/2c9233ed-0959-4aff-b749-9171b5c8.avif`;
+      expect(GENERATED_CDN_URL).toEqual(EXPECTED_CDN_URL);
+    });
+
     it("should replace cdn url with new cdn url for email incase h/w etc changed", () => {
       const TEST_S3_URL = `https://storage.crm.n.content-cdn.io/cdn-cgi/image/width=200,height=100,format=auto,quality=75,/intouch_creative_assets/2c9233ed-0959-4aff-b749-9171b5c8.jpg`;
       const GENERATED_CDN_URL = cdnUtils.getCdnUrl({
@@ -95,14 +137,14 @@ describe("cdnTransformationTests", () => {
       expect(GENERATED_CDN_URL).toEqual(EXPECTED_CDN_URL);
     });
 
-    it("should replace cdn url with new cdn url incase channelName is LINE and channelSubType is RICH_MESSAGE ", () => {
+    it("should replace cdn url with new cdn url incase channelName is LINE and channelSubType is RICH_MESSAGE without transformation", () => {
       const TEST_S3_URL = `https://crm-nightly-new-fileservice.s3.amazonaws.com/intouch_creative_assets/2c9233ed-0959-4aff-b749-9171b5c8`;
       const GENERATED_CDN_URL = cdnUtils.getCdnUrl({
         url: TEST_S3_URL,
         channelName: "LINE",
         channelSubType: "RICH_MESSAGE",
       });
-      const EXPECTED_CDN_URL = `https://storage.crm.n.content-cdn.io/cdn-cgi/image/width=1040,quality=75,/intouch_creative_assets/2c9233ed-0959-4aff-b749-9171b5c8`;
+      const EXPECTED_CDN_URL = `https://storage.crm.n.content-cdn.io/intouch_creative_assets/2c9233ed-0959-4aff-b749-9171b5c8`;
       expect(GENERATED_CDN_URL).toEqual(EXPECTED_CDN_URL);
     });
 

package/tests/integration/CreateTemplate/CreateTemplate.integration.test.js

@@ -1,18 +0,0 @@
-/**
- * This is not an integration test rather it's created to run the integration test script for now.
- * The tests case and file name will be re-written as per the requirement in future.
- */
-
-describe('Create Templates ', () => {
-  it('Should pass the test case for truthy values', async () => {
-    expect(true).toBeTruthy();
-  });
-
-  it('Should pass the test case for falsy values', async () => {
-    expect(false).toBeFalsy();
-  });
-
-  it('Should pass the test case for falsy values', async () => {
-    expect({}).toEqual({});
-  });
-});