feat(clerk-js,localization): Add notice when member does not have permissions to manage billing by octoper · Pull Request #5852 · clerk/javascript

octoper · 2025-05-06T08:35:06Z

Description

Checklist

pnpm test runs as expected.
pnpm build runs as expected.
(If applicable) JSDoc comments have been added or updated for any package exports
(If applicable) Documentation has been updated

Type of change

changeset-bot · 2025-05-06T08:35:10Z

🦋 Changeset detected

Latest commit: 155b55d

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 4 packages

Name	Type
@clerk/localizations	Patch
@clerk/clerk-js	Patch
@clerk/chrome-extension	Patch
@clerk/clerk-expo	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

vercel · 2025-05-06T08:35:10Z

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
clerk-js-sandbox	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	May 8, 2025 7:49am

nikospapcom · 2025-05-06T08:40:36Z

+ Clerk.mountPricingTable(app, {
+ forOrganizations: true,
+ });


Will remove this too before merging

nikospapcom · 2025-05-06T08:40:55Z

 type="text/javascript"
 src="/<%= htmlRspackPlugin.files.js[0] %>"
- data-clerk-publishable-key="pk_test_dG91Y2hlZC1sYWR5YmlyZC0yMy5jbGVyay5hY2NvdW50cy5kZXYk"
+ data-clerk-publishable-key="pk_test_ZGV2b3RlZC15YWstMjkuY2xlcmsuYWNjb3VudHNzdGFnZS5kZXYk"


Left this for testing, will remove it before merge

panteliselef · 2025-05-06T14:53:55Z

 }

+ if (isDisabled) {
+ return children;


Is the below condition not working properly ?

alexcarpenter · 2025-05-06T19:07:18Z

+ sx={{
+ width: '100%',
+ }}
+ isDisabled={canManageBilling}


Doesn't the button have a isDisabled prop that we check for in the tooltip to handle wrapping with span to make it focusable?

Removed in favor of reading disabled from the child element which works from my testing. Let me know if I am missing something.

…not have permissions to manage billing # Conflicts: # packages/clerk-js/src/ui/components/OrganizationProfile/OrganizationBillingPage.tsx # packages/clerk-js/src/ui/components/PricingTable/PricingTableDefault.tsx # packages/localizations/src/en-US.ts

… permissions to manage billing

…issions

octoper · 2025-05-06T08:35:06Z

Description

Checklist

pnpm test runs as expected.
pnpm build runs as expected.
(If applicable) JSDoc comments have been added or updated for any package exports
(If applicable) Documentation has been updated

Type of change

changeset-bot · 2025-05-06T08:35:10Z

🦋 Changeset detected

Latest commit: 155b55d

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 4 packages

Name	Type
@clerk/localizations	Patch
@clerk/clerk-js	Patch
@clerk/chrome-extension	Patch
@clerk/clerk-expo	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

vercel · 2025-05-06T08:35:10Z

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
clerk-js-sandbox	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	May 8, 2025 7:49am

nikospapcom · 2025-05-06T08:40:36Z

+ Clerk.mountPricingTable(app, {
+ forOrganizations: true,
+ });


Will remove this too before merging

nikospapcom · 2025-05-06T08:40:55Z

 type="text/javascript"
 src="/<%= htmlRspackPlugin.files.js[0] %>"
- data-clerk-publishable-key="pk_test_dG91Y2hlZC1sYWR5YmlyZC0yMy5jbGVyay5hY2NvdW50cy5kZXYk"
+ data-clerk-publishable-key="pk_test_ZGV2b3RlZC15YWstMjkuY2xlcmsuYWNjb3VudHNzdGFnZS5kZXYk"


Left this for testing, will remove it before merge

panteliselef · 2025-05-06T14:53:55Z

 }

