@capillarytech/creatives-library 7.12.82 → 7.12.84

package/components/Ckeditor/index.js

@@ -13,7 +13,7 @@ import React from 'react';
 import _ from 'lodash';
 // import messages from './messages';
 const loadScript = require('load-script');
-const defaultScriptUrl = "https://ckeditor.com/assets/libs/ckeditor4/4.19.0/ckeditor.js";
+const defaultScriptUrl = "https://ckeditor.com/assets/libs/ckeditor4/4.14.1/ckeditor.js";
 const user = localStorage.getItem('user');
 let locale = 'en';
 if (user && JSON.parse(user).lang) {

package/config/app.js

@@ -16,7 +16,6 @@ const config = {
     accountConfig: (strs, accountId) => `${window.location.origin}/org/config/AccountAdd?q=a&channelId=2&accountId=${accountId}&edit=1`,
   },
   development: {
-    // api_endpoint: 'http://localhost:2022/arya/api/v1/creatives',
     api_endpoint: 'https://crm-nightly-new.cc.capillarytech.com/arya/api/v1/creatives',
     campaigns_api_endpoint: 'https://crm-nightly-new.cc.capillarytech.com/iris/v2/campaigns',
     campaigns_api_org_endpoint: 'https://crm-nightly-new.cc.capillarytech.com/iris/v2/org/campaign',

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@capillarytech/creatives-library",
   "author": "meharaj",
-  "version": "7.12.82",
+  "version": "7.12.84",
   "description": "Capillary creatives ui",
   "main": "./index.js",
   "module": "./index.es.js",
@@ -24,7 +24,6 @@
     "jest-date-mock": "^1.0.8",
     "jquery": "^3.3.1",
     "load-script": "^1.0.0",
-    "node-html-parser": "^5.3.3",
     "normalizr": "^3.2.3",
     "papaparse": "^5.3.1",
     "pre-push": "^0.1.2",

package/v2Components/Ckeditor/index.js

@@ -13,7 +13,7 @@ import React from 'react';
 import _ from 'lodash';
 // import messages from './messages';
 const loadScript = require('load-script');
-const defaultScriptUrl = "https://ckeditor.com/assets/libs/ckeditor4/4.19.0/ckeditor.js";
+const defaultScriptUrl = "https://ckeditor.com/assets/libs/ckeditor4/4.14.1/ckeditor.js";
 const user = localStorage.getItem('user');
 let locale = 'en';
 if (user && JSON.parse(user).lang) {

package/v2Containers/CreativesContainer/index.js

@@ -33,7 +33,6 @@ 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';
@@ -370,15 +369,15 @@ export class Creatives extends React.Component {
           const {
             messageBody = '',
             templateConfigs: {
-              id,
               name,
               template,
               varMapped,
-              language,
               category,
-              mediaType,
+              language,
               buttonType = 'NONE',
               buttons = [],
+              mediaType = 'TEXT',
+              whatsappMedia: { url: imageUrl = '' } = {},
             } = {},
           } = templateData;
           const modifiedButtons = cloneDeep(buttons).map((btn) => {
@@ -389,9 +388,13 @@ export class Creatives extends React.Component {
             }
             return btn;
           });
+          for (const key in varMapped) {
+            if (key.includes('_unsubscribe')) {
+              delete varMapped[key];
+            }
+          }
           const unsubscribeRegex = /Click {{unsubscribe}} to unsubscribe/g;
           creativesTemplateData = {
-            _id: id,
             type: constants.WHATSAPP,
             edit: true,
             name,
@@ -403,6 +406,7 @@ export class Creatives extends React.Component {
                     category,
                     varMapped,
                     mediaType,
+                    imageUrl,
                     buttonType,
                     buttons: modifiedButtons,
                     languages: [
@@ -452,8 +456,7 @@ export class Creatives extends React.Component {
     return templateData || null;
   }
 
-  getCreativesData = (channel, template, templateRecords) => {
-     //from creatives to consumers
+  getCreativesData = (channel, template, templateRecords) => { //from creatives to consumers
     let templateData = { channel };
     switch (channel) {
       case constants.SMS:
@@ -492,8 +495,7 @@ export class Creatives extends React.Component {
           if (!html_content) {
             emailBase = templateRecords.base;
           }
-          const newHtmlContent = updateImagesInHtml(html_content);
-          templateData = {...templateData, ...emailBase, emailBody: newHtmlContent, emailSubject: (emailBase && emailBase.subject) ? emailBase.subject : ''};
+          templateData = {...templateData, ...emailBase, emailBody: html_content, emailSubject: (emailBase && emailBase.subject) ? emailBase.subject : ''};
           delete templateData.html_content;
           delete templateData.subject;
         }
@@ -585,43 +587,63 @@ export class Creatives extends React.Component {
       case constants.WHATSAPP:
         if (template.value) {
           const { Templates, templateData: templateDataProps } = this.props;
-          const { accountDetails: selectedAccountDetails, accountId: selectedAccountId } = templateDataProps || {};
           const selectedWhatsappAccount = Templates?.selectedWhatsappAccount;
+          const { accountDetails: selectedAccountDetails, accountId: selectedAccountId } = templateDataProps || {};
           const accountDetails = (selectedWhatsappAccount ? selectedWhatsappAccount : selectedAccountDetails);
           const accountId = selectedAccountId || (selectedWhatsappAccount?.id || '');
           const { versions } = template.value;
           const {
             languages = [{}],
-            mediaType,
-            category,
-            templateEditor,
-            varMapped,
+            mediaType = 'TEXT',
+            category = '',
+            templateEditor = '',
+            varMapped = {},
             buttonType = 'NONE',
             buttons = [],
+            imageUrl = '',
           } = cloneDeep(versions.base.content.whatsapp);
+
           const modifiedButtons = cloneDeep(buttons).map((btn) => {
             if (btn.type === 'PHONE_NUMBER') {
               btn.phoneNumber = btn.phone_number;
               delete btn.phone_number;
-              return btn;
+            } else if (btn.type === 'DYNAMIC_URL') {
+              const dynamicUrlPayload = btn.url.match(/{{(.*?)}}/g);
+              btn.dynamicUrlPayload = dynamicUrlPayload.length === 1 ? dynamicUrlPayload[0] : '';
             }
             return btn;
           });
+
+          //to send {{unsubscribe}} to backend inside varMapped
+          const unsubscribeRegex = /Click {{unsubscribe}} to unsubscribe/g;
+          if (
+            languages[0].content?.match(unsubscribeRegex)?.length > 0 &&
+            Object.keys(varMapped)?.every(
+              (key) => !key?.includes("_unsubscribe")
+            )
+          ) {
+            varMapped[`{{${Object.keys(varMapped).length + 1}}}_unsubscribe`] =
+              "{{unsubscribe}}";
+          }
+
           templateData = {
             channel,
             accountId,
             accountName: accountDetails?.name || '',
             messageBody: languages[0].content,
             templateConfigs: {
-              id: template._id,
+              id: template?.value?.name,
               name: template?.value?.name,
               template: templateEditor,
               varMapped,
               category,
               language: languages[0].language,
-              mediaType,
               buttonType,
-              buttons : modifiedButtons,
+              buttons: modifiedButtons,
+              mediaType,
+              whatsappMedia: {
+                url: imageUrl,
+              },
             },
           };
         }

package/v2Containers/Email/index.js

@@ -35,8 +35,6 @@ 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);
@@ -324,7 +322,7 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
       if (this.state.isEdit && nextProps.location.query.module === "library" && !_.isEmpty(nextProps.templateData) && !this.props.params.id && !nextProps.isGetFormData && _.isEmpty(_.get(this, `state.formData['template-subject']`))) {
         this.startTemplateCreation(nextProps.templateData);
       }
-      if (nextProps.location.query.module === 'library' && nextProps.isGetFormData && (this.props.isGetFormData!==nextProps.isGetFormData)) {
+      if (nextProps.location.query.module === 'library' && nextProps.isGetFormData && (this.props.isGetFormData !== nextProps.isGetFormData)) {
         const formData = this.state.formData;
         let isBeeEditor = false;
         const isBEEEnable = this.checkBeeEditorAllowedForLibrary();
@@ -681,9 +679,9 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
         channel: EMAIL,
         timeTaken,
         content: base?.[activeTab]?.['template-content'],
-        mode: isEdit ? EDIT : CREATE
+        mode: isEdit ? EDIT : CREATE,
       });
-      
+
       // this.resetSchema();
       let message;
       if (isEdit) {
@@ -872,46 +870,6 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
           } else {
             schema.containers[index].isActive = false;
           }
-          // const isLanguageSupport = this.props.location.query.isLanguageSupport;
-
-          _.forEach(data.selectedLanguages, (lang, langIndex) => {
-            if ((type !== 'embedded' || (type === 'embedded' && isLanguageSupport === 'true')) && lang !== this.props.currentOrgDetails.basic_details.base_language) {
-              const tabContent = _.cloneDeep(containers[0].tabContent.sections[0]);
-              const tabContentSection = tabContent.inputFields[0].cols[0];
-              const panes = containers[0].panes.slice();
-              const firstPane = _.cloneDeep(panes[0]);
-              const sections = [];
-              _.forEach(firstPane.sections, (section) => {
-                let sect = _.cloneDeep(section);
-
-                if (sect.type === 'col-label') {
-                  sect = this.cloneColLabel(sect, (langIndex + 1));
-                } else if (sect.type === 'multicols') {
-                  sect = this.cloneMultiCol(sect, (langIndex + 1));
-                } else if (sect.type === 'parent') {
-                  sect = this.cloneParent(sect, (langIndex + 1));
-                }
-
-                sections.push(sect);
-                return true;
-              });
-              //
-
-              this.map[`template-content${data.selectedLanguages.indexOf(lang) + 1}`] = this.map['template-content'];
-              tabContentSection.id = `${tabContentSection.id}${index + 1}`;
-              tabContentSection.value = `${data[lang].language}`;
-
-              firstPane.sections = sections;
-              firstPane.sectionsHeaders = [tabContent];
-
-              // panes.push(firstPane);
-
-              schema.containers[index].panes.push(firstPane);
-            } else if (lang !== this.props.currentOrgDetails.basic_details.base_language) {
-              delete data[lang];
-              data.selectedLanguages.splice(langIndex, 1);
-            }
-          });
         }
         if (data.base) {
           formData.base = data;
@@ -2373,7 +2331,7 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
       const response = {
         action: "getFormData",
         postAction: this.state.getFormDataValue || 'next',
-        id : _.get(this.props, 'Email.templateDetails._id', ''),
+        id: _.get(this.props, 'Email.templateDetails._id', ''),
         value: this.transformFormData(passedData),
         validity: this.state.isFormValid,
         type: 'EMAIL',
@@ -2407,9 +2365,8 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
       const newdata = data;
 
       if (!isNaN(index) && newdata) {
-        const baseLangTabKey = newdata[baseLanguage].tabKey;
+        const baseLangTabKey = newdata[baseLanguage]?.tabKey || newdata.tabKey;
         newdata.tabKey = baseLangTabKey;
-        newdata.activeTab = baseLanguage;
         if (newdata.base) {
           baseKey = baseLangTabKey;
         }
@@ -2431,7 +2388,7 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
     obj.versions.base = formData.base;
     obj.versions.base.tabKey = baseKey;
     obj.versions.base.subject = formData['template-subject'];
-    obj.versions.base.activeTab = baseLanguage;
+    obj.versions.base.activeTab = formData?.base?.activeTab || baseLanguage;
     _.forEach(obj.versions.base.selectedLanguages, (language) => {
       if (obj.versions.base[language].is_drag_drop) {
         delete obj.versions.base[language].edmeditorsrc;
@@ -2439,8 +2396,8 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
     });
 
     // if (saveCount === 0) {
-    const newEmail = transformEmailTemplates(obj);
-    this.props.actions.createTemplate(newEmail, this.onUpdateTemplateComplete);
+
+    this.props.actions.createTemplate(obj, this.onUpdateTemplateComplete);
     // } else {
     //   this.setState({saveObj: obj, targetSaveCount: saveCount, mode: "save", saveEdmDataMode: 'save'}, () => {
     //     _.forEach(data.selectedLanguages, (language, langIndex) => {
@@ -2729,7 +2686,7 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
                   isEdit={this.state.isEdit}
                   iframeParent={parent}
                   router={this.props.router}
-                  baseLanguage={this.props.currentOrgDetails.basic_details.base_language}
+                  baseLanguage={this.state.formData[0]?.activeTab || this.props.currentOrgDetails.basic_details.base_language}
                   supportedLanguages={this.getSupportedLanguages(this.props)}
                   isSchemaChanged={this.state.isSchemaChanged}
                   cmsTemplates={this.props.Templates.cmsTemplates}

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: getCdnUrl({url: obj.imgSrc}),
+              imageSrc: obj.imgSrc,
             };
           }
           if (obj.subType === VIDEO) {
@@ -336,7 +336,7 @@ export const Advertisement = (props) => {
         };
       }
       if (obj.subType === IMAGE) {
-        data.imgSrc = getCdnUrl({url: obj.imageData.imageSrc});
+        data.imgSrc = obj.imageData.imageSrc;
       } else {
         const {
           videoSrc,

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

@@ -15,7 +15,6 @@ 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 {
@@ -74,7 +73,7 @@ export const LineImage = ({
         if (imageSrc && (isFullMode ? messageTitle: true) && imagePreview) {
                 updateMessageState({
                     isError: !imageSrc || !(isFullMode ? messageTitle : true) || isImageError || errorMessageTitle,
-                    originalContentUrl: getCdnUrl({url: imageSrc}),
+                    originalContentUrl: imageSrc,
                     previewImageUrl: imagePreview,
                     messageTitle,
                     index,
@@ -113,7 +112,7 @@ export const LineImage = ({
 
             updateMessageState({
                 isError: !imgSrc || !(isFullMode ? messageTitle : true) || errorMessageTitle,
-                originalContentUrl: getCdnUrl({url: imgSrc}),
+                originalContentUrl: imgSrc,
                 previewImageUrl: imgPreview,
                 messageTitle,
                 index,
@@ -156,7 +155,7 @@ export const LineImage = ({
         }
         updateMessageState({
             isError: !imageSrc || !(isFullMode ? value : true) || isImageError || !value,
-            originalContentUrl: getCdnUrl({url: imageSrc}),
+            originalContentUrl: imageSrc,
             previewImageUrl: imagePreview,
             messageTitle: value,
             index,
@@ -413,7 +412,7 @@ export const LineImage = ({
             updateImagePreview(imagePreview);
             updateMessageState({
                 isError: !image || !(isFullMode ? messageTitle : true) || isImageError || errorMessageTitle,
-                originalContentUrl: getCdnUrl({url: image}),
+                originalContentUrl: image,
                 previewImageUrl: imagePreview,
                 messageTitle,
                 index,

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

@@ -15,7 +15,6 @@ 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';
 
@@ -104,7 +103,7 @@ export const LineImageCarousel = (props) => {
 							} = content || {};
 							validCarouselImages.push({
 								activeIndex: index,
-								originalContentUrl: getCdnUrl({url: url}),
+								originalContentUrl: url,
 								aspectRatio,
 								selectedActionType: buttonType ? (buttonType === MESSAGE_ACTION_TYPE ? TEXT_ACTION_TYPE : URL_ACTION_TYPE) : '',
 								actionContent: text || uri,
@@ -128,7 +127,7 @@ export const LineImageCarousel = (props) => {
 
 							validCarouselImages.push({
 								activeIndex: index,
-								originalContentUrl: getCdnUrl({url: imageUrl}),
+								originalContentUrl: imageUrl,
 								selectedActionType: type ? (type === MESSAGE_ACTION_TYPE ? TEXT_ACTION_TYPE : URL_ACTION_TYPE) : '',
 								actionContent: text || uri,
 								actionLabel: label,
@@ -161,7 +160,7 @@ export const LineImageCarousel = (props) => {
 				? isErrorIndex
 				: ((!originalContentUrl || !selectedActionType || actionContentErrorMessage || actionLabelErrorMessage || !actionContent) && activeIndex);
 			columns.push({
-				imageUrl: getCdnUrl({url: originalContentUrl}),
+				imageUrl: originalContentUrl,
 				aspectRatio,
 				action: {
 					type: selectedActionType ? (selectedActionType === TEXT_ACTION_TYPE ? MESSAGE_ACTION_TYPE : URL_ACTION_TYPE) : '',
@@ -456,7 +455,7 @@ export const LineImageCarousel = (props) => {
 					} = content || {};
 					validCarouselImages.push({
 						activeIndex: index,
-						originalContentUrl: getCdnUrl({url: url}),
+						originalContentUrl: url,
 						aspectRatio,
 						selectedActionType: buttonType ? (buttonType === MESSAGE_ACTION_TYPE ? TEXT_ACTION_TYPE : URL_ACTION_TYPE) : '',
 						actionContent: text || uri,
@@ -481,7 +480,7 @@ export const LineImageCarousel = (props) => {
 
 					validCarouselImages.push({
 						activeIndex: index,
-						originalContentUrl: getCdnUrl({url: imageUrl}),
+						originalContentUrl: imageUrl,
 						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,7 +39,6 @@ import {
 } from '../constants';
 
 const { CapIconAvatar } = CapIcon;
-import { getCdnUrl } from '../../../../utils/cdnTransformation';
 
 export const LineImageMap = ({
     className,
@@ -115,7 +114,7 @@ export const LineImageMap = ({
         if (imageSrc && (isFullMode ? messageTitle: true) && imageMapTemplate && actionLinks) {
                 updateMessageState({
                     isError: !imageSrc || !(isFullMode ? messageTitle : true)  || !imageMapTemplate || (isImageError && errorMessageTitle) || errorTitle || !altText,
-                    baseUrl: getCdnUrl({url: imageSrc}),
+                    baseUrl: imageSrc,
                     messageTitle,
                     index,
                     type: IMAGE_MAP,

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

@@ -27,8 +27,6 @@ import {
   MAX_ACTION_LABEL_LENGTH,
 } from './constants';
 
-import { getCdnUrl } from '../../../../utils/cdnTransformation';
-
 export const LineVideo = ({
   className,
   id,
@@ -60,7 +58,7 @@ export const LineVideo = ({
   const [isTemplateDrawerRequired, updateTemplateDrawerRequirement] = useState(false);
   const [selectedTemplate, updateSelectedTemplate] = useState();
 
-  const [videoSrc, setVideoSrc] = useState('');
+  const [videoSrc, updateVideoSrc] = useState('');
   const [videoName, updateVideoName] = useState('');
   const [isVideo, updateVideoStatus] = useState(false);
   const [isVideoError, updateVideoErrorMessage] = useState(false);
@@ -77,10 +75,6 @@ export const LineVideo = ({
   const [videoWidth, updateVideoWidth] = useState();
   const [isPlaying, updateIsPlaying] = useState(false);
 
-  const updateVideoSrc = React.useCallback((url)=>{
-    const newUrl = getCdnUrl({url, transformationEnabled: false, reduceQuality: false});
-    setVideoSrc(newUrl)
-  },[]);
 
   useEffect(() => {
     const {

package/v2Containers/MobilePush/Create/index.js

@@ -31,7 +31,6 @@ 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;
@@ -465,7 +464,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 = getCdnUrl({url: imageLink});
+        obj.versions.base.ANDROID.expandableDetails.image = imageLink;
         obj.versions.base.ANDROID.expandableDetails.style = "BIG_PICTURE";
       }
       if (secondaryCta1 || secondaryCta2 ) {
@@ -539,7 +538,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 = getCdnUrl({url: imageLinkIos});
+        obj.versions.base.IOS.expandableDetails.image = imageLinkIos;
         obj.versions.base.IOS.expandableDetails.style = "BIG_PICTURE";
       }
       if (secondaryCtaIos) {

package/v2Containers/MobilePush/Edit/index.js

@@ -33,7 +33,6 @@ 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;
@@ -422,7 +421,7 @@ export class Edit extends React.Component { // eslint-disable-line react/prefer-
     }
     const imageLink = android.image;
     if (imageLink) {
-      obj.versions.base.ANDROID.expandableDetails.image = getCdnUrl({url: imageLink});
+      obj.versions.base.ANDROID.expandableDetails.image = imageLink;
       obj.versions.base.ANDROID.expandableDetails.style = "BIG_PICTURE";
     }
     if (obj.versions.base.ANDROID && obj.versions.base.ANDROID.cta) {
@@ -493,7 +492,7 @@ export class Edit extends React.Component { // eslint-disable-line react/prefer-
     }
     const imageLinkIos = ios.image;
     if (imageLinkIos) {
-      obj.versions.base.IOS.expandableDetails.image = getCdnUrl({url: imageLinkIos});
+      obj.versions.base.IOS.expandableDetails.image = imageLinkIos;
       obj.versions.base.IOS.expandableDetails.style = "BIG_PICTURE";
     }
     if (obj.versions.base.IOS && obj.versions.base.IOS.cta) {

package/v2Containers/Rcs/index.js

@@ -81,9 +81,6 @@ 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 {
@@ -903,7 +900,7 @@ export const Rcs = (props) => {
                   ...(suggestions.length > 0 && { suggestions }),
                   ...(!isMediaTypeNone && {
                     media: {
-                      mediaUrl: getCdnUrl({url: rcsImageSrc}),
+                      mediaUrl: rcsImageSrc,
                       height: MEDIUM,
                     },
                   }),

package/v2Containers/Viber/index.js

@@ -53,12 +53,9 @@ 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,
@@ -81,7 +78,7 @@ const Viber = (props) => {
   const { formatMessage } = intl;
   const [isImageError, updateImageErrorMessage] = useState(false);
   const [isImage, updateImageStatus] = useState(false);
-  const [imageSrc, setImageSrc] = useState();
+  const [imageSrc, updateImageSrc] = useState();
   const [isDrawerRequired, updateDrawerRequirement] = useState(false);
   const [messageContent, updateTextMessageContent] = useState('');
   const [buttonText, updateButtonText] = useState('');
@@ -95,12 +92,6 @@ const Viber = (props) => {
   const [buttonURLErrorMessage, updateButtonURLErrorMessage] = useState(false);
   const [accountName, updateAccountName] = useState("");
 
-
-  const updateImageSrc = React.useCallback((url)=>{
-    const newUrl = getCdnUrl({url});
-    setImageSrc(newUrl);
-  },[]);
-
   const StyledHeader = styled(CapHeader)`
   margin-bottom: 14px;
 `;

package/v2Containers/Whatsapp/index.js

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