@capillarytech/creatives-library 2.0.65 → 2.0.68

package/components/Header/index.js

@@ -6,24 +6,27 @@
 
 import React, { PropTypes } from 'react';
 // import styled from 'styled-components';
+import { FormattedMessage } from 'react-intl';
 
 import { CapRow, CapColumn, CapInput, CapButton } from '@capillarytech/cap-ui-library';
+import messages from './messages';
+
 
 function Header(props) {
   return (
     <div>
       <CapRow className="template-form-header">
         <CapColumn span={10}>
-          <CapInput id="template-name" errorMessage="Template name cannot be empty" placeholder="Enter template name*" defaultValue={props.templateName} type="input" onChange={props.templateNameHandler}/>
+          <CapInput id="template-name" placeholder="Enter template name*" defaultValue={props.templateName} type="input" onChange={props.templateNameHandler}/>
         </CapColumn>
         <CapColumn span={2} offset={8}>
-          <CapButton id="preview-button" type="cancel" onClick={props.previewHandler}> Preview </CapButton>
+          <CapButton id="preview-button" type="cancel" onClick={props.previewHandler}> <FormattedMessage {...messages.preview} /> </CapButton>
         </CapColumn>
         <CapColumn span={2}>
-          <CapButton id="cancel-button" type="cancel" onClick={props.cancelHandler}> Cancel </CapButton>
+          <CapButton id="cancel-button" type="cancel" onClick={props.cancelHandler}> <FormattedMessage {...messages.cancel} /> </CapButton>
         </CapColumn>
         <CapColumn span={2}>
-          <CapButton id="save-button" type="primary" onClick={props.saveHandler}> Save </CapButton>
+          <CapButton id="save-button" type="primary" onClick={props.saveHandler}> <FormattedMessage {...messages.save} /> </CapButton>
         </CapColumn>
       </CapRow>
     </div>

package/components/Header/messages.js

@@ -10,4 +10,16 @@ export default defineMessages({
     id: 'app.components.Header.header',
     defaultMessage: 'This is the Header component !',
   },
+  preview: {
+    id: 'app.components.Header.preview',
+    defaultMessage: 'Preview',
+  },
+  cancel: {
+    id: 'app.components.Header.cancel',
+    defaultMessage: 'Cancel',
+  },
+  save: {
+    id: 'app.components.Header.save',
+    defaultMessage: 'Save',
+  },
 });

package/components/TemplatePreview/WechatRichmediaTemplatePreview/_wechatRichmediaTemplatePrev.scss

@@ -0,0 +1,42 @@
+.wechatMsgContainer{
+    position: absolute;
+    left: 30%;
+    top: 20%;
+    background: white;
+    width: 40%;
+    text-align: left;
+}
+.wechatMsgContainerOutbound{
+    position: absolute;
+    left: 35%;
+    top: 20%;
+    background: white;
+    width: 30%;
+    text-align: left;
+}
+.wechatMsgContainerCardLayout {
+    position: absolute;
+    left: 20%;
+    top: 20%;
+    background: white;
+    width: 60%;
+    text-align: left;
+}
+.overflow-handle-preview {
+    height: 430px;
+    overflow-y: auto;
+}
+.overflow-handle-preview-outbound {
+    height: 330px;
+    overflow-y: auto;
+}
+.preview-overflow-wrap-fields {
+    text-overflow: ellipsis;
+    overflow: hidden;
+    overflow-wrap: break-word;
+    display: -webkit-box !important;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 2;
+    text-align: left;
+    width: 200px;
+  }

package/components/TemplatePreview/WechatRichmediaTemplatePreview/index.js

@@ -0,0 +1,104 @@
+/**
+*
+* WechatRichmediaTemplatePreview
+*
+*/
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import { CapRow, CapColumn, CapButton } from '@capillarytech/cap-ui-library/';
+import { FormattedMessage } from 'react-intl';
+import _ from 'lodash';
+import SlideBox from '../../SlideBox';
+import './_wechatRichmediaTemplatePrev.scss';
+import messages from './messages';
+const wechatBody = require('./../assets/images/WECHAT_5x.png');
+
+class WechatRichmediaTemplatePreview extends React.PureComponent { // eslint-disable-line react/prefer-stateless-function
+  preparePreviewData = (mediaList) => {
+    const returnObj = [];
+    _.forEach(mediaList, (contentData, contentIndex) => {
+      const id = parseInt(contentIndex, 10);
+      if (id === 0) {
+        returnObj.push(
+          <div style={{ width: "100%", height: 116, position: "relative" }}>
+            <CapRow>
+              <img alt="default" width="100%" height="110px" src={contentData.image_url} />
+              <div className="preview-overflow-wrap-fields" style={{ position: "absolute", bottom: "5%", left: "5%" }}>{contentData.title ? contentData.title : ""}</div>
+            </CapRow>
+            {Object.keys(mediaList).length === 1 ?
+              <CapRow style={{ height: 32, left: "5%" }}>
+                {contentData.digest ? contentData.digest : ""}
+              </CapRow>
+              :
+              ""
+            }
+          </div>
+        );
+      } else {
+        returnObj.push(
+          <CapRow style={{ "width": "100%", "height": 64, "border-bottom": "0.5px solid lightgrey" }}>
+            <CapColumn className="preview-overflow-wrap-fields" style={{ padding: "5% 0% 0% 5%", float: "left" }}>
+              {contentData.title}
+            </CapColumn>
+            <CapColumn style={{ float: "right" }}>
+              <img alt="default" width="60px" height="60px" src={contentData.image_url} style={{ "padding-right": "10%", "float": "left" }}/>
+            </CapColumn>
+          </CapRow>
+        );
+      }
+    });
+    return returnObj;
+  }
+  goToEdit(e, path) {
+    this.props.onEditClick(e, this.props.templateId, this.props.modeType, path);
+  }
+  render() {
+    return (
+      this.props.showSlidebox ?
+        <SlideBox
+          show={this.props.show}
+          handleClose={this.props.closeSlideBox}
+          header={this.props.templateName}
+          width={50}
+          content={
+            <div className={`preview-container ${this.props.type === 'embedded' ? 'embedded-preview' : ''}`}>
+              <div className="shell align-center" id="sms-preview">
+                <img className="preview-image" src={wechatBody} alt="Preview is being generated"/>
+                <div className={this.props.type === 'embedded' ? "wechatMsgContainerOutbound" : "wechatMsgContainer"}>
+                  <div className={this.props.type === 'embedded' ? "overflow-handle-preview-outbound" : "overflow-handle-preview"}>{this.preparePreviewData(this.props.content)}
+                  </div>
+                </div>
+              </div>
+              {this.props.showEdit ? <CapButton onClick={(e) => this.goToEdit(e, this.props.path)} className="preview-buttons" type="primary">{this.props.type === 'embedded' ? <FormattedMessage {...messages.select} /> : <FormattedMessage {...messages.edit} /> }</CapButton> : ""}
+            </div>
+          }
+        />
+        :
+            <div className={`preview-container ${this.props.type === 'embedded' ? 'embedded-preview' : ''}`}>
+              <div className="shell align-center" id="sms-preview">
+                <div className="wechatMsgContainerCardLayout">
+                  <div>{this.preparePreviewData(this.props.content)}
+                  </div>
+                </div>
+              </div>
+            </div>
+    );
+  }
+}
+
+WechatRichmediaTemplatePreview.propTypes = {
+  showSlidebox: PropTypes.bool,
+  show: PropTypes.bool,
+  closeSlideBox: PropTypes.function,
+  templateName: PropTypes.string,
+  type: PropTypes.string,
+  content: PropTypes.array,
+  onEditClick: PropTypes.func,
+  showEdit: PropTypes.bool,
+  path: PropTypes.string,
+  templateId: PropTypes.string,
+  modeType: PropTypes.string,
+};
+
+export default WechatRichmediaTemplatePreview;

package/components/TemplatePreview/WechatRichmediaTemplatePreview/messages.js

@@ -0,0 +1,21 @@
+/*
+ * WechatRichmediaTemplatePreview Messages
+ *
+ * This contains all the text for the WechatRichmediaTemplatePreview component.
+ */
+import { defineMessages } from 'react-intl';
+
+export default defineMessages({
+  header: {
+    id: 'app.components.WechatRichmediaTemplatePreview.header',
+    defaultMessage: 'This is the WechatRichmediaTemplatePreview component !',
+  },
+  select: {
+    id: 'app.components.WechatRichmediaTemplatePreview.select',
+    defaultMessage: 'Select',
+  },
+  edit: {
+    id: 'app.components.WechatRichmediaTemplatePreview.edit',
+    defaultMessage: 'Edit',
+  },
+});

package/components/TemplatePreview/WechatRichmediaTemplatePreview/tests/index.test.js

@@ -0,0 +1,10 @@
+// import React from 'react';
+// import { shallow } from 'enzyme';
+
+// import WechatRichmediaTemplatePreview from '../index';
+
+describe('<WechatRichmediaTemplatePreview />', () => {
+  it('Expect to have unit tests specified', () => {
+    expect(true).toEqual(false);
+  });
+});

package/containers/Cap/actions.js

@@ -56,3 +56,9 @@ export function clearMetaEntities() {
     type: types.CLEAR_META_ENTITIES,
   };
 }