+ if (isDisabled) {
+ return children;


Is the below condition not working properly ?

alexcarpenter · 2025-05-06T19:07:18Z

+ sx={{
+ width: '100%',
+ }}
+ isDisabled={canManageBilling}


Doesn't the button have a isDisabled prop that we check for in the tooltip to handle wrapping with span to make it focusable?

Removed in favor of reading disabled from the child element which works from my testing. Let me know if I am missing something.

…not have permissions to manage billing # Conflicts: # packages/clerk-js/src/ui/components/OrganizationProfile/OrganizationBillingPage.tsx # packages/clerk-js/src/ui/components/PricingTable/PricingTableDefault.tsx # packages/localizations/src/en-US.ts

… permissions to manage billing

…issions

octoper · 2025-05-06T08:35:06Z

Description

Checklist

pnpm test runs as expected.
pnpm build runs as expected.
(If applicable) JSDoc comments have been added or updated for any package exports
(If applicable) Documentation has been updated

Type of change

changeset-bot · 2025-05-06T08:35:10Z

🦋 Changeset detected

Latest commit: 155b55d

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 4 packages

Name	Type
@clerk/localizations	Patch
@clerk/clerk-js	Patch
@clerk/chrome-extension	Patch
@clerk/clerk-expo	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

vercel · 2025-05-06T08:35:10Z

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
clerk-js-sandbox	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	May 8, 2025 7:49am

nikospapcom · 2025-05-06T08:40:36Z

+ Clerk.mountPricingTable(app, {
+ forOrganizations: true,
+ });


Will remove this too before merging

nikospapcom · 2025-05-06T08:40:55Z

 type="text/javascript"
 src="/<%= htmlRspackPlugin.files.js[0] %>"
- data-clerk-publishable-key="pk_test_dG91Y2hlZC1sYWR5YmlyZC0yMy5jbGVyay5hY2NvdW50cy5kZXYk"
+ data-clerk-publishable-key="pk_test_ZGV2b3RlZC15YWstMjkuY2xlcmsuYWNjb3VudHNzdGFnZS5kZXYk"


Left this for testing, will remove it before merge

panteliselef · 2025-05-06T14:53:55Z

 }

+ if (isDisabled) {
+ return children;


Is the below condition not working properly ?

alexcarpenter · 2025-05-06T19:07:18Z

+ sx={{
+ width: '100%',
+ }}
+ isDisabled={canManageBilling}


Doesn't the button have a isDisabled prop that we check for in the tooltip to handle wrapping with span to make it focusable?

Removed in favor of reading disabled from the child element which works from my testing. Let me know if I am missing something.

…not have permissions to manage billing # Conflicts: # packages/clerk-js/src/ui/components/OrganizationProfile/OrganizationBillingPage.tsx # packages/clerk-js/src/ui/components/PricingTable/PricingTableDefault.tsx # packages/localizations/src/en-US.ts

… permissions to manage billing

…issions

octoper · 2025-05-06T08:35:06Z

Description

Checklist

pnpm test runs as expected.
pnpm build runs as expected.
(If applicable) JSDoc comments have been added or updated for any package exports
(If applicable) Documentation has been updated

Type of change

changeset-bot · 2025-05-06T08:35:10Z

🦋 Changeset detected

Latest commit: 155b55d

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 4 packages

Name	Type
@clerk/localizations	Patch
@clerk/clerk-js	Patch
@clerk/chrome-extension	Patch
@clerk/clerk-expo	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

vercel · 2025-05-06T08:35:10Z

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
clerk-js-sandbox	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	May 8, 2025 7:49am

nikospapcom · 2025-05-06T08:40:36Z

+ Clerk.mountPricingTable(app, {
+ forOrganizations: true,
+ });


Will remove this too before merging

nikospapcom · 2025-05-06T08:40:55Z

 type="text/javascript"
 src="/<%= htmlRspackPlugin.files.js[0] %>"
- data-clerk-publishable-key="pk_test_dG91Y2hlZC1sYWR5YmlyZC0yMy5jbGVyay5hY2NvdW50cy5kZXYk"
+ data-clerk-publishable-key="pk_test_ZGV2b3RlZC15YWstMjkuY2xlcmsuYWNjb3VudHNzdGFnZS5kZXYk"


Left this for testing, will remove it before merge

panteliselef · 2025-05-06T14:53:55Z

 }

