[Usage-based] Update billing page layout for teams and personal accounts #13564

jankeromnes · 2022-10-04T07:19:11Z

Description

Update billing page layout for usage-based teams and personal accounts.

Related Issue(s)

How to test

Create a team called "Gitpod [Something]"
Check the Team Billing UI
Upgrade the team by adding a credit card
Check the Team Billing UI again
Go to /billing (your individual billing settings)
Check your User Billing UI
Upgrade your user by adding a credit card
Check your User Billing UI again

Release Notes

NONE

Documentation

Werft options:

/werft with-local-preview
If enabled this will build install/preview
/werft with-preview
/werft with-payment
/werft with-integration-tests=all
Valid options are all, workspace, webapp, ide

jankeromnes · 2022-10-04T07:31:38Z

/werft run

👍 started the job as gitpod-build-jx-improve-billing-ui.1
(with .werft/ from main)

jankeromnes · 2022-10-04T14:14:10Z

/werft run

👍 started the job as gitpod-build-jx-improve-billing-ui.4
(with .werft/ from main)

jankeromnes · 2022-10-06T08:58:01Z

Screenshots

Billing Mode	Light	Dark
Team Billing (before upgrade)
Team Billing (after upgrade)
User Billing (before upgrade)
User Billing (after upgrade)

laushinka · 2022-10-06T10:08:46Z

Thanks, @jankeromnes!
For some time this was NaN when I upgraded my team.
When I came back from another page it was correctly a number.

jankeromnes · 2022-10-06T10:10:45Z

For some time this was NaN when I upgraded my team.

Aha, good catch @laushinka! This happens when the usage limit is 0 (divide-by-zero gives NaN). To be honest, I'm not quite sure what we're supposed to show here when the usage limit is set to 0... 🤔

But the NaN definitely looks weird. Maybe let's hide the percentage when it doesn't make sense. 👍

laushinka · 2022-10-06T10:20:43Z

This happens when the usage limit is 0 (divide-by-zero gives NaN).

How about when the limit is 0, instead of "Manage usage limit" we show "Set usage limit" and hide the percentage?

jankeromnes · 2022-10-06T10:27:24Z

How about when the limit is 0, instead of "Manage usage limit" we show "Set usage limit" and hide the percentage?

I like this suggestion! But doesn't 0 currently mean "I want absolutely no usage"? (I.e. when it's set to 0, I believe Gitpod won't start any workspaces, and you'll see the "limit reached" notification.)

Personally, I'd be happy with revisiting the semantics of usageLimit = 0, e.g. redefine it as "unlimited usage"?

gtsiolis · 2022-10-06T10:30:44Z

Looking at this now! 👀

laushinka · 2022-10-06T12:03:08Z

But doesn't 0 currently mean "I want absolutely no usage"? (I.e. when it's set to 0, I believe Gitpod won't start any workspaces, and you'll see the "limit reached" notification.)

Personally, I'd be happy with revisiting the semantics of usageLimit = 0, e.g. redefine it as "unlimited usage"?

Ahh, right. No limit means unlimited usage, but limit zero means no usage. Then let's go with your initial suggestion 👍🏼

gtsiolis

Excited to see this feature coming together! ✨

Thanks, @jankeromnes!

Left some comments below, hopefully not too overwhelming. 🏁

Let's open follow-up issues for anything that feels out of the scope of this PR and could significantly increase the scope of the changes here. 🏓

gtsiolis · 2022-10-06T11:04:13Z

components/dashboard/src/components/UsageBasedBillingConfig.tsx

