Skip to content

Commit

Permalink
Merge pull request #28251 from barttom/refactor/16229/migration-AddPe…
Browse files Browse the repository at this point in the history 
…rsonalBankAccountPage-to-function-component

reafctor: migrated AddPersonalBankAccountPage component to the function
  • Loading branch information
@Julesssss
Julesssss authored Oct 23, 2023
2 parents 71d11e8 + fc22287 commit 168138b
Showing 1 changed file with 78 additions and 101 deletions.
179 changes: 78 additions & 101 deletions src/pages/AddPersonalBankAccountPage.js
View file
Original file line number Diff line number Diff line change
@@ -1,27 +1,24 @@
import _ from 'underscore';
import React from 'react';
import React, {useCallback, useEffect, useState} from 'react';
import {withOnyx} from 'react-native-onyx';
import lodashGet from 'lodash/get';
import PropTypes from 'prop-types';
import HeaderWithBackButton from '../components/HeaderWithBackButton';
import ScreenWrapper from '../components/ScreenWrapper';
import Navigation from '../libs/Navigation/Navigation';
import * as BankAccounts from '../libs/actions/BankAccounts';
import * as PaymentMethods from '../libs/actions/PaymentMethods';
import withLocalize, {withLocalizePropTypes} from '../components/withLocalize';
import AddPlaidBankAccount from '../components/AddPlaidBankAccount';
import getPlaidOAuthReceivedRedirectURI from '../libs/getPlaidOAuthReceivedRedirectURI';
import compose from '../libs/compose';
import ONYXKEYS from '../ONYXKEYS';
import styles from '../styles/styles';
import Form from '../components/Form';
import ROUTES from '../ROUTES';
import * as PlaidDataProps from './ReimbursementAccount/plaidDataPropTypes';
import ConfirmationPage from '../components/ConfirmationPage';
import * as PaymentMethods from '../libs/actions/PaymentMethods';
import useLocalize from '../hooks/useLocalize';

const propTypes = {
...withLocalizePropTypes,

/** Contains plaid data */
plaidData: PlaidDataProps.plaidDataPropTypes,

Expand Down Expand Up @@ -59,112 +56,92 @@ const defaultProps = {
},
};

