chore(shared,clerk-js): Align for payer type across billing APIs (#6423)

Author: panteliselef

.changeset/some-parents-begin.md

@@ -0,0 +1,9 @@
+---
+'@clerk/clerk-js': minor
+'@clerk/shared': minor
+'@clerk/types': minor
+---
+
+[Billing Beta]: Replace `org` for `organization` as payer type for billing APIs.
+
+This applies for all billing APIs, except the resources classes that represent data from Frontend API.

.typedoc/__tests__/__snapshots__/file-structure.test.ts.snap

@@ -32,7 +32,7 @@ exports[`Typedoc output > should have a deliberate file structure 1`] = `
   "types/commerce-initialized-payment-source-resource.mdx",
   "types/commerce-money-json.mdx",
   "types/commerce-money.mdx",
-  "types/commerce-payer-type.mdx",
+  "types/commerce-payer-resource-type.mdx",
   "types/commerce-payment-charge-type.mdx",
   "types/commerce-payment-json.mdx",
   "types/commerce-payment-resource.mdx",
@@ -66,6 +66,7 @@ exports[`Typedoc output > should have a deliberate file structure 1`] = `
   "types/experimental_checkout-button-props.mdx",
   "types/experimental_plan-details-button-props.mdx",
   "types/experimental_subscription-details-button-props.mdx",
+  "types/for-payer-type.mdx",
   "types/get-payment-attempts-params.mdx",
   "types/get-payment-sources-params.mdx",
   "types/get-plans-params.mdx",

packages/clerk-js/src/core/modules/commerce/CommerceBilling.ts

@@ -34,7 +34,7 @@ import {
 export class CommerceBilling implements CommerceBillingNamespace {
   getPlans = async (params?: GetPlansParams): Promise<ClerkPaginatedResponse<CommercePlanResource>> => {
     const { for: forParam, ...safeParams } = params || {};
-    const searchParams = { ...safeParams, payer_type: forParam || 'user' };
+    const searchParams = { ...safeParams, payer_type: forParam === 'organization' ? 'org' : 'user' };
     return await BaseResource._fetch({
       path: `/commerce/plans`,
       method: 'GET',

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

@@ -1,4 +1,9 @@
-import type { CommercePayerType, CommercePlanJSON, CommercePlanJSONSnapshot, CommercePlanResource } from '@clerk/types';
+import type {
+  CommercePayerResourceType,
+  CommercePlanJSON,
+  CommercePlanJSONSnapshot,
+  CommercePlanResource,
+} from '@clerk/types';
 
 import { BaseResource, CommerceFeature } from './internal';
 
@@ -17,7 +22,7 @@ export class CommercePlan extends BaseResource implements CommercePlanResource {
   isDefault!: boolean;
   isRecurring!: boolean;
   hasBaseFee!: boolean;
-  forPayerType!: CommercePayerType;
+  forPayerType!: CommercePayerResourceType;
   publiclyVisible!: boolean;
   slug!: string;
   avatarUrl!: string;

packages/clerk-js/src/ui/components/Checkout/CheckoutForm.tsx

@@ -115,7 +115,7 @@ export const CheckoutForm = withCardStateProvider(() => {
 
 const useCheckoutMutations = () => {
   const { organization } = useOrganization();
-  const { subscriberType, onSubscriptionComplete } = useCheckoutContext();
+  const { for: _for, onSubscriptionComplete } = useCheckoutContext();
   const { checkout } = useCheckout();
   const { id, confirm } = checkout;
   const card = useCardState();
@@ -130,7 +130,8 @@ const useCheckoutMutations = () => {
 
     const { data, error } = await confirm({
       ...params,
-      ...(subscriberType === 'org' ? { orgId: organization?.id } : {}),
+      // TODO(@COMMERCE): Come back to this, this should not be needed
+      ...(_for === 'organization' ? { orgId: organization?.id } : {}),
     });
 
     if (error) {

packages/clerk-js/src/ui/components/Checkout/CheckoutPage.tsx

@@ -10,18 +10,18 @@ const Initiator = () => {
   const { checkout } = useCheckout();
 
   useEffect(() => {
-    checkout.start().catch(() => null);
+    void checkout.start();
     return checkout.clear;
   }, []);
   return null;
 };
 
 const Root = ({ children }: { children: React.ReactNode }) => {
-  const { planId, planPeriod, subscriberType } = useCheckoutContext();
+  const { planId, planPeriod, for: _for } = useCheckoutContext();
 
   return (
     <CheckoutProvider
-      for={subscriberType === 'org' ? 'organization' : undefined}
+      for={_for}
       planId={
         // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
         planId!

packages/clerk-js/src/ui/components/Checkout/index.tsx

@@ -13,7 +13,7 @@ export const Checkout = (props: __internal_CheckoutProps) => {
   return (
     <Flow.Root flow='checkout'>
       <Flow.Part>
-        <SubscriberTypeContext.Provider value={props.subscriberType || 'user'}>
+        <SubscriberTypeContext.Provider value={props.for || 'user'}>
           <CheckoutContext.Provider
             value={{
               componentName: 'Checkout',

packages/clerk-js/src/ui/components/OrganizationProfile/OrganizationBillingPage.tsx

@@ -83,7 +83,7 @@ const OrganizationBillingPageInternal = withCardStateProvider(() => {
 
 export const OrganizationBillingPage = () => {
   return (
-    <SubscriberTypeContext.Provider value='org'>
+    <SubscriberTypeContext.Provider value='organization'>
       <OrganizationBillingPageInternal />
     </SubscriberTypeContext.Provider>
   );

packages/clerk-js/src/ui/components/OrganizationProfile/OrganizationPaymentAttemptPage.tsx

@@ -3,7 +3,7 @@ import { PaymentAttemptPage } from '../PaymentAttempts';
 
 export const OrganizationPaymentAttemptPage = () => {
   return (
-    <SubscriberTypeContext.Provider value='org'>
+    <SubscriberTypeContext.Provider value='organization'>
       <PaymentAttemptPage />
     </SubscriberTypeContext.Provider>
   );

packages/clerk-js/src/ui/components/OrganizationProfile/OrganizationPlansPage.tsx

@@ -53,7 +53,7 @@ const OrganizationPlansPageInternal = () => {
 
 export const OrganizationPlansPage = () => {
   return (
-    <SubscriberTypeContext.Provider value='org'>
+    <SubscriberTypeContext.Provider value='organization'>
       <OrganizationPlansPageInternal />
     </SubscriberTypeContext.Provider>
   );