diff --git a/src/CONST.js b/src/CONST.js
index e8c1c270fc4b..3cadfc7f8243 100755
--- a/src/CONST.js
+++ b/src/CONST.js
@@ -26,7 +26,6 @@ const CONST = {
MAX_ROUTING_NUMBER: '402 Maximum Size Exceeded routingNumber',
MISSING_INCORPORATION_STATE: '402 Missing incorporationState in additionalData',
MISSING_INCORPORATION_TYPE: '402 Missing incorporationType in additionalData',
- EXISTING_OWNERS: '402 Existing Owners',
},
STEP: {
// In the order they appear in the VBA flow
diff --git a/src/languages/en.js b/src/languages/en.js
index efcb20b5b9cc..8ce8a5666a08 100755
--- a/src/languages/en.js
+++ b/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 ',
diff --git a/src/languages/es.js b/src/languages/es.js
index 6fbd8ab352cc..6aab80a03fbd 100644
--- a/src/languages/es.js
+++ b/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 ',
diff --git a/src/libs/actions/BankAccounts.js b/src/libs/actions/BankAccounts.js
index 37af3dae7fa8..1704d1f19d04 100644
--- a/src/libs/actions/BankAccounts.js
+++ b/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) {
diff --git a/src/pages/ReimbursementAccount/BankAccountStep.js b/src/pages/ReimbursementAccount/BankAccountStep.js
index 84658e270dba..93458d8a7cae 100644
--- a/src/pages/ReimbursementAccount/BankAccountStep.js
+++ b/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 (
)}
-
-
-
-
- {this.props.translate('bankAccount.error.existingOwners.alreadyInUse')}
-
- {existingOwners && existingOwners.map((existingOwner, i) => {
- let separator = ', ';
- if (i === 0) {
- separator = '';
- } else if (i === existingOwners.length - 1) {
- separator = ` ${this.props.translate('common.and')} `;
- }
- return (
- <>
- {separator}
- {existingOwner}
- {i === existingOwners.length - 1 && .}
-
- );
- })}
-
-
- {this.props.translate('bankAccount.error.existingOwners.pleaseAskThemToShare')}
-
-
-
- {this.props.translate('bankAccount.error.existingOwners.alternatively')}
-
- goToWithdrawalAccountSetupStep(
- CONST.BANK_ACCOUNT.STEP.COMPANY,
- this.props.achData,
- )}
- >
- {this.props.translate(
- 'bankAccount.error.existingOwners.setUpThisAccountByYourself',
- )}
-
-
- {this.props.translate('bankAccount.error.existingOwners.validationProcessAgain')}
-
-
-
- )}
- confirmText={this.props.translate('common.ok')}
- />
);
}
diff --git a/src/pages/ReimbursementAccount/ExistingOwners.js b/src/pages/ReimbursementAccount/ExistingOwners.js
new file mode 100644
index 000000000000..c3fea5a860a7
--- /dev/null
+++ b/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}) => (
+
+
+
+ {translate('bankAccount.error.existingOwners.alreadyInUse')}
+
+ {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 (
+
+ {separator}
+ {existingOwner}
+ {i === reimbursementAccount.existingOwners.length - 1 && .}
+
+ );
+ })}
+
+
+ {translate('bankAccount.error.existingOwners.pleaseAskThemToShare')}
+
+
+
+ {translate('bankAccount.error.existingOwners.alternatively')}
+
+ {
+ goToWithdrawalAccountSetupStep(
+ CONST.BANK_ACCOUNT.STEP.COMPANY,
+ reimbursementAccount.achData || {},
+ );
+ hideBankAccountErrorModal();
+ }}
+ >
+ {translate(
+ 'bankAccount.error.existingOwners.setUpThisAccountByYourself',
+ )}
+
+
+ {translate('bankAccount.error.existingOwners.validationProcessAgain')}
+
+
+
+);
+
+
+ExistingOwners.propTypes = propTypes;
+export default compose(
+ withLocalize,
+ withOnyx({
+ reimbursementAccount: {
+ key: ONYXKEYS.REIMBURSEMENT_ACCOUNT,
+ },
+ }),
+)(ExistingOwners);
diff --git a/src/pages/ReimbursementAccount/ReimbursementAccountPage.js b/src/pages/ReimbursementAccount/ReimbursementAccountPage.js
index 5a4216d9f971..81d1f3880230 100644
--- a/src/pages/ReimbursementAccount/ReimbursementAccountPage.js
+++ b/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 ;
+ }
+
+ 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 {