[$500] - Chat Room - Handle API response inVBA flow when tapping finish Set up

[kbecciv]

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. Go to https://staging.new.expensify.com
2. Log in with expensifail account
3. Find any room in LHN
4. Tap on plus button and tap Send Money
5. Select amount and user
6. Tap Pay with Expensify
7. Tap Add Bank Account
8. Put Wells Fargo credentials
9. Select Saving Account
10. Put Password and Tap Finish Set up

Expected Result:

If the API request fails, we handle that and show the error to the user.

Actual Result:

Unable procced with VBA flow after put password and tap finish Set up. No error shown.

Workaround:

Unknown

Platform:

Where is this issue occurring?

• Mobile Web

Version Number: 1.1.29.1

Reproducible in staging?: Yes

Reproducible in production?: No

Logs: https://stackoverflow.com/c/expensify/questions/4856

Notes/Photos/Videos: Any additional supporting documentation

Expensify/Expensify Issue URL:

Issue reported by: Applause

https://user-images.githubusercontent.com/93399543/149238337-c6759873-2ae1-4df7-ae90-a17a81a0f866.mp4

Slack conversation:

View all open jobs on GitHub

[MelvinBot]

Triggered auto assignment to @francoisl (Engineering), see https://stackoverflow.com/c/expensify/questions/4319 for more details.

[francoisl]

I can't reproduce on dev, neither on the latest version of main nor on 1.1.29-1 specifically; I get to the identity verification step each time.

I could only test mweb on iOS though, for some reason I can't get anything to work with Android at the moment. Going to put this back in the pool and hopefully someone can chime in if they can reproduce.

https://user-images.githubusercontent.com/2229301/149249703-2b07b060-e2e6-48fb-bb1c-57c91ba53d68.mov

Not sure if it can be marked as an external issue until we can reproduce though.

[aldo-expensify]

I see something like this happening if you try to add a bank account that you already have. We get an error from the backend and we don't do anything we it, no feedback for the user. My steps:

1. Create account
2. Go to Old Dot
3. Add Open VBA using the SO (maybe this can be done in NewDot and the same should happen)
4. Go to NewDot
5. Navigate to Settings > Payments
6. Click Transfer Balance and then Bank account, it takes me to add a new bank account 🤷
7. Try to add bank account using same credentials as before
8. Fail, no feedback in the UI

https://user-images.githubusercontent.com/87341702/151838888-e7ad0364-e230-4c43-8ab2-545b6500783d.mov

[aldo-expensify]

At least for the case I mentioned above, we are not doing anything with the error here:

https://github.com/Expensify/App/blob/2cdb7c30be70766b3c006a67153665d895ba83ac/src/libs/actions/BankAccounts.js#L80-L94

I'll label this as External as it seems just related to doing something in the front with the error that comes from the backend.

[MelvinBot]

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

[aldo-expensify]

@kbecciv to confirm if it is related to what I found, can you replicate the problem and look in the network tab of chrome dev tools and see if you are getting an error in the response of the request sent to the URL: .../api?command=BankAccount_Create

[puneetlath]

Upwork job for handling the API response is here: https://www.upwork.com/jobs/~0151453e9454631fab

[MelvinBot]

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

[MelvinBot]

Current assignee @puneetlath is eligible for the Exported assigner, not assigning anyone new.

[puneetlath]

Checking on whether this has been deployed, since the PR happened in the expensify-common repo.

[puneetlath]

Increasing to $500.

[parasharrajat]

Proposal

1. First we store the new error which gets from API. To do that we will check if response.title === 'BanK account already exits.
2. Then we update the Onyx date to store error for chooseAccount field

   ReimbursementAccount.setBankAccountFormValidationErrors({chooseAccount: true});

3. Then in the component we update this to pass a new error translate key to this function https://github.com/Expensify/App/blob/18ff4f8f965d4279711d8d80c0ef77d86a1ea829/src/components/AddPlaidBankAccount.js#L119.

   chooseAcount: 'What ever error we want to show to the user

4. Now we can either show the error below the Choose Account field https://github.com/Expensify/App/blob/18ff4f8f965d4279711d8d80c0ef77d86a1ea829/src/components/AddPlaidBankAccount.js#L244

via errorText={this.getErrorText('chooseAcount')} But as it already show another error show we would add a || to pick the any of the errors. Similary for hasError prop to determine if there is an error.

In case we don't want to show this error below the field and Show it as a growl.

Then instead of step 2 we just show a growl and step 2-4 will not be needed.

Optional

I think we should also show a generic error growl when the error is unknown and the code is not 200.

[puneetlath]

I think we should also show a generic error growl when the error is unknown and the code is not 200.

I agree for any error we don't specifically handle we should just show the server error. But I think we should use the new pattern of showing the error above the save and continue button instead of as a growl. I believe we are moving away from growls for any form validation.

The rest of the proposal sounds good to me 👍🏾.

[parasharrajat]

I am not yet familiar with it but let me check.

[parasharrajat]

