@capillarytech/creatives-library 9.0.13-alpha.0 → 9.0.13-alpha.1

package/v2Components/FormBuilder/index.js

@@ -1,48 +1,4486 @@
+/* eslint-disable no-case-declarations */
+
 /**
- *
- * FormBuilder — entry point / implementation gate
- *
- * Routes between the legacy class implementation (./Classic — the original
- * monolith, frozen) and the new functional implementation (./Functional)
- * based on the per-channel, per-org feature flag.
- *
- * Phase 1 migrates SMS only, behind `ENABLE_NEW_FORMBUILDER_SMS`. The new path
- * is taken ONLY when (a) the org has that flag AND (b) this FormBuilder instance
- * is rendering the SMS channel. Every other channel — and every org without the
- * flag — keeps using Classic with byte-identical behavior. The flag defaults
- * OFF, so until rollout this gate always renders Classic.
- *
- * This component is a pure pass-through: no defaultProps, no prop mapping, no
- * state beyond the one-time flag read. Both implementations own the full legacy
- * prop contract (schema, formData, onChange, onSubmit, onFormValidityChange, …).
- *
- */
-
-import React, { useState } from 'react';
-import ClassicFormBuilder from './Classic';
-import FunctionalFormBuilder from './Functional';
-import { hasNewFormBuilderEnabledForSms } from '../../utils/common';
-import { SMS } from '../../v2Containers/CreativesContainer/constants';
-
-const FormBuilder = (props) => {
-  // The try/catch guards the early bootstrap / test case where window.capAuth is not yet initialized — any failure routes safely to Classic.
-  const [isSmsNewBuilderOrg] = useState(() => {
-    try {
-      console.log('### ENABLE_NEW_FORMBUILDER_SMS enabled for org:', hasNewFormBuilderEnabledForSms());
-      return Boolean(hasNewFormBuilderEnabledForSms());
-    } catch (e) {
+*
+* FormBuilder
+*
+*/
+
+import PropTypes from 'prop-types';
+
+import React from 'react';
+import _ from 'lodash';
+import { Table, Modal} from 'antd';
+import { connect } from 'react-redux';
+import CapSpin from '@capillarytech/cap-ui-library/CapSpin';
+import CapDrawer from '@capillarytech/cap-ui-library/CapDrawer';
+import CapButton from '@capillarytech/cap-ui-library/CapButton';
+import CapInput from '@capillarytech/cap-ui-library/CapInput';
+import CapPopover from '@capillarytech/cap-ui-library/CapPopover';
+import CapImage from '@capillarytech/cap-ui-library/CapImage';
+import CapCheckbox from '@capillarytech/cap-ui-library/CapCheckbox';
+import CapRadio from '@capillarytech/cap-ui-library/CapRadio';
+import CapSelect from '@capillarytech/cap-ui-library/CapSelect';
+import CapTable from '@capillarytech/cap-ui-library/CapTable';
+import CapRow from '@capillarytech/cap-ui-library/CapRow';
+import CapColumn from '@capillarytech/cap-ui-library/CapColumn';
+import CapTab from '@capillarytech/cap-ui-library/CapTab';
+import CapNotification from '@capillarytech/cap-ui-library/CapNotification';
+import CapUploader from '@capillarytech/cap-ui-library/CapUploader';
+import CapHeading from '@capillarytech/cap-ui-library/CapHeading';
+import CapIcon from '@capillarytech/cap-ui-library/CapIcon';
+import CapTooltip from '@capillarytech/cap-ui-library/CapTooltip';
+import CapAskAira from '@capillarytech/cap-ui-library/CapAskAira';
+
+import { injectIntl, intlShape, FormattedMessage } from 'react-intl';
+import LabelHOC from '@capillarytech/cap-ui-library/assets/HOCs/ComponentWithLabelHOC';
+import { createStructuredSelector } from 'reselect';
+import { CAP_SPACE_12, CAP_SPACE_08, FONT_COLOR_05, FONT_COLOR_04 } from '@capillarytech/cap-ui-library/styled/variables';
+import UnifiedPreview from '../CommonTestAndPreview/UnifiedPreview';
+import { ANDROID } from '../CommonTestAndPreview/constants';
+import TagList from '../../v2Containers/TagList';
+import CapTagListWithInput from '../CapTagListWithInput';
+import SlideBox from '../SlideBox';
+import CardGrid from '../CardGrid';
+import CKEditor from "../Ckeditor/";
+import EDMEditor from "../Edmeditor";
+import BeeEditor from '../../v2Containers/BeeEditor';
+import CustomPopOver from '../CustomPopOver';
+import messages from './messages';
+import { makeSelectMetaEntities, selectCurrentOrgDetails, selectLiquidStateDetails, selectMetaDataStatus } from "../../v2Containers/Cap/selectors";
+import * as actions from "../../v2Containers/Cap/actions";
+import './_formBuilder.scss';
+import {updateCharCount, checkUnicode} from "../../utils/smsCharCountV2";
+import { preprocessHtml, validateTagsCore, hasUnsubscribeTag } from '../../utils/tagValidations';
+import { containsBase64Images } from '../../utils/content';
+import { SMS, MOBILE_PUSH, LINE, ENABLE_AI_SUGGESTIONS, EMAIL, LIQUID_SUPPORTED_CHANNELS, INAPP } from '../../v2Containers/CreativesContainer/constants';
+import globalMessages from '../../v2Containers/Cap/messages';
+import { convert } from 'html-to-text';
+import { OUTBOUND, ADD_LANGUAGE, UPLOAD, USE_EDITOR, COPY_PRIMARY_LANGUAGE, GLOBAL_CONVERT_OPTIONS } from './constants';
+import { GET_TRANSLATION_MAPPED } from '../../constants/unified';
+import moment from 'moment';
+import { CUSTOMER_BARCODE_TAG , COPY_OF, ENTRY_TRIGGER_TAG_REGEX, SKIP_TAGS_REGEX_GROUPS} from '../../constants/unified';
+import { REQUEST } from '../../v2Containers/Cap/constants'
+import { isEmailUnsubscribeTagOptional, isAiContentBotDisabled } from '../../utils/common';
+import { isUrl } from '../../v2Containers/Line/Container/Wrapper/utils';
+import { bindActionCreators } from 'redux';
+import { getChannelData, hasPersonalizationTags, validateLiquidTemplateContent, validateMobilePushContent } from '../../utils/commonUtils';
+const {Column} = Table;
+const {TextArea} = CapInput;
+const {CapRadioGroup} = CapRadio;
+// import styled from 'styled-components';
+
+const tagsTypes = {
+  MISSING_TAGS: 'missingTags',
+};
+const errorMessageForTags = {
+  MISSING_TAG_ERROR: 'missingTagsError',
+  GENERIC_VALIDATION_ERROR: 'genericValidationError',
+  TAG_BRACKET_COUNT_MISMATCH_ERROR: 'tagBracketCountMismatchError'
+};
+
+// Isolated input for EMAIL template-name: only this tiny component re-renders on each keystroke.
+// formData is updated only on blur (onCommit), eliminating all re-renders during typing.
+class HighFreqInput extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = { localValue: props.value || '' };
+  }
+
+  componentDidUpdate(prevProps) {
+    if (prevProps.value !== this.props.value && this.state.localValue !== this.props.value) {
+      this.setState({ localValue: this.props.value || '' });
+    }
+  }
+
+  handleChange = (e) => {
+    this.setState({ localValue: e.target.value });
+  };
+
+  handleBlur = (e) => {
+    this.props.onCommit(this.state.localValue);
+    if (this.props.onBlur) this.props.onBlur(e);
+  };
+
+  render() {
+    const { value: _v, onCommit: _oc, onBlur: _ob, ...rest } = this.props;
+    return <CapInput {...rest} value={this.state.localValue} onChange={this.handleChange} onBlur={this.handleBlur} />;
+  }
+}
+
+// Isolated wrapper for EMAIL template-subject: blur-only commit, same as HighFreqInput.
+class HighFreqTagInput extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = { localInputValue: props.inputValue || '' };
+  }
+
+  componentDidUpdate(prevProps) {
+    if (prevProps.inputValue !== this.props.inputValue && this.state.localInputValue !== this.props.inputValue) {
+      this.setState({ localInputValue: this.props.inputValue || '' });
+    }
+  }
+
+  handleInputChange = (e) => {
+    this.setState({ localInputValue: e.target.value });
+  };
+
+  handleBlur = () => {
+    this.props.onCommit(this.state.localInputValue);
+  };
+
+  render() {
+    const { inputValue: _iv, onCommit: _oc, inputOnChange: _ic, ...rest } = this.props;
+    return (
+      <CapTagListWithInput
+        {...rest}
+        inputValue={this.state.localInputValue}
+        inputOnChange={this.handleInputChange}
+        inputProps={{ ...(this.props.inputProps || {}), onBlur: this.handleBlur }}
+      />
+    );
+  }
+}
+
+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,
+      isDrawerVisible: false,
+      translationLang: 'en',
+      liquidErrorMessage: {
+        STANDARD_ERROR_MSG: [],
+        LIQUID_ERROR_MSG: [],
+      },
+    };
+    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 = [];
+    // Check if the liquid flow feature is supported and the channel is in the supported list.
+    this.isLiquidFlowSupportedByChannel = this.isLiquidFlowSupportedByChannel.bind(this);
+    this.onSubmitWrapper = this.onSubmitWrapper.bind(this);
+    
+    // Performance optimization: Debounced functions for high-frequency updates
+    this.debouncedUpdateFormData = _.debounce((data, val, event, skipStateUpdate) => {
+      this.performFormDataUpdate(data, val, event, skipStateUpdate);
+    }, 300);
+    this.debouncedValidation = _.debounce(this.validateForm.bind(this), 500);
+  
+  // Memoized validation cache
+  this.validationCache = new Map();
+
+  }
+  
+  // Helper function to generate unique tab ID
+  generateUniqueTabId(formData, tabIndex) {
+    let id = _.uniqueId();
+    let validId = false;
+    
+    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;
+          break;
+        }
+      }
+      if (!validId) {
+        id = _.uniqueId();
+      }
+    }
+    
+    return id;
+  }
+
+  // Performance optimized form data update function
+  performFormDataUpdate(data, val, event, skipStateUpdate = false) {
+    
+    // Use optimized state update instead of deep cloning
+    const formData = this.optimizedFormDataUpdate(data, val, event);
+    
+    const tabIndex = this.state.currentTab - 1;
+    let currentTab = this.state.currentTab;
+
+    if (this.state.usingTabContainer && !val.standalone) {
+      const data1 = data;
+      if (event === ADD_LANGUAGE) {
+        const addLanguageType = this.props.addLanguageType;
+        if (addLanguageType === '') {
+          return;
+        }
+        const currentLang = formData[tabIndex].activeTab;
+        let baseTab;
+        
+        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;
+            baseTab.tabKey = this.generateUniqueTabId(formData, tabIndex);
+            
+            formData[tabIndex][data.iso_code] = baseTab;
+            formData[tabIndex].activeTab = data.iso_code;
+            formData[tabIndex].tabKey = baseTab.tabKey;
+            break;
+          case COPY_PRIMARY_LANGUAGE:
+          case USE_EDITOR:
+            baseTab = _.cloneDeep(formData[tabIndex][this.props.baseLanguage]);
+
+            baseTab.iso_code = data.iso_code;
+            baseTab.lang_id = data.lang_id;
+            baseTab.language = data.language;
+            baseTab.tabKey = this.generateUniqueTabId(formData, tabIndex);
+            
+            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 !== ADD_LANGUAGE && 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') {
+        // Content change handling
+      }
+    }
+
+    // Only update state if not already updated (for immediate UI feedback)
+    if (!skipStateUpdate) {
+      this.setState({formData}, () => {
+        if (this.props.startValidation) {
+          this.debouncedValidation();
+        }
+      });
+    } else {
+      // Just trigger validation if state was already updated
+      if (this.props.startValidation) {
+        this.debouncedValidation();
+      }
+    }
+    
+    if (event && val.injectedEvents[event]) {
+      if (event === "onRowClick") {
+        val.injectedEvents[event].call(this, data);
+      } else if (this.props.isNewVersionFlow && event !== 'onSelect') {
+        if (event === ADD_LANGUAGE) {
+          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);
+    }
+  }
+
+  // Optimized form data update - only clone what's necessary
+  optimizedFormDataUpdate(data, val, event) {
+    const currentFormData = this.state.formData;
+    
+    // For simple field updates, use spread operator instead of deep clone
+    if (!this.state.usingTabContainer || val.standalone) {
+      return {
+        ...currentFormData,
+        [val.id]: data
+      };
+    }
+    
+    // For tab container updates, only clone the affected tab
+    const tabIndex = this.state.currentTab - 1;
+    const updatedFormData = { ...currentFormData };
+    
+    if (updatedFormData[tabIndex]) {
+      updatedFormData[tabIndex] = {
+        ...updatedFormData[tabIndex],
+        [val.id]: data
+      };
+    }
+    
+    return updatedFormData;
+  }
+
+  isLiquidFlowSupportedByChannel = () => {
+    return Boolean(LIQUID_SUPPORTED_CHANNELS.includes(this.props?.schema?.channel?.toUpperCase()));
+  }
+
+  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) {
+      if (this.debouncedUpdateFormData) this.debouncedUpdateFormData.flush();
+      this.setState({checkValidation: true});
+      this.validateForm(null, null, true, true, () => {
+        //triggering the saveFormData or onSubmit when validation sets isFormValid to TRUE
+        if (this.state.isFormValid) {
+          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});
+        }
+      }
+      //In Context of MPUSH currentTab represents whether its Android or IOS tab , 1 for Android and 2 for IOS
+      if (nextProps.currentTab && _.get(this.props, 'schema.channel') === MOBILE_PUSH) {
+        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)) {
+      // Don't run validation if we're in Test & Preview mode
+      if (!nextProps.isTestAndPreviewMode) {
+        this.setState({formData: nextProps.formData, tabKey: nextProps.tabKey}, () => {
+          this.validateForm();
+        });
+      } else {
+        // Just update formData without validation
+        this.setState({formData: nextProps.formData, tabKey: nextProps.tabKey});
+      }
+      //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 && this.props.schema.channel.toUpperCase() === 'EMAIL')) {
+          // Don't run validation if we're in Test & Preview mode
+          if (!nextProps.isTestAndPreviewMode) {
+            this.validateForm();
+          }
+        }
+        if ((this.props.schema && this.props.schema.channel && this.props.schema.channel.toUpperCase() === 'MOBILEPUSH')) {
+          // Don't run validation if we're in Test & Preview mode
+          if (!nextProps.isTestAndPreviewMode) {
+            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);
+          // Don't run validation if we're in Test & Preview mode
+          if (!nextProps.isTestAndPreviewMode) {
+            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)) {
+      // Don't run validation if we're in Test & Preview mode
+      if (!nextProps.isTestAndPreviewMode) {
+        this.validateForm(nextProps.tags, nextProps.injectedTags);
+      }
+    }
+    if (!_.isEmpty(nextProps.tags) && !_.isEqual(nextProps.tags, this.props.tags)) {
+      // Don't run validation if we're in Test & Preview mode
+      if (!nextProps.isTestAndPreviewMode) {
+        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});
+    }
+    if (nextProps.isDrawerRequired !== this.props.isDrawerRequired) {
+      this.setState({
+        isDrawerVisible: nextProps.isDrawerRequired,
+      });
+    }
+  }
+
+  onEdit() {
+
+  }
+  getModal = () => {
+    let modal;
+    if (this.state.modal) {
+      if (this.state.modal.type === 'confirm') {
+        modal = (<Modal
+          open={this.state.showModal}
+          title={this.state.modal.title}
+          onOk={this.handleOk}
+          onCancel={this.handleCancel}
+          footer={[
+            <CapButton key="back" onClick={this.handleCancel}><FormattedMessage {...messages.cancel} /></CapButton>,
+            <CapButton key="submit" type="primary" id={this.state.modal.id} onClick={this.handleOk}>
+              <FormattedMessage {...messages.yes} />
+            </CapButton>,
+          ]}
+        >
+          {this.state.modal.body}
+        </Modal>);
+      } else if (this.state.modal.type === "info") {
+        modal = (<Modal
+          open={this.state.showModal}
+          title={this.state.modal.title}
+          onOk={this.handleOk}
+          onCancel={this.handleCancel}
+          footer={[
+            <CapButton key="back" onClick={this.handleCancel}><FormattedMessage {...messages.ok} /></CapButton>,
+          ]}
+        >
+          {this.state.modal.body}
+        </Modal>);
+      } else if (this.state.modal.type === "action") {
+        modal = (<Modal
+          open={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 ADD_LANGUAGE:
+          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;
+  }
+  errorFieldsPresent(errorData, channel) {
+    const formData = _.cloneDeep(this.state.formData);
+    let isPresent = true;
+    if (channel === SMS) {
+      const formDataKeys = Object.keys(formData[0]);
+      const errorDataKeys = Object.keys(errorData[0]);
+      isPresent = _.isEqualWith(formDataKeys, errorDataKeys, (formDataKey, errorDataKey) => formDataKeys.includes(errorDataKey));
+    }
+    return isPresent;
+  }
+  /* eslint-disable */
+  validateForm(tags, injectedTags, isSave, showMessages, onValidationComplete) {
+    const channel = _.get(this, "props.schema.channel");
+    let isValid = true;
+    let isLiquidValid = 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';
+    let errorData = _.cloneDeep(this.state.errorData);
+    if (channel && channel.toUpperCase() === SMS) {
+      for (let count = 0; count < this.state.tabCount; count += 1) {
+        if (_.isEmpty(errorData[count])) {
+          // Do not return early. An empty tab object can appear transiently and returning here
+          // prevents onFormValidityChange from firing, which makes Done appear unresponsive.
+          errorData[count] = {};
+        }
+        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, false, this.props?.isFullMode);
+        }
+
+        const tagResult = tagValidationResponse && typeof tagValidationResponse === 'object'
+          ? tagValidationResponse
+          : { valid: false, missingTags: [], isBraceError: false };
+        if (tagResult.valid) {
+          errorData[count][`sms-editor${index > 1 ? index : ''}`] = false;
+        } else {
+          const { MISSING_TAG_ERROR, GENERIC_VALIDATION_ERROR, TAG_BRACKET_COUNT_MISMATCH_ERROR } = errorMessageForTags || {};
+          const { missingTags, isBraceError } = tagResult;
+          errorData[count][`sms-editor${index > 1 ? index : ''}`] = missingTags && missingTags.length ? MISSING_TAG_ERROR : (isBraceError ? TAG_BRACKET_COUNT_MISMATCH_ERROR : GENERIC_VALIDATION_ERROR);
+          errorData[count][`bracket-error`] = isBraceError && TAG_BRACKET_COUNT_MISMATCH_ERROR;
+          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 : ''}`] = errorMessageForTags.GENERIC_VALIDATION_ERROR;
+          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;
+      }
+      isLiquidValid = isValid;
+    }
+
+    //validation for LINE
+    if (channel === LINE) {
+      
+      if (this.state.formData['message-editor'] !== undefined ) {
+        const content = this.state.formData['0']['message-editor'] || '';
+        
+        const tagValidationResponse = this.validateTags((content), tags, false, this.props?.isFullMode);
+        
+        if (tagValidationResponse.valid) {
+          errorData = {
+            ...errorData,
+            0: {
+              ...errorData[0],
+              'message-editor': false,
+            }
+          };
+        } else {
+          errorData = {
+            ...errorData,
+            0: {
+              ...errorData[0],
+              'message-editor': true,
+            }
+          };
+          isValid = false;
+        }
+        if (content.trim() === '') {
+          errorData = {
+            ...errorData,
+            0: {
+              ...errorData[0],
+              'message-editor': true,
+            }
+          };
+          isValid = false;
+        }
+      }
+
+      if (this.state.formData['image-upload-line'] !== undefined) {
+        const {
+          formData: {
+            0: {
+              image,
+              imagePreview,
+            }
+          }
+        } = this.state;
+        const imgContentLength = image ? image.length : 0;
+        const imgContentLengthPreview = imagePreview ? imagePreview.length : 0;
+        if ( (imgContentLength < 1) && (imgContentLengthPreview < 1) ) {
+          
+          errorData = {
+            ...errorData,
+            0: {
+              ...errorData[0],
+              image: true,
+              imagePreview: true,
+            }
+          };
+          isValid = false;
+        }else{
+          errorData = {
+            ...errorData,
+            0: {
+              ...errorData[0],
+              image: false,
+              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, false, this.props?.isFullMode);
+            
+            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 { TAG_BRACKET_COUNT_MISMATCH_ERROR } = errorMessageForTags;
+      const androidData = {};
+      if (this.state.formData && this.state.formData[0]) {
+        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 if (this.props.restrictPersonalization && hasPersonalizationTags(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, false, this.props?.isFullMode);
+                
+                if (tagValidationResponse.valid) {
+                  errorData[parseInt(index)][`message-editor${selector}`] = false;
+                } else {
+                  const { isBraceError } = tagValidationResponse;
+                  errorData[parseInt(index)][`message-editor${selector}`] = isBraceError ? TAG_BRACKET_COUNT_MISMATCH_ERROR : true;
+                  errorData[parseInt(index)][`bracket-error`] = isBraceError && TAG_BRACKET_COUNT_MISMATCH_ERROR;
+                  isValid = false;
+                }
+              }
+
+            } else {
+              errorData[parseInt(index)][`message-editor${selector}`] = true;
+              isValid = 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 if (this.props.restrictPersonalization && hasPersonalizationTags(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, false, this.props?.isFullMode);
+                
+                if (tagValidationResponse.valid) {
+                  errorData[parseInt(index)][`message-title${selector}`] = false;
+                } else {
+                  const {isBraceError} = tagValidationResponse;
+                  errorData[parseInt(index)][`message-title${selector}`] = isBraceError ? TAG_BRACKET_COUNT_MISMATCH_ERROR : true;
+                  errorData[parseInt(index)][`bracket-error`] = isBraceError && TAG_BRACKET_COUNT_MISMATCH_ERROR;
+                  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, errorData}, () => {
+            this.props.setModalContent('ios');
+          });
+          // modal.body = "Android template is not configured. Save without Android template";
+          // modal.id = "ios";
+          // modal.type = 'confirm';
+          return; //returning from here will not call the liquid middleware
+        }
+        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, errorData}, () => {
+            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; //returning from here will not call the liquid middleware
+        }
+      }
+      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;
+      }
+      isLiquidValid = isValid;
+    }
+  }
+
+    // Form Data Validation for Email Channel
+    if (this.props?.schema?.channel?.toUpperCase() === EMAIL) {
+      // Validating Email By iterating all elements of FormBuilder
+      const isEmail = true;
+      _.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')) {
+          //checking email subject name validation
+          if (!data?.trim()) {
+            errorData[index] = true;
+            isValid = false;
+          } else {
+            errorData[index] = false;
+          }
+        }
+
+        // Check if Template name present in full mode
+        if(type !== 'embedded' && index === 'template-name' && data === '') {
+          errorData[index] = true;
+          isValid = false;
+        } else if(type !== 'embedded' && index === 'template-name' && data !== '') {
+          errorData[index] = false;
+        }
+
+        // Check formData if selected version present or not
+        if(index === 'template-version' && data === '') {
+          errorData[index] = true;
+          isValid = false;
+        } else if(index === 'template-version' && data !== '') {
+          errorData[index] = false;
+        }
+        isLiquidValid = isValid; // Existing validations support for liquid enabled orgs
+        // 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'];
+            if (!content) {
+              return false;
+            }
+            const tagValidationResponse = this.validateTags(content, tags, isEmail, this.props?.isFullMode);
+            // Check for base64 images in email content
+            isEmail && containsBase64Images({content, callback:()=>{
+              tagValidationResponse.valid = false;
+              tagValidationResponse.hasBase64Images = true;
+            }})
+            
+            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;
+              isLiquidValid = false;
+              if ((showMessages && !isNaN(index)) ||  this.isLiquidFlowSupportedByChannel()) {
+                if (tagValidationResponse?.missingTags?.length > 0) {
+                  errorString += `${this.props.intl.formatMessage(messages.contentNotValidLanguage)} ${currentLang}\n`;
+                }
+                if (tagValidationResponse?.missingTags?.length > 0) {
+                  errorString += `${this.props.intl.formatMessage(messages.missingTags)} ${tagValidationResponse.missingTags.toString()}\n`;
+                }
+                if (tagValidationResponse?.isBraceError){
+                  errorString += this.props.intl.formatMessage(globalMessages.unbalanacedCurlyBraces);
+                }
+                if (tagValidationResponse?.isContentEmpty) {
+                  errorString += this.props.intl.formatMessage(messages.emailBodyEmptyError);
+                  // Adds a bypass for cases where content is initially empty in the creation flow.
+                  if(this.isLiquidFlowSupportedByChannel()){
+                    errorString = "";
+                    isLiquidValid = true;
+                  }
+                }
+                if (tagValidationResponse?.hasBase64Images) {
+                  errorString += this.props.intl.formatMessage(messages.base64ImageError);
+                }
+              }
+            }
+          }
+          if (errorString) {
+            if (this.isLiquidFlowSupportedByChannel()) {
+              this.setState(
+                (prevState) => ({
+                  liquidErrorMessage: {
+                    ...prevState.liquidErrorMessage,
+                    STANDARD_ERROR_MSG: [errorString],
+                  },
+                }),
+                () => {
+                  this.props.showLiquidErrorInFooter(this.state.liquidErrorMessage, this.props.channel === SMS? null: this.state.currentTab);
+                }
+              );
+              // Footer shows the error; skip notification for Email CK/BEE (non-HTML) flow to avoid duplicate feedback
+              const isEmailChannel = this.props?.schema?.channel?.toUpperCase() === EMAIL;
+              if (!isEmailChannel) {
+                this.openNotificationWithIcon('error', errorString, 'email-validation-error');
+              }
+            } else {
+              this.openNotificationWithIcon('error', errorString, "email-validation-error");
+            }
+          }
+          _.forEach(errorData[index], (versionData, key) => {
+            if (data.selectedLanguages.indexOf(key) === -1) {
+              delete errorData[index][key];
+            }
+          });
+        }
+      });
+    }
+
+    const isTemplateValid = this.isLiquidFlowSupportedByChannel() ? isLiquidValid : isValid;
+    //Updating the state with the error data
+    this.setState((prevState) => ({
+      isFormValid: isTemplateValid,
+      liquidErrorMessage: {
+        //Do not update the LIQUID_ERROR_MSG validation error message
+        ...prevState.liquidErrorMessage,
+        //update Standard error message based on the updated content
+        STANDARD_ERROR_MSG: isTemplateValid ? [] : prevState.liquidErrorMessage?.STANDARD_ERROR_MSG,
+      },
+      errorData,
+    }), () => {
+      this.props.showLiquidErrorInFooter(this.state.liquidErrorMessage, this.props.channel === SMS? null: this.state.currentTab);
+
+      if (onValidationComplete) {
+
+        onValidationComplete();
+      }
+    });
+    
+
+    this.props.onFormValidityChange(isTemplateValid, errorData);
+    return isTemplateValid;
+}
+
+  indexOfEnd(targetString, string) {
+    var io = targetString.indexOf(string);
+    return io == -1 ? -1 : io + string.length;
+  }
+
+  handleLiquidTemplateSubmit = (templateContent) => {
+    const channel = this.props.channel || this.props?.schema?.channel?.toUpperCase();
+    
+    if (templateContent && channel === EMAIL) {
+      this.setState((prevState) => {
+        return {
+          formData: {
+            ...prevState?.formData,
+            base: {
+              ...prevState?.formData?.base,
+              [this.props.baseLanguage]: {
+                ...prevState?.formData?.base?.[this.props.baseLanguage],
+                "template-content": preprocessHtml(templateContent)
+              }
+            }
+          }
+        };
+      }, () => {
+        if (this.props.onSubmit) {
+          this.props.onSubmit(this.state.formData);
+        }
+      });
+    } else {
+      // For all other channels
+      this.props.onSubmit(this.state.formData);
+    }
+  }
+  onSubmitWrapper = (args) => {
+    const {singleTab = null} = args || {};
+    // Liquid validation (extractTags + Aira) only in library mode
+    const runLiquidValidation = this.isLiquidFlowSupportedByChannel() && !this.props.isFullMode;
+    if (runLiquidValidation) {
+      // For MPUSH, we need to validate both Android and iOS content separately
+      if (this.props.channel === MOBILE_PUSH || this.props?.schema?.channel?.toUpperCase() === MOBILE_PUSH) {
+        this.validateFormBuilderMPush(this.state.formData, singleTab);
+        return;
+      }
+
+      // For other channels (EMAIL, SMS, INAPP): only call extractTags if there are no brace/empty errors already.
+      // Run sync validation first; if it fails, block and show errors without calling the API.
+      this.validateForm(null, null, true, false, () => {
+        if (!this.state.isFormValid) {
+          this.props.stopValidation();
+          return;
+        }
+        const content = getChannelData(this.props.schema.channel || this.props.channel, this.state.formData, this.props.baseLanguage);
+
+        const onError = ({ standardErrors, liquidErrors }) => {
+          this.setState(
+            (prevState) => ({
+              liquidErrorMessage: {
+                ...prevState.liquidErrorMessage,
+                STANDARD_ERROR_MSG: standardErrors,
+                LIQUID_ERROR_MSG: liquidErrors,
+              },
+            }),
+            () => {
+              this.props.showLiquidErrorInFooter(this.state.liquidErrorMessage);
+              this.props.stopValidation();
+              this.props.onFormValidityChange(false, this.state.errorData);
+            }
+          );
+        };
+
+        const onSuccess = (contentToSubmit) => {
+          const channel = this.props.channel || this.props?.schema?.channel?.toUpperCase();
+          if(channel === EMAIL) {
+            const content = this.state.formData?.base?.[this.props.baseLanguage]?.["template-content"] || "";
+            this.handleLiquidTemplateSubmit(content);
+          } else {
+            this.handleLiquidTemplateSubmit(contentToSubmit);
+          }
+        };
+
+        validateLiquidTemplateContent(content, {
+          getLiquidTags: this.props.actions.getLiquidTags,
+          formatMessage: this.props.intl.formatMessage,
+          messages,
+          onError,
+          onSuccess,
+          skipTags: this.skipTags.bind(this)
+        });
+      });
+    } else {
+      this.props.onSubmit(this.state.formData);
+    }
+  }
+
+  saveForm(saveForm) {
+    if (this.props.isNewVersionFlow && !saveForm) {
+      this.props.getValidationData();
+      return;
+    }
+    if ( this.state.isFormValid ) {
+      this.onSubmitWrapper();
+    } else {
+      this.setState({checkValidation: true});
+      this.validateForm(null, null, true);
+    }
+  }
+
+
+  // New function to handle MPUSH content validation for both Android and iOS
+  validateFormBuilderMPush = (formData,singleTab) => {
+    const currentTab = this.state.currentTab;
+    
+    // Set up callbacks for error and success handling
+    const onLiquidError = ({ standardErrors, liquidErrors }) => {
+      this.setState(
+        (prevState) => ({
+          liquidErrorMessage: {
+            ...prevState.liquidErrorMessage,
+            STANDARD_ERROR_MSG: standardErrors,
+            LIQUID_ERROR_MSG: liquidErrors,
+          },
+        }),
+        () => {
+          this.props.showLiquidErrorInFooter(this.state.liquidErrorMessage, this.state.currentTab);
+          this.props.stopValidation();
+          // Block save: tell parent form is invalid so Done/submit is blocked
+          this.props.onFormValidityChange(false, this.state.errorData);
+        }
+      );
+    };
+    
+    const onSuccess = (contentToSubmit) => {
+      // Clear any previous errors
+      this.setState(
+        (prevState) => ({
+          liquidErrorMessage: {
+            ...prevState.liquidErrorMessage,
+            STANDARD_ERROR_MSG: [],
+            LIQUID_ERROR_MSG: [],
+          },
+        }),
+        () => {
+          // Format depends on the tabType
+          this.handleLiquidTemplateSubmit(contentToSubmit);
+        }
+      );
+    };
+
+    // Call the utility function with our callbacks
+    validateMobilePushContent(formData, {
+      currentTab,
+      onError: onLiquidError,
+      onSuccess,
+      getLiquidTags: this.props.actions.getLiquidTags,
+      formatMessage: this.props.intl.formatMessage,
+      messages: messages,
+      singleTab: singleTab?.toUpperCase(),
+    });
+  }
+
+  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) {
+    // If the tag contains the word "entryTrigger.", then it's an event context tag and it should not be skipped.
+    if (tag?.match(ENTRY_TRIGGER_TAG_REGEX)) {
       return false;
     }
-  });
+    // Use some() to check if any pattern matches (stops on first match)
+    return SKIP_TAGS_REGEX_GROUPS.some((group) => {
+      // Create a new RegExp for each test to avoid state issues with global flag
+      const groupRegex = new RegExp(group);
+      return groupRegex.test(tag);
+    });
+  }
+
+  validateTags(content, tagsParam, isEmail = false, isFullMode = this.props?.isFullMode) {
+    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 contentForValidation = isEmail ? convert(content, GLOBAL_CONVERT_OPTIONS) : content;
+    const isOutboundModule = (currentModule || '').toUpperCase() === OUTBOUND;
+
+    const initialMissingTags = (tags && tags.length && !isFullMode && isEmail && isOutboundModule && !isEmailUnsubscribeTagOptional() && !hasUnsubscribeTag(content))
+      ? ['unsubscribe']
+      : [];
+
+    const response = validateTagsCore({
+      contentForBraceCheck: contentForValidation,
+      contentForUnsubscribeScan: content,
+      tags,
+      currentModule,
+      isFullMode,
+      initialMissingTags, // [] or ['unsubscribe']; core uses this instead of definition-based when provided
+      skipTagsFn: this.skipTags.bind(this),
+      includeIsContentEmpty: true,
+    });
+
+    // When unsubscribe tag is optional (isEmailUnsubscribeTagOptional): do not enforce unsubscribe (defensive splice); set isContentEmpty only when content is empty. Do not override response.valid so brace/format errors are preserved.
+    const validString = /\S/.test(contentForValidation);
+    if (isEmailUnsubscribeTagOptional() && isEmail && isOutboundModule) {
+      const missingTagIndex = response.missingTags.indexOf('unsubscribe');
+      if (missingTagIndex !== -1) {
+        response.missingTags.splice(missingTagIndex, 1);
+      }
+      if (!validString) {
+        response.isContentEmpty = 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;
+  }
+
+  // eslint-disable-next-line consistent-return
+  initializeEditErrorData(formData, tabCount, isReturnErrorData) {
+    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;
+      });
+    }
+    if (isReturnErrorData) {
+      return errorData;
+    }
+    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 && 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);
+    const channel = _.get(this, "props.schema.channel");
+    let isContainer = false;
+    let index = -1;
+    if (channel && channel.toUpperCase() === SMS) {
+      // sms v2 scema does not have any containers section the input ant preview fields are in stand alon section and v1 FormBuilder did not have valiation support for stand alone input fields
+      isContainer = true;
+      index = 0;
+    }
+    if (schema.standalone) {
+      _.forEach(schema.standalone.sections, (section) => {
+        if (section) {
+          if (section.type === 'multicols') {
+            formData = this.initializeMultiColSection(section, formData, isContainer, index, ifError);
+          } else if (section.type === 'col-label') {
+            formData = this.initializeColLabelSection(section, formData, isContainer, index, ifError);
+          } else if (section.type === 'parent') {
+            formData = this.initializeParentSection(section, formData, isContainer, index, 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);
+    // Store the value of 'template-name' before the deletion process
+    const templateNameValue = tempFormData['template-name'];
+    if (!this.props.isNewVersionFlow) {
+      _.forEach(formData, (element, key) => {
+        // This code block is used to clean up the tempFormData object.
+        // If the element is not an object and the key of the element is not found in the formElements array,
+        // then the element is removed from the tempFormData object.
+        if (typeof element !== 'object' && this.formElements.indexOf(key) === -1) {
+          delete tempFormData[key];
+        } else if (typeof element === "object") {
+          // If the property key (innerKey) is not "tabKey", "base", "name", "imagePreview", "image"
+          // and is not found in the formElements array, then the property is removed from the object in tempFormData.
+          _.forEach(element, (innerElement, innerKey) => {
+            if (innerKey !== "tabKey" && innerKey !== "base" && innerKey !== 'name' && innerKey !== 'imagePreview' && innerKey !== 'image' && this.formElements.indexOf(innerKey) === -1) {
+              delete tempFormData[key][innerKey];
+            }
+          });
+        }
+      });
+    }
+    const channel = this.props.schema?.channel || "";
+    // If 'template-name' was deleted, re-add it to tempFormData for mobilepush channel
+    if (!('template-name' in tempFormData) && channel.toUpperCase() === MOBILE_PUSH) {
+      tempFormData['template-name'] = templateNameValue;
+    }
+    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 (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) {
+    
+    // Check if this is a high-frequency input field that should be optimized
+    const isHighFrequencyField = val && (
+      val.id === 'template-name' || 
+      val.id === 'template-subject'
+    );
+    
+    if (isHighFrequencyField && !event) {
+      // For high-frequency fields: immediate UI update + debounced expensive operations
+      this.updateFormDataOptimized(data, val, event);
+      return;
+    }
+    
+    // For non-high-frequency fields or special events, use immediate update
+    this.performFormDataUpdate(data, val, event);
+  }
+
+  // Optimized update for high-frequency fields
+  updateFormDataOptimized(data, val, event) {
+    // 1. Immediate UI update - update the field value instantly
+    this.updateFieldValueImmediately(data, val);
+    
+    // 2. Debounce expensive operations (validation, parent updates) - skip state update since we already did it
+    this.debouncedUpdateFormData(data, val, event, true);
+  }
+
+  // Update field value immediately for UI feedback
+  updateFieldValueImmediately(data, val) {
+    const currentFormData = this.state.formData;
+    let updatedFormData;
+    
+    if (!this.state.usingTabContainer || val.standalone) {
+      // Simple field update
+      updatedFormData = {
+        ...currentFormData,
+        [val.id]: data
+      };
+    } else {
+      // Tab container update
+      const tabIndex = this.state.currentTab - 1;
+      updatedFormData = { ...currentFormData };
+      
+      if (updatedFormData[tabIndex]) {
+        updatedFormData[tabIndex] = {
+          ...updatedFormData[tabIndex],
+          [val.id]: data
+        };
+      }
+    }
+    
+    // Update state immediately for UI feedback
+    this.setState({ formData: updatedFormData });
+  }
+
+  // Legacy updateFormData function - kept for backward compatibility
+  updateFormDataLegacy(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 === ADD_LANGUAGE) {
+        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 !== ADD_LANGUAGE && 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 === ADD_LANGUAGE) {
+          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;
+  }
+
+  // Handle field blur for validation
+  handleFieldBlur = (e, val) => {
+    // Trigger validation on blur for high-frequency fields
+    if (val && (val.id === 'template-name' || val.id === 'template-subject')) {
+      this.debouncedValidation();
+    }
+  }
+
+  // Memoized validation for specific fields
+  getMemoizedValidation = (fieldId, fieldValue) => {
+    const cacheKey = `${fieldId}_${fieldValue}`;
+    
+    if (this.validationCache.has(cacheKey)) {
+      return this.validationCache.get(cacheKey);
+    }
+    
+    // Perform validation logic here
+    const isValid = this.performFieldValidation(fieldId, fieldValue);
+    this.validationCache.set(cacheKey, isValid);
+    
+    // Clear cache if it gets too large
+    if (this.validationCache.size > 100) {
+      this.validationCache.clear();
+    }
+    
+    return isValid;
+  }
+
+  // Perform validation for a specific field
+  performFieldValidation = (fieldId, fieldValue) => {
+    // Basic validation logic for template-name and template-subject
+    if (fieldId === 'template-name' || fieldId === 'template-subject') {
+      return fieldValue && fieldValue.trim().length > 0;
+    }
+    return true;
+  }
+
+  // Cleanup debounced functions on component unmount
+  componentWillUnmount() {
+    if (this.debouncedUpdateFormData) {
+      this.debouncedUpdateFormData.cancel();
+    }
+    if (this.debouncedValidation) {
+      this.debouncedValidation.cancel();
+    }
+    // Clear validation cache
+    if (this.validationCache) {
+      this.validationCache.clear();
+    }
+  }
+  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(() => {
+        let activeTabIndex = '1';
+        let selector = ".ant-tabs-tab";
+        if (this.props.schema.channel.toUpperCase() === "MOBILEPUSH") {
+          selector = `.mobilepush-wrapper ${selector}`;
+        }
+        const elems = document.querySelectorAll(selector);
+
+        for (let i = 0; i < elems.length; i += 1) {
+          if (elems.item(i).classList.contains("ant-tabs-tab-active")) {
+            activeTabIndex = i + 1;
+          }
+        }
+        if (this.props.isNewVersionFlow) {
+          const formData = _.cloneDeep(this.state.formData);
+          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 {
+          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 && 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;
+    }
+    
+    // val.injectedEvents[event].call(this.props.parent, data);
+    val.injectedEvents[event].call(this.props.parent, data, val.id);
+  }
+  openFileDialog = (e, parentID) => {
+    
+    document.querySelector(`#${parentID} #fileName`).click();
+  };
+  handleOk = (ev) => {
+    // antd v6 wraps button text in a <span>; use currentTarget so the button id resolves.
+    const id = (ev.currentTarget && ev.currentTarget.id) || ev.target.id;
+    this.setState({showModal: false});
+    if (id === "android" && this.state.androidValid) {
+      this.onSubmitWrapper({singleTab: id});
+    } else if (id === "ios" && this.state.iosValid) {
+      this.onSubmitWrapper({singleTab: id});
+    } 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) => {
+    // antd v6 wraps button text in a <span>; use currentTarget so the button id resolves.
+    const id = (ev.currentTarget && ev.currentTarget.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) => {
+    if (e) {
+      e.preventDefault();
+    }
+    const _URL = window.URL || window.webkitURL;
+    const file = files[0];
+    if (val.supportedExtensions) {
+      const allowedExtensions = /(\.bmp|\.jpeg|\.png|\.gif|\.avif|\.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 || img.width,
+        height: this.height || img.height,
+        error: file && (file.size / (1e+6) > 5), // Checking if file exists and its size is greater than 5MB (5 * 10^6 bytes)
+      };
+      this.callChildEvent({file, type: 'image', fileParams}, val, val.submitAction);
+    };
+    if (e) {
+      const event = e;
+      event.target.value = null;
+    }
+  };
+
+  capUploaderCustomRequest = (uploadData, val) => {
+    this.uploadImages(undefined, {files: [uploadData.file]}, val);
+  }
+
+  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 = <CapImage 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);
+    });
+  }
+
+
+  getMissingOrUnsupportedTagsName = (content = '', type) => {
+    const { MISSING_TAGS } = tagsTypes;
+    const tagValidationResponse = this.validateTags(content);
+    if (type && type === MISSING_TAGS) {
+      return (tagValidationResponse[type] || []).join(', ').toString();
+    }
+    return null;
+  };
+  
+  renderTextAreaContent = (styling, columns, val, isVersionEnable, rows, cols, offset = 0) => {
+    const { checkValidation, errorData, currentTab, formData } = this.state;
+    const { MISSING_TAGS } = tagsTypes;
+    const errorType = (isVersionEnable ? errorData[`${currentTab - 1}`][val.id] : errorData[val.id]);
+    const ifError = checkValidation && errorType;
+    const messageContent = isVersionEnable ? formData[`${currentTab - 1}`][val.id] : formData[val.id];
+    const { MISSING_TAG_ERROR, TAG_BRACKET_COUNT_MISMATCH_ERROR } = errorMessageForTags;
+    const { formatMessage } = this.props.intl;
+    
+    const aiContentBotDisabled = isAiContentBotDisabled();
+
+    let errorMessageText = false;
+    switch (errorType) {
+      case MISSING_TAG_ERROR:
+        errorMessageText = formatMessage(messages.missingTagsValidationError, {missingTags: this.getMissingOrUnsupportedTagsName(messageContent, MISSING_TAGS)});
+        break;
+      case TAG_BRACKET_COUNT_MISMATCH_ERROR:
+        errorMessageText = formatMessage(globalMessages.unbalanacedCurlyBraces);
+        break;
+      case true:
+        errorMessageText = formatMessage(messages.genericTagsValidationError);
+        break;
+      default:
+        break;
+    }
+
+    if (this.props.restrictPersonalization && hasPersonalizationTags(messageContent)) {
+      errorMessageText = formatMessage(messages.personalizationTagsErrorMessage);
+    }
+    // Empty/required error: only show after user has triggered validation (ifError / "Done").
+    // All other errors (brace, personalization, missing tags, generic): show in real time while typing.
+    const isContentEmpty = !messageContent || !/\S/.test(String(messageContent).trim());
+    const isEmptyError = errorType && isContentEmpty;
+    const showError = errorType && (isEmptyError ? ifError : true);
+    const prevErrorMessage = this.state.liquidErrorMessage?.STANDARD_ERROR_MSG?.[0];
+    if (prevErrorMessage !== errorMessageText && errorMessageText && this.isLiquidFlowSupportedByChannel()) {
+      this.setState((prevState) => ({
+        liquidErrorMessage: {
+        ...prevState.liquidErrorMessage,
+        STANDARD_ERROR_MSG: [errorMessageText],
+        }
+      }), () => {
+
+        this.props.showLiquidErrorInFooter(this.state.liquidErrorMessage, this.props.channel === SMS? null: this.state.currentTab);
+      });
+    }
+    // Always render the textarea regardless of the liquid error state update above.
+    // Previously the textarea was inside the `else` branch, so it was not rendered during the
+    // one render cycle when the liquid error message was first set – causing the input to lose
+    // focus whenever a brace/tag error first appeared.
+    if (styling === 'semantic') {
+      columns.push(
+        <CapColumn key="input" span={val.width} offset={offset}>
+          <TextArea
+            id={val.id}
+            placeholder={val.placeholder ? val.placeholder : ''}
+            className={`${showError ? 'error-form-builder' : ''}`}
+            errorMessage={
+              showError && errorMessageText && (
+                !this.isLiquidFlowSupportedByChannel() ||
+                [MOBILE_PUSH, INAPP].includes(this.props.schema?.channel?.toUpperCase())
+              )
+                ? errorMessageText
+                : ''
+            }
+            label={val.label}
+            autosize={val.autosize ? val.autosizeParams : false}
+            onChange={(e) => this.updateFormData(e.target.value, val)}
+            onBlur={(e) => this.handleFieldBlur(e, val)}
+            style={val.style ? val.style : {}}
+            defaultValue={messageContent || ''}
+            value={messageContent || ""}
+            rows={rows}
+            disabled={val.disabled}
+            cols={cols}
+          />
+          {[SMS, MOBILE_PUSH].includes(this.props.schema?.channel)
+            && !aiContentBotDisabled
+            && (
+              <CapAskAira.ContentGenerationBot
+                text={messageContent || ""}
+                setText={(x) => {
+                  this.updateFormData(x, val);
+                }}
+                iconPlacement="float-br"
+                rootStyle={{
+                  // 1rem is the margin-bottom of textarea
+                  bottom: 'calc(1rem + 0.2rem)',
+                  right: '0.2rem',
+                }}
+              />
+            )}
+        </CapColumn>
+      );
+    }
+  };
+
+
+  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;
+      }
+
+      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} style={val.style || {}}>
+                <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)}
+                  onBlur={(e) => this.handleFieldBlur(e, val)}
+                  defaultValue={isVersionEnable ? this.state.formData[`${this.state.currentTab - 1}`][val.id] : this.state.formData[val.id]}
+                  value={value || ""}
+                  disabled={val.disabled}
+                  size="default"
+                />
+              </CapColumn>
+            );
+          }
+          break;
+        case "textarea":
+          const rows = 20;
+          const cols = 20;
+          this.renderTextAreaContent(styling, columns, val, isVersionEnable, rows, cols, val.offset);
+          break;
+        case "contentPreview":
+          const { formData , currentTab } = this.state || {};
+          const tab = formData && formData[currentTab - 1];
+          content = isVersionEnable ? tab && tab['sms-editor'] : formData && 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}
+                selectedOfferDetails={this.props.selectedOfferDetails}
+                eventContextTags={this.props?.eventContextTags}
+                restrictPersonalization={this.props.restrictPersonalization}
+                waitEventContextTags={this.props?.waitEventContextTags}
+              />
+            </CapColumn>
+          );
+          break;
+        case "cap-tag-list-with-input":
+          ifError = this.state.checkValidation && this.state.errorData[val.id];
+          columns.push(
+            <CapColumn key={`input-${val.id}`} span={val.width || 10} offset={val.offset}>
+              <CapTagListWithInput
+                key={`input-${val.id}`}
+                inputId={val.id}
+                inputValue={this.state.formData[val.id] || ''}
+                inputOnChange={(e) => this.updateFormData(e.target.value, val)}
+                inputPlaceholder={val.placeholder || ''}
+                inputErrorMessage={val.errorMessage && ifError ? val.errorMessage : ''}
+                inputRequired={val.required || false}
+                inputDisabled={val.disabled || false}
+                headingText={val.label || ''}
+                headingStyle={val.headingStyle || { marginTop: '3%', marginRight: '79%' }}
+                headingType="h4"
+                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 : ''}
+                userLocale={this.props.userLocale}
+                selectedOfferDetails={this.props.selectedOfferDetails}
+                eventContextTags={this.props?.eventContextTags}
+                waitEventContextTags={this.props?.waitEventContextTags}
+                moduleFilterEnabled={this.props.location && this.props.location.query && this.props.location.query.type !== 'embedded'}
+                containerStyle={val.style || {}}
+                inputProps={val.inputProps || {}}
+                showInput={val.showInput !== false}
+                showTagList={val.showTagList !== false}
+                restrictPersonalization={this.props.restrictPersonalization}
+              />
+            </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}>
+              <UnifiedPreview
+                channel={val.channel ? val.channel : 'SMS'}
+                content={content}
+                device={ANDROID}
+                showDeviceToggle={false}
+                showHeader={false}
+                formatMessage={this.props.intl.formatMessage}
+                senderId={unicodeEnabled ? 'Unicode' : 'ASCII'}
+              />
+            </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}
+                label={val.label}
+              />
+            </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')}
+                currentOrgDetails={this.props.currentOrgDetails}
+              />
+            </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;
+        case "label": {
+          columns.push(
+            <CapHeading
+              type={val.headingType || "h4"}
+              style={val.style || {}}
+          >
+              {val.value}
+            </CapHeading>
+          );
+          break;
+        }
+        default:
+          break;
+      }
+      row.push(
+        <CapRow useLegacy>
+          {
+            _.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 useLegacy 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 '';
+    }
+  }
+
+  onGalleryClick = (event) => {
+    event.stopPropagation();
+    this.props.setDrawerVisibility(true);
+  }
 
