Skip to content

feat: merge subscription credits with API credits UI updates - #407

Merged
AnthonyRonning merged 1 commit into
masterfrom
feat/merge-subscription-api-credits
Feb 3, 2026
Merged

feat: merge subscription credits with API credits UI updates#407
AnthonyRonning merged 1 commit into
masterfrom
feat/merge-subscription-api-credits

Conversation

@AnthonyRonning

@AnthonyRonningAnthonyRonning commented Jan 30, 2026

Copy link
Copy Markdown
Contributor

Summary

Implements the frontend changes from #406 to support merged subscription and API credits.

Changes

  • billingApi.ts: Added api_credit_balance field to BillingStatus type
  • CreditUsage.tsx: Shows API credit balance when plan usage is >=75% and user has API credits
  • UpgradePromptDialog.tsx: Added "Buy API Credits" button for paid users hitting usage limits, updated messaging
  • BillingStatus.tsx: Updated messages when can_chat is false to mention API credits option
  • pricing.tsx: Added FAQ: "Can I use my subscription for API access?"
  • pricingConfig.tsx: Updated "API Access" feature text to "API Access (use plan credits via API)"
  • ApiCreditsSection.tsx: Updated description to "Extends your subscription when plan credits run out"
  • ApiKeyDashboard.tsx: Updated upgrade prompt messaging
  • index.tsx: Added api_settings URL param to navigate directly to API settings dialog

Dependency

This depends on billing server changes that will:

  1. Add api_credit_balance to the subscription status response
  2. Implement fallback logic so can_chat: true when user has either subscription OR API credits

Closes#406


Open with Devin

Summary by CodeRabbit

  • New Features

    • Show API credit balance and visual indicator when credits are high
    • "Plan Credits" header and API credits display with icon
    • Buy API Credits flow added to dialogs and billing area
    • Quick access to API settings from site routes (opens API key dialog)
  • Documentation

    • FAQ entry explaining subscription use for API access and credits
  • Copy Updates

    • Pricing and dashboard text clarified to mention using plan credits via API

✏️ Tip: You can customize this high-level summary in your review settings.

@coderabbitai

coderabbitaiBot commented Jan 30, 2026

Copy link
Copy Markdown
📝 Walkthrough

Walkthrough

Adds API-credit awareness and purchase flow: billing type gains api_credit_balance; UI surfaces API credits in credit/usage components and upgrade dialogs; routing accepts api_settings to open API key dialog; pricing, API key pages, and copy updated to reference API credits. (49 words)

Changes

Cohort / File(s)Summary
Billing Type
frontend/src/billing/billingApi.ts
Added optional api_credit_balance?: number to the BillingStatus type.
Credit Display & Status
frontend/src/components/CreditUsage.tsx, frontend/src/components/BillingStatus.tsx
Show API credits when api_credit_balance > 0; rename header to "Plan Credits"; add hasApiAccess derivation and update messaging when can_chat is false to reference API credits.
Upgrade / Purchase Flow & Routing
frontend/src/components/UpgradePromptDialog.tsx, frontend/src/routes/index.tsx
Introduce "Buy API Credits" action (handleBuyCredits) and api_settings query param; route effect opens API key dialog when present and clears query param on navigation.
API Keys / Dashboard Copy
frontend/src/components/apikeys/ApiCreditsSection.tsx, frontend/src/components/apikeys/ApiKeyDashboard.tsx
Copy updates: changed descriptions to emphasize API credits extend subscriptions and section title to "Extend Your Subscription".
Pricing & FAQ Copy
frontend/src/config/pricingConfig.tsx, frontend/src/routes/pricing.tsx
Updated plan feature text to "API Access (use plan credits via API)"; added FAQ entries clarifying subscription credits work with API and API credits purchase options.

Sequence Diagram(s)

sequenceDiagram
participant User
participant Browser
participant Router
participant App
participant Dialog
User->>Browser: Navigate to /?api_settings=true
Browser->>Router: Parse query string (api_settings=true)
Router->>App: Route.useSearch() returns api_settings
App->>Dialog: Open API key dialog if user authenticated
Dialog->>User: Show "Buy API Credits" option
User->>Dialog: Click "Buy API Credits"
Dialog->>Router: Navigate to root with replace (clear api_settings)
Router->>App: App updates state to avoid re-opening dialog on refresh
Loading

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Possibly related issues

  • Merge Subscription Credits with API Credits - Frontend Updates #406: Merge Subscription Credits with API Credits - Frontend Updates — Implements the same objectives: add api_credit_balance, surface API credits in UI, and add purchase flow.
  • OpenSecretCloud/maple-billing-server#39 — Backend change adding api_credit_balance to subscription responses that this frontend change expects.

