@capillarytech/creatives-library 2.0.33 → 2.0.35

package/containers/Sms/Edit/index.js

@@ -24,6 +24,7 @@ import '../Create/_smsCreate.scss';
 import messages from './messages';
 import * as globalActions from '../../../containers/Cap/actions';
 import {getMessageObject} from '../../../utils/messageUtils';
+import * as creativesContainerActions from '../../CreativesContainer/actions';
 // import callNativeEvent from '../../../utils/callNativeEvent';
 
 export class Edit extends React.Component { // eslint-disable-line react/prefer-stateless-function
@@ -84,7 +85,6 @@ export class Edit extends React.Component { // eslint-disable-line react/prefer-
   }
 
   componentWillMount() {
-    console.log('edit mounting');
     const query = {
       layout: 'SMS',
       type: 'LAYOUT',
@@ -148,7 +148,6 @@ export class Edit extends React.Component { // eslint-disable-line react/prefer-
       }
     }
     if (nextProps.Edit.editResponse && nextProps.Edit.editResponse.templateId) {
-      console.log('reseting schema');
       this.resetSchema();
       this.setState({
         formData: {},
@@ -177,7 +176,7 @@ export class Edit extends React.Component { // eslint-disable-line react/prefer-
       delete injectedTags["Store custom fields"];
       delete injectedTags["Transaction custom fields"];
       injectedTags = _.merge({}, injectedTags, nextProps.metaEntities.tags.custom);
-      console.log('new injected tags', nextProps.metaEntities.tags.custom);
+
       if (!_.has(nextProps.metaEntities.tags.custom, "Registration custom fields")) {
         delete injectedTags["Registration custom fields"];
       }
@@ -196,15 +195,14 @@ export class Edit extends React.Component { // eslint-disable-line react/prefer-
   }
 
   onTemplateNameChange(name) {
-    console.log('Template name changed to ', name);
+
   }
 
   onTemplateContentChange(content) {
-    console.log('Template content changed to ', content);
+
   }
 
   onFormDataChange(formData, tabCount, currentTab) {
-    console.log('Form data changed is ', formData, tabCount, currentTab);
     this.setState({formData, tabCount, currentTab});
     if (currentTab) {
       this.setState({currentTab});
@@ -212,18 +210,16 @@ export class Edit extends React.Component { // eslint-disable-line react/prefer-
   }
 
   onVersionNameChange(data, versionIndex) {
-    console.log('version name changed to', data, versionIndex);
+
   }
 
   onTagSelect(data, currentTab) {
-    console.log('parent data tag', data, currentTab);
     const editorId = currentTab > 1 ? `sms-editor${currentTab}` : 'sms-editor';
     this.insertAtCursor(document.getElementById(editorId), `{{${data}}}`, currentTab);
     document.getElementById(editorId).focus();
   }
 
   onTabChange(data) {
-    console.log('inside parent ontabchange', data, this.state);
     this.setState({currentTab: data});
   }
 
@@ -247,7 +243,6 @@ export class Edit extends React.Component { // eslint-disable-line react/prefer-
       }
       if (type === 'embedded' || count > 0) {
         setTimeout( () => {
-          console.log('removing standalone');
           if (type === 'embedded' && !_.isEmpty(that.state.formData)) {
             that.removeStandAlone();
           } else {
@@ -263,7 +258,7 @@ export class Edit extends React.Component { // eslint-disable-line react/prefer-
       formData[0].base = true;
     }
     formData.base = data.versions.base;
-    console.log('form data after discarding ', formData);
+
     this.setState({tabCount, formData, editData: data, currentTab}, () => {
     });
   }
@@ -273,12 +268,10 @@ export class Edit extends React.Component { // eslint-disable-line react/prefer-
   }
 
   getFormData(e, value) {
-    console.log('posting final result', this.state.formData);
     const formData = _.cloneDeep(this.state.formData);
     let baseData = {};
     let versionIdx;
     _.forEach(formData, (val, idx) => {
-      console.log('val', val);
       if (val.base && idx !== 'base') {
         baseData = val;
         versionIdx = idx;
@@ -292,7 +285,7 @@ export class Edit extends React.Component { // eslint-disable-line react/prefer-
     result.base = baseData;
     const msgObj = updateCharCount(baseData['sms-editor']);
     result.base.msg_count = msgObj.msgCount;
-    console.log("Message Count", msgObj.msgCount);
+
     const response = {
       action: "getFormData",
       value: result,
@@ -300,8 +293,8 @@ export class Edit extends React.Component { // eslint-disable-line react/prefer-
       validity: this.state.isFormValid,
       type: 'SMS',
     };
-    this.setState({checkValidation: true});
-    console.log('posting final result internal', response);
+    this.setState({checkValidation: true, loading: true});
+
     if (e) {
       e.source.postMessage(JSON.stringify(response), e.origin);
     }
@@ -309,7 +302,6 @@ export class Edit extends React.Component { // eslint-disable-line react/prefer-
   }
 
   getCurrentWindow(e) {
-    console.log('in sms create', e);
     const response = {
       action: e.action,
       value: 'edit',
@@ -370,7 +362,6 @@ export class Edit extends React.Component { // eslint-disable-line react/prefer-
   }
 
   handleOnTagsContextChange = (data) => {
-    console.log('parent tags context', data);
     const query = {
       layout: 'SMS',
       type: 'TAG',
@@ -389,10 +380,9 @@ export class Edit extends React.Component { // eslint-disable-line react/prefer-
   }
 
   startTemplateCreation(data) {
-    console.log('startTemplateCreation');
     if (data.edit) {
       const ifUnicode = checkUnicode(data.content);
-      console.log('smsDetails', ifUnicode, data.content);
+
       const content = data.content;
       const tempData = {
         'sms-editor': content,
@@ -409,14 +399,12 @@ export class Edit extends React.Component { // eslint-disable-line react/prefer-
   }
 
   startLoading(ifEdit) {
-    console.log('startLoading', ifEdit);
     if (ifEdit) {
       this.setState({loading: true});
     }
   }
 
   moveToTemplates() {
-    console.log('in move to Templates');
     const modalContent = {
       title: "Alert",
       body: "Do you really want to go back? All your temporary changes will be lost!",
@@ -433,7 +421,6 @@ export class Edit extends React.Component { // eslint-disable-line react/prefer-
   }
 
   discardValues() {
-    console.log('discarding', this.props.Edit);
     this.resetSchema();
     this.setState({
       formData: {},
@@ -462,15 +449,13 @@ export class Edit extends React.Component { // eslint-disable-line react/prefer-
       }
     }
     if (isValid) {
-      console.log('isValid');
       return true;
     }
-    console.log('not valid');
+
     return false;
   }
 
   injectEvents(schema) {
-    console.log('now injecting events in edit');
     const temp = schema;
     temp.standalone.sections = this.injectSections(temp.standalone.sections);
     _.forEach(temp.containers, (container) => {
@@ -513,7 +498,7 @@ export class Edit extends React.Component { // eslint-disable-line react/prefer-
         _.forEach(col.supportedEvents, (event) => {
           temp.injectedEvents[event] = this.getMappedEvent(col.id, event);
         });
-        console.log('should translate multicol', temp);
+
         temp = this.injectMessages(temp);
         return true;
       });
@@ -530,7 +515,7 @@ export class Edit extends React.Component { // eslint-disable-line react/prefer-
         _.forEach(col.supportedEvents, (event) => {
           temp.injectedEvents[event] = this.getMappedEvent(col.id, event);
         });
-        console.log('should translate multicol action', temp);
+
         temp = this.injectMessages(temp);
         return true;
       });
@@ -550,7 +535,7 @@ export class Edit extends React.Component { // eslint-disable-line react/prefer-
       _.forEach(inputField.supportedEvents, (event) => {
         temp.injectedEvents[event] = this.getMappedEvent(inputField.id, event);
       });
-      console.log('should translate collabel', temp);
+
       temp = this.injectMessages(temp);
       return true;
     });
@@ -565,7 +550,7 @@ export class Edit extends React.Component { // eslint-disable-line react/prefer-
       _.forEach(actionField.supportedEvents, (event) => {
         temp.injectedEvents[event] = this.getMappedEvent(actionField.id, event);
       });
-      console.log('should translate collabel action', temp);
+
       temp = this.injectMessages(temp);
       return true;
     });
@@ -675,17 +660,15 @@ export class Edit extends React.Component { // eslint-disable-line react/prefer-
   }
 
   renameVersion(data, currentTab) {
-    console.log('renaming version', data, currentTab);
+
   }
 
   markFinalVersion(data, currentTab) {
     const message = getMessageObject('success', 'Template Marked as Final Successfully', true);
     this.props.globalActions.addMessageToQueue(message);
-    console.log('markFinal version', data, currentTab);
   }
 
   duplicateVersion(data, currentTab) {
-    console.log('duplicate version', data, currentTab);
     this.addVersion(this.state.tabCount);
   }
 
@@ -699,7 +682,6 @@ export class Edit extends React.Component { // eslint-disable-line react/prefer-
   }
 
   addVersion(data, addNow) {
-    console.log('adding version', data);
     let tabIndex = data + 1;
     const schema = _.cloneDeep(this.state.schema);
     const containers = schema.containers.slice();
@@ -723,7 +705,7 @@ export class Edit extends React.Component { // eslint-disable-line react/prefer-
         });
         firstPane.sections = sections;
         schema.containers[0].panes.push(firstPane);
-        console.log('adding version tabIndex', tabIndex, tabIndex === 5, schema.containers[0].tabBarExtraContent.sections[0].actionFields[0].cols);
+
         if (tabIndex === 5) {
           schema.containers[0].tabBarExtraContent.sections[0].actionFields[0].cols[0].disabled = true;
         }
@@ -748,7 +730,7 @@ export class Edit extends React.Component { // eslint-disable-line react/prefer-
       });
       firstPane.sections = sections;
       schema.containers[0].panes.push(firstPane);
-      console.log('adding version tabIndex', tabIndex, tabIndex === 5, schema.containers[0].tabBarExtraContent.sections[0].actionFields[0].cols);
+
       if (tabIndex === 5) {
         schema.containers[0].tabBarExtraContent.sections[0].actionFields[0].cols[0].disabled = true;
       }
@@ -783,10 +765,8 @@ export class Edit extends React.Component { // eslint-disable-line react/prefer-
   }
 
   handleFrameTasks = (e) => {
-    console.log('data listened to is', e.data);
     const type = e.data;
     if (typeof type === 'object') {
-      console.log('received something', type);
       const action = type.action;
       switch (action) {
         case "startTemplateCreation":
@@ -810,15 +790,15 @@ export class Edit extends React.Component { // eslint-disable-line react/prefer-
         this.getFormData(e);
         break;
       case "startTemplateCreation":
-        console.log('Starting to create template');
+
         //this.getFormData(e);
         break;
       case "moveToTemplates":
-        console.log('moving to templates');
+
         this.moveToTemplates();
         break;
       case "validateContent":
-        console.log('validating Content');
+
         this.validateContent(e);
         break;
       default:
@@ -828,7 +808,7 @@ export class Edit extends React.Component { // eslint-disable-line react/prefer-
 
   removeStandAlone() {
     let formData = _.cloneDeep(this.state.formData);
-    console.log('removing standalone 2', formData);
+
     let baseFormData = {};
     const oldBaseKeys = formData[0];
     let baseIndex = -1;
@@ -871,12 +851,11 @@ export class Edit extends React.Component { // eslint-disable-line react/prefer-
         temp.panes.push(basePane);
       }
     });
-    console.log('final data after removing', formData);
+
     this.setState({ schema, loadingStatus: this.state.loadingStatus + 1, formData, tabCount: 1, tabKey: formData.base.tabKey, currentTab: 1 });
   }
 
   validateContent = (e) => {
-    console.log('posting final validation result', this.state.isFormValid);
     const response = {
       action: "validateContent",
       value: this.state.isFormValid,
@@ -896,7 +875,7 @@ export class Edit extends React.Component { // eslint-disable-line react/prefer-
 
   saveFormData(formData) {
     //Logic to save in db etc
-    console.log('Saving form data', formData, this.state.tabCount);
+
     const obj = _.cloneDeep(this.state.editData);
     obj.versions = {
       base: {},
@@ -907,7 +886,7 @@ export class Edit extends React.Component { // eslint-disable-line react/prefer-
     }
     obj.name = formData['template-name'];
     obj.versions.base = formData.base;
-    console.log('edit obj', obj);
+
     this.props.actions.editTemplate(obj);
   }
   isSmsLoading = () => {
@@ -917,6 +896,9 @@ export class Edit extends React.Component { // eslint-disable-line react/prefer-
     if (!isLoading) {
       isLoading = this.state.loadingStatus < 3;
     }
+    if (isLoading) {
+      this.props.creativesContainerActions.hideCreativesContanerLoader();
+    }
     return isLoading;
   }
   render() {
@@ -986,6 +968,7 @@ Edit.propTypes = {
   supportedTags: PropTypes.array,
   getDefaultTags: PropTypes.string,
   isLoadingMetaEntities: PropTypes.bool,
+  creativesContainerActions: PropTypes.object,
 };
 
 const mapStateToProps = createStructuredSelector({
@@ -1000,6 +983,7 @@ function mapDispatchToProps(dispatch) {
   return {
     actions: bindActionCreators(actions, dispatch),
     globalActions: bindActionCreators(globalActions, dispatch),
+    creativesContainerActions: bindActionCreators(creativesContainerActions, dispatch),
   };
 }
 

package/containers/Templates/index.js

@@ -8,15 +8,13 @@ import PropTypes from 'prop-types';
 
 import React from 'react';
 import { connect } from 'react-redux';
-import Helmet from 'react-helmet';
 import { FormattedMessage, injectIntl, intlShape } from 'react-intl';
 import { createStructuredSelector } from 'reselect';
 import moment from "moment";
 import _ from 'lodash';
 import { bindActionCreators } from 'redux';
-import { Row, Select, Spin, Dropdown, Col, Breadcrumb, Menu, Modal} from 'antd';
-import { CapPopover, CapSelect } from '@capillarytech/cap-react-ui-library';
-import {CapButton, CapInput, CapIcon} from '@capillarytech/cap-ui-library';
+import { Row, Select, Spin, Dropdown, Menu, Modal} from 'antd';
+import {CapButton, CapInput, CapIcon, CapSelect, CapPopover} 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';
@@ -47,7 +45,6 @@ import EmailPreview from '../../components/EmailPreview';
 import CreativesContainer from '../CreativesContainer';
 const MenuItem = Menu.Item;
 const Option = Select.Option;
-const BreadcrumbItem = Breadcrumb.Item;
 
 export class Templates extends React.Component { // eslint-disable-line react/prefer-stateless-function
   constructor(props) {
@@ -138,6 +135,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
       if (this.state.channel.toLowerCase() === 'wechat' && !_.isEmpty(this.props.Templates.selectedWeChatAccount)) {
         queryParams.wecrmId = this.props.Templates.selectedWeChatAccount.configs.wecrm_app_id;
         queryParams.wecrmToken = this.props.Templates.selectedWeChatAccount.configs.wecrm_token;
+        queryParams.originalId = this.props.Templates.selectedWeChatAccount.sourceAccountIdentifier;
       }
       if (this.state.channel.toLowerCase() === "mobilepush" && !_.isEmpty(this.props.Templates.selectedWeChatAccount)) {
         queryParams.accountId = this.props.Templates.selectedWeChatAccount.id;
@@ -189,6 +187,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
           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;
+            params.originalId = nextProps.Templates.selectedWeChatAccount.sourceAccountIdentifier;
           }
           if (this.state.channel.toLowerCase() === "mobilepush" && !_.isEmpty(nextProps.Templates.selectedWeChatAccount)) {
             params.accountId = nextProps.Templates.selectedWeChatAccount.id;
@@ -200,6 +199,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
     if (this.state.channel.toLowerCase() === 'wechat' && nextProps.Templates.selectedWeChatAccount) {
       params.wecrmId = nextProps.Templates.selectedWeChatAccount.configs.wecrm_app_id;
       params.wecrmToken = nextProps.Templates.selectedWeChatAccount.configs.wecrm_token;
+      params.originalId = nextProps.Templates.selectedWeChatAccount.sourceAccountIdentifier;
     }
     if (this.state.channel.toLowerCase() === "mobilepush" && nextProps.Templates.selectedWeChatAccount) {
       params.accountId = nextProps.Templates.selectedWeChatAccount.id;
@@ -220,6 +220,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
         this.setState({selectedAccount: selectedAccount.name}, () => {
           params.wecrmId = selectedAccount.configs.wecrm_app_id;
           params.wecrmToken = selectedAccount.configs.wecrm_token;
+          params.originalId = selectedAccount.sourceAccountIdentifier;
           nextProps.actions.setWeChatAccount(selectedAccount);
           this.getAllTemplates({params});
         });
@@ -331,6 +332,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
       if (this.state.channel.toLowerCase() === 'wechat') {
         paramsDefault.wecrmId = nextProps.Templates.weCrmAccounts[0].configs.wecrm_app_id;
         paramsDefault.wecrmToken = nextProps.Templates.weCrmAccounts[0].configs.wecrm_token;
+        paramsDefault.originalId = nextProps.Templates.weCrmAccounts[0].sourceAccountIdentifier;
         nextProps.actions.setWeChatAccount(nextProps.Templates.weCrmAccounts[0]);
       } else if (this.state.channel.toLowerCase() === 'mobilepush') {
         nextProps.actions.setWeChatAccount(nextProps.Templates.weCrmAccounts[0]);
@@ -358,10 +360,12 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
         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') {
         this.props.actions.setWeChatAccount(this.props.Templates.weCrmAccounts[_.findIndex(this.props.Templates.weCrmAccounts, { name: value})]);
         params.accountId = this.props.Templates.weCrmAccounts[_.findIndex(this.props.Templates.weCrmAccounts, { name: value})].id;
       }
+      console.log("getAllTemplates params: ", params);
       this.getAllTemplates({params, resetPage: true});
     });
   }
@@ -371,8 +375,6 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
   getAllTemplates = ({params, getNextPage, resetPage}, resetTemplates) => {
     let queryParams = params;
     let page = this.state.page;
-
-
     if (resetTemplates) {
       queryParams.name = this.state.searchText;
       queryParams.sortBy = this.state.sortBy;
@@ -397,6 +399,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
         if (this.state.channel.toLowerCase() === 'wechat' && !_.isEmpty(this.props.Templates.selectedWeChatAccount)) {
           queryParams.wecrmId = this.props.Templates.selectedWeChatAccount.configs.wecrm_app_id;
           queryParams.wecrmToken = this.props.Templates.selectedWeChatAccount.configs.wecrm_token;
+          queryParams.originalId = this.props.Templates.selectedWeChatAccount.sourceAccountIdentifier;
         }
         if (this.state.channel.toLowerCase() === "mobilepush" && !_.isEmpty(this.props.Templates.selectedWeChatAccount)) {
           queryParams.accountId = this.props.Templates.selectedWeChatAccount.id;
@@ -744,6 +747,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
       if (this.state.channel.toLowerCase() === 'wechat') {
         params.wecrmId = this.props.Templates.selectedWeChatAccount.configs.wecrm_app_id;
         params.wecrmToken = this.props.Templates.selectedWeChatAccount.configs.wecrm_token;
+        params.originalId = this.props.Templates.selectedWeChatAccount.sourceAccountIdentifier;
       }
       if (this.state.channel.toLowerCase() === "mobilepush") {
         params.accountId = this.props.Templates.selectedWeChatAccount.id;
@@ -761,6 +765,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
       if (this.state.channel.toLowerCase() === 'wechat') {
         params.wecrmId = this.props.Templates.selectedWeChatAccount.configs.wecrm_app_id;
         params.wecrmToken = this.props.Templates.selectedWeChatAccount.configs.wecrm_token;
+        params.originalId = this.props.Templates.selectedWeChatAccount.sourceAccountIdentifier;
       }
       if (this.state.channel.toLowerCase() === "mobilepush") {
         params.accountId = this.props.Templates.selectedWeChatAccount.id;
@@ -1183,23 +1188,6 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
   }
 
   render() {
-    let pageHeaderText = '';
-    const moduleName = this.props.location.query.module;
-    if (this.props.location.query.type !== 'embedded') {
-      if (this.state.channel.toUpperCase() === 'WECHAT') {
-        pageHeaderText = this.props.intl.formatMessage(messages.wechatHeader);
-      } else if (this.state.channel.toUpperCase() === 'SMS') {
-        pageHeaderText = this.props.intl.formatMessage(messages.smsHeader);
-      } else if (this.state.channel.toUpperCase() === 'EMAIL') {
-        pageHeaderText = this.props.intl.formatMessage(messages.emailHeader);
-      } else if (this.state.channel.toUpperCase() === 'MOBILEPUSH') {
-        pageHeaderText = this.props.intl.formatMessage(messages.mobilepushHeader);
-      } else if (this.state.channel.toUpperCase() === 'EBILL') {
-        pageHeaderText = this.props.intl.formatMessage(messages.ebillHeader);
-      } else if (this.state.channel.toUpperCase() === 'LINE') {
-        pageHeaderText = this.props.intl.formatMessage(messages.lineHeader);
-      }
-    }
     const filterContent = (
       <div className="action-container">
         <CapInput
@@ -1242,26 +1230,8 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
         }
       });
     }
-    let templateText = this.state.channel.toUpperCase() === 'WECHAT' ? this.props.intl.formatMessage(messages.selectWechatHeader) : this.props.intl.formatMessage(messages.selectSmsHeader);
-
-    let titleText = this.state.channel.toUpperCase() === 'SMS' ? this.props.intl.formatMessage(messages.smsChannelTemplatesHeader) : this.props.intl.formatMessage(messages.wechatChannelTemplatesHeader);
-    if (this.state.channel.toUpperCase() === "MOBILEPUSH") {
-      templateText = "Select Mobile Push Template";
-      titleText = "Mobile push";
-    } else if (this.state.channel.toUpperCase() === "EMAIL") {
-      templateText = "Select Email Template";
-      titleText = "Email";
-    } else if (this.state.channel.toUpperCase() === "EBILL") {
-      templateText = "Select Ebill Template";
-      titleText = "Ebill";
-    } else if (this.state.channel.toUpperCase() === "LINE") {
-      templateText = "Select Line Template";
-      titleText = "Line";
-    }
     const pageHeader = (
       <div>
-        {(this.props.location.query.type !== 'embedded') && `${pageHeaderText}`}
-        {this.props.isFullMode && templateText}
         {(this.isEnabledInLibraryModule("showAccountSelection") || (((this.state.channel.toUpperCase() === 'WECHAT' || this.state.channel.toUpperCase() === "MOBILEPUSH") && (this.props.location.query.type !== 'embedded') && !_.isEmpty(this.props.Templates.weCrmAccounts)))) &&
           <CapSelect className="selectAccount" onSelect={this.onAccountSelect} value={this.props.Templates.selectedWeChatAccount ? this.props.Templates.selectedWeChatAccount.name : undefined} placeholder={this.props.intl.formatMessage(messages.selectAccount)}>
             {accountOptions}
@@ -1270,7 +1240,6 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
     );
     const pageHeaderDvs = (
       <div>
-        {(this.props.location.query.type === 'embedded' && moduleName === 'dvs') ? `${templateText}` : pageHeaderText}
         {((this.state.channel.toUpperCase() === 'WECHAT' || this.state.channel.toUpperCase() === "MOBILEPUSH") && (this.props.location.query.type === 'embedded') && !_.isEmpty(this.props.Templates.weCrmAccounts)) &&
         <CapSelect className="selectAccount" onSelect={this.onAccountSelect} value={this.props.Templates.selectedWeChatAccount ? this.props.Templates.selectedWeChatAccount.name : undefined} placeholder={this.props.intl.formatMessage(messages.selectAccount)}>
           {accountOptions}
@@ -1409,30 +1378,14 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
           spinning={isLoading}
         >
           <input type="file" id="filename" style={{ display: 'none'}} accept=".zip, .html, .htm" onChange={(event) => this.handleFileUpload(event, {files: event.target.files})} />
-          <Row>
-            <Col>
-              {(this.props.isFullMode || this.props.location.query.type !== "embedded") &&
-                <Breadcrumb>
-                  <BreadcrumbItem>{this.props.intl.formatMessage(messages.campaigns)}</BreadcrumbItem>
-                  <BreadcrumbItem>{this.props.intl.formatMessage(messages.creatives)}</BreadcrumbItem>
-                  <BreadcrumbItem>{ this.state.channel }</BreadcrumbItem>
-                </Breadcrumb>
-              }
-            </Col>
-          </Row>
+
           <Row className="template-header-container">
-            <div className="template-header">{(this.props.location.query.type === 'embedded' && moduleName === 'dvs') ? pageHeaderDvs : pageHeader}</div>
+            <div className="template-header">{(this.props.location.query.type === 'embedded' ) ? pageHeaderDvs : pageHeader}</div>
           </Row>
           <Row>
-            <Helmet
-              title={titleText}
-              meta={[
-                { name: 'description', content: 'Description of Templates' },
-              ]}
-            />
             {this.props.renderNewCardGrid && templateList && templateList.length > 0 &&
               <Pagination onPageChange={this.onPaginationChange} paginationSelector="pagination-container">
-                  {this.props.renderNewCardGrid({templates: this.props.TemplatesList, filterContent, handlers: {handlePreviewClick: this.handlePreviewClick, handleEditClick: this.handleEditClick}})}
+                  {this.props.renderNewCardGrid({channel: this.state.channel, templates: this.props.TemplatesList, filterContent, handlers: {handlePreviewClick: this.handlePreviewClick, handleEditClick: this.handleEditClick}})}
               </Pagination>
             }
             {!this.props.renderNewCardGrid && ((templateList && templateList.length > 0) || isSearch) &&
@@ -1511,7 +1464,6 @@ Templates.propTypes = {
   TemplatesList: PropTypes.array,
   Templates: PropTypes.object,
   route: PropTypes.object,
-  router: PropTypes.object,
   Create: PropTypes.object,
   location: PropTypes.object,
   globalActions: PropTypes.object,

package/containers/Templates/reducer.js

@@ -77,6 +77,7 @@ function templatesReducer(state = initialState, action) {
     case types.RESET_TEMPLATE:
       return state
         .set('weCRMtemplates', fromJS([]))
+        .set('weChatDefaultTemplate', fromJS([]))
         .set('templates', fromJS([]));
     case types.SET_SELECTED_LAYOUT:
       return state

package/containers/TemplatesV2/_templatesV2.scss

@@ -0,0 +1,5 @@
+.cap-tab-v2-wrapper{
+    .ant-tabs-tabpane {
+        border: none;
+    }
+}