Merge pull request #55203 from callstack-internal/VickyStash/feature/…

…55161-desktop-bank-connection

Update the direct bank connection flow on desktop

src/SCREENS.ts

@@ -22,6 +22,7 @@ const SCREENS = {
     TRANSITION_BETWEEN_APPS: 'TransitionBetweenApps',
     VALIDATE_LOGIN: 'ValidateLogin',
     CONNECTION_COMPLETE: 'ConnectionComplete',
+    BANK_CONNECTION_COMPLETE: 'BankConnectionComplete',
     UNLINK_LOGIN: 'UnlinkLogin',
     SETTINGS_CENTRAL_PANE: 'SettingsCentralPane',
     TRAVEL: {

src/components/DeeplinkWrapper/index.website.tsx

@@ -1,19 +1,19 @@
 import {Str} from 'expensify-common';
 import {useEffect, useRef, useState} from 'react';
-import * as Browser from '@libs/Browser';
+import {isMobile} from '@libs/Browser';
 import Navigation from '@libs/Navigation/Navigation';
 import navigationRef from '@libs/Navigation/navigationRef';
 import shouldPreventDeeplinkPrompt from '@libs/Navigation/shouldPreventDeeplinkPrompt';
-import * as App from '@userActions/App';
-import * as Link from '@userActions/Link';
-import * as Session from '@userActions/Session';
+import {beginDeepLinkRedirect, beginDeepLinkRedirectAfterTransition} from '@userActions/App';
+import {getInternalNewExpensifyPath} from '@userActions/Link';
+import {isAnonymousUser} from '@userActions/Session';
 import CONFIG from '@src/CONFIG';
 import CONST from '@src/CONST';
 import ROUTES from '@src/ROUTES';
 import type DeeplinkWrapperProps from './types';
 
 function isMacOSWeb(): boolean {
-    return !Browser.isMobile() && typeof navigator === 'object' && typeof navigator.userAgent === 'string' && /Mac/i.test(navigator.userAgent) && !/Electron/i.test(navigator.userAgent);
+    return !isMobile() && typeof navigator === 'object' && typeof navigator.userAgent === 'string' && /Mac/i.test(navigator.userAgent) && !/Electron/i.test(navigator.userAgent);
 }
 
 function promptToOpenInDesktopApp(initialUrl = '') {
@@ -27,12 +27,12 @@ function promptToOpenInDesktopApp(initialUrl = '') {
         if (params.get('referrer') === 'desktop') {
             return;
         }
-        App.beginDeepLinkRedirectAfterTransition();
+        beginDeepLinkRedirectAfterTransition();
     } else {
         // Match any magic link (/v/<account id>/<6 digit code>)
         const isMagicLink = CONST.REGEX.ROUTES.VALIDATE_LOGIN.test(window.location.pathname);
 
-        App.beginDeepLinkRedirect(!isMagicLink, Link.getInternalNewExpensifyPath(initialUrl));
+        beginDeepLinkRedirect(!isMagicLink, getInternalNewExpensifyPath(initialUrl));
     }
 }
 
@@ -67,7 +67,8 @@ function DeeplinkWrapper({children, isAuthenticated, autoAuthState, initialUrl}:
         // According to the design, we don't support unlink in Desktop app https://github.com/Expensify/App/issues/19681#issuecomment-1610353099
         const routeRegex = new RegExp(CONST.REGEX.ROUTES.UNLINK_LOGIN);
         const isUnsupportedDeeplinkRoute = routeRegex.test(window.location.pathname);
-        const isConnectionCompleteRoute = window.location.pathname.replace('/', '') === ROUTES.CONNECTION_COMPLETE;
+        const route = window.location.pathname.replace('/', '');
+        const isConnectionCompleteRoute = route === ROUTES.CONNECTION_COMPLETE || route === ROUTES.BANK_CONNECTION_COMPLETE;
 
         // Making a few checks to exit early before checking authentication status
         if (
@@ -77,7 +78,7 @@ function DeeplinkWrapper({children, isAuthenticated, autoAuthState, initialUrl}:
             isConnectionCompleteRoute ||
             CONFIG.ENVIRONMENT === CONST.ENVIRONMENT.DEV ||
             autoAuthState === CONST.AUTO_AUTH_STATE.NOT_STARTED ||
-            Session.isAnonymousUser()
+            isAnonymousUser()
         ) {
             return;
         }

src/libs/Navigation/AppNavigator/AuthScreens.tsx

@@ -599,7 +599,12 @@ function AuthScreens({session, lastOpenedPublicRoomID, initialLastUpdateIDApplie
                     />
                     <RootStack.Screen
                         name={SCREENS.CONNECTION_COMPLETE}
-                        options={defaultScreenOptions}
+                        options={rootNavigatorOptions.fullScreen}
+                        component={ConnectionCompletePage}
+                    />
+                    <RootStack.Screen
+                        name={SCREENS.BANK_CONNECTION_COMPLETE}
+                        options={rootNavigatorOptions.fullScreen}
                         component={ConnectionCompletePage}
                     />
                     {Object.entries(CENTRAL_PANE_SCREENS).map(([screenName, componentGetter]) => {

src/libs/Navigation/AppNavigator/PublicScreens.tsx

@@ -38,6 +38,10 @@ function PublicScreens() {
                 name={SCREENS.CONNECTION_COMPLETE}
                 component={ConnectionCompletePage}
             />
+            <RootStack.Screen
+                name={SCREENS.BANK_CONNECTION_COMPLETE}
+                component={ConnectionCompletePage}
+            />
             <RootStack.Screen
                 name={SCREENS.UNLINK_LOGIN}
                 component={UnlinkLoginPage}

src/libs/Navigation/linkingConfig/config.ts

@@ -16,6 +16,7 @@ const config: LinkingOptions<RootStackParamList>['config'] = {
         [SCREENS.UNLINK_LOGIN]: ROUTES.UNLINK_LOGIN,
         [SCREENS.TRANSITION_BETWEEN_APPS]: ROUTES.TRANSITION_BETWEEN_APPS,
         [SCREENS.CONNECTION_COMPLETE]: ROUTES.CONNECTION_COMPLETE,
+        [SCREENS.BANK_CONNECTION_COMPLETE]: ROUTES.BANK_CONNECTION_COMPLETE,
         [SCREENS.CONCIERGE]: ROUTES.CONCIERGE,
         [SCREENS.TRACK_EXPENSE]: ROUTES.TRACK_EXPENSE,
         [SCREENS.SUBMIT_EXPENSE]: ROUTES.SUBMIT_EXPENSE,

src/libs/Navigation/types.ts

@@ -1664,6 +1664,7 @@ type PublicScreensParamList = SharedScreensParamList & {
     [SCREENS.SIGN_IN_WITH_GOOGLE_DESKTOP]: undefined;
     [SCREENS.SAML_SIGN_IN]: undefined;
     [SCREENS.CONNECTION_COMPLETE]: undefined;
+    [SCREENS.BANK_CONNECTION_COMPLETE]: undefined;
 };
 
 type AuthScreensParamList = CentralPaneScreensParamList &
@@ -1711,6 +1712,7 @@ type AuthScreensParamList = CentralPaneScreensParamList &
             isFromReviewDuplicates?: string;
         };
         [SCREENS.CONNECTION_COMPLETE]: undefined;
+        [SCREENS.BANK_CONNECTION_COMPLETE]: undefined;
     };
 
 type SearchReportParamList = {

src/pages/workspace/companyCards/addNew/BankConnection/index.tsx

@@ -1,4 +1,4 @@
-import React, {useCallback, useEffect, useMemo} from 'react';
+import React, {useCallback, useEffect, useMemo, useState} from 'react';
 import {useOnyx} from 'react-native-onyx';
 import type {ValueOf} from 'type-fest';
 import BlockingView from '@components/BlockingViews/BlockingView';
@@ -10,11 +10,11 @@ import TextLink from '@components/TextLink';
 import useLocalize from '@hooks/useLocalize';
 import usePrevious from '@hooks/usePrevious';
 import useThemeStyles from '@hooks/useThemeStyles';
-import * as CardUtils from '@libs/CardUtils';
+import {checkIfNewFeedConnected} from '@libs/CardUtils';
 import Navigation from '@libs/Navigation/Navigation';
-import * as PolicyUtils from '@libs/PolicyUtils';
-import * as Card from '@userActions/Card';
-import * as CompanyCards from '@userActions/CompanyCards';
+import {getWorkspaceAccountID} from '@libs/PolicyUtils';
+import {updateSelectedFeed} from '@userActions/Card';
+import {setAddNewCompanyCardStepAndData} from '@userActions/CompanyCards';
 import getCompanyCardBankConnection from '@userActions/getCompanyCardBankConnection';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
@@ -32,10 +32,11 @@ function BankConnection({policyID}: BankConnectionStepProps) {
     const {translate} = useLocalize();
     const [addNewCard] = useOnyx(ONYXKEYS.ADD_NEW_COMPANY_CARD);
     const bankName: ValueOf<typeof CONST.COMPANY_CARDS.BANKS> | undefined = addNewCard?.data?.selectedBank;
-    const workspaceAccountID = PolicyUtils.getWorkspaceAccountID(policyID);
+    const workspaceAccountID = getWorkspaceAccountID(policyID);
     const [cardFeeds] = useOnyx(`${ONYXKEYS.COLLECTION.SHARED_NVP_PRIVATE_DOMAIN_MEMBER}${workspaceAccountID}`);
     const prevFeedsData = usePrevious(cardFeeds?.settings?.oAuthAccountDetails);
-    const {isNewFeedConnected, newFeed} = useMemo(() => CardUtils.checkIfNewFeedConnected(prevFeedsData ?? {}, cardFeeds?.settings?.oAuthAccountDetails ?? {}), [cardFeeds, prevFeedsData]);
+    const [shouldBlockWindowOpen, setShouldBlockWindowOpen] = useState(false);
+    const {isNewFeedConnected, newFeed} = useMemo(() => checkIfNewFeedConnected(prevFeedsData ?? {}, cardFeeds?.settings?.oAuthAccountDetails ?? {}), [cardFeeds, prevFeedsData]);
 
     const url = getCompanyCardBankConnection(policyID, bankName);
 
@@ -49,14 +50,14 @@ function BankConnection({policyID}: BankConnectionStepProps) {
     const handleBackButtonPress = () => {
         customWindow?.close();
         if (bankName === CONST.COMPANY_CARDS.BANKS.BREX) {
-            CompanyCards.setAddNewCompanyCardStepAndData({step: CONST.COMPANY_CARDS.STEP.SELECT_BANK});
+            setAddNewCompanyCardStepAndData({step: CONST.COMPANY_CARDS.STEP.SELECT_BANK});
             return;
         }
         if (bankName === CONST.COMPANY_CARDS.BANKS.AMEX) {
-            CompanyCards.setAddNewCompanyCardStepAndData({step: CONST.COMPANY_CARDS.STEP.AMEX_CUSTOM_FEED});
+            setAddNewCompanyCardStepAndData({step: CONST.COMPANY_CARDS.STEP.AMEX_CUSTOM_FEED});
             return;
         }
-        CompanyCards.setAddNewCompanyCardStepAndData({step: CONST.COMPANY_CARDS.STEP.SELECT_FEED_TYPE});
+        setAddNewCompanyCardStepAndData({step: CONST.COMPANY_CARDS.STEP.SELECT_FEED_TYPE});
     };
 
     const CustomSubtitle = (
@@ -71,15 +72,18 @@ function BankConnection({policyID}: BankConnectionStepProps) {
             return;
         }
         if (isNewFeedConnected) {
+            setShouldBlockWindowOpen(true);
             customWindow?.close();
             if (newFeed) {
-                Card.updateSelectedFeed(newFeed, policyID);
+                updateSelectedFeed(newFeed, policyID);
             }
             Navigation.navigate(ROUTES.WORKSPACE_COMPANY_CARDS.getRoute(policyID));
             return;
         }
-        customWindow = openBankConnection(url);
-    }, [isNewFeedConnected, newFeed, policyID, url]);
+        if (!shouldBlockWindowOpen) {
+            customWindow = openBankConnection(url);
+        }
+    }, [isNewFeedConnected, shouldBlockWindowOpen, newFeed, policyID, url]);
 
     return (
         <ScreenWrapper testID={BankConnection.displayName}>