@capillarytech/creatives-library 2.0.69 → 2.0.71

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, isLoadingMetaEntities, setInjectedTags } from '../../Cap/selectors';
+import { makeSelectMetaEntities, setInjectedTags } from '../../Cap/selectors';
 import { UserIsAuthenticated } from '../../../utils/authWrapper';
 import FormBuilder from '../../../components/FormBuilder';
 import * as actions from './actions';
@@ -24,14 +24,11 @@ import '../Create/_smsCreate.scss';
 import messages from './messages';
 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 Edit extends React.Component { // eslint-disable-line react/prefer-stateless-function
   constructor(props) {
     super(props);
     this.state = {
-      loadingStatus: 0,
       formData: {},
       tabCount: 1,
       schema: {},
@@ -85,6 +82,7 @@ export class Edit extends React.Component { // eslint-disable-line react/prefer-
   }
 
   componentWillMount() {
+    console.log('edit mounting');
     const query = {
       layout: 'SMS',
       type: 'LAYOUT',
@@ -128,7 +126,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, loadingStatus: this.state.loadingStatus + 1}, () => {
+      this.setState({schema: 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)) {
@@ -148,6 +146,7 @@ export class Edit extends React.Component { // eslint-disable-line react/prefer-
       }
     }
     if (nextProps.Edit.editResponse && nextProps.Edit.editResponse.templateId) {
+      console.log('reseting schema');
       this.resetSchema();
       this.setState({
         formData: {},
@@ -173,66 +172,41 @@ export class Edit extends React.Component { // eslint-disable-line react/prefer-
   }
 
   componentWillUnmount() {
-    if (this.props.setIsLoadingContent) {
-      this.props.setIsLoadingContent(true); // setting isLoading of CreativesContainer so that slidebox foot can be hidden till content is loaded
-    }
-    this.props.actions.resetEditTemplate();
     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);
   }
 
   onFormDataChange(formData, tabCount, currentTab) {
+    console.log('Form data changed is ', formData, tabCount, currentTab);
     this.setState({formData, tabCount, currentTab});
     if (currentTab) {
       this.setState({currentTab});
     }
   }
 
-  onVersionNameChange() {
-
+  onVersionNameChange(data, versionIndex) {
+    console.log('version name changed to', data, versionIndex);
   }
 
   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});
   }
-  onUpdateTemplateComplete = (editResponse) => {
-    if (editResponse.templateId) {
-      this.resetSchema();
-      this.setState({
-        formData: {},
-        tabCount: 1,
-        currentTab: 1,
-        editData: {},
-      });
-      const message = getMessageObject('success', 'SMS Template Edited Successfully', true);
-      this.props.globalActions.addMessageToQueue(message);
-      this.props.actions.clearEditResponse();
-      const module = this.props.location.query.module ? this.props.location.query.module : 'default';
-      const type = this.props.location.query.type;
-      if (this.props.isFullMode) {
-        const {versions, ...rest} = editResponse.templateId;
-        this.props.getFormSubscriptionData({ value: versions, ...rest, validity: true});
-      } else {
-        this.props.router.push({
-          pathname: `/sms/`,
-          query: type === 'embedded' ? {type: 'embedded', module} : {module},
-        });
-      }
-    }
-  }
+
   setEditState(data) {
     const that = this;
     const tabCount = data.versions.history.length;
@@ -253,7 +227,8 @@ export class Edit extends React.Component { // eslint-disable-line react/prefer-
       }
       if (type === 'embedded' || count > 0) {
         setTimeout( () => {
-          if (type === 'embedded' && !_.isEmpty(that.state.formData)) {
+          console.log('removing standalone');
+          if (type === 'embedded') {
             that.removeStandAlone();
           } else {
             that.addVersion(count, tabCount);
@@ -268,7 +243,7 @@ export class Edit extends React.Component { // eslint-disable-line react/prefer-
       formData[0].base = true;
     }
     formData.base = data.versions.base;
-
+    console.log('form data after discarding ', formData);
     this.setState({tabCount, formData, editData: data, currentTab}, () => {
     });
   }
@@ -278,10 +253,12 @@ export class Edit extends React.Component { // eslint-disable-line react/prefer-
   }
 
   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;
@@ -293,19 +270,17 @@ export class Edit extends React.Component { // eslint-disable-line react/prefer-
     }
     const result = {};
     result.base = baseData;
-    if (this.state.isFormValid) {
-      const msgObj = updateCharCount(baseData['sms-editor']);
-      result.base.msg_count = msgObj.msgCount;
-    }
+    const msgObj = 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);
     }
@@ -313,6 +288,7 @@ export class Edit extends React.Component { // eslint-disable-line react/prefer-
   }
 
   getCurrentWindow(e) {
+    console.log('in sms create', e);
     const response = {
       action: e.action,
       value: 'edit',
@@ -373,6 +349,7 @@ export class Edit extends React.Component { // eslint-disable-line react/prefer-
   }
 
   handleOnTagsContextChange = (data) => {
+    console.log('parent tags context', data);
     const query = {
       layout: 'SMS',
       type: 'TAG',
@@ -391,9 +368,10 @@ export class Edit extends React.Component { // eslint-disable-line react/prefer-
   }
 
   startTemplateCreation(data) {
+    console.log('startTemplateCreation');
     if (data.edit) {
       const ifUnicode = checkUnicode(data.content);
-
+      console.log('smsDetails', ifUnicode, data.content);
       const content = data.content;
       const tempData = {
         'sms-editor': content,
@@ -411,12 +389,14 @@ export class Edit extends React.Component { // eslint-disable-line react/prefer-
   }
 
   startLoading(ifEdit) {
+    console.log('startLoading', ifEdit);
     if (ifEdit) {
       this.setState({loading: true});
     }
   }
 
   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!",
@@ -433,6 +413,7 @@ export class Edit extends React.Component { // eslint-disable-line react/prefer-
   }
 
   discardValues() {
+    console.log('discarding', this.props.Edit);
     this.resetSchema();
     this.setState({
       formData: {},
@@ -445,6 +426,487 @@ export class Edit extends React.Component { // eslint-disable-line react/prefer-
   }
 
   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 });
   }
 
@@ -461,13 +923,15 @@ export class Edit extends React.Component { // eslint-disable-line react/prefer-
       }
     }
     if (isValid) {
+      console.log('isValid');
       return true;
     }
-
+    console.log('not valid');
     return false;
   }
 
   injectEvents(schema) {
+    console.log('now injecting events in edit');
     const temp = schema;
     temp.standalone.sections = this.injectSections(temp.standalone.sections);
     _.forEach(temp.containers, (container) => {
@@ -475,7 +939,7 @@ export class Edit extends React.Component { // eslint-disable-line react/prefer-
       tempContainer = this.injectContainer(tempContainer);
       return tempContainer;
     });
-    this.setState({schema, loadingStatus: this.state.loadingStatus + 1});
+    this.setState({schema});
     return schema;
   }
 
@@ -510,7 +974,7 @@ export class Edit extends React.Component { // eslint-disable-line react/prefer-
         _.forEach(col.supportedEvents, (event) => {
           temp.injectedEvents[event] = this.getMappedEvent(col.id, event);
         });
-
+        console.log('should translate multicol', temp);
         temp = this.injectMessages(temp);
         return true;
       });
@@ -527,7 +991,7 @@ export class Edit extends React.Component { // eslint-disable-line react/prefer-
         _.forEach(col.supportedEvents, (event) => {
           temp.injectedEvents[event] = this.getMappedEvent(col.id, event);
         });
-
+        console.log('should translate multicol action', temp);
         temp = this.injectMessages(temp);
         return true;
       });
@@ -547,7 +1011,7 @@ export class Edit extends React.Component { // eslint-disable-line react/prefer-
       _.forEach(inputField.supportedEvents, (event) => {
         temp.injectedEvents[event] = this.getMappedEvent(inputField.id, event);
       });
-
+      console.log('should translate collabel', temp);
       temp = this.injectMessages(temp);
       return true;
     });
@@ -562,7 +1026,7 @@ export class Edit extends React.Component { // eslint-disable-line react/prefer-
       _.forEach(actionField.supportedEvents, (event) => {
         temp.injectedEvents[event] = this.getMappedEvent(actionField.id, event);
       });
-
+      console.log('should translate collabel action', temp);
       temp = this.injectMessages(temp);
       return true;
     });
@@ -671,16 +1135,18 @@ export class Edit extends React.Component { // eslint-disable-line react/prefer-
     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);
   }
 
@@ -694,6 +1160,7 @@ export class Edit extends React.Component { // eslint-disable-line react/prefer-
   }
 
   addVersion(data, addNow) {
+    console.log('adding version', data);
     let tabIndex = data + 1;
     const schema = _.cloneDeep(this.state.schema);
     const containers = schema.containers.slice();
@@ -717,7 +1184,7 @@ export class Edit extends React.Component { // eslint-disable-line react/prefer-
         });
         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;
         }
@@ -742,7 +1209,7 @@ export class Edit extends React.Component { // eslint-disable-line react/prefer-
       });
       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;
       }
@@ -751,7 +1218,8 @@ export class Edit extends React.Component { // eslint-disable-line react/prefer-
       }
     }
   }
-  insertAtCursor(field, myValue, currentTab) {
+
+  insertAtCursor(field, myValue) {
     //IE support
     const myField = field;
     if (document.selection) {
@@ -769,16 +1237,15 @@ export class Edit extends React.Component { // eslint-disable-line react/prefer-
     } 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);
   }
 
   handleFrameTasks = (e) => {
+    console.log('data listened to is', e.data);
     const type = e.data;
     if (typeof type === 'object') {
+      console.log('received something', type);
       const action = type.action;
       switch (action) {
         case "startTemplateCreation":
@@ -802,15 +1269,15 @@ export class Edit extends React.Component { // eslint-disable-line react/prefer-
         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:
@@ -820,7 +1287,7 @@ export class Edit extends React.Component { // eslint-disable-line react/prefer-
 
   removeStandAlone() {
     let formData = _.cloneDeep(this.state.formData);
-
+    console.log('removing standalone 2', formData);
     let baseFormData = {};
     const oldBaseKeys = formData[0];
     let baseIndex = -1;
@@ -863,11 +1330,12 @@ export class Edit extends React.Component { // eslint-disable-line react/prefer-
         temp.panes.push(basePane);
       }
     });
-
-    this.setState({ schema, loadingStatus: this.state.loadingStatus + 1, formData, tabCount: 1, tabKey: formData.base.tabKey, currentTab: 1 });
+    console.log('final data after removing', formData);
+    this.setState({ schema, formData, tabCount: 1, tabKey: formData.base.tabKey, currentTab: 1 });
   }
 
   validateContent = (e) => {
+    console.log('posting final validation result', this.state.isFormValid);
     const response = {
       action: "validateContent",
       value: this.state.isFormValid,
@@ -887,7 +1355,7 @@ export class Edit extends React.Component { // eslint-disable-line react/prefer-
 
   saveFormData(formData) {
     //Logic to save in db etc
-
+    console.log('Saving form data', formData, this.state.tabCount);
     const obj = _.cloneDeep(this.state.editData);
     obj.versions = {
       base: {},
@@ -898,35 +1366,20 @@ export class Edit extends React.Component { // eslint-disable-line react/prefer-
     }
     obj.name = formData['template-name'];
     obj.versions.base = formData.base;
-
-    this.props.actions.editTemplate(obj, this.onUpdateTemplateComplete);
-  }
-  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.props.isFullMode ? this.state.loadingStatus < 2 : this.state.loadingStatus < 3;
-    }
-    // if (isLoading && this.state.loadingStatus >= 3) {
-    //   this.props.creativesContainerActions.hideCreativesContanerLoader();
-    // }
-    if (!isLoading && this.props.setIsLoadingContent) {
-      this.props.setIsLoadingContent(isLoading);
-    }
-    return isLoading;
+    console.log('edit obj', obj);
+    this.props.actions.editTemplate(obj);
   }
   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.isSmsLoading();
-    let tags = this.props.metaEntities && this.props.metaEntities.tags ? this.props.metaEntities.tags.standard : [];
+    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)));
+    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;
     }
     return (
-      <div className="sms-email-container">
+      <div>
         <Spin tip={tipText} spinning={spinning}>
           {/*<Row style={{marginBottom: '16px', marginLeft: '-40px'}}>
             <Col offset={1}>
@@ -940,7 +1393,6 @@ export class Edit extends React.Component { // eslint-disable-line react/prefer-
           <Row>
             <Col>
               <FormBuilder
-                isFullMode={this.props.isFullMode}
                 schema={schema}
                 onSubmit={this.saveFormData}
                 onChange={this.onFormDataChange}
@@ -983,11 +1435,6 @@ Edit.propTypes = {
   templateData: PropTypes.object,
   supportedTags: PropTypes.array,
   getDefaultTags: PropTypes.string,
-  isLoadingMetaEntities: PropTypes.bool,
-  // creativesContainerActions: PropTypes.object,
-  isFullMode: PropTypes.bool,
-  getFormSubscriptionData: PropTypes.func,
-  setIsLoadingContent: PropTypes.func,
   // route: PropTypes.object,
   injectedTags: PropTypes.object,
 };
@@ -998,14 +1445,12 @@ const mapStateToProps = createStructuredSelector({
   templateDetails: makeSelectTemplateDetailsResponse(),
   metaEntities: makeSelectMetaEntities(),
   injectedTags: setInjectedTags(),
-  isLoadingMetaEntities: isLoadingMetaEntities(),
 });
 
 function mapDispatchToProps(dispatch) {
   return {
     actions: bindActionCreators(actions, dispatch),
     globalActions: bindActionCreators(globalActions, dispatch),
-    creativesContainerActions: bindActionCreators(creativesContainerActions, dispatch),
   };
 }