# ConvertyBot Admin UI (v2.1) — Subscription page Text description of the new `Subscription & Billing` screen so you can visualize it before opening the admin. Everything below maps 1:1 to the rendered DOM. --- ## Page flow (top → bottom) ``` ┌──────────────────────────────────────────────────────────────────────┐ │ [optional] Red/amber alert banner (past_due / expired / cancelled) │ ├──────────────────────────────────────────────────────────────────────┤ │ HERO — indigo-violet gradient card │ │ ┌─ eyebrow: "CURRENT PLAN" ───────────────────────────────────────┐ │ │ │ Growth [tier chip: growth •] │ │ │ │ [● Active] [/MO] ← status pill + interval pill │ │ │ └─────────────────────────────────────────────────────────────────┘ │ │ meta rows: │ actions: │ │ 📅 Next billing: │ [ Manage billing ] (solid white) │ │ May 17, 2026 │ [ Upgrade ] (ghost, white border) │ │ (30 days) │ │ └──────────────────────────────────────────────────────────────────────┘ ┌─ USAGE THIS CYCLE ───────────────────────────────────────────────────┐ │ 💬 CONVERSATIONS 👥 VISITORS ANALYSED │ │ 2,341 / 5,000 +120 from packs 47% 18,204 / 50,000 36% │ │ ━━━━━━━━━━━━━━━━━━━━━━━━━ ━━━━━━━━━━━━━━━━━━━ │ │ (blue bar, 47% fill) (blue bar, 36% fill) │ │ Resets in 14 days Resets in 14 days │ │ ─────────────────────────────────────────────────────────────────── │ │ Coupons: 42 · Conversions: 18 · Total chats: 12,041 │ └──────────────────────────────────────────────────────────────────────┘ Progress-bar color bands: 0–49% → green (is-success) 50–79% → blue (is-info) 80–99% → amber (is-warning) 100% → red+pulse(is-danger) ┌─ PLANS ───────────────────────── [ Monthly | Yearly -20% ] ─────────┐ │ │ │ ┌──────────────┐ ┌────────RECOMMENDED┐ ┌──────────────┐ │ │ │ •starter │ │ •growth │ │ •pro │ │ │ │ Starter │ │ Growth [highlight] │ │ Pro │ │ │ │ $19 /mo │ │ $49 /mo Save $98/y │ │ $99 /mo │ │ │ │ ✓ 1k convos │ │ ✓ 5k convos │ │ ✓ 15k convos │ │ │ │ ✓ 10k visitors│ │ ✓ 50k visitors │ │ ✓ 150k visitrs │ │ │ │ ✓ 3 strategies│ │ ✓ 5 strategies │ │ ✓ 7 strategies │ │ │ │ ✓ Basic analyt│ │ ✓ Smart coupons │ │ ✓ A/B + export │ │ │ │ │ │ ✓ Advanced analyt. │ │ ✓ Priority │ │ │ │ [ Downgrade ] │ │ [ Upgrade ] │ │ [ Upgrade ] │ │ │ └──────────────┘ └────────────────────┘ └──────────────┘ │ │ (greyed out if (bold outline + (standard card) │ │ below current) Recommended ribbon) │ │ │ │ + business, enterprise (row 2) │ │ │ │ ▸ See full feature comparison (collapsed
) │ │ └─ expands to a sticky-header matrix table: 9 features × 6 tiers │ │ current-plan column highlighted in indigo-50 │ └──────────────────────────────────────────────────────────────────────┘ ┌─ BOOST / PACKS (dark indigo section, visually distinct) ─────────────┐ │ "Run out of conversations? Top up in seconds." │ │ │ │ ┌──────────┐ ┌─────BEST VALUE─────┐ ┌──────────┐ │ │ │ Top-up │ │ Top-up │ │ Top-up │ │ │ │ 100 conv │ │ 500 conv │ │ 1,000 │ │ │ │ $5 │ │ $20 │ │ $35 │ │ │ │ $0.05/c │ │ $0.04/c │ │ $0.035/c │ │ │ │ [Buy now]│ │ [Buy now] │ │ [Buy now]│ │ │ └──────────┘ └────────────────────┘ └──────────┘ │ └──────────────────────────────────────────────────────────────────────┘ ┌─ WHAT'S NEW IN CONVERTYBOT V2 (collapsed by default) [Latest] ▼ ──┐ │ v2.1.0 · Modernized subscription dashboard · 2026-04-17 │ │ • Brand-new hero card with live status pill and billing date │ │ • Smarter usage bars (green → amber → red transitions) │ │ • Annual/monthly segmented toggle with savings badge │ │ • Top-up packs block with price-per-conversation math │ │ v2.0.0 · Six-tier pricing & proactive strategies · 2026-03-01 │ │ • New tiers + 7 proactive strategies + backend feature flags │ └──────────────────────────────────────────────────────────────────────┘ ┌─ API CONFIGURATION ─────────────────────────────────────────────────┐ │ 🔒 API KEY │ │ [sk_live_••••••••••••••••••••••••••] [ Copy ] │ │ 🌐 BACKEND API URL │ │ [https://api.convertybot.com/api ] [ Save & re-register ] │ └──────────────────────────────────────────────────────────────────────┘ ``` --- ## Components map (DOM → CSS → JS) | Section | Container ID | Rendered by | | ---------------------------- | ---------------------- | ----------------------- | | Alert banner | `.cb2-alert` | PHP (subscription.php) | | Hero / current plan | `#cb-hero` | JS → `renderHero()` | | Usage progress cards | `#cb-usage-grid` | JS → `renderUsage()` | | Quick stats line | `#cb-quickstats` | JS → `renderUsage()` | | Plans grid | `#cb-plans-grid` | JS → `renderPlansGrid()`| | Monthly/annual toggle | `.cb2-segmented` | CSS + small click hook | | Comparison matrix | `#cb-matrix-body` | JS → `renderMatrix()` | | Packs grid | `#cb-packs-grid` | JS → `renderPacks()` | | What's new | `#cb-whatsnew-list` | JS → `renderWhatsNew()` | | API config | `.cb2-api` | PHP | ## Design tokens (CSS custom properties on `.cb2-page`) ``` --cb2-brand #3b5bff (deep indigo-blue) --cb2-brand-600 #2d49e6 --cb2-brand-50 #eef1ff --cb2-success #16a34a --cb2-info #0ea5e9 --cb2-warning #f59e0b --cb2-danger #dc2626 --cb2-radius-sm/md/lg 8 / 12 / 16 --cb2-shadow-sm/md/lg/brand soft, layered shadows ``` ## Responsive breakpoints - **≥1080 px** — 3-column plan grid, hero in 3 columns - **720–1080 px** — 2-column plan grid, hero in 2 columns - **<720 px** — single-column everywhere, hero actions stack ## Accessibility notes - Segmented toggle uses `role="tablist"` / `role="tab"` / `aria-selected` - Alert banner has `role="alert"` so screen readers announce it - `
` elements for matrix & changelog are keyboard-friendly by default - Focus ring: 2 px solid `--cb2-brand` with 2 px offset on all buttons ## Backwards compatibility The JS keeps the original click-handler targets so external code that dispatches to these classes keeps working: - `.cb-upgrade-btn[data-plan][data-interval]` - `.cb-buy-pack-btn[data-pack]` - `.cb-open-portal-btn` - `#cb-billing-period-toggle` (hidden checkbox, mirrored by the segmented UI)