@capillarytech/creatives-library 2.0.69 → 2.0.71

package/containers/Templates/index.js

@@ -8,13 +8,14 @@ import PropTypes from 'prop-types';
 
 import React from 'react';
 import { connect } from 'react-redux';
-import {injectIntl, intlShape } from 'react-intl';
+import Helmet from 'react-helmet';
+import { injectIntl, intlShape } from 'react-intl';
 import { createStructuredSelector } from 'reselect';
 import moment from "moment";
 import _ from 'lodash';
 import { bindActionCreators } from 'redux';
-import { Dropdown, Menu, Modal} from 'antd';
-import {CapButton, CapInput, CapIcon, CapSelect, CapPopover, CapSpin, CapCustomCard, CapRow} from '@capillarytech/cap-ui-library';
+import { Row, Select, Spin, Dropdown, Col, Breadcrumb, Menu, Modal} from 'antd';
+import { CapInput, CapButton, CapPopover, CapSelect } from '@capillarytech/cap-ui-library/';
 import { makeSelectTemplates, makeSelectTemplatesResponse } from './selectors';
 import { makeSelectCreate as makeSelectCreateSms} from '../Sms/Create/selectors';
 import { makeSelectCreate as makeSelectCreateMobilePush } from '../MobilePush/Create/selectors';
@@ -42,10 +43,10 @@ import * as commonUtil from '../../utils/common';
 import SlideBox from '../../components/SlideBox';
 import Pagination from '../../components/Pagination';
 import EmailPreview from '../../components/EmailPreview';
-import CreativesContainer from '../CreativesContainer';
 import WechatRichmediaTemplatePreview from '../../components/TemplatePreview/WechatRichmediaTemplatePreview';
 const MenuItem = Menu.Item;
-const {CapCustomCardList} = CapCustomCard;
+const Option = Select.Option;
+const BreadcrumbItem = Breadcrumb.Item;
 
 export class Templates extends React.Component { // eslint-disable-line react/prefer-stateless-function
   constructor(props) {
@@ -70,7 +71,6 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
       searchedTemplates: false,
       defaultAccount: true,
       modeType: null,
-      routeParams: null,
     };
     this.handleOnHoverItem = this.handleOnHoverItem.bind(this);
     this.handleOnItemClick = this.handleOnItemClick.bind(this);
@@ -96,7 +96,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
   componentWillMount() {
     if (this.state.channel === '') {
       let channel = '';
-
+      console.log('templates props', this.props);
       switch (this.props.route.name.toLowerCase()) {
         case "sms":
           channel = 'Sms';
@@ -122,9 +122,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
           channel = '';
       }
       this.setState({ channel });
-      if (_.isEmpty(this.props.Templates.userList)) {
-        this.props.actions.getUserList();
-      }
+      this.props.actions.getUserList();
     }
   }
 
@@ -154,10 +152,11 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
       //   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,
@@ -187,6 +186,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
       } 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)) {
@@ -240,6 +240,12 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
         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;
@@ -290,12 +296,14 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
     }
     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;
@@ -304,10 +312,10 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
         this.props.createNew();
         return;
       }
