#18 - v1.0 — SPA production readiness: payments, data seeding, polish - coopcloud_code/home

mik-tf commented

2026-03-24 19:45:19 +00:00

Member

Context

The Dioxus WASM SPA (v0.4.0-dev) has 100% route coverage (45 routes), SVG charts, full auth flow, and visual parity with the SSR. This issue tracks everything needed to make it production-ready.

Prior work: #11 (closed), #14 (closed), #15 (closed), #16 (closed), #17 (closed)

1. Credits & Payment Integration

The marketplace uses MC (Mycelium Credits) as base currency (1 MC = 1 USD). Users top up wallets, then spend credits.

Payment gateways to integrate:

Stripe (default) — card payments, instant top-up
Clickpesa — mobile money / African markets
Bank transfer — minimum $1,000 USD, manual approval

Wallet flow:

Buy Credits modal: connect to real payment gateway
Payment confirmation callback handling
Auto top-up: trigger Stripe charge when balance drops below threshold
Transfer credits between users (P2P)
Transaction history with real payment IDs

Currency display:

Currency preference persists in user profile (not just localStorage)
All prices show in user's preferred display currency
MC is the internal/base — display converts at real-time rates

2. Data Seeding (match production)

Production data comes from seed_marketplace.rhai (OSIS backend). Dev uses fixtures.

Update fixture products to match production names/prices
Add compute_slices with detailed names ("Cloud Slice - 4 vCPU / 8GB RAM / 100GB SSD")
Match production pricing (SPORE → MC, same values)
Seed all 4 demo users with realistic transaction history
Seed orders, rentals, deployments to populate all dashboard sections

3. SPA Polish

Category dropdown in products search bar (production has it, SPA doesn't)
Product detail page: verify with real product data, add Buy Now flow
Wallet page: match production layout (Current Balance + Available Balance cards)
Dashboard wallet chart: use real transaction data for trend line

Interactive features:

Notification badge with periodic polling (every 30s when auth'd)
Cart persistence across sessions (already in localStorage)
Order status real-time updates
Messaging: compose new thread, mark as read

Forms & validation:

Buy Credits: amount validation, payment method selection
Profile edit: save changes to backend
Settings: currency preference, notifications, SSH keys CRUD
Service request forms in dashboard

4. Production deployment

Build SPA for production (main branch → :latest tag)
Configure nginx for projectmycelium.org SPA subdomain
Smoke test against production
Documentation: SPA deployment guide

5. Testing

Expand smoke test to cover payment flow (mock)
Playwright E2E tests for SPA
Visual regression test automation

Signed-off-by: mik-tf

## Context The Dioxus WASM SPA (v0.4.0-dev) has 100% route coverage (45 routes), SVG charts, full auth flow, and visual parity with the SSR. This issue tracks everything needed to make it production-ready. Prior work: #11 (closed), #14 (closed), #15 (closed), #16 (closed), #17 (closed) ## 1. Credits & Payment Integration The marketplace uses **MC (Mycelium Credits)** as base currency (1 MC = 1 USD). Users top up wallets, then spend credits. ### Payment gateways to integrate: - [ ] **Stripe** (default) — card payments, instant top-up - [ ] **Clickpesa** — mobile money / African markets - [ ] **Bank transfer** — minimum $1,000 USD, manual approval ### Wallet flow: - [ ] Buy Credits modal: connect to real payment gateway - [ ] Payment confirmation callback handling - [ ] Auto top-up: trigger Stripe charge when balance drops below threshold - [ ] Transfer credits between users (P2P) - [ ] Transaction history with real payment IDs ### Currency display: - [ ] Currency preference persists in user profile (not just localStorage) - [ ] All prices show in user's preferred display currency - [ ] MC is the internal/base — display converts at real-time rates ## 2. Data Seeding (match production) Production data comes from `seed_marketplace.rhai` (OSIS backend). Dev uses fixtures. - [ ] Update fixture products to match production names/prices - [ ] Add compute_slices with detailed names ("Cloud Slice - 4 vCPU / 8GB RAM / 100GB SSD") - [ ] Match production pricing (SPORE → MC, same values) - [ ] Seed all 4 demo users with realistic transaction history - [ ] Seed orders, rentals, deployments to populate all dashboard sections ## 3. SPA Polish ### Visual refinements: - [ ] Category dropdown in products search bar (production has it, SPA doesn't) - [ ] Product detail page: verify with real product data, add Buy Now flow - [ ] Wallet page: match production layout (Current Balance + Available Balance cards) - [ ] Dashboard wallet chart: use real transaction data for trend line ### Interactive features: - [ ] Notification badge with periodic polling (every 30s when auth'd) - [ ] Cart persistence across sessions (already in localStorage) - [ ] Order status real-time updates - [ ] Messaging: compose new thread, mark as read ### Forms & validation: - [ ] Buy Credits: amount validation, payment method selection - [ ] Profile edit: save changes to backend - [ ] Settings: currency preference, notifications, SSH keys CRUD - [ ] Service request forms in dashboard ## 4. Production deployment - [ ] Build SPA for production (main branch → :latest tag) - [ ] Configure nginx for projectmycelium.org SPA subdomain - [ ] Smoke test against production - [ ] Documentation: SPA deployment guide ## 5. Testing - [ ] Expand smoke test to cover payment flow (mock) - [ ] Playwright E2E tests for SPA - [ ] Visual regression test automation Signed-off-by: mik-tf

mik-tf commented

2026-03-24 19:47:29 +00:00

Author

Member

Superseded by #19 which covers the complete client-side architecture plan including payments, keypair identity, and signed transactions.