diff --git a/src/components/MoneyRequestConfirmationList.js b/src/components/MoneyRequestConfirmationList.js index 695d935d7183..d18e5fda1693 100755 --- a/src/components/MoneyRequestConfirmationList.js +++ b/src/components/MoneyRequestConfirmationList.js @@ -5,6 +5,7 @@ import {format} from 'date-fns'; import _ from 'underscore'; import {View} from 'react-native'; import lodashGet from 'lodash/get'; +import {useIsFocused} from '@react-navigation/native'; import Text from './Text'; import styles from '../styles/styles'; import * as ReportUtils from '../libs/ReportUtils'; @@ -36,9 +37,11 @@ import tagPropTypes from './tagPropTypes'; import ConfirmedRoute from './ConfirmedRoute'; import transactionPropTypes from './transactionPropTypes'; import DistanceRequestUtils from '../libs/DistanceRequestUtils'; +import FormHelpMessage from './FormHelpMessage'; import * as IOU from '../libs/actions/IOU'; import * as TransactionUtils from '../libs/TransactionUtils'; import * as PolicyUtils from '../libs/PolicyUtils'; +import * as MoneyRequestUtils from '../libs/MoneyRequestUtils'; const propTypes = { /** Callback to inform parent modal of success */ @@ -216,6 +219,13 @@ function MoneyRequestConfirmationList(props) { props.isDistanceRequest ? currency : props.iouCurrencyCode, ); + const isFocused = useIsFocused(); + const [formError, setFormError] = useState(''); + useEffect(() => { + // reset the form error whenever the screen gains or loses focus + setFormError(''); + }, [isFocused]); + useEffect(() => { if (!shouldCalculateDistanceAmount) { return; @@ -370,8 +380,6 @@ function MoneyRequestConfirmationList(props) { */ const confirm = useCallback( (paymentMethod) => { - setDidConfirm(true); - if (_.isEmpty(selectedParticipants)) { return; } @@ -381,13 +389,22 @@ function MoneyRequestConfirmationList(props) { return; } + setDidConfirm(true); + Log.info(`[IOU] Sending money via: ${paymentMethod}`); onSendMoney(paymentMethod); } else { + // validate the amount for distance requests + if (props.isDistanceRequest && !isDistanceRequestWithoutRoute && !MoneyRequestUtils.validateAmount(String(props.iouAmount))) { + setFormError('common.error.invalidAmount'); + return; + } + + setDidConfirm(true); onConfirm(selectedParticipants); } }, - [selectedParticipants, onSendMoney, onConfirm, props.iouType], + [selectedParticipants, onSendMoney, onConfirm, props.iouType, props.isDistanceRequest, isDistanceRequestWithoutRoute, props.iouAmount], ); const footerContent = useMemo(() => { @@ -398,7 +415,7 @@ function MoneyRequestConfirmationList(props) { const shouldShowSettlementButton = props.iouType === CONST.IOU.MONEY_REQUEST_TYPE.SEND; const shouldDisableButton = selectedParticipants.length === 0; - return shouldShowSettlementButton ? ( + const button = shouldShowSettlementButton ? ( ); - }, [confirm, props.bankAccountRoute, props.iouCurrencyCode, props.iouType, props.isReadOnly, props.policyID, selectedParticipants, splitOrRequestOptions]); + + return ( + <> + {!_.isEmpty(formError) && ( + + )} + {button} + + ); + }, [confirm, props.bankAccountRoute, props.iouCurrencyCode, props.iouType, props.isReadOnly, props.policyID, selectedParticipants, splitOrRequestOptions, translate, formError]); return (