b06a5e692b
All checks were successful
Deploy to Staging / Build Images (pull_request) Successful in 6m42s
Deploy to Staging / Deploy to Staging (pull_request) Successful in 30s
Deploy to Staging / Verify Staging (pull_request) Successful in 7s
Deploy to Staging / Notify Staging Ready (pull_request) Successful in 6s
Deploy to Staging / Notify Staging Failure (pull_request) Has been skipped
- Add useNeedsVehicleSelection and useVehicles hooks in App.tsx - Show blocking VehicleSelectionDialog after auth gate ready - Call downgrade API on confirm to save vehicle selections - Invalidate queries after selection to proceed to app 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Subscription Feature
Frontend UI for subscription management with Stripe integration.
Overview
Provides subscription tier management, payment method updates, billing history, donations, and vehicle selection during downgrade flow.
Components
TierCard
Subscription plan display with:
- Plan name and pricing (monthly/yearly toggle)
- Feature list
- Current plan indicator
- Upgrade/downgrade button
PaymentMethodForm
Stripe Elements integration for:
- Credit card input with CardElement
- Real-time validation
- Payment method creation
- Error handling
BillingHistory
Invoice list with:
- Date, amount, status
- PDF download links
- MUI Table component
VehicleSelectionDialog
Vehicle selection during downgrade:
- Checkbox list for each vehicle
- Counter showing selected vs allowed
- Warning about tier-gated vehicles
- Validation preventing over-selection
DowngradeFlow
Orchestrates downgrade process:
- Checks vehicle count vs target tier limit
- Shows VehicleSelectionDialog if needed
- Submits vehicle selections to backend
DonationSection / DonationSectionMobile
One-time donation form:
- Free-form amount input (no presets)
- $0.50 minimum (Stripe limit)
- Stripe CardElement for payment
- Donation history table
- Success feedback
Pages
SubscriptionPage (Desktop)
MUI-based layout:
- Current plan card with status badges
- Three-column tier comparison
- Monthly/yearly toggle
- Payment method modal
- Billing history table
- Donation section
SubscriptionMobileScreen (Mobile)
Tailwind-based layout:
- GlassCard styling
- Stacked card layout
- Touch-friendly buttons (44px min)
- Modal payment forms
API Integration
Subscriptions
| Endpoint | Method | Hook |
|---|---|---|
| /api/subscriptions | GET | useSubscription() |
| /api/subscriptions/checkout | POST | useCheckout() |
| /api/subscriptions/cancel | POST | useCancelSubscription() |
| /api/subscriptions/reactivate | POST | useReactivateSubscription() |
| /api/subscriptions/downgrade | POST | useDowngrade() |
| /api/subscriptions/payment-method | PUT | useUpdatePaymentMethod() |
| /api/subscriptions/invoices | GET | useInvoices() |
Donations
| Endpoint | Method | Hook |
|---|---|---|
| /api/donations | POST | useCreateDonation() |
| /api/donations | GET | useDonations() |
Hooks
| Hook | Purpose |
|---|---|
| useSubscription() | Fetch current subscription |
| useCheckout() | Upgrade subscription |
| useCancelSubscription() | Cancel subscription |
| useReactivateSubscription() | Reactivate subscription |
| useDowngrade() | Downgrade with vehicle selection |
| useInvoices() | Fetch billing history |
| useCreateDonation() | Create donation payment |
| useDonations() | Fetch donation history |
Environment Variables
VITE_STRIPE_PUBLISHABLE_KEY=pk_test_...
Subscription Tiers
Free ($0)
- 2 vehicles
- Basic tracking
- Standard reports
Pro ($1.99/month or $19.99/year)
- Up to 5 vehicles
- VIN decoding
- OCR functionality
- API access
Enterprise ($4.99/month or $49.99/year)
- Unlimited vehicles
- All Pro features
- Priority support
Routing
- Desktop:
/garage/settings/subscription - Mobile:
navigateToScreen('Subscription')
Files
| File | Purpose |
|---|---|
| types/subscription.types.ts | TypeScript interfaces |
| api/subscription.api.ts | API client calls |
| hooks/useSubscription.ts | React Query hooks |
| constants/plans.ts | Tier configuration |
| components/TierCard.tsx | Plan display card |
| components/PaymentMethodForm.tsx | Stripe Elements form |
| components/BillingHistory.tsx | Invoice table |
| components/VehicleSelectionDialog.tsx | Vehicle selection modal |
| components/DowngradeFlow.tsx | Downgrade orchestrator |
| components/DonationSection.tsx | Desktop donation UI |
| components/DonationSectionMobile.tsx | Mobile donation UI |
| pages/SubscriptionPage.tsx | Desktop page |
| mobile/SubscriptionMobileScreen.tsx | Mobile screen |
Testing
- View current plan
- Toggle monthly/yearly billing
- Upgrade: Select tier, enter payment, complete checkout
- Downgrade: Select vehicles to keep if over limit
- Cancel/reactivate subscription
- Make a donation
- View billing and donation history