@capillarytech/creatives-library 2.0.44 → 2.0.46

package/containers/Templates/index.js

@@ -14,7 +14,7 @@ import moment from "moment";
 import _ from 'lodash';
 import { bindActionCreators } from 'redux';
 import { Row, Select, Dropdown, Menu, Modal} from 'antd';
-import {CapButton, CapInput, CapIcon, CapSelect, CapPopover} from '@capillarytech/cap-ui-library';
+import {CapButton, CapInput, CapIcon, CapSelect, CapPopover, CapSpin, CapCustomCard} 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';
@@ -45,6 +45,7 @@ import EmailPreview from '../../components/EmailPreview';
 import CreativesContainer from '../CreativesContainer';
 const MenuItem = Menu.Item;
 const Option = Select.Option;
+const {CapCustomCardList} = CapCustomCard;
 
 export class Templates extends React.Component { // eslint-disable-line react/prefer-stateless-function
   constructor(props) {
@@ -69,6 +70,7 @@ 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);
@@ -84,10 +86,12 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
     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.prepareWeChatRichmediaPreviewData = this.prepareWeChatRichmediaPreviewData.bind(this);
+    this.prepareWeChatMappedPreviewData = this.prepareWeChatMappedPreviewData.bind(this);
     this.onAccountSelect = this.onAccountSelect.bind(this);
     this.prepareMobilePushPreviewData = this.prepareMobilePushPreviewData.bind(this);
+    this.menuOnClickEvent = this.menuOnClickEvent.bind(this);
   }
 
   componentWillMount() {
@@ -237,12 +241,6 @@ 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;
@@ -372,8 +370,49 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
     });
   }
   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';
+    if (user) {
+      locale = JSON.parse(user).lang;
+    }
+    locale = this.getMappedLocale(locale);
+    //locale = 'zh';
 
-
+    moment.locale(locale);
+  };
   getAllTemplates = ({params, getNextPage, resetPage}, resetTemplates) => {
     let queryParams = params;
     let page = this.state.page;
@@ -418,41 +457,32 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
       });
     }
   };
-  getMappedLocale = (locale) => {
-    const map = {
-      'en': 'en',
-      'zh-cn': 'zh',
-    };
-    return map[locale];
-  };
-  setLocale = () => {
-    const user = localStorage.getItem('user');
-    let locale = 'en';
-    if (user) {
-      locale = JSON.parse(user).lang;
-    }
-    locale = this.getMappedLocale(locale);
-    //locale = 'zh';
-
-    moment.locale(locale);
-  };
-  getCurrentWindow(e) {
-    const response = {
-      action: e.action,
-      value: 'templates',
-      direction: e.value,
-    };
-    parent.postMessage(JSON.stringify(response), '*');
-  }
-  getCreativesMode = () => {
-    const routeParams = this.state.routeParams;
-    let creativesMode = '';
-    if (routeParams) {
-      if (routeParams.pathname.indexOf('create') > -1) {
-        creativesMode = 'create';
+  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;
       }
-    }
-    return creativesMode;
+      return templateData;
+    });
+    return (<div>
+      {filterContent}
+      <CapSpin spinning={isLoading} tip={loadingTip}>
+        <div className="pagination-container">
+          <CapCustomCardList key={`${currentChannel}-card-list`} cardList={cardDataList} type={currentChannel} />
+        </div>
+      </CapSpin>
+
+    </div>);
   }
   skipTemplateSelection = (e) => {
     const type = this.props.location.query.type;
@@ -556,17 +586,17 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
     }
   };
 
