@capillarytech/creatives-library 0.0.1

package/components/FormBuilder/index.js

@@ -0,0 +1,2756 @@
+
+/**
+*
+* FormBuilder
+*
+*/
+
+import React, { PropTypes } from 'react';
+import { Label } from 'semantic-ui-react';
+import _ from 'lodash';
+import { Tabs, Row, Col, Table, Modal} from 'antd';
+import { CapButton, CapInput, CapPopover, CapTextArea, CapCheckbox, CapRadio, CapRadioGroup, CapSelect, CapTable} from '@capillarytech/cap-react-ui-library';
+import TemplatePreview from '../../components/TemplatePreview';
+// import { CapCheckbox } from '@capillarytech/cap-react-ui-library/basic/checkbox';
+import TagList from '../../containers/TagList';
+import SmsEditor from '../SmsEditor';
+import * as charCount from '../../utils/smsCharCount';
+import CKEditor from "../../components/Ckeditor/";
+import EDMEditor from "../../components/Edmeditor";
+import CustomPopOver from '../../components/CustomPopOver';
+import './_formBuilder.scss';
+const TabPane = Tabs.TabPane;
+const {Column} = Table;
+// import styled from 'styled-components';
+
+// import { FormattedMessage } from 'react-intl';
+// import messages from './messages';
+
+class FormBuilder extends React.Component { // eslint-disable-line react/prefer-stateless-function
+  constructor(props) {
+    super(props);
+    this.state = {
+      formData: {},
+      errorData: {},
+      currentTab: 1,
+      currentLangTab: 'en',
+      usingTabContainer: false,
+      tabCount: 1,
+      tabKey: '',
+      isFormValid: false,
+      checkValidation: false,
+      showModal: false,
+      modal: {},
+      currentEvent: {},
+      currentEventData: {},
+      popoverVisible: false,
+    };
+    this.renderForm = this.renderForm.bind(this);
+    this.updateFormData = this.updateFormData.bind(this);
+    this.callChildEvent = this.callChildEvent.bind(this);
+    this.renderColLabelSection = this.renderColLabelSection.bind(this);
+    this.renderMultiColSection = this.renderMultiColSection.bind(this);
+    this.renderSection = this.renderSection.bind(this);
+    this.renderContainer = this.renderContainer.bind(this);
+    this.renderParentSection = this.renderParentSection.bind(this);
+    this.initializeStandAloneSections = this.initializeStandAloneSections.bind(this);
+    this.initializeMultiColSection = this.initializeMultiColSection.bind(this);
+    this.initializeParentSection = this.initializeParentSection.bind(this);
+    this.initializeColLabelSection = this.initializeColLabelSection.bind(this);
+    this.initializeContainers = this.initializeContainers.bind(this);
+    this.cloneVersionData = this.cloneVersionData.bind(this);
+    this.markFinalTabVersion = this.markFinalTabVersion.bind(this);
+    this.duplicateVersion = this.duplicateVersion.bind(this);
+    this.deleteVersion = this.deleteVersion.bind(this);
+    this.renameVersion = this.renameVersion.bind(this);
+    this.resetState = this.resetState.bind(this);
+    this.onEdit = this.onEdit.bind(this);
+    this.changeVersionName = this.changeVersionName.bind(this);
+    this.hasClass = this.hasClass.bind(this);
+    this.validateForm = this.validateForm.bind(this);
+    this.indexOfEnd = this.indexOfEnd.bind(this);
+    this.saveForm = this.saveForm.bind(this);
+    this.initializeEditErrorData = this.initializeEditErrorData.bind(this);
+    this.checkIfSupportedTag = this.checkIfSupportedTag.bind(this);
+    this.transformInjectedTags = this.transformInjectedTags.bind(this);
+    this.formElements = [];
+  }
+
+  componentWillMount() {
+    console.log('FOrm builder Mounting ', this.props, this.state);
+    this.setState({usingTabContainer: this.props.usingTabContainer ? this.props.usingTabContainer : false});
+    if (this.props.formData && (this.props.isEdit || (!this.props.isEdit && !_.isEmpty(this.props.formData)))) {
+      console.log('mounted');
+      this.setState({formData: this.props.formData}, () => {
+        // if (!this.props.isNewVersionFlow) {
+        this.initialiseForm(this.props.schema, false, true);
+        // }
+      });
+    } else {
+      console.log('initializing in edit');
+      this.initialiseForm(this.props.schema, true);
+    }
+  }
+
+  componentWillReceiveProps(nextProps) {
+    console.log('nextprops', nextProps, this.state.formData);
+    const type = this.props.location.query.type;
+    if (this.state.usingTabContainer && nextProps.tabCount !== this.props.tabCount) {
+      this.setState({tabCount: nextProps.tabCount});
+    }
+    if (nextProps.isEdit) {
+      console.log('Edit mode form data ', nextProps.formData, this.state.formData);
+      if (!_.isEqual(nextProps.formData, this.state.formData) && !_.isEmpty(nextProps.formData)) {
+        console.log('incoming props 1');
+        if (type === 'embedded') { //TODO: has to be checked and changed.
+          this.setState({checkValidation: true, formData: nextProps.formData}, () => {
+            this.validateForm();
+          });
+          // this.setState({formData: nextProps.formData}, () => {
+          //   this.validateForm();
+          // });
+        }
+        //TODO change this structure
+        if (this.props.schema && this.props.schema.channel && this.props.schema.channel.toUpperCase() === 'WECHAT') {
+          this.setState({formData: nextProps.formData});
+        } else if ( !_.isEmpty(nextProps.formData) && !_.isEqual(this.state.formData, nextProps.formData) && this.props.schema && this.props.schema.channel && this.props.schema.channel.toUpperCase() === 'MOBILEPUSH') {
+          this.setState({formData: nextProps.formData, tabCount: nextProps.tabCount});
+          // this.resetTabKeys(nextProps.formData, nextProps.tabCount);
+        } else if (this.props.schema && this.props.schema.channel && this.props.schema.channel.toUpperCase() === 'EMAIL') {
+          this.setState({formData: nextProps.formData});
+        }
+        console.log("incoming props 1", this.state.usingTabContainer, this.state.tabKey);
+        if (this.state.usingTabContainer && this.state.tabKey === '') {
+          //this.setState({formData: nextProps.formData});
+          if (nextProps.isNewVersionFlow && !_.isEqual(this.state.tabKey, nextProps.tabKey)) {
+            console.log('Tab key condition', nextProps.tabKey);
+            this.setState({tabKey: nextProps.tabKey});
+          } else {
+            this.resetTabKeys(nextProps.formData, nextProps.tabCount);
+          }
+          this.initializeEditErrorData(nextProps.formData, nextProps.tabCount);
+        }
+      }
+      if (_.isEmpty(this.props.formData) && !_.isEmpty(nextProps.formData)) {
+        console.log('incoming props 2');
+        if (this.state.usingTabContainer) {
+          this.resetTabKeys(nextProps.formData, nextProps.tabCount);
+        }
+        this.initializeEditErrorData(nextProps.formData, nextProps.tabCount);
+      }
+      if (!_.isEmpty(this.props.formData) && this.props.formData !== this.state.formData && _.isEmpty(this.state.formData) && this.state.usingTabContainer) {
+        console.log('incoming props 3');
+        this.resetTabKeys(this.props.formData, nextProps.tabCount);
+      }
+      if ( this.state.usingTabContainer && nextProps.formData && !_.isEmpty(nextProps.formData) && _.isEmpty(this.props.formData) && nextProps.tabCount && this.state.tabCount !== nextProps.tabCount) {
+        console.log('incoming props 4', this.state, nextProps);
+        this.setState({ formData: nextProps.formData, tabCount: nextProps.tabCount }, () => {
+          this.initializeEditErrorData(nextProps.formData, nextProps.tabCount);
+          if (this.state.usingTabContainer) {
+            this.resetTabKeys(nextProps.formData, nextProps.tabCount);
+          }
+        });
+        if (nextProps.tabCount > 1) {
+          this.setState({usingTabContainer: true});
+        }
+      }
+      // if (nextProps.currentTab) {
+      //   this.setState({currentTab: nextProps.currentTab});
+      // }
+    } else if (!_.isEmpty(nextProps.formData) &&
+      ( !this.state.usingTabContainer || (this.state.usingTabContainer && nextProps.tabKey !== ''))
+      && !_.isEqual(nextProps.formData, this.state.formData) &&
+      !_.isEqual(nextProps.formData, this.props.formData)) {
+      console.log('hahaha', nextProps.tabKey);
+      this.setState({formData: nextProps.formData, tabKey: nextProps.tabKey}, () => {
+        this.validateForm();
+      });
+      //this.resetTabKeys(nextProps.formData, nextProps.tabCount);
+    } else if ((_.isEmpty(this.props.formData) || !this.props.formData) && _.isEmpty(this.state.formData)) {
+      console.log('init when empty');
+      this.initialiseForm(nextProps.schema, true);
+    } else if (_.isEmpty(this.props.formData) && !_.isEmpty(nextProps.formData)) {
+      console.log('clean form data');
+      this.setState({formData: nextProps.formData});
+    }
+
+    let currentLangTab = _.cloneDeep(this.state.currentLangTab);
+    if (nextProps.isNewVersionFlow && nextProps.formData[`${this.state.currentTab - 1}`] && nextProps.formData[`${this.state.currentTab - 1}`].activeTab) {
+      currentLangTab = nextProps.formData[`${this.state.currentTab - 1}`].activeTab;
+    }
+
+    if (nextProps.isNewVersionFlow && nextProps.currentTab && nextProps.currentTab !== this.props.currentTab) {
+      this.setState({currentTab: nextProps.currentTab});
+    }
+
+    if (!_.isEmpty(nextProps.formData) && !_.isEqual(this.state.formData, nextProps.formData)) {
+      if (nextProps.isNewVersionFlow) {
+        const tabKey = (this.state.tabKey !== nextProps.formData[nextProps.currentTab - 1].tabKey) ? nextProps.formData[nextProps.currentTab - 1].tabKey : this.state.tabKey;
+        this.setState({tabKey});
+      }
+      this.setState({formData: nextProps.formData, currentLangTab}, () => {
+        if (type === 'embedded') {
+          this.validateForm();
+        }
+        if ((this.props.schema && this.props.schema.channel && this.props.schema.channel.toUpperCase() === 'MOBILEPUSH')) {
+          this.validateForm();
+        }
+      });
+    }
+
+    console.log('Next prop schema ', nextProps.schema);
+    if (!_.isEqual(nextProps.schema, this.props.schema)) {
+      console.log('Reinitializing form ', nextProps.schema, this.props.schema);
+      this.setState({ isFormValid: (this.props.isEdit ? this.props.isEdit : true) }, () => {
+        if (!this.props.isEdit || (this.props.isEdit && !_.isEmpty(nextProps.formData))) {
+          let resetTabKeys = (this.state.formData.tabKey === undefined);
+          if ((this.props.schema && this.props.schema.channel && this.props.schema.channel.toUpperCase() === 'MOBILEPUSH')) {
+            resetTabKeys = false;
+          }
+          this.initialiseForm(nextProps.schema, false, resetTabKeys);
+          this.validateForm();
+        }
+      });
+    }
+    if (!_.isEqual(nextProps.checkValidation, this.props.checkValidation)) {
+      console.log('setting validation ', nextProps.checkValidation, this.props.checkValidation);
+      this.setState({ checkValidation: nextProps.checkValidation });
+    }
+
+    if (this.props.currentTab !== nextProps.currentTab && nextProps.currentTab) {
+      this.setState({currentTab: nextProps.currentTab});
+    }
+
+    if (!_.isEmpty(nextProps.injectedTags) && !_.isEqual(nextProps.injectedTags, this.props.injectedTags)) {
+      console.log('Inside injected Tags', nextProps.injectedTags, this.props.injectedTags);
+      this.validateForm(nextProps.tags, nextProps.injectedTags);
+    }
+    if (!_.isEmpty(nextProps.tags) && !_.isEqual(nextProps.tags, this.props.tags)) {
+      console.log('Inside Tags', nextProps.tags, this.props.tags);
+      this.validateForm(nextProps.tags, nextProps.injectedTags);
+    }
+    if (nextProps.showModal && !_.isEqual(nextProps.showModal, this.props.showModal)) {
+      console.log('Inside Modal change ', nextProps.showModal);
+      this.setState({showModal: nextProps.showModal});
+    }
+    if (nextProps.modal && (!_.isEqual(nextProps.modal, this.props.modal) || _.isEmpty(this.state.modal))) {
+      console.log('Inside Modal change ', nextProps.showModal);
+      this.setState({modal: nextProps.modal});
+    }
+  }
+
+  onEdit(data, e) {
+    console.log('called on Edit', data, e);
+  }
+
+  getModal = () => {
+    let modal;
+    if (this.state.modal) {
+      if (this.state.modal.type === 'confirm') {
+        console.log('Adding modal to render');
+        modal = (<Modal
+          visible={this.state.showModal}
+          title={this.state.modal.title}
+          onOk={this.handleOk}
+          onCancel={this.handleCancel}
+          footer={[
+            <CapButton key="back" onClick={this.handleCancel}>Cancel</CapButton>,
+            <CapButton key="submit" type="primary" id={this.state.modal.id} onClick={this.handleOk}>
+              Yes
+            </CapButton>,
+          ]}
+        >
+          {this.state.modal.body}
+        </Modal>);
+      } else if (this.state.modal.type === "info") {
+        modal = (<Modal
+          visible={this.state.showModal}
+          title={this.state.modal.title}
+          onOk={this.handleOk}
+          onCancel={this.handleCancel}
+          footer={[
+            <CapButton key="back" onClick={this.handleCancel}>Ok</CapButton>,
+          ]}
+        >
+          {this.state.modal.body}
+        </Modal>);
+      }
+    }
+    return modal;
+  };
+
+  handleVisibleChange = (popoverVisible) => {
+    this.setState({ popoverVisible });
+  };
+
+  resetTabKeys(form, count, changeDefaultTab) {
+    const tabCount = count || this.state.tabCount;
+    console.log('incoming reset', form, tabCount);
+    const formData = _.cloneDeep(form);
+    let baseIndex = 0;
+    for (let idx = 0; idx < tabCount; idx += 1) {
+      if (this.props.isNewVersionFlow && formData[idx].selectedLanguages.length > 0) {
+        for (let langIndex = 0; langIndex < formData[idx].selectedLanguages.length; langIndex += 1 ) {
+          if (formData[idx][formData[idx].selectedLanguages[langIndex]]) {
+            if (!formData[idx][formData[idx].selectedLanguages[langIndex]].tabKey) {
+              formData[idx][formData[idx].selectedLanguages[langIndex]].tabKey = _.uniqueId();
+            }
+          }
+        }
+        if (formData[idx].base && formData.base.activeTab) {
+          formData.base.tabKey = formData[idx][formData[idx].activeTab].tabKey;
+          baseIndex = idx;
+        }
+      } else {
+        console.log('Old Flow');
+        if (formData[idx]) {
+          if (!formData[idx].tabKey) {
+            formData[idx].tabKey = _.uniqueId();
+          }
+          if (formData[idx].base) {
+            formData.base = formData[idx];
+            baseIndex = idx;
+          }
+        }
+      }
+    }
+    console.log('Hello World ', formData, tabCount);
+    if ((formData.base && formData.base.tabKey && formData.base.tabKey !== '' && !changeDefaultTab) || (this.props.isEdit && formData.base && this.state.tabKey !== formData.base.tabKey)) {
+      console.log('setting tab key', formData.base.tabKey, this.state.tabKey);
+      if (this.state.currentTab === 1 && !this.props.isNewVersionFlow) {
+        this.setState({tabKey: formData.base.tabKey});
+      }
+    }
+    console.log('form data before adding key', formData);
+    if (changeDefaultTab) {
+      this.setState({formData}, () => {
+        this.props.onChange(formData, this.state.tabCount);
+        this.validateForm();
+      });
+    } else {
+      this.setState({formData, currentTab: baseIndex + 1}, () => {
+        this.props.onChange(formData, this.state.tabCount);
+        this.validateForm();
+      });
+    }
+  }
+
+  /* eslint-disable */
+  validateForm(tags, injectedTags, isSave) {
+    console.log('validating form', this.state.formData);
+    let isValid = true;
+    const type = (this.props.location && this.props.location.query.type) ? this.props.location.query.type : 'full';
+    const currentModule = (this.props.location && this.props.location.query.module) ? this.props.location.query.module : 'default';
+    const errorData = _.cloneDeep(this.state.errorData);
+    if (this.props.schema.channel === 'SMS') {
+        console.log('sms error validation form data', this.state.formData);
+      for (let count = 0; count < this.state.tabCount; count += 1) {
+        if (_.isEmpty(errorData[count])) {
+          return;
+        }
+        const index = count + 1;
+        const content = this.state.formData[count][`sms-editor${index > 1 ? index : ''}`];
+        const unicodeCheck = this.state.formData[count][`unicode-validity${index > 1 ? index : ''}`];
+        const ifUnicode = content && content !== '' ? charCount.checkUnicode(content) : false;
+        console.log('characters are', ifUnicode, unicodeCheck);
+        const tagValidationResponse = this.validateTags(content, tags, injectedTags);
+        console.log('tag valid response', tagValidationResponse);
+        if (tagValidationResponse.valid) {
+          errorData[count][`sms-editor${index > 1 ? index : ''}`] = false;
+        } else {
+          console.log('sms error validation tags issue');
+          errorData[count][`sms-editor${index > 1 ? index : ''}`] = true;
+          isValid = false;
+        }
+        if(content !== '' && (ifUnicode && !unicodeCheck)) {
+          errorData[count][`unicode-validity${index > 1 ? index : ''}`] = true;
+          isValid = false;
+        } else if (content === '') {
+          console.log('sms error validation content is empty');
+          errorData[count][`sms-editor${index > 1 ? index : ''}`] = true;
+          isValid = false;
+        } else {
+          errorData[count][`unicode-validity${index > 1 ? index : ''}`] = false;
+        }
+      }
+      if(type !== 'embedded' && (!this.state.formData['template-name'] || this.state.formData['template-name'] === '')) {
+        errorData['template-name'] = true;
+        isValid = false;
+      } else {
+        errorData['template-name'] = false;
+      }
+    }
+    if (this.props.schema && this.props.schema.channel && this.props.schema.channel.toUpperCase() === 'WECHAT') {
+      console.log('Validating Form Now ', this.state.formData);
+      _.forEach(this.state.formData, (val, index) => {
+        console.log('Validation Index ', index);
+        if (index.indexOf('template') > -1 && this.state.formData[index] !== undefined) {
+          const content = this.state.formData[index];
+          if (content.trim() === '') {
+            errorData[index] = true;
+            isValid = false;
+          } else {
+            const tagValidationResponse = this.validateTags(content, tags, injectedTags);
+            console.log('tag valid response', tagValidationResponse);
+            if (tagValidationResponse.valid) {
+              errorData[index] = false;
+            } else {
+              errorData[index] = true;
+              isValid = false;
+            }
+          }
+        } else if (index === 'wechat-template') {
+          const content = this.state.formData[index];
+          if (content.trim() === '') {
+            errorData[index] = true;
+            isValid = false;
+          }
+        }
+      });
+      console.log('Validation ', this.state.formData, Object.keys(this.state.formData), errorData);
+    }
+    if(this.props.schema && this.props.schema.channel && this.props.schema.channel.toUpperCase() === "MOBILEPUSH"){
+      let androidValid = true, iosValid = true;
+      let isOnlyAndroid = false, isOnlyIos = false;
+
+      const androidData = {};
+      for(let data in this.state.formData[0]){
+        if(!!this.state.formData[0][data] && data !== "tabKey" && data !== "base"){
+          androidData[data] = this.state.formData[0][data];
+        }
+      }
+      if(_.isEmpty(androidData) && this.state.currentTab === 2){
+        isOnlyIos = true;
+      }
+      const iosData = {};
+      for(let data in this.state.formData[1]){
+        if(!!this.state.formData[1][data] && data !== "tabKey" && data !== "base"){
+          iosData[data] = this.state.formData[1][data];
+        }
+      }
+      if(_.isEmpty(iosData) && this.state.currentTab === 1){
+        isOnlyAndroid = true;
+      }
+      _.forEach(this.state.formData, (tab, index) => {
+        let isCurrentTabValid = true;
+        let skipValidation = false;
+        if (type.toLowerCase() === 'embedded' && ((isOnlyAndroid && parseInt(index) === 1) || (isOnlyIos && parseInt(index) === 0))) {
+          skipValidation = true;
+        }
+        if (!isNaN(index) && tab && !skipValidation) {
+          const selector = index > 0 ? `${Number(index) + 1}` : '';
+          let message = tab[`message-editor${selector}`];
+
+          message = message.trim();
+
+          if (errorData[parseInt(index)]) {
+            if (message === "") {
+              errorData[parseInt(index)][`message-editor${selector}`] = true;
+              isValid = false;
+              isCurrentTabValid = false;
+            } else {
+              errorData[parseInt(index)][`message-editor${selector}`] = false;
+              const tagValidationResponse = this.validateTags(message, tags, injectedTags);
+              console.log('tag valid response', tagValidationResponse);
+              if (tagValidationResponse.valid) {
+                errorData[parseInt(index)][`message-editor${selector}`] = false;
+              } else {
+                errorData[parseInt(index)][`message-editor${selector}`] = true;
+                isValid = false;
+              }
+            }
+
+
+            const title = tab[`message-title${selector}`].trim();
+            if (title === "") {
+              errorData[parseInt(index)][`message-title${selector}`] = true;
+              isValid = false;
+              isCurrentTabValid = false;
+            } else {
+              errorData[parseInt(index)][`message-title${selector}`] = false;
+              const tagValidationResponse = this.validateTags(title, tags, injectedTags);
+              console.log('tag valid response', tagValidationResponse);
+              if (tagValidationResponse.valid) {
+                errorData[parseInt(index)][`message-title${selector}`] = false;
+              } else {
+                errorData[parseInt(index)][`message-title${selector}`] = true;
+                isValid = false;
+              }
+            }
+
+            // if(tab['primary-cta-link'].trim() === ""){
+            //   errorData[parseInt(index)][`primary-cta-link`] = true;
+            //   isValid = false;
+            // }else {
+            //   errorData[parseInt(index)]['primary-cta-link'] = false;
+            // }
+            if(tab['cta-deeplink-select'] === ""){
+              errorData[parseInt(index)][`cta-deeplink-select`] = true;
+              isValid = false;
+              isCurrentTabValid = false;
+            }else {
+              errorData[parseInt(index)]['cta-deeplink-select'] = false;
+            }
+            if(tab['cta-deeplink2-select'] === ""){
+              errorData[parseInt(index)][`cta-deeplink2-select`] = true;
+              isValid = false;
+              isCurrentTabValid = false;
+            }else {
+              errorData[parseInt(index)]['cta-deeplink2-select'] = false;
+            }
+            // }
+            if(tab[`cta-deeplink-text`] === ""){
+              errorData[parseInt(index)][`cta-deeplink-text`] = true;
+              isValid = false;
+              isCurrentTabValid = false;
+            }else {
+              errorData[parseInt(index)]['cta-deeplink-text'] = false;
+            }
+
+            if(tab['cta-deeplink2-text'] === ""){
+              errorData[parseInt(index)][`cta-deeplink2-text`] = true;
+              isValid = false;
+              isCurrentTabValid = false;
+            }else {
+              errorData[parseInt(index)]['cta-deeplink2-text'] = false;
+            }
+
+
+            if(tab['secondary-cta-0-link'] === ""){
+              errorData[parseInt(index)][`secondary-cta-0-link`] = true;
+              isValid = false;
+              isCurrentTabValid = false;
+            }else {
+              errorData[parseInt(index)]['secondary-cta-0-link'] = false;
+            }
+            if(tab['secondary-cta-0-label'] === ""){
+              errorData[parseInt(index)][`secondary-cta-0-label`] = true;
+              isValid = false;
+              isCurrentTabValid = false;
+            }else {
+              errorData[parseInt(index)]['secondary-cta-0-label'] = false;
+            }
+            if(tab['cta-deeplink-secondary-cta-0-text'] === ""){
+              errorData[parseInt(index)][`cta-deeplink-secondary-cta-0-text`] = true;
+              isValid = false;
+              isCurrentTabValid = false;
+            }else {
+              errorData[parseInt(index)]['cta-deeplink-secondary-cta-0-text'] = false;
+            }
+            if(tab['cta-deeplink-secondary-cta-0-select'] === ""){
+              errorData[parseInt(index)][`cta-deeplink-secondary-cta-0-select`] = true;
+              isValid = false;
+              isCurrentTabValid = false;
+            }else {
+              errorData[parseInt(index)]['cta-deeplink-secondary-cta-0-select'] = false;
+            }
+            if(tab['secondary-cta-1-label'] === ""){
+              errorData[parseInt(index)][`secondary-cta-1-label`] = true;
+              isValid = false;
+              isCurrentTabValid = false;
+            }else {
+              errorData[parseInt(index)]['secondary-cta-1-label'] = false;
+            }
+            if(tab['cta-deeplink-secondary-cta-1-text'] === ""){
+              errorData[parseInt(index)][`cta-deeplink-secondary-cta-1-text`] = true;
+              isValid = false;
+              isCurrentTabValid = false;
+            }else {
+              errorData[parseInt(index)]['cta-deeplink-secondary-cta-1-text'] = false;
+            }
+            if(tab['cta-deeplink-secondary-cta-1-select'] === ""){
+              errorData[parseInt(index)][`cta-deeplink-secondary-cta-1-select`] = true;
+              isValid = false;
+              isCurrentTabValid = false;
+            }else {
+              errorData[parseInt(index)]['cta-deeplink-secondary-cta-1-select'] = false;
+            }
+            if(tab['cta-deeplink-secondary-cta-1-text2'] === ""){
+              errorData[parseInt(index)][`cta-deeplink-secondary-cta-1-text2`] = true;
+              isValid = false;
+              isCurrentTabValid = false;
+            }else {
+              errorData[parseInt(index)]['cta-deeplink-secondary-cta-1-text2'] = false;
+            }
+            if(tab['cta-deeplink-secondary-cta-1-select2'] === ""){
+              errorData[parseInt(index)][`cta-deeplink-secondary-cta-1-select2`] = true;
+              isValid = false;
+              isCurrentTabValid = false;
+            }else {
+              errorData[parseInt(index)]['cta-deeplink-secondary-cta-1-select2'] = false;
+            }
+
+            if(typeof tab['image'] !== 'undefined' && tab['image'] === ""){
+              errorData[parseInt(index)]['image'] = true;
+              isValid = false;
+              isCurrentTabValid = false;
+            }else{
+              errorData[parseInt(index)]['image'] = false;
+            }
+            _.forEach(Object.keys(tab), (key) => {
+              if (key.indexOf('custom-value') > -1) {
+                if (tab[key] === "") {
+                  errorData[parseInt(index)][key] = true;
+                  isValid = false;
+                  isCurrentTabValid = false;
+                }else {
+                  errorData[parseInt(index)][key] = false;
+                }
+              }
+            });
+          }
+        }
+        if(index == 0){
+          androidValid = isCurrentTabValid;
+        } else if(index == 1){
+          iosValid = isCurrentTabValid;
+        }
+      });
+      if(type !== 'embedded' && (!this.state.formData['template-name'] || this.state.formData['template-name'] === '')) {
+        errorData['template-name'] = true;
+        isValid = false;
+        androidValid = false;
+        iosValid = false
+      } else {
+        errorData['template-name'] = false;
+      }
+      if(isSave && (androidValid || iosValid)){
+        const modal = this.state.modal;
+        const androidData = {};
+
+        for(let data in this.state.formData[0]){
+          if(!!this.state.formData[0][data] && data !== "tabKey" && data !== "base"){
+            androidData[data] = this.state.formData[0][data];
+          }
+        }
+        if(_.isEmpty(androidData) && this.state.currentTab === 2){
+          modal.body = "Android template is not configured. Save without Android template";
+          modal.id = "ios";
+          modal.type = 'confirm';
+          this.setState({modal, showModal: true, androidValid, iosValid});
+          return;
+        }
+        const iosData = {};
+        for(let data in this.state.formData[1]){
+          if(!!this.state.formData[1][data] && data !== "tabKey"){
+            iosData[data] = this.state.formData[1][data];
+          }
+        }
+        if(_.isEmpty(iosData) && this.state.currentTab === 1){
+          modal.body = "IOS template is not configured, Save without IOS template";
+          modal.id = 'android';
+          modal.type = 'confirm';
+          this.setState({modal, showModal: true, androidValid, iosValid});
+          return;
+        }
+      }
+      if (!androidValid || !iosValid) {
+        this.setState({androidValid, iosValid});
+      }
+    }
+
+    if (this.props.schema && this.props.schema.channel && this.props.schema.channel.toUpperCase() === "EMAIL") {
+      for (let count = 0; count < this.state.tabCount; count += 1) {
+        const index = count + 1;
+        // const content = this.state.formData[count][`template-content${index > 1 ? index : ''}`];
+        // const tagValidationResponse = this.validateTags(content, tags, injectedTags);
+        // console.log('tag valid response', tagValidationResponse);
+        // if (tagValidationResponse.valid) {
+        //   errorData[count][`template-content${index > 1 ? index : ''}`] = false;
+        // } else {
+        //   errorData[count][`template-content${index > 1 ? index : ''}`] = true;
+        //   isValid = false;
+        // }
+      }
+      if (type.toLowerCase() === 'embedded' && (currentModule.toLowerCase() === 'loyalty' || currentModule.toLowerCase() === 'dvs' ||  currentModule.toLowerCase() === 'subscription')) {
+        if (this.state.formData['template-subject']  && this.state.formData['template-subject'].trim() === '') {
+          errorData['template-subject'] = true;
+          isValid = false;
+        }
+      }
+      if(type !== 'embedded' && (!this.state.formData['template-name'] || this.state.formData['template-name'] === '')) {
+        errorData['template-name'] = true;
+        isValid = false;
+      } else {
+        errorData['template-name'] = false;
+      }
+    }
+    this.setState({isFormValid : isValid, errorData});
+    console.log('final validity', this.state.formData, this.state, isValid);
+    this.props.onFormValidityChange(isValid);
+  }
+
+  indexOfEnd(targetString, string) {
+    var io = targetString.indexOf(string);
+    return io == -1 ? -1 : io + string.length;
+  }
+  continueSaveForm = (id) => {
+
+  };
+  saveForm() {
+    console.log('Is Form Valid ', this.state.isFormValid);
+    if (this.state.isFormValid) {
+      this.props.onSubmit(this.state.formData);
+    } else {
+      this.setState({checkValidation: true});
+      this.validateForm(null, null, true);
+    }
+  }
+
+  transformInjectedTags(tags) {
+    _.forEach(tags, (tag) => {
+      const temp = tag;
+      let subKey = '';
+      Object.keys(tag).map( (k) => {
+        if (k.indexOf("subtags") !== -1) {
+          subKey = k;
+        }
+        return true;
+      });
+      if (subKey !== '') {
+        temp['tag-header'] = true;
+        if (subKey !== 'subtags') {
+          temp.subtags = _.cloneDeep(temp[subKey]);
+          delete temp[subKey];
+        }
+        temp.subtags = this.transformInjectedTags(temp.subtags);
+      }
+    });
+    return tags;
+  }
+
+  checkIfSupportedTag(checkingTag, injectedTags) {
+    let result = false;
+    _.forEach(injectedTags, (tag, key) => {
+      if (tag.subtags) {
+        if (this.checkIfSupportedTag(checkingTag, tag.subtags)) {
+          result = true;
+        }
+      } else if (checkingTag === key) {
+        result = true;
+      }
+    });
+    console.log('injected tags support result', checkingTag, injectedTags, result);
+    return result;
+  }
+
+  skipTags(tag) {
+    const regexGroups = ["dynamic_expiry_date_after_\\(\\d+\\)_days.FORMAT_\\d"];
+    //const regexGroups = [];
+    let skipped = false;
+    _.forEach(regexGroups, (group) => {
+      //const groupRegex = /dynamic_expiry_date_after_\(\d+\)_days.FORMAT_\d/g;
+      const groupRegex = new RegExp(group, "g");
+      let match = groupRegex.exec(tag);
+      if (match !== null ) {
+        skipped = true;
+        return true;
+      }
+      return true;
+    });
+    return skipped;
+  }
+
+  validateTags(content, tagsParam, injectedTagsParams) {
+    const type = (this.props.location && this.props.location.query.type) ? this.props.location.query.type : 'full';
+    const currentModule = this.props.location.query.module ? this.props.location.query.module : 'default';
+    const tags = tagsParam ? tagsParam : this.props.tags;
+    const injectedTags = this.transformInjectedTags(injectedTagsParams ? injectedTagsParams : this.props.injectedTags);
+    const excludedTags = ['user_id_b64', 'outbox_id_b64'];
+    console.log('form builder injected tags', injectedTags);
+    console.log('validating tags', content, tags, type, module);
+    const response = {};
+    response.valid = true;
+    response.missingTags = [];
+    response.unsupportedTags = [];
+    _.forEach(tags, (tag) => {
+      _.forEach(tag.definition.supportedModules, (module) => {
+        if (module.mandatory && (currentModule === module.context)) {
+          if (content.indexOf(`{{${tag.definition.value}}}`) === -1) {
+            response.valid = false;
+            response.missingTags.push(tag.definition.value);
+          }
+        }
+      });
+    });
+    const regex = /{{[(A-Z\w\(\)@!#$%^&*~.,/\\]+}}/g;
+    let match = regex.exec(content);
+    while (match !== null) {
+      const tagValue = match[0].substring(this.indexOfEnd(match[0], '{{'), match[0].indexOf('}}'));
+      match = regex.exec(content);
+      let ifSupported = false;
+      _.forEach(tags, (tag) => {
+        if (tag.definition.value === tagValue) {
+          ifSupported = true;
+        }
+      });
+      const ifSkipped = this.skipTags(tagValue);
+      if (ifSkipped) {
+        ifSupported = true;
+      }
+      ifSupported = ifSupported || this.checkIfSupportedTag(tagValue, injectedTags);
+      if (!ifSupported) {
+        response.unsupportedTags.push(tagValue);
+        response.valid = false;
+      }
+    }
+    return response;
+  }
+  /* eslint-enable */
+  initializeParentSection(section, formDataObj, isContainer, index, ifError) {
+    let formData = formDataObj;
+    _.forEach(section.childSections, (childSection) => {
+      if (childSection.type === 'col-label') {
+        formData = this.initializeColLabelSection(childSection, formData, isContainer, index, ifError);
+      } else if (childSection.type === 'multicols') {
+        formData = this.initializeMultiColSection(childSection, formData, isContainer, index, ifError);
+      } else {
+        formData = this.initializeParentSection(childSection, formData, isContainer, index, ifError);
+      }
+    });
+    return formData;
+  }
+
+  initializeEditErrorData(formData, tabCount) {
+    const errorData = {};
+    for (let idx = 0; idx < tabCount; idx += 1 ) {
+      _.forEach(formData[0], (val, key) => {
+        if (!errorData[idx]) {
+          errorData[idx] = {};
+        }
+        if (key === 'tabKey' || key === 'base') {
+          return true;
+        }
+        errorData[idx][key] = false;
+        return true;
+      });
+    }
+    this.setState({errorData});
+  }
+
+  initializeMultiColSection(section, formDataObj, isContainer, index, ifError, paneIndex) {
+    console.log('initializeMultiColSection', section, formDataObj, isContainer, index, ifError, paneIndex);
+    const formData = _.cloneDeep(formDataObj);
+    const newFormData = {};
+    newFormData[index] = {};
+    _.forEach(section.inputFields, (inputField) => {
+      console.log('Input field ', inputField);
+      _.forEach(inputField.cols, (col) => {
+        console.log('Multi col init ', col, formData[index], index);
+        if (isContainer && !formData[index]) {
+          formData[index] = {};
+        }
+        // if (!ifError && (col.id.indexOf('template-label-') === -1 && col.id.indexOf('tagList-') === -1)) {
+        //   this.formElements.push(col.id);
+        // }
+        if (!col.onlyDisplay && !ifError) {
+          if (col.id.indexOf('tagList-') === -1) {
+            this.formElements.push(col.id);
+          }
+
+          if (!this.props.isNewVersionFlow) {
+            if (isContainer && formData[index][col.id] === undefined) {
+              if (ifError) {
+                formData[index][col.id] = false;
+              } else if (isContainer && formData[index][col.id] === undefined && col.value) {
+                formData[index][col.id] = col.value;
+              } else {
+                formData[index][col.id] = '';
+              }
+            } else if (!isContainer && ifError && formData[col.id] === undefined) {
+              formData[col.id] = false;
+            } else if (!isContainer && !ifError && formData[col.id] === undefined) {
+              formData[col.id] = '';
+            }
+          } else {
+            console.log('new flow ', this.props.supportedLanguages, this.props.baseLanguage, index);
+            if (!(col.id.indexOf('template-content') > -1 && col.id !== 'template-content')) {
+              if (isContainer && formData[index][this.props.baseLanguage][col.id] === undefined) {
+                if (ifError) {
+                  formData[index][this.props.baseLanguage][col.id] = false;
+                } else if (isContainer && formData[index][this.props.baseLanguage][col.id] === undefined && col.value) {
+                  formData[index][this.props.baseLanguage][col.id] = col.value;
+                } else {
+                  formData[index][this.props.baseLanguage][col.id] = '';
+                }
+              } else if (!isContainer && ifError && formData[col.id] === undefined) {
+                formData[col.id] = false;
+              } else if (!isContainer && !ifError && formData[col.id] === undefined) {
+                formData[col.id] = '';
+              }
+            }
+            console.log('New Form Data ', formData);
+          }
+        }
+        if (col.type === 'checkbox') {
+          if (isContainer) {
+            formData[index][col.id] = false;
+          } else if (!isContainer && formData[col.id] === undefined) {
+            formData[col.id] = false;
+          }
+        }
+      });
+    });
+    return formData;
+  }
+
+  initializeColLabelSection(section, formDataObj, isContainer, index, ifError) {
+    const formData = formDataObj;
+    _.forEach(section.inputFields, (inputField) => {
+      if (isContainer && !formData[index]) {
+        formData[index] = {};
+      }
+      if (!ifError && (inputField.id.indexOf('template-label-') === -1 && inputField.id.indexOf('tagList-') === -1)) {
+        this.formElements.push(inputField.id);
+      }
+      if (!inputField.onlyDisplay) {
+        if (isContainer && !this.props.isNewVersionFlow && formData[index][inputField.id] === undefined) {
+          if (ifError) {
+            formData[index][inputField.id] = false;
+          } else {
+            formData[index][inputField.id] = '';
+          }
+        } else if (isContainer && this.props.isNewVersionFlow && formData[index][this.props.baseLanguage][inputField.id] === undefined) {
+          if (ifError) {
+            formData[index][this.props.baseLanguage][inputField.id] = false;
+          } else {
+            formData[index][this.props.baseLanguage][inputField.id] = '';
+          }
+        } else if (!isContainer && ifError && this.state.formData[inputField.id] === undefined) {
+          formData[inputField.id] = false;
+        } else if (!isContainer && !ifError && this.state.formData[inputField.id] === undefined) {
+          formData[inputField.id] = '';
+        }
+      }
+      if (inputField.type === 'checkbox') {
+        if (isContainer) {
+          formData[index][inputField.id] = false;
+        } else {
+          formData[inputField.id] = false;
+        }
+      }
+    });
+    return formData;
+  }
+
+  initializeStandAloneSections(schema, formDataObj, ifError) {
+    let formData = _.cloneDeep(formDataObj);
+    if (schema.standalone) {
+      _.forEach(schema.standalone.sections, (section) => {
+        if (section) {
+          if (section.type === 'multicols') {
+            formData = this.initializeMultiColSection(section, formData, false, -1, ifError);
+          } else if (section.type === 'col-label') {
+            formData = this.initializeColLabelSection(section, formData, false, -1, ifError);
+          } else if (section.type === 'parent') {
+            formData = this.initializeParentSection(section, formData, false, -1, ifError);
+          }
+        }
+      });
+    }
+    return formData;
+  }
+
+  initializeContainers(schema, formDataObj, ifError) {
+    let formData = _.cloneDeep(formDataObj);
+    if (this.props.isNewVersionFlow) {
+      _.forEach(schema.containers, (val, index) => {
+        if (val.type === 'tabs') {
+          console.log('Initial COntainer ', val);
+          this.setState({usingTabContainer: true});
+          _.forEach(val.panes, (pane, paneIndex) => {
+            _.forEach(pane.sections, (section) => {
+              if (section.type === 'multicols') {
+                console.log('initializeContainers', section, index);
+                formData = this.initializeMultiColSection(section, formData, true, index, ifError, paneIndex);
+              } else if (section.type === 'col-label') {
+                formData = this.initializeColLabelSection(section, formData, true, index, ifError);
+              } else if (section.type === 'parent') {
+                formData = this.initializeParentSection(section, formData, true, index, ifError);
+              }
+            });
+          });
+          if (ifError) {
+            formData[val.id] = false;
+          }
+          formData[val.id] = '';
+        }
+        if (val.type === 'checkbox') {
+          formData[val.id] = false;
+        }
+      });
+    } else {
+      _.forEach(schema.containers, (val) => {
+        if (val.type === 'tabs') {
+          console.log('Initial COntainer ', val);
+          this.setState({usingTabContainer: true});
+          _.forEach(val.panes, (pane, index) => {
+            _.forEach(pane.sections, (section) => {
+              if (section.type === 'multicols') {
+                console.log('initializeContainers', section, index);
+                formData = this.initializeMultiColSection(section, formData, true, index, ifError);
+              } else if (section.type === 'col-label') {
+                formData = this.initializeColLabelSection(section, formData, true, index, ifError);
+              } else if (section.type === 'parent') {
+                formData = this.initializeParentSection(section, formData, true, index, ifError);
+              }
+            });
+          });
+          if (ifError) {
+            formData[val.id] = false;
+          }
+          formData[val.id] = '';
+        }
+        if (val.type === 'checkbox') {
+          formData[val.id] = false;
+        }
+      });
+    }
+    return formData;
+  }
+
+  initialiseForm(schema, makeFormEmpty, resetTabKeys) {
+    console.log('init form xxx', schema, makeFormEmpty, this.state.formData);
+    let formData = makeFormEmpty ? {} : _.cloneDeep(this.state.formData);
+    let errorData = {};
+    this.formElements = [];
+    if (_.isEmpty(schema)) {
+      return;
+    }
+    errorData = this.initializeStandAloneSections(schema, errorData, true);
+    formData = this.initializeStandAloneSections(schema, formData);
+    formData = this.initializeContainers(schema, formData);
+    errorData = this.initializeContainers(schema, errorData, true);
+
+    console.log('After Init ', errorData, formData);
+    if (!this.props.isEdit) {
+      if (!formData[0]) {
+        formData[0] = {};
+      }
+      if (!errorData[0]) {
+        errorData[0] = {};
+      }
+      formData[0].base = true;
+      formData[0].tabKey = formData[0].tabKey ? formData[0].tabKey : _.uniqueId();
+      errorData.base = errorData[0];
+      formData.base = formData[0];
+      if (this.state.currentTab === 1) {
+        this.setState({tabKey: formData.base.tabKey});
+      }
+    }
+    const tempFormData = _.cloneDeep(formData);
+    if (!this.props.isNewVersionFlow) {
+      _.forEach(formData, (element, key) => {
+        if (typeof element !== 'object' && this.formElements.indexOf(key) === -1) {
+          delete tempFormData[key];
+        } else if (typeof element === "object") {
+          _.forEach(element, (innerElement, innerKey) => {
+            if (innerKey !== "tabKey" && innerKey !== "base" && innerKey !== 'name' && this.formElements.indexOf(innerKey) === -1) {
+              delete tempFormData[key][innerKey];
+            }
+          });
+        }
+      });
+    }
+    formData = _.cloneDeep(tempFormData);
+    this.setState({formData, errorData}, () => {
+      this.validateForm();
+      if (this.props.isSchemaChanged || resetTabKeys) {
+        this.resetTabKeys(formData, this.props.tabCount, true);
+      }
+    });
+  }
+
+  cloneVersionData(ifError) {
+    console.log('cloning data', this.state.formData, this.state.tabCount, ifError);
+    if (this.state.tabCount === 0) {
+      this.initialiseForm(this.props.schema, true);
+      return;
+    }
+    let formData = {};
+    if (ifError) {
+      formData = Object.assign({}, this.state.errorData);
+    } else {
+      formData = Object.assign({}, this.state.formData);
+    }
+    let newTabIndex = 0;
+    if (ifError) {
+      newTabIndex = this.state.tabCount - 1;
+    } else {
+      newTabIndex = this.state.tabCount;
+    }
+    formData[newTabIndex] = {};
+    console.log('Step 1', formData);
+    const newTabCount = newTabIndex + 1;
+    _.forEach(formData[0], (val, key) => {
+      console.log('Step 1.1', val, key);
+      if (key === 'base') {
+        return true;
+      }
+      if (key === 'tabKey') {
+        return true;
+      }
+      if (typeof val === 'string') {
+        if (ifError) {
+          formData[newTabIndex][`${key}${newTabCount}`] = false;
+        } else {
+          console.log('IsNewFlow ', this.props.isNewVersionFlow);
+          if (this.props.isNewVersionFlow) {
+            if (key.indexOf('activeTab') > -1) {
+              formData[newTabIndex][`${key}`] = this.props.baseLanguage;
+            } else {
+              formData[newTabIndex][`${key}${newTabCount}`] = '';
+            }
+          } else {
+            formData[newTabIndex][`${key}${newTabCount}`] = '';
+          }
+        }
+      } else if (typeof val === 'boolean') {
+        formData[newTabIndex][`${key}${newTabCount}`] = false;
+      } else if (typeof val === 'object') {
+        if (this.props.isNewVersionFlow) {
+          if (key.indexOf('selectedLanguages') > -1) {
+            formData[newTabIndex][key] = [this.props.baseLanguage];
+          } else {
+            console.log('log line ', val);
+            if (key === this.props.baseLanguage) {
+              formData[newTabIndex][key] = {};
+              _.forEach(val, (subVal, index) => {
+                console.log('Subvalue ', subVal, index);
+                // if (subVal === 'is_drag_drop' || subVal === 'lang_id' || subVal === 'iso_code' === 'language') {
+                //   console.log('SubVal 1234567890- ', formData[0][this.props.baseLanguage]);
+                //   formData[newTabIndex][key][index] = formData[0][this.props.baseLanguage][subVal];
+                // } else {
+                if (index === 'tabKey') {
+                  formData[newTabIndex][key][index] = _.uniqueId();
+                } else if (index === 'template-content') {
+                  formData[newTabIndex][key][index] = "";
+                } else {
+                  formData[newTabIndex][key][index] = _.cloneDeep(formData[0][key][index]);
+                }
+                // }
+              });
+            }
+          }
+        } else {
+          formData[newTabIndex][key] = {};
+          _.forEach(val, (subVal, index) => {
+            console.log('Subvalue ', subVal, index);
+            formData[newTabIndex][key][index] = '';
+          });
+        }
+      }
+      return true;
+    });
+    let id = (this.props.isNewVersionFlow && formData[newTabIndex][this.props.baseLanguage].tabKey) ? formData[newTabIndex][this.props.baseLanguage].tabKey : _.uniqueId();
+    console.log('Step 2', formData);
+    if (!ifError) {
+      let validId = false;
+      while (!validId) {
+        validId = true;
+        for (let idx = 0; idx < this.state.tabCount; idx += 1) {
+          if (id === formData[idx].tabKey) {
+            validId = false;
+          }
+        }
+        if (validId) {
+          break;
+        }
+        id = _.uniqueId();
+      }
+      formData[newTabIndex].tabKey = id;
+    }
+    // if (!this.props.isEdit) {
+    if (ifError) {
+      console.log('If error ', ifError);
+      this.setState({errorData: formData});
+    } else {
+      console.log('formData after cloning', formData, newTabIndex + 1);
+      this.props.onChange(formData, newTabCount, newTabIndex + 1);
+      console.log('After OnChange');
+      this.setState({tabCount: newTabCount, formData, currentTab: newTabIndex + 1, tabKey: id}, () => {
+        this.cloneVersionData(true);
+      });
+    }
+  }
+
+  changeVersionName(data) {
+    const formData = _.cloneDeep(this.state.formData);
+    if (formData[this.state.currentTab - 1]) {
+      formData[this.state.currentTab - 1].name = data;
+      this.setState({formData});
+    }
+  }
+
+  markFinalTabVersion() {
+    const formData = _.cloneDeep(this.state.formData);
+    if (this.state.usingTabContainer) {
+      console.log('Tab Count ', this.state.tabCount);
+      for (let count = 0; count < this.state.tabCount; count += 1) {
+        if (parseInt(this.state.currentTab - 1, 10) !== count) {
+          formData[count].base = false;
+        } else {
+          formData[count].base = true;
+          formData.base = formData[count];
+        }
+      }
+      this.setState({formData});
+
+      this.props.onChange(formData, this.state.tabCount);
+    }
+  }
+
+  resetState(isEdit, usingTabContainer) {
+    this.setState({
+      formData: {},
+      currentTab: 1,
+      usingTabContainer: usingTabContainer || false,
+      tabCount: 1,
+      errorData: {},
+      tabKey: '',
+    }, () => {
+      if (!isEdit) {
+        console.log('init from reset');
+        this.initialiseForm(this.props.schema, true);
+      }
+    });
+  }
+
+  duplicateVersion(ifError, currentTab) {
+    let formData = {};
+    let tabCount = 0;
+    if (ifError) {
+      formData = _.cloneDeep(this.state.errorData);
+      tabCount = this.state.tabCount - 1;
+    } else {
+      formData = _.cloneDeep(this.state.formData);
+      tabCount = this.state.tabCount;
+    }
+    const newTabCount = tabCount + 1;
+    _.forEach(formData[0], (val, key) => {
+      if (!formData[tabCount]) {
+        formData[tabCount] = {};
+      }
+      if (key === 'base') {
+        formData[tabCount].base = false;
+        return true;
+      }
+      if (key === 'tabKey') {
+        let validId = false;
+        let id = _.uniqueId();
+        while (!validId) {
+          validId = true;
+          for (let idx = 0; idx < this.state.tabCount; idx += 1) {
+            if (id === formData[idx].tabKey) {
+              validId = false;
+            }
+          }
+          if (validId) {
+            break;
+          }
+          id = _.uniqueId();
+        }
+        formData[tabCount].tabKey = id;
+        return true;
+      }
+      const tempTab = ifError ? currentTab : this.state.currentTab;
+      if (typeof val === 'string') {
+        if (this.props.isNewVersionFlow) {
+          formData[tabCount][`${key}`] = formData[tempTab - 1][`${key}`];
+        } else {
+          formData[tabCount][`${key}${newTabCount}`] = formData[tempTab - 1][`${key}${parseInt(tempTab, 10) === 1 ? '' : tempTab}`];
+        }
+      } else if (typeof val === 'boolean') {
+        if (this.props.isNewVersionFlow) {
+          formData[tabCount][`${key}`] = formData[tempTab - 1][`${key}`];
+        } else {
+          formData[tabCount][`${key}${newTabCount}`] = formData[tempTab - 1][`${key}${parseInt(tempTab, 10) === 1 ? '' : tempTab}`];
+        }
+      }
+      return true;
+    });
+    if (ifError) {
+      this.setState({errorData: formData});
+    } else {
+      const tempTab = ifError ? currentTab : this.state.currentTab;
+      const version = `Version ${this.state.currentTab}`;
+      formData[tabCount].name = `Copy of ${formData[tempTab - 1].name ? formData[tempTab - 1].name : version}`;
+      formData[tabCount].base = false;
+      const initialTab = this.state.currentTab;
+      this.setState({formData, tabCount: tabCount + 1, currentTab: tabCount + 1, tabKey: formData[tabCount].tabKey}, () => {
+        this.duplicateVersion(true, initialTab);
+      });
+
+      this.props.onChange(formData, tabCount + 1, tabCount + 1);
+    }
+  }
+
+  deleteVersion(ifError, currentTab) {
+    console.log('trying to delete version in form builder');
+    if (!ifError && this.state.tabCount === 1) {
+      console.log('cannot delete minimum 1 version');
+      return;
+    }
+    let formData = {};
+    let finalCurrentTab = 0;
+    let tabCount = 0;
+    if (ifError) {
+      formData = _.cloneDeep(this.state.errorData);
+      tabCount = this.state.tabCount + 1;
+      finalCurrentTab = currentTab;
+    } else {
+      formData = _.cloneDeep(this.state.formData);
+      tabCount = this.state.tabCount;
+      finalCurrentTab = this.state.currentTab;
+    }
+    // delete formData[this.state.currentTab - 1];
+    let finalActiveTabKey = '';
+    if (tabCount > 1 && currentTab !== tabCount) {
+      finalActiveTabKey = formData[currentTab].tabKey;
+    }
+    console.log('Tab Counts ', currentTab, tabCount);
+    if (tabCount > 1 && currentTab === tabCount) {
+      finalActiveTabKey = formData[currentTab - 2].tabKey;
+      finalCurrentTab = currentTab - 1;
+    }
+    // if (this.state.tabCount > 1 && this.state.currentTab === 1) {
+    //   finalActiveTabKey = this.state.formData[1].tabKey;
+    // }
+    if (tabCount === 1) {
+      finalActiveTabKey = '';
+    }
+    const initialFormData = _.cloneDeep(formData[0]);
+    for (let count = currentTab - 1; count < tabCount - 1; count += 1) {
+      delete formData[count];
+      _.forEach(initialFormData, (val, key) => {
+        if (!formData[count]) {
+          formData[count] = {};
+        }
+        if (key === 'base') {
+          formData[count].base = formData[count + 1].base ? formData[count + 1].base : false;
+          return true;
+        }
+        if (key === 'tabKey') {
+          formData[count].tabKey = formData[count + 1].tabKey;
+          return true;
+        }
+        formData[count][`${key}${count === 0 ? '' : count + 1}`] = formData[count + 1][`${key}${count + 2}`];
+        return true;
+      });
+    }
+    delete formData[tabCount - 1];
+    if (ifError) {
+      this.setState({errorData: formData});
+    } else {
+      const initialTab = currentTab;
+      if (this.props.isNewVersionFlow) {
+        formData['template-version-options'].splice(`${currentTab - 1}`, 1);
+        formData['template-version'] = formData['template-version-options'][0].value;
+      }
+      this.setState({formData, tabCount: tabCount - 1, tabKey: finalActiveTabKey, currentTab: finalCurrentTab}, () => {
+        this.deleteVersion(true, initialTab);
+      });
+
+      this.props.onChange(formData, tabCount - 1);
+    }
+  }
+
+  deleteLanguage = () => {
+    if (this.state.formData[`${this.state.currentTab - 1}`].activeTab === this.props.baseLanguage) {
+      console.log('Base Language');
+    } else {
+      const formData = _.cloneDeep(this.state.formData);
+      const currentTab = `${this.state.currentTab - 1}`;
+      const currentLang = formData[`${this.state.currentTab - 1}`].activeTab;
+      const deleteLanguageIndex = formData[currentTab].selectedLanguages.indexOf(currentLang);
+      console.log('deleting language', currentTab, currentLang);
+      delete formData[currentTab][currentLang];
+      formData[currentTab].activeTab = this.props.baseLanguage;
+      formData[currentTab].selectedLanguages.splice(deleteLanguageIndex, 1);
+      console.log('After Deleting Form data ', formData);
+      this.setState({formData, currentLangTab: this.props.baseLanguage}, () => {
+        this.state.currentEvent.call(this.props.parent, formData, deleteLanguageIndex);
+        this.setState({currentEvent: {}, currentEventData: {}});
+      });
+    }
+  };
+
+  renameVersion(currentTab) {
+    console.log('form builder renaming', currentTab);
+    document.getElementById(`tab-header${currentTab > 1 ? currentTab : ''}`).contentEditable = "true";
+    document.getElementById(`tab-header${currentTab > 1 ? currentTab : ''}`).focus();
+  }
+
+  updateFormData(data, val, event) {
+    console.log('updating data', data, val, event);
+    const formData = _.cloneDeep(this.state.formData);
+    const tabIndex = this.state.currentTab - 1;
+    let currentTab = _.cloneDeep(this.state.currentTab);
+    if (this.state.usingTabContainer && !val.standalone) {
+      const data1 = data;
+      if (event === "addLanguage") {
+        const baseTab = _.cloneDeep(formData[tabIndex][this.props.baseLanguage]);
+        console.log('Add Language Event', data, val, tabIndex, _.cloneDeep(baseTab));
+        baseTab['template-content'] = '';
+        baseTab.iso_code = data.iso_code;
+        baseTab.lang_id = data.lang_id;
+        baseTab.language = data.language;
+        baseTab.tabKey = _.uniqueId();
+        formData[tabIndex].selectedLanguages.push(data.iso_code);
+        formData[tabIndex][data.iso_code] = baseTab;
+        console.log('Add Language Event After', formData);
+        const that = this;
+        setTimeout(() => {
+          that.setState({tabKey: baseTab.tabKey});
+        }, 0);
+      }
+      if (!this.props.isNewVersionFlow) {
+        formData[tabIndex][val.id] = data1;
+      } else if (event !== "addLanguage") {
+        formData[tabIndex][this.props.baseLanguage][val.id] = data1;
+      }
+      if (formData[tabIndex].base) {
+        if (!this.props.isNewVersionFlow) {
+          formData.base[val.id] = data1;
+        } else {
+          formData.base[data1.iso_code] = formData[tabIndex][data1.iso_code];
+        }
+      }
+    } else {
+      formData[val.id] = data;
+    }
+    if (this.props.isNewVersionFlow) {
+      console.log('Version Select ', data, val, event);
+      if (event === 'onSelect' && data === 'New Version') {
+        this.callChildEvent(data, val, 'addVersion', event);
+      } else if (event === 'onSelect' && data !== 'New Version') {
+        console.log('Heloo how are you', data, val);
+        console.log(_.findIndex(this.state.formData['template-version-options'], { key: data}));
+        currentTab = _.findIndex(this.state.formData['template-version-options'], { key: data}) + 1;
+        this.setState({currentTab, tabKey: formData[`${currentTab - 1}`].tabKey}, () => {
+          console.log('Current tab of state ', this.state.currentTab);
+          val.injectedEvents[event].call(this, this.state.formData['template-version-options'][currentTab - 1].key, formData, val);
+        });
+      }
+      if (event === 'onContentChange') {
+        console.log('onContentChange ', data, val, event, data.editor.getData());
+        // formData[`${this.state.currentTab - 1}`][formData[`${this.state.currentTab - 1}`].activeTab]['template-content'] = data.editor.getData();
+        // if (formData[`${this.state.currentTab - 1}`].tabKey === formData.base.tabKey) {
+        //   formData.base[formData[`${this.state.currentTab - 1}`].activeTab][`template-content`] = data.editor.getData();
+        // }
+      }
+    }
+    console.log('setting form data', formData);
+    this.setState({formData}, () => {
+      this.validateForm();
+    });
+    if (event && val.injectedEvents[event]) {
+      if (event === "onRowClick") {
+        val.injectedEvents[event].call(this, data);
+      } else if (this.props.isNewVersionFlow && event !== 'onSelect') {
+        if (event === 'addLanguage') {
+          val.injectedEvents[event].call(this, data, formData, val);
+        } else {
+          val.injectedEvents[event].call(this, true, formData, val);
+        }
+      } else if (!this.props.isNewVersionFlow) {
+        console.log('Event trigger ', event);
+        val.injectedEvents[event].call(this, true, formData, val);
+      }
+    } else if (val.injectedEvents && val.injectedEvents.onChange) {
+      val.injectedEvents.onChange.call(this, true, formData, val);
+    }
+
+    if (!((event === 'onSelect' && data === 'New Version') || event === 'onContentChange')) {
+      console.log('Current tab ', this.state.currentLangTab, currentTab);
+      this.props.onChange(formData, this.state.tabCount, currentTab);
+    }
+  }
+
+
+  hasClass(element, className) {
+    return (` ${element.className} `).indexOf(` ${className} `) > -1;
+  }
+  allowAddSecondaryCta = (val) => {
+    if (val.fieldsCount > 0) {
+      const errorData = _.cloneDeep(this.state.errorData);
+      _.forEach(Object.keys(errorData), (key) => {
+        if (typeof errorData[key] !== "object") {
+          errorData[key] = false;
+        } else {
+          _.forEach(Object.keys(errorData[key]), (innerKey) => {
+            errorData[key][innerKey] = false;
+          });
+        }
+      });
+      if (this.state.formData[this.state.currentTab - 1][`secondary-cta-${val.fieldsCount - 1}-label`] === "") {
+        errorData[this.state.currentTab - 1][`secondary-cta-${val.fieldsCount - 1}-label`] = true;
+        this.setState({errorData, checkValidation: true, isFormValid: false});
+        return false;
+      }
+      if (this.state.formData[this.state.currentTab - 1][`cta-deeplink-secondary-cta-${val.fieldsCount - 1}`] === "") {
+        errorData[this.state.currentTab - 1][`cta-deeplink-secondary-cta-${val.fieldsCount - 1}`] = true;
+        this.setState({errorData, checkValidation: true, isFormValid: false});
+        return false;
+      }
+      if (this.state.formData[this.state.currentTab - 1][`cta-deeplink-secondary-cta-${val.fieldsCount - 1}-select`] === "") {
+        errorData[this.state.currentTab - 1][`cta-deeplink-secondary-cta--${val.fieldsCount - 1}-select`] = true;
+        this.setState({errorData, checkValidation: true, isFormValid: false});
+        return false;
+      }
+    }
+    return true;
+  };
+  callChildEvent(data, val, event, e) {
+    if (!event) {
+      console.log('rogue event');
+      return;
+    }
+    console.log('calling child', data, val, event, e);
+    const tab = this.state.tabCount;
+    // const parent = this._reactInternalInstance._currentElement._owner._instance;
+    if (event === 'onTabChange') {
+      const that = this;
+      this.setState({tabKey: `${data}`});
+      setTimeout(() => {
+        if (this.props.isNewVersionFlow) {
+          const formData = _.cloneDeep(this.state.formData);
+          let activeTabIndex = '1';
+          const elems = document.getElementsByClassName("ant-tabs-tab");
+          console.log('elems', elems);
+          for (let i = 0; i < elems.length; i += 1) {
+            console.log('elems 2', elems.item(i));
+            if (elems.item(i).classList.contains("ant-tabs-tab-active")) {
+              activeTabIndex = i + 1;
+            }
+          }
+          console.log('current Tab ', JSON.stringify(activeTabIndex), formData, this.state.currentTab, this.state.currentLangTab);
+          formData[(this.state.currentTab - 1)].activeTab = formData[(this.state.currentTab - 1)].selectedLanguages[activeTabIndex - 1];
+          console.log('New Form Data ', formData);
+          that.setState({formData, currentLangTab: formData[(this.state.currentTab - 1)].activeTab, tabKey: formData[(this.state.currentTab - 1)][formData[(this.state.currentTab - 1)].activeTab].tabKey}, () => {
+            val.injectedEvents[event].call(that.props.parent, this.state.currentTab, formData);
+          });
+        } else {
+          let activeTabIndex = '1';
+          const elems = document.getElementsByClassName("ant-tabs-tab");
+          console.log('elems', elems);
+          for (let i = 0; i < elems.length; i += 1) {
+            console.log('elems 2', elems.item(i));
+            if (elems.item(i).classList.contains("ant-tabs-tab-active")) {
+              activeTabIndex = i + 1;
+            }
+          }
+          console.log('current Tab ', JSON.stringify(activeTabIndex));
+          that.setState({currentTab: activeTabIndex});
+          val.injectedEvents[event].call(that.props.parent, activeTabIndex);
+        }
+      }, 0);
+      return;
+    } else if (event === 'addVersion') {
+      this.cloneVersionData();
+      this.setState({ popoverVisible: false });
+      const that = this;
+      setTimeout(() => {
+        console.log('Add version ', data, tab, that.state.formData);
+        val.injectedEvents[event].call(that.props.parent, tab);
+      }, 0);
+      return;
+    } else if (event === 'onTagSelect') {
+      val.injectedEvents[event].call(this.props.parent, data, this.state.currentTab, val);
+      return;
+    } else if (event === 'markFinalVersion' || event === 'duplicateVersion' || event === 'deleteVersion' || event === 'renameVersion') {
+      this.setState({ popoverVisible: false });
+      if ((event !== 'deleteVersion' && !this.props.isNewVersionFlow) || ((event === 'deleteVersion') && this.props.schema.channel.toUpperCase() === 'EMAIL')) {
+        val.injectedEvents[event].call(this.props.parent, data, this.state.currentTab);
+      } else {
+        this.setState({currentEvent: val.injectedEvents[event], currentEventData: data});
+      }
+      if (event === 'markFinalVersion') {
+        this.markFinalTabVersion();
+        if (this.props.isNewVersionFlow) {
+          val.injectedEvents[event].call(this.props.parent, data, this.state.currentTab);
+        }
+      } else if (event === 'duplicateVersion') {
+        if (this.props.schema.channel.toUpperCase() === 'EMAIL') {
+          const formData = _.cloneDeep(this.state.formData);
+          formData[this.state.tabCount] = _.cloneDeep(formData[`${this.state.currentTab - 1}`]);
+          _.forEach(formData[this.state.tabCount].selectedLanguages, (lang) => {
+            const tmptabData = formData[this.state.tabCount][lang];
+            _.forEach(formData[this.state.tabCount][lang], (tabData, index) => {
+              console.log('tabData Data ', tabData, index);
+              if (index === 'tabKey') {
+                tmptabData.tabKey = _.uniqueId();
+              }
+            });
+          });
+          formData[this.state.tabCount].tabKey = formData[this.state.tabCount][formData[this.state.tabCount].activeTab].tabKey;
+          console.log('Duplicatte Version ', formData);
+          this.setState({formData, tabKey: formData[this.state.tabCount].tabKey}, () => {
+            val.injectedEvents[event].call(this.props.parent, formData, this.state.currentTab);
+          });
+        } else {
+          this.duplicateVersion();
+        }
+      } else if (event === 'deleteVersion') {
+        if (this.props.schema.channel.toUpperCase() === 'EMAIL') {
+          // this.deleteVersion(false, this.state.currentTab);
+          const modalContent = {
+            title: "Alert",
+            body: "Do you really want to delete this version?",
+            type: 'confirm',
+            id: 'email-version-delete-modal',
+          };
+          this.setState({showModal: true, modal: modalContent, currentEvent: val.injectedEvents[event], currentEventData: data });
+        } else {
+          this.handleConfirmations();
+        }
+      } else if (event === 'renameVersion') {
+        this.renameVersion(this.state.currentTab);
+      }
+      return;
+    } else if (event === 'discardValues') {
+      val.injectedEvents[event].call(this.props.parent, data);
+      if (this.props.isEdit) {
+        this.resetState(true, this.state.usingTabContainer);
+      } else {
+        this.resetState(false, this.state.usingTabContainer);
+      }
+      return;
+    } else if (event === 'onChange') {
+      if (val.id === 'tab-header') {
+        val.injectedEvents[event].call(this.props.parent, data, this.state.currentTab);
+        this.changeVersionName(data);
+      }
+      return;
+    } else if (event === "addSecondaryCta") {
+      if (!this.allowAddSecondaryCta(val)) {
+        return;
+      }
+    } else if (event === 'deleteLanguage') {
+      const modalContent = {
+        title: "Alert",
+        body: "Do you really want to delete this language?",
+        type: 'confirm',
+        id: 'email-language-delete-modal',
+      };
+      this.setState({showModal: true, modal: modalContent, currentEvent: val.injectedEvents[event], currentEventData: data });
+      // debugger;
+      // if (this.state.formData[`${this.state.currentTab - 1}`].activeTab === this.props.baseLanguage) {
+      //   console.log('Base Language');
+      // } else {
+      //   const formData = _.cloneDeep(this.state.formData);
+      //   const currentTab = `${this.state.currentTab - 1}`;
+      //   const currentLang = formData[`${this.state.currentTab - 1}`].activeTab;
+      //   const deleteLanguageIndex = formData[currentTab].selectedLanguages.indexOf(currentLang);
+      //   console.log('deleting language', currentTab, currentLang);
+      //   delete formData[currentTab][currentLang];
+      //   formData[currentTab].activeTab = this.props.baseLanguage;
+      //   formData[currentTab].selectedLanguages.splice(deleteLanguageIndex, 1);
+      //   console.log('After Deleting Form data ', formData);
+      //   this.setState({formData, currentLangTab: this.props.baseLanguage}, () => {
+      //     val.injectedEvents[event].call(this.props.parent, formData, deleteLanguageIndex);
+      //   });
+      // }
+      return;
+    }
+    console.log('Call Event ', event, data);
+    val.injectedEvents[event].call(this.props.parent, data);
+  }
+  openFileDialog = () => {
+    document.getElementById("fileName").click();
+  };
+  handleOk = (ev) => {
+    const id = ev.target.id;
+    console.log('Handle OK ', id);
+    this.setState({showModal: false});
+    if (id === "android" && this.state.androidValid) {
+      this.props.onSubmit(this.state.formData);
+    } else if (id === "ios" && this.state.iosValid) {
+      this.props.onSubmit(this.state.formData);
+    } else if (id === "sms-version-modal") {
+      console.log('Deleting version ', this.state.currentTab);
+      this.state.currentEvent.call(this.props.parent, this.state.currentEventData, this.state.currentTab);
+      this.setState({currentEvent: {}, currentEventData: {}});
+      this.deleteVersion(false, this.state.currentTab);
+    } else if (id === 'template-back-confirm-modal') {
+      const type = this.props.location.query.type;
+      const response = {
+        action: 'moveToTemplates',
+        value: 'ok',
+      };
+      this.props.iframeParent.postMessage(JSON.stringify(response), '*');
+      const module = this.props.location.query.module ? this.props.location.query.module : 'default';
+      this.props.router.push({
+        pathname: `/${this.props.schema.channel.toLowerCase()}/`,
+        query: type === 'embedded' ? {type: 'embedded', module} : {module},
+      });
+    } else if (id === "email-language-delete-modal") {
+      console.log('Delete languages ');
+      this.deleteLanguage();
+      // this.setState({currentEvent: {}, currentEventData: {}});
+    } else if (id === 'email-version-delete-modal') {
+      this.deleteVersion(false, this.state.currentTab);
+    }
+  };
+  handleCancel = (ev) => {
+    const id = ev.target.id;
+    this.setState({showModal: false});
+    if (id === 'template-back-confirm-modal') {
+      const response = {
+        action: 'moveToTemplate',
+        value: 'cancel',
+      };
+      this.props.iframeParent.postMessage(JSON.stringify(response), '*');
+    }
+    if (this.props.handleCancelModal) {
+      this.props.handleCancelModal();
+    }
+  };
+  handleConfirmations = () => {
+    console.log('handling confirmations');
+    this.setState({showModal: true});
+  };
+
+  uploadImages = (e, {files}, val) => {
+    e.preventDefault();
+    const _URL = window.URL || window.webkitURL;
+    const file = files[0];
+    const img = new Image();
+    img.src = _URL.createObjectURL(file);
+    img.onload = () => {
+      const fileParams = {
+        width: this.width,
+        height: this.height,
+        error: file.size / (1e+6) > 5,
+      };
+      this.callChildEvent({file, type: 'image', fileParams}, val, val.submitAction);
+    };
+    const event = e;
+    event.target.value = null;
+  };
+
+  findBaseTab = () => {
+    const activeTabKey = this.state.formData && this.state.formData.base ? this.state.formData.base.tabKey : -1;
+    const formData = _.cloneDeep(this.state.formData);
+    let baseTab = 0;
+    for (let i = 0; i < this.state.tabCount; i += 1) {
+      if (formData[i] && formData[i].tabKey === activeTabKey) {
+        baseTab = i;
+      }
+    }
+    console.log('base tab is ', baseTab);
+    return baseTab;
+  };
+
+  renderColLabelSection(section, childIndex) {
+    // const schema = this.props.schema
+    const fields = [];
+    _.forEach(section.inputFields, (val) => {
+      const row = [];
+      const columns = [];
+      const type = val.type;
+      const styling = val.styling;
+      if (!this.props.isNewVersionFlow && !val.standalone && !val.onlyDisplay && this.props.usingTabContainer && !this.state.formData[`${this.state.currentTab - 1}`]) {
+        return true;
+      }
+      if (!val.onlyDisplay && !val.standalone && (!this.state.formData[`${this.state.currentTab - 1}`] || (!this.state.formData[`${this.state.currentTab - 1}`][val.id] && this.state.formData[`${this.state.currentTab - 1}`][val.id] === null))) {
+        return true;
+      }
+      if (!val.onlyDisplay && !val.standalone && (!this.state.errorData[`${this.state.currentTab - 1}`] || (!this.state.errorData[`${this.state.currentTab - 1}`][val.id] && this.state.errorData[`${this.state.currentTab - 1}`][val.id] === null))) {
+        return true;
+      }
+      // console.log('rendering val', val, this.state.formData[`${this.state.currentTab - 1}`][val.id], this.state.usingTabContainer && !val.standalone);
+      columns.push(
+        <Col key="label" span={4}>
+          <Label style={val.labelStyle ? val.labelStyle : {}}>{val.label}</Label>
+        </Col>
+      );
+      let ifError = false;
+      const isVersionEnable = (this.state.usingTabContainer && !val.standalone);
+      if (val.primitive) {
+        if (val.id === "mark-final-version-label") {
+          const baseTab = this.findBaseTab();
+          if ((baseTab + 1) === childIndex) {
+            return true;
+          }
+        }
+        columns.push(
+          <Col key={val.id} span={val.width}>
+            {this.renderPrimitiveElement(val, childIndex)}
+          </Col>
+        );
+        return true;
+      }
+      switch (type) {
+        case "input":
+          if (styling === 'semantic') {
+            ifError = this.state.checkValidation && (isVersionEnable ? this.state.errorData[`${this.state.currentTab - 1}`][val.id] : this.state.errorData[val.id]);
+            console.log('input error', ifError);
+            columns.push(
+              <Col key={val.id} span={val.width}>
+                <CapInput
+                  id={val.id}
+                  errorMessage={val.errorMessage ? val.errorMessage : ''}
+                  className={`input-primary chart-name-input${ifError ? ' error' : ''}`}
+                  // fluid={val.fluid}
+                  style={val.style ? val.style : {}}
+                  placeholder={val.placeholder}
+                  onChange={(e) => this.updateFormData(e.target.value, val)}
+                  defaultValue={isVersionEnable ? this.state.formData[`${this.state.currentTab - 1}`][val.id] : this.state.formData[val.id]}
+                  value={isVersionEnable ? this.state.formData[`${this.state.currentTab - 1}`][val.id] : this.state.formData[val.id]}
+                  disabled={val.disabled}
+                />
+              </Col>
+            );
+          }
+          break;
+        case "SmsEditor":
+          columns.push(
+            <Col span={5} key="input">
+              <SmsEditor
+                id={val.id}
+                content={this.state.formData[val.id]}
+                onDataChange={(data) => this.updateFormData(data.value, val)}
+              />
+            </Col>
+          );
+          break;
+        case "textarea":
+          ifError = this.state.checkValidation && (isVersionEnable ? this.state.errorData[`${this.state.currentTab - 1}`][val.id] : this.state.errorData[val.id]);
+          if (styling === 'semantic') {
+            columns.push(
+              <Col key="input" span={val.width}>
+                <CapTextArea
+                  id={val.id}
+                  className={`${ifError ? 'error' : ''}`}
+                  errorMessage={val.errorMessage ? val.errorMessage : ''}
+                  autosize={val.autosize ? val.autosizeParams : false}
+                  onChange={(e) => this.updateFormData(e.target.value, val)}
+                  style={val.style ? val.style : {}}
+                  defaultValue={isVersionEnable ? this.state.formData[`${this.state.currentTab - 1}`][val.id] : this.state.formData[val.id]}
+                  value={isVersionEnable ? this.state.formData[`${this.state.currentTab - 1}`][val.id] : this.state.formData[val.id]}
+                  rows={20}
+                  disabled={val.disabled}
+                  cols={20}
+                />
+              </Col>
+            );
+          }
+          break;
+        case "checkbox":
+          ifError = this.state.checkValidation && (isVersionEnable ? this.state.errorData[`${this.state.currentTab - 1}`][val.id] : this.state.errorData[val.id]);
+          if (styling === 'semantic') {
+            columns.push(
+              <Col key="input" span={val.width} offset={val.offset}>
+                <CapCheckbox
+                  className={`${ifError ? 'error' : ''}`}
+                  errorMessage={val.errorMessage ? val.errorMessage : ''}
+                  style={val.style ? val.style : {}}
+                  onChange={(e) => this.updateFormData(e, val)}
+                  checked={isVersionEnable ? this.state.formData[`${this.state.currentTab - 1}`][val.id] : this.state.formData[val.id]}
+                  defaultChecked={isVersionEnable ? this.state.formData[`${this.state.currentTab - 1}`][val.id] : this.state.formData[val.id]}
+                  disabled={val.disabled}
+                />
+              </Col>
+            );
+          }
+          break;
+        case "tag-list":
+          columns.push(
+            <Col key={`input-${val.id}`} span={10} offset={val.offset}>
+              <TagList
+                key={`input-${val.id}`}
+                moduleFilterEnabled={this.props.location && this.props.location.query && this.props.location.query.type !== 'embedded'}
+                label={val.label ? val.label : ''}
+                onTagSelect={(data) => this.callChildEvent(data, val, 'onTagSelect')}
+                onContextChange={this.props.onContextChange}
+                location={this.props.location}
+                tags={this.props.tags ? this.props.tags : []}
+                injectedTags={this.props.injectedTags ? this.props.injectedTags : {}}
+                className={val.className ? val.className : ''}
+                id={val.id}
+              />
+            </Col>
+          );
+          break;
+        case "tabs":
+          columns.push(
+            <Col key="input" span={10}>
+              <TagList
+                onTagSelect={(data) => this.callChildEvent(data, val, 'onTagSelect')}
+              />
+            </Col>
+          );
+          break;
+        case "sms-preview": {
+          let content = "";
+          if (this.state.usingTabContainer && !this.state.formData[`${this.state.currentTab - 1}`]) {
+            return true;
+          }
+          content = isVersionEnable ? this.state.formData[`${this.state.currentTab - 1}`][`sms-editor${this.state.currentTab > 1 ? this.state.currentTab : ''}`] : this.state.formData[val.id];
+
+          columns.push(
+            <Col key="input" span={10}>
+              <TemplatePreview
+                channel={val.channel ? val.channel : 'SMS'}
+                content={content}
+                charCounterEnabled={val.charCounterEnabled}
+              >
+              </TemplatePreview>
+            </Col>
+          );
+          break;
+        }
+        case "popover":
+          console.log('popover props', this.state.currentTab - 1, childIndex );
+          columns.push(
+            <CapPopover
+              trigger={val.trigger}
+              placement={val.placement}
+              visible={this.state.popoverVisible && (this.props.isNewVersionFlow || this.state.currentTab === childIndex || !childIndex)}
+              onVisibleChange={this.handleVisibleChange}
+              content={
+                _.forEach(val.content.sections, (contentSection) => {
+                  this.renderSection(contentSection);
+                })
+              }
+            >
+              {
+                _.forEach(val.value.sections, (popoverSection) => {
+                  this.renderSection(popoverSection);
+                })
+              }
+            </CapPopover>
+          );
+          break;
+        case "select": {
+          const options = (this.state.formData[`${val.id}-options`]) ? (this.state.formData[`${val.id}-options`]) : val.options;
+          console.log('Options ', options);
+          columns.push(
+            <Col style={val.colStyle ? val.colStyle : {}} span={val.width}>
+              <CapSelect
+                id={val.id}
+                placeholder={val.placeholder ? val.placeholder : ''}
+                options={options}
+                style={val.style ? val.style : {}}
+                onSelect={(data) => this.updateFormData(data, val, 'onSelect')}
+                value={(this.state.formData[val.id] && this.state.formData[val.id] !== '' ? this.state.formData[val.id] : undefined)}
+                disabled={val.disabled}
+              />
+            </Col>
+          );
+        }
+          break;
+        case "ckeditor":
+          console.log('CKEditor Data 1', this.state.formData, val.id, this.state.currentTab);
+          columns.push(
+            <Col style={val.colStyle ? val.colStyle : {}} span={val.width}>
+              <CKEditor
+                id={val.id}
+                content={(this.state.formData[`${this.state.currentTab - 1}`][val.id] ? this.state.formData[`${this.state.currentTab - 1}`][val.id] : '')}
+                events={val.events}
+                getEditorInstanse={val.getEditorInstanse}
+                handleContentChange={(event) => this.updateFormData(event, val, 'onContentChange')}
+              />
+            </Col>
+          );
+          break;
+        case "edmeditor": {
+          const edmSrc = this.state.formData[`${this.state.currentTab - 1}`][this.state.currentLangTab][`edmeditor${this.state.currentTab > 1 ? this.state.currentTab : ''}src`];
+          console.log('Rendering EDM Editor ', edmSrc, this.state.formData[`${this.state.currentTab - 1}`]);
+          if (!edmSrc) {
+            return false;
+          }
+          console.log('Rendering EDM Editor 2');
+          columns.push(
+            <Col style={val.colStyle ? val.colStyle : {}} span={val.width}>
+              <EDMEditor
+                id={val.id}
+                getEditorInstanse={this.getEditorInstanse}
+                edmSrc={edmSrc}
+              />
+            </Col>
+          );
+        }
+          break;
+        default:
+          break;
+      }
+      row.push(
+        <Row>
+          {
+            _.forEach(columns, (value) => {
+              if (value) {
+                return value;
+              }
+              return value;
+            })
+          }
+        </Row>
+      );
+
+      fields.push(row);
+      return true;
+    });
+    _.forEach(section.actionFields, (val) => {
+      const row = [];
+      const columns = [];
+      const type = val.type;
+      const styling = val.styling;
+      switch (type) {
+        case "button":
+          if (styling === 'semantic' && val.metaType === 'submit-button') {
+            columns.push(
+              <Col>
+                <CapButton
+                  onClick={(data) => val.id === 'save-button' ? this.saveForm() : this.callChildEvent(data, val, val.submitAction)}>
+                  {val.value}
+                </CapButton>
+              </Col>
+            );
+          }
+          break;
+        default:
+          break;
+      }
+      row.push(columns);
+      fields.push(row);
+    });
+    return fields;
+  }
+
+  renderParentSection(section, childIndex) {
+    const cols = [];
+    section.childSections.map( (childSection) => {
+      const renderedChildSection = this.renderSection(childSection, childIndex);
+      cols.push(<Col style={childSection.colStyle ? childSection.colStyle : {}}offset={childSection.offset} span={childSection.width}>{renderedChildSection}</Col>);
+      return true;
+    });
+    const row = (<Row style={section.rowStyle ? section.rowStyle : {}}>
+      {
+        _.forEach(cols, (value) => {
+          if (value) {
+            return value;
+          }
+          return value;
+        })
+      }
+    </Row>);
+    return row;
+  }
+
+  renderSection(section, childIndex) {
+    switch (section.type) {
+      case "col-label":
+        return this.renderColLabelSection(section, childIndex);
+      case "multicols":
+        return this.renderMultiColSection(section, childIndex);
+      case "parent":
+        return this.renderParentSection(section, childIndex);
+      default:
+        break;
+    }
+    return null;
+  }
+
+  renderPrimitiveElement(val, childIndex) {
+    const type = val.type;
+    const tabName = this.state.formData[childIndex - 1] && this.state.formData[childIndex - 1].name ? this.state.formData[childIndex - 1].name : `${val.value} ${childIndex}`;
+    let value = val.dynamicTab ? tabName : val.value;
+    switch (type) {
+      case "span":
+        return <span id={`${val.id}${childIndex > 1 ? childIndex : ''}`}>{val.dynamicTab ? tabName : val.value}</span>;
+      case "div":
+        if (this.state.formData[`${this.state.currentTab - 1}`] && this.state.formData[`${this.state.currentTab - 1}`][val.id] && this.state.formData[`${this.state.currentTab - 1}`][val.id].trim() !== "") {
+          value = this.state.formData[`${this.state.currentTab - 1}`][val.id];
+        }
+        console.log('RenderPrimitive Element div', val, childIndex, value);
+        return (<div
+          className={val.className ? val.className : ''}
+          id={`${val.id}${childIndex > 1 ? childIndex : ''}`}
+          onClick={(data) => this.callChildEvent(data, val, val.submitAction)}
+          style={val.style ? val.style : {}}
+          onInput={(e) => { e.stopPropagation(); this.callChildEvent(e.target.textContent, val, 'onChange'); }}
+        >{value}</div>);
+      default:
+        return '';
+    }
+  }
+
+  renderMultiColSection(section, childIndex) {
+    const isFormValid = this.state.isFormValid;
+    console.log('form valid', isFormValid);
+    const fields = [];
+    let contentSections = [];
+    let popoverSections = [];
+    const self = this;
+    _.forEach(section.inputFields, (field) => {
+      const columns = [];
+      _.forEach(field.cols, (val) => {
+        const type = val.type;
+        const styling = val.styling;
+        const isVersionEnable = (this.state.usingTabContainer && !val.standalone);
+        // console.log('Multi col Render 1', val.id, !val.standalone, !val.onlyDisplay, (!this.state.formData[`${this.state.currentTab - 1}`] || (!this.state.formData[`${this.state.currentTab - 1}`] && this.state.errorData[`${this.state.currentTab - 1}`][val.id] === null)), this.state.formData[`${this.state.currentTab - 1}`], this.state.currentTab);
+        // console.log('Multi col render ', val, this.state.formData, this.state.errorData, this.state.currentTab);
+        console.log('Render 1', field, val);
+        if (!this.props.isNewVersionFlow && !val.standalone && !val.onlyDisplay && isVersionEnable && !this.state.formData[`${this.state.currentTab - 1}`]) {
+          return true;
+        }
+        if (!val.standalone && !val.onlyDisplay &&
+          (!this.state.formData[`${this.state.currentTab - 1}`] ||
+          (!this.props.isNewVersionFlow && !this.state.formData[`${this.state.currentTab - 1}`] &&
+          this.state.errorData[`${this.state.currentTab - 1}`][val.id] === null)) &&
+          (this.props.isNewVersionFlow && !this.state.formData[`${this.state.currentTab - 1}`] &&
+          this.state.errorData[`${this.state.currentTab - 1}`] && this.state.errorData[`${this.state.currentTab - 1}`][val.id] === null)) {
+          return true;
+        }
+        console.log('Render 2', this.state.errorData, this.state.currentTab, val);
+        if (!val.onlyDisplay && !val.standalone &&
+          (!this.props.isNewVersionFlow && (!this.state.errorData[`${this.state.currentTab - 1}`] ||
+          (!this.state.errorData[`${this.state.currentTab - 1}`] &&
+          this.state.errorData[`${this.state.currentTab - 1}`][val.id] === null)))) {
+          return true;
+        }
+        console.log('Render 3');
+        let ifError = false;
+        if (val.primitive) {
+          if (val.id === "mark-final-version-label") {
+            const baseTab = this.findBaseTab();
+            if ((baseTab + 1) === childIndex) {
+              return true;
+            }
+          }
+          columns.push(
+            <Col style={val.colStyle ? val.colStyle : {}} key={val.id} span={val.width}>
+              {this.renderPrimitiveElement(val, childIndex)}
+            </Col>
+          );
+          return true;
+        }
+        console.log('Render 4');
+        switch (type) {
+          case "input":
+            ifError = this.state.checkValidation && (isVersionEnable ? this.state.errorData[`${this.state.currentTab - 1}`][val.id] : this.state.errorData[val.id]);
+            console.log('input error', ifError);
+            if (styling === 'semantic') {
+              columns.push(
+                <Col key={val.id} span={val.width}>
+                  <CapInput
+                    id={val.id}
+                    errorMessage={val.errorMessage ? val.errorMessage : ''}
+                    className={`input-primary chart-name-input${ifError ? ' error' : ''}`}
+                    // fluid={val.fluid}
+                    style={val.style ? val.style : {}}
+                    placeholder={val.placeholder}
+                    onChange={(e) => this.updateFormData(e.target.value, val)}
+                    value={isVersionEnable ? this.state.formData[`${this.state.currentTab - 1}`][val.id] : this.state.formData[val.id]}
+                    defaultValue={isVersionEnable ? this.state.formData[`${this.state.currentTab - 1}`][val.id] : this.state.formData[val.id]}
+                    disabled={val.disabled}
+                  />
+                </Col>
+              );
+            }
+            break;
+          case "SmsEditor":
+            columns.push(
+              <Col span={5} key="input">
+                <SmsEditor
+                  id={val.id}
+                  content={this.state.formData[val.id]}
+                  onDataChange={(data) => this.updateFormData(data.value, val)}
+                />
+              </Col>
+            );
+            break;
+          case "textarea":
+            ifError = this.state.checkValidation && (isVersionEnable ? this.state.errorData[`${this.state.currentTab - 1}`][val.id] : this.state.errorData[val.id]);
+            if (styling === 'semantic') {
+              columns.push(
+                <Col key="input" span={val.width} offset={val.offset}>
+                  <CapTextArea
+                    id={val.id}
+                    placeholder={val.placeholder ? val.placeholder : ''}
+                    disabled={val.disabled}
+                    className={`${ifError ? 'error' : ''}`}
+                    errorMessage={val.errorMessage ? val.errorMessage : ''}
+                    autosize={val.autosize ? val.autosizeParams : false}
+                    onChange={(e) => this.updateFormData(e.target.value, val)}
+                    style={val.style ? val.style : {}}
+                    defaultValue={isVersionEnable ? this.state.formData[`${this.state.currentTab - 1}`][val.id] : this.state.formData[val.id]}
+                    value={isVersionEnable ? this.state.formData[`${this.state.currentTab - 1}`][val.id] : this.state.formData[val.id]}
+                    rows={10}
+                    cols={2}
+                  />
+                </Col>
+              );
+            }
+            break;
+          case "checkbox":
+            ifError = this.state.checkValidation && (isVersionEnable ? this.state.errorData[`${this.state.currentTab - 1}`][val.id] : this.state.errorData[val.id]);
+            if (styling === 'semantic') {
+              columns.push(
+                <Col key="input" span={val.width} offset={val.offset}>
+                  <CapCheckbox
+                    className={`${ifError ? 'error' : ''}`}
+                    errorMessage={val.errorMessage ? val.errorMessage : ''}
+                    onChange={(e) => this.updateFormData(e.target.checked, val)}
+                    checked={isVersionEnable ? this.state.formData[`${this.state.currentTab - 1}`][val.id] : this.state.formData[val.id]}
+                    defaultChecked={isVersionEnable ? this.state.formData[`${this.state.currentTab - 1}`][val.id] : this.state.formData[val.id]}
+                    style={val.style ? val.style : {}}
+                    disabled={val.disabled}
+                  >
+                    {val.label}
+                  </CapCheckbox>
+                </Col>
+              );
+            }
+            break;
+          case "radio":
+            ifError = this.state.checkValidation && (isVersionEnable ? this.state.errorData[`${this.state.currentTab - 1}`][val.id] : this.state.errorData[val.id]);
+            if (styling === 'semantic') {
+              columns.push(
+                <Col key={`input-${val.id}`} span={val.width} offset={val.offset}>
+                  <CapRadio
+                    className={`${ifError ? 'error' : ''}`}
+                    errorMessage={val.errorMessage ? val.errorMessage : ''}
+                    onChange={(e) => this.updateFormData(e.target.checked, val)}
+                    checked={isVersionEnable ? this.state.formData[`${this.state.currentTab - 1}`][val.id] : this.state.formData[val.id]}
+                    defaultChecked={isVersionEnable ? this.state.formData[`${this.state.currentTab - 1}`][val.id] : this.state.formData[val.id]}
+                    style={val.style ? val.style : {}}
+                  >
+                    {val.label}
+                  </CapRadio>
+                </Col>
+              );
+            }
+            break;
+          case 'radioGroup':
+            ifError = this.state.checkValidation && (isVersionEnable ? this.state.errorData[`${this.state.currentTab - 1}`][val.id] : this.state.errorData[val.id]);
+            if (styling === 'semantic') {
+              columns.push(
+                <Col key={`input-${val.id}`} span={val.width} offset={val.offset}>
+                  <CapRadioGroup
+                    key={`${val.id}-radio-group`}
+                    className={`${ifError ? 'error' : ''}`}
+                    errorMessage={val.errorMessage ? val.errorMessage : ''}
+                    onChange={(e) => this.updateFormData(e.target.value, val)}
+                    style={val.style ? val.style : {}}
+                    value={this.state.formData[`${self.state.currentTab - 1}`] && this.state.formData[`${self.state.currentTab - 1}`][val.id] !== "" ? this.state.formData[`${self.state.currentTab - 1}`][val.id] : val.value}
+                    name={val.name ? val.name : `${val.id}-name`}
+                    options={val.options}
+                    disabled={val.disabled}
+                  >
+                  </CapRadioGroup>
+                  {/*{ifError ?*/}
+                  {/*<div className="error"> {val.errorMessage}</div>*/}
+                  {/*:*/}
+                  {/*""*/}
+                  {/*}*/}
+                </Col>
+              );
+            }
+            break;
+          case 'image':
+            ifError = this.state.checkValidation && (isVersionEnable ? this.state.errorData[`${this.state.currentTab - 1}`][val.id] : this.state.errorData[val.id]);
+            columns.push(
+              <Col key={`input-${val.id}${self.state.currentTab - 1}`} style={val.style} span={val.width} offset={val.offset}>
+                <div>
+                  <div className={`image-container ${ifError ? 'error' : ''}`}>
+                    {self.state && !!self.state.formData[`${self.state.currentTab - 1}`].image ?
+                      <img src={self.state.formData[`${self.state.currentTab - 1}`].image} alt={val.alt} style={val.style}/>
+                      :
+                      <div style={{width: "100%", textAlign: "center"}}><span className="image-placeholder">{val.placeholder}</span></div>
+                    }
+                  </div>
+                  {ifError && <span className="error">{val.errorMessage}</span>}
+                </div>
+              </Col>
+            );
+            break;
+          case 'upload':
+            columns.push(
+              <Col span={val.width} offset={val.offset} style={val.style}>
+                <form encType="multipart/form-data" id={val.id}>
+                  <input key={val.id} style={{ display: 'none'}} id="fileName" type="file" onChange={(e) => this.uploadImages(e, {files: e.target.files}, val)} accept="image/*" />
+                  <CapButton type="secondary" onClick={(e) => this.openFileDialog(e)} style={{float: 'right'}}>
+                    {val.label}
+                  </CapButton>
+                </form>
+              </Col>
+            );
+            break;
+          case "table":
+            columns.push(
+              <CapTable dataSource={self.props.iosCtasData} loading={self.props.iosCtasData ? !self.props.iosCtasData.length : true} onRowClick={(row) => this.updateFormData(row, val, "onRowClick" )} pagination={val.pagination}>
+                {_.map(val.columns, (col) => <Column {...col}/>)}
+              </CapTable>
+            );
+            break;
+          case "tag-list":
+            columns.push(
+              <Col key={`input-${val.id}`} offset={val.offset} span={val.width ? val.width : ''} style={val.style ? val.style : {marginBottom: '16px'}}>
+                <TagList
+                  key={`input-${val.id}`}
+                  moduleFilterEnabled={this.props.location && this.props.location.query && this.props.location.query.type !== 'embedded'}
+                  label={val.label ? val.label : ''}
+                  onTagSelect={(data) => this.callChildEvent(data, val, 'onTagSelect')}
+                  onContextChange={this.props.onContextChange}
+                  location={this.props.location}
+                  tags={this.props.tags ? this.props.tags : []}
+                  injectedTags={this.props.injectedTags ? this.props.injectedTags : {}}
+                  className={val.className ? val.className : ''}
+                  id={val.id}
+                />
+              </Col>
+            );
+            break;
+          case "button":
+            if (styling === 'semantic' && val.metaType === 'submit-button') {
+              columns.push(
+                <Col style={val.colStyle ? val.colStyle : {}} span={val.width} offset={val.offset}>
+                  <CapButton
+                    type={val.buttonType}
+                    icon={val.icon}
+                    disabled={val.disabled ? val.disabled : false}
+                    onClick={(data) => val.id === 'save-button' ? this.saveForm() : this.callChildEvent(data, val, val.submitAction)}>
+                    {val.value}
+                  </CapButton>
+                </Col>
+              );
+            }
+            break;
+
+          case "sms-preview": {
+            let content = "";
+            if (this.state.usingTabContainer && !this.state.formData[`${this.state.currentTab - 1}`]) {
+              return true;
+            }
+            content = isVersionEnable ? this.state.formData[`${this.state.currentTab - 1}`][`sms-editor${this.state.currentTab > 1 ? this.state.currentTab : ''}`] : this.state.formData[val.id];
+
+            columns.push(
+              <Col key="input" span={23} offset={1}>
+                <TemplatePreview
+                  key={val.id}
+                  style={val.customStyling ? val.customStyling : {}}
+                  channel={val.channel ? val.channel : 'SMS'}
+                  content={content}
+                  charCounterEnabled={val.charCounterEnabled}
+                >
+                </TemplatePreview>
+              </Col>
+            );
+          }
+            break;
+          case "mobile-push-preview":
+            if (!this.state.formData[`${this.state.currentTab - 1}`]) {
+              return true;
+            }
+            columns.push(
+              <Col key="input" span={23} offset={1}>
+                <TemplatePreview
+                  key={val.id}
+                  device={val.device ? val.device : 'android'}
+                  style={val.customStyling ? val.customStyling : {}}
+                  channel={val.channel}
+                  content={{
+                    header: this.state.formData[`${this.state.currentTab - 1}`][val.content.title],
+                    bodyText: this.state.formData[`${this.state.currentTab - 1}`][val.content.message],
+                    bodyImage: this.state.formData[`${this.state.currentTab - 1}`].image,
+                    actions: [
+                      {label: this.state.formData[`${this.state.currentTab - 1}`][val.content.secondaryCta1]},
+                      {label: this.state.formData[`${this.state.currentTab - 1}`][val.content.secondaryCta2]},
+                    ],
+                    appName: val.content.appName,
+                  }}
+                >
+                </TemplatePreview>
+              </Col>
+            );
+            break;
+          case "popover":
+            contentSections = val.content.sections.map( (contentSection) => {
+              const result = this.renderSection(contentSection, childIndex);
+              return result;
+            });
+            popoverSections = val.value.sections.map( (popoverSection) => {
+              const result = this.renderSection(popoverSection, childIndex);
+              return result;
+            });
+            console.log('popover props mcol', this.state.currentTab - 1, childIndex );
+            columns.push(
+              <Col style={val.colStyle ? val.colStyle : {}} span={val.width}>
+                <CapPopover
+                  trigger={val.trigger}
+                  placement={val.placement}
+                  visible={this.state.popoverVisible && (this.props.isNewVersionFlow || this.state.currentTab === childIndex || !childIndex)}
+                  onVisibleChange={this.handleVisibleChange}
+                  content={
+                    _.forEach(contentSections, (contentSection) => {
+                      if (contentSection) {
+                        return contentSection;
+                      }
+                      return contentSection;
+                    })
+                  }
+                >
+                  {
+                    _.forEach(popoverSections, (popoverSection) => {
+                      if (popoverSection) {
+                        return popoverSection;
+                      }
+                      return popoverSection;
+                    })
+                  }
+                </CapPopover>
+              </Col>
+            );
+            break;
+
+          case "icon":
+            if (val.id === "base-version-icon") {
+              const baseTab = this.findBaseTab();
+              if ((baseTab + 1) !== childIndex) {
+                return true;
+              }
+            }
+            columns.push(
+              <Col
+                key={`icon-${val.id}`}
+                id={val.id}
+                offset={val.offset}
+                width={val.width ? val.width : 1}
+                onClick={(data) => this.callChildEvent(data, val, val.submitAction)}
+                className={val.className ? val.className : ''}
+              >
+                <i style={val.style ? val.style : {}} className="material-icons">{val.value ? val.value : '&#xE313;'}</i>
+              </Col>
+            );
+            break;
+          case "select": {
+            ifError = this.state.checkValidation && (isVersionEnable ? this.state.errorData[`${this.state.currentTab - 1}`][val.id] : this.state.errorData[val.id]);
+            const options = (this.state.formData[`${val.id}-options`]) ? (this.state.formData[`${val.id}-options`]) : val.options;
+            console.log('Options ', options);
+            columns.push(
+              <Col style={val.colStyle ? val.colStyle : {}} span={val.width}>
+                <CapSelect
+                  id={val.id}
+                  options={options}
+                  placeholder={val.placeholder ? val.placeholder : ''}
+                  style={val.style ? val.style : {}}
+                  onSelect={(data) => this.updateFormData(data, val, 'onSelect')}
+                  value={isVersionEnable ? this.state.formData[this.state.currentTab - 1][val.id] : this.state.formData[val.id]}
+                  disabled={val.disabled}
+                />
+                {ifError && val.errorMessage &&
+                  <span className={'error'}>{val.errorMessage}</span>
+                }
+              </Col>
+            );
+          }
+            break;
+          case "ckeditor": {
+            if (_.isEmpty(this.state.formData[`${this.state.currentTab - 1}`])) {
+              return true;
+            }
+            let langIndex = 0;
+            if (val.id.indexOf('template-content') > -1 && val.id !== 'template-content') {
+              langIndex = parseInt(val.id.replace('template-content', ''), 10) - 1;
+            }
+            console.log('CKEditor Data 2', this.state.formData, this.state.formData[`${this.state.currentTab - 1}`], val, this.state.currentTab, this.state.currentLangTab, langIndex);
+            const currentLang = (!_.isEmpty(this.state.formData) && !_.isEmpty(this.state.formData[`${this.state.currentTab - 1}`]) && !_.isEmpty(this.state.formData[`${this.state.currentTab - 1}`].selectedLanguages) && this.state.formData[`${this.state.currentTab - 1}`].selectedLanguages[langIndex]) ? this.state.formData[`${this.state.currentTab - 1}`].selectedLanguages[langIndex] : this.props.baseLanguage;
+            console.log('langIndex', langIndex, currentLang);
+            columns.push(
+              <Col style={val.colStyle ? val.colStyle : {}} span={val.width}>
+                <CKEditor
+                  id={val.id}
+                  content={(!_.isEmpty(this.state.formData) && this.state.formData[`${this.state.currentTab - 1}`][currentLang]['template-content'] ? this.state.formData[`${this.state.currentTab - 1}`][currentLang]['template-content'] : '')}
+                  events={val.events}
+                  getEditorInstanse={val.getEditorInstanse}
+                  handleContentChange={(event) => this.updateFormData(event, val, 'onContentChange')}
+                />
+              </Col>
+            );
+          }
+            break;
+          case "edmeditor": {
+            let langIndex = 0;
+            if (val.id.indexOf('edmeditor') > -1 && val.id !== 'edmeditorsrc') {
+              const test = val.id.replace('src', '');
+              langIndex = parseInt(test.replace('edmeditor', ''), 10) - 1;
+            }
+            const currentLang = (!_.isEmpty(this.state.formData) && !_.isEmpty(this.state.formData[`${this.state.currentTab - 1}`]) && !_.isEmpty(this.state.formData[`${this.state.currentTab - 1}`].selectedLanguages) && this.state.formData[`${this.state.currentTab - 1}`].selectedLanguages[langIndex]) ? this.state.formData[`${this.state.currentTab - 1}`].selectedLanguages[langIndex] : this.props.baseLanguage;
+            const edmSrc = this.state.formData[`${this.state.currentTab - 1}`][currentLang][`edmeditor${this.state.currentTab > 1 ? this.state.currentTab : ''}src`];
+            console.log('Rendering EDM Editor ', edmSrc, this.state.formData[`${this.state.currentTab - 1}`]);
+            if (!edmSrc) {
+              return false;
+            }
+            console.log('Rendering EDM Editor 2');
+            columns.push(
+              <Col style={val.colStyle ? val.colStyle : {}} span={val.width}>
+                <EDMEditor
+                  id={val.id}
+                  getEditorInstanse={this.getEditorInstanse}
+                  edmSrc={edmSrc}
+                />
+              </Col>
+            );
+          }
+            break;
+          case "customPopover": {
+            console.log('this.state.formData[this.currentTab]', this.state.formData, this.state.currentTab);
+            columns.push(
+              <Col style={val.colStyle ? val.colStyle : {}} span={val.width}>
+                <CustomPopOver
+                  id={val.id}
+                  popOverList={val.popOverList}
+                  excludeList={this.state.formData[`${this.state.currentTab - 1}`].selectedLanguages}
+                  handlePopOverClick={(data) => this.updateFormData(data, val, "addLanguage")}
+                />
+              </Col>
+            );
+          }
+            break;
+          default:
+            break;
+        }
+        return true;
+      });
+      const row = (
+        <Row style={field.rowStyle ? field.rowStyle : {}} className={field.rowClassName ? field.rowClassName : ''}>
+          {
+            _.forEach(columns, (value) => {
+              if (value) {
+                return value;
+              }
+              return value;
+            })
+          }
+        </Row>
+      );
+      fields.push(row);
+    });
+
+    _.forEach(section.actionFields, (field) => {
+      const columns = [];
+      _.forEach(field.cols, (val) => {
+        const type = val.type;
+        const styling = val.styling;
+        switch (type) {
+          case "button":
+            if (styling === 'semantic' && val.metaType === 'submit-button') {
+              columns.push(
+                <Col span={3}>
+                  <CapButton
+                    type={val.buttonType}
+                    icon={val.icon}
+                    disabled={val.disabled ? val.disabled : false}
+                    onClick={(data) => val.id === 'save-button' ? this.saveForm() : this.callChildEvent(data, val, val.submitAction)}>
+                    {val.value}
+                  </CapButton>
+                </Col>
+              );
+            }
+            break;
+          default:
+            break;
+        }
+      });
+      const row = (
+        <Row>
+          {
+            _.forEach(columns, (value) => {
+              if (value) {
+                return value;
+              }
+              return value;
+            })
+          }
+        </Row>
+      );
+      fields.push(row);
+    });
+    return fields;
+  }
+
+  renderContainer(container) {
+    const containerType = container.type;
+    const renderedPanes = [];
+    let renderedSections = [];
+    let renderedContentSections = [];
+    let paneIndex = 1;
+    let panes = [];
+    let result = [];
+    let extraActionSections = [];
+    let activeTabKey;
+    let paneTabKey;
+    let stateTabKey = '';
+    switch (containerType) {
+      case "tabs":
+        panes = container.panes;
+        _.forEach(panes, (pane, index) => {
+          renderedSections = pane.sections.map((section) => {
+            result = this.renderSection(section, paneIndex);
+            return result;
+          });
+          console.log('Pane ', index, pane);
+          const sectionHeadeers = pane.sectionsHeaders ? pane.sectionsHeaders : container.tabContent && container.tabContent.sections;
+          renderedContentSections = sectionHeadeers.map( (tabContentSection) => {
+            console.log('Render Tabs ', tabContentSection, paneIndex);
+            result = this.renderSection(tabContentSection, paneIndex);
+            return result;
+          });
+          // let newTabKey = `${_.uniqueId()}`;
+          if (!this.state.formData[this.state.currentTab - 1]) {
+            return;
+          }
+          activeTabKey = this.state.formData.tabKey;
+          if (this.props.isNewVersionFlow) {
+            activeTabKey = this.state.tabKey;
+          }
+          paneTabKey = this.state.formData[paneIndex - 1] && this.state.formData[paneIndex - 1].tabKey;
+          if (this.props.isNewVersionFlow) {
+            const currentLang = this.state.formData[this.state.currentTab - 1].selectedLanguages[index];
+            paneTabKey = this.state.formData[this.state.currentTab - 1] && this.state.formData[this.state.currentTab - 1][currentLang] && this.state.formData[this.state.currentTab - 1][currentLang].tabKey;
+          }
+          console.log("paneTabKey", this.state.formData, paneIndex, activeTabKey, paneTabKey);
+          renderedPanes.push(
+            <TabPane
+              tab={
+                <div className="form-tab-header" onInput={(e) => e.stopPropagation()}>
+                  {
+                  _.forEach(renderedContentSections, (value) => {
+                    console.log('renderedContentSections ', value);
+                    if (value) {
+                      return value;
+                    }
+                    return value;
+                  })
+                  }
+                </div>
+              }
+              key={paneTabKey && paneTabKey !== '' ? `${paneTabKey}` : index}>
+              {
+                _.forEach(renderedSections, (value) => {
+                  console.log('renderedSections ', value);
+                  if (value) {
+                    return value;
+                  }
+                  return value;
+                })
+              }
+            </TabPane>);
+          paneIndex += 1;
+        });
+        extraActionSections = container.tabBarExtraContent && container.tabBarExtraContent.sections ? container.tabBarExtraContent.sections.map((section) => {
+          console.log('Extra Section ', section);
+          result = this.renderSection(section);
+          return result;
+        }) : {};
+        stateTabKey = this.state.tabKey;
+        if (stateTabKey && stateTabKey !== '') {
+          activeTabKey = stateTabKey;
+        }
+        return (
+          <Tabs
+            activeKey={activeTabKey && activeTabKey !== '' ? `${activeTabKey}` : '1'}
+            defaultActiveKey={activeTabKey && activeTabKey !== '' ? `${activeTabKey}` : '1'}
+            onChange={(data, e) => { this.callChildEvent(data, container, 'onTabChange', e); }}
+            onEdit={(data, e) => this.onEdit(data, e)}
+            style={{width: '100%'}}
+            tabBarExtraContent={
+              !_.isEmpty(extraActionSections) && _.forEach(extraActionSections, (value) => {
+                if (value) {
+                  return value;
+                }
+                return value;
+              })
+            }>
+            {
+            _.forEach(renderedPanes, (value) => {
+              if (value) {
+                return value;
+              }
+              return value;
+            })
+            }
+          </Tabs>
+        );
+
+      default:
+        break;
+    }
+    return null;
+  }
+
+  renderForm() {
+    const schema = this.props.schema;
+    const allElements = [];
+    let renderedStandAloneSections;
+    let renderedContainers;
+    if (schema.standalone) {
+      const sections = schema.standalone.sections;
+      renderedStandAloneSections = sections.map((section) => {
+        const result = this.renderSection(section);
+        return result;
+      });
+      allElements.push(renderedStandAloneSections);
+    }
+    if (schema.containers) {
+      renderedContainers = schema.containers.map((container) => {
+        if (container.isActive === undefined || (container.isActive)) {
+          const result = this.renderContainer(container);
+          return result;
+        }
+        return null;
+      });
+      allElements.push(renderedContainers);
+      const modal = this.getModal();
+      allElements.push(modal);
+    }
+    return allElements;
+  }
+
+  render() {
+    console.log('form builder state ', this.state, this.props);
+    return (
+      <Row>
+        {
+          this.props.schema ? this.renderForm() : ''
+        }
+      </Row>
+    );
+  }
+}
+
+FormBuilder.defaultProps = {
+  isNewVersionFlow: false,
+};
+
+FormBuilder.propTypes = {
+  schema: PropTypes.object.isRequired,
+  onSubmit: PropTypes.func,
+  formData: PropTypes.object,
+  onChange: PropTypes.func,
+  isEdit: PropTypes.bool,
+  usingTabContainer: PropTypes.bool,
+  parent: PropTypes.object,
+  iframeParent: PropTypes.object,
+  location: PropTypes.object,
+  tags: PropTypes.array,
+  injectedTags: PropTypes.object,
+  onFormValidityChange: PropTypes.func,
+  checkValidation: PropTypes.bool,
+  onContextChange: PropTypes.func,
+  tabCount: PropTypes.Number,
+  isSchemaChanged: PropTypes.bool,
+  modal: PropTypes.object,
+  isNewVersionFlow: PropTypes.bool,
+  baseLanguage: PropTypes.string,
+  supportedLanguages: PropTypes.array,
+  router: PropTypes.object,
+  currentTab: PropTypes.Number,
+  showModal: PropTypes.bool,
+  handleCancelModal: PropTypes.func,
+};
+
+export default FormBuilder;