Merge branch 'main' into ub-and-webhooks

Author: saminacodes

.changeset/many-hounds-wave.md

@@ -0,0 +1,8 @@
+---
+"@thirdweb-dev/service-utils": patch
+---
+
+remove:
+- `starter_legacy` plan type
+- `billingPlanVersion` field
+- `growthTrialEligible` field

.github/workflows/CI.yml

@@ -61,7 +61,7 @@ jobs:
         uses: ./.github/composite-actions/install
 
       - name: Setup Biome
-        uses: biomejs/setup-biome@f382a98e582959e6aaac8e5f8b17b31749018780 # v2.5.0
+        uses: biomejs/setup-biome@a9763ed3d2388f5746f9dc3e1a55df7f4609bc89 # v2.5.1
         with:
           version: latest  
 

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/blocks/pricing-card.tsx

@@ -192,7 +192,6 @@ const billingPlanToSkuMap: Record<Team["billingPlan"], ProductSKU | undefined> =
     accelerate: undefined,
     free: undefined,
     growth_legacy: undefined,
-    starter_legacy: undefined,
   };
 
 type FeatureItemProps = {

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

@@ -45,17 +45,35 @@ 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";
+
+    // "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" : "";
+
     const btnOnlyProps =
       Comp === "button"
-        ? { type: props.type || ("button" as const) }
+        ? {
+            type:
+              (props as React.ButtonHTMLAttributes<HTMLButtonElement>).type ||
+              ("button" as const),
+          }
         : undefined;
 
     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)/components/TeamPlanBadge.tsx

@@ -14,7 +14,7 @@ const teamPlanToBadgeVariant: Record<
   free: "secondary",
   // yellow
   starter: "warning",
-  starter_legacy: "warning",
+
   growth_legacy: "warning",
   // green
   accelerate: "success",
@@ -28,9 +28,7 @@ export function getTeamPlanBadgeLabel(plan: Team["billingPlan"]) {
   if (plan === "growth_legacy") {
     return "Growth - Legacy";
   }
-  if (plan === "starter_legacy") {
-    return "Starter - Legacy";
-  }
+
   return plan;
 }
 

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

@@ -24,12 +24,6 @@ export const Free: Story = {
   },
 };
 
-export const StarterLegacy: Story = {
-  args: {
-    plan: "starter_legacy",
-  },
-};
-
 export const Starter: Story = {
   args: {
     plan: "starter",
@@ -120,6 +114,7 @@ function Story(props: {
           getTeam={teamTeamStub}
           highlightPlan={undefined}
           openPlanSheetButtonByDefault={false}
+          isOwnerAccount={true}
         />
       </BadgeContainer>
 
@@ -133,6 +128,7 @@ function Story(props: {
           getTeam={teamTeamStub}
           highlightPlan={undefined}
           openPlanSheetButtonByDefault={false}
+          isOwnerAccount={true}
         />
       </BadgeContainer>
 
@@ -143,6 +139,7 @@ function Story(props: {
           getTeam={teamTeamStub}
           highlightPlan={undefined}
           openPlanSheetButtonByDefault={false}
+          isOwnerAccount={true}
         />
       </BadgeContainer>
 
@@ -153,6 +150,7 @@ function Story(props: {
           getTeam={teamTeamStub}
           highlightPlan={undefined}
           openPlanSheetButtonByDefault={false}
+          isOwnerAccount={true}
         />
       </BadgeContainer>
 
@@ -163,6 +161,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

@@ -13,6 +13,7 @@ import {
   SheetHeader,
   SheetTitle,
 } from "@/components/ui/sheet";
+import { ToolTipLabel } from "@/components/ui/tooltip";
 import { CancelPlanButton } from "components/settings/Account/Billing/CancelPlanModal/CancelPlanModal";
 import { BillingPricing } from "components/settings/Account/Billing/Pricing";
 import { differenceInDays, isAfter } from "date-fns";
@@ -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);
@@ -66,12 +68,7 @@ export function PlanInfoCardUI(props: {
           <div className="flex flex-col items-start gap-0.5">
             <div className="flex items-center gap-2">
               <h3 className="font-semibold text-2xl capitalize tracking-tight">
-                {validPlan === "growth_legacy"
-                  ? "Growth"
-                  : validPlan === "starter_legacy"
-                    ? "Starter"
-                    : validPlan}{" "}
-                Plan
+                {validPlan === "growth_legacy" ? "Growth" : validPlan} Plan
               </h3>
               {validPlan.includes("legacy") && (
                 <Badge variant="warning">Legacy</Badge>
@@ -112,32 +109,57 @@ export function PlanInfoCardUI(props: {
 
         {props.team.billingPlan !== "free" && (
           <div className="flex items-center gap-3">
-            <Button
-              variant="outline"
-              size="sm"
-              className="gap-2 bg-background"
-              onClick={() => {
-                setIsPlanSheetOpen(true);
-              }}
+            <ToolTipLabel
+              label={
+                props.isOwnerAccount
+                  ? null
+                  : "Only team owners can change plans."
+              }
             >
-              <SquarePenIcon className="size-4 text-muted-foreground" />
-              Change Plan
-            </Button>
+              <div>
+                <Button
+                  variant="outline"
+                  size="sm"
+                  className="gap-2 bg-background"
+                  onClick={() => {
+                    setIsPlanSheetOpen(true);
+                  }}
+                  disabled={!props.isOwnerAccount}
+                >
+                  <SquarePenIcon className="size-4 text-muted-foreground" />
+                  Change Plan
+                </Button>
+              </div>
+            </ToolTipLabel>
 
-            {props.team.planCancellationDate ? (
-              <RenewSubscriptionButton
-                teamId={props.team.id}
-                getTeam={props.getTeam}
-              />
-            ) : (
-              <CancelPlanButton
-                teamId={props.team.id}
-                teamSlug={props.team.slug}
-                billingStatus={props.team.billingStatus}
-                currentPlan={props.team.billingPlan}
-                getTeam={props.getTeam}
-              />
-            )}
+            <ToolTipLabel
+              label={
+                props.isOwnerAccount
+                  ? null
+                  : props.team.planCancellationDate
+                    ? "Only team owners can renew plans."
+                    : "Only team owners can cancel plans."
+              }
+            >
+              <div>
+                {props.team.planCancellationDate ? (
+                  <RenewSubscriptionButton
+                    teamId={props.team.id}
+                    getTeam={props.getTeam}
+                    disabled={!props.isOwnerAccount}
+                  />
+                ) : (
+                  <CancelPlanButton
+                    teamId={props.team.id}
+                    teamSlug={props.team.slug}
+                    billingStatus={props.team.billingStatus}
+                    currentPlan={props.team.billingPlan}
+                    getTeam={props.getTeam}
+                    disabled={!props.isOwnerAccount}
+                  />
+                )}
+              </div>
+            </ToolTipLabel>
           </div>
         )}
       </div>
@@ -153,16 +175,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 +237,28 @@ 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",
+                    disabled: !props.isOwnerAccount,
+                  }}
+                >
+                  <CreditCardIcon className="size-4 text-muted-foreground" />
+                  Manage Billing
+                </BillingPortalButton>
+              </div>
+            </ToolTipLabel>
           </div>
         </div>
       )}