E9-F7: View Order Details (Buyer Only)¶
Epic: E9: Ticket Management & Delivery
Size: M (Medium)
Problem / Outcome¶
Allow ticket buyers to view their complete order information including order summary, payment details, invoice, and list of all tickets in the order. This enables buyers to understand what they purchased, access their invoice, and manage their tickets.
Important: This feature is available ONLY to the buyer (person who paid). Ticket recipients cannot access order details.
Scope¶
In-Scope:
- Order summary with line items and pricing
- Payment information (masked card, transaction ID, status)
- List of all tickets in order with status
- Invoice viewing and download (PDF)
- Navigation to individual ticket details
- Order status display (Paid, Partially Refunded, Refunded)
Out-of-Scope:
- Order modification (changing seats, adding tickets)
- Payment method changes
- Order history across multiple purchases (separate feature)
Acceptance Criteria¶
- AC1: Only buyer (purchaser) sees "View Order" button on ticket details
- AC2: Recipients do NOT see "View Order" button
- AC3: Order summary shows match details, line items (zone/category x quantity x price), service fees, and total
- AC4: Payment section shows masked card number, transaction ID, and payment status
- AC5: Tickets list shows all tickets in order with holder name, email, and status
- AC6: Invoice can be viewed in-app (PDF viewer) and downloaded
- AC7: "Send to Email" re-sends invoice to buyer's email
- AC8: Transferred/cancelled tickets shown with appropriate badge and disabled selection
User Interface¶
Order Details Screen¶
┌─────────────────────────────────────────────────────────────┐
│ Order #HNS-2026-00012345 │
│ Placed: 15 January 2026, 14:32 │
├─────────────────────────────────────────────────────────────┤
│ │
│ Croatia vs Portugal │
│ 23 March 2026, 20:45 • Maksimir Stadium │
│ │
│ ───────────────────────────────────────────────────────── │
│ │
│ Zone A - Category 1 │
│ 4 × €40.00 €160.00 │
│ │
│ Service Fee │
│ 4 × €2.00 €8.00 │
│ │
│ ───────────────────────────────────────────────────────── │
│ Total Paid €168.00 │
│ │
├─────────────────────────────────────────────────────────────┤
│ Payment Information │
│ ───────────────────── │
│ Method: Visa •••• 4455 │
│ Transaction ID: pi_3xyz789abc │
│ Status: ✓ Paid │
│ │
├─────────────────────────────────────────────────────────────┤
│ Tickets in this Order (4) │
│ ───────────────────────── │
│ [ ] 1. Ivan Horvat (ivan@email.com) [View Ticket] │
│ [ ] 2. Ana Horvat (ana@email.com) [View Ticket] │
│ [ ] 3. Marko Horvat (on your device) [View Ticket] │
│ [ ] 4. Petra Horvat (on your device) [View Ticket] │
│ │
│ [Select All] │
│ │
├─────────────────────────────────────────────────────────────┤
│ Documents │
│ ───────────────────── │
│ Invoice #INV-2026-00012345 [View PDF] [Download] │
│ │
├─────────────────────────────────────────────────────────────┤
│ │
│ [Cancel Selected Tickets] │
│ │
│ Need help? Contact Support │
└─────────────────────────────────────────────────────────────┘
Order Status Badges¶
| Badge | Color | When Displayed |
|---|---|---|
| PAID | Green | Order successfully paid |
| PARTIALLY REFUNDED | Orange | Some tickets cancelled |
| REFUNDED | Red | All tickets cancelled, full refund |
| REFUND PROCESSING | Yellow | Refund initiated, awaiting completion |
Data Model Impact¶
Order table (existing, extended):
- Add: refund_status (ENUM: none, partial, full)
- Add: refunded_amount (DECIMAL)
API Response for GET /orders/{id}:
- order_id
- order_number (display format: HNS-YYYY-XXXXXXXX)
- created_at
- match (id, teams, date, venue)
- line_items[] (zone, category, quantity, unit_price, subtotal)
- service_fee (quantity, unit_fee, subtotal)
- total_amount
- payment (method_type, last_four, transaction_id, status)
- tickets[] (id, holder_name, holder_email, status, seat_info)
- invoice (number, pdf_url)
- refund_status
- refunded_amount
Permissions/Roles¶
- Buyer (purchaser): Full access to order details, invoice, ticket list
- Ticket recipient: NO access - sees only their individual ticket with "Purchased by [Name]" banner
How to Verify¶
npm test -- --grep "view order details"
Test Scenarios: 1. Buyer views order - sees all details 2. Recipient views ticket - no "View Order" button 3. Invoice PDF opens correctly 4. Download saves to device 5. Transferred tickets show correct status
Dependencies¶
Implementation Tasks¶
See E9: Ticket Management Tasks
Doc References¶
- View My Tickets Flow (Step 6)
Last Updated: January 2026