Improve usage attribution in user settings

[gtsiolis]

Problem to solve

In the upcoming changes for the usage-based pricing (UBP), we'd like to allow users to change their usage attribution from their personal account to a team they are a member of.

Currently, we've only shipped an MVC for this in user settings under /billing, see screenshot below.

Billing (CURRENT)	Billing (AFTER)

Proposal

1. Introduce a better way to surface the default state of using the free credits of your personal account.
2. Allow users to select any team they belong to with active billing for usage attribution

Things to consider:

1. If attribution is ambiguous show UI to validate on workspace start, see relevant discussion (internal). Cc @jldec
2. Nudge users to select a team for usage attribution on workspace start when they are added to a new team with active billing.
3. ...

[jankeromnes]

Thanks for filing this issue @gtsiolis!

1. Introduce a better way to surface the default state of using the free credits of your personal account.

If you have specific suggestions on how to improve the existing Minimum Viable UI, I'd be happy to implement them. 🙂

2. Allow users to select any team they belong to with active billing for usage attribution

This is already 100% implemented in the MVC as described, so it's done. ✅

1. If attribution is ambiguous show UI to validate on workspace start, see relevant discussion (internal). Cc @jldec

I believe this is exactly what #11579 is about. ⏩

2. Nudge users to select a team for usage attribution on workspace start when they are added to a new team with active billing.

Interesting. What would such a nudge look like? Some banner or alert that's sticky in the dashboard and says something like "You've been added to team Y! Please select your preferred billing team between team X and team Y [select]"?

[gtsiolis]

If you have specific suggestions on how to improve the existing Minimum Viable UI

@jankeromnes I've posted some early designs in a relevant discussion (internal). Reposting the two exports below:

Approach 🅰️	Approach 🅱️

Interesting. What would such a nudge look like? ...

I was thinking two points:

1. A tip alert in the billing account settings to inform users about the available teams to switch to.
2. A modal shown once during workspaces start, but I believe this is already being tackled in When starting a workspace but usage attribution is unclear, prompt for explicit user choice #11777, right?

[jldec]

Let's just remove the placeholder text (first 2 lines) at top and leave the remaining (card-selection) UI as is.
The section description could be improved to say:

Billing Account

Associate all usage with the billing account below.

[ Current User ] --- [ Team 1 ]
[ Personal account ] [ 23 members ]

[gtsiolis]

Posting below the designs following the specs described above. Cc @jankeromnes @jldec

One more change that we missed discussing is the update of the page subheading. We could update that to match the copy patterns used across the product to the following:

# BEFORE
> Billing
> Usage-Based Billing.

# AFTER
> Billing
> Manage billing account settings.

Things to consider in future 🛹 iteration:

1. Use a more flexible dropdown, as see in Improve usage attribution in user settings #11498 (comment).
2. Use a confirmation modal when selecting a different billing account.

Billing (CURRENT)	Billing (AFTER)