@capillarytech/creatives-library 2.0.69 → 2.0.71

package/v2Containers/Templates/index.js

@@ -0,0 +1,1682 @@
+/*
+ *
+ * Templates
+ *
+ */
+
+import PropTypes from 'prop-types';
+
+import React from 'react';
+import { connect } from 'react-redux';
+import {injectIntl, intlShape, FormattedMessage } from 'react-intl';
+import { createStructuredSelector } from 'reselect';
+import moment from "moment";
+import _ from 'lodash';
+import { bindActionCreators } from 'redux';
+import { Modal} from 'antd';
+import {CapMenu, CapDropdown, CapButton, CapInput, CapIcon, CapSelect, CapPopover, CapSpin, CapCustomCard, CapRow, CapSlideBox} 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';
+import { makeSelectEbill as makeSelectCreateEbill } from '../Ebill/selectors';
+import { makeSelectEmail as makeSelectCreateEmail } from '../Email/selectors';
+import { makeSelectEdit } from '../Sms/Edit/selectors';
+import { makeSelectLine } from '../Line/Create/selectors';
+import { UserIsAuthenticated } from '../../utils/authWrapper';
+import messages from './messages';
+import {checkUnicode} from '../../utils/smsCharCountV2';
+import * as actions from './actions';
+import * as smsActions from '../Sms/Create/actions';
+import * as mobilepushActions from '../MobilePush/Create/actions';
+import * as smsEditActions from '../Sms/Edit/actions';
+import * as ebillActions from '../Ebill/actions';
+import * as emailActions from '../Email/actions';
+import * as lineActions from '../Line/Create/actions';
+import CardGrid from '../../components/CardGrid';
+import './_templates.scss';
+import * as globalActions from '../Cap/actions';
+import { makeSelectAuthenticated } from '../Cap/selectors';
+import {getMessageObject} from '../../utils/messageUtils';
+import * as commonUtil from '../../utils/common';
+import Pagination from '../../components/Pagination';
+import EmailPreview from '../../components/EmailPreview';
+import CreativesContainer from '../CreativesContainer';
+import WechatRichmediaTemplatePreview from '../../components/TemplatePreview/WechatRichmediaTemplatePreview';
+import { MOBILE_PUSH, WECHAT, SMS, EMAIL, EBILL, LINE } from '../CreativesContainer/constants';
+const {CapCustomCardList} = CapCustomCard;
+
+export class Templates extends React.Component { // eslint-disable-line react/prefer-stateless-function
+  constructor(props) {
+    super(props);
+    this.state = {
+      channel: '',
+      hoveredItem: '',
+      clickedItem: '',
+      previewOpen: false,
+      previewTemplate: {},
+      searchText: '',
+      sortBy: 'Most Recent',
+      selectedAccount: '',
+      page: 1,
+      perPageLimit: 25,
+      templatesCount: 0,
+      showEdmEmailTemplates: false,
+      showModal: false,
+      actionTemplate: {},
+      showHtmlPreview: false,
+      device: 'desktop',
+      searchedTemplates: false,
+      defaultAccount: true,
+      modeType: null,
+      routeParams: null,
+    };
+    this.handleOnHoverItem = this.handleOnHoverItem.bind(this);
+    this.handleOnItemClick = this.handleOnItemClick.bind(this);
+    this.handleEditClick = this.handleEditClick.bind(this);
+    this.handlePreviewClick = this.handlePreviewClick.bind(this);
+    this.createTemplate = this.createTemplate.bind(this);
+    this.duplicateTemplate = this.duplicateTemplate.bind(this);
+    this.deleteTemplate = this.deleteTemplate.bind(this);
+    this.togglePreview = this.togglePreview.bind(this);
+    this.searchTemplate = this.searchTemplate.bind(this);
+    this.handleSortBy = this.handleSortBy.bind(this);
+    this.getCurrentWindow = this.getCurrentWindow.bind(this);
+    this.handleFrameTasks = this.handleFrameTasks.bind(this);
+    this.startTemplateCreation = this.startTemplateCreation.bind(this);
+    this.startLoading = this.startLoading.bind(this);
+    this.prepareWeChatPreviewData = this.prepareWeChatPreviewData.bind(this);
+    this.prepareWeChatMappedPreviewData = this.prepareWeChatMappedPreviewData.bind(this);
+    this.onAccountSelect = this.onAccountSelect.bind(this);
+    this.prepareMobilePushPreviewData = this.prepareMobilePushPreviewData.bind(this);
+    this.menuOnClickEvent = this.menuOnClickEvent.bind(this);
+  }
+
+  componentWillMount() {
+    if (this.state.channel === '') {
+      let channel = '';
+
+      switch (this.props.route.name.toUpperCase()) {
+        case SMS:
+          channel = 'Sms';
+          break;
+        case MOBILE_PUSH:
+          channel = "MobilePush";
+          this.props.actions.getWeCrmAccounts(channel);
+          break;
+        case WECHAT:
+          channel = 'wechat';
+          this.props.actions.getWeCrmAccounts();
+          break;
+        case EMAIL:
+          channel = 'Email';
+          break;
+        case EBILL:
+          channel = 'Ebill';
+          break;
+        case LINE:
+          channel = "Line";
+          break;
+        default:
+          channel = '';
+      }
+      this.setState({ channel });
+      if (_.isEmpty(this.props.Templates.userList)) {
+        this.props.actions.getUserList();
+      }
+    }
+  }
+
+  componentDidMount() {
+    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))) {
+      const queryParams = {
+        // name: this.state.searchText,
+        // sortBy: this.state.sortBy,
+      };
+      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;
+      }
+      queryParams.page = this.state.page;
+      queryParams.perPage = this.state.perPageLimit;
+      const channel = this.state.channel;
+      this.props.actions.getAllTemplates(channel, queryParams);
+      //this.getAllTemplates({});
+      // if (this.state.channel.toLowerCase() === "email") {
+      //   this.props.actions.getEdmDefaultTemplates();
+      // }
+    }
+
+    window.addEventListener("message", this.handleFrameTasks);
+  }
+  componentWillReceiveProps(nextProps) {
+    const params = {
+      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) {
+      this.setState({templatesCount: this.props.TemplatesList[0].totalCount});
+    }
+    if (!_.isEqual(nextProps.route.name, this.props.route.name)) {
+      let channel = '';
+      this.props.actions.resetTemplate();
+      this.props.actions.resetAccount();
+      if (nextProps.route.name.toLowerCase() === 'sms') {
+        channel = 'Sms';
+      } else if (nextProps.route.name.toLowerCase() === 'wechat') {
+        this.setState({defaultAccount: true});
+        channel = 'wechat';
+        nextProps.actions.getWeCrmAccounts();
+      } else if (nextProps.route.name.toLowerCase() === 'email') {
+        channel = 'Email';
+        // this.props.actions.getEdmDefaultTemplates();
+      } else if (nextProps.route.name.toLowerCase() === "mobilepush") {
+        this.setState({defaultAccount: true});
+        channel = "mobilepush";
+        nextProps.actions.getWeCrmAccounts(channel);
+      } else if (nextProps.route.name.toLowerCase() === 'ebill') {
+        channel = 'Ebill';
+      } else if (nextProps.route.name.toLowerCase() === 'line') {
+        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)) {
+            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;
+          }
+          this.getAllTemplates({params}, true);
+        }
+      });
+    }
+    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;
+    }
+    if ((this.state.channel.toLowerCase() === 'wechat' || this.state.channel.toLowerCase() === 'mobilepush') && _.isEmpty(nextProps.Templates.selectedWeChatAccount) && (this.props.location.query.type === 'embedded') && !this.isEnabledInLibraryModule("showAccountSelection")) {
+      let selectedAccount = '';
+      if (_.isEmpty(nextProps.Templates.weCrmAccounts)) {
+        return;
+      }
+      if (this.state.channel.toLowerCase() === 'wechat') {
+        _.forEach(nextProps.Templates.weCrmAccounts, (account) => {
+          if (account.configs && account.configs.is_wecrm_enabled) {
+            if (nextProps.location.query.source_account_id && account.sourceAccountIdentifier === nextProps.location.query.source_account_id) {
+              selectedAccount = account;
+            }
+          }
+        });
+        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});
+        });
+      } else if (this.state.channel.toLowerCase() === 'mobilepush' && (nextProps.location.query.account_id || nextProps.location.query.source_account_id)) {
+        _.forEach(nextProps.Templates.weCrmAccounts, (account) => {
+          if ((nextProps.location.query.account_id && account.id === Number(nextProps.location.query.account_id)) || (nextProps.location.query.source_account_id && account.sourceAccountIdentifier && account.sourceAccountIdentifier === nextProps.location.query.source_account_id)) {
+            selectedAccount = account;
+          }
+        });
+        this.props.actions.setWeChatAccount(selectedAccount);
+        params.accountId = Number(nextProps.location.query.account_id);
+        this.getAllTemplates({params});
+      }
+    }
+    if (this.state.channel.toLowerCase() === "mobilepush" && nextProps.CreateMobilePush && nextProps.CreateMobilePush.response && nextProps.CreateMobilePush.response.templateId && nextProps.CreateMobilePush.response.templateId !== '') {
+      if (this.state.channel.toLowerCase() === "mobilepush" && !_.isEmpty(nextProps.Templates.selectedWeChatAccount)) {
+        params.accountId = nextProps.Templates.selectedWeChatAccount.id;
+      }
+      const message = getMessageObject('success', `${this.state.channel} ${this.props.intl.formatMessage(messages.templateDuplicateSuccess)}`, true);
+      this.props.globalActions.addMessageToQueue(message);
+      this.getAllTemplates({params});
+      this.props.mobilepushActions.clearCreateResponse();
+    }
+
+    if (this.state.channel.toLowerCase() === "ebill" && nextProps.CreateEbill && nextProps.CreateEbill.createResponse && nextProps.CreateEbill.createResponse.templateId && nextProps.CreateEbill.createResponse.templateId !== '') {
+      const message = getMessageObject('success', `${this.state.channel} ${this.props.intl.formatMessage(messages.templateDuplicateSuccess)}`, true);
+      this.props.globalActions.addMessageToQueue(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 !== '') {
+      const message = getMessageObject('success', `${this.state.channel} ${this.props.intl.formatMessage(messages.templateDuplicateSuccess)}`, true);
+      this.props.globalActions.addMessageToQueue(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 !== '') {
+      const message = getMessageObject('success', `${this.state.channel} ${this.props.intl.formatMessage(messages.templateDuplicateSuccess)}`, true);
+      this.props.globalActions.addMessageToQueue(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 = getMessageObject('error', this.props.intl.formatMessage(messages.somethingWentWrong), true);
+      this.props.globalActions.addMessageToQueue(message);
+      if (this.state.channel.toLowerCase() === "sms") {
+        this.props.smsActions.clearCreateResponse();
+      } else if (this.state.channel.toLowerCase() === "mobilepush") {
+        this.props.mobilepushActions.clearCreateResponse();
+      } else if (this.state.channel.toLowerCase() === "ebill") {
+        this.props.ebillActions.clearCreateResponse();
+      } else if (this.state.channel.toLowerCase() === "line") {
+        this.props.lineActions.clearCreateResponse();
+      }
+    }
+
+    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) &&
+    nextProps.Templates.deleteResponse) {
+      const message = getMessageObject('success', `${this.state.channel.toUpperCase()} ${this.props.intl.formatMessage(messages['Template deleted successfully'])}`, true);
+      nextProps.globalActions.addMessageToQueue(message);
+      this.getAllTemplates({params, resetPage: true});
+    }
+
+    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;
+      const type = this.props.location.query.type;
+      if (this.isEnabledInLibraryModule("callCreateFromProps")) {
+        this.props.createNew();
+        return;
+      }
+      this.setState({routeParams: {
+        pathname: `/${nextProps.route.name.toLowerCase()}/create`,
+        query: type === 'embedded' ? {type: 'embedded', module, isLanguageSupport, isEdmSupport} : {module},
+      }});
+    }
+
+    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;
+      }
+      const message = getMessageObject('error', errorMessage, true);
+      nextProps.globalActions.addMessageToQueue(message);
+    }
+
+    if (!_.isEmpty(nextProps.Templates.templateDetails) && !_.isEqual(nextProps.Templates.templateDetails, this.props.Templates.templateDetails)) {
+      this.setState({previewTemplate: nextProps.Templates.templateDetails});
+    }
+
+    if (nextProps.Templates.weCrmAccounts !== undefined && nextProps.Templates.weCrmAccounts.length === 1 && this.state.defaultAccount && (['wechat', 'mobilepush'].indexOf(this.state.channel.toLowerCase()) > -1)) {
+      const paramsDefault = {
+        name: this.state.searchText,
+        sortBy: this.state.sortBy,
+      };
+      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]);
+        paramsDefault.accountId = nextProps.Templates.weCrmAccounts[0].id;
+      }
+      this.setState({defaultAccount: false});
+      this.getAllTemplates({params: paramsDefault}, true);
+    }
+  }
+
+  componentWillUnmount() {
+    window.removeEventListener("message", this.handleFrameTasks);
+    this.props.actions.resetTemplateStoreData();
+    this.props.globalActions.clearMetaEntities();
+    // this.setState({defaultAccount: false});
+  }
+
+  onAccountSelect(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;
+      } 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});
+    });
+  }
+  onPaginationChange = () => { this.getAllTemplates({getNextPage: true}); }
+  onCreateComplete = () => {
+    this.setState({routeParams: null});
+  }
+  getCurrentWindow(e) {
+    const response = {
+      action: e.action,
+      value: 'templates',
+      direction: e.value,
+    };
+    parent.postMessage(JSON.stringify(response), '*');
+  }
+  getCreativesParams = () => {
+    const routeParams = this.state.routeParams;
+    let creativesParams = {mode: ''};
+    if (!_.isEmpty(routeParams)) {
+      if (routeParams.pathname.indexOf('create') > -1) {
+        creativesParams.mode = 'create';
+      } else if (routeParams.pathname.indexOf('edit') > -1) {
+        creativesParams.mode = 'edit';
+        creativesParams._id = routeParams.pathname.split('/')[3];
+        creativesParams.type = this.state.channel.toUpperCase();
+      }
+    }
+    if (this.state.previewOpen) {
+      creativesParams.mode = 'preview';
+      creativesParams = {...creativesParams, ...this.state.previewTemplate};
+    }
+    return creativesParams;
+  }
+  getMappedLocale = (locale) => {
+    const map = {
+      'en': 'en',
+      'zh-cn': 'zh',
+    };
+    return map[locale];
+  };
+  setLocale = () => {
+    const user = localStorage.getItem('user');
+    let locale = 'en';
+    if (user) {
+      locale = JSON.parse(user).lang;
+    }
+    locale = this.getMappedLocale(locale);
+    //locale = 'zh';
+
+    moment.locale(locale);
+  };
+  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;
+      queryParams.page = this.state.page;
+      queryParams.perPage = this.state.perPageLimit;
+      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))) {
+      if (getNextPage) {
+        page += 1;
+      }
+      let templatesCount = this.state.templatesCount;
+      if (resetPage) {
+        page = 1;
+        templatesCount = 0;
+      }
+      if (!params || _.isEmpty(params)) {
+        queryParams = {
+          name: this.state.searchText,
+          sortBy: this.state.sortBy,
+        };
+        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;
+          if (this.state.mode) {
+            queryParams.mode = this.state.mode.toLowerCase();
+          }
+        }
+      }
+      this.setState({page, templatesCount}, () => {
+        queryParams.page = page;
+        queryParams.perPage = this.state.perPageLimit;
+        const channel = this.state.channel;
+        this.props.actions.getAllTemplates(channel, queryParams);
+      });
+    }
+  };
+  getTemplateDataForGrid = ({templates, handlers, filterContent, channel, isLoading, loadingTip}) => {
+    const currentChannel = channel.toUpperCase();
+    const cardDataList = templates && templates.length ? _.map(templates, (template) => {
+      const templateData =
+        {
+          key: `${currentChannel}-card-${template.name}`,
+          title: <span title={template.name} >{template.name}</span>,
+          extra: [
+            <CapIcon
+              style={{marginRight: '16px'}}
+              type="eye"
+              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>,
+        };
+      if (this.props.isFullMode) {
+        templateData.extra.push(<CapDropdown
+          overlay={
+            <CapMenu>
+              <CapMenu.Item onClick={() => this.duplicateTemplate(template)}>
+                <FormattedMessage {...messages.duplicateButton} />
+              </CapMenu.Item>
+              <CapMenu.Item
+                onClick={() => this.deleteTemplate(template)}
+              >
+                <FormattedMessage {...messages.deleteButton} />
+              </CapMenu.Item>
+            </CapMenu>
+      }
+    >
+          <CapIcon type="more" />
+        </CapDropdown>);
+      }
+      if (currentChannel === "SMS") {
+        templateData.content = template.versions.base['sms-editor'];
+      } else if (currentChannel === "EMAIL") {
+        templateData.url = template.versions.base.preview_http_url;
+      } else if (currentChannel === "MOBILEPUSH" && template.type === "MOBILEPUSH") {
+        templateData.content = template;
+      }
+      return templateData;
+    }) : [];
+    return (<div>
+      {filterContent}
+      <CapSpin spinning={isLoading} tip={loadingTip}>
+        {!_.isEmpty(templates) && <div className="pagination-container">
+          <CapCustomCardList key={`${currentChannel}-card-list`} cardList={cardDataList} type={currentChannel} />
+        </div>}
+        {(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'}}>
+          <span style={{ fontFamily: 'open-sans', fontSize: '24px', color: '#B5B5B5'}}>{this.props.intl.formatMessage(messages.noAccountMessage)}</span>
+        </div>}
+      </CapSpin>
+
+    </div>);
+  }
+  skipTemplateSelection = (e) => {
+    const type = this.props.location.query.type;
+    const module = (type === 'embedded') ? this.props.location.query.module : 'default';
+    let routeParams = {};
+    if (this.state.channel.toLowerCase() === 'email') {
+      const isLanguageSupport = this.props.location.query.isLanguageSupport || false;
+      routeParams = {
+        pathname: `/email/view`,
+        query: type === 'embedded' ? {type: 'embedded', module, isLanguageSupport} : {},
+      };
+    } else if (this.state.channel.toLowerCase() === 'sms') {
+      routeParams = {
+        pathname: `/sms/view`,
+        query: type === 'embedded' ? {type: 'embedded', module} : {},
+      };
+    } else if (this.state.channel.toLowerCase() === 'mobilepush') {
+      routeParams = {
+        pathname: `/mobilepush/edit/${e.template_id}`,
+        query: type === 'embedded' ? {type: 'embedded', module, account_id: e.account_id} : {},
+      };
+    } else if (this.state.channel.toLowerCase() === 'wechat') {
+      if (e.template_type && e.template_type === 'RICHMEDIA_WECHAT_TEMPLATE') {
+        this.props.router.push({
+          pathname: `/wechat/richmedia/edit/${e.template_id}`,
+          query: type === 'embedded' ? {type: 'embedded', module, source_account_id: e.source_account_id} : {},
+        });
+      } else {
+        this.props.router.push({
+          pathname: `/wechat/edit/${e.template_id}`,
+          query: type === 'embedded' ? {type: 'embedded', module, source_account_id: e.source_account_id} : {},
+        });
+      }
+    } else if (this.state.channel.toLowerCase() === 'line') {
+      routeParams = {
+        pathname: `/line/view/${e.msg_type}/`,
+        query: type === 'embedded' ? {type: 'embedded', module, account_id: e.account_id } : {},
+      };
+    }
+    this.setState({loading: true, routeParams});
+  }
+
+  handleMenuAction = (item) => {
+    if (item.key.toLowerCase() === 'uploadfile') {
+      document.getElementById('filename').click();
+    } else if (item.key.toLowerCase() === 'useeditor') {
+      this.toggleEdmEmailTemplateSelection();
+    }
+  };
+
+  handleBlankTemplateAction = (item, channel) => {
+    const type = this.props.location.query.type;
+    const module = this.props.location.query.module ? this.props.location.query.module : 'default';
+    let routeParams = {};
+    if (item === "uploadFile") {
+      document.getElementById('filename').click();
+    } else if (item === "editor") {
+      this.toggleEdmEmailTemplateSelection();
+    } else if (this.isEnabledInLibraryModule("callCreateFromProps")) {
+      this.props.createNew(item);
+    } else if (item === 'textTemplate') {
+      routeParams = {
+        pathname: `/${channel === 'line' ? 'line' : 'mobilepush'}/create/text`,
+        query: type === 'embedded' ? {type: 'embedded', module} : {module},
+      };
+    } else if (item === 'imageTemplate') {
+      routeParams = {
+        pathname: `/${channel === 'line' ? 'line' : 'mobilepush'}/create/image`,
+        query: type === 'embedded' ? {type: 'embedded', module} : {module},
+      };
+    }
+    this.setState({routeParams});
+  }
+
+  handleFileUpload = (e, {files}) => {
+    if (files.length === 0) {
+      return;
+    }
+    const fileExtension = files[0].name.split('.').pop();
+    const supportedZipFormats = ['zip'];
+    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;
+
+    if (supportedZipFormats.indexOf(fileExtension.toLowerCase()) !== -1) {
+      this.props.actions.handleZipUpload(files[0]);
+      document.getElementById("filename").value = "";
+    } else if (fileExtension === 'html' || fileExtension === 'htm') {
+      const reader = new FileReader();
+      reader.onload = () => {
+        const text = reader.result;
+        this.props.actions.handleHtmlUpload(text);
+        document.getElementById("filename").value = "";
+        const type = this.props.location.query.type;
+        if (this.isEnabledInLibraryModule("callCreateFromProps")) {
+          this.props.createNew();
+          return;
+        }
+        this.setState({routeParams: {
+          pathname: `/${this.props.route.name.toLowerCase()}/create`,
+          query: type === 'embedded' ? {type: 'embedded', module, isLanguageSupport, isEdmSupport} : {module},
+        }});
+      };
+      reader.readAsText(files[0]);
+    } else {
+      const message = getMessageObject('error', this.props.intl.formatMessage(messages.invalidUploadFileError), true);
+      this.props.globalActions.addMessageToQueue(message);
+    }
+  };
+
+  prepareWeChatPreviewData(template) {
+    if (template && template.versions && template.versions.base && !_.isEmpty(template.versions.base)) {
+      if (template.definition && template.definition.msgcontent && template.definition.msgcontent === "RICH_MEDIA_WECHAT") {
+        return template.versions.base.mediaList;
+      }
+      return this.prepareWeChatMappedPreviewData(template.versions.base.content, template.versions.base.Tag, template.versions.base.data);
+    }
+    return 'wrong template';
+  }
+
+  prepareWeChatMappedPreviewData(content, templateTags, tagData) {
+    let formattedContent = _.cloneDeep(content);
+    _.forEach(templateTags, (tag) => {
+      if (tagData[tag].value !== undefined) {
+        formattedContent = formattedContent.replace(`{{${tag}.DATA}}`, tagData[tag].value);
+      }
+    });
+    return formattedContent;
+  }
+
+  prepareMobilePushPreviewData(content) {
+    let result;
+    if (content.ANDROID) {
+      const data = content.ANDROID;
+      const bodyTextStyle = { WebkitLineClamp: 12};
+      if (data.expandableDetails && data.expandableDetails.ctas && ((data.expandableDetails.ctas[0] && data.expandableDetails.ctas[0].actionText) || (data.expandableDetails.ctas[1] && data.expandableDetails.ctas[1].actionText))) {
+        bodyTextStyle.WebkitLineClamp = 10;
+      }
+      if (data.expandableDetails && data.expandableDetails.image) {
+        bodyTextStyle.WebkitLineClamp = 3;
+      }
+      result = (
+        <div className="android-push-message-Container">
+          <div className="message-pop align-left">
+            <div className="message-container">
+              <div className="app-name">
+                <span className="app-icon"></span> {this.props.Templates.selectedWeChatAccount && this.props.Templates.selectedWeChatAccount.name ? this.props.Templates.selectedWeChatAccount.name : "App name"}
+              </div>
+              <div className="title">
+                {data.title}
+              </div>
+              <div className="body-text" style={bodyTextStyle} >
+                {data.message}
+              </div>
+              {data.expandableDetails && data.expandableDetails.image && <div className="body-image">
+                <img src={data.expandableDetails.image} alt={data.expandableDetails.image}/>
+              </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 &&
+                  <span className="action">{action.actionText && action.actionText.toUpperCase()}</span>)}
+              </div>
+              }
+            </div>
+          </div>
+        </div>);
+    } else if (content.IOS) {
+      const data = content.IOS;
+      const bodyTextStyle = { WebkitLineClamp: 11};
+      if (data.expandableDetails && data.expandableDetails.ctas && data.expandableDetails.ctas[0] && data.expandableDetails.ctas[0].actionText) {
+        bodyTextStyle.WebkitLineClamp = 6;
+      }
+      if (data.expandableDetails && data.expandableDetails.image) {
+        bodyTextStyle.WebkitLineClamp = 1;
+      }
+      const iosActions = [];
+      if (data.expandableDetails.ctas && data.expandableDetails.ctas.length) {
+        if (data.expandableDetails.ctas[0].actionLabel) {
+          iosActions.push(<div className="actions">
+            <span className="action">{data.expandableDetails.ctas[0].actionLabel.toUpperCase()}</span>
+          </div>);
+        }
+        if (data.expandableDetails.ctas[0].actionLabel2) {
+          iosActions.push(<div className="actions">
+            <span className="action">{data.expandableDetails.ctas[0].actionLabel2.toUpperCase()}</span>
+          </div>);
+        }
+      }
+
+      result = (
+        <div className="iphone-push-message-Container">
+          <div className="message-pop align-left">
+            <div className="message-container">
+              <div className="app-name">
+                <span className="app-icon"></span>{this.props.Templates.selectedWeChatAccount && this.props.Templates.selectedWeChatAccount.name ? this.props.Templates.selectedWeChatAccount.name : "App name"} <i className="material-icons">close</i>
+              </div>
+              {data.expandableDetails && data.expandableDetails.image && <div className={`body-image ${iosActions.length > 0 ? 'image-half' : ''}`}>
+                <img src={data.expandableDetails.image} alt={data.image}/>
+              </div>}
+              <div className="title">
+                {data.title}
+              </div>
+              <div className="body-text" style={bodyTextStyle}>
+                {data.message}
+              </div>
+              {data.expandableDetails && data.expandableDetails.ctas && data.expandableDetails.ctas[0] && data.expandableDetails.ctas[0].actionText && iosActions}
+            </div>
+          </div>
+        </div>);
+    }
+    return result;
+  }
+  startLoading(ifEdit) {
+    if (ifEdit) {
+      this.setState({loading: true});
+    }
+  }
+
+  startTemplateCreation(data) {
+    if (data.edit) {
+      const ifUnicode = checkUnicode(data.content);
+
+      const content = data.content;
+      const tempData = {
+        'sms-editor': content,
+        'unicode-validity': ifUnicode,
+        'base': true,
+      };
+      const formData = {};
+      formData[0] = tempData;
+      formData.base = tempData;
+      this.setState({formData, loading: false});
+    }
+  }
+
+  handleFrameTasks = (e) => {
+    const type = e.data;
+    if (typeof type === 'object') {
+      const action = type.action;
+      switch (action) {
+        case "startTemplateCreation":
+          this.startTemplateCreation(type.value);
+          break;
+        case "startLoading":
+          this.startLoading(type.edit);
+          break;
+        case "getCurrentWindow":
+          this.getCurrentWindow(e.data);
+          break;
+        case "skipTemplateSelection":
+          this.skipTemplateSelection(e.data);
+          break;
+        default:
+          break;
+      }
+    }
+    switch (type) {
+      case "getFormData":
+        this.getFormData(e);
+        break;
+      case "startTemplateCreation":
+
+        //this.getFormData(e);
+        break;
+      case "validateContent":
+
+        this.validateContent(e);
+        break;
+      default:
+        break;
+    }
+  };
+
+  createTemplate(ev) {
+    const type = this.props.location.query.type;
+    const module = this.props.location.query.module ? this.props.location.query.module : 'default';
+    const channel = this.state.channel.toLowerCase();
+    //const keyType = ev.key && ev.key.toLowerCase() !== undefined ? ev.state.toLowerCase() : '';
+    let routeParams = {};
+    if (this.isEnabledInLibraryModule("callCreateFromProps")) {
+      this.props.createNew();
+    } else if (ev.key && (ev.key.toLowerCase() === "text" || ev.key.toLowerCase() === "image")) {
+      routeParams = {
+        pathname: `/${channel === 'line' ? 'line' : 'mobilepush'}/create/${ev.key.toLowerCase()}`,
+        query: type === 'embedded' ? {type: 'embedded', module} : {module},
+      };
+    } else {
+      routeParams = {
+        pathname: `/${this.state.channel.toLowerCase()}/create`,
+        query: type === 'embedded' ? {type: 'embedded', module} : {module},
+      };
+    }
+    this.setState({routeParams});
+  }
+
+  menuOnClickEvent(ev) {
+    let type = this.props.location.query.type;
+    // const module = this.props.location.query.module ? this.props.location.query.module : 'default';
+    const channel = this.state.channel.toLowerCase();
+    switch (channel) {
+      case 'wechat':
+        if (ev && ev.key && ev.key.toLowerCase() === "map_template") {
+          type = this.props.location.query.type;
+          this.props.router.push({
+            pathname: `/wechat/create`,
+            query: type === 'embedded' ? {type: 'embedded'} : {},
+          });
+        } 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))) {
+            const errorMessage = this.props.intl.formatMessage(messages.wechatAccountNotConfigured);
+            const message = getMessageObject('error', errorMessage, true);
+            this.props.globalActions.addMessageToQueue(message);
+          } else {
+            this.props.router.push({
+              pathname: `/wechat/richmedia/create`,
+              query: type === 'embedded' ? {type: 'embedded'} : {},
+            });
+          }
+        }
+        break;
+      default:
+        this.props.router.push({
+          pathname: `*`,
+        });
+        break;
+    }
+  }
+
+  searchTemplate(data) {
+    this.setState({searchText: data}, () => {
+      const params = {
+        name: this.state.searchText,
+        sortBy: this.state.sortBy,
+      };
+      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;
+      }
+      this.getAllTemplates({params, resetPage: true});
+    });
+  }
+
+  handleSortBy(data) {
+    this.setState({sortBy: data}, () => {
+      const params = {
+        name: this.state.searchText,
+        sortBy: this.state.sortBy,
+      };
+      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;
+      }
+      this.getAllTemplates({params, resetPage: true});
+    });
+  }
+  handleType = (data) => {
+    this.setState({mode: data}, () => {
+      const params = {
+        name: this.state.searchText,
+        sortBy: this.state.sortBy,
+      };
+      if (this.state.channel.toLowerCase() === "mobilepush") {
+        params.accountId = this.props.Templates.selectedWeChatAccount.id;
+      }
+      if ( (this.state.channel.toLowerCase() === 'mobilepush' || this.state.channel.toLowerCase() === 'line') && data.toLowerCase() !== "all") {
+        params.mode = this.state.mode.toLowerCase();
+      }
+      this.getAllTemplates({params, resetPage: true});
+    });
+  };
+  togglePreview() {
+    if (this.state.channel.toLowerCase() === 'ebill' || this.state.channel.toLowerCase() === 'email') {
+      this.toggleEmailPreview();
+    } else {
+      this.setState( (prevState) => ({
+        previewOpen: !prevState.previewOpen}));
+    }
+  }
+
+  toggleEdmEmailTemplateSelection = () => {
+    this.setState( (prevState) => ({
+      showEdmEmailTemplates: !prevState.showEdmEmailTemplates}), () => {
+      this.props.actions.getEdmDefaultTemplates();
+    });
+  };
+
+  deleteTemplate(template) {
+    this.props.actions.deleteTemplate(this.state.channel.toUpperCase(), template._id);
+    this.setState({actionTemplate: {}});
+  }
+
+  duplicateTemplate(template) {
+    const duplicateObj = _.cloneDeep(template);
+    duplicateObj.name = `Copy of ${template.name} ${moment().format('MM-DD-YYYY hh:mma')}`;
+    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 = getMessageObject('success', `${this.state.channel} ${this.props.intl.formatMessage(messages.templateDuplicateSuccess)}`, true);
+          this.props.globalActions.addMessageToQueue(message);
+          this.getAllTemplates({params, resetPage: true});
+          this.props.smsActions.clearCreateResponse();
+        }
+      });
+    } else if (this.state.channel.toLowerCase() === "mobilepush") {
+      duplicateObj.definition.accountId = this.props.Templates.selectedWeChatAccount.id;
+      this.props.mobilepushActions.createTemplate(duplicateObj);
+    } else if (this.state.channel.toLowerCase() === "ebill") {
+      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);
+    }
+  }
+
+  handleOnHoverItem(isHovering, id) {
+    if (isHovering) {
+      this.setState({hoveredItem: id});
+    } else {
+      this.setState({hoveredItem: ''});
+    }
+  }
+
+  handleOnItemClick(isClicked, id) {
+    this.setState({clickedItem: id});
+  }
+
+  handleEdmDefaultTemplateSelection = (isSelected, id) => {
+    if (isSelected) {
+      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;
+      const isEdmSupport = (this.props.location.query.isEdmSupport !== "false") || false;
+      let getQuery = '';
+
+      this.props.actions.setEdmTemplate(data);
+      if (this.state.channel && this.state.channel.toLowerCase() === 'email') {
+        getQuery = (type === 'embedded') ? {type: 'embedded', module, isLanguageSupport, isEdmSupport} : {module, isLanguageSupport, isEdmSupport};
+      } else {
+        getQuery = (type === 'embedded') ? {type: 'embedded', module} : {module};
+      }
+      if (this.isEnabledInLibraryModule("callCreateFromProps")) {
+        this.props.createNew();
+        return;
+      }
+      this.setState({routeParams: {
+        pathname: `/${this.state.channel.toLowerCase()}/create`,
+        query: getQuery,
+      }});
+    }
+  };
+
+  handleEditClick(e, id, modeType, path) {
+    if (modeType && modeType !== undefined) {
+      this.setState({modeType});
+    }
+    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;
+    const isEdmSupport = (this.props.location.query.isEdmSupport !== "false") || false;
+    let getQuery = "";
+    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') {
+      pathName = `/line/edit/${modeType}/${id}`;
+    }
+    if (this.isEnabledInLibraryModule("callSelectFromProps")) {
+      this.props.onSelectTemplate(id);
+    } else {
+      if (this.state.channel.toLowerCase() === 'ebill') {
+        pathName = `/ebill/edit/${id}`;
+      }
+      this.setState({routeParams: {
+        pathname: pathName,
+        query: getQuery,
+      }});
+    }
+  }
+
+  handlePreviewClick(template, modeType) {
+    this.togglePreview();
+    const templateInfo = _.cloneDeep(template);
+    if (this.state.channel.toLowerCase() === 'line') {
+      templateInfo.modeType = modeType;
+    }
+    templateInfo.updatedByName = commonUtil.getUserNameById(parseInt(template.updatedBy, 10), commonUtil.getMergedUserList(this.props.Templates.userList));
+    if (this.state.channel === 'wechat') {
+      templateInfo.content = this.prepareWeChatPreviewData(template);
+    } else if (this.state.channel.toLowerCase() === "mobilepush") {
+      templateInfo.content = template.versions.base;
+      templateInfo.appName = this.props.Templates.selectedWeChatAccount.name;
+    } else if (this.state.channel.toLowerCase() === "email") {
+      this.props.actions.getTemplateDetails(template._id);
+    } else if (this.state.channel.toLowerCase() === 'ebill') {
+      this.props.actions.getTemplateDetails(template._id);
+    }
+    if (this.state.channel.toLowerCase() !== 'ebill') {
+      this.setState({previewTemplate: templateInfo});
+    }
+  }
+
+  toggleDeleteTemplateModal = (template) => {
+    this.setState({actionTemplate: template}, () => {
+      this.setState({showModal: true});
+    });
+  }
+
+  handleOk = () => {
+    this.setState({showModal: false});
+    this.deleteTemplate(this.state.actionTemplate);
+  }
+
+  handleCancel = () => {
+    this.setState({showModal: false});
+  }
+
+  populateTemplatesList = (data, blankTemplateRequired, layoutSelection) => {
+    if (!data) {
+      return [];
+    }
+    const type = this.props.location.query.type;
+    const items = [];
+    const channel = this.state.channel.toLowerCase();
+
+    if (type === 'embedded' && channel !== 'wechat' && blankTemplateRequired) {
+      let content;
+      if (channel === 'sms') {
+        content = (<div className="sms-template-content" onClick={this.createTemplate}>
+          <div style={{textAlign: 'center', lineHeight: '260px'}} className="sms-text">{this.props.intl.formatMessage(messages.blankTemplate)}</div>
+        </div>);
+      } else if (channel === 'email') {
+        content = (<div className="sms-template-content">
+          <div style={{textAlign: 'center', lineHeight: '260px'}} className="sms-text">
+            <div>
+              <button type="button" className="ant-btn cap-button edit-button ant-btn-ghost" onClick={() => this.handleBlankTemplateAction('uploadFile')}><span>Upload File</span></button>
+              <button type="button" className="ant-btn cap-button preview-button ant-btn-danger" onClick={() => this.handleBlankTemplateAction('editor')}><span>Use Editor</span></button>
+            </div>
+          </div>
+        </div>);
+      } else if (channel === 'mobilepush' || channel === 'line') {
+        content = (<div className="sms-template-content">
+          <div style={{textAlign: 'center', lineHeight: '260px'}} className="sms-text">
+            <div>
+              <button
+                type="button"
+                className="ant-btn cap-button edit-button ant-btn-ghost"
+                onClick={() => this.handleBlankTemplateAction('textTemplate', channel)}>
+                <span>{this.props.intl.formatMessage(messages.textTemplate)}</span>
+              </button>
+              <button
+                type="button"
+                className="ant-btn cap-button preview-button ant-btn-danger"
+                onClick={() => this.handleBlankTemplateAction('imageTemplate', channel)}>
+                <span>{this.props.intl.formatMessage(messages.imageTemplate)}</span>
+              </button>
+            </div>
+          </div>
+        </div>);
+      }
+      items.push(
+        {
+          id: 'blankTemplate',
+          content,
+        }
+      );
+    }
+    data.map( (template) => {
+      //
+      const temp = {};
+      //
+      const updateDateTime = (moment().format('DD-MM-YYYY') === moment(template.updatedAt).format('DD-MM-YYYY')) ? moment(template.updatedAt).format('hh:mma') : moment(template.updatedAt).format('DD MMM YYYY');
+      let content = '';
+      temp.id = template._id;
+      if (this.state.channel === 'wechat') {
+        let path = '';
+        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}/>;
+          } else {
+            path = `/wechat/edit/${template._id}`;
+            content = this.prepareWeChatPreviewData(template);
+          }
+          temp.content = (
+            <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, 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>
+          );
+        }
+      } else if (this.state.channel.toLowerCase() === 'email' || this.state.channel.toLowerCase() === 'ebill') {
+        //
+
+        const imgSrc = template && template.versions && template.versions.base ? template.versions.base.preview_http_url : '';
+        // const ifPreviewGenerated = template && template.versions && template.versions.base ? template.versions.base.isPreviewGenerated : 0;
+        content = <img src={imgSrc || ''} alt={this.props.intl.formatMessage(messages.previewGenerateText)} width="100%" height="100%"/>;
+
+        temp.content = (
+          <div
+            className="sms-template-content">
+            <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={() => 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>);
+      } else if (this.state.channel.toLowerCase() === 'mobilepush') {
+        content = this.prepareMobilePushPreviewData(template.versions.base);
+        temp.content = (
+          <div>
+            <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={() => this.handlePreviewClick(template)} className="preview-button" type="cancel">{this.props.intl.formatMessage(messages.previewButton)}</CapButton> : ''}
+          </div>);
+      } else if (this.state.channel.toLowerCase() === 'line') {
+        //content = template.versions.base.messages[0].Text;
+        content = {
+          bodyText: template.versions.base.content.messages[0].text ? template.versions.base.content.messages[0].text : '',
+          bodyImage: template.versions.base.content.messages[0].originalContentUrl ? template.versions.base.content.messages[0].originalContentUrl : '',
+        };
+        const modeType = template.versions.base.content.messages[0].type;
+        temp.content = (
+          <div className="sms-template-content" key={template._id}>
+            {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={() => this.handlePreviewClick(template, modeType)} className="preview-button" type="cancel">{this.props.intl.formatMessage(messages.previewButton)}</CapButton> : ''}
+          </div>
+        );
+      } else {
+        content = template && template.versions && template.versions.base ? template.versions.base['sms-editor'] : '';
+        for (let idx = 2; idx <= 5; idx += 1) {
+          if ((content === '' || !content) && template && template.versions && template.versions.base && template && template.versions && template.versions.base[`sms-editor${idx}`]) {
+            content = template.versions.base[`sms-editor${idx}`];
+          }
+        }
+        temp.content = (
+          <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={() => this.handlePreviewClick(template)} className="preview-button" type="cancel">{this.props.intl.formatMessage(messages.previewButton)}</CapButton> : ''}
+          </div>
+        );
+      }
+      let availableTemplates = "Android";
+      if (template.versions && template.versions.base && template.versions.base.ANDROID && template.versions.base.IOS) {
+        availableTemplates = `${availableTemplates} & IOS`;
+      } else if (template.versions && template.versions.base && template.versions.base.IOS) {
+        availableTemplates = 'iOS';
+      }
+      let deleteOption = this.props.intl.formatMessage(messages.deleteButton);
+      if (this.state.channel.toLowerCase() === 'wechat' && !template.definition) {
+        deleteOption = this.props.intl.formatMessage(messages.unMapButton);
+      }
+      if (!layoutSelection) {
+        temp.footer = (
+          <div className="footer-container">
+            <div className="card-title">
+              <span className="template-name" style={{ fontWeight: `${this.state.channel.toLowerCase() === 'wechat' ? '400' : '600'}` }}>
+                { template && template.versions && template.versions.history && template.versions.history.length > 1 && this.state.channel.toLowerCase() !== 'mobilepush' && <i style={{fontSize: '16px', margin: '0 8px 0 0', verticalAlign: 'middle'}} className="material-icons">filter_none</i>}
+                {template.name}
+              </span>
+              {this.props.location.query.type !== 'embedded' && <CapPopover
+                trigger="click"
+                content={
+                  <div className="popover-content">
+                    {this.state.channel !== 'wechat' && <div className="popover-action-container">
+                      <span onClick={() => this.duplicateTemplate(template)} className="popover-action" style={{cursor: 'pointer', padding: '8px 0px'}}>{this.props.intl.formatMessage(messages.duplicateButton)}</span>
+                    </div>}
+                    <div className="popover-action-container">
+                      <span onClick={() => this.toggleDeleteTemplateModal(template)} className="popover-action" style={{cursor: 'pointer', padding: '8px 0px'}}>{deleteOption}</span>
+                    </div>
+                  </div>
+                }
+                placement="bottomRight"
+                >
+                <i className="material-icons options-icon">&#xE5D4;</i>
+              </CapPopover>}
+            </div>
+            {this.state.channel.toLowerCase() === "mobilepush" ?
+              <p className="card-detail">{availableTemplates}</p>
+              :
+              <p className="card-detail">{this.props.intl.formatMessage(messages.uploadedAt)}: {updateDateTime}</p>
+            }
+          </div>
+        );
+      }
+      items.push(temp);
+      return true;
+    });
+    return items;
+  };
+
+  toggleEmailPreview = () => {
+    this.setState({ showHtmlPreview: !this.state.showHtmlPreview }, () => {
+      if (!this.state.showHtmlPreview) {
+        this.setState({previewTemplate: {}});
+      }
+    });
+  };
+
+  changePreviewDevice = (device) => {
+    this.setState({ device });
+  };
+  //Gets called only when creatives gets used as node library
+  isEnabledInLibraryModule = (property) => {
+    if (this.props.location.query.type === "embedded" && this.props.location.query.module === "library") {
+      switch (property) {
+        case "showAccountSelection":
+          return (this.props.route && (this.props.route.name.toLowerCase() === "wechat" || this.props.route.name.toLowerCase() === "mobilepush"));
+        case "setLocale":
+          return true;
+        case "callCreateFromProps":
+          return true;
+        case "callSelectFromProps":
+          return true;
+        default:
+          return false;
+      }
+    } else {
+      return false;
+    }
+  }
+  isFullMode = () => this.props.location.query.type !== "embedded" || this.props.isFullMode
+  isCreateDisabled = () => {
+    let isDisabled = this.isLoading();
+    if (this.state.channel === MOBILE_PUSH || this.state.channel === WECHAT) {
+      isDisabled = isDisabled || _.isEmpty(this.props.Templates.selectedWeChatAccount);
+    }
+    return isDisabled;
+  }
+
+
+  isLoading = () => {
+    const lineLoader = (this.props.Templates.getAllTemplatesInProgress && this.state.channel.toLowerCase() === 'line');
+    const smsLoader = (this.props.Templates.getAllTemplatesInProgress && this.state.channel.toLowerCase() === 'sms');
+    const wechatLoader = (((this.state.selectedAccount !== '' && this.props.Templates.getAllTemplatesInProgress) || (this.props.Templates.fetchingWeCrmAccounts)) && this.state.channel.toLowerCase() === 'wechat');
+    const mobilePushLoader = (((this.props.Templates.getAllTemplatesInProgress) || (this.props.Templates.fetchingWeCrmAccounts)) && this.state.channel.toLowerCase() === 'mobilepush');
+    const emailLoader = ((this.props.Templates.getAllTemplatesInProgress || this.props.Templates.sendingFile) && this.state.channel.toLowerCase() === 'email');
+    const ebillLoader = ((this.props.Templates.getAllTemplatesInProgress || this.props.Templates.sendingFile) && this.state.channel.toLowerCase() === 'ebill');
+    const isLoading = ((wechatLoader !== undefined) ? wechatLoader : false) ||
+      (smsLoader !== undefined ? smsLoader : false) ||
+      (emailLoader !== undefined ? emailLoader : false) ||
+      (ebillLoader !== undefined ? ebillLoader : false) ||
+      (mobilePushLoader !== undefined ? mobilePushLoader : false) ||
+      (lineLoader !== undefined ? lineLoader : false);
+    return isLoading;
+  }
+  renderEmailPreviewModal() {
+    const slideboxContent = (
+      <div style={{height: "75vh", width: '55vw'}}>
+        <iframe />
+      </div>
+    );
+
+    return (
+      <CapSlideBox
+        header={this.state.previewTemplate.name}
+        content={slideboxContent}
+        show={this.state.showEmailPreviewModal}
+        handleClose={this.toggleImagePreview}
+        width={60}
+      />
+    );
+  }
+  renderDeleteConfirmationModal = () => {
+    const modal =
+    (<Modal
+      visible={this.state.showModal}
+      title={"Alert"}
+      onOk={this.handleOk}
+      onCancel={this.handleCancel}
+      footer={[
+        <CapButton key="back" onClick={this.handleCancel}>{this.props.intl.formatMessage(messages.cancelText)}</CapButton>,
+        <CapButton key="submit" type="primary" id="delete-version" onClick={this.handleOk}>
+          {this.props.intl.formatMessage(messages.yesText)}
+        </CapButton>,
+      ]}
+    >
+      {this.props.intl.formatMessage(messages.templateDeleteConfirm)}
+    </Modal>);
+    return modal;
+  };
+  render() {
+    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) {
+              accountOptions.push(
+                { key: this.state.channel.toUpperCase() === "MOBILEPUSH" ? account.id : account.uuid,
+                  label: account.name,
+                  value: account.name,
+                }
+              );
+            } else if (this.props.location.query.module && (this.state.channel.toUpperCase() === "WECHAT" || this.state.channel.toUpperCase() === "MOBILEPUSH")) {
+              accountOptions.push(
+                {
+                  key: this.state.channel.toUpperCase() === "MOBILEPUSH" ? account.id : account.uuid,
+                  value: account.name,
+                  label: account.name,
+                }
+              );
+            }
+          } else {
+            accountOptions.push(
+              {
+                key: this.state.channel.toUpperCase() === "MOBILEPUSH" ? account.id : account.uuid,
+                value: account.name,
+                label: account.name,
+              }
+            );
+          }
+        }
+      });
+    }
+    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'}}
+          />
+           }
+      </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>);
+    //   }
+    // }
+
+    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>);
+    if (this.state.channel.toLowerCase() === 'email' || this.state.channel.toLowerCase() === 'ebill') {
+      if (this.state.previewTemplate && this.state.previewTemplate.name !== '') {
+        previewHeader = this.state.previewTemplate.name;
+      }
+    }
+
+    const cmsTemplateSelectionContent = (
+      <CardGrid
+        className={""}
+        listItem={this.populateTemplatesList(this.props.Templates.cmsTemplates, false, true)}
+        // filterContent={filterContent}
+        onHoverItem={this.handleOnHoverItem}
+        onItemClick={this.handleEdmDefaultTemplateSelection}
+        colNumber={2}
+      >
+      </CardGrid>
+    );
+    const filterContent = (
+      <div className="action-container">
+        <CapInput.Search
+          className="search-text"
+          style={{width: '210px'}}
+          placeholder={this.props.intl.formatMessage(messages.searchText)}
+          value={this.state.searchText}
+          onChange={(e) => this.searchTemplate(e.target.value)}
+        />
+        <div style={{display: "flex", justifyContent: "space-between", alignItems: 'center'}}>
+          {(this.props.location.query.type === 'embedded' ) ? pageHeaderDvs : pageHeader}
+          <CapButton
+            type={"primary"}
+            disabled={this.isCreateDisabled()}
+            style={{marginLeft: '8px'}}
+            onClick={this.createTemplate} >
+            { this.props.intl.formatMessage(messages.createNewActionButton) }
+          </CapButton>
+        </div>
+
+      </div>
+    );
+    let htmlPreviewContent = "";
+    if (this.state.channel.toLowerCase() === 'ebill') {
+      htmlPreviewContent = this.state.previewTemplate && this.state.previewTemplate.versions && this.state.previewTemplate.versions.base && this.state.previewTemplate.versions.base['ebill-editor'];
+    } else if (this.state.channel.toLowerCase() === 'email') {
+      htmlPreviewContent = this.state.previewTemplate && this.state.previewTemplate.versions && this.state.previewTemplate.versions.base && this.state.previewTemplate.versions.base[this.props.Global.currentOrgDetails.basic_details.base_language ? this.props.Global.currentOrgDetails.basic_details.base_language : 'en']['template-content'];
+    }
+
+
+    const creativesParams = this.getCreativesParams();
+    const {route} = this.props;
+    const loadingTip = (this.props.Templates.sendingFile && (this.state.channel.toLowerCase() === 'email' || this.state.channel.toLowerCase() === 'ebill')) ? this.props.intl.formatMessage(messages.uploadingFile) : this.props.intl.formatMessage(messages.gettingAllTemplates);
+    return (
+      <div>
+        <input type="file" id="filename" style={{ display: 'none'}} accept=".zip, .html, .htm" onChange={(event) => this.handleFileUpload(event, {files: event.target.files})} />
+
+
+        <CapRow>
+          <Pagination onPageChange={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 && <div style={{ height: '65vh', textAlign: 'center', lineHeight: '65vh'}}>
+            <span style={{ fontFamily: 'open-sans', fontSize: '24px', color: '#B5B5B5'}}>{this.props.intl.formatMessage(messages.noTemplatesMessage)}</span>
+            </div>}
+        </CapRow>
+        <CapRow>
+          {!_.isEmpty(creativesParams.mode) && isFullMode && //creatives container for fullmode
+          <CreativesContainer
+            key={creativesParams.mode}
+            messageDetails={{type: "default"}}
+            creativesMode={creativesParams.mode}
+            messages={messages}
+            isFullMode={isFullMode}
+            templateData={creativesParams}
+            getCreativesData={this.onCreateComplete}
+            channel={route.name.toUpperCase()}
+            handleCloseCreatives={this.onCreateComplete}/>
+          }
+        </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}
+            content={htmlPreviewContent}
+            show={this.state.showHtmlPreview}
+            device={this.state.device}
+            handleClose={this.toggleEmailPreview}
+            changePreviewDevice={this.changePreviewDevice}
+            lastModified={this.state.previewTemplate ? this.state.previewTemplate.updatedAt : ''}
+            updatedByName={commonUtil.getUserNameById(parseInt(this.state.previewTemplate.updatedBy, 10), commonUtil.getMergedUserList(this.props.Templates.userList))}
+          />}
+          <CapSlideBox
+            header={(<h3>{this.props.intl.formatMessage(messages.layoutSelection)}</h3>)}
+            width={60}
+            content={cmsTemplateSelectionContent}
+            show={this.state.showEdmEmailTemplates}
+            handleClose={this.toggleEdmEmailTemplateSelection}
+            loadingText={"Loading EDM Templates"}
+            isLoading={this.props.Templates.getCmsTemplatesInProgress}
+            />
+          {this.renderDeleteConfirmationModal()}
+        </CapRow>
+
+      </div>
+    );
+  }
+}
+
+Templates.propTypes = {
+  actions: PropTypes.object.isRequired,
+  smsActions: PropTypes.object,
+  mobilepushActions: PropTypes.object,
+  smsEditActions: PropTypes.object,
+  ebillActions: PropTypes.object,
+  emailActions: PropTypes.object,
+  TemplatesList: PropTypes.array,
+  Templates: PropTypes.object,
+  route: PropTypes.object,
+  Create: PropTypes.object,
+  location: PropTypes.object,
+  globalActions: PropTypes.object,
+  intl: intlShape.isRequired,
+  Global: PropTypes.object,
+  createNew: PropTypes.func,
+  onSelectTemplate: PropTypes.func,
+  lineActions: PropTypes.object,
+  isFullMode: PropTypes.bool,
+  handlePeviewTemplate: PropTypes.func,
+  router: PropTypes.object,
+};
+
+const mapStateToProps = createStructuredSelector({
+  Templates: makeSelectTemplates(),
+  TemplatesList: makeSelectTemplatesResponse(),
+  Create: makeSelectCreateSms(),
+  CreateMobilePush: makeSelectCreateMobilePush(),
+  CreateEbill: makeSelectCreateEbill(),
+  Edit: makeSelectEdit(),
+  EmailCreate: makeSelectCreateEmail(),
+  Global: makeSelectAuthenticated(),
+  Line: makeSelectLine(),
+});
+
+function mapDispatchToProps(dispatch) {
+  return {
+    actions: bindActionCreators(actions, dispatch),
+    smsActions: bindActionCreators(smsActions, dispatch),
+    mobilepushActions: bindActionCreators(mobilepushActions, dispatch),
+    smsEditActions: bindActionCreators(smsEditActions, dispatch),
+    ebillActions: bindActionCreators(ebillActions, dispatch),
+    emailActions: bindActionCreators(emailActions, dispatch),
+    globalActions: bindActionCreators(globalActions, dispatch),
+    lineActions: bindActionCreators(lineActions, dispatch),
+  };
+}
+
+export default UserIsAuthenticated(connect(mapStateToProps, mapDispatchToProps)(injectIntl(Templates)));