-  const channel = (props?.channel || props.schema?.channel)?.toUpperCase();
+  onReUpload = () => {
+    const { formData } = this.state;
+    this.props.onChange({
+      ...formData,
+      0: {
+        ...formData[0],
+        image: undefined,
+        imagePreview: undefined,
+      },
+      base: {
+        ...formData.base,
+        image: undefined,
+        imagePreview: undefined,
+      },
+      reUpload: true,
+    });
+  }
 
-  const useNewFormBuilder = isSmsNewBuilderOrg && channel === SMS;
-  return useNewFormBuilder ? (
-    <FunctionalFormBuilder {...props} />
-  ) : (
-    <ClassicFormBuilder {...props} />
-  );
+  getUploadVariants = (isImage, val) => {
+    if (this.props.schema && this.props.schema.channel === 'LINE') {
+      if (!isImage) {
+        return (
+          <>
+            <CapUploader.CapDragger
+              customRequest={(data) => this.capUploaderCustomRequest(data, val)}
+              {...val.componentProps}
+              className="form-builder-dragger"
+            >
+              <CapHeading className="dragger-title" type="h7">
+                <FormattedMessage {...messages.dragAndDrop} />
+              </CapHeading>
+              <CapHeading className="dragger-or" type="label6">
+                <FormattedMessage {...messages.or} />
+              </CapHeading>
+              <CapButton className="dragger-button" type="secondary" style={{marginRight: CAP_SPACE_08}}>
+                <FormattedMessage {...messages.uploadComputer} />
+              </CapButton>
+              <CapButton
+                className="dragger-button"
+                type="secondary"
+                style={{marginLeft: CAP_SPACE_08}}
+                onClick={this.onGalleryClick}
+              >
+                <FormattedMessage {...messages.uploadGallery} />
+              </CapButton>
+            </CapUploader.CapDragger>
+            <CapHeading type="h6" style={{marginTop: CAP_SPACE_12 }}>
+              <FormattedMessage {...messages.imageDimenstionDescription} />
+            </CapHeading>
+          </>
+        );
+      }
+      return (
+        <CapButton
+          className="dragger-button"
+          type="link"
+          style={{top: 0, position: 'absolute', right: 0, color: FONT_COLOR_05 }}
+          onClick={this.onReUpload}
+        >
+          <FormattedMessage {...messages.imageReUpload} />
+        </CapButton>
+      );
+    }
+    return (
+      <CapButton disabled={val.disabled ? val.disabled : false} type="link" prefix={<CapIcon size="s" type="add-photo" />} onClick={(e) => this.openFileDialog(e, val.id)} style={{float: 'right', color: `${val.disabled ? FONT_COLOR_04 : FONT_COLOR_05}`}}>
+        {val.label}
+      </CapButton>
+    );
+  }
+
+  checkBeeEditorAllowedForLibrary = () => {
+    const { isFullMode = false, editor } = this.props || {};
+    if ((editor === "BEE" && !isFullMode) || isFullMode) {
+      return true;
+    }
+    return false;
+  }
+
+  handleSetText = (val, newText) => {
+    this.updateFormData(newText, val);
+  };
+
+  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":
+            const errorType = isVersionEnable ? this.state.errorData[`${this.state.currentTab - 1}`][val.id] : this.state.errorData[val.id];
+            const aiContentBotDisabled = isAiContentBotDisabled();
+            ifError = this.state.checkValidation && (isVersionEnable ? this.state.errorData[`${this.state.currentTab - 1}`][val.id] : this.state.errorData[val.id]);
+            const { TAG_BRACKET_COUNT_MISMATCH_ERROR } = errorMessageForTags;
+            const { formatMessage } = this.props.intl;
+            const value = isVersionEnable ? this.state.formData[`${this.state.currentTab - 1}`][val.id] : this.state.formData[val.id];
+            // Show personalization error for title field inline (same as message textarea) when restrictPersonalization is true
+            const hasPersonalizationError = this.props.restrictPersonalization && hasPersonalizationTags(value);
+            if (hasPersonalizationError) {
+              ifError = true;
+            }
+            let errorMessageText = hasPersonalizationError
+              ? formatMessage(messages.personalizationTagsErrorMessage)
+              : (errorType === TAG_BRACKET_COUNT_MISMATCH_ERROR ? formatMessage(globalMessages.unbalanacedCurlyBraces) : (val.errorMessage && ifError ? val.errorMessage : ''));
+            if (styling === 'semantic') {
+              const isEmailStandaloneHighFreq = val.standalone && this.props.schema?.channel?.toUpperCase() === EMAIL;
+              if (isEmailStandaloneHighFreq) {
+                columns.push(
+                  <CapColumn key={val.id} span={val.width} offset={val.offset} style={val.style || {}}>
+                    <HighFreqInput
+                      id={val.id}
+                      errorMessage={errorMessageText}
+                      label={val.label}
+                      inductiveText={val.inductiveText}
+                      className={`input-primary chart-name-input${ifError ? ' error' : ''}`}
+                      style={val.style ? val.style : {}}
+                      placeholder={val.placeholder}
+                      onCommit={(newValue) => this.performFormDataUpdate(newValue, val)}
+                      onBlur={(e) => this.handleFieldBlur(e, val)}
+                      value={value || ""}
+                      disabled={val.disabled}
+                      size={val.size || "default"}
+                    />
+                    {!aiContentBotDisabled && (
+                      <CapAskAira.ContentGenerationBot
+                        text={value || ""}
+                        setText={this.handleSetText.bind(this, val)}
+                        iconPlacement="float-br"
+                        iconSize="1.6rem"
+                        rootStyle={{
+                          bottom: "0.2rem",
+                          right: "0.2rem",
+                          left: "auto",
+                        }}
+                      />
+                    )}
+                  </CapColumn>
+                );
+              } else {
+                columns.push(
+                <CapColumn key={val.id} span={val.width} offset={val.offset} style={val.style || {}}>
+                    <CapInput
+                      id={val.id}
+                      errorMessage={errorMessageText}
+                      label={val.label}
+                      inductiveText={val.inductiveText}
+                      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)}
+                      onBlur={(e) => this.handleFieldBlur(e, val)}
+                      value={value || ""}
+                      defaultValue={isVersionEnable ? this.state.formData[`${this.state.currentTab - 1}`][val.id] : this.state.formData[val.id]}
+                      disabled={val.disabled}
+                      size={val.size || "default"}
+                    />
+                    {this.props.schema?.channel === EMAIL &&
+                      !aiContentBotDisabled && (
+                        <CapAskAira.ContentGenerationBot
+                          text={value || ""}
+                          setText={this.handleSetText.bind(this, val)}
+                          iconPlacement="float-br"
+                          iconSize="1.6rem"
+                          rootStyle={{
+                            bottom: "0.2rem",
+                            right: "0.2rem",
+                            left: "auto",
+                          }}
+                        />
+                      )}
+                  </CapColumn>
+                );
+              }
+            }
+            break;
+
+          case "textarea":
+            const rows = 10;
+            const cols = 2;
+            this.renderTextAreaContent(styling, columns, val, isVersionEnable, rows, cols, val.offset);
+            break;
+          case "checkbox":
+            ifError = this.state.checkValidation && (isVersionEnable ? this.state.errorData[`${this.state.currentTab - 1}`][val.id] : this.state.errorData[val.id]);
+            const { disabled , hoverText } = val || {};
+            if (styling === 'semantic') {
+              columns.push(
+                <CapColumn key="input" span={val.width} offset={val.offset}>
+                  <CapTooltip
+                    title={ disabled && hoverText ? hoverText : '' }
+                    placement="topLeft"
+                  >
+                    <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>
+                  </CapTooltip>
+                </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) => {
+                      const isMappedTemplateWechat = val.id === "template-redirect-options-radio";
+                      return (
+                        <CapRadio
+                          value={ isMappedTemplateWechat ? option.value : option } 
+                          inductiveText={val.inductiveText && val.inductiveText[index]}>{ isMappedTemplateWechat ? option.label : 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 ?
+                      <CapImage 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:
+            const {
+              formData: {
+                [`${self.state.currentTab - 1}`]: {
+                  image,
+                } = {},
+              } = {},
+            } = self.state;
+            const isImage = !!image;
+            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' : ''}`}>
+
+                  {isImage ?
+                    <CapImage 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/*"} />
+                  {this.getUploadVariants(isImage, val)}
+                </form>
+              </CapColumn>
+              );
+            break;
+          case 'capUpload':
+            columns.push(
+              <CapUploader
+                customRequest={(data) => this.capUploaderCustomRequest(data, val)}
+              >
+                <CapButton>
+                  <FormattedMessage {...messages.upload} />
+                </CapButton>
+              </CapUploader>
+            );
+            break;
+
+          case 'capDragger':
+            columns.push(
+              <CapUploader.CapDragger
+                customRequest={(data) => this.capUploaderCustomRequest(data, val)}
+                {...val.componentProps}
+                className="form-builder-dragger"
+              >
+                <CapHeading className="dragger-title" type="h7">
+                  <FormattedMessage {...messages.dragAndDrop} />
+                </CapHeading>
+                <CapHeading className="dragger-or" type="label6">
+                  <FormattedMessage {...messages.or} />
+                </CapHeading>
+                <CapButton className="dragger-button" type="secondary">
+                  <FormattedMessage {...messages.selectAFile} />
+                </CapButton>
+              </CapUploader.CapDragger>
+            );
+            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":
+            let moduleFilterEnabled = this.props.location && this.props.location.query && this.props.location.query.type !== 'embedded';
+            const channel = _.get(this.props, 'schema.channel', "");
+            if (channel === 'EMAIL') {
+              moduleFilterEnabled = this.props.isFullMode;
+            }
+            const langIndex = 0;
+            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 isBEEAppEnable = this.checkBeeEditorAllowedForLibrary();
+
+            // Always render Subject TagList (title-tagList) even when Bee editor is active for EMAIL channel
+            if (
+              val.id === 'title-tagList' ||
+              !(_.get(this.state, `formData[${this.state.currentTab - 1}][${currentLang}].is_drag_drop`, false)) ||
+              isBEEAppEnable === false ||
+              channel !== 'EMAIL'
+            ) {
+              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={moduleFilterEnabled}
+                    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.state.translationLang}
+                    selectedOfferDetails={this.props.selectedOfferDetails}
+                    channel={channel}
+                    eventContextTags={this.props?.eventContextTags}
+                    restrictPersonalization={this.props.restrictPersonalization}
+                    waitEventContextTags={this.props?.waitEventContextTags}
+                  />
+                </CapColumn>
+              );
+            }
+            break;
+          case "cap-tag-list-with-input":
+            let moduleFilterEnabledForCapTagList = this.props.location && this.props.location.query && this.props.location.query.type !== 'embedded';
+            const channelForCapTagList = _.get(this.props, 'schema.channel', "");
+            if (channelForCapTagList === 'EMAIL') {
+              moduleFilterEnabledForCapTagList = this.props.isFullMode;
+            }
+            const langIndexForCapTagList = 0;
+            const currentLangForCapTagList = (!_.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[langIndexForCapTagList]) ? this.state.formData[`${this.state.currentTab - 1}`].selectedLanguages[langIndexForCapTagList] : this.props.baseLanguage;
+            const isBEEAppEnableForCapTagList = this.checkBeeEditorAllowedForLibrary();
+            ifError = this.state.checkValidation && (isVersionEnable ? this.state.errorData[`${this.state.currentTab - 1}`][val.id] : this.state.errorData[val.id]);
+
+            // Always render Subject CapTagListWithInput even when Bee editor is active for EMAIL channel
+            if (
+              val.id === 'template-subject' ||
+              !(_.get(this.state, `formData[${this.state.currentTab - 1}][${currentLangForCapTagList}].is_drag_drop`, false)) ||
+              isBEEAppEnableForCapTagList === false ||
+              channelForCapTagList !== 'EMAIL'
+            ) {
+              const isEmailStandaloneSubject = val.standalone && channelForCapTagList === EMAIL && val.id === 'template-subject';
+              const tagListProps = {
+                key: `input-${val.id}`,
+                inputId: val.id,
+                inputValue: this.state.formData[val.id] || '',
+                inputPlaceholder: val.placeholder || '',
+                inputErrorMessage: val.errorMessage && ifError ? val.errorMessage : '',
+                inputRequired: val.required || false,
+                inputDisabled: val.disabled || false,
+                headingText: val.label || '',
+                headingStyle: val.headingStyle || { marginTop: '3%', marginRight: '79%' },
+                headingType: "h4",
+                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 : '',
+                userLocale: this.state.translationLang,
+                selectedOfferDetails: this.props.selectedOfferDetails,
+                eventContextTags: this.props?.eventContextTags,
+                waitEventContextTags: this.props?.waitEventContextTags,
+                moduleFilterEnabled: moduleFilterEnabledForCapTagList,
+                containerStyle: val.style || {},
+                inputProps: val.inputProps || {},
+                showInput: val.showInput !== false,
+                showTagList: val.showTagList !== false,
+                restrictPersonalization: this.props.restrictPersonalization,
+              };
+              columns.push(
+                <CapColumn key={`input-${val.id}`} offset={val.offset} span={val.width ? val.width : ''} style={val.style ? val.style : {marginBottom: '16px'}}>
+                  {isEmailStandaloneSubject ? (
+                    <HighFreqTagInput
+                      {...tagListProps}
+                      onCommit={(newValue) => this.performFormDataUpdate(newValue, val)}
+                    />
+                  ) : (
+                    <CapTagListWithInput
+                      {...tagListProps}
+                      inputOnChange={(e) => this.updateFormData(e.target.value, val)}
+                    />
+                  )}
+                </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}>
+                <UnifiedPreview
+                  key={val.id}
+                  style={val.customStyling ? val.customStyling : {}}
+                  channel={val.channel ? val.channel : 'SMS'}
+                  content={content}
+                  device={ANDROID}
+                  showDeviceToggle={false}
+                  showHeader={false}
+                  formatMessage={this.props.intl.formatMessage}
+                  senderId={unicodeEnabled ? 'Unicode' : 'ASCII'}
+                />
+              </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;
+            }
+            // Transform FormBuilder content format to UnifiedPreview format
+            // MobilePushPreviewContent expects: { androidContent: { header, bodyText, bodyImage, actions }, iosContent: {...} }
+            const headerValue = this.state.formData[`${this.state.currentTab - 1}`][val.content.title] || '';
+            const bodyTextValue = this.state.formData[`${this.state.currentTab - 1}`][val.content.message] || '';
+            const bodyImageValue = this.state.formData[`${this.state.currentTab - 1}`].image || '';
+            const actionsArray = [];
+            if (this.state.formData[`${this.state.currentTab - 1}`][val.content.secondaryCta1]) {
+              actionsArray.push({label: this.state.formData[`${this.state.currentTab - 1}`][val.content.secondaryCta1]});
+            }
+            if (this.state.formData[`${this.state.currentTab - 1}`][val.content.secondaryCta2]) {
+              actionsArray.push({label: this.state.formData[`${this.state.currentTab - 1}`][val.content.secondaryCta2]});
+            }
+            const mobilePushContent = {
+              androidContent: {
+                header: headerValue,
+                bodyText: bodyTextValue,
+                bodyImage: bodyImageValue,
+                actions: actionsArray,
+                appName: val.content.appName || '',
+              },
+              iosContent: {
+                header: headerValue,
+                bodyText: bodyTextValue,
+                bodyImage: bodyImageValue,
+                actions: actionsArray,
+                appName: val.content.appName || '',
+              },
+            };
+            columns.push(
+              <CapColumn key="input" span={23} offset={1}>
+                <UnifiedPreview
+                  key={val.id}
+                  style={val.customStyling ? val.customStyling : {}}
+                  channel={val.channel || 'MOBILEPUSH'}
+                  content={mobilePushContent}
+                  device={ANDROID}
+                  showDeviceToggle={false}
+                  showHeader={false}
+                  formatMessage={this.props.intl.formatMessage}
+                />
+              </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}
+                  label={val.label}
+                />
+                {ifError && val.errorMessage &&
+                  <span className={'error'}>{val.errorMessage}</span>
+                }
+              </CapColumn>
+            );
+          }
+            break;
+          case "ckeditor": {
+            if (this.props.schema && (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')}
+                  currentOrgDetails={this.props.currentOrgDetails}
+              /> );
+            } 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;
+              }
+              
+              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) || 'en';
+              const content = (!_.isEmpty(this.state.formData) && this.state.formData[`${this.state.currentTab - 1}`] && this.state.formData[`${this.state.currentTab - 1}`][currentLang] && this.state.formData[`${this.state.currentTab - 1}`][currentLang]['template-content'] || '');
+              columns.push(
+                <CapColumn
+                  style={val.colStyle ? val.colStyle : {border : ""}}
+                  span={val.width}
+                  className={(this.state.liquidErrorMessage?.LIQUID_ERROR_MSG?.length || this.state.liquidErrorMessage?.STANDARD_ERROR_MSG?.length) && this.isLiquidFlowSupportedByChannel() ? "error-boundary" : ""}
+                >
+                  <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')}
+                    currentOrgDetails={this.props.currentOrgDetails}
+                  />
+                </CapColumn>
+              );
+            }
+          }
+            break;
+          case "BEEeditor": {
+            let langTab = 1;
+            if (val.id.match(/BEEeditor/g)) {
+              if (val.id.length > 9 && val.id.charAt(9)) {
+                langTab = val.id.charAt(9);
+              }
+            }
+            const { currentTab, formData } = this.state;
+            const supportedLanguages = (formData[currentTab - 1] || {}).selectedLanguages || {};
+            const currentLang = supportedLanguages[langTab - 1];
+
+            let beeJson = '',
+              beeToken = '',
+              uuid = '';
+            const data = formData[`${currentTab - 1}`][currentLang];
+            if (data) {
+              beeJson = data[`BEEeditor${currentTab > 1 ? currentTab : ''}json`];
+              beeToken = data[`BEEeditor${currentTab > 1 ? currentTab : ''}token`];
+              uuid = this.props.uuid;
+            }
+            if (!beeJson || !beeToken) {
+              return false;
+            }
+            let isModuleFilterEnabled = _.get(this.props.location, 'query.type', '') !== 'embedded';
+            const schemaChannel = _.get(this.props.schema, 'channel', "");
+            if (schemaChannel === 'EMAIL') {
+              isModuleFilterEnabled = this.props.isFullMode;
+            }
+            columns.push(
+              <CapColumn style={val.colStyle ? val.colStyle : {}} span={val.width} className={(this.state.liquidErrorMessage?.LIQUID_ERROR_MSG?.length || this.state.liquidErrorMessage?.STANDARD_ERROR_MSG?.length) && this.isLiquidFlowSupportedByChannel() ? "error-boundary" : ""}>
+                <BeeEditor
+                  uid={uuid}
+                  tokenData={beeToken}
+                  id={val.id}
+                  beeJson={beeJson}
+                  showTagsPopover={this.showTagsPopover}
+                  location={this.props.location}
+                  label={val.label || ''}
+                  className={val.className || ''}
+                  userLocale={this.props.userLocale}
+                  selectedOfferDetails={this.props.selectedOfferDetails}
+                  tags={this.props.tags || []}
+                  injectedTags={this.props.injectedTags ? this.props.injectedTags : {}}
+                  saveBeeInstance={this.props.saveBeeInstance}
+                  saveBeeData={this.props.saveBeeData}
+                  onContextChange={this.props.onContextChange}
+                  moduleFilterEnabled={isModuleFilterEnabled}
+                  eventContextTags={this.props?.eventContextTags}
+                  waitEventContextTags={this.props?.waitEventContextTags}
+                  isGetBeeData={this.props?.isGetBeeData}
+                  getBEEData={this.props?.getBEEData}
+                />
+              </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, ADD_LANGUAGE)}
+                  visible={this.state.customPopoverVisible}
+                  onVisibleChange={this.handleCustomPopoverVisibleChange}
+                />
+              </CapColumn>
+            );
+          }
+            break;
+          default:
+            break;
+        }
+        return true;
+      });
+      const row = (
+        <CapRow useLegacy style={field.rowStyle ? field.rowStyle : {}} className={field.rowClassName ? field.rowClassName : ''}>
+          {
+            _.forEach(columns, (value) => {
+              if (value) {
+                return value;
+              }
+              return value;
+            })
+          }
+        </CapRow>
+      );
+      if (columns.length) {
+        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 useLegacy>
+          {
+            _.forEach(columns, (value) => {
+              if (value) {
+                return value;
+              }
+              return value;
+            })
+          }
+        </CapRow>
+      );
+      if (columns.length) {
+        fields.push(row);
+      }
+    });
+    if (!this.props.isEmailLoading && this.props.schema.channel.toUpperCase() === EMAIL && !fields.length) {
+      return (
+        <div style={{ textAlign: 'center' }}>
+          <CapSpin spinning />
+        </div>
+      );
+    }
+    return fields;
+  }
+
+  //To Find from which locale user is loggedin
+  getTranslationMappedLocale(locale) {
+    return GET_TRANSLATION_MAPPED?.[locale];
+  }
+  componentDidMount() {
+    const user = localStorage.getItem('user');
+    let locale = 'en';
+    if (user) {
+      locale = JSON.parse(user).lang || locale;
+    }
+    locale = this.getTranslationMappedLocale(locale);
+    moment.locale(locale);
+    this.setState({
+      translationLang: locale,
+    });
+  }
+
+  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({
+              forceRender: true,
+              tab: (
+                <div className="form-tab-header" onInput={(e) => e.stopPropagation()}>
+                  { this.state.translationLang !== 'ja-JP' && (
+                  _.forEach(renderedContentSections, (value) => {
+                    if (value) {
+                      return value;
+                    }
+                    return value;
+                  }))
+                  }
+                </div>
+              ),
+              key: paneTabKey && paneTabKey !== '' ? `${paneTabKey}` : index,
+              content: (
+                _.forEach(renderedSections, (value) => {
+                  if (value) {
+                    return value;
+                  }
+                  return value;
+                })
+              ),
+            });
+            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 (
+          <CapTab
+            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;
+              })
+            }
+            panes={renderedPanes}
+          />
+        );
+
+      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 (
+      <CapSpin spinning={Boolean((this.isLiquidFlowSupportedByChannel() && this.props.liquidExtractionInProgress) || this.props.metaDataStatus === REQUEST)} tip={this.props.intl.formatMessage(messages.liquidSpinText)} >
+      <CapRow useLegacy>
+        {this.props.schema && this.renderForm()}
+        <SlideBox
+          header={
+            <h3>{this.props.intl.formatMessage(messages.layoutSelection)}</h3>
+          }
+          width={60}
+          content={cmsTemplateSelectionContent}
+          show={this.props.showEdmEmailTemplates}
+          handleClose={this.props.toggleEdmEmailTemplateSelection}
+          loadingText={this.props.intl.formatMessage(
+            messages.loadingEDMTemplates
+          )}
+          isLoading={this.props.getCmsTemplatesInProgress}
+        />
+        {this.props.capDrawerContent && (
+          <CapDrawer
+            content={this.props.capDrawerContent}
+            visible={this.state.isDrawerVisible}
+            width={380}
+            onClose={() => this.props.setDrawerVisibility(false)}
+          />
+        )}
+      </CapRow>
+      </CapSpin>
+    );
+  }
+}
+
+FormBuilder.defaultProps = {
+  isNewVersionFlow: false,
+  userLocale: localStorage.getItem('jlocale') || 'en',
+  showLiquidErrorInFooter: () => {},
+  metaDataStatus: "",
+  waitEventContextTags: {},
+  isTestAndPreviewMode: false, // Default to false to maintain existing behavior
 };
 
-export default FormBuilder;
+FormBuilder.propTypes = {
+  schema: PropTypes.object.isRequired,
+  onSubmit: PropTypes.func.isRequired,
+  onChange: PropTypes.func.isRequired,
+  currentTab: PropTypes.number.isRequired,
+  parent: PropTypes.object.isRequired,
+  formData: PropTypes.object.isRequired,
+  location: PropTypes.object.isRequired,
+  tabKey: PropTypes.string.isRequired,
+  tags: PropTypes.array.isRequired,
+  tagModule: PropTypes.string.isRequired,
+  injectedTags: PropTypes.object.isRequired,
+  onFormValidityChange: PropTypes.func.isRequired,
+  handleCancelModal: PropTypes.func.isRequired,
+  usingTabContainer: PropTypes.bool.isRequired,
+  checkValidation: PropTypes.bool.isRequired,
+  onContextChange: PropTypes.func.isRequired,
+  tabCount: PropTypes.number.isRequired,
+  isNewVersionFlow: PropTypes.bool.isRequired,
+  modal: PropTypes.object.isRequired,
+  showModal: PropTypes.bool.isRequired,
+  isEdit: PropTypes.bool.isRequired,
+  iframeParent: PropTypes.object.isRequired,
+  router: PropTypes.object.isRequired,
+  baseLanguage: PropTypes.string.isRequired,
+  supportedLanguages: PropTypes.array.isRequired,
+  isSchemaChanged: PropTypes.bool.isRequired,
+  cmsTemplates: PropTypes.array.isRequired,
+  getCmsTemplatesInProgress: PropTypes.bool.isRequired,
+  showEdmEmailTemplates: PropTypes.bool.isRequired,
+  toggleEdmEmailTemplateSelection: PropTypes.func.isRequired,
+  handleEdmDefaultTemplateSelection: PropTypes.func.isRequired,
+  setModalContent: PropTypes.func.isRequired,
+  addLanguageType: PropTypes.string.isRequired,
+  startValidation: PropTypes.bool.isRequired,
+  getValidationData: PropTypes.func.isRequired,
+  saveForm: PropTypes.bool.isRequired,
+  stopValidation: PropTypes.func.isRequired,
+  selectedOfferDetails: PropTypes.object.isRequired,
+  saveBeeInstance: PropTypes.func.isRequired,
+  saveBeeData: PropTypes.func.isRequired,
+  uuid: PropTypes.string.isRequired,
+  type: PropTypes.string.isRequired,
+  isEmailLoading: PropTypes.bool.isRequired,
+  moduleType: PropTypes.string.isRequired,
+  showLiquidErrorInFooter: PropTypes.bool.isRequired,
+  eventContextTags: PropTypes.array.isRequired,
+  waitEventContextTags: PropTypes.object,
+  forwardedTags: PropTypes.object.isRequired,
+  isLoyaltyModule: PropTypes.bool.isRequired,
+  isTestAndPreviewMode: PropTypes.bool, // Add new prop type
+  restrictPersonalization: PropTypes.bool,
+};
+
+const mapStateToProps = createStructuredSelector({
+  currentOrgDetails: selectCurrentOrgDetails(),
+  liquidExtractionInProgress: selectLiquidStateDetails(),
+  metaDataStatus: selectMetaDataStatus(),
+  metaEntities: makeSelectMetaEntities(),
+});
+
+function mapDispatchToProps(dispatch) {
+  return {
+    actions: bindActionCreators(actions, dispatch),
+  };
+}
+
+export default connect(mapStateToProps,mapDispatchToProps)(injectIntl(FormBuilder));
+