From b5114dfe2233fd1148167c34226464a5ea41a590 Mon Sep 17 00:00:00 2001
From: MananTank <manantankm@gmail.com>
Date: Mon, 23 Jun 2025 23:02:36 +0000
Subject: [PATCH] [TOOL-4858] Update Team Usage Overview page UI for free plan
 (#7423)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

<!--

## 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 focuses on improving the handling of team usage and upsell features in the dashboard. It introduces new components and logic to display upsell content based on the team's billing plan.

### Detailed summary
- Updated import paths for `getTeamBySlug` and `UpsellWrapper`.
- Added `UpsellContent` component to display upsell information.
- Implemented logic to show upsell content if the team is on a "free" plan.
- Refactored the `UpsellWrapper` to include `UpsellContent`.
- Enhanced rendering of benefits in `UpsellContent`.

> ✨ 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

- **Refactor**
  - Improved code structure by extracting upsell card UI into a dedicated component, resulting in cleaner and more maintainable code.
  - Updated import paths for consistency and clarity.

- **Style**
  - Adjusted layout classes for better visual alignment of upsell content.

- **Bug Fixes**
  - Unified error handling for usage page, ensuring a consistent message for all error scenarios. Free plan users now see a clear upgrade prompt.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->
---
 .../@/components/blocks/upsell-wrapper.tsx    | 173 ++++++++++--------
 .../[team_slug]/(team)/~/audit-log/layout.tsx |   4 +-
 .../team/[team_slug]/(team)/~/usage/page.tsx  |  37 ++--
 3 files changed, 123 insertions(+), 91 deletions(-)

diff --git a/apps/dashboard/src/@/components/blocks/upsell-wrapper.tsx b/apps/dashboard/src/@/components/blocks/upsell-wrapper.tsx
index 943589c7596..31e71e3fb32 100644
--- a/apps/dashboard/src/@/components/blocks/upsell-wrapper.tsx
+++ b/apps/dashboard/src/@/components/blocks/upsell-wrapper.tsx
@@ -47,7 +47,7 @@ export function UpsellWrapper({
   }
 
   return (
-    <div className={cn("relative flex-1", className)}>
+    <div className={cn("relative flex-1 flex flex-col", className)}>
       {/* Background content - blurred and non-interactive */}
       <div className="absolute inset-0 overflow-hidden">
         <div className="pointer-events-none select-none opacity-60 blur-[1px]">
@@ -59,84 +59,109 @@ export function UpsellWrapper({
       <div className="absolute inset-0 bg-gradient-to-b from-muted/20 via-muted/30 to-background" />
 
       {/* Upsell content */}
-      <div className="relative z-10 flex items-center justify-center p-16">
-        <Card className="w-full max-w-2xl border-2 shadow-2xl">
-          <CardHeader className="space-y-4 text-center">
-            <div className="mx-auto flex h-16 w-16 items-center justify-center rounded-full border-2 bg-muted">
-              <LockIcon className="h-8 w-8 text-muted-foreground" />
-            </div>
+      <div className="relative z-10 flex items-center justify-center grow py-20 px-6">
+        <UpsellContent
+          benefits={benefits}
+          currentPlan={currentPlan}
+          featureDescription={featureDescription}
+          featureName={featureName}
+          requiredPlan={requiredPlan}
+          teamSlug={teamSlug}
+        />
+      </div>
+    </div>
+  );
+}
 
-            <div className="space-y-2">
-              <TeamPlanBadge
-                plan="scale"
-                postfix=" Feature"
-                teamSlug={teamSlug}
-              />
-              <CardTitle className="font-bold text-2xl text-foreground md:text-3xl">
-                Unlock {featureName}
-              </CardTitle>
-              <CardDescription className="mx-auto max-w-md text-base text-muted-foreground">
-                {featureDescription}
-              </CardDescription>
-            </div>
-          </CardHeader>
+export function UpsellContent(props: {
+  teamSlug: string;
+  featureName: string;
+  featureDescription: string;
+  requiredPlan: Team["billingPlan"];
+  currentPlan: Team["billingPlan"];
+  benefits?: {
+    description: string;
+    status: "available" | "soon";
+  }[];
+}) {
+  return (
+    <Card className="w-full max-w-xl border shadow-2xl">
+      <CardHeader className="space-y-4 text-center">
+        <div className="mx-auto flex p-4 items-center justify-center rounded-full border bg-card">
+          <LockIcon className="size-8 text-muted-foreground" />
+        </div>
 
-          <CardContent className="space-y-6">
-            {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>
-                <div className="grid gap-2">
-                  {benefits.map((benefit) => (
-                    <div
-                      className="flex items-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">
-                          Coming Soon
-                        </Badge>
-                      )}
-                    </div>
-                  ))}
-                </div>
-              </div>
-            )}
+        <div className="space-y-4">
+          <TeamPlanBadge
+            plan={props.requiredPlan}
+            postfix=" Feature"
+            teamSlug={props.teamSlug}
+          />
+          <div className="space-y-1">
+            <CardTitle className="font-bold text-2xl text-foreground md:text-3xl">
+              Unlock {props.featureName}
+            </CardTitle>
+            <CardDescription className="mx-auto max-w-md text-base text-muted-foreground">
+              {props.featureDescription}
+            </CardDescription>
+          </div>
+        </div>
+      </CardHeader>
 
-            <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/${teamSlug}/~/settings/billing?showPlans=true&highlight=${requiredPlan}`}
-                >
-                  <CrownIcon className="mr-2 h-4 w-4" />
-                  Upgrade to{" "}
-                  <span className="ml-1 capitalize">{requiredPlan}</span>
-                </Link>
-              </Button>
-              <Button asChild className="md:flex-1" size="lg" variant="outline">
-                <Link
-                  href={`/team/${teamSlug}/~/settings/billing?showPlans=true`}
+      <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>
+            <div className="grid gap-2">
+              {props.benefits.map((benefit) => (
+                <div
+                  className="flex items-center gap-3"
+                  key={benefit.description}
                 >
-                  View All Plans
-                </Link>
-              </Button>
+                  <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">
+                      Coming Soon
+                    </Badge>
+                  )}
+                </div>
+              ))}
             </div>
+          </div>
+        )}
 
-            <div className="pt-2 text-center">
-              <p className="text-muted-foreground text-xs">
-                You are currently on the{" "}
-                <span className="font-medium capitalize">{currentPlan}</span>{" "}
-                plan.
-              </p>
-            </div>
-          </CardContent>
-        </Card>
-      </div>
-    </div>
+        <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}/~/settings/billing?showPlans=true&highlight=${props.requiredPlan}`}
+            >
+              <CrownIcon className="mr-2 h-4 w-4" />
+              Upgrade to{" "}
+              <span className="ml-1 capitalize">{props.requiredPlan}</span>
+            </Link>
+          </Button>
+          <Button asChild className="md:flex-1" size="lg" variant="outline">
+            <Link
+              href={`/team/${props.teamSlug}/~/settings/billing?showPlans=true`}
+            >
+              View All Plans
+            </Link>
+          </Button>
+        </div>
+
+        <div className="pt-2 text-center">
+          <p className="text-muted-foreground text-xs">
+            You are currently on the{" "}
+            <span className="font-medium capitalize">{props.currentPlan}</span>{" "}
+            plan.
+          </p>
+        </div>
+      </CardContent>
+    </Card>
   );
 }
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/audit-log/layout.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/audit-log/layout.tsx
index b3295bf6114..16f58d38a37 100644
--- a/apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/audit-log/layout.tsx
+++ b/apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/audit-log/layout.tsx
@@ -1,6 +1,6 @@
 import { redirect } from "next/navigation";
