chore(clerk-js,types): Use the `for` prop in PricingTable #6978

panteliselef · 2025-10-13T10:26:00Z

Description

Replaces forOrganizations: true with for: "organization" in <PricingTable/>

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

Summary by CodeRabbit

New Features
- PricingTable adds a new for option ('user' | 'organization') to explicitly target who plans apply to; defaults to 'user'.
Improvements
- More consistent plan display and footer behavior depending on the selected target (user or organization).
Documentation
- Examples and notes updated to use the new for option instead of the previous organization flag.

changeset-bot · 2025-10-13T10:26:04Z

🦋 Changeset detected

Latest commit: 2b745b9

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

This PR includes changesets to release 22 packages

Name	Type
@clerk/clerk-js	Minor
@clerk/types	Minor
@clerk/chrome-extension	Patch
@clerk/clerk-expo	Patch
@clerk/agent-toolkit	Patch
@clerk/astro	Patch
@clerk/backend	Patch
@clerk/elements	Patch
@clerk/expo-passkeys	Patch
@clerk/express	Patch
@clerk/fastify	Patch
@clerk/localizations	Patch
@clerk/nextjs	Patch
@clerk/nuxt	Patch
@clerk/react-router	Patch
@clerk/clerk-react	Patch
@clerk/remix	Patch
@clerk/shared	Patch
@clerk/tanstack-react-start	Patch
@clerk/testing	Patch
@clerk/themes	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

vercel · 2025-10-13T10:26:04Z

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

Project	Deployment	Preview	Comments	Updated (UTC)
clerk-js-sandbox	Ready	Preview	Comment	Oct 13, 2025 10:38am

coderabbitai · 2025-10-13T10:26:27Z

Walkthrough

The PR replaces the PricingTable audience selector from a boolean forOrganizations to a string union for: 'user' | 'organization' across types, context, component calls, and footer-state logic; tests and a changeset were updated accordingly.

Changes

Cohort / File(s)	Change Summary
Pricing footer state logic `packages/clerk-js/src/ui/components/PricingTable/utils/pricing-footer-state.ts`, `packages/clerk-js/src/ui/components/PricingTable/utils/pricing-footer-state.spec.ts`	Replace `forOrganizations?: boolean` with `for?: 'user' \| 'organization'`; rename destructured field and update conditionals and tests to use `for: 'user'` / `'organization'`.
PricingTable component usage `packages/clerk-js/src/ui/components/PricingTable/PricingTableDefault.tsx`	Update `Card` to pass `for: pricingTableProps.for` into `getPricingFooterState` instead of `forOrganizations`.
UI context propagation `packages/clerk-js/src/ui/contexts/ClerkUIComponentsContext.tsx`	Derive `SubscriberTypeContext` from `(props as PricingTableProps).for
Public types `packages/types/src/clerk.ts`	In `PricingTableBaseProps`, remove `forOrganizations?: boolean`; add `for?: ForPayerType` with updated JSDoc and default `'user'`.
Repo metadata / Changeset `.changeset/weak-ways-agree.md`	Add changeset marking minor bumps for `@clerk/clerk-js` and `@clerk/types`; update Billing Beta note to use `for: "organization"`.

Sequence Diagram(s)

sequenceDiagram
  autonumber
  participant App
  participant PricingTable
  participant UIContext as ClerkUIComponentsContext
  participant FooterState as getPricingFooterState
  participant UI as PricingTable UI

  App->>PricingTable: render({ for: 'user'|'organization', ... })
  PricingTable->>UIContext: provide subscriberType = for || 'user'
  PricingTable->>FooterState: getPricingFooterState({ for, ... })
  alt for == 'organization'
    FooterState-->>PricingTable: footer state for organization
  else for == 'user'
    FooterState-->>PricingTable: footer state for user
  end
  PricingTable->>UI: render footer per returned state

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

Poem

I swapped a bool for words that sing,
user or org — a clearer spring.
Tests hopped along, contexts align,
Footer knows which plans to sign.
A tiny change, a tidy cheer, 🥕

Pre-merge checks and finishing touches

✅ Passed checks (3 passed)

Check name	Status	Explanation
Title Check	✅ Passed	The title follows conventional commit style and succinctly captures the main change of switching from a boolean flag to using the `for` prop in the PricingTable component across both clerk-js and types, without including extraneous details.
Docstring Coverage	✅ Passed	No functions found in the changes. Docstring coverage check skipped.
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.

✨ Finishing touches

📝 Generate docstrings

🧪 Generate unit tests (beta)

Create PR with unit tests
Post copyable unit tests in a comment
Commit unit tests in branch elef/bill-1292-rename-fororganizations-to-follow-established-patterns

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

coderabbitai

Actionable comments posted: 1

📜 Review details

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Disabled knowledge base sources:

Linear integration is disabled by default for public repositories

You can enable these sources in your CodeRabbit configuration.

📥 Commits

Reviewing files that changed from the base of the PR and between 277a0f7 and 9d3b411.

📒 Files selected for processing (6)

.changeset/weak-ways-agree.md (1 hunks)
packages/clerk-js/src/ui/components/PricingTable/PricingTableDefault.tsx (1 hunks)
packages/clerk-js/src/ui/components/PricingTable/utils/pricing-footer-state.spec.ts (1 hunks)
packages/clerk-js/src/ui/components/PricingTable/utils/pricing-footer-state.ts (2 hunks)
packages/clerk-js/src/ui/contexts/ClerkUIComponentsContext.tsx (1 hunks)
packages/types/src/clerk.ts (1 hunks)

🧰 Additional context used

📓 Path-based instructions (12)

.changeset/**

📄 CodeRabbit inference engine (.cursor/rules/monorepo.mdc)

Automated releases must use Changesets.

Files:

.changeset/weak-ways-agree.md

packages/clerk-js/src/ui/**/*.{ts,tsx}

📄 CodeRabbit inference engine (.cursor/rules/clerk-js-ui.mdc)

packages/clerk-js/src/ui/**/*.{ts,tsx}: Element descriptors should always be camelCase
Use element descriptors in UI components to enable consistent theming and styling via appearance.elements
Element descriptors should generate unique, stable CSS classes for theming
Element descriptors should handle state classes (e.g., cl-loading, cl-active, cl-error, cl-open) automatically based on component state
Do not render hard-coded values; all user-facing strings must be localized using provided localization methods
Use the useLocalizations hook and localizationKeys utility for all text and error messages
Use the styled system (sx prop, theme tokens, responsive values) for custom component styling
Use useCardState for card-level state, useFormState for form-level state, and useLoadingStatus for loading states
Always use handleError utility for API errors and use translateError for localized error messages
Use useFormControl for form field state, implement proper validation, and handle loading and error states in forms
Use localization keys for all form labels and placeholders
Use element descriptors for consistent styling and follow the theme token system
Use the Card and FormContainer patterns for consistent UI structure

Files:

packages/clerk-js/src/ui/components/PricingTable/PricingTableDefault.tsx
packages/clerk-js/src/ui/components/PricingTable/utils/pricing-footer-state.spec.ts
packages/clerk-js/src/ui/components/PricingTable/utils/pricing-footer-state.ts
packages/clerk-js/src/ui/contexts/ClerkUIComponentsContext.tsx

**/*.{js,jsx,ts,tsx}