@capillarytech/creatives-library 3.0.35 → 3.1.0

package/v2Containers/Templates/index.js

@@ -12,10 +12,17 @@ import styled from 'styled-components';
 import {injectIntl, intlShape, FormattedMessage } from 'react-intl';
 import { createStructuredSelector } from 'reselect';
 import moment from "moment";
-import _ from 'lodash';
+import get from 'lodash/get';
+import isEmpty from 'lodash/isEmpty';
+import isEqual from 'lodash/isEqual';
+import forEach from 'lodash/forEach';
+import findIndex from 'lodash/findIndex';
+import cloneDeep from 'lodash/cloneDeep';
+import find from 'lodash/find';
+import map from 'lodash/map';
 import { bindActionCreators } from 'redux';
-import { Modal} from 'antd';
-import {CapMenu, CapDropdown, CapButton, CapInput, CapIcon, CapSelect, CapPopover, CapSpin, CapCustomCard, CapRow, CapSlideBox, CapLink, CapHeading, CapNotification, CapIllustration} from '@capillarytech/cap-ui-library';
+import { Modal, Form} from 'antd';
+import {CapMenu, CapDropdown, CapButton, CapInput, CapIcon, CapRadioCard, CapPopover, CapSpin, CapCustomCard, CapRow, CapSlideBox, CapLink, CapHeading, CapNotification, CapIllustration, CapHeader, CapLabel, CapRadio} from '@capillarytech/cap-ui-library';
 import { makeSelectTemplates, makeSelectTemplatesResponse } from './selectors';
 import { makeSelectCreate as makeSelectCreateSms} from '../Sms/Create/selectors';
 import { makeSelectCreate as makeSelectCreateMobilePush } from '../MobilePush/Create/selectors';
@@ -59,6 +66,13 @@ const InlineDiv = styled.div`
     }
   }
 `;
