feat(admin): open stripe customer portal from billing section by rohilsurana · Pull Request #1715 · raystack/frontier · GitHub
Skip to content

feat(admin): open stripe customer portal from billing section#1715

Merged
rohilsurana merged 1 commit into
mainfrom
feat/admin-billing-portal-link
Jun 30, 2026
Merged

feat(admin): open stripe customer portal from billing section#1715
rohilsurana merged 1 commit into
mainfrom
feat/admin-billing-portal-link

Conversation

@rohilsurana

@rohilsurana rohilsurana commented Jun 30, 2026 •
edited
Loading

Copy link
Copy Markdown
Member

What

Adds an edit (pencil) action to the right of the Billing section header in the organization details side panel of the admin app (matching the Figma). Clicking it opens the Stripe customer portal for that org so a super user can update the customer's billing address / details.

This works even when the org's KYC is completed — unlike the client app, the admin app does not gate the action on KYC.

How

  • Reuses the existing FrontierService/CreateCheckout RPC with setupBody.customerPortal = true (the same call the client app's billing view uses). Super-user authorization already resolves via the platform->superuser schema cascade, so no backend change is needed.
  • Opens in a new tab, popup-blocker safe: the tab is opened synchronously within the click gesture and navigated once the portal URL is ready (opener severed for safety; the tab is closed if the request fails or returns no URL). Stripe's return URL is the current admin page.
  • Disabled state + tooltip: the action is disabled while the request is in flight or when the org has no billing account. It uses aria-disabled (not the native attribute) so it stays hoverable and shows a tooltip — "No billing account for this organization" when disabled, "Update billing details" otherwise. Errors surface via toastManager.
  • Icon: apsara 1.0.0-rc.12 ships no edit/pencil icon, so this uses Pencil1Icon from @radix-ui/react-icons (already used across the admin app). The header lays the title + action out as a flex row so the icon is right-aligned.

Related

Test plan

  • eslint passes on the changed file.
  • Manual (verified against a local sandbox):
    • Org with a billing account → pencil enabled, right-aligned, tooltip "Update billing details"; clicking calls CreateCheckout and opens the portal in a new tab.
    • Org without a billing account → pencil disabled, with tooltip "No billing account for this organization".
    • Works regardless of KYC status.

@vercel

vercel Bot commented Jun 30, 2026 •
edited
Loading

Copy link
Copy Markdown

@coderabbitai

coderabbitai Bot commented Jun 30, 2026 •
edited
Loading

Copy link
Copy Markdown
Contributor

Review Change Stack

Note

Reviews paused

It looks like this branch is under active development. To avoid overwhelming you with review comments due to an influx of new commits, CodeRabbit has automatically paused this review. You can configure this behavior by changing the reviews.auto_review.auto_pause_after_reviewed_commits setting.

Use the following commands to manage reviews:

  • @coderabbitai resume to resume automatic reviews.
  • @coderabbitai review to trigger a single review.

Use the checkboxes below for quick actions:

  • ▶️ Resume reviews
  • ✅ Review completed - (🔄 Check again to review again)
📝 Walkthrough

Walkthrough

Adds a billing portal update action to the organization billing side panel. The header now uses an edit button that starts a checkout mutation, opens the returned URL in a new tab, and adds matching layout and disabled-state styling.

Changes

Billing Portal Checkout Flow

Layer / File(s) Summary
Checkout mutation and header action
web/sdk/admin/views/organizations/details/side-panel/billing-details-section.tsx		 Adds the createCheckout mutation, error toast handling, checkout request construction, and the edit button in the billing header.
Header layout styles
web/sdk/admin/views/organizations/details/side-panel/side-panel.module.css		 Adds flex layout for the billing header title and a disabled visual state for the edit action.

Estimated code review effort

🎯 4 (Complex) | ⏱️ ~35 minutes

Possibly related PRs

  • raystack/frontier#1518: Shares the FrontierServiceQueries.createCheckout flow used for billing checkout/session handling.
  • raystack/frontier#1575: Uses the same billing-details checkout redirect pattern with checkoutSession.checkoutUrl.

Suggested reviewers

  • rsbh
  • paanSinghCoder
🚥 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.

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.

coderabbitai[bot]
coderabbitai Bot reviewed Jun 30, 2026
View reviewed changes

@coderabbitai coderabbitai Bot left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 1

ℹ️ Review info
⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: a9ca3b12-42cf-4d07-9b52-8b1a14c39ada

📥 Commits

Reviewing files that changed from the base of the PR and between 6dc16f9 and 6b0a183.

📒 Files selected for processing (1)
  • web/sdk/admin/views/organizations/details/side-panel/billing-details-section.tsx

Comment thread web/sdk/admin/views/organizations/details/side-panel/billing-details-section.tsx Outdated
@coveralls

coveralls commented Jun 30, 2026 •
edited
Loading

Copy link
Copy Markdown

Coverage Report for CI Build 28439458386

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 43.819%

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: 37096
Covered Lines: 16255
Line Coverage: 43.82%
Coverage Strength: 12.38 hits per line
💛 - Coveralls

@rohilsurana rohilsurana force-pushed the feat/admin-billing-portal-link branch from 23b6ec0 to d23f5bb Compare June 30, 2026 09:20
@rohilsurana rohilsurana force-pushed the feat/admin-billing-portal-link branch from d23f5bb to a02faf2 Compare June 30, 2026 09:33
@rohilsurana rohilsurana mentioned this pull request Jun 30, 2026
Closed
@rohilsurana rohilsurana force-pushed the feat/admin-billing-portal-link branch from a02faf2 to f14e452 Compare June 30, 2026 09:44
@rohilsurana rohilsurana force-pushed the feat/admin-billing-portal-link branch from f14e452 to 30cfb5c Compare June 30, 2026 09:59
@rohilsurana rohilsurana force-pushed the feat/admin-billing-portal-link branch from 30cfb5c to 42e8ace Compare June 30, 2026 10:00
rohanchkrabrty
rohanchkrabrty requested changes Jun 30, 2026
View reviewed changes

@rohanchkrabrty rohanchkrabrty left a comment •
edited
Loading

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Also remove the comments which are self explanatory like the ones in CSS file etc

Comment thread web/sdk/admin/views/organizations/details/side-panel/billing-details-section.tsx
@rohilsurana rohilsurana force-pushed the feat/admin-billing-portal-link branch from 42e8ace to 18639e1 Compare June 30, 2026 10:26
@rohilsurana rohilsurana force-pushed the feat/admin-billing-portal-link branch from 18639e1 to 3fc0a5f Compare June 30, 2026 10:34
@rohilsurana rohilsurana force-pushed the feat/admin-billing-portal-link branch from 3fc0a5f to d831e6b Compare June 30, 2026 10:41
@rohilsurana rohilsurana force-pushed the feat/admin-billing-portal-link branch from d831e6b to 16ee67c Compare June 30, 2026 10:49
@rohilsurana rohilsurana force-pushed the feat/admin-billing-portal-link branch from 16ee67c to 2a4dcd4 Compare June 30, 2026 11:01
@rohilsurana rohilsurana merged commit 9c2795d into main Jun 30, 2026
8 checks passed
@rohilsurana rohilsurana deleted the feat/admin-billing-portal-link branch June 30, 2026 11:02
@rohilsurana rohilsurana mentioned this pull request Jul 1, 2026
Merged
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@coderabbitai coderabbitai[bot] coderabbitai[bot] left review comments
@paanSinghCoder paanSinghCoder paanSinghCoder approved these changes
@rohanchkrabrty rohanchkrabrty rohanchkrabrty approved these changes

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

4 participants

@rohilsurana @coveralls @paanSinghCoder @rohanchkrabrty