[$250] Invoice - Sender's workspace name is not shown in invoice receiver chat.

[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: V9.1.95-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://test-management.browserstack.com/projects/2219752/folder/13176730/test-cases/41237121
Email or phone of affected tester (no customers): Slottwo1 2@gmail.com
Issue reported by: Applause Internal Team
Device used: Redminote 10s android 13
App Component: Money Requests

Action Performed:

1. Go to https://staging.new.expensify.com/home
2. Send a invoice
3. Launch app
4. Open invoice
5. Tap header
6. Tap avatar

Expected Result:

Sender's workspace name must be shown in invoice receiver chat.

Actual Result:

Sender's workspace name is not shown in invoice receiver chat.

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

1.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021957840387363616421
• Upwork Job ID: 1957840387363616421
• Last Price Increase: 2025-09-02

Issue Owner

Current Issue Owner: @thesahindia

[melvin-bot]

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

[samranahm]

Proposal

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

Invoice - Sender's workspace name is not shown in invoice receiver chat.

What is the root cause of that problem?

The invoice policy is not available in invoice receiver policies and we get undefined here

App/src/pages/workspace/WorkspaceAvatar.tsx

Line 17 in 1ce10fd

const policy = usePolicy(policyID);

for invoice policy and return empty string for header title

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

We should pass the reportID in route?.params and use that reportID to get the parentReport in invoice report case and use the parentReport?.policyName as fallBack name

const {policyID, reportID, letter: fallbackLetter} = route?.params ?? {};

const report = getReportOrDraftReport(reportID);
const parentReport = getParentReport(report);
.
.
headerTitle={policy?.name ?? parentReport?.policyName ?? ''}

like we did here

App/src/libs/ReportUtils.ts

Lines 5520 to 5532 in 1ce10fd

	if (isInvoiceReport(report) || isInvoiceRoom(parentReport)) {
	let reportName = `${getPolicyName({report: parentReport})} & ${getInvoicePayerName(parentReport)}`;
	// This will get removed as part of https://github.com/Expensify/App/issues/59961
	// eslint-disable-next-line deprecation/deprecation
	if (isArchivedNonExpenseReport(parentReport, !!getReportNameValuePairs(parentReport?.reportID)?.private_isArchived)) {
	reportName += ` (${translateLocal('common.archived')})`;
	}
	return {
	reportName,
	};
	}

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

N/A

What alternative solutions did you explore? (Optional)

We can explicitly check for invoice report and invoice room and can use getPolicyName(parentReport) for extra robustness

Note

We have another bug linked to this Issue.

Bug description

Currently if invoice sender has a photo as workspace avatar that does not display in WorkspaceAvatar page. video

because here

App/src/pages/workspace/WorkspaceAvatar.tsx

Line 19 in 4d29406

const policyAvatarURL = policy?.avatarURL;

we try getting the avatar from policy but that is undefined and we end up getting the letter as workspace avatar

Solution

to handle this case we should use parentReport?.policyAvatar

const report = getReportOrDraftReport(reportID);
const parentReport = useParentReport(report?.reportID);
const policyAvatarURL = policy?.avatarURL ?? parentReport?.policyAvatar;

here

App/src/pages/workspace/WorkspaceAvatar.tsx

Lines 17 to 19 in 4d29406

	const policy = usePolicy(policyID);
	const [isLoadingApp = false] = useOnyx(ONYXKEYS.IS_LOADING_APP, {canBeMissing: true, initWithStoredValues: false});
	const policyAvatarURL = policy?.avatarURL;

we display the workspace avatar in ReportActionAvatarSubscript we can add the new argument reportID and use that here

App/src/components/ReportActionAvatars/ReportActionAvatar.tsx

Lines 83 to 86 in 4d29406

	const onPress = () => {
	if (isWorkspace) {
	return Navigation.navigate(ROUTES.WORKSPACE_AVATAR.getRoute(String(avatarID), firstLetter));
	}

and update the WORKSPACE_AVATAR route to explicitly pass the reportID

WORKSPACE_AVATAR: {
    route: 'workspaces/:policyID/avatar',
    getRoute: (policyID: string, fallbackLetter?: UpperCaseCharacters, reportID?: string) => {
        const queryParams: string[] = [];
        if (fallbackLetter) {
            queryParams.push(`letter=${fallbackLetter}`);
        }
        if (reportID) {
            queryParams.push(`reportID=${reportID}`);
        }

        return `workspaces/${policyID}/avatar${queryParams.length ? `?${queryParams.join('&')}` : ''}` as const;
    },
},

we can also use Manual string concat to pass the reportID to route so we can have that here

App/src/pages/workspace/WorkspaceAvatar.tsx

Line 16 in 4d29406

const {policyID, letter: fallbackLetter} = route?.params ?? {};

Second bug and solution

invoice.sender.avatar.mp4

[u-2234]

Proposal

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

Expense- Incomplete message context menu & unresponsive whisper after deleting expense offline

What is the root cause of that problem?

The root cause is in the getChatRoomSubtitle function in src/libs/ReportUtils.ts. For invoice rooms, this function was returning a hardcoded translation key 'workspace.common.invoices' instead of dynamically retrieving the sender's workspace name from the invoice room's policyID field.

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

We should modify the getChatRoomSubtitle function to return the sender's workspace name for invoice rooms instead of the hardcoded "Invoices" text. This can be achieved by calling getPolicyName({report}) when the report is an invoice room, since invoice rooms store the sender's workspace ID in their policyID field.

The change involves updating this code block:

if (isInvoiceRoom(report)) {
    return translateLocal('workspace.common.invoices');
}

To this:

if (isInvoiceRoom(report)) {
    return getPolicyName({report});
}

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

1. Invoice Room Subtitle Test: Test that invoice rooms display the sender's workspace name in the subtitle instead of "Invoices"
2. Different Workspace Names: Test with various workspace names to ensure the policy name is correctly retrieved
3. Non-Invoice Room Behavior: Verify that non-invoice rooms still display their expected subtitles
4. Missing Policy Data: Test edge case where policy data might be missing or incomplete
5. HeaderView Integration: Test that the HeaderView component correctly displays the updated subtitle for invoice rooms

What alternative solutions did we explore? (Optional)

[lorretheboy]

Proposal

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

Invoice - Sender's workspace name is not shown in invoice receiver chat.

What is the root cause of that problem?

Invoice receivers don't have access to the sender's policy data. And also, the workspace name wasn't being passed through the navigation flow to the WorkspaceAvatar component. Thus, the component only relied on policy?.name which returns undefined for unauthorized policies

App/src/pages/workspace/WorkspaceAvatar.tsx

Line 27 in c21a302

headerTitle={policy?.name ?? ''}

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

Add 1 more props for name here

App/src/libs/Navigation/types.ts

Line 2093 in e037dce

[SCREENS.WORKSPACE_AVATAR]: {

Then in WorkspaceAvatar

    const {policyID, letter: fallbackLetter, name: workspaceName} = route?.params ?? {};
    const displayName = workspaceName || policy?.name || '';

Then use displayName for headerTitle

App/src/pages/workspace/WorkspaceAvatar.tsx

Line 27 in c21a302

headerTitle={policy?.name ?? ''}

Add name value here

            return Navigation.navigate(ROUTES.WORKSPACE_AVATAR.getRoute(String(avatarID), firstLetter, name));

App/src/components/ReportActionAvatars/ReportActionAvatar.tsx

Line 85 in c21a302

return Navigation.navigate(ROUTES.WORKSPACE_AVATAR.getRoute(String(avatarID), firstLetter));

Update getRoute to support workspaceName

        getRoute: (policyID: string, fallbackLetter?: UpperCaseCharacters, workspaceName?: string) => {
            const queryParams: string[] = [];
            if (fallbackLetter) {
                queryParams.push(`letter=${fallbackLetter}`);
            }
            if (workspaceName) {
                queryParams.push(`name=${encodeURIComponent(workspaceName)}`);
            }
            return `workspaces/${policyID}/avatar${queryParams.length > 0 ? `?${queryParams.join('&')}` : ''}` as const;
        },

App/src/ROUTES.ts

Lines 1268 to 1271 in e037dce

	WORKSPACE_AVATAR: {
	route: 'workspaces/:policyID/avatar',
	getRoute: (policyID: string, fallbackLetter?: UpperCaseCharacters) => `workspaces/${policyID}/avatar${fallbackLetter ? `?letter=${fallbackLetter}` : ''}` as const,
	},

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.

[samranahm]

Proposal updated

---

Updates

• Mention another issue linked with this issue
• Added more details to solve both issues

Original proposed solution and RCA is same

[trjExpensify]

@Expensify/design and @grgia just checking the OG doc (internal only link), these were the intended avatars in the headers. Is that still accurate?

[shawnborton]

Hmm good question. Is there any notion of the Invoice room being owned by one party or the other, or is it basically always a shared room where invoices can flow back and forth?

If the latter is the case, we actually might want to use diagonal avatars where it feels like a more 50/50 split.

[trjExpensify]

Also a good question. I don't know how that would work as the invoice reports presumably need to be on the workspace of the sender, so I imagine they are one-directional. 🤔 @cristipaval or @davidcardoza should know?

[cristipaval]

Yes, the invoice room is one way. The sender is always a workspace, and it is the owner.

The invoice rooms were initially designed to be bidirectional, but we then dropped the idea.