Fix - User is able to disable 2FA when connected to Xero accounting

src/languages/en.ts

@@ -1356,6 +1356,8 @@ const translations = {
         pleaseEnableTwoFactorAuth: 'Please enable two-factor authentication.',
         twoFactorAuthIsRequiredDescription: 'For security purposes, Xero requires two-factor authentication to connect the integration.',
         twoFactorAuthIsRequiredForAdminsDescription: 'Two-factor authentication is required for Xero workspace admins. Please enable two-factor authentication to continue.',
+        twoFactorAuthCannotDisable: 'Cannot disable 2FA',
+        twoFactorAuthRequired: 'Two-factor authentication (2FA) is required for your Xero connection and cannot be disabled.',
     },
     recoveryCodeForm: {
         error: {

src/languages/es.ts

@@ -1357,6 +1357,8 @@ const translations = {
         twoFactorAuthIsRequiredDescription: 'Por razones de seguridad, Xero requiere la autenticación de dos factores para conectar la integración.',
         twoFactorAuthIsRequiredForAdminsDescription:
             'La autenticación de dos factores es necesaria para los administradores del área de trabajo de Xero. Activa la autenticación de dos factores para continuar.',
+        twoFactorAuthCannotDisable: 'No se puede desactivar la autenticación de dos factores (2FA)',
+        twoFactorAuthRequired: 'La autenticación de dos factores (2FA) es obligatoria para tu conexión a Xero y no se puede desactivar.',
     },
     recoveryCodeForm: {
         error: {

src/libs/PolicyUtils.ts

@@ -671,6 +671,14 @@ function getActiveAdminWorkspaces(policies: OnyxCollection<Policy> | null, curre
     return activePolicies.filter((policy) => shouldShowPolicy(policy, isOfflineNetworkStore(), currentUserLogin) && isPolicyAdmin(policy, currentUserLogin));
 }
 
+/**
+ *
+ * Checks whether the current user has a policy with Xero accounting software integration
+ */
+function hasPolicyWithXeroConnection(currentUserLogin: string | undefined) {
+    return getActiveAdminWorkspaces(allPolicies, currentUserLogin)?.some((policy) => !!policy?.connections?.[CONST.POLICY.CONNECTIONS.NAME.XERO]);
+}
+
 /** Whether the user can send invoice from the workspace */
 function canSendInvoiceFromWorkspace(policyID: string | undefined): boolean {
     const policy = getPolicy(policyID);
@@ -1275,6 +1283,7 @@ export {
     findSelectedInvoiceItemWithDefaultSelect,
     findSelectedTaxAccountWithDefaultSelect,
     findSelectedSageVendorWithDefaultSelect,
+    hasPolicyWithXeroConnection,
     getNetSuiteVendorOptions,
     canUseTaxNetSuite,
     canUseProvincialTaxNetSuite,

src/pages/settings/Security/TwoFactorAuth/Steps/EnabledStep.tsx

@@ -1,5 +1,7 @@
-import React from 'react';
+import React, {useCallback, useState} from 'react';
 import {View} from 'react-native';
+import {useOnyx} from 'react-native-onyx';
+import ConfirmModal from '@components/ConfirmModal';
 import * as Expensicons from '@components/Icon/Expensicons';
 import * as Illustrations from '@components/Icon/Illustrations';
 import ScrollView from '@components/ScrollView';
@@ -8,18 +10,25 @@ import Text from '@components/Text';
 import useLocalize from '@hooks/useLocalize';
 import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
+import {hasPolicyWithXeroConnection} from '@libs/PolicyUtils';
 import StepWrapper from '@pages/settings/Security/TwoFactorAuth/StepWrapper/StepWrapper';
 import useTwoFactorAuthContext from '@pages/settings/Security/TwoFactorAuth/TwoFactorAuthContext/useTwoFactorAuth';
 import CONST from '@src/CONST';
+import ONYXKEYS from '@src/ONYXKEYS';
 
 function EnabledStep() {
     const theme = useTheme();
     const styles = useThemeStyles();
-
+    const [isVisible, setIsVisible] = useState(false);
     const {setStep} = useTwoFactorAuthContext();
+    const [currentUserLogin] = useOnyx(ONYXKEYS.SESSION, {selector: (session) => session?.email});
 
     const {translate} = useLocalize();
 
+    const closeModal = useCallback(() => {
+        setIsVisible(false);
+    }, []);
+
     return (
         <StepWrapper title={translate('twoFactorAuth.headerTitle')}>
             <ScrollView>
@@ -30,6 +39,10 @@ function EnabledStep() {
                         {
                             title: translate('twoFactorAuth.disableTwoFactorAuth'),
                             onPress: () => {
+                                if (hasPolicyWithXeroConnection(currentUserLogin)) {
+                                    setIsVisible(true);
+                                    return;
+                                }
                                 setStep(CONST.TWO_FACTOR_AUTH_STEPS.GETCODE);
                             },
                             icon: Expensicons.Close,
@@ -43,6 +56,16 @@ function EnabledStep() {
                         <Text style={styles.textLabel}>{translate('twoFactorAuth.whatIsTwoFactorAuth')}</Text>
                     </View>
                 </Section>
+                <ConfirmModal
+                    title={translate('twoFactorAuth.twoFactorAuthCannotDisable')}
+                    prompt={translate('twoFactorAuth.twoFactorAuthRequired')}
+                    confirmText={translate('common.buttonConfirm')}
+                    onConfirm={closeModal}
+                    shouldShowCancelButton={false}
+                    onBackdropPress={closeModal}
+                    onCancel={closeModal}
+                    isVisible={isVisible}
+                />
             </ScrollView>
         </StepWrapper>
     );