-
Notifications
You must be signed in to change notification settings - Fork 3k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #39038 from koko57/refactor/36648-wallet-enablemen…
…t-flow Refactor/36648 wallet enablement flow
- Loading branch information
Showing
20 changed files
with
583 additions
and
54 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,3 +1,5 @@ | ||
| type GetPlaidDesktopMessage = () => string | undefined; | ||
| import type {TranslationPaths} from '@src/languages/types'; | ||
|
|
||
| type GetPlaidDesktopMessage = () => TranslationPaths | undefined; | ||
|
|
||
| export default GetPlaidDesktopMessage; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
128 changes: 128 additions & 0 deletions
128
src/pages/EnablePayments/AddBankAccount/AddBankAccount.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,128 @@ | ||
| import React, {useCallback, useEffect} from 'react'; | ||
| import {View} from 'react-native'; | ||
| import {withOnyx} from 'react-native-onyx'; | ||
| import type {OnyxEntry} from 'react-native-onyx'; | ||
| 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 useThemeStyles from '@hooks/useThemeStyles'; | ||
| import Navigation from '@navigation/Navigation'; | ||
| import * as BankAccounts from '@userActions/BankAccounts'; | ||
| import * as PaymentMethods from '@userActions/PaymentMethods'; | ||
| import CONST from '@src/CONST'; | ||
| import ONYXKEYS from '@src/ONYXKEYS'; | ||
| import ROUTES from '@src/ROUTES'; | ||
| import type {PersonalBankAccountForm} from '@src/types/form'; | ||
| import type {PersonalBankAccount, PlaidData} from '@src/types/onyx'; | ||
| import SetupMethod from './SetupMethod'; | ||
| import Confirmation from './substeps/ConfirmationStep'; | ||
| import Plaid from './substeps/PlaidStep'; | ||
|
|
||
| type AddPersonalBankAccountPageWithOnyxProps = { | ||
| /** Contains plaid data */ | ||
| plaidData: OnyxEntry<PlaidData>; | ||
|
|
||
| /** The details about the Personal bank account we are adding saved in Onyx */ | ||
| personalBankAccount: OnyxEntry<PersonalBankAccount>; | ||
|
|
||
| /** The draft values of the bank account being setup */ | ||
| personalBankAccountDraft: OnyxEntry<PersonalBankAccountForm>; | ||
| }; | ||
|
|
||
| const plaidSubsteps: Array<React.ComponentType<SubStepProps>> = [Plaid, Confirmation]; | ||
|
|
||
| function AddBankAccount({personalBankAccount, plaidData, personalBankAccountDraft}: AddPersonalBankAccountPageWithOnyxProps) { | ||
| const {translate} = useLocalize(); | ||
| const styles = useThemeStyles(); | ||
|
|
||
| const submit = useCallback(() => { | ||
| const bankAccounts = plaidData?.bankAccounts ?? []; | ||
| const selectedPlaidBankAccount = bankAccounts.find((bankAccount) => bankAccount.plaidAccountID === personalBankAccountDraft?.plaidAccountID); | ||
|
|
||
| if (selectedPlaidBankAccount) { | ||
| BankAccounts.addPersonalBankAccount(selectedPlaidBankAccount); | ||
| Navigation.navigate(ROUTES.SETTINGS_ENABLE_PAYMENTS); | ||
| } | ||
| }, [personalBankAccountDraft?.plaidAccountID, plaidData?.bankAccounts]); | ||
|
|
||
| const isSetupTypeChosen = personalBankAccountDraft?.setupType === CONST.BANK_ACCOUNT.SETUP_TYPE.PLAID; | ||
|
|
||
| const {componentToRender: SubStep, isEditing, screenIndex, nextScreen, prevScreen, moveTo} = useSubStep({bodyContent: plaidSubsteps, startFrom: 0, onFinished: submit}); | ||
|
|
||
| const exitFlow = (shouldContinue = false) => { | ||
| const exitReportID = personalBankAccount?.exitReportID; | ||
| const onSuccessFallbackRoute = personalBankAccount?.onSuccessFallbackRoute ?? ''; | ||
|
|
||
| if (exitReportID) { | ||
| Navigation.dismissModal(exitReportID); | ||
| return; | ||
| } | ||
| if (shouldContinue && onSuccessFallbackRoute) { | ||
| PaymentMethods.continueSetup(onSuccessFallbackRoute); | ||
| return; | ||
| } | ||
| Navigation.goBack(ROUTES.SETTINGS_WALLET); | ||
| }; | ||
|
|
||
| const handleBackButtonPress = () => { | ||
| if (!isSetupTypeChosen) { | ||
| exitFlow(); | ||
| return; | ||
| } | ||
| if (screenIndex === 0) { | ||
| BankAccounts.clearPersonalBankAccount(); | ||
| return; | ||
| } | ||
| prevScreen(); | ||
| }; | ||
|
|
||
| useEffect(() => BankAccounts.clearPersonalBankAccount, []); | ||
|
|
||
| return ( | ||
| <ScreenWrapper | ||
| testID={AddBankAccount.displayName} | ||
| includeSafeAreaPaddingBottom={false} | ||
| shouldEnablePickerAvoiding={false} | ||
| > | ||
| <HeaderWithBackButton | ||
| shouldShowBackButton | ||
| onBackButtonPress={handleBackButtonPress} | ||
| title={translate('bankAccount.addBankAccount')} | ||
| /> | ||
| {isSetupTypeChosen ? ( | ||
| <> | ||
| <View style={[styles.ph5, styles.mb5, styles.mt3, {height: CONST.BANK_ACCOUNT.STEPS_HEADER_HEIGHT}]}> | ||
| <InteractiveStepSubHeader | ||
| startStepIndex={0} | ||
| stepNames={CONST.WALLET.STEP_NAMES} | ||
| /> | ||
| </View> | ||
| <SubStep | ||
| isEditing={isEditing} | ||
| onNext={nextScreen} | ||
| onMove={moveTo} | ||
| /> | ||
| </> | ||
| ) : ( | ||
| <SetupMethod /> | ||
| )} | ||
| </ScreenWrapper> | ||
| ); | ||
| } | ||
|
|
||
| AddBankAccount.displayName = 'AddBankAccountPage'; | ||
|
|
||
| export default withOnyx<AddPersonalBankAccountPageWithOnyxProps, AddPersonalBankAccountPageWithOnyxProps>({ | ||
| plaidData: { | ||
| key: ONYXKEYS.PLAID_DATA, | ||
| }, | ||
| personalBankAccount: { | ||
| key: ONYXKEYS.PERSONAL_BANK_ACCOUNT, | ||
| }, | ||
| personalBankAccountDraft: { | ||
| key: ONYXKEYS.FORMS.PERSONAL_BANK_ACCOUNT_FORM_DRAFT, | ||
| }, | ||
| })(AddBankAccount); |
Oops, something went wrong.