[HOLD for payment 2024-06-20] [$250] Android & iOS - Invoice - Workspace avatar for invoice chat is missing background

[lanitochka17]

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: 1.4-79-3
Reproducible in staging?: Y
Reproducible in production?: Y
If this was caught during regression testing, add the test name, ID and link from TestRail: N/A
Issue reported by: Applause -Internal Team

Action Performed:

Precondition:

• User has received invoice from other user

1. Go to staging.new.expensify.com
2. Go to invoice chat
3. Tap on the chat header
4. Tap on the workspace avatar

Expected Result:

Workspace avatar will be displayed without issue

Actual Result:

Workspace avatar for invoice chat is missing background

Workaround:

Unknown

Platforms:

Which of our officially supported platforms is this issue occurring on?

• Android: Native
• Android: mWeb Chrome
• iOS: Native
• iOS: mWeb Safari
• MacOS: Chrome / Safari
• MacOS: Desktop

Screenshots/Videos

Add any screenshot/video evidence

Bug6502466_1717576498786.RPReplay_Final1717576160.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~01b8ec4b7cdfc47e24
• Upwork Job ID: 1798519650738469863
• Last Price Increase: 2024-06-06
• Automatic offers:
• eh2077 | Reviewer | 102626829
• bernhardoj | Contributor | 102626832

Issue Owner

Current Issue Owner: @jliexpensify

[melvin-bot]

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

[lanitochka17]

@jliexpensify FYI I haven't added the External label as I wasn't 100% sure about this issue. Please take a look and add the label if you agree it's a bug and can be handled by external contributors

[lanitochka17]

We think that this bug might be related to #vip-vsp

[bernhardoj]

Proposal

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

Workspace avatar background is missing when receiving an invoice from policy that we don't have the data yet.

What is the root cause of that problem?

The bg style will be applied if the attachment component has the file object.

App/src/components/Attachments/AttachmentView/index.tsx

Lines 121 to 125 in 8dbec8d

	if (isWorkspaceAvatar && file) {
	const defaultWorkspaceAvatarColor = StyleUtils.getDefaultWorkspaceAvatarColor(file.name ?? '');
	iconFillColor = defaultWorkspaceAvatarColor.fill;
	additionalStyles = [defaultWorkspaceAvatarColor];
	}

The file object contains a name property to decide the bg color. In our case, the name should be the policy ID.

App/src/pages/ReportAvatar.tsx

Lines 38 to 39 in 8dbec8d

	// In the case of default workspace avatar, originalFileName prop takes policyID as value to get the color of the avatar
	originalFileName={policy?.originalFileName ?? policy?.id}

However, in our case, the policy data is undefined, so the file object is undefined too. Then, how do other components show the color correctly? It's because they take the ID from report.policyID data.

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

Fallback to report?.policyID.
originalFileName={policy?.originalFileName ?? policy?.id ?? report?.policyID}

Or just replace them with report?.policyID.

Optionally, we can remove the file check here and use null-safety so the bg is still shown in case all data is undefined.

App/src/components/Attachments/AttachmentView/index.tsx

Lines 121 to 125 in 8dbec8d

	if (isWorkspaceAvatar && file) {
	const defaultWorkspaceAvatarColor = StyleUtils.getDefaultWorkspaceAvatarColor(file.name ?? '');
	iconFillColor = defaultWorkspaceAvatarColor.fill;
	additionalStyles = [defaultWorkspaceAvatarColor];
	}

if (isWorkspaceAvatar) {
    const defaultWorkspaceAvatarColor = StyleUtils.getDefaultWorkspaceAvatarColor(file?.name ?? '');

[melvin-bot]

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

[melvin-bot]

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

[jliexpensify]

Yikes, we should probably get this fixed ASAP