P5 — Objednávka & Platba
Účel obrazovky
Jediný scrollovatelný krok mezi výběrem míst a potvrzením: uživatel zkontroluje vstupenky, doplní nebo potvrdí osobní údaje, zvolí způsob platby a dokončí objednávku. Countdown timer z P4 — Seat map nadále běží — urgency zůstává kritická.
Content Priority
Obrazovka má čtyři scrollovatelné sekce pod jednou hlavičkou stepperu (aktuální krok Objednávka & Platba).
Struktura kroků (stepper 5 → 3)
- Stepper — Výběr → Objednávka & Platba (aktuální) → Hotovo (po úspěšné platbě / rezervaci) Stepper / Progress Indicator
- Countdown timer — pokračuje z P4, progress bar s časem, červený při < 2 min Countdown Timer
Sekce 1 — Vstupenky (per-seat)
- Per-seat řádky — každá vstupenka: název akce, datum, sedadlo (řada + číslo u adresného), kategorie, výběr typu vstupenky (Dospělý / Student / Senior / Dítě — bottom sheet), cena; jednotné pole „Zadejte slevový kód nebo dárkový poukaz" + tlačítko Uplatnit (backend rozpozná typ: per-ticket / košík / platba); po uplatnění inline badge „Sleva -X Kč (kód)" s × pro odebrání; u per-ticket slevy a více vstupenek → bottom sheet „Na kterou vstupenku?" List Item Text InputPrimary Button
- Odebrání řádku — iOS: swipe-to-delete (nativní gesto); Android: trailing ikona smazání; bez potvrzovacího dialogu — po akci toast s undo (3 s): „Vstupenka odebrána — Vrátit zpět" Icon Button
- Odkaz „Přidat další vstupenky" — secondary, návrat na P4 / S1 se zachováním stavu košíku Ghost/Text Button
Sekce 2 — Osobní údaje (dříve samostatná S2)
- Collapsible sekce Osobní údaje — při přihlášení s kompletním profilem automaticky sbalená / přeskočená vnímáním flow (předvyplněno); pro hosta nebo neúplný profil: jméno, příjmení, e-mail, telefon (povinné), ISIC (volitelné, pokud akce podporuje), volitelná fakturační adresa (accordion); GDPR souhlas se zpracováním osobních údajů (povinný před dokončením, pokud platí právní požadavek). Po blur e-mailu → kontrola, zda účet existuje → banner nebo inline: „Tento e-mail je registrovaný — Přihlásit se?" (odkaz na S4 — Přihlášení). Text Input Text Input Accordion / ExpandableText Input Checkbox Ghost/Text Button
Sekce 3 — Platba (dříve samostatná P6)
- Platební metody — Apple Pay první na iOS, Google Pay první na Androidu, dále platební karta (brána, např. Comgate), hotovost (rezervace na pokladně), dárkový poukaz jako platební metoda (pokud relevantní). U hotovosti zobrazit informační banner s lhůtou vyzvednutí / zaplacení na pokladně (stejný záměr jako dříve u P6). Payment Method Card
Sekce 4 — Souhrn a dokončení
- Cenový souhrn — mezisoučet, slevy (řádky per voucher), servisní poplatky, celkem (zvýrazněné) Price Summary
- Licenční / obchodní podmínky — ne jako checkbox, ale text pod primárním CTA (např.): „Kliknutím na ‚Zaplatit‘ souhlasíte s obchodními podmínkami" s odkazem na plné znění (in-app browser nebo modal).
- Primární CTA — „Zaplatit X Kč" / u hotovosti „Rezervovat"; zobrazuje konečnou částku; u karty může vést do brány po vytvoření platby
Interakce
| Trigger | Akce | Cíl |
|---|---|---|
| Změna typu vstupenky | Přepočet ceny řádku + celku | Okamžitá aktualizace souhrnu |
| Swipe-to-delete (iOS) / ikona smazání (Android) | Odebrání řádku + undo toast 3 s | Obnovení řádku při „Vrátit zpět" |
| Zadání kódu + „Uplatnit" | Jedno API; backend typ slevy/poukazu | Badge slevy nebo sheet výběru vstupenky |
| Tap × u badge slevy | Odebrání voucheru | Přepočet celku |
| Blur e-mailu (host) | Kontrola existence účtu | Hint + přihlášení (S4) |
| Změna ceny ze serveru během session | Blokující dialog (viz níže) | Primární CTA v dialogu disabled, dokud uživatel nepotvrdí |
| Tap Apple Pay / Google Pay | Nativní platební sheet | X1 — Zaplaceno nebo X3 — Chyba platby |
| Tap Karta | Otevření platební brány | WebView / in-app browser → X1 / X3 |
| Tap Hotovost | Rezervace (po potvrzení rizik v banneru / copy) | X2 — Rezervováno |
| Tap „Zaplatit" / „Rezervovat" | order + payment dle metody | Úspěch / chyba / timeout |
| Tap „Přidat další vstupenky" | Návrat na výběr | P4 nebo S1 |
| Timer < 2 min | Eskalace urgency | X5 — Warning timer |
| Timer vypršel | Uvolnění sedadel | X4 — Timeout |
Stavy
| Stav | Popis | Vizuální chování |
|---|---|---|
| Loaded | Košík načten | Sekce 1–4, aktivní ovládací prvky dle role (host × přihlášený) |
| Voucher applied | Platný kód | Badge „Sleva -X Kč (kód)" u pole nebo u řádku |
| Voucher error | Neplatný kód | Inline chyba pod vstupním polem |
| Guest — formulář | Nepřihlášen | Sekce 2 rozbalená, CTA přihlášení u registrovaného e-mailu |
| Logged-in — kompletní profil | Předvyplněno | Sekce 2 sbalená / minimalizovaná, auto-skip vnímání kroku |
| Platební metoda vybraná | Před dokončením | Zvýrazněná karta metody, CTA aktivní (po GDPR, pokud je vyžadováno) |
| Processing | Platba probíhá | Overlay „Zpracováváme platbu…" |
| Timer critical | < 2 min | Červený pulzující timer |
| Empty košík | Vše odebráno | Empty state + návrat na výběr akcí |
Edge Cases a Error States
| Scénář | Řešení |
|---|---|
| Per-ticket voucher a více vstupenek | Bottom sheet „Na kterou vstupenku?" před aplikací slevy |
| Neplatný nebo expirovaný kód | Inline chyba pod jednotným polem |
| Minimální hodnota objednávky pro kupon | Chybová hláška z API, CTA dokončení disabled nebo s upozorněním |
| Změna ceny oproti zobrazené | Modal / fullscreen dialog: „Cena se změnila z [stará] Kč na [nová] Kč" + rozpad po sedadlech; primární „Pokračovat s novou cenou", sekundární destruktivní „Zrušit objednávku"; primární disabled, dokud uživatel explicitně nepotvrdí (např. přepínač / checkbox „Beru na vědomí novou cenu") |
| Ticket type nedostupný pro akci | Disabled varianta v sheetu s vysvětlením |
| Apple Pay / Google Pay nedostupné | Skrýt danou dlaždici, zůstat karta a hotovost |
| Offline | Banner: dokončení objednávky vyžaduje připojení |
| Timer během vyplňování | X4 — uvolnění rezervace |
| Hotovost | Banner s deadline vyzvednutí / platby na pokladně (konzistentní s dřívějším P6) |
Mobilní patterny a odlišení od webu
Sloučení obrazovek (dříve samostatné kroky)
- S2 — Osobní údaje jako samostatná obrazovka je ZASTARALÁ — obsah žije ve sekci 2 na P5 (collapsible, stejné komponenty a validace jako dříve S2).
- P6 — Checkout / Platba jako samostatná obrazovka je ZASTARALÁ — výběr plateb a rekapitulace před zaplacením jsou sekce 3 a 4 na této obrazovce.
Dokumentace S2 a P6 zůstává jako reference pro komponenty (ComponentRef výše) a pro srovnání s historickým flow; zdroj pravdy pro MA checkout je tento P5.
Co děláme jinak než web
- Tříkrokový stepper místo pěti kroků — méně přeskakování, jedna dlouhá obrazovka se sekcemi.
- Jedno pole voucheru — uživatel neřeší typ; backend vrátí kam sleva spadá.
- Odebrání vstupenky — nativní gesto (iOS) vs. ikona (Android), undo místo „Opravdu smazat?".
- Souhlas s podmínkami u CTA jako text, ne checkbox (stále musí být jasné právní krytí copy).
- Apple Pay / Google Pay prominentně podle platformy — na webu typicky chybí nebo je jinak.
Aplikované patterny
- iOS:
UISwipeActionsConfiguration(swipe-to-delete),.sheet()pro typ vstupenky a pro výběr vstupenky u per-ticket voucheru,PKPaymentAuthorizationViewControllerpro Apple Pay - Android: trailing delete v řádku (
IconButton),ModalBottomSheetpro výběry, Google Pay API,CustomTabsIntentpro platební bránu
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 GET/cartPOST/cart/set-personPOST/cart/voucher-payment/addDELETE/cart/voucher-payment/remove/{paymentId}POST/order/createPOST/payment/createGET/codebook/countries| Operace | Endpoint | Trigger | Poznámka |
|---|---|---|---|
| Košík / rekapitulace | GET /cart | Otevření P5, po změnách | Včetně fees, countdown validity |
| Odebrání vstupenky | POST /cart/ticket/remove | Smazání řádku (případně revert z undo) | |
| Změna kategorie vstupenky | PUT /cart/ticket/set-customer-category | Ticket type | Student, senior, ZTP… |
| Jednotný voucher | POST /cart/... (per-ticket / cart / payment dle backendu) | Uplatnit | Auto-detekce typu na serveru; klient může posílat jeden kód |
| Odebrání voucheru | DELETE /cart/voucher/remove/{id} nebo ekvivalent | × u badge | |
| Osoba k objednávce | POST /cart/set-person | Sekce 2 — uložení / přechod k platbě | Host + doplnění profilu |
| Platební poukaz | POST /cart/voucher-payment/add | Výběr poukazu jako platby | Typ 3 z voucher modelu |
| Objednávka | POST /order/create | Tap Zaplatit / Rezervovat | |
| Platba | POST /payment/create | Po vytvoření objednávky | URL / token pro bránu |
| Země (adresa) | GET /codebook/countries | Rozšířená fakturace | |
| Dostupné vouchery | GET /cashdesk/vouchers | Nápověda / seznam | [F1] rozšíření služeb v košíku dle PRD |
CoreAPI — voucher typologie (stále platí)
Backend rozlišuje per-ticket, cart-level a platební voucher; uživatelsky jde o jedno vstupní pole. Klient po úspěchu zobrazí badge a případně sheet výběru vstupenky. Kumulace slev dle pravidel API (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 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).