From a11a00b18729ae18bb84ed9d457e42e4037a62d1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Hanno=20J=2E=20G=C3=B6decke?= Date: Mon, 26 Aug 2024 16:41:12 +0200 Subject: [PATCH 1/4] fix: open bank account step directly in bottom down flow --- src/libs/actions/BankAccounts.ts | 6 +---- src/libs/actions/Policy/Policy.ts | 17 +++++++++++++ .../ReimbursementAccountPage.tsx | 25 ++++++++++++++++--- src/types/onyx/ReimbursementAccount.ts | 19 ++++++++++++-- 4 files changed, 56 insertions(+), 11 deletions(-) diff --git a/src/libs/actions/BankAccounts.ts b/src/libs/actions/BankAccounts.ts index 6e718b1bde343..a7b4f6703f8fc 100644 --- a/src/libs/actions/BankAccounts.ts +++ b/src/libs/actions/BankAccounts.ts @@ -22,7 +22,7 @@ import type {Route} from '@src/ROUTES'; import type {PersonalBankAccountForm} from '@src/types/form'; import type {ACHContractStepProps, BeneficialOwnersStepProps, CompanyStepProps, RequestorStepProps} from '@src/types/form/ReimbursementAccountForm'; import type PlaidBankAccount from '@src/types/onyx/PlaidBankAccount'; -import type {BankAccountStep, BankAccountSubStep} from '@src/types/onyx/ReimbursementAccount'; +import type {BankAccountStep, ReimbursementAccountStep, ReimbursementAccountSubStep} from '@src/types/onyx/ReimbursementAccount'; import type {OnyxData} from '@src/types/onyx/Request'; import * as ReimbursementAccount from './ReimbursementAccount'; @@ -40,10 +40,6 @@ export { export {openPlaidBankAccountSelector, openPlaidBankLogin} from './Plaid'; export {openOnfidoFlow, answerQuestionsForWallet, verifyIdentity, acceptWalletTerms} from './Wallet'; -type ReimbursementAccountStep = BankAccountStep | ''; - -type ReimbursementAccountSubStep = BankAccountSubStep | ''; - type AccountFormValues = typeof ONYXKEYS.FORMS.PERSONAL_BANK_ACCOUNT_FORM | typeof ONYXKEYS.FORMS.REIMBURSEMENT_ACCOUNT_FORM; type BusinessAddress = { diff --git a/src/libs/actions/Policy/Policy.ts b/src/libs/actions/Policy/Policy.ts index 753428e4a6df0..e4b1bc7fa9159 100644 --- a/src/libs/actions/Policy/Policy.ts +++ b/src/libs/actions/Policy/Policy.ts @@ -78,6 +78,7 @@ import type { } from '@src/types/onyx'; import type {Errors} from '@src/types/onyx/OnyxCommon'; import type {Attributes, CompanyAddress, CustomUnit, Rate, TaxRate, Unit} from '@src/types/onyx/Policy'; +import type {BankAccountSubStep} from '@src/types/onyx/ReimbursementAccount'; import type {OnyxData} from '@src/types/onyx/Request'; import {isEmptyObject} from '@src/types/utils/EmptyObject'; import {buildOptimisticPolicyCategories} from './Category'; @@ -2591,6 +2592,22 @@ function createWorkspaceFromIOUPayment(iouReport: OnyxEntry): WorkspaceF value: {[movedReportAction.reportActionID]: null}, }); + // We know that this new workspace has no BankAccount yet, so we can set + // the reimbursement account to be immediately in the setup state for a new bank account + successData.push({ + onyxMethod: Onyx.METHOD.MERGE, + key: `${ONYXKEYS.REIMBURSEMENT_ACCOUNT}`, + value: { + isLoading: false, + achData: { + currentStep: CONST.BANK_ACCOUNT.STEP.BANK_ACCOUNT, + policyID, + // TODO: fix the type here? + subStep: '' as BankAccountSubStep, + }, + }, + }); + const params: CreateWorkspaceFromIOUPaymentParams = { policyID, announceChatReportID, diff --git a/src/pages/ReimbursementAccount/ReimbursementAccountPage.tsx b/src/pages/ReimbursementAccount/ReimbursementAccountPage.tsx index 9bbe9f5adbc48..5f367cb53286f 100644 --- a/src/pages/ReimbursementAccount/ReimbursementAccountPage.tsx +++ b/src/pages/ReimbursementAccount/ReimbursementAccountPage.tsx @@ -31,7 +31,7 @@ import ROUTES from '@src/ROUTES'; import type SCREENS from '@src/SCREENS'; import type {InputID} from '@src/types/form/ReimbursementAccountForm'; import type * as OnyxTypes from '@src/types/onyx'; -import type {ACHData, BankAccountStep as TBankAccountStep} from '@src/types/onyx/ReimbursementAccount'; +import type {ACHDataReimbursementAccount, BankAccountStep as TBankAccountStep} from '@src/types/onyx/ReimbursementAccount'; import {isEmptyObject} from '@src/types/utils/EmptyObject'; import ACHContractStep from './ACHContractStep'; import BankAccountStep from './BankAccountStep'; @@ -144,7 +144,7 @@ function ReimbursementAccountPage({ */ const achData = reimbursementAccount?.achData; - function getBankAccountFields(fieldNames: T[]): Pick { + function getBankAccountFields(fieldNames: T[]): Pick { return { ...lodashPick(reimbursementAccount?.achData, ...fieldNames), }; @@ -199,14 +199,20 @@ function ReimbursementAccountPage({ /** 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 complete data. Thus, we should wait to calculate it until we have received + 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); const [shouldShowContinueSetupButton, setShouldShowContinueSetupButton] = useState(hasACHDataBeenLoaded ? getShouldShowContinueSetupButtonInitialValue() : false); - const [isReimbursementAccountLoading, setIsReimbursementAccountLoading] = useState(true); + const [isReimbursementAccountLoading, setIsReimbursementAccountLoading] = useState(() => { + // By default return true (loading), if there are already loaded data we can skip the loading state + if (hasACHDataBeenLoaded && typeof reimbursementAccount?.isLoading === 'boolean' && !reimbursementAccount?.isLoading) { + return false; + } + return true; + }); // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing const currentStep = achData?.currentStep || CONST.BANK_ACCOUNT.STEP.BANK_ACCOUNT; @@ -238,6 +244,10 @@ function ReimbursementAccountPage({ } useEffect(() => { + if (!isReimbursementAccountLoading) { + return; + } + // If the step to open is empty, we want to clear the sub step, so the connect option view is shown to the user const isStepToOpenEmpty = getStepToOpenFromRouteParams(route) === ''; if (isStepToOpenEmpty) { @@ -376,6 +386,13 @@ function ReimbursementAccountPage({ }; const isLoading = (!!isLoadingApp || !!account?.isLoading || isReimbursementAccountLoading) && (!plaidCurrentEvent || plaidCurrentEvent === CONST.BANK_ACCOUNT.PLAID.EVENTS_NAME.EXIT); + console.log('hanno', { + isLoading, + isLoadingApp, + accountIsLoading: !!account?.isLoading, + isReimbursementAccountLoading, + reimbursementAccount, + }); const shouldShowOfflineLoader = !( isOffline && diff --git a/src/types/onyx/ReimbursementAccount.ts b/src/types/onyx/ReimbursementAccount.ts index 2322f6faab179..d349d95002d90 100644 --- a/src/types/onyx/ReimbursementAccount.ts +++ b/src/types/onyx/ReimbursementAccount.ts @@ -49,6 +49,21 @@ type ACHData = Partial & { + /** Step of the setup flow that we are on. Determines which view is presented. */ + currentStep?: ReimbursementAccountStep; + + /** Optional subStep we would like the user to start back on */ + substep?: ReimbursementAccountSubStep; +}; + /** Model of reimbursement account data */ type ReimbursementAccount = OnyxCommon.OnyxValueWithOfflineFeedback<{ /** Whether we are loading the data via the API */ @@ -58,7 +73,7 @@ type ReimbursementAccount = OnyxCommon.OnyxValueWithOfflineFeedback<{ throttledDate?: string; /** Additional data for the account in setup */ - achData?: ACHData; + achData?: ACHDataReimbursementAccount; /** Disable validation button if max attempts exceeded */ maxAttemptsReached?: boolean; @@ -80,4 +95,4 @@ type ReimbursementAccount = OnyxCommon.OnyxValueWithOfflineFeedback<{ }>; export default ReimbursementAccount; -export type {BankAccountStep, BankAccountSubStep, ACHData}; +export type {BankAccountStep, BankAccountSubStep, ACHData, ReimbursementAccountStep, ReimbursementAccountSubStep, ACHDataReimbursementAccount}; From 197ad10aecc9c9492edc11bf6b5b9570504507d8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Hanno=20J=2E=20G=C3=B6decke?= Date: Mon, 26 Aug 2024 19:55:16 +0200 Subject: [PATCH 2/4] fix TS issue --- src/types/onyx/ReimbursementAccount.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/types/onyx/ReimbursementAccount.ts b/src/types/onyx/ReimbursementAccount.ts index d349d95002d90..186b3e6ad05bf 100644 --- a/src/types/onyx/ReimbursementAccount.ts +++ b/src/types/onyx/ReimbursementAccount.ts @@ -56,12 +56,12 @@ type ReimbursementAccountStep = BankAccountStep | ''; type ReimbursementAccountSubStep = BankAccountSubStep | ''; /** The ACHData for an reimbursement account */ -type ACHDataReimbursementAccount = Omit & { +type ACHDataReimbursementAccount = Omit & { /** Step of the setup flow that we are on. Determines which view is presented. */ currentStep?: ReimbursementAccountStep; /** Optional subStep we would like the user to start back on */ - substep?: ReimbursementAccountSubStep; + subStep?: ReimbursementAccountSubStep; }; /** Model of reimbursement account data */ From 327faa979d9ee635906c8a46cbc0b30c4d7448fd Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Hanno=20J=2E=20G=C3=B6decke?= Date: Mon, 26 Aug 2024 19:55:31 +0200 Subject: [PATCH 3/4] use optimistic + failure data --- src/libs/actions/Policy/Policy.ts | 13 ++++++++----- 1 file changed, 8 insertions(+), 5 deletions(-) diff --git a/src/libs/actions/Policy/Policy.ts b/src/libs/actions/Policy/Policy.ts index e4b1bc7fa9159..b14e5d0ae3ce4 100644 --- a/src/libs/actions/Policy/Policy.ts +++ b/src/libs/actions/Policy/Policy.ts @@ -78,7 +78,6 @@ import type { } from '@src/types/onyx'; import type {Errors} from '@src/types/onyx/OnyxCommon'; import type {Attributes, CompanyAddress, CustomUnit, Rate, TaxRate, Unit} from '@src/types/onyx/Policy'; -import type {BankAccountSubStep} from '@src/types/onyx/ReimbursementAccount'; import type {OnyxData} from '@src/types/onyx/Request'; import {isEmptyObject} from '@src/types/utils/EmptyObject'; import {buildOptimisticPolicyCategories} from './Category'; @@ -2593,8 +2592,8 @@ function createWorkspaceFromIOUPayment(iouReport: OnyxEntry): WorkspaceF }); // We know that this new workspace has no BankAccount yet, so we can set - // the reimbursement account to be immediately in the setup state for a new bank account - successData.push({ + // the reimbursement account to be immediately in the setup state for a new bank account: + optimisticData.push({ onyxMethod: Onyx.METHOD.MERGE, key: `${ONYXKEYS.REIMBURSEMENT_ACCOUNT}`, value: { @@ -2602,11 +2601,15 @@ function createWorkspaceFromIOUPayment(iouReport: OnyxEntry): WorkspaceF achData: { currentStep: CONST.BANK_ACCOUNT.STEP.BANK_ACCOUNT, policyID, - // TODO: fix the type here? - subStep: '' as BankAccountSubStep, + subStep: '', }, }, }); + failureData.push({ + onyxMethod: Onyx.METHOD.SET, + key: `${ONYXKEYS.REIMBURSEMENT_ACCOUNT}`, + value: CONST.REIMBURSEMENT_ACCOUNT.DEFAULT_DATA, + }); const params: CreateWorkspaceFromIOUPaymentParams = { policyID, From d7ecd8498e798bf739fb27f75af22c2f0fa88b95 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Hanno=20J=2E=20G=C3=B6decke?= Date: Mon, 26 Aug 2024 20:34:52 +0200 Subject: [PATCH 4/4] removed debug log --- .../ReimbursementAccount/ReimbursementAccountPage.tsx | 7 ------- 1 file changed, 7 deletions(-) diff --git a/src/pages/ReimbursementAccount/ReimbursementAccountPage.tsx b/src/pages/ReimbursementAccount/ReimbursementAccountPage.tsx index 5f367cb53286f..4b42aff1fc1d5 100644 --- a/src/pages/ReimbursementAccount/ReimbursementAccountPage.tsx +++ b/src/pages/ReimbursementAccount/ReimbursementAccountPage.tsx @@ -386,13 +386,6 @@ function ReimbursementAccountPage({ }; const isLoading = (!!isLoadingApp || !!account?.isLoading || isReimbursementAccountLoading) && (!plaidCurrentEvent || plaidCurrentEvent === CONST.BANK_ACCOUNT.PLAID.EVENTS_NAME.EXIT); - console.log('hanno', { - isLoading, - isLoadingApp, - accountIsLoading: !!account?.isLoading, - isReimbursementAccountLoading, - reimbursementAccount, - }); const shouldShowOfflineLoader = !( isOffline &&