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

Author: jankeromnes

components/dashboard/src/settings/Plans.tsx

@@ -634,6 +634,18 @@ 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. Discover faster workspace classes and
+                        only pay for what you actually use.{" "}
+                        <a className="gp-link" href="https://www.gitpod.io/docs/configure/billing/usage-based-billing">
+                            Learn more
+                        </a>
+                        <br />
+                        <br />
+                        The old monthly plans are deprecated and will be cancelled by End of March 2023.
+                    </Alert>
+                )}
                 <div className="w-full text-center">
                     <p className="text-xl text-gray-500">
                         You are currently using the{" "}

components/dashboard/src/settings/Teams.tsx

@@ -454,6 +454,18 @@ function AllTeams() {
 
     return (
         <div>
+            {isUsageBasedBillingEnabled && (
+                <Alert type="message" className="mb-4">
+                    Your account has been enabled for usage-based billing. Discover faster workspace classes and only
+                    pay for what you actually use.{" "}
+                    <a className="gp-link" href="https://www.gitpod.io/docs/configure/billing/usage-based-billing">
+                        Learn more
+                    </a>
+                    <br />
+                    <br />
+                    The old monthly plans are deprecated and will be cancelled by End of March 2023.
+                </Alert>
+            )}
             <div className="flex flex-row">
                 <div className="flex-grow ">
                     <h3 className="self-center">All Team Plans</h3>