From f8c3d9e5e7fdaaeb8d1761b14683269ee304ba5a Mon Sep 17 00:00:00 2001
From: 0xFirekeeper <0xFirekeeper@gmail.com>
Date: Thu, 1 Oct 2026 13:53:08 +0700
Subject: [PATCH] [Dashboard] Point Starter upsells to Growth

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 .../src/@/components/blocks/GatedSwitch.tsx       | 15 +++++++++------
 .../src/@/components/blocks/upsell-wrapper.tsx    |  9 +++++----
 .../dashboard/src/@/constants/planToTierRecord.ts |  4 ++++
 .../create/_common/storage-error-upsell.tsx       |  6 +++---
 4 files changed, 21 insertions(+), 13 deletions(-)

diff --git a/apps/dashboard/src/@/components/blocks/GatedSwitch.tsx b/apps/dashboard/src/@/components/blocks/GatedSwitch.tsx
index 8ef75d27092..9f12b1e73ef 100644
--- a/apps/dashboard/src/@/components/blocks/GatedSwitch.tsx
+++ b/apps/dashboard/src/@/components/blocks/GatedSwitch.tsx
@@ -4,7 +4,10 @@ import type { Team } from "@/api/team/get-team";
 import { Button } from "@/components/ui/button";
 import { Switch } from "@/components/ui/switch";
 import { ToolTipLabel } from "@/components/ui/tooltip";
-import { planToTierRecordForGating } from "@/constants/planToTierRecord";
+import {
+  getUpgradePlan,
+  planToTierRecordForGating,
+} from "@/constants/planToTierRecord";
 import { cn } from "@/lib/utils";
 import { getTeamPlanBadgeLabel, TeamPlanBadge } from "./TeamPlanBadge";
 
@@ -25,6 +28,7 @@ export const GatedSwitch: React.FC<GatedSwitchProps> = (
   const isUpgradeRequired =
     planToTierRecordForGating[props.currentPlan] <
     planToTierRecordForGating[props.requiredPlan];
+  const upgradePlan = getUpgradePlan(props.requiredPlan);
 
   return (
     <ToolTipLabel
@@ -34,7 +38,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, false)}+
+                {getTeamPlanBadgeLabel(upgradePlan, false)}+
               </span>{" "}
               plan required
             </h3>
@@ -45,12 +49,11 @@ export const GatedSwitch: React.FC<GatedSwitchProps> = (
             <div className="flex w-full flex-col gap-2">
               <Button asChild className="justify-start gap-2" size="sm">
                 <Link
-                  href={`/team/${props.teamSlug}/~/billing?showPlans=true&highlight=${props.requiredPlan}`}
+                  href={`/team/${props.teamSlug}/~/billing?showPlans=true&highlight=${upgradePlan}`}
                   rel="noopener noreferrer"
                   target="_blank"
                 >
-                  Upgrade to {getTeamPlanBadgeLabel(props.requiredPlan, false)}{" "}
-                  plan
+                  Upgrade to {getTeamPlanBadgeLabel(upgradePlan, false)} plan
                   <ExternalLinkIcon className="size-4" />
                 </Link>
               </Button>
@@ -62,7 +65,7 @@ export const GatedSwitch: React.FC<GatedSwitchProps> = (
       <div className="inline-flex items-center gap-2">
         {isUpgradeRequired && (
           <TeamPlanBadge
-            plan={props.requiredPlan}
+            plan={upgradePlan}
             isLegacyPlan={props.isLegacyPlan}
             postfix="+"
             teamSlug={props.teamSlug}
diff --git a/apps/dashboard/src/@/components/blocks/upsell-wrapper.tsx b/apps/dashboard/src/@/components/blocks/upsell-wrapper.tsx
index 77174ce4b6a..614070dc4c9 100644
--- a/apps/dashboard/src/@/components/blocks/upsell-wrapper.tsx
+++ b/apps/dashboard/src/@/components/blocks/upsell-wrapper.tsx
@@ -14,6 +14,7 @@ import {
   CardHeader,
   CardTitle,
 } from "@/components/ui/card";
+import { getUpgradePlan } from "@/constants/planToTierRecord";
 import { cn } from "@/lib/utils";
 
 interface UpsellWrapperProps {
@@ -88,6 +89,7 @@ export function UpsellContent(props: {
     status: "available" | "soon";
   }[];
 }) {
+  const upgradePlan = getUpgradePlan(props.requiredPlan);
   return (
     <Card className="w-full max-w-xl border shadow-2xl">
       <CardHeader className="space-y-4 text-center">
@@ -97,7 +99,7 @@ export function UpsellContent(props: {
 
         <div className="space-y-4">
           <TeamPlanBadge
-            plan={props.requiredPlan}
+            plan={upgradePlan}
             postfix=" Feature"
             teamSlug={props.teamSlug}
             isLegacyPlan={props.isLegacyPlan}
@@ -140,11 +142,10 @@ export function UpsellContent(props: {
         <div className="flex flex-col gap-3 pt-4 sm:flex-row">
           <Button asChild className="flex-1 py-3 font-semibold" size="lg">
             <Link
-              href={`/team/${props.teamSlug}/~/billing?showPlans=true&highlight=${props.requiredPlan}`}
+              href={`/team/${props.teamSlug}/~/billing?showPlans=true&highlight=${upgradePlan}`}
             >
               <CrownIcon className="mr-2 h-4 w-4" />
-              Upgrade to{" "}
-              <span className="ml-1 capitalize">{props.requiredPlan}</span>
+              Upgrade to <span className="ml-1 capitalize">{upgradePlan}</span>
             </Link>
           </Button>
           <Button asChild className="md:flex-1" size="lg" variant="outline">
diff --git a/apps/dashboard/src/@/constants/planToTierRecord.ts b/apps/dashboard/src/@/constants/planToTierRecord.ts
index 37f1d2e95f1..bacb7dc3bd9 100644
--- a/apps/dashboard/src/@/constants/planToTierRecord.ts
+++ b/apps/dashboard/src/@/constants/planToTierRecord.ts
@@ -10,3 +10,7 @@ export const planToTierRecordForGating: Record<Team["billingPlan"], number> = {
   scale: 6,
   starter: 1,
 };
+
+export function getUpgradePlan(plan: Team["billingPlan"]): Team["billingPlan"] {
+  return plan === "starter" ? "growth" : plan;
+}
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/tokens/create/_common/storage-error-upsell.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/tokens/create/_common/storage-error-upsell.tsx
index 53f69feee05..6d85e39632e 100644
--- a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/tokens/create/_common/storage-error-upsell.tsx
+++ b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/tokens/create/_common/storage-error-upsell.tsx
@@ -52,7 +52,7 @@ export function StorageErrorPlanUpsell(props: {
     reportUpsellShown({
       campaign: props.trackingCampaign,
       content: "storage-limit",
-      sku: "plan:starter",
+      sku: "plan:growth",
     });
   }, [props.trackingCampaign]);
 
@@ -80,12 +80,12 @@ export function StorageErrorPlanUpsell(props: {
           <div className="flex gap-2 mt-2.5">
             <Button asChild className="gap-2" size="sm">
               <Link
-                href={`/team/${props.teamSlug}/~/billing?showPlans=true&highlight=starter`}
+                href={`/team/${props.teamSlug}/~/billing?showPlans=true&highlight=growth`}
                 onClick={() => {
                   reportUpsellClicked({
                     campaign: props.trackingCampaign,
                     content: "storage-limit",
-                    sku: "plan:starter",
+                    sku: "plan:growth",
                   });
                 }}
                 target="_blank"