@capillarytech/creatives-library 7.12.1 → 7.12.5

package/v2Containers/Templates/index.js

@@ -70,6 +70,7 @@ 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';
@@ -97,7 +98,9 @@ import {
   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 { getRCSContent } from '../Rcs/utils';
+
+import { MOBILE_PUSH, WECHAT, SMS, EMAIL, EBILL, LINE, VIBER, FACEBOOK, WHATSAPP, RCS } from '../CreativesContainer/constants';
 
 import {CREATIVE} from '../Facebook/constants';
 
@@ -105,6 +108,8 @@ 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;
@@ -144,10 +149,18 @@ 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);
@@ -177,7 +190,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);
@@ -248,6 +261,9 @@ 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 = '';
       }
@@ -278,7 +294,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'].includes((this.state.channel || '').toLowerCase())) {
+    if (['line', VIBER_CHANNEL, FACEBOOK_CHANNEL, 'sms', 'email', 'ebill', RCS_LOWERCASE].includes((this.state.channel || '').toLowerCase())) {
       const queryParams = {
         // name: this.state.searchText,
         // sortBy: this.state.sortBy,
@@ -341,7 +357,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
       }
 
       this.setState({ channel }, () => {
-        if (['line', VIBER_CHANNEL, FACEBOOK_CHANNEL, 'sms', 'email', 'ebill'].includes(this.state.channel.toLowerCase()) || (this.state.channel.toLowerCase() === 'wechat' && !isEmpty(nextProps.Templates.selectedWeChatAccount))) {
+        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 (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;
@@ -404,12 +420,13 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
         });
       }
     }
-    if ((this.state.channel.toLowerCase() === 'wechat' || this.state.channel.toLowerCase() === 'mobilepush') && isEmpty(nextProps.Templates.selectedWeChatAccount) && (this.props.location.query.type === 'embedded') && !this.isEnabledInLibraryModule("showAccountSelection")) {
+
+    if ((selectedChannel === 'wechat' || selectedChannel === 'mobilepush') && isEmpty(nextProps.Templates.selectedWeChatAccount) && (this.props.location.query.type === 'embedded') && !this.isEnabledInLibraryModule("showAccountSelection")) {
       let selectedAccount = '';
       if (isEmpty(nextProps.Templates.weCrmAccounts)) {
         return;
       }
-      if (this.state.channel.toLowerCase() === 'wechat') {
+      if (selectedChannel === '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) {
@@ -424,7 +441,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
           nextProps.actions.setWeChatAccount(selectedAccount);
           this.getAllTemplates({params});
         });
-      } else if (this.state.channel.toLowerCase() === 'mobilepush' && (nextProps.location.query.account_id || nextProps.location.query.source_account_id)) {
+      } else if (selectedChannel === '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;
@@ -435,37 +452,38 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
         this.getAllTemplates({params});
       }
     }
-    if ((this.state.channel || '').toLowerCase() === "mobilepush" && nextProps.CreateMobilePush && nextProps.CreateMobilePush.response && nextProps.CreateMobilePush.response.templateId && nextProps.CreateMobilePush.response.templateId !== '') {
+    if (selectedChannel === "mobilepush" && nextProps.CreateMobilePush && nextProps.CreateMobilePush.response && nextProps.CreateMobilePush.response.templateId && nextProps.CreateMobilePush.response.templateId !== '') {
 
     }
 
-    if ((this.state.channel || '').toLowerCase() === "ebill" && nextProps.CreateEbill && nextProps.CreateEbill.createResponse && nextProps.CreateEbill.createResponse.templateId && nextProps.CreateEbill.createResponse.templateId !== '') {
+    if (selectedChannel === "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 ((this.state.channel || '').toLowerCase() === "email" && nextProps.EmailCreate && nextProps.EmailCreate.duplicateResponse && nextProps.EmailCreate.duplicateResponse.templateId && nextProps.EmailCreate.duplicateResponse.templateId !== '') {
+    if (selectedChannel === "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 ((this.state.channel || '').toLowerCase() === "line" && nextProps.Line && nextProps.Line.response && nextProps.Line.response.templateId && nextProps.Line.response.templateId !== '') {
+    if (selectedChannel === "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 } = this.props;
+      const { smsActions, mobilepushActions, ebillActions, lineActions, viberActions, facebookActions, whatsappActions, rcsActions } = this.props;
       switch (selectedChannel) {
         case SMS_LOWERCASE:
           smsActions.clearCreateResponse();
@@ -488,6 +506,9 @@ 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;
       }
@@ -529,28 +550,30 @@ 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 (nextProps.Templates.weCrmAccounts !== undefined && nextProps.Templates.weCrmAccounts.length === 1 && this.state.defaultAccount && (['wechat', WHATSAPP_LOWERCASE].indexOf(this.state.channel.toLowerCase()) > -1 )) {
+    if (weCrmAccountsList.length === 1 && this.state.defaultAccount && (weCrmChannels.indexOf(selectedChannel) > -1)) {
       const paramsDefault = {
         name: this.state.searchText,
         sortBy: this.state.sortBy,
       };
-      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) {
+      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)) {
           nextProps.actions.setChannelAccount(
-            WHATSAPP,
-            nextProps.Templates.weCrmAccounts[0],
+            selectedChannel.toUpperCase(),
+            weCrmAccountsList[0],
           );
         } else {
           nextProps.actions.setWeChatAccount(
-            nextProps.Templates.weCrmAccounts[0],
+            weCrmAccountsList[0],
           );
         }
       }
-      this.setState({defaultAccount: false, activeMode: TEMPLATES_MODE, selectedAccount: nextProps.Templates.weCrmAccounts[0].name });
+      this.setState({ defaultAccount: false, activeMode: TEMPLATES_MODE, selectedAccount: weCrmAccountsList[0].name });
       this.getAllTemplates({params: paramsDefault}, true);
     }
   }
@@ -570,12 +593,13 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
         name: this.state.searchText,
         sortBy: this.state.sortBy,
       };
-      if (this.state.channel.toLowerCase() === 'wechat') {
+      const selectedChannel = this.state.channel.toLowerCase();
+      if (selectedChannel === 'wechat') {
         params.wecrmId = this.props.Templates.weCrmAccounts[findIndex(this.props.Templates.weCrmAccounts, { name: value})].configs.wecrm_app_id;
         params.wecrmToken = this.props.Templates.weCrmAccounts[findIndex(this.props.Templates.weCrmAccounts, { name: value})].configs.wecrm_token;
         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 (this.state.channel.toLowerCase() === 'mobilepush') {
+      } else if (selectedChannel === '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;
@@ -588,10 +612,8 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
         } else {
           this.setState({selectedAccountError: false});
         }
-      } else if (this.state.channel.toLowerCase() === LINE.toLowerCase()) {
-        this.props.actions.setChannelAccount(LINE, this.props.Templates.weCrmAccounts.find((item) => item.name === this.state.selectedAccount));
-      } else if (this.state.channel.toLowerCase() === WHATSAPP_LOWERCASE) {
-        this.props.actions.setChannelAccount(WHATSAPP, this.props.Templates.weCrmAccounts.find((item) => item.name === this.state.selectedAccount));
+      } else if ([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));
       }
 
       this.setState({activeMode: TEMPLATES_MODE});
@@ -640,6 +662,7 @@ 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();
@@ -743,13 +766,12 @@ 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;
@@ -770,7 +792,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
       );
     });
   }
