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

package/components/organisms/AddPointsAllocationLimitDetails/AddPointsAllocationLimitDetails.js

@@ -0,0 +1,1629 @@
+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)));