fix(clerk-js): Hide billing tab when appropriate #6696
Conversation
🦋 Changeset detectedLatest commit: 3bc2b34 The changes in this PR will be included in the next version bump. This PR includes changesets to release 19 packages
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
WalkthroughAdds a billing-visibility flag ( Changes
Sequence Diagram(s)sequenceDiagram
autonumber
actor User
participant UI as App UI
participant Env as EnvironmentResource
participant Hooks as Billing Hooks
participant Ctx as Profile Context
participant Pages as createCustomPages
participant Routes as Profile Routes
User->>UI: Open profile
UI->>Env: Read commerceSettings.billing.{user|organization}.enabled
alt Env billing enabled
UI->>Hooks: Fetch subscription & statements (scope-aware)
Hooks-->>UI: subscription/statements data
else Env billing disabled
Note right of UI: Skip billing fetches
end
UI->>Ctx: Compute shouldShowBilling (Env + subscription + statements)
UI->>Pages: createCustomPages(..., shouldShowBilling, Env)
Pages->>Routes: Build routes (include billing only if Env enabled AND shouldShowBilling)
Routes-->>UI: Render route set
Estimated code review effort🎯 4 (Complex) | ⏱️ ~60 minutes Poem
📜 Recent review detailsConfiguration used: Path: .coderabbit.yaml Review profile: CHILL Plan: Pro 💡 Knowledge Base configuration:
You can enable these sources in your CodeRabbit configuration. 📒 Files selected for processing (1)
🧰 Additional context used📓 Path-based instructions (9)packages/clerk-js/src/ui/**/*.{ts,tsx}📄 CodeRabbit inference engine (.cursor/rules/clerk-js-ui.mdc)
Files:
**/*.{js,jsx,ts,tsx}📄 CodeRabbit inference engine (.cursor/rules/development.mdc)
Files:
**/*.{js,jsx,ts,tsx,json,css,scss,md,yaml,yml}📄 CodeRabbit inference engine (.cursor/rules/development.mdc)
Files:
packages/**/*.{ts,tsx}📄 CodeRabbit inference engine (.cursor/rules/development.mdc)
Files:
packages/**/*.{ts,tsx,d.ts}📄 CodeRabbit inference engine (.cursor/rules/development.mdc)
Files:
**/*.{ts,tsx}📄 CodeRabbit inference engine (.cursor/rules/development.mdc)
Files:
**/*.{jsx,tsx}📄 CodeRabbit inference engine (.cursor/rules/development.mdc)
Files:
**/*.{js,ts,tsx,jsx}📄 CodeRabbit inference engine (.cursor/rules/monorepo.mdc)
Files:
**/*.tsx📄 CodeRabbit inference engine (.cursor/rules/react.mdc)
Files:
🧬 Code graph analysis (1)packages/clerk-js/src/ui/components/OrganizationProfile/index.tsx (1)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (6)
🔇 Additional comments (2)
✨ Finishing Touches
🧪 Generate unit tests
🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. CodeRabbit Commands (Invoked using PR/Issue comments)Type Other keywords and placeholders
Status, Documentation and Community
|
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
@clerk/agent-toolkit
@clerk/astro
@clerk/backend
@clerk/chrome-extension
@clerk/clerk-js
@clerk/dev-cli
@clerk/elements
@clerk/clerk-expo
@clerk/expo-passkeys
@clerk/express
@clerk/fastify
@clerk/localizations
@clerk/nextjs
@clerk/nuxt
@clerk/clerk-react
@clerk/react-router
@clerk/remix
@clerk/shared
@clerk/tanstack-react-start
@clerk/testing
@clerk/themes
@clerk/types
@clerk/upgrade
@clerk/vue
commit: |
There was a problem hiding this comment.
Actionable comments posted: 5
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (2)
packages/shared/src/react/hooks/createCommerceHook.tsx (1)
41-109: Use scope‐correct billing gating
IncreateCommercePaginatedHook(packages/shared/src/react/hooks/createCommerceHook.tsx:88), replace the hard‐codedenvironment?.commerceSettings.billing.user.enabledwith a conditional check onenvironment?.commerceSettings.billing[_for].enabled(so organization hooks respectbilling.organization.enabled). Likewise, inuseSubscription(packages/shared/src/react/hooks/useSubscription.tsx:45), gate onbilling.organization.enabledwhenparams.for === 'organization'.packages/clerk-js/src/ui/utils/createCustomPages.tsx (1)
336-341: Wrong navbar route id for organization billing (breaks isBillingPageRoot, theming, reordering).This route uses the user-profile constant instead of the organization one.
- INITIAL_ROUTES.push({ - name: localizationKeys('organizationProfile.navbar.billing'), - id: USER_PROFILE_NAVBAR_ROUTE_ID.BILLING, - icon: CreditCard, - path: 'organization-billing', - }); + INITIAL_ROUTES.push({ + name: localizationKeys('organizationProfile.navbar.billing'), + id: ORGANIZATION_PROFILE_NAVBAR_ROUTE_ID.BILLING, + icon: CreditCard, + path: 'organization-billing', + });
🧹 Nitpick comments (13)
.changeset/mighty-lions-cut.md (1)
5-5: Fix comma splice and align wording with UI label.Use imperative mood and capitalize the tab name.
-Hide billing tab when no paid plans exist, the user does not have a current or past subscription. +Hide the Billing tab when there are no paid plans and the user has no current or past subscription..changeset/grumpy-bags-bow.md (1)
5-5: Clarify what “feature is turned off” refers to.Be explicit that this follows the environment’s billing flags.
-Disable billing hooks when the feature is turned off. +Disable billing hooks when Billing is disabled via the environment configuration.packages/shared/src/react/hooks/useSubscription.tsx (3)
39-41: Avoid repeating__unstable__environmentaccess and the ts-expect-error across hooks.Consider a tiny internal helper (or context) that returns a typed
EnvironmentResource | null, so we keep this escape hatch in one place.I can PR a
useEnvironmentUnsafe()helper under shared/react that encapsulates this cast and documents the trade-offs. Want me to draft it?
59-59: Minor: stabilize callback deps.Destructure
mutateto avoid re-creating the callback ifswrobject identity changes.- const revalidate = useCallback(() => swr.mutate(), [swr.mutate]); + const { mutate } = swr; + const revalidate = useCallback(() => mutate(), [mutate]);
32-68: Add tests for gating cases.Please add coverage for:
- user scope: enabled vs disabled flag
- org scope: enabled vs disabled flag; with and without
organization.id- ensuring no fetch is attempted when disabled or missing scope
I can scaffold tests with SWR key spies and mocked
clerk.billing.getSubscription.packages/shared/src/react/hooks/createCommerceHook.tsx (2)
41-109: DRY the environment access and gating logic.Extract a small shared util (e.g.,
getBillingEnabled(environment, scope)) and reuse here and inuseSubscriptionto prevent drift.I can add the helper under
packages/shared/src/react/utils/billing.tsand update both call sites.
90-104: Key consistency: org scope should include orgId in the cache key.You already include
orgIdin the event payload; ensureusePagesOrInfinitekeying includes it to avoid cross-org cache bleed.If
usePagesOrInfinitederives the key from the third arg, we’re good. Otherwise, I can patch it to incorporateorgId.packages/clerk-js/src/ui/contexts/components/OrganizationProfile.ts (2)
59-62: Memo deps: include environment/clerk (or document their stability).
createOrganizationProfileCustomPagesdepends onenvironmentandclerk. If their identity can change, add them to deps.- const pages = useMemo( - () => createOrganizationProfileCustomPages(customPages || [], clerk, shouldShowBilling, environment), - [customPages, shouldShowBilling], - ); + const pages = useMemo( + () => createOrganizationProfileCustomPages(customPages || [], clerk, shouldShowBilling, environment), + [customPages, shouldShowBilling, environment, clerk], + );
50-57: Typos in comment.- // TODO(@BILLING): Remove this when C1s can disable user billing seperately from the organization billing. + // TODO(@BILLING): Remove this when C1s can disable user billing separately from organization billing. - // The instance has at lease one visible plan the C2 can choose + // The instance has at least one visible plan the C2 can choosepackages/clerk-js/src/ui/components/OrganizationProfile/OrganizationProfileRoutes.tsx (1)
86-119: Route gating LGTM; prefer null Suspense fallbacks.Functional gating is correct. Replace empty-string fallbacks with
null.- <Suspense fallback={''}> + <Suspense fallback={null}> <OrganizationBillingPage /> </Suspense> @@ - <Suspense fallback={''}> + <Suspense fallback={null}> <OrganizationPlansPage /> </Suspense> @@ - <Suspense fallback={''}> + <Suspense fallback={null}> <OrganizationStatementPage /> </Suspense> @@ - <Suspense fallback={''}> + <Suspense fallback={null}> <OrganizationPaymentAttemptPage /> </Suspense>packages/clerk-js/src/ui/components/UserProfile/UserProfileRoutes.tsx (1)
83-110: Route gating LGTM; prefer null Suspense fallbacks.- <Suspense fallback={''}> + <Suspense fallback={null}> <BillingPage /> </Suspense> @@ - {commerceSettings.billing.user.hasPaidPlans ? ( + {commerceSettings.billing.user.hasPaidPlans ? ( <Route path='plans'> - <Suspense fallback={''}> + <Suspense fallback={null}> <PlansPage /> </Suspense> </Route> ) : null} @@ - <Route path='statement/:statementId'> - <Suspense fallback={''}> + <Route path='statement/:statementId'> + <Suspense fallback={null}> <StatementPage /> </Suspense> </Route> <Route path='payment-attempt/:paymentAttemptId'> - <Suspense fallback={''}> + <Suspense fallback={null}> <PaymentAttemptPage /> </Suspense> </Route>packages/clerk-js/src/ui/contexts/components/UserProfile.ts (2)
58-60: Memo deps: include environment/clerk (or document their stability).- const pages = useMemo(() => { - return createUserProfileCustomPages(customPages || [], clerk, shouldShowBilling, environment); - }, [customPages, shouldShowBilling]); + const pages = useMemo(() => { + return createUserProfileCustomPages(customPages || [], clerk, shouldShowBilling, environment); + }, [customPages, shouldShowBilling, environment, clerk]);
42-49: Typos in comment.- // TODO(@BILLING): Remove this when C1s can disable user billing seperately from the organization billing. + // TODO(@BILLING): Remove this when C1s can disable user billing separately from organization billing. - // The instance has at lease one visible plan the C2 can choose + // The instance has at least one visible plan the C2 can choose
📜 Review details
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
💡 Knowledge Base configuration:
- MCP integration is disabled by default for public repositories
- Jira integration is disabled by default for public repositories
- Linear integration is disabled by default for public repositories
You can enable these sources in your CodeRabbit configuration.
📒 Files selected for processing (9)
.changeset/grumpy-bags-bow.md(1 hunks).changeset/mighty-lions-cut.md(1 hunks)packages/clerk-js/src/ui/components/OrganizationProfile/OrganizationProfileRoutes.tsx(2 hunks)packages/clerk-js/src/ui/components/UserProfile/UserProfileRoutes.tsx(2 hunks)packages/clerk-js/src/ui/contexts/components/OrganizationProfile.ts(4 hunks)packages/clerk-js/src/ui/contexts/components/UserProfile.ts(4 hunks)packages/clerk-js/src/ui/utils/createCustomPages.tsx(4 hunks)packages/shared/src/react/hooks/createCommerceHook.tsx(3 hunks)packages/shared/src/react/hooks/useSubscription.tsx(2 hunks)
🧰 Additional context used
📓 Path-based instructions (10)
.changeset/**
📄 CodeRabbit inference engine (.cursor/rules/monorepo.mdc)
Automated releases must use Changesets.
Files:
.changeset/grumpy-bags-bow.md.changeset/mighty-lions-cut.md
packages/clerk-js/src/ui/**/*.{ts,tsx}
📄 CodeRabbit inference engine (.cursor/rules/clerk-js-ui.mdc)
packages/clerk-js/src/ui/**/*.{ts,tsx}: Element descriptors should always be camelCase
Use element descriptors in UI components to enable consistent theming and styling via appearance.elements
Element descriptors should generate unique, stable CSS classes for theming
Element descriptors should handle state classes (e.g., cl-loading, cl-active, cl-error, cl-open) automatically based on component state
Do not render hard-coded values; all user-facing strings must be localized using provided localization methods
Use the useLocalizations hook and localizationKeys utility for all text and error messages
Use the styled system (sx prop, theme tokens, responsive values) for custom component styling
Use useCardState for card-level state, useFormState for form-level state, and useLoadingStatus for loading states
Always use handleError utility for API errors and use translateError for localized error messages
Use useFormControl for form field state, implement proper validation, and handle loading and error states in forms
Use localization keys for all form labels and placeholders
Use element descriptors for consistent styling and follow the theme token system
Use the Card and FormContainer patterns for consistent UI structure
Files:
packages/clerk-js/src/ui/components/UserProfile/UserProfileRoutes.tsxpackages/clerk-js/src/ui/utils/createCustomPages.tsxpackages/clerk-js/src/ui/components/OrganizationProfile/OrganizationProfileRoutes.tsxpackages/clerk-js/src/ui/contexts/components/OrganizationProfile.tspackages/clerk-js/src/ui/contexts/components/UserProfile.ts
**/*.{js,jsx,ts,tsx}
📄 CodeRabbit inference engine (.cursor/rules/development.mdc)
**/*.{js,jsx,ts,tsx}: All code must pass ESLint checks with the project's configuration
Follow established naming conventions (PascalCase for components, camelCase for variables)
Maintain comprehensive JSDoc comments for public APIs
Use dynamic imports for optional features
All public APIs must be documented with JSDoc
Provide meaningful error messages to developers
Include error recovery suggestions where applicable
Log errors appropriately for debugging
Lazy load components and features when possible
Implement proper caching strategies
Use efficient data structures and algorithms
Profile and optimize critical paths
Validate all inputs and sanitize outputs
Implement proper logging with different levels
Files:
packages/clerk-js/src/ui/components/UserProfile/UserProfileRoutes.tsxpackages/shared/src/react/hooks/createCommerceHook.tsxpackages/shared/src/react/hooks/useSubscription.tsxpackages/clerk-js/src/ui/utils/createCustomPages.tsxpackages/clerk-js/src/ui/components/OrganizationProfile/OrganizationProfileRoutes.tsxpackages/clerk-js/src/ui/contexts/components/OrganizationProfile.tspackages/clerk-js/src/ui/contexts/components/UserProfile.ts
**/*.{js,jsx,ts,tsx,json,css,scss,md,yaml,yml}
📄 CodeRabbit inference engine (.cursor/rules/development.mdc)
Use Prettier for consistent code formatting
Files:
packages/clerk-js/src/ui/components/UserProfile/UserProfileRoutes.tsxpackages/shared/src/react/hooks/createCommerceHook.tsxpackages/shared/src/react/hooks/useSubscription.tsxpackages/clerk-js/src/ui/utils/createCustomPages.tsxpackages/clerk-js/src/ui/components/OrganizationProfile/OrganizationProfileRoutes.tsxpackages/clerk-js/src/ui/contexts/components/OrganizationProfile.tspackages/clerk-js/src/ui/contexts/components/UserProfile.ts
packages/**/*.{ts,tsx}
📄 CodeRabbit inference engine (.cursor/rules/development.mdc)
TypeScript is required for all packages
Files:
packages/clerk-js/src/ui/components/UserProfile/UserProfileRoutes.tsxpackages/shared/src/react/hooks/createCommerceHook.tsxpackages/shared/src/react/hooks/useSubscription.tsxpackages/clerk-js/src/ui/utils/createCustomPages.tsxpackages/clerk-js/src/ui/components/OrganizationProfile/OrganizationProfileRoutes.tsxpackages/clerk-js/src/ui/contexts/components/OrganizationProfile.tspackages/clerk-js/src/ui/contexts/components/UserProfile.ts
packages/**/*.{ts,tsx,d.ts}
📄 CodeRabbit inference engine (.cursor/rules/development.mdc)
Packages should export TypeScript types alongside runtime code
Files:
packages/clerk-js/src/ui/components/UserProfile/UserProfileRoutes.tsxpackages/shared/src/react/hooks/createCommerceHook.tsxpackages/shared/src/react/hooks/useSubscription.tsxpackages/clerk-js/src/ui/utils/createCustomPages.tsxpackages/clerk-js/src/ui/components/OrganizationProfile/OrganizationProfileRoutes.tsxpackages/clerk-js/src/ui/contexts/components/OrganizationProfile.tspackages/clerk-js/src/ui/contexts/components/UserProfile.ts
**/*.{ts,tsx}
📄 CodeRabbit inference engine (.cursor/rules/development.mdc)
Use proper TypeScript error types
**/*.{ts,tsx}: Always define explicit return types for functions, especially public APIs
Use proper type annotations for variables and parameters where inference isn't clear
Avoidanytype - preferunknownwhen type is uncertain, then narrow with type guards
Useinterfacefor object shapes that might be extended
Usetypefor unions, primitives, and computed types
Preferreadonlyproperties for immutable data structures
Useprivatefor internal implementation details
Useprotectedfor inheritance hierarchies
Usepublicexplicitly for clarity in public APIs
Preferreadonlyfor properties that shouldn't change after construction
Prefer composition and interfaces over deep inheritance chains
Use mixins for shared behavior across unrelated classes
Implement dependency injection for loose coupling
Let TypeScript infer when types are obvious
Useconst assertionsfor literal types:as const
Usesatisfiesoperator for type checking without widening
Use mapped types for transforming object types
Use conditional types for type-level logic
Leverage template literal types for string manipulation
Use ES6 imports/exports consistently
Use default exports sparingly, prefer named exports
Use type-only imports:import type { ... } from ...
Noanytypes without justification
Proper error handling with typed errors
Consistent use ofreadonlyfor immutable data
Proper generic constraints
No unused type parameters
Proper use of utility types instead of manual type construction
Type-only imports where possible
Proper tree-shaking friendly exports
No circular dependencies
Efficient type computations (avoid deep recursion)
Files:
packages/clerk-js/src/ui/components/UserProfile/UserProfileRoutes.tsxpackages/shared/src/react/hooks/createCommerceHook.tsxpackages/shared/src/react/hooks/useSubscription.tsxpackages/clerk-js/src/ui/utils/createCustomPages.tsxpackages/clerk-js/src/ui/components/OrganizationProfile/OrganizationProfileRoutes.tsxpackages/clerk-js/src/ui/contexts/components/OrganizationProfile.tspackages/clerk-js/src/ui/contexts/components/UserProfile.ts
**/*.{jsx,tsx}
📄 CodeRabbit inference engine (.cursor/rules/development.mdc)
**/*.{jsx,tsx}: Use error boundaries in React components
Minimize re-renders in React components
**/*.{jsx,tsx}: Always use functional components with hooks instead of class components
Follow PascalCase naming for components:UserProfile,NavigationMenu
Keep components focused on a single responsibility - split large components
Limit component size to 150-200 lines; extract logic into custom hooks
Use composition over inheritance - prefer smaller, composable components
Export components as named exports for better tree-shaking
One component per file with matching filename and component name
Use useState for simple state management
Use useReducer for complex state logic
Implement proper state initialization
Use proper state updates with callbacks
Implement proper state cleanup
Use Context API for theme/authentication
Implement proper state selectors
Use proper state normalization
Implement proper state persistence
Use React.memo for expensive components
Implement proper useCallback for handlers
Use proper useMemo for expensive computations
Implement proper virtualization for lists
Use proper code splitting with React.lazy
Implement proper cleanup in useEffect
Use proper refs for DOM access
Implement proper event listener cleanup
Use proper abort controllers for fetch
Implement proper subscription cleanup
Use proper HTML elements
Implement proper ARIA attributes
Use proper heading hierarchy
Implement proper form labels
Use proper button types
Implement proper focus management
Use proper keyboard shortcuts
Implement proper tab order
Use proper skip links
Implement proper focus traps
Implement proper error boundaries
Use proper error logging
Implement proper error recovery
Use proper error messages
Implement proper error fallbacks
Use proper form validation
Implement proper error states
Use proper error messages
Implement proper form submission
Use proper form reset
Use proper component naming
Implement proper file naming
Use proper prop naming
Implement proper...
Files:
packages/clerk-js/src/ui/components/UserProfile/UserProfileRoutes.tsxpackages/shared/src/react/hooks/createCommerceHook.tsxpackages/shared/src/react/hooks/useSubscription.tsxpackages/clerk-js/src/ui/utils/createCustomPages.tsxpackages/clerk-js/src/ui/components/OrganizationProfile/OrganizationProfileRoutes.tsx
**/*.{js,ts,tsx,jsx}
📄 CodeRabbit inference engine (.cursor/rules/monorepo.mdc)
Support multiple Clerk environment variables (CLERK_, NEXT_PUBLIC_CLERK_, etc.) for configuration.
Files:
packages/clerk-js/src/ui/components/UserProfile/UserProfileRoutes.tsxpackages/shared/src/react/hooks/createCommerceHook.tsxpackages/shared/src/react/hooks/useSubscription.tsxpackages/clerk-js/src/ui/utils/createCustomPages.tsxpackages/clerk-js/src/ui/components/OrganizationProfile/OrganizationProfileRoutes.tsxpackages/clerk-js/src/ui/contexts/components/OrganizationProfile.tspackages/clerk-js/src/ui/contexts/components/UserProfile.ts
**/*.tsx
📄 CodeRabbit inference engine (.cursor/rules/react.mdc)
**/*.tsx: Use proper type definitions for props and state
Leverage TypeScript's type inference where possible
Use proper event types for handlers
Implement proper generic types for reusable components
Use proper type guards for conditional rendering
Files:
packages/clerk-js/src/ui/components/UserProfile/UserProfileRoutes.tsxpackages/shared/src/react/hooks/createCommerceHook.tsxpackages/shared/src/react/hooks/useSubscription.tsxpackages/clerk-js/src/ui/utils/createCustomPages.tsxpackages/clerk-js/src/ui/components/OrganizationProfile/OrganizationProfileRoutes.tsx
🧬 Code graph analysis (3)
packages/shared/src/react/hooks/createCommerceHook.tsx (1)
packages/types/src/environment.ts (1)
EnvironmentResource(10-24)
packages/shared/src/react/hooks/useSubscription.tsx (1)
packages/types/src/environment.ts (1)
EnvironmentResource(10-24)
packages/clerk-js/src/ui/utils/createCustomPages.tsx (3)
packages/types/src/clerk.ts (1)
LoadedClerk(2195-2197)packages/types/src/environment.ts (1)
EnvironmentResource(10-24)packages/clerk-js/src/utils/componentGuards.ts (2)
disabledOrganizationBillingFeature(29-31)disabledUserBillingFeature(25-27)
🪛 LanguageTool
.changeset/mighty-lions-cut.md
[grammar] ~4-~4: There might be a mistake here.
Context: --- '@clerk/clerk-js': patch --- Hide billing tab when no paid plans exist, t...
(QB_NEW_EN)
[grammar] ~5-~5: There might be a mistake here.
Context: ...not have a current or past subscription.
(QB_NEW_EN)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (6)
- GitHub Check: Formatting | Dedupe | Changeset
- GitHub Check: Build Packages
- GitHub Check: semgrep/ci
- GitHub Check: Analyze (javascript-typescript)
- GitHub Check: semgrep-cloud-platform/scan
- GitHub Check: semgrep-cloud-platform/scan
🔇 Additional comments (8)
.changeset/mighty-lions-cut.md (1)
1-3: LGTM on package + bump block.Valid changeset header for @clerk/clerk-js patch.
.changeset/grumpy-bags-bow.md (1)
1-3: LGTM on package + bump block.packages/shared/src/react/hooks/createCommerceHook.tsx (1)
86-96: Guard against undefined fetcher when disabled.If
useFetcher(_for)can returnundefined, ensureenabled: falsewhenever!fetchFn.We likely get this “for free” via
isEnabled, but please confirmuseFetchernever returnsundefinedfor supported scopes. If it can, wrapconst isEnabled = isEnabled && !!fetchFn.packages/clerk-js/src/ui/contexts/components/OrganizationProfile.ts (1)
28-29: API surface extension looks good.Exposing
shouldShowBillingin the context type is clear and consistent with route gating.packages/clerk-js/src/ui/components/OrganizationProfile/OrganizationProfileRoutes.tsx (1)
41-43: Context usage update is correct.Destructuring
shouldShowBillingfrom the context aligns with the new gating.packages/clerk-js/src/ui/utils/createCustomPages.tsx (2)
57-74: Public wrapper signature changed; confirm non-breaking or document migration.Adding
shouldShowBillingtocreateUserProfileCustomPages/createOrganizationProfileCustomPagesis a public API change. Ensure these are internal-only or update JSDoc, changelog, and release notes; consider an overload/default to preserve compatibility if used externally.Also applies to: 76-94
103-108: Commerce gating composition looks correct.Combining environment feature flags with
shouldShowBillingis the right behavior.packages/clerk-js/src/ui/contexts/components/UserProfile.ts (1)
25-26: API surface extension looks good.Adding
shouldShowBillingto the user context is consistent with the routes/utilities.
| // @ts-expect-error `__unstable__environment` is not typed | ||
| const environment = clerk.__unstable__environment as unknown as EnvironmentResource | null | undefined; | ||
| const user = useUserContext(); |
There was a problem hiding this comment.
Gating bug: using user billing flag for org flows; also not requiring organization.id.
isEnabled should depend on the correct environment flag for the _for scope and ensure an org is selected for organization flows.
- const environment = clerk.__unstable__environment as unknown as EnvironmentResource | null | undefined;
+ const environment = clerk.__unstable__environment as unknown as EnvironmentResource | null | undefined;
@@
- const isEnabled = !!hookParams && isClerkLoaded && environment?.commerceSettings.billing.user.enabled;
+ const billingEnabled =
+ _for === 'organization'
+ ? environment?.commerceSettings.billing.organization.enabled
+ : environment?.commerceSettings.billing.user.enabled;
+ const hasScope = _for === 'organization' ? !!organization?.id : true;
+ const isEnabled = !!hookParams && isClerkLoaded && hasScope && !!billingEnabled;Also applies to: 88-89
🤖 Prompt for AI Agents
In packages/shared/src/react/hooks/createCommerceHook.tsx around lines 70-72
(also apply same change to lines 88-89), the isEnabled gating incorrectly reads
the user billing flag and doesn't require organization.id for
organization-scoped flows; update logic to read the environment flag that
matches the requested scope (i.e., use the _for scope flag from
clerk.__unstable__environment instead of the user billing flag) and add a guard
that for organization-scoped flows returns disabled unless organization &&
organization.id are present; ensure the same corrected check is applied at the
other referenced lines (88-89).
| // @ts-expect-error `__unstable__environment` is not typed | ||
| const environment = clerk.__unstable__environment as unknown as EnvironmentResource | null | undefined; | ||
|
|
There was a problem hiding this comment.
Gating bug: org scope uses user flag and doesn’t require orgId before fetching.
When params?.for === 'organization', the hook should:
- check
environment.commerceSettings.billing.organization.enabled(not.user.enabled) - require
organization?.idbefore enabling the fetch
Otherwise we may fetch with an undefined orgId or disable org billing when user billing is off.
Apply this patch to gate correctly and avoid undefined orgId fetches:
const { organization } = useOrganizationContext();
- // @ts-expect-error `__unstable__environment` is not typed
- const environment = clerk.__unstable__environment as unknown as EnvironmentResource | null | undefined;
+ // @ts-expect-error `__unstable__environment` is not typed
+ const environment = clerk.__unstable__environment as unknown as EnvironmentResource | null | undefined;
+ const scope = (params?.for ?? 'user') as ForPayerType;
+ const billingEnabled =
+ scope === 'organization'
+ ? environment?.commerceSettings.billing.organization.enabled
+ : environment?.commerceSettings.billing.user.enabled;
+ const hasScope = scope === 'organization' ? !!organization?.id : !!user?.id;
clerk.telemetry?.record(eventMethodCalled(hookName));
const swr = useSWR(
- user?.id && environment?.commerceSettings.billing.user.enabled
+ hasScope && !!billingEnabled
? {
type: 'commerce-subscription',
- userId: user.id,
- args: { orgId: params?.for === 'organization' ? organization?.id : undefined },
+ userId: user!.id,
+ args: { orgId: scope === 'organization' ? organization!.id : undefined },
}
: null,Also applies to: 45-52
🤖 Prompt for AI Agents
packages/shared/src/react/hooks/useSubscription.tsx lines 39-41 (and similarly
45-52): when params?.for === 'organization' the hook currently reads the wrong
feature flag and may run without an orgId; change the gating to read
environment.commerceSettings.billing.organization.enabled (not .user.enabled)
and only enable the fetch when params?.for !== 'organization' ?
environment.commerceSettings.billing.user.enabled :
environment.commerceSettings.billing.organization.enabled AND when params?.for
=== 'organization' ensure organization?.id is present (i.e. treat missing
organization.id as disabled) so the fetch never runs with an undefined orgId;
apply the same fix to the later block at lines 45-52 so both checks consistently
use the organization flag and require organization?.id.
💡 Verification agent
🧩 Analysis chain
Consistency check across codebase.
Ensure other billing hooks/routes gate by the correct scope (user vs org).
Also applies to: 45-52
🏁 Script executed:
#!/bin/bash
# Verify scope-correct gating across the repo
rg -n --hidden -g '!node_modules' -C2 \
-e 'commerceSettings\.billing\.(user|organization)\.enabled' \
-e 'shouldShowBilling' \
-e '__unstable__environment'Length of output: 30723
Include organization billing gating in useSubscription
In useSubscription.tsx (lines 45–52), add a check for environment.commerceSettings.billing.organization.enabled when organization?.id is used—currently only environment.commerceSettings.billing.user.enabled is applied.
🤖 Prompt for AI Agents
In packages/shared/src/react/hooks/useSubscription.tsx around lines 39 to 52,
the subscription gating only checks
environment.commerceSettings.billing.user.enabled; update the condition that
gates organization-scoped subscriptions so that when organization?.id is present
it also requires environment.commerceSettings.billing.organization.enabled to be
true (in addition to any existing user.enabled check). Use optional chaining and
null checks on environment and commerceSettings to avoid runtime errors, and
ensure the combined boolean logic only allows org-scoped behavior when
organization.id exists AND organization billing is enabled.
|
!snapshot |
There was a problem hiding this comment.
Actionable comments posted: 0
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (2)
packages/clerk-js/src/ui/components/Checkout/__tests__/Checkout.test.tsx (1)
26-33: Two tests miss f.withBilling() and will throw on fixtures.clerk.billing usageAdd f.withBilling() in:
- “renders drawer structure and localization correctly”
- “renders without errors for annual period”
Apply:
it('renders drawer structure and localization correctly', async () => { const { wrapper, fixtures } = await createFixtures(f => { f.withUser({ email_addresses: ['test@clerk.com'] }); + f.withBilling(); }); // ... }); it('renders without errors for annual period', async () => { const { wrapper, fixtures } = await createFixtures(f => { f.withUser({ email_addresses: ['test@clerk.com'] }); + f.withBilling(); }); // ... });packages/clerk-js/src/ui/components/PricingTable/__tests__/PricingTable.test.tsx (1)
284-291: Missing f.withBilling() in “shows no plans when user is signed in but has no subscription”This test mocks fixtures.clerk.billing.* without initializing billing.
Apply:
const { wrapper, fixtures, props } = await createFixtures(f => { f.withUser({ email_addresses: ['test@clerk.com'] }); + f.withBilling(); });
🧹 Nitpick comments (8)
packages/clerk-js/src/ui/utils/test/fixtures.ts (1)
211-230: Tighten typing with satisfies + const assertionUse satisfies to catch property typos at compile-time and keep literal types narrow.
Apply:
-const createBaseCommerceSettings = (): CommerceSettingsJSON => { - return { - object: 'commerce_settings', - id: 'commerce_settings_1', - billing: { - enabled: false, - user: { - enabled: false, - has_paid_plans: false, - }, - organization: { - enabled: false, - has_paid_plans: false, - }, - has_paid_org_plans: false, - has_paid_user_plans: false, - stripe_publishable_key: '', - }, - }; -}; +const createBaseCommerceSettings = (): CommerceSettingsJSON => { + const commerce = { + object: 'commerce_settings', + id: 'commerce_settings_1', + billing: { + enabled: false, + user: { enabled: false, has_paid_plans: false }, + organization: { enabled: false, has_paid_plans: false }, + has_paid_org_plans: false, + has_paid_user_plans: false, + stripe_publishable_key: '', + }, + } as const satisfies CommerceSettingsJSON; + return commerce; +};packages/clerk-js/src/ui/components/SubscriptionDetails/__tests__/SubscriptionDetails.test.tsx (1)
1022-1024: Fix misleading test commentThe assertion checks the menu button is NOT rendered, but the comment says “present but disabled.” Align the comment.
Apply:
- // Menu button should be present but disabled + // Menu button should not be rendered when past due actions are disabledpackages/clerk-js/src/ui/components/Checkout/__tests__/Checkout.test.tsx (1)
137-139: Avoid unresolved promises leaking between testsUsing new Promise(() => {}) can leave dangling async work. Prefer a controllable deferred or mockResolvedValue once the spinner is asserted.
Example:
-fixtures.clerk.billing.startCheckout.mockImplementation(() => new Promise(() => {})); +fixtures.clerk.billing.startCheckout.mockResolvedValue({ status: 'initializing' } as any);packages/clerk-js/src/ui/components/Subscriptions/__tests__/SubscriptionsList.test.tsx (1)
212-212: Fix test title typo: “upcomming” → “upcoming”Keeps test output clean and searchable.
Apply:
-it('renders upcomming badge when current subscription is canceled but active', async () => { +it('renders upcoming badge when current subscription is canceled but active', async () => {packages/clerk-js/src/ui/components/UserProfile/__tests__/UserProfile.test.tsx (3)
58-67: Stabilize the absence assertion by first awaiting a known anchor.Ensure the UI is fully rendered before asserting absence to avoid false positives in slow renders.
Apply:
- render(<UserProfile />, { wrapper }); - await waitFor(() => expect(screen.queryByRole('button', { name: /Billing/i })).toBeNull()); + render(<UserProfile />, { wrapper }); + // Anchor to confirm page is mounted + await screen.findAllByRole('button', { name: /Profile/i }); + await waitFor(() => expect(screen.queryByRole('button', { name: /Billing/i })).toBeNull());
121-134: Stabilize the absence assertion similarly to the first negative test.Apply:
- render(<UserProfile />, { wrapper }); - await waitFor(() => expect(screen.queryByRole('button', { name: /Billing/i })).toBeNull()); + render(<UserProfile />, { wrapper }); + await screen.findAllByRole('button', { name: /Profile/i }); + await waitFor(() => expect(screen.queryByRole('button', { name: /Billing/i })).toBeNull());
58-134: Consider using the new withBilling() fixture helper to reduce per-test boilerplate.You can call f.withBilling() in createFixtures and then override only the flags relevant to each scenario. Keeps tests shorter and intent clearer.
packages/clerk-js/src/ui/utils/test/fixtureHelpers.ts (1)
353-366: Add granular helpers beyond withBilling() for common scenarios.Most tests toggle a subset of flags; dedicated helpers reduce repetition and risk of inconsistent states.
Proposed additions:
const createBillingSettingsFixtureHelpers = (environment: EnvironmentJSON) => { const os = environment.commerce_settings.billing; const withBilling = () => { os.enabled = true; os.user.enabled = true; os.user.has_paid_plans = true; os.organization.enabled = true; os.organization.has_paid_plans = true; os.has_paid_org_plans = true; os.has_paid_user_plans = true; }; - return { withBilling }; + const disableUserBilling = () => { + os.user.enabled = false; + }; + const enableUserBilling = () => { + os.enabled = true; + os.user.enabled = true; + }; + const setUserHasPaidPlans = (v: boolean) => { + os.user.has_paid_plans = v; + }; + const setOrgHasPaidPlans = (v: boolean) => { + os.organization.has_paid_plans = v; + }; + + return { withBilling, disableUserBilling, enableUserBilling, setUserHasPaidPlans, setOrgHasPaidPlans }; };
📜 Review details
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
💡 Knowledge Base configuration:
- MCP integration is disabled by default for public repositories
- Jira integration is disabled by default for public repositories
- Linear integration is disabled by default for public repositories
You can enable these sources in your CodeRabbit configuration.
📒 Files selected for processing (7)
packages/clerk-js/src/ui/components/Checkout/__tests__/Checkout.test.tsx(10 hunks)packages/clerk-js/src/ui/components/PricingTable/__tests__/PricingTable.test.tsx(10 hunks)packages/clerk-js/src/ui/components/SubscriptionDetails/__tests__/SubscriptionDetails.test.tsx(12 hunks)packages/clerk-js/src/ui/components/Subscriptions/__tests__/SubscriptionsList.test.tsx(4 hunks)packages/clerk-js/src/ui/components/UserProfile/__tests__/UserProfile.test.tsx(2 hunks)packages/clerk-js/src/ui/utils/test/fixtureHelpers.ts(2 hunks)packages/clerk-js/src/ui/utils/test/fixtures.ts(3 hunks)
🧰 Additional context used
📓 Path-based instructions (13)
packages/clerk-js/src/ui/**/*.{ts,tsx}
📄 CodeRabbit inference engine (.cursor/rules/clerk-js-ui.mdc)
packages/clerk-js/src/ui/**/*.{ts,tsx}: Element descriptors should always be camelCase
Use element descriptors in UI components to enable consistent theming and styling via appearance.elements
Element descriptors should generate unique, stable CSS classes for theming
Element descriptors should handle state classes (e.g., cl-loading, cl-active, cl-error, cl-open) automatically based on component state
Do not render hard-coded values; all user-facing strings must be localized using provided localization methods
Use the useLocalizations hook and localizationKeys utility for all text and error messages
Use the styled system (sx prop, theme tokens, responsive values) for custom component styling
Use useCardState for card-level state, useFormState for form-level state, and useLoadingStatus for loading states
Always use handleError utility for API errors and use translateError for localized error messages
Use useFormControl for form field state, implement proper validation, and handle loading and error states in forms
Use localization keys for all form labels and placeholders
Use element descriptors for consistent styling and follow the theme token system
Use the Card and FormContainer patterns for consistent UI structure
Files:
packages/clerk-js/src/ui/components/Subscriptions/__tests__/SubscriptionsList.test.tsxpackages/clerk-js/src/ui/components/Checkout/__tests__/Checkout.test.tsxpackages/clerk-js/src/ui/components/UserProfile/__tests__/UserProfile.test.tsxpackages/clerk-js/src/ui/components/PricingTable/__tests__/PricingTable.test.tsxpackages/clerk-js/src/ui/components/SubscriptionDetails/__tests__/SubscriptionDetails.test.tsxpackages/clerk-js/src/ui/utils/test/fixtures.tspackages/clerk-js/src/ui/utils/test/fixtureHelpers.ts
**/*.{js,jsx,ts,tsx}
📄 CodeRabbit inference engine (.cursor/rules/development.mdc)
**/*.{js,jsx,ts,tsx}: All code must pass ESLint checks with the project's configuration
Follow established naming conventions (PascalCase for components, camelCase for variables)
Maintain comprehensive JSDoc comments for public APIs
Use dynamic imports for optional features
All public APIs must be documented with JSDoc
Provide meaningful error messages to developers
Include error recovery suggestions where applicable
Log errors appropriately for debugging
Lazy load components and features when possible
Implement proper caching strategies
Use efficient data structures and algorithms
Profile and optimize critical paths
Validate all inputs and sanitize outputs
Implement proper logging with different levels
Files:
packages/clerk-js/src/ui/components/Subscriptions/__tests__/SubscriptionsList.test.tsxpackages/clerk-js/src/ui/components/Checkout/__tests__/Checkout.test.tsxpackages/clerk-js/src/ui/components/UserProfile/__tests__/UserProfile.test.tsxpackages/clerk-js/src/ui/components/PricingTable/__tests__/PricingTable.test.tsxpackages/clerk-js/src/ui/components/SubscriptionDetails/__tests__/SubscriptionDetails.test.tsxpackages/clerk-js/src/ui/utils/test/fixtures.tspackages/clerk-js/src/ui/utils/test/fixtureHelpers.ts
**/*.{js,jsx,ts,tsx,json,css,scss,md,yaml,yml}
📄 CodeRabbit inference engine (.cursor/rules/development.mdc)
Use Prettier for consistent code formatting
Files:
packages/clerk-js/src/ui/components/Subscriptions/__tests__/SubscriptionsList.test.tsxpackages/clerk-js/src/ui/components/Checkout/__tests__/Checkout.test.tsxpackages/clerk-js/src/ui/components/UserProfile/__tests__/UserProfile.test.tsxpackages/clerk-js/src/ui/components/PricingTable/__tests__/PricingTable.test.tsxpackages/clerk-js/src/ui/components/SubscriptionDetails/__tests__/SubscriptionDetails.test.tsxpackages/clerk-js/src/ui/utils/test/fixtures.tspackages/clerk-js/src/ui/utils/test/fixtureHelpers.ts
packages/**/*.{ts,tsx}
📄 CodeRabbit inference engine (.cursor/rules/development.mdc)
TypeScript is required for all packages
Files:
packages/clerk-js/src/ui/components/Subscriptions/__tests__/SubscriptionsList.test.tsxpackages/clerk-js/src/ui/components/Checkout/__tests__/Checkout.test.tsxpackages/clerk-js/src/ui/components/UserProfile/__tests__/UserProfile.test.tsxpackages/clerk-js/src/ui/components/PricingTable/__tests__/PricingTable.test.tsxpackages/clerk-js/src/ui/components/SubscriptionDetails/__tests__/SubscriptionDetails.test.tsxpackages/clerk-js/src/ui/utils/test/fixtures.tspackages/clerk-js/src/ui/utils/test/fixtureHelpers.ts
packages/**/*.{ts,tsx,d.ts}
📄 CodeRabbit inference engine (.cursor/rules/development.mdc)
Packages should export TypeScript types alongside runtime code
Files:
packages/clerk-js/src/ui/components/Subscriptions/__tests__/SubscriptionsList.test.tsxpackages/clerk-js/src/ui/components/Checkout/__tests__/Checkout.test.tsxpackages/clerk-js/src/ui/components/UserProfile/__tests__/UserProfile.test.tsxpackages/clerk-js/src/ui/components/PricingTable/__tests__/PricingTable.test.tsxpackages/clerk-js/src/ui/components/SubscriptionDetails/__tests__/SubscriptionDetails.test.tsxpackages/clerk-js/src/ui/utils/test/fixtures.tspackages/clerk-js/src/ui/utils/test/fixtureHelpers.ts
**/*.{ts,tsx}
📄 CodeRabbit inference engine (.cursor/rules/development.mdc)
Use proper TypeScript error types
**/*.{ts,tsx}: Always define explicit return types for functions, especially public APIs
Use proper type annotations for variables and parameters where inference isn't clear
Avoidanytype - preferunknownwhen type is uncertain, then narrow with type guards
Useinterfacefor object shapes that might be extended
Usetypefor unions, primitives, and computed types
Preferreadonlyproperties for immutable data structures
Useprivatefor internal implementation details
Useprotectedfor inheritance hierarchies
Usepublicexplicitly for clarity in public APIs
Preferreadonlyfor properties that shouldn't change after construction
Prefer composition and interfaces over deep inheritance chains
Use mixins for shared behavior across unrelated classes
Implement dependency injection for loose coupling
Let TypeScript infer when types are obvious
Useconst assertionsfor literal types:as const
Usesatisfiesoperator for type checking without widening
Use mapped types for transforming object types
Use conditional types for type-level logic
Leverage template literal types for string manipulation
Use ES6 imports/exports consistently
Use default exports sparingly, prefer named exports
Use type-only imports:import type { ... } from ...
Noanytypes without justification
Proper error handling with typed errors
Consistent use ofreadonlyfor immutable data
Proper generic constraints
No unused type parameters
Proper use of utility types instead of manual type construction
Type-only imports where possible
Proper tree-shaking friendly exports
No circular dependencies
Efficient type computations (avoid deep recursion)
Files:
packages/clerk-js/src/ui/components/Subscriptions/__tests__/SubscriptionsList.test.tsxpackages/clerk-js/src/ui/components/Checkout/__tests__/Checkout.test.tsxpackages/clerk-js/src/ui/components/UserProfile/__tests__/UserProfile.test.tsxpackages/clerk-js/src/ui/components/PricingTable/__tests__/PricingTable.test.tsxpackages/clerk-js/src/ui/components/SubscriptionDetails/__tests__/SubscriptionDetails.test.tsxpackages/clerk-js/src/ui/utils/test/fixtures.tspackages/clerk-js/src/ui/utils/test/fixtureHelpers.ts
**/*.{jsx,tsx}
📄 CodeRabbit inference engine (.cursor/rules/development.mdc)
**/*.{jsx,tsx}: Use error boundaries in React components
Minimize re-renders in React components
**/*.{jsx,tsx}: Always use functional components with hooks instead of class components
Follow PascalCase naming for components:UserProfile,NavigationMenu
Keep components focused on a single responsibility - split large components
Limit component size to 150-200 lines; extract logic into custom hooks
Use composition over inheritance - prefer smaller, composable components
Export components as named exports for better tree-shaking
One component per file with matching filename and component name
Use useState for simple state management
Use useReducer for complex state logic
Implement proper state initialization
Use proper state updates with callbacks
Implement proper state cleanup
Use Context API for theme/authentication
Implement proper state selectors
Use proper state normalization
Implement proper state persistence
Use React.memo for expensive components
Implement proper useCallback for handlers
Use proper useMemo for expensive computations
Implement proper virtualization for lists
Use proper code splitting with React.lazy
Implement proper cleanup in useEffect
Use proper refs for DOM access
Implement proper event listener cleanup
Use proper abort controllers for fetch
Implement proper subscription cleanup
Use proper HTML elements
Implement proper ARIA attributes
Use proper heading hierarchy
Implement proper form labels
Use proper button types
Implement proper focus management
Use proper keyboard shortcuts
Implement proper tab order
Use proper skip links
Implement proper focus traps
Implement proper error boundaries
Use proper error logging
Implement proper error recovery
Use proper error messages
Implement proper error fallbacks
Use proper form validation
Implement proper error states
Use proper error messages
Implement proper form submission
Use proper form reset
Use proper component naming
Implement proper file naming
Use proper prop naming
Implement proper...
Files:
packages/clerk-js/src/ui/components/Subscriptions/__tests__/SubscriptionsList.test.tsxpackages/clerk-js/src/ui/components/Checkout/__tests__/Checkout.test.tsxpackages/clerk-js/src/ui/components/UserProfile/__tests__/UserProfile.test.tsxpackages/clerk-js/src/ui/components/PricingTable/__tests__/PricingTable.test.tsxpackages/clerk-js/src/ui/components/SubscriptionDetails/__tests__/SubscriptionDetails.test.tsx
packages/**/*.{test,spec}.{js,jsx,ts,tsx}
📄 CodeRabbit inference engine (.cursor/rules/monorepo.mdc)
Unit tests should use Jest or Vitest as the test runner.
Files:
packages/clerk-js/src/ui/components/Subscriptions/__tests__/SubscriptionsList.test.tsxpackages/clerk-js/src/ui/components/Checkout/__tests__/Checkout.test.tsxpackages/clerk-js/src/ui/components/UserProfile/__tests__/UserProfile.test.tsxpackages/clerk-js/src/ui/components/PricingTable/__tests__/PricingTable.test.tsxpackages/clerk-js/src/ui/components/SubscriptionDetails/__tests__/SubscriptionDetails.test.tsx
packages/{clerk-js,elements,themes}/**/*.{test,spec}.{js,jsx,ts,tsx}
📄 CodeRabbit inference engine (.cursor/rules/monorepo.mdc)
Visual regression testing should be performed for UI components.
Files:
packages/clerk-js/src/ui/components/Subscriptions/__tests__/SubscriptionsList.test.tsxpackages/clerk-js/src/ui/components/Checkout/__tests__/Checkout.test.tsxpackages/clerk-js/src/ui/components/UserProfile/__tests__/UserProfile.test.tsxpackages/clerk-js/src/ui/components/PricingTable/__tests__/PricingTable.test.tsxpackages/clerk-js/src/ui/components/SubscriptionDetails/__tests__/SubscriptionDetails.test.tsx
**/*.{js,ts,tsx,jsx}
📄 CodeRabbit inference engine (.cursor/rules/monorepo.mdc)
Support multiple Clerk environment variables (CLERK_, NEXT_PUBLIC_CLERK_, etc.) for configuration.
Files:
packages/clerk-js/src/ui/components/Subscriptions/__tests__/SubscriptionsList.test.tsxpackages/clerk-js/src/ui/components/Checkout/__tests__/Checkout.test.tsxpackages/clerk-js/src/ui/components/UserProfile/__tests__/UserProfile.test.tsxpackages/clerk-js/src/ui/components/PricingTable/__tests__/PricingTable.test.tsxpackages/clerk-js/src/ui/components/SubscriptionDetails/__tests__/SubscriptionDetails.test.tsxpackages/clerk-js/src/ui/utils/test/fixtures.tspackages/clerk-js/src/ui/utils/test/fixtureHelpers.ts
**/*.tsx
📄 CodeRabbit inference engine (.cursor/rules/react.mdc)
**/*.tsx: Use proper type definitions for props and state
Leverage TypeScript's type inference where possible
Use proper event types for handlers
Implement proper generic types for reusable components
Use proper type guards for conditional rendering
Files:
packages/clerk-js/src/ui/components/Subscriptions/__tests__/SubscriptionsList.test.tsxpackages/clerk-js/src/ui/components/Checkout/__tests__/Checkout.test.tsxpackages/clerk-js/src/ui/components/UserProfile/__tests__/UserProfile.test.tsxpackages/clerk-js/src/ui/components/PricingTable/__tests__/PricingTable.test.tsxpackages/clerk-js/src/ui/components/SubscriptionDetails/__tests__/SubscriptionDetails.test.tsx
**/*.test.{jsx,tsx}
📄 CodeRabbit inference engine (.cursor/rules/react.mdc)
**/*.test.{jsx,tsx}: Use React Testing Library
Test component behavior, not implementation
Use proper test queries
Implement proper test isolation
Use proper test coverage
Test component interactions
Use proper test data
Implement proper test setup
Use proper test cleanup
Implement proper test assertions
Use proper test structure
Files:
packages/clerk-js/src/ui/components/Subscriptions/__tests__/SubscriptionsList.test.tsxpackages/clerk-js/src/ui/components/Checkout/__tests__/Checkout.test.tsxpackages/clerk-js/src/ui/components/UserProfile/__tests__/UserProfile.test.tsxpackages/clerk-js/src/ui/components/PricingTable/__tests__/PricingTable.test.tsxpackages/clerk-js/src/ui/components/SubscriptionDetails/__tests__/SubscriptionDetails.test.tsx
**/__tests__/**/*.{ts,tsx}
📄 CodeRabbit inference engine (.cursor/rules/typescript.mdc)
**/__tests__/**/*.{ts,tsx}: Create type-safe test builders/factories
Use branded types for test isolation
Implement proper mock types that match interfaces
Files:
packages/clerk-js/src/ui/components/Subscriptions/__tests__/SubscriptionsList.test.tsxpackages/clerk-js/src/ui/components/Checkout/__tests__/Checkout.test.tsxpackages/clerk-js/src/ui/components/UserProfile/__tests__/UserProfile.test.tsxpackages/clerk-js/src/ui/components/PricingTable/__tests__/PricingTable.test.tsxpackages/clerk-js/src/ui/components/SubscriptionDetails/__tests__/SubscriptionDetails.test.tsx
🧬 Code graph analysis (3)
packages/clerk-js/src/ui/components/UserProfile/__tests__/UserProfile.test.tsx (1)
packages/clerk-js/src/ui/components/UserProfile/index.tsx (1)
UserProfile(52-52)
packages/clerk-js/src/ui/utils/test/fixtures.ts (1)
packages/types/src/commerceSettings.ts (1)
CommerceSettingsJSON(5-20)
packages/clerk-js/src/ui/utils/test/fixtureHelpers.ts (1)
packages/types/src/json.ts (1)
EnvironmentJSON(74-83)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (27)
- GitHub Check: Integration Tests (nextjs, chrome, 14)
- GitHub Check: Integration Tests (billing, chrome)
- GitHub Check: Integration Tests (nextjs, chrome, 15)
- GitHub Check: Integration Tests (vue, chrome)
- GitHub Check: Integration Tests (astro, chrome)
- GitHub Check: Integration Tests (tanstack-react-router, chrome)
- GitHub Check: Integration Tests (react-router, chrome)
- GitHub Check: Integration Tests (machine, chrome)
- GitHub Check: Integration Tests (sessions, chrome)
- GitHub Check: Integration Tests (tanstack-react-start, chrome)
- GitHub Check: Integration Tests (localhost, chrome)
- GitHub Check: Integration Tests (nuxt, chrome)
- GitHub Check: Integration Tests (ap-flows, chrome)
- GitHub Check: Integration Tests (quickstart, chrome)
- GitHub Check: Integration Tests (express, chrome)
- GitHub Check: Integration Tests (expo-web, chrome)
- GitHub Check: Integration Tests (elements, chrome)
- GitHub Check: Integration Tests (generic, chrome)
- GitHub Check: Publish with pkg-pr-new
- GitHub Check: Static analysis
- GitHub Check: Unit Tests (22, **)
- GitHub Check: Unit Tests (18, --filter=@clerk/astro --filter=@clerk/backend --filter=@clerk/express --filter=@c...
- GitHub Check: Formatting | Dedupe | Changeset
- GitHub Check: semgrep/ci
- GitHub Check: Analyze (javascript-typescript)
- GitHub Check: semgrep-cloud-platform/scan
- GitHub Check: semgrep-cloud-platform/scan
🔇 Additional comments (11)
packages/clerk-js/src/ui/utils/test/fixtures.ts (1)
4-4: Commerce settings fixture wiring — LGTMImporting CommerceSettingsJSON and adding commerce_settings to EnvironmentJSON keeps tests realistic and unblocks billing-gated UIs.
Also applies to: 22-22
packages/clerk-js/src/ui/components/SubscriptionDetails/__tests__/SubscriptionDetails.test.tsx (1)
13-14: Adding f.withBilling() across tests — LGTMEnsures billing APIs are available in fixtures; avoids undefined access on fixtures.clerk.billing.
Also applies to: 35-36, 139-140, 243-244, 326-327, 487-488, 623-624, 729-730, 832-833, 937-938, 1031-1032, 1140-1141
packages/clerk-js/src/ui/components/Checkout/__tests__/Checkout.test.tsx (1)
30-31: Billing fixture initialization — LGTMGood use of f.withBilling() to enable and mock billing flows during Checkout.
Also applies to: 102-103, 134-135, 167-168, 207-209, 236-237, 281-282, 315-316, 399-400, 481-482
packages/clerk-js/src/ui/components/PricingTable/__tests__/PricingTable.test.tsx (1)
47-49: Billing fixture setup — LGTMConsistently initializing billing keeps plan/subscription tests deterministic.
Also applies to: 101-105, 135-138, 156-159, 187-188, 309-313, 358-361, 377-381, 399-403, 421-423
packages/clerk-js/src/ui/components/Subscriptions/__tests__/SubscriptionsList.test.tsx (1)
22-23: Initialize billing in fixtures — LGTMPrevents undefined billing access and aligns with the new commerce settings fixture.
Also applies to: 86-87, 151-152, 215-216
packages/clerk-js/src/ui/components/UserProfile/__tests__/UserProfile.test.tsx (4)
4-4: Importing waitFor is appropriate for async visibility checks.
69-81: LGTM: covers instance-level paid plans path.
82-103: LGTM: covers non-free subscription path with mocked subscription items.
105-119: LGTM: covers past statements path with mocked statements.packages/clerk-js/src/ui/utils/test/fixtureHelpers.ts (2)
32-33: Good addition: expose billing helpers via environment fixtures.
353-366: No adjustment needed for has_paid_user_plans/has_paid_org_plans. They’re defined undercommerce_settings.billingin theCommerceSettingstype, soos.has_paid_org_plansandos.has_paid_user_plansare correct.
|
Hey @panteliselef - the snapshot version command generated the following package versions:
Tip: Use the snippet copy button below to quickly install the required packages. npm i @clerk/agent-toolkit@0.1.30-snapshot.v20250903135100 --save-exact
npm i @clerk/astro@2.11.11-snapshot.v20250903135100 --save-exact
npm i @clerk/backend@2.12.1-snapshot.v20250903135100 --save-exact
npm i @clerk/chrome-extension@2.5.29-snapshot.v20250903135100 --save-exact
npm i @clerk/clerk-js@5.91.2-snapshot.v20250903135100 --save-exact
npm i @clerk/elements@0.23.61-snapshot.v20250903135100 --save-exact
npm i @clerk/clerk-expo@2.14.28-snapshot.v20250903135100 --save-exact
npm i @clerk/expo-passkeys@0.3.38-snapshot.v20250903135100 --save-exact
npm i @clerk/express@1.7.29-snapshot.v20250903135100 --save-exact
npm i @clerk/fastify@2.4.29-snapshot.v20250903135100 --save-exact
npm i @clerk/nextjs@6.31.9-snapshot.v20250903135100 --save-exact
npm i @clerk/nuxt@1.8.15-snapshot.v20250903135100 --save-exact
npm i @clerk/clerk-react@5.46.1-snapshot.v20250903135100 --save-exact
npm i @clerk/react-router@1.9.9-snapshot.v20250903135100 --save-exact
npm i @clerk/remix@4.11.9-snapshot.v20250903135100 --save-exact
npm i @clerk/shared@3.24.1-snapshot.v20250903135100 --save-exact
npm i @clerk/tanstack-react-start@0.23.4-snapshot.v20250903135100 --save-exact
npm i @clerk/testing@1.12.4-snapshot.v20250903135100 --save-exact
npm i @clerk/vue@1.12.0-snapshot.v20250903135100 --save-exact |
There was a problem hiding this comment.
Actionable comments posted: 0
♻️ Duplicate comments (1)
packages/shared/src/react/hooks/createCommerceHook.tsx (1)
88-94: Missing org.id guard in enablement gating for organization flowsAs previously noted, org-scoped hooks should not run until an organization is selected. Add
hasScopeto the gating. This prevents firing fetchers withorgIdundefined and aligns gating with intent.const isOrganization = _for === 'organization'; const billingEnabled = isOrganization ? environment?.commerceSettings.billing.organization.enabled : environment?.commerceSettings.billing.user.enabled; - const isEnabled = !!hookParams && isClerkLoaded && !!billingEnabled; + const hasScope = isOrganization ? !!organization?.id : true; + const isEnabled = !!hookParams && isClerkLoaded && hasScope && !!billingEnabled;Optionally, consider a dev-time warning when
isOrganization && !organization?.idto aid integrators.
🧹 Nitpick comments (1)
packages/shared/src/react/hooks/createCommerceHook.tsx (1)
70-72: Avoid ts-expect-error; use a structural cast for the unstable fieldKeeps type-safety without suppressing TS entirely.
- // @ts-expect-error `__unstable__environment` is not typed - const environment = clerk.__unstable__environment as unknown as EnvironmentResource | null | undefined; + const environment = + (clerk as { __unstable__environment?: EnvironmentResource | null })?.__unstable__environment;
📜 Review details
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
💡 Knowledge Base configuration:
- MCP integration is disabled by default for public repositories
- Jira integration is disabled by default for public repositories
- Linear integration is disabled by default for public repositories
You can enable these sources in your CodeRabbit configuration.
📒 Files selected for processing (2)
packages/shared/src/react/hooks/createCommerceHook.tsx(3 hunks)packages/shared/src/react/hooks/useSubscription.tsx(2 hunks)
🚧 Files skipped from review as they are similar to previous changes (1)
- packages/shared/src/react/hooks/useSubscription.tsx
🧰 Additional context used
📓 Path-based instructions (8)
**/*.{js,jsx,ts,tsx}
📄 CodeRabbit inference engine (.cursor/rules/development.mdc)
**/*.{js,jsx,ts,tsx}: All code must pass ESLint checks with the project's configuration
Follow established naming conventions (PascalCase for components, camelCase for variables)
Maintain comprehensive JSDoc comments for public APIs
Use dynamic imports for optional features
All public APIs must be documented with JSDoc
Provide meaningful error messages to developers
Include error recovery suggestions where applicable
Log errors appropriately for debugging
Lazy load components and features when possible
Implement proper caching strategies
Use efficient data structures and algorithms
Profile and optimize critical paths
Validate all inputs and sanitize outputs
Implement proper logging with different levels
Files:
packages/shared/src/react/hooks/createCommerceHook.tsx
**/*.{js,jsx,ts,tsx,json,css,scss,md,yaml,yml}
📄 CodeRabbit inference engine (.cursor/rules/development.mdc)
Use Prettier for consistent code formatting
Files:
packages/shared/src/react/hooks/createCommerceHook.tsx
packages/**/*.{ts,tsx}
📄 CodeRabbit inference engine (.cursor/rules/development.mdc)
TypeScript is required for all packages
Files:
packages/shared/src/react/hooks/createCommerceHook.tsx
packages/**/*.{ts,tsx,d.ts}
📄 CodeRabbit inference engine (.cursor/rules/development.mdc)
Packages should export TypeScript types alongside runtime code
Files:
packages/shared/src/react/hooks/createCommerceHook.tsx
**/*.{ts,tsx}
📄 CodeRabbit inference engine (.cursor/rules/development.mdc)
Use proper TypeScript error types
**/*.{ts,tsx}: Always define explicit return types for functions, especially public APIs
Use proper type annotations for variables and parameters where inference isn't clear
Avoidanytype - preferunknownwhen type is uncertain, then narrow with type guards
Useinterfacefor object shapes that might be extended
Usetypefor unions, primitives, and computed types
Preferreadonlyproperties for immutable data structures
Useprivatefor internal implementation details
Useprotectedfor inheritance hierarchies
Usepublicexplicitly for clarity in public APIs
Preferreadonlyfor properties that shouldn't change after construction
Prefer composition and interfaces over deep inheritance chains
Use mixins for shared behavior across unrelated classes
Implement dependency injection for loose coupling
Let TypeScript infer when types are obvious
Useconst assertionsfor literal types:as const
Usesatisfiesoperator for type checking without widening
Use mapped types for transforming object types
Use conditional types for type-level logic
Leverage template literal types for string manipulation
Use ES6 imports/exports consistently
Use default exports sparingly, prefer named exports
Use type-only imports:import type { ... } from ...
Noanytypes without justification
Proper error handling with typed errors
Consistent use ofreadonlyfor immutable data
Proper generic constraints
No unused type parameters
Proper use of utility types instead of manual type construction
Type-only imports where possible
Proper tree-shaking friendly exports
No circular dependencies
Efficient type computations (avoid deep recursion)
Files:
packages/shared/src/react/hooks/createCommerceHook.tsx
**/*.{jsx,tsx}
📄 CodeRabbit inference engine (.cursor/rules/development.mdc)
**/*.{jsx,tsx}: Use error boundaries in React components
Minimize re-renders in React components
**/*.{jsx,tsx}: Always use functional components with hooks instead of class components
Follow PascalCase naming for components:UserProfile,NavigationMenu
Keep components focused on a single responsibility - split large components
Limit component size to 150-200 lines; extract logic into custom hooks
Use composition over inheritance - prefer smaller, composable components
Export components as named exports for better tree-shaking
One component per file with matching filename and component name
Use useState for simple state management
Use useReducer for complex state logic
Implement proper state initialization
Use proper state updates with callbacks
Implement proper state cleanup
Use Context API for theme/authentication
Implement proper state selectors
Use proper state normalization
Implement proper state persistence
Use React.memo for expensive components
Implement proper useCallback for handlers
Use proper useMemo for expensive computations
Implement proper virtualization for lists
Use proper code splitting with React.lazy
Implement proper cleanup in useEffect
Use proper refs for DOM access
Implement proper event listener cleanup
Use proper abort controllers for fetch
Implement proper subscription cleanup
Use proper HTML elements
Implement proper ARIA attributes
Use proper heading hierarchy
Implement proper form labels
Use proper button types
Implement proper focus management
Use proper keyboard shortcuts
Implement proper tab order
Use proper skip links
Implement proper focus traps
Implement proper error boundaries
Use proper error logging
Implement proper error recovery
Use proper error messages
Implement proper error fallbacks
Use proper form validation
Implement proper error states
Use proper error messages
Implement proper form submission
Use proper form reset
Use proper component naming
Implement proper file naming
Use proper prop naming
Implement proper...
Files:
packages/shared/src/react/hooks/createCommerceHook.tsx
**/*.{js,ts,tsx,jsx}
📄 CodeRabbit inference engine (.cursor/rules/monorepo.mdc)
Support multiple Clerk environment variables (CLERK_, NEXT_PUBLIC_CLERK_, etc.) for configuration.
Files:
packages/shared/src/react/hooks/createCommerceHook.tsx
**/*.tsx
📄 CodeRabbit inference engine (.cursor/rules/react.mdc)
**/*.tsx: Use proper type definitions for props and state
Leverage TypeScript's type inference where possible
Use proper event types for handlers
Implement proper generic types for reusable components
Use proper type guards for conditional rendering
Files:
packages/shared/src/react/hooks/createCommerceHook.tsx
🧬 Code graph analysis (1)
packages/shared/src/react/hooks/createCommerceHook.tsx (1)
packages/types/src/environment.ts (1)
EnvironmentResource(10-24)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (6)
- GitHub Check: Build Packages
- GitHub Check: Formatting | Dedupe | Changeset
- GitHub Check: Analyze (javascript-typescript)
- GitHub Check: semgrep/ci
- GitHub Check: semgrep-cloud-platform/scan
- GitHub Check: semgrep-cloud-platform/scan
🔇 Additional comments (1)
packages/shared/src/react/hooks/createCommerceHook.tsx (1)
1-1: Import looks correct and aligns with usage
EnvironmentResourceis needed for the environment gating below. Good addition.
|
!snapshot |
|
Hey @panteliselef - the snapshot version command generated the following package versions:
Tip: Use the snippet copy button below to quickly install the required packages. npm i @clerk/agent-toolkit@0.1.30-snapshot.v20250903143613 --save-exact
npm i @clerk/astro@2.11.11-snapshot.v20250903143613 --save-exact
npm i @clerk/backend@2.12.1-snapshot.v20250903143613 --save-exact
npm i @clerk/chrome-extension@2.5.29-snapshot.v20250903143613 --save-exact
npm i @clerk/clerk-js@5.91.2-snapshot.v20250903143613 --save-exact
npm i @clerk/elements@0.23.61-snapshot.v20250903143613 --save-exact
npm i @clerk/clerk-expo@2.14.28-snapshot.v20250903143613 --save-exact
npm i @clerk/expo-passkeys@0.3.38-snapshot.v20250903143613 --save-exact
npm i @clerk/express@1.7.29-snapshot.v20250903143613 --save-exact
npm i @clerk/fastify@2.4.29-snapshot.v20250903143613 --save-exact
npm i @clerk/nextjs@6.31.9-snapshot.v20250903143613 --save-exact
npm i @clerk/nuxt@1.8.15-snapshot.v20250903143613 --save-exact
npm i @clerk/clerk-react@5.46.1-snapshot.v20250903143613 --save-exact
npm i @clerk/react-router@1.9.9-snapshot.v20250903143613 --save-exact
npm i @clerk/remix@4.11.9-snapshot.v20250903143613 --save-exact
npm i @clerk/shared@3.24.1-snapshot.v20250903143613 --save-exact
npm i @clerk/tanstack-react-start@0.23.4-snapshot.v20250903143613 --save-exact
npm i @clerk/testing@1.12.4-snapshot.v20250903143613 --save-exact
npm i @clerk/vue@1.12.0-snapshot.v20250903143613 --save-exact |
Description
We need to allow customers to disable user billing, this PR introduces a "hack" to hide the billing tab when certain conditions are met. As a side effect the Billing tab will pop in if there are no visible plans configured but the end user has or had an subscription apart from the free plan.
Instance that wants to hide user billing
Screen.Recording.2025-09-03.at.5.21.29.PM.mov
Regular instance
Screen.Recording.2025-09-03.at.5.23.15.PM.mov
Introduced side effect
Screen.Recording.2025-09-03.at.5.34.05.PM.mov
Checklist
pnpm testruns as expected.pnpm buildruns as expected.Type of change
Summary by CodeRabbit