@capillarytech/creatives-library 7.17.35 → 7.17.37-alpha.0

package/v2Containers/Templates/index.js

@@ -48,6 +48,7 @@ import {
   CapModal,
   CapInfoNote,
   CapImage,
+  CapStatus,
 } from '@capillarytech/cap-ui-library';
 import { makeSelectTemplates, makeSelectTemplatesResponse } from './selectors';
 import { makeSelectCreate as makeSelectCreateSms} from '../Sms/Create/selectors';
@@ -57,6 +58,7 @@ import { makeSelectEmail as makeSelectCreateEmail } from '../Email/selectors';
 import { makeSelectEdit } from '../Sms/Edit/selectors';
 import { makeSelectLine } from '../Line/Container/selectors';
 import { makeSelectViber } from '../Viber/selectors';
+import { makeSelectZalo } from '../Zalo/selectors';
 import { UserIsAuthenticated } from '../../utils/authWrapper';
 import { getObjFromQueryParams } from '../../utils/v2common';
 import messages from './messages';
@@ -72,6 +74,7 @@ import * as viberActions from '../Viber/actions';
 import * as facebookActions from '../Facebook/actions';
 import * as whatsappActions from '../Whatsapp/actions';
 import * as rcsActions from '../Rcs/actions';
+import * as zaloActions from '../Zalo/actions';
 import CardGrid from '../../v2Components/CardGrid';
 import config from '../../config/app';
 import './_templates.scss';
@@ -102,10 +105,12 @@ import {
   HOST_TWILIO,
   HOST_GUPSHUP,
 } from '../Whatsapp/constants';
+import { ZALO_STATUS_OPTIONS, ZALO_STATUSES } from '../Zalo/constants';
 import { getWhatsappContent, getWhatsappStatus, getWhatsappCategory, getWhatsappCta } from '../Whatsapp/utils';
 import { getRCSContent } from '../Rcs/utils';
+import zaloMessages from '../Zalo/messages'
 
-import { MOBILE_PUSH, WECHAT, SMS, EMAIL, EBILL, LINE, VIBER, FACEBOOK, WHATSAPP, RCS } from '../CreativesContainer/constants';
+import { MOBILE_PUSH, WECHAT, SMS, EMAIL, EBILL, LINE, VIBER, FACEBOOK, WHATSAPP, RCS, ZALO } from '../CreativesContainer/constants';
 
 import {CREATIVE} from '../Facebook/constants';
 import videoPlay from '../../assets/videoPlay.svg';
@@ -114,6 +119,7 @@ import smsIllustration from '../Assets/images/smsIllustration.svg';
 import pushIllustration from '../Assets/images/pushIllustration.svg';
 import whatsappIllustration from '../Assets/images/whatsappIllustration.png';
 import rcsIllustration from '../Assets/images/rcsIllustration.png';
+import zaloillustration from '@capillarytech/cap-ui-library/assets/images/featureUiNotEnabledIllustration.svg';
 
 import { CAP_SPACE_16 } from '@capillarytech/cap-ui-library/styled/variables';
 import { GA } from '@capillarytech/cap-ui-utils';
@@ -159,6 +165,8 @@ const SMS_LOWERCASE = SMS.toLowerCase();
 const MOBILE_PUSH_LOWERCASE = MOBILE_PUSH.toLowerCase();
 const EBILL_LOWERCASE = EBILL.toLowerCase();
 const LINE_LOWERCASE = LINE.toLowerCase();
+const ZALO_LOWERCASE = ZALO.toLowerCase();
+const WECHAT_LOWERCASE = WECHAT.toLowerCase();
 const duplicateEnum = {
   sms: "smsActions",
   line: "lineActions",
@@ -196,7 +204,10 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
       smsFilter: SMS_FILTERS.ALL,
       selectedWhatsappStatus: '',
       selectedWhatsappCategory: '',
+      selectedZaloStatus: '',
       hostName: '',
+      searchedZaloTemplates: [],
+      searchingZaloTemplate: false,
     };
 
     this.handleOnHoverItem = this.handleOnHoverItem.bind(this);
@@ -274,6 +285,11 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
         case RCS:
           channel = 'Rcs';
           break;
+        case ZALO:
+          channel = 'Zalo';
+          activeMode = ACCOUNT_SELECTION_MODE;
+          this.props.actions.getWeCrmAccounts(channel);
+          break;
         default:
           channel = '';
       }
@@ -544,9 +560,9 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
         return;
       }
       this.setState({routeParams: {
-        pathname: `/${(nextProps.route.name || '').toLowerCase()}/create`,
-        query: type === 'embedded' ? {type: 'embedded', module, isLanguageSupport, isEdmSupport} : {module},
-      }});
+          pathname: `/${(nextProps.route.name || '').toLowerCase()}/create`,
+          query: type === 'embedded' ? { type: 'embedded', module, isLanguageSupport, isEdmSupport } : { module },
+        }});
     }
 
     if (!nextProps.Templates.sendingFile && !isEqual(this.props.Templates.sendingFile, nextProps.Templates.sendingFile) && nextProps.Templates.errorSendingFile) {
@@ -558,35 +574,56 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
     }
 
     if (!isEmpty(nextProps.Templates.templateDetails) && !isEqual(nextProps.Templates.templateDetails, this.props.Templates.templateDetails)) {
-      this.setState({previewTemplate: nextProps.Templates.templateDetails});
+      this.setState({ previewTemplate: nextProps.Templates.templateDetails });
     }
     const { weCrmAccounts: weCrmAccountsList = [], senderDetails: { hostName = '' } = {} } = get(nextProps, 'Templates', {});
