@capillarytech/creatives-library 1.0.2 → 2.0.0

package/components/organisms/AddEarnCondition/AddEarnCondition.js

@@ -1,889 +0,0 @@
-import React, { useState, useMemo, useEffect } from 'react';
-import { injectIntl, intlShape } from 'react-intl';
-import PropTypes from 'prop-types';
-import withStyles from 'utils/withStyles';
-import capitalize from 'lodash/capitalize';
-import uniq from 'lodash/uniq';
-import { compose, bindActionCreators } from 'redux';
-import { createStructuredSelector } from 'reselect';
-import { connect } from 'react-redux';
-import { withRouter } from 'react-router-dom';
-import CapRow from '@capillarytech/cap-ui-library/CapRow';
-import CapColumn from '@capillarytech/cap-ui-library/CapColumn';
-import CapButton from '@capillarytech/cap-ui-library/CapButton';
-import CapSelect from '@capillarytech/cap-ui-library/CapSelect';
-import CapSlideBox from '@capillarytech/cap-ui-library/CapSlideBox';
-import CapHeading from '@capillarytech/cap-ui-library/CapHeading';
-import CapTooltip from '@capillarytech/cap-ui-library/CapTooltip';
-import CapDivider from '@capillarytech/cap-ui-library/CapDivider';
-import CapHeader from '@capillarytech/cap-ui-library/CapHeader';
-import CapCheckbox from '@capillarytech/cap-ui-library/CapCheckbox';
-import CapNotification from '@capillarytech/cap-ui-library/CapNotification';
-import cloneDeep from 'lodash/cloneDeep';
-import { CapLabel, CapSpin } from '@capillarytech/cap-ui-library';
-import isEmpty from 'lodash/isEmpty';
-import withErrorBoundary from 'utils/withErrorBoundary';
-import NumberInput from '../../molecules/NumberInput';
-import injectReducer from '../../../utils/injectReducer';
-import injectSaga from '../../../utils/injectSaga';
-import * as constants from './constants';
-import * as actions from './actions';
-import * as capActions from '../../pages/Cap/actions';
-import saga from './saga';
-import reducer from './reducer';
-import * as appConstants from '../../pages/App/constants';
-import messages from './messages';
-import globalMessages from '../../pages/Cap/messages';
-import {
-  makeSelectCustomFields,
-  makeSelectUpsertAllocationStrategy,
-} from './selectors';
-import * as style from './style';
-import SwitchWithDivider from '../../molecules/SwitchWithDivider';
-import { formatMessageHandler } from '../../../utils/commonUtils';
-import { gtmPush } from '../../../utils/gtmTrackers';
-import SelectOptionLabelWithInfo from '../../atoms/SelectOptionLabelWithInfo';
-
-const {
-  styles,
-  FlexWithMargin,
-  AllocationSelect,
-  AllocationTreeSelect,
-  PrimaryInput,
-} = style;
-
-const {
-  MODULE_MAP,
-  SLAB_REGEX,
-  ALLOCATION_TYPE_MAP_CONFIGURE,
-  LOYALTY,
-  CAMPAIGN,
-  EDIT,
-  FIXED,
-  SUCCESS,
-  REQUEST,
-  POSITIVE_DECIMALS,
-  CUSTOM_FIELDS_TITLE_TOOLTIP_MAP,
-} = appConstants;
-
-const {
-  TIER,
-  DELAYED_ACCRUAL_TIME_UNIT_MAP,
-  ALLOCATION_TYPE_MAP_FOR_UI,
-  allocationTypeReversed,
-  ALLOCATION_TYPE_MAP_FOR_UI_TOOLTIP,
-} = constants;
-const AddEarnCondition = props => {
-  const {
-    intl: { formatMessage },
-    className,
-    actions,
-    show,
-    currentEarn = {},
-    closeSlidebox,
-    mode,
-    match: {
-      params: { programId },
-    },
-    customFieldsData: { getCustomFieldStatus, customFields = {} },
-    currentProgram: { slabs = [] } = {},
-    refreshStrategyData,
-    capActions,
-    upsertAllocationStrategy = {},
-  } = props;
-  const {
-    name,
-    description,
-    owner,
-    id = -1,
-    propertyValues: {
-      allocation_type = '',
-      allocation_values = '',
-      custom_field_name = '',
-      is_delayed_accrual = false,
-      delayed_accrual_value = '',
-      delayed_accrual_time_unit,
-      max_allocation_criteria = '',
-      min_allocation_criteria = '',
-    } = {},
-  } = currentEarn;
-
-  useEffect(() => {
-    actions.getCustomFields({ programId });
-  }, []);
-
-  const {
-    FIXED_CUSTOM_FIELD,
-    PRORATED_CUSTOM_FIELD,
-    ROUND_UP,
-  } = ALLOCATION_TYPE_MAP_CONFIGURE;
-
-  const strategyId = id;
-  const slabRegex = new RegExp(SLAB_REGEX);
-  let slabType = !slabRegex.test(allocation_type);
-
-  const allocationValuesArr = useMemo(() => allocation_values.split(','), [
-    allocation_values,
-  ]);
-  let roundupSlabType = !(uniq(allocationValuesArr).length > 1);
-  const maxAllocationArr = useMemo(() => max_allocation_criteria.split(','), [
-    max_allocation_criteria,
-  ]);
-
-  const minAllocationArr = useMemo(() => min_allocation_criteria.split(','), [
-    min_allocation_criteria,
-  ]);
-
-  const getEarnValuesArray =
-    mode === EDIT
-      ? slabs.map((slab, index) => ({
-          value: allocationValuesArr[index],
-        }))
-      : slabs.map(() => ({ value: '' }));
-
-  const getMinCriteriaValuesArray =
-    mode === EDIT
-      ? slabs.map((slab, index) => ({
-          value: minAllocationArr[index],
-        }))
-      : slabs.map(() => ({ value: '' }));
-
-  const getMaxCriteriaValuesArray =
-    mode === EDIT
-      ? slabs.map((slab, index) => ({
-          value: maxAllocationArr[index],
-        }))
-      : slabs.map(() => ({ value: '' }));
-  const slabBasedInitialState =
-    allocation_type === ROUND_UP ? roundupSlabType : slabType;
-  const [earnName, setEarnName] = useState(name);
-  const [earnDescription, setEarnDescription] = useState(description);
-  const [earnOwner, setEarnOwner] = useState(owner || LOYALTY);
-  const [earnAllocationType, setEarnAllocationType] = useState(
-    allocation_type || FIXED,
-  );
-  const [isDelayedAccrual, setIsDelayedAccrual] = useState(is_delayed_accrual);
-  const [isSameTier, setIsSameTier] = useState(slabBasedInitialState);
-  const [isSameRoundup, setIsSameRoundup] = useState(slabBasedInitialState);
-  const [earnAllocationValue, setEarnAllocationValue] = useState(
-    getEarnValuesArray,
-  );
-  const [delayedAccrualUnit, setDelayedAccrualUnit] = useState(
-    delayed_accrual_time_unit,
-  );
-  const [delayedAccrualValue, setDelayedAccrualValue] = useState(
-    delayed_accrual_value,
-  );
-  const [customFieldName, setCustomFieldName] = useState(
-    custom_field_name || TIER,
-  );
-  const [maxAllocationCriteria, setMaxAllocationCriteria] = useState(
-    getMaxCriteriaValuesArray,
-  );
-  const [minAllocationCriteria, setMinAllocationCriteria] = useState(
-    getMinCriteriaValuesArray,
-  );
-
-  const moduleOptions = useMemo(
-    () =>
-      Object.keys(MODULE_MAP).map((module, index) => ({
-        label: formatMessageHandler(
-          formatMessage,
-          globalMessages[MODULE_MAP[module]],
-          module,
-        ),
-        value: module,
-        key: `module${index}`,
-      })),
-    [MODULE_MAP],
-  );
-
-  const allocationTypeList = useMemo(
-    () => {
-      const allocationTypeUiMap = cloneDeep(ALLOCATION_TYPE_MAP_FOR_UI);
-      if (earnOwner === LOYALTY) {
-        delete allocationTypeUiMap.ROUND_UP;
-        if (customFieldName !== TIER) {
-          delete allocationTypeUiMap.POINTS_MULTIPLIER;
-        }
-      } else if (earnOwner === CAMPAIGN) {
-        delete allocationTypeUiMap.PRORATED;
-        delete allocationTypeUiMap.POINTS_MULTIPLIER;
-      }
-      return Object.keys(allocationTypeUiMap).map((allocationType, index) => ({
-        label: (
-          <SelectOptionLabelWithInfo
-            title={formatMessageHandler(
-              formatMessage,
-              messages[allocationTypeUiMap[allocationType]],
-              allocationTypeUiMap[allocationType],
-            )}
-            tooltipText={formatMessage(
-              messages[ALLOCATION_TYPE_MAP_FOR_UI_TOOLTIP[allocationType]],
-            )}
-          />
-        ),
-        value: allocationType,
-        key: `allocationType${index}`,
-      }));
-    },
-    [ALLOCATION_TYPE_MAP_FOR_UI, earnOwner, customFieldName],
-  );
-
-  const delayedAccrualTimeUnitList = useMemo(
-    () =>
-      Object.keys(DELAYED_ACCRUAL_TIME_UNIT_MAP).map((unit, index) => ({
-        label: formatMessageHandler(
-          formatMessage,
-          globalMessages[DELAYED_ACCRUAL_TIME_UNIT_MAP[unit]],
-          unit,
-        ),
-        value: unit,
-        key: `accrualUnit${index}`,
-      })),
-    [DELAYED_ACCRUAL_TIME_UNIT_MAP],
-  );
-  const earnBasedOnList = [
-    {
-      title: (
-        <SelectOptionLabelWithInfo
-          title={formatMessage(globalMessages.tiers)}
-          tooltipText={formatMessage(messages.allocationBasedOnTiersTooltip)}
-        />
-      ),
-      value: TIER,
-    },
-  ];
-
-  if (getCustomFieldStatus === SUCCESS) {
-    Object.keys(customFields || {}).map(scope => {
-      const scoppedCustomFields = customFields[scope].map(customField => ({
-        title: customField,
-        value: customField,
-      }));
-      const customFieldTitle = `${capitalize(
-        scope.split('_')[0] || '',
-      )} ${capitalize(scope.split('_')[1] || '')}`;
-      const customFieldList = {
-        title: (
-          <SelectOptionLabelWithInfo
-            title={CUSTOM_FIELDS_TITLE_TOOLTIP_MAP[customFieldTitle]}
-            tooltipText={formatMessageHandler(
-              formatMessage,
-              messages[CUSTOM_FIELDS_TITLE_TOOLTIP_MAP[customFieldTitle]],
-              customFieldTitle,
-            )}
-          />
-        ),
-        value: scope,
-        selectable: false,
-        children: scoppedCustomFields,
-      };
-      earnBasedOnList.push(customFieldList);
-    });
-  }
-
-  const handleIsDelayedAccrualChange = () => {
-    setIsDelayedAccrual(!isDelayedAccrual);
-  };
-
-  const handleOnchangeEarnName = e => setEarnName(e.target.value);
-  const handleOnchangeEarnDescription = e => setEarnDescription(e.target.value);
-
-  const primaryInfo = (
-    <FlexWithMargin>
-      <PrimaryInput
-        className="tier-input-margin"
-        value={earnName}
-        label={formatMessage(globalMessages.name)}
-        placeholder={formatMessage(messages.namePlaceholder)}
-        onChange={handleOnchangeEarnName}
-      />
-      <PrimaryInput
-        value={earnDescription}
-        label={formatMessage(globalMessages.description)}
-        placeholder={formatMessage(messages.descriptionPlaceholder)}
-        onChange={handleOnchangeEarnDescription}
-      />
-    </FlexWithMargin>
-  );
-
-  const handleOnchangeEarnOwner = value => {
-    if (value === CAMPAIGN) {
-      setCustomFieldName(TIER);
-      setIsDelayedAccrual(false);
-    }
-    setEarnOwner(value);
-    setEarnAllocationType(FIXED);
-  };
-
-  const handleEarnBasedOnChange = value => {
-    if (value !== TIER) {
-      const allocationTypeCustom = (earnAllocationType || '')
-        .replace('_SLAB', '')
-        .replace('_CUSTOM_FIELD', '')
-        .concat('_CUSTOM_FIELD');
-      setEarnAllocationType(allocationTypeCustom);
-    } else {
-      setEarnAllocationType(FIXED);
-    }
-    setCustomFieldName(value);
-  };
-
-  const handleAllocationTypeChange = value => {
-    const slabRegex = new RegExp(SLAB_REGEX);
-    let slabType = !slabRegex.test(value);
-    setIsSameTier(slabType);
-    setIsSameRoundup(slabType);
-    setEarnAllocationType(allocationTypeReversed[value]);
-  };
-
-  const ModuleUsingCondition = () => (
-    <CapRow>
-      <CapColumn span={12}>
-        <AllocationSelect
-          className="input-box-alignment"
-          showArrow
-          showSearch
-          label={formatMessage(messages.moduleCondition)}
-          placeholder={formatMessage(globalMessages.loyalty)}
-          inductiveText={formatMessage(messages.moduleConditionInductive)}
-          options={moduleOptions}
-          defaultValue={earnOwner}
-          onChange={handleOnchangeEarnOwner}
-        />
-      </CapColumn>
-    </CapRow>
-  );
-
-  const onChangeIsSameTier = () => {
-    let allocType;
-    if (isSameTier) {
-      allocType = (earnAllocationType || '')
-        .replace('_SLAB', '')
-        .concat('_SLAB');
-    } else {
-      allocType = (earnAllocationType || '').replace('_SLAB', '');
-    }
-    setEarnAllocationType(allocationTypeReversed[allocType]);
-    setIsSameTier(!isSameTier);
-    setIsSameRoundup(!isSameTier);
-  };
-
-  const onChangeIsSameRoundup = () => {
-    setIsSameRoundup(!isSameRoundup);
-    setIsSameTier(!isSameRoundup);
-  };
-
-  const TierSelection = () => (
-    <CapRow>
-      <CapColumn span={24}>
-        <CapCheckbox checked={isSameTier} onChange={onChangeIsSameTier}>
-          {formatMessage(messages.tierConditions)}
-        </CapCheckbox>
-      </CapColumn>
-    </CapRow>
-  );
-  const RoundUpSelection = () => (
-    <CapRow>
-      <CapColumn span={24}>
-        <CapCheckbox
-          checked={isSameRoundup}
-          className="round-up-selection"
-          onChange={onChangeIsSameRoundup}
-        >
-          {formatMessage(messages.tierConditions)}
-        </CapCheckbox>
-      </CapColumn>
-    </CapRow>
-  );
-
-  const tierEarnRenderer = (serialNumber = -1) => {
-    const handleAllocationValueChange = e => {
-      let newAllocationValues;
-      if (isSameTier) {
-        newAllocationValues = earnAllocationValue.map(() => ({
-          value: e.target.value,
-        }));
-      } else {
-        newAllocationValues = cloneDeep(earnAllocationValue);
-        newAllocationValues[serialNumber] = { value: e.target.value };
-      }
-      setEarnAllocationValue(newAllocationValues);
-    };
-
-    const titleHeading = isSameTier
-      ? formatMessage(globalMessages.allTiers)
-      : slabs[serialNumber].name;
-
-    return (
-      <CapColumn span={3} offset={1}>
-        <NumberInput
-          label={
-            <CapTooltip title={titleHeading}>
-              <CapRow>
-                <CapHeading type="h4" className="truncate-text tier-input-text">
-                  {titleHeading}
-                </CapHeading>
-              </CapRow>
-            </CapTooltip>
-          }
-          labelPosition="top"
-          value={
-            isSameTier
-              ? earnAllocationValue[0]?.value
-              : earnAllocationValue[serialNumber]?.value
-          }
-          onChange={handleAllocationValueChange}
-          type={POSITIVE_DECIMALS}
-        />
-      </CapColumn>
-    );
-  };
-
-  const roundUpEarnRenderer = (serialNumber = -1) => {
-    const handleAllocationValueChange = e => {
-      let newAllocationValues;
-      if (isSameRoundup) {
-        newAllocationValues = earnAllocationValue.map(() => ({
-          value: e.target.value,
-        }));
-      } else {
-        newAllocationValues = cloneDeep(earnAllocationValue);
-        newAllocationValues[serialNumber] = { value: e.target.value };
-      }
-      setEarnAllocationValue(newAllocationValues);
-    };
-
-    const handleMaxCriteriaValueChange = e => {
-      let newMaxCriteriaValues;
-      if (isSameRoundup) {
-        newMaxCriteriaValues = maxAllocationCriteria.map(() => ({
-          value: e.target.value,
-        }));
-      } else {
-        newMaxCriteriaValues = cloneDeep(maxAllocationCriteria);
-        newMaxCriteriaValues[serialNumber] = { value: e.target.value };
-      }
-      setMaxAllocationCriteria(newMaxCriteriaValues);
-    };
-
-    const handleMinCriteriaValueChange = e => {
-      let newMinCriteriaValues;
-      if (isSameRoundup) {
-        newMinCriteriaValues = minAllocationCriteria.map(() => ({
-          value: e.target.value,
-        }));
-      } else {
-        newMinCriteriaValues = cloneDeep(minAllocationCriteria);
-        newMinCriteriaValues[serialNumber] = { value: e.target.value };
-      }
-      setMinAllocationCriteria(newMinCriteriaValues);
-    };
-
-    return (
-      <CapRow className="round-up-earn-renderer">
-        <CapColumn span={4}>
-          <NumberInput
-            value={
-              isSameRoundup
-                ? minAllocationCriteria[0].value
-                : minAllocationCriteria[serialNumber]?.value
-            }
-            label={formatMessage(messages.pointRange)}
-            placeholder={formatMessage(messages.from)}
-            labelPosition="top"
-            onChange={handleMinCriteriaValueChange}
-            type={POSITIVE_DECIMALS}
-          />
-        </CapColumn>
-        <CapColumn span={1} offset={1}>
-          <CapLabel className="guidance-text">--</CapLabel>
-        </CapColumn>
-        <CapColumn span={4}>
-          <NumberInput
-            value={
-              isSameRoundup
-                ? maxAllocationCriteria[0].value
-                : maxAllocationCriteria[serialNumber]?.value
-            }
-            label=" "
-            placeholder={formatMessage(messages.to)}
-            onChange={handleMaxCriteriaValueChange}
-            type={POSITIVE_DECIMALS}
-          />
-        </CapColumn>
-        <CapColumn span={5} offset={1}>
-          <NumberInput
-            value={
-              isSameRoundup
-                ? earnAllocationValue[0]?.value
-                : earnAllocationValue[serialNumber]?.value
-            }
-            label={formatMessage(messages.roundUpto)}
-            labelPosition="top"
-            placeholder={formatMessage(messages.finalValue)}
-            onChange={handleAllocationValueChange}
-            type={POSITIVE_DECIMALS}
-          />
-        </CapColumn>
-      </CapRow>
-    );
-  };
-
-  const SecondaryInfo = () => (
-    <CapRow className="secondary-info-container">
-      <CapColumn span={12}>
-        <CapHeader
-          title={formatMessage(globalMessages.allocateBasedOn)}
-          description={formatMessage(messages.allocateBasedOnInductive)}
-          size="regular"
-          disabled={earnOwner === CAMPAIGN}
-          className="earn-basedon-tree-select"
-        />
-        <AllocationTreeSelect
-          className="input-box-alignment"
-          onChange={handleEarnBasedOnChange}
-          placeholder={formatMessage(messages.selectAllocationOn)}
-          style={{ width: '96%' }}
-          dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
-          treeData={earnBasedOnList}
-          disabled={earnOwner === CAMPAIGN}
-          size="large"
-          value={customFieldName}
-        />
-      </CapColumn>
-      <CapColumn span={11} offset={1}>
-        <CapSelect
-          showArrow
-          showSearch
-          label={formatMessage(globalMessages.allocationType)}
-          placeholder={formatMessage(messages.selectallocateType)}
-          inductiveText={formatMessage(messages.allocationTypeInductive)}
-          options={allocationTypeList}
-          defaultValue={allocationTypeReversed[earnAllocationType]}
-          onChange={handleAllocationTypeChange}
-          className="allocate-type"
-        />
-      </CapColumn>
-    </CapRow>
-  );
-
-  const EnableDelayAccural = () => (
-    <CapRow>
-      <CapColumn span={24}>
-        <SwitchWithDivider
-          className="accrual-switch"
-          label={formatMessage(messages.enableDelayedAccural)}
-          inductiveText={formatMessage(messages.enableDelayedAccuralInductive)}
-          isSwitchChecked={isDelayedAccrual}
-          onSwitchChange={handleIsDelayedAccrualChange}
-          switchStyle={{ position: 'absolute', left: '500px', top: '4px' }}
-        />
-      </CapColumn>
-    </CapRow>
-  );
-
-  const handleAccrualDelayUnitChange = value => setDelayedAccrualUnit(value);
-  const handleAccrualDelayValueChange = e =>
-    setDelayedAccrualValue(e.target.value);
-
-  const showSpin =
-    getCustomFieldStatus === REQUEST || upsertAllocationStrategy === REQUEST;
-
-  const SliderContent = (
-    <CapSpin spinning={showSpin}>
-      <CapRow>
-        {primaryInfo}
-        <ModuleUsingCondition />
-        <SecondaryInfo className={className} />
-        {![FIXED_CUSTOM_FIELD, PRORATED_CUSTOM_FIELD, ROUND_UP].includes(
-          earnAllocationType,
-        ) && (
-          <>
-            <TierSelection />
-            <CapRow className="tier-option">
-              {isSameTier
-                ? tierEarnRenderer()
-                : React.Children.toArray(
-                    slabs.map(slab => (
-                      <>{tierEarnRenderer(slab.serialNumber - 1)}</>
-                    )),
-                  )}
-            </CapRow>
-          </>
-        )}
-        {[ROUND_UP].includes(earnAllocationType) &&
-          customFieldName === TIER && (
-            <>
-              <RoundUpSelection />
-              {isSameRoundup
-                ? roundUpEarnRenderer()
-                : React.Children.toArray(
-                    slabs.map(slab => (
-                      <CapRow>
-                        <CapHeading type="h4">{slab.name}</CapHeading>
-                        <CapDivider />
-                        {roundUpEarnRenderer(slab.serialNumber - 1)}
-                      </CapRow>
-                    )),
-                  )}
-            </>
-          )}
-        {earnOwner === LOYALTY && <EnableDelayAccural />}
-        {isDelayedAccrual ? (
-          <CapRow>
-            <CapColumn span={6}>
-              <NumberInput
-                className="tier-input-margin"
-                value={delayedAccrualValue}
-                onChange={handleAccrualDelayValueChange}
-                label={formatMessage(messages.accurePointAfter)}
-                placeholder={formatMessage(messages.enterValue)}
-              />
-            </CapColumn>
-            <CapColumn span={4} offset={1}>
-              <AllocationSelect
-                className="accural-point-month"
-                style={{ width: '150px' }}
-                showArrow
-                showSearch
-                options={delayedAccrualTimeUnitList}
-                value={delayedAccrualUnit}
-                onChange={handleAccrualDelayUnitChange}
-                placeholder={formatMessage(messages.selectTime)}
-              />
-            </CapColumn>
-          </CapRow>
-        ) : null}
-      </CapRow>
-    </CapSpin>
-  );
-
-  const prepareResponse = () => {
-    let allocationTypeFinal = earnAllocationType;
-    let customFieldScope;
-    const { ROUND_UP } = ALLOCATION_TYPE_MAP_CONFIGURE;
-    if (
-      earnOwner === CAMPAIGN &&
-      !isSameTier &&
-      earnAllocationType !== ROUND_UP
-    ) {
-      allocationTypeFinal = (earnAllocationType || '')
-        .replace('_SLAB', '')
-        .concat('_SLAB');
-    }
-    if (earnOwner === LOYALTY && !isSameTier) {
-      allocationTypeFinal = (earnAllocationType || '')
-        .replace('_SLAB', '')
-        .concat('_SLAB');
-    }
-    if (earnOwner === LOYALTY && customFieldName !== TIER && customFieldName) {
-      allocationTypeFinal = (earnAllocationType || '')
-        .replace('_CUSTOM_FIELD', '')
-        .concat('_CUSTOM_FIELD');
-    }
-    if (customFieldName !== TIER) {
-      Object.keys(customFields || {}).forEach(scope => {
-        customFields[scope].forEach(customField => {
-          if (customField === customFieldName) customFieldScope = scope;
-        });
-      });
-    }
-    const payload = {
-      name: earnName,
-      description: earnDescription || `${earnName}_description`,
-      strategyId,
-      owner: earnOwner,
-      allocation_type: allocationTypeFinal,
-      allocation_values: earnAllocationValue.map(val => Number(val.value)),
-      is_delayed_accrual: isDelayedAccrual,
-      custom_field_enabled: false,
-      slab_based: false,
-      all_slabs: Number(earnAllocationValue[0]?.value),
-    };
-
-    if (isDelayedAccrual) {
-      payload.delayed_accrual_value = delayedAccrualValue;
-      payload.delayed_accrual_time_unit = delayedAccrualUnit;
-    }
-    if (allocationTypeFinal.includes('_CUSTOM_FIELD')) {
-      payload.custom_field_enabled = true;
-      payload.custom_field_scope = customFieldScope;
-      payload.custom_field_name = customFieldName;
-    }
-
-    if (allocationTypeFinal === ROUND_UP) {
-      if (isSameRoundup) {
-        payload.alloc_value_round_up_all_slabs_round_upto =
-          Number(earnAllocationValue?.[0]?.value) || '';
-        payload.alloc_value_round_up_all_slabs_from =
-          Number(minAllocationCriteria?.[0].value) || '';
-        payload.alloc_value_round_up_all_slabs_to =
-          Number(maxAllocationCriteria?.[0].value) || '';
-        const allocValues = Array(slabs?.length || 1).fill(
-          Number(earnAllocationValue?.[0]?.value) || '',
-        );
-        payload.allocation_values = allocValues;
-      } else {
-        payload.alloc_value_round_up_value_round_upto = earnAllocationValue.map(
-          val => Number(val.value),
-        );
-        payload.alloc_value_round_up_value_from = minAllocationCriteria.map(
-          val => Number(val.value),
-        );
-        payload.alloc_value_round_up_value_to = maxAllocationCriteria.map(val =>
-          Number(val.value),
-        );
-      }
-    }
-
-    if (!isSameTier && !isSameRoundup) {
-      payload.slab_based = true;
-    }
-    return payload;
-  };
-
-  const handleSave = () => {
-    const payload = prepareResponse();
-    actions.upsertAllocationStrategy(programId, payload, result => {
-      if (result?.success) {
-        if (strategyId !== -1) {
-          CapNotification.success({
-            message: formatMessage(globalMessages.editedSuccessfully),
-          });
-        } else {
-          CapNotification.success({
-            message: formatMessage(globalMessages.createdSuccessfully),
-          });
-        }
-        const mode = strategyId && strategyId !== -1 ? 'EDIT' : 'CREATE';
-        const earnPointDetails = Object.assign(payload, {
-          programId: programId,
-          mode,
-        });
-        gtmPush('earnPointDetails', earnPointDetails);
-        refreshStrategyData();
-        closeSlidebox();
-        capActions.checkReconfigureProgram(programId);
-      } else {
-        CapNotification.error({
-          message: formatMessage(globalMessages.errorMessage),
-        });
-      }
-    });
-  };
-  let isSaveDisabled = false;
-  if (
-    isEmpty(earnName) ||
-    isEmpty(earnOwner) ||
-    isEmpty(earnAllocationType) ||
-    isEmpty(customFieldName) ||
-    (isDelayedAccrual &&
-      (isEmpty(delayedAccrualValue) || isEmpty(delayedAccrualUnit))) ||
-    ((earnAllocationType === ALLOCATION_TYPE_MAP_CONFIGURE.ROUND_UP &&
-      (isEmpty(maxAllocationCriteria) || isEmpty(minAllocationCriteria))) ||
-      isEmpty(earnAllocationValue))
-  ) {
-    isSaveDisabled = true;
-  }
-  earnAllocationValue.forEach((value, index) => {
-    if (isSaveDisabled) return;
-    if (isEmpty(value?.value)) isSaveDisabled = true;
-    if (
-      earnAllocationType === ALLOCATION_TYPE_MAP_CONFIGURE.ROUND_UP &&
-      isEmpty(maxAllocationCriteria[index]?.value) &&
-      isEmpty(minAllocationCriteria[index]?.value)
-    ) {
-      isSaveDisabled = true;
-    }
-  });
-  const SlideBoxFooter = (
-    <CapButton
-      type={isSaveDisabled ? 'secondary' : 'primary'}
-      disabled={isSaveDisabled || showSpin}
-      onClick={handleSave}
-      id="loyalty-allocation-point-create-edit-button"
-      className="lp-btn-config-points"
-    >
-      {formatMessage(globalMessages.done)}
-    </CapButton>
-  );
-
-  return (
-    <CapSlideBox
-      showShadow
-      className={className}
-      show={show}
-      header={
-        <CapHeader
-          size="h1"
-          title={formatMessage(
-            messages[
-              `${strategyId !== -1 ? 'editEarnCondition' : 'addEarnCondition'}`
-            ],
-          )}
-          description={formatMessage(messages.addEarnConditionInductive)}
-        />
-      }
-      content={SliderContent}
-      footer={SlideBoxFooter}
-      handleClose={closeSlidebox}
-      size="slide-box-size-medium"
-    />
-  );
-};
-
-AddEarnCondition.propTypes = {
-  className: PropTypes.string,
-  intl: intlShape.isRequired,
-  show: PropTypes.bool,
-  closeSlidebox: PropTypes.func,
-  currentEarn: PropTypes.object,
-  refreshStrategyData: PropTypes.func,
-  mode: PropTypes.string,
-  currentProgram: PropTypes.object,
-  match: PropTypes.object,
-  customFieldsData: PropTypes.object,
-  actions: PropTypes.object.isRequired,
-  capActions: PropTypes.object,
-  upsertAllocationStrategy: PropTypes.object,
-};
-
-AddEarnCondition.TYPE = 'addEarnCondition';
-
-AddEarnCondition.defaultProps = {
-  className: '',
-  show: false,
-  closeSlidebox: () => {},
-  currentEarn: {},
-  refreshStrategyData: () => {},
-  match: {},
-  mode: '',
-};
-
-const mapStateToProps = createStructuredSelector({
-  customFieldsData: makeSelectCustomFields(),
-  upsertAllocationStrategy: makeSelectUpsertAllocationStrategy(),
-});
-
-function mapDispatchToProps(dispatch) {
-  return {
-    actions: bindActionCreators(actions, dispatch),
-    capActions: bindActionCreators(capActions, dispatch),
-  };
-}
-const withSaga = injectSaga({ key: 'addEarnCondition', saga });
-const withReducer = injectReducer({ key: 'addEarnCondition', reducer });
-
-const withConnect = connect(
-  mapStateToProps,
-  mapDispatchToProps,
-);
-
-export default compose(
-  withErrorBoundary,
-  withSaga,
-  withReducer,
-  withConnect,
-)(withRouter(injectIntl(withStyles(AddEarnCondition, styles))));