add modal for existing owners error

helaoutar · Jul 20, 2021 · d4d5c77 · d4d5c77
1 parent ffadeac
commit d4d5c77
Show file tree

Hide file tree

Showing 4 changed files with 95 additions and 5 deletions.
diff --git a/src/CONST.js b/src/CONST.js
diff --git a/src/languages/en.js b/src/languages/en.js
@@ -4,6 +4,7 @@ export default {
         cancel: 'Cancel',
         yes: 'Yes',
         no: 'No',
+        ok: 'OK',
         attachment: 'Attachment',
         to: 'To',
         optional: 'Optional',
@@ -354,6 +355,14 @@ export default {
             dob: 'Please enter a valid date of birth',
             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 ',
+                setUpThisAccountByYourself: 'set up this account by yourself',
+                validationProcessAgain: ' and go through the entire validation process again (may take up to a week).',
+            },
         },
     },
     addPersonalBankAccountPage: {

diff --git a/src/libs/actions/BankAccounts.js b/src/libs/actions/BankAccounts.js
@@ -616,8 +616,17 @@ function setupWithdrawalAccount(data) {
 
                 // Show warning if another account already set up this bank account and promote share
                 if (response.existingOwners) {
-                    // @TODO Show better error in UI about existing owners
-                    console.error('Cannot set up withdrawal account due to existing owners');
+                    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});
                     return;
                 }
 
@@ -721,6 +730,10 @@ function setupWithdrawalAccount(data) {
         });
 }
 
+function hideExistingOwnersError() {
+    Onyx.merge(ONYXKEYS.REIMBURSEMENT_ACCOUNT, {error: '', existingOwnersList: ''});
+}
+
 export {
     activateWallet,
     addPersonalBankAccount,
@@ -733,4 +746,5 @@ export {
     goToWithdrawalAccountSetupStep,
     setupWithdrawalAccount,
     validateBankAccount,
+    hideExistingOwnersError,
 };
diff --git a/src/pages/ReimbursementAccount/BankAccountStep.js b/src/pages/ReimbursementAccount/BankAccountStep.js
@@ -1,9 +1,13 @@
 import _ from 'underscore';
 import React from 'react';
 import {View, Image} from 'react-native';
+import PropTypes from 'prop-types';
+import {withOnyx} from 'react-native-onyx';
 import HeaderWithCloseButton from '../../components/HeaderWithCloseButton';
 import MenuItem from '../../components/MenuItem';
-import {Paycheck, Bank, Lock} from '../../components/Icon/Expensicons';
+import {
+    Paycheck, Bank, Lock,
+} from '../../components/Icon/Expensicons';
 import styles from '../../styles/styles';
 import TextLink from '../../components/TextLink';
 import Button from '../../components/Button';
@@ -17,9 +21,25 @@ import CheckboxWithLabel from '../../components/CheckboxWithLabel';
 import withLocalize, {withLocalizePropTypes} from '../../components/withLocalize';
 import exampleCheckImage from '../../../assets/images/example-check-image.png';
 import Text from '../../components/Text';
-import {setupWithdrawalAccount} from '../../libs/actions/BankAccounts';
+import {
+    goToWithdrawalAccountSetupStep,
+    hideExistingOwnersError,
+    setupWithdrawalAccount,
+} from '../../libs/actions/BankAccounts';
+import ConfirmModal from '../../components/ConfirmModal';
+import ONYXKEYS from '../../ONYXKEYS';
+import compose from '../../libs/compose';
 
 const propTypes = {
+    /** Bank account currently in setup */
+    reimbursementAccount: PropTypes.shape({
+        /** 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,
+    }).isRequired,
+
     ...withLocalizePropTypes,
 };
 
@@ -109,6 +129,8 @@ 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 isExistingOwnersErrorVisible = Boolean(this.props.reimbursementAccount.error
+            && this.props.reimbursementAccount.existingOwnersList);
         return (
             <View style={[styles.flex1, styles.justifyContentBetween]}>
                 <HeaderWithCloseButton
@@ -223,11 +245,55 @@ class BankAccountStep extends React.Component {
                         />
                     </>
                 )}
+
+                <ConfirmModal
+                    title={this.props.translate('bankAccount.error.existingOwners.unableToAddBankAccount')}
+                    isVisible={isExistingOwnersErrorVisible}
+                    onConfirm={hideExistingOwnersError}
+                    shouldShowCancelButton={false}
+                    prompt={(
+                        <View style={[styles.flex1, styles.m5]}>
+                            <Text style={[styles.mb4]}>
+                                <Text>
+                                    {this.props.translate('bankAccount.error.existingOwners.alreadyInUse')}
+                                </Text>
+                                <Text style={styles.textStrong}>
+                                    {this.props.reimbursementAccount.existingOwnersList}
+                                </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>
         );
     }
 }
 
 BankAccountStep.propTypes = propTypes;
 
-export default withLocalize(BankAccountStep);
+export default compose(
+    withLocalize,
+    withOnyx({
+        reimbursementAccount: {
+            key: ONYXKEYS.REIMBURSEMENT_ACCOUNT,
+        },
+    }),
+)(BankAccountStep);