@capillarytech/creatives-library 7.10.57 → 7.10.59

package/v2Containers/Templates/index.js

@@ -22,31 +22,7 @@ import find from 'lodash/find';
 import map from 'lodash/map';
 import { bindActionCreators } from 'redux';
 import { Modal, Form} from 'antd';
-import {
-  CapMenu,
-  CapDropdown,
-  CapButton,
-  CapInput,
-  CapIcon,
-  CapRadioCard,
-  CapPopover,
-  CapSpin,
-  CapCustomCard,
-  CapRow,
-  CapSlideBox,
-  CapLink,
-  CapHeading,
-  CapNotification,
-  CapIllustration,
-  CapHeader,
-  CapLabel,
-  CapRadio,
-  CapSelectFilter,
-  CapTag,
-  CapTooltip,
-  CapAlert,
-  CapModal,
-} from '@capillarytech/cap-ui-library';
+import {CapMenu, CapDropdown, CapButton, CapInput, CapIcon, CapRadioCard, CapPopover, CapSpin, CapCustomCard, CapRow, CapSlideBox, CapLink, CapHeading, CapNotification, CapIllustration, CapHeader, CapLabel, CapRadio} from '@capillarytech/cap-ui-library';
 import { makeSelectTemplates, makeSelectTemplatesResponse } from './selectors';
 import { makeSelectCreate as makeSelectCreateSms} from '../Sms/Create/selectors';
 import { makeSelectCreate as makeSelectCreateMobilePush } from '../MobilePush/Create/selectors';
@@ -56,7 +32,6 @@ import { makeSelectEdit } from '../Sms/Edit/selectors';
 import { makeSelectLine } from '../Line/Container/selectors';
 import { makeSelectViber } from '../Viber/selectors';
 import { UserIsAuthenticated } from '../../utils/authWrapper';
-import { getObjFromQueryParams } from '../../utils/v2common';
 import messages from './messages';
 import {checkUnicode} from '../../utils/smsCharCountV2';
 import * as actions from './actions';
@@ -68,7 +43,7 @@ import * as emailActions from '../Email/actions';
 import * as lineActions from '../Line/Container/actions';
 import * as viberActions from '../Viber/actions';
 import * as facebookActions from '../Facebook/actions';
-import * as whatsappActions from '../Whatsapp/actions';
+
 import CardGrid from '../../v2Components/CardGrid';
 import config from '../../config/app';
 import './_templates.scss';
@@ -78,33 +53,21 @@ import * as commonUtil from '../../utils/common';
 import Pagination from '../../v2Components/Pagination';
 import EmailPreview from '../../v2Components/EmailPreview';
 import CreativesContainer from '../CreativesContainer';
-import WhatsappStatusContainer from '../../v2Components/WhatsappStatusContainer';
 import WechatRichmediaTemplatePreview from '../../v2Components/TemplatePreview/WechatRichmediaTemplatePreview';
 import {
   CHANNEL_CREATE_TRACK_MAPPING,
   CHANNEL_EDIT_TRACK_MAPPING,
   VIBER as VIBER_CHANNEL,
   FACEBOOK as FACEBOOK_CHANNEL,
-  CREATE,
 } from '../App/constants';
-import { MAX_WHATSAPP_TEMPLATES, WARNING_WHATSAPP_TEMPLATES } from './constants';
-import {
-  CATEGORY_OPTIONS,
-  STATUS_OPTIONS,
-  CATEGORY as WHATSAPP_CATEGORY,
-  STATUS as WHATSAPP_STATUS,
-  WHATSAPP_STATUSES,
-} from '../Whatsapp/constants';
-import { getWhatsappContent, getWhatsappStatus, getWhatsappCategory } from '../Whatsapp/utils';
-import { MOBILE_PUSH, WECHAT, SMS, EMAIL, EBILL, LINE, VIBER, FACEBOOK, WHATSAPP } from '../CreativesContainer/constants';
+import { MOBILE_PUSH, WECHAT, SMS, EMAIL, EBILL, LINE, VIBER, FACEBOOK } from '../CreativesContainer/constants';
 
 import {CREATIVE} from '../Facebook/constants';
 
 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 { CAP_SPACE_16, CAP_SPACE_44 } from '@capillarytech/cap-ui-library/styled/variables';
+import { CAP_SPACE_16 } from '@capillarytech/cap-ui-library/styled/variables';
 import { GA } from '@capillarytech/cap-ui-utils';
 const { timeTracker } = GA;
 const {CapCustomCardList} = CapCustomCard;
@@ -142,11 +105,6 @@ const SMS_FILTERS = {
   SERVICE_IMPLICIT: 'implicit',
 };
 
