@capillarytech/creatives-library 7.18.0-beta.0 → 8.0.0

package/containers/MobilePush/Edit/index.js

@@ -8,7 +8,7 @@
 import PropTypes from 'prop-types';
 
 import React from 'react';
-import {bindActionCreators} from "redux";
+import { bindActionCreators, compose } from "redux";
 import { connect } from 'react-redux';
 import { Row, Col, Spin, Breadcrumb, notification } from 'antd';
 import { createStructuredSelector } from 'reselect';
@@ -25,6 +25,13 @@ import {makeSelectTemplates} from "../../Templates/selectors";
 import messages from './messages';
 import './_mobilePushCreate.scss';
 import {makeSelectCreate} from "../Create/selectors";
+import injectSaga from "../../../utils/injectSaga";
+import injectReducer from '../../../utils/injectReducer';
+import reducer from './reducer';
+import { editMPushSaga } from './sagas';
+import { templateSaga } from '../../Templates/sagas';
+import { UserIsAuthenticated } from '../../../utils/authWrapper';
+
 const BreadcrumbItem = Breadcrumb.Item;
 
 export class Edit extends React.Component { // eslint-disable-line react/prefer-stateless-function
@@ -1779,7 +1786,6 @@ export class Edit extends React.Component { // eslint-disable-line react/prefer-
           temp.content.appName = this.props.Templates.selectedWeChatAccount.name;
         }
         _.forEach(col.supportedEvents, (event) => {
-          console.log('injected event for ', col, event, this.getMappedEvent(col.id, event));
           temp.injectedEvents[event] = this.getMappedEvent(col.id, event);
         });
         return true;
@@ -2573,4 +2579,15 @@ function mapDispatchToProps(dispatch) {
   };
 }
 
-export default connect(mapStateToProps, mapDispatchToProps)(injectIntl(Edit));
+const withConnect = connect(mapStateToProps, mapDispatchToProps);
+const withReducer = injectReducer({ key: 'mobileEdit', reducer });
+const withSaga = injectSaga({ key: 'mobileEdit', saga: editMPushSaga });
+const withTemplatesSaga = injectSaga({ key: 'templates', saga: templateSaga });
+
+export default compose(
+  UserIsAuthenticated,
+  withReducer,
+  withSaga,
+  withTemplatesSaga,
+  withConnect,
+)(injectIntl(Edit));

package/containers/MobilePush/Edit/sagas.js

@@ -1,5 +1,4 @@
-import { call, put, takeLatest, take, cancel } from 'redux-saga/effects';
-import { LOCATION_CHANGE } from 'react-router-redux';
+import { call, put, takeLatest, take, cancel, all } from 'redux-saga/effects';
 // import { schema, normalize } from 'normalizr';
 import * as Api from '../../../services/api';
 import * as types from './constants';
@@ -78,36 +77,36 @@ export function* fetchWeCrmAccounts(action) {
 }
 
 function* watchFetchWeCrmAccounts() {
-  const watcher = yield takeLatest(types.GET_WECRM_ACCOUNTS_REQUEST, fetchWeCrmAccounts);
-  yield take(LOCATION_CHANGE);
-  yield cancel(watcher);
+  yield takeLatest(types.GET_WECRM_ACCOUNTS_REQUEST, fetchWeCrmAccounts);
+  
+  
 }
 
 function* watchEditTemplate() {
-  const watcher = yield takeLatest(types.EDIT_TEMPLATE_REQUEST, editTemplate);
-  yield take(LOCATION_CHANGE);
-  yield cancel(watcher);
+  yield takeLatest(types.EDIT_TEMPLATE_REQUEST, editTemplate);
+  
+  
 }
 
 function* watchGetTemplateDetails() {
-  const watcher = yield takeLatest(types.GET_TEMPLATE_DETAILS_REQUEST, getTemplateDetails);
-  yield take(LOCATION_CHANGE);
-  yield cancel(watcher);
+  yield takeLatest(types.GET_TEMPLATE_DETAILS_REQUEST, getTemplateDetails);
+  
+  
 }
 function* watchUploadAsset() {
-  const watcher = yield takeLatest(types.UPLOAD_ASSET_REQUEST, uploadAsset);
-  yield take(LOCATION_CHANGE);
-  yield cancel(watcher);
+  yield takeLatest(types.UPLOAD_ASSET_REQUEST, uploadAsset);
+  
+  
 }
 function* watchGetIosCtas() {
-  const watcher = yield takeLatest(types.GET_IOS_CTAS, getIosCtas);
-  yield take(LOCATION_CHANGE);
-  yield cancel(watcher);
+  yield takeLatest(types.GET_IOS_CTAS, getIosCtas);
+  
+  
 }
 function* watchMobilepushTemplatesList() {
-  const watcher = yield takeLatest(types.GET_MOBILEPUSH_TEMPLATES_LIST_REQUEST, getMobilepushTemplatesList);
-  yield take(LOCATION_CHANGE);
-  yield cancel(watcher);
+  yield takeLatest(types.GET_MOBILEPUSH_TEMPLATES_LIST_REQUEST, getMobilepushTemplatesList);
+  
+  
 }
 
 // All sagas to be loaded