-import { getTeamBySlug } from "../../../../../../../@/api/team";
-import { UpsellWrapper } from "../../../../../../../@/components/blocks/upsell-wrapper";
+import { getTeamBySlug } from "@/api/team";
+import { UpsellWrapper } from "@/components/blocks/upsell-wrapper";
 
 export default async function Layout(props: {
   children: React.ReactNode;
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/usage/page.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/usage/page.tsx
index 99bcdb3d59a..262d5449e70 100644
--- a/apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/usage/page.tsx
+++ b/apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/usage/page.tsx
@@ -3,6 +3,7 @@ import { InfoIcon } from "lucide-react";
 import { redirect } from "next/navigation";
 import { getTeamBySlug } from "@/api/team";
 import { getBilledUsage } from "@/api/usage/billing-preview";
+import { UpsellContent } from "@/components/blocks/upsell-wrapper";
 import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
 import {
   Card,
@@ -12,6 +13,7 @@ import {
   CardHeader,
   CardTitle,
 } from "@/components/ui/card";
+import { getValidTeamPlan } from "@/utils/getValidTeamPlan";
 import { getValidAccount } from "../../../../../account/settings/getAccount";
 import {
   formatPrice,
@@ -34,23 +36,28 @@ export default async function Page(props: {
   }
 
   const usagePreview = await getBilledUsage(team.slug);
+  const validPlan = getValidTeamPlan(team);
+
+  if (validPlan === "free") {
+    return (
+      <div className="grow flex flex-col justify-center items-center">
+        <UpsellContent
+          currentPlan={team.billingPlan}
+          featureDescription="View RPC, Wallet, Storage, Account Abstraction, Engine Cloud, Webhooks usage and more"
+          featureName="Usage"
+          requiredPlan="starter"
+          teamSlug={params.team_slug}
+        />
+      </div>
+    );
+  }
 
   if (usagePreview.status === "error") {
-    switch (usagePreview.reason) {
-      case "free_plan":
-        return (
-          <div className="flex min-h-[350px] items-center justify-center rounded-lg border p-4 text-destructive-text">
-            You are on a free plan. Please upgrade to a paid plan to view your
-            usage.
-          </div>
-        );
-      default:
-        return (
-          <div className="flex min-h-[350px] items-center justify-center rounded-lg border p-4 text-destructive-text">
-            Something went wrong. Please try again later.
-          </div>
-        );
-    }
+    return (
+      <div className="flex min-h-[350px] items-center justify-center rounded-lg border p-4 text-destructive-text">
+        Something went wrong. Please try again later.
+      </div>
+    );
   }
 
   const grandTotalCents = usagePreview.data.result.reduce((total, category) => {