@capillarytech/creatives-library 7.17.169-alpha.1 → 7.17.169-alpha.3

package/package.json

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

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

@@ -4,7 +4,7 @@ import React, { useState, useEffect } from 'react';
 import { bindActionCreators } from 'redux';
 import { createStructuredSelector } from 'reselect';
 import { injectIntl, FormattedMessage } from 'react-intl';
-import { get, isEmpty } from 'lodash';
+import { get, isEmpty, update } from 'lodash';
 import styled from 'styled-components';
 import CapSpin from '@capillarytech/cap-ui-library/CapSpin';
 import CapRow from '@capillarytech/cap-ui-library/CapRow';
@@ -66,21 +66,23 @@ export const Zalo = (props) => {
     injectedTags,
     getFormData,
     selectedOfferDetails,
+    gapItTemplateData,
   } = props || {};
+  const {hostName = ''} = senderDetails;
   const { formatMessage } = intl;
   const [oa_id, setOaId] = useState('');
   const [token, setToken] = useState('');
   const [username, setUsername] = useState('');
   const [templateName, setTemplateName] = useState('');
   const [templateId, setTemplateId] = useState('');
-  const [templateListParams, setTemplateListParams] = useState([]);
+  const [templateListParams, setTemplateListParams] = useState(templateData?.versions?.base?.content?.zalo?.listParams || ((hostName === VIET_GUYS &&  templateData?.templateConfigs?.varMapped ? Object.entries(templateData?.templateConfigs?.varMapped) : templateData?.templateConfigs?.varMapped) ?? []) || []);
   const [templatePreviewUrl, setTemplatePreviewUrl] = useState('');
   const [templateStatus, setZaloTemplateStatus] = useState(
     ZALO_STATUSES.ENABLE,
   );
+  const [gapitAllTemplateData, setGapitAllTemplateData] = useState([]);
   const [tags, updateTags] = useState([]);
   const [textAreaId, updateTextAreaId] = useState('');
-  const [host, setHost] = useState('');
   const { zaloTemplateInfoValue = {}, zaloTemplateInfoStatus = REQUEST } =
     editData;
   const {
@@ -114,18 +116,26 @@ export const Zalo = (props) => {
         configs: { token: accessToken = '' } = {},
         name = '',
       } = selectedZaloAccount;
-      const {hostName = ''} = senderDetails;
       const oaId = getDefaultTags === OUTBOUND ? zaloAccountId : accountId;
       setOaId(sourceAccountIdentifier || oaId);
       setToken(accessToken || zaloToken);
       setUsername(name || accountName);
-      setHost(hostName);
     }
