@capillarytech/creatives-library 1.0.2 → 2.0.0

package/components/organisms/Tiers/Tiers.js

@@ -1,826 +0,0 @@
-/**
- *
- * Tiers
- *
- */
-
-import React, { useReducer, useEffect, useState } from 'react';
-import PropTypes from 'prop-types';
-import classnames from 'classnames';
-import isEmpty from 'lodash/isEmpty';
-import isEqual from 'lodash/isEqual';
-import cloneDeep from 'lodash/cloneDeep';
-import { connect } from 'react-redux';
-import withStyles from 'utils/withStyles';
-import { injectIntl, intlShape } from 'react-intl';
-import { createStructuredSelector } from 'reselect';
-import { compose, bindActionCreators } from 'redux';
-import withErrorBoundary from 'utils/withErrorBoundary';
-
-import CapSpin from '@capillarytech/cap-ui-library/CapSpin';
-import CapLevelGraphRenderer from '@capillarytech/cap-ui-library/CapLevelGraphRenderer';
-import CapCardBox from '@capillarytech/cap-ui-library/CapCardBox';
-import CapButton from '@capillarytech/cap-ui-library/CapButton';
-import CapRow from '@capillarytech/cap-ui-library/CapRow';
-import CapAlert from '@capillarytech/cap-ui-library/CapAlert';
-import CapNotification from '@capillarytech/cap-ui-library/CapNotification';
-
-import clearDataOnUnmount from 'utils/clearDataOnUnmount';
-import injectReducer from 'utils/injectReducer';
-import injectSaga from 'utils/injectSaga';
-import {
-  getUpgradeData,
-  getTrackers,
-  getUICompatibleRenewTrackerObj,
-} from 'utils/tiers';
-
-import AddTier from '../AddTier';
-import TierCard from '../../molecules/TierCard';
-import CreateTier from '../CreateTier';
-import CreateTierInfo from '../../molecules/CreateTierInfo';
-import EmptyStateIllustration from '../../molecules/EmptyStateIllustration';
-import AddMoreCard from '../../molecules/AddMoreCard';
-
-import * as globalSelectors from '../../pages/Cap/selectors';
-import * as selectors from './selectors';
-import * as actions from './actions';
-import reducer from './reducer';
-import saga from './saga';
-import * as appConstants from '../../pages/App/constants';
-import * as style from './style';
-import * as constants from './constants';
-import messages from './messages';
-import globalMessages from '../../pages/Cap/messages';
-import * as globalActions from '../../pages/Cap/actions';
-
-import * as context from './context';
-import * as programContext from '../../pages/ProgramSummary/context';
-import * as programSummarySelectors from '../../pages/ProgramSummary/selectors';
-import { populateDefaultTiersColor, isTrue } from 'utils/commonUtils';
-import { gtmPush } from '../../../utils/gtmTrackers';
-
-import AddTierSetting from '../AddTierSetting';
-import ErrorBoundaryWrapper from '../../molecules/ErrorBoundaryWrapper';
-import * as programSummaryActions from '../../pages/ProgramSummary/actions';
-
-const { makeSelectCap, makeSelectTierSecondaryCriteria } = globalSelectors;
-const { styles, SpinnerSpace } = style;
-const { makeSelectTiers } = selectors;
-const { Provider } = context;
-const { getProgramContext } = programContext;
-const { makeSelectTrackers } = programSummarySelectors;
-const {
-  OFFSET_HEIGHT,
-  STROKE_DASH_ARRAY,
-  OFFSET_LINE_DISTANCE,
-  ELE_DISTANCE_VIEW,
-  ELE_DISTANCE_CONFIGURE,
-  GRAPH_WIDTH_VIEW,
-  GRAPH_WIDTH_CONFIGURE,
-} = constants;
-const {
-  REQUEST,
-  FAILURE,
-  TIER_CARD_DIMENSION,
-  TIERS_CONNECTION_LINE_COLOR,
-  TIERS_CONNECTION_LINE_WIDTH,
-  MODE_VIEW,
-  MODE_CONFIGURE,
-  ADD_TIER,
-  CREATE_TIER,
-  SINGLE,
-  THRESHOLD,
-  LOWEST,
-  STEP_POINTS,
-  TRACKER_VALUE_BASED,
-} = appConstants;
-const {
-  RENEW_HEADER_HEIGHT,
-  DEFAULT_WIDTH,
-  DEFAULT_HEIGHT,
-  VALIDITY_HEIGHT,
-  ELIGIBILITY_HEADER_HEIGHT,
-  DOWNGRADE_CARD_HEIGHT,
-  ADD_MORE_CARD_HEIGHT,
-} = TIER_CARD_DIMENSION;
-
-const connectionAttrs = {
-  strokeWidth: parseInt(TIERS_CONNECTION_LINE_WIDTH),
-  targetMarker: {
-    name: 'classic',
-    size: 7,
-  },
-};
-
-const SLIDEBOX_DEFAULT = {
-  createTier: {
-    ...CreateTier.DEFAULT_ATTRIBUTE,
-    show: false,
-    isEditMode: false,
-  },
-  addTier: { ...AddTier.DEFAULT_ATTRIBUTE, show: false, isEditMode: false },
-};
-
-const slideboxReducer = (state = SLIDEBOX_DEFAULT, action) => {
-  switch (action.type) {
-    case CREATE_TIER:
-      return { ...state, createTier: action?.payload };
-    case ADD_TIER:
-      return { ...state, addTier: action?.payload };
-    default:
-      return state;
-  }
-};
-
-const Tiers = ({
-  actions,
-  globalActions,
-  className,
-  intl: { formatMessage },
-  tiers: {
-    getTierStatus,
-    addTierSecondaryCriteriaStatus,
-    tier,
-    getTierError,
-  } = {},
-  userData: { currentOrgDetails = {} } = {},
-  mode,
-  trackersData: { getTrackersStatus, trackersDetails = [] } = {},
-  secCriteriaErrorData: { tierSecondaryCriteria: secCriteriaData = {} } = {},
-  showNext,
-  onChangeTab,
-  toggleAdvancedSetting,
-  refreshStrategyData = () => {},
-  programSummaryActions,
-}) => {
-  const { programId, currentProgram = {} } = getProgramContext();
-  const [graphKey, setGraphKey] = useState('tier-level-renderer-graph');
-
-  const [slideboxState, dispatchSlidebox] = useReducer(
-    slideboxReducer,
-    SLIDEBOX_DEFAULT,
-  );
-
-  const [newTier, setNewTier] = useState({
-    ...CreateTier.DEFAULT_ATTRIBUTE,
-    show: false,
-  });
-
-  const [addTier, setAddTier] = useState({
-    ...AddTier.DEFAULT_ATTRIBUTE,
-    show: false,
-  });
-
-  const [addTierSetting, setAddTierSetting] = useState({
-    dataSource: [],
-    show: false,
-  });
-
-  const [currentTier, setCurrentTier] = useState({});
-  const [secondaryThresholdErrorMsg, setSecondaryThresholdErrorMsg] = useState(
-    '',
-  );
-  const [tierSecondaryCriteria, setTierSecondaryCriteria] = useState({});
-
-  useEffect(
-    () => {
-      setTierSecondaryCriteria(tierSecondaryCriteria => {
-        if (!isEqual(tierSecondaryCriteria, secCriteriaData)) {
-          setGraphKey(`tier-level-renderer-graph-${Math.random()}`);
-          setSecondaryThresholdErrorMsg('');
-          return !isEmpty(secCriteriaData) ? cloneDeep(secCriteriaData) : {};
-        }
-        return tierSecondaryCriteria;
-      });
-    },
-    [JSON.stringify(secCriteriaData)],
-  );
-
-  const updateTierSecondaryCriteria = (
-    tierThresholdIndex,
-    currentThresholdValue,
-  ) => {
-    const thresholdValues = tierSecondaryCriteria.threshold_value || [];
-    thresholdValues[tierThresholdIndex] = currentThresholdValue;
-    setTierSecondaryCriteria({
-      ...tierSecondaryCriteria,
-      threshold_value: thresholdValues,
-    });
-  };
-
-  const toggleSlidebox = (type, isEditMode) =>
-    dispatchSlidebox({
-      type,
-      payload: { show: !slideboxState[type]?.show, isEditMode },
-    });
-
-  const formAttributeChangeAction = (type, param, value) => {
-    dispatchSlidebox({
-      type,
-      payload: Object.assign({}, slideboxState[type], { [param]: value }),
-    });
-  };
-
-  const formSubmitAction = (type, payload) =>
-    dispatchSlidebox({ type, payload });
-
-  const changeTierContent = (type, payload) => {
-    switch (type) {
-      case CREATE_TIER:
-        return setNewTier({ ...newTier, payload });
-      default:
-    }
-  };
-
-  const toggleCreateTierView = () =>
-    setAddTier({ ...addTier, show: !addTier['show'] });
-
-  const onTierCardClick = (tier, isEditMode, isFirstTier) => {
-    setCurrentTier(tier);
-    if (isFirstTier) toggleSlidebox(CREATE_TIER, isEditMode);
-    else toggleSlidebox(ADD_TIER, isEditMode);
-  };
-
-  const populateNodeConnection = ({
-    tiersCollection,
-    downgradeTarget,
-    index,
-    connections = [],
-  }) => {
-    let downgradeTierName = '';
-    switch (downgradeTarget) {
-      case SINGLE:
-        downgradeTierName = tiersCollection[index - 1]?.name;
-        connections.push({
-          sourceId: `tiers-${index}`,
-          targetId: `tiers-${index - 1}`,
-        });
-        break;
-      case LOWEST:
-        downgradeTierName = tiersCollection[0]?.name;
-        connections.push({
-          sourceId: `tiers-${index}`,
-          targetId: `tiers-${0}`,
-        });
-        break;
-      case THRESHOLD:
-        break;
-        // THRESHOLD CONNECTION IS COMMETED FOR FUTURE REFERENCE
-        for (let count = index - 1; count >= 0; count--) {
-          connections.push({
-            sourceId: `tiers-${index}`,
-            targetId: `tiers-${count}`,
-          });
-        }
-      default:
-    }
-    return downgradeTierName;
-  };
-
-  const getCommonCardHeight = tiersCollection => {
-    const {
-      hasEligibility,
-      hasTrackerEligibility,
-      hasSecondaryEligibility,
-      hasValidity,
-      hasRenew,
-      renewCount,
-      renewTrackerCount,
-    } = tiersCollection.reduce(
-      (acc, tier) => {
-        const { bodyContent = {} } = tier;
-        const {
-          shouldDowngrade = false,
-          conditions = {},
-          upgrade: { secondaryCriteriaEnabled, current_value_type } = {},
-        } = bodyContent;
-        if (!isEmpty(bodyContent)) {
-          acc.hasEligibility = true;
-          acc.hasTrackerEligibility =
-            current_value_type === TRACKER_VALUE_BASED;
-        }
-        if (isTrue(shouldDowngrade)) {
-          acc.hasValidity = true;
-
-          if (!isEmpty(conditions)) {
-            const {
-              always,
-              tracker = [],
-              numVisits,
-              points,
-              purchase,
-            } = conditions;
-            if (!isTrue(always)) {
-              acc.hasRenew = true;
-              const filterRenewList = [numVisits, points, purchase].filter(
-                item => item && `${item}` !== '-1',
-              );
-              if (filterRenewList.length > acc.renewCount)
-                acc.renewCount = filterRenewList.length;
-            }
-            if (Array.isArray(tracker) && tracker.length > 0) {
-              const filterRenewTrackerList = tracker.filter(
-                trackerData =>
-                  !isEmpty(getUICompatibleRenewTrackerObj(trackerData)),
-              );
-              if (filterRenewTrackerList.length > acc.renewTrackerCount) {
-                acc.renewTrackerCount = filterRenewTrackerList.length;
-              }
-            }
-          }
-        }
-        if (
-          isTrue(secondaryCriteriaEnabled) ||
-          !isEmpty(tierSecondaryCriteria)
-        ) {
-          acc.hasSecondaryEligibility = true;
-        }
-        return acc;
-      },
-      {
-        hasEligibility: false,
-        hasTrackerEligibility: false,
-        hasValidity: false,
-        hasRenew: false,
-        hasSecondaryEligibility: false,
-        renewCount: 0,
-        renewTrackerCount: 0,
-      },
-    );
-    let height = parseInt(DEFAULT_HEIGHT);
-    //ELIGIBILITY
-    if (hasEligibility) {
-      height += parseInt(ELIGIBILITY_HEADER_HEIGHT);
-      height += hasTrackerEligibility ? 48 : 28;
-      if (hasSecondaryEligibility) {
-        height += 48;
-      }
-    }
-
-    // VALIDITY
-    if (hasValidity) {
-      height += parseInt(VALIDITY_HEIGHT);
-      // RENEW
-      if (hasRenew && (renewCount > 0 || renewTrackerCount > 0)) {
-        height += parseInt(RENEW_HEADER_HEIGHT);
-        height += renewCount ? 28 * renewCount : 0;
-        height += renewTrackerCount ? 48 * renewTrackerCount : 0;
-      }
-    }
-
-    return height;
-  };
-
-  const getGraphProps = tiersCollection => {
-    const nodes = [];
-    const connections = [];
-    let downgradeCardHeight = 0;
-    tiersCollection = populateDefaultTiersColor(tiersCollection);
-    const commonHeight = getCommonCardHeight(tiersCollection);
-
-    tiersCollection.forEach((tier, index) => {
-      const { bodyContent = {} } = tier;
-      const { downgradeTarget = '', shouldDowngrade = false } = bodyContent;
-      const hasBodyContent = !isEmpty(bodyContent);
-      let height = hasBodyContent ? commonHeight : parseInt(DEFAULT_HEIGHT);
-      let downgradeToTierName = '';
-      if (isTrue(shouldDowngrade)) {
-        height += parseInt(DOWNGRADE_CARD_HEIGHT);
-        downgradeCardHeight = parseInt(DOWNGRADE_CARD_HEIGHT);
-        downgradeToTierName = populateNodeConnection({
-          tiersCollection,
-          downgradeTarget,
-          index,
-          connections,
-        });
-      }
-
-      nodes.push({
-        id: `tiers-${index}`,
-        height,
-        component: TierCard,
-        props: {
-          ...tier,
-          tierSecondaryCriteria,
-          updateTierSecondaryCriteria,
-          downgradeToTierName,
-          height: hasBodyContent ? commonHeight : parseInt(DEFAULT_HEIGHT),
-          isEditable: mode === MODE_CONFIGURE && isEmpty(tierSecondaryCriteria),
-          onEditClick: () =>
-            onTierCardClick({ ...tier, tierIndex: index }, true, index === 0),
-        },
-        toolTip: tier?.name,
-      });
-    });
-    addMoreCard(nodes);
-    return {
-      nodes,
-      connections,
-      graphHeight: commonHeight + downgradeCardHeight,
-    };
-  };
-
-  const onAddMoreCardClick = (tierType, tierIndex) => {
-    setCurrentTier({ tierIndex });
-    toggleSlidebox(tierType);
-  };
-
-  const addMoreCard = nodes => {
-    if (
-      mode === MODE_CONFIGURE &&
-      isEmpty(tierSecondaryCriteria) &&
-      nodes.length > 0
-    ) {
-      const props = {
-        wrapperClassName: 'tier-add-more-card-wrapper',
-        className: 'tier-add-more-card',
-        height: ADD_MORE_CARD_HEIGHT,
-        width: DEFAULT_WIDTH,
-        content: (
-          <AddMoreCard
-            title={formatMessage(messages.createNewTier)}
-            cardAction={onAddMoreCardClick.bind(this, ADD_TIER, nodes.length)}
-          />
-        ),
-      };
-      nodes.push({
-        id: `tiers-add-new`,
-        height: parseInt(ADD_MORE_CARD_HEIGHT),
-        component: CapCardBox,
-        props,
-      });
-    }
-  };
-
-  const slabParse = (
-    totalSlabs = [],
-    upgradePropertyValues,
-    downgradePropertyValues,
-  ) => {
-    const {
-      // UPGRADE
-      current_value_type,
-      slab_upgrade_mode,
-      tracker_condition_id,
-      tracker_id,
-      upgradeThresholdValues = [],
-      additional_upgrade_criteria = [],
-      // SECONDARY UPGRADE
-      secondaryUpgradeMode,
-      secondaryTrackerConditionId,
-      secondaryTrackerId,
-      trackerThresholdValues = [],
-    } = getUpgradeData(upgradePropertyValues, currentProgram);
-    const trackers = getTrackers(trackersDetails, formatMessage);
-
-    const { slabs: downgradeSlabs = [] } =
-      (downgradePropertyValues && JSON.parse(downgradePropertyValues)) || {};
-
-    return totalSlabs.reduce((obj, item, tierIndex) => {
-      const tierThresholdIndex = tierIndex - 1;
-      let bodyContent = {};
-      if (tierIndex > 0) {
-        // DOWNGRADE
-        if (downgradeSlabs.length > 0) {
-          bodyContent =
-            downgradeSlabs.find(
-              value => value?.slabNumber == item?.serialNumber,
-            ) || {};
-        }
-        if (upgradeThresholdValues.length > 0) {
-          bodyContent.upgrade = {
-            // UPGRADE
-            current_value_type,
-            slab_upgrade_mode,
-            tracker_condition_id,
-            tracker_id,
-            upgradeThreshold: upgradeThresholdValues[tierThresholdIndex],
-            // SECONDARY UPGRADE
-            secondaryCriteriaEnabled: additional_upgrade_criteria.length > 0,
-            secondaryUpgradeMode,
-            secondaryTrackerConditionId,
-            secondaryTrackerId,
-            trackerThreshold: trackerThresholdValues[tierThresholdIndex],
-          };
-          bodyContent.trackers = trackers;
-        }
-      }
-
-      let finalItem = {
-        ...item,
-        tierThresholdIndex,
-        bodyContent: bodyContent,
-        formatMessage,
-        currentOrgDetails,
-      };
-      obj.push(finalItem);
-      return obj;
-    }, []);
-  };
-
-  const getConditionalParam = tier => {
-    const {
-      tierUpgrade = [],
-      tierDowngrade = [],
-      slabs: totalSlabs = [],
-    } = tier;
-    const { propertyValues: upgradePropertyValues } = tierUpgrade?.[0] || {};
-    const { propertyValues: downgradePropertyValues } =
-      tierDowngrade?.[0] || {};
-
-    return slabParse(
-      totalSlabs,
-      upgradePropertyValues,
-      downgradePropertyValues,
-    );
-  };
-
-  useEffect(() => {
-    getTier();
-  }, []);
-
-  const getTier = () => actions.getTier(programId);
-
-  const showSpin =
-    !getTierStatus ||
-    getTierStatus === REQUEST ||
-    getTrackersStatus === REQUEST ||
-    addTierSecondaryCriteriaStatus === REQUEST;
-
-  const { graphHeight, ...nodesAndConnections } = getGraphProps(
-    getConditionalParam(tier),
-  );
-
-  const graphProps = {
-    offsetHeight: OFFSET_HEIGHT,
-    graphWidth: mode === MODE_VIEW ? GRAPH_WIDTH_VIEW : GRAPH_WIDTH_CONFIGURE,
-    reverseConnProps: {
-      ...connectionAttrs,
-      strokeDasharray: STROKE_DASH_ARRAY,
-    },
-    defaultEleDistance:
-      mode === MODE_VIEW ? ELE_DISTANCE_VIEW : ELE_DISTANCE_CONFIGURE,
-    offsetLineDistance: OFFSET_LINE_DISTANCE,
-    lineStrokeColor: TIERS_CONNECTION_LINE_COLOR,
-    graphId: 'tier-graph-renderer',
-    graphHeight: `${graphHeight}px`,
-    forwardConnProps: connectionAttrs,
-    defaultEleWidth: parseInt(DEFAULT_WIDTH),
-    scrollClassName: 'graph-renderer-scroll-container',
-    ...nodesAndConnections,
-  };
-
-  const handleTabChange = () => onChangeTab(STEP_POINTS);
-
-  const getSecondaryThresholdErrorMsg = () => {
-    const { threshold_value: thresholdValue = [] } = tierSecondaryCriteria;
-
-    const { slabs = [] } = tier;
-    const tiersNameObj = slabs.reduce((acc, { name }, index) => {
-      if (index !== 0) {
-        acc[index - 1] = name;
-      }
-      return acc;
-    }, {});
-    if (thresholdValue.length !== slabs.length - 1) {
-      return formatMessage(messages.allTiersSecondaryThresholdMandatory);
-    } else {
-      const { missingList, validationErrorTierName } = thresholdValue.reduce(
-        (acc, value, index) => {
-          if (!value && value !== 0) {
-            acc.missingList.push(tiersNameObj[index]);
-          }
-          if (
-            !acc.validationErrorTierName &&
-            ((thresholdValue[index - 1] &&
-              parseInt(value) <= parseInt(thresholdValue[index - 1])) ||
-              (thresholdValue[index + 1] &&
-                parseInt(value) >= parseInt(thresholdValue[index + 1])))
-          ) {
-            acc.validationErrorTierName = tiersNameObj[index];
-          }
-          return acc;
-        },
-        { missingList: [], validationErrorTierName: '' },
-      );
-      if (missingList.length > 0) {
-        return formatMessage(messages.forSecondaryThresholdMandatory, {
-          tiers: missingList.join(', '),
-        });
-      }
-      if (validationErrorTierName) {
-        return formatMessage(messages.validitySecondaryThresholdError, {
-          tier: validationErrorTierName,
-        });
-      }
-    }
-  };
-
-  const getPayload = () => ({
-    programId,
-    isAdvanceSetting: true,
-    configureOnlySecondaryCriteria: true,
-    upgrade: {
-      secondary_criteria_enabled: true,
-      additional_upgrade_criteria: tierSecondaryCriteria,
-    },
-  });
-
-  const onSaveAndContinueClick = () => {
-    if (!isEmpty(tierSecondaryCriteria)) {
-      const errorMsg = getSecondaryThresholdErrorMsg();
-      setSecondaryThresholdErrorMsg(errorMsg || '');
-      if (!errorMsg) {
-        const payload = getPayload();
-        actions.addTierSecondaryCriteria(payload, () => {
-          CapNotification.success({
-            message: formatMessage(globalMessages.savedSuccessfully),
-          });
-          const mode = 'ADVANCE_SETTING';
-          const tierDetails = Object.assign(payload, {
-            type: 'TIERS_SECONDARY_CRITERIA_ADVANCE_SETTING',
-            mode,
-          });
-          gtmPush('tierDetails', tierDetails);
-
-          globalActions.setTierSecondaryCriteria();
-          globalActions.checkReconfigureProgram(programId);
-          getTier();
-        });
-      }
-    } else {
-      showNext();
-    }
-  };
-
-  const onAdvancedSettingClick = () => {
-    toggleSlidebox(ADD_TIER);
-    toggleAdvancedSetting();
-  };
-
-  const onRefreshClick = () => {
-    if (getTrackersStatus === FAILURE) {
-      programSummaryActions.getTrackersData({ programId });
-    }
-    if (getTierStatus === FAILURE) {
-      getTier();
-    }
-  };
-
-  const closeAddTierSlideBox = () =>
-    formAttributeChangeAction(ADD_TIER, 'show', false);
-  const closeAddTierSetting = () =>
-    setAddTierSetting({ show: false, dataSource: [] });
-  const closeCreateTierSlideBox = () =>
-    formAttributeChangeAction(CREATE_TIER, 'show', false);
-
-  return (
-    <CapRow className={className}>
-      <CapSpin spinning={showSpin}>
-        {showSpin && <SpinnerSpace />}
-        <ErrorBoundaryWrapper
-          useStyle
-          isApiErrorBoundary
-          showImage={mode === MODE_VIEW}
-          onRefreshClick={onRefreshClick}
-          isApiError={
-            getTrackersStatus === FAILURE || getTierStatus === FAILURE
-          }
-        >
-          {!showSpin &&
-            (nodesAndConnections.nodes.length > 0 ? (
-              <>
-                <CapLevelGraphRenderer
-                  key={graphKey}
-                  showToolTip
-                  allowReverseArrowTooltip
-                  className="tier-graph-renderer"
-                  {...graphProps}
-                />
-                {secondaryThresholdErrorMsg && (
-                  <CapRow className="tiers-graph-alert">
-                    <CapAlert
-                      showIcon
-                      type="warning"
-                      className={classnames(
-                        'tier-alert-icon',
-                        'align-items-center',
-                      )}
-                      message={secondaryThresholdErrorMsg}
-                    />
-                  </CapRow>
-                )}
-              </>
-            ) : mode === MODE_VIEW || getTierError ? (
-              <EmptyStateIllustration />
-            ) : (
-              <CreateTierInfo
-                toggleSlidebox={toggleCreateTierView}
-                createNewTier={changeTierContent}
-                formAttributeChangeAction={formAttributeChangeAction}
-                formSubmitAction={formSubmitAction}
-                addTier={addTier}
-                {...newTier}
-              />
-            ))}
-          {mode === MODE_CONFIGURE && (
-            <>
-              <CapButton
-                className={classnames(
-                  'save-continue-button',
-                  'lp-btn-config-tiers-save',
-                )}
-                onClick={onSaveAndContinueClick}
-                id="loyalty-tier-save-and-continue-button"
-              >
-                {formatMessage(
-                  isEmpty(secCriteriaData)
-                    ? globalMessages.saveAndContinue
-                    : globalMessages.save,
-                )}
-              </CapButton>
-              <Provider value={{ getTier, setAddTierSetting }}>
-                {slideboxState[ADD_TIER]?.show && (
-                  <AddTier
-                    setAttribute={formAttributeChangeAction}
-                    tierData={tier}
-                    currentTier={currentTier}
-                    {...slideboxState[ADD_TIER]}
-                    onAdvancedSettingClick={onAdvancedSettingClick}
-                    refreshStrategyData={refreshStrategyData}
-                    errorWrapperSlideBoxClose={closeAddTierSlideBox}
-                  />
-                )}
-                {slideboxState[CREATE_TIER]?.show && (
-                  <CreateTier
-                    setAttribute={formAttributeChangeAction}
-                    tierData={tier}
-                    currentTier={currentTier}
-                    errorWrapperSlideBoxClose={closeCreateTierSlideBox}
-                    {...slideboxState[CREATE_TIER]}
-                  />
-                )}
-              </Provider>
-            </>
-          )}
-        </ErrorBoundaryWrapper>
-      </CapSpin>
-      {addTierSetting.show && (
-        <AddTierSetting
-          dataSource={addTierSetting.dataSource}
-          setAddTierSetting={setAddTierSetting}
-          handleTabChange={handleTabChange}
-          errorWrapperSlideBoxClose={closeAddTierSetting}
-        />
-      )}
-    </CapRow>
-  );
-};
-
-Tiers.propTypes = {
-  tiers: PropTypes.object,
-  intl: intlShape.isRequired,
-  className: PropTypes.string,
-  mode: PropTypes.string,
-  actions: PropTypes.object.isRequired,
-  trackersData: PropTypes.object,
-  showNext: PropTypes.func,
-  onChangeTab: PropTypes.func,
-  secCriteriaErrorData: PropTypes.object,
-  toggleAdvancedSetting: PropTypes.func,
-  refreshStrategyData: PropTypes.func,
-};
-
-const mapStateToProps = createStructuredSelector({
-  tiers: makeSelectTiers(),
-  userData: makeSelectCap(),
-  trackersData: makeSelectTrackers(),
-  secCriteriaErrorData: makeSelectTierSecondaryCriteria(),
-});
-
-function mapDispatchToProps(dispatch) {
-  return {
-    actions: bindActionCreators(actions, dispatch),
-    globalActions: bindActionCreators(globalActions, dispatch),
-    programSummaryActions: bindActionCreators(programSummaryActions, dispatch),
-  };
-}
-const withConnect = connect(
-  mapStateToProps,
-  mapDispatchToProps,
-);
-
-const withSaga = injectSaga({ key: 'tiers', saga });
-const withReducer = injectReducer({ key: 'tiers', reducer });
-
-export default withErrorBoundary(
-  compose(
-    withSaga,
-    withReducer,
-    withConnect,
-  )(injectIntl(clearDataOnUnmount(withStyles(Tiers, styles)))),
-  {
-    showImage: true,
-    useStyle: true,
-  },
-);