From 42459e35eb30ea77c138a7ad485a8483174354ba Mon Sep 17 00:00:00 2001 From: Nathalie Kuoch Date: Mon, 14 Mar 2022 11:18:32 +0100 Subject: [PATCH] Remove useless state, as we are already updating walletAdditionalDetailsDraft --- .../EnablePayments/AdditionalDetailsStep.js | 141 ++++++++++-------- 1 file changed, 75 insertions(+), 66 deletions(-) diff --git a/src/pages/EnablePayments/AdditionalDetailsStep.js b/src/pages/EnablePayments/AdditionalDetailsStep.js index 9ca4327e7d50..1fc82c82354e 100644 --- a/src/pages/EnablePayments/AdditionalDetailsStep.js +++ b/src/pages/EnablePayments/AdditionalDetailsStep.js @@ -58,6 +58,19 @@ const propTypes = { /** If we should ask for the full SSN (when LexisNexis failed retrieving the first 5 from the last 4) */ shouldAskForFullSSN: PropTypes.bool, }), + + /** Stores the personal details typed by the user */ + walletAdditionalDetailsDraft: PropTypes.shape({ + legalFirstName: PropTypes.string, + legalLastName: PropTypes.string, + addressStreet: PropTypes.string, + addressCity: PropTypes.string, + addressState: PropTypes.string, + addressZip: PropTypes.string, + phoneNumber: PropTypes.string, + dob: PropTypes.string, + ssn: PropTypes.string, + }), }; const defaultProps = { @@ -70,6 +83,17 @@ const defaultProps = { shouldShowFailedKYC: false, shouldAskForFullSSN: false, }, + walletAdditionalDetailsDraft: { + legalFirstName: '', + legalLastName: '', + addressStreet: '', + addressCity: '', + addressState: '', + addressZip: '', + phoneNumber: '', + dob: '', + ssn: '', + }, }; class AdditionalDetailsStep extends React.Component { @@ -103,18 +127,6 @@ class AdditionalDetailsStep extends React.Component { ssnFull9: 'common.ssnFull9', }; - this.state = { - legalFirstName: lodashGet(props.walletAdditionalDetailsDraft, 'legalFirstName', ''), - legalLastName: lodashGet(props.walletAdditionalDetailsDraft, 'legalLastName', ''), - addressStreet: lodashGet(props.walletAdditionalDetailsDraft, 'addressStreet', ''), - addressCity: lodashGet(props.walletAdditionalDetailsDraft, 'addressCity', ''), - addressState: lodashGet(props.walletAdditionalDetailsDraft, 'addressState', ''), - addressZip: lodashGet(props.walletAdditionalDetailsDraft, 'addressZip', ''), - phoneNumber: lodashGet(props.walletAdditionalDetailsDraft, 'phoneNumber', ''), - dob: lodashGet(props.walletAdditionalDetailsDraft, 'dob', ''), - ssn: lodashGet(props.walletAdditionalDetailsDraft, 'ssn', ''), - }; - this.formHelper = new FormHelper({ errorPath: 'walletAdditionalDetails.errorFields', setErrors: Wallet.setAdditionalDetailsErrors, @@ -156,20 +168,20 @@ class AdditionalDetailsStep extends React.Component { const errors = {}; - if (!ValidationUtils.isValidPastDate(this.state.dob)) { + if (!ValidationUtils.isValidPastDate(this.props.walletAdditionalDetailsDraft.dob)) { errors.dob = true; } - if (!ValidationUtils.isValidAddress(this.state.addressStreet)) { + if (!ValidationUtils.isValidAddress(this.props.walletAdditionalDetailsDraft.addressStreet)) { errors.addressStreet = true; } - if (!ValidationUtils.isValidSSNLastFour(this.state.ssn) && !ValidationUtils.isValidSSNFullNine(this.state.ssn)) { + if (!ValidationUtils.isValidSSNLastFour(this.props.walletAdditionalDetailsDraft.ssn) && !ValidationUtils.isValidSSNFullNine(this.props.walletAdditionalDetailsDraft.ssn)) { errors.ssn = true; } _.each(this.requiredFields, (requiredField) => { - if (ValidationUtils.isRequiredFulfilled(this.state[requiredField])) { + if (ValidationUtils.isRequiredFulfilled(this.props.walletAdditionalDetailsDraft[requiredField])) { return; } @@ -186,7 +198,7 @@ class AdditionalDetailsStep extends React.Component { } BankAccounts.activateWallet(CONST.WALLET.STEP.ADDITIONAL_DETAILS, { - personalDetails: this.state, + personalDetails: this.props.walletAdditionalDetailsDraft, }); } @@ -195,7 +207,6 @@ class AdditionalDetailsStep extends React.Component { * @param {String} value */ clearErrorAndSetValue(fieldName, value) { - this.setState({[fieldName]: value}); Wallet.updateAdditionalDetailsDraft({[fieldName]: value}); this.clearError(fieldName); } @@ -257,24 +268,25 @@ class AdditionalDetailsStep extends React.Component { this.form = el}> - this.clearErrorAndSetValue('legalFirstName', val)} - value={this.state.legalFirstName} - errorText={this.getErrorText('legalFirstName')} - /> - this.clearErrorAndSetValue('legalLastName', val)} - value={this.state.legalLastName} - errorText={this.getErrorText('legalLastName')} - /> + this.clearErrorAndSetValue('legalFirstName', val)} + value={this.props.walletAdditionalDetailsDraft.legalFirstName || ''} + errorText={this.getErrorText('legalFirstName')} + /> + this.clearErrorAndSetValue('legalLastName', val)} + value={this.props.walletAdditionalDetailsDraft.legalLastName || ''} + errorText={this.getErrorText('legalLastName')} + /> { const renamedFields = { street: 'addressStreet', @@ -292,49 +304,46 @@ class AdditionalDetailsStep extends React.Component { {this.props.translate('common.noPO')} - - {/** Once the user has started entering his address, show the other address fields (city, state, zip) */} - {/** We'll autofill them when the user selects a full address from the google autocomplete */} - {this.state.addressStreet && ( - this.clearErrorAndSetValue('addressCity', val)} - value={this.state.addressCity} - errorText={this.getErrorText('addressCity')} - /> - )} - {this.state.addressStreet && ( - this.clearErrorAndSetValue('addressState', val)} - value={this.state.addressState} - errorText={this.getErrorText('addressState')} - /> - )} - {this.state.addressStreet && ( - this.clearErrorAndSetValue('addressZip', val)} - value={this.state.addressZip} - errorText={this.getErrorText('addressZip')} - /> - )} + {this.props.walletAdditionalDetailsDraft.addressStreet ? ( + <> + {/** Once the user has started entering his address, show the other address fields (city, state, zip) */} + {/** We'll autofill them when the user selects a full address from the google autocomplete */} + this.clearErrorAndSetValue('addressCity', val)} + value={this.props.walletAdditionalDetailsDraft.addressCity || ''} + errorText={this.getErrorText('addressCity')} + /> + this.clearErrorAndSetValue('addressState', val)} + value={this.props.walletAdditionalDetailsDraft.addressState || ''} + errorText={this.getErrorText('addressState')} + /> + this.clearErrorAndSetValue('addressZip', val)} + value={this.props.walletAdditionalDetailsDraft.addressZip || ''} + errorText={this.getErrorText('addressZip')} + /> + + ) : null} this.clearErrorAndSetValue('phoneNumber', val)} - value={this.state.phoneNumber} + value={this.props.walletAdditionalDetailsDraft.phoneNumber || ''} errorText={this.getErrorText('phoneNumber')} /> this.clearErrorAndSetValue('dob', val)} - value={this.state.dob} + value={this.props.walletAdditionalDetailsDraft.dob || ''} placeholder={this.props.translate('common.dob')} errorText={this.getErrorText('dob')} maximumDate={new Date()} @@ -343,7 +352,7 @@ class AdditionalDetailsStep extends React.Component { containerStyles={[styles.mt4]} label={this.props.translate(this.fieldNameTranslationKeys[shouldAskForFullSSN ? 'ssnFull9' : 'ssn'])} onChangeText={val => this.clearErrorAndSetValue('ssn', val)} - value={this.state.ssn} + value={this.props.walletAdditionalDetailsDraft.ssn || ''} errorText={this.getErrorText('ssn')} maxLength={shouldAskForFullSSN ? 9 : 4} keyboardType={CONST.KEYBOARD_TYPE.NUMBER_PAD}