[Awaiting Payment 26th August] [$250] [Payment card / Subscription] Make change billing card currency form wait until request has finished before closing

[blimpich]

Problem

When changing the billing currency on the subscription page, the panel closes immediately after clicking "save". This is a problem because if the request has an error we should show that error in the panel, but the panel will have already closed.

Screen.Recording.2024-07-29.at.4.54.04.PM.mov

Solution

We should have this panel behave the same way that the add payment card panel behaves. It should wait for the request to finish and show a loading indicator while we wait.

cc: @dominictb

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~01bcbde08595f89c2b
• Upwork Job ID: 1818075810728864794
• Last Price Increase: 2024-07-30
• Automatic offers:
• nkdengineer | Contributor | 103346635

Issue Owner

Current Issue Owner: @rushatgabhane

[blimpich]

Holding and not adding the external label until necessary backend changes are done

[melvin-bot]

@blimpich Huh... This is 4 days overdue. Who can take care of this?

[blimpich]

Almost there, backend changes are still in review.

[melvin-bot]

@blimpich Huh... This is 4 days overdue. Who can take care of this?

[melvin-bot]

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

[melvin-bot]

Triggered auto assignment to @isabelastisser (NewFeature), see https://stackoverflowteams.com/c/expensify/questions/14418#:~:text=BugZero%20process%20steps%20for%20feature%20requests for more details. Please add this Feature request to a GH project, as outlined in the SO.

[melvin-bot]

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

[nkdengineer]

Proposal

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

We want to make change billing card currency form wait until request has finished before closing

What is the root cause of that problem?

In

App/src/pages/settings/Subscription/PaymentCard/ChangeBillingCurrency/index.tsx

Line 26 in df69c80

Navigation.goBack();

, we go back immediately after calling the API, we don't wait for the API to be successful.

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

• Remove the goBack here
• Add an useEffect that will only call goBack if the isLoading of the ONYXKEYS.FORMS.CHANGE_BILLING_CURRENCY_FORM changes from true to false, and there's no errors in the form (so it's not the failure case). This is same approach with adding debit card page

  App/src/pages/settings/Wallet/AddDebitCardPage.tsx

  Line 35 in df69c80

  if (prevFormDataSetupComplete || !formData?.setupComplete) {

What alternative solutions did you explore? (Optional)

Use API.makeRequestWithSideEffects for the PaymentMethods.updateBillingCurrency and make the app wait for it before calling Navigation.goBack

[dominictb]

@blimpich Based on this comment, can I continue to work on this issue?

[blimpich]

@dominictb I'm treating this the same as any other external issue. Please feel free to give a proposal and we'll go through the normal proposal proposal review process.

[melvin-bot]

Current assignee @blimpich is eligible for the choreEngineerContributorManagement assigner, not assigning anyone new.

[blimpich]

@rushatgabhane we want to avoid using makeRequestWithSideEffects unless absolutely necessary, as per this comment. Can you reconsider the existing proposals given that we want to avoid using makeRequestWithSideEffects?

[rushatgabhane]

Okay then we will have to use some variation of useEffect to re-render and go back.

Add an useEffect that will only call goBack if the isLoading of the ONYXKEYS.FORMS.CHANGE_BILLING_CURRENCY_FORM changes from true to false, and there's no errors in the form (so it's not the failure case). This is same approach with adding debit card page

@nkdengineer's proposal looks good

[melvin-bot]

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

[blimpich]

Assigning @nkdengineer since they have the C+ chosen solution and posted their proposal first. Sorry @dominictb, but even though you had a solution for the issue on the other issue I'm going to treat this as a normal issue and consider proposals in the order they were posted to this issue and this issue only.

@nkdengineer please feel free to raise a PR.

[nkdengineer]

@blimpich we have open PR here
But there are some errors occurring. As far as I know, we need to add some special steps here.
Please help me.

[blimpich]

@nkdengineer the special steps were just to use my local backend via ngrok. I've DM'ed you those credentials so you should be able to use Stripe's test cards, if I'm online. I generally work 9am-5pm PST hours.

[blimpich]

@rushatgabhane from this comment it looks like we're waiting on you to re-review. Are you still able to review this PR?

[rushatgabhane]

@blimpich thanks for the bump. I'll be reviewing it tonight

[garrettmknight]

@isabelastisser looks like the PR is on prod btw.

[isabelastisser]

Thanks for the heads up, @garrettmknight! So we're waiting for the PR to merge.

[trjExpensify]

PR hit prod on the 19th August. #46635

[isabelastisser]

Payment summary:

@rushatgabhane $250 / C+ review / NewDot payment PENDING
@nkdengineer $250 / Contributor / Paid in Upwork

[JmillsExpensify]

$250 approved for @rushatgabhane