+export function setInjectedTags(injectedTags) {
+  return {
+    type: types.SET_INJECTED_TAGS, injectedTags,
+  };
+}
+

package/containers/Cap/constants.js

@@ -20,3 +20,5 @@ export const GET_SCHEMA_FOR_ENTITY_REQUEST = 'cap/GET_SCHEMA_FOR_ENTITY_REQUEST'
 export const GET_SCHEMA_FOR_ENTITY_SUCCESS = 'cap/GET_SCHEMA_FOR_ENTITY_SUCCESS';
 export const CLEAR_META_ENTITIES = 'cap/CLEAR_META_ENTITIES';
 export const HIDE_TAGS = 'cap/HIDE_TAGS';
+
+export const SET_INJECTED_TAGS = 'cap/SET_INJECTED_TAGS';

package/containers/Cap/reducer.js

@@ -95,12 +95,14 @@ function capReducer(state = fromJS(initialState.cap), action) {
         layouts: [],
         tags: [],
       });
-    case types.HIDE_TAGS: {
+    // eslint-disable-next-line no-case-declarations
+    case types.HIDE_TAGS:
       const metaEntities = {tags: {}, layouts: state.get('metaEntities').layouts};
       metaEntities.tags.standard = _.filter(state.get('metaEntities').tags.standard, (tag) => action.tagList.indexOf(tag.definition.value) === -1);
       metaEntities.tags.custom = _.filter(state.get('metaEntities').tags.custom, (tag) => action.tagList.indexOf(tag.name) === -1);
       return state.setIn(['metaEntities'], metaEntities);
-    }
+    case types.SET_INJECTED_TAGS:
+      return state.set('injectedTags', action.injectedTags);
     default:
       return state;
   }