Possibly related PRs

Poem

🐰
Plan credits hum like meadow light,
API coins bounce into sight.
Buy a nibble, extend the chat,
The rabbit cheers — hop, click, and chat! 🥕✨

🚥 Pre-merge checks | ✅ 4
✅ Passed checks (4 passed)
Check nameStatusExplanation
Description Check✅ PassedCheck skipped - CodeRabbit’s high-level summary is enabled.
Title check✅ PassedThe title clearly summarizes the main objective of the PR: merging subscription credits with API credits through UI updates.
Linked Issues check✅ PassedAll required changes from issue #406 are implemented: BillingStatus type extended with api_credit_balance [#406], CreditUsage.tsx shows API credits [#406], UpgradePromptDialog.tsx adds Buy API Credits button [#406], BillingStatus.tsx mentions API credits in messages [#406], pricing.tsx adds API access FAQ [#406], pricingConfig.tsx updates API Access text [#406], ApiCreditsSection.tsx updates description [#406], ApiKeyDashboard.tsx updates messaging [#406], and index.tsx adds api_settings navigation [#406].
Out of Scope Changes check✅ PassedAll changes align with the stated objectives of merging subscription and API credits UI. No unrelated modifications to unrelated components, styling, or functionality detected beyond the scope of #406.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.

✨ Finishing touches
  • 📝 Generate docstrings
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Post copyable unit tests in a comment
  • Commit unit tests in branch feat/merge-subscription-api-credits

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

@cloudflare-workers-and-pages

cloudflare-workers-and-pagesBot commented Jan 30, 2026

Copy link
Copy Markdown

Deploying maple with Cloudflare Pages Cloudflare Pages

Latest commit:6058163
Status: ✅ Deploy successful!
Preview URL:https://efd46e59.maple-ca8.pages.dev
Branch Preview URL:https://feat-merge-subscription-api.maple-ca8.pages.dev

View logs

@devin-ai-integrationdevin-ai-integrationBot 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.

✅ Devin Review: No Issues Found

Devin Review analyzed this PR and found no potential bugs to report.

View in Devin Review to see 4 additional flags.

Open in Devin Review

@greptile-apps

greptile-appsBot commented Jan 30, 2026

Copy link
Copy Markdown
Contributor

Greptile Overview

Greptile Summary

This PR implements frontend changes to support merged subscription and API credits, creating a unified user experience where API credits extend subscription usage.

Key Changes:

  • Added api_credit_balance field to BillingStatus type to track API credit balances
  • Updated CreditUsage component to display API credit balance when usage is >= 75% and credits exist
  • Added "Buy API Credits" button in UpgradePromptDialog for paid users (Pro/Max/Team) hitting usage limits
  • Implemented api_settings URL parameter for direct navigation to API key dialog
  • Updated messaging across multiple components to clarify that API credits extend subscription usage
  • Added FAQ explaining how subscription credits work with API credits

Implementation Quality:

  • Clean TypeScript implementation with proper optional field handling
  • Consistent UI/UX patterns following existing component structure
  • Appropriate conditional rendering based on user plan and credit status
  • Good separation of concerns between billing, UI, and navigation logic

Dependencies:
This PR depends on backend changes to:

  1. Return api_credit_balance in subscription status response
  2. Implement fallback logic where can_chat: true when user has either subscription OR API credits

The frontend is ready to consume the backend changes once deployed.

Confidence Score: 5/5

  • Safe to merge - well-implemented UI changes with no logic issues or security concerns
  • All changes are frontend UI updates with clean TypeScript implementation, proper null handling, and consistent patterns. No security vulnerabilities, API misuse, or logical errors detected.
  • No files require special attention

Important Files Changed

FilenameOverview
frontend/src/billing/billingApi.tsAdded optional api_credit_balance field to BillingStatus type - straightforward type extension
frontend/src/components/CreditUsage.tsxShows API credit balance when user has credits, updates header to "Plan Credits", adds formatting helper
frontend/src/components/UpgradePromptDialog.tsxAdded "Buy API Credits" button for paid users hitting usage limits, updated dialog layout to vertical stack
frontend/src/routes/index.tsxAdded api_settings URL parameter handling to open API key dialog directly from navigation

Sequence Diagram

