From d773367de07c29e4d29e3399d8c110e97c535a48 Mon Sep 17 00:00:00 2001 From: Rajat Parashar Date: Sun, 8 Sep 2024 15:27:18 +0530 Subject: [PATCH 01/14] Remove Confirmation from Plaidf bank Account flow --- src/pages/ReimbursementAccount/BankInfo/BankInfo.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/ReimbursementAccount/BankInfo/BankInfo.tsx b/src/pages/ReimbursementAccount/BankInfo/BankInfo.tsx index 3e45b14253f3..6ebaebeefde1 100644 --- a/src/pages/ReimbursementAccount/BankInfo/BankInfo.tsx +++ b/src/pages/ReimbursementAccount/BankInfo/BankInfo.tsx @@ -43,7 +43,7 @@ type BankInfoProps = BankInfoOnyxProps & { const BANK_INFO_STEP_KEYS = INPUT_IDS.BANK_INFO_STEP; const manualSubsteps: Array> = [Manual, Confirmation]; -const plaidSubsteps: Array> = [Plaid, Confirmation]; +const plaidSubsteps: Array> = [Plaid]; const receivedRedirectURI = getPlaidOAuthReceivedRedirectURI(); function BankInfo({reimbursementAccount, reimbursementAccountDraft, plaidLinkToken, onBackButtonPress, policyID}: BankInfoProps) { From b1d7208713cad9ab65ab5e923ddcd05a68e4c817 Mon Sep 17 00:00:00 2001 From: Rajat Parashar Date: Sun, 8 Sep 2024 15:57:11 +0530 Subject: [PATCH 02/14] Remove the default value from the Card Name step --- .../workspace/expensifyCard/issueNew/CardNameStep.tsx | 7 +------ 1 file changed, 1 insertion(+), 6 deletions(-) diff --git a/src/pages/workspace/expensifyCard/issueNew/CardNameStep.tsx b/src/pages/workspace/expensifyCard/issueNew/CardNameStep.tsx index f90635d96f83..35b8d0e9959c 100644 --- a/src/pages/workspace/expensifyCard/issueNew/CardNameStep.tsx +++ b/src/pages/workspace/expensifyCard/issueNew/CardNameStep.tsx @@ -12,7 +12,6 @@ import TextInput from '@components/TextInput'; import useAutoFocusInput from '@hooks/useAutoFocusInput'; import useLocalize from '@hooks/useLocalize'; import useThemeStyles from '@hooks/useThemeStyles'; -import * as PersonalDetailsUtils from '@libs/PersonalDetailsUtils'; import * as ValidationUtils from '@libs/ValidationUtils'; import * as Card from '@userActions/Card'; import CONST from '@src/CONST'; @@ -26,10 +25,6 @@ function CardNameStep() { const [issueNewCard] = useOnyx(ONYXKEYS.ISSUE_NEW_EXPENSIFY_CARD); const isEditing = issueNewCard?.isEditing; - const data = issueNewCard?.data; - - const userName = PersonalDetailsUtils.getUserNameByEmail(data?.assigneeEmail ?? '', 'firstName'); - const defaultCardTitle = `${userName}'s Card`; const validate = useCallback( (values: FormOnyxValues): FormInputErrors => { @@ -93,7 +88,7 @@ function CardNameStep() { hint={translate('workspace.card.issueNewCard.giveItNameInstruction')} aria-label={translate('workspace.card.issueNewCard.cardName')} role={CONST.ROLE.PRESENTATION} - defaultValue={issueNewCard?.data?.cardTitle ?? defaultCardTitle} + defaultValue={issueNewCard?.data?.cardTitle} containerStyles={[styles.mb6]} ref={inputCallbackRef} /> From ecec39de0e12a1b73bb8cda6f9d99d58f6197811 Mon Sep 17 00:00:00 2001 From: Rajat Parashar Date: Sun, 8 Sep 2024 16:00:29 +0530 Subject: [PATCH 03/14] Remove Manual confirmation step as well --- src/pages/ReimbursementAccount/BankInfo/BankInfo.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/ReimbursementAccount/BankInfo/BankInfo.tsx b/src/pages/ReimbursementAccount/BankInfo/BankInfo.tsx index 6ebaebeefde1..d77567d54c0e 100644 --- a/src/pages/ReimbursementAccount/BankInfo/BankInfo.tsx +++ b/src/pages/ReimbursementAccount/BankInfo/BankInfo.tsx @@ -42,7 +42,7 @@ type BankInfoProps = BankInfoOnyxProps & { }; const BANK_INFO_STEP_KEYS = INPUT_IDS.BANK_INFO_STEP; -const manualSubsteps: Array> = [Manual, Confirmation]; +const manualSubsteps: Array> = [Manual]; const plaidSubsteps: Array> = [Plaid]; const receivedRedirectURI = getPlaidOAuthReceivedRedirectURI(); From 88cb276d8df9e22d1dc1b1fdec6d98e486fee641 Mon Sep 17 00:00:00 2001 From: Rajat Parashar Date: Sun, 8 Sep 2024 16:11:25 +0530 Subject: [PATCH 04/14] cleanup --- src/pages/ReimbursementAccount/BankInfo/BankInfo.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/src/pages/ReimbursementAccount/BankInfo/BankInfo.tsx b/src/pages/ReimbursementAccount/BankInfo/BankInfo.tsx index d77567d54c0e..917422863351 100644 --- a/src/pages/ReimbursementAccount/BankInfo/BankInfo.tsx +++ b/src/pages/ReimbursementAccount/BankInfo/BankInfo.tsx @@ -18,7 +18,6 @@ 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'; From f176383346bb03f4375c13eb2984ad0a26302ad8 Mon Sep 17 00:00:00 2001 From: Rajat Parashar Date: Mon, 9 Sep 2024 15:50:43 +0530 Subject: [PATCH 05/14] Fix the Account selecton --- .../BankInfo/substeps/Plaid.tsx | 40 +++++++++---------- 1 file changed, 20 insertions(+), 20 deletions(-) diff --git a/src/pages/ReimbursementAccount/BankInfo/substeps/Plaid.tsx b/src/pages/ReimbursementAccount/BankInfo/substeps/Plaid.tsx index e9d14b45a8ed..6106be779d61 100644 --- a/src/pages/ReimbursementAccount/BankInfo/substeps/Plaid.tsx +++ b/src/pages/ReimbursementAccount/BankInfo/substeps/Plaid.tsx @@ -36,24 +36,26 @@ function Plaid({reimbursementAccount, reimbursementAccountDraft, onNext, plaidDa const isFocused = useIsFocused(); const selectedPlaidAccountID = reimbursementAccountDraft?.[BANK_INFO_STEP_KEYS.PLAID_ACCOUNT_ID] ?? ''; - const handleNextPress = useCallback(() => { - const selectedPlaidBankAccount = (plaidData?.bankAccounts ?? []).find( - (account) => account.plaidAccountID === reimbursementAccountDraft?.[BANK_INFO_STEP_KEYS.PLAID_ACCOUNT_ID] ?? null, - ); + const selectPlaidAccount = useCallback( + (plaidAccountID: string) => { + ReimbursementAccountActions.updateReimbursementAccountDraft({plaidAccountID}); - const bankAccountData = { - [BANK_INFO_STEP_KEYS.ROUTING_NUMBER]: selectedPlaidBankAccount?.[BANK_INFO_STEP_KEYS.ROUTING_NUMBER], - [BANK_INFO_STEP_KEYS.ACCOUNT_NUMBER]: selectedPlaidBankAccount?.[BANK_INFO_STEP_KEYS.ACCOUNT_NUMBER], - [BANK_INFO_STEP_KEYS.PLAID_MASK]: selectedPlaidBankAccount?.mask, - [BANK_INFO_STEP_KEYS.IS_SAVINGS]: selectedPlaidBankAccount?.[BANK_INFO_STEP_KEYS.IS_SAVINGS], - [BANK_INFO_STEP_KEYS.BANK_NAME]: plaidData?.[BANK_INFO_STEP_KEYS.BANK_NAME] ?? '', - [BANK_INFO_STEP_KEYS.PLAID_ACCOUNT_ID]: selectedPlaidBankAccount?.[BANK_INFO_STEP_KEYS.PLAID_ACCOUNT_ID], - [BANK_INFO_STEP_KEYS.PLAID_ACCESS_TOKEN]: plaidData?.[BANK_INFO_STEP_KEYS.PLAID_ACCESS_TOKEN] ?? '', - }; + const selectedPlaidBankAccount = (plaidData?.bankAccounts ?? []).find((account) => account.plaidAccountID === plaidAccountID); - ReimbursementAccountActions.updateReimbursementAccountDraft(bankAccountData); - onNext(); - }, [plaidData, reimbursementAccountDraft, onNext]); + const bankAccountData = { + [BANK_INFO_STEP_KEYS.ROUTING_NUMBER]: selectedPlaidBankAccount?.[BANK_INFO_STEP_KEYS.ROUTING_NUMBER], + [BANK_INFO_STEP_KEYS.ACCOUNT_NUMBER]: selectedPlaidBankAccount?.[BANK_INFO_STEP_KEYS.ACCOUNT_NUMBER], + [BANK_INFO_STEP_KEYS.PLAID_MASK]: selectedPlaidBankAccount?.mask, + [BANK_INFO_STEP_KEYS.IS_SAVINGS]: selectedPlaidBankAccount?.[BANK_INFO_STEP_KEYS.IS_SAVINGS], + [BANK_INFO_STEP_KEYS.BANK_NAME]: plaidData?.[BANK_INFO_STEP_KEYS.BANK_NAME] ?? '', + [BANK_INFO_STEP_KEYS.PLAID_ACCOUNT_ID]: selectedPlaidBankAccount?.[BANK_INFO_STEP_KEYS.PLAID_ACCOUNT_ID], + [BANK_INFO_STEP_KEYS.PLAID_ACCESS_TOKEN]: plaidData?.[BANK_INFO_STEP_KEYS.PLAID_ACCESS_TOKEN] ?? '', + }; + + ReimbursementAccountActions.updateReimbursementAccountDraft(bankAccountData); + }, + [plaidData], + ); const bankAccountID = Number(reimbursementAccount?.achData?.bankAccountID ?? '-1'); @@ -69,7 +71,7 @@ function Plaid({reimbursementAccount, reimbursementAccountDraft, onNext, plaidDa { - ReimbursementAccountActions.updateReimbursementAccountDraft({plaidAccountID}); - }} + onSelect={selectPlaidAccount} plaidData={plaidData} onExitPlaid={() => { BankAccounts.setBankAccountSubStep(null); From 42d41426562aa5e7fb6f945943ac3174305e1f86 Mon Sep 17 00:00:00 2001 From: Rajat Parashar Date: Tue, 10 Sep 2024 22:03:20 +0530 Subject: [PATCH 06/14] Remove substeps --- .../BankInfo/BankInfo.tsx | 58 +++++++++---------- 1 file changed, 28 insertions(+), 30 deletions(-) diff --git a/src/pages/ReimbursementAccount/BankInfo/BankInfo.tsx b/src/pages/ReimbursementAccount/BankInfo/BankInfo.tsx index 917422863351..1bf4bfff217b 100644 --- a/src/pages/ReimbursementAccount/BankInfo/BankInfo.tsx +++ b/src/pages/ReimbursementAccount/BankInfo/BankInfo.tsx @@ -6,8 +6,8 @@ import HeaderWithBackButton from '@components/HeaderWithBackButton'; import InteractiveStepSubHeader from '@components/InteractiveStepSubHeader'; import ScreenWrapper from '@components/ScreenWrapper'; import useLocalize from '@hooks/useLocalize'; -import useSubStep from '@hooks/useSubStep'; -import type {SubStepProps} from '@hooks/useSubStep/types'; +// import useSubStep from '@hooks/useSubStep'; +// import type {SubStepProps} from '@hooks/useSubStep/types'; import useThemeStyles from '@hooks/useThemeStyles'; import getPlaidOAuthReceivedRedirectURI from '@libs/getPlaidOAuthReceivedRedirectURI'; import getSubstepValues from '@pages/ReimbursementAccount/utils/getSubstepValues'; @@ -41,8 +41,8 @@ type BankInfoProps = BankInfoOnyxProps & { }; const BANK_INFO_STEP_KEYS = INPUT_IDS.BANK_INFO_STEP; -const manualSubsteps: Array> = [Manual]; -const plaidSubsteps: Array> = [Plaid]; +// const manualSubsteps: Array> = [Manual]; +// const plaidSubsteps: Array> = [Plaid]; const receivedRedirectURI = getPlaidOAuthReceivedRedirectURI(); function BankInfo({reimbursementAccount, reimbursementAccountDraft, plaidLinkToken, onBackButtonPress, policyID}: BankInfoProps) { @@ -92,8 +92,10 @@ function BankInfo({reimbursementAccount, reimbursementAccountDraft, plaidLinkTok } }, [setupType, values, 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}); + // 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}); + + const SubStep = setupType === CONST.BANK_ACCOUNT.SETUP_TYPE.PLAID ? Plaid : Manual; // Some services user connects to via Plaid return dummy account numbers and routing numbers e.g. Chase // In this case we need to redirect user to manual flow to enter real account number and routing number @@ -102,33 +104,29 @@ function BankInfo({reimbursementAccount, reimbursementAccountDraft, plaidLinkTok if (redirectedFromPlaidToManual) { return; } - if (setupType === CONST.BANK_ACCOUNT.SETUP_TYPE.MANUAL && values.bankName !== '' && !redirectedFromPlaidToManual) { setRedirectedFromPlaidToManual(true); - moveTo(0); + // moveTo(0); + BankAccounts.setBankAccountSubStep(CONST.BANK_ACCOUNT.SETUP_TYPE.MANUAL); } - }, [moveTo, redirectedFromPlaidToManual, setupType, values]); + }, [redirectedFromPlaidToManual, setupType, values]); const handleBackButtonPress = () => { - if (screenIndex === 0) { - if (bankAccountID) { - onBackButtonPress(); - } else { - const bankAccountData = { - [BANK_INFO_STEP_KEYS.ROUTING_NUMBER]: '', - [BANK_INFO_STEP_KEYS.ACCOUNT_NUMBER]: '', - [BANK_INFO_STEP_KEYS.PLAID_MASK]: '', - [BANK_INFO_STEP_KEYS.IS_SAVINGS]: false, - [BANK_INFO_STEP_KEYS.BANK_NAME]: '', - [BANK_INFO_STEP_KEYS.PLAID_ACCOUNT_ID]: '', - [BANK_INFO_STEP_KEYS.PLAID_ACCESS_TOKEN]: '', - }; - ReimbursementAccountUtils.updateReimbursementAccountDraft(bankAccountData); - ReimbursementAccountUtils.hideBankAccountErrors(); - BankAccounts.setBankAccountSubStep(null); - } + if (bankAccountID) { + onBackButtonPress(); } else { - prevScreen(); + const bankAccountData = { + [BANK_INFO_STEP_KEYS.ROUTING_NUMBER]: '', + [BANK_INFO_STEP_KEYS.ACCOUNT_NUMBER]: '', + [BANK_INFO_STEP_KEYS.PLAID_MASK]: '', + [BANK_INFO_STEP_KEYS.IS_SAVINGS]: false, + [BANK_INFO_STEP_KEYS.BANK_NAME]: '', + [BANK_INFO_STEP_KEYS.PLAID_ACCOUNT_ID]: '', + [BANK_INFO_STEP_KEYS.PLAID_ACCESS_TOKEN]: '', + }; + ReimbursementAccountUtils.updateReimbursementAccountDraft(bankAccountData); + ReimbursementAccountUtils.hideBankAccountErrors(); + BankAccounts.setBankAccountSubStep(null); } }; @@ -150,9 +148,9 @@ function BankInfo({reimbursementAccount, reimbursementAccountDraft, plaidLinkTok /> {}} /> ); From b13c6e3f6ffbe4cbeb9ba2c3fffe6f97ee450439 Mon Sep 17 00:00:00 2001 From: Rajat Parashar Date: Mon, 16 Sep 2024 19:14:59 +0530 Subject: [PATCH 07/14] Fixes --- src/hooks/useStepFormSubmit.ts | 2 + src/hooks/useSubStep/index.ts | 31 +++-- src/hooks/useSubStep/types.ts | 4 +- .../BankInfo/BankInfo.tsx | 123 +++++++++--------- .../BankInfo/substeps/Manual.tsx | 8 +- .../BankInfo/substeps/Plaid.tsx | 40 +++--- 6 files changed, 108 insertions(+), 100 deletions(-) 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..cb3fc9a50a74 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( + (data: 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(data); + } 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 1bf4bfff217b..23e4ef97aba7 100644 --- a/src/pages/ReimbursementAccount/BankInfo/BankInfo.tsx +++ b/src/pages/ReimbursementAccount/BankInfo/BankInfo.tsx @@ -6,8 +6,8 @@ import HeaderWithBackButton from '@components/HeaderWithBackButton'; import InteractiveStepSubHeader from '@components/InteractiveStepSubHeader'; import ScreenWrapper from '@components/ScreenWrapper'; import useLocalize from '@hooks/useLocalize'; -// import useSubStep from '@hooks/useSubStep'; -// import type {SubStepProps} from '@hooks/useSubStep/types'; +import useSubStep from '@hooks/useSubStep'; +import type {SubStepProps} from '@hooks/useSubStep/types'; import useThemeStyles from '@hooks/useThemeStyles'; import getPlaidOAuthReceivedRedirectURI from '@libs/getPlaidOAuthReceivedRedirectURI'; import getSubstepValues from '@pages/ReimbursementAccount/utils/getSubstepValues'; @@ -41,8 +41,8 @@ type BankInfoProps = BankInfoOnyxProps & { }; const BANK_INFO_STEP_KEYS = INPUT_IDS.BANK_INFO_STEP; -// const manualSubsteps: Array> = [Manual]; -// const plaidSubsteps: Array> = [Plaid]; +const manualSubsteps: Array> = [Manual]; +const plaidSubsteps: Array> = [Plaid]; const receivedRedirectURI = getPlaidOAuthReceivedRedirectURI(); function BankInfo({reimbursementAccount, reimbursementAccountDraft, plaidLinkToken, onBackButtonPress, policyID}: BankInfoProps) { @@ -60,42 +60,44 @@ 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 bodyContent = setupType === CONST.BANK_ACCOUNT.SETUP_TYPE.PLAID ? plaidSubsteps : manualSubsteps; - // const {componentToRender: SubStep, isEditing, screenIndex, nextScreen, prevScreen, moveTo} = useSubStep({bodyContent, startFrom: 0, onFinished: submit}); + 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 SubStep = setupType === CONST.BANK_ACCOUNT.SETUP_TYPE.PLAID ? Plaid : Manual; + 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}); // Some services user connects to via Plaid return dummy account numbers and routing numbers e.g. Chase // In this case we need to redirect user to manual flow to enter real account number and routing number @@ -106,27 +108,30 @@ function BankInfo({reimbursementAccount, reimbursementAccountDraft, plaidLinkTok } if (setupType === CONST.BANK_ACCOUNT.SETUP_TYPE.MANUAL && values.bankName !== '' && !redirectedFromPlaidToManual) { setRedirectedFromPlaidToManual(true); - // moveTo(0); - BankAccounts.setBankAccountSubStep(CONST.BANK_ACCOUNT.SETUP_TYPE.MANUAL); + moveTo(0); } - }, [redirectedFromPlaidToManual, setupType, values]); + }, [moveTo, redirectedFromPlaidToManual, setupType, values]); const handleBackButtonPress = () => { - if (bankAccountID) { - onBackButtonPress(); + if (screenIndex === 0) { + if (bankAccountID) { + onBackButtonPress(); + } else { + const bankAccountData = { + [BANK_INFO_STEP_KEYS.ROUTING_NUMBER]: '', + [BANK_INFO_STEP_KEYS.ACCOUNT_NUMBER]: '', + [BANK_INFO_STEP_KEYS.PLAID_MASK]: '', + [BANK_INFO_STEP_KEYS.IS_SAVINGS]: false, + [BANK_INFO_STEP_KEYS.BANK_NAME]: '', + [BANK_INFO_STEP_KEYS.PLAID_ACCOUNT_ID]: '', + [BANK_INFO_STEP_KEYS.PLAID_ACCESS_TOKEN]: '', + }; + ReimbursementAccountUtils.updateReimbursementAccountDraft(bankAccountData); + ReimbursementAccountUtils.hideBankAccountErrors(); + BankAccounts.setBankAccountSubStep(null); + } } else { - const bankAccountData = { - [BANK_INFO_STEP_KEYS.ROUTING_NUMBER]: '', - [BANK_INFO_STEP_KEYS.ACCOUNT_NUMBER]: '', - [BANK_INFO_STEP_KEYS.PLAID_MASK]: '', - [BANK_INFO_STEP_KEYS.IS_SAVINGS]: false, - [BANK_INFO_STEP_KEYS.BANK_NAME]: '', - [BANK_INFO_STEP_KEYS.PLAID_ACCOUNT_ID]: '', - [BANK_INFO_STEP_KEYS.PLAID_ACCESS_TOKEN]: '', - }; - ReimbursementAccountUtils.updateReimbursementAccountDraft(bankAccountData); - ReimbursementAccountUtils.hideBankAccountErrors(); - BankAccounts.setBankAccountSubStep(null); + prevScreen(); } }; @@ -148,9 +153,9 @@ function BankInfo({reimbursementAccount, reimbursementAccountDraft, plaidLinkTok /> {}} + isEditing={isEditing} + onNext={nextScreen} + onMove={moveTo} /> ); diff --git a/src/pages/ReimbursementAccount/BankInfo/substeps/Manual.tsx b/src/pages/ReimbursementAccount/BankInfo/substeps/Manual.tsx index 1111bd8fcc47..262bb82a2410 100644 --- a/src/pages/ReimbursementAccount/BankInfo/substeps/Manual.tsx +++ b/src/pages/ReimbursementAccount/BankInfo/substeps/Manual.tsx @@ -61,7 +61,7 @@ function Manual({reimbursementAccount, onNext}: ManualProps) { [translate], ); - const shouldDisableInputs = !!(reimbursementAccount?.achData?.bankAccountID ?? ''); + const hasbankAccountData = !!(reimbursementAccount?.achData?.bankAccountID ?? ''); const handleSubmit = useReimbursementAccountStepFormSubmit({ fieldIds: STEP_FIELDS, @@ -89,9 +89,8 @@ function Manual({reimbursementAccount, onNext}: ManualProps) { role={CONST.ROLE.PRESENTATION} defaultValue={defaultValues[BANK_INFO_STEP_KEYS.ROUTING_NUMBER]} inputMode={CONST.INPUT_MODE.NUMERIC} - disabled={shouldDisableInputs} shouldSaveDraft - shouldUseDefaultValue={shouldDisableInputs} + shouldUseDefaultValue={hasbankAccountData} /> ); diff --git a/src/pages/ReimbursementAccount/BankInfo/substeps/Plaid.tsx b/src/pages/ReimbursementAccount/BankInfo/substeps/Plaid.tsx index 6106be779d61..057219d6c2de 100644 --- a/src/pages/ReimbursementAccount/BankInfo/substeps/Plaid.tsx +++ b/src/pages/ReimbursementAccount/BankInfo/substeps/Plaid.tsx @@ -36,26 +36,24 @@ function Plaid({reimbursementAccount, reimbursementAccountDraft, onNext, plaidDa const isFocused = useIsFocused(); const selectedPlaidAccountID = reimbursementAccountDraft?.[BANK_INFO_STEP_KEYS.PLAID_ACCOUNT_ID] ?? ''; - const selectPlaidAccount = useCallback( - (plaidAccountID: string) => { - ReimbursementAccountActions.updateReimbursementAccountDraft({plaidAccountID}); + const handleNextPress = useCallback(() => { + const selectedPlaidBankAccount = (plaidData?.bankAccounts ?? []).find( + (account) => account.plaidAccountID === reimbursementAccountDraft?.[BANK_INFO_STEP_KEYS.PLAID_ACCOUNT_ID] ?? null, + ); - const selectedPlaidBankAccount = (plaidData?.bankAccounts ?? []).find((account) => account.plaidAccountID === plaidAccountID); + const bankAccountData = { + [BANK_INFO_STEP_KEYS.ROUTING_NUMBER]: selectedPlaidBankAccount?.[BANK_INFO_STEP_KEYS.ROUTING_NUMBER], + [BANK_INFO_STEP_KEYS.ACCOUNT_NUMBER]: selectedPlaidBankAccount?.[BANK_INFO_STEP_KEYS.ACCOUNT_NUMBER], + [BANK_INFO_STEP_KEYS.PLAID_MASK]: selectedPlaidBankAccount?.mask, + [BANK_INFO_STEP_KEYS.IS_SAVINGS]: selectedPlaidBankAccount?.[BANK_INFO_STEP_KEYS.IS_SAVINGS], + [BANK_INFO_STEP_KEYS.BANK_NAME]: plaidData?.[BANK_INFO_STEP_KEYS.BANK_NAME] ?? '', + [BANK_INFO_STEP_KEYS.PLAID_ACCOUNT_ID]: selectedPlaidBankAccount?.[BANK_INFO_STEP_KEYS.PLAID_ACCOUNT_ID], + [BANK_INFO_STEP_KEYS.PLAID_ACCESS_TOKEN]: plaidData?.[BANK_INFO_STEP_KEYS.PLAID_ACCESS_TOKEN] ?? '', + }; - const bankAccountData = { - [BANK_INFO_STEP_KEYS.ROUTING_NUMBER]: selectedPlaidBankAccount?.[BANK_INFO_STEP_KEYS.ROUTING_NUMBER], - [BANK_INFO_STEP_KEYS.ACCOUNT_NUMBER]: selectedPlaidBankAccount?.[BANK_INFO_STEP_KEYS.ACCOUNT_NUMBER], - [BANK_INFO_STEP_KEYS.PLAID_MASK]: selectedPlaidBankAccount?.mask, - [BANK_INFO_STEP_KEYS.IS_SAVINGS]: selectedPlaidBankAccount?.[BANK_INFO_STEP_KEYS.IS_SAVINGS], - [BANK_INFO_STEP_KEYS.BANK_NAME]: plaidData?.[BANK_INFO_STEP_KEYS.BANK_NAME] ?? '', - [BANK_INFO_STEP_KEYS.PLAID_ACCOUNT_ID]: selectedPlaidBankAccount?.[BANK_INFO_STEP_KEYS.PLAID_ACCOUNT_ID], - [BANK_INFO_STEP_KEYS.PLAID_ACCESS_TOKEN]: plaidData?.[BANK_INFO_STEP_KEYS.PLAID_ACCESS_TOKEN] ?? '', - }; - - ReimbursementAccountActions.updateReimbursementAccountDraft(bankAccountData); - }, - [plaidData], - ); + ReimbursementAccountActions.updateReimbursementAccountDraft(bankAccountData); + onNext(bankAccountData); + }, [plaidData, reimbursementAccountDraft, onNext]); const bankAccountID = Number(reimbursementAccount?.achData?.bankAccountID ?? '-1'); @@ -71,7 +69,7 @@ function Plaid({reimbursementAccount, reimbursementAccountDraft, onNext, plaidDa { + ReimbursementAccountActions.updateReimbursementAccountDraft({plaidAccountID}); + }} plaidData={plaidData} onExitPlaid={() => { BankAccounts.setBankAccountSubStep(null); From 41d83e49e321bc4f1a397274aa9bdc3ed89a18c2 Mon Sep 17 00:00:00 2001 From: Rajat Parashar Date: Mon, 16 Sep 2024 19:23:52 +0530 Subject: [PATCH 08/14] fix types --- src/hooks/useSubStep/index.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/hooks/useSubStep/index.ts b/src/hooks/useSubStep/index.ts index cb3fc9a50a74..e3de3ffbb80a 100644 --- a/src/hooks/useSubStep/index.ts +++ b/src/hooks/useSubStep/index.ts @@ -23,7 +23,7 @@ export default function useSubStep({bodyContent, on }, [screenIndex]); const nextScreen = useCallback( - (data: unknown) => { + (data?: unknown) => { if (isEditing.current) { isEditing.current = false; From 02d12b480295ac8b827f1e39844a1ccfa2686c73 Mon Sep 17 00:00:00 2001 From: Rajat Parashar Date: Mon, 16 Sep 2024 19:24:44 +0530 Subject: [PATCH 09/14] Rename the finish data param --- src/hooks/useSubStep/index.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/hooks/useSubStep/index.ts b/src/hooks/useSubStep/index.ts index e3de3ffbb80a..c89bb5fd5735 100644 --- a/src/hooks/useSubStep/index.ts +++ b/src/hooks/useSubStep/index.ts @@ -23,7 +23,7 @@ export default function useSubStep({bodyContent, on }, [screenIndex]); const nextScreen = useCallback( - (data?: unknown) => { + (finishData?: unknown) => { if (isEditing.current) { isEditing.current = false; @@ -35,7 +35,7 @@ export default function useSubStep({bodyContent, on const nextScreenIndex = screenIndex + 1; if (nextScreenIndex === bodyContent.length) { - onFinished(data); + onFinished(finishData); } else { onNextSubStep(); setScreenIndex(nextScreenIndex); From 8fa8e5a5a35753ea602721953d9fd1cb026e272b Mon Sep 17 00:00:00 2001 From: Rajat Parashar Date: Mon, 16 Sep 2024 20:46:05 +0530 Subject: [PATCH 10/14] Fix cardname step --- .../workspace/expensifyCard/issueNew/CardNameStep.tsx | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/src/pages/workspace/expensifyCard/issueNew/CardNameStep.tsx b/src/pages/workspace/expensifyCard/issueNew/CardNameStep.tsx index 35b8d0e9959c..b75a1f417c78 100644 --- a/src/pages/workspace/expensifyCard/issueNew/CardNameStep.tsx +++ b/src/pages/workspace/expensifyCard/issueNew/CardNameStep.tsx @@ -12,6 +12,7 @@ import TextInput from '@components/TextInput'; import useAutoFocusInput from '@hooks/useAutoFocusInput'; import useLocalize from '@hooks/useLocalize'; import useThemeStyles from '@hooks/useThemeStyles'; +import * as PersonalDetailsUtils from '@libs/PersonalDetailsUtils'; import * as ValidationUtils from '@libs/ValidationUtils'; import * as Card from '@userActions/Card'; import CONST from '@src/CONST'; @@ -25,6 +26,10 @@ function CardNameStep() { const [issueNewCard] = useOnyx(ONYXKEYS.ISSUE_NEW_EXPENSIFY_CARD); const isEditing = issueNewCard?.isEditing; + const data = issueNewCard?.data; + + const userName = PersonalDetailsUtils.getUserNameByEmail(data?.assigneeEmail ?? '', 'firstName'); + const defaultCardTitle = data?.cardType !== CONST.EXPENSIFY_CARD.CARD_TYPE.VIRTUAL ? `${userName}'s Card` : ''; const validate = useCallback( (values: FormOnyxValues): FormInputErrors => { @@ -88,7 +93,7 @@ function CardNameStep() { hint={translate('workspace.card.issueNewCard.giveItNameInstruction')} aria-label={translate('workspace.card.issueNewCard.cardName')} role={CONST.ROLE.PRESENTATION} - defaultValue={issueNewCard?.data?.cardTitle} + defaultValue={issueNewCard?.data?.cardTitle ?? defaultCardTitle} containerStyles={[styles.mb6]} ref={inputCallbackRef} /> From a853bd9de6d50f92270d1b6d1e71008741760406 Mon Sep 17 00:00:00 2001 From: Rajat Parashar Date: Mon, 16 Sep 2024 20:51:52 +0530 Subject: [PATCH 11/14] remove MoveTo give that there is only one step now. --- src/pages/ReimbursementAccount/BankInfo/BankInfo.tsx | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/pages/ReimbursementAccount/BankInfo/BankInfo.tsx b/src/pages/ReimbursementAccount/BankInfo/BankInfo.tsx index 23e4ef97aba7..1419ba1e6cc8 100644 --- a/src/pages/ReimbursementAccount/BankInfo/BankInfo.tsx +++ b/src/pages/ReimbursementAccount/BankInfo/BankInfo.tsx @@ -108,9 +108,8 @@ function BankInfo({reimbursementAccount, reimbursementAccountDraft, plaidLinkTok } 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) { From 487d87ef494d376d27fad0ff6d5b2faf046ebbfc Mon Sep 17 00:00:00 2001 From: Rajat Parashar Date: Mon, 16 Sep 2024 20:52:33 +0530 Subject: [PATCH 12/14] Remove extra step --- .../BankInfo/substeps/Confirmation.tsx | 119 ------------------ 1 file changed, 119 deletions(-) delete mode 100644 src/pages/ReimbursementAccount/BankInfo/substeps/Confirmation.tsx 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 && ( - - )} -