@capillarytech/creatives-library 2.0.81 → 2.0.83

package/v2Components/FormBuilder/index.js

@@ -0,0 +1,3309 @@
+/* eslint-disable no-case-declarations */
+
+/**
+*
+* FormBuilder
+*
+*/
+
+import PropTypes from 'prop-types';
+
+import React from 'react';
+import { Label } from 'semantic-ui-react';
+import _ from 'lodash';
+import { Tabs, Table, Modal} from 'antd';
+import { CapButton, CapInput, CapPopover, CapCheckbox, CapRadio, CapSelect, CapTable, CapRow, CapColumn, CapNotification} from '@capillarytech/cap-ui-library';
+import LabelHOC from '@capillarytech/cap-ui-library/assets/HOCs/ComponentWithLabelHOC';
+import TemplatePreview from '../../components/TemplatePreview';
+import TagList from '../../containers/TagList';
+import SmsEditor from '../SmsEditor';
+import SlideBox from '../SlideBox';
+import CardGrid from '../CardGrid';
+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;
+const {TextArea} = CapInput;
+const {CapRadioGroup} = CapRadio;
+// import styled from 'styled-components';
+
+// import { FormattedMessage } from 'react-intl';
+// import messages from './messages';
+const isUrl = (str) => {
+  // eslint-disable-next-line no-useless-escape
+  const res = str.match(/(http(s)?:\/\/.)?(www\.)?[-a-zA-Z0-9@:%._\+~#=]{2,256}\.[a-z]{2,6}\b([-a-zA-Z0-9@:%_\+.~#?&//=]*)/g);
+  return res;
+};
+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.handleSetRadioValue = this.handleSetRadioValue.bind(this);
+    this.formElements = [];
+  }
+
+  componentWillMount() {
+    this.setState({usingTabContainer: this.props.usingTabContainer ? this.props.usingTabContainer : false});
+    if (this.props.formData && (this.props.isEdit || (!this.props.isEdit && !_.isEmpty(this.props.formData)))) {
+      this.setState({formData: this.props.formData}, () => {
+        // if (!this.props.isNewVersionFlow) {
+        this.initialiseForm(this.props.schema, false, true);
+        // }
+      });
+    } else {
+      this.initialiseForm(this.props.schema, true);
+    }
+  }
+
+  componentWillReceiveProps(nextProps) {
+    const type = this.props.location.query.type;
+    const isLibraryModule = this.props.location.query.module === "library";
+    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);
+
+      if (ifValid) {
+        this.saveForm(true);
+      } else {
+        this.props.stopValidation();
+      }
+    }
+    // if (nextProps.saveForm && this.props.saveForm !== nextProps.saveForm) {
+    //   this.saveForm(saveForm);
+    // }
+    if (nextProps.isEdit) {
+      if (!_.isEqual(nextProps.formData, this.state.formData) && !_.isEmpty(nextProps.formData)) {
+        if (type === 'embedded' && !isLibraryModule) { //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});
+        }
+
+        if (this.state.usingTabContainer && this.state.tabKey === '') {
+          //this.setState({formData: nextProps.formData});
+          if (nextProps.isNewVersionFlow && !_.isEqual(this.state.tabKey, 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)) {
+        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) {
+        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) {
+        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)) {
+      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)) {
+      this.initialiseForm(nextProps.schema, true);
+    } else if (_.isEmpty(this.props.formData) && !_.isEmpty(nextProps.formData)) {
+      this.setState({formData: nextProps.formData});
+    }
+
+    let currentLangTab = _.cloneDeep(this.state.currentLangTab);
+    if (nextProps.isNewVersionFlow && nextProps.formData[`${this.state.currentTab - 1}`] && nextProps.formData[`${this.state.currentTab - 1}`].activeTab) {
+      currentLangTab = nextProps.formData[`${this.state.currentTab - 1}`].activeTab;
+    }
+
+    if (nextProps.isNewVersionFlow && nextProps.currentTab && nextProps.currentTab !== this.props.currentTab) {
+      this.setState({currentTab: nextProps.currentTab});
+    }
+
+    if (!_.isEmpty(nextProps.formData) && !_.isEqual(this.state.formData, nextProps.formData)) {
+      if (nextProps.isNewVersionFlow) {
+        const tabKey = (this.state.tabKey !== nextProps.formData[nextProps.currentTab - 1].tabKey) ? nextProps.formData[nextProps.currentTab - 1].tabKey : this.state.tabKey;
+
+        this.setState({tabKey});
+      }
+      this.setState({formData: nextProps.formData, currentLangTab}, () => {
+        if (nextProps.isNewVersionFlow && !this.state.formData[this.state.currentTab - 1][this.state.formData[this.state.currentTab - 1].activeTab].tabKey) {
+          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();
+        }
+      });
+    }
+
+
+    if (!_.isEqual(nextProps.schema, this.props.schema)) {
+      this.setState({ isFormValid: (this.props.isEdit ? this.props.isEdit : true) }, () => {
+        if (!this.props.isEdit || (this.props.isEdit && !_.isEmpty(nextProps.formData))) {
+          let resetTabKeys = (this.state.formData.tabKey === undefined);
+          if ((this.props.schema && this.props.schema.channel && this.props.schema.channel.toUpperCase() === 'MOBILEPUSH')) {
+            resetTabKeys = false;
+          }
+          if (this.props.isNewVersionFlow) {
+            resetTabKeys = false;
+          }
+
+          this.initialiseForm(nextProps.schema, false, resetTabKeys);
+          this.validateForm();
+        }
+      });
+    }
+    if (!_.isEqual(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)) {
+      this.validateForm(nextProps.tags, nextProps.injectedTags);
+    }
+    if (!_.isEmpty(nextProps.tags) && !_.isEqual(nextProps.tags, this.props.tags)) {
+      this.validateForm(nextProps.tags, nextProps.injectedTags);
+    }
+    if (!_.isEqual(nextProps.showModal, this.props.showModal)) {
+      this.setState({showModal: nextProps.showModal});
+    }
+    if (nextProps.modal && (!_.isEqual(nextProps.modal, this.props.modal) || _.isEmpty(this.state.modal))) {
+      this.setState({modal: nextProps.modal});
+    }
+  }
+
+  onEdit() {
+
+  }
+
+  getModal = () => {
+    let modal;
+    if (this.state.modal) {
+      if (this.state.modal.type === 'confirm') {
+        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, key) => {
+    CapNotification.error({
+      key: key || type + message,
+      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.',
+    });
+  }
+
+  handleCloseModal = () => {
+    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;
+
+
+    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;
+
+            formData[idx].tabKey = formData[idx][baseLanguage].tabKey;
+          } else {
+            formData[idx].tabKey = formData[idx][formData[idx].activeTab].tabKey;
+          }
+          if (formData[idx].base) {
+            if (!formData.base.activeTab) {
+              const baseLanguage = this.props.baseLanguage;
+              formData.base.tabKey = formData.base[baseLanguage].tabKey;
+            } else {
+              formData.base.tabKey = formData.base[formData[idx].activeTab].tabKey;
+            }
+          }
+        }
+
+        if (formData[idx].base && formData.base.activeTab) {
+        //  if (!formData.base.tabKey) {
+
+          formData.base.tabKey = formData[idx][formData[idx].activeTab].tabKey;
+          //}
+          baseIndex = idx;
+        }
+      } else if (formData[idx]) {
+        if (!formData[idx].tabKey) {
+          formData[idx].tabKey = _.uniqueId();
+        }
+        if (formData[idx].base) {
+          formData.base = formData[idx];
+          baseIndex = idx;
+        }
+      }
+    }
+
+    if ((formData.base && formData.base.tabKey && formData.base.tabKey !== '' && !changeDefaultTab) || (formData.base && this.state.tabKey !== formData.base.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) {
+        this.setState({tabKey: formData[this.state.currentTab - 1].tabKey});
+      }
+    }
+    if (setFormTabKey) {
+      this.setState({tabKey: formData.base.tabKey});
+    }
+
+
+    if (changeDefaultTab) {
+      this.setState({formData}, () => {
+        this.props.onChange(formData, this.state.tabCount);
+        this.validateForm();
+      });
+    } else {
+      this.setState({formData, currentTab: baseIndex + 1}, () => {
+        this.props.onChange(formData, this.state.tabCount);
+        this.validateForm();
+      });
+    }
+  }
+  isValidExternalLink = ({obj, key}) => {
+    if (key in obj) {
+      const url = _.get(obj, key);
+      return (url && url !== "" && isUrl(url));
+    }
+    return true;
+  }
+  /* eslint-disable */
+  validateForm(tags, injectedTags, isSave, showMessages) {
+    
+    
+    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') {
+        
+      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;
+        
+        let tagValidationResponse = false;
+        if (content) {
+          tagValidationResponse = this.validateTags(content, tags, injectedTags);
+        }
+        
+        if (tagValidationResponse.valid) {
+          errorData[count][`sms-editor${index > 1 ? index : ''}`] = false;
+        } else {
+          
+          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 === '') {
+          
+          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') {
+      
+      if (this.state.formData['0']['message-editor'] !== undefined ) {
+        const content = this.state.formData['0']['message-editor'];
+        
+        const tagValidationResponse = this.validateTags(content, tags, injectedTags);
+        
+        if (tagValidationResponse.valid) {
+          errorData['0']['message-editor'] = false;
+        } else {
+          
+          errorData['0']['message-editor'] = true;
+          isValid = false;
+        }
+        if (content.trim() === '') {
+          
+          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) ) {
+          
+          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') {
+      
+      _.forEach(this.state.formData, (val, 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);
+            
+            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;
+          }
+        }
+      });
+      
+    }
+    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)) && isOnlyAndroid !== isOnlyIos) { 
+          // skip validation of the tab which is not open in embedded mode
+          skipValidation = true;
+        }
+        if (!isNaN(index) && tab && !skipValidation) {
+          const selector = index > 0 ? `${Number(index) + 1}` : '';
+          let message = tab[`message-editor${selector}`];
+
+          if (errorData[parseInt(index)]) {
+            if (message) {
+              message = message.trim();
+
+              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);
+                
+                if (tagValidationResponse.valid) {
+                  errorData[parseInt(index)][`message-editor${selector}`] = false;
+                } else {
+                  errorData[parseInt(index)][`message-editor${selector}`] = true;
+                  errorData[parseInt(index)]['invalid-tags'] = tagValidationResponse.unsupportedTags;
+                  isValid = false;
+                }
+              }
+
+            } else {
+                errorData[parseInt(index)][`message-editor${selector}`] = true;
+                isValid = false;
+                isCurrentTabValid = false;
+            }
+            
+            
+
+            let title = tab[`message-title${selector}`]
+            if(title){
+              title = title.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);
+                
+                if (tagValidationResponse.valid) {
+                  errorData[parseInt(index)][`message-title${selector}`] = false;
+                } else {
+                  errorData[parseInt(index)][`message-title${selector}`] = true;
+                  isValid = false;
+                }
+              }
+            } else {
+              errorData[parseInt(index)][`message-title${selector}`] = true;
+              isValid = false;
+              isCurrentTabValid = 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(!this.isValidExternalLink({obj: tab, key: 'cta-deeplink-text'})){
+              errorData[parseInt(index)][`cta-deeplink-text`] = true;
+              isValid = false;
+              isCurrentTabValid = false;
+            }else {
+              errorData[parseInt(index)]['cta-deeplink-text'] = false;
+            }
+            
+            if(!this.isValidExternalLink({obj: tab, key: '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(!this.isValidExternalLink({obj: tab, key: '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(!this.isValidExternalLink({obj: tab, key: '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(!this.isValidExternalLink({obj: tab, key: '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) => {
+        
+        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 && 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] = {};
+            }
+            
+            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, "email-validation-error");
+          }
+          _.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);
+      //   // 
+      //   // 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});
+    
+    this.props.onFormValidityChange(isValid, errorData);
+    return isValid;
+  }
+
+  indexOfEnd(targetString, string) {
+    var io = targetString.indexOf(string);
+    return io == -1 ? -1 : io + string.length;
+  }
+  continueSaveForm = (id) => {
+
+  };
+  saveForm(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;
+      }
+    });
+    
+    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]","SURVEY.*.TOKEN"];
+
+    //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'];
+    
+    
+    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) {
+    const formData = _.cloneDeep(formDataObj);
+    const newFormData = {};
+    newFormData[index] = {};
+    _.forEach(section.inputFields, (inputField) => {
+      _.forEach(inputField.cols, (col) => {
+        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 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] = '';
+            }
+          }
+        }
+        if (col.type === 'checkbox') {
+          if (isContainer && !formData[index][col.id]) {
+            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') {
+          this.setState({usingTabContainer: true});
+          _.forEach(val.panes, (pane, paneIndex) => {
+            _.forEach(pane.sections, (section) => {
+              if (section.type === 'multicols') {
+                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') {
+          this.setState({usingTabContainer: true});
+          _.forEach(val.panes, (pane, index) => {
+            _.forEach(pane.sections, (section) => {
+              if (section.type === 'multicols') {
+                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) {
+    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);
+
+
+    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) {
+    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] = {};
+
+    const newTabCount = newTabIndex + 1;
+    _.forEach(formData[0], (val, key) => {
+      if (key === 'base') {
+        return true;
+      }
+      if (key === 'tabKey') {
+        return true;
+      }
+      if (typeof val === 'string') {
+        if (ifError) {
+          formData[newTabIndex][`${key}${newTabCount}`] = false;
+        } else 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 if (key === this.props.baseLanguage) {
+            formData[newTabIndex][key] = {};
+            _.forEach(val, (subVal, index) => {
+                // if (subVal === 'is_drag_drop' || subVal === 'lang_id' || subVal === 'iso_code' === 'language') {
+                //
+                //   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) => {
+            formData[newTabIndex][key][index] = '';
+          });
+        }
+      }
+      return true;
+    });
+    let id = (this.props.isNewVersionFlow && formData[newTabIndex][this.props.baseLanguage].tabKey) ? formData[newTabIndex][this.props.baseLanguage].tabKey : _.uniqueId();
+
+    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) {
+      this.setState({errorData: formData});
+    } else {
+      this.props.onChange(formData, newTabCount, newTabIndex + 1);
+
+      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) {
+      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) {
+        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) {
+    if (!ifError && this.state.tabCount === 1) {
+      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;
+    }
+
+    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) {
+
+    // } else {
+    if (this.state.formData[`${this.state.currentTab - 1}`].activeTab !== this.props.baseLanguage) {
+      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;
+
+      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;
+      }
+
+      this.setState({formData, currentLangTab: this.props.baseLanguage, tabKey: baseLangTabKey}, () => {
+        this.state.currentEvent.call(this.props.parent, formData, deleteLanguageIndex);
+        this.setState({currentEvent: {}, currentEventData: {}});
+      });
+    }
+  };
+
+  renameVersion(currentTab) {
+    document.getElementById(`tab-header${currentTab > 1 ? currentTab : ''}`).contentEditable = "true";
+    document.getElementById(`tab-header${currentTab > 1 ? currentTab : ''}`).focus();
+  }
+
+  updateFormData(data, val, event) {
+    const formData = _.cloneDeep(this.state.formData);
+
+    const tabIndex = this.state.currentTab - 1;
+    let currentTab = _.cloneDeep(this.state.currentTab);
+
+    if (this.state.usingTabContainer && !val.standalone) {
+      const data1 = data;
+      if (event === "addLanguage") {
+        const 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]);
+
+            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;
+                }
+
+                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;
+
+            formData[tabIndex].activeTab = data.iso_code;
+            formData[tabIndex].tabKey = baseTab.tabKey;
+            break;
+          case "copyPrimaryLanguage":
+          case "useEditor":
+            baseTab = _.cloneDeep(formData[tabIndex][this.props.baseLanguage]);
+
+            //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;
+
+            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);
+      }
+
+      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;
+      }
+
+      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;
+        }
+      }
+    } else {
+      formData[val.id] = data;
+    }
+
+    if (this.props.isNewVersionFlow) {
+      if (event === 'onSelect' && data === 'New Version') {
+        this.callChildEvent(data, val, 'addVersion', event);
+      } else if (event === 'onSelect' && data !== 'New Version') {
+        currentTab = _.findIndex(this.state.formData['template-version-options'], { key: data}) + 1;
+        this.setState({currentTab, tabKey: formData[`${currentTab - 1}`].tabKey}, () => {
+          val.injectedEvents[event].call(this, this.state.formData['template-version-options'][currentTab - 1].key, formData, val);
+        });
+      }
+
+      if (event === 'onContentChange') {
+
+      //  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();
+      //}
+      }
+    }
+
+
+    this.setState({formData}, () => {
+      if (this.props.startValidation) {
+        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) {
+        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')) {
+      this.props.onChange(formData, this.state.tabCount, currentTab, val);
+    }
+  }
+
+
+  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) {
+    if (!event) {
+      return;
+    }
+
+    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");
+
+          for (let i = 0; i < elems.length; i += 1) {
+            if (elems.item(i).classList.contains("ant-tabs-tab-active")) {
+              activeTabIndex = i + 1;
+            }
+          }
+
+          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}`;
+          }
+
+          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");
+
+          for (let i = 0; i < elems.length; i += 1) {
+            if (elems.item(i).classList.contains("ant-tabs-tab-active")) {
+              activeTabIndex = i + 1;
+            }
+          }
+
+          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(() => {
+        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) => {
+              if (index === 'tabKey') {
+                tmptabData.tabKey = _.uniqueId();
+              }
+            });
+          });
+          formData[this.state.tabCount].tabKey = formData[this.state.tabCount][formData[this.state.tabCount].activeTab].tabKey;
+
+          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) {
+      //
+      // } 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);
+      //
+      //   delete formData[currentTab][currentLang];
+      //   formData[currentTab].activeTab = this.props.baseLanguage;
+      //   formData[currentTab].selectedLanguages.splice(deleteLanguageIndex, 1);
+      //
+      //   this.setState({formData, currentLangTab: this.props.baseLanguage}, () => {
+      //     val.injectedEvents[event].call(this.props.parent, formData, deleteLanguageIndex);
+      //   });
+      // }
+      return;
+    }
+    console.log('Call Event ', event, data, this.props.parent);
+    // val.injectedEvents[event].call(this.props.parent, data);
+    val.injectedEvents[event].call(this.props.parent, data, val.id);
+  }
+  openFileDialog = (e, parentID) => {
+    console.log("filedialog: ");
+    document.querySelector(`#${parentID} #fileName`).click();
+  };
+  handleOk = (ev) => {
+    const id = ev.target.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") {
+      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") {
+      this.deleteLanguage();
+      this.props.handleCancelModal();
+      // this.setState({currentEvent: {}, currentEventData: {}});
+    } else if (id === 'email-version-delete-modal') {
+      this.deleteVersion(false, this.state.currentTab);
+    } else if ( id === 'template-delete-confirm-modal') {
+      this.props.handleDelete(this.props.modal);
+    }
+  };
+  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 = () => {
+    this.setState({showModal: true});
+  };
+
+  handleSetRadioValue = (formData, currentTab, val) => {
+    if (formData[currentTab - 1] && formData[currentTab - 1][val.id] && formData[currentTab - 1][val.id] !== "") {
+      return formData[currentTab - 1][val.id];
+    } else if (formData[val.id]) {
+      return formData[val.id];
+    }
+    return val.value;
+  }
+  uploadImages = (e, {files}, val) => {
+    e.preventDefault();
+    const _URL = window.URL || window.webkitURL;
+    const file = files[0];
+    if (val.supportedExtensions) {
+      const allowedExtensions = /(\.bmp|\.jpeg|\.png|\.gif|\.jpg)$/i;
+      if (!allowedExtensions.exec(file.name)) {
+        this.callChildEvent({file, type: 'wrong file'}, val, val.submitAction);
+      }
+    }
+    const img = new Image();
+    img.src = _URL.createObjectURL(file);
+    img.onload = () => {
+      const fileParams = {
+        width: this.width,
+        height: this.height,
+        error: file.size / (1e+6) > 3,
+      };
+      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;
+      }
+    }
+
+    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) => {
+      //
+      const temp = {};
+      temp.id = template._id;
+      if (this.props.schema.channel.toLowerCase() === 'email') {
+        //
+        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="" />;
+
+        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;
+      }
+      //
+      columns.push(
+        <CapColumn key="label" span={4}>
+          <Label style={val.labelStyle ? val.labelStyle : {}}>{val.label}</Label>
+        </CapColumn>
+      );
+      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(
+          <CapColumn key={val.id} span={val.width}>
+            {this.renderPrimitiveElement(val, childIndex)}
+          </CapColumn>
+        );
+        return true;
+      }
+      let content = "";
+      let charList = {};
+      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]);
+            const value = isVersionEnable ? this.state.formData[`${this.state.currentTab - 1}`][val.id] : this.state.formData[val.id];
+            columns.push(
+              <CapColumn key={val.id} span={val.width} offset={val.offset}>
+                <CapInput
+                  id={val.id}
+                  errorMessage={val.errorMessage && ifError ? 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={value || ""}
+                  disabled={val.disabled}
+                />
+              </CapColumn>
+            );
+          }
+          break;
+        case "SmsEditor":
+          columns.push(
+            <CapColumn span={5} key="input">
+              <SmsEditor
+                id={val.id}
+                content={this.state.formData[val.id]}
+                onDataChange={(data) => this.updateFormData(data.value, val)}
+              />
+            </CapColumn>
+          );
+          break;
+        case "textarea":
+          ifError = this.state.checkValidation && (isVersionEnable ? this.state.errorData[`${this.state.currentTab - 1}`][val.id] : this.state.errorData[val.id]);
+          const value = isVersionEnable ? this.state.formData[`${this.state.currentTab - 1}`][val.id] : this.state.formData[val.id];
+          if (styling === 'semantic') {
+            columns.push(
+              <CapColumn key="input" span={val.width}>
+                <TextArea
+                  id={val.id}
+                  className={`${ifError ? 'error' : ''}`}
+                  errorMessage={val.errorMessage && ifError ? val.errorMessage : ''}
+                  label={val.label}
+                  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={value || ""}
+                  rows={20}
+                  disabled={val.disabled}
+                  cols={20}
+                />
+              </CapColumn>
+            );
+          }
+          break;
+        case "contentPreview":
+          content = isVersionEnable ? this.state.formData[this.state.currentTab - 1]['sms-editor'] : this.state.formData['sms-editor'];
+          charList = updateCharCount(content).char_list;
+          columns.push(<CapColumn id={val.id} className={"preview-chars"} span={val.width}>
+            {charList.map((char) => char)}
+          </CapColumn>);
+          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(
+              <CapColumn key="input" span={val.width} offset={val.offset}>
+                <CapCheckbox
+                  className={`${ifError ? 'error' : ''}`}
+                  errorMessage={val.errorMessage && ifError ? 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}
+                />
+              </CapColumn>
+            );
+          }
+          break;
+        case "tag-list":
+          columns.push(
+            <CapColumn 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}
+              />
+            </CapColumn>
+          );
+          break;
+        case "tabs":
+          columns.push(
+            <CapColumn key="input" span={10}>
+              <TagList
+                onTagSelect={(data) => this.callChildEvent(data, val, 'onTagSelect')}
+              />
+            </CapColumn>
+          );
+          break;
+        case "sms-preview": {
+          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(
+            <CapColumn key="input" span={10}>
+              <TemplatePreview
+                channel={val.channel ? val.channel : 'SMS'}
+                content={content}
+                charCounterEnabled={val.charCounterEnabled}
+                unicodeEnabled={unicodeEnabled}
+              >
+              </TemplatePreview>
+            </CapColumn>
+          );
+          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(
+            <CapColumn 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}
+              />
+            </CapColumn>
+          );
+        }
+          break;
+        case "ckeditor":
+
+          columns.push(
+            <CapColumn 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')}
+              />
+            </CapColumn>
+          );
+          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`];
+
+          if (!edmSrc) {
+            return false;
+          }
+
+          columns.push(
+            <CapColumn style={val.colStyle ? val.colStyle : {}} span={val.width}>
+              <EDMEditor
+                id={val.id}
+                getEditorInstanse={this.getEditorInstanse}
+                edmSrc={edmSrc}
+              />
+            </CapColumn>
+          );
+        }
+          break;
+        default:
+          break;
+      }
+      row.push(
+        <CapRow>
+          {
+            _.forEach(columns, (value) => {
+              if (value) {
+                return value;
+              }
+              return value;
+            })
+          }
+        </CapRow>
+      );
+
+      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(
+              <CapColumn>
+                <CapButton
+                  onClick={(data) => this.callChildEvent(data, val, val.submitAction)}>
+                  {val.value}
+                </CapButton>
+              </CapColumn>
+            );
+          }
+          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(<CapColumn style={childSection.colStyle ? childSection.colStyle : {}}offset={childSection.offset} span={childSection.width}>{renderedChildSection}</CapColumn>);
+      return true;
+    });
+    const row = (<CapRow style={section.rowStyle ? section.rowStyle : {}}>
+      {
+        _.forEach(cols, (value) => {
+          if (value) {
+            return value;
+          }
+          return value;
+        })
+      }
+    </CapRow>);
+    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}`;
+    const 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":
+        let children = _.get(this.state, `formData[${this.state.currentTab - 1}][${val.id}]`) || value;
+        if (_.isEmpty(value) && !_.isEmpty(val.value)) {
+          children = val.value;
+        }
+        const ref = _.get(this, `props.refs[${val.id}]`);
+        return (<div
+          ref={ref}
+          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'); }}
+        >{children}</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 (!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;
+        }
+
+        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(
+            <CapColumn style={val.colStyle ? val.colStyle : {}} offset={val.offset} key={val.id} span={val.width}>
+              {this.renderPrimitiveElement(val, childIndex)}
+            </CapColumn>
+          );
+          return true;
+        }
+
+        switch (type) {
+          case "input":
+            ifError = this.state.checkValidation && (isVersionEnable ? this.state.errorData[`${this.state.currentTab - 1}`][val.id] : this.state.errorData[val.id]);
+            const value = isVersionEnable ? this.state.formData[`${this.state.currentTab - 1}`][val.id] : this.state.formData[val.id];
+            if (styling === 'semantic') {
+              columns.push(
+                <CapColumn key={val.id} span={val.width} offset={val.offset}>
+                  <CapInput
+                    id={val.id}
+                    errorMessage={val.errorMessage && ifError ? val.errorMessage : ''}
+                    label={val.label}
+                    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={value || ""}
+                    defaultValue={isVersionEnable ? this.state.formData[`${this.state.currentTab - 1}`][val.id] : this.state.formData[val.id]}
+                    disabled={val.disabled}
+                  />
+                </CapColumn>
+              );
+            }
+            break;
+          case "SmsEditor":
+            columns.push(
+              <CapColumn span={5} key="input">
+                <SmsEditor
+                  id={val.id}
+                  content={this.state.formData[val.id]}
+                  onDataChange={(data) => this.updateFormData(data.value, val)}
+                />
+              </CapColumn>
+            );
+            break;
+          case "textarea":
+            ifError = this.state.checkValidation && (isVersionEnable ? this.state.errorData[`${this.state.currentTab - 1}`][val.id] : this.state.errorData[val.id]);
+            const textValue = isVersionEnable ? this.state.formData[`${this.state.currentTab - 1}`][val.id] : this.state.formData[val.id];
+            if (styling === 'semantic') {
+              columns.push(
+                <CapColumn key="input" span={val.width} offset={val.offset}>
+                  <TextArea
+                    id={val.id}
+                    placeholder={val.placeholder ? val.placeholder : ''}
+                    disabled={val.disabled}
+                    className={`${ifError ? 'error' : ''}`}
+                    errorMessage={val.errorMessage && ifError ? val.errorMessage : ''}
+                    label={val.label}
+                    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={textValue || ""}
+                    rows={10}
+                    cols={2}
+                  />
+                </CapColumn>
+              );
+            }
+            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(
+                <CapColumn key="input" span={val.width} offset={val.offset}>
+                  <CapCheckbox
+                    key={val.id}
+                    className={`${ifError ? 'error' : ''}`}
+                    errorMessage={val.errorMessage && ifError ? val.errorMessage : ''}
+                    onChange={(e) => this.updateFormData(e.target.checked, val, val.submitAction)}
+                    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}
+                    inductiveText={val.inductiveText}
+                  >
+                    {val.label}
+                  </CapCheckbox>
+                </CapColumn>
+              );
+            }
+            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(
+                <CapColumn key={`input-${val.id}`} span={val.width} offset={val.offset}>
+                  <CapRadio
+                    className={`${ifError ? 'error' : ''}`}
+                    errorMessage={val.errorMessage && ifError ? 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>
+                </CapColumn>
+              );
+            }
+            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(
+                <CapColumn key={`input-${val.id}`} span={val.width} offset={val.offset}>
+                  <CapRadioGroup
+                    key={`${val.id}-radio-group`}
+                    className={`form-builder-radio-group ${ifError ? 'error' : ''}`}
+                    errorMessage={val.errorMessage && ifError ? val.errorMessage : ''}
+                    onChange={(e) => this.updateFormData(e.target.value, val)}
+                    style={val.style ? val.style : {}}
+                    value={this.handleSetRadioValue(this.state.formData, self.state.currentTab, val)}
+                    name={val.name ? val.name : `${val.id}-name`}
+                    disabled={val.disabled}
+                  >
+                    {val.options.map((option, index) => <CapRadio value={option} inductiveText={val.inductiveText && val.inductiveText[index]}>{option}</CapRadio>) }
+
+                  </CapRadioGroup>
+                  {/*{ifError ?*/}
+                  {/*<div className="error"> {val.errorMessage}</div>*/}
+                  {/*:*/}
+                  {/*""*/}
+                  {/*}*/}
+                </CapColumn>
+              );
+            }
+            break;
+          case 'image':
+            ifError = this.state.checkValidation && (isVersionEnable ? this.state.errorData[`${this.state.currentTab - 1}`][val.id] : this.state.errorData[val.id]);
+            columns.push(
+              <CapColumn 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>
+              </CapColumn>
+            );
+            break;
+          case 'upload':
+            ifError = (this.state.checkValidation || this.props.startValidation) && (isVersionEnable ? this.state.errorData[`${this.state.currentTab - 1}`][val.id] : this.state.errorData[val.id]);
+            const ImageComponent = (props) => (
+              <div key={`${val.id}-${this.state.currentTab}`}>
+                <div className={`image-container ${props.ifError ? 'error' : ''}`}>
+                  {self.state && !!self.state.formData[`${self.state.currentTab - 1}`].image ?
+                    <img src={self.state.formData[`${self.state.currentTab - 1}`].image} alt={props.alt} style={props.style}/>
+                    :
+                    <div style={{width: "100%", textAlign: "center"}}><span className="image-placeholder">{props.placeholder}</span></div>
+                  }
+                </div>
+              </div>
+             );
+            const WithLabel = LabelHOC(ImageComponent);
+            const {errorMessage, ...rest} = val.previewProps || {};
+            columns.push(
+              <CapColumn span={val.width} offset={val.offset} style={val.style}>
+                {val.showPreview && <WithLabel key={`${val.id}-with-label`} {...rest} errorMessage={ifError && errorMessage} ifError={ifError}/>}
+                <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={val.supportedExtensions ? val.supportedExtensions : "image/*"} />
+                  <CapButton disabled={val.disabled ? val.disabled : false} type="secondary" onClick={(e) => this.openFileDialog(e, val.id)} style={{float: 'right'}}>
+                    {val.label}
+                  </CapButton>
+                </form>
+              </CapColumn>
+              );
+            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(
+              <CapColumn 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}
+                />
+              </CapColumn>
+            );
+            break;
+          case "button":
+            if (styling === 'semantic' && val.metaType === 'submit-button') {
+              columns.push(
+                <CapColumn 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) => this.callChildEvent(data, val, val.submitAction)}>
+                    {val.value}
+                  </CapButton>
+                </CapColumn>
+              );
+            }
+            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(
+              <CapColumn 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>
+              </CapColumn>
+            );
+          }
+            break;
+          case "line-preview": {
+            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;
+            }
+
+            columns.push(
+              <CapColumn key="input" span={23} offset={1}>
+                <TemplatePreview
+                  key={val.id}
+                  style={val.customStyling ? val.customStyling : {}}
+                  channel={val.channel}
+                  content={content}
+                >
+                </TemplatePreview>
+              </CapColumn>
+            );
+          }
+            break;
+          case "mobile-push-preview":
+            if (!this.state.formData[`${this.state.currentTab - 1}`]) {
+              return true;
+            }
+            columns.push(
+              <CapColumn 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>
+              </CapColumn>
+            );
+            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(
+              <CapColumn 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>
+              </CapColumn>
+            );
+            break;
+
+          case "icon":
+            if (val.id === "base-version-icon") {
+              const baseTab = this.findBaseTab();
+              if ((baseTab + 1) !== childIndex) {
+                return true;
+              }
+            }
+            columns.push(
+              <CapColumn
+                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>
+              </CapColumn>
+            );
+            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(
+              <CapColumn style={val.colStyle ? val.colStyle : {}} span={val.width} offset={val.offset}>
+                <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>
+                }
+              </CapColumn>
+            );
+          }
+            break;
+          case "ckeditor": {
+            if (this.props.schema && this.props.schema.channel && this.props.schema.channel.toLowerCase() === 'wechat' ) {
+              const content = !_.isEmpty(this.state.formData) && this.state.formData['content-value'] ? this.state.formData['content-value'] : '';
+              columns.push(
+                <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')}
+                  channel="wechat"
+                  onFocusOut={(event) => this.callChildEvent(event, val, 'onFocusOut')}
+                  onFocusIn={(event) => this.callChildEvent(event, val, 'onFocusIn')}
+              /> );
+            } else {
+              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(
+                <CapColumn 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')}
+                  />
+                </CapColumn>
+              );
+            }
+          }
+            break;
+          case "edmeditor": {
+            // if (!this.state.formData[`${this.state.currentTab - 1}`]) {
+            //   return true;
+            // }
+            let langTab = 1;
+            if (val.id.match(/edmeditor/g)) {
+              if (val.id.length > 9 && val.id.charAt(9)) {
+                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`];
+
+
+            if (!edmSrc) {
+              return false;
+            }
+
+
+            columns.push(
+              <CapColumn style={val.colStyle ? val.colStyle : {}} span={val.width}>
+                <EDMEditor
+                  id={val.id}
+                  getEditorInstanse={this.getEditorInstanse}
+                  edmSrc={edmSrc}
+                />
+              </CapColumn>
+            );
+          }
+            break;
+          case "customPopover": {
+            if (!this.state.formData[`${this.state.currentTab - 1}`]) {
+              return true;
+            }
+            columns.push(
+              <CapColumn 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}
+                />
+              </CapColumn>
+            );
+          }
+            break;
+          default:
+            break;
+        }
+        return true;
+      });
+      const row = (
+        <CapRow style={field.rowStyle ? field.rowStyle : {}} className={field.rowClassName ? field.rowClassName : ''}>
+          {
+            _.forEach(columns, (value) => {
+              if (value) {
+                return value;
+              }
+              return value;
+            })
+          }
+        </CapRow>
+      );
+      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(
+                <CapColumn 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>
+                </CapColumn>
+              );
+            }
+            break;
+          default:
+            break;
+        }
+      });
+      const row = (
+        <CapRow>
+          {
+            _.forEach(columns, (value) => {
+              if (value) {
+                return value;
+              }
+              return value;
+            })
+          }
+        </CapRow>
+      );
+      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;
+          });
+
+          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;
+          }
+          const isPaneSupported = typeof pane.isSupported === "boolean" ? pane.isSupported : true; // pane.isSupported field exists only in mpush schema, in other channels it is not
+          if (isPaneSupported) {
+            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
+            className={`cap-tabs-${container.id}`}
+            activeKey={activeTabKey && activeTabKey !== '' ? `${activeTabKey}` : '1'}
+            defaultActiveKey={activeTabKey && activeTabKey !== '' ? `${activeTabKey}` : '1'}
+            onChange={(data, e) => { this.callChildEvent(data, container, 'onTabChange', e); }}
+            onEdit={(data, e) => this.onEdit(data, e)}
+            style={{width: '100%'}}
+            tabBarExtraContent={
+              !_.isEmpty(extraActionSections) && _.forEach(extraActionSections, (value) => {
+                if (value) {
+                  return value;
+                }
+                return value;
+              })
+            }>
+            {
+            _.forEach(renderedPanes, (value) => {
+              if (value) {
+                return value;
+              }
+              return value;
+            })
+            }
+          </Tabs>
+        );
+
+      default:
+        break;
+    }
+    return null;
+  }
+
+  renderForm() {
+    const schema = this.props.schema;
+    const allElements = [];
+    let renderedStandAloneSections;
+    let renderedContainers;
+    if (schema.standalone) {
+      const sections = schema.standalone.sections;
+      renderedStandAloneSections = sections.map((section) => {
+        const result = this.renderSection(section);
+        return result;
+      });
+      allElements.push(renderedStandAloneSections);
+    }
+    if (schema.containers) {
+      renderedContainers = schema.containers.map((container) => {
+        if (container.isActive === undefined || (container.isActive)) {
+          const result = this.renderContainer(container);
+          return result;
+        }
+        return null;
+      });
+
+      allElements.push(renderedContainers);
+    }
+    const modal = this.getModal();
+    allElements.push(modal);
+    return allElements;
+  }
+
+  render() {
+    const cmsTemplateSelectionContent = (
+      <CardGrid
+        className={""}
+        listItem={this.populateTemplatesList(this.props.cmsTemplates)}
+        // filterContent={filterContent}
+        onHoverItem={this.handleOnHoverItem}
+        onItemClick={this.props.handleEdmDefaultTemplateSelection}
+        colNumber={2}
+      >
+      </CardGrid>
+    );
+
+
+    return (
+      <CapRow>
+        {
+          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}
+        />
+      </CapRow>
+    );
+  }
+}
+
+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,
+  handleDelete: PropTypes.func,
+};
+
+export default FormBuilder;