@capillarytech/creatives-library 8.0.65-alpha.7 → 8.0.65

package/package.json

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

package/tests/integration/TemplateCreation/TemplateCreation.integration.test.js

@@ -94,13 +94,9 @@ describe("Creatives testing template creation", () => {
       name: globalMessages.email.defaultMessage,
     });
     await userEvent.click(whatsapp);
-    waitFor(() => {
-      expect(
-        creativesScreen.getByText(
-          /Whatsapp accounts are not setup for your brand/i
-        )
-      ).toBeInTheDocument();
-    }, { timeout: 50000, interval: 500 });
+    expect(await creativesScreen.findByText(
+        /Whatsapp accounts are not setup for your brand/i, undefined, { timeout: 10000 })
+    ).toBeInTheDocument();
     await userEvent.click(line);
     //assertions for template filters for line channel
     expect(creativesScreen.getByText(/rich video message/i)).toBeInTheDocument();

package/v2Containers/CreativesContainer/tests/__snapshots__/SlideBoxContent.test.js.snap

@@ -980,8 +980,8 @@ Click {{unsubscribe}} to unsubscribe
           "base": Object {
             "content": Object {
               "whatsapp": Object {
-                "accessToken": "Bearer abcd",
-                "accountId": "12345",
+                "accessToken": "Bearer gDwEuRIm9icV6phixociSw==",
+                "accountId": "107499611940863",
                 "buttonType": "CTA",
                 "buttons": Array [
                   Object {

package/v2Containers/Templates/constants.js

@@ -73,8 +73,3 @@ export const GET_SENDER_DETAILS_FAILURE =
 export const GET_CDN_TRANSFORMATION_CONFIG_REQUEST = 'app/v2Containers/Templates/GET_CDN_TRANSFORMATION_CONFIG_REQUEST';
 export const GET_CDN_TRANSFORMATION_CONFIG_SUCCESS = 'app/v2Containers/Templates/GET_CDN_TRANSFORMATION_CONFIG_SUCCESS';
 export const GET_CDN_TRANSFORMATION_CONFIG_FAILURE = 'app/v2Containers/Templates/GET_CDN_TRANSFORMATION_CONFIG_FAILURE';
-
-export const ACCOUNT_MAPPING_ON_CHANNEL = {
-  whatsapp: 'selectedWhatsappAccount',
-  zalo: 'selectedZaloAccount',
-};

package/v2Containers/Templates/index.js

@@ -21,7 +21,6 @@ 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,
@@ -97,18 +96,16 @@ import {
   FACEBOOK as FACEBOOK_CHANNEL,
   CREATE,
 } from '../App/constants';
-import {MAX_WHATSAPP_TEMPLATES, WARNING_WHATSAPP_TEMPLATES , ACCOUNT_MAPPING_ON_CHANNEL} from './constants';
+import {MAX_WHATSAPP_TEMPLATES, WARNING_WHATSAPP_TEMPLATES } 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';
@@ -126,7 +123,6 @@ 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';
@@ -251,26 +247,6 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
     this.delayTimer = 0;
   }
 
-  // This function is to map the selected source account identifier and the connectionProperties data of domainPropertiesData object to get the hostName.
-  getHostName(selectedSourceAccountIdentifier, domainPropertiesData = []) {
-    if (!selectedSourceAccountIdentifier || isEmpty(domainPropertiesData)) {
-      this.setState({ hostName: '' });
-      return '';
-    }
-  
-    const domainHostName = domainPropertiesData?.find(({ domainProperties }) => {
-      const {
-        connectionProperties: { account_sid, wabaId, userid, sourceAccountIdentifier, oa_id } = {},
-      } = domainProperties || {};
-      // If sourceAccountIdentifier is not present in the domainProperties object, then it will try to find in account_sid, wabaId, user_id.
-      // wabaId, user_id, account_sid are for Karix, Gupshup, and Twilio (Whatsapp) respectively and oa_id is for Zalo.
-      return [account_sid, wabaId, userid, oa_id, sourceAccountIdentifier].includes(selectedSourceAccountIdentifier);
-    })?.domainProperties?.hostName || '';
-  
-    this.setState({ hostName: domainHostName });
-    return domainHostName;
-  }
-
   componentWillMount() {
     if (this.state.channel === '') {
       let channel = '';
@@ -633,65 +609,51 @@ 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 = {} } = get(nextProps, 'Templates', {});
-    const weCrmChannels = [WHATSAPP_LOWERCASE, ZALO_LOWERCASE];
+    const { weCrmAccounts: weCrmAccountsList = [], senderDetails: { hostName = '' } = {} } = get(nextProps, 'Templates', {});
+    const weCrmChannels = ['wechat', WHATSAPP_LOWERCASE, ZALO_LOWERCASE];
 
-    // Keeping the wechat flow separate as it has different logic for setting the account. Currently we don't support wechat but still keeping the flow.
-    if (weCrmAccountsList?.length === 1 && this.state?.defaultAccount && selectedChannel === WECHAT_LOWERCASE && !isEmpty(senderDetails?.hostName)) {
-      const { sourceAccountIdentifier, configs } = weCrmAccountsList?.[0] || {};
+    if (weCrmAccountsList.length === 1 && this.state.defaultAccount && (weCrmChannels.indexOf(selectedChannel) > -1) && !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] || {};
       const {
+        token,
         wecrm_app_id,
         wecrm_token
       } = configs || {};
+      if (weCrmChannels.includes(selectedChannel)) {
+          if ([WHATSAPP_LOWERCASE, ZALO_LOWERCASE].includes(selectedChannel)) {
+            if (hostName === '') {
+              return;
+            }
 
-      const paramsDefault = {
-        wecrmId: wecrm_app_id,
-        wecrmToken: wecrm_token,
-        originalId: sourceAccountIdentifier,
-        name: this.state.searchText,
-        sortBy: this.state.sortBy,
+            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],
+            );
+          }
+        
       }
-      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);
     }
-
-    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)) {
-        const paramsDefault = {};
-        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;
-          paramsDefault.name = this.state.searchText;
-          paramsDefault.sortBy = this.state.sortBy;
-        }
-        this.setState({ defaultAccount: false });
-        /**
-         * 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) {
         handlePreviewInNewTab(zaloPreviewUrl);
@@ -716,7 +678,6 @@ 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;
@@ -736,41 +697,26 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
         } else {
           this.setState({ selectedAccountError: false });
         }
-      } else if ([LINE.toLowerCase(), RCS_LOWERCASE, ZALO_LOWERCASE, WHATSAPP_LOWERCASE].includes(selectedChannel)) {
+      } else if ([LINE.toLowerCase(), RCS_LOWERCASE, ZALO_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);
-
-        const {
-          name = "",
-          sourceAccountIdentifier = "",
-          configs: { token = "" } = {},
-        } = setAcc || {};
-
-        if(selectedChannel === ZALO_LOWERCASE && hostName) {
+        if(selectedChannel === ZALO_LOWERCASE){
+            const {
+              name = "",
+              sourceAccountIdentifier = "",
+              configs: { token = "" } = {},
+            } = setAcc || {};
             params.username = name;
             params.oa_id = sourceAccountIdentifier;
             params.token = token;
             params.isAccountSelection = true;
-            params.host = hostName;
-        }
-        if (selectedChannel === WHATSAPP_LOWERCASE && hostName) {
-          params.accountId = sourceAccountIdentifier;
-          params.host = hostName;
+            params.host = this.props.Templates?.senderDetails?.hostName || this.props.Templates?.selectedZaloAccount?.hostName || this.state.hostName;
         }
       }
 
-      this.setState({ activeMode: TEMPLATES_MODE }, () => {
-        // Restrict getAllTemplates call only if selectedChannel is ZALO or WHATSAPP and hostName is empty
-        if (!(isZaloOrWhatsapp && !params?.host)) {
-          this.getAllTemplates({ params, resetPage: true });
-        }
-      });
+      this.setState({activeMode: TEMPLATES_MODE});
+
+      this.getAllTemplates({params, resetPage: true});
     });
   }
   onPaginationChange = () => {
@@ -848,12 +794,6 @@ 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;
@@ -882,9 +822,6 @@ 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) {
@@ -934,9 +871,6 @@ 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;
@@ -1083,7 +1017,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
         filteredTemplates = this.filterWechatTemplates(templates);
         break;
       case WHATSAPP:
-        filteredTemplates = this.state?.hostName ? this.filterWhatsappTemplates(templates) : [];
+        filteredTemplates = this.filterWhatsappTemplates(templates);
         break;
       case LINE:
         filteredTemplates = this.filterLineTemplates(templates);
@@ -1444,16 +1378,16 @@ 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) || !this.state.hostName;
+    const noWhatsappZaloTemplates = this.isFullMode() && isEmpty(templates);
     const noFilteredWhatsappZaloTemplates = this.isFullMode() && !isEmpty(templates) && isEmpty(filteredTemplates);
-    const noApprovedWhatsappZaloTemplates = !this.isFullMode() && isEmpty(filteredTemplates) && !isEmpty(this.state?.hostName);;
-    const showWhatsappIllustration = (!isEmpty(this.props.Templates.selectedWhatsappAccount) && [WHATSAPP_LOWERCASE].includes(channelLowerCase)) || !this.state?.hostName ;
+    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 showInAppIllustration = channelLowerCase === INAPP_LOWERCASE && isEmpty(templates);
     const noLoaderAndSearchText = isEmpty(this.state.searchText) && !isLoading;
     return (<div>
-      {[WECHAT, MOBILE_PUSH, INAPP, WHATSAPP, ZALO].includes(currentChannel) && this.showAccountName()}
+      {[WECHAT, MOBILE_PUSH, INAPP].includes(currentChannel) && this.showAccountName()}
       {filterContent}
       {[WHATSAPP, ZALO].includes(currentChannel) && this.selectedFilters()}
       <CapCustomSkeleton loader={isLoading}>
@@ -1490,15 +1424,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, this.state?.hostName)} />
+                <CapIllustration buttonClassName={`create-new-${channelLowerCase}`} {...this.getChannelTypeIllustrationInfo(currentChannel)} />
               </div>
             )
           }
           {(showWhatsappIllustration || showZaloIllustration) && (
             noLoaderAndSearchText &&
               <div style={this.isFullMode() ? { height: "calc(100vh - 325px)", overflow: 'auto' } : {}}>
-                {noWhatsappZaloTemplates && <CapIllustration buttonClassName={`create-new-${channelLowerCase}`} {...this.getChannelTypeIllustrationInfo(currentChannel, isEmpty(this.state?.hostName))} />}
-                {noFilteredWhatsappZaloTemplates && this.state?.hostName && this.whatsappZaloIllustrationText('noFilteredWhatsappZaloTemplatesTitle', 'noFilteredWhatsappZaloTemplatesDesc')}
+                {noWhatsappZaloTemplates && <CapIllustration buttonClassName={`create-new-${channelLowerCase}`} {...this.getChannelTypeIllustrationInfo(currentChannel)} />}
+                {noFilteredWhatsappZaloTemplates && this.whatsappZaloIllustrationText('noFilteredWhatsappZaloTemplatesTitle', 'noFilteredWhatsappZaloTemplatesDesc')}
                 {noApprovedWhatsappZaloTemplates && this.whatsappZaloIllustrationText('noApprovedWhatsappZaloTemplatesTitle', showWhatsappIllustration ? 'noApprovedWhatsappTemplatesDesc' : 'zaloDescIllustration')}
               </div>
             )
@@ -1643,7 +1577,6 @@ 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);
@@ -1903,9 +1836,6 @@ 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});
@@ -2509,7 +2439,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
       (rcsLoader !== undefined ? rcsLoader : false);
     return isLoading;
   }
-  getChannelTypeIllustrationInfo = (type, hostNameNotFound) => {
+  getChannelTypeIllustrationInfo = (type) => {
     const { isFullMode, intl } = this.props;
     const templateIntlMsg = intl.formatMessage(messages.template);
     const templateText = isFullMode ? templateIntlMsg : '';
@@ -2535,28 +2465,16 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
           illustrationImage: pushIllustration,
           title: <FormattedMessage {...messages.pushTitleIllustartion} values={{ template: templateText }} />,
         };
-      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 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 RCS:
         return {
           buttonLabel: <FormattedMessage {...messages.newRCSTemplate} values={{ template: templateText }} />,
@@ -2567,27 +2485,15 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
           descriptionPosition: 'bottom',
           descriptionClassName: 'illustration-desc rcs-illustration',
         };
-      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 ZALO:
+        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,
@@ -2649,14 +2555,15 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
     channel = channel.toUpperCase();
     const { Templates: templates = {}, location = {} } = this.props;
     const { query = {} } = location;
-    const { weCrmAccounts = [], fetchingWeCrmAccounts = false, campaignSettings = {}, senderDetails } = templates;
+    const { weCrmAccounts = [], fetchingWeCrmAccounts = false, campaignSettings = {} } = templates;
     const isWechatChannel = channel === WECHAT;
     const isMobilePushChannel = channel === MOBILE_PUSH;
     const isInAppChannel = channel === INAPP;
     const isFacebookChannel = channel === FACEBOOK;
-    if ([WECHAT, MOBILE_PUSH, INAPP, LINE, ZALO, WHATSAPP].includes(channel) && !isEmpty(weCrmAccounts) && !isFacebookChannel) {
+
+    if ([WECHAT, MOBILE_PUSH, INAPP, LINE, ZALO].includes(channel) && !isEmpty(weCrmAccounts) && !isFacebookChannel) {
       forEach(weCrmAccounts, (account) => {
-        if ((isWechatChannel && account.configs && account.configs.is_wecrm_enabled) || [MOBILE_PUSH, INAPP, LINE, ZALO, WHATSAPP].includes(channel)) {
+        if ((isWechatChannel && account.configs && account.configs.is_wecrm_enabled) || [MOBILE_PUSH, INAPP, LINE, ZALO].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(
@@ -2739,8 +2646,9 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
         break;
     }
     let showNoAccountHeader = isEmpty(weCrmAccounts) && !fetchingWeCrmAccounts;
-    // Zalo and Whatsapp has dependencies on domainProperties to get the hostName. Show loader until the domainProperties are fetched. 
-    const isDomainPropertiesLoading = [WHATSAPP, ZALO].includes(channel) && senderDetails?.status === "REQUEST";
+    if (channel === WHATSAPP && this.state.hostName === '') {
+      showNoAccountHeader = true;
+    }
     if (channel === FACEBOOK && !isEmpty(campaignSettings) ) {
       const fbSetting = get(campaignSettings, 'accountSettings.socialAccountSettings.facebookAccountSettings', []);
       const { orgUnitFacebookPageSettingsMap } = fbSetting[0] || {};
@@ -2759,7 +2667,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
     if (channel === WECHAT && !commonUtil.hasWechatFeatureEnabled()) {
       showNoAccountHeader = true;
     }
-    return (<CapSkeleton loading={fetchingWeCrmAccounts || isDomainPropertiesLoading} active paragraph={{ rows: 10 }}>
+    return (<CapSkeleton loading={fetchingWeCrmAccounts} active paragraph={{ rows: 10 }}>
       {showNoAccountHeader ? <FormattedMessage {...noAccountHeader} /> :
       <div style={{ overflowX: "auto", paddingBottom: CAP_SPACE_16 }}>
         <CapHeader
@@ -2949,6 +2857,10 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
       }
     }
 
+    const getCategoryOptions = (hostName) => {
+      return CATEGORY_OPTIONS_MAP[hostName];
+    };
+
     const cmsTemplateSelectionContent = (
       <CardGrid
         className={""}
@@ -2962,7 +2874,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);
-    let isfilterContentVisisble = true;
+    const isfilterContentVisisble = true;
     const isWechatEmbedded = !this.props.isFullMode && channel.toUpperCase() === WECHAT;
     const channelLowerCase = (channel || '').toLowerCase();
     const isTraiDltFeature = this.checkDLTfeatureEnable();
@@ -2977,7 +2889,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
           className="create-new-link"
         />
       )
-        : this.state?.channel?.toLowerCase() === ZALO_LOWERCASE || (channelLowerCase === WHATSAPP_LOWERCASE && isEmpty(this.state?.hostName)) ? <></> : (
+        : this.state.channel.toLowerCase() === ZALO_LOWERCASE ? <></> : (
         <CapButton
           className={`create-new-${channelLowerCase} margin-l-8 margin-b-12`}
           type={"primary"}
@@ -2991,9 +2903,7 @@ 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"
@@ -3022,7 +2932,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
         channel.toUpperCase() === ZALO && (
           <div className="zalo-filters">
             {
-              this.props?.isFullMode && this.state?.hostName ? (
+              this.props.isFullMode ? (
                 <CapSelectFilter
                   placement="bottomLeft"
                   data={ZALO_STATUS_OPTIONS}
@@ -3041,7 +2951,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
       channel.toUpperCase() === WHATSAPP && (
         <div className="whatsapp-filters">
           {
-            this.props?.isFullMode && this.state?.hostName ? (
+            this.props.isFullMode ? (
               <CapSelectFilter
                 placement="bottomLeft"
                 data={STATUS_OPTIONS}
@@ -3053,20 +2963,16 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
               />
             ) : null
           }
-          {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}
+          <CapSelectFilter
+            placement="bottomLeft"
+            data={getCategoryOptions(this.state.hostName)}
+            onSelect={this.setWhatsappCategory}
+            selectedValue={this.state.selectedWhatsappCategory}
+            placeholder="Category"
+            showBadge
+            width="105px"
+            overlayStyle={{ overflowY: "hidden" }}
+          />
         </div>
 
       )
@@ -3139,7 +3045,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,18 +354,6 @@ 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,17 +180,12 @@ 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: {
-      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
+    case types.GET_SENDER_DETAILS_SUCCESS:
       return state.set('senderDetails', {
         status: 'SUCCESS',
-        [senderDetailsKey]: isMultiAccountChannel ? domainProperties : action?.payload,
+        hostName: action.payload,
         errors: [],
       });
-    }
     case types.GET_SENDER_DETAILS_FAILURE:
       return state.set('senderDetails', {
         status: 'FAILURE',

package/v2Containers/Templates/sagas.js

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