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

package/components/molecules/IssueRewardsCustomFields/IssueRewardsCustomFields.js

@@ -1,892 +0,0 @@
-import React, { useEffect, useMemo, useState } from 'react';
-import { v4 as uuidv4 } from 'uuid';
-import CapTable from '@capillarytech/cap-ui-library/CapTable';
-import CapButton from '@capillarytech/cap-ui-library/CapButton';
-import CapMultiSelect from '@capillarytech/cap-ui-library/CapMultiSelect';
-import CapLabel from '@capillarytech/cap-ui-library/CapLabel';
-import CapIcon from '@capillarytech/cap-ui-library/CapIcon';
-import CapSelect from '@capillarytech/cap-ui-library/CapSelect';
-import CapInput from '@capillarytech/cap-ui-library/CapInput';
-import CapRow from '@capillarytech/cap-ui-library/CapRow';
-import CapHeader from '@capillarytech/cap-ui-library/CapHeader';
-import CapDropdown from '@capillarytech/cap-ui-library/CapDropdown';
-import CapMenu from '@capillarytech/cap-ui-library/CapMenu';
-import CapTooltipWithInfo from '@capillarytech/cap-ui-library/CapTooltipWithInfo';
-import { bindActionCreators, compose } from 'redux';
-import { connect } from 'react-redux';
-import { injectIntl } from 'react-intl';
-import { createStructuredSelector } from 'reselect';
-import withStyles from 'utils/withStyles';
-import classnames from 'classnames';
-import moment from 'moment';
-import PropTypes from 'prop-types';
-import CapNotification from '@capillarytech/cap-ui-library/CapNotification';
-import CapTooltip from '@capillarytech/cap-ui-library/CapTooltip';
-import CapLink from '@capillarytech/cap-ui-library/CapLink';
-import { makeSelectCustomFieldsData } from '../../organisms/IssueCatalogRewardsAction/selectors';
-import { makeSelectEventsList } from '../../organisms/ConfigureWorkflows/selectors';
-import * as globalActions from '../../pages/Cap/actions';
-import * as actions from '../../organisms/IssueCatalogRewardsAction/actions';
-import {
-  ADD,
-  BILL_EXTENDED_FIELD,
-  CUSTOMER_EXTENDED_FIELD,
-  DATE_FORMAT,
-  EDIT,
-  LINEITEM_EXTENDED_FIELD,
-  REQUEST,
-  TIME_FORMAT,
-  VIEW,
-} from '../../pages/App/constants';
-import {
-  BE_ATTRIBUTE,
-  CUSTOMER_EXTENDED_FIELDS,
-  INVALID_CF,
-  LINE_ITEM_EXT_FIELDS,
-  mappingTypeMessageMap,
-  PENDING_EDIT,
-  REWARDS_DOCS_LINK,
-  TXN_EXT_FIELDS,
-  USER_INPUT,
-} from '../../organisms/IssueCatalogRewardsAction/constants';
-import {
-  EXT_FIELD_TYPE_MAPPING,
-  getBEMappedEntityOptions,
-  getColumnAttribute,
-  getExtFieldsMappedEntityOptions,
-  globalToLocalCustomFields,
-  localToGlobalCustomFields,
-} from './utils';
-import messages from './messages';
-import rewardMessages from '../../organisms/IssueCatalogRewardsAction/messages';
-import globalMessages from '../../pages/Cap/messages';
-import { makeSelectExtendedFields } from '../../pages/Cap/selectors';
-import style from './style';
-import DateTimePicker from '../../atoms/DateTimePicker';
-import { convertToTitleCase } from '../../organisms/IssueCatalogRewardsAction/utils';
-import { ViewLabelWithInfoTooltip } from '../../organisms/IssueCatalogRewardsAction/IssueCatalogRewardsAction';
-import { POSITIVE_INTEGER_REGEX } from '../NumberInput/constants';
-import SvgCustomClose from '../../atoms/CustomIcons/CustomClose';
-import SvgCustomTick from '../../atoms/CustomIcons/CustomTick';
-import SvgCustomDelete from '../../atoms/CustomIcons/CustomDelete';
-
-export const RewardFieldLabel = ({
-  formatMessage,
-  marvelCustomFieldName,
-  dataType,
-  isValid,
-}) => (
-  <>
-    {marvelCustomFieldName}
-    {isValid ? (
-      <CapTooltipWithInfo
-        title={
-          <>
-            <CapLabel.CapLabelInline type="label6">
-              {`${formatMessage(messages.dataType)} `}
-            </CapLabel.CapLabelInline>
-            <CapLabel.CapLabelInline type="label10">
-              {convertToTitleCase(dataType)}
-            </CapLabel.CapLabelInline>
-          </>
-        }
-        className="reward-custom-field-info"
-      />
-    ) : (
-      <CapTooltipWithInfo
-        title={formatMessage(messages.invalidCustomField)}
-        className="warning-tooltip-error"
-        infoIconProps={{ type: 'warning' }}
-      />
-    )}
-  </>
-);
-
-export const CFTableHeader = ({ title, tooltipMsg }) => (
-  <CapRow type="flex">
-    <CapLabel>{title}</CapLabel>
-    <CapTooltipWithInfo
-      title={tooltipMsg}
-      className="reward-custom-field-info"
-    />
-  </CapRow>
-);
-
-export const IssueRewardsCustomFields = ({
-  customFields,
-  setCustomFields,
-  mappingOptions,
-  globalActions,
-  intl: { formatMessage },
-  customFieldsData: { customFieldsList, customFieldsMap },
-  eventsListData: { eventsList = [] } = {},
-  extendedFieldsData: { extendedFields = [], getExtendedFieldStatus } = {},
-  eventType,
-  programId,
-  className,
-  validateCustomFields,
-  setValidateCustomFields,
-  slideboxMode,
-}) => {
-  const [appliedCFKeys, setAppliedCFKeys] = useState(
-    (customFields || []).map(cf => cf.marvelCustomFieldName),
-  );
-  const [localCustomFields, setLocalCustomFields] = useState(
-    globalToLocalCustomFields(customFields, customFieldsMap),
-  );
-  const isEditing = localCustomFields?.some(field => field.mode === EDIT);
-  const extendedFieldsLabelMap = useMemo(
-    () =>
-      Object.values(EXT_FIELD_TYPE_MAPPING).reduce((acc, fieldType) => {
-        acc[fieldType] = extendedFields?.[fieldType]?.reduce((acc2, field) => {
-          acc2[field.name] = field.label;
-          return acc2;
-        }, {});
-        return acc;
-      }, {}),
-    [extendedFields],
-  );
-  useEffect(() => {
-    if (getExtendedFieldStatus !== REQUEST)
-      globalActions.getMultipleExtendedFields(
-        [BILL_EXTENDED_FIELD, CUSTOMER_EXTENDED_FIELD, LINEITEM_EXTENDED_FIELD],
-        programId,
-        'DATETIME, DATE, INTEGER, STRING, BOOLEAN, DOUBLE',
-      );
-  }, []);
-
-  useEffect(
-    () => {
-      let validate = [];
-      if (localCustomFields?.some(field => field.mode !== VIEW)) {
-        validate.push(PENDING_EDIT);
-      }
-      if (localCustomFields?.some(field => !field.isValid)) {
-        validate.push(INVALID_CF);
-      }
-      setValidateCustomFields(() => validate);
-    },
-    [localCustomFields],
-  );
-
-  const openRewardsDocsLink = () =>
-    window.open(REWARDS_DOCS_LINK, '_blank', 'noreferrer');
-
-  useEffect(
-    () => {
-      //useEffect to push mandatoryCustomFields automatically
-      if (slideboxMode !== VIEW) {
-        const newCustomFields = customFieldsList
-          .filter(option => !appliedCFKeys.includes(option.name)) //filter out already present
-          .filter(option => option.isMandatory) //filter out only mandatory
-          .map(option => {
-            const { name, dataType, defaultValue, isMandatory } = option;
-            return {
-              marvelCustomFieldName: name,
-              dataType,
-              mode: VIEW,
-              type: USER_INPUT,
-              isMandatory,
-              mappedToValue: defaultValue,
-              defaultValue,
-              id: uuidv4(),
-              isValid: true,
-            };
-          });
-        setLocalCustomFields(prev => {
-          const updatedCustomFields = [...prev, ...newCustomFields];
-          setCustomFields(
-            localToGlobalCustomFields(
-              updatedCustomFields.filter(cf => cf.mode === VIEW),
-            ),
-          );
-          return updatedCustomFields;
-        });
-        setAppliedCFKeys(prev => [
-          ...prev,
-          ...newCustomFields.map(cf => cf.marvelCustomFieldName),
-        ]);
-      }
-    },
-    [customFieldsList],
-  );
-
-  const getCustomFieldsOptions = useMemo(
-    () =>
-      (customFieldsList || []).map((field, index) => ({
-        key: field.name,
-        title: (
-          <CapRow type="flex" justify="space-between">
-            <CapLabel type="label15">{field.name}</CapLabel>
-            <CapTooltipWithInfo
-              title={
-                <>
-                  <CapLabel.CapLabelInline type="label6">
-                    {`${formatMessage(messages.dataType)} `}
-                  </CapLabel.CapLabelInline>
-                  <CapLabel.CapLabelInline type="label10">
-                    {convertToTitleCase(field.dataType)}
-                  </CapLabel.CapLabelInline>
-                </>
-              }
-              className="reward-custom-field-info"
-            />
-          </CapRow>
-        ),
-        value: field.name,
-        type: field.dataType,
-        className: appliedCFKeys.includes(field.name) && 'disabledCF',
-      })),
-    [customFieldsList, appliedCFKeys],
-  );
-
-  const AddRows = options => {
-    const newCustomFields = options
-      .filter(option => !appliedCFKeys.includes(option))
-      .map(option => {
-        const field = customFieldsMap?.[option];
-        const { name, dataType, defaultValue, isMandatory } = field;
-        return {
-          marvelCustomFieldName: name,
-          dataType,
-          mode: ADD,
-          type: undefined,
-          isMandatory,
-          mappedToValue: undefined,
-          defaultValue,
-          id: uuidv4(),
-          isValid: true,
-        };
-      });
-    setLocalCustomFields(prev => [...prev, ...newCustomFields]);
-    setAppliedCFKeys(prev => [...new Set([...prev, ...options])]);
-  };
-
-  const getColumns = () => {
-    const columns = [
-      {
-        key: 'rewardCustomFields',
-        title: (
-          <CFTableHeader
-            title={
-              <CapLabel>
-                {formatMessage(messages.rewardTxnCustomFields)}
-              </CapLabel>
-            }
-            tooltipMsg={formatMessage(messages.rewardTxnCustomFieldsTooltip)}
-          />
-        ),
-      },
-      {
-        key: 'mappingType',
-        title: (
-          <CFTableHeader
-            title={<CapLabel>{formatMessage(messages.mappingType)}</CapLabel>}
-            tooltipMsg={formatMessage(messages.mappingTypeTooltip)}
-          />
-        ),
-      },
-      {
-        key: 'mappedToValue',
-        title: (
-          <CFTableHeader
-            title={<CapLabel>{formatMessage(messages.mappedEntity)}</CapLabel>}
-            tooltipMsg={formatMessage(messages.mappedEntityTooltip)}
-          />
-        ),
-      },
-      {
-        key: 'actions',
-        title: '',
-      },
-    ];
-    return columns.map(column => getColumnAttribute(column.key, column.title));
-  };
-  const checkInputValid = (dataType, mappedToValue) => {
-    if (!mappedToValue) {
-      return true;
-    }
-    if (dataType === 'INTEGER') {
-      return (
-        !isNaN(mappedToValue) && POSITIVE_INTEGER_REGEX.test(mappedToValue)
-      );
-    } else return true; //removed string validation
-  };
-  const getMappedEntityComponent = (
-    type,
-    dataType,
-    handleMappedEntitySelect,
-    mappedToValue,
-  ) => {
-    if (
-      [CUSTOMER_EXTENDED_FIELDS, TXN_EXT_FIELDS, LINE_ITEM_EXT_FIELDS].includes(
-        type,
-      )
-    ) {
-      return (
-        <CapSelect
-          options={getExtFieldsMappedEntityOptions(
-            extendedFields,
-            type,
-            dataType,
-          )}
-          className={classnames('cf-table-dropdown', {
-            'show-placeholder': !mappedToValue,
-          })}
-          dropdownClassName={classnames(className, 'cf-popover')}
-          placeholder={formatMessage(messages.mappedToPlaceholder)}
-          onChange={handleMappedEntitySelect}
-          value={mappedToValue}
-          showSearch
-          optionFilterProp="label"
-        />
-      );
-    } else if (type === BE_ATTRIBUTE) {
-      return (
-        <CapSelect
-          options={getBEMappedEntityOptions(eventsList, eventType, dataType)}
-          onChange={handleMappedEntitySelect}
-          value={mappedToValue}
-          placeholder={formatMessage(messages.mappedToPlaceholder)}
-          className={classnames('cf-table-dropdown', {
-            'show-placeholder': !mappedToValue,
-          })}
-          dropdownClassName={classnames(className, 'cf-popover')}
-          showSearch
-          optionFilterProp="label"
-        />
-      );
-    } else if (
-      type === 'USER_INPUT' &&
-      ['INTEGER', 'STRING'].includes(dataType)
-    ) {
-      const checkError = () => !checkInputValid(dataType, mappedToValue);
-      return (
-        <CapInput
-          type="text"
-          value={mappedToValue}
-          className={classnames('cf-table-dropdown', {
-            'error-border': checkError(),
-          })}
-          errorMessage={checkError() ? formatMessage(messages.valueError) : ''}
-          placeholder={formatMessage(messages.mappedToPlaceholder)}
-          onChange={e => handleMappedEntitySelect(e.target.value)}
-          showSearch
-          optionFilterProp="label"
-        />
-      );
-    } else if (type === 'USER_INPUT' && ['BOOLEAN'].includes(dataType)) {
-      return (
-        <CapSelect
-          options={[
-            { label: formatMessage(globalMessages.yes), value: 'true' },
-            { label: formatMessage(globalMessages.no), value: 'false' },
-          ]}
-          placeholder={formatMessage(messages.mappedToPlaceholder)}
-          className={classnames('cf-table-dropdown', {
-            'show-placeholder': !mappedToValue,
-          })}
-          onChange={handleMappedEntitySelect}
-          value={mappedToValue}
-          dropdownClassName={classnames(className, 'cf-popover')}
-          showSearch
-          optionFilterProp="label"
-        />
-      );
-    } else if (
-      type === 'USER_INPUT' &&
-      ['DATE', 'DATETIME'].includes(dataType)
-    ) {
-      return (
-        <DateTimePicker
-          value={mappedToValue}
-          setValue={handleMappedEntitySelect}
-          formatMessage={formatMessage}
-        />
-      );
-    } else
-      return (
-        <CapTooltip title={formatMessage(messages.mappedToDisabledText)}>
-          <span>
-            <CapSelect
-              disabled
-              options={[]}
-              placeholder={formatMessage(messages.mappedToPlaceholder)}
-              className="cf-table-dropdown"
-              dropdownClassName={classnames(className, 'cf-popover')}
-              showSearch
-              optionFilterProp="label"
-            />
-          </span>
-        </CapTooltip>
-      );
-  };
-
-  const getDatasource = () => {
-    const dataSource = localCustomFields?.map(
-      ({
-        marvelCustomFieldName,
-        dataType,
-        mode,
-        type,
-        mappedToValue,
-        isMandatory,
-        id,
-        isValid,
-      }) => {
-        const setEdit = () => {
-          const newCustomFields = localCustomFields?.map(field => {
-            if (field.id === id) {
-              field.mode = EDIT;
-            }
-            return field;
-          });
-          setLocalCustomFields(newCustomFields);
-        };
-        const checkError = () => !checkInputValid(dataType, mappedToValue);
-        const getMappedToLabel = () => {
-          if (
-            [
-              CUSTOMER_EXTENDED_FIELDS,
-              TXN_EXT_FIELDS,
-              LINE_ITEM_EXT_FIELDS,
-            ].includes(type)
-          )
-            return extendedFieldsLabelMap?.[EXT_FIELD_TYPE_MAPPING?.[type]]?.[
-              mappedToValue
-            ];
-          else if (type === USER_INPUT && dataType === 'BOOLEAN')
-            return mappedToValue
-              ? formatMessage(globalMessages.yes)
-              : formatMessage(globalMessages.no);
-          else if (type === USER_INPUT && dataType === 'DATE')
-            return moment(mappedToValue).format('ll LTS');
-          else return mappedToValue;
-        };
-
-        const getEditMenu = () => (
-          <CapMenu>
-            <CapMenu.Item onClick={setEdit} disabled={isEditing || !isValid}>
-              <CapTooltip
-                title={isEditing && formatMessage(messages.multipleEditError)}
-              >
-                {formatMessage(globalMessages.edit)}
-              </CapTooltip>
-            </CapMenu.Item>
-            <CapMenu.Item onClick={handleDelete} disabled={isMandatory}>
-              {formatMessage(globalMessages.delete)}
-            </CapMenu.Item>
-          </CapMenu>
-        );
-        const handleSave = () => {
-          let isEdit = false;
-          const newCustomFields = localCustomFields?.map(field => {
-            if (field.id === id) {
-              if (field.mode === EDIT) isEdit = true;
-              field.mode = VIEW;
-            }
-            return field;
-          });
-          setLocalCustomFields(newCustomFields);
-          setCustomFields(
-            localToGlobalCustomFields(
-              newCustomFields.filter(cf => cf.mode === VIEW),
-            ),
-          );
-          if (isEdit)
-            CapNotification.success({
-              message: formatMessage(messages.editSuccessNotification, {
-                name: marvelCustomFieldName,
-              }),
-            });
-        };
-
-        const handleReset = () => {
-          const newCustomFields = localCustomFields?.map(field => {
-            if (field.id === id) {
-              return {
-                ...field,
-                ...customFields.find(cf => cf.id === id), //get old state from globalCustomFields
-                mode: VIEW,
-              };
-            }
-            return field;
-          });
-          setLocalCustomFields(newCustomFields);
-        };
-        const handleDelete = () => {
-          const newCustomFields = localCustomFields?.filter(
-            field => field.id !== id,
-          );
-          setAppliedCFKeys(
-            appliedCFKeys.filter(key => key !== marvelCustomFieldName),
-          );
-          setLocalCustomFields(newCustomFields);
-          setCustomFields(
-            localToGlobalCustomFields(
-              newCustomFields.filter(cf => cf.mode === VIEW),
-            ),
-          );
-          CapNotification.success({
-            message: formatMessage(messages.deleteSuccessNotification, {
-              name: marvelCustomFieldName,
-            }),
-          });
-        };
-        const handleMappingTypeSelect = value => {
-          const newCustomFields = localCustomFields?.map(field => {
-            if (field.id === id) {
-              field.type = value;
-              field.mappedToValue = undefined;
-            }
-            return field;
-          });
-          setLocalCustomFields(newCustomFields);
-        };
-
-        const handleMappedEntitySelect = value => {
-          const newCustomFields = localCustomFields?.map(field => {
-            if (field.id === id) {
-              field.mappedToValue = value;
-            }
-            return field;
-          });
-          setLocalCustomFields(newCustomFields);
-        };
-
-        if (mode === EDIT) {
-          return {
-            key: id,
-            rewardCustomFields: (
-              <RewardFieldLabel
-                marvelCustomFieldName={marvelCustomFieldName}
-                dataType={dataType}
-                formatMessage={formatMessage}
-                isValid={isValid}
-              />
-            ),
-
-            mappingType: (
-              <CapSelect
-                options={mappingOptions}
-                onChange={handleMappingTypeSelect}
-                value={type}
-                placeholder={formatMessage(messages.mappingTypePlaceholder)}
-                className={classnames('cf-table-dropdown', {
-                  'show-placeholder': !type,
-                })}
-                dropdownClassName={classnames(className, 'cf-popover')}
-              />
-            ),
-            mappedToValue: getMappedEntityComponent(
-              type,
-              dataType,
-              handleMappedEntitySelect,
-              mappedToValue,
-            ),
-            actions: (
-              <>
-                <CapIcon
-                  className="row-action-icon"
-                  type="tick"
-                  component={SvgCustomTick}
-                  disabled={
-                    !type ||
-                    !mappedToValue ||
-                    (type === USER_INPUT && checkError())
-                  }
-                  onClick={handleSave}
-                />
-                <CapIcon
-                  type="close"
-                  component={SvgCustomClose}
-                  onClick={handleReset}
-                  className="row-action-icon"
-                />
-              </>
-            ),
-          };
-        } else if (mode === ADD) {
-          return {
-            key: id,
-            rewardCustomFields: (
-              <RewardFieldLabel
-                marvelCustomFieldName={marvelCustomFieldName}
-                dataType={dataType}
-                formatMessage={formatMessage}
-                isValid={isValid}
-              />
-            ),
-            mappingType: (
-              <CapSelect
-                options={mappingOptions}
-                onChange={handleMappingTypeSelect}
-                placeholder={formatMessage(messages.mappingTypePlaceholder)}
-                className={classnames('cf-table-dropdown', {
-                  'show-placeholder': !type,
-                })}
-                dropdownClassName={classnames(className, 'cf-popover')}
-                value={type}
-              />
-            ),
-            mappedToValue: getMappedEntityComponent(
-              type,
-              dataType,
-              handleMappedEntitySelect,
-              mappedToValue,
-            ),
-            actions: (
-              <>
-                {!type ||
-                !mappedToValue ||
-                (type === USER_INPUT && checkError()) ? (
-                  <CapTooltip
-                    title={
-                      (!type || !mappedToValue) &&
-                      formatMessage(messages.tickDisabledText)
-                    }
-                  >
-                    <span>
-                      <CapIcon
-                        className="row-action-icon"
-                        type="tick"
-                        component={SvgCustomTick}
-                        disabled={
-                          !type ||
-                          !mappedToValue ||
-                          (type === USER_INPUT && checkError())
-                        }
-                        onClick={handleSave}
-                      />
-                    </span>
-                  </CapTooltip>
-                ) : (
-                  <CapIcon
-                    type="tick"
-                    component={SvgCustomTick}
-                    onClick={handleSave}
-                    className="row-action-icon"
-                  />
-                )}
-
-                <CapIcon
-                  type="delete"
-                  component={SvgCustomDelete}
-                  onClick={handleDelete}
-                  className="row-action-icon"
-                />
-              </>
-            ),
-          };
-        } else
-          return {
-            key: id,
-            rewardCustomFields: (
-              <RewardFieldLabel
-                marvelCustomFieldName={marvelCustomFieldName}
-                dataType={dataType}
-                formatMessage={formatMessage}
-                isValid={isValid}
-              />
-            ),
-            mappingType: formatMessage(
-              rewardMessages[mappingTypeMessageMap[type]],
-            ),
-            mappedToValue: getMappedToLabel(),
-            actions: slideboxMode !== VIEW && (
-              <CapDropdown overlay={getEditMenu()} placement="bottomRight">
-                <CapIcon type="more" size="m" data-testid="more" />
-              </CapDropdown>
-            ),
-          };
-      },
-    );
-    return dataSource;
-  };
-
-  const tableProps = {
-    columns: getColumns(),
-    dataSource: getDatasource(),
-    key: 'RewardsCustomFieldTable',
-    rowKey: 'RewardsCustomFieldTableRow',
-    className: 'rewards-custom-fields-table',
-    infinteScroll: true,
-  };
-
-  const getTooltipMessage = () => {
-    if (validateCustomFields.includes(PENDING_EDIT)) {
-      return formatMessage(messages.multipleCreateError);
-    } else if (customFieldsList.length === 0) {
-      return (
-        <>
-          <CapLabel type="label32" className="line-height-20">
-            {formatMessage(messages.noCustomFields)}
-          </CapLabel>
-          <CapLink
-            title={
-              <CapRow
-                type="flex"
-                align="middle"
-                className="tooltip-link-redirect"
-              >
-                <CapIcon
-                  type="open-in-new-light"
-                  className="tooltip-redirect-icon"
-                />
-                {formatMessage(rewardMessages.goToDocumentation)}
-              </CapRow>
-            }
-            onClick={openRewardsDocsLink}
-          />
-        </>
-      );
-    } else {
-      return '';
-    }
-  };
-
-  const AddCustomFieldsBtn = () =>
-    customFieldsList.length === 0 ||
-    validateCustomFields.includes(PENDING_EDIT) ? (
-      <CapTooltip
-        title={getTooltipMessage()}
-        overlayClassName={classnames(className, 'add-custom-field-tooltip')}
-      >
-        <span>
-          <CapButton
-            isAddBtn
-            type="flat"
-            className={classnames({
-              'add-custom-field-btn': localCustomFields?.length > 0,
-            })}
-            disabled={
-              customFieldsList.length === 0 ||
-              validateCustomFields.includes(PENDING_EDIT)
-            }
-          >
-            {formatMessage(messages.rewardTransactionCustomFields)}
-          </CapButton>
-        </span>
-      </CapTooltip>
-    ) : (
-      <CapMultiSelect
-        searchPlaceholder="Search"
-        treeData={getCustomFieldsOptions}
-        searchKey="value"
-        onSelect={AddRows}
-        appliedKeys={appliedCFKeys}
-        width="21.429rem"
-        popoverClassName={classnames(className, 'get-options-popover', {
-          'select-all-locked':
-            appliedCFKeys.length === getCustomFieldsOptions.length,
-        })}
-        target={
-          <CapButton
-            isAddBtn
-            type="flat"
-            className={classnames({
-              'add-custom-field-btn': localCustomFields?.length > 0,
-            })}
-            disabled={
-              customFieldsList.length === 0 ||
-              validateCustomFields.includes(PENDING_EDIT)
-            }
-          >
-            {formatMessage(messages.rewardTransactionCustomFields)}
-          </CapButton>
-        }
-      />
-    );
-  return (
-    <CapRow className={className}>
-      {localCustomFields?.length == 0 && slideboxMode !== VIEW ? (
-        <AddCustomFieldsBtn />
-      ) : (
-        <>
-          {slideboxMode !== VIEW ? (
-            <CapRow type="flex" justify="space-between">
-              <CapHeader
-                title={formatMessage(messages.rewardTransactionCustomFields)}
-                description={formatMessage(
-                  messages.rewardTransactionCustomFieldsByline,
-                )}
-                size="regular"
-                className={classnames('reward-catalog-header', 'margin-b-8')}
-              />
-              <AddCustomFieldsBtn />
-            </CapRow>
-          ) : (
-            <CapRow className="margin-b-8">
-              <ViewLabelWithInfoTooltip
-                title={
-                  <CapLabel.CapLabelInline type="label24">
-                    {formatMessage(messages.rewardTransactionCustomFields)}
-                  </CapLabel.CapLabelInline>
-                }
-                tooltipTitle={formatMessage(
-                  messages.rewardTransactionCustomFieldsByline,
-                )}
-              />
-            </CapRow>
-          )}
-          <CapTable {...tableProps} />
-        </>
-      )}
-    </CapRow>
-  );
-};
-
-IssueRewardsCustomFields.propTypes = {
-  customFields: PropTypes.array,
-  setCustomFields: PropTypes.func,
-  mappingOptions: PropTypes.array,
-  globalActions: PropTypes.object,
-  intl: PropTypes.object,
-  customFieldsData: PropTypes.object,
-  eventsListData: PropTypes.object,
-  extendedFieldsData: PropTypes.object,
-  eventType: PropTypes.string,
-  programId: PropTypes.string,
-  className: PropTypes.string,
-  validateCustomFields: PropTypes.bool,
-  setValidateCustomFields: PropTypes.func,
-  slideboxMode: PropTypes.string,
-};
-
-IssueRewardsCustomFields.defaultProps = {
-  customFields: [],
-  setCustomFields: () => {},
-  mappingOptions: [],
-  globalActions: {},
-  intl: {},
-  customFieldsData: {},
-  eventsListData: {},
-  extendedFieldsData: {},
-  eventType: '',
-  programId: '',
-  className: '',
-  validateCustomFields: false,
-  setValidateCustomFields: () => {},
-  slideboxMode: '',
-};
-
-const mapStateToProps = createStructuredSelector({
-  customFieldsData: makeSelectCustomFieldsData(),
-  eventsListData: makeSelectEventsList(),
-  extendedFieldsData: makeSelectExtendedFields(),
-});
-
-function mapDispatchToProps(dispatch) {
-  return {
-    globalActions: bindActionCreators(globalActions, dispatch),
-    actions: bindActionCreators(actions, dispatch),
-  };
-}
-const withConnect = connect(
-  mapStateToProps,
-  mapDispatchToProps,
-);
-
-export default compose(withConnect)(
-  injectIntl(withStyles(IssueRewardsCustomFields, style)),
-);