-  
+
   filterSMSTemplates = (templates) => {
     const { smsFilter } = this.state;
     if (SMS_FILTERS.ALL === smsFilter) {
@@ -786,6 +808,43 @@ 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;
@@ -827,7 +886,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) { handlers.handlePreviewClick(template); } else { this.props.handlePeviewTemplate(template); } }}
+              onClick={() => { if (!this.props.isFullMode || this.props.isDltFromRcs) { this.props.handlePeviewTemplate(template); } else { handlers.handlePreviewClick(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>,
@@ -844,7 +903,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
           } = {},
         } = {},
       } = template;
-      if (this.props.isFullMode && !(this.state.channel.toUpperCase() === WHATSAPP && status === WHATSAPP_STATUSES.approved)) {
+      if (this.props.isFullMode && !this.props.isDltFromRcs && !(this.state.channel.toUpperCase() === WHATSAPP && status === WHATSAPP_STATUSES.approved)) {
         templateData.extra.push(<CapDropdown
           overlay={
             <CapMenu>
@@ -995,6 +1054,11 @@ 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 = "";
       }
@@ -1002,6 +1066,12 @@ 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}
@@ -1018,7 +1088,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
                 fbType={"list"}
                 />
             </div>)
-            : ['sms', "email"].includes(this.state.channel.toLowerCase()) && !isLoading && <CapIllustration buttonClassName={`create-new-${channelLowerCase}`} {...this.getChannelTypeIllustrationInfo(currentChannel)} />
+            : ['sms', "email"].includes(this.state.channel.toLowerCase()) && !isLoading && this.getSmsEmailIllustration()
           }
 
           {(this.state.selectedAccount === '' && isEmpty(this.props.Templates.selectedWeChatAccount)) && (this.state.channel.toLowerCase() === 'wechat' || this.state.channel.toLowerCase() === "mobilepush") &&
@@ -1044,52 +1114,27 @@ 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 &&
+          {showWhatsappIllustration &&
+            (
+            noLoaderAndSearchText &&
               <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>
-                    }
-                  />}
+                {noWhatsappTemplates && <CapIllustration buttonClassName={`create-new-${channelLowerCase}`} {...this.getChannelTypeIllustrationInfo(currentChannel)} />}
+                {noFilteredWhatsappTemplates && this.whatsappIllustrationText('noFilteredWhatsappTemplatesTitle', 'noFilteredWhatsappTemplatesDesc')}
+                {noApprovedWhatsappTemplates && this.whatsappIllustrationText('noApprovedWhatsappTemplatesTitle', 'noApprovedWhatsappTemplatesDesc')}
+              </div>
+            )
+          }
+          {showRcsIllustration &&
+            (
+            noLoaderAndSearchText &&
+              <div style={this.isFullMode() ? { height: "calc(100vh - 325px)", overflow: 'auto' } : {}}>
+                <CapIllustration buttonClassName={`create-new-${channelLowerCase}`} {...this.getChannelTypeIllustrationInfo(currentChannel)} />
               </div>
             )
           }
         </div>
         }