-      this.setState({routeParams: {
+      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) {
@@ -343,13 +351,14 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
   }
 
   componentWillUnmount() {
+    console.log('removed listener templates');
     window.removeEventListener("message", this.handleFrameTasks);
     this.props.actions.resetTemplateStoreData();
-    this.props.globalActions.clearMetaEntities();
     // this.setState({defaultAccount: false});
   }
 
-  onAccountSelect(value) {
+  onAccountSelect(value, option) {
+    console.log('Selected Account ', value, option);
     this.setState({selectedAccount: value}, () => {
       const params = {
         name: this.state.searchText,
@@ -368,39 +377,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
       this.getAllTemplates({params, resetPage: true});
     });
   }
-  onPaginationChange = () => { this.getAllTemplates({getNextPage: true}); }
-  onCreateComplete = () => {
-    this.setState({routeParams: null});
-  }
-  getCurrentWindow(e) {
-    const response = {
-      action: e.action,
-      value: 'templates',
-      direction: e.value,
-    };
-    parent.postMessage(JSON.stringify(response), '*');
-  }
-  getCreativesParams = () => {
-    const routeParams = this.state.routeParams;
-    const creativesParams = {mode: ''};
-    if (!_.isEmpty(routeParams)) {
-      if (routeParams.pathname.indexOf('create') > -1) {
-        creativesParams.mode = 'create';
-      } else if (routeParams.pathname.indexOf('edit') > -1) {
-        creativesParams.mode = 'edit';
-        creativesParams._id = routeParams.pathname.split('/')[3];
-        creativesParams.type = this.state.channel.toUpperCase();
-      }
-    }
-    return creativesParams;
-  }
-  getMappedLocale = (locale) => {
-    const map = {
-      'en': 'en',
-      'zh-cn': 'zh',
-    };
-    return map[locale];
-  };
+
   setLocale = () => {
     const user = localStorage.getItem('user');
     let locale = 'en';
@@ -409,12 +386,22 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
     }
     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;
@@ -456,58 +443,37 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
       });
     }
   };
-  getTemplateDataForGrid = ({templates, handlers, filterContent, channel, isLoading, loadingTip}) => {
-    const currentChannel = channel.toUpperCase();
-    const cardDataList = templates.map((template) => {
-      const templateData =
-        {
-          key: `${currentChannel}-card-${template.name}`,
-          title: <span title={template.name} >{template.name}</span>,
-          extra: [<CapIcon type="eye" onClick={() => { if (this.props.isFullMode) { handlers.handlePreviewClick(template); } else { this.props.handlePeviewTemplate(template); } }} />],
-          hoverOption: <CapButton onClick={(e) => handlers.handleEditClick(e, template._id)}>{this.props.intl.formatMessage(this.props.isFullMode ? messages.creativesTemplatesEdit : messages.selectButton)}</CapButton>,
-        };
-      if (currentChannel === "SMS") {
-        templateData.content = template.versions.base['sms-editor'];
-      } else if (currentChannel === "EMAIL") {
-        templateData.url = template.versions.base.preview_http_url;
-      } else if (currentChannel === "MOBILEPUSH" && template.type === "MOBILEPUSH") {
-        templateData.content = template;
-      }
-      return templateData;
-    });
-    return (<div>
-      {filterContent}
-      <CapSpin spinning={isLoading} tip={loadingTip}>
-        {!_.isEmpty(templates) && <div className="pagination-container">
-          <CapCustomCardList key={`${currentChannel}-card-list`} cardList={cardDataList} type={currentChannel} />
-        </div>}
-        {(this.state.selectedAccount === '' && _.isEmpty(this.props.Templates.selectedWeChatAccount)) && (this.state.channel.toLowerCase() === 'wechat' || this.state.channel.toLowerCase() === "mobilepush") && <div style={{ height: '65vh', textAlign: 'center', lineHeight: '65vh'}}>
-          <span style={{ fontFamily: 'open-sans', fontSize: '24px', color: '#B5B5B5'}}>{this.props.intl.formatMessage(messages.noAccountMessage)}</span>
-        </div>}
-      </CapSpin>
-
-    </div>);
+
+  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';
-    let routeParams = {};
     if (this.state.channel.toLowerCase() === 'email') {
       const isLanguageSupport = this.props.location.query.isLanguageSupport || false;
-      routeParams = {
+      this.props.router.push({
         pathname: `/email/view`,
         query: type === 'embedded' ? {type: 'embedded', module, isLanguageSupport} : {},
-      };
+      });
     } else if (this.state.channel.toLowerCase() === 'sms') {
-      routeParams = {
+      this.props.router.push({
         pathname: `/sms/view`,
         query: type === 'embedded' ? {type: 'embedded', module} : {},
-      };
+      });
     } else if (this.state.channel.toLowerCase() === 'mobilepush') {
-      routeParams = {
+      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') {
       if (e.template_type && e.template_type === 'RICHMEDIA_WECHAT_TEMPLATE') {
         this.props.router.push({
@@ -521,18 +487,21 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
         });
       }
     } else if (this.state.channel.toLowerCase() === 'line') {
-      routeParams = {
+      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, routeParams});
+    this.setState({loading: true});
   }
 
-  handleMenuAction = (item) => {
+  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();
     }
   };
