@capillarytech/creatives-library 7.13.5 → 7.13.7

package/utils/tests/cdnTransformation.test.js

@@ -0,0 +1,245 @@
+import * as cdnUtils from "../cdnTransformation";
+import * as mockdata from "./cdnTransformation.mockdata";
+
+beforeEach(() => {
+  var localStorageMock = (function () {
+    var store = {
+      CREATIVES_CDN_TRANSFORMATION_URL_SUFFIX: "cdn-cgi/image",
+      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}',
+    };
+    return {
+      getItem: function (key) {
+        return store[key];
+      },
+      setItem: function (key, value) {
+        store[key] = value.toString();
+      },
+      clear: function () {
+        store = {};
+      },
+      removeItem: function (key) {
+        delete store[key];
+      },
+    };
+  })();
+  Object.defineProperty(window, "localStorage", { value: localStorageMock });
+});
+
+afterEach(() => {
+  localStorage.setItem(
+    "CREATIVES_CDN_QUALITY_CONFIG",
+    '{"EMAIL":75,"RCS":75,"VIBER":75,"WHATSAPP":75,"MOBILE_PUSH":75,"FACEBOOK":75,"LINE":75,"DEFAULT":75}'
+  );
+});
+
+describe("cdnTransformationTests", () => {
+  describe("getCdnUrl()", () => {
+    it("should return s3 url if bucket subfolder doesn't contain intouch_creative_assets", () => {
+      const TEST_S3_URL = `https://crm-nightly-new-fileservice.s3.amazonaws.com/test/2c9233ed-0959-4aff-b749-9171b5c8.jpg`;
+      const GENERATED_CDN_URL = cdnUtils.getCdnUrl({
+        url: TEST_S3_URL,
+        channelName: "EMAIL",
+      });
+      expect(GENERATED_CDN_URL).toEqual(TEST_S3_URL);
+    });
+
+    it("should return s3 if channelName is not defined", () => {
+      const TEST_S3_URL = `https://crm-nightly-new-fileservice.s3.amazonaws.com/intouch_creative_assets/2c9233ed-0959-4aff-b749-9171b5c8.jpg`;
+      const GENERATED_CDN_URL = cdnUtils.getCdnUrl({ url: TEST_S3_URL });
+      expect(GENERATED_CDN_URL).toEqual(TEST_S3_URL);
+    });
+
+    it("should return s3 if specified channelSubType doesn't exist", () => {
+      const TEST_S3_URL = `https://crm-nightly-new-fileservice.s3.amazonaws.com/intouch_creative_assets/2c9233ed-0959-4aff-b749-9171b5c8.jpg`;
+      const GENERATED_CDN_URL = cdnUtils.getCdnUrl({
+        url: TEST_S3_URL,
+        channelName: "LINE",
+        channelSubType: "ABC",
+      });
+      expect(GENERATED_CDN_URL).toEqual(TEST_S3_URL);
+    });
+
+    it("Should replace s3 url with cdn url for email when h/w are not provided", () => {
+      const TEST_S3_URL = `https://crm-nightly-new-fileservice.s3.amazonaws.com/intouch_creative_assets/2c9233ed-0959-4aff-b749-9171b5c8.jpg`;
+      const GENERATED_CDN_URL = cdnUtils.getCdnUrl({
+        url: TEST_S3_URL,
+        channelName: "EMAIL",
+      });
+      const EXPECTED_CDN_URL = `https://storage.crm.n.content-cdn.io/cdn-cgi/image/format=auto,quality=75,/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 h/w are provided", () => {
+      const TEST_S3_URL = `https://crm-nightly-new-fileservice.s3.amazonaws.com/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,/intouch_creative_assets/2c9233ed-0959-4aff-b749-9171b5c8.jpg`;
+      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({
+        url: TEST_S3_URL,
+        channelName: "EMAIL",
+        height: 400,
+        width: 500,
+      });
+      const EXPECTED_CDN_URL = `https://storage.crm.n.content-cdn.io/cdn-cgi/image/width=500,height=400,format=auto,quality=75,/intouch_creative_assets/2c9233ed-0959-4aff-b749-9171b5c8.jpg`;
+      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 ", () => {
+      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`;
+      expect(GENERATED_CDN_URL).toEqual(EXPECTED_CDN_URL);
+    });
+
+    it("should replace cdn url with new cdn url for channels which has predefined h/w for channel", () => {
+      const TEST_S3_URL = `https://crm-nightly-new-fileservice.s3.amazonaws.com/intouch_creative_assets/2c9233ed-0959-4aff-b749-9171b5c8.jpg`;
+      const GENERATED_CDN_URL = cdnUtils.getCdnUrl({
+        url: TEST_S3_URL,
+        channelName: "RCS",
+      });
+      const EXPECTED_CDN_URL = `https://storage.crm.n.content-cdn.io/cdn-cgi/image/width=1440,height=720,quality=75,/intouch_creative_assets/2c9233ed-0959-4aff-b749-9171b5c8.jpg`;
+      expect(GENERATED_CDN_URL).toEqual(EXPECTED_CDN_URL);
+    });
+
+    it("should return url directly if typeof CREATIVES_CDN_QUALITY_CONFIG is not object", () => {
+      localStorage.setItem("CREATIVES_CDN_QUALITY_CONFIG", "a");
+      const TEST_S3_URL = `https://crm-nightly-new-fileservice.s3.amazonaws.com/intouch_creative_assets/2c9233ed-0959-4aff-b749-9171b5c8.jpg`;
+      const GENERATED_CDN_URL = cdnUtils.getCdnUrl({
+        url: TEST_S3_URL,
+        channelName: "EMAIL",
+      });
+      expect(GENERATED_CDN_URL).toEqual(TEST_S3_URL);
+    });
+
+    it("should return cdn url with full quality if quality is not number", () => {
+      localStorage.setItem(
+        "CREATIVES_CDN_QUALITY_CONFIG",
+        '{"EMAIL":"a","RCS":75,"VIBER":75,"WHATSAPP":75,"MOBILE_PUSH":75,"FACEBOOK":75,"LINE":75,"DEFAULT":75}'
+      );
+
+      const TEST_S3_URL = `https://crm-nightly-new-fileservice.s3.amazonaws.com/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=100,/intouch_creative_assets/2c9233ed-0959-4aff-b749-9171b5c8.jpg`;
+
+      expect(GENERATED_CDN_URL).toEqual(EXPECTED_CDN_URL);
+    });
+  });
+
+  describe("updateImagesInHtml()", () => {
+    it("should update images in html", () => {
+      const htmlContentsInput = mockdata.emailRawInput;
+      const htmlContentsOutput = cdnUtils.updateImagesInHtml(htmlContentsInput);
+      const expected = mockdata.emailRawTransformed;
+      expect(htmlContentsOutput).toEqual(expected);
+    });
+  });
+
+  describe("transformEmailTemplate()", () => {
+    it("should transform email template", () => {
+      const emailTemplateInput = mockdata.emailTemplateRaw;
+      const emailTemplateOutput =
+        cdnUtils.transformEmailTemplates(emailTemplateInput);
+      expect(emailTemplateOutput).toMatchSnapshot();
+    });
+  });
+
+  describe("saveCdnConfigs()", () => {
+    it("should set received input values in localStorage", () => {
+      const cdnConfigs = {
+        transformationUrlSuffix: "cdn-cgi/image",
+        hostname: "https://storage.crm.n.content-cdn.io",
+        qualityCfg: {
+          EMAIL: 75,
+          RCS: 75,
+          VIBER: 75,
+          WHATSAPP: 75,
+          MOBILE_PUSH: 75,
+          FACEBOOK: 75,
+          LINE: 75,
+          DEFAULT: 75,
+        },
+      };
+
+      const expected = {
+        CREATIVES_CDN_TRANSFORMATION_URL_SUFFIX: "cdn-cgi/image",
+        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}',
+      };
+      cdnUtils.saveCdnConfigs(cdnConfigs);
+
+      expect(
+        localStorage.getItem("CREATIVES_CDN_TRANSFORMATION_URL_SUFFIX")
+      ).toBe(expected.CREATIVES_CDN_TRANSFORMATION_URL_SUFFIX);
+      expect(localStorage.getItem("CREATIVES_CDN_BASE_URL")).toBe(
+        expected.CREATIVES_CDN_BASE_URL
+      );
+      expect(localStorage.getItem("CREATIVES_CDN_QUALITY_CONFIG")).toBe(
+        expected.CREATIVES_CDN_QUALITY_CONFIG
+      );
+    });
+
+    it("should clear items from localStorage if input does not contain hostname or transformationUrlSuffix", () => {
+      const cdnConfigs = {
+        qualityCfg: {
+          EMAIL: 75,
+          RCS: 75,
+          VIBER: 75,
+          WHATSAPP: 75,
+          MOBILE_PUSH: 75,
+          FACEBOOK: 75,
+          LINE: 75,
+          DEFAULT: 75,
+        },
+      };
+
+      const expected = {
+        CREATIVES_CDN_TRANSFORMATION_URL_SUFFIX: "cdn-cgi/image",
+        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}',
+      };
+      cdnUtils.saveCdnConfigs(cdnConfigs);
+
+      expect(
+        localStorage.getItem("CREATIVES_CDN_TRANSFORMATION_URL_SUFFIX")
+      ).toBe(undefined);
+      expect(localStorage.getItem("CREATIVES_CDN_BASE_URL")).toBe(undefined);
+      expect(localStorage.getItem("CREATIVES_CDN_QUALITY_CONFIG")).toBe(
+        expected.CREATIVES_CDN_QUALITY_CONFIG
+      );
+    });
+
+    it("should clear items from localStorage if input is null or empty object", () => {
+      const cdnConfigs = {};
+
+      cdnUtils.saveCdnConfigs(cdnConfigs);
+
+      expect(
+        localStorage.getItem("CREATIVES_CDN_TRANSFORMATION_URL_SUFFIX")
+      ).toBe(undefined);
+      expect(localStorage.getItem("CREATIVES_CDN_BASE_URL")).toBe(undefined);
+      expect(localStorage.getItem("CREATIVES_CDN_QUALITY_CONFIG")).toBe(undefined);
+    });
+  });
+});

