Skip to content

Build paywall and upgrade UI in the side panel #10

Description

@PAMulligan

Description

Add the in-extension upgrade experience: a clear "Upgrade to Pro" entry point, a concise paywall/comparison surface, and the over-quota prompt shown when a free user runs out of AI for the day. Upgrade opens Stripe Checkout in a new tab via the backend, and the panel reflects Pro status once the entitlement refreshes.

Why

Conversion happens at the moment a user feels the limit, so the upgrade path must be obvious, honest, and one click away from checkout. A good paywall also sets expectations (what Pro includes, the price) which reduces refunds and support. Showing it inline in the side panel keeps the user in context instead of bouncing them to a website.

Acceptance Criteria

  • Persistent, unobtrusive "Upgrade" entry point for free users
  • Paywall surface lists Pro benefits and price clearly (no dark patterns)
  • Over-quota state shows a friendly prompt with the upgrade CTA and reset timing
  • "Upgrade" calls the backend checkout endpoint and opens Stripe Checkout in a new tab
  • On return, entitlement refresh flips the UI to Pro without a manual reload
  • Pro users never see paywall or upgrade prompts
  • Matches the Signal theme in light and dark, accessible and keyboard-navigable
  • Component tests for free, over-quota, and Pro states
  • CI passes

Resources

Metadata

Metadata

Assignees

Labels

Type

No type

Projects

No projects

Relationships

None yet

Development

No branches or pull requests

Issue actions