[dashboard] Improve explicit usage-based billing attribution UX #12151

jankeromnes · 2022-08-16T09:30:31Z

Description

Temporarily disable selecting personal account for usage-based billing attribution
Improve usage-based billing account selection UX

Related Issue(s)

Fixes #12097
Fixes #11498

How to test

Enable usage-based billing for your personal account
Go to /billing
You should not be able to select yourself (i.e. your individual user account) as a billing account

Release Notes

NONE

Documentation

Werft options:

/werft with-preview
/werft with-payment

jankeromnes · 2022-08-16T09:32:59Z

/werft run

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

jankeromnes · 2022-08-17T08:30:17Z

I believe this is roughly there, but the UX seems a bit sub-optimal:

No team (added new hint)	One team	Two teams

Maybe this is a good time to also do a quick UI polish? E.g. by implementing #11498 here.

@gtsiolis when no choice is available (e.g. you have zero teams with usage-based enabled), there is no available choice. I've added a small placeholder text to provide users with a basic hint. Do you think this is a good idea? Or maybe you have alternative proposals? 👀

jankeromnes · 2022-08-18T06:45:06Z

🪙 ➡️ 🎰

/werft run

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

jankeromnes · 2022-08-18T08:29:18Z

New look:

No teams	One team	Two teams

gtsiolis · 2022-08-18T10:08:49Z

Looking at this now! 👀

gtsiolis · 2022-08-18T10:11:49Z

Enable usage-based billing for your personal account

@jankeromnes How can I enable UBP for personal account? I only see Plans and Team Plans in user settings.

jankeromnes · 2022-08-18T10:46:57Z

Thanks @gtsiolis!

@jankeromnes How can I enable UBP for personal account? I only see Plans and Team Plans in user settings.

This has changed recently. In order to enable UBP for you personal account, you (currently) need to be part of a team that has UBP enabled and a paid subscription.

This will likely change again when we introduce billing for individual users, but for now this is how to enable it and see the attribution UI.

gtsiolis · 2022-08-18T10:54:55Z

This has changed recently. In order to enable UBP for you personal account, you (currently) need to be part of a team that has UBP enabled and a paid subscription.

@jankeromnes I have also enabled UBP for a team (feel free to join the team in the preview env if helpful) but I still can not see the billing options in user settings, see screenshot below.

User Settings

Two more comments regarding UX:

Regarding the question in [dashboard] Improve explicit usage-based billing attribution UX #12151 (comment), we could try to introduce a non-set component variant for the disabled billing settings as seen in Improve usage attribution in user settings #11498 (comment) to make it visually more distinct for the users as a plain paragraph text could fail to convey the information we want.
We could consider updating copy for the page and section subtitle as seen in Improve usage attribution in user settings #11498 (comment) and Improve usage attribution in user settings #11498 (comment) to avoid using billing terms as there could be no charges, avoid using confusing terms like UBP, etc.

geropl · 2022-08-18T10:58:06Z

@gtsiolis Followed your invite link, can you make me owner? 🙏

@jankeromnes What version is this branch based on? Older than yesterday?

gtsiolis · 2022-08-18T10:58:45Z

@geropl DONE

geropl · 2022-08-18T11:22:16Z

@gtsiolis This was unrelated to this PR and triggered by me misconfiguring ConfigCat. 😬
Works now: ✔️

@jankeromnes You were right: For this reason we rely on the FF being enabled for users as well 🙈 so both team_name and team_names is the correct way. Only way to avoid this would be to add a flag for "hasUbpTeamMembership" and show this selector in that case.... But let's discuss that separately, and it might just not be worth it. 💯

geropl

Tested and works, code LGTM!

/hold For @gtsiolis feedback. ✨

gtsiolis

Looks great, @jankeromnes! ✨

Left one minor issue comment about layout scalability and two nitpicks which are out of the scope of these changes. 🏀

components/dashboard/src/settings/Billing.tsx

components/dashboard/src/components/BillingAccountSelector.tsx

gtsiolis · 2022-08-18T11:35:11Z

components/dashboard/src/components/BillingAccountSelector.tsx

