9:41
Order #FFM-20260209-003
Delivered
📅
Date
9 Feb 2026
🕒
Delivery Slot
2:00 - 3:00 PM
📍
Delivery Address
123 Main Road, Sandton
Items (6) Collapse
Clover Full Cream Milk 2L
× 1
R 32.99
Albany Brown Bread
× 2
R 36.98
Free Range Eggs 6pk
× 1
R 42.99
Lancewood Cheddar 400g
× 1
R 64.99
Bananas 1kg
× 1
R 14.99
Coca-Cola 2L
× 2
R 39.98
🔄 1 item was substituted:
Albany Brown Bread → Blue Ribbon Brown Bread
Payment Summary
Subtotal R 232.92
Delivery FREE
Service fee R 9.99
Driver tip R 20.00
Discount -R 0.00
Total R 262.91
VISA
Visa •••• 4532
Need Help?

Screen Annotations — CON-082 Order Detail

Screen ID: CON-082
Flow: Order History → Order Detail
Previous: CON-080 Order History
Next: CON-083 Order Tracking (for active orders)
Header: White header with back button (chevron left) and order number as title. Back navigates to order history (CON-080).
Status Badge: Centered green "Delivered" badge below the header. For active orders this would show "Being Picked", "Out for Delivery", etc. with corresponding colors (blue for active, yellow for picking).
Order Info Card: Three rows showing date (9 Feb 2026, d MMM yyyy format), delivery slot (2:00 - 3:00 PM), and delivery address. Each row has an emoji icon on the left.
Items List: Expandable/collapsible section showing all 6 items. Each item shows name, quantity (× N), and line total price. The header shows item count and a "Collapse" toggle link.
Substitution Note: Yellow/warning-styled alert box with left border accent. Informs the customer which item was substituted and what it was replaced with. Only shown when substitutions occurred.
Payment Summary: Breakdown of charges: Subtotal (R 232.92), Delivery (FREE in green), Service fee (R 9.99), Driver tip (R 20.00), Discount (-R 0.00 in green). Total displayed prominently below a divider in primary color (R 262.91).
Payment Method: Shows the card used for payment with a Visa brand icon and masked card number (•••• 4532).
Actions: "Reorder All" primary lime button (full width) adds all items from this order back to the cart. "Need Help?" link below opens support/help flow.
No Bottom Nav: This is a detail/inner screen, so the bottom navigation is not shown. User navigates back via the header back button.
Currency: South African Rand, formatted as "R XX.XX" with space after R. Thousands separator is comma (e.g., R 1,234.00).