-    const weCrmChannels = ['wechat', WHATSAPP_LOWERCASE];
+    const weCrmChannels = ['wechat', WHATSAPP_LOWERCASE, ZALO_LOWERCASE];
 
     if (weCrmAccountsList.length === 1 && this.state.defaultAccount && (weCrmChannels.indexOf(selectedChannel) > -1)) {
-      const paramsDefault = {
-        name: this.state.searchText,
-        sortBy: this.state.sortBy,
-      };
+      let paramsDefault = {};
+      if (this.state.channel.toLowerCase() !== ZALO_LOWERCASE) {
+        paramsDefault = {
+          name: this.state.searchText,
+          sortBy: this.state.sortBy,
+        };
+      }
+
+      const {name, sourceAccountIdentifier, configs: {
+        token,
+        wecrm_app_id,
+        wecrm_token
+      } } = weCrmAccountsList?.[0];
       if (weCrmChannels.includes(selectedChannel)) {
-        if ([WHATSAPP_LOWERCASE].includes(selectedChannel)) {
-          if (hostName === '') {
-            return;
+          if ([WHATSAPP_LOWERCASE].includes(selectedChannel)) {
+            if (hostName === '') {
+              return;
+            }
+
+            weCrmAccountsList[0].hostName = hostName;
+            nextProps.actions.setChannelAccount(selectedChannel.toUpperCase(), weCrmAccountsList[0]);
+          } else if ([ZALO_LOWERCASE].includes(selectedChannel)) {
+            nextProps.actions.setChannelAccount(selectedChannel.toUpperCase(), weCrmAccountsList[0]);
+            paramsDefault.username = name;
+            paramsDefault.oa_id = sourceAccountIdentifier;
+            paramsDefault.token = token;
+          } else {
+            paramsDefault.wecrmId = wecrm_app_id;
+            paramsDefault.wecrmToken = wecrm_token;
+            paramsDefault.originalId = sourceAccountIdentifier;
+            nextProps.actions.setWeChatAccount(
+              weCrmAccountsList[0],
+            );
           }
-          weCrmAccountsList[0].hostName = hostName;
-          nextProps.actions.setChannelAccount(selectedChannel.toUpperCase(), weCrmAccountsList[0]);
-        } else {
-          paramsDefault.wecrmId = weCrmAccountsList[0].configs.wecrm_app_id;
-          paramsDefault.wecrmToken = weCrmAccountsList[0].configs.wecrm_token;
-          paramsDefault.originalId = weCrmAccountsList[0].sourceAccountIdentifier;
-          nextProps.actions.setWeChatAccount(
-            weCrmAccountsList[0],
-          );
-        }
+        
       }
       this.setState({ defaultAccount: false, activeMode: TEMPLATES_MODE, selectedAccount: weCrmAccountsList[0].name, hostName });
       this.getAllTemplates({params: paramsDefault}, true);
     }
+    const zaloPreviewUrl = get(nextProps, 'Zalo.zaloTemplatePreviewData.versions.base.content.zalo.previewUrl', '');
+    if (zaloPreviewUrl && this.state.channel.toLowerCase() === ZALO_LOWERCASE) {
+        window.open(zaloPreviewUrl, '_blank');
+        this.props.zaloActions.resetTemplateInfoData();
+    }
   }
 
   componentWillUnmount() {
@@ -621,7 +658,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
           this.props.actions.resetTemplate();
           return;
         } else {
-          this.setState({selectedAccountError: false});
+          this.setState({ selectedAccountError: false });
         }
       } else if ([LINE.toLowerCase(), RCS_LOWERCASE].includes(selectedChannel)) {
         this.props.actions.setChannelAccount(selectedChannel?.toUpperCase(), this.props.Templates.weCrmAccounts.find((item) => item.name === this.state.selectedAccount));
@@ -674,6 +711,10 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
             creativesParams.whatsappTemplateName = name;
             creativesParams.whatsappTemplateCategory = get(versions, `base.content.whatsapp.category`, '');
             creativesParams.whatsappTemplateLanguageCode = get(versions, `base.content.whatsapp.languages[0].language`, '');
+          } else if (this.state.channel.toLocaleLowerCase() === ZALO_LOWERCASE) {
+            const zaloSelectedTemplateData = this.selectTemplate(parseInt(creativesParams._id, 10)) || {};
+            const { name = '' } = zaloSelectedTemplateData;
+            creativesParams.name = name
           }
         }
         creativesParams.type = this.state.channel.toUpperCase();