@@ -116,3 +115,14 @@ export default [
   watchUploadAsset,
   watchGetIosCtas,
 ];
+
+export function* editMPushSaga() {
+  yield all([
+    watchEditTemplate(),
+    watchGetTemplateDetails(),
+    watchFetchWeCrmAccounts(),
+    watchMobilepushTemplatesList(),
+    watchUploadAsset(),
+    watchGetIosCtas(),
+  ]);
+}

package/containers/Sms/Create/index.js

@@ -12,7 +12,7 @@ import { Row, Col, Spin } from 'antd';
 import { injectIntl, intlShape } from 'react-intl';
 import { createStructuredSelector } from 'reselect';
 import _ from 'lodash';
-import { bindActionCreators } from 'redux';
+import { bindActionCreators, compose} from 'redux';
 import { makeSelectCreate, makeSelectCreateResponse } from './selectors';
 import { makeSelectMetaEntities, setInjectedTags } from '../../Cap/selectors';
 import { UserIsAuthenticated } from '../../../utils/authWrapper';
@@ -23,6 +23,10 @@ import messages from './messages';
 import {checkUnicode, updateCharCount} from '../../../utils/smsCharCountV2';
 import * as globalActions from '../../../containers/Cap/actions';
 import {getMessageObject} from '../../../utils/messageUtils';
