diff --git a/src/pages/ReimbursementAccount/ReimbursementAccountPage.tsx b/src/pages/ReimbursementAccount/ReimbursementAccountPage.tsx index 04d5173e9c16..9fdcea824c3c 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, {useEffect, useRef, useState} from 'react'; +import React, {useCallback, useEffect, useRef, useState} from 'react'; import {View} from 'react-native'; import {useOnyx} from 'react-native-onyx'; import type {ValueOf} from 'type-fest'; @@ -177,7 +177,6 @@ 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,21 +187,28 @@ function ReimbursementAccountPage({route, policy}: ReimbursementAccountPageProps /** * Returns true if a VBBA exists in any state other than OPEN or LOCKED */ - function hasInProgressVBBA(): boolean { + const hasInProgressVBBA = useCallback(() => { 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 */ - function getShouldShowContinueSetupButtonInitialValue(): boolean { + const getShouldShowContinueSetupButtonInitialValue = useCallback(() => { 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 7dc6293e23ea..2b3bb8a4b9e8 100644 --- a/src/pages/workspace/expensifyCard/WorkspaceExpensifyCardPageEmptyState.tsx +++ b/src/pages/workspace/expensifyCard/WorkspaceExpensifyCardPageEmptyState.tsx @@ -22,7 +22,6 @@ 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[] = [ { @@ -55,15 +54,15 @@ function WorkspaceExpensifyCardPageEmptyState({route, policy}: WorkspaceExpensif const eligibleBankAccounts = CardUtils.getEligibleBankAccountsForCard(bankAccountList ?? {}); const reimbursementAccountStatus = reimbursementAccount?.achData?.state ?? ''; - const isSetupUnfinished = isEmptyObject(bankAccountList) && reimbursementAccountStatus && reimbursementAccountStatus !== CONST.BANK_ACCOUNT.STATE.OPEN; + const isSetupUnfinished = !eligibleBankAccounts.length && reimbursementAccountStatus && reimbursementAccountStatus !== CONST.BANK_ACCOUNT.STATE.OPEN; const startFlow = useCallback(() => { - if (!eligibleBankAccounts.length || isSetupUnfinished) { + if (!eligibleBankAccounts.length) { 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, isSetupUnfinished, policy?.id]); + }, [eligibleBankAccounts.length, policy?.id]); const confirmCurrencyChangeAndHideModal = useCallback(() => { if (!policy) {