Create v1 Collect workspace Bottom Up flow

src/CONST.ts

@@ -1113,6 +1113,7 @@ const CONST = {
     PAYMENT_METHODS: {
         DEBIT_CARD: 'debitCard',
         BANK_ACCOUNT: 'bankAccount',
+        BUSINESS_BANK_ACCOUNT: 'businessBankAccount',
     },
 
     PAYMENT_METHOD_ID_KEYS: {
@@ -1201,8 +1202,8 @@ const CONST = {
         TYPE: {
             FREE: 'free',
             PERSONAL: 'personal',
-            CORPORATE: 'corporate',
-            TEAM: 'team',
+            CORPORATE: 'corporate', // aka Control
+            TEAM: 'team', // aka Collect
         },
         ROLE: {
             ADMIN: 'admin',

src/components/AddPaymentMethodMenu.js

@@ -1,6 +1,7 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 import {withOnyx} from 'react-native-onyx';
+import lodashGet from 'lodash/get';
 import _ from 'underscore';
 import compose from '@libs/compose';
 import Permissions from '@libs/Permissions';
@@ -9,6 +10,9 @@ import ONYXKEYS from '@src/ONYXKEYS';
 import * as Expensicons from './Icon/Expensicons';
 import PopoverMenu from './PopoverMenu';
 import refPropTypes from './refPropTypes';
+import iouReportPropTypes from '../pages/iouReportPropTypes';
+import * as ReportUtils from '../libs/ReportUtils';
+import * as ReportActionsUtils from '../libs/ReportActionsUtils';
 import withLocalize, {withLocalizePropTypes} from './withLocalize';
 import withWindowDimensions from './withWindowDimensions';
 
@@ -19,6 +23,9 @@ const propTypes = {
     /** Callback to execute when the component closes. */
     onClose: PropTypes.func.isRequired,
 
+    /** The IOU/Expense report we are paying */
+    iouReport: iouReportPropTypes,
+
     /** Anchor position for the AddPaymentMenu. */
     anchorPosition: PropTypes.shape({
         horizontal: PropTypes.number,
@@ -37,17 +44,27 @@ const propTypes = {
     /** Popover anchor ref */
     anchorRef: refPropTypes,
 
+    /** Session info for the currently logged in user. */
+    session: PropTypes.shape({
+        /** Currently logged in user accountID */
+        accountID: PropTypes.number,
+    }),
+
     ...withLocalizePropTypes,
 };
 
 const defaultProps = {
+    iouReport: {},
     anchorPosition: {},
     anchorAlignment: {
         horizontal: CONST.MODAL.ANCHOR_ORIGIN_HORIZONTAL.LEFT,
         vertical: CONST.MODAL.ANCHOR_ORIGIN_VERTICAL.BOTTOM,
     },
     betas: [],
     anchorRef: () => {},
+    session: {
+        accountID: 0,
+    },
 };
 
 function AddPaymentMethodMenu(props) {
@@ -61,12 +78,21 @@ function AddPaymentMethodMenu(props) {
             onItemSelected={props.onClose}
             menuItems={[
                 {
-                    text: props.translate('common.bankAccount'),
+                    text: props.translate('common.personalBankAccount'),
                     icon: Expensicons.Bank,
                     onSelected: () => {
                         props.onItemSelected(CONST.PAYMENT_METHODS.BANK_ACCOUNT);
                     },
                 },
+                ...(ReportUtils.isIOUReport(this.props.iouReport) && ReportActionsUtils.hasRequestFromPayer(lodashGet(this.props.iouReport, 'reportID', 0), this.props.session.accountID)
+                    ? [
+                          {
+                              text: props.translate('common.businessBankAccount'),
+                              icon: Expensicons.Workspace,
+                              onSelected: () => props.onItemSelected(CONST.PAYMENT_METHODS.BUSINESS_BANK_ACCOUNT),
+                          },
+                      ]
+                    : []),
                 ...(Permissions.canUseWallet(props.betas)
                     ? [
                           {
@@ -93,5 +119,8 @@ export default compose(
         betas: {
             key: ONYXKEYS.BETAS,
         },
+        session: {
+            key: ONYXKEYS.SESSION,
+        },
     }),
 )(AddPaymentMethodMenu);

src/components/KYCWall/BaseKYCWall.js

@@ -97,6 +97,8 @@ class KYCWall extends React.Component {
             Navigation.navigate(this.props.addBankAccountRoute);
         } else if (paymentMethod === CONST.PAYMENT_METHODS.DEBIT_CARD) {
             Navigation.navigate(this.props.addDebitCardRoute);
+        } else if (paymentMethod === CONST.PAYMENT_METHODS.BUSINESS_BANK_ACCOUNT) {
+            Policy.startCollectFlow(this.props.iouReport);
         }
     }
 
@@ -164,6 +166,7 @@ class KYCWall extends React.Component {
             <>
                 <AddPaymentMethodMenu
                     isVisible={this.state.shouldShowAddPaymentMenu}
+                    iouReport={this.props.iouReport}
                     onClose={() => this.setState({shouldShowAddPaymentMenu: false})}
                     anchorRef={this.anchorRef}
                     anchorPosition={{

src/languages/en.ts

@@ -214,6 +214,8 @@ export default {
         more: 'More',
         debitCard: 'Debit card',
         bankAccount: 'Bank account',
+        personalBankAccount: 'Personal bank account',
+        businessBankAccount: 'Business bank account',
         join: 'Join',
         joinThread: 'Join thread',
         decline: 'Decline',

src/languages/es.ts

@@ -204,6 +204,8 @@ export default {
         more: 'Más',
         debitCard: 'Tarjeta de débito',
         bankAccount: 'Cuenta bancaria',
+        personalBankAccount: 'Personal bank account',
+        businessBankAccount: 'Business bank account',
         join: 'Unirse',
         joinThread: 'Unirse al hilo',
         decline: 'Rechazar',

src/libs/ReportActionsUtils.ts

@@ -616,6 +616,26 @@ function isNotifiableReportAction(reportAction: OnyxEntry<ReportAction>): boolea
     return actions.includes(reportAction.actionName);
 }
 
+/**
+ * Helper method to determine if the provided accountID has made a request on the specified report.
+ *
+ * @param reportID
+ * @param currentAccountID
+ * @returns
+ */
+function hasRequestFromPayer(reportID: string, currentAccountID: number): boolean {
+    if (!reportID) {
+        return false;
+    }
+
+    const reportActions = Object.values(getAllReportActions(reportID));
+    if (reportActions.length === 0) {
+        return false;
+    }
+
+    return reportActions.some((action) => action.actionName === CONST.REPORT.ACTIONS.TYPE.IOU && action.actorAccountID === currentAccountID);
+}
+
 export {
     extractLinksFromMessageHtml,
     getAllReportActions,
@@ -656,5 +676,6 @@ export {
     isReimbursementQueuedAction,
     shouldReportActionBeVisible,
     shouldReportActionBeVisibleAsLastAction,
+    hasRequestFromPayer,
     getFirstVisibleReportActionID,
 };