[Due for payment 2025-07-18] IOU - Avatar and sender name broken for IOUs

[izarutskaya]

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-9
Reproducible in staging?: Y
Reproducible in production?: Y
If this was caught during regression testing, add the test name, ID and link from TestRail:
Email or phone of affected tester (no customers):
Logs: https://stackoverflow.com/c/expensify/questions/4856
Expensify/Expensify Issue URL:
Issue reported by: @shawnborton
Slack conversation (hyperlinked to channel name): #expensify_bugs

Action Performed:

1. Go to https://staging.new.expensify.com/
2. Log in with any account (User A)
3. Click green + button > Create expense
4. Choose any user without IOU in chat and create expense
5. Log in as another user (User B)
6. Go to chat with user A
7. Create expense

Expected Result:

On step 4, user after sending someone else an IOU should see only his own avatar and his name as the message sender.
On step 7 when the IOU has expenses from both parties, THEN should show the diagonal avatar and use both names as the sender name (Jason & Shawn for example)

Actual Result:

On step 4 when user send someone else an IOU, he sees both sender and receiver avatars and receivers name as the sender of the IOU.
On step 7 when the IOU has expenses from both parties, user sees the diagonal avatar and only his name as the sender name.

Workaround:

Unknown

Platforms:

Select the officially supported platforms where the issue was reproduced:

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

Platforms Tested:

On which of our officially supported platforms was this issue tested:

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

Screenshots/Videos

Recording.3099.mp4

Recording.3101.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021927533490529600769
• Upwork Job ID: 1927533490529600769
• Last Price Increase: 2025-06-12

Issue Owner

Current Issue Owner: @lschurr

[melvin-bot]

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

[aadil42]

@izarutskaya, the steps are bit confusing. In step 3 I'm suppose to do this:
Click green + button > Create expense
then in step 5 again we want to do the above step?

What do you mean in step 4?

Also, can you clarify what do you mean in


Expected Result

and in

Actual Result

Thank you.

[izarutskaya]

Hi @aadil42 Sorry for confusing. Corrected steps.
Let me know if I can help something

[melvin-bot]

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

[melvin-bot]

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

[dmkt9]

🚨 Edited by proposal-police: This proposal was edited at 2025-06-02 07:43:49 UTC.

Proposal

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

On step 4 when user send someone else an IOU, he only sees receiver avatar and receivers name as the sender of the IOU.
On step 7 when the IOU has expenses from both parties, user sees the diagonal avatar and only his name as the sender name.

What is the root cause of that problem?

On step 4 when user send someone else an IOU, he only sees receiver avatar and receivers name as the sender of the IOU.

• The avatar is retrieved here:
  

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

  Lines 247 to 286 in 33f1586

  	const getAvatar = () => {
  	if (shouldShowSubscriptAvatar) {
  	return (
  	<SubscriptAvatar
  	mainAvatar={icon}
  	secondaryAvatar={secondaryAvatar}
  	noMargin
  	backgroundColor={getBackgroundColor()}
  	/>
  	);
  	}
  	if (displayAllActors) {
  	return (
  	<MultipleAvatars
  	icons={[icon, secondaryAvatar]}
  	isInReportAction
  	shouldShowTooltip
  	secondAvatarStyle={[StyleUtils.getBackgroundAndBorderStyle(theme.appBG), isHovered ? StyleUtils.getBackgroundAndBorderStyle(theme.hoverComponentBG) : undefined]}
  	/>
  	);
  	}
  	return (
  	<UserDetailsTooltip
  	accountID={Number(delegatePersonalDetails && !isWorkspaceActor ? actorAccountID : icon.id ?? CONST.DEFAULT_NUMBER_ID)}
  	delegateAccountID={action?.delegateAccountID}
  	icon={icon}
  	>
  	<View>
  	<Avatar
  	containerStyles={[styles.actionAvatar]}
  	source={icon.source}
  	type={icon.type}
  	name={icon.name}
  	avatarID={icon.id}
  	fallbackIcon={fallbackIcon}
  	/>
  	</View>
  	</UserDetailsTooltip>
  	);
  	};

• And the displayAllActors variable does not handle the case where there are multiple transactions and transactions from both parties
  

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

  Line 129 in 33f1586

  const displayAllActors = isReportPreviewAction && !isTripRoom && !isPolicyExpenseChat(report);

On step 7 when the IOU has expenses from both parties, user sees the diagonal avatar and only his name as the sender name.

