chore(clerk-js,types): Replace payerType[] with forPayerType

.changeset/proud-pianos-attack.md

@@ -0,0 +1,6 @@
+---
+'@clerk/clerk-js': minor
+'@clerk/types': minor
+---
+
+[Billing Beta] Replace `payerType[]` with `forPayerType` typed as `'org' | 'user'`.

packages/clerk-js/src/core/resources/CommercePlan.ts

@@ -1,4 +1,4 @@
-import type { CommercePlanJSON, CommercePlanJSONSnapshot, CommercePlanResource } from '@clerk/types';
+import type { CommercePayerType, CommercePlanJSON, CommercePlanJSONSnapshot, CommercePlanResource } from '@clerk/types';
 
 import { BaseResource, CommerceFeature } from './internal';
 
@@ -17,7 +17,7 @@ export class CommercePlan extends BaseResource implements CommercePlanResource {
   isDefault!: boolean;
   isRecurring!: boolean;
   hasBaseFee!: boolean;
-  payerType!: string[];
+  forPayerType!: CommercePayerType;
   publiclyVisible!: boolean;
   slug!: string;
   avatarUrl!: string;
@@ -47,7 +47,7 @@ export class CommercePlan extends BaseResource implements CommercePlanResource {
     this.isDefault = data.is_default;
     this.isRecurring = data.is_recurring;
     this.hasBaseFee = data.has_base_fee;
-    this.payerType = data.payer_type;
+    this.forPayerType = data.for_payer_type;
     this.publiclyVisible = data.publicly_visible;
     this.slug = data.slug;
     this.avatarUrl = data.avatar_url;
@@ -73,7 +73,7 @@ export class CommercePlan extends BaseResource implements CommercePlanResource {
       is_default: this.isDefault,
       is_recurring: this.isRecurring,
       has_base_fee: this.hasBaseFee,
-      payer_type: this.payerType,
+      for_payer_type: this.forPayerType,
       publicly_visible: this.publiclyVisible,
       slug: this.slug,
       avatar_url: this.avatarUrl,

packages/clerk-js/src/ui/components/Plans/PlanDetails.tsx

@@ -58,7 +58,7 @@ const PlanDetailsInternal = ({
   const hasFeatures = features.length > 0;
 
   return (
-    <SubscriberTypeContext.Provider value={plan.payerType[0] as 'user' | 'org'}>
+    <SubscriberTypeContext.Provider value={plan.forPayerType}>
       <Drawer.Header
         sx={t =>
           !hasFeatures

packages/clerk-js/src/ui/contexts/components/SubscriberType.ts

@@ -1,9 +1,10 @@
+import type { CommercePayerType } from '@clerk/types';
 import { createContext, useContext } from 'react';
 
 const DEFAUlT = 'user';
-export const SubscriberTypeContext = createContext<'user' | 'org' | undefined>(DEFAUlT);
+export const SubscriberTypeContext = createContext<CommercePayerType | undefined>(DEFAUlT);
 
-export const useSubscriberTypeContext = () => useContext(SubscriberTypeContext) || DEFAUlT;
+export const useSubscriberTypeContext = (): CommercePayerType => useContext(SubscriberTypeContext) || DEFAUlT;
 
 export const useSubscriberTypeLocalizationRoot = () => {
   const subscriberType = useSubscriberTypeContext();

packages/types/src/clerk.ts

@@ -23,8 +23,8 @@
 import type {
   CommerceBillingNamespace,
   CommerceCheckoutResource,
+  CommercePayerType,
   CommercePlanResource,
-  CommerceSubscriberType,
   CommerceSubscriptionPlanPeriod,
   ConfirmCheckoutParams,
 } from './commerce';
@@ -1108,7 +1108,7 @@
      */
     windowNavigate: (to: URL | string) => void;
   },
 ) => Promise<unknown> | unknown;
 
 export type WithoutRouting<T> = Omit<T, 'path' | 'routing'>;
 
@@ -1806,7 +1806,7 @@
   appearance?: CheckoutTheme;
   planId?: string;
   planPeriod?: CommerceSubscriptionPlanPeriod;
-  subscriberType?: CommerceSubscriberType;
+  subscriberType?: CommercePayerType;
   onSubscriptionComplete?: () => void;
   portalId?: string;
   portalRoot?: PortalRoot;
@@ -1843,7 +1843,7 @@
    * If `org` is provided, the subscription details will be displayed for the active organization.
    * @default 'user'
    */
-  for?: CommerceSubscriberType;
+  for?: CommercePayerType;
   appearance?: SubscriptionDetailsTheme;
   onSubscriptionCancel?: () => void;
   portalId?: string;

packages/types/src/commerce.ts

@@ -85,7 +85,7 @@ export interface CommerceBillingNamespace {
  * <ClerkProvider clerkJsVersion="x.x.x" />
  * ```
  */
-export type CommerceSubscriberType = 'org' | 'user';
+export type CommercePayerType = 'org' | 'user';
 
 /**
  * @experimental This is an experimental API for the Billing feature that is available under a public beta, and the API is subject to change.
@@ -214,7 +214,7 @@ export type GetPlansParams = ClerkPaginationParams<{
    * <ClerkProvider clerkJsVersion="x.x.x" />
    * ```
    */
-  for?: CommerceSubscriberType;
+  for?: CommercePayerType;
 }>;
 
 /**
@@ -356,18 +356,8 @@ export interface CommercePlanResource extends ClerkResource {
    *
    * Each plan is exclusively created for either individual users or organizations,
    * and cannot be used interchangeably.
-   *
-   * @type {['user'] | ['org']}
-   * @example
-   * ```ts
-   * // For a user plan
-   * payerType: ['user']
-   *
-   * // For an organization plan
-   * payerType: ['org']
-   * ```
    */
-  payerType: string[];
+  forPayerType: CommercePayerType;
   /**
    * @experimental This is an experimental API for the Billing feature that is available under a public beta, and the API is subject to change.
    * It is advised to pin the SDK version and the clerk-js version to a specific version to avoid breaking changes.

packages/types/src/json.ts

@@ -2,7 +2,7 @@
  * Currently representing API DTOs in their JSON form.
  */
 
 import type { APIKeysSettingsJSON } from './apiKeysSettings';
 import type {
   CommercePaymentChargeType,
   CommercePaymentSourceStatus,
@@ -10,6 +10,7 @@
   CommerceStatementStatus,
   CommerceSubscriptionPlanPeriod,
   CommerceSubscriptionStatus,
+  CommercePayerType,
 } from './commerce';
 import type { CommerceSettingsJSON } from './commerceSettings';
 import type { DisplayConfigJSON } from './displayConfig';
@@ -643,23 +644,7 @@
   is_default: boolean;
   is_recurring: boolean;
   has_base_fee: boolean;
-  /**
-   * Specifies the subscriber type this plan is designed for.
-   *
-   * Each plan is exclusively created for either individual users or organizations,
-   * and cannot be used interchangeably.
-   *
-   * @type {['user'] | ['org']}
-   * @example
-   * ```ts
-   * // For a user plan
-   * payer_type: ['user']
-   *
-   * // For an organization plan
-   * payer_type: ['org']
-   * ```
-   */
-  payer_type: string[];
+  for_payer_type: CommercePayerType;
   publicly_visible: boolean;
   slug: string;
   avatar_url: string;