@capillarytech/creatives-library 7.17.131 → 7.17.133

package/containers/Templates/index.js

@@ -44,6 +44,7 @@ import SlideBox from '../../components/SlideBox';
 import Pagination from '../../components/Pagination';
 import EmailPreview from '../../components/EmailPreview';
 import WechatRichmediaTemplatePreview from '../../components/TemplatePreview/WechatRichmediaTemplatePreview';
+import { EMAIL } from '../../v2Containers/App/constants';
 
 const MenuItem = Menu.Item;
 const Option = Select.Option;
@@ -984,7 +985,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
       templateInfo.appName = this.props.Templates.selectedWeChatAccount.name;
     } else if (this.state.channel.toLowerCase() === "email") {
       
-      this.props.actions.getTemplateDetails(template._id);
+      this.props.actions.getTemplateDetails(template._id, EMAIL);
     } else if (this.state.channel.toLowerCase() === 'ebill') {
       this.props.actions.getTemplateDetails(template._id);
     }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@capillarytech/creatives-library",
   "author": "meharaj",
-  "version": "7.17.131",
+  "version": "7.17.133",
   "description": "Capillary creatives ui",
   "main": "./index.js",
   "module": "./index.es.js",
@@ -15,7 +15,7 @@
     "@babel/polyfill": "7.4.3",
     "@bugsnag/js": "^7.2.1",
     "@bugsnag/plugin-react": "^7.2.1",
-    "@capillarytech/cap-ui-utils": "1.4.24",
+    "@capillarytech/cap-ui-utils": "2.0.8",
     "@mailupinc/bee-plugin": "^1.2.0",
     "babel-cli": "^6.26.0",
     "chalk": "1.1.3",

package/services/api.js

@@ -7,7 +7,9 @@ import config from '../config/app';
 import pathConfig from '../config/path';
 import getSchema from './getSchema';
 import * as API from '../utils/ApiCaller';
-import { GA } from '@capillarytech/cap-ui-utils';
+import { GA, decompressJsonObject } from '@capillarytech/cap-ui-utils';
+import { addBaseToTemplate } from '../utils/commonUtils';
+import { EMAIL } from '../v2Containers/CreativesContainer/constants';
 let API_ENDPOINT = config.development.api_endpoint;
 let EXPORT_API_ENDPOINT = config.development.exports_api_endpoint;
 let CAMPAIGNS_API_ENDPOINT = config.development.campaigns_api_endpoint;
