From a8590d0cf16b189b9e4128d80e005f85a3878cde Mon Sep 17 00:00:00 2001 From: payal-lathidadiya <130229379+payal-lathidadiya@users.noreply.github.com> Date: Wed, 28 Jun 2023 12:45:29 +0530 Subject: [PATCH 1/4] refactor: migrate BankAccountManualStep to function component --- .../BankAccountPlaidStep.js | 137 +++++++++--------- 1 file changed, 65 insertions(+), 72 deletions(-) diff --git a/src/pages/ReimbursementAccount/BankAccountPlaidStep.js b/src/pages/ReimbursementAccount/BankAccountPlaidStep.js index 8e46b1757e1c..4642ded479cd 100644 --- a/src/pages/ReimbursementAccount/BankAccountPlaidStep.js +++ b/src/pages/ReimbursementAccount/BankAccountPlaidStep.js @@ -1,8 +1,8 @@ -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'; @@ -39,25 +39,19 @@ const defaultProps = { plaidLinkOAuthToken: '', }; -class BankAccountPlaidStep extends React.Component { - constructor(props) { - super(props); - this.validate = this.validate.bind(this); - this.submit = this.submit.bind(this); - } - - validate(values) { +function BankAccountPlaidStep({plaidData, receivedRedirectURI, plaidLinkOAuthToken, ...props}) { + 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(props.reimbursementAccountDraft, 'plaidAccountID', ''), }); const bankAccountData = { @@ -65,77 +59,76 @@ 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(props.reimbursementAccount, 'achData.bankAccountID') || 0; BankAccounts.connectBankAccountWithPlaid(bankAccountID, bankAccountData); - } + }, [props.reimbursementAccount, props.reimbursementAccountDraft, plaidData]); - render() { - const bankAccountID = lodashGet(this.props.reimbursementAccount, 'achData.bankAccountID') || 0; - const selectedPlaidAccountID = lodashGet(this.props.reimbursementAccountDraft, 'plaidAccountID', ''); + const bankAccountID = lodashGet(props.reimbursementAccount, 'achData.bankAccountID') || 0; + const selectedPlaidAccountID = lodashGet(props.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')) && ( + ( + + {props.translate('common.iAcceptThe')} + {props.translate('common.expensifyTermsOfService')} + + )} + defaultValue={props.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; +BankAccountPlaidStep.displayName = 'BankAccountPlaidStep'; export default compose( withLocalize, withOnyx({ From 6ec4c46a2c035621cadab7dc01f94e410d284e7b Mon Sep 17 00:00:00 2001 From: payal-lathidadiya <130229379+payal-lathidadiya@users.noreply.github.com> Date: Wed, 28 Jun 2023 19:27:19 +0530 Subject: [PATCH 2/4] move props de-structuring outside function argument --- src/pages/ReimbursementAccount/BankAccountPlaidStep.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/pages/ReimbursementAccount/BankAccountPlaidStep.js b/src/pages/ReimbursementAccount/BankAccountPlaidStep.js index 4642ded479cd..f0c64545ad24 100644 --- a/src/pages/ReimbursementAccount/BankAccountPlaidStep.js +++ b/src/pages/ReimbursementAccount/BankAccountPlaidStep.js @@ -39,7 +39,9 @@ const defaultProps = { plaidLinkOAuthToken: '', }; -function BankAccountPlaidStep({plaidData, receivedRedirectURI, plaidLinkOAuthToken, ...props}) { +function BankAccountPlaidStep(props) { + const {plaidData, receivedRedirectURI, plaidLinkOAuthToken} = props; + const validate = useCallback((values) => { const errorFields = {}; if (!values.acceptTerms) { From 4aba13bcdce58c69bc914bca9b4b1a4b3076b6eb Mon Sep 17 00:00:00 2001 From: payal-lathidadiya <130229379+payal-lathidadiya@users.noreply.github.com> Date: Mon, 3 Jul 2023 09:48:37 +0530 Subject: [PATCH 3/4] replace withLocalize HOC with useLocalize hook --- .../BankAccountPlaidStep.js | 29 +++++++++---------- 1 file changed, 13 insertions(+), 16 deletions(-) diff --git a/src/pages/ReimbursementAccount/BankAccountPlaidStep.js b/src/pages/ReimbursementAccount/BankAccountPlaidStep.js index 7a16a9e60c99..3bb4063ca827 100644 --- a/src/pages/ReimbursementAccount/BankAccountPlaidStep.js +++ b/src/pages/ReimbursementAccount/BankAccountPlaidStep.js @@ -6,8 +6,6 @@ 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, @@ -41,6 +40,7 @@ const defaultProps = { function BankAccountPlaidStep(props) { const {plaidData, receivedRedirectURI, plaidLinkOAuthToken} = props; + const {translate} = useLocalize(); const validate = useCallback((values) => { const errorFields = {}; @@ -81,7 +81,7 @@ function BankAccountPlaidStep(props) { shouldShowOfflineIndicator={false} > { ReimbursementAccount.updateReimbursementAccountDraft({plaidAccountID}); }} @@ -111,13 +111,13 @@ function BankAccountPlaidStep(props) { /> {Boolean(selectedPlaidAccountID) && !_.isEmpty(lodashGet(plaidData, 'bankAccounts')) && ( ( - {props.translate('common.iAcceptThe')} - {props.translate('common.expensifyTermsOfService')} + {translate('common.iAcceptThe')} + {translate('common.expensifyTermsOfService')} )} defaultValue={props.getDefaultStateForField('acceptTerms', false)} @@ -132,11 +132,8 @@ function BankAccountPlaidStep(props) { BankAccountPlaidStep.propTypes = propTypes; BankAccountPlaidStep.defaultProps = defaultProps; BankAccountPlaidStep.displayName = 'BankAccountPlaidStep'; -export default compose( - withLocalize, - withOnyx({ - plaidData: { - key: ONYXKEYS.PLAID_DATA, - }, - }), -)(BankAccountPlaidStep); +export default withOnyx({ + plaidData: { + key: ONYXKEYS.PLAID_DATA, + }, +})(BankAccountPlaidStep); From dabf0f220b0285d6574c4175aa92b4bd1ad336c9 Mon Sep 17 00:00:00 2001 From: payal-lathidadiya <130229379+payal-lathidadiya@users.noreply.github.com> Date: Wed, 5 Jul 2023 15:17:30 +0530 Subject: [PATCH 4/4] destructuring other props --- .../ReimbursementAccount/BankAccountPlaidStep.js | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/src/pages/ReimbursementAccount/BankAccountPlaidStep.js b/src/pages/ReimbursementAccount/BankAccountPlaidStep.js index 3bb4063ca827..d74bea73eda0 100644 --- a/src/pages/ReimbursementAccount/BankAccountPlaidStep.js +++ b/src/pages/ReimbursementAccount/BankAccountPlaidStep.js @@ -39,7 +39,7 @@ const defaultProps = { }; function BankAccountPlaidStep(props) { - const {plaidData, receivedRedirectURI, plaidLinkOAuthToken} = props; + const {plaidData, receivedRedirectURI, plaidLinkOAuthToken, reimbursementAccount, reimbursementAccountDraft, onBackButtonPress, getDefaultStateForField} = props; const {translate} = useLocalize(); const validate = useCallback((values) => { @@ -53,7 +53,7 @@ function BankAccountPlaidStep(props) { const submit = useCallback(() => { const selectedPlaidBankAccount = _.findWhere(lodashGet(plaidData, 'bankAccounts', []), { - plaidAccountID: lodashGet(props.reimbursementAccountDraft, 'plaidAccountID', ''), + plaidAccountID: lodashGet(reimbursementAccountDraft, 'plaidAccountID', ''), }); const bankAccountData = { @@ -67,12 +67,12 @@ function BankAccountPlaidStep(props) { }; ReimbursementAccount.updateReimbursementAccountDraft(bankAccountData); - const bankAccountID = lodashGet(props.reimbursementAccount, 'achData.bankAccountID') || 0; + const bankAccountID = lodashGet(reimbursementAccount, 'achData.bankAccountID') || 0; BankAccounts.connectBankAccountWithPlaid(bankAccountID, bankAccountData); - }, [props.reimbursementAccount, props.reimbursementAccountDraft, plaidData]); + }, [reimbursementAccount, reimbursementAccountDraft, plaidData]); - const bankAccountID = lodashGet(props.reimbursementAccount, 'achData.bankAccountID') || 0; - const selectedPlaidAccountID = lodashGet(props.reimbursementAccountDraft, 'plaidAccountID', ''); + const bankAccountID = lodashGet(reimbursementAccount, 'achData.bankAccountID') || 0; + const selectedPlaidAccountID = lodashGet(reimbursementAccountDraft, 'plaidAccountID', ''); return (
{translate('common.expensifyTermsOfService')} )} - defaultValue={props.getDefaultStateForField('acceptTerms', false)} + defaultValue={getDefaultStateForField('acceptTerms', false)} shouldSaveDraft /> )}