[dashboard] Block UI based on BillingMode

geropl · geropl · commit 1bfb882d6b51 · 2022-08-05T20:26:43.000Z
diff --git a/components/dashboard/src/Menu.tsx b/components/dashboard/src/Menu.tsx
@@ -26,7 +26,7 @@ import { ProjectContext } from "./projects/project-context";
 import { PaymentContext } from "./payment-context";
 import FeedbackFormModal from "./feedback-form/FeedbackModal";
 import { inResource, isGitpodIo } from "./utils";
-import { FeatureFlagContext } from "./contexts/FeatureFlagContext";
+import { BillingMode } from "@gitpod/gitpod-protocol/lib/billing-mode";
 
 interface Entry {
     title: string;
@@ -35,13 +35,12 @@ interface Entry {
 }
 
 export default function Menu() {
-    const { user } = useContext(UserContext);
+    const { user, userBillingMode, refreshUserBillingMode } = useContext(UserContext);
     const { teams } = useContext(TeamsContext);
     const location = useLocation();
     const team = getCurrentTeam(location, teams);
-    const { showPaymentUI, setShowPaymentUI, setCurrency, setIsStudent, setIsChargebeeCustomer } =
-        useContext(PaymentContext);
-    const { showUsageBasedPricingUI } = useContext(FeatureFlagContext);
+    const { setCurrency, setIsStudent, setIsChargebeeCustomer } = useContext(PaymentContext);
+    const [teamBillingMode, setTeamBillingMode] = useState<BillingMode | undefined>(undefined);
     const { project, setProject } = useContext(ProjectContext);
     const [isFeedbackFormVisible, setFeedbackFormVisible] = useState<boolean>(false);
 
@@ -146,14 +145,19 @@ export default function Menu() {
     useEffect(() => {
         const { server } = getGitpodService();
         Promise.all([
-            server.getShowPaymentUI().then((v) => () => setShowPaymentUI(v)),
             server.getClientRegion().then((v) => () => {
                 // @ts-ignore
                 setCurrency(countries[v]?.currency === "EUR" ? "EUR" : "USD");
             }),
             server.isStudent().then((v) => () => setIsStudent(v)),
             server.isChargebeeCustomer().then((v) => () => setIsChargebeeCustomer(v)),
         ]).then((setters) => setters.forEach((s) => s()));
+
+        // Refresh billing mode
+        refreshUserBillingMode();
+        if (team) {
+            server.getBillingModeForTeam(team.id).then(setTeamBillingMode);
+        }
     }, []);
 
     const teamOrUserSlug = !!team ? "/t/" + team.slug : "/projects";
@@ -191,7 +195,7 @@ export default function Menu() {
                     link: `/t/${team.slug}/members`,
                 },
             ];
-            if (showUsageBasedPricingUI) {
+            if (teamBillingMode && teamBillingMode.mode === "usage-based") {
                 teamSettingsList.push({
                     title: "Usage",
                     link: `/t/${team.slug}/usage`,
@@ -201,7 +205,7 @@ export default function Menu() {
                 teamSettingsList.push({
                     title: "Settings",
                     link: `/t/${team.slug}/settings`,
-                    alternatives: getTeamSettingsMenu({ team, showPaymentUI }).flatMap((e) => e.link),
+                    alternatives: getTeamSettingsMenu({ team, billingMode: teamBillingMode }).flatMap((e) => e.link),
                 });
             }
 
@@ -216,7 +220,7 @@ export default function Menu() {
             {
                 title: "Settings",
                 link: "/settings",
-                alternatives: getSettingsMenu({ showPaymentUI, showUsageBasedPricingUI }).flatMap((e) => e.link),
+                alternatives: getSettingsMenu({ userBillingMode }).flatMap((e) => e.link),
             },
         ];
     })();
diff --git a/components/dashboard/src/contexts/FeatureFlagContext.tsx b/components/dashboard/src/contexts/FeatureFlagContext.tsx
@@ -16,11 +16,9 @@ interface FeatureFlagConfig {
 }
 
 const FeatureFlagContext = createContext<{
-    showUsageBasedPricingUI: boolean;
     showWorkspaceClassesUI: boolean;
     showPersistentVolumeClaimUI: boolean;
 }>({
-    showUsageBasedPricingUI: false,
     showWorkspaceClassesUI: false,
     showPersistentVolumeClaimUI: false,
 });
@@ -31,12 +29,10 @@ const FeatureFlagContextProvider: React.FC = ({ children }) => {
     const { project } = useContext(ProjectContext);
     const location = useLocation();
     const team = getCurrentTeam(location, teams);
-    const [showUsageBasedPricingUI, setShowUsageBasedPricingUI] = useState<boolean>(false);
     const [showWorkspaceClassesUI, setShowWorkspaceClassesUI] = useState<boolean>(false);
     const [showPersistentVolumeClaimUI, setShowPersistentVolumeClaimUI] = useState<boolean>(false);
 
     const featureFlags: FeatureFlagConfig = {
-        isUsageBasedBillingEnabled: { defaultValue: false, setter: setShowUsageBasedPricingUI },
         workspace_classes: { defaultValue: true, setter: setShowWorkspaceClassesUI },
         persistent_volume_claim: { defaultValue: true, setter: setShowPersistentVolumeClaimUI },
     };
@@ -58,9 +54,7 @@ const FeatureFlagContextProvider: React.FC = ({ children }) => {
     }, [user, teams, team, project]);
 
     return (
-        <FeatureFlagContext.Provider
-            value={{ showUsageBasedPricingUI, showWorkspaceClassesUI, showPersistentVolumeClaimUI }}
-        >
+        <FeatureFlagContext.Provider value={{ showWorkspaceClassesUI, showPersistentVolumeClaimUI }}>
             {children}
         </FeatureFlagContext.Provider>
     );
diff --git a/components/dashboard/src/payment-context.tsx b/components/dashboard/src/payment-context.tsx
@@ -8,33 +8,27 @@ import React, { createContext, useState } from "react";
 import { Currency } from "@gitpod/gitpod-protocol/lib/plans";
 
 const PaymentContext = createContext<{
-    showPaymentUI?: boolean;
-    setShowPaymentUI: React.Dispatch<boolean>;
     currency: Currency;
     setCurrency: React.Dispatch<Currency>;
     isStudent?: boolean;
     setIsStudent: React.Dispatch<boolean>;
     isChargebeeCustomer?: boolean;
     setIsChargebeeCustomer: React.Dispatch<boolean>;
 }>({
-    setShowPaymentUI: () => null,
     currency: "USD",
     setCurrency: () => null,
     setIsStudent: () => null,
     setIsChargebeeCustomer: () => null,
 });
 
 const PaymentContextProvider: React.FC = ({ children }) => {
-    const [showPaymentUI, setShowPaymentUI] = useState<boolean>();
     const [currency, setCurrency] = useState<Currency>("USD");
     const [isStudent, setIsStudent] = useState<boolean>();
     const [isChargebeeCustomer, setIsChargebeeCustomer] = useState<boolean>();
 
     return (
         <PaymentContext.Provider
             value={{
-                showPaymentUI,
-                setShowPaymentUI,
                 currency,
                 setCurrency,
                 isStudent,
diff --git a/components/dashboard/src/settings/PageWithSettingsSubMenu.tsx b/components/dashboard/src/settings/PageWithSettingsSubMenu.tsx
@@ -6,8 +6,7 @@
 
 import { useContext } from "react";
 import { PageWithSubMenu } from "../components/PageWithSubMenu";
-import { FeatureFlagContext } from "../contexts/FeatureFlagContext";
-import { PaymentContext } from "../payment-context";
+import { UserContext } from "../user-context";
 import getSettingsMenu from "./settings-menu";
 
 export interface PageWithAdminSubMenuProps {
@@ -17,15 +16,10 @@ export interface PageWithAdminSubMenuProps {
 }
 
 export function PageWithSettingsSubMenu({ title, subtitle, children }: PageWithAdminSubMenuProps) {
-    const { showUsageBasedPricingUI } = useContext(FeatureFlagContext);
-    const { showPaymentUI } = useContext(PaymentContext);
+    const { userBillingMode } = useContext(UserContext);
 
     return (
-        <PageWithSubMenu
-            subMenu={getSettingsMenu({ showPaymentUI, showUsageBasedPricingUI })}
-            title={title}
-            subtitle={subtitle}
-        >
+        <PageWithSubMenu subMenu={getSettingsMenu({ userBillingMode })} title={title} subtitle={subtitle}>
             {children}
         </PageWithSubMenu>
     );
diff --git a/components/dashboard/src/settings/Plans.tsx b/components/dashboard/src/settings/Plans.tsx
@@ -43,8 +43,8 @@ type TeamClaimModal =
       };
 
 export default function () {
-    const { user } = useContext(UserContext);
-    const { showPaymentUI, currency, setCurrency, isStudent, isChargebeeCustomer } = useContext(PaymentContext);
+    const { user, userBillingMode } = useContext(UserContext);
+    const { currency, setCurrency, isStudent, isChargebeeCustomer } = useContext(PaymentContext);
     const [accountStatement, setAccountStatement] = useState<AccountStatement>();
     const [availableCoupons, setAvailableCoupons] = useState<PlanCoupon[]>();
     const [appliedCoupons, setAppliedCoupons] = useState<PlanCoupon[]>();
@@ -632,10 +632,11 @@ export default function () {
         );
     }
 
+    const showPlans = userBillingMode && userBillingMode.mode === "chargebee";
     return (
         <div>
             <PageWithSettingsSubMenu title="Plans" subtitle="Manage account usage and billing.">
-                {showPaymentUI && (
+                {showPlans && (
                     <div className="w-full text-center">
                         <p className="text-xl text-gray-500">
                             You are currently using the{" "}
diff --git a/components/dashboard/src/settings/Teams.tsx b/components/dashboard/src/settings/Teams.tsx
@@ -23,6 +23,7 @@ import { poll, PollOptions } from "../utils";
 import { Disposable } from "@gitpod/gitpod-protocol";
 import { PaymentContext } from "../payment-context";
 import { PageWithSettingsSubMenu } from "./PageWithSettingsSubMenu";
+import { UserContext } from "../user-context";
 
 export default function Teams() {
     return (
@@ -43,8 +44,8 @@ interface Slot extends TeamSubscriptionSlotResolved {
 }
 
 function AllTeams() {
-    const { showPaymentUI, currency, isStudent, isChargebeeCustomer, setIsChargebeeCustomer } =
-        useContext(PaymentContext);
+    const { userBillingMode } = useContext(UserContext);
+    const { currency, isStudent, isChargebeeCustomer, setIsChargebeeCustomer } = useContext(PaymentContext);
 
     const [slots, setSlots] = useState<Slot[]>([]);
     const [teamSubscriptions, setTeamSubscriptions] = useState<TeamSubscription[]>([]);
@@ -603,9 +604,13 @@ function AllTeams() {
         </React.Fragment>
     );
 
+    const showTeamPlans =
+        userBillingMode &&
+        (userBillingMode.mode === "chargebee" ||
+            (userBillingMode.mode === "usage-based" && !!userBillingMode.hasChargebeeTeamPlan));
     return (
         <div>
-            {showPaymentUI ? (
+            {showTeamPlans ? (
                 renderTeams()
             ) : (
                 <div className="flex flex-row">
diff --git a/components/dashboard/src/settings/settings-menu.ts b/components/dashboard/src/settings/settings-menu.ts
@@ -4,6 +4,7 @@
  * See License-AGPL.txt in the project root for license information.
  */
 
+import { BillingMode } from "@gitpod/gitpod-protocol/lib/billing-mode";
 import {
     settingsPathAccount,
     settingsPathBilling,
@@ -17,7 +18,7 @@ import {
     settingsPathSSHKeys,
 } from "./settings.routes";
 
-export default function getSettingsMenu(params: { showPaymentUI?: boolean; showUsageBasedPricingUI?: boolean }) {
+export default function getSettingsMenu(params: { userBillingMode?: BillingMode }) {
     return [
         {
             title: "Account",
@@ -27,26 +28,7 @@ export default function getSettingsMenu(params: { showPaymentUI?: boolean; showU
             title: "Notifications",
             link: [settingsPathNotifications],
         },
-        ...(params.showPaymentUI
-            ? [
-                  ...(params.showUsageBasedPricingUI
-                      ? [
-                            {
-                                title: "Billing",
-                                link: [settingsPathBilling],
-                            },
-                        ]
-                      : []),
-                  {
-                      title: "Plans",
-                      link: [settingsPathPlans],
-                  },
-                  {
-                      title: "Team Plans",
-                      link: [settingsPathTeams],
-                  },
-              ]
-            : []),
+        ...renderBillingMenuEntries(params.userBillingMode),
         {
             title: "Variables",
             link: [settingsPathVariables],
@@ -65,3 +47,40 @@ export default function getSettingsMenu(params: { showPaymentUI?: boolean; showU
         },
     ];
 }
+
+function renderBillingMenuEntries(billingMode?: BillingMode) {
+    if (!billingMode) {
+        return [];
+    }
+    switch (billingMode.mode) {
+        case "none":
+            return [];
+        case "chargebee":
+            return [
+                {
+                    title: "Plans",
+                    link: [settingsPathPlans],
+                },
+                {
+                    title: "Team Plans",
+                    link: [settingsPathTeams],
+                },
+            ];
+        case "usage-based":
+            return [
+                // We need to allow access to "Team Plans" here, at least for owners.
+                ...(billingMode.hasChargebeeTeamSubscription
+                    ? [
+                          {
+                              title: "Team Plans",
+                              link: [settingsPathTeams],
+                          },
+                      ]
+                    : []),
+                {
+                    title: "Billing",
+                    link: [settingsPathBilling],
+                },
+            ];
+    }
+}
diff --git a/components/dashboard/src/teams/TeamBilling.tsx b/components/dashboard/src/teams/TeamBilling.tsx
@@ -22,6 +22,7 @@ import { getGitpodService } from "../service/service";
 import { getCurrentTeam, TeamsContext } from "./teams-context";
 import { getTeamSettingsMenu } from "./TeamSettings";
 import TeamUsageBasedBilling from "./TeamUsageBasedBilling";
+import { BillingMode } from "@gitpod/gitpod-protocol/lib/billing-mode";
 
 type PendingPlan = Plan & { pendingSince: number };
 
@@ -31,7 +32,8 @@ export default function TeamBilling() {
     const team = getCurrentTeam(location, teams);
     const [members, setMembers] = useState<TeamMemberInfo[]>([]);
     const [teamSubscription, setTeamSubscription] = useState<TeamSubscription2 | undefined>();
-    const { showPaymentUI, currency, setCurrency } = useContext(PaymentContext);
+    const { currency, setCurrency } = useContext(PaymentContext);
+    const [teamBillingMode, setTeamBillingMode] = useState<BillingMode | undefined>(undefined);
     const [pendingTeamPlan, setPendingTeamPlan] = useState<PendingPlan | undefined>();
     const [pollTeamSubscriptionTimeout, setPollTeamSubscriptionTimeout] = useState<NodeJS.Timeout | undefined>();
 
@@ -40,12 +42,14 @@ export default function TeamBilling() {
             return;
         }
         (async () => {
-            const [memberInfos, subscription] = await Promise.all([
+            const [memberInfos, subscription, teamBillingMode] = await Promise.all([
                 getGitpodService().server.getTeamMembers(team.id),
                 getGitpodService().server.getTeamSubscription(team.id),
+                getGitpodService().server.getBillingModeForTeam(team.id),
             ]);
             setMembers(memberInfos);
             setTeamSubscription(subscription);
+            setTeamBillingMode(teamBillingMode);
         })();
     }, [team]);
 
@@ -140,7 +144,7 @@ export default function TeamBilling() {
 
     return (
         <PageWithSubMenu
-            subMenu={getTeamSettingsMenu({ team, showPaymentUI })}
+            subMenu={getTeamSettingsMenu({ team, billingMode: teamBillingMode })}
             title="Billing"
             subtitle="Manage team billing and plans."
         >
diff --git a/components/dashboard/src/teams/TeamSettings.tsx b/components/dashboard/src/teams/TeamSettings.tsx
diff --git a/components/dashboard/src/teams/TeamUsage.tsx b/components/dashboard/src/teams/TeamUsage.tsx
diff --git a/components/dashboard/src/teams/TeamUsageBasedBilling.tsx b/components/dashboard/src/teams/TeamUsageBasedBilling.tsx
diff --git a/components/dashboard/src/user-context.tsx b/components/dashboard/src/user-context.tsx
