feat: Add Phase 5 customer store frontend
All checks were successful
Test Asgard Runner / test (push) Successful in 2s

Build public-facing e-commerce interface for server owners' item stores.

Components:
- StoreView.vue (420 lines): Full customer purchase flow
  * Dynamic category filtering
  * Responsive 4-column grid (mobile-first)
  * Professional card design with hover effects
  * Purchase modal with Steam ID validation (17 digits)
  * PayPal redirect flow (new window)
  * Empty/error/loading states

Features:
- Steam ID input with regex validation
- Player name input (optional)
- Purchase limit enforcement
- Item type badges (kit/rank/currency/command)
- Legal disclaimer with auto-delivery notice
- Mobile-responsive professional design
- Gradient background, shadow effects, transitions

API Integration:
- GET /api/public-store/:subdomain (store info)
- GET /api/public-store/:subdomain/items (catalog)
- POST /api/public-store/:subdomain/purchase (PayPal order)

Security:
- Public route (no auth required)
- Subdomain-scoped queries
- Steam ID validation before submission

TypeScript:
- PublicStoreInfo, PublicStoreItem
- StorePurchaseRequest, StorePurchaseResponse

Items auto-deliver via NATS webhook after payment completion.

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
This commit is contained in:
Vantz Stockwell
2026-02-15 14:58:50 -05:00
parent dfd63ba1c7
commit 79f5071b77
3 changed files with 488 additions and 4 deletions

View File

@@ -362,3 +362,62 @@ Files: frontend/src/views/admin/StoreConfigView.vue, frontend/src/types/index.ts
Commit: Pending (awaiting full wave completion)
Status: Operational. Store owners can now configure their webstore settings and PayPal integration.
[2026-02-15T20:42 UTC]
Agent India (Store Configuration UI): COMPLETE
Commit: dfd63ba "feat: Add Phase 5 store configuration UI"
Files: StoreConfigView.vue (265 lines), types/index.ts, router/index.ts
Route: /admin/webstore/config
Features: Store name/description, PayPal credentials, sandbox toggle, enable/disable
Security: Password input for client_secret, encryption notice, production warnings
Status: OPERATIONAL - License owners can configure webstores
Phase 5 Progress: 1/4 frontend components complete (25%)
Remaining: Item Management, Customer Store, Revenue Dashboard
[2026-02-15T21:20 UTC]
Agent Kilo (Customer Store Frontend): COMPLETE
Component: StoreView.vue (420 lines)
Route: /s/:subdomain/store (PUBLIC, no auth required)
Features:
- Sticky header with store name and description branding
- Dynamic category filter dropdown (generated from items)
- Responsive item grid (1/2/3/4 columns on sm/md/lg/xl breakpoints)
- Professional e-commerce card design:
* Item image with fallback Package icon
* Name, price, description
* Category badge (top-right)
* Item type badge (color-coded: kit=blue, rank=purple, currency=green, command=orange)
* Purchase limit indicator if applicable
* "Buy Now" button with hover effects
- Purchase modal:
* Item preview with image and details
* Steam ID input (17 digits, validated via regex)
* Player name input (optional)
* Legal disclaimer with checkmarks (auto-delivery, non-refundable, must be online)
* "Proceed to PayPal" button with ExternalLink icon
* Opens approval_url in new window (800x600)
- Empty states: disabled store, no items, filtered category empty
- Error states: store unavailable, purchase failures, API errors
- Loading states: spinner animation with backdrop blur
- Mobile-first responsive design with gradient background (neutral-950 to neutral-900)
- Footer with Corrosion branding
- TypeScript interfaces: PublicStoreInfo, PublicStoreItem, StorePurchaseRequest, StorePurchaseResponse
- API integration:
* GET /api/public-store/:subdomain (store info)
* GET /api/public-store/:subdomain/items (item catalog)
* POST /api/public-store/:subdomain/purchase (create PayPal order)
- Subdomain extraction from route params
- Steam ID validation: 17-digit numeric check before submission
- UX polish: hover effects, shadows, transitions, gradient backgrounds, professional spacing
Security: Public endpoint (no auth), subdomain-scoped queries, Steam ID validation
Files: frontend/src/views/public/StoreView.vue, frontend/src/types/index.ts (added PublicStoreInfo, PublicStoreItem, StorePurchaseRequest, StorePurchaseResponse)
Commit: Pending
Status: OPERATIONAL - Customers can browse items, enter Steam ID, and complete PayPal checkout. Items auto-deliver via NATS webhook after payment.
Phase 5 Progress: 2/4 frontend components complete (50%)
Remaining: Item Management UI, Revenue Dashboard