feat(billing): align plan modal, paywall, and trial UX end-to-end#56
Merged
Conversation
- Redesign PlanSelectionModal as a hybrid layout (AI model + seats → metered usage limits → grouped included features → Pro premium delta), fixing feature ordering, limit label formatting, and the inverted card weight; surface roadmap items as a separate "Coming soon" list instead of green checks. - Add proactive PaywallOverlay for locked billing states and wire it into the live `default` layout (workspace routes only, settings exempt) so isLocked/requiresPayment are actually used. - Move TrialBanner into the `default` layout — its only previous mount point (`workspace` layout) is unused, so it never rendered; show the resolved plan name instead of the raw slug. - Align contradictory copy to plan-features data (single source of truth): neutral plan positioning and BYOA/Conversation API upgrade messages. - Add ai-model / limits / included / coming-soon / paywall dictionary keys; fix client generic.server_error -> common.server_error.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
End-to-end alignment of the SaaS plan/package modal, billing, and paywall surfaces with the real billing architecture. Plan-features
data.jsonis treated as the single source of truth; all UI and copy derive from it. Trial-start stays card-based (hosted checkout); the existing webhook + post-payment flows were verified complete and left unchanged.Pricing model decision: hybrid — shared core shown once, then a usage/limit + seats + AI-model comparison, with Pro-only premium features highlighted.
What changed
Plan modal (
PlanSelectionModal.vue) — hybrid redesignsort_orderinterleaving); Pro shows the "Everything in Starter, plus…" delta.grid-cols-1 sm:grid-cols-2), balanced card heights, simplified CTA logic.Proactive paywall (new
PaywallOverlay.vue)trial_expired/grace_expired/canceled_expired); owner/admin get "Choose a plan" / "Update payment method", members get an explanatory message.isLocked/requiresPaymentare now actually used.defaultlayout, gated to workspace routes;/settingsstays reachable.TrialBanner — was dead, now live
workspacelayout) is unused by any page, so the banner never rendered. Moved intodefaultlayout; shows the resolved plan name instead of the raw slug.Content / dictionary alignment
api.byoa_upgrade/api.conversation_upgradeerror messages to the data (Pro-only).generic.server_error→common.server_error(key was missing from ui-strings).Verification
pnpm lint:fix→ 0 errorspnpm typecheck→ cleanpnpm test→ 633/633 passing (incl. license-content-parity; no plan price/limit values changed)Follow-ups
data.json. Opening them to all plans is a 2-line data change if desired.workspace.vuelayout is unused (dead) — cleanup candidate, left untouched here.