Skip to content

Commit

Permalink
Remove useless state, as we are already updating walletAdditionalDeta…
Browse files Browse the repository at this point in the history 
…ilsDraft
  • Loading branch information
@nkuoch
nkuoch committed Mar 14, 2022
1 parent c4f2d63 commit 42459e3
Showing 1 changed file with 75 additions and 66 deletions.
141 changes: 75 additions & 66 deletions src/pages/EnablePayments/AdditionalDetailsStep.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 = {
Expand All @@ -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 {
Expand Down Expand Up @@ -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,
Expand Down Expand Up @@ -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;
}

Expand All @@ -186,7 +198,7 @@ class AdditionalDetailsStep extends React.Component {
}

BankAccounts.activateWallet(CONST.WALLET.STEP.ADDITIONAL_DETAILS, {
personalDetails: this.state,
personalDetails: this.props.walletAdditionalDetailsDraft,
});
}

Expand All @@ -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);
}
Expand Down Expand Up @@ -257,24 +268,25 @@ class AdditionalDetailsStep extends React.Component {
</View>
<FormScrollView ref={el => this.form = el}>
<View style={[styles.mh5, styles.mb5]}>
<TextInput
containerStyles={[styles.mt4]}
label={this.props.translate(this.fieldNameTranslationKeys.legalFirstName)}
onChangeText={val => this.clearErrorAndSetValue('legalFirstName', val)}
value={this.state.legalFirstName}
errorText={this.getErrorText('legalFirstName')}
/>
<TextInput
containerStyles={[styles.mt4]}
label={this.props.translate(this.fieldNameTranslationKeys.legalLastName)}
onChangeText={val => this.clearErrorAndSetValue('legalLastName', val)}
value={this.state.legalLastName}
errorText={this.getErrorText('legalLastName')}
/>
<View style={styles.mt4}>
<TextInput
containerStyles={[styles.mt4]}
label={this.props.translate(this.fieldNameTranslationKeys.legalFirstName)}
onChangeText={val => this.clearErrorAndSetValue('legalFirstName', val)}
value={this.props.walletAdditionalDetailsDraft.legalFirstName || ''}
errorText={this.getErrorText('legalFirstName')}
/>
<TextInput
containerStyles={[styles.mt4]}
label={this.props.translate(this.fieldNameTranslationKeys.legalLastName)}
onChangeText={val => this.clearErrorAndSetValue('legalLastName', val)}
value={this.props.walletAdditionalDetailsDraft.legalLastName || ''}
errorText={this.getErrorText('legalLastName')}
/>
<AddressSearch
label={this.props.translate(this.fieldNameTranslationKeys.addressStreet)}
value={this.state.addressStreet}
value={this.props.walletAdditionalDetailsDraft.addressStreet || ''}
containerStyles={[styles.mt4]}
onChange={(values) => {
const renamedFields = {
street: 'addressStreet',
Expand All @@ -292,49 +304,46 @@ class AdditionalDetailsStep extends React.Component {
<Text style={[styles.mutedTextLabel, styles.mt1]}>
{this.props.translate('common.noPO')}
</Text>

{/** 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 && (
<TextInput
containerStyles={[styles.mt4]}
label={this.props.translate(this.fieldNameTranslationKeys.addressCity)}
onChangeText={val => this.clearErrorAndSetValue('addressCity', val)}
value={this.state.addressCity}
errorText={this.getErrorText('addressCity')}
/>
)}
{this.state.addressStreet && (
<TextInput
containerStyles={[styles.mt4]}
label={this.props.translate(this.fieldNameTranslationKeys.addressState)}
onChangeText={val => this.clearErrorAndSetValue('addressState', val)}
value={this.state.addressState}
errorText={this.getErrorText('addressState')}
/>
)}
{this.state.addressStreet && (
<TextInput
containerStyles={[styles.mt4]}
label={this.props.translate(this.fieldNameTranslationKeys.addressZip)}
onChangeText={val => 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 */}
<TextInput
containerStyles={[styles.mt4]}
label={this.props.translate(this.fieldNameTranslationKeys.addressCity)}
onChangeText={val => this.clearErrorAndSetValue('addressCity', val)}
value={this.props.walletAdditionalDetailsDraft.addressCity || ''}
errorText={this.getErrorText('addressCity')}
/>
<TextInput
containerStyles={[styles.mt4]}
label={this.props.translate(this.fieldNameTranslationKeys.addressState)}
onChangeText={val => this.clearErrorAndSetValue('addressState', val)}
value={this.props.walletAdditionalDetailsDraft.addressState || ''}
errorText={this.getErrorText('addressState')}
/>
<TextInput
containerStyles={[styles.mt4]}
label={this.props.translate(this.fieldNameTranslationKeys.addressZip)}
onChangeText={val => this.clearErrorAndSetValue('addressZip', val)}
value={this.props.walletAdditionalDetailsDraft.addressZip || ''}
errorText={this.getErrorText('addressZip')}
/>
</>
) : null}
</View>
<TextInput
containerStyles={[styles.mt4]}
label={this.props.translate(this.fieldNameTranslationKeys.phoneNumber)}
onChangeText={val => this.clearErrorAndSetValue('phoneNumber', val)}
value={this.state.phoneNumber}
value={this.props.walletAdditionalDetailsDraft.phoneNumber || ''}
errorText={this.getErrorText('phoneNumber')}
/>
<DatePicker
containerStyles={[styles.mt4]}
label={this.props.translate(this.fieldNameTranslationKeys.dob)}
onChange={val => 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()}
Expand All @@ -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}
Expand Down

0 comments on commit 42459e3

Please sign in to comment.