diff --git a/.changeset/cuddly-cougars-buy.md b/.changeset/cuddly-cougars-buy.md new file mode 100644 index 00000000000..0c3575cfecd --- /dev/null +++ b/.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 diff --git a/packages/clerk-js/src/ui/components/PaymentAttempts/PaymentAttemptPage.tsx b/packages/clerk-js/src/ui/components/PaymentAttempts/PaymentAttemptPage.tsx index 805940db2be..8574c783daf 100644 --- a/packages/clerk-js/src/ui/components/PaymentAttempts/PaymentAttemptPage.tsx +++ b/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, }), ); diff --git a/packages/clerk-js/src/ui/components/PaymentMethods/PaymentMethods.tsx b/packages/clerk-js/src/ui/components/PaymentMethods/PaymentMethods.tsx index 7b53795ce9d..dec38b4c5ec 100644 --- a/packages/clerk-js/src/ui/components/PaymentMethods/PaymentMethods.tsx +++ b/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,11 +60,12 @@ 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; @@ -72,7 +73,7 @@ const RemoveScreen = ({ 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); diff --git a/packages/clerk-js/src/ui/components/PricingTable/PricingTableDefault.tsx b/packages/clerk-js/src/ui/components/PricingTable/PricingTableDefault.tsx index 8a17eb8f883..879ed453c3c 100644 --- a/packages/clerk-js/src/ui/components/PricingTable/PricingTableDefault.tsx +++ b/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 ( diff --git a/packages/clerk-js/src/ui/components/Statements/StatementPage.tsx b/packages/clerk-js/src/ui/components/Statements/StatementPage.tsx index 6c64b7d861b..03b6f933568 100644 --- a/packages/clerk-js/src/ui/components/Statements/StatementPage.tsx +++ b/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, }), ); diff --git a/packages/clerk-js/src/ui/components/SubscriptionDetails/index.tsx b/packages/clerk-js/src/ui/components/SubscriptionDetails/index.tsx index 730d50c4b49..3f88b8f46ae 100644 --- a/packages/clerk-js/src/ui/components/SubscriptionDetails/index.tsx +++ b/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, diff --git a/packages/clerk-js/src/ui/contexts/components/Plans.tsx b/packages/clerk-js/src/ui/contexts/components/Plans.tsx index 577d31582d7..834b37fdb06 100644 --- a/packages/clerk-js/src/ui/contexts/components/Plans.tsx +++ b/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, }; };