Dashboard: Show upsell card on support page for free plan (#7648)

<!--

## title your PR with this format: "[SDK/Dashboard/Portal] Feature/Fix: Concise title for the changes"

If you did not copy the branch name from Linear, paste the issue tag here (format is TEAM-0000):

## Notes for the reviewer

Anything important to call out? Be sure to also clarify these in your comments.

## How to test

Unit tests, playground, etc.

-->

<!-- start pr-codex -->

---

## PR-Codex overview
This PR enhances the support functionality within the dashboard, particularly for teams on a free billing plan. It adds checks for the billing plan, modifies the `SupportHeader`, and integrates upsell content to encourage users to upgrade their plans.

### Detailed summary
- `SupportHeader` now accepts `isFreePlan` prop to conditionally render buttons.
- Redirects free plan users from creating support cases.
- Displays upsell content for free plan users in the support page.
- Added functionality to show/hide support forms based on billing plan.
- Updated `CreateSupportCase` component to handle dialog state for support case creation.

> ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}`

<!-- end pr-codex -->

<!-- This is an auto-generated comment: release notes by coderabbit.ai -->
## Summary by CodeRabbit

* **New Features**
  * Free plan users now see an upsell prompt encouraging upgrade to access the Support Center, with a clear list of benefits.
  * The Support Center title has been updated for improved clarity.
  * Support case creation is disabled for free plan users, showing an informative message with a billing link instead.
  * Conditional support action buttons are shown only for paid plans, adapting to the user's context.

* **Improvements**
  * Enhanced visual styling and layout for benefit descriptions in upsell prompts.
  * Error messages in the Support Center now display detailed information for easier troubleshooting.
  * Dialogs for creating support cases now open and close with explicit user control for better interaction.
  * The chat button is hidden on the Support Center page to reduce UI clutter.

* **Bug Fixes**
  * Free plan users are prevented from accessing the support case creation page.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

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 text-center text-balance"
                   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/@/components/chat/CustomChatButton.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import { MessageCircleIcon, XIcon } from "lucide-react";
+import { useSelectedLayoutSegments } from "next/navigation";
 import { useCallback, useRef, useState } from "react";
 import { createThirdwebClient } from "thirdweb";
 import type { Team } from "@/api/team";
@@ -21,11 +22,16 @@ export function CustomChatButton(props: {
   team: Team;
   clientId: string | undefined;
 }) {
+  const layoutSegments = useSelectedLayoutSegments();
   const [isOpen, setIsOpen] = useState(false);
   const [hasBeenOpened, setHasBeenOpened] = useState(false);
   const closeModal = useCallback(() => setIsOpen(false), []);
   const ref = useRef<HTMLDivElement>(null);
 
+  if (layoutSegments[0] === "~" && layoutSegments[1] === "support") {
+    return null;
+  }
+
   return (
     <>
       {/* Inline Button (not floating) */}

apps/dashboard/src/@/components/chat/CustomChats.tsx

@@ -14,7 +14,6 @@ import {
   DialogContent,
   DialogHeader,
   DialogTitle,
-  DialogTrigger,
 } from "@/components/ui/dialog";
 import { ScrollShadow } from "@/components/ui/ScrollShadow/ScrollShadow";
 import { cn } from "@/lib/utils";
@@ -105,6 +104,8 @@ export function CustomChats(props: {
     chatScrollContainer.addEventListener("wheel", disableScroll);
   }, [setEnableAutoScroll, enableAutoScroll]);
 
+  const [showSupportFormDialog, setShowSupportFormDialog] = useState(false);
+
   return (
     <div
       className="relative flex max-h-full flex-1 flex-col overflow-hidden"
@@ -149,18 +150,19 @@ export function CustomChats(props: {
                         {/* Only show button/form if ticket not created */}
                         {!supportTicketCreated && (
                           <div className="mt-3 pl-12">
-                            <Dialog>
-                              <DialogTrigger asChild>
-                                <Button
-                                  onClick={() => props.setShowSupportForm(true)}
-                                  size="sm"
-                                  variant="outline"
-                                  className="rounded-full bg-card"
-                                >
-                                  Create Support Case
-                                  <ArrowRightIcon className="w-4 h-4 ml-2" />
-                                </Button>
-                              </DialogTrigger>
+                            <Dialog
+                              open={showSupportFormDialog}
+                              onOpenChange={setShowSupportFormDialog}
+                            >
+                              <Button
+                                onClick={() => setShowSupportFormDialog(true)}
+                                size="sm"
+                                variant="outline"
+                                className="rounded-full bg-card"
+                              >
+                                Create Support Case
+                                <ArrowRightIcon className="w-4 h-4 ml-2" />
+                              </Button>
 
                               <DialogContent className="p-0 bg-card">
                                 <DynamicHeight>
@@ -178,6 +180,9 @@ export function CustomChats(props: {
                                     productLabel={props.productLabel}
                                     setProductLabel={props.setProductLabel}
                                     conversationId={props.sessionId}
+                                    closeForm={() => {
+                                      setShowSupportFormDialog(false);
+                                    }}
                                     onSuccess={() => {
                                       props.setShowSupportForm(false);
                                       props.setProductLabel("");

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

@@ -12,7 +12,6 @@ import {
   DialogContent,
   DialogHeader,
   DialogTitle,
-  DialogTrigger,
 } from "@/components/ui/dialog";
 import { TextShimmer } from "@/components/ui/text-shimmer";
 import { AutoResizeTextarea } from "@/components/ui/textarea";
@@ -153,6 +152,8 @@ export function CreateSupportCase(props: { team: Team; authToken: string }) {
     </div>
   );
 
+  const [showCreateCaseDialog, setShowCreateCaseDialog] = useState(false);
+
   return (
     <div className="flex flex-col border bg-card rounded-xl mt-4">
       <div className="px-4 lg:px-12 py-4 lg:py-10 border-b border-dashed">
@@ -203,17 +204,19 @@ export function CreateSupportCase(props: { team: Team; authToken: string }) {
                       !message.isSuccessMessage &&
                       chatMessages.length > 2 && (
                         <div className="mt-5">
-                          <Dialog>
-                            <DialogTrigger asChild>
-                              <Button
-                                size="sm"
-                                variant="outline"
-                                className="gap-2 rounded-full bg-background"
-                              >
-                                Create Support Case
-                                <ArrowRightIcon className="w-4 h-4" />
-                              </Button>
-                            </DialogTrigger>
+                          <Dialog
+                            open={showCreateCaseDialog}
+                            onOpenChange={setShowCreateCaseDialog}
+                          >
+                            <Button
+                              size="sm"
+                              variant="outline"
+                              className="gap-2 rounded-full bg-background"
+                              onClick={() => setShowCreateCaseDialog(true)}
+                            >
+                              Create Support Case
+                              <ArrowRightIcon className="w-4 h-4" />
+                            </Button>
                             <DialogContent className="p-0 bg-card !gap-0">
                               <DynamicHeight>
                                 <DialogHeader className="p-4 lg:p-6 border-b border-dashed space-y-1">
@@ -227,6 +230,9 @@ export function CreateSupportCase(props: { team: Team; authToken: string }) {
                                 </DialogHeader>
 
                                 <SupportTicketForm
+                                  closeForm={() => {
+                                    setShowCreateCaseDialog(false);
+                                  }}
                                   team={team}
                                   productLabel={productLabel}
                                   setProductLabel={setProductLabel}

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/_components/SupportTicketForm.tsx

@@ -1,4 +1,6 @@
+import { LockIcon } from "lucide-react";
 import dynamic from "next/dynamic";
+import Link from "next/link";
 import { useRef, useState } from "react";
 import { toast } from "sonner";
 import { revalidatePathAction } from "@/actions/revalidate";
@@ -105,6 +107,7 @@ interface SupportTicketFormProps {
   setProductLabel: (val: string) => void;
   onSuccess?: () => void;
   conversationId?: string;
+  closeForm: () => void;
 }
 
 export function SupportTicketForm({
@@ -113,6 +116,7 @@ export function SupportTicketForm({
   setProductLabel,
   onSuccess,
   conversationId,
+  closeForm,
 }: SupportTicketFormProps) {
   const [isSubmittingForm, setIsSubmittingForm] = useState(false);
   const formRef = useRef<HTMLFormElement>(null);
@@ -190,6 +194,37 @@ export function SupportTicketForm({
     }
   };
 
+  if (team.billingPlan === "free") {
+    return (
+      <div className="relative">
+        <div className="px-4 lg:px-6 py-16 z-10 relative">
+          <div className="flex justify-center">
+            <div className="mb-4 border rounded-full p-3 bg-background">
+              <LockIcon className="size-5 text-foreground" />
+            </div>
+          </div>
+          <p className="text-sm text-foreground text-center mb-4">
+            You are currently on the free plan. <br /> Please upgrade to a paid
+            plan to create a support case.
+          </p>
+
+          <div className="flex justify-center">
+            <Button asChild size="sm">
+              <Link
+                href={`/team/${team.slug}/~/billing?showPlans=true`}
+                onClick={() => {
+                  closeForm();
+                }}
+              >
+                Upgrade Plan
+              </Link>
+            </Button>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
   return (
     <form onSubmit={handleFormSubmit} ref={formRef}>
       <div className="p-4 lg:p-6 max-h-[60vh] overflow-y-auto">

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>
     );