P2P-New message line is shown under the "Paid with wallet" message

[nlemma]

If you haven’t already, check out our contributing guidelines for onboarding and email contributors@expensify.com to request to join our Slack channel!

---

Version Number: 9.3.8-0
Reproducible in staging?: Yes
Reproducible in production?: Yes
If this was caught during regression testing, add the test name, ID and link from BrowserStack: https://test-management.browserstack.com/projects/2219752/folder/13176725/test-cases/41237082
Email or phone of affected tester (no customers): N/A
Issue reported by: Applause Internal Team
Bug source: Exploratory - Significant User Experience Deterioration
Device used: MacBook Air 15.7.3 Chrome, iPhone 15 iOS 26.1
App Component: Money Requests

Action Performed:

Preconditions: User A and User B both have wallets enabled. Instructions are here https://test-management.browserstack.com/projects/2219752/folder/13176725/test-cases/41237082

1. Sign in to ND as User A
2. Created a chat with User B, open the chat
3. Click "+" button - Pay User B - enter an amount - Pay with Wallet
4. Open the transaction

Expected Result:

New message line is displayed above the message "paid with wallet"

Actual Result:

New message line is displayed under the message "paid with wallet"

Workaround:

Unknown

Platforms:

• Android: App
• Android: mWeb Chrome
• iOS: App
• iOS: mWeb Safari
• iOS: mWeb Chrome
• Windows: Chrome
• MacOS: Chrome / Safari

Screenshots/Videos

Bug7056859_1769218967399.New_message_line_in_pay_someome.mp4

View all open jobs on GitHub

Issue Owner

Current Issue Owner: @ShridharGoel

[melvin-bot]

