@capillarytech/creatives-library 1.0.0 → 1.0.1-alpha.0

package/components/organisms/ScopeSlidebox/ScopeSlidebox.js

@@ -0,0 +1,2616 @@
+import React, { useState, useEffect, useMemo, memo, useCallback } from 'react';
+import PropTypes from 'prop-types';
+import moment from 'moment';
+import isEmpty from 'lodash/isEmpty';
+import cloneDeep from 'lodash/cloneDeep';
+import find from 'lodash/find';
+
+import { injectIntl, intlShape } from 'react-intl';
+import { compose, bindActionCreators } from 'redux';
+import { createStructuredSelector } from 'reselect';
+import { connect } from 'react-redux';
+import { withRouter } from 'react-router-dom';
+import CapNotification from '@capillarytech/cap-ui-library/CapNotification';
+import CapSpin from '@capillarytech/cap-ui-library/CapSpin';
+import CapRow from '@capillarytech/cap-ui-library/CapRow';
+import CapHeader from '@capillarytech/cap-ui-library/CapHeader';
+import CapInfoNote from '@capillarytech/cap-ui-library/CapInfoNote';
+import CapLabel from '@capillarytech/cap-ui-library/CapLabel';
+import CapTooltip from '@capillarytech/cap-ui-library/CapTooltip';
+import withErrorBoundary from 'utils/withErrorBoundary';
+import { notifyHandledException } from 'utils/bugsnag';
+
+import { CAP_SPACE_08 } from '@capillarytech/cap-ui-library/styled/variables';
+import ErrorBoundaryWrapper from '../../molecules/ErrorBoundaryWrapper';
+
+import {
+  LOYALTY_USER,
+  NON_LOYALTY_USER,
+  INITIAL_STORE,
+  IS_INCLUDED_SELECTED,
+  CLUSTER_SELECTED,
+  INTITAL_DATE_RANGE,
+  ACTIVE_CLUSTER,
+  ALL_USERS,
+  NO_LIMIT,
+  SPECIFIC_LIMIT,
+  getSpecifierMessages,
+  ICON,
+  UPLOAD_STORE_LIST,
+  SELECT_STORE_LIST,
+  INITIAL_STORE_ID_FILE,
+} from './constants';
+
+import messages from './messages';
+import style from './style';
+import * as actions from '../ConfigureWorkflows/actions';
+import * as capActions from '../../pages/Cap/actions';
+import * as selectors from '../ConfigureWorkflows/selectors';
+import CollapseWithMultiSelect from '../../molecules/CollapseWithMultiSelect';
+import CollapseWithStore from '../../molecules/CollapseWithStore';
+import CollapseWithRadioGroup from '../../molecules/CollapseWithRadioGroup';
+import CollapseWithSwitchSelect from '../../molecules/CollapseWithSwitchSelect';
+import CollapseWithDateRange from '../../molecules/CollapseWithDateRange';
+import TriggerAction from '../../atoms/TriggerAction';
+import globalMessages from '../../pages/Cap/messages';
+import { CapRowWithSpacing } from '../../pages/Cap/style';
+import { gtmPush } from '../../../utils/gtmTrackers';
+import {
+  SCOPE_AGGREGATE_ELEMENTS,
+  LOYALTY_TYPE,
+  EVENT_SOURCE,
+  DATE_RANGE,
+  STORES,
+  ZONES,
+  CLUSTER,
+  CONCEPTS,
+  REQUEST,
+  FAILURE,
+  SOURCE_LOYALTY,
+  SOURCE_PROMOTION,
+  SUCCESS,
+  LOCALE_DATE_FORMAT,
+  LOYALTY_UX_ENHANCEMENTS,
+  DATE_FORMAT,
+  ROOT,
+} from '../../pages/App/constants';
+import { getFilterInfo } from '../ConfigureWorkflows/utils';
+import withStyles from '../../../utils/withStyles';
+import { validateStoreIdsEnhancement, computeAncestors, flipSelectedOptions} from './utils';
+import { makeSelectCap } from '../../pages/Cap/selectors';
+
+import ScopeHeader from './ScopeContentHeader';
+import ScopeDescription from './ScopeContentDescription';
+import OptionWithTooltip from '../../atoms/OptionWithTooltip';
+
+const {
+  makeSelectScopeAndCapCommonData,
+  makeSelectScopingData,
+  makeSelectSaveScopingStatus,
+} = selectors;
+
+export const ScopeSlidebox = ({
+  /** InjectedProps */
+  className,
+  intl: { formatMessage },
+  match: {
+    params: { programId },
+  },
+  actions,
+  rulesetData: { getRulesetsStatus },
+  scopingData: {
+    getStoresRequest,
+    getZonesRequest,
+    getConceptsRequest,
+    stores: storesFromProp,
+    concepts: conceptFromProp,
+    zones: zonesFromProp,
+    getEventSource,
+    eventSource: eventSourceFromProp,
+    getClusterRequest,
+    cluster: clusterFromProps,
+  },
+  status: { saveScopingStatus = '' },
+  /** InjectedProps */
+  /*Props from parent */
+  source = SOURCE_LOYALTY,
+  selectedRuleset,
+  eventType,
+  processedRuleSets,
+  setProcessedRuleSets,
+  disabled,
+  userData,
+  groupTreeList,
+  // fake prop, not passed from any parent. Exists to disable scope enhancements, without having to raise hotswaps.
+  scopeEnhancementEnabled = false,
+}) => { 
+  
+  const [scoppingList, setScoppingList] = useState([]);
+  const [contentAdded, setContentAdded] = useState([]);
+
+  const [currentTab, setCurrentTab] = useState(null);
+  const [loyaltyType, setLoyaltyType] = useState(ALL_USERS);
+  /** Store Related state */
+  const [store, setStore] = useState(INITIAL_STORE);
+  const [storeIdsFromFile, setStoreIdsFromFile] = useState(
+    INITIAL_STORE_ID_FILE,
+  );
+  const [isSpecificStore, setIsSpecificStore] = useState(NO_LIMIT);
+  /** Date Range Related state*/
+  const [dateRange, setDateRange] = useState(INTITAL_DATE_RANGE);
+  const [isDateRangeIncluded, setIsDateRangeIncluded] = useState(false);
+  const [isSpecificDate, setIsSpecificDate] = useState(NO_LIMIT);
+  /** Concept Related state*/
+  const [concepts, setConcepts] = useState(IS_INCLUDED_SELECTED);
+  const [isSpecificConcept, setIsSpecificConcept] = useState(false);
+  /** Zone Related state*/
+  const [zone, setZone] = useState(IS_INCLUDED_SELECTED);
+  const [isSpecificZone, setIsSpecificZone] = useState(NO_LIMIT);
+  /** Event Source Related state*/
+  const [eventSource, setEventSource] = useState([]);
+  const [isSpecificEventSource, setIsSpecificEventSource] = useState(NO_LIMIT);
+  /** Cluster Related state*/
+  const [clusters, setCluster] = useState(CLUSTER_SELECTED);
+  const [clusterValueOptions, setClusterValueOptions] = useState([]);
+  const [clusterValues, setClusterValues] = useState([]);
+  const [isSpecificCluster, setIsSpecificCluster] = useState(NO_LIMIT);
+
+  const [rootZoneModalData, setRootZoneModalData] = useState(false);
+  const [rootConceptModalData, setRootConceptModalData] = useState(false);
+
+  const { currentOrgDetails } = userData;
+  const { accessibleFeatures = [] } = currentOrgDetails;
+  /* Commented code to serve as a reference for implementing feature control for UX Enhancements in the future. */
+  // const hasLoyaltyUXEnhancementsEnabled = accessibleFeatures.includes(
+  //   LOYALTY_UX_ENHANCEMENTS,
+  // );
+
+  // if the accessible feature contains LOYALTY_UX_ENHANCEMENTS flag exists, then enable scope enhancement
+  const hasLoyaltyUXEnhancementsEnabled = scopeEnhancementEnabled;
+
+  /** End */
+
+  let validStoresForCurrentRuleset, validZonesForCurrentRuleset, validConceptsForCurrentRuleset, validEventSourcesForCurrentRuleset ;
+
+  let validPrimaryClustersForCurrentRuleset, validSecondaryClustersForCurrentRuleset;
+
+  let storeOptionsMultiEnhancement, zoneOptionsEnhancement, conceptOptionsEnhancement, eventSourceOptionsEnhancement, clusterOptionsEnhancement, clusterValuesEnhancement, loyaltyTypeDisabilityInfo;
+
+  let storeOptionsDisabilityInfo, zoneOptionsDisabilityInfo, conceptOptionsAlternateDisabilityInfo, eventSourceOptionsDisabilityInfo, clusterOptionsAlternateDisabilityInfo, clusterValuesAlternate ;
+
+  // array of all the parents for the current ruleset, from farthest to closest parent.
+  let parentsForCurrentRuleset = useMemo(()=>{
+    return computeAncestors(selectedRuleset, groupTreeList);
+  }, [groupTreeList, selectedRuleset]);
+
+  let isSelectedRulesetRoot = useMemo(()=>{
+    // return true if the array containing the parents for selectedRuleset is empty.
+    return parentsForCurrentRuleset.length === 0;
+  },[parentsForCurrentRuleset])
+
+
+  useEffect(()=>{
+    //  This block is used to populate the secondary options for cluster scope.
+    const secondaryOptions = clusterFromProps?.filter(cluster => cluster?.status === ACTIVE_CLUSTER)?.reduce(
+      (secondaryOptions, cluster) => {
+        if (cluster.name === clusters.selected || cluster.name === clusters.selected[0])
+          secondaryOptions = cluster?.segmentValues?.map(({ id, value }) => ({
+            key: id,
+            title: value,
+          }));
+        return secondaryOptions;
+      },
+      [],
+    );
+
+    setClusterValueOptions(secondaryOptions);
+  },[clusters, clusterFromProps, processedRuleSets]);
+
+  const [mounted, setMounted] = useState(false);
+  const showSpin =
+    getRulesetsStatus === REQUEST ||
+    getStoresRequest === REQUEST ||
+    getZonesRequest === REQUEST ||
+    getConceptsRequest === REQUEST ||
+    getEventSource === REQUEST ||
+    getClusterRequest === REQUEST ||
+    saveScopingStatus === REQUEST;
+
+  const showError =
+    getRulesetsStatus === FAILURE ||
+    getStoresRequest === FAILURE ||
+    getZonesRequest === FAILURE ||
+    getConceptsRequest === FAILURE ||
+    getEventSource === FAILURE ||
+    getClusterRequest === FAILURE;
+
+  const clusterOptions = useMemo(
+    () =>
+      clusterFromProps
+        ?.filter(cluster => cluster.status == ACTIVE_CLUSTER)
+        ?.map(({ id, name }) => ({
+          label: name,
+          value: `${id}`,
+          key: `${id}`,
+        })),
+    [clusterFromProps],
+  );
+
+  const eventSourceOptions = useMemo(
+    () =>
+      eventSourceFromProp?.map(value => ({
+        title: value,
+        key: `${value}`,
+        ['data-testid']: value,
+      })),
+    [eventSourceFromProp],
+  );
+
+  
+  const storeOptionsMulti = useMemo(
+    () =>
+      storesFromProp?.map(({ code, id }) => ({
+        title: code,
+        key: `${id}`,
+        ['data-testid']: code,
+      })),
+    [storesFromProp],
+  );
+    
+    // function to get the ruleset's display name by ruleset ID.
+    const getDisplayNameForRuleset = (ruleset) => {
+      return processedRuleSets?.group[ruleset]?.displayName;
+    }
+
+    // function to find all the valid secondary cluster valus, for given primary cluster selection. 
+  const calculateValidSecondaryClusterOptions = primaryCluster => {
+    let validSecondaryClusterOptions = [];
+
+    let optionsForGivenPrimaryCluster = clusterFromProps.filter(({ name }) => name === primaryCluster)[0].segmentValues;
+
+    if (!isSelectedRulesetRoot) {
+      (optionsForGivenPrimaryCluster || []).forEach(({ value }) => {
+        let valid = true;
+
+        for (let k = 0; k < parentsForCurrentRuleset.length; k++) {
+          let curParent = parentsForCurrentRuleset[k];
+          const curParentScopeObject = processedRuleSets?.group[curParent]?.filterInfo?.filter(curScope => curScope?.name === CLUSTER)[0];
+
+          if ((curParentScopeObject && (curParentScopeObject?.isInclude === false && curParentScopeObject?.propertyToValues?.clusterValues.includes(value))) || (curParentScopeObject?.isInclude === true && !curParentScopeObject?.propertyToValues?.clusterValues?.includes(value))) {
+            valid = false;
+            break;
+          }
+        }
+        if (valid) {
+          validSecondaryClusterOptions.push(value);
+        }
+      });
+      return validSecondaryClusterOptions;
+    }
+
+    // root ruleset
+    return null;
+  };
+
+  const decideClusterValueOptionsDisability = secondaryClusterValue => {
+    let enhancedTitle = secondaryClusterValue;
+    if (!isSelectedRulesetRoot) {
+      for (let i = 0; i < parentsForCurrentRuleset.length; i++) {
+        let curParent = parentsForCurrentRuleset[i];
+        let curParentScopeObject = processedRuleSets?.group[curParent]?.filterInfo?.filter(curScope => curScope?.name === CLUSTER)[0];
+
+        // parent has filter info for customer cluster.
+        if (curParentScopeObject && ((curParentScopeObject.isInclude === false && curParentScopeObject.propertyToValues.clusterValues.includes(secondaryClusterValue)) || (curParentScopeObject.isInclude === true && !curParentScopeObject.propertyToValues.clusterValues.includes(secondaryClusterValue)) || curParentScopeObject.propertyToValues.clusterName[0] !== clusters.selected)) {
+          enhancedTitle = <CapTooltip placement="left" title={formatMessage(
+                messages.parentWithDiffConfigMessage,
+                { parent: getDisplayNameForRuleset(curParent) },
+              )}>
+              {secondaryClusterValue}
+            </CapTooltip>;
+        }
+      }
+    }
+
+    return { displayTitle: enhancedTitle, disabled: enhancedTitle === secondaryClusterValue ? false : true };
+  };
+
+  const decideScopeOptionDisability = scopeType => {
+    switch (scopeType) {
+      case CLUSTER:
+        let clusterOptionResult = {};
+
+        if (!isSelectedRulesetRoot) {
+          // we have parents for this ruleset.
+          for (let i = 0; i < clusterFromProps.length; i++) {
+            // iterate over every cluster option for given program.
+            let curCluster = clusterFromProps[i];
+            // iterate over every parent for the given ruleset.
+            for (let k = 0; k < parentsForCurrentRuleset.length; k++) {
+              let curParent = parentsForCurrentRuleset[k];
+              let clusterScopeObject = processedRuleSets?.group[curParent]?.filterInfo?.filter(curScope => curScope?.name === CLUSTER)[0];
+
+              if (clusterScopeObject && clusterScopeObject?.propertyToValues?.clusterName[0] !== curCluster?.name) {
+                // if misconfig somewhere in a parent, disable with proper tooltip message.
+                clusterOptionResult[(curCluster?.id)] = { disabled: true, displayTitle: <CapTooltip placement="left" title={formatMessage(
+                        messages.parentWithDiffConfigMessage,
+                        { parent: getDisplayNameForRuleset(curParent) },
+                      )}>
+                      {curCluster?.name}
+                    </CapTooltip> };
+                // stop checking for the current store button.
+                break;
+              }
+            }
+            if (!clusterOptionResult[(curCluster?.id)]) {
+              clusterOptionResult[(curCluster?.id)] = { disabled: false, displayTitle: curCluster?.name };
+            }
+          }
+        } else {
+          // root ruleset
+          clusterFromProps.map(curCluster => {
+            clusterOptionResult[(curCluster?.id)] = { disabled: false, displayTitle: curCluster?.name };
+          });
+        }
+
+        return clusterOptionResult;
+
+      case EVENT_SOURCE:
+        let eventSourceResult = {};
+        if (!isSelectedRulesetRoot) {
+          // we have parents for this ruleset.
+          for (let i = 0; i < eventSourceFromProp.length; i++) {
+            // iterate over every zone option for given program.
+            let curEventSource = eventSourceFromProp[i];
+            // iterate over every parent for the given ruleset.
+            for (let k = 0; k < parentsForCurrentRuleset.length; k++) {
+              let curParent = parentsForCurrentRuleset[k];
+              let eventSourceScopeObject = processedRuleSets?.group[curParent]?.filterInfo?.filter(curScope => curScope?.name === EVENT_SOURCE)[0];
+              if (eventSourceScopeObject && eventSourceScopeObject?.propertyToValues?.eventSource.includes(curEventSource) === false) {
+                // if misconfig somewhere in a parent, disable with proper tooltip message.
+                eventSourceResult[curEventSource] = { disabled: true, displayTitle: <CapTooltip placement="left" title={formatMessage(
+                        messages.parentWithDiffConfigMessage,
+                        { parent: getDisplayNameForRuleset(curParent) },
+                      )}>
+                      {curEventSource}
+                    </CapTooltip> };
+                // stop checking for the current store button.
+                break;
+              }
+            }
+            if (!eventSourceResult[curEventSource]) {
+              eventSourceResult[curEventSource] = { disabled: false, displayTitle: curEventSource };
+            }
+          }
+        }
+
+        // root ruleset
+        else {
+          eventSourceFromProp.map(curEventSource => {
+            eventSourceResult[curEventSource] = { disabled: false, displayTitle: curEventSource };
+          });
+        }
+
+        return eventSourceResult;
+      case LOYALTY_TYPE:
+        if (!isSelectedRulesetRoot) {
+          // non root ruleset
+          let loyaltyTypeOptions = [ALL_USERS, LOYALTY_USER, NON_LOYALTY_USER];
+          let loyaltyTypesResult = {};
+          let curLoyaltyOption;
+          for (let i = 0; i < 3; i++) {
+            curLoyaltyOption = loyaltyTypeOptions[i];
+            for (let k = 0; k < parentsForCurrentRuleset.length; k++) {
+              let curParent = parentsForCurrentRuleset[k];
+              // getting the loyaltyType scope from each parent
+              let loyaltyTypeScopeObject = processedRuleSets?.group[curParent]?.filterInfo?.filter(curScope => curScope?.name === LOYALTY_TYPE)[0];
+
+              if ((loyaltyTypeScopeObject && (loyaltyTypeScopeObject?.isInclude === true && loyaltyTypeScopeObject?.propertyToValues?.loyaltyType[0] !== curLoyaltyOption)) || (loyaltyTypeScopeObject?.isInclude === false && loyaltyTypeScopeObject?.propertyToValues?.loyaltyType[0] === curLoyaltyOption)) {
+                loyaltyTypesResult[curLoyaltyOption] = { disabled: true, tooltipText: formatMessage(
+                    messages.parentWithDiffConfigMessage,
+                    { parent: getDisplayNameForRuleset(curParent) },
+                  ) };
+
+                // stop checking for the current radio button.
+                break;
+              }
+            }
+
+            if (!loyaltyTypesResult[curLoyaltyOption]) {
+              loyaltyTypesResult[curLoyaltyOption] = { disabled: false, tooltipText: null };
+            }
+          }
+          return loyaltyTypesResult;
+        }
+
+        return { [ALL_USERS]: { disabled: false, tooltipText: null }, [LOYALTY_USER]: { disabled: false, tooltipText: null }, [NON_LOYALTY_USER]: { disabled: false, tooltipText: null } };
+
+      case STORES:
+        let storeResult = {};
+        if (!isSelectedRulesetRoot) {
+          // we have parents for this ruleset.
+          for (let i = 0; i < storesFromProp.length; i++) {
+            // iterate over every store option for given program.
+
+            let curStore = storesFromProp[i];
+
+            // iterate over every parent for the given ruleset.
+            for (let k = 0; k < parentsForCurrentRuleset.length; k++) {
+              let curParent = parentsForCurrentRuleset[k];
+              let storeScopeObject = processedRuleSets?.group[curParent]?.filterInfo?.filter(curScope => curScope?.name === STORES)[0];
+
+              if ((storeScopeObject && (storeScopeObject?.isInclude === true && storeScopeObject?.propertyToValues?.storeId.includes('' + curStore?.id) === false)) || (storeScopeObject?.isInclude === false && storeScopeObject?.propertyToValues?.storeId.includes('' + curStore?.id) === true)) {
+                // if misconfig somewhere in a parent, disable with proper tooltip message.
+                storeResult[(curStore?.id)] = { disabled: true, displayTitle: <CapTooltip placement="left" title={formatMessage(
+                        messages.parentWithDiffConfigMessage,
+                        { parent: getDisplayNameForRuleset(curParent) },
+                      )}>
+                      {curStore?.code}
+                    </CapTooltip>, searchText: curStore?.code };
+
+                // stop checking for the current store button.
+                break;
+              }
+            }
+            if (!storeResult[(curStore?.id)]) {
+              storeResult[(curStore?.id)] = { disabled: false, displayTitle: curStore?.code };
+            }
+          }
+        }
+
+        // root ruleset
+        else {
+          storesFromProp?.map(curStore => {
+            storeResult[(curStore?.id)] = { disabled: false, displayTitle: curStore?.code };
+          });
+        }
+
+        return storeResult;
+
+      case ZONES:
+        let zoneResult = {};
+        if (!isSelectedRulesetRoot) {
+          // we have parents for this ruleset.
+          for (let i = 0; i < zonesFromProp.length; i++) {
+            // iterate over every zone option for given program.
+            let curZone = zonesFromProp[i];
+            // iterate over every parent for the given ruleset.
+            for (let k = 0; k < parentsForCurrentRuleset.length; k++) {
+              let curParent = parentsForCurrentRuleset[k];
+              let zoneScopeObject = processedRuleSets?.group[curParent]?.filterInfo?.filter(curScope => curScope?.name === ZONES)[0];
+
+              if ((zoneScopeObject && (zoneScopeObject?.isInclude === true && zoneScopeObject?.propertyToValues?.zoneIds.includes('' + curZone?.id) === false)) || (zoneScopeObject?.isInclude === false && zoneScopeObject?.propertyToValues?.zoneIds.includes('' + curZone?.id) === true)) {
+                // if misconfig somewhere in a parent, disable with proper tooltip message.
+                zoneResult[(curZone?.id)] = { disabled: true, displayTitle: <CapTooltip placement="left" title={formatMessage(
+                        messages.parentWithDiffConfigMessage,
+                        { parent: getDisplayNameForRuleset(curParent) },
+                      )}>
+                      {curZone?.name}
+                    </CapTooltip>};
+                // stop checking for the current store button.
+                break;
+              }
+            }
+            if (!zoneResult[(curZone?.id)]) {
+              zoneResult[(curZone?.id)] = { disabled: false, displayTitle: curZone?.name };
+            }
+          }
+        }
+
+        // root ruleset
+        else {
+          zonesFromProp.map(curZone => {
+            zoneResult[(curZone?.id)] = { disabled: false, displayTitle: curZone?.name, searchText: curZone?.name };
+          });
+        }
+
+        return zoneResult;
+
+      case CONCEPTS:
+        let conceptResult = {};
+        if (!isSelectedRulesetRoot) {
+          // we have parents for this ruleset.
+          for (let i = 0; i < conceptFromProp.length; i++) {
+            // iterate over every concept option for given program.
+            let curConcept = conceptFromProp[i];
+            // iterate over every parent for the given ruleset.
+            for (let k = 0; k < parentsForCurrentRuleset.length; k++) {
+              let curParent = parentsForCurrentRuleset[k];
+              let conceptScopeObject = processedRuleSets?.group[curParent]?.filterInfo?.filter(curScope => curScope?.name === CONCEPTS)[0];
+
+              if ((conceptScopeObject && (conceptScopeObject?.isInclude === true && conceptScopeObject?.propertyToValues?.conceptIds.includes('' + curConcept?.id) === false)) || (conceptScopeObject?.isInclude === false && conceptScopeObject?.propertyToValues?.conceptIds.includes('' + curConcept?.id) === true)) {
+                // if misconfig somewhere in a parent, disable with proper tooltip message.
+                conceptResult[(curConcept?.id)] = { disabled: true, displayTitle: <CapTooltip placement="left" title={formatMessage(
+                        messages.parentWithDiffConfigMessage,
+                        { parent: getDisplayNameForRuleset(curParent) },
+                      )}>
+                      {curConcept?.name}
+                    </CapTooltip>, searchText: curConcept?.name};
+                break;
+              }
+            }
+            if (!conceptResult[(curConcept?.id)]) {
+              conceptResult[(curConcept?.id)] = { disabled: false, displayTitle: curConcept?.name, searchText: curConcept?.name  };
+            }
+          }
+        }
+
+        // root ruleset
+        else {
+          conceptFromProp.map(curConcept => {
+            conceptResult[(curConcept?.id)] = { disabled: false, displayTitle: curConcept?.name };
+          });
+        }
+
+        return conceptResult;
+
+      default:
+        break;
+    }
+  };
+
+
+  if( hasLoyaltyUXEnhancementsEnabled ){
+
+    loyaltyTypeDisabilityInfo = useMemo(()=>{
+      return decideScopeOptionDisability(LOYALTY_TYPE);
+    },[processedRuleSets, selectedRuleset]);
+
+    storeOptionsDisabilityInfo =  useMemo(()=>{
+      return decideScopeOptionDisability(STORES);
+    },[storesFromProp, selectedRuleset]);
+
+    zoneOptionsDisabilityInfo =  useMemo(()=>{
+      return decideScopeOptionDisability(ZONES);
+    },[zonesFromProp]);
+
+    conceptOptionsAlternateDisabilityInfo =  useMemo(()=>{
+      return decideScopeOptionDisability(CONCEPTS);
+    },[conceptFromProp]);
+
+    eventSourceOptionsDisabilityInfo =  useMemo(()=>{
+      return decideScopeOptionDisability(EVENT_SOURCE);
+    },[eventSourceFromProp]);
+
+    clusterOptionsAlternateDisabilityInfo = useMemo(()=>{
+      return decideScopeOptionDisability(CLUSTER);
+    },[clusterFromProps]);
+
+    clusterValuesAlternate = useMemo(()=>{
+      return decideScopeOptionDisability(CLUSTER);
+    },[clusterOptionsAlternateDisabilityInfo, clusterFromProps])
+
+    storeOptionsMultiEnhancement = storesFromProp?.map(({ code, id }) => {
+      return { title: storeOptionsDisabilityInfo[id].displayTitle, key: `${id}`, ['data-testid']: code, disabled: storeOptionsDisabilityInfo[id].disabled, searchText: code };
+    });
+
+    zoneOptionsEnhancement = zonesFromProp?.map(({ code, id, name }) => {
+      return { title: zoneOptionsDisabilityInfo[id].displayTitle, key: `${id}`, ['data-testid']: code, disabled: zoneOptionsDisabilityInfo[id].disabled,  searchText: name};
+    });
+
+    conceptOptionsEnhancement = conceptFromProp?.map(({ code, id, name }) => {
+      return { title: conceptOptionsAlternateDisabilityInfo[id].displayTitle, key: `${id}`, ['data-testid']: code, disabled: conceptOptionsAlternateDisabilityInfo[id].disabled,  searchText: name };
+    });
+
+    eventSourceOptionsEnhancement = eventSourceFromProp?.map((curEventSource) => {
+      return { title: eventSourceOptionsDisabilityInfo[curEventSource].displayTitle, key: `${curEventSource}`, ['data-testid']: curEventSource, disabled: eventSourceOptionsDisabilityInfo[curEventSource].disabled, searchText: `${curEventSource}`,  };
+    });
+
+  
+    clusterOptionsEnhancement = useMemo(
+      () =>
+        clusterFromProps
+          ?.filter(cluster => cluster.status == ACTIVE_CLUSTER)
+          ?.map(({ id }) => {
+            return {
+              label: clusterValuesAlternate[id]?.displayTitle,
+              value: `${id}`,
+              key: `${id}`,
+              disabled: clusterValuesAlternate[id]?.disabled,
+            };
+          }),
+      [clusterFromProps],
+    );
+
+
+    clusterValuesEnhancement = useMemo(
+      () =>
+      {
+        return clusterValueOptions?.map(({ key, title }) => {
+            let { displayTitle, disabled } = decideClusterValueOptionsDisability(
+              title,
+            );
+            return {
+              title: displayTitle,
+              key,
+              disabled,
+              searchText: title,
+            };
+          }
+          )},
+      [clusterValueOptions, clusters],
+    );
+
+  }
+
+  if(hasLoyaltyUXEnhancementsEnabled){
+
+    validStoresForCurrentRuleset = useMemo(()=>{
+      return storesFromProp.reduce((accumulator, curStore) => {
+        return storeOptionsDisabilityInfo[curStore?.id]?.disabled === false ? [...accumulator, ''+curStore?.id] : accumulator;
+      }, []);
+    },[selectedRuleset, storesFromProp]);
+
+
+    validZonesForCurrentRuleset = useMemo(()=>{
+      return zonesFromProp.reduce((accumulator, curZone) => {
+        return zoneOptionsDisabilityInfo[curZone?.id]?.disabled === false ? [...accumulator, ''+curZone?.id] : accumulator;
+      }, []);
+    },[processedRuleSets, zonesFromProp]);
+
+    
+    validConceptsForCurrentRuleset = useMemo(()=>{
+      return conceptFromProp.reduce((accumulator, curConcept) => {
+        return conceptOptionsAlternateDisabilityInfo[curConcept?.id]?.disabled === false ? [...accumulator, ''+curConcept?.id] : accumulator;
+      }, []);
+    },[processedRuleSets, conceptFromProp]);
+
+
+    validEventSourcesForCurrentRuleset = useMemo(()=>{
+      return eventSourceFromProp.reduce((accumulator, curEventSource) => {
+        return eventSourceOptionsDisabilityInfo[curEventSource]?.disabled === false ? [...accumulator, curEventSource] : accumulator;
+      }, []);
+    },[processedRuleSets, eventSourceFromProp]);
+  
+
+
+    // array containing all the valid primary clusters for selectedRuleset.
+    validPrimaryClustersForCurrentRuleset = useMemo(()=>{
+
+      let validArr = [];
+      clusterFromProps.map(({ name, id }) => {
+        if (clusterOptionsAlternateDisabilityInfo[id].disabled === false) {
+          validArr.push(name);
+        }
+      });
+
+      return validArr;
+    },[selectedRuleset, clusterFromProps, clusterOptionsAlternateDisabilityInfo]);
+
+
+    validSecondaryClustersForCurrentRuleset = useMemo(()=>{
+
+      let validArr = [];
+      if(validPrimaryClustersForCurrentRuleset.length === 0){
+        // no valid primary cluster
+        return null;
+      }
+
+      else if(validPrimaryClustersForCurrentRuleset.length === clusterFromProps.length){
+        // free flow case, no cluster selected at parent level. No scoping object in filterInfo for this case
+        return [];
+      }
+
+      else if(validPrimaryClustersForCurrentRuleset.length === 1){
+        // exactly one valid cluster from parent level. move through all parents and check which secondary options for cluster is valid/invalid.
+        const validPrimaryCluster = validPrimaryClustersForCurrentRuleset[0];
+
+        return calculateValidSecondaryClusterOptions(validPrimaryCluster);
+
+      }
+    },[selectedRuleset,validPrimaryClustersForCurrentRuleset, clusterFromProps ]);
+  
+  }
+
+
+  const zoneOptions = useMemo(
+    () =>
+      zonesFromProp?.map(({ name, id }) => ({
+        label: name,
+        title: (
+          <OptionWithTooltip
+            optionLabel={name}
+            infoVisible={name === ROOT}
+            infoProps={{
+              title: formatMessage(globalMessages.rootSelectModalDescription),
+              placement: 'left',
+              className: 'margin-l-4',
+            }}
+          />
+        ),
+        key: `${id}`,
+        ['data-testid']: name,
+      })),
+    [zonesFromProp],
+  );
+
+  const zoneRootValue = useMemo(
+    () => zonesFromProp?.find(({ name }) => name === ROOT)?.id,
+    [zonesFromProp],
+  );
+
+  const conceptOptions = useMemo(
+    () =>
+      conceptFromProp?.map(({ name, id }) => ({
+        label: name,
+        title: (
+          <OptionWithTooltip
+            optionLabel={name}
+            infoVisible={name === ROOT}
+            infoProps={{
+              title: formatMessage(globalMessages.rootSelectModalDescription),
+              placement: 'left',
+              className: 'margin-l-4',
+            }}
+          />
+        ),
+        key: `${id}`,
+        ['data-testid']: name,
+      })),
+    [conceptFromProp],
+  );
+
+  const conceptRootValue = useMemo(
+    () => conceptFromProp?.find(({ name }) => name === ROOT)?.id,
+    [conceptFromProp],
+  );
+
+  /** Get Specifier Messages - constant */
+  const {
+    SPECIFER_MESSAGES,
+    ALL_MESSAGES,
+    LOYALTY_TYPE_PREVIEW,
+    STORES: STORE_PREVIEW_MESSAGES,
+  } = getSpecifierMessages(formatMessage, hasLoyaltyUXEnhancementsEnabled, isSelectedRulesetRoot);
+
+  const handleSaveFilterInfo = useCallback(
+    promotionFilterInfo => {
+      const clonnedRulesets = cloneDeep(processedRuleSets);
+      const modifiedRuleset = clonnedRulesets.group[selectedRuleset];
+      modifiedRuleset.filterInfo = promotionFilterInfo;
+      modifiedRuleset.isPristine = false;
+      clonnedRulesets.group[selectedRuleset] = modifiedRuleset;
+      setProcessedRuleSets(clonnedRulesets);
+      CapNotification.success({
+        message: formatMessage(globalMessages.editedSuccessfully),
+      });
+    },
+    [processedRuleSets, setProcessedRuleSets, selectedRuleset],
+  );
+
+  useEffect(
+    () => {
+      if (!mounted) {
+        const shouldMakeRequest = field =>
+          ![SUCCESS, FAILURE, REQUEST].includes(field);
+        if (shouldMakeRequest(getEventSource)) actions.getEventSource();
+        if (shouldMakeRequest(getClusterRequest)) actions.getClusters();
+        if (shouldMakeRequest(getZonesRequest)) actions.getZones();
+        if (shouldMakeRequest(getConceptsRequest)) actions.getConcepts();
+        if (shouldMakeRequest(getStoresRequest)) actions.getStores();
+        setMounted(true);
+      }
+    },
+    [
+      mounted,
+      actions,
+      getEventSource,
+      getClusterRequest,
+      getZonesRequest,
+      getConceptsRequest,
+      getStoresRequest,
+    ],
+  );
+
+  useEffect(
+    () => {
+      let newLoyaltyType = ALL_USERS;
+      let store = INITIAL_STORE;
+      let isSpecificStore = NO_LIMIT;
+      let dateRange = INTITAL_DATE_RANGE;
+      let isSpecificDate = NO_LIMIT;
+      let isDateRangeIncluded = false;
+      let concepts = IS_INCLUDED_SELECTED;
+      let isSpecificConcept = NO_LIMIT;
+      let zone = IS_INCLUDED_SELECTED;
+      let isSpecificZone = NO_LIMIT;
+      let eventSource = [];
+      let isSpecificEventSource = NO_LIMIT;
+      let clusters = CLUSTER_SELECTED;
+      let clusterValue = [];
+      let contentAdded = [];
+      let isSpecificCluster = NO_LIMIT;
+      const scoppingList =
+        processedRuleSets.group[selectedRuleset]?.filterInfo || [];
+      const scopingObject = {};
+
+      scoppingList.map(scope => {
+        scopingObject[scope.name] = scope;
+      });
+
+      let scopeOrder = [
+        LOYALTY_TYPE,
+        EVENT_SOURCE,
+        DATE_RANGE,
+        STORES,
+        ZONES,
+        CLUSTER,
+        CONCEPTS,
+      ];
+      scopeOrder.forEach(scope => {
+        switch (scope) {
+          case LOYALTY_TYPE: {
+            const { propertyToValues } = scopingObject[LOYALTY_TYPE] || {};
+            contentAdded.push(LOYALTY_TYPE);
+            if (propertyToValues?.loyaltyType?.[0]) {
+              newLoyaltyType = propertyToValues.loyaltyType[0];
+            }
+            break;
+          }
+          case EVENT_SOURCE: {
+            const { propertyToValues } = scopingObject[EVENT_SOURCE] || {};
+            contentAdded.push(EVENT_SOURCE);
+            if (propertyToValues) {
+              eventSource = propertyToValues.eventSource;
+              isSpecificEventSource = SPECIFIC_LIMIT;
+            }
+            break;
+          }
+          case ZONES: {
+            const { propertyToValues, isInclude } = scopingObject[ZONES] || {};
+            contentAdded.push(ZONES);
+            if (propertyToValues) {
+              isSpecificZone = SPECIFIC_LIMIT;
+              zone = {
+                isIncluded: isInclude,
+                selected: hasLoyaltyUXEnhancementsEnabled && isInclude === false ? flipSelectedOptions(propertyToValues.zoneIds, zonesFromProp) : propertyToValues.zoneIds,
+              };
+            }
+            break;
+          }
+          case CONCEPTS: {
+            const { propertyToValues, isInclude } =
+              scopingObject[CONCEPTS] || {};
+            contentAdded.push(CONCEPTS);
+            if (propertyToValues) {
+              isSpecificConcept = SPECIFIC_LIMIT;
+              concepts = {
+                isIncluded: isInclude,
+                selected: hasLoyaltyUXEnhancementsEnabled && isInclude === false ? flipSelectedOptions(propertyToValues.conceptIds, conceptFromProp) : propertyToValues.conceptIds,
+              };
+            }
+            break;
+          }
+          case STORES: {
+            const { propertyToValues, isInclude } = scopingObject[STORES] || {};
+            contentAdded.push(STORES);
+            if (propertyToValues) {
+              isSpecificStore = SELECT_STORE_LIST;
+              store = {
+                isIncluded: isInclude,
+                selected: hasLoyaltyUXEnhancementsEnabled && isInclude === false ? flipSelectedOptions(propertyToValues.storeId, storesFromProp) : propertyToValues.storeId,
+              };
+            }
+            break;
+          }
+          case DATE_RANGE: {
+            const { propertyToValues, isInclude } =
+              scopingObject[DATE_RANGE] || {};
+            contentAdded.push(DATE_RANGE);
+            if (propertyToValues) {
+              isSpecificDate = SPECIFIC_LIMIT;
+              const { startDate, endDate } = propertyToValues;
+              let [sd, st] = startDate[0].split(' ');
+              let [ed, et] = endDate[0].split(' ');
+              isDateRangeIncluded = isInclude;
+              dateRange = {
+                startDate: {
+                  date: moment(startDate[0]),
+                  dateString: sd,
+                  time: moment(startDate[0]),
+                  timeString: st,
+                },
+                endDate: {
+                  date: moment(endDate[0]),
+                  dateString: ed,
+                  time: moment(endDate[0]),
+                  timeString: et,
+                },
+              };
+            }
+            break;
+          }
+          case CLUSTER: {
+            const { propertyToValues, isInclude } =
+              scopingObject[CLUSTER] || {};
+            contentAdded.push(CLUSTER);
+            if (propertyToValues) {
+              isSpecificCluster = SPECIFIC_LIMIT;
+              const { clusterName, clusterValues } = propertyToValues;
+              clusters = {
+                isIncluded: isInclude,
+                // regardless of include/exclude, primary cluster selection will always be the same.
+                selected: clusterName[0],
+              };
+
+              const secondaryOptions = clusterFromProps?.filter(cluster => cluster?.status === ACTIVE_CLUSTER)?.reduce(
+                (secondaryOptions, cluster) => {
+                  if (cluster.name === clusters.selected || cluster.name === clusters.selected[0])
+                    secondaryOptions = cluster?.segmentValues;
+                    return secondaryOptions;
+                },
+                [],
+              );
+
+              clusterValue = hasLoyaltyUXEnhancementsEnabled && isInclude === false ? flipSelectedOptions(clusterValues, secondaryOptions) : clusterValues;
+            }
+            break;
+          }
+        }
+      });
+      setScoppingList(scoppingList);
+      setContentAdded(contentAdded);
+      setLoyaltyType(newLoyaltyType);
+      setStore(store);
+      setIsSpecificStore(isSpecificStore);
+      setDateRange(dateRange);
+      setIsSpecificDate(isSpecificDate);
+      setIsDateRangeIncluded(isDateRangeIncluded);
+      setConcepts(concepts);
+      setIsSpecificConcept(isSpecificConcept);
+      setZone(zone);
+      setIsSpecificZone(isSpecificZone);
+      setEventSource(eventSource);
+      setIsSpecificEventSource(isSpecificEventSource);
+      setCluster(clusters);
+      setClusterValues(clusterValue);
+      setIsSpecificCluster(isSpecificCluster);
+    },
+    [selectedRuleset, processedRuleSets.group, zonesFromProp, storesFromProp, conceptFromProp, clusterFromProps],
+  );
+
+  const changeLoyaltyType = event => setLoyaltyType(event.target?.value);
+
+  const sortMultiSelectOptions = list => {
+    let disabledOptions = [], enabledOptions = [];
+    list?.forEach(curItem => {
+      curItem.disabled ? disabledOptions.push(curItem) : enabledOptions.push(curItem);
+    });
+    return enabledOptions.concat(disabledOptions);
+  };
+
+  const changeClusterSelected = value => {
+    // clear the secondary cluster values when primary cluster selection changes.
+    setClusterValues([]);
+    setCluster({
+      ...clusters,
+      selected: value,
+    });
+  };
+
+
+  const toggleClusterIsIncluded = () =>
+    setCluster({
+      ...clusters,
+      isIncluded: !clusters?.isIncluded,
+    });
+
+  const changeEventSource = value => {
+    setEventSource(value);
+  };
+  const addZones = value => setZone({ ...zone, selected: value });
+  const zoneSelectHandler = value => {
+    const modalShouldOpen =
+      value.includes(zoneRootValue?.toString()) &&
+      !zone?.selected?.includes(zoneRootValue?.toString());
+    if (modalShouldOpen) {
+      setRootZoneModalData(value);
+    }
+    addZones(value);
+  };
+
+  const toggleZoneIncluded = () =>
+    setZone({ ...zone, isIncluded: !zone?.isIncluded });
+
+  const addConcepts = value => setConcepts({ ...concepts, selected: value });
+  const conceptSelectHandler = value => {
+    const modalShouldOpen =
+      value.includes(conceptRootValue?.toString()) &&
+      !concepts?.selected?.includes(conceptRootValue?.toString());
+    if (modalShouldOpen) {
+      setRootConceptModalData(value);
+    }
+    addConcepts(value);
+  };
+
+  const toggleConceptIncluded = () =>
+    setConcepts({ ...concepts, isIncluded: !concepts?.isIncluded });
+
+  const toggleDateRangeIncluded = () =>
+    setIsDateRangeIncluded(prevState => !prevState);
+
+  const toggleIsSpecificLimit = useCallback(e => {
+    const { name, value } = e?.target;
+    switch (name) {
+      case DATE_RANGE:
+        setIsSpecificDate(value);
+        break;
+      case STORES:
+        setIsSpecificStore(value);
+        break;
+      case ZONES:
+        setIsSpecificZone(value);
+        break;
+      case CONCEPTS:
+        setIsSpecificConcept(value);
+        break;
+      case CLUSTER:
+        setIsSpecificCluster(value);
+        break;
+      case EVENT_SOURCE:
+        setIsSpecificEventSource(value);
+        break;
+    }
+  }, []);
+
+  const changeTabToLoyaltyType = () =>
+    setCurrentTab(
+      currentTab => (currentTab === LOYALTY_TYPE ? '' : LOYALTY_TYPE),
+    );
+  const changeTabToDateRange = () =>
+    setCurrentTab(currentTab => (currentTab === DATE_RANGE ? '' : DATE_RANGE));
+
+  const changeTabToConcepts = () => {
+    setCurrentTab(currentTab => (currentTab === CONCEPTS ? '' : CONCEPTS));
+  };
+
+  const changeTabToZone = () =>
+    setCurrentTab(currentTab => (currentTab === ZONES ? '' : ZONES));
+
+  const changeTabToEventSource = () =>
+    setCurrentTab(
+      currentTab => (currentTab === EVENT_SOURCE ? '' : EVENT_SOURCE),
+    );
+
+  const changeTabToCluster = () =>
+    setCurrentTab(currentTab => (currentTab === CLUSTER ? '' : CLUSTER));
+
+  const changeTabToStore = () =>
+    setCurrentTab(currentTab => (currentTab === STORES ? '' : STORES));
+
+  const changeDateRangeStart = (date, dateString) => {
+    setDateRange({
+      ...dateRange,
+      startDate: { ...dateRange?.startDate, date, dateString:moment(date).format(DATE_FORMAT) },
+    });
+  };
+
+  const changeDateRangeEnd = (date, dateString) =>
+    setDateRange({
+      ...dateRange,
+      endDate: { ...dateRange?.endDate, date, dateString:moment(date).format(DATE_FORMAT) },
+    });
+
+  const changeDateRangeStartTime = (time, timeString) =>
+    setDateRange({
+      ...dateRange,
+      startDate: { ...dateRange?.startDate, time, timeString },
+    });
+
+  const changeDateRangeEndTime = (time, timeString) =>
+    setDateRange({
+      ...dateRange,
+      endDate: { ...dateRange?.endDate, time, timeString },
+    });
+
+  const changeStoreIncluded = () =>
+    setStore({ ...store, isIncluded: !store?.isIncluded });
+
+  const changeStoreSelect = value => {
+    setStore({ ...store, selected: value })
+  };
+
+  const changeFileInStore = ({ fileList }) => {
+    if (!fileList.length) {
+      setStoreIdsFromFile(INITIAL_STORE_ID_FILE);
+      setStore({ ...store, file: null });
+      return;
+    }
+    fileList.map(file => {
+      const reader = new FileReader();
+      reader.onload = function(evt) {
+        setStoreIdsFromFile(() => {
+          const uploadedStoreIds = evt.target.result
+            ?.split(/\r?\n|\r|,/)
+            ?.filter(id => id);
+
+          const { valid, invalid } = hasLoyaltyUXEnhancementsEnabled ? validateStoreIdsEnhancement(uploadedStoreIds, validStoresForCurrentRuleset, storesFromProp) : validateStoreIds(uploadedStoreIds);
+
+          const convertedStoreIds = convertStoreCodesToIds(valid);
+          return { valid: convertedStoreIds, invalid, validStoreCode: valid };
+        });
+      };
+      file.status = 'success';
+      reader.readAsText(file.originFileObj);
+    });
+    setStore({ ...store, file: fileList.slice(-1) });
+  };
+
+  const getTooltipData = (selectedData, optionsData) => {
+    let tooltipData = [];
+    let sourceObject = selectedData?.reduce((obj, id, i) => {
+      if (i) {
+        obj[id] = true;
+      }
+      return obj;
+    }, {});
+    optionsData?.forEach(source => {
+      if (sourceObject[source.key]) {
+        tooltipData.push(source.title);
+      }
+    });
+
+    return tooltipData;
+  };
+
+
+  const getMultiSelectPreview = (data, idsArray, optionsData) => {
+    let listData = [];
+    const firstData = (idsArray.length && idsArray[0]) || '';
+    const name = (find(data, { id: Number(firstData) }) || {}).name;
+    const count = idsArray.length - 1;
+    if (count) {
+      listData = getTooltipData(idsArray, optionsData);
+    }
+    return { name, count, listData };
+  };
+
+  const isSpecificData = source => source !== NO_LIMIT;
+
+  const getScopePropertyValue = scope => {
+    const { name } = scope;
+    let scopePropertyValue = '';
+    let moreCount = 0;
+    let tooltipData = [];
+    switch (name) {
+      case LOYALTY_TYPE:
+        scopePropertyValue = LOYALTY_TYPE_PREVIEW[loyaltyType];
+        break;
+      case EVENT_SOURCE:
+        {
+          if (isSpecificData(isSpecificEventSource)) {
+            let eventSourceArr = [];
+            if (eventSource.length) {
+              eventSourceArr = eventSource;
+            }
+            scopePropertyValue =
+              (eventSourceArr.length && eventSourceArr[0]) || '';
+
+            moreCount = eventSourceArr.length - 1;
+            if (moreCount) {
+              tooltipData = getTooltipData(eventSourceArr, eventSourceOptions);
+            }
+          } else {
+            scopePropertyValue = ALL_MESSAGES[EVENT_SOURCE];
+          }
+        }
+        break;
+      case ZONES:
+        {
+          if (isSpecificData(isSpecificZone)) {
+            let zoneIdsArr = [];
+            if (zone?.selected?.length) {
+              zoneIdsArr = zone.selected;
+            }
+            const { name, count, listData } = getMultiSelectPreview(
+              zonesFromProp,
+              zoneIdsArr,
+              zoneOptions,
+            );
+            scopePropertyValue = name;
+            moreCount = count;
+            tooltipData = listData;
+          } else {
+            scopePropertyValue = ALL_MESSAGES[ZONES];
+          }
+        }
+        break;
+      case CONCEPTS:
+        {
+          if (isSpecificData(isSpecificConcept)) {
+            let conceptIdsArr = [];
+            if (concepts?.selected?.length) {
+              conceptIdsArr = concepts.selected;
+            }
+            const { name, count, listData } = getMultiSelectPreview(
+              conceptFromProp,
+              conceptIdsArr,
+              conceptOptions,
+            );
+            scopePropertyValue = name;
+            moreCount = count;
+            tooltipData = listData;
+          } else {
+            scopePropertyValue = ALL_MESSAGES[CONCEPTS];
+          }
+        }
+        break;
+      case STORES:
+        {
+          let storeIdArr = [];
+          if (isSpecificData(isSpecificStore)) {
+            if (isSpecificStore === UPLOAD_STORE_LIST) {
+              storeIdArr = storeIdsFromFile.valid;
+            }
+            if (isSpecificStore === SELECT_STORE_LIST) {
+              storeIdArr = store.selected;
+            }
+            const { name, count, listData } = getMultiSelectPreview(
+              storesFromProp,
+              storeIdArr,
+              storeOptionsMulti,
+            );
+            scopePropertyValue = name;
+            moreCount = count;
+            tooltipData = listData;
+          } else {
+            scopePropertyValue = ALL_MESSAGES[STORES];
+          }
+        }
+        break;
+      case DATE_RANGE:
+        {
+          if (isSpecificData(isSpecificDate)) {
+            const { startDate, endDate } = dateRange;
+            if (
+              startDate.dateString &&
+              endDate.dateString &&
+              startDate.timeString &&
+              endDate.timeString
+            ) {
+              let sd = startDate.dateString;
+              let ed = endDate.dateString;
+              let st = startDate.time;
+              let et = endDate.time;
+              scopePropertyValue = `${moment(sd).format(
+                LOCALE_DATE_FORMAT,
+              )}, ${st.format('LT')} to ${moment(ed).format(
+                LOCALE_DATE_FORMAT,
+              )}, ${et.format('LT')}`;
+            }
+          } else {
+            scopePropertyValue = ALL_MESSAGES[DATE_RANGE];
+          }
+        }
+        break;
+      case CLUSTER: {
+        if (isSpecificData(isSpecificCluster)) {
+          let cluster = [];
+          if (clusters?.selected?.length) {
+            cluster = clusters?.selected;
+          }
+          scopePropertyValue = cluster;
+        } else {
+          scopePropertyValue = ALL_MESSAGES[CLUSTER];
+        }
+        break;
+      }
+    }
+
+    return { scopePropertyValue, moreCount, name, tooltipData };
+  };
+  const getScopePropertyValueEnhanced = scope => {
+    const { name } = scope;
+    let scopePropertyValue = '';
+    let moreCount = 0;
+    let tooltipData = [];
+    switch (name) {
+      case LOYALTY_TYPE:
+        scopePropertyValue = LOYALTY_TYPE_PREVIEW[loyaltyType];
+        break;
+      case EVENT_SOURCE:
+        {
+            let eventSourceArr = [];
+            if (isSpecificData(isSpecificEventSource)) {
+              if (eventSource.length) {
+                eventSourceArr = eventSource;
+              }
+              scopePropertyValue =
+                (eventSourceArr.length && eventSourceArr[0]) || '';
+  
+              moreCount = eventSourceArr.length - 1;
+              if (moreCount) {
+                tooltipData = getTooltipData(eventSourceArr, eventSourceOptions);
+              }
+            }
+            else{
+              // case where NO_LIMIT is selected.
+              if (isSelectedRulesetRoot) {
+                // parent ruleset, regular logic
+                  scopePropertyValue = ALL_MESSAGES[EVENT_SOURCE];
+              }
+              else{
+                scopePropertyValue =
+                  (validEventSourcesForCurrentRuleset.length && validEventSourcesForCurrentRuleset[0]) || '';
+    
+                moreCount = validEventSourcesForCurrentRuleset.length - 1;
+                if (moreCount) {
+                  tooltipData = getTooltipData(validEventSourcesForCurrentRuleset, eventSourceOptions);
+                }
+              }
+            }
+        }
+        break;
+      case ZONES:
+        {
+          let zoneIdsArr = [];
+          if (isSpecificData(isSpecificZone)) {
+            if (zone?.selected?.length) {
+              zoneIdsArr = zone.selected;
+            }
+            const { name, count, listData } = getMultiSelectPreview(
+              zonesFromProp,
+              zoneIdsArr,
+              zoneOptions,
+            );
+            scopePropertyValue = name;
+            moreCount = count;
+            tooltipData = listData;
+          } else {
+            if(isSelectedRulesetRoot){
+              // parent ruleset, regular logic
+              scopePropertyValue = ALL_MESSAGES[ZONES];
+            }
+            else{
+              const { name, count, listData } = getMultiSelectPreview(
+                zonesFromProp,
+                validZonesForCurrentRuleset,
+                zoneOptions,
+              );
+              scopePropertyValue = name;
+              moreCount = count;
+              tooltipData = listData;
+            }
+          }
+        }
+        break;
+      case CONCEPTS:
+        {
+          let conceptIdsArr = [];
+          if (isSpecificData(isSpecificConcept)) {
+            if (concepts?.selected?.length) {
+              conceptIdsArr = concepts.selected;
+            }
+            const { name, count, listData } = getMultiSelectPreview(
+              conceptFromProp,
+              conceptIdsArr,
+              conceptOptions,
+            );
+            scopePropertyValue = name;
+            moreCount = count;
+            tooltipData = listData;
+          } else {
+            if(isSelectedRulesetRoot){
+              // parent ruleset, regular logic
+              scopePropertyValue = ALL_MESSAGES[CONCEPTS];
+            }
+            else{
+              const { name, count, listData } = getMultiSelectPreview(
+                conceptFromProp,
+                validConceptsForCurrentRuleset,
+                conceptOptions,
+              );
+              scopePropertyValue = name;
+              moreCount = count;
+              tooltipData = listData;
+            }
+          }
+        }
+        break;
+      case STORES:
+        {
+          let storeIdArr = [];
+          if (isSpecificData(isSpecificStore)) {
+            if (isSpecificStore === UPLOAD_STORE_LIST) {
+              storeIdArr = storeIdsFromFile.valid;
+            }
+            if (isSpecificStore === SELECT_STORE_LIST) {
+              storeIdArr = store.selected;
+            }
+            const { name, count, listData } = getMultiSelectPreview(
+              storesFromProp,
+              storeIdArr,
+              storeOptionsMulti,
+            );
+            scopePropertyValue = name;
+            moreCount = count;
+            tooltipData = listData;
+          } else {
+            if(isSelectedRulesetRoot){
+              // all options selected case for root ruleset
+              scopePropertyValue = ALL_MESSAGES[STORES];
+            }
+            else{
+              const { name, count, listData } = getMultiSelectPreview(
+                storesFromProp,
+                validStoresForCurrentRuleset,
+                storeOptionsMulti,
+              );
+              scopePropertyValue = name;
+              moreCount = count;
+              tooltipData = listData;
+            }
+          }
+        }
+        break;
+      case DATE_RANGE:
+        {
+          if (isSpecificData(isSpecificDate)) {
+            const { startDate, endDate } = dateRange;
+            if (
+              startDate.dateString &&
+              endDate.dateString &&
+              startDate.timeString &&
+              endDate.timeString
+            ) {
+              let sd = startDate.dateString;
+              let ed = endDate.dateString;
+              let st = startDate.time;
+              let et = endDate.time;
+              scopePropertyValue = `${moment(sd).format(
+                LOCALE_DATE_FORMAT,
+              )}, ${st.format('LT')} to ${moment(ed).format(
+                LOCALE_DATE_FORMAT,
+              )}, ${et.format('LT')}`;
+            }
+          } else {
+            scopePropertyValue = ALL_MESSAGES[DATE_RANGE];
+          }
+        }
+        break;
+      case CLUSTER: {
+        if (isSpecificData(isSpecificCluster)) {
+          let cluster = [];
+          if (clusters?.selected?.length) {
+            cluster = clusters?.selected;
+          }
+          scopePropertyValue = cluster;
+        } else {
+          if(isSelectedRulesetRoot || validPrimaryClustersForCurrentRuleset.length > 1){
+            // parent ruleset, regular logic
+            scopePropertyValue = ALL_MESSAGES[CLUSTER];
+          }
+        else{
+          // non root ruleset with all clusters from parent radio button selected
+
+          scopePropertyValue = validPrimaryClustersForCurrentRuleset[0];
+
+        }
+
+        }
+        break;
+      }
+    }
+
+    return { scopePropertyValue, moreCount, name, tooltipData };
+  };
+
+
+  const handleSecondaryClusterChange = (selectedSecondaryClusters) => {
+    setClusterValues(selectedSecondaryClusters);
+  }
+
+  const loyaltyTypeProps = {
+    key: LOYALTY_TYPE,
+    additionalCollapseProps: {
+      disabled,
+      isScope: true,
+      isScopeConfigured: false,
+      scopeIcon: ICON[LOYALTY_TYPE],
+      isSvg: true,
+      scopeDescription: (
+        hasLoyaltyUXEnhancementsEnabled ? <ScopeDescription {...getScopePropertyValueEnhanced({ name: LOYALTY_TYPE })} /> : <ScopeDescription {...getScopePropertyValue({ name: LOYALTY_TYPE })} />
+      ),
+    },
+    title: <ScopeHeader name={LOYALTY_TYPE} />,
+    isOpen: currentTab === LOYALTY_TYPE,
+    changeOpen: changeTabToLoyaltyType,
+    radioGroup: {
+      value: loyaltyType,
+      onChange: changeLoyaltyType,
+      defaultValue: ALL_USERS,
+      className: 'scope-radio-group',
+    },
+    radios: [
+      {
+        value: ALL_USERS,
+        message: formatMessage(messages.allUsers),
+        disabledData: hasLoyaltyUXEnhancementsEnabled ? loyaltyTypeDisabilityInfo[ALL_USERS]: {disabled: false, tooltipText: '' },
+      },
+      {
+        value: LOYALTY_USER,
+        message: formatMessage(messages.loyaltyUser),
+        disabledData: hasLoyaltyUXEnhancementsEnabled ? loyaltyTypeDisabilityInfo[LOYALTY_USER] : { disabled: false, tooltipText: ''},
+      },
+      {
+        value: NON_LOYALTY_USER,
+        message: formatMessage(messages.nonLoyaltyUser),
+        disabledData: hasLoyaltyUXEnhancementsEnabled ? loyaltyTypeDisabilityInfo[NON_LOYALTY_USER] : {disabled: false, tooltipText: ''},
+      },
+    ],
+  };
+
+  const dateRangeProps = {
+    key: DATE_RANGE,
+    additionalCollapseProps: {
+      disabled,
+      isScope: true,
+      isScopeConfigured: false,
+      scopeIcon: ICON[DATE_RANGE],
+      scopeDescription: (
+        hasLoyaltyUXEnhancementsEnabled ? <ScopeDescription {...getScopePropertyValueEnhanced({ name: DATE_RANGE })} /> : <ScopeDescription {...getScopePropertyValue({ name: DATE_RANGE })} />
+      ),
+      scopeSpecifier: {
+        radioGroup: {
+          value: isSpecificDate,
+          onChange: toggleIsSpecificLimit,
+          defaultValue: NO_LIMIT,
+          className: 'scope-radio-group scope-specifier-radio',
+          name: DATE_RANGE,
+        },
+        radios: [
+          {
+            value: NO_LIMIT,
+            message: ALL_MESSAGES[DATE_RANGE],
+          },
+          {
+            value: SPECIFIC_LIMIT,
+            message: SPECIFER_MESSAGES[DATE_RANGE],
+          },
+        ],
+      },
+    },
+    title: <ScopeHeader name={DATE_RANGE} />,
+    selectDate: formatMessage(globalMessages.selectDate),
+    selectTime: formatMessage(globalMessages.selectTime),
+    isOpen: currentTab === DATE_RANGE,
+    changeOpen: changeTabToDateRange,
+    switchProps: {
+      isSwitchChecked: isDateRangeIncluded,
+      onSwitchChange: toggleDateRangeIncluded,
+      label: formatMessage(globalMessages.exclude),
+      isDivider: false,
+      className: 'margin-b-15 scope-switch',
+      parentClassName: 'switch-container',
+      name: 'date-range-switch',
+      suffix: formatMessage(globalMessages.include),
+    },
+    dateTimePicker: [
+      {
+        dateValue: dateRange?.startDate?.date,
+        onDateChange: changeDateRangeStart,
+        dateLabel: formatMessage(messages.startDate),
+        timeValue: dateRange?.startDate?.time,
+        onTimeChange: changeDateRangeStartTime,
+      },
+      {
+        dateValue: dateRange?.endDate?.date,
+        onDateChange: changeDateRangeEnd,
+        dateLabel: formatMessage(messages.endDate),
+        timeValue: dateRange?.endDate?.time,
+        onTimeChange: changeDateRangeEndTime,
+      },
+    ],
+  };
+
+
+  const conceptsProps = {
+    key: CONCEPTS,
+    additionalCollapseProps: {
+      disabled,
+      isScope: true,
+      isScopeConfigured: false,
+      scopeIcon: ICON[CONCEPTS],
+      scopeDescription: (
+        hasLoyaltyUXEnhancementsEnabled ? <ScopeDescription {...getScopePropertyValueEnhanced({ name: CONCEPTS })} /> : <ScopeDescription {...getScopePropertyValue({ name: CONCEPTS })} />
+      ),
+      isParentRuleset: isSelectedRulesetRoot,
+      scopeSpecifier: {
+        radioGroup: {
+          value: isSpecificConcept,
+          onChange: toggleIsSpecificLimit,
+          defaultValue: NO_LIMIT,
+          className: 'scope-radio-group scope-specifier-radio',
+          name: CONCEPTS,
+        },
+        radios: [
+          {
+            value: NO_LIMIT,
+            message: ALL_MESSAGES[CONCEPTS],
+          },
+          {
+            value: SPECIFIC_LIMIT,
+            message: SPECIFER_MESSAGES[CONCEPTS],
+          },
+        ],
+      },
+    },
+    title: <ScopeHeader name={CONCEPTS} />,
+    isOpen: currentTab === CONCEPTS,
+    changeOpen: changeTabToConcepts,
+    switchProps: {
+      isSwitchChecked: concepts?.isIncluded,
+      onSwitchChange: toggleConceptIncluded,
+      label: formatMessage(globalMessages.exclude),
+      isDivider: false,
+      name: 'concepts-switch',
+      className: 'margin-b-15 scope-switch',
+      parentClassName: 'switch-container',
+      suffix: formatMessage(globalMessages.include),
+    },
+    selectOptions: {
+      options: hasLoyaltyUXEnhancementsEnabled ?    sortMultiSelectOptions(conceptOptionsEnhancement) : conceptOptions,
+      value: concepts?.selected,
+      onChange: conceptSelectHandler,
+      placeholder: formatMessage(messages.concept),
+      searchPlaceholder: formatMessage(globalMessages.search),
+      closeText: formatMessage(globalMessages.close),
+      selectText: formatMessage(globalMessages.select),
+      selectedText:formatMessage(globalMessages.selected),
+      selectAllText:formatMessage(globalMessages.selectAll),
+      noResultsFoundText:formatMessage(globalMessages.noResultsFound),
+      searchKey: hasLoyaltyUXEnhancementsEnabled ? 'searchText' : 'label',
+      triggerClassName: 'concept-trigger',
+    },
+    hasLoyaltyUXEnhancementsEnabled,
+    rootModalProps: {
+      rootModalData: rootConceptModalData,
+      setModalData: setRootConceptModalData,
+      setDropdownData: addConcepts,
+      rootOptionValue: conceptRootValue?.toString(),
+      triggerRef: document.querySelector(
+        '.concept-trigger .cap-multi-select-v2-selection',
+      ),
+      //TODO: figure out why .click() is not working here
+    },
+  };
+
+  const zoneProps = {
+    key: ZONES,
+    title: <ScopeHeader name={ZONES} />,
+    isOpen: currentTab === ZONES,
+    changeOpen: changeTabToZone,
+    additionalCollapseProps: {
+      disabled,
+      isScope: true,
+      isScopeConfigured: false,
+      scopeIcon: ICON[ZONES],
+      isSvg: true,
+      scopeDescription: (
+        hasLoyaltyUXEnhancementsEnabled ? <ScopeDescription {...getScopePropertyValueEnhanced({ name: ZONES })} /> : <ScopeDescription {...getScopePropertyValue({ name: ZONES })} />
+      ),
+      isParentRuleset: isSelectedRulesetRoot,
+      scopeSpecifier: {
+        radioGroup: {
+          value: isSpecificZone,
+          onChange: toggleIsSpecificLimit,
+          defaultValue: NO_LIMIT,
+          className: 'scope-radio-group scope-specifier-radio',
+          name: ZONES,
+        },
+        radios: [
+          {
+            value: NO_LIMIT,
+            message: ALL_MESSAGES[ZONES],
+          },
+          {
+            value: SPECIFIC_LIMIT,
+            message: SPECIFER_MESSAGES[ZONES],
+          },
+        ],
+      },
+    },
+    switchProps: {
+      isSwitchChecked: zone?.isIncluded,
+      onSwitchChange: toggleZoneIncluded,
+      label: formatMessage(globalMessages.exclude),
+      isDivider: false,
+      name: 'zone-switch',
+      className: 'margin-b-15 scope-switch',
+      parentClassName: 'switch-container',
+      suffix: formatMessage(globalMessages.include),
+    },
+    selectOptions: {
+      options: hasLoyaltyUXEnhancementsEnabled ? sortMultiSelectOptions(zoneOptionsEnhancement) : zoneOptions,
+      value: zone?.selected,
+      onChange: zoneSelectHandler,
+      placeholder: formatMessage(messages.zone),
+      searchPlaceholder: formatMessage(globalMessages.search),
+      closeText: formatMessage(globalMessages.close),
+      selectText: formatMessage(globalMessages.select),
+      selectedText:formatMessage(globalMessages.selected),
+      selectAllText:formatMessage(globalMessages.selectAll),
+      noResultsFoundText:formatMessage(globalMessages.noResultsFound),
+      searchKey: hasLoyaltyUXEnhancementsEnabled ? 'searchText' : 'label',
+      triggerClassName: 'zone-trigger',
+    },
+    hasLoyaltyUXEnhancementsEnabled,
+    rootModalProps: {
+      rootModalData: rootZoneModalData,
+      setModalData: setRootZoneModalData,
+      setDropdownData: addZones,
+      rootOptionValue: zoneRootValue?.toString(),
+      triggerRef: document.querySelector(
+        '.zone-trigger .cap-multi-select-v2-selection',
+      ),
+    },
+  };
+
+  const eventSourceProps = {
+    key: EVENT_SOURCE,
+    additionalCollapseProps: {
+      disabled,
+      isScope: true,
+      isScopeConfigured: false,
+      scopeIcon: ICON[EVENT_SOURCE],
+      scopeDescription: (
+        hasLoyaltyUXEnhancementsEnabled ? <ScopeDescription {...getScopePropertyValueEnhanced({ name: EVENT_SOURCE })} /> : <ScopeDescription {...getScopePropertyValue({ name: EVENT_SOURCE })} />
+      ),
+      isParentRuleset: isSelectedRulesetRoot,
+      scopeSpecifier: {
+        radioGroup: {
+          value: isSpecificEventSource,
+          onChange: toggleIsSpecificLimit,
+          defaultValue: NO_LIMIT,
+          className: 'scope-radio-group scope-specifier-radio',
+          name: EVENT_SOURCE,
+        },
+        radios: [
+          {
+            value: NO_LIMIT,
+            message: ALL_MESSAGES[EVENT_SOURCE],
+          },
+          {
+            value: SPECIFIC_LIMIT,
+            message: SPECIFER_MESSAGES[EVENT_SOURCE],
+          },
+        ],
+      },
+    },
+    title: <ScopeHeader name={EVENT_SOURCE} />,
+    isOpen: currentTab === EVENT_SOURCE,
+    changeOpen: changeTabToEventSource,
+    selectOptions: {
+      options: hasLoyaltyUXEnhancementsEnabled ? sortMultiSelectOptions(eventSourceOptionsEnhancement) : eventSourceOptions,
+      value: eventSource,
+      onChange: changeEventSource,
+      placeholder: formatMessage(globalMessages.EventSource),
+      searchPlaceholder: formatMessage(globalMessages.search),
+      closeText: formatMessage(globalMessages.close),
+      selectText: formatMessage(globalMessages.select),
+      selectedText:formatMessage(globalMessages.selected),
+      selectAllText:formatMessage(globalMessages.selectAll),
+      noResultsFoundText:formatMessage(globalMessages.noResultsFound),
+      searchKey: hasLoyaltyUXEnhancementsEnabled ? 'searchText' : 'title',
+    },
+  };
+
+  const clusterProps = {
+    key: CLUSTER,
+    additionalCollapseProps: {
+      disabled,
+      isScope: true,
+      isScopeConfigured: false,
+      scopeIcon: ICON[CLUSTER],
+      isSvg: true,
+      scopeDescription: (
+        hasLoyaltyUXEnhancementsEnabled ? <ScopeDescription {...getScopePropertyValueEnhanced({ name: CLUSTER })} /> : <ScopeDescription {...getScopePropertyValue({ name: CLUSTER })} />
+      ),
+      scopeSpecifier: {
+        radioGroup: {
+          value: isSpecificCluster,
+          onChange: toggleIsSpecificLimit,
+          defaultValue: NO_LIMIT,
+          className: 'scope-radio-group scope-specifier-radio',
+          name: CLUSTER,
+        },
+        radios: [
+          {
+            value: NO_LIMIT,
+            message: ALL_MESSAGES[CLUSTER],
+          },
+          {
+            value: SPECIFIC_LIMIT,
+            message: SPECIFER_MESSAGES[CLUSTER],
+          },
+        ],
+      },
+    },
+    title: <ScopeHeader name={CLUSTER} />,
+    isOpen: currentTab === CLUSTER,
+    changeOpen: changeTabToCluster,
+    switchProps: {
+      isSwitchChecked: clusters?.isIncluded,
+      onSwitchChange: toggleClusterIsIncluded,
+      label: formatMessage(globalMessages.exclude),
+      isDivider: false,
+      name: 'cluster-switch',
+      className: 'margin-b-15 scope-switch',
+      parentClassName: 'switch-container',
+      suffix: formatMessage(globalMessages.include),
+    },
+    primraySelectOptions: {
+      options: hasLoyaltyUXEnhancementsEnabled? sortMultiSelectOptions(clusterOptionsEnhancement) : clusterOptions,
+      value: clusters?.selected ? clusters?.selected : undefined,
+      onChange: changeClusterSelected,
+      placeholder: formatMessage(messages.clusterName),
+    },
+    seconodarySelectOptions: {
+      options: hasLoyaltyUXEnhancementsEnabled ? sortMultiSelectOptions(clusterValuesEnhancement) : clusterValueOptions,
+      value: clusterValues,
+      onChange: handleSecondaryClusterChange,
+      placeholder: formatMessage(messages.clusterValue),
+      noResultsFoundText: formatMessage(globalMessages.noResultsFound),
+      searchPlaceholder:formatMessage(globalMessages.search),
+      searchKey: hasLoyaltyUXEnhancementsEnabled ? 'searchText' : 'title',
+    },
+    hasLoyaltyUXEnhancementsEnabled,
+  };
+
+
+  const storeProps =  {
+    additionalCollapseProps: {
+      disabled,
+      isScope: true,
+      isScopeConfigured: false,
+      scopeIcon: ICON[STORES],
+      scopeDescription: 
+        hasLoyaltyUXEnhancementsEnabled ? <ScopeDescription {...getScopePropertyValueEnhanced({ name: STORES })} /> : <ScopeDescription {...getScopePropertyValue({ name: STORES })} />
+      ,
+      isParentRuleset: isSelectedRulesetRoot,
+      scopeSpecifier: {
+        radioGroup: {
+          value: isSpecificStore,
+          onChange: toggleIsSpecificLimit,
+          defaultValue: NO_LIMIT,
+          className: 'scope-radio-group scope-specifier-radio',
+          name: STORES,
+        },
+        radios: [
+          {
+            value: NO_LIMIT,
+            message: ALL_MESSAGES[STORES],
+          },
+          {
+            value: SELECT_STORE_LIST,
+            message: STORE_PREVIEW_MESSAGES[SELECT_STORE_LIST],
+          },
+          {
+            value: UPLOAD_STORE_LIST,
+            message: STORE_PREVIEW_MESSAGES[UPLOAD_STORE_LIST],
+          },
+        ],
+      },
+    },
+    title: <ScopeHeader name={STORES} />,
+    isOpen: currentTab === STORES,
+    changeOpen: changeTabToStore,
+    isSpecificStore,
+    switchProps: {
+      isSwitchChecked: store?.isIncluded,
+      onSwitchChange: changeStoreIncluded,
+      label: formatMessage(globalMessages.exclude),
+      isDivider: false,
+      className: 'margin-b-15 scope-switch',
+      parentClassName: 'switch-container',
+      name: 'stores',
+      suffix: formatMessage(globalMessages.include),
+    },
+    csvHeading: formatMessage(messages.storeCodeCsv),
+    fileSelector: {
+      onChange: changeFileInStore,
+      fileList: store?.file,
+      fileType: '.csv',
+      fileTypeLabel: 'CSV',
+      storeIds: storeIdsFromFile,
+      storePreview: getScopePropertyValue({ name: STORES }),
+    },
+    secondaryHeading: formatMessage(globalMessages.or).toUpperCase(),
+    selectOptions: {
+      options: hasLoyaltyUXEnhancementsEnabled ? sortMultiSelectOptions(storeOptionsMultiEnhancement) : storeOptionsMulti,
+      value: store?.selected,
+      onChange: changeStoreSelect,
+      placeholder: formatMessage(messages.store),
+      searchPlaceholder: formatMessage(globalMessages.search),
+      closeText: formatMessage(globalMessages.close),
+      selectText: formatMessage(globalMessages.select),
+      selectedText:formatMessage(globalMessages.selected),
+      noResultsFoundText:formatMessage(globalMessages.noResultsFound),
+      selectAllText:formatMessage(globalMessages.selectAll),
+      searchKey: hasLoyaltyUXEnhancementsEnabled ? 'searchText' : 'title',
+    },
+    hasLoyaltyUXEnhancementsEnabled,
+    isSelectedRulesetRoot,
+  };
+
+  const getElementLayout = key => {
+    switch (key) {
+      case LOYALTY_TYPE: {
+        return <CollapseWithRadioGroup {...loyaltyTypeProps} />;
+      }
+      case STORES: {
+        return <CollapseWithStore {...storeProps} />;
+      }
+      case DATE_RANGE: {
+        return <CollapseWithDateRange {...dateRangeProps} />;
+      }
+      case CONCEPTS: {
+        return <CollapseWithSwitchSelect {...conceptsProps} />;
+      }
+      case ZONES: {
+        return <CollapseWithSwitchSelect {...zoneProps} />;
+      }
+      case EVENT_SOURCE: {
+        return (
+          <CollapseWithSwitchSelect
+            isSwitchRequired={false}
+            {...eventSourceProps}
+          />
+        );
+      }
+      case CLUSTER: {
+        return <CollapseWithMultiSelect {...clusterProps} />;
+      }
+    }
+  };
+
+  const convertStoreCodesToIds = codes => {
+    const ids = [];
+    const codesObject = {};
+    codes.map(code => (codesObject[code] = true));
+    storesFromProp.forEach(({ id, code }) => {
+      if (codesObject[code]) ids.push(`${id}`);
+    });
+    return ids;
+  };
+
+  const getScopingObject = type => {
+    const scopeObject = {
+      scopeId: -1,
+      propertyValues: {},
+    };
+    switch (type) {
+      case LOYALTY_TYPE:
+        scopeObject.scopeMode = true;
+        scopeObject.propertyValues = { loyaltyType };
+        scopeObject.scopingType = LOYALTY_TYPE;
+        return scopeObject;
+      case EVENT_SOURCE:
+        scopeObject.scopeMode = true;
+        scopeObject.propertyValues = { eventSource: eventSource };
+        scopeObject.scopingType = EVENT_SOURCE;
+        return scopeObject;
+      case ZONES:
+        scopeObject.scopeMode = hasLoyaltyUXEnhancementsEnabled? true: zone.isIncluded;
+        scopeObject.propertyValues = { zones: zone.selected };
+        scopeObject.scopingType = ZONES;
+        return scopeObject;
+      case CONCEPTS:
+        scopeObject.scopeMode = hasLoyaltyUXEnhancementsEnabled? true: concepts.isIncluded;
+        scopeObject.propertyValues = { concepts: concepts.selected };
+        scopeObject.scopingType = CONCEPTS;
+        return scopeObject;
+      case STORES:
+        scopeObject.scopeMode = hasLoyaltyUXEnhancementsEnabled? true: store.isIncluded;
+        scopeObject.propertyValues = {
+          stores:
+            isSpecificStore === UPLOAD_STORE_LIST
+              ? storeIdsFromFile.valid
+              : isSpecificStore === SELECT_STORE_LIST
+                ? store.selected
+                : [],
+        };
+        scopeObject.scopingType = STORES;
+        return scopeObject;
+      case DATE_RANGE:
+        scopeObject.scopeMode = isDateRangeIncluded;
+        scopeObject.propertyValues = {
+          startDate: `${dateRange.startDate.dateString || ''} ${dateRange
+            .startDate.timeString || ''}`,
+          endDate: `${dateRange.endDate.dateString || ''} ${dateRange.endDate
+            .timeString || ''}`,
+        };
+        scopeObject.scopingType = DATE_RANGE;
+        return scopeObject;
+      case CLUSTER: {
+        const selectedCluster = clusterFromProps.find(
+          ({ id }) => id === clusters.selected,
+        );
+        const clusterValuesObject = clusterValues.reduce((object, content) => {
+          object[content] = true;
+          return object;
+        }, {});
+        const clusterNameStr = [selectedCluster?.name] || [clusters.selected];
+        const clusterValuesStr = selectedCluster?.segmentValues.reduce(
+          (array, segmentValue) => {
+            if (clusterValuesObject[segmentValue.id])
+              array.push(segmentValue.value);
+            return array;
+          },
+          [],
+        );
+
+        scopeObject.scopeMode = hasLoyaltyUXEnhancementsEnabled? true: clusters.isIncluded;
+        scopeObject.propertyValues = {
+          clusterName: clusters.selected,
+          clusterValues,
+          clusterNameStr,
+          clusterValuesStr: isEmpty(clusterValuesStr)
+            ? clusterValues
+            : clusterValuesStr,
+        };
+        scopeObject.scopingType = CLUSTER;
+        return scopeObject;
+      }
+      default:
+        return scopeObject;
+    }
+  };
+
+  const getScopingObjectForAllSelectionsFromParents = type => {
+    const scopeObject = {
+      scopeId: -1,
+      propertyValues: {},
+    };
+
+    switch (type) {
+      case STORES:
+        scopeObject.scopeMode = true;
+          scopeObject.propertyValues = {
+            stores: validStoresForCurrentRuleset,
+          };
+        scopeObject.scopingType = STORES;
+        return scopeObject;
+
+      case ZONES:
+        scopeObject.scopeMode = true;
+          scopeObject.propertyValues = {
+            zones: validZonesForCurrentRuleset,
+          };
+        scopeObject.scopingType = ZONES;
+        return scopeObject;
+
+      case CONCEPTS:
+        scopeObject.scopeMode = true;
+          scopeObject.propertyValues = {
+            concepts: validConceptsForCurrentRuleset
+          };
+        scopeObject.scopingType = CONCEPTS;
+        return scopeObject;
+
+
+        case EVENT_SOURCE:
+          scopeObject.scopeMode = true;
+            scopeObject.propertyValues = {
+              eventSource: validEventSourcesForCurrentRuleset
+            };
+          scopeObject.scopingType = EVENT_SOURCE;
+          return scopeObject;
+
+
+          case CLUSTER:
+            let selectedCluster;
+
+            if(validPrimaryClustersForCurrentRuleset.length === 0){
+              selectedCluster = null;
+            }
+            else if(validPrimaryClustersForCurrentRuleset.length === 1){
+              selectedCluster = validPrimaryClustersForCurrentRuleset[0];
+            }
+
+            scopeObject.scopeMode = true;
+            
+            scopeObject.propertyValues = {
+              clusterName: selectedCluster,
+              clusterNameStr: selectedCluster,
+              clusterValues: validSecondaryClustersForCurrentRuleset,
+              clusterValuesStr: validSecondaryClustersForCurrentRuleset,
+            };
+
+            
+            scopeObject.scopingType = CLUSTER;
+
+            return scopeObject;
+
+
+
+      default:
+        return scopeObject;
+    }
+  };
+
+  const validateStoreIds = ids => {
+    const originalStoreIds = {};
+    storesFromProp.forEach(({ code }) => {
+      originalStoreIds[code] = true;
+    });
+    const invalid = [];
+    const valid = [];
+    ids.forEach(id => {
+      if (originalStoreIds[id]) {
+        valid.push(id);
+        return;
+      }
+      invalid.push(id);
+    });
+    return { valid, invalid };
+  };
+
+
+  const validateDateRange = value => {
+    const { propertyValues: { startDate, endDate } = {} } = value || {};
+    const [sd, st] = startDate.split(' ');
+    const [ed, et] = endDate.split(' ');
+    if (!sd || !st) return formatMessage(messages.startDateError);
+    if (!ed || !et) return formatMessage(messages.endDateError);
+    let startDateMoment = moment(startDate);
+    let endDateMoment = moment(endDate);
+    let timeDifference = endDateMoment.diff(startDateMoment, 'seconds');
+    if (timeDifference <= 0) return formatMessage(messages.dateTimeDifferenceError);
+    return false;
+  };
+
+
+  const validate = (type, value) => {
+    const { propertyValues = {} } = value || {};
+    switch (type) {
+      case LOYALTY_TYPE: {
+        const { loyaltyType } = propertyValues;
+        return !!loyaltyType;
+      }
+      case EVENT_SOURCE: {
+        return !isEmpty(propertyValues?.eventSource);
+      }
+      case ZONES: {
+        return !isEmpty(propertyValues?.zones);
+      }
+      case CONCEPTS: {
+        return !isEmpty(propertyValues?.concepts);
+      }
+      case STORES: {
+        return !isEmpty(propertyValues?.stores);
+      }
+      case CLUSTER: {
+        const { clusterName, clusterValues } = propertyValues;
+        return !isEmpty(clusterName) && !isEmpty(clusterValues);
+      }
+    }
+  };
+
+  const isSpecificDataAdded = content => {
+    switch (content) {
+      case LOYALTY_TYPE:
+        return loyaltyType !== ALL_USERS;
+      case EVENT_SOURCE:
+        return isSpecificData(isSpecificEventSource);
+      case ZONES:
+        return isSpecificData(isSpecificZone);
+      case CONCEPTS:
+        return isSpecificData(isSpecificConcept);
+      case STORES:
+        return isSpecificData(isSpecificStore);
+      case CLUSTER:
+        return isSpecificData(isSpecificCluster);
+      case DATE_RANGE:
+        return isSpecificData(isSpecificDate);
+    }
+  };
+
+  const saveScoping = () => {
+    const oldScopingObject = {};
+
+    (scoppingList || []).forEach(scope => {
+      oldScopingObject[scope.name.toUpperCase()] = scope;
+    });
+
+
+    const newScopingObject = contentAdded.reduce(
+      (scopingObject, content) => {
+
+        if (!isSpecificDataAdded(content) ) {
+          return scopingObject;
+        }
+
+
+        const scope = getScopingObject(content);
+        if (content === DATE_RANGE) {
+          const invalid = validateDateRange(scope);
+          if (!invalid) {
+            scopingObject.data[content] = scope;
+            return scopingObject;
+          }
+          scopingObject.dateRangeError = invalid;
+          return scopingObject;
+        }
+        if (validate(content, scope)) {
+          scopingObject.data[content] = scope;
+          return scopingObject;
+        }
+        scopingObject.error.push(content);
+        return scopingObject;
+      },
+      {
+        data: {},
+        error: [],
+        storeIdsFromFile: true,
+        dateRangeError: false,
+      },
+    );
+    /** Handled by a normal flow 
+    if (!newScopingObject.storeIdsFromFile) {
+      CapNotification.error({
+        message: formatMessage(messages.storeIdsError),
+      });
+      return;
+    }
+    */
+
+    if (newScopingObject.dateRangeError) {
+      CapNotification.error({
+        message: newScopingObject.dateRangeError,
+      });
+      return;
+    }
+    if (newScopingObject.error.length > 0) {
+      /** Not possible to have type other than types in SCOPE_AGGREGATE_ELEMENTS
+      const invalidError = newScopingObject.error.some(
+        type => !SCOPE_AGGREGATE_ELEMENTS.includes(type),
+      );
+
+      if (invalidError) {
+        CapNotification.error({
+          message: formatMessage(messages.somthingWentWrong),
+        });
+        notifyHandledException(newScopingObject);
+        return;
+      }
+       */
+      CapNotification.error({
+        message: `${newScopingObject.error
+          .map(type => formatMessage(globalMessages[type]))
+          .join(', ')} ${formatMessage(
+          messages.emptyScopeError,
+        ).toLowerCase()}`,
+      });
+      return;
+    }
+
+    /** Saving empty scope is allowed
+    if (newScopingObject.data.length === 0) {
+      CapNotification.error({
+        message: formatMessage(messages.emptyScopeError),
+      });
+      return;
+    }
+    */
+
+
+
+    const scopingData = Object.values(newScopingObject.data).map(scoping => {
+      if (oldScopingObject[scoping.scopingType.toUpperCase()]) {
+        return {
+          ...scoping,
+          scopeId: oldScopingObject[scoping.scopingType.toUpperCase()].id,
+        };
+      }
+      return scoping;
+    });
+
+    const filterInfo = getFilterInfo({
+      scopingData,
+      source,
+    });
+    handleSaveFilterInfo(filterInfo);
+  };
+
+  const saveScopingEnhanced = () => {
+
+    const oldScopingObject = {};
+    (scoppingList || []).forEach(scope => {
+      oldScopingObject[scope.name.toUpperCase()] = scope;
+    });
+
+    const newEnhancedScopingObject = contentAdded.reduce(
+      (scopingObject, content) => {
+
+        switch (content) {
+          case STORES:
+            if (!isSpecificDataAdded(content)) {
+              // root ruleset, with all options selected.
+              return scopingObject;
+            }
+            else {
+              // specific content is added. so we just run regular to the payload logic.
+              const scope = getScopingObject(content);
+
+              if (validate(content, scope)) {
+                scopingObject.data[content] = scope;
+                return scopingObject;
+              }
+
+              scopingObject.error.push(content);
+              return scopingObject;
+            }
+
+          case ZONES:
+            if (!isSpecificDataAdded(content)) {
+              return scopingObject;
+            }
+            else {
+              const scope = getScopingObject(content);
+              if (validate(content, scope)) {
+                scopingObject.data[content] = scope;
+                return scopingObject;
+              }
+              scopingObject.error.push(content);
+              return scopingObject;
+            }
+
+          case CONCEPTS:
+            if (!isSpecificDataAdded(content)) {
+              return scopingObject;
+            }
+            else {
+              const scope = getScopingObject(content);
+              if (validate(content, scope)) {
+                scopingObject.data[content] = scope;
+                return scopingObject;
+              }
+              scopingObject.error.push(content);
+              return scopingObject;
+            }
+
+          case DATE_RANGE:
+            if (!isSpecificDataAdded(content)) {
+              return scopingObject;
+            }
+            const dateRangeScope = getScopingObject(content);
+            const invalid = validateDateRange(dateRangeScope);
+            if (!invalid) {
+              scopingObject.data[content] = dateRangeScope;
+              return scopingObject;
+            }
+            scopingObject.dateRangeError = invalid;
+            return scopingObject;
+
+          case EVENT_SOURCE:
+            if (!isSpecificDataAdded(content)) {
+              return scopingObject;
+            } 
+            else {
+              const scope = getScopingObject(content);
+              if (validate(content, scope)) {
+                scopingObject.data[content] = scope;
+                return scopingObject;
+              }
+              scopingObject.error.push(content);
+              return scopingObject;
+            }
+
+          case CLUSTER:
+            if (!isSpecificDataAdded(content)) {
+              return scopingObject;
+            }
+            else {
+              // specific content is added, so we just run regular to the payload logic.
+              const scope = getScopingObject(content);
+              if (validate(content, scope)) {
+                scopingObject.data[content] = scope;
+                return scopingObject;
+              }
+
+              scopingObject.error.push(content);
+              return scopingObject;
+            }
+
+          default:
+            if (!isSpecificDataAdded(content)) {
+              return scopingObject;
+            }
+
+            const defaultScope = getScopingObject(content);
+            if (validate(content, defaultScope)) {
+              scopingObject.data[content] = defaultScope;
+              return scopingObject;
+            }
+            scopingObject.error.push(content);
+            return scopingObject;
+        }
+      },
+      {
+        data: {},
+        error: [],
+        storeIdsFromFile: true,
+        dateRangeError: false,
+      },
+    );
+    if (newEnhancedScopingObject.dateRangeError) {
+      CapNotification.error({
+        message: newEnhancedScopingObject.dateRangeError,
+      });
+      return;
+    }
+    if (newEnhancedScopingObject.error.length > 0) {
+      CapNotification.error({
+        message: `${newEnhancedScopingObject.error
+          .map(type => formatMessage(globalMessages[type]))
+          .join(', ')} ${formatMessage(
+          messages.emptyScopeError,
+        ).toLowerCase()}`,
+      });
+      return;
+    }
+
+    const scopingData = Object.values(newEnhancedScopingObject.data).map(scoping => {
+      if (oldScopingObject[scoping.scopingType.toUpperCase()]) {
+        return {
+          ...scoping,
+          scopeId: oldScopingObject[scoping.scopingType.toUpperCase()].id,
+        };
+      }
+      return scoping;
+    });
+
+
+    if (source === SOURCE_PROMOTION) {
+      const promotionFilterInfo = getFilterInfo({ scopingData });
+      handleSaveFilterInfo(promotionFilterInfo);
+      return;
+    }
+
+    const requestObject = {
+      rulesetId: selectedRuleset,
+      scopingData,
+    };
+
+
+    actions.saveScoping(programId, eventType, requestObject, res => {
+      const success = res?.success;
+      if (success) {
+        setProcessedRuleSets(processedRuleSets => {
+          if (
+            processedRuleSets?.group?.[selectedRuleset] &&
+            res?.result?.filterInfo
+          ) {
+            processedRuleSets.group[selectedRuleset].filterInfo =
+              res.result.filterInfo;
+          }
+          return processedRuleSets;
+        });
+        CapNotification.success({
+          message: formatMessage(globalMessages.editedSuccessfully),
+        });
+        const scopingDetails = Object.assign(requestObject, {
+          programId: programId,
+          eventType: eventType,
+        });
+
+        gtmPush('scopingDetails', scopingDetails);
+      } else {
+        CapNotification.error({
+          message: formatMessage(globalMessages.errorMessage),
+        });
+      }
+    });
+  };
+
+  const ElementsToRender = () => (
+    <CapRowWithSpacing margin="0px" style={{ width: '100%' }}>
+      {contentAdded.map(content => getElementLayout(content))}
+    </CapRowWithSpacing>
+  );
+
+  const onRefreshClick = () => {
+    if (getStoresRequest === FAILURE) actions.getStores();
+    if (getZonesRequest === FAILURE) actions.getZones();
+    if (getConceptsRequest === FAILURE) actions.getConcepts();
+    if (getEventSource === FAILURE) actions.getEventSource();
+    if (getClusterRequest === FAILURE) actions.getClusters();
+  };
+
+  const scopeContent = (
+    <CapSpin spinning={showSpin}>
+      <ErrorBoundaryWrapper
+        showImage
+        useStyle
+        isApiErrorBoundary
+        onRefreshClick={onRefreshClick}
+        isApiError={showError}
+      >
+        <CapRowWithSpacing margin={CAP_SPACE_08}>
+          <ElementsToRender renderContent={contentAdded} />
+        </CapRowWithSpacing>
+      </ErrorBoundaryWrapper>
+    </CapSpin>
+  );
+
+  const scopeFooter = (
+    <TriggerAction
+      title={formatMessage(globalMessages.save)}
+      triggerAction={ hasLoyaltyUXEnhancementsEnabled ? saveScopingEnhanced : saveScoping}
+      isDisabled={showSpin}
+      id="loyalty-scoping-save-button"
+      className="lp-btn-config-workflows-scoping"
+    />
+  );
+
+  return (
+    <CapRow className={className}>
+      <CapHeader
+        size="regular"
+        className={`scope-title-container ${hasLoyaltyUXEnhancementsEnabled && isSelectedRulesetRoot ? 'scope-container-parent' : ''}`}
+        title={formatMessage(globalMessages.scopeTitle)}
+        description={
+          <CapLabel type="label1">
+            {formatMessage(globalMessages.defineCriteriaForAcceptingPointBack)}
+          </CapLabel>
+        }
+      />
+      {hasLoyaltyUXEnhancementsEnabled && !isSelectedRulesetRoot && <CapInfoNote
+        className="scoping-note"
+        message={
+          <CapLabel className="scoping-note-label" type="label2">
+            {formatMessage(messages.childRulesetInfoNote)}
+          </CapLabel>}
+        
+      />}
+      <CapRow
+        className={`scope-content-container ${
+          !disabled ? 'cursor-pointer' : ''
+        }`}
+      >
+        {scopeContent}
+      </CapRow>
+      {!disabled && (
+        <CapRow className="scope-content-footer">{scopeFooter}</CapRow>
+      )}
+    </CapRow>
+  );
+};
+
+ScopeSlidebox.propTypes = {
+  intl: intlShape.isRequired,
+  closeSlidebox: PropTypes.func,
+  saveSlidebox: PropTypes.func,
+  isSaveDisabled: PropTypes.bool,
+  source: PropTypes.string,
+  handleSaveFilterInfo: PropTypes.func,
+};
+
+ScopeSlidebox.defaultProps = {
+  isSaveDisabled: false,
+};
+
+const mapStateToProps = createStructuredSelector({
+  rulesetData: makeSelectScopeAndCapCommonData(),
+  scopingData: makeSelectScopingData(),
+  status: makeSelectSaveScopingStatus(),
+  userData: makeSelectCap(),
+});
+
+function mapDispatchToProps(dispatch) {
+  return {
+    actions: bindActionCreators(actions, dispatch),
+    capActions: bindActionCreators(capActions, dispatch),
+  };
+}
+
+const withConnect = connect(
+  mapStateToProps,
+  mapDispatchToProps,
+);
+
+export default compose(
+  withErrorBoundary,
+  withConnect,
+  withRouter,
+)(injectIntl(memo(withStyles(ScopeSlidebox, style))));