Merge pull request Expensify#88105 from Expensify/revert-87361-perf/extract-money-report-header-actions

[CP Staging] Revert "Extract secondary action hooks and components from MoneyReportHeader"

Author: rlinoz

src/components/MoneyReportHeader.tsx

@@ -1,6 +1,5 @@
 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';
@@ -10,10 +9,10 @@ import useConfirmApproval from './useConfirmApproval';
 
 type ApprovePrimaryActionProps = {
     reportID: string | undefined;
+    startApprovedAnimation: () => void;
 };
 
-function ApprovePrimaryAction({reportID}: ApprovePrimaryActionProps) {
-    const {startApprovedAnimation} = usePaymentAnimationsContext();
+function ApprovePrimaryAction({reportID, startApprovedAnimation}: ApprovePrimaryActionProps) {
     const {translate} = useLocalize();
 
     const [moneyRequestReport] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT}${reportID}`);

src/components/MoneyReportHeaderActions/MoneyReportHeaderSecondaryActions.tsx

@@ -2,7 +2,6 @@ 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';
@@ -30,10 +29,14 @@ 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}: PayPrimaryActionProps) {
-    const {isPaidAnimationRunning, isApprovedAnimationRunning, stopAnimation, startAnimation, startApprovedAnimation} = usePaymentAnimationsContext();
+function PayPrimaryAction({reportID, chatReportID, isPaidAnimationRunning, isApprovedAnimationRunning, stopAnimation, startAnimation, startApprovedAnimation}: PayPrimaryActionProps) {
     const {isOffline} = useNetwork();
     const {accountID, email} = useCurrentUserPersonalDetails();
     const {isDelegateAccessRestricted} = useDelegateNoAccessState();

src/components/MoneyReportHeaderActions/MoneyReportHeaderSelectionDropdown.tsx

@@ -1,7 +1,6 @@
 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';
@@ -25,10 +24,12 @@ import ONYXKEYS from '@src/ONYXKEYS';
 
 type SubmitPrimaryActionProps = {
     reportID: string | undefined;
+    isSubmittingAnimationRunning: boolean;
+    stopAnimation: () => void;
+    startSubmittingAnimation: () => void;
 };
 
-function SubmitPrimaryAction({reportID}: SubmitPrimaryActionProps) {
-    const {isSubmittingAnimationRunning, stopAnimation, startSubmittingAnimation} = usePaymentAnimationsContext();
+function SubmitPrimaryAction({reportID, isSubmittingAnimationRunning, stopAnimation, startSubmittingAnimation}: SubmitPrimaryActionProps) {
     const {translate} = useLocalize();
     const {isOffline} = useNetwork();
     const {accountID, email} = useCurrentUserPersonalDetails();

src/components/MoneyReportHeaderActions/index.tsx

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

@@ -5,6 +5,13 @@ 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;
 };