Dashboard: Show upsell card on support page for free plan

Author: MananTank

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

@@ -1,6 +1,6 @@
 "use client";
 
-import { CrownIcon, LockIcon, SparklesIcon } from "lucide-react";
+import { CrownIcon, LockIcon } from "lucide-react";
 import Link from "next/link";
 import type React from "react";
 import type { Team } from "@/api/team";
@@ -111,18 +111,15 @@ export function UpsellContent(props: {
       <CardContent className="space-y-6">
         {props.benefits && props.benefits.length > 0 && (
           <div className="space-y-3">
-            <h4 className="font-semibold text-muted-foreground text-sm uppercase tracking-wide">
-              What you'll get:
+            <h4 className="font-semibold text-foreground text-sm capitalize text-center">
+              What you'll get
             </h4>
-            <div className="grid gap-2">
+            <div className="grid gap-1.5">
               {props.benefits.map((benefit) => (
                 <div
-                  className="flex items-center gap-3"
+                  className="flex items-center justify-center gap-3"
                   key={benefit.description}
                 >
-                  <div className="flex h-5 w-5 flex-shrink-0 items-center justify-center rounded-full bg-accent">
-                    <SparklesIcon className="h-3 w-3 text-success-text" />
-                  </div>
                   <span className="text-sm">{benefit.description}</span>
                   {benefit.status === "soon" && (
                     <Badge className="text-xs" variant="secondary">

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

@@ -3,37 +3,41 @@ import Link from "next/link";
 import { useSelectedLayoutSegment } from "next/navigation";
 import { Button } from "@/components/ui/button";
 
-export function SupportHeader(props: { teamSlug: string }) {
+export function SupportHeader(props: {
+  teamSlug: string;
+  isFreePlan: boolean;
+}) {
   const layoutSegment = useSelectedLayoutSegment();
 
   return (
     <div className="border-border border-b">
       <div className="container flex max-w-5xl flex-col items-start gap-3 py-9 md:flex-row md:items-center">
         <div className="flex-1">
           <h1 className="font-semibold text-3xl tracking-tight mb-1">
-            Support
+            Support Center
           </h1>
           <p className="text-sm text-muted-foreground">
             Create and view support cases for your projects
           </p>
         </div>
-        {layoutSegment === null ? (
-          <Button asChild className="rounded-full gap-2">
-            <Link href={`/team/${props.teamSlug}/~/support/create`}>
-              Create Case
-            </Link>
-          </Button>
-        ) : (
-          <Button
-            asChild
-            className="rounded-full gap-2 bg-card"
-            variant="outline"
-          >
-            <Link href={`/team/${props.teamSlug}/~/support`}>
-              View All Cases
-            </Link>
-          </Button>
-        )}
+        {!props.isFreePlan &&
+          (layoutSegment === null ? (
+            <Button asChild className="rounded-full gap-2">
+              <Link href={`/team/${props.teamSlug}/~/support/create`}>
+                Create Case
+              </Link>
+            </Button>
+          ) : (
+            <Button
+              asChild
+              className="rounded-full gap-2 bg-card"
+              variant="outline"
+            >
+              <Link href={`/team/${props.teamSlug}/~/support`}>
+                View All Cases
+              </Link>
+            </Button>
+          ))}
       </div>
     </div>
   );

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

@@ -1,4 +1,4 @@
-import { notFound } from "next/navigation";
+import { notFound, redirect } from "next/navigation";
 import { getAuthToken } from "@/api/auth-token";
 import { getTeamBySlug } from "@/api/team";
 import { CreateSupportCase } from "../_components/CreateSupportCase";
@@ -19,5 +19,9 @@ export default async function CreatePage(props: {
     notFound();
   }
 
+  if (team.billingPlan === "free") {
+    redirect(`/team/${params.team_slug}/~/support`);
+  }
+
   return <CreateSupportCase authToken={token} team={team} />;
 }

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

@@ -15,7 +15,10 @@ export default async function Layout(props: {
 
   return (
     <div className="flex grow flex-col">
-      <SupportHeader teamSlug={team.slug} />
+      <SupportHeader
+        teamSlug={team.slug}
+        isFreePlan={team.billingPlan === "free"}
+      />
       <div className="container max-w-5xl pt-6 pb-10 flex flex-col grow">
         {props.children}
       </div>

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

@@ -2,6 +2,7 @@ import { XIcon } from "lucide-react";
 import { notFound } from "next/navigation";
 import { getAuthToken } from "@/api/auth-token";
 import { getTeamBySlug } from "@/api/team";
+import { UpsellContent } from "@/components/blocks/upsell-wrapper";
 import { tryCatch } from "@/utils/try-catch";
 import { SupportsCaseList } from "./_components/case-list";
 import { getSupportTicketsByTeam } from "./apis/tickets";
@@ -22,6 +23,31 @@ export default async function Page(props: {
     notFound();
   }
 
+  if (team.billingPlan === "free") {
+    return (
+      <div className="flex flex-col grow justify-center items-center">
+        <UpsellContent
+          currentPlan={team.billingPlan}
+          featureDescription="Create support cases for your projects"
+          featureName="Support Center"
+          requiredPlan="starter"
+          teamSlug={params.team_slug}
+          benefits={[
+            {
+              description:
+                "Create & Manage all your support requests in one place",
+              status: "available",
+            },
+            {
+              description: "Personalized Assistance tailored to your use case",
+              status: "available",
+            },
+          ]}
+        />
+      </div>
+    );
+  }
+
   const supportedTicketsResult = await tryCatch(
     getSupportTicketsByTeam({
       authToken: token,
@@ -37,6 +63,7 @@ export default async function Page(props: {
             <XIcon className="size-5 text-muted-foreground" />
           </div>
           <p className="text-sm">Failed to load support tickets</p>
+          <p>{supportedTicketsResult.error.message}</p>
         </div>
       </div>
     );