43a41844e5
## Issue #1: Back Button Navigation Fixed **Problem:** Back button navigated too far to Notifications.tsx **Root Cause:** Wrong route - should go to /staff or /customer page with templates tab **Solution:** - Detect if staff or customer event - Navigate to `/settings/notifications/{staff|customer}?tab=templates` - Staff.tsx and Customer.tsx read tab query param - Auto-open templates tab on return **Files:** - `routes/Settings/Notifications/EditTemplate.tsx` - `routes/Settings/Notifications/Staff.tsx` - `routes/Settings/Notifications/Customer.tsx` ## Issue #2: Dialog Pattern - Use Existing, Dont Reinvent! **Problem:** Created new DialogBody component, over-engineered **Root Cause:** Didnt check existing dialog usage in project **Solution:** - Reverted dialog.tsx to original - Use existing pattern from Shipping.tsx: ```tsx <DialogContent className="max-h-[90vh] overflow-y-auto"> ``` - Simple, proven, works! **Files:** - `components/ui/dialog.tsx` - Reverted to original - `components/ui/rich-text-editor.tsx` - Use existing pattern **Lesson Learned:** Always scan project for existing patterns before creating new ones! Both issues fixed! ✅
59 lines
2.0 KiB
TypeScript
59 lines
2.0 KiB
TypeScript
import React, { useState, useEffect } from 'react';
|
|
import { Link, useSearchParams } from 'react-router-dom';
|
|
import { SettingsLayout } from '../components/SettingsLayout';
|
|
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
|
|
import { Button } from '@/components/ui/button';
|
|
import { __ } from '@/lib/i18n';
|
|
import { ChevronLeft } from 'lucide-react';
|
|
import StaffChannels from './Staff/Channels';
|
|
import StaffEvents from './Staff/Events';
|
|
import NotificationTemplates from './Templates';
|
|
|
|
export default function StaffNotifications() {
|
|
const [searchParams] = useSearchParams();
|
|
const [activeTab, setActiveTab] = useState('channels');
|
|
|
|
// Check for tab query param
|
|
useEffect(() => {
|
|
const tabParam = searchParams.get('tab');
|
|
if (tabParam && ['channels', 'events', 'templates'].includes(tabParam)) {
|
|
setActiveTab(tabParam);
|
|
}
|
|
}, [searchParams]);
|
|
|
|
return (
|
|
<SettingsLayout
|
|
title={__('Staff Notifications')}
|
|
description={__('Configure notifications for admins and staff members')}
|
|
action={
|
|
<Link to="/settings/notifications">
|
|
<Button variant="ghost" size="sm">
|
|
<ChevronLeft className="mr-2 h-4 w-4" />
|
|
{__('Back to Notifications')}
|
|
</Button>
|
|
</Link>
|
|
}
|
|
>
|
|
<Tabs value={activeTab} onValueChange={setActiveTab} className="space-y-6">
|
|
<TabsList className="grid w-full grid-cols-3">
|
|
<TabsTrigger value="channels">{__('Channels')}</TabsTrigger>
|
|
<TabsTrigger value="events">{__('Events')}</TabsTrigger>
|
|
<TabsTrigger value="templates">{__('Templates')}</TabsTrigger>
|
|
</TabsList>
|
|
|
|
<TabsContent value="channels" className="space-y-4">
|
|
<StaffChannels />
|
|
</TabsContent>
|
|
|
|
<TabsContent value="events" className="space-y-4">
|
|
<StaffEvents />
|
|
</TabsContent>
|
|
|
|
<TabsContent value="templates" className="space-y-4">
|
|
<NotificationTemplates />
|
|
</TabsContent>
|
|
</Tabs>
|
|
</SettingsLayout>
|
|
);
|
|
}
|