chore(clerk-js): Replace useOrganization with useOrganizationContext within billing components (#7257)

Author: LauraBeatris

.changeset/cuddly-cougars-buy.md

@@ -0,0 +1,5 @@
+---
+'@clerk/clerk-js': patch
+---
+
+Internal change, not user-facing: Replace `useOrganization` with `useOrganizationContext` in billing components

packages/clerk-js/src/ui/components/PaymentAttempts/PaymentAttemptPage.tsx

@@ -1,4 +1,4 @@
-import { useClerk, useOrganization } from '@clerk/shared/react';
+import { useClerk, useOrganizationContext } from '@clerk/shared/react';
 import type { BillingSubscriptionItemResource } from '@clerk/shared/types';
 import useSWR from 'swr';
 
@@ -29,10 +29,11 @@ import { useRouter } from '../../router';
 export const PaymentAttemptPage = () => {
   const { params, navigate } = useRouter();
   const subscriberType = useSubscriberTypeContext();
-  const { organization } = useOrganization();
   const localizationRoot = useSubscriberTypeLocalizationRoot();
   const { t, translateError } = useLocalizations();
   const clerk = useClerk();
+  // Do not use `useOrganization` to avoid triggering the in-app enable organizations prompt in development instance
+  const organizationCtx = useOrganizationContext();
 
   const {
     data: paymentAttempt,
@@ -43,13 +44,13 @@ export const PaymentAttemptPage = () => {
       ? {
           type: 'payment-attempt',
           id: params.paymentAttemptId,
-          orgId: subscriberType === 'organization' ? organization?.id : undefined,
+          orgId: subscriberType === 'organization' ? organizationCtx?.organization?.id : undefined,
         }
       : null,
     () =>
       clerk.billing.getPaymentAttempt({
         id: params.paymentAttemptId,
-        orgId: subscriberType === 'organization' ? organization?.id : undefined,
+        orgId: subscriberType === 'organization' ? organizationCtx?.organization?.id : undefined,
       }),
   );
 

packages/clerk-js/src/ui/components/PaymentMethods/PaymentMethods.tsx

@@ -1,4 +1,4 @@
-import { useClerk, useOrganization } from '@clerk/shared/react';
+import { useClerk, useOrganizationContext } from '@clerk/shared/react';
 import type { BillingPaymentMethodResource } from '@clerk/shared/types';
 import { Fragment, useMemo, useRef } from 'react';
 
@@ -60,19 +60,20 @@ const RemoveScreen = ({
   const { close } = useActionContext();
   const card = useCardState();
   const subscriberType = useSubscriberTypeContext();
-  const { organization } = useOrganization();
   const localizationRoot = useSubscriberTypeLocalizationRoot();
   const ref = useRef(
     `${paymentMethod.paymentType === 'card' ? paymentMethod.cardType : paymentMethod.paymentType} ${paymentMethod.paymentType === 'card' ? `⋯ ${paymentMethod.last4}` : '-'}`,
   );
+  // Do not use `useOrganization` to avoid triggering the in-app enable organizations prompt in development instance
+  const organizationCtx = useOrganizationContext();
 
   if (!ref.current) {
     return null;
   }
 
   const removePaymentMethod = async () => {
     await paymentMethod
-      .remove({ orgId: subscriberType === 'organization' ? organization?.id : undefined })
+      .remove({ orgId: subscriberType === 'organization' ? organizationCtx?.organization?.id : undefined })
       .then(revalidate)
       .catch((error: Error) => {
         handleError(error, [], card.setError);
@@ -196,9 +197,10 @@ const PaymentMethodMenu = ({
 }) => {
   const { open } = useActionContext();
   const card = useCardState();
-  const { organization } = useOrganization();
   const subscriberType = useSubscriberTypeContext();
   const localizationRoot = useSubscriberTypeLocalizationRoot();
+  // Do not use `useOrganization` to avoid triggering the in-app enable organizations prompt in development instance
+  const organizationCtx = useOrganizationContext();
 
   const actions = [
     {
@@ -215,7 +217,7 @@ const PaymentMethodMenu = ({
       isDestructive: false,
       onClick: () => {
         paymentMethod
-          .makeDefault({ orgId: subscriberType === 'organization' ? organization?.id : undefined })
+          .makeDefault({ orgId: subscriberType === 'organization' ? organizationCtx?.organization?.id : undefined })
           .then(revalidate)
           .catch((error: Error) => {
             handleError(error, [], card.setError);

packages/clerk-js/src/ui/components/PricingTable/PricingTableDefault.tsx

@@ -1,4 +1,4 @@
-import { useClerk, useOrganization, useSession } from '@clerk/shared/react';
+import { useClerk, useOrganizationContext, useSession } from '@clerk/shared/react';
 import type { BillingPlanResource, BillingSubscriptionPlanPeriod, PricingTableProps } from '@clerk/shared/types';
 import * as React from 'react';
 
@@ -104,7 +104,8 @@ function Card(props: CardProps) {
   const { isSignedIn } = useSession();
   const { mode = 'mounted', ctaPosition: ctxCtaPosition } = usePricingTableContext();
   const subscriberType = useSubscriberTypeContext();
-  const { organization } = useOrganization();
+  // Do not use `useOrganization` to avoid triggering the in-app enable organizations prompt in development instance
+  const organizationCtx = useOrganizationContext();
 
   const ctaPosition = pricingTableProps.ctaPosition || ctxCtaPosition || 'bottom';
   const collapseFeatures = pricingTableProps.collapseFeatures || false;
@@ -137,7 +138,7 @@ function Card(props: CardProps) {
     plan,
     planPeriod,
     for: pricingTableProps.for,
-    hasActiveOrganization: !!organization,
+    hasActiveOrganization: !!organizationCtx?.organization,
   });
 
   return (

packages/clerk-js/src/ui/components/Statements/StatementPage.tsx

@@ -1,4 +1,4 @@
-import { useClerk, useOrganization } from '@clerk/shared/react';
+import { useClerk, useOrganizationContext } from '@clerk/shared/react';
 import useSWR from 'swr';
 
 import { Alert } from '@/ui/elements/Alert';
@@ -23,10 +23,11 @@ import { Statement } from './Statement';
 export const StatementPage = () => {
   const { params, navigate } = useRouter();
   const subscriberType = useSubscriberTypeContext();
-  const { organization } = useOrganization();
   const localizationRoot = useSubscriberTypeLocalizationRoot();
   const { t, translateError } = useLocalizations();
   const clerk = useClerk();
+  // Do not use `useOrganization` to avoid triggering the in-app enable organizations prompt in development instance
+  const organizationCtx = useOrganizationContext();
 
   const {
     data: statement,
@@ -37,13 +38,13 @@ export const StatementPage = () => {
       ? {
           type: 'statement',
           id: params.statementId,
-          orgId: subscriberType === 'organization' ? organization?.id : undefined,
+          orgId: subscriberType === 'organization' ? organizationCtx?.organization?.id : undefined,
         }
       : null,
     () =>
       clerk.billing.getStatement({
         id: params.statementId,
-        orgId: subscriberType === 'organization' ? organization?.id : undefined,
+        orgId: subscriberType === 'organization' ? organizationCtx?.organization?.id : undefined,
       }),
   );
 

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

@@ -1,4 +1,4 @@
-import { useClerk, useOrganization } from '@clerk/shared/react';
+import { useClerk, useOrganizationContext } from '@clerk/shared/react';
 import type {
   __internal_CheckoutProps,
   __internal_SubscriptionDetailsProps,
@@ -173,7 +173,6 @@ const SubscriptionDetailsInternal = (props: __internal_SubscriptionDetailsProps)
 
 const SubscriptionDetailsFooter = withCardStateProvider(() => {
   const subscriberType = useSubscriberTypeContext();
-  const { organization } = useOrganization();
   const { isLoading, error, setError, setLoading, setIdle } = useCardState();
   const {
     subscription: selectedSubscription,
@@ -183,6 +182,8 @@ const SubscriptionDetailsFooter = withCardStateProvider(() => {
   const { data: subscription } = useSubscription();
   const { setIsOpen } = useDrawerContext();
   const { onSubscriptionCancel } = useSubscriptionDetailsContext();
+  // Do not use `useOrganization` to avoid triggering the in-app enable organizations prompt in development instance
+  const organizationCtx = useOrganizationContext();
 
   const onOpenChange = useCallback((open: boolean) => setConfirmationOpen(open), [setConfirmationOpen]);
 
@@ -195,7 +196,7 @@ const SubscriptionDetailsFooter = withCardStateProvider(() => {
     setLoading();
 
     await selectedSubscription
-      .cancel({ orgId: subscriberType === 'organization' ? organization?.id : undefined })
+      .cancel({ orgId: subscriberType === 'organization' ? organizationCtx?.organization?.id : undefined })
       .then(() => {
         onSubscriptionCancel?.();
         if (setIsOpen) {
@@ -213,7 +214,7 @@ const SubscriptionDetailsFooter = withCardStateProvider(() => {
     setError,
     setLoading,
     subscriberType,
-    organization?.id,
+    organizationCtx?.organization?.id,
     onSubscriptionCancel,
     setIsOpen,
     setIdle,

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

@@ -5,7 +5,7 @@ import {
   __experimental_useStatements,
   __experimental_useSubscription,
   useClerk,
-  useOrganization,
+  useOrganizationContext,
   useSession,
 } from '@clerk/shared/react';
 import type {
@@ -32,19 +32,20 @@ export function normalizeFormatted(formatted: string) {
 
 const useBillingHookParams = () => {
   const subscriberType = useSubscriberTypeContext();
-  const { organization } = useOrganization();
   const allowBillingRoutes = useProtect(
     has =>
       has({
         permission: 'org:sys_billing:read',
       }) || has({ permission: 'org:sys_billing:manage' }),
   );
+  // Do not use `useOrganization` to avoid triggering the in-app enable organizations prompt in development instance
+  const organizationCtx = useOrganizationContext();
 
   return {
     for: subscriberType,
     keepPreviousData: true,
     // If the user is in an organization, only fetch billing data if they have the necessary permissions
-    enabled: subscriberType === 'organization' ? Boolean(organization) && allowBillingRoutes : true,
+    enabled: subscriberType === 'organization' ? Boolean(organizationCtx?.organization) && allowBillingRoutes : true,
   };
 };