[Due for payment 2025-04-30] [$250] Expense preview & whisper are interactable when track expense is deleted offline via context menu

[jponikarchuk]

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.1.17-0
Reproducible in staging?: Yes
Reproducible in production?: Yes
If this was caught on HybridApp, is this reproducible on New Expensify Standalone?: Yes, reproducible on both
If this was caught during regression testing, add the test name, ID and link from TestRail: Exp
Email or phone of affected tester (no customers): applausetester+2239023@applause.expensifail.com
Issue reported by: Applause Internal Team
Device used: Mac 15.3 / Chrome
App Component: Money Requests

Action Performed:

Precondition:

• Account has self DM.

1. Go to staging.new.expensify.com
2. Go to self DM.
3. Go offline.
4. Create a manual expense in self DM.
5. Right click on the expense preview > Delete expense.
6. Delete the expense.

Expected Result:

• The expense preview should be crossed out and not clickable.
• Actionable whisper should disappear.

Actual Result:

• The expense preview shows loading skeleton and it opens a loading page when clicked.
• Actionable whisper does not disappear and the options are interactable when the expense is deleted.

This issue only happens when the expense is deleted via context menu in offline mode.

Workaround:

Unknown

Platforms:

• Android: Standalone
• Android: HybridApp
• Android: mWeb Chrome
• iOS: Standalone
• iOS: HybridApp
• iOS: mWeb Safari
• MacOS: Chrome / Safari
• MacOS: Desktop

Screenshots/Videos

1.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021904411230056491887
• Upwork Job ID: 1904411230056491887
• Last Price Increase: 2025-03-25
• Automatic offers:
• Krishna2323 | Contributor | 106706642

Issue Owner

Current Issue Owner: @VictoriaExpensify

[melvin-bot]

