Replace ProcessMoneyReportHoldMenu with useHoldMenuModal in SelectionToolbar and report preview

src/components/MoneyReportHeaderModals.tsx

@@ -9,10 +9,9 @@ import useReportPDFDownloadModal from '@hooks/useReportPDFDownloadModal';
 import useTransactionsAndViolationsForReport from '@hooks/useTransactionsAndViolationsForReport';
 
 import getNonEmptyStringOnyxID from '@libs/getNonEmptyStringOnyxID';
-import getPlatform from '@libs/getPlatform';
-import {canIOUBePaid as canIOUBePaidAction, getNonHeldAndFullAmount, hasOnlyHeldExpenses as hasOnlyHeldExpensesReportUtils} from '@libs/ReportUtils';
+import {getHoldMenuAmounts} from '@libs/HoldMenuUtils';
+import {canIOUBePaid as canIOUBePaidAction} from '@libs/ReportUtils';
 
-import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 
 import type {ReactNode} from 'react';
@@ -58,41 +57,26 @@ function MoneyReportHeaderModalsContent({reportID, children}: MoneyReportHeaderM
     const onlyShowPayElsewhere =
         !canIOUBePaid && canIOUBePaidAction(moneyRequestReport, chatReport, policy, bankAccountList, currentUserLogin ?? '', accountID, undefined, true, isChatReportArchived);
     const shouldShowPayButton = canIOUBePaid || onlyShowPayElsewhere;
-    const {nonHeldAmount, fullAmount, hasValidNonHeldAmount} = getNonHeldAndFullAmount(moneyRequestReport, shouldShowPayButton, transactions, convertToDisplayString);
-    const hasOnlyHeldExpenses = hasOnlyHeldExpensesReportUtils(transactions);
-    const transactionIDs = transactions.map((t) => t.transactionID);
 
     // Imperative modals
     const {showHoldMenu} = useHoldMenuModal();
     const {showOfflineModal, showDownloadErrorModal} = useAlertModals();
     const {showReportPDFDownloadModal} = useReportPDFDownloadModal();
     const {openHoldEducational, openRejectModal} = useMoneyReportHeaderEducationalModals(moneyRequestReport?.reportID);
 
-    const openHoldMenu = ({requestType, paymentType, methodID, onConfirm}: HoldMenuParams): Promise<void> => {
-        const open = () =>
+    // Wait one frame so the current touch animation finishes before the modal opens
+    const openHoldMenu = ({requestType, paymentType, methodID, onConfirm}: HoldMenuParams) => {
+        requestAnimationFrame(() => {
             showHoldMenu({
                 reportID: moneyRequestReport?.reportID,
                 chatReportID: chatReport?.reportID,
                 requestType,
                 paymentType,
                 methodID,
-                nonHeldAmount: !hasOnlyHeldExpenses && hasValidNonHeldAmount ? nonHeldAmount : undefined,
-                fullAmount,
-                hasNonHeldExpenses: !hasOnlyHeldExpenses,
-                transactionCount: transactionIDs.length,
+                ...getHoldMenuAmounts(moneyRequestReport, shouldShowPayButton, transactions, convertToDisplayString),
                 onConfirm,
             });
-
-        // On iOS, defer by one frame so the current touch animation finishes before the modal opens
-        if (getPlatform() === CONST.PLATFORM.IOS) {
-            return new Promise<void>((resolve) => {
-                requestAnimationFrame(() => {
-                    open().then(() => resolve());
-                });
-            });
-        }
-
-        return open().then(() => {});
+        });
     };
 
     const contextValue = {

src/components/MoneyReportHeaderModalsContext.tsx

@@ -15,7 +15,7 @@ type HoldMenuParams = {
 };
 
 type MoneyReportHeaderModalsContextValue = {
-    openHoldMenu: (params: HoldMenuParams) => Promise<void>;
+    openHoldMenu: (params: HoldMenuParams) => void;
     /** Resolves once the PDF download modal has finished hiding, with `CLOSE` if it was dismissed while the PDF was still generating */
     openPDFDownload: () => Promise<ModalStateChangePayload | undefined>;
     openHoldEducational: () => void;
@@ -25,7 +25,7 @@ type MoneyReportHeaderModalsContextValue = {
 };
 
 const defaultValue: MoneyReportHeaderModalsContextValue = {
-    openHoldMenu: () => Promise.resolve(),
+    openHoldMenu: () => {},
     openPDFDownload: () => Promise.resolve(undefined),
     openHoldEducational: () => {},
     openRejectModal: () => {},

src/components/MoneyRequestReportView/SelectionToolbar/index.tsx

@@ -2,7 +2,6 @@ import {useDelegateNoAccessActions, useDelegateNoAccessState} from '@components/
 import {ModalActions} from '@components/Modal/Global/ModalContext';
 import useShouldShowReportBulkActionBar from '@components/MoneyRequestReportView/useShouldShowReportBulkActionBar';
 import OfflineWithFeedback from '@components/OfflineWithFeedback';
-import ProcessMoneyReportHoldMenu from '@components/ProcessMoneyReportHoldMenu';
 import {ReportSubmitToPopoverAnchor} from '@components/ReportSubmitToPopoverAnchor';
 import BulkDuplicateHandler from '@components/Search/BulkDuplicateHandler';
 import {useSearchSelectionActions, useSearchSelectionContext} from '@components/Search/SearchContext';
@@ -192,16 +191,6 @@ function SelectionToolbar({reportID, transactions, reportActions}: SelectionTool
         handleWorkspaceSelected,
         primaryAction,
         kycWallRef,
-        isHoldMenuVisible,
-        requestType,
-        paymentType,
-        selectedVBBAToPayFromHoldMenu,
-        handleHoldMenuClose,
-        handleHoldMenuConfirm,
-        hasOnlyHeldExpenses,
-        nonHeldAmount,
-        fullAmount,
-        hasValidNonHeldAmount,
     } = useSelectionModeReportActions({
         report,
         chatReport,
@@ -316,21 +305,6 @@ function SelectionToolbar({reportID, transactions, reportActions}: SelectionTool
                     onClearSelection={() => clearSelectedTransactions(true)}
                 />
             )}
-            {isHoldMenuVisible && requestType !== undefined && (
-                <ProcessMoneyReportHoldMenu
-                    nonHeldAmount={!hasOnlyHeldExpenses && hasValidNonHeldAmount ? nonHeldAmount : undefined}
-                    fullAmount={fullAmount}
-                    onClose={handleHoldMenuClose}
-                    isVisible={isHoldMenuVisible}
-                    paymentType={paymentType}
-                    methodID={paymentType === CONST.IOU.PAYMENT_TYPE.VBBA ? selectedVBBAToPayFromHoldMenu : undefined}
-                    chatReport={chatReport}
-                    moneyRequestReport={report}
-                    hasNonHeldExpenses={!hasOnlyHeldExpenses}
-                    onConfirm={handleHoldMenuConfirm}
-                    transactionCount={transactions.length}
-                />
-            )}
         </>
     );
 }

src/components/ReportActionItem/MoneyRequestReportPreview/MoneyRequestReportPreviewBody.tsx

@@ -26,7 +26,6 @@ import {View} from 'react-native';
 import {useReportPreviewData, useReportPreviewUIState} from './MoneyRequestReportPreviewContext';
 import ReportPreviewActionButton from './ReportPreviewActionButton';
 import ReportPreviewHeader from './ReportPreviewHeader';
-import ReportPreviewHoldMenu from './ReportPreviewHoldMenu';
 import ReportPreviewTotal from './ReportPreviewTotal';
 import TransactionReportCarousel from './TransactionReportCarousel';
 
@@ -55,7 +54,7 @@ type MoneyRequestReportPreviewBodyProps = ForwardedFSClassProps & {
 
 /**
  * The layout body of the money request report preview: the pressable card that composes the header, carousel, action
- * button + total, and the hold menu. It owns no data — everything comes from the context slices via `useX()` hooks,
+ * button and total. It owns no data — everything comes from the context slices via `useX()` hooks,
  * except the pure layout wiring passed as props.
  */
 function MoneyRequestReportPreviewBody({
@@ -152,7 +151,6 @@ function MoneyRequestReportPreviewBody({
                         </View>
                     </PressableWithoutFeedback>
                 </View>
-                <ReportPreviewHoldMenu />
             </OfflineWithFeedback>
         </View>
     );

src/components/ReportActionItem/MoneyRequestReportPreview/MoneyRequestReportPreviewContext.ts

@@ -1,6 +1,5 @@
 import type CONST from '@src/CONST';
 import type {PersonalDetails, Policy, Report, ReportAction, Transaction, TransactionViolations} from '@src/types/onyx';
-import type {PaymentMethodType} from '@src/types/onyx/OriginalMessage';
 import type {ConnectionName} from '@src/types/onyx/Policy';
 
 import type {Context} from 'react';
@@ -71,8 +70,6 @@ type ReportPreviewActionState = {
 
 type ReportPreviewActions = {
     openReportFromPreview: () => void;
-    onHoldMenuOpen: (paymentType?: PaymentMethodType, canPay?: boolean, methodID?: number) => void;
-    onHoldMenuClose: () => void;
     onPaymentOptionsShow?: () => void;
     onPaymentOptionsHide?: () => void;
     stopAnimation: () => void;
@@ -83,12 +80,6 @@ type ReportPreviewActions = {
     goToNext: () => void;
 };
 
-type ReportPreviewHoldMenuState = {
-    paymentType: PaymentMethodType | undefined;
-    canPay: boolean;
-    methodID: number | undefined;
-};
-
 type ReportPreviewMeta = {
     setCarouselRef: ReturnType<typeof useReportPreviewCarousel>['setCarouselRef'];
 };
@@ -101,7 +92,6 @@ const ReportPreviewUIStateContext = createContext<ReportPreviewUIState | undefin
 const ReportPreviewCarouselListContext = createContext<ReportPreviewCarouselList | undefined>(undefined);
 const ReportPreviewActionStateContext = createContext<ReportPreviewActionState | undefined>(undefined);
 const ReportPreviewActionsContext = createContext<ReportPreviewActions | undefined>(undefined);
-const ReportPreviewHoldMenuContext = createContext<ReportPreviewHoldMenuState | null | undefined>(undefined);
 const ReportPreviewMetaContext = createContext<ReportPreviewMeta | undefined>(undefined);
 
 function useSliceContext<T>(context: Context<T | undefined>, name: string): T {
@@ -120,13 +110,6 @@ const useReportPreviewUIState = () => useSliceContext(ReportPreviewUIStateContex
 const useReportPreviewCarouselList = () => useSliceContext(ReportPreviewCarouselListContext, 'useReportPreviewCarouselList');
 const useReportPreviewActionState = () => useSliceContext(ReportPreviewActionStateContext, 'useReportPreviewActionState');
 const useReportPreviewActions = () => useSliceContext(ReportPreviewActionsContext, 'useReportPreviewActions');
-const useReportPreviewHoldMenu = () => {
-    const value = useContext(ReportPreviewHoldMenuContext);
-    if (value === undefined) {
-        throw new Error('useReportPreviewHoldMenu must be used within a MoneyRequestReportPreviewProvider');
-    }
-    return value;
-};
 const useReportPreviewMeta = () => useSliceContext(ReportPreviewMetaContext, 'useReportPreviewMeta');
 
 export {
@@ -138,7 +121,6 @@ export {
     ReportPreviewCarouselListContext,
     ReportPreviewActionStateContext,
     ReportPreviewActionsContext,
-    ReportPreviewHoldMenuContext,
     ReportPreviewMetaContext,
     useReportPreviewCarouselState,
     useReportPreviewAnimationState,
@@ -148,7 +130,6 @@ export {
     useReportPreviewCarouselList,
     useReportPreviewActionState,
     useReportPreviewActions,
-    useReportPreviewHoldMenu,
     useReportPreviewMeta,
 };
 export type {ReportPreviewActionState};

src/components/ReportActionItem/MoneyRequestReportPreview/MoneyRequestReportPreviewProvider.tsx

@@ -22,7 +22,6 @@ import ONYXKEYS from '@src/ONYXKEYS';
 import ROUTES from '@src/ROUTES';
 import {reportActionsLoadingStateSelector, isOptimisticReportSelector} from '@src/selectors/ReportMetaData';
 import type {PersonalDetails, Policy, Report, ReportAction, Transaction, TransactionViolations} from '@src/types/onyx';
-import type {PaymentMethodType} from '@src/types/onyx/OriginalMessage';
 import type ChildrenProps from '@src/types/utils/ChildrenProps';
 
 import type {ListRenderItem} from '@shopify/flash-list';
@@ -40,7 +39,6 @@ import {
     ReportPreviewCarouselListContext,
     ReportPreviewCarouselStateContext,
     ReportPreviewDataContext,
-    ReportPreviewHoldMenuContext,
     ReportPreviewMetaContext,
     ReportPreviewTransactionViolationsContext,
     ReportPreviewUIStateContext,
@@ -112,11 +110,6 @@ function MoneyRequestReportPreviewProvider({
         const pending = getPendingSubmitFollowUpAction();
         return pending?.followUpAction === CONST.TELEMETRY.SUBMIT_FOLLOW_UP_ACTION.DISMISS_MODAL_AND_OPEN_REPORT && (pending?.reportID === chatReportID || pending?.reportID === iouReportID);
     });
-    const [holdMenu, setHoldMenu] = useState<{
-        paymentType: PaymentMethodType | undefined;
-        canPay: boolean;
-        methodID: number | undefined;
-    } | null>(null);
 
     useFocusEffect(
         useCallback(() => {
@@ -234,12 +227,6 @@ function MoneyRequestReportPreviewProvider({
         }
     };
 
-    // Only the pay flow opens this menu; approve surfaces its partial/full choice in the approve dropdown instead.
-    const onHoldMenuOpen = (paymentType?: PaymentMethodType, canPay?: boolean, methodID?: number) => {
-        setHoldMenu({paymentType, canPay: !!canPay, methodID});
-    };
-    const onHoldMenuClose = () => setHoldMenu(null);
-
     const shouldShowCarouselArrows = !shouldUseNarrowLayout && !shouldShowAccessPlaceHolder && transactions.length > 2 && reportPreviewStyles.expenseCountVisible;
     const buttonMaxWidth =
         !shouldUseNarrowLayout && reportPreviewStyles.transactionPreviewCarouselStyle.width >= CONST.REPORT.TRANSACTION_PREVIEW.CAROUSEL.MIN_WIDE_WIDTH
@@ -293,8 +280,6 @@ function MoneyRequestReportPreviewProvider({
     const carouselStateValue = {isPreviousDisabled, isNextDisabled};
     const actionsValue = {
         openReportFromPreview,
-        onHoldMenuOpen,
-        onHoldMenuClose,
         onPaymentOptionsShow,
         onPaymentOptionsHide,
         stopAnimation,
@@ -315,9 +300,7 @@ function MoneyRequestReportPreviewProvider({
                             <ReportPreviewCarouselListContext.Provider value={carouselList}>
                                 <ReportPreviewActionStateContext.Provider value={actionStateValue}>
                                     <ReportPreviewActionsContext.Provider value={actionsValue}>
-                                        <ReportPreviewHoldMenuContext.Provider value={holdMenu}>
-                                            <ReportPreviewMetaContext.Provider value={metaValue}>{children}</ReportPreviewMetaContext.Provider>
-                                        </ReportPreviewHoldMenuContext.Provider>
+                                        <ReportPreviewMetaContext.Provider value={metaValue}>{children}</ReportPreviewMetaContext.Provider>
                                     </ReportPreviewActionsContext.Provider>
                                 </ReportPreviewActionStateContext.Provider>
                             </ReportPreviewCarouselListContext.Provider>