Merge pull request Expensify#37174 from brandonhenry/36301-clean-up-p…

…ayment-options

Consolidate options on settlement "Pay" button

src/components/ButtonWithDropdownMenu/index.tsx

@@ -65,7 +65,7 @@ function ButtonWithDropdownMenu<IValueType>({
         if ('measureInWindow' in dropdownAnchor.current) {
             dropdownAnchor.current.measureInWindow((x, y, w, h) => {
                 setPopoverAnchorPosition({
-                    horizontal: x + w,
+                    horizontal: x + w + h,
                     vertical:
                         anchorAlignment.vertical === CONST.MODAL.ANCHOR_ORIGIN_VERTICAL.TOP
                             ? y + h + CONST.MODAL.POPOVER_MENU_PADDING // if vertical anchorAlignment is TOP, menu will open below the button and we need to add the height of button and padding

src/components/ButtonWithDropdownMenu/types.ts

@@ -1,12 +1,13 @@
 import type {RefObject} from 'react';
 import type {GestureResponderEvent, StyleProp, View, ViewStyle} from 'react-native';
 import type {ValueOf} from 'type-fest';
+import type {PaymentMethodType} from '@components/KYCWall/types';
 import type CONST from '@src/CONST';
 import type AnchorAlignment from '@src/types/utils/AnchorAlignment';
 import type DeepValueOf from '@src/types/utils/DeepValueOf';
 import type IconAsset from '@src/types/utils/IconAsset';
 
-type PaymentType = DeepValueOf<typeof CONST.IOU.PAYMENT_TYPE | typeof CONST.IOU.REPORT_ACTION_TYPE>;
+type PaymentType = DeepValueOf<typeof CONST.IOU.PAYMENT_TYPE | typeof CONST.IOU.REPORT_ACTION_TYPE | PaymentMethodType>;
 
 type WorkspaceMemberBulkActionType = DeepValueOf<typeof CONST.POLICY.MEMBERS_BULK_ACTION_TYPES>;
 

src/components/KYCWall/BaseKYCWall.tsx

@@ -1,16 +1,12 @@
-import React, {useCallback, useEffect, useRef, useState} from 'react';
-import {Dimensions} from 'react-native';
-import type {EmitterSubscription, GestureResponderEvent, View} from 'react-native';
+import React, {useCallback, useRef} from 'react';
+import type {GestureResponderEvent, View} from 'react-native';
 import {withOnyx} from 'react-native-onyx';
 import type {OnyxEntry} from 'react-native-onyx';
-import AddPaymentMethodMenu from '@components/AddPaymentMethodMenu';
 import * as BankAccounts from '@libs/actions/BankAccounts';
-import getClickedTargetLocation from '@libs/getClickedTargetLocation';
 import Log from '@libs/Log';
 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/Policy';
 import * as Wallet from '@userActions/Wallet';
 import CONST from '@src/CONST';
@@ -19,10 +15,7 @@ import ROUTES from '@src/ROUTES';
 import type {BankAccountList, FundList, ReimbursementAccount, UserWallet, WalletTerms} from '@src/types/onyx';
 import type {PaymentMethodType} from '@src/types/onyx/OriginalMessage';
 import viewRef from '@src/types/utils/viewRef';
-import type {AnchorPosition, DomRect, KYCWallProps, PaymentMethod} from './types';
-
-// This sets the Horizontal anchor position offset for POPOVER MENU.
-const POPOVER_MENU_ANCHOR_POSITION_HORIZONTAL_OFFSET = 20;
+import type {KYCWallProps, PaymentMethod} from './types';
 
 type BaseKYCWallOnyxProps = {
     /** The user's wallet */
@@ -49,10 +42,6 @@ type BaseKYCWallProps = KYCWallProps & BaseKYCWallOnyxProps;
 function KYCWall({
     addBankAccountRoute,
     addDebitCardRoute,
-    anchorAlignment = {
-        horizontal: CONST.MODAL.ANCHOR_ORIGIN_HORIZONTAL.LEFT,
-        vertical: CONST.MODAL.ANCHOR_ORIGIN_VERTICAL.BOTTOM,
-    },
     bankAccountList = {},
     chatReportID = '',
     children,
@@ -63,60 +52,13 @@ function KYCWall({
     onSuccessfulKYC,
     reimbursementAccount,
     shouldIncludeDebitCard = true,
-    shouldListenForResize = false,
     source,
     userWallet,
     walletTerms,
-    shouldShowPersonalBankAccountOption = false,
 }: BaseKYCWallProps) {
     const anchorRef = useRef<HTMLDivElement | View>(null);
     const transferBalanceButtonRef = useRef<HTMLDivElement | View | null>(null);
 
-    const [shouldShowAddPaymentMenu, setShouldShowAddPaymentMenu] = useState(false);
-
-    const [anchorPosition, setAnchorPosition] = useState({
-        anchorPositionVertical: 0,
-        anchorPositionHorizontal: 0,
-    });
-
-    const getAnchorPosition = useCallback(
-        (domRect: DomRect): AnchorPosition => {
-            if (anchorAlignment.vertical === CONST.MODAL.ANCHOR_ORIGIN_VERTICAL.TOP) {
-                return {
-                    anchorPositionVertical: domRect.top + domRect.height + CONST.MODAL.POPOVER_MENU_PADDING,
-                    anchorPositionHorizontal: domRect.left + POPOVER_MENU_ANCHOR_POSITION_HORIZONTAL_OFFSET,
-                };
-            }
-
-            return {
-                anchorPositionVertical: domRect.top - CONST.MODAL.POPOVER_MENU_PADDING,
-                anchorPositionHorizontal: domRect.left,
-            };
-        },
-        [anchorAlignment.vertical],
-    );
-
-    /**
-     * Set position of the transfer payment menu
-     */
-    const setPositionAddPaymentMenu = ({anchorPositionVertical, anchorPositionHorizontal}: AnchorPosition) => {
-        setAnchorPosition({
-            anchorPositionVertical,
-            anchorPositionHorizontal,
-        });
-    };
-
-    const setMenuPosition = useCallback(() => {
-        if (!transferBalanceButtonRef.current) {
-            return;
-        }
-
-        const buttonPosition = getClickedTargetLocation(transferBalanceButtonRef.current as HTMLDivElement);
-        const position = getAnchorPosition(buttonPosition);
-
-        setPositionAddPaymentMenu(position);
-    }, [getAnchorPosition]);
-
     const selectPaymentMethod = useCallback(
         (paymentMethod: PaymentMethod) => {
             onSelectPaymentMethod(paymentMethod);
@@ -159,11 +101,6 @@ function KYCWall({
              */
             Wallet.setKYCWallSource(source, chatReportID);
 
-            if (shouldShowAddPaymentMenu) {
-                setShouldShowAddPaymentMenu(false);
-                return;
-            }
-
             // Use event target as fallback if anchorRef is null for safety
             const targetElement = anchorRef.current ?? (event?.currentTarget as HTMLDivElement);
 
@@ -184,11 +121,19 @@ function KYCWall({
                     return;
                 }
 
-                const clickedElementLocation = getClickedTargetLocation(targetElement as HTMLDivElement);
-                const position = getAnchorPosition(clickedElementLocation);
-
-                setPositionAddPaymentMenu(position);
-                setShouldShowAddPaymentMenu(true);
+                switch (iouPaymentType) {
+                    case CONST.PAYMENT_METHODS.PERSONAL_BANK_ACCOUNT:
+                        selectPaymentMethod(CONST.PAYMENT_METHODS.PERSONAL_BANK_ACCOUNT);
+                        break;
+                    case CONST.PAYMENT_METHODS.DEBIT_CARD:
+                        selectPaymentMethod(CONST.PAYMENT_METHODS.DEBIT_CARD);
+                        break;
+                    case CONST.PAYMENT_METHODS.BUSINESS_BANK_ACCOUNT:
+                        selectPaymentMethod(CONST.PAYMENT_METHODS.BUSINESS_BANK_ACCOUNT);
+                        break;
+                    default:
+                        break;
+                }
 
                 return;
             }
@@ -214,58 +159,18 @@ function KYCWall({
             chatReportID,
             enablePaymentsRoute,
             fundList,
-            getAnchorPosition,
             iouReport,
             onSuccessfulKYC,
             reimbursementAccount?.achData?.state,
             selectPaymentMethod,
             shouldIncludeDebitCard,
-            shouldShowAddPaymentMenu,
             source,
             userWallet?.tierName,
             walletTerms?.source,
         ],
     );
 
-    useEffect(() => {
-        let dimensionsSubscription: EmitterSubscription | null = null;
-
-        PaymentMethods.kycWallRef.current = {continueAction};
-
-        if (shouldListenForResize) {
-            dimensionsSubscription = Dimensions.addEventListener('change', setMenuPosition);
-        }
-
-        return () => {
-            if (shouldListenForResize && dimensionsSubscription) {
-                dimensionsSubscription.remove();
-            }
-
-            PaymentMethods.kycWallRef.current = null;
-        };
-    }, [chatReportID, setMenuPosition, shouldListenForResize, continueAction]);
-
-    return (
-        <>
-            <AddPaymentMethodMenu
-                isVisible={shouldShowAddPaymentMenu}
-                iouReport={iouReport}
-                onClose={() => setShouldShowAddPaymentMenu(false)}
-                anchorRef={anchorRef}
-                anchorPosition={{
-                    vertical: anchorPosition.anchorPositionVertical,
-                    horizontal: anchorPosition.anchorPositionHorizontal,
-                }}
-                anchorAlignment={anchorAlignment}
-                onItemSelected={(item: PaymentMethod) => {
-                    setShouldShowAddPaymentMenu(false);
-                    selectPaymentMethod(item);
-                }}
-                shouldShowPersonalBankAccountOption={shouldShowPersonalBankAccountOption}
-            />
-            {children(continueAction, viewRef(anchorRef))}
-        </>
-    );
+    return <>{children(continueAction, viewRef(anchorRef))}</>;
 }
 
 KYCWall.displayName = 'BaseKYCWall';

src/components/MoneyRequestConfirmationList.tsx

@@ -839,7 +839,6 @@ function MoneyRequestConfirmationList({
                 onPress={confirm}
                 enablePaymentsRoute={ROUTES.IOU_SEND_ENABLE_PAYMENTS}
                 addBankAccountRoute={bankAccountRoute}
-                shouldShowPersonalBankAccountOption
                 currency={iouCurrencyCode}
                 policyID={policyID}
                 buttonSize={CONST.DROPDOWN_BUTTON_SIZE.LARGE}

src/components/SettlementButton.tsx

@@ -105,9 +105,6 @@ type SettlementButtonProps = SettlementButtonOnyxProps & {
     /** The anchor alignment of the popover menu for KYC wall popover */
     kycWallAnchorAlignment?: AnchorAlignment;
 
-    /** Whether the personal bank account option should be shown */
-    shouldShowPersonalBankAccountOption?: boolean;
-
     /** The priority to assign the enter key event listener to buttons. 0 is the highest priority. */
     enterKeyEventListenerPriority?: number;
 
@@ -147,7 +144,6 @@ function SettlementButton({
     shouldShowApproveButton = false,
     shouldDisableApproveButton = false,
     style,
-    shouldShowPersonalBankAccountOption = false,
     enterKeyEventListenerPriority = 0,
     confirmApproval,
     policy,
@@ -169,25 +165,35 @@ function SettlementButton({
     const shouldShowPaywithExpensifyOption = !isPaidGroupPolicy || (!shouldHidePaymentOptions && ReportUtils.isPayer(session, iouReport));
     const shouldShowPayElsewhereOption = (!isPaidGroupPolicy || policy?.reimbursementChoice === CONST.POLICY.REIMBURSEMENT_CHOICES.REIMBURSEMENT_MANUAL) && !isInvoiceReport;
     const paymentButtonOptions = useMemo(() => {
-        const buttonOptions = [];
         const isExpenseReport = ReportUtils.isExpenseReport(iouReport);
         const paymentMethods = {
-            [CONST.IOU.PAYMENT_TYPE.EXPENSIFY]: {
-                text: translate('iou.settleExpensify', {formattedAmount}),
-                icon: Expensicons.Wallet,
-                value: CONST.IOU.PAYMENT_TYPE.EXPENSIFY,
-            },
             [CONST.IOU.PAYMENT_TYPE.VBBA]: {
                 text: translate('iou.settleExpensify', {formattedAmount}),
                 icon: Expensicons.Wallet,
                 value: CONST.IOU.PAYMENT_TYPE.VBBA,
             },
+            [CONST.PAYMENT_METHODS.PERSONAL_BANK_ACCOUNT]: {
+                text: translate('iou.settlePersonalBank', {formattedAmount}),
+                icon: Expensicons.Bank,
+                value: CONST.PAYMENT_METHODS.PERSONAL_BANK_ACCOUNT,
+            },
+            [CONST.PAYMENT_METHODS.BUSINESS_BANK_ACCOUNT]: {
+                text: translate('iou.settleBusinessBank', {formattedAmount}),
+                icon: Expensicons.Bank,
+                value: CONST.PAYMENT_METHODS.BUSINESS_BANK_ACCOUNT,
+            },
+            [CONST.PAYMENT_METHODS.DEBIT_CARD]: {
+                text: translate('iou.settleDebitCard', {formattedAmount}),
+                icon: Expensicons.CreditCard,
+                value: CONST.PAYMENT_METHODS.DEBIT_CARD,
+            },
             [CONST.IOU.PAYMENT_TYPE.ELSEWHERE]: {
                 text: translate('iou.payElsewhere', {formattedAmount}),
                 icon: Expensicons.Cash,
                 value: CONST.IOU.PAYMENT_TYPE.ELSEWHERE,
             },
         };
+        const buttonOptions = [];
         const approveButtonOption = {
             text: translate('iou.approve'),
             icon: Expensicons.ThumbsUp,
@@ -205,12 +211,10 @@ function SettlementButton({
         // If the user has previously chosen a specific payment option or paid for some expense,
         // let's use the last payment method or use default.
         const paymentMethod = nvpLastPaymentMethod?.[policyID] ?? '-1';
-        if (canUseWallet) {
-            buttonOptions.push(paymentMethods[CONST.IOU.PAYMENT_TYPE.EXPENSIFY]);
-        }
-        if (isExpenseReport && shouldShowPaywithExpensifyOption) {
-            buttonOptions.push(paymentMethods[CONST.IOU.PAYMENT_TYPE.VBBA]);
+        if (canUseWallet || (isExpenseReport && shouldShowPaywithExpensifyOption)) {
+            buttonOptions.push(paymentMethods[CONST.PAYMENT_METHODS.BUSINESS_BANK_ACCOUNT]);
         }
+
         if (shouldShowPayElsewhereOption) {
             buttonOptions.push(paymentMethods[CONST.IOU.PAYMENT_TYPE.ELSEWHERE]);
         }
@@ -270,7 +274,12 @@ function SettlementButton({
             return;
         }
 
-        if (iouPaymentType === CONST.IOU.PAYMENT_TYPE.EXPENSIFY || iouPaymentType === CONST.IOU.PAYMENT_TYPE.VBBA) {
+        if (
+            iouPaymentType === CONST.IOU.PAYMENT_TYPE.VBBA ||
+            iouPaymentType === CONST.PAYMENT_METHODS.BUSINESS_BANK_ACCOUNT ||
+            iouPaymentType === CONST.PAYMENT_METHODS.PERSONAL_BANK_ACCOUNT ||
+            iouPaymentType === CONST.PAYMENT_METHODS.DEBIT_CARD
+        ) {
             triggerKYCFlow(event, iouPaymentType);
             BankAccounts.setPersonalBankAccountContinueKYCOnSuccess(ROUTES.ENABLE_PAYMENTS);
             return;
@@ -304,18 +313,14 @@ function SettlementButton({
             chatReportID={chatReportID}
             iouReport={iouReport}
             anchorAlignment={kycWallAnchorAlignment}
-            shouldShowPersonalBankAccountOption={shouldShowPersonalBankAccountOption}
         >
             {(triggerKYCFlow, buttonRef) => (
                 <ButtonWithDropdownMenu<PaymentType>
                     success
                     onOptionsMenuShow={onPaymentOptionsShow}
                     onOptionsMenuHide={onPaymentOptionsHide}
                     buttonRef={buttonRef}
-                    shouldAlwaysShowDropdownMenu={isInvoiceReport}
-                    customText={isInvoiceReport ? translate('iou.settlePayment', {formattedAmount}) : undefined}
                     menuHeaderText={isInvoiceReport ? translate('workspace.invoices.paymentMethods.chooseInvoiceMethod') : undefined}
-                    isSplitButton={!isInvoiceReport}
                     isDisabled={isDisabled}
                     isLoading={isLoading}
                     onPress={(event, iouPaymentType) => selectPaymentType(event, iouPaymentType, triggerKYCFlow)}

src/languages/en.ts

@@ -772,6 +772,9 @@ export default {
         settlePayment: ({formattedAmount}: SettleExpensifyCardParams) => `Pay ${formattedAmount}`,
         settleBusiness: ({formattedAmount}: SettleExpensifyCardParams) => (formattedAmount ? `Pay ${formattedAmount} as a business` : `Pay as a business`),
         payElsewhere: ({formattedAmount}: SettleExpensifyCardParams) => (formattedAmount ? `Pay ${formattedAmount} elsewhere` : `Pay elsewhere`),
+        settlePersonalBank: ({formattedAmount}: SettleExpensifyCardParams) => (formattedAmount ? `Pay ${formattedAmount} with personal bank account` : `Pay with personal bank account`),
+        settleBusinessBank: ({formattedAmount}: SettleExpensifyCardParams) => (formattedAmount ? `Pay ${formattedAmount} with business bank account` : `Pay with business bank account`),
+        settleDebitCard: ({formattedAmount}: SettleExpensifyCardParams) => (formattedAmount ? `Pay ${formattedAmount} with debit card` : `Pay with debit card`),
         nextStep: 'Next steps',
         finished: 'Finished',
         sendInvoice: ({amount}: RequestAmountParams) => `Send ${amount} invoice`,

src/languages/es.ts

@@ -765,6 +765,11 @@ export default {
         settlePayment: ({formattedAmount}: SettleExpensifyCardParams) => `Pagar ${formattedAmount}`,
         settleBusiness: ({formattedAmount}: SettleExpensifyCardParams) => (formattedAmount ? `Pagar ${formattedAmount} como negocio` : `Pagar como empresa`),
         payElsewhere: ({formattedAmount}: SettleExpensifyCardParams) => (formattedAmount ? `Pagar ${formattedAmount} de otra forma` : `Pagar de otra forma`),
+        settlePersonalBank: ({formattedAmount}: SettleExpensifyCardParams) =>
+            formattedAmount ? `Pagar ${formattedAmount} con cuenta bancaria personal` : `Pagar con cuenta bancaria personal`,
+        settleBusinessBank: ({formattedAmount}: SettleExpensifyCardParams) =>
+            formattedAmount ? `Pagar ${formattedAmount} con cuenta bancaria comercial` : `Pagar con cuenta bancaria comercial`,
+        settleDebitCard: ({formattedAmount}: SettleExpensifyCardParams) => (formattedAmount ? `Pagar ${formattedAmount} con tarjeta de débito` : `Pagar con tarjeta de débito`),
         nextStep: 'Pasos siguientes',
         finished: 'Finalizado',
         sendInvoice: ({amount}: RequestAmountParams) => `Enviar factura de ${amount}`,

src/languages/types.ts

@@ -103,6 +103,7 @@ type RequestCountParams = {
 
 type SettleExpensifyCardParams = {
     formattedAmount: string;
+    available?: boolean;
 };
 
 type RequestAmountParams = {amount: string};

src/pages/iou/MoneyRequestAmountForm.tsx

@@ -323,7 +323,6 @@ function MoneyRequestAmountForm(
                                 horizontal: CONST.MODAL.ANCHOR_ORIGIN_HORIZONTAL.RIGHT,
                                 vertical: CONST.MODAL.ANCHOR_ORIGIN_VERTICAL.BOTTOM,
                             }}
-                            shouldShowPersonalBankAccountOption
                             enterKeyEventListenerPriority={1}
                         />
                     ) : (

src/types/onyx/OriginalMessage.ts

@@ -8,7 +8,7 @@ import type ReportActionName from './ReportActionName';
 type JoinWorkspaceResolution = ValueOf<typeof CONST.REPORT.ACTIONABLE_MENTION_JOIN_WORKSPACE_RESOLUTION>;
 
 /** Types of payments methods */
-type PaymentMethodType = DeepValueOf<typeof CONST.IOU.PAYMENT_TYPE | typeof CONST.IOU.REPORT_ACTION_TYPE | typeof CONST.WALLET.TRANSFER_METHOD_TYPE>;
+type PaymentMethodType = DeepValueOf<typeof CONST.IOU.PAYMENT_TYPE | typeof CONST.IOU.REPORT_ACTION_TYPE | typeof CONST.WALLET.TRANSFER_METHOD_TYPE | typeof CONST.PAYMENT_METHODS>;
 
 /** Types of sources of original message */
 type OriginalMessageSource = 'Chronos' | 'email' | 'ios' | 'android' | 'web' | '';