+import injectSaga from '../../../utils/injectSaga';
+import injectReducer from '../../../utils/injectReducer';
+import reducer from './reducer';
+import { createSmsSaga } from './sagas';
 
 export class Create extends React.Component { // eslint-disable-line react/prefer-stateless-function
   constructor(props) {
@@ -1471,4 +1475,13 @@ function mapDispatchToProps(dispatch) {
   };
 }
 
-export default UserIsAuthenticated(connect(mapStateToProps, mapDispatchToProps)(injectIntl(Create)));
+const withConnect = connect(mapStateToProps, mapDispatchToProps);
+const withReducer = injectReducer({ key: 'create', reducer });
+const withCreateSmsSaga = injectSaga({ key: 'create', saga: createSmsSaga });
+
+export default compose(
+  UserIsAuthenticated,
+  withCreateSmsSaga,
+  withReducer,
+  withConnect,
+)(injectIntl(Create));

package/containers/Sms/Create/sagas.js

@@ -1,6 +1,4 @@
-import { take, cancel, call, put, takeLatest } from 'redux-saga/effects';
-import { LOCATION_CHANGE } from 'react-router-redux';
-// import { LOCATION_CHANGE } from 'react-router-redux';
+import { take, cancel, call, put, takeLatest, all } from 'redux-saga/effects';
 // import { schema, normalize } from 'normalizr';
 import * as Api from '../../../services/api';
 import * as types from './constants';
@@ -25,12 +23,16 @@ export function* createTemplate(template) {
 
 function* watchCreateTemplate() {
   
-  const watcher = yield takeLatest(types.CREATE_TEMPLATE_REQUEST, createTemplate);
-  yield take(LOCATION_CHANGE);
-  yield cancel(watcher);
+  yield takeLatest(types.CREATE_TEMPLATE_REQUEST, createTemplate);
 }
 
 // All sagas to be loaded
 export default [
   watchCreateTemplate,
 ];
+
+export function* createSmsSaga() {
+  yield all([
+    watchCreateTemplate(),
+  ]);
+}

package/containers/Sms/Edit/index.js

@@ -13,7 +13,7 @@ import { Row, Col, Spin } from 'antd';
 import { injectIntl, intlShape } from 'react-intl';
 import { createStructuredSelector } from 'reselect';
 import _ from 'lodash';
-import { bindActionCreators } from 'redux';
+import { bindActionCreators, compose } from 'redux';
 import { makeSelectEdit, makeSelectEditResponse, makeSelectTemplateDetailsResponse } from './selectors';
 import { makeSelectMetaEntities, setInjectedTags } from '../../Cap/selectors';
 import { UserIsAuthenticated } from '../../../utils/authWrapper';
@@ -24,7 +24,10 @@ import '../Create/_smsCreate.scss';
 import messages from './messages';
 import * as globalActions from '../../../containers/Cap/actions';
 import {getMessageObject} from '../../../utils/messageUtils';
-
+import injectSaga from '../../../utils/injectSaga';
+import injectReducer from '../../../utils/injectReducer';
+import reducer from './reducer';
+import { editSmsSaga } from './sagas';
 export class Edit extends React.Component { // eslint-disable-line react/prefer-stateless-function
   constructor(props) {
     super(props);
@@ -1456,4 +1459,13 @@ function mapDispatchToProps(dispatch) {
   };
 }
 
-export default UserIsAuthenticated(connect(mapStateToProps, mapDispatchToProps)(injectIntl(Edit)));
+const withConnect = connect(mapStateToProps, mapDispatchToProps);
+const withReducer = injectReducer({ key: 'edit', reducer });
+const withEditSmsSaga = injectSaga({ key: 'edit', saga: editSmsSaga });
+
+export default compose(
+  UserIsAuthenticated,
+  withEditSmsSaga,
+  withReducer,
+  withConnect,
+)(injectIntl(Edit));

package/containers/Sms/Edit/sagas.js

@@ -1,5 +1,4 @@
-import { call, put, takeLatest, take, cancel } from 'redux-saga/effects';
-import { LOCATION_CHANGE } from 'react-router-redux';
+import { call, put, takeLatest, take, cancel, all } from 'redux-saga/effects';
 // import { schema, normalize } from 'normalizr';
 import * as Api from '../../../services/api';
 import * as types from './constants';
@@ -35,18 +34,25 @@ export function* getTemplateDetails(id) {
 
 
 function* watchEditTemplate() {
-  const watcher = yield takeLatest(types.EDIT_TEMPLATE_REQUEST, editTemplate);
-  yield take(LOCATION_CHANGE);
-  yield cancel(watcher);
+  yield takeLatest(types.EDIT_TEMPLATE_REQUEST, editTemplate);
+  
+  
 }
 
 function* watchGetTemplateDetails() {
-  const watcher = yield takeLatest(types.GET_TEMPLATE_DETAILS_REQUEST, getTemplateDetails);
-  yield take(LOCATION_CHANGE);
-  yield cancel(watcher);
+  yield takeLatest(types.GET_TEMPLATE_DETAILS_REQUEST, getTemplateDetails);
+  
+  
 }
 
 // All sagas to be loaded
 export default [
   watchEditTemplate, watchGetTemplateDetails,
 ];
+
+export function* editSmsSaga() {
+  yield all([
+    watchEditTemplate(),
+    watchGetTemplateDetails(),
+  ]);
+}

package/containers/TagList/constants.js

@@ -5,3 +5,26 @@
  */
 
 export const DEFAULT_ACTION = 'app/TagList/DEFAULT_ACTION';
+
+export const JAPANESE_HELP_TEXT = 'ヘルプ :トークンの定義';
+
+export const TAG_TRANSLATION_DOC = 'https://docs.capillarytech.com/docs/tags-translation';
+
+export const GET_TRANSLATION_MAPPED = {
+  'en': 'en-US',
+  'zh-cn': 'zh',
+  'zh': 'zh',
+  'en-US': 'en-US',
+  'ja-JP': 'ja-JP',
+};
+
+export const JAPANESE_HIDE_DATE_TAGS = [
+  "mm/dd/yyyy",
+  "dd/mm/yyyy",
+  "mm/dd/yy",
+  "dd Mon yyyy",
+  "Day, Mon dd, yy",
+  "dd.mm.yy",
+  "dd Mon",
+  "dd/m/yyyy",
+];

package/containers/Templates/actions.js

@@ -7,7 +7,6 @@
  import * as types from './constants';
 
  export function getAllTemplates(channel, queryParams) {
-   
    return {
      type: types.GET_ALL_TEMPLATES_REQUEST, channel, queryParams,
    };
@@ -26,7 +25,6 @@
  }
 
  export function deleteTemplate(channel, id) {
-   
    return {
      type: types.DELETE_TEMPLATE_REQUEST, channel, id,
    };
@@ -45,7 +43,6 @@
  }
 
  export function setWeChatAccount(weChatAccount) {
-   
    return {
      type: types.SET_WECHAT_ACCOUNT,
      weChatAccount,
@@ -80,7 +77,6 @@
  }
 
  export function getTemplateDetails(id, channel) {
-   
    return {
      type: types.GET_TEMPLATE_DETAILS_REQUEST,
      id,
@@ -95,7 +91,6 @@
  }
 
  export function resetUploadData() {
-   
    return {
      type: types.RESET_UPLOAD_DATA,
    };

package/containers/Templates/index.js

@@ -13,7 +13,7 @@ import { injectIntl, intlShape } from 'react-intl';
 import { createStructuredSelector } from 'reselect';
 import moment from "moment";
 import _ from 'lodash';
-import { bindActionCreators } from 'redux';
+import { bindActionCreators, compose } from 'redux';
 import { Row, Select, Spin, Dropdown, Col, Breadcrumb, Menu, Modal} from 'antd';
 import { CapInput, CapButton, CapPopover, CapSelect } from '@capillarytech/cap-react-ui-library/';
 import { makeSelectTemplates, makeSelectTemplatesResponse } from './selectors';
@@ -44,6 +44,18 @@ import SlideBox from '../../components/SlideBox';
 import Pagination from '../../components/Pagination';
 import EmailPreview from '../../components/EmailPreview';
 import WechatRichmediaTemplatePreview from '../../components/TemplatePreview/WechatRichmediaTemplatePreview';
+import { EMAIL } from '../../v2Containers/App/constants';
+import injectSaga from '../../utils/injectSaga';
+import injectReducer from '../../utils/injectReducer';
+import { templateSaga } from './sagas';
+import { createSmsSaga } from '../Sms/Create/sagas';
+import { editSmsSaga } from '../Sms/Edit/sagas';
+import { emailSaga } from '../Email/sagas';
+import reducer from './reducer';
+import mobilePushCreateReducer from '../MobilePush/Create/reducer';
+import lineCreateReducer from '../Line/Create/reducer';
+import { ebillSaga } from '../Ebill/sagas';
+import { lineCreateSaga } from '../Line/Create/sagas';
 
 const MenuItem = Menu.Item;
 const Option = Select.Option;
@@ -232,7 +244,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
             this.getAllTemplates({params});
           });
         }
-      } else if (this.state.channel.toLowerCase() === 'mobilepush' && (nextProps.location.query.account_id || nextProps.location.query.source_account_id)) {
+      } else if (this.state.channel.toLowerCase() === 'mobilepush' && (nextProps.location.query.account_id ||  nextProps.location.query.source_account_id)) {
         _.forEach(nextProps.Templates.weCrmAccounts, (account) => {
           if ((nextProps.location.query.account_id && account.id === Number(nextProps.location.query.account_id)) || (nextProps.location.query.source_account_id && account.sourceAccountIdentifier && account.sourceAccountIdentifier === nextProps.location.query.source_account_id)) {
             selectedAccount = account;
@@ -308,9 +320,9 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
     if (!nextProps.Templates.sendingFile && !_.isEqual(this.props.Templates.sendingFile, nextProps.Templates.sendingFile) && !nextProps.Templates.errorSendingFile) {
       
       const module = this.props.location.query.module ? this.props.location.query.module : 'default';
-      const isLanguageSupport = (this.props.location.query.isLanguageSupport) ? this.props.location.query.isLanguageSupport : true;
-      const isEdmSupport = (this.props.location.query.isEdmSupport !== "false") || false;
-      const type = this.props.location.query.type;
+      const isLanguageSupport = searchParams.get('isLanguageSupport') ? searchParams.get('isLanguageSupport') : true;
+      const isEdmSupport = (searchParams.get('isEdmSupport') !== "false") || false;
+      const type = searchParams.get('type');
       if (this.isEnabledInLibraryModule("callCreateFromProps")) {
         this.props.createNew();
         return;
@@ -456,7 +468,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
     };
     parent.postMessage(JSON.stringify(response), '*');
   }
-
+ 
   skipTemplateSelection = (e) => {
     
     const type = this.props.location.query.type;
@@ -538,7 +550,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
     const fileExtension = files[0].name.split('.').pop();
     const supportedZipFormats = ['zip'];
     const module = this.props.location.query.module ? this.props.location.query.module : 'default';
-    const isLanguageSupport = (this.props.location.query.isLanguageSupport) ? this.props.location.query.isLanguageSupport : true;
+    const isLanguageSupport = this.props.location.query.isLanguageSupport ? this.props.location.query.isLanguageSupport : true;
     const isEdmSupport = (this.props.location.query.isEdmSupport !== "false") || false;
     
     if (supportedZipFormats.indexOf(fileExtension.toLowerCase()) !== -1) {
@@ -756,7 +768,6 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
 
   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':
@@ -866,7 +877,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
   duplicateTemplate(template) {
     
     const duplicateObj = _.cloneDeep(template);
-    duplicateObj.name = `Copy of ${template.name} ${moment().format('MM-DD-YYYY HH:mm:ss')}`;
+    duplicateObj.name = `${this.props.intl.formatMessage(messages.copyOf)} ${template.name} ${moment().format('MM-DD-YYYY HH:mm:ss')}`;
     delete duplicateObj._id;
     if (this.state.channel.toLowerCase() === "sms") {
       this.props.smsActions.createTemplate(duplicateObj);
@@ -899,9 +910,9 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
   handleEdmDefaultTemplateSelection = (isSelected, id) => {
     if (isSelected) {
       const data = _.find(this.props.Templates.cmsTemplates, {_id: id});
-      const type = this.props.location.query.type;
+      const type = this.props.location.query.type
       const module = this.props.location.query.module ? this.props.location.query.module : 'default';
-      const isLanguageSupport = (this.props.location.query.isLanguageSupport) ? this.props.location.query.isLanguageSupport : true;
+      const isLanguageSupport = this.props.location.query.isLanguageSupport ? this.props.location.query.isLanguageSupport : true;
       const isEdmSupport = (this.props.location.query.isEdmSupport !== "false") || false;
       let getQuery = '';
       
@@ -984,7 +995,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
       templateInfo.appName = this.props.Templates.selectedWeChatAccount.name;
     } else if (this.state.channel.toLowerCase() === "email") {
       
-      this.props.actions.getTemplateDetails(template._id);
+      this.props.actions.getTemplateDetails(template._id, EMAIL);
     } else if (this.state.channel.toLowerCase() === 'ebill') {
       this.props.actions.getTemplateDetails(template._id);
     }
@@ -1613,7 +1624,6 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
                   location={this.props.location}
                 >
                 </PreviewSideBar>
-
             }
             {(this.state.channel.toLowerCase() === 'ebill' || this.state.channel.toLowerCase() === 'email') && htmlPreviewContent && <EmailPreview
               header={previewHeader}
@@ -1688,4 +1698,27 @@ function mapDispatchToProps(dispatch) {
   };
 }
 
-export default UserIsAuthenticated(connect(mapStateToProps, mapDispatchToProps)(injectIntl(Templates)));
+const withSaga = injectSaga({ key: 'templates', saga: templateSaga });
+const withCreateSmsSaga = injectSaga({ key: 'create', saga: createSmsSaga });
+const withEditSmsSaga = injectSaga({ key: 'edit', saga: editSmsSaga });
+const withEmailSaga = injectSaga({ key: 'email', saga: emailSaga });
+const withEbillSaga = injectSaga({ key: 'ebill', saga: ebillSaga });
+const withLineCreateSaga = injectSaga({ key: 'line', saga: lineCreateSaga });
+const withReducer = injectReducer({ key: 'templates', reducer });
+const withMPushCreateReducer = injectReducer({ key: 'mobileCreate', reducer: mobilePushCreateReducer });
+const withLineCreateReducer = injectReducer({ key: 'lineTemplates', reducer: lineCreateReducer});
+const withConnect = connect(mapStateToProps, mapDispatchToProps);
+
+export default compose(
+  UserIsAuthenticated,
+  withSaga,
+  withCreateSmsSaga,
+  withEditSmsSaga,
+  withEmailSaga,
+  withEbillSaga,
+  withLineCreateSaga,
+  withReducer,
+  withMPushCreateReducer,
+  withLineCreateReducer,
+  withConnect,
+)(injectIntl(Templates));

package/containers/Templates/sagas.js

@@ -1,5 +1,4 @@
-import { call, put, takeLatest, take, cancel } from 'redux-saga/effects';
-import { LOCATION_CHANGE } from 'react-router-redux';
+import { call, put, takeLatest, take, cancel, all } from 'redux-saga/effects';
 // import { schema, normalize } from 'normalizr';
 import * as Api from '../../services/api';
 import * as types from './constants';
@@ -122,46 +121,32 @@ export function* getTemplateDetails(id, channel) {
 }
 
 function* watchGetAllTemplates() {
-  const watcher = yield takeLatest(types.GET_ALL_TEMPLATES_REQUEST, getAllTemplates);
-  yield take(LOCATION_CHANGE);
-  yield cancel(watcher);
+  yield takeLatest(types.GET_ALL_TEMPLATES_REQUEST, getAllTemplates);
 }
 
 function* watchDeleteTemplate() {
-  const watcher = yield takeLatest(types.DELETE_TEMPLATE_REQUEST, deleteTemplate);
-  yield take(LOCATION_CHANGE);
-  yield cancel(watcher);
+  yield takeLatest(types.DELETE_TEMPLATE_REQUEST, deleteTemplate);
 }
 
 function* watchGetUserList() {
-  const watcher = yield takeLatest(types.GET_USER_LIST_REQUEST, fetchUserList);
-  yield take(LOCATION_CHANGE);
-  yield cancel(watcher);
+  yield takeLatest(types.GET_USER_LIST_REQUEST, fetchUserList);
 }
 
 function* watchFetchWeCrmAccounts() {
   
-  const watcher = yield takeLatest(types.GET_WECRM_ACCOUNTS_REQUEST, fetchWeCrmAccounts);
-  yield take(LOCATION_CHANGE);
-  yield cancel(watcher);
+  yield takeLatest(types.GET_WECRM_ACCOUNTS_REQUEST, fetchWeCrmAccounts);
 }
 
 function* watchSendingFile() {
-  const watcher = yield takeLatest(types.SEND_ZIPPED_FILE_REQUEST, sendZippedFile);
-  yield take(LOCATION_CHANGE);
-  yield cancel(watcher);
+  yield takeLatest(types.SEND_ZIPPED_FILE_REQUEST, sendZippedFile);
 }
 
 function* watchGetEdmDefaultTemplates() {
-  const watcher = yield takeLatest(types.GET_EDM_DEAFULT_TEMPLATES_REQUEST, getEdmTemplates);
-  yield take(LOCATION_CHANGE);
-  yield cancel(watcher);
+  yield takeLatest(types.GET_EDM_DEAFULT_TEMPLATES_REQUEST, getEdmTemplates);
 }
 
 function* watchGetTemplateDetails() {
-  const watcher = yield takeLatest(types.GET_TEMPLATE_DETAILS_REQUEST, getTemplateDetails);
-  yield take(LOCATION_CHANGE);
-  yield cancel(watcher);
+  yield takeLatest(types.GET_TEMPLATE_DETAILS_REQUEST, getTemplateDetails);
 }
 
 // All sagas to be loaded
@@ -174,3 +159,15 @@ export default [
   watchGetEdmDefaultTemplates,
   watchGetTemplateDetails,
 ];
+
+export function* templateSaga() {
+  yield all([
+    watchGetAllTemplates(),
+    watchDeleteTemplate(),
+    watchGetUserList(),
+    watchFetchWeCrmAccounts(),
+    watchSendingFile(),
+    watchGetEdmDefaultTemplates(),
+    watchGetTemplateDetails(),
+  ]);
+}

package/containers/WeChat/MapTemplates/index.js

@@ -8,7 +8,7 @@ import PropTypes from 'prop-types';
 
 import React from 'react';
 import { connect } from 'react-redux';
-import { bindActionCreators } from 'redux';
+import { bindActionCreators, compose } from 'redux';
 import Helmet from 'react-helmet';
 import { injectIntl, intlShape } from 'react-intl';
 import { createStructuredSelector } from 'reselect';
@@ -28,6 +28,12 @@ import * as templateActions from '../../Templates/actions';
 // import SlideBox from '../../components/SlideBox';
 // import PageHeader from '../../components/PageHeader';
 import './_mapTemplates.scss';
+import injectSaga from '../../../utils/injectSaga';
+import injectReducer from '../../../utils/injectReducer';
+import reducer from './reducer';
+import { mapTemplatesSaga } from './sagas';
+import { templateSaga } from '../../Templates/sagas';
+
 // const Option = Select.Option;
 const URL = "URL";
 const MINI_PROGRAM = "Mini-Program";
@@ -1589,4 +1595,15 @@ function mapDispatchToProps(dispatch) {
   };
 }
 
-export default UserIsAuthenticated(connect(mapStateToProps, mapDispatchToProps)(injectIntl(MapTemplates)));
+const withConnect = connect(mapStateToProps, mapDispatchToProps);
+const withReducer = injectReducer({ key: 'weChat', reducer });
+const withSaga = injectSaga({ key: 'weChat', saga: mapTemplatesSaga });
+const withTemplateSaga = injectSaga({ key: 'template', saga: templateSaga });
+
+export default compose(
+  UserIsAuthenticated,
+  withReducer,
+  withSaga,
+  withTemplateSaga,
+  withConnect,
+)(injectIntl(MapTemplates));

package/containers/WeChat/MapTemplates/sagas.js

@@ -1,13 +1,12 @@
-import { take, call, put, takeLatest, cancel } from 'redux-saga/effects';
-import { LOCATION_CHANGE } from 'react-router-redux';
+import { take, call, put, takeLatest, cancel, all } from 'redux-saga/effects';
 import * as Api from '../../../services/api';
 import * as types from './constants';
 
 export function* getDefaultWeChatTemplates(params) {
   try {
-    
-    const result = yield call(Api.getAllTemplates, {channel: params.channel, queryParams: params.queryParams});
-    yield put({ type: types.GET_WECHAT_DEFAULT_TEMPLATES_SUCCESS, data: result.response.unMapped, templateData: result.response.mapped});
+
+    const result = yield call(Api.getAllTemplates, { channel: params.channel, queryParams: params.queryParams });
+    yield put({ type: types.GET_WECHAT_DEFAULT_TEMPLATES_SUCCESS, data: result.response.unMapped, templateData: result.response.mapped });
   } catch (error) {
     yield put({ type: types.GET_WECHAT_DEFAULT_TEMPLATES_FAILURE, error });
   }
@@ -54,27 +53,19 @@ export function* getTemplateDetails(id) {
 }
 
 function* watchGetDefaultWechatTemplates() {
-  const watcher = yield takeLatest(types.GET_WECHAT_DEFAULT_TEMPLATES_REQUEST, getDefaultWeChatTemplates);
-  yield take(LOCATION_CHANGE);
-  yield cancel(watcher);
+  yield takeLatest(types.GET_WECHAT_DEFAULT_TEMPLATES_REQUEST, getDefaultWeChatTemplates);
 }
 
 function* watchCreateTemplate() {
-  const watcher = yield takeLatest(types.CREATE_TEMPLATE_REQUEST, createTemplate);
-  yield take(LOCATION_CHANGE);
-  yield cancel(watcher);
+  yield takeLatest(types.CREATE_TEMPLATE_REQUEST, createTemplate);
 }
 
 function* watchFetchWeCrmAccounts() {
-  const watcher = yield takeLatest(types.GET_WECRM_ACCOUNTS_REQUEST, fetchWeCrmAccounts);
-  yield take(LOCATION_CHANGE);
-  yield cancel(watcher);
+  yield takeLatest(types.GET_WECRM_ACCOUNTS_REQUEST, fetchWeCrmAccounts);
 }
 
 function* watchGetTemplateDetails() {
-  const watcher = yield takeLatest(types.GET_TEMPLATE_DETAILS_REQUEST, getTemplateDetails);
-  yield take(LOCATION_CHANGE);
-  yield cancel(watcher);
+  yield takeLatest(types.GET_TEMPLATE_DETAILS_REQUEST, getTemplateDetails);
 }
 
 // All sagas to be loaded
@@ -84,3 +75,12 @@ export default [
   watchFetchWeCrmAccounts,
   watchGetTemplateDetails,
 ];
+
+export function* mapTemplatesSaga() {
+  yield all([
+    watchGetDefaultWechatTemplates(),
+    watchCreateTemplate(),
+    watchFetchWeCrmAccounts(),
+    watchGetTemplateDetails(),
+  ]);
+}