[PK-46] FE-6 Objednávka: /objednavka/[id], pay-by-square QR + status badge #12

Merged

forge-admin merged 1 commit from feature/PK-46-order-detail into main 2026-05-16 23:39:51 +00:00

Conversation 0 Commits 1 Files changed 8 +600

forge-admin commented 2026-05-16 21:50:26 +00:00

Owner

Copy link

What

Server route /objednavka/[id] — potvrdzovacia stránka objednávky s pay-by-square QR kódom.

Fetchuje paralelne GET /api/orders/<id> (BE-5) + GET /api/orders/<id>/payment-qr (BE-6), forwarduje cookies a ?token=<HMAC> z query stringu (guest flow z FE-5 redirectu).

AC pokrytie

• ✅ Route /objednavka/[id] (slovenský naming, zhodný s redirectom z FE-5)
• ✅ Order detail server fetch s cookies + ?token, no-store
• ✅ 404 → not-found.tsx ("Objednávku sme nenašli, skús odkaz z mailu / pokladne"), neprezrádza existenciu
• ✅ Payment QR: 200 → render <img src={qr_data_url}> 280×280 + IBAN/suma/VS/správa MASOX OBJ <order_id>/príjemca
• ✅ 503 → PaymentNotConfiguredCard (kontakt +421 903 400 326, žiadny placeholder QR/IBAN)
• ✅ 404 z QR endpointu → sekcia sa nezobrazí, order summary ostáva
• ✅ OrderSummary komponent v fe/src/components/order/ (reuse CheckoutSummary patternu): položky, subtotal, vat_breakdown, shipping, total, adresa, email, note
• ✅ Status badge: pending/pending_payment → bordová „Čaká na platbu", paid → zelená „Zaplatené", shipped → modrá „Odoslané", cancelled → sivá „Zrušené". (BE-5 vracia pending per prisma/schema.prisma:185 — držím sa BE truth, pre istotu pokrývam aj pending_payment.)
• ✅ „Čo ďalej" sekcia len pre pending
• ✅ „Vytlačiť" client subkomponent (window.print()); @media print v globals.css skryje site header/footer + .no-print
• ✅ „Moje objednávky" link → /ucet/objednavky pre prihláseného (token absent), prefetch=false (FE-7 to napojí)
• ✅ Žiadny polling status
• ✅ Sticky panel layout (lg+: vlavo summary, vpravo QR top-20); jednostĺpcový layout keď QR sekcia chýba (paid/shipped/cancelled, alebo QR unavailable)

Tech

• fe/src/lib/api.ts: pridané typy OrderDetail, OrderItem, OrderShippingAddress, PaymentQr, PaymentQrResult + fetchery getOrderDetail(id, token) / getPaymentQr(id, token).
• qr_data_url použité priamo v <img> (data URL, žiadny next/image).
• Token nikdy nelogovaný, nikdy v localStorage — len forwardovaný server-side.

Files

• fe/src/app/objednavka/[id]/page.tsx — server component
• fe/src/app/objednavka/[id]/not-found.tsx
• fe/src/components/order/OrderSummary.tsx
• fe/src/components/order/OrderStatusBadge.tsx
• fe/src/components/order/PaymentQrCard.tsx (+ PaymentNotConfiguredCard)
• fe/src/components/order/PrintButton.tsx (client)
• fe/src/lib/api.ts — typy + fetchery
• fe/src/app/globals.css — @media print pravidlá

Test

• tsc --noEmit ✓ čisté
• next lint ✓ čisté
• next build ✓ úspešný (route ƒ /objednavka/[id] registered, 745 B page bundle)

Mimo skope (per zadanie)

• /ucet/objednavky (FE-7) — link existuje ako dead link, prefetch=false
• Polling status — nepožadované
• Plná tlačová faktúra — browser print stačí

