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

package/components/organisms/AddPointsAllocationLimitDetails/AddPointsAllocationLimitDetails.js

@@ -1,1629 +0,0 @@
-import React, { useEffect, useState, useMemo } from 'react';
-import { FormattedMessage, injectIntl, intlShape } from 'react-intl';
-import { connect } from 'react-redux';
-import PropTypes from 'prop-types';
-import classnames from 'classnames';
-import { createStructuredSelector } from 'reselect';
-import { compose, bindActionCreators } from 'redux';
-import isEmpty from 'lodash/isEmpty';
-import moment from 'moment';
-
-import CapRow from '@capillarytech/cap-ui-library/CapRow';
-import CapColumn from '@capillarytech/cap-ui-library/CapColumn';
-import CapHeading from '@capillarytech/cap-ui-library/CapHeading';
-import CapInput from '@capillarytech/cap-ui-library/CapInput';
-import CapMultiSelect from '@capillarytech/cap-ui-library/CapMultiSelect';
-import CapRadioGroup from '@capillarytech/cap-ui-library/CapRadioGroup';
-import CapTreeSelect from '@capillarytech/cap-ui-library/CapTreeSelect';
-import CapDatePicker from '@capillarytech/cap-ui-library/CapDatePicker';
-import CapIcon from '@capillarytech/cap-ui-library/CapIcon';
-import CapSelect from '@capillarytech/cap-ui-library/CapSelect';
-import CapAlert from '@capillarytech/cap-ui-library/CapAlert';
-import CapLabel from '@capillarytech/cap-ui-library/CapLabel';
-import CapTooltip from '@capillarytech/cap-ui-library/CapTooltip';
-import CapTag from '@capillarytech/cap-ui-library/CapTag';
-import CapTooltipWithInfo from '@capillarytech/cap-ui-library/CapTooltipWithInfo';
-import CapSkeleton from '@capillarytech/cap-ui-library/CapSkeleton';
-import CapLink from '@capillarytech/cap-ui-library/CapLink';
-
-import withErrorBoundary from 'utils/withErrorBoundary';
-import { trimString } from '../../../utils/commonUtils';
-import withStyles from 'utils/withStyles';
-import injectSaga from '../../../utils/injectSaga';
-import injectReducer from '../../../utils/injectReducer';
-import audienceManagerSaga from '../AudienceList/saga';
-import audienceManagerReducer from '../AudienceList/reducer';
-
-import globalMessages from '../../pages/Cap/messages';
-import pointBudgetListMessages from '../PointsBudgetList/messages';
-import messages from './messages';
-import activityRewardMessages from '../ActivityRewardSlider/messages';
-import { styles } from './style';
-import {
-  ACROSS_EVENT,
-  ALL_POINTS,
-  ALL_TRANSACTIONS,
-  CURRENT_EVENT,
-  FILTER_TRANSACTIONS,
-  HALF_YEARLY,
-  LINE_ITEM_AMOUNT,
-  LINE_ITEM_QUANTITY,
-  MONTHLY,
-  POINTS,
-  PROMOTIONAL_POINTS,
-  QUARTERLY,
-  REGULAR_POINTS,
-  TRANSACTION,
-  TRANSACTION_COUNT,
-  YEARLY,
-  TRANSACTION_ADD,
-  ALL_EVENTS,
-  AUDIENCE_FILTER,
-  IMPORT,
-} from '../ActivityRewardSlider/constants';
-import {
-  DAYS,
-  POSITIVE_DECIMALS,
-  POSITIVE_INTEGER,
-} from '../../pages/App/constants';
-import NumberInput from '../../molecules/NumberInput';
-import {
-  makeSelectPromotionsDetail,
-  makeSelectStoresEntityZonesData,
-  makeSelectProductInfo,
-} from '../PromotionsDetail/selectors';
-
-import * as promoActions from '../PromotionsDetail/actions';
-import AddPointsFilterTransaction from '../AddPointsFilterTransaction/AddPointsFilterTransaction';
-import AudienceListContainer from '../AudienceList/AudienceListContainer';
-import * as audienceManagerActions from '../AudienceList/actions';
-import { makeSelectGetAllAudienceGroups } from '../AudienceList/selector';
-import { unitMappingReverse } from '../PointsBudgetList/constants';
-import { makeSelectCap } from '../../pages/Cap/selectors';
-import ConfirmEditModal from '../ActivityRewardSlider/ConfirmEditModal';
-import {
-  CYCLES,
-  LIMIT,
-  MAX_CAPPING_CUSTOMER_LIMIT,
-  MAX_CAPPING_CUSTOMER_LIMIT_ALL_CUSTOMER,
-  MAX_CAPPING_TRANSACTION_LIMIT,
-  REFRESH_UNIT,
-  pointsLimitMapping,
-} from './constants';
-import { cappingLimitTooltipMessage } from '../ActivityRewardSlider/utils';
-import { getLimitDisabledPoints } from './utils';
-
-const { CapCustomSelect } = CapSelect
-
-export const AddPointsAllocationLimitDetails = ({
-  intl: { formatMessage },
-  className,
-  userData: {
-    currentOrgDetails: { basic_details: { base_currency: currency } = {} } = {},
-  } = {},
-  pointsAllocationLimitName,
-  setPointsAllocationLimitName,
-  pointsAllocationLimitCategory,
-  setPointsAllocationLimitCategory,
-  pointsAllocationTransactionType,
-  setPointsAllocationTransactionType,
-  limit,
-  setLimit,
-  excludedPromotions,
-  setExcludedPromotions,
-  excludedPromotionsFilterValues,
-  setExcludedPromotionsFilterValues,
-  refreshUnit,
-  setRefreshUnit,
-  refreshValue,
-  setRefreshValue,
-  firstCycleStartDate,
-  setFirstCycleStartDate,
-  totalCycles,
-  setTotalCycles,
-  promoActions,
-  loyaltyPromotionsDetails: { promotionDetails },
-  pointsAllocationLimitType,
-  dashboard,
-  productDetails,
-  setRefreshValueError,
-  additionalFilterTransactions,
-  setAdditionalFilterTransactions,
-  isEditable,
-  limitsWithAllTransactionType,
-  lineItemAmountUsed,
-  lineItemQuantityUsed,
-  isEditMode,
-  hasDuplicateName,
-  setPointsAllocationLimitType,
-  setActivitySelection,
-  activitySelection,
-  isRewardCurrencyEnabled,
-  rewardCurrencyOptions,
-  rewardCurrencyState,
-  setRewardCurrencyState,
-  existingTransactionKPIs,
-  // Audience manager props
-  audienceGroups: { allAudienceGroups, getAudienceGroupsStatus } = {},
-  audienceManagerActions,
-  customerEnrolmentData,
-  setCustomerEnrolmentData,
-  audienceType,
-  setAudienceType,
-  targetAudienceFilterData,
-  transactionActiveLimit,
-  acrossCustomerActiveLimit,
-  customerLimitWithAllCustomerCount,
-}) => {
-  const [showLimitErrorMessage, setShowLimitErrorMessage] = useState(false);
-  const [showCyclesErrorMessage, setShowCylesErrorMessage] = useState(false);
-  const [
-    showRefreshUnitErrorMessage,
-    setShowRefreshUnitErrorMessage,
-  ] = useState(false);
-  const [previousValue, setPreviousValue] = useState();
-  const [showModal, setShowModal] = useState(false);
-  const [limitOn, setLimitOn] = useState(
-    isEditMode
-      ? pointsAllocationLimitType === ACROSS_EVENT
-        ? ACROSS_EVENT
-        : CURRENT_EVENT
-      : transactionActiveLimit < MAX_CAPPING_TRANSACTION_LIMIT
-        ? CURRENT_EVENT
-        : ACROSS_EVENT,
-  );
-  const rewardCurrencyName = rewardCurrencyState?.rewardCurrencyName;
-  const isPointsBasedCategory = [ALL_POINTS, REGULAR_POINTS, PROMOTIONAL_POINTS].includes(pointsAllocationLimitCategory);
-  useEffect(() => {
-    if (isEmpty(promotionDetails)) {
-      promoActions.getPromotions('limit=100&offset=0', false, false, 0);
-    }
-  }, []);
-  useEffect(
-    () => {
-      setExcludedPromotions(promotionDetails);
-    },
-    [promotionDetails],
-  );
-  const includeIds = useMemo(
-    () =>
-      Array.isArray(targetAudienceFilterData)
-        ? targetAudienceFilterData.map(item => item.audienceGroupId)
-        : [],
-    [targetAudienceFilterData],
-  ); //this will come from payload/prop
-
-  const excludeIds = []; //this will come from payload/prop - OPTIONAL
-  const [initialStateSet, setInitialStateSet] = useState(false); //flag to check whether existing audience group data is loaded
-
-  useEffect(() => {
-    //useEffect to load edit mode data
-    let audienceGroupIds = [...includeIds, ...excludeIds];
-    if (!isEmpty(audienceGroupIds)) {
-      //if no ids, don't make calls
-      audienceManagerActions.getMultipleAudienceByIds(
-        {
-          groupIds: audienceGroupIds,
-        },
-        {
-          callback: () => setInitialStateSet(true), //set flag to true once data is loaded
-        },
-      );
-    } else {
-      setInitialStateSet(true); // if no api call made, set flag to true
-    }
-  }, []);
-
-  const pointsAllocationLimitNameHandler = event => {
-    setPointsAllocationLimitName(event.target.value);
-  };
-  const handleBlur = event => {
-    const cappingName = trimString(event.target.value);
-    setPointsAllocationLimitName(cappingName);
-  };
-
-  const getLimitDisabled = type =>
-    limitsWithAllTransactionType[type] &&
-    pointsAllocationLimitType === CURRENT_EVENT &&
-    pointsAllocationTransactionType === ALL_TRANSACTIONS;
-
-  const pointsAllocationLimitCategoryHandler = value => {
-    if ([REGULAR_POINTS, PROMOTIONAL_POINTS, ALL_POINTS].includes(value))
-      setPointsAllocationTransactionType(ALL_TRANSACTIONS);
-    if (getLimitDisabled(value)) {
-      setPointsAllocationTransactionType(FILTER_TRANSACTIONS);
-    } else {
-      setPointsAllocationTransactionType(ALL_TRANSACTIONS);
-    }
-    setPointsAllocationLimitCategory(value);
-    setAdditionalFilterTransactions({});
-  };
-  const handleTransactionTypeChange = event => {
-    setPointsAllocationTransactionType(event.target.value);
-  };
-  const handlePointsAllocationLimitValueChange = event => {
-    setLimit(event.target.value);
-  };
-  const handleExcludePromotionsChange = value => {
-    setExcludedPromotionsFilterValues(value);
-  };
-  const handleRefreshUnitChange = value => {
-    setRefreshUnit(value);
-  };
-  const handlePointsAllocationRefreshValueChange = event =>
-    setRefreshValue(event.target.value);
-  const getExcludedPromotions = promotions =>
-    promotions?.map(promotion => ({
-      id: promotion?.id,
-      value: promotion?.name,
-      title: promotion?.name,
-      key: promotion?.id,
-    }));
-  const handleFirstCycleStartChange = date => setFirstCycleStartDate(date);
-  const handleTotalCyclesChange = event => setTotalCycles(event.target.value);
-  const getSuffix = (limit, pointsAllocationLimitCategory) => {
-    if (pointsAllocationLimitCategory) {
-      const messageId =
-        unitMappingReverse[pointsAllocationLimitCategory] || 'salesUnit';
-      return (
-        <CapLabel type="label3" className="description-font-m">
-          {formatMessage(pointBudgetListMessages[messageId], {
-            limit,
-            currency,
-          })}
-        </CapLabel>
-      );
-    }
-    return <></>;
-  };
-  const closeEditModal = () => {
-    setShowModal(false);
-  };
-  const handleLimitModalCancel = () => {
-    setLimit(previousValue);
-    setPreviousValue();
-    setShowModal(false);
-  };
-  const handleLimitModalOkay = () => {
-    setPreviousValue();
-    setShowModal(false);
-  };
-
-  const handleRewardCurrencyChange = (rewardCurrencyIdentifier, rewardCurrency) => {
-    setRewardCurrencyState({
-      rewardCurrencyIdentifier: rewardCurrencyIdentifier,
-      rewardCurrencyName: rewardCurrency?.key,
-    });
-    setPointsAllocationLimitCategory(undefined);
-  }
-
-  const getPointKPIName = (kpiType) => {
-    switch (kpiType) {
-      case REGULAR_POINTS:
-        return formatMessage(messages.regularRewardCurrency, { rewardCurrency: rewardCurrencyName });
-      case PROMOTIONAL_POINTS:
-        return formatMessage(messages.promotionalRewardCurrency, { rewardCurrency: rewardCurrencyName });
-      default:
-        return formatMessage(messages.allPoints);
-    }
-  }
-
-  const disabledPointsLimitTitle = pointsAllocationLimitCategory => (
-    <CapRow className={className}>
-      <FormattedMessage
-        {...messages.disablePointsLimitTooltip}
-        values={{
-          value: (
-            <CapTag className="points-limit-tooltip-tag">
-              {getPointKPIName(pointsAllocationLimitCategory)}
-            </CapTag>
-          ),
-        }}
-      />
-    </CapRow>
-  );
-  const getFilterDisableTooltip = pointsAllocationLimitCategory => (
-    <CapRow className={className}>
-      <FormattedMessage
-        {...messages.disableFilterTransactionTooltip}
-        values={{
-          value: (
-            <CapTag className="points-limit-tooltip-tag">
-              {isPointsBasedCategory ? getPointKPIName(pointsAllocationLimitCategory) :
-                formatMessage(
-                  messages[
-                  `${pointsAllocationLimitCategory}_title`
-                  ],
-                )
-              }
-            </CapTag>
-          ),
-        }}
-      />
-    </CapRow>
-  );
-  const DisabledPointsLimitToolTipWrapper = ({ children, title }) => (
-    <CapTooltip
-      overlayStyle={{ maxWidth: '630px' }}
-      title={disabledPointsLimitTitle(title)}
-      getPopupContainer={() =>
-        document.querySelector('.points-limit-allocation-curency-select')
-      }
-    >
-      {children}
-    </CapTooltip>
-  );
-  const infoToolTipWrapper = ({ title }) => (
-    <CapTooltip
-      overlayStyle={{ maxWidth: '29.714rem' }}
-      title={title}
-      placement="left"
-    >
-      <CapIcon type="info" size="s" className="points-option-icon" />
-    </CapTooltip>
-  );
-
-  const PointsLimitsOnTooltips = ({ value }) => {
-    let tooltipText = (
-      <CapRow className={className} type="flex">
-        <CapRow>{formatMessage(pointBudgetListMessages.max)}</CapRow>
-        <CapTag className="points-limits-tag">
-          {formatMessage(pointBudgetListMessages[pointsLimitMapping[value]])}
-        </CapTag>
-        <CapRow>{formatMessage(pointBudgetListMessages.onWhich)}</CapRow>
-      </CapRow>
-    );
-    if ([ALL_POINTS, PROMOTIONAL_POINTS, REGULAR_POINTS].includes(value)) {
-      tooltipText = (
-        <CapRow
-          className={classnames(className, 'points-option-tooltip')}
-          type="flex"
-        >
-          <CapRow>{formatMessage(pointBudgetListMessages.max)}</CapRow>
-          <CapTag className="points-limits-tag">
-            {getPointKPIName(value)}
-          </CapTag>
-          <CapRow>{formatMessage(pointBudgetListMessages.thatCanBe)}</CapRow>
-        </CapRow>
-      );
-    }
-    return (
-      <CapTooltipWithInfo
-        overlayStyle={{ maxWidth: '490px' }}
-        placement="left"
-        title={tooltipText}
-        className="points-option-icon"
-      />
-    );
-  };
-
-  const POINTS_LIMIT_OPTIONS = [
-    {
-      key: REGULAR_POINTS,
-      value: REGULAR_POINTS,
-      label: (
-        <>
-          {getLimitDisabledPoints(pointsAllocationLimitType, REGULAR_POINTS, rewardCurrencyState?.rewardCurrencyIdentifier, existingTransactionKPIs) ? (
-            <DisabledPointsLimitToolTipWrapper title={REGULAR_POINTS}>
-              <CapRow className={className}>
-                {formatMessage(messages.regularRewardCurrency, {
-                  rewardCurrency: rewardCurrencyName,
-                }
-                )}{' '}
-                <CapIcon
-                  type="info"
-                  size="s"
-                  className="points-option-icon"
-                />
-              </CapRow>
-            </DisabledPointsLimitToolTipWrapper>
-          ) : (
-            <CapRow className={className}>
-              {formatMessage(messages.regularRewardCurrency, {
-                rewardCurrency: rewardCurrencyName,
-              })}{' '}
-              <PointsLimitsOnTooltips value={REGULAR_POINTS} />
-            </CapRow>
-          )}
-        </>
-      ),
-      disabled: getLimitDisabledPoints(pointsAllocationLimitType, REGULAR_POINTS, rewardCurrencyState?.rewardCurrencyIdentifier, existingTransactionKPIs),
-    },
-    {
-      key: PROMOTIONAL_POINTS,
-      value: PROMOTIONAL_POINTS,
-      label: (
-        <>
-          {getLimitDisabledPoints(pointsAllocationLimitType, PROMOTIONAL_POINTS, rewardCurrencyState?.rewardCurrencyIdentifier, existingTransactionKPIs) ? (
-            <DisabledPointsLimitToolTipWrapper title={PROMOTIONAL_POINTS}>
-              <CapRow className={className}>
-                {formatMessage(messages.promotionalRewardCurrency, {
-                  rewardCurrency: rewardCurrencyName,
-                })}{' '}
-                <CapIcon
-                  type="info"
-                  size="s"
-                  className="points-option-icon"
-                />
-              </CapRow>
-            </DisabledPointsLimitToolTipWrapper>
-          ) : (
-            <CapRow className={className}>
-              {formatMessage(messages.promotionalRewardCurrency, {
-                rewardCurrency: rewardCurrencyName,
-              })}{' '}
-              <PointsLimitsOnTooltips value={PROMOTIONAL_POINTS} />
-            </CapRow>
-          )}
-        </>
-      ),
-      disabled: getLimitDisabledPoints(pointsAllocationLimitType, PROMOTIONAL_POINTS, rewardCurrencyState?.rewardCurrencyIdentifier, existingTransactionKPIs),
-    },
-    {
-      key: ALL_POINTS,
-      value: ALL_POINTS,
-      label: (
-        <>
-          {getLimitDisabledPoints(pointsAllocationLimitType, ALL_POINTS, rewardCurrencyState?.rewardCurrencyIdentifier, existingTransactionKPIs) ? (
-            <DisabledPointsLimitToolTipWrapper title={ALL_POINTS}>
-              <CapRow className={className}>
-                {formatMessage(messages.allPoints)}{' '}
-                <CapIcon
-                  type="info"
-                  size="s"
-                  className="points-option-icon"
-                />
-              </CapRow>
-            </DisabledPointsLimitToolTipWrapper>
-          ) : (
-            <CapRow className={className}>
-              {formatMessage(messages.allPoints)}{' '}
-              <PointsLimitsOnTooltips value={ALL_POINTS} />
-            </CapRow>
-          )}
-        </>
-      ),
-      disabled: getLimitDisabledPoints(pointsAllocationLimitType, ALL_POINTS, rewardCurrencyState?.rewardCurrencyIdentifier, existingTransactionKPIs),
-    },
-    {
-      key: LINE_ITEM_AMOUNT,
-      value: LINE_ITEM_AMOUNT,
-      label: lineItemQuantityUsed ? (
-        <CapTooltip
-          overlayStyle={{ maxWidth: '416px' }}
-          title={
-            <FormattedMessage
-              {...messages.lineItemDisabledMessage}
-              value={{ value: formatMessage(messages.lineItemAmount) }}
-            />
-          }
-        >
-          <CapRow className={className}>
-            {formatMessage(messages.lineItemAmount)}{' '}
-            <CapIcon type="info" size="s" className="points-option-icon" />
-          </CapRow>
-        </CapTooltip>
-      ) : (
-        <CapRow className={className}>
-          {formatMessage(messages.lineItemAmount)}{' '}
-          <PointsLimitsOnTooltips value={LINE_ITEM_AMOUNT} />
-        </CapRow>
-      ),
-      disabled: lineItemQuantityUsed,
-    },
-    {
-      key: LINE_ITEM_QUANTITY,
-      value: LINE_ITEM_QUANTITY,
-      label: lineItemAmountUsed ? (
-        <CapTooltip
-          overlayStyle={{ maxWidth: '416px' }}
-          title={
-            <FormattedMessage
-              {...messages.lineItemDisabledMessage}
-              value={{ value: formatMessage(messages.lineItemQuantity) }}
-            />
-          }
-        >
-          <CapRow className={className}>
-            {formatMessage(messages.lineItemQuantity)}{' '}
-            <CapIcon type="info" size="s" className="points-option-icon" />
-          </CapRow>
-        </CapTooltip>
-      ) : (
-        <>
-          <CapRow className={className}>
-            {formatMessage(messages.lineItemQuantity)}{' '}
-            <PointsLimitsOnTooltips value={LINE_ITEM_QUANTITY} />
-          </CapRow>
-        </>
-      ),
-      disabled: lineItemAmountUsed,
-    },
-    {
-      key: TRANSACTION,
-      value: TRANSACTION,
-      label: (
-        <>
-          <CapRow className={className}>
-            {formatMessage(messages.transactionQuantity)}{' '}
-            <PointsLimitsOnTooltips value={TRANSACTION} />
-          </CapRow>
-        </>
-      ),
-    },
-  ];
-
-  const optionRenderer = (optionText, tooltipText, disabled) => {
-    return (
-      <CapRow className={className}>
-        <CapRow className="option-renderer">
-          <CapLabel
-            type="label15"
-            className={classnames({
-              'disabled-option': !isEditable,
-              'disbaled-text': disabled,
-            })}
-          >
-            {optionText}
-          </CapLabel>
-          {tooltipText &&
-            infoToolTipWrapper({
-              title: tooltipText,
-            })}
-        </CapRow>
-      </CapRow>
-    );
-  };
-  const LIMIT_ON_OPTIONS = [
-    {
-      value: CURRENT_EVENT,
-      label: (
-        <CapTooltip
-          title={
-            transactionActiveLimit >= MAX_CAPPING_TRANSACTION_LIMIT &&
-            cappingLimitTooltipMessage(
-              formatMessage(messages.transactionLimitDisabledTooltip),
-              formatMessage(globalMessages.pleaseRemoveOrDeactivateTooltip),
-            )
-          }
-          placement="bottom"
-        >
-          {optionRenderer(
-            formatMessage(activityRewardMessages.individualActivityLimits),
-            formatMessage(activityRewardMessages.eachActivityLimitsInfo),
-            transactionActiveLimit >= MAX_CAPPING_TRANSACTION_LIMIT,
-          )}
-        </CapTooltip>
-      ),
-      disabled: transactionActiveLimit >= MAX_CAPPING_TRANSACTION_LIMIT,
-    },
-    {
-      value: ACROSS_EVENT,
-      label: (
-        <CapTooltip
-          title={
-            acrossCustomerActiveLimit >= MAX_CAPPING_CUSTOMER_LIMIT &&
-            cappingLimitTooltipMessage(
-              formatMessage(messages.customerLimitDisabledTooltip),
-              formatMessage(globalMessages.pleaseRemoveOrDeactivateTooltip),
-            )
-          }
-          placement="bottom"
-        >
-          {optionRenderer(
-            formatMessage(activityRewardMessages.acrossCustomerLimits),
-            formatMessage(activityRewardMessages.individualCustomerLimitsInfo),
-            acrossCustomerActiveLimit >= MAX_CAPPING_CUSTOMER_LIMIT,
-          )}
-        </CapTooltip>
-      ),
-      disabled: acrossCustomerActiveLimit >= MAX_CAPPING_CUSTOMER_LIMIT,
-    },
-  ];
-  const ACTIVITY_OPTIONS = [
-    {
-      value: ALL_EVENTS,
-      label: <>{optionRenderer(formatMessage(messages.allActivities))}</>,
-      key: ALL_EVENTS,
-    },
-    {
-      value: TRANSACTION_ADD,
-      label: <>{optionRenderer(formatMessage(messages.transactionAdd))}</>,
-      key: TRANSACTION_ADD,
-    },
-  ];
-  if (pointsAllocationLimitType === ACROSS_EVENT)
-    POINTS_LIMIT_OPTIONS.push({
-      key: TRANSACTION_COUNT,
-      value: TRANSACTION_COUNT,
-      label: (
-        <>
-          <CapRow className={className}>
-            {formatMessage(messages.transactionCount)}{' '}
-            <PointsLimitsOnTooltips value={TRANSACTION_COUNT} />
-          </CapRow>
-        </>
-      ),
-    });
-  const refreshUnitList = [
-    {
-      key: MONTHLY,
-      value: MONTHLY,
-      label: formatMessage(globalMessages.monthly),
-    },
-    {
-      key: QUARTERLY,
-      value: QUARTERLY,
-      label: formatMessage(globalMessages.quarterly),
-    },
-    {
-      key: HALF_YEARLY,
-      value: HALF_YEARLY,
-      label: formatMessage(globalMessages.halfYearly),
-    },
-    {
-      key: YEARLY,
-      value: YEARLY,
-      label: formatMessage(globalMessages.yearly),
-    },
-    {
-      key: DAYS,
-      value: DAYS,
-      label: formatMessage(messages.daysPlural),
-    },
-  ];
-  const audienceOptionsList = [
-    {
-      key: TRANSACTION,
-      value: TRANSACTION,
-      label: (
-        <CapTooltip
-          title={
-            customerLimitWithAllCustomerCount >=
-              MAX_CAPPING_CUSTOMER_LIMIT_ALL_CUSTOMER &&
-            !isEditMode &&
-            cappingLimitTooltipMessage(
-              formatMessage(messages.transactionLimitDisabledTooltip),
-              formatMessage(globalMessages.pleaseRemoveOrDeactivateTooltip),
-            )
-          }
-          placement="bottom"
-        >
-          <CapRow>
-            <CapLabel
-              type="label15"
-              className={classnames('audience-options-li', {
-                'disabled-option': !isEditable,
-                'disbaled-text':
-                  customerLimitWithAllCustomerCount >=
-                  MAX_CAPPING_CUSTOMER_LIMIT_ALL_CUSTOMER,
-              })}
-            >
-              {formatMessage(globalMessages.allCustomers)}
-            </CapLabel>
-            <CapTooltipWithInfo
-              title={formatMessage(messages.allCustomersTooltipInfo)}
-              placement="right"
-              overlayClassName="audience-options-tooltip-overlay"
-              getPopupContainer={() =>
-                document.querySelector('.pointsLimitHeadingContainer')
-              }
-            />
-          </CapRow>
-        </CapTooltip>
-      ),
-      disabled:
-        customerLimitWithAllCustomerCount >=
-        MAX_CAPPING_CUSTOMER_LIMIT_ALL_CUSTOMER,
-    },
-    {
-      key: AUDIENCE_FILTER,
-      value: AUDIENCE_FILTER,
-      label: (
-        <CapRow>
-          <CapLabel
-            type="label15"
-            className={classnames('audience-options-li', {
-              'disabled-option': !isEditable,
-              'disbaled-text':
-                customerLimitWithAllCustomerCount >=
-                MAX_CAPPING_CUSTOMER_LIMIT_ALL_CUSTOMER,
-            })}
-          >
-            {formatMessage(globalMessages.specificCustomers)}
-          </CapLabel>
-          <CapTooltipWithInfo
-            title={formatMessage(messages.specificCustomerTooltipInfo)}
-            placement="right"
-            overlayClassName="audience-options-tooltip-overlay"
-            getPopupContainer={() =>
-              document.querySelector('.pointsLimitHeadingContainer')
-            }
-          />
-        </CapRow>
-      ),
-    },
-    {
-      key: IMPORT,
-      value: IMPORT,
-      label: (
-        <CapRow>
-          <CapLabel type="label15" className="audience-options-li">
-            {formatMessage(globalMessages.enrollViaAPI)}
-          </CapLabel>
-          <CapTooltipWithInfo
-            title={
-              <CapRow>
-                <CapLabel
-                  type="label32"
-                  className={classnames('audience-options-li', {
-                    'disabled-option': !isEditable,
-                    'disbaled-text':
-                      customerLimitWithAllCustomerCount >=
-                      MAX_CAPPING_CUSTOMER_LIMIT_ALL_CUSTOMER,
-                  })}
-                >
-                  {formatMessage(messages.enrolmentTypeTooltipInfo)}
-                </CapLabel>
-                <CapRow className="audience-import-api-doc-container">
-                  <CapLink
-                    title={formatMessage(messages.audienceSupportDoc)}
-                    className="import-via-api-link"
-                    fontWeight="m"
-                  />
-                  <CapIcon type="open-in-new-light" size="s" />
-                </CapRow>
-              </CapRow>
-            }
-            placement="right"
-            overlayClassName="audience-options-tooltip-overlay"
-            getPopupContainer={() =>
-              document.querySelector('.pointsLimitHeadingContainer')
-            }
-          />
-        </CapRow>
-      ),
-    },
-  ];
-  const handleAudienceTypeChange = value => {
-    setAudienceType(value);
-  };
-  const renderSelectedAudienceType = audienceType => {
-    // TODO: Org is not EI enabled check
-    // TODO: Is this mandatory field? If yes add this it as mandatory field! if not discuss on default payload values of enrolmentMethod & targetAudienceFilter
-
-    switch (audienceType) {
-      case AUDIENCE_FILTER:
-        return !initialStateSet ? (
-          <CapSkeleton />
-        ) : (
-          <AudienceListContainer
-            includeIds={includeIds}
-            excludeIds={excludeIds}
-            isExcludeEnabled={false}
-            setCustomerEnrolmentData={setCustomerEnrolmentData}
-          />
-        );
-      case IMPORT:
-        return (
-          <CapRow className="audience-import-info">
-            {formatMessage(messages.importInfoNote)}
-          </CapRow>
-        );
-      default:
-        return null;
-    }
-  };
-
-  const checkForRefreshValueError = () => {
-    if (showRefreshUnitErrorMessage) {
-      if (refreshUnit === DAYS && refreshValue) {
-        let error = +refreshValue > 1000 || +refreshValue <= 0;
-        setRefreshValueError(error);
-        return error;
-      }
-      if (refreshUnit === DAYS && !refreshValue) {
-        return true;
-      }
-    }
-    return false;
-  };
-
-  const checkForTotalCyclesError = () => {
-    if (showCyclesErrorMessage) {
-      if (!totalCycles) return true;
-      const cycleLimit = refreshUnit === DAYS ? 1000 : 100;
-      const cycleValue = Number(totalCycles);
-      return cycleValue <= 0 || cycleValue > cycleLimit;
-    }
-    return false;
-  };
-
-  const getErrorMessage = type => {
-    switch (type) {
-      case REFRESH_UNIT:
-        return formatMessage(messages.refreshDaysNewError);
-      case LIMIT:
-        return formatMessage(messages.limitErrorMessage);
-      case CYCLES:
-        return refreshUnit === DAYS
-          ? formatMessage(messages.cyclesErrorMessageDays)
-          : formatMessage(messages.cyclesErrorMessageAny);
-    }
-  };
-
-  const handleOnFocusAndBlur = (type, value) => {
-    switch (type) {
-      case REFRESH_UNIT:
-        setShowRefreshUnitErrorMessage(value);
-        return;
-      case LIMIT:
-        setShowLimitErrorMessage(value);
-        if (!value) setPreviousValue(limit);
-        if (value && isEditMode && limit !== previousValue) setShowModal(true);
-        return;
-      case CYCLES:
-        setShowCylesErrorMessage(value);
-        return;
-    }
-  };
-
-  const pointsLimitHeadingSection = (
-    message,
-    infoToolTipArgs = {},
-    pointsHeaderCustomClassName = '',
-  ) => (
-    <CapRow
-      className={classnames(
-        'points-limit-section-heading',
-        pointsHeaderCustomClassName,
-      )}
-      type="flex"
-    >
-      <CapHeading type="h4">{formatMessage(message)}</CapHeading>
-      {Object.keys(infoToolTipArgs)?.length > 0 && (
-        <CapTooltipWithInfo {...infoToolTipArgs} />
-      )}
-    </CapRow>
-  );
-  const disabledDate = current => {
-    if (
-      current &&
-      current <
-        moment()
-          .subtract(12, 'months')
-          .endOf('day')
-    ) {
-      return true;
-    }
-    if (
-      current &&
-      (current.date() === 29 || current.date() === 30 || current.date() === 31)
-    ) {
-      return true;
-    }
-    return false;
-  };
-  const WithNonEditable = React.memo(({ disabled, children }) => (
-    <CapTooltip
-      title={disabled ? formatMessage(messages.nonEditableTooltip) : ''}
-      placement="bottom"
-    >
-      <span>{children}</span>
-    </CapTooltip>
-  ));
-  return (
-    <CapRow className={className}>
-      <CapRow className="pointsLimitHeadingContainer">
-        {/* name and limit on  */}
-        <CapRow className="points-limit-allocation-row-container">
-          <CapRow className="points-limit-allocation-container">
-            {pointsLimitHeadingSection(globalMessages.name)}
-            <CapInput
-              onChange={pointsAllocationLimitNameHandler}
-              className={classnames('points-limit-allocation-name', {
-                'red-stroke': hasDuplicateName(),
-              })}
-              value={pointsAllocationLimitName}
-              data-testid="points-limit-allocation-name"
-              errorMessage={
-                hasDuplicateName() &&
-                formatMessage(globalMessages.sameNameError)
-              }
-              placeholder={formatMessage(messages.enterName)}
-              onBlur={handleBlur}
-            />
-          </CapRow>
-
-          <CapRow className="points-limit-allocation-container limit-left-margin">
-            {pointsLimitHeadingSection(
-              messages.limitOn,
-              {
-                title: formatMessage(messages.limitOnDes),
-                className: 'points-info-icon',
-              },
-              'audience-section-heading',
-            )}
-            <CapRow className={className}>
-              <WithNonEditable disabled={!isEditable}>
-                <CapSelect
-                  data-testid="limit-on"
-                  style={{ width: '100%' }}
-                  options={LIMIT_ON_OPTIONS}
-                  placeholder={formatMessage(messages.selectLimit)}
-                  labelPosition="top"
-                  value={limitOn}
-                  onChange={value => {
-                    setLimitOn(value);
-                    setPointsAllocationLimitType(value);
-                    setPointsAllocationLimitCategory(undefined);
-                  }}
-                  dropdownClassName="limit-select-option"
-                  disabled={!isEditable}
-                  getPopupContainer={() =>
-                    document.querySelector('.points-limit-allocation-container')
-                  }
-                />
-              </WithNonEditable>
-            </CapRow>
-          </CapRow>
-        </CapRow>
-        {/* reward currency and activity */}
-        <CapRow className="points-limit-allocation-row-container">
-          {isRewardCurrencyEnabled &&
-            <CapRow className={classnames("points-limit-allocation-container", "limit-right-margin")}>
-              {pointsLimitHeadingSection(globalMessages.rewardCurrency)}
-              <WithNonEditable disabled={!isEditable}>
-                <CapCustomSelect
-                  className={classnames("reward-currency-select", {
-                    "reward-currency-select-disabled": !isEditable
-                  })}
-                  data-testid="select-currency-dropdown"
-                  onChange={handleRewardCurrencyChange}
-                  value={rewardCurrencyState?.rewardCurrencyIdentifier}
-                  options={rewardCurrencyOptions}
-                  searchPlaceholder={formatMessage(globalMessages.search)}
-                  selectPlaceholder={formatMessage(messages.selectCurrencyPlaceholder)}
-                  disabled={!isEditable}
-                  showSearch
-                  useKeyForSearch
-                />
-              </WithNonEditable>
-            </CapRow>
-          }
-          {limitOn === ACROSS_EVENT && (
-            <CapRow className="points-limit-allocation-container">
-              {limitOn === ACROSS_EVENT && (
-                <>
-                  {pointsLimitHeadingSection(messages.activity)}
-                  <WithNonEditable disabled={!isEditable}>
-                    <CapSelect
-                      className="activity-selection"
-                      data-testid="tracker-condition-type"
-                      style={{ width: '100%' }}
-                      options={ACTIVITY_OPTIONS}
-                      labelPosition="top"
-                      dropdownClassName="limit-select-option"
-                      value={activitySelection}
-                      placeholder={formatMessage(messages.selectActivity)}
-                      onChange={value => {
-                        setActivitySelection(value);
-                        setPointsAllocationLimitCategory(undefined);
-                      }}
-                      disabled={!isEditable}
-                      getPopupContainer={() =>
-                        document.querySelector(
-                          '.points-limit-allocation-container',
-                        )
-                      }
-                    />
-                  </WithNonEditable>
-                </>
-              )}
-            </CapRow>
-          )}
-        </CapRow>
-
-        {/* Audience */}
-        {limitOn === ACROSS_EVENT && (
-          <CapRow className="points-limit-allocation-row-container">
-              <CapRow className="points-limit-allocation-container">
-                {limitOn === ACROSS_EVENT && (
-                  <>
-                    <CapRow
-                      className={classnames(
-                        'pla-audience-container',
-                        'points-limit-allocation-container',
-                        'dropdown-width'
-                      )}
-                    >
-                      {pointsLimitHeadingSection(
-                        globalMessages.audience,
-                        {
-                          title: formatMessage(messages.audienceTypeInfo),
-                          className: 'audience-info-icon',
-                        },
-                        'audience-section-heading',
-                      )}
-                      <WithNonEditable disabled={!isEditable}>
-                        <CapSelect
-                          className="points-limit-allocation-audience-select"
-                          dropdownClassName="points-limit-allocation-audience-popover"
-                          getPopupContainer={() =>
-                            document.querySelector(
-                              '.points-limit-allocation-container',
-                            )
-                          }
-                          options={audienceOptionsList}
-                          labelPosition="top"
-                          value={audienceType}
-                          onChange={handleAudienceTypeChange}
-                          placeholder={formatMessage(messages.selectAudience)}
-                          disabled={!isEditable}
-                          data-testid="audeience-selector"
-                        />
-                      </WithNonEditable>
-                    </CapRow>
-                    {renderSelectedAudienceType(audienceType)}
-                  </>
-                )}
-              </CapRow>
-            </CapRow>
-        )}
-
-        {/* point limit based and limit value */}
-        <CapRow className="points-limit-allocation-row-container">
-          <CapRow className="points-limit-allocation-container">
-            {pointsLimitHeadingSection(messages.currencyLimitBasedOn)}
-            <WithNonEditable disabled={!isEditable}>
-              <CapSelect
-                className={classnames(
-                  'points-limit-allocation-curency-select',
-                  {
-                    'points-limit-allocation-curency-select-disabled': !isEditable,
-                  },
-                )}
-                dropdownClassName="points-limit-allocation-audience-popover"
-                getPopupContainer={() =>
-                  document.querySelector(
-                    '.points-limit-allocation-container',
-                  )
-                }
-                options={(pointsAllocationLimitType === ACROSS_EVENT && activitySelection === ALL_EVENTS) ? POINTS_LIMIT_OPTIONS?.slice(0, 3) : POINTS_LIMIT_OPTIONS}
-                value={pointsAllocationLimitCategory}
-                onChange={pointsAllocationLimitCategoryHandler}
-                placeholder={formatMessage(messages.selectKPI)}
-                disabled={!isEditable}
-              />
-            </WithNonEditable>
-            <CapRow className={classnames('points-limit-on-footer')}>
-              {!isEmpty(pointsAllocationLimitCategory) && (
-                <>
-                  {pointsAllocationLimitType === ACROSS_EVENT ? (
-                    <FormattedMessage
-                      {...messages.pointsLimitOnCusomterDesc}
-                      values={{
-                        value: (
-                          <CapHeading
-                            type="h5"
-                            className={classnames('any-content', 'bold')}
-                          >
-                            {isPointsBasedCategory ? getPointKPIName(pointsAllocationLimitCategory) :
-                              formatMessage(
-                                messages[
-                                `${pointsAllocationLimitCategory}_title`
-                                ],
-                              )}
-                          </CapHeading>
-                        ),
-                      }}
-                    />
-                  ) : (
-                    <FormattedMessage
-                      {...messages[
-                        `${
-                          [
-                            ALL_POINTS,
-                            REGULAR_POINTS,
-                            PROMOTIONAL_POINTS,
-                          ].includes(pointsAllocationLimitCategory)
-                            ? 'pointsLimitOnPointDesc'
-                            : 'pointsLimitOnTranscDesc'
-                        }`
-                      ]}
-                        values={{
-                          value: (
-                            <CapHeading
-                              type="h5"
-                              className={classnames('any-content', 'bold')}
-                            >
-                              {isPointsBasedCategory ? getPointKPIName(pointsAllocationLimitCategory) :
-                                formatMessage(
-                                  messages[
-                                  `${pointsAllocationLimitCategory}_title`
-                                  ],
-                                )}
-                            </CapHeading>
-                          ),
-                        }}
-                    />
-                  )}
-                </>
-              )}
-            </CapRow>
-          </CapRow>
-          <CapRow className="points-limit-allocation-container limit-left-margin">
-            {pointsLimitHeadingSection(messages.limitValue)}
-
-            <NumberInput
-              type={POSITIVE_DECIMALS}
-              onChange={handlePointsAllocationLimitValueChange}
-              className={classnames('points-limit-allocation-limitValue', {
-                'red-stroke': limit <= 0 && showLimitErrorMessage,
-              })}
-              value={limit}
-              placeholder={formatMessage(messages.exampleLimitValue)}
-              suffix={getSuffix(limit, pointsAllocationLimitCategory)}
-              errorMessage={
-                showLimitErrorMessage && limit <= 0 && getErrorMessage(LIMIT)
-              }
-              onBlur={() => handleOnFocusAndBlur(LIMIT, true)}
-              onFocus={() => handleOnFocusAndBlur(LIMIT, false)}
-            />
-          </CapRow>
-        </CapRow>
-
-        {/* scope */}
-        <CapRow className="points-limit-allocation-row-container">
-          <CapRow className="dropdown-width">
-            <CapRow className="points-limit-allocation-container">
-              <CapRow className="points-limit-section-heading">
-                <CapHeading type="h4">
-                  {formatMessage(messages.scope)}
-                  <CapTooltipWithInfo
-                    className="info-header-icon"
-                    title={formatMessage(messages.applicableOnTooltipText)}
-                  />
-                </CapHeading>
-              </CapRow>
-              <CapRadioGroup
-                disabled={!isEditable}
-                className="transaction-type"
-                defaultValue={pointsAllocationTransactionType}
-                value={pointsAllocationTransactionType}
-                onChange={handleTransactionTypeChange}
-                options={[
-                  {
-                    label:
-                      limitsWithAllTransactionType[
-                        pointsAllocationLimitCategory
-                      ] && pointsAllocationLimitType === CURRENT_EVENT ? (
-                        <CapTooltip
-                          overlayStyle={{ maxWidth: '630px' }}
-                          title={
-                            <CapRow className={className}>
-                              <FormattedMessage
-                                {...messages.disableAllTransactionTooltip}
-                                values={{
-                                  value: (
-                                    <CapTag className="points-limit-tooltip-tag">
-                                      {isPointsBasedCategory ? getPointKPIName(pointsAllocationLimitCategory) :
-                                        formatMessage(
-                                          messages[
-                                          `${pointsAllocationLimitCategory}_title`
-                                          ],
-                                        )
-                                      }
-                                    </CapTag>
-                                  ),
-                                }}
-                              />
-                            </CapRow>
-                          }
-                          placement="bottom"
-                        >
-                          <CapHeading.CapHeadingSpan type="h4">
-                            {formatMessage(messages.allTransactions)}
-                          </CapHeading.CapHeadingSpan>
-                        </CapTooltip>
-                      ) : (
-                        <CapHeading.CapHeadingSpan type="h4">
-                          {formatMessage(messages.allTransactions)}
-                        </CapHeading.CapHeadingSpan>
-                      ),
-                    value: ALL_TRANSACTIONS,
-                    disabled:
-                      limitsWithAllTransactionType[
-                        pointsAllocationLimitCategory
-                      ] && pointsAllocationLimitType === CURRENT_EVENT,
-                  },
-                  {
-                    label: pointsAllocationLimitCategory ? (
-                      <>
-                        {[
-                          REGULAR_POINTS,
-                          PROMOTIONAL_POINTS,
-                          ALL_POINTS,
-                        ].includes(pointsAllocationLimitCategory) ? (
-                          <CapTooltip
-                            overlayStyle={{ maxWidth: '630px' }}
-                            title={getFilterDisableTooltip(
-                              pointsAllocationLimitCategory,
-                            )}
-                          >
-                            <CapHeading.CapHeadingSpan
-                              type="h4"
-                              className="opacity-0-3"
-                            >
-                              {formatMessage(messages.filterTransactions)}
-                            </CapHeading.CapHeadingSpan>
-                          </CapTooltip>
-                        ) : (
-                          <CapHeading.CapHeadingSpan type="h4">
-                            {formatMessage(messages.filterTransactions)}
-                          </CapHeading.CapHeadingSpan>
-                        )}
-                      </>
-                    ) : (
-                      <CapTooltip
-                        overlayStyle={{ maxWidth: '462px' }}
-                        title={
-                          <CapRow>
-                            <FormattedMessage {...messages.noKPISelected} />
-                          </CapRow>
-                        }
-                        placement="bottom"
-                      >
-                        <CapHeading.CapHeadingSpan
-                          type="h4"
-                          className="opacity-0-3"
-                        >
-                          {formatMessage(messages.filterTransactions)}
-                        </CapHeading.CapHeadingSpan>
-                      </CapTooltip>
-                    ),
-              
-                    value: FILTER_TRANSACTIONS,
-                    disabled:
-                      [REGULAR_POINTS, PROMOTIONAL_POINTS, ALL_POINTS].includes(
-                        pointsAllocationLimitCategory,
-                      ) || !pointsAllocationLimitCategory,
-                  },
-                ]}
-              />
-            </CapRow>
-            <CapRow className="points-limit-allocation-container">
-              {/* filter transaction */}
-              {pointsAllocationTransactionType === FILTER_TRANSACTIONS && (
-                <AddPointsFilterTransaction
-                  dashboard={dashboard}
-                  promoActions={promoActions}
-                  pointsAllocationLimitCategory={pointsAllocationLimitCategory}
-                  pointsAllocationTransactionType={
-                    pointsAllocationTransactionType
-                  }
-                  productDetails={productDetails}
-                  additionalFilterTransactions={additionalFilterTransactions}
-                  setAdditionalFilterTransactions={
-                    setAdditionalFilterTransactions
-                  }
-                  isEditable={isEditable}
-                  isEditMode={isEditMode}
-                />
-              )}
-            </CapRow>
-          </CapRow>
-        </CapRow>
-        {/* refresh */}
-        {pointsAllocationLimitType === ACROSS_EVENT && (
-          <CapRow className="points-limit-allocation-row-container">
-              {pointsAllocationLimitType === ACROSS_EVENT ? (
-                <>
-                  <CapRow className={classnames("points-limit-allocation-container", "dropdown-width")}>
-                    <CapRow
-                      type="flex"
-                      className="points-limit-section-heading"
-                    >
-                      <CapHeading type="h4">
-                        {formatMessage(messages.refreshesEvery)}
-                        <CapTooltipWithInfo
-                          className="info-header-icon"
-                          title={formatMessage(
-                            globalMessages.refreshesEveryInfo,
-                          )}
-                        />
-                      </CapHeading>
-                    </CapRow>
-                    <CapRow type="flex" className="points-limit-allocation-refresh-input">
-                      {refreshUnit === DAYS && (
-                        <CapRow>
-                          <CapTooltip
-                            title={
-                              !isEditable
-                                ? formatMessage(messages.nonEditableTooltip)
-                                : ''
-                            }
-                            placement="bottom"
-                            onClick={e => e.stopPropagation()}
-                          >
-                            <span>
-                              <NumberInput
-                                onChange={
-                                  handlePointsAllocationRefreshValueChange
-                                }
-                                className={classnames(
-                                  'points-limit-allocation-limitValue',
-                                  {
-                                    'red-stroke': checkForRefreshValueError(),
-                                  },
-                                )}
-                                value={refreshValue}
-                                type={POSITIVE_INTEGER}
-                                placeholder={formatMessage(
-                                  globalMessages.exampleTen,
-                                )}
-                                errorMessage={
-                                  checkForRefreshValueError() &&
-                                  getErrorMessage(REFRESH_UNIT)
-                                }
-                                disabled={!isEditable}
-                                data-testid="points-limit-allocation-limitValue"
-                                onBlur={() =>
-                                  handleOnFocusAndBlur(REFRESH_UNIT, true)
-                                }
-                                onFocus={() =>
-                                  handleOnFocusAndBlur(REFRESH_UNIT, false)
-                                }
-                              />
-                            </span>
-                          </CapTooltip>
-                        </CapRow>
-                      )}
-                      <CapRow>
-                        <WithNonEditable disabled={!isEditable}>
-                          <CapSelect
-                            className="points-limit-allocation-refresh-select"
-                            options={refreshUnitList}
-                            labelPosition="top"
-                            value={refreshUnit}
-                            onChange={handleRefreshUnitChange}
-                            disabled={!isEditable}
-                            data-testid="refresh-frequency-selector"
-                          />
-                        </WithNonEditable>
-                      </CapRow>
-                    </CapRow>
-                  </CapRow>
-                </>
-              ) : (
-                ''
-              )}
-          </CapRow>
-        )}
-
-        {/* cycle */}
-        {pointsAllocationLimitType === ACROSS_EVENT && (
-          <CapRow className="points-limit-allocation-row-container">
-            <CapRow className={classnames("points-limit-allocation-container","dropdown-width")}>
-              {pointsAllocationLimitType === ACROSS_EVENT ? (
-                <>
-                  <CapRow className={classnames("points-limit-allocation-container","dropdown-width")}>
-                    {pointsLimitHeadingSection(messages.firstCycleStartHeading)}
-                    <WithNonEditable disabled={!isEditable}>
-                      <CapDatePicker
-                        className={classnames('date-picker-border', {
-                          'disabled-option': !isEditable,
-                        })}
-                        data-testid="first-cycle-start-date"
-                        onChange={date => handleFirstCycleStartChange(date)}
-                        style={{ width: '100%' }}
-                        placeholder={formatMessage(messages.selectStartDate)}
-                        value={firstCycleStartDate}
-                        disabled={!isEditable}
-                        disabledDate={disabledDate}
-                        getCalendarContainer={triggerNode => triggerNode}
-                      />
-                    </WithNonEditable>
-                  </CapRow>
-                  <CapRow>
-                    <CapAlert
-                      className="cycle-alert-warning"
-                      message={
-                        <CapRow
-                          type="flex"
-                          className="cycle-note-info-container"
-                        >
-                          <CapColumn span={1}>
-                            <CapIcon
-                              type="info"
-                              className="cycle-note-info-icon"
-                            />
-                          </CapColumn>
-                          <CapColumn
-                            span={23}
-                            className="cycle-note-inductive-col"
-                          >
-                            <CapLabel type="label31">
-                              {formatMessage(messages.cycleNotesInductiveText)}
-                            </CapLabel>
-                          </CapColumn>
-                        </CapRow>
-                      }
-                      type="warning"
-                    />
-                  </CapRow>
-                </>
-              ) : (
-                ''
-              )}
-            </CapRow>
-            <CapRow className={classnames("points-limit-allocation-container", "limit-left-margin", "dropdown-width")}>
-              {pointsAllocationLimitType === ACROSS_EVENT ? (
-                <>
-                  <CapRow className={classnames("points-limit-allocation-container" ,"dropdown-width")}>
-                    {pointsLimitHeadingSection(messages.totalCycles)}
-                    <CapTooltip
-                      title={
-                        !isEditable
-                          ? formatMessage(messages.nonEditableTooltip)
-                          : ''
-                      }
-                      placement="bottom"
-                      onClick={e => e.stopPropagation()}
-                    >
-                      <span>
-                        <NumberInput
-                          onChange={handleTotalCyclesChange}
-                          className={classnames(
-                            'points-limit-allocation-limitValue',
-                            {
-                              'red-stroke': checkForTotalCyclesError(),
-                              'disabled-option': !isEditable,
-                            },
-                          )}
-                          value={totalCycles}
-                          type={POSITIVE_INTEGER}
-                          placeholder={formatMessage(messages.exampleTwelve)}
-                          suffix={formatMessage(messages.cyclePlural)}
-                          disabled={!isEditable}
-                          errorMessage={
-                            checkForTotalCyclesError() &&
-                            getErrorMessage(CYCLES)
-                          }
-                          onBlur={() => handleOnFocusAndBlur(CYCLES, true)}
-                          onFocus={() => handleOnFocusAndBlur(CYCLES, false)}
-                        />
-                      </span>
-                    </CapTooltip>
-                  </CapRow>
-                </>
-              ) : (
-                ''
-              )}
-            </CapRow>
-          </CapRow>
-        )}
-        {/*  exclude promotion */}
-        <CapRow className="points-limit-allocation-row-container">
-          <CapRow className="points-limit-allocation-container">
-            <CapRow type="flex" className="points-limit-section-heading">
-              <CapHeading type="h4">
-                {formatMessage(messages.excludePromotions)}
-              </CapHeading>
-              <CapHeading
-                type="label3"
-                className="margin-l-5 description-font-m"
-              >
-                {formatMessage(globalMessages.optionalLowerCase)}
-              </CapHeading>
-              <CapLabel type="label3" className="margin-t-5">
-                {formatMessage(messages.excludePromotionsDescription)}
-              </CapLabel>
-            </CapRow>
-            <CapMultiSelect
-              treeData={getExcludedPromotions(excludedPromotions) || []}
-              placeholder={formatMessage(globalMessages.selectPromotions)}
-              onSelect={handleExcludePromotionsChange}
-              appliedKeys={excludedPromotionsFilterValues}
-            />
-          </CapRow>
-        </CapRow>
-      </CapRow>
-      <ConfirmEditModal
-        className={className}
-        showEditModal={showModal}
-        closeEditModal={closeEditModal}
-        title={formatMessage(messages.editLimitTitle)}
-        description1={formatMessage(messages.editLimitDescription1)}
-        description2={formatMessage(messages.editLimitDescription2)}
-        okButtonText={formatMessage(globalMessages.yesSure)}
-        cancelButtonText={formatMessage(globalMessages.cancel)}
-        handleCancel={handleLimitModalCancel}
-        handleOk={handleLimitModalOkay}
-      />
-    </CapRow>
-  );
-};
-
-AddPointsAllocationLimitDetails.propTypes = {
-  intl: intlShape.isRequired,
-  className: PropTypes.string,
-  promoActions: PropTypes.func,
-  loyaltyPromotionsDetails: PropTypes.array,
-  pointsAllocationLimitName: PropTypes.string,
-  setPointsAllocationLimitName: PropTypes.func,
-  pointsAllocationLimitCategory: PropTypes.string,
-  setPointsAllocationLimitCategory: PropTypes.func,
-  pointsAllocationTransactionType: PropTypes.string,
-  setPointsAllocationTransactionType: PropTypes.func,
-  limit: PropTypes.number,
-  setLimit: PropTypes.func,
-  excludedPromotions: PropTypes.array,
-  setExcludedPromotions: PropTypes.func,
-  excludedPromotionsFilterValues: PropTypes.array,
-  setExcludedPromotionsFilterValues: PropTypes.func,
-  refreshUnit: PropTypes.string,
-  setRefreshUnit: PropTypes.func,
-  refreshValue: PropTypes.string,
-  setRefreshValue: PropTypes.func,
-  firstCycleStartDate: PropTypes.string,
-  setFirstCycleStartDate: PropTypes.func,
-  totalCycles: PropTypes.string,
-  setTotalCycles: PropTypes.func,
-  pointsAllocationLimitType: PropTypes.string,
-  dashboard: PropTypes.object,
-  productDetails: PropTypes.object,
-  setRefreshValueError: PropTypes.func,
-  hasDuplicateName: PropTypes.func,
-  setPointsAllocationLimitType: PropTypes.func,
-  isRewardCurrencyEnabled: PropTypes.bool,
-  rewardCurrencyOptions: PropTypes.array,
-  rewardCurrencyState: PropTypes.object,
-  setRewardCurrencyState: PropTypes.func,
-  existingTransactionKPIs: PropTypes.object,
-};
-
-AddPointsAllocationLimitDetails.defaultProps = {
-  isRewardCurrencyEnabled: false,
-  rewardCurrencyOptions: [],
-  rewardCurrencyState: {},
-  setRewardCurrencyState: () => { },
-  existingTransactionKPIs: {},
-};
-
-const withSaga = [{ key: 'AudienceManager', saga: audienceManagerSaga }].map(
-  ({ key, saga }) => injectSaga({ key, saga }),
-);
-
-const withReducer = [
-  { key: 'AudienceManager', reducer: audienceManagerReducer },
-].map(({ key, reducer }) => injectReducer({ key, reducer }));
-
-const mapStateToProps = createStructuredSelector({
-  loyaltyPromotionsDetails: makeSelectPromotionsDetail(),
-  dashboard: makeSelectStoresEntityZonesData(),
-  productDetails: makeSelectProductInfo(),
-  userData: makeSelectCap(),
-  audienceGroups: makeSelectGetAllAudienceGroups(),
-});
-
-function mapDispatchToProps(dispatch) {
-  return {
-    promoActions: bindActionCreators(promoActions, dispatch),
-    audienceManagerActions: bindActionCreators(
-      audienceManagerActions,
-      dispatch,
-    ),
-  };
-}
-const withConnect = connect(
-  mapStateToProps,
-  mapDispatchToProps,
-);
-
-export default compose(
-  ...withReducer,
-  ...withSaga,
-  withErrorBoundary,
-  withConnect,
-)(injectIntl(withStyles(AddPointsAllocationLimitDetails, styles)));