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

package/package.json

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

package/v2Containers/CreativesContainer/index.js

@@ -125,7 +125,7 @@ export class Creatives extends React.Component {
         sourceAccountIdentifier = "",
         configs: { token = "" } = {},
       } = get(this.props, "Templates.selectedZaloAccount", {});
-      const { hostName = ''} = this.props.Templates.senderDetails || {};
+      const { hostName = ''} = get(this.props, "Templates.senderDetails", {});
       if (hostName === VIET_GUYS) {
         this.props.zaloActions.getTemplateInfoById({
           username: name,
@@ -136,7 +136,7 @@ export class Creatives extends React.Component {
           actionCallback: this.actionCallback,
         });
       } else {
-        window.open(template?.versions?.base?.content?.zalo?.previewUrl, '_blank');
+        window.open(get(template, 'versions.base.content.zalo.previewUrl'), '_blank');
       }
     }
   };

package/v2Containers/Templates/index.js

@@ -2119,7 +2119,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
         id: template?._id,
         preview: true,
         actionCallback: this.actionCallback,
-      }) : window.open(template?.versions?.base?.content?.zalo?.previewUrl, '_blank');
+      }) : window.open(get(template, 'versions.base.content.zalo.previewUrl'), '_blank');
     }
   }
 

package/v2Containers/Templates/sagas.js

@@ -1,3 +1,4 @@
+import get from 'lodash/get';
 import { call, put, takeLatest, take, cancel, select } from 'redux-saga/effects';
 import { LOCATION_CHANGE } from 'react-router-redux';
 // import { schema, normalize } from 'normalizr';
@@ -176,7 +177,7 @@ export function* getSenderDetails({
     if (!apiResponse?.errors?.length) {
       yield put({
         type: types.GET_SENDER_DETAILS_SUCCESS,
-        payload: apiResponse?.entity?.[channel][0]?.domainProperties?.hostName || '',
+        payload: get(apiResponse, `entity.${channel}[0].domainProperties.hostName`, ''),
       });
     } else {
       yield put({

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,18 +66,30 @@ 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([]);
+// Initialize the state for templateListParams based on the nested properties of templateData.
+// If templateData.versions.base.content.zalo.listParams is available, use it.
+// Otherwise, if hostName is VIET_GUYS and templateData.templateConfigs.varMapped is available,
+// convert it to an array of entries. If not, use templateData.templateConfigs.varMapped or an empty array.
+  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 { zaloTemplateInfoValue = {}, zaloTemplateInfoStatus = REQUEST } =
@@ -113,17 +125,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);
     }
-  }, [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 && senderDetails?.hostName === VIET_GUYS) {
+    if (zaloTempId && oa_id && token && username && hostName === VIET_GUYS) {
       actions.getTemplateInfoById({
         username,
         oa_id,
@@ -131,25 +152,16 @@ export const Zalo = (props) => {
         id: zaloTempId,
         actionCallback,
       });
-    } else {
+    } else if (hostName !== VIET_GUYS) {
       const { _id: gapitTemplateId = '' } = templateData;
-      if (gapitTemplateId && senderDetails?.hostName !== VIET_GUYS) {
-        const data = props.gapItTemplateData.find(template => template._id == gapitTemplateId);
+      if (gapitTemplateId) {
+        const data = gapitAllTemplateData.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);
+        updateTemplateData(gapitTemplateId, templateName, listParams, previewUrl, status);
       } 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);
+        const handledListParams = handleSetValues(Object.entries(listParams));
+        updateTemplateData(gapitTemplateId, templateName, handledListParams, previewUrl, ZALO_STATUSES.ENABLE);
       }
     }
     //cleanup code
@@ -159,7 +171,7 @@ export const Zalo = (props) => {
   }, [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];
@@ -169,7 +181,7 @@ export const Zalo = (props) => {
     });
 
   const setDataForEdit = (setValues) => {
-    if(senderDetails?.hostName === VIET_GUYS) {
+    if(hostName === VIET_GUYS) {
       const {
         name = '',
         _id: zaloId = '',
@@ -185,31 +197,18 @@ 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 {
       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);
+        const handledListParams = handleSetValues(listParams);
+        updateTemplateData(gapitTemplateId, templateName, handledListParams, previewUrl, ZALO_STATUSES.ENABLE);
       } else {
         const { _id: gapitTemplateId = '' } = templateData;
-        let data = props.gapItTemplateData.find(template => template._id == gapitTemplateId);
+        let data = gapitAllTemplateData?.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);
+        updateTemplateData(gapitTemplateId, templateName, listParams, previewUrl, status);
       }
     }
   };
@@ -383,7 +382,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)
@@ -395,11 +394,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,
@@ -414,7 +418,7 @@ export const Zalo = (props) => {
         varMapped: varMap,
       },
       token,
-      host: senderDetails?.hostName,
+      host: hostName,
     };
     return payload;
   };
@@ -452,7 +456,7 @@ export const Zalo = (props) => {
     });
 
   return (
-    <CapSpin spinning={zaloTemplateInfoStatus === REQUEST && senderDetails?.hostName === VIET_GUYS}>
+    <CapSpin spinning={zaloTemplateInfoStatus === REQUEST && hostName === VIET_GUYS}>
       <CapRow type="flex" className="cap-zalo-creatives">
         <CapColumn span={14}>
           {templateStatus && (