+ if (isDisabled) {
+ return children;


Is the below condition not working properly ?

alexcarpenter · 2025-05-06T19:07:18Z

+ sx={{
+ width: '100%',
+ }}
+ isDisabled={canManageBilling}


Doesn't the button have a isDisabled prop that we check for in the tooltip to handle wrapping with span to make it focusable?

Removed in favor of reading disabled from the child element which works from my testing. Let me know if I am missing something.

…not have permissions to manage billing # Conflicts: # packages/clerk-js/src/ui/components/OrganizationProfile/OrganizationBillingPage.tsx # packages/clerk-js/src/ui/components/PricingTable/PricingTableDefault.tsx # packages/localizations/src/en-US.ts

… permissions to manage billing

…issions

octoper · 2025-05-06T08:35:06Z

Description

Checklist

pnpm test runs as expected.
pnpm build runs as expected.
(If applicable) JSDoc comments have been added or updated for any package exports
(If applicable) Documentation has been updated

Type of change

changeset-bot · 2025-05-06T08:35:10Z

🦋 Changeset detected

Latest commit: 155b55d

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 4 packages

Name	Type
@clerk/localizations	Patch
@clerk/clerk-js	Patch
@clerk/chrome-extension	Patch
@clerk/clerk-expo	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

vercel · 2025-05-06T08:35:10Z

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
clerk-js-sandbox	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	May 8, 2025 7:49am

nikospapcom · 2025-05-06T08:40:36Z

+ Clerk.mountPricingTable(app, {
+ forOrganizations: true,
+ });


Will remove this too before merging

nikospapcom · 2025-05-06T08:40:55Z

 type="text/javascript"
 src="/<%= htmlRspackPlugin.files.js[0] %>"
- data-clerk-publishable-key="pk_test_dG91Y2hlZC1sYWR5YmlyZC0yMy5jbGVyay5hY2NvdW50cy5kZXYk"
+ data-clerk-publishable-key="pk_test_ZGV2b3RlZC15YWstMjkuY2xlcmsuYWNjb3VudHNzdGFnZS5kZXYk"


Left this for testing, will remove it before merge

panteliselef · 2025-05-06T14:53:55Z

 }

+ if (isDisabled) {
+ return children;


Is the below condition not working properly ?

alexcarpenter · 2025-05-06T19:07:18Z

+ sx={{
+ width: '100%',
+ }}
+ isDisabled={canManageBilling}


Doesn't the button have a isDisabled prop that we check for in the tooltip to handle wrapping with span to make it focusable?

Removed in favor of reading disabled from the child element which works from my testing. Let me know if I am missing something.

…not have permissions to manage billing # Conflicts: # packages/clerk-js/src/ui/components/OrganizationProfile/OrganizationBillingPage.tsx # packages/clerk-js/src/ui/components/PricingTable/PricingTableDefault.tsx # packages/localizations/src/en-US.ts

… permissions to manage billing

…issions

octoper · 2025-05-06T08:35:06Z

Description

Checklist

pnpm test runs as expected.
pnpm build runs as expected.
(If applicable) JSDoc comments have been added or updated for any package exports
(If applicable) Documentation has been updated

Type of change

changeset-bot · 2025-05-06T08:35:10Z

🦋 Changeset detected

Latest commit: 155b55d

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 4 packages

Name	Type
@clerk/localizations	Patch
@clerk/clerk-js	Patch
@clerk/chrome-extension	Patch
@clerk/clerk-expo	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

vercel · 2025-05-06T08:35:10Z

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
clerk-js-sandbox	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	May 8, 2025 7:49am

nikospapcom · 2025-05-06T08:40:36Z

+ Clerk.mountPricingTable(app, {
+ forOrganizations: true,
+ });


Will remove this too before merging

nikospapcom · 2025-05-06T08:40:55Z

 type="text/javascript"
 src="/<%= htmlRspackPlugin.files.js[0] %>"
- data-clerk-publishable-key="pk_test_dG91Y2hlZC1sYWR5YmlyZC0yMy5jbGVyay5hY2NvdW50cy5kZXYk"
+ data-clerk-publishable-key="pk_test_ZGV2b3RlZC15YWstMjkuY2xlcmsuYWNjb3VudHNzdGFnZS5kZXYk"


Left this for testing, will remove it before merge

panteliselef · 2025-05-06T14:53:55Z

 }

