[dashboard] Re-implement 'Cancel Downgrade' in Plans page

[jankeromnes]

Fixes #3795

Has no effect on Core / OSS.

How to test:

• Log in to https://jx-cancel-downgrade.staging.gitpod-io-dev.com/plans
• Upgrade to Professional (and complete billing)
• Once the upgrade is through, downgrade to Personal
• Once the downgrade is scheduled, and the "Cancel" link appears, click on it
• The modal should allow you to cancel the scheduled downgrade
• (Also, creating Team and using the invite link yourself should still work)

[jankeromnes]

🎰
/werft run

👍 started the job as gitpod-build-jx-cancel-downgrade.9

[jankeromnes]

IO preview: https://jx-cancel-downgrade.staging.gitpod-io-dev.com/workspaces/

Currently looks like this:

We might want to adjust the texts a bit.

@AlexTugarev and/or @gtsiolis, could you please take a look when you have time?

[jankeromnes]

Alright, should be good to go now. 🚀

@AlexTugarev & @gtsiolis please take another look. 😊 🙏

[AlexTugarev]

Just tested the downgrade. Here is what I noticed:

• Downgrade scheduled is rendered with a cursor pointer
• Cancel link does not appear immediately, actually it took a couple of reloads to get it.

Suggestion: on hover of Downgrade scheduled you can render Cancel downgrade. WDYT?

Cancellation is also not an instant thing, right? After refresh it still presents with Cancel button. It looks like there are a lot of intermediate states with Chargebee :-(

[jankeromnes]

Just tested the downgrade.

Awesome, thanks!

• Downgrade scheduled is rendered with a cursor pointer

Good catch. I can fix that.

• Cancel link does not appear immediately, actually it took a couple of reloads to get it.

That's expected, as we wait for the Chargebee callback here. (When there is a pendingDowngradeToPlan, we optimistically show that the downgrade is scheduled, and poll for an update every 10 seconds. Next, when there finally is a scheduledDowngradePlanId, we remove the pending state, and show the Cancel action.)

P.S. You don't need to reload, as the polling will already update the state when Chargebee finally calls back.

[jankeromnes]

Cancellation is also not an instant thing, right? After refresh it still presents with Cancel button. It looks like there are a lot of intermediate states with Chargebee :-(

That's a bug in my pendingDowngradeCancellation then (if you cancel the downgrade, it should never show the Cancel button again, unless Chargebee doesn't call back within 5 minutes -- even if you reload multiple times).

EDIT: Found the bug:

https://github.com/gitpod-io/gitpod/blob/1a6d6a197e72406276ee43dc8522830d64c5ef02/components/dashboard/src/settings/Plans.tsx#L199-L201

Condition for successful downgrade cancellation should be !!accountStatement && !scheduledDowngrade (because everything is undefined on load until we get the accountStatement). Fixed ✅

[gtsiolis]

Curious why we need this cancel button in the first place? Is there a need for an undo action?

Since there's now a) confirmation to upgrade or downgrade through modals and b) adequate information on the action and potential account changes through alert components, this undo action seems to be redundant, right? 😭

What do you think? Let me know if I'm missing something. 💭

FWIW, an undo action on the workspaces deletion action could be great! ⭐

[gtsiolis]

Two more minor comments! 🧡

[gtsiolis]

One last comment for this round:

@jankeromnes if you think this a) covers some edge cases and b) restores some broken functionality it should be fine to merge. However, it terms of UX I'd vote for removing this undo functionality with the cancel button in the long run unless needed for technical reasons due to the integration with Chargebee. 🤷

See #3873 (comment).

[jankeromnes]

Many thanks for the reviews, @AlexTugarev and @gtsiolis!

@gtsiolis This was more about re-implementing a feature that was available in the old dashboard, but maybe it's okay to leave it out? The use case goes something like this:

• I upgrade to the Professional plan. It's great!
• Actually maybe I want the Personal plan, so I downgrade to it. However, the will only happen at the end of my billing cycle (i.e. in 3 weeks or so), so it says "Downgrade scheduled" for several days
• Actually, the Professional plan is pretty great. I now want to stick with it!

Currently: The downgrade is still schedule for 2-3 weeks from now. To cancel it, I need to navigate Billing very deep in order to find "delete pending changes" or similar. (Otherwise, I forget about this, then the downgrade happens automatically, and maybe I "forget" to upgrade again.)

With this feature: I can click on "Cancel" to cancel the scheduled downgrade, and stick with Professional.

[gtsiolis]

Thanks for explaining this in #3873 (comment) @jankeromnes! 🙏

Makes sense now. Since we're not charging per hour usage or something similar this approach seems better for now. 💯