+const ACCOUNT_SELECTION_MODE = "accountSelectionMode";
+const TEMPLATES_MODE = "templatesMode";
+const WECHAT_FILTERS = {
+  ALL: 'all',
+  RICHMEDIA: 'richmedia',
+  MAPTEMPLATES: 'maptemplate',
+};
 export class Templates extends React.Component { // eslint-disable-line react/prefer-stateless-function
   constructor(props) {
     super(props);
@@ -83,6 +97,8 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
       defaultAccount: true,
       modeType: null,
       routeParams: null,
+      activeMode: TEMPLATES_MODE,
+      wechatFilter: WECHAT_FILTERS.ALL,
     };
 
     this.handleOnHoverItem = this.handleOnHoverItem.bind(this);
@@ -109,6 +125,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
   componentWillMount() {
     if (this.state.channel === '') {
       let channel = '';
+      let activeMode = TEMPLATES_MODE;
 
       switch (this.props.route.name.toUpperCase()) {
         case SMS:
@@ -116,10 +133,12 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
           break;
         case MOBILE_PUSH:
           channel = "MobilePush";
+          activeMode = ACCOUNT_SELECTION_MODE;
           this.props.actions.getWeCrmAccounts(channel);
           break;
         case WECHAT:
           channel = 'wechat';
+          activeMode = ACCOUNT_SELECTION_MODE;
           this.props.actions.getWeCrmAccounts();
           break;
         case EMAIL:
@@ -134,8 +153,8 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
         default:
           channel = '';
       }
-      this.setState({ channel });
-      if (_.isEmpty(this.props.Templates.userList)) {
+      this.setState({ channel, activeMode });
+      if (isEmpty(this.props.Templates.userList)) {
         this.props.actions.getUserList();
       }
     }
@@ -145,21 +164,21 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
     if (this.props.location.query.type === 'embedded' && this.isEnabledInLibraryModule("setLocale")) {
       this.setLocale();
     }
-    if (this.state.channel.toLowerCase() === 'line' || this.state.channel.toLowerCase() === 'sms' || this.state.channel.toLowerCase() === 'email' || this.state.channel.toLowerCase() === 'ebill' || ((this.state.channel.toLowerCase() === 'wechat' || this.state.channel.toLowerCase() === 'mobilepush') && !_.isEmpty(this.props.Templates.selectedWeChatAccount))) {
+    if (this.state.channel.toLowerCase() === 'line' || this.state.channel.toLowerCase() === 'sms' || this.state.channel.toLowerCase() === 'email' || this.state.channel.toLowerCase() === 'ebill' || ((this.state.channel.toLowerCase() === 'wechat' || this.state.channel.toLowerCase() === 'mobilepush') && !isEmpty(this.props.Templates.selectedWeChatAccount))) {
       const queryParams = {
         // name: this.state.searchText,
         // sortBy: this.state.sortBy,
       };
-      if (this.state.channel.toLowerCase() === 'wechat' && !_.isEmpty(this.props.Templates.selectedWeChatAccount)) {
+      if (this.state.channel.toLowerCase() === 'wechat' && get(this.props, 'Templates.selectedWeChatAccount.configs', false)) {
         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)) {
+      if (this.state.channel.toLowerCase() === "mobilepush" && !isEmpty(this.props.Templates.selectedWeChatAccount)) {
         const account = this.props.Templates.selectedWeChatAccount;
         queryParams.accountId = account.id;
-        const isAndroidSupported = _.get(account, "configs.android") === '1';
-        const isIosSupported = _.get(account, "configs.ios") === '1';
+        const isAndroidSupported = get(account, "configs.android") === '1';
+        const isIosSupported = get(account, "configs.ios") === '1';
         if (!(isAndroidSupported || isIosSupported)) {
           this.props.actions.resetAccount();
           return;
@@ -182,10 +201,10 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
       name: this.state.searchText,
       sortBy: this.state.sortBy,
     };
-    if (!_.isEmpty(this.props.TemplatesList) && !this.props.Templates.getAllTemplatesInProgress && this.props.TemplatesList[0] && this.props.TemplatesList[0].totalCount && this.state.templatesCount === 0) {
+    if (!isEmpty(this.props.TemplatesList) && !this.props.Templates.getAllTemplatesInProgress && this.props.TemplatesList[0] && this.props.TemplatesList[0].totalCount && this.state.templatesCount === 0) {
       this.setState({templatesCount: this.props.TemplatesList[0].totalCount});
     }
-    if (!_.isEqual(nextProps.route.name, this.props.route.name)) {
+    if (!isEqual(nextProps.route.name, this.props.route.name)) {
       let channel = '';
       this.props.actions.resetTemplate();
       this.props.actions.resetAccount();
@@ -208,13 +227,13 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
         channel = 'Line';
       }
       this.setState({ channel }, () => {
-        if (this.state.channel.toLowerCase() === 'line' || this.state.channel.toLowerCase() === 'sms' || this.state.channel.toLowerCase() === 'email' || this.state.channel.toLowerCase() === 'ebill' || (this.state.channel.toLowerCase() === 'wechat' && !_.isEmpty(nextProps.Templates.selectedWeChatAccount))) {
-          if (this.state.channel.toLowerCase() === 'wechat' && !_.isEmpty(nextProps.Templates.selectedWeChatAccount)) {
+        if (this.state.channel.toLowerCase() === 'line' || this.state.channel.toLowerCase() === 'sms' || this.state.channel.toLowerCase() === 'email' || this.state.channel.toLowerCase() === 'ebill' || (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;
             params.originalId = nextProps.Templates.selectedWeChatAccount.sourceAccountIdentifier;
           }
-          if (this.state.channel.toLowerCase() === "mobilepush" && !_.isEmpty(nextProps.Templates.selectedWeChatAccount)) {
+          if (this.state.channel.toLowerCase() === "mobilepush" && !isEmpty(nextProps.Templates.selectedWeChatAccount)) {
             params.accountId = nextProps.Templates.selectedWeChatAccount.id;
           }
           this.getAllTemplates({params}, true);
@@ -229,13 +248,13 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
     if (this.state.channel.toLowerCase() === "mobilepush" && nextProps.Templates.selectedWeChatAccount) {
       params.accountId = nextProps.Templates.selectedWeChatAccount.id;
     }
-    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 ((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)) {
+      if (isEmpty(nextProps.Templates.weCrmAccounts)) {
         return;
       }
       if (this.state.channel.toLowerCase() === 'wechat') {
-        _.forEach(nextProps.Templates.weCrmAccounts, (account) => {
+        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) {
               selectedAccount = account;
@@ -250,7 +269,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
           this.getAllTemplates({params});
         });
       } else if (this.state.channel.toLowerCase() === 'mobilepush' && (nextProps.location.query.account_id || nextProps.location.query.source_account_id)) {
-        _.forEach(nextProps.Templates.weCrmAccounts, (account) => {
+        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;
           }
@@ -285,7 +304,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
       this.props.lineActions.clearCreateResponse();
     }
 
-    if (nextProps.Create && this.props.Create && nextProps.Create.createTemplateError && !_.isEqual(nextProps.Create.createTemplateError, this.props.Create.createTemplateError)) {
+    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);
       CapNotification.error({key: 'somethingWrong', message});
       if (this.state.channel.toLowerCase() === "sms") {
@@ -302,14 +321,14 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
     if (nextProps.Edit && nextProps.Edit.editResponse && nextProps.Edit.editResponse.templateId && nextProps.Edit.editResponse.templateId !== '') {
       this.props.smsEditActions.clearEditResponse();
     }
-    if (!nextProps.Templates.deleteTemplateInProgress && !_.isEqual(nextProps.Templates.deleteTemplateInProgress, this.props.Templates.deleteTemplateInProgress) &&
+    if (!nextProps.Templates.deleteTemplateInProgress && !isEqual(nextProps.Templates.deleteTemplateInProgress, this.props.Templates.deleteTemplateInProgress) &&
     nextProps.Templates.deleteResponse) {
       const message = `${this.state.channel.toUpperCase()} ${this.props.intl.formatMessage(messages['Template deleted successfully'])}`;
       CapNotification.success({key: 'deleteSucess', message});
       this.getAllTemplates({params, resetPage: true});
     }
 
-    if (!nextProps.Templates.sendingFile && !_.isEqual(this.props.Templates.sendingFile, nextProps.Templates.sendingFile) && !nextProps.Templates.errorSendingFile) {
+    if (!nextProps.Templates.sendingFile && !isEqual(this.props.Templates.sendingFile, nextProps.Templates.sendingFile) && !nextProps.Templates.errorSendingFile) {
       const module = this.props.location.query.module ? this.props.location.query.module : 'default';
       const isLanguageSupport = (this.props.location.query.isLanguageSupport) ? this.props.location.query.isLanguageSupport : true;
       const isEdmSupport = (this.props.location.query.isEdmSupport !== "false") || false;
@@ -324,7 +343,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
       }});
     }
 
-    if (!nextProps.Templates.sendingFile && !_.isEqual(this.props.Templates.sendingFile, nextProps.Templates.sendingFile) && nextProps.Templates.errorSendingFile) {
+    if (!nextProps.Templates.sendingFile && !isEqual(this.props.Templates.sendingFile, nextProps.Templates.sendingFile) && nextProps.Templates.errorSendingFile) {
       let errorMessage = this.props.intl.formatMessage(messages.zipUploadFailed);
       if (nextProps.Templates.errorMessage && nextProps.Templates.errorMessage !== "") {
         errorMessage = nextProps.Templates.errorMessage;
@@ -332,7 +351,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
       CapNotification.error({key: 'uploadError', message: errorMessage});
     }
 
-    if (!_.isEmpty(nextProps.Templates.templateDetails) && !_.isEqual(nextProps.Templates.templateDetails, this.props.Templates.templateDetails)) {
+    if (!isEmpty(nextProps.Templates.templateDetails) && !isEqual(nextProps.Templates.templateDetails, this.props.Templates.templateDetails)) {
       this.setState({previewTemplate: nextProps.Templates.templateDetails});
     }
 
@@ -350,7 +369,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
         nextProps.actions.setWeChatAccount(nextProps.Templates.weCrmAccounts[0]);
         paramsDefault.accountId = nextProps.Templates.weCrmAccounts[0].id;
       }
-      this.setState({defaultAccount: false});
+      this.setState({defaultAccount: false, activeMode: TEMPLATES_MODE, selectedAccount: nextProps.Templates.weCrmAccounts[0].name });
       this.getAllTemplates({params: paramsDefault}, true);
     }
   }
@@ -359,26 +378,29 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
     window.removeEventListener("message", this.handleFrameTasks);
     this.props.actions.resetTemplateStoreData();
     this.props.globalActions.clearMetaEntities();
+    // this.props.actions.resetAccount();
     // this.setState({defaultAccount: false});
   }
 
-  onAccountSelect(value) {
+  onAccountSelect(e) {
+    const value = e.target.value;
+    console.log("onAccountSelect", e, value);
     this.setState({selectedAccount: value}, () => {
       const params = {
         name: this.state.searchText,
         sortBy: this.state.sortBy,
       };
       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;
+        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})]);
-        const account = this.props.Templates.weCrmAccounts[_.findIndex(this.props.Templates.weCrmAccounts, { name: value})];
+        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;
-        const isAndroidSupported = _.get(account, "configs.android") === '1';
-        const isIosSupported = _.get(account, "configs.ios") === '1';
+        const isAndroidSupported = get(account, "configs.android") === '1';
+        const isIosSupported = get(account, "configs.ios") === '1';
         if (!(isAndroidSupported || isIosSupported)) {
           this.setState({selectedAccountError: true});
           this.props.actions.resetTemplate();
@@ -387,7 +409,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
           this.setState({selectedAccountError: false});
         }
       }
-
+      this.setState({activeMode: TEMPLATES_MODE});
       console.log("getAllTemplates params: ", params);
       this.getAllTemplates({params, resetPage: true});
     });
@@ -411,12 +433,20 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
   getCreativesParams = () => {
     const routeParams = this.state.routeParams;
     let creativesParams = {mode: ''};
-    if (!_.isEmpty(routeParams)) {
-      if (routeParams.pathname.indexOf('create') > -1) {
+    if (!isEmpty(routeParams)) {
+      const { pathname } = routeParams;
+      if (pathname.includes('create')) {
         creativesParams.mode = 'create';
-      } else if (routeParams.pathname.indexOf('edit') > -1) {
+      } else if (pathname.includes('edit')) {
         creativesParams.mode = 'edit';
-        creativesParams._id = routeParams.pathname.split('/')[3];
+        if (pathname.includes('richmedia')) {
+          creativesParams._id = pathname.split('/')[4];
+          creativesParams.definition = {
+            msgcontent: "RICH_MEDIA_WECHAT",
+          };
+        } else {
+          creativesParams._id = pathname.split('/')[3];
+        }
         creativesParams.type = this.state.channel.toUpperCase();
       }
     }
@@ -452,6 +482,11 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
       queryParams.sortBy = this.state.sortBy;
       queryParams.page = this.state.page;
       queryParams.perPage = this.state.perPageLimit;
+      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;
+      }
       const channel = this.state.channel;
       this.props.actions.getAllTemplates(channel, queryParams);
     } else if ((resetPage || (page === 1 && this.state.templatesCount === 0) || page <= (this.state.templatesCount / this.state.perPageLimit))) {
@@ -463,17 +498,17 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
         page = 1;
         templatesCount = 0;
       }
-      if (!params || _.isEmpty(params)) {
+      if (!params || isEmpty(params)) {
         queryParams = {
           name: this.state.searchText,
           sortBy: this.state.sortBy,
         };
-        if (this.state.channel.toLowerCase() === 'wechat' && !_.isEmpty(this.props.Templates.selectedWeChatAccount)) {
+        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)) {
+        if (this.state.channel.toLowerCase() === "mobilepush" && !isEmpty(this.props.Templates.selectedWeChatAccount)) {
           queryParams.accountId = this.props.Templates.selectedWeChatAccount.id;
           if (this.state.mode) {
             queryParams.mode = this.state.mode.toLowerCase();
@@ -488,9 +523,28 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
       });
     }
   };
+  filterWechatTemplates = (templates) => {
+    const { wechatFilter } = this.state;
+    switch(wechatFilter) {
+      case WECHAT_FILTERS.RICHMEDIA:
+        return templates.filter(function (template) {
+          return template.definition && template.definition.msgcontent.toUpperCase() === "RICH_MEDIA_WECHAT";
+        });
+      case WECHAT_FILTERS.MAPTEMPLATES:
+        return templates.filter(function (template) {
+          return !template.definition;
+        });
+      default:
+        return templates;
+    };
+  }
   getTemplateDataForGrid = ({templates, handlers, filterContent, channel, isLoading, loadingTip}) => {
     const currentChannel = channel.toUpperCase();
-    const cardDataList = templates && templates.length ? _.map(templates, (template) => {
+    let filteredTemplates = templates;
+    if (currentChannel === WECHAT) {
+      filteredTemplates = this.filterWechatTemplates(templates);
+    }
+    const cardDataList = filteredTemplates && filteredTemplates.length ? map(filteredTemplates, (template) => {
       const templateData =
         {
           key: `${currentChannel}-card-${template.name}`,
@@ -502,19 +556,19 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
               onClick={() => { if (this.props.isFullMode) { handlers.handlePreviewClick(template); } else { this.props.handlePeviewTemplate(template); } }}
               />,
           ],
-          hoverOption: <CapButton onClick={(e) => handlers.handleEditClick(e, template._id)}>{this.props.intl.formatMessage(this.props.isFullMode ? messages.creativesTemplatesEdit : messages.selectButton)}</CapButton>,
+          hoverOption: <CapButton onClick={(e) => handlers.handleEditClick(e, template)}>{this.props.intl.formatMessage(this.props.isFullMode ? messages.creativesTemplatesEdit : messages.selectButton)}</CapButton>,
         };
       if (this.props.isFullMode) {
         templateData.extra.push(<CapDropdown
           overlay={
             <CapMenu>
-              <CapMenu.Item onClick={() => this.duplicateTemplate(template)}>
+              {this.state.channel.toUpperCase() !== WECHAT && <CapMenu.Item onClick={() => this.duplicateTemplate(template)}>
                 <FormattedMessage {...messages.duplicateButton} />
-              </CapMenu.Item>
+              </CapMenu.Item>}
               <CapMenu.Item
                 onClick={() => this.deleteTemplate(template)}
               >
-                <FormattedMessage {...messages.deleteButton} />
+                {this.state.channel.toUpperCase() === WECHAT && !template.definition ? <FormattedMessage {...messages.unMapButton} /> : <FormattedMessage {...messages.deleteButton} />}
               </CapMenu.Item>
             </CapMenu>
       }
@@ -522,40 +576,51 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
           <CapIcon type="more" />
         </CapDropdown>);
       }
-      if (currentChannel === "SMS") {
-        templateData.content = template.versions.base['sms-editor'];
-      } else if (currentChannel === "EMAIL") {
-        const url = template.versions.base.preview_http_url;
-        if (url) {
-          templateData.url = url;
-        } else {
-          templateData.content = template.versions.base.subject;
+      switch (currentChannel) {
+        case SMS:
+          templateData.content = template.versions.base['sms-editor'];
+          break;
+        case EMAIL: {
+          const url = template.versions.base.preview_http_url;
+          if (url) {
+            templateData.url = url;
+          } else {
+            templateData.content = template.versions.base.subject;
+          }
+          break;
         }
-      } else if (currentChannel === "MOBILEPUSH" && template.type === "MOBILEPUSH") {
-        templateData.content = template;
+        case MOBILE_PUSH:
+          templateData.content = template;
+          break;
+        case WECHAT:
+          templateData.content = this.prepareWeChatPreviewData(template);
+          break;
+        default:
+          templateData.content = "";
       }
       return templateData;
     }) : [];
-    const accountId = _.get(this.props, 'Templates.selectedWeChatAccount.uuid');
-    const accounts = _.get(this.props, 'Templates.weCrmAccounts');
+    const accountId = get(this.props, 'Templates.selectedWeChatAccount.uuid');
+    const accounts = get(this.props, 'Templates.weCrmAccounts');
     return (<div>
+      { [WECHAT, MOBILE_PUSH].includes(currentChannel) && this.showAccountName() }
       {filterContent}
       <CapSpin spinning={isLoading} tip={loadingTip} style={{width: '100%'}}>
         {!isLoading && <div>
-          {!_.isEmpty(templates) || !_.isEmpty(this.state.searchText) || !_.isEmpty(this.props.Templates.templateError) ? (
-            <div className={!_.isEmpty(this.state.searchText) && _.isEmpty(cardDataList) ? '' : "pagination-container"}>
-              <CapCustomCardList key={`${currentChannel}-card-list`} cardList={cardDataList} type={currentChannel} />
+          {!isEmpty(filteredTemplates) || !isEmpty(this.state.searchText) || !isEmpty(this.props.Templates.templateError) ? (
+            <div className={!isEmpty(this.state.searchText) && isEmpty(cardDataList) ? '' : "pagination-container"}>
+              <CapCustomCardList key={`${currentChannel}-card-list`} cardList={cardDataList} type={currentChannel} style={{marginLeft: '16px'}}/>
             </div>)
             : ['sms', "email"].includes(this.state.channel.toLowerCase()) && <CapIllustration {...this.getChannelTypeIllustrationInfo(currentChannel)} />
           }
 
-          {(this.state.selectedAccount === '' && _.isEmpty(this.props.Templates.selectedWeChatAccount)) && (this.state.channel.toLowerCase() === 'wechat' || this.state.channel.toLowerCase() === "mobilepush") &&
+          {(this.state.selectedAccount === '' && isEmpty(this.props.Templates.selectedWeChatAccount)) && (this.state.channel.toLowerCase() === 'wechat' || this.state.channel.toLowerCase() === "mobilepush") &&
           <div style={{ height: '65vh', textAlign: 'center', lineHeight: '65vh'}}>
             <CapHeading type="h6">{accounts ? this.props.intl.formatMessage(messages.noAccountMessage) : this.props.intl.formatMessage(messages.noAccountsPresent)}</CapHeading>
           </div>
           }
 
-          { !_.isEmpty(this.props.Templates.selectedWeChatAccount) && this.state.channel.toLowerCase() === "mobilepush" && this.state.selectedAccountError ?
+          { !isEmpty(this.props.Templates.selectedWeChatAccount) && this.state.channel.toLowerCase() === "mobilepush" && this.state.selectedAccountError ?
             <div style={{ height: '65vh', textAlign: 'center', lineHeight: '65vh'}}>
               <CapHeading type="h6" >
                 {this.props.intl.formatMessage(messages.accountConfigError)}
@@ -565,8 +630,8 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
               </CapHeading>
             </div> : (
               ["mobilepush"].includes(this.state.channel.toLowerCase()) &&
-              _.isEmpty(templates) &&
-              _.isEmpty(this.state.searchText) &&
+              isEmpty(filteredTemplates) &&
+              isEmpty(this.state.searchText) &&
               <div style={this.isFullMode() ? { height: "calc(100vh - 325px)", overflow: 'auto'} : {}}>
                 <CapIllustration {...this.getChannelTypeIllustrationInfo(currentChannel)} />
               </div>
@@ -689,8 +754,9 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
   };
 
   prepareWeChatPreviewData(template) {
-    if (template && template.versions && template.versions.base && !_.isEmpty(template.versions.base)) {
+    if (template && template.versions && template.versions.base && !isEmpty(template.versions.base)) {
       if (template.definition && template.definition.msgcontent && template.definition.msgcontent === "RICH_MEDIA_WECHAT") {
+        console.log("prepareWeChatPreviewData", template, JSON.stringify(template), template.versions.base.mediaList, JSON.stringify(template.versions.base.mediaList));
         return template.versions.base.mediaList;
       }
       return this.prepareWeChatMappedPreviewData(template.versions.base.content, template.versions.base.Tag, template.versions.base.data);
@@ -699,8 +765,8 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
   }
 
   prepareWeChatMappedPreviewData(content, templateTags, tagData) {
-    let formattedContent = _.cloneDeep(content);
-    _.forEach(templateTags, (tag) => {
+    let formattedContent = cloneDeep(content);
+    forEach(templateTags, (tag) => {
       if (tagData[tag].value !== undefined) {
         formattedContent = formattedContent.replace(`{{${tag}.DATA}}`, tagData[tag].value);
       }
@@ -737,7 +803,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
               </div>}
               {(data.expandableDetails && data.expandableDetails.ctas && ((data.expandableDetails.ctas[0] && data.expandableDetails.ctas[0].actionText) || (data.expandableDetails.ctas[1] && data.expandableDetails.ctas[1].actionText))) ?
                 <div className="actions">
-                  {_.map(data.expandableDetails.ctas, (action) => !!action.actionText &&
+                  {map(data.expandableDetails.ctas, (action) => !!action.actionText &&
                   <span className="action">{action.actionText && action.actionText.toUpperCase()}</span>)}
                 </div>
               :
@@ -889,7 +955,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
           });
         } else if (ev && ev.key && ev.key.toLowerCase() === "richmedia_template") {
           type = this.props.location.query.type;
-          if (this.props.Templates && this.props.Templates.selectedWeChatAccount && this.props.Templates.selectedWeChatAccount.configs && (_.isEmpty(this.props.Templates.selectedWeChatAccount.configs.wechat_app_id) || _.isEmpty(this.props.Templates.selectedWeChatAccount.configs.wechat_app_secret))) {
+          if (this.props.Templates && this.props.Templates.selectedWeChatAccount && this.props.Templates.selectedWeChatAccount.configs && (isEmpty(this.props.Templates.selectedWeChatAccount.configs.wechat_app_id) || isEmpty(this.props.Templates.selectedWeChatAccount.configs.wechat_app_secret))) {
             const errorMessage = this.props.intl.formatMessage(messages.wechatAccountNotConfigured);
             CapNotification.error({key: 'wechatError', message: errorMessage});
           } else {
@@ -980,7 +1046,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
   }
 
   duplicateTemplate(template) {
-    const duplicateObj = _.cloneDeep(template);
+    const duplicateObj = cloneDeep(template);
     duplicateObj.name = `Copy of ${template.name} ${moment().format('MM-DD-YYYY hh:mma')}`;
     delete duplicateObj._id;
     const params = {
@@ -1028,7 +1094,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
 
   handleEdmDefaultTemplateSelection = (isSelected, id) => {
     if (isSelected) {
-      const data = _.find(this.props.Templates.cmsTemplates, {_id: id});
+      const data = find(this.props.Templates.cmsTemplates, {_id: id});
       const type = this.props.location.query.type;
       const module = this.props.location.query.module ? this.props.location.query.module : 'default';
       const isLanguageSupport = (this.props.location.query.isLanguageSupport) ? this.props.location.query.isLanguageSupport : true;
@@ -1052,10 +1118,11 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
     }
   };
 
-  handleEditClick(e, id, modeType, path) {
+  handleEditClick(e, template, modeType, path) {
     if (modeType && modeType !== undefined) {
       this.setState({modeType});
     }
+    const { _id: id } = template;
     const type = this.props.location.query.type;
     const module = this.props.location.query.module;
     const isLanguageSupport = (this.props.location.query.isLanguageSupport) ? this.props.location.query.isLanguageSupport : false;
@@ -1085,6 +1152,13 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
     if (this.state.channel.toLowerCase() === 'line') {
       pathName = `/line/edit/${modeType}/${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}`;
+      }
+    }
     if (this.isEnabledInLibraryModule("callSelectFromProps")) {
       this.props.onSelectTemplate(id);
     } else {
@@ -1100,7 +1174,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
 
   handlePreviewClick(template, modeType) {
     this.togglePreview();
-    const templateInfo = _.cloneDeep(template);
+    const templateInfo = cloneDeep(template);
     if (this.state.channel.toLowerCase() === 'line') {
       templateInfo.modeType = modeType;
     }
@@ -1194,7 +1268,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
       temp.id = template._id;
       if (this.state.channel === 'wechat') {
         let path = '';
-        if (template && template.versions && template.versions.base && !_.isEmpty(template.versions.base)) {
+        if (template && template.versions && template.versions.base && !isEmpty(template.versions.base)) {
           if (template.definition && template.definition.msgcontent && template.definition.msgcontent === "RICH_MEDIA_WECHAT") {
             path = `/wechat/richmedia/edit/${template._id}`;
             content = <WechatRichmediaTemplatePreview type={this.props.location && this.props.location.query.type ? this.props.location.query.type : ''} content={template.versions.base.mediaList}/>;
@@ -1208,7 +1282,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
               <div className={`sms-text ${this.state.hoveredItem === template._id ? 'sms-text-blurred' : ''}`}>
                 {content || ''}
               </div>
-              {template._id === this.state.hoveredItem ? <CapButton onClick={(e) => this.handleEditClick(e, template._id, null, path)} className="edit-button" type="secondary">{type === 'embedded' ? this.props.intl.formatMessage(messages.selectButton) : this.props.intl.formatMessage(messages.editButton)}</CapButton> : ''}
+              {template._id === this.state.hoveredItem ? <CapButton onClick={(e) => this.handleEditClick(e, template, null, path)} className="edit-button" type="secondary">{type === 'embedded' ? this.props.intl.formatMessage(messages.selectButton) : this.props.intl.formatMessage(messages.editButton)}</CapButton> : ''}
               {template._id === this.state.hoveredItem ? <CapButton onClick={() => this.handlePreviewClick(template)} className="preview-button" type="cancel">{this.props.intl.formatMessage(messages.previewButton)}</CapButton> : ''}
             </div>
           );
@@ -1226,7 +1300,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
             <div className={`sms-text ${this.state.hoveredItem === template._id ? 'sms-text-blurred' : ''}`}>
               {content}
             </div>
-            {!layoutSelection && template._id === this.state.hoveredItem ? <CapButton onClick={(e) => this.handleEditClick(e, template._id)} className="edit-button" type="secondary">{type === 'embedded' ? this.props.intl.formatMessage(messages.selectButton) : this.props.intl.formatMessage(messages.editButton)}</CapButton> : ''}
+            {!layoutSelection && template._id === this.state.hoveredItem ? <CapButton onClick={(e) => this.handleEditClick(e, template)} className="edit-button" type="secondary">{type === 'embedded' ? this.props.intl.formatMessage(messages.selectButton) : this.props.intl.formatMessage(messages.editButton)}</CapButton> : ''}
             {layoutSelection && template._id === this.state.hoveredItem ? <CapButton onClick={() => this.handleEdmDefaultTemplateSelection(true, template._id)} className="select-button" type="secondary">{type === 'embedded' ? this.props.intl.formatMessage(messages.selectDefaultButton) : this.props.intl.formatMessage(messages.selectDefaultButton)}</CapButton> : ''}
             {!layoutSelection && template._id === this.state.hoveredItem ? <CapButton onClick={() => this.handlePreviewClick(template)} className="preview-button" type="cancel">{this.props.intl.formatMessage(messages.previewButton)}</CapButton> : ''}
           </div>);
@@ -1237,7 +1311,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
             <div className={`mobilepush-message ${this.state.hoveredItem === template._id ? 'sms-text-blurred' : ''}`}>
               {content || ''}
             </div>
-            {template._id === this.state.hoveredItem ? <CapButton onClick={(e) => this.handleEditClick(e, template._id)} className="edit-button" type="secondary">{type === 'embedded' ? this.props.intl.formatMessage(messages.selectButton) : this.props.intl.formatMessage(messages.editButton)}</CapButton> : ''}
+            {template._id === this.state.hoveredItem ? <CapButton onClick={(e) => this.handleEditClick(e, template)} className="edit-button" type="secondary">{type === 'embedded' ? this.props.intl.formatMessage(messages.selectButton) : this.props.intl.formatMessage(messages.editButton)}</CapButton> : ''}
             {template._id === this.state.hoveredItem ? <CapButton onClick={() => this.handlePreviewClick(template)} className="preview-button" type="cancel">{this.props.intl.formatMessage(messages.previewButton)}</CapButton> : ''}
           </div>);
       } else if (this.state.channel.toLowerCase() === 'line') {
@@ -1252,7 +1326,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
             {content.bodyText ? <div className={`sms-text ${this.state.hoveredItem === template._id ? 'sms-text-blurred' : ''}`}>{content.bodyText || ''}</div> : ''}
             {content.bodyImage ? <div className={`sms-text ${this.state.hoveredItem === template._id ? 'sms-text-blurred' : ''}`}>
               <img src={content.bodyImage} role={"presentation"} style={{maxWidth: '100%', objectFit: 'cover', height: '100%'}}/></div> : ''}
-            {template._id === this.state.hoveredItem ? <CapButton onClick={(e) => this.handleEditClick(e, template._id, modeType)} className="edit-button" type="secondary">{type === 'embedded' ? this.props.intl.formatMessage(messages.selectButton) : this.props.intl.formatMessage(messages.editButton)}</CapButton> : ''}
+            {template._id === this.state.hoveredItem ? <CapButton onClick={(e) => this.handleEditClick(e, template, modeType)} className="edit-button" type="secondary">{type === 'embedded' ? this.props.intl.formatMessage(messages.selectButton) : this.props.intl.formatMessage(messages.editButton)}</CapButton> : ''}
             {template._id === this.state.hoveredItem ? <CapButton onClick={() => this.handlePreviewClick(template, modeType)} className="preview-button" type="cancel">{this.props.intl.formatMessage(messages.previewButton)}</CapButton> : ''}
           </div>
         );
@@ -1267,7 +1341,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
           <div
             className="sms-template-content">
             <div className={`sms-text ${this.state.hoveredItem === template._id ? 'sms-text-blurred' : ''}`}>{content || ''}</div>
-            {template._id === this.state.hoveredItem ? <CapButton onClick={(e) => this.handleEditClick(e, template._id)} className="edit-button" type="secondary">{type === 'embedded' ? this.props.intl.formatMessage(messages.selectButton) : this.props.intl.formatMessage(messages.editButton)}</CapButton> : ''}
+            {template._id === this.state.hoveredItem ? <CapButton onClick={(e) => this.handleEditClick(e, template)} className="edit-button" type="secondary">{type === 'embedded' ? this.props.intl.formatMessage(messages.selectButton) : this.props.intl.formatMessage(messages.editButton)}</CapButton> : ''}
             {template._id === this.state.hoveredItem ? <CapButton onClick={() => this.handlePreviewClick(template)} className="preview-button" type="cancel">{this.props.intl.formatMessage(messages.previewButton)}</CapButton> : ''}
           </div>
         );
@@ -1356,7 +1430,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
     let isDisabled = this.isLoading();
     const channel = this.state.channel.toUpperCase();
     if (channel === MOBILE_PUSH || channel === WECHAT) {
-      isDisabled = isDisabled || _.isEmpty(this.props.Templates.selectedWeChatAccount);
+      isDisabled = isDisabled || isEmpty(this.props.Templates.selectedWeChatAccount);
     }
     if (channel === MOBILE_PUSH) {
       isDisabled = this.checkSearchDisabled();
@@ -1447,160 +1521,100 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
     return modal;
   };
 
-  render() {
+  renderAccountSelection = () => {
     const accountOptions = [];
-    const isFullMode = this.isFullMode();
-    if ((this.state.channel.toUpperCase() === 'WECHAT' || this.state.channel.toUpperCase() === "MOBILEPUSH") && !_.isEmpty(this.props.Templates.weCrmAccounts)) {
-      _.forEach(this.props.Templates.weCrmAccounts, (account) => {
-        if ((this.state.channel.toUpperCase() === 'WECHAT' && account.configs && account.configs.is_wecrm_enabled) || this.state.channel.toUpperCase() === 'MOBILEPUSH') {
-          if (this.props.location.query.type === 'embedded' && (!this.props.location.query.module || (this.props.location.query.module && this.props.location.query.module !== 'library'))) {
-            if (this.props.location.query.source_account_id && account.sourceAccountIdentifier === this.props.location.query.source_account_id) {
+    let { channel = '' } = this.state;
+    channel = channel.toUpperCase();
+    const { Templates: templates = {}, location = {} } = this.props;
+    const { query = {} } = location;
+    const { weCrmAccounts = [], fetchingWeCrmAccounts = false } = templates;
+    const isWechatChannel = channel === WECHAT;
+    const isMobilePushChannel = channel === MOBILE_PUSH;
+
+    if ((isWechatChannel || isMobilePushChannel) && !isEmpty(weCrmAccounts)) {
+      forEach(weCrmAccounts, (account) => {
+        if ((isWechatChannel && account.configs && account.configs.is_wecrm_enabled) || isMobilePushChannel) {
+          if (query.type === 'embedded' && (!query.module || (query.module && query.module !== 'library'))) {
+            if (query.source_account_id && account.sourceAccountIdentifier === query.source_account_id) {
               accountOptions.push(
-                { key: this.state.channel.toUpperCase() === "MOBILEPUSH" ? account.id : account.uuid,
-                  label: account.name,
+                { key: isMobilePushChannel ? account.id : account.uuid,
+                  title: account.name,
                   value: account.name,
+                  icon: <CapIcon.CapIconAvatar text={account.name[0]} width="2rem" height="2rem"/>,
                 }
               );
-            } else if (this.props.location.query.module && (this.state.channel.toUpperCase() === "WECHAT" || this.state.channel.toUpperCase() === "MOBILEPUSH")) {
+            } else if (query.module && (isWechatChannel || isMobilePushChannel)) {
               accountOptions.push(
                 {
-                  key: this.state.channel.toUpperCase() === "MOBILEPUSH" ? account.id : account.uuid,
+                  key: isMobilePushChannel ? account.id : account.uuid,
                   value: account.name,
-                  label: account.name,
+                  title: account.name,
+                  icon: <CapIcon.CapIconAvatar text={account.name[0]} width="2rem" height="2rem"/>,
                 }
               );
             }
           } else {
             accountOptions.push(
               {
-                key: this.state.channel.toUpperCase() === "MOBILEPUSH" ? account.id : account.uuid,
+                key: isMobilePushChannel ? account.id : account.uuid,
                 value: account.name,
-                label: account.name,
+                title: account.name,
+                icon: <CapIcon.CapIconAvatar text={account.name[0]} width="2rem" height="2rem"/>,
               }
             );
           }
         }
       });
     }
-    const pageHeader = (
-      <div>
-        {(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)}
-            options={accountOptions}
-            style={{width: '200px'}}
+    return (<CapSpin spinning={fetchingWeCrmAccounts}>
+      {isEmpty(weCrmAccounts) && !fetchingWeCrmAccounts ? <FormattedMessage {...messages.noAccountsPresentWeChat} /> :
+      <div style={{overflowX: "auto"}}>
+        <CapHeader
+          title={isMobilePushChannel ? this.props.intl.formatMessage(messages.mobilepushAccount) : this.props.intl.formatMessage(messages.wechatAccount)}
+          description={this.props.intl.formatMessage(messages.chooseAccount)}
+          size="regular"
+          className="select-account-header"
           />
-           }
+        <CapRadioCard
+          className="select-account"
+          onChange={this.onAccountSelect}
+          value={this.props.Templates.selectedWeChatAccount ? this.props.Templates.selectedWeChatAccount.name : undefined}
+          panes={accountOptions}
+          cardHeight="48px"
+          cardWidth="276px"
+          size="small"
+                      />
       </div>
-    );
-    const pageHeaderDvs = (
-      <div>
-        {((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)}
-          options={accountOptions}
-          style={{width: '200px'}}
-
-        />
-          }
-      </div>
-    );
-    // let actionButton = '';
-    // if (this.props.location.query.type !== 'embedded') {
-    //   if (this.state.channel.toUpperCase() === 'WECHAT') {
-    //     const createPushMenu = (
-    //       <Menu onClick={this.menuOnClickEvent}>
-    //         <MenuItem key="map_template">
-    //           {this.props.intl.formatMessage(messages.mapTemplate)}
-    //         </MenuItem>
-    //         <MenuItem key="richmedia_template">
-    //           {this.props.intl.formatMessage(messages.weChatRichmediaTemplate)}
-    //         </MenuItem>
-    //       </Menu>
-    //     );
-    //     actionButton = (<Dropdown disabled={_.isEmpty(this.props.Templates.selectedWeChatAccount)} overlay={createPushMenu} trigger={['click']}>
-    //       <CapButton style={{paddingLeft: '24px', paddingRight: '4px'}}>
-    //         <div style={{display: 'inline-flex'}}>
-    //           <p style={{ lineHeight: '28px'}}>{this.props.intl.formatMessage(messages.newTemplate)}</p>
-    //           <p style={{ height: '28px'}}>
-    //             <i style={{ color: '#fff', paddingTop: '2px', margin: '0', paddingRight: '8px'}} className="material-icons">arrow_drop_down</i>
-    //           </p>
-    //         </div>
-    //       </CapButton>
-    //     </Dropdown>);
-    //   } else if (this.state.channel.toUpperCase() === 'EMAIL' || this.state.channel.toUpperCase() === 'EBILL') {
-    //     const menuItems = [];
-    //     menuItems.push(<MenuItem key={'uploadFile'}>{this.props.intl.formatMessage(messages.uploadFile)}</MenuItem>);
-    //     menuItems.push(<MenuItem key={'useEditor'}>{this.props.intl.formatMessage(messages.useEditor)}</MenuItem>);
-    //     const menu = (
-    //       <Menu onClick={this.handleMenuAction}>
-    //         {menuItems}
-    //       </Menu>
-    //     );
-    //     actionButton = (
-    //       <Dropdown overlay={menu} trigger={["click"]}>
-    //         <CapButton style={{paddingLeft: '24px', paddingRight: '4px'}}>
-    //           <div style={{display: 'inline-flex'}}>
-    //             <p style={{ lineHeight: '32px', paddingRight: '12px' }}>{this.props.intl.formatMessage(messages.newTemplate)}</p>
-    //             <p style={{ height: '32px' }}>
-    //               <i style={{ color: '#fff', lineHeight: '32px', margin: '0'}} className="material-icons">arrow_drop_down</i>
-    //             </p>
-    //           </div>
-    //         </CapButton>
-    //       </Dropdown>
-    //     );
-    //   } else if (this.props.route.name.toLowerCase() === "mobilepush") {
-    //     const createPushMenu = (
-    //       <Menu onClick={this.createTemplate}>
-    //         <MenuItem key="text">
-    //           {this.props.intl.formatMessage(messages.textTemplate)}
-    //         </MenuItem>
-    //         <MenuItem key="image">
-    //           {this.props.intl.formatMessage(messages.imageTemplate)}
-    //         </MenuItem>
-    //       </Menu>
-    //     );
-    //     actionButton = (<Dropdown disabled={_.isEmpty(this.props.Templates.selectedWeChatAccount)} overlay={createPushMenu} trigger={['click']}>
-    //       <CapButton style={{paddingLeft: '24px', paddingRight: '4px'}}>
-    //         <div style={{display: 'inline-flex'}}>
-    //           <p style={{ lineHeight: '28px'}}>New Template</p>
-    //           <p style={{ height: '28px'}}>
-    //             <i style={{ color: '#fff', paddingTop: '2px', margin: '0', paddingRight: '8px'}} className="material-icons">arrow_drop_down</i>
-    //           </p>
-    //         </div>
-    //       </CapButton>
-    //     </Dropdown>);
-    //   } else if (this.props.route.name.toLowerCase() === "line") {
-    //     const lineMenu = (
-    //       <Menu onClick={this.createTemplate}>
-    //         <MenuItem key="text">
-    //           {this.props.intl.formatMessage(messages.textTemplate)}
-    //         </MenuItem>
-    //         <MenuItem key="image">
-    //           {this.props.intl.formatMessage(messages.imageTemplate)}
-    //         </MenuItem>
-    //       </Menu>
-    //     );
-    //     actionButton = (<Dropdown overlay={lineMenu} trigger={['click']}>
-    //       <CapButton style={{paddingLeft: '24px', paddingRight: '4px'}}>
-    //         <div style={{display: 'inline-flex'}}>
-    //           <p style={{ lineHeight: '28px'}}>New Template</p>
-    //           <p style={{ height: '28px'}}>
-    //             <i style={{ color: '#fff', paddingTop: '2px', margin: '0', paddingRight: '8px'}} className="material-icons">arrow_drop_down</i>
-    //           </p>
-    //         </div>
-    //       </CapButton>
-    //     </Dropdown>);
-    //   } else {
-    //     actionButton = (<CapButton onClick={this.createTemplate}>{this.state.channel.toUpperCase() === 'SMS' ? this.props.intl.formatMessage(messages.createSmsActionButton) : 'Create SMS'}</CapButton>);
-    //   }
-    // }
+       }
+    </CapSpin>);
+  };
+
+  setAccountSelectionMode = () => {
+    this.setState({activeMode: ACCOUNT_SELECTION_MODE});
+  }
+
+  showAccountName = () => {
+    const { selectedAccount, channel } = this.state;
+    const { Templates: templates = {}} = this.props;
+    const { weCrmAccounts = []} = templates;
+    const isMobilePushChannel = channel === MOBILE_PUSH;
+    return (<CapHeader
+      title={<CapHeading type="h4">{isMobilePushChannel ? this.props.intl.formatMessage(messages.mobilepushAccount) : this.props.intl.formatMessage(messages.wechatAccount)}</CapHeading>}
+    description={<><CapHeading type="h3">{selectedAccount} {weCrmAccounts.length > 1 && <CapLink onClick={this.setAccountSelectionMode} style={{display: 'inline-block', position: 'relative', top: '3px'}} fontWeight="regular" fontSize="14px" title="change"/>} </CapHeading></>}
+      size="regular"
+  />);
+  }
 
+  setWechatFilter = (e) => this.setState({wechatFilter: e.target.value});
+
+  render() {
+    const isFullMode = this.isFullMode();
+    const { activeMode, channel, wechatFilter } = this.state;
+    if (activeMode === ACCOUNT_SELECTION_MODE) {
+      return this.renderAccountSelection();
+    }
+    const pageHeader = "";
+    const pageHeaderDvs = "";
     const isLoading = this.isLoading();
     let previewHeader = this.props.intl.formatMessage(messages.preview);
     // const previewHeader = (this.state.channel.toLowerCase() === 'email' ? <h3>{this.props.intl.formatMessage(messages.emailPreview)}</h3> : <h3>{this.props.intl.formatMessage(messages.ebillPreview)}</h3>);
@@ -1621,8 +1635,10 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
       >
       </CardGrid>
     );
-    const isfilterContentVisisble = !_.isEmpty(this.props.TemplatesList) || !_.isEmpty(this.state.searchText) || !_.isEmpty(this.props.Templates.templateError);
-    const filterContent = (( isfilterContentVisisble || this.state.channel.toLowerCase() === 'mobilepush' ) && <div className="action-container">
+    //TODO -> uncomment the following line
+    // const isfilterContentVisisble = !isEmpty(this.props.TemplatesList) || !isEmpty(this.state.searchText) || !isEmpty(this.props.Templates.templateError);
+    const isfilterContentVisisble = true;
+    const filterContent = (( isfilterContentVisisble || [WECHAT, MOBILE_PUSH].includes(this.state.channel.toUpperCase())) && <div className="action-container">
       {isfilterContentVisisble && <CapInput.Search
         className="search-text"
         style={{width: '210px'}}
@@ -1632,8 +1648,14 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
         disabled={this.checkSearchDisabled()}
         onClear={() => this.searchTemplate('')}
         />}
+      {
+        channel.toUpperCase() === WECHAT && <CapRadio.CapRadioGroup className="wechat-filters" defaultValue={wechatFilter} onChange={this.setWechatFilter}>
+            <CapRadio.Button value={WECHAT_FILTERS.ALL}><CapLabel type="label2">All</CapLabel></CapRadio.Button>
+            <CapRadio.Button value={WECHAT_FILTERS.MAPTEMPLATES}><CapLabel type="label2">Map templates</CapLabel></CapRadio.Button>
+            <CapRadio.Button value={WECHAT_FILTERS.RICHMEDIA}><CapLabel type="label2">Rich media templates</CapLabel></CapRadio.Button>
+          </CapRadio.CapRadioGroup>
+      }
       <div style={{display: "flex", justifyContent: "space-between", alignItems: 'center'}}>
-        {(this.props.location.query.type === 'embedded' ) ? pageHeaderDvs : pageHeader}
         {isfilterContentVisisble && <CapButton
           type={"primary"}
           disabled={this.isCreateDisabled()}
@@ -1665,21 +1687,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
           <Pagination onPageChange={templates.length ? this.onPaginationChange : () => {}} paginationSelector="pagination-container">
             {this.getTemplateDataForGrid({isLoading, loadingTip, 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) && // old UI GRID
-            <Pagination onPageChange={this.onPaginationChange} paginationSelector="pagination-container">
-              <CardGrid
-                className={this.state.channel.toLowerCase() === "mobilepush" ? "mobilepush-templates" : ""}
-                listItem={templateList}
-                filterContent={filterContent}
-                onHoverItem={this.handleOnHoverItem}
-                onItemClick={this.handleOnItemClick}
-                enablePagination
-                isLoading={isLoading}
-                loadingTip={loadingTip}
-              >
-              </CardGrid>
-            </Pagination>} */}
-          {(((this.state.selectedAccount !== '' && !_.isEmpty(this.props.Templates.selectedWeChatAccount) && this.state.channel.toLowerCase() === 'wechat') || this.state.channel.toLowerCase() !== 'wechat') && _.isEmpty(this.props.TemplatesList)) && !this.props.Templates.getAllTemplatesInProgress && !_.isEmpty(this.state.searchText) &&
+          {(((this.state.selectedAccount !== '' && !isEmpty(this.props.Templates.selectedWeChatAccount) && this.state.channel.toLowerCase() === 'wechat') || this.state.channel.toLowerCase() !== 'wechat') && isEmpty(this.props.TemplatesList)) && !this.props.Templates.getAllTemplatesInProgress && !isEmpty(this.state.searchText) &&
             <div style={{ height: '65vh', textAlign: 'center', lineHeight: '65vh'}}>
               <CapHeading type="h6">{this.props.intl.formatMessage(messages.noTemplatesFound)}</CapHeading>
             </div>}
@@ -1687,7 +1695,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
 
 
         <CapRow>
-          {!_.isEmpty(creativesParams.mode) && isFullMode && //creatives container for fullmode
+          {!isEmpty(creativesParams.mode) && isFullMode && //creatives container for fullmode
           <CreativesContainer
             key={creativesParams.mode}
             messageDetails={{type: "default"}}
@@ -1697,25 +1705,12 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
             templateData={creativesParams}
             getCreativesData={() => { this.onCreateComplete(true); }}
             channel={route.name.toUpperCase()}
-            handleCloseCreatives={this.onCreateComplete}/>
+            handleCloseCreatives={this.onCreateComplete}
+            selectedWeChatAccount={get(this.props, 'Templates.selectedWeChatAccount', {})}
+            />
           }
         </CapRow>
         <CapRow>
-          {this.state.channel.toLowerCase() === 'wechat' && this.state.previewTemplate && this.state.previewTemplate.definition && this.state.previewTemplate.definition.msgcontent && this.state.previewTemplate.definition.msgcontent === 'RICH_MEDIA_WECHAT' &&
-            <WechatRichmediaTemplatePreview
-              show={this.state.previewOpen}
-              closeSlideBox={this.togglePreview}
-              header={this.state.previewTemplate.name}
-              width={30}
-              showSlidebox
-              const type={this.props.location && this.props.location.query.type ? this.props.location.query.type : ''}
-              content={this.state.previewTemplate.versions.base.mediaList}
-              onEditClick={this.handleEditClick}
-              showEdit
-              templateId={this.state.previewTemplate._id}
-              path={`/wechat/richmedia/edit/${this.state.previewTemplate._id}`}
-            />
-        }
 
           {(this.state.channel.toLowerCase() === 'ebill' || this.state.channel.toLowerCase() === 'email') && htmlPreviewContent && <EmailPreview
             header={previewHeader}
@@ -1724,7 +1719,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
             device={this.state.device}
             handleClose={this.toggleEmailPreview}
             changePreviewDevice={this.changePreviewDevice}
-            versions={_.get(this.state, 'previewTemplate.versions', {})}
+            versions={get(this.state, 'previewTemplate.versions', {})}
             lastModified={this.state.previewTemplate ? this.state.previewTemplate.updatedAt : ''}
             updatedByName={commonUtil.getUserNameById(parseInt(this.state.previewTemplate.updatedBy, 10), commonUtil.getMergedUserList(this.props.Templates.userList))}
           />}