Skip to content

Commit

Permalink
Merge pull request #11076 from Expensify/youssef_refactor_addplaidacc…
Browse files Browse the repository at this point in the history 
…ount_form

Refactor AddPersonalBankAccount to use Form
  • Loading branch information
@luacmartins
luacmartins authored Oct 7, 2022
2 parents 44bf1ff + 3a7e3e4 commit 73c6279
Show file tree
Hide file tree
Showing 2 changed files with 36 additions and 85 deletions.
8 changes: 5 additions & 3 deletions src/libs/actions/BankAccounts.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -140,7 +140,7 @@ function addPersonalBankAccount(account, password) {
key: ONYXKEYS.PERSONAL_BANK_ACCOUNT,
value: {
isLoading: true,
error: '',
errors: null,
},
},
],
Expand All @@ -150,7 +150,7 @@ function addPersonalBankAccount(account, password) {
key: ONYXKEYS.PERSONAL_BANK_ACCOUNT,
value: {
isLoading: false,
error: '',
errors: null,
shouldShowSuccess: true,
},
},
Expand All @@ -161,7 +161,9 @@ function addPersonalBankAccount(account, password) {
key: ONYXKEYS.PERSONAL_BANK_ACCOUNT,
value: {
isLoading: false,
error: Localize.translateLocal('paymentsPage.addBankAccountFailure'),
errors: {
[DateUtils.getMicroseconds()]: Localize.translateLocal('paymentsPage.addBankAccountFailure'),
},
},
},
],
Expand Down
113 changes: 31 additions & 82 deletions src/pages/AddPersonalBankAccountPage.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,10 +20,7 @@ import Icon from '../components/Icon';
import defaultTheme from '../styles/themes/default';
import Button from '../components/Button';
import FixedFooter from '../components/FixedFooter';
import FormScrollView from '../components/FormScrollView';
import FormAlertWithSubmitButton from '../components/FormAlertWithSubmitButton';
import FormHelper from '../libs/FormHelper';
import * as ReimbursementAccount from '../libs/actions/ReimbursementAccount';
import Form from '../components/Form';
import TextInput from '../components/TextInput';
import canFocusInputOnScreenFocus from '../libs/canFocusInputOnScreenFocus/index.native';
import ROUTES from '../ROUTES';
Expand All @@ -49,82 +46,41 @@ class AddPersonalBankAccountPage extends React.Component {
constructor(props) {
super(props);

this.getErrorText = this.getErrorText.bind(this);
this.clearError = this.clearError.bind(this);
this.validate = this.validate.bind(this);
this.submit = this.submit.bind(this);

this.state = {
selectedPlaidBankAccount: undefined,
password: '',
};

this.formHelper = new FormHelper({
errorPath: 'personalBankAccount.errorFields',
setErrors: errorFields => ReimbursementAccount.setPersonalBankAccountFormValidationErrorFields(errorFields),
});
}

componentDidMount() {
BankAccounts.clearPersonalBankAccount();
}

/**
* @returns {Object}
* @param {Object} values - form input values passed by the Form component
* @returns {Ojbect}
*/
getErrors() {
return this.formHelper.getErrors(this.props);
}
validate(values) {
const errors = {};

/**
* @param {String} fieldName
* @returns {String}
*/
getErrorText(fieldName) {
const errors = this.getErrors();
if (!errors[fieldName]) {
return '';
if (_.isEmpty(values.password)) {
errors.password = `${this.props.translate('common.password')} ${this.props.translate('common.isRequiredField')}.`;
}

return this.props.translate(this.errorTranslationKeys[fieldName]);
return errors;
}

/**
* @param {String} path
* @param {Object} values - form input values passed by the Form component
*/
clearError(path) {
this.formHelper.clearError(this.props, path);
}

/**
* @returns {Boolean}
*/
validate() {
const errors = {};
if (_.isUndefined(this.state.selectedPlaidBankAccount)) {
errors.selectedBank = true;
}

if (this.props.isPasswordRequired && _.isEmpty(this.state.password)) {
errors.password = true;
}

ReimbursementAccount.setPersonalBankAccountFormValidationErrorFields(errors);
return _.isEmpty(errors);
}

submit() {
if (!this.validate()) {
return;
}

BankAccounts.addPersonalBankAccount(this.state.selectedPlaidBankAccount, this.state.password);
submit(values) {
BankAccounts.addPersonalBankAccount(this.state.selectedPlaidBankAccount, values.password);
}

render() {
const shouldShowSuccess = lodashGet(this.props, 'personalBankAccount.shouldShowSuccess', false);
const error = lodashGet(this.props, 'personalBankAccount.error', '');
const isLoading = lodashGet(this.props, 'personalBankAccount.isLoading', false);

return (
<ScreenWrapper>
Expand Down Expand Up @@ -163,8 +119,15 @@ class AddPersonalBankAccountPage extends React.Component {
</FixedFooter>
</>
) : (
<FormScrollView>
<View style={[styles.mh5, styles.mb5, styles.flex1]}>
<Form
formID={ONYXKEYS.PERSONAL_BANK_ACCOUNT}
isSubmitButtonVisible={!_.isUndefined(this.state.selectedPlaidBankAccount)}
submitButtonText={this.props.translate('common.saveAndContinue')}
onSubmit={this.submit}
validate={this.validate}
style={[styles.mh5, styles.flex1]}
>
<>
<AddPlaidBankAccount
onSelect={(params) => {
this.setState({
Expand All @@ -175,32 +138,18 @@ class AddPersonalBankAccountPage extends React.Component {
receivedRedirectURI={getPlaidOAuthReceivedRedirectURI()}
/>
{!_.isUndefined(this.state.selectedPlaidBankAccount) && (
<View style={[styles.mb5]}>
<TextInput
label={this.props.translate('addPersonalBankAccountPage.enterPassword')}
secureTextEntry
value={this.state.password}
autoCompleteType="password"
textContentType="password"
autoCapitalize="none"
autoFocus={canFocusInputOnScreenFocus()}
onChangeText={text => this.setState({password: text})}
errorText={this.getErrorText('password')}
hasError={this.getErrors().password}
/>
</View>
)}
</View>
{!_.isUndefined(this.state.selectedPlaidBankAccount) && (
<FormAlertWithSubmitButton
isAlertVisible={Boolean(error)}
buttonText={this.props.translate('common.saveAndContinue')}
onSubmit={this.submit}
message={error}
isLoading={isLoading}
<TextInput
inputID="password"
label={this.props.translate('addPersonalBankAccountPage.enterPassword')}
secureTextEntry
autoCompleteType="password"
textContentType="password"
autoCapitalize="none"
autoFocus={canFocusInputOnScreenFocus()}
/>
)}
</FormScrollView>
)}
</>
</Form>
)}
</ScreenWrapper>
);
Expand Down

0 comments on commit 73c6279

Please sign in to comment.