fix(clerk-js): Hide billing tab when appropriate#6696

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
panteliselef merged 6 commits into from
Sep 4, 2025
Merged

fix(clerk-js): Hide billing tab when appropriate #6696

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
c9b59fe
fix(clerk-js): Hide billing tab when appropriate
panteliselef Sep 3, 2025
9be19d3
Patch hooks
panteliselef Sep 3, 2025
5047efe
add tests
panteliselef Sep 3, 2025
7774ece
add billing to fixtures
panteliselef Sep 3, 2025
dfce2a6
improve enablement logic
panteliselef Sep 3, 2025
3bc2b34
apply SubscriberTypeContext
panteliselef Sep 3, 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
5 changes: 5 additions & 0 deletions .changeset/grumpy-bags-bow.md
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
---
'@clerk/shared': patch
---

Disable billing hooks when the feature is turned off.
5 changes: 5 additions & 0 deletions .changeset/mighty-lions-cut.md
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
---
'@clerk/clerk-js': patch
---

Hide billing tab when no paid plans exist, the user does not have a current or past subscription.
10 changes: 10 additions & 0 deletions packages/clerk-js/src/ui/components/Checkout/__tests__/Checkout.test.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -27,6 +27,7 @@ describe('Checkout', () => {
it('displays spinner when checkout is initializing', async () => {
const { wrapper, fixtures } = await createFixtures(f => {
f.withUser({ email_addresses: ['test@clerk.com'] });
f.withBilling();
});

// Mock billing to prevent actual API calls and stay in loading state
Expand DownExpand Up@@ -98,6 +99,7 @@ describe('Checkout', () => {
it('handles checkout initialization errors gracefully', async () => {
const { wrapper, fixtures } = await createFixtures(f => {
f.withUser({ email_addresses: ['test@clerk.com'] });
f.withBilling();
});

// Mock billing to reject with a Clerk-like error shape
Expand DownExpand Up@@ -129,6 +131,7 @@ describe('Checkout', () => {
it('displays proper loading state during checkout initialization', async () => {
const { wrapper, fixtures } = await createFixtures(f => {
f.withUser({ email_addresses: ['test@clerk.com'] });
f.withBilling();
});

// Mock billing to stay in loading state
Expand DownExpand Up@@ -161,6 +164,7 @@ describe('Checkout', () => {
it('maintains accessibility attributes correctly', async () => {
const { wrapper, fixtures } = await createFixtures(f => {
f.withUser({ email_addresses: ['test@clerk.com'] });
f.withBilling();
});

fixtures.clerk.billing.startCheckout.mockImplementation(() => new Promise(() => {}));
Expand DownExpand Up@@ -201,6 +205,7 @@ describe('Checkout', () => {
it('renders without crashing when all required props are provided', async () => {
const { wrapper, fixtures } = await createFixtures(f => {
f.withUser({ email_addresses: ['test@clerk.com'] });
f.withBilling();
});

// Mock billing to prevent actual API calls
Expand DownExpand Up@@ -228,6 +233,7 @@ describe('Checkout', () => {
it('renders without errors for monthly period', async () => {
const { wrapper, fixtures } = await createFixtures(f => {
f.withUser({ email_addresses: ['test@clerk.com'] });
f.withBilling();
});
fixtures.clerk.billing.startCheckout.mockImplementation(() => new Promise(() => {}));
const { baseElement } = render(
Expand DownExpand Up@@ -272,6 +278,7 @@ describe('Checkout', () => {
it('renders with correct CSS classes and structure', async () => {
const { wrapper, fixtures } = await createFixtures(f => {
f.withUser({ email_addresses: ['test@clerk.com'] });
f.withBilling();
});

fixtures.clerk.billing.startCheckout.mockImplementation(() => new Promise(() => {}));
Expand DownExpand Up@@ -305,6 +312,7 @@ describe('Checkout', () => {
it('renders free trial details during confirmation stage', async () => {
const { wrapper, fixtures } = await createFixtures(f => {
f.withUser({ email_addresses: ['test@clerk.com'] });
f.withBilling();
});

const freeTrialEndsAt = new Date('2025-08-19');
Expand DownExpand Up@@ -388,6 +396,7 @@ describe('Checkout', () => {
it('renders trial success details in completed stage', async () => {
const { wrapper, fixtures } = await createFixtures(f => {
f.withUser({ email_addresses: ['test@clerk.com'] });
f.withBilling();
});

const freeTrialEndsAt = new Date('2025-08-19');
Expand DownExpand Up@@ -469,6 +478,7 @@ describe('Checkout', () => {
it('renders existing payment sources during checkout confirmation', async () => {
const { wrapper, fixtures } = await createFixtures(f => {
f.withUser({ email_addresses: ['test@clerk.com'] });
f.withBilling();
});

fixtures.clerk.user?.getPaymentSources.mockResolvedValue({
Expand Down
4 changes: 2 additions & 2 deletions packages/clerk-js/src/ui/components/OrganizationProfile/OrganizationProfileRoutes.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -38,7 +38,7 @@ const OrganizationPaymentAttemptPage = lazy(() =>
);

export const OrganizationProfileRoutes = () => {
const { pages, isMembersPageRoot, isGeneralPageRoot, isBillingPageRoot, isApiKeysPageRoot } =
const { pages, isMembersPageRoot, isGeneralPageRoot, isBillingPageRoot, isApiKeysPageRoot, shouldShowBilling } =
useOrganizationProfileContext();
const { apiKeysSettings, commerceSettings } = useEnvironment();

Expand DownExpand Up@@ -83,7 +83,7 @@ export const OrganizationProfileRoutes = () => {
</Route>
</Switch>
</Route>
{commerceSettings.billing.organization.enabled ? (
{commerceSettings.billing.organization.enabled && shouldShowBilling ? (
<Protect
condition={has =>
has({ permission: 'org:sys_billing:read' }) || has({ permission: 'org:sys_billing:manage' })
Expand Down
6 changes: 4 additions & 2 deletions packages/clerk-js/src/ui/components/OrganizationProfile/index.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -7,7 +7,7 @@ import { NavbarMenuButtonRow } from '@/ui/elements/Navbar';
import { ProfileCard } from '@/ui/elements/ProfileCard';

import { ORGANIZATION_PROFILE_CARD_SCROLLBOX_ID } from '../../constants';
import { OrganizationProfileContext, withCoreUserGuard } from '../../contexts';
import { OrganizationProfileContext, SubscriberTypeContext, withCoreUserGuard } from '../../contexts';
import { Flow, localizationKeys } from '../../customizables';
import { Route, Switch } from '../../router';
import type { OrganizationProfileCtx } from '../../types';
Expand All@@ -26,7 +26,9 @@ const _OrganizationProfile = (_: OrganizationProfileProps) => {
<Flow.Part>
<Switch>
<Route>
<AuthenticatedRoutes />
<SubscriberTypeContext.Provider value='organization'>
<AuthenticatedRoutes />
</SubscriberTypeContext.Provider>
</Route>
</Switch>
</Flow.Part>
Expand Down
19 changes: 16 additions & 3 deletions packages/clerk-js/src/ui/components/PricingTable/__tests__/PricingTable.test.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -44,6 +44,7 @@ describe('PricingTable - trial info', () => {

it('shows footer notice with trial end date when active subscription is in free trial', async () => {
const { wrapper, fixtures, props } = await createFixtures(f => {
f.withBilling();
f.withUser({ email_addresses: ['test@clerk.com'] });
});

Expand DownExpand Up@@ -99,6 +100,7 @@ describe('PricingTable - trial info', () => {
it('shows CTA "Start N-day free trial" when eligible and plan has trial', async () => {
const { wrapper, fixtures, props } = await createFixtures(f => {
f.withUser({ email_addresses: ['test@clerk.com'] });
f.withBilling();
});

// Provide empty props to the PricingTable context
Expand DownExpand Up@@ -130,7 +132,9 @@ describe('PricingTable - trial info', () => {
});

it('shows CTA "Start N-day free trial" when user is signed out and plan has trial', async () => {
const { wrapper, fixtures, props } = await createFixtures();
const { wrapper, fixtures, props } = await createFixtures(f => {
f.withBilling();
});

// Provide empty props to the PricingTable context
props.setProps({});
Expand All@@ -149,7 +153,9 @@ describe('PricingTable - trial info', () => {
});

it('shows CTA "Subscribe" when user is signed out and plan has no trial', async () => {
const { wrapper, fixtures, props } = await createFixtures();
const { wrapper, fixtures, props } = await createFixtures(f => {
f.withBilling();
});

const nonTrialPlan = {
...trialPlan,
Expand DownExpand Up@@ -178,6 +184,7 @@ describe('PricingTable - trial info', () => {
it('shows footer notice with "starts at" when subscription is upcoming and not a free trial', async () => {
const { wrapper, fixtures, props } = await createFixtures(f => {
f.withUser({ email_addresses: ['test@clerk.com'] });
f.withBilling();
});

// Provide empty props to the PricingTable context
Expand DownExpand Up@@ -301,6 +308,7 @@ describe('PricingTable - plans visibility', () => {
it('shows plans when user is signed in and has a subscription', async () => {
const { wrapper, fixtures, props } = await createFixtures(f => {
f.withUser({ email_addresses: ['test@clerk.com'] });
f.withBilling();
});

// Provide empty props to the PricingTable context
Expand DownExpand Up@@ -347,7 +355,9 @@ describe('PricingTable - plans visibility', () => {
});

it('shows plans when user is signed out', async () => {
const { wrapper, fixtures, props } = await createFixtures();
const { wrapper, fixtures, props } = await createFixtures(f => {
f.withBilling();
});

// Provide empty props to the PricingTable context
props.setProps({});
Expand All@@ -367,6 +377,7 @@ describe('PricingTable - plans visibility', () => {
it('shows no plans when user is signed in but subscription is null', async () => {
const { wrapper, fixtures, props } = await createFixtures(f => {
f.withUser({ email_addresses: ['test@clerk.com'] });
f.withBilling();
});

// Provide empty props to the PricingTable context
Expand All@@ -387,6 +398,7 @@ describe('PricingTable - plans visibility', () => {
it('shows no plans when user is signed in but subscription is undefined', async () => {
const { wrapper, fixtures, props } = await createFixtures(f => {
f.withUser({ email_addresses: ['test@clerk.com'] });
f.withBilling();
});

// Provide empty props to the PricingTable context
Expand All@@ -407,6 +419,7 @@ describe('PricingTable - plans visibility', () => {
it('prevents flicker by not showing plans while subscription is loading', async () => {
const { wrapper, fixtures, props } = await createFixtures(f => {
f.withUser({ email_addresses: ['test@clerk.com'] });
f.withBilling();
});

// Provide empty props to the PricingTable context
Expand Down
12 changes: 12 additions & 0 deletions ...ges/clerk-js/src/ui/components/SubscriptionDetails/__tests__/SubscriptionDetails.test.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -10,6 +10,7 @@ describe('SubscriptionDetails', () => {
it('Displays spinner when init loading', async () => {
const { wrapper } = await createFixtures(f => {
f.withUser({ email_addresses: ['test@clerk.com'] });
f.withBilling();
});

const { baseElement } = render(
Expand All@@ -31,6 +32,7 @@ describe('SubscriptionDetails', () => {
it('single active monthly subscription', async () => {
const { wrapper, fixtures } = await createFixtures(f => {
f.withUser({ email_addresses: ['test@clerk.com'] });
f.withBilling();
});

fixtures.clerk.billing.getSubscription.mockResolvedValue({
Expand DownExpand Up@@ -134,6 +136,7 @@ describe('SubscriptionDetails', () => {
it('single active annual subscription', async () => {
const { wrapper, fixtures } = await createFixtures(f => {
f.withUser({ email_addresses: ['test@clerk.com'] });
f.withBilling();
});

fixtures.clerk.billing.getSubscription.mockResolvedValue({
Expand DownExpand Up@@ -237,6 +240,7 @@ describe('SubscriptionDetails', () => {
it('active free subscription', async () => {
const { wrapper, fixtures } = await createFixtures(f => {
f.withUser({ email_addresses: ['test@clerk.com'] });
f.withBilling();
});

fixtures.clerk.billing.getSubscription.mockResolvedValue({
Expand DownExpand Up@@ -319,6 +323,7 @@ describe('SubscriptionDetails', () => {
it('one active annual and one upcoming monthly subscription', async () => {
const { wrapper, fixtures } = await createFixtures(f => {
f.withUser({ email_addresses: ['test@clerk.com'] });
f.withBilling();
});

const planAnnual = {
Expand DownExpand Up@@ -478,6 +483,7 @@ describe('SubscriptionDetails', () => {
it('one active and one upcoming FREE subscription', async () => {
const { wrapper, fixtures } = await createFixtures(f => {
f.withUser({ email_addresses: ['test@clerk.com'] });
f.withBilling();
});

const planMonthly = {
Expand DownExpand Up@@ -614,6 +620,7 @@ describe('SubscriptionDetails', () => {
it('allows cancelling a subscription of a monthly plan', async () => {
const { wrapper, fixtures } = await createFixtures(f => {
f.withUser({ email_addresses: ['test@clerk.com'] });
f.withBilling();
});

const cancelSubscriptionMock = jest.fn().mockResolvedValue({});
Expand DownExpand Up@@ -718,6 +725,7 @@ describe('SubscriptionDetails', () => {
it('calls resubscribe when the user clicks Resubscribe for a canceled subscription', async () => {
const { wrapper, fixtures } = await createFixtures(f => {
f.withUser({ email_addresses: ['test@clerk.com'] });
f.withBilling();
});

const plan = {
Expand DownExpand Up@@ -820,6 +828,7 @@ describe('SubscriptionDetails', () => {
it('calls switchToMonthly when the user clicks Switch to monthly for an annual subscription', async () => {
const { wrapper, fixtures } = await createFixtures(f => {
f.withUser({ email_addresses: ['test@clerk.com'] });
f.withBilling();
});

const plan = {
Expand DownExpand Up@@ -925,6 +934,7 @@ describe('SubscriptionDetails', () => {
it('past due subscription shows correct status and disables actions', async () => {
const { wrapper, fixtures } = await createFixtures(f => {
f.withUser({ email_addresses: ['test@clerk.com'] });
f.withBilling();
});

const plan = {
Expand DownExpand Up@@ -1017,6 +1027,7 @@ describe('SubscriptionDetails', () => {
it('active free trial subscription shows correct labels and behavior', async () => {
const { wrapper, fixtures } = await createFixtures(f => {
f.withUser({ email_addresses: ['test@clerk.com'] });
f.withBilling();
});

fixtures.clerk.billing.getSubscription.mockResolvedValue({
Expand DownExpand Up@@ -1125,6 +1136,7 @@ describe('SubscriptionDetails', () => {
it('allows cancelling a free trial with specific dialog text', async () => {
const { wrapper, fixtures } = await createFixtures(f => {
f.withUser({ email_addresses: ['test@clerk.com'] });
f.withBilling();
});

const cancelSubscriptionMock = jest.fn().mockResolvedValue({});
Expand Down
4 changes: 4 additions & 0 deletions packages/clerk-js/src/ui/components/Subscriptions/__tests__/SubscriptionsList.test.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -19,6 +19,7 @@ describe('SubscriptionsList', () => {
it('displays free trial badge when subscription is in free trial', async () => {
const { wrapper, fixtures } = await createFixtures(f => {
f.withUser({ email_addresses: ['test@clerk.com'] });
f.withBilling();
});

const freeTrialSubscription = {
Expand DownExpand Up@@ -82,6 +83,7 @@ describe('SubscriptionsList', () => {
it('on past due, no badge, but past due date is shown', async () => {
const { wrapper, fixtures } = await createFixtures(f => {
f.withUser({ email_addresses: ['test@clerk.com'] });
f.withBilling();
});

const pastDueSubscription = {
Expand DownExpand Up@@ -146,6 +148,7 @@ describe('SubscriptionsList', () => {
it('does not display active badge when subscription is active and it is a single item', async () => {
const { wrapper, fixtures } = await createFixtures(f => {
f.withUser({ email_addresses: ['test@clerk.com'] });
f.withBilling();
});

const activeSubscription = {
Expand DownExpand Up@@ -209,6 +212,7 @@ describe('SubscriptionsList', () => {
it('renders upcomming badge when current subscription is canceled but active', async () => {
const { wrapper, fixtures } = await createFixtures(f => {
f.withUser({ email_addresses: ['test@clerk.com'] });
f.withBilling();
});

const upcomingSubscription = {
Expand Down
4 changes: 2 additions & 2 deletions packages/clerk-js/src/ui/components/UserProfile/UserProfileRoutes.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -38,7 +38,7 @@ const PaymentAttemptPage = lazy(() =>
);

export const UserProfileRoutes = () => {
const { pages } = useUserProfileContext();
const { pages, shouldShowBilling } = useUserProfileContext();
const { apiKeysSettings, commerceSettings } = useEnvironment();

const isAccountPageRoot = pages.routes[0].id === USER_PROFILE_NAVBAR_ROUTE_ID.ACCOUNT;
Expand DownExpand Up@@ -80,7 +80,7 @@ export const UserProfileRoutes = () => {
</Route>
</Switch>
</Route>
{commerceSettings.billing.user.enabled ? (
{commerceSettings.billing.user.enabled && shouldShowBilling ? (
<Route path={isBillingPageRoot ? undefined : 'billing'}>
<Switch>
<Route index>
Expand Down
Loading
Loading
, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Add copy buttons to all \u003cpre\u003e\u003ccode\u003e 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

fix(clerk-js): Hide billing tab when appropriate#6696

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
panteliselef merged 6 commits into from
Sep 4, 2025
Merged

fix(clerk-js): Hide billing tab when appropriate #6696

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
c9b59fe
fix(clerk-js): Hide billing tab when appropriate
panteliselef Sep 3, 2025
9be19d3
Patch hooks
panteliselef Sep 3, 2025
5047efe
add tests
panteliselef Sep 3, 2025
7774ece
add billing to fixtures
panteliselef Sep 3, 2025
dfce2a6
improve enablement logic
panteliselef Sep 3, 2025
3bc2b34
apply SubscriberTypeContext
panteliselef Sep 3, 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
5 changes: 5 additions & 0 deletions .changeset/grumpy-bags-bow.md
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
---
'@clerk/shared': patch
---

Disable billing hooks when the feature is turned off.
5 changes: 5 additions & 0 deletions .changeset/mighty-lions-cut.md
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
---
'@clerk/clerk-js': patch
---

Hide billing tab when no paid plans exist, the user does not have a current or past subscription.
10 changes: 10 additions & 0 deletions packages/clerk-js/src/ui/components/Checkout/__tests__/Checkout.test.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -27,6 +27,7 @@ describe('Checkout', () => {
it('displays spinner when checkout is initializing', async () => {
const { wrapper, fixtures } = await createFixtures(f => {
f.withUser({ email_addresses: ['test@clerk.com'] });
f.withBilling();
});

// Mock billing to prevent actual API calls and stay in loading state
Expand DownExpand Up@@ -98,6 +99,7 @@ describe('Checkout', () => {
it('handles checkout initialization errors gracefully', async () => {
const { wrapper, fixtures } = await createFixtures(f => {
f.withUser({ email_addresses: ['test@clerk.com'] });
f.withBilling();
});

// Mock billing to reject with a Clerk-like error shape
Expand DownExpand Up@@ -129,6 +131,7 @@ describe('Checkout', () => {
it('displays proper loading state during checkout initialization', async () => {
const { wrapper, fixtures } = await createFixtures(f => {
f.withUser({ email_addresses: ['test@clerk.com'] });
f.withBilling();
});

// Mock billing to stay in loading state
Expand DownExpand Up@@ -161,6 +164,7 @@ describe('Checkout', () => {
it('maintains accessibility attributes correctly', async () => {
const { wrapper, fixtures } = await createFixtures(f => {
f.withUser({ email_addresses: ['test@clerk.com'] });
f.withBilling();
});

fixtures.clerk.billing.startCheckout.mockImplementation(() => new Promise(() => {}));
Expand DownExpand Up@@ -201,6 +205,7 @@ describe('Checkout', () => {
it('renders without crashing when all required props are provided', async () => {
const { wrapper, fixtures } = await createFixtures(f => {
f.withUser({ email_addresses: ['test@clerk.com'] });
f.withBilling();
});

// Mock billing to prevent actual API calls
Expand DownExpand Up@@ -228,6 +233,7 @@ describe('Checkout', () => {
it('renders without errors for monthly period', async () => {
const { wrapper, fixtures } = await createFixtures(f => {
f.withUser({ email_addresses: ['test@clerk.com'] });
f.withBilling();
});
fixtures.clerk.billing.startCheckout.mockImplementation(() => new Promise(() => {}));
const { baseElement } = render(
Expand DownExpand Up@@ -272,6 +278,7 @@ describe('Checkout', () => {
it('renders with correct CSS classes and structure', async () => {
const { wrapper, fixtures } = await createFixtures(f => {
f.withUser({ email_addresses: ['test@clerk.com'] });
f.withBilling();
});

fixtures.clerk.billing.startCheckout.mockImplementation(() => new Promise(() => {}));
Expand DownExpand Up@@ -305,6 +312,7 @@ describe('Checkout', () => {
it('renders free trial details during confirmation stage', async () => {
const { wrapper, fixtures } = await createFixtures(f => {
f.withUser({ email_addresses: ['test@clerk.com'] });
f.withBilling();
});

const freeTrialEndsAt = new Date('2025-08-19');
Expand DownExpand Up@@ -388,6 +396,7 @@ describe('Checkout', () => {
it('renders trial success details in completed stage', async () => {
const { wrapper, fixtures } = await createFixtures(f => {
f.withUser({ email_addresses: ['test@clerk.com'] });
f.withBilling();
});

const freeTrialEndsAt = new Date('2025-08-19');
Expand DownExpand Up@@ -469,6 +478,7 @@ describe('Checkout', () => {
it('renders existing payment sources during checkout confirmation', async () => {
const { wrapper, fixtures } = await createFixtures(f => {
f.withUser({ email_addresses: ['test@clerk.com'] });
f.withBilling();
});

fixtures.clerk.user?.getPaymentSources.mockResolvedValue({
Expand Down
4 changes: 2 additions & 2 deletions packages/clerk-js/src/ui/components/OrganizationProfile/OrganizationProfileRoutes.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -38,7 +38,7 @@ const OrganizationPaymentAttemptPage = lazy(() =>
);

export const OrganizationProfileRoutes = () => {
const { pages, isMembersPageRoot, isGeneralPageRoot, isBillingPageRoot, isApiKeysPageRoot } =
const { pages, isMembersPageRoot, isGeneralPageRoot, isBillingPageRoot, isApiKeysPageRoot, shouldShowBilling } =
useOrganizationProfileContext();
const { apiKeysSettings, commerceSettings } = useEnvironment();

Expand DownExpand Up@@ -83,7 +83,7 @@ export const OrganizationProfileRoutes = () => {
</Route>
</Switch>
</Route>
{commerceSettings.billing.organization.enabled ? (
{commerceSettings.billing.organization.enabled && shouldShowBilling ? (
<Protect
condition={has =>
has({ permission: 'org:sys_billing:read' }) || has({ permission: 'org:sys_billing:manage' })
Expand Down
6 changes: 4 additions & 2 deletions packages/clerk-js/src/ui/components/OrganizationProfile/index.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -7,7 +7,7 @@ import { NavbarMenuButtonRow } from '@/ui/elements/Navbar';
import { ProfileCard } from '@/ui/elements/ProfileCard';

import { ORGANIZATION_PROFILE_CARD_SCROLLBOX_ID } from '../../constants';
import { OrganizationProfileContext, withCoreUserGuard } from '../../contexts';
import { OrganizationProfileContext, SubscriberTypeContext, withCoreUserGuard } from '../../contexts';
import { Flow, localizationKeys } from '../../customizables';
import { Route, Switch } from '../../router';
import type { OrganizationProfileCtx } from '../../types';
Expand All@@ -26,7 +26,9 @@ const _OrganizationProfile = (_: OrganizationProfileProps) => {
<Flow.Part>
<Switch>
<Route>
<AuthenticatedRoutes />
<SubscriberTypeContext.Provider value='organization'>
<AuthenticatedRoutes />
</SubscriberTypeContext.Provider>
</Route>
</Switch>
</Flow.Part>
Expand Down
19 changes: 16 additions & 3 deletions packages/clerk-js/src/ui/components/PricingTable/__tests__/PricingTable.test.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -44,6 +44,7 @@ describe('PricingTable - trial info', () => {

it('shows footer notice with trial end date when active subscription is in free trial', async () => {
const { wrapper, fixtures, props } = await createFixtures(f => {
f.withBilling();
f.withUser({ email_addresses: ['test@clerk.com'] });
});

Expand DownExpand Up@@ -99,6 +100,7 @@ describe('PricingTable - trial info', () => {
it('shows CTA "Start N-day free trial" when eligible and plan has trial', async () => {
const { wrapper, fixtures, props } = await createFixtures(f => {
f.withUser({ email_addresses: ['test@clerk.com'] });
f.withBilling();
});

// Provide empty props to the PricingTable context
Expand DownExpand Up@@ -130,7 +132,9 @@ describe('PricingTable - trial info', () => {
});

it('shows CTA "Start N-day free trial" when user is signed out and plan has trial', async () => {
const { wrapper, fixtures, props } = await createFixtures();
const { wrapper, fixtures, props } = await createFixtures(f => {
f.withBilling();
});

// Provide empty props to the PricingTable context
props.setProps({});
Expand All@@ -149,7 +153,9 @@ describe('PricingTable - trial info', () => {
});

it('shows CTA "Subscribe" when user is signed out and plan has no trial', async () => {
const { wrapper, fixtures, props } = await createFixtures();
const { wrapper, fixtures, props } = await createFixtures(f => {
f.withBilling();
});

const nonTrialPlan = {
...trialPlan,
Expand DownExpand Up@@ -178,6 +184,7 @@ describe('PricingTable - trial info', () => {
it('shows footer notice with "starts at" when subscription is upcoming and not a free trial', async () => {
const { wrapper, fixtures, props } = await createFixtures(f => {
f.withUser({ email_addresses: ['test@clerk.com'] });
f.withBilling();
});

// Provide empty props to the PricingTable context
Expand DownExpand Up@@ -301,6 +308,7 @@ describe('PricingTable - plans visibility', () => {
it('shows plans when user is signed in and has a subscription', async () => {
const { wrapper, fixtures, props } = await createFixtures(f => {
f.withUser({ email_addresses: ['test@clerk.com'] });
f.withBilling();
});

// Provide empty props to the PricingTable context
Expand DownExpand Up@@ -347,7 +355,9 @@ describe('PricingTable - plans visibility', () => {
});

it('shows plans when user is signed out', async () => {
const { wrapper, fixtures, props } = await createFixtures();
const { wrapper, fixtures, props } = await createFixtures(f => {
f.withBilling();
});

// Provide empty props to the PricingTable context
props.setProps({});
Expand All@@ -367,6 +377,7 @@ describe('PricingTable - plans visibility', () => {
it('shows no plans when user is signed in but subscription is null', async () => {
const { wrapper, fixtures, props } = await createFixtures(f => {
f.withUser({ email_addresses: ['test@clerk.com'] });
f.withBilling();
});

// Provide empty props to the PricingTable context
Expand All@@ -387,6 +398,7 @@ describe('PricingTable - plans visibility', () => {
it('shows no plans when user is signed in but subscription is undefined', async () => {
const { wrapper, fixtures, props } = await createFixtures(f => {
f.withUser({ email_addresses: ['test@clerk.com'] });
f.withBilling();
});

// Provide empty props to the PricingTable context
Expand All@@ -407,6 +419,7 @@ describe('PricingTable - plans visibility', () => {
it('prevents flicker by not showing plans while subscription is loading', async () => {
const { wrapper, fixtures, props } = await createFixtures(f => {
f.withUser({ email_addresses: ['test@clerk.com'] });
f.withBilling();
});

// Provide empty props to the PricingTable context
Expand Down
12 changes: 12 additions & 0 deletions ...ges/clerk-js/src/ui/components/SubscriptionDetails/__tests__/SubscriptionDetails.test.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -10,6 +10,7 @@ describe('SubscriptionDetails', () => {
it('Displays spinner when init loading', async () => {
const { wrapper } = await createFixtures(f => {
f.withUser({ email_addresses: ['test@clerk.com'] });
f.withBilling();
});

const { baseElement } = render(
Expand All@@ -31,6 +32,7 @@ describe('SubscriptionDetails', () => {
it('single active monthly subscription', async () => {
const { wrapper, fixtures } = await createFixtures(f => {
f.withUser({ email_addresses: ['test@clerk.com'] });
f.withBilling();
});

fixtures.clerk.billing.getSubscription.mockResolvedValue({
Expand DownExpand Up@@ -134,6 +136,7 @@ describe('SubscriptionDetails', () => {
it('single active annual subscription', async () => {
const { wrapper, fixtures } = await createFixtures(f => {
f.withUser({ email_addresses: ['test@clerk.com'] });
f.withBilling();
});

fixtures.clerk.billing.getSubscription.mockResolvedValue({
Expand DownExpand Up@@ -237,6 +240,7 @@ describe('SubscriptionDetails', () => {
it('active free subscription', async () => {
const { wrapper, fixtures } = await createFixtures(f => {
f.withUser({ email_addresses: ['test@clerk.com'] });
f.withBilling();
});

fixtures.clerk.billing.getSubscription.mockResolvedValue({
Expand DownExpand Up@@ -319,6 +323,7 @@ describe('SubscriptionDetails', () => {
it('one active annual and one upcoming monthly subscription', async () => {
const { wrapper, fixtures } = await createFixtures(f => {
f.withUser({ email_addresses: ['test@clerk.com'] });
f.withBilling();
});

const planAnnual = {
Expand DownExpand Up@@ -478,6 +483,7 @@ describe('SubscriptionDetails', () => {
it('one active and one upcoming FREE subscription', async () => {
const { wrapper, fixtures } = await createFixtures(f => {
f.withUser({ email_addresses: ['test@clerk.com'] });
f.withBilling();
});

const planMonthly = {
Expand DownExpand Up@@ -614,6 +620,7 @@ describe('SubscriptionDetails', () => {
it('allows cancelling a subscription of a monthly plan', async () => {
const { wrapper, fixtures } = await createFixtures(f => {
f.withUser({ email_addresses: ['test@clerk.com'] });
f.withBilling();
});

const cancelSubscriptionMock = jest.fn().mockResolvedValue({});
Expand DownExpand Up@@ -718,6 +725,7 @@ describe('SubscriptionDetails', () => {
it('calls resubscribe when the user clicks Resubscribe for a canceled subscription', async () => {
const { wrapper, fixtures } = await createFixtures(f => {
f.withUser({ email_addresses: ['test@clerk.com'] });
f.withBilling();
});

const plan = {
Expand DownExpand Up@@ -820,6 +828,7 @@ describe('SubscriptionDetails', () => {
it('calls switchToMonthly when the user clicks Switch to monthly for an annual subscription', async () => {
const { wrapper, fixtures } = await createFixtures(f => {
f.withUser({ email_addresses: ['test@clerk.com'] });
f.withBilling();
});

const plan = {
Expand DownExpand Up@@ -925,6 +934,7 @@ describe('SubscriptionDetails', () => {
it('past due subscription shows correct status and disables actions', async () => {
const { wrapper, fixtures } = await createFixtures(f => {
f.withUser({ email_addresses: ['test@clerk.com'] });
f.withBilling();
});

const plan = {
Expand DownExpand Up@@ -1017,6 +1027,7 @@ describe('SubscriptionDetails', () => {
it('active free trial subscription shows correct labels and behavior', async () => {
const { wrapper, fixtures } = await createFixtures(f => {
f.withUser({ email_addresses: ['test@clerk.com'] });
f.withBilling();
});

fixtures.clerk.billing.getSubscription.mockResolvedValue({
Expand DownExpand Up@@ -1125,6 +1136,7 @@ describe('SubscriptionDetails', () => {
it('allows cancelling a free trial with specific dialog text', async () => {
const { wrapper, fixtures } = await createFixtures(f => {
f.withUser({ email_addresses: ['test@clerk.com'] });
f.withBilling();
});

const cancelSubscriptionMock = jest.fn().mockResolvedValue({});
Expand Down
4 changes: 4 additions & 0 deletions packages/clerk-js/src/ui/components/Subscriptions/__tests__/SubscriptionsList.test.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -19,6 +19,7 @@ describe('SubscriptionsList', () => {
it('displays free trial badge when subscription is in free trial', async () => {
const { wrapper, fixtures } = await createFixtures(f => {
f.withUser({ email_addresses: ['test@clerk.com'] });
f.withBilling();
});

const freeTrialSubscription = {
Expand DownExpand Up@@ -82,6 +83,7 @@ describe('SubscriptionsList', () => {
it('on past due, no badge, but past due date is shown', async () => {
const { wrapper, fixtures } = await createFixtures(f => {
f.withUser({ email_addresses: ['test@clerk.com'] });
f.withBilling();
});

const pastDueSubscription = {
Expand DownExpand Up@@ -146,6 +148,7 @@ describe('SubscriptionsList', () => {
it('does not display active badge when subscription is active and it is a single item', async () => {
const { wrapper, fixtures } = await createFixtures(f => {
f.withUser({ email_addresses: ['test@clerk.com'] });
f.withBilling();
});

const activeSubscription = {
Expand DownExpand Up@@ -209,6 +212,7 @@ describe('SubscriptionsList', () => {
it('renders upcomming badge when current subscription is canceled but active', async () => {
const { wrapper, fixtures } = await createFixtures(f => {
f.withUser({ email_addresses: ['test@clerk.com'] });
f.withBilling();
});

const upcomingSubscription = {
Expand Down
4 changes: 2 additions & 2 deletions packages/clerk-js/src/ui/components/UserProfile/UserProfileRoutes.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -38,7 +38,7 @@ const PaymentAttemptPage = lazy(() =>
);

export const UserProfileRoutes = () => {
const { pages } = useUserProfileContext();
const { pages, shouldShowBilling } = useUserProfileContext();
const { apiKeysSettings, commerceSettings } = useEnvironment();

const isAccountPageRoot = pages.routes[0].id === USER_PROFILE_NAVBAR_ROUTE_ID.ACCOUNT;
Expand DownExpand Up@@ -80,7 +80,7 @@ export const UserProfileRoutes = () => {
</Route>
</Switch>
</Route>
{commerceSettings.billing.user.enabled ? (
{commerceSettings.billing.user.enabled && shouldShowBilling ? (
<Route path={isBillingPageRoot ? undefined : 'billing'}>
<Switch>
<Route index>
Expand Down
Loading
Loading
, '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

fix(clerk-js): Hide billing tab when appropriate#6696

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
panteliselef merged 6 commits into from
Sep 4, 2025
Merged

fix(clerk-js): Hide billing tab when appropriate #6696

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
c9b59fe
fix(clerk-js): Hide billing tab when appropriate
panteliselef Sep 3, 2025
9be19d3
Patch hooks
panteliselef Sep 3, 2025
5047efe
add tests
panteliselef Sep 3, 2025
7774ece
add billing to fixtures
panteliselef Sep 3, 2025
dfce2a6
improve enablement logic
panteliselef Sep 3, 2025
3bc2b34
apply SubscriberTypeContext
panteliselef Sep 3, 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
5 changes: 5 additions & 0 deletions .changeset/grumpy-bags-bow.md
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
---
'@clerk/shared': patch
---

Disable billing hooks when the feature is turned off.
5 changes: 5 additions & 0 deletions .changeset/mighty-lions-cut.md
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
---
'@clerk/clerk-js': patch
---

Hide billing tab when no paid plans exist, the user does not have a current or past subscription.
10 changes: 10 additions & 0 deletions packages/clerk-js/src/ui/components/Checkout/__tests__/Checkout.test.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -27,6 +27,7 @@ describe('Checkout', () => {
it('displays spinner when checkout is initializing', async () => {
const { wrapper, fixtures } = await createFixtures(f => {
f.withUser({ email_addresses: ['test@clerk.com'] });
f.withBilling();
});

// Mock billing to prevent actual API calls and stay in loading state
Expand DownExpand Up@@ -98,6 +99,7 @@ describe('Checkout', () => {
it('handles checkout initialization errors gracefully', async () => {
const { wrapper, fixtures } = await createFixtures(f => {
f.withUser({ email_addresses: ['test@clerk.com'] });
f.withBilling();
});

// Mock billing to reject with a Clerk-like error shape
Expand DownExpand Up@@ -129,6 +131,7 @@ describe('Checkout', () => {
it('displays proper loading state during checkout initialization', async () => {
const { wrapper, fixtures } = await createFixtures(f => {
f.withUser({ email_addresses: ['test@clerk.com'] });
f.withBilling();
});

// Mock billing to stay in loading state
Expand DownExpand Up@@ -161,6 +164,7 @@ describe('Checkout', () => {
it('maintains accessibility attributes correctly', async () => {
const { wrapper, fixtures } = await createFixtures(f => {
f.withUser({ email_addresses: ['test@clerk.com'] });
f.withBilling();
});

fixtures.clerk.billing.startCheckout.mockImplementation(() => new Promise(() => {}));
Expand DownExpand Up@@ -201,6 +205,7 @@ describe('Checkout', () => {
it('renders without crashing when all required props are provided', async () => {
const { wrapper, fixtures } = await createFixtures(f => {
f.withUser({ email_addresses: ['test@clerk.com'] });
f.withBilling();
});

// Mock billing to prevent actual API calls
Expand DownExpand Up@@ -228,6 +233,7 @@ describe('Checkout', () => {
it('renders without errors for monthly period', async () => {
const { wrapper, fixtures } = await createFixtures(f => {
f.withUser({ email_addresses: ['test@clerk.com'] });
f.withBilling();
});
fixtures.clerk.billing.startCheckout.mockImplementation(() => new Promise(() => {}));
const { baseElement } = render(
Expand DownExpand Up@@ -272,6 +278,7 @@ describe('Checkout', () => {
it('renders with correct CSS classes and structure', async () => {
const { wrapper, fixtures } = await createFixtures(f => {
f.withUser({ email_addresses: ['test@clerk.com'] });
f.withBilling();
});

fixtures.clerk.billing.startCheckout.mockImplementation(() => new Promise(() => {}));
Expand DownExpand Up@@ -305,6 +312,7 @@ describe('Checkout', () => {
it('renders free trial details during confirmation stage', async () => {
const { wrapper, fixtures } = await createFixtures(f => {
f.withUser({ email_addresses: ['test@clerk.com'] });
f.withBilling();
});

const freeTrialEndsAt = new Date('2025-08-19');
Expand DownExpand Up@@ -388,6 +396,7 @@ describe('Checkout', () => {
it('renders trial success details in completed stage', async () => {
const { wrapper, fixtures } = await createFixtures(f => {
f.withUser({ email_addresses: ['test@clerk.com'] });
f.withBilling();
});

const freeTrialEndsAt = new Date('2025-08-19');
Expand DownExpand Up@@ -469,6 +478,7 @@ describe('Checkout', () => {
it('renders existing payment sources during checkout confirmation', async () => {
const { wrapper, fixtures } = await createFixtures(f => {
f.withUser({ email_addresses: ['test@clerk.com'] });
f.withBilling();
});

fixtures.clerk.user?.getPaymentSources.mockResolvedValue({
Expand Down
4 changes: 2 additions & 2 deletions packages/clerk-js/src/ui/components/OrganizationProfile/OrganizationProfileRoutes.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -38,7 +38,7 @@ const OrganizationPaymentAttemptPage = lazy(() =>
);

export const OrganizationProfileRoutes = () => {
const { pages, isMembersPageRoot, isGeneralPageRoot, isBillingPageRoot, isApiKeysPageRoot } =
const { pages, isMembersPageRoot, isGeneralPageRoot, isBillingPageRoot, isApiKeysPageRoot, shouldShowBilling } =
useOrganizationProfileContext();
const { apiKeysSettings, commerceSettings } = useEnvironment();

Expand DownExpand Up@@ -83,7 +83,7 @@ export const OrganizationProfileRoutes = () => {
</Route>
</Switch>
</Route>
{commerceSettings.billing.organization.enabled ? (
{commerceSettings.billing.organization.enabled && shouldShowBilling ? (
<Protect
condition={has =>
has({ permission: 'org:sys_billing:read' }) || has({ permission: 'org:sys_billing:manage' })
Expand Down
6 changes: 4 additions & 2 deletions packages/clerk-js/src/ui/components/OrganizationProfile/index.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -7,7 +7,7 @@ import { NavbarMenuButtonRow } from '@/ui/elements/Navbar';
import { ProfileCard } from '@/ui/elements/ProfileCard';

import { ORGANIZATION_PROFILE_CARD_SCROLLBOX_ID } from '../../constants';
import { OrganizationProfileContext, withCoreUserGuard } from '../../contexts';
import { OrganizationProfileContext, SubscriberTypeContext, withCoreUserGuard } from '../../contexts';
import { Flow, localizationKeys } from '../../customizables';
import { Route, Switch } from '../../router';
import type { OrganizationProfileCtx } from '../../types';
Expand All@@ -26,7 +26,9 @@ const _OrganizationProfile = (_: OrganizationProfileProps) => {
<Flow.Part>
<Switch>
<Route>
<AuthenticatedRoutes />
<SubscriberTypeContext.Provider value='organization'>
<AuthenticatedRoutes />
</SubscriberTypeContext.Provider>
</Route>
</Switch>
</Flow.Part>
Expand Down
19 changes: 16 additions & 3 deletions packages/clerk-js/src/ui/components/PricingTable/__tests__/PricingTable.test.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -44,6 +44,7 @@ describe('PricingTable - trial info', () => {

it('shows footer notice with trial end date when active subscription is in free trial', async () => {
const { wrapper, fixtures, props } = await createFixtures(f => {
f.withBilling();
f.withUser({ email_addresses: ['test@clerk.com'] });
});

Expand DownExpand Up@@ -99,6 +100,7 @@ describe('PricingTable - trial info', () => {
it('shows CTA "Start N-day free trial" when eligible and plan has trial', async () => {
const { wrapper, fixtures, props } = await createFixtures(f => {
f.withUser({ email_addresses: ['test@clerk.com'] });
f.withBilling();
});

// Provide empty props to the PricingTable context
Expand DownExpand Up@@ -130,7 +132,9 @@ describe('PricingTable - trial info', () => {
});

it('shows CTA "Start N-day free trial" when user is signed out and plan has trial', async () => {
const { wrapper, fixtures, props } = await createFixtures();
const { wrapper, fixtures, props } = await createFixtures(f => {
f.withBilling();
});

// Provide empty props to the PricingTable context
props.setProps({});
Expand All@@ -149,7 +153,9 @@ describe('PricingTable - trial info', () => {
});

it('shows CTA "Subscribe" when user is signed out and plan has no trial', async () => {
const { wrapper, fixtures, props } = await createFixtures();
const { wrapper, fixtures, props } = await createFixtures(f => {
f.withBilling();
});

const nonTrialPlan = {
...trialPlan,
Expand DownExpand Up@@ -178,6 +184,7 @@ describe('PricingTable - trial info', () => {
it('shows footer notice with "starts at" when subscription is upcoming and not a free trial', async () => {
const { wrapper, fixtures, props } = await createFixtures(f => {
f.withUser({ email_addresses: ['test@clerk.com'] });
f.withBilling();
});

// Provide empty props to the PricingTable context
Expand DownExpand Up@@ -301,6 +308,7 @@ describe('PricingTable - plans visibility', () => {
it('shows plans when user is signed in and has a subscription', async () => {
const { wrapper, fixtures, props } = await createFixtures(f => {
f.withUser({ email_addresses: ['test@clerk.com'] });
f.withBilling();
});

// Provide empty props to the PricingTable context
Expand DownExpand Up@@ -347,7 +355,9 @@ describe('PricingTable - plans visibility', () => {
});

it('shows plans when user is signed out', async () => {
const { wrapper, fixtures, props } = await createFixtures();
const { wrapper, fixtures, props } = await createFixtures(f => {
f.withBilling();
});

// Provide empty props to the PricingTable context
props.setProps({});
Expand All@@ -367,6 +377,7 @@ describe('PricingTable - plans visibility', () => {
it('shows no plans when user is signed in but subscription is null', async () => {
const { wrapper, fixtures, props } = await createFixtures(f => {
f.withUser({ email_addresses: ['test@clerk.com'] });
f.withBilling();
});

// Provide empty props to the PricingTable context
Expand All@@ -387,6 +398,7 @@ describe('PricingTable - plans visibility', () => {
it('shows no plans when user is signed in but subscription is undefined', async () => {
const { wrapper, fixtures, props } = await createFixtures(f => {
f.withUser({ email_addresses: ['test@clerk.com'] });
f.withBilling();
});

// Provide empty props to the PricingTable context
Expand All@@ -407,6 +419,7 @@ describe('PricingTable - plans visibility', () => {
it('prevents flicker by not showing plans while subscription is loading', async () => {
const { wrapper, fixtures, props } = await createFixtures(f => {
f.withUser({ email_addresses: ['test@clerk.com'] });
f.withBilling();
});

// Provide empty props to the PricingTable context
Expand Down
12 changes: 12 additions & 0 deletions ...ges/clerk-js/src/ui/components/SubscriptionDetails/__tests__/SubscriptionDetails.test.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -10,6 +10,7 @@ describe('SubscriptionDetails', () => {
it('Displays spinner when init loading', async () => {
const { wrapper } = await createFixtures(f => {
f.withUser({ email_addresses: ['test@clerk.com'] });
f.withBilling();
});

const { baseElement } = render(
Expand All@@ -31,6 +32,7 @@ describe('SubscriptionDetails', () => {
it('single active monthly subscription', async () => {
const { wrapper, fixtures } = await createFixtures(f => {
f.withUser({ email_addresses: ['test@clerk.com'] });
f.withBilling();
});

fixtures.clerk.billing.getSubscription.mockResolvedValue({
Expand DownExpand Up@@ -134,6 +136,7 @@ describe('SubscriptionDetails', () => {
it('single active annual subscription', async () => {
const { wrapper, fixtures } = await createFixtures(f => {
f.withUser({ email_addresses: ['test@clerk.com'] });
f.withBilling();
});

fixtures.clerk.billing.getSubscription.mockResolvedValue({
Expand DownExpand Up@@ -237,6 +240,7 @@ describe('SubscriptionDetails', () => {
it('active free subscription', async () => {
const { wrapper, fixtures } = await createFixtures(f => {
f.withUser({ email_addresses: ['test@clerk.com'] });
f.withBilling();
});

fixtures.clerk.billing.getSubscription.mockResolvedValue({
Expand DownExpand Up@@ -319,6 +323,7 @@ describe('SubscriptionDetails', () => {
it('one active annual and one upcoming monthly subscription', async () => {
const { wrapper, fixtures } = await createFixtures(f => {
f.withUser({ email_addresses: ['test@clerk.com'] });
f.withBilling();
});

const planAnnual = {
Expand DownExpand Up@@ -478,6 +483,7 @@ describe('SubscriptionDetails', () => {
it('one active and one upcoming FREE subscription', async () => {
const { wrapper, fixtures } = await createFixtures(f => {
f.withUser({ email_addresses: ['test@clerk.com'] });
f.withBilling();
});

const planMonthly = {
Expand DownExpand Up@@ -614,6 +620,7 @@ describe('SubscriptionDetails', () => {
it('allows cancelling a subscription of a monthly plan', async () => {
const { wrapper, fixtures } = await createFixtures(f => {
f.withUser({ email_addresses: ['test@clerk.com'] });
f.withBilling();
});

const cancelSubscriptionMock = jest.fn().mockResolvedValue({});
Expand DownExpand Up@@ -718,6 +725,7 @@ describe('SubscriptionDetails', () => {
it('calls resubscribe when the user clicks Resubscribe for a canceled subscription', async () => {
const { wrapper, fixtures } = await createFixtures(f => {
f.withUser({ email_addresses: ['test@clerk.com'] });
f.withBilling();
});

const plan = {
Expand DownExpand Up@@ -820,6 +828,7 @@ describe('SubscriptionDetails', () => {
it('calls switchToMonthly when the user clicks Switch to monthly for an annual subscription', async () => {
const { wrapper, fixtures } = await createFixtures(f => {
f.withUser({ email_addresses: ['test@clerk.com'] });
f.withBilling();
});

const plan = {
Expand DownExpand Up@@ -925,6 +934,7 @@ describe('SubscriptionDetails', () => {
it('past due subscription shows correct status and disables actions', async () => {
const { wrapper, fixtures } = await createFixtures(f => {
f.withUser({ email_addresses: ['test@clerk.com'] });
f.withBilling();
});

const plan = {
Expand DownExpand Up@@ -1017,6 +1027,7 @@ describe('SubscriptionDetails', () => {
it('active free trial subscription shows correct labels and behavior', async () => {
const { wrapper, fixtures } = await createFixtures(f => {
f.withUser({ email_addresses: ['test@clerk.com'] });
f.withBilling();
});

fixtures.clerk.billing.getSubscription.mockResolvedValue({
Expand DownExpand Up@@ -1125,6 +1136,7 @@ describe('SubscriptionDetails', () => {
it('allows cancelling a free trial with specific dialog text', async () => {
const { wrapper, fixtures } = await createFixtures(f => {
f.withUser({ email_addresses: ['test@clerk.com'] });
f.withBilling();
});

const cancelSubscriptionMock = jest.fn().mockResolvedValue({});
Expand Down
4 changes: 4 additions & 0 deletions packages/clerk-js/src/ui/components/Subscriptions/__tests__/SubscriptionsList.test.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -19,6 +19,7 @@ describe('SubscriptionsList', () => {
it('displays free trial badge when subscription is in free trial', async () => {
const { wrapper, fixtures } = await createFixtures(f => {
f.withUser({ email_addresses: ['test@clerk.com'] });
f.withBilling();
});

const freeTrialSubscription = {
Expand DownExpand Up@@ -82,6 +83,7 @@ describe('SubscriptionsList', () => {
it('on past due, no badge, but past due date is shown', async () => {
const { wrapper, fixtures } = await createFixtures(f => {
f.withUser({ email_addresses: ['test@clerk.com'] });
f.withBilling();
});

const pastDueSubscription = {
Expand DownExpand Up@@ -146,6 +148,7 @@ describe('SubscriptionsList', () => {
it('does not display active badge when subscription is active and it is a single item', async () => {
const { wrapper, fixtures } = await createFixtures(f => {
f.withUser({ email_addresses: ['test@clerk.com'] });
f.withBilling();
});

const activeSubscription = {
Expand DownExpand Up@@ -209,6 +212,7 @@ describe('SubscriptionsList', () => {
it('renders upcomming badge when current subscription is canceled but active', async () => {
const { wrapper, fixtures } = await createFixtures(f => {
f.withUser({ email_addresses: ['test@clerk.com'] });
f.withBilling();
});

const upcomingSubscription = {
Expand Down
4 changes: 2 additions & 2 deletions packages/clerk-js/src/ui/components/UserProfile/UserProfileRoutes.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -38,7 +38,7 @@ const PaymentAttemptPage = lazy(() =>
);

export const UserProfileRoutes = () => {
const { pages } = useUserProfileContext();
const { pages, shouldShowBilling } = useUserProfileContext();
const { apiKeysSettings, commerceSettings } = useEnvironment();

const isAccountPageRoot = pages.routes[0].id === USER_PROFILE_NAVBAR_ROUTE_ID.ACCOUNT;
Expand DownExpand Up@@ -80,7 +80,7 @@ export const UserProfileRoutes = () => {
</Route>
</Switch>
</Route>
{commerceSettings.billing.user.enabled ? (
{commerceSettings.billing.user.enabled && shouldShowBilling ? (
<Route path={isBillingPageRoot ? undefined : 'billing'}>
<Switch>
<Route index>
Expand Down
Loading
Loading
, '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 \u003e 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

fix(clerk-js): Hide billing tab when appropriate#6696

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
panteliselef merged 6 commits into from
Sep 4, 2025
Merged

fix(clerk-js): Hide billing tab when appropriate #6696

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
c9b59fe
fix(clerk-js): Hide billing tab when appropriate
panteliselef Sep 3, 2025
9be19d3
Patch hooks
panteliselef Sep 3, 2025
5047efe
add tests
panteliselef Sep 3, 2025
7774ece
add billing to fixtures
panteliselef Sep 3, 2025
dfce2a6
improve enablement logic
panteliselef Sep 3, 2025
3bc2b34
apply SubscriberTypeContext
panteliselef Sep 3, 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
5 changes: 5 additions & 0 deletions .changeset/grumpy-bags-bow.md
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
---
'@clerk/shared': patch
---

Disable billing hooks when the feature is turned off.
5 changes: 5 additions & 0 deletions .changeset/mighty-lions-cut.md
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
---
'@clerk/clerk-js': patch
---

Hide billing tab when no paid plans exist, the user does not have a current or past subscription.
10 changes: 10 additions & 0 deletions packages/clerk-js/src/ui/components/Checkout/__tests__/Checkout.test.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -27,6 +27,7 @@ describe('Checkout', () => {
it('displays spinner when checkout is initializing', async () => {
const { wrapper, fixtures } = await createFixtures(f => {
f.withUser({ email_addresses: ['test@clerk.com'] });
f.withBilling();
});

// Mock billing to prevent actual API calls and stay in loading state
Expand DownExpand Up@@ -98,6 +99,7 @@ describe('Checkout', () => {
it('handles checkout initialization errors gracefully', async () => {
const { wrapper, fixtures } = await createFixtures(f => {
f.withUser({ email_addresses: ['test@clerk.com'] });
f.withBilling();
});

// Mock billing to reject with a Clerk-like error shape
Expand DownExpand Up@@ -129,6 +131,7 @@ describe('Checkout', () => {
it('displays proper loading state during checkout initialization', async () => {
const { wrapper, fixtures } = await createFixtures(f => {
f.withUser({ email_addresses: ['test@clerk.com'] });
f.withBilling();
});

// Mock billing to stay in loading state
Expand DownExpand Up@@ -161,6 +164,7 @@ describe('Checkout', () => {
it('maintains accessibility attributes correctly', async () => {
const { wrapper, fixtures } = await createFixtures(f => {
f.withUser({ email_addresses: ['test@clerk.com'] });
f.withBilling();
});

fixtures.clerk.billing.startCheckout.mockImplementation(() => new Promise(() => {}));
Expand DownExpand Up@@ -201,6 +205,7 @@ describe('Checkout', () => {
it('renders without crashing when all required props are provided', async () => {
const { wrapper, fixtures } = await createFixtures(f => {
f.withUser({ email_addresses: ['test@clerk.com'] });
f.withBilling();
});

// Mock billing to prevent actual API calls
Expand DownExpand Up@@ -228,6 +233,7 @@ describe('Checkout', () => {
it('renders without errors for monthly period', async () => {
const { wrapper, fixtures } = await createFixtures(f => {
f.withUser({ email_addresses: ['test@clerk.com'] });
f.withBilling();
});
fixtures.clerk.billing.startCheckout.mockImplementation(() => new Promise(() => {}));
const { baseElement } = render(
Expand DownExpand Up@@ -272,6 +278,7 @@ describe('Checkout', () => {
it('renders with correct CSS classes and structure', async () => {
const { wrapper, fixtures } = await createFixtures(f => {
f.withUser({ email_addresses: ['test@clerk.com'] });
f.withBilling();
});

fixtures.clerk.billing.startCheckout.mockImplementation(() => new Promise(() => {}));
Expand DownExpand Up@@ -305,6 +312,7 @@ describe('Checkout', () => {
it('renders free trial details during confirmation stage', async () => {
const { wrapper, fixtures } = await createFixtures(f => {
f.withUser({ email_addresses: ['test@clerk.com'] });
f.withBilling();
});

const freeTrialEndsAt = new Date('2025-08-19');
Expand DownExpand Up@@ -388,6 +396,7 @@ describe('Checkout', () => {
it('renders trial success details in completed stage', async () => {
const { wrapper, fixtures } = await createFixtures(f => {
f.withUser({ email_addresses: ['test@clerk.com'] });
f.withBilling();
});

const freeTrialEndsAt = new Date('2025-08-19');
Expand DownExpand Up@@ -469,6 +478,7 @@ describe('Checkout', () => {
it('renders existing payment sources during checkout confirmation', async () => {
const { wrapper, fixtures } = await createFixtures(f => {
f.withUser({ email_addresses: ['test@clerk.com'] });
f.withBilling();
});

fixtures.clerk.user?.getPaymentSources.mockResolvedValue({
Expand Down
4 changes: 2 additions & 2 deletions packages/clerk-js/src/ui/components/OrganizationProfile/OrganizationProfileRoutes.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -38,7 +38,7 @@ const OrganizationPaymentAttemptPage = lazy(() =>
);

export const OrganizationProfileRoutes = () => {
const { pages, isMembersPageRoot, isGeneralPageRoot, isBillingPageRoot, isApiKeysPageRoot } =
const { pages, isMembersPageRoot, isGeneralPageRoot, isBillingPageRoot, isApiKeysPageRoot, shouldShowBilling } =
useOrganizationProfileContext();
const { apiKeysSettings, commerceSettings } = useEnvironment();

Expand DownExpand Up@@ -83,7 +83,7 @@ export const OrganizationProfileRoutes = () => {
</Route>
</Switch>
</Route>
{commerceSettings.billing.organization.enabled ? (
{commerceSettings.billing.organization.enabled && shouldShowBilling ? (
<Protect
condition={has =>
has({ permission: 'org:sys_billing:read' }) || has({ permission: 'org:sys_billing:manage' })
Expand Down
6 changes: 4 additions & 2 deletions packages/clerk-js/src/ui/components/OrganizationProfile/index.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -7,7 +7,7 @@ import { NavbarMenuButtonRow } from '@/ui/elements/Navbar';
import { ProfileCard } from '@/ui/elements/ProfileCard';

import { ORGANIZATION_PROFILE_CARD_SCROLLBOX_ID } from '../../constants';
import { OrganizationProfileContext, withCoreUserGuard } from '../../contexts';
import { OrganizationProfileContext, SubscriberTypeContext, withCoreUserGuard } from '../../contexts';
import { Flow, localizationKeys } from '../../customizables';
import { Route, Switch } from '../../router';
import type { OrganizationProfileCtx } from '../../types';
Expand All@@ -26,7 +26,9 @@ const _OrganizationProfile = (_: OrganizationProfileProps) => {
<Flow.Part>
<Switch>
<Route>
<AuthenticatedRoutes />
<SubscriberTypeContext.Provider value='organization'>
<AuthenticatedRoutes />
</SubscriberTypeContext.Provider>
</Route>
</Switch>
</Flow.Part>
Expand Down
19 changes: 16 additions & 3 deletions packages/clerk-js/src/ui/components/PricingTable/__tests__/PricingTable.test.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -44,6 +44,7 @@ describe('PricingTable - trial info', () => {

it('shows footer notice with trial end date when active subscription is in free trial', async () => {
const { wrapper, fixtures, props } = await createFixtures(f => {
f.withBilling();
f.withUser({ email_addresses: ['test@clerk.com'] });
});

Expand DownExpand Up@@ -99,6 +100,7 @@ describe('PricingTable - trial info', () => {
it('shows CTA "Start N-day free trial" when eligible and plan has trial', async () => {
const { wrapper, fixtures, props } = await createFixtures(f => {
f.withUser({ email_addresses: ['test@clerk.com'] });
f.withBilling();
});

// Provide empty props to the PricingTable context
Expand DownExpand Up@@ -130,7 +132,9 @@ describe('PricingTable - trial info', () => {
});

it('shows CTA "Start N-day free trial" when user is signed out and plan has trial', async () => {
const { wrapper, fixtures, props } = await createFixtures();
const { wrapper, fixtures, props } = await createFixtures(f => {
f.withBilling();
});

// Provide empty props to the PricingTable context
props.setProps({});
Expand All@@ -149,7 +153,9 @@ describe('PricingTable - trial info', () => {
});

it('shows CTA "Subscribe" when user is signed out and plan has no trial', async () => {
const { wrapper, fixtures, props } = await createFixtures();
const { wrapper, fixtures, props } = await createFixtures(f => {
f.withBilling();
});

const nonTrialPlan = {
...trialPlan,
Expand DownExpand Up@@ -178,6 +184,7 @@ describe('PricingTable - trial info', () => {
it('shows footer notice with "starts at" when subscription is upcoming and not a free trial', async () => {
const { wrapper, fixtures, props } = await createFixtures(f => {
f.withUser({ email_addresses: ['test@clerk.com'] });
f.withBilling();
});

// Provide empty props to the PricingTable context
Expand DownExpand Up@@ -301,6 +308,7 @@ describe('PricingTable - plans visibility', () => {
it('shows plans when user is signed in and has a subscription', async () => {
const { wrapper, fixtures, props } = await createFixtures(f => {
f.withUser({ email_addresses: ['test@clerk.com'] });
f.withBilling();
});

// Provide empty props to the PricingTable context
Expand DownExpand Up@@ -347,7 +355,9 @@ describe('PricingTable - plans visibility', () => {
});

it('shows plans when user is signed out', async () => {
const { wrapper, fixtures, props } = await createFixtures();
const { wrapper, fixtures, props } = await createFixtures(f => {
f.withBilling();
});

// Provide empty props to the PricingTable context
props.setProps({});
Expand All@@ -367,6 +377,7 @@ describe('PricingTable - plans visibility', () => {
it('shows no plans when user is signed in but subscription is null', async () => {
const { wrapper, fixtures, props } = await createFixtures(f => {
f.withUser({ email_addresses: ['test@clerk.com'] });
f.withBilling();
});

// Provide empty props to the PricingTable context
Expand All@@ -387,6 +398,7 @@ describe('PricingTable - plans visibility', () => {
it('shows no plans when user is signed in but subscription is undefined', async () => {
const { wrapper, fixtures, props } = await createFixtures(f => {
f.withUser({ email_addresses: ['test@clerk.com'] });
f.withBilling();
});

// Provide empty props to the PricingTable context
Expand All@@ -407,6 +419,7 @@ describe('PricingTable - plans visibility', () => {
it('prevents flicker by not showing plans while subscription is loading', async () => {
const { wrapper, fixtures, props } = await createFixtures(f => {
f.withUser({ email_addresses: ['test@clerk.com'] });
f.withBilling();
});

// Provide empty props to the PricingTable context
Expand Down
12 changes: 12 additions & 0 deletions ...ges/clerk-js/src/ui/components/SubscriptionDetails/__tests__/SubscriptionDetails.test.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -10,6 +10,7 @@ describe('SubscriptionDetails', () => {
it('Displays spinner when init loading', async () => {
const { wrapper } = await createFixtures(f => {
f.withUser({ email_addresses: ['test@clerk.com'] });
f.withBilling();
});

const { baseElement } = render(
Expand All@@ -31,6 +32,7 @@ describe('SubscriptionDetails', () => {
it('single active monthly subscription', async () => {
const { wrapper, fixtures } = await createFixtures(f => {
f.withUser({ email_addresses: ['test@clerk.com'] });
f.withBilling();
});

fixtures.clerk.billing.getSubscription.mockResolvedValue({
Expand DownExpand Up@@ -134,6 +136,7 @@ describe('SubscriptionDetails', () => {
it('single active annual subscription', async () => {
const { wrapper, fixtures } = await createFixtures(f => {
f.withUser({ email_addresses: ['test@clerk.com'] });
f.withBilling();
});

fixtures.clerk.billing.getSubscription.mockResolvedValue({
Expand DownExpand Up@@ -237,6 +240,7 @@ describe('SubscriptionDetails', () => {
it('active free subscription', async () => {
const { wrapper, fixtures } = await createFixtures(f => {
f.withUser({ email_addresses: ['test@clerk.com'] });
f.withBilling();
});

fixtures.clerk.billing.getSubscription.mockResolvedValue({
Expand DownExpand Up@@ -319,6 +323,7 @@ describe('SubscriptionDetails', () => {
it('one active annual and one upcoming monthly subscription', async () => {
const { wrapper, fixtures } = await createFixtures(f => {
f.withUser({ email_addresses: ['test@clerk.com'] });
f.withBilling();
});

const planAnnual = {
Expand DownExpand Up@@ -478,6 +483,7 @@ describe('SubscriptionDetails', () => {
it('one active and one upcoming FREE subscription', async () => {
const { wrapper, fixtures } = await createFixtures(f => {
f.withUser({ email_addresses: ['test@clerk.com'] });
f.withBilling();
});

const planMonthly = {
Expand DownExpand Up@@ -614,6 +620,7 @@ describe('SubscriptionDetails', () => {
it('allows cancelling a subscription of a monthly plan', async () => {
const { wrapper, fixtures } = await createFixtures(f => {
f.withUser({ email_addresses: ['test@clerk.com'] });
f.withBilling();
});

const cancelSubscriptionMock = jest.fn().mockResolvedValue({});
Expand DownExpand Up@@ -718,6 +725,7 @@ describe('SubscriptionDetails', () => {
it('calls resubscribe when the user clicks Resubscribe for a canceled subscription', async () => {
const { wrapper, fixtures } = await createFixtures(f => {
f.withUser({ email_addresses: ['test@clerk.com'] });
f.withBilling();
});

const plan = {
Expand DownExpand Up@@ -820,6 +828,7 @@ describe('SubscriptionDetails', () => {
it('calls switchToMonthly when the user clicks Switch to monthly for an annual subscription', async () => {
const { wrapper, fixtures } = await createFixtures(f => {
f.withUser({ email_addresses: ['test@clerk.com'] });
f.withBilling();
});

const plan = {
Expand DownExpand Up@@ -925,6 +934,7 @@ describe('SubscriptionDetails', () => {
it('past due subscription shows correct status and disables actions', async () => {
const { wrapper, fixtures } = await createFixtures(f => {
f.withUser({ email_addresses: ['test@clerk.com'] });
f.withBilling();
});

const plan = {
Expand DownExpand Up@@ -1017,6 +1027,7 @@ describe('SubscriptionDetails', () => {
it('active free trial subscription shows correct labels and behavior', async () => {
const { wrapper, fixtures } = await createFixtures(f => {
f.withUser({ email_addresses: ['test@clerk.com'] });
f.withBilling();
});

fixtures.clerk.billing.getSubscription.mockResolvedValue({
Expand DownExpand Up@@ -1125,6 +1136,7 @@ describe('SubscriptionDetails', () => {
it('allows cancelling a free trial with specific dialog text', async () => {
const { wrapper, fixtures } = await createFixtures(f => {
f.withUser({ email_addresses: ['test@clerk.com'] });
f.withBilling();
});

const cancelSubscriptionMock = jest.fn().mockResolvedValue({});
Expand Down
4 changes: 4 additions & 0 deletions packages/clerk-js/src/ui/components/Subscriptions/__tests__/SubscriptionsList.test.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -19,6 +19,7 @@ describe('SubscriptionsList', () => {
it('displays free trial badge when subscription is in free trial', async () => {
const { wrapper, fixtures } = await createFixtures(f => {
f.withUser({ email_addresses: ['test@clerk.com'] });
f.withBilling();
});

const freeTrialSubscription = {
Expand DownExpand Up@@ -82,6 +83,7 @@ describe('SubscriptionsList', () => {
it('on past due, no badge, but past due date is shown', async () => {
const { wrapper, fixtures } = await createFixtures(f => {
f.withUser({ email_addresses: ['test@clerk.com'] });
f.withBilling();
});

const pastDueSubscription = {
Expand DownExpand Up@@ -146,6 +148,7 @@ describe('SubscriptionsList', () => {
it('does not display active badge when subscription is active and it is a single item', async () => {
const { wrapper, fixtures } = await createFixtures(f => {
f.withUser({ email_addresses: ['test@clerk.com'] });
f.withBilling();
});

const activeSubscription = {
Expand DownExpand Up@@ -209,6 +212,7 @@ describe('SubscriptionsList', () => {
it('renders upcomming badge when current subscription is canceled but active', async () => {
const { wrapper, fixtures } = await createFixtures(f => {
f.withUser({ email_addresses: ['test@clerk.com'] });
f.withBilling();
});

const upcomingSubscription = {
Expand Down
4 changes: 2 additions & 2 deletions packages/clerk-js/src/ui/components/UserProfile/UserProfileRoutes.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -38,7 +38,7 @@ const PaymentAttemptPage = lazy(() =>
);

export const UserProfileRoutes = () => {
const { pages } = useUserProfileContext();
const { pages, shouldShowBilling } = useUserProfileContext();
const { apiKeysSettings, commerceSettings } = useEnvironment();

const isAccountPageRoot = pages.routes[0].id === USER_PROFILE_NAVBAR_ROUTE_ID.ACCOUNT;
Expand DownExpand Up@@ -80,7 +80,7 @@ export const UserProfileRoutes = () => {
</Route>
</Switch>
</Route>
{commerceSettings.billing.user.enabled ? (
{commerceSettings.billing.user.enabled && shouldShowBilling ? (
<Route path={isBillingPageRoot ? undefined : 'billing'}>
<Switch>
<Route index>
Expand Down
Loading
Loading
, '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

fix(clerk-js): Hide billing tab when appropriate#6696

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
panteliselef merged 6 commits into from
Sep 4, 2025
Merged

fix(clerk-js): Hide billing tab when appropriate #6696

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
c9b59fe
fix(clerk-js): Hide billing tab when appropriate
panteliselef Sep 3, 2025
9be19d3
Patch hooks
panteliselef Sep 3, 2025
5047efe
add tests
panteliselef Sep 3, 2025
7774ece
add billing to fixtures
panteliselef Sep 3, 2025
dfce2a6
improve enablement logic
panteliselef Sep 3, 2025
3bc2b34
apply SubscriberTypeContext
panteliselef Sep 3, 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
5 changes: 5 additions & 0 deletions .changeset/grumpy-bags-bow.md
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
---
'@clerk/shared': patch
---

Disable billing hooks when the feature is turned off.
5 changes: 5 additions & 0 deletions .changeset/mighty-lions-cut.md
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
---
'@clerk/clerk-js': patch
---

Hide billing tab when no paid plans exist, the user does not have a current or past subscription.
10 changes: 10 additions & 0 deletions packages/clerk-js/src/ui/components/Checkout/__tests__/Checkout.test.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -27,6 +27,7 @@ describe('Checkout', () => {
it('displays spinner when checkout is initializing', async () => {
const { wrapper, fixtures } = await createFixtures(f => {
f.withUser({ email_addresses: ['test@clerk.com'] });
f.withBilling();
});

// Mock billing to prevent actual API calls and stay in loading state
Expand DownExpand Up@@ -98,6 +99,7 @@ describe('Checkout', () => {
it('handles checkout initialization errors gracefully', async () => {
const { wrapper, fixtures } = await createFixtures(f => {
f.withUser({ email_addresses: ['test@clerk.com'] });
f.withBilling();
});

// Mock billing to reject with a Clerk-like error shape
Expand DownExpand Up@@ -129,6 +131,7 @@ describe('Checkout', () => {
it('displays proper loading state during checkout initialization', async () => {
const { wrapper, fixtures } = await createFixtures(f => {
f.withUser({ email_addresses: ['test@clerk.com'] });
f.withBilling();
});

// Mock billing to stay in loading state
Expand DownExpand Up@@ -161,6 +164,7 @@ describe('Checkout', () => {
it('maintains accessibility attributes correctly', async () => {
const { wrapper, fixtures } = await createFixtures(f => {
f.withUser({ email_addresses: ['test@clerk.com'] });
f.withBilling();
});

fixtures.clerk.billing.startCheckout.mockImplementation(() => new Promise(() => {}));
Expand DownExpand Up@@ -201,6 +205,7 @@ describe('Checkout', () => {
it('renders without crashing when all required props are provided', async () => {
const { wrapper, fixtures } = await createFixtures(f => {
f.withUser({ email_addresses: ['test@clerk.com'] });
f.withBilling();
});

// Mock billing to prevent actual API calls
Expand DownExpand Up@@ -228,6 +233,7 @@ describe('Checkout', () => {
it('renders without errors for monthly period', async () => {
const { wrapper, fixtures } = await createFixtures(f => {
f.withUser({ email_addresses: ['test@clerk.com'] });
f.withBilling();
});
fixtures.clerk.billing.startCheckout.mockImplementation(() => new Promise(() => {}));
const { baseElement } = render(
Expand DownExpand Up@@ -272,6 +278,7 @@ describe('Checkout', () => {
it('renders with correct CSS classes and structure', async () => {
const { wrapper, fixtures } = await createFixtures(f => {
f.withUser({ email_addresses: ['test@clerk.com'] });
f.withBilling();
});

fixtures.clerk.billing.startCheckout.mockImplementation(() => new Promise(() => {}));
Expand DownExpand Up@@ -305,6 +312,7 @@ describe('Checkout', () => {
it('renders free trial details during confirmation stage', async () => {
const { wrapper, fixtures } = await createFixtures(f => {
f.withUser({ email_addresses: ['test@clerk.com'] });
f.withBilling();
});

const freeTrialEndsAt = new Date('2025-08-19');
Expand DownExpand Up@@ -388,6 +396,7 @@ describe('Checkout', () => {
it('renders trial success details in completed stage', async () => {
const { wrapper, fixtures } = await createFixtures(f => {
f.withUser({ email_addresses: ['test@clerk.com'] });
f.withBilling();
});

const freeTrialEndsAt = new Date('2025-08-19');
Expand DownExpand Up@@ -469,6 +478,7 @@ describe('Checkout', () => {
it('renders existing payment sources during checkout confirmation', async () => {
const { wrapper, fixtures } = await createFixtures(f => {
f.withUser({ email_addresses: ['test@clerk.com'] });
f.withBilling();
});

fixtures.clerk.user?.getPaymentSources.mockResolvedValue({
Expand Down
4 changes: 2 additions & 2 deletions packages/clerk-js/src/ui/components/OrganizationProfile/OrganizationProfileRoutes.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -38,7 +38,7 @@ const OrganizationPaymentAttemptPage = lazy(() =>
);

export const OrganizationProfileRoutes = () => {
const { pages, isMembersPageRoot, isGeneralPageRoot, isBillingPageRoot, isApiKeysPageRoot } =
const { pages, isMembersPageRoot, isGeneralPageRoot, isBillingPageRoot, isApiKeysPageRoot, shouldShowBilling } =
useOrganizationProfileContext();
const { apiKeysSettings, commerceSettings } = useEnvironment();

Expand DownExpand Up@@ -83,7 +83,7 @@ export const OrganizationProfileRoutes = () => {
</Route>
</Switch>
</Route>
{commerceSettings.billing.organization.enabled ? (
{commerceSettings.billing.organization.enabled && shouldShowBilling ? (
<Protect
condition={has =>
has({ permission: 'org:sys_billing:read' }) || has({ permission: 'org:sys_billing:manage' })
Expand Down
6 changes: 4 additions & 2 deletions packages/clerk-js/src/ui/components/OrganizationProfile/index.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -7,7 +7,7 @@ import { NavbarMenuButtonRow } from '@/ui/elements/Navbar';
import { ProfileCard } from '@/ui/elements/ProfileCard';

import { ORGANIZATION_PROFILE_CARD_SCROLLBOX_ID } from '../../constants';
import { OrganizationProfileContext, withCoreUserGuard } from '../../contexts';
import { OrganizationProfileContext, SubscriberTypeContext, withCoreUserGuard } from '../../contexts';
import { Flow, localizationKeys } from '../../customizables';
import { Route, Switch } from '../../router';
import type { OrganizationProfileCtx } from '../../types';
Expand All@@ -26,7 +26,9 @@ const _OrganizationProfile = (_: OrganizationProfileProps) => {
<Flow.Part>
<Switch>
<Route>
<AuthenticatedRoutes />
<SubscriberTypeContext.Provider value='organization'>
<AuthenticatedRoutes />
</SubscriberTypeContext.Provider>
</Route>
</Switch>
</Flow.Part>
Expand Down
19 changes: 16 additions & 3 deletions packages/clerk-js/src/ui/components/PricingTable/__tests__/PricingTable.test.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -44,6 +44,7 @@ describe('PricingTable - trial info', () => {

it('shows footer notice with trial end date when active subscription is in free trial', async () => {
const { wrapper, fixtures, props } = await createFixtures(f => {
f.withBilling();
f.withUser({ email_addresses: ['test@clerk.com'] });
});

Expand DownExpand Up@@ -99,6 +100,7 @@ describe('PricingTable - trial info', () => {
it('shows CTA "Start N-day free trial" when eligible and plan has trial', async () => {
const { wrapper, fixtures, props } = await createFixtures(f => {
f.withUser({ email_addresses: ['test@clerk.com'] });
f.withBilling();
});

// Provide empty props to the PricingTable context
Expand DownExpand Up@@ -130,7 +132,9 @@ describe('PricingTable - trial info', () => {
});

it('shows CTA "Start N-day free trial" when user is signed out and plan has trial', async () => {
const { wrapper, fixtures, props } = await createFixtures();
const { wrapper, fixtures, props } = await createFixtures(f => {
f.withBilling();
});

// Provide empty props to the PricingTable context
props.setProps({});
Expand All@@ -149,7 +153,9 @@ describe('PricingTable - trial info', () => {
});

it('shows CTA "Subscribe" when user is signed out and plan has no trial', async () => {
const { wrapper, fixtures, props } = await createFixtures();
const { wrapper, fixtures, props } = await createFixtures(f => {
f.withBilling();
});

const nonTrialPlan = {
...trialPlan,
Expand DownExpand Up@@ -178,6 +184,7 @@ describe('PricingTable - trial info', () => {
it('shows footer notice with "starts at" when subscription is upcoming and not a free trial', async () => {
const { wrapper, fixtures, props } = await createFixtures(f => {
f.withUser({ email_addresses: ['test@clerk.com'] });
f.withBilling();
});

// Provide empty props to the PricingTable context
Expand DownExpand Up@@ -301,6 +308,7 @@ describe('PricingTable - plans visibility', () => {
it('shows plans when user is signed in and has a subscription', async () => {
const { wrapper, fixtures, props } = await createFixtures(f => {
f.withUser({ email_addresses: ['test@clerk.com'] });
f.withBilling();
});

// Provide empty props to the PricingTable context
Expand DownExpand Up@@ -347,7 +355,9 @@ describe('PricingTable - plans visibility', () => {
});

it('shows plans when user is signed out', async () => {
const { wrapper, fixtures, props } = await createFixtures();
const { wrapper, fixtures, props } = await createFixtures(f => {
f.withBilling();
});

// Provide empty props to the PricingTable context
props.setProps({});
Expand All@@ -367,6 +377,7 @@ describe('PricingTable - plans visibility', () => {
it('shows no plans when user is signed in but subscription is null', async () => {
const { wrapper, fixtures, props } = await createFixtures(f => {
f.withUser({ email_addresses: ['test@clerk.com'] });
f.withBilling();
});

// Provide empty props to the PricingTable context
Expand All@@ -387,6 +398,7 @@ describe('PricingTable - plans visibility', () => {
it('shows no plans when user is signed in but subscription is undefined', async () => {
const { wrapper, fixtures, props } = await createFixtures(f => {
f.withUser({ email_addresses: ['test@clerk.com'] });
f.withBilling();
});

// Provide empty props to the PricingTable context
Expand All@@ -407,6 +419,7 @@ describe('PricingTable - plans visibility', () => {
it('prevents flicker by not showing plans while subscription is loading', async () => {
const { wrapper, fixtures, props } = await createFixtures(f => {
f.withUser({ email_addresses: ['test@clerk.com'] });
f.withBilling();
});

// Provide empty props to the PricingTable context
Expand Down
12 changes: 12 additions & 0 deletions ...ges/clerk-js/src/ui/components/SubscriptionDetails/__tests__/SubscriptionDetails.test.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -10,6 +10,7 @@ describe('SubscriptionDetails', () => {
it('Displays spinner when init loading', async () => {
const { wrapper } = await createFixtures(f => {
f.withUser({ email_addresses: ['test@clerk.com'] });
f.withBilling();
});

const { baseElement } = render(
Expand All@@ -31,6 +32,7 @@ describe('SubscriptionDetails', () => {
it('single active monthly subscription', async () => {
const { wrapper, fixtures } = await createFixtures(f => {
f.withUser({ email_addresses: ['test@clerk.com'] });
f.withBilling();
});

fixtures.clerk.billing.getSubscription.mockResolvedValue({
Expand DownExpand Up@@ -134,6 +136,7 @@ describe('SubscriptionDetails', () => {
it('single active annual subscription', async () => {
const { wrapper, fixtures } = await createFixtures(f => {
f.withUser({ email_addresses: ['test@clerk.com'] });
f.withBilling();
});

fixtures.clerk.billing.getSubscription.mockResolvedValue({
Expand DownExpand Up@@ -237,6 +240,7 @@ describe('SubscriptionDetails', () => {
it('active free subscription', async () => {
const { wrapper, fixtures } = await createFixtures(f => {
f.withUser({ email_addresses: ['test@clerk.com'] });
f.withBilling();
});

fixtures.clerk.billing.getSubscription.mockResolvedValue({
Expand DownExpand Up@@ -319,6 +323,7 @@ describe('SubscriptionDetails', () => {
it('one active annual and one upcoming monthly subscription', async () => {
const { wrapper, fixtures } = await createFixtures(f => {
f.withUser({ email_addresses: ['test@clerk.com'] });
f.withBilling();
});

const planAnnual = {
Expand DownExpand Up@@ -478,6 +483,7 @@ describe('SubscriptionDetails', () => {
it('one active and one upcoming FREE subscription', async () => {
const { wrapper, fixtures } = await createFixtures(f => {
f.withUser({ email_addresses: ['test@clerk.com'] });
f.withBilling();
});

const planMonthly = {
Expand DownExpand Up@@ -614,6 +620,7 @@ describe('SubscriptionDetails', () => {
it('allows cancelling a subscription of a monthly plan', async () => {
const { wrapper, fixtures } = await createFixtures(f => {
f.withUser({ email_addresses: ['test@clerk.com'] });
f.withBilling();
});

const cancelSubscriptionMock = jest.fn().mockResolvedValue({});
Expand DownExpand Up@@ -718,6 +725,7 @@ describe('SubscriptionDetails', () => {
it('calls resubscribe when the user clicks Resubscribe for a canceled subscription', async () => {
const { wrapper, fixtures } = await createFixtures(f => {
f.withUser({ email_addresses: ['test@clerk.com'] });
f.withBilling();
});

const plan = {
Expand DownExpand Up@@ -820,6 +828,7 @@ describe('SubscriptionDetails', () => {
it('calls switchToMonthly when the user clicks Switch to monthly for an annual subscription', async () => {
const { wrapper, fixtures } = await createFixtures(f => {
f.withUser({ email_addresses: ['test@clerk.com'] });
f.withBilling();
});

const plan = {
Expand DownExpand Up@@ -925,6 +934,7 @@ describe('SubscriptionDetails', () => {
it('past due subscription shows correct status and disables actions', async () => {
const { wrapper, fixtures } = await createFixtures(f => {
f.withUser({ email_addresses: ['test@clerk.com'] });
f.withBilling();
});

const plan = {
Expand DownExpand Up@@ -1017,6 +1027,7 @@ describe('SubscriptionDetails', () => {
it('active free trial subscription shows correct labels and behavior', async () => {
const { wrapper, fixtures } = await createFixtures(f => {
f.withUser({ email_addresses: ['test@clerk.com'] });
f.withBilling();
});

fixtures.clerk.billing.getSubscription.mockResolvedValue({
Expand DownExpand Up@@ -1125,6 +1136,7 @@ describe('SubscriptionDetails', () => {
it('allows cancelling a free trial with specific dialog text', async () => {
const { wrapper, fixtures } = await createFixtures(f => {
f.withUser({ email_addresses: ['test@clerk.com'] });
f.withBilling();
});

const cancelSubscriptionMock = jest.fn().mockResolvedValue({});
Expand Down
4 changes: 4 additions & 0 deletions packages/clerk-js/src/ui/components/Subscriptions/__tests__/SubscriptionsList.test.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -19,6 +19,7 @@ describe('SubscriptionsList', () => {
it('displays free trial badge when subscription is in free trial', async () => {
const { wrapper, fixtures } = await createFixtures(f => {
f.withUser({ email_addresses: ['test@clerk.com'] });
f.withBilling();
});

const freeTrialSubscription = {
Expand DownExpand Up@@ -82,6 +83,7 @@ describe('SubscriptionsList', () => {
it('on past due, no badge, but past due date is shown', async () => {
const { wrapper, fixtures } = await createFixtures(f => {
f.withUser({ email_addresses: ['test@clerk.com'] });
f.withBilling();
});

const pastDueSubscription = {
Expand DownExpand Up@@ -146,6 +148,7 @@ describe('SubscriptionsList', () => {
it('does not display active badge when subscription is active and it is a single item', async () => {
const { wrapper, fixtures } = await createFixtures(f => {
f.withUser({ email_addresses: ['test@clerk.com'] });
f.withBilling();
});

const activeSubscription = {
Expand DownExpand Up@@ -209,6 +212,7 @@ describe('SubscriptionsList', () => {
it('renders upcomming badge when current subscription is canceled but active', async () => {
const { wrapper, fixtures } = await createFixtures(f => {
f.withUser({ email_addresses: ['test@clerk.com'] });
f.withBilling();
});

const upcomingSubscription = {
Expand Down
4 changes: 2 additions & 2 deletions packages/clerk-js/src/ui/components/UserProfile/UserProfileRoutes.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -38,7 +38,7 @@ const PaymentAttemptPage = lazy(() =>
);

export const UserProfileRoutes = () => {
const { pages } = useUserProfileContext();
const { pages, shouldShowBilling } = useUserProfileContext();
const { apiKeysSettings, commerceSettings } = useEnvironment();

const isAccountPageRoot = pages.routes[0].id === USER_PROFILE_NAVBAR_ROUTE_ID.ACCOUNT;
Expand DownExpand Up@@ -80,7 +80,7 @@ export const UserProfileRoutes = () => {
</Route>
</Switch>
</Route>
{commerceSettings.billing.user.enabled ? (
{commerceSettings.billing.user.enabled && shouldShowBilling ? (
<Route path={isBillingPageRoot ? undefined : 'billing'}>
<Switch>
<Route index>
Expand Down
Loading
Loading
, '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

fix(clerk-js): Hide billing tab when appropriate#6696

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
panteliselef merged 6 commits into from
Sep 4, 2025
Merged

fix(clerk-js): Hide billing tab when appropriate #6696

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
c9b59fe
fix(clerk-js): Hide billing tab when appropriate
panteliselef Sep 3, 2025
9be19d3
Patch hooks
panteliselef Sep 3, 2025
5047efe
add tests
panteliselef Sep 3, 2025
7774ece
add billing to fixtures
panteliselef Sep 3, 2025
dfce2a6
improve enablement logic
panteliselef Sep 3, 2025
3bc2b34
apply SubscriberTypeContext
panteliselef Sep 3, 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
5 changes: 5 additions & 0 deletions .changeset/grumpy-bags-bow.md
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
---
'@clerk/shared': patch
---

Disable billing hooks when the feature is turned off.
5 changes: 5 additions & 0 deletions .changeset/mighty-lions-cut.md
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
---
'@clerk/clerk-js': patch
---

Hide billing tab when no paid plans exist, the user does not have a current or past subscription.
10 changes: 10 additions & 0 deletions packages/clerk-js/src/ui/components/Checkout/__tests__/Checkout.test.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -27,6 +27,7 @@ describe('Checkout', () => {
it('displays spinner when checkout is initializing', async () => {
const { wrapper, fixtures } = await createFixtures(f => {
f.withUser({ email_addresses: ['test@clerk.com'] });
f.withBilling();
});

// Mock billing to prevent actual API calls and stay in loading state
Expand DownExpand Up@@ -98,6 +99,7 @@ describe('Checkout', () => {
it('handles checkout initialization errors gracefully', async () => {
const { wrapper, fixtures } = await createFixtures(f => {
f.withUser({ email_addresses: ['test@clerk.com'] });
f.withBilling();
});

// Mock billing to reject with a Clerk-like error shape
Expand DownExpand Up@@ -129,6 +131,7 @@ describe('Checkout', () => {
it('displays proper loading state during checkout initialization', async () => {
const { wrapper, fixtures } = await createFixtures(f => {
f.withUser({ email_addresses: ['test@clerk.com'] });
f.withBilling();
});

// Mock billing to stay in loading state
Expand DownExpand Up@@ -161,6 +164,7 @@ describe('Checkout', () => {
it('maintains accessibility attributes correctly', async () => {
const { wrapper, fixtures } = await createFixtures(f => {
f.withUser({ email_addresses: ['test@clerk.com'] });
f.withBilling();
});

fixtures.clerk.billing.startCheckout.mockImplementation(() => new Promise(() => {}));
Expand DownExpand Up@@ -201,6 +205,7 @@ describe('Checkout', () => {
it('renders without crashing when all required props are provided', async () => {
const { wrapper, fixtures } = await createFixtures(f => {
f.withUser({ email_addresses: ['test@clerk.com'] });
f.withBilling();
});

// Mock billing to prevent actual API calls
Expand DownExpand Up@@ -228,6 +233,7 @@ describe('Checkout', () => {
it('renders without errors for monthly period', async () => {
const { wrapper, fixtures } = await createFixtures(f => {
f.withUser({ email_addresses: ['test@clerk.com'] });
f.withBilling();
});
fixtures.clerk.billing.startCheckout.mockImplementation(() => new Promise(() => {}));
const { baseElement } = render(
Expand DownExpand Up@@ -272,6 +278,7 @@ describe('Checkout', () => {
it('renders with correct CSS classes and structure', async () => {
const { wrapper, fixtures } = await createFixtures(f => {
f.withUser({ email_addresses: ['test@clerk.com'] });
f.withBilling();
});

fixtures.clerk.billing.startCheckout.mockImplementation(() => new Promise(() => {}));
Expand DownExpand Up@@ -305,6 +312,7 @@ describe('Checkout', () => {
it('renders free trial details during confirmation stage', async () => {
const { wrapper, fixtures } = await createFixtures(f => {
f.withUser({ email_addresses: ['test@clerk.com'] });
f.withBilling();
});

const freeTrialEndsAt = new Date('2025-08-19');
Expand DownExpand Up@@ -388,6 +396,7 @@ describe('Checkout', () => {
it('renders trial success details in completed stage', async () => {
const { wrapper, fixtures } = await createFixtures(f => {
f.withUser({ email_addresses: ['test@clerk.com'] });
f.withBilling();
});

const freeTrialEndsAt = new Date('2025-08-19');
Expand DownExpand Up@@ -469,6 +478,7 @@ describe('Checkout', () => {
it('renders existing payment sources during checkout confirmation', async () => {
const { wrapper, fixtures } = await createFixtures(f => {
f.withUser({ email_addresses: ['test@clerk.com'] });
f.withBilling();
});

fixtures.clerk.user?.getPaymentSources.mockResolvedValue({
Expand Down
4 changes: 2 additions & 2 deletions packages/clerk-js/src/ui/components/OrganizationProfile/OrganizationProfileRoutes.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -38,7 +38,7 @@ const OrganizationPaymentAttemptPage = lazy(() =>
);

export const OrganizationProfileRoutes = () => {
const { pages, isMembersPageRoot, isGeneralPageRoot, isBillingPageRoot, isApiKeysPageRoot } =
const { pages, isMembersPageRoot, isGeneralPageRoot, isBillingPageRoot, isApiKeysPageRoot, shouldShowBilling } =
useOrganizationProfileContext();
const { apiKeysSettings, commerceSettings } = useEnvironment();

Expand DownExpand Up@@ -83,7 +83,7 @@ export const OrganizationProfileRoutes = () => {
</Route>
</Switch>
</Route>
{commerceSettings.billing.organization.enabled ? (
{commerceSettings.billing.organization.enabled && shouldShowBilling ? (
<Protect
condition={has =>
has({ permission: 'org:sys_billing:read' }) || has({ permission: 'org:sys_billing:manage' })
Expand Down
6 changes: 4 additions & 2 deletions packages/clerk-js/src/ui/components/OrganizationProfile/index.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -7,7 +7,7 @@ import { NavbarMenuButtonRow } from '@/ui/elements/Navbar';
import { ProfileCard } from '@/ui/elements/ProfileCard';

import { ORGANIZATION_PROFILE_CARD_SCROLLBOX_ID } from '../../constants';
import { OrganizationProfileContext, withCoreUserGuard } from '../../contexts';
import { OrganizationProfileContext, SubscriberTypeContext, withCoreUserGuard } from '../../contexts';
import { Flow, localizationKeys } from '../../customizables';
import { Route, Switch } from '../../router';
import type { OrganizationProfileCtx } from '../../types';
Expand All@@ -26,7 +26,9 @@ const _OrganizationProfile = (_: OrganizationProfileProps) => {
<Flow.Part>
<Switch>
<Route>
<AuthenticatedRoutes />
<SubscriberTypeContext.Provider value='organization'>
<AuthenticatedRoutes />
</SubscriberTypeContext.Provider>
</Route>
</Switch>
</Flow.Part>
Expand Down
19 changes: 16 additions & 3 deletions packages/clerk-js/src/ui/components/PricingTable/__tests__/PricingTable.test.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -44,6 +44,7 @@ describe('PricingTable - trial info', () => {

it('shows footer notice with trial end date when active subscription is in free trial', async () => {
const { wrapper, fixtures, props } = await createFixtures(f => {
f.withBilling();
f.withUser({ email_addresses: ['test@clerk.com'] });
});

Expand DownExpand Up@@ -99,6 +100,7 @@ describe('PricingTable - trial info', () => {
it('shows CTA "Start N-day free trial" when eligible and plan has trial', async () => {
const { wrapper, fixtures, props } = await createFixtures(f => {
f.withUser({ email_addresses: ['test@clerk.com'] });
f.withBilling();
});

// Provide empty props to the PricingTable context
Expand DownExpand Up@@ -130,7 +132,9 @@ describe('PricingTable - trial info', () => {
});

it('shows CTA "Start N-day free trial" when user is signed out and plan has trial', async () => {
const { wrapper, fixtures, props } = await createFixtures();
const { wrapper, fixtures, props } = await createFixtures(f => {
f.withBilling();
});

// Provide empty props to the PricingTable context
props.setProps({});
Expand All@@ -149,7 +153,9 @@ describe('PricingTable - trial info', () => {
});

it('shows CTA "Subscribe" when user is signed out and plan has no trial', async () => {
const { wrapper, fixtures, props } = await createFixtures();
const { wrapper, fixtures, props } = await createFixtures(f => {
f.withBilling();
});

const nonTrialPlan = {
...trialPlan,
Expand DownExpand Up@@ -178,6 +184,7 @@ describe('PricingTable - trial info', () => {
it('shows footer notice with "starts at" when subscription is upcoming and not a free trial', async () => {
const { wrapper, fixtures, props } = await createFixtures(f => {
f.withUser({ email_addresses: ['test@clerk.com'] });
f.withBilling();
});

// Provide empty props to the PricingTable context
Expand DownExpand Up@@ -301,6 +308,7 @@ describe('PricingTable - plans visibility', () => {
it('shows plans when user is signed in and has a subscription', async () => {
const { wrapper, fixtures, props } = await createFixtures(f => {
f.withUser({ email_addresses: ['test@clerk.com'] });
f.withBilling();
});

// Provide empty props to the PricingTable context
Expand DownExpand Up@@ -347,7 +355,9 @@ describe('PricingTable - plans visibility', () => {
});

it('shows plans when user is signed out', async () => {
const { wrapper, fixtures, props } = await createFixtures();
const { wrapper, fixtures, props } = await createFixtures(f => {
f.withBilling();
});

// Provide empty props to the PricingTable context
props.setProps({});
Expand All@@ -367,6 +377,7 @@ describe('PricingTable - plans visibility', () => {
it('shows no plans when user is signed in but subscription is null', async () => {
const { wrapper, fixtures, props } = await createFixtures(f => {
f.withUser({ email_addresses: ['test@clerk.com'] });
f.withBilling();
});

// Provide empty props to the PricingTable context
Expand All@@ -387,6 +398,7 @@ describe('PricingTable - plans visibility', () => {
it('shows no plans when user is signed in but subscription is undefined', async () => {
const { wrapper, fixtures, props } = await createFixtures(f => {
f.withUser({ email_addresses: ['test@clerk.com'] });
f.withBilling();
});

// Provide empty props to the PricingTable context
Expand All@@ -407,6 +419,7 @@ describe('PricingTable - plans visibility', () => {
it('prevents flicker by not showing plans while subscription is loading', async () => {
const { wrapper, fixtures, props } = await createFixtures(f => {
f.withUser({ email_addresses: ['test@clerk.com'] });
f.withBilling();
});

// Provide empty props to the PricingTable context
Expand Down
12 changes: 12 additions & 0 deletions ...ges/clerk-js/src/ui/components/SubscriptionDetails/__tests__/SubscriptionDetails.test.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -10,6 +10,7 @@ describe('SubscriptionDetails', () => {
it('Displays spinner when init loading', async () => {
const { wrapper } = await createFixtures(f => {
f.withUser({ email_addresses: ['test@clerk.com'] });
f.withBilling();
});

const { baseElement } = render(
Expand All@@ -31,6 +32,7 @@ describe('SubscriptionDetails', () => {
it('single active monthly subscription', async () => {
const { wrapper, fixtures } = await createFixtures(f => {
f.withUser({ email_addresses: ['test@clerk.com'] });
f.withBilling();
});

fixtures.clerk.billing.getSubscription.mockResolvedValue({
Expand DownExpand Up@@ -134,6 +136,7 @@ describe('SubscriptionDetails', () => {
it('single active annual subscription', async () => {
const { wrapper, fixtures } = await createFixtures(f => {
f.withUser({ email_addresses: ['test@clerk.com'] });
f.withBilling();
});

fixtures.clerk.billing.getSubscription.mockResolvedValue({
Expand DownExpand Up@@ -237,6 +240,7 @@ describe('SubscriptionDetails', () => {
it('active free subscription', async () => {
const { wrapper, fixtures } = await createFixtures(f => {
f.withUser({ email_addresses: ['test@clerk.com'] });
f.withBilling();
});

fixtures.clerk.billing.getSubscription.mockResolvedValue({
Expand DownExpand Up@@ -319,6 +323,7 @@ describe('SubscriptionDetails', () => {
it('one active annual and one upcoming monthly subscription', async () => {
const { wrapper, fixtures } = await createFixtures(f => {
f.withUser({ email_addresses: ['test@clerk.com'] });
f.withBilling();
});

const planAnnual = {
Expand DownExpand Up@@ -478,6 +483,7 @@ describe('SubscriptionDetails', () => {
it('one active and one upcoming FREE subscription', async () => {
const { wrapper, fixtures } = await createFixtures(f => {
f.withUser({ email_addresses: ['test@clerk.com'] });
f.withBilling();
});

const planMonthly = {
Expand DownExpand Up@@ -614,6 +620,7 @@ describe('SubscriptionDetails', () => {
it('allows cancelling a subscription of a monthly plan', async () => {
const { wrapper, fixtures } = await createFixtures(f => {
f.withUser({ email_addresses: ['test@clerk.com'] });
f.withBilling();
});

const cancelSubscriptionMock = jest.fn().mockResolvedValue({});
Expand DownExpand Up@@ -718,6 +725,7 @@ describe('SubscriptionDetails', () => {
it('calls resubscribe when the user clicks Resubscribe for a canceled subscription', async () => {
const { wrapper, fixtures } = await createFixtures(f => {
f.withUser({ email_addresses: ['test@clerk.com'] });
f.withBilling();
});

const plan = {
Expand DownExpand Up@@ -820,6 +828,7 @@ describe('SubscriptionDetails', () => {
it('calls switchToMonthly when the user clicks Switch to monthly for an annual subscription', async () => {
const { wrapper, fixtures } = await createFixtures(f => {
f.withUser({ email_addresses: ['test@clerk.com'] });
f.withBilling();
});

const plan = {
Expand DownExpand Up@@ -925,6 +934,7 @@ describe('SubscriptionDetails', () => {
it('past due subscription shows correct status and disables actions', async () => {
const { wrapper, fixtures } = await createFixtures(f => {
f.withUser({ email_addresses: ['test@clerk.com'] });
f.withBilling();
});

const plan = {
Expand DownExpand Up@@ -1017,6 +1027,7 @@ describe('SubscriptionDetails', () => {
it('active free trial subscription shows correct labels and behavior', async () => {
const { wrapper, fixtures } = await createFixtures(f => {
f.withUser({ email_addresses: ['test@clerk.com'] });
f.withBilling();
});

fixtures.clerk.billing.getSubscription.mockResolvedValue({
Expand DownExpand Up@@ -1125,6 +1136,7 @@ describe('SubscriptionDetails', () => {
it('allows cancelling a free trial with specific dialog text', async () => {
const { wrapper, fixtures } = await createFixtures(f => {
f.withUser({ email_addresses: ['test@clerk.com'] });
f.withBilling();
});

const cancelSubscriptionMock = jest.fn().mockResolvedValue({});
Expand Down
4 changes: 4 additions & 0 deletions packages/clerk-js/src/ui/components/Subscriptions/__tests__/SubscriptionsList.test.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -19,6 +19,7 @@ describe('SubscriptionsList', () => {
it('displays free trial badge when subscription is in free trial', async () => {
const { wrapper, fixtures } = await createFixtures(f => {
f.withUser({ email_addresses: ['test@clerk.com'] });
f.withBilling();
});

const freeTrialSubscription = {
Expand DownExpand Up@@ -82,6 +83,7 @@ describe('SubscriptionsList', () => {
it('on past due, no badge, but past due date is shown', async () => {
const { wrapper, fixtures } = await createFixtures(f => {
f.withUser({ email_addresses: ['test@clerk.com'] });
f.withBilling();
});

const pastDueSubscription = {
Expand DownExpand Up@@ -146,6 +148,7 @@ describe('SubscriptionsList', () => {
it('does not display active badge when subscription is active and it is a single item', async () => {
const { wrapper, fixtures } = await createFixtures(f => {
f.withUser({ email_addresses: ['test@clerk.com'] });
f.withBilling();
});

const activeSubscription = {
Expand DownExpand Up@@ -209,6 +212,7 @@ describe('SubscriptionsList', () => {
it('renders upcomming badge when current subscription is canceled but active', async () => {
const { wrapper, fixtures } = await createFixtures(f => {
f.withUser({ email_addresses: ['test@clerk.com'] });
f.withBilling();
});

const upcomingSubscription = {
Expand Down
4 changes: 2 additions & 2 deletions packages/clerk-js/src/ui/components/UserProfile/UserProfileRoutes.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -38,7 +38,7 @@ const PaymentAttemptPage = lazy(() =>
);

export const UserProfileRoutes = () => {
const { pages } = useUserProfileContext();
const { pages, shouldShowBilling } = useUserProfileContext();
const { apiKeysSettings, commerceSettings } = useEnvironment();

const isAccountPageRoot = pages.routes[0].id === USER_PROFILE_NAVBAR_ROUTE_ID.ACCOUNT;
Expand DownExpand Up@@ -80,7 +80,7 @@ export const UserProfileRoutes = () => {
</Route>
</Switch>
</Route>
{commerceSettings.billing.user.enabled ? (
{commerceSettings.billing.user.enabled && shouldShowBilling ? (
<Route path={isBillingPageRoot ? undefined : 'billing'}>
<Switch>
<Route index>
Expand Down
Loading
Loading
, '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

fix(clerk-js): Hide billing tab when appropriate#6696

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
panteliselef merged 6 commits into from
Sep 4, 2025
Merged

fix(clerk-js): Hide billing tab when appropriate #6696

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
c9b59fe
fix(clerk-js): Hide billing tab when appropriate
panteliselef Sep 3, 2025
9be19d3
Patch hooks
panteliselef Sep 3, 2025
5047efe
add tests
panteliselef Sep 3, 2025
7774ece
add billing to fixtures
panteliselef Sep 3, 2025
dfce2a6
improve enablement logic
panteliselef Sep 3, 2025
3bc2b34
apply SubscriberTypeContext
panteliselef Sep 3, 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
5 changes: 5 additions & 0 deletions .changeset/grumpy-bags-bow.md
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
---
'@clerk/shared': patch
---

Disable billing hooks when the feature is turned off.
5 changes: 5 additions & 0 deletions .changeset/mighty-lions-cut.md
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
---
'@clerk/clerk-js': patch
---

Hide billing tab when no paid plans exist, the user does not have a current or past subscription.
10 changes: 10 additions & 0 deletions packages/clerk-js/src/ui/components/Checkout/__tests__/Checkout.test.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -27,6 +27,7 @@ describe('Checkout', () => {
it('displays spinner when checkout is initializing', async () => {
const { wrapper, fixtures } = await createFixtures(f => {
f.withUser({ email_addresses: ['test@clerk.com'] });
f.withBilling();
});

// Mock billing to prevent actual API calls and stay in loading state
Expand DownExpand Up@@ -98,6 +99,7 @@ describe('Checkout', () => {
it('handles checkout initialization errors gracefully', async () => {
const { wrapper, fixtures } = await createFixtures(f => {
f.withUser({ email_addresses: ['test@clerk.com'] });
f.withBilling();
});

// Mock billing to reject with a Clerk-like error shape
Expand DownExpand Up@@ -129,6 +131,7 @@ describe('Checkout', () => {
it('displays proper loading state during checkout initialization', async () => {
const { wrapper, fixtures } = await createFixtures(f => {
f.withUser({ email_addresses: ['test@clerk.com'] });
f.withBilling();
});

// Mock billing to stay in loading state
Expand DownExpand Up@@ -161,6 +164,7 @@ describe('Checkout', () => {
it('maintains accessibility attributes correctly', async () => {
const { wrapper, fixtures } = await createFixtures(f => {
f.withUser({ email_addresses: ['test@clerk.com'] });
f.withBilling();
});

fixtures.clerk.billing.startCheckout.mockImplementation(() => new Promise(() => {}));
Expand DownExpand Up@@ -201,6 +205,7 @@ describe('Checkout', () => {
it('renders without crashing when all required props are provided', async () => {
const { wrapper, fixtures } = await createFixtures(f => {
f.withUser({ email_addresses: ['test@clerk.com'] });
f.withBilling();
});

// Mock billing to prevent actual API calls
Expand DownExpand Up@@ -228,6 +233,7 @@ describe('Checkout', () => {
it('renders without errors for monthly period', async () => {
const { wrapper, fixtures } = await createFixtures(f => {
f.withUser({ email_addresses: ['test@clerk.com'] });
f.withBilling();
});
fixtures.clerk.billing.startCheckout.mockImplementation(() => new Promise(() => {}));
const { baseElement } = render(
Expand DownExpand Up@@ -272,6 +278,7 @@ describe('Checkout', () => {
it('renders with correct CSS classes and structure', async () => {
const { wrapper, fixtures } = await createFixtures(f => {
f.withUser({ email_addresses: ['test@clerk.com'] });
f.withBilling();
});

fixtures.clerk.billing.startCheckout.mockImplementation(() => new Promise(() => {}));
Expand DownExpand Up@@ -305,6 +312,7 @@ describe('Checkout', () => {
it('renders free trial details during confirmation stage', async () => {
const { wrapper, fixtures } = await createFixtures(f => {
f.withUser({ email_addresses: ['test@clerk.com'] });
f.withBilling();
});

const freeTrialEndsAt = new Date('2025-08-19');
Expand DownExpand Up@@ -388,6 +396,7 @@ describe('Checkout', () => {
it('renders trial success details in completed stage', async () => {
const { wrapper, fixtures } = await createFixtures(f => {
f.withUser({ email_addresses: ['test@clerk.com'] });
f.withBilling();
});

const freeTrialEndsAt = new Date('2025-08-19');
Expand DownExpand Up@@ -469,6 +478,7 @@ describe('Checkout', () => {
it('renders existing payment sources during checkout confirmation', async () => {
const { wrapper, fixtures } = await createFixtures(f => {
f.withUser({ email_addresses: ['test@clerk.com'] });
f.withBilling();
});

fixtures.clerk.user?.getPaymentSources.mockResolvedValue({
Expand Down
4 changes: 2 additions & 2 deletions packages/clerk-js/src/ui/components/OrganizationProfile/OrganizationProfileRoutes.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -38,7 +38,7 @@ const OrganizationPaymentAttemptPage = lazy(() =>
);

export const OrganizationProfileRoutes = () => {
const { pages, isMembersPageRoot, isGeneralPageRoot, isBillingPageRoot, isApiKeysPageRoot } =
const { pages, isMembersPageRoot, isGeneralPageRoot, isBillingPageRoot, isApiKeysPageRoot, shouldShowBilling } =
useOrganizationProfileContext();
const { apiKeysSettings, commerceSettings } = useEnvironment();

Expand DownExpand Up@@ -83,7 +83,7 @@ export const OrganizationProfileRoutes = () => {
</Route>
</Switch>
</Route>
{commerceSettings.billing.organization.enabled ? (
{commerceSettings.billing.organization.enabled && shouldShowBilling ? (
<Protect
condition={has =>
has({ permission: 'org:sys_billing:read' }) || has({ permission: 'org:sys_billing:manage' })
Expand Down
6 changes: 4 additions & 2 deletions packages/clerk-js/src/ui/components/OrganizationProfile/index.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -7,7 +7,7 @@ import { NavbarMenuButtonRow } from '@/ui/elements/Navbar';
import { ProfileCard } from '@/ui/elements/ProfileCard';

import { ORGANIZATION_PROFILE_CARD_SCROLLBOX_ID } from '../../constants';
import { OrganizationProfileContext, withCoreUserGuard } from '../../contexts';
import { OrganizationProfileContext, SubscriberTypeContext, withCoreUserGuard } from '../../contexts';
import { Flow, localizationKeys } from '../../customizables';
import { Route, Switch } from '../../router';
import type { OrganizationProfileCtx } from '../../types';
Expand All@@ -26,7 +26,9 @@ const _OrganizationProfile = (_: OrganizationProfileProps) => {
<Flow.Part>
<Switch>
<Route>
<AuthenticatedRoutes />
<SubscriberTypeContext.Provider value='organization'>
<AuthenticatedRoutes />
</SubscriberTypeContext.Provider>
</Route>
</Switch>
</Flow.Part>
Expand Down
19 changes: 16 additions & 3 deletions packages/clerk-js/src/ui/components/PricingTable/__tests__/PricingTable.test.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -44,6 +44,7 @@ describe('PricingTable - trial info', () => {

it('shows footer notice with trial end date when active subscription is in free trial', async () => {
const { wrapper, fixtures, props } = await createFixtures(f => {
f.withBilling();
f.withUser({ email_addresses: ['test@clerk.com'] });
});

Expand DownExpand Up@@ -99,6 +100,7 @@ describe('PricingTable - trial info', () => {
it('shows CTA "Start N-day free trial" when eligible and plan has trial', async () => {
const { wrapper, fixtures, props } = await createFixtures(f => {
f.withUser({ email_addresses: ['test@clerk.com'] });
f.withBilling();
});

// Provide empty props to the PricingTable context
Expand DownExpand Up@@ -130,7 +132,9 @@ describe('PricingTable - trial info', () => {
});

it('shows CTA "Start N-day free trial" when user is signed out and plan has trial', async () => {
const { wrapper, fixtures, props } = await createFixtures();
const { wrapper, fixtures, props } = await createFixtures(f => {
f.withBilling();
});

// Provide empty props to the PricingTable context
props.setProps({});
Expand All@@ -149,7 +153,9 @@ describe('PricingTable - trial info', () => {
});

it('shows CTA "Subscribe" when user is signed out and plan has no trial', async () => {
const { wrapper, fixtures, props } = await createFixtures();
const { wrapper, fixtures, props } = await createFixtures(f => {
f.withBilling();
});

const nonTrialPlan = {
...trialPlan,
Expand DownExpand Up@@ -178,6 +184,7 @@ describe('PricingTable - trial info', () => {
it('shows footer notice with "starts at" when subscription is upcoming and not a free trial', async () => {
const { wrapper, fixtures, props } = await createFixtures(f => {
f.withUser({ email_addresses: ['test@clerk.com'] });
f.withBilling();
});

// Provide empty props to the PricingTable context
Expand DownExpand Up@@ -301,6 +308,7 @@ describe('PricingTable - plans visibility', () => {
it('shows plans when user is signed in and has a subscription', async () => {
const { wrapper, fixtures, props } = await createFixtures(f => {
f.withUser({ email_addresses: ['test@clerk.com'] });
f.withBilling();
});

// Provide empty props to the PricingTable context
Expand DownExpand Up@@ -347,7 +355,9 @@ describe('PricingTable - plans visibility', () => {
});

it('shows plans when user is signed out', async () => {
const { wrapper, fixtures, props } = await createFixtures();
const { wrapper, fixtures, props } = await createFixtures(f => {
f.withBilling();
});

// Provide empty props to the PricingTable context
props.setProps({});
Expand All@@ -367,6 +377,7 @@ describe('PricingTable - plans visibility', () => {
it('shows no plans when user is signed in but subscription is null', async () => {
const { wrapper, fixtures, props } = await createFixtures(f => {
f.withUser({ email_addresses: ['test@clerk.com'] });
f.withBilling();
});

// Provide empty props to the PricingTable context
Expand All@@ -387,6 +398,7 @@ describe('PricingTable - plans visibility', () => {
it('shows no plans when user is signed in but subscription is undefined', async () => {
const { wrapper, fixtures, props } = await createFixtures(f => {
f.withUser({ email_addresses: ['test@clerk.com'] });
f.withBilling();
});

// Provide empty props to the PricingTable context
Expand All@@ -407,6 +419,7 @@ describe('PricingTable - plans visibility', () => {
it('prevents flicker by not showing plans while subscription is loading', async () => {
const { wrapper, fixtures, props } = await createFixtures(f => {
f.withUser({ email_addresses: ['test@clerk.com'] });
f.withBilling();
});

// Provide empty props to the PricingTable context
Expand Down
12 changes: 12 additions & 0 deletions ...ges/clerk-js/src/ui/components/SubscriptionDetails/__tests__/SubscriptionDetails.test.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -10,6 +10,7 @@ describe('SubscriptionDetails', () => {
it('Displays spinner when init loading', async () => {
const { wrapper } = await createFixtures(f => {
f.withUser({ email_addresses: ['test@clerk.com'] });
f.withBilling();
});

const { baseElement } = render(
Expand All@@ -31,6 +32,7 @@ describe('SubscriptionDetails', () => {
it('single active monthly subscription', async () => {
const { wrapper, fixtures } = await createFixtures(f => {
f.withUser({ email_addresses: ['test@clerk.com'] });
f.withBilling();
});

fixtures.clerk.billing.getSubscription.mockResolvedValue({
Expand DownExpand Up@@ -134,6 +136,7 @@ describe('SubscriptionDetails', () => {
it('single active annual subscription', async () => {
const { wrapper, fixtures } = await createFixtures(f => {
f.withUser({ email_addresses: ['test@clerk.com'] });
f.withBilling();
});

fixtures.clerk.billing.getSubscription.mockResolvedValue({
Expand DownExpand Up@@ -237,6 +240,7 @@ describe('SubscriptionDetails', () => {
it('active free subscription', async () => {
const { wrapper, fixtures } = await createFixtures(f => {
f.withUser({ email_addresses: ['test@clerk.com'] });
f.withBilling();
});

fixtures.clerk.billing.getSubscription.mockResolvedValue({
Expand DownExpand Up@@ -319,6 +323,7 @@ describe('SubscriptionDetails', () => {
it('one active annual and one upcoming monthly subscription', async () => {
const { wrapper, fixtures } = await createFixtures(f => {
f.withUser({ email_addresses: ['test@clerk.com'] });
f.withBilling();
});

const planAnnual = {
Expand DownExpand Up@@ -478,6 +483,7 @@ describe('SubscriptionDetails', () => {
it('one active and one upcoming FREE subscription', async () => {
const { wrapper, fixtures } = await createFixtures(f => {
f.withUser({ email_addresses: ['test@clerk.com'] });
f.withBilling();
});

const planMonthly = {
Expand DownExpand Up@@ -614,6 +620,7 @@ describe('SubscriptionDetails', () => {
it('allows cancelling a subscription of a monthly plan', async () => {
const { wrapper, fixtures } = await createFixtures(f => {
f.withUser({ email_addresses: ['test@clerk.com'] });
f.withBilling();
});

const cancelSubscriptionMock = jest.fn().mockResolvedValue({});
Expand DownExpand Up@@ -718,6 +725,7 @@ describe('SubscriptionDetails', () => {
it('calls resubscribe when the user clicks Resubscribe for a canceled subscription', async () => {
const { wrapper, fixtures } = await createFixtures(f => {
f.withUser({ email_addresses: ['test@clerk.com'] });
f.withBilling();
});

const plan = {
Expand DownExpand Up@@ -820,6 +828,7 @@ describe('SubscriptionDetails', () => {
it('calls switchToMonthly when the user clicks Switch to monthly for an annual subscription', async () => {
const { wrapper, fixtures } = await createFixtures(f => {
f.withUser({ email_addresses: ['test@clerk.com'] });
f.withBilling();
});

const plan = {
Expand DownExpand Up@@ -925,6 +934,7 @@ describe('SubscriptionDetails', () => {
it('past due subscription shows correct status and disables actions', async () => {
const { wrapper, fixtures } = await createFixtures(f => {
f.withUser({ email_addresses: ['test@clerk.com'] });
f.withBilling();
});

const plan = {
Expand DownExpand Up@@ -1017,6 +1027,7 @@ describe('SubscriptionDetails', () => {
it('active free trial subscription shows correct labels and behavior', async () => {
const { wrapper, fixtures } = await createFixtures(f => {
f.withUser({ email_addresses: ['test@clerk.com'] });
f.withBilling();
});

fixtures.clerk.billing.getSubscription.mockResolvedValue({
Expand DownExpand Up@@ -1125,6 +1136,7 @@ describe('SubscriptionDetails', () => {
it('allows cancelling a free trial with specific dialog text', async () => {
const { wrapper, fixtures } = await createFixtures(f => {
f.withUser({ email_addresses: ['test@clerk.com'] });
f.withBilling();
});

const cancelSubscriptionMock = jest.fn().mockResolvedValue({});
Expand Down
4 changes: 4 additions & 0 deletions packages/clerk-js/src/ui/components/Subscriptions/__tests__/SubscriptionsList.test.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -19,6 +19,7 @@ describe('SubscriptionsList', () => {
it('displays free trial badge when subscription is in free trial', async () => {
const { wrapper, fixtures } = await createFixtures(f => {
f.withUser({ email_addresses: ['test@clerk.com'] });
f.withBilling();
});

const freeTrialSubscription = {
Expand DownExpand Up@@ -82,6 +83,7 @@ describe('SubscriptionsList', () => {
it('on past due, no badge, but past due date is shown', async () => {
const { wrapper, fixtures } = await createFixtures(f => {
f.withUser({ email_addresses: ['test@clerk.com'] });
f.withBilling();
});

const pastDueSubscription = {
Expand DownExpand Up@@ -146,6 +148,7 @@ describe('SubscriptionsList', () => {
it('does not display active badge when subscription is active and it is a single item', async () => {
const { wrapper, fixtures } = await createFixtures(f => {
f.withUser({ email_addresses: ['test@clerk.com'] });
f.withBilling();
});

const activeSubscription = {
Expand DownExpand Up@@ -209,6 +212,7 @@ describe('SubscriptionsList', () => {
it('renders upcomming badge when current subscription is canceled but active', async () => {
const { wrapper, fixtures } = await createFixtures(f => {
f.withUser({ email_addresses: ['test@clerk.com'] });
f.withBilling();
});

const upcomingSubscription = {
Expand Down
4 changes: 2 additions & 2 deletions packages/clerk-js/src/ui/components/UserProfile/UserProfileRoutes.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -38,7 +38,7 @@ const PaymentAttemptPage = lazy(() =>
);

export const UserProfileRoutes = () => {
const { pages } = useUserProfileContext();
const { pages, shouldShowBilling } = useUserProfileContext();
const { apiKeysSettings, commerceSettings } = useEnvironment();

const isAccountPageRoot = pages.routes[0].id === USER_PROFILE_NAVBAR_ROUTE_ID.ACCOUNT;
Expand DownExpand Up@@ -80,7 +80,7 @@ export const UserProfileRoutes = () => {
</Route>
</Switch>
</Route>
{commerceSettings.billing.user.enabled ? (
{commerceSettings.billing.user.enabled && shouldShowBilling ? (
<Route path={isBillingPageRoot ? undefined : 'billing'}>
<Switch>
<Route index>
Expand Down
Loading
Loading
, '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

fix(clerk-js): Hide billing tab when appropriate#6696

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
panteliselef merged 6 commits into from
Sep 4, 2025
Merged

fix(clerk-js): Hide billing tab when appropriate #6696

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
c9b59fe
fix(clerk-js): Hide billing tab when appropriate
panteliselef Sep 3, 2025
9be19d3
Patch hooks
panteliselef Sep 3, 2025
5047efe
add tests
panteliselef Sep 3, 2025
7774ece
add billing to fixtures
panteliselef Sep 3, 2025
dfce2a6
improve enablement logic
panteliselef Sep 3, 2025
3bc2b34
apply SubscriberTypeContext
panteliselef Sep 3, 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
5 changes: 5 additions & 0 deletions .changeset/grumpy-bags-bow.md
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
---
'@clerk/shared': patch
---

Disable billing hooks when the feature is turned off.
5 changes: 5 additions & 0 deletions .changeset/mighty-lions-cut.md
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
---
'@clerk/clerk-js': patch
---

Hide billing tab when no paid plans exist, the user does not have a current or past subscription.
10 changes: 10 additions & 0 deletions packages/clerk-js/src/ui/components/Checkout/__tests__/Checkout.test.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -27,6 +27,7 @@ describe('Checkout', () => {
it('displays spinner when checkout is initializing', async () => {
const { wrapper, fixtures } = await createFixtures(f => {
f.withUser({ email_addresses: ['test@clerk.com'] });
f.withBilling();
});

// Mock billing to prevent actual API calls and stay in loading state
Expand DownExpand Up@@ -98,6 +99,7 @@ describe('Checkout', () => {
it('handles checkout initialization errors gracefully', async () => {
const { wrapper, fixtures } = await createFixtures(f => {
f.withUser({ email_addresses: ['test@clerk.com'] });
f.withBilling();
});

// Mock billing to reject with a Clerk-like error shape
Expand DownExpand Up@@ -129,6 +131,7 @@ describe('Checkout', () => {
it('displays proper loading state during checkout initialization', async () => {
const { wrapper, fixtures } = await createFixtures(f => {
f.withUser({ email_addresses: ['test@clerk.com'] });
f.withBilling();
});

// Mock billing to stay in loading state
Expand DownExpand Up@@ -161,6 +164,7 @@ describe('Checkout', () => {
it('maintains accessibility attributes correctly', async () => {
const { wrapper, fixtures } = await createFixtures(f => {
f.withUser({ email_addresses: ['test@clerk.com'] });
f.withBilling();
});

fixtures.clerk.billing.startCheckout.mockImplementation(() => new Promise(() => {}));
Expand DownExpand Up@@ -201,6 +205,7 @@ describe('Checkout', () => {
it('renders without crashing when all required props are provided', async () => {
const { wrapper, fixtures } = await createFixtures(f => {
f.withUser({ email_addresses: ['test@clerk.com'] });
f.withBilling();
});

// Mock billing to prevent actual API calls
Expand DownExpand Up@@ -228,6 +233,7 @@ describe('Checkout', () => {
it('renders without errors for monthly period', async () => {
const { wrapper, fixtures } = await createFixtures(f => {
f.withUser({ email_addresses: ['test@clerk.com'] });
f.withBilling();
});
fixtures.clerk.billing.startCheckout.mockImplementation(() => new Promise(() => {}));
const { baseElement } = render(
Expand DownExpand Up@@ -272,6 +278,7 @@ describe('Checkout', () => {
it('renders with correct CSS classes and structure', async () => {
const { wrapper, fixtures } = await createFixtures(f => {
f.withUser({ email_addresses: ['test@clerk.com'] });
f.withBilling();
});

fixtures.clerk.billing.startCheckout.mockImplementation(() => new Promise(() => {}));
Expand DownExpand Up@@ -305,6 +312,7 @@ describe('Checkout', () => {
it('renders free trial details during confirmation stage', async () => {
const { wrapper, fixtures } = await createFixtures(f => {
f.withUser({ email_addresses: ['test@clerk.com'] });
f.withBilling();
});

const freeTrialEndsAt = new Date('2025-08-19');
Expand DownExpand Up@@ -388,6 +396,7 @@ describe('Checkout', () => {
it('renders trial success details in completed stage', async () => {
const { wrapper, fixtures } = await createFixtures(f => {
f.withUser({ email_addresses: ['test@clerk.com'] });
f.withBilling();
});

const freeTrialEndsAt = new Date('2025-08-19');
Expand DownExpand Up@@ -469,6 +478,7 @@ describe('Checkout', () => {
it('renders existing payment sources during checkout confirmation', async () => {
const { wrapper, fixtures } = await createFixtures(f => {
f.withUser({ email_addresses: ['test@clerk.com'] });
f.withBilling();
});

fixtures.clerk.user?.getPaymentSources.mockResolvedValue({
Expand Down
4 changes: 2 additions & 2 deletions packages/clerk-js/src/ui/components/OrganizationProfile/OrganizationProfileRoutes.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -38,7 +38,7 @@ const OrganizationPaymentAttemptPage = lazy(() =>
);

export const OrganizationProfileRoutes = () => {
const { pages, isMembersPageRoot, isGeneralPageRoot, isBillingPageRoot, isApiKeysPageRoot } =
const { pages, isMembersPageRoot, isGeneralPageRoot, isBillingPageRoot, isApiKeysPageRoot, shouldShowBilling } =
useOrganizationProfileContext();
const { apiKeysSettings, commerceSettings } = useEnvironment();

Expand DownExpand Up@@ -83,7 +83,7 @@ export const OrganizationProfileRoutes = () => {
</Route>
</Switch>
</Route>
{commerceSettings.billing.organization.enabled ? (
{commerceSettings.billing.organization.enabled && shouldShowBilling ? (
<Protect
condition={has =>
has({ permission: 'org:sys_billing:read' }) || has({ permission: 'org:sys_billing:manage' })
Expand Down
6 changes: 4 additions & 2 deletions packages/clerk-js/src/ui/components/OrganizationProfile/index.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -7,7 +7,7 @@ import { NavbarMenuButtonRow } from '@/ui/elements/Navbar';
import { ProfileCard } from '@/ui/elements/ProfileCard';

import { ORGANIZATION_PROFILE_CARD_SCROLLBOX_ID } from '../../constants';
import { OrganizationProfileContext, withCoreUserGuard } from '../../contexts';
import { OrganizationProfileContext, SubscriberTypeContext, withCoreUserGuard } from '../../contexts';
import { Flow, localizationKeys } from '../../customizables';
import { Route, Switch } from '../../router';
import type { OrganizationProfileCtx } from '../../types';
Expand All@@ -26,7 +26,9 @@ const _OrganizationProfile = (_: OrganizationProfileProps) => {
<Flow.Part>
<Switch>
<Route>
<AuthenticatedRoutes />
<SubscriberTypeContext.Provider value='organization'>
<AuthenticatedRoutes />
</SubscriberTypeContext.Provider>
</Route>
</Switch>
</Flow.Part>
Expand Down
19 changes: 16 additions & 3 deletions packages/clerk-js/src/ui/components/PricingTable/__tests__/PricingTable.test.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -44,6 +44,7 @@ describe('PricingTable - trial info', () => {

it('shows footer notice with trial end date when active subscription is in free trial', async () => {
const { wrapper, fixtures, props } = await createFixtures(f => {
f.withBilling();
f.withUser({ email_addresses: ['test@clerk.com'] });
});

Expand DownExpand Up@@ -99,6 +100,7 @@ describe('PricingTable - trial info', () => {
it('shows CTA "Start N-day free trial" when eligible and plan has trial', async () => {
const { wrapper, fixtures, props } = await createFixtures(f => {
f.withUser({ email_addresses: ['test@clerk.com'] });
f.withBilling();
});

// Provide empty props to the PricingTable context
Expand DownExpand Up@@ -130,7 +132,9 @@ describe('PricingTable - trial info', () => {
});

it('shows CTA "Start N-day free trial" when user is signed out and plan has trial', async () => {
const { wrapper, fixtures, props } = await createFixtures();
const { wrapper, fixtures, props } = await createFixtures(f => {
f.withBilling();
});

// Provide empty props to the PricingTable context
props.setProps({});
Expand All@@ -149,7 +153,9 @@ describe('PricingTable - trial info', () => {
});

it('shows CTA "Subscribe" when user is signed out and plan has no trial', async () => {
const { wrapper, fixtures, props } = await createFixtures();
const { wrapper, fixtures, props } = await createFixtures(f => {
f.withBilling();
});

const nonTrialPlan = {
...trialPlan,
Expand DownExpand Up@@ -178,6 +184,7 @@ describe('PricingTable - trial info', () => {
it('shows footer notice with "starts at" when subscription is upcoming and not a free trial', async () => {
const { wrapper, fixtures, props } = await createFixtures(f => {
f.withUser({ email_addresses: ['test@clerk.com'] });
f.withBilling();
});

// Provide empty props to the PricingTable context
Expand DownExpand Up@@ -301,6 +308,7 @@ describe('PricingTable - plans visibility', () => {
it('shows plans when user is signed in and has a subscription', async () => {
const { wrapper, fixtures, props } = await createFixtures(f => {
f.withUser({ email_addresses: ['test@clerk.com'] });
f.withBilling();
});

// Provide empty props to the PricingTable context
Expand DownExpand Up@@ -347,7 +355,9 @@ describe('PricingTable - plans visibility', () => {
});

it('shows plans when user is signed out', async () => {
const { wrapper, fixtures, props } = await createFixtures();
const { wrapper, fixtures, props } = await createFixtures(f => {
f.withBilling();
});

// Provide empty props to the PricingTable context
props.setProps({});
Expand All@@ -367,6 +377,7 @@ describe('PricingTable - plans visibility', () => {
it('shows no plans when user is signed in but subscription is null', async () => {
const { wrapper, fixtures, props } = await createFixtures(f => {
f.withUser({ email_addresses: ['test@clerk.com'] });
f.withBilling();
});

// Provide empty props to the PricingTable context
Expand All@@ -387,6 +398,7 @@ describe('PricingTable - plans visibility', () => {
it('shows no plans when user is signed in but subscription is undefined', async () => {
const { wrapper, fixtures, props } = await createFixtures(f => {
f.withUser({ email_addresses: ['test@clerk.com'] });
f.withBilling();
});

// Provide empty props to the PricingTable context
Expand All@@ -407,6 +419,7 @@ describe('PricingTable - plans visibility', () => {
it('prevents flicker by not showing plans while subscription is loading', async () => {
const { wrapper, fixtures, props } = await createFixtures(f => {
f.withUser({ email_addresses: ['test@clerk.com'] });
f.withBilling();
});

// Provide empty props to the PricingTable context
Expand Down
12 changes: 12 additions & 0 deletions ...ges/clerk-js/src/ui/components/SubscriptionDetails/__tests__/SubscriptionDetails.test.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -10,6 +10,7 @@ describe('SubscriptionDetails', () => {
it('Displays spinner when init loading', async () => {
const { wrapper } = await createFixtures(f => {
f.withUser({ email_addresses: ['test@clerk.com'] });
f.withBilling();
});

const { baseElement } = render(
Expand All@@ -31,6 +32,7 @@ describe('SubscriptionDetails', () => {
it('single active monthly subscription', async () => {
const { wrapper, fixtures } = await createFixtures(f => {
f.withUser({ email_addresses: ['test@clerk.com'] });
f.withBilling();
});

fixtures.clerk.billing.getSubscription.mockResolvedValue({
Expand DownExpand Up@@ -134,6 +136,7 @@ describe('SubscriptionDetails', () => {
it('single active annual subscription', async () => {
const { wrapper, fixtures } = await createFixtures(f => {
f.withUser({ email_addresses: ['test@clerk.com'] });
f.withBilling();
});

fixtures.clerk.billing.getSubscription.mockResolvedValue({
Expand DownExpand Up@@ -237,6 +240,7 @@ describe('SubscriptionDetails', () => {
it('active free subscription', async () => {
const { wrapper, fixtures } = await createFixtures(f => {
f.withUser({ email_addresses: ['test@clerk.com'] });
f.withBilling();
});

fixtures.clerk.billing.getSubscription.mockResolvedValue({
Expand DownExpand Up@@ -319,6 +323,7 @@ describe('SubscriptionDetails', () => {
it('one active annual and one upcoming monthly subscription', async () => {
const { wrapper, fixtures } = await createFixtures(f => {
f.withUser({ email_addresses: ['test@clerk.com'] });
f.withBilling();
});

const planAnnual = {
Expand DownExpand Up@@ -478,6 +483,7 @@ describe('SubscriptionDetails', () => {
it('one active and one upcoming FREE subscription', async () => {
const { wrapper, fixtures } = await createFixtures(f => {
f.withUser({ email_addresses: ['test@clerk.com'] });
f.withBilling();
});

const planMonthly = {
Expand DownExpand Up@@ -614,6 +620,7 @@ describe('SubscriptionDetails', () => {
it('allows cancelling a subscription of a monthly plan', async () => {
const { wrapper, fixtures } = await createFixtures(f => {
f.withUser({ email_addresses: ['test@clerk.com'] });
f.withBilling();
});

const cancelSubscriptionMock = jest.fn().mockResolvedValue({});
Expand DownExpand Up@@ -718,6 +725,7 @@ describe('SubscriptionDetails', () => {
it('calls resubscribe when the user clicks Resubscribe for a canceled subscription', async () => {
const { wrapper, fixtures } = await createFixtures(f => {
f.withUser({ email_addresses: ['test@clerk.com'] });
f.withBilling();
});

const plan = {
Expand DownExpand Up@@ -820,6 +828,7 @@ describe('SubscriptionDetails', () => {
it('calls switchToMonthly when the user clicks Switch to monthly for an annual subscription', async () => {
const { wrapper, fixtures } = await createFixtures(f => {
f.withUser({ email_addresses: ['test@clerk.com'] });
f.withBilling();
});

const plan = {
Expand DownExpand Up@@ -925,6 +934,7 @@ describe('SubscriptionDetails', () => {
it('past due subscription shows correct status and disables actions', async () => {
const { wrapper, fixtures } = await createFixtures(f => {
f.withUser({ email_addresses: ['test@clerk.com'] });
f.withBilling();
});

const plan = {
Expand DownExpand Up@@ -1017,6 +1027,7 @@ describe('SubscriptionDetails', () => {
it('active free trial subscription shows correct labels and behavior', async () => {
const { wrapper, fixtures } = await createFixtures(f => {
f.withUser({ email_addresses: ['test@clerk.com'] });
f.withBilling();
});

fixtures.clerk.billing.getSubscription.mockResolvedValue({
Expand DownExpand Up@@ -1125,6 +1136,7 @@ describe('SubscriptionDetails', () => {
it('allows cancelling a free trial with specific dialog text', async () => {
const { wrapper, fixtures } = await createFixtures(f => {
f.withUser({ email_addresses: ['test@clerk.com'] });
f.withBilling();
});

const cancelSubscriptionMock = jest.fn().mockResolvedValue({});
Expand Down
4 changes: 4 additions & 0 deletions packages/clerk-js/src/ui/components/Subscriptions/__tests__/SubscriptionsList.test.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -19,6 +19,7 @@ describe('SubscriptionsList', () => {
it('displays free trial badge when subscription is in free trial', async () => {
const { wrapper, fixtures } = await createFixtures(f => {
f.withUser({ email_addresses: ['test@clerk.com'] });
f.withBilling();
});

const freeTrialSubscription = {
Expand DownExpand Up@@ -82,6 +83,7 @@ describe('SubscriptionsList', () => {
it('on past due, no badge, but past due date is shown', async () => {
const { wrapper, fixtures } = await createFixtures(f => {
f.withUser({ email_addresses: ['test@clerk.com'] });
f.withBilling();
});

const pastDueSubscription = {
Expand DownExpand Up@@ -146,6 +148,7 @@ describe('SubscriptionsList', () => {
it('does not display active badge when subscription is active and it is a single item', async () => {
const { wrapper, fixtures } = await createFixtures(f => {
f.withUser({ email_addresses: ['test@clerk.com'] });
f.withBilling();
});

const activeSubscription = {
Expand DownExpand Up@@ -209,6 +212,7 @@ describe('SubscriptionsList', () => {
it('renders upcomming badge when current subscription is canceled but active', async () => {
const { wrapper, fixtures } = await createFixtures(f => {
f.withUser({ email_addresses: ['test@clerk.com'] });
f.withBilling();
});

const upcomingSubscription = {
Expand Down
4 changes: 2 additions & 2 deletions packages/clerk-js/src/ui/components/UserProfile/UserProfileRoutes.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -38,7 +38,7 @@ const PaymentAttemptPage = lazy(() =>
);

export const UserProfileRoutes = () => {
const { pages } = useUserProfileContext();
const { pages, shouldShowBilling } = useUserProfileContext();
const { apiKeysSettings, commerceSettings } = useEnvironment();

const isAccountPageRoot = pages.routes[0].id === USER_PROFILE_NAVBAR_ROUTE_ID.ACCOUNT;
Expand DownExpand Up@@ -80,7 +80,7 @@ export const UserProfileRoutes = () => {
</Route>
</Switch>
</Route>
{commerceSettings.billing.user.enabled ? (
{commerceSettings.billing.user.enabled && shouldShowBilling ? (
<Route path={isBillingPageRoot ? undefined : 'billing'}>
<Switch>
<Route index>
Expand Down
Loading
Loading