From fccd32fc271a98bda488829fbd1ec033b32667f7 Mon Sep 17 00:00:00 2001 From: Agata Kosior Date: Thu, 22 Feb 2024 10:14:00 +0100 Subject: [PATCH 01/18] feat: create a separate route for refactor --- src/ROUTES.ts | 1 + src/SCREENS.ts | 1 + .../AppNavigator/ModalStackNavigators.tsx | 1 + src/libs/Navigation/linkingConfig/config.ts | 4 ++ .../AddPersonalBankAccountPageRefactor.tsx | 49 +++++++++++++++++++ 5 files changed, 56 insertions(+) create mode 100644 src/pages/AddPersonalBankAccountPageRefactor.tsx diff --git a/src/ROUTES.ts b/src/ROUTES.ts index c41ef521661c..024a7d1e7d57 100644 --- a/src/ROUTES.ts +++ b/src/ROUTES.ts @@ -109,6 +109,7 @@ const ROUTES = { }, SETTINGS_ADD_DEBIT_CARD: 'settings/wallet/add-debit-card', SETTINGS_ADD_BANK_ACCOUNT: 'settings/wallet/add-bank-account', + SETTINGS_ADD_BANK_ACCOUNT_REFACTOR: 'settings/wallet/add-bank-account-refactor', SETTINGS_ENABLE_PAYMENTS: 'settings/wallet/enable-payments', SETTINGS_WALLET_CARD_DIGITAL_DETAILS_UPDATE_ADDRESS: { route: 'settings/wallet/card/:domain/digital-details/update-address', diff --git a/src/SCREENS.ts b/src/SCREENS.ts index 18754a3513c1..79c2ecacfa3b 100644 --- a/src/SCREENS.ts +++ b/src/SCREENS.ts @@ -31,6 +31,7 @@ const SCREENS = { APP_DOWNLOAD_LINKS: 'Settings_App_Download_Links', ADD_DEBIT_CARD: 'Settings_Add_Debit_Card', ADD_BANK_ACCOUNT: 'Settings_Add_Bank_Account', + ADD_BANK_ACCOUNT_REFACTOR: 'Settings_Add_Bank_Account_Refactor', CLOSE: 'Settings_Close', TWO_FACTOR_AUTH: 'Settings_TwoFactorAuth', REPORT_CARD_LOST_OR_DAMAGED: 'Settings_ReportCardLostOrDamaged', diff --git a/src/libs/Navigation/AppNavigator/ModalStackNavigators.tsx b/src/libs/Navigation/AppNavigator/ModalStackNavigators.tsx index 3af123a74910..fcf215644833 100644 --- a/src/libs/Navigation/AppNavigator/ModalStackNavigators.tsx +++ b/src/libs/Navigation/AppNavigator/ModalStackNavigators.tsx @@ -236,6 +236,7 @@ const SettingsModalStackNavigator = createModalStackNavigator require('../../../pages/EnablePayments/EnablePaymentsPage').default as React.ComponentType, [SCREENS.SETTINGS.ADD_DEBIT_CARD]: () => require('../../../pages/settings/Wallet/AddDebitCardPage').default as React.ComponentType, [SCREENS.SETTINGS.ADD_BANK_ACCOUNT]: () => require('../../../pages/AddPersonalBankAccountPage').default as React.ComponentType, + [SCREENS.SETTINGS.ADD_BANK_ACCOUNT_REFACTOR]: () => require('../../../pages/AddPersonalBankAccountPageRefactor').default as React.ComponentType, [SCREENS.SETTINGS.PROFILE.STATUS]: () => require('../../../pages/settings/Profile/CustomStatus/StatusPage').default as React.ComponentType, [SCREENS.SETTINGS.PROFILE.STATUS_CLEAR_AFTER]: () => require('../../../pages/settings/Profile/CustomStatus/StatusClearAfterPage').default as React.ComponentType, [SCREENS.SETTINGS.PROFILE.STATUS_CLEAR_AFTER_DATE]: () => require('../../../pages/settings/Profile/CustomStatus/SetDatePage').default as React.ComponentType, diff --git a/src/libs/Navigation/linkingConfig/config.ts b/src/libs/Navigation/linkingConfig/config.ts index 2640025efa09..a2734b0d661f 100644 --- a/src/libs/Navigation/linkingConfig/config.ts +++ b/src/libs/Navigation/linkingConfig/config.ts @@ -156,6 +156,10 @@ const config: LinkingOptions['config'] = { path: ROUTES.SETTINGS_ADD_BANK_ACCOUNT, exact: true, }, + [SCREENS.SETTINGS.ADD_BANK_ACCOUNT_REFACTOR]: { + path: ROUTES.SETTINGS_ADD_BANK_ACCOUNT_REFACTOR, + exact: true, + }, [SCREENS.SETTINGS.PROFILE.PRONOUNS]: { path: ROUTES.SETTINGS_PRONOUNS, exact: true, diff --git a/src/pages/AddPersonalBankAccountPageRefactor.tsx b/src/pages/AddPersonalBankAccountPageRefactor.tsx new file mode 100644 index 000000000000..d643d727a309 --- /dev/null +++ b/src/pages/AddPersonalBankAccountPageRefactor.tsx @@ -0,0 +1,49 @@ +import React, {useEffect} from 'react'; +import {withOnyx} from 'react-native-onyx'; +import type {OnyxEntry} from 'react-native-onyx'; +import ScreenWrapper from '@components/ScreenWrapper'; +import useLocalize from '@hooks/useLocalize'; +import useThemeStyles from '@hooks/useThemeStyles'; +import * as BankAccounts from '@userActions/BankAccounts'; +import ONYXKEYS from '@src/ONYXKEYS'; +import type {PersonalBankAccount, PlaidData} from '@src/types/onyx'; +import BankAccountStep from "@pages/ReimbursementAccount/BankAccountStep"; + +type AddPersonalBankAccountPageWithOnyxProps = { + /** Contains plaid data */ + plaidData: OnyxEntry; + + /** The details about the Personal bank account we are adding saved in Onyx */ + personalBankAccount: OnyxEntry; +}; + +function AddPersonalBankAccountPageRefactor({personalBankAccount, plaidData}: AddPersonalBankAccountPageWithOnyxProps) { + const styles = useThemeStyles(); + const {translate} = useLocalize(); + const shouldShowSuccess = personalBankAccount?.shouldShowSuccess ?? false; + + + useEffect(() => BankAccounts.clearPersonalBankAccount, []); + + return ( + + + + ); +} + +AddPersonalBankAccountPageRefactor.displayName = 'AddPersonalBankAccountPage'; + +export default withOnyx({ + personalBankAccount: { + key: ONYXKEYS.PERSONAL_BANK_ACCOUNT, + }, + plaidData: { + key: ONYXKEYS.PLAID_DATA, + }, +})(AddPersonalBankAccountPageRefactor); From c20c2cb1dafa61bc03c78601816632d19e2f8df8 Mon Sep 17 00:00:00 2001 From: Agata Kosior Date: Fri, 23 Feb 2024 16:58:50 +0100 Subject: [PATCH 02/18] feat: UI for step 0 --- .../AddPersonalBankAccountPageRefactor.tsx | 59 ++++++++++++++++--- .../ReimbursementAccount/BankAccountStep.js | 45 +++++++------- src/styles/index.ts | 5 ++ 3 files changed, 78 insertions(+), 31 deletions(-) diff --git a/src/pages/AddPersonalBankAccountPageRefactor.tsx b/src/pages/AddPersonalBankAccountPageRefactor.tsx index d643d727a309..ef8ca468cd60 100644 --- a/src/pages/AddPersonalBankAccountPageRefactor.tsx +++ b/src/pages/AddPersonalBankAccountPageRefactor.tsx @@ -1,13 +1,21 @@ import React, {useEffect} from 'react'; +import {View} from 'react-native'; import {withOnyx} from 'react-native-onyx'; import type {OnyxEntry} from 'react-native-onyx'; +import Button from '@components/Button'; +import HeaderWithBackButton from '@components/HeaderWithBackButton'; +import * as Expensicons from '@components/Icon/Expensicons'; +import * as Illustrations from '@components/Icon/Illustrations'; +import InteractiveStepSubHeader from '@components/InteractiveStepSubHeader'; import ScreenWrapper from '@components/ScreenWrapper'; +import Section from '@components/Section'; +import Text from '@components/Text'; import useLocalize from '@hooks/useLocalize'; import useThemeStyles from '@hooks/useThemeStyles'; import * as BankAccounts from '@userActions/BankAccounts'; +import CONST from '@src/CONST'; import ONYXKEYS from '@src/ONYXKEYS'; import type {PersonalBankAccount, PlaidData} from '@src/types/onyx'; -import BankAccountStep from "@pages/ReimbursementAccount/BankAccountStep"; type AddPersonalBankAccountPageWithOnyxProps = { /** Contains plaid data */ @@ -17,22 +25,53 @@ type AddPersonalBankAccountPageWithOnyxProps = { personalBankAccount: OnyxEntry; }; -function AddPersonalBankAccountPageRefactor({personalBankAccount, plaidData}: AddPersonalBankAccountPageWithOnyxProps) { +function AddPersonalBankAccountPageRefactor({personalBankAccount, plaidData, isPlaidDisabled, user}: AddPersonalBankAccountPageWithOnyxProps) { const styles = useThemeStyles(); const {translate} = useLocalize(); - const shouldShowSuccess = personalBankAccount?.shouldShowSuccess ?? false; - - useEffect(() => BankAccounts.clearPersonalBankAccount, []); return ( - + {}} + /> + + + +
+ + {'We will use this account to pull money into your wallet and to transfer any funds in your wallet out to you'} + + {/*{Boolean(plaidDesktopMessage) && (*/} + {/* */} + {/* {props.translate(plaidDesktopMessage)}*/} + {/* */} + {/*)}*/} +
); } @@ -46,4 +85,10 @@ export default withOnyx
- {props.translate('bankAccount.toGetStarted')} + {translate('bankAccount.toGetStarted')} {Boolean(plaidDesktopMessage) && ( - {props.translate(plaidDesktopMessage)} + {translate(plaidDesktopMessage)} )}
- + const exitFlow = useCallback( + (shouldContinue = false) => { + const exitReportID = personalBankAccount?.exitReportID; + const onSuccessFallbackRoute = personalBankAccount?.onSuccessFallbackRoute ?? ''; + + if (exitReportID) { + Navigation.dismissModal(exitReportID); + } else if (shouldContinue && onSuccessFallbackRoute) { + PaymentMethods.continueSetup(onSuccessFallbackRoute); + } else { + Navigation.goBack(ROUTES.SETTINGS_WALLET); + } + }, + [personalBankAccount], ); + + return ; } AddPersonalBankAccountPageRefactor.displayName = 'AddPersonalBankAccountPage'; diff --git a/src/pages/EnablePayments/AddBankAccount/AddPersonalBankAccount.tsx b/src/pages/EnablePayments/AddBankAccount/AddPersonalBankAccount.tsx new file mode 100644 index 000000000000..61a8831a9b22 --- /dev/null +++ b/src/pages/EnablePayments/AddBankAccount/AddPersonalBankAccount.tsx @@ -0,0 +1,239 @@ +// import React, {useCallback, useEffect, useMemo, useState} from 'react'; +// import {View} from 'react-native'; +// import type {OnyxEntry} from 'react-native-onyx'; +// import {withOnyx} from 'react-native-onyx'; +// import AddPlaidBankAccount from '@components/AddPlaidBankAccount'; +// import FormProvider from '@components/Form/FormProvider'; +// import HeaderWithBackButton from '@components/HeaderWithBackButton'; +// import InteractiveStepSubHeader from '@components/InteractiveStepSubHeader'; +// import ScreenWrapper from '@components/ScreenWrapper'; +// import useLocalize from '@hooks/useLocalize'; +// import useSubStep from '@hooks/useSubStep'; +// import type {SubStepProps} from '@hooks/useSubStep/types'; +// import useThemeStyles from '@hooks/useThemeStyles'; +// import getPlaidOAuthReceivedRedirectURI from '@libs/getPlaidOAuthReceivedRedirectURI'; +// import Navigation from '@navigation/Navigation'; +// import ChooseMethod from '@pages/EnablePayments/AddBankAccount/substeps/ChooseMethod'; +// import getSubstepValues from '@pages/ReimbursementAccount/utils/getSubstepValues'; +// import * as BankAccounts from '@userActions/BankAccounts'; +// import * as ReimbursementAccountUtils from '@userActions/ReimbursementAccount'; +// import CONST from '@src/CONST'; +// import ONYXKEYS from '@src/ONYXKEYS'; +// import type {ReimbursementAccountForm} from '@src/types/form'; +// import INPUT_IDS from '@src/types/form/ReimbursementAccountForm'; +// import type {ReimbursementAccount} from '@src/types/onyx'; +// import Confirmation from './substeps/Confirmation'; +// import Manual from './substeps/Manual'; +// import Plaid from './substeps/Plaid'; +// +// type BankInfoOnyxProps = { +// /** Plaid SDK token to use to initialize the widget */ +// plaidLinkToken: OnyxEntry; +// +// /** Reimbursement account from ONYX */ +// reimbursementAccount: OnyxEntry; +// +// /** The draft values of the bank account being setup */ +// reimbursementAccountDraft: OnyxEntry; +// +// policyID: string; +// }; +// +// type BankInfoProps = BankInfoOnyxProps & { +// /** Goes to the previous step */ +// onBackButtonPress: () => void; +// }; +// +// const BANK_INFO_STEP_KEYS = INPUT_IDS.BANK_INFO_STEP; +// const plaidSubsteps: Array> = [Plaid, Confirmation]; +// const receivedRedirectURI = getPlaidOAuthReceivedRedirectURI(); +// +// function AddPersonalBankAccount({onBackButtonPress, plaidData}) { +// const {translate} = useLocalize(); +// const styles = useThemeStyles(); +// +// const [selectedPlaidAccountId, setSelectedPlaidAccountId] = useState(''); +// const [isMethodChosen, setIsMethodChosen] = useState(false); +// +// const validateBankAccountForm = () => ({}); +// +// const submitBankAccountForm = useCallback(() => { +// const bankAccounts = plaidData?.bankAccounts ?? []; +// const selectedPlaidBankAccount = bankAccounts.find((bankAccount) => bankAccount.plaidAccountID === selectedPlaidAccountId); +// +// if (selectedPlaidBankAccount) { +// BankAccounts.addPersonalBankAccount(selectedPlaidBankAccount); +// } +// }, [plaidData, selectedPlaidAccountId]); +// +// return ( +// +// +// +// +// +// {isMethodChosen ? ( +// setIsMethodChosen(true)} /> +// ) : ( +// {}} +// style={[styles.mh5, styles.flex1]} +// > +// Navigation.goBack()} +// receivedRedirectURI={getPlaidOAuthReceivedRedirectURI()} +// selectedPlaidAccountID={selectedPlaidAccountId} +// isDisplayedInNewVBBA +// /> +// +// )} +// +// ); +// } +// +// AddPersonalBankAccount.displayName = 'AddPersonalBankAccount'; +// +// export default withOnyx({ +// // @ts-expect-error: ONYXKEYS.REIMBURSEMENT_ACCOUNT is conflicting with ONYXKEYS.FORMS.REIMBURSEMENT_ACCOUNT_FORM +// reimbursementAccount: { +// key: ONYXKEYS.REIMBURSEMENT_ACCOUNT, +// }, +// reimbursementAccountDraft: { +// key: ONYXKEYS.FORMS.REIMBURSEMENT_ACCOUNT_FORM_DRAFT, +// }, +// plaidLinkToken: { +// key: ONYXKEYS.PLAID_LINK_TOKEN, +// }, +// plaidData: { +// key: ONYXKEYS.PLAID_DATA, +// } +// })(AddPersonalBankAccount); + +import React, {useCallback, useEffect, useMemo} from 'react'; +import {View} from 'react-native'; +import type {OnyxEntry} from 'react-native-onyx'; +import {withOnyx} from 'react-native-onyx'; +import HeaderWithBackButton from '@components/HeaderWithBackButton'; +import InteractiveStepSubHeader from '@components/InteractiveStepSubHeader'; +import ScreenWrapper from '@components/ScreenWrapper'; +import useLocalize from '@hooks/useLocalize'; +import useSubStep from '@hooks/useSubStep'; +import type {SubStepProps} from '@hooks/useSubStep/types'; +import useThemeStyles from '@hooks/useThemeStyles'; +import CONST from '@src/CONST'; +import ONYXKEYS from '@src/ONYXKEYS'; +import type {ReimbursementAccountForm} from '@src/types/form'; +import INPUT_IDS from '@src/types/form/ReimbursementAccountForm'; +import type {ReimbursementAccount} from '@src/types/onyx'; +import Confirmation from './substeps/Confirmation'; +import Plaid from './substeps/Plaid'; +import ChooseMethod from "@pages/EnablePayments/AddBankAccount/substeps/ChooseMethod"; + +type BankInfoOnyxProps = { + /** Plaid SDK token to use to initialize the widget */ + plaidLinkToken: OnyxEntry; + + /** Reimbursement account from ONYX */ + reimbursementAccount: OnyxEntry; + + /** The draft values of the bank account being setup */ + reimbursementAccountDraft: OnyxEntry; + + policyID: string; +}; + +type BankInfoProps = BankInfoOnyxProps & { + /** Goes to the previous step */ + onBackButtonPress: () => void; +}; + +const BANK_INFO_STEP_KEYS = INPUT_IDS.BANK_INFO_STEP; +const plaidSubsteps: Array> = [ChooseMethod, Plaid, Confirmation]; + +function AddPersonalBankAccount({reimbursementAccount, reimbursementAccountDraft, plaidLinkToken, onBackButtonPress, policyID}: BankInfoProps) { + const {translate} = useLocalize(); + const styles = useThemeStyles(); + + const bankAccountID = Number(reimbursementAccount?.achData?.bankAccountID ?? '0'); + const submit = useCallback(() => { + }, [ bankAccountID, policyID]); + + const {componentToRender: SubStep, isEditing, screenIndex, nextScreen, prevScreen, moveTo} = useSubStep({bodyContent: plaidSubsteps, startFrom: 0, onFinished: submit}); + + + const handleBackButtonPress = () => { + if (screenIndex === 0) { + if (bankAccountID) { + onBackButtonPress(); + } else { + } + } else { + prevScreen(); + } + }; + + return ( + + + + + + + + ); +} + +AddPersonalBankAccount.displayName = 'AddPersonalBankAccount'; + +export default withOnyx({ + // @ts-expect-error: ONYXKEYS.REIMBURSEMENT_ACCOUNT is conflicting with ONYXKEYS.FORMS.REIMBURSEMENT_ACCOUNT_FORM + reimbursementAccount: { + key: ONYXKEYS.REIMBURSEMENT_ACCOUNT, + }, + reimbursementAccountDraft: { + key: ONYXKEYS.FORMS.REIMBURSEMENT_ACCOUNT_FORM_DRAFT, + }, + plaidLinkToken: { + key: ONYXKEYS.PLAID_LINK_TOKEN, + }, + personalBankAccount: { + key: ONYXKEYS.PERSONAL_BANK_ACCOUNT, + }, + plaidData: { + key: ONYXKEYS.PLAID_DATA, + }, +})(AddPersonalBankAccount); + diff --git a/src/pages/EnablePayments/AddBankAccount/substeps/ChooseMethod.tsx b/src/pages/EnablePayments/AddBankAccount/substeps/ChooseMethod.tsx new file mode 100644 index 000000000000..2cd2394ff68c --- /dev/null +++ b/src/pages/EnablePayments/AddBankAccount/substeps/ChooseMethod.tsx @@ -0,0 +1,88 @@ +import React, {useEffect} from 'react'; +import {View} from 'react-native'; +import {withOnyx} from 'react-native-onyx'; +import type {OnyxEntry} from 'react-native-onyx'; +import Button from '@components/Button'; +import HeaderWithBackButton from '@components/HeaderWithBackButton'; +import * as Expensicons from '@components/Icon/Expensicons'; +import * as Illustrations from '@components/Icon/Illustrations'; +import InteractiveStepSubHeader from '@components/InteractiveStepSubHeader'; +import ScreenWrapper from '@components/ScreenWrapper'; +import Section from '@components/Section'; +import Text from '@components/Text'; +import TextLink from '@components/TextLink'; +import useLocalize from '@hooks/useLocalize'; +import useThemeStyles from '@hooks/useThemeStyles'; +import getPlaidDesktopMessage from '@libs/getPlaidDesktopMessage'; +import * as BankAccounts from '@userActions/BankAccounts'; +import CONFIG from '@src/CONFIG'; +import ONYXKEYS from '@src/ONYXKEYS'; +import ROUTES from '@src/ROUTES'; +import type {PersonalBankAccount, PlaidData} from '@src/types/onyx'; + +type AddPersonalBankAccountPageWithOnyxProps = { + /** Contains plaid data */ + plaidData: OnyxEntry; + + /** The details about the Personal bank account we are adding saved in Onyx */ + personalBankAccount: OnyxEntry; +}; + +const plaidDesktopMessage = getPlaidDesktopMessage(); +const bankAccountRoute = `${CONFIG.EXPENSIFY.NEW_EXPENSIFY_URL}${ROUTES.SETTINGS_ADD_BANK_ACCOUNT_REFACTOR}`; + +function ChooseMethod({isPlaidDisabled, user, onNext}: AddPersonalBankAccountPageWithOnyxProps) { + const styles = useThemeStyles(); + const {translate} = useLocalize(); + useEffect(() => BankAccounts.clearPersonalBankAccount, []); + + return ( +
+ + {translate('bankAccount.addBankAccountBodyPt1')} + + + {translate('bankAccount.addBankAccountBodyPt2')} + + {!!plaidDesktopMessage && ( + + {translate(plaidDesktopMessage)} + + )} +
+ ); +} + +ChooseMethod.displayName = 'AddPersonalBankAccountPage'; + +export default withOnyx({ + personalBankAccount: { + key: ONYXKEYS.PERSONAL_BANK_ACCOUNT, + }, + plaidData: { + key: ONYXKEYS.PLAID_DATA, + }, + isPlaidDisabled: { + key: ONYXKEYS.IS_PLAID_DISABLED, + }, + user: { + key: ONYXKEYS.USER, + }, +})(ChooseMethod); diff --git a/src/pages/EnablePayments/AddBankAccount/substeps/Confirmation.tsx b/src/pages/EnablePayments/AddBankAccount/substeps/Confirmation.tsx new file mode 100644 index 000000000000..b128d6dc75e8 --- /dev/null +++ b/src/pages/EnablePayments/AddBankAccount/substeps/Confirmation.tsx @@ -0,0 +1,112 @@ +import React, {useMemo} from 'react'; +import {ScrollView, View} from 'react-native'; +import type {OnyxEntry} from 'react-native-onyx'; +import {withOnyx} from 'react-native-onyx'; +import Button from '@components/Button'; +import DotIndicatorMessage from '@components/DotIndicatorMessage'; +import MenuItemWithTopDescription from '@components/MenuItemWithTopDescription'; +import Text from '@components/Text'; +import useLocalize from '@hooks/useLocalize'; +import useNetwork from '@hooks/useNetwork'; +import type {SubStepProps} from '@hooks/useSubStep/types'; +import useThemeStyles from '@hooks/useThemeStyles'; +import * as ErrorUtils from '@libs/ErrorUtils'; +import getSubstepValues from '@pages/ReimbursementAccount/utils/getSubstepValues'; +import CONST from '@src/CONST'; +import ONYXKEYS from '@src/ONYXKEYS'; +import type {ReimbursementAccountForm} from '@src/types/form'; +import INPUT_IDS from '@src/types/form/ReimbursementAccountForm'; +import type {ReimbursementAccount} from '@src/types/onyx'; + +type ConfirmationOnyxProps = { + /** Reimbursement account from ONYX */ + reimbursementAccount: OnyxEntry; + + /** The draft values of the bank account being setup */ + reimbursementAccountDraft: OnyxEntry; +}; + +type ConfirmationProps = ConfirmationOnyxProps & SubStepProps; + +const BANK_INFO_STEP_KEYS = INPUT_IDS.BANK_INFO_STEP; +const BANK_INFO_STEP_INDEXES = CONST.REIMBURSEMENT_ACCOUNT_SUBSTEP_INDEX.BANK_ACCOUNT; + +function Confirmation({reimbursementAccount, reimbursementAccountDraft, onNext, onMove}: ConfirmationProps) { + const {translate} = useLocalize(); + const styles = useThemeStyles(); + const {isOffline} = useNetwork(); + + const isLoading = reimbursementAccount?.isLoading ?? false; + const setupType = reimbursementAccount?.achData?.subStep ?? ''; + const bankAccountID = Number(reimbursementAccount?.achData?.bankAccountID ?? '0'); + const values = useMemo(() => getSubstepValues(BANK_INFO_STEP_KEYS, reimbursementAccountDraft, reimbursementAccount ?? {}), [reimbursementAccount, reimbursementAccountDraft]); + const error = ErrorUtils.getLatestErrorMessage(reimbursementAccount ?? {}); + + const handleModifyAccountNumbers = () => { + onMove(BANK_INFO_STEP_INDEXES.ACCOUNT_NUMBERS); + }; + + return ( + + {translate('bankAccount.letsDoubleCheck')} + {translate('bankAccount.thisBankAccount')} + {setupType === CONST.BANK_ACCOUNT.SUBSTEP.MANUAL && ( + + + + + + )} + {setupType === CONST.BANK_ACCOUNT.SUBSTEP.PLAID && ( + + )} + + {error && error.length > 0 && ( + + )} +