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 account not validated error is not displayed on the Connect bank account page #49130

Merged
merged 3 commits into from
Sep 13, 2024
Merged

Fix account not validated error is not displayed on the Connect bank account page #49130

Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
acd46d0
Replace `User.validated` with `Account.validated`
CyberAndrii Sep 12, 2024
3e4b954
Migrate to `useOnyx`
CyberAndrii Sep 13, 2024
aed5723
Remove `initialValue: false` from `isPlaidDisabled`
CyberAndrii Sep 13, 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
53 changes: 13 additions & 40 deletions src/pages/ReimbursementAccount/BankAccountStep.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import React 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 Icon from '@components/Icon';
import * as Expensicons from '@components/Icon/Expensicons';
Expand Down Expand Up @@ -29,18 +29,7 @@ import INPUT_IDS from '@src/types/form/ReimbursementAccountForm';
import type * as OnyxTypes from '@src/types/onyx';
import BankInfo from './BankInfo/BankInfo';

type BankAccountStepOnyxProps = {
/** Object with various information about the user */
user: OnyxEntry<OnyxTypes.User>;

/** If the plaid button has been disabled */
isPlaidDisabled: OnyxEntry<boolean>;

/** List of bank accounts */
bankAccountList: OnyxEntry<OnyxTypes.BankAccountList>;
};

type BankAccountStepProps = BankAccountStepOnyxProps & {
type BankAccountStepProps = {
/** The OAuth URI + stateID needed to re-initialize the PlaidLink after the user logs into their bank */
receivedRedirectURI?: string | null;

Expand All @@ -62,28 +51,22 @@ type BankAccountStepProps = BankAccountStepOnyxProps & {

const bankInfoStepKeys = INPUT_IDS.BANK_INFO_STEP;

function BankAccountStep({
plaidLinkOAuthToken = '',
policyID = '',
policyName = '',
user,
receivedRedirectURI,
reimbursementAccount,
onBackButtonPress,
isPlaidDisabled = false,
bankAccountList = {},
}: BankAccountStepProps) {
function BankAccountStep({plaidLinkOAuthToken = '', policyID = '', policyName = '', receivedRedirectURI, reimbursementAccount, onBackButtonPress}: BankAccountStepProps) {
const theme = useTheme();
const styles = useThemeStyles();
const {translate} = useLocalize();
const [account] = useOnyx(ONYXKEYS.ACCOUNT);
const [isPlaidDisabled] = useOnyx(ONYXKEYS.IS_PLAID_DISABLED);
const [bankAccountList] = useOnyx(ONYXKEYS.BANK_ACCOUNT_LIST);

let subStep = reimbursementAccount?.achData?.subStep ?? '';
const shouldReinitializePlaidLink = plaidLinkOAuthToken && receivedRedirectURI && subStep !== CONST.BANK_ACCOUNT.SUBSTEP.MANUAL;
if (shouldReinitializePlaidLink) {
subStep = CONST.BANK_ACCOUNT.SETUP_TYPE.PLAID;
}
const plaidDesktopMessage = getPlaidDesktopMessage();
const bankAccountRoute = `${ROUTES.BANK_ACCOUNT_WITH_STEP_TO_OPEN.getRoute('new', policyID, ROUTES.WORKSPACE_INITIAL.getRoute(policyID))}`;
const personalBankAccounts = Object.keys(bankAccountList).filter((key) => bankAccountList[key].accountType === CONST.PAYMENT_METHODS.PERSONAL_BANK_ACCOUNT);
const personalBankAccounts = bankAccountList ? Object.keys(bankAccountList).filter((key) => bankAccountList[key].accountType === CONST.PAYMENT_METHODS.PERSONAL_BANK_ACCOUNT) : [];

const removeExistingBankAccountDetails = () => {
const bankAccountData: Partial<ReimbursementAccountForm> = {
Expand Down Expand Up @@ -155,9 +138,9 @@ function BankAccountStep({
<MenuItem
icon={Expensicons.Bank}
title={translate('bankAccount.connectOnlineWithPlaid')}
disabled={!!isPlaidDisabled || !user?.validated}
disabled={!!isPlaidDisabled || !account?.validated}
onPress={() => {
if (!!isPlaidDisabled || !user?.validated) {
if (!!isPlaidDisabled || !account?.validated) {
return;
}
removeExistingBankAccountDetails();
Expand All @@ -171,7 +154,7 @@ function BankAccountStep({
<MenuItem
icon={Expensicons.Connect}
title={translate('bankAccount.connectManually')}
disabled={!user?.validated}
disabled={!account?.validated}
onPress={() => {
removeExistingBankAccountDetails();
BankAccounts.setBankAccountSubStep(CONST.BANK_ACCOUNT.SETUP_TYPE.MANUAL);
Expand All @@ -181,7 +164,7 @@ function BankAccountStep({
/>
</View>
</Section>
{!user?.validated && <ValidateAccountMessage />}
{!account?.validated && <ValidateAccountMessage />}
<View style={[styles.mv0, styles.mh5, styles.flexRow, styles.justifyContentBetween]}>
<TextLink href={CONST.PRIVACY_URL}>{translate('common.privacy')}</TextLink>
<PressableWithoutFeedback
Expand All @@ -206,14 +189,4 @@ function BankAccountStep({

BankAccountStep.displayName = 'BankAccountStep';

export default withOnyx<BankAccountStepProps, BankAccountStepOnyxProps>({
user: {
key: ONYXKEYS.USER,
},
isPlaidDisabled: {
key: ONYXKEYS.IS_PLAID_DISABLED,
},
bankAccountList: {
key: ONYXKEYS.BANK_ACCOUNT_LIST,
},
})(BankAccountStep);
export default BankAccountStep;
Loading