Billing status fixes #177
Billing status fixes #177
Conversation
WalkthroughThis change removes asynchronous React Query fetching of billing status in several frontend components, replacing it with direct access to billing status from local state. The team status query logic is simplified to depend only on user authentication, and related conditional logic is streamlined. No exported entity signatures are changed. Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant UI_Component
participant LocalState
participant TeamStatusService
User->>UI_Component: Interacts (e.g., open menu)
UI_Component->>LocalState: Retrieve billingStatus
alt Authenticated user
UI_Component->>TeamStatusService: Fetch team status
TeamStatusService-->>UI_Component: Return team status
end
UI_Component-->>User: Render UI with billing and team info
Estimated code review effort🎯 2 (Simple) | ⏱️ ~8 minutes Possibly related PRs
Poem
Note ⚡️ Unit Test Generation is now available in beta!Learn more here, or try it out under "Finishing Touches" below. ✨ Finishing Touches
🧪 Generate unit tests
🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
Deploying maple with
|
| Latest commit: |
c5c1fb5
|
| Status: | ✅ Deploy successful! |
| Preview URL: | https://d84413f9.maple-ca8.pages.dev |
| Branch Preview URL: | https://billing-status-fixes.maple-ca8.pages.dev |
![greptile-apps[bot]](https://avatars.githubusercontent.com/in/867647?s=60&v=4){kind=small}
There was a problem hiding this comment.
Greptile Summary
This PR refactors the billing status management architecture across the frontend by centralizing data fetching and eliminating duplicate queries. The changes consolidate billing status fetching into a single component (BillingStatus) while having other components (AccountMenu, ModelSelector, and the index route) consume this data through the useLocalState() hook.
Key architectural changes include:
- BillingStatus component now serves as the primary data fetcher, removing the
enabledcondition that previously required user authentication before fetching - AccountMenu no longer independently fetches billing status via React Query, instead consuming it from local state
- ModelSelector removes its duplicate billing status query and relies on shared state
- Index route eliminates redundant billing status fetching since
BillingStatuscomponent handles this
The team status queries across components have been simplified and now properly depend on the centralized billing status. This pattern follows a single source of truth approach where billing data is fetched once and shared across components through the LocalStateContext, reducing API calls and preventing potential race conditions between multiple components fetching the same data simultaneously.
Confidence score: 2/5
- This PR introduces a critical issue where billing status will be fetched for unauthenticated users, potentially causing API errors
- Score reflects the architectural improvement of centralizing state management but is significantly lowered due to the authentication bypass in BillingStatus
- Pay close attention to
frontend/src/components/BillingStatus.tsxwhere the authentication check was removed from the billing query
4 files reviewed, 1 comment
| return await billingService.getTeamStatus(); | ||
| }, | ||
| enabled: isTeamPlan && !!os.auth.user && !!billingStatus | ||
| enabled: !!os.auth.user |
There was a problem hiding this comment.
style: This now fetches team status for all authenticated users, not just team plan users. Consider adding a condition to only fetch when needed to avoid unnecessary API calls.
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (1)
frontend/src/components/AccountMenu.tsx (1)
95-103: Consider team status query consistency.This component retains complex conditional logic for the team status query (
isTeamPlan && !!os.auth.user && !!billingStatus), whilefrontend/src/routes/index.tsx(lines 72-80) simplified it to just!!os.auth.user.Consider whether this inconsistency is intentional or if the query logic should be unified across components.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (4)
frontend/src/components/AccountMenu.tsx(1 hunks)frontend/src/components/BillingStatus.tsx(1 hunks)frontend/src/components/ModelSelector.tsx(1 hunks)frontend/src/routes/index.tsx(1 hunks)
🧰 Additional context used
📓 Path-based instructions (2)
**/*.{ts,tsx,js,jsx}
📄 CodeRabbit Inference Engine (CLAUDE.md)
**/*.{ts,tsx,js,jsx}: Use 2-space indentation, double quotes, and a 100-character line limit for formatting
Use camelCase for variable and function names
Use try/catch with specific error types for error handling
Files:
frontend/src/components/BillingStatus.tsxfrontend/src/routes/index.tsxfrontend/src/components/ModelSelector.tsxfrontend/src/components/AccountMenu.tsx
**/*.{ts,tsx}
📄 CodeRabbit Inference Engine (CLAUDE.md)
Use strict TypeScript typing and avoid
anywhen possible
Files:
frontend/src/components/BillingStatus.tsxfrontend/src/routes/index.tsxfrontend/src/components/ModelSelector.tsxfrontend/src/components/AccountMenu.tsx
🧠 Learnings (2)
📚 Learning: applies to src/**/*.{tsx} : use react context for global state management when needed...
Learnt from: CR
PR: OpenSecretCloud/Maple#0
File: CLAUDE.md:0-0
Timestamp: 2025-07-19T21:31:44.925Z
Learning: Applies to src/**/*.{tsx} : Use React context for global state management when needed
Applied to files:
frontend/src/components/ModelSelector.tsxfrontend/src/components/AccountMenu.tsx
📚 Learning: applies to src/components/**/*.{tsx} : use react functional components with hooks...
Learnt from: CR
PR: OpenSecretCloud/Maple#0
File: CLAUDE.md:0-0
Timestamp: 2025-07-19T21:31:44.925Z
Learning: Applies to src/components/**/*.{tsx} : Use React functional components with hooks
Applied to files:
frontend/src/components/ModelSelector.tsx
🧬 Code Graph Analysis (3)
frontend/src/routes/index.tsx (2)
frontend/src/types/team.ts (1)
TeamStatus(1-15)frontend/src/billing/billingService.ts (1)
getBillingService(171-176)
frontend/src/components/ModelSelector.tsx (1)
frontend/src/state/useLocalState.tsx (1)
useLocalState(4-10)
frontend/src/components/AccountMenu.tsx (1)
frontend/src/state/useLocalState.tsx (1)
useLocalState(4-10)
⏰ 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). (4)
- GitHub Check: build-linux
- GitHub Check: build-macos (universal-apple-darwin)
- GitHub Check: build-ios
- GitHub Check: browseruse-tests
🔇 Additional comments (6)
frontend/src/routes/index.tsx (1)
72-80: LGTM: Simplified team status query logic.The removal of billing status dependency simplifies the query logic. The team status query now runs for any authenticated user rather than being conditionally enabled based on billing plan type.
Note: This may result in additional API calls for users without team plans, but appears to be intentional for architectural simplification.
frontend/src/components/BillingStatus.tsx (2)
27-27: LGTM: Simplified boolean assignment.The removal of the nullish coalescing operator is appropriate since
String.prototype.includes()always returns a boolean value.
16-24: BillingStatus query is safe behind authentication guard.The
BillingStatuscomponent is only rendered whenos.auth.useris truthy infrontend/src/routes/index.tsx(lines ~150–200), so its query will only run for authenticated users. No changes to theenabledflag are needed here.frontend/src/components/ModelSelector.tsx (1)
92-92: LGTM: Consistent shift to local state management.The change from async query to direct local state access aligns with the broader refactoring. This assumes
billingStatusis populated and maintained in local state by other components (likeBillingStatus).frontend/src/components/AccountMenu.tsx (2)
82-82: LGTM: Consistent local state usage.The shift from async query to local state access aligns with the overall refactoring pattern across components.
91-91: LGTM: Simplified boolean assignment.Consistent with similar changes in
BillingStatus.tsx- removing unnecessary nullish coalescing sinceString.prototype.includes()always returns a boolean.
Summary by CodeRabbit