[Dashboard] Restrict billing actions to team owners only

Author: jnsdls

apps/dashboard/src/@/components/billing.tsx

@@ -84,12 +84,13 @@ export function BillingPortalButton(props: {
         props.buttonProps?.onClick?.(e);
       }}
     >
-      <Link
+      <a
         href={buildBillingPortalUrl({ teamSlug: props.teamSlug })}
         target="_blank"
+        rel="noreferrer"
       >
         {props.children}
-      </Link>
+      </a>
     </Button>
   );
 }

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

@@ -21,6 +21,7 @@ import { CreditCardIcon, FileTextIcon, SquarePenIcon } from "lucide-react";
 import { CircleAlertIcon } from "lucide-react";
 import Link from "next/link";
 import { useState } from "react";
+import { ToolTipLabel } from "../../../../../../../../../@/components/ui/tooltip";
 import { RenewSubscriptionButton } from "../../../../../../../../../components/settings/Account/Billing/renew-subscription/renew-subscription-button";
 import { getValidTeamPlan } from "../../../../../../components/TeamHeader/getValidTeamPlan";
 
@@ -30,6 +31,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 +112,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,16 +155,28 @@ 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);
-                }}
+              <ToolTipLabel
+                label={
+                  props.isOwnerAccount
+                    ? null
+                    : "Only team owners can change plans."
+                }
               >
-                Select a plan
-              </Button>
+                <div>
+                  <Button
+                    disabled={!props.isOwnerAccount}
+                    variant="default"
+                    size="sm"
+                    onClick={() => {
+                      setIsPlanSheetOpen(true);
+                    }}
+                  >
+                    Select a plan
+                  </Button>
+                </div>
+              </ToolTipLabel>
             </div>
           </div>
         ) : (
@@ -203,17 +217,27 @@ export function PlanInfoCardUI(props: {
             </Button>
 
             {/* manage team billing */}
-            <BillingPortalButton
-              teamSlug={team.slug}
-              buttonProps={{
-                variant: "outline",
-                size: "sm",
-                className: "bg-background gap-2",
-              }}
+            <ToolTipLabel
+              label={
+                props.isOwnerAccount
+                  ? null
+                  : "Only team owners can manage billing."
+              }
             >
-              <CreditCardIcon className="size-4 text-muted-foreground" />
-              Manage Billing
-            </BillingPortalButton>
+              <div>
+                <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>
+            </ToolTipLabel>
           </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}
         />
       )}