@capillarytech/creatives-library 2.0.70 → 2.0.71

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, isLoadingMetaEntities, setInjectedTags } from '../../Cap/selectors';
+import { makeSelectMetaEntities, setInjectedTags } from '../../Cap/selectors';
 import { UserIsAuthenticated } from '../../../utils/authWrapper';
 import './_smsCreate.scss';
 import FormBuilder from '../../../components/FormBuilder';
@@ -24,14 +24,11 @@ import * as charCount from '../../../utils/smsCharCount';
 import {checkUnicode} from '../../../utils/smsCharCountV2';
 import * as globalActions from '../../../containers/Cap/actions';
 import {getMessageObject} from '../../../utils/messageUtils';
-import * as creativesContainerActions from '../../CreativesContainer/actions';
-// import callNativeEvent from '../../../utils/callNativeEvent';
 
 export class Create extends React.Component { // eslint-disable-line react/prefer-stateless-function
   constructor(props) {
     super(props);
     this.state = {
-      loadingStatus: 0,
       formData: {},
       tabCount: 1,
       currentTab: 1,
@@ -86,6 +83,7 @@ export class Create extends React.Component { // eslint-disable-line react/prefe
   }
 
   componentWillMount() {
+    console.log('create mounting');
     if (this.props.route.name === 'view') {
       this.setState({loading: false});
       // this.removeStandAlone();
@@ -93,6 +91,7 @@ export class Create extends React.Component { // eslint-disable-line react/prefe
   }
 
   componentDidMount() {
+    console.log('added listener create,', this.props);
     const query = {
       layout: 'SMS',
       type: 'LAYOUT',
@@ -126,14 +125,30 @@ export class Create extends React.Component { // eslint-disable-line react/prefe
   }
 
   componentWillReceiveProps(nextProps) {
+    console.log('recieved props ', nextProps, this.props, this.state);
     if (nextProps.location.query.module === 'library' && nextProps.isGetFormData) {
       nextProps.getFormSubscriptionData(this.getFormData());
     }
+    if (nextProps.createResponse && nextProps.createResponse.templateId) {
+      console.log('create response', nextProps.createResponse);
+      this.discardValues();
+      const message = getMessageObject('success', 'SMS Template Created Successfully', true);
+      this.props.globalActions.addMessageToQueue(message);
+      this.props.actions.clearCreateResponse();
+      const type = this.props.location.query.type;
+      const module = this.props.location.query.module ? this.props.location.query.module : 'default';
+      this.props.router.push({
+        pathname: `/sms/`,
+        query: type === 'embedded' ? {type: 'embedded', module} : {module},
+      });
+    }
+
     if (nextProps.Create.createTemplateError && !_.isEqual(nextProps.Create.createTemplateError, this.props.Create.createTemplateError)) {
       const message = getMessageObject('error', (nextProps.Create.createTemplateErrorMessage && nextProps.Create.createTemplateErrorMessage !== '') ? nextProps.Create.createTemplateErrorMessage : this.props.intl.formatMessage(messages.somethingWentWrong), true);
       this.props.globalActions.addMessageToQueue(message);
     }
     if (nextProps.metaEntities && nextProps.metaEntities.layouts && nextProps.metaEntities.layouts.length > 0 && _.isEmpty(this.state.schema)) {
+      console.log('final schema is**', nextProps.metaEntities.layouts[0].definition);
       this.injectEvents(nextProps.metaEntities.layouts[0].definition);
       if (this.props.location.query.module !== 'library' || (this.props.location.query.module === 'library' && this.props.getDefaultTags)) {
         const query = {
@@ -154,25 +169,24 @@ export class Create extends React.Component { // eslint-disable-line react/prefe
   }
 
   componentWillUnmount() {
-    if (this.props.setIsLoadingContent) {
-      this.props.setIsLoadingContent(true); // setting isLoading of CreativesContainer so that slidebox foot can be hidden till content is loaded
-    }
+    console.log('removed listener create');
     window.removeEventListener("message", this.handleFrameTasks);
   }
 
-  onTemplateNameChange() {
-
+  onTemplateNameChange(name) {
+    console.log('Template name changed to ', name);
   }
 
-  onTemplateContentChange() {
-
+  onTemplateContentChange(content) {
+    console.log('Template content changed to ', content);
   }
 
-  onVersionNameChange( ) {
-
+  onVersionNameChange(data, versionIndex) {
+    console.log('version name changed to', data, versionIndex);
   }
 
   onFormDataChange(formData, tabCount, currentTab) {
+    console.log('Form data changed is ', formData, tabCount, currentTab);
     this.setState({formData, tabCount});
     if (currentTab) {
       this.setState({currentTab});
@@ -180,42 +194,24 @@ export class Create extends React.Component { // eslint-disable-line react/prefe
   }
 
   onTagSelect(data, currentTab) {
+    console.log('parent data tag', data, currentTab);
     const editorId = currentTab > 1 ? `sms-editor${currentTab}` : 'sms-editor';
-    this.insertAtCursor(document.getElementById(editorId), `{{${data}}}`, currentTab);
+    this.insertAtCursor(document.getElementById(editorId), `{{${data}}}`);
     document.getElementById(editorId).focus();
   }
 
   onTabChange(data) {
+    console.log('inside parent ontabchange', data, this.state);
     this.setState({currentTab: data});
   }
-  onCreateTemplateComplete = (editResponse) => {
-    if (editResponse.templateId) {
-      this.resetSchema();
-      this.setState({
-        formData: {},
-        tabCount: 1,
-        currentTab: 1,
-        editData: {},
-      });
-      const message = getMessageObject('success', 'SMS Template Created Successfully', true);
-      this.props.globalActions.addMessageToQueue(message);
-      const module = this.props.location.query.module ? this.props.location.query.module : 'default';
-      const type = this.props.location.query.type;
-      if (this.props.isFullMode) {
-        this.props.getFormSubscriptionData({ value: editResponse.templateId, validity: true});
-      } else {
-        this.props.router.push({
-          pathname: `/sms/`,
-          query: type === 'embedded' ? {type: 'embedded', module} : {module},
-        });
-      }
-    }
-  }
+
   getFormData(e, value) {
+    console.log('posting final result', this.state.formData);
     const formData = _.cloneDeep(this.state.formData);
     let baseData = {};
     let versionIdx;
     _.forEach(formData, (val, idx) => {
+      console.log('val', val);
       if (val.base && idx !== 'base') {
         baseData = val;
         versionIdx = idx;
@@ -227,19 +223,17 @@ export class Create extends React.Component { // eslint-disable-line react/prefe
     }
     const result = {};
     result.base = baseData;
-    if (this.state.isValid) {
-      const msgObj = charCount.updateCharCount(baseData['sms-editor']);
-      result.base.msg_count = msgObj.msgCount;
-    }
+    const msgObj = charCount.updateCharCount(baseData['sms-editor']);
+    result.base.msg_count = msgObj.msgCount;
+    console.log("Message Count", msgObj.msgCount);
     const response = {
       action: "getFormData",
       value: result,
       postAction: value || 'next',
       validity: this.state.isFormValid,
-      type: 'SMS',
     };
     this.setState({checkValidation: true});
-
+    console.log('posting final result internal', response);
     if (e) {
       e.source.postMessage(JSON.stringify(response), e.origin);
     }
@@ -247,6 +241,7 @@ export class Create extends React.Component { // eslint-disable-line react/prefe
   }
 
   getCurrentWindow(e) {
+    console.log('in sms create', e);
     const response = {
       action: e.action,
       value: 'edit',
@@ -336,6 +331,7 @@ export class Create extends React.Component { // eslint-disable-line react/prefe
   }
 
   moveToTemplates() {
+    console.log('in move to Templates');
     const modalContent = {
       title: "Alert",
       body: "Do you really want to go back? All your temporary changes will be lost!",
@@ -362,6 +358,7 @@ export class Create extends React.Component { // eslint-disable-line react/prefe
   }
 
   injectEvents(schema) {
+    console.log('now injecting events');
     const temp = schema;
     temp.standalone.sections = this.injectSections(temp.standalone.sections);
     _.forEach(temp.containers, (container) => {
@@ -369,8 +366,8 @@ export class Create extends React.Component { // eslint-disable-line react/prefe
       tempContainer = this.injectContainer(tempContainer);
       return tempContainer;
     });
-
-    this.setState({schema, loadingStatus: this.state.loadingStatus + 1}, () => {
+    console.log('final injected schema', schema);
+    this.setState({schema}, () => {
       const type = this.props.location.query.type;
       if (type === 'embedded') {
         this.removeStandAlone();
@@ -408,9 +405,10 @@ export class Create extends React.Component { // eslint-disable-line react/prefe
         }
         temp.injectedEvents = {};
         _.forEach(col.supportedEvents, (event) => {
+          console.log('injected event for ', col, event, this.getMappedEvent(col.id, event));
           temp.injectedEvents[event] = this.getMappedEvent(col.id, event);
         });
-
+        console.log('should translate multicol', temp);
         if (temp.type === 'icon') {
           return true;
         }
@@ -441,7 +439,7 @@ export class Create extends React.Component { // eslint-disable-line react/prefe
         _.forEach(col.supportedEvents, (event) => {
           temp.injectedEvents[event] = this.getMappedEvent(col.id, event);
         });
-
+        console.log('should translate multicol action', temp);
         if (temp.type === 'icon') {
           return true;
         }
@@ -475,7 +473,7 @@ export class Create extends React.Component { // eslint-disable-line react/prefe
       _.forEach(inputField.supportedEvents, (event) => {
         temp.injectedEvents[event] = this.getMappedEvent(inputField.id, event);
       });
-
+      console.log('should translate collabel', temp);
       if (temp.type === 'icon') {
         return true;
       }
@@ -504,7 +502,7 @@ export class Create extends React.Component { // eslint-disable-line react/prefe
       _.forEach(actionField.supportedEvents, (event) => {
         temp.injectedEvents[event] = this.getMappedEvent(actionField.id, event);
       });
-
+      console.log('should translate collabel action', temp);
       if (temp.type === 'icon') {
         return true;
       }
@@ -554,6 +552,7 @@ export class Create extends React.Component { // eslint-disable-line react/prefe
   }
 
   cloneColLabel(sectionObj, tabIndex) {
+    console.log('cloning cloneColLabel', sectionObj, tabIndex);
     const section = _.cloneDeep(sectionObj);
     const inputFields = _.forEach(section.inputFields, (inputField) => {
       const inputF = inputField;
@@ -562,11 +561,12 @@ export class Create extends React.Component { // eslint-disable-line react/prefe
       return inputF;
     });
     section.inputFields = inputFields;
-
+    console.log('cloned ifs are', section);
     return section;
   }
 
   cloneMultiCol(sectionObj, tabIndex) {
+    console.log('cloning multicol ', sectionObj, tabIndex);
     const section = _.cloneDeep(sectionObj);
     const inputFields = _.forEach(section.inputFields, (inputField) => {
       const inputF = inputField;
@@ -580,11 +580,12 @@ export class Create extends React.Component { // eslint-disable-line react/prefe
       return inputF;
     });
     section.inputFields = inputFields;
-
+    console.log('cloned cols are', section);
     return section;
   }
 
   cloneParent(section, tabIndex) {
+    console.log('trying to clone', JSON.stringify(section), tabIndex);
     const parentsect = section;
     const childSectionsBeforeCloning = parentsect.childSections.slice();
     const childSections = [];
@@ -597,17 +598,19 @@ export class Create extends React.Component { // eslint-disable-line react/prefe
       } else if (childSection.type === 'parent') {
         sect = this.cloneParent(childSection, tabIndex);
       }
-
+      console.log('returning cloned parent section', sect);
       childSections.push(sect);
       return true;
     });
-
+    console.log('returning cloned parent section final 1', JSON.stringify(childSections));
     parentsect.childSections = childSections;
-
+    console.log('returning cloned parent section final', parentsect);
     return _.cloneDeep(parentsect);
   }
 
-  deleteVersion() {
+  deleteVersion(data, currentTab) {
+    console.log('trying to delete version in parent sms create');
+    console.log('deleting version', data, currentTab);
     if (this.state.tabCount === 1) {
       return;
     }
@@ -617,20 +620,23 @@ export class Create extends React.Component { // eslint-disable-line react/prefe
     this.setState({schema, tabCount: this.state.tabCount - 1});
   }
 
-  renameVersion() {
-
+  renameVersion(data, currentTab) {
+    console.log('renaming version', data, currentTab);
   }
 
-  markFinalVersion() {
+  markFinalVersion(data, currentTab) {
     const message = getMessageObject('success', 'Template Marked as Final Successfully', true);
     this.props.globalActions.addMessageToQueue(message);
+    console.log('markFinal version', data, currentTab);
   }
 
-  duplicateVersion() {
+  duplicateVersion(data, currentTab) {
+    console.log('duplicate version', data, currentTab);
     this.addVersion(this.state.tabCount);
   }
 
   addVersion(data, addNow) {
+    console.log('adding version', data);
     let tabIndex = data + 1;
     const schema = _.cloneDeep(this.state.schema);
     const containers = schema.containers.slice();
@@ -654,7 +660,7 @@ export class Create extends React.Component { // eslint-disable-line react/prefe
         });
         firstPane.sections = sections;
         schema.containers[0].panes.push(firstPane);
-
+        console.log('adding version tabIndex', tabIndex, tabIndex === 5, schema.containers[0].tabBarExtraContent.sections[0].actionFields[0].cols);
         if (tabIndex === 5) {
           schema.containers[0].tabBarExtraContent.sections[0].actionFields[0].cols[0].disabled = true;
         }
@@ -679,7 +685,7 @@ export class Create extends React.Component { // eslint-disable-line react/prefe
       });
       firstPane.sections = sections;
       schema.containers[0].panes.push(firstPane);
-
+      console.log('adding version tabIndex', tabIndex, tabIndex === 5, schema.containers[0].tabBarExtraContent.sections[0].actionFields[0].cols);
       if (tabIndex === 5) {
         schema.containers[0].tabBarExtraContent.sections[0].actionFields[0].cols[0].disabled = true;
       }
@@ -702,15 +708,16 @@ export class Create extends React.Component { // eslint-disable-line react/prefe
       }
     }
     if (isValid) {
+      console.log('isValid');
       return true;
     }
     const message = getMessageObject('error', 'Template data is not valid', true);
     this.props.globalActions.addMessageToQueue(message);
-
+    console.log('not valid');
     return false;
   }
 
-  insertAtCursor(field, myValue, currentTab) {
+  insertAtCursor(field, myValue) {
     //IE support
     const myField = field;
     if (document.selection) {
@@ -728,11 +735,8 @@ export class Create extends React.Component { // eslint-disable-line react/prefe
     } else {
       myField.value += myValue;
     }
-    const formData = _.cloneDeep(this.state.formData);
-    formData[currentTab - 1][field.id] = myField.value;
-    this.setState({formData});
-    // const event = new Event('input', { bubbles: true });
-    // callNativeEvent({field, value: myField.value, event});
+    const event = new Event('input', { bubbles: true });
+    myField.dispatchEvent(event);
   }
 
   startTemplateCreation(data) {
@@ -763,15 +767,18 @@ export class Create extends React.Component { // eslint-disable-line react/prefe
   }
 
   startLoading(ifEdit) {
+    console.log('startLoading', ifEdit);
     if (ifEdit) {
       this.setState({loading: true});
     }
   }
 
   handleFrameTasks = (e) => {
+    console.log('data listened to is', e.data);
     const type = e.data;
-
+    console.log('data type', typeof type);
     if (typeof type === 'object') {
+      console.log('received something', type);
       const action = type.action;
       switch (action) {
         case "startTemplateCreation":
@@ -795,15 +802,15 @@ export class Create extends React.Component { // eslint-disable-line react/prefe
           this.getFormData(e);
           break;
         case "startTemplateCreation":
-
+          console.log('Starting to create template');
           //this.getFormData(e);
           break;
         case "moveToTemplates":
-
+          console.log('moving to templates');
           this.moveToTemplates();
           break;
         case "validateContent":
-
+          console.log('validating Content');
           this.validateContent(e);
           break;
         default:
@@ -813,6 +820,7 @@ export class Create extends React.Component { // eslint-disable-line react/prefe
   }
 
   handleOnTagsContextChange = (data) => {
+    console.log('parent tags context', data);
     const query = {
       layout: 'SMS',
       type: 'TAG',
@@ -839,10 +847,11 @@ export class Create extends React.Component { // eslint-disable-line react/prefe
         temp.panes.push(basePane);
       }
     });
-    this.setState({ schema, loadingStatus: this.state.loadingStatus + 1 });
+    this.setState({ schema });
   }
 
   validateContent = (e) => {
+    console.log('posting final validation result', this.state.isFormValid);
     const response = {
       action: "validateContent",
       value: this.state.isFormValid,
@@ -869,6 +878,487 @@ 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 });
   }
 
@@ -879,11 +1369,11 @@ export class Create extends React.Component { // eslint-disable-line react/prefe
   saveFormData(formData) {
     //Logic to save in db etc
     // const isValidated = this.validateFormData(formData);
-    //
+    // console.log('whyyyy');
     // if (!isValidated) {
     //   return;
     // }
-
+    console.log('Saving form data', formData, this.state.tabCount);
     const obj = {};
     obj.versions = {
       base: {},
@@ -896,36 +1386,21 @@ export class Create extends React.Component { // eslint-disable-line react/prefe
     }
     obj.name = formData['template-name'];
     obj.versions.base = formData.base;
-
-    this.props.actions.createTemplate(obj, this.onCreateTemplateComplete);
-  }
-  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;
-    }
-    // if (isLoading && this.state.loadingStatus >= 2) {
-    //   this.props.creativesContainerActions.hideCreativesContanerLoader();
-    // }
-    if (!isLoading && this.props.setIsLoadingContent) {
-      this.props.setIsLoadingContent(isLoading);
-    }
-    return isLoading;
+    console.log('obj', obj);
+    this.props.actions.createTemplate(obj);
   }
   render() {
     console.log("this.props sms create: ", this.props);
     const schema = this.state.schema;
-    const spinning = this.isSmsLoading();
+    const spinning = this.state.loading || (this.props.Create && "createTemplateInProgress" in this.props.Create && this.props.Create.createTemplateInProgress);
     let tags = this.props.metaEntities && this.props.metaEntities.tags && this.props.metaEntities.tags.standard ? this.props.metaEntities.tags.standard : [];
 
     if (this.props.location.query.type === 'embedded' && this.props.location.query.module === 'library' && !this.props.getDefaultTags) {
       tags = this.props.supportedTags; // if get default tags is not present and supported tags is present use that inlbrary mode
     }
     return (
-      <div className="sms-create-container">
-        <Spin spinning={spinning}>
+      <div>
+        <Spin tip={this.props.intl.formatMessage(messages.saveTemplateLoader)} spinning={spinning}>
           {/*<\Row style={{marginBottom: '16px', marginLeft: '-40px'}}>
             <Col offset={1}>
               <Breadcrumb>
@@ -938,7 +1413,6 @@ export class Create extends React.Component { // eslint-disable-line react/prefe
           <Row>
             <Col>
               <FormBuilder
-                isFullMode={this.props.isFullMode}
                 schema={schema}
                 onSubmit={this.saveFormData}
                 onChange={this.onFormDataChange}
@@ -980,17 +1454,12 @@ Create.propTypes = {
   supportedTags: PropTypes.array,
   getDefaultTags: PropTypes.string,
   injectedTags: PropTypes.object,
-  setIsLoadingContent: PropTypes.bool,
-  isFullMode: PropTypes.bool,
-  getFormSubscriptionData: PropTypes.func,
-  isLoadingMetaEntities: PropTypes.bool,
 };
 
 const mapStateToProps = createStructuredSelector({
   Create: makeSelectCreate(),
   createResponse: makeSelectCreateResponse(),
   metaEntities: makeSelectMetaEntities(),
-  isLoadingMetaEntities: isLoadingMetaEntities(),
   injectedTags: setInjectedTags(),
 });
 
@@ -998,7 +1467,6 @@ function mapDispatchToProps(dispatch) {
   return {
     actions: bindActionCreators(actions, dispatch),
     globalActions: bindActionCreators(globalActions, dispatch),
-    creativesContainerActions: bindActionCreators(creativesContainerActions, dispatch),
   };
 }