@capillarytech/creatives-library 2.0.32 → 2.0.33

package/containers/Cap/selectors.js

@@ -17,6 +17,10 @@ const makeSelectMetaEntities = () => createSelector(
   (globalState) => globalState.get('metaEntities')
 );
 
+const isLoadingMetaEntities = () => createSelector(
+  selectCapDomain,
+  (globalState) => globalState.get('fetchingSchema')
+);
 const makeSelectLocationState = () => {
   let prevRoutingState;
   let prevRoutingStateJS;
@@ -54,4 +58,5 @@ export {
   makeSelectMetaEntities,
   makeSelectUser,
   selectCurrentOrgDetails,
+  isLoadingMetaEntities,
 };

package/containers/CreativesContainer/SlideBoxContent.js

@@ -31,9 +31,10 @@ function SlideBoxContent(props) {
       onChannelChange,
       onEmailModeChange,
       emailCreateMode,
-      emailStep,
+      templateStep,
       onEmailNextStep,
       cap,
+      onResetStep,
     } = props;
   const type = messageDetails.type.toLowerCase(); // type is context in get tags values : outbound | dvs | referral | loyalty | coupons
   const query = { type: 'embedded', module: 'library' };
@@ -114,10 +115,11 @@ function SlideBoxContent(props) {
         getFormdata={getFormData}
         templateData={templateData}
         type={type}
-        step={emailStep}
+        step={templateStep}
         showNextStep={onEmailNextStep}
         isFullMode={false}
         cap={cap}
+        onResetStep={onResetStep}
       />
         )}
       {(isEditEmailWithId || isEmailEditWithContent) && (
@@ -153,8 +155,9 @@ SlideBoxContent.propTypes = {
   currentChannel: PropTypes.string,
   onEmailModeChange: PropTypes.func,
   emailCreateMode: PropTypes.string,
-  emailStep: PropTypes.string,
+  templateStep: PropTypes.string,
   onEmailNextStep: PropTypes.func,
   cap: PropTypes.object,
+  onResetStep: PropTypes.func,
 };
 export default SlideBoxContent;

package/containers/CreativesContainer/SlideBoxFooter.js

@@ -4,8 +4,8 @@ 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, emailStep, emailCreateMode } = props;
-  const isEmailCreate = slidBoxContent === 'createTemplate' && currentChannel === constants.EMAIL && emailStep !== 'createTemplate';
+  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;
   return (
     <div>
@@ -36,7 +36,7 @@ SlideBoxFooter.propTypes = {
   onEditTemplate: PropTypes.func,
   currentChannel: PropTypes.string,
   onEmailNextStep: PropTypes.func,
-  emailStep: PropTypes.string,
+  templateStep: PropTypes.string,
   emailCreateMode: PropTypes.string,
 };
 export default SlideBoxFooter;

package/containers/CreativesContainer/index.js

@@ -21,15 +21,15 @@ class Creatives extends React.Component {
   constructor(props) {
     super(props);
     this.state = {
-      emailStep: 1, //modeSelection: for selecting upload or editor, and createTemplate to create template create based on modeSelection
+      templateStep: 1, //modeSelection: for template name and (for email selecting upload or editor), and createTemplate to create template create based on modeSelection
       showSlideBox: true,
       slidBoxContent: this.getSlideBocContent({mode: props.creativesMode, templateData: props.templateData, isFullMode: props.isFullMode}),
       templateData: this.getTemplateData(props.templateData),
       currentChannel: this.props.channel || 'sms',
     };
-    this.creativesEmailSteps = {
+    this.creativesTemplateSteps = {
       1: 'modeSelection',
-      2: 'templateSelection',
+      2: 'templateSelection', // only for email in current flows wil be used for mpush, line and wechat as well.
       3: 'createTemplate',
     };
   }
@@ -61,9 +61,10 @@ class Creatives extends React.Component {
   }
   onEmailNextStep = () => {
     this.setState((prevState) => ({
-      emailStep: prevState.emailStep + 1,
+      templateStep: prevState.templateStep + 1,
     }));
   }
+
   onEmailModeChange = (mode) => {
     this.setState({ emailCreateMode: mode});
   }
@@ -140,6 +141,9 @@ class Creatives extends React.Component {
       );
     }
   };
+  resetStep = () => {
+    this.setState({templateStep: 1});
+  }
   toggleShowSlideBox = () => {
     this.setState((prevState) => ({
       ...prevState,
@@ -151,7 +155,7 @@ class Creatives extends React.Component {
   };
 
   render() {
-    const {slidBoxContent, isGetFormData, showSlideBox, templateData, currentChannel, emailCreateMode, emailStep} = this.state;
+    const {slidBoxContent, isGetFormData, showSlideBox, templateData, currentChannel, emailCreateMode, templateStep} = this.state;
     const {isFullMode, creativesMode, cap} = this.props;
     return (
       <div className={classnames(`${classPrefix}`)}>
@@ -183,8 +187,9 @@ class Creatives extends React.Component {
               onChannelChange={this.onChannelChange}
               onEmailModeChange={this.onEmailModeChange}//used when create is clicked in email
               emailCreateMode={emailCreateMode}// upload zip || use editor are values
-              emailStep={this.creativesEmailSteps[emailStep]}
+              templateStep={this.creativesTemplateSteps[templateStep]}
               onEmailNextStep={this.onEmailNextStep}
+              onResetStep={this.resetStep}
               cap={cap}
             />
           }
@@ -196,7 +201,7 @@ class Creatives extends React.Component {
               slidBoxContent={slidBoxContent}
               onEmailNextStep={this.onEmailNextStep}
               currentChannel={currentChannel.toUpperCase()}
-              emailStep={this.creativesEmailSteps[emailStep]}
+              templateStep={this.creativesTemplateSteps[templateStep]}
               emailCreateMode={emailCreateMode}
             />
           }

package/containers/Email/index.js

@@ -9,7 +9,6 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
-import Helmet from 'react-helmet';
 import { Row, Col, Spin, Popover, Modal, Select } from 'antd';
 import { injectIntl, intlShape, FormattedMessage } from 'react-intl';
 import { CapButton, CapInput } from '@capillarytech/cap-react-ui-library';
@@ -17,12 +16,12 @@ import { createStructuredSelector } from 'reselect';
 import _ from 'lodash';
 import moment from "moment";
 import FormBuilder from '../../components/FormBuilder';
-import { makeSelectMetaEntities, selectCurrentOrgDetails } from '../Cap/selectors';
+import { makeSelectMetaEntities, selectCurrentOrgDetails, isLoadingMetaEntities } from '../Cap/selectors';
 import * as actions from './actions';
 import * as templatesActions from '../Templates/actions';
 import * as globalActions from '../../containers/Cap/actions';
 import { UserIsAuthenticated } from '../../utils/authWrapper';
-import makeSelectEmail from './selectors';
+import {makeSelectEmail} from './selectors';
 import { makeSelectTemplates } from '../Templates/selectors';
 import messages from './messages';
 // import PageHeader from '../../components/PageHeader';
@@ -37,6 +36,7 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
   constructor(props) {
     super(props);
     this.state = {
+      loadingStatus: 0,
       formData: {},
       tabCount: 1,
       currentTab: 1,
@@ -222,7 +222,7 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
     if (nextProps.metaEntities && nextProps.metaEntities.layouts && nextProps.metaEntities.layouts.length > 0 && _.isEmpty(this.state.schema)) {
       const newSchema = this.injectEvents(nextProps.metaEntities.layouts[0].definition);
 
-      this.setState({schema: newSchema});
+      this.setState({schema: newSchema, loadingStatus: this.state.loadingStatus + 1});
       if (this.props.location.query.module !== 'library' || (this.props.location.query.module === 'library' && this.props.getDefaultTags)) {
         const query = {
           layout: 'EMAIL',
@@ -285,7 +285,7 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
         } else {
           container.tabBarExtraContent.sections[0].inputFields[0].cols[4].content.sections[0].inputFields[2].cols[0].style = {display: ""};
         }
-        this.setState({schema});
+        this.setState({schema, loadingStatus: this.state.loadingStatus + 1});
       }
 
       //
@@ -347,7 +347,7 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
             }
           });
 
-          this.setState({schema, isSchemaChanged: true});
+          this.setState({schema, isSchemaChanged: true, loadingStatus: this.state.loadingStatus + 1});
         } else {
           _.forEach(temp.panes, (pane, index) => {
             const tempPane = pane;
@@ -357,7 +357,7 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
             }
           });
 
-          this.setState({schema, isSchemaChanged: true});
+          this.setState({schema, isSchemaChanged: true, loadingStatus: this.state.loadingStatus + 1});
           let html = decodeURIComponent(nextProps.Email.CmsSettings.htmlContent);
 
           html = html.replace(/&amp;/g, "&").replace(/&lt;/g, "<").replace(/&gt;/g, ">").replace(/\\&quot;/g, '"');
@@ -582,7 +582,7 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
     } else {
       container.tabBarExtraContent.sections[0].inputFields[0].cols[4].content.sections[0].inputFields[2].cols[0].style = {display: ""};
     }
-    this.setState({currentTab: data, formData, schema});
+    this.setState({currentTab: data, formData, schema, loadingStatus: this.state.loadingStatus + 1});
   }
 
   onTemplateNameChange = () => {
@@ -831,7 +831,7 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
     });
 
 
-    this.setState({ formData, schema, tabKey, currentTab, tabCount: editData.versions.history.length }, () => {
+    this.setState({ formData, schema, tabKey, currentTab, tabCount: editData.versions.history.length, loadingStatus: this.state.loadingStatus + 1 }, () => {
       _.forEach((editData.versions.base.selectedLanguages), (language) => {
         // if (formData[this.state.currentTab - 1].tabKey === formData[this.state.currentTab - 1][language].tabKey) {
         //   formData[this.state.currentTab - 1].activeTab = language;
@@ -1939,7 +1939,7 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
     });
     //}
     temp = type === 'embedded' ? this.removeStandAlone(temp) : temp;
-    this.setState({schema: temp, isSchemaChanged: true}, () => {
+    this.setState({schema: temp, isSchemaChanged: true, loadingStatus: this.state.loadingStatus + 1}, () => {
       if (type === 'embedded' && (this.props.route.name === 'EmailView' || (this.props.location.query.module && (this.props.location.query.module.toLowerCase() === 'loyalty' || this.props.location.query.module.toLowerCase() === 'dvs' || this.props.location.query.module.toLowerCase() === 'coupon_expiry' || this.props.location.query.module.toLowerCase() === 'timeline')))) {
         if ((this.props.route.name === "EmailEdit" || this.props.route.name === "EmailCreate") && (this.props.location.query.module === "dvs" || this.props.location.query.module.toLowerCase() === 'coupon_expiry')) {
           return;
@@ -2431,6 +2431,15 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
     }
   };
 
+  isEmailLoading = () => {
+    //let {isLoading} = this.props;
+    let isLoading = this.props.isLoadingMetaEntities || this.state.loading || (this.props.Email && "createTemplateInProgress" in this.props.Email && this.props.Email.createTemplateInProgress) || (this.props.Email.assetUploading !== undefined && this.props.Email.assetUploading);
+
+    if (!isLoading) {
+      isLoading = this.state.loadingStatus <= 3;
+    }
+    return isLoading;
+  }
   renderConfirmationModal() {
     const modal = (
       <Modal
@@ -2452,7 +2461,6 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
       </Modal>);
     return modal;
   }
-
   render() {
     // const pageHeading = (this.state.isEdit) ? this.props.intl.formatMessage(messages.editHeading) : this.props.intl.formatMessage(messages.createHeading);
     // const actionComponents = '';
@@ -2490,7 +2498,7 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
       </div>
     );
     const schema = this.state.schema;
-    const spinning = this.state.loading || (this.props.Email && "createTemplateInProgress" in this.props.Email && this.props.Email.createTemplateInProgress) || (this.props.Email.assetUploading !== undefined && this.props.Email.assetUploading);
+    const isLoading = this.isEmailLoading();
     const previewHeader = (<h3>Email Preview</h3>);
     const imagePreviewHeader = (<h3>Image Selection</h3>);
     const imagePreviewContent = (
@@ -2530,14 +2538,9 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
     }
     return (
       <div className="email-container">
-        <Helmet
-          title="Email"
-          meta={[
-            { name: 'description', content: 'Description of Email' },
-          ]}
-        />
+
         {/* <PageHeader pageHeading={pageHeading} /> */}
-        <Spin tip={loaderText} spinning={spinning}>
+        <Spin tip={loaderText} spinning={isLoading}>
 
           <Row>
             <Col>
@@ -2637,6 +2640,7 @@ Email.propTypes = {
   supportedTags: PropTypes.array,
   getDefaultTags: PropTypes.string,
   currentOrgDetails: PropTypes.object,
+  isLoadingMetaEntities: PropTypes.bool,
 };
 
 const mapStateToProps = (state, props) => createStructuredSelector({
@@ -2644,6 +2648,7 @@ const mapStateToProps = (state, props) => createStructuredSelector({
   Templates: makeSelectTemplates(),
   metaEntities: makeSelectMetaEntities(),
   currentOrgDetails: props.cap ? () => props.cap.currentOrgDetails : selectCurrentOrgDetails(),
+  isLoadingMetaEntities: isLoadingMetaEntities(),
 });
 
 function mapDispatchToProps(dispatch) {

package/containers/Email/selectors.js

@@ -22,10 +22,13 @@ const makeSelectEmail = () => createSelector(
 const makeSelectCreateResponse = () => createSelector(
   selectEmailDomain(), (dimensionState) => dimensionState.get('createResponse')
 );
-
+const selectLoadingStatus = () => createSelector(
+  selectEmailDomain(), (email) => email.createTemplateInProgress || (email.assetUploading !== undefined && email.assetUploading)
+);
 
 export default makeSelectEmail;
 export {
   makeSelectEmail,
   makeSelectCreateResponse,
+  selectLoadingStatus,
 };

package/containers/EmailWrapper/index.js

@@ -64,12 +64,17 @@ export class EmailWrapper extends React.Component { // eslint-disable-line react
       }
     }
   }
-  onChange = (e) => {
-    this.props.onEmailModeChange( e.target.value );
-  };
+
+
+  componentWillUnmount() {
+    this.props.onResetStep();
+  }
   onTemplateNameChange = (ev) => {
     this.setState({templateName: ev.target.vale});
   }
+  onChange = (e) => {
+    this.props.onEmailModeChange( e.target.value );
+  };
   //isValid = () => !_.isEmpty(this.state.templateName)
   setCreateMode = (emailCreateMode) => {
     this.setState({selectedCreateMode: emailCreateMode});
@@ -181,6 +186,7 @@ EmailWrapper.propTypes = {
   getFormdata: PropTypes.func,
   intl: intlShape,
   cap: PropTypes.object,
+  onResetStep: PropTypes.func,
 };
 
 const mapStateToProps = createStructuredSelector({

package/containers/Sms/Create/index.js

@@ -14,7 +14,7 @@ import { createStructuredSelector } from 'reselect';
 import _ from 'lodash';
 import { bindActionCreators } from 'redux';
 import { makeSelectCreate, makeSelectCreateResponse } from './selectors';
-import { makeSelectMetaEntities } from '../../Cap/selectors';
+import { makeSelectMetaEntities, isLoadingMetaEntities } from '../../Cap/selectors';
 import { UserIsAuthenticated } from '../../../utils/authWrapper';
 import './_smsCreate.scss';
 import FormBuilder from '../../../components/FormBuilder';
@@ -30,6 +30,7 @@ export class Create extends React.Component { // eslint-disable-line react/prefe
   constructor(props) {
     super(props);
     this.state = {
+      loadingStatus: 0,
       formData: {},
       tabCount: 1,
       currentTab: 1,
@@ -183,7 +184,7 @@ export class Create extends React.Component { // eslint-disable-line react/prefe
       if (!_.has(nextProps.metaEntities.tags.custom, "Transaction custom fields")) {
         delete injectedTags["Transaction custom fields"];
       }
-      this.setState({injectedTags});
+      this.setState({injectedTags, loadingStatus: this.state.loadingStatus + 1});
     }
     // if (nextProps.metaEntities && nextProps.metaEntities.tags && nextProps.metaEntities.tags.length > 0 && _.isEmpty(this.state.schema)) {
     //   console.log('final schema is**', nextProps.metaEntities.layouts[0].definition);
@@ -391,7 +392,7 @@ export class Create extends React.Component { // eslint-disable-line react/prefe
       return tempContainer;
     });
     console.log('final injected schema', schema);
-    this.setState({schema}, () => {
+    this.setState({schema, loadingStatus: this.state.loadingStatus + 1}, () => {
       const type = this.props.location.query.type;
       if (type === 'embedded') {
         this.removeStandAlone();
@@ -871,7 +872,7 @@ export class Create extends React.Component { // eslint-disable-line react/prefe
         temp.panes.push(basePane);
       }
     });
-    this.setState({ schema });
+    this.setState({ schema, loadingStatus: this.state.loadingStatus + 1 });
   }
 
   validateContent = (e) => {
@@ -902,487 +903,6 @@ export class Create extends React.Component { // eslint-disable-line react/prefe
     });
   }
   resetSchema() {
-    // const schema =
-    //   {
-    //     standalone: {
-    //       sections: [
-    //         {
-    //           type: "multicols",
-    //           inputFields: [
-    //             {
-    //               cols: [
-    //                 {
-    //                   id: "template-name",
-    //                   placeholder: "Enter template name",
-    //                   type: "input",  //Resembles component to be used
-    //                   metaType: "text",
-    //                   datatype: "string",
-    //                   required: true,
-    //                   fluid: true,
-    //                   style: {
-    //                     fontSize: '20px',
-    //                     fontFamily: 'proxima-nova,sans-serif',
-    //                     fontStyle: 'normal',
-    //                     fontWeight: 600,
-    //                     marginBottom: '16px',
-    //                   },
-    //                   styling: "semantic",
-    //                   order: 1,
-    //                   width: 9,
-    //                   offSet: 10,
-    //                   customComponent: false,
-    //                   standalone: true,
-    //                   supportedEvents: {
-    //                     onChange: this.onTemplateNameChange,
-    //                   },
-    //                 },
-    //                 {
-    //                   id: "discard-button",
-    //                   width: 3,
-    //                   offset: 8,
-    //                   metaType: "submit-button",
-    //                   colStyle: {
-    //                     // marginLeft: '47.833%',
-    //                     textAlign: 'right',
-    //                     paddingRight: '12px',
-    //                   },
-    //                   type: "button",
-    //                   buttonType: "cancel",
-    //                   value: "Discard",
-    //                   customComponent: false,
-    //                   standalone: true,
-    //                   styling: "semantic",
-    //                   order: 3,
-    //                   fluid: false,
-    //                   submitAction: "discardValues",
-    //                   supportedEvents: {
-    //                     discardValues: this.discardValues,
-    //                   },
-    //                 },
-    //                 {
-    //                   id: "cancel-button",
-    //                   width: 2,
-    //                   // offset: 11,
-    //                   metaType: "submit-button",
-    //                   colStyle: {
-    //                     textAlign: 'right',
-    //                     width: '9%',
-    //                   },
-    //                   type: "button",
-    //                   buttonType: "cancel",
-    //                   value: "Cancel",
-    //                   customComponent: false,
-    //                   standalone: true,
-    //                   styling: "semantic",
-    //                   order: 3,
-    //                   fluid: false,
-    //                   submitAction: "cancelTemplate",
-    //                   supportedEvents: {
-    //                     cancelTemplate: this.cancelTemplate,
-    //                   },
-    //                 },
-    //                 {
-    //                   id: "save-button",
-    //                   width: 2,
-    //                   metaType: "submit-button",
-    //                   colStyle: {
-    //                     textAlign: 'right',
-    //                     width: '7%',
-    //                   },
-    //                   type: "button",
-    //                   buttonType: "primary",
-    //                   value: "Save",
-    //                   customComponent: false,
-    //                   styling: "semantic",
-    //                   order: 3,
-    //                   fluid: false,
-    //                   standalone: true,
-    //                   submitAction: "saveFormData",
-    //                   supportedEvents: {
-    //                     saveFormData: this.saveFormData,
-    //                   },
-    //                 },
-    //               ],
-    //             },
-    //           ],
-    //           actionFields: [],
-    //         },
-    //       ],
-    //     },
-    //     containers: [
-    //       {
-    //         panes: [
-    //           {
-    //             sections: [
-    //               {
-    //                 type: "parent",
-    //                 width: 16,
-    //                 rowStyle: {
-    //                   height: '100%',
-    //                 },
-    //                 childSections: [
-    //                   {
-    //                     colStyle: {
-    //                       paddingTop: '16px',
-    //                       borderRight: '1px solid #d9d9d9',
-    //                       height: '100%',
-    //                     },
-    //                     width: 16,
-    //                     type: "parent",
-    //                     childSections: [
-    //                       {
-    //                         type: "col-label",
-    //                         inputFields: [
-    //                           {
-    //                             id: "sms-editor",
-    //                             label: "Message",
-    //                             labelStyle: {
-    //                               backgroundColor: 'white',
-    //                               textAlign: 'left',
-    //                               color: '#333333',
-    //                               lineHeight: '24px',
-    //                               fontSize: '16px',
-    //                               fontWeight: '600',
-    //                               fontFamily: 'proxima-nova, sans-serif',
-    //                               fontStyle: 'normal',
-    //                             },
-    //                             style: {
-    //                               textAlign: 'left',
-    //                               color: '#333333',
-    //                               fontFamily: 'Open-Sans',
-    //                               lineHeight: '24px',
-    //                               fontSize: '14px',
-    //                             },
-    //                             type: "textarea",
-    //                             metaType: "text",
-    //                             datatype: "string",
-    //                             required: true,
-    //                             placeholder: "Please input sms template content.",
-    //                             fluid: false,
-    //                             styling: "semantic",
-    //                             onlyDisplay: false,
-    //                             width: 18,
-    //                             autosize: true,
-    //                             autosizeParams: {
-    //                               minRows: 3,
-    //                             },
-    //                             order: 2,
-    //                             customComponent: true,
-    //                             supportedEvents: {
-    //                               onChange: this.onTemplateContentChange,
-    //                             },
-    //                           },
-    //                         ],
-    //                         actionFields: [
-    //                         ],
-    //                       },
-    //                       {
-    //                         type: "multicols",
-    //                         inputFields: [
-    //                           {
-    //                             cols: [
-    //                               {
-    //                                 offset: 19,
-    //                                 id: "tagList",
-    //                                 label: "Tags",
-    //                                 type: "tag-list",  //Resembles component to be used
-    //                                 metaType: "List",
-    //                                 datatype: "select",
-    //                                 required: true,
-    //                                 fluid: true,
-    //                                 onlyDisplay: true,
-    //                                 styling: "semantic",
-    //                                 order: 1,
-    //                                 customComponent: true,
-    //                                 supportedEvents: {
-    //                                   onTagSelect: this.onTagSelect,
-    //                                 },
-    //                               },
-    //                             ],
-    //                           },
-    //                           {
-    //                             cols: [
-    //                               {
-    //                                 id: "unicode-validity",
-    //                                 label: "Allow Unicode characters?",
-    //                                 labelStyle: {
-    //                                   backgroundColor: "white",
-    //                                 },
-    //                                 style: {
-    //                                   textAlign: 'left',
-    //                                   color: '#262626',
-    //                                   fontFamily: 'Open-Sans',
-    //                                   lineHeight: '24px',
-    //                                   fontSize: '14px',
-    //                                 },
-    //                                 type: "checkbox",  //Resembles component to be used
-    //                                 metaType: "text",
-    //                                 datatype: "boolean",
-    //                                 required: true,
-    //                                 fluid: true,
-    //                                 styling: "semantic",
-    //                                 order: 1,
-    //                                 width: 10,
-    //                                 offset: 4,
-    //                                 onlyDisplay: false,
-    //                                 customComponent: false,
-    //                                 supportedEvents: {
-    //                                   onChange: this.onTemplateNameChange,
-    //                                 },
-    //                               },
-    //                             ],
-    //                           },
-    //                         ],
-    //                         actionFields: [],
-    //                       },
-    //                     ],
-    //                   },
-    //                   {
-    //                     width: 6,
-    //                     type: "multicols",
-    //                     offset: 1,
-    //                     colStyle: {
-    //                       paddingTop: '16px',
-    //                     },
-    //                     inputFields: [
-    //                       {
-    //                         cols: [
-    //                           {
-    //                             id: "sms-preview",
-    //                             type: "sms-preview",  //Resembles component to be used
-    //                             customComponent: true,
-    //                             customStyling: { padding: '0' },
-    //                             metaType: "preview",
-    //                             required: true,
-    //                             fluid: true,
-    //                             styling: "semantic",
-    //                             order: 1,
-    //                             width: 5,
-    //                             onlyDisplay: true,
-    //                             offset: 7,
-    //                             channel: 'SMS',
-    //                             supportedEvents: {
-    //                               onChange: this.onTemplateNameChange,
-    //                             },
-    //                           },
-    //                         ],
-    //                       },
-    //                     ],
-    //                   },
-    //                 ],
-    //               },
-    //             ],
-    //           },
-    //         ],
-    //         type: "tabs",
-    //         defaultPanes: 1,
-    //         additionalPanes: 0,
-    //         id: "pane",
-    //         tabBarExtraContent: {
-    //           sections: [
-    //             {
-    //               type: "multicols",
-    //               actionFields: [
-    //                 {
-    //                   cols: [
-    //                     {
-    //                       id: "add-version-button",
-    //                       metaType: "submit-button",
-    //                       type: "button",
-    //                       buttonType: "cancel",
-    //                       icon: "plus-circle-o",
-    //                       value: "New Version",
-    //                       customComponent: false,
-    //                       onlyDisplay: true,
-    //                       styling: "semantic",
-    //                       order: 3,
-    //                       fluid: false,
-    //                       submitAction: "addVersion",
-    //                       supportedEvents: {
-    //                         addVersion: this.addVersion,
-    //                       },
-    //                     },
-    //                   ],
-    //                 },
-    //               ],
-    //               inputFields: [],
-    //             },
-    //           ],
-    //         },
-    //         tabContent: {
-    //           sections: [
-    //             {
-    //               type: "multicols",
-    //               inputFields: [
-    //                 {
-    //                   rowStyle: {
-    //                     display: "flex",
-    //                     flex: 1,
-    //                   },
-    //                   cols: [
-    //                     {
-    //                       id: "tab-header",
-    //                       metaType: "label",
-    //                       value: "Version",
-    //                       primitive: true,
-    //                       dynamicTab: true,
-    //                       type: "div",
-    //                       width: 5,
-    //                       offset: 0,
-    //                       onlyDisplay: true,
-    //                       colStyle: {
-    //                         flex: 1,
-    //                       },
-    //                       supportedEvents: {
-    //                         onChange: this.onVersionNameChange,
-    //                       },
-    //                     },
-    //                     {
-    //                       id: "tab-options-popover",
-    //                       metaType: "display",
-    //                       colStyle: {
-    //                         flex: 0,
-    //                       },
-    //                       type: "popover",
-    //                       customComponent: false,
-    //                       styling: "semantic",
-    //                       order: 3,
-    //                       fluid: false,
-    //                       onlyDisplay: true,
-    //                       submitAction: "onTabOptionSelect",
-    //                       supportedEvents: {
-    //                         onTabOptionSelect: this.onTabOptionSelect,
-    //                       },
-    //                       content: {
-    //                         sections: [
-    //                           {
-    //                             type: "multicols",
-    //                             inputFields: [
-    //                               {
-    //                                 cols: [
-    //                                   {
-    //                                     id: "mark-final-version-label",
-    //                                     metaType: "label",
-    //                                     type: "div",
-    //                                     primitive: true,
-    //                                     value: "Mark as Final",
-    //                                     onlyDisplay: true,
-    //                                     customComponent: false,
-    //                                     order: 3,
-    //                                     fluid: false,
-    //                                     submitAction: "markFinalVersion",
-    //                                     supportedEvents: {
-    //                                       markFinalVersion: this.markFinalVersion,
-    //                                     },
-    //                                   },
-    //                                 ],
-    //                               },
-    //                               {
-    //                                 cols: [
-    //                                   {
-    //                                     id: "duplicate-version-label",
-    //                                     metaType: "label",
-    //                                     type: "div",
-    //                                     primitive: true,
-    //                                     value: "Duplicate",
-    //                                     onlyDisplay: true,
-    //                                     customComponent: false,
-    //                                     order: 3,
-    //                                     fluid: false,
-    //                                     submitAction: "duplicateVersion",
-    //                                     supportedEvents: {
-    //                                       duplicateVersion: this.duplicateVersion,
-    //                                     },
-    //                                   },
-    //                                 ],
-    //                               },
-    //                               {
-    //                                 cols: [
-    //                                   {
-    //                                     id: "rename-version-label",
-    //                                     metaType: "label",
-    //                                     type: "div",
-    //                                     primitive: true,
-    //                                     value: "Rename",
-    //                                     onlyDisplay: true,
-    //                                     customComponent: false,
-    //                                     order: 3,
-    //                                     fluid: false,
-    //                                     submitAction: "renameVersion",
-    //                                     supportedEvents: {
-    //                                       renameVersion: this.renameVersion,
-    //                                     },
-    //                                   },
-    //                                 ],
-    //                               },
-    //                               {
-    //                                 cols: [
-    //                                   {
-    //                                     id: "delete-version-label",
-    //                                     metaType: "label",
-    //                                     type: "div",
-    //                                     primitive: true,
-    //                                     value: "Delete",
-    //                                     onlyDisplay: true,
-    //                                     customComponent: false,
-    //                                     order: 3,
-    //                                     fluid: false,
-    //                                     submitAction: "deleteVersion",
-    //                                     supportedEvents: {
-    //                                       deleteVersion: this.deleteVersion,
-    //                                     },
-    //                                   },
-    //                                 ],
-    //                               },
-    //                             ],
-    //                             actionFields: [],
-    //                           },
-    //                         ],
-    //                       },
-    //                       value: {
-    //                         sections: [
-    //                           {
-    //                             type: "multicols",
-    //                             inputFields: [
-    //                               {
-    //                                 cols: [
-    //                                   {
-    //                                     id: "tab-option-icon",
-    //                                     metaType: "display",
-    //                                     type: "icon",
-    //                                     onlyDisplay: true,
-    //                                     primitive: false,
-    //                                     value: "",
-    //                                     customComponent: false,
-    //                                     order: 3,
-    //                                     fluid: false,
-    //                                   },
-    //                                 ],
-    //                               },
-    //                             ],
-    //                             actionFields: [],
-    //                           },
-    //                         ],
-    //                       },
-    //                       trigger: "click",
-    //                       placement: "bottomRight",
-    //                     },
-    //                   ],
-    //                 },
-    //               ],
-    //               actionFields: [],
-    //             },
-    //           ],
-    //         },
-    //         label: "Version",
-    //         supportedEvents: {
-    //           onTabChange: this.onTabChange,
-    //         },
-    //       },
-    //     ],
-    //     channel: "SMS",
-    //     module: "Campaigns",
-    //   };
     this.setState({ schema: this.props.metaEntities.layouts[0].definition });
   }
 
@@ -1413,9 +933,18 @@ export class Create extends React.Component { // eslint-disable-line react/prefe
     console.log('obj', obj);
     this.props.actions.createTemplate(obj);
   }
+  isSmsLoading = () => {
+    //let {isLoading} = this.props;
+    let isLoading = this.props.isLoadingMetaEntities || this.state.loading || (this.props.Create && "createTemplateInProgress" in this.props.Create && this.props.Create.createTemplateInProgress);
+
+    if (!isLoading) {
+      isLoading = this.state.loadingStatus < 2;
+    }
+    return isLoading;
+  }
   render() {
     const schema = this.state.schema;
-    const spinning = this.state.loading || (this.props.Create && "createTemplateInProgress" in this.props.Create && this.props.Create.createTemplateInProgress);
+    const spinning = this.isSmsLoading();
     let tags = this.props.metaEntities && this.props.metaEntities.tags ? 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
@@ -1475,12 +1004,14 @@ Create.propTypes = {
   intl: intlShape.isRequired,
   supportedTags: PropTypes.array,
   getDefaultTags: PropTypes.string,
+  isLoadingMetaEntities: PropTypes.bool,
 };
 
 const mapStateToProps = createStructuredSelector({
   Create: makeSelectCreate(),
   createResponse: makeSelectCreateResponse(),
   metaEntities: makeSelectMetaEntities(),
+  isLoadingMetaEntities: isLoadingMetaEntities(),
 });
 
 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 } from '../../Cap/selectors';
+import { makeSelectMetaEntities, isLoadingMetaEntities } from '../../Cap/selectors';
 import { UserIsAuthenticated } from '../../../utils/authWrapper';
 import FormBuilder from '../../../components/FormBuilder';
 import * as actions from './actions';
@@ -30,6 +30,7 @@ export class Edit extends React.Component { // eslint-disable-line react/prefer-
   constructor(props) {
     super(props);
     this.state = {
+      loadingStatus: 0,
       formData: {},
       tabCount: 1,
       schema: {},
@@ -127,7 +128,7 @@ export class Edit extends React.Component { // eslint-disable-line react/prefer-
       this.setEditState(nextProps.templateDetails);
     }
     if (nextProps.metaEntities && nextProps.metaEntities.layouts && nextProps.metaEntities.layouts.length > 0 && _.isEmpty(this.state.schema)) {
-      this.setState({schema: nextProps.metaEntities.layouts[0].definition}, () => {
+      this.setState({schema: nextProps.metaEntities.layouts[0].definition, loadingStatus: this.state.loadingStatus + 1}, () => {
         this.injectEvents(nextProps.metaEntities.layouts[0].definition);
       });
       if (this.props.location.query.module !== 'library' || (this.props.location.query.module === 'library' && this.props.getDefaultTags)) {
@@ -477,7 +478,7 @@ export class Edit extends React.Component { // eslint-disable-line react/prefer-
       tempContainer = this.injectContainer(tempContainer);
       return tempContainer;
     });
-    this.setState({schema});
+    this.setState({schema, loadingStatus: this.state.loadingStatus + 1});
     return schema;
   }
 
@@ -871,7 +872,7 @@ export class Edit extends React.Component { // eslint-disable-line react/prefer-
       }
     });
     console.log('final data after removing', formData);
-    this.setState({ schema, formData, tabCount: 1, tabKey: formData.base.tabKey, currentTab: 1 });
+    this.setState({ schema, loadingStatus: this.state.loadingStatus + 1, formData, tabCount: 1, tabKey: formData.base.tabKey, currentTab: 1 });
   }
 
   validateContent = (e) => {
@@ -909,11 +910,20 @@ export class Edit extends React.Component { // eslint-disable-line react/prefer-
     console.log('edit obj', obj);
     this.props.actions.editTemplate(obj);
   }
+  isSmsLoading = () => {
+    //let {isLoading} = this.props;
+    let isLoading = this.props.isLoadingMetaEntities || this.state.loading || (this.props.Edit && (("getTemplateDetailsInProgress" in this.props.Edit && this.props.Edit.getTemplateDetailsInProgress) || ("editTemplateInProgress" in this.props.Edit && this.props.Edit.editTemplateInProgress)));
+
+    if (!isLoading) {
+      isLoading = this.state.loadingStatus < 3;
+    }
+    return isLoading;
+  }
   render() {
     const schema = this.state.schema;
     let tipText = this.props.Edit && ("getTemplateDetailsInProgress" in this.props.Edit && this.props.Edit.getTemplateDetailsInProgress) ? this.props.intl.formatMessage(messages.getTemplateDetailsLoader) : '';
     tipText = this.props.Edit && ("editTemplateInProgress" in this.props.Edit && this.props.Edit.editTemplateInProgress) ? this.props.intl.formatMessage(messages.saveTemplateLoader) : '';
-    const spinning = 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.isSmsLoading();
     let tags = this.props.metaEntities && this.props.metaEntities.tags ? 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;
@@ -975,7 +985,7 @@ Edit.propTypes = {
   templateData: PropTypes.object,
   supportedTags: PropTypes.array,
   getDefaultTags: PropTypes.string,
-  // route: PropTypes.object,
+  isLoadingMetaEntities: PropTypes.bool,
 };
 
 const mapStateToProps = createStructuredSelector({
@@ -983,6 +993,7 @@ const mapStateToProps = createStructuredSelector({
   editResponse: makeSelectEditResponse(),
   templateDetails: makeSelectTemplateDetailsResponse(),
   metaEntities: makeSelectMetaEntities(),
+  isLoadingMetaEntities: isLoadingMetaEntities(),
 });
 
 function mapDispatchToProps(dispatch) {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@capillarytech/creatives-library",
   "author": "meharaj",
-  "version": "2.0.32",
+  "version": "2.0.33",
   "description": "Capillary creatives ui",
   "main": "./index.js",
   "module": "./index.es.js",