Move ExistingOwners view into new component. Reuse confirm modal.

src/languages/en.js

@@ -400,7 +400,6 @@ export default {
             ssnLast4: 'Please enter valid last 4 digits of SSN',
             noDefaultDepositAccountOrDebitCardAvailable: 'Please add a default deposit bank account or debit card',
             existingOwners: {
-                unableToAddBankAccount: 'Unable to add bank account',
                 alreadyInUse: 'This bank account is already in use by ',
                 pleaseAskThemToShare: 'Please ask them to share it with you.',
                 alternatively: 'Alternatively, you can ',

src/languages/es.js

@@ -400,7 +400,6 @@ export default {
             ssnLast4: 'Ingrese los últimos 4 dígitos del número de seguro social',
             noDefaultDepositAccountOrDebitCardAvailable: 'Por favor agregue una cuenta bancaria para depósitos o una tarjeta de débito',
             existingOwners: {
-                unableToAddBankAccount: 'No ha sido posible añadir la cuenta bancaria',
                 alreadyInUse: 'La cuenta bancaria ya se encuentra en uso por ',
                 pleaseAskThemToShare: 'Por favor, solicita que la compartan contigo.',
                 alternatively: 'En su defecto, puedes ',

src/libs/actions/BankAccounts.js

@@ -713,12 +713,11 @@ function setupWithdrawalAccount(data) {
 
                 // Show warning if another account already set up this bank account and promote share
                 if (response.existingOwners) {
-                    console.error('Cannot set up withdrawal account due to existing owners', response);
                     Onyx.merge(
                         ONYXKEYS.REIMBURSEMENT_ACCOUNT,
                         {
                             existingOwners: response.existingOwners,
-                            error: CONST.BANK_ACCOUNT.ERROR.EXISTING_OWNERS,
+                            isErrorModalVisible: true,
                         },
                     );
                     return;
@@ -835,7 +834,7 @@ function setupWithdrawalAccount(data) {
 }
 
 function hideBankAccountErrors() {
-    Onyx.merge(ONYXKEYS.REIMBURSEMENT_ACCOUNT, {error: '', existingOwners: [], errors: null});
+    Onyx.merge(ONYXKEYS.REIMBURSEMENT_ACCOUNT, {error: '', existingOwners: null, errors: null});
 }
 
 function setWorkspaceIDForReimbursementAccount(workspaceID) {

src/pages/ReimbursementAccount/BankAccountStep.js

@@ -23,13 +23,10 @@ import exampleCheckImage from '../../../assets/images/example-check-image.png';
 import Text from '../../components/Text';
 import ExpensiTextInput from '../../components/ExpensiTextInput';
 import {
-    goToWithdrawalAccountSetupStep,
-    hideBankAccountErrors,
     setBankAccountFormValidationErrors,
     setupWithdrawalAccount,
     showBankAccountErrorModal,
 } from '../../libs/actions/BankAccounts';
-import ConfirmModal from '../../components/ConfirmModal';
 import ONYXKEYS from '../../ONYXKEYS';
 import compose from '../../libs/compose';
 
@@ -38,9 +35,6 @@ const propTypes = {
     reimbursementAccount: PropTypes.shape({
         /** Error set when handling the API response */
         error: PropTypes.string,
-
-        /** The existing owners for if the bank account is already owned */
-        existingOwners: PropTypes.arrayOf(PropTypes.string),
     }).isRequired,
 
     ...withLocalizePropTypes,
@@ -191,9 +185,6 @@ class BankAccountStep extends React.Component {
         // Disable bank account fields once they've been added in db so they can't be changed
         const isFromPlaid = this.props.achData.setupType === CONST.BANK_ACCOUNT.SETUP_TYPE.PLAID;
         const shouldDisableInputs = Boolean(this.props.achData.bankAccountID) || isFromPlaid;
-        const existingOwners = this.props.reimbursementAccount.existingOwners;
-        const error = this.getErrors();
-        const isExistingOwnersErrorVisible = Boolean(error && existingOwners);
         return (
             <View style={[styles.flex1, styles.justifyContentBetween]}>
                 <HeaderWithCloseButton
@@ -311,60 +302,6 @@ class BankAccountStep extends React.Component {
                         />
                     </>
                 )}
-
-                <ConfirmModal
-                    title={this.props.translate('bankAccount.error.existingOwners.unableToAddBankAccount')}
-                    isVisible={isExistingOwnersErrorVisible}
-                    onConfirm={hideBankAccountErrors}
-                    shouldShowCancelButton={false}
-                    prompt={(
-                        <View>
-                            <Text style={[styles.mb4]}>
-                                <Text>
-                                    {this.props.translate('bankAccount.error.existingOwners.alreadyInUse')}
-                                </Text>
-                                {existingOwners && existingOwners.map((existingOwner, i) => {
-                                    let separator = ', ';
-                                    if (i === 0) {
-                                        separator = '';
-                                    } else if (i === existingOwners.length - 1) {
-                                        separator = ` ${this.props.translate('common.and')} `;
-                                    }
-                                    return (
-                                        <>
-                                            <Text>{separator}</Text>
-                                            <Text style={styles.textStrong}>{existingOwner}</Text>
-                                            {i === existingOwners.length - 1 && <Text>.</Text>}
-                                        </>
-                                    );
-                                })}
-                            </Text>
-                            <Text style={[styles.mb4]}>
-                                {this.props.translate('bankAccount.error.existingOwners.pleaseAskThemToShare')}
-                            </Text>
-                            <Text>
-                                <Text>
-                                    {this.props.translate('bankAccount.error.existingOwners.alternatively')}
-                                </Text>
-                                <Text
-                                    style={styles.link}
-                                    onPress={() => goToWithdrawalAccountSetupStep(
-                                        CONST.BANK_ACCOUNT.STEP.COMPANY,
-                                        this.props.achData,
-                                    )}
-                                >
-                                    {this.props.translate(
-                                        'bankAccount.error.existingOwners.setUpThisAccountByYourself',
-                                    )}
-                                </Text>
-                                <Text>
-                                    {this.props.translate('bankAccount.error.existingOwners.validationProcessAgain')}
-                                </Text>
-                            </Text>
-                        </View>
-                    )}
-                    confirmText={this.props.translate('common.ok')}
-                />
             </View>
         );
     }

src/pages/ReimbursementAccount/ExistingOwners.js

@@ -0,0 +1,82 @@
+import _ from 'underscore';
+import React from 'react';
+import PropTypes from 'prop-types';
+import {View} from 'react-native';
+import {withOnyx} from 'react-native-onyx';
+import Text from '../../components/Text';
+import styles from '../../styles/styles';
+import withLocalize, {withLocalizePropTypes} from '../../components/withLocalize';
+import CONST from '../../CONST';
+import {goToWithdrawalAccountSetupStep, hideBankAccountErrorModal} from '../../libs/actions/BankAccounts';
+import compose from '../../libs/compose';
+import ONYXKEYS from '../../ONYXKEYS';
+
+const propTypes = {
+    /** Reimbursement account state with list of existing owners */
+    reimbursementAccount: PropTypes.shape({
+        /** The existing owners for if the bank account is already owned */
+        existingOwners: PropTypes.arrayOf(PropTypes.string),
+    }).isRequired,
+    ...withLocalizePropTypes,
+};
+
+const ExistingOwners = ({reimbursementAccount, translate}) => (
+    <View>
+        <Text style={[styles.mb4]}>
+            <Text>
+                {translate('bankAccount.error.existingOwners.alreadyInUse')}
+            </Text>
+            {reimbursementAccount.existingOwners && _.map(reimbursementAccount.existingOwners, (existingOwner, i) => {
+                let separator = ', ';
+                if (i === 0) {
+                    separator = '';
+                } else if (i === reimbursementAccount.existingOwners.length - 1) {
+                    separator = ` ${translate('common.and')} `;
+                }
+                return (
+                    <React.Fragment key={existingOwner}>
+                        <Text>{separator}</Text>
+                        <Text style={styles.textStrong}>{existingOwner}</Text>
+                        {i === reimbursementAccount.existingOwners.length - 1 && <Text>.</Text>}
+                    </React.Fragment>
+                );
+            })}
+        </Text>
+        <Text style={[styles.mb4]}>
+            {translate('bankAccount.error.existingOwners.pleaseAskThemToShare')}
+        </Text>
+        <Text>
+            <Text>
+                {translate('bankAccount.error.existingOwners.alternatively')}
+            </Text>
+            <Text
+                style={styles.link}
+                onPress={() => {
+                    goToWithdrawalAccountSetupStep(
+                        CONST.BANK_ACCOUNT.STEP.COMPANY,
+                        reimbursementAccount.achData || {},
+                    );
+                    hideBankAccountErrorModal();
+                }}
+            >
+                {translate(
+                    'bankAccount.error.existingOwners.setUpThisAccountByYourself',
+                )}
+            </Text>
+            <Text>
+                {translate('bankAccount.error.existingOwners.validationProcessAgain')}
+            </Text>
+        </Text>
+    </View>
+);
+
+
+ExistingOwners.propTypes = propTypes;
+export default compose(
+    withLocalize,
+    withOnyx({
+        reimbursementAccount: {
+            key: ONYXKEYS.REIMBURSEMENT_ACCOUNT,
+        },
+    }),
+)(ExistingOwners);

src/pages/ReimbursementAccount/ReimbursementAccountPage.js

@@ -32,6 +32,7 @@ import EnableStep from './EnableStep';
 import ROUTES from '../../ROUTES';
 import HeaderWithCloseButton from '../../components/HeaderWithCloseButton';
 import ConfirmModal from '../../components/ConfirmModal';
+import ExistingOwners from './ExistingOwners';
 
 const propTypes = {
     /** List of betas */
@@ -154,6 +155,17 @@ class ReimbursementAccountPage extends React.Component {
         }
     }
 
+    /**
+     * @returns {React.Component|string}
+     */
+    getErrorModalPrompt() {
+        if (lodashGet(this.props.reimbursementAccount, 'existingOwners', []).length > 0) {
+            return <ExistingOwners />;
+        }
+
+        return this.props.reimbursementAccount.errorModalMessage || this.props.translate('bankAccount.confirmModalPrompt');
+    }
+
     render() {
         if (!Permissions.canUseFreePlan(this.props.betas)) {
             console.debug('Not showing new bank account page because user is not on free plan beta');
@@ -247,7 +259,7 @@ class ReimbursementAccountPage extends React.Component {
                     <ConfirmModal
                         title={this.props.translate('bankAccount.confirmModalTitle')}
                         onConfirm={hideBankAccountErrorModal}
-                        prompt={this.props.reimbursementAccount.errorModalMessage || this.props.translate('bankAccount.confirmModalPrompt')}
+                        prompt={this.getErrorModalPrompt()}
                         isVisible={lodashGet(this.props, 'reimbursementAccount.isErrorModalVisible', false)}
                         confirmText={this.props.translate('bankAccount.confirmModalConfirmText')}
                         shouldShowCancelButton={false}