From 3de24ae9ce533e3d174089ef5f2da7a128988f6e Mon Sep 17 00:00:00 2001
From: Lukasz Modzelewski <lukasz.modzelewski@callstack.com>
Date: Thu, 23 Apr 2026 16:00:24 +0200
Subject: [PATCH 1/5] refactor: Extract IouReportActionMessage from
 ReportActionItemMessage

---
 .../inbox/report/ReportActionItemMessage.tsx  |  60 +++-----
 .../actionContents/IouReportActionMessage.tsx | 128 ++++++++++++++++++
 2 files changed, 144 insertions(+), 44 deletions(-)
 create mode 100644 src/pages/inbox/report/actionContents/IouReportActionMessage.tsx

diff --git a/src/pages/inbox/report/ReportActionItemMessage.tsx b/src/pages/inbox/report/ReportActionItemMessage.tsx
index 4c90e169a3e0..62460451979b 100644
--- a/src/pages/inbox/report/ReportActionItemMessage.tsx
+++ b/src/pages/inbox/report/ReportActionItemMessage.tsx
@@ -5,12 +5,9 @@ import {View} from 'react-native';
 import Button from '@components/Button';
 import Text from '@components/Text';
 import useLocalize from '@hooks/useLocalize';
-import useOnyx from '@hooks/useOnyx';
 import useThemeStyles from '@hooks/useThemeStyles';
