@capillarytech/creatives-library 8.0.64-alpha.0 → 8.0.65-alpha.0

package/v2Containers/Templates/index.js

@@ -21,6 +21,7 @@ import cloneDeep from 'lodash/cloneDeep';
 import find from 'lodash/find';
 import map from 'lodash/map';
 import { bindActionCreators } from 'redux';
+import { Modal, Form} from 'antd';
 import {
   CapMenu,
   CapDropdown,
@@ -96,16 +97,18 @@ import {
   FACEBOOK as FACEBOOK_CHANNEL,
   CREATE,
 } from '../App/constants';
-import {MAX_WHATSAPP_TEMPLATES, WARNING_WHATSAPP_TEMPLATES } from './constants';
+import {MAX_WHATSAPP_TEMPLATES, WARNING_WHATSAPP_TEMPLATES , ACCOUNT_MAPPING_ON_CHANNEL} from './constants';
 import { COPY_OF } from '../../containers/App/constants';
 import {
+  TWILIO_CATEGORY_OPTIONS,
+  KARIX_GUPSHUP_CATEGORY_OPTIONS,
   STATUS_OPTIONS,
   CATEGORY,
   WHATSAPP_CATEGORIES,
   STATUS as WHATSAPP_STATUS,
   WHATSAPP_STATUSES,
+  HOST_TWILIO,
   HOST_GUPSHUP,
-  CATEGORY_OPTIONS_MAP,
 } from '../Whatsapp/constants';
 import { INAPP_LAYOUT_DETAILS } from '../InApp/constants';
 import { ZALO_STATUS_OPTIONS, ZALO_STATUSES } from '../Zalo/constants';
@@ -123,6 +126,7 @@ import emailIllustration from '../Assets/images/emailIllustration.svg';
 import smsIllustration from '../Assets/images/smsIllustration.svg';
 import pushIllustration from '../Assets/images/pushIllustration.svg';
 import whatsappIllustration from '../Assets/images/whatsappIllustration.png';
+import whatsappOrZaloAccountIllustration from '../Assets/images/whatsappOrZaloAccountIllustration.svg';
 import rcsIllustration from '../Assets/images/rcsIllustration.png';
 import zaloillustration from '@capillarytech/cap-ui-library/assets/images/featureUiNotEnabledIllustration.svg';
 import inAppIllustration from '@capillarytech/cap-ui-library/assets/images/featureUiNotEnabledIllustration.svg';
@@ -247,6 +251,22 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
     this.delayTimer = 0;
   }
 
+  getHostName(selectedSourceAccountIdentifier, domainPropertiesData = []) {
+    if (isEmpty(domainPropertiesData) || !selectedSourceAccountIdentifier) {
+      return '';
+    }
+    for (const domainData of domainPropertiesData) {
+        const { hostName, connectionProperties: { account_sid, wabaId, userid, sourceAccountIdentifier, oa_id } = {}} = domainData?.domainProperties || {};
+        // If sourceAccountIdentifier is not present in the domainProperties, then it will try to find in account_sid, wabaId, user_id.
+        // wabaId, user_id is, account_sid are for Karix, Gupshup, and Twilio (Whatsapp) respectively and oa_id is for Zalo.
+        const sourceAccountIdentifiersArray = [account_sid, wabaId, userid, oa_id, sourceAccountIdentifier];
+        if (sourceAccountIdentifiersArray.includes(selectedSourceAccountIdentifier)) {
+          this.setState({hostName});
+          return hostName;
+        }
+    }
+  };
+
   componentWillMount() {
     if (this.state.channel === '') {
       let channel = '';
@@ -609,11 +629,11 @@ 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 });
     }
-    const { weCrmAccounts: weCrmAccountsList = [], senderDetails: { hostName = '' } = {} } = get(nextProps, 'Templates', {});
-    const weCrmChannels = ['wechat', WHATSAPP_LOWERCASE, ZALO_LOWERCASE];
+    const { weCrmAccounts: weCrmAccountsList = [], senderDetails = {} } = get(nextProps, 'Templates', {});
+    const weCrmChannels = [WHATSAPP_LOWERCASE, ZALO_LOWERCASE];
 
