[OPIK-2270] [FE] [Improve self-serve flow] Add Visible Upgrade button #3113
Conversation
📋 PR Linter Failed❌ Invalid Title Format. Your PR title must include a ticket/issue number and at least one component tag (
Example: |
There was a problem hiding this comment.
Pull Request Overview
This PR adds a prominent "Upgrade" button to the user interface header to improve the self-serve billing flow. The button appears next to the app selector and user menu, making billing upgrades more discoverable for organization administrators.
Key Changes:
- Added upgrade button that only displays for organization admins on non-academic plans
- Extended Organization type to include academic plan status
- Positioned button strategically in the header for maximum visibility
Reviewed Changes
Copilot reviewed 2 out of 2 changed files in this pull request and generated 1 comment.
| File | Description |
|---|---|
apps/opik-frontend/src/plugins/comet/types.ts |
Added academic boolean field to Organization interface |
apps/opik-frontend/src/plugins/comet/UserMenu.tsx |
Added upgrade button component with conditional rendering logic |
| href={buildUrl( | ||
| `organizations/${organization.id}/billing`, | ||
| workspaceName, | ||
| "&initialOpenUpgradeCard=true", |
There was a problem hiding this comment.
The query parameter format is inconsistent. Consider using '?initialOpenUpgradeCard=true' instead of '&initialOpenUpgradeCard=true' as the third parameter, or use a proper URL building utility that handles parameter concatenation correctly.
| "&initialOpenUpgradeCard=true", | |
| "?initialOpenUpgradeCard=true", |
Copilot uses AI. Check for mistakes.
andriidudar
changed the title
📋 PR Linter Failed❌ Invalid Title Format. Your PR title must include a ticket/issue number and at least one component tag (
Example: |
andriidudar
changed the title
Details
This PR adds a visible upgrade button to the user menu as part of improving the self-serve flow. The upgrade button helps organization admins easily discover and access billing upgrade options directly from the main interface.
Key Changes:
UserMenucomponent that appears next to the app selector and user menuChange checklist
Issues
Testing
Documentation