+ if (isDisabled) {
+ return children;


Is the below condition not working properly ?

alexcarpenter · 2025-05-06T19:07:18Z

+ sx={{
+ width: '100%',
+ }}
+ isDisabled={canManageBilling}


Doesn't the button have a isDisabled prop that we check for in the tooltip to handle wrapping with span to make it focusable?

Removed in favor of reading disabled from the child element which works from my testing. Let me know if I am missing something.

…not have permissions to manage billing # Conflicts: # packages/clerk-js/src/ui/components/OrganizationProfile/OrganizationBillingPage.tsx # packages/clerk-js/src/ui/components/PricingTable/PricingTableDefault.tsx # packages/localizations/src/en-US.ts

… permissions to manage billing

…issions

octoper · 2025-05-06T08:35:06Z

Description

Checklist

pnpm test runs as expected.
pnpm build runs as expected.
(If applicable) JSDoc comments have been added or updated for any package exports
(If applicable) Documentation has been updated

Type of change

changeset-bot · 2025-05-06T08:35:10Z

🦋 Changeset detected

Latest commit: 155b55d

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 4 packages

Name	Type
@clerk/localizations	Patch
@clerk/clerk-js	Patch
@clerk/chrome-extension	Patch
@clerk/clerk-expo	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

vercel · 2025-05-06T08:35:10Z

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
clerk-js-sandbox	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	May 8, 2025 7:49am

nikospapcom · 2025-05-06T08:40:36Z

+ Clerk.mountPricingTable(app, {
+ forOrganizations: true,
+ });


Will remove this too before merging

nikospapcom · 2025-05-06T08:40:55Z

 type="text/javascript"
 src="/<%= htmlRspackPlugin.files.js[0] %>"
- data-clerk-publishable-key="pk_test_dG91Y2hlZC1sYWR5YmlyZC0yMy5jbGVyay5hY2NvdW50cy5kZXYk"
+ data-clerk-publishable-key="pk_test_ZGV2b3RlZC15YWstMjkuY2xlcmsuYWNjb3VudHNzdGFnZS5kZXYk"


Left this for testing, will remove it before merge

panteliselef · 2025-05-06T14:53:55Z

 }

+ if (isDisabled) {
+ return children;


Is the below condition not working properly ?

alexcarpenter · 2025-05-06T19:07:18Z

+ sx={{
+ width: '100%',
+ }}
+ isDisabled={canManageBilling}


Doesn't the button have a isDisabled prop that we check for in the tooltip to handle wrapping with span to make it focusable?

Removed in favor of reading disabled from the child element which works from my testing. Let me know if I am missing something.

…not have permissions to manage billing # Conflicts: # packages/clerk-js/src/ui/components/OrganizationProfile/OrganizationBillingPage.tsx # packages/clerk-js/src/ui/components/PricingTable/PricingTableDefault.tsx # packages/localizations/src/en-US.ts

… permissions to manage billing

…issions

octoper · 2025-05-06T08:35:06Z

Description

Checklist

pnpm test runs as expected.
pnpm build runs as expected.
(If applicable) JSDoc comments have been added or updated for any package exports
(If applicable) Documentation has been updated

Type of change

changeset-bot · 2025-05-06T08:35:10Z

🦋 Changeset detected

Latest commit: 155b55d

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 4 packages

Name	Type
@clerk/localizations	Patch
@clerk/clerk-js	Patch
@clerk/chrome-extension	Patch
@clerk/clerk-expo	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

vercel · 2025-05-06T08:35:10Z

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
clerk-js-sandbox	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	May 8, 2025 7:49am

nikospapcom · 2025-05-06T08:40:36Z

+ Clerk.mountPricingTable(app, {
+ forOrganizations: true,
+ });


Will remove this too before merging

nikospapcom · 2025-05-06T08:40:55Z

 type="text/javascript"
 src="/<%= htmlRspackPlugin.files.js[0] %>"
- data-clerk-publishable-key="pk_test_dG91Y2hlZC1sYWR5YmlyZC0yMy5jbGVyay5hY2NvdW50cy5kZXYk"
+ data-clerk-publishable-key="pk_test_ZGV2b3RlZC15YWstMjkuY2xlcmsuYWNjb3VudHNzdGFnZS5kZXYk"


Left this for testing, will remove it before merge

panteliselef · 2025-05-06T14:53:55Z

 }

