Fix Inconsistency in the security page and Request money page

src/languages/en.js

@@ -407,6 +407,7 @@ export default {
         threadSentMoneyReportName: ({formattedAmount, comment}) => `${formattedAmount} sent${comment ? ` for ${comment}` : ''}`,
         requestCount: ({count}) => `${count} requests`,
         error: {
+            invalidAmount: 'Please enter a valid amount before continuing.',
             invalidSplit: 'Split amounts do not equal total amount',
             other: 'Unexpected error, please try again later',
             genericCreateFailureMessage: 'Unexpected error requesting money, please try again later',
@@ -590,6 +591,7 @@ export default {
         keepCodesSafe: 'Keep these recovery codes safe!',
         codesLoseAccess:
             'If you lose access to your authenticator app and don’t have these codes, you will lose access to your account. \n\nNote: Setting up two-factor authentication will log you out of all other active sessions.',
+        errorStepCodes: 'Please copy or download codes before continuing.',
         stepVerify: 'Verify',
         scanCode: 'Scan the QR code using your',
         authenticatorApp: 'authenticator app',

src/languages/es.js

@@ -406,6 +406,7 @@ export default {
         threadSentMoneyReportName: ({formattedAmount, comment}) => `${formattedAmount} enviado${comment ? ` para ${comment}` : ''}`,
         requestCount: ({count}) => `${count} solicitudes`,
         error: {
+            invalidAmount: 'Por favor ingresa un monto válido antes de continuar.',
             invalidSplit: 'La suma de las partes no equivale al monto total',
             other: 'Error inesperado, por favor inténtalo más tarde',
             genericCreateFailureMessage: 'Error inesperado solicitando dinero, Por favor, inténtalo más tarde',
@@ -591,6 +592,7 @@ export default {
         keepCodesSafe: '¡Guarda los códigos de recuperación en un lugar seguro!',
         codesLoseAccess:
             'Si pierdes el acceso a tu aplicación de autenticación y no tienes estos códigos, perderás el acceso a tu cuenta. \n\nNota: Configurar la autenticación de dos factores cerrará la sesión de todas las demás sesiones activas.',
+        errorStepCodes: 'Copia o descarga los códigos antes de continuar.',
         stepVerify: 'Verificar',
         scanCode: 'Escanea el código QR usando tu',
         authenticatorApp: 'aplicación de autenticación',

src/pages/iou/steps/MoneyRequestAmountForm.js

@@ -12,6 +12,7 @@ import * as DeviceCapabilities from '../../../libs/DeviceCapabilities';
 import TextInputWithCurrencySymbol from '../../../components/TextInputWithCurrencySymbol';
 import useLocalize from '../../../hooks/useLocalize';
 import CONST from '../../../CONST';
+import FormHelpMessage from '../../../components/FormHelpMessage';
 
 const propTypes = {
     /** IOU amount saved in Onyx */
@@ -57,6 +58,8 @@ const getNewSelection = (oldSelection, prevLength, newLength) => {
     return {start: cursorPosition, end: cursorPosition};
 };
 
+const checkAmount = (amount) => !amount.length || parseFloat(amount) < 0.01;
+
 const AMOUNT_VIEW_ID = 'amountView';
 const NUM_PAD_CONTAINER_VIEW_ID = 'numPadContainerView';
 const NUM_PAD_VIEW_ID = 'numPadView';
@@ -69,6 +72,8 @@ function MoneyRequestAmountForm({amount, currency, isEditing, forwardedRef, onCu
     const selectedAmountAsString = amount ? CurrencyUtils.convertToWholeUnit(currency, amount).toString() : '';
 
     const [currentAmount, setCurrentAmount] = useState(selectedAmountAsString);
+    const [isInvaidAmount, setIsInvalidAmount] = useState(checkAmount(selectedAmountAsString));
+    const [formError, setFormError] = useState('');
     const [shouldUpdateSelection, setShouldUpdateSelection] = useState(true);
 
     const [selection, setSelection] = useState({
@@ -124,6 +129,8 @@ function MoneyRequestAmountForm({amount, currency, isEditing, forwardedRef, onCu
             setSelection((prevSelection) => ({...prevSelection}));
             return;
         }
+        setIsInvalidAmount(checkAmount(newAmountWithoutSpaces));
+        setFormError('');
         setCurrentAmount((prevAmount) => {
             setSelection((prevSelection) => getNewSelection(prevSelection, prevAmount.length, newAmountWithoutSpaces.length));
             return MoneyRequestUtils.stripCommaFromAmount(newAmountWithoutSpaces);
@@ -172,8 +179,12 @@ function MoneyRequestAmountForm({amount, currency, isEditing, forwardedRef, onCu
      * Submit amount and navigate to a proper page
      */
     const submitAndNavigateToNextPage = useCallback(() => {
+        if (isInvaidAmount) {
+            setFormError('iou.error.invalidAmount');
+            return;
+        }
         onSubmitButtonPress(currentAmount);
-    }, [onSubmitButtonPress, currentAmount]);
+    }, [onSubmitButtonPress, currentAmount, isInvaidAmount]);
 
     const formattedAmount = MoneyRequestUtils.replaceAllDigits(currentAmount, toLocaleDigit);
     const buttonText = isEditing ? translate('common.save') : translate('common.next');
@@ -222,14 +233,20 @@ function MoneyRequestAmountForm({amount, currency, isEditing, forwardedRef, onCu
                         longPressHandlerStateChanged={updateLongPressHandlerState}
                     />
                 ) : null}
-                <Button
-                    success
-                    style={[styles.w100, styles.mt5]}
-                    onPress={submitAndNavigateToNextPage}
-                    pressOnEnter
-                    isDisabled={!currentAmount.length || parseFloat(currentAmount) < 0.01}
-                    text={buttonText}
-                />
+                <View style={[styles.w100, styles.mt5]}>
+                    {!_.isEmpty(formError) && (
+                        <FormHelpMessage
+                            isError
+                            message={translate(formError)}
+                        />
+                    )}
+                    <Button
+                        success
+                        onPress={submitAndNavigateToNextPage}
+                        pressOnEnter
+                        text={buttonText}
+                    />
+                </View>
             </View>
         </>
     );

src/pages/settings/Security/TwoFactorAuth/CodesPage.js

@@ -25,6 +25,7 @@ import Clipboard from '../../../../libs/Clipboard';
 import themeColors from '../../../../styles/themes/default';
 import localFileDownload from '../../../../libs/localFileDownload';
 import * as TwoFactorAuthActions from '../../../../libs/actions/TwoFactorAuthActions';
+import FormHelpMessage from '../../../../components/FormHelpMessage';
 
 const propTypes = {
     ...withLocalizePropTypes,
@@ -46,6 +47,7 @@ const defaultProps = {
 
 function CodesPage(props) {
     const [isNextButtonDisabled, setIsNextButtonDisabled] = useState(true);
+    const [error, setError] = useState('');
 
     // Here, this eslint rule will make the unmount effect unreadable, possibly confusing with mount
     // eslint-disable-next-line arrow-body-style
@@ -106,6 +108,7 @@ function CodesPage(props) {
                                             onPress={() => {
                                                 Clipboard.setString(props.account.recoveryCodes);
                                                 setIsNextButtonDisabled(false);
+                                                setError('');
                                             }}
                                             styles={[styles.button, styles.buttonMedium, styles.twoFactorAuthCodesButton]}
                                             textStyles={[styles.buttonMediumText]}
@@ -116,6 +119,7 @@ function CodesPage(props) {
                                             onPress={() => {
                                                 localFileDownload('two-factor-auth-codes', props.account.recoveryCodes);
                                                 setIsNextButtonDisabled(false);
+                                                setError('');
                                             }}
                                             inline={false}
                                             styles={[styles.button, styles.buttonMedium, styles.twoFactorAuthCodesButton]}
@@ -128,11 +132,22 @@ function CodesPage(props) {
                     </Section>
                 </ScrollView>
                 <FixedFooter style={[styles.mtAuto, styles.pt2]}>
+                    {!_.isEmpty(error) && (
+                        <FormHelpMessage
+                            isError
+                            message={props.translate(error)}
+                        />
+                    )}
                     <Button
                         success
                         text={props.translate('common.next')}
-                        onPress={() => Navigation.navigate(ROUTES.SETTINGS_2FA_VERIFY)}
-                        isDisabled={isNextButtonDisabled}
+                        onPress={() => {
+                            if (isNextButtonDisabled) {
+                                setError('twoFactorAuth.errorStepCodes');
+                                return;
+                            }
+                            Navigation.navigate(ROUTES.SETTINGS_2FA_VERIFY);
+                        }}
                     />
                 </FixedFooter>
             </FullPageOfflineBlockingView>