Merge pull request Expensify#68589 from FitseTLT/fix-QBD-bug-of-considering-small-screen-as-mweb

Fix - Accounting - Resizing the window on the QBD setup page should not trigger any error

Author: deetergp

src/components/ConnectToQuickbooksDesktopFlow/index.tsx

@@ -1,20 +1,19 @@
 import {useEffect} from 'react';
-import useResponsiveLayout from '@hooks/useResponsiveLayout';
+import {isMobile} from '@libs/Browser';
 import Navigation from '@libs/Navigation/Navigation';
 import ROUTES from '@src/ROUTES';
 import type {ConnectToQuickbooksDesktopFlowProps} from './types';
 
-function ConnectToQuickbooksDesktopFlow({policyID}: ConnectToQuickbooksDesktopFlowProps) {
-    // eslint-disable-next-line rulesdir/prefer-shouldUseNarrowLayout-instead-of-isSmallScreenWidth
-    const {isSmallScreenWidth} = useResponsiveLayout();
+const isMobileWeb = isMobile();
 
+function ConnectToQuickbooksDesktopFlow({policyID}: ConnectToQuickbooksDesktopFlowProps) {
     useEffect(() => {
-        if (isSmallScreenWidth) {
+        if (isMobileWeb) {
             Navigation.navigate(ROUTES.POLICY_ACCOUNTING_QUICKBOOKS_DESKTOP_SETUP_REQUIRED_DEVICE_MODAL.getRoute(policyID));
         } else {
             Navigation.navigate(ROUTES.POLICY_ACCOUNTING_QUICKBOOKS_DESKTOP_SETUP_MODAL.getRoute(policyID));
         }
-    }, [isSmallScreenWidth, policyID]);
+    }, [policyID]);
 
     return null;
 }

src/pages/workspace/accounting/AccountingContext.tsx

@@ -4,7 +4,6 @@ import type {View} from 'react-native';
 import type {OnyxEntry} from 'react-native-onyx';
 import AccountingConnectionConfirmationModal from '@components/AccountingConnectionConfirmationModal';
 import useLocalize from '@hooks/useLocalize';
-import useResponsiveLayout from '@hooks/useResponsiveLayout';
 import {removePolicyConnection} from '@libs/actions/connections';
 import Navigation from '@libs/Navigation/Navigation';
 import {isControlPolicy} from '@libs/PolicyUtils';
@@ -61,10 +60,6 @@ function AccountingContextProvider({children, policy}: AccountingContextProvider
     const {translate} = useLocalize();
     const policyID = policy?.id;
 
-    // We need to use isSmallScreenWidth instead of shouldUseNarrowLayout to allow QuickBooks Desktop setup to be shown only on large screens
-    // eslint-disable-next-line rulesdir/prefer-shouldUseNarrowLayout-instead-of-isSmallScreenWidth
-    const {isSmallScreenWidth} = useResponsiveLayout();
-
     const startIntegrationFlow = React.useCallback(
         (newActiveIntegration: ActiveIntegration) => {
             if (!policyID) {
@@ -80,7 +75,6 @@ function AccountingContextProvider({children, policy}: AccountingContextProvider
                 newActiveIntegration.integrationToDisconnect,
                 newActiveIntegration.shouldDisconnectIntegrationBeforeConnecting,
                 undefined,
-                isSmallScreenWidth,
             );
             const workspaceUpgradeNavigationDetails = accountingIntegrationData?.workspaceUpgradeNavigationDetails;
             if (workspaceUpgradeNavigationDetails && !isControlPolicy(policy)) {
@@ -94,7 +88,7 @@ function AccountingContextProvider({children, policy}: AccountingContextProvider
                 key: Math.random(),
             });
         },
-        [isSmallScreenWidth, policy, policyID, translate],
+        [policy, policyID, translate],
     );
 
     const closeConfirmationModal = () => {

src/pages/workspace/accounting/utils.tsx

@@ -11,6 +11,7 @@ import Text from '@components/Text';
 import TextLink from '@components/TextLink';
 import {isAuthenticationError} from '@libs/actions/connections';
 import {getAdminPoliciesConnectedToSageIntacct} from '@libs/actions/Policy/Policy';
+import getPlatform from '@libs/getPlatform';
 import {translateLocal} from '@libs/Localize';
 import {canUseTaxNetSuite} from '@libs/PolicyUtils';
 import Navigation from '@navigation/Navigation';
@@ -39,6 +40,9 @@ import {
 } from './netsuite/utils';
 import type {AccountingIntegration} from './types';
 
+const platform = getPlatform(true);
+const isMobile = [CONST.PLATFORM.MOBILE_WEB, CONST.PLATFORM.IOS, CONST.PLATFORM.ANDROID].some((value) => value === platform);
+
 function getAccountingIntegrationData(
     connectionName: PolicyConnectionName,
     policyID: string,
@@ -48,7 +52,6 @@ function getAccountingIntegrationData(
     integrationToDisconnect?: ConnectionName,
     shouldDisconnectIntegrationBeforeConnecting?: boolean,
     canUseNetSuiteUSATax?: boolean,
-    isSmallScreenWidth?: boolean,
 ): AccountingIntegration | undefined {
     const qboConfig = policy?.connections?.quickbooksOnline?.config;
     const netsuiteConfig = policy?.connections?.netsuite?.options?.config;
@@ -68,7 +71,7 @@ function getAccountingIntegrationData(
         if (integrationToDisconnect) {
             return ROUTES.POLICY_ACCOUNTING.getRoute(policyID, connectionName, integrationToDisconnect, shouldDisconnectIntegrationBeforeConnecting);
         }
-        if (isSmallScreenWidth) {
+        if (isMobile) {
             return ROUTES.POLICY_ACCOUNTING_QUICKBOOKS_DESKTOP_SETUP_REQUIRED_DEVICE_MODAL.getRoute(policyID);
         }
         return ROUTES.POLICY_ACCOUNTING_QUICKBOOKS_DESKTOP_SETUP_MODAL.getRoute(policyID);