Add comments to clarify context usage

Author: LauraBeatris

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

@@ -29,10 +29,11 @@ import { useRouter } from '../../router';
 export const PaymentAttemptPage = () => {
   const { params, navigate } = useRouter();
   const subscriberType = useSubscriberTypeContext();
-  const organizationCtx = useOrganizationContext();
   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,

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

@@ -60,11 +60,12 @@ const RemoveScreen = ({
   const { close } = useActionContext();
   const card = useCardState();
   const subscriberType = useSubscriberTypeContext();
-  const organizationCtx = useOrganizationContext();
   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;
@@ -196,9 +197,10 @@ const PaymentMethodMenu = ({
 }) => {
   const { open } = useActionContext();
   const card = useCardState();
-  const organizationCtx = useOrganizationContext();
   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 = [
     {

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

@@ -104,6 +104,7 @@ function Card(props: CardProps) {
   const { isSignedIn } = useSession();
   const { mode = 'mounted', ctaPosition: ctxCtaPosition } = usePricingTableContext();
   const subscriberType = useSubscriberTypeContext();
+  // 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';

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

@@ -23,10 +23,11 @@ import { Statement } from './Statement';
 export const StatementPage = () => {
   const { params, navigate } = useRouter();
   const subscriberType = useSubscriberTypeContext();
-  const organizationCtx = useOrganizationContext();
   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,

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

@@ -173,7 +173,6 @@ const SubscriptionDetailsInternal = (props: __internal_SubscriptionDetailsProps)
 
 const SubscriptionDetailsFooter = withCardStateProvider(() => {
   const subscriberType = useSubscriberTypeContext();
-  const organizationCtx = useOrganizationContext();
   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]);
 

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

@@ -32,13 +32,14 @@ export function normalizeFormatted(formatted: string) {
 
 const useBillingHookParams = () => {
   const subscriberType = useSubscriberTypeContext();
-  const organizationCtx = useOrganizationContext();
   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,