@capillarytech/creatives-library 2.0.66 → 2.0.68

package/containers/MobilePush/Edit/index.js

@@ -17,7 +17,7 @@ import _, {get, findIndex, set, forEach, cloneDeep} from 'lodash';
 import { CapSlideBox, CapHeader, CapTable, CapLink, CapRow, CapColumn, CapIcons} from '@capillarytech/cap-ui-library';
 import styled from 'styled-components';
 import {makeSelectEdit, makeSelectEditResponse, makeSelectTemplateDetailsResponse, makeSelectIosCta} from "./selectors";
-import {makeSelectMetaEntities} from "../../Cap/selectors";
+import {makeSelectMetaEntities, setInjectedTags, isLoadingMetaEntities} from "../../Cap/selectors";
 import {getMessageObject} from "../../../utils/messageUtils";
 import FormBuilder from '../../../components/FormBuilder';
 import * as globalActions from "../../Cap/actions";
@@ -186,29 +186,6 @@ export class Edit extends React.Component { // eslint-disable-line react/prefer-
       const message = getMessageObject('error', (nextProps.Edit.editTemplateErrorMessage && nextProps.Edit.editTemplateErrorMessage !== '') ? nextProps.Edit.editTemplateErrorMessage : this.props.intl.formatMessage(messages.somethingWentWrong), true);
       this.props.globalActions.addMessageToQueue(message);
     }
