diff --git a/.changeset/chubby-memes-pull.md b/.changeset/chubby-memes-pull.md new file mode 100644 index 00000000000..a9b7474b4ff --- /dev/null +++ b/.changeset/chubby-memes-pull.md @@ -0,0 +1,6 @@ +--- +'@clerk/localizations': patch +'@clerk/clerk-js': patch +--- + +Added a notice in tooltip when member no has permissions to manage billing for all manager related buttons diff --git a/packages/clerk-js/src/ui/components/PricingTable/PricingTableDefault.tsx b/packages/clerk-js/src/ui/components/PricingTable/PricingTableDefault.tsx index 871cc3eaa52..c34e0f3863c 100644 --- a/packages/clerk-js/src/ui/components/PricingTable/PricingTableDefault.tsx +++ b/packages/clerk-js/src/ui/components/PricingTable/PricingTableDefault.tsx @@ -1,7 +1,8 @@ -import { useClerk } from '@clerk/shared/react'; +import { useClerk, useSession } from '@clerk/shared/react'; import type { CommercePlanResource, CommerceSubscriptionPlanPeriod, PricingTableProps } from '@clerk/types'; import * as React from 'react'; +import { useProtect } from '../../common'; import { usePlansContext, usePricingTableContext, useSubscriberTypeContext } from '../../contexts'; import { Badge, @@ -17,7 +18,7 @@ import { Span, Text, } from '../../customizables'; -import { Switch } from '../../elements'; +import { Switch, Tooltip } from '../../elements'; import { Check, Plus } from '../../icons'; import { common, InternalThemeProvider } from '../../styledSystem'; import { colors, getClosestProfileScrollBox } from '../../utils'; @@ -97,6 +98,7 @@ interface CardProps { function Card(props: CardProps) { const { plan, planPeriod, setPlanPeriod, onSelect, props: pricingTableProps, isCompact = false } = props; const clerk = useClerk(); + const { isSignedIn } = useSession(); const { mode = 'mounted', ctaPosition: ctxCtaPosition } = usePricingTableContext(); const subscriberType = useSubscriberTypeContext(); @@ -104,6 +106,10 @@ function Card(props: CardProps) { const collapseFeatures = pricingTableProps.collapseFeatures || false; const { id, slug } = plan; + const canManageBilling = useProtect( + has => has({ permission: 'org:sys_billing:manage' }) || subscriberType === 'user', + ); + const { buttonPropsForPlan, upcomingSubscriptionsExist, activeOrUpcomingSubscription } = usePlansContext(); const showPlanDetails = (event?: React.MouseEvent) => { @@ -236,15 +242,24 @@ function Card(props: CardProps) { })} /> ) : ( -