[dashboard] Add Usage-Based feature flag and empty Billing page

Author: jankeromnes

components/dashboard/src/Menu.tsx

@@ -27,6 +27,7 @@ import { getProjectSettingsMenu } from "./projects/ProjectSettings";
 import { ProjectContext } from "./projects/project-context";
 import { PaymentContext } from "./payment-context";
 import FeedbackFormModal from "./feedback-form/FeedbackModal";
+import { getExperimentsClient } from "./experiments/client";
 
 interface Entry {
     title: string;
@@ -39,8 +40,15 @@ export default function Menu() {
     const { teams } = useContext(TeamsContext);
     const location = useLocation();
     const team = getCurrentTeam(location, teams);
-    const { showPaymentUI, setShowPaymentUI, setCurrency, setIsStudent, setIsChargebeeCustomer } =
-        useContext(PaymentContext);
+    const {
+        showPaymentUI,
+        setShowPaymentUI,
+        showUsageBasedUI,
+        setShowUsageBasedUI,
+        setCurrency,
+        setIsStudent,
+        setIsChargebeeCustomer,
+    } = useContext(PaymentContext);
     const { project, setProject } = useContext(ProjectContext);
     const [isFeedbackFormVisible, setFeedbackFormVisible] = useState<boolean>(false);
 
@@ -143,6 +151,12 @@ export default function Menu() {
         const { server } = getGitpodService();
         Promise.all([
             server.getShowPaymentUI().then((v) => () => setShowPaymentUI(v)),
+            getExperimentsClient()
+                .getValueAsync("isUsageBasedBillingEnabled", false, {
+                    userID: user?.id,
+                    teamName: team?.name,
+                })
+                .then((v) => () => setShowUsageBasedUI(v)),
             server.getClientRegion().then((v) => () => {
                 // @ts-ignore
                 setCurrency(countries[v]?.currency === "EUR" ? "EUR" : "USD");
@@ -211,7 +225,7 @@ export default function Menu() {
             {
                 title: "Settings",
                 link: "/settings",
-                alternatives: getSettingsMenu({ showPaymentUI }).flatMap((e) => e.link),
+                alternatives: getSettingsMenu({ showPaymentUI, showUsageBasedUI }).flatMap((e) => e.link),
             },
         ];
     })();

components/dashboard/src/payment-context.tsx

@@ -10,6 +10,8 @@ import { Currency } from "@gitpod/gitpod-protocol/lib/plans";
 const PaymentContext = createContext<{
     showPaymentUI?: boolean;
     setShowPaymentUI: React.Dispatch<boolean>;
+    showUsageBasedUI?: boolean;
+    setShowUsageBasedUI: React.Dispatch<boolean>;
     currency: Currency;
     setCurrency: React.Dispatch<Currency>;
     isStudent?: boolean;
@@ -18,6 +20,7 @@ const PaymentContext = createContext<{
     setIsChargebeeCustomer: React.Dispatch<boolean>;
 }>({
     setShowPaymentUI: () => null,
+    setShowUsageBasedUI: () => null,
     currency: "USD",
     setCurrency: () => null,
     setIsStudent: () => null,
@@ -26,6 +29,7 @@ const PaymentContext = createContext<{
 
 const PaymentContextProvider: React.FC = ({ children }) => {
     const [showPaymentUI, setShowPaymentUI] = useState<boolean>();
+    const [showUsageBasedUI, setShowUsageBasedUI] = useState<boolean>();
     const [currency, setCurrency] = useState<Currency>("USD");
     const [isStudent, setIsStudent] = useState<boolean>();
     const [isChargebeeCustomer, setIsChargebeeCustomer] = useState<boolean>();
@@ -35,6 +39,8 @@ const PaymentContextProvider: React.FC = ({ children }) => {
             value={{
                 showPaymentUI,
                 setShowPaymentUI,
+                showUsageBasedUI,
+                setShowUsageBasedUI,
                 currency,
                 setCurrency,
                 isStudent,

components/dashboard/src/settings/Account.tsx

@@ -16,7 +16,7 @@ import { PaymentContext } from "../payment-context";
 
 export default function Account() {
     const { user } = useContext(UserContext);
-    const { showPaymentUI } = useContext(PaymentContext);
+    const { showPaymentUI, showUsageBasedUI } = useContext(PaymentContext);
 
     const [modal, setModal] = useState(false);
     const [typedEmail, setTypedEmail] = useState("");
@@ -56,7 +56,7 @@ export default function Account() {
             </ConfirmationModal>
 
             <PageWithSubMenu
-                subMenu={getSettingsMenu({ showPaymentUI })}
+                subMenu={getSettingsMenu({ showPaymentUI, showUsageBasedUI })}
                 title="Account"
                 subtitle="Manage account and Git configuration."
             >

components/dashboard/src/settings/Billing.tsx

@@ -0,0 +1,9 @@
+/**
+ * Copyright (c) 2022 Gitpod GmbH. All rights reserved.
+ * Licensed under the GNU Affero General Public License (AGPL).
+ * See License-AGPL.txt in the project root for license information.
+ */
+
+export default function Billing() {
+    return <div></div>;
+}

components/dashboard/src/settings/EnvironmentVariables.tsx

@@ -145,7 +145,7 @@ function sortEnvVars(a: UserEnvVarValue, b: UserEnvVarValue) {
 }
 
 export default function EnvVars() {
-    const { showPaymentUI } = useContext(PaymentContext);
+    const { showPaymentUI, showUsageBasedUI } = useContext(PaymentContext);
     const [envVars, setEnvVars] = useState([] as UserEnvVarValue[]);
     const [currentEnvVar, setCurrentEnvVar] = useState({
         name: "",
@@ -207,7 +207,7 @@ export default function EnvVars() {
 
     return (
         <PageWithSubMenu
-            subMenu={getSettingsMenu({ showPaymentUI })}
+            subMenu={getSettingsMenu({ showPaymentUI, showUsageBasedUI })}
             title="Variables"
             subtitle="Configure environment variables for all workspaces."
         >

components/dashboard/src/settings/Integrations.tsx

@@ -26,12 +26,12 @@ import { SelectAccountModal } from "./SelectAccountModal";
 import getSettingsMenu from "./settings-menu";
 
 export default function Integrations() {
-    const { showPaymentUI } = useContext(PaymentContext);
+    const { showPaymentUI, showUsageBasedUI } = useContext(PaymentContext);
 
     return (
         <div>
             <PageWithSubMenu
-                subMenu={getSettingsMenu({ showPaymentUI })}
+                subMenu={getSettingsMenu({ showPaymentUI, showUsageBasedUI })}
                 title="Integrations"
                 subtitle="Manage permissions for Git providers and integrations."
             >

components/dashboard/src/settings/Notifications.tsx

@@ -15,7 +15,7 @@ import { PaymentContext } from "../payment-context";
 
 export default function Notifications() {
     const { user, setUser } = useContext(UserContext);
-    const { showPaymentUI } = useContext(PaymentContext);
+    const { showPaymentUI, showUsageBasedUI } = useContext(PaymentContext);
     const [isOnboardingMail, setOnboardingMail] = useState(
         !!user?.additionalData?.emailNotificationSettings?.allowsOnboardingMail,
     );
@@ -84,7 +84,7 @@ export default function Notifications() {
     return (
         <div>
             <PageWithSubMenu
-                subMenu={getSettingsMenu({ showPaymentUI })}
+                subMenu={getSettingsMenu({ showPaymentUI, showUsageBasedUI })}
                 title="Notifications"
                 subtitle="Choose when to be notified."
             >

components/dashboard/src/settings/Plans.tsx

@@ -45,7 +45,8 @@ type TeamClaimModal =
 
 export default function () {
     const { user } = useContext(UserContext);
-    const { showPaymentUI, currency, setCurrency, isStudent, isChargebeeCustomer } = useContext(PaymentContext);
+    const { showPaymentUI, showUsageBasedUI, currency, setCurrency, isStudent, isChargebeeCustomer } =
+        useContext(PaymentContext);
     const [accountStatement, setAccountStatement] = useState<AccountStatement>();
     const [availableCoupons, setAvailableCoupons] = useState<PlanCoupon[]>();
     const [appliedCoupons, setAppliedCoupons] = useState<PlanCoupon[]>();
@@ -636,7 +637,7 @@ export default function () {
     return (
         <div>
             <PageWithSubMenu
-                subMenu={getSettingsMenu({ showPaymentUI })}
+                subMenu={getSettingsMenu({ showPaymentUI, showUsageBasedUI })}
                 title="Plans"
                 subtitle="Manage account usage and billing."
             >

components/dashboard/src/settings/Preferences.tsx

@@ -20,7 +20,7 @@ type Theme = "light" | "dark" | "system";
 
 export default function Preferences() {
     const { user } = useContext(UserContext);
-    const { showPaymentUI } = useContext(PaymentContext);
+    const { showPaymentUI, showUsageBasedUI } = useContext(PaymentContext);
     const { setIsDark } = useContext(ThemeContext);
 
     const [theme, setTheme] = useState<Theme>(localStorage.theme || "system");
@@ -54,7 +54,7 @@ export default function Preferences() {
     return (
         <div>
             <PageWithSubMenu
-                subMenu={getSettingsMenu({ showPaymentUI })}
+                subMenu={getSettingsMenu({ showPaymentUI, showUsageBasedUI })}
                 title="Preferences"
                 subtitle="Configure user preferences."
             >

components/dashboard/src/settings/Teams.tsx

@@ -26,12 +26,12 @@ import { Disposable } from "@gitpod/gitpod-protocol";
 import { PaymentContext } from "../payment-context";
 
 export default function Teams() {
-    const { showPaymentUI } = useContext(PaymentContext);
+    const { showPaymentUI, showUsageBasedUI } = useContext(PaymentContext);
 
     return (
         <div>
             <PageWithSubMenu
-                subMenu={getSettingsMenu({ showPaymentUI })}
+                subMenu={getSettingsMenu({ showPaymentUI, showUsageBasedUI })}
                 title="Team Plans"
                 subtitle="View and manage subscriptions for your team with one centralized billing."
             >

components/dashboard/src/settings/settings-menu.ts

@@ -4,39 +4,59 @@
  * See License-AGPL.txt in the project root for license information.
  */
 
-export default function getSettingsMenu(params: { showPaymentUI?: boolean }) {
+import {
+    settingsPathAccount,
+    settingsPathBilling,
+    settingsPathIntegrations,
+    settingsPathMain,
+    settingsPathNotifications,
+    settingsPathPlans,
+    settingsPathPreferences,
+    settingsPathTeams,
+    settingsPathVariables,
+} from "./settings.routes";
+
+export default function getSettingsMenu(params: { showPaymentUI?: boolean; showUsageBasedUI?: boolean }) {
     return [
         {
             title: "Account",
-            link: ["/account", "/settings"],
+            link: [settingsPathAccount, settingsPathMain],
         },
         {
             title: "Notifications",
-            link: ["/notifications"],
+            link: [settingsPathNotifications],
         },
         ...(params.showPaymentUI
             ? [
+                  ...(params.showUsageBasedUI
+                      ? [
+                            {
+                                title: "Billing",
+                                link: [settingsPathBilling],
+                            },
+                        ]
+                      : []),
                   {
                       title: "Plans",
-                      link: ["/plans"],
+                      link: [settingsPathPlans],
                   },
                   {
                       title: "Team Plans",
-                      link: ["/teams"],
+                      link: [settingsPathTeams],
                   },
               ]
             : []),
         {
             title: "Variables",
-            link: ["/variables"],
+            link: [settingsPathVariables],
         },
         {
             title: "Integrations",
-            link: ["/integrations", "/access-control"],
+            link: [settingsPathIntegrations, "/access-control"],
         },
         {
             title: "Preferences",
-            link: ["/preferences"],
+            link: [settingsPathPreferences],
         },
     ];
 }

components/dashboard/src/settings/settings.routes.ts

@@ -9,6 +9,7 @@ export const settingsPathMain = "/settings";
 export const settingsPathAccount = "/account";
 export const settingsPathIntegrations = "/integrations";
 export const settingsPathNotifications = "/notifications";
+export const settingsPathBilling = "/billing";
 export const settingsPathPlans = "/plans";
 export const settingsPathPreferences = "/preferences";