feat(ui): show management button for plans without base fee (#8375)

Author: mauricioabreu

.changeset/billing-manage-subscription-seat-based.md

@@ -0,0 +1,5 @@
+---
+"@clerk/ui": patch
+---
+
+Fix the Manage Subscription button in `<UserProfile />` / `<OrganizationProfile />` and the Cancel / Re-subscribe actions in `<SubscriptionDetails />` so they are shown for paid seat-based plans that have no base fee. A shared `isManageableSubscriptionItem` helper now drives both places, treating "free / unmanageable" as "the instance's default plan" instead of "the plan has no base fee".

packages/ui/src/components/SubscriptionDetails/index.tsx

@@ -2,13 +2,13 @@ import { __internal_useOrganizationBase, useClerk } from '@clerk/shared/react';
 import type {
   __internal_CheckoutProps,
   __internal_SubscriptionDetailsProps,
-  BillingPlanResource,
   BillingSubscriptionItemResource,
 } from '@clerk/shared/types';
 import * as React from 'react';
 import { useCallback, useContext, useState } from 'react';
 
 import { Users } from '@/icons';
+import { common } from '@/styledSystem';
 import { useProtect } from '@/ui/common/Gate';
 import {
   SubscriptionDetailsContext,
@@ -19,6 +19,7 @@ import { CardAlert } from '@/ui/elements/Card/CardAlert';
 import { useCardState, withCardStateProvider } from '@/ui/elements/contexts';
 import { Drawer, useDrawerContext } from '@/ui/elements/Drawer';
 import { LineItems } from '@/ui/elements/LineItems';
+import { isManageableSubscriptionItem } from '@/ui/utils/billingSubscription';
 import { handleError } from '@/ui/utils/errorHandler';
 import { formatDate } from '@/ui/utils/formatDate';
 
@@ -44,9 +45,6 @@ import {
   useLocalizations,
 } from '../../customizables';
 import { SubscriptionBadge } from '../Subscriptions/badge';
-import { common } from '@/styledSystem';
-
-const isFreePlan = (plan: BillingPlanResource) => !plan.hasBaseFee;
 
 // We cannot derive the state of confirmation modal from the existence subscription, as it will make the animation laggy when the confirmation closes.
 const SubscriptionForCancellationContext = React.createContext<{
@@ -376,14 +374,14 @@ const SubscriptionCardActions = ({ subscription }: { subscription: BillingSubscr
   const canOrgManageBilling = useProtect(has => has({ permission: 'org:sys_billing:manage' }));
   const canManageBilling = subscriberType === 'user' || canOrgManageBilling;
 
+  const isManageable = isManageableSubscriptionItem(subscription);
   const isSwitchable =
     ((subscription.planPeriod === 'month' && Boolean(subscription.plan.annualMonthlyFee)) ||
       (subscription.planPeriod === 'annual' && Boolean(subscription.plan.fee))) &&
     subscription.status !== 'past_due' &&
-    !subscription.plan.isDefault;
-  const isFree = isFreePlan(subscription.plan);
-  const isCancellable = subscription.canceledAt === null && !isFree;
-  const isReSubscribable = subscription.canceledAt !== null && !isFree;
+    isManageable;
+  const isCancellable = subscription.canceledAt === null && isManageable;
+  const isReSubscribable = subscription.canceledAt !== null && isManageable;
 
   const openCheckout = useCallback(
     (params?: __internal_CheckoutProps) => {

packages/ui/src/components/Subscriptions/SubscriptionsList.tsx

@@ -1,9 +1,10 @@
-import type { BillingPlanResource, BillingSubscriptionItemResource } from '@clerk/shared/types';
+import type { BillingSubscriptionItemResource } from '@clerk/shared/types';
 import { Fragment, useMemo } from 'react';
 
 import { useProtect } from '@/ui/common/Gate';
 import { ProfileSection } from '@/ui/elements/Section';
 import { common } from '@/ui/styledSystem';
+import { isManageableSubscriptionItem } from '@/ui/utils/billingSubscription';
 
 import {
   normalizeFormatted,
@@ -19,8 +20,6 @@ import { ArrowsUpDown, CogFilled, Plans, Plus, Users } from '../../icons';
 import { useRouter } from '../../router';
 import { SubscriptionBadge } from './badge';
 
-const isFreePlan = (plan: BillingPlanResource) => !plan.hasBaseFee;
-
 export function SubscriptionsList({
   title,
   switchPlansLabel,
@@ -45,11 +44,12 @@ export function SubscriptionsList({
     (commerceSettings.billing.user.hasPaidPlans && subscriberType === 'user') ||
     (commerceSettings.billing.organization.hasPaidPlans && subscriberType === 'organization');
 
-  const hasActiveFreePlan = useMemo(() => {
-    return subscriptionItems.some(sub => isFreePlan(sub.plan) && sub.status === 'active');
-  }, [subscriptionItems]);
+  const hasManageableSubscription = useMemo(
+    () => subscriptionItems.some(isManageableSubscriptionItem),
+    [subscriptionItems],
+  );
 
-  const isManageButtonVisible = canManageBilling && !hasActiveFreePlan && subscriptionItems.length > 0;
+  const isManageButtonVisible = canManageBilling && hasManageableSubscription;
 
   const sortedSubscriptionItems = useMemo(
     () =>

packages/ui/src/utils/billingSubscription.ts

@@ -0,0 +1,16 @@
+import type { BillingSubscriptionItemResource } from '@clerk/shared/types';
+
+/**
+ * Returns `true` when a subscription item exposes at least one management
+ * action to the user (switch period, cancel, or re-subscribe).
+ *
+ * The only subscription a user cannot act on is the one backed by the
+ * instance's default plan, because every user is implicitly subscribed to it
+ * and cannot opt out.
+ *
+ * Intentionally not based on `plan.hasBaseFee`: a plan can have no base fee
+ * and still be a real paid subscription (e.g seat-based billing where the
+ * cost is driven entirely by a seat unit price).
+ */
+export const isManageableSubscriptionItem = (subscriptionItem: BillingSubscriptionItemResource): boolean =>
+  !subscriptionItem.plan.isDefault;