@capillarytech/creatives-library 7.10.39 → 7.10.40

package/v2Containers/Templates/index.js

@@ -22,7 +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} 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 } 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';
@@ -60,13 +60,23 @@ import {
   VIBER as VIBER_CHANNEL,
   FACEBOOK as FACEBOOK_CHANNEL,
 } from '../App/constants';
-import { MOBILE_PUSH, WECHAT, SMS, EMAIL, EBILL, LINE, VIBER, FACEBOOK } from '../CreativesContainer/constants';
+import { MAX_WHATSAPP_TEMPLATES } from './constants';
+import {
+  CATEGORY_OPTIONS,
+  STATUS_OPTIONS,
+  CATEGORY as WHATSAPP_CATEGORY,
+  STATUS as WHATSAPP_STATUS,
+  WHATSAPP_STATUSES,
+} from '../Whatsapp/constants';
+import { getWhatsappContent, getWhatsappStatusContainer, 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 whatsappIllustration from '../Assets/images/whatsappIllustration.png';
 import { CAP_SPACE_16 } from '@capillarytech/cap-ui-library/styled/variables';
 import { GA } from '@capillarytech/cap-ui-utils';
 const { timeTracker } = GA;
@@ -105,6 +115,7 @@ const SMS_FILTERS = {
   SERVICE_IMPLICIT: 'implicit',
 };
 
+const WHATSAPP_LOWERCASE = WHATSAPP.toLowerCase();
 export class Templates extends React.Component { // eslint-disable-line react/prefer-stateless-function
   constructor(props) {
     super(props);
@@ -133,6 +144,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 +211,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 = '';
       }
@@ -245,9 +263,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)) {
@@ -463,12 +480,12 @@ 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;
@@ -512,8 +529,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});
@@ -525,8 +544,9 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
     this.getAllTemplates({getNextPage: true});
   }
   onCreateComplete = (isReloadTemplates) => {
+    const isWhatsappEdit = this.state.routeParams?.pathname?.includes(`${WHATSAPP_LOWERCASE}/edit`);
     this.setState({routeParams: null, previewOpen: false}, () => {
-      if (this.isFullMode() && isReloadTemplates) {
+      if (this.isFullMode() && (isReloadTemplates || isWhatsappEdit)) {
         this.getAllTemplates({params: {}}, true);
       }
     });
@@ -546,7 +566,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];
@@ -654,6 +674,32 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
         return templates;
     }
   }
+
+  isStatusMatching = (status, selectedWhatsappStatus) => {
+    if ( [WHATSAPP_STATUSES.unsubmitted, WHATSAPP_STATUSES.pending].includes(status) ) {
+      return selectedWhatsappStatus === WHATSAPP_STATUSES.awaitingApproval;
+    }
+      return selectedWhatsappStatus === status;
+  }
+
+  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 (
+        selectedWhatsappStatus
+        ? this.isStatusMatching(status, selectedWhatsappStatus)
+        : true
+      ) && (
+        selectedWhatsappCategory
+        ? category === selectedWhatsappCategory
+        : true
+      );
+    });
+  }
+  
   filterSMSTemplates = (templates) => {
     const { smsFilter } = this.state;
     if (SMS_FILTERS.ALL === smsFilter) {
@@ -662,22 +708,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,13 +759,13 @@ 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
@@ -834,6 +902,16 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
           }
           break;
         }
+        case WHATSAPP:
+          templateData.title = (
+            <div className="whatsapp-card-title">
+              <span title={template.name} >{template.name}</span>
+              {getWhatsappStatusContainer(template)}
+            </div>
+          );
+
+          templateData.content = getWhatsappContent(template);
+          break;
         default:
           templateData.content = "";
       }
@@ -842,8 +920,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 +944,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", 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)}
@@ -874,7 +953,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
                 </InlineDiv>
               </CapHeading>
             </div> : (
-              ["mobilepush"].includes(this.state.channel.toLowerCase()) &&
+              ["mobilepush", WHATSAPP_LOWERCASE].includes(this.state.channel.toLowerCase()) &&
               isEmpty(filteredTemplates) &&
               isEmpty(this.state.searchText) &&
               <div style={this.isFullMode() ? { height: "calc(100vh - 325px)", overflow: 'auto'} : {}}>
@@ -1456,6 +1535,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 +1798,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 +1816,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 +1844,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 +1853,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 +1889,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 {};
     }
