feat(usage-indicator): added ability to see current usage#925
feat(usage-indicator): added ability to see current usage#925waleedlatif1 merged 2 commits intostagingfrom
Conversation
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
1 Skipped Deployment
|
![greptile-apps[bot]](https://avatars.githubusercontent.com/in/867647?s=60&v=4){kind=small}
There was a problem hiding this comment.
Greptile Summary
This PR introduces a comprehensive usage indicator feature that allows users to monitor their subscription billing usage directly from the sidebar. The implementation adds a new UsageIndicator component that displays current usage statistics with progress bars, plan information, and contextual upgrade prompts based on usage thresholds.
The feature integrates seamlessly with the existing sidebar architecture by adding the usage indicator above the navigation bar with proper spacing calculations. A companion SubscriptionModal component provides detailed plan comparison and upgrade functionality, replacing a previous implementation with improved data flow through a centralized Zustand subscription store.
Visual enhancements include new gradient color variables (vibrant purple and pink) added to both the global CSS and Tailwind configuration, enabling gradient text effects for paid plan names and styled badges. The usage indicator is conditionally rendered - hidden in development environments but visible in production - and includes loading states with skeleton components for smooth user experience.
The implementation follows established patterns in the codebase, using proper error handling, responsive design, and modular component architecture. The feature addresses a common UX need by providing immediate visibility into billing usage without requiring navigation to separate billing pages, while strategically prompting upgrades when users approach usage limits.
PR Description Notes:
- The PR template is incomplete with empty sections for summary, issue reference, testing details, and missing checkboxes
- No screenshots or videos are provided despite this being a UI-focused feature
Confidence score: 4/5
- This PR introduces new functionality with proper integration patterns but has some implementation concerns that warrant review
- Score reflects solid architectural choices but potential issues with error handling, environment detection, and missing test coverage
- Pay close attention to usage-indicator.tsx and subscription-modal.tsx for proper error handling and data validation
7 files reviewed, 3 comments
| const currentUrl = window.location.origin + window.location.pathname | ||
|
|
||
| try { | ||
| const upgradeParams: any = { |
There was a problem hiding this comment.
style: Using any type reduces type safety. Consider defining a proper interface for upgradeParams to ensure type correctness and better IntelliSense support.
Context Used: Context - Avoid using type assertions to 'any' in TypeScript. Instead, ensure proper type definitions are used to maintain type safety. (link)
| await betterAuthSubscription.upgrade(upgradeParams) | ||
| } catch (error) { | ||
| logger.error('Failed to initiate subscription upgrade:', error) | ||
| alert('Failed to initiate upgrade. Please try again or contact support.') |
There was a problem hiding this comment.
style: Using alert() for error handling provides poor UX. Consider using a toast notification or proper error state.
| const planType = subscription.isEnterprise | ||
| ? 'enterprise' | ||
| : subscription.isTeam | ||
| ? 'team' | ||
| : subscription.isPro | ||
| ? 'pro' | ||
| : 'free' |
There was a problem hiding this comment.
style: Complex nested ternary logic could be extracted into a separate function for better readability
…cement of billing usage
…i#925) * feat(usage-indicator): added ability to see current usage * feat(billing): added billing ennabled flag for usage indicator, enforcement of billing usage --------- Co-authored-by: waleedlatif1 <walif6@gmail.com>
2 participants
Summary
Brief description of what this PR does and why.
Fixes #(issue)
Type of Change
Testing
How has this been tested? What should reviewers focus on?
Checklist
Screenshots/Videos