# 🎯 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

```typescript
// 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

```typescript
// 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

```php
// 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

```php
// 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! 🎊