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

package/components/organisms/ScopeSlidebox/ScopeSlidebox.js

@@ -1,10 +1,7 @@
-import React, { useState, useEffect, useMemo, memo, useCallback } from 'react';
+import React, { useState, useEffect, useMemo, memo } 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';
@@ -12,17 +9,13 @@ 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 CapSlideBox from '@capillarytech/cap-ui-library/CapSlideBox';
 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 StyledVars from '@capillarytech/cap-ui-library/styled';
 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,
@@ -30,19 +23,9 @@ import {
   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,
+  ACTIVE_CLUSTER
 } 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';
@@ -54,6 +37,7 @@ import CollapseWithDateRange from '../../molecules/CollapseWithDateRange';
 import TriggerAction from '../../atoms/TriggerAction';
 import globalMessages from '../../pages/Cap/messages';
 import { CapRowWithSpacing } from '../../pages/Cap/style';
+import TagForCapAndScope from '../../molecules/TagForCapAndScope';
 import { gtmPush } from '../../../utils/gtmTrackers';
 import {
   SCOPE_AGGREGATE_ELEMENTS,
@@ -66,37 +50,25 @@ import {
   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 { CAP_SPACE_32 } = StyledVars;
 const {
   makeSelectScopeAndCapCommonData,
   makeSelectScopingData,
   makeSelectSaveScopingStatus,
 } = selectors;
 
-export const ScopeSlidebox = ({
-  /** InjectedProps */
-  className,
+const ScopeSlidebox = ({
+  selectedTab,
   intl: { formatMessage },
   match: {
     params: { programId },
   },
   actions,
+  closeSlidebox,
+  selectedRuleset,
+  eventType,
   rulesetData: { getRulesetsStatus },
   scopingData: {
     getStoresRequest,
@@ -111,102 +83,22 @@ export const ScopeSlidebox = ({
     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,
-}) => { 
-  
+  rulesets = [],
+}) => {
   const [scoppingList, setScoppingList] = useState([]);
   const [contentAdded, setContentAdded] = useState([]);
-
-  const [currentTab, setCurrentTab] = useState(null);
-  const [loyaltyType, setLoyaltyType] = useState(ALL_USERS);
-  /** Store Related state */
+  const [currentTab, setCurrentTab] = useState(LOYALTY_TYPE);
+  const [loyaltyType, setLoyaltyType] = useState(LOYALTY_USER);
   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 [storeIdsFromFile, setStoreIdsFromFile] = useState([]);
   const showSpin =
     getRulesetsStatus === REQUEST ||
     getStoresRequest === REQUEST ||
@@ -226,768 +118,174 @@ export const ScopeSlidebox = ({
 
   const clusterOptions = useMemo(
     () =>
-      clusterFromProps
-        ?.filter(cluster => cluster.status == ACTIVE_CLUSTER)
-        ?.map(({ id, name }) => ({
-          label: name,
-          value: `${id}`,
-          key: `${id}`,
-        })),
-    [clusterFromProps],
-  );
+    clusterFromProps.filter((cluster) => cluster.status == ACTIVE_CLUSTER)
+      .map(({ id, name }) => ({
+        label: name,
+        value: `${id}`,
+        key: `${id}`,
+      })),
+    [JSON.stringify(clusterFromProps)],
+);
 
   const eventSourceOptions = useMemo(
     () =>
-      eventSourceFromProp?.map(value => ({
+      eventSourceFromProp.map(value => ({
         title: value,
         key: `${value}`,
-        ['data-testid']: value,
       })),
-    [eventSourceFromProp],
+    [JSON.stringify(eventSourceFromProp)],
   );
 
-  
   const storeOptionsMulti = useMemo(
     () =>
-      storesFromProp?.map(({ code, id }) => ({
+      storesFromProp.map(({ code, id }) => ({
         title: code,
         key: `${id}`,
-        ['data-testid']: code,
       })),
-    [storesFromProp],
+    [JSON.stringify(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',
-            }}
-          />
-        ),
+      zonesFromProp.map(({ name, id }) => ({
+        title: name,
         key: `${id}`,
-        ['data-testid']: name,
       })),
-    [zonesFromProp],
-  );
-
-  const zoneRootValue = useMemo(
-    () => zonesFromProp?.find(({ name }) => name === ROOT)?.id,
-    [zonesFromProp],
+    [JSON.stringify(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',
-            }}
-          />
-        ),
+      conceptFromProp.map(({ name, id }) => ({
+        title: name,
         key: `${id}`,
-        ['data-testid']: name,
       })),
-    [conceptFromProp],
-  );
-
-  const conceptRootValue = useMemo(
-    () => conceptFromProp?.find(({ name }) => name === ROOT)?.id,
-    [conceptFromProp],
+    [JSON.stringify(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(() => {
+    if (!mounted) {
+      actions.getEventSource();
+      actions.getClusters();
+      setMounted(true);
+    }
+  }, []);
 
   useEffect(
     () => {
-      let newLoyaltyType = ALL_USERS;
+      let loyaltyType = loyaltyType;
       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] || {};
+      const scoppingList = rulesets.find(
+        ruleset => ruleset.id == selectedRuleset,
+      )?.filterInfo;
+      scoppingList?.forEach(scoping => {
+        const { name, propertyToValues, isInclude } = scoping;
+        switch (name) {
+          case LOYALTY_TYPE:
             contentAdded.push(LOYALTY_TYPE);
-            if (propertyToValues?.loyaltyType?.[0]) {
-              newLoyaltyType = propertyToValues.loyaltyType[0];
-            }
+            loyaltyType = propertyToValues.loyaltyType[0];
             break;
-          }
-          case EVENT_SOURCE: {
-            const { propertyToValues } = scopingObject[EVENT_SOURCE] || {};
+          case EVENT_SOURCE:
             contentAdded.push(EVENT_SOURCE);
-            if (propertyToValues) {
-              eventSource = propertyToValues.eventSource;
-              isSpecificEventSource = SPECIFIC_LIMIT;
-            }
+            eventSource = propertyToValues.eventSource;
             break;
-          }
-          case ZONES: {
-            const { propertyToValues, isInclude } = scopingObject[ZONES] || {};
+          case ZONES:
             contentAdded.push(ZONES);
-            if (propertyToValues) {
-              isSpecificZone = SPECIFIC_LIMIT;
-              zone = {
-                isIncluded: isInclude,
-                selected: hasLoyaltyUXEnhancementsEnabled && isInclude === false ? flipSelectedOptions(propertyToValues.zoneIds, zonesFromProp) : propertyToValues.zoneIds,
-              };
-            }
+            zone = {
+              isIncluded: isInclude,
+              selected: propertyToValues.zoneIds,
+            };
             break;
-          }
-          case CONCEPTS: {
-            const { propertyToValues, isInclude } =
-              scopingObject[CONCEPTS] || {};
+          case CONCEPTS:
             contentAdded.push(CONCEPTS);
-            if (propertyToValues) {
-              isSpecificConcept = SPECIFIC_LIMIT;
-              concepts = {
-                isIncluded: isInclude,
-                selected: hasLoyaltyUXEnhancementsEnabled && isInclude === false ? flipSelectedOptions(propertyToValues.conceptIds, conceptFromProp) : propertyToValues.conceptIds,
-              };
-            }
+            concepts = {
+              isIncluded: isInclude,
+              selected: propertyToValues.conceptIds,
+            };
             break;
-          }
-          case STORES: {
-            const { propertyToValues, isInclude } = scopingObject[STORES] || {};
+          case STORES:
             contentAdded.push(STORES);
-            if (propertyToValues) {
-              isSpecificStore = SELECT_STORE_LIST;
-              store = {
-                isIncluded: isInclude,
-                selected: hasLoyaltyUXEnhancementsEnabled && isInclude === false ? flipSelectedOptions(propertyToValues.storeId, storesFromProp) : propertyToValues.storeId,
-              };
-            }
+            store = {
+              isIncluded: isInclude,
+              selected: 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,
-                },
-              };
-            }
+            const { startDate, endDate } = propertyToValues;
+            let [sd, st] = startDate[0].split(' ');
+            let [ed, et] = endDate[0].split(' ');
+
+            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;
-            }
+            const { clusterName, clusterValues } = propertyToValues;
+            clusters = {
+              isIncluded: isInclude,
+              selected: clusterName[0],
+            };
+            clusterValue = clusterValues;
             break;
           }
         }
       });
+      setCurrentTab(selectedTab || LOYALTY_TYPE);
       setScoppingList(scoppingList);
       setContentAdded(contentAdded);
-      setLoyaltyType(newLoyaltyType);
+      setLoyaltyType(loyaltyType);
       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],
+    [JSON.stringify(rulesets), selectedRuleset],
   );
-
   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([]);
+    const secondaryOptions = clusterFromProps.reduce(
+      (secondaryOptions, cluster) => {
+        if (cluster.name === value)
+          secondaryOptions = cluster.segmentValues.map(({ id, value }) => ({
+            id,
+            value,
+            label: value,
+          }));
+        return secondaryOptions;
+      },
+      [],
+    );
     setCluster({
       ...clusters,
       selected: value,
     });
+    setClusterValueOptions(secondaryOptions);
   };
 
-
   const toggleClusterIsIncluded = () =>
     setCluster({
       ...clusters,
@@ -998,96 +296,70 @@ export const ScopeSlidebox = ({
     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 removeLoyaltyType = () => {
+    setContentAdded(contentAdded.filter(item => item !== LOYALTY_TYPE));
+    setLoyaltyType(LOYALTY_USER);
+  };
 
-  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 removeDateRange = () => {
+    setDateRange(INTITAL_DATE_RANGE);
+    setContentAdded(contentAdded.filter(item => item !== DATE_RANGE));
+  };
 
-  const changeTabToLoyaltyType = () =>
-    setCurrentTab(
-      currentTab => (currentTab === LOYALTY_TYPE ? '' : LOYALTY_TYPE),
-    );
-  const changeTabToDateRange = () =>
-    setCurrentTab(currentTab => (currentTab === DATE_RANGE ? '' : DATE_RANGE));
+  const removeConcepts = () => {
+    setContentAdded(contentAdded.filter(item => item !== CONCEPTS));
+    setConcepts(IS_INCLUDED_SELECTED);
+  };
 
-  const changeTabToConcepts = () => {
-    setCurrentTab(currentTab => (currentTab === CONCEPTS ? '' : CONCEPTS));
+  const removeZone = () => {
+    setContentAdded(contentAdded.filter(item => item !== ZONES));
+    setZone(IS_INCLUDED_SELECTED);
   };
 
-  const changeTabToZone = () =>
-    setCurrentTab(currentTab => (currentTab === ZONES ? '' : ZONES));
+  const removeEventSource = () => {
+    setContentAdded(contentAdded.filter(item => item !== EVENT_SOURCE));
+    setEventSource([]);
+  };
 
-  const changeTabToEventSource = () =>
-    setCurrentTab(
-      currentTab => (currentTab === EVENT_SOURCE ? '' : EVENT_SOURCE),
-    );
+  const removeCluster = () => {
+    setContentAdded(contentAdded.filter(item => item !== CLUSTER));
+    setCluster(CLUSTER_SELECTED);
+    setClusterValueOptions([]);
+    setClusterValues([]);
+  };
+
+  const changeTabToLoyaltyType = () => setCurrentTab(LOYALTY_TYPE);
+
+  const changeTabToDateRange = () => setCurrentTab(DATE_RANGE);
+
+  const changeTabToConcepts = () => setCurrentTab(CONCEPTS);
 
-  const changeTabToCluster = () =>
-    setCurrentTab(currentTab => (currentTab === CLUSTER ? '' : CLUSTER));
+  const changeTabToZone = () => setCurrentTab(ZONES);
 
-  const changeTabToStore = () =>
-    setCurrentTab(currentTab => (currentTab === STORES ? '' : STORES));
+  const changeTabToEventSource = () => setCurrentTab(EVENT_SOURCE);
+
+  const changeTabToCluster = () => setCurrentTab(CLUSTER);
 
   const changeDateRangeStart = (date, dateString) => {
     setDateRange({
       ...dateRange,
-      startDate: { ...dateRange?.startDate, date, dateString:moment(date).format(DATE_FORMAT) },
+      startDate: { ...dateRange?.startDate, date, dateString },
     });
   };
 
   const changeDateRangeEnd = (date, dateString) =>
     setDateRange({
       ...dateRange,
-      endDate: { ...dateRange?.endDate, date, dateString:moment(date).format(DATE_FORMAT) },
+      endDate: { ...dateRange?.endDate, date, dateString },
     });
 
   const changeDateRangeStartTime = (time, timeString) =>
@@ -1102,488 +374,60 @@ export const ScopeSlidebox = ({
       endDate: { ...dateRange?.endDate, time, timeString },
     });
 
+  const changeTabToStore = () => setCurrentTab(STORES);
+
+  const removeStore = () =>
+    setContentAdded(contentAdded.filter(item => item !== STORES));
+
   const changeStoreIncluded = () =>
     setStore({ ...store, isIncluded: !store?.isIncluded });
 
-  const changeStoreSelect = value => {
-    setStore({ ...store, selected: value })
-  };
+  const changeStoreSelect = value => setStore({ ...store, selected: value });
 
-  const changeFileInStore = ({ fileList }) => {
-    if (!fileList.length) {
-      setStoreIdsFromFile(INITIAL_STORE_ID_FILE);
-      setStore({ ...store, file: null });
-      return;
-    }
+  const changeFileInStore = ({ file, fileList }) => {
+    const reader = new FileReader();
+    reader.onload = function(evt) {
+      setStoreIdsFromFile(
+        evt.target.result?.split(/\r?\n|\r|,/)?.filter(id => id),
+      );
+    };
+    reader.readAsText(file.originFileObj);
     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);
+      return file;
     });
     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} />,
+    title: formatMessage(globalMessages[LOYALTY_TYPE]),
     isOpen: currentTab === LOYALTY_TYPE,
     changeOpen: changeTabToLoyaltyType,
+    deleteAction: removeLoyaltyType,
     radioGroup: {
       value: loyaltyType,
       onChange: changeLoyaltyType,
-      defaultValue: ALL_USERS,
-      className: 'scope-radio-group',
+      defaultValue: LOYALTY_USER,
     },
     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),
+    title: formatMessage(globalMessages[DATE_RANGE]),
     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),
-    },
+    deleteAction: removeDateRange,
     dateTimePicker: [
       {
         dateValue: dateRange?.startDate?.date,
@@ -1602,334 +446,121 @@ export const ScopeSlidebox = ({
     ],
   };
 
-
   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} />,
+    title: formatMessage(globalMessages[CONCEPTS]),
     isOpen: currentTab === CONCEPTS,
     changeOpen: changeTabToConcepts,
+    deleteAction: removeConcepts,
     switchProps: {
       isSwitchChecked: concepts?.isIncluded,
       onSwitchChange: toggleConceptIncluded,
-      label: formatMessage(globalMessages.exclude),
+      label: formatMessage(globalMessages.include),
       isDivider: false,
-      name: 'concepts-switch',
-      className: 'margin-b-15 scope-switch',
-      parentClassName: 'switch-container',
-      suffix: formatMessage(globalMessages.include),
     },
     selectOptions: {
-      options: hasLoyaltyUXEnhancementsEnabled ?    sortMultiSelectOptions(conceptOptionsEnhancement) : conceptOptions,
+      options: conceptOptions,
       value: concepts?.selected,
-      onChange: conceptSelectHandler,
+      onChange: addConcepts,
       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} />,
+    title: formatMessage(globalMessages[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],
-          },
-        ],
-      },
-    },
+    deleteAction: removeZone,
     switchProps: {
       isSwitchChecked: zone?.isIncluded,
       onSwitchChange: toggleZoneIncluded,
-      label: formatMessage(globalMessages.exclude),
+      label: formatMessage(globalMessages.include),
       isDivider: false,
-      name: 'zone-switch',
-      className: 'margin-b-15 scope-switch',
-      parentClassName: 'switch-container',
-      suffix: formatMessage(globalMessages.include),
     },
     selectOptions: {
-      options: hasLoyaltyUXEnhancementsEnabled ? sortMultiSelectOptions(zoneOptionsEnhancement) : zoneOptions,
+      options: zoneOptions,
       value: zone?.selected,
-      onChange: zoneSelectHandler,
+      onChange: addZones,
       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} />,
+    title: formatMessage(globalMessages[EVENT_SOURCE]),
     isOpen: currentTab === EVENT_SOURCE,
     changeOpen: changeTabToEventSource,
+    deleteAction: removeEventSource,
     selectOptions: {
-      options: hasLoyaltyUXEnhancementsEnabled ? sortMultiSelectOptions(eventSourceOptionsEnhancement) : eventSourceOptions,
+      options: eventSourceOptions,
       value: eventSource,
       onChange: changeEventSource,
-      placeholder: formatMessage(globalMessages.EventSource),
+      placeholder: formatMessage(messages.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} />,
+    title: formatMessage(globalMessages.cluster),
     isOpen: currentTab === CLUSTER,
     changeOpen: changeTabToCluster,
+    deleteAction: removeCluster,
     switchProps: {
       isSwitchChecked: clusters?.isIncluded,
       onSwitchChange: toggleClusterIsIncluded,
-      label: formatMessage(globalMessages.exclude),
+      label: formatMessage(globalMessages.include),
       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,
+      options: clusterOptions,
+      value: clusters?.selected,
       onChange: changeClusterSelected,
       placeholder: formatMessage(messages.clusterName),
     },
     seconodarySelectOptions: {
-      options: hasLoyaltyUXEnhancementsEnabled ? sortMultiSelectOptions(clusterValuesEnhancement) : clusterValueOptions,
+      options: clusterValueOptions,
       value: clusterValues,
-      onChange: handleSecondaryClusterChange,
+      onChange: setClusterValues,
       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} />,
+  const storeProps = {
+    title: formatMessage(globalMessages[STORES]),
     isOpen: currentTab === STORES,
     changeOpen: changeTabToStore,
-    isSpecificStore,
+    deleteAction: removeStore,
     switchProps: {
       isSwitchChecked: store?.isIncluded,
       onSwitchChange: changeStoreIncluded,
-      label: formatMessage(globalMessages.exclude),
+      label: formatMessage(globalMessages.include),
       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,
+      options: 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 => {
@@ -1960,17 +591,20 @@ export const ScopeSlidebox = ({
       case CLUSTER: {
         return <CollapseWithMultiSelect {...clusterProps} />;
       }
+      default:
+        return null;
     }
   };
 
-  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 arrayOrder = (item1, item2) =>
+    SCOPE_AGGREGATE_ELEMENTS.indexOf(item1) -
+    SCOPE_AGGREGATE_ELEMENTS.indexOf(item2);
+
+  const addScope = id => {
+    if (id ) {
+      setContentAdded([...contentAdded, id].sort(arrayOrder));
+      setCurrentTab(id);
+    }
   };
 
   const getScopingObject = type => {
@@ -1990,29 +624,22 @@ export const ScopeSlidebox = ({
         scopeObject.scopingType = EVENT_SOURCE;
         return scopeObject;
       case ZONES:
-        scopeObject.scopeMode = hasLoyaltyUXEnhancementsEnabled? true: zone.isIncluded;
+        scopeObject.scopeMode = zone.isIncluded;
         scopeObject.propertyValues = { zones: zone.selected };
         scopeObject.scopingType = ZONES;
         return scopeObject;
       case CONCEPTS:
-        scopeObject.scopeMode = hasLoyaltyUXEnhancementsEnabled? true: concepts.isIncluded;
+        scopeObject.scopeMode = 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.scopeMode = store.isIncluded;
+        scopeObject.propertyValues = { stores: store.selected };
         scopeObject.scopingType = STORES;
         return scopeObject;
       case DATE_RANGE:
-        scopeObject.scopeMode = isDateRangeIncluded;
+        scopeObject.scopeMode = true;
         scopeObject.propertyValues = {
           startDate: `${dateRange.startDate.dateString || ''} ${dateRange
             .startDate.timeString || ''}`,
@@ -2038,8 +665,7 @@ export const ScopeSlidebox = ({
           },
           [],
         );
-
-        scopeObject.scopeMode = hasLoyaltyUXEnhancementsEnabled? true: clusters.isIncluded;
+        scopeObject.scopeMode = clusters.isIncluded;
         scopeObject.propertyValues = {
           clusterName: clusters.selected,
           clusterValues,
@@ -2055,97 +681,15 @@ export const ScopeSlidebox = ({
         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);
+    storesFromProp.forEach(({ id }) => {
+      originalStoreIds[id] = true;
     });
-    return { valid, invalid };
+    const invalidStoreIds = ids.filter(id => !originalStoreIds[id]);
+    return isEmpty(invalidStoreIds);
   };
 
-
   const validateDateRange = value => {
     const { propertyValues: { startDate, endDate } = {} } = value || {};
     const [sd, st] = startDate.split(' ');
@@ -2155,11 +699,10 @@ export const ScopeSlidebox = ({
     let startDateMoment = moment(startDate);
     let endDateMoment = moment(endDate);
     let timeDifference = endDateMoment.diff(startDateMoment, 'seconds');
-    if (timeDifference <= 0) return formatMessage(messages.dateTimeDifferenceError);
+    if (timeDifference <= 0) return formatMessage(messages.timeDifferenceError);
     return false;
   };
 
-
   const validate = (type, value) => {
     const { propertyValues = {} } = value || {};
     switch (type) {
@@ -2177,51 +720,33 @@ export const ScopeSlidebox = ({
         return !isEmpty(propertyValues?.concepts);
       }
       case STORES: {
-        return !isEmpty(propertyValues?.stores);
+        return !isEmpty(propertyValues?.stores) || !isEmpty(storeIdsFromFile);
       }
       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);
+      default:
+        return false;
     }
   };
 
   const saveScoping = () => {
     const oldScopingObject = {};
-
     (scoppingList || []).forEach(scope => {
       oldScopingObject[scope.name.toUpperCase()] = scope;
     });
-
-
     const newScopingObject = contentAdded.reduce(
       (scopingObject, content) => {
-
-        if (!isSpecificDataAdded(content) ) {
+        const scope = getScopingObject(content);
+        if (
+          content === STORES &&
+          !isEmpty(storeIdsFromFile) &&
+          !validateStoreIds(storeIdsFromFile)
+        ) {
+          scopingObject.storeIdsFromFile = false;
           return scopingObject;
         }
-
-
-        const scope = getScopingObject(content);
         if (content === DATE_RANGE) {
           const invalid = validateDateRange(scope);
           if (!invalid) {
@@ -2245,15 +770,12 @@ export const ScopeSlidebox = ({
         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,
@@ -2261,19 +783,16 @@ export const ScopeSlidebox = ({
       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);
+        notifyHandledException(JSON.stringify(newScopingObject));
         return;
       }
-       */
       CapNotification.error({
         message: `${newScopingObject.error
           .map(type => formatMessage(globalMessages[type]))
@@ -2283,18 +802,12 @@ export const ScopeSlidebox = ({
       });
       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 {
@@ -2304,188 +817,14 @@ export const ScopeSlidebox = ({
       }
       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;
+      closeSlidebox(res);
       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),
         });
@@ -2493,31 +832,42 @@ export const ScopeSlidebox = ({
           programId: programId,
           eventType: eventType,
         });
-
         gtmPush('scopingDetails', scopingDetails);
       } else {
         CapNotification.error({
-          message: formatMessage(globalMessages.errorMessage),
+          message: formatMessage(messages.errorMessage),
         });
       }
     });
   };
 
+  const getTag = key => (
+    <TagForCapAndScope
+      tagAction={addScope}
+      param={key}
+      heading={formatMessage(globalMessages[key])}
+    />
+  );
+
   const ElementsToRender = () => (
-    <CapRowWithSpacing margin="0px" style={{ width: '100%' }}>
+    <CapRowWithSpacing style={{ width: '100%' }}>
       {contentAdded.map(content => getElementLayout(content))}
     </CapRowWithSpacing>
   );
 
+  const TagElement = () => (
+    <CapRowWithSpacing>
+      {SCOPE_AGGREGATE_ELEMENTS.filter(item => !contentAdded.includes(item))
+        .sort(arrayOrder)
+        .map(item => getTag(item))}
+    </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();
+    // TO-DO
   };
 
-  const scopeContent = (
+  const sliderContent = () => (
     <CapSpin spinning={showSpin}>
       <ErrorBoundaryWrapper
         showImage
@@ -2526,17 +876,18 @@ export const ScopeSlidebox = ({
         onRefreshClick={onRefreshClick}
         isApiError={showError}
       >
-        <CapRowWithSpacing margin={CAP_SPACE_08}>
+        <CapRowWithSpacing margin={CAP_SPACE_32}>
           <ElementsToRender renderContent={contentAdded} />
+          <TagElement className="scope-slide-tag-element" />
         </CapRowWithSpacing>
       </ErrorBoundaryWrapper>
     </CapSpin>
   );
 
-  const scopeFooter = (
+  const slideBoxFooter = (
     <TriggerAction
       title={formatMessage(globalMessages.save)}
-      triggerAction={ hasLoyaltyUXEnhancementsEnabled ? saveScopingEnhanced : saveScoping}
+      triggerAction={saveScoping}
       isDisabled={showSpin}
       id="loyalty-scoping-save-button"
       className="lp-btn-config-workflows-scoping"
@@ -2544,49 +895,38 @@ export const ScopeSlidebox = ({
   );
 
   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>
+    <CapSlideBox
+       showShadow
+       show
+      header={
+        <CapHeader
+          size="h1"
+          title={formatMessage(messages.addScope)}
+          description={formatMessage(
+            globalMessages.defineCriteriaForAcceptingPointBack,
+          )}
+        />
+      }
+      content={sliderContent()}
+      footer={slideBoxFooter}
+      handleClose={closeSlidebox}
+      size="size-s"
+    />
   );
 };
 
 ScopeSlidebox.propTypes = {
   intl: intlShape.isRequired,
+  primary: PropTypes.object,
   closeSlidebox: PropTypes.func,
   saveSlidebox: PropTypes.func,
   isSaveDisabled: PropTypes.bool,
-  source: PropTypes.string,
-  handleSaveFilterInfo: PropTypes.func,
 };
 
 ScopeSlidebox.defaultProps = {
+  primary: [],
+  closeSlidebox: () => {},
+  saveSlidebox: () => {},
   isSaveDisabled: false,
 };
 
@@ -2594,7 +934,6 @@ const mapStateToProps = createStructuredSelector({
   rulesetData: makeSelectScopeAndCapCommonData(),
   scopingData: makeSelectScopingData(),
   status: makeSelectSaveScopingStatus(),
-  userData: makeSelectCap(),
 });
 
 function mapDispatchToProps(dispatch) {
@@ -2613,4 +952,4 @@ export default compose(
   withErrorBoundary,
   withConnect,
   withRouter,
-)(injectIntl(memo(withStyles(ScopeSlidebox, style))));
+)(injectIntl(memo(ScopeSlidebox)));