Form refactor bankaccountstep

src/components/Form.js

@@ -40,6 +40,9 @@ const propTypes = {
     // eslint-disable-next-line react/forbid-prop-types
     draftValues: PropTypes.object,
 
+    /** Should we show the form button */
+    isSubmitButtonVisible: PropTypes.bool,
+
     ...withLocalizePropTypes,
 };
 
@@ -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/BankAccountStep.js

@@ -61,6 +61,9 @@ class BankAccountStep extends React.Component {
         this.addPlaidAccount = this.addPlaidAccount.bind(this);
         this.validate = this.validate.bind(this);
         this.validatePlaidAccount = this.validatePlaidAccount.bind(this);
+        this.state = {
+            selectedPlaidBankAccount: undefined,
+        };
     }
 
     /**
@@ -83,9 +86,10 @@ class BankAccountStep extends React.Component {
         return errors;
     }
 
-    validatePlaidAccount(values) {
+    validatePlaidAccount() {
+        const selectedPlaidBankAccount = this.state.selectedPlaidBankAccount;
         const errors = {};
-        if (_.isUndefined(values.selectedPlaidBankAccount)) {
+        if (_.isUndefined(selectedPlaidBankAccount)) {
             errors.selectedPlaidBankAccount = this.props.translate('bankAccount.error.noBankAccountSelected');
         }
 
@@ -110,9 +114,11 @@ class BankAccountStep extends React.Component {
      * Add the Bank account retrieved via Plaid in db
      * @param {Object} values - form input values passed by the Form component
      */
-    addPlaidAccount(values) {
-        const selectedPlaidBankAccount = values.selectedPlaidBankAccount;
-
+    addPlaidAccount() {
+        const selectedPlaidBankAccount = this.state.selectedPlaidBankAccount;
+        if (!this.state.selectedPlaidBankAccount) {
+            return;
+        }
         BankAccounts.setupWithdrawalAccount({
             acceptTerms: true,
             setupType: CONST.BANK_ACCOUNT.SETUP_TYPE.PLAID,
@@ -235,11 +241,15 @@ class BankAccountStep extends React.Component {
                         validate={this.validatePlaidAccount}
                         onSubmit={this.addPlaidAccount}
                         submitButtonText={this.props.translate('common.saveAndContinue')}
-                        style={[styles.mh5, styles.mb5, styles.flex1]}
+                        style={[styles.mh5, styles.flexGrow1]}
+                        isSubmitButtonVisible={!_.isUndefined(this.state.selectedPlaidBankAccount)}
                     >
                         <AddPlaidBankAccount
-                            inputID="selectedPlaidBankAccount"
-                            text={this.props.translate('bankAccount.plaidBodyCopy')}
+                            onSelect={(params) => {
+                                this.setState({
+                                    selectedPlaidBankAccount: params.selectedPlaidBankAccount,
+                                });
+                            }}
                             onExitPlaid={() => BankAccounts.setBankAccountSubStep(null)}
                             receivedRedirectURI={this.props.receivedRedirectURI}
                             plaidLinkOAuthToken={this.props.plaidLinkOAuthToken}