Add isLegacyPlan flag to Team type and UI components

Author: jnsdls

apps/dashboard/src/@/api/team/get-team.ts

@@ -8,7 +8,10 @@ import { NEXT_PUBLIC_THIRDWEB_API_HOST } from "@/constants/public-envs";
 import { API_SERVER_SECRET } from "@/constants/server-envs";
 import { getMemberByAccountId } from "./team-members";
 
-export type Team = TeamResponse & { stripeCustomerId: string | null };
+export type Team = TeamResponse & {
+  stripeCustomerId: string | null;
+  isLegacyPlan: boolean;
+};
 
 export async function getTeamBySlug(slug: string) {
   const token = await getAuthToken();

apps/dashboard/src/@/components/blocks/GatedSwitch.stories.tsx

@@ -70,6 +70,7 @@ function Variants() {
             key={currentPlan}
             requiredPlan={requiredPlan}
             teamSlug="foo"
+            isLegacyPlan={false}
           />
         </BadgeContainer>
       ))}

apps/dashboard/src/@/components/blocks/GatedSwitch.tsx

@@ -14,6 +14,7 @@ type GatedSwitchProps = {
   trackingLabel?: string;
   currentPlan: Team["billingPlan"];
   requiredPlan: Team["billingPlan"];
+  isLegacyPlan: boolean;
   teamSlug: string;
   switchProps?: SwitchProps;
 };
