@capillarytech/creatives-library 8.0.136-alpha.4 → 8.0.136-beta.3

package/containers/Templates/index.js

@@ -0,0 +1,1756 @@
+/*
+ *
+ * Templates
+ *
+ */
+
+import PropTypes from 'prop-types';
+
+import React from 'react';
+import { connect } from 'react-redux';
+import Helmet from 'react-helmet';
+import { injectIntl, intlShape } from 'react-intl';
+import { createStructuredSelector } from 'reselect';
+import moment from "moment";
+import _ from 'lodash';
+import { bindActionCreators, compose } from 'redux';
+import { Row, Select, Spin, Dropdown, Col, Breadcrumb, Menu, Modal} from 'antd';
+import { CapInput, CapButton, CapPopover, CapSelect } from '@capillarytech/cap-react-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 PreviewSideBar from '../../components/PreviewSideBar';
+import './_templates.scss';
+import * as globalActions from '../../containers/Cap/actions';
+import { makeSelectAuthenticated } from '../Cap/selectors';
+import {getMessageObject} from '../../utils/messageUtils';
+import * as commonUtil from '../../utils/common';
+import SlideBox from '../../components/SlideBox';
+import Pagination from '../../components/Pagination';
+import EmailPreview from '../../components/EmailPreview';
+import WechatRichmediaTemplatePreview from '../../components/TemplatePreview/WechatRichmediaTemplatePreview';
+import { EMAIL } from '../../v2Containers/App/constants';
+import injectSaga from '../../utils/injectSaga';
+import injectReducer from '../../utils/injectReducer';
+import { templateSaga } from './sagas';
+import { createSmsSaga } from '../Sms/Create/sagas';
+import { editSmsSaga } from '../Sms/Edit/sagas';
+import { emailSaga } from '../Email/sagas';
+import reducer from './reducer';
+import mobilePushCreateReducer from '../MobilePush/Create/reducer';
+import lineCreateReducer from '../Line/Create/reducer';
+import { ebillSaga } from '../Ebill/sagas';
+import { lineCreateSaga } from '../Line/Create/sagas';
+import { duplicateMPushSaga } from '../MobilePush/Create/sagas';
+import { FALSE, TRUE, TYPE_EMBEDDED } from './constants';
+import { DEFAULT } from '../../v2Containers/Cap/constants';
+
+const MenuItem = Menu.Item;
+const Option = Select.Option;
+const BreadcrumbItem = Breadcrumb.Item;
+
+export class Templates extends React.Component { // eslint-disable-line react/prefer-stateless-function
+  constructor(props) {
+    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,
+    };
+    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.toLowerCase()) {
+        case "sms":
+          channel = 'Sms';
+          break;
+        case "mobilepush":
+          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 });
+      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;
+            }
+          }
+        });
+        if (!_.isEmpty(selectedAccount)) {
+          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() === "sms" && nextProps.Create && nextProps.Create.response && nextProps.Create.response.templateId && nextProps.Create.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();
+    }
+    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.createResponse && nextProps.EmailCreate.createResponse.templateId && nextProps.EmailCreate.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.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.querytype;
+      if (this.isEnabledInLibraryModule("callCreateFromProps")) {
+        this.props.createNew();
+        return;
+      }
+      this.props.router.push({
+        pathname: `/${(nextProps.route.name || '').toLowerCase()}/create`,
+        search: commonUtil.createQueryString(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.setState({defaultAccount: false});
+  }
+
+  onAccountSelect(value, option) {
+
+    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;
+      }
+
+      this.getAllTemplates({params, resetPage: true});
+    });
+  }
+
+  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);
+  };
+
+  getMappedLocale = (locale) => {
+    const map = {
+      'en': 'en',
+      'zh-cn': 'zh',
+    };
+    return map[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);
+      });
+    }
+  };
+
+  getCurrentWindow(e) {
+
+    const response = {
+      action: e.action,
+      value: 'templates',
+      direction: e.value,
+    };
+    parent.postMessage(JSON.stringify(response), '*');
+  }
+
+  skipTemplateSelection = (e) => {
+
+    const type = this.props.location.query.type;
+    const module = (type === 'embedded') ? this.props.location.query.module : 'default';
+    if (this.state.channel.toLowerCase() === 'email') {
+      const isLanguageSupport = this.props.location.query.isLanguageSupport || false;
+      this.props.router.push({
+        pathname: `/email/view`,
+        search: commonUtil.createQueryString(type === 'embedded' ? {type: 'embedded', module, isLanguageSupport} : {})
+      });
+    } else if (this.state.channel.toLowerCase() === 'sms') {
+      this.props.router.push({
+        pathname: `/sms/view`,
+        search: commonUtil.createQueryString(type === 'embedded' ? {type: 'embedded', module} : {})
+      });
+    } else if (this.state.channel.toLowerCase() === 'mobilepush') {
+      this.props.router.push({
+        pathname: `/mobilepush/edit/${e.template_id}`,
+        search: commonUtil.createQueryString(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}`,
+          search: commonUtil.createQueryString(type === 'embedded' ? {type: 'embedded', module, source_account_id: e.source_account_id} : {})
+        });
+      } else {
+        this.props.router.push({
+          pathname: `/wechat/edit/${e.template_id}`,
+          search: commonUtil.createQueryString(type === 'embedded' ? {type: 'embedded', module, source_account_id: e.source_account_id} : {})
+        });
+      }
+    } else if (this.state.channel.toLowerCase() === 'line') {
+      this.props.router.push({
+        pathname: `/line/view/${e.msg_type}/`,
+        search: commonUtil.createQueryString(type === 'embedded' ? {type: 'embedded', module, account_id: e.account_id } : {})
+      });
+    }
+    this.setState({loading: true});
+  }
+
+  handleMenuAction = (item = {}, key) => {
+
+    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';
+    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') {
+      this.props.router.push({
+        pathname: `/${channel === 'line' ? 'line' : 'mobilepush'}/create/text`,
+        search: commonUtil.createQueryString(type === 'embedded' ? {type: 'embedded', module} : {module},)
+      });
+    } else if (item === 'imageTemplate') {
+      this.props.router.push({
+        pathname: `/${channel === 'line' ? 'line' : 'mobilepush'}/create/image`,
+        search: commonUtil.createQueryString(type === 'embedded' ? {type: 'embedded', module} : {module})
+      });
+    }
+  }
+
+  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.props.router.push({
+          pathname: `/${this.props.route.name.toLowerCase()}/create`,
+          search: commonUtil.createQueryString(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=""/>
+              </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=""/>
+              </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 "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() : '';
+    if (this.isEnabledInLibraryModule("callCreateFromProps")) {
+      this.props.createNew();
+    } else if (ev.key && (ev.key.toLowerCase() === "text" || ev.key.toLowerCase() === "image")) {
+      this.props.router.push({
+        pathname: `/${channel === 'line' ? 'line' : 'mobilepush'}/create/${ev.key.toLowerCase()}`,
+        search: commonUtil.createQueryString(type === 'embedded' ? {type: 'embedded', module} : {module}),
+      });
+    } else {
+      this.props.router.push({
+        pathname: `/${this.state.channel.toLowerCase()}/create`,
+        search: commonUtil.createQueryString(type === 'embedded' ? {type: 'embedded', module} : {module}),
+      });
+    }
+  }
+
+  menuOnClickEvent(ev) {
+    let type = this.props.location.query.type;
+    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`,
+            search: commonUtil.createQueryString(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(`/wechat/richmedia/create?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 = `${this.props.intl.formatMessage(messages.copyOf)} ${template.name} ${moment().format('MM-DD-YYYY HH:mm:ss')}`;
+    delete duplicateObj._id;
+    if (this.state.channel.toLowerCase() === "sms") {
+      this.props.smsActions.createTemplate(duplicateObj);
+    } 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, (response) => {
+        const params = {
+          name: this.state.searchText,
+          sortBy: this.state.sortBy,
+        };
+        this.getAllTemplates({params, resetPage: true});
+      });
+    }
+  }
+
+  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 template = _.find(this.props?.Templates?.cmsTemplates, (template = []) => {
+        return template?.versions && template?.versions?.base && _.get(template, 'versions.base.drag_drop_id') === id;
+      });
+      const {type,module = DEFAULT} = this.props?.location?.query;
+    const isLanguageSupport = this.props?.location?.query?.isLanguageSupport === TRUE;
+    const isEdmSupport = this.props?.location?.query?.isEdmSupport !== FALSE;
+      let getQuery = '';
+
+      if (template) {
+    this.props.actions.setEdmTemplate({
+      ...template,
+      isEdmSupport,
+      isLanguageSupport,
+          projectId: template?.versions?.base?.drag_drop_id,
+        });
+
+        if (this.state.channel && this.state.channel.toLowerCase() === EMAIL) {
+          getQuery = (type === TYPE_EMBEDDED) ? {
+            type: TYPE_EMBEDDED,
+      module,
+      isLanguageSupport: isLanguageSupport ? 1 : 0,
+      isEdmSupport: isEdmSupport ? 1 : 0,
+            projectId: template?.versions?.base?.drag_drop_id,
+    } : {
+      module,
+            isLanguageSupport: isLanguageSupport ? 1 : 0,
+            isEdmSupport: isEdmSupport ? 1 : 0,
+            projectId: template?.versions?.base?.drag_drop_id,
+    };
+        } else {
+          getQuery = (type === TYPE_EMBEDDED) ? {type: TYPE_EMBEDDED, module} : {module};
+        }
+
+    if (this.isEnabledInLibraryModule("callCreateFromProps")) {
+      this.props.createNew();
+      return;
+    }
+
+    this.props.router.push({
+      pathname: `/${this.state.channel.toLowerCase()}/create`,
+          search: commonUtil.createQueryString(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}`;
+      }
+      //getQuery
+      this.props.router.push({
+        pathname: pathName,
+        search: commonUtil.createQueryString(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, EMAIL);
+    } 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>{this.props.intl.formatMessage(messages.uploadFile)}</span></button>
+              <button type="button" className="ant-btn cap-button preview-button ant-btn-danger" onClick={() => this.handleBlankTemplateAction('editor')}><span>{this.props.intl.formatMessage(messages.useEditor)}</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,
+        }
+      );
+    } /*else if (type === 'embedded' && this.state.channel.toLowerCase() === "mobilepush") {
+      items.push({
+        id: 'blankTemplate',
+        content: <div className={this.state.clickedItem === 'blankTemplate' ? 'sms-text-blurred' : ''}>
+          <div>
+            <div
+              style={{textAlign: 'center', lineHeight: '260px'}}
+              className="sms-text">{this.props.intl.formatMessage(messages.blankTemplate)}</div>
+          </div>
+          {this.state.clickedItem === 'blankTemplate' && <CapButton
+            onClick={() => { this.createTemplate({key: 'text'}); }} key="text" className="edit-button" type="secondary">Text</CapButton>}
+          {this.state.clickedItem === 'blankTemplate' && <CapButton
+            onClick={() => { this.createTemplate({key: 'image'}); }} key="image" className="preview-button" type="secondary">image</CapButton>}
+        </div>,
+      });
+    }*/
+    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' && (template.type || '').toLowerCase() === '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={(event) =>{this.handleEdmDefaultTemplateSelection(true, template?.versions?.base?.drag_drop_id); event.stopPropagation();}} 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' && template.type && template.type.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;
+    }
+  }
+
+  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;
+  }
+  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;
+  };
+
+
+  renderEmailPreviewModal() {
+    const slideboxContent = (
+      <div style={{height: "75vh", width: '55vw'}}>
+        <iframe />
+      </div>
+    );
+
+    return (
+      <SlideBox
+        header={this.state.previewTemplate.name}
+        content={slideboxContent}
+        show={this.state.showEmailPreviewModal}
+        handleClose={this.togglePreview}
+        width={60}
+      />
+    );
+  }
+  render() {
+    let pageHeaderText = '';
+    const moduleName = this.props.location.query.module;
+    if (this.props.location.query.type !== 'embedded') {
+      if (this.state.channel.toUpperCase() === 'WECHAT') {
+        pageHeaderText = this.props.intl.formatMessage(messages.wechatHeader);
+      } else if (this.state.channel.toUpperCase() === 'SMS') {
+        pageHeaderText = this.props.intl.formatMessage(messages.smsHeader);
+      } else if (this.state.channel.toUpperCase() === 'EMAIL') {
+        pageHeaderText = this.props.intl.formatMessage(messages.emailHeader);
+      } else if (this.state.channel.toUpperCase() === 'MOBILEPUSH') {
+        pageHeaderText = this.props.intl.formatMessage(messages.mobilepushHeader);
+      } else if (this.state.channel.toUpperCase() === 'EBILL') {
+        pageHeaderText = this.props.intl.formatMessage(messages.ebillHeader);
+      } else if (this.state.channel.toUpperCase() === 'LINE') {
+        pageHeaderText = this.props.intl.formatMessage(messages.lineHeader);
+      }
+    }
+    const options = [
+      {
+        value: "Most Recent",
+        label: this.props.intl.formatMessage(messages.mostRecentOption),
+      },
+      {
+        value: "Alphabetically",
+        label: this.props.intl.formatMessage(messages.alphabeticallyOption),
+      },
+    ];
+    const typeOptions = [
+      {
+        value: "All",
+        label: this.props.intl.formatMessage(messages.all),
+      },
+      {
+        label: this.props.intl.formatMessage(messages.text),
+        value: 'Text',
+      },
+      {
+        label: this.props.intl.formatMessage(messages.image),
+        value: "Image",
+      },
+    ];
+    const filterContent = (
+      <div className="action-container">
+        <CapInput
+          className="search-text"
+          style={{width: '210px'}}
+          placeholder={this.props.intl.formatMessage(messages.searchText)}
+          prefix={<i className="material-icons" style={{ margin: '0', fontSize: '16px'}}>search</i>}
+          value={this.state.searchText}
+          onChange={(e) => this.searchTemplate(e.target.value)}
+        />
+        <div className="action-container">
+          <div style={{display: "flex", justifyContent: "space-between", alignItems: 'center'}}>
+            <div className="select-font">{this.props.intl.formatMessage(messages.sortBy)}</div>
+            <CapSelect key={"select-account"} style={{width: '120px', marginLeft: '16px', minWidth: 'initial'}} defaultValue="Most Recent" onChange={this.handleSortBy} options={options}>
+            </CapSelect>
+          </div>
+          { (this.state.channel.toLowerCase() === 'mobilepush' || this.state.channel.toLowerCase() === 'line') &&
+            <div style={{display: "flex", justifyContent: "space-between", alignItems: 'center', marginLeft: '16px'}}>
+              <div className="select-font">{this.props.intl.formatMessage(messages.type)}</div>
+              <CapSelect key={"select-type"} style={{width: '120px', marginLeft: '16px', minWidth: 'initial'}} defaultValue="All" onChange={this.handleType} options={typeOptions}>
+              </CapSelect>
+            </div>
+          }
+        </div>
+      </div>
+    );
+    const accountOptions = [];
+    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(
+                <Option key={this.state.channel.toUpperCase() === "MOBILEPUSH" ? account.id : account.uuid} value={account.name}>{account.name}</Option>
+              );
+            } else if (this.props.location.query.module && (this.state.channel.toUpperCase() === "WECHAT" || this.state.channel.toUpperCase() === "MOBILEPUSH")) {
+              accountOptions.push(
+                <Option key={this.state.channel.toUpperCase() === "MOBILEPUSH" ? account.id : account.uuid} value={account.name}>{account.name}</Option>
+              );
+            }
+          } else {
+            accountOptions.push(
+              <Option key={this.state.channel.toUpperCase() === "MOBILEPUSH" ? account.id : account.uuid} value={account.name}>{account.name}</Option>
+            );
+          }
+        }
+      });
+    }
+    let templateText = this.state.channel.toUpperCase() === 'WECHAT' ? this.props.intl.formatMessage(messages.selectWechatHeader) : this.props.intl.formatMessage(messages.selectSmsHeader);
+
+    let titleText = this.state.channel.toUpperCase() === 'SMS' ? this.props.intl.formatMessage(messages.smsChannelTemplatesHeader) : this.props.intl.formatMessage(messages.wechatChannelTemplatesHeader);
+    if (this.state.channel.toUpperCase() === "MOBILEPUSH") {
+      templateText = this.props.intl.formatMessage(messages.mobilePushChannelTemplatesHeader);
+      titleText = this.props.intl.formatMessage(messages.mobilePushChannel);
+    } else if (this.state.channel.toUpperCase() === "EMAIL") {
+      templateText = this.props.intl.formatMessage(messages.emailChannelTemplatesHeader);
+      titleText = this.props.intl.formatMessage(messages.emailChannel);
+    } else if (this.state.channel.toUpperCase() === "EBILL") {
+      templateText = this.props.intl.formatMessage(messages.ebillChannelTemplatesHeader);
+      titleText = this.props.intl.formatMessage(messages.ebillChannel);
+    } else if (this.state.channel.toUpperCase() === "LINE") {
+      templateText = this.props.intl.formatMessage(messages.lineChannelTemplatesHeader);
+      titleText = this.props.intl.formatMessage(messages.lineChannel);
+    }
+    const pageHeader = (
+      <div>
+        {(this.props.location.query.type !== 'embedded') ? `${pageHeaderText}` : templateText}
+        {(this.isEnabledInLibraryModule("showAccountSelection") || (((this.state.channel.toUpperCase() === 'WECHAT' || this.state.channel.toUpperCase() === "MOBILEPUSH") && (this.props.location.query.type !== 'embedded') && !_.isEmpty(this.props.Templates.weCrmAccounts)))) &&
+          <Select className="selectAccount" onSelect={this.onAccountSelect} value={this.props.Templates.selectedWeChatAccount ? this.props.Templates.selectedWeChatAccount.name : undefined} placeholder={this.props.intl.formatMessage(messages.selectAccount)}>
+            {accountOptions}
+          </Select>}
+      </div>
+    );
+    const pageHeaderDvs = (
+      <div>
+        {(this.props.location.query.type === 'embedded' && moduleName === 'dvs') ? `${templateText}` : pageHeaderText}
+        {((this.state.channel.toUpperCase() === 'WECHAT' || this.state.channel.toUpperCase() === "MOBILEPUSH") && (this.props.location.query.type === 'embedded') && !_.isEmpty(this.props.Templates.weCrmAccounts)) &&
+        <Select className="selectAccount" onSelect={this.onAccountSelect} value={this.props.Templates.selectedWeChatAccount ? this.props.Templates.selectedWeChatAccount.name : undefined} placeholder={this.props.intl.formatMessage(messages.selectAccount)}>
+          {accountOptions}
+        </Select>}
+      </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'}}>{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.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'}}>{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 {
+        actionButton = (<CapButton onClick={this.createTemplate}>{this.state.channel.toUpperCase() === 'SMS' ? this.props.intl.formatMessage(messages.createSmsActionButton) : 'Create SMS'}</CapButton>);
+      }
+    }
+
+
+    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>
+    );
+
+    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 templateList = this.populateTemplatesList(this.props.TemplatesList, true);
+
+    const isSearch = this.props.Templates.isSearch;
+    return (
+      <div>
+        <Spin
+          tip={(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)}
+          spinning={this.isLoading()}
+        >
+          <input type="file" id="filename" style={{ display: 'none'}} accept=".zip, .html, .htm" onChange={(event) => this.handleFileUpload(event, {files: event.target.files})} />
+          <Row>
+            <Col>
+              {this.props.location.query.type !== "embedded" &&
+                <Breadcrumb>
+                  <BreadcrumbItem>{this.props.intl.formatMessage(messages.campaigns)}</BreadcrumbItem>
+                  <BreadcrumbItem>{this.props.intl.formatMessage(messages.creatives)}</BreadcrumbItem>
+                  <BreadcrumbItem>{this.props.intl.formatMessage(messages[this.state.channel]) }</BreadcrumbItem>
+                </Breadcrumb>
+              }
+            </Col>
+          </Row>
+          <Row className="template-header-container">
+            <div className="template-header">{(this.props.location.query.type === 'embedded' && moduleName === 'dvs') ? pageHeaderDvs : pageHeader}</div>
+            {actionButton}
+          </Row>
+          <Row>
+            <Helmet
+              title={titleText}
+              meta={[
+                { name: 'description', content: this.props.intl.formatMessage(messages.descriptionTemplates) },
+              ]}
+            />
+            {((templateList && templateList.length > 0) || isSearch) && <Pagination onPageChange={() => {  this.getAllTemplates({getNextPage: true}); }} paginationSelector="pagination-container">
+              <CardGrid
+                className={this.state.channel.toLowerCase() === "mobilepush" ? "mobilepush-templates" : ""}
+                listItem={templateList}
+                filterContent={filterContent}
+                onHoverItem={this.handleOnHoverItem}
+                onItemClick={this.handleOnItemClick}
+                enablePagination
+              >
+              </CardGrid>
+            </Pagination>}
+            {(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>}
+            {(((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>}
+          </Row>
+          <Row>
+            {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}`}
+              />
+              :
+                <PreviewSideBar
+                  showPreview={this.state.previewOpen}
+                  templateData={this.state.previewTemplate}
+                  channel={this.state.channel}
+                  handleClose={this.togglePreview}
+                  onEditClick={this.handleEditClick}
+                  embedded={this.props.location.query.type === 'embedded'}
+                  onDuplicateClick={this.duplicateTemplate}
+                  location={this.props.location}
+                >
+                </PreviewSideBar>
+            }
+            {(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))}
+            />}
+            <SlideBox
+              header={(<h3>{this.props.intl.formatMessage(messages.layoutSelection)}</h3>)}
+              width={60}
+              content={cmsTemplateSelectionContent}
+              show={this.state.showEdmEmailTemplates}
+              handleClose={this.toggleEdmEmailTemplateSelection}
+              loadingText={this.props.intl.formatMessage(messages.loadingEDMTemplates)}
+              isLoading={this.props.Templates.getCmsTemplatesInProgress}
+            />
+            {this.renderDeleteConfirmationModal()}
+          </Row>
+        </Spin>
+      </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,
+  router: 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,
+};
+
+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),
+  };
+}
+
+const withSaga = injectSaga({ key: 'templates', saga: templateSaga });
+const withCreateSmsSaga = injectSaga({ key: 'create', saga: createSmsSaga });
+const withEditSmsSaga = injectSaga({ key: 'edit', saga: editSmsSaga });
+const withEmailSaga = injectSaga({ key: 'email', saga: emailSaga });
+const withEbillSaga = injectSaga({ key: 'ebill', saga: ebillSaga });
+const withMpushSaga = injectSaga({ key: 'mobileCreate', saga: duplicateMPushSaga });
+const withLineCreateSaga = injectSaga({ key: 'line', saga: lineCreateSaga });
+const withReducer = injectReducer({ key: 'templates', reducer });
+const withMPushCreateReducer = injectReducer({ key: 'mobileCreate', reducer: mobilePushCreateReducer });
+const withLineCreateReducer = injectReducer({ key: 'lineTemplates', reducer: lineCreateReducer});
+const withConnect = connect(mapStateToProps, mapDispatchToProps);
+
+export default compose(
+  UserIsAuthenticated,
+  withSaga,
+  withCreateSmsSaga,
+  withEditSmsSaga,
+  withEmailSaga,
+  withMpushSaga,
+  withEbillSaga,
+  withLineCreateSaga,
+  withReducer,
+  withMPushCreateReducer,
+  withLineCreateReducer,
+  withConnect,
+)(injectIntl(Templates));