From 3736999efc8ebd9c9c105eca5a777ee83534cfb5 Mon Sep 17 00:00:00 2001 From: Carlos Martins Date: Mon, 6 Sep 2021 11:28:52 -0600 Subject: [PATCH 01/47] add reimbursementAccountDraft Onyx key --- src/ONYXKEYS.js | 3 +++ 1 file changed, 3 insertions(+) diff --git a/src/ONYXKEYS.js b/src/ONYXKEYS.js index c2a35cc89f2..afa0c809f24 100755 --- a/src/ONYXKEYS.js +++ b/src/ONYXKEYS.js @@ -120,6 +120,9 @@ export default { // Stores information about the active reimbursement account being set up REIMBURSEMENT_ACCOUNT: 'reimbursementAccount', + // Stores draft information about the active reimbursement account being set up + REIMBURSEMENT_ACCOUNT_DRAFT: 'draftReimbursementAccount', + // Stores Workspace ID that will be tied to reimbursement account during setup REIMBURSEMENT_ACCOUNT_WORKSPACE_ID: 'reimbursementAccountWorkspaceID', }; From 8f3d5a5fa2dc75c78f26c444d77bd40d3234a5f7 Mon Sep 17 00:00:00 2001 From: Carlos Martins Date: Mon, 6 Sep 2021 11:31:23 -0600 Subject: [PATCH 02/47] rename key --- src/ONYXKEYS.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/ONYXKEYS.js b/src/ONYXKEYS.js index afa0c809f24..ace79d536c2 100755 --- a/src/ONYXKEYS.js +++ b/src/ONYXKEYS.js @@ -121,7 +121,7 @@ export default { REIMBURSEMENT_ACCOUNT: 'reimbursementAccount', // Stores draft information about the active reimbursement account being set up - REIMBURSEMENT_ACCOUNT_DRAFT: 'draftReimbursementAccount', + REIMBURSEMENT_ACCOUNT_DRAFT: 'reimbursementAccountDraft', // Stores Workspace ID that will be tied to reimbursement account during setup REIMBURSEMENT_ACCOUNT_WORKSPACE_ID: 'reimbursementAccountWorkspaceID', From da65577c91becc9467dac46ae9cbee38a0f203cc Mon Sep 17 00:00:00 2001 From: Carlos Martins Date: Mon, 6 Sep 2021 12:19:56 -0600 Subject: [PATCH 03/47] add proptypes and lodashget --- src/pages/ReimbursementAccount/BankAccountStep.js | 13 +++++++++++-- 1 file changed, 11 insertions(+), 2 deletions(-) diff --git a/src/pages/ReimbursementAccount/BankAccountStep.js b/src/pages/ReimbursementAccount/BankAccountStep.js index 84658e270db..97cea43da54 100644 --- a/src/pages/ReimbursementAccount/BankAccountStep.js +++ b/src/pages/ReimbursementAccount/BankAccountStep.js @@ -43,6 +43,12 @@ const propTypes = { existingOwners: PropTypes.arrayOf(PropTypes.string), }).isRequired, + /** Draft of the bank account currently in setup */ + reimbursementAccountDraft: PropTypes.shape({ + routingNumber: PropTypes.string, + accountNumber: PropTypes.string, + }), + ...withLocalizePropTypes, }; @@ -57,8 +63,8 @@ class BankAccountStep extends React.Component { // One of CONST.BANK_ACCOUNT.SETUP_TYPE bankAccountAddMethod: props.achData.subStep || undefined, hasAcceptedTerms: props.achData.acceptTerms || true, - routingNumber: props.achData.routingNumber || '', - accountNumber: props.achData.accountNumber || '', + routingNumber: lodashGet(this.props, 'reimbursementAccountDraft.routingNumber') || props.achData.routingNumber || '', + accountNumber: lodashGet(this.props, 'reimbursementAccountDraft.accountNumber') || props.achData.accountNumber || '', }; // Keys in this.errorTranslationKeys are associated to inputs, they are a subset of the keys found in this.state @@ -378,5 +384,8 @@ export default compose( reimbursementAccount: { key: ONYXKEYS.REIMBURSEMENT_ACCOUNT, }, + reimbursementAccountDraft: { + key: ONYXKEYS.REIMBURSEMENT_ACCOUNT_DRAFT, + } }), )(BankAccountStep); From 71db83edcf9c2446bd1bea4065d6266e418d839a Mon Sep 17 00:00:00 2001 From: Carlos Martins Date: Mon, 6 Sep 2021 12:26:30 -0600 Subject: [PATCH 04/47] add updateReimbursementAccountDraft function --- src/libs/actions/BankAccounts.js | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/src/libs/actions/BankAccounts.js b/src/libs/actions/BankAccounts.js index 37af3dae7fa..df42a237570 100644 --- a/src/libs/actions/BankAccounts.js +++ b/src/libs/actions/BankAccounts.js @@ -842,6 +842,10 @@ function setWorkspaceIDForReimbursementAccount(workspaceID) { Onyx.merge(ONYXKEYS.REIMBURSEMENT_ACCOUNT_WORKSPACE_ID, workspaceID); } +function updateReimbursementAccountDraft(bankAccountData) { + Onyx.merge(ONYXKEYS.REIMBURSEMENT_ACCOUNT_DRAFT, {...bankAccountData}); +} + export { activateWallet, addPersonalBankAccount, @@ -860,4 +864,5 @@ export { showBankAccountFormValidationError, setBankAccountFormValidationErrors, setWorkspaceIDForReimbursementAccount, + updateReimbursementAccountDraft, }; From a769b050203b9ba3224cbba64973a0dd8f2864e2 Mon Sep 17 00:00:00 2001 From: Carlos Martins Date: Mon, 6 Sep 2021 12:35:33 -0600 Subject: [PATCH 05/47] add updateReimbursementAccountDraft to BankAccountStep --- src/pages/ReimbursementAccount/BankAccountStep.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/pages/ReimbursementAccount/BankAccountStep.js b/src/pages/ReimbursementAccount/BankAccountStep.js index 97cea43da54..baed9bd2a14 100644 --- a/src/pages/ReimbursementAccount/BankAccountStep.js +++ b/src/pages/ReimbursementAccount/BankAccountStep.js @@ -28,6 +28,7 @@ import { setBankAccountFormValidationErrors, setupWithdrawalAccount, showBankAccountErrorModal, + updateReimbursementAccountDraft, } from '../../libs/actions/BankAccounts'; import ConfirmModal from '../../components/ConfirmModal'; import ONYXKEYS from '../../ONYXKEYS'; @@ -130,6 +131,7 @@ class BankAccountStep extends React.Component { */ clearErrorAndSetValue(inputKey, value) { this.setState({[inputKey]: value}); + updateReimbursementAccountDraft({[inputKey]: value}); const errors = this.getErrors(); if (!errors[inputKey]) { // No error found for this inputKey From f448d76f07aab7967f2075cb24b543bb91e6bb31 Mon Sep 17 00:00:00 2001 From: Carlos Martins Date: Mon, 6 Sep 2021 12:41:44 -0600 Subject: [PATCH 06/47] add defaultProps to BankAccountStep --- src/pages/ReimbursementAccount/BankAccountStep.js | 10 +++++++++- 1 file changed, 9 insertions(+), 1 deletion(-) diff --git a/src/pages/ReimbursementAccount/BankAccountStep.js b/src/pages/ReimbursementAccount/BankAccountStep.js index baed9bd2a14..e4186478a31 100644 --- a/src/pages/ReimbursementAccount/BankAccountStep.js +++ b/src/pages/ReimbursementAccount/BankAccountStep.js @@ -53,6 +53,13 @@ const propTypes = { ...withLocalizePropTypes, }; +const defaultProps = { + reimbursementAccountDraft: { + routingNumber: null, + accountNumber: null, + }, +}; + class BankAccountStep extends React.Component { constructor(props) { super(props); @@ -379,6 +386,7 @@ class BankAccountStep extends React.Component { } BankAccountStep.propTypes = propTypes; +BankAccountStep.defaultProps = defaultProps; export default compose( withLocalize, @@ -388,6 +396,6 @@ export default compose( }, reimbursementAccountDraft: { key: ONYXKEYS.REIMBURSEMENT_ACCOUNT_DRAFT, - } + }, }), )(BankAccountStep); From 19e6ea410c3f719ca88c839ac4d47d32a4f8c5ed Mon Sep 17 00:00:00 2001 From: Carlos Martins Date: Mon, 6 Sep 2021 12:50:25 -0600 Subject: [PATCH 07/47] add debounced updateReimbursementAccountDraft to BankAccountStep --- src/pages/ReimbursementAccount/BankAccountStep.js | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/src/pages/ReimbursementAccount/BankAccountStep.js b/src/pages/ReimbursementAccount/BankAccountStep.js index e4186478a31..16055679db8 100644 --- a/src/pages/ReimbursementAccount/BankAccountStep.js +++ b/src/pages/ReimbursementAccount/BankAccountStep.js @@ -67,6 +67,7 @@ class BankAccountStep extends React.Component { this.toggleTerms = this.toggleTerms.bind(this); this.addManualAccount = this.addManualAccount.bind(this); this.addPlaidAccount = this.addPlaidAccount.bind(this); + this.debouncedUpdateReimbursementAccountDraft = _.debounce(this.debouncedUpdateReimbursementAccountDraft.bind(this), 1000, false); this.state = { // One of CONST.BANK_ACCOUNT.SETUP_TYPE bankAccountAddMethod: props.achData.subStep || undefined, @@ -138,7 +139,7 @@ class BankAccountStep extends React.Component { */ clearErrorAndSetValue(inputKey, value) { this.setState({[inputKey]: value}); - updateReimbursementAccountDraft({[inputKey]: value}); + this.debouncedUpdateReimbursementAccountDraft({[inputKey]: value}); const errors = this.getErrors(); if (!errors[inputKey]) { // No error found for this inputKey @@ -202,6 +203,10 @@ class BankAccountStep extends React.Component { }); } + debouncedUpdateReimbursementAccountDraft(value) { + updateReimbursementAccountDraft(value); + } + render() { // Disable bank account fields once they've been added in db so they can't be changed const isFromPlaid = this.props.achData.setupType === CONST.BANK_ACCOUNT.SETUP_TYPE.PLAID; From c5cfb0d5bf2fc9963ec18906ade4155eef52cc55 Mon Sep 17 00:00:00 2001 From: Carlos Martins Date: Mon, 6 Sep 2021 13:10:22 -0600 Subject: [PATCH 08/47] add input docs to debouncedUpdateRimbursementAccountDraft --- src/pages/ReimbursementAccount/BankAccountStep.js | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/pages/ReimbursementAccount/BankAccountStep.js b/src/pages/ReimbursementAccount/BankAccountStep.js index 16055679db8..e4bef07f347 100644 --- a/src/pages/ReimbursementAccount/BankAccountStep.js +++ b/src/pages/ReimbursementAccount/BankAccountStep.js @@ -203,6 +203,10 @@ class BankAccountStep extends React.Component { }); } + /** + * + * @param {Object} value + */ debouncedUpdateReimbursementAccountDraft(value) { updateReimbursementAccountDraft(value); } From 0ff33f94703602d9451298e7d1b8cc84c934fd47 Mon Sep 17 00:00:00 2001 From: Carlos Martins Date: Mon, 6 Sep 2021 13:17:05 -0600 Subject: [PATCH 09/47] add reimbursementAccountDraft to CompanyStep --- src/pages/ReimbursementAccount/CompanyStep.js | 85 +++++++++++++------ 1 file changed, 61 insertions(+), 24 deletions(-) diff --git a/src/pages/ReimbursementAccount/CompanyStep.js b/src/pages/ReimbursementAccount/CompanyStep.js index 965dbc78d2d..4e724198296 100644 --- a/src/pages/ReimbursementAccount/CompanyStep.js +++ b/src/pages/ReimbursementAccount/CompanyStep.js @@ -13,6 +13,7 @@ import { setupWithdrawalAccount, showBankAccountFormValidationError, showBankAccountErrorModal, + updateReimbursementAccountDraft, } from '../../libs/actions/BankAccounts'; import Navigation from '../../libs/Navigation/Navigation'; import Text from '../../components/Text'; @@ -38,28 +39,42 @@ const propTypes = { error: PropTypes.string, }).isRequired, + /** Draft of the bank account currently in setup */ + reimbursementAccountDraft: PropTypes.shape({ + routingNumber: PropTypes.string, + accountNumber: PropTypes.string, + }), + ...withLocalizePropTypes, }; +const defaultProps = { + reimbursementAccountDraft: { + routingNumber: null, + accountNumber: null, + }, +}; + class CompanyStep extends React.Component { constructor(props) { super(props); this.submit = this.submit.bind(this); + this.debouncedUpdateReimbursementAccountDraft = _.debounce(this.debouncedUpdateReimbursementAccountDraft.bind(this), 1000, false); this.state = { - companyName: lodashGet(props, ['achData', 'companyName'], ''), - addressStreet: lodashGet(props, ['achData', 'addressStreet'], ''), - addressCity: lodashGet(props, ['achData', 'addressCity'], ''), - addressState: lodashGet(props, ['achData', 'addressState']) || '', - addressZipCode: lodashGet(props, ['achData', 'addressZipCode'], ''), - companyPhone: lodashGet(props, ['achData', 'companyPhone'], ''), - website: lodashGet(props, ['achData', 'website'], 'https://'), - companyTaxID: lodashGet(props, ['achData', 'companyTaxID'], ''), - incorporationType: lodashGet(props, ['achData', 'incorporationType'], ''), - incorporationDate: lodashGet(props, ['achData', 'incorporationDate'], ''), - incorporationState: lodashGet(props, ['achData', 'incorporationState']) || '', - industryCode: lodashGet(props, ['achData', 'industryCode'], ''), + companyName: lodashGet(this.props, 'reimbursementAccountDraft.companyName') || lodashGet(props, ['achData', 'companyName'], ''), + addressStreet: lodashGet(this.props, 'reimbursementAccountDraft.addressStreet') || lodashGet(props, ['achData', 'addressStreet'], ''), + addressCity: lodashGet(this.props, 'reimbursementAccountDraft.addressCity') || lodashGet(props, ['achData', 'addressCity'], ''), + addressState: lodashGet(this.props, 'reimbursementAccountDraft.addressState') || lodashGet(props, ['achData', 'addressState']) || '', + addressZipCode: lodashGet(this.props, 'reimbursementAccountDraft.addressZipCode') || lodashGet(props, ['achData', 'addressZipCode'], ''), + companyPhone: lodashGet(this.props, 'reimbursementAccountDraft.companyPhone') || lodashGet(props, ['achData', 'companyPhone'], ''), + website: lodashGet(this.props, 'reimbursementAccountDraft.website') || lodashGet(props, ['achData', 'website'], 'https://'), + companyTaxID: lodashGet(this.props, 'reimbursementAccountDraft.companyTaxID') || lodashGet(props, ['achData', 'companyTaxID'], ''), + incorporationType: lodashGet(this.props, 'reimbursementAccountDraft.incorporationType') || lodashGet(props, ['achData', 'incorporationType'], ''), + incorporationDate: lodashGet(this.props, 'reimbursementAccountDraft.incorporationDate') || lodashGet(props, ['achData', 'incorporationDate'], ''), + incorporationState: lodashGet(this.props, 'reimbursementAccountDraft.incorporationState') || lodashGet(props, ['achData', 'incorporationState']) || '', + industryCode: lodashGet(this.props, 'reimbursementAccountDraft.industryCode') || lodashGet(props, ['achData', 'industryCode'], ''), hasNoConnectionToCannabis: lodashGet(props, ['achData', 'hasNoConnectionToCannabis'], false), password: '', }; @@ -82,6 +97,15 @@ class CompanyStep extends React.Component { ]; } + /** + * + * @param {String} value + */ + setValue(value) { + this.setState(value); + this.debouncedUpdateReimbursementAccountDraft(value); + } + /** * @returns {Boolean} */ @@ -144,6 +168,14 @@ class CompanyStep extends React.Component { setupWithdrawalAccount({...this.state, incorporationDate}); } + /** + * + * @param {Object} value + */ + debouncedUpdateReimbursementAccountDraft(value) { + updateReimbursementAccountDraft(value); + } + render() { const shouldDisableCompanyName = Boolean(this.props.achData.bankAccountID && this.props.achData.companyName); const shouldDisableCompanyTaxID = Boolean(this.props.achData.bankAccountID && this.props.achData.companyTaxID); @@ -165,7 +197,7 @@ class CompanyStep extends React.Component { this.setState({companyName})} + onChangeText={companyName => this.setValue({companyName})} value={this.state.companyName} disabled={shouldDisableCompanyName} /> @@ -176,7 +208,7 @@ class CompanyStep extends React.Component { if (error === this.props.translate('bankAccount.error.addressStreet')) { hideBankAccountErrors(); } - this.setState({addressStreet}); + this.setValue({addressStreet}); }} value={this.state.addressStreet} errorText={error === this.props.translate('bankAccount.error.addressStreet') @@ -188,13 +220,13 @@ class CompanyStep extends React.Component { this.setState({addressCity})} + onChangeText={addressCity => this.setValue({addressCity})} value={this.state.addressCity} /> this.setState({addressState})} + onChange={addressState => this.setValue({addressState})} value={this.state.addressState} /> @@ -206,7 +238,7 @@ class CompanyStep extends React.Component { if (error === this.props.translate('bankAccount.error.zipCode')) { hideBankAccountErrors(); } - this.setState({addressZipCode}); + this.setValue({addressZipCode}); }} value={this.state.addressZipCode} errorText={error === this.props.translate('bankAccount.error.zipCode') @@ -217,7 +249,7 @@ class CompanyStep extends React.Component { label={this.props.translate('common.phoneNumber')} containerStyles={[styles.mt4]} keyboardType={CONST.KEYBOARD_TYPE.PHONE_PAD} - onChangeText={companyPhone => this.setState({companyPhone})} + onChangeText={companyPhone => this.setValue({companyPhone})} value={this.state.companyPhone} placeholder={this.props.translate('companyStep.companyPhonePlaceholder')} /> @@ -228,7 +260,7 @@ class CompanyStep extends React.Component { if (error === this.props.translate('bankAccount.error.website')) { hideBankAccountErrors(); } - this.setState({website}); + this.setValue({website}); }} value={this.state.website} errorText={error === this.props.translate('bankAccount.error.website') @@ -243,7 +275,7 @@ class CompanyStep extends React.Component { if (error === this.props.translate('bankAccount.error.taxID')) { hideBankAccountErrors(); } - this.setState({companyTaxID}); + this.setValue({companyTaxID}); }} value={this.state.companyTaxID} disabled={shouldDisableCompanyTaxID} @@ -255,7 +287,7 @@ class CompanyStep extends React.Component { ({value, label}))} - onChange={incorporationType => this.setState({incorporationType})} + onChange={incorporationType => this.setValue({incorporationType})} value={this.state.incorporationType} placeholder={{value: '', label: '-'}} /> @@ -269,7 +301,7 @@ class CompanyStep extends React.Component { if (error === this.props.translate('bankAccount.error.incorporationDate')) { hideBankAccountErrors(); } - this.setState({incorporationDate}); + this.setValue({incorporationDate}); }} value={this.state.incorporationDate} placeholder={this.props.translate('companyStep.incorporationDatePlaceholder')} @@ -280,7 +312,7 @@ class CompanyStep extends React.Component { this.setState({incorporationState})} + onChange={incorporationState => this.setValue({incorporationState})} value={this.state.incorporationState} /> @@ -295,7 +327,7 @@ class CompanyStep extends React.Component { if (error === this.props.translate('bankAccount.error.industryCode')) { hideBankAccountErrors(); } - this.setState({industryCode}); + this.setValue({industryCode}); }} value={this.state.industryCode} errorText={error === this.props.translate('bankAccount.error.industryCode') @@ -358,11 +390,16 @@ class CompanyStep extends React.Component { } CompanyStep.propTypes = propTypes; +CompanyStep.defaultProps = defaultProps; + export default compose( withLocalize, withOnyx({ reimbursementAccount: { key: ONYXKEYS.REIMBURSEMENT_ACCOUNT, }, + reimbursementAccountDraft: { + key: ONYXKEYS.REIMBURSEMENT_ACCOUNT_DRAFT, + }, }), )(CompanyStep); From 545199657b4d8fbd905b4d22b29818ccdfa164f5 Mon Sep 17 00:00:00 2001 From: Carlos Martins Date: Mon, 6 Sep 2021 13:20:39 -0600 Subject: [PATCH 10/47] add default props --- src/pages/ReimbursementAccount/CompanyStep.js | 19 +++++++++++++------ 1 file changed, 13 insertions(+), 6 deletions(-) diff --git a/src/pages/ReimbursementAccount/CompanyStep.js b/src/pages/ReimbursementAccount/CompanyStep.js index 4e724198296..013f8b02ea7 100644 --- a/src/pages/ReimbursementAccount/CompanyStep.js +++ b/src/pages/ReimbursementAccount/CompanyStep.js @@ -40,18 +40,25 @@ const propTypes = { }).isRequired, /** Draft of the bank account currently in setup */ - reimbursementAccountDraft: PropTypes.shape({ - routingNumber: PropTypes.string, - accountNumber: PropTypes.string, - }), + reimbursementAccountDraft: PropTypes.shape({}), ...withLocalizePropTypes, }; const defaultProps = { reimbursementAccountDraft: { - routingNumber: null, - accountNumber: null, + companyName: null, + addressStreet: null, + addressCity: null, + addressState: null, + addressZipCode: null, + companyPhone: null, + website: null, + companyTaxID: null, + incorporationType: null, + incorporationDate: null, + incorporationState: null, + industryCode: null, }, }; From c5eb9057443456d6f9b413a13eeb0ce1c51f1487 Mon Sep 17 00:00:00 2001 From: Carlos Martins Date: Mon, 6 Sep 2021 13:21:56 -0600 Subject: [PATCH 11/47] add propTypes --- src/pages/ReimbursementAccount/CompanyStep.js | 15 ++++++++++++++- 1 file changed, 14 insertions(+), 1 deletion(-) diff --git a/src/pages/ReimbursementAccount/CompanyStep.js b/src/pages/ReimbursementAccount/CompanyStep.js index 013f8b02ea7..551d47e5281 100644 --- a/src/pages/ReimbursementAccount/CompanyStep.js +++ b/src/pages/ReimbursementAccount/CompanyStep.js @@ -40,7 +40,20 @@ const propTypes = { }).isRequired, /** Draft of the bank account currently in setup */ - reimbursementAccountDraft: PropTypes.shape({}), + reimbursementAccountDraft: PropTypes.shape({ + companyName: PropTypes.string, + addressStreet: PropTypes.string, + addressCity: PropTypes.string, + addressState: PropTypes.string, + addressZipCode: PropTypes.string, + companyPhone: PropTypes.string, + website: PropTypes.string, + companyTaxID: PropTypes.string, + incorporationType: PropTypes.string, + incorporationDate: PropTypes.string, + incorporationState: PropTypes.string, + industryCode: PropTypes.string, + }), ...withLocalizePropTypes, }; From b88eeb0a93cdc0a587436a13033a0aaa8ad0b852 Mon Sep 17 00:00:00 2001 From: Carlos Martins Date: Mon, 6 Sep 2021 13:25:54 -0600 Subject: [PATCH 12/47] refactor lodashget in companyStep state --- src/pages/ReimbursementAccount/CompanyStep.js | 24 +++++++++---------- 1 file changed, 12 insertions(+), 12 deletions(-) diff --git a/src/pages/ReimbursementAccount/CompanyStep.js b/src/pages/ReimbursementAccount/CompanyStep.js index 551d47e5281..b21c5c27047 100644 --- a/src/pages/ReimbursementAccount/CompanyStep.js +++ b/src/pages/ReimbursementAccount/CompanyStep.js @@ -83,18 +83,18 @@ class CompanyStep extends React.Component { this.debouncedUpdateReimbursementAccountDraft = _.debounce(this.debouncedUpdateReimbursementAccountDraft.bind(this), 1000, false); this.state = { - companyName: lodashGet(this.props, 'reimbursementAccountDraft.companyName') || lodashGet(props, ['achData', 'companyName'], ''), - addressStreet: lodashGet(this.props, 'reimbursementAccountDraft.addressStreet') || lodashGet(props, ['achData', 'addressStreet'], ''), - addressCity: lodashGet(this.props, 'reimbursementAccountDraft.addressCity') || lodashGet(props, ['achData', 'addressCity'], ''), - addressState: lodashGet(this.props, 'reimbursementAccountDraft.addressState') || lodashGet(props, ['achData', 'addressState']) || '', - addressZipCode: lodashGet(this.props, 'reimbursementAccountDraft.addressZipCode') || lodashGet(props, ['achData', 'addressZipCode'], ''), - companyPhone: lodashGet(this.props, 'reimbursementAccountDraft.companyPhone') || lodashGet(props, ['achData', 'companyPhone'], ''), - website: lodashGet(this.props, 'reimbursementAccountDraft.website') || lodashGet(props, ['achData', 'website'], 'https://'), - companyTaxID: lodashGet(this.props, 'reimbursementAccountDraft.companyTaxID') || lodashGet(props, ['achData', 'companyTaxID'], ''), - incorporationType: lodashGet(this.props, 'reimbursementAccountDraft.incorporationType') || lodashGet(props, ['achData', 'incorporationType'], ''), - incorporationDate: lodashGet(this.props, 'reimbursementAccountDraft.incorporationDate') || lodashGet(props, ['achData', 'incorporationDate'], ''), - incorporationState: lodashGet(this.props, 'reimbursementAccountDraft.incorporationState') || lodashGet(props, ['achData', 'incorporationState']) || '', - industryCode: lodashGet(this.props, 'reimbursementAccountDraft.industryCode') || lodashGet(props, ['achData', 'industryCode'], ''), + companyName: lodashGet(props, ['reimbursementAccountDraft', 'companyName']) || lodashGet(props, ['achData', 'companyName'], ''), + addressStreet: lodashGet(props, ['reimbursementAccountDraft', 'addressStreet']) || lodashGet(props, ['achData', 'addressStreet'], ''), + addressCity: lodashGet(props, ['reimbursementAccountDraft', 'addressCity']) || lodashGet(props, ['achData', 'addressCity'], ''), + addressState: lodashGet(props, ['reimbursementAccountDraft', 'addressState']) || lodashGet(props, ['achData', 'addressState'], ''), + addressZipCode: lodashGet(props, ['reimbursementAccountDraft', 'addressZipCode']) || lodashGet(props, ['achData', 'addressZipCode'], ''), + companyPhone: lodashGet(props, ['reimbursementAccountDraft', 'companyPhone']) || lodashGet(props, ['achData', 'companyPhone'], ''), + website: lodashGet(props, ['reimbursementAccountDraft', 'website']) || lodashGet(props, ['achData', 'website'], 'https://'), + companyTaxID: lodashGet(props, ['reimbursementAccountDraft', 'companyTaxID']) || lodashGet(props, ['achData', 'companyTaxID'], ''), + incorporationType: lodashGet(props, ['reimbursementAccountDraft', 'incorporationType']) || lodashGet(props, ['achData', 'incorporationType'], ''), + incorporationDate: lodashGet(props, ['reimbursementAccountDraft', 'incorporationDate']) || lodashGet(props, ['achData', 'incorporationDate'], ''), + incorporationState: lodashGet(props, ['reimbursementAccountDraft', 'incorporationState']) || lodashGet(props, ['achData', 'incorporationState'], ''), + industryCode: lodashGet(props, ['reimbursementAccountDraft', 'industryCode']) || lodashGet(props, ['achData', 'industryCode'], ''), hasNoConnectionToCannabis: lodashGet(props, ['achData', 'hasNoConnectionToCannabis'], false), password: '', }; From ae75dcaf4492e86decd45e901fe66768190452cc Mon Sep 17 00:00:00 2001 From: Carlos Martins Date: Mon, 6 Sep 2021 13:27:50 -0600 Subject: [PATCH 13/47] refactor lodashget in bankAccountState state --- src/pages/ReimbursementAccount/BankAccountStep.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/pages/ReimbursementAccount/BankAccountStep.js b/src/pages/ReimbursementAccount/BankAccountStep.js index e4bef07f347..6327e4bffea 100644 --- a/src/pages/ReimbursementAccount/BankAccountStep.js +++ b/src/pages/ReimbursementAccount/BankAccountStep.js @@ -72,8 +72,8 @@ class BankAccountStep extends React.Component { // One of CONST.BANK_ACCOUNT.SETUP_TYPE bankAccountAddMethod: props.achData.subStep || undefined, hasAcceptedTerms: props.achData.acceptTerms || true, - routingNumber: lodashGet(this.props, 'reimbursementAccountDraft.routingNumber') || props.achData.routingNumber || '', - accountNumber: lodashGet(this.props, 'reimbursementAccountDraft.accountNumber') || props.achData.accountNumber || '', + routingNumber: lodashGet(props, ['reimbursementAccountDraft', 'routingNumber']) || lodashGet(props, ['achData', 'routingNumber'], ''), + accountNumber: lodashGet(props, ['reimbursementAccountDraft', 'accountNumber']) || lodashGet(props, ['achData', 'accountNumber'], ''), }; // Keys in this.errorTranslationKeys are associated to inputs, they are a subset of the keys found in this.state From 7082e5f87949e128cc17d55ef805686d8f0d1557 Mon Sep 17 00:00:00 2001 From: Carlos Martins Date: Mon, 6 Sep 2021 14:20:46 -0600 Subject: [PATCH 14/47] add updateReimbursementAccountDraft to RequestorStep --- .../ReimbursementAccount/RequestorStep.js | 58 ++++++++++++++++--- 1 file changed, 50 insertions(+), 8 deletions(-) diff --git a/src/pages/ReimbursementAccount/RequestorStep.js b/src/pages/ReimbursementAccount/RequestorStep.js index cc0b67d0500..6dc9e231a2c 100644 --- a/src/pages/ReimbursementAccount/RequestorStep.js +++ b/src/pages/ReimbursementAccount/RequestorStep.js @@ -1,5 +1,6 @@ import React from 'react'; import lodashGet from 'lodash/get'; +import _ from 'underscore'; import {View, ScrollView} from 'react-native'; import PropTypes from 'prop-types'; import {withOnyx} from 'react-native-onyx'; @@ -15,6 +16,7 @@ import { goToWithdrawalAccountSetupStep, setupWithdrawalAccount, showBankAccountErrorModal, + updateReimbursementAccountDraft, } from '../../libs/actions/BankAccounts'; import Button from '../../components/Button'; import FixedFooter from '../../components/FixedFooter'; @@ -31,24 +33,50 @@ const propTypes = { error: PropTypes.string, }).isRequired, + /** Draft of the bank account currently in setup */ + reimbursementAccountDraft: PropTypes.shape({ + firstName: PropTypes.string, + lastName: PropTypes.string, + requestorAddressStreet: PropTypes.string, + requestorAddressCity: PropTypes.string, + requestorAddressState: PropTypes.string, + requestorAddressZipCode: PropTypes.string, + dob: PropTypes.string, + ssnLast4: PropTypes.string, + }), + ...withLocalizePropTypes, }; +const defaultProps = { + reimbursementAccountDraft: { + firstName: null, + lastName: null, + requestorAddressStreet: null, + requestorAddressCity: null, + requestorAddressState: null, + requestorAddressZipCode: null, + dob: null, + ssnLast4: null, + }, +}; + class RequestorStep extends React.Component { constructor(props) { super(props); this.submit = this.submit.bind(this); + this.debouncedUpdateReimbursementAccountDraft = _.debounce(this.debouncedUpdateReimbursementAccountDraft.bind(this), 1000, false); this.state = { - firstName: lodashGet(props, ['achData', 'firstName'], ''), - lastName: lodashGet(props, ['achData', 'lastName'], ''), - requestorAddressStreet: lodashGet(props, ['achData', 'requestorAddressStreet'], ''), - requestorAddressCity: lodashGet(props, ['achData', 'requestorAddressCity'], ''), - requestorAddressState: lodashGet(props, ['achData', 'requestorAddressState']) || '', - requestorAddressZipCode: lodashGet(props, ['achData', 'requestorAddressZipCode'], ''), - dob: lodashGet(props, ['achData', 'dob'], ''), - ssnLast4: lodashGet(props, ['achData', 'ssnLast4'], ''), + firstName: lodashGet(props, ['reimbursementAccountDraft', 'firstName']) || lodashGet(props, ['achData', 'firstName'], ''), + lastName: lodashGet(props, ['reimbursementAccountDraft', 'lastName']) || lodashGet(props, ['achData', 'lastName'], ''), + requestorAddressStreet: lodashGet(props, ['reimbursementAccountDraft', 'requestorAddressStreet']) || lodashGet(props, ['achData', 'requestorAddressStreet'], ''), + requestorAddressCity: lodashGet(props, ['reimbursementAccountDraft', 'requestorAddressCity']) || lodashGet(props, ['achData', 'requestorAddressCity'], ''), + requestorAddressState: lodashGet(props, ['reimbursementAccountDraft', 'requestorAddressState']) || lodashGet(props, ['achData', 'requestorAddressState'], ''), + requestorAddressZipCode: lodashGet(props, ['reimbursementAccountDraft', 'requestorAddressZipCode']) || lodashGet(props, ['achData', 'requestorAddressZipCode'], ''), + dob: lodashGet(props, ['reimbursementAccountDraft', 'dob']) || lodashGet(props, ['achData', 'dob'], ''), + ssnLast4: lodashGet(props, ['reimbursementAccountDraft', 'ssnLast4']) || lodashGet(props, ['achData', 'ssnLast4'], ''), isControllingOfficer: lodashGet(props, ['achData', 'isControllingOfficer'], false), onfidoData: lodashGet(props, ['achData', 'onfidoData'], ''), isOnfidoSetupComplete: lodashGet(props, ['achData', 'isOnfidoSetupComplete'], false), @@ -75,6 +103,15 @@ class RequestorStep extends React.Component { }; const fieldName = lodashGet(renamedFields, field, field); this.setState({[fieldName]: value}); + this.debouncedUpdateReimbursementAccountDraft({[fieldName]: value}); + } + + /** + * + * @param {Object} value + */ + debouncedUpdateReimbursementAccountDraft(value) { + updateReimbursementAccountDraft(value); } /** @@ -223,12 +260,17 @@ class RequestorStep extends React.Component { } RequestorStep.propTypes = propTypes; +RequestorStep.defaultProps = defaultProps; RequestorStep.displayName = 'RequestorStep'; + export default compose( withLocalize, withOnyx({ reimbursementAccount: { key: ONYXKEYS.REIMBURSEMENT_ACCOUNT, }, + reimbursementAccountDraft: { + key: ONYXKEYS.REIMBURSEMENT_ACCOUNT_DRAFT, + }, }), )(RequestorStep); From 614dfa62e29b53ca552ef126724db55144a067f2 Mon Sep 17 00:00:00 2001 From: Carlos Martins Date: Mon, 6 Sep 2021 14:28:02 -0600 Subject: [PATCH 15/47] add hasNoConnectionToCannabis to draft state --- src/pages/ReimbursementAccount/CompanyStep.js | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/src/pages/ReimbursementAccount/CompanyStep.js b/src/pages/ReimbursementAccount/CompanyStep.js index b21c5c27047..9b494a51cdb 100644 --- a/src/pages/ReimbursementAccount/CompanyStep.js +++ b/src/pages/ReimbursementAccount/CompanyStep.js @@ -95,7 +95,7 @@ class CompanyStep extends React.Component { incorporationDate: lodashGet(props, ['reimbursementAccountDraft', 'incorporationDate']) || lodashGet(props, ['achData', 'incorporationDate'], ''), incorporationState: lodashGet(props, ['reimbursementAccountDraft', 'incorporationState']) || lodashGet(props, ['achData', 'incorporationState'], ''), industryCode: lodashGet(props, ['reimbursementAccountDraft', 'industryCode']) || lodashGet(props, ['achData', 'industryCode'], ''), - hasNoConnectionToCannabis: lodashGet(props, ['achData', 'hasNoConnectionToCannabis'], false), + hasNoConnectionToCannabis: lodashGet(props, ['reimbursementAccountDraft', 'hasNoConnectionToCannabis']) || lodashGet(props, ['achData', 'hasNoConnectionToCannabis'], false), password: '', }; @@ -377,9 +377,10 @@ class CompanyStep extends React.Component { /> this.setState(prevState => ({ - hasNoConnectionToCannabis: !prevState.hasNoConnectionToCannabis, - }))} + onPress={() => this.setState(prevState => { + this.debouncedUpdateReimbursementAccountDraft({hasNoConnectionToCannabis: !prevState.hasNoConnectionToCannabis}) + return {hasNoConnectionToCannabis: !prevState.hasNoConnectionToCannabis}; + })} LabelComponent={() => ( <> {`${this.props.translate('companyStep.confirmCompanyIsNot')} `} From 73442619236f1f1e28d75e2e42b2a8848290fae7 Mon Sep 17 00:00:00 2001 From: Carlos Martins Date: Mon, 6 Sep 2021 14:30:44 -0600 Subject: [PATCH 16/47] add isControllingOffice to draft state --- src/pages/ReimbursementAccount/CompanyStep.js | 4 ++-- src/pages/ReimbursementAccount/RequestorStep.js | 9 +++++---- 2 files changed, 7 insertions(+), 6 deletions(-) diff --git a/src/pages/ReimbursementAccount/CompanyStep.js b/src/pages/ReimbursementAccount/CompanyStep.js index 9b494a51cdb..dd1c6da327c 100644 --- a/src/pages/ReimbursementAccount/CompanyStep.js +++ b/src/pages/ReimbursementAccount/CompanyStep.js @@ -377,8 +377,8 @@ class CompanyStep extends React.Component { /> this.setState(prevState => { - this.debouncedUpdateReimbursementAccountDraft({hasNoConnectionToCannabis: !prevState.hasNoConnectionToCannabis}) + onPress={() => this.setState((prevState) => { + this.debouncedUpdateReimbursementAccountDraft({hasNoConnectionToCannabis: !prevState.hasNoConnectionToCannabis}); return {hasNoConnectionToCannabis: !prevState.hasNoConnectionToCannabis}; })} LabelComponent={() => ( diff --git a/src/pages/ReimbursementAccount/RequestorStep.js b/src/pages/ReimbursementAccount/RequestorStep.js index 6dc9e231a2c..2430619ffef 100644 --- a/src/pages/ReimbursementAccount/RequestorStep.js +++ b/src/pages/ReimbursementAccount/RequestorStep.js @@ -77,7 +77,7 @@ class RequestorStep extends React.Component { requestorAddressZipCode: lodashGet(props, ['reimbursementAccountDraft', 'requestorAddressZipCode']) || lodashGet(props, ['achData', 'requestorAddressZipCode'], ''), dob: lodashGet(props, ['reimbursementAccountDraft', 'dob']) || lodashGet(props, ['achData', 'dob'], ''), ssnLast4: lodashGet(props, ['reimbursementAccountDraft', 'ssnLast4']) || lodashGet(props, ['achData', 'ssnLast4'], ''), - isControllingOfficer: lodashGet(props, ['achData', 'isControllingOfficer'], false), + isControllingOfficer: lodashGet(props, ['reimbursementAccountDraft', 'isControllingOfficer']) || lodashGet(props, ['achData', 'isControllingOfficer'], false), onfidoData: lodashGet(props, ['achData', 'onfidoData'], ''), isOnfidoSetupComplete: lodashGet(props, ['achData', 'isOnfidoSetupComplete'], false), }; @@ -188,9 +188,10 @@ class RequestorStep extends React.Component { /> this.setState(prevState => ({ - isControllingOfficer: !prevState.isControllingOfficer, - }))} + onPress={() => this.setState((prevState) => { + this.debouncedUpdateReimbursementAccountDraft({isControllingOfficer: !prevState.isControllingOfficer}); + return {isControllingOfficer: !prevState.isControllingOfficer}; + })} LabelComponent={() => ( From 2e7e241bca5009108c0373a8f1500cb452b40a39 Mon Sep 17 00:00:00 2001 From: Carlos Martins Date: Mon, 6 Sep 2021 14:52:19 -0600 Subject: [PATCH 17/47] add updateReimbursementAccountDraft to BeneficialOwner step --- .../BeneficialOwnersStep.js | 63 +++++++++++++++---- 1 file changed, 51 insertions(+), 12 deletions(-) diff --git a/src/pages/ReimbursementAccount/BeneficialOwnersStep.js b/src/pages/ReimbursementAccount/BeneficialOwnersStep.js index 343682be59c..cc3c2649046 100644 --- a/src/pages/ReimbursementAccount/BeneficialOwnersStep.js +++ b/src/pages/ReimbursementAccount/BeneficialOwnersStep.js @@ -1,4 +1,5 @@ import _ from 'underscore'; +import lodashGet from 'lodash/get'; import React from 'react'; import PropTypes from 'prop-types'; import {ScrollView, View} from 'react-native'; @@ -16,6 +17,7 @@ import { goToWithdrawalAccountSetupStep, setupWithdrawalAccount, showBankAccountErrorModal, + updateReimbursementAccountDraft, } from '../../libs/actions/BankAccounts'; import Navigation from '../../libs/Navigation/Navigation'; import CONST from '../../CONST'; @@ -34,20 +36,39 @@ const propTypes = { /** Error set when handling the API response */ error: PropTypes.string, }).isRequired, + + /** Draft of the bank account currently in setup */ + reimbursementAccountDraft: PropTypes.shape({ + ownsMoreThan25Percent: PropTypes.bool, + hasOtherBeneficialOwners: PropTypes.bool, + acceptTermsAndConditions: PropTypes.bool, + certifyTrueInformation: PropTypes.bool, + }), +}; + +const defaultProps = { + reimbursementAccountDraft: { + ownsMoreThan25Percent: null, + hasOtherBeneficialOwners: null, + acceptTermsAndConditions: null, + certifyTrueInformation: null, + }, }; + class BeneficialOwnersStep extends React.Component { constructor(props) { super(props); this.addBeneficialOwner = this.addBeneficialOwner.bind(this); this.submit = this.submit.bind(this); + this.debouncedUpdateReimbursementAccountDraft = _.debounce(this.debouncedUpdateReimbursementAccountDraft.bind(this), 1000, false); this.state = { - ownsMoreThan25Percent: false, + ownsMoreThan25Percent: lodashGet(props, ['reimbursementAccountDraft', 'ownsMoreThan25Percent'], false), hasOtherBeneficialOwners: false, - acceptTermsAndConditions: false, - certifyTrueInformation: false, + acceptTermsAndConditions: lodashGet(props, ['reimbursementAccountDraft', 'acceptTermsAndConditions'], false), + certifyTrueInformation: lodashGet(props, ['reimbursementAccountDraft', 'certifyTrueInformation'], false), beneficialOwners: [], }; } @@ -110,6 +131,25 @@ class BeneficialOwnersStep extends React.Component { () => setupWithdrawalAccount({...this.state})); } + /** + * + * @param {Object} value + */ + debouncedUpdateReimbursementAccountDraft(value) { + updateReimbursementAccountDraft(value); + } + + /** + * + * @param {Object} fieldName + */ + toggleCheckbox(fieldName) { + this.setState((prevState) => { + this.debouncedUpdateReimbursementAccountDraft({[fieldName]: !prevState[fieldName]}); + return {[fieldName]: !prevState[fieldName]}; + }); + } + render() { return ( <> @@ -129,9 +169,7 @@ class BeneficialOwnersStep extends React.Component { this.setState(prevState => ({ - ownsMoreThan25Percent: !prevState.ownsMoreThan25Percent, - }))} + onPress={() => this.toggleCheckbox('ownsMoreThan25Percent')} LabelComponent={() => ( {this.props.translate('beneficialOwnersStep.iOwnMoreThan25Percent')} @@ -207,9 +245,7 @@ class BeneficialOwnersStep extends React.Component { this.setState(prevState => ({ - acceptTermsAndConditions: !prevState.acceptTermsAndConditions, - }))} + onPress={() => this.toggleCheckbox('acceptTermsAndConditions')} LabelComponent={() => ( {this.props.translate('common.iAcceptThe')} @@ -222,9 +258,7 @@ class BeneficialOwnersStep extends React.Component { this.setState(prevState => ({ - certifyTrueInformation: !prevState.certifyTrueInformation, - }))} + onPress={() => this.toggleCheckbox('certifyTrueInformation')} LabelComponent={() => ( {this.props.translate('beneficialOwnersStep.certifyTrueAndAccurate')} )} @@ -244,11 +278,16 @@ class BeneficialOwnersStep extends React.Component { } BeneficialOwnersStep.propTypes = propTypes; +BeneficialOwnersStep.defaultProps = defaultProps; + export default compose( withLocalize, withOnyx({ reimbursementAccount: { key: ONYXKEYS.REIMBURSEMENT_ACCOUNT, }, + reimbursementAccountDraft: { + key: ONYXKEYS.REIMBURSEMENT_ACCOUNT_DRAFT, + }, }), )(BeneficialOwnersStep); From a8f5663cf0995bf8bd4b0202f805cf250b12a804 Mon Sep 17 00:00:00 2001 From: Carlos Martins Date: Mon, 6 Sep 2021 16:03:42 -0600 Subject: [PATCH 18/47] add additional beneficial owners to updateReimbursementAccountDraft --- .../BeneficialOwnersStep.js | 32 +++++++++++++++++-- 1 file changed, 29 insertions(+), 3 deletions(-) diff --git a/src/pages/ReimbursementAccount/BeneficialOwnersStep.js b/src/pages/ReimbursementAccount/BeneficialOwnersStep.js index cc3c2649046..b00db33df63 100644 --- a/src/pages/ReimbursementAccount/BeneficialOwnersStep.js +++ b/src/pages/ReimbursementAccount/BeneficialOwnersStep.js @@ -43,6 +43,16 @@ const propTypes = { hasOtherBeneficialOwners: PropTypes.bool, acceptTermsAndConditions: PropTypes.bool, certifyTrueInformation: PropTypes.bool, + beneficialOwners: PropTypes.arrayOf(PropTypes.shape({ + firstName: PropTypes.string, + lastName: PropTypes.string, + requestorAddressStreet: PropTypes.string, + requestorAddressCity: PropTypes.string, + requestorAddressState: PropTypes.string, + requestorAddressZipCode: PropTypes.string, + dob: PropTypes.string, + ssnLast4: PropTypes.string, + })), }), }; @@ -52,6 +62,7 @@ const defaultProps = { hasOtherBeneficialOwners: null, acceptTermsAndConditions: null, certifyTrueInformation: null, + beneficialOwners: null, }, }; @@ -66,10 +77,10 @@ class BeneficialOwnersStep extends React.Component { this.state = { ownsMoreThan25Percent: lodashGet(props, ['reimbursementAccountDraft', 'ownsMoreThan25Percent'], false), - hasOtherBeneficialOwners: false, + hasOtherBeneficialOwners: lodashGet(props, ['reimbursementAccountDraft', 'hasOtherBeneficialOwners'], false), acceptTermsAndConditions: lodashGet(props, ['reimbursementAccountDraft', 'acceptTermsAndConditions'], false), certifyTrueInformation: lodashGet(props, ['reimbursementAccountDraft', 'certifyTrueInformation'], false), - beneficialOwners: [], + beneficialOwners: lodashGet(props, ['reimbursementAccountDraft', 'beneficialOwners'], []), }; } @@ -101,7 +112,15 @@ class BeneficialOwnersStep extends React.Component { } removeBeneficialOwner(beneficialOwner) { - this.setState(prevState => ({beneficialOwners: _.without(prevState.beneficialOwners, beneficialOwner)})); + this.setState((prevState) => { + const beneficialOwners = _.without(prevState.beneficialOwners, beneficialOwner); + + // We set 'beneficialOwners' to null first because we don't have a way yet to replace a specific property without merging it. + // We don't use the debounced function because we want to make both function calls. + updateReimbursementAccountDraft({beneficialOwners: null}); + updateReimbursementAccountDraft({beneficialOwners}); + return {beneficialOwners}; + }); } addBeneficialOwner() { @@ -183,6 +202,12 @@ class BeneficialOwnersStep extends React.Component { onPress={() => { this.setState((prevState) => { const hasOtherBeneficialOwners = !prevState.hasOtherBeneficialOwners; + this.debouncedUpdateReimbursementAccountDraft({ + hasOtherBeneficialOwners: !prevState.hasOtherBeneficialOwners, + beneficialOwners: hasOtherBeneficialOwners && _.isEmpty(prevState.beneficialOwners) + ? [{}] + : prevState.beneficialOwners, + }); return { hasOtherBeneficialOwners, beneficialOwners: hasOtherBeneficialOwners && _.isEmpty(prevState.beneficialOwners) @@ -210,6 +235,7 @@ class BeneficialOwnersStep extends React.Component { onFieldChange={(fieldName, value) => this.setState((prevState) => { const beneficialOwners = [...prevState.beneficialOwners]; beneficialOwners[index][fieldName] = value; + this.debouncedUpdateReimbursementAccountDraft({beneficialOwners}); return {beneficialOwners}; })} values={{ From 57cc010435b5b97b061816a648b86ab43434bfb0 Mon Sep 17 00:00:00 2001 From: Carlos Martins Date: Mon, 6 Sep 2021 16:04:22 -0600 Subject: [PATCH 19/47] change debounce time to 100ms --- src/pages/ReimbursementAccount/BankAccountStep.js | 2 +- src/pages/ReimbursementAccount/BeneficialOwnersStep.js | 2 +- src/pages/ReimbursementAccount/CompanyStep.js | 2 +- src/pages/ReimbursementAccount/RequestorStep.js | 2 +- 4 files changed, 4 insertions(+), 4 deletions(-) diff --git a/src/pages/ReimbursementAccount/BankAccountStep.js b/src/pages/ReimbursementAccount/BankAccountStep.js index 6327e4bffea..fcee97901bc 100644 --- a/src/pages/ReimbursementAccount/BankAccountStep.js +++ b/src/pages/ReimbursementAccount/BankAccountStep.js @@ -67,7 +67,7 @@ class BankAccountStep extends React.Component { this.toggleTerms = this.toggleTerms.bind(this); this.addManualAccount = this.addManualAccount.bind(this); this.addPlaidAccount = this.addPlaidAccount.bind(this); - this.debouncedUpdateReimbursementAccountDraft = _.debounce(this.debouncedUpdateReimbursementAccountDraft.bind(this), 1000, false); + this.debouncedUpdateReimbursementAccountDraft = _.debounce(this.debouncedUpdateReimbursementAccountDraft.bind(this), 100, false); this.state = { // One of CONST.BANK_ACCOUNT.SETUP_TYPE bankAccountAddMethod: props.achData.subStep || undefined, diff --git a/src/pages/ReimbursementAccount/BeneficialOwnersStep.js b/src/pages/ReimbursementAccount/BeneficialOwnersStep.js index b00db33df63..53bec49faeb 100644 --- a/src/pages/ReimbursementAccount/BeneficialOwnersStep.js +++ b/src/pages/ReimbursementAccount/BeneficialOwnersStep.js @@ -73,7 +73,7 @@ class BeneficialOwnersStep extends React.Component { this.addBeneficialOwner = this.addBeneficialOwner.bind(this); this.submit = this.submit.bind(this); - this.debouncedUpdateReimbursementAccountDraft = _.debounce(this.debouncedUpdateReimbursementAccountDraft.bind(this), 1000, false); + this.debouncedUpdateReimbursementAccountDraft = _.debounce(this.debouncedUpdateReimbursementAccountDraft.bind(this), 100, false); this.state = { ownsMoreThan25Percent: lodashGet(props, ['reimbursementAccountDraft', 'ownsMoreThan25Percent'], false), diff --git a/src/pages/ReimbursementAccount/CompanyStep.js b/src/pages/ReimbursementAccount/CompanyStep.js index dd1c6da327c..5c56c75490e 100644 --- a/src/pages/ReimbursementAccount/CompanyStep.js +++ b/src/pages/ReimbursementAccount/CompanyStep.js @@ -80,7 +80,7 @@ class CompanyStep extends React.Component { super(props); this.submit = this.submit.bind(this); - this.debouncedUpdateReimbursementAccountDraft = _.debounce(this.debouncedUpdateReimbursementAccountDraft.bind(this), 1000, false); + this.debouncedUpdateReimbursementAccountDraft = _.debounce(this.debouncedUpdateReimbursementAccountDraft.bind(this), 100, false); this.state = { companyName: lodashGet(props, ['reimbursementAccountDraft', 'companyName']) || lodashGet(props, ['achData', 'companyName'], ''), diff --git a/src/pages/ReimbursementAccount/RequestorStep.js b/src/pages/ReimbursementAccount/RequestorStep.js index 2430619ffef..aad46bc200f 100644 --- a/src/pages/ReimbursementAccount/RequestorStep.js +++ b/src/pages/ReimbursementAccount/RequestorStep.js @@ -66,7 +66,7 @@ class RequestorStep extends React.Component { super(props); this.submit = this.submit.bind(this); - this.debouncedUpdateReimbursementAccountDraft = _.debounce(this.debouncedUpdateReimbursementAccountDraft.bind(this), 1000, false); + this.debouncedUpdateReimbursementAccountDraft = _.debounce(this.debouncedUpdateReimbursementAccountDraft.bind(this), 100, false); this.state = { firstName: lodashGet(props, ['reimbursementAccountDraft', 'firstName']) || lodashGet(props, ['achData', 'firstName'], ''), From c1e45134de44855b107249c9ce03207ee033d541 Mon Sep 17 00:00:00 2001 From: Carlos Martins Date: Mon, 6 Sep 2021 16:14:55 -0600 Subject: [PATCH 20/47] change propTypes and defaultProps --- .../ReimbursementAccount/BankAccountStep.js | 11 ++----- .../BeneficialOwnersStep.js | 26 ++-------------- src/pages/ReimbursementAccount/CompanyStep.js | 31 ++----------------- .../ReimbursementAccount/RequestorStep.js | 23 ++------------ 4 files changed, 12 insertions(+), 79 deletions(-) diff --git a/src/pages/ReimbursementAccount/BankAccountStep.js b/src/pages/ReimbursementAccount/BankAccountStep.js index fcee97901bc..f17b51c2dac 100644 --- a/src/pages/ReimbursementAccount/BankAccountStep.js +++ b/src/pages/ReimbursementAccount/BankAccountStep.js @@ -45,19 +45,14 @@ const propTypes = { }).isRequired, /** Draft of the bank account currently in setup */ - reimbursementAccountDraft: PropTypes.shape({ - routingNumber: PropTypes.string, - accountNumber: PropTypes.string, - }), + // eslint-disable-next-line react/forbid-prop-types + reimbursementAccountDraft: PropTypes.object, ...withLocalizePropTypes, }; const defaultProps = { - reimbursementAccountDraft: { - routingNumber: null, - accountNumber: null, - }, + reimbursementAccountDraft: {}, }; class BankAccountStep extends React.Component { diff --git a/src/pages/ReimbursementAccount/BeneficialOwnersStep.js b/src/pages/ReimbursementAccount/BeneficialOwnersStep.js index 53bec49faeb..22014c5433b 100644 --- a/src/pages/ReimbursementAccount/BeneficialOwnersStep.js +++ b/src/pages/ReimbursementAccount/BeneficialOwnersStep.js @@ -38,32 +38,12 @@ const propTypes = { }).isRequired, /** Draft of the bank account currently in setup */ - reimbursementAccountDraft: PropTypes.shape({ - ownsMoreThan25Percent: PropTypes.bool, - hasOtherBeneficialOwners: PropTypes.bool, - acceptTermsAndConditions: PropTypes.bool, - certifyTrueInformation: PropTypes.bool, - beneficialOwners: PropTypes.arrayOf(PropTypes.shape({ - firstName: PropTypes.string, - lastName: PropTypes.string, - requestorAddressStreet: PropTypes.string, - requestorAddressCity: PropTypes.string, - requestorAddressState: PropTypes.string, - requestorAddressZipCode: PropTypes.string, - dob: PropTypes.string, - ssnLast4: PropTypes.string, - })), - }), + // eslint-disable-next-line react/forbid-prop-types + reimbursementAccountDraft: PropTypes.object, }; const defaultProps = { - reimbursementAccountDraft: { - ownsMoreThan25Percent: null, - hasOtherBeneficialOwners: null, - acceptTermsAndConditions: null, - certifyTrueInformation: null, - beneficialOwners: null, - }, + reimbursementAccountDraft: {}, }; diff --git a/src/pages/ReimbursementAccount/CompanyStep.js b/src/pages/ReimbursementAccount/CompanyStep.js index 5c56c75490e..a4767f1b2ce 100644 --- a/src/pages/ReimbursementAccount/CompanyStep.js +++ b/src/pages/ReimbursementAccount/CompanyStep.js @@ -40,39 +40,14 @@ const propTypes = { }).isRequired, /** Draft of the bank account currently in setup */ - reimbursementAccountDraft: PropTypes.shape({ - companyName: PropTypes.string, - addressStreet: PropTypes.string, - addressCity: PropTypes.string, - addressState: PropTypes.string, - addressZipCode: PropTypes.string, - companyPhone: PropTypes.string, - website: PropTypes.string, - companyTaxID: PropTypes.string, - incorporationType: PropTypes.string, - incorporationDate: PropTypes.string, - incorporationState: PropTypes.string, - industryCode: PropTypes.string, - }), + // eslint-disable-next-line react/forbid-prop-types + reimbursementAccountDraft: PropTypes.object, ...withLocalizePropTypes, }; const defaultProps = { - reimbursementAccountDraft: { - companyName: null, - addressStreet: null, - addressCity: null, - addressState: null, - addressZipCode: null, - companyPhone: null, - website: null, - companyTaxID: null, - incorporationType: null, - incorporationDate: null, - incorporationState: null, - industryCode: null, - }, + reimbursementAccountDraft: {}, }; class CompanyStep extends React.Component { diff --git a/src/pages/ReimbursementAccount/RequestorStep.js b/src/pages/ReimbursementAccount/RequestorStep.js index aad46bc200f..50a4da4c405 100644 --- a/src/pages/ReimbursementAccount/RequestorStep.js +++ b/src/pages/ReimbursementAccount/RequestorStep.js @@ -34,31 +34,14 @@ const propTypes = { }).isRequired, /** Draft of the bank account currently in setup */ - reimbursementAccountDraft: PropTypes.shape({ - firstName: PropTypes.string, - lastName: PropTypes.string, - requestorAddressStreet: PropTypes.string, - requestorAddressCity: PropTypes.string, - requestorAddressState: PropTypes.string, - requestorAddressZipCode: PropTypes.string, - dob: PropTypes.string, - ssnLast4: PropTypes.string, - }), + // eslint-disable-next-line react/forbid-prop-types + reimbursementAccountDraft: PropTypes.object, ...withLocalizePropTypes, }; const defaultProps = { - reimbursementAccountDraft: { - firstName: null, - lastName: null, - requestorAddressStreet: null, - requestorAddressCity: null, - requestorAddressState: null, - requestorAddressZipCode: null, - dob: null, - ssnLast4: null, - }, + reimbursementAccountDraft: {}, }; class RequestorStep extends React.Component { From 817d9524baeca8836c041c20b024a2d056af083f Mon Sep 17 00:00:00 2001 From: Carlos Martins Date: Mon, 6 Sep 2021 16:25:09 -0600 Subject: [PATCH 21/47] add draft reimbursementAccount to ValidationStep --- .../ReimbursementAccount/ValidationStep.js | 50 ++++++++++++++++--- 1 file changed, 42 insertions(+), 8 deletions(-) diff --git a/src/pages/ReimbursementAccount/ValidationStep.js b/src/pages/ReimbursementAccount/ValidationStep.js index 627d308d767..9dfe43e4d2f 100644 --- a/src/pages/ReimbursementAccount/ValidationStep.js +++ b/src/pages/ReimbursementAccount/ValidationStep.js @@ -1,11 +1,13 @@ import React from 'react'; import {Image, View} from 'react-native'; +import {withOnyx} from 'react-native-onyx'; import PropTypes from 'prop-types'; import Str from 'expensify-common/lib/str'; import _ from 'underscore'; +import lodashGet from 'lodash/get'; import styles from '../../styles/styles'; import withLocalize, {withLocalizePropTypes} from '../../components/withLocalize'; -import {validateBankAccount} from '../../libs/actions/BankAccounts'; +import {validateBankAccount, updateReimbursementAccountDraft} from '../../libs/actions/BankAccounts'; import {navigateToConciergeChat} from '../../libs/actions/Report'; import Button from '../../components/Button'; import HeaderWithCloseButton from '../../components/HeaderWithCloseButton'; @@ -15,6 +17,8 @@ import Text from '../../components/Text'; import BankAccount from '../../libs/models/BankAccount'; import CONST from '../../CONST'; import TextLink from '../../components/TextLink'; +import ONYXKEYS from '../../ONYXKEYS'; +import compose from '../../libs/compose'; const propTypes = { ...withLocalizePropTypes, @@ -34,11 +38,16 @@ const propTypes = { /** Disable validation button if max attempts exceeded */ maxAttemptsReached: PropTypes.bool, + + /** Draft of the bank account currently in setup */ + // eslint-disable-next-line react/forbid-prop-types + reimbursementAccountDraft: PropTypes.object, }; const defaultProps = { error: '', maxAttemptsReached: false, + reimbursementAccountDraft: {}, }; class ValidationStep extends React.Component { @@ -47,11 +56,12 @@ class ValidationStep extends React.Component { this.submit = this.submit.bind(this); this.verifyingUrl = `${CONST.CLOUDFRONT_URL}/images/icons/emptystates/emptystate_reviewing.gif`; + this.debouncedUpdateReimbursementAccountDraft = _.debounce(this.debouncedUpdateReimbursementAccountDraft.bind(this), 100, false); this.state = { - amount1: '', - amount2: '', - amount3: '', + amount1: lodashGet(props, ['reimbursementAccountDraft', 'amount1'], ''), + amount2: lodashGet(props, ['reimbursementAccountDraft', 'amount2'], ''), + amount3: lodashGet(props, ['reimbursementAccountDraft', 'amount3'], ''), error: '', }; @@ -80,6 +90,23 @@ class ValidationStep extends React.Component { this.setState({error: 'Invalid amounts'}); } + /** + * + * @param {Object} value + */ + debouncedUpdateReimbursementAccountDraft(value) { + updateReimbursementAccountDraft(value); + } + + /** + * + * @param {Object} value + */ + setValue(value) { + this.debouncedUpdateReimbursementAccountDraft(value); + this.setState(value); + } + /** * Filter input for validation amount * Anything that isn't a number is returned as an empty string @@ -135,21 +162,21 @@ class ValidationStep extends React.Component { placeholder="1.52" keyboardType="number-pad" value={this.state.amount1} - onChangeText={amount1 => this.setState({amount1})} + onChangeText={amount1 => this.setValue({amount1})} /> this.setState({amount2})} + onChangeText={amount2 => this.setValue({amount2})} /> this.setState({amount3})} + onChangeText={amount3 => this.setValue({amount3})} /> {!_.isEmpty(errorMessage) && ( @@ -198,4 +225,11 @@ class ValidationStep extends React.Component { ValidationStep.propTypes = propTypes; ValidationStep.defaultProps = defaultProps; -export default withLocalize(ValidationStep); +export default compose( + withLocalize, + withOnyx({ + reimbursementAccountDraft: { + key: ONYXKEYS.REIMBURSEMENT_ACCOUNT_DRAFT, + }, + }), +)(ValidationStep); From 84ca808a756ff9638267db1646e9b3f197f29f3f Mon Sep 17 00:00:00 2001 From: Carlos Martins Date: Mon, 6 Sep 2021 16:27:42 -0600 Subject: [PATCH 22/47] remove propTypes and defaultProps --- src/pages/ReimbursementAccount/BankAccountStep.js | 10 ---------- .../ReimbursementAccount/BeneficialOwnersStep.js | 11 ----------- src/pages/ReimbursementAccount/CompanyStep.js | 10 ---------- src/pages/ReimbursementAccount/RequestorStep.js | 9 --------- src/pages/ReimbursementAccount/ValidationStep.js | 5 ----- 5 files changed, 45 deletions(-) diff --git a/src/pages/ReimbursementAccount/BankAccountStep.js b/src/pages/ReimbursementAccount/BankAccountStep.js index f17b51c2dac..2d5991965a8 100644 --- a/src/pages/ReimbursementAccount/BankAccountStep.js +++ b/src/pages/ReimbursementAccount/BankAccountStep.js @@ -44,17 +44,9 @@ const propTypes = { existingOwners: PropTypes.arrayOf(PropTypes.string), }).isRequired, - /** Draft of the bank account currently in setup */ - // eslint-disable-next-line react/forbid-prop-types - reimbursementAccountDraft: PropTypes.object, - ...withLocalizePropTypes, }; -const defaultProps = { - reimbursementAccountDraft: {}, -}; - class BankAccountStep extends React.Component { constructor(props) { super(props); @@ -390,8 +382,6 @@ class BankAccountStep extends React.Component { } BankAccountStep.propTypes = propTypes; -BankAccountStep.defaultProps = defaultProps; - export default compose( withLocalize, withOnyx({ diff --git a/src/pages/ReimbursementAccount/BeneficialOwnersStep.js b/src/pages/ReimbursementAccount/BeneficialOwnersStep.js index 22014c5433b..c77309ec644 100644 --- a/src/pages/ReimbursementAccount/BeneficialOwnersStep.js +++ b/src/pages/ReimbursementAccount/BeneficialOwnersStep.js @@ -36,17 +36,8 @@ const propTypes = { /** Error set when handling the API response */ error: PropTypes.string, }).isRequired, - - /** Draft of the bank account currently in setup */ - // eslint-disable-next-line react/forbid-prop-types - reimbursementAccountDraft: PropTypes.object, -}; - -const defaultProps = { - reimbursementAccountDraft: {}, }; - class BeneficialOwnersStep extends React.Component { constructor(props) { super(props); @@ -284,8 +275,6 @@ class BeneficialOwnersStep extends React.Component { } BeneficialOwnersStep.propTypes = propTypes; -BeneficialOwnersStep.defaultProps = defaultProps; - export default compose( withLocalize, withOnyx({ diff --git a/src/pages/ReimbursementAccount/CompanyStep.js b/src/pages/ReimbursementAccount/CompanyStep.js index a4767f1b2ce..33b599bc594 100644 --- a/src/pages/ReimbursementAccount/CompanyStep.js +++ b/src/pages/ReimbursementAccount/CompanyStep.js @@ -39,17 +39,9 @@ const propTypes = { error: PropTypes.string, }).isRequired, - /** Draft of the bank account currently in setup */ - // eslint-disable-next-line react/forbid-prop-types - reimbursementAccountDraft: PropTypes.object, - ...withLocalizePropTypes, }; -const defaultProps = { - reimbursementAccountDraft: {}, -}; - class CompanyStep extends React.Component { constructor(props) { super(props); @@ -386,8 +378,6 @@ class CompanyStep extends React.Component { } CompanyStep.propTypes = propTypes; -CompanyStep.defaultProps = defaultProps; - export default compose( withLocalize, withOnyx({ diff --git a/src/pages/ReimbursementAccount/RequestorStep.js b/src/pages/ReimbursementAccount/RequestorStep.js index 50a4da4c405..1476a227e65 100644 --- a/src/pages/ReimbursementAccount/RequestorStep.js +++ b/src/pages/ReimbursementAccount/RequestorStep.js @@ -33,17 +33,9 @@ const propTypes = { error: PropTypes.string, }).isRequired, - /** Draft of the bank account currently in setup */ - // eslint-disable-next-line react/forbid-prop-types - reimbursementAccountDraft: PropTypes.object, - ...withLocalizePropTypes, }; -const defaultProps = { - reimbursementAccountDraft: {}, -}; - class RequestorStep extends React.Component { constructor(props) { super(props); @@ -244,7 +236,6 @@ class RequestorStep extends React.Component { } RequestorStep.propTypes = propTypes; -RequestorStep.defaultProps = defaultProps; RequestorStep.displayName = 'RequestorStep'; export default compose( diff --git a/src/pages/ReimbursementAccount/ValidationStep.js b/src/pages/ReimbursementAccount/ValidationStep.js index 9dfe43e4d2f..7aaadd617c8 100644 --- a/src/pages/ReimbursementAccount/ValidationStep.js +++ b/src/pages/ReimbursementAccount/ValidationStep.js @@ -38,16 +38,11 @@ const propTypes = { /** Disable validation button if max attempts exceeded */ maxAttemptsReached: PropTypes.bool, - - /** Draft of the bank account currently in setup */ - // eslint-disable-next-line react/forbid-prop-types - reimbursementAccountDraft: PropTypes.object, }; const defaultProps = { error: '', maxAttemptsReached: false, - reimbursementAccountDraft: {}, }; class ValidationStep extends React.Component { From e2297a0d00d9661fdb54a8b407cb935561acf453 Mon Sep 17 00:00:00 2001 From: Carlos Martins Date: Mon, 6 Sep 2021 16:28:41 -0600 Subject: [PATCH 23/47] move setValue --- .../ReimbursementAccount/ValidationStep.js | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) diff --git a/src/pages/ReimbursementAccount/ValidationStep.js b/src/pages/ReimbursementAccount/ValidationStep.js index 7aaadd617c8..91811599250 100644 --- a/src/pages/ReimbursementAccount/ValidationStep.js +++ b/src/pages/ReimbursementAccount/ValidationStep.js @@ -67,6 +67,15 @@ class ValidationStep extends React.Component { ]; } + /** + * + * @param {Object} value + */ + setValue(value) { + this.debouncedUpdateReimbursementAccountDraft(value); + this.setState(value); + } + submit() { const amount1 = this.filterInput(this.state.amount1); const amount2 = this.filterInput(this.state.amount2); @@ -93,15 +102,6 @@ class ValidationStep extends React.Component { updateReimbursementAccountDraft(value); } - /** - * - * @param {Object} value - */ - setValue(value) { - this.debouncedUpdateReimbursementAccountDraft(value); - this.setState(value); - } - /** * Filter input for validation amount * Anything that isn't a number is returned as an empty string From b5b65cd1ffce533b419e3899d3016b1c19be6ade Mon Sep 17 00:00:00 2001 From: Carlos Martins Date: Mon, 6 Sep 2021 16:56:59 -0600 Subject: [PATCH 24/47] clear reimbursementAccountDraft key after flow is completed --- src/libs/actions/BankAccounts.js | 1 + 1 file changed, 1 insertion(+) diff --git a/src/libs/actions/BankAccounts.js b/src/libs/actions/BankAccounts.js index df42a237570..99596e82e35 100644 --- a/src/libs/actions/BankAccounts.js +++ b/src/libs/actions/BankAccounts.js @@ -587,6 +587,7 @@ function validateBankAccount(bankAccountID, validateCode) { .then((response) => { if (response.jsonCode === 200) { Growl.show('Bank Account successfully validated!', CONST.GROWL.SUCCESS, 5000); + Onyx.set(ONYXKEYS.REIMBURSEMENT_ACCOUNT_DRAFT, {}); API.User_IsUsingExpensifyCard() .then(({isUsingExpensifyCard}) => { const reimbursementAccount = { From cb0a56c77a6ca0c2d5a8843feb6675a7b288b984 Mon Sep 17 00:00:00 2001 From: Carlos Martins Date: Mon, 6 Sep 2021 17:32:26 -0600 Subject: [PATCH 25/47] add hasAcceptedTerms to draft data --- src/pages/ReimbursementAccount/BankAccountStep.js | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/src/pages/ReimbursementAccount/BankAccountStep.js b/src/pages/ReimbursementAccount/BankAccountStep.js index 2d5991965a8..4256c4b6220 100644 --- a/src/pages/ReimbursementAccount/BankAccountStep.js +++ b/src/pages/ReimbursementAccount/BankAccountStep.js @@ -58,7 +58,7 @@ class BankAccountStep extends React.Component { this.state = { // One of CONST.BANK_ACCOUNT.SETUP_TYPE bankAccountAddMethod: props.achData.subStep || undefined, - hasAcceptedTerms: props.achData.acceptTerms || true, + hasAcceptedTerms: lodashGet(props, ['reimbursementAccountDraft', 'hasAcceptedTerms']) || lodashGet(props, ['achData', 'acceptTerms'], true), routingNumber: lodashGet(props, ['reimbursementAccountDraft', 'routingNumber']) || lodashGet(props, ['achData', 'routingNumber'], ''), accountNumber: lodashGet(props, ['reimbursementAccountDraft', 'accountNumber']) || lodashGet(props, ['achData', 'accountNumber'], ''), }; @@ -87,9 +87,10 @@ class BankAccountStep extends React.Component { } toggleTerms() { - this.setState(prevState => ({ - hasAcceptedTerms: !prevState.hasAcceptedTerms, - })); + this.setState(prevState => { + this.debouncedUpdateReimbursementAccountDraft({hasAcceptedTerms: !prevState.hasAcceptedTerms}); + return {hasAcceptedTerms: !prevState.hasAcceptedTerms}; + }); } /** From 19a1d75344d351e510c441a60e6487a8eac7c0ee Mon Sep 17 00:00:00 2001 From: Carlos Martins Date: Mon, 6 Sep 2021 17:33:17 -0600 Subject: [PATCH 26/47] fix style --- src/pages/ReimbursementAccount/BankAccountStep.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/ReimbursementAccount/BankAccountStep.js b/src/pages/ReimbursementAccount/BankAccountStep.js index 4256c4b6220..6048f3ab658 100644 --- a/src/pages/ReimbursementAccount/BankAccountStep.js +++ b/src/pages/ReimbursementAccount/BankAccountStep.js @@ -87,7 +87,7 @@ class BankAccountStep extends React.Component { } toggleTerms() { - this.setState(prevState => { + this.setState((prevState) => { this.debouncedUpdateReimbursementAccountDraft({hasAcceptedTerms: !prevState.hasAcceptedTerms}); return {hasAcceptedTerms: !prevState.hasAcceptedTerms}; }); From 6cd50196146353b106a98aea9fcd63081fa759ba Mon Sep 17 00:00:00 2001 From: Carlos Martins Date: Tue, 7 Sep 2021 12:33:50 -0600 Subject: [PATCH 27/47] add debounce comment --- src/pages/ReimbursementAccount/BankAccountStep.js | 4 +++- src/pages/ReimbursementAccount/BeneficialOwnersStep.js | 4 +++- src/pages/ReimbursementAccount/CompanyStep.js | 4 +++- src/pages/ReimbursementAccount/RequestorStep.js | 4 +++- src/pages/ReimbursementAccount/ValidationStep.js | 4 +++- 5 files changed, 15 insertions(+), 5 deletions(-) diff --git a/src/pages/ReimbursementAccount/BankAccountStep.js b/src/pages/ReimbursementAccount/BankAccountStep.js index 6048f3ab658..fa4eef5fcad 100644 --- a/src/pages/ReimbursementAccount/BankAccountStep.js +++ b/src/pages/ReimbursementAccount/BankAccountStep.js @@ -192,7 +192,9 @@ class BankAccountStep extends React.Component { } /** - * + * Save the input value in Onyx. We debounce this method in the constructor so that it's not called too often + * to update Onyx and re-render this component. + * * @param {Object} value */ debouncedUpdateReimbursementAccountDraft(value) { diff --git a/src/pages/ReimbursementAccount/BeneficialOwnersStep.js b/src/pages/ReimbursementAccount/BeneficialOwnersStep.js index c77309ec644..09e566e9ce3 100644 --- a/src/pages/ReimbursementAccount/BeneficialOwnersStep.js +++ b/src/pages/ReimbursementAccount/BeneficialOwnersStep.js @@ -122,7 +122,9 @@ class BeneficialOwnersStep extends React.Component { } /** - * + * Save the input value in Onyx. We debounce this method in the constructor so that it's not called too often + * to update Onyx and re-render this component. + * * @param {Object} value */ debouncedUpdateReimbursementAccountDraft(value) { diff --git a/src/pages/ReimbursementAccount/CompanyStep.js b/src/pages/ReimbursementAccount/CompanyStep.js index 33b599bc594..b401e55800e 100644 --- a/src/pages/ReimbursementAccount/CompanyStep.js +++ b/src/pages/ReimbursementAccount/CompanyStep.js @@ -156,7 +156,9 @@ class CompanyStep extends React.Component { } /** - * + * Save the input value in Onyx. We debounce this method in the constructor so that it's not called too often + * to update Onyx and re-render this component. + * * @param {Object} value */ debouncedUpdateReimbursementAccountDraft(value) { diff --git a/src/pages/ReimbursementAccount/RequestorStep.js b/src/pages/ReimbursementAccount/RequestorStep.js index 1476a227e65..ac9dcb3a1f9 100644 --- a/src/pages/ReimbursementAccount/RequestorStep.js +++ b/src/pages/ReimbursementAccount/RequestorStep.js @@ -82,7 +82,9 @@ class RequestorStep extends React.Component { } /** - * + * Save the input value in Onyx. We debounce this method in the constructor so that it's not called too often + * to update Onyx and re-render this component. + * * @param {Object} value */ debouncedUpdateReimbursementAccountDraft(value) { diff --git a/src/pages/ReimbursementAccount/ValidationStep.js b/src/pages/ReimbursementAccount/ValidationStep.js index 91811599250..2ac604e78e8 100644 --- a/src/pages/ReimbursementAccount/ValidationStep.js +++ b/src/pages/ReimbursementAccount/ValidationStep.js @@ -95,7 +95,9 @@ class ValidationStep extends React.Component { } /** - * + * Save the input value in Onyx. We debounce this method in the constructor so that it's not called too often + * to update Onyx and re-render this component. + * * @param {Object} value */ debouncedUpdateReimbursementAccountDraft(value) { From cd26127c4a3f16843c7b2ca25ca793f1f77a4608 Mon Sep 17 00:00:00 2001 From: Carlos Martins Date: Tue, 7 Sep 2021 13:05:22 -0600 Subject: [PATCH 28/47] edit comments, add newState variable --- src/pages/ReimbursementAccount/BankAccountStep.js | 7 ++++--- src/pages/ReimbursementAccount/BeneficialOwnersStep.js | 8 ++++---- src/pages/ReimbursementAccount/CompanyStep.js | 2 +- src/pages/ReimbursementAccount/RequestorStep.js | 2 +- src/pages/ReimbursementAccount/ValidationStep.js | 2 +- 5 files changed, 11 insertions(+), 10 deletions(-) diff --git a/src/pages/ReimbursementAccount/BankAccountStep.js b/src/pages/ReimbursementAccount/BankAccountStep.js index fa4eef5fcad..82ca9157574 100644 --- a/src/pages/ReimbursementAccount/BankAccountStep.js +++ b/src/pages/ReimbursementAccount/BankAccountStep.js @@ -88,8 +88,9 @@ class BankAccountStep extends React.Component { toggleTerms() { this.setState((prevState) => { - this.debouncedUpdateReimbursementAccountDraft({hasAcceptedTerms: !prevState.hasAcceptedTerms}); - return {hasAcceptedTerms: !prevState.hasAcceptedTerms}; + const newState = {hasAcceptedTerms: !prevState.hasAcceptedTerms}; + this.debouncedUpdateReimbursementAccountDraft(newState); + return newState; }); } @@ -194,7 +195,7 @@ class BankAccountStep extends React.Component { /** * Save the input value in Onyx. We debounce this method in the constructor so that it's not called too often * to update Onyx and re-render this component. - * + * * @param {Object} value */ debouncedUpdateReimbursementAccountDraft(value) { diff --git a/src/pages/ReimbursementAccount/BeneficialOwnersStep.js b/src/pages/ReimbursementAccount/BeneficialOwnersStep.js index 09e566e9ce3..20cf0737fc4 100644 --- a/src/pages/ReimbursementAccount/BeneficialOwnersStep.js +++ b/src/pages/ReimbursementAccount/BeneficialOwnersStep.js @@ -124,7 +124,7 @@ class BeneficialOwnersStep extends React.Component { /** * Save the input value in Onyx. We debounce this method in the constructor so that it's not called too often * to update Onyx and re-render this component. - * + * * @param {Object} value */ debouncedUpdateReimbursementAccountDraft(value) { @@ -132,13 +132,13 @@ class BeneficialOwnersStep extends React.Component { } /** - * * @param {Object} fieldName */ toggleCheckbox(fieldName) { this.setState((prevState) => { - this.debouncedUpdateReimbursementAccountDraft({[fieldName]: !prevState[fieldName]}); - return {[fieldName]: !prevState[fieldName]}; + const newState = {[fieldName]: !prevState[fieldName]}; + this.debouncedUpdateReimbursementAccountDraft(newState); + return newState; }); } diff --git a/src/pages/ReimbursementAccount/CompanyStep.js b/src/pages/ReimbursementAccount/CompanyStep.js index b401e55800e..efc9834e4af 100644 --- a/src/pages/ReimbursementAccount/CompanyStep.js +++ b/src/pages/ReimbursementAccount/CompanyStep.js @@ -158,7 +158,7 @@ class CompanyStep extends React.Component { /** * Save the input value in Onyx. We debounce this method in the constructor so that it's not called too often * to update Onyx and re-render this component. - * + * * @param {Object} value */ debouncedUpdateReimbursementAccountDraft(value) { diff --git a/src/pages/ReimbursementAccount/RequestorStep.js b/src/pages/ReimbursementAccount/RequestorStep.js index ac9dcb3a1f9..d1c1c3af823 100644 --- a/src/pages/ReimbursementAccount/RequestorStep.js +++ b/src/pages/ReimbursementAccount/RequestorStep.js @@ -84,7 +84,7 @@ class RequestorStep extends React.Component { /** * Save the input value in Onyx. We debounce this method in the constructor so that it's not called too often * to update Onyx and re-render this component. - * + * * @param {Object} value */ debouncedUpdateReimbursementAccountDraft(value) { diff --git a/src/pages/ReimbursementAccount/ValidationStep.js b/src/pages/ReimbursementAccount/ValidationStep.js index 2ac604e78e8..ebccce06afb 100644 --- a/src/pages/ReimbursementAccount/ValidationStep.js +++ b/src/pages/ReimbursementAccount/ValidationStep.js @@ -97,7 +97,7 @@ class ValidationStep extends React.Component { /** * Save the input value in Onyx. We debounce this method in the constructor so that it's not called too often * to update Onyx and re-render this component. - * + * * @param {Object} value */ debouncedUpdateReimbursementAccountDraft(value) { From 5bc3988b024ef2806dfc1b04bea852b5f59bd0a5 Mon Sep 17 00:00:00 2001 From: Carlos Martins Date: Tue, 7 Sep 2021 13:26:38 -0600 Subject: [PATCH 29/47] remove oldACH changes --- src/libs/actions/BankAccounts.js | 17 +---------------- 1 file changed, 1 insertion(+), 16 deletions(-) diff --git a/src/libs/actions/BankAccounts.js b/src/libs/actions/BankAccounts.js index 99596e82e35..705cc3aa297 100644 --- a/src/libs/actions/BankAccounts.js +++ b/src/libs/actions/BankAccounts.js @@ -337,10 +337,6 @@ function fetchUserWallet() { * @param {String} [stepToOpen] */ function fetchFreePlanVerifiedBankAccount(stepToOpen) { - const oldACHData = { - accountNumber: reimbursementAccountInSetup.accountNumber || '', - routingNumber: reimbursementAccountInSetup.routingNumber || '', - }; // We are using set here since we will rely on data from the server (not local data) to populate the VBA flow // and determine which step to navigate to. @@ -503,18 +499,7 @@ function fetchFreePlanVerifiedBankAccount(stepToOpen) { goToWithdrawalAccountSetupStep(currentStep, achData); }) .finally(() => { - const dataToMerge = { - loading: false, - }; - - // If we didn't get a routingNumber and accountNumber from the response and we have previously saved - // values, autofill them - if (!reimbursementAccountInSetup.routingNumber && !reimbursementAccountInSetup.accountNumber - && oldACHData.routingNumber && oldACHData.accountNumber) { - dataToMerge.achData = oldACHData; - } - - Onyx.merge(ONYXKEYS.REIMBURSEMENT_ACCOUNT, dataToMerge); + Onyx.merge(ONYXKEYS.REIMBURSEMENT_ACCOUNT, {loading: false}); }); }); } From d99d6020c19edf8119954f8104f2c7138cf59f24 Mon Sep 17 00:00:00 2001 From: Carlos Martins Date: Tue, 7 Sep 2021 13:27:29 -0600 Subject: [PATCH 30/47] fix existingOwners bug --- src/pages/ReimbursementAccount/BankAccountStep.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/ReimbursementAccount/BankAccountStep.js b/src/pages/ReimbursementAccount/BankAccountStep.js index 82ca9157574..f1294795b33 100644 --- a/src/pages/ReimbursementAccount/BankAccountStep.js +++ b/src/pages/ReimbursementAccount/BankAccountStep.js @@ -208,7 +208,7 @@ class BankAccountStep extends React.Component { const shouldDisableInputs = Boolean(this.props.achData.bankAccountID) || isFromPlaid; const existingOwners = this.props.reimbursementAccount.existingOwners; const error = this.getErrors(); - const isExistingOwnersErrorVisible = Boolean(error && existingOwners); + const isExistingOwnersErrorVisible = Boolean(error && existingOwners && existingOwners.length); return ( Date: Tue, 7 Sep 2021 13:52:20 -0600 Subject: [PATCH 31/47] remove space --- src/libs/actions/BankAccounts.js | 1 - 1 file changed, 1 deletion(-) diff --git a/src/libs/actions/BankAccounts.js b/src/libs/actions/BankAccounts.js index 705cc3aa297..cfd3c62cedb 100644 --- a/src/libs/actions/BankAccounts.js +++ b/src/libs/actions/BankAccounts.js @@ -337,7 +337,6 @@ function fetchUserWallet() { * @param {String} [stepToOpen] */ function fetchFreePlanVerifiedBankAccount(stepToOpen) { - // We are using set here since we will rely on data from the server (not local data) to populate the VBA flow // and determine which step to navigate to. Onyx.set(ONYXKEYS.REIMBURSEMENT_ACCOUNT, { From ff05b4303a735e2593b10b1d8835036a72f3ce8b Mon Sep 17 00:00:00 2001 From: Carlos Martins Date: Wed, 8 Sep 2021 10:22:07 -0600 Subject: [PATCH 32/47] change {} to null --- src/libs/actions/BankAccounts.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/libs/actions/BankAccounts.js b/src/libs/actions/BankAccounts.js index cfd3c62cedb..d06696b8c07 100644 --- a/src/libs/actions/BankAccounts.js +++ b/src/libs/actions/BankAccounts.js @@ -571,7 +571,7 @@ function validateBankAccount(bankAccountID, validateCode) { .then((response) => { if (response.jsonCode === 200) { Growl.show('Bank Account successfully validated!', CONST.GROWL.SUCCESS, 5000); - Onyx.set(ONYXKEYS.REIMBURSEMENT_ACCOUNT_DRAFT, {}); + Onyx.set(ONYXKEYS.REIMBURSEMENT_ACCOUNT_DRAFT, null); API.User_IsUsingExpensifyCard() .then(({isUsingExpensifyCard}) => { const reimbursementAccount = { From e30126de92272cde67833b789f9f88631dec2cc5 Mon Sep 17 00:00:00 2001 From: Carlos Martins Date: Wed, 8 Sep 2021 10:26:04 -0600 Subject: [PATCH 33/47] add jsdocs to updateReimbursementAccount --- src/libs/actions/BankAccounts.js | 3 +++ 1 file changed, 3 insertions(+) diff --git a/src/libs/actions/BankAccounts.js b/src/libs/actions/BankAccounts.js index d06696b8c07..9f72d697cad 100644 --- a/src/libs/actions/BankAccounts.js +++ b/src/libs/actions/BankAccounts.js @@ -827,6 +827,9 @@ function setWorkspaceIDForReimbursementAccount(workspaceID) { Onyx.merge(ONYXKEYS.REIMBURSEMENT_ACCOUNT_WORKSPACE_ID, workspaceID); } +/** + * @param {Object} bankAccountData + */ function updateReimbursementAccountDraft(bankAccountData) { Onyx.merge(ONYXKEYS.REIMBURSEMENT_ACCOUNT_DRAFT, {...bankAccountData}); } From 97eb173bc5adb73c597233d84d4959c9d4a4a406 Mon Sep 17 00:00:00 2001 From: Carlos Martins Date: Wed, 8 Sep 2021 10:27:01 -0600 Subject: [PATCH 34/47] remove extra space --- src/pages/ReimbursementAccount/CompanyStep.js | 1 - 1 file changed, 1 deletion(-) diff --git a/src/pages/ReimbursementAccount/CompanyStep.js b/src/pages/ReimbursementAccount/CompanyStep.js index efc9834e4af..be548b765df 100644 --- a/src/pages/ReimbursementAccount/CompanyStep.js +++ b/src/pages/ReimbursementAccount/CompanyStep.js @@ -85,7 +85,6 @@ class CompanyStep extends React.Component { } /** - * * @param {String} value */ setValue(value) { From 26c061645da2e70cbc0239746f55554433b436af Mon Sep 17 00:00:00 2001 From: Carlos Martins Date: Wed, 8 Sep 2021 10:46:19 -0600 Subject: [PATCH 35/47] dry dupe states --- src/pages/ReimbursementAccount/BankAccountStep.js | 5 +++-- .../ReimbursementAccount/BeneficialOwnersStep.js | 12 ++++-------- src/pages/ReimbursementAccount/CompanyStep.js | 5 +++-- src/pages/ReimbursementAccount/RequestorStep.js | 10 ++++++---- src/pages/ReimbursementAccount/ValidationStep.js | 1 - 5 files changed, 16 insertions(+), 17 deletions(-) diff --git a/src/pages/ReimbursementAccount/BankAccountStep.js b/src/pages/ReimbursementAccount/BankAccountStep.js index f1294795b33..df7ad22fdda 100644 --- a/src/pages/ReimbursementAccount/BankAccountStep.js +++ b/src/pages/ReimbursementAccount/BankAccountStep.js @@ -127,8 +127,9 @@ class BankAccountStep extends React.Component { * @param {String} value */ clearErrorAndSetValue(inputKey, value) { - this.setState({[inputKey]: value}); - this.debouncedUpdateReimbursementAccountDraft({[inputKey]: value}); + const newState = {[inputKey]: value}; + this.setState(newState); + this.debouncedUpdateReimbursementAccountDraft(newState); const errors = this.getErrors(); if (!errors[inputKey]) { // No error found for this inputKey diff --git a/src/pages/ReimbursementAccount/BeneficialOwnersStep.js b/src/pages/ReimbursementAccount/BeneficialOwnersStep.js index 20cf0737fc4..94cf411486d 100644 --- a/src/pages/ReimbursementAccount/BeneficialOwnersStep.js +++ b/src/pages/ReimbursementAccount/BeneficialOwnersStep.js @@ -175,18 +175,14 @@ class BeneficialOwnersStep extends React.Component { onPress={() => { this.setState((prevState) => { const hasOtherBeneficialOwners = !prevState.hasOtherBeneficialOwners; - this.debouncedUpdateReimbursementAccountDraft({ - hasOtherBeneficialOwners: !prevState.hasOtherBeneficialOwners, - beneficialOwners: hasOtherBeneficialOwners && _.isEmpty(prevState.beneficialOwners) - ? [{}] - : prevState.beneficialOwners, - }); - return { + const newState = { hasOtherBeneficialOwners, beneficialOwners: hasOtherBeneficialOwners && _.isEmpty(prevState.beneficialOwners) ? [{}] : prevState.beneficialOwners, - }; + } + this.debouncedUpdateReimbursementAccountDraft(newState); + return newState; }); }} LabelComponent={() => ( diff --git a/src/pages/ReimbursementAccount/CompanyStep.js b/src/pages/ReimbursementAccount/CompanyStep.js index be548b765df..d0d3c75c437 100644 --- a/src/pages/ReimbursementAccount/CompanyStep.js +++ b/src/pages/ReimbursementAccount/CompanyStep.js @@ -346,8 +346,9 @@ class CompanyStep extends React.Component { this.setState((prevState) => { - this.debouncedUpdateReimbursementAccountDraft({hasNoConnectionToCannabis: !prevState.hasNoConnectionToCannabis}); - return {hasNoConnectionToCannabis: !prevState.hasNoConnectionToCannabis}; + const newState = {hasNoConnectionToCannabis: !prevState.hasNoConnectionToCannabis}; + this.debouncedUpdateReimbursementAccountDraft(newState); + return newState; })} LabelComponent={() => ( <> diff --git a/src/pages/ReimbursementAccount/RequestorStep.js b/src/pages/ReimbursementAccount/RequestorStep.js index d1c1c3af823..6bc4a1a2a68 100644 --- a/src/pages/ReimbursementAccount/RequestorStep.js +++ b/src/pages/ReimbursementAccount/RequestorStep.js @@ -77,8 +77,9 @@ class RequestorStep extends React.Component { zipCode: 'requestorAddressZipCode', }; const fieldName = lodashGet(renamedFields, field, field); - this.setState({[fieldName]: value}); - this.debouncedUpdateReimbursementAccountDraft({[fieldName]: value}); + const newState = {[fieldName]: value}; + this.setState(newState); + this.debouncedUpdateReimbursementAccountDraft(newState); } /** @@ -166,8 +167,9 @@ class RequestorStep extends React.Component { this.setState((prevState) => { - this.debouncedUpdateReimbursementAccountDraft({isControllingOfficer: !prevState.isControllingOfficer}); - return {isControllingOfficer: !prevState.isControllingOfficer}; + const newState = {isControllingOfficer: !prevState.isControllingOfficer}; + this.debouncedUpdateReimbursementAccountDraft(newState); + return newState; })} LabelComponent={() => ( diff --git a/src/pages/ReimbursementAccount/ValidationStep.js b/src/pages/ReimbursementAccount/ValidationStep.js index ebccce06afb..452a5ada7d1 100644 --- a/src/pages/ReimbursementAccount/ValidationStep.js +++ b/src/pages/ReimbursementAccount/ValidationStep.js @@ -68,7 +68,6 @@ class ValidationStep extends React.Component { } /** - * * @param {Object} value */ setValue(value) { From 9b55bd79410cae6666183803385cd07e78237179 Mon Sep 17 00:00:00 2001 From: Carlos Martins Date: Wed, 8 Sep 2021 12:39:40 -0600 Subject: [PATCH 36/47] add getDefaultStateForField --- src/libs/getDefaultStateForField.js | 16 +++++++++++ .../ReimbursementAccount/BankAccountStep.js | 12 ++++----- src/pages/ReimbursementAccount/CompanyStep.js | 27 ++++++++++--------- .../ReimbursementAccount/RequestorStep.js | 19 ++++++------- 4 files changed, 46 insertions(+), 28 deletions(-) create mode 100644 src/libs/getDefaultStateForField.js diff --git a/src/libs/getDefaultStateForField.js b/src/libs/getDefaultStateForField.js new file mode 100644 index 00000000000..0ee3eecdc65 --- /dev/null +++ b/src/libs/getDefaultStateForField.js @@ -0,0 +1,16 @@ +import lodashGet from 'lodash/get'; + +/** + * Add / to the end of any URL if not present + * @param {Object} props + * @param {String} fieldName + * @param {*} defaultValue + * + * @returns {*} + */ +function getDefaultStateForField(props, fieldName, defaultValue = '') { + return lodashGet(props, ['reimbursementAccountDraft', fieldName]) + || lodashGet(props, ['achData', fieldName], defaultValue); +} + +export default getDefaultStateForField; diff --git a/src/pages/ReimbursementAccount/BankAccountStep.js b/src/pages/ReimbursementAccount/BankAccountStep.js index df7ad22fdda..719815f139b 100644 --- a/src/pages/ReimbursementAccount/BankAccountStep.js +++ b/src/pages/ReimbursementAccount/BankAccountStep.js @@ -33,6 +33,7 @@ import { import ConfirmModal from '../../components/ConfirmModal'; import ONYXKEYS from '../../ONYXKEYS'; import compose from '../../libs/compose'; +import getDefaultStateForField from '../../libs/getDefaultStateForField'; const propTypes = { /** Bank account currently in setup */ @@ -58,9 +59,9 @@ class BankAccountStep extends React.Component { this.state = { // One of CONST.BANK_ACCOUNT.SETUP_TYPE bankAccountAddMethod: props.achData.subStep || undefined, - hasAcceptedTerms: lodashGet(props, ['reimbursementAccountDraft', 'hasAcceptedTerms']) || lodashGet(props, ['achData', 'acceptTerms'], true), - routingNumber: lodashGet(props, ['reimbursementAccountDraft', 'routingNumber']) || lodashGet(props, ['achData', 'routingNumber'], ''), - accountNumber: lodashGet(props, ['reimbursementAccountDraft', 'accountNumber']) || lodashGet(props, ['achData', 'accountNumber'], ''), + hasAcceptedTerms: getDefaultStateForField(props, 'acceptTerms', true), + routingNumber: getDefaultStateForField(props, 'routingNumber'), + accountNumber: getDefaultStateForField(props, 'accountNumber'), }; // Keys in this.errorTranslationKeys are associated to inputs, they are a subset of the keys found in this.state @@ -88,9 +89,8 @@ class BankAccountStep extends React.Component { toggleTerms() { this.setState((prevState) => { - const newState = {hasAcceptedTerms: !prevState.hasAcceptedTerms}; - this.debouncedUpdateReimbursementAccountDraft(newState); - return newState; + this.debouncedUpdateReimbursementAccountDraft({acceptTerms: !prevState.hasAcceptedTerms}); + return {hasAcceptedTerms: !prevState.hasAcceptedTerms}; }); } diff --git a/src/pages/ReimbursementAccount/CompanyStep.js b/src/pages/ReimbursementAccount/CompanyStep.js index d0d3c75c437..03f33e27efe 100644 --- a/src/pages/ReimbursementAccount/CompanyStep.js +++ b/src/pages/ReimbursementAccount/CompanyStep.js @@ -31,6 +31,7 @@ import { import compose from '../../libs/compose'; import ONYXKEYS from '../../ONYXKEYS'; import ExpensiPicker from '../../components/ExpensiPicker'; +import getDefaultStateForField from '../../libs/getDefaultStateForField'; const propTypes = { /** Bank account currently in setup */ @@ -50,19 +51,19 @@ class CompanyStep extends React.Component { this.debouncedUpdateReimbursementAccountDraft = _.debounce(this.debouncedUpdateReimbursementAccountDraft.bind(this), 100, false); this.state = { - companyName: lodashGet(props, ['reimbursementAccountDraft', 'companyName']) || lodashGet(props, ['achData', 'companyName'], ''), - addressStreet: lodashGet(props, ['reimbursementAccountDraft', 'addressStreet']) || lodashGet(props, ['achData', 'addressStreet'], ''), - addressCity: lodashGet(props, ['reimbursementAccountDraft', 'addressCity']) || lodashGet(props, ['achData', 'addressCity'], ''), - addressState: lodashGet(props, ['reimbursementAccountDraft', 'addressState']) || lodashGet(props, ['achData', 'addressState'], ''), - addressZipCode: lodashGet(props, ['reimbursementAccountDraft', 'addressZipCode']) || lodashGet(props, ['achData', 'addressZipCode'], ''), - companyPhone: lodashGet(props, ['reimbursementAccountDraft', 'companyPhone']) || lodashGet(props, ['achData', 'companyPhone'], ''), - website: lodashGet(props, ['reimbursementAccountDraft', 'website']) || lodashGet(props, ['achData', 'website'], 'https://'), - companyTaxID: lodashGet(props, ['reimbursementAccountDraft', 'companyTaxID']) || lodashGet(props, ['achData', 'companyTaxID'], ''), - incorporationType: lodashGet(props, ['reimbursementAccountDraft', 'incorporationType']) || lodashGet(props, ['achData', 'incorporationType'], ''), - incorporationDate: lodashGet(props, ['reimbursementAccountDraft', 'incorporationDate']) || lodashGet(props, ['achData', 'incorporationDate'], ''), - incorporationState: lodashGet(props, ['reimbursementAccountDraft', 'incorporationState']) || lodashGet(props, ['achData', 'incorporationState'], ''), - industryCode: lodashGet(props, ['reimbursementAccountDraft', 'industryCode']) || lodashGet(props, ['achData', 'industryCode'], ''), - hasNoConnectionToCannabis: lodashGet(props, ['reimbursementAccountDraft', 'hasNoConnectionToCannabis']) || lodashGet(props, ['achData', 'hasNoConnectionToCannabis'], false), + companyName: getDefaultStateForField(props, 'companyName'), + addressStreet: getDefaultStateForField(props, 'addressStreet'), + addressCity: getDefaultStateForField(props, 'addressCity'), + addressState: getDefaultStateForField(props, 'addressState'), + addressZipCode: getDefaultStateForField(props, 'addressZipCode'), + companyPhone: getDefaultStateForField(props, 'companyPhone'), + website: getDefaultStateForField(props, 'website', 'https://'), + companyTaxID: getDefaultStateForField(props, 'companyTaxID'), + incorporationType: getDefaultStateForField(props, 'incorporationType'), + incorporationDate: getDefaultStateForField(props, 'incorporationDate'), + incorporationState: getDefaultStateForField(props, 'incorporationState'), + industryCode: getDefaultStateForField(props, 'industryCode'), + hasNoConnectionToCannabis: getDefaultStateForField(props, 'hasNoConnectionToCannabis', false), password: '', }; diff --git a/src/pages/ReimbursementAccount/RequestorStep.js b/src/pages/ReimbursementAccount/RequestorStep.js index 6bc4a1a2a68..45061f5cf46 100644 --- a/src/pages/ReimbursementAccount/RequestorStep.js +++ b/src/pages/ReimbursementAccount/RequestorStep.js @@ -25,6 +25,7 @@ import {isValidIdentity} from '../../libs/ValidationUtils'; import Onfido from '../../components/Onfido'; import compose from '../../libs/compose'; import ONYXKEYS from '../../ONYXKEYS'; +import getDefaultStateForField from '../../libs/getDefaultStateForField'; const propTypes = { /** Bank account currently in setup */ @@ -44,15 +45,15 @@ class RequestorStep extends React.Component { this.debouncedUpdateReimbursementAccountDraft = _.debounce(this.debouncedUpdateReimbursementAccountDraft.bind(this), 100, false); this.state = { - firstName: lodashGet(props, ['reimbursementAccountDraft', 'firstName']) || lodashGet(props, ['achData', 'firstName'], ''), - lastName: lodashGet(props, ['reimbursementAccountDraft', 'lastName']) || lodashGet(props, ['achData', 'lastName'], ''), - requestorAddressStreet: lodashGet(props, ['reimbursementAccountDraft', 'requestorAddressStreet']) || lodashGet(props, ['achData', 'requestorAddressStreet'], ''), - requestorAddressCity: lodashGet(props, ['reimbursementAccountDraft', 'requestorAddressCity']) || lodashGet(props, ['achData', 'requestorAddressCity'], ''), - requestorAddressState: lodashGet(props, ['reimbursementAccountDraft', 'requestorAddressState']) || lodashGet(props, ['achData', 'requestorAddressState'], ''), - requestorAddressZipCode: lodashGet(props, ['reimbursementAccountDraft', 'requestorAddressZipCode']) || lodashGet(props, ['achData', 'requestorAddressZipCode'], ''), - dob: lodashGet(props, ['reimbursementAccountDraft', 'dob']) || lodashGet(props, ['achData', 'dob'], ''), - ssnLast4: lodashGet(props, ['reimbursementAccountDraft', 'ssnLast4']) || lodashGet(props, ['achData', 'ssnLast4'], ''), - isControllingOfficer: lodashGet(props, ['reimbursementAccountDraft', 'isControllingOfficer']) || lodashGet(props, ['achData', 'isControllingOfficer'], false), + firstName: getDefaultStateForField(props, 'firstName'), + lastName: getDefaultStateForField(props, 'lastName'), + requestorAddressStreet: getDefaultStateForField(props, 'requestorAddressStreet'), + requestorAddressCity: getDefaultStateForField(props, 'requestorAddressCity'), + requestorAddressState: getDefaultStateForField(props, 'requestorAddressState'), + requestorAddressZipCode: getDefaultStateForField(props, 'requestorAddressZipCode'), + dob: getDefaultStateForField(props, 'dob'), + ssnLast4: getDefaultStateForField(props, 'ssnLast4'), + isControllingOfficer: getDefaultStateForField(props, 'isControllingOfficer', false), onfidoData: lodashGet(props, ['achData', 'onfidoData'], ''), isOnfidoSetupComplete: lodashGet(props, ['achData', 'isOnfidoSetupComplete'], false), }; From 607b9a02daf0449ccbc699061c2d51ef5feb8f76 Mon Sep 17 00:00:00 2001 From: Carlos Martins Date: Wed, 8 Sep 2021 12:56:37 -0600 Subject: [PATCH 37/47] fix styles --- src/libs/actions/BankAccounts.js | 2 +- src/libs/getDefaultStateForField.js | 2 +- src/pages/ReimbursementAccount/BeneficialOwnersStep.js | 2 +- src/pages/ReimbursementAccount/CompanyStep.js | 1 - 4 files changed, 3 insertions(+), 4 deletions(-) diff --git a/src/libs/actions/BankAccounts.js b/src/libs/actions/BankAccounts.js index 9f72d697cad..56dd96003a8 100644 --- a/src/libs/actions/BankAccounts.js +++ b/src/libs/actions/BankAccounts.js @@ -828,7 +828,7 @@ function setWorkspaceIDForReimbursementAccount(workspaceID) { } /** - * @param {Object} bankAccountData + * @param {Object} bankAccountData */ function updateReimbursementAccountDraft(bankAccountData) { Onyx.merge(ONYXKEYS.REIMBURSEMENT_ACCOUNT_DRAFT, {...bankAccountData}); diff --git a/src/libs/getDefaultStateForField.js b/src/libs/getDefaultStateForField.js index 0ee3eecdc65..f318a23f821 100644 --- a/src/libs/getDefaultStateForField.js +++ b/src/libs/getDefaultStateForField.js @@ -9,7 +9,7 @@ import lodashGet from 'lodash/get'; * @returns {*} */ function getDefaultStateForField(props, fieldName, defaultValue = '') { - return lodashGet(props, ['reimbursementAccountDraft', fieldName]) + return lodashGet(props, ['reimbursementAccountDraft', fieldName]) || lodashGet(props, ['achData', fieldName], defaultValue); } diff --git a/src/pages/ReimbursementAccount/BeneficialOwnersStep.js b/src/pages/ReimbursementAccount/BeneficialOwnersStep.js index 94cf411486d..f7c084bfd3c 100644 --- a/src/pages/ReimbursementAccount/BeneficialOwnersStep.js +++ b/src/pages/ReimbursementAccount/BeneficialOwnersStep.js @@ -180,7 +180,7 @@ class BeneficialOwnersStep extends React.Component { beneficialOwners: hasOtherBeneficialOwners && _.isEmpty(prevState.beneficialOwners) ? [{}] : prevState.beneficialOwners, - } + }; this.debouncedUpdateReimbursementAccountDraft(newState); return newState; }); diff --git a/src/pages/ReimbursementAccount/CompanyStep.js b/src/pages/ReimbursementAccount/CompanyStep.js index 03f33e27efe..cd1104daa0f 100644 --- a/src/pages/ReimbursementAccount/CompanyStep.js +++ b/src/pages/ReimbursementAccount/CompanyStep.js @@ -1,5 +1,4 @@ import _ from 'underscore'; -import lodashGet from 'lodash/get'; import React from 'react'; import {View, ScrollView} from 'react-native'; import Str from 'expensify-common/lib/str'; From 650eb640b34540c3702f17f08eec5add80f6b086 Mon Sep 17 00:00:00 2001 From: Carlos Martins Date: Wed, 8 Sep 2021 13:28:27 -0600 Subject: [PATCH 38/47] remove spread --- src/libs/actions/BankAccounts.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/libs/actions/BankAccounts.js b/src/libs/actions/BankAccounts.js index 56dd96003a8..f631acc1ec0 100644 --- a/src/libs/actions/BankAccounts.js +++ b/src/libs/actions/BankAccounts.js @@ -831,7 +831,7 @@ function setWorkspaceIDForReimbursementAccount(workspaceID) { * @param {Object} bankAccountData */ function updateReimbursementAccountDraft(bankAccountData) { - Onyx.merge(ONYXKEYS.REIMBURSEMENT_ACCOUNT_DRAFT, {...bankAccountData}); + Onyx.merge(ONYXKEYS.REIMBURSEMENT_ACCOUNT_DRAFT, bankAccountData); } export { From f70af8ec0c596bdcd7a833046ff7563cc5845880 Mon Sep 17 00:00:00 2001 From: Carlos Martins Date: Wed, 8 Sep 2021 15:04:24 -0600 Subject: [PATCH 39/47] remove debounce --- .../ReimbursementAccount/BankAccountStep.js | 15 ++------------- .../BeneficialOwnersStep.js | 17 +++-------------- src/pages/ReimbursementAccount/CompanyStep.js | 15 ++------------- src/pages/ReimbursementAccount/RequestorStep.js | 15 ++------------- .../ReimbursementAccount/ValidationStep.js | 13 +------------ 5 files changed, 10 insertions(+), 65 deletions(-) diff --git a/src/pages/ReimbursementAccount/BankAccountStep.js b/src/pages/ReimbursementAccount/BankAccountStep.js index 719815f139b..6ca316ae5fc 100644 --- a/src/pages/ReimbursementAccount/BankAccountStep.js +++ b/src/pages/ReimbursementAccount/BankAccountStep.js @@ -55,7 +55,6 @@ class BankAccountStep extends React.Component { this.toggleTerms = this.toggleTerms.bind(this); this.addManualAccount = this.addManualAccount.bind(this); this.addPlaidAccount = this.addPlaidAccount.bind(this); - this.debouncedUpdateReimbursementAccountDraft = _.debounce(this.debouncedUpdateReimbursementAccountDraft.bind(this), 100, false); this.state = { // One of CONST.BANK_ACCOUNT.SETUP_TYPE bankAccountAddMethod: props.achData.subStep || undefined, @@ -89,7 +88,7 @@ class BankAccountStep extends React.Component { toggleTerms() { this.setState((prevState) => { - this.debouncedUpdateReimbursementAccountDraft({acceptTerms: !prevState.hasAcceptedTerms}); + updateReimbursementAccountDraft({acceptTerms: !prevState.hasAcceptedTerms}); return {hasAcceptedTerms: !prevState.hasAcceptedTerms}; }); } @@ -129,7 +128,7 @@ class BankAccountStep extends React.Component { clearErrorAndSetValue(inputKey, value) { const newState = {[inputKey]: value}; this.setState(newState); - this.debouncedUpdateReimbursementAccountDraft(newState); + updateReimbursementAccountDraft(newState); const errors = this.getErrors(); if (!errors[inputKey]) { // No error found for this inputKey @@ -193,16 +192,6 @@ class BankAccountStep extends React.Component { }); } - /** - * Save the input value in Onyx. We debounce this method in the constructor so that it's not called too often - * to update Onyx and re-render this component. - * - * @param {Object} value - */ - debouncedUpdateReimbursementAccountDraft(value) { - updateReimbursementAccountDraft(value); - } - render() { // Disable bank account fields once they've been added in db so they can't be changed const isFromPlaid = this.props.achData.setupType === CONST.BANK_ACCOUNT.SETUP_TYPE.PLAID; diff --git a/src/pages/ReimbursementAccount/BeneficialOwnersStep.js b/src/pages/ReimbursementAccount/BeneficialOwnersStep.js index f7c084bfd3c..69a4d0732d1 100644 --- a/src/pages/ReimbursementAccount/BeneficialOwnersStep.js +++ b/src/pages/ReimbursementAccount/BeneficialOwnersStep.js @@ -44,7 +44,6 @@ class BeneficialOwnersStep extends React.Component { this.addBeneficialOwner = this.addBeneficialOwner.bind(this); this.submit = this.submit.bind(this); - this.debouncedUpdateReimbursementAccountDraft = _.debounce(this.debouncedUpdateReimbursementAccountDraft.bind(this), 100, false); this.state = { ownsMoreThan25Percent: lodashGet(props, ['reimbursementAccountDraft', 'ownsMoreThan25Percent'], false), @@ -121,23 +120,13 @@ class BeneficialOwnersStep extends React.Component { () => setupWithdrawalAccount({...this.state})); } - /** - * Save the input value in Onyx. We debounce this method in the constructor so that it's not called too often - * to update Onyx and re-render this component. - * - * @param {Object} value - */ - debouncedUpdateReimbursementAccountDraft(value) { - updateReimbursementAccountDraft(value); - } - /** * @param {Object} fieldName */ toggleCheckbox(fieldName) { this.setState((prevState) => { const newState = {[fieldName]: !prevState[fieldName]}; - this.debouncedUpdateReimbursementAccountDraft(newState); + updateReimbursementAccountDraft(newState); return newState; }); } @@ -181,7 +170,7 @@ class BeneficialOwnersStep extends React.Component { ? [{}] : prevState.beneficialOwners, }; - this.debouncedUpdateReimbursementAccountDraft(newState); + updateReimbursementAccountDraft(newState); return newState; }); }} @@ -204,7 +193,7 @@ class BeneficialOwnersStep extends React.Component { onFieldChange={(fieldName, value) => this.setState((prevState) => { const beneficialOwners = [...prevState.beneficialOwners]; beneficialOwners[index][fieldName] = value; - this.debouncedUpdateReimbursementAccountDraft({beneficialOwners}); + updateReimbursementAccountDraft({beneficialOwners}); return {beneficialOwners}; })} values={{ diff --git a/src/pages/ReimbursementAccount/CompanyStep.js b/src/pages/ReimbursementAccount/CompanyStep.js index cd1104daa0f..1629bb2fc5e 100644 --- a/src/pages/ReimbursementAccount/CompanyStep.js +++ b/src/pages/ReimbursementAccount/CompanyStep.js @@ -47,7 +47,6 @@ class CompanyStep extends React.Component { super(props); this.submit = this.submit.bind(this); - this.debouncedUpdateReimbursementAccountDraft = _.debounce(this.debouncedUpdateReimbursementAccountDraft.bind(this), 100, false); this.state = { companyName: getDefaultStateForField(props, 'companyName'), @@ -89,7 +88,7 @@ class CompanyStep extends React.Component { */ setValue(value) { this.setState(value); - this.debouncedUpdateReimbursementAccountDraft(value); + updateReimbursementAccountDraft(value); } /** @@ -154,16 +153,6 @@ class CompanyStep extends React.Component { setupWithdrawalAccount({...this.state, incorporationDate}); } - /** - * Save the input value in Onyx. We debounce this method in the constructor so that it's not called too often - * to update Onyx and re-render this component. - * - * @param {Object} value - */ - debouncedUpdateReimbursementAccountDraft(value) { - updateReimbursementAccountDraft(value); - } - render() { const shouldDisableCompanyName = Boolean(this.props.achData.bankAccountID && this.props.achData.companyName); const shouldDisableCompanyTaxID = Boolean(this.props.achData.bankAccountID && this.props.achData.companyTaxID); @@ -347,7 +336,7 @@ class CompanyStep extends React.Component { isChecked={this.state.hasNoConnectionToCannabis} onPress={() => this.setState((prevState) => { const newState = {hasNoConnectionToCannabis: !prevState.hasNoConnectionToCannabis}; - this.debouncedUpdateReimbursementAccountDraft(newState); + updateReimbursementAccountDraft(newState); return newState; })} LabelComponent={() => ( diff --git a/src/pages/ReimbursementAccount/RequestorStep.js b/src/pages/ReimbursementAccount/RequestorStep.js index 45061f5cf46..53188a245ff 100644 --- a/src/pages/ReimbursementAccount/RequestorStep.js +++ b/src/pages/ReimbursementAccount/RequestorStep.js @@ -42,7 +42,6 @@ class RequestorStep extends React.Component { super(props); this.submit = this.submit.bind(this); - this.debouncedUpdateReimbursementAccountDraft = _.debounce(this.debouncedUpdateReimbursementAccountDraft.bind(this), 100, false); this.state = { firstName: getDefaultStateForField(props, 'firstName'), @@ -80,17 +79,7 @@ class RequestorStep extends React.Component { const fieldName = lodashGet(renamedFields, field, field); const newState = {[fieldName]: value}; this.setState(newState); - this.debouncedUpdateReimbursementAccountDraft(newState); - } - - /** - * Save the input value in Onyx. We debounce this method in the constructor so that it's not called too often - * to update Onyx and re-render this component. - * - * @param {Object} value - */ - debouncedUpdateReimbursementAccountDraft(value) { - updateReimbursementAccountDraft(value); + updateReimbursementAccountDraft(newState); } /** @@ -169,7 +158,7 @@ class RequestorStep extends React.Component { isChecked={this.state.isControllingOfficer} onPress={() => this.setState((prevState) => { const newState = {isControllingOfficer: !prevState.isControllingOfficer}; - this.debouncedUpdateReimbursementAccountDraft(newState); + updateReimbursementAccountDraft(newState); return newState; })} LabelComponent={() => ( diff --git a/src/pages/ReimbursementAccount/ValidationStep.js b/src/pages/ReimbursementAccount/ValidationStep.js index 452a5ada7d1..a305a293ede 100644 --- a/src/pages/ReimbursementAccount/ValidationStep.js +++ b/src/pages/ReimbursementAccount/ValidationStep.js @@ -51,7 +51,6 @@ class ValidationStep extends React.Component { this.submit = this.submit.bind(this); this.verifyingUrl = `${CONST.CLOUDFRONT_URL}/images/icons/emptystates/emptystate_reviewing.gif`; - this.debouncedUpdateReimbursementAccountDraft = _.debounce(this.debouncedUpdateReimbursementAccountDraft.bind(this), 100, false); this.state = { amount1: lodashGet(props, ['reimbursementAccountDraft', 'amount1'], ''), @@ -71,7 +70,7 @@ class ValidationStep extends React.Component { * @param {Object} value */ setValue(value) { - this.debouncedUpdateReimbursementAccountDraft(value); + updateReimbursementAccountDraft(value); this.setState(value); } @@ -93,16 +92,6 @@ class ValidationStep extends React.Component { this.setState({error: 'Invalid amounts'}); } - /** - * Save the input value in Onyx. We debounce this method in the constructor so that it's not called too often - * to update Onyx and re-render this component. - * - * @param {Object} value - */ - debouncedUpdateReimbursementAccountDraft(value) { - updateReimbursementAccountDraft(value); - } - /** * Filter input for validation amount * Anything that isn't a number is returned as an empty string From f9d9e9298588838429b508a400185bc93ede0ee1 Mon Sep 17 00:00:00 2001 From: Carlos Martins Date: Wed, 8 Sep 2021 15:06:32 -0600 Subject: [PATCH 40/47] remove _ import --- src/pages/ReimbursementAccount/RequestorStep.js | 1 - 1 file changed, 1 deletion(-) diff --git a/src/pages/ReimbursementAccount/RequestorStep.js b/src/pages/ReimbursementAccount/RequestorStep.js index 53188a245ff..0a9c4be6308 100644 --- a/src/pages/ReimbursementAccount/RequestorStep.js +++ b/src/pages/ReimbursementAccount/RequestorStep.js @@ -1,6 +1,5 @@ import React from 'react'; import lodashGet from 'lodash/get'; -import _ from 'underscore'; import {View, ScrollView} from 'react-native'; import PropTypes from 'prop-types'; import {withOnyx} from 'react-native-onyx'; From e02bd3bfcbf9368366e250fb0ee0d8b944c1ee66 Mon Sep 17 00:00:00 2001 From: Carlos Martins Date: Thu, 9 Sep 2021 14:08:21 -0600 Subject: [PATCH 41/47] change jsdocs --- src/libs/getDefaultStateForField.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/libs/getDefaultStateForField.js b/src/libs/getDefaultStateForField.js index f318a23f821..4669ec61dbf 100644 --- a/src/libs/getDefaultStateForField.js +++ b/src/libs/getDefaultStateForField.js @@ -1,7 +1,8 @@ import lodashGet from 'lodash/get'; /** - * Add / to the end of any URL if not present + * Get the default state for input fields in the VBA flow + * * @param {Object} props * @param {String} fieldName * @param {*} defaultValue From f4471ad5941d2b7f27060f7fe366c7021cd3fb52 Mon Sep 17 00:00:00 2001 From: Carlos Martins Date: Thu, 9 Sep 2021 14:17:44 -0600 Subject: [PATCH 42/47] rename getDefaultStateForField.js --- ...tDefaultStateForField.js => ReimbursementAccountUtils.js} | 5 ++++- src/pages/ReimbursementAccount/BankAccountStep.js | 2 +- src/pages/ReimbursementAccount/CompanyStep.js | 2 +- src/pages/ReimbursementAccount/RequestorStep.js | 2 +- 4 files changed, 7 insertions(+), 4 deletions(-) rename src/libs/{getDefaultStateForField.js => ReimbursementAccountUtils.js} (80%) diff --git a/src/libs/getDefaultStateForField.js b/src/libs/ReimbursementAccountUtils.js similarity index 80% rename from src/libs/getDefaultStateForField.js rename to src/libs/ReimbursementAccountUtils.js index 4669ec61dbf..c4b7b2efd9d 100644 --- a/src/libs/getDefaultStateForField.js +++ b/src/libs/ReimbursementAccountUtils.js @@ -14,4 +14,7 @@ function getDefaultStateForField(props, fieldName, defaultValue = '') { || lodashGet(props, ['achData', fieldName], defaultValue); } -export default getDefaultStateForField; +export { + // eslint-disable-next-line import/prefer-default-export + getDefaultStateForField, +}; diff --git a/src/pages/ReimbursementAccount/BankAccountStep.js b/src/pages/ReimbursementAccount/BankAccountStep.js index 1b921b2051d..685a23e6d9c 100644 --- a/src/pages/ReimbursementAccount/BankAccountStep.js +++ b/src/pages/ReimbursementAccount/BankAccountStep.js @@ -30,7 +30,7 @@ import { } from '../../libs/actions/BankAccounts'; import ONYXKEYS from '../../ONYXKEYS'; import compose from '../../libs/compose'; -import getDefaultStateForField from '../../libs/getDefaultStateForField'; +import {getDefaultStateForField} from '../../libs/ReimbursementAccountUtils'; const propTypes = { /** Bank account currently in setup */ diff --git a/src/pages/ReimbursementAccount/CompanyStep.js b/src/pages/ReimbursementAccount/CompanyStep.js index 1629bb2fc5e..1d265fa06dc 100644 --- a/src/pages/ReimbursementAccount/CompanyStep.js +++ b/src/pages/ReimbursementAccount/CompanyStep.js @@ -30,7 +30,7 @@ import { import compose from '../../libs/compose'; import ONYXKEYS from '../../ONYXKEYS'; import ExpensiPicker from '../../components/ExpensiPicker'; -import getDefaultStateForField from '../../libs/getDefaultStateForField'; +import {getDefaultStateForField} from '../../libs/ReimbursementAccountUtils'; const propTypes = { /** Bank account currently in setup */ diff --git a/src/pages/ReimbursementAccount/RequestorStep.js b/src/pages/ReimbursementAccount/RequestorStep.js index 0a9c4be6308..6f2e7d12b2f 100644 --- a/src/pages/ReimbursementAccount/RequestorStep.js +++ b/src/pages/ReimbursementAccount/RequestorStep.js @@ -24,7 +24,7 @@ import {isValidIdentity} from '../../libs/ValidationUtils'; import Onfido from '../../components/Onfido'; import compose from '../../libs/compose'; import ONYXKEYS from '../../ONYXKEYS'; -import getDefaultStateForField from '../../libs/getDefaultStateForField'; +import {getDefaultStateForField} from '../../libs/ReimbursementAccountUtils'; const propTypes = { /** Bank account currently in setup */ From 71edf15385a924408df4b1b896b16f0b8ce3ebc9 Mon Sep 17 00:00:00 2001 From: Carlos Martins Date: Thu, 9 Sep 2021 14:41:39 -0600 Subject: [PATCH 43/47] add hasAcceptedTerms variable --- src/pages/ReimbursementAccount/BankAccountStep.js | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/src/pages/ReimbursementAccount/BankAccountStep.js b/src/pages/ReimbursementAccount/BankAccountStep.js index 685a23e6d9c..b6cba2a2580 100644 --- a/src/pages/ReimbursementAccount/BankAccountStep.js +++ b/src/pages/ReimbursementAccount/BankAccountStep.js @@ -82,8 +82,9 @@ class BankAccountStep extends React.Component { toggleTerms() { this.setState((prevState) => { - updateReimbursementAccountDraft({acceptTerms: !prevState.hasAcceptedTerms}); - return {hasAcceptedTerms: !prevState.hasAcceptedTerms}; + const hasAcceptedTerms = !prevState.hasAcceptedTerms + updateReimbursementAccountDraft({acceptTerms: hasAcceptedTerms}); + return {hasAcceptedTerms}; }); } From 5c5f573348c4a2daac48cf064a9cb96cc74b3130 Mon Sep 17 00:00:00 2001 From: Carlos Martins Date: Thu, 9 Sep 2021 14:49:14 -0600 Subject: [PATCH 44/47] fix style --- src/pages/ReimbursementAccount/BankAccountStep.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/ReimbursementAccount/BankAccountStep.js b/src/pages/ReimbursementAccount/BankAccountStep.js index b6cba2a2580..d1069ea2fec 100644 --- a/src/pages/ReimbursementAccount/BankAccountStep.js +++ b/src/pages/ReimbursementAccount/BankAccountStep.js @@ -82,7 +82,7 @@ class BankAccountStep extends React.Component { toggleTerms() { this.setState((prevState) => { - const hasAcceptedTerms = !prevState.hasAcceptedTerms + const hasAcceptedTerms = !prevState.hasAcceptedTerms; updateReimbursementAccountDraft({acceptTerms: hasAcceptedTerms}); return {hasAcceptedTerms}; }); From 1ee007b3d6645930eca048ca1bb876aabfb92fbc Mon Sep 17 00:00:00 2001 From: Carlos Martins Date: Thu, 9 Sep 2021 16:59:03 -0600 Subject: [PATCH 45/47] add getDefaultStateForField to BeneficialOwner and ValidationStep --- .../ReimbursementAccount/BeneficialOwnersStep.js | 11 ++++++----- src/pages/ReimbursementAccount/ValidationStep.js | 7 ++++--- 2 files changed, 10 insertions(+), 8 deletions(-) diff --git a/src/pages/ReimbursementAccount/BeneficialOwnersStep.js b/src/pages/ReimbursementAccount/BeneficialOwnersStep.js index 36629b345b2..a1af70b2971 100644 --- a/src/pages/ReimbursementAccount/BeneficialOwnersStep.js +++ b/src/pages/ReimbursementAccount/BeneficialOwnersStep.js @@ -24,6 +24,7 @@ import CONST from '../../CONST'; import {isValidIdentity} from '../../libs/ValidationUtils'; import ONYXKEYS from '../../ONYXKEYS'; import compose from '../../libs/compose'; +import {getDefaultStateForField} from '../../libs/ReimbursementAccountUtils'; const propTypes = { /** Name of the company */ @@ -46,11 +47,11 @@ class BeneficialOwnersStep extends React.Component { this.submit = this.submit.bind(this); this.state = { - ownsMoreThan25Percent: lodashGet(props, ['reimbursementAccountDraft', 'ownsMoreThan25Percent'], false), - hasOtherBeneficialOwners: lodashGet(props, ['reimbursementAccountDraft', 'hasOtherBeneficialOwners'], false), - acceptTermsAndConditions: lodashGet(props, ['reimbursementAccountDraft', 'acceptTermsAndConditions'], false), - certifyTrueInformation: lodashGet(props, ['reimbursementAccountDraft', 'certifyTrueInformation'], false), - beneficialOwners: lodashGet(props, ['reimbursementAccountDraft', 'beneficialOwners'], []), + ownsMoreThan25Percent: getDefaultStateForField(props, 'ownsMoreThan25Percent', false), + hasOtherBeneficialOwners: getDefaultStateForField(props, 'hasOtherBeneficialOwners', false), + acceptTermsAndConditions: getDefaultStateForField(props, 'acceptTermsAndConditions', false), + certifyTrueInformation: getDefaultStateForField(props, 'certifyTrueInformation', false), + beneficialOwners: getDefaultStateForField(props, 'beneficialOwners', []), }; } diff --git a/src/pages/ReimbursementAccount/ValidationStep.js b/src/pages/ReimbursementAccount/ValidationStep.js index a305a293ede..83f1ac62127 100644 --- a/src/pages/ReimbursementAccount/ValidationStep.js +++ b/src/pages/ReimbursementAccount/ValidationStep.js @@ -19,6 +19,7 @@ import CONST from '../../CONST'; import TextLink from '../../components/TextLink'; import ONYXKEYS from '../../ONYXKEYS'; import compose from '../../libs/compose'; +import {getDefaultStateForField} from '../../libs/ReimbursementAccountUtils'; const propTypes = { ...withLocalizePropTypes, @@ -53,9 +54,9 @@ class ValidationStep extends React.Component { this.verifyingUrl = `${CONST.CLOUDFRONT_URL}/images/icons/emptystates/emptystate_reviewing.gif`; this.state = { - amount1: lodashGet(props, ['reimbursementAccountDraft', 'amount1'], ''), - amount2: lodashGet(props, ['reimbursementAccountDraft', 'amount2'], ''), - amount3: lodashGet(props, ['reimbursementAccountDraft', 'amount3'], ''), + amount1: getDefaultStateForField(props, 'amount1', ''), + amount2: getDefaultStateForField(props, 'amount2', ''), + amount3: getDefaultStateForField(props, 'amount3', ''), error: '', }; From d11bebe2f83db32eda1285fb1c859fbcea451a7e Mon Sep 17 00:00:00 2001 From: Carlos Martins Date: Thu, 9 Sep 2021 17:02:44 -0600 Subject: [PATCH 46/47] remove lodashGet --- src/pages/ReimbursementAccount/ValidationStep.js | 1 - 1 file changed, 1 deletion(-) diff --git a/src/pages/ReimbursementAccount/ValidationStep.js b/src/pages/ReimbursementAccount/ValidationStep.js index 83f1ac62127..bd4a51bff48 100644 --- a/src/pages/ReimbursementAccount/ValidationStep.js +++ b/src/pages/ReimbursementAccount/ValidationStep.js @@ -4,7 +4,6 @@ import {withOnyx} from 'react-native-onyx'; import PropTypes from 'prop-types'; import Str from 'expensify-common/lib/str'; import _ from 'underscore'; -import lodashGet from 'lodash/get'; import styles from '../../styles/styles'; import withLocalize, {withLocalizePropTypes} from '../../components/withLocalize'; import {validateBankAccount, updateReimbursementAccountDraft} from '../../libs/actions/BankAccounts'; From 946e4be8785e16de1681edf24500b766390dfdb8 Mon Sep 17 00:00:00 2001 From: Carlos Martins Date: Thu, 9 Sep 2021 17:03:30 -0600 Subject: [PATCH 47/47] remove lodashGet from BeneicialOwner --- src/pages/ReimbursementAccount/BeneficialOwnersStep.js | 1 - 1 file changed, 1 deletion(-) diff --git a/src/pages/ReimbursementAccount/BeneficialOwnersStep.js b/src/pages/ReimbursementAccount/BeneficialOwnersStep.js index a1af70b2971..a6c7a3c38cb 100644 --- a/src/pages/ReimbursementAccount/BeneficialOwnersStep.js +++ b/src/pages/ReimbursementAccount/BeneficialOwnersStep.js @@ -1,5 +1,4 @@ import _ from 'underscore'; -import lodashGet from 'lodash/get'; import React from 'react'; import PropTypes from 'prop-types'; import {ScrollView, View} from 'react-native';