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

package/components/organisms/AwardPointsConfig/AwardPointsConfig.js

@@ -0,0 +1,1577 @@
+import React, { useMemo, useEffect, useState, useCallback } from 'react';
+import PropTypes from 'prop-types';
+import { injectIntl, intlShape } from 'react-intl';
+import classnames from 'classnames';
+import withStyles from 'utils/withStyles';
+import isEmpty from 'lodash/isEmpty';
+import CapRow from '@capillarytech/cap-ui-library/CapRow';
+import CapSelect from '@capillarytech/cap-ui-library/CapSelect';
+import CapColumn from '@capillarytech/cap-ui-library/CapColumn';
+import CapHeading from '@capillarytech/cap-ui-library/CapHeading';
+import CapIcon from '@capillarytech/cap-ui-library/CapIcon';
+import CapTooltip from '@capillarytech/cap-ui-library/CapTooltip';
+import CapLink from '@capillarytech/cap-ui-library/CapLink';
+import CapTreeSelect from '@capillarytech/cap-ui-library/CapTreeSelect';
+import CapTooltipWithInfo from '@capillarytech/cap-ui-library/CapTooltipWithInfo';
+
+import CapVirtualSelectInjected from '@capillarytech/cap-ui-library/CapVirtualSelect';
+
+import { createStructuredSelector } from 'reselect';
+import { connect } from 'react-redux';
+import CapCustomSelect from '@capillarytech/cap-ui-library/CapCustomSelect';
+import {
+  getTargetGroupById,
+  getPaginatedTargetGroups,
+} from '../../../services/api';
+import { makeSelectTargetGroups } from '../TargetPointAllocationWorkflowAction/selectors';
+import { truncateWord } from '../CreatePromotionForm/utils';
+import { redirectToMilestone } from '../CreatePromotionForm/utils';
+import createPromotioMessages from '../CreatePromotionForm/messages';
+
+import {
+  CAP_G01,
+  CAP_WHITE,
+  CAP_SPACE_08,
+  CAP_SPACE_12,
+  CAP_SPACE_16,
+  CAP_SPACE_20,
+} from '@capillarytech/cap-ui-library/styled/variables';
+import CapLabel from '@capillarytech/cap-ui-library/CapLabel';
+import CapButton from '@capillarytech/cap-ui-library/CapButton';
+import CapAlert from '@capillarytech/cap-ui-library/CapAlert';
+import withErrorBoundary from 'utils/withErrorBoundary';
+import {
+  ALLOCATION_BASED_ON_MAP,
+  ALLOCATION_TYPE_MAP,
+  EXPIRY_TYPE_MAP,
+  NEWBILL_RS_START,
+  SLAB_INDEPENDENT,
+  BILL_EXTENDED_FIELD,
+  CUSTOMER_EXTENDED_FIELD,
+  USER_GROUP_LIST_VALUE_MAP,
+} from '../../pages/App/constants';
+import {
+  AS_DEFINED_IN_ALLOCATION_STRATEGY,
+  ON_EXTERNAL_TRIGGER,
+  FIXED_DELAY_FROM_TXN_ITEM_EXT_FIELD,
+  FIXED_DELAY_FROM_ITEM_RETURN_PERIOD,
+  DEFINED_TARGET,
+  EVENT_DEFAULT_VALUE,
+  ACCRUAL_DATE_AS_PER_BE_ATTRIBUTE,
+  EVENTS_UI_LINK,
+  TARGET_GROUPS_DROPDOWN,
+} from './constants';
+import { styles } from './style';
+import messages from './messages';
+import allocationStrategyMessages from '../AllocationStrategy/messages';
+import expiryStrategyMessages from '../ExpiryStrategy/messages';
+import globalMessages from '../../pages/Cap/messages';
+import { CapRowWithSpacing, Flex } from '../../pages/Cap/style';
+import {
+  pointsRoundingStrategyList,
+  prorateOnListOptions,
+  promisedToCurrentPointsDateOptionsList,
+  userGroupEntityListOptions,
+  sourceValueRoundingStrategyList,
+  checkQuantityOptionDisable,
+} from '../../../utils/workflow';
+import {
+  formatMessageHandler,
+  getPeriodExpiryValue,
+  getEmptyValueForSelect,
+  getAllocationOn,
+  getAllocationStrategyDetails,
+  getSlabType,
+  validateTitle,
+  billExtendedFieldSupportedEvents,
+} from '../../../utils/commonUtils';
+import AddEarnCondition from '../AddEarnCondition';
+import ExpiryConditions from '../ExpiryConditions';
+import StrategiesTag from '../../molecules/StrategiesTag';
+import {
+  STEP_FUNCTION,
+  TransactionAdd,
+  TargetCompleted,
+} from '../../../../../api/src/constants';
+import {
+  AWARD_POINTS_ACTION,
+  AWARD_TARGET_POINTS_ACTION,
+  BILL_POINTS_ACTION,
+  TRANSACTION_FINISHED_RS_START,
+} from '../ConfigureWorkflows/constants';
+import {
+  CAPPING,
+  DEFAULT,
+  PERIODS,
+  UNIFIED,
+} from '../TargetPointAllocationWorkflowAction/constants';
+import {
+  CURRENT_AGGREGATE,
+  PREVIOUS_AGGREGATE,
+} from '../../../../../api/src/services/common/constants';
+
+import { getWorkflowMode } from '../ConfigureWorkflows/context';
+const CapVirtualSelectTargetGruopsDropdown = CapVirtualSelectInjected(
+  TARGET_GROUPS_DROPDOWN,
+);
+export const AwardPointsConfig = ({
+  actionType = '',
+  className,
+  intl: { formatMessage },
+  pointsAllocation = [],
+  pointsExpiry = [],
+  pointsRedemption = [],
+  extendedFieldsList = [],
+  trackersList = [],
+  redeemptionStrategy = '',
+  promisedPointsToCurrentPointsDate = '',
+  expiryStrategy = '',
+  trackerStrategy,
+  awardStrategy = '',
+  proRateOnSourceValue = '',
+  zeroAwardStrategy = '',
+  pointsRoundingStrategy = '',
+  delayStrategy = '',
+  delayStrategyExtendedField = '',
+  userGroupEntity,
+  ProrateOnField = '',
+  handleDelayStrategy = () => {},
+  handleProrateOnChange = () => {},
+  handleEarnConditionChange = () => {},
+  handlePromisedPointsToCurrentPointsDate = () => {},
+  handleExpiryConditionChange = () => {},
+  handleZeroEarnConditionChange = () => {},
+  handleDelayStrategyExtendedField = () => {},
+  handlePointsRoundingStrategy = () => {},
+  handlePointsRedemptionStrategy = () => {},
+  handleTrackersStrategy = () => {},
+  handleUserGroupEntityChange = () => {},
+  showZeroAllocation = false,
+  showPointsRounding = false,
+  showDelayStrategy = false,
+  showProrateOn = false,
+  showPointsAllocation = false,
+  showAddAllocation = false,
+  showAddExpiry = false,
+  showPointsExpiry = false,
+  showRedemptionStrategy = false,
+  showPromisedPointsToCurrentPointsDate = false,
+  showTrackers = false,
+  showUserGroup = false,
+  currentProgram = {},
+  refreshStrategyData = () => {},
+  pointTypeIdData = {},
+  eventType = '',
+  targetGroupId,
+  targetGroupName,
+  handleTargetGroupsChange = () => {},
+  showTargetGroups = false,
+  targetGroups = [],
+  targetName,
+  handleTargetNameChange = () => {},
+  showTargetNames = false,
+  transactionTargets = [],
+  isTPA = false,
+  isGenericEvent = false,
+  eventsList = [],
+  showSourceValueRounding = false,
+  sourceValueRoundingStrategy = '',
+  handleSourceValueRoundingStrategy = () => {},
+  areProrateOnOptionsDisabled = false,
+  billType,
+  enableQuantityOptions = false,
+  source,
+  isLineItemLevel,
+  hasQuantityOptionPresent,
+  selectedStrategy,
+  showEarnConditionInfo = false,
+  areProrateOnDropdownDisabled = false,
+  streakName,
+  handleStreakNameChange,
+  showStreakName,
+  targetGroupData: {
+    targetGroupsWithTargets = {},
+    isMultiselectTargetGroup = false,
+  } = {},
+}) => {
+  const { isPreviewMode } = getWorkflowMode() ?? { isPreviewMode: false };
+
+  const [allocationSlideboxVisible, setAllocationSlideboxVisible] = useState(
+    false,
+  );
+
+  const [expirySlideboxVisible, setExpirySlideboxVisible] = useState(false);
+  const [isNumericProrateOn, setIsNumericProrateOn] = useState(false);
+  const handleAllocationSlideboxVisibleChange = () =>
+    setAllocationSlideboxVisible(!allocationSlideboxVisible);
+  const handleExpirySlideboxVisibleChange = () =>
+    setExpirySlideboxVisible(!expirySlideboxVisible);
+  const redeemConditionListOptions = useMemo(
+    () =>
+      pointsRedemption.map(({ name, id }) => ({
+        label: name,
+        value: id,
+        key: `${id}_redemption`,
+      })),
+    [JSON.stringify(pointsRedemption)],
+  );
+  const targetGroupsCount = Object.keys(targetGroupsWithTargets).length;
+  const milistoneOptinTooltipTitle = targetGroup => (
+    <CapRow className={className}>
+      <CapRow className="multiselect-tooltip-container">
+        <CapLabel type="label32" className="multiselect-tooltip-header">
+          {targetGroup?.name}
+        </CapLabel>
+        <CapLabel type="label6" className="multiselect-tooltip-margin">
+          {formatMessage(globalMessages.description)}
+          <span className="multiselect-tooltip-color">
+            {targetGroup?.description}
+          </span>
+        </CapLabel>
+        <CapLabel type="label6" className="multiselect-tooltip-margin">
+          {formatMessage(globalMessages.status)}
+          <span className="multiselect-tooltip-color">
+            {targetGroup?.active
+              ? formatMessage(globalMessages.active)
+              : formatMessage(globalMessages.inactive)}
+          </span>
+        </CapLabel>
+        <CapLabel type="label6" className="multiselect-tooltip-margin">
+          {formatMessage(globalMessages.type)}
+          <span className="multiselect-tooltip-color">
+            {[DEFAULT, UNIFIED].includes(targetGroup?.trackingType)
+              ? formatMessage(globalMessages.milestoneCapital)
+              : formatMessage(globalMessages.streakCapital)}
+          </span>
+        </CapLabel>
+      </CapRow>
+    </CapRow>
+  );
+  const milestoneOptionRow = targetGroup => (
+    <CapRow type="flex" justify="space-between" key={targetGroup?.id}>
+      <CapLabel type="label15">
+        {truncateWord(targetGroup?.name, 35)}
+        <CapLabel type="label3" className="multiselect-sub-option">
+          {[DEFAULT, UNIFIED].includes(targetGroup?.trackingType)
+            ? formatMessage(globalMessages.milestoneCapital)
+            : formatMessage(globalMessages.streakCapital)}
+        </CapLabel>
+      </CapLabel>
+
+      <CapTooltipWithInfo
+        title={milistoneOptinTooltipTitle(targetGroup)}
+        className="promotion-milestone-info"
+        placement="right"
+      />
+    </CapRow>
+  );
+  const targetGroupsOptions = useMemo(
+    () =>
+      targetGroups.map(targetGroup => ({
+        label: milestoneOptionRow(targetGroup),
+        value: targetGroup?.name,
+        key: `${targetGroup?.id}_targetGroup`,
+      })),
+    [JSON.stringify(targetGroups)],
+  );
+
+  const targetNamesOptions = useMemo(
+    () =>
+      transactionTargets.map(({ name, id }) => ({
+        label: name,
+        value: name,
+        key: `${id}_transactionTargets`,
+      })),
+    [JSON.stringify(transactionTargets)],
+  );
+
+  const streaksLevelOptions = useMemo(
+    () => {
+      if (showStreakName) {
+        return [
+          {
+            value: PERIODS,
+            title: (
+              <CapRow>
+                <CapRow className="points-option-label">
+                  {formatMessage(messages.periodsOrCycle)}
+                </CapRow>
+                <CapTooltip
+                  overlayStyle={{ maxWidth: '416px' }}
+                  title={formatMessage(messages.periodsOrCycleTooltip)}
+                >
+                  <CapIcon
+                    type="info"
+                    size="s"
+                    className="points-option-icon"
+                  />
+                </CapTooltip>
+              </CapRow>
+            ),
+          },
+          {
+            value: 'STREAKS_LEVEL',
+            selectable: false,
+            title: (
+              <CapRow>
+                <CapRow className="points-option-label">
+                  {formatMessage(messages.streaksLevel)}
+                </CapRow>
+                <CapTooltip
+                  overlayStyle={{ maxWidth: '416px' }}
+                  title={formatMessage(messages.streaksLevelTooltip)}
+                >
+                  <CapIcon
+                    type="info"
+                    size="s"
+                    className="points-option-icon"
+                  />
+                </CapTooltip>
+              </CapRow>
+            ),
+            children: targetGroups
+              .filter(({ id }) => id == targetGroupId)?.[0]
+              ?.streaks?.map(({ name, id }) => ({
+                title: name,
+                value: name,
+                key: `${id}_transactionTargets`,
+              })),
+          },
+        ];
+      }
+      return [];
+    },
+    [JSON.stringify(transactionTargets), JSON.stringify(targetGroups)],
+  );
+
+  const eventTypeBasedPointsExpiry = useMemo(
+    () =>
+      pointsExpiry.filter(data => {
+        const { expiry_from = '' } = data.propertyValues;
+
+        // Check for user group restrictions first
+        if (userGroupEntity === USER_GROUP_LIST_VALUE_MAP.USER_GROUP) {
+          if (billExtendedFieldSupportedEvents.includes(eventType)) {
+            // For specific supported events, filter out customer extended fields
+            return expiry_from !== CUSTOMER_EXTENDED_FIELD;
+          }
+          // For other events, filter out both bill and customer extended fields
+          return (
+            expiry_from !== BILL_EXTENDED_FIELD &&
+            expiry_from !== CUSTOMER_EXTENDED_FIELD
+          );
+        }
+
+        // For other user groups or when no specific user group logic is needed
+        if (!billExtendedFieldSupportedEvents.includes(eventType)) {
+          // Exclude bill extended fields for non-supported events
+          return expiry_from !== BILL_EXTENDED_FIELD;
+        }
+
+        // Include all remaining data
+        return true;
+      }),
+    [pointsExpiry, eventType, userGroupEntity],
+  );
+
+  useEffect(() => {
+    if (
+      showRedemptionStrategy &&
+      isEmpty(redeemptionStrategy) &&
+      typeof redeemptionStrategy !== 'number'
+    ) {
+      handlePointsRedemptionStrategy(redeemConditionListOptions[0].value);
+    }
+    if (isEmpty(pointsRoundingStrategy)) handlePointsRoundingStrategy('ACTUAL');
+    if (isEmpty(sourceValueRoundingStrategy))
+      handleSourceValueRoundingStrategy('ACTUAL');
+    if (isEmpty(delayStrategy))
+      handleDelayStrategy(AS_DEFINED_IN_ALLOCATION_STRATEGY);
+    if (
+      showPromisedPointsToCurrentPointsDate &&
+      isEmpty(promisedPointsToCurrentPointsDate)
+    ) {
+      const optionList = promisedToCurrentPointsDateOptionsList(formatMessage);
+      handlePromisedPointsToCurrentPointsDate(optionList[0]?.value);
+    }
+  }, []);
+  useEffect(
+    () => {
+      if (isEmpty(proRateOnSourceValue))
+        isTPA
+          ? !areProrateOnDropdownDisabled &&
+            handleProrateOnChange(DEFINED_TARGET)
+          : isGenericEvent
+            ? !isNumericProrateOn
+              ? handleProrateOnChange('No Value Available')
+              : handleProrateOnChange('')
+            : handleProrateOnChange(EVENT_DEFAULT_VALUE);
+      else if (isGenericEvent && !isEmpty(proRateOnSourceValue))
+        handleProrateOnChange(ProrateOnField);
+    },
+    [isNumericProrateOn, areProrateOnDropdownDisabled, isTPA],
+  );
+
+  const mappingEarnConditionsListOptions = ({ name, id }) => ({
+    label: name,
+    value: id,
+    key: `${id}_allocation`,
+  });
+  const checkStepFunctionAllocationtype = () => {
+    let points = pointsAllocation;
+    const eventsToFilter = [TransactionAdd, TargetCompleted];
+    const actionTypeToFilter = [
+      BILL_POINTS_ACTION,
+      AWARD_POINTS_ACTION,
+      AWARD_TARGET_POINTS_ACTION,
+    ];
+    if (
+      !eventsToFilter.includes(eventType) ||
+      (eventsToFilter.includes(eventType) &&
+        !actionTypeToFilter.includes(actionType))
+    ) {
+      points = pointsAllocation.filter(
+        condition =>
+          !condition?.propertyValues?.allocation_type.includes(STEP_FUNCTION),
+      );
+    }
+    return points;
+  };
+
+  const delayAttributeNameOptions = useMemo(
+    () =>
+      eventsList
+        .find(event => event?.clickEventsMeta?.eventName === eventType)
+        ?.clickEventsMeta?.fields?.filter(field => field?.type === 'DATE')
+        ?.map(field => ({
+          label: field?.name,
+          value: field?.name,
+          key: `${field?.name}_delayAttributeName`,
+        })) || [],
+    [eventsList],
+  );
+
+  const earnConditionListOptions = useMemo(
+    () => {
+      const filteredPointsAllocation = checkStepFunctionAllocationtype();
+      const isNumericProrateOnDouble =
+        eventsList
+          ?.find(event => event?.clickEventsMeta?.eventName === eventType)
+          ?.clickEventsMeta?.fields?.filter(field => field?.type === 'DOUBLE')
+          .length > 0;
+      if (isNumericProrateOnDouble !== isNumericProrateOn)
+        setIsNumericProrateOn(isNumericProrateOnDouble);
+
+      return isGenericEvent && !isNumericProrateOn
+        ? filteredPointsAllocation
+            ?.filter(condition =>
+              condition?.propertyValues?.allocation_type.includes('FIXED'),
+            )
+            ?.map(mappingEarnConditionsListOptions)
+        : filteredPointsAllocation.map(mappingEarnConditionsListOptions);
+    },
+    [JSON.stringify(pointsAllocation), isNumericProrateOn, eventsList],
+  );
+
+  const userGroupEntityList = userGroupEntityListOptions(formatMessage);
+
+  const trackerStrategyListOption = useMemo(
+    () =>
+      trackersList.map(({ name, id }) => ({
+        label: name,
+        value: id,
+        key: `${id}_trackers`,
+      })),
+    [JSON.stringify(trackersList)],
+  );
+  const expiryConditionListOptions = useMemo(
+    () =>
+      eventTypeBasedPointsExpiry.map(({ name, id }) => ({
+        label: name,
+        value: id,
+        key: `${id}_expiry`,
+      })),
+    [JSON.stringify(eventTypeBasedPointsExpiry)],
+  );
+
+  const delayStrategyOptionsList = useMemo(
+    () => {
+      const strategiesList = {
+        [AS_DEFINED_IN_ALLOCATION_STRATEGY]: formatMessage(
+          messages.asDefinedInAllocationStrategy,
+        ),
+      };
+      if (
+        eventType === 'TransactionUpdate' ||
+        eventType === 'GroupTransactionUpdate'
+      ) {
+        strategiesList[FIXED_DELAY_FROM_ITEM_RETURN_PERIOD] = formatMessage(
+          messages.fixedDelayDaysFromItemReturnPeriod,
+        );
+      } else if (
+        eventType === 'TransactionAdd' ||
+        eventType === 'GroupTransactionAdd'
+      ) {
+        strategiesList[FIXED_DELAY_FROM_ITEM_RETURN_PERIOD] = formatMessage(
+          messages.fixedDelayDaysFromItemReturnPeriod,
+        );
+        strategiesList[FIXED_DELAY_FROM_TXN_ITEM_EXT_FIELD] = formatMessage(
+          messages.fixedDelayDaysFromTransactionItemExtendedField,
+        );
+        strategiesList[ON_EXTERNAL_TRIGGER] = formatMessage(
+          messages.onExternalTrigger,
+        );
+      } else if (isGenericEvent && isNumericProrateOn) {
+        strategiesList[ACCRUAL_DATE_AS_PER_BE_ATTRIBUTE] = formatMessage(
+          messages.fixedDelayDaysFromCheckinAttribute,
+          { name: eventType },
+        );
+      }
+      return Object.keys(strategiesList || {}).map(strategy => ({
+        label: strategiesList[strategy],
+        value: strategy,
+        key: `${strategy}_delayStrategy`,
+      }));
+    },
+    [eventType, isNumericProrateOn],
+  );
+
+  const styleHeadingH4 = {
+    padding: `${CAP_SPACE_20} ${CAP_SPACE_08} ${CAP_SPACE_08} ${CAP_SPACE_16}`,
+    backgroundColor: `${CAP_G01}`,
+    color: `${CAP_WHITE}`,
+  };
+
+  const styleLabel = {
+    padding: `0 ${CAP_SPACE_08} ${CAP_SPACE_12} ${CAP_SPACE_16}`,
+    backgroundColor: `${CAP_G01}`,
+    color: `${CAP_WHITE}`,
+  };
+  const getAllocationStrategyInfo = allocStrategy => {
+    const {
+      name = '',
+      description = '',
+      propertyValues: {
+        allocation_type,
+        allocation_values,
+        custom_field_scope,
+        custom_field_name,
+        min_allocation_criteria,
+        max_allocation_criteria,
+      } = {},
+    } = allocStrategy || {};
+    return (
+      <CapRow style={{ width: '272px' }}>
+        <CapHeading style={styleHeadingH4} type="h4">
+          {name}
+        </CapHeading>
+        <CapLabel type="label2" style={styleLabel}>
+          {description}
+        </CapLabel>
+        <CapHeading type="h4" style={styleHeadingH4}>
+          {formatMessage(globalMessages.allocateBasedOn)}
+        </CapHeading>
+        <CapLabel type="label2" style={styleLabel}>
+          {formatMessageHandler(
+            formatMessage,
+            allocationStrategyMessages[
+              ALLOCATION_BASED_ON_MAP[allocation_type]
+            ],
+            allocation_type,
+          )}
+        </CapLabel>
+        <CapHeading type="h4" style={styleHeadingH4}>
+          {formatMessage(messages.allocationType)}
+        </CapHeading>
+        <CapLabel type="label2" style={styleLabel}>
+          {formatMessageHandler(
+            formatMessage,
+            allocationStrategyMessages[ALLOCATION_TYPE_MAP[allocation_type]],
+            allocation_type,
+          )}
+        </CapLabel>
+        <CapHeading type="h4" style={styleHeadingH4}>
+          {formatMessage(globalMessages.details)}
+        </CapHeading>
+        <CapRow>
+          <CapLabel type="label2" style={styleLabel}>
+            {getAllocationStrategyDetails(
+              {
+                details: {
+                  slabType: getSlabType(allocation_type),
+                  allocationOn: getAllocationOn(allocation_type),
+                  allocationType: allocation_type,
+                  allocationValues: allocation_values,
+                  minAllocationCriteria: min_allocation_criteria,
+                  maxAllocationCriteria: max_allocation_criteria,
+                  customFieldName: custom_field_name,
+                  customFieldScope: custom_field_scope,
+                  slabs: currentProgram.slabs,
+                },
+                formatMessage,
+                showWhiteText: true,
+              },
+              true,
+            )}
+          </CapLabel>
+        </CapRow>
+      </CapRow>
+    );
+  };
+
+  const getExpirySlabDetail = (slabs, pointsExpiryObj, expiryTimeValuesArr) =>
+    (slabs || []).map((slab, index) => ({
+      ...slab,
+      name: `${slab.name} - ${pointsExpiryObj[index]?.prefix} ${
+        !isEmpty(pointsExpiryObj[index]?.suffix)
+          ? expiryTimeValuesArr[index]
+          : ''
+      } ${pointsExpiryObj[index]?.suffix}`,
+    }));
+
+  const handleInfoByBillType = isCurrentAggregate => {
+    if (billType === NEWBILL_RS_START) {
+      return isCurrentAggregate
+        ? formatMessage(messages.newBillCurrentAggregateInfo)
+        : formatMessage(messages.newBillPrevAggregateInfo);
+    } else if (billType === TRANSACTION_FINISHED_RS_START) {
+      return isCurrentAggregate
+        ? formatMessage(messages.endBillCurrentAggregateInfo)
+        : formatMessage(messages.endBillPrevAggregateInfo);
+    }
+    return '';
+  };
+
+  const getTargetsDescription = () => ({
+    [`${UNIFIED}_transactionTargets`]: {
+      title: formatMessage(messages.unifiedTargetInfo),
+    },
+  });
+
+  const getDelayAttributeDescription = () => {
+    const returnValue = {
+      AS_DEFINED_IN_ALLOCATION_STRATEGY: {
+        title: isNumericProrateOn
+          ? formatMessage(messages.allocationStrategyDelayInfo)
+          : formatMessage(messages.allocationStrategyInfo),
+      },
+      ACCRUAL_DATE_AS_PER_BE_ATTRIBUTE: {
+        title: formatMessage(messages.accuralDateDelayInfo),
+      },
+      FIXED_DELAY_FROM_ITEM_RETURN_PERIOD: {
+        title: formatMessage(messages.fixedDelayDaysFromItemReturnPeriodInfo),
+        desc: formatMessage(messages.fixedDelayDaysFromItemReturnPeriodDesc),
+      },
+      FIXED_DELAY_FROM_TXN_ITEM_EXT_FIELD: {
+        title: formatMessage(
+          messages.fixedDelayDaysFromTransactionItemExtendedFieldInfo,
+        ),
+      },
+      ON_EXTERNAL_TRIGGER: {
+        title: formatMessage(messages.onExternalTriggerDelayInfo),
+        desc: formatMessage(messages.onExternalTriggerDelayDesc),
+      },
+    };
+    return returnValue;
+  };
+
+  const getProrateInfoDescription = value => {
+    const returnValue = {
+      EVENT_DEFAULT_VALUE: {
+        title: areProrateOnOptionsDisabled
+          ? formatMessage(messages.eventDefaultInfo)
+          : formatMessage(messages.eventDefaultTrackerSetInfo),
+      },
+      QUANTITY: {
+        title: checkQuantityOptionDisable(
+          areProrateOnOptionsDisabled,
+          enableQuantityOptions,
+          formatMessage,
+          source,
+          isLineItemLevel,
+          eventType,
+        ).message,
+      },
+      CURRENT_AGGREGATE: {
+        title: !areProrateOnOptionsDisabled
+          ? formatMessage(messages.currentAggregateInfo)
+          : handleInfoByBillType(true),
+        desc:
+          areProrateOnOptionsDisabled &&
+          proRateOnSourceValue === CURRENT_AGGREGATE
+            ? formatMessage(messages.aggregateInfoDesc)
+            : '',
+      },
+      PREVIOUS_AGGREGATE: {
+        title: !areProrateOnOptionsDisabled
+          ? formatMessage(messages.previousAggregateInfo)
+          : handleInfoByBillType(false),
+        desc:
+          areProrateOnOptionsDisabled &&
+          proRateOnSourceValue === PREVIOUS_AGGREGATE
+            ? formatMessage(messages.aggregateInfoDesc)
+            : '',
+      },
+    };
+    return returnValue;
+  };
+
+  const getExpiryStrategyDetails = (
+    { expiry_type, expiry_time_units, expiry_time_values },
+    forTooltip,
+  ) => {
+    const expiryTimeUnitsArr = expiry_time_units.split(',');
+    const expiryTimeValuesArr = expiry_time_values.split(',');
+    let pointsExpiryObj = [];
+    if (expiry_type === SLAB_INDEPENDENT) {
+      pointsExpiryObj[0] = getPeriodExpiryValue({
+        unit: expiryTimeUnitsArr[0],
+        formatMessage,
+      });
+      const expiryText = `${formatMessage(globalMessages.allTiers)} - ${
+        pointsExpiryObj[0]?.prefix
+      } ${!isEmpty(pointsExpiryObj[0]?.suffix) ? expiryTimeValuesArr[0] : ''} ${
+        pointsExpiryObj[0]?.suffix
+      }`;
+      return forTooltip ? <StrategiesTag text={expiryText} /> : expiryText;
+    } else {
+      (currentProgram.slabs || []).map((slab, index) => {
+        pointsExpiryObj[index] = getPeriodExpiryValue({
+          unit: expiryTimeUnitsArr[index],
+          formatMessage,
+        });
+      });
+      return forTooltip ? (
+        <StrategiesTag
+          slabs={getExpirySlabDetail(
+            currentProgram?.slabs,
+            pointsExpiryObj,
+            expiryTimeValuesArr,
+          )}
+        />
+      ) : (
+        (currentProgram.slabs || []).map(
+          ({ name }, index) =>
+            `${name} - ${pointsExpiryObj[index]?.prefix} ${
+              !isEmpty(pointsExpiryObj[index]?.suffix)
+                ? expiryTimeValuesArr[index]
+                : ''
+            } ${pointsExpiryObj[index]?.suffix} | ${' '}`,
+        )
+      );
+    }
+  };
+  const getExpiryStrategyInfo = expiryStrategy => {
+    const {
+      name = '',
+      description = '',
+      propertyValues: {
+        expiry_from = '',
+        expiry_time_units = '',
+        expiry_time_values = '',
+        expiry_type = '',
+        extended_field_name = '',
+      } = {},
+    } = expiryStrategy || {};
+    const expiryFromDisplayValue = `${formatMessageHandler(
+      formatMessage,
+      globalMessages[EXPIRY_TYPE_MAP[expiry_from]],
+      expiry_from,
+    )}${extended_field_name ? `: ${extended_field_name}` : ''}`;
+
+    return (
+      <CapRow style={{ width: '272px' }}>
+        <CapHeading style={styleHeadingH4} type="h4">
+          {name}
+        </CapHeading>
+        <CapLabel type="label2" style={styleLabel}>
+          {description}
+        </CapLabel>
+        <CapHeading type="h4" style={styleHeadingH4}>
+          {formatMessage(expiryStrategyMessages?.type)}
+        </CapHeading>
+        <CapLabel type="label2" style={styleLabel}>
+          {expiryFromDisplayValue}
+        </CapLabel>
+        <CapHeading type="h4" style={styleHeadingH4}>
+          {formatMessage(globalMessages.details)}
+        </CapHeading>
+        <CapLabel type="label2" style={styleLabel}>
+          {getExpiryStrategyDetails(
+            {
+              expiry_type,
+              expiry_time_units,
+              expiry_time_values,
+            },
+            true,
+          )}
+        </CapLabel>
+      </CapRow>
+    );
+  };
+  const getInfoDescription = (showInfoType, selectedStrategy) => {
+    switch (showInfoType) {
+      case 'ALLOCATION':
+        return getAllocationStrategyInfo(selectedStrategy);
+      case 'EXPIRY':
+        return getExpiryStrategyInfo(selectedStrategy);
+      default:
+        break;
+    }
+  };
+
+  const openEventUI = () => window.open(EVENTS_UI_LINK, '_blank', 'noreferrer');
+
+  const getNotFoundBEAttributeContent = () => (
+    <CapRow className="not-found-be-attribute-container">
+      <CapRow className="notFound-attribute-icon">
+        <CapIcon type="warning" size="m" />
+      </CapRow>
+      <CapRow className="notFound-attribute-text">
+        {formatMessage(messages.notFoundBEMessage)}
+      </CapRow>
+      <CapRow className="notFound-attribute-link">
+        <CapLink
+          title={
+            <CapRow
+              type="flex"
+              align="middle"
+              className="tooltip-link-redirect"
+            >
+              <CapLabel type="label27">
+                {formatMessage(messages.createAttribute)}
+              </CapLabel>
+              <CapIcon
+                type="open-in-new-light"
+                className="tooltip-redirect-icon"
+                size="xs"
+              />
+            </CapRow>
+          }
+          onClick={openEventUI}
+        />
+      </CapRow>
+    </CapRow>
+  );
+
+  const renderVirtualOptionRow = useCallback(
+    targetGroup => milestoneOptionRow(targetGroup),
+    [],
+  );
+  const renderSelectedOption = useCallback(
+    targetGroup =>
+      (targetGroup?.name && milestoneOptionRow(targetGroup)) ||
+      formatMessage(messages.selectMilestone),
+    [],
+  );
+
+  const emptyPlaceholder = useCallback(
+    () => (
+      <CapRow className="no-result-container">
+        <CapHeading type="h4">
+          {formatMessage(createPromotioMessages.noMilestoneStrteaks)}
+        </CapHeading>
+        <CapLabel type="label6" className="multiselect-no-result">
+          {formatMessage(createPromotioMessages.toCreateMilestone)}
+          <CapLink
+            id="milestone-link"
+            className="lp-link-config-workflows-open-promo"
+            title={
+              <CapLabel type="label27" className="multiselect-link-margin">
+                {formatMessage(createPromotioMessages.milestonesLink)}
+              </CapLabel>
+            }
+            onClick={redirectToMilestone}
+            fontWeight="m"
+          />
+        </CapLabel>
+      </CapRow>
+    ),
+    [],
+  );
+
+  const emptySearchPlaceholder = useCallback(
+    () => (
+      <CapRow
+        className="cap-virtual-select-no-options"
+        data-testid="cap-virtual-select-no-options"
+      >
+        <CapIcon className="cap-virtual-select-no-options-image" type="alert" />
+        <CapRow className="cap-virtual-select-no-options-text">
+          {formatMessage(globalMessages.noResultsFound)}
+        </CapRow>
+      </CapRow>
+    ),
+    [],
+  );
+
+  // Function to return props for CapVirtualSelectTargetGruopsDropdown
+  const getCapVirtualSelectTargetGroupsDropdownProps = ({
+    targetGroupId,
+    handleTargetGroupsChange,
+    renderVirtualOptionRow,
+    isPreviewMode,
+    targetGroupsCount,
+  }) => {
+    return {
+      namespace: TARGET_GROUPS_DROPDOWN,
+      listingApiConfig: {
+        method: getPaginatedTargetGroups,
+        rpmLimit: 100,
+        payloadPath: {
+          successStatus: 'success',
+          success: 'response.targetGroups',
+          error: 'status.message',
+          value: 'id',
+          label: 'name',
+          totalCount: 'response.pagination.total',
+        },
+        apiParamsMapper: {
+          page: { key: 'offset', value: 0 },
+          limit: { key: 'limit', value: 10 },
+          search: { key: 'name', value: null },
+        },
+      },
+      getByIdApiConfig: {
+        method: getTargetGroupById,
+        rpmLimit: 100,
+        payloadPath: {
+          successStatus: 'success',
+          success: 'response.targetGroup.data',
+          error: 'status.message',
+          value: 'name',
+        },
+        apiParamsMapper: {
+          includePeriods: { key: 'includePeriods', value: false },
+        },
+      },
+      selectedOption: targetGroupId,
+      onOptionClick: selectedOptionNode => {
+        handleTargetGroupsChange(selectedOptionNode?.name);
+      },
+      renderOptionRow: renderVirtualOptionRow,
+      renderSelectedOptionRow: renderSelectedOption,
+      transformOptions: options =>
+        options?.filter(option => option?.trackingType !== CAPPING),
+      disabled: isPreviewMode,
+      isSearchable: true,
+      searchDebounceTime: 800,
+      width: '100%',
+      EmptySearchPlaceholder: emptySearchPlaceholder,
+      ...(targetGroupsCount === 0 && {
+        EmptyPlaceholder: emptyPlaceholder,
+      }),
+    };
+  };
+  const dropdownProps = useMemo(
+    () => {
+      return getCapVirtualSelectTargetGroupsDropdownProps({
+        targetGroupId,
+        handleTargetGroupsChange,
+        renderVirtualOptionRow,
+        isPreviewMode,
+        targetGroupsCount,
+      });
+    },
+    [
+      targetGroupId,
+      handleTargetGroupsChange,
+      renderVirtualOptionRow,
+      isPreviewMode,
+      targetGroupsCount,
+    ],
+  );
+  const GetSelectComponent = ({
+    title = {},
+    placeholder = {},
+    options = [],
+    value = undefined,
+    onChangeFunc = () => {},
+    showInfo = false,
+    strategyInfoList = [],
+    showInfoType = '',
+    infoDescription = {},
+    showError = false,
+    disabled = false,
+    isProrateOn = false,
+    isGenericBEAttribute = false,
+    isDelayAttribute = false,
+    isDelayStrategy = false,
+    isStreaksLevel = false,
+    isTargetGroups = false,
+  }) => (
+    <CapRow
+      className={classnames(className, {
+        'show-error': showError,
+      })}
+    >
+      <CapColumn span={6}>
+        <CapHeading type="h4" className="select-component-title">
+          {formatMessage(title)}
+        </CapHeading>
+      </CapColumn>
+      <CapColumn className="relative" span={8}>
+        {isStreaksLevel && (
+          <CapTreeSelect
+            className="streaks-level-tree"
+            dropdownClassName={classnames(className, 'streaks-level-dropdown')}
+            value={value}
+            size="large"
+            treeNodeLabelProp="title"
+            dropdownMatchSelectWidth
+            style={{ width: '100%' }}
+            treeData={options}
+            onChange={handleStreakNameChange}
+            placeholder={formatMessage(messages.selectStreaksLevel)}
+            getPopupContainer={triggerNode => triggerNode.parentNode}
+          />
+        )}
+        {showInfo &&
+          !isStreaksLevel && (
+            <>
+              <CapSelect
+                placeholder={formatMessage(placeholder)}
+                style={{ width: '100%' }}
+                defaultValue={getEmptyValueForSelect(value)}
+                onChange={onChangeFunc}
+                size="large"
+                optionLabelProp="displayLabel"
+                options={options.map(({ value, label, disabled, key = '' }) => {
+                  const selectedStrategy = strategyInfoList.find(
+                    strategy => strategy.id === value,
+                  );
+                  return {
+                    label: (
+                      <CapRow>
+                        <CapColumn span={21}>
+                          <CapHeading
+                            type="h5"
+                            className={classnames('truncate-text', {
+                              'element-disabled': disabled,
+                            })}
+                            title={validateTitle(label)}
+                          >
+                            {label}
+                          </CapHeading>
+                        </CapColumn>
+                        {isTPA &&
+                          infoDescription[key]?.title && (
+                            <CapColumn span={2} offset={1}>
+                              <CapTooltip
+                                title={
+                                  <CapRow>{infoDescription[key]?.title}</CapRow>
+                                }
+                              >
+                                <CapIcon type="info" size="s" />
+                              </CapTooltip>
+                            </CapColumn>
+                          )}
+                        {!isTPA &&
+                          !isGenericBEAttribute && (
+                            <CapColumn span={2} offset={1}>
+                              <CapTooltip
+                                title={
+                                  <CapRow>
+                                    {getInfoDescription(
+                                      showInfoType,
+                                      selectedStrategy,
+                                    ) || infoDescription[value]?.title}
+                                    {infoDescription[value]?.desc && (
+                                      <div className="font-sm font-weight-regular">
+                                        {infoDescription[value]?.desc}
+                                      </div>
+                                    )}
+                                  </CapRow>
+                                }
+                                placement={isDelayStrategy ? 'right' : 'bottom'}
+                              >
+                                <CapIcon type="info" size="s" />
+                              </CapTooltip>
+                            </CapColumn>
+                          )}
+                      </CapRow>
+                    ),
+                    value: value,
+                    key: `${value}`,
+                    displayLabel: label,
+                    disabled,
+                  };
+                })}
+                dropdownClassName={
+                  isGenericBEAttribute &&
+                  isEmpty(options) &&
+                  'get-select-content-dropdown'
+                }
+                getPopupContainer={trigger => trigger.parentElement}
+                disabled={isPreviewMode || disabled}
+                notFoundContent={
+                  isGenericBEAttribute &&
+                  isEmpty(options) &&
+                  getNotFoundBEAttributeContent()
+                }
+              />
+              {isNumericProrateOn &&
+                isGenericBEAttribute && (
+                  <CapTooltip
+                    title={
+                      isDelayAttribute
+                        ? formatMessage(messages.delayAttributeTooltip)
+                        : formatMessage(messages.prorateOnBehaviouralTooltip)
+                    }
+                  >
+                    <CapIcon
+                      type="info"
+                      size="s"
+                      className="promised-points-icon"
+                    />
+                  </CapTooltip>
+                )}
+            </>
+          )}
+        {!showInfo &&
+          !isStreaksLevel && (
+            <CapSelect
+              placeholder={formatMessage(placeholder)}
+              options={options}
+              style={{ width: '100%' }}
+              defaultValue={value}
+              onChange={onChangeFunc}
+              disabled={isPreviewMode}
+              showSearch={isTargetGroups}
+            />
+          )}
+        {areProrateOnDropdownDisabled &&
+          !isPreviewMode &&
+          isProrateOn && (
+            <CapTooltip
+              getPopupContainer={() =>
+                document.querySelector('.prorate-on-tooltip')
+              }
+              title={
+                targetGroupId && targetName
+                  ? formatMessage(messages.prorateOnDisabledTooltip)
+                  : formatMessage(messages.selectMilestoneTooltip)
+              }
+            >
+              <CapRow className="prorate-on-tooltip" />
+            </CapTooltip>
+          )}
+      </CapColumn>
+      {showAddAllocation &&
+        showInfoType === 'ALLOCATION' && (
+          <CapColumn span={6} offset={1}>
+            <CapButton
+              isAddBtn
+              type="flat"
+              onClick={handleAllocationSlideboxVisibleChange}
+              disabled={isPreviewMode}
+            >
+              {formatMessage(globalMessages.addCondition)}
+            </CapButton>
+          </CapColumn>
+        )}
+      {showAddExpiry &&
+        showInfoType === 'EXPIRY' && (
+          <CapColumn span={6} offset={1}>
+            <CapButton
+              isAddBtn
+              type="flat"
+              onClick={handleExpirySlideboxVisibleChange}
+              disabled={isPreviewMode}
+            >
+              {formatMessage(globalMessages.addCondition)}
+            </CapButton>
+          </CapColumn>
+        )}
+    </CapRow>
+  );
+  return (
+    <CapRowWithSpacing className={className} data-testid="awards-config-comp">
+      {showUserGroup && (
+        <GetSelectComponent
+          title={globalMessages.userGroupEntity}
+          placeholder={globalMessages.selectUserGroupEntity}
+          options={userGroupEntityList}
+          value={userGroupEntity}
+          onChangeFunc={handleUserGroupEntityChange}
+        />
+      )}
+      {showPointsAllocation && (
+        <>
+          {showEarnConditionInfo && (
+            <CapAlert
+              message={
+                <Flex align={true}>
+                  <CapIcon type="info" size="s" className="alert-icon" />
+                  <CapRow className="award-points-info-message">
+                    {formatMessage(messages.earnConditionInfoMessage)}
+                  </CapRow>
+                </Flex>
+              }
+              className="award-points-info-message-container"
+            />
+          )}
+          <GetSelectComponent
+            title={messages.earnCondition}
+            placeholder={messages.selecteAllocationStrategy}
+            options={earnConditionListOptions}
+            value={awardStrategy}
+            onChangeFunc={handleEarnConditionChange}
+            showInfo
+            showInfoType="ALLOCATION"
+            strategyInfoList={pointsAllocation}
+            showAddAllocation
+            showError={!!selectedStrategy}
+          />
+          {!!selectedStrategy ? (
+            <CapRow className="award-points-error-message">
+              {formatMessage(messages.earnConditionErrorMessage)}
+            </CapRow>
+          ) : null}
+        </>
+      )}
+      {showZeroAllocation && (
+        <GetSelectComponent
+          title={messages.zeroEarnCondition}
+          placeholder={messages.selecteAllocationStrategy}
+          options={earnConditionListOptions}
+          value={zeroAwardStrategy}
+          showInfo
+          showAddAllocation
+          showInfoType="ALLOCATION"
+          strategyInfoList={pointsAllocation}
+          onChangeFunc={handleZeroEarnConditionChange}
+        />
+      )}
+      {showPointsExpiry && (
+        <GetSelectComponent
+          title={globalMessages.expiryCondition}
+          placeholder={messages.selecteExpiryStrategy}
+          options={expiryConditionListOptions}
+          value={expiryStrategy}
+          showInfo
+          showInfoType="EXPIRY"
+          showAddExpiry
+          strategyInfoList={eventTypeBasedPointsExpiry}
+          onChangeFunc={handleExpiryConditionChange}
+        />
+      )}
+      {showProrateOn &&
+        !isTPA && (
+          <GetSelectComponent
+            title={globalMessages.prorateOn}
+            placeholder={messages.selecteProrateOn}
+            options={prorateOnListOptions(
+              formatMessage,
+              isTPA,
+              isGenericEvent,
+              eventsList,
+              eventType,
+              areProrateOnOptionsDisabled,
+              billType,
+              enableQuantityOptions,
+              source,
+              isLineItemLevel,
+              hasQuantityOptionPresent,
+            )}
+            value={proRateOnSourceValue}
+            showInfo
+            infoDescription={getProrateInfoDescription(proRateOnSourceValue)}
+            onChangeFunc={handleProrateOnChange}
+            isGenericBEAttribute
+          />
+        )}
+      {showSourceValueRounding && (
+        <GetSelectComponent
+          title={globalMessages.sourceValueRoundingStrategy}
+          placeholder={messages.selectSourceValueRounding}
+          options={sourceValueRoundingStrategyList(formatMessage)}
+          value={
+            sourceValueRoundingStrategy === ''
+              ? 'ACTUAL'
+              : sourceValueRoundingStrategy
+          }
+          onChangeFunc={handleSourceValueRoundingStrategy}
+        />
+      )}
+      {showPointsRounding && (
+        <GetSelectComponent
+          title={globalMessages.pointsRoundingStrategy}
+          placeholder={messages.selectePointsRounding}
+          options={pointsRoundingStrategyList(formatMessage)}
+          value={
+            pointsRoundingStrategy === '' ? 'ACTUAL' : pointsRoundingStrategy
+          }
+          onChangeFunc={handlePointsRoundingStrategy}
+        />
+      )}
+      {showDelayStrategy && (
+        <GetSelectComponent
+          title={messages.delayStrategy}
+          placeholder={messages.selectDelayStrategy}
+          options={delayStrategyOptionsList}
+          value={
+            delayStrategy === ''
+              ? AS_DEFINED_IN_ALLOCATION_STRATEGY
+              : delayStrategy
+          }
+          onChangeFunc={handleDelayStrategy}
+          showInfo
+          infoDescription={getDelayAttributeDescription()}
+          isDelayStrategy
+        />
+      )}
+      {delayStrategy === ACCRUAL_DATE_AS_PER_BE_ATTRIBUTE && (
+        <GetSelectComponent
+          title={messages.delayAttributeName}
+          placeholder={messages.selectDelayAttributeName}
+          options={delayAttributeNameOptions}
+          value={delayStrategyExtendedField}
+          onChangeFunc={handleDelayStrategyExtendedField}
+          showInfo
+          isGenericBEAttribute
+          isDelayAttribute
+        />
+      )}
+      {delayStrategy === FIXED_DELAY_FROM_TXN_ITEM_EXT_FIELD && (
+        <GetSelectComponent
+          title={messages.delayExtendedFieldName}
+          placeholder={messages.selectDelayExtendedFieldName}
+          options={extendedFieldsList}
+          value={
+            delayStrategyExtendedField === ''
+              ? extendedFieldsList?.[0]?.value
+              : delayStrategyExtendedField
+          }
+          onChangeFunc={handleDelayStrategyExtendedField}
+        />
+      )}
+      {showRedemptionStrategy && (
+        <GetSelectComponent
+          title={messages.pointsRedemption}
+          placeholder={messages.selectPointsRedemption}
+          options={redeemConditionListOptions}
+          value={
+            redeemptionStrategy === ''
+              ? redeemConditionListOptions[0].value
+              : redeemptionStrategy
+          }
+          onChangeFunc={handlePointsRedemptionStrategy}
+        />
+      )}
+      {!isMultiselectTargetGroup &&
+        showTargetGroups && (
+          <CapRow>
+            <CapColumn span={6}>
+              <CapHeading
+                type="h4"
+                className={classnames('select-component-title', {
+                  'remove-search': targetGroupsCount === 0,
+                })}
+              >
+                {formatMessage(messages.milestonesOrStreaks)}
+              </CapHeading>
+            </CapColumn>
+            <CapColumn className="relative" span={8}>
+              <CapVirtualSelectTargetGruopsDropdown {...dropdownProps} />
+            </CapColumn>
+          </CapRow>
+        )}
+      {isMultiselectTargetGroup &&
+        showTargetGroups && (
+          <CapRow>
+            <CapColumn span={6}>
+              <CapHeading type="h4" className="select-component-title">
+                {formatMessage(messages.milestonesOrStreaks)}
+              </CapHeading>
+            </CapColumn>
+            <CapColumn className="relative" span={8}>
+              <CapCustomSelect
+                showArrow
+                showSearch
+                title={messages.milestonesOrStreaks}
+                placeholder={messages.selectMilestonesOrStreaks}
+                options={targetGroupsOptions}
+                value={targetGroupName}
+                onChange={handleTargetGroupsChange}
+                useValueForSearch
+              />
+            </CapColumn>
+          </CapRow>
+        )}
+      {showTargetNames && (
+        <GetSelectComponent
+          title={messages.targetPlural}
+          placeholder={messages.selectTargetPlural}
+          options={targetNamesOptions}
+          value={targetName}
+          onChangeFunc={handleTargetNameChange}
+          infoDescription={getTargetsDescription()}
+          showInfo
+        />
+      )}
+      {showStreakName && (
+        <GetSelectComponent
+          title={messages.benefitBasedOn}
+          placeholder={globalMessages.select}
+          options={streaksLevelOptions}
+          value={streakName}
+          onChangeFunc={handleStreakNameChange}
+          isStreaksLevel
+        />
+      )}
+      {showProrateOn &&
+        isTPA && (
+          <GetSelectComponent
+            title={globalMessages.prorateOn}
+            placeholder={messages.selecteProrateOn}
+            options={prorateOnListOptions(
+              formatMessage,
+              isTPA,
+              isGenericEvent,
+              eventsList,
+              eventType,
+              areProrateOnOptionsDisabled,
+              billType,
+              enableQuantityOptions,
+              source,
+              isLineItemLevel,
+              hasQuantityOptionPresent,
+            )}
+            value={proRateOnSourceValue}
+            showInfo
+            infoDescription={getProrateInfoDescription(proRateOnSourceValue)}
+            onChangeFunc={handleProrateOnChange}
+            disabled={areProrateOnDropdownDisabled}
+            isProrateOn
+            isGenericBEAttribute
+          />
+        )}
+      {showTrackers && (
+        <GetSelectComponent
+          title={globalMessages.trackers}
+          placeholder={messages.selectTrackerStrategy}
+          options={trackerStrategyListOption}
+          value={trackerStrategy}
+          onChangeFunc={handleTrackersStrategy}
+        />
+      )}
+      {showPromisedPointsToCurrentPointsDate && (
+        <GetSelectComponent
+          title={messages.promisedToCurrentPoints}
+          placeholder={messages.selectPromisedToCurrentPoints}
+          options={promisedToCurrentPointsDateOptionsList(formatMessage)}
+          value={
+            promisedPointsToCurrentPointsDate === ''
+              ? promisedToCurrentPointsDateOptionsList(formatMessage)?.[0]
+                  ?.value
+              : promisedPointsToCurrentPointsDate
+          }
+          onChangeFunc={handlePromisedPointsToCurrentPointsDate}
+        />
+      )}
+      {allocationSlideboxVisible && (
+        <AddEarnCondition
+          show={allocationSlideboxVisible}
+          closeSlidebox={handleAllocationSlideboxVisibleChange}
+          currentProgram={currentProgram}
+          refreshStrategyData={refreshStrategyData}
+          errorWrapperSlideBoxClose={handleAllocationSlideboxVisibleChange}
+        />
+      )}
+      {expirySlideboxVisible && (
+        <ExpiryConditions
+          show={expirySlideboxVisible}
+          closeSlidebox={handleExpirySlideboxVisibleChange}
+          currentProgram={currentProgram}
+          refreshStrategyData={refreshStrategyData}
+          pointTypeIdData={pointTypeIdData}
+          errorWrapperSlideBoxClose={handleExpirySlideboxVisibleChange}
+        />
+      )}
+    </CapRowWithSpacing>
+  );
+};
+
+AwardPointsConfig.propTypes = {
+  intl: intlShape.isRequired,
+  className: PropTypes.string,
+  trackersList: PropTypes.array,
+  pointsAllocation: PropTypes.array,
+  extendedFieldsList: PropTypes.array,
+  pointsRedemption: PropTypes.array,
+  actionType: PropTypes.string,
+  pointsExpiry: PropTypes.array,
+  expiryStrategy: PropTypes.string,
+  awardStrategy: PropTypes.string,
+  trackerStrategy: PropTypes.string,
+  redeemptionStrategy: PropTypes.string,
+  userGroupEntity: PropTypes.string,
+  promisedPointsToCurrentPointsDate: PropTypes.string,
+  proRateOnSourceValue: PropTypes.string,
+  zeroAwardStrategy: PropTypes.string,
+  pointsRoundingStrategy: PropTypes.string,
+  delayStrategy: PropTypes.string,
+  delayStrategyExtendedField: PropTypes.string,
+  showTrackers: PropTypes.bool,
+  showRedemptionStrategy: PropTypes.bool,
+  showPromisedPointsToCurrentPointsDate: PropTypes.bool,
+  showZeroAllocation: PropTypes.bool,
+  showPointsRounding: PropTypes.bool,
+  showDelayStrategy: PropTypes.bool,
+  showProrateOn: PropTypes.bool,
+  showPointsAllocation: PropTypes.bool,
+  showPointsExpiry: PropTypes.bool,
+  handleDelayStrategy: PropTypes.func,
+  handleProrateOnChange: PropTypes.func,
+  ProrateOnField: PropTypes.string,
+  handleEarnConditionChange: PropTypes.func,
+  handlePromisedPointsToCurrentPointsDate: PropTypes.func,
+  handleExpiryConditionChange: PropTypes.func,
+  handleZeroEarnConditionChange: PropTypes.func,
+  handlePointsRoundingStrategy: PropTypes.func,
+  handleDelayStrategyExtendedField: PropTypes.func,
+  handlePointsRedemptionStrategy: PropTypes.func,
+  handleTrackersStrategy: PropTypes.func,
+  handleUserGroupEntityChange: PropTypes.func,
+  currentProgram: PropTypes.object,
+  refreshStrategyData: PropTypes.func,
+  showAddAllocation: PropTypes.bool,
+  showAddExpiry: PropTypes.bool,
+  pointTypeIdData: PropTypes.object,
+  eventType: PropTypes.string,
+  showUserGroup: PropTypes.string,
+  targetGroupId: PropTypes.string,
+  handleTargetGroupsChange: PropTypes.func,
+  showTargetGroups: PropTypes.bool,
+  targetGroups: PropTypes.array,
+  targetName: PropTypes.string,
+  handleTargetNameChange: PropTypes.func,
+  showTargetNames: PropTypes.bool,
+  transactionTargets: PropTypes.array,
+  showSourceValueRounding: PropTypes.bool,
+  sourceValueRoundingStrategy: PropTypes.string,
+  handleSourceValueRoundingStrategy: PropTypes.func,
+  areProrateOnOptionsDisabled: PropTypes.bool,
+  billType: PropTypes.string,
+  enableQuantityOptions: PropTypes.bool,
+  source: PropTypes.string,
+  isLineItemLevel: PropTypes.bool,
+  hasQuantityOptionPresent: PropTypes.bool,
+  selectedStrategy: PropTypes.object,
+  showEarnConditionInfo: PropTypes.bool,
+};
+const mapStateToProps = createStructuredSelector({
+  targetGroupData: makeSelectTargetGroups(),
+});
+const withConnect = connect(
+  mapStateToProps,
+  null,
+);
+
+export default withErrorBoundary(
+  injectIntl(withConnect(withStyles(AwardPointsConfig, styles))),
+  {
+    useStyle: true,
+  },
+);