From ed23446f9e24049bb88c0634309d1f6d980db8aa Mon Sep 17 00:00:00 2001 From: Vishrut Agarwalla Date: Wed, 5 Jul 2023 11:58:03 +0530 Subject: [PATCH 1/8] Refactored React Functional Component --- .../BankAccountManualStep.js | 145 +++++++++--------- 1 file changed, 69 insertions(+), 76 deletions(-) diff --git a/src/pages/ReimbursementAccount/BankAccountManualStep.js b/src/pages/ReimbursementAccount/BankAccountManualStep.js index ad62c7622b45..5d88939ed954 100644 --- a/src/pages/ReimbursementAccount/BankAccountManualStep.js +++ b/src/pages/ReimbursementAccount/BankAccountManualStep.js @@ -1,4 +1,4 @@ -import React from 'react'; +import React, {useCallback} from 'react'; import {Image} from 'react-native'; import lodashGet from 'lodash/get'; import HeaderWithBackButton from '../../components/HeaderWithBackButton'; @@ -22,18 +22,12 @@ const propTypes = { ...StepPropTypes, }; -class BankAccountManualStep extends React.Component { - constructor(props) { - super(props); - this.submit = this.submit.bind(this); - this.validate = this.validate.bind(this); - } - +function BankAccountManualStep(props) { /** * @param {Object} values - form input values passed by the Form component * @returns {Object} */ - validate(values) { + const validate = useCallback((values) => { const errorFields = {}; const routingNumber = values.routingNumber && values.routingNumber.trim(); @@ -43,7 +37,7 @@ class BankAccountManualStep extends React.Component { ) { errorFields.accountNumber = 'bankAccount.error.accountNumber'; } else if (values.accountNumber === routingNumber) { - errorFields.accountNumber = this.props.translate('bankAccount.error.routingAndAccountNumberCannotBeSame'); + errorFields.accountNumber = props.translate('bankAccount.error.routingAndAccountNumberCannotBeSame'); } if (!routingNumber || !CONST.BANK_ACCOUNT.REGEX.SWIFT_BIC.test(routingNumber) || !ValidationUtils.isValidRoutingNumber(routingNumber)) { errorFields.routingNumber = 'bankAccount.error.routingNumber'; @@ -53,81 +47,80 @@ class BankAccountManualStep extends React.Component { } return errorFields; - } + }); - submit(values) { + const submit = useCallback((values) => { BankAccounts.connectBankAccountManually( - lodashGet(this.props.reimbursementAccount, 'achData.bankAccountID') || 0, + lodashGet(props.reimbursementAccount, 'achData.bankAccountID') || 0, values.accountNumber, values.routingNumber, - lodashGet(this.props, ['reimbursementAccountDraft', 'plaidMask']), + lodashGet(props, ['reimbursementAccountDraft', 'plaidMask']), ); - } + }); - render() { - const shouldDisableInputs = Boolean(lodashGet(this.props.reimbursementAccount, 'achData.bankAccountID')); + const shouldDisableInputs = Boolean(lodashGet(props.reimbursementAccount, 'achData.bankAccountID')); - return ( - - + +
+ {props.translate('bankAccount.checkHelpLine')} + - - {this.props.translate('bankAccount.checkHelpLine')} - - - - ( - - {this.props.translate('common.iAcceptThe')} - {this.props.translate('common.expensifyTermsOfService')} - - )} - defaultValue={this.props.getDefaultStateForField('acceptTerms', false)} - shouldSaveDraft - /> - -
- ); - } + + + ( + + {props.translate('common.iAcceptThe')} + {props.translate('common.expensifyTermsOfService')} + + )} + defaultValue={props.getDefaultStateForField('acceptTerms', false)} + shouldSaveDraft + /> + + + ); } BankAccountManualStep.propTypes = propTypes; +BankAccountManualStep.display = 'BankAccountManualStep'; export default withLocalize(BankAccountManualStep); From 87f3acb0d8b261e70b5519a511339efcf0f1c96a Mon Sep 17 00:00:00 2001 From: Vishrut Agarwalla Date: Wed, 5 Jul 2023 16:59:07 +0530 Subject: [PATCH 2/8] Refactored React Functional Component --- src/pages/ReimbursementAccount/BankAccountManualStep.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/ReimbursementAccount/BankAccountManualStep.js b/src/pages/ReimbursementAccount/BankAccountManualStep.js index 5d88939ed954..db0073f853bd 100644 --- a/src/pages/ReimbursementAccount/BankAccountManualStep.js +++ b/src/pages/ReimbursementAccount/BankAccountManualStep.js @@ -122,5 +122,5 @@ function BankAccountManualStep(props) { } BankAccountManualStep.propTypes = propTypes; -BankAccountManualStep.display = 'BankAccountManualStep'; +BankAccountManualStep.displayName = 'BankAccountManualStep'; export default withLocalize(BankAccountManualStep); From e2e16764047b775894f9e0c8aa12e7b86af10b17 Mon Sep 17 00:00:00 2001 From: Vishrut Agarwalla Date: Wed, 5 Jul 2023 19:03:25 +0530 Subject: [PATCH 3/8] Added Dependency Arrays --- .../BankAccountManualStep.js | 65 ++++++++++--------- 1 file changed, 36 insertions(+), 29 deletions(-) diff --git a/src/pages/ReimbursementAccount/BankAccountManualStep.js b/src/pages/ReimbursementAccount/BankAccountManualStep.js index db0073f853bd..0616e458c543 100644 --- a/src/pages/ReimbursementAccount/BankAccountManualStep.js +++ b/src/pages/ReimbursementAccount/BankAccountManualStep.js @@ -23,40 +23,47 @@ const propTypes = { }; function BankAccountManualStep(props) { + const {translate, reimbursementAccount, reimbursementAccountDraft} = props; /** * @param {Object} values - form input values passed by the Form component * @returns {Object} */ - const validate = useCallback((values) => { - const errorFields = {}; - const routingNumber = values.routingNumber && values.routingNumber.trim(); + const validate = useCallback( + (values) => { + const errorFields = {}; + const routingNumber = values.routingNumber && values.routingNumber.trim(); - if ( - !values.accountNumber || - (!CONST.BANK_ACCOUNT.REGEX.US_ACCOUNT_NUMBER.test(values.accountNumber.trim()) && !CONST.BANK_ACCOUNT.REGEX.MASKED_US_ACCOUNT_NUMBER.test(values.accountNumber.trim())) - ) { - errorFields.accountNumber = 'bankAccount.error.accountNumber'; - } else if (values.accountNumber === routingNumber) { - errorFields.accountNumber = props.translate('bankAccount.error.routingAndAccountNumberCannotBeSame'); - } - if (!routingNumber || !CONST.BANK_ACCOUNT.REGEX.SWIFT_BIC.test(routingNumber) || !ValidationUtils.isValidRoutingNumber(routingNumber)) { - errorFields.routingNumber = 'bankAccount.error.routingNumber'; - } - if (!values.acceptTerms) { - errorFields.acceptTerms = 'common.error.acceptTerms'; - } + if ( + !values.accountNumber || + (!CONST.BANK_ACCOUNT.REGEX.US_ACCOUNT_NUMBER.test(values.accountNumber.trim()) && !CONST.BANK_ACCOUNT.REGEX.MASKED_US_ACCOUNT_NUMBER.test(values.accountNumber.trim())) + ) { + errorFields.accountNumber = 'bankAccount.error.accountNumber'; + } else if (values.accountNumber === routingNumber) { + errorFields.accountNumber = props.translate('bankAccount.error.routingAndAccountNumberCannotBeSame'); + } + if (!routingNumber || !CONST.BANK_ACCOUNT.REGEX.SWIFT_BIC.test(routingNumber) || !ValidationUtils.isValidRoutingNumber(routingNumber)) { + errorFields.routingNumber = 'bankAccount.error.routingNumber'; + } + if (!values.acceptTerms) { + errorFields.acceptTerms = 'common.error.acceptTerms'; + } - return errorFields; - }); + return errorFields; + }, + [translate], + ); - const submit = useCallback((values) => { - BankAccounts.connectBankAccountManually( - lodashGet(props.reimbursementAccount, 'achData.bankAccountID') || 0, - values.accountNumber, - values.routingNumber, - lodashGet(props, ['reimbursementAccountDraft', 'plaidMask']), - ); - }); + const submit = useCallback( + (values) => { + BankAccounts.connectBankAccountManually( + lodashGet(props.reimbursementAccount, 'achData.bankAccountID') || 0, + values.accountNumber, + values.routingNumber, + lodashGet(props, ['reimbursementAccountDraft', 'plaidMask']), + ); + }, + [reimbursementAccount, reimbursementAccountDraft], + ); const shouldDisableInputs = Boolean(lodashGet(props.reimbursementAccount, 'achData.bankAccountID')); @@ -87,7 +94,7 @@ function BankAccountManualStep(props) { shouldDelayFocus={shouldDelayFocus} inputID="routingNumber" label={props.translate('bankAccount.routingNumber')} - defaultValue={props.getDefaultStateForField('routingNumber', '')} + value={props.getDefaultStateForField('routingNumber', '')} keyboardType={CONST.KEYBOARD_TYPE.NUMBER_PAD} disabled={shouldDisableInputs} shouldSaveDraft @@ -97,7 +104,7 @@ function BankAccountManualStep(props) { inputID="accountNumber" containerStyles={[styles.mt4]} label={props.translate('bankAccount.accountNumber')} - defaultValue={props.getDefaultStateForField('accountNumber', '')} + value={props.getDefaultStateForField('accountNumber', '')} keyboardType={CONST.KEYBOARD_TYPE.NUMBER_PAD} disabled={shouldDisableInputs} shouldSaveDraft From a214f28159db066c09567c29635f2de0cdb0f5e5 Mon Sep 17 00:00:00 2001 From: Vishrut Agarwalla Date: Sat, 8 Jul 2023 11:13:36 +0530 Subject: [PATCH 4/8] useLocalize Hook Added and Prop Destructuring --- .../BankAccountManualStep.js | 41 ++++++++++--------- 1 file changed, 21 insertions(+), 20 deletions(-) diff --git a/src/pages/ReimbursementAccount/BankAccountManualStep.js b/src/pages/ReimbursementAccount/BankAccountManualStep.js index 0616e458c543..39b3037c7a26 100644 --- a/src/pages/ReimbursementAccount/BankAccountManualStep.js +++ b/src/pages/ReimbursementAccount/BankAccountManualStep.js @@ -9,7 +9,7 @@ import TextInput from '../../components/TextInput'; import styles from '../../styles/styles'; import CheckboxWithLabel from '../../components/CheckboxWithLabel'; import TextLink from '../../components/TextLink'; -import withLocalize from '../../components/withLocalize'; +import useLocalize from '../../hooks/useLocalize'; import * as ValidationUtils from '../../libs/ValidationUtils'; import ONYXKEYS from '../../ONYXKEYS'; import exampleCheckImage from './exampleCheckImage'; @@ -23,7 +23,8 @@ const propTypes = { }; function BankAccountManualStep(props) { - const {translate, reimbursementAccount, reimbursementAccountDraft} = props; + const {translate} = useLocalize(); + const {reimbursementAccount, reimbursementAccountDraft, onBackButtonPress, preferredLocale, getDefaultStateForField} = props; /** * @param {Object} values - form input values passed by the Form component * @returns {Object} @@ -39,7 +40,7 @@ function BankAccountManualStep(props) { ) { errorFields.accountNumber = 'bankAccount.error.accountNumber'; } else if (values.accountNumber === routingNumber) { - errorFields.accountNumber = props.translate('bankAccount.error.routingAndAccountNumberCannotBeSame'); + errorFields.accountNumber = translate('bankAccount.error.routingAndAccountNumberCannotBeSame'); } if (!routingNumber || !CONST.BANK_ACCOUNT.REGEX.SWIFT_BIC.test(routingNumber) || !ValidationUtils.isValidRoutingNumber(routingNumber)) { errorFields.routingNumber = 'bankAccount.error.routingNumber'; @@ -56,45 +57,45 @@ function BankAccountManualStep(props) { const submit = useCallback( (values) => { BankAccounts.connectBankAccountManually( - lodashGet(props.reimbursementAccount, 'achData.bankAccountID') || 0, + lodashGet(reimbursementAccount, ['achData.bankAccountID']) || 0, values.accountNumber, values.routingNumber, - lodashGet(props, ['reimbursementAccountDraft', 'plaidMask']), + lodashGet(reimbursementAccountDraft, ['plaidMask']), ); }, [reimbursementAccount, reimbursementAccountDraft], ); - const shouldDisableInputs = Boolean(lodashGet(props.reimbursementAccount, 'achData.bankAccountID')); + const shouldDisableInputs = Boolean(lodashGet(reimbursementAccount, ['achData.bankAccountID'])); return (
- {props.translate('bankAccount.checkHelpLine')} + {translate('bankAccount.checkHelpLine')} ( - {props.translate('common.iAcceptThe')} - {props.translate('common.expensifyTermsOfService')} + {translate('common.iAcceptThe')} + {translate('common.expensifyTermsOfService')} )} - defaultValue={props.getDefaultStateForField('acceptTerms', false)} + defaultValue={getDefaultStateForField('acceptTerms', false)} shouldSaveDraft /> @@ -130,4 +131,4 @@ function BankAccountManualStep(props) { BankAccountManualStep.propTypes = propTypes; BankAccountManualStep.displayName = 'BankAccountManualStep'; -export default withLocalize(BankAccountManualStep); +export default BankAccountManualStep; From bc36afd94e4903b1a1c7b6c5df3e471cf69f335d Mon Sep 17 00:00:00 2001 From: Vishrut Agarwalla Date: Sat, 8 Jul 2023 15:08:04 +0530 Subject: [PATCH 5/8] Think it gets merged now --- .../ReimbursementAccount/BankAccountManualStep.js | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/src/pages/ReimbursementAccount/BankAccountManualStep.js b/src/pages/ReimbursementAccount/BankAccountManualStep.js index 39b3037c7a26..d5f877deb675 100644 --- a/src/pages/ReimbursementAccount/BankAccountManualStep.js +++ b/src/pages/ReimbursementAccount/BankAccountManualStep.js @@ -23,8 +23,8 @@ const propTypes = { }; function BankAccountManualStep(props) { - const {translate} = useLocalize(); - const {reimbursementAccount, reimbursementAccountDraft, onBackButtonPress, preferredLocale, getDefaultStateForField} = props; + const {translate, preferredLocale} = useLocalize(); + const {reimbursementAccount, reimbursementAccountDraft} = props; /** * @param {Object} values - form input values passed by the Form component * @returns {Object} @@ -75,7 +75,7 @@ function BankAccountManualStep(props) { stepCounter={{step: 1, total: 5}} shouldShowGetAssistanceButton guidesCallTaskID={CONST.GUIDES_CALL_TASK_IDS.WORKSPACE_BANK_ACCOUNT} - onBackButtonPress={onBackButtonPress} + onBackButtonPress={props.onBackButtonPress} />
{translate('common.expensifyTermsOfService')} )} - defaultValue={getDefaultStateForField('acceptTerms', false)} + defaultValue={props.getDefaultStateForField('acceptTerms', false)} shouldSaveDraft />
From 5e3e885f96923e552456092e378dd02a9e40b199 Mon Sep 17 00:00:00 2001 From: Vishrut Agarwalla Date: Sat, 8 Jul 2023 15:44:23 +0530 Subject: [PATCH 6/8] Changes Done --- src/pages/ReimbursementAccount/BankAccountManualStep.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/pages/ReimbursementAccount/BankAccountManualStep.js b/src/pages/ReimbursementAccount/BankAccountManualStep.js index d5f877deb675..519412e2a92b 100644 --- a/src/pages/ReimbursementAccount/BankAccountManualStep.js +++ b/src/pages/ReimbursementAccount/BankAccountManualStep.js @@ -1,4 +1,5 @@ import React, {useCallback} from 'react'; +import _ from 'lodash'; import {Image} from 'react-native'; import lodashGet from 'lodash/get'; import HeaderWithBackButton from '../../components/HeaderWithBackButton'; @@ -10,6 +11,7 @@ import styles from '../../styles/styles'; import CheckboxWithLabel from '../../components/CheckboxWithLabel'; import TextLink from '../../components/TextLink'; import useLocalize from '../../hooks/useLocalize'; +import {withLocalizePropTypes} from '../../components/withLocalize'; import * as ValidationUtils from '../../libs/ValidationUtils'; import ONYXKEYS from '../../ONYXKEYS'; import exampleCheckImage from './exampleCheckImage'; @@ -19,7 +21,7 @@ import ScreenWrapper from '../../components/ScreenWrapper'; import StepPropTypes from './StepPropTypes'; const propTypes = { - ...StepPropTypes, + ..._.omit(StepPropTypes, _.keys(withLocalizePropTypes)), }; function BankAccountManualStep(props) { From da2f28855a97d27e6a98fee5cf464b10324b1800 Mon Sep 17 00:00:00 2001 From: Vishrut Agarwalla Date: Sat, 8 Jul 2023 16:53:38 +0530 Subject: [PATCH 7/8] Use defaultValue for textInputs in the Form --- src/pages/ReimbursementAccount/BankAccountManualStep.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/ReimbursementAccount/BankAccountManualStep.js b/src/pages/ReimbursementAccount/BankAccountManualStep.js index 519412e2a92b..3c2456c6c91e 100644 --- a/src/pages/ReimbursementAccount/BankAccountManualStep.js +++ b/src/pages/ReimbursementAccount/BankAccountManualStep.js @@ -1,5 +1,5 @@ import React, {useCallback} from 'react'; -import _ from 'lodash'; +import _ from 'underscore'; import {Image} from 'react-native'; import lodashGet from 'lodash/get'; import HeaderWithBackButton from '../../components/HeaderWithBackButton'; From a23ca39b07136c21262e493b713fb3923a912045 Mon Sep 17 00:00:00 2001 From: Vishrut Agarwalla Date: Sat, 8 Jul 2023 23:14:53 +0530 Subject: [PATCH 8/8] In the TextInput Value changed to defaultValue --- src/pages/ReimbursementAccount/BankAccountManualStep.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/pages/ReimbursementAccount/BankAccountManualStep.js b/src/pages/ReimbursementAccount/BankAccountManualStep.js index 3c2456c6c91e..96d5cc27a6d8 100644 --- a/src/pages/ReimbursementAccount/BankAccountManualStep.js +++ b/src/pages/ReimbursementAccount/BankAccountManualStep.js @@ -97,7 +97,7 @@ function BankAccountManualStep(props) { shouldDelayFocus={shouldDelayFocus} inputID="routingNumber" label={translate('bankAccount.routingNumber')} - value={props.getDefaultStateForField('routingNumber', '')} + defaultValue={props.getDefaultStateForField('routingNumber', '')} keyboardType={CONST.KEYBOARD_TYPE.NUMBER_PAD} disabled={shouldDisableInputs} shouldSaveDraft @@ -107,7 +107,7 @@ function BankAccountManualStep(props) { inputID="accountNumber" containerStyles={[styles.mt4]} label={translate('bankAccount.accountNumber')} - value={props.getDefaultStateForField('accountNumber', '')} + defaultValue={props.getDefaultStateForField('accountNumber', '')} keyboardType={CONST.KEYBOARD_TYPE.NUMBER_PAD} disabled={shouldDisableInputs} shouldSaveDraft