Merge pull request #57202 from Expensify/neil-xero-2fa-disable

Display Xero disable 2FA error from backend

src/components/Button/validateSubmitShortcut/index.ts

@@ -1,5 +1,7 @@
 import type ValidateSubmitShortcut from './types';
 
+const IGNORED_NODE_NAMES = ['TEXTAREA', 'INPUT'];
+
 /**
  * Validate if the submit shortcut should be triggered depending on the button state
  *
@@ -11,7 +13,9 @@ import type ValidateSubmitShortcut from './types';
 
 const validateSubmitShortcut: ValidateSubmitShortcut = (isDisabled, isLoading, event) => {
     const eventTarget = event?.target as HTMLElement;
-    if (isDisabled || isLoading || eventTarget.nodeName === 'TEXTAREA' || (eventTarget?.contentEditable === 'true' && eventTarget.ariaMultiLine)) {
+
+    // If the event target node is for an input, such as when there's a stray "Enter" event from an autocomplete input, then ignore it because it's not meant for this button
+    if (isDisabled || isLoading || IGNORED_NODE_NAMES.includes(eventTarget.nodeName) || (eventTarget?.contentEditable === 'true' && eventTarget.ariaMultiLine)) {
         return false;
     }
 

src/libs/actions/Session/index.ts

@@ -1090,6 +1090,10 @@ function toggleTwoFactorAuth(enable: boolean, twoFactorAuthCode = '') {
     API.write(WRITE_COMMANDS.DISABLE_TWO_FACTOR_AUTH, params, {optimisticData, successData, failureData});
 }
 
+function clearDisableTwoFactorAuthErrors() {
+    Onyx.merge(ONYXKEYS.ACCOUNT, {errorFields: {requiresTwoFactorAuth: null}});
+}
+
 function updateAuthTokenAndOpenApp(authToken?: string, encryptedAuthToken?: string) {
     // Update authToken in Onyx and in our local variables so that API requests will use the new authToken
     updateSessionAuthTokens(authToken, encryptedAuthToken);
@@ -1349,4 +1353,5 @@ export {
     validateUserAndGetAccessiblePolicies,
     isUserOnPrivateDomain,
     resetSMSDeliveryFailureStatus,
+    clearDisableTwoFactorAuthErrors,
 };

src/pages/settings/Security/TwoFactorAuth/DisablePage.tsx

@@ -1,12 +1,15 @@
-import React, {useEffect, useRef} from 'react';
+import isEmpty from 'lodash/isEmpty';
+import React, {useCallback, useEffect, useRef} from 'react';
 import {View} from 'react-native';
 import {useOnyx} from 'react-native-onyx';
 import Button from '@components/Button';
+import ConfirmModal from '@components/ConfirmModal';
 import FixedFooter from '@components/FixedFooter';
 import ScrollView from '@components/ScrollView';
 import Text from '@components/Text';
 import useLocalize from '@hooks/useLocalize';
 import useThemeStyles from '@hooks/useThemeStyles';
+import {clearDisableTwoFactorAuthErrors} from '@libs/actions/Session';
 import Navigation from '@libs/Navigation/Navigation';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
@@ -30,6 +33,13 @@ function DisablePage() {
         Navigation.navigate(ROUTES.SETTINGS_2FA_DISABLED, {forceReplace: true});
     }, [account?.requiresTwoFactorAuth]);
 
+    const closeModal = useCallback(() => {
+        clearDisableTwoFactorAuthErrors();
+
+        // Go back to the previous page because the user can't disable 2FA and this page is no longer relevant
+        Navigation.goBack();
+    }, []);
+
     return (
         <TwoFactorAuthWrapper
             stepName={CONST.TWO_FACTOR_AUTH_STEPS.DISABLE}
@@ -60,6 +70,16 @@ function DisablePage() {
                     }}
                 />
             </FixedFooter>
+            <ConfirmModal
+                title={translate('twoFactorAuth.twoFactorAuthCannotDisable')}
+                prompt={translate('twoFactorAuth.twoFactorAuthRequired')}
+                confirmText={translate('common.buttonConfirm')}
+                onConfirm={closeModal}
+                shouldShowCancelButton={false}
+                onBackdropPress={closeModal}
+                onCancel={closeModal}
+                isVisible={!isEmpty(account?.errorFields?.requiresTwoFactorAuth ?? {})}
+            />
         </TwoFactorAuthWrapper>
     );
 }

src/types/onyx/Account.ts

@@ -137,6 +137,9 @@ type Account = {
     /** Authentication failure errors */
     errors?: OnyxCommon.Errors | null;
 
+    /** Errors related to specific account fields */
+    errorFields?: OnyxCommon.ErrorFields;
+
     /** Authentication success message */
     success?: string;