@puneetlath Ok, I see then we just need to call https://github.com/Expensify/App/blob/4b04f7371745e145ad8e93e2d28434fb7708bd17/src/libs/actions/ReimbursementAccount/errors.js#L10 to set the error instead of growl step.

[mvtglobally]

Issue not reproducible during KI retests. (First week)

[puneetlath]

@parasharrajat I just verified in this thread.

For any server error we aren't handling, we'll want to display it above the submit button.

[parasharrajat]

Thanks, @puneetlath I got that. This change will show the error at the same location above the button. It saves the error which goes directly here https://github.com/Expensify/App/blob/4b04f7371745e145ad8e93e2d28434fb7708bd17/src/components/FormAlertWithSubmitButton.js#L102 via ReimbursementAccountForm which is used for VBA flow.

[puneetlath]

Ah, ok I see. Ok cool, let's do it 👍🏾

[parasharrajat]

PR will be ready by Monday.

[parasharrajat]

PR will be up shortly..

[mvtglobally]

Issue not reproducible during KI retests. (Second week)

[parasharrajat]

@puneetlath QA says they can't reproduce this. Is it fixed? On the other hand, when I am trying to add a bank account via plaid it takes me to the real website of the bank on staging. And it never loads on the web browser due to CORS errors.

[puneetlath]

Ah interesting. I just tried and it seems that now we throw a growl that says "no bank account available" and then you land on this page.

So you're no longer stuck in an endless spinner and we no longer let you choose an account that you've already added. But we do leave you on this weird blank page instead of navigating you back. So I think we should still fix that.

And if we still aren't handling unknown API errors in this flow, then I still think we should do that as well.

[parasharrajat]

I will look into this tomorrow. Things needed:

1. Handle failure in VBA flow.
2. Take the user back.

[MelvinBot]

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

[MelvinBot]

Current assignee @parasharrajat is eligible for the Exported assigner, not assigning anyone new.

[MelvinBot]

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

[puneetlath]

@Christinadobrzyn @chiragsalian assigning y'all since I'm about to go on sabbatical for 2 months.

@Christinadobrzyn the internal job post is here: https://www.upwork.com/ab/applicants/1488237483760803840/hired

@chiragsalian we're looking for a proposal for https://github.com/Expensify/App/issues/7185#issuecomment-1057336885

[parasharrajat]

I will post one today for the new requirement if possible. Need to go through the complete VBA flow to understand the API calls. Otherwise, I am open to proposals.

[Christinadobrzyn]

This job should have a price increase but the original job is closed.

Created a new job - https://www.upwork.com/ab/applicants/1502124533147897856/job-details

@parasharrajat will it mess up anything for you if I cancel your contract on the old job and hire you for the new one so I can increase the price?

[parasharrajat]

@Christinadobrzyn Nope. You can cancel the contract and send the new offer.

[Christinadobrzyn]

Done! Thanks, @parasharrajat.

Looks like we're still waiting on proposals to fix the issue.

[mvtglobally]

Issue not reproducible during KI retests. (Third week) Original issue is no longer repro. @Christinadobrzyn Should we update the steps to reflect the new issue we are trying to fix, or close this and open a new issue for this? https://github.com/Expensify/App/issues/7185#issuecomment-1055853896

[chiragsalian]

I'll defer to @Christinadobrzyn preference, but my vote would be to close this issue and open a new issue so that its just cleaner to focus on.

[Christinadobrzyn]

I agree, let's close this and open a new issue with what needs to be fixed. Feel free to assign it to me as the CM!

[Christinadobrzyn]

@mvtglobally can you link the new issue to this one when it's created? Then I'll close this one.

Also, @parasharrajat, I can pay you for the work on this one, when you have a moment, can you mind accepting my offer in Upwork?

[parasharrajat]

@Christinadobrzyn Thanks for the good gesture. I would like to solve this issue in exchange for the payment. Please give me 2 days to prepare a proposal and PR. And as I am aware of the problem, I don't think I need a new issue.

[parasharrajat]

Oh no, it slipped my mind. I will get back to it asap

[parasharrajat]

Sorry for the unexpected delay. I will post the proposal by tomorrow.

[chiragsalian]

No pressure but any update @parasharrajat?

[parasharrajat]

Apologies for the delay here. Just catching up on my task. I will post the proposal tomorrow by this time.

[parasharrajat]

Looked at the code but no proposal yet. I am feeling sick today so not working.

[Christinadobrzyn]

I'm going to be ooo until April 26th so I'm going to assign a new CM to this issue. Thanks!

If I understand correctly, the current status is that @parasharrajat is working on a proposal.

[melvin-bot[bot]]

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

[melvin-bot[bot]]

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

[dylanexpensify]

Woot! Sounds good!

[parasharrajat]

I am facing the CORS issue on dev. Asked here.

[parasharrajat]

Ok, I passed the CORS error on the desktop. but it takes me to the live bank website instead of asking for sandbox creads. I can't test the API. @chiragsalian Do you know how to test it? Reported here https://expensify.slack.com/archives/C01GTK53T8Q/p1649949322758349

[dylanexpensify]

not overdue. @chiragsalian bump on above!