@capillarytech/creatives-library 0.0.1

package/containers/Sms/Create/index.js

@@ -0,0 +1,1464 @@
+/*
+ *
+ * Create
+ *
+ */
+
+import React, { PropTypes } from 'react';
+import { connect } from 'react-redux';
+import { Row, Col, Spin } from 'antd';
+import { injectIntl, intlShape } from 'react-intl';
+import { createStructuredSelector } from 'reselect';
+import _ from 'lodash';
+import { bindActionCreators } from 'redux';
+import { makeSelectCreate, makeSelectCreateResponse } from './selectors';
+import { makeSelectMetaEntities } from '../../Cap/selectors';
+import { UserIsAuthenticated } from '../../../utils/authWrapper';
+import './_smsCreate.scss';
+import FormBuilder from '../../../components/FormBuilder';
+import * as actions from './actions';
+import messages from './messages';
+import * as charCount from '../../../utils/smsCharCount';
+import * as globalActions from '../../../containers/Cap/actions';
+import {getMessageObject} from '../../../utils/messageUtils';
+
+export class Create extends React.Component { // eslint-disable-line react/prefer-stateless-function
+  constructor(props) {
+    super(props);
+    this.state = {
+      formData: {},
+      tabCount: 1,
+      currentTab: 1,
+      schema: {},
+      loading: false,
+      isFormValid: true,
+      injectedTags: {},
+      checkValidation: false,
+      tabKey: '',
+      showModal: false,
+      modalContent: {title: "Alert", body: "Do you really want to delete this version?", type: 'confirm', id: 'sms-version-modal'},
+    };
+    this.saveFormData = this.saveFormData.bind(this);
+    this.onFormDataChange = this.onFormDataChange.bind(this);
+    this.onTemplateNameChange = this.onTemplateNameChange.bind(this);
+    this.onTemplateContentChange = this.onTemplateContentChange.bind(this);
+    this.handleFrameTasks = this.handleFrameTasks.bind(this);
+    this.getFormData = this.getFormData.bind(this);
+    this.validateContent = this.validateContent.bind(this);
+    this.onTagSelect = this.onTagSelect.bind(this);
+    this.insertAtCursor = this.insertAtCursor.bind(this);
+    this.addVersion = this.addVersion.bind(this);
+    this.onTabChange = this.onTabChange.bind(this);
+    this.resetSchema = this.resetSchema.bind(this);
+    this.resetState = this.resetState.bind(this);
+    this.discardValues = this.discardValues.bind(this);
+    this.cloneColLabel = this.cloneColLabel.bind(this);
+    this.cloneMultiCol = this.cloneMultiCol.bind(this);
+    this.cloneParent = this.cloneParent.bind(this);
+    this.markFinalVersion = this.markFinalVersion.bind(this);
+    this.deleteVersion = this.deleteVersion.bind(this);
+    this.duplicateVersion = this.duplicateVersion.bind(this);
+    this.renameVersion = this.renameVersion.bind(this);
+    this.onVersionNameChange = this.onVersionNameChange.bind(this);
+    this.startTemplateCreation = this.startTemplateCreation.bind(this);
+    this.startLoading = this.startLoading.bind(this);
+    this.removeStandAlone = this.removeStandAlone.bind(this);
+    this.validateFormData = this.validateFormData.bind(this);
+    this.getCurrentWindow = this.getCurrentWindow.bind(this);
+    this.moveToTemplates = this.moveToTemplates.bind(this);
+    this.cancelTemplate = this.cancelTemplate.bind(this);
+    this.injectEvents = this.injectEvents.bind(this);
+    this.injectSections = this.injectSections.bind(this);
+    this.injectContainer = this.injectContainer.bind(this);
+    this.injectParentSection = this.injectParentSection.bind(this);
+    this.injectColLabelSection = this.injectColLabelSection.bind(this);
+    this.injectMultiColSection = this.injectMultiColSection.bind(this);
+    this.getMappedEvent = this.getMappedEvent.bind(this);
+    this.setFormValidity = this.setFormValidity.bind(this);
+    this.showNext = this.showNext.bind(this);
+    this.injectMessages = this.injectMessages.bind(this);
+  }
+
+  componentWillMount() {
+    console.log('create mounting');
+    if (this.props.route.name === 'view') {
+      this.setState({loading: false});
+      // this.removeStandAlone();
+    }
+  }
+
+  componentDidMount() {
+    console.log('added listener create,', this.props);
+    const query = {
+      layout: 'SMS',
+      type: 'LAYOUT',
+    };
+    this.props.globalActions.fetchSchemaForEntity(query);
+    const type = this.props.location.query.type;
+    window.addEventListener("message", this.handleFrameTasks);
+    if (type === 'embedded') {
+      const response = {
+        action: 'startTemplateCreation',
+      };
+      parent.postMessage(JSON.stringify(response), '*');
+    }
+    //For testing embedded mode data injection
+    // let that = this;
+    // setTimeout( function() {
+    //   that.startTemplateCreation(
+    //     {
+    //       edit: true,
+    //       content: 'asasasasasas 12122',
+    //       tags: {},
+    //     }
+    //   );
+    // }, 5000);
+  }
+
+  componentWillReceiveProps(nextProps) {
+    console.log('recieved props ', nextProps, nextProps.Create, this.props.Create);
+    if (nextProps.location.query.module === 'subscription' && 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', 'Something Went Wrong!!', 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);
+      const query = {
+        layout: 'SMS',
+        type: 'TAG',
+        context: this.props.location.query.type === 'embedded' ? this.props.location.query.module : 'default',
+        embedded: this.props.location.query.type === 'embedded' ? this.props.location.query.type : 'full',
+      };
+      this.props.globalActions.fetchSchemaForEntity(query);
+      if (this.props.location.query.type === 'embedded') {
+        this.showNext();
+      }
+    }
+    if (nextProps.metaEntities && nextProps.metaEntities.tags && nextProps.metaEntities.tags.custom && this.props.metaEntities.tags !== nextProps.metaEntities.tags) {
+      let injectedTags = _.cloneDeep(this.state.injectedTags);
+      delete injectedTags["Registration custom fields"];
+      delete injectedTags["Store custom fields"];
+      delete injectedTags["Transaction custom fields"];
+      injectedTags = _.merge({}, injectedTags, nextProps.metaEntities.tags.custom);
+      console.log('new injected tags', nextProps.metaEntities.tags.custom);
+      if (!_.has(nextProps.metaEntities.tags.custom, "Registration custom fields")) {
+        delete injectedTags["Registration custom fields"];
+      }
+      if (!_.has(nextProps.metaEntities.tags.custom, "Store custom fields")) {
+        delete injectedTags["Store custom fields"];
+      }
+      if (!_.has(nextProps.metaEntities.tags.custom, "Transaction custom fields")) {
+        delete injectedTags["Transaction custom fields"];
+      }
+      this.setState({injectedTags});
+    }
+    // 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);
+    //   this.injectEvents(nextProps.metaEntities.layouts[0].definition);
+    // }
+  }
+
+  componentWillUnmount() {
+    console.log('removed listener create');
+    window.removeEventListener("message", this.handleFrameTasks);
+  }
+
+  onTemplateNameChange(name) {
+    console.log('Template name changed to ', name);
+  }
+
+  onTemplateContentChange(content) {
+    console.log('Template content changed to ', content);
+  }
+
+  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});
+    }
+  }
+
+  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}}}`);
+    document.getElementById(editorId).focus();
+  }
+
+  onTabChange(data) {
+    console.log('inside parent ontabchange', data, this.state);
+    this.setState({currentTab: data});
+  }
+
+  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;
+      }
+    });
+    baseData['sms-editor'] = baseData[`sms-editor${versionIdx > 0 ? versionIdx : ''}`];
+    if (versionIdx !== "0") {
+      delete baseData[`sms-editor${versionIdx > 0 ? versionIdx : ''}`];
+    }
+    const result = {};
+    result.base = baseData;
+    const response = {
+      action: "getFormData",
+      value: result,
+      postAction: value || 'next',
+      validity: this.state.isFormValid,
+    };
+    this.setState({checkValidation: true});
+    console.log('posting final result internal', response);
+    if (e) {
+      e.source.postMessage(JSON.stringify(response), e.origin);
+    }
+    return response;
+  }
+
+  getCurrentWindow(e) {
+    console.log('in sms create', e);
+    const response = {
+      action: e.action,
+      value: 'edit',
+      direction: e.value,
+    };
+    parent.postMessage(JSON.stringify(response), '*');
+  }
+
+  getMappedEvent(id, event) {
+    const map = {
+      "template-name": {
+        "onChange": this.onTemplateNameChange,
+      },
+      "discard-button": {
+        "discardValues": this.discardValues,
+      },
+      "cancel-button": {
+        "cancelTemplate": this.cancelTemplate,
+      },
+      "save-button": {
+        saveFormData: this.saveFormData,
+      },
+      "sms-editor": {
+        "onChange": this.onTemplateContentChange,
+      },
+      "tagList": {
+        "onTagSelect": this.onTagSelect,
+      },
+      "unicode-validity": {
+        onChange: this.onTemplateNameChange,
+      },
+      "add-version-button": {
+        addVersion: this.addVersion,
+      },
+      "tab-header": {
+        onChange: this.onVersionNameChange,
+      },
+      "tab-options-popover": {
+        onTabOptionSelect: this.onTabOptionSelect,
+      },
+      "mark-final-version-label": {
+        markFinalVersion: this.markFinalVersion,
+      },
+      "duplicate-version-label": {
+        duplicateVersion: this.duplicateVersion,
+      },
+      "rename-version-label": {
+        renameVersion: this.renameVersion,
+      },
+      "delete-version-label": {
+        deleteVersion: this.deleteVersion,
+      },
+      "pane": {
+        onTabChange: this.onTabChange,
+      },
+    };
+    return map[id][event];
+  }
+
+  setFormValidity(isFormValid) {
+    this.setState({isFormValid});
+  }
+
+  injectMessages(elem) {
+    const temp = elem;
+    if (temp.value && messages[temp.value]) {
+      temp.value = this.props.intl.formatMessage(messages[temp.value]);
+    }
+    if (temp.label && messages[temp.label]) {
+      temp.label = this.props.intl.formatMessage(messages[temp.label]);
+    }
+    if (temp.errorMessage && messages[temp.errorMessage]) {
+      temp.errorMessage = this.props.intl.formatMessage(messages[temp.errorMessage]);
+    }
+    if (temp.placeholder && messages[temp.placeholder]) {
+      temp.placeholder = this.props.intl.formatMessage(messages[temp.placeholder]);
+    }
+    return temp;
+  }
+
+  showNext() {
+    const response = {
+      action: "showNext",
+      value: true,
+    };
+    parent.postMessage(JSON.stringify(response), '*');
+  }
+
+  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!",
+      type: 'confirm',
+      id: 'template-back-confirm-modal',
+      show: true,
+    };
+    this.setState({modalContent, showModal: true});
+    // 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},
+    // });
+  }
+
+  cancelTemplate() {
+    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},
+    });
+  }
+
+  injectEvents(schema) {
+    console.log('now injecting events');
+    const temp = schema;
+    temp.standalone.sections = this.injectSections(temp.standalone.sections);
+    _.forEach(temp.containers, (container) => {
+      let tempContainer = container;
+      tempContainer = this.injectContainer(tempContainer);
+      return tempContainer;
+    });
+    console.log('final injected schema', schema);
+    this.setState({schema}, () => {
+      const type = this.props.location.query.type;
+      if (type === 'embedded') {
+        this.removeStandAlone();
+      }
+    });
+    return schema;
+  }
+
+  injectContainer(container) {
+    const temp = container;
+    if (temp.type === 'tabs') {
+      temp.tabContent.sections = this.injectSections(temp.tabContent.sections);
+      temp.tabBarExtraContent.sections = this.injectSections(temp.tabBarExtraContent.sections);
+      temp.tabContent.sections = this.injectSections(temp.tabContent.sections);
+      temp.injectedEvents = {};
+      _.forEach(temp.supportedEvents, (event) => {
+        temp.injectedEvents[event] = this.getMappedEvent(temp.id, event);
+      });
+      _.forEach(temp.panes, (pane) => {
+        const tempPane = pane;
+        tempPane.sections = this.injectSections(tempPane.sections);
+      });
+    }
+    return temp;
+  }
+
+  injectMultiColSection(section) {
+    _.forEach(section.inputFields, (inputField) => {
+      _.forEach(inputField.cols, (col) => {
+        const temp = col;
+        if (temp.type === 'popover') {
+          temp.content.sections = this.injectSections(temp.content.sections);
+          temp.value.sections = this.injectSections(temp.value.sections);
+          return true;
+        }
+        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;
+        }
+        if (temp.value && messages[temp.value]) {
+          temp.value = this.props.intl.formatMessage(messages[temp.value]);
+        }
+        if (temp.label && messages[temp.label]) {
+          temp.label = this.props.intl.formatMessage(messages[temp.label]);
+        }
+        if (temp.errorMessage && messages[temp.errorMessage]) {
+          temp.errorMessage = this.props.intl.formatMessage(messages[temp.errorMessage]);
+        }
+        if (temp.placeholder && messages[temp.placeholder]) {
+          temp.placeholder = this.props.intl.formatMessage(messages[temp.placeholder]);
+        }
+        return true;
+      });
+    });
+    _.forEach(section.actionFields, (actionField) => {
+      _.forEach(actionField.cols, (col) => {
+        const temp = col;
+        if (temp.type === 'popover') {
+          temp.content.sections = this.injectSections(temp.content.sections);
+          temp.value.sections = this.injectSections(temp.value.sections);
+          return true;
+        }
+        temp.injectedEvents = {};
+        _.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;
+        }
+        if (temp.value && messages[temp.value]) {
+          temp.value = this.props.intl.formatMessage(messages[temp.value]);
+        }
+        if (temp.label && messages[temp.label]) {
+          temp.label = this.props.intl.formatMessage(messages[temp.label]);
+        }
+        if (temp.errorMessage && messages[temp.errorMessage]) {
+          temp.errorMessage = this.props.intl.formatMessage(messages[temp.errorMessage]);
+        }
+        if (temp.placeholder && messages[temp.placeholder]) {
+          temp.placeholder = this.props.intl.formatMessage(messages[temp.placeholder]);
+        }
+        return true;
+      });
+    });
+    return section;
+  }
+
+  injectColLabelSection(section) {
+    _.forEach(section.inputFields, (inputField) => {
+      const temp = inputField;
+      if (temp.type === 'popover') {
+        temp.content.sections = this.injectSections(temp.content.sections);
+        temp.value.sections = this.injectSections(temp.value.sections);
+        return true;
+      }
+      temp.injectedEvents = {};
+      _.forEach(inputField.supportedEvents, (event) => {
+        temp.injectedEvents[event] = this.getMappedEvent(inputField.id, event);
+      });
+      console.log('should translate collabel', temp);
+      if (temp.type === 'icon') {
+        return true;
+      }
+      if (temp.value && messages[temp.value]) {
+        temp.value = this.props.intl.formatMessage(messages[temp.value]);
+      }
+      if (temp.label && messages[temp.label]) {
+        temp.label = this.props.intl.formatMessage(messages[temp.label]);
+      }
+      if (temp.errorMessage && messages[temp.errorMessage]) {
+        temp.errorMessage = this.props.intl.formatMessage(messages[temp.errorMessage]);
+      }
+      if (temp.placeholder && messages[temp.placeholder]) {
+        temp.placeholder = this.props.intl.formatMessage(messages[temp.placeholder]);
+      }
+      return true;
+    });
+    _.forEach(section.actionFields, (actionField) => {
+      const temp = actionField;
+      if (temp.type === 'popover') {
+        temp.content.sections = this.injectSections(temp.content.sections);
+        temp.value.sections = this.injectSections(temp.value.sections);
+        return true;
+      }
+      temp.injectedEvents = {};
+      _.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;
+      }
+      if (temp.value && messages[temp.value]) {
+        temp.value = this.props.intl.formatMessage(messages[temp.value]);
+      }
+      if (temp.label && messages[temp.label]) {
+        temp.label = this.props.intl.formatMessage(messages[temp.label]);
+      }
+      if (temp.errorMessage && messages[temp.errorMessage]) {
+        temp.errorMessage = this.props.intl.formatMessage(messages[temp.errorMessage]);
+      }
+      if (temp.placeholder && messages[temp.placeholder]) {
+        temp.placeholder = this.props.intl.formatMessage(messages[temp.placeholder]);
+      }
+      return true;
+    });
+    return section;
+  }
+
+  injectSections(sections) {
+    _.forEach(sections, (section) => {
+      let temp = section;
+      if (temp.type === 'col-label') {
+        temp = this.injectColLabelSection(temp);
+      } else if (section.type === 'multicols') {
+        temp = this.injectMultiColSection(temp);
+      } else if (section.type === 'parent') {
+        temp = this.injectSections(temp.childSections);
+      }
+    });
+    return sections;
+  }
+
+  injectParentSection(section) {
+    _.forEach(section.childSections, (childSection) => {
+      let temp = childSection;
+      if (temp.type === 'col-label') {
+        temp = this.injectColLabelSection(temp);
+      } else if (section.type === 'multicols') {
+        temp = this.injectMultiColSection(temp);
+      } else if (section.type === 'parent') {
+        temp = this.injectParentSection(temp);
+      }
+    });
+    return section;
+  }
+
+  cloneColLabel(sectionObj, tabIndex) {
+    console.log('cloning cloneColLabel', sectionObj, tabIndex);
+    const section = _.cloneDeep(sectionObj);
+    const inputFields = _.forEach(section.inputFields, (inputField) => {
+      const inputF = inputField;
+      inputF.id = `${inputField.id}${tabIndex}`;
+      inputF.paneIndex = tabIndex;
+      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;
+      const cols = _.forEach(inputF.cols, (col) => {
+        const colTemp = col;
+        colTemp.id = `${col.id}${tabIndex}`;
+        colTemp.paneIndex = tabIndex;
+        return colTemp;
+      });
+      inputF.cols = cols;
+      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 = [];
+    _.forEach(childSectionsBeforeCloning, (childSection) => {
+      let sect = {};
+      if (childSection.type === 'col-label') {
+        sect = this.cloneColLabel(childSection, tabIndex);
+      } else if (childSection.type === 'multicols') {
+        sect = this.cloneMultiCol(childSection, tabIndex);
+      } 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(data, currentTab) {
+    console.log('trying to delete version in parent sms create');
+    console.log('deleting version', data, currentTab);
+    if (this.state.tabCount === 1) {
+      return;
+    }
+    const schema = _.cloneDeep(this.state.schema);
+    schema.containers[0].panes.splice(this.state.tabCount - 1, 1);
+    schema.containers[0].tabBarExtraContent.sections[0].actionFields[0].cols[0].disabled = false;
+    this.setState({schema, tabCount: this.state.tabCount - 1});
+  }
+
+  renameVersion(data, currentTab) {
+    console.log('renaming version', data, currentTab);
+  }
+
+  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(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();
+    const panes = containers[0].panes.slice();
+    if (addNow && data === 1) {
+      for (let idx = 1; idx < addNow; idx += 1) {
+        const sections = [];
+        const firstPane = _.cloneDeep(panes[0]);
+        tabIndex = idx + 1;
+        _.forEach(firstPane.sections, (section) => { // eslint-disable-line no-loop-func
+          let sect = _.cloneDeep(section);
+          if (sect.type === 'col-label') {
+            sect = this.cloneColLabel(sect, tabIndex);
+          } else if (sect.type === 'multicols') {
+            sect = this.cloneMultiCol(sect, tabIndex);
+          } else if (sect.type === 'parent') {
+            sect = this.cloneParent(sect, tabIndex);
+          }
+          sections.push(sect);
+          return true;
+        });
+        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;
+        }
+      }
+      if (schema) {
+        this.setState({schema});
+      }
+    } else if (!addNow) {
+      const sections = [];
+      const firstPane = _.cloneDeep(panes[0]);
+      _.forEach(firstPane.sections, (section) => {
+        let sect = _.cloneDeep(section);
+        if (sect.type === 'col-label') {
+          sect = this.cloneColLabel(sect, tabIndex);
+        } else if (sect.type === 'multicols') {
+          sect = this.cloneMultiCol(sect, tabIndex);
+        } else if (sect.type === 'parent') {
+          sect = this.cloneParent(sect, tabIndex);
+        }
+        sections.push(sect);
+        return true;
+      });
+      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;
+      }
+      if (schema) {
+        this.setState({schema});
+      }
+    }
+  }
+
+  validateFormData(formData) {
+    const tabCount = this.state.tabCount;
+    let isValid = true;
+    for (let cnt = 0; cnt < tabCount; cnt += 1) {
+      const index = cnt + 1;
+      if (formData[cnt]) {
+        const text = formData[cnt][`sms-editor${index > 1 ? index : ''}`];
+        if (text.indexOf('{{optout}}') === -1) {
+          isValid = false;
+        }
+      }
+    }
+    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) {
+    //IE support
+    const myField = field;
+    if (document.selection) {
+      myField.focus();
+      const sel = document.selection.createRange();
+      sel.text = myValue;
+    } else if (myField.selectionStart || myField.selectionStart === '0') { //MOZILLA and others
+      const startPos = myField.selectionStart;
+      const endPos = myField.selectionEnd;
+      myField.value = myField.value.substring(0, startPos)
+          + myValue
+          + myField.value.substring(endPos, myField.value.length);
+      myField.selectionStart = startPos + myValue.length;
+      myField.selectionEnd = startPos + myValue.length;
+    } else {
+      myField.value += myValue;
+    }
+    const event = new Event('input', { bubbles: true });
+    myField.dispatchEvent(event);
+  }
+
+  startTemplateCreation(data) {
+    if (data.edit) {
+      console.log('startTemplateCreation');
+      const ifUnicode = charCount.checkUnicode(data.content ? data.content : '');
+      console.log('smsDetails', ifUnicode, data.content);
+      const content = data.content;
+      const id = _.uniqueId();
+      const tempData = {
+        'sms-editor': content,
+        'unicode-validity': false,
+        'base': true,
+        'tabKey': id,
+      };
+      const formData = {};
+      formData[0] = tempData;
+      formData.base = tempData;
+      this.setState({formData, loading: false, injectedTags: data.tags, tabKey: id}, () => {
+        this.setState({tabKey: ''});
+      });
+    } else {
+      this.setState({injectedTags: data.tags});
+    }
+  }
+
+  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":
+          this.startTemplateCreation(type.value);
+          break;
+        case "startLoading":
+          this.startLoading(type.edit);
+          break;
+        case "getCurrentWindow":
+          this.getCurrentWindow(type);
+          break;
+        case "getFormData":
+          this.getFormData(e, type.value);
+          break;
+        default:
+          break;
+      }
+    } else {
+      switch (type) {
+        case "getFormData":
+          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:
+          break;
+      }
+    }
+  };
+
+  handleOnTagsContextChange = (data) => {
+    console.log('parent tags context', data);
+    const query = {
+      layout: 'SMS',
+      type: 'TAG',
+      context: data.toLowerCase() === 'all' ? 'default' : data.toLowerCase(),
+      embedded: this.props.location.query.type === 'embedded' ? this.props.location.query.type : 'full',
+    };
+    this.props.globalActions.fetchSchemaForEntity(query);
+  };
+
+  removeStandAlone() {
+    const schema = _.cloneDeep(this.state.schema);
+    delete schema.standalone;
+    schema.standalone = {};
+    schema.standalone.sections = [];
+    _.forEach(schema.containers, (container) => {
+      const temp = container;
+      if (temp.type === 'tabs') {
+        temp.tabBarExtraContent = {};
+        temp.tabBarExtraContent.sections = [];
+        const basePane = _.cloneDeep(temp.panes[0]);
+        temp.tabContent = {};
+        temp.tabContent.sections = [];
+        temp.panes = [];
+        temp.panes.push(basePane);
+      }
+    });
+    this.setState({ schema });
+  }
+
+  validateContent = (e) => {
+    console.log('posting final validation result', this.state.isFormValid);
+    const response = {
+      action: "validateContent",
+      value: this.state.isFormValid,
+    };
+    // if (content.indexOf('{{optout}}') === -1) {
+    //   const message = getMessageObject('error', 'Template data is not valid', true);
+    //   this.props.globalActions.addMessageToQueue(message);
+    //   response.value = 'invalid';
+    // }
+
+    e.source.postMessage(JSON.stringify(response), e.origin);
+  };
+
+  discardValues() {
+    this.resetSchema();
+    this.resetState();
+  }
+
+  resetState() {
+    this.setState({
+      formData: {},
+      tabCount: 1,
+      currentTab: 1,
+    });
+  }
+  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: "&#xE313;",
+    //                                     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 });
+  }
+
+  handleCancelModal = () => {
+    this.setState({showModal: false});
+  };
+
+  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: {},
+      history: [],
+    };
+    obj.type = 'SMS';
+    for (let index = 0; index < this.state.tabCount; index += 1 ) {
+      obj.versions.history.push(formData[index]);
+      // if (formData[index])
+    }
+    obj.name = formData['template-name'];
+    obj.versions.base = formData.base;
+    console.log('obj', obj);
+    this.props.actions.createTemplate(obj);
+  }
+  render() {
+    const schema = this.state.schema;
+    const spinning = this.state.loading || (this.props.Create && "createTemplateInProgress" in this.props.Create && this.props.Create.createTemplateInProgress);
+    return (
+      <div>
+        <Spin tip={this.props.intl.formatMessage(messages.saveTemplateLoader)} spinning={spinning}>
+          {/*<\Row style={{marginBottom: '16px', marginLeft: '-40px'}}>
+            <Col offset={1}>
+              <Breadcrumb>
+                <Breadcrumb.Item>Campaigns</Breadcrumb.Item>
+                <Breadcrumb.Item>Creatives</Breadcrumb.Item>
+                <Breadcrumb.Item>SMS</Breadcrumb.Item>
+              </Breadcrumb>
+            </Col>
+          </Row>*/}
+          <Row>
+            <Col>
+              <FormBuilder
+                schema={schema}
+                onSubmit={this.saveFormData}
+                onChange={this.onFormDataChange}
+                currentTab={this.state.currentTab}
+                showModal={this.state.showModal}
+                modal={this.state.modalContent}
+                parent={this}
+                iframeParent={parent}
+                formData={_.cloneDeep(this.state.formData)}
+                location={this.props.location}
+                tabKey={this.state.tabKey}
+                tags={this.props.metaEntities && this.props.metaEntities.tags ? this.props.metaEntities.tags.standard : []}
+                injectedTags={this.state.injectedTags ? this.state.injectedTags : {}}
+                onFormValidityChange={this.setFormValidity}
+                usingTabContainer
+                checkValidation={this.state.checkValidation}
+                onContextChange={this.handleOnTagsContextChange}
+                handleCancelModal={this.handleCancelModal}
+                router={this.props.router}
+              />
+            </Col>
+          </Row>
+        </Spin>
+      </div>
+    );
+  }
+}
+
+Create.propTypes = {
+  actions: PropTypes.object.isRequired,
+  Create: PropTypes.object,
+  router: PropTypes.object,
+  location: PropTypes.object,
+  route: PropTypes.object,
+  globalActions: PropTypes.object,
+  metaEntities: PropTypes.object,
+  intl: intlShape.isRequired,
+};
+
+const mapStateToProps = createStructuredSelector({
+  Create: makeSelectCreate(),
+  createResponse: makeSelectCreateResponse(),
+  metaEntities: makeSelectMetaEntities(),
+});
+
+function mapDispatchToProps(dispatch) {
+  return {
+    actions: bindActionCreators(actions, dispatch),
+    globalActions: bindActionCreators(globalActions, dispatch),
+  };
+}
+
+export default UserIsAuthenticated(connect(mapStateToProps, mapDispatchToProps)(injectIntl(Create)));