Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
Contributor
📝 WalkthroughWalkthroughThis PR introduces conditional payment tab visibility and team management for the account settings component. It adds asynchronous data fetching to determine payment availability, expands PaymentsPage with new props for team filtering and personal mode control, and updates TeamSwitcher to accept teams from props. Changes
Sequence Diagram(s)sequenceDiagram
participant AccountSettings
participant AsyncFetch as Async Data Fetch
participant PaymentsPage
participant TeamSwitcher
AccountSettings->>AccountSettings: Component mounts
activate AccountSettings
AccountSettings->>AsyncFetch: runAsynchronouslyWithAlert: fetch payment availability
activate AsyncFetch
AsyncFetch->>AsyncFetch: Check user/team products
AsyncFetch-->>AccountSettings: Return paymentsAvailability data
deactivate AsyncFetch
AccountSettings->>AccountSettings: Compute shouldShowPaymentsTab
alt shouldShowPaymentsTab === true
AccountSettings->>PaymentsPage: Render with props (allowPersonal, availableTeams)
activate PaymentsPage
PaymentsPage->>PaymentsPage: useEffect: Sync team selection
PaymentsPage->>TeamSwitcher: Pass teams prop and allowPersonal
activate TeamSwitcher
TeamSwitcher->>TeamSwitcher: Source teams from props.teams
deactivate TeamSwitcher
deactivate PaymentsPage
else shouldShowPaymentsTab === false
AccountSettings->>AccountSettings: Skip Payments tab rendering
end
deactivate AccountSettings
Estimated code review effort🎯 4 (Complex) | ⏱️ ~60 minutes Possibly related PRs
Suggested reviewers
Poem
🚥 Pre-merge checks | ❌ 3❌ Failed checks (2 warnings, 1 inconclusive)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing touches
🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
Contributor
Greptile OverviewGreptile SummaryThis PR implements conditional visibility for the Payments tab in account settings. The tab now only shows when users or their teams have associated products, preventing empty payment pages. Key Changes:
Issues Found:
Confidence Score: 3/5
Important Files Changed
Sequence DiagramsequenceDiagram
participant User
participant AccountSettings
participant PaymentsPage
participant TeamSwitcher
participant API
User->>AccountSettings: Load account settings
activate AccountSettings
alt Products check
AccountSettings->>API: listProducts() for user
AccountSettings->>API: listProducts() for each team (if team_admin)
API-->>AccountSettings: Product lists
AccountSettings->>AccountSettings: Calculate paymentsAvailability
AccountSettings->>AccountSettings: Determine shouldShowPaymentsTab
end
alt shouldShowPaymentsTab = true
AccountSettings->>PaymentsPage: Render with availableTeams & allowPersonal
activate PaymentsPage
PaymentsPage->>PaymentsPage: Initialize selectedTeam state
alt !allowPersonal && !selectedTeam && teams.length > 0
PaymentsPage->>PaymentsPage: Auto-select teams[0]
end
alt hasTeams
PaymentsPage->>TeamSwitcher: Render with filtered teams
activate TeamSwitcher
User->>TeamSwitcher: Select team/personal
TeamSwitcher->>PaymentsPage: onChange(team)
PaymentsPage->>PaymentsPage: setSelectedTeam(team)
deactivate TeamSwitcher
end
PaymentsPage->>PaymentsPage: Render PaymentsPanel with customer
deactivate PaymentsPage
else shouldShowPaymentsTab = false
AccountSettings->>AccountSettings: Hide Payments tab
end
deactivate AccountSettings
|
![greptile-apps[bot]](https://avatars.githubusercontent.com/in/867647?s=60&v=4){kind=small}
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
Contributor
There was a problem hiding this comment.
Actionable comments posted: 2
🤖 Fix all issues with AI agents
In
`@packages/template/src/components-page/account-settings/payments/payments-page.tsx`:
- Around line 3-19: The code conditionally calls the hook-like method
user?.useTeams(), breaking the Rules of Hooks; fix by introducing and calling a
stable hook (e.g., useTeamsFromUser) unconditionally at the top of PaymentsPage
that always runs and returns the user's teams or [] when no user exists, then
replace user?.useTeams() with that result (update usages: teams, hasTeams,
effectiveSelectedTeam, customer). Ensure the new hook (useTeamsFromUser)
internally handles the null user case and returns an array so PaymentsPage can
safely use props.availableTeams ?? userTeams ?? [] without conditional hook
invocation.
In `@packages/template/src/components/team-switcher.tsx`:
- Around line 80-82: The code conditionally calls the React hook user.useTeams()
which can break hook order; call useTeams() unconditionally and then choose
between props.teams and the result. Specifically, invoke user.useTeams() every
render (e.g., assign to a local like userTeams), then set rawTeams = props.teams
?? userTeams, leaving selectedTeam and the useMemo for teams unchanged; this
ensures the hook ordering for user.useTeams() (referencing props.teams,
user.useTeams(), rawTeams, selectedTeam, useMemo).
N2D4
approved these changes
Feb 2, 2026
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary by CodeRabbit
New Features
Style