@capillarytech/creatives-library 7.13.5 → 7.13.8

package/utils/tests/cdnTransformation.test.js

@@ -0,0 +1,287 @@
+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_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}',
+    };
+    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}'
+  );
+  localStorage.setItem(
+    "CREATIVES_S3_BUCKET_PATH", "intouch_creative_assets"
+  );
+});
+
+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 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({
+        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 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/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/v2Components/FormBuilder/index.js

@@ -11,7 +11,7 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import _ from 'lodash';
 import { Tabs, Table, Modal} from 'antd';
-import { CapSpin, CapDrawer, CapButton, CapInput, CapPopover, CapImage, CapCheckbox, CapRadio, CapSelect, CapTable, CapRow, CapColumn, CapNotification, CapUploader, CapHeading, CapIcon} from '@capillarytech/cap-ui-library';
+import { CapSpin, CapDrawer, CapButton, CapInput, CapPopover, CapImage, CapCheckbox, CapRadio, CapSelect, CapTable, CapRow, CapColumn, CapNotification, CapUploader, CapHeading, CapIcon, CapTooltip} from '@capillarytech/cap-ui-library';
 import { injectIntl, intlShape, FormattedMessage } from 'react-intl';
 import LabelHOC from '@capillarytech/cap-ui-library/assets/HOCs/ComponentWithLabelHOC';
 import { CAP_SPACE_12, CAP_SPACE_08, FONT_COLOR_05, FONT_COLOR_04 } from '@capillarytech/cap-ui-library/styled/variables';
@@ -2800,22 +2800,28 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
             break;
           case "checkbox":
             ifError = this.state.checkValidation && (isVersionEnable ? this.state.errorData[`${this.state.currentTab - 1}`][val.id] : this.state.errorData[val.id]);
+            const { disabled , hoverText } = val || {};
             if (styling === 'semantic') {
               columns.push(
                 <CapColumn key="input" span={val.width} offset={val.offset}>
-                  <CapCheckbox
-                    key={val.id}
-                    className={`${ifError ? 'error' : ''}`}
-                    errorMessage={val.errorMessage && ifError ? val.errorMessage : ''}
-                    onChange={(e) => this.updateFormData(e.target.checked, val, val.submitAction)}
-                    checked={isVersionEnable ? this.state.formData[`${this.state.currentTab - 1}`][val.id] : this.state.formData[val.id]}
-                    defaultChecked={isVersionEnable ? this.state.formData[`${this.state.currentTab - 1}`][val.id] : this.state.formData[val.id]}
-                    style={val.style ? val.style : {}}
-                    disabled={val.disabled}
-                    inductiveText={val.inductiveText}
+                  <CapTooltip
+                    title={ disabled && hoverText ? hoverText : '' }
+                    placement="topLeft"
                   >
+                    <CapCheckbox
+                      key={val.id}
+                      className={`${ifError ? 'error' : ''}`}
+                      errorMessage={val.errorMessage && ifError ? val.errorMessage : ''}
+                      onChange={(e) => this.updateFormData(e.target.checked, val, val.submitAction)}
+                      checked={isVersionEnable ? this.state.formData[`${this.state.currentTab - 1}`][val.id] : this.state.formData[val.id]}
+                      defaultChecked={isVersionEnable ? this.state.formData[`${this.state.currentTab - 1}`][val.id] : this.state.formData[val.id]}
+                      style={val.style ? val.style : {}}
+                      disabled={val.disabled}
+                      inductiveText={val.inductiveText}
+                    >
                     {val.label}
-                  </CapCheckbox>
+                    </CapCheckbox>
+                  </CapTooltip>
                 </CapColumn>
               );
             }

package/v2Components/FormBuilder/tests/index.test.js

@@ -0,0 +1,41 @@
+import React from "react";
+import { injectIntl } from 'react-intl';
+import '@testing-library/jest-dom';
+import FormBuilder from '../index';
+import { Provider } from 'react-redux';
+import configureStore from '../../../store';
+import {
+    render,
+    screen,
+    fireEvent,
+    waitFor
+  } from '../../../utils/test-utils';
+import { mockData } from './mockData';
+
+
+const ComponentToRender = injectIntl(FormBuilder);
+const renderComponent = props => {
+  const store = configureStore({}, null);
+  return render(
+    <Provider store={store}>
+      <ComponentToRender {...props} />
+    </Provider>,
+  );
+};
+
+describe("test for checkbox form builder",() => {
+  const onFormValidityChange=jest.fn();
+    const props={
+      ...mockData,
+      onFormValidityChange
+    }
+    renderComponent(props);
+    it("add action button to notification disabled in ios", async () => {
+      const addNotifBtn=screen.getByLabelText("Add action buttons to notification")
+      expect(addNotifBtn).toBeDisabled();
+      fireEvent.mouseOver(addNotifBtn);
+      await waitFor(() => {
+        expect(screen.getByText("This section is being revamped. Till then it will remain disabled.")).toBeInTheDocument();
+      })
+    })
+})

package/v2Components/FormBuilder/tests/mockData.js

@@ -0,0 +1,120 @@
+export const mockData = {
+    schema:{
+        "containers": [
+            {
+                "id": "pane",
+                "supportedEvents": [
+                    "onTabChange"
+                ],
+                "panes": [
+                    {
+                        "isSupported": true,
+                        "sectionsHeaders": [
+                            {
+                                "type": "multicols",
+                                "inputFields": [
+                                    {
+                                        "rowStyle": {
+                                            "display": "flex",
+                                            "flex": 1
+                                        },
+                                        "cols": [
+                                            {
+                                                "id": "tab-header",
+                                                "metaType": "label",
+                                                "value": "iOS",
+                                                "primitive": true,
+                                                "dynamicTab": false,
+                                                "type": "div",
+                                                "width": 5,
+                                                "offset": 0,
+                                                "onlyDisplay": true,
+                                                "colStyle": {
+                                                    "flex": 1
+                                                },
+                                                "injectedEvents": {}
+                                            }
+                                        ]
+                                    }
+                                ],
+                                "actionFields": []
+                            }
+                        ],
+                        "sections": [
+                            {
+                                "type": "parent",
+                                "width": 16,
+                                "rowStyle": {
+                                    "height": "100%"
+                                },
+                                "childSections": [
+                                    {
+                                        "colStyle": {
+                                            "paddingTop": "16px",
+                                            "paddingLeft": "16px",
+                                            "borderRight": "1px solid #d9d9d9",
+                                            "height": "70vh",
+                                            "overflowY": "auto"
+                                        },
+                                        "width": 16,
+                                        "type": "parent",
+                                        "childSections": [
+                                            {
+                                                "type": "multicols",
+                                                "inputFields": [
+                                                    {
+                                                        "identifier": "add-sec-cta-ios",
+                                                        "cols": [
+                                                            {
+                                                                "id": "add-sec-cta-ios",
+                                                                "metaType": "label",
+                                                                "dynamicTab": false,
+                                                                "label": "Add action buttons to notification",
+                                                                "styling": "semantic",
+                                                                "type": "checkbox",
+                                                                "customComponent": false,
+                                                                "datatype": "boolean",
+                                                                "fluid": true,
+                                                                "onlyDisplay": false,
+                                                                "offset": 0,
+                                                                "colStyle": {
+                                                                    "flex": 1
+                                                                },
+                                                                "submitAction": "addSecondaryCtaIos",
+                                                                "supportedEvents": [
+                                                                    "addSecondaryCtaIos"
+                                                                ],
+                                                                "disabled": true,
+                                                                "hoverText": "This section is being revamped. Till then it will remain disabled.",
+                                                                "injectedEvents": {}
+                                                            }
+                                                        ]
+                                                    }
+                                                ],
+                                                "actionFields": []
+                                            }
+                                        ]
+                                    },
+                                ]
+                            }
+                        ]
+                    }
+                ],
+                "type": "tabs",
+                "defaultPanes": 1,
+                "additionalPanes": 0,
+                "injectedEvents": {}
+            }
+        ],
+        "channel": "MOBILEPUSH",
+        "module": "Campaigns",
+        "type": "LAYOUT"
+    },
+    location:{
+        "pathname": "/mobilepush/create/image",
+        "query": {
+            "type": false,
+            "module": "default"
+        }
+    }
+}

package/v2Components/NewCallTask/index.js

@@ -99,7 +99,7 @@ class NewCallTask extends React.Component { // eslint-disable-line react/prefer-
   };
 
   render() {
-    const { intl, isLoading, metaEntities, selectedOfferDetails } = this.props;
+    const { intl, isLoading, metaEntities, selectedOfferDetails , injectedTags} = this.props;
     const { formatMessage } = intl;
     const { subject, messageBody, description, callTaskActionType } = this.state;
     const tags = metaEntities && metaEntities.tags ? metaEntities.tags.standard : [];
@@ -125,6 +125,7 @@ class NewCallTask extends React.Component { // eslint-disable-line react/prefer-
                   tags={tags}
                   onTagSelect={this.onTagSelect}
                   selectedOfferDetails={selectedOfferDetails}
+                  injectedTags={injectedTags}
                 />
                 <CapInput.TextArea
                   setInputRef={this.setInputRef}
@@ -177,6 +178,7 @@ NewCallTask.propTypes = {
   selectedOfferDetails: PropTypes.array,
   messageDetails: PropTypes.object,
   mode: PropTypes.string,
+  injectedTags: PropTypes.object,
 };
 
 export default injectIntl(NewCallTask);

package/v2Components/NewCallTask/tests/index.test.js

@@ -0,0 +1,36 @@
+import React from "react";
+import { injectIntl } from 'react-intl';
+import '@testing-library/jest-dom';
+import { Provider } from 'react-redux';
+import { browserHistory } from 'react-router';
+import NewCallTask from '../index';
+import configureStore from '../../../store';
+import mockData from './mockData'
+import {
+    render,
+  } from '../../../utils/test-utils';
+import { Router } from "express";
+const ComponentToRender = injectIntl(NewCallTask);
+
+const renderComponent = (props) => {
+  const store = configureStore({}, browserHistory);
+  return render(
+    <Router>
+      <Provider store={store}>
+        <ComponentToRender {...props} />
+      </Provider>
+    </Router>,
+  );
+};
+
+describe("test for NewCallTask", () => {
+  const onCallTaskSubmit = jest.fn();
+  const props = {
+    ...mockData,
+    onCallTaskSubmit,
+  };
+ 
+  it("New call task", async () => {
+    renderComponent(props);
+  });
+});

package/v2Components/NewCallTask/tests/mockData.js

@@ -0,0 +1,20 @@
+const mockData= {
+    injectedTags: {},
+    templateData: {},
+    messageDetails: {},
+    isLoading: true,
+    selectedOfferDetails: [],
+    location: {
+      pathname: "/NewCallTask",
+      query: {
+        type: false,
+        module: "default",
+      },
+    },
+    match: {
+      path: '/NewCallTask',
+      url: '/creatives/ui/v2',
+      isExact: true,
+      params: {},
+    }
+}

package/v2Containers/CallTask/index.js

@@ -16,7 +16,7 @@ import {
 } from '@capillarytech/cap-ui-library';
 import { injectIntl, intlShape } from 'react-intl';
 import { createStructuredSelector } from 'reselect';
-import { makeSelectMetaEntities, isLoadingMetaEntities } from '../Cap/selectors';
+import { makeSelectMetaEntities, isLoadingMetaEntities, setInjectedTags } from '../Cap/selectors';
 import * as globalActions from '../Cap/actions';
 import * as actions from "./actions";
 import makeSelectCallTask from './selectors';
@@ -71,7 +71,7 @@ export class CallTask extends React.Component { // eslint-disable-line react/pre
     };
   }
   render() {
-    const { intl, onCallTaskSubmit, templateData, loadingMetaEntities, metaEntities, selectedOfferDetails, messageDetails } = this.props;
+    const { intl, onCallTaskSubmit, templateData, loadingMetaEntities, metaEntities, selectedOfferDetails, messageDetails, injectedTags } = this.props;
     const { formatMessage } = intl;
     const { mode } = this.state;
     return (
@@ -85,6 +85,7 @@ export class CallTask extends React.Component { // eslint-disable-line react/pre
             onCallTaskSubmit={onCallTaskSubmit}
             selectedOfferDetails={selectedOfferDetails}
             messageDetails={messageDetails}
+            injectedTags={injectedTags || {}}
           />
           :
             <div>
@@ -144,6 +145,7 @@ const mapStateToProps = createStructuredSelector({
   CallTask: makeSelectCallTask(),
   metaEntities: makeSelectMetaEntities(),
   loadingMetaEntities: isLoadingMetaEntities(),
+  injectedTags: setInjectedTags(),
 });
 
 function mapDispatchToProps(dispatch) {

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;
         }