[dashboard] Add blue infobox to Plans and Teams page when usage-based…

… is enabled
gitpod-io · Dec 2, 2022 · a6793f7 · a6793f7
1 parent 602920e
commit a6793f7
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 0 deletions.
diff --git a/components/dashboard/src/settings/Plans.tsx b/components/dashboard/src/settings/Plans.tsx
@@ -634,6 +634,14 @@ export default function () {
     return (
         <div>
             <PageWithSettingsSubMenu title="Plans" subtitle="Manage account usage and billing.">
+                {isUsageBasedBillingEnabled && (
+                    <Alert type="message" className="mb-4">
+                        Your account has been enabled for usage-based billing.{" "}
+                        <a className="gp-link" href="https://www.gitpod.io/docs/configure/billing/usage-based-billing">
+                            Learn how to upgrade
+                        </a>
+                    </Alert>
+                )}
                 <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
@@ -454,6 +454,14 @@ function AllTeams() {
 
     return (
         <div>
+            {isUsageBasedBillingEnabled && (
+                <Alert type="message" className="mb-4">
+                    Your account has been enabled for usage-based billing.{" "}
+                    <a className="gp-link" href="https://www.gitpod.io/docs/configure/billing/usage-based-billing">
+                        Learn how to upgrade
+                    </a>
+                </Alert>
+            )}
             <div className="flex flex-row">
                 <div className="flex-grow ">
                     <h3 className="self-center">All Team Plans</h3>