@capillarytech/creatives-library 2.0.44 → 2.0.46

package/components/Header/index.js

@@ -0,0 +1,41 @@
+/**
+*
+* Header
+*
+*/
+
+import React, { PropTypes } from 'react';
+// import styled from 'styled-components';
+
+import { CapRow, CapColumn, CapInput, CapButton } from '@capillarytech/cap-ui-library';
+
+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}/>
+        </CapColumn>
+        <CapColumn span={2} offset={8}>
+          <CapButton id="preview-button" type="cancel" onClick={props.previewHandler}> Preview </CapButton>
+        </CapColumn>
+        <CapColumn span={2}>
+          <CapButton id="cancel-button" type="cancel" onClick={props.cancelHandler}> Cancel </CapButton>
+        </CapColumn>
+        <CapColumn span={2}>
+          <CapButton id="save-button" type="primary" onClick={props.saveHandler}> Save </CapButton>
+        </CapColumn>
+      </CapRow>
+    </div>
+  );
+}
+
+Header.propTypes = {
+  templateNameHandler: PropTypes.func,
+  previewHandler: PropTypes.func,
+  cancelHandler: PropTypes.func,
+  saveHandler: PropTypes.func,
+  templateName: PropTypes.string,
+};
+
+export default Header;

package/components/Header/messages.js

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

package/components/Header/tests/index.test.js

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

package/components/PreviewSideBar/index.js

