[$250] WS chat- "Pay with expensify" button blinks to Submit and back after clicking Submit

[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.67-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/5263862
Issue reported by: Applause Internal Team

Action Performed:

1. Open staging.new.expensify.com and create a new gmail account.
2. Create a workspace.
3. Navigate to Workspace settings/ More features, enable Workflows.
4. Open Workflows page and enable Delay submissions.
5. Navigate to workspace chat and create manual expense using "+" button.
6. In WS chat click. "Submit" button on the expense preview.

Expected Result:

"Pay with expensify" button appears on the expense preview after clicking on "Submit" button. The button does not blink.

Actual Result:

"Pay with expensify" button blinks to Submit and back after clicking Submit button on the expense preview.

Workaround:

Unknown

Platforms:

• Android: Standalone
• Android: HybridApp
• Android: mWeb Chrome
• iOS: Standalone
• iOS: HybridApp
• iOS: mWeb Safari
• MacOS: Chrome / Safari
• MacOS: Desktop

Screenshots/Videos

Bug6678319_1732730867265.submit_button_blinks.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021862514913604965431
• Upwork Job ID: 1862514913604965431
• Last Price Increase: 2024-11-29
• Automatic offers:
• rojiphil | Contributor | 105125262
• jacobkim9881 | Contributor | 105183692

[melvin-bot]

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

[jacobkim9881]

Proposal

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

Clicking submit button makes flicking on a workspace with delay submissions.

What is the root cause of that problem?

getMissingOnyxUpdates is executed for SubmitReport API because it has late updateID to previous updateID and because the button UI changes every time onyx data updated.

The button UI changes by reading childStatusNum from onyx data. When it is 0 then it shows Submit grey button and 2 shows Pay green button. But by getMissingOnyxUpdates API it changes from 2(green) to 0(grey) to 2(again green). In the issue getMissingOnyxUpdates doesn't have to be executed. It is because childStatusNum is already changed into 2 by SubmitReport API just before.

Every time the client app gets response from BE it checks if any update is needed:

App/src/libs/actions/OnyxUpdates.ts

Lines 176 to 179 in 10a7be8

	if (lastUpdateIDFromClient < previousUpdateID) {
	Log.info('lastUpdateIDFromClient is less than the previousUpdateID received, client needs updating', false, {lastUpdateIDFromClient, previousUpdateID});
	return true;
	}

and if updated is needed then this is activated:

App/src/libs/Middleware/SaveResponseInOnyx.ts

Lines 38 to 39 in 10a7be8

	// Save the update IDs to Onyx so they can be used to fetch incremental updates if the client gets out of sync from the server
	OnyxUpdates.saveUpdateInformation(responseToApply);

If any update isn't needed to be checked then just onyx is updated w/o any BE update.

App/src/libs/Middleware/SaveResponseInOnyx.ts

Lines 34 to 36 in 10a7be8

	if (requestsToIgnoreLastUpdateID.includes(request.command) || !OnyxUpdates.doesClientNeedToBeUpdated(Number(response?.previousUpdateID ?? 0))) {
	return OnyxUpdates.apply(responseToApply);
	}

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

We can let the UI better by passing updates from BE update for SubmitReport API.

There is already a method to check if any update from BE is needed:

App/src/libs/Middleware/SaveResponseInOnyx.ts

Lines 6 to 8 in 10a7be8

	// If we're executing any of these requests, we don't need to trigger our OnyxUpdates flow to update the current data even if our current value is out of
	// date because all these requests are updating the app to the most current state.
	const requestsToIgnoreLastUpdateID: string[] = [

In the array we can add WRITE_COMMANDS.SUBMIT_REPORT for SubmitReport.

const requestsToIgnoreLastUpdateID: string[] = [
...,

WRITE_COMMANDS.SUBMIT_REPORT,
]

Then whenever clicking submit button in a workspace with delay submission, the button isn't flicking because it doesn't update from BE.

What alternative solutions did you explore? (Optional)

N/A

[melvin-bot]

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

[melvin-bot]

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

[melvin-bot]

📣 @jacobkim9881 You have been assigned to this job!
Please apply to the Upwork job and leave a comment on the Github issue letting us know when we can expect a PR to be ready for review 🧑‍💻
Once you apply to this job, your Upwork ID will be stored and you will be automatically hired for future jobs!
Keep in mind: Code of Conduct | Contributing 📖