Extract secondary action hooks and components from MoneyReportHeader

src/components/MoneyReportHeaderActions/index.tsx

@@ -0,0 +1,101 @@
+import React, {useEffect, useRef} from 'react';
+import {View} from 'react-native';
+import type {ValueOf} from 'type-fest';
+import type {ButtonWithDropdownMenuRef} from '@components/ButtonWithDropdownMenu/types';
+import MoneyReportHeaderPrimaryAction from '@components/MoneyReportHeaderPrimaryAction';
+import {useSearchActionsContext, useSearchStateContext} from '@components/Search/SearchContext';
+import useExportAgainModal from '@hooks/useExportAgainModal';
+import useOnyx from '@hooks/useOnyx';
+import useResponsiveLayout from '@hooks/useResponsiveLayout';
+import useResponsiveLayoutOnWideRHP from '@hooks/useResponsiveLayoutOnWideRHP';
+import useThemeStyles from '@hooks/useThemeStyles';
+import useTransactionThreadReport from '@hooks/useTransactionThreadReport';
+import getNonEmptyStringOnyxID from '@libs/getNonEmptyStringOnyxID';
+import CONST from '@src/CONST';
+import ONYXKEYS from '@src/ONYXKEYS';
+import MoneyReportHeaderSecondaryActions from './MoneyReportHeaderSecondaryActions';
+import MoneyReportHeaderSelectionDropdown from './MoneyReportHeaderSelectionDropdown';
+import type {MoneyReportHeaderActionsProps} from './types';
+
+/**
+ * Narrow the wide primaryAction union to what report-level secondary actions accept.
+ * TRANSACTION_PRIMARY_ACTIONS values (e.g. "keepThisOne") are irrelevant here.
+ */
+function narrowPrimaryAction(primaryAction: MoneyReportHeaderActionsProps['primaryAction']): ValueOf<typeof CONST.REPORT.PRIMARY_ACTIONS> | '' {
+    if ((Object.values(CONST.REPORT.PRIMARY_ACTIONS) as string[]).includes(primaryAction)) {
+        return primaryAction as ValueOf<typeof CONST.REPORT.PRIMARY_ACTIONS>;
+    }
+    return '';
+}
+
+function MoneyReportHeaderActions({reportID, primaryAction, isReportInSearch, backTo}: MoneyReportHeaderActionsProps) {
+    const styles = useThemeStyles();
+    const dropdownMenuRef = useRef<ButtonWithDropdownMenuRef>(null) as React.RefObject<ButtonWithDropdownMenuRef>;
+
+    // We need isSmallScreenWidth for the hold expense modal layout https://github.com/Expensify/App/pull/47990#issuecomment-2362382026
+    // eslint-disable-next-line rulesdir/prefer-shouldUseNarrowLayout-instead-of-isSmallScreenWidth
+    const {shouldUseNarrowLayout, isMediumScreenWidth} = useResponsiveLayout();
+    const shouldDisplayNarrowVersion = shouldUseNarrowLayout || isMediumScreenWidth;
+    const {isWideRHPDisplayedOnWideLayout, isSuperWideRHPDisplayedOnWideLayout} = useResponsiveLayoutOnWideRHP();
+    const shouldDisplayNarrowMoreButton = !shouldDisplayNarrowVersion || isWideRHPDisplayedOnWideLayout || isSuperWideRHPDisplayedOnWideLayout;
+
+    const [moneyRequestReport] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT}${reportID}`);
+    const [chatReport] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT}${getNonEmptyStringOnyxID(moneyRequestReport?.chatReportID)}`);
+
+    const {transactionThreadReportID} = useTransactionThreadReport(reportID);
+
+    const {triggerExportOrConfirm} = useExportAgainModal(moneyRequestReport?.reportID, moneyRequestReport?.policyID);
+
+    const {selectedTransactionIDs} = useSearchStateContext();
+    const {clearSelectedTransactions} = useSearchActionsContext();
+    const hasSelectedTransactions = !!selectedTransactionIDs.length;
+    const isTransactionThread = !!transactionThreadReportID;
+
+    useEffect(() => {
+        if (!transactionThreadReportID) {
+            return;
+        }
+
+        clearSelectedTransactions(true);
+    }, [transactionThreadReportID]); // eslint-disable-line react-hooks/exhaustive-deps
+
+    const narrowedPrimaryAction = narrowPrimaryAction(primaryAction);
+
+    if (hasSelectedTransactions && !isTransactionThread) {
+        return (
+            <View style={shouldDisplayNarrowMoreButton ? undefined : [styles.dFlex, styles.w100, styles.ph5, styles.pb3]}>
+                <MoneyReportHeaderSelectionDropdown
+                    reportID={reportID}
+                    primaryAction={narrowedPrimaryAction}
+                    isReportInSearch={isReportInSearch}
+                    wrapperStyle={shouldDisplayNarrowMoreButton ? undefined : styles.w100}
+                />
+            </View>
+        );
+    }
+
+    return (
+        <View style={[styles.flexRow, styles.gap2, ...(!shouldDisplayNarrowMoreButton ? [styles.pb3, styles.ph5, styles.w100, styles.alignItemsCenter, styles.justifyContentCenter] : [])]}>
+            {!!primaryAction && (
+                <View style={!shouldDisplayNarrowMoreButton ? [styles.flex1] : undefined}>
+                    <MoneyReportHeaderPrimaryAction
+                        reportID={reportID}
+                        chatReportID={chatReport?.reportID}
+                        primaryAction={primaryAction}
+                        onExportModalOpen={() => triggerExportOrConfirm(CONST.REPORT.EXPORT_OPTIONS.EXPORT_TO_INTEGRATION)}
+                    />
+                </View>
+            )}
+            <MoneyReportHeaderSecondaryActions
+                reportID={reportID}
+                primaryAction={narrowedPrimaryAction}
+                isReportInSearch={isReportInSearch}
+                backTo={backTo}
+                dropdownMenuRef={dropdownMenuRef}
+            />
+        </View>
+    );
+}
+
+export default MoneyReportHeaderActions;
+export type {MoneyReportHeaderActionsProps};

