CON-053 | Backup Selector

Screen Overview

• Type: Bottom sheet overlay on product detail
• Purpose: Allow customers to choose a specific backup product if their selected item is unavailable
• Trigger: Tapping "Replace with similar" option on CON-050
• Close: X button, tap overlay, or swipe down

Layout Specifications

• Overlay: rgba(0, 0, 0, 0.45) dark scrim behind sheet
• Sheet: White background, 20px top-left/right border-radius, max 85vh height
• Handle: 40px wide, 4px tall, #D1D5DB bar centered at top
• Content: Scrollable alternatives list between header and footer
• Footer: Sticky confirm button with top border

Component Specs

• Header: "Choose Backup Product" title (Alexandria 18px bold) + 36px circular close button
• Search: 44px height, #E9EFE7 background, search icon left, 10px radius
• Alternative items: 48px thumbnail, product name (14px bold), price (15px bold), optional badge
• Radio selection: 22px circle, selected = #043F2D border + filled dot
• "Closest match" badge: rgba(4,63,45,0.1) background, #043F2D text
• "Best price" badge: #C9F06B background, #043F2D text
• Confirm button: #C9F06B background, 50px height, 12px radius, Alexandria 16px bold

Suggested Alternatives Data

• 1. Parmalat Full Cream 2L — R 31.99 (Closest match badge, pre-selected)
• 2. Douglasdale Fresh Milk 2L — R 34.99
• 3. Fair Cape Full Cream 2L — R 29.99 (Best price badge)
• 4. Clover Low Fat 2L — R 30.99

Behavior Notes

• Search filters the alternatives list in real-time
• Only one alternative can be selected at a time (radio behavior)
• Confirm button saves the selection and closes the sheet
• Sheet can be dismissed by: X button, overlay tap, or swipe-down gesture
• Alternatives are algorithmically suggested based on category, size, and brand similarity
• "Closest match" = same type/size, "Best price" = lowest price alternative

Accessibility

• Close button has aria-label="Close"
• Search input has aria-label="Search for alternative product"
• Sheet acts as a modal dialog; focus should be trapped inside
• Radio items should be keyboard navigable with arrow keys