feat(ui): show management button for plans without base fee by mauricioabreu · Pull Request #8375 · clerk/javascript

mauricioabreu · 2026-04-22T11:41:22Z

Today, the Manage Subscription button in / , and the Cancel / Re-subscribe actions inside , are gated by !plan.hasBaseFee. That predicate was originally shorthand for "this is the free fallback plan, there's nothing the user can do with it". with seat-based billing, however, a plan can have no base fee and still be a real paid subscription (the cost comes entirely from the seat unit prices), so the UI was hiding actions users need

Description

Checklist

pnpm test runs as expected.
pnpm build runs as expected.
(If applicable) JSDoc comments have been added or updated for any package exports
(If applicable) Documentation has been updated

Type of change

changeset-bot · 2026-04-22T11:41:28Z

🦋 Changeset detected

Latest commit: 7654711

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 2 packages

Name	Type
@clerk/ui	Patch
@clerk/chrome-extension	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

vercel · 2026-04-22T11:41:29Z

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
clerk-js-sandbox	Ready	Preview, Comment	Apr 22, 2026 11:34pm

coderabbitai · 2026-04-22T15:43:03Z

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Repository YAML (base), Organization UI (inherited)

Review profile: CHILL

Plan: Pro

Run ID: fbf37323-1c5f-4d09-bf6e-badc2297fd93

📥 Commits

Reviewing files that changed from the base of the PR and between d02bd0b and 7654711.

📒 Files selected for processing (4)

.changeset/billing-manage-subscription-seat-based.md
packages/ui/src/components/SubscriptionDetails/index.tsx
packages/ui/src/components/Subscriptions/SubscriptionsList.tsx
packages/ui/src/utils/billingSubscription.ts

✅ Files skipped from review due to trivial changes (1)

packages/ui/src/utils/billingSubscription.ts

🚧 Files skipped from review as they are similar to previous changes (2)

.changeset/billing-manage-subscription-seat-based.md
packages/ui/src/components/Subscriptions/SubscriptionsList.tsx

📝 Walkthrough

Walkthrough

A new utility, isManageableSubscriptionItem(subscriptionItem), is added and exported from packages/ui/src/utils/billingSubscription.ts; it defines manageability as !subscriptionItem.plan.isDefault. The SubscriptionDetails and SubscriptionsList components now use this helper to decide whether management actions (manage/switch/cancel/re-subscribe) and the manage-subscription button are shown, replacing prior local checks that relied on plan base-fee and free-plan heuristics. A changeset documenting the UI behavior update was added.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title accurately describes the main change: updating the management button visibility logic to show it for plans without a base fee (when they are manageable), which directly aligns with the seat-based billing fix.
Description check	✅ Passed	The description clearly explains the problem (hasBaseFee predicate was incorrect for seat-based billing), the motivation (plans without base fee can still be paid), and the solution (show management actions for non-free payable plans).
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

coderabbitai

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.

Inline comments:
In `@packages/ui/src/utils/billingSubscription.ts`:
- Around line 15-16: Add regression tests for the new predicate
isManageableSubscriptionItem(BillingSubscriptionItemResource) covering at least:
(1) a default-plan item where plan.isDefault === true and the predicate returns
false, and (2) paid seat-based and paid no-base-fee items where plan.isDefault
=== false and the predicate returns true. Also add integration-level assertions
that the UI paths which rely on this helper (the action visibility
logic/components that call isManageableSubscriptionItem) show or hide the
management actions appropriately. Ensure tests exercise the helper directly and
via the consuming UI visibility logic so future changes to
isManageableSubscriptionItem are caught.

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

Push a commit to this branch (recommended)
Create a new PR with the fixes

ℹ️ Review info

⚙️ Run configuration

Configuration used: Repository YAML (base), Organization UI (inherited)

Review profile: CHILL

Plan: Pro

Run ID: 22136a0a-d6e8-4522-9cfc-d9ccf9a95a08

📥 Commits

Reviewing files that changed from the base of the PR and between abaa339 and d02bd0b.

📒 Files selected for processing (4)

.changeset/billing-manage-subscription-seat-based.md
packages/ui/src/components/SubscriptionDetails/index.tsx
packages/ui/src/components/Subscriptions/SubscriptionsList.tsx
packages/ui/src/utils/billingSubscription.ts

coderabbitai · 2026-04-22T15:43:06Z

+export const isManageableSubscriptionItem = (subscriptionItem: BillingSubscriptionItemResource): boolean =>
+  !subscriptionItem.plan.isDefault;


⚠️ Potential issue | 🟠 Major

Add regression tests for the new manageability predicate before merge.

Line 15 introduces the shared gate used across multiple billing surfaces, but this PR ships no test updates. Please add coverage for default-plan items (not manageable) and paid seat-based/no-base-fee items (manageable), including UI action visibility paths that consume this helper.

