Screen Annotations — CON-086 Substitution Notification
Screen ID: CON-086
Flow: Active Order → Picker Substitution → Customer Approval
Previous: CON-083 Order Tracking Timeline (or any active screen)
Next: Returns to current screen after action
Modal Presentation: This screen appears as a bottom sheet overlay on top of the current screen (order tracking, home, etc.). The background is dimmed with a 50% black overlay. The sheet slides up from the bottom with rounded top corners and a drag handle.
Timer: A countdown timer "4:32" in an amber/warning badge shows how long the customer has to respond. If the timer expires, the picker's pre-set substitution preference is applied automatically. The timer creates urgency without being aggressive.
Original Item: Shows the unavailable item (Albany Brown Bread, R 18.49) with a dashed border and reduced opacity to indicate it is no longer available. Price is struck through.
Substitute Item: Shows the suggested replacement (Blue Ribbon Brown Bread, R 17.99) with a lime-accented border to highlight it. A green savings badge "R 0.50 cheaper" shows the price difference when the substitute is less expensive.
Action Buttons: Two options: "Accept Substitute" (primary lime button) accepts the replacement. "Remove Item" (secondary outline button) removes the item from the order entirely. Both close the modal and update the order.
View Other Options: A text link at the bottom allows the customer to browse alternative substitutes beyond the picker's suggestion. Opens a product picker filtered to the same category.
Push Notification: This modal is triggered by a push notification when the picker encounters an out-of-stock item during order fulfillment. If the app is backgrounded, a push notification brings the user to this screen.