[Payment card / Subscription] make backend return relevant onyxData when changing currency for billing card

[MitchExpensify]

If you haven’t already, check out our contributing guidelines for onboarding and email [email protected] to request to join our Slack channel!

---

Version Number: v9.0.5-10
Reproducible in staging?: Staging
Reproducible in production?:
If this was caught during regression testing, add the test name, ID and link from TestRail: NA
Email or phone of affected tester (no customers):
Logs: NA
Expensify/Expensify Issue URL: NA
Issue reported by: [email protected]
Slack conversation: Internal: https://expensify.slack.com/archives/C036QM0SLJK/p1720560965872139?thread_ts=1720544914.651789&cid=C036QM0SLJK

Action Performed:

1. Open new.expensify.com/settings/subscription
2. Add a payment card
3. Click the 3 dot menu
4. Click "Change payment currency"
5. Choose a different currency to the one already saved
6. Enter the card on file's CVV number
7. Hit Save

Expected Result:

You should see you payment currency update to the choice made at step 5

Actual Result:

The updated payment currency does not show without hard refresh and a small lag

Workaround:

Wait

Platforms:

Which of our officially supported platforms is this issue occurring on?

• Android: Native
• Android: mWeb Chrome
• iOS: Native
• iOS: mWeb Safari
• MacOS: Chrome / Safari
• MacOS: Desktop

Screenshots/Videos

Currency.not.updating.mov

View all open jobs on GitHub

[melvin-bot]

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

[MitchExpensify]

Do you think this will solve the delay here @blimpich ? #44904

[dominictb]

Proposal

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

• The updated payment currency does not show without hard refresh and a small lag

What is the root cause of that problem?

• After clicking on Save button, we close the form:
  

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

  Lines 22 to 27 in c973e62

  	const changeBillingCurrency = useCallback((currency?: ValueOf<typeof CONST.PAYMENT_CARD_CURRENCY>, values?: FormOnyxValues<typeof ONYXKEYS.FORMS.CHANGE_BILLING_CURRENCY_FORM>) => {
  	if (values?.securityCode) {
  	PaymentMethods.updateBillingCurrency(currency ?? CONST.PAYMENT_CARD_CURRENCY.USD, values.securityCode);
  	}
  	Navigation.goBack();
  	}, []);

• Then, we need to wait until the API is called successfully. Then, the updated currency is displayed.

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

• When modifying the billing currency, the CVV code must be validated on the backend. The solution is to keep the form displayed with a loading indicator after clicking the Save button. If the API call succeeds, the form closes; otherwise, errors are displayed.

• The same solution with this proposal.

• First, we need to update:
  

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

  Lines 23 to 26 in c973e62

  	if (values?.securityCode) {
  	PaymentMethods.updateBillingCurrency(currency ?? CONST.PAYMENT_CARD_CURRENCY.USD, values.securityCode);
  	}
  	Navigation.goBack();

  
  to:

        if (values?.securityCode) {
            PaymentMethods.updateBillingCurrency(currency ?? CONST.PAYMENT_CARD_CURRENCY.USD, values.securityCode);
            return;
        }
        Navigation.goBack();

• Then, add the logic:

    const [formData] = useOnyx(ONYXKEYS.FORMS.CHANGE_BILLING_CURRENCY_FORM);
    const formDataComplete = formData?.isLoading === false && !formData.errors;
    const prevFormDataComplete = usePrevious(formDataComplete);

    useEffect(() => {
        if (isSecurityCodeRequired && formDataComplete && !prevFormDataComplete) {
            Navigation.goBack();
        }
    }, [formDataComplete, prevFormDataComplete, isSecurityCodeRequired]);

to the PaymentCardChangeCurrencyForm.

• Note: The onyx data returned by BE has key billingCurrencyForm, but now in FE it is changeBillingCurrencyForm. We should fix it.

What alternative solutions did you explore? (Optional)

[dominictb]

Proposal updated

[dominictb]

Proposal updated

[trjExpensify]

For sure let's handle this in the same way as #44904 when aligned.

[blimpich]

Do you think this will solve the delay here @blimpich ? #44904

It won't fix it but it'll be fixed in the same way, so we might as well handle them in 1 PR. See this comment.

[blimpich]

Okay so looks like this is a backend bug. I briefly looked into this and its one of those problems that looks fairly straightforward at first but is more complicated than it seems.

When we call UpdateBillingCardCurrency we aren't passing back any onyx data to the frontend, so the currency doesn't update unless the client does a full refresh, which then triggers a OpenSubscriptionPage call which gets the updated fund. So naturally we could just add the onyx data to the auth command SetFundCurrency, which is the Auth command that is triggered here, but its really just using CreateFund under the hood. So fixing this "correctly" means moving Onyx updates from UserApi::addPaymentCard in Web to CreateFund.cpp, and then making sure that both adding a new payment card and changing the currency correctly update the onyx data and return it. Not insane stuff, but slightly more complicated than you would expect.

Marking this as an internal hotpick so that someone can pick up soon.

[dominictb]

@blimpich Beside of the BE bug, this issue still need to implement solution to fix the original issue: The updated payment currency does not show without hard refresh and a small lag.

[blimpich]

I think yes we will still need some frontend work, but lets come back to that once an Expensify engineer has fixed the backend bug. We'll handle this separately since this we have to wait for an Expensify engineer to have time to fix this.

[dominictb]

@blimpich Can you re-assign me to this issue for easier to self keep track? Then I will create a PR to fix once the BE is fixed. Thanks

[blimpich]

@blimpich Can you re-assign me to this issue for easier to self keep track? Then I will create a PR to fix once the BE is fixed. Thanks

Well actually this doesn't make sense really. This issue is now a backend issue. I'll create a separate frontend issue for making it wait for the request to finish.

[blimpich]

Got an auth PR up to fix this. Will also need to get a web PR out to clean up onyx updates that are no longer needed in web. In review.

[melvin-bot]

@blimpich Uh oh! This issue is overdue by 2 days. Don't forget to update your issues!

[melvin-bot]

@blimpich Still overdue 6 days?! Let's take care of this!

[blimpich]

Looks like web and auth PRs have been deployed. Closing.