Handle isWaitingOnBankAccount for IOU requests

src/CONST.js

@@ -490,6 +490,8 @@ const CONST = {
                 TASKEDITED: 'TASKEDITED',
                 TASKCANCELED: 'TASKCANCELED',
                 IOU: 'IOU',
+                REIMBURSEMENTQUEUED: 'REIMBURSEMENTQUEUED',
+                REIMBURSED: 'REIMBURSED',
                 RENAMED: 'RENAMED',
                 CHRONOSOOOLIST: 'CHRONOSOOOLIST',
                 TASKCOMPLETED: 'TASKCOMPLETED',

src/components/AddPlaidBankAccount.js

@@ -180,7 +180,7 @@ class AddPlaidBankAccount extends React.Component {
                             token={token}
                             onSuccess={({publicToken, metadata}) => {
                                 Log.info('[PlaidLink] Success!');
-                                BankAccounts.openPlaidBankAccountSelector(publicToken, metadata.institution.name, this.props.allowDebit);
+                                BankAccounts.openPlaidBankAccountSelector(publicToken, metadata.institution.name, this.props.allowDebit, this.props.bankAccountID);
                             }}
                             onError={(error) => {
                                 Log.hmmm('[PlaidLink] Error: ', error.message);

src/components/LHNOptionsList/OptionRowLHN.js

@@ -87,7 +87,8 @@ function OptionRowLHN(props) {
         !hasBrickError &&
         (optionItem.isUnreadWithMention ||
             (optionItem.hasOutstandingIOU && !optionItem.isIOUReportOwner) ||
-            (optionItem.isTaskReport && optionItem.isTaskAssignee && !optionItem.isTaskCompleted));
+            (optionItem.isTaskReport && optionItem.isTaskAssignee && !optionItem.isTaskCompleted) ||
+            (optionItem.isWaitingOnBankAccount && optionItem.isIOUReportOwner));
 
     /**
      * Show the ReportActionContextMenu modal popover.

src/components/MoneyRequestHeader.js

@@ -87,9 +87,16 @@ function MoneyRequestHeader(props) {
     const policy = props.policies[`${ONYXKEYS.COLLECTION.POLICY}${props.report.policyID}`];
     const isPayer =
         Policy.isAdminOfFreePolicy([policy]) || (ReportUtils.isMoneyRequestReport(moneyRequestReport) && lodashGet(props.session, 'accountID', null) === moneyRequestReport.managerID);
-    const shouldShowSettlementButton = !isSettled && !props.isSingleTransactionView && isPayer;
+    const shouldShowSettlementButton = !isSettled && !props.isSingleTransactionView && isPayer && !props.report.isWaitingOnBankAccount;
     const bankAccountRoute = ReportUtils.getBankAccountRoute(props.chatReport);
     const shouldShowPaypal = Boolean(lodashGet(props.personalDetails, [moneyRequestReport.managerID, 'payPalMeAddress']));
+    let description = `${props.translate('iou.amount')} • ${props.translate('iou.cash')}`;
+    if (isSettled) {
+        description += ` • ${props.translate('iou.settledExpensify')}`;
+    } else if (props.report.isWaitingOnBankAccount) {
+        description += ` • Waiting for credit account`;
+    }
+
     return (
         <View style={[{backgroundColor: themeColors.highlightBG}, styles.pl0]}>
             <HeaderWithBackButton
@@ -185,7 +192,7 @@ function MoneyRequestHeader(props) {
                         title={formattedTransactionAmount}
                         shouldShowTitleIcon={isSettled}
                         titleIcon={Expensicons.Checkmark}
-                        description={`${props.translate('iou.amount')} • ${props.translate('iou.cash')}${isSettled ? ` • ${props.translate('iou.settledExpensify')}` : ''}`}
+                        description={description}
                         titleStyle={styles.newKansasLarge}
                     />
                     <MenuItemWithTopDescription

src/components/ReportActionItem/IOUPreview.js

@@ -171,7 +171,13 @@ function IOUPreview(props) {
             return props.translate('iou.split');
         }
 
-        return `${props.translate('iou.cash')}${!props.iouReport.hasOutstandingIOU ? ` • ${props.translate('iou.settledExpensify')}` : ''}`;
+        let msg = props.translate('iou.cash');
+        if (props.iouReport.isWaitingOnBankAccount) {
+            msg += ` • ${props.translate('iou.pending')}`;
+        } else if (!props.iouReport.hasOutstandingIOU) {
+            msg += ` • ${props.translate('iou.settledExpensify')}`;
+        }
+        return msg;
     };
 
     const childContainer = (
@@ -206,7 +212,7 @@ function IOUPreview(props) {
                     <View style={[styles.flexRow]}>
                         <View style={[styles.flex1, styles.flexRow, styles.alignItemsCenter]}>
                             <Text style={styles.textHeadline}>{CurrencyUtils.convertToDisplayString(requestAmount, requestCurrency)}</Text>
-                            {!props.iouReport.hasOutstandingIOU && !props.isBillSplit && (
+                            {!props.iouReport.hasOutstandingIOU && !props.isBillSplit && !props.iouReport.isWaitingOnBankAccount && (
                                 <View style={styles.defaultCheckmarkWrapper}>
                                     <Icon
                                         src={Expensicons.Checkmark}

src/components/ReportActionItem/MoneyRequestAction.js

@@ -135,7 +135,7 @@ function MoneyRequestAction(props) {
     if (
         !_.isEmpty(props.iouReport) &&
         !_.isEmpty(props.reportActions) &&
-        props.chatReport.hasOutstandingIOU &&
+        (props.chatReport.hasOutstandingIOU || props.chatReport.isWaitingOnBankAccount) &&
         props.isMostRecentIOUReportAction &&
         props.action.pendingAction === CONST.RED_BRICK_ROAD_PENDING_ACTION.ADD &&
         props.network.isOffline

src/components/ReportActionItem/ReportPreview.js

@@ -25,6 +25,7 @@ import getButtonState from '../../libs/getButtonState';
 import * as IOU from '../../libs/actions/IOU';
 import refPropTypes from '../refPropTypes';
 import PressableWithoutFeedback from '../Pressable/PressableWithoutFeedback';
+import * as PersonalDetailsUtils from '../../libs/PersonalDetailsUtils';
 
 const propTypes = {
     /** All the data of the action */
@@ -100,6 +101,8 @@ function ReportPreview(props) {
     const managerName = ReportUtils.isPolicyExpenseChat(props.chatReport) ? ReportUtils.getPolicyName(props.chatReport) : ReportUtils.getDisplayNameForParticipant(managerEmail, true);
     const isCurrentUserManager = managerEmail === lodashGet(props.session, 'email', null);
     const bankAccountRoute = ReportUtils.getBankAccountRoute(props.chatReport);
+    const submitterDisplayName = PersonalDetailsUtils.getDisplayNameOrDefault(props.personalDetailsList, [props.iouReport.ownerAccountID, 'displayName'], props.iouReport.ownerEmail);
+
     return (
         <View style={[styles.chatItemMessage]}>
             {_.map(props.action.message, (message, index) => (
@@ -123,7 +126,9 @@ function ReportPreview(props) {
                         ) : (
                             <View style={[styles.flexRow]}>
                                 <Text style={[styles.chatItemMessage, styles.cursorPointer, styles.colorMuted]}>
-                                    {lodashGet(message, 'html', props.translate('iou.payerSettled', {amount: reportAmount}))}
+                                    {props.iouReport.isWaitingOnBankAccount
+                                        ? `${props.translate('iou.waitingOnBankAccount', {submitterDisplayName})} ${props.translate('common.bankAccount')}`
+                                        : lodashGet(message, 'html', props.translate('iou.payerSettled', {amount: reportAmount}))}
                                 </Text>
                             </View>
                         )}
@@ -134,7 +139,7 @@ function ReportPreview(props) {
                     />
                 </PressableWithoutFeedback>
             ))}
-            {isCurrentUserManager && !ReportUtils.isSettled(props.iouReport.reportID) && (
+            {isCurrentUserManager && !ReportUtils.isSettled(props.iouReport.reportID) && !props.chatReport.isWaitingOnBankAccount && (
                 <SettlementButton
                     currency={props.iouReport.currency}
                     policyID={props.iouReport.policyID}

src/languages/en.js

@@ -347,6 +347,7 @@ export default {
         sendMoney: 'Send money',
         pay: 'Pay',
         viewDetails: 'View details',
+        pending: 'Pending',
         settledExpensify: 'Paid',
         settledElsewhere: 'Paid elsewhere',
         settledPaypalMe: 'Paid using Paypal.me',
@@ -360,6 +361,9 @@ export default {
         payerOwesAmount: ({payer, amount}) => `${payer} owes ${amount}`,
         payerPaidAmount: ({payer, amount}) => `${payer} paid ${amount}`,
         payerSettled: ({amount}) => `paid ${amount}`,
+        payerSettledUp: ({amount}) => `settled up ${amount}`,
+        waitingOnBankAccount: ({submitterDisplayName}) => `started settling up, payment is held until ${submitterDisplayName} adds a `,
+        afterAddedBankAccount: ({submitterDisplayName}) => `after ${submitterDisplayName} added a bank account`,
         noReimbursableExpenses: 'This report has an invalid amount',
         pendingConversionMessage: "Total will update when you're back online",
         threadRequestReportName: ({formattedAmount, comment}) => `${formattedAmount} request${comment ? ` for ${comment}` : ''}`,

src/languages/es.js

@@ -346,6 +346,7 @@ export default {
         sendMoney: 'Enviar dinero',
         pay: 'Pagar',
         viewDetails: 'Ver detalles',
+        pending: 'Pendiente',
         settledExpensify: 'Pagado',
         settledElsewhere: 'Pagado de otra forma',
         settledPaypalMe: 'Pagado con PayPal.me',
@@ -359,6 +360,9 @@ export default {
         payerOwesAmount: ({payer, amount}) => `${payer} debe ${amount}`,
         payerPaidAmount: ({payer, amount}) => `${payer} pagó ${amount}`,
         payerSettled: ({amount}) => `pagó ${amount}`,
+        payerSettledUp: ({amount}) => `pagó ${amount}`,
+        waitingOnBankAccount: ({submitterDisplayName}) => `comenzó a establecerse, el pago se retiene hasta que ${submitterDisplayName} agrega una `,
+        afterAddedBankAccount: ({submitterDisplayName}) => `después ${submitterDisplayName} agregó una cuenta bancaria`,
         noReimbursableExpenses: 'El monto de este informe es inválido',
         pendingConversionMessage: 'El total se actualizará cuando estés online',
         threadRequestReportName: ({formattedAmount, comment}) => `Solicitud de ${formattedAmount}${comment ? ` para ${comment}` : ''}`,

src/libs/OptionsListUtils.js

@@ -471,6 +471,7 @@ function createOption(accountIDs, personalDetails, report, reportActions = {}, {
         result.keyForList = String(report.reportID);
         result.tooltipText = ReportUtils.getReportParticipantsTitle(report.participantAccountIDs || []);
         result.hasOutstandingIOU = report.hasOutstandingIOU;
+        result.isWaitingOnBankAccount = report.isWaitingOnBankAccount;
 
         hasMultipleParticipants = personalDetailList.length > 1 || result.isChatRoom || result.isPolicyExpenseChat;
         subtitle = ReportUtils.getChatRoomSubtitle(report);

src/libs/ReportUtils.js

@@ -233,7 +233,13 @@ function canFlagReportAction(reportAction) {
  * @returns {Boolean}
  */
 function isSettled(reportID) {
-    return !lodashGet(allReports, [`${ONYXKEYS.COLLECTION.REPORT}${reportID}`, 'hasOutstandingIOU']);
+    const report = lodashGet(allReports, `${ONYXKEYS.COLLECTION.REPORT}${reportID}`, {});
+    return !report.hasOutstandingIOU && !report.isWaitingOnBankAccount;
+}
+
+function isCurrentUserSubmitter(reportID) {
+    const report = lodashGet(allReports, `${ONYXKEYS.COLLECTION.REPORT}${reportID}`, {});
+    return report.ownerEmail === sessionEmail;
 }
 
 /**
@@ -916,7 +922,7 @@ function getMoneyRequestAction(reportAction = {}) {
  * @returns {Number}
  */
 function getMoneyRequestTotal(report, moneyRequestReports = {}) {
-    if (report.hasOutstandingIOU || isMoneyRequestReport(report)) {
+    if (report.hasOutstandingIOU || report.isWaitingOnBankAccount || isMoneyRequestReport(report)) {
         const moneyRequestReport = moneyRequestReports[`${ONYXKEYS.COLLECTION.REPORT}${report.iouReportID}`] || report;
         const total = lodashGet(moneyRequestReport, 'total', 0);
 
@@ -1811,20 +1817,16 @@ function isUnreadWithMention(report) {
  * @returns {boolean}
  */
 function hasOutstandingIOU(report, iouReports) {
-    if (!report || !report.iouReportID || _.isUndefined(report.hasOutstandingIOU)) {
-        return false;
-    }
-
-    const iouReport = iouReports && iouReports[`${ONYXKEYS.COLLECTION.REPORT}${report.iouReportID}`];
-    if (!iouReport || !iouReport.ownerAccountID) {
-        return false;
-    }
+    if (report.iouReportID) {
+        const iouReport = iouReports && iouReports[`${ONYXKEYS.COLLECTION.REPORT}${report.iouReportID}`];
+        if (!iouReport || !iouReport.ownerAccountID) {
+            return false;
+        }
 
-    if (iouReport.ownerAccountID === currentUserAccountID) {
-        return false;
+        return iouReport.ownerAccountID === currentUserAccountID ? iouReport.isWaitingOnBankAccount : iouReport.hasOutstandingIOU;
     }
 
-    return report.hasOutstandingIOU;
+    return report.ownerAccountID === currentUserAccountID ? report.isWaitingOnBankAccount : report.hasOutstandingIOU;
 }
 
 /**
@@ -1834,13 +1836,14 @@ function hasOutstandingIOU(report, iouReports) {
  * @returns {Boolean}
  */
 function isIOUOwnedByCurrentUser(report, iouReports = {}) {
-    if (report.hasOutstandingIOU) {
+    if (report.iouReportID) {
         const iouReport = iouReports[`${ONYXKEYS.COLLECTION.REPORT}${report.iouReportID}`];
         if (iouReport) {
             return iouReport.ownerAccountID === currentUserAccountID;
         }
     }
-    return false;
+
+    return report.ownerAccountID === currentUserAccountID;
 }
 
 /**
@@ -2300,6 +2303,7 @@ export {
     getIOUReportActionMessage,
     getDisplayNameForParticipant,
     isChatReport,
+    isCurrentUserSubmitter,
     isExpenseReport,
     isIOUReport,
     isTaskReport,

src/libs/SidebarUtils.js

@@ -148,31 +148,38 @@ function getOrderedReportIDs(reportIDFromRoute) {
 
     // The LHN is split into five distinct groups, and each group is sorted a little differently. The groups will ALWAYS be in this order:
     // 1. Pinned - Always sorted by reportDisplayName
-    // 2. Outstanding IOUs - Always sorted by iouReportAmount with the largest amounts at the top of the group
-    // 3. Drafts - Always sorted by reportDisplayName
-    // 4. Non-archived reports
+    // 2. Waiting on bank account - Always sorted by reportDisplayName
+    // 3. Outstanding IOUs - Always sorted by iouReportAmount with the largest amounts at the top of the group
+    // 4. Drafts - Always sorted by reportDisplayName
+    // 5. Non-archived reports
     //      - Sorted by lastVisibleActionCreated in default (most recent) view mode
     //      - Sorted by reportDisplayName in GSD (focus) view mode
-    // 5. Archived reports
+    // 6. Archived reports
     //      - Sorted by lastVisibleActionCreated in default (most recent) view mode
     //      - Sorted by reportDisplayName in GSD (focus) view mode
     let pinnedReports = [];
     let outstandingIOUReports = [];
+    let waitingOnBankAccountReports = [];
     let draftReports = [];
     let nonArchivedReports = [];
     let archivedReports = [];
-
     _.each(reportsToDisplay, (report) => {
         if (report.isPinned) {
             pinnedReports.push(report);
             return;
         }
 
-        if (report.hasOutstandingIOU && !ReportUtils.isIOUOwnedByCurrentUser(report, allReports)) {
+        const isIOUOwnedByCurrentUser = ReportUtils.isIOUOwnedByCurrentUser(report, allReports);
+        if (report.hasOutstandingIOU && !isIOUOwnedByCurrentUser) {
             outstandingIOUReports.push(report);
             return;
         }
 
+        if (report.isWaitingOnBankAccount && isIOUOwnedByCurrentUser) {
+            waitingOnBankAccountReports.push(report);
+            return;
+        }
+
         if (report.hasDraft) {
             draftReports.push(report);
             return;
@@ -193,6 +200,7 @@ function getOrderedReportIDs(reportIDFromRoute) {
 
     // Sort each group of reports accordingly
     pinnedReports = _.sortBy(pinnedReports, (report) => report.displayName.toLowerCase());
+    waitingOnBankAccountReports = _.sortBy(waitingOnBankAccountReports, (report) => report.displayName.toLowerCase());
     outstandingIOUReports = lodashOrderBy(outstandingIOUReports, ['iouReportAmount', (report) => report.displayName.toLowerCase()], ['desc', 'asc']);
     draftReports = _.sortBy(draftReports, (report) => report.displayName.toLowerCase());
     nonArchivedReports = isInDefaultMode
@@ -207,7 +215,10 @@ function getOrderedReportIDs(reportIDFromRoute) {
 
     // Now that we have all the reports grouped and sorted, they must be flattened into an array and only return the reportID.
     // The order the arrays are concatenated in matters and will determine the order that the groups are displayed in the sidebar.
-    return _.pluck([].concat(pinnedReports).concat(outstandingIOUReports).concat(draftReports).concat(nonArchivedReports).concat(archivedReports), 'reportID');
+    return _.pluck(
+        [].concat(pinnedReports).concat(waitingOnBankAccountReports).concat(outstandingIOUReports).concat(draftReports).concat(nonArchivedReports).concat(archivedReports),
+        'reportID',
+    );
 }
 
 /**
@@ -258,6 +269,7 @@ function getOptionData(reportID) {
         shouldShowSubscript: false,
         isPolicyExpenseChat: false,
         isMoneyRequestReport: false,
+        isWaitingOnBankAccount: false,
     };
 
     const participantPersonalDetailList = _.values(OptionsListUtils.getPersonalDetailsForAccountIDs(report.participantAccountIDs, personalDetails));
@@ -289,6 +301,8 @@ function getOptionData(reportID) {
     result.tooltipText = ReportUtils.getReportParticipantsTitle(report.participantAccountIDs || []);
     result.hasOutstandingIOU = report.hasOutstandingIOU;
     result.parentReportID = report.parentReportID || null;
+    result.isWaitingOnBankAccount = report.isWaitingOnBankAccount;
+
     const hasMultipleParticipants = participantPersonalDetailList.length > 1 || result.isChatRoom || result.isPolicyExpenseChat;
     const subtitle = ReportUtils.getChatRoomSubtitle(report);
 

src/libs/actions/Plaid.js

@@ -40,14 +40,16 @@ function openPlaidBankLogin(allowDebit, bankAccountID) {
  * @param {String} publicToken
  * @param {String} bankName
  * @param {Boolean} allowDebit
+ * @param {Number} bankAccountID
  */
-function openPlaidBankAccountSelector(publicToken, bankName, allowDebit) {
+function openPlaidBankAccountSelector(publicToken, bankName, allowDebit, bankAccountID) {
     API.read(
         'OpenPlaidBankAccountSelector',
         {
             publicToken,
             allowDebit,
             bank: bankName,
+            bankAccountID,
         },
         {
             optimisticData: [

src/libs/actions/ReimbursementAccount/store.js

@@ -1,6 +1,8 @@
 import Onyx from 'react-native-onyx';
 import lodashGet from 'lodash/get';
+import _ from 'underscore';
 import ONYXKEYS from '../../../ONYXKEYS';
+import BankAccount from '../../models/BankAccount';
 
 /** Reimbursement account actively being set up */
 let reimbursementAccountInSetup = {};
@@ -43,6 +45,13 @@ function getBankAccountList() {
     return bankAccountList;
 }
 
+function hasCreditBankAccount() {
+    return _.some(bankAccountList, (bankAccountJSON) => {
+        const bankAccount = new BankAccount(bankAccountJSON);
+        return bankAccount.isDefaultCredit();
+    });
+}
+
 function getCredentials() {
     return credentials;
 }
@@ -51,4 +60,4 @@ function getReimbursementAccountWorkspaceID() {
     return reimbursementAccountWorkspaceID;
 }
 
-export {getReimbursementAccountInSetup, getBankAccountList, getCredentials, getReimbursementAccountWorkspaceID};
+export {getReimbursementAccountInSetup, getBankAccountList, getCredentials, getReimbursementAccountWorkspaceID, hasCreditBankAccount};

src/pages/ReimbursementAccount/CompanyStep.js

@@ -59,10 +59,6 @@ class CompanyStep extends React.Component {
         this.defaultWebsite = lodashGet(props, 'user.isFromPublicDomain', false) ? 'https://' : `https://www.${Str.extractEmailDomain(props.session.email, '')}`;
     }
 
-    componentWillUnmount() {
-        BankAccounts.resetReimbursementAccount();
-    }
-
     /**
      * @param {Array} fieldNames
      *