Redirect to feed after completing the bank connection

src/pages/workspace/companyCards/WorkspaceCompanyCardsList.tsx

@@ -1,13 +1,12 @@
 import React, {useCallback, useMemo} from 'react';
 import type {ListRenderItemInfo} from 'react-native';
-import {ActivityIndicator, FlatList, View} from 'react-native';
+import {FlatList, View} from 'react-native';
 import {useOnyx} from 'react-native-onyx';
 import type {OnyxEntry} from 'react-native-onyx';
 import OfflineWithFeedback from '@components/OfflineWithFeedback';
 import {PressableWithFeedback} from '@components/Pressable';
 import Text from '@components/Text';
 import useLocalize from '@hooks/useLocalize';
-import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
 import * as CardUtils from '@libs/CardUtils';
 import Navigation from '@navigation/Navigation';
@@ -28,7 +27,6 @@ type WorkspaceCompanyCardsListProps = {
 
 function WorkspaceCompanyCardsList({cardsList, policyID}: WorkspaceCompanyCardsListProps) {
     const styles = useThemeStyles();
-    const theme = useTheme();
     const {translate} = useLocalize();
     const [personalDetails] = useOnyx(ONYXKEYS.PERSONAL_DETAILS_LIST);
     const [customCardNames] = useOnyx(ONYXKEYS.NVP_EXPENSIFY_COMPANY_CARDS_CUSTOM_NAMES);
@@ -88,16 +86,6 @@ function WorkspaceCompanyCardsList({cardsList, policyID}: WorkspaceCompanyCardsL
         [styles, translate],
     );
 
-    if (!cardsList) {
-        return (
-            <ActivityIndicator
-                size={CONST.ACTIVITY_INDICATOR_SIZE.LARGE}
-                style={styles.flex1}
-                color={theme.spinner}
-            />
-        );
-    }
-
     if (sortedCards.length === 0) {
         return <WorkspaceCompanyCardsFeedAddedEmptyPage />;
     }

src/pages/workspace/companyCards/WorkspaceCompanyCardsListHeaderButtons.tsx

@@ -41,7 +41,7 @@ function WorkspaceCompanyCardsListHeaderButtons({policyID, selectedFeed}: Worksp
     const formattedFeedName = translate('workspace.companyCards.feedName', {feedName});
     const isCustomFeed =
         CONST.COMPANY_CARD.FEED_BANK_NAME.MASTER_CARD === selectedFeed || CONST.COMPANY_CARD.FEED_BANK_NAME.VISA === selectedFeed || CONST.COMPANY_CARD.FEED_BANK_NAME.AMEX === selectedFeed;
-    const currentFeedData = cardFeeds?.settings?.companyCards?.[selectedFeed] ?? {pending: true, errors: {}};
+    const currentFeedData = cardFeeds?.settings?.companyCards?.[selectedFeed] ?? cardFeeds?.settings?.oAuthAccountDetails?.[selectedFeed] ?? {pending: true, errors: {}};
 
     return (
         <OfflineWithFeedback
@@ -79,6 +79,7 @@ function WorkspaceCompanyCardsListHeaderButtons({policyID, selectedFeed}: Worksp
                 <View style={[styles.flexRow, styles.gap2]}>
                     <Button
                         success
+                        // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
                         isDisabled={currentFeedData.pending || !!currentFeedData.errors}
                         onPress={() => Navigation.navigate(ROUTES.WORKSPACE_COMPANY_CARDS_ASSIGN_CARD.getRoute(policyID, selectedFeed))}
                         icon={Expensicons.Plus}

src/pages/workspace/companyCards/WorkspaceCompanyCardsPage.tsx

@@ -37,8 +37,8 @@ function WorkspaceCompanyCardPage({route}: WorkspaceCompanyCardPageProps) {
 
     const isLoading = !cardFeeds || !!(cardFeeds.isLoading && !cardFeeds.settings);
     const companyCards = CardUtils.removeExpensifyCardFromCompanyCards(cardFeeds?.settings?.companyCards);
-    const selectedCompanyCard = companyCards[selectedFeed ?? ''] ?? null;
-    const isNoFeed = isEmptyObject(companyCards) && !selectedCompanyCard;
+    const selectedCompanyCard = companyCards[selectedFeed ?? ''] ?? cardFeeds?.settings?.oAuthAccountDetails?.[selectedFeed ?? ''] ?? null;
+    const isNoFeed = isEmptyObject(companyCards) && isEmptyObject(cardFeeds?.settings?.oAuthAccountDetails) && !selectedCompanyCard;
     const isPending = !!selectedCompanyCard?.pending;
     const isFeedAdded = !isPending && !isNoFeed;
 

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

@@ -8,10 +8,15 @@ import HeaderWithBackButton from '@components/HeaderWithBackButton';
 import Modal from '@components/Modal';
 import useLocalize from '@hooks/useLocalize';
 import getUAForWebView from '@libs/getUAForWebView';
+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 getCompanyCardBankConnection from '@userActions/getCompanyCardBankConnection';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
+import ROUTES from '@src/ROUTES';
+import {isEmptyObject} from '@src/types/utils/EmptyObject';
 
 type BankConnectionStepProps = {
     policyID?: string;
@@ -26,6 +31,11 @@ function BankConnection({policyID}: BankConnectionStepProps) {
     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 [cardFeeds] = useOnyx(`${ONYXKEYS.COLLECTION.SHARED_NVP_PRIVATE_DOMAIN_MEMBER}${workspaceAccountID}`);
+    const bankKey = Object.keys(CONST.COMPANY_CARDS.BANKS).find((value) => CONST.COMPANY_CARDS.BANKS?.[value as keyof typeof CONST.COMPANY_CARDS.BANKS] === bankName);
+    const feedName = bankKey && bankKey !== CONST.COMPANY_CARDS.BANKS.OTHER ? CONST.COMPANY_CARD.FEED_BANK_NAME?.[bankKey as keyof typeof CONST.COMPANY_CARD.FEED_BANK_NAME] : undefined;
+    const connectedBank = feedName ? cardFeeds?.settings?.oAuthAccountDetails?.[feedName] : undefined;
 
     const renderLoading = () => <FullScreenLoadingIndicator />;
 
@@ -46,6 +56,16 @@ function BankConnection({policyID}: BankConnectionStepProps) {
         setWebViewOpen(true);
     }, []);
 
+    useEffect(() => {
+        if (!url) {
+            return;
+        }
+        if (feedName && connectedBank && !isEmptyObject(connectedBank)) {
+            Card.updateSelectedFeed(feedName, policyID ?? '-1');
+            Navigation.navigate(ROUTES.WORKSPACE_COMPANY_CARDS.getRoute(policyID ?? '-1'));
+        }
+    }, [connectedBank, feedName, policyID, url]);
+
     return (
         <Modal
             onClose={handleBackButtonPress}

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

@@ -9,12 +9,16 @@ import Text from '@components/Text';
 import TextLink from '@components/TextLink';
 import useLocalize from '@hooks/useLocalize';
 import useThemeStyles from '@hooks/useThemeStyles';
+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';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 import ROUTES from '@src/ROUTES';
+import {isEmptyObject} from '@src/types/utils/EmptyObject';
 import openBankConnection from './openBankConnection';
 
 let customWindow: Window | null = null;
@@ -28,6 +32,12 @@ 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 [cardFeeds] = useOnyx(`${ONYXKEYS.COLLECTION.SHARED_NVP_PRIVATE_DOMAIN_MEMBER}${workspaceAccountID}`);
+    const bankKey = Object.keys(CONST.COMPANY_CARDS.BANKS).find((value) => CONST.COMPANY_CARDS.BANKS?.[value as keyof typeof CONST.COMPANY_CARDS.BANKS] === bankName);
+    const feedName = bankKey && bankKey !== CONST.COMPANY_CARDS.BANKS.OTHER ? CONST.COMPANY_CARD.FEED_BANK_NAME?.[bankKey as keyof typeof CONST.COMPANY_CARD.FEED_BANK_NAME] : undefined;
+    const connectedBank = feedName ? cardFeeds?.settings?.oAuthAccountDetails?.[feedName] : undefined;
+
     const currentUrl = getCurrentUrl();
     const isBankConnectionCompleteRoute = currentUrl.includes(ROUTES.BANK_CONNECTION_COMPLETE);
     const url = getCompanyCardBankConnection(policyID, bankName);
@@ -63,12 +73,18 @@ function BankConnection({policyID}: BankConnectionStepProps) {
         if (!url) {
             return;
         }
+        if (feedName && connectedBank && !isEmptyObject(connectedBank)) {
+            customWindow?.close();
+            Card.updateSelectedFeed(feedName, policyID ?? '-1');
+            Navigation.navigate(ROUTES.WORKSPACE_COMPANY_CARDS.getRoute(policyID ?? '-1'));
+            return;
+        }
         if (isBankConnectionCompleteRoute) {
             customWindow?.close();
             return;
         }
         customWindow = openBankConnection(url);
-    }, [isBankConnectionCompleteRoute, url]);
+    }, [connectedBank, feedName, isBankConnectionCompleteRoute, policyID, url]);
 
     return (
         <ScreenWrapper testID={BankConnection.displayName}>

src/types/onyx/CardFeeds.ts

@@ -61,6 +61,12 @@ type CardFeeds = {
 
                 /** Expiration number */
                 expiration: number;
+
+                /** Whether any actions are pending */
+                pending?: boolean;
+
+                /** Broken connection errors */
+                errors?: OnyxCommon.Errors;
             }
         >;
     };