Skip to content

fix: billing and plans pages#1575

Merged
rohanchkrabrty merged 6 commits intomainfrom
fix-billing-pages
Apr 28, 2026
Merged

fix: billing and plans pages#1575
rohanchkrabrty merged 6 commits intomainfrom
fix-billing-pages

Conversation

@rohanchkrabrty
Copy link
Copy Markdown
Contributor

Summary

  • Audit views-new/billing permissions to match the old flow: gate the page behind a "Restricted Access" EmptyState when the user lacks the canSeeBilling permission, and route billing-detail edits to the Stripe customer portal instead of an in-app dialog.
  • Polish loading/empty states across the billing page — remove skeletons from PaymentIssue/UpcomingPlanChangeBanner, add two-line text-shaped skeletons in PaymentMethodCard/BillingDetailsCard, fix the UpcomingBillingCycle loading flicker, and add loading/loaderText to the action buttons during checkout.
  • Update the billing transactions table to match Figma: title row + sort control, simplified columns, capped action column width, and accent-styled View invoice button.
  • Fix views-new/plans monetary formatting by removing valueInMinorUnits={false} so the Apsara Amount component correctly treats backend cents as minor units, and restyle the interval tabs to medium size via a CSS module override.
  • Default the plan card's interval tab to the user's current subscription synchronously (replacing the buggy post-render useEffect), and render skeleton rows in FeatureTable while listFeatures is loading instead of leaving whitespace.

@vercel
Copy link
Copy Markdown

vercel Bot commented Apr 26, 2026

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated (UTC)
frontier Ready Ready Preview, Comment Apr 28, 2026 4:46pm

@coderabbitai
Copy link
Copy Markdown
Contributor

coderabbitai Bot commented Apr 26, 2026

Caution

Review failed

The pull request is closed.

ℹ️ Recent review info
⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: 40223526-7b89-47ed-a947-69c79d054f79

📥 Commits

Reviewing files that changed from the base of the PR and between a6ca37b and 1deb32e.

📒 Files selected for processing (18)
  • web/apps/client-demo/src/pages/settings/Billing.tsx
  • web/sdk/react/components/view-container/view-container.module.css
  • web/sdk/react/hooks/useBillingPermission.ts
  • web/sdk/react/views-new/billing/billing-view.module.css
  • web/sdk/react/views-new/billing/billing-view.tsx
  • web/sdk/react/views-new/billing/components/billing-details-card.tsx
  • web/sdk/react/views-new/billing/components/billing-details-dialog.tsx
  • web/sdk/react/views-new/billing/components/confirm-cycle-switch-dialog.tsx
  • web/sdk/react/views-new/billing/components/invoices.tsx
  • web/sdk/react/views-new/billing/components/payment-issue.tsx
  • web/sdk/react/views-new/billing/components/payment-method-card.tsx
  • web/sdk/react/views-new/billing/components/upcoming-billing-cycle.tsx
  • web/sdk/react/views-new/billing/components/upcoming-plan-change-banner.tsx
  • web/sdk/react/views-new/plans/components/confirm-plan-change-dialog.tsx
  • web/sdk/react/views-new/plans/components/feature-table.tsx
  • web/sdk/react/views-new/plans/components/plan-card.module.css
  • web/sdk/react/views-new/plans/components/plan-card.tsx
  • web/sdk/react/views-new/plans/plans-view.tsx

📝 Walkthrough

Summary by CodeRabbit

  • New Features

    • Integrated external checkout for billing account updates.
  • Improvements

    • Permission-based access control for billing features with restricted UI when unavailable.
    • Enhanced loading states and skeleton layouts across billing pages.
    • Improved tab styling and visual feedback for plan intervals.
    • Better content presentation and spacing adjustments.

Walkthrough

This PR implements permission-based access control for billing operations, replaces the billing details dialog with a checkout flow mutation, refactors loading state management across billing and plans components, and standardizes currency component usage and styling patterns.

Changes

