[TOOL-4493] Dashboard: Add starter legacy discontinuation banner

Author: MananTank

apps/dashboard/src/app/(app)/team/[team_slug]/layout.tsx

@@ -1,5 +1,8 @@
 import { getTeamBySlug } from "@/api/team";
+import { Button } from "@/components/ui/button";
 import { PosthogIdentifierServer } from "components/wallets/PosthogIdentifierServer";
+import { ArrowRightIcon } from "lucide-react";
+import Link from "next/link";
 import { redirect } from "next/navigation";
 import { Suspense } from "react";
 import { EnsureValidConnectedWalletLoginServer } from "../../components/EnsureValidConnectedWalletLogin/EnsureValidConnectedWalletLoginServer";
@@ -28,6 +31,10 @@ export default async function RootTeamLayout(props: {
   return (
     <div className="flex min-h-dvh flex-col">
       <div className="flex grow flex-col">
+        {team.billingPlan === "starter_legacy" && (
+          <StarterLegacyDiscontinuedBanner teamSlug={team_slug} />
+        )}
+
         {team.billingStatus === "pastDue" && (
           <PastDueBanner teamSlug={team_slug} />
         )}
@@ -50,3 +57,31 @@ export default async function RootTeamLayout(props: {
     </div>
   );
 }
+
+function StarterLegacyDiscontinuedBanner(props: {
+  teamSlug: string;
+}) {
+  return (
+    <div className="border-red-600 border-b bg-red-50 px-4 py-6 text-red-800 dark:border-red-700 dark:bg-red-950 dark:text-red-100">
+      <div className="text-center">
+        <p>Starter legacy plans are being discontinued on May 31, 2025</p>
+        <p>
+          To prevent service interruptions and losing access to your current
+          features select a new plan
+        </p>
+        <Button
+          asChild
+          size="sm"
+          className="mt-3 gap-2 border border-red-600 bg-red-100 text-red-800 hover:bg-red-200 dark:border-red-700 dark:bg-red-900 dark:text-red-100 dark:hover:bg-red-800"
+        >
+          <Link
+            href={`/team/${props.teamSlug}/~/settings/billing?showPlans=true`}
+          >
+            Select a new plan
+            <ArrowRightIcon className="size-4" />
+          </Link>
+        </Button>
+      </div>
+    </div>
+  );
+}