Triggered auto assignment to @stephanieelliott (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details. Please add this bug to a GH project, as outlined in the SO.

[melvin-bot]

Triggered auto assignment to Contributor-plus team member for initial proposal review - @ShridharGoel (External)

[MadalitsoPhiri]

Proposal

Please re-state the problem that we are trying to solve in this issue.

When User A pays User B with Expensify Wallet, the new message line indicator appears below the "paid with wallet" message instead of above it. This incorrect positioning makes it harder for users to identify where new messages begin in the transaction thread.

What is the root cause of that problem?

In ReportActionItemContentCreated.tsx, the UnreadActionIndicator component (which displays the new message line) is rendered after the transaction content (MoneyRequestView/TaskView components) instead of before it. This causes the visual indicator to appear below the payment message when it should appear above to properly mark the start of new messages.

What changes do you think we should make in order to solve the problem?

In ReportActionItemContentCreated.tsx, move the renderThreadDivider to render before the content components in three locations:

1. For transaction threads:Place {renderThreadDivider} before <MoneyRequestView> instead of after
   

   App/src/pages/home/report/ReportActionItemContentCreated.tsx

   Line 128 in d2334c9

   {renderThreadDivider}

2. For task reports: Place {renderThreadDivider} before <TaskView> instead of after
   

   App/src/pages/home/report/ReportActionItemContentCreated.tsx

   Line 163 in d2334c9

   {renderThreadDivider}

3. For combined reports with transaction threads : Place {renderThreadDivider} before the second <MoneyRequestView> instead of after

App/src/pages/home/report/ReportActionItemContentCreated.tsx

Line 191 in d2334c9

{renderThreadDivider}

This ensures the new message line indicator appears at the correct position above the content, marking where unread messages begin.

What alternative solutions did you explore? (Optional)

An alternative would have been to modify the CSS/styling to reorder the visual appearance using flexDirection: 'column-reverse' or absolute positioning, but this would be a hacky workaround that could cause issues with other layouts and accessibility. Moving the actual component order is the cleaner, more maintainable solution that ensures proper DOM structure and screen reader compatibility.

[daledah]

Proposal

Please re-state the problem that we are trying to solve in this issue.

When User A sends money to User B using "Pay with Wallet", the "New" message line indicator is displayed below the "paid with wallet" message instead of above it.

What is the root cause of that problem?

The issue is in buildOptimisticIOUReport function in ReportUtils.ts. When creating an optimistic IOU report, lastReadTime is not being set:

App/src/libs/ReportUtils.ts

Lines 6663 to 6685 in d2334c9

	return {
	type: CONST.REPORT.TYPE.IOU,
	chatReportID,
	currency,
	managerID: payerAccountID,
	ownerAccountID: payeeAccountID,
	participants,
	reportID: optimisticIOUReportID ?? generateReportID(),
	stateNum: isSendingMoney ? CONST.REPORT.STATE_NUM.APPROVED : CONST.REPORT.STATE_NUM.SUBMITTED,
	statusNum: isSendingMoney ? CONST.REPORT.STATUS_NUM.REIMBURSED : CONST.REPORT.STATE_NUM.SUBMITTED,
	total,
	unheldTotal: total,
	nonReimbursableTotal: 0,
	unheldNonReimbursableTotal: 0,
	// We don't translate reportName because the server response is always in English
	reportName: `${payerEmail} owes ${formattedTotal}`,
	parentReportID: chatReportID,
	created,
	lastVisibleActionCreated: created,
	fieldList: policy?.fieldList,
	parentReportActionID,
	};

The function returns a report object with created and lastVisibleActionCreated but missing lastReadTime.

When lastReadTime is undefined, the isReportActionUnread function treats ALL non-CREATED actions as unread:

App/src/libs/ReportActionsUtils.ts

Lines 2121 to 2126 in d2334c9

	function isReportActionUnread(reportAction: OnyxEntry<ReportAction>, lastReadTime?: string) {
	if (!lastReadTime) {
	return !isCreatedAction(reportAction);
	}
	return !!(reportAction && lastReadTime && reportAction.created && lastReadTime < reportAction.created);

This causes the unread marker to appear in an incorrect position when viewing the IOU report.

Compare this with buildOptimisticChatReport which correctly sets lastReadTime:

App/src/libs/ReportUtils.ts

Line 7943 in d2334c9

lastReadTime: currentTime,

What changes do you think we should make in order to solve the problem?

Add lastReadTime to the return object in buildOptimisticIOUReport:

 return {
     ...
     lastVisibleActionCreated: created,
+    lastReadTime: created,
     fieldList: policy?.fieldList,
     parentReportActionID,
 };

Setting lastReadTime to created ensures that when the IOU report is optimistically created, the initial actions (created at or before the report's creation time) are marked as read, and the unread marker will only appear for genuinely new actions received after the user opens the report.

What alternative solutions did you explore? (Optional)

[ShridharGoel]

Both the solutions don't work. If it is working for you, feel free to attach a recording.

[nkdengineer]

Proposal

Please re-state the problem that we are trying to solve in this issue.

New message line is displayed under the message "paid with wallet"

What is the root cause of that problem?

The current problem is that the new message line appears in expense report of send money request. The RCA is the optimistic iou report doesn't update lastReadTime as the iou action here

App/src/libs/actions/IOU/SendMoney.ts

Line 176 in 87e6d66

const optimisticIOUReportData: OnyxUpdate<typeof ONYXKEYS.COLLECTION.REPORT> = {

What changes do you think we should make in order to solve the problem?

Update the lastReadTime as the created of the pay iou action

const optimisticIOUReportData: OnyxUpdate<typeof ONYXKEYS.COLLECTION.REPORT> = {
        onyxMethod: Onyx.METHOD.SET,
        key: `${ONYXKEYS.COLLECTION.REPORT}${optimisticIOUReport.reportID}`,
        value: {
            ...
            lastReadTime: optimisticIOUReportAction.created,
        },
    };

App/src/libs/actions/IOU/SendMoney.ts

Line 176 in 87e6d66

const optimisticIOUReportData: OnyxUpdate<typeof ONYXKEYS.COLLECTION.REPORT> = {

What alternative solutions did you explore? (Optional)

Reminder: Please use plain English, be brief and avoid jargon. Feel free to use images, charts or pseudo-code if necessary. Do not post large multi-line diffs or write walls of text. Do not create PRs unless you have been hired for this job.

[ShridharGoel]

Adding lastReadTime to optimisticIOUReportData also doesn't seem to solve it.

And, is something missing in this line of your root cause section?

The current problem is that the new message line appears in expense report of send money request.

[nkdengineer]

@ShridharGoel Is the mark unread line appear below the message from your side? From my side, it appears above the message. I think the mark unread shouldn't appear here because the action is created by the current user with the new expense report. This report should be read.