[Internal QA] Implement additional loading indication during direct feed connection

src/ROUTES.ts

@@ -3,6 +3,7 @@ import type {SearchQueryString} from './components/Search/types';
 import type CONST from './CONST';
 import type {IOUAction, IOUType} from './CONST';
 import type {IOURequestType} from './libs/actions/IOU';
+import Log from './libs/Log';
 import type {ExitReason} from './types/form/ExitSurveyReasonForm';
 import type {ConnectionName, SageIntacctMappingName} from './types/onyx/Policy';
 import type AssertTypesNotEqual from './types/utils/AssertTypesNotEqual';
@@ -1221,7 +1222,12 @@ const ROUTES = {
     },
     WORKSPACE_COMPANY_CARDS: {
         route: 'settings/workspaces/:policyID/company-cards',
-        getRoute: (policyID: string) => `settings/workspaces/${policyID}/company-cards` as const,
+        getRoute: (policyID: string | undefined) => {
+            if (!policyID) {
+                Log.warn('Invalid policyID is used to build the WORKSPACE_COMPANY_CARDS route');
+            }
+            return `settings/workspaces/${policyID}/company-cards` as const;
+        },
     },
     WORKSPACE_COMPANY_CARDS_ADD_NEW: {
         route: 'settings/workspaces/:policyID/company-cards/add-card-feed',

src/libs/actions/Card.ts

@@ -38,7 +38,7 @@ type IssueNewCardFlowData = {
 };
 
 function reportVirtualExpensifyCardFraud(card: Card, validateCode: string) {
-    const cardID = card?.cardID ?? -1;
+    const cardID = card?.cardID ?? CONST.DEFAULT_NUMBER_ID;
     const optimisticData: OnyxUpdate[] = [
         {
             onyxMethod: Onyx.METHOD.MERGE,
@@ -57,7 +57,7 @@ function reportVirtualExpensifyCardFraud(card: Card, validateCode: string) {
         },
         {
             onyxMethod: Onyx.METHOD.MERGE,
-            key: `${ONYXKEYS.COLLECTION.WORKSPACE_CARDS_LIST}${card?.fundID ?? '-1'}_${CONST.EXPENSIFY_CARD.BANK}`,
+            key: `${ONYXKEYS.COLLECTION.WORKSPACE_CARDS_LIST}${card?.fundID}_${CONST.EXPENSIFY_CARD.BANK}`,
             value: {
                 [cardID]: null,
             },
@@ -94,7 +94,7 @@ function reportVirtualExpensifyCardFraud(card: Card, validateCode: string) {
         },
         {
             onyxMethod: Onyx.METHOD.MERGE,
-            key: `${ONYXKEYS.COLLECTION.WORKSPACE_CARDS_LIST}${card?.fundID ?? '-1'}_${CONST.EXPENSIFY_CARD.BANK}`,
+            key: `${ONYXKEYS.COLLECTION.WORKSPACE_CARDS_LIST}${card?.fundID}_${CONST.EXPENSIFY_CARD.BANK}`,
             value: {
                 [cardID]: {
                     ...card,
@@ -610,7 +610,7 @@ function updateExpensifyCardLimitType(workspaceAccountID: number, cardID: number
 
 function deactivateCard(workspaceAccountID: number, card?: Card) {
     const authToken = NetworkStore.getAuthToken();
-    const cardID = card?.cardID ?? -1;
+    const cardID = card?.cardID ?? CONST.DEFAULT_NUMBER_ID;
 
     if (!authToken) {
         return;
@@ -875,7 +875,11 @@ function toggleContinuousReconciliation(workspaceAccountID: number, shouldUseCon
     });
 }
 
-function updateSelectedFeed(feed: CompanyCardFeed, policyID: string) {
+function updateSelectedFeed(feed: CompanyCardFeed, policyID: string | undefined) {
+    if (!policyID) {
+        return;
+    }
+
     Onyx.update([
         {
             onyxMethod: Onyx.METHOD.MERGE,

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

@@ -1,5 +1,7 @@
-import React, {useEffect, useMemo, useRef} from 'react';
+import React, {useEffect, useMemo, useRef, useState} from 'react';
+import {ActivityIndicator} from 'react-native';
 import {useOnyx} from 'react-native-onyx';
+import type {WebViewNavigation} from 'react-native-webview';
 import {WebView} from 'react-native-webview';
 import type {ValueOf} from 'type-fest';
 import FullPageOfflineBlockingView from '@components/BlockingViews/FullPageOfflineBlockingView';
@@ -8,6 +10,8 @@ import HeaderWithBackButton from '@components/HeaderWithBackButton';
 import ScreenWrapper from '@components/ScreenWrapper';
 import useLocalize from '@hooks/useLocalize';
 import usePrevious from '@hooks/usePrevious';
+import useTheme from '@hooks/useTheme';
+import useThemeStyles from '@hooks/useThemeStyles';
 import * as CardUtils from '@libs/CardUtils';
 import getUAForWebView from '@libs/getUAForWebView';
 import Navigation from '@libs/Navigation/Navigation';
@@ -25,14 +29,17 @@ type BankConnectionStepProps = {
 
 function BankConnection({policyID}: BankConnectionStepProps) {
     const {translate} = useLocalize();
+    const theme = useTheme();
+    const styles = useThemeStyles();
     const webViewRef = useRef<WebView>(null);
     const [session] = useOnyx(ONYXKEYS.SESSION);
     const authToken = session?.authToken ?? null;
     const [addNewCard] = useOnyx(ONYXKEYS.ADD_NEW_COMPANY_CARD);
     const bankName: ValueOf<typeof CONST.COMPANY_CARDS.BANKS> | undefined = addNewCard?.data?.selectedBank;
     const url = getCompanyCardBankConnection(policyID, bankName);
-    const workspaceAccountID = PolicyUtils.getWorkspaceAccountID(policyID ?? '-1');
+    const workspaceAccountID = PolicyUtils.getWorkspaceAccountID(policyID);
     const [cardFeeds] = useOnyx(`${ONYXKEYS.COLLECTION.SHARED_NVP_PRIVATE_DOMAIN_MEMBER}${workspaceAccountID}`);
+    const [isConnectionCompleted, setConnectionCompleted] = useState(false);
     const prevFeedsData = usePrevious(cardFeeds?.settings?.oAuthAccountDetails);
     const {isNewFeedConnected, newFeed} = useMemo(() => CardUtils.checkIfNewFeedConnected(prevFeedsData ?? {}, cardFeeds?.settings?.oAuthAccountDetails ?? {}), [cardFeeds, prevFeedsData]);
 
@@ -56,12 +63,19 @@ function BankConnection({policyID}: BankConnectionStepProps) {
         }
         if (isNewFeedConnected) {
             if (newFeed) {
-                Card.updateSelectedFeed(newFeed, policyID ?? '-1');
+                Card.updateSelectedFeed(newFeed, policyID);
             }
-            Navigation.navigate(ROUTES.WORKSPACE_COMPANY_CARDS.getRoute(policyID ?? '-1'));
+            Navigation.navigate(ROUTES.WORKSPACE_COMPANY_CARDS.getRoute(policyID));
         }
     }, [isNewFeedConnected, newFeed, policyID, url]);
 
+    const checkIfConnectionCompleted = (navState: WebViewNavigation) => {
+        if (!navState.url.includes(ROUTES.BANK_CONNECTION_COMPLETE)) {
+            return;
+        }
+        setConnectionCompleted(true);
+    };
+
     return (
         <ScreenWrapper
             testID={BankConnection.displayName}
@@ -75,7 +89,7 @@ function BankConnection({policyID}: BankConnectionStepProps) {
                 onBackButtonPress={handleBackButtonPress}
             />
             <FullPageOfflineBlockingView>
-                {!!url && (
+                {!!url && !isConnectionCompleted && (
                     <WebView
                         ref={webViewRef}
                         source={{
@@ -86,10 +100,18 @@ function BankConnection({policyID}: BankConnectionStepProps) {
                         }}
                         userAgent={getUAForWebView()}
                         incognito
+                        onNavigationStateChange={checkIfConnectionCompleted}
                         startInLoadingState
                         renderLoading={renderLoading}
                     />
                 )}
+                {isConnectionCompleted && (
+                    <ActivityIndicator
+                        size={CONST.ACTIVITY_INDICATOR_SIZE.LARGE}
+                        style={styles.flex1}
+                        color={theme.spinner}
+                    />
+                )}
             </FullPageOfflineBlockingView>
         </ScreenWrapper>
     );

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

@@ -13,7 +13,6 @@ import useThemeStyles from '@hooks/useThemeStyles';
 import * as CardUtils from '@libs/CardUtils';
 import Navigation from '@libs/Navigation/Navigation';
 import * as PolicyUtils from '@libs/PolicyUtils';
-import getCurrentUrl from '@navigation/currentUrl';
 import * as Card from '@userActions/Card';
 import * as CompanyCards from '@userActions/CompanyCards';
 import getCompanyCardBankConnection from '@userActions/getCompanyCardBankConnection';
@@ -33,13 +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 ?? '-1');
+    const workspaceAccountID = PolicyUtils.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 currentUrl = getCurrentUrl();
-    const isBankConnectionCompleteRoute = currentUrl.includes(ROUTES.BANK_CONNECTION_COMPLETE);
     const url = getCompanyCardBankConnection(policyID, bankName);
 
     const onOpenBankConnectionFlow = useCallback(() => {
@@ -76,17 +73,13 @@ function BankConnection({policyID}: BankConnectionStepProps) {
         if (isNewFeedConnected) {
             customWindow?.close();
             if (newFeed) {
-                Card.updateSelectedFeed(newFeed, policyID ?? '-1');
+                Card.updateSelectedFeed(newFeed, policyID);
             }
-            Navigation.navigate(ROUTES.WORKSPACE_COMPANY_CARDS.getRoute(policyID ?? '-1'));
-            return;
-        }
-        if (isBankConnectionCompleteRoute) {
-            customWindow?.close();
+            Navigation.navigate(ROUTES.WORKSPACE_COMPANY_CARDS.getRoute(policyID));
             return;
         }
         customWindow = openBankConnection(url);
-    }, [isNewFeedConnected, newFeed, isBankConnectionCompleteRoute, policyID, url]);
+    }, [isNewFeedConnected, newFeed, policyID, url]);
 
     return (
         <ScreenWrapper testID={BankConnection.displayName}>