feat: add a billing loading action

[zlwaterfield]

Changes

We're seeing a few UX hiccups for users when activating/deactivating subscriptions because buttons don't show loading and aren't disabled.

@xrdt already added this for deactivating here: #21765.

This Is adding it for activating products and addons.

Demo: https://assets.zlwaterfield.com/misc%2FScreen%20Cast%202024-04-25%20at%2012.56.38%20PM.gif

[github-actions]

Size Change: 0 B

Total Size: 1.04 MB

ℹ️ View Unchanged

Filename	Size
frontend/dist/toolbar.js	1.04 MB

_{compressed-size-action}

[raquelmsmith]

I feel like this should be getting reset somewhere when it's done loading? If the page refreshes then makes sense that it doesn't get manually reset, but the page doesn't always refresh.

[xrdt]

It probably makes more sense to move the call on the subscribe / add buttons into a loader so the loading state can be handled by kea.

[xrdt]

It can be the same as the deactivate loader currently on billingLogic.tsx

[zlwaterfield]

These are all outgoing links, so that's why I did it this way. I only added these to buttons with to props.

I could move into kea but it would just be a window.location.href = and the loader wouldn't get reset anyways.

[zlwaterfield]

I don't think it makes sense to move to kea since sometimes we will need to redirect to checkout but that won't be known at time of click, right?

[zlwaterfield]

The original question was:

I feel like this should be getting reset somewhere when it's done loading?

So I'm just saying that all these requests are requests to the server that will return a redirect so the loading doesn't need to be reset because there always be a page refresh.

[xrdt]

Got it, thanks.

[zlwaterfield]

I can look into moving these into kea as a fetch that gets redirected as well, that's just a bit of a different change.

[xrdt]

I feel like keeping the redirect logic in the billing service is fine. It keeps the logic around when to interact with stripe in one place.

[zlwaterfield]

I just gave moving into kea a try. I did just something like:

                activateProduct: async ({ productKey, redirect }: { productKey: string, redirect?: string }) => {
                    let path = 'api/billing-v2/activation?products=' + productKey
                    if (redirect) {
                        path += '&redirect=' + redirect
                    }
                    return api.getResponse(path)
                }

but the API returns a redirect to the billing repo, and then the fetch goes there and gets a CORS issue. So it's definitely better to keep it as is.

[xrdt]

Cool, thanks for hashing through all the questions in the comment thread.