RandomCoffee · Plans and Billing · built from antd 5 primitives · frontend/src/pages/account/admin/billing
Scope of this file
Complete port of Plans & Modules V3 - annotated onto antd 5 primitives, plus screens added since: 22 frames = 7 plan pages + 15 modals. Pages: Free, Pro, Pro with Mentoring, Pro+, Enterprise (nothing extra purchased), Enterprise with add-ons and Engagement Suite, Enterprise over quota. Modals: A1 to A8 (gating, upsell, Pro+ upgrade, Engagement Suite unlock), B1 to B6 (activation, management, churn), C1 (launch). Every element uses the class names antd renders and every icon carries its
data-icon component name.Component map
Every element below is an antd 5 component already used in the codebase. Theme comes from layouts/config.tsx — ConfigProvider prefixCls "rc", componentSize "large", cssVar prefix "rc". Class names below mirror the DOM antd renders, so a developer can map each block to its component.
Button
Cancel or downgrade
Button type primary default link danger disabled
Tag
Upgrade
Up to -15%
Current
Coming soon
Legacy kept
Tag color purple green gold
Segmented
Monthly
Annually Up to -15%
EUR
GBP
USD
Segmented options plan-list.tsx
FeaturesList item
Priority support
Lost on downgrade
Locked
FeaturesList icon CheckOutlined
Pages · Settings › Plan and Billing
Route /account/:slug/admin/settings/billing/:tab — v2/index.tsx renders Tabs with Subscription, Billing, Invoices history. Each frame below is the Subscription tab in a different plan state.
PAGE 1 · Subscription tab — FREE
Workspace on Free. The Free card is hidden from the grid since the user is already on it, so only upgrade paths show, Pro flagged as recommended. Both add-ons render locked. Guard: billing.isOnFree() true and billing.getStripePlan() null.
Segmented + Row gutter 16 + Col span 8 + PlanCard + Card
PAGE 2 · Subscription tab — PRO, no add-on
Reference paying state. The current-plan Card shows the Stripe product name plus SubscriptionStatus and the billing frequency line. Pro card button is disabled through billing.isCurrentPlan(plan). Mentoring is purchasable, Onboarding stays Soon.
current-plan.tsx PlanContainer + plan-card.tsx disabled billing.isCurrentPlan
PAGE 5 · Subscription tab — ENTERPRISE, nothing extra purchased
The common case for an existing Enterprise customer: on a contract, but has purchased neither the add-ons nor the extended quotas. Being on Enterprise does not grant unlimited Surveys, Broadcasts, Notes or audiences, those are paid for separately just like on Pro+, so the caps here sit at Pro level (2 of each) while active users and admin licenses follow the contract. The plan grid collapses to a single Enterprise block merged with the CSM card, since a contract customer should never be shown lower tiers or a self-serve price. Add-on CTA opens the ContactCsm modal.
v2/index.tsx showTabs false + NonStripedPlan + contact-csm.tsx
PAGE 3 · Subscription tab — PRO with Mentoring active
Same page once the add-on has been purchased. The Mentoring card switches to the active treatment: green Included tag and a neutral Manage your add-on button, never a red destructive action on the card itself. Quotas are unchanged from Pro because an add-on grants a capability, not quota.
plan-card.tsx active state + Button type default not danger
PAGE 4 · Subscription tab — PRO+
Pro+ is a higher tier, not a bundle: add-ons are still sold separately and must be unlocked and paid, so the Mentoring card is identical to the Pro page. What changes is quota only — 5 admin seats instead of 3, and unlimited audiences, surveys, broadcasts and notes.
classes/plans.tsx needs a 4th Plan.type for Pro+
PAGE 6 · Subscription tab — ENTERPRISE, add-ons and unlimited quotas purchased
An Enterprise customer who has paid for the add-ons and for Engagement Suite, the supplement that lifts Surveys, Broadcasts, Notes and audiences to unlimited. Engagement Suite is an Enterprise-only mechanic: on the self-serve plans those caps come with the tier itself (2 each on Free and Pro, unlimited on Pro+), so it only needs to be sold and re-billed to contract customers. The limits card names it explicitly so the reason the quotas read Unlimited is visible rather than implied. Compare with Page 5, the same plan without it.
contact-csm.tsx + over-limit treatment on the usage card
PAGE 7 · Over-quota behaviour only
Same workspace as Page 6, shown purely to document what an exceeded quota looks like. Active users and Admin licenses each cross their contract ceiling and take the amber treatment: warm border, amber counter, saturated gauge, a short overage note and their own Contact my CSM button, so the fix sits on the quota that is actually over rather than in a single footer alert. Amber rather than red, and nothing is blocked, because an Enterprise customer over their contract is a conversation with their CSM, not an error.
contact-csm.tsx + over-limit treatment on the usage card
Modals
All are antd Modal with width 700, destroyOnClose, okText and okButtonProps, mirroring plans/checkout-confirm-modal.tsx and plans/downgrad-to-free-modal.tsx.
MODAL A1 · Free user hits an add-on
Trigger: a Free user clicks any add-on CTA, or an UpgradeButton anywhere in the app. Add-ons need a paying plan, so this sells the PLAN and no add-on price is shown. Same pattern as the existing upgrade modal, including the two-column feature list and the terms checkbox that gates the ok button.
checkout-confirm-modal.tsx + TwoColumnsFeatures + billing.getProPlanFeatures
MODAL A2 · Engagement quota reached
Trigger: a Pro user creates a third Survey, Broadcast or Note, the Pro cap being 2 of each. Existing items are untouched, only creation past the cap is blocked. The upsell is Pro+ for unlimited engagement features and audiences, never an add-on. Secondary action always dismisses.
Modal okText Upgrade to Pro+ cancelText Not now
MODAL B1 · Activate an add-on, self-serve
Trigger: Activate Mentoring on Pro or Pro+. Shows the full breakdown of current plan plus add-on equals new total, and the card on file, then charges prorated immediately. Ok button carries loading and disabled exactly like the checkout modal.
okButtonProps loading disabled + getSubscriptionCheckoutSession
MODAL B4 · Deactivate an add-on
Reached from the neutral Manage your add-on button, never from a red button on the card itself. Lists what access is lost with the red CloseOutlined icon variant, then reassures: existing Mentoring programs are paused not deleted, effective at end of period. Reason textarea mirrors the downgrade modal.
downgrad-to-free-modal.tsx pattern + icon CloseOutlined color F04438
MODAL A3 · Mentoring locked at program creation
Trigger: the user picks the Mentoring type in the new-program selector without owning the add-on. Wording stays plan-agnostic so the same string works on Pro, Pro+ and Enterprise. Secondary action keeps them moving with Coffee Connect rather than dead-ending.
campaigns/new type selector + UpgradeButton components/upgrade-tag
MODAL A4 · Same gate, Enterprise variant
Replaces A1 and A3 for any Enterprise workspace. Never show self-serve pricing or a pay button to a contract customer: the only exit is the CSM, presented with name and photo for a human hand-off. Opens the ContactCsm modal which posts to billing/sendEnterpriseNote.
contact-csm.tsx dispatch billing/sendEnterpriseNote
MODAL A5 · After enforcement, grandfathering
State once a retroactive cap goes live. Items created before the enforcement date stay visible and functional with a Legacy kept tag and the counter reads 4 kept, limit is now 2. Only the create action is gated. Enforcement compares creation date to the enforcement date, never the count, and nothing is deleted.
Tag color default + disabled create Button + backend created_at check
MODAL A6 · Quota change announcement
Shown once, about 30 days before enforcement, to admins of affected workspaces. Three things to communicate: nothing is deleted, the new limit and its date, and how to stay unlimited. The secondary CTA defers without dismissing forever, so the reminder fires again close to the date.
Modal + Alert type info + one-shot flag per workspace
MODAL B2 · Activation confirmed
Success state right after payment. Recaps what was unlocked and pushes straight to the first useful action rather than dropping the user back on the billing page. In code this pairs with the appMessage.success toast that plan-card.tsx already fires on a successful subscription update.
plan-card.tsx updateCurrentSubscription + App.useApp message.success
MODAL B3 · Manage plan panel
Opens from the neutral Manage plan button. Anti-churn pattern: the positive actions are large rows, while cancel and downgrade is deliberately demoted to a small underlined text link at the bottom. Each row maps to an existing route or modal, so nothing new is needed on the backend.
Modal + List rows + Typography.Link for the demoted exit
MODAL B5 · Retention step before cancelling
Intercepts Cancel or downgrade before any destructive confirmation. Three lighter options are offered with Keep my plan as the primary action, and cancelling stays reachable through a plain text link. The reason textarea from downgrad-to-free-modal.tsx moves to the final step.
new step ahead of downgrad-to-free-modal.tsx
MODAL B6 · Final cancel confirmation
Last step, only reachable after the retention screen. States the exact end date, what is lost, and the 90 day data retention window so reactivating restores everything. The destructive button is the only red action in the whole flow, and the ok button stays disabled until a reason is given, exactly as the downgrade modal does today.
downgrad-to-free-modal.tsx okButtonProps disabled loading or not reason
MODAL C1 · Launch announcement
Shown once on next login to admins who have not activated Mentoring. A short video plus the concrete list of what the add-on unlocks, feature list rather than marketing copy. Maybe later dismisses without penalty and the modal never fires again for that workspace.
Modal width 720 + one-shot flag + video thumbnail asset
MODAL A7 · Upgrade to Pro+ (self-serve)
Trigger: any Upgrade to Pro+ button on Pro, or the upsell in Modal A2 / A5. Self-serve, so it states exactly what the tier lifts, shows the price difference rather than the raw price, and charges the card on file prorated. Pro+ is a tier change, not an add-on: the Mentoring add-on stays separately payable afterwards, which the footnote makes explicit so nobody expects it bundled.
plans/checkout-confirm-modal.tsx + classes/plans.tsx needs a 4th Plan.type
MODAL A8 · Unlock Engagement Suite (Enterprise)
The Enterprise counterpart of A7: Engagement Suite lifts the same quotas that Pro+ lifts on self-serve, so it is what an existing Enterprise customer buys to get unlimited. Contract plan, so no price and no pay button, only what it unlocks and a hand-off to the named CSM. Reached from the Unlock unlimited alert on Page 5 or from a quota gate on an Enterprise workspace.
billing/contact-csm.tsx dispatch billing/sendEnterpriseNote