Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 7 commits into from
Oct 10, 2022
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
39d831f
[dashboard] Simplify and optimize UsageBasedBillingConfig component
jankeromnes Oct 4, 2022
9fe12c1
[dashboard] Implement 'Balance' UI in usage-based billing settings
jankeromnes Oct 4, 2022
c09132b
[dashboard] Differentiate usage-based upgrade UI for teams vs users
jankeromnes Oct 4, 2022
2b3be0a
[dashboard] Improve colors and wording of usage-based billing pages
jankeromnes Oct 7, 2022
4939625
[dashboard] Show billing period start and end dates in usage-based bi…
jankeromnes Oct 7, 2022
ba10bdc
[dashboard] Improve progress bar style in -webkit browsers
jankeromnes Oct 7, 2022
f9414d2
[dashboard] Fix top-level team selector state when in personal settin…
jankeromnes Oct 7, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 6 additions & 3 deletions components/dashboard/src/Menu.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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, [
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

[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.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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? 🙂

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

"account",
"notifications",
"billing",
"plans",
"teams",
"variables",
"keys",
"integrations",
Expand Down Expand Up @@ -244,7 +247,7 @@ export default function Menu() {
const onFeedbackFormClose = () => {
setFeedbackFormVisible(false);
};
const isTeamLevelActive = !projectSlug && !isWorkspacesUI && !isAccountUI && !isAdminUI && teamOrUserSlug;
const isTeamLevelActive = !projectSlug && !isWorkspacesUI && !isPersonalSettingsUI && !isAdminUI && teamOrUserSlug;
const renderTeamMenu = () => {
if (!teams || teams.length === 0) {
return (
Expand Down Expand Up @@ -467,7 +470,7 @@ export default function Menu() {
</div>
{isFeedbackFormVisible && <FeedbackFormModal onClose={onFeedbackFormClose} />}
</div>
{!isMinimalUI && !prebuildId && !isWorkspacesUI && !isAccountUI && !isAdminUI && (
{!isMinimalUI && !prebuildId && !isWorkspacesUI && !isPersonalSettingsUI && !isAdminUI && (
<nav className="flex">
{secondLevelMenu.map((entry: Entry) => (
<TabMenuItem
Expand Down
321 changes: 247 additions & 74 deletions components/dashboard/src/components/UsageBasedBillingConfig.tsx
View file
Open in desktop

Large diffs are not rendered by default.

4 changes: 1 addition & 3 deletions components/dashboard/src/images/check-circle.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
4 changes: 2 additions & 2 deletions components/dashboard/src/index.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -69,7 +69,7 @@
}

button.gp-link {
@apply bg-transparent hover:bg-transparent p-0 rounded-none;
@apply bg-transparent hover:bg-transparent p-0 font-normal rounded-none;
}

a.gp-link,
Expand Down Expand Up @@ -124,7 +124,7 @@
@apply h-2 rounded;
}
progress::-webkit-progress-bar {
@apply rounded-md bg-gray-200;
@apply rounded-md bg-gray-200 dark:bg-gray-600;
}
progress::-webkit-progress-value {
@apply rounded-md bg-green-500;
Expand Down
9 changes: 5 additions & 4 deletions components/dashboard/src/settings/Billing.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,15 +13,16 @@ import { AttributionId } from "@gitpod/gitpod-protocol/lib/attribution";

export default function Billing() {
const { user } = useContext(UserContext);
const attributionId: AttributionId = { kind: "user", userId: user?.id || "" };

return (
<PageWithSettingsSubMenu title="Billing" subtitle="Usage-Based Billing.">
<PageWithSettingsSubMenu title="Billing" subtitle="Configure and manage billing for your personal account.">
<div>
<h3>Billing Account</h3>
<BillingAccountSelector />
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

issue(non-blocking): This is out of the scope of these changes, but the subheading of this section needs to use <h2> as the rest of the setting sections across the product.

<h3 className="mt-12">Usage-Based Billing</h3>
<UsageBasedBillingConfig subject={user} attributionId={AttributionId.render(attributionId)} />
<h3 className="mt-12">Personal Plan</h3>
<UsageBasedBillingConfig
attributionId={user && AttributionId.render({ kind: "user", userId: user.id })}
/>
</div>
</PageWithSettingsSubMenu>
);
Expand Down
2 changes: 1 addition & 1 deletion components/dashboard/src/teams/TeamBilling.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -313,7 +313,7 @@ export default function TeamBilling() {
<PageWithSubMenu
subMenu={getTeamSettingsMenu({ team, billingMode: teamBillingMode })}
title="Billing"
subtitle="Manage team billing and plans."
subtitle="Configure and manage billing for your team."
>
{teamBillingMode === undefined ? (
<div className="p-20">
Expand Down
3 changes: 1 addition & 2 deletions components/dashboard/src/teams/TeamUsageBasedBilling.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,6 @@ export default function TeamUsageBasedBilling() {
const location = useLocation();
const team = getCurrentTeam(location, teams);
const [teamBillingMode, setTeamBillingMode] = useState<BillingMode | undefined>(undefined);
const attributionId: AttributionId = { kind: "team", teamId: team?.id || "" };

useEffect(() => {
if (!team) return;
Expand All @@ -35,7 +34,7 @@ export default function TeamUsageBasedBilling() {
return (
<>
<h3>Usage-Based Billing</h3>
<UsageBasedBillingConfig subject={team} attributionId={AttributionId.render(attributionId)} />
<UsageBasedBillingConfig attributionId={team && AttributionId.render({ kind: "team", teamId: team.id })} />
</>
);
}