-  }, [selectedZaloAccount, templateData]);
+    setGapitAllTemplateData(gapItTemplateData);
+  }, [selectedZaloAccount, templateData, gapItTemplateData]);
+
+  const updateTemplateData = (gapitTemplateId, templateName, listParams, previewUrl, status) => {
+    setTemplateName(templateName);
+    setTemplateId(gapitTemplateId);
+    setTemplateListParams(listParams);
+    setTemplatePreviewUrl(previewUrl);
+    setZaloTemplateStatus(status);
+    updateTextAreaId(listParams[0]?.name);
+  };
 
   //gets template details
   useEffect(() => {
-    if (zaloTempId && oa_id && token && username && host === VIET_GUYS) {
+    if (zaloTempId && oa_id && token && username && hostName === VIET_GUYS) {
       actions.getTemplateInfoById({
         username,
         oa_id,
@@ -133,26 +143,26 @@ export const Zalo = (props) => {
         id: zaloTempId,
         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);
+    } else if (hostName !== VIET_GUYS) {
+      const { _id: gapitTemplateId = '' } = templateData;
+      if (gapitTemplateId) {
+        const data = gapitAllTemplateData.find(template => template._id == gapitTemplateId);
+        const { templateName = "", listParams = [], previewUrl = "", status = "" } = data?.versions?.base?.content?.zalo || {};
+        updateTemplateData(gapitTemplateId, templateName, listParams, previewUrl, status);
+      } else {
+        const { id: gapitTemplateId = '', name: templateName = '', template: previewUrl = '', varMapped: listParams = {} } = templateData?.templateConfigs || {};
+        const handledListParams = handleSetValues(Object.entries(listParams));
+        updateTemplateData(gapitTemplateId, templateName, handledListParams, previewUrl, ZALO_STATUSES.ENABLE);
+      }
     }
     //cleanup code
     return () => {
       actions.resetTemplateInfoData();
     };
-  }, [zaloTempId, oa_id, token, username, host]);
+  }, [zaloTempId, oa_id, token, username]);
 
   const handleSetValues = (paramsData = []) =>
-    paramsData.map((paramData) => {
+    paramsData?.map((paramData) => {
       for (const key in varMapped) {
         if (paramData?.name === key) {
           paramData.value = varMapped[key];
@@ -162,7 +172,7 @@ export const Zalo = (props) => {
     });
 
   const setDataForEdit = (setValues) => {
-    if(host === VIET_GUYS) {
+    if(senderDetails?.hostName === VIET_GUYS) {
       const {
         name = '',
         _id: zaloId = '',
@@ -178,22 +188,19 @@ export const Zalo = (props) => {
           } = {},
         } = {},
       } = zaloTemplateInfoValue;
-      setTemplateName(name);
-      setTemplateId(zaloId);
-      setTemplateListParams(setValues ? handleSetValues(paramsData) : paramsData);
-      setTemplatePreviewUrl(previewUrl);
-      setZaloTemplateStatus(status);
-      updateTextAreaId(paramsData[0]?.name);
+      const handledListParams = setValues ? handleSetValues(paramsData) : paramsData;
+      updateTemplateData(zaloId, name, handledListParams, previewUrl, status);
     } 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 || {};
+        const handledListParams = handleSetValues(listParams);
+        updateTemplateData(gapitTemplateId, templateName, handledListParams, previewUrl, ZALO_STATUSES.ENABLE);
+      } else {
+        const { _id: gapitTemplateId = '' } = templateData;
+        let data = gapitAllTemplateData.find(template => template._id == gapitTemplateId);
+        const { templateName = "", listParams = [], previewUrl = "", status = "" } = data?.versions?.base?.content?.zalo || {};
+        updateTemplateData(gapitTemplateId, templateName, listParams, previewUrl, status);
+      }
     }
   };
 
@@ -366,7 +373,7 @@ export const Zalo = (props) => {
 
   const isEditDoneDisabled = () => {
     let disableCheck = false;
-    templateListParams.forEach((listParams) => {
+    templateListParams?.forEach((listParams) => {
       const { error, value } = listParams;
       const errorMessage = !error
         ? handleErrorValidation(value, listParams)
@@ -378,11 +385,16 @@ export const Zalo = (props) => {
     return disableCheck;
   };
   const createPayload = () => {
-    const varMap = {};
-    templateListParams.forEach((listParam) => {
-      const { name, value } = listParam;
-      varMap[name] = value;
-    });
+    let varMap = {};
+    if (hostName !== VIET_GUYS) {
+      varMap = templateListParams;
+    } else {
+      templateListParams?.forEach((listParam) => {
+        const { name, value } = listParam;
+        varMap[name] = value;
+      }
+      );
+    }
     const payload = {
       channel: ZALO,
       accountId: oa_id,
@@ -397,7 +409,7 @@ export const Zalo = (props) => {
         varMapped: varMap,
       },
       token,
-      host,
+      host: hostName,
     };
     return payload;
   };
@@ -435,7 +447,7 @@ export const Zalo = (props) => {
     });
 
   return (
-    <CapSpin spinning={zaloTemplateInfoStatus === REQUEST && host === VIET_GUYS}>
+    <CapSpin spinning={zaloTemplateInfoStatus === REQUEST && 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([]);
+  });
+});