@capillarytech/creatives-library 7.17.171-alpha.0 → 7.17.171

package/package.json

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

package/services/api.js

@@ -525,8 +525,8 @@ export const getS3UrlFileSizes = (data) => {
   return request(url, getAPICallObject('POST', data));
 };
 
-export const getTemplateInfoById = ({id, username, oa_id, token, host}) => {
-  const url = `${API_ENDPOINT}/templates/v1/${id}/Zalo?username=${username}&oa_id=${oa_id}&token=${token}&host=${host}`;
+export const getTemplateInfoById = ({id, username, oa_id, token}) => {
+  const url = `${API_ENDPOINT}/templates/v1/${id}/Zalo?username=${username}&oa_id=${oa_id}&token=${token}`;
   const compressedTemplatesData = request(url, getAPICallObject('GET'));
   return compressedTemplatesData.then((data) => {
     const { response = '' } = data || {};

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';
@@ -125,15 +126,18 @@ export class Creatives extends React.Component {
         configs: { token = "" } = {},
       } = get(this.props, "Templates.selectedZaloAccount", {});
       const { hostName = ''} = get(this.props, "Templates.senderDetails", {});
-      this.props.zaloActions.getTemplateInfoById({
-        username: name,
-        oa_id: sourceAccountIdentifier,
-        token,
-        host: hostName,
-        id: template?._id,
-        preview: true,
-        actionCallback: this.actionCallback,
-      });
+      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(get(template, 'versions.base.content.zalo.previewUrl'), '_blank');
+      }
     }
   };
   onEditTemplate = () => {

package/v2Containers/Templates/index.js

@@ -110,7 +110,7 @@ import {
   HOST_GUPSHUP,
 } from '../Whatsapp/constants';
 import { INAPP_LAYOUT_DETAILS } from '../InApp/constants';
-import { ZALO_STATUS_OPTIONS, ZALO_STATUSES } from '../Zalo/constants';
+import { VIET_GUYS, ZALO_STATUS_OPTIONS, ZALO_STATUSES } from '../Zalo/constants';
 import { getWhatsappContent, getWhatsappStatus, getWhatsappCategory, getWhatsappCta, getWhatsappQuickReply, getWhatsappAutoFill } from '../Whatsapp/utils';
 import { getRCSContent } from '../Rcs/utils';
 import zaloMessages from '../Zalo/messages';
@@ -706,7 +706,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
             params.oa_id = sourceAccountIdentifier;
             params.token = token;
             params.isAccountSelection = true;
-            params.host = hostName || this.state.hostName;
+            params.host = hostName;
         }
       }
 
@@ -806,8 +806,6 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
       if(this.state.channel.toLowerCase() !== ZALO_LOWERCASE) {
         queryParams.name = this.state.searchText;
         queryParams.sortBy = this.state.sortBy;
-      } else {
-        queryParams.host = this.props.Templates?.senderDetails?.hostName;
       }
       queryParams.page = this.state.page;
       queryParams.perPage = this.state.perPageLimit;
@@ -867,12 +865,11 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
         queryParams.username = name;
         queryParams.oa_id = sourceAccountIdentifier;
         queryParams.token = token;
-        queryParams.host = hostName || this.state.hostName;
+        queryParams.host = hostName;
       }
       this.setState({ page, templatesCount }, () => {
         queryParams.page = page;
         queryParams.perPage = this.state.perPageLimit;
-        queryParams.host = this.state.hostName;
         const channel = this.state.channel;
         this.props.actions.getAllTemplates(channel, queryParams, `${copyOf}`);
       });
@@ -2115,15 +2112,14 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
         sourceAccountIdentifier = "",
         configs: { token = "" } = {},
       } = get(this.props, "Templates.selectedZaloAccount", {});
-      this.props.zaloActions.getTemplateInfoById({
+      this.state.hostName === VIET_GUYS ? this.props.zaloActions.getTemplateInfoById({
         username: name,
         oa_id: sourceAccountIdentifier,
         token: token,
-        host: this.state.hostName,
         id: template?._id,
         preview: true,
         actionCallback: this.actionCallback,
-      });
+      }) : window.open(get(template, 'versions.base.content.zalo.previewUrl'), '_blank');
     }
   }
 

package/v2Containers/TemplatesV2/index.js

@@ -21,6 +21,7 @@ import messages from './messages';
 import * as actions from './actions';
 import * as templateActions from '../Templates/actions';
 import Templates from '../Templates';
