From da507f140de5310759c6793570c80eebe0253d2d Mon Sep 17 00:00:00 2001
From: GiselleNessi <53020124+GiselleNessi@users.noreply.github.com>
Date: Mon, 20 Jan 2025 21:29:23 +0000
Subject: [PATCH] enhance manage billing visibility in dashboard (#5990)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
title: "[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 introduces a new `Manage Billing` button in the `account-button.client.tsx` file and enhances the `Billing` component with an informational `Alert` about managing plans. It also adds a description to guide users on billing management.

### Detailed summary
- Added a `Manage Billing` button in `account-button.client.tsx`.
- Introduced an `Alert` in `Billing` component with a title and description.
- Included a link in the `Alert` for managing billing.
- Added a paragraph to encourage users to upgrade or downgrade their plan.

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

<!-- end pr-codex -->
---
 .../SecondaryNav/account-button.client.tsx    |  8 +++++
 .../settings/Account/Billing/index.tsx        | 29 ++++++++++++++++++-
 2 files changed, 36 insertions(+), 1 deletion(-)

diff --git a/apps/dashboard/src/app/components/Header/SecondaryNav/account-button.client.tsx b/apps/dashboard/src/app/components/Header/SecondaryNav/account-button.client.tsx
index c3c266f6782..d3a327e1ca3 100644
--- a/apps/dashboard/src/app/components/Header/SecondaryNav/account-button.client.tsx
+++ b/apps/dashboard/src/app/components/Header/SecondaryNav/account-button.client.tsx
@@ -66,6 +66,14 @@ export function AccountButton(props: {
         </div>
 
         <div className="flex flex-col gap-1 p-2">
+          <Button
+            asChild
+            variant="ghost"
+            className="justify-start px-3 text-muted-foreground text-sm hover:text-foreground"
+          >
+            <Link href="/team/~/~/settings/billing">Manage Billing</Link>
+          </Button>
+
           <Button
             asChild
             variant="ghost"
diff --git a/apps/dashboard/src/components/settings/Account/Billing/index.tsx b/apps/dashboard/src/components/settings/Account/Billing/index.tsx
index 1d50eb86ba4..39992c3e89f 100644
--- a/apps/dashboard/src/components/settings/Account/Billing/index.tsx
+++ b/apps/dashboard/src/components/settings/Account/Billing/index.tsx
@@ -1,7 +1,12 @@
 import { redirectToBillingPortal, redirectToCheckout } from "@/actions/billing";
 import type { Team } from "@/api/team";
 import type { TeamSubscription } from "@/api/team-subscription";
+import {} from "@/components/ui/alert";
+import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
 import type { Account } from "@3rdweb-sdk/react/hooks/useApi";
+import {} from "@chakra-ui/react";
+import { AlertCircleIcon } from "lucide-react";
+import Link from "next/link";
 import { PlanInfoCard } from "../../../../app/team/[team_slug]/(team)/~/settings/billing/components/PlanInfoCard";
 import { getValidTeamPlan } from "../../../../app/team/components/TeamHeader/getValidTeamPlan";
 import { CouponSection } from "./CouponCard";
@@ -28,6 +33,25 @@ export const Billing: React.FC<BillingProps> = ({
 
   return (
     <div className="flex flex-col gap-12">
+      <Alert variant="info">
+        <AlertCircleIcon className="size-5" />
+        <AlertTitle>Manage your plan</AlertTitle>
+        <AlertDescription className="leading-relaxed">
+          <span>
+            Adjust your plan here to avoid unnecessary charges. For details, see{" "}
+          </span>
+          <span>
+            <Link
+              href="https://portal.thirdweb.com/account/billing/manage-billing"
+              target="_blank"
+              className="underline underline-offset-2 hover:text-foreground"
+            >
+              {" "}
+              how to manage billing
+            </Link>{" "}
+          </span>
+        </AlertDescription>
+      </Alert>
       <PlanInfoCard
         team={team}
         subscriptions={subscriptions}
@@ -35,9 +59,12 @@ export const Billing: React.FC<BillingProps> = ({
       />
 
       <div>
-        <h2 className="font-semibold text-2xl tracking-tight">
+        <h2 className="mb-2 font-semibold text-2xl tracking-tight">
           {validPlan === "free" ? "Select a Plan" : "Plans"}
         </h2>
+        <p className="text-muted-foreground">
+          Upgrade or downgrade your plan here to better fit your needs.
+        </p>
         <div className="h-3" />
         <BillingPricing
           team={team}