feat(clerk-js,shared,ui): Add seats info to payment attempts page by aeliox · Pull Request #8527 · clerk/javascript

aeliox · 2026-05-12T04:28:07Z

Adds seat info (limits, usage, and costs) to the payment attempts page of an OrganizationProfile's billing section.

vercel · 2026-05-12T04:28:12Z

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

Project	Deployment	Actions	Updated (UTC)
clerk-js-sandbox	Ready	Preview, Comment	May 14, 2026 6:28am

changeset-bot · 2026-05-12T04:28:13Z

🦋 Changeset detected

Latest commit: caaf316

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

This PR includes changesets to release 20 packages

Name	Type
@clerk/shared	Minor
@clerk/clerk-js	Minor
@clerk/ui	Minor
@clerk/astro	Patch
@clerk/backend	Patch
@clerk/chrome-extension	Patch
@clerk/expo-passkeys	Patch
@clerk/expo	Patch
@clerk/express	Patch
@clerk/fastify	Patch
@clerk/hono	Patch
@clerk/localizations	Patch
@clerk/msw	Patch
@clerk/nextjs	Patch
@clerk/nuxt	Patch
@clerk/react-router	Patch
@clerk/react	Patch
@clerk/tanstack-react-start	Patch
@clerk/testing	Patch
@clerk/vue	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

coderabbitai · 2026-05-12T04:31:20Z

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: 30730412-6fa6-48e7-a867-87a303c9e3fd

📥 Commits

Reviewing files that changed from the base of the PR and between 3b80b87 and caaf316.

📒 Files selected for processing (2)

packages/localizations/src/en-US.ts
packages/shared/src/types/localization.ts

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

packages/localizations/src/en-US.ts
packages/shared/src/types/localization.ts

📝 Walkthrough

Walkthrough

This PR introduces seat-based billing totals to payment attempts. It adds BillingPaymentTotals JSON and typed contracts, implements billingPaymentTotalsFromJSON with tests, extends the BillingPayment resource to include a totals field, adds utilities to extract and summarize seat charges (with tests), refactors the payment-attempt UI to render a conditional "Seats" line item, and adds a localization string and changeset note.

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 summarizes the main change: adding seat information to the payment attempts page, directly corresponding to the changeset.
Description check	✅ Passed	The description clearly relates to the changeset by explaining that seat info (limits, usage, and costs) is added to the payment attempts page, with a screenshot demonstrating the feature.
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.}

Tip

💬 Introducing Slack Agent: The best way for teams to turn conversations into code.

Slack Agent is built on CodeRabbit's deep understanding of your code, so your team can collaborate across the entire SDLC without losing context.

Generate code and open pull requests
Plan features and break down work
Investigate incidents and troubleshoot customer tickets together
Automate recurring tasks and respond to alerts with triggers
Summarize progress and report instantly

Built for teams:

Shared memory across your entire org—no repeating context
Per-thread sandboxes to safely plan and execute work
Governance built-in—scoped access, auditability, and budget controls

One agent for your entire SDLC. Right inside Slack.

👉 Get started

