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`