Merge pull request #30582 from Expensify/vit-bottomUp

Create v1 Collect workspace Bottom Up flow
Expensify · Nov 22, 2023 · 6aa94c9 · 6aa94c9
2 parents 33243f3 + 7bf4260
commit 6aa94c9
Show file tree

Hide file tree

Showing 22 changed files with 595 additions and 89 deletions.
diff --git a/src/CONST.ts b/src/CONST.ts
@@ -574,6 +574,7 @@ const CONST = {
                 CREATED: 'CREATED',
                 IOU: 'IOU',
                 MODIFIEDEXPENSE: 'MODIFIEDEXPENSE',
+                MOVED: 'MOVED',
                 REIMBURSEMENTQUEUED: 'REIMBURSEMENTQUEUED',
                 RENAMED: 'RENAMED',
                 REPORTPREVIEW: 'REPORTPREVIEW',
@@ -1188,7 +1189,8 @@ const CONST = {
 
     PAYMENT_METHODS: {
         DEBIT_CARD: 'debitCard',
-        BANK_ACCOUNT: 'bankAccount',
+        PERSONAL_BANK_ACCOUNT: 'bankAccount',
+        BUSINESS_BANK_ACCOUNT: 'businessBankAccount',
     },
 
     PAYMENT_METHOD_ID_KEYS: {
@@ -1278,7 +1280,11 @@ const CONST = {
         TYPE: {
             FREE: 'free',
             PERSONAL: 'personal',
+
+            // Often referred to as "control" workspaces
             CORPORATE: 'corporate',
+
+            // Often referred to as "collect" workspaces
             TEAM: 'team',
         },
         ROLE: {

diff --git a/src/components/AddPaymentMethodMenu.js b/src/components/AddPaymentMethodMenu.js
@@ -1,15 +1,19 @@
+import lodashGet from 'lodash/get';
 import PropTypes from 'prop-types';
 import React from 'react';
 import {withOnyx} from 'react-native-onyx';
 import _ from 'underscore';
+import useLocalize from '@hooks/useLocalize';
 import compose from '@libs/compose';
 import Permissions from '@libs/Permissions';
+import * as ReportActionsUtils from '@libs/ReportActionsUtils';
+import * as ReportUtils from '@libs/ReportUtils';
+import iouReportPropTypes from '@pages/iouReportPropTypes';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 import * as Expensicons from './Icon/Expensicons';
 import PopoverMenu from './PopoverMenu';
 import refPropTypes from './refPropTypes';
-import withLocalize, {withLocalizePropTypes} from './withLocalize';
 import withWindowDimensions from './withWindowDimensions';
 
 const propTypes = {
@@ -19,6 +23,12 @@ const propTypes = {
     /** Callback to execute when the component closes. */
     onClose: PropTypes.func.isRequired,
 
+    /** Callback to execute when the payment method is selected. */
+    onItemSelected: PropTypes.func.isRequired,
+
+    /** The IOU/Expense report we are paying */
+    iouReport: iouReportPropTypes,
+
     /** Anchor position for the AddPaymentMenu. */
     anchorPosition: PropTypes.shape({
         horizontal: PropTypes.number,
@@ -37,42 +47,63 @@ const propTypes = {
     /** Popover anchor ref */
     anchorRef: refPropTypes,
 
-    ...withLocalizePropTypes,
+    /** Session info for the currently logged in user. */
+    session: PropTypes.shape({
+        /** Currently logged in user accountID */
+        accountID: PropTypes.number,
+    }),
 };
 
 const defaultProps = {
+    iouReport: {},
     anchorPosition: {},
     anchorAlignment: {
         horizontal: CONST.MODAL.ANCHOR_ORIGIN_HORIZONTAL.LEFT,
         vertical: CONST.MODAL.ANCHOR_ORIGIN_VERTICAL.BOTTOM,
     },
     betas: [],
     anchorRef: () => {},
+    session: {},
 };
 
-function AddPaymentMethodMenu(props) {
+function AddPaymentMethodMenu({isVisible, onClose, anchorPosition, anchorAlignment, anchorRef, iouReport, onItemSelected, session, betas}) {
+    const {translate} = useLocalize();
+
     return (
         <PopoverMenu
-            isVisible={props.isVisible}
-            onClose={props.onClose}
-            anchorPosition={props.anchorPosition}
-            anchorAlignment={props.anchorAlignment}
-            anchorRef={props.anchorRef}
-            onItemSelected={props.onClose}
+            isVisible={isVisible}
+            onClose={onClose}
+            anchorPosition={anchorPosition}
+            anchorAlignment={anchorAlignment}
+            anchorRef={anchorRef}
+            onItemSelected={onClose}
             menuItems={[
-                {
-                    text: props.translate('common.bankAccount'),
-                    icon: Expensicons.Bank,
-                    onSelected: () => {
-                        props.onItemSelected(CONST.PAYMENT_METHODS.BANK_ACCOUNT);
-                    },
-                },
-                ...(Permissions.canUseWallet(props.betas)
+                ...(ReportUtils.isIOUReport(iouReport)
                     ? [
                           {
-                              text: props.translate('common.debitCard'),
+                              text: translate('common.personalBankAccount'),
+                              icon: Expensicons.Bank,
+                              onSelected: () => {
+                                  onItemSelected(CONST.PAYMENT_METHODS.PERSONAL_BANK_ACCOUNT);
+                              },
+                          },
+                      ]
+                    : []),
+                ...(!ReportActionsUtils.hasRequestFromCurrentAccount(lodashGet(iouReport, 'reportID', 0), lodashGet(session, 'accountID', 0))
+                    ? [
+                          {
+                              text: translate('common.businessBankAccount'),
+                              icon: Expensicons.Building,
+                              onSelected: () => onItemSelected(CONST.PAYMENT_METHODS.BUSINESS_BANK_ACCOUNT),
+                          },
+                      ]
+                    : []),
+                ...(Permissions.canUseWallet(betas)
+                    ? [
+                          {
+                              text: translate('common.debitCard'),
                               icon: Expensicons.CreditCard,
-                              onSelected: () => props.onItemSelected(CONST.PAYMENT_METHODS.DEBIT_CARD),
+                              onSelected: () => onItemSelected(CONST.PAYMENT_METHODS.DEBIT_CARD),
                           },
                       ]
                     : []),
@@ -88,10 +119,12 @@ AddPaymentMethodMenu.displayName = 'AddPaymentMethodMenu';
 
 export default compose(
     withWindowDimensions,
-    withLocalize,
     withOnyx({
         betas: {
             key: ONYXKEYS.BETAS,
         },
+        session: {
+            key: ONYXKEYS.SESSION,
+        },
     }),
 )(AddPaymentMethodMenu);
diff --git a/src/components/KYCWall/BaseKYCWall.js b/src/components/KYCWall/BaseKYCWall.js
@@ -10,9 +10,11 @@ import Navigation from '@libs/Navigation/Navigation';
 import * as PaymentUtils from '@libs/PaymentUtils';
 import * as ReportUtils from '@libs/ReportUtils';
 import * as PaymentMethods from '@userActions/PaymentMethods';
+import * as Policy from '@userActions/Policy';
 import * as Wallet from '@userActions/Wallet';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
+import ROUTES from '@src/ROUTES';
 import {defaultProps, propTypes} from './kycWallPropTypes';
 
 // This component allows us to block various actions by forcing the user to first add a default payment method and successfully make it through our Know Your Customer flow
@@ -93,10 +95,19 @@ class KYCWall extends React.Component {
      */
     selectPaymentMethod(paymentMethod) {
         this.props.onSelectPaymentMethod(paymentMethod);
-        if (paymentMethod === CONST.PAYMENT_METHODS.BANK_ACCOUNT) {
+        if (paymentMethod === CONST.PAYMENT_METHODS.PERSONAL_BANK_ACCOUNT) {
             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) {
+            if (ReportUtils.isIOUReport(this.props.iouReport)) {
+                const policyID = Policy.createWorkspaceFromIOUPayment(this.props.iouReport);
+
+                // Navigate to the bank account set up flow for this specific policy
+                Navigation.navigate(ROUTES.BANK_ACCOUNT_WITH_STEP_TO_OPEN.getRoute('', policyID));
+                return;
+            }
+            Navigation.navigate(this.props.addBankAccountRoute);
         }
     }
 
@@ -135,7 +146,7 @@ class KYCWall extends React.Component {
         ) {
             Log.info('[KYC Wallet] User does not have valid payment method');
             if (!this.props.shouldIncludeDebitCard) {
-                this.selectPaymentMethod(CONST.PAYMENT_METHODS.BANK_ACCOUNT);
+                this.selectPaymentMethod(CONST.PAYMENT_METHODS.PERSONAL_BANK_ACCOUNT);
                 return;
             }
             const clickedElementLocation = getClickedTargetLocation(targetElement);
@@ -164,6 +175,7 @@ class KYCWall extends React.Component {
             <>
                 <AddPaymentMethodMenu
                     isVisible={this.state.shouldShowAddPaymentMenu}
+                    iouReport={this.props.iouReport}
                     onClose={() => this.setState({shouldShowAddPaymentMenu: false})}
                     anchorRef={this.anchorRef}
                     anchorPosition={{

diff --git a/src/components/MoneyReportHeader.js b/src/components/MoneyReportHeader.js
@@ -119,7 +119,6 @@ function MoneyReportHeader({session, personalDetails, policy, chatReport, nextSt
                             onPress={(paymentType) => IOU.payMoneyRequest(paymentType, chatReport, moneyRequestReport)}
                             enablePaymentsRoute={ROUTES.ENABLE_PAYMENTS}
                             addBankAccountRoute={bankAccountRoute}
-                            shouldShowPaymentOptions
                             style={[styles.pv2]}
                             formattedAmount={formattedAmount}
                         />
@@ -164,7 +163,6 @@ function MoneyReportHeader({session, personalDetails, policy, chatReport, nextSt
                             onPress={(paymentType) => IOU.payMoneyRequest(paymentType, chatReport, moneyRequestReport)}
                             enablePaymentsRoute={ROUTES.ENABLE_PAYMENTS}
                             addBankAccountRoute={bankAccountRoute}
-                            shouldShowPaymentOptions
                             formattedAmount={formattedAmount}
                         />
                     </View>

diff --git a/src/components/MoneyRequestConfirmationList.js b/src/components/MoneyRequestConfirmationList.js
@@ -509,7 +509,6 @@ function MoneyRequestConfirmationList(props) {
                 addDebitCardRoute={ROUTES.IOU_SEND_ADD_DEBIT_CARD}
                 currency={props.iouCurrencyCode}
                 policyID={props.policyID}
-                shouldShowPaymentOptions
                 buttonSize={CONST.DROPDOWN_BUTTON_SIZE.LARGE}
                 kycWallAnchorAlignment={{
                     horizontal: CONST.MODAL.ANCHOR_ORIGIN_HORIZONTAL.LEFT,

diff --git a/src/components/ReportActionItem/ReportPreview.js b/src/components/ReportActionItem/ReportPreview.js
@@ -254,7 +254,6 @@ function ReportPreview(props) {
                                 onPress={(paymentType) => IOU.payMoneyRequest(paymentType, props.chatReport, props.iouReport)}
                                 enablePaymentsRoute={ROUTES.ENABLE_PAYMENTS}
                                 addBankAccountRoute={bankAccountRoute}
-                                shouldShowPaymentOptions
                                 style={[styles.mt3]}
                                 kycWallAnchorAlignment={{
                                     horizontal: CONST.MODAL.ANCHOR_ORIGIN_HORIZONTAL.LEFT,

diff --git a/src/components/SettlementButton.js b/src/components/SettlementButton.js
@@ -40,9 +40,6 @@ const propTypes = {
     /** The route to redirect if user does not have a payment method setup */
     enablePaymentsRoute: PropTypes.string.isRequired,
 
-    /** Should we show the payment options? */
-    shouldShowPaymentOptions: PropTypes.bool,
-
     /** The last payment method used per policy */
     nvp_lastPaymentMethod: PropTypes.objectOf(PropTypes.string),
 
@@ -97,7 +94,6 @@ const defaultProps = {
     betas: CONST.EMPTY_ARRAY,
     iouReport: CONST.EMPTY_OBJECT,
     nvp_lastPaymentMethod: CONST.EMPTY_OBJECT,
-    shouldShowPaymentOptions: false,
     style: [],
     policyID: '',
     formattedAmount: '',
@@ -130,7 +126,6 @@ function SettlementButton({
     onPress,
     pressOnEnter,
     policyID,
-    shouldShowPaymentOptions,
     style,
 }) {
     const {translate} = useLocalize();
@@ -164,42 +159,19 @@ function SettlementButton({
 
         // To achieve the one tap pay experience we need to choose the correct payment type as default,
         // if user already paid for some request or expense, let's use the last payment method or use default.
-        let paymentMethod = nvp_lastPaymentMethod[policyID] || '';
-        if (!shouldShowPaymentOptions) {
-            if (!paymentMethod) {
-                // In case the user hasn't paid a request yet, let's default to VBBA payment type in case of expense reports
-                if (isExpenseReport) {
-                    paymentMethod = CONST.IOU.PAYMENT_TYPE.VBBA;
-                } else if (canUseWallet) {
-                    // If they have Wallet set up, use that payment method as default
-                    paymentMethod = CONST.IOU.PAYMENT_TYPE.EXPENSIFY;
-                } else {
-                    paymentMethod = CONST.IOU.PAYMENT_TYPE.ELSEWHERE;
-                }
-            }
-
-            // In case of the settlement button in the report preview component, we do not show payment options and the label for Wallet and ACH type is simply "Pay".
-            return [
-                {
-                    ...paymentMethods[paymentMethod],
-                    text: paymentMethod === CONST.IOU.PAYMENT_TYPE.ELSEWHERE ? translate('iou.payElsewhere') : translate('iou.pay'),
-                },
-            ];
-        }
+        const paymentMethod = nvp_lastPaymentMethod[policyID] || '';
         if (canUseWallet) {
             buttonOptions.push(paymentMethods[CONST.IOU.PAYMENT_TYPE.EXPENSIFY]);
         }
-        if (isExpenseReport) {
-            buttonOptions.push(paymentMethods[CONST.IOU.PAYMENT_TYPE.VBBA]);
-        }
+        buttonOptions.push(paymentMethods[CONST.IOU.PAYMENT_TYPE.VBBA]);
         buttonOptions.push(paymentMethods[CONST.IOU.PAYMENT_TYPE.ELSEWHERE]);
 
         // Put the preferred payment method to the front of the array so its shown as default
         if (paymentMethod) {
             return _.sortBy(buttonOptions, (method) => (method.value === paymentMethod ? 0 : 1));
         }
         return buttonOptions;
-    }, [betas, currency, formattedAmount, iouReport, nvp_lastPaymentMethod, policyID, shouldShowPaymentOptions, translate]);
+    }, [betas, currency, formattedAmount, iouReport, nvp_lastPaymentMethod, policyID, translate]);
 
     const selectPaymentType = (event, iouPaymentType, triggerKYCFlow) => {
         if (iouPaymentType === CONST.IOU.PAYMENT_TYPE.EXPENSIFY || iouPaymentType === CONST.IOU.PAYMENT_TYPE.VBBA) {

diff --git a/src/languages/en.ts b/src/languages/en.ts
@@ -215,6 +215,8 @@ export default {
         more: 'More',
         debitCard: 'Debit card',
         bankAccount: 'Bank account',
+        personalBankAccount: 'Personal bank account',
+        businessBankAccount: 'Business bank account',
         join: 'Join',
         leave: 'Leave',
         decline: 'Decline',

diff --git a/src/languages/es.ts b/src/languages/es.ts
@@ -205,6 +205,8 @@ export default {
         more: 'Más',
         debitCard: 'Tarjeta de débito',
         bankAccount: 'Cuenta bancaria',
+        personalBankAccount: 'Cuenta bancaria personal',
+        businessBankAccount: 'Cuenta bancaria comercial',
         join: 'Unirse',
         leave: 'Salir',
         decline: 'Rechazar',

diff --git a/src/libs/PaymentUtils.ts b/src/libs/PaymentUtils.ts
@@ -26,7 +26,7 @@ function hasExpensifyPaymentMethod(fundList: Record<string, Fund>, bankAccountLi
 
 function getPaymentMethodDescription(accountType: AccountType, account: BankAccount['accountData'] | Fund['accountData']): string {
     if (account) {
-        if (accountType === CONST.PAYMENT_METHODS.BANK_ACCOUNT && 'accountNumber' in account) {
+        if (accountType === CONST.PAYMENT_METHODS.PERSONAL_BANK_ACCOUNT && 'accountNumber' in account) {
             return `${Localize.translateLocal('paymentMethodList.accountLastFour')} ${account.accountNumber?.slice(-4)}`;
         }
         if (accountType === CONST.PAYMENT_METHODS.DEBIT_CARD && 'cardNumber' in account) {

diff --git a/src/libs/ReportActionsUtils.ts b/src/libs/ReportActionsUtils.ts
@@ -69,7 +69,7 @@ function isDeletedParentAction(reportAction: OnyxEntry<ReportAction>): boolean {
 }
 
 function isReversedTransaction(reportAction: OnyxEntry<ReportAction>) {
-    return (reportAction?.message?.[0].isReversedTransaction ?? false) && (reportAction?.childVisibleActionCount ?? 0) > 0;
+    return (reportAction?.message?.[0]?.isReversedTransaction ?? false) && (reportAction?.childVisibleActionCount ?? 0) > 0;
 }
 
 function isPendingRemove(reportAction: OnyxEntry<ReportAction>): boolean {
@@ -631,6 +631,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 hasRequestFromCurrentAccount(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,
@@ -671,6 +691,7 @@ export {
     isReimbursementQueuedAction,
     shouldReportActionBeVisible,
     shouldReportActionBeVisibleAsLastAction,
+    hasRequestFromCurrentAccount,
     getFirstVisibleReportActionID,
     isChannelLogMemberAction,
 };