+                        </div>
+                    </div>
+                )}
+                {showUpgradeTeam && (


issue: Probably not the best line to add this, but could we easily avoid the back-to-back duplicate spinners when loading the team billing page?

team-billing.mov

Good catch! But I think it's not that easy to do away with them -- the first one is when we figure out whether to show the old Chargebee UI or the new Stripe UI, and the second one is while we actually load all the Stripe-relevant data.

Or, we could simply decide not to show the initial spinner. I generally don't like leaving any "loading states" as a blank page ("wait, that's it? is it doing anything? is it broken?") but if it always transitions rapidly to the Stripe Billing UI, then maybe we could do without the first spinner. 💭

components/dashboard/src/settings/Billing.tsx

components/dashboard/src/components/UsageBasedBillingConfig.tsx

jankeromnes · 2022-10-06T12:24:46Z

Woohoo, many thanks @gtsiolis for the extensive UX review!

/hold so that I get a chance to address your comments and suggestions 👀

Co-authored-by: George Tsiolis <tsiolis.g@gmail.com>

…lling settings

Co-authored-by: George Tsiolis <tsiolis.g@gmail.com>

…gs pages (including billing pages)

jankeromnes · 2022-10-07T17:01:01Z

Phew. Okay I've now addressed most of the comments/suggestions, including fixing the NaN % edge case. 🎉

I'm leaving as potential follow-up improvements:

Improving the handling of usage limits
Fixing or removing all billing page titles/subtitles
One thing about a footnote (didn't understand sorry)
What to do about the two subsequent spinners in team billing

With that, I think we're ready to merge this whenever we want! 🚀 It would be good to deploy this early next week, to support Early Access for Individuals.

/unhold

easyCZ · 2022-10-10T13:38:06Z

components/dashboard/src/Menu.tsx

@@ -97,9 +97,12 @@ export default function Menu() {
    // Hide most of the top menu when in a full-page form.
    const isMinimalUI = inResource(location.pathname, ["new", "teams/new", "open"]);
    const isWorkspacesUI = inResource(location.pathname, ["workspaces"]);
-    const isAccountUI = inResource(location.pathname, [
+    const isPersonalSettingsUI = inResource(location.pathname, [


[random] inResource is super misleading. I expected this to check if the pathname contains that resource, but it's actually checking if it starts with those resources.

Thanks for calling this out @easyCZ! I must admit I only briefly skimmed this code while implementing my fix, but I agree about the name inResource being super unclear and unhelpful. Do you have a better suggestion in mind? 🙂

resourceStartsWith or locationStartsWith comes to mind. Mostly to communicate it's not just a substring match, but a starts with match

roboquat added release-note-none do-not-merge/work-in-progress size/M labels Oct 4, 2022

jankeromnes force-pushed the jx/improve-billing-ui branch from 6eedc93 to 4cfb758 Compare October 4, 2022 10:03

roboquat added size/L and removed size/M labels Oct 4, 2022

jankeromnes force-pushed the jx/improve-billing-ui branch from 4cfb758 to 438c78e Compare October 4, 2022 13:41

jankeromnes force-pushed the jx/improve-billing-ui branch 2 times, most recently from 48dd275 to bf4cc13 Compare October 6, 2022 06:56

jankeromnes added 3 commits October 6, 2022 08:10

[dashboard] Simplify and optimize UsageBasedBillingConfig component

39d831f

[dashboard] Implement 'Balance' UI in usage-based billing settings

9fe12c1

[dashboard] Differentiate usage-based upgrade UI for teams vs users

c09132b

jankeromnes force-pushed the jx/improve-billing-ui branch from bf4cc13 to c09132b Compare October 6, 2022 08:11

roboquat added size/XL and removed size/L labels Oct 6, 2022

jankeromnes marked this pull request as ready for review October 6, 2022 08:58

jankeromnes requested a review from a team October 6, 2022 08:58

roboquat removed the do-not-merge/work-in-progress label Oct 6, 2022

github-actions bot added the team: webapp Issue belongs to the WebApp team label Oct 6, 2022

jankeromnes requested a review from gtsiolis October 6, 2022 09:52

gtsiolis approved these changes Oct 6, 2022

View reviewed changes

roboquat added the do-not-merge/hold label Oct 6, 2022

jankeromnes and others added 4 commits October 7, 2022 16:55

[dashboard] Improve colors and wording of usage-based billing pages

2b3be0a

Co-authored-by: George Tsiolis <tsiolis.g@gmail.com>

[dashboard] Show billing period start and end dates in usage-based bi…

4939625

…lling settings

[dashboard] Improve progress bar style in -webkit browsers

ba10bdc

Co-authored-by: George Tsiolis <tsiolis.g@gmail.com>

[dashboard] Fix top-level team selector state when in personal settin…

f9414d2

…gs pages (including billing pages)

jankeromnes force-pushed the jx/improve-billing-ui branch from f65f604 to f9414d2 Compare October 7, 2022 16:55

roboquat removed the do-not-merge/hold label Oct 7, 2022

gtsiolis mentioned this pull request Oct 7, 2022

Update billing account settings section #13684

Closed

jldec mentioned this pull request Oct 10, 2022

[billing] Show current credit balance #13155

Closed

easyCZ approved these changes Oct 10, 2022

View reviewed changes

roboquat merged commit a4aab09 into main Oct 10, 2022

roboquat deleted the jx/improve-billing-ui branch October 10, 2022 13:38

roboquat added deployed: webapp Meta team change is running in production deployed Change is completely running in production labels Oct 11, 2022

gtsiolis mentioned this pull request Oct 20, 2022

Introduce a progress indicator component for the balance used element in the billing page #14049

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Usage-based] Update billing page layout for teams and personal accounts #13564

[Usage-based] Update billing page layout for teams and personal accounts #13564

jankeromnes commented Oct 4, 2022 •

edited

Loading

jankeromnes commented Oct 4, 2022 •

edited by werft-gitpod-dev-com bot

Loading

jankeromnes commented Oct 4, 2022 •

edited by werft-gitpod-dev-com bot

Loading

jankeromnes commented Oct 6, 2022

laushinka commented Oct 6, 2022

jankeromnes commented Oct 6, 2022 •

edited

Loading

laushinka commented Oct 6, 2022

jankeromnes commented Oct 6, 2022 •

edited

Loading

gtsiolis commented Oct 6, 2022 •

edited by werft-gitpod-dev-com bot

Loading

laushinka commented Oct 6, 2022 •

edited by werft-gitpod-dev-com bot

Loading

gtsiolis left a comment

gtsiolis Oct 6, 2022

jankeromnes Oct 7, 2022 •

edited

Loading

jankeromnes Oct 7, 2022

jankeromnes commented Oct 6, 2022 •

edited by werft-gitpod-dev-com bot

Loading

jankeromnes commented Oct 7, 2022 •

edited by werft-gitpod-dev-com bot

Loading

easyCZ Oct 10, 2022

jankeromnes Oct 10, 2022

easyCZ Oct 10, 2022

[Usage-based] Update billing page layout for teams and personal accounts #13564

[Usage-based] Update billing page layout for teams and personal accounts #13564

Conversation

jankeromnes commented Oct 4, 2022 • edited Loading

Description

Related Issue(s)

How to test

Release Notes

Documentation

Werft options:

jankeromnes commented Oct 4, 2022 • edited by werft-gitpod-dev-com bot Loading

jankeromnes commented Oct 4, 2022 • edited by werft-gitpod-dev-com bot Loading

jankeromnes commented Oct 6, 2022

Screenshots

laushinka commented Oct 6, 2022

jankeromnes commented Oct 6, 2022 • edited Loading

laushinka commented Oct 6, 2022

jankeromnes commented Oct 6, 2022 • edited Loading

gtsiolis commented Oct 6, 2022 • edited by werft-gitpod-dev-com bot Loading

laushinka commented Oct 6, 2022 • edited by werft-gitpod-dev-com bot Loading

gtsiolis left a comment

Choose a reason for hiding this comment

gtsiolis Oct 6, 2022

Choose a reason for hiding this comment

jankeromnes Oct 7, 2022 • edited Loading

Choose a reason for hiding this comment

jankeromnes Oct 7, 2022

Choose a reason for hiding this comment

jankeromnes commented Oct 6, 2022 • edited by werft-gitpod-dev-com bot Loading

jankeromnes commented Oct 7, 2022 • edited by werft-gitpod-dev-com bot Loading

easyCZ Oct 10, 2022

Choose a reason for hiding this comment

jankeromnes Oct 10, 2022

Choose a reason for hiding this comment

easyCZ Oct 10, 2022

Choose a reason for hiding this comment

jankeromnes commented Oct 4, 2022 •

edited

Loading

jankeromnes commented Oct 4, 2022 •

edited by werft-gitpod-dev-com bot

Loading

jankeromnes commented Oct 4, 2022 •

edited by werft-gitpod-dev-com bot

Loading

jankeromnes commented Oct 6, 2022 •

edited

Loading

jankeromnes commented Oct 6, 2022 •

edited

Loading

gtsiolis commented Oct 6, 2022 •

edited by werft-gitpod-dev-com bot

Loading

laushinka commented Oct 6, 2022 •

edited by werft-gitpod-dev-com bot

Loading

jankeromnes Oct 7, 2022 •

edited

Loading

jankeromnes commented Oct 6, 2022 •

edited by werft-gitpod-dev-com bot

Loading

jankeromnes commented Oct 7, 2022 •

edited by werft-gitpod-dev-com bot

Loading