Issue: PK-46
Depends on: BE-5 (merged), BE-6 (otvorený PR #2 — be-dev to merguje)

## What Server route `/objednavka/[id]` — potvrdzovacia stránka objednávky s pay-by-square QR kódom. Fetchuje paralelne `GET /api/orders/<id>` (BE-5) + `GET /api/orders/<id>/payment-qr` (BE-6), forwarduje cookies a `?token=<HMAC>` z query stringu (guest flow z FE-5 redirectu). ## AC pokrytie - ✅ Route `/objednavka/[id]` (slovenský naming, zhodný s redirectom z FE-5) - ✅ Order detail server fetch s `cookies` + `?token`, `no-store` - ✅ 404 → `not-found.tsx` ("Objednávku sme nenašli, skús odkaz z mailu / pokladne"), neprezrádza existenciu - ✅ Payment QR: 200 → render `<img src={qr_data_url}>` 280×280 + IBAN/suma/VS/správa `MASOX OBJ <order_id>`/príjemca - ✅ 503 → `PaymentNotConfiguredCard` (kontakt +421 903 400 326, žiadny placeholder QR/IBAN) - ✅ 404 z QR endpointu → sekcia sa nezobrazí, order summary ostáva - ✅ `OrderSummary` komponent v `fe/src/components/order/` (reuse CheckoutSummary patternu): položky, subtotal, vat_breakdown, shipping, total, adresa, email, note - ✅ Status badge: `pending`/`pending_payment` → bordová „Čaká na platbu", `paid` → zelená „Zaplatené", `shipped` → modrá „Odoslané", `cancelled` → sivá „Zrušené". (BE-5 vracia `pending` per `prisma/schema.prisma:185` — držím sa BE truth, pre istotu pokrývam aj `pending_payment`.) - ✅ „Čo ďalej" sekcia len pre `pending` - ✅ „Vytlačiť" client subkomponent (`window.print()`); `@media print` v `globals.css` skryje site header/footer + `.no-print` - ✅ „Moje objednávky" link → `/ucet/objednavky` pre prihláseného (token absent), `prefetch=false` (FE-7 to napojí) - ✅ Žiadny polling status - ✅ Sticky panel layout (lg+: vlavo summary, vpravo QR `top-20`); jednostĺpcový layout keď QR sekcia chýba (paid/shipped/cancelled, alebo QR unavailable) ## Tech - `fe/src/lib/api.ts`: pridané typy `OrderDetail`, `OrderItem`, `OrderShippingAddress`, `PaymentQr`, `PaymentQrResult` + fetchery `getOrderDetail(id, token)` / `getPaymentQr(id, token)`. - `qr_data_url` použité priamo v `<img>` (data URL, žiadny `next/image`). - Token nikdy nelogovaný, nikdy v localStorage — len forwardovaný server-side. ## Files - `fe/src/app/objednavka/[id]/page.tsx` — server component - `fe/src/app/objednavka/[id]/not-found.tsx` - `fe/src/components/order/OrderSummary.tsx` - `fe/src/components/order/OrderStatusBadge.tsx` - `fe/src/components/order/PaymentQrCard.tsx` (+ `PaymentNotConfiguredCard`) - `fe/src/components/order/PrintButton.tsx` (client) - `fe/src/lib/api.ts` — typy + fetchery - `fe/src/app/globals.css` — `@media print` pravidlá ## Test - `tsc --noEmit` ✓ čisté - `next lint` ✓ čisté - `next build` ✓ úspešný (route `ƒ /objednavka/[id]` registered, 745 B page bundle) ## Mimo skope (per zadanie) - `/ucet/objednavky` (FE-7) — link existuje ako dead link, `prefetch=false` - Polling status — nepožadované - Plná tlačová faktúra — browser print stačí Issue: PK-46 Depends on: BE-5 (merged), BE-6 (otvorený PR #2 — be-dev to merguje)

forge-admin added 1 commit 2026-05-16 21:50:26 +00:00

[PK-46] FE-6 Objednávka: /objednavka/[id], pay-by-square QR + status badge ... 0cb7c7a7df

- Server route /objednavka/[id] s parallel fetch order detail + payment QR
  (forward cookies + ?token= pre guest flow, no-store)
- Komponent OrderSummary (položky, subtotal, vat_breakdown, doprava, spolu,
  doručovacia adresa, email, poznámka)
- OrderStatusBadge: pending → bordová, paid → zelená, shipped → modrá,
  cancelled → sivá (fallback pre neznámy status)
- PaymentQrCard: <img src={qr_data_url}> 280×280, IBAN/suma/VS/správa/príjemca
- PaymentNotConfiguredCard pre 503 (kontakt +421 903 400 326)
- 404 z order detail → not-found.tsx (neprezrádza existenciu)
- 404 z payment-qr → ignoruj, render len order summary
- "Čo ďalej" sekcia len pre pending status
- "Vytlačiť" client komponent (window.print()) + @media print CSS
  skryje site header/footer/nav/button
- "Moje objednávky" link pre prihláseného (token absent), prefetch=false
- Sticky QR panel na lg+, jednostĺpcový layout keď QR sekcia chýba

Co-authored-by: multica-agent <github@multica.ai>

forge-admin force-pushed feature/PK-46-order-detail from 0cb7c7a7df to 0688895efb 2026-05-16 23:39:42 +00:00 Compare

forge-admin merged commit 346f06ffc9 into main 2026-05-16 23:39:51 +00:00

forge-admin referenced this pull request from a commit 2026-05-16 23:39:53 +00:00

Merge pull request #12 from feature/PK-46-order-detail (FE-6 [PK-46] Objednávka + QR)

Sign in to join this conversation.

Reviewers

No reviewers

Labels

Clear labels

No items

No labels

Milestone

Clear milestone

No items

No milestone

Projects

Clear projects

No items

No project

Assignees

Clear assignees

No assignees

1 participant

Notifications

Subscribe

Due date

The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set.

Reference

forge-admin/masox-eshop!12

No description provided.