P5 — Košík / Objednávka
Účel obrazovky
Přehled vybraných vstupenek před platbou. Uživatel kontroluje výběr, může změnit typ vstupného, uplatnit kupón a pokračovat k platbě. Countdown timer pokračuje z P4 — urgency je klíčová.
Content Priority
- Stepper progress — vizuální indikátor: Místa → Objednávka → Údaje → Platba → Potvrzení (aktuální krok zvýrazněn) Stepper / Progress Indicator
- Countdown timer — pokračuje z P4, progress bar s časem, červený při < 2 min Countdown Timer
- Per-seat řádky — každá vstupenka jako řádek: event název, datum, sedadlo (řada + číslo, pokud adresné), cenová kategorie, ticket type selector (Dospělý / Student / Senior / Dítě — dropdown nebo bottom sheet), cena List Item
- Akce na řádku — swipe-to-delete nebo delete ikona pro odebrání vstupenky Icon Button
- Voucher/kupón input — textové pole + „Uplatnit" CTA, inline validace Text InputPrimary Button
- Cenový souhrn — subtotal, slevy (pokud kupón), poplatky (servisní poplatek), celkem (bold, větší font) Price Summary
- CTA „Pokračovat k platbě" — primary button, zobrazuje celkovou částku Primary Button
- Odkaz „Přidat další vstupenky" — secondary link, návrat na P4/S1 Ghost/Text Button
Interakce
| Trigger | Akce | Cíl |
|---|---|---|
| Změna ticket type (dropdown) | Přepočet ceny per řádek + celkem | Real-time update souhrnu |
| Swipe-to-delete vstupenky | Odebrání ze seznamu | Animované zmizení řádku, přepočet ceny |
| Tap na delete ikonu | Potvrzovací dialog → odebrání | „Opravdu odebrat vstupenku?" |
| Zadání kupónu + „Uplatnit" | API validace kupónu | Success toast + recalc ceny / error inline |
| Tap „Pokračovat k platbě" | Přechod na další krok | S2 — Osobní údaje (nepřihlášen) nebo P6 — Checkout (přihlášen) |
| Tap „Přidat další vstupenky" | Návrat na výběr | P4 nebo S1 (zachovány stávající vstupenky) |
| Timer warning < 2 min | Pulsující timer | X5 — Warning |
| Timer expiry | Timeout error | X4 — Timeout |
Stavy
| Stav | Popis | Vizuální chování |
|---|---|---|
| Loaded | Vstupenky v košíku | Seznam řádků, aktivní CTA |
| Voucher applied | Platný kupón uplatněn | Zelený badge u kupónu, sleva viditelná v souhrnu |
| Voucher error | Neplatný kupón | Červený inline error „Neplatný kupón" pod inputem |
| Empty | Všechny vstupenky odebrány | „Košík je prázdný" + CTA zpět na výběr |
| Timer critical | Zbývá < 2 min | Timer pulsuje červeně, warning banner |
| Price changed | Cena se změnila od výběru | Info banner „Ceny se mohly změnit", refresh z API |
Edge Cases a Error States
| Scénář | Řešení |
|---|---|
| Uživatel odebere všechny vstupenky | Empty state „Košík je prázdný" + CTA zpět na výběr akcí |
| Voucher neplatný / expirovaný | Inline error pod inputem „Kupón není platný nebo vypršel" |
| Voucher platný ale nedosahuje min. objednávky | Error „Kupón je platný od X Kč" |
| Změna ceny na serveru během session | Upozornění v banneru, refresh cen z API, tlačítko „Aktualizovat ceny" |
| Ticket type nemá dostupnou variantu (např. student pro danou akci) | Disabled option v dropdown s popiskem „Nedostupné pro tuto akci" |
| Servisní poplatek | Zobrazit jako samostatný řádek v souhrnu, ne skrytě v ceně |
| Timer vypršel během zadávání kupónu | X4 timeout — sedadla uvolněna, i kupón resetován |
| Ztráta připojení | Košík zůstává v lokálním stavu, zobrazit „Bez připojení nelze dokončit objednávku" |
Mobilní patterny a odlišení od webu
Co děláme jinak
- Stepper progress — web má single-page checkout, MA má multi-step stepper (méně cognitive load per krok)
- Swipe-to-delete — nativní iOS/Android gesto pro odebrání, web má jen delete ikonu
- Ticket type selector — bottom sheet na mobilu (místo dropdown), lépe zobrazí popisky „Student (do 26 let s průkazem)"
- Sticky bottom bar s celkovou cenou a CTA — vždy viditelné, web má CTA uprostřed formuláře
Aplikované patterny
- iOS:
UISwipeActionsConfigurationpro swipe-to-delete,.sheet()pro ticket type picker - Android:
SwipeToDismiss(Material 3),ModalBottomSheetpro výběr typu vstupného
API Data
GET/cartPOST/cart/ticket/removePUT/cart/ticket/set-customer-categoryDELETE/cart/ticket/remove-customer-category/{ticketId}POST/cart/ticket/set-voucherDELETE/cart/ticket/remove-voucher/{ticketId}POST/cart/voucher/addPOST/cart/voucher/add/numberedDELETE/cart/voucher/remove/{voucherId}POST/cart/service/setDELETE/cart/service/remove/{serviceId}GET/cashdesk/vouchers| Operace | Endpoint | Trigger | Poznámka |
|---|---|---|---|
| Načtení košíku | GET /cart | Otevření obrazovky | Vrací tickets, packages, vouchers, credits, services, fees, validity (countdown) |
| Odebrání vstupenky | POST /cart/ticket/remove | Swipe-to-delete / ikona | |
| Změna zákaznické kategorie | PUT /cart/ticket/set-customer-category | Ticket type selector | Student, senior, ZTP — s discount_type a discount_value |
| Per-ticket voucher | POST /cart/ticket/set-voucher | Uplatnění kupónu na vstupenku | Typ 1 ze 3 voucher typologií |
| Cart-level voucher | POST /cart/voucher/add | Uplatnění kupónu na celou objednávku | Typ 2 ze 3 |
| Odebrání voucheru | DELETE /cart/voucher/remove/{id} | Tap odstranit | |
| Dostupné vouchery | GET /cashdesk/vouchers | Otevření voucher sekce | Seznam povolených voucherů |
| Přidání služby | POST /cart/service/set | Výběr doplňku | [F1] upsell |
CoreAPI poznatek — Trojí voucher typologie
API rozlišuje tři úrovně voucherů: per-ticket (/cart/ticket/set-voucher), cart-level (/cart/voucher/add) a platební (/cart/voucher-payment/add — v P6). Kupóny JSOU kumulativní — uživatel může mít per-ticket slevu + cart-level kupón + platební voucher na jedné objednávce. DiscountType: Percent, ByAmount, ToAmount.
Reference — Aktuální web
SCR-WEB-31Košík — countdown timer, ticket řádek, upsell pojištění
SCR-WEB-36Multi-event košík — per-seat řádky z dvou různých akcíReference — CineStar benchmark
SCR-CS-11Objednávka — per-seat řádky, ticket type dropdown, upsell občerstvení, celková cena
SCR-CS-12Typ vstupenky — bottom sheet s variantami (dítě, student, senior, ZTP)Inspirace z CineStar
CineStar má výborný ticket type selector jako bottom sheet dialog s vysvětlením podmínek (Student = „do 26 let s průkazem"). Přebíráme tento pattern. CineStar navíc má upsell občerstvení přímo v košíku — v MA bude až ve fázi F2+ (S23).