src/components/MoneyReportHeaderActions/types.ts

@@ -0,0 +1,16 @@
+import type {ValueOf} from 'type-fest';
+import type {DropdownOption} from '@components/ButtonWithDropdownMenu/types';
+import type {PopoverMenuItem} from '@components/PopoverMenu';
+import type CONST from '@src/CONST';
+import type {Route} from '@src/ROUTES';
+
+type SecondaryActionEntry = DropdownOption<ValueOf<typeof CONST.REPORT.SECONDARY_ACTIONS>> & Pick<PopoverMenuItem, 'backButtonText' | 'rightIcon'>;
+
+type MoneyReportHeaderActionsProps = {
+    reportID: string | undefined;
+    primaryAction: ValueOf<typeof CONST.REPORT.PRIMARY_ACTIONS> | ValueOf<typeof CONST.REPORT.TRANSACTION_PRIMARY_ACTIONS> | '';
+    isReportInSearch?: boolean;
+    backTo?: Route;
+};
+
+export type {SecondaryActionEntry, MoneyReportHeaderActionsProps};

src/components/MoneyReportHeaderPrimaryAction/ApprovePrimaryAction.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import Button from '@components/Button';
+import {usePaymentAnimationsContext} from '@components/PaymentAnimationsContext';
 import useLocalize from '@hooks/useLocalize';
 import useOnyx from '@hooks/useOnyx';
 import getNonEmptyStringOnyxID from '@libs/getNonEmptyStringOnyxID';
@@ -9,10 +10,10 @@ import useConfirmApproval from './useConfirmApproval';
 
 type ApprovePrimaryActionProps = {
     reportID: string | undefined;
-    startApprovedAnimation: () => void;
 };
 