@@ -33,7 +34,7 @@ export const GatedSwitch: React.FC<GatedSwitchProps> = (
           <div className="w-full min-w-[280px]">
             <h3 className="font-medium text-base">
               <span className="capitalize">
-                {getTeamPlanBadgeLabel(props.requiredPlan)}+
+                {getTeamPlanBadgeLabel(props.requiredPlan, false)}+
               </span>{" "}
               plan required
             </h3>
@@ -48,7 +49,8 @@ export const GatedSwitch: React.FC<GatedSwitchProps> = (
                   rel="noopener noreferrer"
                   target="_blank"
                 >
-                  Upgrade to {getTeamPlanBadgeLabel(props.requiredPlan)} plan
+                  Upgrade to {getTeamPlanBadgeLabel(props.requiredPlan, false)}{" "}
+                  plan
                   <ExternalLinkIcon className="size-4" />
                 </Link>
               </Button>
@@ -61,6 +63,7 @@ export const GatedSwitch: React.FC<GatedSwitchProps> = (
         {isUpgradeRequired && (
           <TeamPlanBadge
             plan={props.requiredPlan}
+            isLegacyPlan={props.isLegacyPlan}
             postfix="+"
             teamSlug={props.teamSlug}
           />

apps/dashboard/src/@/components/blocks/TeamPlanBadge.tsx

@@ -23,28 +23,42 @@ const teamPlanToBadgeVariant: Record<
   starter: "warning",
 };
 
-export function getTeamPlanBadgeLabel(plan: Team["billingPlan"]) {
+export function getTeamPlanBadgeLabel(
+  plan: Team["billingPlan"],
+  isLegacyPlan: boolean,
+) {
   if (plan === "growth_legacy") {
     return "Growth - Legacy";
   }
 
+  if (isLegacyPlan) {
+    return `${plan} - Legacy`;
+  }
+
   return plan;
 }
 
 export function TeamPlanBadge(props: {
   teamSlug: string;
   plan: Team["billingPlan"];
+  isLegacyPlan: boolean;
   className?: string;
   postfix?: string;
 }) {
   const router = useDashboardRouter();
 
   function handleNavigateToBilling(e: React.MouseEvent | React.KeyboardEvent) {
+    e.stopPropagation();
+    e.preventDefault();
+
+    if (props.isLegacyPlan) {
+      router.push(`/team/${props.teamSlug}/~/billing`);
+      return;
+    }
+
     if (props.plan !== "free") {
       return;
     }
-    e.stopPropagation();
-    e.preventDefault();
     router.push(`/team/${props.teamSlug}/~/billing?showPlans=true`);
   }
 
@@ -57,11 +71,13 @@ export function TeamPlanBadge(props: {
           handleNavigateToBilling(e);
         }
       }}
-      role={props.plan === "free" ? "button" : undefined}
-      tabIndex={props.plan === "free" ? 0 : undefined}
-      variant={teamPlanToBadgeVariant[props.plan]}
+      role={props.plan === "free" || props.isLegacyPlan ? "button" : undefined}
+      tabIndex={props.plan === "free" || props.isLegacyPlan ? 0 : undefined}
+      variant={
+        props.isLegacyPlan ? "warning" : teamPlanToBadgeVariant[props.plan]
+      }
     >
-      {`${getTeamPlanBadgeLabel(props.plan)}${props.postfix || ""}`}
+      {`${getTeamPlanBadgeLabel(props.plan, props.isLegacyPlan)}${props.postfix || ""}`}
     </Badge>
   );
 }

apps/dashboard/src/@/components/blocks/upsell-wrapper.tsx

@@ -22,6 +22,7 @@ interface UpsellWrapperProps {
   isLocked?: boolean;
   requiredPlan: Team["billingPlan"];
   currentPlan?: Team["billingPlan"];
+  isLegacyPlan?: boolean;
   featureName: string;
   featureDescription: string;
   benefits?: {
@@ -41,6 +42,7 @@ export function UpsellWrapper({
   featureDescription,
   benefits = [],
   className,
+  isLegacyPlan = false,
 }: UpsellWrapperProps) {
   if (!isLocked) {
     return <>{children}</>;
@@ -66,6 +68,7 @@ export function UpsellWrapper({
           featureDescription={featureDescription}
           featureName={featureName}
           requiredPlan={requiredPlan}
+          isLegacyPlan={isLegacyPlan}
           teamSlug={teamSlug}
         />
       </div>
@@ -79,6 +82,7 @@ export function UpsellContent(props: {
   featureDescription: string;
   requiredPlan: Team["billingPlan"];
   currentPlan: Team["billingPlan"];
+  isLegacyPlan: boolean;
   benefits?: {
     description: string;
     status: "available" | "soon";
@@ -96,6 +100,7 @@ export function UpsellContent(props: {
             plan={props.requiredPlan}
             postfix=" Feature"
             teamSlug={props.teamSlug}
+            isLegacyPlan={props.isLegacyPlan}
           />
           <div className="space-y-1">
             <CardTitle className="font-bold text-2xl text-foreground md:text-3xl">

apps/dashboard/src/@/storybook/stubs.ts

@@ -30,6 +30,7 @@ export function teamStub(id: string, billingPlan: Team["billingPlan"]): Team {
     billingPlan: billingPlan,
     billingStatus: "validPayment",
     canCreatePublicChains: null,
+    isLegacyPlan: false,
     capabilities: {
       bundler: {
         enabled: true,

apps/dashboard/src/app/(app)/account/overview/AccountTeamsUI.tsx

@@ -18,7 +18,6 @@ import {
   DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
 import { useDashboardRouter } from "@/lib/DashboardRouter";
-import { getValidTeamPlan } from "@/utils/getValidTeamPlan";
 import { SearchInput } from "../components/SearchInput";
 
 export function AccountTeamsUI(props: {
@@ -117,8 +116,6 @@ function TeamRow(props: {
   role: TeamAccountRole;
   client: ThirdwebClient;
 }) {
-  const plan = getValidTeamPlan(props.team);
-
   return (
     <div className="flex items-center justify-between gap-2">
       {/* start */}
@@ -133,7 +130,11 @@ function TeamRow(props: {
         <div>
           <div className="flex items-center gap-3">
             <p className="font-semibold text-sm">{props.team.name}</p>
-            <TeamPlanBadge plan={plan} teamSlug={props.team.slug} />
+            <TeamPlanBadge
+              plan={props.team.billingPlan}
+              teamSlug={props.team.slug}
+              isLegacyPlan={props.team.isLegacyPlan}
+            />
           </div>
           <p className="text-muted-foreground text-sm capitalize">
             {props.role.toLowerCase()}

apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/billing/components/PlanInfoCard.tsx

@@ -73,21 +73,24 @@ export function PlanInfoCardUI(props: {
               <h3 className="font-semibold text-2xl capitalize tracking-tight">
                 {validPlan === "growth_legacy" ? "Growth" : validPlan} Plan
               </h3>
-              {validPlan.includes("legacy") && (
+              {props.team.isLegacyPlan && (
                 <Badge variant="warning">Legacy</Badge>
               )}
               {trialEndsInFuture && <Badge variant="default">Trial</Badge>}
             </div>
 
-            {validPlan.includes("legacy") && (
+            {props.team.isLegacyPlan && (
               <p className="text-sm text-yellow-600">
-                You are on the legacy plan. You may save by upgrading to new
-                plan.{" "}
+                Legacy plans will be upgraded to new plans automatically on
+                January 1st, 2026.
+                <br />
                 <UnderlineLink
                   className="decoration-yellow-600/50"
-                  href="/pricing"
+                  href="https://blog.thirdweb.com/retiring-legacy-pricing-plans-on-january-1st-2026"
+                  rel="noopener noreferrer"
+                  target="_blank"
                 >
-                  Learn More
+                  Learn more about changes to legacy plans
                 </UnderlineLink>
               </p>
             )}

apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/support/page.tsx

@@ -28,6 +28,7 @@ export default async function Page(props: {
       <div className="flex flex-col grow justify-center items-center">
         <UpsellContent
           currentPlan={team.billingPlan}
+          isLegacyPlan={team.isLegacyPlan}
           featureDescription="Create support cases for your projects"
           featureName="Support Center"
           requiredPlan="starter"

apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/usage/page.tsx

@@ -43,6 +43,7 @@ export default async function Page(props: {
       <div className="grow flex flex-col justify-center items-center">
         <UpsellContent
           currentPlan={team.billingPlan}
+          isLegacyPlan={team.isLegacyPlan}
           featureDescription="View RPC, Wallet, Storage, Gas Sponsorship, Engine Cloud, Webhooks usage and more"
           featureName="Usage"
           requiredPlan="starter"