[TOOL-3526] Dashboard: Add billing status alert banners

Author: MananTank

apps/dashboard/src/app/team/[team_slug]/(team)/_components/AlertBanners.tsx

@@ -0,0 +1,77 @@
+"use client";
+
+import { redirectToBillingPortal } from "@/actions/billing";
+import { BillingPortalButton } from "@/components/billing";
+import { Spinner } from "@chakra-ui/react";
+import { ArrowRightIcon } from "lucide-react";
+import { useState } from "react";
+
+function PaymentAlertBanner(props: {
+  title: string;
+  description: React.ReactNode;
+  teamSlug: string;
+}) {
+  const [isRouteLoading, setIsRouteLoading] = useState(false);
+
+  return (
+    <div className="flex flex-col border-b bg-card px-4 py-6 lg:items-center lg:text-center">
+      <h3 className="font-semibold text-red-500 text-xl tracking-tight">
+        {props.title}
+      </h3>
+      <p className="mt-1 mb-4 text-muted-foreground text-sm">
+        {props.description}
+      </p>
+      <BillingPortalButton
+        className="gap-2"
+        size="sm"
+        teamSlug={props.teamSlug}
+        redirectPath={`/team/${props.teamSlug}`}
+        redirectToBillingPortal={redirectToBillingPortal}
+        onClick={() => {
+          setIsRouteLoading(true);
+        }}
+      >
+        Pay Invoices
+        {isRouteLoading ? (
+          <Spinner className="size-4" />
+        ) : (
+          <ArrowRightIcon className="size-4" />
+        )}
+      </BillingPortalButton>
+    </div>
+  );
+}
+
+export function PastDueBanner(props: {
+  teamSlug: string;
+}) {
+  return (
+    <PaymentAlertBanner
+      title="You have unpaid invoices"
+      description={
+        <>
+          Your service will be cut off when you hit a max unpaid amount <br />{" "}
+          Pay your invoices to ensure continued access to thirdweb services
+        </>
+      }
+      teamSlug={props.teamSlug}
+    />
+  );
+}
+
+export function ServiceCutOffBanner(props: {
+  teamSlug: string;
+}) {
+  return (
+    <PaymentAlertBanner
+      title="Your service is cut off"
+      description={
+        <>
+          Your service is cut off due to unpaid invoices <br /> Please pay your
+          invoices to continue using thirdweb services
+        </>
+      }
+      teamSlug={props.teamSlug}
+    />
+  );
+}

apps/dashboard/src/app/team/[team_slug]/layout.tsx

@@ -3,6 +3,10 @@ import { AppFooter } from "@/components/blocks/app-footer";
 import { redirect } from "next/navigation";
 import { TWAutoConnect } from "../../components/autoconnect";
 import { SaveLastVisitedTeamPage } from "../components/last-visited-page/SaveLastVisitedPage";
+import {
+  PastDueBanner,
+  ServiceCutOffBanner,
+} from "./(team)/_components/AlertBanners";
 
 export default async function RootTeamLayout(props: {
   children: React.ReactNode;
@@ -17,8 +21,19 @@ export default async function RootTeamLayout(props: {
 
   return (
     <div className="flex min-h-dvh flex-col">
-      <div className="flex grow flex-col">{props.children}</div>
+      <div className="flex grow flex-col">
+        {team.billingStatus === "pastDue" && (
+          <PastDueBanner teamSlug={team_slug} />
+        )}
+
+        {team.billingStatus === "invalidPayment" && (
+          <ServiceCutOffBanner teamSlug={team_slug} />
+        )}
+
+        {props.children}
+      </div>
       <TWAutoConnect />
+
       <AppFooter />
       <SaveLastVisitedTeamPage />
     </div>