-const WHATSAPP_LOWERCASE = WHATSAPP.toLowerCase();
-const SMS_LOWERCASE = SMS.toLowerCase();
-const MOBILE_PUSH_LOWERCASE = MOBILE_PUSH.toLowerCase();
-const EBILL_LOWERCASE = EBILL.toLowerCase();
-const LINE_LOWERCASE = LINE.toLowerCase();
 export class Templates extends React.Component { // eslint-disable-line react/prefer-stateless-function
   constructor(props) {
     super(props);
@@ -175,8 +133,6 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
       wechatFilter: WECHAT_FILTERS.ALL,
       lineFilter: LINE_FILTERS.ALL,
       smsFilter: SMS_FILTERS.ALL,
-      selectedWhatsappStatus: '',
-      selectedWhatsappCategory: ''
     };
 
     this.handleOnHoverItem = this.handleOnHoverItem.bind(this);
@@ -242,11 +198,6 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
           activeMode = ACCOUNT_SELECTION_MODE;
           this.props.actions.getAccountsSettings();
           break;
-        case WHATSAPP:
-          channel = 'Whatsapp';
-          activeMode = ACCOUNT_SELECTION_MODE;
-          this.props.actions.getWeCrmAccounts(channel);
-          break;
         default:
           channel = '';
       }
@@ -267,13 +218,6 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
     if (this.props.location.query.type === 'embedded' && this.isEnabledInLibraryModule("setLocale")) {
       this.setLocale();
     }
-
-    // opening the create slidebox based on query params
-    const queryItems = getObjFromQueryParams(location.search);
-    if (queryItems.channel === WHATSAPP_LOWERCASE && queryItems.mode === CREATE) {
-      this.createTemplate();
-    }
-
     if (this.props.location.query.type === 'embedded') {
       this.props.actions.resetAccount();
     }
@@ -301,8 +245,9 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
     };
     const { totalCount: nextPropsTotalTemplatesCount } = nextProps?.TemplatesList?.[0] || {};
     const { totalCount: propsTotalTemplatesCount } = this.props?.TemplatesList?.[0] || {};
+    const { templatesCount } = this.state || {};
 
