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

package/components/organisms/CreateAlternateCurrency/CreateAlternateCurrency.js

@@ -1,821 +0,0 @@
-import React, { useEffect, useState } from 'react';
-import PropTypes from 'prop-types';
-import { injectIntl, intlShape, FormattedHTMLMessage } from 'react-intl';
-import { withRouter } from 'react-router-dom';
-import withStyles from 'utils/withStyles';
-import { isEmpty } from 'lodash';
-import CapSlideBox from '@capillarytech/cap-ui-library/CapSlideBox';
-import CapButton from '@capillarytech/cap-ui-library/CapButton';
-import CapRow from '@capillarytech/cap-ui-library/CapRow';
-import CapInput from '@capillarytech/cap-ui-library/CapInput';
-import CapHeading from '@capillarytech/cap-ui-library/CapHeading';
-import CapSwitch from '@capillarytech/cap-ui-library/CapSwitch';
-import CapRadio from '@capillarytech/cap-ui-library/CapRadio';
-import CapDateRangePicker from '@capillarytech/cap-ui-library/CapDateRangePicker';
-import CapLabel from '@capillarytech/cap-ui-library/CapLabel';
-import CapAlert from '@capillarytech/cap-ui-library/CapAlert';
-import CapRadioGroup from '@capillarytech/cap-ui-library/CapRadioGroup';
-import CapNotification from '@capillarytech/cap-ui-library/CapNotification';
-import CapSpin from '@capillarytech/cap-ui-library/CapSpin';
-import CapColoredTag from '@capillarytech/cap-ui-library/CapColoredTag';
-import CapTooltip from '@capillarytech/cap-ui-library/CapTooltip';
-import CapImage from '@capillarytech/cap-ui-library/CapImage';
-import CapIcon from '@capillarytech/cap-ui-library/CapIcon';
-
-import moment from 'moment';
-import { compose, bindActionCreators } from 'redux';
-import { createStructuredSelector } from 'reselect';
-import { connect } from 'react-redux';
-import injectSaga from 'utils/injectSaga';
-import injectReducer from 'utils/injectReducer';
-import withErrorBoundary from 'utils/withErrorBoundary';
-import {
-  CAP_G01,
-  CAP_G08,
-} from '@capillarytech/cap-ui-library/styled/variables';
-import saga from './saga';
-import reducer from './reducer';
-import integration from '../../../assets/penguin.svg';
-import ConfirmationModal from '../../molecules/ConfirmationModal';
-
-import InstructionList from '../../molecules/InstructionList.js';
-import UploadImageMolecule from '../../molecules/ImageUploadMolecule/UploadImageMolecule';
-import pointsDefaultImg from '../../../assets/Points.png';
-import globalMessages from '../../pages/Cap/messages';
-import messages from './messages';
-import styles from './style';
-import * as actions from './actions';
-import * as selectors from './selectors';
-import { getInstructions, forbiddenNames } from './utils';
-
-import NumberInput from '../../molecules/NumberInput/NumberInput';
-import {
-  DEFAULT,
-  CUSTOM,
-  LOCALE_DATE_FORMAT,
-  REQUEST,
-  CREATE,
-  EDIT,
-  CDN_BASE_URL,
-  CDN_BUCKET_PATH,
-  CDN_TRANSFORM_SUFFIX,
-  VIEW,
-  DATE_DISPLAY_FORMAT,
-} from '../../pages/App/constants';
-import {
-  makeSelectCurrentProgram,
-  makeSelectAlternateCurrencyList,
-} from '../../pages/ProgramSummary/selectors';
-const { makeSelectSaveAlternativeCurrency } = selectors;
-
-export const CreateAlternateCurrency = ({
-  className,
-  showSlideBox,
-  setShowSlideBox,
-  intl: { formatMessage },
-  currentProgramData: { currentProgram = {} } = {},
-  createdAlternativeCurrencyData: { saveAlternativeCurrencyStatus = '' } = {},
-  alternateCurrencyList: { alternateCurrencyListData = [] } = {},
-  actions,
-  getAllAlternateCurrency,
-  mode,
-  alternateCurrencyId,
-  setIsEditMode,
-}) => {
-  // filteredData will contain the items from alternateCurrencyListData whose identifier matches alternateCurrencyId
-  const filteredData = alternateCurrencyListData.filter(
-    currency => currency.identifier === alternateCurrencyId,
-  );
-
-  const base_url = localStorage.getItem(CDN_BASE_URL);
-  const bucket_url = localStorage.getItem(CDN_BUCKET_PATH);
-  const cdn_suffix = localStorage.getItem(CDN_TRANSFORM_SUFFIX);
-  const [currencyName, setCurrencyName] = useState('');
-  const [currencyDescription, setDescription] = useState('');
-  const [radioGroupValue, setRadioGroupValue] = useState(DEFAULT);
-  const [startDate, setStartDate] = useState(null);
-  const [endDate, setEndDate] = useState(null);
-  const [redeemabilityEnabled, setRedeemabilityEnabled] = useState(false);
-  const [returnOfRewardEnabled, setReturnOfRewardEnabled] = useState(false);
-  const [currencyEnabled, setCurrencyEnabled] = useState(false);
-  const [file, setFile] = useState(false);
-  const [fileObj, setFileObj] = useState(false);
-  const [changesMade, setChangesMade] = useState(false);
-  const [editableChanges, setEditableChanges] = useState({});
-  const [isReturnNote, setIsReturnNote] = useState(false);
-
-  useEffect(
-    () => {
-      if (mode === EDIT || mode === VIEW) {
-        const data = filteredData[0];
-        const isDefaultValues =
-          filteredData[0]?.endDate ===
-          moment(filteredData[0]?.startDate)
-            .add(1000, 'years')
-            .unix() *
-            1000
-            ? DEFAULT
-            : CUSTOM;
-        setFile(
-          `${base_url}/${cdn_suffix}/quality=50/${bucket_url}${
-            data?.metaData.image
-          }`,
-        );
-        setFileObj(data?.metaData.image);
-        setCurrencyName(data?.name);
-        setDescription(data?.metaData.description);
-        setRadioGroupValue(isDefaultValues);
-        setStartDate(data?.startDate);
-        setEndDate(data?.endDate);
-        setCurrencyEnabled(data?.isActive);
-        setRedeemabilityEnabled(data?.metaData?.isRedeemable); //later on if we get the data we will setRedeemability as true and we have the conversion value
-        setReturnOfRewardEnabled(data?.metaData?.isReturnable);
-        setEditableChanges(data);
-      } else {
-        setFile(false);
-        setFileObj(false);
-        setCurrencyName('');
-        setDescription('');
-        setRadioGroupValue(DEFAULT);
-        setStartDate(null);
-        setEndDate(null);
-        setRedeemabilityEnabled(false);
-        setReturnOfRewardEnabled(false);
-        setCurrencyEnabled(false);
-      }
-    },
-    [mode],
-  );
-
-  useEffect(
-    () => {
-      if (mode === EDIT && !isEmpty(editableChanges)) {
-        if (
-          editableChanges.name === currencyName &&
-          editableChanges.metaData.description === currencyDescription &&
-          editableChanges.startDate === startDate &&
-          editableChanges.endDate === endDate &&
-          editableChanges.isActive === currencyEnabled &&
-          editableChanges.metaData.image === fileObj
-        ) {
-          setChangesMade(false);
-        } else {
-          setChangesMade(true);
-        }
-      }
-    },
-    [
-      currencyName,
-      currencyDescription,
-      radioGroupValue,
-      startDate,
-      endDate,
-      currencyEnabled,
-      fileObj,
-      mode,
-    ],
-  );
-  const [isConfirmationModalVisible, setConfirmationModalVisible] = useState(
-    false,
-  );
-
-  const [valueConversion, setValueConversion] = useState();
-
-  const closeSlideBox = () => {
-    setShowSlideBox(false);
-    setIsEditMode('');
-  };
-  const handleEditClick = () => {
-    setIsEditMode(EDIT);
-  };
-  const onProgramNameChange = event => setCurrencyName(event.target.value);
-  const onDescriptionChange = event => setDescription(event.target.value);
-
-  const handleDurationChange = e => {
-    const durationValue = e.target.value;
-    setRadioGroupValue(e.target.value);
-    if (mode === EDIT && durationValue === CUSTOM) {
-      setStartDate(null);
-      setEndDate(null);
-    }
-  };
-
-  const handleDateRangePickerChange = dates => {
-    setStartDate(dates[0] ? moment(dates[0]).format(LOCALE_DATE_FORMAT) : null);
-    setEndDate(dates[1] ? moment(dates[1]).format(LOCALE_DATE_FORMAT) : null);
-  };
-
-  const toggleRedeemability = () => {
-    setConfirmationModalVisible(!redeemabilityEnabled);
-    if (redeemabilityEnabled) setRedeemabilityEnabled(!redeemabilityEnabled);
-  };
-  const toggleReturnability = () => {
-    setReturnOfRewardEnabled(!returnOfRewardEnabled);
-  };
-  const toggleCurrencyEnabled = () => {
-    setCurrencyEnabled(!currencyEnabled);
-  };
-
-  const handleCloseClick = () => {
-    setConfirmationModalVisible(false);
-  };
-
-  const saveSlidebox = () => {
-    if (mode === EDIT) {
-      saveAlternateCurrencyCall();
-    } else {
-      setConfirmationModalVisible(true);
-    }
-  };
-  // Commented below lines because Currenlty BE does not have supoort for this. It will be added in future.
-  // const handleConversionRate = e => {
-  //   setValueConversion(e.target.value);
-  // };
-
-  const infoTooltip = () => {
-    return (
-      <>
-        <CapRow className="know-more-features">
-          {formatMessage(messages.knowMoreInfoData)}
-        </CapRow>
-        <CapRow className="know-more-note">
-          {formatMessage(messages.knowMoreInfoNote)}
-        </CapRow>
-      </>
-    );
-  };
-
-  const knowMoreInfo = () => {
-    return (
-      <CapRow>
-        <span>{formatMessage(messages.currencyNote)}</span>
-        <CapTooltip
-          placement="bottom"
-          title={infoTooltip()}
-          getPopupContainer={() =>
-            document.querySelector('.settings-limit-alert')
-          }
-        >
-          <span className="know-more-hover-text">
-            {formatMessage(messages.knowMore)}
-          </span>
-        </CapTooltip>
-      </CapRow>
-    );
-  };
-
-  const getErrorMessage = () => {
-    const lowercaseCurrencyName = currencyName?.toLowerCase();
-
-    if (forbiddenNames?.includes(lowercaseCurrencyName)) {
-      return formatMessage(messages.errorMessageForRestrictedNames);
-    }
-    if (
-      alternateCurrencyListData.some(
-        currency =>
-          currency.name.toLowerCase() === lowercaseCurrencyName &&
-          currency.name !== editableChanges?.name,
-      )
-    ) {
-      return formatMessage(messages.errorMessageForSameName);
-    }
-  };
-  const getSlideBoxContent = () => (
-    <CapSpin spinning={showSpin}>
-      <CapRow>
-        <CapAlert
-          className="settings-limit-alert"
-          message={knowMoreInfo()}
-          type="info"
-        />
-      </CapRow>
-      <CapRow className="create-currency-content-row">
-        {mode === VIEW ? (
-          <CapRow>
-            <CapLabel type="label24">
-              {formatMessage(globalMessages.name)}
-            </CapLabel>
-            <CapLabel type="label15" className="space-between-title-text">
-              {currencyName}
-            </CapLabel>
-          </CapRow>
-        ) : (
-          <CapInput
-            label={formatMessage(globalMessages.name)}
-            placeholder={formatMessage(messages.inputNamePlaceHolder)}
-            onChange={onProgramNameChange}
-            className="create-currency-input"
-            value={currencyName}
-            errorMessage={getErrorMessage()}
-            maxLength={100}
-          />
-        )}
-      </CapRow>
-      <CapRow className="create-currency-content-row">
-        {mode === VIEW ? (
-          <CapRow>
-            <CapLabel type="label24" className="space-between-title-view-mode">
-              {formatMessage(globalMessages.description)}
-            </CapLabel>
-            <CapLabel type="label15" className="space-between-title-text">
-              {currencyDescription}
-            </CapLabel>
-          </CapRow>
-        ) : (
-          <CapInput
-            label={formatMessage(globalMessages.description)}
-            placeholder={formatMessage(messages.inputDescriptionPlaceHolder)}
-            onChange={onDescriptionChange}
-            className="create-currency-input-desc"
-            value={currencyDescription}
-            maxLength={100}
-          />
-        )}
-      </CapRow>
-      <CapRow className="reward-currency-switch">
-        {mode === VIEW ? (
-          <CapRow className="reward-currency-switch-view">
-            <CapLabel type="label24" className="space-between-title-view-mode">
-              {formatMessage(messages.viewActivateLoyaltyCurrency)}
-            </CapLabel>
-            <CapLabel type="label15" className="space-between-title-text">
-              {currencyEnabled
-                ? formatMessage(globalMessages.yes)
-                : formatMessage(globalMessages.no)}
-            </CapLabel>
-          </CapRow>
-        ) : (
-          <CapSwitch
-            label={formatMessage(messages.rewardCurrencyLabel)}
-            inductiveText={formatMessage(messages.rewardCurrencyIndication)}
-            labelPosition="left"
-            componentPosition="top"
-            checked={currencyEnabled}
-            onChange={toggleCurrencyEnabled}
-          />
-        )}
-      </CapRow>
-      <CapHeading
-        type={mode === VIEW ? 'h6' : 'h4'}
-        className={
-          mode === VIEW
-            ? 'space-between-title-view-mode'
-            : 'create-currency-input-desc'
-        }
-      >
-        {formatMessage(globalMessages.duration)}
-      </CapHeading>
-      <CapRow className="duration-options-group">
-        {mode === VIEW ? (
-          <CapRow>
-            {radioGroupValue === DEFAULT ? (
-              <CapLabel type="label15">
-                {formatMessage(messages.defaultIndication)}
-              </CapLabel>
-            ) : (
-              <CapLabel type="label15" className="space-between-title-text">
-                {moment(startDate).format(DATE_DISPLAY_FORMAT)}
-                <span className="space-between-dates">-</span>
-                {moment(endDate).format(DATE_DISPLAY_FORMAT)}
-              </CapLabel>
-            )}
-          </CapRow>
-        ) : (
-          <CapRadioGroup
-            onChange={handleDurationChange}
-            value={radioGroupValue}
-          >
-            <CapRadio value={DEFAULT} className="duration-option">
-              <CapHeading.CapHeadingSpan type="h5">
-                {formatMessage(globalMessages.default)}
-              </CapHeading.CapHeadingSpan>
-              {radioGroupValue === DEFAULT && (
-                <CapColoredTag
-                  className="default-indication-text"
-                  tagTextColor={CAP_G01}
-                  tagColor={CAP_G08}
-                >
-                  {formatMessage(messages.defaultIndication)}
-                </CapColoredTag>
-              )}
-            </CapRadio>
-            <CapRadio value={CUSTOM} className="duration-option">
-              <CapHeading.CapHeadingSpan type="h5">
-                {formatMessage(globalMessages.custom)}
-              </CapHeading.CapHeadingSpan>
-              {radioGroupValue === CUSTOM && (
-                <span className="default-indication">
-                  <CapDateRangePicker
-                    className="alternate-date-range-picker"
-                    startDateId="currency_start_date"
-                    endDateId="currency_end_date"
-                    startDatePlaceholderText={formatMessage(
-                      globalMessages.startDate,
-                    )}
-                    endDatePlaceholderText={formatMessage(
-                      globalMessages.endDate,
-                    )}
-                    displayFormat={LOCALE_DATE_FORMAT}
-                    onChange={handleDateRangePickerChange}
-                    startDate={startDate ? moment(startDate) : null}
-                    endDate={endDate ? moment(endDate) : null}
-                  />
-                </span>
-              )}
-            </CapRadio>
-          </CapRadioGroup>
-        )}
-      </CapRow>
-      <CapRow type="flex">
-        <CapHeading
-          type={mode === VIEW ? 'h6' : 'h4'}
-          className={mode === VIEW ? 'space-between-title-view-mode' : ''}
-        >
-          {formatMessage(globalMessages.imageHeading)}
-        </CapHeading>
-      </CapRow>
-      <CapRow className="image-upload-instructions">
-        {mode === VIEW ? (
-          <CapRow className="alternate-currency-image-row">
-            <CapImage
-              src={fileObj != 'no-image' ? file : pointsDefaultImg}
-              alt="Invalid"
-              className="alternate-currency-image-view"
-            />
-          </CapRow>
-        ) : (
-          <>
-            <UploadImageMolecule
-              fileObj={fileObj}
-              setFileObj={setFileObj}
-              file={file}
-              setFile={setFile}
-            />
-            <InstructionList
-              className="instructions-list"
-              headerText={formatMessage(messages.uploadInstructions)}
-              instructions={getInstructions}
-            />
-          </>
-        )}
-      </CapRow>
-      <CapRow>
-        <CapTooltip
-          placement="topLeft"
-          title={
-            mode !== VIEW && (
-              <CapRow>
-                <CapRow>
-                  <CapHeading type="h9">
-                    {formatMessage(messages.comingSoon)}
-                  </CapHeading>
-                </CapRow>
-                <CapLabel type="label10" className="tooltip-margin">
-                  {formatMessage(messages.abilityToReturnOrRedeem, {
-                    placeHolder: 'redeem',
-                  })}
-                </CapLabel>
-              </CapRow>
-            )
-          }
-          overlayClassName="alternate-currency-redeem"
-        >
-          <CapRow className="currency-switch-container">
-            {mode === VIEW ? (
-              <CapRow>
-                <CapLabel
-                  type="label24"
-                  className="space-between-title-view-mode"
-                >
-                  {formatMessage(messages.redeemabilitylabel)}
-                </CapLabel>
-                <CapLabel type="label15" className="space-between-title-text">
-                  {redeemabilityEnabled
-                    ? formatMessage(globalMessages.yes)
-                    : formatMessage(globalMessages.no)}
-                </CapLabel>
-              </CapRow>
-            ) : (
-              <>
-                <CapHeading type="h4" className="disabled-text">
-                  {formatMessage(messages.redeemabilitylabel)}
-                </CapHeading>
-                <span className="currency-switch">
-                  <CapSwitch
-                    className="currency-switch"
-                    labelPosition="left"
-                    componentPosition="top"
-                    // Commented below lines because Currenlty BE does not have supoort for this. It will be added in future.
-                    // disabled={!currencyName || mode === EDIT}
-                    // checked={redeemabilityEnabled}
-                    // onChange={toggleRedeemability}
-                    disabled
-                  />
-                </span>
-              </>
-            )}
-          </CapRow>
-        </CapTooltip>
-        <CapTooltip
-          placement="topLeft"
-          title={
-            mode === EDIT &&
-            !isReturnNote && (
-              <CapRow>
-                <CapRow>
-                  <CapHeading type="h9">
-                    {formatMessage(messages.returnOfRewardCurrencyNote)}
-                  </CapHeading>
-                </CapRow>
-              </CapRow>
-            )
-          }
-          overlayClassName="alternate-currency-return-info"
-        >
-          <CapRow className="currency-switch-container">
-            {mode === VIEW ? (
-              <CapRow>
-                <CapLabel
-                  type="label24"
-                  className="space-between-title-view-mode"
-                >
-                  {formatMessage(messages.returnOfRewardCurrency)}
-                </CapLabel>
-                <CapLabel type="label15" className="space-between-title-text">
-                  {returnOfRewardEnabled
-                    ? formatMessage(globalMessages.yes)
-                    : formatMessage(globalMessages.no)}
-                </CapLabel>
-              </CapRow>
-            ) : (
-              <>
-                <CapHeading
-                  type="h4"
-                  className={mode === EDIT ? 'disabled-text' : ''}
-                >
-                  {formatMessage(messages.returnOfRewardCurrency)}
-                </CapHeading>
-                <CapTooltip
-                  placement="top"
-                  title={formatMessage(messages.returnOfRewardCurrencyInfo)}
-                >
-                  <CapIcon
-                    className="alternate-currency-info"
-                    type="info"
-                    onMouseEnter={e => {
-                      e.stopPropagation();
-                      setIsReturnNote(true);
-                    }}
-                    onMouseLeave={e => {
-                      e.stopPropagation();
-                      setIsReturnNote(false);
-                    }}
-                  />
-                </CapTooltip>
-                <span className="currency-switch">
-                  <CapSwitch
-                    className="currency-switch"
-                    labelPosition="left"
-                    componentPosition="top"
-                    disabled={mode === EDIT}
-                    checked={returnOfRewardEnabled}
-                    onChange={toggleReturnability}
-                  />
-                </span>
-              </>
-            )}
-          </CapRow>
-        </CapTooltip>
-        {/* Commented below lines because Currenlty BE does not have supoort for this. It will be added in future. */}
-        {/* {redeemabilityEnabled &&
-          mode !== VIEW && (
-            <CapRow>
-              1 {currencyName} =
-              <NumberInput
-                className="enter-conversion-rate"
-                placeholder={formatMessage(messages.redeemabilityPlaceholder)}
-                value={valueConversion}
-                onChange={handleConversionRate}
-                suffix={
-                  <CapLabel type="label18">
-                    {formatMessage(messages.numberInputSuffix)}
-                  </CapLabel>
-                }
-              />
-            </CapRow>
-          )} */}
-      </CapRow>
-    </CapSpin>
-  );
-
-  const showSpin = saveAlternativeCurrencyStatus === REQUEST;
-  const isDoneDisabled =
-    (mode === EDIT && !changesMade) ||
-    !currencyName ||
-    !currencyDescription ||
-    // !fileObj ||
-    (radioGroupValue === CUSTOM && (!startDate || !endDate)) ||
-    // (redeemabilityEnabled && !valueConversion) || {/* <-- Commented this lines because Currenlty BE does not have supoort for this. It will be added in future. */}
-    showSpin ||
-    getErrorMessage();
-
-  const slideBoxFooter = (
-    <>
-      {mode === VIEW ? (
-        <CapButton
-          type="secondary"
-          onClick={handleEditClick}
-          className="alternate-currency-edit-button"
-        >
-          <CapIcon type="edit" size="s" />
-          <span className="edit-text">
-            {formatMessage(globalMessages.edit)}
-          </span>
-        </CapButton>
-      ) : (
-        <>
-          <CapTooltip
-            title={
-              mode === EDIT && !changesMade
-                ? formatMessage(messages.rewardCurrencyEditChangeTooltip)
-                : ''
-            }
-          >
-            <span className="button-disabled-tooltip-wrapper">
-              <CapButton
-                type="primary"
-                onClick={saveSlidebox}
-                disabled={isDoneDisabled}
-              >
-                {formatMessage(globalMessages.done)}
-              </CapButton>
-            </span>
-          </CapTooltip>
-
-          <CapButton
-            type="secondary"
-            onClick={closeSlideBox}
-            className="cancel-button"
-          >
-            {formatMessage(globalMessages.cancel)}
-          </CapButton>
-        </>
-      )}
-    </>
-  );
-
-  const saveAlternateCurrencyCall = () => {
-    let payload = {
-      currencyData: {
-        name: currencyName,
-        startDate:
-          radioGroupValue === DEFAULT
-            ? moment().unix() * 1000
-            : moment(startDate).unix() * 1000,
-        endDate:
-          radioGroupValue === DEFAULT
-            ? moment()
-                .add(1000, 'years')
-                .unix() * 1000
-            : moment(endDate).unix() * 1000,
-        isActive: currencyEnabled,
-      },
-      metaData: {
-        description: currencyDescription,
-        isRedeemable: redeemabilityEnabled,
-        isReturnable: returnOfRewardEnabled,
-        image: mode === EDIT && fileObj ? filteredData[0]?.metaData.image : 'no-image',
-      },
-      image: fileObj || 'no-image',
-    };
-
-    if (mode === EDIT) {
-      payload.currencyData.identifier = alternateCurrencyId;
-    }
-    actions.saveAlternativeCurrency(
-      currentProgram?.id,
-      payload,
-      saveAlternativeCurrencyStatus => {
-        if (saveAlternativeCurrencyStatus) {
-          CapNotification.success({
-            message:
-              mode === CREATE
-                ? formatMessage(messages.rewardCurrencyCreateSuccessfully, {
-                    currencyName: currencyName,
-                  })
-                : formatMessage(messages.rewardCurrencyEditSuccessfully, {
-                    currencyName: currencyName,
-                  }),
-          });
-          getAllAlternateCurrency();
-          setIsEditMode('');
-        } else {
-          CapNotification.error({
-            message: formatMessage(globalMessages.errorMessage),
-          });
-        }
-        actions.clearData();
-        setShowSlideBox(false);
-      },
-    );
-  };
-  const handleModalOkClick = () => {
-    setConfirmationModalVisible(false);
-    saveAlternateCurrencyCall();
-  };
-  const confirmationModalDescription = (
-    <CapRow className={className}>
-      <CapRow className="modal-description">
-        <CapRow>
-          <FormattedHTMLMessage
-            {...messages.confirmationModalNonEditableNote}
-          />
-        </CapRow>
-        <CapRow className="modal-margin">
-          {formatMessage(messages.confirmationModalNote2)}
-        </CapRow>
-      </CapRow>
-    </CapRow>
-  );
-  return (
-    <CapRow className={className}>
-      <CapSlideBox
-        showShadow
-        show={showSlideBox}
-        size="size-r"
-        header={
-          mode === CREATE ? (
-            <CapHeading type="h2">
-              {formatMessage(messages.currencyTitle)}
-            </CapHeading>
-          ) : (
-            <CapHeading type="h1">
-              {mode === VIEW
-                ? formatMessage(messages.viewRewardCurrency)
-                : formatMessage(messages.editRewardCurrency)}
-            </CapHeading>
-          )
-        }
-        content={getSlideBoxContent()}
-        handleClose={closeSlideBox}
-        footer={slideBoxFooter}
-      />
-      {isConfirmationModalVisible && (
-        <ConfirmationModal
-          title={formatMessage(messages.nonEditableOptions)}
-          handleCancel={handleCloseClick}
-          handleClose={handleCloseClick}
-          handleOk={handleModalOkClick}
-          isModalVisible={isConfirmationModalVisible}
-          description={confirmationModalDescription}
-          image={integration}
-          okText={formatMessage(globalMessages.yes)}
-          className="currency-confirmation-modal"
-        />
-      )}
-    </CapRow>
-  );
-};
-
-CreateAlternateCurrency.propTypes = {
-  intl: intlShape.isRequired,
-  showSlideBox: PropTypes.bool,
-  setShowSlideBox: PropTypes.func,
-  createdAlternativeCurrencyData: PropTypes.object,
-  actions: PropTypes.func,
-  className: PropTypes.string,
-  alternateCurrencyList: PropTypes.object,
-  currentProgramData: PropTypes.object,
-  getAllAlternateCurrency: PropTypes.func,
-  mode: PropTypes.string,
-  alternateCurrencyId: PropTypes.string,
-};
-
-const mapStateToProps = createStructuredSelector({
-  createdAlternativeCurrencyData: makeSelectSaveAlternativeCurrency(),
-  alternateCurrencyList: makeSelectAlternateCurrencyList(),
-  currentProgramData: makeSelectCurrentProgram(),
-});
-
-const mapDispatchToProps = dispatch => ({
-  actions: bindActionCreators(actions, dispatch),
-});
-
-const withConnect = connect(
-  mapStateToProps,
-  mapDispatchToProps,
-);
-
-const withSaga = injectSaga({ key: 'alternativeCurrency', saga });
-const withReducer = injectReducer({
-  key: 'alternativeCurrency',
-  reducer,
-});
-
-export default compose(
-  withErrorBoundary,
-  withConnect,
-  withRouter,
-  withSaga,
-  withReducer,
-)(injectIntl(withStyles(CreateAlternateCurrency, styles)));