subscription

Summary

The billing page with an active Team subscription.

Raw wireframe

• .context/designs/web/store/subscription.html

Why it is drawn this way

Active needs two things. hasActiveSubscription is status ACTIVE and a stripeSubscriptionId. It turns the badge green, shows the two buttons, and hides both Upgrade buttons.

The current plan is tinted and says Active. The card whose tier matches license.plan gets the blue tint, and a green Active line under its name.

The Subscription ID is cut. The Stripe ID is shown as its first 20 characters and .... The value drawn is made up.

Manage Payments leaves the site. It opens a Stripe billing-portal session by setting window.location.href, so it is a button.

Other statuses are not drawn. PAST_DUE gives a yellow badge and CANCELED a red one with the label Canceled on, which prints the period end. In both, the action row goes and the Upgrade buttons return.

Related

• billing
• cancel-subscription
• invoices
• plans

Sources

• apps/website/src/app/workspace/[id]/billing/page.tsx
• packages/ui/src/utils/format.utils.ts