chore(clerk-js,shared): Expose experimental useSubscription
#6317
Conversation
🦋 Changeset detectedLatest commit: b8af083 The changes in this PR will be included in the next version bump. This PR includes changesets to release 22 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 |
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
# Conflicts: # packages/shared/src/react/hooks/useOrganization.tsx # packages/types/src/organization.ts
# Conflicts: # packages/clerk-js/src/ui/components/SubscriptionDetails/index.tsx # packages/clerk-js/src/ui/contexts/components/Plans.tsx # packages/shared/src/react/hooks/index.ts
@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: |
📝 WalkthroughWalkthroughThis change set introduces a clear distinction between "subscriptions" and "subscription items" across the commerce modules, types, hooks, and UI components. A new Estimated code review effort4 (~90 minutes) 📜 Recent review detailsConfiguration used: CodeRabbit UI ⛔ Files ignored due to path filters (1)
📒 Files selected for processing (3)
🚧 Files skipped from review as they are similar to previous changes (3)
⏰ 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). (5)
🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 7
🔭 Outside diff range comments (2)
packages/clerk-js/src/core/modules/commerce/CommerceBilling.ts (1)
68-86: Consider deprecating or renaming getSubscriptions for clarityThe
getSubscriptionsmethod now returns subscription items instead of subscriptions, which is a breaking change. This could be confusing for API consumers. Consider:
- Deprecating this method and creating a new
getSubscriptionItemsmethod- Adding JSDoc comments to clearly document the return type change
- Updating the endpoint path to reflect that it returns items (if backend supports it)
packages/clerk-js/src/ui/components/SubscriptionDetails/index.tsx (1)
1-575: Add comprehensive tests for the subscription architecture changesThis PR introduces significant architectural changes but doesn't include test updates. Please add tests to cover:
- The new
useSubscriptionhook behavior- The subscription/subscription-item data model transformations
- The updated cancellation flow
- Edge cases for free plans, past due subscriptions, etc.
Would you like me to help generate test cases for these changes?
🧹 Nitpick comments (2)
packages/clerk-js/src/core/resources/CommerceSubscription.ts (1)
72-73: Address the TODO about undefined amountThe TODO comment questions why
amountcan be undefined. This should be clarified:
- Document when/why amount might be undefined (e.g., for free plans?)
- Consider making it required if it should always have a value
- Add validation or default value handling if needed
Would you like me to help investigate when the amount field might be undefined by analyzing the codebase?
packages/types/src/commerce.ts (1)
956-957: Resolve TODO comment before mergingThere's a TODO comment questioning whether
paymentSourceIdshould be nullable. This should be resolved before the PR is merged.Would you like me to help analyze the usage patterns of
paymentSourceIdacross the codebase to determine if it should be nullable?
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (21)
packages/clerk-js/src/core/modules/commerce/CommerceBilling.ts(5 hunks)packages/clerk-js/src/core/resources/CommercePayment.ts(2 hunks)packages/clerk-js/src/core/resources/CommerceSubscription.ts(3 hunks)packages/clerk-js/src/core/resources/Organization.ts(3 hunks)packages/clerk-js/src/ui/components/PricingTable/PricingTable.tsx(2 hunks)packages/clerk-js/src/ui/components/SubscriptionDetails/__tests__/SubscriptionDetails.test.tsx(9 hunks)packages/clerk-js/src/ui/components/SubscriptionDetails/index.tsx(12 hunks)packages/clerk-js/src/ui/components/Subscriptions/SubscriptionsList.tsx(4 hunks)packages/clerk-js/src/ui/components/Subscriptions/badge.tsx(2 hunks)packages/clerk-js/src/ui/contexts/components/Plans.tsx(8 hunks)packages/shared/src/react/hooks/createCommerceHook.tsx(1 hunks)packages/shared/src/react/hooks/index.ts(1 hunks)packages/shared/src/react/hooks/useOrganization.tsx(5 hunks)packages/shared/src/react/hooks/usePaymentAttempts.tsx(1 hunks)packages/shared/src/react/hooks/usePaymentMethods.tsx(1 hunks)packages/shared/src/react/hooks/usePlans.tsx(1 hunks)packages/shared/src/react/hooks/useStatements.tsx(1 hunks)packages/shared/src/react/hooks/useSubscriptionItems.tsx(1 hunks)packages/types/src/commerce.ts(7 hunks)packages/types/src/json.ts(3 hunks)packages/types/src/organization.ts(2 hunks)
🧰 Additional context used
📓 Path-based instructions (16)
**/*.{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.tsxpackages/clerk-js/src/ui/components/Subscriptions/badge.tsxpackages/shared/src/react/hooks/usePlans.tsxpackages/clerk-js/src/ui/components/PricingTable/PricingTable.tsxpackages/shared/src/react/hooks/usePaymentMethods.tsxpackages/clerk-js/src/ui/components/Subscriptions/SubscriptionsList.tsxpackages/shared/src/react/hooks/usePaymentAttempts.tsxpackages/shared/src/react/hooks/useStatements.tsxpackages/shared/src/react/hooks/index.tspackages/clerk-js/src/ui/contexts/components/Plans.tsxpackages/clerk-js/src/ui/components/SubscriptionDetails/__tests__/SubscriptionDetails.test.tsxpackages/clerk-js/src/core/resources/Organization.tspackages/shared/src/react/hooks/useSubscriptionItems.tsxpackages/types/src/organization.tspackages/shared/src/react/hooks/useOrganization.tsxpackages/clerk-js/src/ui/components/SubscriptionDetails/index.tsxpackages/clerk-js/src/core/modules/commerce/CommerceBilling.tspackages/types/src/json.tspackages/types/src/commerce.tspackages/clerk-js/src/core/resources/CommercePayment.tspackages/clerk-js/src/core/resources/CommerceSubscription.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/shared/src/react/hooks/createCommerceHook.tsxpackages/clerk-js/src/ui/components/Subscriptions/badge.tsxpackages/shared/src/react/hooks/usePlans.tsxpackages/clerk-js/src/ui/components/PricingTable/PricingTable.tsxpackages/shared/src/react/hooks/usePaymentMethods.tsxpackages/clerk-js/src/ui/components/Subscriptions/SubscriptionsList.tsxpackages/shared/src/react/hooks/usePaymentAttempts.tsxpackages/shared/src/react/hooks/useStatements.tsxpackages/shared/src/react/hooks/index.tspackages/clerk-js/src/ui/contexts/components/Plans.tsxpackages/clerk-js/src/ui/components/SubscriptionDetails/__tests__/SubscriptionDetails.test.tsxpackages/clerk-js/src/core/resources/Organization.tspackages/shared/src/react/hooks/useSubscriptionItems.tsxpackages/types/src/organization.tspackages/shared/src/react/hooks/useOrganization.tsxpackages/clerk-js/src/ui/components/SubscriptionDetails/index.tsxpackages/clerk-js/src/core/modules/commerce/CommerceBilling.tspackages/types/src/json.tspackages/types/src/commerce.tspackages/clerk-js/src/core/resources/CommercePayment.tspackages/clerk-js/src/core/resources/CommerceSubscription.ts
packages/**/*.{ts,tsx}
📄 CodeRabbit Inference Engine (.cursor/rules/development.mdc)
TypeScript is required for all packages
Files:
packages/shared/src/react/hooks/createCommerceHook.tsxpackages/clerk-js/src/ui/components/Subscriptions/badge.tsxpackages/shared/src/react/hooks/usePlans.tsxpackages/clerk-js/src/ui/components/PricingTable/PricingTable.tsxpackages/shared/src/react/hooks/usePaymentMethods.tsxpackages/clerk-js/src/ui/components/Subscriptions/SubscriptionsList.tsxpackages/shared/src/react/hooks/usePaymentAttempts.tsxpackages/shared/src/react/hooks/useStatements.tsxpackages/shared/src/react/hooks/index.tspackages/clerk-js/src/ui/contexts/components/Plans.tsxpackages/clerk-js/src/ui/components/SubscriptionDetails/__tests__/SubscriptionDetails.test.tsxpackages/clerk-js/src/core/resources/Organization.tspackages/shared/src/react/hooks/useSubscriptionItems.tsxpackages/types/src/organization.tspackages/shared/src/react/hooks/useOrganization.tsxpackages/clerk-js/src/ui/components/SubscriptionDetails/index.tsxpackages/clerk-js/src/core/modules/commerce/CommerceBilling.tspackages/types/src/json.tspackages/types/src/commerce.tspackages/clerk-js/src/core/resources/CommercePayment.tspackages/clerk-js/src/core/resources/CommerceSubscription.ts
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.tsxpackages/clerk-js/src/ui/components/Subscriptions/badge.tsxpackages/shared/src/react/hooks/usePlans.tsxpackages/clerk-js/src/ui/components/PricingTable/PricingTable.tsxpackages/shared/src/react/hooks/usePaymentMethods.tsxpackages/clerk-js/src/ui/components/Subscriptions/SubscriptionsList.tsxpackages/shared/src/react/hooks/usePaymentAttempts.tsxpackages/shared/src/react/hooks/useStatements.tsxpackages/shared/src/react/hooks/index.tspackages/clerk-js/src/ui/contexts/components/Plans.tsxpackages/clerk-js/src/ui/components/SubscriptionDetails/__tests__/SubscriptionDetails.test.tsxpackages/clerk-js/src/core/resources/Organization.tspackages/shared/src/react/hooks/useSubscriptionItems.tsxpackages/types/src/organization.tspackages/shared/src/react/hooks/useOrganization.tsxpackages/clerk-js/src/ui/components/SubscriptionDetails/index.tsxpackages/clerk-js/src/core/modules/commerce/CommerceBilling.tspackages/types/src/json.tspackages/types/src/commerce.tspackages/clerk-js/src/core/resources/CommercePayment.tspackages/clerk-js/src/core/resources/CommerceSubscription.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/shared/src/react/hooks/createCommerceHook.tsxpackages/clerk-js/src/ui/components/Subscriptions/badge.tsxpackages/shared/src/react/hooks/usePlans.tsxpackages/clerk-js/src/ui/components/PricingTable/PricingTable.tsxpackages/shared/src/react/hooks/usePaymentMethods.tsxpackages/clerk-js/src/ui/components/Subscriptions/SubscriptionsList.tsxpackages/shared/src/react/hooks/usePaymentAttempts.tsxpackages/shared/src/react/hooks/useStatements.tsxpackages/shared/src/react/hooks/index.tspackages/clerk-js/src/ui/contexts/components/Plans.tsxpackages/clerk-js/src/ui/components/SubscriptionDetails/__tests__/SubscriptionDetails.test.tsxpackages/clerk-js/src/core/resources/Organization.tspackages/shared/src/react/hooks/useSubscriptionItems.tsxpackages/types/src/organization.tspackages/shared/src/react/hooks/useOrganization.tsxpackages/clerk-js/src/ui/components/SubscriptionDetails/index.tsxpackages/clerk-js/src/core/modules/commerce/CommerceBilling.tspackages/types/src/json.tspackages/types/src/commerce.tspackages/clerk-js/src/core/resources/CommercePayment.tspackages/clerk-js/src/core/resources/CommerceSubscription.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/shared/src/react/hooks/createCommerceHook.tsxpackages/clerk-js/src/ui/components/Subscriptions/badge.tsxpackages/shared/src/react/hooks/usePlans.tsxpackages/clerk-js/src/ui/components/PricingTable/PricingTable.tsxpackages/shared/src/react/hooks/usePaymentMethods.tsxpackages/clerk-js/src/ui/components/Subscriptions/SubscriptionsList.tsxpackages/shared/src/react/hooks/usePaymentAttempts.tsxpackages/shared/src/react/hooks/useStatements.tsxpackages/clerk-js/src/ui/contexts/components/Plans.tsxpackages/clerk-js/src/ui/components/SubscriptionDetails/__tests__/SubscriptionDetails.test.tsxpackages/shared/src/react/hooks/useSubscriptionItems.tsxpackages/shared/src/react/hooks/useOrganization.tsxpackages/clerk-js/src/ui/components/SubscriptionDetails/index.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.tsxpackages/clerk-js/src/ui/components/Subscriptions/badge.tsxpackages/shared/src/react/hooks/usePlans.tsxpackages/clerk-js/src/ui/components/PricingTable/PricingTable.tsxpackages/shared/src/react/hooks/usePaymentMethods.tsxpackages/clerk-js/src/ui/components/Subscriptions/SubscriptionsList.tsxpackages/shared/src/react/hooks/usePaymentAttempts.tsxpackages/shared/src/react/hooks/useStatements.tsxpackages/shared/src/react/hooks/index.tspackages/clerk-js/src/ui/contexts/components/Plans.tsxpackages/clerk-js/src/ui/components/SubscriptionDetails/__tests__/SubscriptionDetails.test.tsxpackages/clerk-js/src/core/resources/Organization.tspackages/shared/src/react/hooks/useSubscriptionItems.tsxpackages/types/src/organization.tspackages/shared/src/react/hooks/useOrganization.tsxpackages/clerk-js/src/ui/components/SubscriptionDetails/index.tsxpackages/clerk-js/src/core/modules/commerce/CommerceBilling.tspackages/types/src/json.tspackages/types/src/commerce.tspackages/clerk-js/src/core/resources/CommercePayment.tspackages/clerk-js/src/core/resources/CommerceSubscription.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/shared/src/react/hooks/createCommerceHook.tsxpackages/clerk-js/src/ui/components/Subscriptions/badge.tsxpackages/shared/src/react/hooks/usePlans.tsxpackages/clerk-js/src/ui/components/PricingTable/PricingTable.tsxpackages/shared/src/react/hooks/usePaymentMethods.tsxpackages/clerk-js/src/ui/components/Subscriptions/SubscriptionsList.tsxpackages/shared/src/react/hooks/usePaymentAttempts.tsxpackages/shared/src/react/hooks/useStatements.tsxpackages/clerk-js/src/ui/contexts/components/Plans.tsxpackages/clerk-js/src/ui/components/SubscriptionDetails/__tests__/SubscriptionDetails.test.tsxpackages/shared/src/react/hooks/useSubscriptionItems.tsxpackages/shared/src/react/hooks/useOrganization.tsxpackages/clerk-js/src/ui/components/SubscriptionDetails/index.tsx
**/*
⚙️ CodeRabbit Configuration File
**/*: If there are no tests added or modified as part of the PR, please suggest that tests be added to cover the changes.Whenever reviewing a pull request, if there are any changes that could impact security, always tag
clerk/securityin the PR.Security-impacting changes include, but are not limited to:
- Changes to authentication logic or mechanisms (e.g. login, session handling, token issuance)
- Any modification to access control, authorization checks, or role-based permissions
- Introduction or modification of hashing algorithms, signature verification, or cryptographic primitives
- Handling of sensitive data (e.g. passwords, tokens, secrets, PII)
- Integration with external identity providers (e.g. SSO, OAuth, OpenID Connect)
- Modifications to security headers, cookie flags, CORS policies, or CSRF protections
- Bypass mechanisms (e.g. feature flags, testing overrides) that could weaken protections
- Changes to rate limiting, abuse prevention, or input validation
If you're unsure whether a change is security-relevant, err on the side of caution and tag
clerk/security.Any time that you tag
clerk/security, please do so explicitly in a code comment, rather than within a collapsed section in a coderabbit comment, such as the "recent review details" section. If you do use the team name in any thinking or non-direct-code-comment content, it can be referred to as "clerk security team" to avoid accidentally printing the tag which sends a notification to the team.
Files:
packages/shared/src/react/hooks/createCommerceHook.tsxpackages/clerk-js/src/ui/components/Subscriptions/badge.tsxpackages/shared/src/react/hooks/usePlans.tsxpackages/clerk-js/src/ui/components/PricingTable/PricingTable.tsxpackages/shared/src/react/hooks/usePaymentMethods.tsxpackages/clerk-js/src/ui/components/Subscriptions/SubscriptionsList.tsxpackages/shared/src/react/hooks/usePaymentAttempts.tsxpackages/shared/src/react/hooks/useStatements.tsxpackages/shared/src/react/hooks/index.tspackages/clerk-js/src/ui/contexts/components/Plans.tsxpackages/clerk-js/src/ui/components/SubscriptionDetails/__tests__/SubscriptionDetails.test.tsxpackages/clerk-js/src/core/resources/Organization.tspackages/shared/src/react/hooks/useSubscriptionItems.tsxpackages/types/src/organization.tspackages/shared/src/react/hooks/useOrganization.tsxpackages/clerk-js/src/ui/components/SubscriptionDetails/index.tsxpackages/clerk-js/src/core/modules/commerce/CommerceBilling.tspackages/types/src/json.tspackages/types/src/commerce.tspackages/clerk-js/src/core/resources/CommercePayment.tspackages/clerk-js/src/core/resources/CommerceSubscription.ts
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/badge.tsxpackages/clerk-js/src/ui/components/PricingTable/PricingTable.tsxpackages/clerk-js/src/ui/components/Subscriptions/SubscriptionsList.tsxpackages/clerk-js/src/ui/contexts/components/Plans.tsxpackages/clerk-js/src/ui/components/SubscriptionDetails/__tests__/SubscriptionDetails.test.tsxpackages/clerk-js/src/ui/components/SubscriptionDetails/index.tsx
packages/**/index.{js,ts}
📄 CodeRabbit Inference Engine (.cursor/rules/development.mdc)
Use tree-shaking friendly exports
Files:
packages/shared/src/react/hooks/index.ts
**/index.ts
📄 CodeRabbit Inference Engine (.cursor/rules/react.mdc)
Use index.ts files for clean imports but avoid deep barrel exports
Avoid barrel files (index.ts re-exports) as they can cause circular dependencies
Files:
packages/shared/src/react/hooks/index.ts
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/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/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/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/SubscriptionDetails/__tests__/SubscriptionDetails.test.tsx
🧬 Code Graph Analysis (9)
packages/shared/src/react/hooks/createCommerceHook.tsx (2)
packages/types/src/resource.ts (1)
ClerkResource(8-21)packages/shared/src/react/types.ts (1)
PagesOrInfiniteOptions(124-144)
packages/clerk-js/src/ui/components/Subscriptions/badge.tsx (1)
packages/types/src/commerce.ts (1)
CommerceSubscriptionItemResource(946-1079)
packages/clerk-js/src/ui/components/Subscriptions/SubscriptionsList.tsx (2)
packages/clerk-js/src/ui/contexts/components/Plans.tsx (1)
useSubscription(56-68)packages/shared/src/react/hooks/useSubscriptionItems.tsx (1)
useSubscription(20-50)
packages/clerk-js/src/core/resources/Organization.ts (4)
packages/types/src/pagination.ts (1)
ClerkPaginatedResponse(21-30)packages/types/src/commerce.ts (1)
CommerceSubscriptionItemResource(946-1079)packages/types/src/json.ts (1)
CommerceSubscriptionItemJSON(767-783)packages/clerk-js/src/core/resources/CommerceSubscription.ts (1)
CommerceSubscriptionItem(58-122)
packages/shared/src/react/hooks/useSubscriptionItems.tsx (3)
packages/shared/src/react/hooks/index.ts (1)
useSubscription(15-15)packages/clerk-js/src/ui/contexts/components/Plans.tsx (1)
useSubscription(56-68)packages/react/src/isomorphicClerk.ts (1)
organization(673-679)
packages/types/src/organization.ts (2)
packages/types/src/commerce.ts (2)
GetSubscriptionsParams(914-914)CommerceSubscriptionItemResource(946-1079)packages/types/src/pagination.ts (1)
ClerkPaginatedResponse(21-30)
packages/shared/src/react/hooks/useOrganization.tsx (3)
packages/shared/src/react/types.ts (1)
PaginatedResourcesWithDefault(83-85)packages/types/src/commerce.ts (1)
CommerceSubscriptionItemResource(946-1079)packages/types/src/pagination.ts (1)
ClerkPaginatedResponse(21-30)
packages/types/src/json.ts (2)
packages/backend/src/api/resources/JSON.ts (1)
ClerkResourceJSON(70-79)packages/types/src/commerce.ts (1)
CommerceSubscriptionStatus(111-111)
packages/types/src/commerce.ts (2)
packages/types/src/pagination.ts (1)
ClerkPaginatedResponse(21-30)packages/types/src/resource.ts (1)
ClerkResource(8-21)
🪛 Biome (1.9.4)
packages/clerk-js/src/ui/components/SubscriptionDetails/__tests__/SubscriptionDetails.test.tsx
[error] 559-559: Don't focus the test.
The 'only' method is often used for debugging or during implementation. It should be removed before deploying to production.
Consider removing 'only' to ensure all tests are executed.
Unsafe fix: Remove focus from test.
(lint/suspicious/noFocusedTests)
⏰ 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). (1)
- GitHub Check: Integration Tests (tanstack-react-start, chrome)
🔇 Additional comments (34)
packages/shared/src/react/hooks/createCommerceHook.tsx (1)
41-41: LGTM: Function rename improves semantic clarity.The rename from
createCommerceHooktocreateCommercePaginatedHookbetter reflects the function's purpose of creating paginated commerce hooks. The comprehensive JSDoc documentation clearly explains the hook factory's capabilities.packages/shared/src/react/hooks/usePaymentAttempts.tsx (1)
4-4: LGTM: Correctly updated to use renamed hook factory.The import and usage have been properly updated to use
createCommercePaginatedHook, maintaining consistency with the refactor.Also applies to: 9-9
packages/shared/src/react/hooks/index.ts (1)
15-15: LGTM: Successfully exposes experimentaluseSubscriptionhook.This export change aligns perfectly with the PR objective to expose the experimental
useSubscriptionhook. The experimental prefix appropriately indicates this is a new API that may change.packages/clerk-js/src/ui/components/Subscriptions/badge.tsx (1)
1-1: LGTM: Type update aligns with subscription/subscription item distinction.The update from
CommerceSubscriptionResourcetoCommerceSubscriptionItemResourceis consistent with the broader refactor. The component logic remains compatible since both types include thestatusproperty used by the component.Also applies to: 22-22
packages/shared/src/react/hooks/usePlans.tsx (1)
4-4: LGTM: Consistently updated to use paginated hook factory.The changes properly update
usePlansto usecreateCommercePaginatedHook, maintaining consistency with other commerce hooks likeusePaymentAttempts. The hook's external API remains unchanged while gaining pagination capabilities.Also applies to: 9-9
packages/clerk-js/src/ui/components/PricingTable/PricingTable.tsx (4)
5-5: Import path updated to absolute alias.The Flow import was changed from a relative path to use an absolute path alias. This aligns with better module organization practices.
7-7: Hook import updated from useSubscriptions to useSubscription.The import reflects the broader refactor to distinguish between subscription items and top-level subscriptions. This change is consistent with the new data model.
15-15: Destructuring updated to use subscriptionItems.The destructuring changed from
data: subscriptionstosubscriptionItems, which is consistent with the newuseSubscriptionhook structure that exposessubscriptionItemsdirectly.
21-21: All subscription references consistently updated.All references to
subscriptionshave been properly updated tosubscriptionItems, including:
- Variable usage in the
findoperations- The
useMemodependency arrayThe logic remains unchanged - it still finds upcoming and active subscriptions to determine the default plan period.
Also applies to: 27-27, 36-36
packages/shared/src/react/hooks/useStatements.tsx (1)
4-4: Hook factory updated to support pagination.The change from
createCommerceHooktocreateCommercePaginatedHookenables pagination support for statements, which is consistent with similar updates to other commerce hooks likeusePaymentMethods,usePaymentAttempts, andusePlans.Also applies to: 9-9
packages/shared/src/react/hooks/usePaymentMethods.tsx (1)
4-4: Hook factory updated to support pagination.The change from
createCommerceHooktocreateCommercePaginatedHookenables pagination support for payment methods, maintaining consistency with other commerce hooks that have been updated to support pagination.Also applies to: 9-9
packages/types/src/organization.ts (2)
1-5: Import updated to include subscription item types.The import statement now includes
CommerceSubscriptionItemResourceandGetSubscriptionsParams, which are needed for the updatedgetSubscriptionsmethod signature.
66-68: Method signature updated to return subscription items.The
getSubscriptionsmethod now returnsCommerceSubscriptionItemResourceinstead ofCommerceSubscriptionResource, reflecting the refactor that distinguishes between subscription items and top-level subscriptions. This is consistent with the implementation changes in the commerce modules.packages/clerk-js/src/ui/components/Subscriptions/SubscriptionsList.tsx (5)
1-1: React.useMemo import added for performance optimization.The
useMemoimport is added to support the memoized sorting of subscription items, which is a good performance optimization.
10-10: Hook updated to use new subscription model.The import changed from
useSubscriptionstouseSubscription, consistent with the broader refactor to distinguish between subscription items and top-level subscriptions.
44-44: Destructuring updated for new hook structure.The destructuring changed from
data: subscriptionstosubscriptionItems, which aligns with the newuseSubscriptionhook that exposessubscriptionItemsdirectly.
50-65: Memoized sorting added for performance optimization.The sorting logic has been wrapped in
useMemowith proper dependencies (subscriptionItems), which prevents unnecessary re-sorting on every render. The sorting logic prioritizes active subscriptions, which is appropriate for the UI.
77-77: All subscription references consistently updated.All conditional checks and references have been properly updated from
subscriptionstosubscriptionItems, maintaining the existing functionality while using the new data structure.Also applies to: 199-199, 206-206
packages/clerk-js/src/core/resources/Organization.ts (1)
5-6: LGTM! Consistent refactoring from subscription to subscription item types.The changes systematically update the Organization resource to work with subscription items instead of subscriptions, aligning with the broader refactor described in the PR objectives. All imports, type annotations, and instantiations are consistently updated.
Also applies to: 35-35, 238-238, 245-245, 249-249
packages/shared/src/react/hooks/useOrganization.tsx (1)
4-4: LGTM! Hook types updated consistently with the subscription item refactor.All type annotations have been systematically updated from
CommerceSubscriptionResourcetoCommerceSubscriptionItemResource, maintaining consistency with the underlying Organization resource changes.Also applies to: 118-118, 128-128, 151-151, 468-468
packages/clerk-js/src/core/resources/CommercePayment.ts (1)
6-6: LGTM! Good backward compatibility approach with deprecation pattern.The changes introduce both deprecated
subscriptionand newsubscriptionItemproperties, allowing for a smooth migration. Both properties are correctly typed asCommerceSubscriptionItemResourceand instantiated using the appropriate JSON fields.Also applies to: 8-8, 13-13, 21-21, 22-26, 46-47
packages/clerk-js/src/ui/components/SubscriptionDetails/__tests__/SubscriptionDetails.test.tsx (1)
36-79: LGTM! Test mocks updated to match new subscription data structure.The test mocks have been properly updated to use
getSubscriptioninstead ofgetSubscriptions, returning single subscription objects withsubscriptionItemsarrays. This aligns with the new data model described in the PR.Also applies to: 129-172, 222-265
packages/shared/src/react/hooks/useSubscriptionItems.tsx (2)
1-50: LGTM! Well-implemented hook with proper SWR usage and context handling.The new
useSubscriptionhook is well-structured with:
- Proper context switching between user and organization
- Conditional fetching based on user presence
- Appropriate SWR configuration with deduplication
- Clean API with revalidate function
- Telemetry recording for usage tracking
7-15: Good TypeScript interface design for hook parameters.The
UseSubscriptionParamsinterface provides clear options for subscription context and data persistence, with proper JSDoc documentation for thekeepPreviousDataoption.packages/clerk-js/src/ui/contexts/components/Plans.tsx (2)
13-13: Type updates are consistent with the new data modelThe type changes from
CommerceSubscriptionResourcetoCommerceSubscriptionItemResourceare applied consistently throughout the file, maintaining type safety with the new subscription architecture.Also applies to: 175-175, 192-192, 262-262
108-146: Clean adaptation to the new subscription data modelThe
usePlansContexthook has been properly updated to work withsubscriptionItemsfrom the newuseSubscriptionhook. The business logic remains intact while adapting to the new data structure.Also applies to: 245-245, 259-259
packages/clerk-js/src/core/modules/commerce/CommerceBilling.ts (2)
61-66: New subscription fetching method looks goodThe
getSubscriptionmethod is well-implemented and follows the established pattern for organization/user scoped resources. The singular endpoint path indicates it fetches the top-level subscription resource.
52-59: Clarify the "Inconsistent API" commentThe comment on line 52 doesn't explain what's inconsistent about the API. Please either:
- Expand the comment to explain the specific inconsistency
- Create a TODO with an issue reference
- Remove the comment if it's no longer relevant
packages/types/src/json.ts (1)
809-809: Ensure consistent naming and nullability in CommerceSubscriptionJSONA quick grep shows that every other JSON interface in packages/types/src/json.ts uses
updated_at, but here we have:active_at: number; update_at: number | null; past_due_at: number | null; subscription_items: CommerceSubscriptionItemJSON[] | null;•
update_atvs.updated_at
– Every other model usesupdated_at. Please confirm whether the API really returnsupdate_at. If this is a typo, rename toupdated_atin both the JSON type and the corresponding resource class.•
subscription_items: … | null
– Nullability here forces callers to guard againstnull. If the API always returns an array (possibly empty), tighten this to a non-nullable array. Otherwise ensure downstream code can safely handle anullvalue.packages/clerk-js/src/ui/components/SubscriptionDetails/index.tsx (3)
44-54: Good separation of concerns for cancellation flowThe refactored
SubscriptionForCancellationContextproperly separates the cancellation state management from the main subscription data, improving code clarity and maintainability.
216-219: Verify the footer visibility logicThe footer visibility now depends on
subscription?.nextPaymentbeing present. This is cleaner than the previous approach, but please ensure:
- Free plans never have a
nextPaymentproperty- This correctly handles all edge cases (past due, cancelled, etc.)
41-42: Free plan detection verified
Across the UI and core resources,
hasBaseFeeis the only flag used to distinguish free plans.No other properties (
isDefault,isRecurring, etc.) control free-plan status.Optional improvement: add a getter on CommercePlanResource, e.g.:
// in src/core/resources/CommercePlan.ts get isFree(): boolean { return !this.hasBaseFee; }Then replace the standalone helper with
plan.isFreefor consistency.packages/types/src/commerce.ts (2)
1081-1188: Well-structured subscription resource interfaceThe new
CommerceSubscriptionResourceinterface is well-designed with:
- Clear separation of concerns between subscription and subscription items
- Appropriate use of nullable types
- Good documentation explaining the business logic
- Type-safe status restriction
1-1514: Consider adding tests for the new typesThese type changes introduce a significant refactoring of the subscription model. Please ensure that:
- Unit tests are added or updated to cover the new
getSubscriptionmethod- Integration tests verify the deprecation path works correctly
- Type tests confirm the new interfaces work as expected
Would you like me to help generate test cases for these new types and interfaces?
packages/clerk-js/src/ui/components/SubscriptionDetails/__tests__/SubscriptionDetails.test.tsx
Outdated
Show resolved
Hide resolved
📝 WalkthroughWalkthroughThis change set introduces a structural refactor and type distinction between "subscriptions" and "subscription items" in the commerce billing domain. It adds a new Estimated code review effort4 (~90 minutes) 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
There was a problem hiding this comment.
Actionable comments posted: 9
🔭 Outside diff range comments (2)
packages/clerk-js/src/ui/components/SubscriptionDetails/index.tsx (2)
103-104: Avoid using type assertions withas anyUsing
as anydefeats TypeScript's type safety. The types should be properly inferred based on the conditional logic.- activeSubscription: activeSubscription as any, // Type is correct due to the throw above - anySubscription: (upcomingSubscription || activeSubscription || pastDueSubscription) as any, + activeSubscription: activeSubscription!, + anySubscription: (upcomingSubscription || activeSubscription || pastDueSubscription)!,The non-null assertion (!) is more appropriate here since the throw ensures these values exist when
or === 'throw'.
1-50: Missing tests for the new useSubscription hookThis PR introduces a new
useSubscriptionhook but doesn't include any tests. Given the experimental nature of this feature and the significant refactoring, comprehensive tests are essential.Please add tests to cover:
- Hook behavior with different parameter combinations
- Error handling scenarios
- SWR caching behavior
- Telemetry event recording
- Integration with organization/user contexts
🧹 Nitpick comments (6)
packages/shared/src/react/hooks/useSubscriptionItems.tsx (1)
34-34: Missing error handling for API callThe
clerk.billing.getSubscriptioncall doesn't have explicit error handling. While SWR will catch errors, it's good practice to add error boundaries or handle specific error cases.Consider adding error handling for better user experience:
- ({ args }) => clerk.billing.getSubscription(args), + async ({ args }) => { + try { + return await clerk.billing.getSubscription(args); + } catch (error) { + // Log error for debugging + console.error('Failed to fetch subscription:', error); + throw error; + } + },packages/clerk-js/src/core/modules/commerce/CommerceBilling.ts (2)
52-52: Address the "Inconsistent API" commentThe comment suggests there's an API inconsistency that should be resolved. This technical debt should be tracked.
Would you like me to open an issue to track this API inconsistency and propose a consistent API design?
61-66: Add parameter validation for getSubscriptionThe method doesn't validate the
paramsobject. Consider adding validation to ensure robust error handling.getSubscription = async (params: GetSubscriptionParams): Promise<CommerceSubscriptionResource> => { + if (!params || typeof params !== 'object') { + throw new Error('Invalid parameters provided to getSubscription'); + } return await BaseResource._fetch({ path: params.orgId ? `/organizations/${params.orgId}/commerce/subscription` : `/me/commerce/subscription`, method: 'GET', }).then(res => new CommerceSubscription(res?.response as CommerceSubscriptionJSON)); };packages/clerk-js/src/ui/components/SubscriptionDetails/index.tsx (2)
43-43: Fix typo in commentMinor typo in the comment.
-// We cannot derive the state of confirmation modal from the existence subscription, as it will make the animation laggy when the confirmation closes. +// We cannot derive the state of confirmation modal from the existing subscription, as it will make the animation laggy when the confirmation closes.
217-219: Clarify the comment about nextPaymentThe comment could be more specific about why free plans don't have nextPayment.
- // Missing nextPayment means that an upcoming subscription is for the free plan + // Free plans don't have nextPayment since there's no payment requiredpackages/types/src/commerce.ts (1)
956-957: Address the TODO comment about nullable paymentSourceId.The TODO comment indicates uncertainty about whether
paymentSourceIdshould be nullable. This is an important design decision that affects API contracts and error handling.Consider the business logic: Can a subscription item exist without a payment source (e.g., for free plans)? If so, make it nullable and ensure proper handling throughout the codebase.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (21)
packages/clerk-js/src/core/modules/commerce/CommerceBilling.ts(5 hunks)packages/clerk-js/src/core/resources/CommercePayment.ts(2 hunks)packages/clerk-js/src/core/resources/CommerceSubscription.ts(3 hunks)packages/clerk-js/src/core/resources/Organization.ts(3 hunks)packages/clerk-js/src/ui/components/PricingTable/PricingTable.tsx(2 hunks)packages/clerk-js/src/ui/components/SubscriptionDetails/__tests__/SubscriptionDetails.test.tsx(9 hunks)packages/clerk-js/src/ui/components/SubscriptionDetails/index.tsx(12 hunks)packages/clerk-js/src/ui/components/Subscriptions/SubscriptionsList.tsx(4 hunks)packages/clerk-js/src/ui/components/Subscriptions/badge.tsx(2 hunks)packages/clerk-js/src/ui/contexts/components/Plans.tsx(8 hunks)packages/shared/src/react/hooks/createCommerceHook.tsx(1 hunks)packages/shared/src/react/hooks/index.ts(1 hunks)packages/shared/src/react/hooks/useOrganization.tsx(5 hunks)packages/shared/src/react/hooks/usePaymentAttempts.tsx(1 hunks)packages/shared/src/react/hooks/usePaymentMethods.tsx(1 hunks)packages/shared/src/react/hooks/usePlans.tsx(1 hunks)packages/shared/src/react/hooks/useStatements.tsx(1 hunks)packages/shared/src/react/hooks/useSubscriptionItems.tsx(1 hunks)packages/types/src/commerce.ts(7 hunks)packages/types/src/json.ts(3 hunks)packages/types/src/organization.ts(2 hunks)
🧰 Additional context used
📓 Path-based instructions (16)
**/*.{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.tsxpackages/shared/src/react/hooks/index.tspackages/shared/src/react/hooks/usePlans.tsxpackages/shared/src/react/hooks/useStatements.tsxpackages/shared/src/react/hooks/usePaymentMethods.tsxpackages/types/src/organization.tspackages/shared/src/react/hooks/useOrganization.tsxpackages/clerk-js/src/ui/components/PricingTable/PricingTable.tsxpackages/clerk-js/src/ui/components/Subscriptions/SubscriptionsList.tsxpackages/clerk-js/src/core/resources/Organization.tspackages/clerk-js/src/ui/contexts/components/Plans.tsxpackages/clerk-js/src/core/resources/CommercePayment.tspackages/clerk-js/src/core/modules/commerce/CommerceBilling.tspackages/clerk-js/src/ui/components/SubscriptionDetails/__tests__/SubscriptionDetails.test.tsxpackages/clerk-js/src/ui/components/SubscriptionDetails/index.tsxpackages/shared/src/react/hooks/usePaymentAttempts.tsxpackages/types/src/json.tspackages/clerk-js/src/core/resources/CommerceSubscription.tspackages/types/src/commerce.tspackages/clerk-js/src/ui/components/Subscriptions/badge.tsxpackages/shared/src/react/hooks/useSubscriptionItems.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.tsxpackages/shared/src/react/hooks/index.tspackages/shared/src/react/hooks/usePlans.tsxpackages/shared/src/react/hooks/useStatements.tsxpackages/shared/src/react/hooks/usePaymentMethods.tsxpackages/types/src/organization.tspackages/shared/src/react/hooks/useOrganization.tsxpackages/clerk-js/src/ui/components/PricingTable/PricingTable.tsxpackages/clerk-js/src/ui/components/Subscriptions/SubscriptionsList.tsxpackages/clerk-js/src/core/resources/Organization.tspackages/clerk-js/src/ui/contexts/components/Plans.tsxpackages/clerk-js/src/core/resources/CommercePayment.tspackages/clerk-js/src/core/modules/commerce/CommerceBilling.tspackages/clerk-js/src/ui/components/SubscriptionDetails/__tests__/SubscriptionDetails.test.tsxpackages/clerk-js/src/ui/components/SubscriptionDetails/index.tsxpackages/shared/src/react/hooks/usePaymentAttempts.tsxpackages/types/src/json.tspackages/clerk-js/src/core/resources/CommerceSubscription.tspackages/types/src/commerce.tspackages/clerk-js/src/ui/components/Subscriptions/badge.tsxpackages/shared/src/react/hooks/useSubscriptionItems.tsx
packages/**/*.{ts,tsx}
📄 CodeRabbit Inference Engine (.cursor/rules/development.mdc)
TypeScript is required for all packages
Files:
packages/shared/src/react/hooks/createCommerceHook.tsxpackages/shared/src/react/hooks/index.tspackages/shared/src/react/hooks/usePlans.tsxpackages/shared/src/react/hooks/useStatements.tsxpackages/shared/src/react/hooks/usePaymentMethods.tsxpackages/types/src/organization.tspackages/shared/src/react/hooks/useOrganization.tsxpackages/clerk-js/src/ui/components/PricingTable/PricingTable.tsxpackages/clerk-js/src/ui/components/Subscriptions/SubscriptionsList.tsxpackages/clerk-js/src/core/resources/Organization.tspackages/clerk-js/src/ui/contexts/components/Plans.tsxpackages/clerk-js/src/core/resources/CommercePayment.tspackages/clerk-js/src/core/modules/commerce/CommerceBilling.tspackages/clerk-js/src/ui/components/SubscriptionDetails/__tests__/SubscriptionDetails.test.tsxpackages/clerk-js/src/ui/components/SubscriptionDetails/index.tsxpackages/shared/src/react/hooks/usePaymentAttempts.tsxpackages/types/src/json.tspackages/clerk-js/src/core/resources/CommerceSubscription.tspackages/types/src/commerce.tspackages/clerk-js/src/ui/components/Subscriptions/badge.tsxpackages/shared/src/react/hooks/useSubscriptionItems.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.tsxpackages/shared/src/react/hooks/index.tspackages/shared/src/react/hooks/usePlans.tsxpackages/shared/src/react/hooks/useStatements.tsxpackages/shared/src/react/hooks/usePaymentMethods.tsxpackages/types/src/organization.tspackages/shared/src/react/hooks/useOrganization.tsxpackages/clerk-js/src/ui/components/PricingTable/PricingTable.tsxpackages/clerk-js/src/ui/components/Subscriptions/SubscriptionsList.tsxpackages/clerk-js/src/core/resources/Organization.tspackages/clerk-js/src/ui/contexts/components/Plans.tsxpackages/clerk-js/src/core/resources/CommercePayment.tspackages/clerk-js/src/core/modules/commerce/CommerceBilling.tspackages/clerk-js/src/ui/components/SubscriptionDetails/__tests__/SubscriptionDetails.test.tsxpackages/clerk-js/src/ui/components/SubscriptionDetails/index.tsxpackages/shared/src/react/hooks/usePaymentAttempts.tsxpackages/types/src/json.tspackages/clerk-js/src/core/resources/CommerceSubscription.tspackages/types/src/commerce.tspackages/clerk-js/src/ui/components/Subscriptions/badge.tsxpackages/shared/src/react/hooks/useSubscriptionItems.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.tsxpackages/shared/src/react/hooks/index.tspackages/shared/src/react/hooks/usePlans.tsxpackages/shared/src/react/hooks/useStatements.tsxpackages/shared/src/react/hooks/usePaymentMethods.tsxpackages/types/src/organization.tspackages/shared/src/react/hooks/useOrganization.tsxpackages/clerk-js/src/ui/components/PricingTable/PricingTable.tsxpackages/clerk-js/src/ui/components/Subscriptions/SubscriptionsList.tsxpackages/clerk-js/src/core/resources/Organization.tspackages/clerk-js/src/ui/contexts/components/Plans.tsxpackages/clerk-js/src/core/resources/CommercePayment.tspackages/clerk-js/src/core/modules/commerce/CommerceBilling.tspackages/clerk-js/src/ui/components/SubscriptionDetails/__tests__/SubscriptionDetails.test.tsxpackages/clerk-js/src/ui/components/SubscriptionDetails/index.tsxpackages/shared/src/react/hooks/usePaymentAttempts.tsxpackages/types/src/json.tspackages/clerk-js/src/core/resources/CommerceSubscription.tspackages/types/src/commerce.tspackages/clerk-js/src/ui/components/Subscriptions/badge.tsxpackages/shared/src/react/hooks/useSubscriptionItems.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.tsxpackages/shared/src/react/hooks/usePlans.tsxpackages/shared/src/react/hooks/useStatements.tsxpackages/shared/src/react/hooks/usePaymentMethods.tsxpackages/shared/src/react/hooks/useOrganization.tsxpackages/clerk-js/src/ui/components/PricingTable/PricingTable.tsxpackages/clerk-js/src/ui/components/Subscriptions/SubscriptionsList.tsxpackages/clerk-js/src/ui/contexts/components/Plans.tsxpackages/clerk-js/src/ui/components/SubscriptionDetails/__tests__/SubscriptionDetails.test.tsxpackages/clerk-js/src/ui/components/SubscriptionDetails/index.tsxpackages/shared/src/react/hooks/usePaymentAttempts.tsxpackages/clerk-js/src/ui/components/Subscriptions/badge.tsxpackages/shared/src/react/hooks/useSubscriptionItems.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.tsxpackages/shared/src/react/hooks/index.tspackages/shared/src/react/hooks/usePlans.tsxpackages/shared/src/react/hooks/useStatements.tsxpackages/shared/src/react/hooks/usePaymentMethods.tsxpackages/types/src/organization.tspackages/shared/src/react/hooks/useOrganization.tsxpackages/clerk-js/src/ui/components/PricingTable/PricingTable.tsxpackages/clerk-js/src/ui/components/Subscriptions/SubscriptionsList.tsxpackages/clerk-js/src/core/resources/Organization.tspackages/clerk-js/src/ui/contexts/components/Plans.tsxpackages/clerk-js/src/core/resources/CommercePayment.tspackages/clerk-js/src/core/modules/commerce/CommerceBilling.tspackages/clerk-js/src/ui/components/SubscriptionDetails/__tests__/SubscriptionDetails.test.tsxpackages/clerk-js/src/ui/components/SubscriptionDetails/index.tsxpackages/shared/src/react/hooks/usePaymentAttempts.tsxpackages/types/src/json.tspackages/clerk-js/src/core/resources/CommerceSubscription.tspackages/types/src/commerce.tspackages/clerk-js/src/ui/components/Subscriptions/badge.tsxpackages/shared/src/react/hooks/useSubscriptionItems.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.tsxpackages/shared/src/react/hooks/usePlans.tsxpackages/shared/src/react/hooks/useStatements.tsxpackages/shared/src/react/hooks/usePaymentMethods.tsxpackages/shared/src/react/hooks/useOrganization.tsxpackages/clerk-js/src/ui/components/PricingTable/PricingTable.tsxpackages/clerk-js/src/ui/components/Subscriptions/SubscriptionsList.tsxpackages/clerk-js/src/ui/contexts/components/Plans.tsxpackages/clerk-js/src/ui/components/SubscriptionDetails/__tests__/SubscriptionDetails.test.tsxpackages/clerk-js/src/ui/components/SubscriptionDetails/index.tsxpackages/shared/src/react/hooks/usePaymentAttempts.tsxpackages/clerk-js/src/ui/components/Subscriptions/badge.tsxpackages/shared/src/react/hooks/useSubscriptionItems.tsx
**/*
⚙️ CodeRabbit Configuration File
**/*: If there are no tests added or modified as part of the PR, please suggest that tests be added to cover the changes.Whenever reviewing a pull request, if there are any changes that could impact security, always tag
clerk/securityin the PR.Security-impacting changes include, but are not limited to:
- Changes to authentication logic or mechanisms (e.g. login, session handling, token issuance)
- Any modification to access control, authorization checks, or role-based permissions
- Introduction or modification of hashing algorithms, signature verification, or cryptographic primitives
- Handling of sensitive data (e.g. passwords, tokens, secrets, PII)
- Integration with external identity providers (e.g. SSO, OAuth, OpenID Connect)
- Modifications to security headers, cookie flags, CORS policies, or CSRF protections
- Bypass mechanisms (e.g. feature flags, testing overrides) that could weaken protections
- Changes to rate limiting, abuse prevention, or input validation
If you're unsure whether a change is security-relevant, err on the side of caution and tag
clerk/security.Any time that you tag
clerk/security, please do so explicitly in a code comment, rather than within a collapsed section in a coderabbit comment, such as the "recent review details" section. If you do use the team name in any thinking or non-direct-code-comment content, it can be referred to as "clerk security team" to avoid accidentally printing the tag which sends a notification to the team.
Files:
packages/shared/src/react/hooks/createCommerceHook.tsxpackages/shared/src/react/hooks/index.tspackages/shared/src/react/hooks/usePlans.tsxpackages/shared/src/react/hooks/useStatements.tsxpackages/shared/src/react/hooks/usePaymentMethods.tsxpackages/types/src/organization.tspackages/shared/src/react/hooks/useOrganization.tsxpackages/clerk-js/src/ui/components/PricingTable/PricingTable.tsxpackages/clerk-js/src/ui/components/Subscriptions/SubscriptionsList.tsxpackages/clerk-js/src/core/resources/Organization.tspackages/clerk-js/src/ui/contexts/components/Plans.tsxpackages/clerk-js/src/core/resources/CommercePayment.tspackages/clerk-js/src/core/modules/commerce/CommerceBilling.tspackages/clerk-js/src/ui/components/SubscriptionDetails/__tests__/SubscriptionDetails.test.tsxpackages/clerk-js/src/ui/components/SubscriptionDetails/index.tsxpackages/shared/src/react/hooks/usePaymentAttempts.tsxpackages/types/src/json.tspackages/clerk-js/src/core/resources/CommerceSubscription.tspackages/types/src/commerce.tspackages/clerk-js/src/ui/components/Subscriptions/badge.tsxpackages/shared/src/react/hooks/useSubscriptionItems.tsx
packages/**/index.{js,ts}
📄 CodeRabbit Inference Engine (.cursor/rules/development.mdc)
Use tree-shaking friendly exports
Files:
packages/shared/src/react/hooks/index.ts
**/index.ts
📄 CodeRabbit Inference Engine (.cursor/rules/react.mdc)
Use index.ts files for clean imports but avoid deep barrel exports
Avoid barrel files (index.ts re-exports) as they can cause circular dependencies
Files:
packages/shared/src/react/hooks/index.ts
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/PricingTable/PricingTable.tsxpackages/clerk-js/src/ui/components/Subscriptions/SubscriptionsList.tsxpackages/clerk-js/src/ui/contexts/components/Plans.tsxpackages/clerk-js/src/ui/components/SubscriptionDetails/__tests__/SubscriptionDetails.test.tsxpackages/clerk-js/src/ui/components/SubscriptionDetails/index.tsxpackages/clerk-js/src/ui/components/Subscriptions/badge.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/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/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/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/SubscriptionDetails/__tests__/SubscriptionDetails.test.tsx
🧬 Code Graph Analysis (11)
packages/shared/src/react/hooks/createCommerceHook.tsx (2)
packages/types/src/resource.ts (1)
ClerkResource(8-21)packages/shared/src/react/types.ts (1)
PagesOrInfiniteOptions(124-144)
packages/types/src/organization.ts (2)
packages/types/src/commerce.ts (2)
GetSubscriptionsParams(914-914)CommerceSubscriptionItemResource(946-1079)packages/types/src/pagination.ts (1)
ClerkPaginatedResponse(21-30)
packages/clerk-js/src/ui/components/Subscriptions/SubscriptionsList.tsx (2)
packages/clerk-js/src/ui/contexts/components/Plans.tsx (1)
useSubscription(56-68)packages/shared/src/react/hooks/useSubscriptionItems.tsx (1)
useSubscription(20-50)
packages/clerk-js/src/core/resources/Organization.ts (5)
packages/types/src/pagination.ts (1)
ClerkPaginatedResponse(21-30)packages/types/src/commerce.ts (1)
CommerceSubscriptionItemResource(946-1079)packages/clerk-js/src/utils/convertPageToOffsetSearchParams.ts (1)
convertPageToOffsetSearchParams(4-16)packages/types/src/json.ts (1)
CommerceSubscriptionItemJSON(767-783)packages/clerk-js/src/core/resources/CommerceSubscription.ts (1)
CommerceSubscriptionItem(58-122)
packages/clerk-js/src/ui/contexts/components/Plans.tsx (4)
packages/shared/src/react/hooks/index.ts (1)
useSubscription(15-15)packages/shared/src/react/hooks/useSubscriptionItems.tsx (1)
useSubscription(20-50)packages/clerk-js/src/ui/contexts/components/SubscriberType.ts (1)
useSubscriberTypeContext(7-7)packages/types/src/commerce.ts (2)
CommercePlanResource(241-411)CommerceSubscriptionItemResource(946-1079)
packages/clerk-js/src/core/modules/commerce/CommerceBilling.ts (4)
packages/types/src/commerce.ts (4)
GetSubscriptionParams(924-926)CommerceSubscriptionResource(1089-1188)GetSubscriptionsParams(914-914)CommerceSubscriptionItemResource(946-1079)packages/clerk-js/src/core/resources/CommerceSubscription.ts (2)
CommerceSubscription(18-56)CommerceSubscriptionItem(58-122)packages/types/src/json.ts (2)
CommerceSubscriptionJSON(793-812)CommerceSubscriptionItemJSON(767-783)packages/types/src/pagination.ts (1)
ClerkPaginatedResponse(21-30)
packages/shared/src/react/hooks/usePaymentAttempts.tsx (3)
packages/clerk-js/src/ui/contexts/components/Plans.tsx (1)
usePaymentAttempts(35-43)packages/shared/src/react/hooks/createCommerceHook.tsx (1)
createCommercePaginatedHook(41-105)packages/types/src/commerce.ts (2)
CommercePaymentResource(712-796)GetPaymentAttemptsParams(806-806)
packages/types/src/json.ts (2)
packages/backend/src/api/resources/JSON.ts (1)
ClerkResourceJSON(70-79)packages/types/src/commerce.ts (1)
CommerceSubscriptionStatus(111-111)
packages/clerk-js/src/core/resources/CommerceSubscription.ts (2)
packages/types/src/commerce.ts (3)
CommerceSubscriptionStatus(111-111)CommerceMoney(1198-1235)CommerceSubscriptionItemResource(946-1079)packages/types/src/json.ts (2)
CommerceSubscriptionJSON(793-812)CommerceSubscriptionItemJSON(767-783)
packages/types/src/commerce.ts (2)
packages/types/src/pagination.ts (1)
ClerkPaginatedResponse(21-30)packages/types/src/resource.ts (1)
ClerkResource(8-21)
packages/clerk-js/src/ui/components/Subscriptions/badge.tsx (1)
packages/types/src/commerce.ts (1)
CommerceSubscriptionItemResource(946-1079)
🪛 Biome (1.9.4)
packages/clerk-js/src/ui/components/SubscriptionDetails/__tests__/SubscriptionDetails.test.tsx
[error] 559-559: Don't focus the test.
The 'only' method is often used for debugging or during implementation. It should be removed before deploying to production.
Consider removing 'only' to ensure all tests are executed.
Unsafe fix: Remove focus from test.
(lint/suspicious/noFocusedTests)
⏰ 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). (1)
- GitHub Check: Integration Tests (tanstack-react-start, chrome)
🔇 Additional comments (45)
packages/clerk-js/src/ui/components/Subscriptions/badge.tsx (1)
1-1: LGTM: Type update aligns with subscription resource model refactor.The change from
CommerceSubscriptionResourcetoCommerceSubscriptionItemResourcecorrectly reflects the component's usage of individual subscription items rather than aggregate subscriptions. The component logic remains unchanged and continues to access thestatusproperty which is available on the updated resource type.Also applies to: 22-22
packages/shared/src/react/hooks/index.ts (1)
15-15: No changes needed:useSubscriptionexport verifiedI confirmed that
packages/shared/src/react/hooks/useSubscriptionItems.tsxexportsuseSubscription(and no longer exportsuseSubscriptionItems), so the aliased re-exportexport { useSubscription as __experimental_useSubscription } from './useSubscriptionItems';is correct. Proceed as is.
packages/shared/src/react/hooks/createCommerceHook.tsx (1)
41-41: LGTM: Function rename improves clarity.Renaming
createCommerceHooktocreateCommercePaginatedHookbetter reflects the function's purpose of creating paginated commerce hooks. The implementation remains unchanged, maintaining backward compatibility while improving code readability and documentation accuracy.packages/shared/src/react/hooks/usePlans.tsx (1)
4-4: LGTM: Consistent with hook factory rename.The update to use
createCommercePaginatedHookis consistent with the factory function rename and maintains the same functionality while making the pagination support more explicit in the hook creation.Also applies to: 9-9
packages/shared/src/react/hooks/useStatements.tsx (1)
4-4: LGTM: Consistent with hook factory rename.The update to use
createCommercePaginatedHookfollows the same pattern as other commerce hooks and maintains consistency with the factory function rename. The functionality remains unchanged while making pagination support more explicit.Also applies to: 9-9
packages/shared/src/react/hooks/usePaymentAttempts.tsx (2)
4-4: LGTM: Import updated for pagination support.The import change from
createCommerceHooktocreateCommercePaginatedHookis correct and aligns with the broader refactor to add pagination support to commerce hooks.
9-16: LGTM: Hook creation updated for pagination.The migration to
createCommercePaginatedHookis correct. This hook now supports pagination and requires aforparameter (organization or user scope), which is properly provided by the wrapper hook inpackages/clerk-js/src/ui/contexts/components/Plans.tsx(lines 34-42).packages/shared/src/react/hooks/usePaymentMethods.tsx (2)
4-4: LGTM: Import updated for pagination support.Consistent with other commerce hooks being migrated to use
createCommercePaginatedHook.
9-21: LGTM: Hook creation updated for pagination.The migration to
createCommercePaginatedHookis correctly implemented and follows the same pattern as other commerce hooks in this refactor.packages/types/src/organization.ts (2)
1-5: LGTM: Import updated for new subscription item type.The addition of
CommerceSubscriptionItemResourceimport is consistent with the refactor to distinguish between subscription items and aggregate subscriptions.
66-68: LGTM: Method signature updated to return subscription items.The change from
CommerceSubscriptionResourcetoCommerceSubscriptionItemResourcealigns with the broader refactor. The method continues to return a paginated response, maintaining the expected interface contract while updating to the new resource type.packages/clerk-js/src/ui/components/Subscriptions/SubscriptionsList.tsx (5)
1-1: LGTM: Added useMemo import for performance optimization.Good addition to support memoization of the sorted subscriptions array.
10-10: LGTM: Updated hook import for new subscription model.The change from
useSubscriptionstouseSubscriptionaligns with the refactor to handle subscription items instead of aggregate subscriptions.
44-44: LGTM: Updated destructuring for subscription items.Correctly destructures
subscriptionItemsfrom the newuseSubscriptionhook.
50-65: LGTM: Added memoization for sorted subscriptions.Good performance optimization by memoizing the sorted array. The sorting logic correctly prioritizes active subscriptions and depends on
subscriptionItemsfor proper memoization.
77-77: LGTM: Updated references to use subscriptionItems.All conditional checks and references have been correctly updated to use
subscriptionItemsinstead of the previoussubscriptionsarray.Also applies to: 199-199, 206-206
packages/clerk-js/src/ui/components/PricingTable/PricingTable.tsx (4)
5-5: LGTM: Updated import to use absolute path alias.Good consistency improvement using the absolute path alias instead of relative import.
7-7: LGTM: Updated hook import for new subscription model.Consistent with other components, changing from
useSubscriptionstouseSubscriptionto align with the subscription items refactor.
15-15: LGTM: Updated destructuring for subscription items.Correctly destructures
subscriptionItemsfrom the new hook.
21-36: LGTM: Updated useMemo logic for subscription items.The logic correctly adapts to use
subscriptionItemswhile maintaining the same business logic for determining the default plan period. The dependency array is properly updated to includesubscriptionItems.packages/shared/src/react/hooks/useOrganization.tsx (3)
4-4: LGTM: Import type updated consistently.The import change from
CommerceSubscriptionResourcetoCommerceSubscriptionItemResourcealigns with the broader refactor to distinguish between aggregate subscriptions and individual subscription items.
118-118: LGTM: Type annotations updated consistently.The
subscriptionsproperty type is correctly updated toCommerceSubscriptionItemResourceacross all union members of theUseOrganizationReturninterface, maintaining type consistency with the new subscription item model.Also applies to: 128-128, 151-151
468-468: LGTM: Generic type parameter correctly updated.The
usePagesOrInfinitehook's generic type parameter is properly updated toCommerceSubscriptionItemResource, ensuring type safety for the paginated subscription items response.packages/clerk-js/src/core/resources/Organization.ts (5)
5-6: LGTM: Import types updated for subscription item refactor.The imports are correctly updated from
CommerceSubscriptionJSONandCommerceSubscriptionResourceto their subscription item equivalents, supporting the new data model distinction.
35-35: LGTM: Internal import updated to match class rename.The import correctly changes from
CommerceSubscriptiontoCommerceSubscriptionItem, aligning with the refactored class structure.
238-238: LGTM: Method return type correctly updated.The
getSubscriptionsmethod return type is properly updated toPromise<ClerkPaginatedResponse<CommerceSubscriptionItemResource>>, maintaining type safety with the new subscription item model.
245-245: LGTM: Response type cast updated for subscription items.The type cast correctly changes to
CommerceSubscriptionItemJSON, ensuring the API response is properly typed for the new subscription item JSON format.
249-249: LGTM: Instance creation updated to use subscription item class.The mapping correctly creates
CommerceSubscriptionIteminstances, ensuring consistency with the method's return type and the new subscription item model.packages/clerk-js/src/ui/components/SubscriptionDetails/__tests__/SubscriptionDetails.test.tsx (1)
36-79: LGTM: Test mocks consistently updated for new subscription API.The test mocks are properly updated from
getSubscriptionstogetSubscriptionwith the new data structure. The single subscription object now includes comprehensive fields (activeAt,createdAt,nextPayment, etc.) and containssubscriptionItemsarray, which aligns with the API refactor from paginated subscription lists to subscription objects containing subscription items.Also applies to: 129-172, 222-265, 345-384, 485-523, 566-610, 699-714, 786-801, 862-890
packages/clerk-js/src/ui/contexts/components/Plans.tsx (8)
6-6: LGTM: Import and type updates align with subscription refactor.The hook import changes from
__experimental_useSubscriptionItemsto__experimental_useSubscription, and the type changes fromCommerceSubscriptionResourcetoCommerceSubscriptionItemResource, both consistent with the new subscription item model.Also applies to: 13-13
56-68: LGTM: Hook implementation improved for new subscription model.The
useSubscriptionhook correctly fetches a single subscription and extractssubscriptionItemsusinguseMemo. The return structure provides both the subscription data and subscription items, maintaining compatibility while adapting to the new API structure.
108-108: LGTM: Destructuring updated for new hook return structure.The destructuring correctly changes from
subscriptionstosubscriptionItems, aligning with the updated hook return structure.
129-130: LGTM: Logic consistently updated to work with subscription items.All references to
subscriptionsare properly updated tosubscriptionItemsthroughout the callback functions and their dependencies, maintaining the existing business logic while adapting to the new data structure.Also applies to: 135-135, 137-137, 143-143, 145-145
175-175: LGTM: Type annotations updated for subscription items.The function parameter types are correctly updated from
CommerceSubscriptionResourcetoCommerceSubscriptionItemResource, maintaining type safety with the new subscription item model.Also applies to: 192-192
245-245: LGTM: Filtering logic updated to use subscription items.The filtering logic correctly changes to use
subscriptionItemsinstead ofsubscriptions, maintaining the business logic while working with the new data structure.
259-259: LGTM: Memoization dependency correctly updated.The
useMemodependency array is properly updated fromsubscriptionstosubscriptionItems, ensuring correct memoization behavior with the new data structure.
262-262: LGTM: Function parameter type updated for subscription items.The
captionForSubscriptionfunction parameter type is correctly updated toCommerceSubscriptionItemResource, maintaining type consistency with the new subscription item model.packages/clerk-js/src/core/resources/CommercePayment.ts (4)
6-6: LGTM: Import types updated for resource consistency.The imports are correctly updated to include
CommercePaymentSourceResourceand change toCommerceSubscriptionItemResource, aligning with the new resource type system.Also applies to: 8-8
13-13: LGTM: Internal import updated to match class rename.The internal import correctly changes from
CommerceSubscriptiontoCommerceSubscriptionItem, consistent with the class rename pattern throughout the codebase.
21-21: LGTM: Excellent backward-compatible property transition.The approach maintains the deprecated
subscriptionproperty while introducing the newsubscriptionItemproperty with proper typing. This allows existing code to continue functioning while providing a clear migration path to the semantically correct property name.Also applies to: 22-26
46-47: LGTM: Properties populated to support both old and new usage.Both
subscriptionandsubscriptionItemproperties are correctly populated withCommerceSubscriptionIteminstances, ensuring backward compatibility while supporting the new property naming convention. The use of different JSON properties (data.subscriptionvsdata.subscription_item) suggests proper API support for the transition.packages/types/src/commerce.ts (4)
760-777: Good deprecation pattern.The deprecation of the
subscriptionproperty while introducingsubscriptionItemfollows good backward compatibility practices. Both properties now correctly use theCommerceSubscriptionItemResourcetype, maintaining consistency with the new type hierarchy.
916-926: LGTM - Well-defined parameter type.The
GetSubscriptionParamstype is appropriately designed for fetching a single subscription with optional organization scoping, following established patterns in the codebase.
946-1079: Well-structured subscription item interface.The interface provides comprehensive subscription item details with good backward compatibility through deprecated timestamp properties. The deprecation pattern using both numeric timestamps and Date objects is well-implemented.
1081-1188: Excellent aggregate subscription interface design.The new
CommerceSubscriptionResourceinterface provides a clean separation between aggregate subscription metadata and individual subscription items. Key strengths:
- Logical hierarchy with
subscriptionItemsarray containing individual items- Appropriate status restriction to
'active' | 'past_due'for aggregate level- Consistent use of
Dateobjects throughout- Well-documented business logic (e.g., pastDueAt population when items are past due)
| periodStart!: number; | ||
| periodEnd!: number; | ||
| canceledAt!: number | null; | ||
| //TODO(@COMMERCE): Why can this be undefined ? |
There was a problem hiding this comment.
💡 Verification agent
🧩 Analysis chain
Address TODO comment about undefined amount
The TODO raises a valid concern about why amount can be undefined. This should be investigated and resolved.
🏁 Script executed:
#!/bin/bash
# Search for usage of CommerceSubscriptionItem to understand when amount might be undefined
ast-grep --pattern 'amount' | rg -B5 -A5 "CommerceSubscriptionItem"
# Check if there are any subscription items without amount in the codebase
rg -A10 "amount.*undefined|amount.*null" --type tsLength of output: 140215
🏁 Script executed:
#!/bin/bash
# Display the first 200 lines of CommerceSubscription.ts to inspect the class signature and constructor
sed -n '1,200p' packages/clerk-js/src/core/resources/CommerceSubscription.tsLength of output: 3948
🏁 Script executed:
#!/bin/bash
# List immediate subdirectories under packages
ls -1 packagesLength of output: 234
🏁 Script executed:
#!/bin/bash
# List files in the types package
ls -1 packages/types
# Search for CommerceSubscriptionItemJSON in the types definitions
rg -n "export interface CommerceSubscriptionItemJSON" -n packages/typesLength of output: 325
🏁 Script executed:
#!/bin/bash
# Show CommerceSubscriptionItemJSON interface definition
sed -n '760,840p' packages/types/src/json.tsLength of output: 2839
Remove TODO and document optional amount
The CommerceSubscriptionItemJSON.amount field is defined as optional in the API types (amount?: CommerceMoneyJSON), so it can legitimately be undefined (for example, on free‐plan or credit‐only subscription items). Remove the TODO and replace it with a clear explanatory comment:
export class CommerceSubscriptionItem extends BaseResource implements CommerceSubscriptionItemResource {
// …
- //TODO(@COMMERCE): Why can this be undefined ?
+ // `amount` is optional per API spec (e.g., free‐plan or credit‐only items)
amount?: CommerceMoney;
// …
}📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| //TODO(@COMMERCE): Why can this be undefined ? | |
| export class CommerceSubscriptionItem extends BaseResource implements CommerceSubscriptionItemResource { | |
| // … | |
| // `amount` is optional per API spec (e.g., free‐plan or credit‐only items) | |
| amount?: CommerceMoney; | |
| // … | |
| } |
🤖 Prompt for AI Agents
In packages/clerk-js/src/core/resources/CommerceSubscription.ts at line 72,
remove the TODO comment questioning why the amount can be undefined. Instead,
add a clear comment explaining that the CommerceSubscriptionItemJSON.amount
field is optional as per the API types and can be undefined for cases like
free-plan or credit-only subscription items.
packages/clerk-js/src/ui/components/SubscriptionDetails/__tests__/SubscriptionDetails.test.tsx
Outdated
Show resolved
Hide resolved
📝 WalkthroughWalkthroughThis change set introduces a clear separation between "subscription" and "subscription item" concepts across the commerce-related modules, types, hooks, and UI components. The primary API for fetching subscriptions now returns a single, richer Estimated code review effort4 (~90 minutes) This is a broad, multi-layered refactor affecting type definitions, backend API contracts, hook implementations, UI components, and tests. The changes are medium-to-high complexity due to the need to ensure consistency and correctness across data models, API boundaries, and user-facing components, with careful attention required to verify that the new subscription hierarchy is correctly handled throughout the codebase. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
There was a problem hiding this comment.
Actionable comments posted: 10
🔭 Outside diff range comments (2)
packages/types/src/json.ts (1)
767-783: Consider adding deprecation notice for renamed interfaceThe renaming of
CommerceSubscriptionJSONtoCommerceSubscriptionItemJSONis a breaking change that could affect existing consumers.Consider adding a deprecated type alias for backward compatibility:
/** * @deprecated Use CommerceSubscriptionItemJSON instead */ export type CommerceSubscriptionJSON_Legacy = CommerceSubscriptionItemJSON;This would provide a migration path for existing code while clearly indicating the preferred new type.
Also applies to: 785-813
packages/types/src/commerce.ts (1)
760-777: Improve deprecation notice and document breaking changeThe
subscriptionproperty deprecation should guide users to the replacement property. Also, this is a breaking change that should be highlighted.Update the deprecation notice to be more helpful:
/** - * @deprecated + * @deprecated Use `subscriptionItem` instead. This property now returns CommerceSubscriptionItemResource instead of CommerceSubscriptionResource. * @experimental This is an experimental API for the Billing feature that is available under a public beta, and the API is subject to change.Note: This is a breaking change as the type of the
subscriptionproperty has changed fromCommerceSubscriptionResourcetoCommerceSubscriptionItemResource.
🧹 Nitpick comments (5)
packages/shared/src/react/hooks/index.ts (1)
15-15: Export change aligns with subscription refactor.The change from
useSubscriptionItemstouseSubscriptionis consistent with the broader refactor. However, consider renaming the source file fromuseSubscriptionItems.tsxtouseSubscription.tsxto match the exported function name and avoid confusion.packages/clerk-js/src/core/modules/commerce/CommerceBilling.ts (1)
52-52: Clarify or address the API inconsistency comment.The "Inconsistent API" comment lacks context about what makes this API inconsistent. Consider either:
- Expanding the comment to explain the specific inconsistency
- Creating a TODO with details about how to address it
- Filing an issue to track and resolve the inconsistency
This will help future developers understand the concern and potential next steps.
- // Inconsistent API + // TODO: This method doesn't follow the same pattern as other methods (e.g., no pagination support)packages/clerk-js/src/core/resources/CommerceSubscription.ts (1)
72-76: Address TODO comment about optional amount fieldThe TODO comment questions why
amountcan be undefined. This should be resolved before merging to ensure type safety and proper documentation.The optional
amountfield might be undefined for free plans or special subscription types. Would you like me to:
- Research the business logic to determine when amount is undefined
- Add proper type documentation explaining the cases
- Open an issue to track this technical debt?
packages/clerk-js/src/ui/components/SubscriptionDetails/index.tsx (1)
41-42: Consider moving helper function to a utilities moduleThe
isFreePlanhelper function could be useful across the codebase and might benefit from being in a shared utilities module.Consider moving to a shared location:
// In packages/clerk-js/src/ui/utils/commerce.ts export const isFreePlan = (plan: CommercePlanResource) => !plan.hasBaseFee;This would promote reusability across other commerce-related components.
packages/types/src/commerce.ts (1)
956-957: Address the TODO comment before mergingThere's an unresolved TODO comment about the nullability of
paymentSourceId. This should be clarified before the API is exposed.Would you like me to help determine whether
paymentSourceIdshould be nullable based on the usage patterns in the codebase, or create an issue to track this?
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (21)
packages/clerk-js/src/core/modules/commerce/CommerceBilling.ts(5 hunks)packages/clerk-js/src/core/resources/CommercePayment.ts(2 hunks)packages/clerk-js/src/core/resources/CommerceSubscription.ts(3 hunks)packages/clerk-js/src/core/resources/Organization.ts(3 hunks)packages/clerk-js/src/ui/components/PricingTable/PricingTable.tsx(2 hunks)packages/clerk-js/src/ui/components/SubscriptionDetails/__tests__/SubscriptionDetails.test.tsx(9 hunks)packages/clerk-js/src/ui/components/SubscriptionDetails/index.tsx(12 hunks)packages/clerk-js/src/ui/components/Subscriptions/SubscriptionsList.tsx(4 hunks)packages/clerk-js/src/ui/components/Subscriptions/badge.tsx(2 hunks)packages/clerk-js/src/ui/contexts/components/Plans.tsx(8 hunks)packages/shared/src/react/hooks/createCommerceHook.tsx(1 hunks)packages/shared/src/react/hooks/index.ts(1 hunks)packages/shared/src/react/hooks/useOrganization.tsx(5 hunks)packages/shared/src/react/hooks/usePaymentAttempts.tsx(1 hunks)packages/shared/src/react/hooks/usePaymentMethods.tsx(1 hunks)packages/shared/src/react/hooks/usePlans.tsx(1 hunks)packages/shared/src/react/hooks/useStatements.tsx(1 hunks)packages/shared/src/react/hooks/useSubscriptionItems.tsx(1 hunks)packages/types/src/commerce.ts(7 hunks)packages/types/src/json.ts(3 hunks)packages/types/src/organization.ts(2 hunks)
🧰 Additional context used
📓 Path-based instructions (16)
**/*.{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.tsxpackages/shared/src/react/hooks/useStatements.tsxpackages/shared/src/react/hooks/usePaymentAttempts.tsxpackages/clerk-js/src/ui/components/Subscriptions/badge.tsxpackages/shared/src/react/hooks/usePlans.tsxpackages/clerk-js/src/ui/components/SubscriptionDetails/__tests__/SubscriptionDetails.test.tsxpackages/clerk-js/src/ui/components/Subscriptions/SubscriptionsList.tsxpackages/shared/src/react/hooks/index.tspackages/clerk-js/src/core/resources/CommercePayment.tspackages/types/src/organization.tspackages/shared/src/react/hooks/useOrganization.tsxpackages/clerk-js/src/core/resources/Organization.tspackages/clerk-js/src/ui/components/PricingTable/PricingTable.tsxpackages/shared/src/react/hooks/usePaymentMethods.tsxpackages/clerk-js/src/core/modules/commerce/CommerceBilling.tspackages/clerk-js/src/ui/contexts/components/Plans.tsxpackages/shared/src/react/hooks/useSubscriptionItems.tsxpackages/clerk-js/src/core/resources/CommerceSubscription.tspackages/clerk-js/src/ui/components/SubscriptionDetails/index.tsxpackages/types/src/commerce.tspackages/types/src/json.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/shared/src/react/hooks/createCommerceHook.tsxpackages/shared/src/react/hooks/useStatements.tsxpackages/shared/src/react/hooks/usePaymentAttempts.tsxpackages/clerk-js/src/ui/components/Subscriptions/badge.tsxpackages/shared/src/react/hooks/usePlans.tsxpackages/clerk-js/src/ui/components/SubscriptionDetails/__tests__/SubscriptionDetails.test.tsxpackages/clerk-js/src/ui/components/Subscriptions/SubscriptionsList.tsxpackages/shared/src/react/hooks/index.tspackages/clerk-js/src/core/resources/CommercePayment.tspackages/types/src/organization.tspackages/shared/src/react/hooks/useOrganization.tsxpackages/clerk-js/src/core/resources/Organization.tspackages/clerk-js/src/ui/components/PricingTable/PricingTable.tsxpackages/shared/src/react/hooks/usePaymentMethods.tsxpackages/clerk-js/src/core/modules/commerce/CommerceBilling.tspackages/clerk-js/src/ui/contexts/components/Plans.tsxpackages/shared/src/react/hooks/useSubscriptionItems.tsxpackages/clerk-js/src/core/resources/CommerceSubscription.tspackages/clerk-js/src/ui/components/SubscriptionDetails/index.tsxpackages/types/src/commerce.tspackages/types/src/json.ts
packages/**/*.{ts,tsx}
📄 CodeRabbit Inference Engine (.cursor/rules/development.mdc)
TypeScript is required for all packages
Files:
packages/shared/src/react/hooks/createCommerceHook.tsxpackages/shared/src/react/hooks/useStatements.tsxpackages/shared/src/react/hooks/usePaymentAttempts.tsxpackages/clerk-js/src/ui/components/Subscriptions/badge.tsxpackages/shared/src/react/hooks/usePlans.tsxpackages/clerk-js/src/ui/components/SubscriptionDetails/__tests__/SubscriptionDetails.test.tsxpackages/clerk-js/src/ui/components/Subscriptions/SubscriptionsList.tsxpackages/shared/src/react/hooks/index.tspackages/clerk-js/src/core/resources/CommercePayment.tspackages/types/src/organization.tspackages/shared/src/react/hooks/useOrganization.tsxpackages/clerk-js/src/core/resources/Organization.tspackages/clerk-js/src/ui/components/PricingTable/PricingTable.tsxpackages/shared/src/react/hooks/usePaymentMethods.tsxpackages/clerk-js/src/core/modules/commerce/CommerceBilling.tspackages/clerk-js/src/ui/contexts/components/Plans.tsxpackages/shared/src/react/hooks/useSubscriptionItems.tsxpackages/clerk-js/src/core/resources/CommerceSubscription.tspackages/clerk-js/src/ui/components/SubscriptionDetails/index.tsxpackages/types/src/commerce.tspackages/types/src/json.ts
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.tsxpackages/shared/src/react/hooks/useStatements.tsxpackages/shared/src/react/hooks/usePaymentAttempts.tsxpackages/clerk-js/src/ui/components/Subscriptions/badge.tsxpackages/shared/src/react/hooks/usePlans.tsxpackages/clerk-js/src/ui/components/SubscriptionDetails/__tests__/SubscriptionDetails.test.tsxpackages/clerk-js/src/ui/components/Subscriptions/SubscriptionsList.tsxpackages/shared/src/react/hooks/index.tspackages/clerk-js/src/core/resources/CommercePayment.tspackages/types/src/organization.tspackages/shared/src/react/hooks/useOrganization.tsxpackages/clerk-js/src/core/resources/Organization.tspackages/clerk-js/src/ui/components/PricingTable/PricingTable.tsxpackages/shared/src/react/hooks/usePaymentMethods.tsxpackages/clerk-js/src/core/modules/commerce/CommerceBilling.tspackages/clerk-js/src/ui/contexts/components/Plans.tsxpackages/shared/src/react/hooks/useSubscriptionItems.tsxpackages/clerk-js/src/core/resources/CommerceSubscription.tspackages/clerk-js/src/ui/components/SubscriptionDetails/index.tsxpackages/types/src/commerce.tspackages/types/src/json.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/shared/src/react/hooks/createCommerceHook.tsxpackages/shared/src/react/hooks/useStatements.tsxpackages/shared/src/react/hooks/usePaymentAttempts.tsxpackages/clerk-js/src/ui/components/Subscriptions/badge.tsxpackages/shared/src/react/hooks/usePlans.tsxpackages/clerk-js/src/ui/components/SubscriptionDetails/__tests__/SubscriptionDetails.test.tsxpackages/clerk-js/src/ui/components/Subscriptions/SubscriptionsList.tsxpackages/shared/src/react/hooks/index.tspackages/clerk-js/src/core/resources/CommercePayment.tspackages/types/src/organization.tspackages/shared/src/react/hooks/useOrganization.tsxpackages/clerk-js/src/core/resources/Organization.tspackages/clerk-js/src/ui/components/PricingTable/PricingTable.tsxpackages/shared/src/react/hooks/usePaymentMethods.tsxpackages/clerk-js/src/core/modules/commerce/CommerceBilling.tspackages/clerk-js/src/ui/contexts/components/Plans.tsxpackages/shared/src/react/hooks/useSubscriptionItems.tsxpackages/clerk-js/src/core/resources/CommerceSubscription.tspackages/clerk-js/src/ui/components/SubscriptionDetails/index.tsxpackages/types/src/commerce.tspackages/types/src/json.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/shared/src/react/hooks/createCommerceHook.tsxpackages/shared/src/react/hooks/useStatements.tsxpackages/shared/src/react/hooks/usePaymentAttempts.tsxpackages/clerk-js/src/ui/components/Subscriptions/badge.tsxpackages/shared/src/react/hooks/usePlans.tsxpackages/clerk-js/src/ui/components/SubscriptionDetails/__tests__/SubscriptionDetails.test.tsxpackages/clerk-js/src/ui/components/Subscriptions/SubscriptionsList.tsxpackages/shared/src/react/hooks/useOrganization.tsxpackages/clerk-js/src/ui/components/PricingTable/PricingTable.tsxpackages/shared/src/react/hooks/usePaymentMethods.tsxpackages/clerk-js/src/ui/contexts/components/Plans.tsxpackages/shared/src/react/hooks/useSubscriptionItems.tsxpackages/clerk-js/src/ui/components/SubscriptionDetails/index.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.tsxpackages/shared/src/react/hooks/useStatements.tsxpackages/shared/src/react/hooks/usePaymentAttempts.tsxpackages/clerk-js/src/ui/components/Subscriptions/badge.tsxpackages/shared/src/react/hooks/usePlans.tsxpackages/clerk-js/src/ui/components/SubscriptionDetails/__tests__/SubscriptionDetails.test.tsxpackages/clerk-js/src/ui/components/Subscriptions/SubscriptionsList.tsxpackages/shared/src/react/hooks/index.tspackages/clerk-js/src/core/resources/CommercePayment.tspackages/types/src/organization.tspackages/shared/src/react/hooks/useOrganization.tsxpackages/clerk-js/src/core/resources/Organization.tspackages/clerk-js/src/ui/components/PricingTable/PricingTable.tsxpackages/shared/src/react/hooks/usePaymentMethods.tsxpackages/clerk-js/src/core/modules/commerce/CommerceBilling.tspackages/clerk-js/src/ui/contexts/components/Plans.tsxpackages/shared/src/react/hooks/useSubscriptionItems.tsxpackages/clerk-js/src/core/resources/CommerceSubscription.tspackages/clerk-js/src/ui/components/SubscriptionDetails/index.tsxpackages/types/src/commerce.tspackages/types/src/json.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/shared/src/react/hooks/createCommerceHook.tsxpackages/shared/src/react/hooks/useStatements.tsxpackages/shared/src/react/hooks/usePaymentAttempts.tsxpackages/clerk-js/src/ui/components/Subscriptions/badge.tsxpackages/shared/src/react/hooks/usePlans.tsxpackages/clerk-js/src/ui/components/SubscriptionDetails/__tests__/SubscriptionDetails.test.tsxpackages/clerk-js/src/ui/components/Subscriptions/SubscriptionsList.tsxpackages/shared/src/react/hooks/useOrganization.tsxpackages/clerk-js/src/ui/components/PricingTable/PricingTable.tsxpackages/shared/src/react/hooks/usePaymentMethods.tsxpackages/clerk-js/src/ui/contexts/components/Plans.tsxpackages/shared/src/react/hooks/useSubscriptionItems.tsxpackages/clerk-js/src/ui/components/SubscriptionDetails/index.tsx
**/*
⚙️ CodeRabbit Configuration File
**/*: If there are no tests added or modified as part of the PR, please suggest that tests be added to cover the changes.Whenever reviewing a pull request, if there are any changes that could impact security, always tag
clerk/securityin the PR.Security-impacting changes include, but are not limited to:
- Changes to authentication logic or mechanisms (e.g. login, session handling, token issuance)
- Any modification to access control, authorization checks, or role-based permissions
- Introduction or modification of hashing algorithms, signature verification, or cryptographic primitives
- Handling of sensitive data (e.g. passwords, tokens, secrets, PII)
- Integration with external identity providers (e.g. SSO, OAuth, OpenID Connect)
- Modifications to security headers, cookie flags, CORS policies, or CSRF protections
- Bypass mechanisms (e.g. feature flags, testing overrides) that could weaken protections
- Changes to rate limiting, abuse prevention, or input validation
If you're unsure whether a change is security-relevant, err on the side of caution and tag
clerk/security.Any time that you tag
clerk/security, please do so explicitly in a code comment, rather than within a collapsed section in a coderabbit comment, such as the "recent review details" section. If you do use the team name in any thinking or non-direct-code-comment content, it can be referred to as "clerk security team" to avoid accidentally printing the tag which sends a notification to the team.
Files:
packages/shared/src/react/hooks/createCommerceHook.tsxpackages/shared/src/react/hooks/useStatements.tsxpackages/shared/src/react/hooks/usePaymentAttempts.tsxpackages/clerk-js/src/ui/components/Subscriptions/badge.tsxpackages/shared/src/react/hooks/usePlans.tsxpackages/clerk-js/src/ui/components/SubscriptionDetails/__tests__/SubscriptionDetails.test.tsxpackages/clerk-js/src/ui/components/Subscriptions/SubscriptionsList.tsxpackages/shared/src/react/hooks/index.tspackages/clerk-js/src/core/resources/CommercePayment.tspackages/types/src/organization.tspackages/shared/src/react/hooks/useOrganization.tsxpackages/clerk-js/src/core/resources/Organization.tspackages/clerk-js/src/ui/components/PricingTable/PricingTable.tsxpackages/shared/src/react/hooks/usePaymentMethods.tsxpackages/clerk-js/src/core/modules/commerce/CommerceBilling.tspackages/clerk-js/src/ui/contexts/components/Plans.tsxpackages/shared/src/react/hooks/useSubscriptionItems.tsxpackages/clerk-js/src/core/resources/CommerceSubscription.tspackages/clerk-js/src/ui/components/SubscriptionDetails/index.tsxpackages/types/src/commerce.tspackages/types/src/json.ts
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/badge.tsxpackages/clerk-js/src/ui/components/SubscriptionDetails/__tests__/SubscriptionDetails.test.tsxpackages/clerk-js/src/ui/components/Subscriptions/SubscriptionsList.tsxpackages/clerk-js/src/ui/components/PricingTable/PricingTable.tsxpackages/clerk-js/src/ui/contexts/components/Plans.tsxpackages/clerk-js/src/ui/components/SubscriptionDetails/index.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/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/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/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/SubscriptionDetails/__tests__/SubscriptionDetails.test.tsx
packages/**/index.{js,ts}
📄 CodeRabbit Inference Engine (.cursor/rules/development.mdc)
Use tree-shaking friendly exports
Files:
packages/shared/src/react/hooks/index.ts
**/index.ts
📄 CodeRabbit Inference Engine (.cursor/rules/react.mdc)
Use index.ts files for clean imports but avoid deep barrel exports
Avoid barrel files (index.ts re-exports) as they can cause circular dependencies
Files:
packages/shared/src/react/hooks/index.ts
🧬 Code Graph Analysis (11)
packages/shared/src/react/hooks/createCommerceHook.tsx (2)
packages/types/src/resource.ts (1)
ClerkResource(8-21)packages/shared/src/react/types.ts (1)
PagesOrInfiniteOptions(124-144)
packages/shared/src/react/hooks/useStatements.tsx (3)
packages/clerk-js/src/ui/contexts/components/Plans.tsx (1)
useStatements(45-54)packages/shared/src/react/hooks/createCommerceHook.tsx (1)
createCommercePaginatedHook(41-105)packages/types/src/commerce.ts (2)
CommerceStatementResource(837-875)GetStatementsParams(816-816)
packages/clerk-js/src/ui/components/Subscriptions/badge.tsx (1)
packages/types/src/commerce.ts (1)
CommerceSubscriptionItemResource(946-1079)
packages/shared/src/react/hooks/usePlans.tsx (3)
packages/clerk-js/src/ui/contexts/components/Plans.tsx (1)
usePlans(70-80)packages/shared/src/react/hooks/createCommerceHook.tsx (1)
createCommercePaginatedHook(41-105)packages/types/src/commerce.ts (2)
CommercePlanResource(241-411)GetPlansParams(221-231)
packages/clerk-js/src/ui/components/Subscriptions/SubscriptionsList.tsx (2)
packages/clerk-js/src/ui/contexts/components/Plans.tsx (1)
useSubscription(56-68)packages/shared/src/react/hooks/useSubscriptionItems.tsx (1)
useSubscription(20-50)
packages/types/src/organization.ts (2)
packages/types/src/commerce.ts (2)
GetSubscriptionsParams(914-914)CommerceSubscriptionItemResource(946-1079)packages/types/src/pagination.ts (1)
ClerkPaginatedResponse(21-30)
packages/shared/src/react/hooks/useOrganization.tsx (3)
packages/shared/src/react/types.ts (1)
PaginatedResourcesWithDefault(83-85)packages/types/src/commerce.ts (1)
CommerceSubscriptionItemResource(946-1079)packages/types/src/pagination.ts (1)
ClerkPaginatedResponse(21-30)
packages/clerk-js/src/core/resources/Organization.ts (4)
packages/types/src/pagination.ts (1)
ClerkPaginatedResponse(21-30)packages/types/src/commerce.ts (1)
CommerceSubscriptionItemResource(946-1079)packages/types/src/json.ts (1)
CommerceSubscriptionItemJSON(767-783)packages/clerk-js/src/core/resources/CommerceSubscription.ts (1)
CommerceSubscriptionItem(58-122)
packages/shared/src/react/hooks/useSubscriptionItems.tsx (3)
packages/shared/src/react/hooks/index.ts (1)
useSubscription(15-15)packages/clerk-js/src/ui/contexts/components/Plans.tsx (1)
useSubscription(56-68)packages/react/src/isomorphicClerk.ts (1)
organization(673-679)
packages/types/src/commerce.ts (2)
packages/types/src/pagination.ts (1)
ClerkPaginatedResponse(21-30)packages/types/src/resource.ts (1)
ClerkResource(8-21)
packages/types/src/json.ts (2)
packages/backend/src/api/resources/JSON.ts (1)
ClerkResourceJSON(70-79)packages/types/src/commerce.ts (1)
CommerceSubscriptionStatus(111-111)
🪛 Biome (1.9.4)
packages/clerk-js/src/ui/components/SubscriptionDetails/__tests__/SubscriptionDetails.test.tsx
[error] 559-559: Don't focus the test.
The 'only' method is often used for debugging or during implementation. It should be removed before deploying to production.
Consider removing 'only' to ensure all tests are executed.
Unsafe fix: Remove focus from test.
(lint/suspicious/noFocusedTests)
🔇 Additional comments (35)
packages/clerk-js/src/ui/components/Subscriptions/badge.tsx (1)
1-1: LGTM! Type change aligns with commerce refactor.The update from
CommerceSubscriptionResourcetoCommerceSubscriptionItemResourceis consistent with the broader refactor distinguishing between subscriptions and subscription items. TheCommerceSubscriptionItemResourceinterface includes thestatusfield that the component uses, ensuring functionality is preserved.Also applies to: 22-22
packages/shared/src/react/hooks/createCommerceHook.tsx (1)
41-41: Excellent rename for clarity.Renaming
createCommerceHooktocreateCommercePaginatedHookbetter communicates the function's specific purpose of creating paginated commerce hooks. The comprehensive JSDoc documentation clearly explains the hook's capabilities and internal workings.packages/shared/src/react/hooks/usePlans.tsx (1)
4-4: LGTM! Consistent with hook factory rename.The updates to use
createCommercePaginatedHookare consistent with the factory function rename and maintain the same functionality for theusePlanshook.Also applies to: 9-9
packages/shared/src/react/hooks/usePaymentAttempts.tsx (1)
4-4: LGTM! Consistent with hook factory rename.The updates to use
createCommercePaginatedHookfollow the same pattern as other commerce hooks and maintain functionality while aligning with the factory function rename.Also applies to: 9-9
packages/shared/src/react/hooks/useStatements.tsx (2)
4-4: LGTM! Consistent with pagination refactor.The update to use
createCommercePaginatedHookaligns with the broader refactor to add pagination support to commerce hooks.
9-16: Hook configuration looks correct.The hook configuration remains unchanged which indicates this is a clean rename/refactor. The hook name, resource type, and fetcher logic are all appropriate for statements functionality.
packages/shared/src/react/hooks/usePaymentMethods.tsx (2)
4-4: LGTM! Consistent pagination refactor.The update to use
createCommercePaginatedHookmaintains consistency with other commerce hooks while adding pagination support.
9-21: Hook implementation remains solid.The logic for selecting between organization and user payment sources is preserved correctly. The hook configuration parameters are appropriate.
packages/clerk-js/src/ui/components/PricingTable/PricingTable.tsx (3)
5-5: Import path updated correctly.The change from relative to absolute import path for
Flowimproves consistency and maintainability.
7-7: Successfully migrated to new subscription data model.The transition from
useSubscriptionstouseSubscriptionand fromsubscriptionstosubscriptionItemsaligns with the architectural change where subscription items are now the primary data structure being consumed by UI components.Also applies to: 15-15
19-36: Logic correctly preserved in useMemo.The logic for determining
defaultPlanPeriodcorrectly usessubscriptionItemsand maintains the same business logic for finding upcoming and active subscriptions. The dependency array is properly updated.packages/types/src/organization.ts (2)
1-5: Import updated correctly for new subscription model.The addition of
CommerceSubscriptionItemResourceto the imports aligns with the method signature change below.
66-68: Method signature correctly updated for subscription items.The change from
CommerceSubscriptionResourcetoCommerceSubscriptionItemResourcereflects the architectural shift where organizations now directly retrieve subscription items rather than subscriptions containing items. This provides better consistency with the rest of the commerce API.packages/clerk-js/src/ui/components/Subscriptions/SubscriptionsList.tsx (4)
1-1: Good addition of useMemo import.The import is needed for the new sorting optimization below.
10-10: Successfully migrated to new subscription hook.The transition from
useSubscriptionstouseSubscriptionand the destructuring ofsubscriptionItemsaligns perfectly with the architectural changes in the subscription data model.Also applies to: 44-44
50-65: Excellent performance optimization with memoized sorting.The addition of
useMemofor sorting subscription items is a good performance improvement. The sorting logic correctly prioritizes active subscriptions, which enhances the user experience by showing the most relevant subscriptions first.
77-77: All subscription item references updated correctly.The component consistently uses
subscriptionItemsthroughout, maintaining the same conditional rendering and user interaction logic while working with the new data structure.Also applies to: 199-199, 206-206
packages/clerk-js/src/core/resources/Organization.ts (4)
5-6: Import updates align with the subscription refactor.The import changes correctly update from
CommerceSubscriptionJSONandCommerceSubscriptionResourceto their subscription item counterparts, which is consistent with the broader refactor that separates subscription items from subscriptions.
35-35: Internal import update is correct.The import change from
CommerceSubscriptiontoCommerceSubscriptionItemis necessary to support the updated method implementation that now instantiates subscription item resources.
238-238: Method signature correctly updated for subscription items.The return type change from
CommerceSubscriptionResourcetoCommerceSubscriptionItemResourceaccurately reflects the new data model where this method returns subscription items rather than full subscriptions.
245-249: Implementation correctly updated to use subscription item types.The changes properly update both the response type casting and object instantiation to use
CommerceSubscriptionItemJSONandCommerceSubscriptionItemrespectively, which is consistent with the method signature and the broader subscription refactor.packages/clerk-js/src/ui/components/SubscriptionDetails/__tests__/SubscriptionDetails.test.tsx (1)
36-79: Test mocks correctly updated for new subscription data model.The changes appropriately update the test to mock
getSubscriptioninstead ofgetSubscriptionsand structure the data as a single subscription object with nestedsubscriptionItems, which aligns with the new subscription/subscription-item hierarchy.packages/shared/src/react/hooks/useOrganization.tsx (2)
4-4: Import correctly updated for subscription item resource.The import change from
CommerceSubscriptionResourcetoCommerceSubscriptionItemResourceis necessary and consistent with the subscription refactor across the codebase.
118-151: Type definitions consistently updated throughout the hook.All type references have been properly updated from
CommerceSubscriptionResourcetoCommerceSubscriptionItemResource, maintaining type safety while adapting to the new subscription item data model. The changes are consistent across all hook states and the pagination implementation.Also applies to: 468-468
packages/clerk-js/src/core/resources/CommercePayment.ts (3)
6-8: Import and type updates are correct.The imports have been properly updated to use
CommerceSubscriptionItemResourceinstead ofCommerceSubscriptionResourceand include the necessary payment source types, which aligns with the subscription refactor and payment source type improvements.Also applies to: 13-13
21-26: Well-implemented deprecation strategy for subscription property.The approach correctly maintains backward compatibility by keeping the deprecated
subscriptionproperty while introducing the newsubscriptionItemproperty. The deprecation annotation helps developers migrate to the new property name, and the type updates improve type safety.
46-47: Implementation correctly handles both old and new subscription properties.The code properly instantiates
CommerceSubscriptionItemfor both the deprecatedsubscriptionproperty (fromdata.subscription) and the newsubscriptionItemproperty (fromdata.subscription_item), ensuring backward compatibility while supporting the new API structure.packages/clerk-js/src/core/modules/commerce/CommerceBilling.ts (3)
11-12: Import additions support new subscription item functionality.The new imports for subscription item types, parameters, and classes are necessary and correctly added to support the enhanced subscription handling with the separation of subscriptions and subscription items.
Also applies to: 19-19, 31-31
61-66: NewgetSubscriptionmethod correctly implemented.The method properly handles both user and organization contexts, fetches from the appropriate endpoints, and returns a single
CommerceSubscriptioninstance. This provides access to the higher-level subscription object containing subscription items, complementing the paginated subscription items fromgetSubscriptions.
70-70:getSubscriptionsmethod correctly updated to return subscription items.The method has been properly updated to return
CommerceSubscriptionItemResourceinstances instead of full subscriptions, with consistent updates to type casting and object instantiation. This creates a clear API separation between getting a single subscription (getSubscription) and getting paginated subscription items (getSubscriptions).Also applies to: 79-79, 83-83
packages/clerk-js/src/ui/contexts/components/Plans.tsx (1)
127-130: Consistent migration to CommerceSubscriptionItemResourceThe migration from
CommerceSubscriptionResourcetoCommerceSubscriptionItemResourcehas been applied consistently throughout the file. All helper functions and contexts have been updated to work with the new data structure.Also applies to: 142-146, 174-180, 244-246, 258-260, 262-278
packages/clerk-js/src/core/resources/CommerceSubscription.ts (1)
18-56: Well-structured implementation of CommerceSubscription classThe new
CommerceSubscriptionclass properly:
- Implements the resource interface
- Handles date conversions correctly
- Maps nested subscription items
- Provides null safety for optional fields
packages/clerk-js/src/ui/components/SubscriptionDetails/index.tsx (2)
88-107: Well-implemented type-safe hook with overloadsThe
useGuessableSubscriptionhook demonstrates excellent TypeScript practices:
- Conditional types based on options
- Proper error handling with throw option
- Clear return type definitions
437-547: Clean component extraction for SubscriptionCardThe extraction of
SubscriptionCardas a separate component improves:
- Code organization and readability
- Reusability
- Separation of concerns
The component properly handles all subscription states and edge cases.
packages/types/src/commerce.ts (1)
1081-1188: Well-designed subscription hierarchyThe new
CommerceSubscriptionResourceinterface is well-structured with:
- Clear hierarchical relationship containing multiple subscription items
- Appropriate use of TypeScript's
Extractutility for status constraints- Comprehensive property documentation
- Logical property types and nullability
packages/clerk-js/src/ui/components/SubscriptionDetails/__tests__/SubscriptionDetails.test.tsx
Outdated
Show resolved
Hide resolved
| user?.id | ||
| ? { | ||
| type: 'commerce-subscription', | ||
| userId: user?.id, | ||
| args: { orgId: params?.for === 'organization' ? organization?.id : undefined }, | ||
| } | ||
| : null, | ||
| ({ args }) => clerk.billing.getSubscription(args), | ||
| { | ||
| dedupingInterval: 1_000 * 60, | ||
| keepPreviousData: params?.keepPreviousData, | ||
| }, | ||
| ); | ||
|
|
There was a problem hiding this comment.
🛠️ Refactor suggestion
Handle potential null organization ID gracefully
When params?.for === 'organization' but organization?.id is undefined, the API call might fail or return unexpected results.
Consider adding validation to ensure organization ID exists when fetching organization subscriptions:
const swr = useSWR(
- user?.id
+ user?.id && (params?.for !== 'organization' || organization?.id)
? {
type: 'commerce-subscription',
userId: user?.id,
args: { orgId: params?.for === 'organization' ? organization?.id : undefined },
}
: null,
({ args }) => clerk.billing.getSubscription(args),This ensures the hook won't attempt to fetch when required data is missing.
📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| const swr = useSWR( | |
| user?.id | |
| ? { | |
| type: 'commerce-subscription', | |
| userId: user?.id, | |
| args: { orgId: params?.for === 'organization' ? organization?.id : undefined }, | |
| } | |
| : null, | |
| ({ args }) => clerk.billing.getSubscription(args), | |
| { | |
| dedupingInterval: 1_000 * 60, | |
| keepPreviousData: params?.keepPreviousData, | |
| }, | |
| ); | |
| const swr = useSWR( | |
| user?.id && (params?.for !== 'organization' || organization?.id) | |
| ? { | |
| type: 'commerce-subscription', | |
| userId: user?.id, | |
| args: { orgId: params?.for === 'organization' ? organization?.id : undefined }, | |
| } | |
| : null, | |
| ({ args }) => clerk.billing.getSubscription(args), | |
| { | |
| dedupingInterval: 1_000 * 60, | |
| keepPreviousData: params?.keepPreviousData, | |
| }, | |
| ); |
🤖 Prompt for AI Agents
In packages/shared/src/react/hooks/useSubscriptionItems.tsx around lines 26 to
39, the code currently attempts to fetch subscription data using an organization
ID that might be undefined if params.for is 'organization' but organization.id
is missing. To fix this, add a validation check to ensure organization.id exists
before making the API call; if it does not exist, return null or skip the fetch
to prevent failed or unexpected API calls.
# Conflicts: # packages/clerk-js/src/ui/components/Subscriptions/SubscriptionsList.tsx
packages/clerk-js/src/ui/components/PricingTable/PricingTable.tsx
Outdated
Show resolved
Hide resolved
Description
This PR replaces the paginated hooks
useSubscriptionItemsfor the non-paginateduseSubscription.Checklist
pnpm testruns as expected.pnpm buildruns as expected.Type of change
Summary by CodeRabbit
New Features
Improvements
Deprecations
Bug Fixes