feat(clerk-js,localization): Add notice when member does not have permissions to manage billing#5852

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
alexcarpenter merged 11 commits into from
May 8, 2025
Merged

feat(clerk-js,localization): Add notice when member does not have permissions to manage billing #5852

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
0d08876
feat(clerk-js,localization): Add tooltip to buttons when member does …
octoper May 6, 2025
86210c8
chore(repo): Add changeset
octoper May 6, 2025
c556db8
wip
octoper May 6, 2025
f8b04e8
wip
alexcarpenter May 6, 2025
13af6cf
cleanup
octoper May 6, 2025
c9cb7ad
cleanup
octoper May 6, 2025
457b2bd
feat(clerk-js): Add tooltip to action button in pricing table when no…
octoper May 7, 2025
2179b4c
fix(clerk-js): Fix tooltip showing when user was signed-out
octoper May 7, 2025
e224999
cleanup
octoper May 7, 2025
aeb0635
Merge branch 'main' into vaggelis/add-tooltips-with-reason-if-no-perm…
octoper May 7, 2025
155b55d
Merge branch 'main' into vaggelis/add-tooltips-with-reason-if-no-perm…
octoper May 8, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 6 additions & 0 deletions .changeset/chubby-memes-pull.md
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -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
37 changes: 26 additions & 11 deletions packages/clerk-js/src/ui/components/PricingTable/PricingTableDefault.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -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,
Expand All@@ -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';
Expand DownExpand Up@@ -97,13 +98,18 @@ 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();

const ctaPosition = pricingTableProps.ctaPosition || ctxCtaPosition || 'bottom';
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<HTMLElement>) => {
Expand DownExpand Up@@ -236,15 +242,24 @@ function Card(props: CardProps) {
})}
/>
) : (
<Button
elementDescriptor={descriptors.pricingTableCardFooterButton}
block
textVariant={isCompact ? 'buttonSmall' : 'buttonLarge'}
{...buttonPropsForPlan({ plan, isCompact, selectedPlanPeriod: planPeriod })}
onClick={event => {
onSelect(plan, event);
}}
/>
<Tooltip.Root>
<Tooltip.Trigger sx={{ width: '100%' }}>
<Button
elementDescriptor={descriptors.pricingTableCardFooterButton}
block
textVariant={isCompact ? 'buttonSmall' : 'buttonLarge'}
{...buttonPropsForPlan({ plan, isCompact, selectedPlanPeriod: planPeriod })}
onClick={event => {
onSelect(plan, event);
}}
/>
</Tooltip.Trigger>
{isSignedIn && !canManageBilling && (
<Tooltip.Content
text={localizationKeys('organizationProfile.billingPage.alerts.noPermissionsToManageBilling')}
/>
)}
</Tooltip.Root>
)}
</Box>
) : (
Expand Down
4 changes: 3 additions & 1 deletion packages/clerk-js/src/ui/contexts/components/Plans.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -208,6 +208,7 @@ export const usePlansContext = () => {
variant: 'bordered' | 'solid';
colorScheme: 'secondary' | 'primary';
isDisabled: boolean;
disabled: boolean;
} => {
const subscription = sub ?? (plan ? activeOrUpcomingSubscription(plan) : undefined);
let _selectedPlanPeriod = selectedPlanPeriod;
Expand DownExpand Up@@ -235,9 +236,10 @@ export const usePlansContext = () => {
variant: isCompact ? 'bordered' : 'solid',
colorScheme: isCompact ? 'secondary' : 'primary',
isDisabled: !canManageBilling,
disabled: !canManageBilling,
};
},
[activeOrUpcomingSubscription],
[activeOrUpcomingSubscription, canManageBilling, ctx.subscriptions],
);

