WooNooW/NOTIFICATION_REFACTOR_STATUS.md

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

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:

<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 ✅)

• Backend: Add staff/customer endpoints
• Backend: Add recipient_type to events
• Backend: Filter events by recipient
• Frontend: Restructure main Notifications page
• Frontend: Create Staff Notifications page
• Frontend: Move Channels to Staff/Channels
• Frontend: Move Events to Staff/Events
• 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

# 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! 🚀