-    if (weCrmAccountsList.length === 1 && this.state.defaultAccount && (weCrmChannels.indexOf(selectedChannel) > -1) && !isEmpty(hostName)) {
-      let paramsDefault = {};
+    // Keeping the wechat flow separate as it has different logic for setting the account.
+    if (weCrmAccountsList?.length === 1 && this.state?.defaultAccount && selectedChannel === WECHAT_LOWERCASE && !isEmpty(senderDetails?.hostName)) {
       if (this.state.channel.toLowerCase() !== ZALO_LOWERCASE) {
         paramsDefault = {
           name: this.state.searchText,
@@ -621,38 +641,65 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
         };
       } 
 
-      const {name, sourceAccountIdentifier, configs } = weCrmAccountsList?.[0] || {};
+      const { sourceAccountIdentifier, configs } = weCrmAccountsList?.[0] || {};
       const {
-        token,
         wecrm_app_id,
         wecrm_token
       } = configs || {};
-      if (weCrmChannels.includes(selectedChannel)) {
-          if ([WHATSAPP_LOWERCASE, ZALO_LOWERCASE].includes(selectedChannel)) {
-            if (hostName === '') {
-              return;
-            }
 
-            weCrmAccountsList[0].hostName = hostName;
-            nextProps.actions.setChannelAccount(selectedChannel.toUpperCase(), weCrmAccountsList[0]);
-            if (selectedChannel === ZALO_LOWERCASE) {
-              paramsDefault.username = name;
-              paramsDefault.oa_id = sourceAccountIdentifier;
-              paramsDefault.token = token;
-              paramsDefault.host = hostName || this.props.Templates?.senderDetails?.hostName || this.props.Templates?.selectedZaloAccount?.hostName || this.state.hostName;
-            }
-          } else {
-            paramsDefault.wecrmId = wecrm_app_id;
-            paramsDefault.wecrmToken = wecrm_token;
-            paramsDefault.originalId = sourceAccountIdentifier;
-            nextProps.actions.setWeChatAccount(
-              weCrmAccountsList[0],
-            );
-          }
-        
+      const paramsDefault = {
+        wecrmId: wecrm_app_id,
+        wecrmToken: wecrm_token,
+        originalId: sourceAccountIdentifier,
       }
+      nextProps.actions.setWeChatAccount(
+        weCrmAccountsList[0],
+      );
+
       this.setState({ defaultAccount: false, activeMode: TEMPLATES_MODE, selectedAccount: weCrmAccountsList[0].name, hostName: weCrmAccountsList[0].hostName });
-      this.getAllTemplates({params: paramsDefault}, true);
+      this.getAllTemplates({ params: paramsDefault }, true);
+    }
+
+    if (weCrmAccountsList?.length && this.state?.defaultAccount && (weCrmChannels.includes(selectedChannel))) {
+      const isSingleAccount = weCrmAccountsList?.length === 1;
+      const selectedAccount = this.props.Templates[ACCOUNT_MAPPING_ON_CHANNEL[selectedChannel]] || {};
+      const hostName = this.getHostName(isSingleAccount ? weCrmAccountsList[0]?.sourceAccountIdentifier : selectedAccount?.sourceAccountIdentifier, senderDetails?.domainProperties);
+    
+       if (!isEmpty(hostName)) {
+        let paramsDefault = {};
+        if (this.state.channel.toLowerCase() !== ZALO_LOWERCASE) {
+          paramsDefault = {
+            name: this.state.searchText,
+            sortBy: this.state.sortBy,
+          };
+        } 
+
+        const {name, sourceAccountIdentifier, configs } = weCrmAccountsList?.[0] || {};
+        if (isSingleAccount) {
+          weCrmAccountsList[0].hostName = hostName;
+        } else {
+          selectedAccount.hostName = hostName;
+        }
+        nextProps.actions.setChannelAccount(selectedChannel?.toUpperCase(), isSingleAccount ? weCrmAccountsList[0] : selectedAccount);
+        if (selectedChannel === ZALO_LOWERCASE) {
+          paramsDefault.username = name;
+          paramsDefault.oa_id = sourceAccountIdentifier;
+          paramsDefault.token = configs?.token;
+          paramsDefault.host = hostName || this.props.Templates?.selectedZaloAccount?.hostName;
+        }
+        if (selectedChannel === WHATSAPP_LOWERCASE) {
+          paramsDefault.accountId = sourceAccountIdentifier;
+          paramsDefault.host = hostName || this.props.Templates?.selectedWhatsappAccount?.hostName;
+        }
+        this.setState({ defaultAccount: false, activeMode: TEMPLATES_MODE, selectedAccount: isSingleAccount ? weCrmAccountsList[0]?.name : selectedAccount?.name });
+        /**
+         * Incase of multiple accounts, getAllTemplates is called on selecting the account. It's handled in onAccountSelect function.
+         * But for single account, onAccountSelect function won't get executed and getAllTemplates will be excuted.
+         */
+        if (weCrmAccountsList?.length === 1) {
+          this.getAllTemplates({params: paramsDefault}, true);
+        }
+      }
     }
     const zaloPreviewUrl = get(nextProps, 'Zalo.zaloTemplatePreviewData.versions.base.content.zalo.previewUrl', '');
     if (zaloPreviewUrl && this.state.channel.toLowerCase() === ZALO_LOWERCASE) {
@@ -678,6 +725,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
         params.sortBy = this.state.sortBy;
       }
       const selectedChannel = this.state.channel.toLowerCase();
+      const isZaloOrWhatsapp = [ZALO_LOWERCASE, WHATSAPP_LOWERCASE].includes(selectedChannel);
       if (selectedChannel === 'wechat') {
         params.wecrmId = this.props.Templates.weCrmAccounts[findIndex(this.props.Templates.weCrmAccounts, { name: value})].configs.wecrm_app_id;
         params.wecrmToken = this.props.Templates.weCrmAccounts[findIndex(this.props.Templates.weCrmAccounts, { name: value})].configs.wecrm_token;
@@ -697,26 +745,43 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
         } else {
           this.setState({ selectedAccountError: false });
         }
-      } else if ([LINE.toLowerCase(), RCS_LOWERCASE, ZALO_LOWERCASE].includes(selectedChannel)) {
+      } else if ([LINE.toLowerCase(), RCS_LOWERCASE, ZALO_LOWERCASE, WHATSAPP_LOWERCASE].includes(selectedChannel)) {
         const setAcc = this.props?.Templates?.weCrmAccounts?.find((item) => item?.name === this.state.selectedAccount);
+        const { domainProperties = [] } = this.props?.Templates?.senderDetails || {};
+        let hostName = '';
+        if (isZaloOrWhatsapp) {
+          hostName = this.getHostName(setAcc?.sourceAccountIdentifier, domainProperties);
+          setAcc.hostName = hostName;
+        }
         this.props.actions.setChannelAccount(selectedChannel?.toUpperCase(), setAcc);
-        if(selectedChannel === ZALO_LOWERCASE){
-            const {
-              name = "",
-              sourceAccountIdentifier = "",
-              configs: { token = "" } = {},
-            } = setAcc || {};
+
+        const {
+          name = "",
+          sourceAccountIdentifier = "",
+          configs: { token = "" } = {},
+        } = setAcc || {};
+
+        if(selectedChannel === ZALO_LOWERCASE && hostName) {
             params.username = name;
             params.oa_id = sourceAccountIdentifier;
             params.token = token;
             params.isAccountSelection = true;
-            params.host = this.props.Templates?.senderDetails?.hostName || this.props.Templates?.selectedZaloAccount?.hostName || this.state.hostName;
+            params.host = hostName;
+        }
+        if (selectedChannel === WHATSAPP_LOWERCASE && hostName) {
+          params.accountId = sourceAccountIdentifier;
+          params.host = hostName;
         }
       }
 
-      this.setState({activeMode: TEMPLATES_MODE});
-
-      this.getAllTemplates({params, resetPage: true});
+       // Always set activeMode before getAllTemplates call
+      this.setState({ activeMode: TEMPLATES_MODE }, () => {
+        // Restrict getAllTemplates call only if selectedChannel is ZALO or WHATSAPP and hostName is empty
+        if (!(isZaloOrWhatsapp && !params?.host)) {
+          console.log(">>> GETALLTEMPLATES onaccount select ", { params });
+          this.getAllTemplates({ params, resetPage: true });
+        }
+      });
     });
   }
   onPaginationChange = () => {
@@ -794,6 +859,12 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
 
     moment.locale(locale);
   };
