@capillarytech/creatives-library 7.10.59 → 7.10.61

package/v2Containers/Templates/index.js

@@ -22,7 +22,31 @@ 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} from '@capillarytech/cap-ui-library';
+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 { makeSelectTemplates, makeSelectTemplatesResponse } from './selectors';
 import { makeSelectCreate as makeSelectCreateSms} from '../Sms/Create/selectors';
 import { makeSelectCreate as makeSelectCreateMobilePush } from '../MobilePush/Create/selectors';
@@ -32,6 +56,7 @@ 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';
@@ -43,7 +68,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';
@@ -53,21 +78,33 @@ 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 { MOBILE_PUSH, WECHAT, SMS, EMAIL, EBILL, LINE, VIBER, FACEBOOK } from '../CreativesContainer/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 {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 { CAP_SPACE_16 } from '@capillarytech/cap-ui-library/styled/variables';
+import whatsappIllustration from '../Assets/images/whatsappIllustration.png';
+import { CAP_SPACE_16, CAP_SPACE_44 } from '@capillarytech/cap-ui-library/styled/variables';
 import { GA } from '@capillarytech/cap-ui-utils';
 const { timeTracker } = GA;
 const {CapCustomCardList} = CapCustomCard;
@@ -105,6 +142,11 @@ 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);
@@ -133,6 +175,8 @@ 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);
@@ -198,6 +242,11 @@ 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 = '';
       }
@@ -218,6 +267,13 @@ 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();
     }
@@ -245,9 +301,8 @@ 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 && templatesCount === 0) {
+    if (nextPropsTotalTemplatesCount && nextPropsTotalTemplatesCount !== propsTotalTemplatesCount) {
       this.setState({ templatesCount: nextPropsTotalTemplatesCount });
     }
     if (!isEqual(nextProps.route.name, this.props.route.name)) {
@@ -409,20 +464,31 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
       if ((this.state.channel || '').toLowerCase() !== "sms") {
         CapNotification.error({key: 'somethingWrong', message});
       }
-      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();
-        }
+      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;
       }
     }
 
@@ -463,16 +529,25 @@ 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'].indexOf(this.state.channel.toLowerCase()) > -1)) {
+    if (nextProps.Templates.weCrmAccounts !== undefined && nextProps.Templates.weCrmAccounts.length === 1 && this.state.defaultAccount && (['wechat', WHATSAPP_LOWERCASE].indexOf(this.state.channel.toLowerCase()) > -1 )) {
       const paramsDefault = {
         name: this.state.searchText,
         sortBy: this.state.sortBy,
       };
-      if (this.state.channel.toLowerCase() === 'wechat') {
+      if (['wechat', WHATSAPP_LOWERCASE].includes(this.state.channel.toLowerCase())) {
         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;
-        nextProps.actions.setWeChatAccount(nextProps.Templates.weCrmAccounts[0]);
+        if (this.state.channel.toLowerCase() === WHATSAPP_LOWERCASE) {
+          nextProps.actions.setChannelAccount(
+            WHATSAPP,
+            nextProps.Templates.weCrmAccounts[0],
+          );
+        } else {
+          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);
@@ -512,8 +587,10 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
         } else {
           this.setState({selectedAccountError: false});
         }
-      } else if (this.state.channel.toLowerCase() === 'line') {
-        this.props.actions.setLineAccount(this.props.Templates.weCrmAccounts.find((item) => item.name === this.state.selectedAccount));
+      } 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));
       }
 
       this.setState({activeMode: TEMPLATES_MODE});
@@ -526,7 +603,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);
       }
     });
