enhance manage billing visibility in dashboard (#5990)

Author: GiselleNessi

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"

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,16 +33,38 @@ 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}
         redirectToBillingPortal={redirectToBillingPortal}
       />
 
       <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}