WooNooW/RECIPIENT_TYPE_FIX.md

🎯 THE REAL ROOT CAUSE - Recipient Type Missing from API

🔴 What You Discovered

You noticed the API URL was:

https://woonoow.local/wp-json/woonoow/v1/notifications/templates/order_placed/email

NO recipient parameter!

This means:

• Customer page → order_placed → Gets STAFF template ❌
• Staff page → order_placed → Gets STAFF template ✅

The API couldn't distinguish between customer and staff templates!

---

🔍 The Architecture Flaw

Before (BROKEN):

URL Format: /templates/{event_id}/{channel_id}
Storage Key: {event_id}_{channel_id}

Problem: Same key for both customer AND staff!
- order_placed_email → STAFF template
- order_placed_email → CUSTOMER template (OVERWRITTEN!)

After (FIXED):

URL Format: /templates/{event_id}/{channel_id}?recipient={recipient_type}
Storage Key: {recipient_type}_{event_id}_{channel_id}

Solution: Unique keys for each recipient!
- staff_order_placed_email → STAFF template ✅
- customer_order_placed_email → CUSTOMER template ✅

---

📝 All Changes Made

1. Frontend - Templates.tsx

File: admin-spa/src/routes/Settings/Notifications/Templates.tsx Line: 63 Change: Pass recipient parameter when navigating to editor

// BEFORE:
navigate(`/settings/notifications/edit-template?event=${event.id}&channel=${channel.id}`);

// AFTER:
navigate(`/settings/notifications/edit-template?event=${event.id}&channel=${channel.id}&recipient=${recipientType}`);

---

2. Frontend - EditTemplate.tsx

File: admin-spa/src/routes/Settings/Notifications/EditTemplate.tsx Lines: 34, 55, 141, 159 Changes:

1. Read recipient from URL
2. Pass to API GET request
3. Pass to API PUT request
4. Pass to API DELETE request

// Read recipient type
const recipientType = searchParams.get('recipient') || 'customer';

// Fetch template WITH recipient
const response = await api.get(`/notifications/templates/${eventId}/${channelId}?recipient=${recipientType}`);

// Save template WITH recipient
await api.put(`/notifications/templates/${eventId}/${channelId}?recipient=${recipientType}`, {...});

// Delete template WITH recipient
await api.del(`/notifications/templates/${eventId}/${channelId}?recipient=${recipientType}`);

---

3. Backend - NotificationsController.php

File: includes/Api/NotificationsController.php Lines: 587, 589, 638, 649, 674, 676 Changes: Accept recipient parameter and pass to TemplateProvider

// Get template
$recipient_type = $request->get_param('recipient') ?? 'customer';
$template = TemplateProvider::get_template($event_id, $channel_id, $recipient_type);

// Save template
$recipient_type = $request->get_param('recipient') ?? 'customer';
$result = TemplateProvider::save_template($event_id, $channel_id, $template, $recipient_type);

// Delete template
$recipient_type = $request->get_param('recipient') ?? 'customer';
TemplateProvider::delete_template($event_id, $channel_id, $recipient_type);

---

4. Backend - TemplateProvider.php

File: includes/Core/Notifications/TemplateProvider.php Lines: 41, 44, 64, 67, 90, 93, 154 Changes: Use {recipient_type}_{event_id}_{channel_id} as storage key

// Get template
public static function get_template($event_id, $channel_id, $recipient_type = 'customer') {
    $key = "{$recipient_type}_{$event_id}_{channel_id}";
    // ...
}

// Save template
public static function save_template($event_id, $channel_id, $template, $recipient_type = 'customer') {
    $key = "{$recipient_type}_{$event_id}_{channel_id}";
    // ...
}

// Delete template
public static function delete_template($event_id, $channel_id, $recipient_type = 'customer') {
    $key = "{$recipient_type}_{$event_id}_{channel_id}";
    // ...
}

// Default templates
$templates["{$recipient_type}_{$event_id}_email"] = [...];

---

🎯 Why This Fixes Everything

Issue #1: Customer showing 7 templates instead of 9

Root Cause: API was fetching staff templates for customer page Fix: Now API knows to fetch customer templates when on customer page

Issue #2: Loading staff template for customer event

Root Cause: Same storage key for both staff and customer Fix: Unique keys: staff_order_placed_email vs customer_order_placed_email

Issue #3: Saving overwrites wrong template

Root Cause: Saving to same key regardless of recipient Fix: Saves to correct recipient-specific key

---

📊 Data Flow (Now Correct!)

Customer Page → Order Placed:

1. User clicks "Edit" on Customer Notifications page
2. URL: /edit-template?event=order_placed&channel=email&recipient=customer
3. API: GET /templates/order_placed/email?recipient=customer
4. Key: customer_order_placed_email
5. Returns: CUSTOMER template ✅

Staff Page → Order Placed:

1. User clicks "Edit" on Staff Notifications page
2. URL: /edit-template?event=order_placed&channel=email&recipient=staff
3. API: GET /templates/order_placed/email?recipient=staff
4. Key: staff_order_placed_email
5. Returns: STAFF template ✅

---

🧪 Testing Steps

1. Stop dev server: Ctrl+C
2. Restart: npm run dev
3. Hard refresh: Cmd+Shift+R
4. Test Customer Page:
   • Go to Customer Notifications
   • Click "Order Placed" → Should show customer template
   • Subject should be customer-facing
5. Test Staff Page:
   • Go to Staff Notifications
   • Click "Order Placed" → Should show staff template
   • Subject should be staff-facing

---

🎉 Summary

The Problem: API had no way to distinguish between customer and staff templates

The Solution:

1. Pass recipient parameter in URL
2. Use {recipient_type}_{event_id}_{channel_id} as storage key
3. Update all API calls to include recipient type

Files Changed:

• ✅ Templates.tsx (pass recipient when navigating)
• ✅ EditTemplate.tsx (read recipient, pass to API)
• ✅ NotificationsController.php (accept recipient parameter)
• ✅ TemplateProvider.php (use recipient in storage keys)

Result: Customer and staff templates are now completely separate! 🎊