[$250] Distance - Distance edit system message only appears after refreshing the page

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

---

Version Number: 9.0.32-0
Reproducible in staging?: Y
Reproducible in production?: Y
If this was caught during regression testing, add the test name, ID and link from TestRail: https://expensify.testrail.io/index.php?/tests/view/4945031
Email or phone of affected tester (no customers): applausetester+kh010901@applause.expensifail.com
Logs: https://stackoverflow.com/c/expensify/questions/4856
Issue reported by: Applause-Internal team

Action Performed:

1. Go to staging.new.expensify.com
2. Go to workspace chat.
3. Submit a distance expense.
4. Go to transaction thread.
5. Click Distance.
6. Edit the distance and save it.

Expected Result:

Distance edit system message will appear after the new distance is saved.

Actual Result:

Distance edit system message does not appear after the new distance is saved. It only appears after refreshing the page.

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

Bug6599691_1726046020964.20240911_170930.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021834276537749459128
• Upwork Job ID: 1834276537749459128
• Last Price Increase: 2025-01-21
• Automatic offers:
• ZhenjaHorbach | Reviewer | 105877671
• klajdipaja | Contributor | 105877675

Issue Owner

Current Issue Owner: @RachCHopkins

[melvin-bot]

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

[melvin-bot]

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

[melvin-bot]

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

[melvin-bot]

📣 @tryevertthhub! 📣
Hey, it seems we don’t have your contributor details yet! You'll only have to do this once, and this is how we'll hire you on Upwork.
Please follow these steps:

1. Make sure you've read and understood the contributing guidelines.
2. Get the email address used to login to your Expensify account. If you don't already have an Expensify account, create one here. If you have multiple accounts (e.g. one for testing), please use your main account email.
3. Get the link to your Upwork profile. It's necessary because we only pay via Upwork. You can access it by logging in, and then clicking on your name. It'll look like this. If you don't already have an account, sign up for one here.
4. Copy the format below and paste it in a comment on this issue. Replace the placeholder text with your actual details.
   
   Format:

Contributor details
Your Expensify account email: <REPLACE EMAIL HERE>
Upwork Profile Link: <REPLACE LINK HERE>

[tryevertthhub]

I got it issue, and I have faced this problem before while I developing notification app. I resolved with Socket.
Socket.IO can be an excellent solution to handle real-time updates in this case.
Implementing Socket.IO would allow the frontend to receive an event immediately when the distance is edited and saved on the backend, eliminating the need for a manual page refresh to show the updated system message.

[ZhenjaHorbach]

I got it issue, and I have faced this problem before while I developing notification app. I resolved with Socket. Socket.IO can be an excellent solution to handle real-time updates in this case. Implementing Socket.IO would allow the frontend to receive an event immediately when the distance is edited and saved on the backend, eliminating the need for a manual page refresh to show the updated system message.

@tryevertthhub
Thanks for your proposal !
But can you provide the proposal using PROPOSAL_TEMPLATE with code examples please?

[klajdipaja]

Edited by proposal-police: This proposal was edited at 2024-11-06 13:03:37 UTC.

Proposal

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

When the distance is changed in a distance based report the message that "distance was changed" is not shown in the chat.

What is the root cause of that problem?

The changes of a report are derived from the reportActions_ entry in Onyx which when the distance is change is not updated.
The screenshot below is the response of the BE when distance is changed, as you can see we do not have actions for the current report.

In contrast you can see below another screenshot when the category is updated on the same report on which case the message is shown:

In the screenshots you can also see how the Changed category messages are shown but not the distance ones.

When we reopen the report the Open Report API brings all the reportActions_ that include the ones indicating the distance update. Another screenshot of that below for illustration:

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

On the front end we can show a message optimistically for the changes to the distance that will show while the user is waiting for a response from the backend.
There are a few things to do to support that:

Step 1. Create optimistic data for waypoint changes

We build the optimistic data in this lines:

App/src/libs/actions/IOU.ts

Lines 2574 to 2575 in 7b9a0cd

	const updatedReportAction = ReportUtils.buildOptimisticModifiedExpenseReportAction(transactionThread, transaction, transactionChanges, isFromExpenseReport, policy, updatedTransaction);
	if (!hasPendingWaypoints && !(hasModifiedDistanceRate && TransactionUtils.isFetchingWaypointsFromServer(transaction))) {

for normal expenses, and on this line for tracked/self-dm expenses:

App/src/libs/actions/IOU.ts

Line 3605 in d16855f

if (!hasPendingWaypoints && !(hasModifiedDistanceRate && isFetchingWaypointsFromServer(transaction))) {

But as you can see we use them only if change in the IOU request is not related to the distance. We have to modify the condition to remove the waypoint checks and all for the optimistic data to be pushed even when there's a waypoint change.
To allow for the optimistic data to be used we will replace the condition with

if (!hasModifiedDistanceRate) {

Step 2. Set the merchant and oldMerchant to the optimistic data

Distance messages are returned by the BE in the merchant and oldMerchant fields so it makes sense that we put the offline message in the merchant field.

We have to add a new block in ReportUtils.getModifiedExpenseOriginalMessage like this one:
https://github.com/Expensify/App/blob/main/src/libs/ReportUtils.ts#L3642-L3645

Here's what the block would be:

if ('waypoints' in transactionChanges) {
        originalMessage.oldMerchant = TransactionUtils.getMerchant(oldTransaction);
        originalMessage.merchant = Localize.translateLocal('iou.updatedTheDistanceOptimistically');
    }

Step 3. Show the message for change distance.
The messages are resolved in ModifiedExpenseMessage.getForReportAction. Here we need to add a block that checks the change type and based on that return the message.
Here I recommend adding a block that returns the optimistic message if there all this conditions are fullfilled:

1. merchant has changed (hasModifiedMerchant)
2. the oldMerchant value matches the DISTANCE_MERCHANT regex which means that the user changed the distance
3. the merchant field which we set to the offline value matches that value which indicates that the action has an optimistic message and not the real one

   const optimisticDistanceUpdateMessage = Localize.translateLocal('iou.updatedTheDistanceOptimistically');

    const hasOptimisticDistanceUpdate =
        hasModifiedMerchant &&
        CONST.REGEX.DISTANCE_MERCHANT.test(reportActionOriginalMessage?.oldMerchant ?? '') &&
        (reportActionOriginalMessage?.merchant ?? '') === optimisticDistanceUpdateMessage;

    if (hasOptimisticDistanceUpdate) {
        return optimisticDistanceUpdateMessage;
    }

Step 4. Add translations to en.ts and es.ts

NOTE. Because of the issue in the BE not returning the report actions when the distance is updated the message would not dissappear unless we clear out the storage manually or logut and login again.

What alternative solutions did you explore? (Optional)

We could fix this in the front end if that was necessary by calling the Open Report API again when the distance has changed. If that's a solution you would like to asses I can than update my proposal but I do not think that should be the way to go.

[ZhenjaHorbach]

@klajdipaja
Thanks for your proposal !
I will review it today or tomorrow !