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

package/components/organisms/PromotionAdvancedSettings/PromotionAdvancedSettings.js

@@ -1,1580 +0,0 @@
-import React, { useState, useEffect } from 'react';
-import { injectIntl, intlShape } from 'react-intl';
-import PropTypes from 'prop-types';
-import classnames from 'classnames';
-import { withRouter } from 'react-router-dom';
-
-import CapSpin from '@capillarytech/cap-ui-library/CapSpin';
-import CapRow from '@capillarytech/cap-ui-library/CapRow';
-import CapButton from '@capillarytech/cap-ui-library/CapButton';
-import CapLink from '@capillarytech/cap-ui-library/CapLink';
-import CapIcon from '@capillarytech/cap-ui-library/CapIcon';
-import CapSlideBox from '@capillarytech/cap-ui-library/CapSlideBox';
-import CapInput from '@capillarytech/cap-ui-library/CapInput';
-import CapColumn from '@capillarytech/cap-ui-library/CapColumn';
-import CapLabel from '@capillarytech/cap-ui-library/CapLabel';
-import CapNotification from '@capillarytech/cap-ui-library/CapNotification';
-import CapTooltip from '@capillarytech/cap-ui-library/CapTooltip';
-import CapRadioGroup from '@capillarytech/cap-ui-library/CapRadioGroup';
-import CapRadio from '@capillarytech/cap-ui-library/CapRadio';
-import CapAlert from '@capillarytech/cap-ui-library/CapAlert';
-import CapTag from '@capillarytech/cap-ui-library/CapTag';
-import CapCheckbox from '@capillarytech/cap-ui-library/CapCheckbox';
-import CapHeading from '@capillarytech/cap-ui-library/CapHeading';
-import CapTooltipWithInfo from '@capillarytech/cap-ui-library/CapTooltipWithInfo';
-import { createStructuredSelector } from 'reselect';
-import { connect } from 'react-redux';
-import { compose, bindActionCreators } from 'redux';
-
-import messages from './messages';
-import globalMessages from '../../pages/Cap/messages';
-import {
-  promotionMetaDataValueDataType,
-  promotionMetadataThriftSignatures,
-} from './constants';
-import {
-  components as components_constants,
-  mode as mode_constants,
-} from '../../pages/Cap/constants';
-import { makeSelectGetProgramConfigDetails } from '../../pages/Cap/selectors';
-import {
-  CUSTOM,
-  LOYALTY,
-  MAX_INTEGER_LIMIT,
-  MODE_VIEW,
-  NUMBER,
-  POSITIVE_INTEGER,
-  REQUEST,
-  SOURCE_PROMOTION,
-  ALWAYS_APPLY,
-  EXCLUSIVE,
-  NON_EXCLUSIVE,
-} from '../../pages/App/constants';
-import * as actions from './actions';
-import reducer from './reducer';
-import saga from './saga';
-import { makeSelectMetaDataKeys } from './selectors';
-import styles from './style';
-import { publicPath } from '../../../config/path';
-import * as capActions from '../../pages/Cap/actions';
-
-import SwitchWithDivider from '../../molecules/SwitchWithDivider';
-import StringMetaDataAttribute from '../../molecules/StringMetaDataAttribute';
-import DoubleMetaDataAttribute from '../../molecules/DoubleMetaDataAttribute';
-import DateTimeMetaDataAttribute from '../../molecules/DateTimeMetaDataAttribute';
-import InfoBanner from '../../molecules/InfoBanner';
-import CheckboxWithInputPrefix from '../../molecules/CheckboxWithInputPrefix';
-import LiabilitySettings from '../LiabilitySettings';
-import withStyles from '../../../utils/withStyles';
-import injectSaga from '../../../utils/injectSaga';
-import injectReducer from '../../../utils/injectReducer';
-import { gtmPush } from '../../../utils/gtmTrackers';
-import PromotionSettings from '../PromotionSettings/PromotionSettings';
-import { SPECIFIC_VALUE } from '../PromotionSettings/constants';
-import { NonEditableContainer } from '../../../global-styles';
-import CapHeader from '@capillarytech/cap-ui-library/CapHeader';
-import NumberInput from '../../molecules/NumberInput';
-import {
-  GENERIC,
-  LOYALTY_EARNING,
-  ENABLE_ADVANCE_LOYALTY_PROMOTIONS,
-} from '../../pages/Promotions/constants';
-import { TRANSACTION_ADD } from '../ConfigureWorkflows/constants';
-import { makeSelectCap } from '../../pages/Cap/selectors';
-import { stackingMapping, stackingMappingTooltip } from './utils';
-import { loadItemInProd } from '../../../services/localStorageApi';
-import classNames from 'classnames';
-
-export const PromotionAdvancedSettings = ({
-  match: {
-    params: { mode: currentUserMode },
-  },
-  className,
-  intl: { formatMessage },
-  updateFormDataValue,
-  formData = {},
-  showPromoIdentifier,
-  mode,
-  metaDataKeysData: {
-    promotionMetaDataKeysStatus = '',
-    promotionMetaDataKeys = [],
-  } = {},
-  actions,
-  programId,
-  promotionId,
-  eventName,
-  showNextContent,
-  liabilitySettings,
-  setLiabilitySettings,
-  pointsAllocationLimitData = {},
-  setPointsAllocationLimitData,
-  isPointsAllocationEnabled = false,
-  setIsPointsAllocationEnabled,
-  hasPointsPromotionEnhancementsEnabled = false,
-  promotionType,
-  userData,
-  pointsAllocationLimitDataLocal,
-  setPointsAllocationLimitDataLocal,
-  fetchedProgramConfigData,
-  capActions,
-  setStackingData,
-  stackingData,
-}) => {
-  const orgId = loadItemInProd('orgID');
-  const { currentOrgDetails } = userData;
-  const { accessibleFeatures = [] } = currentOrgDetails;
-  const isPromotionTypeEnabled = accessibleFeatures.includes(
-    ENABLE_ADVANCE_LOYALTY_PROMOTIONS,
-  );
-  const [clickedDone, setClickedDone] = useState(false);
-  const [isDoneButtonDisabled, setIsDoneButtonDisabled] = useState(true);
-  const [radioGroupValue, setRadioGroupValue] = useState(EXCLUSIVE);
-  const isStackingDone = fetchedProgramConfigData?.fetchedProgramConfigData?.[programId]?.[0]?.value
-    ? JSON.parse(fetchedProgramConfigData.fetchedProgramConfigData[programId][0].value).isStackingEnabled
-    : false;
-  const [isCheckBoxSelected, setIsCheckBoxSelected] = useState(false);
- 
-  const {
-    isPointAllocationLimits: isPointAllocationLimitsFormData,
-    isPromotionExternalIdentifier: isPromotionExternalIdentifierFormData,
-    isPromotionAttributes: isPromotionAttributesFormData,
-    pointsPerEventLimit: pointsPerEventLimitFormData,
-    eventsPerMemberLimit: eventsPerMemberLimitFormData,
-    pointsPerMemberLimit: pointsPerMemberLimitFormData,
-    pointsPerPromotionLimit: pointsPerPromotionLimitFormData,
-    externalIdentifier: externalIdentifierFormData,
-  } = formData;
-  useEffect(
-    () => {
-      if (mode === mode_constants.CREATE) {
-        actions.getPromotionMetaDataKeys({
-          mode,
-        });
-      } else {
-        actions.getPromotionMetaDataKeys({
-          mode,
-          programId,
-          promotionId,
-        });
-      }
-    },
-    [mode],
-  );
-
-  useEffect(() => {
-    if (mode === mode_constants.EDIT) {
-      const updatedStateValue = stackingData;
-      setRadioGroupValue(updatedStateValue.value);
-      if(updatedStateValue.value === 'DEFAULT' && isStackingDone) {
-        setRadioGroupValue(EXCLUSIVE);
-      }
-      if (updatedStateValue.value === ALWAYS_APPLY) { 
-        setIsCheckBoxSelected(true);
-      }
-    }
-  }, [stackingData, isStackingDone]);
-  
-  
-  useEffect(
-    () => {
-      setPointAllocationLimits(isPointAllocationLimitsFormData);
-      setPromotionExternalIdentifier(isPromotionExternalIdentifierFormData);
-      setPromotionAttributes(isPromotionAttributesFormData);
-
-      setPointsPerEventLimit(pointsPerEventLimitFormData);
-      setPointsPerEventLimitValue(pointsPerEventLimitFormData);
-
-      setEventsPerMemberLimit(eventsPerMemberLimitFormData);
-      setEventsPerMemberLimitValue(eventsPerMemberLimitFormData);
-
-      setPointsPerMemberLimit(pointsPerMemberLimitFormData);
-      setPointsPerMemberLimitValue(pointsPerMemberLimitFormData);
-
-      setPointsPerPromotionLimit(pointsPerPromotionLimitFormData);
-      setPointsPerPromotionLimitValue(pointsPerPromotionLimitFormData);
-
-      setExternalIdentifier(externalIdentifierFormData);
-    },
-    [formData],
-  );
-
-  const [isMaxExceededErrorForEvent, setIsMaxExceededErrorForEvent] = useState(
-    false,
-  );
-  const [
-    isMaxExceededErrorForMember,
-    setIsMaxExceededErrorForMember,
-  ] = useState(false);
-  const [
-    isMaxExceededErrorForEventsPerMember,
-    setIsMaxExceededErrorForEventsPerMember,
-  ] = useState(false);
-  const [
-    isMaxExceededErrorForOverallPromotion,
-    setIsMaxExceededErrorForOverallPromotion,
-  ] = useState(false);
-  const [promotionPointLimitError, setPromotionPointLimitError] = useState(
-    false,
-  );
-
-  const [showSlideBox, setSlideBoxState] = useState(false);
-
-  const [isPointAllocationLimits, setPointAllocationLimits] = useState(
-    isPointAllocationLimitsFormData,
-  );
-  const [
-    isPromotionExternalIdentifier,
-    setPromotionExternalIdentifier,
-  ] = useState(isPromotionExternalIdentifierFormData);
-  const [isPromotionAttributes, setPromotionAttributes] = useState(
-    isPromotionAttributesFormData,
-  );
-
-  const [promotionMetadata, setPromotionMetadata] = useState([]);
-  const [isPointsPerEventLimit, setPointsPerEventLimit] = useState(
-    pointsPerEventLimitFormData,
-  );
-  const [pointsPerEventLimit, setPointsPerEventLimitValue] = useState(
-    pointsPerEventLimitFormData,
-  );
-
-  const [isEventsPerMemberLimit, setEventsPerMemberLimit] = useState(
-    eventsPerMemberLimitFormData,
-  );
-  const [eventsPerMemberLimit, setEventsPerMemberLimitValue] = useState(
-    eventsPerMemberLimitFormData,
-  );
-
-  const [isPointsPerMemberLimit, setPointsPerMemberLimit] = useState(
-    pointsPerMemberLimitFormData,
-  );
-  const [pointsPerMemberLimit, setPointsPerMemberLimitValue] = useState(
-    pointsPerMemberLimitFormData,
-  );
-
-  const [isPointsPerPromotionLimit, setPointsPerPromotionLimit] = useState(
-    pointsPerPromotionLimitFormData,
-  );
-  const [pointsPerPromotionLimit, setPointsPerPromotionLimitValue] = useState(
-    pointsPerPromotionLimitFormData,
-  );
-
-  const [externalIdentifier, setExternalIdentifier] = useState(
-    externalIdentifierFormData,
-  );
-
-  const [validationError, setValidationError] = useState(false);
-
-  useEffect(
-    () => {
-      if (!clickedDone) {
-        setSlideBoxState(false);
-      }
-    },
-    [clickedDone],
-  );
-
-  useEffect(
-    () => {
-      if (isPromotionTypeEnabled && programId) {
-        capActions.getProgramConfig(
-          orgId,
-          [programId],
-          'PROMOTION_RANKING_STACKING_STRATEGY',
-        );
-      }
-    },
-    [programId],
-  );
-
-  const validate = () =>
-    !validationError &&
-    !isMaxExceededErrorForEvent &&
-    !isMaxExceededErrorForEventsPerMember &&
-    !isMaxExceededErrorForMember &&
-    !isMaxExceededErrorForOverallPromotion &&
-    !promotionPointLimitError &&
-    (isPromotionExternalIdentifier ? externalIdentifier !== '' : true);
-
-  const onClickModify = () => setSlideBoxState(true);
-
-  const onClickdone = () => {
-    const promoMeta = (promotionMetadata || []).filter(promo => promo);
-    if (validate()) {
-      const obj = {
-        isPointAllocationLimits,
-        isPromotionExternalIdentifier,
-        isPromotionAttributes,
-        pointsPerEventLimit,
-        eventsPerMemberLimit,
-        pointsPerMemberLimit,
-        pointsPerPromotionLimit,
-        externalIdentifier,
-        promotionMetadata: promoMeta,
-      };
-      updateFormDataValue(components_constants.promotionAdvancedSettings, obj);
-      setPointsAllocationLimitDataLocal(pointsAllocationLimitData);
-      setClickedDone(true);
-      const promotionDetails = Object.assign(obj, {
-        programId,
-        promotionId,
-        eventName,
-        mode,
-        eventKey: components_constants.promotionAdvancedSettings,
-      });
-      gtmPush('promotionDetails', promotionDetails);
-    } else {
-      CapNotification.error({
-        message: formatMessage(messages.errorMessageAdvanceSettings),
-      });
-    }
-  };
-  const closeSlideBox = () => {
-    setSlideBoxState(false);
-    setPointsAllocationLimitData(pointsAllocationLimitDataLocal);
-  };
-
-  const btnValidationByCheckBox = checkBoxValue => {
-    if (checkBoxValue) {
-      setValidationError(true);
-    } else {
-      setValidationError(false);
-    }
-  };
-
-  const isNotPointsPerEventLimit = () =>
-    isPointsPerEventLimit && pointsPerEventLimit === 0;
-  const isNotPointsPerMemberLimit = () =>
-    isPointsPerMemberLimit && pointsPerMemberLimit === 0;
-  const isNotPointsPerPromotionLimit = () =>
-    isPointsPerPromotionLimit && pointsPerPromotionLimit === 0;
-
-  const onPointsPerEventLimitInputChange = event => {
-    let value = event.target.value;
-
-    if (isPointsPerEventLimit && parseInt(value, 10) > 0) {
-      if (isNotPointsPerMemberLimit() || isNotPointsPerPromotionLimit()) {
-        setValidationError(true);
-      } else {
-        setValidationError(false);
-      }
-    } else {
-      setValidationError(true);
-    }
-
-    setIsMaxExceededErrorForEvent(
-      parseInt(value, 10) > MAX_INTEGER_LIMIT ? true : false,
-    );
-
-    validatePointsPerPromotionIsGreater(value);
-    setPointsPerEventLimitValue(value);
-  };
-
-  /**
-   * The maximum number of points activities is independent so we do not check if other checkbox value is present ot not
-   * @param {*} event
-   */
-  const onEventsPerMemberLimitInputChange = (event, value) => {
-    if (isEventsPerMemberLimit && parseInt(value, 10) > 0) {
-      setValidationError(false);
-    } else {
-      setValidationError(true);
-    }
-    setIsMaxExceededErrorForEventsPerMember(
-      parseInt(value, 10) > MAX_INTEGER_LIMIT ? true : false,
-    );
-    setEventsPerMemberLimitValue(value);
-  };
-
-  const validatePointsPerPromotionIsGreater = value => {
-    if (value?.length && isPointsPerPromotionLimit) {
-      if (parseInt(value, 10) <= pointsPerPromotionLimit) {
-        setPromotionPointLimitError(false);
-        setValidationError(false);
-      } else {
-        setPromotionPointLimitError(true);
-        setValidationError(true);
-      }
-    }
-  };
-
-  const onPointsPerMemberLimitInputChange = (event, value) => {
-    if (isPointsPerMemberLimit && parseInt(value, 10) > 0) {
-      if (isNotPointsPerEventLimit() || isNotPointsPerPromotionLimit()) {
-        setValidationError(true);
-      } else {
-        setValidationError(false);
-      }
-    } else {
-      setValidationError(true);
-    }
-    setIsMaxExceededErrorForMember(
-      parseInt(value, 10) > MAX_INTEGER_LIMIT ? true : false,
-    );
-    validatePointsPerPromotionIsGreater(value);
-    setPointsPerMemberLimitValue(value);
-  };
-
-  const onPointsPerPromotionLimitInputChange = (event, value) => {
-    if (isPointsPerPromotionLimit && parseInt(value, 10) > 0) {
-      if (isNotPointsPerMemberLimit() || isNotPointsPerEventLimit()) {
-        setValidationError(true);
-      } else {
-        setValidationError(false);
-      }
-    } else {
-      setValidationError(true);
-    }
-
-    if (
-      value === 0 ||
-      (parseInt(value, 10) >= pointsPerEventLimit &&
-        parseInt(value, 10) >= pointsPerMemberLimit)
-    ) {
-      setPromotionPointLimitError(false);
-    } else {
-      setPromotionPointLimitError(true);
-    }
-
-    setIsMaxExceededErrorForOverallPromotion(
-      parseInt(value, 10) > MAX_INTEGER_LIMIT ? true : false,
-    );
-
-    setPointsPerPromotionLimitValue(value);
-  };
-
-  const pointAllocationLimitsToggle = () => {
-    setPointAllocationLimits(!isPointAllocationLimits);
-
-    setPointsPerEventLimit(false);
-    setPointsPerEventLimitValue(0);
-
-    setEventsPerMemberLimit(false);
-    setEventsPerMemberLimitValue(0);
-
-    setPointsPerMemberLimit(false);
-    setPointsPerMemberLimitValue(0);
-
-    setPointsPerPromotionLimit(false);
-    setPointsPerPromotionLimitValue(0);
-  };
-
-  const onPointsPerEventLimitChange = () => {
-    if (!!isPointsPerEventLimit && isMaxExceededErrorForEvent)
-      setIsMaxExceededErrorForEvent(false);
-    btnValidationByCheckBox(!isPointsPerEventLimit);
-    setPointsPerEventLimit(!isPointsPerEventLimit);
-    setPointsPerEventLimitValue(0);
-  };
-
-  const onEventsPerMemberLimitChange = () => {
-    if (!!isEventsPerMemberLimit && isMaxExceededErrorForEventsPerMember)
-      setIsMaxExceededErrorForEventsPerMember(false);
-    btnValidationByCheckBox(!isEventsPerMemberLimit);
-    setEventsPerMemberLimit(!isEventsPerMemberLimit);
-    setEventsPerMemberLimitValue(0);
-  };
-
-  const onPointsPerMemberLimitChange = () => {
-    if (!!isPointsPerMemberLimit && isMaxExceededErrorForMember)
-      setIsMaxExceededErrorForMember(false);
-    btnValidationByCheckBox(!isPointsPerMemberLimit);
-    setPointsPerMemberLimit(!isPointsPerMemberLimit);
-    setPointsPerMemberLimitValue(0);
-  };
-
-  const onPointsPerPromotionLimitChange = () => {
-    //when isPointsPerPromotionLimit is false
-    //hide all field related errors
-    if (!!isPointsPerPromotionLimit && promotionPointLimitError) {
-      setPromotionPointLimitError(false);
-      setValidationError(false);
-    }
-    if (!!isPointsPerPromotionLimit && isMaxExceededErrorForOverallPromotion)
-      setIsMaxExceededErrorForOverallPromotion(false);
-
-    btnValidationByCheckBox(!isPointsPerPromotionLimit);
-    setPointsPerPromotionLimit(!isPointsPerPromotionLimit);
-    setPointsPerPromotionLimitValue(0);
-  };
-
-  const promotionExternalIdentifierToggle = () => {
-    setPromotionExternalIdentifier(!isPromotionExternalIdentifier);
-    setExternalIdentifier('');
-  };
-
-  const promotionAttributesToggle = () => {
-    setPromotionAttributes(!isPromotionAttributes);
-    setPromotionMetadata([]);
-  };
-
-  const handleEnrolmentExpiryChange = (type, value) => {
-    const updatedState = {
-      ...pointsAllocationLimitData,
-      enrolmentExpiry: {
-        ...pointsAllocationLimitData.enrolmentExpiry,
-        type: type ? type : pointsAllocationLimitData.enrolmentExpiry.type,
-        value: type ? '' : value,
-      },
-    }
-    setPointsAllocationLimitData(updatedState);
-  };
-  const handleIssualExpiryChange = (type, value) => {
-    const updatedState = {
-      ...pointsAllocationLimitData,
-      issualExpiry: {
-        ...pointsAllocationLimitData.issualExpiry,
-        type: type ? type : pointsAllocationLimitData.issualExpiry.type,
-        value: type ? '' : value,
-      },
-    }
-    setPointsAllocationLimitData(updatedState);
-  };
-
-  const handleEnrolmentLimitChange = e => {
-    const updatedState = {
-      ...pointsAllocationLimitData,
-      enrolmentLimit: {
-        ...pointsAllocationLimitData.enrolmentLimit,
-        value: e.target.value,
-      },
-    };
-    setPointsAllocationLimitData(updatedState);
-  };
-
-  const handleIssualLimitChange = e => {
-    const updatedState = {
-      ...pointsAllocationLimitData,
-      issualLimit: {
-        ...pointsAllocationLimitData.issualLimit,
-        value: e.target.value,
-      },
-    }
-    setPointsAllocationLimitData(updatedState);
-  };
-
-  const handleRedemptionLimitChange = e => {
-    const updatedState = {
-      ...pointsAllocationLimitData,
-      redemptionLimit: {
-        ...pointsAllocationLimitData.redemptionLimit,
-        value: e.target.value,
-      },
-    }
-    setPointsAllocationLimitData(updatedState);
-  };
-
-  const renderPromotionMetaDataItem = (
-    { valueType, fieldName, id, preLoadedValue },
-    index,
-  ) => {
-    const { DATE_TIME, DOUBLE, STRING } = promotionMetaDataValueDataType;
-    const {
-      STRING_THRIFT,
-      DOUBLE_THRIFT,
-      DATE_TIME_THRIFT,
-    } = promotionMetadataThriftSignatures;
-
-    let result = '';
-    switch (valueType) {
-      case DATE_TIME_THRIFT:
-        result = (
-          <DateTimeMetaDataAttribute
-            valueType={DATE_TIME}
-            fieldName={fieldName}
-            id={id}
-            preLoadedValue={preLoadedValue}
-            fieldIndex={index}
-            promotionMetadata={promotionMetadata}
-            setPromotionMetadata={setPromotionMetadata}
-            value={promotionMetadata[index]?.value}
-            placement="topLeft"
-          />
-        );
-        break;
-      case DOUBLE_THRIFT:
-        result = (
-          <DoubleMetaDataAttribute
-            valueType={DOUBLE}
-            fieldName={fieldName}
-            id={id}
-            preLoadedValue={preLoadedValue}
-            fieldIndex={index}
-            promotionMetadata={promotionMetadata}
-            setPromotionMetadata={setPromotionMetadata}
-            value={promotionMetadata[index]?.value}
-          />
-        );
-        break;
-      case STRING_THRIFT:
-        result = (
-          <StringMetaDataAttribute
-            valueType={STRING}
-            fieldName={fieldName}
-            id={id}
-            preLoadedValue={preLoadedValue}
-            fieldIndex={index}
-            promotionMetadata={promotionMetadata}
-            setPromotionMetadata={setPromotionMetadata}
-            value={promotionMetadata[index]?.value}
-          />
-        );
-        break;
-    }
-    return result;
-  };
-
-  const ExpiryRestrictions = ({
-    type,
-    value,
-    onChange,
-    options,
-    section,
-    title,
-    description,
-  }) => {
-    const handleRadioChange = event => {
-      onChange(event.target.value);
-    };
-    const handleInputChange = event => {
-      onChange(null, event.target.value);
-    };
-    const Input = option => (
-      <CapColumn className="settings-restrict-radio-group-option-input">
-        <NumberInput
-          disabled={value !== option.value}
-          value={value !== option.value ? '' : option.inputValue}
-          onChange={handleInputChange}
-          placeholder={formatMessage(globalMessages.example10)}
-          suffix={
-            <CapLabel
-              className="settings-restrict-radio-group-option-input-suffix"
-              type="label18"
-            >
-              {formatMessage(globalMessages.daysPlural)}
-            </CapLabel>
-          }
-        />
-      </CapColumn>
-    );
-    const selectedOption = options.find((option) => {
-      const { value: valueInternal } = option;
-      if (valueInternal === value) {
-        return true;
-      }
-    });
-    return (
-      <CapRow
-        className={classNames({
-          'enrolment-section': type === 'ENROLMENT_EXPIRY',
-          'issual-section': type === 'ISSUAL_EXPIRY',
-        })}
-      >
-        <CapHeader
-          size="regular"
-          title={section}
-          className="settings-restrict-header"
-        />
-        <CapHeader
-          size="regular"
-          title={title}
-          description={description}
-          className="settings-restrict-sub-header"
-        />
-        {currentUserMode === MODE_VIEW ? (
-          <CapRow className="settings-restrict-radio-group">
-            <CapRow className="settings-restrict-radio-group-option margin-b-30">
-              <CapColumn className="settings-restrict-radio-group-option-label">
-                <CapLabel type="label15">{selectedOption.label}</CapLabel>
-              </CapColumn>
-              <CapColumn>
-                {selectedOption.isInput ? selectedOption.inputValue : ''}
-              </CapColumn>
-            </CapRow>
-          </CapRow>
-        ) : (
-          <CapRadioGroup
-            key="ENROLMENT_EXPIRY_RADIO_GROUP"
-            className="settings-restrict-radio-group"
-            onChange={handleRadioChange}
-            value={value}
-          >
-            {options.map((option, index) => (
-              <CapRadio key={index} value={option.value}>
-                <CapRow
-                  key={index}
-                  className="settings-restrict-radio-group-option"
-                  onClick={(e) => e.preventDefault()}
-                >
-                  <CapColumn className="settings-restrict-radio-group-option-label">
-                    <CapLabel type="label15">{option.label}</CapLabel>
-                  </CapColumn>
-                  {option.isInput ? (
-                    value == option.value ? (
-                      Input(option)
-                    ) : (
-                      <CapTooltip
-                        title={formatMessage(messages.inputDisabledTooltip, {
-                          label: option.label,
-                        })}
-                      >
-                        {Input(option)}
-                      </CapTooltip>
-                    )
-                  ) : (
-                    ''
-                  )}
-                </CapRow>
-              </CapRadio>
-            ))}
-          </CapRadioGroup>)}
-      </CapRow>
-    );
-  };
-
-
-
-  const optionsStackingEnabled = formatMessage => [
-    {
-      label: (
-        <CapHeading.CapHeadingSpan className="stacking-options" type="h5">
-          {formatMessage(messages.exclusiveType)}
-          <CapTooltipWithInfo
-            title={
-              <CapRow className="tooltip-data">
-                {formatMessage(messages.exclusiveTypeTooltip)}
-              </CapRow>
-            }
-            getPopupContainer={() =>
-              document.querySelector('.cap-slide-box-v2')
-            }
-          />
-        </CapHeading.CapHeadingSpan>
-      ),
-      value: EXCLUSIVE,
-    },
-    {
-      label: (
-        <CapHeading.CapHeadingSpan className="stacking-options" type="h5">
-          {formatMessage(messages.nonexclusive)}
-          <CapTooltipWithInfo
-            title={
-              <CapRow className="tooltip-data">
-                {formatMessage(messages.nonexclusiveTypeTooltip)}
-              </CapRow>
-            }
-            getPopupContainer={() =>
-              document.querySelector('.cap-slide-box-v2')
-            }
-          />
-        </CapHeading.CapHeadingSpan>
-      ),
-      value: NON_EXCLUSIVE,
-    },
-    {
-      label: (
-        <CapHeading.CapHeadingSpan className="stacking-options" type="h5">
-          {formatMessage(messages.alwaysApply)}
-          <CapTooltipWithInfo
-            title={
-              <CapRow className="tooltip-data">
-                {formatMessage(messages.alwaysApplyTooltip)}
-              </CapRow>
-            }
-            getPopupContainer={() =>
-              document.querySelector('.cap-slide-box-v2')
-            }
-          />
-        </CapHeading.CapHeadingSpan>
-      ),
-      value: ALWAYS_APPLY,
-    },
-  ];
-
-  const handleradioGroupValueChange = e => {
-    setRadioGroupValue(e.target.value);
-    let isStackable = false;
-    let isExclusive = false;
-    let isAlwaysApply = false;
-
-    switch(e.target.value) {
-      case EXCLUSIVE:
-        isStackable = false;
-        isExclusive = true;
-        isAlwaysApply = false;
-        break;
-      case NON_EXCLUSIVE:
-        isStackable = true;
-        isExclusive = false;
-        isAlwaysApply = false;
-        break;
-      case ALWAYS_APPLY:
-        isStackable = false;
-        isExclusive = false;
-        isAlwaysApply = true;
-        break;
-    }
-
-    const updatedState = {
-      value: e.target.value,
-      isStackable: isStackable,
-      isExclusive: isExclusive,
-      isAlwaysApply: isAlwaysApply,
-    };
-    setStackingData(updatedState);
-  };
-
-  const onCheckboxChangeStacking = e => {
-    const isChecked = e.target.checked;
-    setIsCheckBoxSelected(isChecked);
-    const updatedState = {
-      value: isChecked ? ALWAYS_APPLY : EXCLUSIVE,
-      isStackable: false,
-      isExclusive: isChecked ? false : true,
-      isAlwaysApply: isChecked,
-    };
-    setStackingData(updatedState);
-  };
-  
-
-  const getSlideBoxContent = () => (
-    <CapSpin spinning={showSpin}>
-      {isPromotionTypeEnabled && eventName === TRANSACTION_ADD && (
-        <>
-          {currentUserMode === MODE_VIEW ? (
-            <>
-              <CapRow className="promotion-stacking-settings">
-                <CapHeading type="h3">
-                  {formatMessage(messages.promotionAppliedHeading)}
-                </CapHeading>
-                <CapTooltipWithInfo
-                  title={
-                    <CapRow className="tooltip-data">
-                      {formatMessage(messages.stackingNoteMessage)}
-                    </CapRow>
-                  }
-                  getPopupContainer={() =>
-                    document.querySelector('.cap-slide-box-v2')
-                  }
-                  className="viewMode-stacking-note-tooltip"
-                />
-                <CapTag className="new-tag">
-                  {formatMessage(globalMessages.new)}
-                </CapTag>
-              </CapRow>
-              <CapRow className="selected-stacking-value">
-                {formatMessage(
-                  messages[
-                    stackingMapping(stackingData.value)
-                  ],
-                )}
-                <CapTooltipWithInfo
-                  title={
-                    <CapRow className="tooltip-data">
-                      {formatMessage(
-                        messages[
-                          stackingMappingTooltip(
-                            stackingData.value,
-                          )
-                        ],
-                      )}
-                    </CapRow>
-                  }
-                  getPopupContainer={() =>
-                    document.querySelector('.cap-slide-box-v2')
-                  }
-                  className="viewMode-selectedValue-tooltip"
-                />
-              </CapRow>
-            </>
-          ) : (
-            <>
-              <CapRow className="promotion-stacking-settings">
-                <CapHeading type="h3">
-                  {formatMessage(messages.promotionAppliedHeading)}
-                </CapHeading>
-                <CapTag className="new-tag">
-                  {formatMessage(globalMessages.new)}
-                </CapTag>
-              </CapRow>
-              <CapLabel
-                type="label3"
-                className="promotion-stacking-description"
-              >
-                {formatMessage(messages.stackingNoteMessage)}
-              </CapLabel>
-
-              <CapRow className="promotion-stacking-option">
-                {isStackingDone ? (
-                  <CapRadioGroup
-                    className="promotion-stacking-radioGroup"
-                    value={radioGroupValue}
-                    onChange={handleradioGroupValueChange}
-                    options={optionsStackingEnabled(formatMessage)}
-                  />
-                ) : (
-                  <CapCheckbox
-                    onChange={onCheckboxChangeStacking}
-                    checked={isCheckBoxSelected}
-                    className="promotion-stacking-radioGroup"
-                  >
-                    <CapHeading.CapHeadingSpan
-                      type="h5"
-                      className="stacking-disabled-options"
-                    >
-                      {formatMessage(messages.alwaysApply)}
-
-                      <CapTooltipWithInfo
-                        title={
-                          <CapRow className="tooltip-data">
-                            {formatMessage(messages.alwaysApplyTooltip)}
-                          </CapRow>
-                        }
-                        getPopupContainer={() =>
-                          document.querySelector('.cap-slide-box-v2')
-                        }
-                      />
-                    </CapHeading.CapHeadingSpan>
-                  </CapCheckbox>
-                )}
-
-                {(!isStackingDone && !isCheckBoxSelected) && (
-                  <CapRow className="promotion-stacking-settings-note">
-                    {formatMessage(messages.stackingNote)}
-                  </CapRow>
-                )}
-              </CapRow>
-            </>
-          )}
-        </>
-      )}
-
-      {promotionType === LOYALTY_EARNING && (
-        <>
-          <NonEditableContainer
-            className={classnames({
-              'disable-cursor': currentUserMode === MODE_VIEW,
-            })}
-          >
-            {ExpiryRestrictions({
-              type: 'ENROLMENT_EXPIRY',
-              section: formatMessage(messages.enrolment),
-              title: formatMessage(messages.enrolmentExpiry),
-              description: formatMessage(messages.enrolmentExpiryDescription),
-              value: pointsAllocationLimitData.enrolmentExpiry.type,
-              onChange: handleEnrolmentExpiryChange,
-              options: [
-                {
-                  label: formatMessage(messages.alongWithPromotion),
-                  value: SOURCE_PROMOTION,
-                },
-                {
-                  label: formatMessage(messages.afterSpecificPeriod),
-                  value: CUSTOM,
-                  isInput: true,
-                  inputValue: pointsAllocationLimitData.enrolmentExpiry.value,
-                },
-              ],
-            })}
-            <CapRow>
-              <CapHeader
-                size="regular"
-                title={formatMessage(messages.enrolmentLimit)}
-                description={formatMessage(messages.enrolmentLimitDescription)}
-                className="settings-limit-header"
-              />
-              <CapRow>
-                <CapAlert
-                  className="settings-limit-alert"
-                  message={
-                    <CapRow>
-                      {formatMessage(messages.enrolmentLimitAlert)}
-                    </CapRow>
-                  }
-                  type="info"
-                />
-              </CapRow>
-              <CapRow className="settings-limit-option">
-                <CapColumn className="settings-limit-option-label">
-                  <CapLabel type="label15">
-                    {formatMessage(messages.enrolmentLimitOption1)}
-                  </CapLabel>
-                </CapColumn>
-                {currentUserMode === MODE_VIEW ? (
-                  <CapColumn>{pointsAllocationLimitData.enrolmentLimit.value ? `${pointsAllocationLimitData.enrolmentLimit.value
-                    } ${formatMessage(globalMessages.timesPlural)}` : formatMessage(messages.defaultLimit)}</CapColumn>
-                ) : (
-                  <CapColumn className="settings-limit-option-input">
-                    <NumberInput
-                      value={pointsAllocationLimitData.enrolmentLimit.value}
-                      onChange={handleEnrolmentLimitChange}
-                      placeholder={formatMessage(globalMessages.example10)}
-                      suffix={
-                        <CapLabel
-                          className="settings-limit-option-input-suffix"
-                          type="label18"
-                        >
-                          {formatMessage(globalMessages.timesPlural)}
-                        </CapLabel>
-                      }
-                      errorMessage={
-                        pointsAllocationLimitData.enrolmentLimit.value > 100
-                          ? formatMessage(messages.inputErrorMessage)
-                          : ''
-                      }
-                    />
-                  </CapColumn>
-                )}
-              </CapRow>
-            </CapRow>
-          </NonEditableContainer>
-        </>
-      )}
-      {(promotionType === LOYALTY_EARNING || promotionType === LOYALTY) && (
-        <>
-          <NonEditableContainer
-            className={classnames({
-              'disable-cursor': currentUserMode === MODE_VIEW,
-            })}
-          >
-            {ExpiryRestrictions({
-              type: 'ISSUAL_EXPIRY',
-              section: formatMessage(messages.issue),
-              title: formatMessage(messages.issualExpiry),
-              description: formatMessage(messages.issueExpiryDescription),
-              value: pointsAllocationLimitData.issualExpiry.type,
-              onChange: handleIssualExpiryChange,
-              options: [
-                {
-                  label: formatMessage(messages.alongWithPromotion),
-                  value: SOURCE_PROMOTION,
-                },
-                {
-                  label: formatMessage(messages.afterSpecificPeriodOfIssual),
-                  value: CUSTOM,
-                  isInput: true,
-                  inputValue: pointsAllocationLimitData.issualExpiry.value,
-                },
-              ],
-            })}
-            <CapRow>
-              <CapHeader
-                size="regular"
-                title={formatMessage(messages.issualLimit)}
-                description={formatMessage(messages.issualLimitDescription)}
-                className="settings-limit-header"
-              />
-              <CapRow className="settings-limit-option">
-                <CapColumn className="settings-limit-option-label">
-                  <CapLabel type="label15">
-                    {formatMessage(messages.issualLimitOption1)}
-                  </CapLabel>
-                </CapColumn>
-                {currentUserMode === MODE_VIEW ? (
-                  <CapColumn>{pointsAllocationLimitData.issualLimit.value ? `${pointsAllocationLimitData.issualLimit.value
-                        } ${formatMessage(globalMessages.timesPlural)}` : formatMessage(messages.defaultLimit)}</CapColumn>
-                ) : (
-                  <CapColumn className="settings-limit-option-input">
-                    <NumberInput
-                      value={pointsAllocationLimitData.issualLimit.value}
-                      onChange={handleIssualLimitChange}
-                      placeholder={formatMessage(globalMessages.example10)}
-                      suffix={
-                        <CapLabel
-                          className="settings-limit-option-input-suffix"
-                          type="label18"
-                        >
-                          {formatMessage(globalMessages.timesPlural)}
-                        </CapLabel>
-                      }
-                      errorMessage={
-                        pointsAllocationLimitData.issualLimit.value > 100
-                          ? formatMessage(messages.inputErrorMessage)
-                          : ''
-                      }
-                    />
-                  </CapColumn>
-                )}
-              </CapRow>
-              <CapRow className="settings-limit-option">
-                <CapColumn className="settings-limit-option-label">
-                  <CapLabel type="label15">
-                    {formatMessage(messages.issualLimitOption2)}
-                  </CapLabel>
-                </CapColumn>
-                {currentUserMode === MODE_VIEW ? (
-                  <CapColumn>
-                    {pointsAllocationLimitData.redemptionLimit.value
-                      ? `${pointsAllocationLimitData.redemptionLimit.value
-                      } ${formatMessage(globalMessages.timesPlural)}`
-                      : formatMessage(messages.defaultLimit)}
-                  </CapColumn>
-                ) : (
-                  <CapColumn className="settings-limit-option-input">
-                    <NumberInput
-                      value={pointsAllocationLimitData.redemptionLimit.value}
-                      onChange={handleRedemptionLimitChange}
-                      placeholder={formatMessage(globalMessages.example10)}
-                      suffix={
-                        <CapLabel
-                          className="settings-limit-option-input-suffix"
-                          type="label18"
-                        >
-                          {formatMessage(globalMessages.timesPlural)}
-                        </CapLabel>
-                      }
-                      errorMessage={
-                        pointsAllocationLimitData.redemptionLimit.value > 100
-                          ? formatMessage(messages.inputErrorMessage)
-                          : ''
-                      }
-                    />
-                  </CapColumn>
-                )}
-              </CapRow>
-            </CapRow>
-          </NonEditableContainer>
-        </>
-      )}
-      <NonEditableContainer
-        className={classnames({
-          'disable-cursor': currentUserMode === MODE_VIEW,
-        })}
-      >
-        {isPointAllocationLimitsFormData ||
-        !hasPointsPromotionEnhancementsEnabled ? (
-          <>
-            <CapRow className="advanced-settings-content-row">
-              <SwitchWithDivider
-                className="lp-switch-promo-point-alloc-limit"
-                onSwitchChange={pointAllocationLimitsToggle}
-                isSwitchChecked={isPointAllocationLimits}
-                label={
-                  <CapLabel className="switch-label" type="label17">
-                    {formatMessage(globalMessages.pointAllocationLimits)}
-                  </CapLabel>
-                }
-                inductiveText={formatMessage(
-                  messages.pointAllocationLimitsDesc,
-                )}
-                isDivider={false}
-              />
-              {isPointAllocationLimits && (
-                <>
-                  <InfoBanner
-                    title={`${formatMessage(globalMessages.note)}: `}
-                    description={formatMessage(
-                      messages.pointAllocationLimitsNote,
-                    )}
-                    iconType="info"
-                  />
-                  {/* The maximum number of points activities is independent */}
-                  <CheckboxWithInputPrefix
-                    checkboxMessage={formatMessage(messages.maxPointsForMember)}
-                    isChecked={isEventsPerMemberLimit}
-                    onCheckboxChange={onEventsPerMemberLimitChange}
-                    inputValue={eventsPerMemberLimit}
-                    inputChange={onEventsPerMemberLimitInputChange}
-                    placeholder={formatMessage(
-                      messages.pointAllocationInputsPlaceholder,
-                    )}
-                    className="single-activity-checkbox-input"
-                    errorMessage={
-                      isMaxExceededErrorForEventsPerMember &&
-                      formatMessage(messages.maxExceededError)
-                    }
-                    inputType={NUMBER}
-                    type={POSITIVE_INTEGER}
-                    allowLeadingZero
-                  />
-
-                  <CheckboxWithInputPrefix
-                    checkboxMessage={formatMessage(
-                      messages.maxPointsPerActivity,
-                    )}
-                    isChecked={isPointsPerEventLimit}
-                    onCheckboxChange={onPointsPerEventLimitChange}
-                    inputValue={pointsPerEventLimit}
-                    inputChange={onPointsPerEventLimitInputChange}
-                    errorMessage={
-                      isMaxExceededErrorForEvent &&
-                      formatMessage(messages.maxExceededError)
-                    }
-                    placeholder={formatMessage(
-                      messages.pointAllocationInputsPlaceholder,
-                    )}
-                    className="single-activity-checkbox-input"
-                    inputType={NUMBER}
-                    type={POSITIVE_INTEGER}
-                    allowLeadingZero
-                  />
-
-                  <CheckboxWithInputPrefix
-                    checkboxMessage={formatMessage(messages.maxPointsToMember)}
-                    isChecked={isPointsPerMemberLimit}
-                    onCheckboxChange={onPointsPerMemberLimitChange}
-                    inputValue={pointsPerMemberLimit}
-                    inputChange={onPointsPerMemberLimitInputChange}
-                    placeholder={formatMessage(
-                      messages.pointAllocationInputsPlaceholder,
-                    )}
-                    className="single-activity-checkbox-input"
-                    errorMessage={
-                      isMaxExceededErrorForMember &&
-                      formatMessage(messages.maxExceededError)
-                    }
-                    inputType={NUMBER}
-                    type={POSITIVE_INTEGER}
-                    allowLeadingZero
-                  />
-
-                  <CheckboxWithInputPrefix
-                    checkboxMessage={formatMessage(
-                      messages.maxPointsFromPromotion,
-                    )}
-                    isChecked={isPointsPerPromotionLimit}
-                    onCheckboxChange={onPointsPerPromotionLimitChange}
-                    inputValue={pointsPerPromotionLimit}
-                    inputChange={onPointsPerPromotionLimitInputChange}
-                    errorMessage={
-                      (isMaxExceededErrorForOverallPromotion &&
-                        formatMessage(messages.maxExceededError)) ||
-                      (promotionPointLimitError &&
-                        formatMessage(messages.promotionPointLimitError))
-                    }
-                    placeholder={formatMessage(
-                      messages.pointAllocationInputsPlaceholder,
-                    )}
-                    className="single-activity-checkbox-input"
-                    inputType={NUMBER}
-                    type={POSITIVE_INTEGER}
-                    allowLeadingZero
-                  />
-                </>
-              )}
-            </CapRow>
-          </>
-        ) : (
-          <PromotionSettings
-            eventName={eventName}
-            setPointsAllocationLimitData={setPointsAllocationLimitData}
-            pointsAllocationLimitData={pointsAllocationLimitData}
-            isPointsAllocationEnabled={isPointsAllocationEnabled}
-            setIsPointsAllocationEnabled={setIsPointsAllocationEnabled}
-            mode={mode}
-          />
-        )}
-        {showPromoIdentifier ? (
-          <CapRow className="advanced-settings-content-row">
-            <SwitchWithDivider
-              className="lp-switch-promo-identifier"
-              onSwitchChange={promotionExternalIdentifierToggle}
-              isSwitchChecked={isPromotionExternalIdentifier}
-              label={
-                <CapLabel className="switch-label" type="label17">
-                  {formatMessage(messages.promotionExternalIdentifier)}
-                </CapLabel>
-              }
-              inductiveText={formatMessage(
-                messages.promotionExternalIdentifierDesc,
-              )}
-              isDivider={false}
-            />
-            {isPromotionExternalIdentifier && (
-              <>
-                <CapInput
-                  placeholder={formatMessage(
-                    messages.externalIdentifierPlaceholder,
-                  )}
-                  onChange={e => setExternalIdentifier(e.target.value)}
-                  className="promotion-external-identifier-input"
-                  value={externalIdentifier}
-                />
-              </>
-            )}
-          </CapRow>
-        ) : (
-          ''
-        )}
-        {promotionMetaDataKeys.length ? (
-          <CapRow className="advanced-settings-content-row">
-            <SwitchWithDivider
-              className="lp-switch-promo-attributes"
-              onSwitchChange={promotionAttributesToggle}
-              isSwitchChecked={isPromotionAttributes}
-              label={
-                <CapLabel className="switch-label" type="label17">
-                  {formatMessage(messages.promotionAttributes)}
-                </CapLabel>
-              }
-              inductiveText={formatMessage(messages.promotionAttributesDesc)}
-              isDivider={false}
-            />
-            {isPromotionAttributes && promotionMetaDataKeys.length ? (
-              <CapRow>
-                <CapRow className="promotion-attributes-content-row">
-                  <CapColumn span={10}>
-                    <CapLabel type="label8">
-                      {formatMessage(messages.attributeName)}
-                    </CapLabel>
-                  </CapColumn>
-                  <CapColumn span={8}>
-                    <CapLabel type="label8">
-                      {formatMessage(messages.attributeValue)}
-                    </CapLabel>
-                  </CapColumn>
-                </CapRow>
-                {promotionMetaDataKeys.map((metaData, index) =>
-                  renderPromotionMetaDataItem(metaData, index),
-                )}
-              </CapRow>
-            ) : (
-              ''
-            )}
-          </CapRow>
-        ) : (
-          ''
-        )}
-      </NonEditableContainer>
-      <CapRow className="advanced-settings-content-row">
-        <LiabilitySettings
-          embeddedMode="PROMOTION"
-          currentProgramId={programId}
-          currentPromotionId={promotionId}
-          className="liability-settings-promotion-advance-option"
-          clickedDone={clickedDone}
-          setClickedDone={setClickedDone}
-          liabilitySettingsData={liabilitySettings}
-          setLiabilitySettings={setLiabilitySettings}
-          isDoneButtonDisabled={isDoneButtonDisabled}
-          setIsDoneButtonDisabled={setIsDoneButtonDisabled}
-          currentUserMode={currentUserMode}
-        />
-      </CapRow>
-    </CapSpin>
-  );
-
-  // check if all sections have no limit as value
-  const checkIfNoDataSelected = () =>
-    Object.keys(pointsAllocationLimitData).every(
-      key => pointsAllocationLimitData[key]?.name !== SPECIFIC_VALUE,
-    );
-
-  
-  const checkValues = (obj, checkDuration) =>
-    obj.name === SPECIFIC_VALUE
-      ? Boolean(obj?.value && (checkDuration ? obj?.duration : true))
-      : true;
-
-  const checkPromotionTypeValue = obj => {
-    if (obj?.type) {
-      if (obj?.type === SOURCE_PROMOTION) return true;
-      if (obj?.type === CUSTOM && obj?.value) return true;
-    } else if (obj?.value) {
-      return true;
-    }
-    return false;
-  };
-
-  const validatePointsAllocation = () => {
-    const {
-      maxPointsAllocationPerActivity,
-      maxPointsAllocationPerCustomer,
-      maxNoOfActivitiesPerCustomer,
-      maxPointsAllocAcrossCustomers,
-      maxNoOfActivitiesAcrossCustomer,
-    } = pointsAllocationLimitData;
-    // check If points allocation per activity section has all fields
-    const pointsAllocationPerActivitySection = checkValues(
-      maxPointsAllocationPerActivity,
-      false,
-    );
-
-    // check If points allocation per customer section has all fields
-    const perCustomerSection = checkValues(
-      maxPointsAllocationPerCustomer,
-      true,
-    );
-
-    // check If no of activities per customer section has all fields
-    const noOfActivitiesPerCustomerSection = checkValues(
-      maxNoOfActivitiesPerCustomer,
-      true,
-    );
-
-    // check If ponts allocation across customers section has all fields
-    const acrossCustomersSection = checkValues(
-      maxPointsAllocAcrossCustomers,
-      true,
-    );
-
-    // check If no of activities across customers section has all fields
-    const noOfActivitiesAcrossCustomerSectionFilled = checkValues(
-      maxNoOfActivitiesAcrossCustomer,
-      true,
-    );
-
-    // if any section has missing values false is converted to true to disable the button
-    return (
-      !pointsAllocationPerActivitySection ||
-      !perCustomerSection ||
-      !noOfActivitiesPerCustomerSection ||
-      !acrossCustomersSection ||
-      !noOfActivitiesAcrossCustomerSectionFilled
-    );
-  };
-
-  const validatePromotionType = () => {
-    const {
-      enrolmentExpiry,
-      issualExpiry,
-      enrolmentLimit,
-      issualLimit,
-      redemptionLimit,
-    } = pointsAllocationLimitData;
-    let enrolmentExpiryValue = true;
-    let enrolmentLimitValue = true;
-    if (promotionType === GENERIC) {
-      return false;
-    }
-    if (promotionType === LOYALTY_EARNING) {
-      enrolmentExpiryValue = checkPromotionTypeValue(enrolmentExpiry);
-      enrolmentLimitValue = checkPromotionTypeValue(enrolmentLimit);
-    }
-    const issualExpiryValue = checkPromotionTypeValue(issualExpiry);
-    const issualLimitValue = checkPromotionTypeValue(issualLimit);
-    const redemptionLimitValue = checkPromotionTypeValue(redemptionLimit);
-    // if any section has missing values false is converted to true to disable the button
-    return (
-      !enrolmentExpiryValue ||
-      !issualExpiryValue ||
-      !enrolmentLimitValue ||
-      !issualLimitValue ||
-      !redemptionLimitValue
-    );
-  };
-
-  const checkIfDoneButtonIsDisabled = () => {
-    let result = false;
-    if (hasPointsPromotionEnhancementsEnabled) {
-      if (checkIfNoDataSelected()) result = isPointsAllocationEnabled && true;
-      else result = isPointsAllocationEnabled && validatePointsAllocation();
-    }
-    if (isPromotionTypeEnabled && !result) {
-      result = validatePromotionType();
-    }
-    return result;
-  };
-  const showSpin = promotionMetaDataKeysStatus === REQUEST;
-  return (
-    <CapRow className={className}>
-      <CapLink
-        type="flat"
-        onClick={onClickModify}
-        title={formatMessage(globalMessages.show)}
-        suffix={<CapIcon type="chevron-right" />}
-        className="advanced-settings-show lp-link-promo-adv-setting"
-        disabled={showNextContent}
-      />
-      {showSlideBox && (
-        <CapSlideBox
-          showShadow
-          show={showSlideBox}
-          size="size-l"
-          header={formatMessage(
-            globalMessages[
-            currentUserMode === MODE_VIEW
-              ? 'viewAdvancedSettings'
-              : 'advancedSettings'
-            ],
-          )}
-          className={classNames({
-            'view-mode-slidebox': currentUserMode === MODE_VIEW,
-          })}
-          footer={
-            <CapTooltip
-              placement="topLeft"
-              title={
-                checkIfDoneButtonIsDisabled()
-                  ? formatMessage(messages.configureToProceed)
-                  : null
-              }
-            >
-              <span className="button-disabled-tooltip-wrapper">
-                <CapButton
-                  disabled={
-                    currentUserMode === MODE_VIEW ||
-                    isDoneButtonDisabled ||
-                    checkIfDoneButtonIsDisabled()
-                  }
-                  onClick={onClickdone}
-                  className="advanced-button lp-btn-promo-adv-setting"
-                >
-                  {formatMessage(globalMessages.done)}
-                </CapButton>
-              </span>
-            </CapTooltip>
-          }
-          content={getSlideBoxContent()}
-          handleClose={closeSlideBox}
-        />
-      )}
-    </CapRow>
-  );
-};
-
-PromotionAdvancedSettings.propTypes = {
-  className: PropTypes.string,
-  intl: intlShape.isRequired,
-  updateFormDataValue: PropTypes.func,
-  formData: PropTypes.object,
-  showPromoIdentifier: PropTypes.bool,
-  mode: PropTypes.string,
-  programId: PropTypes.string,
-  promotionId: PropTypes.string,
-  eventName: PropTypes.string,
-  metaDataKeysData: PropTypes.object,
-  actions: PropTypes.object,
-  showNextContent: PropTypes.bool,
-  setLiabilitySettings: PropTypes.func,
-  pointsAllocationLimitData: PropTypes.object,
-  setPointsAllocationLimitData: PropTypes.func,
-  isPointsAllocationEnabled: PropTypes.bool,
-  setIsPointsAllocationEnabled: PropTypes.func,
-  hasPointsPromotionEnhancementsEnabled: PropTypes.bool,
-  match: PropTypes.object,
-  history: PropTypes.object,
-  fetchedProgramConfigData: PropTypes.object,
-  capActions: PropTypes.object,
-};
-
-function mapDispatchToProps(dispatch) {
-  return {
-    actions: bindActionCreators(actions, dispatch),
-    capActions: bindActionCreators(capActions, dispatch),
-  };
-}
-
-const mapStateToProps = createStructuredSelector({
-  metaDataKeysData: makeSelectMetaDataKeys(),
-  userData: makeSelectCap(),
-  fetchedProgramConfigData: makeSelectGetProgramConfigDetails(),
-});
-
-const withConnect = connect(
-  mapStateToProps,
-  mapDispatchToProps,
-);
-
-const withSaga = injectSaga({ key: 'promotionAdvancedSettings', saga });
-const withReducer = injectReducer({
-  key: 'promotionAdvancedSettings',
-  reducer,
-});
-
-export default compose(
-  withSaga,
-  withReducer,
-  withConnect,
-  withRouter,
-)(injectIntl(withStyles(PromotionAdvancedSettings, styles)));