@capillarytech/creatives-library 8.0.65 → 8.0.67

package/package.json

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

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

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

package/v2Containers/Assets/images/whatsappOrZaloAccountIllustration.svg

@@ -0,0 +1,11 @@
+<svg width="152" height="152" viewBox="0 0 152 152" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M86.9122 17.3023C106.492 7.08226 130.722 14.6223 141.322 44.7423C148.432 64.9823 149.082 88.5923 137.812 106.942C132.312 115.902 123.992 123.602 112.212 129.052C107.701 131.125 102.981 132.707 98.1322 133.772C97.6822 133.882 97.1622 133.992 96.6822 134.072C78.9322 137.702 59.5622 135.072 43.2022 128.072L42.8522 127.912C28.4122 121.622 16.3222 111.892 9.85221 99.9723C9.83606 99.944 9.8199 99.9125 9.80309 99.8796C9.77827 99.8312 9.75202 99.78 9.72221 99.7323C-0.927788 79.8523 8.75221 66.6223 16.0722 60.1623C18.7689 57.8105 21.8026 55.8757 25.0722 54.4223C34.0723 50.3945 42.7163 45.6142 50.9122 40.1323C62.9722 31.8323 75.7522 23.1323 86.9122 17.3023ZM35.1022 30.6523C35.1022 30.6523 27.7822 38.6523 32.4922 42.8423C36.1322 46.1023 47.4922 40.2323 48.1222 34.7123C48.6322 30.7523 42.4222 23.6723 35.1322 30.6523H35.1022ZM25.2122 46.1223C25.2122 46.1223 21.8422 45.2723 21.9622 49.1923C22.0822 53.1123 25.7522 51.3623 26.8322 50.5823C27.9122 49.8023 29.6322 46.9623 25.2122 46.1223Z" fill="#FFD24B"/>
+<path d="M57.0425 61.592C53.7025 61.502 55.3525 61.242 59.4725 60.382C62.9825 59.652 67.6325 58.492 70.1325 56.702C79.1325 50.262 88.1325 50.122 93.2325 62.242C104.012 87.922 114.522 113.502 99.8525 134.772C99.8525 134.772 103.963 115.032 100.222 104.772C100.222 104.772 93.3525 114.152 82.9025 113.462C82.9025 113.462 99.9025 90.822 91.9025 83.042C91.9025 83.042 72.5125 73.042 74.4325 91.732C74.4325 91.732 76.6125 103.852 80.9825 109.802C80.9825 109.802 73.3325 109.342 69.1225 103.632C69.1225 103.632 66.7425 112.902 69.8825 135.632C69.8825 135.632 55.2025 118.202 68.1125 84.102C70.4025 78.122 84.2125 62.362 57.0425 61.592Z" fill="#103344"/>
+<path d="M69.4523 132.793C66.3123 110.103 69.2123 103.603 69.2123 103.603C72.1223 107.543 76.6723 108.983 79.2123 109.503C79.5447 109.528 79.8631 109.364 80.0346 109.078C80.2061 108.792 80.2014 108.434 80.0223 108.153C76.3623 101.873 74.5323 91.7027 74.5323 91.7027C72.0523 72.0127 89.9823 77.7027 92.6923 81.8127C98.4323 90.6527 87.6323 106.813 83.9723 112.013C83.7754 112.277 83.7369 112.628 83.8718 112.928C84.0067 113.229 84.2938 113.434 84.6223 113.463C94.1323 113.123 100.272 104.743 100.272 104.743C104.012 115.033 99.8023 134.473 99.8023 134.473L99.3723 138.563L69.9123 135.623L69.4523 132.793Z" fill="white"/>
+<path d="M90.2121 132.703C90.2068 135.463 88.2475 137.833 85.5375 138.357C82.8275 138.881 80.1259 137.412 79.0921 134.853C78.8219 134.182 78.6828 133.466 78.6821 132.743C78.6821 129.563 81.2721 123.643 84.4521 123.643C85.7743 123.783 86.9599 124.52 87.6721 125.643C88.0469 126.142 88.3813 126.67 88.6721 127.223C88.698 127.288 88.7281 127.351 88.7621 127.413C89.6281 129.048 90.1231 130.854 90.2121 132.703Z" fill="#A61426"/>
+<path d="M89.8224 131.882C89.822 134.474 88.0962 136.749 85.6001 137.447C83.104 138.146 80.4481 137.097 79.1024 134.882C78.8322 134.211 78.693 133.495 78.6924 132.772C78.6924 129.592 81.2824 123.672 84.4624 123.672C85.7845 123.813 86.9702 124.549 87.6824 125.672C88.0571 126.171 88.3915 126.7 88.6824 127.252C88.7083 127.317 88.7383 127.381 88.7724 127.442C89.3938 128.844 89.7498 130.35 89.8224 131.882Z" fill="#D5192E"/>
+<path d="M89.2124 130.993C89.2124 132.523 88.6045 133.99 87.5224 135.073C86.4403 136.155 84.9727 136.763 83.4424 136.763C81.7946 136.765 80.2265 136.054 79.1424 134.813C78.8722 134.142 78.7331 133.426 78.7324 132.703C78.7324 129.523 81.3224 123.603 84.5024 123.603C85.8246 123.743 87.0102 124.48 87.7224 125.603C88.6118 127.267 89.1207 129.108 89.2124 130.993Z" fill="#ED1D34"/>
+<circle cx="78.2624" cy="58.3127" r="1.34" fill="white"/>
+<circle cx="78.262" cy="58.3118" r="0.68" fill="black"/>
+<ellipse cx="82.5535" cy="126.552" rx="1.51" ry="0.9" transform="rotate(-62.05 82.5535 126.552)" fill="#F47988"/>
+</svg>

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 gDwEuRIm9icV6phixociSw==",
-                "accountId": "107499611940863",
+                "accessToken": "Bearer abcd",
+                "accountId": "12345",
                 "buttonType": "CTA",
                 "buttons": Array [
                   Object {

package/v2Containers/Templates/constants.js

@@ -73,3 +73,8 @@ 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,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,26 @@ 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 = '';
@@ -609,51 +633,65 @@ 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 = {};
-      if (this.state.channel.toLowerCase() !== ZALO_LOWERCASE) {
-        paramsDefault = {
-          name: this.state.searchText,
-          sortBy: this.state.sortBy,
-        };
-      } 
-
-      const {name, sourceAccountIdentifier, configs } = weCrmAccountsList?.[0] || {};
+    // 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] || {};
       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,
+        name: this.state.searchText,
+        sortBy: this.state.sortBy,
       }
+      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);
@@ -678,6 +716,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 +736,41 @@ 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});
+      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 });
+        }
+      });
     });
   }
   onPaginationChange = () => {
@@ -794,6 +848,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 +882,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 +934,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 +1083,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,19 +1444,20 @@ 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 getAllTemplatesInProgress = get(this.props, 'Templates.getAllTemplatesInProgress');
+    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 noApprovedWhatsappZaloTemplates = !this.isFullMode() && isEmpty(filteredTemplates) && !isEmpty(this.state?.hostName);;
+    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;
     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}>
