diff --git a/src/pages/ReimbursementAccount/BankAccountPlaidStep.js b/src/pages/ReimbursementAccount/BankAccountPlaidStep.js index 9f0325128efa..d74bea73eda0 100644 --- a/src/pages/ReimbursementAccount/BankAccountPlaidStep.js +++ b/src/pages/ReimbursementAccount/BankAccountPlaidStep.js @@ -1,13 +1,11 @@ -import _ from 'underscore'; -import React from 'react'; -import {withOnyx} from 'react-native-onyx'; +import React, {useCallback} from 'react'; import PropTypes from 'prop-types'; +import _ from 'underscore'; import lodashGet from 'lodash/get'; +import {withOnyx} from 'react-native-onyx'; import HeaderWithBackButton from '../../components/HeaderWithBackButton'; import CONST from '../../CONST'; import * as BankAccounts from '../../libs/actions/BankAccounts'; -import withLocalize from '../../components/withLocalize'; -import compose from '../../libs/compose'; import ONYXKEYS from '../../ONYXKEYS'; import AddPlaidBankAccount from '../../components/AddPlaidBankAccount'; import CheckboxWithLabel from '../../components/CheckboxWithLabel'; @@ -19,6 +17,7 @@ import styles from '../../styles/styles'; import ScreenWrapper from '../../components/ScreenWrapper'; import * as PlaidDataProps from './plaidDataPropTypes'; import StepPropTypes from './StepPropTypes'; +import useLocalize from '../../hooks/useLocalize'; const propTypes = { ...StepPropTypes, @@ -39,25 +38,22 @@ const defaultProps = { plaidLinkOAuthToken: '', }; -class BankAccountPlaidStep extends React.Component { - constructor(props) { - super(props); - this.validate = this.validate.bind(this); - this.submit = this.submit.bind(this); - } +function BankAccountPlaidStep(props) { + const {plaidData, receivedRedirectURI, plaidLinkOAuthToken, reimbursementAccount, reimbursementAccountDraft, onBackButtonPress, getDefaultStateForField} = props; + const {translate} = useLocalize(); - validate(values) { + const validate = useCallback((values) => { const errorFields = {}; if (!values.acceptTerms) { errorFields.acceptTerms = 'common.error.acceptTerms'; } return errorFields; - } + }, []); - submit() { - const selectedPlaidBankAccount = _.findWhere(lodashGet(this.props.plaidData, 'bankAccounts', []), { - plaidAccountID: lodashGet(this.props.reimbursementAccountDraft, 'plaidAccountID', ''), + const submit = useCallback(() => { + const selectedPlaidBankAccount = _.findWhere(lodashGet(plaidData, 'bankAccounts', []), { + plaidAccountID: lodashGet(reimbursementAccountDraft, 'plaidAccountID', ''), }); const bankAccountData = { @@ -65,83 +61,79 @@ class BankAccountPlaidStep extends React.Component { accountNumber: selectedPlaidBankAccount.accountNumber, plaidMask: selectedPlaidBankAccount.mask, isSavings: selectedPlaidBankAccount.isSavings, - bankName: lodashGet(this.props.plaidData, 'bankName') || '', + bankName: lodashGet(plaidData, 'bankName') || '', plaidAccountID: selectedPlaidBankAccount.plaidAccountID, - plaidAccessToken: lodashGet(this.props.plaidData, 'plaidAccessToken') || '', + plaidAccessToken: lodashGet(plaidData, 'plaidAccessToken') || '', }; ReimbursementAccount.updateReimbursementAccountDraft(bankAccountData); - const bankAccountID = lodashGet(this.props.reimbursementAccount, 'achData.bankAccountID') || 0; + const bankAccountID = lodashGet(reimbursementAccount, 'achData.bankAccountID') || 0; BankAccounts.connectBankAccountWithPlaid(bankAccountID, bankAccountData); - } + }, [reimbursementAccount, reimbursementAccountDraft, plaidData]); - render() { - const bankAccountID = lodashGet(this.props.reimbursementAccount, 'achData.bankAccountID') || 0; - const selectedPlaidAccountID = lodashGet(this.props.reimbursementAccountDraft, 'plaidAccountID', ''); + const bankAccountID = lodashGet(reimbursementAccount, 'achData.bankAccountID') || 0; + const selectedPlaidAccountID = lodashGet(reimbursementAccountDraft, 'plaidAccountID', ''); - return ( - + +
- { + ReimbursementAccount.updateReimbursementAccountDraft({plaidAccountID}); + }} + plaidData={plaidData} + onExitPlaid={() => BankAccounts.setBankAccountSubStep(null)} + receivedRedirectURI={receivedRedirectURI} + plaidLinkOAuthToken={plaidLinkOAuthToken} + allowDebit + bankAccountID={bankAccountID} + selectedPlaidAccountID={selectedPlaidAccountID} /> - - { - ReimbursementAccount.updateReimbursementAccountDraft({plaidAccountID}); - }} - plaidData={this.props.plaidData} - onExitPlaid={() => BankAccounts.setBankAccountSubStep(null)} - receivedRedirectURI={this.props.receivedRedirectURI} - plaidLinkOAuthToken={this.props.plaidLinkOAuthToken} - allowDebit - bankAccountID={bankAccountID} - selectedPlaidAccountID={selectedPlaidAccountID} + {Boolean(selectedPlaidAccountID) && !_.isEmpty(lodashGet(plaidData, 'bankAccounts')) && ( + ( + + {translate('common.iAcceptThe')} + {translate('common.expensifyTermsOfService')} + + )} + defaultValue={getDefaultStateForField('acceptTerms', false)} + shouldSaveDraft /> - {Boolean(selectedPlaidAccountID) && !_.isEmpty(lodashGet(this.props.plaidData, 'bankAccounts')) && ( - ( - - {this.props.translate('common.iAcceptThe')} - {this.props.translate('common.expensifyTermsOfService')} - - )} - defaultValue={this.props.getDefaultStateForField('acceptTerms', false)} - shouldSaveDraft - /> - )} - -
- ); - } + )} + + + ); } BankAccountPlaidStep.propTypes = propTypes; BankAccountPlaidStep.defaultProps = defaultProps; -export default compose( - withLocalize, - withOnyx({ - plaidData: { - key: ONYXKEYS.PLAID_DATA, - }, - }), -)(BankAccountPlaidStep); +BankAccountPlaidStep.displayName = 'BankAccountPlaidStep'; +export default withOnyx({ + plaidData: { + key: ONYXKEYS.PLAID_DATA, + }, +})(BankAccountPlaidStep);