240 lines
6.6 KiB
Markdown
240 lines
6.6 KiB
Markdown
# User Notification Preferences
|
|
|
|
## Overview
|
|
Individual users can now control their notification preferences across three channels: **Email**, **Push**, and **In-App** notifications.
|
|
|
|
---
|
|
|
|
## Features Implemented
|
|
|
|
### ✅ Backend
|
|
|
|
1. **Database Schema**
|
|
- Added three boolean fields to `users` table:
|
|
- `email_notifications_enabled` (default: true)
|
|
- `push_notifications_enabled` (default: true)
|
|
- `in_app_notifications_enabled` (default: true)
|
|
- Migration file: `20251203-add-user-notification-preferences.ts`
|
|
|
|
2. **User Model Updates**
|
|
- `Re_Backend/src/models/User.ts`
|
|
- Added fields: `emailNotificationsEnabled`, `pushNotificationsEnabled`, `inAppNotificationsEnabled`
|
|
|
|
3. **API Endpoints**
|
|
- **GET** `/api/v1/user/preferences/notifications` - Get current user's preferences
|
|
- **PUT** `/api/v1/user/preferences/notifications` - Update preferences
|
|
- Controller: `Re_Backend/src/controllers/userPreference.controller.ts`
|
|
- Routes: `Re_Backend/src/routes/userPreference.routes.ts`
|
|
- Validator: `Re_Backend/src/validators/userPreference.validator.ts`
|
|
|
|
4. **Notification Service Enhancement**
|
|
- `Re_Backend/src/services/notification.service.ts`
|
|
- Now checks user preferences before sending notifications
|
|
- Respects individual channel settings (email, push, in-app)
|
|
|
|
### ✅ Frontend
|
|
|
|
1. **API Service**
|
|
- `Re_Figma_Code/src/services/userPreferenceApi.ts`
|
|
- Functions: `getNotificationPreferences()`, `updateNotificationPreferences()`
|
|
|
|
2. **UI Component**
|
|
- `Re_Figma_Code/src/components/settings/NotificationPreferences.tsx`
|
|
- Beautiful card-based UI with toggle switches
|
|
- Real-time updates with loading states
|
|
- Success/error feedback
|
|
|
|
3. **Settings Page Integration**
|
|
- `Re_Figma_Code/src/pages/Settings/Settings.tsx`
|
|
- Full-width notification preferences card
|
|
- Separate browser push registration button
|
|
- Available for both admin and regular users
|
|
|
|
---
|
|
|
|
## How It Works
|
|
|
|
### User Experience
|
|
|
|
1. **Navigate to Settings**
|
|
- User clicks on Settings in the navigation
|
|
|
|
2. **View Notification Preferences**
|
|
- Top card shows three toggle switches:
|
|
- 📧 **Email Notifications** - Receive notifications via email
|
|
- 🔔 **Push Notifications** - Receive browser push notifications
|
|
- 💬 **In-App Notifications** - Show notifications within the application
|
|
|
|
3. **Toggle Preferences**
|
|
- Click any switch to enable/disable that channel
|
|
- Changes are saved immediately
|
|
- Success message confirms the update
|
|
|
|
4. **Register Browser for Push** (separate card)
|
|
- One-time setup per browser/device
|
|
- Requests browser permission
|
|
- Registers the browser endpoint for push notifications
|
|
|
|
### System Behavior
|
|
|
|
**When sending notifications:**
|
|
|
|
```typescript
|
|
// System checks user preferences
|
|
if (user.inAppNotificationsEnabled) {
|
|
// Create in-app notification in database
|
|
// Emit socket event for real-time delivery
|
|
}
|
|
|
|
if (user.pushNotificationsEnabled) {
|
|
// Send browser push notification (if browser is registered)
|
|
}
|
|
|
|
if (user.emailNotificationsEnabled) {
|
|
// Send email notification (when implemented)
|
|
}
|
|
```
|
|
|
|
**Benefits:**
|
|
- ✅ Users have full control over notification channels
|
|
- ✅ Reduces notification fatigue
|
|
- ✅ Improves user experience
|
|
- ✅ Respects user preferences while ensuring critical alerts are delivered
|
|
|
|
---
|
|
|
|
## API Documentation
|
|
|
|
### Get Notification Preferences
|
|
|
|
**Request:**
|
|
```http
|
|
GET /api/v1/user/preferences/notifications
|
|
Authorization: Bearer <token>
|
|
```
|
|
|
|
**Response:**
|
|
```json
|
|
{
|
|
"success": true,
|
|
"data": {
|
|
"emailNotificationsEnabled": true,
|
|
"pushNotificationsEnabled": true,
|
|
"inAppNotificationsEnabled": true
|
|
}
|
|
}
|
|
```
|
|
|
|
### Update Notification Preferences
|
|
|
|
**Request:**
|
|
```http
|
|
PUT /api/v1/user/preferences/notifications
|
|
Authorization: Bearer <token>
|
|
Content-Type: application/json
|
|
|
|
{
|
|
"emailNotificationsEnabled": false,
|
|
"pushNotificationsEnabled": true,
|
|
"inAppNotificationsEnabled": true
|
|
}
|
|
```
|
|
|
|
**Response:**
|
|
```json
|
|
{
|
|
"success": true,
|
|
"message": "Notification preferences updated successfully",
|
|
"data": {
|
|
"emailNotificationsEnabled": false,
|
|
"pushNotificationsEnabled": true,
|
|
"inAppNotificationsEnabled": true
|
|
}
|
|
}
|
|
```
|
|
|
|
---
|
|
|
|
## Database Migration
|
|
|
|
To apply the migration:
|
|
|
|
```bash
|
|
cd Re_Backend
|
|
npm run migrate
|
|
```
|
|
|
|
This will add the three notification preference columns to the `users` table with default value `true` for all existing users.
|
|
|
|
---
|
|
|
|
## Admin Configuration vs User Preferences
|
|
|
|
### Two Levels of Control:
|
|
|
|
1. **System-Wide (Admin Only)**
|
|
- Settings → Configuration → Notification Rules
|
|
- `ENABLE_EMAIL_NOTIFICATIONS` - Master switch for email
|
|
- `ENABLE_PUSH_NOTIFICATIONS` - Master switch for push
|
|
- If admin disables a channel, it's disabled for ALL users
|
|
|
|
2. **User-Level (Individual Users)**
|
|
- Settings → User Settings → Notification Preferences
|
|
- Users can disable channels for themselves
|
|
- User preferences are respected only if admin has enabled the channel
|
|
|
|
### Logic:
|
|
```
|
|
Notification Sent = Admin Enabled AND User Enabled
|
|
```
|
|
|
|
---
|
|
|
|
## Future Enhancements
|
|
|
|
- [ ] Email notification implementation (currently just a preference toggle)
|
|
- [ ] SMS notifications support
|
|
- [ ] Granular notification types (e.g., only approval requests, only TAT alerts)
|
|
- [ ] Quiet hours / Do Not Disturb schedules
|
|
- [ ] Notification digest/batching preferences
|
|
|
|
---
|
|
|
|
## Testing Checklist
|
|
|
|
- [x] User can view their notification preferences
|
|
- [x] User can toggle email notifications on/off
|
|
- [x] User can toggle push notifications on/off
|
|
- [x] User can toggle in-app notifications on/off
|
|
- [x] Notification service respects user preferences
|
|
- [x] In-app notifications are not created if disabled
|
|
- [x] Push notifications are not sent if disabled
|
|
- [x] UI shows loading states during updates
|
|
- [x] UI shows success/error messages
|
|
- [x] Migration adds columns with correct defaults
|
|
- [x] API endpoints require authentication
|
|
- [x] Changes persist after logout/login
|
|
|
|
---
|
|
|
|
## Files Modified/Created
|
|
|
|
### Backend
|
|
- ✅ `src/models/User.ts` - Added notification preference fields
|
|
- ✅ `src/migrations/20251203-add-user-notification-preferences.ts` - Migration
|
|
- ✅ `src/controllers/userPreference.controller.ts` - New controller
|
|
- ✅ `src/routes/userPreference.routes.ts` - New routes
|
|
- ✅ `src/validators/userPreference.validator.ts` - New validator
|
|
- ✅ `src/routes/index.ts` - Registered new routes
|
|
- ✅ `src/services/notification.service.ts` - Updated to respect preferences
|
|
|
|
### Frontend
|
|
- ✅ `src/services/userPreferenceApi.ts` - New API service
|
|
- ✅ `src/components/settings/NotificationPreferences.tsx` - New component
|
|
- ✅ `src/pages/Settings/Settings.tsx` - Integrated new component
|
|
|
|
---
|
|
|
|
**Implementation Complete! 🎉**
|
|
|