-function ApprovePrimaryAction({reportID, startApprovedAnimation}: ApprovePrimaryActionProps) {
+function ApprovePrimaryAction({reportID}: ApprovePrimaryActionProps) {
+    const {startApprovedAnimation} = usePaymentAnimationsContext();
     const {translate} = useLocalize();
 
     const [moneyRequestReport] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT}${reportID}`);

src/components/MoneyReportHeaderPrimaryAction/PayPrimaryAction.tsx

@@ -2,6 +2,7 @@ import {hasSeenTourSelector} from '@selectors/Onboarding';
 import React from 'react';
 import {useDelegateNoAccessActions, useDelegateNoAccessState} from '@components/DelegateNoAccessModalProvider';
 import {useMoneyReportHeaderModals} from '@components/MoneyReportHeaderModalsContext';
+import {usePaymentAnimationsContext} from '@components/PaymentAnimationsContext';
 import {useSearchStateContext} from '@components/Search/SearchContext';
 import AnimatedSettlementButton from '@components/SettlementButton/AnimatedSettlementButton';
 import type {PaymentActionParams} from '@components/SettlementButton/types';
@@ -29,14 +30,10 @@ import useTransactionThreadData from './useTransactionThreadData';
 type PayPrimaryActionProps = {
     reportID: string | undefined;
     chatReportID: string | undefined;
-    isPaidAnimationRunning: boolean;
-    isApprovedAnimationRunning: boolean;
-    stopAnimation: () => void;
-    startAnimation: () => void;
-    startApprovedAnimation: () => void;
 };
 
-function PayPrimaryAction({reportID, chatReportID, isPaidAnimationRunning, isApprovedAnimationRunning, stopAnimation, startAnimation, startApprovedAnimation}: PayPrimaryActionProps) {
+function PayPrimaryAction({reportID, chatReportID}: PayPrimaryActionProps) {
+    const {isPaidAnimationRunning, isApprovedAnimationRunning, stopAnimation, startAnimation, startApprovedAnimation} = usePaymentAnimationsContext();
     const {isOffline} = useNetwork();
     const {accountID, email} = useCurrentUserPersonalDetails();
     const {isDelegateAccessRestricted} = useDelegateNoAccessState();

src/components/MoneyReportHeaderPrimaryAction/SubmitPrimaryAction.tsx

@@ -1,6 +1,7 @@
 import {delegateEmailSelector} from '@selectors/Account';
 import React from 'react';
 import AnimatedSubmitButton from '@components/AnimatedSubmitButton';
+import {usePaymentAnimationsContext} from '@components/PaymentAnimationsContext';
 import {useSearchStateContext} from '@components/Search/SearchContext';
 import useConfirmPendingRTERAndProceed from '@hooks/useConfirmPendingRTERAndProceed';
 import useCurrentUserPersonalDetails from '@hooks/useCurrentUserPersonalDetails';
@@ -24,12 +25,10 @@ import ONYXKEYS from '@src/ONYXKEYS';
 
 type SubmitPrimaryActionProps = {
     reportID: string | undefined;
-    isSubmittingAnimationRunning: boolean;
-    stopAnimation: () => void;
-    startSubmittingAnimation: () => void;
 };
 
-function SubmitPrimaryAction({reportID, isSubmittingAnimationRunning, stopAnimation, startSubmittingAnimation}: SubmitPrimaryActionProps) {
+function SubmitPrimaryAction({reportID}: SubmitPrimaryActionProps) {
+    const {isSubmittingAnimationRunning, stopAnimation, startSubmittingAnimation} = usePaymentAnimationsContext();
     const {translate} = useLocalize();
     const {isOffline} = useNetwork();
     const {accountID, email} = useCurrentUserPersonalDetails();

src/components/MoneyReportHeaderPrimaryAction/index.tsx

@@ -10,53 +10,24 @@ import ReviewDuplicatesPrimaryAction from './ReviewDuplicatesPrimaryAction';
 import SubmitPrimaryAction from './SubmitPrimaryAction';
 import type {MoneyReportHeaderPrimaryActionProps} from './types';
 
-function MoneyReportHeaderPrimaryAction({
-    reportID,
-    chatReportID,
-    primaryAction,
-    isPaidAnimationRunning,
-    isApprovedAnimationRunning,
-    isSubmittingAnimationRunning,
-    stopAnimation,
-    startAnimation,
-    startApprovedAnimation,
-    startSubmittingAnimation,
-    onExportModalOpen,
-}: MoneyReportHeaderPrimaryActionProps) {
+function MoneyReportHeaderPrimaryAction({reportID, chatReportID, primaryAction, onExportModalOpen}: MoneyReportHeaderPrimaryActionProps) {
     if (!primaryAction) {
         return null;
     }
 
     if (primaryAction === CONST.REPORT.PRIMARY_ACTIONS.SUBMIT) {
-        return (
-            <SubmitPrimaryAction
-                reportID={reportID}
-                isSubmittingAnimationRunning={isSubmittingAnimationRunning}
-                stopAnimation={stopAnimation}
-                startSubmittingAnimation={startSubmittingAnimation}
-            />
-        );
+        return <SubmitPrimaryAction reportID={reportID} />;
     }
 
     if (primaryAction === CONST.REPORT.PRIMARY_ACTIONS.APPROVE) {
-        return (
-            <ApprovePrimaryAction
-                reportID={reportID}
-                startApprovedAnimation={startApprovedAnimation}
-            />
-        );
+        return <ApprovePrimaryAction reportID={reportID} />;
     }
 
     if (primaryAction === CONST.REPORT.PRIMARY_ACTIONS.PAY) {
         return (
             <PayPrimaryAction
                 reportID={reportID}
                 chatReportID={chatReportID}
-                isPaidAnimationRunning={isPaidAnimationRunning}
-                isApprovedAnimationRunning={isApprovedAnimationRunning}
-                stopAnimation={stopAnimation}
-                startAnimation={startAnimation}
-                startApprovedAnimation={startApprovedAnimation}
             />
         );
     }

src/components/MoneyReportHeaderPrimaryAction/types.ts

@@ -5,13 +5,6 @@ type MoneyReportHeaderPrimaryActionProps = {
     reportID: string | undefined;
     chatReportID: string | undefined;
     primaryAction: ValueOf<typeof CONST.REPORT.PRIMARY_ACTIONS> | ValueOf<typeof CONST.REPORT.TRANSACTION_PRIMARY_ACTIONS> | '';
-    isPaidAnimationRunning: boolean;
-    isApprovedAnimationRunning: boolean;
-    isSubmittingAnimationRunning: boolean;
-    stopAnimation: () => void;
-    startAnimation: () => void;
-    startApprovedAnimation: () => void;
-    startSubmittingAnimation: () => void;
     onExportModalOpen: () => void;
 };
 

src/components/PaymentAnimationsContext.tsx

@@ -0,0 +1,21 @@
+import React, {createContext, useContext} from 'react';
+import usePaymentAnimations from '@hooks/usePaymentAnimations';
+
+type PaymentAnimationsContextType = ReturnType<typeof usePaymentAnimations>;
+
+const PaymentAnimationsContext = createContext<PaymentAnimationsContextType | null>(null);
+
+function usePaymentAnimationsContext(): PaymentAnimationsContextType {
+    const context = useContext(PaymentAnimationsContext);
+    if (!context) {
+        throw new Error('usePaymentAnimationsContext must be used within a PaymentAnimationsProvider');
+    }
+    return context;
+}
+
+function PaymentAnimationsProvider({children}: {children: React.ReactNode}) {
+    const animations = usePaymentAnimations();
+    return <PaymentAnimationsContext.Provider value={animations}>{children}</PaymentAnimationsContext.Provider>;
+}
+
+export {PaymentAnimationsProvider, usePaymentAnimationsContext};