@capillarytech/creatives-library 9.0.14-beta.0 → 9.0.14

package/v2Components/FormBuilder/Classic.js

@@ -1,4487 +0,0 @@
-/* eslint-disable no-case-declarations */
-
-/**
-*
-* 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 TemplatePreview from '../TemplatePreview';
-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);
-  }
-
-  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,
-    });
-  }
-
-  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
-};
-
-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));
-