class AddPersonalBankAccountPage extends React.Component {
constructor(props) {
super(props);

this.validate = this.validate.bind(this);
this.submit = this.submit.bind(this);
this.exitFlow = this.exitFlow.bind(this);

this.state = {
selectedPlaidAccountID: '',
};
}

componentWillUnmount() {
BankAccounts.clearPersonalBankAccount();
}
function AddPersonalBankAccountPage({personalBankAccount, plaidData}) {
const {translate} = useLocalize();
const [selectedPlaidAccountId, setSelectedPlaidAccountId] = useState('');
const shouldShowSuccess = lodashGet(personalBankAccount, 'shouldShowSuccess', false);

/**
* @returns {Object}
*/
validate() {
return {};
}
const validateBankAccountForm = () => ({});

submit() {
const selectedPlaidBankAccount = _.findWhere(lodashGet(this.props.plaidData, 'bankAccounts', []), {
plaidAccountID: this.state.selectedPlaidAccountID,
const submitBankAccountForm = useCallback(() => {
const selectedPlaidBankAccount = _.findWhere(lodashGet(plaidData, 'bankAccounts', []), {
plaidAccountID: selectedPlaidAccountId,
});

BankAccounts.addPersonalBankAccount(selectedPlaidBankAccount);
}

exitFlow(shouldContinue = false) {
const exitReportID = lodashGet(this.props, 'personalBankAccount.exitReportID');
const onSuccessFallbackRoute = lodashGet(this.props, 'personalBankAccount.onSuccessFallbackRoute', '');

if (exitReportID) {
Navigation.dismissModal(exitReportID);
} else if (shouldContinue && onSuccessFallbackRoute) {
PaymentMethods.continueSetup(onSuccessFallbackRoute);
} else {
Navigation.goBack(ROUTES.SETTINGS_WALLET);
}
}

render() {
const shouldShowSuccess = lodashGet(this.props, 'personalBankAccount.shouldShowSuccess', false);

return (
<ScreenWrapper
includeSafeAreaPaddingBottom={shouldShowSuccess}
shouldEnablePickerAvoiding={false}
shouldShowOfflineIndicator={false}
testID={AddPersonalBankAccountPage.displayName}
>
<HeaderWithBackButton
title={this.props.translate('bankAccount.addBankAccount')}
onBackButtonPress={this.exitFlow}
}, [plaidData, selectedPlaidAccountId]);

const exitFlow = useCallback(
(shouldContinue = false) => {
const exitReportID = lodashGet(personalBankAccount, 'exitReportID');
const onSuccessFallbackRoute = lodashGet(personalBankAccount, 'onSuccessFallbackRoute', '');

if (exitReportID) {
Navigation.dismissModal(exitReportID);
} else if (shouldContinue && onSuccessFallbackRoute) {
PaymentMethods.continueSetup(onSuccessFallbackRoute);
} else {
Navigation.goBack(ROUTES.SETTINGS_WALLET);
}
},
[personalBankAccount],
);

useEffect(() => BankAccounts.clearPersonalBankAccount, []);

return (
<ScreenWrapper
includeSafeAreaPaddingBottom={shouldShowSuccess}
shouldEnablePickerAvoiding={false}
shouldShowOfflineIndicator={false}
testID={AddPersonalBankAccountPage.displayName}
>
<HeaderWithBackButton
title={translate('bankAccount.addBankAccount')}
onBackButtonPress={exitFlow}
/>
{shouldShowSuccess ? (
<ConfirmationPage
heading={translate('addPersonalBankAccountPage.successTitle')}
description={translate('addPersonalBankAccountPage.successMessage')}
shouldShowButton
buttonText={translate('common.continue')}
onButtonPress={() => exitFlow(true)}
/>
{shouldShowSuccess ? (
<ConfirmationPage
heading={this.props.translate('addPersonalBankAccountPage.successTitle')}
description={this.props.translate('addPersonalBankAccountPage.successMessage')}
shouldShowButton
buttonText={this.props.translate('common.continue')}
onButtonPress={() => this.exitFlow(true)}
) : (
<Form
formID={ONYXKEYS.PERSONAL_BANK_ACCOUNT}
isSubmitButtonVisible={Boolean(selectedPlaidAccountId)}
submitButtonText={translate('common.saveAndContinue')}
scrollContextEnabled
onSubmit={submitBankAccountForm}
validate={validateBankAccountForm}
style={[styles.mh5, styles.flex1]}
>
<AddPlaidBankAccount
onSelect={setSelectedPlaidAccountId}
plaidData={plaidData}
onExitPlaid={() => Navigation.goBack(ROUTES.HOME)}
receivedRedirectURI={getPlaidOAuthReceivedRedirectURI()}
selectedPlaidAccountID={selectedPlaidAccountId}
/>
) : (
<Form
formID={ONYXKEYS.PERSONAL_BANK_ACCOUNT}
isSubmitButtonVisible={Boolean(this.state.selectedPlaidAccountID)}
submitButtonText={this.props.translate('common.saveAndContinue')}
scrollContextEnabled
onSubmit={this.submit}
validate={this.validate}
style={[styles.mh5, styles.flex1]}
>
<>
<AddPlaidBankAccount
onSelect={(selectedPlaidAccountID) => {
this.setState({selectedPlaidAccountID});
}}
plaidData={this.props.plaidData}
onExitPlaid={() => Navigation.goBack(ROUTES.HOME)}
receivedRedirectURI={getPlaidOAuthReceivedRedirectURI()}
selectedPlaidAccountID={this.state.selectedPlaidAccountID}
/>
</>
</Form>
)}
</ScreenWrapper>
);
}
</Form>
)}
</ScreenWrapper>
);
}

AddPersonalBankAccountPage.displayName = 'AddPersonalBankAccountPage';
AddPersonalBankAccountPage.propTypes = propTypes;
AddPersonalBankAccountPage.defaultProps = defaultProps;

export default compose(
withLocalize,
withOnyx({
personalBankAccount: {
key: ONYXKEYS.PERSONAL_BANK_ACCOUNT,
},
plaidData: {
key: ONYXKEYS.PLAID_DATA,
},
}),
)(AddPersonalBankAccountPage);
export default withOnyx({
personalBankAccount: {
key: ONYXKEYS.PERSONAL_BANK_ACCOUNT,
},
plaidData: {
key: ONYXKEYS.PLAID_DATA,
},
})(AddPersonalBankAccountPage);

0 comments on commit 168138b

Please sign in to comment.