-import getNonEmptyStringOnyxID from '@libs/getNonEmptyStringOnyxID';
 import Navigation from '@libs/Navigation/Navigation';
 import {
-    getLinkedTransactionID,
     getMemberChangeMessageFragment,
     getOriginalMessage,
     getReportActionMessage,
@@ -23,11 +20,11 @@ import {
     isReimbursementDirectionInformationRequiredAction,
     isThreadParentMessage,
 } from '@libs/ReportActionsUtils';
-import {getIOUReportActionDisplayMessage, getReportName, hasMissingInvoiceBankAccount, isSettled} from '@libs/ReportUtils';
+import {getReportName} from '@libs/ReportUtils';
 import CONST from '@src/CONST';
-import ONYXKEYS from '@src/ONYXKEYS';
 import ROUTES from '@src/ROUTES';
 import type {ReportAction} from '@src/types/onyx';
+import IouReportActionMessage from './actionContents/IouReportActionMessage';
 import TextCommentFragment from './comment/TextCommentFragment';
 import ReportActionItemFragment from './ReportActionItemFragment';
 
@@ -51,12 +48,18 @@ type ReportActionItemMessageProps = {
 function ReportActionItemMessage({action, displayAsGroup, reportID, style, isHidden = false}: ReportActionItemMessageProps) {
     const styles = useThemeStyles();
     const {translate} = useLocalize();
-    const [report] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT}${reportID}`);
-    const [transaction] = useOnyx(`${ONYXKEYS.COLLECTION.TRANSACTION}${getNonEmptyStringOnyxID(getLinkedTransactionID(action))}`);
-    const [bankAccountList] = useOnyx(ONYXKEYS.BANK_ACCOUNT_LIST);
 
-    const fragments = getReportActionMessageFragments(translate, action);
-    const isIOUReport = isMoneyRequestAction(action);
+    if (isMoneyRequestAction(action)) {
+        return (
+            <IouReportActionMessage
+                action={action}
+                displayAsGroup={displayAsGroup}
+                reportID={reportID}
+                style={style}
+                isHidden={isHidden}
+            />
+        );
+    }
 
     if (isMemberChangeAction(action)) {
         // This will be fixed: https://github.com/Expensify/App/issues/76852
@@ -118,19 +121,12 @@ function ReportActionItemMessage({action, displayAsGroup, reportID, style, isHid
         );
     }
 
-    let iouMessage: string | undefined;
-    if (isIOUReport) {
-        const originalMessage = action.actionName === CONST.REPORT.ACTIONS.TYPE.IOU ? getOriginalMessage(action) : null;
-        const iouReportID = originalMessage?.IOUReportID;
-        if (iouReportID) {
-            iouMessage = getIOUReportActionDisplayMessage(translate, action, transaction, report, bankAccountList);
-        }
-    }
-
     const isApprovedOrSubmittedReportAction = isApprovedOrSubmittedReportActionUtils(action);
 
     const isHoldReportAction = [CONST.REPORT.ACTIONS.TYPE.HOLD, CONST.REPORT.ACTIONS.TYPE.UNHOLD].some((type) => type === action.actionName);
 
+    const fragments = getReportActionMessageFragments(translate, action);
+
     /**
      * Get the ReportActionItemFragments
      * @param shouldWrapInText determines whether the fragments are wrapped in a Text component
@@ -143,7 +139,6 @@ function ReportActionItemMessage({action, displayAsGroup, reportID, style, isHid
                 key={`actionFragment-${action.reportActionID}-${index}`}
                 reportActionID={action.reportActionID}
                 fragment={fragment}
-                iouMessage={iouMessage}
                 isThreadParentMessage={isThreadParentMessage(action, reportID)}
                 pendingAction={action.pendingAction}
                 actionName={action.actionName}
@@ -167,33 +162,10 @@ function ReportActionItemMessage({action, displayAsGroup, reportID, style, isHid
         return shouldWrapInText ? <Text style={styles.ltr}>{reportActionItemFragments}</Text> : reportActionItemFragments;
     };
 
-    const openWorkspaceInvoicesPage = () => {
-        const policyID = report?.policyID;
-
-        if (!policyID) {
-            return;
-        }
-
-        Navigation.navigate(ROUTES.WORKSPACE_INVOICES.getRoute(policyID));
-    };
-
-    const shouldShowAddBankAccountButton = action.actionName === CONST.REPORT.ACTIONS.TYPE.IOU && hasMissingInvoiceBankAccount(reportID) && !isSettled(reportID);
-
     return (
         <View style={[styles.chatItemMessage, style]}>
             {!isHidden ? (
-                <>
-                    {renderReportActionItemFragments(isApprovedOrSubmittedReportAction)}
-                    {shouldShowAddBankAccountButton && (
-                        <Button
-                            style={[styles.mt2, styles.alignSelfStart]}
-                            success
-                            text={translate('bankAccount.addBankAccount')}
-                            onPress={openWorkspaceInvoicesPage}
-                            sentryLabel={CONST.SENTRY_LABEL.REPORT.REPORT_ACTION_ITEM_MESSAGE_ADD_BANK_ACCOUNT}
-                        />
-                    )}
-                </>
+                renderReportActionItemFragments(isApprovedOrSubmittedReportAction)
             ) : (
                 <Text style={[styles.textLabelSupporting, styles.lh20]}>{translate('moderation.flaggedContent')}</Text>
             )}
diff --git a/src/pages/inbox/report/actionContents/IouReportActionMessage.tsx b/src/pages/inbox/report/actionContents/IouReportActionMessage.tsx
new file mode 100644
index 000000000000..11c3c5ab12e3
--- /dev/null
+++ b/src/pages/inbox/report/actionContents/IouReportActionMessage.tsx
@@ -0,0 +1,128 @@
+import type {ReactElement} from 'react';
+import React from 'react';
+import type {StyleProp, TextStyle, ViewStyle} from 'react-native';
+import {View} from 'react-native';
+import Button from '@components/Button';
+import Text from '@components/Text';
+import useLocalize from '@hooks/useLocalize';
+import useOnyx from '@hooks/useOnyx';
+import useThemeStyles from '@hooks/useThemeStyles';
+import getNonEmptyStringOnyxID from '@libs/getNonEmptyStringOnyxID';
+import Navigation from '@libs/Navigation/Navigation';
+import {
+    getLinkedTransactionID,
+    getOriginalMessage,
+    getReportActionMessage,
+    getReportActionMessageFragments,
+    isActionOfType,
+    isAddCommentAction,
+    isApprovedOrSubmittedReportAction as isApprovedOrSubmittedReportActionUtils,
+    isThreadParentMessage,
+} from '@libs/ReportActionsUtils';
+import {getIOUReportActionDisplayMessage, hasMissingInvoiceBankAccount, isSettled} from '@libs/ReportUtils';
+import ReportActionItemFragment from '@pages/inbox/report/ReportActionItemFragment';
+import CONST from '@src/CONST';
+import ONYXKEYS from '@src/ONYXKEYS';
+import ROUTES from '@src/ROUTES';
+import type {ReportAction} from '@src/types/onyx';
+
+type IouReportActionMessageProps = {
+    /** The report action */
+    action: ReportAction;
+
+    /** Should the comment have the appearance of being grouped with the previous comment? */
+    displayAsGroup: boolean;
+
+    /** Additional styles to add after local styles. */
+    style?: StyleProp<ViewStyle & TextStyle>;
+
+    /** Whether or not the message is hidden by moderation */
+    isHidden: boolean;
+
+    /** The ID of the report */
+    reportID: string | undefined;
+};
+
+function IouReportActionMessage({action, displayAsGroup, reportID, style, isHidden}: IouReportActionMessageProps) {
+    const styles = useThemeStyles();
+    const {translate} = useLocalize();
+    const [report] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT}${getNonEmptyStringOnyxID(reportID)}`);
+    const [transaction] = useOnyx(`${ONYXKEYS.COLLECTION.TRANSACTION}${getNonEmptyStringOnyxID(getLinkedTransactionID(action))}`);
+    const [bankAccountList] = useOnyx(ONYXKEYS.BANK_ACCOUNT_LIST);
+
+    let iouMessage: string | undefined;
+    const originalMessage = isActionOfType(action, CONST.REPORT.ACTIONS.TYPE.IOU) ? getOriginalMessage(action) : null;
+    const iouReportID = originalMessage?.IOUReportID;
+    if (iouReportID) {
+        iouMessage = getIOUReportActionDisplayMessage(translate, action, transaction, report, bankAccountList);
+    }
+
+    const isApprovedOrSubmittedReportAction = isApprovedOrSubmittedReportActionUtils(action);
+    const isHoldReportAction = [CONST.REPORT.ACTIONS.TYPE.HOLD, CONST.REPORT.ACTIONS.TYPE.UNHOLD].some((type) => type === action.actionName);
+
+    const fragments = getReportActionMessageFragments(translate, action);
+
+    const renderReportActionItemFragments = (shouldWrapInText: boolean): ReactElement | ReactElement[] => {
+        const reportActionItemFragments = fragments.map((fragment, index) => (
+            <ReportActionItemFragment
+                /* eslint-disable-next-line react/no-array-index-key */
+                key={`actionFragment-${action.reportActionID}-${index}`}
+                reportActionID={action.reportActionID}
+                fragment={fragment}
+                iouMessage={iouMessage}
+                isThreadParentMessage={isThreadParentMessage(action, reportID)}
+                pendingAction={action.pendingAction}
+                actionName={action.actionName}
+                source={isAddCommentAction(action) ? getOriginalMessage(action)?.source : ''}
+                accountID={action.actorAccountID ?? CONST.DEFAULT_NUMBER_ID}
+                style={style}
+                displayAsGroup={displayAsGroup}
+                isApprovedOrSubmittedReportAction={isApprovedOrSubmittedReportAction}
+                isHoldReportAction={isHoldReportAction}
+                // Since system messages from Old Dot begin with the person who performed the action,
+                // the first fragment will contain the person's display name and their email. We'll use this
+                // to decide if the fragment should be from left to right for RTL display names e.g. Arabic for proper
+                // formatting.
+                isFragmentContainingDisplayName={index === 0}
+                moderationDecision={getReportActionMessage(action)?.moderationDecision?.decision}
+            />
+        ));
+
+        // Approving or submitting reports in oldDot results in system messages made up of multiple fragments of `TEXT` type
+        // which we need to wrap in `<Text>` to prevent them rendering on separate lines.
+        return shouldWrapInText ? <Text style={styles.ltr}>{reportActionItemFragments}</Text> : reportActionItemFragments;
+    };
+
+    const openWorkspaceInvoicesPage = () => {
+        const policyID = report?.policyID;
+        if (!policyID) {
+            return;
+        }
+        Navigation.navigate(ROUTES.WORKSPACE_INVOICES.getRoute(policyID));
+    };
+
+    const shouldShowAddBankAccountButton = action.actionName === CONST.REPORT.ACTIONS.TYPE.IOU && hasMissingInvoiceBankAccount(reportID) && !isSettled(reportID);
+
+    return (
+        <View style={[styles.chatItemMessage, style]}>
+            {!isHidden ? (
+                <>
+                    {renderReportActionItemFragments(isApprovedOrSubmittedReportAction)}
+                    {shouldShowAddBankAccountButton && (
+                        <Button
+                            style={[styles.mt2, styles.alignSelfStart]}
+                            success
+                            text={translate('bankAccount.addBankAccount')}
+                            onPress={openWorkspaceInvoicesPage}
+                            sentryLabel={CONST.SENTRY_LABEL.REPORT.REPORT_ACTION_ITEM_MESSAGE_ADD_BANK_ACCOUNT}
+                        />
+                    )}
+                </>
+            ) : (
+                <Text style={[styles.textLabelSupporting, styles.lh20]}>{translate('moderation.flaggedContent')}</Text>
+            )}
+        </View>
+    );
+}
+
+export default IouReportActionMessage;