@@ -715,8 +756,10 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
       queryParams.traiEnable = true;
     }
     if (resetTemplates) {
-      queryParams.name = this.state.searchText;
-      queryParams.sortBy = this.state.sortBy;
+      if(this.state.channel.toLowerCase() !== ZALO_LOWERCASE) {
+        queryParams.name = this.state.searchText;
+        queryParams.sortBy = this.state.sortBy;
+      }
       queryParams.page = this.state.page;
       queryParams.perPage = this.state.perPageLimit;
       if (this.state.channel.toLowerCase() === 'wechat' && !isEmpty(this.props.Templates.selectedWeChatAccount)) {
@@ -736,27 +779,34 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
         templatesCount = 0;
       }
       if (!params || isEmpty(params)) {
-        queryParams = {
-          name: this.state.searchText,
-          sortBy: this.state.sortBy,
-        };
-        if (this.state.channel.toLowerCase() === 'wechat' && !isEmpty(this.props.Templates.selectedWeChatAccount)) {
+        if (this.state.channel.toLowerCase() !== ZALO_LOWERCASE) {
+          queryParams = {
+            name: this.state.searchText,
+            sortBy: this.state.sortBy,
+          };
+        }
+
+        if (this.state.channel.toLowerCase() === WECHAT_LOWERCASE && !isEmpty(this.props.Templates.selectedWeChatAccount)) {
           queryParams.wecrmId = this.props.Templates.selectedWeChatAccount.configs.wecrm_app_id;
           queryParams.wecrmToken = this.props.Templates.selectedWeChatAccount.configs.wecrm_token;
           queryParams.originalId = this.props.Templates.selectedWeChatAccount.sourceAccountIdentifier;
         }
-        if (this.state.channel.toLowerCase() === "mobilepush" && !isEmpty(this.props.Templates.selectedWeChatAccount)) {
+        if (this.state.channel.toLowerCase() === MOBILE_PUSH_LOWERCASE && !isEmpty(this.props.Templates.selectedWeChatAccount)) {
           queryParams.accountId = this.props.Templates.selectedWeChatAccount.id;
           if (this.state.mode) {
             queryParams.mode = this.state.mode.toLowerCase();
           }
         }
       }
-      if ((this.state.channel || '').toLowerCase() === "sms" && isTraiDltFeature) {
+      if ((this.state.channel || '').toLowerCase() === SMS_LOWERCASE && isTraiDltFeature) {
         queryParams.traiEnable = true;
       }
-
-      this.setState({page, templatesCount}, () => {
+      if (this.state.channel.toLowerCase() === ZALO_LOWERCASE) {
+        queryParams.username = this.props.Templates?.weCrmAccounts[0]?.name;
+        queryParams.oa_id = this.props.Templates?.weCrmAccounts[0]?.sourceAccountIdentifier;
+        queryParams.token = this.props.Templates?.weCrmAccounts[0]?.configs?.token;
+      }
+      this.setState({ page, templatesCount }, () => {
         queryParams.page = page;
         queryParams.perPage = this.state.perPageLimit;
         const channel = this.state.channel;
@@ -818,6 +868,15 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
     });
   }
 
+  filterZaloTemplates = (templates) => {
+    let { selectedZaloStatus } = this.state;
+    selectedZaloStatus = !this.props.isFullMode ? ZALO_STATUSES.ENABLE : selectedZaloStatus;
+    if (selectedZaloStatus) {
+      return templates?.filter((template) => template?.versions?.base?.content?.zalo?.status === selectedZaloStatus);
+    }
+    return templates;
+  }
+
   filterSMSTemplates = (templates) => {
     const { smsFilter } = this.state;
     if (SMS_FILTERS.ALL === smsFilter) {
@@ -827,13 +886,13 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
   }
 
   getCreativesEditText = (channel) => {
-    if (channel === WHATSAPP_LOWERCASE) {
-      return messages.whatsappOverview;
+    if ([WHATSAPP_LOWERCASE, ZALO_LOWERCASE].includes(channel)) {
+      return messages.overview;
     }
     return messages.creativesTemplatesEdit;
   }
 
-  whatsappIllustrationText = (title, desc) =>
+  whatsappZaloIllustrationText = (title, desc) =>
     <CapHeader
       title={
         <CapHeading type="h3" className="channel-specific-illustration-text">
@@ -890,6 +949,9 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
         filteredTemplates = this.filterSMSTemplates(templates);
         isTraiDltFeature = this.checkDLTfeatureEnable();
         break;
+      case ZALO:
+        filteredTemplates = this.filterZaloTemplates(templates);
+        break;
       default:
         break;
     }
@@ -906,16 +968,17 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
           key: `${currentChannel}-card-${template?.name}`,
           title: <span title={template?.name} >{template?.name}</span>,
           extra: [
-            <CapIcon
-              className={`view-${channelLowerCase}`}
-              style={{marginRight: '16px'}}
-              type="eye"
-              onClick={() => { if (!this.props.isFullMode || this.props.isDltFromRcs) { this.props.handlePeviewTemplate(template); } else { handlers.handlePreviewClick(template); } }}
-              />,
+            <CapTooltip title={this.state.channel.toLowerCase() === ZALO_LOWERCASE ? this.props.intl.formatMessage(messages.zaloPreview) : ''}>
+              <CapIcon
+                className={`view-${channelLowerCase}`}
+                style={{ marginRight: '16px' }}
+                type="eye"
+                onClick={() => { if (!this.props.isFullMode || this.props.isDltFromRcs) { this.props.handlePeviewTemplate(template); } else { handlers.handlePreviewClick(template); } }}
+              />
+            </CapTooltip>,
           ],
           hoverOption: <CapButton className={this.props.isFullMode ? `edit-${channelLowerCase}` : `select-${channelLowerCase}`} onClick={(e) => handlers.handleEditClick(e, template, undefined, undefined, {account: this.state.selectedAccount})}>{hoverButtonText}</CapButton>,
         };
-
       const {
         versions: {
           base: {
@@ -943,7 +1006,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
             </CapMenu>
       }
     >
-          <CapIcon type="more" />
+          {this.state.channel.toLowerCase() === ZALO_LOWERCASE ? <></> : <CapIcon type="more" />}
         </CapDropdown>);
       }
       switch (currentChannel) {
@@ -1070,9 +1133,9 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
                 imageURL = '',
                 buttonURL = '',
                 buttonText = '',
-                } = {},
               } = {},
-            } = template.versions.base;
+            } = {},
+          } = template.versions.base;
           templateData.content = text;
           if (imageURL) {
             templateData.url = imageURL;
@@ -1126,6 +1189,43 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
           templateData.content = getRCSContent(template);
           break;
         }
+        case ZALO: {
+          const {
+            versions: {
+              base: {
+                content: {
+                  zalo: { templateId = "", status = "" } = {},
+                } = {},
+              } = {},
+            } = {},
+          } = template;
+          templateData.title = (
+            <CapRow>
+              <CapLabel className="zalo-template-name">
+                {templateId}
+              </CapLabel>
+              <CapRow
+                type="flex"
+                align="middle"
+                className="zalo-status-container"
+              >
+                <CapStatus
+                  type={
+                    status === ZALO_STATUSES.ENABLE
+                      ? WHATSAPP_STATUSES.approved
+                      : status === ZALO_STATUSES.REJECT
+                      ? WHATSAPP_STATUSES.rejected
+                      : WHATSAPP_STATUSES.pending
+                  }
+                  text={status && this.props.intl.formatMessage(zaloMessages?.[`${status}_STATUS`])}
+                  labelType="label3"
+                />
+              </CapRow>
+            </CapRow>
+          );
+          templateData.content = <CapLabel type="label19" className="zalo-listing-content desc">{template.name}</CapLabel>;
+          break;
+        }
         default:
           templateData.content = "";
       }
@@ -1134,16 +1234,17 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
 
     const accountId = get(this.props, 'Templates.selectedWeChatAccount.uuid');
     const accounts = get(this.props, 'Templates.weCrmAccounts');
-    const noWhatsappTemplates = this.isFullMode() && isEmpty(templates);
-    const noFilteredWhatsappTemplates = this.isFullMode() && !isEmpty(templates) && isEmpty(filteredTemplates);
-    const noApprovedWhatsappTemplates = !this.isFullMode() && isEmpty(filteredTemplates);
+    const noWhatsappZaloTemplates = this.isFullMode() && isEmpty(templates);
+    const noFilteredWhatsappZaloTemplates = this.isFullMode() && !isEmpty(templates) && isEmpty(filteredTemplates);
+    const noApprovedWhatsappZaloTemplates = !this.isFullMode() && isEmpty(filteredTemplates);
     const showWhatsappIllustration = !isEmpty(this.props.Templates.selectedWhatsappAccount) && [WHATSAPP_LOWERCASE].includes(channelLowerCase);
+    const showZaloIllustration = !isEmpty(this.props.Templates.selectedZaloAccount) && [ZALO_LOWERCASE].includes(channelLowerCase);
     const showRcsIllustration = channelLowerCase === RCS_LOWERCASE && isEmpty(templates);
     const noLoaderAndSearchText = isEmpty(this.state.searchText) && !isLoading;
     return (<div>
       {[WECHAT, MOBILE_PUSH].includes(currentChannel) && this.showAccountName()}
       {filterContent}
-      {[WHATSAPP].includes(currentChannel) && this.selectedFilters()}
+      {[WHATSAPP, ZALO].includes(currentChannel) && this.selectedFilters()}
       <CapSpin spinning={isLoading} tip={loadingTip} style={{width: '100%'}}>
         {<div>
           {!isEmpty(filteredTemplates) || !isEmpty(this.state.searchText) || !isEmpty(this.props.Templates.templateError) ? (
@@ -1160,7 +1261,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
           }
 
           {(this.state.selectedAccount === '' && isEmpty(this.props.Templates.selectedWeChatAccount)) && (this.state.channel.toLowerCase() === 'wechat' || this.state.channel.toLowerCase() === "mobilepush") &&
-          <div style={{ height: '65vh', textAlign: 'center', lineHeight: '65vh'}}>
+          <div style={{ height: '65vh', textAlign: 'center', lineHeight: '65vh' }}>
             <CapHeading type="h6">{accounts ? this.props.intl.formatMessage(messages.noAccountMessage) : this.props.intl.formatMessage(messages.noAccountsPresent)}</CapHeading>
           </div>
           }
@@ -1182,13 +1283,12 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
               </div>
             )
           }
-          {showWhatsappIllustration &&
-            (
+          {(showWhatsappIllustration || showZaloIllustration) && (
             noLoaderAndSearchText &&
               <div style={this.isFullMode() ? { height: "calc(100vh - 325px)", overflow: 'auto' } : {}}>
-                {noWhatsappTemplates && <CapIllustration buttonClassName={`create-new-${channelLowerCase}`} {...this.getChannelTypeIllustrationInfo(currentChannel)} />}
-                {noFilteredWhatsappTemplates && this.whatsappIllustrationText('noFilteredWhatsappTemplatesTitle', 'noFilteredWhatsappTemplatesDesc')}
-                {noApprovedWhatsappTemplates && this.whatsappIllustrationText('noApprovedWhatsappTemplatesTitle', 'noApprovedWhatsappTemplatesDesc')}
+                {noWhatsappZaloTemplates && <CapIllustration buttonClassName={`create-new-${channelLowerCase}`} {...this.getChannelTypeIllustrationInfo(currentChannel)} />}
+                {noFilteredWhatsappZaloTemplates && this.whatsappZaloIllustrationText('noFilteredWhatsappZaloTemplatesTitle', 'noFilteredWhatsappZaloTemplatesDesc')}
+                {noApprovedWhatsappZaloTemplates && this.whatsappZaloIllustrationText('noApprovedWhatsappZaloTemplatesTitle', showWhatsappIllustration ? 'noApprovedWhatsappTemplatesDesc' : 'zaloDescIllustration')}
               </div>
             )
           }
@@ -1230,7 +1330,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
     } else if (this.state.channel.toLowerCase() === 'mobilepush') {
       routeParams = {
         pathname: `/mobilepush/edit/${e.template_id}`,
-        query: type === 'embedded' ? {type: 'embedded', module, account_id: e.account_id} : {},
+        query: type === 'embedded' ? {type: 'embedded', module, account_id: e.account_id } : {},
       };
     } else if (this.state.channel.toLowerCase() === 'wechat') {
       if (e.template_type && e.template_type === 'RICHMEDIA_WECHAT_TEMPLATE') {
@@ -1247,7 +1347,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
     } else if (this.state.channel.toLowerCase() === 'line') {
       routeParams = {
         pathname: `/line/view/${e.msg_type}/`,
-        query: type === 'embedded' ? {type: 'embedded', module, account_id: e.account_id } : {},
+        query: type === 'embedded' ? {type: 'embedded', module, account_id: e.account_id} : {},
       };
     }
     this.setState({loading: true, routeParams});
@@ -1551,22 +1651,38 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
     }
   }
 
-  searchTemplate(data) {
-    this.setState({searchText: data}, () => {
-      const params = {
-        name: this.state.searchText,
-        sortBy: this.state.sortBy,
-      };
-      if (this.state.channel.toLowerCase() === 'wechat') {
-        params.wecrmId = this.props.Templates.selectedWeChatAccount.configs.wecrm_app_id;
-        params.wecrmToken = this.props.Templates.selectedWeChatAccount.configs.wecrm_token;
-        params.originalId = this.props.Templates.selectedWeChatAccount.sourceAccountIdentifier;
-      }
-      if (this.state.channel.toLowerCase() === "mobilepush") {
-        params.accountId = this.props.Templates.selectedWeChatAccount.id;
+  searchTemplate(data, channel) {
+    if (channel.toLowerCase() === ZALO_LOWERCASE) {
+      if (data) {
+        this.setState({
+          searchingZaloTemplate: true,
+          searchedZaloTemplates: this.props.TemplatesList.filter((zalo) => zalo?.name?.toLowerCase().includes(data?.toLowerCase())),
+          searchText: data,
+        });
+      } else {
+        this.setState({
+          searchingZaloTemplate: false,
+          searchedZaloTemplates: [],
+          searchText: data,
+        });
       }
-      this.getAllTemplates({params, resetPage: true});
-    });
+    } else {
+      this.setState({ searchText: data }, () => {
+        const params = {
+          name: this.state.searchText,
+          sortBy: this.state.sortBy,
+        };
+        if (this.state.channel.toLowerCase() === WECHAT_LOWERCASE) {
+          params.wecrmId = this.props.Templates.selectedWeChatAccount.configs.wecrm_app_id;
+          params.wecrmToken = this.props.Templates.selectedWeChatAccount.configs.wecrm_token;
+          params.originalId = this.props.Templates.selectedWeChatAccount.sourceAccountIdentifier;
+        }
+        if (this.state.channel.toLowerCase() === MOBILE_PUSH_LOWERCASE) {
+          params.accountId = this.props.Templates.selectedWeChatAccount.id;
+        }
+        this.getAllTemplates({params, resetPage: true});
+      });
+    }
   }
 
   handleSortBy(data) {
@@ -1767,6 +1883,10 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
         pathName = `/rcs/edit/${id}/`;
         break;
       }
+      case ZALO: {
+        pathName = `/zalo/edit/${id}/`;
+        break;
+      }
       default:
         break;
     }
@@ -1791,24 +1911,48 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
   selectTemplate = (id) => find(this.props.TemplatesList, {_id: id})
 
   handlePreviewClick(template, modeType) {
-    this.togglePreview();
-    const templateInfo = cloneDeep(template);
-    if (this.state.channel.toLowerCase() === 'line') {
-      templateInfo.modeType = modeType;
-    }
-    templateInfo.updatedByName = commonUtil.getUserNameById(parseInt(template.updatedBy, 10), commonUtil.getMergedUserList(this.props.Templates.userList));
-    if (this.state.channel === 'wechat') {
-      templateInfo.content = this.prepareWeChatPreviewData(template);
-    } else if (this.state.channel.toLowerCase() === "mobilepush") {
-      templateInfo.content = template.versions.base;
-      templateInfo.appName = this.props.Templates.selectedWeChatAccount.name;
-    } else if (this.state.channel.toLowerCase() === "email") {
-      this.props.actions.getTemplateDetails(template._id);
-    } else if (this.state.channel.toLowerCase() === 'ebill') {
-      this.props.actions.getTemplateDetails(template._id);
-    }
-    if (this.state.channel.toLowerCase() !== 'ebill') {
-      this.setState({previewTemplate: templateInfo});
+    if (this.state.channel.toLowerCase() !== ZALO_LOWERCASE) {
+      this.togglePreview();
+      const templateInfo = cloneDeep(template);
+      if (this.state.channel.toLowerCase() === "line") {
+        templateInfo.modeType = modeType;
+      }
+      templateInfo.updatedByName = commonUtil.getUserNameById(
+        parseInt(template.updatedBy, 10),
+        commonUtil.getMergedUserList(this.props.Templates.userList)
+      );
+      if (this.state.channel === "wechat") {
+        templateInfo.content = this.prepareWeChatPreviewData(template);
+      } else if (this.state.channel.toLowerCase() === "mobilepush") {
+        templateInfo.content = template.versions.base;
+        templateInfo.appName = this.props.Templates.selectedWeChatAccount.name;
+      } else if (this.state.channel.toLowerCase() === "email") {
+        this.props.actions.getTemplateDetails(template._id);
+      } else if (this.state.channel.toLowerCase() === "ebill") {
+        this.props.actions.getTemplateDetails(template._id);
+      }
+      if (this.state.channel.toLowerCase() !== "ebill") {
+        this.setState({ previewTemplate: templateInfo });
+      }
+    } else {
+      const {
+        Templates: {
+          weCrmAccounts: [
+            {
+              name,
+              sourceAccountIdentifier,
+              configs: { token },
+            },
+          ],
+        },
+      } = this.props;
+      this.props.zaloActions.getTemplateInfoById({
+        username: name,
+        oa_id: sourceAccountIdentifier,
+        token: token,
+        id: template?._id,
+        preview: true,
+      });
     }
   }
 
@@ -2090,6 +2234,11 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
       this.props.Templates?.senderDetails?.status === "REQUEST"
     ) &&
     this.state.channel.toLowerCase() === WHATSAPP_LOWERCASE;
+    const zaloLoader =
+    (
+      (this.state.selectedAccount !== "" && getAllTemplatesInProgress) ||
+      fetchingWeCrmAccounts ) &&
+    this.state.channel.toLowerCase() === ZALO_LOWERCASE;
     const mobilePushLoader = (((getAllTemplatesInProgress) || (fetchingWeCrmAccounts)) && this.state.channel.toLowerCase() === 'mobilepush');
     const emailLoader = (
       (getAllTemplatesInProgress ||
@@ -2099,6 +2248,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
     const ebillLoader = ((getAllTemplatesInProgress || sendingFile) && this.state.channel.toLowerCase() === 'ebill');
     const isLoading = ((wechatLoader !== undefined) ? wechatLoader : false) ||
       (whatsappLoader !== undefined ? whatsappLoader : false) ||
+      (zaloLoader !== undefined ? zaloLoader : false) ||
       (smsLoader !== undefined ? smsLoader : false) ||
       (emailLoader !== undefined ? emailLoader : false) ||
       (ebillLoader !== undefined ? ebillLoader : false) ||
@@ -2155,6 +2305,15 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
           descriptionPosition: 'bottom',
           descriptionClassName: 'illustration-desc rcs-illustration',
         };
+      case ZALO:
+        return {
+          illustrationImage: zaloillustration,
+          title: <FormattedMessage {...messages.zaloTitleIllustration} />,
+          description: <FormattedMessage {...messages.zaloDescIllustration} />,
+          descriptionPosition: 'bottom',
+          descriptionClassName: 'illustration-desc zalo-illustration',
+          buttonClassName: "zalo-illustration-button",
+        };
       default:
         return {};
     }
@@ -2283,6 +2442,11 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
         noAccountHeader = messages.noAccountsPresentWhatsapp;
         break;
       }
+      case ZALO: {
+        accountHeader = formatMessage(messages.zaloAccount);
+        noAccountHeader = messages.noAccountsPresentZalo;
+        break;
+      }
       default:
         break;
     }
@@ -2325,7 +2489,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
           selected={selectedAccount}
         />
       </div>
-       }
+      }
     </CapSpin>);
   };
 
