You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
@PierreBrisorgueil has exceeded the limit for the number of commits that can be reviewed per hour. Please wait 48 minutes and 22 seconds before requesting another review.
To keep reviews running without waiting, you can enable usage-based add-on for your organization. This allows additional reviews beyond the hourly cap. Account admins can enable it under billing.
⌛ How to resolve this issue?
After the wait time has elapsed, a review can be triggered using the @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.
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.
This PR updates billing checkout flows to redirect to the subscriptions tab with success/error messages, adds signup error alert UI, makes numerous billing component improvements for UX and accessibility, and updates typography in the notfound view.
Changes
Signup Error Handling
Layer / File(s)
Summary
Data & Methods src/modules/auth/views/signup.view.vue
Added signupError data property and signupErrorMessage(error) method to extract user-friendly messages from API error payloads (string, message/error fields, or error arrays).
Signup form now displays a closable error alert bound to signupError above credentials. On submission failure, the catch block sets signupError via the helper instead of logging to console.
Updated existing rejection test to assert signupError state and rendered message. Added new test verifying API error payloads are surfaced in both state and UI.
createCheckout success URL now routes to /users?tab=subscriptions&success=true. createExtrasCheckout success URL routes to /users?tab=subscriptions&success=true&type=extras and cancel URL routes to /pricing#units.
Added state for paymentSuccessMessage, portalError, and extrasCheckoutDialog. New handleCheckoutSuccessQuery() method interprets redirect query params and schedules cleanup. New computed helpers (availablePlanIds, canUpgrade, subscriptionStatus*) manage plan/portal UI. Updated meter component inputs with computed overage values.
Pricing View Deep Linking src/modules/billing/views/billing.pricing.view.vue
Added prices-loading binding to pricing card. Route hash #units now sets activeTab = 1 to deep-link into Units tab on pricing load.
Router Query Preservation Test src/modules/app/tests/app.router.unit.tests.js
New test verifies /billing?success=true&type=extras redirects to /users with success, type, and tab query parameters intact.
Store & Component Tests src/modules/billing/tests/billing.store.unit.tests.js, src/modules/billing/tests/billing.subscriptions.component.unit.tests.js
Updated checkout redirect URL assertions. Added tests for subscription status rendering, portal error handling, and checkout success query cleanup with timer validation.
Billing Component UI & Accessibility Improvements
Layer / File(s)
Summary
Pricing Card Loading State src/modules/billing/components/billing.pricingCard.component.vue
Added pricesLoading prop and skeleton loader display during Stripe pricing resolution. CTA now disables with tooltip ("Pricing temporarily unavailable") when pricing unavailable. New selectPlan() method guards against disabled state. Added prefers-reduced-motion style override.
Meter Progress Accessibility & Interactivity src/modules/billing/components/billing.meterProgress.component.vue
Computed hasClickListener guards button semantics and click emission. Overage badge and summary text now have aria-live/aria-atomic attributes for screen reader updates.
Usage Bar Styling & Accessibility src/modules/billing/components/billing.usageBar.component.vue
Meter mode summary rows use new billing-usage-bar__summary class with aria-live="polite". Admin display replaced inline gradient with admin-rainbow and billing-usage-bar__admin-track CSS classes.
Title changed from v-card-title to styled div. Pack label separator changed from em dash to hyphen. Empty-state text class updated to text-body-medium.
Upgrade Prompt Mode Support src/modules/billing/components/billing.upgradePrompt.component.vue
Added mode prop ('subscription' or 'meter'). Meter mode shows "Buy units" button emitting buy-pack; otherwise shows "Upgrade" link to /pricing.
The description covers summary, sections, and test plan, but lacks several required template sections: Scope (modules impacted, cross-module impact, risk level), Validation (checkboxes for build steps), Guardrails check, and Notes for reviewers.
Add missing sections: Scope (modules, cross-module impact, risk assessment), Validation checklist, Guardrails, and Notes for reviewers to align with the repository template.
✅ Passed checks (4 passed)
Check name
Status
Explanation
Title check
✅ Passed
The title succinctly captures the main change: comprehensive Vue billing module hardening addressing UX, design, accessibility, and Vuetify V4 migration. It clearly relates to the core objective of the changeset.
Docstring Coverage
✅ Passed
Docstring coverage is 100.00% which is sufficient. The required threshold is 80.00%.
Linked Issues check
✅ Passed
Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check
✅ Passed
Check skipped because no linked issues were found for this pull request.
✏️ Tip: You can configure your own custom pre-merge checks in the settings.
✨ Finishing Touches🧪 Generate unit tests (beta)
Create PR with unit tests
Commit unit tests in branch fix/billing-vue-hardening-v3
Tip
💬 Introducing Slack Agent: The best way for teams to turn conversations into code.
Slack Agent is built on CodeRabbit's deep understanding of your code, so your team can collaborate across the entire SDLC without losing context.
Generate code and open pull requests
Plan features and break down work
Investigate incidents and troubleshoot customer tickets together
Automate recurring tasks and respond to alerts with triggers
Summarize progress and report instantly
Built for teams:
Shared memory across your entire org—no repeating context
Per-thread sandboxes to safely plan and execute work
Governance built-in—scoped access, auditability, and budget controls
One agent for your entire SDLC. Right inside Slack.
✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 99.51%. Comparing base (61d6897) to head (d396da6). ⚠️ Report is 1 commits behind head on master.
The reason will be displayed to describe this comment to others. Learn more.
Pull Request Overview
This PR is currently not up to standards according to Codacy. While the functional additions for billing hardening are mostly present, there are critical issues regarding destructive state management in the router and brittle implementation patterns that should be addressed before merging.
Specifically, the URL cleanup logic in the subscriptions component inadvertently discards all other application state, and the method used to detect click listeners relies on Vue internals that may break in future updates. Additionally, a potential 'object Object' display bug exists in the signup error handling, which lacks sufficient unit test coverage for its branching logic.
About this PR
Detection of parent click listeners in BillingMeterProgressComponent relies on instance?.vnode?.props?.onClick. This is an internal Vue property that is susceptible to breaking in minor version updates. Use standard attrs or a dedicated boolean prop to signal interactivity instead.
The implementation of handleCheckoutSuccessQuery uses a 100ms setTimeout to clean the URL. Consider using Vue's nextTick or managing this through a router navigation guard to ensure the state is cleared predictably after the UI has updated.
Test suggestions
Verify query parameter preservation on /billing to /users?tab=subscriptions redirect.
Verify success alert rendering and subsequent URL cleanup in BillingSubscriptionsComponent.
Verify subscription status mapping for all 5 statuses including chip colors and recovery button text.
Verify 'Change Plan' CTA gating when user is on the highest available plan.
Verify BillingMeterProgress affordance logic (role=button and pointer) toggles based on listener presence.
Verify presence of aria-live='polite' and aria-live='assertive' on usage and overage regions.
Verify PricingCard displays v-skeleton-loader when pricesLoading prop is true.
Verify that API signup errors are surfaced and rendered in a closable v-alert.
Verify signupErrorMessage branch coverage for strings, error objects, and arrays of error messages.
Prompt proposal for missing tests
Consider implementing these tests if applicable:
1. Verify signupErrorMessage branch coverage for strings, error objects, and arrays of error messages.
As per coding guidelines: "**/*.{js,ts,vue}: Every new or modified function must have a JSDoc header with one-line description, @param for each argument, and @returns for any non-void return value."
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@src/modules/auth/views/signup.view.vue` around lines 177 - 199, Add a JSDoc
header above the data() function describing its purpose (returns the component
reactive state), include an `@returns` tag specifying the returned object (e.g.,
`@returns` {{theme: *, valid: boolean, signupError: (null|*), ...}} or simply
{`@link` Object}) and, since data() has no parameters, no `@param` tags are
required; update the JSDoc to reference the new signupError state so the header
reflects the modified return shape and place it immediately above the data()
declaration in signup.view.vue.
Document the new redirect function with JSDoc (extract to named helper).
Line 26 introduces a modified function without a JSDoc header. Extracting it to a named constant keeps route config clean and satisfies the function-doc requirement.
As per coding guidelines **/*.{js,ts,vue}: Every new or modified function must have a JSDoc header with one-line description, @param for each argument, and @returns for any non-void return value (always include @returns for async functions).
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@src/modules/billing/router/billing.router.js` around lines 24 - 32, Extract
the inline redirect function used in the Billing route (the anonymous function
at path '/billing' that redirects to { path: '/users', query: { ...to.query,
tab: 'subscriptions' } }) into a named constant (e.g., billingRedirect) and
replace the inline function with that constant; add a JSDoc header above the new
helper with a one-line description, a `@param` for the 'to' route/location
argument, and a `@returns` describing the returned route object; ensure the
router's redirect property references billingRedirect.
Line 208 is an async lifecycle method and its JSDoc should include an explicit @returns annotation for consistency/compliance.
♻️ Suggested fix
/**
* `@desc` Fetch billing plans and subscription data on component creation.
+ * `@returns` {Promise<void>}
*/
async created() {
As per coding guidelines **/*.{js,ts,vue}: Every new or modified function must have a JSDoc header with one-line description, @param for each argument, and @returns for any non-void return value (always include @returns for async functions).
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@src/modules/billing/views/billing.pricing.view.vue` around lines 205 - 229,
The JSDoc for the async created() lifecycle method is missing an `@returns`
annotation; update the comment block above the async created() method to include
an explicit `@returns` tag (e.g. `@returns` {Promise<void>} or similar descriptive
text) since created() is declared async (ensure the tag matches the async
signature and mention Promise<void>), leaving existing description and any
`@param` tags intact; locate the async created() method that calls
this.billingStore.fetchPlans(), this.billingStore.fetchSubscription(), and
inspects this.$route.query/hash to apply the change.
Add missing JSDoc contract on modified lifecycle hooks.
mounted is async and was modified but has no @returns, and the new beforeUnmount hook has no JSDoc header.
Proposed patch
/**
* `@desc` Fetch subscription data on mount and handle Stripe redirect query params.
* The legacy /billing page is retired; this component is now the landing point for
* Stripe redirects (success, cancel, packPurchased).
+ * `@returns` {Promise<void>}
*/
async mounted() {
@@
- beforeUnmount() {+ /**+ * `@desc` Clear pending checkout-success URL cleanup timer.+ * `@returns` {void}+ */+ beforeUnmount() {
if (this.successCleanupTimer) {
clearTimeout(this.successCleanupTimer);
}
},
As per coding guidelines **/*.{js,ts,vue}: “Every new or modified function must have a JSDoc header with one-line description, @param for each argument, and @returns for any non-void return value (always include @returns for async functions)”.
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@src/modules/billing/components/billing.subscriptions.component.vue` around
lines 407 - 432, Add JSDoc headers for the modified lifecycle hooks: add a
one-line description and an `@returns` tag for the async mounted() (since it now
returns a Promise), and add a one-line description plus `@returns` (void) for
beforeUnmount(); also include an explicit `@param` section (none) if your linter
requires it for functions with no args. Update the comments immediately above
the mounted() and beforeUnmount() methods in the component (referencing mounted,
beforeUnmount, successCleanupTimer, and the billingStore.fetchSubscription call)
to satisfy the rule that async functions must document `@returns` and all
new/modified functions have JSDoc.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@src/modules/billing/components/billing.subscriptions.component.vue`:
- Around line 440-445: The code treats query.packPurchased as truthy which
causes 'false' strings to be considered success; update the logic in the
isSuccess calculation and the ternary that sets paymentSuccessMessage to
explicitly parse packPurchased (e.g., compare query.packPurchased === 'true' or
coerce with a safe parser) instead of raw truthiness so only an explicit true
value signals success; adjust references to isSuccess, paymentSuccessMessage and
the packPurchased checks accordingly.
In `@src/modules/billing/components/billing.upgradePrompt.component.vue`:
- Around line 76-80: Add a JSDoc header above the validator function for the
`mode` prop in billing.upgradePrompt.component.vue: include a one-line
description, a `@param` tag for the `value` parameter (string) and a `@returns` tag
indicating it returns a boolean; apply this JSDoc immediately above the
validator arrow function that validates ['subscription','meter'] so the file
meets the new JSDoc requirement for modified/added functions.
---
Outside diff comments:
In `@src/modules/auth/views/signup.view.vue`:
- Around line 177-199: Add a JSDoc header above the data() function describing
its purpose (returns the component reactive state), include an `@returns` tag
specifying the returned object (e.g., `@returns` {{theme: *, valid: boolean,
signupError: (null|*), ...}} or simply {`@link` Object}) and, since data() has no
parameters, no `@param` tags are required; update the JSDoc to reference the new
signupError state so the header reflects the modified return shape and place it
immediately above the data() declaration in signup.view.vue.
In `@src/modules/billing/components/billing.subscriptions.component.vue`:
- Around line 407-432: Add JSDoc headers for the modified lifecycle hooks: add a
one-line description and an `@returns` tag for the async mounted() (since it now
returns a Promise), and add a one-line description plus `@returns` (void) for
beforeUnmount(); also include an explicit `@param` section (none) if your linter
requires it for functions with no args. Update the comments immediately above
the mounted() and beforeUnmount() methods in the component (referencing mounted,
beforeUnmount, successCleanupTimer, and the billingStore.fetchSubscription call)
to satisfy the rule that async functions must document `@returns` and all
new/modified functions have JSDoc.
In `@src/modules/billing/router/billing.router.js`:
- Around line 24-32: Extract the inline redirect function used in the Billing
route (the anonymous function at path '/billing' that redirects to { path:
'/users', query: { ...to.query, tab: 'subscriptions' } }) into a named constant
(e.g., billingRedirect) and replace the inline function with that constant; add
a JSDoc header above the new helper with a one-line description, a `@param` for
the 'to' route/location argument, and a `@returns` describing the returned route
object; ensure the router's redirect property references billingRedirect.
In `@src/modules/billing/views/billing.pricing.view.vue`:
- Around line 205-229: The JSDoc for the async created() lifecycle method is
missing an `@returns` annotation; update the comment block above the async
created() method to include an explicit `@returns` tag (e.g. `@returns`
{Promise<void>} or similar descriptive text) since created() is declared async
(ensure the tag matches the async signature and mention Promise<void>), leaving
existing description and any `@param` tags intact; locate the async created()
method that calls this.billingStore.fetchPlans(),
this.billingStore.fetchSubscription(), and inspects this.$route.query/hash to
apply the change.
🪄 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: cd1b7fdc-62d9-413e-969c-97871ba4d486
📥 Commits
Reviewing files that changed from the base of the PR and between 61d6897 and a35d03e.
⛔ Files ignored due to path filters (2)
src/modules/billing/tests/__snapshots__/billing.meterProgress.component.unit.tests.js.snap is excluded by !**/*.snap
src/modules/billing/tests/__snapshots__/billing.usageBar.component.unit.tests.js.snap is excluded by !**/*.snap
The reason will be displayed to describe this comment to others. Learn more.
Pull request overview
This PR hardens the billing UX around Stripe checkout returns and improves UI consistency/accessibility across billing (and a couple adjacent) views as part of the Vuetify v4 typography migration.
Changes:
Updates Stripe checkout success/cancel routing to land users on the /users?tab=subscriptions billing area, preserving relevant redirect query parameters.
Improves billing UI/UX: inline “Buy units” modal flow for meter mode, status chip/action mapping, error surfacing, and clearer pricing loading/unavailable states.
Adds/updates unit tests and snapshots covering new a11y attributes, redirect/query cleanup behavior, and new UI states.
Reviewed changes
Copilot reviewed 26 out of 26 changed files in this pull request and generated 3 comments.
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
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.
![codacy-production[bot]](https://avatars.githubusercontent.com/in/56611?s=60&v=4){kind=small}
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
Summary
Comprehensive Vue billing module hardening bundling UX post-payment fixes + design/a11y/V4 typography migration. Goal: module simple, polished, accessible.
Source: 4-agent audit 2026-05-02 found 21 frontend findings (1 🔴 + 7 🟠 + 8 🟡 + 4 🔵 + 1 ⚪).
Sections
A — UX hardening (🔴 + 9 issues)
Critical: successUrl strip caused silent post-payment landing — fixed via param-aware route + v-alert + URL clean. Plus dual CTA gating, inline modal for units, portal error UI, status badge mapping, meter-mode upgrade prompt, pricing skeleton, annual hint, signup error surface, meterProgress affordance honesty.
B — Design + a11y + V4 (12 issues)
text-body-2 → text-body-medium V4 migration (6 sites), gradient theme tokens, aria-live announcements, mobile fullscreen dialog, inline → scoped CSS, v-card-title cleanup, casing fix, prefers-reduced-motion guard.
Test plan
Summary by CodeRabbit
Release Notes
New Features
Bug Fixes
UX Improvements