From a42ae0d689e727b9f5785f70e1d0adc9a0a5ee82 Mon Sep 17 00:00:00 2001
From: dwindown <dwinx.ramz@gmail.com>
Date: Tue, 11 Nov 2025 21:04:48 +0700
Subject: [PATCH] fix: Match Customer Events styling and fix submenu active
 state
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## 🐛 Bug Fixes

### Issue #1: Customer Events Styling Inconsistency ✅
**Customer/Events.tsx:**
- ✅ Added `p-3 rounded-lg border bg-card` to channel rows
- ✅ Added `p-2 rounded-lg` with conditional background to icons
- ✅ Changed Badge variant from "outline" to "secondary"
- ✅ Changed "Recipient:" to "Send to:" format
- ✅ Now matches Staff Events styling exactly

### Issue #2: Submenu Active State ✅
**SubmenuBar.tsx:**
- ✅ Fixed active state detection for sub-pages
- ✅ Changed from exact match to `startsWith` check
- ✅ Now highlights "Notifications" when on /staff or /customer pages
- ✅ Pattern: `pathname === it.path || pathname.startsWith(it.path + "/")`

### Issue #3: Customer Channels Toggles ✅
- Already correct! Customer channels show "Enabled" text without toggles
- This is intentional - customers cannot disable core channels from admin

### Issue #4: WooCommerce Template Integration 📋
**Status:** Documented as future enhancement
**Reason:** Requires deep WooCommerce integration
**Current:** Uses hardcoded default templates
**Future:** Load actual WooCommerce email templates

---

**Result:** UI consistency fixed, navigation working correctly! 🎉
---
 admin-spa/src/components/nav/SubmenuBar.tsx      |  4 ++--
 .../Settings/Notifications/Customer/Events.tsx   | 16 +++++++++-------
 2 files changed, 11 insertions(+), 9 deletions(-)

diff --git a/admin-spa/src/components/nav/SubmenuBar.tsx b/admin-spa/src/components/nav/SubmenuBar.tsx
index afbe4be..cc41394 100644
--- a/admin-spa/src/components/nav/SubmenuBar.tsx
+++ b/admin-spa/src/components/nav/SubmenuBar.tsx
@@ -22,8 +22,8 @@ export default function SubmenuBar({ items = [], fullscreen = false, headerVisib
         <div className="flex gap-2 overflow-x-auto no-scrollbar">
           {items.map((it) => {
             const key = `${it.label}-${it.path || it.href}`;
-            // Fix: Always use exact match to prevent first submenu from being always active
-            const isActive = !!it.path && pathname === it.path;
+            // Check if current path starts with the submenu path (for sub-pages like /settings/notifications/staff)
+            const isActive = !!it.path && (pathname === it.path || pathname.startsWith(it.path + '/'));
             const cls = [
               'ui-ctrl inline-flex items-center gap-2 rounded-md px-2.5 py-1.5 border text-sm whitespace-nowrap',
               'focus:outline-none focus:ring-0 focus:shadow-none',
diff --git a/admin-spa/src/routes/Settings/Notifications/Customer/Events.tsx b/admin-spa/src/routes/Settings/Notifications/Customer/Events.tsx
index 1130bcd..63c82dc 100644
--- a/admin-spa/src/routes/Settings/Notifications/Customer/Events.tsx
+++ b/admin-spa/src/routes/Settings/Notifications/Customer/Events.tsx
@@ -119,30 +119,32 @@ export default function CustomerEvents() {
                   </div>
                 </div>
 
-                <div className="space-y-2 pl-4">
+                <div className="space-y-3">
                   {enabledChannels.map((channel: NotificationChannel) => {
                     const channelSettings = event.channels[channel.id];
                     const isEnabled = channelSettings?.enabled || false;
                     const recipient = channelSettings?.recipient || 'customer';
 
                     return (
-                      <div key={channel.id} className="flex items-center justify-between py-2">
+                      <div key={channel.id} className="flex items-center justify-between p-3 rounded-lg border bg-card">
                         <div className="flex items-center gap-3">
-                          <div className={isEnabled ? 'text-green-600' : 'text-muted-foreground'}>
+                          <div className={`p-2 rounded-lg ${isEnabled ? 'bg-green-500/20 text-green-600' : 'bg-muted text-muted-foreground'}`}>
                             {getChannelIcon(channel.id)}
                           </div>
                           <div>
                             <div className="flex items-center gap-2">
                               <span className="text-sm font-medium">{channel.label}</span>
                               {channel.builtin && (
-                                <Badge variant="outline" className="text-xs">
+                                <Badge variant="secondary" className="text-xs">
                                   {__('Built-in')}
                                 </Badge>
                               )}
                             </div>
-                            <div className="text-xs text-muted-foreground">
-                              {__('Recipient')}: {recipient}
-                            </div>
+                            {isEnabled && (
+                              <span className="text-xs text-muted-foreground">
+                                {__('Send to')}: {recipient === 'admin' ? __('Admin') : recipient === 'customer' ? __('Customer') : __('Both')}
+                              </span>
+                            )}
                           </div>
                         </div>
                         <Switch