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

package/package.json

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

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,21 @@ 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 { zaloTemplateInfoValue = {}, zaloTemplateInfoStatus = REQUEST } =
@@ -113,17 +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);
     }
-  }, [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 +143,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 +162,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];
@@ -185,31 +188,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 +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)
@@ -395,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,
@@ -414,7 +409,7 @@ export const Zalo = (props) => {
         varMapped: varMap,
       },
       token,
-      host: senderDetails?.hostName,
+      host: hostName,
     };
     return payload;
   };
@@ -452,7 +447,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 && (