[$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
• [x] iOS: Standalone
• [x] iOS: HybridApp
• [x] iOS: mWeb Safari
• [x] MacOS: Chrome / Safari
• [x] MacOS: Desktop

Screenshots/Videos

https://github.com/user-attachments/assets/828072e4-35cc-4d12-ba45-afd6d4a1e347

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

Issue Owner

Current Issue Owner: @rojiphil

[melvin-bot[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:

https://github.com/Expensify/App/blob/10a7be853c9e449f5c680cedaeb298dfae95afae/src/libs/actions/OnyxUpdates.ts#L176-L179

and if updated is needed then this is activated: https://github.com/Expensify/App/blob/10a7be853c9e449f5c680cedaeb298dfae95afae/src/libs/Middleware/SaveResponseInOnyx.ts#L38-L39

If any update isn't needed to be checked then just onyx is updated w/o any BE update. https://github.com/Expensify/App/blob/10a7be853c9e449f5c680cedaeb298dfae95afae/src/libs/Middleware/SaveResponseInOnyx.ts#L34-L36

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: https://github.com/Expensify/App/blob/10a7be853c9e449f5c680cedaeb298dfae95afae/src/libs/Middleware/SaveResponseInOnyx.ts#L6-L8

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[bot]]

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

[melvin-bot[bot]]

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

[melvin-bot[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 📖

[melvin-bot[bot]]

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

[zanyrenney]

@rojiphil please review and let me know if we can take @jacobkim9881 proposal. thanks!

[rojiphil]

@zanyrenney. The proposal works. Thanks @jacobkim9881 for the proposal.

@jacobkim9881 proposal to add SubmitReport API request to the ignore list LGTM as the request is not mandatorily depending on any latest update from server. Passing on to internal engineer to weigh in. 🎀👀🎀 C+ reviewed

[melvin-bot[bot]]

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