diff --git a/src/pages/ReimbursementAccount/ReimbursementAccountPage.tsx b/src/pages/ReimbursementAccount/ReimbursementAccountPage.tsx index c2b3bd60cb99..29173817f5ac 100644 --- a/src/pages/ReimbursementAccount/ReimbursementAccountPage.tsx +++ b/src/pages/ReimbursementAccount/ReimbursementAccountPage.tsx @@ -170,16 +170,6 @@ function ReimbursementAccountPage({route, policy}: ReimbursementAccountPageProps const currentStep = !isPreviousPolicy ? CONST.BANK_ACCOUNT.STEP.BANK_ACCOUNT : achData?.currentStep || CONST.BANK_ACCOUNT.STEP.BANK_ACCOUNT; const [nonUSDBankAccountStep, setNonUSDBankAccountStep] = useState(CONST.NON_USD_BANK_ACCOUNT.STEP.COUNTRY); - /** - When this page is first opened, `reimbursementAccount` prop might not yet be fully loaded from Onyx. - Calculating `shouldShowContinueSetupButton` immediately on initial render doesn't make sense as - it relies on incomplete data. Thus, we should wait to calculate it until we have received - the full `reimbursementAccount` data from the server. This logic is handled within the useEffect hook, - 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 { ...lodashPick(reimbursementAccount?.achData, ...fieldNames), @@ -205,6 +195,16 @@ function ReimbursementAccountPage({route, policy}: ReimbursementAccountPageProps return achData?.state === BankAccount.STATE.PENDING || [CONST.BANK_ACCOUNT.STEP.BANK_ACCOUNT, ''].includes(getStepToOpenFromRouteParams(route)); } + /** + When this page is first opened, `reimbursementAccount` prop might not yet be fully loaded from Onyx. + Calculating `shouldShowContinueSetupButton` immediately on initial render doesn't make sense as + it relies on incomplete data. Thus, we should wait to calculate it until we have received + the full `reimbursementAccount` data from the server. This logic is handled within the useEffect hook, + 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()); + const handleNextNonUSDBankAccountStep = () => { switch (nonUSDBankAccountStep) { case CONST.NON_USD_BANK_ACCOUNT.STEP.COUNTRY: