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

MitchExpensify commented 2 months ago

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: 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: mitch@expensify.com Slack conversation: Internal: https://expensify.slack.com/archives/C036QM0SLJK/p1720560965872139?thread_ts=1720544914.651789&cid=C036QM0SLJK

Action Performed:

Open new.expensify.com/settings/subscription
Add a payment card
Click the 3 dot menu
Click "Change payment currency"
Choose a different currency to the one already saved
Enter the card on file's CVV number
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
[x] MacOS: Chrome / Safari
[ ] MacOS: Desktop

Screenshots/Videos

https://github.com/Expensify/App/assets/36425901/abf5dd75-135e-44ad-b298-a0af513f9613

View all open jobs on GitHub

melvin-bot[bot] commented 2 months ago

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 commented 2 months ago

Do you think this will solve the delay here @blimpich ? https://github.com/Expensify/App/issues/44904

dominictb commented 2 months ago

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: https://github.com/Expensify/App/blob/c973e622ac7bf94a537b01e75408aff782123db3/src/pages/settings/Subscription/PaymentCard/ChangeBillingCurrency/index.tsx#L22-L27
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: https://github.com/Expensify/App/blob/c973e622ac7bf94a537b01e75408aff782123db3/src/pages/settings/Subscription/PaymentCard/ChangeBillingCurrency/index.tsx#L23-L26 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 commented 2 months ago

Proposal updated

dominictb commented 2 months ago

Proposal updated