CON-079 | Promo Code

Screen Overview

• Type: Bottom sheet overlay (no bottom navigation)
• Purpose: Allow users to enter a promo code or select from available promotions
• Navigation: Dismisses back to CON-070 (Checkout Summary); tapping backdrop or "Done" closes the sheet

Component Specs

• Bottom sheet: White, 20px top border-radius, slide-up animation (0.3s ease-out)
• Handle bar: 36px wide, 4px height, grey #D1D5DB, centred
• Promo input: 48px height, 10px border-radius, uppercase text transform, 1px letter-spacing
• Apply button: Primary green, 48px height, 10px border-radius, 14px Alexandria semibold
• Promo card: 12px border-radius, 1.5px border, 40px icon container, 14px code (bold)
• Applied state: Green border, green background tint #F0FDF4, green checkmark
• Applied code bar: Green background, green border, checkmark + code name + "Remove" link

Behavior Notes

• Input auto-capitalises entered text for promo code format
• Tapping "Apply" validates the code against the API
• Invalid codes show inline error message: "Invalid or expired code"
• Tapping "Apply" on an available promotion auto-fills and applies the code
• Only one promo code can be active at a time (applying a new one replaces the old one)
• "Remove" button clears the applied code and reverts the discount
• Available promotions are personalised based on user eligibility
• Tapping the backdrop (dark area above sheet) dismisses the bottom sheet

Accessibility

• Bottom sheet has role="dialog" semantics
• Input has autocapitalize="characters" for mobile keyboards
• Applied status communicated through both colour and text + icon
• Handle bar is decorative; sheet dismisses via backdrop tap or Done button