@@ -62,27 +82,43 @@ export function BillingAccountSelector(props: { onSelected?: () => void }) {
                <div>
                    <p>Bill all my usage to:</p>
                    <div className="mt-4 flex space-x-3">


issue(non-blocking): Could we wrap the cards and limit the number of entries per row as seen in #11498 (comment) to avoid breaking the layout or overflowing the page container?

Multiple billing accounts

Good idea! I've changed the layout from a flex to a grid, because that's more appropriate:

No team One team Two teams Three teams Four teams

Perfect! ✨

Thanks, @jankeromnes! 🏀

jankeromnes · 2022-08-18T12:41:25Z

Hey, many thanks for the quick reviews and excellent feedback! Will implement all recommendations. 💻

…based billing attribution

jankeromnes · 2022-08-18T13:29:41Z

Releasing the breaks 😎 🚀

/unhold

roboquat added release-note-none do-not-merge/work-in-progress size/S labels Aug 16, 2022

jankeromnes force-pushed the jx/billing-account branch from 3c7d035 to 43cbad1 Compare August 17, 2022 16:02

roboquat added size/M and removed size/S labels Aug 17, 2022

jankeromnes changed the title ~~[dashboard] Temporarily disable selecting personal account for usage-based billing attribution~~ [dashboard] Improve explicit usage-based billing attribution UX Aug 17, 2022

jankeromnes force-pushed the jx/billing-account branch from 43cbad1 to 9a5362c Compare August 17, 2022 16:04

jankeromnes force-pushed the jx/billing-account branch from 9a5362c to 51c0cd6 Compare August 18, 2022 08:28

jankeromnes marked this pull request as ready for review August 18, 2022 08:29

jankeromnes requested a review from a team August 18, 2022 08:29

roboquat removed the do-not-merge/work-in-progress label Aug 18, 2022

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

geropl approved these changes Aug 18, 2022

View reviewed changes

roboquat added the do-not-merge/hold label Aug 18, 2022

gtsiolis reviewed Aug 18, 2022

View reviewed changes

jankeromnes added 2 commits August 18, 2022 12:43

[dashboard] Temporarily disable selecting personal account for usage-…

32e9e19

…based billing attribution

[dashboard] Improve usage-based billing account selection UX

a5b1a59

jankeromnes force-pushed the jx/billing-account branch from 51c0cd6 to a5b1a59 Compare August 18, 2022 13:07

roboquat removed the do-not-merge/hold label Aug 18, 2022

roboquat merged commit 1baf1df into main Aug 18, 2022

roboquat deleted the jx/billing-account branch August 18, 2022 13:30

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

[dashboard] Improve explicit usage-based billing attribution UX #12151

[dashboard] Improve explicit usage-based billing attribution UX #12151

Uh oh!

Conversation

jankeromnes commented Aug 16, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Related Issue(s)

How to test

Release Notes

Documentation

Werft options:

Uh oh!

jankeromnes commented Aug 16, 2022 • edited by werft-gitpod-dev-com bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

jankeromnes commented Aug 17, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

jankeromnes commented Aug 18, 2022 • edited by werft-gitpod-dev-com bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

jankeromnes commented Aug 18, 2022

Uh oh!

gtsiolis commented Aug 18, 2022 • edited by werft-gitpod-dev-com bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

gtsiolis commented Aug 18, 2022

Uh oh!

jankeromnes commented Aug 18, 2022

Uh oh!

gtsiolis commented Aug 18, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

geropl commented Aug 18, 2022

Uh oh!

gtsiolis commented Aug 18, 2022

Uh oh!

geropl commented Aug 18, 2022

Uh oh!

geropl left a comment

Choose a reason for hiding this comment

Uh oh!

gtsiolis left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

gtsiolis Aug 18, 2022

Choose a reason for hiding this comment

Uh oh!

jankeromnes Aug 18, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

gtsiolis Aug 18, 2022

Choose a reason for hiding this comment

Uh oh!

jankeromnes commented Aug 18, 2022 • edited by werft-gitpod-dev-com bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

jankeromnes commented Aug 18, 2022 • edited by werft-gitpod-dev-com bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Uh oh!

jankeromnes commented Aug 16, 2022 •

edited

Loading

jankeromnes commented Aug 16, 2022 •

edited by werft-gitpod-dev-com bot

Loading

jankeromnes commented Aug 17, 2022 •

edited

Loading

jankeromnes commented Aug 18, 2022 •

edited by werft-gitpod-dev-com bot

Loading

gtsiolis commented Aug 18, 2022 •

edited by werft-gitpod-dev-com bot

Loading

gtsiolis commented Aug 18, 2022 •

edited

Loading

jankeromnes Aug 18, 2022 •

edited

Loading

jankeromnes commented Aug 18, 2022 •

edited by werft-gitpod-dev-com bot

Loading

jankeromnes commented Aug 18, 2022 •

edited by werft-gitpod-dev-com bot

Loading