Polish handling of BillingMode

components/dashboard/src/Menu.tsx

@@ -152,9 +152,6 @@ export default function Menu() {
             server.isStudent().then((v) => () => setIsStudent(v)),
             server.isChargebeeCustomer().then((v) => () => setIsChargebeeCustomer(v)),
         ]).then((setters) => setters.forEach((s) => s()));
-
-        // Refresh billing mode
-        refreshUserBillingMode();
     }, []);
 
     useEffect(() => {
@@ -163,6 +160,11 @@ export default function Menu() {
         }
     }, [team]);
 
+    useEffect(() => {
+        // Refresh billing mode
+        refreshUserBillingMode();
+    }, [teams]);
+
     const teamOrUserSlug = !!team ? "/t/" + team.slug : "/projects";
     const leftMenu: Entry[] = (() => {
         // Project menu

components/dashboard/src/settings/Preferences.tsx

@@ -14,11 +14,12 @@ import SelectIDE from "./SelectIDE";
 import SelectWorkspaceClass from "./selectClass";
 import { PageWithSettingsSubMenu } from "./PageWithSettingsSubMenu";
 import { FeatureFlagContext } from "../contexts/FeatureFlagContext";
+import { BillingMode } from "@gitpod/gitpod-protocol/lib/billing-mode";
 
 type Theme = "light" | "dark" | "system";
 
 export default function Preferences() {
-    const { user } = useContext(UserContext);
+    const { user, userBillingMode } = useContext(UserContext);
     const { setIsDark } = useContext(ThemeContext);
     const { showWorkspaceClassesUI } = useContext(FeatureFlagContext);
 
@@ -56,7 +57,9 @@ export default function Preferences() {
                 <h3>Editor</h3>
                 <p className="text-base text-gray-500 dark:text-gray-400">Choose the editor for opening workspaces.</p>
                 <SelectIDE location="preferences" />
-                <SelectWorkspaceClass enabled={showWorkspaceClassesUI} />
+                <SelectWorkspaceClass
+                    enabled={showWorkspaceClassesUI || BillingMode.canSetWorkspaceClass(userBillingMode)}
+                />
                 <h3 className="mt-12">Theme</h3>
                 <p className="text-base text-gray-500 dark:text-gray-400">Early bird or night owl? Choose your side.</p>
                 <div className="mt-4 space-x-3 flex">

components/gitpod-protocol/src/billing-mode.ts

@@ -26,7 +26,11 @@ export namespace BillingMode {
         );
     }
 
-    export function canSetWorkspaceClass(billingMode: BillingMode): boolean {
+    export function canSetWorkspaceClass(billingMode?: BillingMode): boolean {
+        if (!billingMode) {
+            return false;
+        }
+
         // if has any Stripe subscription, either directly or per team
         return billingMode.mode === "usage-based";
     }
@@ -52,6 +56,9 @@ interface Chargebee {
 interface UsageBased {
     mode: "usage-based";
 
+    /** True iff this is a team, and is based on a paid plan. Currently only set for teams! */
+    paid?: boolean;
+
     /** User is already converted, but is member with at least one Chargebee-based "Team Plan" */
     hasChargebeeTeamPlan?: boolean;