@capillarytech/creatives-library 1.0.2 → 2.0.1

package/containers/Templates/index.js

@@ -0,0 +1,1593 @@
+/*
+ *
+ * Templates
+ *
+ */
+
+import PropTypes from 'prop-types';
+
+import React from 'react';
+import { connect } from 'react-redux';
+import Helmet from 'react-helmet';
+import { FormattedMessage, injectIntl, intlShape } from 'react-intl';
+import { createStructuredSelector } from 'reselect';
+import moment from "moment";
+import _ from 'lodash';
+import { bindActionCreators } from 'redux';
+import { Row, Select, Spin, Dropdown, Col, Breadcrumb, Menu, Modal} from 'antd';
+import { 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';
+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.mapWechatTemplate = this.mapWechatTemplate.bind(this);
+    this.prepareWeChatPreviewData = this.prepareWeChatPreviewData.bind(this);
+    this.onAccountSelect = this.onAccountSelect.bind(this);
+    this.prepareMobilePushPreviewData = this.prepareMobilePushPreviewData.bind(this);
+  }
+
+  componentWillMount() {
+    if (this.state.channel === '') {
+      let channel = '';
+      console.log('templates props', this.props);
+      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;
+      }
+      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();
+      // }
+    }
+    console.log('added listener templates,', this.props);
+    window.addEventListener("message", this.handleFrameTasks);
+  }
+  componentWillReceiveProps(nextProps) {
+    console.log('nextProps templates', nextProps, this.props.Create);
+    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';
+      }
+      // console.log('Next Props details ', nextProps.route.name, channel);
+      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;
+          }
+          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;
+    }
+    if (this.state.channel.toLowerCase() === "mobilepush" && nextProps.Templates.selectedWeChatAccount) {
+      params.accountId = nextProps.Templates.selectedWeChatAccount.id;
+    }
+    if ((this.state.channel.toLowerCase() === 'wechat' || this.state.channel.toLowerCase() === 'mobilepush') && _.isEmpty(nextProps.Templates.selectedWeChatAccount) && (this.props.location.query.type === 'embedded') && !this.isEnabledInLibraryModule("showAccountSelection")) {
+      let selectedAccount = '';
+      if (_.isEmpty(nextProps.Templates.weCrmAccounts)) {
+        return;
+      }
+      if (this.state.channel.toLowerCase() === 'wechat') {
+        _.forEach(nextProps.Templates.weCrmAccounts, (account) => {
+          if (account.configs && account.configs.is_wecrm_enabled) {
+            if (nextProps.location.query.source_account_id && account.sourceAccountIdentifier === nextProps.location.query.source_account_id) {
+              selectedAccount = account;
+            }
+          }
+        });
+        this.setState({selectedAccount: selectedAccount.name}, () => {
+          params.wecrmId = selectedAccount.configs.wecrm_app_id;
+          params.wecrmToken = selectedAccount.configs.wecrm_token;
+          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) {
+      console.log("delete");
+      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) {
+      console.log('Got html Content ', nextProps.Templates.selectedEmailLayout);
+      const module = this.props.location.query.module ? this.props.location.query.module : 'default';
+      const isLanguageSupport = (this.props.location.query.isLanguageSupport) ? this.props.location.query.isLanguageSupport : true;
+      const isEdmSupport = (this.props.location.query.isEdmSupport !== "false") || false;
+      const type = this.props.location.query.type;
+      if (this.isEnabledInLibraryModule("callCreateFromProps")) {
+        this.props.createNew();
+        return;
+      }
+      this.props.router.push({
+        pathname: `/${nextProps.route.name.toLowerCase()}/create`,
+        query: type === 'embedded' ? {type: 'embedded', module, isLanguageSupport, isEdmSupport} : {module},
+      });
+    }
+
+    if (!nextProps.Templates.sendingFile && !_.isEqual(this.props.Templates.sendingFile, nextProps.Templates.sendingFile) && nextProps.Templates.errorSendingFile) {
+      let errorMessage = this.props.intl.formatMessage(messages.zipUploadFailed);
+      if (nextProps.Templates.errorMessage && nextProps.Templates.errorMessage !== "") {
+        errorMessage = nextProps.Templates.errorMessage;
+      }
+      const message = getMessageObject('error', errorMessage, true);
+      nextProps.globalActions.addMessageToQueue(message);
+    }
+
+    if (!_.isEmpty(nextProps.Templates.templateDetails) && !_.isEqual(nextProps.Templates.templateDetails, this.props.Templates.templateDetails)) {
+      this.setState({previewTemplate: nextProps.Templates.templateDetails});
+    }
+
+    if (nextProps.Templates.weCrmAccounts !== undefined && nextProps.Templates.weCrmAccounts.length === 1 && this.state.defaultAccount && (['wechat', 'mobilepush'].indexOf(this.state.channel.toLowerCase()) > -1)) {
+      const paramsDefault = {
+        name: this.state.searchText,
+        sortBy: this.state.sortBy,
+      };
+      if (this.state.channel.toLowerCase() === 'wechat') {
+        paramsDefault.wecrmId = nextProps.Templates.weCrmAccounts[0].configs.wecrm_app_id;
+        paramsDefault.wecrmToken = nextProps.Templates.weCrmAccounts[0].configs.wecrm_token;
+        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() {
+    console.log('removed listener templates');
+    window.removeEventListener("message", this.handleFrameTasks);
+    this.props.actions.resetTemplateStoreData();
+    // this.setState({defaultAccount: false});
+  }
+
+  onAccountSelect(value, option) {
+    console.log('Selected Account ', 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})]);
+      } 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';
+    console.log('Setting final locale as', locale);
+    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;
+
+    console.log('Get all templates ', this.props.Templates.getAllTemplatesInProgress, resetPage, page, this.state.templatesCount, this.state.perPageLimit, getNextPage);
+    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;
+        }
+        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) {
+    console.log('in sms templates', e);
+    const response = {
+      action: e.action,
+      value: 'templates',
+      direction: e.value,
+    };
+    parent.postMessage(JSON.stringify(response), '*');
+  }
+
+  skipTemplateSelection = (e) => {
+    console.log("vvv", 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`,
+        query: type === 'embedded' ? {type: 'embedded', module, isLanguageSupport} : {},
+      });
+    } else if (this.state.channel.toLowerCase() === 'sms') {
+      this.props.router.push({
+        pathname: `/sms/view`,
+        query: type === 'embedded' ? {type: 'embedded', module} : {},
+      });
+    } else if (this.state.channel.toLowerCase() === 'mobilepush') {
+      this.props.router.push({
+        pathname: `/mobilepush/edit/${e.template_id}`,
+        query: type === 'embedded' ? {type: 'embedded', module, account_id: e.account_id} : {},
+      });
+    } else if (this.state.channel.toLowerCase() === 'wechat') {
+      this.props.router.push({
+        pathname: `/wechat/edit/${e.template_id}`,
+        query: type === 'embedded' ? {type: 'embedded', module, source_account_id: e.source_account_id} : {},
+      });
+    } else if (this.state.channel.toLowerCase() === 'line') {
+      this.props.router.push({
+        pathname: `/line/view/${e.msg_type}/`,
+        query: type === 'embedded' ? {type: 'embedded', module, account_id: e.account_id } : {},
+      });
+    }
+    this.setState({loading: true});
+  }
+
+  handleMenuAction = (item, key) => {
+    console.log('Menu Clicked ', item.key, key);
+    if (item.key.toLowerCase() === 'uploadfile') {
+      document.getElementById('filename').click();
+      console.log('Upload File');
+    } else if (item.key.toLowerCase() === 'useeditor') {
+      console.log('Use Editor');
+      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`,
+        query: type === 'embedded' ? {type: 'embedded', module} : {module},
+      });
+    } else if (item === 'imageTemplate') {
+      this.props.router.push({
+        pathname: `/${channel === 'line' ? 'line' : 'mobilepush'}/create/image`,
+        query: 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;
+    console.log('File Params ', fileExtension);
+    if (supportedZipFormats.indexOf(fileExtension.toLowerCase()) !== -1) {
+      console.log('Zip Format got');
+      this.props.actions.handleZipUpload(files[0]);
+      document.getElementById("filename").value = "";
+    } else if (fileExtension === 'html' || fileExtension === 'htm') {
+      console.log('html Format got');
+      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`,
+          query: type === 'embedded' ? {type: 'embedded', module, isLanguageSupport, isEdmSupport} : {module},
+        });
+      };
+      reader.readAsText(files[0]);
+    } else {
+      const message = getMessageObject('error', this.props.intl.formatMessage(messages.invalidUploadFileError), true);
+      this.props.globalActions.addMessageToQueue(message);
+    }
+  };
+
+  mapWechatTemplate() {
+    // const index = _.findIndex(this.props.Templates.weCRMtemplates, {template_id: key});
+    // console.log('Wechat menu clicked ', item, key, index);
+    const type = this.props.location.query.type;
+    this.props.router.push({
+      pathname: `/wechat/create`,
+      query: type === 'embedded' ? {type: 'embedded'} : {},
+    });
+  }
+
+  prepareWeChatPreviewData(content, templateTags, tagData) {
+    let formattedContent = _.cloneDeep(content);
+    _.forEach(templateTags, (tag) => {
+      if (tagData[tag].value !== undefined) {
+        formattedContent = formattedContent.replace(`{{${tag}.DATA}}`, tagData[tag].value);
+      }
+    });
+    return formattedContent;
+  }
+  prepareMobilePushPreviewData(content) {
+    let result;
+    if (content.ANDROID) {
+      const data = content.ANDROID;
+      const bodyTextStyle = { WebkitLineClamp: 12};
+      if (data.expandableDetails && data.expandableDetails.ctas && ((data.expandableDetails.ctas[0] && data.expandableDetails.ctas[0].actionText) || (data.expandableDetails.ctas[1] && data.expandableDetails.ctas[1].actionText))) {
+        bodyTextStyle.WebkitLineClamp = 10;
+      }
+      if (data.expandableDetails && data.expandableDetails.image) {
+        bodyTextStyle.WebkitLineClamp = 3;
+      }
+      result = (
+        <div className="android-push-message-Container">
+          <div className="message-pop align-left">
+            <div className="message-container">
+              <div className="app-name">
+                <span className="app-icon"></span> {this.props.Templates.selectedWeChatAccount && this.props.Templates.selectedWeChatAccount.name ? this.props.Templates.selectedWeChatAccount.name : "App name"}
+              </div>
+              <div className="title">
+                {data.title}
+              </div>
+              <div className="body-text" style={bodyTextStyle} >
+                {data.message}
+              </div>
+              {data.expandableDetails && data.expandableDetails.image && <div className="body-image">
+                <img src={data.expandableDetails.image} alt={data.expandableDetails.image}/>
+              </div>}
+              {(data.expandableDetails && data.expandableDetails.ctas && ((data.expandableDetails.ctas[0] && data.expandableDetails.ctas[0].actionText) || (data.expandableDetails.ctas[1] && data.expandableDetails.ctas[1].actionText))) &&
+              <div className="actions">
+                {_.map(data.expandableDetails.ctas, (action) => !!action.actionText &&
+                  <span className="action">{action.actionText && action.actionText.toUpperCase()}</span>)}
+              </div>
+              }
+            </div>
+          </div>
+        </div>);
+    } else if (content.IOS) {
+      const data = content.IOS;
+      const bodyTextStyle = { WebkitLineClamp: 11};
+      if (data.expandableDetails && data.expandableDetails.ctas && data.expandableDetails.ctas[0] && data.expandableDetails.ctas[0].actionText) {
+        bodyTextStyle.WebkitLineClamp = 6;
+      }
+      if (data.expandableDetails && data.expandableDetails.image) {
+        bodyTextStyle.WebkitLineClamp = 1;
+      }
+      const iosActions = [];
+      if (data.expandableDetails.ctas && data.expandableDetails.ctas.length) {
+        if (data.expandableDetails.ctas[0].actionLabel) {
+          iosActions.push(<div className="actions">
+            <span className="action">{data.expandableDetails.ctas[0].actionLabel.toUpperCase()}</span>
+          </div>);
+        }
+        if (data.expandableDetails.ctas[0].actionLabel2) {
+          iosActions.push(<div className="actions">
+            <span className="action">{data.expandableDetails.ctas[0].actionLabel2.toUpperCase()}</span>
+          </div>);
+        }
+      }
+
+      result = (
+        <div className="iphone-push-message-Container">
+          <div className="message-pop align-left">
+            <div className="message-container">
+              <div className="app-name">
+                <span className="app-icon"></span>{this.props.Templates.selectedWeChatAccount && this.props.Templates.selectedWeChatAccount.name ? this.props.Templates.selectedWeChatAccount.name : "App name"} <i className="material-icons">close</i>
+              </div>
+              {data.expandableDetails && data.expandableDetails.image && <div className={`body-image ${iosActions.length > 0 ? 'image-half' : ''}`}>
+                <img src={data.expandableDetails.image} alt={data.image}/>
+              </div>}
+              <div className="title">
+                {data.title}
+              </div>
+              <div className="body-text" style={bodyTextStyle}>
+                {data.message}
+              </div>
+              {data.expandableDetails && data.expandableDetails.ctas && data.expandableDetails.ctas[0] && data.expandableDetails.ctas[0].actionText && iosActions}
+            </div>
+          </div>
+        </div>);
+    }
+    return result;
+  }
+  startLoading(ifEdit) {
+    console.log('startLoading', ifEdit);
+    if (ifEdit) {
+      this.setState({loading: true});
+    }
+  }
+
+  startTemplateCreation(data) {
+    console.log('startTemplateCreation');
+    if (data.edit) {
+      const ifUnicode = checkUnicode(data.content);
+      console.log('smsDetails', ifUnicode, data.content);
+      const content = data.content;
+      const tempData = {
+        'sms-editor': content,
+        'unicode-validity': ifUnicode,
+        'base': true,
+      };
+      const formData = {};
+      formData[0] = tempData;
+      formData.base = tempData;
+      this.setState({formData, loading: false});
+    }
+  }
+
+  handleFrameTasks = (e) => {
+    console.log('data listened to is 222', e.data, e);
+    const type = e.data;
+    if (typeof type === 'object') {
+      console.log('received something', type);
+      const action = type.action;
+      switch (action) {
+        case "startTemplateCreation":
+          this.startTemplateCreation(type.value);
+          break;
+        case "startLoading":
+          this.startLoading(type.edit);
+          break;
+        case "getCurrentWindow":
+          this.getCurrentWindow(e.data);
+          break;
+        case "skipTemplateSelection":
+          this.skipTemplateSelection(e.data);
+          break;
+        default:
+          break;
+      }
+    }
+    switch (type) {
+      case "getFormData":
+        this.getFormData(e);
+        break;
+      case "startTemplateCreation":
+        console.log('Starting to create template');
+        //this.getFormData(e);
+        break;
+      case "validateContent":
+        console.log('validating Content');
+        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()}`,
+        query: type === 'embedded' ? {type: 'embedded', module} : {module},
+      });
+    } else {
+      this.props.router.push({
+        pathname: `/${this.state.channel.toLowerCase()}/create`,
+        query: type === 'embedded' ? {type: 'embedded', module} : {module},
+      });
+    }
+  }
+
+  searchTemplate(data) {
+    console.log('searching template', 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;
+      }
+      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;
+      }
+      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 {
+      console.log('toggle Preview ', this.state.previewOpen);
+      this.setState( (prevState) => ({
+        previewOpen: !prevState.previewOpen}));
+    }
+  }
+
+  toggleEdmEmailTemplateSelection = () => {
+    console.log('toggle Selection ', this.state.showEdmEmailTemplates);
+    this.setState( (prevState) => ({
+      showEdmEmailTemplates: !prevState.showEdmEmailTemplates}), () => {
+      this.props.actions.getEdmDefaultTemplates();
+    });
+  };
+
+  deleteTemplate(template) {
+    console.log('deleting template', template);
+    this.props.actions.deleteTemplate(this.state.channel.toUpperCase(), template._id);
+    this.setState({actionTemplate: {}});
+  }
+
+  duplicateTemplate(template) {
+    console.log('dup template', template);
+    const duplicateObj = _.cloneDeep(template);
+    duplicateObj.name = `Copy of ${template.name} ${moment().format('MM-DD-YYYY hh:mma')}`;
+    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);
+    }
+  }
+
+  handleOnHoverItem(isHovering, id) {
+    console.log('parent handle hover', isHovering, id);
+    if (isHovering) {
+      this.setState({hoveredItem: id});
+    } else {
+      this.setState({hoveredItem: ''});
+    }
+  }
+
+  handleOnItemClick(isClicked, id) {
+    console.log('parent handle click', isClicked, id);
+    this.setState({clickedItem: id});
+  }
+
+  handleEdmDefaultTemplateSelection = (isSelected, id) => {
+    if (isSelected) {
+      const data = _.find(this.props.Templates.cmsTemplates, {_id: id});
+      const type = this.props.location.query.type;
+      const module = this.props.location.query.module ? this.props.location.query.module : 'default';
+      const isLanguageSupport = (this.props.location.query.isLanguageSupport) ? this.props.location.query.isLanguageSupport : true;
+      const isEdmSupport = (this.props.location.query.isEdmSupport !== "false") || false;
+      let getQuery = '';
+      console.log('Selected EDM Data ', data);
+      this.props.actions.setEdmTemplate(data);
+      if (this.state.channel && this.state.channel.toLowerCase() === 'email') {
+        getQuery = (type === 'embedded') ? {type: 'embedded', module, isLanguageSupport, isEdmSupport} : {module, isLanguageSupport, isEdmSupport};
+      } else {
+        getQuery = (type === 'embedded') ? {type: 'embedded', module} : {module};
+      }
+      if (this.isEnabledInLibraryModule("callCreateFromProps")) {
+        this.props.createNew();
+        return;
+      }
+      this.props.router.push({
+        pathname: `/${this.state.channel.toLowerCase()}/create`,
+        query: getQuery,
+      });
+    }
+  };
+
+  handleEditClick(e, id, modeType) {
+    console.log('inside props****', this.props);
+    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 = "";
+    console.log('type**** ', type);
+    e.stopPropagation();
+    console.log('clicked', id);
+    this.props.actions.resetTemplateData();
+    let pathName = `/${this.state.channel === 'wechat' ? 'wechat' : 'sms'}/edit/${id}`;
+    if (this.state.channel.toLowerCase() === 'mobilepush') {
+      pathName = `/mobilepush/edit/${id}`;
+    }
+    if (this.state.channel.toLowerCase() === 'email') {
+      pathName = `/email/edit/${id}`;
+    }
+    if (this.state.channel.toLowerCase() === 'email') {
+      getQuery = type === 'embedded' ? {type: 'embedded', module, isLanguageSupport, isEdmSupport} : {module, isEdmSupport};
+    } else {
+      getQuery = type === 'embedded' ? {type: 'embedded', module, account_id: this.props.location.query.account_id} : {module};
+    }
+    if (this.state.channel.toLowerCase() === 'ebill') {
+      pathName = `/ebill/edit/${id}`;
+    }
+    if (this.state.channel.toLowerCase() === 'line') {
+      pathName = `/line/edit/${modeType}/${id}`;
+    }
+    if (this.isEnabledInLibraryModule("callSelectFromProps")) {
+      this.props.onSelectTemplate(id);
+    } else {
+      if (this.state.channel.toLowerCase() === 'ebill') {
+        pathName = `/ebill/edit/${id}`;
+      }
+      this.props.router.push({
+        pathname: pathName,
+        query: getQuery,
+      });
+    }
+  }
+
+  handlePreviewClick(template, modeType) {
+    this.togglePreview();
+    const templateInfo = _.cloneDeep(template);
+    if (this.state.channel.toLowerCase() === 'line') {
+      templateInfo.modeType = modeType;
+    }
+    templateInfo.updatedByName = commonUtil.getUserNameById(parseInt(template.updatedBy, 10), commonUtil.getMergedUserList(this.props.Templates.userList));
+    if (this.state.channel === 'wechat') {
+      templateInfo.content = this.prepareWeChatPreviewData(template.versions.base.content, template.versions.base.Tag, template.versions.base.data);
+    } 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") {
+      console.log('Test ', template);
+      this.props.actions.getTemplateDetails(template._id);
+    } else if (this.state.channel.toLowerCase() === 'ebill') {
+      this.props.actions.getTemplateDetails(template._id);
+    }
+    if (this.state.channel.toLowerCase() !== 'ebill') {
+      this.setState({previewTemplate: templateInfo});
+    }
+  }
+
+  toggleDeleteTemplateModal = (template) => {
+    this.setState({actionTemplate: template}, () => {
+      this.setState({showModal: true});
+    });
+  }
+
+  handleOk = () => {
+    this.setState({showModal: false});
+    this.deleteTemplate(this.state.actionTemplate);
+  }
+
+  handleCancel = () => {
+    this.setState({showModal: false});
+  }
+
+  populateTemplatesList = (data, blankTemplateRequired, layoutSelection) => {
+    if (!data) {
+      return [];
+    }
+    const type = this.props.location.query.type;
+    const items = [];
+    const channel = this.state.channel.toLowerCase();
+
+    if (type === 'embedded' && channel !== 'wechat' && blankTemplateRequired) {
+      let content;
+      if (channel === 'sms') {
+        content = (<div className="sms-template-content" onClick={this.createTemplate}>
+          <div style={{textAlign: 'center', lineHeight: '260px'}} className="sms-text">{this.props.intl.formatMessage(messages.blankTemplate)}</div>
+        </div>);
+      } else if (channel === 'email') {
+        content = (<div className="sms-template-content">
+          <div style={{textAlign: 'center', lineHeight: '260px'}} className="sms-text">
+            <div>
+              <button type="button" className="ant-btn cap-button edit-button ant-btn-ghost" onClick={() => this.handleBlankTemplateAction('uploadFile')}><span>Upload File</span></button>
+              <button type="button" className="ant-btn cap-button preview-button ant-btn-danger" onClick={() => this.handleBlankTemplateAction('editor')}><span>Use Editor</span></button>
+            </div>
+          </div>
+        </div>);
+      } else if (channel === 'mobilepush' || channel === 'line') {
+        content = (<div className="sms-template-content">
+          <div style={{textAlign: 'center', lineHeight: '260px'}} className="sms-text">
+            <div>
+              <button
+                type="button"
+                className="ant-btn cap-button edit-button ant-btn-ghost"
+                onClick={() => this.handleBlankTemplateAction('textTemplate', channel)}>
+                <span>{this.props.intl.formatMessage(messages.textTemplate)}</span>
+              </button>
+              <button
+                type="button"
+                className="ant-btn cap-button preview-button ant-btn-danger"
+                onClick={() => this.handleBlankTemplateAction('imageTemplate', channel)}>
+                <span>{this.props.intl.formatMessage(messages.imageTemplate)}</span>
+              </button>
+            </div>
+          </div>
+        </div>);
+      }
+      items.push(
+        {
+          id: 'blankTemplate',
+          content,
+        }
+      );
+    } /*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) => {
+      // console.log("Templates ", template._id, " Data ", template);
+      const temp = {};
+      // console.log('template ', template);
+      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') {
+        content = this.prepareWeChatPreviewData(template.versions.base.content, template.versions.base.Tag, template.versions.base.data);
+        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>);
+      } else if (this.state.channel.toLowerCase() === 'email' || this.state.channel.toLowerCase() === 'ebill') {
+        // console.log('Data Prepare');
+        console.log('Data Prepare');
+        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%"/>;
+        console.log('qwerty template preview', imgSrc, template, ifPreviewGenerated, content);
+        temp.content = (
+          <div
+            className="sms-template-content">
+            <div className={`sms-text ${this.state.hoveredItem === template._id ? 'sms-text-blurred' : ''}`}>
+              {content}
+            </div>
+            {!layoutSelection && template._id === this.state.hoveredItem ? <CapButton onClick={(e) => this.handleEditClick(e, template._id)} className="edit-button" type="secondary">{type === 'embedded' ? this.props.intl.formatMessage(messages.selectButton) : this.props.intl.formatMessage(messages.editButton)}</CapButton> : ''}
+            {layoutSelection && template._id === this.state.hoveredItem ? <CapButton onClick={() => this.handleEdmDefaultTemplateSelection(true, template._id)} className="select-button" type="secondary">{type === 'embedded' ? this.props.intl.formatMessage(messages.selectDefaultButton) : this.props.intl.formatMessage(messages.selectDefaultButton)}</CapButton> : ''}
+            {!layoutSelection && template._id === this.state.hoveredItem ? <CapButton onClick={() => this.handlePreviewClick(template)} className="preview-button" type="cancel">{this.props.intl.formatMessage(messages.previewButton)}</CapButton> : ''}
+          </div>);
+      } else if (this.state.channel.toLowerCase() === 'mobilepush') {
+        content = this.prepareMobilePushPreviewData(template.versions.base);
+        temp.content = (
+          <div>
+            <div className={`mobilepush-message ${this.state.hoveredItem === template._id ? 'sms-text-blurred' : ''}`}>
+              {content || ''}
+            </div>
+            {template._id === this.state.hoveredItem ? <CapButton onClick={(e) => this.handleEditClick(e, template._id)} className="edit-button" type="secondary">{type === 'embedded' ? this.props.intl.formatMessage(messages.selectButton) : this.props.intl.formatMessage(messages.editButton)}</CapButton> : ''}
+            {template._id === this.state.hoveredItem ? <CapButton onClick={() => this.handlePreviewClick(template)} className="preview-button" type="cancel">{this.props.intl.formatMessage(messages.previewButton)}</CapButton> : ''}
+          </div>);
+      } else if (this.state.channel.toLowerCase() === 'line') {
+        //content = template.versions.base.messages[0].Text;
+        content = {
+          bodyText: template.versions.base.content.messages[0].text ? template.versions.base.content.messages[0].text : '',
+          bodyImage: template.versions.base.content.messages[0].originalContentUrl ? template.versions.base.content.messages[0].originalContentUrl : '',
+        };
+        const modeType = template.versions.base.content.messages[0].type;
+        temp.content = (
+          <div className="sms-template-content" key={template._id}>
+            {content.bodyText ? <div className={`sms-text ${this.state.hoveredItem === template._id ? 'sms-text-blurred' : ''}`}>{content.bodyText || ''}</div> : ''}
+            {content.bodyImage ? <div className={`sms-text ${this.state.hoveredItem === template._id ? 'sms-text-blurred' : ''}`}>
+              <img src={content.bodyImage} role={"presentation"} style={{maxWidth: '100%', objectFit: 'cover', height: '100%'}}/></div> : ''}
+            {template._id === this.state.hoveredItem ? <CapButton onClick={(e) => this.handleEditClick(e, template._id, modeType)} className="edit-button" type="secondary">{type === 'embedded' ? this.props.intl.formatMessage(messages.selectButton) : this.props.intl.formatMessage(messages.editButton)}</CapButton> : ''}
+            {template._id === this.state.hoveredItem ? <CapButton onClick={() => this.handlePreviewClick(template, modeType)} className="preview-button" type="cancel">{this.props.intl.formatMessage(messages.previewButton)}</CapButton> : ''}
+          </div>
+        );
+      } else {
+        content = template && template.versions && template.versions.base ? template.versions.base['sms-editor'] : '';
+        for (let idx = 2; idx <= 5; idx += 1) {
+          if ((content === '' || !content) && template && template.versions && template.versions.base && template && template.versions && template.versions.base[`sms-editor${idx}`]) {
+            content = template.versions.base[`sms-editor${idx}`];
+          }
+        }
+        temp.content = (
+          <div
+            className="sms-template-content">
+            <div className={`sms-text ${this.state.hoveredItem === template._id ? 'sms-text-blurred' : ''}`}>{content || ''}</div>
+            {template._id === this.state.hoveredItem ? <CapButton onClick={(e) => this.handleEditClick(e, template._id)} className="edit-button" type="secondary">{type === 'embedded' ? this.props.intl.formatMessage(messages.selectButton) : this.props.intl.formatMessage(messages.editButton)}</CapButton> : ''}
+            {template._id === this.state.hoveredItem ? <CapButton onClick={() => this.handlePreviewClick(template)} className="preview-button" type="cancel">{this.props.intl.formatMessage(messages.previewButton)}</CapButton> : ''}
+          </div>
+        );
+      }
+      let availableTemplates = "Android";
+      if (template.versions && template.versions.base && template.versions.base.ANDROID && template.versions.base.IOS) {
+        availableTemplates = `${availableTemplates} & IOS`;
+      } else if (template.versions && template.versions.base && template.versions.base.IOS) {
+        availableTemplates = 'iOS';
+      }
+      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'}}>{this.state.channel !== 'wechat' ? this.props.intl.formatMessage(messages.deleteButton) : this.props.intl.formatMessage(messages.unMapButton)}</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;
+    }
+  }
+
+  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.toggleImagePreview}
+        width={60}
+      />
+    );
+  }
+
+  render() {
+    console.log('templates props', this.props);
+    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: "All",
+      },
+      {
+        label: "Text",
+        value: 'Text',
+      },
+      {
+        label: "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">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 = "Select Mobile Push Template";
+      titleText = "Mobile push";
+    } else if (this.state.channel.toUpperCase() === "EMAIL") {
+      templateText = "Select Email Template";
+      titleText = "Email";
+    } else if (this.state.channel.toUpperCase() === "EBILL") {
+      templateText = "Select Ebill Template";
+      titleText = "Ebill";
+    } else if (this.state.channel.toUpperCase() === "LINE") {
+      templateText = "Select Line Template";
+      titleText = "Line";
+    }
+    const pageHeader = (
+      <div>
+        {(this.props.location.query.type !== 'embedded') ? `${pageHeaderText}` : templateText}
+        {(this.isEnabledInLibraryModule("showAccountSelection") || (((this.state.channel.toUpperCase() === 'WECHAT' || this.state.channel.toUpperCase() === "MOBILEPUSH") && (this.props.location.query.type !== 'embedded') && !_.isEmpty(this.props.Templates.weCrmAccounts)))) &&
+          <CapSelect className="selectAccount" onSelect={this.onAccountSelect} value={this.props.Templates.selectedWeChatAccount ? this.props.Templates.selectedWeChatAccount.name : undefined} placeholder={this.props.intl.formatMessage(messages.selectAccount)}>
+            {accountOptions}
+          </CapSelect>}
+      </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)) &&
+        <CapSelect className="selectAccount" onSelect={this.onAccountSelect} value={this.props.Templates.selectedWeChatAccount ? this.props.Templates.selectedWeChatAccount.name : undefined} placeholder={this.props.intl.formatMessage(messages.selectAccount)}>
+          {accountOptions}
+        </CapSelect>}
+      </div>
+    );
+    let actionButton = '';
+    if (this.props.location.query.type !== 'embedded') {
+      if (this.state.channel.toUpperCase() === 'WECHAT') {
+        actionButton = (
+          <CapButton disabled={_.isEmpty(this.props.Templates.selectedWeChatAccount)} onClick={this.mapWechatTemplate} style={{paddingLeft: '24px', paddingRight: '4px'}}>
+            <div style={{display: 'inline-flex'}}>
+              <p style={{ lineHeight: '28px', paddingRight: '24px' }}><FormattedMessage {...messages.mapTemplate} /></p>
+              {/* <p style={{ height: '28px', borderLeft: '1px solid #fff' }}>
+                <i style={{ color: '#fff', paddingTop: '2px', margin: '0'}} className="material-icons">arrow_drop_down</i>
+              </p> */}
+            </div>
+          </CapButton>
+        );
+      } else if (this.state.channel.toUpperCase() === 'EMAIL' || this.state.channel.toUpperCase() === 'EBILL') {
+        const menuItems = [];
+        menuItems.push(<MenuItem key={'uploadFile'}>{this.props.intl.formatMessage(messages.uploadFile)}</MenuItem>);
+        menuItems.push(<MenuItem key={'useEditor'}>{this.props.intl.formatMessage(messages.useEditor)}</MenuItem>);
+        const menu = (
+          <Menu onClick={this.handleMenuAction}>
+            {menuItems}
+          </Menu>
+        );
+        actionButton = (
+          <Dropdown overlay={menu} trigger={["click"]}>
+            <CapButton style={{paddingLeft: '24px', paddingRight: '4px'}}>
+              <div style={{display: 'inline-flex'}}>
+                <p style={{ lineHeight: '32px', paddingRight: '12px' }}>{this.props.intl.formatMessage(messages.newTemplate)}</p>
+                <p style={{ height: '32px' }}>
+                  <i style={{ color: '#fff', lineHeight: '32px', margin: '0'}} className="material-icons">arrow_drop_down</i>
+                </p>
+              </div>
+            </CapButton>
+          </Dropdown>
+        );
+      } else if (this.props.route.name.toLowerCase() === "mobilepush") {
+        const createPushMenu = (
+          <Menu onClick={this.createTemplate}>
+            <MenuItem key="text">
+              {this.props.intl.formatMessage(messages.textTemplate)}
+            </MenuItem>
+            <MenuItem key="image">
+              {this.props.intl.formatMessage(messages.imageTemplate)}
+            </MenuItem>
+          </Menu>
+        );
+        actionButton = (<Dropdown disabled={_.isEmpty(this.props.Templates.selectedWeChatAccount)} overlay={createPushMenu} trigger={['click']}>
+          <CapButton style={{paddingLeft: '24px', paddingRight: '4px'}}>
+            <div style={{display: 'inline-flex'}}>
+              <p style={{ lineHeight: '28px'}}>New Template</p>
+              <p style={{ height: '28px'}}>
+                <i style={{ color: '#fff', paddingTop: '2px', margin: '0', paddingRight: '8px'}} className="material-icons">arrow_drop_down</i>
+              </p>
+            </div>
+          </CapButton>
+        </Dropdown>);
+      } else if (this.props.route.name.toLowerCase() === "line") {
+        const lineMenu = (
+          <Menu onClick={this.createTemplate}>
+            <MenuItem key="text">
+              {this.props.intl.formatMessage(messages.textTemplate)}
+            </MenuItem>
+            <MenuItem key="image">
+              {this.props.intl.formatMessage(messages.imageTemplate)}
+            </MenuItem>
+          </Menu>
+        );
+        actionButton = (<Dropdown overlay={lineMenu} trigger={['click']}>
+          <CapButton style={{paddingLeft: '24px', paddingRight: '4px'}}>
+            <div style={{display: 'inline-flex'}}>
+              <p style={{ lineHeight: '28px'}}>New Template</p>
+              <p style={{ height: '28px'}}>
+                <i style={{ color: '#fff', paddingTop: '2px', margin: '0', paddingRight: '8px'}} className="material-icons">arrow_drop_down</i>
+              </p>
+            </div>
+          </CapButton>
+        </Dropdown>);
+      } else {
+        actionButton = (<CapButton onClick={this.createTemplate}>{this.state.channel.toUpperCase() === 'SMS' ? this.props.intl.formatMessage(messages.createSmsActionButton) : 'Create SMS'}</CapButton>);
+      }
+    }
+
+    const 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);
+    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={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.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: 'Description of Templates' },
+              ]}
+            />
+            {this.props.renderNewCardGrid && templateList && templateList.length > 0 &&
+              this.props.renderNewCardGrid({templates: this.props.TemplatesList, handlers: {handlePreviewClick: this.handlePreviewClick, handleEditClick: this.handleEditClick}})
+            }
+            {!this.props.renderNewCardGrid && ((templateList && templateList.length > 0) || isSearch) && <Pagination onPageChange={() => { console.log('getting all templates pagination'); 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>
+            <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={"Loading EDM Templates"}
+              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.object,
+  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),
+  };
+}
+
+export default UserIsAuthenticated(connect(mapStateToProps, mapDispatchToProps)(injectIntl(Templates)));