Cohort / File(s) Summary
Billing Page & Navigation
web/apps/client-demo/src/pages/settings/Billing.tsx
Now derives orgId from route parameters and passes an onNavigateToPlans callback to navigate to the plans settings page.
Permission & Access Control
web/sdk/react/hooks/useBillingPermission.ts
Added canSeeBilling return value computed from UpdatePermission checks alongside existing isAllowed and isFetching.
Billing View Core
web/sdk/react/views-new/billing/billing-view.tsx
Permission-gated billing access with canSeeBilling, replaced billing details dialog with createCheckout mutation flow, invoice fetching controlled by permission and organization context, adjusted loading state handling.
Billing Details Components
web/sdk/react/views-new/billing/components/billing-details-card.tsx, payment-method-card.tsx
Added isActionLoading prop for independent button loading states, refactored skeleton rendering to consolidated conditional blocks for name and address fields; action button visibility gated by !isLoading.
Removed Billing Details Dialog
web/sdk/react/views-new/billing/components/billing-details-dialog.tsx
Removed entire dialog component with form validation, submission, and update logic (263 lines) — functionality replaced by checkout mutation flow in billing-view.
Billing Supplementary Components
web/sdk/react/views-new/billing/components/confirm-cycle-switch-dialog.tsx, payment-issue.tsx, upcoming-billing-cycle.tsx, upcoming-plan-change-banner.tsx
Refactored loading-state UI: confirm-cycle-switch uses hideDecimals config with Amount component; payment-issue, upcoming-billing-cycle, and upcoming-plan-change-banner removed skeleton placeholders and consolidated early returns.
Invoices & Billing Styling
web/sdk/react/views-new/billing/components/invoices.tsx, billing-view.module.css
Invoices component treats missing activeOrganization?.id as loading, replaced toolbar UI, added view-invoice button CSS styling; stylesheet removed .linkColumn > a and .dialogFormBody, added .viewInvoiceBtn class.
Plans Components
web/sdk/react/views-new/plans/components/feature-table.tsx, plan-card.tsx, plans-view.tsx, confirm-plan-change-dialog.tsx
Feature table added isLoading prop with skeleton fallback, plan-card removed valueInMinorUnits={false} override and added interval-tab CSS classes, plans-view refactored interval selection via useMemo and integrated feature-loading state, confirm-plan-change-dialog removed valueInMinorUnits={false} override.
Plans Styling
web/sdk/react/views-new/plans/components/plan-card.module.css
Added three new tab-related CSS classes (.intervalTabs, .intervalTabsList, .intervalTab) for interval selector styling; reformatted .card padding to multi-line format.
Shared Layout
web/sdk/react/components/view-container/view-container.module.css
Moved padding from .container to .content element and added box-sizing: border-box to .content.

Estimated code review effort

🎯 4 (Complex) | ⏱️ ~65 minutes

Possibly related PRs

Suggested reviewers

  • rohilsurana
  • rsbh
🚥 Pre-merge checks | ✅ 2
✅ Passed checks (2 passed)
Check name Status Explanation
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.


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.

❤️ Share

Comment @coderabbitai help to get the list of available commands and usage tips.

@rohanchkrabrty rohanchkrabrty changed the base branch from main to fix-service-account April 26, 2026 23:35
@coveralls
Copy link
Copy Markdown

coveralls commented Apr 26, 2026

Coverage Report for CI Build 25065877374

Warning

Build has drifted: This PR's base is out of sync with its target branch, so coverage data may include unrelated changes.
Quick fix: rebase this PR. Learn more →

Coverage remained the same at 42.353%

Details

  • Coverage remained the same as the base build.
  • Patch coverage: No coverable lines changed in this PR.
  • No coverage regressions found.

Uncovered Changes

No uncovered changes found.

Coverage Regressions

No coverage regressions found.


Coverage Stats

Coverage Status
Relevant Lines: 37069
Covered Lines: 15700
Line Coverage: 42.35%
Coverage Strength: 11.76 hits per line

💛 - Coveralls

Comment thread web/sdk/react/views-new/billing/components/invoices.tsx
Base automatically changed from fix-service-account to main April 28, 2026 14:01
@rohanchkrabrty rohanchkrabrty enabled auto-merge (squash) April 28, 2026 16:46
@rohanchkrabrty rohanchkrabrty merged commit f44657d into main Apr 28, 2026
7 of 8 checks passed
@rohanchkrabrty rohanchkrabrty deleted the fix-billing-pages branch April 28, 2026 16:51
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants