feat: merge subscription credits with API credits UI updates #407
Conversation
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
📝 WalkthroughWalkthroughAdds API-credit awareness and purchase flow: billing type gains Changes
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
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes Possibly related issues
Possibly related PRs
Poem
🚥 Pre-merge checks | ✅ 4✅ Passed checks (4 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing touches
🧪 Generate unit tests (beta)
Comment |
Deploying maple with
|
| 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 |
![devin-ai-integration[bot]](https://avatars.githubusercontent.com/in/811515?s=60&v=4){kind=small}
Contributor
Greptile OverviewGreptile SummaryThis PR implements frontend changes to support merged subscription and API credits, creating a unified user experience where API credits extend subscription usage. Key Changes:
Implementation Quality:
Dependencies:
The frontend is ready to consume the backend changes once deployed. Confidence Score: 5/5
Important Files Changed
Sequence DiagramsequenceDiagram
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
|
![greptile-apps[bot]](https://avatars.githubusercontent.com/in/867647?s=60&v=4){kind=small}
AnthonyRonning
force-pushed
the
feat/merge-subscription-api-credits
branch
2 times, most recently
from
ae888af to
f6924c0
Compare
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
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 | 🟡 MinorMax plan gating hides API credits between 75–89% usage.
WhenisMaxPlanand 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
force-pushed
the
feat/merge-subscription-api-credits
branch
from
f6924c0 to
6058163
Compare
- 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>
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
Implements the frontend changes from #406 to support merged subscription and API credits.
Changes
api_credit_balancefield toBillingStatustypecan_chatis false to mention API credits optionapi_settingsURL param to navigate directly to API settings dialogDependency
This depends on billing server changes that will:
api_credit_balanceto the subscription status responsecan_chat: truewhen user has either subscription OR API creditsCloses #406
Summary by CodeRabbit
New Features
Documentation
Copy Updates
✏️ Tip: You can customize this high-level summary in your review settings.