@@ -1852,13 +1950,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 +2018,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 +2078,97 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
     this.setState({activeMode: TEMPLATES_MODE});
   }
 
+  accountNameMessage = (channel) => {
+    const {
+      intl: {
+        formatMessage,
+      },
+    } = this.props;
+    switch (channel?.toUpperCase()) {
+      case MOBILE_PUSH:
+        return formatMessage(messages.mobilepushAccount);
+      case WECHAT:
+        return formatMessage(messages.wechatAccount);
+      case WHATSAPP:
+        return formatMessage(messages.whatsappAccount);
+      default:
+        return '';
+    }
+  }
+
   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;
+    return (
+      <CapRow type="flex" align="middle" className="selected-whatsapp-filters">
+        {
+          selectedWhatsappStatus ? (
+            <CapTag closable onClose={() => this.removeWhatsappFilter(WHATSAPP_STATUS)}>
+              Status: {getWhatsappStatus(selectedWhatsappStatus)?.label || selectedWhatsappStatus}
+            </CapTag>
+          ) : null
+        }
+        {
+          selectedWhatsappCategory ? (
+            <CapTag closable onClose={() => this.removeWhatsappFilter(WHATSAPP_CATEGORY)}>
+              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});
 
 
   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 +2232,19 @@ 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 = (<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 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 +2269,31 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
           </CapLabel></CapRadio.Button>
         </CapRadio.CapRadioGroup>
       }
+      {
+        channel.toUpperCase() === WHATSAPP && (
+          <div className="whatsapp-filters">
+            <CapSelectFilter
+              placement="bottomLeft"
+              data={STATUS_OPTIONS}
+              onSelect={this.setWhatsappStatus}
+              selectedValue={this.state.selectedWhatsappStatus}
+              placeholder="Status"
+              showBadge={true}
+              width="90px"
+            />
+            <CapSelectFilter
+              placement="bottomLeft"
+              data={CATEGORY_OPTIONS}
+              onSelect={this.setWhatsappCategory}
+              selectedValue={this.state.selectedWhatsappCategory}
+              placeholder="Category"
+              showBadge={true}
+              width="105px"
+            />
+          </div>
+          
+        )
+      }
       {
         channel.toUpperCase() === LINE &&
           isFullMode
@@ -2152,14 +2361,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 +2404,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 && isWhatsappCountExeeded ? (
+              <CapAlert message={whatsappCountExceedText} type="info" />
+            ) : null
+          }
 
           <CapRow>
             <Pagination onPageChange={templates.length ? this.onPaginationChange : () => {}} paginationSelector="pagination-container">

package/v2Containers/Templates/messages.js

@@ -94,6 +94,10 @@ export default defineMessages({
     id: `${scope}.editButton`,
     defaultMessage: "Edit",
   },
+  "whatsappOverview": {
+    id: `${scope}.whatsappOverview`,
+    defaultMessage: "Overview",
+  },
   "duplicateButton": {
     id: `${scope}.duplicateButton`,
     defaultMessage: "Duplicate",
@@ -130,6 +134,10 @@ export default defineMessages({
     id: `${scope}.noAccountsPresentLine`,
     defaultMessage: "Line accounts are not setup for your brand",
   },
+  "noAccountsPresentWhatsapp": {
+    id: `${scope}.noAccountsPresentWhatsapp`,
+    defaultMessage: "Whatsapp accounts are not setup for your brand",
+  },
   "noTemplatesMessage": {
     id: `${scope}.noTemplatesMessage`,
     defaultMessage: "No templates available",
@@ -306,6 +314,10 @@ export default defineMessages({
     id: `${scope}.newEmailTemplate`,
     defaultMessage: 'New email {template}',
   },
+  "newWhatsappTemplate": {
+    id: `${scope}.newWhatsappTemplate`,
+    defaultMessage: 'Add new Whatsapp {template}',
+  },
   "newNotificationTemplate": {
     id: `${scope}.newNotificationTemplate`,
     defaultMessage: 'New notification {template}',
@@ -318,6 +330,14 @@ export default defineMessages({
     id: `${scope}.emailTitleIllustartion`,
     defaultMessage: 'Create an email {template}',
   },
+  "whatsappTitleIllustration": {
+    id: `${scope}.whatsappTitleIllustration`,
+    defaultMessage: 'Add a new Whatsapp creative {template}',
+  },
+  "whatsappDescIllustration": {
+    id: `${scope}.whatsappDescIllustration`,
+    defaultMessage: 'These templates can be reused when creating a\nnew message content.',
+  },
   "smsTitleIllustartion": {
     id: `${scope}.smsTitleIllustartion`,
     defaultMessage: 'Create an SMS {template}',
@@ -346,6 +366,10 @@ export default defineMessages({
     id: `${scope}.lineAccount`,
     defaultMessage: 'Line account',
   },
+  "whatsappAccount": {
+    id: `${scope}.whatsappAccount`,
+    defaultMessage: 'Whatsapp account',
+  },
   "all": {
     id: `${scope}.all`,
     defaultMessage: 'All',
@@ -390,4 +414,12 @@ export default defineMessages({
     id: `${scope}.uploadTemplate`,
     defaultMessage: 'Upload template',
   },
+  "clearAll": {
+    id: `${scope}.clearAll`,
+    defaultMessage: 'Clear all',
+  },
+  "whatsappMaxTemplates": {
+    id: `${scope}.whatsappMaxTemplates`,
+    defaultMessage: 'WhatsApp allows {maxCount} approved templates. To accommodate new approved templates either delete the existing one or reach out to Capillary POC to increase the limit.',
+  },
 });

package/v2Containers/Templates/reducer.js

@@ -85,6 +85,8 @@ function templatesReducer(state = initialState, action) {
       return state.set('selectedLineAccount', fromJS(action.lineAccount));
     case types.SET_VIBER_ACCOUNT:
       return state.set('selectedViberAccount', fromJS(action.viberAccount));
+    case types.SET_WHATSAPP_ACCOUNT:
+      return state.set('selectedWhatsappAccount', fromJS(action.whatsappAccount));
     case types.SET_FACEBOOK_ACCOUNT:
       return state.set('selectedFacebookAccount', fromJS(action.faceBookAccount));
     case types.RESET_ACCOUNT:

package/v2Containers/TemplatesV2/index.js

@@ -23,6 +23,7 @@ import Templates from '../Templates';
 import CallTask from '../CallTask';
 import Facebook from '../Facebook';
 import Viber from '../Viber';
+import Whatsapp from '../Whatsapp';
 import Line from '../Line/Container';
 import FTP from '../FTP';
 import Gallery from '../Assets/Gallery';
@@ -60,6 +61,7 @@ export class TemplatesV2 extends React.Component { // eslint-disable-line react/
       line: {content: <></>, tab: intl.formatMessage(messages.line), key: 'line'},
       viber: {content: <></>, tab: intl.formatMessage(messages.viber), key: 'viber'},
       facebook: {content: <div></div>, tab: intl.formatMessage(messages.facebook), key: 'facebook'},
+      whatsapp: { content: <></>, tab: intl.formatMessage(messages.whatsapp), key: 'whatsapp' },
     };
     let filteredPanes = Object.keys(defaultPanes)
       .filter((key) => !channelsToHide.includes(key)).reduce((obj = [], key) => {

package/v2Containers/TemplatesV2/messages.js

@@ -54,6 +54,10 @@ export default defineMessages({
     id: 'creatives.containersV2.TemplatesV2.viber',
     defaultMessage: 'Viber',
   },
+  whatsapp: {
+    id: 'creatives.containersV2.TemplatesV2.whatsapp',
+    defaultMessage: 'WhatsApp',
+  },
   gallery: {
     id: 'creatives.containersV2.TemplatesV2.gallery',
     defaultMessage: 'Gallery',