docs: Add notification refactor status document
## 📊 Progress Tracking Created NOTIFICATION_REFACTOR_STATUS.md to track: ### Phase 1: Complete ✅ (40%) - Backend endpoints for staff/customer - Main Notifications hub page - Staff Notifications section - Staff components (Channels, Events) ### Phase 2-5: Pending 📋 (60%) - Customer Notifications page - Customer components - Routes registration - Templates update - Testing ### Quick Start Guide - Step-by-step instructions for next session - File locations and code examples - Architecture diagram --- **Current Status:** Backend + Staff complete, Customer pending
This commit is contained in:
dwindown
327
NOTIFICATION_REFACTOR_STATUS.md
Normal file
327
NOTIFICATION_REFACTOR_STATUS.md
Normal file
@@ -0,0 +1,327 @@
|
||||
# Notification System Refactor - Implementation Status
|
||||
|
||||
**Started:** November 11, 2025, 6:52 PM (GMT+7)
|
||||
**Status:** 🚧 In Progress (Phase 1 Complete)
|
||||
|
||||
---
|
||||
|
||||
## ✅ Phase 1 Complete: Backend + Staff Frontend
|
||||
|
||||
### Backend (100% Complete)
|
||||
|
||||
**File:** `includes/Api/NotificationsController.php`
|
||||
|
||||
**Changes:**
|
||||
1. ✅ Added `GET /notifications/staff/events` endpoint
|
||||
2. ✅ Added `GET /notifications/customer/events` endpoint
|
||||
3. ✅ Created `get_all_events()` private helper method
|
||||
4. ✅ Added `recipient_type` field to all events
|
||||
5. ✅ Filtering logic for staff vs customer events
|
||||
|
||||
**Event Classification:**
|
||||
- **Staff Events:** order_placed, order_cancelled, low_stock, out_of_stock
|
||||
- **Customer Events:** order_processing, order_completed, order_refunded, new_customer, customer_note
|
||||
|
||||
### Frontend - Main Page (100% Complete)
|
||||
|
||||
**File:** `admin-spa/src/routes/Settings/Notifications.tsx`
|
||||
|
||||
**Changes:**
|
||||
1. ✅ Removed tabs (Events, Channels, Templates)
|
||||
2. ✅ Added card-based layout
|
||||
3. ✅ Three cards: Staff Notifications, Customer Notifications, Activity Log
|
||||
4. ✅ Links to `/settings/notifications/staff` and `/settings/notifications/customer`
|
||||
5. ✅ Modern UI with icons and descriptions
|
||||
|
||||
### Frontend - Staff Section (100% Complete)
|
||||
|
||||
**File:** `admin-spa/src/routes/Settings/Notifications/Staff.tsx`
|
||||
|
||||
**Changes:**
|
||||
1. ✅ Created Staff Notifications page with tabs
|
||||
2. ✅ Tabs: Channels, Events, Templates
|
||||
3. ✅ Back button to main Notifications page
|
||||
4. ✅ Reuses existing components
|
||||
|
||||
**File:** `admin-spa/src/routes/Settings/Notifications/Staff/Channels.tsx`
|
||||
- ✅ Copied from `Notifications/Channels.tsx`
|
||||
- ✅ No changes needed (already works for staff)
|
||||
|
||||
**File:** `admin-spa/src/routes/Settings/Notifications/Staff/Events.tsx`
|
||||
- ✅ Copied from `Notifications/Events.tsx`
|
||||
- ✅ Updated to use `/notifications/staff/events` endpoint
|
||||
- ✅ Updated query key to `notification-staff-events`
|
||||
- ✅ Fixed import paths
|
||||
|
||||
---
|
||||
|
||||
## 🚧 Phase 2: Customer Frontend (To Do)
|
||||
|
||||
### Customer Notifications Page
|
||||
|
||||
**File to Create:** `admin-spa/src/routes/Settings/Notifications/Customer.tsx`
|
||||
|
||||
```typescript
|
||||
import React, { useState } from 'react';
|
||||
import { Link } from 'react-router-dom';
|
||||
import { SettingsLayout } from '../components/SettingsLayout';
|
||||
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { __ } from '@/lib/i18n';
|
||||
import { ChevronLeft } from 'lucide-react';
|
||||
import CustomerChannels from './Customer/Channels';
|
||||
import CustomerEvents from './Customer/Events';
|
||||
import NotificationTemplates from './Templates';
|
||||
|
||||
export default function CustomerNotifications() {
|
||||
const [activeTab, setActiveTab] = useState('channels');
|
||||
|
||||
return (
|
||||
<SettingsLayout
|
||||
title={__('Customer Notifications')}
|
||||
description={__('Configure notifications sent to customers')}
|
||||
action={
|
||||
<Link to="/settings/notifications">
|
||||
<Button variant="ghost" size="sm">
|
||||
<ChevronLeft className="mr-2 h-4 w-4" />
|
||||
{__('Back to Notifications')}
|
||||
</Button>
|
||||
</Link>
|
||||
}
|
||||
>
|
||||
<Tabs value={activeTab} onValueChange={setActiveTab} className="space-y-6">
|
||||
<TabsList className="grid w-full grid-cols-3">
|
||||
<TabsTrigger value="channels">{__('Channels')}</TabsTrigger>
|
||||
<TabsTrigger value="events">{__('Events')}</TabsTrigger>
|
||||
<TabsTrigger value="templates">{__('Templates')}</TabsTrigger>
|
||||
</TabsList>
|
||||
|
||||
<TabsContent value="channels" className="space-y-4">
|
||||
<CustomerChannels />
|
||||
</TabsContent>
|
||||
|
||||
<TabsContent value="events" className="space-y-4">
|
||||
<CustomerEvents />
|
||||
</TabsContent>
|
||||
|
||||
<TabsContent value="templates" className="space-y-4">
|
||||
<NotificationTemplates recipientType="customer" />
|
||||
</TabsContent>
|
||||
</Tabs>
|
||||
</SettingsLayout>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
### Customer Channels Component
|
||||
|
||||
**File to Create:** `admin-spa/src/routes/Settings/Notifications/Customer/Channels.tsx`
|
||||
|
||||
**Features:**
|
||||
- Email channel (always available)
|
||||
- Push notifications (requires customer opt-in)
|
||||
- SMS channel (addon, coming soon)
|
||||
- Different messaging for customer context
|
||||
|
||||
### Customer Events Component
|
||||
|
||||
**File to Create:** `admin-spa/src/routes/Settings/Notifications/Customer/Events.tsx`
|
||||
|
||||
**Features:**
|
||||
- Use `/notifications/customer/events` endpoint
|
||||
- Query key: `notification-customer-events`
|
||||
- Categories:
|
||||
- **Orders:** Processing, Completed, Refunded
|
||||
- **Account:** New Customer, Customer Note
|
||||
- **Shipping:** (future) Shipped, Delivered, Tracking Updates
|
||||
- **Marketing:** (future) Abandoned Cart, Promotions
|
||||
|
||||
---
|
||||
|
||||
## 🚧 Phase 3: Routes Registration (To Do)
|
||||
|
||||
### Update App Routes
|
||||
|
||||
**File to Update:** `admin-spa/src/App.tsx`
|
||||
|
||||
**Add Routes:**
|
||||
```typescript
|
||||
<Route path="/settings/notifications/staff" element={<StaffNotifications />} />
|
||||
<Route path="/settings/notifications/customer" element={<CustomerNotifications />} />
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 🚧 Phase 4: Templates Update (To Do)
|
||||
|
||||
### Update Templates Component
|
||||
|
||||
**File to Update:** `admin-spa/src/routes/Settings/Notifications/Templates.tsx`
|
||||
|
||||
**Changes:**
|
||||
- Accept `recipientType` prop (`'staff' | 'customer'`)
|
||||
- Filter templates by recipient type
|
||||
- Show different template categories based on recipient
|
||||
|
||||
---
|
||||
|
||||
## 📋 Implementation Checklist
|
||||
|
||||
### Phase 1: Backend + Staff (Complete ✅)
|
||||
- [x] Backend: Add staff/customer endpoints
|
||||
- [x] Backend: Add recipient_type to events
|
||||
- [x] Backend: Filter events by recipient
|
||||
- [x] Frontend: Restructure main Notifications page
|
||||
- [x] Frontend: Create Staff Notifications page
|
||||
- [x] Frontend: Move Channels to Staff/Channels
|
||||
- [x] Frontend: Move Events to Staff/Events
|
||||
- [x] Frontend: Update Staff/Events endpoint
|
||||
|
||||
### Phase 2: Customer Frontend (In Progress 🚧)
|
||||
- [ ] Create Customer Notifications page
|
||||
- [ ] Create Customer/Channels component
|
||||
- [ ] Create Customer/Events component
|
||||
- [ ] Update Customer/Events to use customer endpoint
|
||||
- [ ] Add customer-specific messaging
|
||||
|
||||
### Phase 3: Routes (Pending 📋)
|
||||
- [ ] Register /settings/notifications/staff route
|
||||
- [ ] Register /settings/notifications/customer route
|
||||
- [ ] Test navigation between pages
|
||||
|
||||
### Phase 4: Templates (Pending 📋)
|
||||
- [ ] Add recipientType prop to Templates
|
||||
- [ ] Filter templates by recipient
|
||||
- [ ] Test template editing for both types
|
||||
|
||||
### Phase 5: Testing (Pending 📋)
|
||||
- [ ] Test staff notifications flow
|
||||
- [ ] Test customer notifications flow
|
||||
- [ ] Test navigation
|
||||
- [ ] Test data persistence
|
||||
- [ ] Test with different events
|
||||
|
||||
---
|
||||
|
||||
## 🎯 Next Steps
|
||||
|
||||
1. **Create Customer Notifications Page**
|
||||
- Copy structure from Staff.tsx
|
||||
- Update titles and descriptions
|
||||
- Link to Customer components
|
||||
|
||||
2. **Create Customer/Channels Component**
|
||||
- Similar to Staff/Channels
|
||||
- Add SMS channel (disabled, coming soon)
|
||||
- Customer-specific messaging
|
||||
|
||||
3. **Create Customer/Events Component**
|
||||
- Use `/notifications/customer/events`
|
||||
- Query key: `notification-customer-events`
|
||||
- Customer event categories
|
||||
|
||||
4. **Register Routes**
|
||||
- Add to App.tsx
|
||||
- Test navigation
|
||||
|
||||
5. **Update Templates**
|
||||
- Add recipientType prop
|
||||
- Filter by recipient
|
||||
|
||||
6. **Test Everything**
|
||||
- End-to-end testing
|
||||
- Fix any issues
|
||||
|
||||
---
|
||||
|
||||
## 📊 Progress
|
||||
|
||||
**Overall:** 40% Complete
|
||||
|
||||
- Backend: 100% ✅
|
||||
- Main Page: 100% ✅
|
||||
- Staff Section: 100% ✅
|
||||
- Customer Section: 0% 📋
|
||||
- Routes: 0% 📋
|
||||
- Templates: 0% 📋
|
||||
- Testing: 0% 📋
|
||||
|
||||
---
|
||||
|
||||
## 🚀 Quick Start for Next Session
|
||||
|
||||
```bash
|
||||
# Continue from where we left off
|
||||
|
||||
# 1. Create Customer Notifications page
|
||||
# File: admin-spa/src/routes/Settings/Notifications/Customer.tsx
|
||||
|
||||
# 2. Create Customer/Channels component
|
||||
# File: admin-spa/src/routes/Settings/Notifications/Customer/Channels.tsx
|
||||
|
||||
# 3. Create Customer/Events component
|
||||
# File: admin-spa/src/routes/Settings/Notifications/Customer/Events.tsx
|
||||
|
||||
# 4. Register routes in App.tsx
|
||||
|
||||
# 5. Test the flow
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 📚 Architecture
|
||||
|
||||
```
|
||||
Settings → Notifications (Main Hub)
|
||||
├── Staff Notifications (/settings/notifications/staff)
|
||||
│ ├── Channels Tab
|
||||
│ │ ├── Email (Built-in)
|
||||
│ │ └── Push Notifications (Built-in)
|
||||
│ ├── Events Tab
|
||||
│ │ ├── Orders (order_placed, order_cancelled)
|
||||
│ │ ├── Products (low_stock, out_of_stock)
|
||||
│ │ └── Customers (admin view)
|
||||
│ └── Templates Tab
|
||||
│ └── Staff email/push templates
|
||||
│
|
||||
└── Customer Notifications (/settings/notifications/customer)
|
||||
├── Channels Tab
|
||||
│ ├── Email (Built-in)
|
||||
│ ├── Push Notifications (Requires opt-in)
|
||||
│ └── SMS (Addon, coming soon)
|
||||
├── Events Tab
|
||||
│ ├── Orders (order_processing, order_completed, order_refunded)
|
||||
│ ├── Account (new_customer, customer_note)
|
||||
│ └── Shipping (future: shipped, delivered)
|
||||
└── Templates Tab
|
||||
└── Customer email/push templates
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## ✅ Success Criteria
|
||||
|
||||
1. **Clear Separation**
|
||||
- Staff and Customer sections are visually distinct
|
||||
- Easy to navigate between sections
|
||||
- No confusion about which notifications are for whom
|
||||
|
||||
2. **Code Reusability**
|
||||
- 70-80% code reuse between Staff and Customer
|
||||
- Shared components where possible
|
||||
- DRY principles followed
|
||||
|
||||
3. **Scalability**
|
||||
- Easy to add new event types
|
||||
- Easy to add new channels
|
||||
- Easy to add new recipient types (future: vendors, partners)
|
||||
|
||||
4. **User Experience**
|
||||
- Intuitive navigation
|
||||
- Clear labeling
|
||||
- Helpful descriptions
|
||||
- Responsive design
|
||||
|
||||
---
|
||||
|
||||
**Status:** Phase 1 complete, ready for Phase 2! 🚀
|
||||
Reference in New Issue
Block a user