@@ -2352,6 +2516,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
       [MOBILE_PUSH]: 'mobilepushAccount',
       [WECHAT]: 'wechatAccount',
       [WHATSAPP]: 'whatsappAccount',
+      [ZALO]: 'zaloAccount',
     };
     return formatMessage(messages[channelObj[channel?.toUpperCase()]]);
   }
@@ -2381,8 +2546,10 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
     }
   }
 
+  removeZaloFilter = () => this.setState({ selectedZaloStatus: null });
+
   selectedFilters = () => {
-    const { selectedWhatsappStatus, selectedWhatsappCategory } = this.state;
+    const { selectedWhatsappStatus, selectedWhatsappCategory, selectedZaloStatus } = this.state;
     const {
       intl: {
         formatMessage,
@@ -2415,6 +2582,13 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
             />
           ) : null
         }
+        {
+          selectedZaloStatus ? (
+            <CapTag closable onClose={() => this.removeZaloFilter(WHATSAPP_STATUS)}>
+              {formatMessage(messages.status)}: {formatMessage(zaloMessages[`${selectedZaloStatus}_STATUS`])}
+            </CapTag>
+          ) : null
+        }
       </CapRow>
     );
   }
@@ -2424,6 +2598,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
   setWhatsappCategory = (value) => this.setState({selectedWhatsappCategory: value?.item?.props?.value});
   setLineFilter = (e) => this.setState({lineFilter: e.target.value});
   setSMSFilter = (e) => this.setState({smsFilter: e.target.value});