@@ -546,7 +623,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')) {
+      } else if (pathname.includes('edit') || pathname.includes('overview')) {
         creativesParams.mode = 'edit';
         if (pathname.includes('richmedia')) {
           creativesParams._id = pathname.split('/')[4];
@@ -557,6 +634,12 @@ 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();
       }
@@ -654,6 +737,36 @@ 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) {
@@ -662,22 +775,44 @@ 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;
-    if (currentChannel === WECHAT) {
-      filteredTemplates = this.filterWechatTemplates(templates);
-    }
-    if (currentChannel === LINE) {
-      filteredTemplates = this.filterLineTemplates(templates);
-    }
-    if (currentChannel === SMS) {
-      filteredTemplates = this.filterSMSTemplates(templates);
-      isTraiDltFeature = this.checkDLTfeatureEnable();
+    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;
     }
+
+    const hoverButtonText =
+      this.props.intl.formatMessage(
+        this.props.isFullMode
+        ? this.getCreativesEditText(channelLowerCase)
+        : messages.selectButton
+      );
+
     const cardDataList = filteredTemplates && filteredTemplates.length ? map(filteredTemplates, (template) => {
       const templateData =
         {
@@ -691,18 +826,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})}>{this.props.intl.formatMessage(this.props.isFullMode ? messages.creativesTemplatesEdit : messages.selectButton)}</CapButton>,
+          hoverOption: <CapButton className={this.props.isFullMode ? `edit-${channelLowerCase}` : `select-${channelLowerCase}`} onClick={(e) => handlers.handleEditClick(e, template, undefined, undefined, {account: this.state.selectedAccount})}>{hoverButtonText}</CapButton>,
         };
       if (this.props.isFullMode) {
         templateData.extra.push(<CapDropdown
           overlay={
             <CapMenu>
-              {this.state.channel.toUpperCase() !== WECHAT && !isTraiDltFeature && <CapMenu.Item className={`duplicate-${channelLowerCase}`} onClick={() => this.duplicateTemplate(template)}>
+              { ![WECHAT, WHATSAPP].includes(this.state.channel.toUpperCase()) && !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.deleteTemplate(template)}
+                onClick={() => this.toggleDeleteTemplateModal(template)}
               >
                 {this.state.channel.toUpperCase() === WECHAT && !template.definition ? <FormattedMessage {...messages.unMapButton} /> : <FormattedMessage {...messages.deleteButton} />}
               </CapMenu.Item>
@@ -834,6 +969,16 @@ 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 = "";
       }
@@ -842,8 +987,9 @@ 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) ? (
@@ -865,7 +1011,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
           </div>
           }
 
-          { !isEmpty(this.props.Templates.selectedWeChatAccount) && this.state.channel.toLowerCase() === "mobilepush" && this.state.selectedAccountError ?
+          { !isEmpty(this.props.Templates.selectedWeChatAccount) && ["mobilepush"].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)}
@@ -882,6 +1028,47 @@ 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' } : {}}>
+                  {this.isFullMode() && isEmpty(templates) && <CapIllustration buttonClassName={`create-new-${channelLowerCase}`} {...this.getChannelTypeIllustrationInfo(currentChannel)} />}
+                  {this.isFullMode() && !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>
+                    }
+                  />}
+                  {!this.isFullMode() && isEmpty(filteredTemplates) && <CapHeader
+                    title={
+                      <CapHeading type="h3" style={{ textAlign: "center", marginTop: CAP_SPACE_44 }}>
+                        {this.props.intl.formatMessage(messages.noApprovedWhatsappTemplatesTitle)}
+                      </CapHeading>
+                    }
+                    description={
+                      <CapLabel style={{ textAlign: "center" }}>
+                        {this.props.intl.formatMessage(messages.noApprovedWhatsappTemplatesDesc)}
+                      </CapLabel>
+                    }
+                  />}
+              </div>
+            )
+          }
         </div>
         }
 
@@ -1188,7 +1375,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},
@@ -1456,6 +1643,9 @@ 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) {
@@ -1716,7 +1906,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 && (this.props.route.name.toLowerCase() === "wechat" || this.props.route.name.toLowerCase() === "mobilepush"));
+          return (this.props.route && (['wechat', 'mobilepush', WHATSAPP_LOWERCASE].includes(this.props.route.name.toLowerCase())));
         case "setLocale":
           return true;
         case "callCreateFromProps":
@@ -1734,9 +1924,13 @@ 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) {
+    if (channel === MOBILE_PUSH || channel === WECHAT || channel === WHATSAPP) {
       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();
     }
@@ -1758,6 +1952,7 @@ 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 ||
@@ -1766,6 +1961,7 @@ 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) ||
@@ -1801,6 +1997,16 @@ 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 {};
     }
