diff --git a/src/hooks/useStepFormSubmit.ts b/src/hooks/useStepFormSubmit.ts index 883fe980a338..1119497944f0 100644 --- a/src/hooks/useStepFormSubmit.ts +++ b/src/hooks/useStepFormSubmit.ts @@ -30,6 +30,8 @@ export default function useStepFormSubmit }, {} as Record, OnyxValues[T][Exclude]>); FormActions.setDraftValues(formId, stepValues); + onNext(stepValues); + return; } onNext(); diff --git a/src/hooks/useSubStep/index.ts b/src/hooks/useSubStep/index.ts index 43fc3061d968..c89bb5fd5735 100644 --- a/src/hooks/useSubStep/index.ts +++ b/src/hooks/useSubStep/index.ts @@ -22,24 +22,27 @@ export default function useSubStep({bodyContent, on setScreenIndex(prevScreenIndex); }, [screenIndex]); - const nextScreen = useCallback(() => { - if (isEditing.current) { - isEditing.current = false; + const nextScreen = useCallback( + (finishData?: unknown) => { + if (isEditing.current) { + isEditing.current = false; - setScreenIndex(bodyContent.length - 1); + setScreenIndex(bodyContent.length - 1); - return; - } + return; + } - const nextScreenIndex = screenIndex + 1; + const nextScreenIndex = screenIndex + 1; - if (nextScreenIndex === bodyContent.length) { - onFinished(); - } else { - onNextSubStep(); - setScreenIndex(nextScreenIndex); - } - }, [screenIndex, bodyContent.length, onFinished, onNextSubStep]); + if (nextScreenIndex === bodyContent.length) { + onFinished(finishData); + } else { + onNextSubStep(); + setScreenIndex(nextScreenIndex); + } + }, + [screenIndex, bodyContent.length, onFinished, onNextSubStep], + ); const moveTo = useCallback((step: number) => { isEditing.current = true; diff --git a/src/hooks/useSubStep/types.ts b/src/hooks/useSubStep/types.ts index f3b7939502a8..603534e68c15 100644 --- a/src/hooks/useSubStep/types.ts +++ b/src/hooks/useSubStep/types.ts @@ -5,7 +5,7 @@ type SubStepProps = { isEditing: boolean; /** continues to next sub step */ - onNext: () => void; + onNext: (data?: unknown) => void; /** moves user to passed sub step */ onMove: (step: number) => void; @@ -25,7 +25,7 @@ type UseSubStep = { onNextSubStep?: () => void; /** called on last sub step */ - onFinished: () => void; + onFinished: (data?: unknown) => void; /** index of initial sub step to display */ startFrom?: number; diff --git a/src/pages/ReimbursementAccount/BankInfo/BankInfo.tsx b/src/pages/ReimbursementAccount/BankInfo/BankInfo.tsx index 3e45b14253f3..888ad24ba2be 100644 --- a/src/pages/ReimbursementAccount/BankInfo/BankInfo.tsx +++ b/src/pages/ReimbursementAccount/BankInfo/BankInfo.tsx @@ -1,7 +1,6 @@ import React, {useCallback, useEffect, useMemo} from 'react'; import {View} from 'react-native'; -import type {OnyxEntry} from 'react-native-onyx'; -import {withOnyx} from 'react-native-onyx'; +import {useOnyx} from 'react-native-onyx'; import HeaderWithBackButton from '@components/HeaderWithBackButton'; import InteractiveStepSubHeader from '@components/InteractiveStepSubHeader'; import ScreenWrapper from '@components/ScreenWrapper'; @@ -17,23 +16,10 @@ import CONST from '@src/CONST'; import ONYXKEYS from '@src/ONYXKEYS'; import type {ReimbursementAccountForm} from '@src/types/form'; import INPUT_IDS from '@src/types/form/ReimbursementAccountForm'; -import type {ReimbursementAccount} from '@src/types/onyx'; -import Confirmation from './substeps/Confirmation'; import Manual from './substeps/Manual'; import Plaid from './substeps/Plaid'; -type BankInfoOnyxProps = { - /** Plaid SDK token to use to initialize the widget */ - plaidLinkToken: OnyxEntry; - - /** Reimbursement account from ONYX */ - reimbursementAccount: OnyxEntry; - - /** The draft values of the bank account being setup */ - reimbursementAccountDraft: OnyxEntry; -}; - -type BankInfoProps = BankInfoOnyxProps & { +type BankInfoProps = { /** Goes to the previous step */ onBackButtonPress: () => void; @@ -42,11 +28,14 @@ type BankInfoProps = BankInfoOnyxProps & { }; const BANK_INFO_STEP_KEYS = INPUT_IDS.BANK_INFO_STEP; -const manualSubsteps: Array> = [Manual, Confirmation]; -const plaidSubsteps: Array> = [Plaid, Confirmation]; +const manualSubsteps: Array> = [Manual]; +const plaidSubsteps: Array> = [Plaid]; const receivedRedirectURI = getPlaidOAuthReceivedRedirectURI(); -function BankInfo({reimbursementAccount, reimbursementAccountDraft, plaidLinkToken, onBackButtonPress, policyID}: BankInfoProps) { +function BankInfo({onBackButtonPress, policyID}: BankInfoProps) { + const [reimbursementAccount] = useOnyx(ONYXKEYS.REIMBURSEMENT_ACCOUNT); + const [reimbursementAccountDraft] = useOnyx(ONYXKEYS.FORMS.REIMBURSEMENT_ACCOUNT_FORM_DRAFT); + const [plaidLinkToken] = useOnyx(ONYXKEYS.PLAID_LINK_TOKEN); const {translate} = useLocalize(); const styles = useThemeStyles(); @@ -61,37 +50,41 @@ function BankInfo({reimbursementAccount, reimbursementAccountDraft, plaidLinkTok } const bankAccountID = Number(reimbursementAccount?.achData?.bankAccountID ?? '-1'); - const submit = useCallback(() => { - if (setupType === CONST.BANK_ACCOUNT.SETUP_TYPE.MANUAL) { - BankAccounts.connectBankAccountManually( - bankAccountID, - { - [BANK_INFO_STEP_KEYS.ROUTING_NUMBER]: values[BANK_INFO_STEP_KEYS.ROUTING_NUMBER] ?? '', - [BANK_INFO_STEP_KEYS.ACCOUNT_NUMBER]: values[BANK_INFO_STEP_KEYS.ACCOUNT_NUMBER] ?? '', - [BANK_INFO_STEP_KEYS.BANK_NAME]: values[BANK_INFO_STEP_KEYS.BANK_NAME] ?? '', - [BANK_INFO_STEP_KEYS.PLAID_ACCOUNT_ID]: values[BANK_INFO_STEP_KEYS.PLAID_ACCOUNT_ID] ?? '', - [BANK_INFO_STEP_KEYS.PLAID_ACCESS_TOKEN]: values[BANK_INFO_STEP_KEYS.PLAID_ACCESS_TOKEN] ?? '', - [BANK_INFO_STEP_KEYS.PLAID_MASK]: values[BANK_INFO_STEP_KEYS.PLAID_MASK] ?? '', - [BANK_INFO_STEP_KEYS.IS_SAVINGS]: values[BANK_INFO_STEP_KEYS.IS_SAVINGS] ?? false, - }, - policyID, - ); - } else if (setupType === CONST.BANK_ACCOUNT.SETUP_TYPE.PLAID) { - BankAccounts.connectBankAccountWithPlaid( - bankAccountID, - { - [BANK_INFO_STEP_KEYS.ROUTING_NUMBER]: values[BANK_INFO_STEP_KEYS.ROUTING_NUMBER] ?? '', - [BANK_INFO_STEP_KEYS.ACCOUNT_NUMBER]: values[BANK_INFO_STEP_KEYS.ACCOUNT_NUMBER] ?? '', - [BANK_INFO_STEP_KEYS.BANK_NAME]: values[BANK_INFO_STEP_KEYS.BANK_NAME] ?? '', - [BANK_INFO_STEP_KEYS.PLAID_ACCOUNT_ID]: values[BANK_INFO_STEP_KEYS.PLAID_ACCOUNT_ID] ?? '', - [BANK_INFO_STEP_KEYS.PLAID_ACCESS_TOKEN]: values[BANK_INFO_STEP_KEYS.PLAID_ACCESS_TOKEN] ?? '', - [BANK_INFO_STEP_KEYS.PLAID_MASK]: values[BANK_INFO_STEP_KEYS.PLAID_MASK] ?? '', - [BANK_INFO_STEP_KEYS.IS_SAVINGS]: values[BANK_INFO_STEP_KEYS.IS_SAVINGS] ?? false, - }, - policyID, - ); - } - }, [setupType, values, bankAccountID, policyID]); + const submit = useCallback( + (submitData: unknown) => { + const data = submitData as ReimbursementAccountForm; + if (setupType === CONST.BANK_ACCOUNT.SETUP_TYPE.MANUAL) { + BankAccounts.connectBankAccountManually( + bankAccountID, + { + [BANK_INFO_STEP_KEYS.ROUTING_NUMBER]: data[BANK_INFO_STEP_KEYS.ROUTING_NUMBER] ?? '', + [BANK_INFO_STEP_KEYS.ACCOUNT_NUMBER]: data[BANK_INFO_STEP_KEYS.ACCOUNT_NUMBER] ?? '', + [BANK_INFO_STEP_KEYS.BANK_NAME]: data[BANK_INFO_STEP_KEYS.BANK_NAME] ?? '', + [BANK_INFO_STEP_KEYS.PLAID_ACCOUNT_ID]: data[BANK_INFO_STEP_KEYS.PLAID_ACCOUNT_ID] ?? '', + [BANK_INFO_STEP_KEYS.PLAID_ACCESS_TOKEN]: data[BANK_INFO_STEP_KEYS.PLAID_ACCESS_TOKEN] ?? '', + [BANK_INFO_STEP_KEYS.PLAID_MASK]: data[BANK_INFO_STEP_KEYS.PLAID_MASK] ?? '', + [BANK_INFO_STEP_KEYS.IS_SAVINGS]: data[BANK_INFO_STEP_KEYS.IS_SAVINGS] ?? false, + }, + policyID, + ); + } else if (setupType === CONST.BANK_ACCOUNT.SETUP_TYPE.PLAID) { + BankAccounts.connectBankAccountWithPlaid( + bankAccountID, + { + [BANK_INFO_STEP_KEYS.ROUTING_NUMBER]: data[BANK_INFO_STEP_KEYS.ROUTING_NUMBER] ?? '', + [BANK_INFO_STEP_KEYS.ACCOUNT_NUMBER]: data[BANK_INFO_STEP_KEYS.ACCOUNT_NUMBER] ?? '', + [BANK_INFO_STEP_KEYS.BANK_NAME]: data[BANK_INFO_STEP_KEYS.BANK_NAME] ?? '', + [BANK_INFO_STEP_KEYS.PLAID_ACCOUNT_ID]: data[BANK_INFO_STEP_KEYS.PLAID_ACCOUNT_ID] ?? '', + [BANK_INFO_STEP_KEYS.PLAID_ACCESS_TOKEN]: data[BANK_INFO_STEP_KEYS.PLAID_ACCESS_TOKEN] ?? '', + [BANK_INFO_STEP_KEYS.PLAID_MASK]: data[BANK_INFO_STEP_KEYS.PLAID_MASK] ?? '', + [BANK_INFO_STEP_KEYS.IS_SAVINGS]: data[BANK_INFO_STEP_KEYS.IS_SAVINGS] ?? false, + }, + policyID, + ); + } + }, + [setupType, bankAccountID, policyID], + ); const bodyContent = setupType === CONST.BANK_ACCOUNT.SETUP_TYPE.PLAID ? plaidSubsteps : manualSubsteps; const {componentToRender: SubStep, isEditing, screenIndex, nextScreen, prevScreen, moveTo} = useSubStep({bodyContent, startFrom: 0, onFinished: submit}); @@ -103,12 +96,10 @@ function BankInfo({reimbursementAccount, reimbursementAccountDraft, plaidLinkTok if (redirectedFromPlaidToManual) { return; } - if (setupType === CONST.BANK_ACCOUNT.SETUP_TYPE.MANUAL && values.bankName !== '' && !redirectedFromPlaidToManual) { setRedirectedFromPlaidToManual(true); - moveTo(0); } - }, [moveTo, redirectedFromPlaidToManual, setupType, values]); + }, [redirectedFromPlaidToManual, setupType, values]); const handleBackButtonPress = () => { if (screenIndex === 0) { @@ -161,15 +152,4 @@ function BankInfo({reimbursementAccount, reimbursementAccountDraft, plaidLinkTok BankInfo.displayName = 'BankInfo'; -export default withOnyx({ - // @ts-expect-error: ONYXKEYS.REIMBURSEMENT_ACCOUNT is conflicting with ONYXKEYS.FORMS.REIMBURSEMENT_ACCOUNT_FORM - reimbursementAccount: { - key: ONYXKEYS.REIMBURSEMENT_ACCOUNT, - }, - reimbursementAccountDraft: { - key: ONYXKEYS.FORMS.REIMBURSEMENT_ACCOUNT_FORM_DRAFT, - }, - plaidLinkToken: { - key: ONYXKEYS.PLAID_LINK_TOKEN, - }, -})(BankInfo); +export default BankInfo; diff --git a/src/pages/ReimbursementAccount/BankInfo/substeps/Confirmation.tsx b/src/pages/ReimbursementAccount/BankInfo/substeps/Confirmation.tsx deleted file mode 100644 index fb72054303ae..000000000000 --- a/src/pages/ReimbursementAccount/BankInfo/substeps/Confirmation.tsx +++ /dev/null @@ -1,119 +0,0 @@ -import React, {useMemo} from 'react'; -import {View} from 'react-native'; -import type {OnyxEntry} from 'react-native-onyx'; -import {withOnyx} from 'react-native-onyx'; -import Button from '@components/Button'; -import DotIndicatorMessage from '@components/DotIndicatorMessage'; -import MenuItemWithTopDescription from '@components/MenuItemWithTopDescription'; -import SafeAreaConsumer from '@components/SafeAreaConsumer'; -import ScrollView from '@components/ScrollView'; -import Text from '@components/Text'; -import useLocalize from '@hooks/useLocalize'; -import useNetwork from '@hooks/useNetwork'; -import type {SubStepProps} from '@hooks/useSubStep/types'; -import useThemeStyles from '@hooks/useThemeStyles'; -import * as ErrorUtils from '@libs/ErrorUtils'; -import getSubstepValues from '@pages/ReimbursementAccount/utils/getSubstepValues'; -import CONST from '@src/CONST'; -import ONYXKEYS from '@src/ONYXKEYS'; -import type {ReimbursementAccountForm} from '@src/types/form'; -import INPUT_IDS from '@src/types/form/ReimbursementAccountForm'; -import type {ReimbursementAccount} from '@src/types/onyx'; - -type ConfirmationOnyxProps = { - /** Reimbursement account from ONYX */ - reimbursementAccount: OnyxEntry; - - /** The draft values of the bank account being setup */ - reimbursementAccountDraft: OnyxEntry; -}; - -type ConfirmationProps = ConfirmationOnyxProps & SubStepProps; - -const BANK_INFO_STEP_KEYS = INPUT_IDS.BANK_INFO_STEP; -const BANK_INFO_STEP_INDEXES = CONST.REIMBURSEMENT_ACCOUNT.SUBSTEP_INDEX.BANK_ACCOUNT; - -function Confirmation({reimbursementAccount, reimbursementAccountDraft, onNext, onMove}: ConfirmationProps) { - const {translate} = useLocalize(); - const styles = useThemeStyles(); - const {isOffline} = useNetwork(); - - const isLoading = reimbursementAccount?.isLoading ?? false; - const setupType = reimbursementAccount?.achData?.subStep ?? ''; - const bankAccountID = Number(reimbursementAccount?.achData?.bankAccountID ?? '-1'); - const values = useMemo(() => getSubstepValues(BANK_INFO_STEP_KEYS, reimbursementAccountDraft, reimbursementAccount ?? {}), [reimbursementAccount, reimbursementAccountDraft]); - const error = ErrorUtils.getLatestErrorMessage(reimbursementAccount ?? {}); - - const handleModifyAccountNumbers = () => { - onMove(BANK_INFO_STEP_INDEXES.ACCOUNT_NUMBERS); - }; - - return ( - - {({safeAreaPaddingBottomStyle}) => ( - - {translate('bankAccount.letsDoubleCheck')} - {translate('bankAccount.thisBankAccount')} - {setupType === CONST.BANK_ACCOUNT.SUBSTEP.MANUAL && ( - - - - - - )} - {setupType === CONST.BANK_ACCOUNT.SUBSTEP.PLAID && ( - - )} - - {error && error.length > 0 && ( - - )} -