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

Author: panteliselef

.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 `<PricingTable/>`.

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,
   });
 

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 });
   });
 

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;

packages/clerk-js/src/ui/contexts/ClerkUIComponentsContext.tsx

@@ -95,7 +95,7 @@ export function ComponentContextProvider({
       );
     case 'PricingTable':
       return (
-        <SubscriberTypeContext.Provider value={(props as PricingTableProps).forOrganizations ? 'organization' : 'user'}>
+        <SubscriberTypeContext.Provider value={(props as PricingTableProps).for || 'user'}>
           <PricingTableContext.Provider value={{ componentName, ...(props as PricingTableProps) }}>
             {children}
           </PricingTableContext.Provider>

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`