diff --git a/.changeset/weak-ways-agree.md b/.changeset/weak-ways-agree.md
new file mode 100644
index 00000000000..b27ee0c4316
--- /dev/null
+++ b/.changeset/weak-ways-agree.md
@@ -0,0 +1,6 @@
+---
+'@clerk/clerk-js': minor
+'@clerk/types': minor
+---
+
+[Billing Beta] Replace `forOrganizations: true` with `for: "organization"` in ``.
diff --git a/packages/clerk-js/src/ui/components/PricingTable/PricingTableDefault.tsx b/packages/clerk-js/src/ui/components/PricingTable/PricingTableDefault.tsx
index 8c34bcd7af9..02a47279e1d 100644
--- a/packages/clerk-js/src/ui/components/PricingTable/PricingTableDefault.tsx
+++ b/packages/clerk-js/src/ui/components/PricingTable/PricingTableDefault.tsx
@@ -136,7 +136,7 @@ function Card(props: CardProps) {
subscription,
plan,
planPeriod,
- forOrganizations: pricingTableProps.forOrganizations,
+ for: pricingTableProps.for,
hasActiveOrganization: !!organization,
});
diff --git a/packages/clerk-js/src/ui/components/PricingTable/utils/pricing-footer-state.spec.ts b/packages/clerk-js/src/ui/components/PricingTable/utils/pricing-footer-state.spec.ts
index c8901e968ac..34259ce6ed7 100644
--- a/packages/clerk-js/src/ui/components/PricingTable/utils/pricing-footer-state.spec.ts
+++ b/packages/clerk-js/src/ui/components/PricingTable/utils/pricing-footer-state.spec.ts
@@ -46,25 +46,25 @@ const run = (args: {
subscription?: BillingSubscriptionItemResource;
plan?: BillingPlanResource;
planPeriod?: BillingSubscriptionPlanPeriod;
- forOrganizations?: boolean;
+ for?: 'user' | 'organization';
hasActiveOrganization?: boolean;
}) =>
getPricingFooterState({
subscription: args.subscription,
plan: args.plan ?? basePlan,
planPeriod: args.planPeriod ?? 'month',
- forOrganizations: args.forOrganizations,
+ for: args.for,
hasActiveOrganization: args.hasActiveOrganization ?? false,
});
describe('usePricingFooterState', () => {
it('hides footer when org plans and no active org', () => {
- const res = run({ subscription: undefined, forOrganizations: true, hasActiveOrganization: false });
+ const res = run({ subscription: undefined, for: 'organization', hasActiveOrganization: false });
expect(res).toEqual({ shouldShowFooter: false, shouldShowFooterNotice: false });
});
it('shows footer when no subscription and user plans', () => {
- const res = run({ subscription: undefined, forOrganizations: false });
+ const res = run({ subscription: undefined, for: 'user' });
expect(res).toEqual({ shouldShowFooter: true, shouldShowFooterNotice: false });
});
diff --git a/packages/clerk-js/src/ui/components/PricingTable/utils/pricing-footer-state.ts b/packages/clerk-js/src/ui/components/PricingTable/utils/pricing-footer-state.ts
index 441b55829f3..5e94b75c046 100644
--- a/packages/clerk-js/src/ui/components/PricingTable/utils/pricing-footer-state.ts
+++ b/packages/clerk-js/src/ui/components/PricingTable/utils/pricing-footer-state.ts
@@ -4,7 +4,7 @@ type UsePricingFooterStateParams = {
subscription: BillingSubscriptionItemResource | undefined;
plan: BillingPlanResource;
planPeriod: BillingSubscriptionPlanPeriod;
- forOrganizations?: boolean;
+ for?: 'user' | 'organization';
hasActiveOrganization: boolean;
};
@@ -13,14 +13,14 @@ type UsePricingFooterStateParams = {
* @returns [shouldShowFooter, shouldShowFooterNotice]
*/
const valueResolution = (params: UsePricingFooterStateParams): [boolean, boolean] => {
- const { subscription, plan, planPeriod, forOrganizations, hasActiveOrganization } = params;
+ const { subscription, plan, planPeriod, for: forWhom, hasActiveOrganization } = params;
const show_with_notice: [boolean, boolean] = [true, true];
const show_without_notice: [boolean, boolean] = [true, false];
const hide: [boolean, boolean] = [false, false];
// No subscription
if (!subscription) {
- if (forOrganizations && !hasActiveOrganization) {
+ if (forWhom === 'organization' && !hasActiveOrganization) {
return hide;
}
return show_without_notice;
diff --git a/packages/clerk-js/src/ui/contexts/ClerkUIComponentsContext.tsx b/packages/clerk-js/src/ui/contexts/ClerkUIComponentsContext.tsx
index f82e5425e91..1e1a147c9be 100644
--- a/packages/clerk-js/src/ui/contexts/ClerkUIComponentsContext.tsx
+++ b/packages/clerk-js/src/ui/contexts/ClerkUIComponentsContext.tsx
@@ -95,7 +95,7 @@ export function ComponentContextProvider({
);
case 'PricingTable':
return (
-
+
{children}
diff --git a/packages/types/src/clerk.ts b/packages/types/src/clerk.ts
index 5140c03f27a..0841aa8b4ea 100644
--- a/packages/types/src/clerk.ts
+++ b/packages/types/src/clerk.ts
@@ -1829,10 +1829,11 @@ type PricingTableDefaultProps = {
type PricingTableBaseProps = {
/**
- * Whether to show pricing table for organizations.
- * @default false
+ * The subscriber type to display plans for.
+ * If `organization`, show plans for the active organization; otherwise for the user.
+ * @default 'user'
*/
- forOrganizations?: boolean;
+ for?: ForPayerType;
/**
* Customisation options to fully match the Clerk components to your own brand.
* These options serve as overrides and will be merged with the global `appearance`