Merge pull request #28266 from akinwale/task-27255

fix: prevent requesting for amounts larger than the allowed maximum

Author: aldo-expensify

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 ? (
             <SettlementButton
                 isDisabled={shouldDisableButton}
                 onPress={confirm}
@@ -422,7 +439,20 @@ function MoneyRequestConfirmationList(props) {
                 buttonSize={CONST.DROPDOWN_BUTTON_SIZE.LARGE}
             />
         );
-    }, [confirm, props.bankAccountRoute, props.iouCurrencyCode, props.iouType, props.isReadOnly, props.policyID, selectedParticipants, splitOrRequestOptions]);
+
+        return (
+            <>
+                {!_.isEmpty(formError) && (
+                    <FormHelpMessage
+                        style={[styles.ph1, styles.mb2]}
+                        isError
+                        message={translate(formError)}
+                    />
+                )}
+                {button}
+            </>
+        );
+    }, [confirm, props.bankAccountRoute, props.iouCurrencyCode, props.iouType, props.isReadOnly, props.policyID, selectedParticipants, splitOrRequestOptions, translate, formError]);
 
     return (
         <OptionsSelector