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 (