-  mapWechatTemplate() {
-    // const index = _.findIndex(this.props.Templates.weCRMtemplates, {template_id: key});
-    //
-    const type = this.props.location.query.type;
-    this.setState({routeParams: {
-      pathname: `/wechat/create`,
-      query: type === 'embedded' ? {type: 'embedded'} : {},
-    }});
+  prepareWeChatPreviewData(template) {
+    if (template && template.versions && template.versions.base && !_.isEmpty(template.versions.base)) {
+      if (template.definition && template.definition.msgcontent && template.definition.msgcontent === "RICH_MEDIA_WECHAT") {
+        return this.prepareWeChatRichmediaPreviewData(template.versions.base);
+      }
+      return this.prepareWeChatMappedPreviewData(template.versions.base.content, template.versions.base.Tag, template.versions.base.data);
+    }
+    return 'wrong template';
   }
 
-  prepareWeChatPreviewData(content, templateTags, tagData) {
+  prepareWeChatMappedPreviewData(content, templateTags, tagData) {
     let formattedContent = _.cloneDeep(content);
     _.forEach(templateTags, (tag) => {
       if (tagData[tag].value !== undefined) {
@@ -575,6 +605,39 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
     });
     return formattedContent;
   }
+
+  prepareWeChatRichmediaPreviewData(content) {
+    const returnObj = [];
+    if (content.mediaList) {
+      _.forEach(content.mediaList, (mediaData, mediaIndex) => {
+        if (mediaIndex === 0) {
+          returnObj.push(
+            <div style={{ width: 272, height: 160 }}>
+              <CapRow style={{ height: 110 }}>
+                <img alt="default" width="272px" height="110px" src={mediaData.image_url} />
+              </CapRow>
+              <CapRow style={{ height: 32 }}>
+                {mediaData.digest ? mediaData.digest : ""}
+              </CapRow>
+            </div>
+          );
+        } else {
+          returnObj.push(
+            <CapRow style={{ width: 272, height: 86 }}>
+              <CapColumn span={18}>
+                {mediaData.title}
+              </CapColumn>
+              <CapColumn span={6}>
+                <img alt="default" width="60px" height="60px" src={mediaData.image_url} />
+              </CapColumn>
+            </CapRow>
+          );
+        }
+      });
+    }
+    return returnObj;
+  }
+
   prepareMobilePushPreviewData(content) {
     let result;
     if (content.ANDROID) {
@@ -740,6 +803,40 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
     this.setState({routeParams});
   }
 
+  menuOnClickEvent(ev) {
+    let type = this.props.location.query.type;
+    // const module = this.props.location.query.module ? this.props.location.query.module : 'default';
+    const channel = this.state.channel.toLowerCase();
+    switch (channel) {
+      case 'wechat':
+        if (ev && ev.key && ev.key.toLowerCase() === "map_template") {
+          type = this.props.location.query.type;
+          this.props.router.push({
+            pathname: `/wechat/create`,
+            query: type === 'embedded' ? {type: 'embedded'} : {},
+          });
+        } else if (ev && ev.key && ev.key.toLowerCase() === "richmedia_template") {
+          type = this.props.location.query.type;
+          if (this.props.Templates && this.props.Templates.selectedWeChatAccount && this.props.Templates.selectedWeChatAccount.configs && (_.isEmpty(this.props.Templates.selectedWeChatAccount.configs.wechat_app_id) || _.isEmpty(this.props.Templates.selectedWeChatAccount.configs.wechat_app_secret))) {
+            const errorMessage = this.props.intl.formatMessage(messages.wechatAccountNotConfigured);
+            const message = getMessageObject('error', errorMessage, true);
+            this.props.globalActions.addMessageToQueue(message);
+          } else {
+            this.props.router.push({
+              pathname: `/wechat/richmedia/create`,
+              query: type === 'embedded' ? {type: 'embedded'} : {},
+            });
+          }
+        }
+        break;
+      default:
+        this.props.router.push({
+          pathname: `*`,
+        });
+        break;
+    }
+  }
+
   searchTemplate(data) {
     this.setState({searchText: data}, () => {
       const params = {
@@ -815,8 +912,19 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
     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);
+      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();
+        }
+      });
     } else if (this.state.channel.toLowerCase() === "mobilepush") {
       duplicateObj.definition.accountId = this.props.Templates.selectedWeChatAccount.id;
       this.props.mobilepushActions.createTemplate(duplicateObj);
@@ -867,7 +975,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
     }
   };
 
-  handleEditClick(e, id, modeType) {
+  handleEditClick(e, id, modeType, path) {
     if (modeType && modeType !== undefined) {
       this.setState({modeType});
     }
@@ -876,11 +984,13 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
     const isLanguageSupport = (this.props.location.query.isLanguageSupport) ? this.props.location.query.isLanguageSupport : false;
     const isEdmSupport = (this.props.location.query.isEdmSupport !== "false") || false;
     let getQuery = "";
-
+    let pathName = path;
     e.stopPropagation();
 
     this.props.actions.resetTemplateData();
-    let pathName = `/${this.state.channel === 'wechat' ? 'wechat' : 'sms'}/edit/${id}`;
+    if (this.state.channel.toLowerCase() === 'sms') {
+      pathName = `/sms/edit/${id}`;
+    }
     if (this.state.channel.toLowerCase() === 'mobilepush') {
       pathName = `/mobilepush/edit/${id}`;
     }
@@ -919,7 +1029,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
     }
     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);
+      templateInfo.content = this.prepareWeChatPreviewData(template);
     } else if (this.state.channel.toLowerCase() === "mobilepush") {
       templateInfo.content = template.versions.base;
       templateInfo.appName = this.props.Templates.selectedWeChatAccount.name;
@@ -1006,16 +1116,25 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
       let content = '';
       temp.id = template._id;
       if (this.state.channel === 'wechat') {
-        content = this.prepareWeChatPreviewData(template.versions.base.content, template.versions.base.Tag, template.versions.base.data);
-        temp.content = (
-          <div
-            className="sms-template-content">
-            <div className={`sms-text ${this.state.hoveredItem === template._id ? 'sms-text-blurred' : ''}`}>
-              {content || ''}
+        let path = '';
+        if (template && template.versions && template.versions.base && !_.isEmpty(template.versions.base)) {
+          if (template.definition && template.definition.msgcontent && template.definition.msgcontent === "RICH_MEDIA_WECHAT") {
+            path = `/wechat/richmedia/edit/${template._id}`;
+          } else {
+            path = `/wechat/edit/${template._id}`;
+          }
+          content = this.prepareWeChatPreviewData(template);
+          temp.content = (
+            <div
+              className="sms-template-content">
+              <div className={`sms-text ${this.state.hoveredItem === template._id ? 'sms-text-blurred' : ''}`}>
+                {content || ''}
+              </div>
+              {template._id === this.state.hoveredItem ? <CapButton onClick={(e) => this.handleEditClick(e, template._id, null, path)} className="edit-button" type="secondary">{type === 'embedded' ? this.props.intl.formatMessage(messages.selectButton) : this.props.intl.formatMessage(messages.editButton)}</CapButton> : ''}
+              {template._id === this.state.hoveredItem ? <CapButton onClick={() => this.handlePreviewClick(template)} className="preview-button" type="cancel">{this.props.intl.formatMessage(messages.previewButton)}</CapButton> : ''}
             </div>
-            {template._id === this.state.hoveredItem ? <CapButton onClick={(e) => this.handleEditClick(e, template._id)} className="edit-button" type="secondary">{type === 'embedded' ? this.props.intl.formatMessage(messages.selectButton) : this.props.intl.formatMessage(messages.editButton)}</CapButton> : ''}
-            {template._id === this.state.hoveredItem ? <CapButton onClick={() => this.handlePreviewClick(template)} className="preview-button" type="cancel">{this.props.intl.formatMessage(messages.previewButton)}</CapButton> : ''}
-          </div>);
+          );
+        }
       } else if (this.state.channel.toLowerCase() === 'email' || this.state.channel.toLowerCase() === 'ebill') {
         //
 
@@ -1081,6 +1200,10 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
       } else if (template.versions && template.versions.base && template.versions.base.IOS) {
         availableTemplates = 'iOS';
       }
+      let deleteOption = this.props.intl.formatMessage(messages.deleteButton);
+      if (this.state.channel.toLowerCase() === 'wechat' && !template.definition) {
+        deleteOption = this.props.intl.formatMessage(messages.unMapButton);
+      }
       if (!layoutSelection) {
         temp.footer = (
           <div className="footer-container">
@@ -1097,7 +1220,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
                       <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>
+                      <span onClick={() => this.toggleDeleteTemplateModal(template)} className="popover-action" style={{cursor: 'pointer', padding: '8px 0px'}}>{deleteOption}</span>
                     </div>
                   </div>
                 }
@@ -1131,7 +1254,6 @@ 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") {
@@ -1188,7 +1310,6 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
       />
     );
   }
-
   render() {
     const accountOptions = [];
     if ((this.state.channel.toUpperCase() === 'WECHAT' || this.state.channel.toUpperCase() === "MOBILEPUSH") && !_.isEmpty(this.props.Templates.weCrmAccounts)) {
@@ -1231,16 +1352,26 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
     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'}}>
+        const createPushMenu = (
+          <Menu onClick={this.menuOnClickEvent}>
+            <MenuItem key="map_template">
+              {this.props.intl.formatMessage(messages.mapTemplate)}
+            </MenuItem>
+            <MenuItem key="richmedia_template">
+              {this.props.intl.formatMessage(messages.weChatRichmediaTemplate)}
+            </MenuItem>
+          </Menu>
+        );
+        actionButton = (<Dropdown disabled={_.isEmpty(this.props.Templates.selectedWeChatAccount)} overlay={createPushMenu} trigger={['click']}>
+          <CapButton style={{paddingLeft: '24px', paddingRight: '4px'}}>
             <div style={{display: 'inline-flex'}}>
-              <p style={{ lineHeight: '28px', 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> */}
+              <p style={{ lineHeight: '28px'}}>{this.props.intl.formatMessage(messages.newTemplate)}</p>
+              <p style={{ height: '28px'}}>
+                <i style={{ color: '#fff', paddingTop: '2px', margin: '0', paddingRight: '8px'}} className="material-icons">arrow_drop_down</i>
+              </p>
             </div>
           </CapButton>
-        );
+        </Dropdown>);
       } else if (this.state.channel.toUpperCase() === 'EMAIL' || this.state.channel.toUpperCase() === 'EBILL') {
         const menuItems = [];
         menuItems.push(<MenuItem key={'uploadFile'}>{this.props.intl.formatMessage(messages.uploadFile)}</MenuItem>);
@@ -1342,11 +1473,10 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
     );
     const filterContent = (
       <div className="action-container">
-        <CapInput
+        <CapInput.Search
           className="search-text"
           style={{width: '210px'}}
           placeholder={this.props.intl.formatMessage(messages.searchText)}
-          prefix={<CapIcon type="search" size="s"/>}
           value={this.state.searchText}
           onChange={(e) => this.searchTemplate(e.target.value)}
         />
@@ -1371,7 +1501,7 @@ 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 creativesMode = this.getCreativesMode();
+    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 (
@@ -1384,9 +1514,9 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
 
 
         <Row>
-          {this.props.renderNewCardGrid && templateList && templateList.length > 0 &&
+          { templateList && templateList.length > 0 &&
           <Pagination onPageChange={this.onPaginationChange} paginationSelector="pagination-container">
-            {this.props.renderNewCardGrid({isLoading, loadingTip, channel: this.state.channel, templates: this.props.TemplatesList, filterContent, handlers: {handlePreviewClick: this.handlePreviewClick, handleEditClick: this.handleEditClick}})}
+            {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) &&
@@ -1411,13 +1541,17 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
             </div>}
         </Row>
         <Row>
-          {!_.isEmpty(creativesMode) && isFullMode &&
+          {!_.isEmpty(creativesParams.mode) && isFullMode && //creatives container for fullmode
           <CreativesContainer
+            key={creativesParams.mode}
             messageDetails={{type: "default"}}
-            creativesMode={creativesMode}
+            creativesMode={creativesParams.mode}
             messages={messages}
             isFullMode={isFullMode}
-            channel={route.name.toUpperCase()}/>
+            templateData={creativesParams}
+            getCreativesData={this.onCreateComplete}
+            channel={route.name.toUpperCase()}
+            handleCloseCreatives={this.onCreateComplete}/>
             }
           <PreviewSideBar
             showPreview={this.state.previewOpen}
@@ -1477,6 +1611,7 @@ Templates.propTypes = {
   lineActions: PropTypes.object,
   isFullMode: PropTypes.bool,
   renderNewCardGrid: PropTypes.func,
+  handlePeviewTemplate: PropTypes.func,
 };
 
 const mapStateToProps = createStructuredSelector({

package/containers/Templates/messages.js

@@ -22,6 +22,10 @@ export default defineMessages({
     id: `${scope}.mapTemplate`,
     defaultMessage: `Map Template`,
   },
+  "weChatRichmediaTemplate": {
+    id: `${scope}.weChatRichmediaTemplate`,
+    defaultMessage: 'Richmedia Template',
+  },
   "somethingWentWrong": {
     id: `${scope}.somethingWentWrong`,
     defaultMessage: `Something Went Wrong!!`,
@@ -262,4 +266,8 @@ export default defineMessages({
     id: `${scope}.continue`,
     defaultMessage: `Continue`,
   },
+  "wechatAccountNotConfigured": {
+    id: `${scope}.wechatAccountNotConfigured`,
+    defaultMessage: 'Selected wechat account is not configured to create wechat templates',
+  },
 });

package/containers/Templates/sagas.js

@@ -7,11 +7,19 @@ import * as types from './constants';
 // Individual exports for testing
 export function* getAllTemplates(channel, queryParams) {
   try {
-    console.log('saga getAllTemplates', channel, queryParams);
     const result = yield call(Api.getAllTemplates, channel, queryParams);
-    const channelTemplates = (channel.channel === 'wechat') ? {templates: result.response.mapped} : result.response;
+    const channelTemplates = (channel.channel === 'wechat') ? {templates: [...result.response.mapped, ...result.response.richmedia]} : result.response;
     // const sidebar = result.response.sidebar;
-    yield put({ type: types.GET_ALL_TEMPLATES_SUCCESS, data: channelTemplates, weCRMTemplate: result.response.unMapped, isReset: channel.queryParams.page === 1});
+    if (channel.channel === 'wechat' && channel.queryParams && channel.queryParams.sortBy && channel.queryParams.sortBy.toLocaleLowerCase() === ("Most Recent").toLocaleLowerCase()) {
+      channelTemplates.templates.sort((a, b) => {
+        const dateA = new Date(a.updatedAt);
+        const dateB = new Date(b.updatedAt);
+        return dateB - dateA;
+      });
+    } else if (channel.channel === 'wechat' && channel.queryParams && channel.queryParams.sortBy && channel.queryParams.sortBy.toLocaleLowerCase() === ("Alphabetically").toLocaleLowerCase()) {
+      channelTemplates.templates.sort((a, b) => b.name - a.name);
+    }
+    yield put({ type: types.GET_ALL_TEMPLATES_SUCCESS, data: channelTemplates, weCRMTemplate: result.response.unMapped, isReset: channel.queryParams.page === 1 });
   } catch (error) {
     yield put({ type: types.GET_ALL_TEMPLATES_FAILURE, error });
   }
@@ -66,13 +74,15 @@ export function* fetchWeCrmAccounts(action) {
   }
 }
 
-export function* sendZippedFile({selectedFile}) {
+export function* sendZippedFile({selectedFile, errorHandler, successHandler}) {
   let errorMessage = "";
   try {
     const result = yield call(Api.sendZippedFile, selectedFile);
     if (result.status.isError) {
       errorMessage = result.message;
+      yield errorHandler(errorMessage);
     }
+
     console.log("Got Result ", result);
     console.log("Got decoded result", decodeURIComponent(result.response.metaEntity.htmlContent));
     yield [
@@ -81,7 +91,9 @@ export function* sendZippedFile({selectedFile}) {
         selectedTemplate: decodeURIComponent(result.response.metaEntity.htmlContent),
       }),
     ];
+    yield successHandler();
   } catch (error) {
+    yield errorHandler();
     yield [
       put({
         type: types.SEND_ZIPPED_FILE_FAILURE,

package/containers/Templates/selectors.js

@@ -47,6 +47,7 @@ const selectEmailLayout = () => createSelector(makeSelectTemplates(), (templates
   }
   return null;
 });
+const uploadSelector = () => createSelector(makeSelectTemplates(), (templates) => templates.sendingFile ? templates.sendingFile : false );
 
 const selectCmsTemplates = () => createSelector(makeSelectTemplates(), (templates) => {
   const {getCmsTemplatesInProgress, cmsTemplates} = templates;
@@ -61,6 +62,7 @@ const selectEdmEditor = () => createSelector(makeSelectTemplates(), (templates)
   return edmTemplate || null;
 });
 export {
+  uploadSelector,
   templateUserList,
   makeSelectTemplates, makeSelectTemplatesResponse, selectTemplateContent, selectEmailLayout, selectCmsTemplates, selectEdmEditor,
 };

package/containers/TemplatesV2/index.js

@@ -13,7 +13,7 @@ import { createStructuredSelector } from 'reselect';
 import { bindActionCreators } from 'redux';
 import styled from 'styled-components';
 import { CapTab, CapCustomCard, CapButton, CapHeader, CapSpin, CapIcon } from '@capillarytech/cap-ui-library';
-import { find } from 'lodash';
+import { find, get } from 'lodash';
 import Helmet from 'react-helmet';
 
 import {CAP_SPACE_24, CAP_SPACE_16} from '@capillarytech/cap-ui-library/styled/variables';
@@ -48,12 +48,12 @@ const MarginTop = styled.div`
 export class TemplatesV2 extends React.Component { // eslint-disable-line react/prefer-stateless-function
   constructor(props) {
     super(props);
-    const defaultChannel = this.props.channel || 'sms';
+    const defaultChannel = get(this, 'props.channel') || get(this, 'props.params.channel') || 'sms';
     const deafaultPanes = [
       {content: <div></div>, tab: 'Sms', key: 'sms'},
       {content: <div></div>, tab: 'Email', key: 'email'},
       // {content: this.getTemplatesComponent('wechat'), tab: 'Wechat', key: 'wechat'},
-      // {content: this.getTemplatesComponent('mobilepush'), tab: 'Mpush', key: 'mobilepush'},
+      // {content: <div></div>, tab: 'Mpush', key: 'mobilepush'},
     ];
     const panes = this.setChannelContent(defaultChannel, deafaultPanes);
     this.state = {
@@ -109,6 +109,7 @@ export class TemplatesV2 extends React.Component { // eslint-disable-line react/
       createNew={this.props.createNew}
       onSelectTemplate={(id) => this.props.onSelectTemplate(this.selectTemplate(id))}
       renderNewCardGrid={this.getTemplateDataForGrid}
+      handlePeviewTemplate={this.props.handlePeviewTemplate}
     />);
   }
 
@@ -116,7 +117,11 @@ export class TemplatesV2 extends React.Component { // eslint-disable-line react/
     const panes = argsPanes.map((p) => {
       const pane = p;
       if (pane.key === selectedChannel) {
-        pane.content = this.getTemplatesComponent(pane.tab.toLowerCase());
+        let channel = pane.tab.toLowerCase();
+        if (channel === "mpush") {
+          channel = "mobilepush";
+        }
+        pane.content = this.getTemplatesComponent(channel);
         return pane;
       }
       return {...pane, content: <div></div>};

package/containers/TemplatesV2/reducer.js

@@ -0,0 +1,34 @@
+/*
+ *
+ * TemplatesV2 reducer
+ *
+ */
+
+import { fromJS } from 'immutable';
+import * as types from './constants';
+
+const initialState = fromJS({
+  loadingTemplates: true,
+  smsTemplates: [],
+  emailTemplates: [],
+  wechatTemplates: [],
+  mobilepushTemplates: [],
+});
+
+function templatesV2Reducer(state = initialState, action) {
+  const channelTemplates = `${action.channel}Templates`;
+  switch (action.type) {
+    case types.DEFAULT_ACTION:
+      return state;
+    case types.GET_TEMPLATES_REQUEST:
+      return state.set('loadingTemplates', true);
+    case types.GET_TEMPLATES_SUCESS:
+      return state.set('loadingTemplates', false).set(channelTemplates, action.templates);
+    case types.GET_TEMPLATES_FAILURE:
+      return state.set('loadingTemplates', false).set('error', action.error);
+    default:
+      return state;
+  }
+}
+
+export default templatesV2Reducer;