From 8c834bdfcceff15c7d95a34988b62167a23ab23f Mon Sep 17 00:00:00 2001
From: dwindown <dwinx.ramz@gmail.com>
Date: Wed, 12 Nov 2025 23:51:22 +0700
Subject: [PATCH] fix: Boxed layout + description + default templates
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## ✅ All 3 Issues Fixed!

### 1. Boxed Layout ✅
**Before:** Full-width (inconsistent with settings pages)
**After:** Max-width container (max-w-7xl)

- Header section boxed
- Subject input boxed
- Body/tabs boxed
- Consistent with other settings pages
- Better visual hierarchy

### 2. Added Description ✅
**Before:** Just title + event/channel
**After:** Title + event/channel + helpful description

Added:
```
"Customize the notification template. Use variables like {customer_name} to personalize messages."
```

- Provides context
- Helps users understand purpose
- Professional UX

### 3. Default Templates ✅
**Already implemented!** Templates have rich default content:

**Order Placed (Admin):**
- Card 1: New order notification
- Card 2: Customer details
- Card 3: View order CTA

**Order Processing (Customer):**
- Card 1: Success card with confirmation
- Card 2: Order summary
- Card 3: Track order CTA

**All templates:**
- ✅ Best practice content
- ✅ Card-based design
- ✅ Professional formatting
- ✅ Clear CTAs
- ✅ Ready to use out-of-box

Store owners can start immediately without setup! 🎉

---

**Layout Structure:**
```
┌─────────────────────────────────┐
│   [max-w-7xl container]         │
│   ┌───────────────────────┐     │
│   │ Back | Title          │     │
│   │ Description            │     │
│   │ Subject Input          │     │
│   │ [Editor | Preview]     │     │
│   └───────────────────────┘     │
└─────────────────────────────────┘
```

Perfect consistency with settings pages! ✨
---
 .../Settings/Notifications/EditTemplate.tsx   | 51 +++++++++++--------
 1 file changed, 29 insertions(+), 22 deletions(-)

diff --git a/admin-spa/src/routes/Settings/Notifications/EditTemplate.tsx b/admin-spa/src/routes/Settings/Notifications/EditTemplate.tsx
index 5bf90e1..cacdf98 100644
--- a/admin-spa/src/routes/Settings/Notifications/EditTemplate.tsx
+++ b/admin-spa/src/routes/Settings/Notifications/EditTemplate.tsx
@@ -186,27 +186,31 @@ export default function EditTemplate() {
     <div className="flex flex-col h-full">
       {/* Header */}
       <div className="border-b bg-background sticky top-0 z-10">
-        <div className="flex items-center justify-between px-6 py-4">
-          <div className="flex items-center gap-4">
-            <Button
-              variant="ghost"
-              size="sm"
-              onClick={() => navigate(-1)}
-              className="gap-2"
-            >
-              <ArrowLeft className="h-4 w-4" />
-              {__('Back')}
-            </Button>
-            <div>
-              <h1 className="text-2xl font-bold">
-                {__('Edit Template')}
-              </h1>
-              <p className="text-sm text-muted-foreground">
-                {template?.event_label} - {template?.channel_label}
-              </p>
+        <div className="max-w-7xl mx-auto w-full px-6 py-4">
+          <div className="flex items-center justify-between">
+            <div className="flex items-center gap-4">
+              <Button
+                variant="ghost"
+                size="sm"
+                onClick={() => navigate(-1)}
+                className="gap-2"
+              >
+                <ArrowLeft className="h-4 w-4" />
+                {__('Back')}
+              </Button>
+              <div>
+                <h1 className="text-2xl font-bold">
+                  {__('Edit Template')}
+                </h1>
+                <p className="text-sm text-muted-foreground mt-1">
+                  {template?.event_label} - {template?.channel_label}
+                </p>
+                <p className="text-xs text-muted-foreground mt-1">
+                  {__('Customize the notification template. Use variables like {customer_name} to personalize messages.')}
+                </p>
+              </div>
             </div>
-          </div>
-          <div className="flex items-center gap-2">
+            <div className="flex items-center gap-2">
             <Button
               variant="outline"
               onClick={() => resetMutation.mutate()}
@@ -224,11 +228,12 @@ export default function EditTemplate() {
               <Save className="h-4 w-4" />
               {saveMutation.isPending ? __('Saving...') : __('Save Template')}
             </Button>
+            </div>
           </div>
         </div>
 
         {/* Subject */}
-        <div className="px-6 pb-4">
+        <div className="max-w-7xl mx-auto w-full px-6 pb-4">
           <Label htmlFor="subject" className="text-sm">{__('Subject / Title')}</Label>
           <Input
             id="subject"
@@ -241,7 +246,8 @@ export default function EditTemplate() {
       </div>
 
       {/* Body - Tabs */}
-      <div className="flex-1 overflow-y-auto px-6 py-6">
+      <div className="flex-1 overflow-y-auto">
+        <div className="max-w-7xl mx-auto w-full px-6 py-6">
         <Tabs value={activeTab} onValueChange={setActiveTab} className="w-full">
           <TabsList className="grid w-full max-w-md grid-cols-2">
             <TabsTrigger value="editor" className="flex items-center gap-2">
@@ -292,6 +298,7 @@ export default function EditTemplate() {
             </div>
           </TabsContent>
         </Tabs>
+        </div>
       </div>
     </div>
   );