@@ -540,7 +509,6 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
   handleBlankTemplateAction = (item, channel) => {
     const type = this.props.location.query.type;
     const module = this.props.location.query.module ? this.props.location.query.module : 'default';
-    let routeParams = {};
     if (item === "uploadFile") {
       document.getElementById('filename').click();
     } else if (item === "editor") {
@@ -548,17 +516,16 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
     } else if (this.isEnabledInLibraryModule("callCreateFromProps")) {
       this.props.createNew(item);
     } else if (item === 'textTemplate') {
-      routeParams = {
+      this.props.router.push({
         pathname: `/${channel === 'line' ? 'line' : 'mobilepush'}/create/text`,
         query: type === 'embedded' ? {type: 'embedded', module} : {module},
-      };
+      });
     } else if (item === 'imageTemplate') {
-      routeParams = {
+      this.props.router.push({
         pathname: `/${channel === 'line' ? 'line' : 'mobilepush'}/create/image`,
         query: type === 'embedded' ? {type: 'embedded', module} : {module},
-      };
+      });
     }
-    this.setState({routeParams});
   }
 
   handleFileUpload = (e, {files}) => {
@@ -570,11 +537,13 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
     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;
@@ -585,10 +554,10 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
           this.props.createNew();
           return;
         }
-        this.setState({routeParams: {
+        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 {
@@ -700,15 +669,17 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
     return result;
   }
   startLoading(ifEdit) {
+    console.log('startLoading', ifEdit);
     if (ifEdit) {
       this.setState({loading: true});
     }
   }
 
   startTemplateCreation(data) {
+    console.log('startTemplateCreation', data);
     if (data.edit) {
       const ifUnicode = checkUnicode(data.content);
-
+      console.log('smsDetails', ifUnicode, data.content);
       const content = data.content;
       const tempData = {
         'sms-editor': content,
@@ -723,8 +694,10 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
   }
 
   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":
@@ -748,11 +721,11 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
         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:
@@ -765,21 +738,19 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
     const module = this.props.location.query.module ? this.props.location.query.module : 'default';
     const channel = this.state.channel.toLowerCase();
     //const keyType = ev.key && ev.key.toLowerCase() !== undefined ? ev.state.toLowerCase() : '';
-    let routeParams = {};
     if (this.isEnabledInLibraryModule("callCreateFromProps")) {
       this.props.createNew();
     } else if (ev.key && (ev.key.toLowerCase() === "text" || ev.key.toLowerCase() === "image")) {
-      routeParams = {
+      this.props.router.push({
         pathname: `/${channel === 'line' ? 'line' : 'mobilepush'}/create/${ev.key.toLowerCase()}`,
         query: type === 'embedded' ? {type: 'embedded', module} : {module},
-      };
+      });
     } else {
-      routeParams = {
-        pathname: `/templates/${this.state.channel.toLowerCase()}/create`,
+      this.props.router.push({
+        pathname: `/${this.state.channel.toLowerCase()}/create`,
         query: type === 'embedded' ? {type: 'embedded', module} : {module},
-      };
+      });
     }
-    this.setState({routeParams});
   }
 
   menuOnClickEvent(ev) {
@@ -817,6 +788,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
   }
 
   searchTemplate(data) {
+    console.log('searching template', data);
     this.setState({searchText: data}, () => {
       const params = {
         name: this.state.searchText,
@@ -870,12 +842,14 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
     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();
@@ -883,27 +857,18 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
   };
 
   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;
-    const params = {
-      name: this.state.searchText,
-      sortBy: this.state.sortBy,
-    };
     if (this.state.channel.toLowerCase() === "sms") {
-      this.props.smsActions.createTemplate(duplicateObj, (response) => {
-        if (response && response.templateId) {
-          const message = getMessageObject('success', `${this.state.channel} ${this.props.intl.formatMessage(messages.templateDuplicateSuccess)}`, true);
-          this.props.globalActions.addMessageToQueue(message);
-          this.getAllTemplates({params, resetPage: true});
-          this.props.smsActions.clearCreateResponse();
-        }
-      });
+      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);
@@ -917,6 +882,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
   }
 
   handleOnHoverItem(isHovering, id) {
+    console.log('parent handle hover', isHovering, id);
     if (isHovering) {
       this.setState({hoveredItem: id});
     } else {
@@ -925,6 +891,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
   }
 
   handleOnItemClick(isClicked, id) {
+    console.log('parent handle click', isClicked, id);
     this.setState({clickedItem: id});
   }
 
@@ -936,7 +903,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
       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};
@@ -947,14 +914,15 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
         this.props.createNew();
         return;
       }
-      this.setState({routeParams: {
+      this.props.router.push({
         pathname: `/${this.state.channel.toLowerCase()}/create`,
         query: getQuery,
-      }});
+      });
     }
   };
 
   handleEditClick(e, id, modeType, path) {
+    console.log('inside props****', this.props);
     if (modeType && modeType !== undefined) {
       this.setState({modeType});
     }
@@ -964,8 +932,9 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
     const isEdmSupport = (this.props.location.query.isEdmSupport !== "false") || false;
     let getQuery = "";
     let pathName = path;
+    console.log('type**** ', type);
     e.stopPropagation();
-
+    console.log('clicked', id);
     this.props.actions.resetTemplateData();
     if (this.state.channel.toLowerCase() === 'sms') {
       pathName = `/sms/edit/${id}`;
@@ -993,10 +962,10 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
       if (this.state.channel.toLowerCase() === 'ebill') {
         pathName = `/ebill/edit/${id}`;
       }
-      this.setState({routeParams: {
+      this.props.router.push({
         pathname: pathName,
         query: getQuery,
-      }});
+      });
     }
   }
 
@@ -1013,6 +982,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
       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);
@@ -1086,11 +1056,26 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
           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;
@@ -1116,12 +1101,12 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
           );
         }
       } 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;
