[$250] IOU-Submit expense on foreign currency, total briefly greyed out on top

[IuliiaHerets]

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.0.28-0
Reproducible in staging?: Y
Reproducible in production?: Y
Issue reported by: Applause Internal Team

Action Performed:

1. Launch app
2. Open 1:1 chat with no prior conversation
3. Create 2 submit expense in local currency
4. From report page, create one more expense in local currency
5. Note total is not greyed out on top
6. Create a expense in foreign currency
7. Note total is briefly greyed out on top

Expected Result:

Submit expense on foreign currency, total briefly must not be greyed out on top.

Actual Result:

Submit expense on foreign currency, total briefly greyed out on top.

Workaround:

Unknown

Platforms:

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

Screenshots/Videos

Bug6591507_1725354431270.Screenrecorder-2024-09-03-14-29-23-866_compress_1.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021831692684862783385
• Upwork Job ID: 1831692684862783385
• Last Price Increase: 2024-09-19
• Automatic offers:
• allgandalf | Reviewer | 104054700
• nyomanjyotisa | Contributor | 104054702

Issue Owner

Current Issue Owner: @allgandalf

[melvin-bot]

Triggered auto assignment to @muttmuure (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]

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

[nyomanjyotisa]

Edited by proposal-police: This proposal was edited at 2024-09-16 06:15:07 UTC.

Proposal

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

IOU-Submit expense on foreign currency, total briefly greyed out on top

What is the root cause of that problem?

We greyed the total value while waiting total update here

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

we should display a loading state on the total value while waiting the total updated if isOnline, and greyed it out only if isOffline

{!isTotalUpdated && !isOffline ? (
    <ActivityIndicator
        size="small"
        color={theme.textSupporting}
    />
) : (
    <Text
        numberOfLines={1}
        style={[styles.taskTitleMenuItem, styles.alignSelfCenter, !isTotalUpdated && styles.offlineFeedback.pending]}
    >
        {formattedTotalAmount}
    </Text>
)}

What alternative solutions did you explore? (Optional)

[Tony-MK]

Proposal

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

Submit expense on foreign currency, total briefly greyed out on top

What is the root cause of that problem?

When the isTotalUpdated is false because one of the transactions has a different currency from the workspace, the styles.offlineFeedback.pending is applied briefly before the total is updated.

App/src/components/ReportActionItem/MoneyReportView.tsx

Line 166 in 2d1f8cd

style={[styles.taskTitleMenuItem, styles.alignSelfCenter, !isTotalUpdated && styles.offlineFeedback.pending]}

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

We should check if the user is offline together with isTotalUpdated so it is applied only when the user is offline.

Let's change the style of the Text component for the total with the isOffline condition, as shown below.

\\ Get `isOffline`
const {isOffline} = useNetwork();

...

\\ Use it in the style of the `Text` component
style={[styles.taskTitleMenuItem, styles.alignSelfCenter, isOffline && !isTotalUpdated && styles.offlineFeedback.pending]} 

[Krishna2323]

Edited by proposal-police: This proposal was edited at 2023-10-04T15:33:00Z.

Proposal


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

IOU-Submit expense on foreign currency, total briefly greyed out on top

What is the root cause of that problem?

• styles.offlineFeedback.pending style is applied when isTotalUpdated is false.
  

  App/src/components/ReportActionItem/MoneyReportView.tsx

  Line 166 in 3e5da78

  style={[styles.taskTitleMenuItem, styles.alignSelfCenter, !isTotalUpdated && styles.offlineFeedback.pending]}

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


• To be consistent with other pages like MoneyRequestPreviewContent, we should show Pending... when isTotalUpdated is false.
• To do that, we should first remove the offline styling from the amount text here:
  

  App/src/components/ReportActionItem/MoneyReportView.tsx

  Line 166 in 3e5da78

  style={[styles.taskTitleMenuItem, styles.alignSelfCenter, !isTotalUpdated && styles.offlineFeedback.pending]}

• Wrap the amount row (with title text) with OfflineWithFeedback and pass !isTotalUpdated ? "update" : undefined as the value for pendingAction prop.
• We should update the formattedTotalAmount constant to:
  

  App/src/components/ReportActionItem/MoneyReportView.tsx

  Line 56 in 3e5da78

  const formattedTotalAmount = CurrencyUtils.convertToDisplayString(totalDisplaySpend, report.currency);

  
  TO:

const formattedTotalAmount = !isTotalUpdated ? translate('iou.fieldPending') : CurrencyUtils.convertToDisplayString(totalDisplaySpend, report.currency);

Note

We might also need minor style changes.

What alternative solutions did you explore? (Optional)

In offline mode, instead of Pending... we can use Total will be updated when you'll be back online.

Result

Monosnap.screencast.2024-09-04.07-29-28.mp4

[melvin-bot]

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

[melvin-bot]

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

[melvin-bot]

@muttmuure, @allgandalf Eep! 4 days overdue now. Issues have feelings too...

[allgandalf]

I will review the proposals tomorrow

[melvin-bot]

📣 It's been a week! Do we have any satisfactory proposals yet? Do we need to adjust the bounty for this issue? 💸

[allgandalf]

@Expensify/design , need your inputs here:

When we have two IOU's we show the total at the top right of the report:

When we submit 3rd expense with different currency, for a brief time the total is grayed out:

Screen.Recording.2024-09-15.at.3.37.49.PM.mov

What should be done in this case? should we show a loading state here or some message that total is loading ?

[dubielzyk-expensify]

Ah interesting. Yeah I'd prefer for us to do something more loading-y. Either ... or --. I forget where we do something similar, but perhaps other @Expensify/design remembers or have better suggestions

[shawnborton]

I'd also be fine even if we replaced the amount with our simple loading spinner while it calculated (so long as the height doesn't change so we don't get any jumpiness)

[nyomanjyotisa]

Proposal updated

[dannymcclain]

I'd also be fine even if we replaced the amount with our simple loading spinner while it calculated (so long as the height doesn't change so we don't get any jumpiness)

I like this idea. And if the spinner doesn't work, I like Jon's suggestion of using .... But I'm aligned with them that it would be nice to indicate loading/calculating somehow.

[melvin-bot]

@muttmuure @allgandalf this issue was created 2 weeks ago. Are we close to approving a proposal? If not, what's blocking us from getting this issue assigned? Don't hesitate to create a thread in #expensify-open-source to align faster in real time. Thanks!

[allgandalf]

@Expensify/design can we get a simple mock, it would help us all align on the visual effect we want :) or do we already use similar effect elsewhere?

[shawnborton]

We have an existing generic loading spinner in the app we can use. It would basically look like this:

[allgandalf]

Thanks for the mock @shawnborton 🙇 ,

Thanks for proposals everyone, all have the correct RCA, out of all proposals the most clean and the closet to mock of @shawnborton is of @nyomanjyotisa solution, so lets go with their proposal here

🎀👀🎀 C+ reviewed

[melvin-bot]

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

[melvin-bot]

📣 It's been a week! Do we have any satisfactory proposals yet? Do we need to adjust the bounty for this issue? 💸

[allgandalf]

bump for assignment @luacmartins

[melvin-bot]

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

Offer link
Upwork job

[melvin-bot]

📣 @nyomanjyotisa 🎉 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 📖

[allgandalf]

PR approved from my side ♻️ , waiting on @luacmartins for their review 🙇