Skip to content

Commit

Permalink
Merge pull request #48767 from parasharrajat/parasharrajat/workspace-…
Browse files Browse the repository at this point in the history 
…feeds

Remove Confirmation from plaid bank flow
  • Loading branch information
@mountiny
mountiny authored Sep 17, 2024
2 parents 14b99ca + e9b2107 commit 2190f62
Show file tree
Hide file tree
Showing 8 changed files with 85 additions and 252 deletions.
2 changes: 2 additions & 0 deletions src/hooks/useStepFormSubmit.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,6 +30,8 @@ export default function useStepFormSubmit<T extends keyof OnyxFormValuesMapping>
}, {} as Record<TupleToUnion<typeof fieldIds>, OnyxValues[T][Exclude<keyof OnyxValues[T], keyof BaseForm>]>);

FormActions.setDraftValues(formId, stepValues);
onNext(stepValues);
return;
}

onNext();
Expand Down
31 changes: 17 additions & 14 deletions src/hooks/useSubStep/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,24 +22,27 @@ export default function useSubStep<TProps extends SubStepProps>({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;
Expand Down
4 changes: 2 additions & 2 deletions src/hooks/useSubStep/types.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -25,7 +25,7 @@ type UseSubStep<TProps extends SubStepProps> = {
onNextSubStep?: () => void;

/** called on last sub step */
onFinished: () => void;
onFinished: (data?: unknown) => void;

/** index of initial sub step to display */
startFrom?: number;
Expand Down
110 changes: 45 additions & 65 deletions src/pages/ReimbursementAccount/BankInfo/BankInfo.tsx
View file
Original file line number Diff line number Diff line change
@@ -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';
Expand All @@ -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<string>;

/** Reimbursement account from ONYX */
reimbursementAccount: OnyxEntry<ReimbursementAccount>;

/** The draft values of the bank account being setup */
reimbursementAccountDraft: OnyxEntry<ReimbursementAccountForm>;
};

type BankInfoProps = BankInfoOnyxProps & {
type BankInfoProps = {
/** Goes to the previous step */
onBackButtonPress: () => void;

Expand All @@ -42,11 +28,14 @@ type BankInfoProps = BankInfoOnyxProps & {
};

const BANK_INFO_STEP_KEYS = INPUT_IDS.BANK_INFO_STEP;
const manualSubsteps: Array<React.ComponentType<SubStepProps>> = [Manual, Confirmation];
const plaidSubsteps: Array<React.ComponentType<SubStepProps>> = [Plaid, Confirmation];
const manualSubsteps: Array<React.ComponentType<SubStepProps>> = [Manual];
const plaidSubsteps: Array<React.ComponentType<SubStepProps>> = [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();

Expand All @@ -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});
Expand All @@ -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) {
Expand Down Expand Up @@ -161,15 +152,4 @@ function BankInfo({reimbursementAccount, reimbursementAccountDraft, plaidLinkTok

BankInfo.displayName = 'BankInfo';

export default withOnyx<BankInfoProps, BankInfoOnyxProps>({
// @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;
119 changes: 0 additions & 119 deletions src/pages/ReimbursementAccount/BankInfo/substeps/Confirmation.tsx
View file

This file was deleted.

Loading

0 comments on commit 2190f62

Please sign in to comment.