+        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">
@@ -1234,6 +1219,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
   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") {
@@ -1290,7 +1276,75 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
       />
     );
   }
+
   render() {
+    let pageHeaderText = '';
+    const moduleName = this.props.location.query.module;
+    if (this.props.location.query.type !== 'embedded') {
+      if (this.state.channel.toUpperCase() === 'WECHAT') {
+        pageHeaderText = this.props.intl.formatMessage(messages.wechatHeader);
+      } else if (this.state.channel.toUpperCase() === 'SMS') {
+        pageHeaderText = this.props.intl.formatMessage(messages.smsHeader);
+      } else if (this.state.channel.toUpperCase() === 'EMAIL') {
+        pageHeaderText = this.props.intl.formatMessage(messages.emailHeader);
+      } else if (this.state.channel.toUpperCase() === 'MOBILEPUSH') {
+        pageHeaderText = this.props.intl.formatMessage(messages.mobilepushHeader);
+      } else if (this.state.channel.toUpperCase() === 'EBILL') {
+        pageHeaderText = this.props.intl.formatMessage(messages.ebillHeader);
+      } else if (this.state.channel.toUpperCase() === 'LINE') {
+        pageHeaderText = this.props.intl.formatMessage(messages.lineHeader);
+      }
+    }
+    const options = [
+      {
+        value: "Most Recent",
+        label: this.props.intl.formatMessage(messages.mostRecentOption),
+      },
+      {
+        value: "Alphabetically",
+        label: this.props.intl.formatMessage(messages.alphabeticallyOption),
+      },
+    ];
+    const typeOptions = [
+      {
+        value: "All",
+        label: "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) => {
@@ -1298,55 +1352,53 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
           if (this.props.location.query.type === 'embedded' && (!this.props.location.query.module || (this.props.location.query.module && this.props.location.query.module !== 'library'))) {
             if (this.props.location.query.source_account_id && account.sourceAccountIdentifier === this.props.location.query.source_account_id) {
               accountOptions.push(
-                { key: this.state.channel.toUpperCase() === "MOBILEPUSH" ? account.id : account.uuid,
-                  label: account.name,
-                  value: account.name,
-                }
+                <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(
-                {
-                  key: this.state.channel.toUpperCase() === "MOBILEPUSH" ? account.id : account.uuid,
-                  value: account.name,
-                  label: account.name,
-                }
+                <Option key={this.state.channel.toUpperCase() === "MOBILEPUSH" ? account.id : account.uuid} value={account.name}>{account.name}</Option>
               );
             }
           } else {
             accountOptions.push(
-              {
-                key: this.state.channel.toUpperCase() === "MOBILEPUSH" ? account.id : account.uuid,
-                value: account.name,
-                label: account.name,
-              }
+              <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)}
-            options={accountOptions}
-          />
-           }
+          <Select className="selectAccount" onSelect={this.onAccountSelect} value={this.props.Templates.selectedWeChatAccount ? this.props.Templates.selectedWeChatAccount.name : undefined} placeholder={this.props.intl.formatMessage(messages.selectAccount)}>
+            {accountOptions}
+          </Select>}
       </div>
     );
     const pageHeaderDvs = (
       <div>
+        {(this.props.location.query.type === 'embedded' && moduleName === 'dvs') ? `${templateText}` : pageHeaderText}
         {((this.state.channel.toUpperCase() === 'WECHAT' || this.state.channel.toUpperCase() === "MOBILEPUSH") && (this.props.location.query.type === 'embedded') && !_.isEmpty(this.props.Templates.weCrmAccounts)) &&
-        <CapSelect
-          className="selectAccount"
-          onSelect={this.onAccountSelect}
-          value={this.props.Templates.selectedWeChatAccount ? this.props.Templates.selectedWeChatAccount.name : undefined} placeholder={this.props.intl.formatMessage(messages.selectAccount)}
-          options={accountOptions}
-        />
-          }
+        <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 = '';
@@ -1471,28 +1523,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
       >
       </CardGrid>
     );
-    const filterContent = (
-      <div className="action-container">
-        <CapInput.Search
-          className="search-text"
-          style={{width: '210px'}}
-          placeholder={this.props.intl.formatMessage(messages.searchText)}
-          value={this.state.searchText}
-          onChange={(e) => this.searchTemplate(e.target.value)}
-        />
-        <div style={{display: "flex", justifyContent: "space-between", alignItems: 'center'}}>
-          {(this.props.location.query.type === 'embedded' ) ? pageHeaderDvs : pageHeader}
-          <CapButton
-            type={this.props.isFullMode ? "primary" : "secondary"}
-            disabled={isLoading || _.isEmpty(this.props.Templates.selectedWeChatAccount)}
-            style={{marginLeft: '8px'}}
-            onClick={(ev) => this.props.isFullMode ? this.createTemplate(ev) : this.handleBlankTemplateAction()} >
-            { this.props.intl.formatMessage(messages.createNewActionButton) }
-          </CapButton>
-        </div>
 
-      </div>
-    );
     let htmlPreviewContent = "";
     if (this.state.channel.toLowerCase() === 'ebill') {
       htmlPreviewContent = this.state.previewTemplate && this.state.previewTemplate.versions && this.state.previewTemplate.versions.base && this.state.previewTemplate.versions.base['ebill-editor'];
@@ -1503,20 +1534,36 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
     const templateList = this.populateTemplatesList(this.props.TemplatesList, true);
 
     const isSearch = this.props.Templates.isSearch;
-    const creativesParams = this.getCreativesParams();
-    const {isFullMode, route} = this.props;
-    const loadingTip = (this.props.Templates.sendingFile && (this.state.channel.toLowerCase() === 'email' || this.state.channel.toLowerCase() === 'ebill')) ? this.props.intl.formatMessage(messages.uploadingFile) : this.props.intl.formatMessage(messages.gettingAllTemplates);
     return (
       <div>
-        <input type="file" id="filename" style={{ display: 'none'}} accept=".zip, .html, .htm" onChange={(event) => this.handleFileUpload(event, {files: event.target.files})} />
-
-
-        <CapRow>
-          <Pagination onPageChange={this.onPaginationChange} paginationSelector="pagination-container">
-            {this.getTemplateDataForGrid({isLoading, loadingTip, channel: this.state.channel, templates: this.props.TemplatesList, filterContent, handlers: {handlePreviewClick: this.handlePreviewClick, handleEditClick: this.handleEditClick}})}
-          </Pagination>
-          {!this.props.renderNewCardGrid && ((templateList && templateList.length > 0) || isSearch) && // old UI GRID
-            <Pagination onPageChange={this.onPaginationChange} paginationSelector="pagination-container">
+        <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' },
+              ]}
+            />
+            {((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}
@@ -1524,80 +1571,67 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
                 onHoverItem={this.handleOnHoverItem}
                 onItemClick={this.handleOnItemClick}
                 enablePagination
-                isLoading={isLoading}
-                loadingTip={loadingTip}
               >
               </CardGrid>
             </Pagination>}
-          {(((this.state.selectedAccount !== '' && !_.isEmpty(this.props.Templates.selectedWeChatAccount) && this.state.channel.toLowerCase() === 'wechat') || this.state.channel.toLowerCase() !== 'wechat') && _.isEmpty(this.props.TemplatesList)) && !this.props.Templates.getAllTemplatesInProgress && <div style={{ height: '65vh', textAlign: 'center', lineHeight: '65vh'}}>
-            <span style={{ fontFamily: 'open-sans', fontSize: '24px', color: '#B5B5B5'}}>{this.props.intl.formatMessage(messages.noTemplatesMessage)}</span>
+            {(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>}
-        </CapRow>
-        <CapRow>
-          {!_.isEmpty(creativesParams.mode) && isFullMode && //creatives container for fullmode
-          <CreativesContainer
-            key={creativesParams.mode}
-            messageDetails={{type: "default"}}
-            creativesMode={creativesParams.mode}
-            messages={messages}
-            isFullMode={isFullMode}
-            templateData={creativesParams}
-            getCreativesData={this.onCreateComplete}
-            channel={route.name.toUpperCase()}
-            handleCloseCreatives={this.onCreateComplete}/>
-          }
-        </CapRow>
-        <CapRow>
-          {this.state.channel.toLowerCase() === 'wechat' && this.state.previewTemplate && this.state.previewTemplate.definition && this.state.previewTemplate.definition.msgcontent && this.state.previewTemplate.definition.msgcontent === 'RICH_MEDIA_WECHAT' ?
-            <WechatRichmediaTemplatePreview
-              show={this.state.previewOpen}
-              closeSlideBox={this.togglePreview}
-              header={this.state.previewTemplate.name}
-              width={30}
-              showSlidebox
-              const type={this.props.location && this.props.location.query.type ? this.props.location.query.type : ''}
-              content={this.state.previewTemplate.versions.base.mediaList}
-              onEditClick={this.handleEditClick}
-              showEdit
-              templateId={this.state.previewTemplate._id}
-              path={`/wechat/richmedia/edit/${this.state.previewTemplate._id}`}
-            />
-            :
-              <PreviewSideBar
-                showPreview={this.state.previewOpen}
-                templateData={this.state.previewTemplate}
-                channel={this.state.channel}
-                handleClose={this.togglePreview}
+            {(((this.state.selectedAccount !== '' && !_.isEmpty(this.props.Templates.selectedWeChatAccount) && this.state.channel.toLowerCase() === 'wechat') || this.state.channel.toLowerCase() !== 'wechat') && _.isEmpty(this.props.TemplatesList)) && !this.props.Templates.getAllTemplatesInProgress && <div style={{ height: '65vh', textAlign: 'center', lineHeight: '65vh'}}>
+              <span style={{ fontFamily: 'open-sans', fontSize: '24px', color: '#B5B5B5'}}>{this.props.intl.formatMessage(messages.noTemplatesMessage)}</span>
+            </div>}
+          </Row>
+          <Row>
+            {this.state.channel.toLowerCase() === 'wechat' && this.state.previewTemplate && this.state.previewTemplate.definition && this.state.previewTemplate.definition.msgcontent && this.state.previewTemplate.definition.msgcontent === 'RICH_MEDIA_WECHAT' ?
+              <WechatRichmediaTemplatePreview
+                show={this.state.previewOpen}
+                closeSlideBox={this.togglePreview}
+                header={this.state.previewTemplate.name}
+                width={30}
+                showSlidebox
+                const type={this.props.location && this.props.location.query.type ? this.props.location.query.type : ''}
+                content={this.state.previewTemplate.versions.base.mediaList}
                 onEditClick={this.handleEditClick}
-                embedded={this.props.location.query.type === 'embedded'}
-                onDuplicateClick={this.duplicateTemplate}
-                location={this.props.location}
-              >
-              </PreviewSideBar>
+                showEdit
+                templateId={this.state.previewTemplate._id}
+                path={`/wechat/richmedia/edit/${this.state.previewTemplate._id}`}
+              />
+              :
+                <PreviewSideBar
+                  showPreview={this.state.previewOpen}
+                  templateData={this.state.previewTemplate}
+                  channel={this.state.channel}
+                  handleClose={this.togglePreview}
+                  onEditClick={this.handleEditClick}
+                  embedded={this.props.location.query.type === 'embedded'}
+                  onDuplicateClick={this.duplicateTemplate}
+                  location={this.props.location}
+                >
+                </PreviewSideBar>
 
-          }
-          {(this.state.channel.toLowerCase() === 'ebill' || this.state.channel.toLowerCase() === 'email') && htmlPreviewContent && <EmailPreview
-            header={previewHeader}
-            content={htmlPreviewContent}
-            show={this.state.showHtmlPreview}
-            device={this.state.device}
-            handleClose={this.toggleEmailPreview}
-            changePreviewDevice={this.changePreviewDevice}
-            lastModified={this.state.previewTemplate ? this.state.previewTemplate.updatedAt : ''}
-            updatedByName={commonUtil.getUserNameById(parseInt(this.state.previewTemplate.updatedBy, 10), commonUtil.getMergedUserList(this.props.Templates.userList))}
-          />}
-          <SlideBox
-            header={(<h3>{this.props.intl.formatMessage(messages.layoutSelection)}</h3>)}
-            width={60}
-            content={cmsTemplateSelectionContent}
-            show={this.state.showEdmEmailTemplates}
-            handleClose={this.toggleEdmEmailTemplateSelection}
-            loadingText={"Loading EDM Templates"}
-            isLoading={this.props.Templates.getCmsTemplatesInProgress}
+            }
+            {(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()}
-        </CapRow>
-
+            {this.renderDeleteConfirmationModal()}
+          </Row>
+        </Spin>
       </div>
     );
   }
@@ -1613,6 +1647,7 @@ Templates.propTypes = {
   TemplatesList: PropTypes.array,
   Templates: PropTypes.object,
   route: PropTypes.object,
+  router: PropTypes.object,
   Create: PropTypes.object,
   location: PropTypes.object,
   globalActions: PropTypes.object,
@@ -1621,10 +1656,6 @@ Templates.propTypes = {
   createNew: PropTypes.func,
   onSelectTemplate: PropTypes.func,
   lineActions: PropTypes.object,
-  isFullMode: PropTypes.bool,
-  renderNewCardGrid: PropTypes.func,
-  handlePeviewTemplate: PropTypes.func,
-  router: PropTypes.object,
 };
 
 const mapStateToProps = createStructuredSelector({