Merge pull request #4261 from Expensify/jasper-fixBoldTextExistingOwnersError

Fix bolded text for Existing Owners Error

Author: tgolen

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;
                 }

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 (
             <View style={[styles.flex1, styles.justifyContentBetween]}>
                 <HeaderWithCloseButton
@@ -252,14 +253,26 @@ class BankAccountStep extends React.Component {
                     onConfirm={hideExistingOwnersError}
                     shouldShowCancelButton={false}
                     prompt={(
-                        <View style={[styles.flex1]}>
+                        <View>
                             <Text style={[styles.mb4]}>
                                 <Text>
                                     {this.props.translate('bankAccount.error.existingOwners.alreadyInUse')}
                                 </Text>
-                                <Text style={styles.textStrong}>
-                                    {this.props.reimbursementAccount.existingOwnersList}
-                                </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')}