feat: Billing page — tiered pricing selector + split payment toggle #10

New issue

Open

opened 2026-03-16 21:58:16 +00:00 by forgejo_admin · 0 comments

forgejo_admin commented

2026-03-16 21:58:16 +00:00

Owner

Lineage

plan-wkq → Phase 10 (Playground) → Phase 14 UX preview

Repo

forgejo_admin/westside-playground

User Story

As a parent viewing my billing page,
I want to see my specific pricing tier and have the option to split payments,
So that I understand what I'm paying and can manage my budget.

Context

billing.html currently shows $200/mo hardcoded. Phase 14 (Billing Tiers) has three tiers: Cyprus Girls $160/mo, LCA $180/mo, Standard $200/mo. Also a split payment option: $100 at beginning + $100 at end of month. The playground should show this UX now.

Key changes:

In the Subscription section, show the tier name and amount (e.g., "Standard Plan — $200/month")
Add a "Payment Schedule" info card showing: "Full payment: $200 on the 1st" vs "Split payment: $100 on the 1st + $100 on the 15th"
Add a toggle or radio to show split vs full payment display
Keep all existing billing UI (card on file, invoices, manage subscription) — just add the tier/split sections

File Targets

billing.html — add tier display and split payment UX

Acceptance Criteria

Subscription section shows tier name (e.g., "Standard Plan") with amount
Payment schedule section visible showing full vs split option
Visual distinction between the three tiers ($160/$180/$200) — can be a simple label
Split payment toggle or display showing $100+$100 schedule
Existing billing UI unchanged (card, invoices, manage subscription)
Uses existing CSS from shared/app.css

Test Expectations

No automated tests (static HTML). Visual verification only.

Constraints

HTML + CSS only (minimal JS for toggle is OK)
Do NOT change other files

Checklist

PR opened
No unrelated changes

project-westside-basketball

### Lineage `plan-wkq` → Phase 10 (Playground) → Phase 14 UX preview ### Repo `forgejo_admin/westside-playground` ### User Story As a parent viewing my billing page, I want to see my specific pricing tier and have the option to split payments, So that I understand what I'm paying and can manage my budget. ### Context `billing.html` currently shows $200/mo hardcoded. Phase 14 (Billing Tiers) has three tiers: Cyprus Girls $160/mo, LCA $180/mo, Standard $200/mo. Also a split payment option: $100 at beginning + $100 at end of month. The playground should show this UX now. Key changes: - In the Subscription section, show the tier name and amount (e.g., "Standard Plan — $200/month") - Add a "Payment Schedule" info card showing: "Full payment: $200 on the 1st" vs "Split payment: $100 on the 1st + $100 on the 15th" - Add a toggle or radio to show split vs full payment display - Keep all existing billing UI (card on file, invoices, manage subscription) — just add the tier/split sections ### File Targets - `billing.html` — add tier display and split payment UX ### Acceptance Criteria - [ ] Subscription section shows tier name (e.g., "Standard Plan") with amount - [ ] Payment schedule section visible showing full vs split option - [ ] Visual distinction between the three tiers ($160/$180/$200) — can be a simple label - [ ] Split payment toggle or display showing $100+$100 schedule - [ ] Existing billing UI unchanged (card, invoices, manage subscription) - [ ] Uses existing CSS from `shared/app.css` ### Test Expectations - No automated tests (static HTML). Visual verification only. ### Constraints - HTML + CSS only (minimal JS for toggle is OK) - Do NOT change other files ### Checklist - [ ] PR opened - [ ] No unrelated changes ### Related - `project-westside-basketball`