diff --git a/src/pages/ReimbursementAccount/ReimbursementAccountPage.tsx b/src/pages/ReimbursementAccount/ReimbursementAccountPage.tsx index 3c85f59b0d29..c2b3bd60cb99 100644 --- a/src/pages/ReimbursementAccount/ReimbursementAccountPage.tsx +++ b/src/pages/ReimbursementAccount/ReimbursementAccountPage.tsx @@ -2,7 +2,7 @@ import type {RouteProp} from '@react-navigation/native'; import type {StackScreenProps} from '@react-navigation/stack'; import {Str} from 'expensify-common'; import lodashPick from 'lodash/pick'; -import React, {useCallback, useEffect, useRef, useState} from 'react'; +import React, {useEffect, useRef, useState} from 'react'; import {View} from 'react-native'; import {useOnyx} from 'react-native-onyx'; import type {ValueOf} from 'type-fest'; @@ -178,6 +178,7 @@ function ReimbursementAccountPage({route, policy}: ReimbursementAccountPageProps which acts similarly to `componentDidUpdate` when the `reimbursementAccount` dependency changes. */ const [hasACHDataBeenLoaded, setHasACHDataBeenLoaded] = useState(reimbursementAccount !== CONST.REIMBURSEMENT_ACCOUNT.DEFAULT_DATA && isPreviousPolicy); + const [shouldShowContinueSetupButton, setShouldShowContinueSetupButton] = useState(getShouldShowContinueSetupButtonInitialValue()); function getBankAccountFields(fieldNames: InputID[]): Partial { return { @@ -188,28 +189,21 @@ function ReimbursementAccountPage({route, policy}: ReimbursementAccountPageProps /** * Returns true if a VBBA exists in any state other than OPEN or LOCKED */ - const hasInProgressVBBA = useCallback(() => { + function hasInProgressVBBA(): boolean { return !!achData?.bankAccountID && !!achData?.state && achData?.state !== BankAccount.STATE.OPEN && achData?.state !== BankAccount.STATE.LOCKED; - }, [achData?.bankAccountID, achData?.state]); + } /* * Calculates the state used to show the "Continue with setup" view. If a bank account setup is already in progress and * no specific further step was passed in the url we'll show the workspace bank account reset modal if the user wishes to start over */ - const getShouldShowContinueSetupButtonInitialValue = useCallback(() => { + function getShouldShowContinueSetupButtonInitialValue(): boolean { if (!hasInProgressVBBA()) { // Since there is no VBBA in progress, we won't need to show the component ContinueBankAccountSetup return false; } return achData?.state === BankAccount.STATE.PENDING || [CONST.BANK_ACCOUNT.STEP.BANK_ACCOUNT, ''].includes(getStepToOpenFromRouteParams(route)); - }, [achData?.state, hasInProgressVBBA, route]); - - const [shouldShowContinueSetupButton, setShouldShowContinueSetupButton] = useState(getShouldShowContinueSetupButtonInitialValue()); - - useEffect(() => { - setShouldShowContinueSetupButton(getShouldShowContinueSetupButtonInitialValue()); - setHasACHDataBeenLoaded(reimbursementAccount !== CONST.REIMBURSEMENT_ACCOUNT.DEFAULT_DATA && isPreviousPolicy); - }, [achData, getShouldShowContinueSetupButtonInitialValue, isPreviousPolicy, reimbursementAccount]); + } const handleNextNonUSDBankAccountStep = () => { switch (nonUSDBankAccountStep) { diff --git a/src/pages/workspace/expensifyCard/WorkspaceExpensifyCardPageEmptyState.tsx b/src/pages/workspace/expensifyCard/WorkspaceExpensifyCardPageEmptyState.tsx index 2b3bb8a4b9e8..7dc6293e23ea 100644 --- a/src/pages/workspace/expensifyCard/WorkspaceExpensifyCardPageEmptyState.tsx +++ b/src/pages/workspace/expensifyCard/WorkspaceExpensifyCardPageEmptyState.tsx @@ -22,6 +22,7 @@ import CONST from '@src/CONST'; import ONYXKEYS from '@src/ONYXKEYS'; import ROUTES from '@src/ROUTES'; import type SCREENS from '@src/SCREENS'; +import {isEmptyObject} from '@src/types/utils/EmptyObject'; const expensifyCardFeatures: FeatureListItem[] = [ { @@ -54,15 +55,15 @@ function WorkspaceExpensifyCardPageEmptyState({route, policy}: WorkspaceExpensif const eligibleBankAccounts = CardUtils.getEligibleBankAccountsForCard(bankAccountList ?? {}); const reimbursementAccountStatus = reimbursementAccount?.achData?.state ?? ''; - const isSetupUnfinished = !eligibleBankAccounts.length && reimbursementAccountStatus && reimbursementAccountStatus !== CONST.BANK_ACCOUNT.STATE.OPEN; + const isSetupUnfinished = isEmptyObject(bankAccountList) && reimbursementAccountStatus && reimbursementAccountStatus !== CONST.BANK_ACCOUNT.STATE.OPEN; const startFlow = useCallback(() => { - if (!eligibleBankAccounts.length) { + if (!eligibleBankAccounts.length || isSetupUnfinished) { Navigation.navigate(ROUTES.BANK_ACCOUNT_WITH_STEP_TO_OPEN.getRoute('new', policy?.id, ROUTES.WORKSPACE_EXPENSIFY_CARD.getRoute(policy?.id ?? '-1'))); } else { Navigation.navigate(ROUTES.WORKSPACE_EXPENSIFY_CARD_BANK_ACCOUNT.getRoute(policy?.id ?? '-1')); } - }, [eligibleBankAccounts.length, policy?.id]); + }, [eligibleBankAccounts.length, isSetupUnfinished, policy?.id]); const confirmCurrencyChangeAndHideModal = useCallback(() => { if (!policy) {