Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Fix double RHP animation when clicking on "connect bank accont" #49688

Merged
merged 3 commits into from
Sep 30, 2024
Merged

Fix double RHP animation when clicking on "connect bank accont" #49688

Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
cca2c15
fix double navigation animation
bernhardoj Sep 25, 2024
6342fab
remove unused import
bernhardoj Sep 25, 2024
40205f7
migrate to useOnyx
bernhardoj Sep 25, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
84 changes: 13 additions & 71 deletions src/pages/ReimbursementAccount/ReimbursementAccountPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,8 +4,7 @@ import {Str} from 'expensify-common';
import lodashPick from 'lodash/pick';
import React, {useEffect, useRef, useState} 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 type {ValueOf} from 'type-fest';
import FullPageNotFoundView from '@components/BlockingViews/FullPageNotFoundView';
import HeaderWithBackButton from '@components/HeaderWithBackButton';
Expand All @@ -27,10 +26,8 @@ import withPolicy from '@pages/workspace/withPolicy';
import * as BankAccounts from '@userActions/BankAccounts';
import CONST from '@src/CONST';
import ONYXKEYS from '@src/ONYXKEYS';
import ROUTES from '@src/ROUTES';
import type SCREENS from '@src/SCREENS';
import type {InputID} from '@src/types/form/ReimbursementAccountForm';
import type * as OnyxTypes from '@src/types/onyx';
import type {ACHDataReimbursementAccount, BankAccountStep as TBankAccountStep} from '@src/types/onyx/ReimbursementAccount';
import {isEmptyObject} from '@src/types/utils/EmptyObject';
import ACHContractStep from './ACHContractStep';
Expand All @@ -42,32 +39,7 @@ import ContinueBankAccountSetup from './ContinueBankAccountSetup';
import EnableBankAccount from './EnableBankAccount/EnableBankAccount';
import RequestorStep from './RequestorStep';

type ReimbursementAccountOnyxProps = {
/** Plaid SDK token to use to initialize the widget */
plaidLinkToken: OnyxEntry<string>;

/** Plaid SDK current event */
plaidCurrentEvent: OnyxEntry<string>;

/** Indicated whether the app is loading */
isLoadingApp: OnyxEntry<boolean>;

/** Holds information about the users account that is logging in */
account: OnyxEntry<OnyxTypes.Account>;

/** Current session for the user */
session: OnyxEntry<OnyxTypes.Session>;

/** ACH data for the withdrawal account actively being set up */
reimbursementAccount: OnyxEntry<OnyxTypes.ReimbursementAccount>;

/** The token required to initialize the Onfido SDK */
onfidoToken: OnyxEntry<string>;
};

type ReimbursementAccountPageProps = WithPolicyOnyxProps &
ReimbursementAccountOnyxProps &
StackScreenProps<ReimbursementAccountNavigatorParamList, typeof SCREENS.REIMBURSEMENT_ACCOUNT_ROOT>;
type ReimbursementAccountPageProps = WithPolicyOnyxProps & StackScreenProps<ReimbursementAccountNavigatorParamList, typeof SCREENS.REIMBURSEMENT_ACCOUNT_ROOT>;

const ROUTE_NAMES = {
COMPANY: 'company',
Expand Down Expand Up @@ -124,17 +96,15 @@ function getRouteForCurrentStep(currentStep: TBankAccountStep): ValueOf<typeof R
}
}

function ReimbursementAccountPage({
reimbursementAccount,
route,
onfidoToken = '',
policy,
account,
isLoadingApp = false,
session,
plaidLinkToken = '',
plaidCurrentEvent = '',
}: ReimbursementAccountPageProps) {
function ReimbursementAccountPage({route, policy}: ReimbursementAccountPageProps) {
const [reimbursementAccount] = useOnyx(ONYXKEYS.REIMBURSEMENT_ACCOUNT);
const [session] = useOnyx(ONYXKEYS.SESSION);
const [plaidLinkToken = ''] = useOnyx(ONYXKEYS.PLAID_LINK_TOKEN);
const [plaidCurrentEvent = ''] = useOnyx(ONYXKEYS.PLAID_CURRENT_EVENT);
const [onfidoToken = ''] = useOnyx(ONYXKEYS.ONFIDO_TOKEN);
const [isLoadingApp = false] = useOnyx(ONYXKEYS.IS_LOADING_APP);
const [account] = useOnyx(ONYXKEYS.ACCOUNT);

/**
The SetupWithdrawalAccount flow allows us to continue the flow from various points depending on where the
user left off. This view will refer to the achData as the single source of truth to determine which route to
Expand Down Expand Up @@ -316,10 +286,7 @@ function ReimbursementAccountPage({
BankAccounts.hideBankAccountErrors();
}

const policyID = route.params.policyID;
const backTo = route.params.backTo;

Navigation.navigate(ROUTES.BANK_ACCOUNT_WITH_STEP_TO_OPEN.getRoute(getRouteForCurrentStep(currentStep), policyID, backTo));
Navigation.setParams({stepToOpen: getRouteForCurrentStep(currentStep)});
},
// eslint-disable-next-line react-compiler/react-compiler, react-hooks/exhaustive-deps
[isOffline, reimbursementAccount, route, hasACHDataBeenLoaded, shouldShowContinueSetupButton],
Expand Down Expand Up @@ -509,29 +476,4 @@ function ReimbursementAccountPage({

ReimbursementAccountPage.displayName = 'ReimbursementAccountPage';

export default withPolicy(
withOnyx<ReimbursementAccountPageProps, ReimbursementAccountOnyxProps>({
// @ts-expect-error: ONYXKEYS.REIMBURSEMENT_ACCOUNT is conflicting with ONYXKEYS.FORMS.REIMBURSEMENT_ACCOUNT_FORM
reimbursementAccount: {
key: ONYXKEYS.REIMBURSEMENT_ACCOUNT,
},
session: {
key: ONYXKEYS.SESSION,
},
plaidLinkToken: {
key: ONYXKEYS.PLAID_LINK_TOKEN,
},
plaidCurrentEvent: {
key: ONYXKEYS.PLAID_CURRENT_EVENT,
},
onfidoToken: {
key: ONYXKEYS.ONFIDO_TOKEN,
},
isLoadingApp: {
key: ONYXKEYS.IS_LOADING_APP,
},
account: {
key: ONYXKEYS.ACCOUNT,
},
})(ReimbursementAccountPage),
);
export default withPolicy(ReimbursementAccountPage);
Loading