Triggered auto assignment to @VictoriaExpensify (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.

[Krishna2323]

🚨 Edited by proposal-police: This proposal was edited at 2025-03-25 07:11:13 UTC.

Proposal

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

• Expense preview & whisper are interactable when track expense is deleted offline via context menu

What is the root cause of that problem?

• When using the context menu action to delete an expense, we attempt to get the reportID from the moneyRequestAction's original message. However, in the case of tracked expenses, we intentionally set the reportID to "0", which causes "0" to be passed to deleteTrackExpense, leading to this bug.

App/src/pages/home/report/ContextMenu/ContextMenuActions.tsx

Lines 781 to 792 in 8deddfa

	onPress: (closePopover, {reportID: reportIDParam, reportAction, moneyRequestAction}) => {
	// eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
	const reportID = isMoneyRequestAction(moneyRequestAction) ? getOriginalMessage(moneyRequestAction)?.IOUReportID || reportIDParam : reportIDParam;
	if (closePopover) {
	// Hide popover, then call showDeleteConfirmModal
	hideContextMenu(false, () => showDeleteModal(reportID, moneyRequestAction ?? reportAction));
	return;
	}
	// No popover to hide, call showDeleteConfirmModal immediately
	showDeleteModal(reportID, moneyRequestAction ?? reportAction);
	},

App/src/libs/ReportUtils.ts

Lines 6996 to 7010 in 8deddfa

	const iouAction = buildOptimisticIOUReportAction({
	type,
	amount,
	currency,
	comment,
	participants,
	transactionID,
	paymentType,
	iouReportID: isPersonalTrackingExpense ? '0' : iouReport.reportID,
	isSettlingUp,
	isSendMoneyFlow,
	isOwnPolicyExpenseChat,
	created: iouActionCreationTime,
	linkedExpenseReportAction: linkedTrackedExpenseReportAction,
	});

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

• We have several options to solve this bug. We can:

1. Pass undefined instead of "0" to buildOptimisticIOUReportAction.
   

   App/src/libs/ReportUtils.ts

   Line 7004 in 8deddfa

   iouReportID: isPersonalTrackingExpense ? '0' : iouReport.reportID,

What specific scenarios should we cover in automated tests to prevent reintroducing this issue in the future?

• We can create a test for buildOptimisticMoneyRequestEntities to check if that returns the action with iouReportID as undefined when isPersonalTrackingExpense is true.

What alternative solutions did you explore? (Optional)

2. In ContextMenuActions, we can check if the action is type of track expense and in that case we will use reportIDParam instead
   

   App/src/pages/home/report/ContextMenu/ContextMenuActions.tsx

   Lines 781 to 783 in 8deddfa

   	onPress: (closePopover, {reportID: reportIDParam, reportAction, moneyRequestAction}) => {
   	// eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
   	const reportID = isMoneyRequestAction(moneyRequestAction) ? getOriginalMessage(moneyRequestAction)?.IOUReportID || reportIDParam : reportIDParam;

const reportID = !isTrackExpenseAction(moneyRequestAction) && isMoneyRequestAction(moneyRequestAction) ? getOriginalMessage(moneyRequestAction)?.IOUReportID || reportIDParam : reportIDParam;

What alternative solutions did you explore? (Optional 2)

• Instead of using "0", we can simply use the original report ID for all type of expenses.

Result

[melvin-bot]

Job added to Upwork: https://www.upwork.com/jobs/~021904411230056491887

[melvin-bot]

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

[daledah]

Proposal

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

• The expense preview shows loading skeleton and it opens a loading page when clicked.
  Actionable whisper does not disappear and the options are interactable when the expense is deleted.

What is the root cause of that problem?

• When creating a track expense, the iou action sets originalMessage.IOUReportID to "0" optimistically:

App/src/libs/ReportUtils.ts

Line 7004 in 8deddfa

iouReportID: isPersonalTrackingExpense ? '0' : iouReport.reportID,

App/src/libs/ReportUtils.ts

Line 5604 in 8deddfa

IOUReportID,

• When deleting the track expense, the app retrieves the reportID from:
  

  App/src/pages/home/report/ContextMenu/ContextMenuActions.tsx

  Line 783 in 8deddfa

  const reportID = isMoneyRequestAction(moneyRequestAction) ? getOriginalMessage(moneyRequestAction)?.IOUReportID || reportIDParam : reportIDParam;

Since the reportID remains a string "0", the error only occurs offline. Online, the BE correctly returns originalMessage.IOUReportID as a number 0, avoiding this issue.

• Consequently, chatReportID in:
  

  App/src/libs/actions/IOU.ts

  Line 7309 in 8deddfa

  function deleteTrackExpense(chatReportID: string | undefined, transactionID: string | undefined, reportAction: OnyxTypes.ReportAction, isSingleTransactionView = false) {

  
  is still "0" (string), causing an early return in:
  

  App/src/libs/actions/IOU.ts

  Line 7318 in 8deddfa

  if (!isSelfDM(chatReport)) {

• This mismatch between string and number types is the root cause of the problem.

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

• The root cause is an inconsistency between the type of originalMessage.IOUReportID in the optimistic state and the value returned by the BE. To fix this, we need to update the following line:

App/src/pages/home/report/ContextMenu/ContextMenuActions.tsx

Line 783 in 8deddfa

const reportID = isMoneyRequestAction(moneyRequestAction) ? getOriginalMessage(moneyRequestAction)?.IOUReportID || reportIDParam : reportIDParam;

            const reportID = isMoneyRequestAction(moneyRequestAction) ? Number(getOriginalMessage(moneyRequestAction)?.IOUReportID) || reportIDParam : reportIDParam;

Change: Wrap getOriginalMessage(moneyRequestAction)?.IOUReportID with Number() to ensure type consistency.

What specific scenarios should we cover in automated tests to prevent reintroducing this issue in the future?

• Create a utility function to extract reportID in:

App/src/pages/home/report/ContextMenu/ContextMenuActions.tsx

Line 783 in 8deddfa

const reportID = isMoneyRequestAction(moneyRequestAction) ? getOriginalMessage(moneyRequestAction)?.IOUReportID || reportIDParam : reportIDParam;

Verify the function returns the correct value.

What alternative solutions did you explore? (Optional)

• We can update:
  

  App/src/libs/ReportUtils.ts

  Line 7004 in 8deddfa

  iouReportID: isPersonalTrackingExpense ? '0' : iouReport.reportID,

        iouReportID: isPersonalTrackingExpense ? 0 : iouReport.reportID,

and

App/src/libs/ReportUtils.ts

Line 5597 in 8deddfa

const IOUReportID = iouReportID || generateReportID();

    const IOUReportID = iouReportID ?? generateReportID();

• Improvement: Replace const IOUReportID = iouReportID ?? generateReportID();, with:

    const IOUReportID = isPersonalTrackingExpense ? iouReportID : iouReportID || generateReportID();

This ensures IOUReportID retains the provided value for personal tracking expenses while still falling back to generateReportID() when needed.

[melvin-bot]

@Ollyws Whoops! This issue is 2 days overdue. Let's get this updated quick!