From 8bd84e67aa653299bceab845dc231cf55abda0d7 Mon Sep 17 00:00:00 2001
From: Lukasz Modzelewski <lukasz.modzelewski@callstack.com>
Date: Thu, 23 Apr 2026 16:08:31 +0200
Subject: [PATCH 2/5] clean up

---
 .../inbox/report/actionContents/IouReportActionMessage.tsx    | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/pages/inbox/report/actionContents/IouReportActionMessage.tsx b/src/pages/inbox/report/actionContents/IouReportActionMessage.tsx
index 11c3c5ab12e3..5971f691a6c1 100644
--- a/src/pages/inbox/report/actionContents/IouReportActionMessage.tsx
+++ b/src/pages/inbox/report/actionContents/IouReportActionMessage.tsx
@@ -37,13 +37,13 @@ type IouReportActionMessageProps = {
     style?: StyleProp<ViewStyle & TextStyle>;
 
     /** Whether or not the message is hidden by moderation */
-    isHidden: boolean;
+    isHidden?: boolean;
 
     /** The ID of the report */
     reportID: string | undefined;
 };
 
-function IouReportActionMessage({action, displayAsGroup, reportID, style, isHidden}: IouReportActionMessageProps) {
+function IouReportActionMessage({action, displayAsGroup, reportID, style, isHidden = false}: IouReportActionMessageProps) {
     const styles = useThemeStyles();
     const {translate} = useLocalize();
     const [report] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT}${getNonEmptyStringOnyxID(reportID)}`);

From dfacd8400736cabea41748075defc3f257fb12b4 Mon Sep 17 00:00:00 2001
From: Lukasz Modzelewski <lukasz.modzelewski@callstack.com>
Date: Mon, 27 Apr 2026 10:18:01 +0200
Subject: [PATCH 3/5] refactor: DRY ReportActionItemMessage

---
 .../inbox/report/ReportActionItemMessage.tsx  | 64 ++-----------
 .../actionContents/IouReportActionMessage.tsx | 86 ++++-------------
 .../ReportActionMessageContent.tsx            | 95 +++++++++++++++++++
 3 files changed, 122 insertions(+), 123 deletions(-)
 create mode 100644 src/pages/inbox/report/actionContents/ReportActionMessageContent.tsx

diff --git a/src/pages/inbox/report/ReportActionItemMessage.tsx b/src/pages/inbox/report/ReportActionItemMessage.tsx
index 62460451979b..ac908369af85 100644
--- a/src/pages/inbox/report/ReportActionItemMessage.tsx
+++ b/src/pages/inbox/report/ReportActionItemMessage.tsx
@@ -1,4 +1,3 @@
-import type {ReactElement} from 'react';
 import React from 'react';
 import type {StyleProp, TextStyle, ViewStyle} from 'react-native';
 import {View} from 'react-native';
@@ -10,23 +9,18 @@ import Navigation from '@libs/Navigation/Navigation';
 import {
     getMemberChangeMessageFragment,
     getOriginalMessage,
-    getReportActionMessage,
-    getReportActionMessageFragments,
     getUpdateRoomDescriptionFragment,
-    isAddCommentAction,
-    isApprovedOrSubmittedReportAction as isApprovedOrSubmittedReportActionUtils,
     isMemberChangeAction,
     isMoneyRequestAction,
     isReimbursementDirectionInformationRequiredAction,
-    isThreadParentMessage,
 } from '@libs/ReportActionsUtils';
 import {getReportName} from '@libs/ReportUtils';
 import CONST from '@src/CONST';
 import ROUTES from '@src/ROUTES';
 import type {ReportAction} from '@src/types/onyx';
 import IouReportActionMessage from './actionContents/IouReportActionMessage';
+import ReportActionMessageContent from './actionContents/ReportActionMessageContent';
 import TextCommentFragment from './comment/TextCommentFragment';
-import ReportActionItemFragment from './ReportActionItemFragment';
 
 type ReportActionItemMessageProps = {
     /** The report action */
@@ -101,7 +95,6 @@ function ReportActionItemMessage({action, displayAsGroup, reportID, style, isHid
 
         Navigation.navigate(ROUTES.BANK_ACCOUNT_ENTER_SIGNER_INFO.getRoute(policyID, bankAccountID, isCompleted));
     };
-
     if (isReimbursementDirectionInformationRequiredAction(action)) {
         const {bankAccountLastFour, currency, policyID, bankAccountID, completed} =
             getOriginalMessage<typeof CONST.REPORT.ACTIONS.TYPE.REIMBURSEMENT_DIRECTOR_INFORMATION_REQUIRED>(action) ?? {};
@@ -121,55 +114,14 @@ function ReportActionItemMessage({action, displayAsGroup, reportID, style, isHid
         );
     }
 
-    const isApprovedOrSubmittedReportAction = isApprovedOrSubmittedReportActionUtils(action);
-
-    const isHoldReportAction = [CONST.REPORT.ACTIONS.TYPE.HOLD, CONST.REPORT.ACTIONS.TYPE.UNHOLD].some((type) => type === action.actionName);
-
-    const fragments = getReportActionMessageFragments(translate, action);
-
-    /**
-     * Get the ReportActionItemFragments
-     * @param shouldWrapInText determines whether the fragments are wrapped in a Text component
-     * @returns report action item fragments
-     */
-    const renderReportActionItemFragments = (shouldWrapInText: boolean): ReactElement | ReactElement[] => {
-        const reportActionItemFragments = fragments.map((fragment, index) => (
-            <ReportActionItemFragment
-                /* eslint-disable-next-line react/no-array-index-key */
-                key={`actionFragment-${action.reportActionID}-${index}`}
-                reportActionID={action.reportActionID}
-                fragment={fragment}
-                isThreadParentMessage={isThreadParentMessage(action, reportID)}
-                pendingAction={action.pendingAction}
-                actionName={action.actionName}
-                source={isAddCommentAction(action) ? getOriginalMessage(action)?.source : ''}
-                accountID={action.actorAccountID ?? CONST.DEFAULT_NUMBER_ID}
-                style={style}
-                displayAsGroup={displayAsGroup}
-                isApprovedOrSubmittedReportAction={isApprovedOrSubmittedReportAction}
-                isHoldReportAction={isHoldReportAction}
-                // Since system messages from Old Dot begin with the person who performed the action,
-                // the first fragment will contain the person's display name and their email. We'll use this
-                // to decide if the fragment should be from left to right for RTL display names e.g. Arabic for proper
-                // formatting.
-                isFragmentContainingDisplayName={index === 0}
-                moderationDecision={getReportActionMessage(action)?.moderationDecision?.decision}
-            />
-        ));
-
-        // Approving or submitting reports in oldDot results in system messages made up of multiple fragments of `TEXT` type
-        // which we need to wrap in `<Text>` to prevent them rendering on separate lines.
-        return shouldWrapInText ? <Text style={styles.ltr}>{reportActionItemFragments}</Text> : reportActionItemFragments;
-    };
-
     return (
-        <View style={[styles.chatItemMessage, style]}>
-            {!isHidden ? (
-                renderReportActionItemFragments(isApprovedOrSubmittedReportAction)
-            ) : (
-                <Text style={[styles.textLabelSupporting, styles.lh20]}>{translate('moderation.flaggedContent')}</Text>
-            )}
-        </View>
+        <ReportActionMessageContent
+            action={action}
+            displayAsGroup={displayAsGroup}
+            reportID={reportID}
+            style={style}
+            isHidden={isHidden}
+        />
     );
 }
 
diff --git a/src/pages/inbox/report/actionContents/IouReportActionMessage.tsx b/src/pages/inbox/report/actionContents/IouReportActionMessage.tsx
index 5971f691a6c1..e423b3a75d2d 100644
--- a/src/pages/inbox/report/actionContents/IouReportActionMessage.tsx
+++ b/src/pages/inbox/report/actionContents/IouReportActionMessage.tsx
@@ -1,30 +1,18 @@
-import type {ReactElement} from 'react';
 import React from 'react';
 import type {StyleProp, TextStyle, ViewStyle} from 'react-native';
-import {View} from 'react-native';
 import Button from '@components/Button';
-import Text from '@components/Text';
 import useLocalize from '@hooks/useLocalize';
 import useOnyx from '@hooks/useOnyx';
 import useThemeStyles from '@hooks/useThemeStyles';
 import getNonEmptyStringOnyxID from '@libs/getNonEmptyStringOnyxID';
 import Navigation from '@libs/Navigation/Navigation';
-import {
-    getLinkedTransactionID,
-    getOriginalMessage,
-    getReportActionMessage,
-    getReportActionMessageFragments,
-    isActionOfType,
-    isAddCommentAction,
-    isApprovedOrSubmittedReportAction as isApprovedOrSubmittedReportActionUtils,
-    isThreadParentMessage,
-} from '@libs/ReportActionsUtils';
+import {getLinkedTransactionID, getOriginalMessage, isActionOfType} from '@libs/ReportActionsUtils';
 import {getIOUReportActionDisplayMessage, hasMissingInvoiceBankAccount, isSettled} from '@libs/ReportUtils';
-import ReportActionItemFragment from '@pages/inbox/report/ReportActionItemFragment';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 import ROUTES from '@src/ROUTES';
 import type {ReportAction} from '@src/types/onyx';
+import ReportActionMessageContent from './ReportActionMessageContent';
 
 type IouReportActionMessageProps = {
     /** The report action */
@@ -57,42 +45,6 @@ function IouReportActionMessage({action, displayAsGroup, reportID, style, isHidd
         iouMessage = getIOUReportActionDisplayMessage(translate, action, transaction, report, bankAccountList);
     }
 
-    const isApprovedOrSubmittedReportAction = isApprovedOrSubmittedReportActionUtils(action);
-    const isHoldReportAction = [CONST.REPORT.ACTIONS.TYPE.HOLD, CONST.REPORT.ACTIONS.TYPE.UNHOLD].some((type) => type === action.actionName);
-
-    const fragments = getReportActionMessageFragments(translate, action);
-
-    const renderReportActionItemFragments = (shouldWrapInText: boolean): ReactElement | ReactElement[] => {
-        const reportActionItemFragments = fragments.map((fragment, index) => (
-            <ReportActionItemFragment
-                /* eslint-disable-next-line react/no-array-index-key */
-                key={`actionFragment-${action.reportActionID}-${index}`}
-                reportActionID={action.reportActionID}
-                fragment={fragment}
-                iouMessage={iouMessage}
-                isThreadParentMessage={isThreadParentMessage(action, reportID)}
-                pendingAction={action.pendingAction}
-                actionName={action.actionName}
-                source={isAddCommentAction(action) ? getOriginalMessage(action)?.source : ''}
-                accountID={action.actorAccountID ?? CONST.DEFAULT_NUMBER_ID}
-                style={style}
-                displayAsGroup={displayAsGroup}
-                isApprovedOrSubmittedReportAction={isApprovedOrSubmittedReportAction}
-                isHoldReportAction={isHoldReportAction}
-                // Since system messages from Old Dot begin with the person who performed the action,
-                // the first fragment will contain the person's display name and their email. We'll use this
-                // to decide if the fragment should be from left to right for RTL display names e.g. Arabic for proper
-                // formatting.
-                isFragmentContainingDisplayName={index === 0}
-                moderationDecision={getReportActionMessage(action)?.moderationDecision?.decision}
-            />
-        ));
-
-        // Approving or submitting reports in oldDot results in system messages made up of multiple fragments of `TEXT` type
-        // which we need to wrap in `<Text>` to prevent them rendering on separate lines.
-        return shouldWrapInText ? <Text style={styles.ltr}>{reportActionItemFragments}</Text> : reportActionItemFragments;
-    };
-
     const openWorkspaceInvoicesPage = () => {
         const policyID = report?.policyID;
         if (!policyID) {
@@ -104,24 +56,24 @@ function IouReportActionMessage({action, displayAsGroup, reportID, style, isHidd
     const shouldShowAddBankAccountButton = action.actionName === CONST.REPORT.ACTIONS.TYPE.IOU && hasMissingInvoiceBankAccount(reportID) && !isSettled(reportID);
 
     return (
-        <View style={[styles.chatItemMessage, style]}>
-            {!isHidden ? (
-                <>
-                    {renderReportActionItemFragments(isApprovedOrSubmittedReportAction)}
-                    {shouldShowAddBankAccountButton && (
-                        <Button
-                            style={[styles.mt2, styles.alignSelfStart]}
-                            success
-                            text={translate('bankAccount.addBankAccount')}
-                            onPress={openWorkspaceInvoicesPage}
-                            sentryLabel={CONST.SENTRY_LABEL.REPORT.REPORT_ACTION_ITEM_MESSAGE_ADD_BANK_ACCOUNT}
-                        />
-                    )}
-                </>
-            ) : (
-                <Text style={[styles.textLabelSupporting, styles.lh20]}>{translate('moderation.flaggedContent')}</Text>
+        <ReportActionMessageContent
+            action={action}
+            displayAsGroup={displayAsGroup}
+            reportID={reportID}
+            style={style}
+            isHidden={isHidden}
+            iouMessage={iouMessage}
+        >
+            {shouldShowAddBankAccountButton && (
+                <Button
+                    style={[styles.mt2, styles.alignSelfStart]}
+                    success
+                    text={translate('bankAccount.addBankAccount')}
+                    onPress={openWorkspaceInvoicesPage}
+                    sentryLabel={CONST.SENTRY_LABEL.REPORT.REPORT_ACTION_ITEM_MESSAGE_ADD_BANK_ACCOUNT}
+                />
             )}
-        </View>
+        </ReportActionMessageContent>
     );
 }
 
diff --git a/src/pages/inbox/report/actionContents/ReportActionMessageContent.tsx b/src/pages/inbox/report/actionContents/ReportActionMessageContent.tsx
new file mode 100644
index 000000000000..f8fb6b55b10b
--- /dev/null
+++ b/src/pages/inbox/report/actionContents/ReportActionMessageContent.tsx
@@ -0,0 +1,95 @@
+import type {ReactElement, ReactNode} from 'react';
+import React from 'react';
+import type {StyleProp, TextStyle, ViewStyle} from 'react-native';
+import {View} from 'react-native';
+import Text from '@components/Text';
+import useLocalize from '@hooks/useLocalize';
+import useThemeStyles from '@hooks/useThemeStyles';
+import {
+    getOriginalMessage,
+    getReportActionMessage,
+    getReportActionMessageFragments,
+    isAddCommentAction,
+    isApprovedOrSubmittedReportAction as isApprovedOrSubmittedReportActionUtils,
+    isThreadParentMessage,
+} from '@libs/ReportActionsUtils';
+import ReportActionItemFragment from '@pages/inbox/report/ReportActionItemFragment';
+import CONST from '@src/CONST';
+import type {ReportAction} from '@src/types/onyx';
+
+type ReportActionMessageContentProps = {
+    /** The report action */
+    action: ReportAction;
+
+    /** Should the comment have the appearance of being grouped with the previous comment? */
+    displayAsGroup: boolean;
+
+    /** Additional styles to add after local styles. */
+    style?: StyleProp<ViewStyle & TextStyle>;
+
+    /** Whether or not the message is hidden by moderation */
+    isHidden?: boolean;
+
+    /** The ID of the report */
+    reportID: string | undefined;
+
+    /** Optional IOU display message passed into each fragment */
+    iouMessage?: string;
+
+    /** Optional content rendered below the fragments (for example an Add Bank Account button) */
+    children?: ReactNode;
+};
+
+function ReportActionMessageContent({action, displayAsGroup, reportID, style, isHidden = false, iouMessage, children}: ReportActionMessageContentProps) {
+    const styles = useThemeStyles();
+    const {translate} = useLocalize();
+    const isApprovedOrSubmittedReportAction = isApprovedOrSubmittedReportActionUtils(action);
+    const isHoldReportAction = [CONST.REPORT.ACTIONS.TYPE.HOLD, CONST.REPORT.ACTIONS.TYPE.UNHOLD].some((type) => type === action.actionName);
+    const fragments = getReportActionMessageFragments(translate, action);
+
+    const renderReportActionItemFragments = (shouldWrapInText: boolean): ReactElement | ReactElement[] => {
+        const reportActionItemFragments = fragments.map((fragment, index) => (
+            <ReportActionItemFragment
+                /* eslint-disable-next-line react/no-array-index-key */
+                key={`actionFragment-${action.reportActionID}-${index}`}
+                reportActionID={action.reportActionID}
+                fragment={fragment}
+                iouMessage={iouMessage}
+                isThreadParentMessage={isThreadParentMessage(action, reportID)}
+                pendingAction={action.pendingAction}
+                actionName={action.actionName}
+                source={isAddCommentAction(action) ? getOriginalMessage(action)?.source : ''}
+                accountID={action.actorAccountID ?? CONST.DEFAULT_NUMBER_ID}
+                style={style}
+                displayAsGroup={displayAsGroup}
+                isApprovedOrSubmittedReportAction={isApprovedOrSubmittedReportAction}
+                isHoldReportAction={isHoldReportAction}
+                // Since system messages from Old Dot begin with the person who performed the action,
+                // the first fragment will contain the person's display name and their email. We'll use this
+                // to decide if the fragment should be from left to right for RTL display names e.g. Arabic for proper
+                // formatting.
+                isFragmentContainingDisplayName={index === 0}
+                moderationDecision={getReportActionMessage(action)?.moderationDecision?.decision}
+            />
+        ));
+
+        // Approving or submitting reports in oldDot results in system messages made up of multiple fragments of `TEXT` type
+        // which we need to wrap in `<Text>` to prevent them rendering on separate lines.
+        return shouldWrapInText ? <Text style={styles.ltr}>{reportActionItemFragments}</Text> : reportActionItemFragments;
+    };
+
+    return (
+        <View style={[styles.chatItemMessage, style]}>
+            {!isHidden ? (
+                <>
+                    {renderReportActionItemFragments(isApprovedOrSubmittedReportAction)}
+                    {children}
+                </>
+            ) : (
+                <Text style={[styles.textLabelSupporting, styles.lh20]}>{translate('moderation.flaggedContent')}</Text>
+            )}
+        </View>
+    );
+}
+
+export default ReportActionMessageContent;

From 2894a40922cbea59ab0acd9d51c01f920fd51380 Mon Sep 17 00:00:00 2001
From: Lukasz Modzelewski <lukasz.modzelewski@callstack.com>
Date: Mon, 27 Apr 2026 17:00:29 +0200
Subject: [PATCH 4/5] refactor: remove unreached
 shouldShowAddBankAccountButton, add unit tests

---
 .../actionContents/IouReportActionMessage.tsx | 29 +-------
 .../ReportActionMessageContent.tsx            | 12 +--
 tests/ui/PureReportActionItemTest.tsx         | 74 +++++++++++++++++++
 3 files changed, 79 insertions(+), 36 deletions(-)

diff --git a/src/pages/inbox/report/actionContents/IouReportActionMessage.tsx b/src/pages/inbox/report/actionContents/IouReportActionMessage.tsx
index e423b3a75d2d..cf11b3cc3bf9 100644
--- a/src/pages/inbox/report/actionContents/IouReportActionMessage.tsx
+++ b/src/pages/inbox/report/actionContents/IouReportActionMessage.tsx
@@ -1,16 +1,12 @@
 import React from 'react';
 import type {StyleProp, TextStyle, ViewStyle} from 'react-native';
-import Button from '@components/Button';
 import useLocalize from '@hooks/useLocalize';
 import useOnyx from '@hooks/useOnyx';
-import useThemeStyles from '@hooks/useThemeStyles';
 import getNonEmptyStringOnyxID from '@libs/getNonEmptyStringOnyxID';
-import Navigation from '@libs/Navigation/Navigation';
 import {getLinkedTransactionID, getOriginalMessage, isActionOfType} from '@libs/ReportActionsUtils';
-import {getIOUReportActionDisplayMessage, hasMissingInvoiceBankAccount, isSettled} from '@libs/ReportUtils';
+import {getIOUReportActionDisplayMessage} from '@libs/ReportUtils';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
-import ROUTES from '@src/ROUTES';
 import type {ReportAction} from '@src/types/onyx';
 import ReportActionMessageContent from './ReportActionMessageContent';
 
@@ -32,7 +28,6 @@ type IouReportActionMessageProps = {
 };
 
 function IouReportActionMessage({action, displayAsGroup, reportID, style, isHidden = false}: IouReportActionMessageProps) {
-    const styles = useThemeStyles();
     const {translate} = useLocalize();
     const [report] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT}${getNonEmptyStringOnyxID(reportID)}`);
     const [transaction] = useOnyx(`${ONYXKEYS.COLLECTION.TRANSACTION}${getNonEmptyStringOnyxID(getLinkedTransactionID(action))}`);
