@capillarytech/creatives-library 7.12.88 → 7.12.90

package/package.json

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

@@ -0,0 +1,221 @@
+import cloneDeep from "lodash/cloneDeep";
+import isEmpty from "lodash/isEmpty";
+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) => {
+      const transformationParamVal =
+        applicableTransformations?.[transformationParam];
+
+      try {
+        switch (transformationParam) {
+          case "height":
+            if (transformationParamVal === SPECIFIED && isNumber(height)) {
+              newUrl += `${transformationParam}=${height},`;
+            } else if(isNumber(transformationParamVal)) {
+              newUrl += `${transformationParam}=${transformationParamVal},`;
+            }
+            break;
+          case "width":
+            if (transformationParamVal === SPECIFIED && isNumber(width)) {
+              newUrl += `${transformationParam}=${width},`;
+            } else if(isNumber(transformationParamVal)) {
+              newUrl += `${transformationParam}=${transformationParamVal},`;
+            }
+            break;
+          case "format":
+            if(transformationParamVal){
+              newUrl += `${transformationParam}=${transformationParamVal},`;
+            }
+            break;
+          case "quality":
+            if (transformationParamVal === QUALITY_TYPE?.DECREASE && isNumber(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/v2Containers/Cap/constants.js

@@ -32,8 +32,8 @@ export const SET_LOYALTY_PROMOTION_RELATED_CREATIVE_TAGS_DISPLAY = 'SET_LOYALTY_
 
 export const CAMPAIGN_SETTINGS_URL = '/creatives/settings/message';
 export const ORG_SETTINGS_URL = '/org/index';
-export const HELP_URL = 'https://support.capillarytech.com/en/support/solutions/4000007853';
-export const LOYALTY_HELP_URL = 'https://support.capillarytech.com/en/support/solutions/97443';
+export const HELP_URL = 'https://docs.capillarytech.com/docs/getting-started';
+export const LOYALTY_HELP_URL = 'https://docs.capillarytech.com/docs/loyalty-overview';
 
 export const ORG_REFRESH_SEC = 10;
 export const ORG_CHANGED = 'ORG_CHANGED';

package/v2Containers/CreativesContainer/index.js

@@ -33,6 +33,7 @@ import { CREATIVE } from '../Facebook/constants';
 import { LOYALTY } from '../App/constants';
 import { WHATSAPP_STATUSES } from '../Whatsapp/constants';
 
+import { updateImagesInHtml } from '../../utils/cdnTransformation';
 
 const classPrefix = 'add-creatives-section';
 const CREATIVES_CONTAINER = 'creativesContainer';
@@ -495,7 +496,8 @@ export class Creatives extends React.Component {
           if (!html_content) {
             emailBase = templateRecords.base;
           }
-          templateData = {...templateData, ...emailBase, emailBody: html_content, emailSubject: (emailBase && emailBase.subject) ? emailBase.subject : ''};
+          const newHtmlContent = updateImagesInHtml(html_content);
+          templateData = {...templateData, ...emailBase, emailBody: newHtmlContent, emailSubject: (emailBase && emailBase.subject) ? emailBase.subject : ''};
           delete templateData.html_content;
           delete templateData.subject;
         }

package/v2Containers/Email/index.js

@@ -35,6 +35,8 @@ import { TRACK_CREATE_EMAIL, TRACK_EDIT_EMAIL, BEE_PLUGIN, CREATE, EDIT } from '
 import { FONT_COLOR_05 } from '@capillarytech/cap-ui-library/styled/variables';
 import { gtmPush } from '../../utils/gtmTrackers';
 const {CapCustomCardList} = CapCustomCard;
+import {transformEmailTemplates} from '../../utils/cdnTransformation';
+
 export class Email extends React.Component { // eslint-disable-line react/prefer-stateless-function
   constructor(props) {
     super(props);
@@ -2438,7 +2440,8 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
 
     // if (saveCount === 0) {
 
-    this.props.actions.createTemplate(obj, this.onUpdateTemplateComplete);
+    const newEmail = transformEmailTemplates(obj);
+    this.props.actions.createTemplate(newEmail, this.onUpdateTemplateComplete);
     // } else {
     //   this.setState({saveObj: obj, targetSaveCount: saveCount, mode: "save", saveEdmDataMode: 'save'}, () => {
     //     _.forEach(data.selectedLanguages, (language, langIndex) => {

package/v2Containers/Facebook/Advertisement/index.js

@@ -7,7 +7,7 @@ import isEmpty from 'lodash/isEmpty';
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
 import { selectCurrentOrgDetails } from "../../Cap/selectors";
-
+import { getCdnUrl } from '../../../utils/cdnTransformation';
 import {
   CapInput,
   CapRadioCard,
@@ -197,7 +197,7 @@ export const Advertisement = (props) => {
           };
           if (obj.subType === IMAGE) {
             data.imageData = {
-              imageSrc: obj.imgSrc,
+              imageSrc: getCdnUrl({url: obj.imgSrc, channelName: 'FACEBOOK', channelSubType: 'IMAGE'}),
             };
           }
           if (obj.subType === VIDEO) {
@@ -336,7 +336,7 @@ export const Advertisement = (props) => {
         };
       }
       if (obj.subType === IMAGE) {
-        data.imgSrc = obj.imageData.imageSrc;
+        data.imgSrc = getCdnUrl({url: obj.imageData.imageSrc, channelName: 'FACEBOOK', channelSubType: 'IMAGE'});
       } else {
         const {
           videoSrc,
@@ -1033,4 +1033,4 @@ const mapStateToProps = (state, props) =>
       : selectCurrentOrgDetails(),
   });
 
-export default connect(mapStateToProps, null)(injectIntl(Advertisement));
+export default connect(mapStateToProps, null)(injectIntl(Advertisement));

package/v2Containers/Line/Container/Image/index.js

@@ -15,6 +15,7 @@ import Gallery from '../../../Assets/Gallery';
 import style from './style';
 import { CAP_G06, CAP_G09 } from '@capillarytech/cap-ui-library/styled/variables';
 import withStyles from '../../../../hoc/withStyles';
+import { getCdnUrl } from '../../../../utils/cdnTransformation';
 
 import messages from './messages';
 import {
@@ -73,7 +74,7 @@ export const LineImage = ({
         if (imageSrc && (isFullMode ? messageTitle: true) && imagePreview) {
                 updateMessageState({
                     isError: !imageSrc || !(isFullMode ? messageTitle : true) || isImageError || errorMessageTitle,
-                    originalContentUrl: imageSrc,
+                    originalContentUrl: getCdnUrl({url: imageSrc, channelName: 'LINE', channelSubType: 'IMAGE'}),
                     previewImageUrl: imagePreview,
                     messageTitle,
                     index,
@@ -112,7 +113,7 @@ export const LineImage = ({
 
             updateMessageState({
                 isError: !imgSrc || !(isFullMode ? messageTitle : true) || errorMessageTitle,
-                originalContentUrl: imgSrc,
+                originalContentUrl: getCdnUrl({url: imgSrc, channelName: 'LINE', channelSubType: 'IMAGE'}),
                 previewImageUrl: imgPreview,
                 messageTitle,
                 index,
@@ -155,7 +156,7 @@ export const LineImage = ({
         }
         updateMessageState({
             isError: !imageSrc || !(isFullMode ? value : true) || isImageError || !value,
-            originalContentUrl: imageSrc,
+            originalContentUrl: getCdnUrl({url: imageSrc, channelName: 'LINE', channelSubType: 'IMAGE'}),
             previewImageUrl: imagePreview,
             messageTitle: value,
             index,
@@ -412,7 +413,7 @@ export const LineImage = ({
             updateImagePreview(imagePreview);
             updateMessageState({
                 isError: !image || !(isFullMode ? messageTitle : true) || isImageError || errorMessageTitle,
-                originalContentUrl: image,
+                originalContentUrl: getCdnUrl({url: image, channelName: 'LINE', channelSubType: 'IMAGE'}),
                 previewImageUrl: imagePreview,
                 messageTitle,
                 index,

package/v2Containers/Line/Container/ImageCarousel/index.js

@@ -15,6 +15,7 @@ import LineDrawer from '../Drawer';
 import style from './style';
 import { CAP_G06, FONT_COLOR_01, FONT_COLOR_02, CAP_SPACE_08, CAP_WHITE, CAP_SPACE_24, CAP_SPACE_04 } from '@capillarytech/cap-ui-library/styled/variables';
 import withStyles from '../../../../hoc/withStyles';
+import { getCdnUrl } from '../../../../utils/cdnTransformation';
 
 import LineImageCarouselContent from './Content';
 
@@ -103,7 +104,7 @@ export const LineImageCarousel = (props) => {
 							} = content || {};
 							validCarouselImages.push({
 								activeIndex: index,
-								originalContentUrl: url,
+								originalContentUrl: getCdnUrl({url: url, channelName: 'LINE', channelSubType: 'CARD'}),
 								aspectRatio,
 								selectedActionType: buttonType ? (buttonType === MESSAGE_ACTION_TYPE ? TEXT_ACTION_TYPE : URL_ACTION_TYPE) : '',
 								actionContent: text || uri,
@@ -127,7 +128,7 @@ export const LineImageCarousel = (props) => {
 
 							validCarouselImages.push({
 								activeIndex: index,
-								originalContentUrl: imageUrl,
+								originalContentUrl: getCdnUrl({url: imageUrl, channelName: 'LINE', channelSubType: 'CARD'}),
 								selectedActionType: type ? (type === MESSAGE_ACTION_TYPE ? TEXT_ACTION_TYPE : URL_ACTION_TYPE) : '',
 								actionContent: text || uri,
 								actionLabel: label,
@@ -160,7 +161,7 @@ export const LineImageCarousel = (props) => {
 				? isErrorIndex
 				: ((!originalContentUrl || !selectedActionType || actionContentErrorMessage || actionLabelErrorMessage || !actionContent) && activeIndex);
 			columns.push({
-				imageUrl: originalContentUrl,
+				imageUrl: getCdnUrl({url: originalContentUrl, channelName: 'LINE', channelSubType: 'CARD'}),
 				aspectRatio,
 				action: {
 					type: selectedActionType ? (selectedActionType === TEXT_ACTION_TYPE ? MESSAGE_ACTION_TYPE : URL_ACTION_TYPE) : '',
@@ -455,7 +456,7 @@ export const LineImageCarousel = (props) => {
 					} = content || {};
 					validCarouselImages.push({
 						activeIndex: index,
-						originalContentUrl: url,
+						originalContentUrl: getCdnUrl({url: url, channelName: 'LINE', channelSubType: 'CARD'}),
 						aspectRatio,
 						selectedActionType: buttonType ? (buttonType === MESSAGE_ACTION_TYPE ? TEXT_ACTION_TYPE : URL_ACTION_TYPE) : '',
 						actionContent: text || uri,
@@ -480,7 +481,7 @@ export const LineImageCarousel = (props) => {
 
 					validCarouselImages.push({
 						activeIndex: index,
-						originalContentUrl: imageUrl,
+						originalContentUrl: getCdnUrl({url: imageUrl, channelName: 'LINE', channelSubType: 'CARD'}),
 						selectedActionType: type ? (type === MESSAGE_ACTION_TYPE ? TEXT_ACTION_TYPE : URL_ACTION_TYPE) : '',
 						actionContent: text || uri,
 						actionLabel: label,

package/v2Containers/Line/Container/ImageMap/index.js

@@ -39,6 +39,7 @@ import {
 } from '../constants';
 
 const { CapIconAvatar } = CapIcon;
+import { getCdnUrl } from '../../../../utils/cdnTransformation';
 
 export const LineImageMap = ({
     className,
@@ -114,7 +115,7 @@ export const LineImageMap = ({
         if (imageSrc && (isFullMode ? messageTitle: true) && imageMapTemplate && actionLinks) {
                 updateMessageState({
                     isError: !imageSrc || !(isFullMode ? messageTitle : true)  || !imageMapTemplate || (isImageError && errorMessageTitle) || errorTitle || !altText,
-                    baseUrl: imageSrc,
+                    baseUrl: getCdnUrl({url: imageSrc, channelName: 'LINE', channelSubType: 'RICH_MESSAGE'}),
                     messageTitle,
                     index,
                     type: IMAGE_MAP,

package/v2Containers/MobilePush/Create/index.js

@@ -31,6 +31,7 @@ import { GA } from '@capillarytech/cap-ui-utils';
 import { CREATE, TRACK_CREATE_MPUSH } from '../../App/constants';
 import { MOBILE_PUSH } from '../../CreativesContainer/constants';
 import { getContent } from '../commonMethods';
+import { getCdnUrl } from '../../../utils/cdnTransformation'
 
 const PrefixWrapper = styled.div`
   margin-right: 16px;
@@ -464,7 +465,7 @@ export class Create extends React.Component { // eslint-disable-line react/prefe
       const secondaryCta2 = !!android['cta-deeplink-secondary-cta-1-select'] || !!android['secondary-cta-1-label'];
       const imageLink = android.image;
       if (imageLink) {
-        obj.versions.base.ANDROID.expandableDetails.image = imageLink;
+        obj.versions.base.ANDROID.expandableDetails.image = getCdnUrl({url: imageLink, channelName: 'MOBILE_PUSH'});
         obj.versions.base.ANDROID.expandableDetails.style = "BIG_PICTURE";
       }
       if (secondaryCta1 || secondaryCta2 ) {
@@ -538,7 +539,7 @@ export class Create extends React.Component { // eslint-disable-line react/prefe
       const imageLinkIos = ios.image;
       const secondaryCtaIos = !!ios['cta-deeplink-secondary-cta-1-select'] || !!ios['secondary-cta-1-label'];
       if (imageLinkIos) {
-        obj.versions.base.IOS.expandableDetails.image = imageLinkIos;
+        obj.versions.base.IOS.expandableDetails.image = getCdnUrl({url: imageLinkIos, channelName: 'MOBILE_PUSH'});
         obj.versions.base.IOS.expandableDetails.style = "BIG_PICTURE";
       }
       if (secondaryCtaIos) {
@@ -1852,4 +1853,4 @@ export default withCreatives({
   mapStateToProps,
   mapDispatchToProps,
   userAuth: false,
-});
+});

package/v2Containers/MobilePush/Edit/index.js

@@ -33,6 +33,7 @@ import {getPrimaryCtaFields, getSecondaryCtaFields, getLinkTypeFields, getConten
 import { GA } from '@capillarytech/cap-ui-utils';
 import { EDIT, TRACK_EDIT_MPUSH } from '../../App/constants';
 import { MOBILE_PUSH } from '../../CreativesContainer/constants';
+import { getCdnUrl } from '../../../utils/cdnTransformation';
 
 const PrefixWrapper = styled.div`
   margin-right: 16px;
@@ -421,7 +422,7 @@ export class Edit extends React.Component { // eslint-disable-line react/prefer-
     }
     const imageLink = android.image;
     if (imageLink) {
-      obj.versions.base.ANDROID.expandableDetails.image = imageLink;
+      obj.versions.base.ANDROID.expandableDetails.image = getCdnUrl({url: imageLink, channelName: 'MOBILE_PUSH'});
       obj.versions.base.ANDROID.expandableDetails.style = "BIG_PICTURE";
     }
     if (obj.versions.base.ANDROID && obj.versions.base.ANDROID.cta) {
@@ -492,7 +493,7 @@ export class Edit extends React.Component { // eslint-disable-line react/prefer-
     }
     const imageLinkIos = ios.image;
     if (imageLinkIos) {
-      obj.versions.base.IOS.expandableDetails.image = imageLinkIos;
+      obj.versions.base.IOS.expandableDetails.image = getCdnUrl({url: imageLinkIos, channelName: 'MOBILE_PUSH'});
       obj.versions.base.IOS.expandableDetails.style = "BIG_PICTURE";
     }
     if (obj.versions.base.IOS && obj.versions.base.IOS.cta) {
@@ -1940,4 +1941,4 @@ export default withCreatives({
   mapStateToProps,
   mapDispatchToProps,
   userAuth: false,
-});
+});

package/v2Containers/Rcs/index.js

@@ -81,6 +81,7 @@ import Templates from '../Templates';
 import SmsTraiEdit from '../SmsTrai/Edit';
 import TagList from '../TagList';
 import { validateTags } from '../../utils/tagValidations';
+import { getCdnUrl } from '../../utils/cdnTransformation';
 const { Group: CapCheckboxGroup } = CapCheckbox;
 export const Rcs = (props) => {
   const {
@@ -900,7 +901,7 @@ export const Rcs = (props) => {
                   ...(suggestions.length > 0 && { suggestions }),
                   ...(!isMediaTypeNone && {
                     media: {
-                      mediaUrl: rcsImageSrc,
+                      mediaUrl: getCdnUrl({url: rcsImageSrc, channelName: 'RCS'}),
                       height: MEDIUM,
                     },
                   }),

package/v2Containers/Viber/index.js

@@ -53,9 +53,12 @@ import { GA } from '@capillarytech/cap-ui-utils';
 import { CREATE, EDIT, TRACK_CREATE_VIBER, TRACK_EDIT_VIBER } from '../App/constants';
 import { gtmPush } from '../../utils/gtmTrackers';
 import { VIBER } from '../CreativesContainer/constants';
+import { getCdnUrl } from '../../utils/cdnTransformation';
+
 const { CapHeadingSpan } = CapHeading;
 const { TextArea } = CapInput;
 
+
 const Viber = (props) => {
   const {
     intl,
@@ -78,7 +81,7 @@ const Viber = (props) => {
   const { formatMessage } = intl;
   const [isImageError, updateImageErrorMessage] = useState(false);
   const [isImage, updateImageStatus] = useState(false);
-  const [imageSrc, updateImageSrc] = useState();
+  const [imageSrc, setImageSrc] = useState();
   const [isDrawerRequired, updateDrawerRequirement] = useState(false);
   const [messageContent, updateTextMessageContent] = useState('');
   const [buttonText, updateButtonText] = useState('');
@@ -92,6 +95,12 @@ const Viber = (props) => {
   const [buttonURLErrorMessage, updateButtonURLErrorMessage] = useState(false);
   const [accountName, updateAccountName] = useState("");
 
+
+  const updateImageSrc = React.useCallback((url)=>{
+    const newUrl = getCdnUrl({url, channelName: 'VIBER'});
+    setImageSrc(newUrl);
+  },[]);
+
   const StyledHeader = styled(CapHeader)`
   margin-bottom: 14px;
 `;
@@ -741,4 +750,4 @@ export default withCreatives({
   mapStateToProps,
   mapDispatchToProps,
   userAuth: true,
-});
+});

package/v2Containers/Whatsapp/index.js

@@ -74,6 +74,8 @@ import {
   PHONE_NUMBER,
   WEBSITE,
 } from '../../v2Components/CapWhatsappCTA/constants';
+import { getCdnUrl } from '../../utils/cdnTransformation';
+
 let varMap = {};
 let editContent = {};
 let tagValidationResponse = {};
@@ -855,7 +857,7 @@ export const Whatsapp = (props) => {
             }),
             mediaType: templateMediaType,
             ...(isMediaTypeImage && {
-              imageUrl: whatsappImageSrc,
+              imageUrl: getCdnUrl({url: whatsappImageSrc, channelName: 'WHATSAPP',}),
               karixFileHandle,
             }),
             varMapped: !isFullMode ? varMap : {},
@@ -1439,4 +1441,4 @@ export default withCreatives({
   mapStateToProps,
   mapDispatchToProps,
   userAuth: true,
-});
+});

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({});
-  });
-});