[HOLD for payment 2023-10-10] [$500] Workspace - Opening rate unit workspace page on login displays '0.000' and changing value does not work

[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!

---

Action Performed:

1. Open the app
2. Open settings->workspaces->any workspace->reimbursements->Rate
3. Copy the URL
4. Logout and paste the URL
5. Login and observe that rate is displayed as '0.000'
6. Change the rate to any value and click save
7. Observe that app still displays old value and new value is not saved

Expected Result:

App should display correct value on rate unit workspace page on login and save the value if value is changed

Actual Result:

App displays '0.000' as rate on rate unit workspace page on login and on changing and saving the value, it does not change the value

Workaround:

Unknown

Platforms:

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

• Android / native
• Android / Chrome
• iOS / native
• iOS / Safari
• MacOS / Chrome / Safari
• MacOS / Desktop

Version Number: v1.3.57-6

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

Notes/Photos/Videos: Any additional supporting documentation

rate.appears.as.0.on.login.unit.workspace.mp4

Recording.6043.mp4

Expensify/Expensify Issue URL:

Issue reported by: @dhanashree-sawant

Slack conversation: https://expensify.slack.com/archives/C049HHMV9SM/p1692551644917109

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~014ad1f796cb41f15e
• Upwork Job ID: 1696988525560631296
• Last Price Increase: 2023-08-30
• Automatic offers:
• alitoshmatov | Contributor | 26784715
• dhanashree-sawant | Reporter | 26784718

[melvin-bot]

Triggered auto assignment to @kevinksullivan (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details.

[melvin-bot]

Bug0 Triage Checklist (Main S/O)

• This "bug" occurs on a supported platform (ensure Platforms in OP are ✅)
• This bug is not a duplicate report (check E/App issues and #expensify-bugs)
  • If it is, comment with a link to the original report, close the issue and add any novel details to the original issue instead
• This bug is reproducible using the reproduction steps in the OP. S/O
  • If the reproduction steps are clear and you're unable to reproduce the bug, check with the reporter and QA first, then close the issue.
  • If the reproduction steps aren't clear and you determine the correct steps, please update the OP.
• This issue is filled out as thoroughly and clearly as possible
  • Pay special attention to the title, results, platforms where the bug occurs, and if the bug happens on staging/production.
• I have reviewed and subscribed to the linked Slack conversation to ensure Slack/Github stay in sync

[alitoshmatov]

Proposal

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

Opening rate unit workspace page on login displays '0.000' and changing value does not work

What is the root cause of that problem?

The rate data is fetched using Policy.openWorkspaceReimburseView action. This action is triggered when we access Reimbursements page.

When we access rates page with link itself bypassing reimbursement page, this action is not triggered, thus making rate data not available for us.

Also another problem is that if you access it in offline mode or slow internet connection, the data won't be loaded and it shows 0, even if data is loaded if you are in rates page, it won't be updated in TextInput

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

To fetch data when rates page is directly accessed, we can apply something like this, which checks if we have rates data and if not it will try to fetch it:

 componentDidMount() {
        if (lodashGet(this.props, 'policy.customUnits', []).length === 0) {
            BankAccounts.setReimbursementAccountLoading(true);
            Policy.openWorkspaceReimburseView(this.props.policy.id);
        }
    }

We should update inputs when rate data is fetched. I couldn't find any way of modifying input's value, since inputs are using inputID and not value and onValueChange. But I hope there is a way, or we can just use value and onValueChange props.

The another problem with this approach is that when user is modifying inputs and data is fetched it will interrupt user and set input value itself confusing user.
I think we should show some type of loading indicator since user should be aware of that the input data is not available yet but they can change it if they want.

We can maybe utilize pendingActions here by passing reimbursementAccount.isLoading state

App/src/pages/workspace/reimburse/WorkspaceRateAndUnitPage.js

Line 129 in a997962

pendingAction={lodashGet(distanceCustomUnit, 'pendingAction') || lodashGet(distanceCustomRate, 'pendingAction')}

What alternative solutions did you explore? (Optional)

[samh-nl]

Proposal

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

Opening rate unit workspace page on login displays '0.000' and changing value does not work

What is the root cause of that problem?

The reimbursement rate information is loaded in the previous page in fetchData:

App/src/pages/workspace/reimburse/WorkspaceReimburseView.js

Lines 112 to 113 in fd755ee

	BankAccounts.setReimbursementAccountLoading(true);
	Policy.openWorkspaceReimburseView(props.policy.id);

However, when accessing the URL directly, fetchData is not called.

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

In WorkspaceRateAndUnitPage.js:

1. We should load the data on mount, but only if it's not already loading. When going through the normal route via Workspaces, there is no guarantee that loading has finished, so we need to make this conditional.

componentDidMount() {
    if (_.isEmpty(lodashGet(this.props, 'policy.customUnits', {})) && !this.props.isReimbursementAccountLoading) {
        BankAccounts.setReimbursementAccountLoading(true);
        Policy.openWorkspaceReimburseView(this.props.policy.id);
    }
}

2. Prevent rendering until the data is available. This ensures the input does not stick with the outdated, incorrect value due to defaultValue.

render() {
    ...
+     if (this.props.isReimbursementAccountLoading) {
+         return <FullscreenLoadingIndicator />;  
+     }
    ...
}

3. Connect using withOnyx to get the loading status of reimbursementAccount.

isReimbursementAccountLoading: {
    key: ONYXKEYS.REIMBURSEMENT_ACCOUNT,
    selector: (reimbursementAccount) => lodashGet(reimbursementAccount, 'isLoading', true),
},

What alternative solutions did you explore? (Optional)

N/A

[melvin-bot]

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

[melvin-bot]

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

[melvin-bot]

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