@@ -1824,21 +2030,25 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
     );
   }
   renderDeleteConfirmationModal = () => {
-    const modal =
-    (<Modal
+    const {
+      intl: {
+        formatMessage,
+      } = {},
+    } = this.props;
+
+    const modal = ( <CapModal
+      className="delete-template-confirm"
+      title={formatMessage(messages.areYouSureText)}
       visible={this.state.showModal}
-      title={"Alert"}
       onOk={this.handleOk}
       onCancel={this.handleCancel}
-      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>,
-      ]}
+      centered
+      okText={formatMessage(messages.yesText)}
+      closeText={formatMessage(messages.cancelText)}
     >
-      {this.props.intl.formatMessage(messages.templateDeleteConfirm)}
-    </Modal>);
+      {formatMessage(messages.templateDeleteConfirm)}
+    </CapModal>
+    );
     return modal;
   };
 
@@ -1852,13 +2062,11 @@ 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 isLineChannel = channel === LINE;
-    const isFacebookChannel = channel === FACEBOOK;
-
+    const isFacebookChannel = channel === FACEBOOK;    
 
-    if ((isWechatChannel || isMobilePushChannel || isLineChannel) && !isEmpty(weCrmAccounts) && !isFacebookChannel ) {
+    if ([WECHAT, MOBILE_PUSH, LINE, WHATSAPP].includes(channel) && !isEmpty(weCrmAccounts) && !isFacebookChannel) {
       forEach(weCrmAccounts, (account) => {
-        if ((isWechatChannel && account.configs && account.configs.is_wecrm_enabled) || isMobilePushChannel || isLineChannel) {
+        if ((isWechatChannel && account.configs && account.configs.is_wecrm_enabled) || [MOBILE_PUSH, LINE, 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(
@@ -1922,6 +2130,11 @@ 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;
     }
@@ -1977,27 +2190,102 @@ 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 isMobilePushChannel = channel === MOBILE_PUSH;
+    const { weCrmAccounts = [] } = templates;
     return (activeMode !== ACCOUNT_CHANGE_MODE &&
     <CapHeader
-      title={<CapHeading type="h4">{isMobilePushChannel ? this.props.intl.formatMessage(messages.mobilepushAccount) : this.props.intl.formatMessage(messages.wechatAccount)}</CapHeading>}
+      title={<CapHeading type="h4">{this.accountNameMessage(channel)}</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 } = this.state;
+    const { activeMode, channel, wechatFilter, lineFilter, smsFilter, templatesCount } = this.state;
+    const {
+      intl: {
+        formatMessage,
+      } = {},
+    } = this.props || {};
     let showFbAds = false;
     if (channel.toLowerCase() === FACEBOOK_CHANNEL) {
       const {campaignSettings, fetchedOrgLevelCampaignSettings} = this?.props?.Templates || {};
@@ -2061,6 +2349,33 @@ 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"
@@ -2085,6 +2400,36 @@ 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
@@ -2152,14 +2497,16 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
           : () => null
       }
       <div style={{display: "flex", justifyContent: "space-between", alignItems: 'center'}}>
-        {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>}
+        {
+          this.state.channel.toLowerCase() === WHATSAPP_LOWERCASE && isWhatsappCountExeeded ? (
+            <CapTooltip title={whatsappCountExceedText}>
+              <div className="button-disabled-tooltip-wrapper">
+                {createButton}
+              </div>
+            </CapTooltip>
+          )
+          : isfilterContentVisisble && !isWechatEmbedded && createButton
+        }
       </div>
 
     </div>);
@@ -2193,6 +2540,11 @@ 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">
@@ -2200,6 +2552,11 @@ 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>
@@ -2277,6 +2634,7 @@ Templates.propTypes = {
   router: PropTypes.object,
   viberActions: PropTypes.object,
   facebookActions: PropTypes.object,
+  whatsappActions: PropTypes.object,
   smsRegister: PropTypes.any,
 };
 
@@ -2305,6 +2663,7 @@ function mapDispatchToProps(dispatch) {
     lineActions: bindActionCreators(lineActions, dispatch),
     viberActions: bindActionCreators(viberActions, dispatch),
     facebookActions: bindActionCreators(facebookActions, dispatch),
+    whatsappActions: bindActionCreators(whatsappActions, dispatch),
   };
 }