sequenceDiagram
participant User
participant Frontend
participant BillingAPI
participant Backend
User->>Frontend: Opens app/pricing page
Frontend->>BillingAPI: fetchBillingStatus()
BillingAPI->>Backend: GET /v1/maple/subscription/status
Backend-->>BillingAPI: Returns status with api_credit_balance
BillingAPI-->>Frontend: BillingStatus object
alt User has >= 75% plan credit usage
Frontend->>Frontend: CreditUsage component shows plan usage
alt User has API credits > 0
Frontend->>Frontend: Display API credit balance below plan usage
end
end
alt User hits usage limit (can_chat = false)
Frontend->>Frontend: Show UpgradePromptDialog
alt User has API access (Pro/Max/Team)
Frontend->>Frontend: Display "Buy API Credits" button
User->>Frontend: Clicks "Buy API Credits"
Frontend->>Frontend: Navigate to /?api_settings=true
Frontend->>Frontend: Open ApiKeyManagementDialog
User->>Frontend: Purchase API credits
Frontend->>BillingAPI: purchaseApiCredits()
BillingAPI->>Backend: POST /v1/maple/api-credits/purchase
Backend-->>BillingAPI: Checkout URL
BillingAPI-->>Frontend: Redirect to checkout
else User on Free/Starter
Frontend->>Frontend: Show "Upgrade to Pro" button only
end
end
alt User navigates with ?api_settings=true
Frontend->>Frontend: Open ApiKeyManagementDialog directly
Frontend->>Frontend: Show Credits tab (default)
end
Loading

@greptile-appsgreptile-appsBot 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.

1 file reviewed, 1 comment

Edit Code Review Agent Settings | Greptile

Comment threadfrontend/src/components/CreditUsage.tsx Outdated
@AnthonyRonning
AnthonyRonningforce-pushed the feat/merge-subscription-api-credits branch 2 times, most recently from ae888af to f6924c0CompareJanuary 30, 2026 18:35

@devin-ai-integrationdevin-ai-integrationBot 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.

✅ Devin Review: No Issues Found

Devin Review analyzed this PR and found no potential bugs to report.

View in Devin Review to see 4 additional flags.

Open in Devin Review

@coderabbitaicoderabbitaiBot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

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

Actionable comments posted: 0

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (1)
frontend/src/components/CreditUsage.tsx (1)

20-30: ⚠️ Potential issue | 🟡 Minor

Max plan gating hides API credits between 75–89% usage.
When isMaxPlan and usage is 75–89%, the early return prevents the new API credits indicator from showing, even though the intent is to surface credits at ≥75%. Consider allowing the indicator to render in that range.

Suggested adjustment
- // For Max plan users, only show if usage is 90% or higher- const isMaxPlan = billingStatus.product_name?.toLowerCase().includes("max");- if (isMaxPlan && percentUsed < 90) {- return null;- }-- // Check if user has API credits- const hasApiCredits =- billingStatus.api_credit_balance !== undefined && billingStatus.api_credit_balance > 0;- const showApiCredits = percentUsed >= 75 && hasApiCredits;+ // Check if user has API credits+ const hasApiCredits =+ billingStatus.api_credit_balance !== undefined && billingStatus.api_credit_balance > 0;+ const showApiCredits = percentUsed >= 75 && hasApiCredits;++ // For Max plan users, only show if usage is 90% or higher (unless showing API credits)+ const isMaxPlan = billingStatus.product_name?.toLowerCase().includes("max");+ if (isMaxPlan && percentUsed < 90 && !showApiCredits) {+ return null;+ }

Also applies to: 38-40, 45-45, 60-64

@AnthonyRonning
AnthonyRonningforce-pushed the feat/merge-subscription-api-credits branch from f6924c0 to 6058163CompareJanuary 30, 2026 18:43
- Add api_credit_balance field to BillingStatus type
- Show API credit balance in CreditUsage when plan is >=75% used
- Add 'Buy API Credits' button in UpgradePromptDialog for paid users
- Update BillingStatus messaging to mention API credits option
- Add FAQ about using subscription for API access
- Update API Access feature descriptions in pricing config
- Update ApiCreditsSection description text
- Add api_settings URL param to open API settings dialog
Closes#406
Co-authored-by: factory-droid[bot] <138933559+factory-droid[bot]@users.noreply.github.com>
@marksftw

Copy link
Copy Markdown
Contributor

Tested and working well. PR looks good to me.

  • In the Maple Chat interface it pulls from the Plan Credits, not touching the API Credits balance.
  • In the Maple Proxy it pulls from the Plan Credits, not touching the API Credits balance because I still have Plan Credits available
  • I was able to successfully purchase more API credits and my API Credits balance increased

I'm working with Claude on the copy, but thinking it's best to merge this first and then I can do a followup PR with copy suggestions.

@AnthonyRonning
AnthonyRonning merged commit 17e7aea into masterFeb 3, 2026
13 checks passed
@AnthonyRonning
AnthonyRonning deleted the feat/merge-subscription-api-credits branch February 3, 2026 16:28
Sign up for freeto 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.

Merge Subscription Credits with API Credits - Frontend Updates

2 participants

@AnthonyRonning@marksftw