Improve billing plan and usage UX - #295
Merged
Merged
Conversation
Summary by CodeRabbit
WalkthroughThe billing popover now shows plan-specific states, funding information, and a persistent view-details footer. Balance views remove percentage-based progress indicators and display coverage and average-spend metadata. The billing route removes obsolete balance calculations and updates the team layout. English and Chinese billing messages now use connected-app and team-plan terminology. Tests cover plan navigation, recharge actions, balance display, and details navigation. Sequence Diagram(s)sequenceDiagram
participant User
participant BillingUsagePopover
participant PlanSelectionRoute
participant CreditsRoute
participant DetailsView
User->>BillingUsagePopover: Select plan card
BillingUsagePopover->>PlanSelectionRoute: Navigate to plan selection
User->>BillingUsagePopover: Select recharge action
BillingUsagePopover->>CreditsRoute: Navigate to credits
User->>BillingUsagePopover: Select view-details footer
BillingUsagePopover->>DetailsView: Invoke onViewDetails
Possibly related PRs
🚥 Pre-merge checks | ✅ 3 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (3 passed)
✨ Finishing Touches✨ Simplify code
Comment |
alwaysmavs
marked this pull request as ready for review
August 2, 2026 04:14
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
src/i18n/app-messages.en.ts (1)
604-605: 📐 Maintainability & Code Quality | 🟡 Minor | ⚡ Quick winFinish the "shared connections" → "connected apps" rename in the billing subtitle.
This PR renames "shared connections"/"共享连接" to "connected apps"/"已连接 App" in several billing keys, but the page subtitle shown at the top of the Billing route (
src/routes/Billing/index.tsxLine 243) still uses the old wording in both locales. The shared root cause is an incomplete terminology rename across the two locale files.
src/i18n/app-messages.en.ts#L604-L605: Updatebilling.subtitleto say "connected apps" instead of "shared connections", matching the renamedbilling.teamSharedLinks(Line 740) andbilling.popover.sharedLinks(Line 637).src/i18n/app-messages.zh.ts#L578-L578: Updatebilling.subtitleto say "已连接 App" instead of "共享连接", matching the renamedbilling.teamSharedLinks(Line 709).🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@src/i18n/app-messages.en.ts` around lines 604 - 605, Update the billing.subtitle translation in src/i18n/app-messages.en.ts at lines 604-605 to use “connected apps” instead of “shared connections”, and update billing.subtitle in src/i18n/app-messages.zh.ts at line 578 to use “已连接 App” instead of “共享连接”; keep the surrounding billing translations unchanged.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Outside diff comments:
In `@src/i18n/app-messages.en.ts`:
- Around line 604-605: Update the billing.subtitle translation in
src/i18n/app-messages.en.ts at lines 604-605 to use “connected apps” instead of
“shared connections”, and update billing.subtitle in src/i18n/app-messages.zh.ts
at line 578 to use “已连接 App” instead of “共享连接”; keep the surrounding billing
translations unchanged.
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
Run ID: 1338d2b0-09a6-411f-8201-7fd63e064113
📒 Files selected for processing (6)
src/components/app-shell/BillingUsagePopover.test.tssrc/components/app-shell/BillingUsagePopover.tsxsrc/i18n/app-messages.en.tssrc/i18n/app-messages.zh.tssrc/routes/Billing/BillingUsagePanels.tsxsrc/routes/Billing/index.tsx
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
1 participant
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
Improve the plans and usage experience so users can distinguish Team collaboration features from personal usage balance, reach the correct action quickly, and scan billing information without unnecessary visual weight.
Problem
The billing popover gave plan selection a large, generic call to action regardless of account state while the higher-frequency balance top-up path was less visible. The inactive Team status also looked like a primary button, plan copy did not clearly explain what Team plans unlock or how they differ from usage credits, and the footer wrapped a button in a padded container that consumed disproportionate height.
The billing details page compounded the issue by placing additional seats and personal usage side by side. That constrained the usage summary, forced metric labels to truncate, and devoted a large area to a balance progress bar whose denominator was not visible to users. The progress bar was based on current credit divided by original credit, which did not communicate when a user actually needed to top up.
Changes
Validation
corepack pnpm run lintcorepack pnpm run ts-checkcorepack pnpm run test(283 test files, 2134 tests)git diff --checkThe popover tests cover inactive-plan navigation, Team Plus upgrades, Team Pro behavior, top-up routing, compact details navigation, removal of the credit progress bar, plan-copy boundaries, and the muted inactive status treatment.