@capillarytech/creatives-library 7.17.169-alpha.0 → 7.17.169-alpha.2

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@capillarytech/creatives-library",
   "author": "meharaj",
-  "version": "7.17.169-alpha.0",
+  "version": "7.17.169-alpha.2",
   "description": "Capillary creatives ui",
   "main": "./index.js",
   "module": "./index.es.js",

package/v2Containers/CreativesContainer/index.js

@@ -41,6 +41,7 @@ import { WHATSAPP_STATUSES, WHATSAPP_MEDIA_TYPES } from '../Whatsapp/constants';
 
 import { updateImagesInHtml } from '../../utils/cdnTransformation';
 import { IOS } from '../InApp/constants';
+import { VIET_GUYS } from '../Zalo/constants';
 
 const classPrefix = 'add-creatives-section';
 const CREATIVES_CONTAINER = 'creativesContainer';
@@ -124,14 +125,19 @@ export class Creatives extends React.Component {
         sourceAccountIdentifier = "",
         configs: { token = "" } = {},
       } = get(this.props, "Templates.selectedZaloAccount", {});
-      this.props.zaloActions.getTemplateInfoById({
-        username: name,
-        oa_id: sourceAccountIdentifier,
-        token,
-        id: template?._id,
-        preview: true,
-        actionCallback: this.actionCallback,
-      });
+      const { hostName = ''} = this.props.Templates.senderDetails || {};
+      if (hostName === VIET_GUYS) {
+        this.props.zaloActions.getTemplateInfoById({
+          username: name,
+          oa_id: sourceAccountIdentifier,
+          token,
+          id: template?._id,
+          preview: true,
+          actionCallback: this.actionCallback,
+        });
+      } else {
+        window.open(template?.versions?.base?.content?.zalo?.previewUrl, '_blank');
+      }
     }
   };
   onEditTemplate = () => {

package/v2Containers/Templates/tests/sagas.test.js

@@ -1,5 +1,5 @@
 import { expectSaga } from 'redux-saga-test-plan';
-import { take, call, takeLatest, takeEvery } from 'redux-saga/effects';
+import { take, call, takeLatest, takeEvery, put } from 'redux-saga/effects';
 import * as matchers from 'redux-saga-test-plan/matchers';
 import * as api from '../../../services/api';
 import * as types from '../constants';
@@ -10,9 +10,12 @@ import {
   getAllTemplates,
   watchGetCdnTransformationConfig,
   watchGetAllTemplates,
+  getSenderDetails,
 } from '../sagas';
 
 import * as mockData from './mockData';
+import { ZALO } from '../../CreativesContainer/constants';
+import { VIET_GUYS } from '../../Zalo/constants';
 
 describe('getCdnTransformationConfig saga', () => {
   it("handle valid response from api", () => {
@@ -134,3 +137,53 @@ describe('watchForTemplates saga', () => {
     );
   });
 });
+
+describe('getSenderDetails Saga', () => {
+  const channel = 'someChannel';
+  const orgUnitId = 'someOrgUnitId';
+  const action = { channel, orgUnitId };
+
+  it('should handle apiResponse with hostName', () => {
+    const apiResponse = {
+      entity: {
+        [channel]: [
+          {
+            domainProperties: {
+              hostName: 'example.com',
+            },
+          },
+        ],
+      },
+    };
+
+    const generator = getSenderDetails(action);
+    expect(generator.next().value).toEqual(call(api.getSenderDetails, channel, orgUnitId));
+    expect(generator.next(apiResponse).value).toEqual(
+      put({
+        type: types.GET_SENDER_DETAILS_SUCCESS,
+        payload: 'example.com',
+      })
+    );
+  });
+
+  it('should handle apiResponse without hostName', () => {
+    const apiResponse = {
+      entity: {
+        [channel]: [
+          {
+            domainProperties: {},
+          },
+        ],
+      },
+    };
+
+    const generator = getSenderDetails(action);
+    expect(generator.next().value).toEqual(call(api.getSenderDetails, channel, orgUnitId));
+    expect(generator.next(apiResponse).value).toEqual(
+      put({
+        type: types.GET_SENDER_DETAILS_SUCCESS,
+        payload: '',
+      })
+    );
+  });
+});

package/v2Containers/Zalo/index.js

@@ -80,7 +80,6 @@ export const Zalo = (props) => {
   );
   const [tags, updateTags] = useState([]);
   const [textAreaId, updateTextAreaId] = useState('');
-  const [host, setHost] = useState('');
   const { zaloTemplateInfoValue = {}, zaloTemplateInfoStatus = REQUEST } =
     editData;
   const {
@@ -119,13 +118,12 @@ export const Zalo = (props) => {
       setOaId(sourceAccountIdentifier || oaId);
       setToken(accessToken || zaloToken);
       setUsername(name || accountName);
-      setHost(hostName);
     }
   }, [selectedZaloAccount, templateData]);
 
   //gets template details
   useEffect(() => {
-    if (zaloTempId && oa_id && token && username && host === VIET_GUYS) {
+    if (zaloTempId && oa_id && token && username && senderDetails?.hostName === VIET_GUYS) {
       actions.getTemplateInfoById({
         username,
         oa_id,
@@ -134,22 +132,31 @@ export const Zalo = (props) => {
         actionCallback,
       });
     } else {
-      makeSelectGapitTemplates();
-      const {_id : gapitTemplateId = ''} = templateData;
-      const data = props.gapItTemplateData.find(template => template._id == gapitTemplateId);
-      const { templateName = "", listParams = [], previewUrl = "", status = ""} = data?.versions?.base?.content?.zalo || {};
-      setTemplateName(templateName);
-      setTemplateId(gapitTemplateId);
-      setTemplateListParams(listParams);
-      setTemplatePreviewUrl(previewUrl);
-      setZaloTemplateStatus(status);
-      updateTextAreaId(listParams[0]?.name);
+      const { _id: gapitTemplateId = '' } = templateData;
+      if (gapitTemplateId && senderDetails?.hostName !== VIET_GUYS) {
+        const data = props.gapItTemplateData.find(template => template._id == gapitTemplateId);
+        const { templateName = "", listParams = [], previewUrl = "", status = "" } = data?.versions?.base?.content?.zalo || {};
+        setTemplateName(templateName);
+        setTemplateId(gapitTemplateId);
+        setTemplateListParams(listParams);
+        setTemplatePreviewUrl(previewUrl);
+        setZaloTemplateStatus(status);
+        updateTextAreaId(listParams[0]?.name);
+      } else {
+        const { id: gapitTemplateId = '', name: templateName = '', template: previewUrl = '', varMapped: listParams = {} } = templateData?.templateConfigs || {};
+        setTemplateName(templateName);
+        setTemplateId(gapitTemplateId);
+        setTemplateListParams(handleSetValues(Object.entries(listParams)));
+        setTemplatePreviewUrl(previewUrl);
+        setZaloTemplateStatus(ZALO_STATUSES.ENABLE);
+        updateTextAreaId(listParams[0]?.name);
+      }
     }
     //cleanup code
     return () => {
       actions.resetTemplateInfoData();
     };
-  }, [zaloTempId, oa_id, token, username, host]);
+  }, [zaloTempId, oa_id, token, username]);
 
   const handleSetValues = (paramsData = []) =>
     paramsData.map((paramData) => {
@@ -162,7 +169,7 @@ export const Zalo = (props) => {
     });
 
   const setDataForEdit = (setValues) => {
-    if(host === VIET_GUYS) {
+    if(senderDetails?.hostName === VIET_GUYS) {
       const {
         name = '',
         _id: zaloId = '',
@@ -185,15 +192,25 @@ export const Zalo = (props) => {
       setZaloTemplateStatus(status);
       updateTextAreaId(paramsData[0]?.name);
     } else {
-      const {_id : gapitTemplateId = ''} = templateData;
-      const data = props.gapItTemplateData.find(template => template._id == gapitTemplateId);
-      const { templateName = "", listParams = [], previewUrl = "", status = ""} = data?.versions?.base?.content?.zalo || {};
-      setTemplateName(templateName);
-      setTemplateId(gapitTemplateId);
-      setTemplateListParams(listParams);
-      setTemplatePreviewUrl(previewUrl);
-      setZaloTemplateStatus(status);
-      updateTextAreaId(listParams[0]?.name);
+      if (setValues) {
+        const { id: gapitTemplateId = '', name: templateName = '', template: previewUrl = '', varMapped: listParams = {} } = templateData?.templateConfigs || {};
+        setTemplateName(templateName);
+        setTemplateId(gapitTemplateId);
+        setTemplateListParams(handleSetValues(Object.entries(listParams)));
+        setTemplatePreviewUrl(previewUrl);
+        setZaloTemplateStatus(ZALO_STATUSES.ENABLE);
+        updateTextAreaId(listParams[0]?.name);
+      } else {
+        const { _id: gapitTemplateId = '' } = templateData;
+        let data = props.gapItTemplateData.find(template => template._id == gapitTemplateId);
+        const { templateName = "", listParams = [], previewUrl = "", status = "" } = data?.versions?.base?.content?.zalo || {};
+        setTemplateName(templateName);
+        setTemplateId(gapitTemplateId);
+        setTemplateListParams(listParams);
+        setTemplatePreviewUrl(previewUrl);
+        setZaloTemplateStatus(status);
+        updateTextAreaId(listParams[0]?.name);
+      }
     }
   };
 
@@ -397,7 +414,7 @@ export const Zalo = (props) => {
         varMapped: varMap,
       },
       token,
-      host,
+      host: senderDetails?.hostName,
     };
     return payload;
   };
@@ -435,7 +452,7 @@ export const Zalo = (props) => {
     });
 
   return (
-    <CapSpin spinning={zaloTemplateInfoStatus === REQUEST && host === VIET_GUYS}>
+    <CapSpin spinning={zaloTemplateInfoStatus === REQUEST && senderDetails?.hostName === VIET_GUYS}>
       <CapRow type="flex" className="cap-zalo-creatives">
         <CapColumn span={14}>
           {templateStatus && (

package/v2Containers/Zalo/tests/mockData.js

@@ -11462,6 +11462,9 @@ export const accountData = {
       modifiedDate: '2023-10-16T00:00:00+05:30',
     },
   },
+  senderDetails: {
+    hostName: 'vietguyszalotrans',
+  },
 };
 
 export const templateData = {
@@ -11479,3 +11482,46 @@ export const templateConfigs = {
     ma_so1: '4',
   },
 };
+
+export const mockGapItTemplateData = [
+  {
+    _id: '354701',
+    versions: {
+      base: {
+        content: {
+          zalo: {
+            templateName: 'Test',
+            listParams: [
+              {
+                name: "Name",
+                type: "STRING",
+                require: true,
+                maxLength: 80,
+                minLength: 0,
+                acceptNull: false,
+              },
+              {
+                name: "So_dien_thoai",
+                type: "STRING",
+                require: true,
+                maxLength: 30,
+                minLength: 0,
+                acceptNull: false,
+              },
+              {
+                name: "so_du",
+                type: "STRING",
+                require: true,
+                maxLength: 30,
+                minLength: 0,
+                acceptNull: false,
+              },
+            ],
+            previewUrl: 'https://account.zalo.cloud/znspreview/h84m64E6ST_owPQVFzTilg==',
+            status: 'ENABLE',
+          },
+        },
+      },
+    },
+  },
+];

package/v2Containers/Zalo/tests/selector.test.js

@@ -1,5 +1,5 @@
 import { fromJS } from "immutable";
-import { makeSelectZalo, makeSelectAccount } from "../selectors";
+import { makeSelectZalo, makeSelectAccount, makeSelectGapitTemplates } from "../selectors";
 
 describe("makeSelectZalo", () => {
   it("returns the expected object with default values when substate is empty", () => {
@@ -25,4 +25,27 @@ describe("makeSelectZalo", () => {
     // Assert
     expect(result).toEqual(expected);
   });
-});
+});
+
+describe('makeSelectGapitTemplates', () => {
+  it('should return an empty array if templates are not present', () => {
+    const state = fromJS({ templates: {} });
+    const selector = makeSelectGapitTemplates();
+    const result = selector(state);
+    expect(result).toEqual([]);
+  });
+
+  it('should return an array of templates if present', () => {
+    const state = fromJS({ templates: { templates: ['template1', 'template2'] } });
+    const selector = makeSelectGapitTemplates();
+    const result = selector(state);
+    expect(result).toEqual(['template1', 'template2']);
+  });
+
+  it('should return an empty array if templates is null', () => {
+    const state = fromJS({ templates: {} });
+    const selector = makeSelectGapitTemplates();
+    const result = selector(state);
+    expect(result).toEqual([]);
+  });
+});