From 6064e454305b4878c6c45fdb5c768a4b5519d471 Mon Sep 17 00:00:00 2001 From: Yauheni Pasiukevich Date: Fri, 18 Apr 2025 12:44:56 +0200 Subject: [PATCH 1/9] fix: remove isSuccess state from bank account creation, use api error --- src/libs/actions/BankAccounts.ts | 3 --- .../NonUSD/BankInfo/BankInfo.tsx | 19 ++++++++++--------- src/types/onyx/ReimbursementAccount.ts | 3 --- 3 files changed, 10 insertions(+), 15 deletions(-) diff --git a/src/libs/actions/BankAccounts.ts b/src/libs/actions/BankAccounts.ts index d2d2b74a4479..57615652fdca 100644 --- a/src/libs/actions/BankAccounts.ts +++ b/src/libs/actions/BankAccounts.ts @@ -441,7 +441,6 @@ function createCorpayBankAccount(fields: ReimbursementAccountForm, policyID: str value: { isLoading: false, isCreateCorpayBankAccount: false, - isSuccess: true, }, }, ], @@ -452,8 +451,6 @@ function createCorpayBankAccount(fields: ReimbursementAccountForm, policyID: str value: { isLoading: false, isCreateCorpayBankAccount: false, - isSuccess: false, - errors: getMicroSecondOnyxErrorWithTranslationKey('common.genericErrorMessage'), }, }, ], diff --git a/src/pages/ReimbursementAccount/NonUSD/BankInfo/BankInfo.tsx b/src/pages/ReimbursementAccount/NonUSD/BankInfo/BankInfo.tsx index 9283bdfd4298..aa460f4baa75 100644 --- a/src/pages/ReimbursementAccount/NonUSD/BankInfo/BankInfo.tsx +++ b/src/pages/ReimbursementAccount/NonUSD/BankInfo/BankInfo.tsx @@ -4,6 +4,7 @@ import {useOnyx} from 'react-native-onyx'; import InteractiveStepWrapper from '@components/InteractiveStepWrapper'; import useLocalize from '@hooks/useLocalize'; import useSubStep from '@hooks/useSubStep'; +import usePrevious from '@hooks/usePrevious'; import NotFoundPage from '@pages/ErrorPage/NotFoundPage'; import {getBankInfoStepValues} from '@pages/ReimbursementAccount/NonUSD/utils/getBankInfoStepValues'; import getInitialSubStepForBankInfoStep from '@pages/ReimbursementAccount/NonUSD/utils/getInitialSubStepForBankInfoStep'; @@ -43,6 +44,7 @@ function BankInfo({onBackButtonPress, onSubmit, policyID}: BankInfoProps) { const inputKeys = getInputKeysForBankInfoStep(corpayFields); const values = useMemo(() => getBankInfoStepValues(inputKeys, reimbursementAccountDraft, reimbursementAccount), [inputKeys, reimbursementAccount, reimbursementAccountDraft]); const startFrom = getInitialSubStepForBankInfoStep(values, corpayFields); + const previousIsLoading = usePrevious(corpayFields?.isLoading); const submit = () => { const {formFields, isLoading, isSuccess, ...corpayData} = corpayFields ?? {}; @@ -51,18 +53,17 @@ function BankInfo({onBackButtonPress, onSubmit, policyID}: BankInfoProps) { }; useEffect(() => { - // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing - if (reimbursementAccount?.errors || reimbursementAccount?.isLoading || !reimbursementAccount?.isSuccess) { + if (previousIsLoading !== true || + reimbursementAccount?.isLoading !== false || + corpayFields?.isLoading !== false || + reimbursementAccount?.errors + ) { return; } - if (reimbursementAccount?.isSuccess) { - onSubmit(); - clearReimbursementAccountBankCreation(); - } - - return () => clearReimbursementAccountBankCreation(); - }, [onSubmit, reimbursementAccount?.errors, reimbursementAccount?.isCreateCorpayBankAccount, reimbursementAccount?.isLoading, reimbursementAccount?.isSuccess]); + onSubmit(); + clearReimbursementAccountBankCreation(); + }, [corpayFields?.isLoading, onSubmit, previousIsLoading, reimbursementAccount?.errors, reimbursementAccount?.isLoading]); useEffect(() => { getCorpayBankAccountFields(country, currency); diff --git a/src/types/onyx/ReimbursementAccount.ts b/src/types/onyx/ReimbursementAccount.ts index e628d91b5891..a3d5d4ee60cf 100644 --- a/src/types/onyx/ReimbursementAccount.ts +++ b/src/types/onyx/ReimbursementAccount.ts @@ -211,9 +211,6 @@ type ReimbursementAccount = OnyxCommon.OnyxValueWithOfflineFeedback<{ /** Whether we are saving the signer info data via the API */ isSavingCorpayOnboardingDirectorInformation?: boolean; - /** Where the request is successful */ - isSuccess?: boolean; - /** A date that indicates the user has been throttled */ throttledDate?: string; From 3c54bee46b0d2be152b31597b7448f226312e5b8 Mon Sep 17 00:00:00 2001 From: Yauheni Pasiukevich Date: Fri, 18 Apr 2025 12:48:34 +0200 Subject: [PATCH 2/9] fix: ensure cleanup function is returned in useEffect for bank info component --- src/pages/ReimbursementAccount/NonUSD/BankInfo/BankInfo.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/ReimbursementAccount/NonUSD/BankInfo/BankInfo.tsx b/src/pages/ReimbursementAccount/NonUSD/BankInfo/BankInfo.tsx index aa460f4baa75..1b411c78a1be 100644 --- a/src/pages/ReimbursementAccount/NonUSD/BankInfo/BankInfo.tsx +++ b/src/pages/ReimbursementAccount/NonUSD/BankInfo/BankInfo.tsx @@ -62,7 +62,7 @@ function BankInfo({onBackButtonPress, onSubmit, policyID}: BankInfoProps) { } onSubmit(); - clearReimbursementAccountBankCreation(); + return () => clearReimbursementAccountBankCreation(); }, [corpayFields?.isLoading, onSubmit, previousIsLoading, reimbursementAccount?.errors, reimbursementAccount?.isLoading]); useEffect(() => { From 617152f1d2c6d033ca1f6e2e9868f20281d96d2e Mon Sep 17 00:00:00 2001 From: Yauheni Pasiukevich Date: Fri, 18 Apr 2025 14:56:42 +0200 Subject: [PATCH 3/9] feat: revert isSuccess field --- src/types/onyx/ReimbursementAccount.ts | 3 +++ 1 file changed, 3 insertions(+) diff --git a/src/types/onyx/ReimbursementAccount.ts b/src/types/onyx/ReimbursementAccount.ts index bc44824904a8..3474cb77792d 100644 --- a/src/types/onyx/ReimbursementAccount.ts +++ b/src/types/onyx/ReimbursementAccount.ts @@ -214,6 +214,9 @@ type ReimbursementAccount = OnyxCommon.OnyxValueWithOfflineFeedback<{ /** Whether we are saving agreements accepted by user via the API (non USD flow Step 6) */ isFinishingCorpayBankAccountOnboarding?: boolean; + /** Where the request is successful */ + isSuccess?: boolean; + /** A date that indicates the user has been throttled */ throttledDate?: string; From 6d7bd9dc2d979a2ab6148c00b9682919eda7c0f5 Mon Sep 17 00:00:00 2001 From: Yauheni Pasiukevich Date: Fri, 18 Apr 2025 16:41:05 +0200 Subject: [PATCH 4/9] fix prettier --- .../ReimbursementAccount/NonUSD/BankInfo/BankInfo.tsx | 8 ++------ 1 file changed, 2 insertions(+), 6 deletions(-) diff --git a/src/pages/ReimbursementAccount/NonUSD/BankInfo/BankInfo.tsx b/src/pages/ReimbursementAccount/NonUSD/BankInfo/BankInfo.tsx index 337431c3f73d..057d58b3f30b 100644 --- a/src/pages/ReimbursementAccount/NonUSD/BankInfo/BankInfo.tsx +++ b/src/pages/ReimbursementAccount/NonUSD/BankInfo/BankInfo.tsx @@ -3,8 +3,8 @@ import type {ComponentType} from 'react'; import {useOnyx} from 'react-native-onyx'; import InteractiveStepWrapper from '@components/InteractiveStepWrapper'; import useLocalize from '@hooks/useLocalize'; -import useSubStep from '@hooks/useSubStep'; import usePrevious from '@hooks/usePrevious'; +import useSubStep from '@hooks/useSubStep'; import NotFoundPage from '@pages/ErrorPage/NotFoundPage'; import {getBankInfoStepValues} from '@pages/ReimbursementAccount/NonUSD/utils/getBankInfoStepValues'; import getInitialSubStepForBankInfoStep from '@pages/ReimbursementAccount/NonUSD/utils/getInitialSubStepForBankInfoStep'; @@ -53,11 +53,7 @@ function BankInfo({onBackButtonPress, onSubmit, policyID}: BankInfoProps) { }; useEffect(() => { - if (previousIsLoading !== true || - reimbursementAccount?.isLoading !== false || - corpayFields?.isLoading !== false || - reimbursementAccount?.errors - ) { + if (previousIsLoading !== true || reimbursementAccount?.isLoading !== false || corpayFields?.isLoading !== false || reimbursementAccount?.errors) { return; } From 789523cee19d644232f6c6c222855ffa21cb5a80 Mon Sep 17 00:00:00 2001 From: Yauheni Pasiukevich Date: Wed, 23 Apr 2025 15:59:36 +0200 Subject: [PATCH 5/9] Fix condition in useEffect to simplify loading checks in BankInfo component --- src/pages/ReimbursementAccount/NonUSD/BankInfo/BankInfo.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/ReimbursementAccount/NonUSD/BankInfo/BankInfo.tsx b/src/pages/ReimbursementAccount/NonUSD/BankInfo/BankInfo.tsx index 057d58b3f30b..233e726f8aaa 100644 --- a/src/pages/ReimbursementAccount/NonUSD/BankInfo/BankInfo.tsx +++ b/src/pages/ReimbursementAccount/NonUSD/BankInfo/BankInfo.tsx @@ -53,7 +53,7 @@ function BankInfo({onBackButtonPress, onSubmit, policyID}: BankInfoProps) { }; useEffect(() => { - if (previousIsLoading !== true || reimbursementAccount?.isLoading !== false || corpayFields?.isLoading !== false || reimbursementAccount?.errors) { + if (previousIsLoading !== true || corpayFields?.isLoading !== false || reimbursementAccount?.errors) { return; } From 3ab243938687e6e9dda1286956a334720e710976 Mon Sep 17 00:00:00 2001 From: Yauheni Pasiukevich Date: Wed, 23 Apr 2025 18:43:18 +0200 Subject: [PATCH 6/9] Fix submit condition in useEffect for BankInfo component --- src/pages/ReimbursementAccount/NonUSD/BankInfo/BankInfo.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/ReimbursementAccount/NonUSD/BankInfo/BankInfo.tsx b/src/pages/ReimbursementAccount/NonUSD/BankInfo/BankInfo.tsx index 233e726f8aaa..7c59534fe725 100644 --- a/src/pages/ReimbursementAccount/NonUSD/BankInfo/BankInfo.tsx +++ b/src/pages/ReimbursementAccount/NonUSD/BankInfo/BankInfo.tsx @@ -53,7 +53,7 @@ function BankInfo({onBackButtonPress, onSubmit, policyID}: BankInfoProps) { }; useEffect(() => { - if (previousIsLoading !== true || corpayFields?.isLoading !== false || reimbursementAccount?.errors) { + if (previousIsLoading !== true || reimbursementAccount?.isLoading !== false || reimbursementAccount?.errors) { return; } From 6e332387341f01e161ed879f7cb0a9380464eb72 Mon Sep 17 00:00:00 2001 From: Yauheni Pasiukevich Date: Thu, 24 Apr 2025 14:19:42 +0200 Subject: [PATCH 7/9] Reset errors state in createCorpayBankAccount and simplify loading checks in BankInfo component --- src/libs/actions/BankAccounts.ts | 1 + src/pages/ReimbursementAccount/NonUSD/BankInfo/BankInfo.tsx | 5 ++--- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/src/libs/actions/BankAccounts.ts b/src/libs/actions/BankAccounts.ts index 00180d11a70c..c8f7eda03b52 100644 --- a/src/libs/actions/BankAccounts.ts +++ b/src/libs/actions/BankAccounts.ts @@ -442,6 +442,7 @@ function createCorpayBankAccount(fields: ReimbursementAccountForm, policyID: str value: { isLoading: false, isCreateCorpayBankAccount: false, + errors: null, }, }, ], diff --git a/src/pages/ReimbursementAccount/NonUSD/BankInfo/BankInfo.tsx b/src/pages/ReimbursementAccount/NonUSD/BankInfo/BankInfo.tsx index 7c59534fe725..ebe3d16d6f82 100644 --- a/src/pages/ReimbursementAccount/NonUSD/BankInfo/BankInfo.tsx +++ b/src/pages/ReimbursementAccount/NonUSD/BankInfo/BankInfo.tsx @@ -44,7 +44,6 @@ function BankInfo({onBackButtonPress, onSubmit, policyID}: BankInfoProps) { const inputKeys = getInputKeysForBankInfoStep(corpayFields); const values = useMemo(() => getBankInfoStepValues(inputKeys, reimbursementAccountDraft, reimbursementAccount), [inputKeys, reimbursementAccount, reimbursementAccountDraft]); const startFrom = getInitialSubStepForBankInfoStep(values, corpayFields); - const previousIsLoading = usePrevious(corpayFields?.isLoading); const submit = () => { const {formFields, isLoading, isSuccess, ...corpayData} = corpayFields ?? {}; @@ -53,13 +52,13 @@ function BankInfo({onBackButtonPress, onSubmit, policyID}: BankInfoProps) { }; useEffect(() => { - if (previousIsLoading !== true || reimbursementAccount?.isLoading !== false || reimbursementAccount?.errors) { + if (reimbursementAccount?.isLoading === true || !!reimbursementAccount?.errors || reimbursementAccount?.isSuccess === false) { return; } onSubmit(); return () => clearReimbursementAccountBankCreation(); - }, [corpayFields?.isLoading, onSubmit, previousIsLoading, reimbursementAccount?.errors, reimbursementAccount?.isLoading]); + }, [onSubmit, reimbursementAccount?.errors, reimbursementAccount?.isLoading, reimbursementAccount?.isSuccess]); useEffect(() => { if (country === '') { From b2e5b3fd8f8bee6c30e9a4f484188bc361006d9c Mon Sep 17 00:00:00 2001 From: Yauheni Pasiukevich Date: Thu, 24 Apr 2025 14:21:07 +0200 Subject: [PATCH 8/9] Remove unused usePrevious hook import in BankInfo component --- src/pages/ReimbursementAccount/NonUSD/BankInfo/BankInfo.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/src/pages/ReimbursementAccount/NonUSD/BankInfo/BankInfo.tsx b/src/pages/ReimbursementAccount/NonUSD/BankInfo/BankInfo.tsx index ebe3d16d6f82..2a4b0ac4d52c 100644 --- a/src/pages/ReimbursementAccount/NonUSD/BankInfo/BankInfo.tsx +++ b/src/pages/ReimbursementAccount/NonUSD/BankInfo/BankInfo.tsx @@ -3,7 +3,6 @@ import type {ComponentType} from 'react'; import {useOnyx} from 'react-native-onyx'; import InteractiveStepWrapper from '@components/InteractiveStepWrapper'; import useLocalize from '@hooks/useLocalize'; -import usePrevious from '@hooks/usePrevious'; import useSubStep from '@hooks/useSubStep'; import NotFoundPage from '@pages/ErrorPage/NotFoundPage'; import {getBankInfoStepValues} from '@pages/ReimbursementAccount/NonUSD/utils/getBankInfoStepValues'; From 2eaa287d43354d1494e3bd6d6a33da970a2e10ad Mon Sep 17 00:00:00 2001 From: Yauheni Pasiukevich Date: Thu, 24 Apr 2025 16:38:29 +0200 Subject: [PATCH 9/9] Adjust flow checks to improve stability --- src/libs/actions/BankAccounts.ts | 2 ++ .../ReimbursementAccount/NonUSD/BankInfo/BankInfo.tsx | 11 ++++++++--- 2 files changed, 10 insertions(+), 3 deletions(-) diff --git a/src/libs/actions/BankAccounts.ts b/src/libs/actions/BankAccounts.ts index c8f7eda03b52..755710774d4d 100644 --- a/src/libs/actions/BankAccounts.ts +++ b/src/libs/actions/BankAccounts.ts @@ -443,6 +443,7 @@ function createCorpayBankAccount(fields: ReimbursementAccountForm, policyID: str isLoading: false, isCreateCorpayBankAccount: false, errors: null, + isSuccess: true, }, }, ], @@ -453,6 +454,7 @@ function createCorpayBankAccount(fields: ReimbursementAccountForm, policyID: str value: { isLoading: false, isCreateCorpayBankAccount: false, + isSuccess: false, }, }, ], diff --git a/src/pages/ReimbursementAccount/NonUSD/BankInfo/BankInfo.tsx b/src/pages/ReimbursementAccount/NonUSD/BankInfo/BankInfo.tsx index 2a4b0ac4d52c..2e841f1e3d96 100644 --- a/src/pages/ReimbursementAccount/NonUSD/BankInfo/BankInfo.tsx +++ b/src/pages/ReimbursementAccount/NonUSD/BankInfo/BankInfo.tsx @@ -51,14 +51,19 @@ function BankInfo({onBackButtonPress, onSubmit, policyID}: BankInfoProps) { }; useEffect(() => { - if (reimbursementAccount?.isLoading === true || !!reimbursementAccount?.errors || reimbursementAccount?.isSuccess === false) { + if (reimbursementAccount?.isLoading === true || !!reimbursementAccount?.errors) { return; } - onSubmit(); - return () => clearReimbursementAccountBankCreation(); + if (reimbursementAccount?.isSuccess === true) { + onSubmit(); + } }, [onSubmit, reimbursementAccount?.errors, reimbursementAccount?.isLoading, reimbursementAccount?.isSuccess]); + useEffect(() => { + return () => clearReimbursementAccountBankCreation(); + }, []); + useEffect(() => { if (country === '') { return;