diff --git a/src/pages/ReimbursementAccount/USD/BankInfo/BankInfo.tsx b/src/pages/ReimbursementAccount/USD/BankInfo/BankInfo.tsx
index a5b3dc71988f..24035c5d18b8 100644
--- a/src/pages/ReimbursementAccount/USD/BankInfo/BankInfo.tsx
+++ b/src/pages/ReimbursementAccount/USD/BankInfo/BankInfo.tsx
@@ -1,8 +1,11 @@
import React, {useEffect, useRef} from 'react';
+import {View} from 'react-native';
+import ActivityIndicator from '@components/ActivityIndicator';
import InteractiveStepWrapper from '@components/InteractiveStepWrapper';
import useLocalize from '@hooks/useLocalize';
import useOnyx from '@hooks/useOnyx';
import useReimbursementAccountSubmitCallback from '@hooks/useReimbursementAccountSubmitCallback';
+import useThemeStyles from '@hooks/useThemeStyles';
import getPlaidOAuthReceivedRedirectURI from '@libs/getPlaidOAuthReceivedRedirectURI';
import {getBankAccountIDAsNumber} from '@libs/ReimbursementAccountUtils';
import getSubStepValues from '@pages/ReimbursementAccount/utils/getSubStepValues';
@@ -30,6 +33,7 @@ const BANK_INFO_STEP_KEYS = INPUT_IDS.BANK_INFO_STEP;
const receivedRedirectURI = getPlaidOAuthReceivedRedirectURI();
function BankInfo({onBackButtonPress, onSubmit, policyID}: BankInfoProps) {
+ const styles = useThemeStyles();
const [reimbursementAccount] = useOnyx(ONYXKEYS.REIMBURSEMENT_ACCOUNT);
const [reimbursementAccountDraft] = useOnyx(ONYXKEYS.FORMS.REIMBURSEMENT_ACCOUNT_FORM_DRAFT);
const [plaidLinkToken] = useOnyx(ONYXKEYS.RAM_ONLY_PLAID_LINK_TOKEN);
@@ -87,7 +91,23 @@ function BankInfo({onBackButtonPress, onSubmit, policyID}: BankInfoProps) {
markSubmitting();
};
- const BankInfoPage = setupType === CONST.BANK_ACCOUNT.SETUP_TYPE.PLAID ? Plaid : Manual;
+ const renderBankInfo = () => {
+ switch (setupType) {
+ case CONST.BANK_ACCOUNT.SETUP_TYPE.PLAID:
+ return ;
+ case CONST.BANK_ACCOUNT.SETUP_TYPE.MANUAL:
+ return ;
+ default:
+ return (
+
+
+
+ );
+ }
+ };
// Some services user connects to via Plaid return dummy account numbers and routing numbers e.g. Chase
// In this case we need to redirect user to manual flow to enter real account number and routing number
@@ -115,7 +135,7 @@ function BankInfo({onBackButtonPress, onSubmit, policyID}: BankInfoProps) {
startStepIndex={1}
stepNames={CONST.BANK_ACCOUNT.STEP_NAMES}
>
-
+ {renderBankInfo()}
);
}
diff --git a/src/pages/ReimbursementAccount/USD/BankInfo/subSteps/Plaid.tsx b/src/pages/ReimbursementAccount/USD/BankInfo/subSteps/Plaid.tsx
index b64b07e70a45..62a6eb975b47 100644
--- a/src/pages/ReimbursementAccount/USD/BankInfo/subSteps/Plaid.tsx
+++ b/src/pages/ReimbursementAccount/USD/BankInfo/subSteps/Plaid.tsx
@@ -1,4 +1,4 @@
-import {useIsFocused} from '@react-navigation/native';
+import {useIsFocused, useRoute} from '@react-navigation/native';
import React, {useCallback, useEffect} from 'react';
import AddPlaidBankAccount from '@components/AddPlaidBankAccount';
import FormProvider from '@components/Form/FormProvider';
@@ -7,13 +7,20 @@ import useLocalize from '@hooks/useLocalize';
import useOnyx from '@hooks/useOnyx';
import usePrevious from '@hooks/usePrevious';
import useThemeStyles from '@hooks/useThemeStyles';
+import Navigation from '@libs/Navigation/Navigation';
+import type {PlatformStackRouteProp} from '@libs/Navigation/PlatformStackNavigation/types';
+import type {ReimbursementAccountNavigatorParamList} from '@libs/Navigation/types';
import {getBankAccountIDAsNumber} from '@libs/ReimbursementAccountUtils';
import type BankInfoSubStepProps from '@pages/ReimbursementAccount/USD/BankInfo/types';
import {setBankAccountSubStep, validatePlaidSelection} from '@userActions/BankAccounts';
import {updateReimbursementAccountDraft} from '@userActions/ReimbursementAccount';
import ONYXKEYS from '@src/ONYXKEYS';
+import ROUTES from '@src/ROUTES';
+import type SCREENS from '@src/SCREENS';
import INPUT_IDS from '@src/types/form/ReimbursementAccountForm';
+type ReimbursementAccountNavigatorRoute = PlatformStackRouteProp;
+
const BANK_INFO_STEP_KEYS = INPUT_IDS.BANK_INFO_STEP;
function Plaid({onNext}: BankInfoSubStepProps) {
@@ -21,6 +28,9 @@ function Plaid({onNext}: BankInfoSubStepProps) {
const [reimbursementAccountDraft] = useOnyx(ONYXKEYS.FORMS.REIMBURSEMENT_ACCOUNT_FORM_DRAFT);
const [plaidData] = useOnyx(ONYXKEYS.PLAID_DATA);
+ const route = useRoute();
+ const {policyID, backTo} = route?.params ?? {};
+
const {translate} = useLocalize();
const styles = useThemeStyles();
const isFocused = useIsFocused();
@@ -61,6 +71,7 @@ function Plaid({onNext}: BankInfoSubStepProps) {
const handlePlaidExit = () => {
setBankAccountSubStep(null);
+ Navigation.goBack(ROUTES.BANK_ACCOUNT_WITH_STEP_TO_OPEN.getRoute({policyID, backTo}));
};
return (