@@ -43,8 +43,8 @@ class PreviewSideBar extends React.Component { // eslint-disable-line react/pref
   changeDevice(ev) {
     this.setState({device: ev.target.value});
   }
-  goToEdit(e) {
-    this.props.onEditClick(e, this.props.templateData._id, this.props.templateData.modeType);
+  goToEdit(e, path) {
+    this.props.onEditClick(e, this.props.templateData._id, this.props.templateData.modeType, path);
   }
   render() {
     console.log('preview sidebar', this.props);
@@ -84,6 +84,10 @@ class PreviewSideBar extends React.Component { // eslint-disable-line react/pref
         }
       }
     }
+    let path = '';
+    if (this.props.channel.toLowerCase() === 'wechat') {
+      path = this.props.templateData && this.props.templateData.definition && this.props.templateData.definition.msgcontent === "RICH_MEDIA_WECHAT" ? `/wechat/richmedia/edit/${this.props.templateData._id}` : `/wechat/edit/${this.props.templateData._id}`;
+    }
     console.log('final content is', content);
     return (
       <SlideBox
@@ -119,7 +123,7 @@ class PreviewSideBar extends React.Component { // eslint-disable-line react/pref
             <hr className="seperator-line" />
             <div className="preview-action-container" style={{margin: '16px'}}>
               {this.props.channel.toLowerCase() === 'sms' && !this.props.embedded && <CapButton onClick={() => this.goToDuplicate()}className="preview-buttons" style={{marginRight: '8px'}} type="secondary"><FormattedMessage {...messages.duplicate} /></CapButton>}
-              <CapButton onClick={(e) => this.goToEdit(e)}className="preview-buttons" type="primary">{this.props.location.query.type === 'embedded' ? <FormattedMessage {...messages.select} /> : <FormattedMessage {...messages.edit} />}</CapButton>
+              <CapButton onClick={(e) => this.goToEdit(e, path)} className="preview-buttons" type="primary">{this.props.location.query.type === 'embedded' ? <FormattedMessage {...messages.select} /> : <FormattedMessage {...messages.edit} />}</CapButton>
             </div>
           </div>
         }

package/components/TemplatePreview/index.js

@@ -23,7 +23,6 @@ const iPhonePushMessagePhone = require('./assets/images/iPhonePushMessage.svg');
 
 class TemplatePreview extends React.Component { // eslint-disable-line react/prefer-stateless-function
   render() {
-    console.log('preview props', this.props);
     let content = channel && channel.toLowerCase() === 'sms' ? [this.props.content] : this.props.content;
     const channel = this.props.channel;
     let smsDetails = {};
@@ -45,7 +44,7 @@ class TemplatePreview extends React.Component { // eslint-disable-line react/pre
     if (channel.toLowerCase() === "mobilepush") {
       iosActions = _.map(content.actions, (action) => {
         if (action.label) {
-          return (<div className="actions">
+          return (<div className="actions" key={`action-${action.label}`}>
             <span className="action">{action.label.toUpperCase()}</span>
           </div>);
         }
@@ -60,8 +59,8 @@ class TemplatePreview extends React.Component { // eslint-disable-line react/pre
             <div className="msgContainer sms">
               <img className="sms-icon" src={smsIcon} alt="Sms icon" />
               <div className={"message-pop sms"}>
-                {content && content.length && content.map((msg) =>
-                  <CapColumn className="message-pop-item align-left" style={{ background: '#3F51B5', color: '#ffffff'}}>
+                {content && content.length && content.map((msg, index) =>
+                  <CapColumn key={`"message-pop-content-${index}`} className="message-pop-item align-left" style={{ background: '#3F51B5', color: '#ffffff'}}>
                     {msg}
                   </CapColumn>)
                 }
@@ -102,7 +101,7 @@ class TemplatePreview extends React.Component { // eslint-disable-line react/pre
                       {content.actions.filter((action) => action.label).length &&
                         <div className="actions">
                           {_.map(content.actions, (action) => !!action.label &&
-                            <span className="action">{action.label && action.label.toUpperCase()}</span>)}
+                            <span className="action" key={`action-${action.label}`}>{action.label && action.label.toUpperCase()}</span>)}
                         </div>
                       }
                     </div>
@@ -157,8 +156,8 @@ class TemplatePreview extends React.Component { // eslint-disable-line react/pre
             : ''
         }
         {this.props.templateData &&
-          [<p className="preview-info"><FormattedMessage {...messages.lastModified} />: {moment(this.props.templateData.updatedAt).format('MM-DD-YYYY')}</p>,
-            <p style={{marginBottom: '8px'}} className="preview-info"><FormattedMessage {...messages.uploadedBy} /> : {this.props.templateData.updatedByName}</p>,
+          [<p className="preview-info" key="preview-info-modified"><FormattedMessage {...messages.lastModified} />: {moment(this.props.templateData.updatedAt).format('MM-DD-YYYY')}</p>,
+            <p style={{marginBottom: '8px'}} className="preview-info" key="preview-info-updated"><FormattedMessage {...messages.uploadedBy} /> : {this.props.templateData.updatedByName}</p>,
           ]
         }
       </div>

package/config/app.js

@@ -7,14 +7,14 @@ const config = {
     auth_endpoint: '/arya/api/v1/auth',
     login_url: 'auth/login',
     //dashboard_url: '/sms',
-    dashboard_url: '/templates',
+    dashboard_url: '/v2',
   },
   development: {
     api_endpoint: 'https://nightly.capillary.in/arya/api/v1/creatives',
     auth_endpoint: 'https://nightly.capillary.in/arya/api/v1/auth',
     login_url: 'auth/login',
    // dashboard_url: '/sms',
-    dashboard_url: '/templates',
+    dashboard_url: '/v2',
   },
   testing: {
     api_endpoint: '',

package/containers/Cap/index.js

@@ -314,7 +314,7 @@ export class Cap extends React.Component { // eslint-disable-line react/prefer-s
               logout={this.logout}
             /> : ''}
           <div className="main">
-            {loggedIn && type !== 'embedded' && this.props.location.pathname !== 'templates' ? <div id="cap-sidebar" className={'sidebar'}>
+            {loggedIn && type !== 'embedded' && this.props.location.pathname.indexOf('v2') === -1 ? <div id="cap-sidebar" className={'sidebar'}>
               <Sidebar
                 menuData={menuData}
                 productMenuData={productMenuData}

package/containers/Cap/selectors.js

@@ -48,8 +48,17 @@ const makeSelectUser = () => createSelector(
 );
 const selectCurrentOrgDetails = () => createSelector(
   selectCapDomain,
-  (globalState) => globalState.get('currentOrgDetails').toJS() || null
+  (globalState) => {
+    const currentOrgDetails = globalState.get('currentOrgDetails');
+    return currentOrgDetails ? currentOrgDetails.toJS() : null;
+  }
 );
+
+const makeSelectFetchingSchema = () => createSelector(
+  selectCapDomain,
+  (globalState) => globalState.get('fetchingSchema')
+);
+
 export {
   makeSelectLocationState,
   makeSelectAuthenticated,
@@ -59,4 +68,5 @@ export {
   makeSelectUser,
   selectCurrentOrgDetails,
   isLoadingMetaEntities,
+  makeSelectFetchingSchema,
 };

package/containers/CreativesContainer/SlideBoxContent.js

@@ -92,11 +92,13 @@ function SlideBoxContent(props) {
       {isEditSms && (
       <SmsEdit
         location={creativesLocationProps}
+        isFullMode={isFullMode}
         route={{ name: 'sms' }}
+        params={{id: templateData._id}}
         isGetFormData={isGetFormData}
         getFormSubscriptionData={getFormData}
         getDefaultTags={type}
-        subscriptionTemplateDetails={templateData}
+        subscriptionTemplateDetails={templateData} // used only in library mode
           />
         )}
       {isCreateSms && (
@@ -107,6 +109,7 @@ function SlideBoxContent(props) {
         isGetFormData={isGetFormData}
         getFormSubscriptionData={getFormData}
         getDefaultTags={type}
+        isFullMode={isFullMode}
           />
         )}
       {isEmailCreate && (
@@ -137,6 +140,7 @@ function SlideBoxContent(props) {
         templateData={templateData}
         getFormSubscriptionData={getFormData}
         getDefaultTags={type}
+        isFullMode={isFullMode}
         cap={cap}
           />
         )}

package/containers/CreativesContainer/SlideBoxFooter.js

@@ -2,20 +2,17 @@ import React from 'react';
 import { FormattedMessage } from 'react-intl';
 import { CapButton } from '@capillarytech/cap-ui-library';
 import PropTypes from 'prop-types';
-import * as constants from './constants';
 function SlideBoxFooter(props) {
-  const { slidBoxContent, onSave, messages, onEditTemplate, currentChannel, onEmailNextStep, templateStep, emailCreateMode } = props;
-  const isEmailCreate = slidBoxContent === 'createTemplate' && currentChannel === constants.EMAIL && templateStep !== 'createTemplate';
-  const isCreate = (slidBoxContent === 'editTemplate' || slidBoxContent === 'createTemplate') && !isEmailCreate;
+  const { slidBoxContent, onSave, messages, onEditTemplate, onEmailNextStep} = props;
   return (
     <div>
       <div>
-        {(isCreate) && (
+        {props.shouldShowDoneFooter() && (
         <CapButton onClick={onSave}>
           <FormattedMessage {...messages.creativesTemplatesSave} />
         </CapButton>
           )}
-        {isEmailCreate && emailCreateMode &&
+        {props.shouldShowContinueFooter() &&
           <CapButton onClick={onEmailNextStep}>
             <FormattedMessage {...messages.continue} />
           </CapButton>
@@ -34,9 +31,8 @@ SlideBoxFooter.propTypes = {
   onSave: PropTypes.func,
   messages: PropTypes.object,
   onEditTemplate: PropTypes.func,
-  currentChannel: PropTypes.string,
   onEmailNextStep: PropTypes.func,
-  templateStep: PropTypes.string,
-  emailCreateMode: PropTypes.string,
+  shouldShowContinueFooter: PropTypes.func,
+  shouldShowDoneFooter: PropTypes.func,
 };
 export default SlideBoxFooter;

package/containers/CreativesContainer/index.js

@@ -10,6 +10,7 @@ import { connect } from 'react-redux';
 import { createStructuredSelector } from 'reselect';
 import { bindActionCreators } from 'redux';
 import * as actions from './actions';
+import {selectEmailLayout, uploadSelector, templateUserList} from '../Templates/selectors';
 import SlideBoxContent from './SlideBoxContent';
 import SlideBoxHeader from './SlideBoxHeader';
 import SlideBoxFooter from './SlideBoxFooter';
@@ -20,7 +21,6 @@ import './index.scss';
 import * as templateActions from '../Templates/actions';
 import * as globalActions from '../Cap/actions';
 import {isLoading as isLoadingSelector} from './selectors';
-import {templateUserList} from '../Templates/selectors';
 
 const classPrefix = 'add-creatives-section';
 class Creatives extends React.Component {
@@ -36,13 +36,14 @@ class Creatives extends React.Component {
     this.creativesTemplateSteps = {
       1: 'modeSelection',
       2: 'templateSelection', // only for email in current flows wil be used for mpush, line and wechat as well.
-      3: 'createTemplate',
+      3: 'createTemplateContent',
     };
   }
   componentWillUnmount() {
-    console.log("unmounting creatives");
-    this.props.templateActions.resetTemplateStoreData();
-    this.props.globalActions.clearMetaEntities();
+    if (!this.props.isFullMode) {
+      this.props.templateActions.resetTemplateStoreData();
+      this.props.globalActions.clearMetaEntities();
+    }
   }
 
 
@@ -112,7 +113,7 @@ class Creatives extends React.Component {
       }
       return creativesTeplateData;
     }
-    return null;
+    return templateData || null;
   }
 
   getCreativesData = (channel, template) => { //from creatives to consumers
@@ -152,23 +153,61 @@ class Creatives extends React.Component {
     }
   };
   resetStep = () => {
-    this.setState({templateStep: 1});
+    this.setState(prevState => {
+      let newState = {
+        templateStep: 1,
+      }
+      
+      if (prevState.currentChannel.toUpperCase() === constants.EMAIL) {
+        newState= { ...newState, emailCreateMode: null };
+      }
+      return newState;  
+    });
   }
-  toggleShowSlideBox = () => {
+  handleClodeSlideBox = () => {
     this.setState((prevState) => ({
       ...prevState,
       templateData: undefined,
+      showSlideBox: false,
     }), this.props.handleCloseCreatives);
   };
   saveMessage = () => {
     this.setState({ isGetFormData: true });
   };
-  showFooter = () => {
+  shouldShowFooter = () => {
+    const {isFullMode} = this.props;
     const {slidBoxContent, currentChannel, emailCreateMode, templateStep} = this.state;
-
-    const isEmailCreate = slidBoxContent === 'createTemplate' && currentChannel === constants.EMAIL && templateStep !== 'createTemplate';
+    let showFooter = false;
+    if (!isFullMode ) {
+      const isEmailCreate = slidBoxContent === 'createTemplate' && currentChannel === constants.EMAIL && templateStep !== 'createTemplateContent';
+      const isCreate = (slidBoxContent === 'editTemplate' || slidBoxContent === 'createTemplate') && !isEmailCreate;
+      showFooter = (isCreate || (isEmailCreate && emailCreateMode) || slidBoxContent === 'preview');
+    } else if (currentChannel === constants.EMAIL && isFullMode) {
+      const isEmailCreate = slidBoxContent === 'createTemplate' && currentChannel === constants.EMAIL && templateStep !== 'createTemplateContent';
+      showFooter = isEmailCreate && emailCreateMode;
+    }
+    if (currentChannel.toUpperCase() === constants.EMAIL && emailCreateMode === "upload") {
+      showFooter = showFooter && !this.props.isUploading;
+    }
+    return showFooter;
+  }
+  shouldShowDoneFooter = () => {
+    const {slidBoxContent, templateStep, currentChannel} = this.state;
+    const currentStep = this.creativesTemplateSteps[templateStep];
+    const isEmailCreate = slidBoxContent === 'createTemplate' && currentChannel.toUpperCase() === constants.EMAIL && currentStep !== 'createTemplateContent';
     const isCreate = (slidBoxContent === 'editTemplate' || slidBoxContent === 'createTemplate') && !isEmailCreate;
-    return (isCreate || (isEmailCreate && emailCreateMode) || slidBoxContent === 'preview');
+    return isCreate;
+  }
+  shouldShowContinueFooter = () => { // only for email for now, has to be modified according to channel 
+    const {slidBoxContent, templateStep, currentChannel, emailCreateMode} = this.state;
+    let isShowContinueFooter = false;
+    if (this.props.EmailLayout !== null) {
+      const currentStep = this.creativesTemplateSteps[templateStep];
+      let isEmailCreate = slidBoxContent === 'createTemplate';
+      isEmailCreate = currentChannel.toUpperCase() === constants.EMAIL && ((emailCreateMode === "upload" && currentStep !== 'createTemplateContent') || ( emailCreateMode === "editor" && currentStep !== 'createTemplateContent' && currentStep !== "templateSelection"));
+      isShowContinueFooter = isEmailCreate && emailCreateMode;
+    }
+    return isShowContinueFooter;
   }
   render() {
     const {slidBoxContent, isGetFormData, showSlideBox, templateData, currentChannel, emailCreateMode, templateStep} = this.state;
@@ -197,8 +236,6 @@ class Creatives extends React.Component {
               getFormData={this.getFormData}
               onCreateNew={this.onCreateNew}
               isGetFormData={isGetFormData}
-              toggleShowSlideBox={this.toggleShowSlideBox}
-              showSlideBox={showSlideBox}
               isFullMode={isFullMode}
               currentChannel={currentChannel.toUpperCase()}
               onChannelChange={this.onChannelChange}
@@ -210,7 +247,7 @@ class Creatives extends React.Component {
               cap={cap}
             />
           }
-          footer={!isFullMode && this.showFooter() &&
+          footer={this.shouldShowFooter() &&
             <SlideBoxFooter
               messages={this.props.messages}
               onSave={this.saveMessage}
@@ -220,9 +257,11 @@ class Creatives extends React.Component {
               currentChannel={currentChannel.toUpperCase()}
               templateStep={this.creativesTemplateSteps[templateStep]}
               emailCreateMode={emailCreateMode}
+              shouldShowContinueFooter={this.shouldShowContinueFooter}
+              shouldShowDoneFooter={this.shouldShowDoneFooter}
             />
           }
-          handleClose={this.toggleShowSlideBox}
+          handleClose={this.handleClodeSlideBox}
           show={showSlideBox}
           size="size-l"
         />
@@ -246,10 +285,14 @@ Creatives.propTypes = {
   cap: PropTypes.object,
   // isLoading: PropTypes.bool,
   templateUserList: PropTypes.array,
+  isUploading: PropTypes.bool,
+  EmailLayout: PropTypes.string,
 };
 const mapStatesToProps = () => createStructuredSelector({
   isLoading: isLoadingSelector(),
   templateUserList: templateUserList(),
+  EmailLayout: selectEmailLayout(),
+  isUploading: uploadSelector(),
 });
 function mapDispatchToProps(dispatch) {
   return {

package/containers/Email/actions.js

@@ -6,10 +6,11 @@
 
 import * as types from './constants';
 
-export function createTemplate(template) {
+export function createTemplate(template, onCreateTemplateComplete) {
   return {
     type: types.CREATE_TEMPLATE_REQUEST,
     template,
+    onCreateTemplateComplete,
   };
 }
 
@@ -22,7 +23,6 @@ export function duplicateTemplate(id, channel) {
 }
 
 export function getTemplateDetails(id, channel) {
-  console.log('getting template', id, channel);
   return {
     type: types.GET_TEMPLATE_DETAILS_REQUEST,
     id,
@@ -39,7 +39,6 @@ export function getAllAssets(assetType, queryParams) {
 }
 
 export function getCmsSetting(cmsType, projectId, cmsMode, langId, isEdmSupport) {
-  console.log('cms actions', langId, isEdmSupport);
   return {
     type: types.GET_CMS_EDITOR_DETAILS_REQUEST,
     cmsType,

package/containers/Email/index.js

@@ -383,26 +383,6 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
           this.hideEdmOptions(nextProps.Email.CmsSettings.isDragDrop);
         });
       }
-
-      if (nextProps.Email.createResponse && nextProps.Email.createResponse.templateId) {
-        // this.resetSchema();
-        let message;
-        if (this.state.isEdit) {
-          message = getMessageObject('success', this.props.intl.formatMessage(messages.emailEditSuccess), true);
-        } else {
-          message = getMessageObject('success', this.props.intl.formatMessage(messages.emailCreateSuccess), true);
-        }
-        this.props.globalActions.addMessageToQueue(message);
-        this.props.actions.clearCRUDResponse();
-        const module = this.props.location.query.module ? this.props.location.query.module : 'default';
-        const type = this.props.location.query.type;
-        const isLanguageSupport = this.props.location.query.isLanguageSupport || false;
-        const isEdmSupport = (this.props.location.query.isEdmSupport !== "false") || false;
-        this.props.router.push({
-          pathname: `/email`,
-          query: type === 'embedded' ? {type: 'embedded', module, isLanguageSupport, isEdmSupport} : {module, isLanguageSupport, isEdmSupport},
-        });
-      }
       if (nextProps.Email.createTemplateError && !_.isEqual(nextProps.Email.createTemplateError, this.props.Email.createTemplateError)) {
         const message = getMessageObject('error', (nextProps.Email.createTemplateErrorMessage && nextProps.Email.createTemplateErrorMessage !== '') ? nextProps.Email.createTemplateErrorMessage : this.props.intl.formatMessage(messages.somethingWentWrong), true);
         this.props.globalActions.addMessageToQueue(message);
@@ -453,7 +433,7 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
         });
       }
 
-      if (nextProps.metaEntities && nextProps.metaEntities.tags && nextProps.metaEntities.tags.custom && !_.isEqual(this.props.metaEntities.tags, nextProps.metaEntities.tags)) {
+      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"];
@@ -635,6 +615,33 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
       // this.props.actions.getAllAssets("image", params);
     });
   }
+  onUpdateTemplateComplete = (createResponse) => {
+    if (createResponse && createResponse.templateId) {
+      // this.resetSchema();
+      let message;
+      if (this.state.isEdit) {
+        message = getMessageObject('success', this.props.intl.formatMessage(messages.emailEditSuccess), true);
+      } else {
+        message = getMessageObject('success', this.props.intl.formatMessage(messages.emailCreateSuccess), true);
+      }
+      this.props.globalActions.addMessageToQueue(message);
+      this.props.actions.clearCRUDResponse();
+      const module = this.props.location.query.module ? this.props.location.query.module : 'default';
+      const type = this.props.location.query.type;
+      const isLanguageSupport = this.props.location.query.isLanguageSupport || false;
+      const isEdmSupport = (this.props.location.query.isEdmSupport !== "false") || false;
+      if (this.props.isFullMode) {
+        const {versions, ...rest} = createResponse.templateId;
+        this.props.getFormSubscriptionData({ value: versions, ...rest, validity: true});
+      } else {
+        this.props.router.push({
+          pathname: `/email`,
+          query: type === 'embedded' ? {type: 'embedded', module, isLanguageSupport, isEdmSupport} : {module, isLanguageSupport, isEdmSupport},
+        });
+      }
+    }
+  }
+
   getSupportedLanguages = (props) => {
     const {currentOrgDetails} = props;
     let supportedLanguages = [];
@@ -657,7 +664,6 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
       }
     });
   }
-
   setNewLanguageContent = (data) => {
     const content = _.cloneDeep(data);
     const formData = _.cloneDeep(this.state.formData);
@@ -1652,7 +1658,7 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
           langTab = formData[`${this.state.currentTab - 1}`].selectedLanguages.indexOf(newActiveTab);
         }
         const selectedLanguage = formData[`${this.state.currentTab - 1}`].selectedLanguages.indexOf(data.iso_code);
-        tabKey = formData[`${this.state.currentTab - 1}`][data.iso_code].tabKey;  
+        tabKey = formData[`${this.state.currentTab - 1}`][data.iso_code].tabKey;
         const tabIndex = (selectedLanguage) + 1;
         const containers = schema.containers.slice();
         const tabContent = _.cloneDeep(containers[0].tabContent.sections[0]);
@@ -2362,7 +2368,7 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
 
     // if (saveCount === 0) {
 
-    this.props.actions.createTemplate(obj);
+    this.props.actions.createTemplate(obj, this.onUpdateTemplateComplete);
     // } else {
     //   this.setState({saveObj: obj, targetSaveCount: saveCount, mode: "save", saveEdmDataMode: 'save'}, () => {
     //     _.forEach(data.selectedLanguages, (language, langIndex) => {
@@ -2375,7 +2381,6 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
     //   });
     // }
   }
-
   handleOk = () => {
     const formData = _.cloneDeep(this.state.formData);
     const activeLangTab = formData[`${this.state.currentTab - 1}`].activeTab;
@@ -2632,7 +2637,8 @@ Email.propTypes = {
   getDefaultTags: PropTypes.string,
   currentOrgDetails: PropTypes.object,
   isLoadingMetaEntities: PropTypes.bool,
-  creativesContainerActions: PropTypes.object,
+  // creativesContainerActions: PropTypes.object,
+  isFullMode: PropTypes.bool,
 };
 
 const mapStateToProps = (state, props) => createStructuredSelector({

package/containers/Email/sagas.js

@@ -12,6 +12,7 @@ export function* createTemplate(template) {
       errorMsg = result.message;
     }
     yield put({ type: types.CREATE_TEMPLATE_SUCCESS, data: result.response, statusCode: result.status ? result.status.code : '', errorMsg });
+    yield template.onCreateTemplateComplete(result.response);
   } catch (error) {
     yield put({ type: types.CREATE_TEMPLATE_FAILURE, error, errorMsg });
   }