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
|
<Button
|
||||||
variant="ghost"
|
variant="ghost"
|
||||||
size="sm"
|
size="sm"
|
||||||
onClick={() => navigate(-1)}
|
onClick={() => navigate(`/settings/notifications?tab=${channelId}&event=${eventId}`)}
|
||||||
className="gap-2"
|
className="gap-2"
|
||||||
title={__('Back')}
|
title={__('Back')}
|
||||||
>
|
>
|
||||||
|
|||||||
@@ -1,5 +1,5 @@
|
|||||||
import React from 'react';
|
import React, { useEffect, useState } from 'react';
|
||||||
import { useNavigate } from 'react-router-dom';
|
import { useNavigate, useSearchParams } from 'react-router-dom';
|
||||||
import { useQuery } from '@tanstack/react-query';
|
import { useQuery } from '@tanstack/react-query';
|
||||||
import { api } from '@/lib/api';
|
import { api } from '@/lib/api';
|
||||||
import { SettingsCard } from '../components/SettingsCard';
|
import { SettingsCard } from '../components/SettingsCard';
|
||||||
@@ -25,6 +25,16 @@ interface NotificationChannel {
|
|||||||
|
|
||||||
export default function NotificationTemplates() {
|
export default function NotificationTemplates() {
|
||||||
const navigate = useNavigate();
|
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
|
// Fetch channels
|
||||||
const { data: channels, isLoading: channelsLoading } = useQuery({
|
const { data: channels, isLoading: channelsLoading } = useQuery({
|
||||||
@@ -102,7 +112,7 @@ export default function NotificationTemplates() {
|
|||||||
title={__('Templates by Channel')}
|
title={__('Templates by Channel')}
|
||||||
description={__('Customize notification templates for each 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) => {
|
{channels?.map((channel: NotificationChannel) => {
|
||||||
const channelTemplates = allEvents.filter((event: any) => {
|
const channelTemplates = allEvents.filter((event: any) => {
|
||||||
const templateKey = `${event.id}_${channel.id}`;
|
const templateKey = `${event.id}_${channel.id}`;
|
||||||
|
|||||||
Reference in New Issue
Block a user