-    if (nextPropsTotalTemplatesCount && nextPropsTotalTemplatesCount !== propsTotalTemplatesCount) {
+    if (nextPropsTotalTemplatesCount && nextPropsTotalTemplatesCount !== propsTotalTemplatesCount && templatesCount === 0) {
       this.setState({ templatesCount: nextPropsTotalTemplatesCount });
     }
     if (!isEqual(nextProps.route.name, this.props.route.name)) {
@@ -464,31 +409,20 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
       if ((this.state.channel || '').toLowerCase() !== "sms") {
         CapNotification.error({key: 'somethingWrong', message});
       }
-      const { smsActions, mobilepushActions, ebillActions, lineActions, viberActions, facebookActions, whatsappActions } = this.props;
-      switch (selectedChannel) {
-        case SMS_LOWERCASE:
-          smsActions.clearCreateResponse();
-          break;
-        case MOBILE_PUSH_LOWERCASE:
-          mobilepushActions.clearCreateResponse();
-          break;
-        case EBILL_LOWERCASE:
-          ebillActions.clearCreateResponse();
-          break;
-        case LINE_LOWERCASE:
-          lineActions.clearCreateResponse();
-          break;
-        case VIBER_CHANNEL:
-          viberActions.clearCreateResponse();
-          break;
-        case FACEBOOK_CHANNEL:
-          facebookActions.clearCreateResponse();
-          break;
-        case WHATSAPP_LOWERCASE:
-          whatsappActions.clearCreateResponse();
-          break;
-        default:
-          break;
+      if ( this.state.channel) {
+        if (this.state.channel.toLowerCase() === "sms") {
+          this.props.smsActions.clearCreateResponse();
+        } else if (this.state.channel.toLowerCase() === "mobilepush") {
+          this.props.mobilepushActions.clearCreateResponse();
+        } else if (this.state.channel.toLowerCase() === "ebill") {
+          this.props.ebillActions.clearCreateResponse();
+        } else if (this.state.channel.toLowerCase() === "line") {
+          this.props.lineActions.clearCreateResponse();
+        } else if (this.state.channel.toLowerCase() === VIBER_CHANNEL) {
+          this.props.viberActions.clearCreateResponse();
+        } else if (this.state.channel.toLowerCase() === FACEBOOK_CHANNEL) {
+          this.props.facebookActions.clearCreateResponse();
+        }
       }
     }
 
@@ -529,25 +463,16 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
       this.setState({previewTemplate: nextProps.Templates.templateDetails});
     }
 
-    if (nextProps.Templates.weCrmAccounts !== undefined && nextProps.Templates.weCrmAccounts.length === 1 && this.state.defaultAccount && (['wechat', WHATSAPP_LOWERCASE].indexOf(this.state.channel.toLowerCase()) > -1 )) {
+    if (nextProps.Templates.weCrmAccounts !== undefined && nextProps.Templates.weCrmAccounts.length === 1 && this.state.defaultAccount && (['wechat'].indexOf(this.state.channel.toLowerCase()) > -1)) {
       const paramsDefault = {
         name: this.state.searchText,
         sortBy: this.state.sortBy,
       };
-      if (['wechat', WHATSAPP_LOWERCASE].includes(this.state.channel.toLowerCase())) {
+      if (this.state.channel.toLowerCase() === 'wechat') {
         paramsDefault.wecrmId = nextProps.Templates.weCrmAccounts[0].configs.wecrm_app_id;
         paramsDefault.wecrmToken = nextProps.Templates.weCrmAccounts[0].configs.wecrm_token;
         paramsDefault.originalId = nextProps.Templates.weCrmAccounts[0].sourceAccountIdentifier;
-        if (this.state.channel.toLowerCase() === WHATSAPP_LOWERCASE) {
-          nextProps.actions.setChannelAccount(
-            WHATSAPP,
-            nextProps.Templates.weCrmAccounts[0],
-          );
-        } else {
-          nextProps.actions.setWeChatAccount(
-            nextProps.Templates.weCrmAccounts[0],
-          );
-        }
+        nextProps.actions.setWeChatAccount(nextProps.Templates.weCrmAccounts[0]);
       }
       this.setState({defaultAccount: false, activeMode: TEMPLATES_MODE, selectedAccount: nextProps.Templates.weCrmAccounts[0].name });
       this.getAllTemplates({params: paramsDefault}, true);
@@ -587,10 +512,8 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
         } else {
           this.setState({selectedAccountError: false});
         }
-      } else if (this.state.channel.toLowerCase() === LINE.toLowerCase()) {
-        this.props.actions.setChannelAccount(LINE, this.props.Templates.weCrmAccounts.find((item) => item.name === this.state.selectedAccount));
-      } else if (this.state.channel.toLowerCase() === WHATSAPP_LOWERCASE) {
-        this.props.actions.setChannelAccount(WHATSAPP, this.props.Templates.weCrmAccounts.find((item) => item.name === this.state.selectedAccount));
+      } else if (this.state.channel.toLowerCase() === 'line') {
+        this.props.actions.setLineAccount(this.props.Templates.weCrmAccounts.find((item) => item.name === this.state.selectedAccount));
       }
 
       this.setState({activeMode: TEMPLATES_MODE});
@@ -603,7 +526,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
   }
   onCreateComplete = (isReloadTemplates) => {
     this.setState({routeParams: null, previewOpen: false}, () => {
-      if (this.isFullMode() && (isReloadTemplates)) {
+      if (this.isFullMode() && isReloadTemplates) {
         this.getAllTemplates({params: {}}, true);
       }
     });
@@ -623,7 +546,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
       const { pathname } = routeParams;
       if (pathname.includes('create')) {
         creativesParams.mode = 'create';
-      } else if (pathname.includes('edit') || pathname.includes('overview')) {
+      } else if (pathname.includes('edit')) {
         creativesParams.mode = 'edit';
         if (pathname.includes('richmedia')) {
           creativesParams._id = pathname.split('/')[4];
@@ -634,12 +557,6 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
           creativesParams._id = pathname.split('/')[3];
           creativesParams.modeType = pathname.split('/')[4];
           creativesParams.account = pathname.split('/')[5];
-          if (this.state.channel.toLowerCase() === WHATSAPP_LOWERCASE) {
-            const whatsappSelectedTemplateData = this.selectTemplate(creativesParams._id) || {};
-            const { name = '', versions = {} } = whatsappSelectedTemplateData;
-            creativesParams.whatsappTemplateName = name;
-            creativesParams.whatsappTemplateCategory = get(versions, `base.content.whatsapp.category`, '');
-          }
         }
         creativesParams.type = this.state.channel.toUpperCase();
       }
@@ -737,36 +654,6 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
         return templates;
     }
   }
-
-  isStatusMatching = (status, selectedWhatsappStatus) => {
-    if(this.props.isFullMode && selectedWhatsappStatus) {
-      if ( [WHATSAPP_STATUSES.unsubmitted, WHATSAPP_STATUSES.pending].includes(status) ) {
-        return selectedWhatsappStatus === WHATSAPP_STATUSES.awaitingApproval;
-      }
-        return selectedWhatsappStatus === status;
-    }
-    else if (!this.props.isFullMode){
-      return status === WHATSAPP_STATUSES.approved;
-    }
-    return true;
-  }
-
-  filterWhatsappTemplates = (templates) => {
-    const { selectedWhatsappStatus, selectedWhatsappCategory } = this.state;
-    return templates.filter((template) => {
-      const { [WHATSAPP_CATEGORY]: category, [WHATSAPP_STATUS]: status } = template?.versions?.base?.content?.[WHATSAPP_LOWERCASE] || {};
-
-      // if status or category filter is applied, filter templates which match these filters
-      return (
-        this.isStatusMatching(status, selectedWhatsappStatus)
-      ) && (
-        selectedWhatsappCategory
-        ? category === selectedWhatsappCategory
-        : true
-      );
-    });
-  }
-  
   filterSMSTemplates = (templates) => {
     const { smsFilter } = this.state;
     if (SMS_FILTERS.ALL === smsFilter) {
@@ -775,44 +662,22 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
     return templates.filter((template) => template.versions.base.type?.toLowerCase()?.includes(smsFilter));
   }
 
-  getCreativesEditText = (channel) => {
-    if (channel === WHATSAPP_LOWERCASE) {
-      return messages.whatsappOverview;
-    }
-    return messages.creativesTemplatesEdit;
-  }
-
   getTemplateDataForGrid = ({templates, handlers, filterContent, channel, isLoading, loadingTip}) => {
     const currentChannel = channel.toUpperCase();
     const {channel: stateChannel} = this.state;
     const channelLowerCase = stateChannel.toLowerCase();
     let filteredTemplates = templates;
     let isTraiDltFeature = false;
-    switch (currentChannel) {
-      case WECHAT:
-        filteredTemplates = this.filterWechatTemplates(templates);
-        break;
-      case WHATSAPP:
-        filteredTemplates = this.filterWhatsappTemplates(templates);
-        break;
-      case LINE:
-        filteredTemplates = this.filterLineTemplates(templates);
-        break;
-      case SMS:
-        filteredTemplates = this.filterSMSTemplates(templates);
-        isTraiDltFeature = this.checkDLTfeatureEnable();
-        break;
-      default:
-        break;
+    if (currentChannel === WECHAT) {
+      filteredTemplates = this.filterWechatTemplates(templates);
+    }
+    if (currentChannel === LINE) {
+      filteredTemplates = this.filterLineTemplates(templates);
+    }
+    if (currentChannel === SMS) {
+      filteredTemplates = this.filterSMSTemplates(templates);
+      isTraiDltFeature = this.checkDLTfeatureEnable();
     }
-
-    const hoverButtonText =
-      this.props.intl.formatMessage(
-        this.props.isFullMode
-        ? this.getCreativesEditText(channelLowerCase)
-        : messages.selectButton
-      );
-
     const cardDataList = filteredTemplates && filteredTemplates.length ? map(filteredTemplates, (template) => {
       const templateData =
         {
@@ -826,18 +691,18 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
               onClick={() => { if (this.props.isFullMode) { handlers.handlePreviewClick(template); } else { this.props.handlePeviewTemplate(template); } }}
               />,
           ],
-          hoverOption: <CapButton className={this.props.isFullMode ? `edit-${channelLowerCase}` : `select-${channelLowerCase}`} onClick={(e) => handlers.handleEditClick(e, template, undefined, undefined, {account: this.state.selectedAccount})}>{hoverButtonText}</CapButton>,
+          hoverOption: <CapButton className={this.props.isFullMode ? `edit-${channelLowerCase}` : `select-${channelLowerCase}`} onClick={(e) => handlers.handleEditClick(e, template, undefined, undefined, {account: this.state.selectedAccount})}>{this.props.intl.formatMessage(this.props.isFullMode ? messages.creativesTemplatesEdit : messages.selectButton)}</CapButton>,
         };
       if (this.props.isFullMode) {
         templateData.extra.push(<CapDropdown
           overlay={
             <CapMenu>
-              { ![WECHAT, WHATSAPP].includes(this.state.channel.toUpperCase()) && !isTraiDltFeature && <CapMenu.Item className={`duplicate-${channelLowerCase}`} onClick={() => this.duplicateTemplate(template)}>
+              {this.state.channel.toUpperCase() !== WECHAT && !isTraiDltFeature && <CapMenu.Item className={`duplicate-${channelLowerCase}`} onClick={() => this.duplicateTemplate(template)}>
                 <FormattedMessage {...messages.duplicateButton} />
               </CapMenu.Item>}
               <CapMenu.Item
                 className={this.state.channel.toUpperCase() === WECHAT && !template.definition ? `unmap-${channelLowerCase}` : `delete-${channelLowerCase}`}
-                onClick={() => this.toggleDeleteTemplateModal(template)}
+                onClick={() => this.deleteTemplate(template)}
               >
                 {this.state.channel.toUpperCase() === WECHAT && !template.definition ? <FormattedMessage {...messages.unMapButton} /> : <FormattedMessage {...messages.deleteButton} />}
               </CapMenu.Item>
@@ -969,16 +834,6 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
           }
           break;
         }
-        case WHATSAPP:
-          templateData.title = (
-            <CapRow className="whatsapp-card-title">
-              <CapLabel>{template.name}</CapLabel>
-              <WhatsappStatusContainer template={template} />
-            </CapRow>
-          );
-
-          templateData.content = getWhatsappContent(template);
-          break;
         default:
           templateData.content = "";
       }
@@ -987,9 +842,8 @@ 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');
     return (<div>
-      {[WECHAT, MOBILE_PUSH].includes(currentChannel) && this.showAccountName()}
+      { [WECHAT, MOBILE_PUSH].includes(currentChannel) && this.showAccountName() }
       {filterContent}
-      {[WHATSAPP].includes(currentChannel) && this.selectedFilters()}
       <CapSpin spinning={isLoading} tip={loadingTip} style={{width: '100%'}}>
         {<div>
           {!isEmpty(filteredTemplates) || !isEmpty(this.state.searchText) || !isEmpty(this.props.Templates.templateError) ? (
@@ -1011,7 +865,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
           </div>
           }
 
-          { !isEmpty(this.props.Templates.selectedWeChatAccount) && ["mobilepush"].includes(this.state.channel.toLowerCase()) && this.state.selectedAccountError ?
+          { !isEmpty(this.props.Templates.selectedWeChatAccount) && this.state.channel.toLowerCase() === "mobilepush" && this.state.selectedAccountError ?
             <div style={{ height: '65vh', textAlign: 'center', lineHeight: '65vh'}}>
               <CapHeading type="h6" >
                 {this.props.intl.formatMessage(messages.accountConfigError)}
@@ -1028,35 +882,6 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
               </div>
             )
           }
-          { !isEmpty(this.props.Templates.selectedWhatsappAccount) && [WHATSAPP_LOWERCASE].includes(this.state.channel.toLowerCase()) && this.state.selectedAccountError ?
-            <div style={{ height: '65vh', textAlign: 'center', lineHeight: '65vh'}}>
-              <CapHeading type="h6" >
-                {this.props.intl.formatMessage(messages.accountConfigError)}
-                <InlineDiv>
-                  <CapLink title="here" style={{display: 'inline'}} onClick={() => { window.open(config.production.accountConfig`${accountId}`); }}/>
-                </InlineDiv>
-              </CapHeading>
-            </div> : (
-              [WHATSAPP_LOWERCASE].includes(this.state.channel.toLowerCase()) &&
-              isEmpty(this.state.searchText) &&
-              !isLoading &&
-              <div style={this.isFullMode() ? { height: "calc(100vh - 325px)", overflow: 'auto' } : {}}>
-                {isEmpty(templates) && <CapIllustration buttonClassName={`create-new-${channelLowerCase}`} {...this.getChannelTypeIllustrationInfo(currentChannel)} />}
-                {!isEmpty(templates) && isEmpty(filteredTemplates) && <CapHeader
-                  title={
-                    <CapHeading type="h3" style={{ textAlign: "center", marginTop: CAP_SPACE_44 }}>
-                      {this.props.intl.formatMessage(messages.noFilteredWhatsappTemplatesTitle)}
-                    </CapHeading>
-                  }
-                  description={
-                    <CapLabel style={{ textAlign: "center" }}>
-                      {this.props.intl.formatMessage(messages.noFilteredWhatsappTemplatesDesc)}
-                    </CapLabel>
-                  }
-                />}
-              </div>
-            )
-          }
         </div>
         }
 
@@ -1363,7 +1188,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
       } else {
         this.props.createNew();
       }
-    } else if (ev?.key && (ev.key.toLowerCase() === "text" || ev.key.toLowerCase() === "image")) {
+    } else if (ev.key && (ev.key.toLowerCase() === "text" || ev.key.toLowerCase() === "image")) {
       routeParams = {
         pathname: `/${channel === 'line' ? 'line' : 'mobilepush'}/create/${ev.key.toLowerCase()}`,
         query: type === 'embedded' ? {type: 'embedded', module} : {module},
@@ -1631,9 +1456,6 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
         pathName = `/wechat/edit/${id}`;
       }
     }
-    if (this.state.channel.toUpperCase() === WHATSAPP) {
-      pathName = `/whatsapp/edit/${id}/`;
-    }
     if (this.isEnabledInLibraryModule("callSelectFromProps")) {
       let data = id;
       if (this.props.fbAdManager) {
@@ -1894,7 +1716,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
     if (this.props.location.query.type === "embedded" && this.props.location.query.module === "library") {
       switch (property) {
         case "showAccountSelection":
-          return (this.props.route && (['wechat', 'mobilepush', WHATSAPP_LOWERCASE].includes(this.props.route.name.toLowerCase())));
+          return (this.props.route && (this.props.route.name.toLowerCase() === "wechat" || this.props.route.name.toLowerCase() === "mobilepush"));
         case "setLocale":
           return true;
         case "callCreateFromProps":
@@ -1912,13 +1734,9 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
   isCreateDisabled = () => {
     let isDisabled = this.isLoading();
     const channel = this.state.channel.toUpperCase();
-    if (channel === MOBILE_PUSH || channel === WECHAT || channel === WHATSAPP) {
+    if (channel === MOBILE_PUSH || channel === WECHAT) {
       isDisabled = isDisabled || isEmpty(this.props.Templates.selectedWeChatAccount);
     }
-    if (channel === WHATSAPP) {
-      // limit on max number of templates allowed for whatsapp
-      isDisabled = this.state.templatesCount >= MAX_WHATSAPP_TEMPLATES;
-    }
     if (channel === MOBILE_PUSH) {
       isDisabled = this.checkSearchDisabled();
     }
@@ -1940,7 +1758,6 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
     const facebookLoader = (getAllTemplatesInProgress && this.state.channel.toLowerCase() === FACEBOOK_CHANNEL);
 
     const wechatLoader = (((this.state.selectedAccount !== '' && getAllTemplatesInProgress) || (fetchingWeCrmAccounts)) && this.state.channel.toLowerCase() === 'wechat');
-    const whatsappLoader = (((this.state.selectedAccount !== '' && getAllTemplatesInProgress) || (fetchingWeCrmAccounts)) && this.state.channel.toLowerCase() === WHATSAPP_LOWERCASE);
     const mobilePushLoader = (((getAllTemplatesInProgress) || (fetchingWeCrmAccounts)) && this.state.channel.toLowerCase() === 'mobilepush');
     const emailLoader = (
       (getAllTemplatesInProgress ||
@@ -1949,7 +1766,6 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
       EmailCreate.duplicateTemplateInProgress) && this.state.channel.toLowerCase() === 'email');
     const ebillLoader = ((getAllTemplatesInProgress || sendingFile) && this.state.channel.toLowerCase() === 'ebill');
     const isLoading = ((wechatLoader !== undefined) ? wechatLoader : false) ||
-      (whatsappLoader !== undefined ? whatsappLoader : false) ||
       (smsLoader !== undefined ? smsLoader : false) ||
       (emailLoader !== undefined ? emailLoader : false) ||
       (ebillLoader !== undefined ? ebillLoader : false) ||
@@ -1985,16 +1801,6 @@ 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: 'whatsapp-illustration-desc',
-        };
       default:
         return {};
     }
@@ -2018,25 +1824,21 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
     );
   }
   renderDeleteConfirmationModal = () => {
-    const {
-      intl: {
-        formatMessage,
-      } = {},
-    } = this.props;
-
-    const modal = ( <CapModal
-      className="delete-template-confirm"
-      title={formatMessage(messages.areYouSureText)}
+    const modal =
+    (<Modal
       visible={this.state.showModal}
+      title={"Alert"}
       onOk={this.handleOk}
       onCancel={this.handleCancel}
-      centered
-      okText={formatMessage(messages.yesText)}
-      closeText={formatMessage(messages.cancelText)}
+      footer={[
+        <CapButton key="back" onClick={this.handleCancel}>{this.props.intl.formatMessage(messages.cancelText)}</CapButton>,
+        <CapButton key="submit" type="primary" id="delete-version" onClick={this.handleOk}>
+          {this.props.intl.formatMessage(messages.yesText)}
+        </CapButton>,
+      ]}
     >
-      {formatMessage(messages.templateDeleteConfirm)}
-    </CapModal>
-    );
+      {this.props.intl.formatMessage(messages.templateDeleteConfirm)}
+    </Modal>);
     return modal;
   };
 
@@ -2050,11 +1852,13 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
     const { weCrmAccounts = [], fetchingWeCrmAccounts = false, campaignSettings = {} } = templates;
     const isWechatChannel = channel === WECHAT;
     const isMobilePushChannel = channel === MOBILE_PUSH;
-    const isFacebookChannel = channel === FACEBOOK;    
+    const isLineChannel = channel === LINE;
+    const isFacebookChannel = channel === FACEBOOK;
+
 
-    if ([WECHAT, MOBILE_PUSH, LINE, WHATSAPP].includes(channel) && !isEmpty(weCrmAccounts) && !isFacebookChannel) {
+    if ((isWechatChannel || isMobilePushChannel || isLineChannel) && !isEmpty(weCrmAccounts) && !isFacebookChannel ) {
       forEach(weCrmAccounts, (account) => {
-        if ((isWechatChannel && account.configs && account.configs.is_wecrm_enabled) || [MOBILE_PUSH, LINE, WHATSAPP].includes(channel)) {
+        if ((isWechatChannel && account.configs && account.configs.is_wecrm_enabled) || isMobilePushChannel || isLineChannel) {
           if (query.type === 'embedded' && (!query.module || (query.module && query.module !== 'library'))) {
             if (query.source_account_id && account.sourceAccountIdentifier === query.source_account_id) {
               accountOptions.push(
@@ -2118,11 +1922,6 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
         noAccountHeader = messages.noAccountsPresentFacebook;
         break;
       }
-      case WHATSAPP: {
-        accountHeader = formatMessage(messages.whatsappAccount);
-        noAccountHeader = messages.noAccountsPresentWhatsapp;
-        break;
-      }
       default:
         break;
     }
@@ -2178,102 +1977,27 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
     this.setState({activeMode: TEMPLATES_MODE});
   }
 
-  accountNameMessage = (channel) => {
-    const {
-      intl: {
-        formatMessage,
-      },
-    } = this.props;
-
-    const channelObj = {
-      [MOBILE_PUSH]: 'mobilepushAccount',
-      [WECHAT]: 'wechatAccount',
-      [WHATSAPP]: 'whatsappAccount',
-    }
-    return formatMessage(messages[channelObj[channel?.toUpperCase()]]);
-  }
-
   showAccountName = () => {
     const { activeMode, selectedAccount, channel } = this.state;
     const { Templates: templates = {}} = this.props;
-    const { weCrmAccounts = [] } = templates;
+    const { weCrmAccounts = []} = templates;
+    const isMobilePushChannel = channel === MOBILE_PUSH;
     return (activeMode !== ACCOUNT_CHANGE_MODE &&
     <CapHeader
-      title={<CapHeading type="h4">{this.accountNameMessage(channel)}</CapHeading>}
+      title={<CapHeading type="h4">{isMobilePushChannel ? this.props.intl.formatMessage(messages.mobilepushAccount) : this.props.intl.formatMessage(messages.wechatAccount)}</CapHeading>}
       description={<><CapHeading type="h3">{selectedAccount} {weCrmAccounts.length > 1 && <CapLink onClick={this.setAccountChangeMode} style={{display: 'inline-block', position: 'relative', top: '3px'}} fontWeight="regular" fontSize="14px" title="change"/>} </CapHeading></>}
       size="regular"
   />);
   }
 
-  removeWhatsappFilter = (filter) => {
-    switch (filter) {
-      case WHATSAPP_STATUS:
-        this.setState({ selectedWhatsappStatus: null });
-        break;
-      case WHATSAPP_CATEGORY:
-        this.setState({ selectedWhatsappCategory: null });
-        break;
-      default:
-        break;
-    }
-  }
-
-  selectedFilters = () => {
-    const { selectedWhatsappStatus, selectedWhatsappCategory } = this.state;
-    const {
-      intl: {
-        formatMessage,
-      },
-    } = this.props;
-    return (
-      <CapRow type="flex" align="middle" className="selected-whatsapp-filters">
-        {
-          selectedWhatsappStatus ? (
-            <CapTag closable onClose={() => this.removeWhatsappFilter(WHATSAPP_STATUS)}>
-              {formatMessage(messages.status)}: {getWhatsappStatus(selectedWhatsappStatus)?.label || selectedWhatsappStatus}
-            </CapTag>
-          ) : null
-        }
-        {
-          selectedWhatsappCategory ? (
-            <CapTag closable onClose={() => this.removeWhatsappFilter(WHATSAPP_CATEGORY)}>
-              {formatMessage(messages.category)}: {getWhatsappCategory(selectedWhatsappCategory)?.label || selectedWhatsappCategory}
-            </CapTag>
-          ) : null
-        }
-        {
-          (selectedWhatsappStatus || selectedWhatsappCategory) ? (
-            <CapLink
-              onClick={() => {
-                this.removeWhatsappFilter(WHATSAPP_STATUS);
-                this.removeWhatsappFilter(WHATSAPP_CATEGORY);
-              }}
-              title={this.props.intl.formatMessage(messages.clearAll)}
-            />
-          ) : null
-        }
-      </CapRow>
-    );
-  }
-
   setWechatFilter = (e) => this.setState({wechatFilter: e.target.value});
-  setWhatsappStatus = (value) => this.setState({selectedWhatsappStatus: value?.item?.props?.value});
-  setWhatsappCategory = (value) => this.setState({selectedWhatsappCategory: value?.item?.props?.value});
   setLineFilter = (e) => this.setState({lineFilter: e.target.value});
   setSMSFilter = (e) => this.setState({smsFilter: e.target.value});
 
-  openCreativesFullMode = () => {
-    window.open(`/creatives/ui/v2?channel=${WHATSAPP_LOWERCASE}&mode=${CREATE}`, "_blank");
-  }
 
   render() {
     const isFullMode = this.isFullMode();
-    const { activeMode, channel, wechatFilter, lineFilter, smsFilter, templatesCount } = this.state;
-    const {
-      intl: {
-        formatMessage,
-      } = {},
-    } = this.props || {};
+    const { activeMode, channel, wechatFilter, lineFilter, smsFilter } = this.state;
     let showFbAds = false;
     if (channel.toLowerCase() === FACEBOOK_CHANNEL) {
       const {campaignSettings, fetchedOrgLevelCampaignSettings} = this?.props?.Templates || {};
@@ -2337,33 +2061,6 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
     const isWechatEmbedded = !this.props.isFullMode && channel.toUpperCase() === WECHAT;
     const channelLowerCase = (channel || '').toLowerCase();
     const isTraiDltFeature = this.checkDLTfeatureEnable();
-
-    const createButton = 
-      ( channelLowerCase === WHATSAPP_LOWERCASE && !this.props.isFullMode )
-      ? (
-        <CapLink 
-          onClick={this.openCreativesFullMode} 
-          title={formatMessage(messages.createNewTemplateLink)} 
-          suffix={<CapIcon type="open-in-new" size="s" />}
-          className="create-new-link"
-        />
-      )
-      : (
-        <CapButton
-          className={`create-new-${channelLowerCase}`}
-          type={"primary"}
-          disabled={this.isCreateDisabled()}
-          style={{marginLeft: '8px', marginBottom: '12px'}}
-          onClick={this.createTemplate}
-        >
-          { this.props.intl.formatMessage((isTraiDltFeature && channel.toUpperCase() === SMS ) ? messages.uploadTemplate : messages.createNewActionButton) }
-        </CapButton>
-      );
-
-    const isWhatsappCountExeeded = templatesCount >= MAX_WHATSAPP_TEMPLATES;
-    const showWhatsappCountWarning = templatesCount >= WARNING_WHATSAPP_TEMPLATES;
-    const whatsappCountExceedText = <FormattedMessage {...messages.whatsappMaxTemplates} values={{ maxCount: MAX_WHATSAPP_TEMPLATES }}/>;
-
     const filterContent = (( isfilterContentVisisble || [WECHAT, MOBILE_PUSH].includes(this.state.channel.toUpperCase())) && <div className="action-container">
       {isfilterContentVisisble && <CapInput.Search
         className="search-text"
@@ -2388,36 +2085,6 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
           </CapLabel></CapRadio.Button>
         </CapRadio.CapRadioGroup>
       }
-      {
-        channel.toUpperCase() === WHATSAPP && (
-          <div className="whatsapp-filters">
-            {
-              this.props.isFullMode ? (
-                <CapSelectFilter
-                  placement="bottomLeft"
-                  data={STATUS_OPTIONS}
-                  onSelect={this.setWhatsappStatus}
-                  selectedValue={this.state.selectedWhatsappStatus}
-                  placeholder="Status"
-                  showBadge={true}
-                  width="90px"
-                />
-              ) : null
-            }
-            <CapSelectFilter
-              placement="bottomLeft"
-              data={CATEGORY_OPTIONS}
-              onSelect={this.setWhatsappCategory}
-              selectedValue={this.state.selectedWhatsappCategory}
-              placeholder="Category"
-              showBadge={true}
-              width="105px"
-              overlayStyle={{ overflowY: "hidden" }}
-            />
-          </div>
-          
-        )
-      }
       {
         channel.toUpperCase() === LINE &&
           isFullMode
@@ -2485,16 +2152,14 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
           : () => null
       }
       <div style={{display: "flex", justifyContent: "space-between", alignItems: 'center'}}>
-        {
-          this.state.channel.toLowerCase() === WHATSAPP_LOWERCASE && isWhatsappCountExeeded ? (
-            <CapTooltip title={whatsappCountExceedText}>
-              <div className="button-disabled-tooltip-wrapper">
-                {createButton}
-              </div>
-            </CapTooltip>
-          )
-          : isfilterContentVisisble && !isWechatEmbedded && createButton
-        }
+        {isfilterContentVisisble && !isWechatEmbedded && <CapButton
+          className={`create-new-${channelLowerCase}`}
+          type={"primary"}
+          disabled={this.isCreateDisabled()}
+          style={{marginLeft: '8px', marginBottom: '12px'}}
+          onClick={this.createTemplate} >
+          { this.props.intl.formatMessage((isTraiDltFeature && channel.toUpperCase() === SMS ) ? messages.uploadTemplate : messages.createNewActionButton) }
+        </CapButton>}
       </div>
 
     </div>);
@@ -2528,11 +2193,6 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
         <div className={`creatives-templates-list ${this.props.isFullMode ? 'full-mode' : 'library-mode'}`}>
           <input type="file" id="filename" style={{ display: 'none'}} accept=".zip, .html, .htm" onChange={(event) => this.handleFileUpload(event, {files: event.target.files})} />
 
-          {
-            channel.toLowerCase() === WHATSAPP_LOWERCASE && showWhatsappCountWarning ? (
-              <CapAlert message={whatsappCountExceedText} type="info" />
-            ) : null
-          }
 
           <CapRow>
             <Pagination onPageChange={templates.length ? this.onPaginationChange : () => {}} paginationSelector="pagination-container">
@@ -2540,11 +2200,6 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
             </Pagination>
             {(((this.state.selectedAccount !== '' && !isEmpty(this.props.Templates.selectedWeChatAccount) && this.state.channel.toLowerCase() === 'wechat') || this.state.channel.toLowerCase() !== 'wechat') && isEmpty(this.props.TemplatesList)) && !this.props.Templates.getAllTemplatesInProgress && !isEmpty(this.state.searchText) &&
             <div style={{ height: '65vh', textAlign: 'center', lineHeight: '65vh'}}>
-                        {
-            channel.toLowerCase() === WHATSAPP_LOWERCASE ? (
-              <CapAlert message={whatsappCountExceedText} type="info" />
-            ) : null
-          }
               <CapHeading type="h6">{this.props.intl.formatMessage(messages.noTemplatesFound)}</CapHeading>
             </div>}
           </CapRow>
@@ -2622,7 +2277,6 @@ Templates.propTypes = {
   router: PropTypes.object,
   viberActions: PropTypes.object,
   facebookActions: PropTypes.object,
-  whatsappActions: PropTypes.object,
   smsRegister: PropTypes.any,
 };
 
@@ -2651,7 +2305,6 @@ function mapDispatchToProps(dispatch) {
     lineActions: bindActionCreators(lineActions, dispatch),
     viberActions: bindActionCreators(viberActions, dispatch),
     facebookActions: bindActionCreators(facebookActions, dispatch),
-    whatsappActions: bindActionCreators(whatsappActions, dispatch),
   };
 }