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

package/components/molecules/PointsTransferCollapseData/PointsTransferCollapseData.js

@@ -0,0 +1,805 @@
+/**
+ *
+ * PointsTransferCollapseData
+ *
+ */
+
+import React, { useState, useEffect, useMemo } from 'react';
+import PropTypes from 'prop-types';
+import useDeepCompareEffect from 'use-deep-compare-effect';
+import withStyles from 'utils/withStyles';
+import { intlShape, injectIntl } from 'react-intl';
+import { Collapse } from 'antd';
+import { createStructuredSelector } from 'reselect';
+import { connect } from 'react-redux';
+
+import {
+  CapRow,
+  CapHeading,
+  CapRadioGroup,
+  CapCheckbox,
+  CapSelect,
+  CapColumn,
+  CapIcon,
+  CapLabel,
+} from '@capillarytech/cap-ui-library';
+import filter from 'lodash/filter';
+import classnames from 'classnames';
+import { notifyHandledException } from '../../../utils/bugsnag';
+import NumberInput from '../NumberInput';
+import { Flex } from '../../pages/Cap/style';
+import * as style from './style';
+import globalMessages from '../../pages/Cap/messages';
+import messages from './messages';
+import { MAX_INTEGER_LIMIT } from '../../pages/App/constants';
+import { makeSelectSettings } from '../../organisms/AdvancedOption/selectors';
+import { makeSelectPointsTransfer } from '../../organisms/PointsTransferOrgSettings/selectors';
+
+const { CapPanelHeading, styles } = style;
+
+const { Panel } = Collapse;
+
+const regex = /(indToInd|indToGrp|grpToGrp|grpToInd)(?:.*(Weekly|Monthly|Daily))(?:.*(Frequency))?/i;
+const regex2 = /^(indToInd|indToGrp|grpToGrp|grpToInd)/i;
+
+export const PointsTransferCollapseData = ({
+  className,
+  intl: { formatMessage },
+  settings,
+  onSettingsChange,
+  pointsTransferSettingsData: {
+    pointsTransferOrgSettings: pointsTransferOrgSettingsParam = {},
+  },
+  settingsData: { setttings: programSettingsParam = {} },
+  mode,
+  discard = false,
+  setDiscard = () => {},
+  setSaveEnabled = () => {}
+}) => {
+  const settingsParam = useMemo(
+    () => {
+      if (mode === 'POINTS_TRANSFER_ORG_LEVEL') {
+        return pointsTransferOrgSettingsParam;
+      }
+      return programSettingsParam;
+    },
+    [mode, pointsTransferOrgSettingsParam, programSettingsParam],
+  );
+  const initialState = {
+    selectedLimit: 'nolimit',
+    isSameChecked: false,
+    isSameAs: '',
+
+    maxPointInTransactionSelectedLimit: 'nolimit',
+    maxPointInTransactionLimit: '',
+    maxPointInTransactionLimitErrorMsg: '',
+
+    dailyPointTransferSelectedLimit: 'nolimit',
+    dailyPointTransferLimit: '',
+    dailyPointTransferLimitErrorMsg: '',
+
+    weeklyPointTransferSelectedLimit: 'nolimit',
+    weeklyPointTransferLimit: '',
+    weeklyPointTransferLimitErrorMsg: '',
+
+    monthlyPointTransferSelectedLimit: 'nolimit',
+    monthlyPointTransferLimit: '',
+    monthlyPointTransferLimitErrorMsg: '',
+
+    dailyPointTransferFrequencySelectedLimit: 'nolimit',
+    dailyPointTransferFrequencyLimit: '',
+    dailyPointTransferFrequencyLimitErrorMsg: '',
+
+    weeklyPointTransferFrequencySelectedLimit: 'nolimit',
+    weeklyPointTransferFrequencyLimit: '',
+    weeklyPointTransferFrequencyLimitErrorMsg: '',
+
+    monthlyPointTransferFrequencySelectedLimit: 'nolimit',
+    monthlyPointTransferFrequencyLimit: '',
+    monthlyPointTransferFrequencyLimitErrorMsg: '',
+  };
+
+  const IndtoIndInitialState = { ...initialState, key: 'IND_TO_IND' };
+  const IndtoGrpInitialState = { ...initialState, key: 'IND_TO_GRP' };
+  const GrptoIndInitialState = { ...initialState, key: 'GRP_TO_IND' };
+  const GrptoGrpInitialState = { ...initialState, key: 'GRP_TO_GRP' };
+
+  const [IndToIndData, setIndtoIndLimitOptions] = useState(
+    IndtoIndInitialState,
+  );
+  const [IndToGrpData, setIndtoGrpLimitOptions] = useState(
+    IndtoGrpInitialState,
+  );
+  const [GrpToIndData, setGrptoIndLimitOptions] = useState(
+    GrptoIndInitialState,
+  );
+  const [GrpToGrpData, setGrptoGrpLimitOptions] = useState(
+    GrptoGrpInitialState,
+  );
+
+  useDeepCompareEffect(
+    () => {
+      const transferTypeMapping = {
+        indToInd: { ...IndtoIndInitialState },
+        indToGrp: { ...IndtoGrpInitialState },
+        grpToInd: { ...GrptoIndInitialState },
+        grpToGrp: { ...GrptoGrpInitialState },
+      };
+      const transferFrequencyMapping = {
+        Daily: {
+          radioKey: 'dailyPointTransferSelectedLimit',
+          valueKey: 'dailyPointTransferLimit',
+        },
+        Weekly: {
+          radioKey: 'weeklyPointTransferSelectedLimit',
+          valueKey: 'weeklyPointTransferLimit',
+        },
+        Monthly: {
+          radioKey: 'monthlyPointTransferSelectedLimit',
+          valueKey: 'monthlyPointTransferLimit',
+        },
+        Daily_Frequency: {
+          radioKey: 'dailyPointTransferFrequencySelectedLimit',
+          valueKey: 'dailyPointTransferFrequencyLimit',
+        },
+        Weekly_Frequency: {
+          radioKey: 'weeklyPointTransferFrequencySelectedLimit',
+          valueKey: 'weeklyPointTransferFrequencyLimit',
+        },
+        Monthly_Frequency: {
+          radioKey: 'monthlyPointTransferFrequencySelectedLimit',
+          valueKey: 'monthlyPointTransferFrequencyLimit',
+        },
+        TransactionLimit: {
+          radioKey: 'maxPointInTransactionSelectedLimit',
+          valueKey: 'maxPointInTransactionLimit',
+        },
+      };
+      Object.keys(settingsParam).forEach(configKey => {
+        if (settingsParam[configKey] &&  settingsParam[configKey] !== '-1' && settingsParam[configKey] !== -1) {
+          const matches = regex.exec(configKey);
+          if (matches) {
+            const [, transferType, transferFrequency] = matches;
+            if (transferType && transferFrequency) {
+              if (matches.length > 2 && matches[3]) {
+                const keyValues = {
+                  ...transferFrequencyMapping[`${transferFrequency}_Frequency`],
+                };
+                transferTypeMapping[transferType] = {
+                  ...transferTypeMapping[transferType],
+                  [keyValues.radioKey]: 'specificvalue',
+                  [keyValues.valueKey]: settingsParam[configKey],
+                  selectedLimit: 'setlimit',
+                };
+              } else {
+                const keyValues = {
+                  ...transferFrequencyMapping[`${transferFrequency}`],
+                };
+                transferTypeMapping[transferType] = {
+                  ...transferTypeMapping[transferType],
+                  [keyValues.radioKey]: 'specificvalue',
+                  [keyValues.valueKey]: settingsParam[configKey],
+                  selectedLimit: 'setlimit',
+                };
+              }
+            }
+          } else {
+            const match = regex2.exec(configKey);
+            if (match) {
+              const keyValues = {
+                ...transferFrequencyMapping['TransactionLimit'],
+              };
+              transferTypeMapping[match[0]] = {
+                ...transferTypeMapping[match[0]],
+                [keyValues.radioKey]: 'specificvalue',
+                [keyValues.valueKey]: settingsParam[configKey],
+                selectedLimit: 'setlimit',
+              };
+            }
+          }
+        }
+      });
+      setIndtoIndLimitOptions(transferTypeMapping['indToInd']);
+      setIndtoGrpLimitOptions(transferTypeMapping['indToGrp']);
+      setGrptoIndLimitOptions(transferTypeMapping['grpToInd']);
+      setGrptoGrpLimitOptions(transferTypeMapping['grpToGrp']);
+    },
+    [settingsParam],
+  );
+
+  useEffect(() => {
+    if(discard) {
+      setIndtoIndLimitOptions(IndtoIndInitialState);
+      setIndtoGrpLimitOptions(IndtoGrpInitialState);
+      setGrptoIndLimitOptions(GrptoIndInitialState);
+      setGrptoGrpLimitOptions(GrptoGrpInitialState);
+      setDiscard(false);
+    }
+  }, [discard])
+
+  useEffect(
+    () => {
+      updateSettings();
+      let saveEnabled = true;
+      const stateArray = [IndToIndData, IndToGrpData, GrpToIndData, GrpToGrpData];
+      for(let i = 0; i < 4; i++) {
+        let keysArray = Object.keys(stateArray[i]);
+        for (let j = 0; j < keysArray.length; j++) {
+          if (keysArray[j].includes('ErrorMsg')) {
+            let limitKey = `${keysArray[j].split('LimitErrorMsg')?.[0]}SelectedLimit`;
+            let errorKey = keysArray[j];
+            let state = stateArray[i];
+            let isSpecificLimit = state?.[limitKey] !== 'nolimit';
+            if (isSpecificLimit && state?.[errorKey]) {
+              saveEnabled = false;
+              break;
+            }
+          }
+        }
+        if (!saveEnabled) {
+          break;
+        }
+      }
+      setSaveEnabled(saveEnabled);
+    },
+    [IndToIndData, IndToGrpData, GrpToIndData, GrpToGrpData],
+  );
+
+  useEffect(
+    () => {
+      copyPointTransferConfig(
+        IndToIndData.key,
+        IndToIndData.isSameAs,
+        IndToIndData.isSameChecked,
+      );
+    },
+    [IndToIndData.key, IndToIndData.isSameAs, IndToIndData.isSameChecked],
+  );
+
+  useEffect(
+    () => {
+      copyPointTransferConfig(
+        IndToGrpData.key,
+        IndToGrpData.isSameAs,
+        IndToGrpData.isSameChecked,
+      );
+    },
+    [IndToGrpData.key, IndToGrpData.isSameAs, IndToGrpData.isSameChecked],
+  );
+
+  useEffect(
+    () => {
+      copyPointTransferConfig(
+        GrpToIndData.key,
+        GrpToIndData.isSameAs,
+        GrpToIndData.isSameChecked,
+      );
+    },
+    [GrpToIndData.key, GrpToIndData.isSameAs, GrpToIndData.isSameChecked],
+  );
+
+  useEffect(
+    () => {
+      copyPointTransferConfig(
+        GrpToGrpData.key,
+        GrpToGrpData.isSameAs,
+        GrpToGrpData.isSameChecked,
+      );
+    },
+    [GrpToGrpData.key, GrpToGrpData.isSameAs, GrpToGrpData.isSameChecked],
+  );
+
+  const settingsTypeOption = [
+    {
+      label: formatMessage(globalMessages.textIndtoInd),
+      value: 'IND_TO_IND',
+      key: 'ItoI',
+    },
+    {
+      label: formatMessage(globalMessages.textIndtoGrp),
+      value: 'IND_TO_GRP',
+      key: 'ItoG',
+    },
+    {
+      label: formatMessage(globalMessages.textGrptoInd),
+      value: 'GRP_TO_IND',
+      key: 'GtoI',
+    },
+    {
+      label: formatMessage(globalMessages.textGrptoGrp),
+      value: 'GRP_TO_GRP',
+      key: 'GtoG',
+    },
+  ];
+
+  const LimitValueOption = [
+    {
+      label: formatMessage(globalMessages.noLimit),
+      value: 'nolimit',
+      key: 'nolimit',
+    },
+    {
+      label: formatMessage(messages.specificValue),
+      value: 'specificvalue',
+      key: 'specificvalue',
+    },
+  ];
+
+  const LimitOption = [
+    {
+      label: formatMessage(globalMessages.noLimit),
+      value: 'nolimit',
+      key: 'nolimit',
+    },
+    {
+      label: formatMessage(messages.setLimit),
+      value: 'setlimit',
+      key: 'setlimit',
+    },
+  ];
+
+  const getStateSetterFunction = key => {
+    var limitType = {
+      IND_TO_IND: setIndtoIndLimitOptions,
+      IND_TO_GRP: setIndtoGrpLimitOptions,
+      GRP_TO_IND: setGrptoIndLimitOptions,
+      GRP_TO_GRP: setGrptoGrpLimitOptions,
+      default: '',
+    };
+    return limitType[key] || limitType['default'];
+  };
+
+  const getStateType = key => {
+    var limitType = {
+      IND_TO_IND: IndToIndData,
+      IND_TO_GRP: IndToGrpData,
+      GRP_TO_IND: GrpToIndData,
+      GRP_TO_GRP: GrpToGrpData,
+      default: '',
+    };
+    return limitType[key] || limitType['default'];
+  };
+
+  const handleSelectedLimit = (e, key, type) => {
+    const stateFunction = getStateSetterFunction(key);
+    stateFunction(prevstate => ({ ...prevstate, [type]: e.target.value }));
+    //@TODO reset limits
+    resetLimitOptions(key);
+  };
+
+  const handleLimitValueChange = (
+    val,
+    key,
+    type,
+    frequencyType,
+    isFrequency = false,
+  ) => {
+    const stateFunction = getStateSetterFunction(key);
+    const value = Number(val) || '';
+    let errorMsg = '';
+    let setDailyErrorMessage = false;
+    let setWeeklyErrorMessage = false;
+    let setMonthlyErrorMessage = false;
+    let dailyErrorMessage = '';
+    let weeklyErrorMessage = '';
+    let monthlyErrorMessage = '';
+    let validDaily = '';
+    let validWeekly = '';
+    let validMonthly = '';
+    const stateType = getStateType(key);
+    const addFrequency = isFrequency ? 'Frequency' : '';
+    const limitKey = `PointTransfer${addFrequency}Limit`;
+    const dailyValue = stateType[`daily${limitKey}`];
+    const weeklyValue = stateType[`weekly${limitKey}`];
+    const monthlyValue = stateType[`monthly${limitKey}`];
+    if (value >= MAX_INTEGER_LIMIT) {
+      errorMsg = `Maximum value allowed is ${MAX_INTEGER_LIMIT}`;
+    } else if (frequencyType) {
+      if (frequencyType === 'daily') {
+        const invalidDaily =
+          (value > weeklyValue || value > monthlyValue) &&
+          (weeklyValue !== '' || monthlyValue != '');
+        errorMsg = invalidDaily
+          ? formatMessage(messages.errorMessageDaily)
+          : '';
+        validWeekly = value < weeklyValue && weeklyValue < monthlyValue && weeklyValue !== '';
+        validMonthly = value < monthlyValue && monthlyValue > weeklyValue && monthlyValue !== '';
+      } else if (frequencyType === 'weekly') {
+        const invalidWeekly = value < dailyValue && dailyValue != '';
+        const invalidMonthly = value > monthlyValue && monthlyValue != '';
+        errorMsg = invalidWeekly
+          ? formatMessage(messages.errorMessageWeekly)
+          : '';
+        errorMsg = invalidMonthly
+          ? formatMessage(messages.errorMessageMonthly)
+          : errorMsg;
+        validDaily = value > dailyValue && dailyValue < monthlyValue && dailyValue != '';
+        validMonthly = value < monthlyValue && dailyValue < monthlyValue  && monthlyValue != '';
+      } else if (frequencyType === 'monthly') {
+        const invalidMonthly = value < dailyValue || value < weeklyValue;
+        errorMsg = invalidMonthly
+          ? formatMessage(messages.errorMessageFrequencyMonthly)
+          : '';
+        validDaily = value > dailyValue && dailyValue < weeklyValue && dailyValue !== '';
+        validWeekly = weeklyValue > dailyValue && weeklyValue < value && weeklyValue !== '';
+      }
+    }
+    if (validDaily) {
+      setDailyErrorMessage = true;
+      dailyErrorMessage = '';
+    }
+    if (validWeekly) {
+      setWeeklyErrorMessage = true;
+      weeklyErrorMessage = '';
+    }
+    if (validMonthly) {
+      setMonthlyErrorMessage = true;
+      monthlyErrorMessage = '';
+    }
+    stateFunction(prevstate => {
+      const newState = { ...prevstate };
+      newState[type] = value;
+      newState[`${type}ErrorMsg`] = errorMsg;
+      if (setDailyErrorMessage) {
+        newState[`daily${limitKey}ErrorMsg`] = dailyErrorMessage;
+      }
+      if (setWeeklyErrorMessage) {
+        newState[`weekly${limitKey}ErrorMsg`] = weeklyErrorMessage;
+      }
+      if (setMonthlyErrorMessage) {
+        newState[`monthly${limitKey}ErrorMsg`] = monthlyErrorMessage;
+      }
+      return newState;
+    });
+  };
+
+  const handleIsSameAsCheckbox = (e, key, type) => {
+    const stateFunction = getStateSetterFunction(key);
+    const stateType = getStateType(key);
+    stateFunction(prevstate => ({
+      ...prevstate,
+      [type]: !stateType.isSameChecked,
+    }));
+  };
+
+  const handleSelectChange = (value, key, type) => {
+    const stateFunction = getStateSetterFunction(key);
+    stateFunction(prevstate => ({ ...prevstate, [type]: value }));
+  };
+
+  const updateSettings = () => {
+    onSettingsChange(IndToIndData, IndToGrpData, GrpToIndData, GrpToGrpData);
+  };
+
+  const copyPointTransferConfig = (key, sameAs, isSameChecked) => {
+    const stateFunction = getStateSetterFunction(key);
+    const copyFromstateType = getStateType(sameAs);
+
+    if (
+      isSameChecked &&
+      sameAs !== '' &&
+      copyFromstateType.selectedLimit !== 'nolimit'
+    ) {
+      stateFunction(prevstate => ({
+        ...prevstate,
+        ...copyFromstateType,
+        key,
+        isSameChecked: prevstate.isSameChecked,
+        isSameAs: prevstate.isSameAs,
+      }));
+    } else if (!isSameChecked && sameAs !== '') {
+      resetLimitOptions(key);
+    }
+  };
+
+  const resetLimitOptions = key => {
+    const stateFunction = getStateSetterFunction(key);
+    stateFunction(prevstate => ({
+      ...prevstate,
+      ...initialState,
+      key: prevstate.key,
+      selectedLimit: prevstate.selectedLimit,
+    }));
+  };
+
+  const limitStatus = (key, stateItem) => {
+    const limitDisplayText =
+      stateItem.selectedLimit === 'nolimit'
+        ? formatMessage(globalMessages.noLimit)
+        : formatMessage(messages.limitSet);
+    return <CapLabel type="label2">{limitDisplayText}</CapLabel>;
+  };
+
+  const renderLimitInput = (
+    key,
+    stateItem,
+    selectionKey,
+    inputKey,
+    frequencyType = '',
+    isFrequency,
+  ) => (
+    <Flex align>
+      <CapSelect
+        style={{ width: '200px' }}
+        options={LimitValueOption}
+        value={stateItem[selectionKey]}
+        onChange={val => {
+          handleSelectChange(val, key, selectionKey)
+          handleLimitValueChange(
+            '',
+            key,
+            inputKey,
+            frequencyType,
+            isFrequency,
+          )
+        }}
+        disabled={stateItem.isSameAs !== ''}
+      />
+      {stateItem[selectionKey] === 'specificvalue' && (
+        <NumberInput
+          style={{ width: '200px' }}
+          className="input-limit"
+          placeholder={formatMessage(messages.ptsTransInputPlaceholder)}
+          onChange={e =>
+            handleLimitValueChange(
+              e.target.value,
+              key,
+              inputKey,
+              frequencyType,
+              isFrequency,
+            )
+          }
+          disabled={stateItem.isSameAs !== ''}
+          value={stateItem[inputKey]}
+          errorMessage={stateItem[`${inputKey}ErrorMsg`]}
+          type="POSITIVE_INTEGER"
+        />
+      )}
+    </Flex>
+  );
+
+  const renderFrequencyData = (key, stateItem, heading, isFrequency) => {
+    const frequencyData = {
+      daily: {
+        header: formatMessage(messages.inADay),
+        key: 'daily',
+      },
+      weekly: {
+        header: formatMessage(messages.inDays, { day: 7 }),
+        key: 'weekly',
+      },
+      monthly: {
+        header: formatMessage(messages.inDays, { day: 30 }),
+        key: 'monthly',
+      },
+    };
+    const addFrequency = isFrequency ? 'Frequency' : '';
+    return (
+      <CapRow>
+        <CapHeading
+          type="h3"
+          className={classnames(
+            'padding-bottom-14',
+            stateItem.isSameAs !== '' ? 'disabled-view' : '',
+          )}
+        >
+          {heading}
+        </CapHeading>
+        <CapRow>
+          {Object.keys(frequencyData).map(type => (
+            <CapRow className="padding-bottom-8">
+              <CapColumn span={8} className="frequency-heading">
+                <CapHeading
+                  type="h5"
+                  className={classnames(
+                    stateItem.isSameAs !== '' ? 'disabled-view' : '',
+                  )}
+                >
+                  {frequencyData[type]['header']}
+                </CapHeading>
+              </CapColumn>
+              <CapColumn span={16}>
+                {renderLimitInput(
+                  key,
+                  stateItem,
+                  `${type}PointTransfer${addFrequency}SelectedLimit`,
+                  `${type}PointTransfer${addFrequency}Limit`,
+                  type,
+                  isFrequency,
+                )}
+              </CapColumn>
+            </CapRow>
+          ))}
+        </CapRow>
+      </CapRow>
+    );
+  };
+
+  const renderPanelData = () => {
+    const stateArr = [
+      {
+        stateItem: IndToIndData,
+        key: 'IND_TO_IND',
+        header: (
+          <CapPanelHeading type="h3">
+            {formatMessage(messages.ptsTransIndtoInd)}
+          </CapPanelHeading>
+        ),
+      },
+      {
+        stateItem: IndToGrpData,
+        key: 'IND_TO_GRP',
+        header: (
+          <CapPanelHeading type="h3">
+            {formatMessage(messages.ptsTransIndtoGrp)}
+          </CapPanelHeading>
+        ),
+      },
+      {
+        stateItem: GrpToIndData,
+        key: 'GRP_TO_IND',
+        header: (
+          <CapPanelHeading type="h3">
+            {formatMessage(messages.ptsTransGrptoInd)}
+          </CapPanelHeading>
+        ),
+      },
+      {
+        stateItem: GrpToGrpData,
+        key: 'GRP_TO_GRP',
+        header: (
+          <CapPanelHeading type="h3">
+            {formatMessage(messages.ptsTransGrptoGrp)}
+          </CapPanelHeading>
+        ),
+      },
+    ];
+
+    return (
+      <>
+        {stateArr.map(({ key, stateItem, header }) => (
+          <Panel
+            header={header}
+            key={key}
+            extra={limitStatus(key, stateItem)}
+            className="pts-transfer-panel"
+          >
+            <div>
+              <CapRow>
+                <CapRadioGroup
+                  name="collapse-radio-group"
+                  className="padding-bottom-16"
+                  value={stateItem.selectedLimit}
+                  onChange={e => handleSelectedLimit(e, key, 'selectedLimit')}
+                  options={LimitOption}
+                />
+              </CapRow>
+              {stateItem.selectedLimit == 'setlimit' && (
+                <>
+                  <CapRow className="padding-bottom-16">
+                    <Flex>
+                      <CapCheckbox
+                        className="select-same-settings"
+                        checked={stateItem.isSameChecked}
+                        onChange={e =>
+                          handleIsSameAsCheckbox(e, key, 'isSameChecked')
+                        }
+                      >
+                        {formatMessage(messages.sameAs)}
+                      </CapCheckbox>
+                      <CapSelect
+                        style={{ width: 200 }}
+                        placeholder={formatMessage(globalMessages.select)}
+                        options={filter(
+                          settingsTypeOption,
+                          o => o.value !== stateItem.key,
+                        )}
+                        onChange={val =>
+                          handleSelectChange(val, key, 'isSameAs')
+                        }
+                        disabled={!stateItem.isSameChecked}
+                      />
+                    </Flex>
+                  </CapRow>
+                  <CapRow>
+                    <CapHeading
+                      type="h3"
+                      className={classnames(
+                        'padding-bottom-16',
+                        stateItem.isSameAs !== '' ? 'disabled-view' : '',
+                      )}
+                    >
+                      {formatMessage(messages.transactionLevel)}
+                    </CapHeading>
+                    <CapRow type="flex" align="middle">
+                    <CapColumn
+                      span={8}
+                      className={classnames(
+                        'padding-bottom-16',
+                        stateItem.isSameAs !== '' ? 'disabled-view' : '',
+                      )}
+                    >
+                      <CapHeading type="h5" className="limit-item">
+                        {formatMessage(messages.maxPointsSingleTransferLimit)}
+                      </CapHeading>
+                    </CapColumn>
+                    <CapColumn span={16} className="padding-bottom-16">
+                      {renderLimitInput(
+                        key,
+                        stateItem,
+                        'maxPointInTransactionSelectedLimit',
+                        'maxPointInTransactionLimit',
+                      )}
+                    </CapColumn>
+                    </CapRow>
+                  </CapRow>
+                  <CapRow>
+                    <CapHeading
+                      type="h3"
+                      className={classnames(
+                        'padding-bottom-16',
+                        stateItem.isSameAs !== '' ? 'disabled-view' : '',
+                      )}
+                    >
+                      {formatMessage(messages.customerLevel)}
+                    </CapHeading>
+                    {renderFrequencyData(
+                      key,
+                      stateItem,
+                      formatMessage(messages.maxPointsTransferLimit),
+                    )}
+                    {renderFrequencyData(
+                      key,
+                      stateItem,
+                      formatMessage(messages.pointsTransferFrequencyLimit),
+                      true,
+                    )}
+                  </CapRow>
+                </>
+              )}
+            </div>
+          </Panel>
+        ))}
+      </>
+    );
+  };
+
+  return (
+    <div className={className}>
+      <Collapse
+        defaultActiveKey={['IND_TO_IND']}
+        bordered={false}
+        expandIconPosition="end"
+        className="pts-transfer-collapse"
+        expandIcon={({ isActive }) => (
+          <CapIcon type="caret-right" rotate={isActive ? 90 : 0} />
+        )}
+      >
+        {renderPanelData()}
+      </Collapse>
+    </div>
+  );
+};
+
+PointsTransferCollapseData.propTypes = {
+  className: PropTypes.string,
+  intl: intlShape.isRequired,
+  settings: PropTypes.object,
+  onSettingsChange: PropTypes.func,
+  mode: PropTypes.string,
+};
+
+PointsTransferCollapseData.defaultProps = {
+  settings: {},
+};
+
+const mapStateToProps = createStructuredSelector({
+  pointsTransferSettingsData: makeSelectPointsTransfer(),
+  settingsData: makeSelectSettings(),
+});
+
+const withConnect = connect(mapStateToProps);
+
+export default withConnect(
+  injectIntl(withStyles(PointsTransferCollapseData, styles)),
+);