const captionForSubscription = useCallback((subscription: CommerceSubscriptionResource) => {
Expand Down
46 changes: 29 additions & 17 deletions packages/clerk-js/src/ui/elements/Tooltip.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -18,6 +18,7 @@ import * as React from 'react';

import { Box, descriptors, type LocalizationKey, Span, Text, useAppearance } from '../customizables';
import { usePrefersReducedMotion } from '../hooks';
import type { ThemableCssProp } from '../styledSystem';

interface TooltipOptions {
initialOpen?: boolean;
Expand DownExpand Up@@ -123,8 +124,12 @@ function Root({ children, ...options }: { children: React.ReactNode } & TooltipO
return <TooltipContext.Provider value={tooltip}>{children}</TooltipContext.Provider>;
}

const Trigger = React.forwardRef<HTMLElement, React.HTMLProps<HTMLElement>>(function TooltipTrigger(
{ children, ...props },
type TriggerProps = React.HTMLProps<HTMLElement> & {
sx?: ThemableCssProp;
};

const Trigger = React.forwardRef<HTMLElement, TriggerProps>(function TooltipTrigger(
{ children, sx, ...props },
propRef,
) {
const context = useTooltipContext();
Expand All@@ -135,7 +140,7 @@ const Trigger = React.forwardRef<HTMLElement, React.HTMLProps<HTMLElement>>(func
return null;
}

// If the child is disabled, wrap it in a span to handle hover events
// If the child is disabled, wrap it in a span to handle focus events
if (children.props.isDisabled || children.props.disabled) {
return (
<Span
Expand All@@ -144,12 +149,15 @@ const Trigger = React.forwardRef<HTMLElement, React.HTMLProps<HTMLElement>>(func
...props,
})}
data-state={context.open ? 'open' : 'closed'}
sx={{
width: 'fit-content',
display: 'inline-block',
cursor: 'not-allowed',
outline: 'none',
}}
sx={[
{
width: 'fit-content',
display: 'inline-block',
cursor: 'not-allowed',
outline: 'none',
},
sx,
]}
tabIndex={0}
>
{children}
Expand All@@ -172,8 +180,9 @@ const Content = React.forwardRef<
HTMLDivElement,
React.HTMLProps<HTMLDivElement> & {
text: string | LocalizationKey;
sx?: ThemableCssProp;
}
>(function TooltipContent({ style, text, ...props }, propRef) {
>(function TooltipContent({ style, text, sx, ...props }, propRef) {
const context = useTooltipContext();
const ref = useMergeRefs([context.refs.setFloating, propRef]);

Expand All@@ -193,13 +202,16 @@ const Content = React.forwardRef<
<Box
elementDescriptor={descriptors.tooltipContent}
style={context.transitionStyles}
sx={t => ({
paddingBlock: t.space.$1,
paddingInline: t.space.$1x5,
borderRadius: t.radii.$md,
backgroundColor: t.colors.$primary500,
maxWidth: t.sizes.$60,
})}
sx={[
t => ({
paddingBlock: t.space.$1,
paddingInline: t.space.$1x5,
borderRadius: t.radii.$md,
backgroundColor: t.colors.$primary500,
maxWidth: t.sizes.$60,
}),
sx,
]}
>
<Text
elementDescriptor={descriptors.tooltipText}
Expand Down
2 changes: 1 addition & 1 deletion packages/localizations/src/en-US.ts
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -153,7 +153,7 @@ export const enUS: LocalizationResource = {
badge__unverified: 'Unverified',
billingPage: {
alerts: {
noPermissionsToManageBilling: 'You do not have permissions to manage billing for this account.',
noPermissionsToManageBilling: 'You do not have permissions to manage billing for this organization.',
},
paymentSourcesSection: {
actionLabel__default: 'Make default',
Expand Down
, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Add copy buttons to all 
 blocks\n(function() {\n function addCopyButtons() {\n document.querySelectorAll('pre code').forEach(function(codeBlock) {\n if (codeBlock.parentElement.hasAttribute('data-copy-added')) return;\n codeBlock.parentElement.setAttribute('data-copy-added', 'true');\n \n var btn = document.createElement('button');\n btn.textContent = 'Copy';\n btn.style.cssText = 'position:absolute;top:4px;right:4px;padding:2px 8px;font-size:11px;background:#4ecdc4;border:none;border-radius:4px;color:#1a1a2e;cursor:pointer;opacity:0.7;transition:opacity 0.2s;';\n btn.onmouseover = function() { this.style.opacity = '1'; };\n btn.onmouseout = function() { this.style.opacity = '0.7'; };\n btn.onclick = function() {\n navigator.clipboard.writeText(codeBlock.textContent).then(function() {\n btn.textContent = 'Copied!';\n setTimeout(function() { btn.textContent = 'Copy'; }, 1500);\n });\n };\n codeBlock.parentElement.style.position = 'relative';\n codeBlock.parentElement.appendChild(btn);\n });\n }\n \n addCopyButtons();\n \n // Re-run on dynamic content\n var observer = new MutationObserver(addCopyButtons);\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Add Copy Buttons to Code Blocks");
}
} catch(__e) { console.warn('[Userscript:Add Copy Buttons to Code Blocks]', __e); }
})();
(function(){
try {
var __m = "github.com";
var __re = new RegExp('^' + "github\\.com" + '

Skip to content
feat(clerk-js,localization): Add notice when member does not have permissions to manage billing#5852

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

 Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and
privacy statement. We’ll occasionally send you account related emails.

Already on GitHub?
Sign in
to your account

 Merged

alexcarpenter
merged 11 commits into

from

May 8, 2025
 Merged


feat(clerk-js,localization): Add notice when member does not have permissions to manage billing
#5852
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


11 commits


Select commit
Hold shift + click to select a range
0d08876

feat(clerk-js,localization): Add tooltip to buttons when member does …


octoper May 6, 2025
86210c8

chore(repo): Add changeset


octoper May 6, 2025
c556db8

wip


octoper May 6, 2025
f8b04e8

wip


alexcarpenter May 6, 2025
13af6cf

cleanup


octoper May 6, 2025
c9cb7ad

cleanup


octoper May 6, 2025
457b2bd

feat(clerk-js): Add tooltip to action button in pricing table when no…


octoper May 7, 2025
2179b4c

fix(clerk-js): Fix tooltip showing when user was signed-out


octoper May 7, 2025
e224999

cleanup


octoper May 7, 2025
aeb0635

Merge branch 'main' into vaggelis/add-tooltips-with-reason-if-no-perm…


octoper May 7, 2025
155b55d

Merge branch 'main' into vaggelis/add-tooltips-with-reason-if-no-perm…


octoper May 8, 2025

File filter

Filter by extension
Filter by extension
Conversations

Failed to load comments. 
Loading
Jump to

Jump to file


Failed to load files. 
Loading
 Diff view

 Diff view


6 changes: 6 additions & 0 deletions
.changeset/chubby-memes-pull.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -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

37 changes: 26 additions & 11 deletions
packages/clerk-js/src/ui/components/PricingTable/PricingTableDefault.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -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,
Expand All@@ -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';
Expand DownExpand Up@@ -97,13 +98,18 @@ 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();

 const ctaPosition = pricingTableProps.ctaPosition || ctxCtaPosition || 'bottom';
 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<HTMLElement>) => {
Expand DownExpand Up@@ -236,15 +242,24 @@ function Card(props: CardProps) {
 })}
 />
 ) : (
 <Button
 elementDescriptor={descriptors.pricingTableCardFooterButton}
 block
 textVariant={isCompact ? 'buttonSmall' : 'buttonLarge'}
 {...buttonPropsForPlan({ plan, isCompact, selectedPlanPeriod: planPeriod })}
 onClick={event => {
 onSelect(plan, event);
 }}
 />
 <Tooltip.Root>
 <Tooltip.Trigger sx={{ width: '100%' }}>
 <Button
 elementDescriptor={descriptors.pricingTableCardFooterButton}
 block
 textVariant={isCompact ? 'buttonSmall' : 'buttonLarge'}
 {...buttonPropsForPlan({ plan, isCompact, selectedPlanPeriod: planPeriod })}
 onClick={event => {
 onSelect(plan, event);
 }}
 />
 </Tooltip.Trigger>
 {isSignedIn && !canManageBilling && (
 <Tooltip.Content
 text={localizationKeys('organizationProfile.billingPage.alerts.noPermissionsToManageBilling')}
 />
 )}
 </Tooltip.Root>
 )}
 </Box>
 ) : (
Expand Down

4 changes: 3 additions & 1 deletion
packages/clerk-js/src/ui/contexts/components/Plans.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -208,6 +208,7 @@ export const usePlansContext = () => {
 variant: 'bordered' | 'solid';
 colorScheme: 'secondary' | 'primary';
 isDisabled: boolean;
 disabled: boolean;
 } => {
 const subscription = sub ?? (plan ? activeOrUpcomingSubscription(plan) : undefined);
 let _selectedPlanPeriod = selectedPlanPeriod;
Expand DownExpand Up@@ -235,9 +236,10 @@ export const usePlansContext = () => {
 variant: isCompact ? 'bordered' : 'solid',
 colorScheme: isCompact ? 'secondary' : 'primary',
 isDisabled: !canManageBilling,
 disabled: !canManageBilling,
 };
 },
 [activeOrUpcomingSubscription],
 [activeOrUpcomingSubscription, canManageBilling, ctx.subscriptions],
 );

 const captionForSubscription = useCallback((subscription: CommerceSubscriptionResource) => {
Expand Down

46 changes: 29 additions & 17 deletions
packages/clerk-js/src/ui/elements/Tooltip.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -18,6 +18,7 @@ import * as React from 'react';

import { Box, descriptors, type LocalizationKey, Span, Text, useAppearance } from '../customizables';
import { usePrefersReducedMotion } from '../hooks';
import type { ThemableCssProp } from '../styledSystem';

interface TooltipOptions {
 initialOpen?: boolean;
Expand DownExpand Up@@ -123,8 +124,12 @@ function Root({ children, ...options }: { children: React.ReactNode } & TooltipO
 return <TooltipContext.Provider value={tooltip}>{children}</TooltipContext.Provider>;
}

const Trigger = React.forwardRef<HTMLElement, React.HTMLProps<HTMLElement>>(function TooltipTrigger(
 { children, ...props },
type TriggerProps = React.HTMLProps<HTMLElement> & {
 sx?: ThemableCssProp;
};

const Trigger = React.forwardRef<HTMLElement, TriggerProps>(function TooltipTrigger(
 { children, sx, ...props },
 propRef,
) {
 const context = useTooltipContext();
Expand All@@ -135,7 +140,7 @@ const Trigger = React.forwardRef<HTMLElement, React.HTMLProps<HTMLElement>>(func
 return null;
 }

 // If the child is disabled, wrap it in a span to handle hover events
 // If the child is disabled, wrap it in a span to handle focus events
 if (children.props.isDisabled || children.props.disabled) {
 return (
 <Span
Expand All@@ -144,12 +149,15 @@ const Trigger = React.forwardRef<HTMLElement, React.HTMLProps<HTMLElement>>(func
 ...props,
 })}
 data-state={context.open ? 'open' : 'closed'}
 sx={{
 width: 'fit-content',
 display: 'inline-block',
 cursor: 'not-allowed',
 outline: 'none',
 }}
 sx={[
 {
 width: 'fit-content',
 display: 'inline-block',
 cursor: 'not-allowed',
 outline: 'none',
 },
 sx,
 ]}
 tabIndex={0}
 >
 {children}
Expand All@@ -172,8 +180,9 @@ const Content = React.forwardRef<
 HTMLDivElement,
 React.HTMLProps<HTMLDivElement> & {
 text: string | LocalizationKey;
 sx?: ThemableCssProp;
 }
>(function TooltipContent({ style, text, ...props }, propRef) {
>(function TooltipContent({ style, text, sx, ...props }, propRef) {
 const context = useTooltipContext();
 const ref = useMergeRefs([context.refs.setFloating, propRef]);

Expand All@@ -193,13 +202,16 @@ const Content = React.forwardRef<
 <Box
 elementDescriptor={descriptors.tooltipContent}
 style={context.transitionStyles}
 sx={t => ({
 paddingBlock: t.space.$1,
 paddingInline: t.space.$1x5,
 borderRadius: t.radii.$md,
 backgroundColor: t.colors.$primary500,
 maxWidth: t.sizes.$60,
 })}
 sx={[
 t => ({
 paddingBlock: t.space.$1,
 paddingInline: t.space.$1x5,
 borderRadius: t.radii.$md,
 backgroundColor: t.colors.$primary500,
 maxWidth: t.sizes.$60,
 }),
 sx,
 ]}
 >
 <Text
 elementDescriptor={descriptors.tooltipText}
Expand Down

2 changes: 1 addition & 1 deletion
packages/localizations/src/en-US.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -153,7 +153,7 @@ export const enUS: LocalizationResource = {
 badge__unverified: 'Unverified',
 billingPage: {
 alerts: {
 noPermissionsToManageBilling: 'You do not have permissions to manage billing for this account.',
 noPermissionsToManageBilling: 'You do not have permissions to manage billing for this organization.',
 },
 paymentSourcesSection: {
 actionLabel__default: 'Make default',
Expand Down

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Force GitHub README to respect dark mode\n(function() {\n var style = document.createElement('style');\n style.textContent = '\n .markdown-body {\n color-scheme: dark light;\n }\n .markdown-body pre { background: #161b22 !important; }\n .markdown-body code { background: rgba(110, 118, 129, 0.4) !important; }\n .markdown-body table th, .markdown-body table td { border-color: #30363d !important; }\n .markdown-body img { background: #0d1117; }\n .markdown-body blockquote { border-left-color: #8b949e; }\n .markdown-body hr { border-color: #30363d; }\n ';\n document.head.appendChild(style);\n})();", "GitHub Dark Mode README Fix");
}
} catch(__e) { console.warn('[Userscript:GitHub Dark Mode README Fix]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
feat(clerk-js,localization): Add notice when member does not have permissions to manage billing#5852

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

 Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and
privacy statement. We’ll occasionally send you account related emails.

Already on GitHub?
Sign in
to your account

 Merged

alexcarpenter
merged 11 commits into

from

May 8, 2025
 Merged


feat(clerk-js,localization): Add notice when member does not have permissions to manage billing
#5852
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


11 commits


Select commit
Hold shift + click to select a range
0d08876

feat(clerk-js,localization): Add tooltip to buttons when member does …


octoper May 6, 2025
86210c8

chore(repo): Add changeset


octoper May 6, 2025
c556db8

wip


octoper May 6, 2025
f8b04e8

wip


alexcarpenter May 6, 2025
13af6cf

cleanup


octoper May 6, 2025
c9cb7ad

cleanup


octoper May 6, 2025
457b2bd

feat(clerk-js): Add tooltip to action button in pricing table when no…


octoper May 7, 2025
2179b4c

fix(clerk-js): Fix tooltip showing when user was signed-out


octoper May 7, 2025
e224999

cleanup


octoper May 7, 2025
aeb0635

Merge branch 'main' into vaggelis/add-tooltips-with-reason-if-no-perm…


octoper May 7, 2025
155b55d

Merge branch 'main' into vaggelis/add-tooltips-with-reason-if-no-perm…


octoper May 8, 2025

File filter

Filter by extension
Filter by extension
Conversations

Failed to load comments. 
Loading
Jump to

Jump to file


Failed to load files. 
Loading
 Diff view

 Diff view


6 changes: 6 additions & 0 deletions
.changeset/chubby-memes-pull.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -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

37 changes: 26 additions & 11 deletions
packages/clerk-js/src/ui/components/PricingTable/PricingTableDefault.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -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,
Expand All@@ -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';
Expand DownExpand Up@@ -97,13 +98,18 @@ 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();

 const ctaPosition = pricingTableProps.ctaPosition || ctxCtaPosition || 'bottom';
 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<HTMLElement>) => {
Expand DownExpand Up@@ -236,15 +242,24 @@ function Card(props: CardProps) {
 })}
 />
 ) : (
 <Button
 elementDescriptor={descriptors.pricingTableCardFooterButton}
 block
 textVariant={isCompact ? 'buttonSmall' : 'buttonLarge'}
 {...buttonPropsForPlan({ plan, isCompact, selectedPlanPeriod: planPeriod })}
 onClick={event => {
 onSelect(plan, event);
 }}
 />
 <Tooltip.Root>
 <Tooltip.Trigger sx={{ width: '100%' }}>
 <Button
 elementDescriptor={descriptors.pricingTableCardFooterButton}
 block
 textVariant={isCompact ? 'buttonSmall' : 'buttonLarge'}
 {...buttonPropsForPlan({ plan, isCompact, selectedPlanPeriod: planPeriod })}
 onClick={event => {
 onSelect(plan, event);
 }}
 />
 </Tooltip.Trigger>
 {isSignedIn && !canManageBilling && (
 <Tooltip.Content
 text={localizationKeys('organizationProfile.billingPage.alerts.noPermissionsToManageBilling')}
 />
 )}
 </Tooltip.Root>
 )}
 </Box>
 ) : (
Expand Down

4 changes: 3 additions & 1 deletion
packages/clerk-js/src/ui/contexts/components/Plans.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -208,6 +208,7 @@ export const usePlansContext = () => {
 variant: 'bordered' | 'solid';
 colorScheme: 'secondary' | 'primary';
 isDisabled: boolean;
 disabled: boolean;
 } => {
 const subscription = sub ?? (plan ? activeOrUpcomingSubscription(plan) : undefined);
 let _selectedPlanPeriod = selectedPlanPeriod;
Expand DownExpand Up@@ -235,9 +236,10 @@ export const usePlansContext = () => {
 variant: isCompact ? 'bordered' : 'solid',
 colorScheme: isCompact ? 'secondary' : 'primary',
 isDisabled: !canManageBilling,
 disabled: !canManageBilling,
 };
 },
 [activeOrUpcomingSubscription],
 [activeOrUpcomingSubscription, canManageBilling, ctx.subscriptions],
 );

 const captionForSubscription = useCallback((subscription: CommerceSubscriptionResource) => {
Expand Down

46 changes: 29 additions & 17 deletions
packages/clerk-js/src/ui/elements/Tooltip.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -18,6 +18,7 @@ import * as React from 'react';

import { Box, descriptors, type LocalizationKey, Span, Text, useAppearance } from '../customizables';
import { usePrefersReducedMotion } from '../hooks';
import type { ThemableCssProp } from '../styledSystem';

interface TooltipOptions {
 initialOpen?: boolean;
Expand DownExpand Up@@ -123,8 +124,12 @@ function Root({ children, ...options }: { children: React.ReactNode } & TooltipO
 return <TooltipContext.Provider value={tooltip}>{children}</TooltipContext.Provider>;
}

const Trigger = React.forwardRef<HTMLElement, React.HTMLProps<HTMLElement>>(function TooltipTrigger(
 { children, ...props },
type TriggerProps = React.HTMLProps<HTMLElement> & {
 sx?: ThemableCssProp;
};

const Trigger = React.forwardRef<HTMLElement, TriggerProps>(function TooltipTrigger(
 { children, sx, ...props },
 propRef,
) {
 const context = useTooltipContext();
Expand All@@ -135,7 +140,7 @@ const Trigger = React.forwardRef<HTMLElement, React.HTMLProps<HTMLElement>>(func
 return null;
 }

 // If the child is disabled, wrap it in a span to handle hover events
 // If the child is disabled, wrap it in a span to handle focus events
 if (children.props.isDisabled || children.props.disabled) {
 return (
 <Span
Expand All@@ -144,12 +149,15 @@ const Trigger = React.forwardRef<HTMLElement, React.HTMLProps<HTMLElement>>(func
 ...props,
 })}
 data-state={context.open ? 'open' : 'closed'}
 sx={{
 width: 'fit-content',
 display: 'inline-block',
 cursor: 'not-allowed',
 outline: 'none',
 }}
 sx={[
 {
 width: 'fit-content',
 display: 'inline-block',
 cursor: 'not-allowed',
 outline: 'none',
 },
 sx,
 ]}
 tabIndex={0}
 >
 {children}
Expand All@@ -172,8 +180,9 @@ const Content = React.forwardRef<
 HTMLDivElement,
 React.HTMLProps<HTMLDivElement> & {
 text: string | LocalizationKey;
 sx?: ThemableCssProp;
 }
>(function TooltipContent({ style, text, ...props }, propRef) {
>(function TooltipContent({ style, text, sx, ...props }, propRef) {
 const context = useTooltipContext();
 const ref = useMergeRefs([context.refs.setFloating, propRef]);

Expand All@@ -193,13 +202,16 @@ const Content = React.forwardRef<
 <Box
 elementDescriptor={descriptors.tooltipContent}
 style={context.transitionStyles}
 sx={t => ({
 paddingBlock: t.space.$1,
 paddingInline: t.space.$1x5,
 borderRadius: t.radii.$md,
 backgroundColor: t.colors.$primary500,
 maxWidth: t.sizes.$60,
 })}
 sx={[
 t => ({
 paddingBlock: t.space.$1,
 paddingInline: t.space.$1x5,
 borderRadius: t.radii.$md,
 backgroundColor: t.colors.$primary500,
 maxWidth: t.sizes.$60,
 }),
 sx,
 ]}
 >
 <Text
 elementDescriptor={descriptors.tooltipText}
Expand Down

2 changes: 1 addition & 1 deletion
packages/localizations/src/en-US.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -153,7 +153,7 @@ export const enUS: LocalizationResource = {
 badge__unverified: 'Unverified',
 billingPage: {
 alerts: {
 noPermissionsToManageBilling: 'You do not have permissions to manage billing for this account.',
 noPermissionsToManageBilling: 'You do not have permissions to manage billing for this organization.',
 },
 paymentSourcesSection: {
 actionLabel__default: 'Make default',
Expand Down

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Highlight search terms from Google/DuckDuckGo/Bing referrer\n(function() {\n var ref = document.referrer;\n var terms = [];\n \n if (ref.includes('google.com') || ref.includes('duckduckgo.com') || ref.includes('bing.com')) {\n var url = new URL(ref);\n var q = url.searchParams.get('q') || url.searchParams.get('p');\n if (q) {\n terms = q.split(/\\s+/).filter(function(t) { return t.length > 2; });\n }\n }\n \n if (terms.length === 0) return;\n \n var style = document.createElement('style');\n style.textContent = '.userscript-highlight { background: #fbbf24; color: #1a1a2e; padding: 1px 3px; border-radius: 2px; }';\n document.head.appendChild(style);\n \n function highlight(node) {\n if (node.nodeType === 3) { // text node\n var text = node.textContent;\n var found = false;\n terms.forEach(function(term) {\n var regex = new RegExp('(' + term.replace(/[.*+?^${}()|[\\]\\\\]/g, '\\\\') + ')', 'gi');\n if (regex.test(text)) {\n found = true;\n var frag = document.createDocumentFragment();\n var parts = text.split(regex);\n parts.forEach(function(part, i) {\n if (i % 2 === 0) {\n frag.appendChild(document.createTextNode(part));\n } else {\n var span = document.createElement('span');\n span.className = 'userscript-highlight';\n span.textContent = part;\n frag.appendChild(span);\n }\n });\n node.parentNode.replaceChild(frag, node);\n }\n });\n } else if (node.nodeType === 1 && node.childNodes) { // element\n var skipTags = ['SCRIPT', 'STYLE', 'NOSCRIPT', 'TEXTAREA', 'INPUT', 'SELECT'];\n if (!skipTags.includes(node.tagName)) {\n Array.from(node.childNodes).forEach(highlight);\n }\n }\n }\n \n highlight(document.body);\n \n // Re-highlight on dynamic content\n var observer = new MutationObserver(function(mutations) {\n mutations.forEach(function(m) {\n m.addedNodes.forEach(function(node) {\n if (node.nodeType === 1 || node.nodeType === 3) highlight(node);\n });\n });\n });\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Highlight Search Terms");
}
} catch(__e) { console.warn('[Userscript:Highlight Search Terms]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
feat(clerk-js,localization): Add notice when member does not have permissions to manage billing#5852

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

 Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and
privacy statement. We’ll occasionally send you account related emails.

Already on GitHub?
Sign in
to your account

 Merged

alexcarpenter
merged 11 commits into

from

May 8, 2025
 Merged


feat(clerk-js,localization): Add notice when member does not have permissions to manage billing
#5852
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


11 commits


Select commit
Hold shift + click to select a range
0d08876

feat(clerk-js,localization): Add tooltip to buttons when member does …


octoper May 6, 2025
86210c8

chore(repo): Add changeset


octoper May 6, 2025
c556db8

wip


octoper May 6, 2025
f8b04e8

wip


alexcarpenter May 6, 2025
13af6cf

cleanup


octoper May 6, 2025
c9cb7ad

cleanup


octoper May 6, 2025
457b2bd

feat(clerk-js): Add tooltip to action button in pricing table when no…


octoper May 7, 2025
2179b4c

fix(clerk-js): Fix tooltip showing when user was signed-out


octoper May 7, 2025
e224999

cleanup


octoper May 7, 2025
aeb0635

Merge branch 'main' into vaggelis/add-tooltips-with-reason-if-no-perm…


octoper May 7, 2025
155b55d

Merge branch 'main' into vaggelis/add-tooltips-with-reason-if-no-perm…


octoper May 8, 2025

File filter

Filter by extension
Filter by extension
Conversations

Failed to load comments. 
Loading
Jump to

Jump to file


Failed to load files. 
Loading
 Diff view

 Diff view


6 changes: 6 additions & 0 deletions
.changeset/chubby-memes-pull.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -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

37 changes: 26 additions & 11 deletions
packages/clerk-js/src/ui/components/PricingTable/PricingTableDefault.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -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,
Expand All@@ -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';
Expand DownExpand Up@@ -97,13 +98,18 @@ 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();

 const ctaPosition = pricingTableProps.ctaPosition || ctxCtaPosition || 'bottom';
 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<HTMLElement>) => {
Expand DownExpand Up@@ -236,15 +242,24 @@ function Card(props: CardProps) {
 })}
 />
 ) : (
 <Button
 elementDescriptor={descriptors.pricingTableCardFooterButton}
 block
 textVariant={isCompact ? 'buttonSmall' : 'buttonLarge'}
 {...buttonPropsForPlan({ plan, isCompact, selectedPlanPeriod: planPeriod })}
 onClick={event => {
 onSelect(plan, event);
 }}
 />
 <Tooltip.Root>
 <Tooltip.Trigger sx={{ width: '100%' }}>
 <Button
 elementDescriptor={descriptors.pricingTableCardFooterButton}
 block
 textVariant={isCompact ? 'buttonSmall' : 'buttonLarge'}
 {...buttonPropsForPlan({ plan, isCompact, selectedPlanPeriod: planPeriod })}
 onClick={event => {
 onSelect(plan, event);
 }}
 />
 </Tooltip.Trigger>
 {isSignedIn && !canManageBilling && (
 <Tooltip.Content
 text={localizationKeys('organizationProfile.billingPage.alerts.noPermissionsToManageBilling')}
 />
 )}
 </Tooltip.Root>
 )}
 </Box>
 ) : (
Expand Down

4 changes: 3 additions & 1 deletion
packages/clerk-js/src/ui/contexts/components/Plans.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -208,6 +208,7 @@ export const usePlansContext = () => {
 variant: 'bordered' | 'solid';
 colorScheme: 'secondary' | 'primary';
 isDisabled: boolean;
 disabled: boolean;
 } => {
 const subscription = sub ?? (plan ? activeOrUpcomingSubscription(plan) : undefined);
 let _selectedPlanPeriod = selectedPlanPeriod;
Expand DownExpand Up@@ -235,9 +236,10 @@ export const usePlansContext = () => {
 variant: isCompact ? 'bordered' : 'solid',
 colorScheme: isCompact ? 'secondary' : 'primary',
 isDisabled: !canManageBilling,
 disabled: !canManageBilling,
 };
 },
 [activeOrUpcomingSubscription],
 [activeOrUpcomingSubscription, canManageBilling, ctx.subscriptions],
 );

 const captionForSubscription = useCallback((subscription: CommerceSubscriptionResource) => {
Expand Down

46 changes: 29 additions & 17 deletions
packages/clerk-js/src/ui/elements/Tooltip.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -18,6 +18,7 @@ import * as React from 'react';

import { Box, descriptors, type LocalizationKey, Span, Text, useAppearance } from '../customizables';
import { usePrefersReducedMotion } from '../hooks';
import type { ThemableCssProp } from '../styledSystem';

interface TooltipOptions {
 initialOpen?: boolean;
Expand DownExpand Up@@ -123,8 +124,12 @@ function Root({ children, ...options }: { children: React.ReactNode } & TooltipO
 return <TooltipContext.Provider value={tooltip}>{children}</TooltipContext.Provider>;
}

const Trigger = React.forwardRef<HTMLElement, React.HTMLProps<HTMLElement>>(function TooltipTrigger(
 { children, ...props },
type TriggerProps = React.HTMLProps<HTMLElement> & {
 sx?: ThemableCssProp;
};

const Trigger = React.forwardRef<HTMLElement, TriggerProps>(function TooltipTrigger(
 { children, sx, ...props },
 propRef,
) {
 const context = useTooltipContext();
Expand All@@ -135,7 +140,7 @@ const Trigger = React.forwardRef<HTMLElement, React.HTMLProps<HTMLElement>>(func
 return null;
 }

 // If the child is disabled, wrap it in a span to handle hover events
 // If the child is disabled, wrap it in a span to handle focus events
 if (children.props.isDisabled || children.props.disabled) {
 return (
 <Span
Expand All@@ -144,12 +149,15 @@ const Trigger = React.forwardRef<HTMLElement, React.HTMLProps<HTMLElement>>(func
 ...props,
 })}
 data-state={context.open ? 'open' : 'closed'}
 sx={{
 width: 'fit-content',
 display: 'inline-block',
 cursor: 'not-allowed',
 outline: 'none',
 }}
 sx={[
 {
 width: 'fit-content',
 display: 'inline-block',
 cursor: 'not-allowed',
 outline: 'none',
 },
 sx,
 ]}
 tabIndex={0}
 >
 {children}
Expand All@@ -172,8 +180,9 @@ const Content = React.forwardRef<
 HTMLDivElement,
 React.HTMLProps<HTMLDivElement> & {
 text: string | LocalizationKey;
 sx?: ThemableCssProp;
 }
>(function TooltipContent({ style, text, ...props }, propRef) {
>(function TooltipContent({ style, text, sx, ...props }, propRef) {
 const context = useTooltipContext();
 const ref = useMergeRefs([context.refs.setFloating, propRef]);

Expand All@@ -193,13 +202,16 @@ const Content = React.forwardRef<
 <Box
 elementDescriptor={descriptors.tooltipContent}
 style={context.transitionStyles}
 sx={t => ({
 paddingBlock: t.space.$1,
 paddingInline: t.space.$1x5,
 borderRadius: t.radii.$md,
 backgroundColor: t.colors.$primary500,
 maxWidth: t.sizes.$60,
 })}
 sx={[
 t => ({
 paddingBlock: t.space.$1,
 paddingInline: t.space.$1x5,
 borderRadius: t.radii.$md,
 backgroundColor: t.colors.$primary500,
 maxWidth: t.sizes.$60,
 }),
 sx,
 ]}
 >
 <Text
 elementDescriptor={descriptors.tooltipText}
Expand Down

2 changes: 1 addition & 1 deletion
packages/localizations/src/en-US.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -153,7 +153,7 @@ export const enUS: LocalizationResource = {
 badge__unverified: 'Unverified',
 billingPage: {
 alerts: {
 noPermissionsToManageBilling: 'You do not have permissions to manage billing for this account.',
 noPermissionsToManageBilling: 'You do not have permissions to manage billing for this organization.',
 },
 paymentSourcesSection: {
 actionLabel__default: 'Make default',
Expand Down

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Strip utm_, fbclid, gclid, etc. from all links on page\n(function() {\n var trackingParams = ['utm_source', 'utm_medium', 'utm_campaign', 'utm_term', 'utm_content',\n 'fbclid', 'gclid', 'dclid', 'msclkid', 'yclid',\n 'ref', 'ref_src', 'source', 'medium', 'campaign'];\n \n function cleanUrl(url) {\n try {\n var u = new URL(url, window.location.origin);\n var changed = false;\n trackingParams.forEach(function(p) {\n if (u.searchParams.has(p)) {\n u.searchParams.delete(p);\n changed = true;\n }\n });\n return changed ? u.toString() : url;\n } catch (e) {\n return url;\n }\n }\n \n function cleanLinks() {\n document.querySelectorAll('a[href]').forEach(function(a) {\n var clean = cleanUrl(a.href);\n if (clean !== a.href) a.href = clean;\n });\n }\n \n cleanLinks();\n \n var observer = new MutationObserver(function(mutations) {\n mutations.forEach(function(m) {\n m.addedNodes.forEach(function(node) {\n if (node.nodeType === 1) {\n if (node.tagName === 'A') cleanLinks();\n node.querySelectorAll('a[href]').forEach(function(a) {\n var clean = cleanUrl(a.href);\n if (clean !== a.href) a.href = clean;\n });\n }\n });\n });\n });\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Remove Tracking Parameters from Links");
}
} catch(__e) { console.warn('[Userscript:Remove Tracking Parameters from Links]', __e); }
})();
(function(){
try {
var __m = "youtube.com";
var __re = new RegExp('^' + "youtube\\.com" + '

Skip to content
feat(clerk-js,localization): Add notice when member does not have permissions to manage billing#5852

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

 Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and
privacy statement. We’ll occasionally send you account related emails.

Already on GitHub?
Sign in
to your account

 Merged

alexcarpenter
merged 11 commits into

from

May 8, 2025
 Merged


feat(clerk-js,localization): Add notice when member does not have permissions to manage billing
#5852
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


11 commits


Select commit
Hold shift + click to select a range
0d08876

feat(clerk-js,localization): Add tooltip to buttons when member does …


octoper May 6, 2025
86210c8

chore(repo): Add changeset


octoper May 6, 2025
c556db8

wip


octoper May 6, 2025
f8b04e8

wip


alexcarpenter May 6, 2025
13af6cf

cleanup


octoper May 6, 2025
c9cb7ad

cleanup


octoper May 6, 2025
457b2bd

feat(clerk-js): Add tooltip to action button in pricing table when no…


octoper May 7, 2025
2179b4c

fix(clerk-js): Fix tooltip showing when user was signed-out


octoper May 7, 2025
e224999

cleanup


octoper May 7, 2025
aeb0635

Merge branch 'main' into vaggelis/add-tooltips-with-reason-if-no-perm…


octoper May 7, 2025
155b55d

Merge branch 'main' into vaggelis/add-tooltips-with-reason-if-no-perm…


octoper May 8, 2025

File filter

Filter by extension
Filter by extension
Conversations

Failed to load comments. 
Loading
Jump to

Jump to file


Failed to load files. 
Loading
 Diff view

 Diff view


6 changes: 6 additions & 0 deletions
.changeset/chubby-memes-pull.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -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

37 changes: 26 additions & 11 deletions
packages/clerk-js/src/ui/components/PricingTable/PricingTableDefault.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -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,
Expand All@@ -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';
Expand DownExpand Up@@ -97,13 +98,18 @@ 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();

 const ctaPosition = pricingTableProps.ctaPosition || ctxCtaPosition || 'bottom';
 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<HTMLElement>) => {
Expand DownExpand Up@@ -236,15 +242,24 @@ function Card(props: CardProps) {
 })}
 />
 ) : (
 <Button
 elementDescriptor={descriptors.pricingTableCardFooterButton}
 block
 textVariant={isCompact ? 'buttonSmall' : 'buttonLarge'}
 {...buttonPropsForPlan({ plan, isCompact, selectedPlanPeriod: planPeriod })}
 onClick={event => {
 onSelect(plan, event);
 }}
 />
 <Tooltip.Root>
 <Tooltip.Trigger sx={{ width: '100%' }}>
 <Button
 elementDescriptor={descriptors.pricingTableCardFooterButton}
 block
 textVariant={isCompact ? 'buttonSmall' : 'buttonLarge'}
 {...buttonPropsForPlan({ plan, isCompact, selectedPlanPeriod: planPeriod })}
 onClick={event => {
 onSelect(plan, event);
 }}
 />
 </Tooltip.Trigger>
 {isSignedIn && !canManageBilling && (
 <Tooltip.Content
 text={localizationKeys('organizationProfile.billingPage.alerts.noPermissionsToManageBilling')}
 />
 )}
 </Tooltip.Root>
 )}
 </Box>
 ) : (
Expand Down

4 changes: 3 additions & 1 deletion
packages/clerk-js/src/ui/contexts/components/Plans.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -208,6 +208,7 @@ export const usePlansContext = () => {
 variant: 'bordered' | 'solid';
 colorScheme: 'secondary' | 'primary';
 isDisabled: boolean;
 disabled: boolean;
 } => {
 const subscription = sub ?? (plan ? activeOrUpcomingSubscription(plan) : undefined);
 let _selectedPlanPeriod = selectedPlanPeriod;
Expand DownExpand Up@@ -235,9 +236,10 @@ export const usePlansContext = () => {
 variant: isCompact ? 'bordered' : 'solid',
 colorScheme: isCompact ? 'secondary' : 'primary',
 isDisabled: !canManageBilling,
 disabled: !canManageBilling,
 };
 },
 [activeOrUpcomingSubscription],
 [activeOrUpcomingSubscription, canManageBilling, ctx.subscriptions],
 );

 const captionForSubscription = useCallback((subscription: CommerceSubscriptionResource) => {
Expand Down

46 changes: 29 additions & 17 deletions
packages/clerk-js/src/ui/elements/Tooltip.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -18,6 +18,7 @@ import * as React from 'react';

import { Box, descriptors, type LocalizationKey, Span, Text, useAppearance } from '../customizables';
import { usePrefersReducedMotion } from '../hooks';
import type { ThemableCssProp } from '../styledSystem';

interface TooltipOptions {
 initialOpen?: boolean;
Expand DownExpand Up@@ -123,8 +124,12 @@ function Root({ children, ...options }: { children: React.ReactNode } & TooltipO
 return <TooltipContext.Provider value={tooltip}>{children}</TooltipContext.Provider>;
}

const Trigger = React.forwardRef<HTMLElement, React.HTMLProps<HTMLElement>>(function TooltipTrigger(
 { children, ...props },
type TriggerProps = React.HTMLProps<HTMLElement> & {
 sx?: ThemableCssProp;
};

const Trigger = React.forwardRef<HTMLElement, TriggerProps>(function TooltipTrigger(
 { children, sx, ...props },
 propRef,
) {
 const context = useTooltipContext();
Expand All@@ -135,7 +140,7 @@ const Trigger = React.forwardRef<HTMLElement, React.HTMLProps<HTMLElement>>(func
 return null;
 }

 // If the child is disabled, wrap it in a span to handle hover events
 // If the child is disabled, wrap it in a span to handle focus events
 if (children.props.isDisabled || children.props.disabled) {
 return (
 <Span
Expand All@@ -144,12 +149,15 @@ const Trigger = React.forwardRef<HTMLElement, React.HTMLProps<HTMLElement>>(func
 ...props,
 })}
 data-state={context.open ? 'open' : 'closed'}
 sx={{
 width: 'fit-content',
 display: 'inline-block',
 cursor: 'not-allowed',
 outline: 'none',
 }}
 sx={[
 {
 width: 'fit-content',
 display: 'inline-block',
 cursor: 'not-allowed',
 outline: 'none',
 },
 sx,
 ]}
 tabIndex={0}
 >
 {children}
Expand All@@ -172,8 +180,9 @@ const Content = React.forwardRef<
 HTMLDivElement,
 React.HTMLProps<HTMLDivElement> & {
 text: string | LocalizationKey;
 sx?: ThemableCssProp;
 }
>(function TooltipContent({ style, text, ...props }, propRef) {
>(function TooltipContent({ style, text, sx, ...props }, propRef) {
 const context = useTooltipContext();
 const ref = useMergeRefs([context.refs.setFloating, propRef]);

Expand All@@ -193,13 +202,16 @@ const Content = React.forwardRef<
 <Box
 elementDescriptor={descriptors.tooltipContent}
 style={context.transitionStyles}
 sx={t => ({
 paddingBlock: t.space.$1,
 paddingInline: t.space.$1x5,
 borderRadius: t.radii.$md,
 backgroundColor: t.colors.$primary500,
 maxWidth: t.sizes.$60,
 })}
 sx={[
 t => ({
 paddingBlock: t.space.$1,
 paddingInline: t.space.$1x5,
 borderRadius: t.radii.$md,
 backgroundColor: t.colors.$primary500,
 maxWidth: t.sizes.$60,
 }),
 sx,
 ]}
 >
 <Text
 elementDescriptor={descriptors.tooltipText}
Expand Down

2 changes: 1 addition & 1 deletion
packages/localizations/src/en-US.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -153,7 +153,7 @@ export const enUS: LocalizationResource = {
 badge__unverified: 'Unverified',
 billingPage: {
 alerts: {
 noPermissionsToManageBilling: 'You do not have permissions to manage billing for this account.',
 noPermissionsToManageBilling: 'You do not have permissions to manage billing for this organization.',
 },
 paymentSourcesSection: {
 actionLabel__default: 'Make default',
Expand Down

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Auto-enable theater mode on YouTube\n(function() {\n function tryTheater() {\n var btn = document.querySelector('button[aria-label=\"Theater mode\"], ytd-player #player button[title=\"Theater mode\"]');\n if (btn && !btn.classList.contains('activated')) {\n btn.click();\n }\n }\n \n // Try immediately\n tryTheater();\n \n // Try after navigation (SPA)\n var lastUrl = location.href;\n setInterval(function() {\n if (location.href !== lastUrl) {\n lastUrl = location.href;\n setTimeout(tryTheater, 500);\n }\n }, 1000);\n \n // Also try on player load\n var observer = new MutationObserver(tryTheater);\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "YouTube Theater Mode Default");
}
} catch(__e) { console.warn('[Userscript:YouTube Theater Mode Default]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
feat(clerk-js,localization): Add notice when member does not have permissions to manage billing#5852

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

 Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and
privacy statement. We’ll occasionally send you account related emails.

Already on GitHub?
Sign in
to your account

 Merged

alexcarpenter
merged 11 commits into

from

May 8, 2025
 Merged


feat(clerk-js,localization): Add notice when member does not have permissions to manage billing
#5852
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


11 commits


Select commit
Hold shift + click to select a range
0d08876

feat(clerk-js,localization): Add tooltip to buttons when member does …


octoper May 6, 2025
86210c8

chore(repo): Add changeset


octoper May 6, 2025
c556db8

wip


octoper May 6, 2025
f8b04e8

wip


alexcarpenter May 6, 2025
13af6cf

cleanup


octoper May 6, 2025
c9cb7ad

cleanup


octoper May 6, 2025
457b2bd

feat(clerk-js): Add tooltip to action button in pricing table when no…


octoper May 7, 2025
2179b4c

fix(clerk-js): Fix tooltip showing when user was signed-out


octoper May 7, 2025
e224999

cleanup


octoper May 7, 2025
aeb0635

Merge branch 'main' into vaggelis/add-tooltips-with-reason-if-no-perm…


octoper May 7, 2025
155b55d

Merge branch 'main' into vaggelis/add-tooltips-with-reason-if-no-perm…


octoper May 8, 2025

File filter

Filter by extension
Filter by extension
Conversations

Failed to load comments. 
Loading
Jump to

Jump to file


Failed to load files. 
Loading
 Diff view

 Diff view


6 changes: 6 additions & 0 deletions
.changeset/chubby-memes-pull.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -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

37 changes: 26 additions & 11 deletions
packages/clerk-js/src/ui/components/PricingTable/PricingTableDefault.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -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,
Expand All@@ -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';
Expand DownExpand Up@@ -97,13 +98,18 @@ 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();

 const ctaPosition = pricingTableProps.ctaPosition || ctxCtaPosition || 'bottom';
 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<HTMLElement>) => {
Expand DownExpand Up@@ -236,15 +242,24 @@ function Card(props: CardProps) {
 })}
 />
 ) : (
 <Button
 elementDescriptor={descriptors.pricingTableCardFooterButton}
 block
 textVariant={isCompact ? 'buttonSmall' : 'buttonLarge'}
 {...buttonPropsForPlan({ plan, isCompact, selectedPlanPeriod: planPeriod })}
 onClick={event => {
 onSelect(plan, event);
 }}
 />
 <Tooltip.Root>
 <Tooltip.Trigger sx={{ width: '100%' }}>
 <Button
 elementDescriptor={descriptors.pricingTableCardFooterButton}
 block
 textVariant={isCompact ? 'buttonSmall' : 'buttonLarge'}
 {...buttonPropsForPlan({ plan, isCompact, selectedPlanPeriod: planPeriod })}
 onClick={event => {
 onSelect(plan, event);
 }}
 />
 </Tooltip.Trigger>
 {isSignedIn && !canManageBilling && (
 <Tooltip.Content
 text={localizationKeys('organizationProfile.billingPage.alerts.noPermissionsToManageBilling')}
 />
 )}
 </Tooltip.Root>
 )}
 </Box>
 ) : (
Expand Down

4 changes: 3 additions & 1 deletion
packages/clerk-js/src/ui/contexts/components/Plans.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -208,6 +208,7 @@ export const usePlansContext = () => {
 variant: 'bordered' | 'solid';
 colorScheme: 'secondary' | 'primary';
 isDisabled: boolean;
 disabled: boolean;
 } => {
 const subscription = sub ?? (plan ? activeOrUpcomingSubscription(plan) : undefined);
 let _selectedPlanPeriod = selectedPlanPeriod;
Expand DownExpand Up@@ -235,9 +236,10 @@ export const usePlansContext = () => {
 variant: isCompact ? 'bordered' : 'solid',
 colorScheme: isCompact ? 'secondary' : 'primary',
 isDisabled: !canManageBilling,
 disabled: !canManageBilling,
 };
 },
 [activeOrUpcomingSubscription],
 [activeOrUpcomingSubscription, canManageBilling, ctx.subscriptions],
 );

 const captionForSubscription = useCallback((subscription: CommerceSubscriptionResource) => {
Expand Down

46 changes: 29 additions & 17 deletions
packages/clerk-js/src/ui/elements/Tooltip.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -18,6 +18,7 @@ import * as React from 'react';

import { Box, descriptors, type LocalizationKey, Span, Text, useAppearance } from '../customizables';
import { usePrefersReducedMotion } from '../hooks';
import type { ThemableCssProp } from '../styledSystem';

interface TooltipOptions {
 initialOpen?: boolean;
Expand DownExpand Up@@ -123,8 +124,12 @@ function Root({ children, ...options }: { children: React.ReactNode } & TooltipO
 return <TooltipContext.Provider value={tooltip}>{children}</TooltipContext.Provider>;
}

const Trigger = React.forwardRef<HTMLElement, React.HTMLProps<HTMLElement>>(function TooltipTrigger(
 { children, ...props },
type TriggerProps = React.HTMLProps<HTMLElement> & {
 sx?: ThemableCssProp;
};

const Trigger = React.forwardRef<HTMLElement, TriggerProps>(function TooltipTrigger(
 { children, sx, ...props },
 propRef,
) {
 const context = useTooltipContext();
Expand All@@ -135,7 +140,7 @@ const Trigger = React.forwardRef<HTMLElement, React.HTMLProps<HTMLElement>>(func
 return null;
 }

 // If the child is disabled, wrap it in a span to handle hover events
 // If the child is disabled, wrap it in a span to handle focus events
 if (children.props.isDisabled || children.props.disabled) {
 return (
 <Span
Expand All@@ -144,12 +149,15 @@ const Trigger = React.forwardRef<HTMLElement, React.HTMLProps<HTMLElement>>(func
 ...props,
 })}
 data-state={context.open ? 'open' : 'closed'}
 sx={{
 width: 'fit-content',
 display: 'inline-block',
 cursor: 'not-allowed',
 outline: 'none',
 }}
 sx={[
 {
 width: 'fit-content',
 display: 'inline-block',
 cursor: 'not-allowed',
 outline: 'none',
 },
 sx,
 ]}
 tabIndex={0}
 >
 {children}
Expand All@@ -172,8 +180,9 @@ const Content = React.forwardRef<
 HTMLDivElement,
 React.HTMLProps<HTMLDivElement> & {
 text: string | LocalizationKey;
 sx?: ThemableCssProp;
 }
>(function TooltipContent({ style, text, ...props }, propRef) {
>(function TooltipContent({ style, text, sx, ...props }, propRef) {
 const context = useTooltipContext();
 const ref = useMergeRefs([context.refs.setFloating, propRef]);

Expand All@@ -193,13 +202,16 @@ const Content = React.forwardRef<
 <Box
 elementDescriptor={descriptors.tooltipContent}
 style={context.transitionStyles}
 sx={t => ({
 paddingBlock: t.space.$1,
 paddingInline: t.space.$1x5,
 borderRadius: t.radii.$md,
 backgroundColor: t.colors.$primary500,
 maxWidth: t.sizes.$60,
 })}
 sx={[
 t => ({
 paddingBlock: t.space.$1,
 paddingInline: t.space.$1x5,
 borderRadius: t.radii.$md,
 backgroundColor: t.colors.$primary500,
 maxWidth: t.sizes.$60,
 }),
 sx,
 ]}
 >
 <Text
 elementDescriptor={descriptors.tooltipText}
Expand Down

2 changes: 1 addition & 1 deletion
packages/localizations/src/en-US.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -153,7 +153,7 @@ export const enUS: LocalizationResource = {
 badge__unverified: 'Unverified',
 billingPage: {
 alerts: {
 noPermissionsToManageBilling: 'You do not have permissions to manage billing for this account.',
 noPermissionsToManageBilling: 'You do not have permissions to manage billing for this organization.',
 },
 paymentSourcesSection: {
 actionLabel__default: 'Make default',
Expand Down

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Remove or un-stick sticky/fixed headers that block content\n(function() {\n function unstick() {\n document.querySelectorAll('header, nav, [role=\"banner\"], .header, .navbar, .sticky, .fixed-top, [style*=\"position: fixed\"], [style*=\"position:sticky\"]').forEach(function(el) {\n if (el.style.position === 'fixed' || el.style.position === 'sticky' || \n getComputedStyle(el).position === 'fixed' || getComputedStyle(el).position === 'sticky') {\n el.style.position = 'static';\n el.style.top = 'auto';\n el.style.zIndex = 'auto';\n }\n });\n }\n \n unstick();\n \n var observer = new MutationObserver(unstick);\n observer.observe(document.body, { childList: true, subtree: true, attributes: true, attributeFilter: ['style', 'class'] });\n})();", "Kill Sticky Headers");
}
} catch(__e) { console.warn('[Userscript:Kill Sticky Headers]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
feat(clerk-js,localization): Add notice when member does not have permissions to manage billing#5852

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

 Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and
privacy statement. We’ll occasionally send you account related emails.

Already on GitHub?
Sign in
to your account

 Merged

alexcarpenter
merged 11 commits into

from

May 8, 2025
 Merged


feat(clerk-js,localization): Add notice when member does not have permissions to manage billing
#5852
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


11 commits


Select commit
Hold shift + click to select a range
0d08876

feat(clerk-js,localization): Add tooltip to buttons when member does …


octoper May 6, 2025
86210c8

chore(repo): Add changeset


octoper May 6, 2025
c556db8

wip


octoper May 6, 2025
f8b04e8

wip


alexcarpenter May 6, 2025
13af6cf

cleanup


octoper May 6, 2025
c9cb7ad

cleanup


octoper May 6, 2025
457b2bd

feat(clerk-js): Add tooltip to action button in pricing table when no…


octoper May 7, 2025
2179b4c

fix(clerk-js): Fix tooltip showing when user was signed-out


octoper May 7, 2025
e224999

cleanup


octoper May 7, 2025
aeb0635

Merge branch 'main' into vaggelis/add-tooltips-with-reason-if-no-perm…


octoper May 7, 2025
155b55d

Merge branch 'main' into vaggelis/add-tooltips-with-reason-if-no-perm…


octoper May 8, 2025

File filter

Filter by extension
Filter by extension
Conversations

Failed to load comments. 
Loading
Jump to

Jump to file


Failed to load files. 
Loading
 Diff view

 Diff view


6 changes: 6 additions & 0 deletions
.changeset/chubby-memes-pull.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -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

37 changes: 26 additions & 11 deletions
packages/clerk-js/src/ui/components/PricingTable/PricingTableDefault.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -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,
Expand All@@ -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';
Expand DownExpand Up@@ -97,13 +98,18 @@ 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();

 const ctaPosition = pricingTableProps.ctaPosition || ctxCtaPosition || 'bottom';
 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<HTMLElement>) => {
Expand DownExpand Up@@ -236,15 +242,24 @@ function Card(props: CardProps) {
 })}
 />
 ) : (
 <Button
 elementDescriptor={descriptors.pricingTableCardFooterButton}
 block
 textVariant={isCompact ? 'buttonSmall' : 'buttonLarge'}
 {...buttonPropsForPlan({ plan, isCompact, selectedPlanPeriod: planPeriod })}
 onClick={event => {
 onSelect(plan, event);
 }}
 />
 <Tooltip.Root>
 <Tooltip.Trigger sx={{ width: '100%' }}>
 <Button
 elementDescriptor={descriptors.pricingTableCardFooterButton}
 block
 textVariant={isCompact ? 'buttonSmall' : 'buttonLarge'}
 {...buttonPropsForPlan({ plan, isCompact, selectedPlanPeriod: planPeriod })}
 onClick={event => {
 onSelect(plan, event);
 }}
 />
 </Tooltip.Trigger>
 {isSignedIn && !canManageBilling && (
 <Tooltip.Content
 text={localizationKeys('organizationProfile.billingPage.alerts.noPermissionsToManageBilling')}
 />
 )}
 </Tooltip.Root>
 )}
 </Box>
 ) : (
Expand Down

4 changes: 3 additions & 1 deletion
packages/clerk-js/src/ui/contexts/components/Plans.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -208,6 +208,7 @@ export const usePlansContext = () => {
 variant: 'bordered' | 'solid';
 colorScheme: 'secondary' | 'primary';
 isDisabled: boolean;
 disabled: boolean;
 } => {
 const subscription = sub ?? (plan ? activeOrUpcomingSubscription(plan) : undefined);
 let _selectedPlanPeriod = selectedPlanPeriod;
Expand DownExpand Up@@ -235,9 +236,10 @@ export const usePlansContext = () => {
 variant: isCompact ? 'bordered' : 'solid',
 colorScheme: isCompact ? 'secondary' : 'primary',
 isDisabled: !canManageBilling,
 disabled: !canManageBilling,
 };
 },
 [activeOrUpcomingSubscription],
 [activeOrUpcomingSubscription, canManageBilling, ctx.subscriptions],
 );

 const captionForSubscription = useCallback((subscription: CommerceSubscriptionResource) => {
Expand Down

46 changes: 29 additions & 17 deletions
packages/clerk-js/src/ui/elements/Tooltip.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -18,6 +18,7 @@ import * as React from 'react';

import { Box, descriptors, type LocalizationKey, Span, Text, useAppearance } from '../customizables';
import { usePrefersReducedMotion } from '../hooks';
import type { ThemableCssProp } from '../styledSystem';

interface TooltipOptions {
 initialOpen?: boolean;
Expand DownExpand Up@@ -123,8 +124,12 @@ function Root({ children, ...options }: { children: React.ReactNode } & TooltipO
 return <TooltipContext.Provider value={tooltip}>{children}</TooltipContext.Provider>;
}

const Trigger = React.forwardRef<HTMLElement, React.HTMLProps<HTMLElement>>(function TooltipTrigger(
 { children, ...props },
type TriggerProps = React.HTMLProps<HTMLElement> & {
 sx?: ThemableCssProp;
};

const Trigger = React.forwardRef<HTMLElement, TriggerProps>(function TooltipTrigger(
 { children, sx, ...props },
 propRef,
) {
 const context = useTooltipContext();
Expand All@@ -135,7 +140,7 @@ const Trigger = React.forwardRef<HTMLElement, React.HTMLProps<HTMLElement>>(func
 return null;
 }

 // If the child is disabled, wrap it in a span to handle hover events
 // If the child is disabled, wrap it in a span to handle focus events
 if (children.props.isDisabled || children.props.disabled) {
 return (
 <Span
Expand All@@ -144,12 +149,15 @@ const Trigger = React.forwardRef<HTMLElement, React.HTMLProps<HTMLElement>>(func
 ...props,
 })}
 data-state={context.open ? 'open' : 'closed'}
 sx={{
 width: 'fit-content',
 display: 'inline-block',
 cursor: 'not-allowed',
 outline: 'none',
 }}
 sx={[
 {
 width: 'fit-content',
 display: 'inline-block',
 cursor: 'not-allowed',
 outline: 'none',
 },
 sx,
 ]}
 tabIndex={0}
 >
 {children}
Expand All@@ -172,8 +180,9 @@ const Content = React.forwardRef<
 HTMLDivElement,
 React.HTMLProps<HTMLDivElement> & {
 text: string | LocalizationKey;
 sx?: ThemableCssProp;
 }
>(function TooltipContent({ style, text, ...props }, propRef) {
>(function TooltipContent({ style, text, sx, ...props }, propRef) {
 const context = useTooltipContext();
 const ref = useMergeRefs([context.refs.setFloating, propRef]);

Expand All@@ -193,13 +202,16 @@ const Content = React.forwardRef<
 <Box
 elementDescriptor={descriptors.tooltipContent}
 style={context.transitionStyles}
 sx={t => ({
 paddingBlock: t.space.$1,
 paddingInline: t.space.$1x5,
 borderRadius: t.radii.$md,
 backgroundColor: t.colors.$primary500,
 maxWidth: t.sizes.$60,
 })}
 sx={[
 t => ({
 paddingBlock: t.space.$1,
 paddingInline: t.space.$1x5,
 borderRadius: t.radii.$md,
 backgroundColor: t.colors.$primary500,
 maxWidth: t.sizes.$60,
 }),
 sx,
 ]}
 >
 <Text
 elementDescriptor={descriptors.tooltipText}
Expand Down

2 changes: 1 addition & 1 deletion
packages/localizations/src/en-US.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -153,7 +153,7 @@ export const enUS: LocalizationResource = {
 badge__unverified: 'Unverified',
 billingPage: {
 alerts: {
 noPermissionsToManageBilling: 'You do not have permissions to manage billing for this account.',
 noPermissionsToManageBilling: 'You do not have permissions to manage billing for this organization.',
 },
 paymentSourcesSection: {
 actionLabel__default: 'Make default',
Expand Down

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Universal Dark Mode - works on any site\n(function() {\n var enabled = true;\n \n function applyDarkMode() {\n if (!enabled) return;\n \n // Create style element if it doesn't exist\n var style = document.getElementById('universal-dark-mode-style');\n if (!style) {\n style = document.createElement('style');\n style.id = 'universal-dark-mode-style';\n document.head.appendChild(style);\n }\n \n // Dark mode CSS - inverts colors but preserves images/video\n style.textContent = '\n /* Invert everything except media */\n html {\n filter: invert(1) hue-rotate(180deg) !important;\n background: #1a1a2e !important;\n }\n \n /* Restore images, videos, iframes, canvas */\n img, video, iframe, canvas, svg, picture, [style*=\"background-image\"] {\n filter: invert(1) hue-rotate(180deg) !important;\n }\n \n /* Preserve specific elements that should not be inverted */\n .no-dark-mode, .no-dark-mode *,\n [data-theme=\"light\"], [data-theme=\"light\"],\n .ace_editor, .ace_editor *,\n .CodeMirror, .CodeMirror *,\n .monaco-editor, .monaco-editor *,\n .markdown-body pre, .markdown-body pre *,\n .highlight, .highlight *,\n pre code, pre code * {\n filter: none !important;\n }\n \n /* Fix common UI elements */\n .modal, .popup, .dropdown-menu, .tooltip, .popover {\n filter: invert(1) hue-rotate(180deg) !important;\n background: #2d2d44 !important;\n border-color: #444 !important;\n }\n \n /* Scrollbars */\n ::-webkit-scrollbar { background: #1a1a2e !important; }\n ::-webkit-scrollbar-thumb { background: #444 !important; }\n ::-webkit-scrollbar-thumb:hover { background: #555 !important; }\n \n /* Selection */\n ::selection { background: #4ecdc4 !important; color: #1a1a2e !important; }\n ::-moz-selection { background: #4ecdc4 !important; color: #1a1a2e !important; }\n ';\n }\n \n function removeDarkMode() {\n var style = document.getElementById('universal-dark-mode-style');\n if (style) style.remove();\n }\n \n // Toggle with Alt+Shift+D\n document.addEventListener('keydown', function(e) {\n if (e.altKey && e.shiftKey && e.key === 'D') {\n e.preventDefault();\n enabled = !enabled;\n if (enabled) {\n applyDarkMode();\n console.log('[Universal Dark Mode] Enabled');\n } else {\n removeDarkMode();\n console.log('[Universal Dark Mode] Disabled');\n }\n }\n });\n \n // Apply on load\n applyDarkMode();\n \n // Re-apply on dynamic content\n var observer = new MutationObserver(function(mutations) {\n if (enabled && !document.getElementById('universal-dark-mode-style')) {\n applyDarkMode();\n }\n });\n observer.observe(document.head, { childList: true });\n \n console.log('[Universal Dark Mode] Loaded - Press Alt+Shift+D to toggle');\n})();", "Universal Dark Mode");
}
} catch(__e) { console.warn('[Userscript:Universal Dark Mode]', __e); }
})();
})();

Skip to content
feat(clerk-js,localization): Add notice when member does not have permissions to manage billing#5852

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

 Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and
privacy statement. We’ll occasionally send you account related emails.

Already on GitHub?
Sign in
to your account

 Merged

alexcarpenter
merged 11 commits into

from

May 8, 2025
 Merged


feat(clerk-js,localization): Add notice when member does not have permissions to manage billing
#5852
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


11 commits


Select commit
Hold shift + click to select a range
0d08876

feat(clerk-js,localization): Add tooltip to buttons when member does …


octoper May 6, 2025
86210c8

chore(repo): Add changeset


octoper May 6, 2025
c556db8

wip


octoper May 6, 2025
f8b04e8

wip


alexcarpenter May 6, 2025
13af6cf

cleanup


octoper May 6, 2025
c9cb7ad

cleanup


octoper May 6, 2025
457b2bd

feat(clerk-js): Add tooltip to action button in pricing table when no…


octoper May 7, 2025
2179b4c

fix(clerk-js): Fix tooltip showing when user was signed-out


octoper May 7, 2025
e224999

cleanup


octoper May 7, 2025
aeb0635

Merge branch 'main' into vaggelis/add-tooltips-with-reason-if-no-perm…


octoper May 7, 2025
155b55d

Merge branch 'main' into vaggelis/add-tooltips-with-reason-if-no-perm…


octoper May 8, 2025

File filter

Filter by extension
Filter by extension
Conversations

Failed to load comments. 
Loading
Jump to

Jump to file


Failed to load files. 
Loading
 Diff view

 Diff view


6 changes: 6 additions & 0 deletions
.changeset/chubby-memes-pull.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -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

37 changes: 26 additions & 11 deletions
packages/clerk-js/src/ui/components/PricingTable/PricingTableDefault.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -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,
Expand All@@ -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';
Expand DownExpand Up@@ -97,13 +98,18 @@ 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();

 const ctaPosition = pricingTableProps.ctaPosition || ctxCtaPosition || 'bottom';
 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<HTMLElement>) => {
Expand DownExpand Up@@ -236,15 +242,24 @@ function Card(props: CardProps) {
 })}
 />
 ) : (
 <Button
 elementDescriptor={descriptors.pricingTableCardFooterButton}
 block
 textVariant={isCompact ? 'buttonSmall' : 'buttonLarge'}
 {...buttonPropsForPlan({ plan, isCompact, selectedPlanPeriod: planPeriod })}
 onClick={event => {
 onSelect(plan, event);
 }}
 />
 <Tooltip.Root>
 <Tooltip.Trigger sx={{ width: '100%' }}>
 <Button
 elementDescriptor={descriptors.pricingTableCardFooterButton}
 block
 textVariant={isCompact ? 'buttonSmall' : 'buttonLarge'}
 {...buttonPropsForPlan({ plan, isCompact, selectedPlanPeriod: planPeriod })}
 onClick={event => {
 onSelect(plan, event);
 }}
 />
 </Tooltip.Trigger>
 {isSignedIn && !canManageBilling && (
 <Tooltip.Content
 text={localizationKeys('organizationProfile.billingPage.alerts.noPermissionsToManageBilling')}
 />
 )}
 </Tooltip.Root>
 )}
 </Box>
 ) : (
Expand Down

4 changes: 3 additions & 1 deletion
packages/clerk-js/src/ui/contexts/components/Plans.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -208,6 +208,7 @@ export const usePlansContext = () => {
 variant: 'bordered' | 'solid';
 colorScheme: 'secondary' | 'primary';
 isDisabled: boolean;
 disabled: boolean;
 } => {
 const subscription = sub ?? (plan ? activeOrUpcomingSubscription(plan) : undefined);
 let _selectedPlanPeriod = selectedPlanPeriod;
Expand DownExpand Up@@ -235,9 +236,10 @@ export const usePlansContext = () => {
 variant: isCompact ? 'bordered' : 'solid',
 colorScheme: isCompact ? 'secondary' : 'primary',
 isDisabled: !canManageBilling,
 disabled: !canManageBilling,
 };
 },
 [activeOrUpcomingSubscription],
 [activeOrUpcomingSubscription, canManageBilling, ctx.subscriptions],
 );

 const captionForSubscription = useCallback((subscription: CommerceSubscriptionResource) => {
Expand Down

46 changes: 29 additions & 17 deletions
packages/clerk-js/src/ui/elements/Tooltip.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -18,6 +18,7 @@ import * as React from 'react';

import { Box, descriptors, type LocalizationKey, Span, Text, useAppearance } from '../customizables';
import { usePrefersReducedMotion } from '../hooks';
import type { ThemableCssProp } from '../styledSystem';

interface TooltipOptions {
 initialOpen?: boolean;
Expand DownExpand Up@@ -123,8 +124,12 @@ function Root({ children, ...options }: { children: React.ReactNode } & TooltipO
 return <TooltipContext.Provider value={tooltip}>{children}</TooltipContext.Provider>;
}

const Trigger = React.forwardRef<HTMLElement, React.HTMLProps<HTMLElement>>(function TooltipTrigger(
 { children, ...props },
type TriggerProps = React.HTMLProps<HTMLElement> & {
 sx?: ThemableCssProp;
};

const Trigger = React.forwardRef<HTMLElement, TriggerProps>(function TooltipTrigger(
 { children, sx, ...props },
 propRef,
) {
 const context = useTooltipContext();
Expand All@@ -135,7 +140,7 @@ const Trigger = React.forwardRef<HTMLElement, React.HTMLProps<HTMLElement>>(func
 return null;
 }

 // If the child is disabled, wrap it in a span to handle hover events
 // If the child is disabled, wrap it in a span to handle focus events
 if (children.props.isDisabled || children.props.disabled) {
 return (
 <Span
Expand All@@ -144,12 +149,15 @@ const Trigger = React.forwardRef<HTMLElement, React.HTMLProps<HTMLElement>>(func
 ...props,
 })}
 data-state={context.open ? 'open' : 'closed'}
 sx={{
 width: 'fit-content',
 display: 'inline-block',
 cursor: 'not-allowed',
 outline: 'none',
 }}
 sx={[
 {
 width: 'fit-content',
 display: 'inline-block',
 cursor: 'not-allowed',
 outline: 'none',
 },
 sx,
 ]}
 tabIndex={0}
 >
 {children}
Expand All@@ -172,8 +180,9 @@ const Content = React.forwardRef<
 HTMLDivElement,
 React.HTMLProps<HTMLDivElement> & {
 text: string | LocalizationKey;
 sx?: ThemableCssProp;
 }
>(function TooltipContent({ style, text, ...props }, propRef) {
>(function TooltipContent({ style, text, sx, ...props }, propRef) {
 const context = useTooltipContext();
 const ref = useMergeRefs([context.refs.setFloating, propRef]);

Expand All@@ -193,13 +202,16 @@ const Content = React.forwardRef<
 <Box
 elementDescriptor={descriptors.tooltipContent}
 style={context.transitionStyles}
 sx={t => ({
 paddingBlock: t.space.$1,
 paddingInline: t.space.$1x5,
 borderRadius: t.radii.$md,
 backgroundColor: t.colors.$primary500,
 maxWidth: t.sizes.$60,
 })}
 sx={[
 t => ({
 paddingBlock: t.space.$1,
 paddingInline: t.space.$1x5,
 borderRadius: t.radii.$md,
 backgroundColor: t.colors.$primary500,
 maxWidth: t.sizes.$60,
 }),
 sx,
 ]}
 >
 <Text
 elementDescriptor={descriptors.tooltipText}
Expand Down

2 changes: 1 addition & 1 deletion
packages/localizations/src/en-US.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -153,7 +153,7 @@ export const enUS: LocalizationResource = {
 badge__unverified: 'Unverified',
 billingPage: {
 alerts: {
 noPermissionsToManageBilling: 'You do not have permissions to manage billing for this account.',
 noPermissionsToManageBilling: 'You do not have permissions to manage billing for this organization.',
 },
 paymentSourcesSection: {
 actionLabel__default: 'Make default',
Expand Down