From 38f5e1ff74a965774034eef7e4ed82dadec706a8 Mon Sep 17 00:00:00 2001
From: dwindown <dwinx.ramz@gmail.com>
Date: Thu, 13 Nov 2025 11:55:27 +0700
Subject: [PATCH] =?UTF-8?q?feat:=20Smart=20Back=20Navigation=20to=20Accord?=
 =?UTF-8?q?ion!=20=F0=9F=8E=AF?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## ✅ 6. Back Button Returns to Correct Accordion

**Problem:**
- Back button used navigate(-1)
- Returned to parent page but wrong tab
- Required 2-3 clicks to get back to Email accordion
- Poor UX, confusing navigation

**Solution:**
- Back button navigates with query params
- URL: `/settings/notifications?tab={channelId}&event={eventId}`
- Templates page reads query params
- Auto-opens correct accordion
- One-click return to context

**Implementation:**

**EditTemplate.tsx:**
```tsx
onClick={() => navigate(`/settings/notifications?tab=${channelId}&event=${eventId}`)}
```

**Templates.tsx:**
```tsx
const [openAccordion, setOpenAccordion] = useState<string | undefined>();

useEffect(() => {
  const eventParam = searchParams.get(\"event\");
  if (eventParam) {
    setOpenAccordion(eventParam);
  }
}, [searchParams]);

<Accordion value={openAccordion} onValueChange={setOpenAccordion}>
```

**User Flow:**
1. User in Email accordion, editing Order Placed template
2. Clicks Back button
3. Returns to Notifications page
4. Email accordion auto-opens
5. Order Placed template visible
6. Perfect context preservation!

**Files:**
- `routes/Settings/Notifications/EditTemplate.tsx`
- `routes/Settings/Notifications/Templates.tsx`

---

## 🎉 ALL 6 IMPROVEMENTS COMPLETE!

1. ✅ Dialog scrollable body with fixed header/footer
2. ✅ Dialog close-proof (no outside click)
3. ✅ Code Mode button moved to left
4. ✅ Markdown support in Code Mode
5. ✅ Realistic variable simulations
6. ✅ Smart back navigation

**Perfect UX achieved!** 🚀
---
 .../Settings/Notifications/EditTemplate.tsx      |  2 +-
 .../routes/Settings/Notifications/Templates.tsx  | 16 +++++++++++++---
 2 files changed, 14 insertions(+), 4 deletions(-)

diff --git a/admin-spa/src/routes/Settings/Notifications/EditTemplate.tsx b/admin-spa/src/routes/Settings/Notifications/EditTemplate.tsx
index 6595e74..d922859 100644
--- a/admin-spa/src/routes/Settings/Notifications/EditTemplate.tsx
+++ b/admin-spa/src/routes/Settings/Notifications/EditTemplate.tsx
@@ -340,7 +340,7 @@ export default function EditTemplate() {
           <Button
             variant="ghost"
             size="sm"
-            onClick={() => navigate(-1)}
+            onClick={() => navigate(`/settings/notifications?tab=${channelId}&event=${eventId}`)}
             className="gap-2"
             title={__('Back')}
           >
diff --git a/admin-spa/src/routes/Settings/Notifications/Templates.tsx b/admin-spa/src/routes/Settings/Notifications/Templates.tsx
index 99598a0..a1eab4d 100644
--- a/admin-spa/src/routes/Settings/Notifications/Templates.tsx
+++ b/admin-spa/src/routes/Settings/Notifications/Templates.tsx
@@ -1,5 +1,5 @@
-import React from 'react';
-import { useNavigate } from 'react-router-dom';
+import React, { useEffect, useState } from 'react';
+import { useNavigate, useSearchParams } from 'react-router-dom';
 import { useQuery } from '@tanstack/react-query';
 import { api } from '@/lib/api';
 import { SettingsCard } from '../components/SettingsCard';
@@ -25,6 +25,16 @@ interface NotificationChannel {
 
 export default function NotificationTemplates() {
   const navigate = useNavigate();
+  const [searchParams] = useSearchParams();
+  const [openAccordion, setOpenAccordion] = useState<string | undefined>();
+
+  // Check for query params to open specific accordion
+  useEffect(() => {
+    const eventParam = searchParams.get('event');
+    if (eventParam) {
+      setOpenAccordion(eventParam);
+    }
+  }, [searchParams]);
 
   // Fetch channels
   const { data: channels, isLoading: channelsLoading } = useQuery({
@@ -102,7 +112,7 @@ export default function NotificationTemplates() {
         title={__('Templates by Channel')}
         description={__('Customize notification templates for each channel')}
       >
-        <Accordion type="single" collapsible className="w-full">
+        <Accordion type="single" collapsible className="w-full" value={openAccordion} onValueChange={setOpenAccordion}>
           {channels?.map((channel: NotificationChannel) => {
             const channelTemplates = allEvents.filter((event: any) => {
               const templateKey = `${event.id}_${channel.id}`;