+ if (isDisabled) {
+ return children;


Is the below condition not working properly ?

alexcarpenter · 2025-05-06T19:07:18Z

+ sx={{
+ width: '100%',
+ }}
+ isDisabled={canManageBilling}


Doesn't the button have a isDisabled prop that we check for in the tooltip to handle wrapping with span to make it focusable?

Removed in favor of reading disabled from the child element which works from my testing. Let me know if I am missing something.

…not have permissions to manage billing # Conflicts: # packages/clerk-js/src/ui/components/OrganizationProfile/OrganizationBillingPage.tsx # packages/clerk-js/src/ui/components/PricingTable/PricingTableDefault.tsx # packages/localizations/src/en-US.ts

… permissions to manage billing

…issions

clerk-cookie added clerk-js localizations labels May 6, 2025

vercelBotdeployed to Preview May 6, 2025 08:36 View deployment

octoper requested review from alexcarpenter, nikosdouvlis and nikospapcom May 6, 2025 08:40

octoper self-assigned this May 6, 2025

nikospapcom reviewed May 6, 2025
View reviewed changes

vercelBotdeployed to Preview May 6, 2025 08:41 View deployment

octoper marked this pull request as ready for review May 6, 2025 08:43

nikosdouvlis approved these changes May 6, 2025
View reviewed changes

panteliselef reviewed May 6, 2025
View reviewed changes

octoper marked this pull request as draft May 6, 2025 14:55

alexcarpenter reviewed May 6, 2025
View reviewed changes

vercelBotdeployed to Preview May 6, 2025 19:20 View deployment

vercelBotdeployed to Preview May 6, 2025 19:46 View deployment

octoperand others added 6 commits May 7, 2025 14:01

chore(repo): Add changeset
86210c8

wip
c556db8

wip
f8b04e8

cleanup
13af6cf

cleanup
c9cb7ad

octoper force-pushed the vaggelis/add-tooltips-with-reason-if-no-permissions branch from d888c19 to c9cb7adCompare May 7, 2025 11:01

clerk-cookie removed the localizations label May 7, 2025

vercelBotdeployed to Preview May 7, 2025 11:02 View deployment

feat(clerk-js): Add tooltip to action button in pricing table when no…
457b2bd
… permissions to manage billing

clerk-cookie added the localizations label May 7, 2025

vercelBotdeployed to Preview May 7, 2025 11:26 View deployment

octoper added 2 commits May 7, 2025 14:33

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

cleanup
e224999

octoper marked this pull request as ready for review May 7, 2025 11:35

vercelBotdeployed to Preview May 7, 2025 11:35 View deployment

octoper requested review from nikospapcom and panteliselef May 7, 2025 12:25

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

vercelBotdeployed to Preview May 7, 2025 12:26 View deployment

octoper requested review from alexcarpenter and nikosdouvlis May 7, 2025 13:55

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

vercelBotdeployed to Preview May 8, 2025 07:49 View deployment

alexcarpenter approved these changes May 8, 2025
View reviewed changes

alexcarpenter merged commit d81c1c1 into mainMay 8, 2025

alexcarpenter deleted the vaggelis/add-tooltips-with-reason-if-no-permissions branch May 8, 2025 13:31

clerk-cookie mentioned this pull request May 8, 2025
ci(repo): Version packages #5874
Merged