@capillarytech/creatives-library 0.0.1

package/containers/Templates/index.js

@@ -0,0 +1,1290 @@
+/*
+ *
+ * Templates
+ *
+ */
+
+import React, { PropTypes } 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 { makeSelectEdit } from '../Sms/Edit/selectors';
+import { UserIsAuthenticated } from '../../utils/authWrapper';
+import messages from './messages';
+import * as charCount from '../../utils/smsCharCount';
+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 CardGrid from '../../components/CardGrid';
+import PreviewSideBar from '../../components/PreviewSideBar';
+import './_templates.scss';
+import * as globalActions from '../../containers/Cap/actions';
+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: {},
+      showEbillPreview: false,
+      device: 'desktop',
+    };
+    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;
+        default:
+          channel = '';
+      }
+      this.setState({ channel });
+      this.props.actions.getUserList();
+    }
+  }
+
+  componentDidMount() {
+    if (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))) {
+      console.log('getting templates 1');
+      const queryParams = {
+        name: this.state.searchText,
+        sortBy: this.state.sortBy,
+      };
+      queryParams.page = this.state.page;
+      queryParams.perPage = this.state.perPageLimit;
+      const channel = this.state.channel;
+      console.log('getting templates 9');
+      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') {
+        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") {
+        channel = "mobilepush";
+        nextProps.actions.getWeCrmAccounts(channel);
+      } else if (nextProps.route.name.toLowerCase() === 'ebill') {
+        channel = 'Ebill';
+      }
+      // console.log('Next Props details ', nextProps.route.name, channel);
+      this.setState({ channel }, () => {
+        if (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;
+          }
+          console.log('getting templates 2');
+          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')) {
+      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);
+          console.log('getting templates 3');
+          this.getAllTemplates({params});
+        });
+      } else if (this.state.channel.toLowerCase() === 'mobilepush' && nextProps.location.query.account_id) {
+        _.forEach(nextProps.Templates.weCrmAccounts, (account) => {
+          if (nextProps.location.query.account_id && account.id === Number(nextProps.location.query.account_id)) {
+            selectedAccount = account;
+          }
+        });
+        this.props.actions.setWeChatAccount(selectedAccount);
+        params.accountId = Number(nextProps.location.query.account_id);
+        console.log('getting templates 4');
+        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.props.intl.formatMessage(messages.templateDuplicateSuccess), true);
+      this.props.globalActions.addMessageToQueue(message);
+      console.log('getting templates 5');
+      this.getAllTemplates({params});
+      this.props.smsActions.clearCreateResponse();
+    }
+    if (this.state.channel.toLowerCase() === "mobilepush" && nextProps.CreateMobilePush && nextProps.CreateMobilePush.response && nextProps.CreateMobilePush.response.templateId && nextProps.CreateMobilePush.response.templateId !== '') {
+      const message = getMessageObject('success', this.props.intl.formatMessage(messages.templateDuplicateSuccess), true);
+      this.props.globalActions.addMessageToQueue(message);
+      console.log('getting templates 6');
+      this.getAllTemplates({params});
+      this.props.mobilepushActions.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();
+      }
+    }
+
+    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()} Template Deleted Successfully`, true);
+      nextProps.globalActions.addMessageToQueue(message);
+      console.log('getting templates 7');
+      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) ? this.props.location.query.isEdmSupport : true;
+      const type = this.props.location.query.type;
+      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});
+    }
+  }
+
+  componentWillUnmount() {
+    console.log('removed listener templates');
+    window.removeEventListener("message", this.handleFrameTasks);
+  }
+
+  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;
+      }
+      console.log('getting templates 8');
+      this.getAllTemplates({params, resetPage: true});
+    });
+  }
+
+  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;
+      console.log('getting templates 9');
+      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;
+        console.log('getting templates 9');
+        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) => {
+    const type = this.props.location.query.type;
+    const module = (type === 'embedded') ? this.props.location.query.module : 'default';
+    if (this.state.channel.toLowerCase() === 'email') {
+      this.props.router.push({
+        pathname: `/email/create`,
+        query: type === 'embedded' ? {type: 'embedded', module} : {},
+      });
+    } 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} : {},
+      });
+    }
+    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();
+    }
+  };
+
+  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) ? this.props.location.query.isEdmSupport : true;
+    console.log('File Params ', fileExtension);
+    if (supportedZipFormats.indexOf(fileExtension.toLowerCase()) !== -1) {
+      console.log('Zip Format got');
+      this.props.actions.handleZipUpload(files[0]);
+    } 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);
+        const type = this.props.location.query.type;
+        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 {
+      alert('Invalid file type added! Please Give a proper zip file');
+      console.log('Invalid file type added! Please Give a proper zip file');
+    }
+  };
+
+  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 = charCount.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';
+    if (this.props.location.query.module === 'subscription') {
+      this.props.createNew();
+    } else if (ev.key && (ev.key.toLowerCase() === "text" || ev.key.toLowerCase() === "image")) {
+      this.props.router.push({
+        pathname: `/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;
+      }
+      console.log('getting templates 10');
+      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;
+      }
+      console.log('getting templates 11');
+      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' && data.toLowerCase() !== "all") {
+        params.mode = this.state.mode.toLowerCase();
+      }
+      console.log('getting templates 12');
+      this.getAllTemplates({params, resetPage: true});
+    });
+  };
+  togglePreview() {
+    if (this.state.channel.toLowerCase() === 'ebill') {
+      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);
+    }
+  }
+
+  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) ? this.props.location.query.isEdmSupport : true;
+      let getQuery = '';
+      console.log('Selected EDM Data ', data);
+      this.props.actions.setEdmTemplate(data);
+      if (type && type.toLowerCase() === 'email') {
+        getQuery = (type === 'embedded') ? {type: 'embedded', module, isLanguageSupport, isEdmSupport} : {module, isLanguageSupport, isEdmSupport};
+      } else {
+        getQuery = (type === 'embedded') ? {type: 'embedded', module} : {module};
+      }
+      this.props.router.push({
+        pathname: `/${this.state.channel.toLowerCase()}/create`,
+        query: getQuery,
+      });
+    }
+  };
+
+  handleEditClick(e, id) {
+    console.log('inside props****', this.props);
+    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 : true;
+    const isEdmSupport = (this.props.location.query.isEdmSupport) ? this.props.location.query.isEdmSupport : true;
+    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 (type && type.toLowerCase() === 'email') {
+      getQuery = type === 'embedded' ? {type: 'embedded', module, isLanguageSupport, isEdmSupport} : {module};
+    } else {
+      getQuery = type === 'embedded' ? {type: 'embedded', module, account_id: this.props.location.query.account_id} : {module};
+    }
+    if (module && module === 'subscription') {
+      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) {
+    this.togglePreview();
+    const templateInfo = _.cloneDeep(template);
+    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);
+    } 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) {
+    if (!data) {
+      return [];
+    }
+    const type = this.props.location.query.type;
+    const items = [];
+
+    if (type === 'embedded' && this.state.channel !== 'wechat' && this.state.channel.toLowerCase() !== "mobilepush") {
+      items.push(
+        {
+          id: 'blankTemplate',
+          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 (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.clickedItem === template._id ? 'sms-text-blurred' : ''}`}>
+              {content || ''}
+            </div>
+            {template._id === this.state.clickedItem ? <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.clickedItem ? <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') {
+        // console.log('Data Prepare');
+        temp.content = (
+          <div
+            className="sms-template-content">
+            <div className={`sms-text ${this.state.clickedItem === template._id ? 'sms-text-blurred' : ''}`}>
+
+            </div>
+            {template._id === this.state.clickedItem ? <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.clickedItem ? <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.clickedItem === template._id ? 'sms-text-blurred' : ''}`}>
+              {content || ''}
+            </div>
+            {template._id === this.state.clickedItem ? <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.clickedItem ? <CapButton onClick={() => this.handlePreviewClick(template)} 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.clickedItem === template._id ? 'sms-text-blurred' : ''}`}>{content || ''}</div>
+            {template._id === this.state.clickedItem ? <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.clickedItem ? <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';
+      }
+      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({ showEbillPreview: !this.state.showEbillPreview });
+  };
+
+  changePreviewDevice = (device) => {
+    this.setState({ device });
+  };
+
+  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}
+      />
+    );
+  }
+
+  renderDeleteConfirmationModal = () => {
+    const modal =
+    (<Modal
+      visible={this.state.showModal}
+      title={"Alert"}
+      onOk={this.handleOk}
+      onCancel={this.handleCancel}
+      footer={[
+        <CapButton key="back" onClick={this.handleCancel}>Cancel</CapButton>,
+        <CapButton key="submit" type="primary" id="delete-version" onClick={this.handleOk}>
+          Yes
+        </CapButton>,
+      ]}
+    >
+    Are you sure you want to delete this Template?
+    </Modal>);
+    return modal;
+  };
+
+  render() {
+    console.log('templates props', this.props);
+    let pageHeaderText = '';
+    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);
+      }
+    }
+    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' &&
+            <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') {
+            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 {
+            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";
+    }
+    const pageHeader = (
+      <div>
+        {(this.props.location.query.type !== 'embedded') ? `${pageHeaderText}` : templateText}
+        {((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') {
+        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">
+              Text
+            </MenuItem>
+            <MenuItem key="image">
+              Image
+            </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 {
+        actionButton = (<CapButton onClick={this.createTemplate}>{this.state.channel.toUpperCase() === 'SMS' ? this.props.intl.formatMessage(messages.createSmsActionButton) : 'Create SMS'}</CapButton>);
+      }
+    }
+
+    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);
+    const previewHeader = (this.state.channel.toLowerCase() === 'email' ? <h3>{this.props.intl.formatMessage(messages.emailPreview)}</h3> : <h3>{this.props.intl.formatMessage(messages.ebillPreview)}</h3>);
+
+    const cmsTemplateSelectionContent = (
+      <CardGrid
+        className={""}
+        listItem={this.populateTemplatesList(this.props.Templates.cmsTemplates)}
+        // filterContent={filterContent}
+        onHoverItem={this.handleOnHoverItem}
+        onItemClick={this.handleEdmDefaultTemplateSelection}
+        colNumber={2}
+      >
+      </CardGrid>
+    );
+
+    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>
+              <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">{pageHeader}</div>
+            {actionButton}
+          </Row>
+          <Row>
+            <Helmet
+              title={titleText}
+              meta={[
+                { name: 'description', content: 'Description of Templates' },
+              ]}
+            />
+            <Pagination onPageChange={() => { this.getAllTemplates({getNextPage: true}); }} paginationSelector="pagination-container">
+              <CardGrid
+                className={this.state.channel.toLowerCase() === "mobilepush" ? "mobilepush-templates" : ""}
+                listItem={this.populateTemplatesList(this.props.TemplatesList)}
+                filterContent={filterContent}
+                onHoverItem={this.handleOnHoverItem}
+                onItemClick={this.handleOnItemClick}
+                enablePagination
+              >
+              </CardGrid>
+            </Pagination>
+          </Row>
+          <Row>
+            {(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>}
+            <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' && <EmailPreview
+              header={previewHeader}
+              content={this.state.previewTemplate && this.state.previewTemplate.versions && this.state.previewTemplate.versions.base && this.state.previewTemplate.versions.base['ebill-editor']}
+              show={this.state.showEbillPreview}
+              device={this.state.device}
+              handleClose={this.toggleEmailPreview}
+              changePreviewDevice={this.changePreviewDevice}
+            />}
+            <SlideBox
+              header={(<h3>Template Selection</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,
+  TemplatesList: PropTypes.array,
+  Templates: PropTypes.object,
+  route: PropTypes.object,
+  router: PropTypes.object,
+  Create: PropTypes.object,
+  location: PropTypes.object,
+  globalActions: PropTypes.object,
+  intl: intlShape.isRequired,
+  createNew: PropTypes.func,
+  onSelectTemplate: PropTypes.func,
+};
+
+const mapStateToProps = createStructuredSelector({
+  Templates: makeSelectTemplates(),
+  TemplatesList: makeSelectTemplatesResponse(),
+  Create: makeSelectCreateSms(),
+  CreateMobilePush: makeSelectCreateMobilePush(),
+  Edit: makeSelectEdit(),
+});
+
+function mapDispatchToProps(dispatch) {
+  return {
+    actions: bindActionCreators(actions, dispatch),
+    smsActions: bindActionCreators(smsActions, dispatch),
+    mobilepushActions: bindActionCreators(mobilepushActions, dispatch),
+    smsEditActions: bindActionCreators(smsEditActions, dispatch),
+    globalActions: bindActionCreators(globalActions, dispatch),
+  };
+}
+
+export default UserIsAuthenticated(connect(mapStateToProps, mapDispatchToProps)(injectIntl(Templates)));