@@ -270,7 +272,15 @@ export const createChannelWiseTemplate = ({ channel, template }) => {
 
 export const getTemplateDetails = ({id, channel}) => {
   const url = `${API_ENDPOINT}/templates/${id}/${channel ? channel.toUpperCase() : 'SMS'}`;
-  return request(url, getAPICallObject('GET'));
+  const compressedTemplatesData = request(url, getAPICallObject('GET'));
+  return compressedTemplatesData.then(async (data) => {
+    const { response = '' } = data || {};
+    const decompressData = await decompressJsonObject(response);
+    if (channel?.toUpperCase() === EMAIL) {
+      return { ...data, response: addBaseToTemplate(decompressData) };
+    }
+    return { ...data, response: decompressData };
+  });
 };
 
 export const getAllTemplates = ({channel, queryParams = {}}) => {
@@ -278,7 +288,11 @@ export const getAllTemplates = ({channel, queryParams = {}}) => {
     url: `${API_ENDPOINT}/templates/${channel}?`,
     queryParams,
   });
-  return request(url, getAPICallObject('GET'));
+  const compressedTemplatesData = request(url, getAPICallObject('GET'));
+  return compressedTemplatesData.then(async (data) => {
+    const { response = '' } = data || {};
+    return { ...data, response: await decompressJsonObject(response)};
+  });
 };
 
 export const deleteTemplate = ({channel, id}) => {

package/services/tests/api.test.js

@@ -6,10 +6,21 @@ import {
   getMetaTags,
   getSupportVideosConfig,
   getNavigationConfigApi,
+  getAllTemplates,
+  getTemplateDetails,
 } from '../api';
 import { mockData } from './mockData';
 const sampleFile = require('../../assets/line.png');
 
+let mockDecompressJsonObject;
+jest.mock('@capillarytech/cap-ui-utils', () => {
+  mockDecompressJsonObject = jest.fn();
+  return {
+    ...jest.requireActual('@capillarytech/cap-ui-utils'),
+    decompressJsonObject: mockDecompressJsonObject,
+  };
+});
+
 describe('getSenderDetails -- Test with valid responses', () => {
   it('Should return correct response', () =>
     expect(getSenderDetails('WHATSAPP', -1)).toEqual(Promise.resolve()));
@@ -83,3 +94,134 @@ describe('getNavigationConfigApi -- Test with valid responses', () => {
   it('Should return correct response', () =>
     expect(getNavigationConfigApi()).toEqual(Promise.resolve()));
 });
+
+describe('getAllTemplates -- Test with valid responses', () => {
+  beforeEach(() => {
+    global.fetch = jest.fn(); // Mocking global fetch function
+  });
+
+  afterEach(() => {
+    jest.restoreAllMocks(); // Restore all mocks after each test
+  });
+
+  it('Should return correct response', async () => {
+    global.fetch.mockReturnValue(Promise.resolve({
+      status: 200,
+      json: () => Promise.resolve({
+        status: 200,
+        response: {
+          _id: '123',
+        },
+      }),
+    }));
+    mockDecompressJsonObject.mockReturnValue(Promise.resolve({
+      _id: '123',
+    }));
+    expect(await getAllTemplates({channel: 'email'})).toEqual({
+      response: {
+        _id: '123',
+      },
+      status: 200,
+    });
+  });
+
+  it('Should not return correct response', async () => {
+    global.fetch.mockReturnValue(Promise.resolve({
+      status: 200,
+      json: () => Promise.resolve({
+        status: 200,
+        data: {
+          _id: '123',
+        },
+      }),
+    }));
+    mockDecompressJsonObject.mockReturnValue(Promise.resolve({
+      _id: '123',
+    }));
+    expect(await getAllTemplates({channel: 'email'})).toEqual({
+      data: {
+        _id: '123',
+      },
+      response: {
+        _id: '123',
+      },
+      status: 200,
+    });
+  });
+});
+
+describe('getTemplateDetails -- Test with valid responses', () => {
+  beforeEach(() => {
+    global.fetch = jest.fn(); // Mocking global fetch function
+  });
+
+  afterEach(() => {
+    jest.restoreAllMocks(); // Restore all mocks after each test
+  });
+  it('Should return correct response', async () => {
+    global.fetch.mockReturnValue(Promise.resolve({
+      status: 200,
+      json: () => Promise.resolve({
+        status: 200,
+        response: {
+          _id: '123',
+          versions: {
+            history: ['v1', 'v2'],
+          },
+        },
+      }),
+    }));
+    mockDecompressJsonObject.mockReturnValue(Promise.resolve({
+      _id: '123',
+      versions: {
+        history: ['v1', 'v2'],
+      },
+    }));
+    expect(await getTemplateDetails({id: '123', channel: 'email'})).toEqual({
+      response: {
+        _id: '123',
+        versions: {
+          history: ['v1', 'v2'],
+          base: 'v1',
+        },
+      },
+      status: 200,
+    });
+  });
+
+  it('Should return response when channel is not email', async () => {
+    global.fetch.mockReturnValue(Promise.resolve({
+      status: 200,
+      json: () => Promise.resolve({
+        status: 200,
+        data: {
+          _id: '123',
+          versions: {
+            history: ['v1', 'v2'],
+          },
+        },
+      }),
+    }));
+    mockDecompressJsonObject.mockReturnValue(Promise.resolve({
+      _id: '123',
+      versions: {
+        history: ['v1', 'v2'],
+      },
+    }));
+    expect(await getTemplateDetails({id: '123'})).toEqual({
+      data: {
+        _id: '123',
+        versions: {
+          history: ['v1', 'v2'],
+        },
+      },
+      response: {
+        _id: '123',
+        versions: {
+          history: ['v1', 'v2'],
+        },
+      },
+      status: 200,
+    });
+  });
+});

package/utils/commonUtils.js

@@ -3,4 +3,20 @@ import { FormattedMessage } from 'react-intl';
 
 export const apiMessageFormatHandler = (id, fallback) => (
     <FormattedMessage id={id} defaultMessage={fallback} />
-);
+);
+
+export const addBaseToTemplate = (template) => {
+  const { versions: {
+    history = [],
+  } = {}} = template || {};
+  if (history?.length) {
+    return ({
+      ...template,
+      versions: {
+        ...template.versions,
+        base: history[0],
+      },
+    });
+  }
+  return template;
+};

package/utils/tests/commonUtil.test.js

@@ -1,6 +1,7 @@
 import "@testing-library/jest-dom";
 import { getTreeStructuredTags } from "../common";
 import * as mockdata from "./common.mockdata";
+import { addBaseToTemplate } from "../commonUtils";
 
 jest.mock('@capillarytech/cap-ui-utils', () => ({
   Auth: {
@@ -19,3 +20,60 @@ describe("common utils test", () => {
     expect(getTreeStructuredTags({tagsList: []})).toEqual([]);
   });
 });
+
+describe('addBaseToTemplate', () => {
+  it('should add the first item in history as base if history exists', () => {
+    const template = {
+      versions: {
+        history: ['v1', 'v2', 'v3'],
+      },
+    };
+    const expected = {
+      versions: {
+        history: ['v1', 'v2', 'v3'],
+        base: 'v1',
+      },
+    };
+    expect(addBaseToTemplate(template)).toEqual(expected);
+  });
+
+  it('should return the original template if history is empty', () => {
+    const template = {
+      versions: {
+        history: [],
+      },
+    };
+    expect(addBaseToTemplate(template)).toEqual(template);
+  });
+
+  it('should return the original template if history is undefined', () => {
+    const template = {
+      versions: {},
+    };
+    expect(addBaseToTemplate(template)).toEqual(template);
+  });
+
+  it('should return the original template if versions is undefined', () => {
+    const template = {};
+    expect(addBaseToTemplate(template)).toEqual(template);
+  });
+
+  it('should handle null input gracefully', () => {
+    expect(addBaseToTemplate(null)).toBeNull();
+  });
+
+  it('should handle undefined input gracefully', () => {
+    expect(addBaseToTemplate(undefined)).toBeUndefined();
+  });
+
+  it('should not modify the original template object', () => {
+    const template = {
+      versions: {
+        history: ['v1', 'v2', 'v3'],
+      },
+    };
+    const originalTemplateCopy = JSON.parse(JSON.stringify(template));
+    addBaseToTemplate(template);
+    expect(template).toEqual(originalTemplateCopy);
+  });
+});

package/v2Components/EmailPreviewV2/index.js

@@ -23,6 +23,7 @@ import { iframePreviewAdjustWidth, removeLinksFromHtmlContent } from './../../ut
 
 import {selectTemplateContent} from '../../v2Containers/Templates/selectors';
 import * as templateActions from '../../v2Containers/Templates/actions';
+import { EMAIL } from '../../v2Containers/CreativesContainer/constants';
 
 const deviceAspectRatio = {
   desktop: () => ({
@@ -59,7 +60,7 @@ export class EmailPreviewV2 extends React.Component {
   componentWillMount() {
     const {templateData, templateContent} = this.props;
     if (isEmpty(templateContent) && !isEmpty(templateData) && templateData._id) { // templateData: comes from templates list email preview
-      this.props.templateActions.getTemplateDetails(templateData._id); // templateContent: html data to be shown in iframe
+      this.props.templateActions.getTemplateDetails(templateData._id, EMAIL); // templateContent: html data to be shown in iframe
     }
   }
   componentWillUnmount() {

package/v2Containers/Templates/index.js

@@ -2089,7 +2089,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
         templateInfo.content = template.versions.base;
         templateInfo.appName = this.props.Templates.selectedWeChatAccount.name;
       } else if (this.state.channel.toLowerCase() === "email") {
-        this.props.actions.getTemplateDetails(template._id);
+        this.props.actions.getTemplateDetails(template._id, EMAIL);
       } else if (this.state.channel.toLowerCase() === "ebill") {
         this.props.actions.getTemplateDetails(template._id);
       }