Screen Annotations — CON-112 Notification Permission
Screen ID: CON-112
Flow: Onboarding / First Launch → Notification Permission
Previous: CON-111 Notification Center (or onboarding flow)
Next: CON-030 Home Main
Layout: Full-screen white background with no bottom navigation. This is a permission request screen typically shown during first launch or onboarding. Vertically centred content with action buttons pinned to the bottom.
Bell Illustration: Large bell emoji (56px) inside a 120px circular container with a light background. A red badge with "3" in the top-right corner suggests unread notifications waiting. In production, replace with a polished illustration asset.
Heading & Description: "Never miss an update" as the primary heading, followed by a concise value proposition explaining what notifications will provide (order updates, delivery tracking, exclusive deals).
Preview Cards: Three small notification preview cards showing realistic examples: order delivery tracking, flash sale promotion, and delivery confirmation. These demonstrate the value of enabling notifications through concrete examples the user can relate to.
Enable Button: Full-width lime/accent-coloured (#C9F06B) button with bold text. Tapping this triggers the native OS notification permission dialog. On iOS, this calls UNUserNotificationCenter.requestAuthorization(); on Android, POST_NOTIFICATIONS permission.
Not Now Button: Ghost/text button below the primary CTA. Skips the permission request and navigates to the home screen. The app should remember this choice and potentially re-prompt at a strategic moment later (e.g., after first order placement).
Footnote: "You can change this later in Settings" reassures the user that this is not a permanent decision. Reduces anxiety about enabling notifications.
No Bottom Nav: This screen intentionally omits the bottom navigation bar as it is part of the onboarding/permission flow, not the main app experience.