Give users visual feedback when declining an IOU

[Beamanator]

If you haven’t already, check out our contributing guidelines for onboarding and email contributors@expensify.com to request to join our Slack channel!

---

Expected Result:

Users should see some visual feedback that their IOU declining is "in progress" with a simple spinner

Actual Result:

No visual feedback is given, so for a second (or more, if internet is slow) it can be confusing whether the IOU decline worked or not

Screen.Recording.2021-06-03.at.5.59.06.PM.mov

Action Performed:

1. Make sure you have two accounts you can log into in e.cash
2. On account A, request some money from account B
3. Log in to account B and click "View Details" on the request that just came in
4. Click "Decline"

Workaround:

Can the user still use Expensify without this being fixed? Have you informed them of the workaround?

Platform:

Where is this issue occurring?

• Web
• iOS
• Android
• Desktop App
• Mobile Web

Version Number: latest
Logs: n/a
Notes/Photos/Videos: See above photo & video
Expensify/Expensify Issue URL: n/a

View all open jobs on Upwork

Upwork job: https://www.upwork.com/jobs/~01e87cad52166458c7

[MelvinBot]

Triggered auto assignment to @puneetlath (External), see https://stackoverflow.com/c/expensify/questions/8582 for more details.

[rushatgabhane]

Proposal

In src/components/ReportTransaction.js
Create a new state isLoading which is false by default.

On pressing "Decline" rejectTransaction method is called.
Set the state of isLoading to true in rejectTransaction method.

Conditionally render rejectButtonLabelText and React Native Activity Indicator.

Result

On pressing "Decline", a spinner is rendered instead of "Decline".

[Beamanator]

Nice @rushatgabhane , this is how I imagined the implementation going 👍 Once @puneetlath creates the job on Upwork, please apply there and we'll hire you for this job - then please submit a PR 💪

[Beamanator]

Hey @rushatgabhane just to make sure we're going the right way, I wanted to get some thoughts on this approach vs another possible solution (see slack discussion here). I'm unassigning you for now while we get some thoughts, hope you don't mind!

[rushatgabhane]

@Beamanator yeah sure!
My bad, I wasn't aware of Onyx.
I think we shouldn't use my proposal, and instead drive state from Onyx for consistency of implementation and offline-first architecture.

[Beamanator]

No worries @rushatgabhane ! I think we're going to wait a day for people to see & respond to my post in Slack, but yeah it kinda looks like we're going to go that way haha 👍

[Beamanator]

Ok @rushatgabhane as expected, we're going to go the Onyx route :D Looks like you already understand how that will work, so I'll assign the issue back to you!

[Beamanator]

@puneetlath please create the job on Upwork when you have a chance :)

[puneetlath]

Sorry for the delay. Job is here: https://www.upwork.com/jobs/~01e87cad52166458c7

[Santhosh-Sellavel]

Applied for job on Upwork.

I am proposing that,

On pressing decline, will show an alert to confirm the decline request. When the user agrees to decline, it will initiate API and display a spinning wheel with In progress text.

On completion of API call will dismiss all, show the list.

Or will do the same without the user confirmation part.

Whatever you prefer.

[rushatgabhane]

Update: Created a pull request. #3498 & applied for job.

[puneetlath]

@rushatgabhane just want to double-check that this was the job you applied to? I'm not seeing it in there https://www.upwork.com/jobs/~01e87cad52166458c7

[rushatgabhane]

@puneetlath Yes that's the job I have applied to.
Here's the upwork profile with which I applied from https://www.upwork.com/freelancers/~01990b51632551e540
You can see that my github is linked with that account.

[Beamanator]

@Santhosh-Sellavel thanks for your proposal, but I've already selected Rushat's proposal for this job / issue :) Please feel free to propose solutions for other jobs / issues that have not had a proposal selected yet 👍

[puneetlath]

Paid in upwork!