@capillarytech/creatives-library 8.0.136 → 8.0.137-alpha.1

package/containers/Templates/index.js

@@ -1,1756 +0,0 @@
-/*
- *
- * 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));