• The name of the IOU is retrieved here, and it does not handle the case where there are multiple transactions and transactions from both parties—it only displays the recipient's name:
  

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

  Lines 317 to 328 in 33f1586

  	{personArray?.map((fragment, index) => (
  	<ReportActionItemFragment
  	// eslint-disable-next-line react/no-array-index-key
  	key={`person-${action?.reportActionID}-${index}`}
  	accountID={Number(delegatePersonalDetails && !isWorkspaceActor ? actorAccountID : icon.id ?? CONST.DEFAULT_NUMBER_ID)}
  	fragment={{...fragment, type: fragment.type ?? '', text: fragment.text ?? ''}}
  	delegateAccountID={action?.delegateAccountID}
  	isSingleLine
  	actorIcon={icon}
  	moderationDecision={getReportActionMessage(action)?.moderationDecision?.decision}
  	/>
  	))}

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

• If we only 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. Retrieve all displayable actorAccountIDs from the IOU report actions.
   

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

   Line 118 in 1cd33a2

   const isReportPreviewAction = action?.actionName === CONST.REPORT.ACTIONS.TYPE.REPORT_PREVIEW;

const [visibleIOUReportActions] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${getNonEmptyStringOnyxID(iouReport?.reportID)}`, {
    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))];

2. If actorAccountIDsFromReportActions has more than one ID is found, it means the request was sent by both parties:
   

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

   Line 129 in 1cd33a2

   const displayAllActors = isReportPreviewAction && !isTripRoom && !isPolicyExpenseChat(report);

const displayAllActors = isReportPreviewAction && !isTripRoom && !isPolicyExpenseChat(report) && actorAccountIDsFromReportActions.length > 1;

3. Fix actorAccountID for correct display:
   • Ensure actorAccountID always represents the sender when the entire IOU report comes from one party.
     

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

     Line 119 in 1cd33a2

     const actorAccountID = getReportActionActorAccountID(action, iouReport, report, delegatePersonalDetails);

// Ensure that if all expenses are from a single sender, the sender is displayed.
const actorAccountID =
    // eslint-disable-next-line rulesdir/prefer-at
    actorAccountIDsFromReportActions.length === 1 ? actorAccountIDsFromReportActions[0] : getReportActionActorAccountID(action, iouReport, report, delegatePersonalDetails);

• If the report has entries from both parties, actorAccountID should be the report’s owner—update the condition in getReportActionActorAccountID to return ownerAccountID.
  

  App/src/libs/ReportUtils.ts

  Lines 9482 to 9484 in 1cd33a2

  	if (isPolicyExpenseChat(report) || delegatePersonalDetails) {
  	return ownerAccountID;
  	}

if (isPolicyExpenseChat(report) || isIOUReport(iouReport) || delegatePersonalDetails) {
    return ownerAccountID;
}

4. Update secondaryAccountId so it holds the remaining user’s ID when displayAllActors = true.
   

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

   Line 165 in 1cd33a2

   const secondaryAccountId = ownerAccountID === actorAccountID || isInvoiceReport ? actorAccountID : ownerAccountID;

const managerID = iouReport?.managerID ?? action?.childManagerAccountID;
const secondaryAccountId = ownerAccountID === actorAccountID || isInvoiceReport ? managerID : ownerAccountID;

5. Refactor the UI to ensure additional users are shown when displayAllActors = true.
   

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

   Lines 317 to 328 in 33f1586

   	{personArray?.map((fragment, index) => (
   	<ReportActionItemFragment
   	// eslint-disable-next-line react/no-array-index-key
   	key={`person-${action?.reportActionID}-${index}`}
   	accountID={Number(delegatePersonalDetails && !isWorkspaceActor ? actorAccountID : icon.id ?? CONST.DEFAULT_NUMBER_ID)}
   	fragment={{...fragment, type: fragment.type ?? '', text: fragment.text ?? ''}}
   	delegateAccountID={action?.delegateAccountID}
   	isSingleLine
   	actorIcon={icon}
   	moderationDecision={getReportActionMessage(action)?.moderationDecision?.decision}
   	/>
   	))}

<View style={[displayAllActors && [styles.flex1, styles.flexRow, styles.overflowHidden]]}>
    {personArray?.map((fragment, index) => (
        <ReportActionItemFragment
            style={[styles.flexShrink1, styles.flexBasis0]}
            // eslint-disable-next-line react/no-array-index-key
            key={`person-${action?.reportActionID}-${index}`}
            accountID={Number(delegatePersonalDetails && !isWorkspaceActor ? actorAccountID : (icon.id ?? CONST.DEFAULT_NUMBER_ID))}
            fragment={{...fragment, type: fragment.type ?? '', text: fragment.text ?? ''}}
            delegateAccountID={action?.delegateAccountID}
            isSingleLine
            actorIcon={icon}
            moderationDecision={getReportActionMessage(action)?.moderationDecision?.decision}
        />
    ))}
    {displayAllActors && (
        <>
            <Text
                numberOfLines={1}
                style={[styles.chatItemMessageHeaderSender, styles.flexShrink0]}
            >
                {`\u00A0&\u00A0`}
            </Text>
            <ReportActionItemFragment
                style={[styles.flexShrink1, styles.flexBasis0]}
                // eslint-disable-next-line react/no-array-index-key
                key={`person-${action?.reportActionID}-${personArray?.length ?? 0}`}
                accountID={Number(secondaryAvatar.id ?? CONST.DEFAULT_NUMBER_ID)}
                fragment={{type: 'TEXT', text: secondaryAvatar.name ?? ''}}
                delegateAccountID={action?.delegateAccountID}
                isSingleLine
                actorIcon={icon}
                moderationDecision={getReportActionMessage(action)?.moderationDecision?.decision}
            />
        </>
    )}
</View>

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.

[nkdengineer]

🚨 Edited by proposal-police: This proposal was edited at 2025-06-03 04:21:59 UTC.

Proposal

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

On step 4 when user send someone else an IOU, he only sees receiver avatar and receivers name as the sender of the IOU.
On step 7 when the IOU has expenses from both parties, user sees the diagonal avatar and only his name as the sender name.

What is the root cause of that problem?

1. We're showing the manger infor for the report preview

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

Line 119 in 352de72

const actorAccountID = getReportActionActorAccountID(action, iouReport, report, delegatePersonalDetails);

App/src/libs/ReportUtils.ts

Lines 9589 to 9597 in 352de72

	case CONST.REPORT.ACTIONS.TYPE.REPORT_PREVIEW: {
	const ownerAccountID = iouReport?.ownerAccountID ?? reportAction?.childOwnerAccountID;
	const actorAccountID = iouReport?.managerID ?? reportAction?.childManagerAccountID;
	if (isPolicyExpenseChat(report) || delegatePersonalDetails) {
	return ownerAccountID;
	}
	return actorAccountID;

2. We only show the actor in the header. It starts happening after this PR

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

Lines 206 to 210 in 352de72

	const personArray = displayName
	? [
	{
	type: 'TEXT',
	text: displayName,

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

1. We should return the owner for the iou report

if (isPolicyExpenseChat(report) || isIOUReport(iouReport) || delegatePersonalDetails) {
    return ownerAccountID;
}

App/src/libs/ReportUtils.ts

Lines 9589 to 9597 in 352de72

	case CONST.REPORT.ACTIONS.TYPE.REPORT_PREVIEW: {
	const ownerAccountID = iouReport?.ownerAccountID ?? reportAction?.childOwnerAccountID;
	const actorAccountID = iouReport?.managerID ?? reportAction?.childManagerAccountID;
	if (isPolicyExpenseChat(report) || delegatePersonalDetails) {
	return ownerAccountID;
	}
	return actorAccountID;

and then we should update the condition to show all actors here, we will show it for iou report if both users create the expense

const [transactions = []] = useOnyx(ONYXKEYS.COLLECTION.TRANSACTION, {
    selector: (_transactions) => reportTransactionsSelector(_transactions, iouReport?.reportID),
    initialValue: [],
    canBeMissing: true,
});
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 displayAllActors = isReportPreviewAction && !isTripRoom && !isPolicyExpenseChat(report) && (!isIOUReport(iouReport) || shouldShowIOUData);

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

Line 129 in 4142c94

const displayAllActors = isReportPreviewAction && !isTripRoom && !isPolicyExpenseChat(report);

2. We need to update the secondary avatar as manger here since the main avatar is updated to owner now

const managerAccountID = iouReport?.managerID ?? action?.childManagerAccountID;
const secondaryAccountId = ownerAccountID === actorAccountID || isInvoiceReport ? managerAccountID : ownerAccountID;

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

Line 165 in 4142c94

const secondaryAccountId = ownerAccountID === actorAccountID || isInvoiceReport ? actorAccountID : ownerAccountID;

3. We can use the condition we used to show the sender/receiver data here if this condition is true we will show both sender/receiver in the header of this action

Then we will update the header title here to show the secondaryAvatar name if shouldShowIOUData is true

<View style={[styles.flexRow]}>

... // actor name
{shouldShowIOUData && (
    <>
        <Text
        numberOfLines={1}
        style={[styles.chatItemMessageHeaderSender, styles.pre]}
        >
            {` & `}
        </Text>
        <ReportActionItemFragment
            style={[styles.flex1]}
            key={`person-${action?.reportActionID}-${1}`}
            accountID={parseInt(`${secondaryAvatar?.id ?? -1}`, 10)}
            fragment={{type: 'TEXT', text: secondaryAvatar.name ?? ''}}
            delegateAccountID={action?.delegateAccountID}
            isSingleLine
            actorIcon={secondaryAvatar}
            moderationDecision={getReportActionMessage(action)?.moderationDecision?.decision}
        />
    </>
)}
</View>

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

Line 317 in 352de72

{personArray?.map((fragment, index) => (

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

We can update ReportActionItemSingleTest to verify the header is correct in the case report preview action of IOU report when both users create the expense.

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.