Page: Notification Settings
Code: SNOT Route: /settings/notifications Access: Authenticated Priority: P1 Test Script: scripts/page-tests/test-SNOT.sh Components: src/components/settings/NotificationSettings.tsx
Purpose
Allow users to manage their email notification preferences for sessions, messages, updates, payments, and marketing.
Connections
Incoming (users arrive from)
| Source | Trigger | Notes |
| SETT | "Notifications" menu item | From main settings page |
Outgoing (users navigate to)
| Target | Trigger | Notes |
| SETT | Breadcrumb navigation | Return to settings |
Data Requirements
| Entity | Fields Used | Purpose |
| users | email_session_reminder, email_session_booked, email_new_message, email_course_update, email_certificate, email_payment, email_marketing | Store and retrieve email notification preferences |
Sections
Header
- • Page title: "Notification Settings"
- • Description of purpose
Sessions & Booking
- • Session reminders toggle
- • New booking notifications toggle
Messages & Updates
- • New messages toggle
- • Course updates toggle
Achievements
- • Certificate notifications toggle
Payments
- • Payment notifications toggle
Marketing
- • Newsletter & promotions toggle (default off)
Info Section
- • Auto-save behavior explanation
- • Security email disclaimer
- • Unsubscribe instructions
User Stories Fulfilled
- • US-S044
- • US-S045
- • US-S046
- • US-S047
- • US-S048
- • US-ST032
- • US-ST033
States & Variations
| State | Description |
| Loading | Skeleton animation while fetching preferences |
| Error | Red border, error message, Retry button |
| Loaded | All toggles displayed with current values |
| Saving | Individual toggle disabled while saving |
| Save Success | Brief green success message |
Mobile Considerations
- • Toggles remain usable on small screens
- • Section cards stack vertically
- • Touch-friendly toggle targets
Error Handling
| Error | Display |
| Failed to load settings | "Unable to load notification settings" with retry |
| Failed to save preference | "Failed to save" with automatic rollback |
Analytics Events
| Event | Trigger | Data |
page_view | Page load | notification_settings |
notification_toggle | Toggle changed | field_name, new_value |
Notes
- • All users can manage notification preferences
- • Marketing defaults to off (opt-in)
- • Uses optimistic updates with rollback on error
- • Security emails always sent regardless of preferences
Features
Email Preferences
- ✓
Session reminder toggle [US-S044]
- ✓
New booking toggle [US-ST032]
- ✓
New message toggle [US-S045]
- ✓
Course update toggle [US-S046]
- ✓
Certificate toggle [US-S047]
- ✓
Payment toggle [US-ST033]
- ✓
Marketing toggle [US-S048]
Interactive Elements
Buttons: 1/1 active
Links: 1/1 active
Buttons
| Element | Component | Action | Status |
| Retry | NotificationSettings | fetchSettings() - Refetch preferences | active |
Links
Navigation
| Element | Target | Status |
| Settings breadcrumb | /settings | active |
Target Pages Status
| Target | Page Code | Status |
/settings | SETT | Implemented |
Test Coverage
Component ✓
Page ○
SSR ○
API 2/2
✓ Ready
Script: scripts/page-tests/test-SNOT.sh
Page Test: tests/pages/settings/notifications.test.tsx ○
Component Test: tests/components/settings/NotificationSettings.test.tsx ✓
API Tests
| Endpoint | Test File | Status |
GET /api/me/settings | tests/api/me/settings.test.ts | ✓ tested |
PATCH /api/me/settings | tests/api/me/settings.test.ts | ✓ tested |