@capillarytech/creatives-library 7.11.14 → 7.12.0

package/v2Containers/Templates/index.js

@@ -70,7 +70,6 @@ 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 * as rcsActions from '../Rcs/actions';
 import CardGrid from '../../v2Components/CardGrid';
 import config from '../../config/app';
 import './_templates.scss';
@@ -98,9 +97,7 @@ import {
   WHATSAPP_STATUSES,
 } from '../Whatsapp/constants';
 import { getWhatsappContent, getWhatsappStatus, getWhatsappCategory } from '../Whatsapp/utils';
-import { getRCSContent } from '../Rcs/utils';
-
-import { MOBILE_PUSH, WECHAT, SMS, EMAIL, EBILL, LINE, VIBER, FACEBOOK, WHATSAPP, RCS } from '../CreativesContainer/constants';
+import { MOBILE_PUSH, WECHAT, SMS, EMAIL, EBILL, LINE, VIBER, FACEBOOK, WHATSAPP } from '../CreativesContainer/constants';
 
 import {CREATIVE} from '../Facebook/constants';
 
@@ -108,8 +105,6 @@ import emailIllustration from '../Assets/images/emailIllustration.svg';
 import smsIllustration from '../Assets/images/smsIllustration.svg';
 import pushIllustration from '../Assets/images/pushIllustration.svg';
 import whatsappIllustration from '../Assets/images/whatsappIllustration.png';
-import rcsIllustration from '../Assets/images/rcsIllustration.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;
@@ -149,18 +144,10 @@ const SMS_FILTERS = {
 };
 
 const WHATSAPP_LOWERCASE = WHATSAPP.toLowerCase();
-const RCS_LOWERCASE = RCS.toLowerCase();
 const SMS_LOWERCASE = SMS.toLowerCase();
 const MOBILE_PUSH_LOWERCASE = MOBILE_PUSH.toLowerCase();
 const EBILL_LOWERCASE = EBILL.toLowerCase();
 const LINE_LOWERCASE = LINE.toLowerCase();
-const duplicateEnum = {
-  sms: "smsActions",
-  line: "lineActions",
-  [VIBER_CHANNEL]: "viberActions",
-  [FACEBOOK_CHANNEL]: "facebookActions",
-  [RCS_LOWERCASE]: "rcsActions",
-};
 export class Templates extends React.Component { // eslint-disable-line react/prefer-stateless-function
   constructor(props) {
     super(props);
@@ -190,7 +177,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
       lineFilter: LINE_FILTERS.ALL,
       smsFilter: SMS_FILTERS.ALL,
       selectedWhatsappStatus: '',
-      selectedWhatsappCategory: '',
+      selectedWhatsappCategory: ''
     };
 
     this.handleOnHoverItem = this.handleOnHoverItem.bind(this);
@@ -261,9 +248,6 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
           activeMode = ACCOUNT_SELECTION_MODE;
           this.props.actions.getWeCrmAccounts(channel);
           break;
-        case RCS:
-          channel = 'Rcs';
-          break;
         default:
           channel = '';
       }
@@ -294,7 +278,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
     if (this.props.location.query.type === 'embedded') {
       this.props.actions.resetAccount();
     }