+import * as commonUtil from '../../utils/common';
 import CallTask from '../CallTask';
 import Facebook from '../Facebook';
 import Viber from '../Viber';
@@ -60,7 +61,6 @@ export class TemplatesV2 extends React.Component { // eslint-disable-line react/
       sms: {content: <></>, tab: intl.formatMessage(messages.sms), key: 'sms'},
       rcs: { content: <></>, tab: intl.formatMessage(messages.rcs), key: RCS },
       email: {content: <></>, tab: intl.formatMessage(messages.email), key: 'email'},
-      weChat: {content: <></>, tab: intl.formatMessage(messages.wechat), key: 'wechat'},
       //'wechat': {content: this.getTemplatesComponent('wechat'), tab: 'Wechat', key: 'wechat'},
       mPush: {content: <></>, tab: intl.formatMessage(messages.pushNotification), key: 'mobilepush'},
       inApp: { content: <div></div>, tab: intl.formatMessage(messages.inapp), key: INAPP },
@@ -70,6 +70,15 @@ export class TemplatesV2 extends React.Component { // eslint-disable-line react/
       whatsapp: { content: <></>, tab: intl.formatMessage(messages.whatsapp), key: WHATSAPP },
       zalo: { content: <div></div>, tab: intl.formatMessage(messages.zalo), key: ZALO },
     };
+    //Hiding we chat for all orgs across UI for now and enabling it based on feature 'ENABLE_WECHAT'
+
+    if (commonUtil.hasWechatFeatureEnabled()) {
+      defaultPanes.weChat = {
+        content: <></>,
+        tab: intl.formatMessage(messages.wechat),
+        key: 'wechat',
+      };
+    }
     let filteredPanes = Object.keys(defaultPanes)
       .filter((key) => !channelsToHide.includes(key)).reduce((obj = [], key) => {
         obj.push(defaultPanes[key]);
@@ -153,7 +162,7 @@ export class TemplatesV2 extends React.Component { // eslint-disable-line react/
     if (queryItems.channel === WHATSAPP) {
       this.channelChange(WHATSAPP);
     }
-    if(this.props?.isFullMode){
+    if (this.props?.isFullMode) {
       this.props.templateActions.getCdnTransformationConfig();
     }
   }

package/v2Containers/TemplatesV2/tests/index.test.js

@@ -91,7 +91,8 @@ describe("Test TemplatesV2", () => {
     expect(getByText('Email')).toBeInTheDocument();
     expect(getByText('Push notification')).toBeInTheDocument();
     expect(getByText('Line')).toBeInTheDocument();
-    expect(getByText('Wechat')).toBeInTheDocument();
+    //commented for removing wechat in tab
+    // expect(getByText('Wechat')).toBeInTheDocument();
     expect(getByText('Viber')).toBeInTheDocument();
     expect(getByText('Facebook')).toBeInTheDocument();
     expect(getByText('WhatsApp')).toBeInTheDocument();

package/v2Containers/Zalo/constants.js

@@ -18,6 +18,7 @@ export const LIBRARY = 'library';
 export const FULL = 'full';
 export const ALL = 'all';
 export const OUTBOUND = 'outbound';
+export const VIET_GUYS = 'vietguyszalotrans';
 
 const prefix = 'app/v2Containers/Zalo';
 export const ZALO_TEMPLATE_INFO_REQUEST = `${prefix}/ZALO_TEMPLATE_INFO_REQUEST`;

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';
@@ -23,7 +23,7 @@ import {
   CAP_SPACE_32,
   CAP_WHITE,
 } from '@capillarytech/cap-ui-library/styled/variables';
-import { makeSelectZalo, makeSelectAccount } from './selectors';
+import { makeSelectZalo, makeSelectAccount, makeSelectGapitTemplates } from './selectors';
 import { makeSelectMetaEntities, setInjectedTags } from '../Cap/selectors';
 import * as zaloActions from './actions';
 import './index.scss';
@@ -40,6 +40,7 @@ import {
   ERROR_ALERT,
   WARNING_ALERT,
   ZALO_STATUSES,
+  VIET_GUYS,
 } from './constants';
 import { SMS, ZALO } from '../CreativesContainer/constants';
 import messages from './messages';
@@ -65,6 +66,7 @@ export const Zalo = (props) => {
     injectedTags,
     getFormData,
     selectedOfferDetails,
+    gapItTemplateData,
   } = props || {};
   const {hostName = ''} = senderDetails;
   const { formatMessage } = intl;
@@ -73,11 +75,21 @@ export const Zalo = (props) => {
   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 } =
@@ -118,25 +130,44 @@ export const Zalo = (props) => {
       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 && hostName) {
+    if (zaloTempId && oa_id && token && username && hostName === VIET_GUYS) {
       actions.getTemplateInfoById({
         username,
         oa_id,
         token,
-        host: hostName,
         id: zaloTempId,
         actionCallback,
       });
+    } 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 || {};
+        updateTemplateData(gapitTemplateId, templateName, listParams, previewUrl, ZALO_STATUSES.ENABLE);
+      }
     }
     //cleanup code
     return () => {
       actions.resetTemplateInfoData();
     };
-  }, [zaloTempId, oa_id, token, username, hostName]);
+  }, [zaloTempId, oa_id, token, username]);
 
   const handleSetValues = (paramsData = []) =>
     paramsData?.map((paramData) => {
@@ -149,27 +180,36 @@ export const Zalo = (props) => {
     });
 
   const setDataForEdit = (setValues) => {
-    const {
-      name = '',
-      _id: zaloId = '',
-      versions: {
-        base: {
-          content: {
-            zalo: {
-              listParams: paramsData = [],
-              previewUrl = '',
-              status = '',
+    if(hostName === VIET_GUYS) {
+      const {
+        name = '',
+        _id: zaloId = '',
+        versions: {
+          base: {
+            content: {
+              zalo: {
+                listParams: paramsData = [],
+                previewUrl = '',
+                status = '',
+              } = {},
             } = {},
           } = {},
         } = {},
-      } = {},
-    } = zaloTemplateInfoValue;
-    setTemplateName(name);
-    setTemplateId(zaloId);
-    setTemplateListParams(setValues ? handleSetValues(paramsData) : paramsData);
-    setTemplatePreviewUrl(previewUrl);
-    setZaloTemplateStatus(status);
-    updateTextAreaId(paramsData[0]?.name);
+      } = zaloTemplateInfoValue;
+      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 || {};
+        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);
+      }
+    }
   };
 
   useEffect(() => {
@@ -353,12 +393,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,
@@ -373,6 +417,7 @@ export const Zalo = (props) => {
         varMapped: varMap,
       },
       token,
+      host: hostName,
     };
     return payload;
   };
@@ -410,7 +455,7 @@ export const Zalo = (props) => {
     });
 
   return (
-    <CapSpin spinning={zaloTemplateInfoStatus === REQUEST}>
+    <CapSpin spinning={zaloTemplateInfoStatus === REQUEST && hostName === VIET_GUYS}>
       <CapRow type="flex" className="cap-zalo-creatives">
         <CapColumn span={14}>
           {templateStatus && (
@@ -488,6 +533,7 @@ const mapStateToProps = createStructuredSelector({
   accountData: makeSelectAccount(),
   metaEntities: makeSelectMetaEntities(),
   injectedTags: setInjectedTags(),
+  gapItTemplateData: makeSelectGapitTemplates(),
 });
 
 const mapDispatchToProps = (dispatch) => ({

package/v2Containers/Zalo/selectors.js

@@ -9,4 +9,11 @@ const makeSelectZalo = () =>
 const makeSelectAccount = () =>
   createSelector(selectAccountDomain(), (substate) => substate && substate.toJS());
 
-export { makeSelectZalo, makeSelectAccount};
+const makeSelectGapitTemplates = () =>
+  createSelector(selectAccountDomain(), (substate) => {
+    const getAllTemplates = substate && substate.toJS();
+    const { templates = []} = getAllTemplates;
+    return templates;
+  });
+
+export { makeSelectZalo, makeSelectAccount, makeSelectGapitTemplates };

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

@@ -1,11 +1,11 @@
 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", () => {
     // Arrange
     const state = fromJS({ zalo: {} });
-    const expected = {};
+    const expected = {}
     const selector = makeSelectZalo();
 
     // Act
@@ -17,7 +17,7 @@ describe("makeSelectZalo", () => {
   it("returns the expected object with default values when substate is empty for makeSelectAccount", () => {
     // Arrange
     const state = fromJS({ templates: {} });
-    const expected = {};
+    const expected = {}
     const selector = makeSelectAccount();
 
     // Act
@@ -26,3 +26,26 @@ describe("makeSelectZalo", () => {
     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([]);
+  });
+});