[Due for payment 2025-07-08] [Better Expense Report View] [$250] Sender>Receiver instead of Receiver>Sender is shown for expense submitted by receiver in IOU Report Preview

[mitarachim]

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.51-0
Reproducible in staging?: Yes
Reproducible in production?: Yes
If this was caught during regression testing, add the test name, ID and link from TestRail: https://expensify.testrail.io/index.php?/tests/view/6163518
Email or phone of affected tester (no customers): applausetester+160510kh@applause.expensifail.com
Issue reported by: Applause Internal Team
Device used: Mac 15.4 / Chrome
App Component: Money Requests

Action Performed:

Precondition:

• Log in with Expensifail account.

1. Go to staging.new.expensify.com
2. [User A] Open DM with User B.
3. [User A] Submit an expense to User B.
4. [User B} Open DM with User A.
5. [User B] Do not open the expense preview. Submit an expense to User A.
6. [User B] Note that the expense preview is missing A > B indicator.
7. [User B] Click on the expense preview.
8. [User B] Go back to main chat.

Expected Result:

In Step 6. after submitting expense to User A, the expense preview will show A > B indicator immediately.

In Step 8, the expense preview will show User B > User A for the expense submitted by User B in Step 5.

Actual Result:

In Step 6. after submitting expense to User A, the expense preview does not show A > B indicator. It is only displayed after opening the expense report.

In Step 8, the expense preview shows User A > User B instead of User B > User A for the expense submitted by User B in Step 5.

Workaround:

Unknown

Platforms:

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

Screenshots/Videos

Bug6840971_1748067166159.20250524_140615.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021927315742344553873
• Upwork Job ID: 1927315742344553873
• Last Price Increase: 2025-06-10

Issue Owner

Current Issue Owner: @garrettmknight

[melvin-bot]

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

[thelullabyy]

Proposal

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

In Step 6. after submitting expense to User A, the expense preview does not show A > B indicator. It is only displayed after opening the expense report.

What is the root cause of that problem?

after submitting expense to User A, the expense preview does not show A > B indicator

1. After submitting the expense to user A, the amount of the userA's transaction can't be updated to negative amount immediately, it's only updated if we open the expense report. And shouldShowIOUData is false which makes the preview doesn't show the sender/receiver data.

App/src/components/ReportActionItem/MoneyRequestReportPreview/index.tsx

Lines 68 to 75 in a76fe90

	const shouldShowIOUData = useMemo(() => {
	if (!isIOUReport(iouReport) && action.childType !== CONST.REPORT.TYPE.IOU) {
	return false;
	}
	// eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
	return transactions.some((transaction) => (transaction?.modifiedAmount || transaction?.amount) < 0);
	}, [transactions, action.childType, iouReport]);

the expense preview will show User B > User A for the expense submitted by User B in Step 5

2. The getIOUData function will check the original value of amount to return the sender/receiver accordingly here, but we pass the requestAmount that is getting from transactionDetails which is always positive amount. So all transactions in the preview display the same Sender > Receiver

App/src/components/ReportActionItem/TransactionPreview/TransactionPreviewContent.tsx

Line 118 in a76fe90

? getIOUData(managerID, ownerAccountID, isIOUReport(iouReport) || reportPreviewAction?.childType === CONST.REPORT.TYPE.IOU, personalDetails, requestAmount ?? 0)

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

1. With problem 1, I think it's not a bug because it depends on the backend data of the transaction that is not related with the new created transaction in the API.

2. With problem 2, we should pass the original amount value here to get the correct sender/receiver data

getIOUData(managerID, ownerAccountID, isIOUReport(iouReport) || reportPreviewAction?.childType === CONST.REPORT.TYPE.IOU, personalDetails, transaction?.modifiedAmount ?? transaction?.amount ?? 0)

App/src/components/ReportActionItem/TransactionPreview/TransactionPreviewContent.tsx

Line 118 in a76fe90

? getIOUData(managerID, ownerAccountID, isIOUReport(iouReport) || reportPreviewAction?.childType === CONST.REPORT.TYPE.IOU, personalDetails, requestAmount ?? 0)

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

It's the wrong value we passed to the function then no need the test here.

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.

[dmkt9]

🚨 Edited by proposal-police: This proposal was edited at 2025-06-11 14:53:42 UTC.

Proposal

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

In Step 6. after submitting expense to User A, the expense preview does not show A > B indicator. It is only displayed after opening the expense report.

