Form refactor bankaccountstep

src/ONYXKEYS.js

@@ -177,5 +177,6 @@ export default {
     FORMS: {
         ADD_DEBIT_CARD_FORM: 'addDebitCardForm',
         REQUEST_CALL_FORM: 'requestCallForm',
+        REIMBURSEMENT_ACCOUNT_FORM: 'reimbursementAccount',
     },
 };

src/components/Form.js

@@ -16,6 +16,9 @@ const propTypes = {
     /** Text to be displayed in the submit button */
     submitButtonText: PropTypes.string.isRequired,
 
+    /** Should we show the submit button */
+    isSubmitButtonVisible: PropTypes.bool,
+
     /** Callback to validate the form */
     validate: PropTypes.func.isRequired,
 
@@ -49,6 +52,7 @@ const defaultProps = {
         error: '',
     },
     draftValues: {},
+    isSubmitButtonVisible: true,
 };
 
 class Form extends React.Component {
@@ -184,17 +188,19 @@ class Form extends React.Component {
                 >
                     <View style={[this.props.style]}>
                         {this.childrenWrapperWithProps(this.props.children)}
-                        <FormAlertWithSubmitButton
-                            buttonText={this.props.submitButtonText}
-                            isAlertVisible={_.size(this.state.errors) > 0 || Boolean(this.props.formState.error)}
-                            isLoading={this.props.formState.isLoading}
-                            message={this.props.formState.error}
-                            onSubmit={this.submit}
-                            onFixTheErrorsLinkPressed={() => {
-                                this.inputRefs[_.first(_.keys(this.state.errors))].focus();
-                            }}
-                            containerStyles={[styles.mh0, styles.mt5]}
-                        />
+                        {this.props.isSubmitButtonVisible && (
+                            <FormAlertWithSubmitButton
+                                buttonText={this.props.submitButtonText}
+                                isAlertVisible={_.size(this.state.errors) > 0 || Boolean(this.props.formState.error)}
+                                isLoading={this.props.formState.isLoading}
+                                message={this.props.formState.error}
+                                onSubmit={this.submit}
+                                onFixTheErrorsLinkPressed={() => {
+                                    this.inputRefs[_.first(_.keys(this.state.errors))].focus();
+                                }}
+                                containerStyles={[styles.mh0, styles.mt5]}
+                            />
+                        )}
                     </View>
                 </ScrollView>
             </>

src/pages/ReimbursementAccount/BankAccountManualStep.js

@@ -1,4 +1,3 @@
-import _ from 'underscore';
 import React from 'react';
 import {Image, View} from 'react-native';
 import {withOnyx} from 'react-native-onyx';
@@ -15,9 +14,8 @@ import withLocalize, {withLocalizePropTypes} from '../../components/withLocalize
 import * as ValidationUtils from '../../libs/ValidationUtils';
 import compose from '../../libs/compose';
 import ONYXKEYS from '../../ONYXKEYS';
-import * as ReimbursementAccount from '../../libs/actions/ReimbursementAccount';
 import exampleCheckImage from './exampleCheckImage';
-import ReimbursementAccountForm from './ReimbursementAccountForm';
+import Form from '../../components/Form';
 import * as ReimbursementAccountUtils from '../../libs/ReimbursementAccountUtils';
 
 const propTypes = {
@@ -27,69 +25,40 @@ const propTypes = {
 class BankAccountManualStep extends React.Component {
     constructor(props) {
         super(props);
-
         this.submit = this.submit.bind(this);
-        this.clearErrorAndSetValue = this.clearErrorAndSetValue.bind(this);
-        this.getErrorText = inputKey => ReimbursementAccountUtils.getErrorText(this.props, this.errorTranslationKeys, inputKey);
-        this.state = {
-            acceptTerms: ReimbursementAccountUtils.getDefaultStateForField(props, 'acceptTerms', true),
-            routingNumber: ReimbursementAccountUtils.getDefaultStateForField(props, 'routingNumber'),
-            accountNumber: ReimbursementAccountUtils.getDefaultStateForField(props, 'accountNumber'),
-        };
-
-        // Map a field to the key of the error's translation
-        this.errorTranslationKeys = {
-            routingNumber: 'bankAccount.error.routingNumber',
-            accountNumber: 'bankAccount.error.accountNumber',
-            acceptTerms: 'common.error.acceptedTerms',
-        };
+        this.validate = this.validate.bind(this);
     }
 
     /**
-     * @returns {Boolean}
+     * @param {Object} values - form input values passed by the Form component
+     * @returns {Object}
      */
-    validate() {
+    validate(values) {
         const errorFields = {};
-        const routingNumber = this.state.routingNumber.trim();
+        const routingNumber = values.routingNumber && values.routingNumber.trim();
 
-        if (!CONST.BANK_ACCOUNT.REGEX.US_ACCOUNT_NUMBER.test(this.state.accountNumber.trim())) {
-            errorFields.accountNumber = true;
+        if (!values.accountNumber || !CONST.BANK_ACCOUNT.REGEX.US_ACCOUNT_NUMBER.test(values.accountNumber.trim())) {
+            errorFields.accountNumber = this.props.translate('bankAccount.error.accountNumber');
         }
-        if (!CONST.BANK_ACCOUNT.REGEX.SWIFT_BIC.test(routingNumber) || !ValidationUtils.isValidRoutingNumber(routingNumber)) {
-            errorFields.routingNumber = true;
+        if (!routingNumber || !CONST.BANK_ACCOUNT.REGEX.SWIFT_BIC.test(routingNumber) || !ValidationUtils.isValidRoutingNumber(routingNumber)) {
+            errorFields.routingNumber = this.props.translate('bankAccount.error.routingNumber');
         }
-        if (!this.state.acceptTerms) {
-            errorFields.acceptTerms = true;
+        if (!values.acceptedTerms) {
+            errorFields.acceptedTerms = this.props.translate('common.error.acceptedTerms');
         }
 
-        ReimbursementAccount.setBankAccountFormValidationErrors(errorFields);
-
-        return _.size(errorFields) === 0;
+        return errorFields;
     }
 
-    submit() {
-        if (!this.validate()) {
-            return;
-        }
+    submit(values) {
         BankAccounts.connectBankAccountManually(
             ReimbursementAccountUtils.getDefaultStateForField(this.props, 'bankAccountID', 0),
-            this.state.accountNumber,
-            this.state.routingNumber,
+            values.accountNumber,
+            values.routingNumber,
             ReimbursementAccountUtils.getDefaultStateForField(this.props, 'plaidMask'),
         );
     }
 
-    /**
-     * @param {String} inputKey
-     * @param {String} value
-     */
-    clearErrorAndSetValue(inputKey, value) {
-        const newState = {[inputKey]: value};
-        this.setState(newState);
-        ReimbursementAccount.updateReimbursementAccountDraft(newState);
-        ReimbursementAccountUtils.clearError(this.props, inputKey);
-    }
-
     render() {
         const shouldDisableInputs = Boolean(ReimbursementAccountUtils.getDefaultStateForField(this.props, 'bankAccountID'));
 
@@ -104,7 +73,13 @@ class BankAccountManualStep extends React.Component {
                     onBackButtonPress={() => BankAccounts.setBankAccountSubStep(null)}
                     onCloseButtonPress={Navigation.dismissModal}
                 />
-                <ReimbursementAccountForm onSubmit={this.submit}>
+                <Form
+                    formID={ONYXKEYS.FORMS.REIMBURSEMENT_ACCOUNT_FORM}
+                    onSubmit={this.submit}
+                    validate={this.validate}
+                    submitButtonText={this.props.translate('common.saveAndContinue')}
+                    style={[styles.mh5, styles.flexGrow1]}
+                >
                     <Text style={[styles.mb5]}>
                         {this.props.translate('bankAccount.checkHelpLine')}
                     </Text>
@@ -114,26 +89,23 @@ class BankAccountManualStep extends React.Component {
                         source={exampleCheckImage(this.props.preferredLocale)}
                     />
                     <TextInput
+                        inputID="routingNumber"
                         label={this.props.translate('bankAccount.routingNumber')}
                         keyboardType={CONST.KEYBOARD_TYPE.NUMBER_PAD}
-                        defaultValue={this.state.routingNumber}
-                        onChangeText={value => this.clearErrorAndSetValue('routingNumber', value)}
                         disabled={shouldDisableInputs}
-                        errorText={this.getErrorText('routingNumber')}
+                        shouldSaveDraft
                     />
                     <TextInput
+                        inputID="accountNumber"
                         containerStyles={[styles.mt4]}
                         label={this.props.translate('bankAccount.accountNumber')}
                         keyboardType={CONST.KEYBOARD_TYPE.NUMBER_PAD}
-                        defaultValue={this.state.accountNumber}
-                        onChangeText={value => this.clearErrorAndSetValue('accountNumber', value)}
                         disabled={shouldDisableInputs}
-                        errorText={this.getErrorText('accountNumber')}
+                        shouldSaveDraft
                     />
                     <CheckboxWithLabel
                         style={styles.mt4}
-                        isChecked={this.state.acceptTerms}
-                        onInputChange={value => this.clearErrorAndSetValue('acceptTerms', value)}
+                        inputID="acceptedTerms"
                         LabelComponent={() => (
                             <View style={[styles.flexRow, styles.alignItemsCenter]}>
                                 <Text>
@@ -144,9 +116,9 @@ class BankAccountManualStep extends React.Component {
                                 </TextLink>
                             </View>
                         )}
-                        errorText={this.getErrorText('acceptTerms')}
+                        shouldSaveDraft
                     />
-                </ReimbursementAccountForm>
+                </Form>
             </>
         );
     }

src/pages/ReimbursementAccount/BankAccountPlaidStep.js

@@ -11,8 +11,9 @@ import compose from '../../libs/compose';
 import ONYXKEYS from '../../ONYXKEYS';
 import AddPlaidBankAccount from '../../components/AddPlaidBankAccount';
 import * as ReimbursementAccount from '../../libs/actions/ReimbursementAccount';
-import ReimbursementAccountForm from './ReimbursementAccountForm';
 import * as ReimbursementAccountUtils from '../../libs/ReimbursementAccountUtils';
+import Form from '../../components/Form';
+import styles from '../../styles/styles';
 
 const propTypes = {
     /** The OAuth URI + stateID needed to re-initialize the PlaidLink after the user logs into their bank */
@@ -69,7 +70,14 @@ class BankAccountPlaidStep extends React.Component {
                     onBackButtonPress={() => BankAccounts.setBankAccountSubStep(null)}
                     onCloseButtonPress={Navigation.dismissModal}
                 />
-                <ReimbursementAccountForm onSubmit={this.submit} hideSubmitButton={_.isUndefined(this.props.plaidData.selectedPlaidBankAccount)}>
+                <Form
+                    formID={ONYXKEYS.FORMS.REIMBURSEMENT_ACCOUNT_FORM}
+                    validate={() => ({})}
+                    onSubmit={this.submit}
+                    submitButtonText={this.props.translate('common.saveAndContinue')}
+                    style={[styles.mh5, styles.flexGrow1]}
+                    isSubmitButtonVisible={!_.isUndefined(this.props.plaidData.selectedPlaidBankAccount)}
+                >
                     <AddPlaidBankAccount
                         text={this.props.translate('bankAccount.plaidBodyCopy')}
                         onSelect={(params) => {
@@ -81,7 +89,7 @@ class BankAccountPlaidStep extends React.Component {
                         allowDebit
                         bankAccountID={bankAccountID}
                     />
-                </ReimbursementAccountForm>
+                </Form>
             </>
         );
     }