@@ -45,16 +40,6 @@ function IouReportActionMessage({action, displayAsGroup, reportID, style, isHidd
         iouMessage = getIOUReportActionDisplayMessage(translate, action, transaction, report, bankAccountList);
     }
 
-    const openWorkspaceInvoicesPage = () => {
-        const policyID = report?.policyID;
-        if (!policyID) {
-            return;
-        }
-        Navigation.navigate(ROUTES.WORKSPACE_INVOICES.getRoute(policyID));
-    };
-
-    const shouldShowAddBankAccountButton = action.actionName === CONST.REPORT.ACTIONS.TYPE.IOU && hasMissingInvoiceBankAccount(reportID) && !isSettled(reportID);
-
     return (
         <ReportActionMessageContent
             action={action}
@@ -63,17 +48,7 @@ function IouReportActionMessage({action, displayAsGroup, reportID, style, isHidd
             style={style}
             isHidden={isHidden}
             iouMessage={iouMessage}
-        >
-            {shouldShowAddBankAccountButton && (
-                <Button
-                    style={[styles.mt2, styles.alignSelfStart]}
-                    success
-                    text={translate('bankAccount.addBankAccount')}
-                    onPress={openWorkspaceInvoicesPage}
-                    sentryLabel={CONST.SENTRY_LABEL.REPORT.REPORT_ACTION_ITEM_MESSAGE_ADD_BANK_ACCOUNT}
-                />
-            )}
-        </ReportActionMessageContent>
+        />
     );
 }
 
diff --git a/src/pages/inbox/report/actionContents/ReportActionMessageContent.tsx b/src/pages/inbox/report/actionContents/ReportActionMessageContent.tsx
index f8fb6b55b10b..7ddef7d14162 100644
--- a/src/pages/inbox/report/actionContents/ReportActionMessageContent.tsx
+++ b/src/pages/inbox/report/actionContents/ReportActionMessageContent.tsx
@@ -1,4 +1,4 @@
-import type {ReactElement, ReactNode} from 'react';
+import type {ReactElement} from 'react';
 import React from 'react';
 import type {StyleProp, TextStyle, ViewStyle} from 'react-native';
 import {View} from 'react-native';
@@ -35,12 +35,9 @@ type ReportActionMessageContentProps = {
 
     /** Optional IOU display message passed into each fragment */
     iouMessage?: string;
-
-    /** Optional content rendered below the fragments (for example an Add Bank Account button) */
-    children?: ReactNode;
 };
 
-function ReportActionMessageContent({action, displayAsGroup, reportID, style, isHidden = false, iouMessage, children}: ReportActionMessageContentProps) {
+function ReportActionMessageContent({action, displayAsGroup, reportID, style, isHidden = false, iouMessage}: ReportActionMessageContentProps) {
     const styles = useThemeStyles();
     const {translate} = useLocalize();
     const isApprovedOrSubmittedReportAction = isApprovedOrSubmittedReportActionUtils(action);
@@ -81,10 +78,7 @@ function ReportActionMessageContent({action, displayAsGroup, reportID, style, is
     return (
         <View style={[styles.chatItemMessage, style]}>
             {!isHidden ? (
-                <>
-                    {renderReportActionItemFragments(isApprovedOrSubmittedReportAction)}
-                    {children}
-                </>
+                renderReportActionItemFragments(isApprovedOrSubmittedReportAction)
             ) : (
                 <Text style={[styles.textLabelSupporting, styles.lh20]}>{translate('moderation.flaggedContent')}</Text>
             )}
diff --git a/tests/ui/PureReportActionItemTest.tsx b/tests/ui/PureReportActionItemTest.tsx
index 10475e7dc251..06d31c1b9ba6 100644
--- a/tests/ui/PureReportActionItemTest.tsx
+++ b/tests/ui/PureReportActionItemTest.tsx
@@ -15,6 +15,7 @@ import {setHasRadio} from '@libs/NetworkState';
 import Parser from '@libs/Parser';
 import {getIOUActionForReportID} from '@libs/ReportActionsUtils';
 import PureReportActionItem from '@pages/inbox/report/PureReportActionItem';
+import ReportActionItemMessage from '@pages/inbox/report/ReportActionItemMessage';
 import colors from '@styles/theme/colors';
 import CONST from '@src/CONST';
 import type {TranslationPaths} from '@src/languages/types';
@@ -2483,4 +2484,77 @@ describe('PureReportActionItem', () => {
             expect(screen.getByText(translateLocal('actionableMentionTrackExpense.nothing' as TranslationPaths))).toBeOnTheScreen();
         });
     });
+
+    // Path: No FE flow creates IOU + reject/cancel/delete/approve actions; this defensive path is only
+    // reachable from BE-emitted actions
+    describe('IouReportActionMessage edge subtypes', () => {
+        const TEST_REPORT_ID = 'iouEdgeReport123';
+        const TEST_TRANSACTION_ID = 'iouEdgeTx456';
+
+        it.each([CONST.IOU.REPORT_ACTION_TYPE.REJECT, CONST.IOU.REPORT_ACTION_TYPE.CANCEL, CONST.IOU.REPORT_ACTION_TYPE.DELETE, CONST.IOU.REPORT_ACTION_TYPE.APPROVE])(
+            'renders IOU display text for IOU + %s action when transaction exists in Onyx',
+            async (subtype) => {
+                await act(async () => {
+                    await Onyx.merge(`${ONYXKEYS.COLLECTION.TRANSACTION}${TEST_TRANSACTION_ID}`, {
+                        transactionID: TEST_TRANSACTION_ID,
+                        amount: 4200,
+                        currency: 'USD',
+                        reportID: TEST_REPORT_ID,
+                        merchant: 'Test Merchant',
+                    });
+                    await Onyx.merge(`${ONYXKEYS.COLLECTION.REPORT}${TEST_REPORT_ID}`, {
+                        reportID: TEST_REPORT_ID,
+                        type: CONST.REPORT.TYPE.EXPENSE,
+                        statusNum: CONST.REPORT.STATUS_NUM.OPEN,
+                        stateNum: CONST.REPORT.STATE_NUM.OPEN,
+                    });
+                });
+
+                const action = createReportAction(CONST.REPORT.ACTIONS.TYPE.IOU, {
+                    type: subtype,
+                    IOUReportID: TEST_REPORT_ID,
+                    IOUTransactionID: TEST_TRANSACTION_ID,
+                    amount: 4200,
+                    currency: 'USD',
+                });
+                renderItemWithAction(action);
+                await waitForBatchedUpdatesWithAct();
+
+                // getIOUReportActionDisplayMessage only special-cases `type === 'pay'`. For all other action
+                // types, the displayed text is picked from the REPORT's state (isSettled, isReportApproved)
+                // and the action's structural shape (split bill, track expense).
+                expect(screen.getByText(translateLocal('iou.expenseAmount', '-$42.00', 'Test Merchant'))).toBeOnTheScreen();
+            },
+        );
+
+        it('renders flagged content text instead of IOU display when isHidden is true', async () => {
+            const action = createReportAction(CONST.REPORT.ACTIONS.TYPE.IOU, {
+                type: CONST.IOU.REPORT_ACTION_TYPE.REJECT,
+                IOUReportID: TEST_REPORT_ID,
+                IOUTransactionID: TEST_TRANSACTION_ID,
+                amount: 4200,
+                currency: 'USD',
+            });
+
+            render(
+                <ComposeProviders components={[OnyxListItemProvider, LocaleContextProvider, HTMLEngineProvider]}>
+                    <OptionsListContextProvider>
+                        <ScreenWrapper testID="test">
+                            <PortalProvider>
+                                <ReportActionItemMessage
+                                    action={action}
+                                    displayAsGroup={false}
+                                    reportID={TEST_REPORT_ID}
+                                    isHidden
+                                />
+                            </PortalProvider>
+                        </ScreenWrapper>
+                    </OptionsListContextProvider>
+                </ComposeProviders>,
+            );
+            await waitForBatchedUpdatesWithAct();
+
+            expect(screen.getByText(translateLocal('moderation.flaggedContent'))).toBeOnTheScreen();
+        });
+    });
 });

From f36341b37d14e5aa35b91c2c1544ffb38424a5e5 Mon Sep 17 00:00:00 2001
From: Lukasz Modzelewski <lukasz.modzelewski@callstack.com>
Date: Mon, 27 Apr 2026 18:40:24 +0200
Subject: [PATCH 5/5] add additional comment

---
 .../inbox/report/actionContents/ReportActionMessageContent.tsx   | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/pages/inbox/report/actionContents/ReportActionMessageContent.tsx b/src/pages/inbox/report/actionContents/ReportActionMessageContent.tsx
index 7ddef7d14162..ac2bc0603e25 100644
--- a/src/pages/inbox/report/actionContents/ReportActionMessageContent.tsx
+++ b/src/pages/inbox/report/actionContents/ReportActionMessageContent.tsx
@@ -47,6 +47,7 @@ function ReportActionMessageContent({action, displayAsGroup, reportID, style, is
     const renderReportActionItemFragments = (shouldWrapInText: boolean): ReactElement | ReactElement[] => {
         const reportActionItemFragments = fragments.map((fragment, index) => (
             <ReportActionItemFragment
+                // Message fragments don't have stable unique IDs, so index is the best available key
                 /* eslint-disable-next-line react/no-array-index-key */
                 key={`actionFragment-${action.reportActionID}-${index}`}
                 reportActionID={action.reportActionID}