[dashboard] In Team Billing, if UBP flag is on but you still have an active Chargebee team plan, also nudge towards cancelling

Author: jankeromnes

components/dashboard/src/teams/TeamBilling.tsx

@@ -26,6 +26,8 @@ import TeamUsageBasedBilling from "./TeamUsageBasedBilling";
 import { UserContext } from "../user-context";
 import { FeatureFlagContext } from "../contexts/FeatureFlagContext";
 import { publicApiTeamMembersToProtocol, teamsService } from "../service/public-api";
+import Alert from "../components/Alert";
+import { getExperimentsClient } from "../experiments/client";
 
 type PendingPlan = Plan & { pendingSince: number };
 
@@ -38,6 +40,7 @@ export default function TeamBilling() {
     const [isUserOwner, setIsUserOwner] = useState(true);
     const [teamSubscription, setTeamSubscription] = useState<TeamSubscription2 | undefined>();
     const { currency, setCurrency } = useContext(PaymentContext);
+    const [isUsageBasedBillingEnabled, setIsUsageBasedBillingEnabled] = useState<boolean>(false);
     const [teamBillingMode, setTeamBillingMode] = useState<BillingMode | undefined>(undefined);
     const [pendingTeamPlan, setPendingTeamPlan] = useState<PendingPlan | undefined>();
     const [pollTeamSubscriptionTimeout, setPollTeamSubscriptionTimeout] = useState<NodeJS.Timeout | undefined>();
@@ -114,6 +117,20 @@ export default function TeamBilling() {
         };
     }, [pendingTeamPlan, pollTeamSubscriptionTimeout, team, teamSubscription]);
 
+    useEffect(() => {
+        if (!team || !user) {
+            return;
+        }
+        (async () => {
+            const isEnabled = await getExperimentsClient().getValueAsync("isUsageBasedBillingEnabled", false, {
+                user,
+                teamId: team.id,
+                teamName: team.name,
+            });
+            setIsUsageBasedBillingEnabled(isEnabled);
+        })();
+    }, [team, user]);
+
     const availableTeamPlans = Plans.getAvailableTeamPlans(currency || "USD").filter((p) => p.type !== "student");
 
     const checkout = async (plan: Plan) => {
@@ -161,6 +178,20 @@ export default function TeamBilling() {
     function renderTeamBilling(): JSX.Element {
         return (
             <>
+                {isUsageBasedBillingEnabled && (
+                    <Alert type="message" className="mb-4">
+                        To access{" "}
+                        <a className="gp-link" href="https://www.gitpod.io/docs/configure/workspaces/workspace-classes">
+                            large workspaces
+                        </a>{" "}
+                        and{" "}
+                        <a className="gp-link" href="https://www.gitpod.io/docs/configure/billing/pay-as-you-go">
+                            pay-as-you-go
+                        </a>
+                        , first cancel your existing plan. Existing plans will keep working until the end of March,
+                        2023.
+                    </Alert>
+                )}
                 <h3>{!teamPlan ? "Select Team Plan" : "Team Plan"}</h3>
                 <h2 className="text-gray-500">
                     {!teamPlan ? (