Merge pull request #53122 from callstack-internal/VickyStash/bugfix/5…

…3083-amex-polish Amex direct feeds polish
Expensify · Nov 26, 2024 · 479edfc · 479edfc
2 parents 15063f1 + a194899
commit 479edfc
Show file tree

Hide file tree

Showing 4 changed files with 59 additions and 17 deletions.
diff --git a/src/libs/CardUtils.ts b/src/libs/CardUtils.ts
@@ -279,7 +279,14 @@ function getCardFeedName(feedType: CompanyCardFeed): string {
         [CONST.COMPANY_CARD.FEED_BANK_NAME.BREX]: 'Brex',
     };
 
-    return feedNamesMapping[feedType];
+    // In existing OldDot setups other variations of feeds could exist, ex: vcf2, vcf3, oauth.americanexpressfdx.com 2003
+    const feedKey = (Object.keys(feedNamesMapping) as CompanyCardFeed[]).find((feed) => feedType.startsWith(feed));
+
+    if (!feedKey) {
+        return '';
+    }
+
+    return feedNamesMapping[feedKey];
 }
 
 const getBankCardDetailsImage = (bank: ValueOf<typeof CONST.COMPANY_CARDS.BANKS>): IconAsset => {
@@ -362,6 +369,16 @@ function getDefaultCardName(cardholder?: string) {
     return `${cardholder}'s card`;
 }
 
+function checkIfNewFeedConnected(prevFeedsData: CompanyFeeds, currentFeedsData: CompanyFeeds) {
+    const prevFeeds = Object.keys(prevFeedsData);
+    const currentFeeds = Object.keys(currentFeedsData);
+
+    return {
+        isNewFeedConnected: currentFeeds.length > prevFeeds.length,
+        newFeed: currentFeeds.find((feed) => !prevFeeds.includes(feed)) as CompanyCardFeed | undefined,
+    };
+}
+
 export {
     isExpensifyCard,
     isCorporateCard,
@@ -389,5 +406,6 @@ export {
     removeExpensifyCardFromCompanyCards,
     getFilteredCardList,
     hasOnlyOneCardToAssign,
+    checkIfNewFeedConnected,
     getDefaultCardName,
 };
diff --git a/src/pages/workspace/companyCards/addNew/BankConnection/index.native.tsx b/src/pages/workspace/companyCards/addNew/BankConnection/index.native.tsx
@@ -1,4 +1,4 @@
-import React, {useEffect, useRef, useState} from 'react';
+import React, {useEffect, useMemo, useRef, useState} from 'react';
 import {useOnyx} from 'react-native-onyx';
 import {WebView} from 'react-native-webview';
 import type {ValueOf} from 'type-fest';
@@ -7,6 +7,8 @@ import FullScreenLoadingIndicator from '@components/FullscreenLoadingIndicator';
 import HeaderWithBackButton from '@components/HeaderWithBackButton';
 import Modal from '@components/Modal';
 import useLocalize from '@hooks/useLocalize';
+import usePrevious from '@hooks/usePrevious';
+import * as CardUtils from '@libs/CardUtils';
 import getUAForWebView from '@libs/getUAForWebView';
 import Navigation from '@libs/Navigation/Navigation';
 import * as PolicyUtils from '@libs/PolicyUtils';
@@ -16,7 +18,6 @@ import getCompanyCardBankConnection from '@userActions/getCompanyCardBankConnect
 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;
@@ -33,9 +34,8 @@ function BankConnection({policyID}: BankConnectionStepProps) {
     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 prevFeedsData = usePrevious(cardFeeds?.settings?.oAuthAccountDetails);
+    const {isNewFeedConnected, newFeed} = useMemo(() => CardUtils.checkIfNewFeedConnected(prevFeedsData ?? {}, cardFeeds?.settings?.oAuthAccountDetails ?? {}), [cardFeeds, prevFeedsData]);
 
     const renderLoading = () => <FullScreenLoadingIndicator />;
 
@@ -60,11 +60,13 @@ function BankConnection({policyID}: BankConnectionStepProps) {
         if (!url) {
             return;
         }
-        if (feedName && connectedBank && !isEmptyObject(connectedBank)) {
-            Card.updateSelectedFeed(feedName, policyID ?? '-1');
+        if (isNewFeedConnected) {
+            if (newFeed) {
+                Card.updateSelectedFeed(newFeed, policyID ?? '-1');
+            }
             Navigation.navigate(ROUTES.WORKSPACE_COMPANY_CARDS.getRoute(policyID ?? '-1'));
         }
-    }, [connectedBank, feedName, policyID, url]);
+    }, [isNewFeedConnected, newFeed, policyID, url]);
 
     return (
         <Modal

diff --git a/src/pages/workspace/companyCards/addNew/BankConnection/index.tsx b/src/pages/workspace/companyCards/addNew/BankConnection/index.tsx
@@ -1,4 +1,4 @@
-import React, {useCallback, useEffect} from 'react';
+import React, {useCallback, useEffect, useMemo} from 'react';
 import {useOnyx} from 'react-native-onyx';
 import type {ValueOf} from 'type-fest';
 import BlockingView from '@components/BlockingViews/BlockingView';
@@ -8,7 +8,9 @@ import ScreenWrapper from '@components/ScreenWrapper';
 import Text from '@components/Text';
 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 Navigation from '@libs/Navigation/Navigation';
 import * as PolicyUtils from '@libs/PolicyUtils';
 import getCurrentUrl from '@navigation/currentUrl';
@@ -18,7 +20,6 @@ import getCompanyCardBankConnection from '@userActions/getCompanyCardBankConnect
 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;
@@ -34,9 +35,8 @@ function BankConnection({policyID}: BankConnectionStepProps) {
     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 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);
@@ -73,9 +73,11 @@ function BankConnection({policyID}: BankConnectionStepProps) {
         if (!url) {
             return;
         }
-        if (feedName && connectedBank && !isEmptyObject(connectedBank)) {
+        if (isNewFeedConnected) {
             customWindow?.close();
-            Card.updateSelectedFeed(feedName, policyID ?? '-1');
+            if (newFeed) {
+                Card.updateSelectedFeed(newFeed, policyID ?? '-1');
+            }
             Navigation.navigate(ROUTES.WORKSPACE_COMPANY_CARDS.getRoute(policyID ?? '-1'));
             return;
         }
@@ -84,7 +86,7 @@ function BankConnection({policyID}: BankConnectionStepProps) {
             return;
         }
         customWindow = openBankConnection(url);
-    }, [connectedBank, feedName, isBankConnectionCompleteRoute, policyID, url]);
+    }, [isNewFeedConnected, newFeed, isBankConnectionCompleteRoute, policyID, url]);
 
     return (
         <ScreenWrapper testID={BankConnection.displayName}>

diff --git a/tests/unit/CardUtilsTest.ts b/tests/unit/CardUtilsTest.ts
@@ -252,4 +252,24 @@ describe('CardUtils', () => {
             expect(maskedCardNumber).toBe('');
         });
     });
+
+    describe('getCardFeedName', () => {
+        it('Should return a valid name if a valid feed was provided', () => {
+            const feed = 'vcf';
+            const feedName = CardUtils.getCardFeedName(feed);
+            expect(feedName).toBe('Visa');
+        });
+
+        it('Should return a valid name if an OldDot feed variation was provided', () => {
+            const feed = 'oauth.americanexpressfdx.com 2003' as OnyxTypes.CompanyCardFeed;
+            const feedName = CardUtils.getCardFeedName(feed);
+            expect(feedName).toBe('American Express');
+        });
+
+        it('Should return empty string if invalid feed was provided', () => {
+            const feed = 'vvcf' as OnyxTypes.CompanyCardFeed;
+            const feedName = CardUtils.getCardFeedName(feed);
+            expect(feedName).toBe('');
+        });
+    });
 });