-    // if (nextProps.metaEntities && nextProps.metaEntities.tags && nextProps.metaEntities.tags.custom && this.props.metaEntities.tags !== nextProps.metaEntities.tags) {
-    //   let injectedTags = _.cloneDeep(this.state.injectedTags);
-    //   injectedTags = _.merge({}, injectedTags, nextProps.metaEntities.tags.custom);
-    //   this.setState({injectedTags});
-    // }
-    if (nextProps.metaEntities && nextProps.metaEntities.tags && nextProps.metaEntities.tags.custom && !_.isEqual(this.props.metaEntities.tags, nextProps.metaEntities.tags)) {
-      let injectedTags = _.cloneDeep(this.state.injectedTags);
-      delete injectedTags["Registration custom fields"];
-      delete injectedTags["Store custom fields"];
-      delete injectedTags["Transaction custom fields"];
-      injectedTags = _.merge({}, injectedTags, nextProps.metaEntities.tags.custom);
-      console.log('new injected tags', nextProps.metaEntities.tags.custom);
-      if (!_.has(nextProps.metaEntities.tags.custom, "Registration custom fields")) {
-        delete injectedTags["Registration custom fields"];
-      }
-      if (!_.has(nextProps.metaEntities.tags.custom, "Store custom fields")) {
-        delete injectedTags["Store custom fields"];
-      }
-      if (!_.has(nextProps.metaEntities.tags.custom, "Transaction custom fields")) {
-        delete injectedTags["Transaction custom fields"];
-      }
-      this.setState({injectedTags});
-    }
   }
   componentWillUnmount() {
     this.props.actions.clearData();
@@ -1691,7 +1668,7 @@ export class Edit extends React.Component { // eslint-disable-line react/prefer-
     let tipText = this.props.Edit && ("getTemplateDetailsInProgress" in this.props.Edit && this.props.Edit.getTemplateDetailsInProgress) ? 'Getting template details...' : '';
     tipText = this.props.Edit && ("editTemplateInProgress" in this.props.Edit && this.props.Edit.editTemplateInProgress) ? 'Saving Template...' : '';
     const loadingContentEdit = this.state.loadingContentEdit || (this.props.location.query.module === 'dvs' && _.isEmpty(this.state.schema));
-    const spinning = loadingContentEdit || this.props.Edit.fetchingDefaultTemplates || this.props.Edit.assetUploading || this.state.loading || (this.props.Edit && (("getTemplateDetailsInProgress" in this.props.Edit && this.props.Edit.getTemplateDetailsInProgress) || ("editTemplateInProgress" in this.props.Edit && this.props.Edit.editTemplateInProgress)));
+    const spinning = this.props.isLoadingMetaEntities || loadingContentEdit || this.props.Edit.fetchingDefaultTemplates || this.props.Edit.assetUploading || this.state.loading || (this.props.Edit && (("getTemplateDetailsInProgress" in this.props.Edit && this.props.Edit.getTemplateDetailsInProgress) || ("editTemplateInProgress" in this.props.Edit && this.props.Edit.editTemplateInProgress)));
     let tags = this.props.metaEntities && this.props.metaEntities.tags ? this.props.metaEntities.tags.standard : [];
     if (this.props.supportedTags) {
       tags = this.props.supportedTags;
@@ -1712,7 +1689,7 @@ export class Edit extends React.Component { // eslint-disable-line react/prefer-
           </Row>}
           <Row>
             <Col>
-              <FormBuilder
+              {!this.props.isLoadingMetaEntities && <FormBuilder
                 schema={schema}
                 onSubmit={this.saveFormData}
                 onChange={this.onFormDataChange}
@@ -1724,7 +1701,7 @@ export class Edit extends React.Component { // eslint-disable-line react/prefer-
                 tabCount={2}
                 iosCtasData={this.state.iosCtasData}
                 tags={tags}
-                injectedTags={this.state.injectedTags ? this.state.injectedTags : {}}
+                injectedTags={this.props.injectedTags ? this.props.injectedTags : {}}
                 onFormValidityChange={this.setFormValidity}
                 usingTabContainer
                 checkValidation={this.state.checkValidation}
@@ -1736,7 +1713,7 @@ export class Edit extends React.Component { // eslint-disable-line react/prefer-
                 handleCancelModal={this.handleCancelModal}
                 modal={this.state.modalContent}
                 setModalContent={this.setModalContent}
-              />
+              />}
             </Col>
             {this.props.iosCtasData && this.state.showIosCtaTable &&
               <CapSlideBox
@@ -1820,7 +1797,8 @@ Edit.propTypes = {
   templateData: PropTypes.object,
   isFullMode: PropTypes.bool,
   iosCtasData: PropTypes.array,
-
+  isLoadingMetaEntities: PropTypes.bool,
+  injectedTags: PropTypes.object,
 };
 
 const mapStateToProps = createStructuredSelector({
@@ -1831,7 +1809,8 @@ const mapStateToProps = createStructuredSelector({
   metaEntities: makeSelectMetaEntities(),
   Templates: makeSelectTemplates(),
   iosCtasData: makeSelectIosCta(),
-
+  isLoadingMetaEntities: isLoadingMetaEntities(),
+  injectedTags: setInjectedTags(),
 });
 
 function mapDispatchToProps(dispatch) {

package/containers/MobilePush/Edit/selectors.js

@@ -3,7 +3,7 @@ import { createSelector } from 'reselect';
 /**
  * Direct selector to the create state domain
  */
-const selectMobilePushEditDomain = () => (state, props) => props.isFullMode === false ? state.get('mobileEdit') : state.get('edit'); // reducer injected as mobileEdit in library mode.
+const selectMobilePushEditDomain = () => (state) => state.get('mobileEdit'); // reducer injected as mobileEdit in library mode.
 
 
 /**
@@ -23,7 +23,7 @@ const makeSelectEditResponse = () => createSelector(
   selectMobilePushEditDomain(), (dimensionState) => dimensionState.get('editResponse')
 );
 const makeSelectTemplateDetailsResponse = () => createSelector(
-  selectMobilePushEditDomain(), (dimensionState) => dimensionState.get('templateDetails')
+  makeSelectEdit(), (dimensionState) => dimensionState.templateDetails
 );
 const makeSelectIosCta = () => createSelector(makeSelectEdit(), (create) => create.getIosCtasSucccess && create.iosCtasData );
 

package/containers/MobilepushWrapper/index.js

@@ -38,7 +38,7 @@ export class MobilepushWrapper extends React.Component { // eslint-disable-line
     this.props.onMobilepushModeChange( e.target.value );
   };
   render() {
-    const {mobilePushCreateMode, step, getFormData, setIsLoadingContent, isGetFormData, query} = this.props;
+    const {mobilePushCreateMode, step, getFormData, setIsLoadingContent, isGetFormData, query, isFullMode} = this.props;
     const isShowMobilepushCreate = !isEmpty(mobilePushCreateMode);
     return (
       <div className="mobilepush-wrapper">
@@ -62,7 +62,7 @@ export class MobilepushWrapper extends React.Component { // eslint-disable-line
                 query,
               }}
               params={{mode: mobilePushCreateMode}}
-              isFullMode={false}
+              isFullMode={isFullMode}
               isGetFormData={isGetFormData}
               route={{ name: 'mobilepush' }}
           />
@@ -84,6 +84,7 @@ MobilepushWrapper.propTypes = {
   setIsLoadingContent: PropTypes.func,
   isGetFormData: PropTypes.bool,
   query: PropTypes.object,
+  isFullMode: PropTypes.bool,
 };
 
 

package/containers/Sms/Create/index.js

@@ -14,13 +14,14 @@ import { createStructuredSelector } from 'reselect';
 import _ from 'lodash';
 import { bindActionCreators } from 'redux';
 import { makeSelectCreate, makeSelectCreateResponse } from './selectors';
-import { makeSelectMetaEntities, isLoadingMetaEntities } from '../../Cap/selectors';
+import { makeSelectMetaEntities, isLoadingMetaEntities, setInjectedTags } from '../../Cap/selectors';
 import { UserIsAuthenticated } from '../../../utils/authWrapper';
 import './_smsCreate.scss';
 import FormBuilder from '../../../components/FormBuilder';
 import * as actions from './actions';
 import messages from './messages';
 import * as charCount from '../../../utils/smsCharCount';
+import {checkUnicode} from '../../../utils/smsCharCountV2';
 import * as globalActions from '../../../containers/Cap/actions';
 import {getMessageObject} from '../../../utils/messageUtils';
 import * as creativesContainerActions from '../../CreativesContainer/actions';
@@ -150,28 +151,6 @@ export class Create extends React.Component { // eslint-disable-line react/prefe
         }
       }
     }
-    if (nextProps.metaEntities && nextProps.metaEntities.tags && nextProps.metaEntities.tags.custom && this.props.metaEntities.tags && this.props.metaEntities.tags.standard && (this.props.metaEntities.tags !== nextProps.metaEntities.tags)) {
-      let injectedTags = _.cloneDeep(this.state.injectedTags);
-      delete injectedTags["Registration custom fields"];
-      delete injectedTags["Store custom fields"];
-      delete injectedTags["Transaction custom fields"];
-      injectedTags = _.merge({}, injectedTags, nextProps.metaEntities.tags.custom);
-
-      if (!_.has(nextProps.metaEntities.tags.custom, "Registration custom fields")) {
-        delete injectedTags["Registration custom fields"];
-      }
-      if (!_.has(nextProps.metaEntities.tags.custom, "Store custom fields")) {
-        delete injectedTags["Store custom fields"];
-      }
-      if (!_.has(nextProps.metaEntities.tags.custom, "Transaction custom fields")) {
-        delete injectedTags["Transaction custom fields"];
-      }
-      this.setState({injectedTags, loadingStatus: this.state.loadingStatus + 1});
-    }
-    // if (nextProps.metaEntities && nextProps.metaEntities.tags && nextProps.metaEntities.tags.length > 0 && _.isEmpty(this.state.schema)) {
-    //
-    //   this.injectEvents(nextProps.metaEntities.layouts[0].definition);
-    // }
   }
 
   componentWillUnmount() {
@@ -757,9 +736,11 @@ export class Create extends React.Component { // eslint-disable-line react/prefe
   }
 
   startTemplateCreation(data) {
+    console.log("reached here", data);
     if (data.edit) {
-      // const ifUnicode = checkUnicode(data.content ? data.content : '');
-
+      console.log('in if startTemplateCreation', data.tags);
+      const ifUnicode = checkUnicode(data.content ? data.content : '');
+      console.log('smsDetails', ifUnicode, data.content);
       const content = data.content;
       const id = _.uniqueId();
       const tempData = {
@@ -775,8 +756,10 @@ export class Create extends React.Component { // eslint-disable-line react/prefe
         this.setState({tabKey: ''});
       });
     } else {
+      console.log("in else startTemplateCreation: ", data.tags);
       this.setState({injectedTags: data.tags});
     }
+    this.props.globalActions.setInjectedTags(data.tags);
   }
 
   startLoading(ifEdit) {
@@ -932,9 +915,11 @@ export class Create extends React.Component { // eslint-disable-line react/prefe
     return isLoading;
   }
   render() {
+    console.log("this.props sms create: ", this.props);
     const schema = this.state.schema;
     const spinning = this.isSmsLoading();
-    let tags = this.props.metaEntities && this.props.metaEntities.tags ? this.props.metaEntities.tags.standard : [];
+    let tags = this.props.metaEntities && this.props.metaEntities.tags && this.props.metaEntities.tags.standard ? this.props.metaEntities.tags.standard : [];
+
     if (this.props.location.query.type === 'embedded' && this.props.location.query.module === 'library' && !this.props.getDefaultTags) {
       tags = this.props.supportedTags; // if get default tags is not present and supported tags is present use that inlbrary mode
     }
@@ -967,7 +952,7 @@ export class Create extends React.Component { // eslint-disable-line react/prefe
                 tabKey={this.state.tabKey}
                 tags={tags}
                 tagModule={this.props.getDefaultTags}
-                injectedTags={this.state.injectedTags ? this.state.injectedTags : {}}
+                injectedTags={this.props.injectedTags ? this.props.injectedTags : {}}
                 onFormValidityChange={this.setFormValidity}
                 usingTabContainer
                 checkValidation={this.state.checkValidation}
@@ -994,11 +979,11 @@ Create.propTypes = {
   intl: intlShape.isRequired,
   supportedTags: PropTypes.array,
   getDefaultTags: PropTypes.string,
-  isLoadingMetaEntities: PropTypes.bool,
-  // creativesContainerActions: PropTypes.object,
-  getFormSubscriptionData: PropTypes.func,
+  injectedTags: PropTypes.object,
+  setIsLoadingContent: PropTypes.bool,
   isFullMode: PropTypes.bool,
-  setIsLoadingContent: PropTypes.func,
+  getFormSubscriptionData: PropTypes.func,
+  isLoadingMetaEntities: PropTypes.bool,
 };
 
 const mapStateToProps = createStructuredSelector({
@@ -1006,6 +991,7 @@ const mapStateToProps = createStructuredSelector({
   createResponse: makeSelectCreateResponse(),
   metaEntities: makeSelectMetaEntities(),
   isLoadingMetaEntities: isLoadingMetaEntities(),
+  injectedTags: setInjectedTags(),
 });
 
 function mapDispatchToProps(dispatch) {

package/containers/Sms/Edit/index.js

@@ -15,7 +15,7 @@ import { createStructuredSelector } from 'reselect';
 import _ from 'lodash';
 import { bindActionCreators } from 'redux';
 import { makeSelectEdit, makeSelectEditResponse, makeSelectTemplateDetailsResponse } from './selectors';
-import { makeSelectMetaEntities, isLoadingMetaEntities } from '../../Cap/selectors';
+import { makeSelectMetaEntities, isLoadingMetaEntities, setInjectedTags } from '../../Cap/selectors';
 import { UserIsAuthenticated } from '../../../utils/authWrapper';
 import FormBuilder from '../../../components/FormBuilder';
 import * as actions from './actions';
@@ -170,24 +170,6 @@ export class Edit extends React.Component { // eslint-disable-line react/prefer-
       const message = getMessageObject('error', (nextProps.Edit.editTemplateErrorMessage && nextProps.Edit.editTemplateErrorMessage !== '') ? nextProps.Edit.editTemplateErrorMessage : this.props.intl.formatMessage(messages.somethingWentWrong), true);
       this.props.globalActions.addMessageToQueue(message);
     }
-    if (nextProps.metaEntities && nextProps.metaEntities.tags && nextProps.metaEntities.tags.custom && this.props.metaEntities.tags && this.props.metaEntities.tags.standard && (this.props.metaEntities.tags !== nextProps.metaEntities.tags)) {
-      let injectedTags = _.cloneDeep(this.state.injectedTags);
-      delete injectedTags["Registration custom fields"];
-      delete injectedTags["Store custom fields"];
-      delete injectedTags["Transaction custom fields"];
-      injectedTags = _.merge({}, injectedTags, nextProps.metaEntities.tags.custom);
-
-      if (!_.has(nextProps.metaEntities.tags.custom, "Registration custom fields")) {
-        delete injectedTags["Registration custom fields"];
-      }
-      if (!_.has(nextProps.metaEntities.tags.custom, "Store custom fields")) {
-        delete injectedTags["Store custom fields"];
-      }
-      if (!_.has(nextProps.metaEntities.tags.custom, "Transaction custom fields")) {
-        delete injectedTags["Transaction custom fields"];
-      }
-      this.setState({injectedTags});
-    }
   }
 
   componentWillUnmount() {
@@ -425,6 +407,7 @@ export class Edit extends React.Component { // eslint-disable-line react/prefer-
     } else {
       this.setState({injectedTags: data.tags});
     }
+    this.props.globalActions.setInjectedTags(data.tags);
   }
 
   startLoading(ifEdit) {
@@ -972,7 +955,7 @@ export class Edit extends React.Component { // eslint-disable-line react/prefer-
                 modal={this.state.modalContent}
                 tags={tags}
                 tagModule={this.props.getDefaultTags}
-                injectedTags={this.state.injectedTags ? this.state.injectedTags : {}}
+                injectedTags={this.props.injectedTags ? this.props.injectedTags : {}}
                 onFormValidityChange={this.setFormValidity}
                 usingTabContainer
                 checkValidation={this.state.checkValidation}
@@ -1005,6 +988,8 @@ Edit.propTypes = {
   isFullMode: PropTypes.bool,
   getFormSubscriptionData: PropTypes.func,
   setIsLoadingContent: PropTypes.func,
+  // route: PropTypes.object,
+  injectedTags: PropTypes.object,
 };
 
 const mapStateToProps = createStructuredSelector({
@@ -1012,6 +997,7 @@ const mapStateToProps = createStructuredSelector({
   editResponse: makeSelectEditResponse(),
   templateDetails: makeSelectTemplateDetailsResponse(),
   metaEntities: makeSelectMetaEntities(),
+  injectedTags: setInjectedTags(),
   isLoadingMetaEntities: isLoadingMetaEntities(),
 });
 

package/containers/Templates/index.js

@@ -13,8 +13,8 @@ import { createStructuredSelector } from 'reselect';
 import moment from "moment";
 import _ from 'lodash';
 import { bindActionCreators } from 'redux';
-import { Row, Dropdown, Menu, Modal} from 'antd';
-import {CapButton, CapInput, CapIcon, CapSelect, CapPopover, CapSpin, CapCustomCard, CapRow, CapColumn} from '@capillarytech/cap-ui-library';
+import { Dropdown, Menu, Modal} from 'antd';
+import {CapButton, CapInput, CapIcon, CapSelect, CapPopover, CapSpin, CapCustomCard, CapRow} 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';
@@ -43,6 +43,7 @@ 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;
 
@@ -86,7 +87,6 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
     this.startTemplateCreation = this.startTemplateCreation.bind(this);
     this.startLoading = this.startLoading.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);
@@ -478,9 +478,12 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
     return (<div>
       {filterContent}
       <CapSpin spinning={isLoading} tip={loadingTip}>
-        <div className="pagination-container">
+        {!_.isEmpty(templates) && <div className="pagination-container">
           <CapCustomCardList key={`${currentChannel}-card-list`} cardList={cardDataList} type={currentChannel} />
-        </div>
+        </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>);
@@ -506,10 +509,17 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
         query: type === 'embedded' ? {type: 'embedded', module, account_id: e.account_id} : {},
       };
     } else if (this.state.channel.toLowerCase() === 'wechat') {
-      routeParams = {
-        pathname: `/wechat/edit/${e.template_id}`,
-        query: type === 'embedded' ? {type: 'embedded', module, source_account_id: e.source_account_id} : {},
-      };
+      if (e.template_type && e.template_type === 'RICHMEDIA_WECHAT_TEMPLATE') {
+        this.props.router.push({
+          pathname: `/wechat/richmedia/edit/${e.template_id}`,
+          query: type === 'embedded' ? {type: 'embedded', module, source_account_id: e.source_account_id} : {},
+        });
+      } else {
+        this.props.router.push({
+          pathname: `/wechat/edit/${e.template_id}`,
+          query: type === 'embedded' ? {type: 'embedded', module, source_account_id: e.source_account_id} : {},
+        });
+      }
     } else if (this.state.channel.toLowerCase() === 'line') {
       routeParams = {
         pathname: `/line/view/${e.msg_type}/`,
@@ -590,7 +600,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
   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 template.versions.base.mediaList;
       }
       return this.prepareWeChatMappedPreviewData(template.versions.base.content, template.versions.base.Tag, template.versions.base.data);
     }
@@ -607,38 +617,6 @@ 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) {
@@ -1121,10 +1099,11 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
         if (template && template.versions && template.versions.base && !_.isEmpty(template.versions.base)) {
           if (template.definition && template.definition.msgcontent && template.definition.msgcontent === "RICH_MEDIA_WECHAT") {
             path = `/wechat/richmedia/edit/${template._id}`;
+            content = <WechatRichmediaTemplatePreview type={this.props.location && this.props.location.query.type ? this.props.location.query.type : ''} content={template.versions.base.mediaList}/>;
           } else {
             path = `/wechat/edit/${template._id}`;
+            content = this.prepareWeChatPreviewData(template);
           }
-          content = this.prepareWeChatPreviewData(template);
           temp.content = (
             <div
               className="sms-template-content">
@@ -1505,7 +1484,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
           {(this.props.location.query.type === 'embedded' ) ? pageHeaderDvs : pageHeader}
           <CapButton
             type={this.props.isFullMode ? "primary" : "secondary"}
-            disabled={isLoading}
+            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) }
@@ -1532,13 +1511,11 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
         <input type="file" id="filename" style={{ display: 'none'}} accept=".zip, .html, .htm" onChange={(event) => this.handleFileUpload(event, {files: event.target.files})} />
 
 
-        <Row>
-          { templateList && templateList.length > 0 &&
+        <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) &&
+          {!this.props.renderNewCardGrid && ((templateList && templateList.length > 0) || isSearch) && // old UI GRID
             <Pagination onPageChange={this.onPaginationChange} paginationSelector="pagination-container">
               <CardGrid
                 className={this.state.channel.toLowerCase() === "mobilepush" ? "mobilepush-templates" : ""}
@@ -1552,14 +1529,11 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
               >
               </CardGrid>
             </Pagination>}
-          {(this.state.selectedAccount === '' && _.isEmpty(this.props.Templates.selectedWeChatAccount)) && (this.state.channel.toLowerCase() === 'wechat' || this.state.channel.toLowerCase() === "mobilepush") && <div style={{ height: '65vh', textAlign: 'center', lineHeight: '65vh'}}>
-            <span style={{ fontFamily: 'open-sans', fontSize: '24px', color: '#B5B5B5'}}>{this.props.intl.formatMessage(messages.noAccountMessage)}</span>
-            </div>}
           {(((this.state.selectedAccount !== '' && !_.isEmpty(this.props.Templates.selectedWeChatAccount) && this.state.channel.toLowerCase() === 'wechat') || this.state.channel.toLowerCase() !== 'wechat') && _.isEmpty(this.props.TemplatesList)) && !this.props.Templates.getAllTemplatesInProgress && <div style={{ height: '65vh', textAlign: 'center', lineHeight: '65vh'}}>
             <span style={{ fontFamily: 'open-sans', fontSize: '24px', color: '#B5B5B5'}}>{this.props.intl.formatMessage(messages.noTemplatesMessage)}</span>
             </div>}
-        </Row>
-        <Row>
+        </CapRow>
+        <CapRow>
           {!_.isEmpty(creativesParams.mode) && isFullMode && //creatives container for fullmode
           <CreativesContainer
             key={creativesParams.mode}
@@ -1571,18 +1545,37 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
             getCreativesData={this.onCreateComplete}
             channel={route.name.toUpperCase()}
             handleCloseCreatives={this.onCreateComplete}/>
-            }
-          <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>
+          }
+        </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}
+                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}
@@ -1592,7 +1585,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
             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}
@@ -1603,7 +1596,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
             isLoading={this.props.Templates.getCmsTemplatesInProgress}
             />
           {this.renderDeleteConfirmationModal()}
-        </Row>
+        </CapRow>
 
       </div>
     );

package/containers/Templates/reducer.js

@@ -78,7 +78,7 @@ function templatesReducer(state = initialState, action) {
       return state
         .set('weCRMtemplates', fromJS([]))
         .set('weChatDefaultTemplate', fromJS([]))
-        .set('templates', fromJS([]));
+        .set('templates', []);
     case types.SET_SELECTED_LAYOUT:
       return state
         .set('selectedEmailLayout', fromJS(action.selectedTemplate))
@@ -106,7 +106,7 @@ function templatesReducer(state = initialState, action) {
       return state.set('getCmsTemplatesInProgress', true);
     case types.GET_EDM_DEAFULT_TEMPLATES_SUCCESS:
       return state.set('getCmsTemplatesInProgress', false)
-        .set('cmsTemplates', action.data ? fromJS(action.data.templates) : fromJS([]));
+        .set('cmsTemplates', action.data ? fromJS(action.data.templates) : []);
     case types.GET_EDM_DEAFULT_TEMPLATES_FAILURE:
       return state.set('getCmsTemplatesInProgress', false);
     case types.SET_EDM_TEMPLATE:
@@ -132,7 +132,7 @@ function templatesReducer(state = initialState, action) {
         .set('templateDetails', fromJS({}));
     case types.CLEAR_TEMPLATE_STORE_DATA:
       return state
-        .set('templates', fromJS({}))
+        .set('templates', [])
         .set('weCRMtemplates', fromJS({}));
     default:
       return state;

package/containers/WeChat/MapTemplates/index.js

@@ -15,7 +15,7 @@ import { createStructuredSelector } from 'reselect';
 import { Row, Col, Spin } from 'antd';
 import _ from 'lodash';
 import { makeSelectTemplates } from '../../Templates/selectors';
-import { makeSelectMetaEntities, makeSelectFetchingSchema } from '../../Cap/selectors';
+import { makeSelectMetaEntities, makeSelectFetchingSchema, setInjectedTags } from '../../Cap/selectors';
 import makeSelectWeChat from './selectors';
 import messages from './messages';
 import * as actions from './actions';
@@ -304,25 +304,6 @@ export class MapTemplates extends React.Component { // eslint-disable-line react
         }
       }
 
-      if (nextProps.metaEntities && nextProps.metaEntities.tags && nextProps.metaEntities.tags.custom && this.props.metaEntities.tags !== nextProps.metaEntities.tags) {
-        let injectedTags = _.cloneDeep(this.state.injectedTags);
-        delete injectedTags["Registration custom fields"];
-        delete injectedTags["Store custom fields"];
-        delete injectedTags["Transaction custom fields"];
-        injectedTags = _.merge({}, injectedTags, nextProps.metaEntities.tags.custom);
-        console.log('new injected tags', nextProps.metaEntities.tags.custom);
-        if (!_.has(nextProps.metaEntities.tags.custom, "Registration custom fields")) {
-          delete injectedTags["Registration custom fields"];
-        }
-        if (!_.has(nextProps.metaEntities.tags.custom, "Store custom fields")) {
-          delete injectedTags["Store custom fields"];
-        }
-        if (!_.has(nextProps.metaEntities.tags.custom, "Transaction custom fields")) {
-          delete injectedTags["Transaction custom fields"];
-        }
-        this.setState({injectedTags});
-      }
-
       // if (this.props.location.query.type.type === 'embedded' && this.props.location.query.module === 'loyalty' && this.state.formData['wechat-template'] !== '') {
       // }
       if (!nextProps.WeChat.fetchingDefaultTemplates && nextProps.location.query.module === 'outbound' && nextProps.params.id !== undefined) {
@@ -600,8 +581,9 @@ export class MapTemplates extends React.Component { // eslint-disable-line react
 
   setSelectedTemplateData(weChatData) {
     let schema = _.cloneDeep(this.state.baseSchema);
+    schema.standalone.sections[0].childSections[1].childSections[0].childSections[1].inputFields = [];
     if (_.isEmpty(weChatData)) {
-      schema.standalone.sections[0].childSections[1].childSections[0].childSections[1].inputFields = [];
+      // schema.standalone.sections[0].childSections[1].childSections[0].childSections[1].inputFields = [];
       const formData=_.cloneDeep(this.state.formData);
       formData['wechat-template']="";
       this.setState({schema,formData});
@@ -1350,7 +1332,7 @@ export class MapTemplates extends React.Component { // eslint-disable-line react
               location= {this.props.location}
               tags={tags}
               tagModule={this.props.getDefaultTags}
-              injectedTags={this.state.injectedTags ? this.state.injectedTags : {}}
+              injectedTags={this.props.injectedTags ? this.props.injectedTags : {}}
               isEdit={this.state.isEdit}
               usingTabContainer={false}
               router={this.props.router}
@@ -1381,6 +1363,7 @@ MapTemplates.propTypes = {
   getDefaultTags: PropTypes.string,
   templateData: PropTypes.object,
   templateActions: PropTypes.object,
+  injectedTags: PropTypes.object,
 };
 
 const mapStateToProps = createStructuredSelector({
@@ -1388,6 +1371,7 @@ const mapStateToProps = createStructuredSelector({
   Templates: makeSelectTemplates(),
   metaEntities: makeSelectMetaEntities(),
   fetchingSchema: makeSelectFetchingSchema(),
+  injectedTags: setInjectedTags(),
 });
 
 function mapDispatchToProps(dispatch) {