feat(billing): redesign Subscriptions view to match user-tabs aesthetic#4127
Merged
Conversation
- Plan cards: elevation="0" + 1px surface border; paid plan gets 3px primary accent on left edge for immediate visual hierarchy - Status chip + action button moved to header row end (justify-space-between) — scannable in one glance, no v-list wrapper - Next billing date now inline with fa-solid fa-calendar icon, no list item - Meter mode: UsageBar + MeterProgress merged into one card with v-divider separator (4 cards → 3 cards in meter mode) - Extras card: balance count promoted to primary v-chip in header row; Buy units CTA + ledger section get more breathing room - All cards use elevation="0" matching flat Profile/Organizations tab style - 75/75 unit tests pass, zero logic changes
…sign - Add aria-hidden="true" to decorative status icon and calendar icon (adjacent v-chip/text already conveys the semantic meaning) - Add flex-wrap to extras card header row for consistent responsive behavior with sibling plan card headers - Add 2 tests asserting BEM class presence for paid/free plan card (covers the primary accent border as class-based gate) - 77/77 unit tests pass
Replace rgb(var(--v-) / alpha) slash-syntax with rgba(var(--v-), alpha) comma syntax — matches existing sibling component convention (billing.computeGauge.component.vue:108). The slash-alpha form mixed with comma-separated CSS variables is invalid per CSS Color Level 4 and can silently fail border rendering in Safari / older Chrome. Also remove empty spacer div; replace with conditional mt-6 on the CTAs container for a cleaner box-model approach.
Codecov Report✅ All modified and coverable lines are covered by tests. Additional details and impacted files@@ Coverage Diff @@
## master #4127 +/- ##
=======================================
Coverage 99.54% 99.54%
=======================================
Files 31 31
Lines 1089 1089
Branches 302 302
=======================================
Hits 1084 1084
Misses 5 5 ☔ View full report in Codecov by Sentry. 🚀 New features to boost your workflow:
|
There was a problem hiding this comment.
Pull request overview
Redesigns the Billing “Subscriptions” tab UI to match the flatter “user-tabs” card aesthetic (borders instead of elevation) while keeping existing billing logic/composables intact.
Changes:
- Restructured the plan summary cards (free vs paid) to place status + actions in the paid plan header row and added paid/free BEM modifier classes for styling.
- Simplified meter-mode layout by merging UsageBar + MeterProgress into a single “Usage overview” card and promoting extras balance into a header chip.
- Added/updated scoped CSS borders for consistent flat cards and added unit tests asserting paid/free plan card modifier classes.
Reviewed changes
Copilot reviewed 2 out of 2 changed files in this pull request and generated 1 comment.
| File | Description |
|---|---|
| src/modules/billing/components/billing.subscriptions.component.vue | Template restructuring for plan/meter cards + new flat-border styling (paid left-accent, consistent borders). |
| src/modules/billing/tests/billing.subscriptions.component.unit.tests.js | Adds unit tests to assert the new paid/free plan card BEM modifier classes. |
| > | ||
| <div class="d-flex align-center mb-4"> | ||
| <div class="d-flex align-center mb-3"> | ||
| <v-icon icon="fa-solid fa-triangle-exclamation" color="error" size="small" class="mr-3" /> |
|
Warning Rate limit exceeded
You’ve run out of usage credits. Purchase more in the billing tab. ⌛ How to resolve this issue?After the wait time has elapsed, a review can be triggered using the We recommend that you space out your commits to avoid hitting the rate limit. 🚦 How do rate limits work?CodeRabbit enforces hourly rate limits for each developer per organization. Our paid plans have higher rate limits than the trial, open-source and free plans. In all cases, we re-allow further reviews after a brief timeout. Please see our FAQ for further information. ℹ️ Review info⚙️ Run configurationConfiguration used: Path: .coderabbit.yaml Review profile: ASSERTIVE Plan: Pro Run ID: 📒 Files selected for processing (1)
WalkthroughBilling subscriptions component template and styles are refactored to restructure plan cards, error/loading states, and meter-mode cards using dedicated BEM modifier classes. Unit tests are added to validate the new plan card CSS class application. ChangesPlan Cards and Error/Loading States UI Refactoring
Estimated code review effort🎯 2 (Simple) | ⏱️ ~12 minutes Possibly related PRs
Suggested labels
🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✏️ 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 |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 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.
Inline comments:
In `@src/modules/billing/components/billing.subscriptions.component.vue`:
- Around line 899-901: Replace the exclusion-based selector
".billing-subscriptions
.v-card:not(.billing-subscriptions__plan-card):not(.billing-subscriptions__error-card)"
with a positive BEM class approach: add a new class name (e.g.
"billing-subscriptions__meter-card") to the meter-related cards (usage overview,
breakdown, extras) in the template/component and then apply the border styling
to ".billing-subscriptions__meter-card" instead; update any existing CSS rules
and the template markup where those meter cards are created so they include the
new "billing-subscriptions__meter-card" class (leaving
".billing-subscriptions__plan-card" and ".billing-subscriptions__error-card"
unchanged).
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Path: .coderabbit.yaml
Review profile: ASSERTIVE
Plan: Pro
Run ID: 771ebb06-7c40-47fa-87e7-b0f8d103c113
📒 Files selected for processing (2)
src/modules/billing/components/billing.subscriptions.component.vuesrc/modules/billing/tests/billing.subscriptions.component.unit.tests.js
…lass Add billing-subscriptions__meter-card to the 3 meter-mode cards (usage overview, breakdown, extras) and target the border rule via the positive BEM class instead of a .not() exclusion chain. Cleaner intent, explicit coupling between markup and style. Per CodeRabbit suggestion on PR #4127.
PierreBrisorgueil
dismissed
coderabbitai[bot]’s stale review
Issue addressed: replaced exclusion-based :not() CSS selector with positive BEM class billing-subscriptions__meter-card on all 3 meter cards. Push afda8fd → latest.
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
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
elevation="0"+ 1px surface border; paid plan gets 3px primary left-edge accent for visual hierarchyjustify-space-between) — scannable in one glance,v-listwrapper removedUsageBar+MeterProgressmerged into single "Usage overview" card withv-divider(4 cards → 3 cards in meter mode)v-chipin header rowelevation="0",rgba()CSS borders)aria-hidden="true"; all card headers useflex-wrapfor responsive wrappingrgba(var(--v-theme-*), alpha)comma convention — matches existing sibling conventionTest plan
Visual expected outcome
Paid plan card: plan name + badge on left, status chip + action button on right, 3px primary left border accent.
Free plan card: plan name + badge, upgrade CTA, no accent border.
Meter mode: 3 cards (Usage overview with bar+progress / Breakdown chart / Extras with ledger) instead of 4.
Zero logic changes
All script logic, store interactions, composables, i18n keys, and event handlers are unchanged. Template restructure + CSS only.
Summary by CodeRabbit
Refactor
Tests