Notes

import React from 'react';
import { Textfield, Select } from 'foundation-components-core';
import { RecoveryMessage } from 'foundation-components-notifications';
import PropTypes from 'prop-types';
import { Col, Row } from 'foundation-components-grid';
import { I18n } from 'react-i18next';
import styled from 'styled-components';
import { fontSize } from '../../utils/fonts';
import { formatCurrency } from '../../utils/formatter';

/**
* The S2BAmount component have a combination of Select, Textfield and RecoveryMessage,
* The 'Textfield' component is for user input of amount in numeric.
* The 'RecoveryMessage' component display the respective error messages.
* The 'Select' component for select the currency code from the list.
*/
export const defaultMaxAmount = '9999999999999.99';
export default class S2BAmount extends React.Component {

constructor(props) {
super(props);
this.state = {
value: props.defaultAmount || '',
pattern: '[,.0-9]+',
isFocused: false
};
}

componentWillReceiveProps(nextProps) {
if (nextProps.defaultAmount !== this.props.defaultAmount) {
this.setState({
value: nextProps.defaultAmount || nextProps.defaultAmount === 0 ? nextProps.defaultAmount : ''
});
}
}

onFocusAmount = () => {
this.setState({
pattern: '^[0-9]{1,13}(.[0-9]{0,2})?$',
isFocused: true
});
}

onBlurAmount = () => {
this.setState({
pattern: '[,.0-9]+',
isFocused: false
});
}

onKeyPressAmount = (event) => {
const maxvalue = this.props.maxTransactionLimit ? this.props.maxTransactionLimit : defaultMaxAmount;
const cursorPosition = event.target.selectionStart;
let inputValueSplitArr = [];
const defaultValueSplitArr = maxvalue.split('.');
const keyCode = event.keyCode || event.which;
const { value } = event.target;
inputValueSplitArr = value ? value.split('.') : [];
const decimalPosition = value.toString().indexOf('.');
/* NOTE: keyCodes 48 to 57 are `0 to 9` 43 | 46 = `.` | 47 = ``/` */
if (
(keyCode < 46 || keyCode === 47) ||
keyCode > 57 ||
(value.toString().indexOf('.') >= 0 && keyCode === 46) ||/* only one period accepted */
(cursorPosition === 0 && keyCode === 46) ||/* amount value not started with period (dot) */
(cursorPosition === defaultValueSplitArr[0].length && keyCode !== 46) ||
(decimalPosition > 0 && cursorPosition <= decimalPosition && inputValueSplitArr[0].length >= defaultValueSplitArr[0].length) ||
(decimalPosition > 0 && cursorPosition > decimalPosition && inputValueSplitArr[1].length > 1)
) {
event.preventDefault();
}
}

getFormattedValue = (value, defaultCurrency) => (parseFloat(value) || value === '0' ? formatCurrency(value, defaultCurrency) : '')

render() {
const {
defaultCurrency,
onChangeCurrencyCode,
currencyCodeOptions,
isCurrencyCodeDisabled,
onChangeAmount,
isAmountDisabled,
errorMessage,
onEnterAmount
} = this.props;

const { isFocused, value } = this.state;
const amountValue = isFocused ? value : this.getFormattedValue(value, defaultCurrency ? defaultCurrency.label : 'invalidFormat');
return (
<I18n ns="common/common">
{(t) => (
<Row>
<Col sm={3}>
<Select
label=" "
selected={defaultCurrency}
placeholder={t('s2bAmount.placeholderSelectCountry')}
name="styled-select"
onChange={onChangeCurrencyCode}
options={currencyCodeOptions}
size="extraLarge"
showLabel={false}
disabled={isCurrencyCodeDisabled}
/>
</Col>
<Col sm={8} smOffset={1}>
<TextContainer>
<Textfield
id="s2bAmountId"
theme={{ container: 'overrideFont' }}
value={amountValue}
onChange={(e) => onChangeAmount({ value: e.target.value })}
type="text"
onKeyPress={this.onKeyPressAmount}
pattern={this.state.pattern}
disabled={isAmountDisabled}
onValidityChange={(e) => onEnterAmount && onEnterAmount(e.value.replace(/,/g, ''))}
placeholder={t('s2bAmount.placeholderEnterAmount')}
onFocus={this.onFocusAmount}
onBlur={this.onBlurAmount}
/>
</TextContainer>
{errorMessage && (
<RecoveryMessage
open
type="critical"
title={t('s2bAmount.errorMessageTitle')}
>
{errorMessage}
</RecoveryMessage>
)}
</Col>
</Row>
)}
</I18n>
);
}
}

S2BAmount.propTypes = {
/**
* To get the default values from parent component.
*/
defaultAmount: PropTypes.string,
defaultCurrency: PropTypes.shape({
label: PropTypes.string,
value: PropTypes.number
}),

/**
* Use for toggle the disabled state.
*/
isCurrencyCodeDisabled: PropTypes.bool,
isAmountDisabled: PropTypes.bool,

/**
* To get the country list from parent component.
*/
currencyCodeOptions: PropTypes.array,

/**
* To get the error message from parent component(error message based on negative values, minimum values and maximum value).
*/
errorMessage: PropTypes.string,

/**
* callback function to parent component
*/
onChangeAmount: PropTypes.func,
onChangeCurrencyCode: PropTypes.func,
/**
* callback function to check max and min amount validation
*/
onEnterAmount: PropTypes.func,

/**
* To get the default amount value form component.
*/
maxTransactionLimit: PropTypes.string
};

const TextContainer = styled.div`
input[type='number']::-webkit-inner-spin-button,
input[type='number']::-webkit-outer-spin-button {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
margin: 0;
}
.overrideFont {
input[type='number'] {
font-size: ${fontSize.extraLarge};
}
}
position: relative;
`;