In Step 8, the expense preview shows User A > User B instead of User B > User A for the expense submitted by User B in Step 5.

What is the root cause of that problem?

In Step 6. after submitting expense to User A, the expense preview does not show A > B indicator. It is only displayed after opening the expense report.

1. Since the initial transaction amount is always positive, and the recipient and sender depend on managerID and ownerAccountID, which have been explained very clearly here:
   

   App/src/libs/IOUUtils.ts

   Lines 80 to 85 in 526a0e4

   	/**
   	* The owner of the IOU report is the account who is owed money and the manager is the one who owes money!
   	* In case the owner/manager swap, we need to update the owner of the IOU report and the report total, since it is always positive.
   	* For example: if user1 owes user2 $10, then we have: {ownerAccountID: user2, managerID: user1, total: $10 (a positive amount, owed to user2)}
   	* If user1 requests $17 from user2, then we have: {ownerAccountID: user1, managerID: user2, total: $7 (still a positive amount, but now owed to user1)}
   	*

2. Therefore, when submitting an IOU request, all transactions have positive amounts, making shouldShowIOUData always false at this point:
   

   App/src/components/ReportActionItem/MoneyRequestReportPreview/index.tsx

   Lines 68 to 75 in 526a0e4

   	const shouldShowIOUData = useMemo(() => {
   	if (!isIOUReport(iouReport) && action.childType !== CONST.REPORT.TYPE.IOU) {
   	return false;
   	}
   	// eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
   	return transactions.some((transaction) => (transaction?.modifiedAmount || transaction?.amount) < 0);
   	}, [transactions, action.childType, iouReport]);

3. As a result, iouData is always undefined here, so the A > B indicator does not appear:
   

   App/src/components/ReportActionItem/TransactionPreview/TransactionPreviewContent.tsx

   Lines 120 to 123 in 526a0e4

   	const iouData = shouldShowIOUData
   	? getIOUData(managerID, ownerAccountID, isIOUReport(iouReport) || reportPreviewAction?.childType === CONST.REPORT.TYPE.IOU, personalDetails, requestAmount ?? 0)
   	: undefined;
   	const {from, to} = iouData ?? {from: null, to: null};

In Step 8, the expense preview shows User A > User B instead of User B > User A for the expense submitted by User B in Step 5.

1. The sender and receiver are determined here, and the requestAmount value is used to swap between the sender and receiver:
   

   App/src/components/ReportActionItem/TransactionPreview/TransactionPreviewContent.tsx

   Lines 120 to 122 in 526a0e4

   	const iouData = shouldShowIOUData
   	? getIOUData(managerID, ownerAccountID, isIOUReport(iouReport) || reportPreviewAction?.childType === CONST.REPORT.TYPE.IOU, personalDetails, requestAmount ?? 0)
   	: undefined;

2. However, requestAmount is obtained here:
   

   App/src/components/ReportActionItem/TransactionPreview/TransactionPreviewContent.tsx

   Lines 64 to 68 in 526a0e4

   	const transactionDetails = useMemo<Partial<TransactionDetails>>(() => getTransactionDetails(transaction, undefined, policy) ?? {}, [transaction, policy]);
   	const managerID = iouReport?.managerID ?? reportPreviewAction?.childManagerAccountID ?? CONST.DEFAULT_NUMBER_ID;
   	const ownerAccountID = iouReport?.ownerAccountID ?? reportPreviewAction?.childOwnerAccountID ?? CONST.DEFAULT_NUMBER_ID;
   	const isReportAPolicyExpenseChat = isPolicyExpenseChat(chatReport);
   	const {amount: requestAmount, comment: requestComment, merchant, tag, category, currency: requestCurrency} = transactionDetails;

3. And through the getAmount function:
   

   App/src/libs/TransactionUtils/index.ts

   Line 552 in 526a0e4

   function getAmount(transaction: OnyxInputOrEntry<Transaction>, isFromExpenseReport = false, isFromTrackedExpense = false): number {

4. However, the getAmount function always returns an absolute value for IOU, so requestAmount is always positive:

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

• Because shouldShowIOUData originally depends on the sign of transaction.amount, it’s prone to breaking the UI when managerID, ownerAccountID, and transaction.amount keep changing—especially if both parties take turns sending large IOU amounts.
• Instead, we’ll base it on reportAction.actorAccountID from that transaction’s IOU report. That value is always fixed and never changes, since it directly reflects who initiated the IOU request.

1. The function for calculating the value of shouldShowIOUData needs to be refactored:
   Retrieve all displayable actorAccountIDs from the IOU report actions. If more than one ID is found, it means the request was sent by both parties.

   App/src/components/ReportActionItem/MoneyRequestReportPreview/index.tsx

   Lines 67 to 74 in 1cd33a2

   	const shouldShowIOUData = useMemo(() => {
   	if (!isIOUReport(iouReport) && action.childType !== CONST.REPORT.TYPE.IOU) {
   	return false;
   	}
   	// eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
   	return transactions.some((transaction) => (transaction?.modifiedAmount || transaction?.amount) < 0);
   	}, [transactions, action.childType, iouReport]);

const [visibleIOUReportActions] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${getNonEmptyStringOnyxID(iouReportID)}`, {
    selector: (reportActions: OnyxEntry<ReportActions>) => {
        const visibleReportAction = getSortedReportActionsForDisplay(reportActions, canUserPerformWriteAction(iouReport), false);
        return visibleReportAction.filter((reportAction) => isMoneyRequestAction(reportAction));
    },
    canBeMissing: true,
});
const actorAccountIDsFromReportActions = [...new Set(visibleIOUReportActions?.map((reportAction) => reportAction.actorAccountID).filter((accountID) => !!accountID))];

const shouldShowIOUData = actorAccountIDsFromReportActions.length > 1;

2. Since the IOU requester is always the owner of that IOU report, use reportAction.actorAccountID to correct the managerID and ownerAccountID values.
   

   App/src/components/ReportActionItem/TransactionPreview/TransactionPreviewContent.tsx

   Line 67 in 1cd33a2

   const ownerAccountID = iouReport?.ownerAccountID ?? reportPreviewAction?.childOwnerAccountID ?? CONST.DEFAULT_NUMBER_ID;

let managerID = iouReport?.managerID ?? reportPreviewAction?.childManagerAccountID ?? CONST.DEFAULT_NUMBER_ID;
let ownerAccountID = iouReport?.ownerAccountID ?? reportPreviewAction?.childOwnerAccountID ?? CONST.DEFAULT_NUMBER_ID;
// Ensure the actual ownerAccountID and managerID values are correct.
const actorAccountID = action?.actorAccountID ?? CONST.DEFAULT_NUMBER_ID;
if(ownerAccountID !== actorAccountID){
    managerID = ownerAccountID;
}
ownerAccountID = actorAccountID;

3. With managerID and ownerAccountID now set correctly in step 2, when fetching iouData we can drop requestAmount and pass in 0 (or leave it unchanged since requestAmount is always positive) to guarantee they aren’t swapped inside getIOUData.
   

   App/src/components/ReportActionItem/TransactionPreview/TransactionPreviewContent.tsx

   Lines 121 to 123 in 1cd33a2

   	const iouData = shouldShowIOUData
   	? getIOUData(managerID, ownerAccountID, isIOUReport(iouReport) || reportPreviewAction?.childType === CONST.REPORT.TYPE.IOU, personalDetails, requestAmount ?? 0)
   	: undefined;

// Since requestAmount is always ≥ 0, ensure that managerID and ownerAccountID always retain their original values.
const iouData = shouldShowIOUData
    ? getIOUData(managerID, ownerAccountID, isIOUReport(iouReport) || reportPreviewAction?.childType === CONST.REPORT.TYPE.IOU, personalDetails, 0)
    : undefined;

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

NA

What alternative solutions did you explore? (Optional)

NA
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.

[github-actions]

⚠️ @kpadmanabhan Thanks for your proposal. Please update it to follow the proposal template, as proposals are only reviewed if they follow that format (note the mandatory sections).

[kpadmanabhan]

⚠️ @kpadmanabhan Thanks for your proposal. Please update it to follow the proposal template, as proposals are only reviewed if they follow that format (note the mandatory sections).

Sorry. It was by mistake.

[kpadmanabhan]

Proposal

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

Receiver > Sender displayed in preview instead of Sender > Receiver.

What is the root cause of that problem?

Incorrect values passed to function. Sender value is passed to parameter Receicer and vise versa.

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

Update the function call to pass parameters in the right order.

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

Update existing tests with correct values and then validate explicitly for sender and receiver fields.

What alternative solutions did you explore? (Optional)

N.A.

[melvin-bot]

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