-
       </CapSpin>
-
     </div>);
   }
   filterLineTemplates = (templates) => {
@@ -1508,26 +1553,27 @@ 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;
-    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") {
+
+    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)}`;
@@ -1539,33 +1585,8 @@ 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 (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();
-        }
-      });
+    } else if (["sms", "line", VIBER_CHANNEL, FACEBOOK_CHANNEL, RCS_LOWERCASE].includes(this.state.channel.toLowerCase())) {
+      this.commonDuplicate(duplicateEnum[this.state.channel.toLowerCase()], duplicateObj);
     }
   }
 
@@ -1616,55 +1637,74 @@ 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;
-    let getQuery = "";
+    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 pathName = path;
     e.stopPropagation();
 
     this.props.actions.resetTemplateData();
-    if (this.state.channel.toLowerCase() === 'sms') {
-      pathName = `/sms/edit/${id}`;
-    }
-    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}`;
+    switch (channelLowerCase) {
+      case 'sms': {
+        pathName = `/sms/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}`;
+      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.toUpperCase() === WHATSAPP) {
-      pathName = `/whatsapp/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;
+      }
+      case RCS: {
+        pathName = `/rcs/edit/${id}/`;
+        break;
+      }
+      default:
+        break;
     }
     if (this.isEnabledInLibraryModule("callSelectFromProps")) {
       let data = id;
-      if (this.props.fbAdManager) {
+      if (this.props.fbAdManager || this.props.isDltFromRcs) {
         data = this.selectTemplate(id);
       }
       this.props.onSelectTemplate(data, this.props.fbAdManager);
@@ -1953,6 +1993,12 @@ 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;
@@ -1962,10 +2008,11 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
       fetchingWeCrmAccounts,
       sendingFile,
     } = Templates;
-    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 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 wechatLoader = (((this.state.selectedAccount !== '' && getAllTemplatesInProgress) || (fetchingWeCrmAccounts)) && this.state.channel.toLowerCase() === 'wechat');
     const whatsappLoader = (((this.state.selectedAccount !== '' && getAllTemplatesInProgress) || (fetchingWeCrmAccounts)) && this.state.channel.toLowerCase() === WHATSAPP_LOWERCASE);
@@ -1984,7 +2031,8 @@ 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);
+      (viberLoader !== undefined ? viberLoader : false) ||
+      (rcsLoader !== undefined ? rcsLoader : false);
     return isLoading;
   }
   getChannelTypeIllustrationInfo = (type) => {
@@ -2021,7 +2069,17 @@ 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: 'whatsapp-illustration-desc',
+          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',
         };
       default:
         return {};
@@ -2078,7 +2136,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) => {
@@ -2217,7 +2275,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()]]);
   }
 
@@ -2326,13 +2384,13 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
       }
     }
 
-    const showForViber = (![VIBER_CHANNEL, FACEBOOK_CHANNEL].includes(channel.toLowerCase()) ||
+    const showForChannels = (![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 && showForViber ) {
+    if (activeMode === ACCOUNT_SELECTION_MODE && showForChannels ) {
       return this.renderAccountSelection();
     }
 
@@ -2366,12 +2424,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"
         />
@@ -2426,7 +2484,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
                   onSelect={this.setWhatsappStatus}
                   selectedValue={this.state.selectedWhatsappStatus}
                   placeholder="Status"
-                  showBadge={true}
+                  showBadge
                   width="90px"
                 />
               ) : null
@@ -2437,12 +2495,12 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
               onSelect={this.setWhatsappCategory}
               selectedValue={this.state.selectedWhatsappCategory}
               placeholder="Category"
-              showBadge={true}
+              showBadge
               width="105px"
               overlayStyle={{ overflowY: "hidden" }}
             />
           </div>
-          
+
         )
       }
       {
@@ -2520,7 +2578,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
               </div>
             </CapTooltip>
           )
-          : isfilterContentVisisble && !isWechatEmbedded && createButton
+            : isfilterContentVisisble && !isWechatEmbedded && !this.props.isDltFromRcs && createButton
         }
       </div>
 
@@ -2651,7 +2709,9 @@ Templates.propTypes = {
   viberActions: PropTypes.object,
   facebookActions: PropTypes.object,
   whatsappActions: PropTypes.object,
+  rcsActions: PropTypes.object,
   smsRegister: PropTypes.any,
+  isDltFromRcs: PropTypes.bool,
 };
 
 const mapStateToProps = createStructuredSelector({
@@ -2680,6 +2740,7 @@ function mapDispatchToProps(dispatch) {
     viberActions: bindActionCreators(viberActions, dispatch),
     facebookActions: bindActionCreators(facebookActions, dispatch),
     whatsappActions: bindActionCreators(whatsappActions, dispatch),
+    rcsActions: bindActionCreators(rcsActions, dispatch),
   };
 }