diff --git a/src/libs/actions/BankAccounts.js b/src/libs/actions/BankAccounts.js index 53434116618..168bac43e88 100644 --- a/src/libs/actions/BankAccounts.js +++ b/src/libs/actions/BankAccounts.js @@ -618,18 +618,12 @@ 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); - const existingOwnersList = response.existingOwners.reduce((ownersStr, owner, i, ownersArr) => { - let separator = ',\n'; - if (i === 0) { - separator = '\n'; - } else if (i === ownersArr.length - 1) { - separator = ' and\n'; - } - return `${ownersStr}${separator}${owner}`; - }, ''); Onyx.merge( ONYXKEYS.REIMBURSEMENT_ACCOUNT, - {existingOwnersList, error: CONST.BANK_ACCOUNT.ERROR.EXISTING_OWNERS}, + { + existingOwners: response.existingOwners, + error: CONST.BANK_ACCOUNT.ERROR.EXISTING_OWNERS, + }, ); return; } diff --git a/src/pages/ReimbursementAccount/BankAccountStep.js b/src/pages/ReimbursementAccount/BankAccountStep.js index db8cce8eaee..b38563acdef 100644 --- a/src/pages/ReimbursementAccount/BankAccountStep.js +++ b/src/pages/ReimbursementAccount/BankAccountStep.js @@ -36,8 +36,8 @@ const propTypes = { /** Error set when handling the API response */ error: PropTypes.string, - /** A list of existing owners, set if the bank account being added is already owned */ - existingOwnersList: PropTypes.string, + /** The existing owners for if the bank account is already owned */ + existingOwners: PropTypes.arrayOf(PropTypes.string), }).isRequired, ...withLocalizePropTypes, @@ -129,8 +129,9 @@ 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 isExistingOwnersErrorVisible = Boolean(this.props.reimbursementAccount.error - && this.props.reimbursementAccount.existingOwnersList); + && existingOwners); return ( + {this.props.translate('bankAccount.error.existingOwners.alreadyInUse')} - - {this.props.reimbursementAccount.existingOwnersList} - + {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')}