+      <CapCustomSkeleton loader={isLoading || getAllTemplatesInProgress}>
         {<div>
           {!isEmpty(filteredTemplates) || !isEmpty(this.state.searchText) || !isEmpty(this.props.Templates.templateError) ? (
             <div className={!isEmpty(this.state.searchText) && isEmpty(cardDataList) ? '' : "pagination-container"}>
@@ -1424,15 +1491,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 +1644,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 +1904,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 +2510,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 +2536,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 +2568,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,
@@ -2555,15 +2650,14 @@ 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 = {} } = templates;
+    const { weCrmAccounts = [], fetchingWeCrmAccounts = false, campaignSettings = {}, senderDetails } = 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].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 +2740,8 @@ 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;
-    }
+    // 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 === FACEBOOK && !isEmpty(campaignSettings) ) {
       const fbSetting = get(campaignSettings, 'accountSettings.socialAccountSettings.facebookAccountSettings', []);
       const { orgUnitFacebookPageSettingsMap } = fbSetting[0] || {};
@@ -2667,7 +2760,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
     if (channel === WECHAT && !commonUtil.hasWechatFeatureEnabled()) {
       showNoAccountHeader = true;
     }
-    return (<CapSkeleton loading={fetchingWeCrmAccounts} active paragraph={{ rows: 10 }}>
+    return (<CapSkeleton loading={fetchingWeCrmAccounts || isDomainPropertiesLoading} active paragraph={{ rows: 10 }}>
       {showNoAccountHeader ? <FormattedMessage {...noAccountHeader} /> :
       <div style={{ overflowX: "auto", paddingBottom: CAP_SPACE_16 }}>
         <CapHeader
@@ -2857,10 +2950,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 +2963,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 +2978,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 +2992,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 +3023,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 +3042,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 +3054,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 +3140,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',