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

package/components/organisms/PointsBudgetList/PointsBudgetList.js

@@ -1,1220 +0,0 @@
-/* eslint-disable prettier/prettier */
-import React, { useEffect, useMemo, useState } from 'react';
-import { injectIntl, intlShape } from 'react-intl';
-import PropTypes from 'prop-types';
-import { compose, bindActionCreators } from 'redux';
-import { connect } from 'react-redux';
-import { createStructuredSelector } from 'reselect';
-import classNames from 'classnames';
-import moment from 'moment';
-import { withRouter } from 'react-router-dom';
-
-import CapRow from '@capillarytech/cap-ui-library/CapRow';
-import CapImage from '@capillarytech/cap-ui-library/CapImage';
-import CapDivider from '@capillarytech/cap-ui-library/CapDivider';
-import CapIcon from '@capillarytech/cap-ui-library/CapIcon';
-import CapTag from '@capillarytech/cap-ui-library/CapTag';
-import CapTable from '@capillarytech/cap-ui-library/CapTable';
-import CapHeading from '@capillarytech/cap-ui-library/CapHeading';
-import CapMenu from '@capillarytech/cap-ui-library/CapMenu';
-import CapDropdown from '@capillarytech/cap-ui-library/CapDropdown';
-import CapTooltipWithInfo from '@capillarytech/cap-ui-library/CapTooltipWithInfo';
-import CapTooltip from '@capillarytech/cap-ui-library/CapTooltip';
-import CapStatus from '@capillarytech/cap-ui-library/CapStatus';
-import CapHeader from '@capillarytech/cap-ui-library/CapHeader';
-import CapLabel from '@capillarytech/cap-ui-library/CapLabel';
-import CapInput from '@capillarytech/cap-ui-library/CapInput';
-import CapSelect from '@capillarytech/cap-ui-library/CapSelect';
-import CapSelectFilter from '@capillarytech/cap-ui-library/CapSelectFilter';
-import CapButton from '@capillarytech/cap-ui-library/CapButton';
-import CapAlert from '@capillarytech/cap-ui-library/CapAlert';
-import CapLink from '@capillarytech/cap-ui-library/CapLink';
-
-import withErrorBoundary from 'utils/withErrorBoundary';
-import withStyles from 'utils/withStyles';
-import { CapSpin } from '@capillarytech/cap-ui-library';
-
-import { isEmpty, isEqual } from 'lodash';
-import { makeSelectCappingInfo } from '../ActivityRewardCurrencyCard/selectors';
-import { makeSelectCap } from '../../pages/Cap/selectors';
-import noLimitImage from '../../../assets/draft-not-exist-Illustration.svg';
-import globalMessages from '../../pages/Cap/messages';
-import activityRewardSliderMessages from '../ActivityRewardSlider/messages';
-import StatusColor from '../../atoms/StatusColor';
-
-import {
-  DATE_DISPLAY_FORMAT_POINTS,
-  attribueMapping,
-  applicableOnMessageId,
-  cycleMapping,
-  unit,
-  cappingOnMessageId,
-  tableFilterValues,
-} from './constants';
-import { styles } from './style';
-import messages from './messages';
-import {
-  ACROSS_EVENT,
-  ACROSS_EVENTS,
-  ALL,
-  ALL_POINTS,
-  ATTRIBUTES_LOWERCASE,
-  BRANDS_LOWERCASE,
-  CATEGORIES_LOWERCASE,
-  CURRENT_EVENT,
-  POINTS_CAPITALIZED,
-  PROMOTIONAL,
-  PROMOTIONAL_POINTS,
-  REGULAR,
-  REGULAR_POINTS,
-  STORE,
-  ZONE,
-} from '../ActivityRewardSlider/constants';
-import {
-  ALL_ACTIVITY,
-  ALL_EVENTS,
-  ALL_LIMIT,
-  TRANSACTION_ADD,
-  ALL_STATUS,
-} from '../PointsAllocationLimit/constants';
-import * as promoActions from '../PromotionsDetail/actions';
-import {
-  makeSelectProductInfo,
-  makeSelectPromotionsDetail,
-  makeSelectStoresEntityZonesData,
-} from '../PromotionsDetail/selectors';
-import { MODE_VIEW, REQUEST, SUCCESS } from '../../pages/App/constants';
-
-import { createKeyValuePair } from '../AddPointsAllocationLimitSlider/utils';
-import CustomSkeleton from '../../atoms/CustomSkeleton/CustomSkeleton';
-import { MAX_CAPPING_CUSTOMER_LIMIT, MAX_CAPPING_TRANSACTION_LIMIT } from '../AddPointsAllocationLimitDetails/constants';
-import { cappingLimitTooltipMessage } from '../ActivityRewardSlider/utils';
-import { checkExistingTransactionKPIs } from './utils';
-
-const { CapCustomSelect } = CapSelect;
-
-export const PointsBudgetList = ({
-  intl: { formatMessage },
-  className,
-  userData: {
-    currentOrgDetails: { basic_details: { base_currency: currency } = {} } = {},
-  } = {},
-  match: {
-    params: { mode },
-  },
-  promoActions: getAllEntitiesActions,
-  storeData,
-  productData,
-  loyaltyPromotionsDetails,
-  /** From parent */
-  type,
-  data = [],
-  onEditClick,
-  onStopClick,
-  transactionLimitData,
-  acrossCustomerLimitData,
-  disabledTooltip,
-  handleAddLimitSlidebox,
-  pointsAllocationLimitType,
-  activeLimitsCount,
-  transactionActiveLimit,
-  acrossCustomerActiveLimit,
-  isEMFActive,
-  isRewardCurrencyEnabled,
-  rewardCurrencyOptions,
-  existingTransactionKPIs,
-  setExistingTransactionKPIs
-}) => {
-  const {
-    stores,
-    fetchingStores,
-    entityZones,
-    fetchingEntityZones,
-  } = storeData;
-  const {
-    brandDetails,
-    fetchingBrandDetails,
-    categoryDetails,
-    fetchingCategoryDetails,
-    customAttributeDetails,
-    fetchingCustomAttributeDetails,
-  } = productData;
-  const { getPromotionsStatus, promotionDetails } = loyaltyPromotionsDetails;
-  const promotionObject = useMemo(() => createKeyValuePair(promotionDetails), [
-    promotionDetails,
-  ]);
-  const storesObject = useMemo(() => createKeyValuePair(stores), [stores]);
-  const zonesObject = useMemo(() => createKeyValuePair(entityZones), [
-    entityZones,
-  ]);
-  const brandObject = useMemo(() => createKeyValuePair(brandDetails), [
-    brandDetails,
-  ]);
-  const categoryObject = useMemo(() => createKeyValuePair(categoryDetails), [
-    categoryDetails,
-  ]);
-  const customAttributeObject = useMemo(
-    () => createKeyValuePair(customAttributeDetails),
-    [customAttributeDetails],
-  );
-  const [filterToFetch, setFilterToFetch] = useState({});
-  const [tableFilter, setTableFilter] = useState({
-    searchValue: '',
-    customerActivity: '',
-    limitsOn: '',
-    status: '',
-    rewardCurrency: '',
-  });
-
-  const areTableFiltersApplied = useMemo(() => {
-    const { customerActivity, limitsOn, status, rewardCurrency } = tableFilter;
-    return customerActivity || limitsOn || status || rewardCurrency;
-  }, [tableFilter]);
-
-  const getRewardCurrencyKPIName = (cappingOn, rewardCurrencyName ) => { 
-    switch(cappingOn){
-      case REGULAR:
-        return formatMessage(messages.regularRewardCurrency, {
-          rewardCurrency: rewardCurrencyName,
-        })
-      case PROMOTIONAL:
-        return formatMessage(messages.promotionalRewardCurrency, {
-          rewardCurrency: rewardCurrencyName,
-        })
-      default:
-        return formatMessage(messages.both)
-    }
-  }
-
-  const getPointsLimitsOn = (entity, cappingOn, additionalFilters, rewardCurrencyName) => {
-    const messageId =
-      cappingOnMessageId?.[entity]?.[cappingOn] ||
-      cappingOnMessageId?.[cappingOn] ||
-      'notDefined';
-    const isRewardCurrency = [ALL, PROMOTIONAL, REGULAR].includes(cappingOn);
-    let tooltipText = (
-      <CapRow className={className} type="flex">
-        <CapRow>{formatMessage(messages.max)}</CapRow>
-        <CapTag className="points-limits-tag">
-          {formatMessage(messages[messageId])}
-        </CapTag>
-        {/* the text for the below section, transaction points and across customer points must be different, this text will be conditionally rendered differently. The text for transaction was not there in VD. Need to check once. */}
-        <CapRow>{formatMessage(messages.onWhich)}</CapRow>
-      </CapRow>
-    );
-    if ([ALL_POINTS, PROMOTIONAL_POINTS, REGULAR_POINTS].includes(cappingOn)) {
-      tooltipText = (
-        <CapRow className={className} type="flex">
-          <CapRow>{formatMessage(messages.max)}</CapRow>
-          <CapTag className="points-limits-tag">
-            {formatMessage(messages[messageId])}
-          </CapTag>
-          {/* the text for the below section, transaction points and across customer points must be different, this text will be conditionally rendered differently. The text for transaction was not there in VD. Need to check once. */}
-          <CapRow>{formatMessage(messages.thatCanBe)}</CapRow>
-        </CapRow>
-      );
-    }
-    if (isRewardCurrency) {
-      tooltipText = (
-        <CapRow className={className} type="flex">
-          <CapRow>{formatMessage(messages.max)}</CapRow>
-          <CapTag className="points-limits-tag">
-            {getRewardCurrencyKPIName(cappingOn, rewardCurrencyName)}
-          </CapTag>
-          <CapRow>{formatMessage(messages.thatCanBe)}</CapRow>
-        </CapRow>
-      );
-    }
-    return (
-      <CapRow>
-        <CapRow type="flex" className="row-margin">
-          <CapLabel type="label15">
-            {isRewardCurrency ? getRewardCurrencyKPIName(cappingOn, rewardCurrencyName) : formatMessage(messages[messageId])}
-          </CapLabel>
-          <CapTooltipWithInfo
-            overlayStyle={{ maxWidth: '490px' }}
-            className="points-budget-tags-tooltip"
-            title={tooltipText}
-          />
-        </CapRow>
-        {getApplicableOn(additionalFilters)}
-      </CapRow>
-    );
-  };
-
-  const getApplicableOn = appliedFilters => {
-    let category = '';
-    let values = [];
-
-    const valueObjectMapping = {
-      includedBrands: brandObject,
-      includedCategories: categoryObject,
-      includedAttributes: customAttributeObject,
-      includedStoreIds: storesObject,
-      includedZoneIds: zonesObject,
-    };
-
-    const getAppliedFilterOn = filters => {
-      if (!Object.keys(filters).length) return;
-      Object.entries(filters).forEach(([key, value]) => {
-        if (key === 'pointsFilters') return;
-        if (key === 'includedAttributes' && Object.keys(value).length) {
-          category = key;
-          for (const key in value) {
-            if (Array.isArray(value[key]) && !isEmpty(value[key])) {
-              values.push(...value[key]);
-            } else {
-              values.push(key);
-            }
-          }
-          // values = Object.entries(value).map(
-          //   val => valueObjectMapping[key]?.[val]?.name || val,
-          // );
-          return;
-        }
-        if (Array.isArray(value) && value.length) {
-          category = key;
-          values = value.map(
-            val => valueObjectMapping[key]?.[val]?.name || val,
-          );
-          return;
-        }
-        if (typeof value === 'object' && Object.keys(value).length) {
-          getAppliedFilterOn(value);
-          return;
-        }
-      });
-    };
-
-    getAppliedFilterOn(appliedFilters);
-
-    switch (category) {
-      case '':
-        return [
-          <CapRow>
-            <CapLabel type="label3">
-              {formatMessage(messages.allTransactions)}
-            </CapLabel>
-          </CapRow>,
-          // attribueMapping[category],
-        ];
-      case 'includedAttributes':
-      default:
-        const messageId = applicableOnMessageId[category];
-        return [
-          <CapRow type="flex" className="points-limit-row">
-            <CapRow type="flex" className="applicable-on-subtext">
-              <CapLabel type="label3">
-                {formatMessage(globalMessages[messageId])}: {values[0]}
-              </CapLabel>
-              {values?.length > 1 && (
-                <CapRow
-                  type="flex"
-                  className={classNames(
-                    'text-color-grey',
-                    'applicable-on-right-text',
-                  )}
-                >
-                  {getApplicableTooltipWrappedText(values)}
-                </CapRow>
-              )}
-            </CapRow>
-          </CapRow>,
-          // attribueMapping[category],
-        ];
-    }
-  };
-
-  const getRewardCurrencyName = (rewardCurrencyIdentifier = '') => {    
-    if(!rewardCurrencyIdentifier) return POINTS_CAPITALIZED
-    return rewardCurrencyOptions?.find(option => option?.value === rewardCurrencyIdentifier)?.key || formatMessage(messages.notDefined);
-  }
-
-  const getLimitValue = (limit, cappingOn, rewardCurrencyName, isRewardCurrencyEnabled) => {
-    const messageId = unit[cappingOn] || 'notDefined';
-    const isRewardCurrency = [ALL, PROMOTIONAL, REGULAR].includes(cappingOn);
-    return (
-      <CapRow>
-        <CapHeading type="h4">
-          {isRewardCurrency ? formatMessage(messages.rewardCurrencyLimit, {
-            limit,
-            rewardCurrency: rewardCurrencyName
-          }) : formatMessage(messages[messageId], { limit, currency })}
-        </CapHeading>
-        {isRewardCurrencyEnabled  && <CapLabel type="label3">
-          {rewardCurrencyName}
-        </CapLabel>}
-      </CapRow>
-    );
-  };
-
-  const getNameStatus = (name ,status) => {
-    let type = '';
-    switch (status) {
-      case 'stopped':
-        type = 'rejected';
-        break;
-      case 'active':
-        type = 'approved';
-        break;
-    }
-
-
-    return (
-      <CapRow className="column-padding-left">
-        <CapRow className="row-margin">
-          {name}
-        </CapRow>
-        <CapStatus
-          className="text-color-grey"
-          text={getStatusText(status)}
-          type={type}
-        />
-      </CapRow>
-    );
-  };
-
-
-  const getRefreshesValue = (frequencyType, cycles, startDate, endDate) => (
-      <CapRow>
-        <CapRow type="flex" className="row-margin">
-          <CapRow>
-            {getMonthsBetween(startDate, endDate) > 0
-              ? `${getMonthsBetween(startDate, endDate)} months`
-              : `${getDaysBetween(startDate, endDate)} days`}
-          </CapRow>
-          <CapDivider type="vertical" className="refresh-margin" />
-          <CapRow>{cycles}</CapRow>
-        </CapRow>
-        {getDuration(startDate, endDate)}
-      </CapRow>
-    );
-
-  const getDuration = (startDate, endDate) => (
-    <CapRow type="flex">
-      <CapLabel type="label3">
-        {moment(startDate).format(DATE_DISPLAY_FORMAT_POINTS)}
-      </CapLabel>
-      <CapLabel type="label3" className="date-dash">
-        -
-      </CapLabel>
-      <CapLabel type="label3">
-        {moment(endDate).format(DATE_DISPLAY_FORMAT_POINTS)}
-      </CapLabel>
-    </CapRow>
-  );
-  function getMonthsBetween(startDate, endDate) {
-    const start = new Date(startDate);
-    const end = new Date(endDate);
-
-    const months =
-      (end.getFullYear() - start.getFullYear()) * 12 +
-      (end.getMonth() - start.getMonth());
-
-    // If end date day is earlier in the month than start date day, subtract one month
-    if (end.getDate() < start.getDate()) {
-      return months - 1;
-    }
-    return months;
-  }
-  function getDaysBetween(startDate, endDate) {
-    const start = new Date(startDate);
-    const end = new Date(endDate);
-
-    // Calculate the time difference in milliseconds and convert to days
-    const timeDifference = end - start; // difference in milliseconds
-    const days = Math.floor(timeDifference / (1000 * 60 * 60 * 24)); // convert milliseconds to days
-
-    return days + 1;
-  }
-
-  const getColumnTitle = (title, subTitle,key) => <CapHeader
-    className={classNames('points-budget-header', {'column-padding-left': key ==='name'})}
-    size="small"
-    title={title}
-    description={subTitle}
-  />;
-
-  const getTooltipWithInfo = (enrolmentMethod, excludedPromotions) => {
-    let execuledPromotionsName = excludedPromotions.map(
-      promotionId => promotionObject?.[promotionId]?.name,
-    );
-    const excludedPromotionsContent = () => {
-      switch (getPromotionsStatus) {
-        case SUCCESS:
-          return (
-            <>
-              <CapRow>
-                <CapRow className="points-budget-limit-title">
-                  {formatMessage(messages.excludedPromotions)}
-                </CapRow>
-                <CapRow>
-                  {/* Showing only the first 5 excluded promotions in the tooltip */}
-                  {execuledPromotionsName
-                      ?.slice(0, 5)
-                      ?.map(curExcludedPromotion => (
-                        <CapRow className="points-budget-limit">
-                          {curExcludedPromotion}
-                        </CapRow>
-                      ))}
-                </CapRow>
-              </CapRow>
-              {/* commenting as of now for future */}
-              {/* <CapDivider />
-              <CapRow type="flex" className="download-text">
-                <CapIcon type="download" size="s" />
-                <a
-                  href={`data:text/csv;charset=utf-8,${(
-                    execuledPromotionsName || []
-                  ).join('\n')}`}
-                  download="Excluded promotions.csv"
-                >
-                  {formatMessage(messages.downloadExcludedPromotions)}
-                </a>
-              </CapRow> */}
-            </>
-          );
-        case REQUEST:
-          return <CustomSkeleton isTitle height="60px" width="60px" />;
-        default:
-          return <></>;
-      }
-    };
-    const getAudience = (enrolmentMethod) =>{
-          switch(enrolmentMethod){
-            case "TRANSACTION":
-              return  formatMessage(messages.allCustomers)
-             case 'AUDIENCE_FILTER':
-              return  formatMessage(messages.specificCustomers)
-             case 'IMPORT':
-              return formatMessage(messages.enrolViaApi)
-          }
-    }
-    let tooltipContent = (
-      <CapRow className={className}>
-        {enrolmentMethod && <CapRow>
-          <CapRow className="points-budget-limit-title">
-            {formatMessage(messages.audience)}
-          </CapRow>
-          <CapRow className="points-budget-limit">
-            {getAudience(enrolmentMethod)}
-          </CapRow>
-        </CapRow>}
-        {execuledPromotionsName.length > 0 && excludedPromotionsContent()}
-      </CapRow>
-    );
-    if(!enrolmentMethod && !execuledPromotionsName.length > 0 ) return null
-    return <CapTooltipWithInfo title={tooltipContent} className="points-info"/>;
-  };
-
-  const getStatusText = textId => (
-    <CapRow className="status-text">{formatMessage(messages[textId])}</CapRow>
-  );
-
-  const getEdit = record => {
-    const isLimitActive = record.target
-      ? record?.targetGroup?.active && record?.target?.active
-      : true;
-    const onEditClickInternal = () => {
-      onEditClick(record.id, record.type);
-    };
-    const onStopClickInternal = () => {
-      onStopClick(record.id, record.type);
-    };
-    const menu = (
-      <CapMenu>
-        <CapMenu.Item onClick={onEditClickInternal} disabled={mode===MODE_VIEW}>
-          {formatMessage(globalMessages.edit)}
-        </CapMenu.Item>
-        <CapMenu.Item onClick={onStopClickInternal} disabled={mode===MODE_VIEW}>
-          {record.type === ACROSS_EVENTS
-            ? formatMessage(globalMessages.stop)
-            : formatMessage(globalMessages.delete)}
-        </CapMenu.Item>
-      </CapMenu>
-    );
-    return (
-      <CapRow className={classNames(!isLimitActive && 'disabled-more')}>
-        {isLimitActive && (
-          <CapDropdown placement="bottomRight" overlay={menu}>
-            <CapIcon type="more" data-testid="edit-stop-menu" />
-          </CapDropdown>
-        )}
-      </CapRow>
-    );
-  };
-
-  const getApplicableTooltipWrappedText = values => {
-    let tooltipTitle = (
-      <CapRow>
-        {values?.map(curData => (
-          <CapRow className="applicale-on-tooltips">{curData}</CapRow>
-        ))}
-      </CapRow>
-    );
-    return (
-      <CapTooltip title={tooltipTitle}>
-        {formatMessage(messages.moreText, { data: values.length - 1 })}
-      </CapTooltip>
-    );
-  };
-
-  let ACP_columns = [
-    {
-      title: getColumnTitle(
-        formatMessage(messages.name),
-        formatMessage(globalMessages.status),
-        'name',
-      ),
-      width: '18.82%',
-      dataIndex: 'name',
-      key: 'name',
-      render: (name, record) =>getNameStatus(name,record.status),
-
-    },
-    {
-      title: (
-        <CapRow type="flex">
-          <CapRow>
-            <CapHeader
-              size="small"
-              title={formatMessage(messages.activity)}
-              description={formatMessage(messages.limitOn)}
-            />
-          </CapRow>
-        </CapRow>
-      ),
-      width: '16.82%',
-      dataIndex: 'limitOn',
-      key: 'limitOn',
-    },
-    {
-      title: (
-        <CapHeader
-          size="small"
-          title={formatMessage(messages.currencyLimitBasedOn)}
-          description={formatMessage(globalMessages.scope)}
-        />
-      ),
-      width: '20.82%',
-      dataIndex: 'pointsLimitsOn',
-      key: 'pointsLimitsOn',
-    },
-    {
-      title: getColumnTitle(
-        formatMessage(messages.limitValue),
-        isRewardCurrencyEnabled ? formatMessage(globalMessages.rewardCurrency) : '',
-        'limitValue',
-      ),
-      width: '16.61%',
-      dataIndex: 'limitValue',
-      key: 'limitValue',
-    },
-    {
-      title: getColumnTitle(
-        <CapRow>
-          {formatMessage(messages.refreshes)}
-          <CapTooltipWithInfo
-            className="transaction-points-tooltip-info"
-            title={formatMessage(globalMessages.refreshesEveryInfo)}
-          />
-          <CapDivider type="verticle" />
-          {formatMessage(messages.cycles)}
-        </CapRow>,
-        formatMessage(messages.duration),
-      ),
-      width: '18.61%',
-      dataIndex: 'refreshesValue',
-      key: 'refreshesValue',
-    },
-    {
-      key: 'info',
-      dataIndex: 'info',
-      width: '5%',
-      render: (text, record) =>
-        getTooltipWithInfo(
-          record?.target?.enrolmentMethod,
-          record?.additionalFilters?.pointsFilters?.excludedPromotions || [],
-        ),
-    },
-    {
-      key: 'more',
-      dataIndex: 'more',
-      width: '5%',
-      render: (text, record) => <CapRow>{getEdit(record)}</CapRow>,
-    },
-  ];
-
-  // if (mode === MODE_VIEW) {
-  //   ACP_columns.pop();
-  //   ACP_columns = ACP_columns.map((col, index) => {
-  //     if (index !== ACP_columns.length - 1) {
-  //       col.width = '19.6%';
-  //     }
-  //     return col;
-  //   });
-  // }
-
-  const getEntityData = entity => {
-    switch (entity) {
-      case STORE:
-        if (fetchingStores !== SUCCESS || fetchingStores !== REQUEST) {
-          getAllEntitiesActions.getAllEntityStores(entity);
-        }
-        break;
-      case ZONE:
-        if (
-          fetchingEntityZones !== SUCCESS ||
-          fetchingEntityZones !== REQUEST
-        ) {
-          getAllEntitiesActions.getAllEntityZones(entity);
-        }
-        break;
-      case BRANDS_LOWERCASE:
-        if (
-          fetchingBrandDetails !== SUCCESS ||
-          fetchingBrandDetails !== REQUEST
-        ) {
-          getAllEntitiesActions.getBrand(entity);
-        }
-        break;
-      case ATTRIBUTES_LOWERCASE:
-        if (
-          fetchingCustomAttributeDetails !== SUCCESS ||
-          fetchingCustomAttributeDetails !== REQUEST
-        ) {
-          getAllEntitiesActions.getCustomAttribute(entity);
-        }
-        break;
-      case CATEGORIES_LOWERCASE:
-        if (
-          fetchingCategoryDetails !== SUCCESS ||
-          fetchingCategoryDetails !== REQUEST
-        ) {
-          getAllEntitiesActions.getCategory(entity);
-        }
-        break;
-    }
-  };
-  const getLimitOn = (eventName, type) => (
-      <CapRow>
-        <CapRow className="row-margin">
-          {eventName === ALL_EVENTS
-            ? formatMessage(messages.allActivities)
-            : formatMessage(messages.transactionAdd)}
-        </CapRow>
-        {type === ACROSS_EVENTS ? (
-          <CapLabel type="label3">
-            {formatMessage(messages.individualCustomerLimit)}
-          </CapLabel>
-        ) : (
-          <CapLabel type="label3">
-            {formatMessage(messages.individualTransactionLimit)}
-          </CapLabel>
-        )}
-        <CapRow />
-      </CapRow>
-    );
-  const activityOptions = [
-    {
-      key: ALL_EVENTS,
-      label: formatMessage(messages.allActivity),
-      value: ALL_EVENTS,
-    },
-    {
-      key: TRANSACTION_ADD,
-      label: formatMessage(messages.transactionAdd),
-      value: TRANSACTION_ADD,
-    }
-  ];
-  const limitOption = [
-    {
-      key: CURRENT_EVENT,
-      label: formatMessage(messages.individualTransaction),
-      value: CURRENT_EVENT,
-    },
-    {
-      key: ACROSS_EVENTS,
-      label: formatMessage(messages.individualCustomer),
-      value: ACROSS_EVENTS,
-    }
-  ];
-
-  const statusOption = [
-    {
-      label: (
-    <CapRow type="flex" align="middle" className={""}>
-    <StatusColor colorType={'red'} />
-    <CapRow style={{ marginLeft: '10px' }}>
-      {'Stopped'}
-    </CapRow>
-  </CapRow>
-    ),
-      value: 'stopped',
-      key:'stopped'
-    },
-    {
-      label: (
-        <CapRow type="flex" align="middle" className={""}>
-        <StatusColor colorType={'live'} />
-        <CapRow style={{ marginLeft: '10px' }}>
-          {'Active'}
-        </CapRow>
-      </CapRow>
-    ),
-      value: 'active',
-      key:'active',
-    }
-  ];
-
-  const handleFilterRemove = (tableFilterKey) => { 
-    setTableFilter(prevState => ({
-      ...prevState,
-      [tableFilterKey]: '',
-    }));
-  }
-
-  const handleFilterClearAll = () => {
-    setTableFilter(prevState => {
-      const { searchValue, ...rest } = prevState;
-      return {
-        searchValue,
-        ...Object.keys(rest).reduce((acc, key) => {
-          acc[key] = '';
-          return acc;
-        }, {}),
-      };
-    });
-  };
-
-  const handleFilterChange = (value, field) => {
-    let newValue;
-    if (field === tableFilterValues.SEARCH_VALUE) {
-      newValue = value.target?.value;
-    } else if (field === tableFilterValues.REWARD_CURRENCY) { 
-      newValue = value;
-    } else {
-      newValue = value?.item?.props?.value;
-    }
-      setTableFilter(prevState => ({
-        ...prevState,
-        [field]: newValue,
-      }));
-    };
-  const addLimitButtonHandler = e => {
-    e.stopPropagation();
-    const limitOn = transactionActiveLimit < MAX_CAPPING_TRANSACTION_LIMIT ? CURRENT_EVENT : ACROSS_EVENT;
-    handleAddLimitSlidebox(limitOn);
-  };
-  const RenderButton = ({ noLimit }) => {
-    return (
-      <CapTooltip 
-        title={
-          activeLimitsCount >= MAX_CAPPING_TRANSACTION_LIMIT + MAX_CAPPING_CUSTOMER_LIMIT && 
-          cappingLimitTooltipMessage(formatMessage(messages.addLimitDisabledTooltip), formatMessage(globalMessages.pleaseRemoveOrDeactivateTooltip))
-        } 
-        placement="top"
-      >
-        <CapButton
-          type="flat"
-          isAddBtn
-          onClick={addLimitButtonHandler}
-          className={`${noLimit ? 'no-limit-button' : ''}`}
-          disabled={activeLimitsCount >= MAX_CAPPING_TRANSACTION_LIMIT + MAX_CAPPING_CUSTOMER_LIMIT || mode===MODE_VIEW}
-        >
-          {formatMessage(activityRewardSliderMessages.addLimit)}
-        </CapButton>
-      </CapTooltip>
-    );
-  };
-
-  const getFilterTagValue = (key, value) => { 
-    switch (key) {
-      case tableFilterValues.CUSTOMER_ACTIVITY:
-        return activityOptions.find(option => option.value === value).label;
-      case tableFilterValues.LIMIT_ON:
-        return limitOption.find(option => option.value === value).label;
-      case tableFilterValues.STATUS:
-        return statusOption.find(option => option.value === value).label;
-      default:
-        return value;
-    }
-  }
-
-  const tableHeader = () => (
-      <CapRow className={classNames(className,'table-heading')}>
-        { isEMFActive !=='0' && <CapRow >
-          <CapAlert
-            className="points-allocation-info-container"
-            message={
-              <>
-                <CapRow type="flex" align="middle">
-                  <CapLabel type="label31">
-                    {formatMessage(
-                      activityRewardSliderMessages.brandsMlpMessage,
-                    )}
-                  </CapLabel>
-                </CapRow>
-              </>
-            }
-            type="info"
-          />
-      </CapRow>}
-      {isRewardCurrencyEnabled && <CapAlert
-        className="points-allocation-info-container"
-        message={
-          <>
-            <CapRow type="flex" align="middle">
-              <CapLabel type="label31">
-                {formatMessage(
-                  activityRewardSliderMessages.rewardCurrencyInfoNote,
-                )}
-              </CapLabel>
-            </CapRow>
-          </>
-        }
-        type="info"
-      />}
-        <CapRow
-          type="flex"
-          align="middle"
-          justify="space-between"
-          className="points-allocation-accordion"
-        >
-          <CapRow type="flex" align="middle" className="left-content">
-            <CapInput.Search
-              className="budget-table-search"
-              allowClear={false}
-              value={tableFilter?.searchValue}
-              placeholder={formatMessage(messages.searchLimit)}
-              onChange={(value) => handleFilterChange(value, tableFilterValues.SEARCH_VALUE)}
-            />
-          <CapSelectFilter
-            placeholder={formatMessage(messages.customerActivity)}
-            data={activityOptions}
-            className="list-filters"
-            getPopupContainer={trigger => trigger}
-            selectedValue={tableFilter?.customerActivity}
-            onSelect={(value) => handleFilterChange(value, tableFilterValues.CUSTOMER_ACTIVITY)}
-          />
-          <CapSelectFilter
-            placeholder={formatMessage(messages.limitsOn)}
-            data={limitOption}
-            className="list-filters"
-            getPopupContainer={trigger => trigger}
-            selectedValue={tableFilter?.limitsOn}
-            onSelect={(value) => handleFilterChange(value, tableFilterValues.LIMIT_ON)}
-          />
-          <CapSelectFilter
-            className="list-filters"
-            data={statusOption}
-            onSelect={(value) => handleFilterChange(value, tableFilterValues.STATUS)}
-            selectedValue={tableFilter?.status}
-            placeholder={formatMessage(messages.status)}
-            getPopupContainer={trigger => trigger}
-          />
-          {isRewardCurrencyEnabled &&
-           <CapCustomSelect
-            className={classNames("list-currency-filter", {
-              'list-currency-filter-active-selection' : tableFilter?.rewardCurrency
-            })}
-            popoverClassName={classNames(className, "list-currency-filter-popover")}
-            onChange={(value, node) => handleFilterChange(node?.key, tableFilterValues.REWARD_CURRENCY)}
-            value={rewardCurrencyOptions?.find(option => option?.key === tableFilter?.rewardCurrency)?.value}
-            options={rewardCurrencyOptions}
-            searchPlaceholder={formatMessage(globalMessages.search)}
-            selectPlaceholder={formatMessage(messages.currency)}
-            showSearch
-            useKeyForSearch
-          />}
-          </CapRow>
-          <CapRow type="flex" align="middle">
-            {<RenderButton />}
-            <CapDivider type="verticle" />
-            <CapLabel type="label1">
-              {formatMessage(activityRewardSliderMessages.activeLimits)}
-            </CapLabel>
-            <CapLabel
-              className="active-limit-count active-limit-count-label"
-              type="label31"
-            >
-              {activeLimitsCount}
-            </CapLabel>
-            <CapTooltip
-              overlayClassName="active-limit-tooltip"
-              placement="topRight"
-              getPopupContainer={() =>
-                document.querySelector('.points-allocation-accordion')
-              }
-              title={
-                <CapRow style={{ height: '64px' }}>
-                  <CapRow className="transaction-count">
-                    <CapLabel type="label31" style={{ color: '#97A0AF' }}>
-                      {formatMessage(messages.totalTransactionLimits)}
-                      <span className="highlight">
-                        {' '}
-                        {transactionActiveLimit}
-                      </span>
-                    </CapLabel>
-                  </CapRow>
-                  <CapRow className="customer-count">
-                    <CapLabel type="label31" style={{ color: '#97A0AF' }}>
-                      {formatMessage(messages.totalCustomerLimits)}
-                      <span className="highlight">
-                        {' '}
-                        {acrossCustomerActiveLimit}
-                      </span>
-                    </CapLabel>
-                  </CapRow>
-                </CapRow>
-              }
-            >
-              <CapIcon size="s" type="info" className="info-icon" />
-            </CapTooltip>
-          </CapRow>
-      </CapRow>
-      {areTableFiltersApplied && (
-        <CapRow type="flex" align="middle" className="applied-filter-row">
-          {Object.entries(tableFilter)?.map(([key, value]) => {
-            return value && key !== tableFilterValues.SEARCH_VALUE ? (
-              <CapRow key={value} type="flex" align="middle">
-                <CapLabel className='applied-filter-label'>
-                  {formatMessage(messages[key])}:
-                </CapLabel>
-                <CapTag className='applied-filter-tag'  closable onClose={() => {handleFilterRemove(key)}}>
-                  {getFilterTagValue(key, value)}
-                </CapTag>
-                <CapDivider className='applied-filter-divider' type='vertical' />
-              </CapRow>
-            ) : <></>
-          })}
-          <CapLink
-            className="clear-all-filters"
-            title={formatMessage(globalMessages.clearAll)}
-            onClick={handleFilterClearAll}
-          />
-        </CapRow>
-      )}
-      </CapRow>
-    );
-  const getData = () => {
-    const appliedFilters = {};
-    let dataInternal = [];
-    let updatedTransactionKPIs = existingTransactionKPIs;
-    const getTargetActiveStatus = (targetGroup, target) => {
-      if (targetGroup?.active && target?.active) return 'active';
-      return 'stopped';
-    };
-    // CURRENT_EVENT:
-    const transactionLimitDataArray = transactionLimitData.map(
-      ({
-        name,
-        key,
-        id,
-        limit,
-        entity = '',
-        cappingOn = '',
-        additionalFilters = {},
-        eventName = 'TransactionAdd',
-        alternateCurrencyIdentifier = '',
-      }) => {
-        const [applicableOn, category] = getApplicableOn(additionalFilters);
-        if (category) appliedFilters[category] = true;
-        const rewardCurrencyName = getRewardCurrencyName(alternateCurrencyIdentifier);
-        checkExistingTransactionKPIs({ entity, cappingOn, alternateCurrencyIdentifier }, updatedTransactionKPIs);
-        return {
-          key,
-          name:name,
-          status:'active',
-          pointsLimitsOn: getPointsLimitsOn(
-            entity,
-            cappingOn,
-            additionalFilters,
-            rewardCurrencyName,
-          ),
-          id,
-          // applicableOn,
-          limitValue: getLimitValue(limit, cappingOn, rewardCurrencyName, isRewardCurrencyEnabled), 
-          isLimitActive: true,
-          additionalFilters,
-          limitOn: getLimitOn(eventName, CURRENT_EVENT),
-          type: CURRENT_EVENT,
-          eventName,
-          rewardCurrencyName,
-        };
-      },
-    );
-    // ACROSS_EVENT:
-    const acrossCustomerLimitDataArray = acrossCustomerLimitData.map(
-      ({
-        key,
-        id,
-        limit,
-        entity = '',
-        cappingOn = '',
-        additionalFilters = {},
-        targetId = -1,
-        targetGroupId = -1,
-        target,
-        targetGroup,
-        eventName = 'TransactionAdd',
-      }) => {
-        const [applicableOn, category] = getApplicableOn(additionalFilters);
-        if (category) appliedFilters[category] = true;
-        const rewardCurrencyName = getRewardCurrencyName(target?.extendedFieldInfo?.alternateCurrencyIdentifier);
-        return {
-          key,
-          pointsLimitsOn: getPointsLimitsOn(
-            entity,
-            cappingOn,
-            additionalFilters,
-            rewardCurrencyName,
-          ),
-          id,
-          name: target?.name,
-          limitValue: getLimitValue(
-            limit,
-            cappingOn,
-            rewardCurrencyName,
-            isRewardCurrencyEnabled,
-          ),
-          refreshesValue: getRefreshesValue(
-            targetGroup?.frequencyType,
-            target?.defaultValues?.length,
-            targetGroup?.targetCycleStartDate ||
-              targetGroup?.periods?.[0]?.startDate,
-            targetGroup?.targetCycleEndDate ||
-              targetGroup?.periods?.[targetGroup.periods.length - 1]?.endDate,
-          ),
-          status:getTargetActiveStatus(targetGroup, target),
-          isLimitActive: true,
-          targetId,
-          targetGroupId,
-          target,
-          targetGroup,
-          additionalFilters,
-          limitOn: getLimitOn(eventName, ACROSS_EVENT),
-          type: ACROSS_EVENT,
-          eventName,
-          rewardCurrencyName,
-        };
-      },
-    );
-    //     break;
-    // }
-    if (!isEqual(appliedFilters, filterToFetch)){
-      setFilterToFetch(appliedFilters);
-    }
-    dataInternal.push(
-      ...transactionLimitDataArray,
-      ...acrossCustomerLimitDataArray,
-    );
-    setExistingTransactionKPIs(updatedTransactionKPIs);
-    return dataInternal.reverse();
-  };
-  const tableRowData = getData();
-  const modifiedTableData = useMemo(
-    () => {
-      const { searchValue, customerActivity, limitsOn, status, rewardCurrency } = tableFilter;
-      const filteredValue = tableRowData.filter(tableData => {
-        const name = tableData?.name || tableData?.target?.name || '';
-        const matchesSearch = searchValue
-          ? name.toLowerCase().includes(searchValue.toLowerCase())
-          : true;
-        const matchesLimit = limitsOn ? tableData?.type === limitsOn : true;
-        const matchesActivity = customerActivity ? tableData?.eventName === customerActivity : true;
-        const cappingStatus = status ? tableData?.status === status : true;
-        const matchesRewardCurrency = rewardCurrency ? tableData?.rewardCurrencyName === rewardCurrency : true;
-        return matchesSearch && matchesActivity && matchesLimit && cappingStatus && matchesRewardCurrency;
-      });
-      return filteredValue;
-    },
-    [JSON.stringify(tableFilter), tableRowData],
-  );
-  const tableProps = {
-    key: 'aeTableKey',
-    id: 'aeTableId',
-    dataSource: modifiedTableData,
-    columns: ACP_columns,
-    pagination: false,
-    scroll: {
-      y: isEMFActive !=='0'?440:485,
-    },
-  };
-
-  useEffect(
-    () => {
-      Object.keys(filterToFetch).forEach(filter => {
-        getEntityData(filter);
-      });
-    },
-    [filterToFetch],
-  );
-  return (transactionLimitData.length || acrossCustomerLimitData.length) ? (
-    <>
-    <CapRow className={className}>
-      {tableHeader()}
-      <CapTable
-        className={classNames(className, 'points-budget-table')}
-        {...tableProps}
-      />
-      </CapRow>
-    </>
-  ) : (
-    <CapRow className={classNames(className, 'no-limit-parent')}>
-      <CapImage src={noLimitImage} className="no-limit-image" />
-      <CapHeading type="h4" className="margin-t-5">
-        {formatMessage(messages.noLimitData)}
-      </CapHeading>
-      <CapRow className="no-limit-button-container">
-        <RenderButton noLimit />
-      </CapRow>
-    </CapRow>
-  );
-};
-
-PointsBudgetList.propTypes = {
-  intl: intlShape.isRequired,
-  className: PropTypes.string,
-  type: PropTypes.string,
-  saveCappingConfigInfo: PropTypes.object,
-  transactionLimitData: PropTypes.array,
-  acrossCustomerLimitData: PropTypes.array,
-  filterValue: PropTypes.object,
-  isRewardCurrencyEnabled: PropTypes.bool,
-  rewardCurrencyOptions: PropTypes.array,
-  existingTransactionKPIs: PropTypes.object,
-  setExistingTransactionKPIs: PropTypes.func,
-};
-
-PointsBudgetList.defaultValues = {
-  isRewardCurrencyEnabled: false,
-  rewardCurrencyOptions: [],
-  existingTransactionKPIs: {},
-  setExistingTransactionKPIs: () => {},
-};
-
-const mapStateToProps = createStructuredSelector({
-  activityRewardLimit: makeSelectCappingInfo(),
-  userData: makeSelectCap(),
-  storeData: makeSelectStoresEntityZonesData(),
-  productData: makeSelectProductInfo(),
-  loyaltyPromotionsDetails: makeSelectPromotionsDetail(),
-});
-
-function mapDispatchToProps(dispatch) {
-  return {
-    promoActions: bindActionCreators(promoActions, dispatch),
-  };
-}
-
-const withConnect = connect(
-  mapStateToProps,
-  mapDispatchToProps,
-);
-
-export default compose(
-  withErrorBoundary,
-  withConnect,
-  withRouter,
-)(injectIntl(withStyles(PointsBudgetList, styles)));