+  setZaloStatus = (value) => this.setState({selectedZaloStatus: value?.item?.props?.value});
 
   openCreativesFullMode = () => {
     window.open(`/creatives/ui/v2?channel=${WHATSAPP_LOWERCASE}&mode=${CREATE}`, "_blank");
@@ -2511,7 +2686,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
           className="create-new-link"
         />
       )
-      : (
+        : this.state.channel.toLowerCase() === ZALO_LOWERCASE ? <></> : (
         <CapButton
           className={`create-new-${channelLowerCase} margin-l-8 margin-b-12`}
           type={"primary"}
@@ -2532,11 +2707,11 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
         style={{width: '210px'}}
         placeholder={this.props.intl.formatMessage(messages.searchText)}
         value={this.state.searchText}
-        onChange={(e) => this.searchTemplate(e.target.value)}
+        onChange={(e) => this.searchTemplate(e.target.value, this.state.channel)}
         disabled={this.checkSearchDisabled()}
-        onClear={() => this.searchTemplate('')}
+        onClear={() => this.searchTemplate('', this.state.channel)}
         onScroll={(e) => e.stopPropagation()}
-        />}
+      />}
       {
         channel.toUpperCase() === WECHAT && <CapRadio.CapRadioGroup className="wechat-filters" defaultValue={wechatFilter} onChange={this.setWechatFilter}>
           <CapRadio.Button value={WECHAT_FILTERS.ALL}><CapLabel type="label2">
@@ -2551,37 +2726,56 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
         </CapRadio.CapRadioGroup>
       }
       {
-        channel.toUpperCase() === WHATSAPP && (
-          <div className="whatsapp-filters">
+        channel.toUpperCase() === ZALO && (
+          <div className="zalo-filters">
             {
               this.props.isFullMode ? (
                 <CapSelectFilter
                   placement="bottomLeft"
-                  data={STATUS_OPTIONS}
-                  onSelect={this.setWhatsappStatus}
-                  selectedValue={this.state.selectedWhatsappStatus}
+                  data={ZALO_STATUS_OPTIONS}
+                  onSelect={this.setZaloStatus}
+                  selectedValue={this.state.selectedZaloStatus}
                   placeholder="Status"
-                  showBadge
                   width="90px"
                 />
               ) : null
             }
-            <CapSelectFilter
-              placement="bottomLeft"
-              data={this.state.hostName === HOST_TWILIO
-                ? TWILIO_CATEGORY_OPTIONS
-                : KARIX_GUPSHUP_CATEGORY_OPTIONS}
-              onSelect={this.setWhatsappCategory}
-              selectedValue={this.state.selectedWhatsappCategory}
-              placeholder="Category"
-              showBadge
-              width="105px"
-              overlayStyle={{ overflowY: "hidden" }}
-            />
           </div>
 
         )
       }
+      {
+      channel.toUpperCase() === WHATSAPP && (
+        <div className="whatsapp-filters">
+          {
+            this.props.isFullMode ? (
+              <CapSelectFilter
+                placement="bottomLeft"
+                data={STATUS_OPTIONS}
+                onSelect={this.setWhatsappStatus}
+                selectedValue={this.state.selectedWhatsappStatus}
+                placeholder="Status"
+                showBadge
+                width="90px"
+              />
+            ) : null
+          }
+          <CapSelectFilter
+            placement="bottomLeft"
+            data={this.state.hostName === HOST_TWILIO
+              ? TWILIO_CATEGORY_OPTIONS
+              : KARIX_GUPSHUP_CATEGORY_OPTIONS}
+            onSelect={this.setWhatsappCategory}
+            selectedValue={this.state.selectedWhatsappCategory}
+            placeholder="Category"
+            showBadge
+            width="105px"
+            overlayStyle={{ overflowY: "hidden" }}
+          />
+        </div>
+
+      )
+      }
       {
         channel.toUpperCase() === LINE &&
           isFullMode
@@ -2685,6 +2879,9 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
         (this.props.EmailCreate.duplicateTemplateInProgress && 'duplicatingTemplate');
 
     const loadingTip = messages[loadingTipIntl] ? this.props.intl.formatMessage(messages[loadingTipIntl]) : this.props.intl.formatMessage(messages.gettingAllTemplates);
+    const showNoTemplatesFoundZalo = this.state.channel.toUpperCase() === ZALO && isEmpty(this.state.searchedZaloTemplates) && this.state.searchingZaloTemplate;
+    const showNoTemplatesFoundOther = ![ZALO].includes(this.state.channel.toUpperCase()) && isEmpty(this.props.TemplatesList) && !this.props.Templates.getAllTemplatesInProgress && !isEmpty(this.state.searchText);
+    const showNoTemplatesFound = showNoTemplatesFoundZalo || showNoTemplatesFoundOther;
 
     return (
       <>
@@ -2704,11 +2901,17 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
             ) : null
           }
 
+          {
+            channel.toLowerCase() === ZALO_LOWERCASE && !isFullMode ? (
+              <CapInfoNote message={formatMessage(messages.zaloOnlyApprovedTemplates)} />
+            ) : null
+          }
+
           <CapRow>
             <Pagination onPageChange={templates.length ? this.onPaginationChange : () => {}} paginationSelector="pagination-container">
-              {this.getTemplateDataForGrid({isLoading, loadingTip, channel: this.state.channel, templates: this.props.TemplatesList, filterContent, handlers: {handlePreviewClick: this.handlePreviewClick, handleEditClick: this.handleEditClick}})}
+              {this.getTemplateDataForGrid({ isLoading, loadingTip, channel: this.state.channel, templates: this.state.searchingZaloTemplate ? this.state.searchedZaloTemplates : this.props.TemplatesList, filterContent, handlers: { handlePreviewClick: this.handlePreviewClick, handleEditClick: this.handleEditClick}})}
             </Pagination>
-            {(((this.state.selectedAccount !== '' && !isEmpty(this.props.Templates.selectedWeChatAccount) && this.state.channel.toLowerCase() === 'wechat') || this.state.channel.toLowerCase() !== 'wechat') && isEmpty(this.props.TemplatesList)) && !this.props.Templates.getAllTemplatesInProgress && !isEmpty(this.state.searchText) &&
+            {showNoTemplatesFound &&
             <div style={{ height: '65vh', textAlign: 'center', lineHeight: '65vh'}}>
               <CapHeading type="h6">{this.props.intl.formatMessage(messages.noTemplatesFound)}</CapHeading>
             </div>}
@@ -2730,7 +2933,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
               selectedWeChatAccount={get(this.props, 'Templates.selectedWeChatAccount', {})}
               selectedAccount={this.state.selectedAccount}
             />
-          }
+            }
           </CapRow>
           <CapRow>
 
@@ -2789,6 +2992,7 @@ Templates.propTypes = {
   facebookActions: PropTypes.object,
   whatsappActions: PropTypes.object,
   rcsActions: PropTypes.object,
+  zaloActions: PropTypes.object,
   smsRegister: PropTypes.any,
   isDltFromRcs: PropTypes.bool,
 };
@@ -2804,6 +3008,7 @@ const mapStateToProps = createStructuredSelector({
   Global: makeSelectAuthenticated(),
   Line: makeSelectLine(),
   Viber: makeSelectViber(),
+  Zalo: makeSelectZalo(),
 });
 
 function mapDispatchToProps(dispatch) {
@@ -2820,6 +3025,7 @@ function mapDispatchToProps(dispatch) {
     facebookActions: bindActionCreators(facebookActions, dispatch),
     whatsappActions: bindActionCreators(whatsappActions, dispatch),
     rcsActions: bindActionCreators(rcsActions, dispatch),
+    zaloActions: bindActionCreators(zaloActions, dispatch),
   };
 }