+
+  setWhatsappQueryParams = (queryParams, params) => {
+    queryParams.accountId = params?.accountId || this.props.Templates?.selectedWhatsappAccount?.sourceAccountIdentifier;
+    queryParams.host =  params?.host || this.state?.hostName;
+  };
+
   getAllTemplates = ({params, getNextPage, resetPage}, resetTemplates) => {
     let queryParams = params || {};
     let page = this.state.page;
@@ -822,6 +893,9 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
       if (([MOBILE_PUSH_LOWERCASE, INAPP_LOWERCASE].includes(channel.toLowerCase())) && !isEmpty(this.props.Templates.selectedWeChatAccount)) {
         queryParams.accountId = this.props.Templates?.selectedWeChatAccount?.id;
       }
+      if (this.state?.channel?.toLowerCase() === WHATSAPP_LOWERCASE) {
+        this.setWhatsappQueryParams(queryParams, params);
+      }
       this.props.actions.getAllTemplates(channel, queryParams,`${copyOf}`);
     } else if ((resetPage || (page === 1 && this.state.templatesCount === 0) || page <= (this.state.templatesCount / this.state.perPageLimit))) {
       if (getNextPage) {
@@ -871,6 +945,9 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
         queryParams.token = token;
         queryParams.host = hostName || this.props.Templates?.senderDetails?.hostName ||this.state.hostName;
       }
+      if (this.state?.channel?.toLowerCase() === WHATSAPP_LOWERCASE) {
+        this.setWhatsappQueryParams(queryParams, params);
+      }
       this.setState({ page, templatesCount }, () => {
         queryParams.page = page;
         queryParams.perPage = this.state.perPageLimit;
@@ -1017,7 +1094,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
         filteredTemplates = this.filterWechatTemplates(templates);
         break;
       case WHATSAPP:
-        filteredTemplates = this.filterWhatsappTemplates(templates);
+        filteredTemplates = this.state?.hostName ? this.filterWhatsappTemplates(templates) : [];
         break;
       case LINE:
         filteredTemplates = this.filterLineTemplates(templates);
@@ -1378,16 +1455,21 @@ 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 noWhatsappZaloTemplates = this.isFullMode() && isEmpty(templates);
+    const noWhatsappZaloTemplates = this.isFullMode() && isEmpty(templates) || !this.state.hostName;
     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 showWhatsappIllustration = (!isEmpty(this.props.Templates.selectedWhatsappAccount) && [WHATSAPP_LOWERCASE].includes(channelLowerCase)) || !this.state.hostName ;
     const showZaloIllustration = !isEmpty(this.props.Templates.selectedZaloAccount) && [ZALO_LOWERCASE].includes(channelLowerCase);
     const showRcsIllustration = channelLowerCase === RCS_LOWERCASE && isEmpty(templates);
     const showInAppIllustration = channelLowerCase === INAPP_LOWERCASE && isEmpty(templates);
     const noLoaderAndSearchText = isEmpty(this.state.searchText) && !isLoading;
+    console.log(">>> state ", {showWhatsappIllustration, showZaloIllustration, noLoaderAndSearchText, noApprovedWhatsappZaloTemplates, noFilteredWhatsappZaloTemplates, noWhatsappZaloTemplates, channelLowerCase, host: this.state.hostName, templates: this.props.Templates,
+    mp: (["mobilepush"].includes(this.state.channel.toLowerCase()) &&
+    isEmpty(filteredTemplates) &&
+    isEmpty(this.state.searchText))
+    })
     return (<div>
-      {[WECHAT, MOBILE_PUSH, INAPP].includes(currentChannel) && this.showAccountName()}
+      {[WECHAT, MOBILE_PUSH, INAPP, WHATSAPP, ZALO].includes(currentChannel) && this.showAccountName()}
       {filterContent}
       {[WHATSAPP, ZALO].includes(currentChannel) && this.selectedFilters()}
       <CapCustomSkeleton loader={isLoading}>
@@ -1424,15 +1506,15 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
               isEmpty(filteredTemplates) &&
               isEmpty(this.state.searchText) &&
               <div style={this.isFullMode() ? { height: "calc(100vh - 325px)", overflow: 'auto'} : {}}>
-                <CapIllustration buttonClassName={`create-new-${channelLowerCase}`} {...this.getChannelTypeIllustrationInfo(currentChannel)} />
+                <CapIllustration buttonClassName={`create-new-${channelLowerCase}`} {...this.getChannelTypeIllustrationInfo(currentChannel, this.state?.hostName)} />
               </div>
             )
           }
           {(showWhatsappIllustration || showZaloIllustration) && (
             noLoaderAndSearchText &&
               <div style={this.isFullMode() ? { height: "calc(100vh - 325px)", overflow: 'auto' } : {}}>
-                {noWhatsappZaloTemplates && <CapIllustration buttonClassName={`create-new-${channelLowerCase}`} {...this.getChannelTypeIllustrationInfo(currentChannel)} />}
-                {noFilteredWhatsappZaloTemplates && this.whatsappZaloIllustrationText('noFilteredWhatsappZaloTemplatesTitle', 'noFilteredWhatsappZaloTemplatesDesc')}
+                {noWhatsappZaloTemplates && <CapIllustration buttonClassName={`create-new-${channelLowerCase}`} {...this.getChannelTypeIllustrationInfo(currentChannel, isEmpty(this.state?.hostName))} />}
+                {noFilteredWhatsappZaloTemplates && this.state?.hostName && this.whatsappZaloIllustrationText('noFilteredWhatsappZaloTemplatesTitle', 'noFilteredWhatsappZaloTemplatesDesc')}
                 {noApprovedWhatsappZaloTemplates && this.whatsappZaloIllustrationText('noApprovedWhatsappZaloTemplatesTitle', showWhatsappIllustration ? 'noApprovedWhatsappTemplatesDesc' : 'zaloDescIllustration')}
               </div>
             )
@@ -1577,6 +1659,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
   prepareWeChatPreviewData(template) {
     if (template && template.versions && template.versions.base && !isEmpty(template.versions.base)) {
       if (template.definition && template.definition.msgcontent && template.definition.msgcontent === "RICH_MEDIA_WECHAT") {
+        console.log("prepareWeChatPreviewData", template, JSON.stringify(template), template.versions.base.mediaList, JSON.stringify(template.versions.base.mediaList));
         return template.versions.base.mediaList;
       }
       return this.prepareWeChatMappedPreviewData(template.versions.base.content, template.versions.base.Tag, template.versions.base.data);
@@ -1836,6 +1919,9 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
         }
         if (this.state.channel.toLowerCase() === MOBILE_PUSH_LOWERCASE) {
           params.accountId = this.props.Templates.selectedWeChatAccount.id;
+        }  else if (this.state.channel.toLowerCase() === WHATSAPP_LOWERCASE) {
+          params.accountId = this.props.Templates?.selectedWhatsappAccount?.sourceAccountIdentifier;
+          params.host = this.state?.hostName;
         }
         this.delay(() => {
           this.getAllTemplates({params, resetPage: true});
@@ -2439,7 +2525,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
       (rcsLoader !== undefined ? rcsLoader : false);
     return isLoading;
   }
-  getChannelTypeIllustrationInfo = (type) => {
+  getChannelTypeIllustrationInfo = (type, hostNameNotFound) => {
     const { isFullMode, intl } = this.props;
     const templateIntlMsg = intl.formatMessage(messages.template);
     const templateText = isFullMode ? templateIntlMsg : '';
@@ -2465,16 +2551,28 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
           illustrationImage: pushIllustration,
           title: <FormattedMessage {...messages.pushTitleIllustartion} values={{ template: templateText }} />,
         };
-      case WHATSAPP:
-        return {
-          buttonLabel: <FormattedMessage {...messages.newWhatsappTemplate} values={{ template: templateText }} />,
-          onClick: this.createTemplate,
-          illustrationImage: whatsappIllustration,
-          title: <FormattedMessage {...messages.whatsappTitleIllustration} values={{ template: templateText }} />,
-          description: <FormattedMessage {...messages.whatsappDescIllustration} />,
-          descriptionPosition: 'bottom',
-          descriptionClassName: 'illustration-desc',
-        };
+      case WHATSAPP: {
+        if (hostNameNotFound) {
+          return {
+            illustrationImage: whatsappOrZaloAccountIllustration,
+            title: <FormattedMessage {...messages.whatsappAccountNotConfiguredTitle} />,
+            description: <FormattedMessage {...messages.accountNotConfiguredDescription} />,
+            descriptionPosition: 'bottom',
+            descriptionClassName: 'illustration-desc zalo-illustration',
+            buttonClassName: "zalo-illustration-button",
+          };
+        } else {
+          return {
+            buttonLabel: <FormattedMessage {...messages.newWhatsappTemplate} values={{ template: templateText }} />,
+            onClick: this.createTemplate,
+            illustrationImage: whatsappIllustration,
+            title: <FormattedMessage {...messages.whatsappTitleIllustration} values={{ template: templateText }} />,
+            description: <FormattedMessage {...messages.whatsappDescIllustration} />,
+            descriptionPosition: 'bottom',
+            descriptionClassName: 'illustration-desc',
+          };
+        }
+      }
       case RCS:
         return {
           buttonLabel: <FormattedMessage {...messages.newRCSTemplate} values={{ template: templateText }} />,
@@ -2485,15 +2583,27 @@ 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",
-        };
+      case ZALO:{
+        if (hostNameNotFound) {
+          return {
+            illustrationImage: whatsappOrZaloAccountIllustration,
+            title: <FormattedMessage {...messages.zaloAccountNotConfiguredTitle} />,
+            description: <FormattedMessage {...messages.accountNotConfiguredDescription} />,
+            descriptionPosition: 'bottom',
+            descriptionClassName: 'illustration-desc zalo-illustration',
+            buttonClassName: "zalo-illustration-button",
+          };
+        } else {
+          return {
+            illustrationImage: zaloillustration,
+            title: <FormattedMessage {...messages.zaloTitleIllustration} />,
+            description: <FormattedMessage {...messages.zaloDescIllustration} />,
+            descriptionPosition: 'bottom',
+            descriptionClassName: 'illustration-desc zalo-illustration',
+            buttonClassName: "zalo-illustration-button",
+          };
+        }
+      }
       case INAPP:
         return {
           illustrationImage: inAppIllustration,
@@ -2560,10 +2670,9 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
     const isMobilePushChannel = channel === MOBILE_PUSH;
     const isInAppChannel = channel === INAPP;
     const isFacebookChannel = channel === FACEBOOK;
-
-    if ([WECHAT, MOBILE_PUSH, INAPP, LINE, ZALO].includes(channel) && !isEmpty(weCrmAccounts) && !isFacebookChannel) {
+    if ([WECHAT, MOBILE_PUSH, INAPP, LINE, ZALO, WHATSAPP].includes(channel) && !isEmpty(weCrmAccounts) && !isFacebookChannel) {
       forEach(weCrmAccounts, (account) => {
-        if ((isWechatChannel && account.configs && account.configs.is_wecrm_enabled) || [MOBILE_PUSH, INAPP, LINE, ZALO].includes(channel)) {
+        if ((isWechatChannel && account.configs && account.configs.is_wecrm_enabled) || [MOBILE_PUSH, INAPP, LINE, ZALO, WHATSAPP].includes(channel)) {
           if (query.type === 'embedded' && (!query.module || (query.module && query.module !== 'library'))) {
             if (query.source_account_id && account.sourceAccountIdentifier === query.source_account_id) {
               accountOptions.push(
@@ -2646,9 +2755,6 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
         break;
     }
     let showNoAccountHeader = isEmpty(weCrmAccounts) && !fetchingWeCrmAccounts;
-    if (channel === WHATSAPP && this.state.hostName === '') {
-      showNoAccountHeader = true;
-    }
     if (channel === FACEBOOK && !isEmpty(campaignSettings) ) {
       const fbSetting = get(campaignSettings, 'accountSettings.socialAccountSettings.facebookAccountSettings', []);
       const { orgUnitFacebookPageSettingsMap } = fbSetting[0] || {};
@@ -2857,10 +2963,6 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
       }
     }
 
-    const getCategoryOptions = (hostName) => {
-      return CATEGORY_OPTIONS_MAP[hostName];
-    };
-
     const cmsTemplateSelectionContent = (
       <CardGrid
         className={""}
@@ -2874,7 +2976,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
     );
     //TODO -> uncomment the following line
     // const isfilterContentVisisble = !isEmpty(this.props.TemplatesList) || !isEmpty(this.state.searchText) || !isEmpty(this.props.Templates.templateError);
-    const isfilterContentVisisble = true;
+    let isfilterContentVisisble = true;
     const isWechatEmbedded = !this.props.isFullMode && channel.toUpperCase() === WECHAT;
     const channelLowerCase = (channel || '').toLowerCase();
     const isTraiDltFeature = this.checkDLTfeatureEnable();
@@ -2889,7 +2991,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
           className="create-new-link"
         />
       )
-        : this.state.channel.toLowerCase() === ZALO_LOWERCASE ? <></> : (
+        : this.state?.channel?.toLowerCase() === ZALO_LOWERCASE || (channelLowerCase === WHATSAPP_LOWERCASE && isEmpty(this.state?.hostName)) ? <></> : (
         <CapButton
           className={`create-new-${channelLowerCase} margin-l-8 margin-b-12`}
           type={"primary"}
@@ -2903,7 +3005,9 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
     const isWhatsappCountExeeded = templatesCount >= MAX_WHATSAPP_TEMPLATES;
     const showWhatsappCountWarning = templatesCount >= WARNING_WHATSAPP_TEMPLATES;
     const whatsappCountExceedText = <FormattedMessage {...messages.whatsappMaxTemplates} values={{ maxCount: MAX_WHATSAPP_TEMPLATES }}/>;
-
+    if (([WHATSAPP_LOWERCASE, ZALO_LOWERCASE].includes(this.state?.channel?.toLocaleLowerCase()) && isEmpty(this.state?.hostName))) {
+      isfilterContentVisisble = false;
+    }
     const filterContent = (( isfilterContentVisisble || [WECHAT, MOBILE_PUSH, INAPP].includes(this.state.channel.toUpperCase())) && <div className="action-container">
       {isfilterContentVisisble && <CapInput.Search
         className="search-text"
@@ -2932,7 +3036,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
         channel.toUpperCase() === ZALO && (
           <div className="zalo-filters">
             {
-              this.props.isFullMode ? (
+              this.props?.isFullMode && this.state?.hostName ? (
                 <CapSelectFilter
                   placement="bottomLeft"
                   data={ZALO_STATUS_OPTIONS}
@@ -2951,7 +3055,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
       channel.toUpperCase() === WHATSAPP && (
         <div className="whatsapp-filters">
           {
-            this.props.isFullMode ? (
+            this.props?.isFullMode && this.state?.hostName ? (
               <CapSelectFilter
                 placement="bottomLeft"
                 data={STATUS_OPTIONS}
@@ -2963,16 +3067,20 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
               />
             ) : null
           }
-          <CapSelectFilter
-            placement="bottomLeft"
-            data={getCategoryOptions(this.state.hostName)}
-            onSelect={this.setWhatsappCategory}
-            selectedValue={this.state.selectedWhatsappCategory}
-            placeholder="Category"
-            showBadge
-            width="105px"
-            overlayStyle={{ overflowY: "hidden" }}
-          />
+          {this.state?.hostName ? (
+            <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" }}
+            />
+          ) : null}
         </div>
 
       )
@@ -3045,7 +3153,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
       }
       <div style={{display: "flex", justifyContent: "space-between", alignItems: 'center'}}>
         {
-          this.state.channel.toLowerCase() === WHATSAPP_LOWERCASE && isWhatsappCountExeeded ? (
+          this.state?.channel?.toLowerCase() === WHATSAPP_LOWERCASE && (isWhatsappCountExeeded)? (
             <CapTooltip title={whatsappCountExceedText}>
               <div className="button-disabled-tooltip-wrapper">
                 {createButton}

package/v2Containers/Templates/messages.js

@@ -354,6 +354,18 @@ export default defineMessages({
     id: `${scope}.whatsappDescIllustration`,
     defaultMessage: 'These templates can be reused when creating a\nnew message content.',
   },
+  "whatsappAccountNotConfiguredTitle": {
+    id: `${scope}.whatsappAccountNotConfiguredTitle`,
+    defaultMessage: 'Whatsapp account is not configured',
+  },
+  "accountNotConfiguredDescription": {
+    id: `${scope}.accountNotConfiguredDescription`,
+    defaultMessage: 'Please contact your Customer Success Manager to fix the issue.',
+  },
+  "zaloAccountNotConfiguredTitle": {
+    id: `${scope}.zaloAccountNotConfiguredTitle`,
+    defaultMessage: 'Zalo account is not configured',
+  },
   "zaloTitleIllustration": {
     id: `${scope}.zaloTitleIllustration`,
     defaultMessage: 'There are no approved templates available',

package/v2Containers/Templates/reducer.js

@@ -180,12 +180,17 @@ function templatesReducer(state = initialState, action) {
       return state.set('fetchedOrgLevelCampaignSettings', false);
     case types.GET_SENDER_DETAILS_REQUEST:
       return state.set('senderDetails', { status: 'REQUEST' });
-    case types.GET_SENDER_DETAILS_SUCCESS:
+    case types.GET_SENDER_DETAILS_SUCCESS: {
+      const { channel, domainProperties = {} } = action?.payload || {};
+      const isMultiAccountChannel = ['WHATSAPP', 'ZALO'].includes(channel);
+      const senderDetailsKey = isMultiAccountChannel ? 'domainProperties' : 'hostName';
+      // For Whatsapp and Zalo we need to store domainProperties instead of only hostName
       return state.set('senderDetails', {
         status: 'SUCCESS',
-        hostName: action.payload,
+        [senderDetailsKey]: isMultiAccountChannel ? domainProperties : action?.payload,
         errors: [],
       });
+    }
     case types.GET_SENDER_DETAILS_FAILURE:
       return state.set('senderDetails', {
         status: 'FAILURE',

package/v2Containers/Templates/sagas.js

@@ -161,8 +161,13 @@ export function* getSenderDetails({
     if (!apiResponse?.errors?.length) {
       yield put({
         type: types.GET_SENDER_DETAILS_SUCCESS,
-        payload: get(apiResponse, `entity.${channel}[0].domainProperties.hostName`, ''),
+        payload: ['WHATSAPP', 'ZALO'].includes(channel) ?
+        { channel,
+          domainProperties: get(apiResponse, `entity.${channel}`, '')
+        } :
+        get(apiResponse, `entity.${channel}[0].domainProperties.hostName`, ''),
       });
+      
     } else {
       yield put({
         type: types.GET_SENDER_DETAILS_FAILURE,