From 40933a03a63c1b55182174412a47100439487655 Mon Sep 17 00:00:00 2001 From: oleh Date: Wed, 7 Jun 2023 13:21:03 +0300 Subject: [PATCH 1/7] Migrate ACHContractStep.js to function component --- .../ReimbursementAccount/ACHContractStep.js | 342 +++++++++--------- 1 file changed, 162 insertions(+), 180 deletions(-) diff --git a/src/pages/ReimbursementAccount/ACHContractStep.js b/src/pages/ReimbursementAccount/ACHContractStep.js index ae1225291473..aae368e85e00 100644 --- a/src/pages/ReimbursementAccount/ACHContractStep.js +++ b/src/pages/ReimbursementAccount/ACHContractStep.js @@ -1,17 +1,18 @@ import _ from 'underscore'; import lodashGet from 'lodash/get'; -import React from 'react'; +import React, {useState} from 'react'; import PropTypes from 'prop-types'; import {View} from 'react-native'; import Str from 'expensify-common/lib/str'; import Text from '../../components/Text'; -import HeaderWithBackButton from '../../components/HeaderWithBackButton'; +import HeaderWithCloseButton from '../../components/HeaderWithCloseButton'; import styles from '../../styles/styles'; import CheckboxWithLabel from '../../components/CheckboxWithLabel'; import TextLink from '../../components/TextLink'; import IdentityForm from './IdentityForm'; import withLocalize from '../../components/withLocalize'; import * as BankAccounts from '../../libs/actions/BankAccounts'; +import Navigation from '../../libs/Navigation/Navigation'; import CONST from '../../CONST'; import * as ValidationUtils from '../../libs/ValidationUtils'; import ONYXKEYS from '../../ONYXKEYS'; @@ -27,25 +28,14 @@ const propTypes = { companyName: PropTypes.string.isRequired, }; -class ACHContractStep extends React.Component { - constructor(props) { - super(props); - this.validate = this.validate.bind(this); - - this.addBeneficialOwner = this.addBeneficialOwner.bind(this); - this.submit = this.submit.bind(this); - - this.state = { - // Array of strings containing the keys to render associated Identity Forms - beneficialOwners: lodashGet(this.props.reimbursementAccountDraft, 'beneficialOwners', lodashGet(this.props.reimbursementAccount, 'achData.beneficialOwners', [])), - }; - } +function ACHContractStep (props) { + const [beneficialOwners, setBeneficialOwners] = useState(lodashGet(props.reimbursementAccountDraft, 'beneficialOwners', lodashGet(props.reimbursementAccount, 'achData.beneficialOwners', []))); /** * @param {Object} values - input values passed by the Form component * @returns {Object} */ - validate(values) { + const validate = (values) => { const errors = {}; const errorKeys = { @@ -55,43 +45,43 @@ class ACHContractStep extends React.Component { }; const requiredFields = ['firstName', 'lastName', 'dob', 'ssnLast4', 'street', 'city', 'zipCode', 'state']; if (values.hasOtherBeneficialOwners) { - _.each(this.state.beneficialOwners, (ownerKey) => { + _.each(beneficialOwners, (ownerKey) => { // eslint-disable-next-line rulesdir/prefer-early-return _.each(requiredFields, (inputKey) => { if (!ValidationUtils.isRequiredFulfilled(values[`beneficialOwner_${ownerKey}_${inputKey}`])) { const errorKey = errorKeys[inputKey] || inputKey; - errors[`beneficialOwner_${ownerKey}_${inputKey}`] = this.props.translate(`bankAccount.error.${errorKey}`); + errors[`beneficialOwner_${ownerKey}_${inputKey}`] = props.translate(`bankAccount.error.${errorKey}`); } }); if (values[`beneficialOwner_${ownerKey}_dob`]) { if (!ValidationUtils.meetsMinimumAgeRequirement(values[`beneficialOwner_${ownerKey}_dob`])) { - errors[`beneficialOwner_${ownerKey}_dob`] = this.props.translate('bankAccount.error.age'); + errors[`beneficialOwner_${ownerKey}_dob`] = props.translate('bankAccount.error.age'); } else if (!ValidationUtils.meetsMaximumAgeRequirement(values[`beneficialOwner_${ownerKey}_dob`])) { - errors[`beneficialOwner_${ownerKey}_dob`] = this.props.translate('bankAccount.error.dob'); + errors[`beneficialOwner_${ownerKey}_dob`] = props.translate('bankAccount.error.dob'); } } if (values[`beneficialOwner_${ownerKey}_ssnLast4`] && !ValidationUtils.isValidSSNLastFour(values[`beneficialOwner_${ownerKey}_ssnLast4`])) { - errors[`beneficialOwner_${ownerKey}_ssnLast4`] = this.props.translate('bankAccount.error.ssnLast4'); + errors[`beneficialOwner_${ownerKey}_ssnLast4`] = props.translate('bankAccount.error.ssnLast4'); } if (values[`beneficialOwner_${ownerKey}_street`] && !ValidationUtils.isValidAddress(values[`beneficialOwner_${ownerKey}_street`])) { - errors[`beneficialOwner_${ownerKey}_street`] = this.props.translate('bankAccount.error.addressStreet'); + errors[`beneficialOwner_${ownerKey}_street`] = props.translate('bankAccount.error.addressStreet'); } if (values[`beneficialOwner_${ownerKey}_zipCode`] && !ValidationUtils.isValidZipCode(values[`beneficialOwner_${ownerKey}_zipCode`])) { - errors[`beneficialOwner_${ownerKey}_zipCode`] = this.props.translate('bankAccount.error.zipCode'); + errors[`beneficialOwner_${ownerKey}_zipCode`] = props.translate('bankAccount.error.zipCode'); } }); } if (!ValidationUtils.isRequiredFulfilled(values.acceptTermsAndConditions)) { - errors.acceptTermsAndConditions = this.props.translate('common.error.acceptTerms'); + errors.acceptTermsAndConditions = props.translate('common.error.acceptTerms'); } if (!ValidationUtils.isRequiredFulfilled(values.certifyTrueInformation)) { - errors.certifyTrueInformation = this.props.translate('beneficialOwnersStep.error.certify'); + errors.certifyTrueInformation = props.translate('beneficialOwnersStep.error.certify'); } return errors; @@ -100,44 +90,35 @@ class ACHContractStep extends React.Component { /** * @param {Number} ownerKey - ID connected to the beneficial owner identity form */ - removeBeneficialOwner(ownerKey) { - this.setState((prevState) => { - const beneficialOwners = _.without(prevState.beneficialOwners, ownerKey); - - FormActions.setDraftValues(ONYXKEYS.REIMBURSEMENT_ACCOUNT, {beneficialOwners}); - - return {beneficialOwners}; - }); + const removeBeneficialOwner = (ownerKey) => { + const previousBeneficialOwners = _.without(beneficialOwners, ownerKey); + FormActions.setDraftValues(ONYXKEYS.REIMBURSEMENT_ACCOUNT, {previousBeneficialOwners}); + setBeneficialOwners(previousBeneficialOwners); } - addBeneficialOwner() { - this.setState((prevState) => { - // Each beneficial owner is assigned a unique key that will connect it to an Identity Form. - // That way we can dynamically render each Identity Form based on which keys are present in the beneficial owners array. - const beneficialOwners = [...prevState.beneficialOwners, Str.guid()]; - - FormActions.setDraftValues(ONYXKEYS.REIMBURSEMENT_ACCOUNT, {beneficialOwners}); - return {beneficialOwners}; - }); + const addBeneficialOwner = () => { + // Each beneficial owner is assigned a unique key that will connect it to an Identity Form. + // That way we can dynamically render each Identity Form based on which keys are present in the beneficial owners array. + const newBeneficialOwners = [...beneficialOwners, Str.guid()]; + FormActions.setDraftValues(ONYXKEYS.REIMBURSEMENT_ACCOUNT, {beneficialOwners}); + setBeneficialOwners(newBeneficialOwners); } /** * @param {Boolean} ownsMoreThan25Percent * @returns {Boolean} */ - canAddMoreBeneficialOwners(ownsMoreThan25Percent) { - return _.size(this.state.beneficialOwners) < 3 || (_.size(this.state.beneficialOwners) === 3 && !ownsMoreThan25Percent); - } + const canAddMoreBeneficialOwners = (ownsMoreThan25Percent) => _.size(beneficialOwners) < 3 || (_.size(beneficialOwners) === 3 && !ownsMoreThan25Percent); /** * @param {Object} values - object containing form input values */ - submit(values) { - const bankAccountID = lodashGet(this.props.reimbursementAccount, 'achData.bankAccountID') || 0; + const submit = (values) => { + const bankAccountID = lodashGet(props.reimbursementAccount, 'achData.bankAccountID') || 0; - const beneficialOwners = !values.hasOtherBeneficialOwners + const updatedBeneficialOwners = !values.hasOtherBeneficialOwners ? [] - : _.map(this.state.beneficialOwners, (ownerKey) => ({ + : _.map(beneficialOwners, (ownerKey) => ({ firstName: lodashGet(values, `beneficialOwner_${ownerKey}_firstName`), lastName: lodashGet(values, `beneficialOwner_${ownerKey}_lastName`), dob: lodashGet(values, `beneficialOwner_${ownerKey}_dob`), @@ -153,144 +134,145 @@ class ACHContractStep extends React.Component { hasOtherBeneficialOwners: values.hasOtherBeneficialOwners, acceptTermsAndConditions: values.acceptTermsAndConditions, certifyTrueInformation: values.certifyTrueInformation, - beneficialOwners: JSON.stringify(beneficialOwners), + beneficialOwners: JSON.stringify(updatedBeneficialOwners), bankAccountID, }); } - render() { - return ( - - -
- {({inputValues}) => ( - <> - - {this.props.translate('beneficialOwnersStep.checkAllThatApply')} - - ( - - {this.props.translate('beneficialOwnersStep.iOwnMoreThan25Percent')} - {this.props.companyName} - - )} - // eslint-disable-next-line rulesdir/prefer-early-return - onValueChange={(ownsMoreThan25Percent) => { - if (ownsMoreThan25Percent && this.state.beneficialOwners.length > 3) { - // If the user owns more than 25% of the company, then there can only be a maximum of 3 other beneficial owners who owns more than 25%. - // We have to remove the 4th beneficial owner if the checkbox is checked. - this.setState((prevState) => ({beneficialOwners: prevState.beneficialOwners.slice(0, -1)})); - } - }} - defaultValue={this.props.getDefaultStateForField('ownsMoreThan25Percent', false)} - shouldSaveDraft - /> - ( - - {this.props.translate('beneficialOwnersStep.someoneOwnsMoreThan25Percent')} - {this.props.companyName} - - )} - // eslint-disable-next-line rulesdir/prefer-early-return - onValueChange={(hasOtherBeneficialOwners) => { - if (hasOtherBeneficialOwners && this.state.beneficialOwners.length === 0) { - this.addBeneficialOwner(); - } - }} - defaultValue={this.props.getDefaultStateForField('hasOtherBeneficialOwners', false)} - shouldSaveDraft - /> - {Boolean(inputValues.hasOtherBeneficialOwners) && ( - - {_.map(this.state.beneficialOwners, (ownerKey, index) => ( - - {this.props.translate('beneficialOwnersStep.additionalOwner')} - - {this.state.beneficialOwners.length > 1 && ( - this.removeBeneficialOwner(ownerKey)}>{this.props.translate('beneficialOwnersStep.removeOwner')} - )} - - ))} - {this.canAddMoreBeneficialOwners(inputValues.ownsMoreThan25Percent) && ( - - {this.props.translate('beneficialOwnersStep.addAnotherIndividual')} - {this.props.companyName} - - )} - + return ( + + + + {({inputValues}) => ( + <> + + {props.translate('beneficialOwnersStep.checkAllThatApply')} + + ( + + {props.translate('beneficialOwnersStep.iOwnMoreThan25Percent')} + {props.companyName} + )} - {this.props.translate('beneficialOwnersStep.agreement')} - ( - - {this.props.translate('common.iAcceptThe')} - {`${this.props.translate('beneficialOwnersStep.termsAndConditions')}`} - + // eslint-disable-next-line rulesdir/prefer-early-return + onValueChange={(ownsMoreThan25Percent) => { + if (ownsMoreThan25Percent && beneficialOwners.length > 3) { + // If the user owns more than 25% of the company, then there can only be a maximum of 3 other beneficial owners who owns more than 25%. + // We have to remove the 4th beneficial owner if the checkbox is checked. + setBeneficialOwners(beneficialOwners.slice(0, -1)); + } + }} + defaultValue={props.getDefaultStateForField('ownsMoreThan25Percent', false)} + shouldSaveDraft + /> + ( + + {props.translate('beneficialOwnersStep.someoneOwnsMoreThan25Percent')} + {props.companyName} + + )} + // eslint-disable-next-line rulesdir/prefer-early-return + onValueChange={(hasOtherBeneficialOwners) => { + if (hasOtherBeneficialOwners && beneficialOwners.length === 0) { + addBeneficialOwner(); + } + }} + defaultValue={props.getDefaultStateForField('hasOtherBeneficialOwners', false)} + shouldSaveDraft + /> + {Boolean(inputValues.hasOtherBeneficialOwners) && ( + + {_.map(beneficialOwners, (ownerKey, index) => ( + + {props.translate('beneficialOwnersStep.additionalOwner')} + + {beneficialOwners.length > 1 && ( + removeBeneficialOwner(ownerKey)}>{props.translate('beneficialOwnersStep.removeOwner')} + )} + + ))} + {canAddMoreBeneficialOwners(inputValues.ownsMoreThan25Percent) && ( + + {props.translate('beneficialOwnersStep.addAnotherIndividual')} + {props.companyName} + )} - defaultValue={this.props.getDefaultStateForField('acceptTermsAndConditions', false)} - shouldSaveDraft - /> - {this.props.translate('beneficialOwnersStep.certifyTrueAndAccurate')}} - defaultValue={this.props.getDefaultStateForField('certifyTrueInformation', false)} - shouldSaveDraft - /> - - )} - - - ); - } + + )} + {props.translate('beneficialOwnersStep.agreement')} + ( + + {props.translate('common.iAcceptThe')} + {`${props.translate('beneficialOwnersStep.termsAndConditions')}`} + + )} + defaultValue={props.getDefaultStateForField('acceptTermsAndConditions', false)} + shouldSaveDraft + /> + {props.translate('beneficialOwnersStep.certifyTrueAndAccurate')}} + defaultValue={props.getDefaultStateForField('certifyTrueInformation', false)} + shouldSaveDraft + /> + + )} + +
+ ); } ACHContractStep.propTypes = propTypes; +ACHContractStep.displayName = 'ACHContractStep'; export default withLocalize(ACHContractStep); From 0ca81fab5f5bcff4504374c30d99723ad7e02d97 Mon Sep 17 00:00:00 2001 From: oleh Date: Wed, 7 Jun 2023 14:06:12 +0300 Subject: [PATCH 2/7] reflected updates from remote --- src/pages/ReimbursementAccount/ACHContractStep.js | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/src/pages/ReimbursementAccount/ACHContractStep.js b/src/pages/ReimbursementAccount/ACHContractStep.js index aae368e85e00..35339b507524 100644 --- a/src/pages/ReimbursementAccount/ACHContractStep.js +++ b/src/pages/ReimbursementAccount/ACHContractStep.js @@ -5,7 +5,7 @@ import PropTypes from 'prop-types'; import {View} from 'react-native'; import Str from 'expensify-common/lib/str'; import Text from '../../components/Text'; -import HeaderWithCloseButton from '../../components/HeaderWithCloseButton'; +import HeaderWithBackButton from '../../components/HeaderWithBackButton'; import styles from '../../styles/styles'; import CheckboxWithLabel from '../../components/CheckboxWithLabel'; import TextLink from '../../components/TextLink'; @@ -141,14 +141,12 @@ function ACHContractStep (props) { return ( -
Date: Wed, 7 Jun 2023 14:08:57 +0300 Subject: [PATCH 3/7] removed unused codes --- src/pages/ReimbursementAccount/ACHContractStep.js | 1 - 1 file changed, 1 deletion(-) diff --git a/src/pages/ReimbursementAccount/ACHContractStep.js b/src/pages/ReimbursementAccount/ACHContractStep.js index 35339b507524..9c0ed664319f 100644 --- a/src/pages/ReimbursementAccount/ACHContractStep.js +++ b/src/pages/ReimbursementAccount/ACHContractStep.js @@ -12,7 +12,6 @@ import TextLink from '../../components/TextLink'; import IdentityForm from './IdentityForm'; import withLocalize from '../../components/withLocalize'; import * as BankAccounts from '../../libs/actions/BankAccounts'; -import Navigation from '../../libs/Navigation/Navigation'; import CONST from '../../CONST'; import * as ValidationUtils from '../../libs/ValidationUtils'; import ONYXKEYS from '../../ONYXKEYS'; From 1f3de3d9dcd874b0103735ac7e20521b7ebe4ba2 Mon Sep 17 00:00:00 2001 From: oleh Date: Thu, 8 Jun 2023 23:41:07 +0300 Subject: [PATCH 4/7] fixed reviewer's comments --- .../ReimbursementAccount/ACHContractStep.js | 22 ++++++++++++------- 1 file changed, 14 insertions(+), 8 deletions(-) diff --git a/src/pages/ReimbursementAccount/ACHContractStep.js b/src/pages/ReimbursementAccount/ACHContractStep.js index 9c0ed664319f..9582974ec795 100644 --- a/src/pages/ReimbursementAccount/ACHContractStep.js +++ b/src/pages/ReimbursementAccount/ACHContractStep.js @@ -27,7 +27,7 @@ const propTypes = { companyName: PropTypes.string.isRequired, }; -function ACHContractStep (props) { +const ACHContractStep = (props) => { const [beneficialOwners, setBeneficialOwners] = useState(lodashGet(props.reimbursementAccountDraft, 'beneficialOwners', lodashGet(props.reimbursementAccount, 'achData.beneficialOwners', []))); /** @@ -90,17 +90,21 @@ function ACHContractStep (props) { * @param {Number} ownerKey - ID connected to the beneficial owner identity form */ const removeBeneficialOwner = (ownerKey) => { - const previousBeneficialOwners = _.without(beneficialOwners, ownerKey); - FormActions.setDraftValues(ONYXKEYS.REIMBURSEMENT_ACCOUNT, {previousBeneficialOwners}); - setBeneficialOwners(previousBeneficialOwners); + setBeneficialOwners(previousBeneficialOwners => { + const beneficialOwners = _.without(previousBeneficialOwners, ownerKey); + FormActions.setDraftValues(ONYXKEYS.REIMBURSEMENT_ACCOUNT, {beneficialOwners}); + return beneficialOwners; + }) } const addBeneficialOwner = () => { // Each beneficial owner is assigned a unique key that will connect it to an Identity Form. // That way we can dynamically render each Identity Form based on which keys are present in the beneficial owners array. - const newBeneficialOwners = [...beneficialOwners, Str.guid()]; - FormActions.setDraftValues(ONYXKEYS.REIMBURSEMENT_ACCOUNT, {beneficialOwners}); - setBeneficialOwners(newBeneficialOwners); + setBeneficialOwners(previousBeneficialOwners => { + const beneficialOwners = [...previousBeneficialOwners, Str.guid()]; + FormActions.setDraftValues(ONYXKEYS.REIMBURSEMENT_ACCOUNT, {beneficialOwners}); + return beneficialOwners; + }) } /** @@ -173,7 +177,9 @@ function ACHContractStep (props) { if (ownsMoreThan25Percent && beneficialOwners.length > 3) { // If the user owns more than 25% of the company, then there can only be a maximum of 3 other beneficial owners who owns more than 25%. // We have to remove the 4th beneficial owner if the checkbox is checked. - setBeneficialOwners(beneficialOwners.slice(0, -1)); + setBeneficialOwners(previousBeneficialOwners => { + return previousBeneficialOwners.slice(0, -1) + }) } }} defaultValue={props.getDefaultStateForField('ownsMoreThan25Percent', false)} From c63abc5438e25044d4be7e8929f91a683a8f173b Mon Sep 17 00:00:00 2001 From: oleh Date: Thu, 8 Jun 2023 23:47:22 +0300 Subject: [PATCH 5/7] fixed lint issues --- .../ReimbursementAccount/ACHContractStep.js | 28 ++++++++++--------- 1 file changed, 15 insertions(+), 13 deletions(-) diff --git a/src/pages/ReimbursementAccount/ACHContractStep.js b/src/pages/ReimbursementAccount/ACHContractStep.js index 9582974ec795..3dafee4a7bc3 100644 --- a/src/pages/ReimbursementAccount/ACHContractStep.js +++ b/src/pages/ReimbursementAccount/ACHContractStep.js @@ -28,7 +28,9 @@ const propTypes = { }; const ACHContractStep = (props) => { - const [beneficialOwners, setBeneficialOwners] = useState(lodashGet(props.reimbursementAccountDraft, 'beneficialOwners', lodashGet(props.reimbursementAccount, 'achData.beneficialOwners', []))); + const [beneficialOwners, setBeneficialOwners] = useState( + lodashGet(props.reimbursementAccountDraft, 'beneficialOwners', lodashGet(props.reimbursementAccount, 'achData.beneficialOwners', [])), + ); /** * @param {Object} values - input values passed by the Form component @@ -84,28 +86,28 @@ const ACHContractStep = (props) => { } return errors; - } + }; /** * @param {Number} ownerKey - ID connected to the beneficial owner identity form */ const removeBeneficialOwner = (ownerKey) => { - setBeneficialOwners(previousBeneficialOwners => { + setBeneficialOwners((previousBeneficialOwners) => { const beneficialOwners = _.without(previousBeneficialOwners, ownerKey); FormActions.setDraftValues(ONYXKEYS.REIMBURSEMENT_ACCOUNT, {beneficialOwners}); return beneficialOwners; - }) - } + }); + }; const addBeneficialOwner = () => { // Each beneficial owner is assigned a unique key that will connect it to an Identity Form. // That way we can dynamically render each Identity Form based on which keys are present in the beneficial owners array. - setBeneficialOwners(previousBeneficialOwners => { + setBeneficialOwners((previousBeneficialOwners) => { const beneficialOwners = [...previousBeneficialOwners, Str.guid()]; FormActions.setDraftValues(ONYXKEYS.REIMBURSEMENT_ACCOUNT, {beneficialOwners}); return beneficialOwners; - }) - } + }); + }; /** * @param {Boolean} ownsMoreThan25Percent @@ -140,7 +142,7 @@ const ACHContractStep = (props) => { beneficialOwners: JSON.stringify(updatedBeneficialOwners), bankAccountID, }); - } + }; return ( @@ -177,9 +179,9 @@ const ACHContractStep = (props) => { if (ownsMoreThan25Percent && beneficialOwners.length > 3) { // If the user owns more than 25% of the company, then there can only be a maximum of 3 other beneficial owners who owns more than 25%. // We have to remove the 4th beneficial owner if the checkbox is checked. - setBeneficialOwners(previousBeneficialOwners => { - return previousBeneficialOwners.slice(0, -1) - }) + setBeneficialOwners((previousBeneficialOwners) => { + return previousBeneficialOwners.slice(0, -1); + }); } }} defaultValue={props.getDefaultStateForField('ownsMoreThan25Percent', false)} @@ -274,7 +276,7 @@ const ACHContractStep = (props) => { ); -} +}; ACHContractStep.propTypes = propTypes; ACHContractStep.displayName = 'ACHContractStep'; From 1b3a873ab8a3296fa80ca44dd9e559bcd28adb8b Mon Sep 17 00:00:00 2001 From: oleh Date: Mon, 12 Jun 2023 17:55:09 +0300 Subject: [PATCH 6/7] fixed lint issues --- .../ReimbursementAccount/ACHContractStep.js | 16 +++++++--------- 1 file changed, 7 insertions(+), 9 deletions(-) diff --git a/src/pages/ReimbursementAccount/ACHContractStep.js b/src/pages/ReimbursementAccount/ACHContractStep.js index 3dafee4a7bc3..989b32267a46 100644 --- a/src/pages/ReimbursementAccount/ACHContractStep.js +++ b/src/pages/ReimbursementAccount/ACHContractStep.js @@ -93,9 +93,9 @@ const ACHContractStep = (props) => { */ const removeBeneficialOwner = (ownerKey) => { setBeneficialOwners((previousBeneficialOwners) => { - const beneficialOwners = _.without(previousBeneficialOwners, ownerKey); - FormActions.setDraftValues(ONYXKEYS.REIMBURSEMENT_ACCOUNT, {beneficialOwners}); - return beneficialOwners; + const newBeneficialOwners = _.without(previousBeneficialOwners, ownerKey); + FormActions.setDraftValues(ONYXKEYS.REIMBURSEMENT_ACCOUNT, {beneficialOwners: newBeneficialOwners}); + return newBeneficialOwners; }); }; @@ -103,9 +103,9 @@ const ACHContractStep = (props) => { // Each beneficial owner is assigned a unique key that will connect it to an Identity Form. // That way we can dynamically render each Identity Form based on which keys are present in the beneficial owners array. setBeneficialOwners((previousBeneficialOwners) => { - const beneficialOwners = [...previousBeneficialOwners, Str.guid()]; - FormActions.setDraftValues(ONYXKEYS.REIMBURSEMENT_ACCOUNT, {beneficialOwners}); - return beneficialOwners; + const newBeneficialOwners = [...previousBeneficialOwners, Str.guid()]; + FormActions.setDraftValues(ONYXKEYS.REIMBURSEMENT_ACCOUNT, {beneficialOwners: newBeneficialOwners}); + return newBeneficialOwners; }); }; @@ -179,9 +179,7 @@ const ACHContractStep = (props) => { if (ownsMoreThan25Percent && beneficialOwners.length > 3) { // If the user owns more than 25% of the company, then there can only be a maximum of 3 other beneficial owners who owns more than 25%. // We have to remove the 4th beneficial owner if the checkbox is checked. - setBeneficialOwners((previousBeneficialOwners) => { - return previousBeneficialOwners.slice(0, -1); - }); + setBeneficialOwners((previousBeneficialOwners) => previousBeneficialOwners.slice(0, -1)); } }} defaultValue={props.getDefaultStateForField('ownsMoreThan25Percent', false)} From 9a5e951a145bae29c1a04a39e05559d8630d484c Mon Sep 17 00:00:00 2001 From: oleh Date: Mon, 12 Jun 2023 18:26:00 +0300 Subject: [PATCH 7/7] updated per reviewer's request --- src/pages/ReimbursementAccount/ACHContractStep.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/pages/ReimbursementAccount/ACHContractStep.js b/src/pages/ReimbursementAccount/ACHContractStep.js index 989b32267a46..c0d0f2c1af85 100644 --- a/src/pages/ReimbursementAccount/ACHContractStep.js +++ b/src/pages/ReimbursementAccount/ACHContractStep.js @@ -27,7 +27,7 @@ const propTypes = { companyName: PropTypes.string.isRequired, }; -const ACHContractStep = (props) => { +function ACHContractStep(props) { const [beneficialOwners, setBeneficialOwners] = useState( lodashGet(props.reimbursementAccountDraft, 'beneficialOwners', lodashGet(props.reimbursementAccount, 'achData.beneficialOwners', [])), ); @@ -274,7 +274,7 @@ const ACHContractStep = (props) => {
); -}; +} ACHContractStep.propTypes = propTypes; ACHContractStep.displayName = 'ACHContractStep';