package/containers/Cap/selectors.js

@@ -1,5 +1,6 @@
 // makeSelectLocationState expects a plain JS object for the routing state
 import { createSelector } from 'reselect';
+import _ from 'lodash';
 const selectCapDomain = (state) => state.get('cap');
 
 const makeSelectAuthenticated = () => createSelector(
@@ -21,6 +22,17 @@ const isLoadingMetaEntities = () => createSelector(
   selectCapDomain,
   (globalState) => globalState.get('fetchingSchema')
 );
+const setInjectedTags = () => createSelector(
+  selectCapDomain,
+  (globalState) => {
+    let injectedTags = globalState.get('injectedTags') || {};
+    const metaEntities = globalState.get('metaEntities') || {};
+    const customTags = metaEntities.tags && metaEntities.tags.custom ? metaEntities.tags.custom : {};
+    console.log("selector cap: ", injectedTags, customTags, metaEntities);
+    return (injectedTags = _.merge({}, injectedTags, customTags));
+  }
+);
+
 const makeSelectLocationState = () => {
   let prevRoutingState;
   let prevRoutingStateJS;
@@ -69,4 +81,5 @@ export {
   selectCurrentOrgDetails,
   isLoadingMetaEntities,
   makeSelectFetchingSchema,
+  setInjectedTags,
 };

package/containers/CreativesContainer/SlideBoxContent.js

@@ -9,6 +9,7 @@ import Email from '../Email';
 import EmailWrapper from '../EmailWrapper';
 import MobilepusWrapper from '../MobilepushWrapper';
 import EmailPreviewV2 from '../../components/EmailPreviewV2';
+import MobilePushPreview from '../../components/MobilePushPreviewV2';
 import CallTask from '../CallTask';
 import MobliPushEdit from '../MobilePush/Edit';
 import * as constants from './constants';
@@ -60,6 +61,7 @@ function SlideBoxContent(props) {
   let isEmailEditWithContent = false;
   let isPreview = false;
   let isEmailPreview = false;
+  let isMpushPreview = false;
   let isEditCallTask = false;
   let isEditMPush = false;
   const isEmailCreate = slidBoxContent === 'createTemplate' && channel === constants.EMAIL;
@@ -70,8 +72,9 @@ function SlideBoxContent(props) {
     isEditMPush = slidBoxContent === 'editTemplate' && channel === constants.MOBILE_PUSH;
     isEditEmailWithId = slidBoxContent === 'editTemplate' && channel === constants.EMAIL && templateData._id;
     isEmailEditWithContent = slidBoxContent === 'editTemplate' && channel === constants.EMAIL && !templateData._id;
-    isPreview = slidBoxContent === 'preview' && channel !== constants.EMAIL;
+    isPreview = slidBoxContent === 'preview' && channel === constants.SMS;
     isEmailPreview = slidBoxContent === 'preview' && channel === constants.EMAIL;
+    isMpushPreview = slidBoxContent === 'preview' && channel === constants.MOBILE_PUSH;
   }
 
   return (
@@ -103,6 +106,9 @@ function SlideBoxContent(props) {
          />
       )
       }
+      {isMpushPreview &&
+        <MobilePushPreview templateData={templateData} channel={channel}/>
+      }
       {isEditSms && (
       <SmsEdit
         setIsLoadingContent={setIsLoadingContent}
@@ -187,7 +193,8 @@ function SlideBoxContent(props) {
             pathname: `/mobilepush/edit/`,
             query,
           }}
-          isFullMode={false}
+          params={{id: templateData._id}}
+          isFullMode={isFullMode}
           isGetFormData={isGetFormData}
           route={{ name: 'mobilepush' }}
           templateData={templateData}

package/containers/Ebill/index.js

@@ -16,7 +16,7 @@ import _ from 'lodash';
 import { createStructuredSelector } from 'reselect';
 import * as actions from './actions';
 import FormBuilder from '../../components/FormBuilder';
-import { makeSelectMetaEntities, makeSelectAuthenticated } from '../Cap/selectors';
+import { makeSelectMetaEntities, makeSelectAuthenticated, setInjectedTags } from '../Cap/selectors';
 import * as globalActions from '../../containers/Cap/actions';
 import { UserIsAuthenticated } from '../../utils/authWrapper';
 import { makeSelectTemplates } from '../Templates/selectors';
@@ -629,25 +629,6 @@ export class Ebill extends React.Component { // eslint-disable-line react/prefer
       this.props.globalActions.addMessageToQueue(message);
     }
 
-    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});
-    }
-
     console.log('Form Data After ', nextProps.Ebill.cmsData, this.props.Ebill.cmsData);
     if (nextProps.Ebill.cmsData !== '' && !_.isEqual(nextProps.Ebill.cmsData, this.props.Ebill.cmsData)) {
       const formData = _.cloneDeep(this.state.formData);
@@ -1209,7 +1190,7 @@ export class Ebill extends React.Component { // eslint-disable-line react/prefer
                 location={this.props.location}
                 tabKey={this.state.tabKey}
                 tags={this.props.metaEntities && this.props.metaEntities.tags ? this.props.metaEntities.tags.standard : []}
-                injectedTags={this.state.injectedTags ? this.state.injectedTags : {}}
+                injectedTags={this.props.injectedTags ? this.props.injectedTags : {}}
                 onFormValidityChange={this.setFormValidity}
                 handleCancelModal={this.handleCancelModal}
                 usingTabContainer
@@ -1259,6 +1240,7 @@ Ebill.propTypes = {
   intl: intlShape.isRequired,
   metaEntities: PropTypes.object,
   // Global: PropTypes.object,
+  injectedTags: PropTypes.object,
 };
 
 const mapStateToProps = createStructuredSelector({
@@ -1266,6 +1248,7 @@ const mapStateToProps = createStructuredSelector({
   Templates: makeSelectTemplates(),
   metaEntities: makeSelectMetaEntities(),
   Global: makeSelectAuthenticated(),
+  injectedTags: setInjectedTags(),
 });
 
 function mapDispatchToProps(dispatch) {

package/containers/Email/index.js

@@ -16,7 +16,7 @@ import { createStructuredSelector } from 'reselect';
 import _ from 'lodash';
 import moment from "moment";
 import FormBuilder from '../../components/FormBuilder';
-import { makeSelectMetaEntities, selectCurrentOrgDetails, isLoadingMetaEntities } from '../Cap/selectors';
+import { makeSelectMetaEntities, selectCurrentOrgDetails, isLoadingMetaEntities, makeSelectAuthenticated, setInjectedTags } from '../Cap/selectors';
 import * as actions from './actions';
 import * as templatesActions from '../Templates/actions';
 import * as globalActions from '../../containers/Cap/actions';
@@ -234,7 +234,9 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
         if (this.props.getDefaultTags) {
           query.context = this.props.getDefaultTags;
         }
-        this.props.globalActions.fetchSchemaForEntity(query);
+        if (_.isEmpty(this.props.metaEntities.tags)) {
+          this.props.globalActions.fetchSchemaForEntity(query);
+        }
       }
       setTimeout(() => {
         this.showSubject();
@@ -436,27 +438,6 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
         });
       }
 
-      if (nextProps.metaEntities && nextProps.metaEntities.tags && nextProps.metaEntities.tags.custom && this.props.metaEntities.tags && this.props.metaEntities.tags.standard && !_.isEqual(this.props.metaEntities.tags, nextProps.metaEntities.tags)) {
-        let injectedTags = _.cloneDeep(this.state.injectedTags);
-        if (!_.isEmpty(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});
-        }
-      }
-
       if ( !_.isEqual(nextProps.Email.uploadAssetSuccess, this.props.Email.uploadAssetSuccess) && nextProps.Email.uploadAssetSuccess) {
         const isDragDrop = this.state.formData[`${this.state.currentTab - 1}`][this.state.formData[`${this.state.currentTab - 1}`].activeTab].is_drag_drop;
         const isEdmSupport = (this.props.location.query.isEdmSupport !== "false") || false;
@@ -2113,6 +2094,7 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
     } else {
       this.setState({injectedTags: data.tags});
     }
+    this.props.globalActions.setInjectedTags(data.tags);
   }
 
   startLoading = (ifEdit) => {
@@ -2579,7 +2561,7 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
                   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}
                   handleCancelModal={this.handleCancelModal}
                   usingTabContainer
@@ -2653,6 +2635,7 @@ Email.propTypes = {
   // creativesContainerActions: PropTypes.object,
   isFullMode: PropTypes.bool,
   setIsLoadingContent: PropTypes.func,
+  injectedTags: PropTypes.object,
 };
 
 const mapStateToProps = (state, props) => createStructuredSelector({
@@ -2661,6 +2644,8 @@ const mapStateToProps = (state, props) => createStructuredSelector({
   metaEntities: makeSelectMetaEntities(),
   currentOrgDetails: props.cap ? () => props.cap.currentOrgDetails : selectCurrentOrgDetails(),
   isLoadingMetaEntities: isLoadingMetaEntities(),
+  Global: makeSelectAuthenticated(),
+  injectedTags: setInjectedTags(),
 });
 
 function mapDispatchToProps(dispatch) {

package/containers/Line/Create/index.js

@@ -13,7 +13,7 @@ import { UserIsAuthenticated } from '../../../utils/authWrapper';
 import * as globalActions from '../../../containers/Cap/actions';
 //import { makeSelectCreate, makeSelectCreateResponse, makeSelectEdit, makeSelectEditResponse, makeSelectTemplateDetailsResponse } from './selectors';
 import {makeSelectCreateLine} from './selectors';
-import { makeSelectMetaEntities } from '../../Cap/selectors';
+import { makeSelectMetaEntities, setInjectedTags } from '../../Cap/selectors';
 import {getMessageObject} from '../../../utils/messageUtils';
 import { makeSelectTemplates } from '../../Templates/selectors';
 import './_lineCreate.scss';
@@ -218,21 +218,6 @@ export class Line extends Component {
       console.log("ooo", this.state.formData);
       this.props.actions.clearAsset();
     }
-    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);
-      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() {
@@ -579,6 +564,7 @@ export class Line extends Component {
       obj['0'].image = content;
     }
     this.setState({formData: obj, loading: false, injectedTags: data.tags});
+    this.props.globalActions.setInjectedTags(data.tags);
   };
 
   startLoading = (ifEdit) => {
@@ -781,7 +767,7 @@ export class Line extends Component {
               formData={_.cloneDeep(this.state.formData)}
               location={this.props.location}
               tags={tags}
-              injectedTags={this.state.injectedTags ? this.state.injectedTags : {}}
+              injectedTags={this.props.injectedTags ? this.props.injectedTags : {}}
               onFormValidityChange={this.setFormValidity}
               usingTabContainer
               checkValidation={this.state.checkValidation}
@@ -816,12 +802,14 @@ Line.propTypes = {
   Line: PropTypes.object,
   supportedTags: PropTypes.any,
   getDefaultTags: PropTypes.string,
+  injectedTags: PropTypes.object,
 };
 
 const mapStateToProps = createStructuredSelector({
   Line: makeSelectCreateLine(),
   Templates: makeSelectTemplates(),
   metaEntities: makeSelectMetaEntities(),
+  injectedTags: setInjectedTags(),
 });
 
 function mapDispatchToProps(dispatch) {

package/containers/Line/Edit/index.js

@@ -15,7 +15,7 @@ import { createStructuredSelector } from 'reselect';
 import { injectIntl, intlShape } from 'react-intl';
 import _ from 'lodash';
 import {makeSelectEdit, makeSelectEditResponse, makeSelectTemplateDetailsResponse} from "../../MobilePush/Edit/selectors";
-import {makeSelectMetaEntities} from "../../Cap/selectors";
+import {makeSelectMetaEntities, setInjectedTags} from "../../Cap/selectors";
 import {getMessageObject} from "../../../utils/messageUtils";
 import FormBuilder from '../../../components/FormBuilder';
 import * as globalActions from "../../Cap/actions";
@@ -200,29 +200,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() {
@@ -752,6 +729,7 @@ export class Edit extends React.Component { // eslint-disable-line react/prefer-
     console.log('startTemplateCreation', data);
     if (!data.edit) {
       this.setState({injectedTags: data.tags});
+      this.props.globalActions.setInjectedTags(data.tags);
     }
   };
 
@@ -1013,7 +991,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}
@@ -1049,6 +1027,7 @@ Edit.propTypes = {
   templateData: PropTypes.object,
   getDefaultTags: PropTypes.string,
   supportedTags: PropTypes.array,
+  injectedTags: PropTypes.object,
 };
 
 const mapStateToProps = createStructuredSelector({
@@ -1057,6 +1036,7 @@ const mapStateToProps = createStructuredSelector({
   templateDetails: makeSelectTemplateDetailsResponse(),
   metaEntities: makeSelectMetaEntities(),
   Templates: makeSelectTemplates(),
+  injectedTags: setInjectedTags(),
 });
 
 function mapDispatchToProps(dispatch) {