fix: remove the need for the payerid from the client side

Author: l-armstrong

packages/clerk-js/src/core/modules/billing/namespace.ts

@@ -151,7 +151,7 @@ export class Billing implements BillingNamespace {
 
   getCreditBalance = async (params: GetCreditBalanceParams): Promise<BillingCreditBalanceResource> => {
     return await BaseResource._fetch({
-      path: Billing.path(`/payers/${params.payerId}/credits`, { orgId: params.orgId }),
+      path: Billing.path('/credits', { orgId: params.orgId }),
       method: 'GET',
     }).then(res => new BillingCreditBalance(res?.response as unknown as BillingCreditBalanceJSON));
   };
@@ -160,7 +160,7 @@ export class Billing implements BillingNamespace {
     params: GetCreditHistoryParams,
   ): Promise<ClerkPaginatedResponse<BillingCreditLedgerResource>> => {
     return await BaseResource._fetch({
-      path: Billing.path(`/payers/${params.payerId}/credits/history`, { orgId: params.orgId }),
+      path: Billing.path('/credits/history', { orgId: params.orgId }),
       method: 'GET',
     }).then(res => {
       const { data, total_count } = res?.response as unknown as {

packages/shared/src/react/hooks/useCreditBalance.tsx

@@ -17,7 +17,6 @@ const HOOK_NAME = 'useCreditBalance';
 
 export type UseCreditBalanceParams = {
   for?: ForPayerType;
-  payerId?: string;
   keepPreviousData?: boolean;
   enabled?: boolean;
 };
@@ -51,7 +50,6 @@ export function useCreditBalance(params?: UseCreditBalanceParams): CreditBalance
   }, [clerk]);
 
   const keepPreviousData = params?.keepPreviousData ?? false;
-  const payerId = params?.payerId;
 
   const [queryClient] = useClerkQueryClient();
 
@@ -65,15 +63,14 @@ export function useCreditBalance(params?: UseCreditBalanceParams): CreditBalance
       tracked: {
         userId: user?.id,
         orgId: safeOrgId,
-        payerId,
       },
       untracked: {
-        args: { payerId: payerId as string, orgId: safeOrgId },
+        args: { orgId: safeOrgId },
       },
     });
-  }, [user?.id, organization?.id, params?.for, payerId]);
+  }, [user?.id, organization?.id, params?.for]);
 
-  const queriesEnabled = Boolean(user?.id && billingEnabled && payerId);
+  const queriesEnabled = Boolean(user?.id && billingEnabled);
   useClearQueriesOnSignOut({
     isSignedOut: user === null,
     authenticated,

packages/shared/src/react/hooks/useCreditHistory.tsx

@@ -16,7 +16,6 @@ const HOOK_NAME = 'useCreditHistory';
 
 export type UseCreditHistoryParams = {
   for?: ForPayerType;
-  payerId?: string;
   enabled?: boolean;
 };
 
@@ -48,8 +47,6 @@ export function __internal_useCreditHistoryQuery(params?: UseCreditHistoryParams
     }
   }, [clerk]);
 
-  const payerId = params?.payerId;
-
   const [queryClient] = useClerkQueryClient();
 
   const { queryKey, invalidationKey, stableKey, authenticated } = useMemo(() => {
@@ -62,15 +59,14 @@ export function __internal_useCreditHistoryQuery(params?: UseCreditHistoryParams
       tracked: {
         userId: user?.id,
         orgId: safeOrgId,
-        payerId,
       },
       untracked: {
-        args: { payerId: payerId as string, orgId: safeOrgId },
+        args: { orgId: safeOrgId },
       },
     });
-  }, [user?.id, organization?.id, params?.for, payerId]);
+  }, [user?.id, organization?.id, params?.for]);
 
-  const queriesEnabled = Boolean(user?.id && billingEnabled && payerId && (params?.enabled ?? true));
+  const queriesEnabled = Boolean(user?.id && billingEnabled && (params?.enabled ?? true));
   useClearQueriesOnSignOut({
     isSignedOut: user === null,
     authenticated,

packages/shared/src/types/billing.ts

@@ -962,10 +962,6 @@ export type GetCreditBalanceParams = {
    * The ID of the Organization to get the credit balance for.
    */
   orgId?: string;
-  /**
-   * The ID of the payer to get the credit balance for.
-   */
-  payerId: string;
 };
 
 /**
@@ -976,10 +972,6 @@ export type GetCreditHistoryParams = {
    * The ID of the Organization to get the credit history for.
    */
   orgId?: string;
-  /**
-   * The ID of the payer to get the credit history for.
-   */
-  payerId: string;
 };
 
 /**

packages/ui/src/contexts/components/Plans.tsx

@@ -97,20 +97,12 @@ export const usePlans = (params?: { mode: 'cache' }) => {
 
 export const useCreditBalance = () => {
   const params = useBillingHookParams();
-  const { data: subscription } = useSubscription();
-  return __experimental_useCreditBalance({
-    ...params,
-    payerId: subscription?.payerId,
-  });
+  return __experimental_useCreditBalance(params);
 };
 
 export const useCreditHistory = () => {
   const params = useBillingHookParams();
-  const { data: subscription } = useSubscription();
-  return __internal_useCreditHistoryQuery({
-    ...params,
-    payerId: subscription?.payerId,
-  });
+  return __internal_useCreditHistoryQuery(params);
 };
 
 type HandleSelectPlanProps = {