@capillarytech/creatives-library 0.1.32 → 1.0.0

package/components/FormBuilder/index.js

@@ -1,3296 +0,0 @@
-
-/**
-*
-* FormBuilder
-*
-*/
-
-import React, { PropTypes } from 'react';
-import { Label } from 'semantic-ui-react';
-import _ from 'lodash';
-import { Tabs, Row, Col, Table, Modal, notification} from 'antd';
-import { CapButton, CapInput, CapPopover, CapTextArea, CapCheckbox, CapRadio, CapRadioGroup, CapSelect, CapTable, CapColumn} 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 SlideBox from '../SlideBox';
-import CardGrid from '../CardGrid';
-import * as charCount from '../../utils/smsCharCount';
-import CKEditor from "../../components/Ckeditor/";
-import EDMEditor from "../../components/Edmeditor";
-import CustomPopOver from '../../components/CustomPopOver';
-import './_formBuilder.scss';
-import {updateCharCount, checkUnicode} from "../../utils/smsCharCountV2";
-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,
-      customPopoverVisible: 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('outgoing 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.startValidation && nextProps.startValidation !== false && this.props.startValidation !== nextProps.startValidation) {
-      this.setState({checkValidation: true});
-      const ifValid = this.validateForm(null, null, null, true);
-      console.log('validation final', ifValid);
-      if (ifValid) {
-        this.saveForm(true);
-      } else {
-        this.props.stopValidation();
-      }
-    }
-    // if (nextProps.saveForm && this.props.saveForm !== nextProps.saveForm) {
-    //   this.saveForm(saveForm);
-    // }
-    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 if (!nextProps.isNewVersionFlow) {
-            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('outgoing 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('outgoing init when empty');
-      this.initialiseForm(nextProps.schema, true);
-    } else if (_.isEmpty(this.props.formData) && !_.isEmpty(nextProps.formData)) {
-      console.log('outgoing 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)) {
-      console.log('outgoing always', nextProps.formData);
-      if (nextProps.isNewVersionFlow) {
-        console.log('outgoing new flow');
-        const tabKey = (this.state.tabKey !== nextProps.formData[nextProps.currentTab - 1].tabKey) ? nextProps.formData[nextProps.currentTab - 1].tabKey : this.state.tabKey;
-        console.log('outgoing tab key form builder', this.state.tabKey, nextProps.formData[nextProps.currentTab - 1].tabKey, nextProps.formData, this.state.formData);
-        this.setState({tabKey});
-      }
-      this.setState({formData: nextProps.formData, currentLangTab}, () => {
-        if (nextProps.isNewVersionFlow && !this.state.formData[this.state.currentTab - 1][this.state.formData[this.state.currentTab - 1].activeTab].tabKey) {
-          console.log('outgoing have to reset tab keys');
-          this.resetTabKeys(nextProps.formData, nextProps.tabCount, false, true);
-        }
-        if (type === 'embedded' || this.props.schema.channel.toUpperCase() === 'EMAIL') {
-          this.validateForm();
-        }
-        if ((this.props.schema && this.props.schema.channel && this.props.schema.channel.toUpperCase() === 'MOBILEPUSH')) {
-          this.validateForm();
-        }
-      });
-    }
-
-    console.log('outgoing Next prop schema ', nextProps.schema);
-    if (!_.isEqual(nextProps.schema, this.props.schema)) {
-      console.log('outgoing Reinitializing form ', nextProps.schema, this.props.schema);
-      this.setState({ isFormValid: (this.props.isEdit ? this.props.isEdit : true) }, () => {
-        console.log('outgoing set validity');
-        if (!this.props.isEdit || (this.props.isEdit && !_.isEmpty(nextProps.formData))) {
-          console.log('outgoing 1', this.state.formData, 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;
-            console.log('outgoing 2');
-          }
-          if (this.props.isNewVersionFlow) {
-            resetTabKeys = false;
-          }
-          console.log('outgoing 3', resetTabKeys);
-          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 (!_.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>);
-      } else if (this.state.modal.type === "action") {
-        modal = (<Modal
-          visible={this.state.showModal}
-          title={this.state.modal.title}
-          onOk={this.handleOk}
-          onCancel={this.handleCancel}
-          footer={[
-          ]}
-          afterClose={this.handleCloseModal}
-        >
-          {this.state.modal.jsx}
-        </Modal>);
-      }
-    }
-    return modal;
-  };
-
-  openNotificationWithIcon = (type, message) => {
-    const dur = (type === 'error' || type === 'warning') ? null : 5;
-    notification[type]({
-      message: (`${type.toUpperCase()} ! ! ! `),
-      description: message, //'This is the content of the notification. This is the content of the notification. This is the content of the notification.',
-      duration: dur,
-    });
-  }
-
-  handleCloseModal = (data, e) => {
-    console.log('handle close modal', data, e);
-    const event = this.state.currentEvent;
-    if (!_.isEmpty(this.state.currentEvent)) {
-      switch (event) {
-        case "addLanguage":
-          this.updateFormData(this.state.currentEventData, this.state.currentEventVal, this.state.currentEvent);
-          break;
-        default:
-          break;
-      }
-    }
-  }
-
-  handleVisibleChange = (popoverVisible) => {
-    this.setState({ popoverVisible });
-  };
-
-  handleCustomPopoverVisibleChange = (customPopoverVisible) => {
-    this.setState({ customPopoverVisible });
-  };
-
-  resetTabKeys(form, count, changeDefaultTab, setFormTabKey) {
-    const tabCount = count || this.state.tabCount;
-    console.log('outgoing reset', form, count, changeDefaultTab);
-    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 ) {
-          const id = _.uniqueId();
-          if (formData[idx][formData[idx].selectedLanguages[langIndex]]) {
-            if (!formData[idx][formData[idx].selectedLanguages[langIndex]].tabKey) {
-              formData[idx][formData[idx].selectedLanguages[langIndex]].tabKey = id;
-            }
-            if (formData[idx].base) {
-              formData.base[formData.base.selectedLanguages[langIndex]].tabKey = id;
-            }
-          }
-        }
-        if (setFormTabKey) {
-          if (!formData[idx].activeTab) {
-            const baseLanguage = this.props.baseLanguage;
-            console.log('outgoing reset do not have active tab');
-            formData[idx].tabKey = formData[idx][baseLanguage].tabKey;
-          } else {
-            console.log('outgoing reset have active tab');
-            formData[idx].tabKey = formData[idx][formData[idx].activeTab].tabKey;
-          }
-          if (formData[idx].base) {
-            if (!formData.base.activeTab) {
-              console.log('outgoing reset do not have active tab base');
-              const baseLanguage = this.props.baseLanguage;
-              formData.base.tabKey = formData.base[baseLanguage].tabKey;
-            } else {
-              console.log('outgoing reset have active tab base');
-              formData.base.tabKey = formData.base[formData[idx].activeTab].tabKey;
-            }
-          }
-        }
-        console.log('debug bal 2', formData[idx], formData, idx);
-        if (formData[idx].base && formData.base.activeTab) {
-          console.log('debug bal', formData[idx][formData[idx].activeTab].tabKey, idx, formData[idx]);
-        //  if (!formData.base.tabKey) {
-          console.log('resetting base tak key');
-          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) || (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});
-      } else if (this.props.isNewVersionFlow && this.state.tabKey !== formData[this.state.currentTab - 1].tabKey) {
-        console.log('outgoing changing tab key');
-        this.setState({tabKey: formData[this.state.currentTab - 1].tabKey});
-      }
-    }
-    if (setFormTabKey) {
-      console.log('outgoing reset form builder tab key', formData.base.tabKey, formData[0].tabKey, formData);
-      this.setState({tabKey: formData.base.tabKey});
-    }
-    console.log('form data before adding key', formData);
-    console.log('outgoing reset final before set', formData, this.state.tabKey);
-    if (changeDefaultTab) {
-      this.setState({formData}, () => {
-        console.log('outgoing reset set data', 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, showMessages) {
-    console.log('validating form', this.state.formData);
-    console.log("mmm", this.props );
-    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;
-        if (!this.state.formData[count]) {
-          continue;
-        }
-        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 !== '' ? 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;
-      }
-    }
-
-    //validation for LINE
-    if (this.props.schema.channel === 'LINE') {
-      console.log('line error validation form data', this.state.formData);
-      if (this.state.formData['0']['message-editor'] !== undefined ) {
-        const content = this.state.formData['0']['message-editor'];
-        console.log('tag valid response', content);
-        const tagValidationResponse = this.validateTags(content, tags, injectedTags);
-        console.log('tag valid response', tagValidationResponse);
-        if (tagValidationResponse.valid) {
-          errorData['0']['message-editor'] = false;
-        } else {
-          console.log('message error validation tags issue');
-          errorData['0']['message-editor'] = true;
-          isValid = false;
-        }
-        if (content.trim() === '') {
-          console.log('line error validation content is empty');
-          errorData['0']['message-editor'] = true;
-          isValid = false;
-        }
-      }
-
-      if ( (this.state.formData['0'].image !== undefined) && (this.state.formData['0'].imagePreview !== undefined)){
-        const imgContentLength = this.state.formData['0'].image.length;
-        const imgContentLengthPreview = this.state.formData['0'].imagePreview.length;
-        if ( (imgContentLength < 1) && (imgContentLengthPreview < 1) ) {
-          console.log('line error validation image content is empty');
-          errorData['0'].image = true;
-          errorData['0'].imagePreview = true;
-          isValid = false;
-        }else{
-          errorData['0'].image = false;
-          errorData['0'].imagePreview = 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)){
-        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)){
-        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){
-          this.setState({androidValid, iosValid}, () => {
-            this.props.setModalContent('ios');
-          });
-          // modal.body = "Android template is not configured. Save without Android template";
-          // modal.id = "ios";
-          // modal.type = 'confirm';
-          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){
-          this.setState({androidValid, iosValid}, () => {
-            this.props.setModalContent('android');
-          });
-          // 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 (isOnlyAndroid && androidValid) {
-        isValid = isValid && true;
-      } else if (isOnlyIos && iosValid) {
-        isValid = isValid && true;
-      } else if (!isOnlyIos && !isOnlyAndroid && androidValid && iosValid) {
-        isValid = isValid && true;
-      }
-    }
-
-    // Form Data Validation for Email Channel
-    if (this.props.schema && this.props.schema.channel && this.props.schema.channel.toUpperCase() === "EMAIL") {
-      // Validating Email By iterating all elements of FormBuilder
-      _.forEach(this.state.formData, (data, index) => {
-        console.log("Form Iteration Data ", data, index);
-        if (!this.state.formData["template-subject"] && type.toLowerCase() === 'embedded' && (currentModule.toLowerCase() === 'loyalty' || currentModule.toLowerCase() === 'dvs' || currentModule.toLowerCase() === 'timeline' || currentModule.toLowerCase() === 'library')) {
-          errorData["template-subject"] = true;
-          isValid = false;
-        }
-        // Check if template subject present in form data from Loyalty, DVS, Timeline
-        if (index === 'template-subject' && type.toLowerCase() === 'embedded' && (currentModule.toLowerCase() === 'loyalty' || currentModule.toLowerCase() === 'dvs' || currentModule.toLowerCase() === 'timeline' || currentModule.toLowerCase() === 'library')) {
-          if (data.trim() === '') {
-            errorData[index] = true;
-            isValid = false;
-          } else {
-            errorData[index] = false;
-          }
-        }
-
-        // Check if Template name present in full mode
-        if(type !== 'embedded' && index === 'template-name' && data === '') {
-          errorData[index] = true;
-          isValid = false;
-        } else if(type !== 'embedded' && index === 'template-name' && data !== '') {
-          errorData[index] = false;
-        }
-
-        // Check formData if selected version present or not
-        if(index === 'template-version' && data === '') {
-          errorData[index] = true;
-          isValid = false;
-        } else if(index === 'template-version' && data !== '') {
-          errorData[index] = false;
-        }
-
-        // Check error for the versions
-        if (!isNaN(index) || index === 'base') {
-          if (errorData[index] === undefined) {
-            errorData[index] = {};
-          }
-          let errorString = "";
-          for (var i = 0; i < data.selectedLanguages.length; i+= 1) {
-            const currentLang = data.selectedLanguages[i];
-            const content = data[currentLang]['template-content'];
-            const tagValidationResponse = this.validateTags(content, tags, injectedTags);
-            if (errorData[index][currentLang] === undefined) {
-              errorData[index][currentLang] = {};
-            }
-            console.log('tag valid response', tagValidationResponse);
-            if (tagValidationResponse.valid) {
-              errorData[index][currentLang]['template-content'] = false;
-            } else {
-              errorData[index][currentLang]['template-content'] = true;
-              isValid = false;
-              if (showMessages && !isNaN(index)) {
-                if (tagValidationResponse.missingTags.length > 0 || tagValidationResponse.unsupportedTags.length > 0) {
-                  errorString += `Content is not valid for language: ${currentLang}\n`;
-                }
-                if (tagValidationResponse.missingTags.length > 0) {
-                  errorString += `Missing tags are: ${tagValidationResponse.missingTags.toString()}\n`;
-                }
-                if (tagValidationResponse.unsupportedTags.length > 0) {
-                  errorString += `Unsupported tags are: ${tagValidationResponse.unsupportedTags.toString()}\n`;
-                }
-              }
-            }
-          }
-          if (errorString !== "") {
-            this.openNotificationWithIcon('error', errorString);
-          }
-          _.forEach(errorData[index], (versionData, key) => {
-            if (data.selectedLanguages.indexOf(key) === -1) {
-              delete errorData[index][key];
-            }
-          });
-        }
-      });
-      // 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() === 'timeline')) {
-      //   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);
-    return isValid;
-  }
-
-  indexOfEnd(targetString, string) {
-    var io = targetString.indexOf(string);
-    return io == -1 ? -1 : io + string.length;
-  }
-  continueSaveForm = (id) => {
-
-  };
-  saveForm(saveForm) {
-    console.log('Is Form Valid ', this.state.isFormValid, saveForm);
-    if (this.props.isNewVersionFlow && !saveForm) {
-      this.props.getValidationData();
-      return;
-    }
-    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", "unsubscribe\\(#[a-zA-Z\\d]{6}\\)","Link_to_[a-zA-z]"];
-
-    //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';
-    let currentModule = this.props.location.query.module ? this.props.location.query.module : 'default';
-    if (this.props.tagModule) {
-      currentModule = this.props.tagModule;
-    }
-    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;
-        let isUnsubscribeSkipped = tagValue.indexOf("unsubscribe") != -1 ;
-        if (isUnsubscribeSkipped) {
-          const missingTagIndex = response.missingTags.indexOf("unsubscribe");
-          if(missingTagIndex != -1) { //skip regex tags for mandatory tags also
-            response.missingTags.splice(missingTagIndex, 1);
-          }
-        }
-      }
-      ifSupported = ifSupported || this.checkIfSupportedTag(tagValue, injectedTags);
-      if (!ifSupported) {
-        response.unsupportedTags.push(tagValue);
-        response.valid = false;
-      }
-      if (response.unsupportedTags.length == 0 && response.missingTags.length == 0 ) {
-        response.valid = true;
-      }
-    }
-    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' || key === 'selectedLanguages') {
-          return true;
-        }
-        if (this.props.isNewVersionFlow && formData[0].selectedLanguages.indexOf(key) > -1) {
-          _.forEach(formData[0].selectedLanguages, (lang) => {
-            if (errorData[idx] === undefined) {
-              errorData[idx] = {};
-            }
-            if (errorData[idx][lang] === undefined) {
-              errorData[idx][lang] = {};
-            }
-            errorData[idx][lang]['template-content'] = false;
-          });
-        } else {
-          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 (isContainer && this.props.isNewVersionFlow) {
-          // if (formData[index] && formData[index].selectedLanguages && formData[index].selectedLanguages.length > 0) {
-          //   for (let i = 0; i < formData[index].selectedLanguages.length; i += 1 ) {
-          //     formData[index][formData[index].selectedLanguages[i]] = {};
-          //   }
-          // } else {
-          //   formData[index][`${this.props.baseLanguage ? this.props.baseLanguage : 'en'}`] = {};
-          // }
-          _.forEach(this.props.supportedLanguages, (language) => {
-            if (!formData[index][language.iso_code] && this.props.baseLanguage === language.iso_code) {
-              formData[index][language.iso_code] = {};
-            }
-          });
-        }
-        // 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 ', col, this.props.supportedLanguages, this.props.baseLanguage, index);
-            if (!(col.id.indexOf('template-content') > -1 && col.id !== 'template-content')) {
-              if (isContainer && formData[index] && formData[index][this.props.baseLanguage] && 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('outgoing init form xxx', schema, makeFormEmpty, this.state.formData, resetTabKeys);
-    console.log('init form xxx', schema, makeFormEmpty, this.state.formData, resetTabKeys);
-    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' && innerKey !== 'imagePreview' && 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);
-      const baseLangTabKey = formData[currentTab][this.props.baseLanguage].tabKey;
-      console.log('deleting language', currentTab, currentLang);
-      delete formData[currentTab][currentLang];
-      formData[currentTab].activeTab = this.props.baseLanguage;
-      formData[currentTab].selectedLanguages.splice(deleteLanguageIndex, 1);
-      formData[currentTab].tabKey = baseLangTabKey;
-      if (formData[currentTab].base) {
-        delete formData.base[currentLang];
-        delete formData.base.selectedLanguages.splice(deleteLanguageIndex, 1);
-        formData.base.tabKey = baseLangTabKey;
-        formData.base.activeTab = this.props.baseLanguage;
-      }
-      console.log('After Deleting Form data ', formData);
-      this.setState({formData, currentLangTab: this.props.baseLanguage, tabKey: baseLangTabKey}, () => {
-        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, this.props.addLanguageType);
-    const formData = _.cloneDeep(this.state.formData);
-    console.log('oform data before updating', JSON.stringify(formData));
-    const tabIndex = this.state.currentTab - 1;
-    let currentTab = _.cloneDeep(this.state.currentTab);
-    console.log('setting form data1', JSON.stringify(formData));
-    if (this.state.usingTabContainer && !val.standalone) {
-      const data1 = data;
-      if (event === "addLanguage") {
-        const addLanguageType = this.props.addLanguageType;
-        if (addLanguageType === '') {
-          return;
-        }
-        const currentLang = formData[tabIndex].activeTab;
-        let baseTab = _.cloneDeep(formData[tabIndex][currentLang]);
-        let id = _.uniqueId();
-        let validId = false;
-        switch (addLanguageType) {
-          case "upload":
-            baseTab = _.cloneDeep(formData[tabIndex][currentLang]);
-            console.log('Add Language Event', JSON.stringify(formData), "\n", JSON.stringify(baseTab));
-            baseTab.iso_code = data.iso_code;
-            baseTab.lang_id = data.lang_id;
-            baseTab.language = data.language;
-            while (!validId) {
-              validId = true;
-              for (let idx = 0; idx < formData[tabIndex].selectedLanguages.length; idx += 1) {
-                if (!formData[tabIndex]) {
-                  continue;
-                }
-                console.log('comparing tab keys', id, formData, formData[tabIndex][formData[tabIndex].selectedLanguages[idx]].tabKey);
-                if (id === formData[tabIndex][formData[tabIndex].selectedLanguages[idx]].tabKey) {
-                  validId = false;
-                }
-              }
-              if (validId) {
-                break;
-              }
-              id = _.uniqueId();
-            }
-            baseTab.tabKey = id;
-            //formData[tabIndex].selectedLanguages.push(data.iso_code);
-            formData[tabIndex][data.iso_code] = baseTab;
-            console.log('Add Language Event After', formData);
-            formData[tabIndex].activeTab = data.iso_code;
-            formData[tabIndex].tabKey = baseTab.tabKey;
-            break;
-          case "copyPrimaryLanguage":
-          case "useEditor":
-            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;
-            validId = false;
-            while (!validId) {
-              validId = true;
-              for (let idx = 0; idx < formData[tabIndex].selectedLanguages.length; idx += 1) {
-                if (!formData[idx]) {
-                  continue;
-                }
-                if (id === formData[tabIndex][formData[tabIndex].selectedLanguages[idx]].tabKey) {
-                  validId = false;
-                }
-              }
-              if (validId) {
-                break;
-              }
-              id = _.uniqueId();
-            }
-            baseTab.tabKey = id;
-            formData[tabIndex].selectedLanguages.push(data.iso_code);
-            formData[tabIndex][data.iso_code] = baseTab;
-            console.log('Add Language Event After', formData);
-            formData[tabIndex].activeTab = data.iso_code;
-            formData[tabIndex].tabKey = baseTab.tabKey;
-            break;
-          case '':
-            return;
-          default:
-            break;
-        }
-        const that = this;
-        setTimeout(() => {
-          that.setState({tabKey: baseTab.tabKey});
-        }, 0);
-      }
-      console.log('setting form data2', JSON.stringify(formData));
-      if (!this.props.isNewVersionFlow) {
-        formData[tabIndex][val.id] = data1;
-      } else if (this.props.isNewVersionFlow && event !== "addLanguage" && event !== "onContentChange") {
-        formData[tabIndex][this.props.baseLanguage][val.id] = data1;
-      }
-      console.log('setting form data3', JSON.stringify(formData));
-      if (formData[tabIndex].base) {
-        if (!this.props.isNewVersionFlow) {
-          formData.base[val.id] = data1;
-        } else {
-          formData.base[data1.iso_code] = formData[tabIndex][data1.iso_code];
-          formData.base.tabKey = formData[tabIndex].tabKey;
-          formData.base.activeTab = formData[tabIndex].activeTab;
-          formData.base.selectedLanguages = formData[tabIndex].selectedLanguages;
-        }
-      }
-      console.log('setting form data4', JSON.stringify(formData));
-    } else {
-      formData[val.id] = data;
-    }
-    console.log('setting form data5', JSON.stringify(formData));
-    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);
-        });
-      }
-      console.log('setting form data6', JSON.stringify(formData));
-      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 data7', JSON.stringify(formData));
-    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);
-          this.setState({currentEventVal: {}, currentEvent: {}, currentEventData: {}});
-        } 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) {
-    console.log("lks 1", data);
-    console.log("lks 2", val);
-    console.log("lks 3", event);
-    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];
-          formData[(this.state.currentTab - 1)].tabKey = `${data}`;
-          if (formData[(this.state.currentTab - 1)].base) {
-            formData.base.activeTab = formData[(this.state.currentTab - 1)].selectedLanguages[activeTabIndex - 1];
-            formData.base.tabKey = `${data}`;
-          }
-          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);
-          this.setState({currentEvent: val.injectedEvents[event], currentEventData: data }, () => {
-            this.props.setModalContent('delete-version');
-          });
-        } 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 === "onContentChange") {
-      val.injectedEvents[event].call(this.props.parent, data, val.id);
-      return;
-    } else if (event === 'deleteLanguage') {
-      this.setState({currentEvent: val.injectedEvents[event], currentEventData: data }, () => {
-        this.props.setModalContent('delete-language');
-      });
-      // const modalContent = {
-      //   title: "Alert",
-      //   body: "Do you really want to delete this language?",
-      //   type: 'confirm',
-      //   id: 'email-language-delete-modal',
-      // };
-      // 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 isLanguageSupport = this.props.location.query.isLanguageSupport || false;
-      const isEdmSupport = (this.props.location.query.isEdmSupport !== "false") || false;
-      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, isLanguageSupport, isEdmSupport} : {module, isLanguageSupport, isEdmSupport},
-      });
-    } else if (id === "email-language-delete-modal") {
-      console.log('Delete languages ');
-      this.deleteLanguage();
-      this.props.handleCancelModal();
-      // 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;
-  };
-
-  handleOnHoverItem = (isHovering, id) => {
-    if (isHovering) {
-      this.setState({hoveredItem: id});
-    } else {
-      this.setState({hoveredItem: ''});
-    }
-  }
-
-  handleOnItemClick = (isClicked, id) => {
-    this.setState({clickedItem: id});
-  }
-
-  populateTemplatesList(data) {
-    if (!data) {
-      return [];
-    }
-    const items = [];
-    data.map( (template) => {
-      // console.log("Templates ", template._id, " Data ", template);
-      const temp = {};
-      temp.id = template._id;
-      if (this.props.schema.channel.toLowerCase() === 'email') {
-        // console.log('Data Prepare');
-        const imgSrc = template && template.versions && template.versions.base ? template.versions.base.preview_http_url : '';
-        const ifPreviewGenerated = template && template.versions && template.versions.base ? template.versions.base.isPreviewGenerated : 0;
-        const content = <img src={imgSrc || ''} alt="" />;
-        console.log('qwerty template preview', imgSrc, template, ifPreviewGenerated, content);
-        temp.content = (
-          <div
-            className="sms-template-content">
-            <div className={`sms-text ${this.state.clickedItem === template._id ? 'sms-text-blurred' : ''}`}>
-              {content}
-            </div>
-            {/*template._id === this.state.clickedItem ? <CapButton onClick={(e) => this.handleEditClick(e, template._id)} className="edit-button" type="secondary">{type === 'embedded' ? this.props.intl.formatMessage(messages.selectButton) : this.props.intl.formatMessage(messages.editButton)}</CapButton> : ''*/}
-            {/*template._id === this.state.clickedItem ? <CapButton onClick={() => this.handlePreviewClick(template)} className="preview-button" type="cancel">{this.props.intl.formatMessage(messages.previewButton)}</CapButton> : ''*/}
-          </div>);
-      }
-      // temp.footer = (
-      //   <div className="footer-container">
-      //     <div className="card-title">
-      //       <span className="template-name" style={{ fontWeight: `${this.props.schema.channel.toLowerCase() === 'wechat' ? '400' : '600'}` }}>
-      //         { template && template.versions && template.versions.history && template.versions.history.length > 1 && this.props.schema.channel.toLowerCase() !== 'mobilepush' && <i style={{fontSize: '16px', margin: '0 8px 0 0', verticalAlign: 'middle'}} className="material-icons">filter_none</i>}
-      //         {template.name}
-      //       </span>
-      //     </div>
-      //   </div>
-      // );
-      items.push(temp);
-      return true;
-    });
-    return items;
-  }
-
-  handleAddLanguageFlow(data, val, event) {
-    this.setState({currentEventData: data, currentEventVal: val, currentEvent: event, customPopoverVisible: false}, () => {
-      this.props.setModalContent('add-language', data);
-    });
-  }
-
-  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 "contentPreview":
-          const content = isVersionEnable ? this.state.formData[this.state.currentTab - 1]['sms-editor'] : this.state.formData['sms-editor'];
-          const charList = updateCharCount(content).char_list;
-          columns.push(<CapColumn id={val.id} className={"preview-chars"} span={val.width}>
-            {charList.map((char) => char)}
-          </CapColumn>);
-        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}
-                userLocale={this.props.userLocale}
-              />
-            </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];
-          const unicodeEnabled = isVersionEnable ? this.state.formData[`${this.state.currentTab - 1}`][`unicode-validity${this.state.currentTab > 1 ? this.state.currentTab : ''}`] : this.state.formData['unicode-validity'];
-          columns.push(
-            <Col key="input" span={10}>
-              <TemplatePreview
-                channel={val.channel ? val.channel : 'SMS'}
-                content={content}
-                charCounterEnabled={val.charCounterEnabled}
-                unicodeEnabled={unicodeEnabled}
-              >
-              </TemplatePreview>
-            </Col>
-          );
-          break;
-        }
-        case "popover":
-          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;
-          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}
-                // this.callChildEvent(data, val, 'addVersion', event);
-                handleContentChange={(event) => this.callChildEvent(event, val, 'onContentChange')}
-              />
-            </Col>
-          );
-          break;
-        case "edmeditor": {
-          // if (!this.state.formData[`${this.state.currentTab - 1}`]) {
-          //   return true;
-          // }
-          let langTab = 1;
-          if (val.id.match(/edmeditor/g)) {
-            if (val.length > 9 && val.id.charAt(9)) {
-              langTab = val.id.charAt(9);
-            }
-          }
-          const edmSrc = this.state.formData[`${this.state.currentTab - 1}`][this.state.currentLangTab][`edmeditor${langTab > 1 ? langTab : ''}src`];
-          console.log('Rendering EDM Editor collabel ', edmSrc, this.state.formData[`${this.state.currentTab - 1}`]);
-          if (!edmSrc) {
-            return false;
-          }
-          console.log('Rendering EDM Editor 2 collabel');
-          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];
-        }
-        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 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);
-        if (val.id.match(/edmeditor/g)) {
-          console.log('current language first', val.id);
-        }
-        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);
-        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;
-        }
-        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 : {}} offset={val.offset} 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}
-                  userLocale={this.props.userLocale}
-                />
-              </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];
-            const unicodeEnabled = isVersionEnable ? this.state.formData[`${this.state.currentTab - 1}`][`unicode-validity${this.state.currentTab > 1 ? this.state.currentTab : ''}`] : this.state.formData['unicode-validity'];
-            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}
-                  unicodeEnabled={unicodeEnabled}
-                >
-                </TemplatePreview>
-              </Col>
-            );
-          }
-            break;
-          case "line-preview": {
-            console.log("lipak inside imagePreview@@@", this.state.formData['0'].imagePreview);
-            const content = {
-              bodyText: isVersionEnable ? this.state.formData[`${this.state.currentTab - 1}`][`message-editor${this.state.currentTab > 1 ? this.state.currentTab : ''}`] : this.state.formData[val.id],
-              bodyImage: this.state.formData[`${this.state.currentTab - 1}`].imagePreview,
-            };
-            if (!this.state.formData[`${this.state.currentTab - 1}`]) {
-              return true;
-            }
-            console.log("lipak inside formdata@@@", content);
-            columns.push(
-              <Col key="input" span={23} offset={1}>
-                <TemplatePreview
-                  key={val.id}
-                  style={val.customStyling ? val.customStyling : {}}
-                  channel={val.channel}
-                  content={content}
-                >
-                </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;
-            });
-            columns.push(
-              <Col style={val.colStyle ? val.colStyle : {}} span={val.width} offset={val.offset}>
-                <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 : ''}
-                style={val.colStyle ? val.colStyle : {}}
-              >
-                <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;
-            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;
-            const 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'] : '');
-            console.log('ckeditor current lang', currentLang, content);
-            if (this.state.formData[`${this.state.currentTab - 1}`][currentLang].is_drag_drop) {
-              // content = "";
-            }
-            columns.push(
-              <Col style={val.colStyle ? val.colStyle : {}} span={val.width}>
-                <CKEditor
-                  id={val.id}
-                  content={content}
-                  events={val.events}
-                  getEditorInstanse={(evt, id) => val.injectedEvents.getEditorInstanse.call(this, evt, id)}
-                  handleContentChange={(event) => this.callChildEvent(event, val, 'onContentChange')}
-                />
-              </Col>
-            );
-          }
-            break;
-          case "edmeditor": {
-            // if (!this.state.formData[`${this.state.currentTab - 1}`]) {
-            //   return true;
-            // }
-            let langTab = 1;
-            if (val.id.match(/edmeditor/g)) {
-              console.log('current language found match', val.id);
-              if (val.id.length > 9 && val.id.charAt(9)) {
-                console.log('current language in if');
-                langTab = val.id.charAt(9);
-              }
-            }
-            const supportedLanguages = this.state.formData[this.state.currentTab - 1].selectedLanguages;
-            // 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 currentLang = supportedLanguages[langTab - 1];
-            const edmSrc = this.state.formData[`${this.state.currentTab - 1}`][currentLang] && this.state.formData[`${this.state.currentTab - 1}`][currentLang][`edmeditor${this.state.currentTab > 1 ? this.state.currentTab : ''}src`];
-            console.log('current language', langTab, supportedLanguages, currentLang, val.id, edmSrc);
-            console.log('Rendering EDM Editor multicol', edmSrc, this.state.formData[`${this.state.currentTab - 1}`]);
-            if (!edmSrc) {
-              return false;
-            }
-            console.log('current language rendered', langTab, val.id);
-            console.log('Rendering EDM Editor 2 multicol');
-            columns.push(
-              <Col style={val.colStyle ? val.colStyle : {}} span={val.width}>
-                <EDMEditor
-                  id={val.id}
-                  getEditorInstanse={this.getEditorInstanse}
-                  edmSrc={edmSrc}
-                />
-              </Col>
-            );
-          }
-            break;
-          case "customPopover": {
-            if (!this.state.formData[`${this.state.currentTab - 1}`]) {
-              return true;
-            }
-            columns.push(
-              <Col style={val.colStyle ? val.colStyle : {}} span={val.width}>
-                <CustomPopOver
-                  id={val.id}
-                  popOverList={this.props.supportedLanguages}
-                  excludeList={this.state.formData[`${this.state.currentTab - 1}`].selectedLanguages}
-                  handlePopOverClick={(data) => this.handleAddLanguageFlow(data, val, "addLanguage")}
-                  visible={this.state.customPopoverVisible}
-                  onVisibleChange={this.handleCustomPopoverVisibleChange}
-                />
-              </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('tabs rendering', renderedSections);
-          const sectionHeadeers = pane.sectionsHeaders ? pane.sectionsHeaders : container.tabContent && container.tabContent.sections;
-          renderedContentSections = sectionHeadeers.map( (tabContentSection) => {
-            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('tabs rendering pushing pane', paneTabKey, renderedSections, index, pane);
-          renderedPanes.push(
-            <TabPane
-              forceRender
-              tab={
-                <div className="form-tab-header" onInput={(e) => e.stopPropagation()}>
-                  {
-                  _.forEach(renderedContentSections, (value) => {
-                    if (value) {
-                      return value;
-                    }
-                    return value;
-                  })
-                  }
-                </div>
-              }
-              key={paneTabKey && paneTabKey !== '' ? `${paneTabKey}` : index}>
-              {
-                _.forEach(renderedSections, (value) => {
-                  if (value) {
-                    return value;
-                  }
-                  return value;
-                })
-              }
-            </TabPane>);
-          paneIndex += 1;
-        });
-        extraActionSections = container.tabBarExtraContent && container.tabBarExtraContent.sections ? container.tabBarExtraContent.sections.map((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;
-      });
-      console.log('tabs rendering result', renderedContainers);
-      allElements.push(renderedContainers);
-      console.log('tabs rendering all elements', allElements);
-      const modal = this.getModal();
-      allElements.push(modal);
-    }
-    return allElements;
-  }
-
-  render() {
-    const cmsTemplateSelectionContent = (
-      <CardGrid
-        className={""}
-        listItem={this.populateTemplatesList(this.props.cmsTemplates)}
-        // filterContent={filterContent}
-        onHoverItem={this.handleOnHoverItem}
-        onItemClick={this.props.handleEdmDefaultTemplateSelection}
-        colNumber={2}
-      >
-      </CardGrid>
-    );
-
-    console.log('form builder state ', this.state, this.props);
-    return (
-      <Row>
-        {
-          this.props.schema ? this.renderForm() : ''
-        }
-        <SlideBox
-          header={(<h3>Layout Selection</h3>)}
-          width={60}
-          content={cmsTemplateSelectionContent}
-          show={this.props.showEdmEmailTemplates}
-          handleClose={this.props.toggleEdmEmailTemplateSelection}
-          loadingText={"Loading EDM Templates"}
-          isLoading={this.props.getCmsTemplatesInProgress}
-        />
-      </Row>
-    );
-  }
-}
-
-FormBuilder.defaultProps = {
-  isNewVersionFlow: false,
-  userLocale: 'en',
-};
-
-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,
-  cmsTemplates: PropTypes.array,
-  getCmsTemplatesInProgress: PropTypes.bool,
-  showEdmEmailTemplates: PropTypes.bool,
-  toggleEdmEmailTemplateSelection: PropTypes.func,
-  handleEdmDefaultTemplateSelection: PropTypes.func,
-  userLocale: PropTypes.string,
-  setModalContent: PropTypes.func,
-  addLanguageType: PropTypes.string,
-  getValidationData: PropTypes.func,
-  startValidation: PropTypes.bool,
-  // saveForm: PropTypes.bool,
-  stopValidation: PropTypes.func,
-};
-
-export default FormBuilder;