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

package/components/organisms/IssueCatalogRewardsAction/IssueCatalogRewardsAction.js

@@ -1,1034 +0,0 @@
-import React, { useCallback, useEffect, useMemo, useState } from 'react';
-import { compose, bindActionCreators } from 'redux';
-import { createStructuredSelector } from 'reselect';
-import { connect } from 'react-redux';
-import { injectIntl, intlShape } from 'react-intl';
-import useDeepCompareEffect from 'use-deep-compare-effect';
-
-import { getCommSaveData } from 'utils/workflow';
-import injectSaga from 'utils/injectSaga';
-import withErrorBoundary from 'utils/withErrorBoundary';
-import injectReducer from 'utils/injectReducer';
-import classnames from 'classnames';
-import PropTypes from 'prop-types';
-import lodashHas from 'lodash/has';
-
-import CapSlideBox from '@capillarytech/cap-ui-library/CapSlideBox';
-import CapRow from '@capillarytech/cap-ui-library/CapRow';
-import CapColumn from '@capillarytech/cap-ui-library/CapColumn';
-import CapHeader from '@capillarytech/cap-ui-library/CapHeader';
-import CapNotification from '@capillarytech/cap-ui-library/CapNotification';
-import CapSpin from '@capillarytech/cap-ui-library/CapSpin';
-import CapCustomSelect from '@capillarytech/cap-ui-library/CapCustomSelect';
-import CapIcon from '@capillarytech/cap-ui-library/CapIcon';
-import CapLink from '@capillarytech/cap-ui-library/CapLink';
-import CapTooltipWithInfo from '@capillarytech/cap-ui-library/CapTooltipWithInfo';
-import CapLabel from '@capillarytech/cap-ui-library/CapLabel';
-import CapTooltip from '@capillarytech/cap-ui-library/CapTooltip';
-import CapInput from '@capillarytech/cap-ui-library/CapInput';
-import CapSkeleton from '@capillarytech/cap-ui-library/CapSkeleton';
-
-import moment from 'moment';
-import TriggerAction from '../../atoms/TriggerAction';
-import ActionTitle from '../../molecules/ActionTitle';
-import InfoBanner from '../../molecules/InfoBanner';
-import IllustrationWithTitleAndDesc from '../../atoms/IllustrationWithTitleAndDesc';
-import emptyStateIlustration from '../../../assets/rewards-empty-placeholder.svg';
-
-import * as globalActions from '../../pages/Cap/actions';
-import * as actions from './actions';
-import {
-  BE_ATTRIBUTE,
-  CUSTOMER_EXTENDED_FIELDS,
-  LINE_ITEM_EXT_FIELDS,
-  NO_BRAND,
-  NO_REWARD,
-  POINTS_ON_EVENT,
-  REWARDS_UI_LINK,
-  TXN_EXT_FIELDS,
-  USER_INPUT,
-  emptyStateMessageMap,
-  mappingTypeMessageMap,
-  qtyBasedOnMessageMap,
-  qtyValuePlaceholderMap,
-} from './constants';
-import {
-  REQUEST,
-  VIEW,
-  SUCCESS,
-  BILL_EXTENDED_FIELD,
-  POSITIVE_INTEGER,
-} from '../../pages/App/constants';
-import {
-  CONVERT_POINTS_TO_REWARD_ACTION,
-  LINEITEM_EXTENDED_FIELD,
-} from '../ConfigureWorkflows/constants';
-import {
-  makeSelectUpsertAction,
-  makeSelectOrg,
-  makeSelectCap,
-} from '../../pages/Cap/selectors';
-import { makeSelectBrandData } from './selectors';
-
-import saga from './saga';
-import reducer from './reducer';
-
-import globalMessages from '../../pages/Cap/messages';
-import messages from './messages';
-import customFieldMessages from '../../molecules/IssueRewardsCustomFields/messages';
-
-import {
-  getBrandNameFromID,
-  getRewardStatus,
-  getValueMsg,
-  areStatesEqual,
-  parseCustomFields,
-  getViewModeRow,
-} from './utils';
-import * as style from './style';
-import * as workflowActions from '../ConfigureWorkflows/actions';
-import withStyles from '../../../utils/withStyles';
-import RewardCatalogTooltip from '../../atoms/RewardCatalogTooltip';
-import { COMPLETED } from '../IssuePromotionWorkflowAction/constants';
-import ActionViewModeHeader from '../../atoms/ActionViewModeHeader';
-import {
-  makeSelectEventsList,
-  makeSelectExtendedFields,
-} from '../ConfigureWorkflows/selectors';
-import NumberInput from '../../molecules/NumberInput';
-import { CONVERT_POINTS_TO_REWARDS } from '../../molecules/CustomTreeHelper/constants';
-import IssueRewardsCustomFields from '../../molecules/IssueRewardsCustomFields';
-
-const { styles } = style;
-
-const { TextArea } = CapInput;
-
-export const ViewLabelWithInfoTooltip = ({ title, tooltipTitle }) => (
-  <>
-    {title}
-    <CapTooltipWithInfo title={tooltipTitle} className="qty-based-on-info" />
-  </>
-);
-
-export const IssueCatalogRewardsAction = ({
-  intl: { formatMessage },
-  globalActions,
-  closeSlidebox,
-  updateRuleSet,
-  actionData = {},
-  className,
-  orgData: { orgID },
-  actions,
-  brandDetails: {
-    getAllBrandsStatus = REQUEST,
-    getAllBrandsData = [],
-    rewardsForEachBrand = {},
-    rewardsForEachBrandStatus = REQUEST,
-    getFulfilmentStatus = REQUEST,
-    getFulfilmentData = [],
-    getCustomFieldsStatus = REQUEST,
-  } = {},
-  source,
-  eventType,
-  workflowActions,
-  currentProgram: { id: programId } = {},
-  extendedFieldsData: { extendedFields = [], getExtendedFieldStatus = '' } = {},
-  eventsListData: { eventsList = [] } = {},
-  isGenericEvent,
-  userData: { currentOrgDetails = {} } = {},
-}) => {
-  const currencySettings =
-    currentOrgDetails?.basic_details?.base_currency || 'INR';
-  const [selectedBrand, setSelectedBrand] = useState(
-    actionData?.isEditMode === true ? parseInt(actionData?.brandId, 10) : null,
-  );
-  const [selectedReward, setSelectedReward] = useState(
-    actionData?.isEditMode === true ? parseInt(actionData?.rewardId, 10) : null,
-  );
-  const [currentRewardData, setCurrentRewardData] = useState(null);
-  const [rewardsForBrand, setRewardsForBrand] = useState(null);
-  const [viewModeRewardData, setViewModeRewardData] = useState({});
-  const [showIllustration, setShowIllustration] = useState(null);
-  const [quantityBasedOn, setQuantityBasedOn] = useState(
-    actionData?.quantityBasedOn,
-  );
-  const [quantityValue, setQuantityValue] = useState(actionData?.quantityValue);
-  const [fulfilmentStatus, setFulfilmentStatus] = useState(
-    actionData?.fulfillmentStatus,
-  );
-  const [notes, setNotes] = useState(actionData?.notes);
-  const [customFields, setCustomFields] = useState(
-    parseCustomFields(actionData?.customFields),
-  );
-  const [validateCustomFields, setValidateCustomFields] = useState([]);
-
-  const getRewardsCallbackFn = useCallback(response => {
-    // response from the api call will be set to the useState state.
-    if (response?.status === SUCCESS) {
-      setRewardsForBrand(response?.data);
-    } else {
-      CapNotification.error({
-        message: formatMessage(messages.fetchedRewardsError),
-      });
-      setRewardsForBrand([]);
-    }
-  }, []);
-
-  useEffect(
-    () => {
-      const currentData = rewardsForBrand?.find(
-        reward => reward.id === selectedReward,
-      );
-      setCurrentRewardData(currentData);
-    },
-    [selectedReward, rewardsForBrand],
-  );
-  const setViewModeRewardDataCallback = useCallback(requiredReward => {
-    // this has been called from the saga function, when the mode is VIEW
-    setViewModeRewardData(requiredReward[0]);
-  }, []);
-
-  useEffect(
-    () => {
-      if (quantityBasedOn === LINE_ITEM_EXT_FIELDS)
-        workflowActions.getExtendedFields(LINEITEM_EXTENDED_FIELD, programId);
-      else if (quantityBasedOn === TXN_EXT_FIELDS)
-        workflowActions.getExtendedFields(BILL_EXTENDED_FIELD, programId);
-    },
-    [quantityBasedOn],
-  );
-
-  useEffect(
-    () => {
-      // making the call to get all the brands for the rewards
-      actions.getAllBrandsForRewards([orgID]);
-    },
-    [orgID],
-  );
-
-  const getFulfilmentOptions = () =>
-    getFulfilmentData?.map(fulfilment => ({
-      label: fulfilment.name,
-      value: fulfilment.name,
-    }));
-
-  const getCustomFieldMappingTypes = () => {
-    let options;
-    if (isGenericEvent) {
-      options = [USER_INPUT, BE_ATTRIBUTE, CUSTOMER_EXTENDED_FIELDS];
-    } else if (actionData?.ruleset?.internalShouldUnroll) {
-      options = [
-        USER_INPUT,
-        TXN_EXT_FIELDS,
-        LINE_ITEM_EXT_FIELDS,
-        CUSTOMER_EXTENDED_FIELDS,
-      ];
-    } else options = [USER_INPUT, TXN_EXT_FIELDS, CUSTOMER_EXTENDED_FIELDS];
-
-    return options.map(option => ({
-      label: formatMessage(messages[mappingTypeMessageMap[option]]),
-      value: option,
-    }));
-  };
-
-  const getQtyBasedOnOptions = () => {
-    let options;
-    if (isGenericEvent) {
-      options = [USER_INPUT, BE_ATTRIBUTE, POINTS_ON_EVENT];
-    } else if (actionData?.ruleset?.internalShouldUnroll) {
-      options = [
-        USER_INPUT,
-        TXN_EXT_FIELDS,
-        LINE_ITEM_EXT_FIELDS,
-        POINTS_ON_EVENT,
-      ];
-    } else options = [USER_INPUT, TXN_EXT_FIELDS, POINTS_ON_EVENT];
-
-    return options.map(option => ({
-      label: (
-        <CapRow type="flex" justify="space-between">
-          <CapLabel type="label15">
-            {formatMessage(messages[qtyBasedOnMessageMap[option]])}
-          </CapLabel>
-          <CapTooltipWithInfo
-            title={formatMessage(
-              messages[`${qtyBasedOnMessageMap[option]}Tooltip`],
-            )}
-          />
-        </CapRow>
-      ),
-      value: option,
-    }));
-  };
-
-  const handleQtyBasedOnChange = value => {
-    setQuantityBasedOn(value);
-    setQuantityValue(null);
-  };
-
-  const handleFulfilmentChange = value => {
-    setFulfilmentStatus(value);
-  };
-
-  const getQtyValueOptions = () => {
-    switch (quantityBasedOn) {
-      case TXN_EXT_FIELDS:
-      case LINE_ITEM_EXT_FIELDS:
-        return extendedFields.map(field => ({
-          label: field.label,
-          value: field.name,
-        }));
-      case BE_ATTRIBUTE:
-        return (
-          eventsList
-            ?.find(event => event?.clickEventsMeta?.eventName === eventType)
-            ?.clickEventsMeta?.fields?.filter(field => field?.type === 'DOUBLE')
-            ?.map(field => ({
-              label: field?.name,
-              value: field?.name,
-            })) || []
-        );
-    }
-  };
-  const handleQtyValueChange = value => {
-    setQuantityValue(value);
-  };
-
-  const handleUserInputChange = event => {
-    setQuantityValue(event.target.value);
-  };
-
-  // useEffect(
-  useDeepCompareEffect(
-    () => {
-      // if edit flow, then dispatch action to get the rewards for the previously selected brand
-      if (
-        actionData?.isEditMode &&
-        parseInt(actionData?.brandId, 10) &&
-        lodashHas(rewardsForEachBrand, parseInt(actionData?.brandId, 10))
-      ) {
-        setRewardsForBrand(
-          rewardsForEachBrand[parseInt(actionData?.brandId, 10)],
-        );
-      }
-    },
-    [actionData],
-  );
-
-  useEffect(
-    () => {
-      if (actionData?.mode === VIEW) {
-        // dispatch action to fetch the reward details.
-        if (lodashHas(rewardsForEachBrand, parseInt(actionData?.brandId, 10))) {
-          // if the rewards for the brandID already exisits in the state, then fetch the rewards for the brand ID and filter the reward using rewardID and set the viewModeRewardData useState variable.
-          let requiredReward = rewardsForEachBrand[
-            parseInt(actionData?.brandId, 10)
-          ].filter(({ id }) => id === parseInt(actionData?.rewardId, 10))[0];
-
-          setViewModeRewardData(requiredReward);
-        } else {
-          // if the redux state does not contain the rewards for the given brandID make the API call and populate the state with the rewards for given brandID in view mode.
-          actions.getRewards(
-            parseInt(actionData?.brandId, 10),
-            setViewModeRewardDataCallback,
-            parseInt(actionData?.rewardId, 10),
-            true, //viewMode
-          );
-        }
-      }
-    },
-    [actionData?.mode],
-  );
-
-  useEffect(
-    () => {
-      if (getAllBrandsStatus !== REQUEST) {
-        if (getAllBrandsData.length) {
-          const { id } = getAllBrandsData[0];
-          if (actionData?.mode !== VIEW) changeBrandSelection(id);
-          actions.getFulfilmentStatus();
-          actions.getRewardCustomFields();
-          setShowIllustration(null);
-        } else {
-          setShowIllustration(NO_BRAND);
-        }
-      }
-    },
-    [getAllBrandsStatus],
-  );
-
-  let rewardOptions = useMemo(
-    () => {
-      let rewardOptionsArr = [
-        // REMOVED DUE TO DESIGN CHANGE
-        // {
-        //   label: (
-        //     <CapRow type="flex" className="reward-select-header">
-        //       <CapColumn className="reward-select-left-col">
-        //         {formatMessage(messages.rewardName)}
-        //       </CapColumn>
-        //       <CapColumn className="reward-select-right-col">
-        //         {formatMessage(messages.pointsToBeRedeemed)}
-        //       </CapColumn>
-        //     </CapRow>
-        //   ),
-        //   value: null,
-        //   key: '',
-        // },
-      ];
-      const filteredRewards =
-        rewardsForBrand?.filter(reward => {
-          if (reward?.id === selectedReward) return true;
-          if (
-            getRewardStatus(reward?.startTime, reward?.endTime) !== COMPLETED
-          ) {
-            if (reward?.paymentConfigs?.length > 1) return false; //multiple payment config
-            if (
-              eventType === 'ConvertPointsToReward' &&
-              // (reward?.paymentConfigs?.length > 0
-              // && reward?.paymentConfigs[0]?.paymentMode === 'FREE')    //commenting temporarily
-              (reward?.paymentConfigs?.length > 0 || //for now, all payment config options are hidden for conversion flow
-                reward?.type === 'FREE_VOUCHER') //free voucher not valid for convert points to reward
-            ) {
-              return false;
-            }
-            return true;
-          }
-          return false;
-        }) || [];
-      if (filteredRewards?.length === 0) {
-        setShowIllustration(NO_REWARD);
-      } else {
-        setShowIllustration(null);
-        filteredRewards.forEach(reward => {
-          const valueText = getValueMsg(
-            reward,
-            formatMessage,
-            messages,
-            currencySettings,
-          );
-          rewardOptionsArr.push({
-            label: (
-              <CapRow className="reward-options-parent" type="flex">
-                <CapColumn
-                  className="reward-options-name-section"
-                  title={reward?.name}
-                >
-                  {reward?.name}
-                </CapColumn>
-                <CapColumn className="reward-options-points-section">
-                  <CapRow
-                    className="reward-options-points-text"
-                    title={valueText}
-                  >
-                    {valueText}
-                  </CapRow>
-                  <RewardCatalogTooltip
-                    reward={reward}
-                    tooltipProps={{
-                      getPopupContainer: () =>
-                        document.querySelector(
-                          '.cap-slide-box-v2-container.size-l',
-                        ),
-                      placement: 'bottom',
-                    }}
-                  />
-                </CapColumn>
-              </CapRow>
-            ),
-            value: reward?.id,
-            key: reward?.name,
-          });
-        });
-      }
-      return rewardOptionsArr;
-    },
-    [rewardsForBrand],
-  );
-  const inputLengthError =
-    quantityBasedOn === USER_INPUT && Number(quantityValue) > 10000;
-
-  let viewModeSliderContent = useMemo(
-    () => {
-      const valueText = getValueMsg(
-        viewModeRewardData,
-        formatMessage,
-        messages,
-        currencySettings,
-      );
-      let viewModeHeaderProps = [
-        getViewModeRow(
-          formatMessage(messages.catalogReward),
-          <CapRow type="flex" align="center">
-            {viewModeRewardData?.name}
-            <CapRow className="reward-view-points-text">{valueText}</CapRow>
-            <RewardCatalogTooltip
-              reward={viewModeRewardData}
-              tooltipProps={{
-                className: 'reward-view-header-info',
-                placement: 'rightTop',
-              }}
-            />
-          </CapRow>,
-        ),
-      ];
-      if (eventType !== 'ConvertPointsToReward' && actionData?.mode === VIEW) {
-        viewModeHeaderProps.push(
-          getViewModeRow(
-            formatMessage(messages.qtyBasedOnHeader),
-            <ViewLabelWithInfoTooltip
-              title={formatMessage(
-                messages[qtyBasedOnMessageMap[quantityBasedOn]],
-              )}
-              tooltipTitle={formatMessage(
-                messages[`${qtyBasedOnMessageMap[quantityBasedOn]}Tooltip`],
-              )}
-            />,
-          ),
-        );
-        if (quantityBasedOn !== POINTS_ON_EVENT)
-          viewModeHeaderProps.push(
-            getViewModeRow(
-              <ViewLabelWithInfoTooltip
-                title={formatMessage(
-                  messages[qtyBasedOnMessageMap[quantityBasedOn]],
-                )}
-                tooltipTitle={formatMessage(
-                  messages[`${qtyBasedOnMessageMap[quantityBasedOn]}Tooltip`],
-                )}
-              />,
-              quantityValue,
-            ),
-          );
-      }
-      viewModeHeaderProps.push(
-        getViewModeRow(
-          <ViewLabelWithInfoTooltip
-            title={formatMessage(messages.fulfilmentStatusHeader)}
-            tooltipTitle={formatMessage(messages.fulfilmentStatusByline)}
-          />,
-          fulfilmentStatus || '-',
-        ),
-      );
-      viewModeHeaderProps.push(
-        getViewModeRow(
-          <ViewLabelWithInfoTooltip
-            title={formatMessage(messages.notesHeader)}
-            tooltipTitle={formatMessage(messages.notesByline)}
-          />,
-          notes || '-',
-        ),
-      );
-      customFields?.length === 0 &&
-        viewModeHeaderProps.push(
-          getViewModeRow(
-            <ViewLabelWithInfoTooltip
-              title={formatMessage(customFieldMessages.rewardTxnCustomFields)}
-              tooltipTitle={formatMessage(
-                customFieldMessages.rewardTransactionCustomFieldsByline,
-              )}
-            />,
-            '-',
-          ),
-        );
-      return (
-        <CapSpin
-          spinning={
-            rewardsForEachBrandStatus === REQUEST || !viewModeRewardData
-          }
-        >
-          <CapRow type="flex" className="catalog-view-mode-parent">
-            {viewModeHeaderProps.map(props => (
-              <ActionViewModeHeader {...props} />
-            ))}
-            {customFields?.length !== 0 && (
-              <>
-                {getCustomFieldsStatus === REQUEST ? (
-                  <CapSkeleton active paragraph={{ rows: 2 }} title={false} />
-                ) : (
-                  <IssueRewardsCustomFields
-                    customFields={customFields}
-                    setCustomFields={setCustomFields}
-                    mappingOptions={getCustomFieldMappingTypes()}
-                    eventType={eventType}
-                    programId={programId}
-                    slideboxMode={actionData?.mode}
-                    validateCustomFields={validateCustomFields}
-                    setValidateCustomFields={setValidateCustomFields}
-                  />
-                )}
-              </>
-            )}
-          </CapRow>
-        </CapSpin>
-      );
-    },
-    [rewardsForEachBrandStatus, viewModeRewardData, getCustomFieldsStatus],
-  );
-
-  const changeBrandSelection = selection => {
-    setSelectedBrand(selection);
-    setRewardsForBrand([]);
-    actions.getRewards(selection, getRewardsCallbackFn, selectedReward);
-  };
-
-  const handleNotesChange = event => {
-    setNotes(event.target.value);
-  };
-
-  const changeRewardSelection = selection => {
-    setSelectedReward(selection);
-  };
-
-  const openRewardsUI = () =>
-    window.open(REWARDS_UI_LINK, '_blank', 'noreferrer');
-
-  const getPayload = () => {
-    let payload = {
-      source,
-      brandId: selectedBrand,
-      rewardId: selectedReward,
-      brandName: getBrandNameFromID(selectedBrand, getAllBrandsData),
-      ...getCommSaveData({ dataSource: actionData }),
-    };
-    if (eventType !== 'ConvertPointsToReward') {
-      payload = {
-        ...payload,
-        quantityBasedOn,
-        quantityValue,
-        isRewardIssualForCustomerActivity: true,
-      };
-    }
-    if (fulfilmentStatus) {
-      payload.fulfilmentStatus = fulfilmentStatus;
-    }
-    if (notes) {
-      payload.notes = notes;
-    }
-    if (customFields && customFields.length > 0) {
-      payload.customFields = JSON.stringify(
-        customFields.map(field => {
-          delete field.id;
-          return field;
-        }),
-      );
-    }
-
-    return payload;
-  };
-  const saveSlidebox = () => {
-    const { programId, actionType } = actionData;
-    let payload = {};
-    if (programId && actionType) {
-      payload = getPayload();
-    }
-    globalActions.upsertAction(
-      programId,
-      CONVERT_POINTS_TO_REWARD_ACTION,
-      payload,
-      result => {
-        updateRuleSet(actionData, result);
-      },
-    );
-  };
-
-  const isSpinning =
-    getAllBrandsStatus === REQUEST ||
-    rewardsForEachBrandStatus === REQUEST ||
-    getFulfilmentStatus === REQUEST;
-
-  const isStateEqual =
-    actionData.isEditMode &&
-    areStatesEqual(
-      actionData,
-      {
-        selectedBrand,
-        selectedReward,
-        quantityBasedOn,
-        quantityValue,
-        notes,
-        fulfilmentStatus,
-        customFields,
-      },
-      eventType,
-    );
-
-  const isSaveDisabled =
-    isStateEqual ||
-    selectedBrand === null ||
-    selectedReward === null ||
-    showIllustration ||
-    (eventType !== CONVERT_POINTS_TO_REWARDS &&
-      (!quantityBasedOn ||
-        inputLengthError ||
-        (!quantityValue && quantityBasedOn !== POINTS_ON_EVENT))) ||
-    validateCustomFields?.length > 0;
-
-  const SliderContent = (
-    <CapSpin spinning={isSpinning}>
-      {isSpinning ? (
-        <CapRow className="blank-div" /> //blank div to accomodate spinner
-      ) : showIllustration ? (
-        <IllustrationWithTitleAndDesc
-          imageSrc={emptyStateIlustration}
-          imageClassName="empty-illustration-image"
-          title={formatMessage(
-            messages[emptyStateMessageMap[showIllustration].title],
-          )}
-          titleClassName="empty-illustration-title"
-          desc={
-            <>
-              {formatMessage(
-                messages[emptyStateMessageMap[showIllustration].desc],
-              )}
-              {showIllustration === NO_REWARD && (
-                <CapLink
-                  title={
-                    <CapRow
-                      type="flex"
-                      align="middle"
-                      className="tooltip-link-redirect"
-                    >
-                      {formatMessage(messages.goToOldUI)}
-                      <CapIcon
-                        type="open-in-new-light"
-                        className="tooltip-redirect-icon"
-                      />
-                    </CapRow>
-                  }
-                  onClick={openRewardsUI}
-                />
-              )}
-            </>
-          }
-          descClassname="empty-illustration-desc"
-          containerClassName="empty-illustration-container"
-        />
-      ) : (
-        <CapRow type="flex" className="issue-catalog-slidebox-content-parent">
-          {eventType !== 'ConvertPointsToReward' && (
-            <InfoBanner
-              className="reward-catalog-info-text"
-              title={formatMessage(messages.nonConversionNote)}
-              iconType="info"
-            />
-          )}
-          {(getRewardStatus(
-            currentRewardData?.startTime,
-            currentRewardData?.endTime,
-          ) === COMPLETED ||
-            currentRewardData?.enabled === false) && (
-            <InfoBanner
-              className="reward-catalog-info-text"
-              title={formatMessage(messages.rewardExpiredNote, {
-                startDate: moment(currentRewardData?.startTime).format(
-                  'D MMM YYYY',
-                ),
-                endDate: moment(selectedReward?.endTime).format('D MMM YYYY'),
-              })}
-              iconType="info"
-            />
-          )}
-          <CapRow type="flex" className="reward-select-section">
-            <CapHeader
-              title={formatMessage(globalMessages.issueCatalogReward)}
-              description={formatMessage(messages.selectReward)}
-              size="regular"
-              className="reward-catalog-header"
-            />
-            <InfoBanner
-              className="reward-catalog-info-text"
-              title={formatMessage(messages.catalogNoteText)}
-              iconType="info"
-            />
-            <CapRow className="rewards-section">
-              <CapCustomSelect
-                showArrow
-                showSearch
-                useKeyForSearch
-                selectPlaceholder={formatMessage(
-                  messages.selectRewardPlaceholder,
-                )}
-                searchPlaceholder={formatMessage(globalMessages.search)}
-                noResultsFoundText={formatMessage(
-                  globalMessages.noResultsFound,
-                )}
-                disabled={selectedBrand === null ? true : false}
-                options={rewardOptions}
-                className={classnames(
-                  'issue-catalog-dropdowns',
-                  'reward-dropdown',
-                )}
-                width="28.571rem"
-                popoverClassName="reward-dropdown-popover"
-                value={selectedReward ? selectedReward : undefined}
-                onChange={changeRewardSelection}
-                getPopupContainer={node => node.parentElement}
-                loading={rewardsForEachBrandStatus === REQUEST}
-              />
-            </CapRow>
-          </CapRow>
-          {eventType !== 'ConvertPointsToReward' && (
-            <>
-              <CapRow type="flex" className="qty-based-on-section">
-                <CapHeader
-                  title={formatMessage(messages.qtyBasedOnHeader)}
-                  size="regular"
-                  className="reward-catalog-header"
-                />
-                <CapCustomSelect
-                  showArrow
-                  selectPlaceholder={formatMessage(
-                    messages.qtyBasedOnPlaceholder,
-                  )}
-                  options={getQtyBasedOnOptions()}
-                  width="28.571rem"
-                  value={quantityBasedOn}
-                  onChange={handleQtyBasedOnChange}
-                  className="qty-based-on-select"
-                />
-              </CapRow>
-              {quantityBasedOn &&
-                quantityBasedOn !== POINTS_ON_EVENT && (
-                  <CapRow type="flex" className="qty-value-section">
-                    <CapHeader
-                      title={formatMessage(
-                        messages[qtyBasedOnMessageMap[quantityBasedOn]],
-                      )}
-                      description={
-                        quantityBasedOn !== 'USER_INPUT' && (
-                          <CapRow>
-                            {formatMessage(messages.qtyValueDesc)}
-                          </CapRow>
-                        )
-                      }
-                      size="regular"
-                      className="reward-catalog-header"
-                    />
-                    {quantityBasedOn === USER_INPUT ? (
-                      <NumberInput
-                        className={classnames('qty-user-input', {
-                          'error-input': inputLengthError,
-                        })}
-                        type={POSITIVE_INTEGER}
-                        value={quantityValue}
-                        onChange={handleUserInputChange}
-                        placeholder={formatMessage(
-                          messages.userInputPlaceholder,
-                        )}
-                        errorMessage={
-                          inputLengthError &&
-                          formatMessage(messages.inputMaxLimit)
-                        }
-                      />
-                    ) : (
-                      <CapSpin spinning={getExtendedFieldStatus === REQUEST}>
-                        <CapCustomSelect
-                          showArrow
-                          selectPlaceholder={formatMessage(
-                            messages[qtyValuePlaceholderMap[quantityBasedOn]],
-                          )}
-                          options={getQtyValueOptions()}
-                          width="28.571rem"
-                          value={quantityValue}
-                          onChange={handleQtyValueChange}
-                          className="qty-value-select"
-                        />
-                        <CapTooltipWithInfo
-                          title={formatMessage(
-                            quantityBasedOn === BE_ATTRIBUTE
-                              ? messages.qtyValueBEDescTooltip
-                              : messages.qtyValueDescTooltip,
-                          )}
-                        />
-                      </CapSpin>
-                    )}
-                  </CapRow>
-                )}
-            </>
-          )}
-          <CapRow type="flex" className="qty-based-on-section">
-            <CapHeader
-              title={
-                <>
-                  {formatMessage(messages.fulfilmentStatusHeader)}
-                  <CapLabel.CapLabelInline
-                    type="label3"
-                    className="notes-header-label"
-                  >
-                    {` (${formatMessage(globalMessages.optional)})`}
-                  </CapLabel.CapLabelInline>
-                </>
-              }
-              description={formatMessage(messages.fulfilmentStatusByline)}
-              size="regular"
-              className="reward-catalog-header"
-            />
-            <CapCustomSelect
-              showArrow
-              selectPlaceholder={formatMessage(
-                messages.fulfilmentStatusPlaceholder,
-              )}
-              options={getFulfilmentOptions()}
-              width="28.571rem"
-              value={fulfilmentStatus}
-              onChange={handleFulfilmentChange}
-              className="qty-based-on-select"
-              popoverClassName={classnames(className, 'fulfilment-popover')}
-              noResultsFoundText={
-                <CapRow className="fulfilment-status-missing" type="flex">
-                  <CapLabel type="label17" className="no-fulfilment-header">
-                    {formatMessage(messages.noFulfilmentStatus)}
-                  </CapLabel>
-                  <CapRow type="flex" justify="center">
-                    <CapLink
-                      title={
-                        <CapRow
-                          type="flex"
-                          align="middle"
-                          className="tooltip-link-redirect"
-                        >
-                          {formatMessage(messages.goToDocumentation)}
-                        </CapRow>
-                      }
-                      onClick={openRewardsUI}
-                    />
-                  </CapRow>
-                </CapRow>
-              }
-            />
-          </CapRow>
-          <CapRow type="flex" className="qty-based-on-section">
-            <CapHeader
-              title={
-                <>
-                  {formatMessage(messages.notesHeader)}
-                  <CapLabel.CapLabelInline
-                    type="label3"
-                    className="notes-header-label"
-                  >
-                    {` (${formatMessage(globalMessages.optional)})`}
-                  </CapLabel.CapLabelInline>
-                </>
-              }
-              description={formatMessage(messages.notesByline)}
-              size="regular"
-              className="reward-catalog-header"
-            />
-            <TextArea
-              maxLength={250}
-              className="notes-textarea"
-              selectPlaceholder={formatMessage(messages.notesPlaceholder)}
-              value={notes}
-              onChange={handleNotesChange}
-            />
-          </CapRow>
-          {getCustomFieldsStatus === SUCCESS && (
-            <IssueRewardsCustomFields
-              customFields={customFields}
-              setCustomFields={setCustomFields}
-              mappingOptions={getCustomFieldMappingTypes()}
-              eventType={eventType}
-              programId={programId}
-              slideboxMode={actionData?.mode}
-              validateCustomFields={validateCustomFields}
-              setValidateCustomFields={setValidateCustomFields}
-            />
-          )}
-        </CapRow>
-      )}
-    </CapSpin>
-  );
-
-  const slideBoxFooter = (
-    <>
-      {!showIllustration &&
-        !isSpinning && (
-          <CapTooltip
-            title={
-              isSaveDisabled
-                ? isStateEqual
-                  ? formatMessage(messages.disabledButtonWithoutEditTooltipText)
-                  : formatMessage(messages.disabledButtonTooltipText)
-                : ''
-            }
-          >
-            <span className="button-tooltip-disabled-wrapper">
-              <TriggerAction
-                title={formatMessage(globalMessages.done)}
-                triggerAction={saveSlidebox}
-                isDisabled={isSaveDisabled}
-              />
-            </span>
-          </CapTooltip>
-        )}
-    </>
-  );
-
-  return (
-    <CapSlideBox
-      showShadow
-      show
-      header={<ActionTitle actionData={actionData} />}
-      content={
-        actionData?.mode === VIEW ? viewModeSliderContent : SliderContent
-      }
-      footer={actionData?.mode === VIEW ? '' : slideBoxFooter}
-      handleClose={closeSlidebox}
-      size="size-l"
-      className={className}
-    />
-  );
-};
-
-const mapStateToProps = createStructuredSelector({
-  actionDetailsData: makeSelectUpsertAction(),
-  orgData: makeSelectOrg(),
-  brandDetails: makeSelectBrandData(),
-  extendedFieldsData: makeSelectExtendedFields(),
-  eventsListData: makeSelectEventsList(),
-  userData: makeSelectCap(),
-});
-
-function mapDispatchToProps(dispatch) {
-  return {
-    globalActions: bindActionCreators(globalActions, dispatch),
-    actions: bindActionCreators(actions, dispatch),
-    workflowActions: bindActionCreators(workflowActions, dispatch),
-  };
-}
-
-const withConnect = connect(
-  mapStateToProps,
-  mapDispatchToProps,
-);
-
-const withSaga = injectSaga({ key: 'issueCatalogRewards', saga });
-const withReducer = injectReducer({ key: 'issueCatalogRewards', reducer });
-
-IssueCatalogRewardsAction.propTypes = {
-  intl: intlShape.isRequired,
-  closeSlidebox: PropTypes.func,
-  actionData: PropTypes.object,
-  globalActions: PropTypes.object,
-  source: PropTypes.string,
-  updateRuleSet: PropTypes.func,
-  className: PropTypes.object,
-  orgData: PropTypes.object,
-  actions: PropTypes.object,
-  brandDetails: PropTypes.object,
-  eventType: PropTypes.string,
-  workflowActions: PropTypes.object,
-  currentProgram: PropTypes.object,
-  extendedFieldsData: PropTypes.object,
-  eventsListData: PropTypes.object,
-  isGenericEvent: PropTypes.bool,
-  userData: PropTypes.object,
-};
-
-export default compose(
-  withErrorBoundary,
-  withConnect,
-  withSaga,
-  withReducer,
-)(injectIntl(withStyles(IssueCatalogRewardsAction, styles)));