package/v2Containers/Cap/actions.js

@@ -73,4 +73,3 @@ export function clearTopbarMenuData() {
     type: types.CLEAR_TOPBAR_MENU_DATA,
   };
 }
-

package/v2Containers/CreativesContainer/actions.js

@@ -24,4 +24,4 @@ export function hideCreativesContanerLoader() {
   return {
     type: HIDE_CONTAINER_LOADER,
   };
-}
+}

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';
@@ -76,6 +77,9 @@ export class Creatives extends React.Component {
 
   componentDidMount() {
     GA.timeTracker.startTimer(CREATIVES_CONTAINER);
+    if(!this.props?.isFullMode){
+      this.props?.templateActions.getCdnTransformationConfig();
+    }
   }
 
   onEnterTemplateName = () => {
@@ -495,7 +499,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/CreativesContainer/tests/index.test.js

@@ -26,6 +26,7 @@ jest.mock('../../../v2Components/FormBuilder', () => ({
 describe('Test SlideBoxContent container', () => {
   const handleCloseCreatives = jest.fn();
   const getCreativesData = jest.fn();
+  const getCdnTransformationConfig = jest.fn();
   let renderedComponent;
 
   beforeEach(() => {
@@ -41,6 +42,9 @@ describe('Test SlideBoxContent container', () => {
         templateData={templateData}
         handleCloseCreatives={handleCloseCreatives}
         getCreativesData={getCreativesData}
+        templateActions={{
+          getCdnTransformationConfig
+        }}
       />,
     );
   };

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) {
@@ -1320,10 +1321,7 @@ export class Create extends React.Component { // eslint-disable-line react/prefe
         duration: 2,
       });
     } else {
-      const name = data.file.name.split('.');
-      const blob = data.file.slice(0, -1, 'image');
-      const newFile = new File([blob], `${name[0]}${Date.now()}.${name[1]}`, {type: 'image'});
-      this.props.actions.uploadAsset(newFile, data.type, data.fileParams);
+      this.props.actions.uploadAsset(data.file, data.type, data.fileParams);
     }
   };
   selectCtaIos = (selectedConfig) => {
@@ -1853,4 +1851,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) {
@@ -1941,4 +1942,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/Templates/actions.js

@@ -150,3 +150,9 @@ export function getSenderDetails(data = {}) {
     ...data,
   };
 }
+
+export function getCdnTransformationConfig() {
+  return {
+    type: types.GET_CDN_TRANSFORMATION_CONFIG_REQUEST,
+  }
+}

package/v2Containers/Templates/constants.js

@@ -68,3 +68,7 @@ export const GET_SENDER_DETAILS_SUCCESS =
   'app/v2Containers/Templates/GET_SENDER_DETAILS_SUCCESS';
 export const GET_SENDER_DETAILS_FAILURE =
   'app/v2Containers/Templates/GET_SENDER_DETAILS_FAILURE';
+
+export const GET_CDN_TRANSFORMATION_CONFIG_REQUEST = 'app/v2Containers/Templates/GET_CDN_TRANSFORMATION_CONFIG_REQUEST';
+export const GET_CDN_TRANSFORMATION_CONFIG_SUCCESS = 'app/v2Containers/Templates/GET_CDN_TRANSFORMATION_CONFIG_SUCCESS';
+export const GET_CDN_TRANSFORMATION_CONFIG_FAILURE = 'app/v2Containers/Templates/GET_CDN_TRANSFORMATION_CONFIG_FAILURE';

package/v2Containers/Templates/sagas.js

@@ -3,6 +3,7 @@ import { LOCATION_CHANGE } from 'react-router-redux';
 // import { schema, normalize } from 'normalizr';
 import * as Api from '../../services/api';
 import * as types from './constants';
+import { saveCdnConfigs, removeAllCdnLocalStorageItems } from '../../utils/cdnTransformation';
 
 // Individual exports for testing
 export function* getAllTemplates(channel, queryParams) {
@@ -85,6 +86,20 @@ export function* getOrgLevelCampaignSettings() {
   }
 }
 
+function* getCdnTransformationConfig() {
+  try {
+    const res = yield call(Api.getCdnTransformationConfig);
+
+    if (res?.success && res?.status?.code === 200) {
+      const cdnConfigs = res?.response;
+      saveCdnConfigs(cdnConfigs);
+    }
+  } catch (error) {
+    console.log("some error occured during getCdnTransformationConfig call");
+    removeAllCdnLocalStorageItems();
+  }
+}
+
 export function* watchGetOrgLevelCampaignSettings() {
   const watcher = yield takeLatest(
     types.GET_ORG_LEVEL_CAMPAIGN_SETTINGS_REQUEST,
@@ -222,6 +237,13 @@ function* watchGetSenderDetails() {
   yield cancel(watcher);
 }
 
+function* watchGetCdnTransformationConfig() {
+  yield takeLatest(
+    types.GET_CDN_TRANSFORMATION_CONFIG_REQUEST,
+    getCdnTransformationConfig
+  );
+}
+
 // All sagas to be loaded
 export default [
   watchGetAllTemplates,
@@ -233,4 +255,5 @@ export default [
   watchGetTemplateDetails,
   watchGetOrgLevelCampaignSettings,
   watchGetSenderDetails,
+  watchGetCdnTransformationConfig
 ];

package/v2Containers/TemplatesV2/index.js

@@ -19,6 +19,7 @@ import { UserIsAuthenticated } from '../../utils/authWrapper';
 import { makeSelectTemplates, makeSelectTemplatesResponse } from '../Templates/selectors';
 import messages from './messages';
 import * as actions from './actions';
+import * as templateActions from '../Templates/actions';
 import Templates from '../Templates';
 import CallTask from '../CallTask';
 import Facebook from '../Facebook';
@@ -139,6 +140,9 @@ export class TemplatesV2 extends React.Component { // eslint-disable-line react/
     if (queryItems.channel === WHATSAPP) {
       this.channelChange(WHATSAPP);
     }
+    if(this.props?.isFullMode){
+      this.props.templateActions.getCdnTransformationConfig();
+    }
   }
 
   componentWillReceiveProps(nextProps) {
@@ -351,6 +355,7 @@ const mapStateToProps = createStructuredSelector({
 function mapDispatchToProps(dispatch) {
   return {
     actions: bindActionCreators(actions, dispatch),
+    templateActions: bindActionCreators(templateActions, dispatch),
   };
 }