As per coding guidelines **/*: "If there are no tests added or modified as part of the PR, please suggest that tests be added to cover the changes."

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed. In `@packages/ui/src/utils/billingSubscription.ts` around lines 15 - 16, Add regression tests for the new predicate isManageableSubscriptionItem(BillingSubscriptionItemResource) covering at least: (1) a default-plan item where plan.isDefault === true and the predicate returns false, and (2) paid seat-based and paid no-base-fee items where plan.isDefault === false and the predicate returns true. Also add integration-level assertions that the UI paths which rely on this helper (the action visibility logic/components that call isManageableSubscriptionItem) show or hide the management actions appropriately. Ensure tests exercise the helper directly and via the consuming UI visibility logic so future changes to isManageableSubscriptionItem are caught.

wobsoriano · 2026-04-22T17:43:11Z

+                    price: normalizeFormatted(subscription.plan.fee.amountFormatted),
+
+                    currency: subscription.plan.fee.currencySymbol,


tsc errors here https://github.com/clerk/javascript/actions/runs/24793180948/job/72556078193?pr=8375

fixed! Thanks

Today, the Manage Subscription button in <UserProfile /> / <OrganizationProfile />, and the Cancel / Re-subscribe actions inside <SubscriptionDetails />, are gated by !plan.hasBaseFee. That predicate was originally shorthand for "this is the free fallback plan, there's nothing the user can do with it". with seat-based billing, however, a plan can have no base fee and still be a real paid subscription (the cost comes entirely from the seat unit prices), so the UI was hiding actions users need

pkg-pr-new · 2026-04-22T23:37:26Z

Open in StackBlitz

@clerk/astro

npm i https://pkg.pr.new/@clerk/astro@8375

@clerk/backend

npm i https://pkg.pr.new/@clerk/backend@8375

@clerk/chrome-extension

npm i https://pkg.pr.new/@clerk/chrome-extension@8375

@clerk/clerk-js

npm i https://pkg.pr.new/@clerk/clerk-js@8375

@clerk/dev-cli

npm i https://pkg.pr.new/@clerk/dev-cli@8375

@clerk/expo

npm i https://pkg.pr.new/@clerk/expo@8375

@clerk/expo-passkeys

npm i https://pkg.pr.new/@clerk/expo-passkeys@8375

@clerk/express

npm i https://pkg.pr.new/@clerk/express@8375

@clerk/fastify

npm i https://pkg.pr.new/@clerk/fastify@8375

@clerk/hono

npm i https://pkg.pr.new/@clerk/hono@8375

@clerk/localizations

npm i https://pkg.pr.new/@clerk/localizations@8375

@clerk/nextjs

npm i https://pkg.pr.new/@clerk/nextjs@8375

@clerk/nuxt

npm i https://pkg.pr.new/@clerk/nuxt@8375

@clerk/react

npm i https://pkg.pr.new/@clerk/react@8375

@clerk/react-router

npm i https://pkg.pr.new/@clerk/react-router@8375

@clerk/shared

npm i https://pkg.pr.new/@clerk/shared@8375

@clerk/tanstack-react-start

npm i https://pkg.pr.new/@clerk/tanstack-react-start@8375

@clerk/testing

npm i https://pkg.pr.new/@clerk/testing@8375

@clerk/ui

npm i https://pkg.pr.new/@clerk/ui@8375

@clerk/upgrade

npm i https://pkg.pr.new/@clerk/upgrade@8375

@clerk/vue

npm i https://pkg.pr.new/@clerk/vue@8375

commit: 7654711

github-actions Bot added the ui label Apr 22, 2026

vercel Bot deployed to Preview April 22, 2026 11:42 View deployment

mauricioabreu marked this pull request as ready for review April 22, 2026 15:38

coderabbitai Bot reviewed Apr 22, 2026

View reviewed changes

mauricioabreu requested a review from a team April 22, 2026 16:39

vercel Bot deployed to Preview April 22, 2026 17:38 View deployment

wobsoriano reviewed Apr 22, 2026

View reviewed changes

mauricioabreu force-pushed the mauricio-antunes/bill-1746-manage-button-not-being-displayed branch from d6aff18 to 7654711 Compare April 22, 2026 23:33

vercel Bot deployed to Preview April 22, 2026 23:34 View deployment

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

feat(ui): show management button for plans without base fee#8375
mauricioabreu wants to merge 1 commit intomainfrom
mauricio-antunes/bill-1746-manage-button-not-being-displayed

mauricioabreu commented Apr 22, 2026

Uh oh!

changeset-bot Bot commented Apr 22, 2026 •

edited

Loading

Uh oh!

vercel Bot commented Apr 22, 2026 •

edited

Loading

Uh oh!

coderabbitai Bot commented Apr 22, 2026 •

edited

Loading

Walkthrough

Estimated code review effort

❌ Failed checks (1 warning)

Uh oh!

coderabbitai Bot left a comment

Uh oh!

coderabbitai Bot Apr 22, 2026

Uh oh!

wobsoriano Apr 22, 2026

Uh oh!

mauricioabreu Apr 22, 2026

Uh oh!

pkg-pr-new Bot commented Apr 22, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

		export const isManageableSubscriptionItem = (subscriptionItem: BillingSubscriptionItemResource): boolean =>
		!subscriptionItem.plan.isDefault;

		price: normalizeFormatted(subscription.plan.fee.amountFormatted),

		currency: subscription.plan.fee.currencySymbol,

Conversation

mauricioabreu commented Apr 22, 2026

Description

Checklist

Type of change

Uh oh!

changeset-bot Bot commented Apr 22, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🦋 Changeset detected

Uh oh!

vercel Bot commented Apr 22, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

coderabbitai Bot commented Apr 22, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Walkthrough

Estimated code review effort

❌ Failed checks (1 warning)

Uh oh!

coderabbitai Bot left a comment

Choose a reason for hiding this comment

Uh oh!

coderabbitai Bot Apr 22, 2026

Choose a reason for hiding this comment

Uh oh!

wobsoriano Apr 22, 2026

Choose a reason for hiding this comment

Uh oh!

mauricioabreu Apr 22, 2026

Choose a reason for hiding this comment

Uh oh!

pkg-pr-new Bot commented Apr 22, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

changeset-bot Bot commented Apr 22, 2026 •

edited

Loading

vercel Bot commented Apr 22, 2026 •

edited

Loading

coderabbitai Bot commented Apr 22, 2026 •

edited

Loading