feat: Smart Back Navigation to Accordion! 🎯
## ✅ 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!** 🚀
This commit is contained in:
@@ -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')}
|
||||
>
|
||||
|
||||
@@ -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}`;
|
||||
|
||||
Reference in New Issue
Block a user