refactor: PureReportActionItem, add ModifiedExpenseContent and ReimbursementDeQueuedContent

src/pages/inbox/report/PureReportActionItem.tsx

@@ -77,7 +77,6 @@ import {
     getIOUReportIDFromReportActionPreview,
     getOriginalMessage,
     getPlaidBalanceFailureMessage,
-    getReimbursedMessage,
     getRenamedAction,
     getReportActionHtml,
     getReportActionMessage,
@@ -146,8 +145,11 @@ import ConfirmWhisperContent from './actionContents/ConfirmWhisperContent';
 import FraudAlertContent from './actionContents/FraudAlertContent';
 import JoinRequestContent from './actionContents/JoinRequestContent';
 import MentionWhisperContent from './actionContents/MentionWhisperContent';
+import ModifiedExpenseContent from './actionContents/ModifiedExpenseContent';
 import PaymentContent from './actionContents/PaymentContent';
 import PolicyChangeLogContent, {isHandledPolicyChangeLogAction} from './actionContents/PolicyChangeLogContent';
+import ReimbursedContent from './actionContents/ReimbursedContent';
+import ReimbursementDeQueuedContent from './actionContents/ReimbursementDeQueuedContent';
 import ReportMentionWhisperContent from './actionContents/ReportMentionWhisperContent';
 import SimpleMessageContent, {isSimpleMessageAction} from './actionContents/SimpleMessageContent';
 import {RestrictedReadOnlyContextMenuActions} from './ContextMenu/ContextMenuActions';
@@ -159,7 +161,6 @@ import ReportActionItemBasicMessage from './ReportActionItemBasicMessage';
 import ReportActionItemContentCreated from './ReportActionItemContentCreated';
 import ReportActionItemDraft from './ReportActionItemDraft';
 import ReportActionItemGrouped from './ReportActionItemGrouped';
-import ReportActionItemMessageWithExplain from './ReportActionItemMessageWithExplain';
 import ReportActionItemSingle from './ReportActionItemSingle';
 import ReportActionItemThread from './ReportActionItemThread';
 import TripSummary from './TripSummary';
@@ -306,12 +307,6 @@ type PureReportActionItemProps = {
     /** What missing payment method does this report action indicate, if any? */
     missingPaymentMethod?: MissingPaymentMethod | undefined;
 
-    /** Returns the preview message for `REIMBURSEMENT_DEQUEUED` or `REIMBURSEMENT_ACH_CANCELED` action */
-    reimbursementDeQueuedOrCanceledActionMessage?: string;
-
-    /** The report action message when expense has been modified. */
-    modifiedExpenseMessage?: string;
-
     /** Gets all transactions on an IOU report with a receipt */
     getTransactionsWithReceipts?: (iouReportID: string | undefined) => OnyxTypes.Transaction[];
 
@@ -406,8 +401,6 @@ function PureReportActionItem({
     isClosedExpenseReportWithNoExpenses,
     isCurrentUserTheOnlyParticipant = () => false,
     missingPaymentMethod,
-    reimbursementDeQueuedOrCanceledActionMessage = '',
-    modifiedExpenseMessage = '',
     getTransactionsWithReceipts = () => [],
     clearError = () => {},
     clearAllRelatedReportActionErrors = () => {},
@@ -915,12 +908,17 @@ function PureReportActionItem({
                 </ReportActionItemBasicMessage>
             );
         } else if (isReimbursementDeQueuedOrCanceledAction(action)) {
-            children = <ReportActionItemBasicMessage message={reimbursementDeQueuedOrCanceledActionMessage} />;
+            children = (
+                <ReimbursementDeQueuedContent
+                    action={action}
+                    report={report}
+                />
+            );
         } else if (action.actionName === CONST.REPORT.ACTIONS.TYPE.MODIFIED_EXPENSE) {
             children = (
-                <ReportActionItemMessageWithExplain
-                    message={modifiedExpenseMessage}
+                <ModifiedExpenseContent
                     action={action}
+                    report={report}
                     childReport={childReport}
                     originalReport={originalReport}
                 />
@@ -944,7 +942,12 @@ function PureReportActionItem({
                 />
             );
         } else if (isActionOfType(action, CONST.REPORT.ACTIONS.TYPE.REIMBURSED)) {
-            children = <ReportActionItemBasicMessage message={getReimbursedMessage(translate, action, report, currentUserAccountID)} />;
+            children = (
+                <ReimbursedContent
+                    action={action}
+                    report={report}
+                />
+            );
         } else if (isSimpleMessageAction(action)) {
             children = <SimpleMessageContent action={action} />;
         } else if (isActionOfType(action, CONST.REPORT.ACTIONS.TYPE.FORWARDED)) {
@@ -1023,7 +1026,6 @@ function PureReportActionItem({
                     report={report}
                     originalReport={originalReport}
                     policy={policy}
-                    currentUserAccountID={currentUserAccountID}
                     personalPolicyID={personalPolicyID}
                     originalReportID={originalReportID}
                     resolveActionableMentionWhisper={resolveActionableMentionWhisper}
@@ -1188,7 +1190,6 @@ function PureReportActionItem({
                             accountIDs={oldestFourAccountIDs}
                             onSecondaryInteraction={showPopover}
                             isActive={isReportActionActive && !isContextMenuActive}
-                            currentUserAccountID={currentUserAccountID}
                         />
                     </View>
                 )}
@@ -1501,8 +1502,6 @@ export default memo(PureReportActionItem, (prevProps, nextProps) => {
         prevProps.isChronosReport === nextProps.isChronosReport &&
         prevProps.isClosedExpenseReportWithNoExpenses === nextProps.isClosedExpenseReportWithNoExpenses &&
         deepEqual(prevProps.missingPaymentMethod, nextProps.missingPaymentMethod) &&
-        prevProps.reimbursementDeQueuedOrCanceledActionMessage === nextProps.reimbursementDeQueuedOrCanceledActionMessage &&
-        prevProps.modifiedExpenseMessage === nextProps.modifiedExpenseMessage &&
         prevProps.userBillingFundID === nextProps.userBillingFundID &&
         deepEqual(prevProps.taskReport, nextProps.taskReport) &&
         prevProps.shouldHighlight === nextProps.shouldHighlight &&

src/pages/inbox/report/ReportActionItem.tsx

@@ -1,19 +1,15 @@
 import React, {useCallback} from 'react';
 import type {OnyxEntry} from 'react-native-onyx';
 import useCurrentUserPersonalDetails from '@hooks/useCurrentUserPersonalDetails';
-import useLocalize from '@hooks/useLocalize';
 import useOnyx from '@hooks/useOnyx';
 import useOriginalReportID from '@hooks/useOriginalReportID';
-import usePolicyForMovingExpenses from '@hooks/usePolicyForMovingExpenses';
 import useReportIsArchived from '@hooks/useReportIsArchived';
 import useReportTransactions from '@hooks/useReportTransactions';
 import getNonEmptyStringOnyxID from '@libs/getNonEmptyStringOnyxID';
-import {getForReportAction, getMovedReportID} from '@libs/ModifiedExpenseMessage';
 import {getIOUReportIDFromReportActionPreview, getOriginalMessage, isMoneyRequestAction} from '@libs/ReportActionsUtils';
 import {
     chatIncludesChronosWithID,
     getIndicatedMissingPaymentMethod,
-    getReimbursementDeQueuedOrCanceledActionMessage,
     getTransactionsWithReceipts,
     isArchivedNonExpenseReport,
     isChatThread,
@@ -23,9 +19,8 @@ import {
 import {clearAllRelatedReportActionErrors} from '@userActions/ClearReportActionErrors';
 import {deleteReportActionDraft, resolveActionableMentionWhisper, resolveActionableReportMentionWhisper, toggleEmojiReaction} from '@userActions/Report';
 import {clearError} from '@userActions/Transaction';
-import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
-import type {PersonalDetailsList, ReportAction, ReportActionReactions, Transaction} from '@src/types/onyx';
+import type {PersonalDetailsList, ReportActionReactions, Transaction} from '@src/types/onyx';
 import type {PureReportActionItemProps} from './PureReportActionItem';
 import PureReportActionItem from './PureReportActionItem';
 
@@ -68,27 +63,17 @@ function ReportActionItem({
     isTryNewDotNVPDismissed,
     ...props
 }: ReportActionItemProps) {
-    const {translate} = useLocalize();
     const reportID = report?.reportID;
     const originalMessage = getOriginalMessage(action);
     const originalReportID = useOriginalReportID(reportID, action);
     const isOriginalReportArchived = useReportIsArchived(originalReportID);
-    const {accountID: currentUserAccountID, email: currentUserEmail} = useCurrentUserPersonalDetails();
-    const {policyForMovingExpensesID} = usePolicyForMovingExpenses();
-    // When an expense is moved from a self-DM to a workspace, the report's policyID is temporarily
-    // set to a fake placeholder (CONST.POLICY.OWNER_EMAIL_FAKE). Looking up POLICY_TAGS with that
-    // fake ID would return nothing, so we fall back to policyForMovingExpensesID (the actual
-    // destination workspace) to fetch the correct tag list for display.
-    const policyIDForTags = report?.policyID === CONST.POLICY.OWNER_EMAIL_FAKE && policyForMovingExpensesID ? policyForMovingExpensesID : report?.policyID;
-    const [policyTags] = useOnyx(`${ONYXKEYS.COLLECTION.POLICY_TAGS}${policyIDForTags}`);
+    const {accountID: currentUserAccountID} = useCurrentUserPersonalDetails();
     const [introSelected] = useOnyx(ONYXKEYS.NVP_INTRO_SELECTED);
     const [betas] = useOnyx(ONYXKEYS.BETAS);
     const [reportMetadata] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT_METADATA}${reportID}`);
     const [originalReport] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT}${originalReportID}`);
     const [iouReport] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT}${getIOUReportIDFromReportActionPreview(action)}`);
     const [parentReport] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT}${getNonEmptyStringOnyxID(report?.parentReportID)}`);
-    const [movedFromReport] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT}${getMovedReportID(action, CONST.REPORT.MOVE_TYPE.FROM)}`);
-    const [movedToReport] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT}${getMovedReportID(action, CONST.REPORT.MOVE_TYPE.TO)}`);
 
     const taskReportID = originalMessage && 'taskReportID' in originalMessage ? originalMessage.taskReportID : undefined;
     const [taskReport] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT}${taskReportID}`);
@@ -149,20 +134,6 @@ function ReportActionItem({
             isClosedExpenseReportWithNoExpenses={isClosedExpenseReportWithNoExpenses(iouReport, transactionsOnIOUReport)}
             isCurrentUserTheOnlyParticipant={isCurrentUserTheOnlyParticipant}
             missingPaymentMethod={missingPaymentMethod}
-            reimbursementDeQueuedOrCanceledActionMessage={getReimbursementDeQueuedOrCanceledActionMessage(
-                translate,
-                action as OnyxEntry<ReportAction<typeof CONST.REPORT.ACTIONS.TYPE.REIMBURSEMENT_DEQUEUED | typeof CONST.REPORT.ACTIONS.TYPE.REIMBURSEMENT_ACH_CANCELED>>,
-                report,
-            )}
-            modifiedExpenseMessage={getForReportAction({
-                translate,
-                reportAction: action,
-                policy,
-                movedFromReport,
-                movedToReport,
-                policyTags: policyTags ?? CONST.POLICY.DEFAULT_TAG_LIST,
-                currentUserLogin: currentUserEmail ?? '',
-            })}
             getTransactionsWithReceipts={getTransactionsWithReceipts}
             clearError={clearError}
             clearAllRelatedReportActionErrors={clearAllRelatedReportActionErrors}

src/pages/inbox/report/ReportActionItemThread.tsx

@@ -5,6 +5,7 @@ import type {OnyxEntry} from 'react-native-onyx';
 import PressableWithSecondaryInteraction from '@components/PressableWithSecondaryInteraction';
 import ReportActionAvatars from '@components/ReportActionAvatars';
 import Text from '@components/Text';
+import useCurrentUserPersonalDetails from '@hooks/useCurrentUserPersonalDetails';
 import useLocalize from '@hooks/useLocalize';
 import useOnyx from '@hooks/useOnyx';
 import useThemeStyles from '@hooks/useThemeStyles';
@@ -37,24 +38,11 @@ type ReportActionItemThreadProps = {
 
     /** The function that should be called when the thread is LongPressed or right-clicked */
     onSecondaryInteraction: (event: GestureResponderEvent | MouseEvent) => void;
-
-    /** The accountID of the current user, used for creating optimistic report if needed */
-    currentUserAccountID: number;
 };
 
-function ReportActionItemThread({
-    numberOfReplies,
-    accountIDs,
-    mostRecentReply,
-    report,
-    reportAction,
-    isHovered,
-    onSecondaryInteraction,
-    isActive,
-    currentUserAccountID,
-}: ReportActionItemThreadProps) {
+function ReportActionItemThread({numberOfReplies, accountIDs, mostRecentReply, report, reportAction, isHovered, onSecondaryInteraction, isActive}: ReportActionItemThreadProps) {
     const styles = useThemeStyles();
-
+    const {accountID: currentUserAccountID} = useCurrentUserPersonalDetails();
     const {translate, datetimeToCalendarTime} = useLocalize();
     const [childReport] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT}${reportAction.childReportID}`);
     const [introSelected] = useOnyx(ONYXKEYS.NVP_INTRO_SELECTED);

src/pages/inbox/report/actionContents/MentionWhisperContent.tsx

@@ -4,6 +4,7 @@ import type {ValueOf} from 'type-fest';
 import RenderHTML from '@components/RenderHTML';
 import type {ActionableItem} from '@components/ReportActionItem/ActionableItemButtons';
 import ActionableItemButtons from '@components/ReportActionItem/ActionableItemButtons';
+import useCurrentUserPersonalDetails from '@hooks/useCurrentUserPersonalDetails';
 import useLocalize from '@hooks/useLocalize';
 import useReportIsArchived from '@hooks/useReportIsArchived';
 import {isPolicyAdmin, isPolicyMember, isPolicyOwner} from '@libs/PolicyUtils';
@@ -17,7 +18,6 @@ type MentionWhisperContentProps = {
     report: OnyxEntry<Report>;
     originalReport: OnyxEntry<Report>;
     policy: OnyxEntry<Policy>;
-    currentUserAccountID: number;
     personalPolicyID: string | undefined;
     originalReportID: string | undefined;
     resolveActionableMentionWhisper: (
@@ -28,18 +28,10 @@ type MentionWhisperContentProps = {
     ) => void;
 };
 
-function MentionWhisperContent({
-    action,
-    report,
-    originalReport,
-    policy,
-    currentUserAccountID,
-    personalPolicyID,
-    originalReportID,
-    resolveActionableMentionWhisper,
-}: MentionWhisperContentProps) {
+function MentionWhisperContent({action, report, originalReport, policy, personalPolicyID, originalReportID, resolveActionableMentionWhisper}: MentionWhisperContentProps) {
     const {translate} = useLocalize();
     const isOriginalReportArchived = useReportIsArchived(originalReportID);
+    const {accountID: currentUserAccountID} = useCurrentUserPersonalDetails();
 
     const reportActionReport = originalReport ?? report;
     const reportPolicyID = report?.policyID;

src/pages/inbox/report/actionContents/ModifiedExpenseContent.tsx

@@ -0,0 +1,55 @@
+import React from 'react';
+import type {OnyxEntry} from 'react-native-onyx';
+import useCurrentUserPersonalDetails from '@hooks/useCurrentUserPersonalDetails';
+import useLocalize from '@hooks/useLocalize';
+import useOnyx from '@hooks/useOnyx';
+import usePolicyForMovingExpenses from '@hooks/usePolicyForMovingExpenses';
+import {getForReportAction, getMovedReportID} from '@libs/ModifiedExpenseMessage';
+import ReportActionItemMessageWithExplain from '@pages/inbox/report/ReportActionItemMessageWithExplain';
+import CONST from '@src/CONST';
+import ONYXKEYS from '@src/ONYXKEYS';
+import type {Report, ReportAction} from '@src/types/onyx';
+
+type ModifiedExpenseContentProps = {
+    action: ReportAction;
+    report: OnyxEntry<Report>;
+    childReport: OnyxEntry<Report>;
+    originalReport: OnyxEntry<Report>;
+};
+
+function ModifiedExpenseContent({action, report, childReport, originalReport}: ModifiedExpenseContentProps) {
+    const {translate} = useLocalize();
+    const {email: currentUserEmail} = useCurrentUserPersonalDetails();
+    const {policyForMovingExpensesID} = usePolicyForMovingExpenses();
+    const [policy] = useOnyx(`${ONYXKEYS.COLLECTION.POLICY}${report?.policyID}`);
+
+    // When expense is moved from self-DM to workspace, policyID is temporarily OWNER_EMAIL_FAKE.
+    // Fall back to policyForMovingExpensesID (actual destination workspace) for correct tag list.
+    const policyIDForTags = report?.policyID === CONST.POLICY.OWNER_EMAIL_FAKE && policyForMovingExpensesID ? policyForMovingExpensesID : report?.policyID;
+    const [policyTags] = useOnyx(`${ONYXKEYS.COLLECTION.POLICY_TAGS}${policyIDForTags}`);
+    const [movedFromReport] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT}${getMovedReportID(action, CONST.REPORT.MOVE_TYPE.FROM)}`);
+    const [movedToReport] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT}${getMovedReportID(action, CONST.REPORT.MOVE_TYPE.TO)}`);
+
+    const modifiedExpenseMessage = getForReportAction({
+        translate,
+        reportAction: action,
+        policy,
+        movedFromReport,
+        movedToReport,
+        policyTags: policyTags ?? CONST.POLICY.DEFAULT_TAG_LIST,
+        currentUserLogin: currentUserEmail ?? '',
+    });
+
+    return (
+        <ReportActionItemMessageWithExplain
+            message={modifiedExpenseMessage}
+            action={action}
+            childReport={childReport}
+            originalReport={originalReport}
+        />
+    );
+}
+
+ModifiedExpenseContent.displayName = 'ModifiedExpenseContent';
+
+export default ModifiedExpenseContent;

src/pages/inbox/report/actionContents/ReimbursedContent.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import type {OnyxEntry} from 'react-native-onyx';
+import useCurrentUserPersonalDetails from '@hooks/useCurrentUserPersonalDetails';
+import useLocalize from '@hooks/useLocalize';
+import {getReimbursedMessage} from '@libs/ReportActionsUtils';
+import ReportActionItemBasicMessage from '@pages/inbox/report/ReportActionItemBasicMessage';
+import type {Report, ReportAction} from '@src/types/onyx';
+
+type ReimbursedContentProps = {
+    action: ReportAction;
+    report: OnyxEntry<Report>;
+};
+
+function ReimbursedContent({action, report}: ReimbursedContentProps) {
+    const {translate} = useLocalize();
+    const {accountID: currentUserAccountID} = useCurrentUserPersonalDetails();
+    const message = getReimbursedMessage(translate, action, report, currentUserAccountID);
+
+    return <ReportActionItemBasicMessage message={message} />;
+}
+
+ReimbursedContent.displayName = 'ReimbursedContent';
+
+export default ReimbursedContent;

src/pages/inbox/report/actionContents/ReimbursementDeQueuedContent.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import type {OnyxEntry} from 'react-native-onyx';
+import useLocalize from '@hooks/useLocalize';
+import {getReimbursementDeQueuedOrCanceledActionMessage} from '@libs/ReportUtils';
+import ReportActionItemBasicMessage from '@pages/inbox/report/ReportActionItemBasicMessage';
+import type CONST from '@src/CONST';
+import type {Report, ReportAction} from '@src/types/onyx';
+
+type ReimbursementDeQueuedContentProps = {
+    action: ReportAction;
+    report: OnyxEntry<Report>;
+};
+
+function ReimbursementDeQueuedContent({action, report}: ReimbursementDeQueuedContentProps) {
+    const {translate} = useLocalize();
+    const message = getReimbursementDeQueuedOrCanceledActionMessage(
+        translate,
+        action as OnyxEntry<ReportAction<typeof CONST.REPORT.ACTIONS.TYPE.REIMBURSEMENT_DEQUEUED | typeof CONST.REPORT.ACTIONS.TYPE.REIMBURSEMENT_ACH_CANCELED>>,
+        report,
+    );
+
+    return <ReportActionItemBasicMessage message={message} />;
+}
+
+ReimbursementDeQueuedContent.displayName = 'ReimbursementDeQueuedContent';
+
+export default ReimbursementDeQueuedContent;