From 7e64fd465408e1d9c2f71ca356b624f242cf8d13 Mon Sep 17 00:00:00 2001
From: dwindown <dwinx.ramz@gmail.com>
Date: Thu, 13 Nov 2025 00:23:13 +0700
Subject: [PATCH] fix: Restore contextual header + add debugging
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## Fixes:

1. **Contextual Header Restored** ✅
   - Title back to string (not ReactNode)
   - Header now shows properly
   - Back button moved to action area

2. **Comprehensive Debugging Added** 🔍
   - Log API fetch
   - Log API response
   - Log template data
   - Log state changes (subject, body, variables)
   - Will help identify why defaults not loading

## Changes:

```tsx
// Before: ReactNode title (broke header)
title={<div><BackButton /><span>Title</span></div>}

// After: String title (header works)
title={template?.event_label || "Edit Template"}
action={
  <div>
    <BackButton />
    <ResetButton />
  </div>
}
```

## Debug Logs:
- "Fetching template for:" eventId, channelId
- "API Response:" full response
- "Template changed:" template object
- "Template data:" destructured fields
- "Subject state:", "Body state:", "Variables state:"

Check browser console to see what is happening!
---
 .../Settings/Notifications/EditTemplate.tsx   | 72 ++++++++++++-------
 1 file changed, 47 insertions(+), 25 deletions(-)

diff --git a/admin-spa/src/routes/Settings/Notifications/EditTemplate.tsx b/admin-spa/src/routes/Settings/Notifications/EditTemplate.tsx
index e5c73d6..fade92a 100644
--- a/admin-spa/src/routes/Settings/Notifications/EditTemplate.tsx
+++ b/admin-spa/src/routes/Settings/Notifications/EditTemplate.tsx
@@ -37,24 +37,47 @@ export default function EditTemplate() {
   const [codeMode, setCodeMode] = useState(false);
 
   // Fetch template
-  const { data: template, isLoading } = useQuery({
+  const { data: template, isLoading, error } = useQuery({
     queryKey: ['notification-template', eventId, channelId],
     queryFn: async () => {
+      console.log('Fetching template for:', eventId, channelId);
       const response = await api.get(`/notifications/templates/${eventId}/${channelId}`);
+      console.log('API Response:', response);
       return response.data;
     },
     enabled: !!eventId && !!channelId,
   });
 
   useEffect(() => {
-    if (template && template.subject !== undefined && template.body !== undefined) {
-      console.log('Setting template data:', template);
+    console.log('Template changed:', template);
+    if (template) {
+      console.log('Template data:', {
+        subject: template.subject,
+        body: template.body,
+        variables: template.variables,
+        event_label: template.event_label,
+        channel_label: template.channel_label
+      });
+      
       setSubject(template.subject || '');
       setBody(template.body || '');
       setVariables(template.variables || {});
     }
   }, [template]);
 
+  // Debug: Log when states change
+  useEffect(() => {
+    console.log('Subject state:', subject);
+  }, [subject]);
+
+  useEffect(() => {
+    console.log('Body state:', body);
+  }, [body]);
+
+  useEffect(() => {
+    console.log('Variables state:', variables);
+  }, [variables]);
+
   const handleSave = async () => {
     try {
       await api.post('/notifications/templates', {
@@ -186,33 +209,32 @@ export default function EditTemplate() {
 
   return (
     <SettingsLayout
-      title={
-        <div className="flex items-center gap-2">
-          <Button
-            variant="ghost"
-            size="sm"
-            onClick={() => navigate(-1)}
-            className="-ml-2 px-2"
-          >
-            <ArrowLeft className="h-5 w-5" />
-          </Button>
-          <span>{template?.event_label || __('Edit Template')}</span>
-        </div>
-      }
+      title={template?.event_label || __('Edit Template')}
       description={`${template?.channel_label || ''} - ${__('Customize the notification template. Use variables like {customer_name} to personalize messages.')}`}
       onSave={handleSave}
       saveLabel={__('Save Template')}
       isLoading={isLoading}
       action={
-        <Button
-          variant="outline"
-          size="sm"
-          onClick={handleReset}
-          className="gap-2"
-        >
-          <RotateCcw className="h-4 w-4" />
-          {__('Reset to Default')}
-        </Button>
+        <div className="flex items-center gap-2">
+          <Button
+            variant="ghost"
+            size="sm"
+            onClick={() => navigate(-1)}
+            className="gap-2"
+          >
+            <ArrowLeft className="h-4 w-4" />
+            {__('Back')}
+          </Button>
+          <Button
+            variant="outline"
+            size="sm"
+            onClick={handleReset}
+            className="gap-2"
+          >
+            <RotateCcw className="h-4 w-4" />
+            {__('Reset to Default')}
+          </Button>
+        </div>
       }
     >
       {/* Tabs - Sticky in header area */}