[Dashboard] Restrict billing actions to team owners only

Author: jnsdls

apps/dashboard/src/@/components/ui/button.tsx

@@ -45,19 +45,27 @@ export interface ButtonProps
 }
 
 const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
-  ({ className, variant, size, asChild = false, ...props }, ref) => {
+  ({ className, variant, size, asChild = false, disabled, ...props }, ref) => {
     const Comp = asChild ? Slot : "button";
-    const btnOnlyProps =
-      Comp === "button"
-        ? { type: props.type || ("button" as const) }
-        : undefined;
+
+    // "button" elements automatically handle the `disabled` attribute.
+    // For non-button elements rendered via `asChild` (e.g. <a>), we still want
+    // to visually convey the disabled state and prevent user interaction.
+    // We do that by conditionally adding the same utility classes that the
+    // `disabled:` pseudo-variant would normally apply and by setting
+    // `aria-disabled` for accessibility.
+    const disabledClass = disabled ? "pointer-events-none opacity-50" : "";
 
     return (
       <Comp
-        className={cn(buttonVariants({ variant, size, className }))}
+        className={cn(
+          buttonVariants({ variant, size, className }),
+          disabledClass,
+        )}
         ref={ref}
+        aria-disabled={disabled ? true : undefined}
+        disabled={disabled}
         {...props}
-        {...btnOnlyProps}
       />
     );
   },

apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/settings/billing/components/PlanInfoCard.client.tsx

@@ -9,12 +9,14 @@ export function PlanInfoCardClient(props: {
   team: Team;
   openPlanSheetButtonByDefault: boolean;
   highlightPlan: Team["billingPlan"] | undefined;
+  isOwnerAccount: boolean;
 }) {
   return (
     <PlanInfoCardUI
       openPlanSheetButtonByDefault={props.openPlanSheetButtonByDefault}
       team={props.team}
       subscriptions={props.subscriptions}
+      isOwnerAccount={props.isOwnerAccount}
       getTeam={async () => {
         const res = await apiServerProxy<{
           result: Team;

apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/settings/billing/components/PlanInfoCard.stories.tsx

@@ -120,6 +120,7 @@ function Story(props: {
           getTeam={teamTeamStub}
           highlightPlan={undefined}
           openPlanSheetButtonByDefault={false}
+          isOwnerAccount={true}
         />
       </BadgeContainer>
 
@@ -133,6 +134,7 @@ function Story(props: {
           getTeam={teamTeamStub}
           highlightPlan={undefined}
           openPlanSheetButtonByDefault={false}
+          isOwnerAccount={true}
         />
       </BadgeContainer>
 
@@ -143,6 +145,7 @@ function Story(props: {
           getTeam={teamTeamStub}
           highlightPlan={undefined}
           openPlanSheetButtonByDefault={false}
+          isOwnerAccount={true}
         />
       </BadgeContainer>
 
@@ -153,6 +156,7 @@ function Story(props: {
           getTeam={teamTeamStub}
           highlightPlan={undefined}
           openPlanSheetButtonByDefault={false}
+          isOwnerAccount={true}
         />
       </BadgeContainer>
 
@@ -163,6 +167,7 @@ function Story(props: {
           getTeam={teamTeamStub}
           highlightPlan={undefined}
           openPlanSheetButtonByDefault={false}
+          isOwnerAccount={true}
         />
       </BadgeContainer>
     </div>

apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/settings/billing/components/PlanInfoCard.tsx

@@ -30,6 +30,7 @@ export function PlanInfoCardUI(props: {
   getTeam: () => Promise<Team>;
   openPlanSheetButtonByDefault: boolean;
   highlightPlan: Team["billingPlan"] | undefined;
+  isOwnerAccount: boolean;
 }) {
   const { subscriptions, team, openPlanSheetButtonByDefault } = props;
   const validPlan = getValidTeamPlan(team);
@@ -110,7 +111,7 @@ export function PlanInfoCardUI(props: {
           )}
         </div>
 
-        {props.team.billingPlan !== "free" && (
+        {props.team.billingPlan !== "free" && props.isOwnerAccount && (
           <div className="flex items-center gap-3">
             <Button
               variant="outline"
@@ -153,17 +154,19 @@ export function PlanInfoCardUI(props: {
               To unlock additional usage, upgrade your plan to Starter or
               Growth.
             </p>
-            <div className="mt-4">
-              <Button
-                variant="default"
-                size="sm"
-                onClick={() => {
-                  setIsPlanSheetOpen(true);
-                }}
-              >
-                Select a plan
-              </Button>
-            </div>
+            {props.isOwnerAccount && (
+              <div className="mt-4">
+                <Button
+                  variant="default"
+                  size="sm"
+                  onClick={() => {
+                    setIsPlanSheetOpen(true);
+                  }}
+                >
+                  Select a plan
+                </Button>
+              </div>
+            )}
           </div>
         ) : (
           <BillingInfo subscriptions={subscriptions} />
@@ -203,17 +206,19 @@ export function PlanInfoCardUI(props: {
             </Button>
 
             {/* manage team billing */}
-            <BillingPortalButton
-              teamSlug={team.slug}
-              buttonProps={{
-                variant: "outline",
-                size: "sm",
-                className: "bg-background gap-2",
-              }}
-            >
-              <CreditCardIcon className="size-4 text-muted-foreground" />
-              Manage Billing
-            </BillingPortalButton>
+            {props.isOwnerAccount && (
+              <BillingPortalButton
+                teamSlug={team.slug}
+                buttonProps={{
+                  variant: "outline",
+                  size: "sm",
+                  className: "bg-background gap-2",
+                }}
+              >
+                <CreditCardIcon className="size-4 text-muted-foreground" />
+                Manage Billing
+              </BillingPortalButton>
+            )}
           </div>
         </div>
       )}

apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/settings/billing/components/credit-balance-section.client.tsx

@@ -13,9 +13,9 @@ import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
 import { Separator } from "@/components/ui/separator";
 import { Skeleton } from "@/components/ui/skeleton";
 import { ArrowRightIcon, DollarSignIcon } from "lucide-react";
-import Link from "next/link";
 import { Suspense, use, useState } from "react";
 import { ErrorBoundary } from "react-error-boundary";
+import { ToolTipLabel } from "../../../../../../../../../@/components/ui/tooltip";
 import { ThirdwebMiniLogo } from "../../../../../../../components/ThirdwebMiniLogo";
 
 const predefinedAmounts = [
@@ -28,11 +28,13 @@ const predefinedAmounts = [
 interface CreditBalanceSectionProps {
   balancePromise: Promise<number>;
   teamSlug: string;
+  isOwnerAccount: boolean;
 }
 
 export function CreditBalanceSection({
   balancePromise,
   teamSlug,
+  isOwnerAccount,
 }: CreditBalanceSectionProps) {
   const [selectedAmount, setSelectedAmount] = useState<string>(
     predefinedAmounts[0].value,
@@ -114,17 +116,30 @@ export function CreditBalanceSection({
               </Suspense>
             </ErrorBoundary>
 
-            <Button asChild className="w-full" size="lg">
-              <Link
-                href={`/checkout/${teamSlug}/topup?amount=${selectedAmount}`}
-                prefetch={false}
-                target="_blank"
-              >
-                <ThirdwebMiniLogo className="mr-2 h-4 w-4" />
-                Top Up With Crypto
-                <ArrowRightIcon className="ml-2 h-4 w-4" />
-              </Link>
-            </Button>
+            <ToolTipLabel
+              label={
+                isOwnerAccount ? null : "Only team owners can top up credits."
+              }
+            >
+              <div>
+                <Button
+                  asChild
+                  className="w-full"
+                  size="lg"
+                  disabled={!isOwnerAccount}
+                >
+                  <a
+                    href={`/checkout/${teamSlug}/topup?amount=${selectedAmount}`}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                  >
+                    <ThirdwebMiniLogo className="mr-2 h-4 w-4" />
+                    Top Up With Crypto
+                    <ArrowRightIcon className="ml-2 h-4 w-4" />
+                  </a>
+                </Button>
+              </div>
+            </ToolTipLabel>
           </div>
         </div>
       </CardContent>

apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/settings/billing/page.tsx

@@ -1,5 +1,6 @@
 import { getStripeBalance } from "@/actions/stripe-actions";
 import { type Team, getTeamBySlug } from "@/api/team";
+import { getMemberById } from "@/api/team-members";
 import { getTeamSubscriptions } from "@/api/team-subscription";
 import { getClientThirdwebClient } from "@/constants/thirdweb-client.client";
 import { redirect } from "next/navigation";
@@ -25,12 +26,16 @@ export default async function Page(props: {
   ]);
   const pagePath = `/team/${params.team_slug}/settings/billing`;
 
-  const [account, team, authToken] = await Promise.all([
-    getValidAccount(pagePath),
+  const account = await getValidAccount(pagePath);
+
+  const [team, authToken, teamMember] = await Promise.all([
     getTeamBySlug(params.team_slug),
     getAuthToken(),
+    getMemberById(params.team_slug, account.id),
   ]);
 
+  const isOwnerAccount = teamMember?.role === "OWNER";
+
   if (!team) {
     redirect("/team");
   }
@@ -66,6 +71,7 @@ export default async function Page(props: {
           subscriptions={subscriptions}
           openPlanSheetButtonByDefault={searchParams.showPlans === "true"}
           highlightPlan={highlightPlan}
+          isOwnerAccount={isOwnerAccount}
         />
       </div>
 
@@ -74,6 +80,7 @@ export default async function Page(props: {
         <CreditBalanceSection
           teamSlug={team.slug}
           balancePromise={getStripeBalance(team.stripeCustomerId)}
+          isOwnerAccount={isOwnerAccount}
         />
       )}
 

apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/settings/invoices/components/billing-history.tsx

@@ -18,10 +18,10 @@ import {
   DownloadIcon,
   ReceiptIcon,
 } from "lucide-react";
-import Link from "next/link";
 import { useQueryState } from "nuqs";
 import { useTransition } from "react";
 import type Stripe from "stripe";
+import { ToolTipLabel } from "../../../../../../../../../@/components/ui/tooltip";
 import { ThirdwebMiniLogo } from "../../../../../../../components/ThirdwebMiniLogo";
 import { searchParams } from "../search-params";
 
@@ -30,6 +30,7 @@ export function BillingHistory(props: {
   invoices: Stripe.Invoice[];
   status: "all" | "past_due" | "open";
   hasMore: boolean;
+  isOwnerAccount: boolean;
 }) {
   const [isLoading, startTransition] = useTransition();
   const [cursor, setCursor] = useQueryState(
@@ -128,27 +129,58 @@ export function BillingHistory(props: {
                     {invoice.status === "open" && (
                       <>
                         {/* always show the crypto payment button */}
-                        <Button variant="default" size="sm" asChild>
-                          <Link
-                            target="_blank"
-                            href={`/checkout/${props.teamSlug}/invoice?invoice_id=${invoice.id}`}
-                          >
-                            <ThirdwebMiniLogo className="mr-2 h-4 w-4" />
-                            Pay with crypto
-                          </Link>
-                        </Button>
+                        <ToolTipLabel
+                          label={
+                            props.isOwnerAccount
+                              ? null
+                              : "Only team owners can pay invoices."
+                          }
+                        >
+                          <div>
+                            <Button
+                              variant="default"
+                              size="sm"
+                              asChild
+                              disabled={!props.isOwnerAccount}
+                            >
+                              <a
+                                target="_blank"
+                                href={`/checkout/${props.teamSlug}/invoice?invoice_id=${invoice.id}`}
+                                rel="noopener noreferrer"
+                              >
+                                <ThirdwebMiniLogo className="mr-2 h-4 w-4" />
+                                Pay with crypto
+                              </a>
+                            </Button>
+                          </div>
+                        </ToolTipLabel>
                         {/* if we have a hosted invoice url, show that */}
                         {invoice.hosted_invoice_url && (
-                          <Button variant="outline" size="sm" asChild>
-                            <a
-                              href={invoice.hosted_invoice_url}
-                              target="_blank"
-                              rel="noopener noreferrer"
-                            >
-                              <CreditCardIcon className="mr-2 h-4 w-4" />
-                              Pay with Card
-                            </a>
-                          </Button>
+                          <ToolTipLabel
+                            label={
+                              props.isOwnerAccount
+                                ? null
+                                : "Only team owners can pay invoices."
+                            }
+                          >
+                            <div>
+                              <Button
+                                variant="outline"
+                                size="sm"
+                                asChild
+                                disabled={!props.isOwnerAccount}
+                              >
+                                <a
+                                  href={invoice.hosted_invoice_url}
+                                  target="_blank"
+                                  rel="noopener noreferrer"
+                                >
+                                  <CreditCardIcon className="mr-2 h-4 w-4" />
+                                  Pay with Card
+                                </a>
+                              </Button>
+                            </div>
+                          </ToolTipLabel>
                         )}
                       </>
                     )}