Expensify Card - Default avatar is displayed for cardholder that has custom avatar

[IuliiaHerets]

If you haven’t already, check out our contributing guidelines for onboarding and email [email protected] to request to join our Slack channel!

---

Version Number: 9.0.30-9 Reproducible in staging?: Y Reproducible in production?: Y Email or phone of affected tester (no customers): [email protected] Issue reported by: Applause Internal Team

Action Performed:

1. Go to staging.new.expensify.com
2. Go to workspace settings > Members.
3. Invite a member that has custom avatar.
4. Go to workspace settings > Expensify Card.
5. Click Issue card.
6. Issue a card to the member that has custom avatar.
7. Wait for the cardholder to show up on Expensify Card page.

Expected Result:

The cardholder's custom avatar will appear on Expensify Card page.

Actual Result:

The cardholder's default avatar is shown on Expensify Card page instead.

Workaround:

Unknown

Platforms:

• [x] Android: Native
• [x] Android: mWeb Chrome
• [x] iOS: Native
• [x] iOS: mWeb Safari
• [x] MacOS: Chrome / Safari
• [x] MacOS: Desktop

Screenshots/Videos

https://github.com/user-attachments/assets/21bfa5fd-8e5a-4930-b3c6-29af78bd5c92

View all open jobs on GitHub

[melvin-bot[bot]]

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

[IuliiaHerets]

@OfstadC 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

[etCoderDysto]

Proposal

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

Expensify Card - Default avatar is displayed for cardholder that has custom avatar

What is the root cause of that problem?

We are fetching defaultAvatar even if a custom avatar (cardholder?.avatar) is available. https://github.com/Expensify/App/blob/67333b9a68f93f034c555e70920803253076400e/src/pages/workspace/expensifyCard/WorkspaceCardListRow.tsx#L40-L41

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

We should use getAvatar to fetch custom avatar when custom avatar is available, and fetch default avatar when it is not available.

source={getAvatar(cardholder?.avatar, cardholder?.accountID)}

Note: we can also use getAvatarUrl

What alternative solutions did you explore? (Optional)

[cretadn22]

Proposal

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

Default avatar is displayed for cardholder that has custom avatar

What is the root cause of that problem?

https://github.com/Expensify/App/blob/67333b9a68f93f034c555e70920803253076400e/src/pages/workspace/expensifyCard/WorkspaceCardListRow.tsx#L40-L41

We consistently use the default avatar in the WorkspaceCardListRow.tsx. It means we always create a new avatar based on the accountID

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

We should use cardHolder.avatar and set FallbackAvatar as the default value, similar to how it's implemented on the detail page

https://github.com/Expensify/App/blob/67333b9a68f93f034c555e70920803253076400e/src/pages/workspace/expensifyCard/WorkspaceExpensifyCardDetailsPage.tsx#L111

Note: If cardHolder.avatar is null, we should display FallbackAvatar rather than generating a new avatar based on the accountID

What alternative solutions did you explore? (Optional)

[OfstadC]

Not overdue - assigned over weekend. Looking at this today...

[melvin-bot[bot]]

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

[melvin-bot[bot]]

Current assignee @allgandalf is eligible for the External assigner, not assigning anyone new.

[DylanDylann]

Let's make it similar to WorkspaceExpensifyCardDetailsPage.tsx

@cretadn22's proposal looks good to me

🎀 👀 🎀 C+ reviewed

[melvin-bot[bot]]

Triggered auto assignment to @lakchote, see https://stackoverflow.com/c/expensify/questions/7972 for more details.

[melvin-bot[bot]]

📣 @DylanDylann 🎉 An offer has been automatically sent to your Upwork account for the Contributor role 🎉 Thanks for contributing to the Expensify app!

Offer link Upwork job Please accept the offer and leave a comment on the Github issue letting us know when we can expect a PR to be ready for review 🧑‍💻 Keep in mind: Code of Conduct | Contributing 📖

[OfstadC]

It looks like this was deployed 5 days ago, so we'll issue payment on 2024-09-20.

And we need to issue payment to @DylanDylann & @cretadn22. Please let me know if i'm missing anyone.

@DylanDylann could you please propose any necessary regression tests?

[DylanDylann]

No need regression test.

And we only need to pay @cretadn22

[OfstadC]

Thanks @DylanDylann !

[OfstadC]

@cretadn22 - I've sent you an offer here - https://www.upwork.com/nx/wm/offer/104042037

[cretadn22]

@OfstadC I accepted

[OfstadC]

Payment Summary

• @cretadn22 paid $250 via Upwork