-    if (['line', VIBER_CHANNEL, FACEBOOK_CHANNEL, 'sms', 'email', 'ebill', RCS_LOWERCASE].includes((this.state.channel || '').toLowerCase())) {
+    if (['line', VIBER_CHANNEL, FACEBOOK_CHANNEL, 'sms', 'email', 'ebill'].includes((this.state.channel || '').toLowerCase())) {
       const queryParams = {
         // name: this.state.searchText,
         // sortBy: this.state.sortBy,
@@ -357,7 +341,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
       }
 
       this.setState({ channel }, () => {
-        if (['line', VIBER_CHANNEL, FACEBOOK_CHANNEL, 'sms', 'email', 'ebill', RCS_LOWERCASE].includes(this.state.channel.toLowerCase()) || (this.state.channel.toLowerCase() === 'wechat' && !isEmpty(nextProps.Templates.selectedWeChatAccount))) {
+        if (['line', VIBER_CHANNEL, FACEBOOK_CHANNEL, 'sms', 'email', 'ebill'].includes(this.state.channel.toLowerCase()) || (this.state.channel.toLowerCase() === 'wechat' && !isEmpty(nextProps.Templates.selectedWeChatAccount))) {
           if (this.state.channel.toLowerCase() === 'wechat' && !isEmpty(nextProps.Templates.selectedWeChatAccount)) {
             params.wecrmId = (nextProps.Templates.selectedWeChatAccount.configs || {}).wecrm_app_id;
             params.wecrmToken = (nextProps.Templates.selectedWeChatAccount.configs || {}).wecrm_token;
@@ -420,13 +404,12 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
         });
       }
     }
-
-    if ((selectedChannel === 'wechat' || selectedChannel === 'mobilepush') && isEmpty(nextProps.Templates.selectedWeChatAccount) && (this.props.location.query.type === 'embedded') && !this.isEnabledInLibraryModule("showAccountSelection")) {
+    if ((this.state.channel.toLowerCase() === 'wechat' || this.state.channel.toLowerCase() === 'mobilepush') && isEmpty(nextProps.Templates.selectedWeChatAccount) && (this.props.location.query.type === 'embedded') && !this.isEnabledInLibraryModule("showAccountSelection")) {
       let selectedAccount = '';
       if (isEmpty(nextProps.Templates.weCrmAccounts)) {
         return;
       }
-      if (selectedChannel === 'wechat') {
+      if (this.state.channel.toLowerCase() === 'wechat') {
         forEach(nextProps.Templates.weCrmAccounts, (account) => {
           if (account.configs && account.configs.is_wecrm_enabled) {
             if (nextProps.location.query.source_account_id && account.sourceAccountIdentifier === nextProps.location.query.source_account_id) {
@@ -441,7 +424,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
           nextProps.actions.setWeChatAccount(selectedAccount);
           this.getAllTemplates({params});
         });
-      } else if (selectedChannel === 'mobilepush' && (nextProps.location.query.account_id || nextProps.location.query.source_account_id)) {
+      } else if (this.state.channel.toLowerCase() === 'mobilepush' && (nextProps.location.query.account_id || nextProps.location.query.source_account_id)) {
         forEach(nextProps.Templates.weCrmAccounts, (account) => {
           if ((nextProps.location.query.account_id && account.id === Number(nextProps.location.query.account_id)) || (nextProps.location.query.source_account_id && account.sourceAccountIdentifier && account.sourceAccountIdentifier === nextProps.location.query.source_account_id)) {
             selectedAccount = account;
@@ -452,38 +435,37 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
         this.getAllTemplates({params});
       }
     }
-    if (selectedChannel === "mobilepush" && nextProps.CreateMobilePush && nextProps.CreateMobilePush.response && nextProps.CreateMobilePush.response.templateId && nextProps.CreateMobilePush.response.templateId !== '') {
+    if ((this.state.channel || '').toLowerCase() === "mobilepush" && nextProps.CreateMobilePush && nextProps.CreateMobilePush.response && nextProps.CreateMobilePush.response.templateId && nextProps.CreateMobilePush.response.templateId !== '') {
 
     }
 
-    if (selectedChannel === "ebill" && nextProps.CreateEbill && nextProps.CreateEbill.createResponse && nextProps.CreateEbill.createResponse.templateId && nextProps.CreateEbill.createResponse.templateId !== '') {
+    if ((this.state.channel || '').toLowerCase() === "ebill" && nextProps.CreateEbill && nextProps.CreateEbill.createResponse && nextProps.CreateEbill.createResponse.templateId && nextProps.CreateEbill.createResponse.templateId !== '') {
       const message = `${this.state.channel} ${this.props.intl.formatMessage(messages.templateDuplicateSuccess)}`;
       CapNotification.success({key: 'duplicateSucess', message});
       this.getAllTemplates({params, resetPage: true});
       this.props.ebillActions.clearStoreValues();
     }
 
-    if (selectedChannel === "email" && nextProps.EmailCreate && nextProps.EmailCreate.duplicateResponse && nextProps.EmailCreate.duplicateResponse.templateId && nextProps.EmailCreate.duplicateResponse.templateId !== '') {
+    if ((this.state.channel || '').toLowerCase() === "email" && nextProps.EmailCreate && nextProps.EmailCreate.duplicateResponse && nextProps.EmailCreate.duplicateResponse.templateId && nextProps.EmailCreate.duplicateResponse.templateId !== '') {
       const message = `${this.state.channel} ${this.props.intl.formatMessage(messages.templateDuplicateSuccess)}`;
       CapNotification.success({key: 'duplicateSucess', message});
       this.getAllTemplates({params, resetPage: true});
       this.props.emailActions.clearStoreValues();
     }
 
-    if (selectedChannel === "line" && nextProps.Line && nextProps.Line.response && nextProps.Line.response.templateId && nextProps.Line.response.templateId !== '') {
+    if ((this.state.channel || '').toLowerCase() === "line" && nextProps.Line && nextProps.Line.response && nextProps.Line.response.templateId && nextProps.Line.response.templateId !== '') {
       const message = `${this.state.channel} ${this.props.intl.formatMessage(messages.templateDuplicateSuccess)}`;
       CapNotification.success({key: 'duplicateSuccess', message});
       this.getAllTemplates({params, resetPage: true});
       this.props.lineActions.clearCreateResponse();
     }
 
-
     if (nextProps.Create && this.props.Create && nextProps.Create.createTemplateError && !isEqual(nextProps.Create.createTemplateError, this.props.Create.createTemplateError)) {
       const message = this.props.intl.formatMessage(messages.somethingWentWrong);
       if ((this.state.channel || '').toLowerCase() !== "sms") {
         CapNotification.error({key: 'somethingWrong', message});
       }
-      const { smsActions, mobilepushActions, ebillActions, lineActions, viberActions, facebookActions, whatsappActions, rcsActions } = this.props;
+      const { smsActions, mobilepushActions, ebillActions, lineActions, viberActions, facebookActions, whatsappActions } = this.props;
       switch (selectedChannel) {
         case SMS_LOWERCASE:
           smsActions.clearCreateResponse();
@@ -506,9 +488,6 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
         case WHATSAPP_LOWERCASE:
           whatsappActions.clearCreateResponse();
           break;
-        case RCS_LOWERCASE:
-          rcsActions.clearCreateResponse();
-          break;
         default:
           break;
       }
@@ -550,30 +529,28 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
     if (!isEmpty(nextProps.Templates.templateDetails) && !isEqual(nextProps.Templates.templateDetails, this.props.Templates.templateDetails)) {
       this.setState({previewTemplate: nextProps.Templates.templateDetails});
     }
-    const weCrmAccountsList = get(nextProps, `Templates.weCrmAccounts`, []);
-    const weCrmChannels = ['wechat', WHATSAPP_LOWERCASE];
 
-    if (weCrmAccountsList.length === 1 && this.state.defaultAccount && (weCrmChannels.indexOf(selectedChannel) > -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 (weCrmChannels.includes(selectedChannel)) {
-        paramsDefault.wecrmId = weCrmAccountsList[0].configs.wecrm_app_id;
-        paramsDefault.wecrmToken = weCrmAccountsList[0].configs.wecrm_token;
-        paramsDefault.originalId = weCrmAccountsList[0].sourceAccountIdentifier;
-        if ([WHATSAPP_LOWERCASE].includes(selectedChannel)) {
+      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;
+        if (this.state.channel.toLowerCase() === WHATSAPP_LOWERCASE) {
           nextProps.actions.setChannelAccount(
-            selectedChannel.toUpperCase(),
-            weCrmAccountsList[0],
+            WHATSAPP,
+            nextProps.Templates.weCrmAccounts[0],
           );
         } else {
           nextProps.actions.setWeChatAccount(
-            weCrmAccountsList[0],
+            nextProps.Templates.weCrmAccounts[0],
           );
         }
       }
-      this.setState({ defaultAccount: false, activeMode: TEMPLATES_MODE, selectedAccount: weCrmAccountsList[0].name });
+      this.setState({defaultAccount: false, activeMode: TEMPLATES_MODE, selectedAccount: nextProps.Templates.weCrmAccounts[0].name });
       this.getAllTemplates({params: paramsDefault}, true);
     }
   }
@@ -593,13 +570,12 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
         name: this.state.searchText,
         sortBy: this.state.sortBy,
       };
-      const selectedChannel = this.state.channel.toLowerCase();
-      if (selectedChannel === 'wechat') {
+      if (this.state.channel.toLowerCase() === 'wechat') {
         params.wecrmId = this.props.Templates.weCrmAccounts[findIndex(this.props.Templates.weCrmAccounts, { name: value})].configs.wecrm_app_id;
         params.wecrmToken = this.props.Templates.weCrmAccounts[findIndex(this.props.Templates.weCrmAccounts, { name: value})].configs.wecrm_token;
         this.props.actions.setWeChatAccount(this.props.Templates.weCrmAccounts[findIndex(this.props.Templates.weCrmAccounts, { name: value})]);
         params.originalId = this.props.Templates.weCrmAccounts[findIndex(this.props.Templates.weCrmAccounts, { name: value})].sourceAccountIdentifier;
-      } else if (selectedChannel === 'mobilepush') {
+      } else if (this.state.channel.toLowerCase() === 'mobilepush') {
         this.props.actions.setWeChatAccount(this.props.Templates.weCrmAccounts[findIndex(this.props.Templates.weCrmAccounts, { name: value})]);
         const account = this.props.Templates.weCrmAccounts[findIndex(this.props.Templates.weCrmAccounts, { name: value})];
         params.accountId = account.id;
@@ -612,8 +588,10 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
         } else {
           this.setState({selectedAccountError: false});
         }
-      } else if ([LINE.toLowerCase(), WHATSAPP_LOWERCASE, RCS_LOWERCASE].includes(selectedChannel)) {
-        this.props.actions.setChannelAccount(selectedChannel?.toUpperCase(), 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});
@@ -662,7 +640,6 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
             const { name = '', versions = {} } = whatsappSelectedTemplateData;
             creativesParams.whatsappTemplateName = name;
             creativesParams.whatsappTemplateCategory = get(versions, `base.content.whatsapp.category`, '');
-            creativesParams.whatsappTemplateLanguageCode = get(versions, `base.content.whatsapp.languages[0].language`, '');
           }
         }
         creativesParams.type = this.state.channel.toUpperCase();
@@ -766,12 +743,13 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
   }
 
   isStatusMatching = (status, selectedWhatsappStatus) => {
-    if (this.props.isFullMode && 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 selectedWhatsappStatus === status;
+    }
+    else if (!this.props.isFullMode){
       return status === WHATSAPP_STATUSES.approved;
     }
     return true;
@@ -792,7 +770,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
       );
     });
   }
-
+  
   filterSMSTemplates = (templates) => {
     const { smsFilter } = this.state;
     if (SMS_FILTERS.ALL === smsFilter) {
@@ -808,43 +786,6 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
     return messages.creativesTemplatesEdit;
   }
 
-  whatsappIllustrationText = (title, desc) =>
-    <CapHeader
-      title={
-        <CapHeading type="h3" className="channel-specific-illustration-text">
-          {this.props.intl.formatMessage(messages[title])}
-        </CapHeading>
-      }
-      description={
-        <CapLabel style={{ textAlign: "center" }}>
-          {this.props.intl.formatMessage(messages[desc])}
-        </CapLabel>
-      }
-    />
-
-  getSmsEmailIllustration = () =>
-    this.props.isDltFromRcs ? (
-      <CapHeader
-        title={
-          <CapHeading type="h3" className="channel-specific-illustration-text">
-            {this.props.intl.formatMessage(messages.rcsDltIllustrationTitle)}
-          </CapHeading>
-        }
-        description={
-          <CapLabel style={{ textAlign: 'center' }}>
-            {this.props.intl.formatMessage(messages.rcsDltIllustrationDesc)}
-          </CapLabel>
-        }
-      />
-    ) : (
-      <CapIllustration
-        buttonClassName={`create-new-${this.state.channel.toLowerCase()}`}
-        {...this.getChannelTypeIllustrationInfo(
-          this.state.channel.toUpperCase(),
-        )}
-      />
-    );
-
   getTemplateDataForGrid = ({templates, handlers, filterContent, channel, isLoading, loadingTip}) => {
     const currentChannel = channel.toUpperCase();
     const {channel: stateChannel} = this.state;
@@ -886,7 +827,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
               className={`view-${channelLowerCase}`}
               style={{marginRight: '16px'}}
               type="eye"
-              onClick={() => { if (!this.props.isFullMode || this.props.isDltFromRcs) { this.props.handlePeviewTemplate(template); } else { handlers.handlePreviewClick(template); } }}
+              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>,
@@ -903,7 +844,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
           } = {},
         } = {},
       } = template;
-      if (this.props.isFullMode && !this.props.isDltFromRcs && !(this.state.channel.toUpperCase() === WHATSAPP && status === WHATSAPP_STATUSES.approved)) {
+      if (this.props.isFullMode && !(this.state.channel.toUpperCase() === WHATSAPP && status === WHATSAPP_STATUSES.approved)) {
         templateData.extra.push(<CapDropdown
           overlay={
             <CapMenu>
@@ -1054,11 +995,6 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
 
           templateData.content = getWhatsappContent(template).templateMsg;
           break;
-        case RCS: {
-          templateData.title = template.name;
-          templateData.content = getRCSContent(template);
-          break;
-        }
         default:
           templateData.content = "";
       }
@@ -1066,12 +1002,6 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
     }) : [];
     const accountId = get(this.props, 'Templates.selectedWeChatAccount.uuid');
     const accounts = get(this.props, 'Templates.weCrmAccounts');
-    const noWhatsappTemplates = this.isFullMode() && isEmpty(templates);
-    const noFilteredWhatsappTemplates = this.isFullMode() && !isEmpty(templates) && isEmpty(filteredTemplates);
-    const noApprovedWhatsappTemplates = !this.isFullMode() && isEmpty(filteredTemplates);
-    const showWhatsappIllustration = !isEmpty(this.props.Templates.selectedWhatsappAccount) && [WHATSAPP_LOWERCASE].includes(channelLowerCase);
-    const showRcsIllustration = channelLowerCase === RCS_LOWERCASE && isEmpty(templates);
-    const noLoaderAndSearchText = isEmpty(this.state.searchText) && !isLoading;
     return (<div>
       {[WECHAT, MOBILE_PUSH].includes(currentChannel) && this.showAccountName()}
       {filterContent}
@@ -1088,7 +1018,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
                 fbType={"list"}
                 />
             </div>)
-            : ['sms', "email"].includes(this.state.channel.toLowerCase()) && !isLoading && this.getSmsEmailIllustration()
+            : ['sms', "email"].includes(this.state.channel.toLowerCase()) && !isLoading && <CapIllustration buttonClassName={`create-new-${channelLowerCase}`} {...this.getChannelTypeIllustrationInfo(currentChannel)} />
           }
 
           {(this.state.selectedAccount === '' && isEmpty(this.props.Templates.selectedWeChatAccount)) && (this.state.channel.toLowerCase() === 'wechat' || this.state.channel.toLowerCase() === "mobilepush") &&
@@ -1114,27 +1044,52 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
               </div>
             )
           }
-          {showWhatsappIllustration &&
-            (
-            noLoaderAndSearchText &&
-              <div style={this.isFullMode() ? { height: "calc(100vh - 325px)", overflow: 'auto' } : {}}>
-                {noWhatsappTemplates && <CapIllustration buttonClassName={`create-new-${channelLowerCase}`} {...this.getChannelTypeIllustrationInfo(currentChannel)} />}
-                {noFilteredWhatsappTemplates && this.whatsappIllustrationText('noFilteredWhatsappTemplatesTitle', 'noFilteredWhatsappTemplatesDesc')}
-                {noApprovedWhatsappTemplates && this.whatsappIllustrationText('noApprovedWhatsappTemplatesTitle', 'noApprovedWhatsappTemplatesDesc')}
-              </div>
-            )
-          }
-          {showRcsIllustration &&
-            (
-            noLoaderAndSearchText &&
+          { !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' } : {}}>
-                <CapIllustration buttonClassName={`create-new-${channelLowerCase}`} {...this.getChannelTypeIllustrationInfo(currentChannel)} />
+                  {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>
         }
+
       </CapSpin>
+
     </div>);
   }
   filterLineTemplates = (templates) => {
@@ -1553,27 +1508,26 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
     this.props.actions.deleteTemplate(this.state.channel.toUpperCase(), template._id);
     this.setState({actionTemplate: {}});
   }
-  commonDuplicate(action, duplicateObj) {
-    const params = {
-      name: this.state.searchText,
-      sortBy: this.state.sortBy,
-    };
-    this.props[action].createTemplate(duplicateObj, (response) => {
-      if (response && response.templateId) {
-        const message = `${this.state.channel} ${this.props.intl.formatMessage(messages.templateDuplicateSuccess)}`;
-        CapNotification.success({key: 'duplicateSucess', message});
-        this.getAllTemplates({params, resetPage: true});
-        this.props[action].clearCreateResponse();
-      }
-    });
-  }
 
   duplicateTemplate(template) {
     const duplicateObj = cloneDeep(template);
     duplicateObj.name = `Copy of ${template.name} ${moment().format('MM-DD-YYYY HH:mm:ss')}`;
     delete duplicateObj._id;
-
-    if (this.state.channel.toLowerCase() === "mobilepush") {
+    const params = {
+      name: this.state.searchText,
+      sortBy: this.state.sortBy,
+    };
+    if (this.state.channel.toLowerCase() === "sms") {
+      this.props.smsActions.createTemplate(duplicateObj, (response) => {
+        if (response && response.templateId) {
+          const message = `${this.state.channel} ${this.props.intl.formatMessage(messages.templateDuplicateSuccess)}`;
+          CapNotification.success({key: 'duplicateSucess', message});
+
+          this.getAllTemplates({params, resetPage: true});
+          this.props.smsActions.clearCreateResponse();
+        }
+      });
+    } else if (this.state.channel.toLowerCase() === "mobilepush") {
       duplicateObj.definition.accountId = this.props.Templates.selectedWeChatAccount.id;
       this.props.mobilepushActions.createTemplate(duplicateObj, () => {
         const message = `${this.state.channel} ${this.props.intl.formatMessage(messages.templateDuplicateSuccess)}`;
@@ -1585,8 +1539,33 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
       this.props.ebillActions.createTemplate(duplicateObj);
     } else if (this.state.channel.toLowerCase() === "email") {
       this.props.emailActions.duplicateTemplate(template._id, "EMAIL");
-    } else if (["sms", "line", VIBER_CHANNEL, FACEBOOK_CHANNEL, RCS_LOWERCASE].includes(this.state.channel.toLowerCase())) {
-      this.commonDuplicate(duplicateEnum[this.state.channel.toLowerCase()], duplicateObj);
+    } else if (this.state.channel.toLowerCase() === "line") {
+      this.props.lineActions.createTemplate(duplicateObj, (response) => {
+        if (response && response.templateId) {
+          const message = `${this.state.channel} ${this.props.intl.formatMessage(messages.templateDuplicateSuccess)}`;
+          CapNotification.success({key: 'duplicateSucess', message});
+          this.getAllTemplates({params, resetPage: true});
+          this.props.lineActions.clearCreateResponse();
+        }
+      });
+    } else if (this.state.channel.toLowerCase() === VIBER_CHANNEL) {
+      this.props.viberActions.createTemplate(duplicateObj, (response) => {
+        if (response && response.templateId) {
+          const message = `${this.state.channel} ${this.props.intl.formatMessage(messages.templateDuplicateSuccess)}`;
+          CapNotification.success({key: 'duplicateSucess', message});
+          this.getAllTemplates({params, resetPage: true});
+          this.props.viberActions.clearCreateResponse();
+        }
+      });
+    } else if (this.state.channel.toLowerCase() === FACEBOOK_CHANNEL) {
+      this.props.facebookActions.createTemplate(duplicateObj, (response) => {
+        if (response && response.templateId) {
+          const message = `${this.state.channel} ${this.props.intl.formatMessage(messages.templateDuplicateSuccess)}`;
+          CapNotification.success({key: 'duplicateSucess', message});
+          this.getAllTemplates({params, resetPage: true});
+          this.props.facebookActions.clearCreateResponse();
+        }
+      });
     }
   }
 
@@ -1637,74 +1616,55 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
     const module = this.props.location.query.module;
     const isLanguageSupport = (this.props.location.query.isLanguageSupport) ? this.props.location.query.isLanguageSupport : false;
     const isEdmSupport = (this.props.location.query.isEdmSupport !== "false") || false;
-    const channelLowerCase = this.state.channel.toLowerCase();
-    const channelUpperCase = this.state.channel.toUpperCase();
-    let getQuery = type === 'embedded' ? { type: 'embedded', module, account_id: this.props.location.query.account_id } : { module };
+    let getQuery = "";
     let pathName = path;
     e.stopPropagation();
 
     this.props.actions.resetTemplateData();
-    switch (channelLowerCase) {
-      case 'sms': {
-        pathName = `/sms/edit/${id}`;
-        break;
-      }
-      case 'mobilepush': {
-        pathName = `/mobilepush/edit/${id}`;
-        break;
-      }
-      case 'email': {
-        pathName = `/email/edit/${id}`;
-        getQuery = type === 'embedded' ? { type: 'embedded', module, isLanguageSupport, isEdmSupport } : { module, isEdmSupport };
-        break;
-      }
-      case 'ebill': {
-        pathName = `/ebill/edit/${id}`;
-        break;
-      }
-      case 'line': {
-        const { messages } = template.versions.base.content;
-        const type = messages && messages[0] && messages[0].type;
-        pathName = `/line/edit/${id}/${type}`;
-        if (options && options.account) {
-          pathName += `/${options.account}`;
-        }
-        break;
-      }
-      case VIBER_CHANNEL: {
-        pathName = `/viber/edit/${id}/`;
-        break;
-      }
-      case FACEBOOK_CHANNEL: {
-        pathName = `/facebook/edit/${id}/`;
-        break;
-      }
-      default:
-        break;
+    if (this.state.channel.toLowerCase() === 'sms') {
+      pathName = `/sms/edit/${id}`;
     }
-    switch (channelUpperCase) {
-      case WECHAT: {
-        if (get(template, 'definition.msgcontent', '') === "RICH_MEDIA_WECHAT") {
-          pathName = `/wechat/richmedia/edit/${id}`;
-        } else {
-          pathName = `/wechat/edit/${id}`;
-        }
-        break;
-      }
-      case WHATSAPP: {
-        pathName = `/whatsapp/edit/${id}/`;
-        break;
+    if (this.state.channel.toLowerCase() === 'mobilepush') {
+      pathName = `/mobilepush/edit/${id}`;
+    }
+    if (this.state.channel.toLowerCase() === 'email') {
+      pathName = `/email/edit/${id}`;
+    }
+    if (this.state.channel.toLowerCase() === 'email') {
+      getQuery = type === 'embedded' ? {type: 'embedded', module, isLanguageSupport, isEdmSupport} : {module, isEdmSupport};
+    } else {
+      getQuery = type === 'embedded' ? {type: 'embedded', module, account_id: this.props.location.query.account_id} : {module};
+    }
+    if (this.state.channel.toLowerCase() === 'ebill') {
+      pathName = `/ebill/edit/${id}`;
+    }
+    if (this.state.channel.toLowerCase() === 'line') {
+      const { messages } = template.versions.base.content;
+      const type = messages && messages[0] && messages[0].type;
+      pathName = `/line/edit/${id}/${type}`;
+      if (options && options.account) {
+        pathName += `/${options.account}`;
       }
-      case RCS: {
-        pathName = `/rcs/edit/${id}/`;
-        break;
+    }
+    if (this.state.channel.toLowerCase() === VIBER_CHANNEL) {
+      pathName = `/viber/edit/${id}/`;
+    }
+    if (this.state.channel.toLowerCase() === FACEBOOK_CHANNEL) {
+      pathName = `/facebook/edit/${id}/`;
+    }
+    if (this.state.channel.toUpperCase() === WECHAT) {
+      if (get(template, 'definition.msgcontent', '') === "RICH_MEDIA_WECHAT") {
+        pathName = `/wechat/richmedia/edit/${id}`;
+      } else {
+        pathName = `/wechat/edit/${id}`;
       }
-      default:
-        break;
+    }
+    if (this.state.channel.toUpperCase() === WHATSAPP) {
+      pathName = `/whatsapp/edit/${id}/`;
     }
     if (this.isEnabledInLibraryModule("callSelectFromProps")) {
       let data = id;
-      if (this.props.fbAdManager || this.props.isDltFromRcs) {
+      if (this.props.fbAdManager) {
         data = this.selectTemplate(id);
       }
       this.props.onSelectTemplate(data, this.props.fbAdManager);
@@ -1993,12 +1953,6 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
     return isDisabled;
   }
 
-  checkLoader = (channel) => {
-    const {
-      getAllTemplatesInProgress,
-    } = this.props.Templates || {};
-    return (getAllTemplatesInProgress && this.state.channel.toLowerCase() === channel);
-  }
 
   isLoading = () => {
     const { EmailCreate, Templates } = this.props;
@@ -2008,11 +1962,10 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
       fetchingWeCrmAccounts,
       sendingFile,
     } = Templates;
-    const lineLoader = this.checkLoader('line');
-    const smsLoader = this.checkLoader('sms');
-    const viberLoader = this.checkLoader(VIBER_CHANNEL);
-    const facebookLoader = this.checkLoader(FACEBOOK_CHANNEL);
-    const rcsLoader = this.checkLoader(RCS_LOWERCASE);
+    const lineLoader = (getAllTemplatesInProgress && this.state.channel.toLowerCase() === 'line');
+    const smsLoader = (getAllTemplatesInProgress && this.state.channel.toLowerCase() === 'sms');
+    const viberLoader = (getAllTemplatesInProgress && this.state.channel.toLowerCase() === VIBER_CHANNEL);
+    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);
@@ -2031,8 +1984,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
       (mobilePushLoader !== undefined ? mobilePushLoader : false) ||
       (lineLoader !== undefined ? lineLoader : false) ||
       (facebookLoader !== undefined ? facebookLoader : false) ||
-      (viberLoader !== undefined ? viberLoader : false) ||
-      (rcsLoader !== undefined ? rcsLoader : false);
+      (viberLoader !== undefined ? viberLoader : false);
     return isLoading;
   }
   getChannelTypeIllustrationInfo = (type) => {
@@ -2069,17 +2021,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
           title: <FormattedMessage {...messages.whatsappTitleIllustration} values={{ template: templateText }} />,
           description: <FormattedMessage {...messages.whatsappDescIllustration} />,
           descriptionPosition: 'bottom',
-          descriptionClassName: 'illustration-desc',
-        };
-      case RCS:
-        return {
-          buttonLabel: <FormattedMessage {...messages.newRCSTemplate} values={{ template: templateText }} />,
-          onClick: this.createTemplate,
-          illustrationImage: rcsIllustration,
-          title: <FormattedMessage {...messages.rcsTitleIllustartion} values={{ template: templateText }} />,
-          description: <FormattedMessage {...messages.rcsDescIllustartion} />,
-          descriptionPosition: 'bottom',
-          descriptionClassName: 'illustration-desc rcs-illustration',
+          descriptionClassName: 'whatsapp-illustration-desc',
         };
       default:
         return {};
@@ -2136,7 +2078,7 @@ 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 isFacebookChannel = channel === FACEBOOK;    
 
     if ([WECHAT, MOBILE_PUSH, LINE, WHATSAPP].includes(channel) && !isEmpty(weCrmAccounts) && !isFacebookChannel) {
       forEach(weCrmAccounts, (account) => {
@@ -2275,7 +2217,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
       [MOBILE_PUSH]: 'mobilepushAccount',
       [WECHAT]: 'wechatAccount',
       [WHATSAPP]: 'whatsappAccount',
-    };
+    }
     return formatMessage(messages[channelObj[channel?.toUpperCase()]]);
   }
 
@@ -2384,13 +2326,13 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
       }
     }
 
-    const showForChannels = (![VIBER_CHANNEL, FACEBOOK_CHANNEL].includes(channel.toLowerCase()) ||
+    const showForViber = (![VIBER_CHANNEL, FACEBOOK_CHANNEL].includes(channel.toLowerCase()) ||
       (channel.toLowerCase() === VIBER_CHANNEL && !this.props.isFullMode && isEmpty(get(this.props, 'Templates.selectedViberAccount', {}))) ||
       (channel.toLowerCase() === FACEBOOK_CHANNEL && showFbAds)
     );
 
 
-    if (activeMode === ACCOUNT_SELECTION_MODE && showForChannels ) {
+    if (activeMode === ACCOUNT_SELECTION_MODE && showForViber ) {
       return this.renderAccountSelection();
     }
 
@@ -2424,12 +2366,12 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
     const channelLowerCase = (channel || '').toLowerCase();
     const isTraiDltFeature = this.checkDLTfeatureEnable();
 
-    const createButton =
+    const createButton = 
       ( channelLowerCase === WHATSAPP_LOWERCASE && !this.props.isFullMode )
       ? (
-        <CapLink
-          onClick={this.openCreativesFullMode}
-          title={formatMessage(messages.createNewTemplateLink)}
+        <CapLink 
+          onClick={this.openCreativesFullMode} 
+          title={formatMessage(messages.createNewTemplateLink)} 
           suffix={<CapIcon type="open-in-new" size="s" />}
           className="create-new-link"
         />
@@ -2484,7 +2426,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
                   onSelect={this.setWhatsappStatus}
                   selectedValue={this.state.selectedWhatsappStatus}
                   placeholder="Status"
-                  showBadge
+                  showBadge={true}
                   width="90px"
                 />
               ) : null
@@ -2495,12 +2437,12 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
               onSelect={this.setWhatsappCategory}
               selectedValue={this.state.selectedWhatsappCategory}
               placeholder="Category"
-              showBadge
+              showBadge={true}
               width="105px"
               overlayStyle={{ overflowY: "hidden" }}
             />
           </div>
-
+          
         )
       }
       {
@@ -2578,7 +2520,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
               </div>
             </CapTooltip>
           )
-            : isfilterContentVisisble && !isWechatEmbedded && !this.props.isDltFromRcs && createButton
+          : isfilterContentVisisble && !isWechatEmbedded && createButton
         }
       </div>
 
@@ -2709,9 +2651,7 @@ Templates.propTypes = {
   viberActions: PropTypes.object,
   facebookActions: PropTypes.object,
   whatsappActions: PropTypes.object,
-  rcsActions: PropTypes.object,
   smsRegister: PropTypes.any,
-  isDltFromRcs: PropTypes.bool,
 };
 
 const mapStateToProps = createStructuredSelector({
@@ -2740,7 +2680,6 @@ function mapDispatchToProps(dispatch) {
     viberActions: bindActionCreators(viberActions, dispatch),
     facebookActions: bindActionCreators(facebookActions, dispatch),
     whatsappActions: bindActionCreators(whatsappActions, dispatch),
-    rcsActions: bindActionCreators(rcsActions, dispatch),
   };
 }