gitpod-io
Improve spending limit reached modal
Problem to solve
Following up from https://github.com/gitpod-io/gitpod/pull/11576, the spending limit reached modal as it comes with some usability issues like multiple primary buttons with the same weight side by side, etc. Cc @AlexTugarev @geropl
Other things to consider include allowing team owners to ad-hoc increase the spending limit, etc.
Re-posting from a relevant discussion in https://github.com/gitpod-io/gitpod/issues/11404#issuecomment-1190131861:
- Surface a modal blocking workspace start when spending limit is reached
- Possibly allow switching back usage attribution to user's personal account credits.
- Link to billing when usage credits have been used.
- Potentially, show a non-dismissible alert component in the dashboard for team owners when visiting pages in a team that spending limits have been reached and team members are blocked from using the product.
Later on, we could ad-hoc allow resolving the issue for individuals users by allowing them to add a credit card on the fly to enable billing and continue with the workspace start. 💡
Designs
| Modal for team members | Modal for team owners |
|---|---|
 |
 |
In parallel with the updates in https://github.com/gitpod-io/gitpod/issues/11498 (see https://github.com/gitpod-io/gitpod/issues/11498#issuecomment-1205281686) we could reuse the same elements to provide ad-hoc resolution by changing the billing account within this blocking modal.
| Modal with ad-hoc resolution |
|---|
 |
See design specs.
Some thoughts about this:
Changing the billing account is probably not the most helpful suggestion in this scenario since users are unlikely to be members of multiple billing accounts.
In the case when the spending limit was hit for a team billing account, offer a link to the team (which works even if they are not the owner)
In general this error should also point users to their own billing settings (at /billing) where they can configure their own billing or select a different billing account if that actually exists,
Usage Limit Reached
! You have reached the spending limit of your billing account.
Contact a team owner of name-of-team to increase the spending limit, or configure your billing settings.
[ Go to Dashboard ]
Posting below the designs following the specs described above. Cc @jldec
| Usage Limit Reached |
|---|
 |
See design specs.