_{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 current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@packages/ui/src/components/PaymentAttempts/PaymentAttemptPage.tsx`:
- Around line 232-243: The seats description currently always renders a
quantity×rate string; update the JSX in the PaymentAttemptPage component so that
when seatSummary.paidTier.quantity === null (an unlimited paid tier) you do not
render the "× {feePerBlock}" piece and instead only show the tier total,
otherwise keep the existing "{used} × {feePerBlock}" behavior; specifically
adjust the LineItems.Title description expression (using seatSummary,
seatSummary.paidTier.quantity, seatSummary.paidTier.feePerBlock and
seatSummary.paidTier.total) to branch on paidTier.quantity and produce the
appropriate string for unlimited vs. limited tiers.

🪄 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: 1cd96259-918b-49c3-9ce0-6aa6a4195339

📥 Commits

Reviewing files that changed from the base of the PR and between c5fd14c and 454faa6.

📒 Files selected for processing (9)

.changeset/billing-seat-tier-rows-payment-attempt.md
packages/clerk-js/src/core/resources/BillingPayment.ts
packages/clerk-js/src/utils/__tests__/billing.test.ts
packages/clerk-js/src/utils/billing.ts
packages/shared/src/types/billing.ts
packages/shared/src/types/json.ts
packages/ui/src/components/PaymentAttempts/PaymentAttemptPage.tsx
packages/ui/src/utils/__tests__/billingPlanSeats.test.ts
packages/ui/src/utils/billingPlanSeats.ts

pkg-pr-new · 2026-05-12T04:31:46Z

Open in StackBlitz

@clerk/astro

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

@clerk/backend

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

@clerk/chrome-extension

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

@clerk/clerk-js

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

@clerk/dev-cli

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

@clerk/expo

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

@clerk/expo-passkeys

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

@clerk/express

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

@clerk/fastify

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

@clerk/hono

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

@clerk/localizations

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

@clerk/nextjs

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

@clerk/nuxt

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

@clerk/react

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

@clerk/react-router

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

@clerk/shared

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

@clerk/tanstack-react-start

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

@clerk/testing

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

@clerk/ui

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

@clerk/upgrade

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

@clerk/vue

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

commit: caaf316

dstaley · 2026-05-14T14:36:14Z

      : // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
        subscriptionItem.plan.annualMonthlyFee!;

+  const seatsTotal = subscriptionItem.seats != null ? getSeatsPerUnitTotal(paymentAttempt.totals) : undefined;


I think in this situation a null value in seats represents "Unlimited seats".

dstaley · 2026-05-14T14:37:54Z

+                return seatSummary.included > 0
+                  ? `${seatSummary.used} used − ${seatSummary.included} included → ${seatLabel} at ${rate}`
+                  : `${seatLabel} at ${rate}`;


This should be done through the localization system.

dstaley · 2026-05-14T14:40:05Z

-  return null;
+export type SeatChargeSummary = {
+  /** Sum of `quantity` across all tiers (paid + included). */
+  used: number;


I think calling this "used" is misleading. This number represents the number of seats an organization was charged for, not how many seats are used. Maybe "total" instead since it represents both included and purchased seats?

dstaley · 2026-05-14T14:40:45Z


-  return seatUnitPrice.tiers[seatUnitPrice.tiers.length - 1]?.endsAfterBlock;
+  const lastTier = seatUnitPrice.tiers[seatUnitPrice.tiers.length - 1];
+  return lastTier.endsAfterBlock != null ? lastTier.endsAfterBlock * seatUnitPrice.blockSize : null;


good catch!

dstaley · 2026-05-14T14:43:50Z

+                const seatLabel = `${seatsChargeable} ${seatsChargeable === 1 ? 'seat' : 'seats'}`;
+                const rate = `${seatSummary.paidTier.feePerBlock.currencySymbol}${seatSummary.paidTier.feePerBlock.amountFormatted}/mo`;
+                return seatSummary.included > 0
+                  ? `${seatSummary.used} used − ${seatSummary.included} included → ${seatLabel} at ${rate}`


I think a comma instead of an arrow here would probably be better (especially since people will be writing this string in their localizations):

5 total - 2 included, 3 seats at $10.00/mo

dstaley · 2026-05-14T14:56:53Z

+ *
+ * Per-payment cost breakdown including optional base fee and per-unit (for example, seats) subtotals.
+ */
+export interface BillingPaymentTotalsJSON {


I think this is actually our CommerceTotalsResponse type, which is shared between checkout, invoices, and payments, rather than a payments specific shape. I have one in my checkout PR, so we can probably just land this as-is in your PR, and then I'll update it to use the same type as checkout in mine. Just calling it out in case the checkout PR lands before this one.

dstaley · 2026-05-14T14:58:44Z

    },
    reSubscribe: 'Resubscribe',
    seats: 'Seats',
+    seatsWithLimit: 'Seats ({{limit}} limit)',


would it make sense to use our existing upToSeats localization value? It'd read a little different Up to X seats

add seats info to payment attempts

454faa6

aeliox marked this pull request as draft May 12, 2026 04:28

github-actions Bot added clerk-js ui labels May 12, 2026

coderabbitai Bot reviewed May 12, 2026

View reviewed changes

Comment thread packages/ui/src/components/PaymentAttempts/PaymentAttemptPage.tsx

updated layout

3b80b87

github-actions Bot added the localizations label May 13, 2026

vercel Bot deployed to Preview May 13, 2026 22:25 View deployment

aeliox marked this pull request as ready for review May 13, 2026 22:27

aeliox changed the title ~~feat(billing): Add seats info to payment attempts page~~ feat(clerk-js): Add seats info to payment attempts page May 14, 2026

aeliox changed the title ~~feat(clerk-js): Add seats info to payment attempts page~~ feat(clerk-js,shared,ui): Add seats info to payment attempts page May 14, 2026

Merge branch 'main' into keiran/BILL-1752

caaf316

vercel Bot deployed to Preview May 14, 2026 06:28 View deployment

dstaley changed the base branch from main to feat/per-seat-costs May 14, 2026 14:28

dstaley reviewed May 14, 2026

View reviewed changes

Conversation

aeliox commented May 12, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

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

Uh oh!

Uh oh!

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

Uh oh!

🦋 Changeset detected

Uh oh!

coderabbitai Bot commented May 12, 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!

Uh oh!

pkg-pr-new Bot commented May 12, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

dstaley May 14, 2026

Choose a reason for hiding this comment

Uh oh!

dstaley May 14, 2026

Choose a reason for hiding this comment

Uh oh!

dstaley May 14, 2026

Choose a reason for hiding this comment

Uh oh!

dstaley May 14, 2026

Choose a reason for hiding this comment

Uh oh!

dstaley May 14, 2026

Choose a reason for hiding this comment

Uh oh!

dstaley May 14, 2026

Choose a reason for hiding this comment

Uh oh!

dstaley May 14, 2026

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

aeliox commented May 12, 2026 •

edited

Loading

vercel Bot commented May 12, 2026 •

edited

Loading

changeset-bot Bot commented May 12, 2026 •

edited

Loading

coderabbitai Bot commented May 12, 2026 •

edited

Loading

pkg-pr-new Bot commented May 12, 2026 •

edited

Loading