Monthly Billing Option — UI Prototype Scenes

Scene 1 — Upgrade Trial Dialog (Annual selected, default)

The existing UpgradeTrialDialog with the new billing cycle toggle added between the header and plan cards. Default selection is Annual. Plan cards show the annual-equivalent monthly price ($15/$60) with "Billed annually" note — matching the current behavior. Per spec: users choose plan tier and billing cycle when converting from trial.

Upgrade Acme Corp

Subscribe to continue using Enterprise features

Save 17%
DOWNGRADE
Teams
$15/user/month
Billed annually
  • All the features from open source
  • Centralized billing
  • Team management dashboard
  • Project-level usage analytics
  • AI Adoption Score
  • Shared Modes
  • Role-based access permissions
  • Control data collection policy
CURRENT PLAN
Enterprise
$60/user/month
Billed annually
  • All the features from teams
  • Limit models and/or providers
  • Audit logs
  • SSO, OIDC, & SCIM support
  • SLA commitments
  • Dedicated support channels
Selected

You'll be redirected to Stripe to complete your purchase

Credits are not included with your subscription. Use what works best for your team no matter what plan you choose.

Kilo Pass

Credit subscription with bonus credits. Learn more

Pay-as-you-go

Purchase credits as needed. Only pay for what you use. Learn more

Bring Your Own Key

Use API keys from your existing AI provider accounts. Learn more

Questions? Contact Support.

Scene 2 — Subscription Overview (Active Monthly Enterprise)

The existing SubscriptionOverviewCard with an active monthly Enterprise subscription. Same 4-column stats grid (Next Payment, Seats Used, Billing Cycle, Days Until Renewal) with green left border. The "Billing Cycle" column now shows "Monthly" where it previously always showed "Yearly". The Quick Actions card adds "Switch to Annual".

Current Subscription Active
Next Payment
$720.00
April 26, 2026
Seats Used
6/10
4 seats available
Billing Cycle
Monthly
Collection: Automatic
Days Until Renewal
31
Auto-renewal enabled
Quick Actions

Scene 3 — Subscription Overview (Pending Cycle Change)

The subscription overview when a billing cycle change has been scheduled (monthly to annual). A pending-change banner appears below the stats grid — same pattern as the existing SeatCountChangeNotification but for billing cycle changes. Per spec: cycle changes take effect at renewal, no proration.

Current Subscription Active
Next Payment
$720.00
April 26, 2026
Seats Used
6/10
4 seats available
Billing Cycle
Monthly
Collection: Automatic
Days Until Renewal
31
Auto-renewal enabled
Switching to Annual billing on April 26, 2026. Your rate will change from $72/seat/month to $60/seat/month ($720/seat/year). No charges or proration until the switch takes effect.

Billing Cycle Change Scheduled

After April 26 you'll be billed $7,200/year (10 seats × $720/seat/yr).

Scene 4a — Switch to Annual Billing Confirmation

Confirmation dialog when an owner/billing manager clicks "Switch to Annual". Uses the same Dialog/DialogHeader/DialogFooter pattern as CancelSubscriptionModal. Shows current vs new billing with savings. Per spec: takes effect at renewal, no proration.

Switch to Annual Billing
This change will take effect at your next renewal date.
Now
Monthly Billing
$72/seat/month · 10 seats = $720/month
New
Annual Billing
$60/seat/month · 10 seats = $7,200/year
Save $1,440/year (17%)
Takes effect: April 26, 2026
Your current monthly billing continues until then. No proration or immediate charges.

Scene 4b — Switch to Monthly Billing Confirmation

Reverse direction: annual to monthly. Includes a cost-increase warning in the same amber alert style used for seat downgrade warnings in SeatChangeModal.

Switch to Monthly Billing
This change will take effect at your next renewal date.
Now
Annual Billing
$60/seat/month · 10 seats = $7,200/year
New
Monthly Billing
$72/seat/month · 10 seats = $720/month
Note: Switching to monthly billing will increase your cost by $1,440/year ($720/mo × 12 = $8,640 vs $7,200 annually). The annual plan offers 12 months for the price of 10.
Takes effect: March 26, 2027
Your annual subscription continues until then. No refunds or immediate changes.

Scene 5 — Interactive Seat Change (Monthly Enterprise)

Interactive SeatChangeModal for a monthly Enterprise subscription ($72/seat/mo). Use the +/− buttons to try increasing seats (prorated charge) or decreasing (end-of-cycle, no proration). The validation error appears if you go below active usage (6 seats in use). Per spec: increases are prorated immediately, decreases take effect at end of billing cycle, both cycles.

Change Seat Count
Adjust the number of seats for your organization subscription.
Current Seats
10 seats
Active Usage
6 of 10 seats in use
New Seat Count

Scene 6 — Subscription Overview (Active Annual Teams)

An annual Teams subscription. The "Billing Cycle" column shows "Yearly" (matching formatBillingInterval output). Quick Actions shows "Switch to Monthly" instead of "Switch to Annual". The seat count is near capacity — Teams plan restricts invitations when seats are full.

Current Subscription Active
Next Payment
$1,440.00
March 26, 2027
Seats Used
7/8
1 seat available
Billing Cycle
Yearly
Collection: Automatic
Days Until Renewal
365
Auto-renewal enabled
Quick Actions