fix: remove local toast from AdminPaymentMethods, use useNotify

Remove inline Toast component, CheckIcon, and toastMessage state.
Use unified useNotify for order save/error notifications.
This commit is contained in:
c0mrade
2026-02-06 20:23:18 +03:00
parent 66a6697ea1
commit 692e45ad18

View File

@@ -3,6 +3,7 @@ import { useNavigate } from 'react-router';
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query'; import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
import { useTranslation } from 'react-i18next'; import { useTranslation } from 'react-i18next';
import { usePlatform } from '../platform/hooks/usePlatform'; import { usePlatform } from '../platform/hooks/usePlatform';
import { useNotify } from '../platform/hooks/useNotify';
import { import {
DndContext, DndContext,
KeyboardSensor, KeyboardSensor,
@@ -53,12 +54,6 @@ const ChevronRightIcon = () => (
</svg> </svg>
); );
const CheckIcon = () => (
<svg className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
<path strokeLinecap="round" strokeLinejoin="round" d="M4.5 12.75l6 6 9-13.5" />
</svg>
);
const SaveIcon = () => ( const SaveIcon = () => (
<svg className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}> <svg className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
<path <path
@@ -215,20 +210,6 @@ function SortablePaymentCard({ config, onClick }: SortableCardProps) {
// ============ Toast ============ // ============ Toast ============
function Toast({ message, onClose }: { message: string; onClose: () => void }) {
useEffect(() => {
const timer = setTimeout(onClose, 3000);
return () => clearTimeout(timer);
}, [onClose]);
return (
<div className="fixed bottom-6 left-1/2 z-50 flex -translate-x-1/2 animate-fade-in items-center gap-2 rounded-xl bg-success-500/90 px-5 py-3 text-sm font-medium text-white shadow-lg backdrop-blur-sm">
<CheckIcon />
{message}
</div>
);
}
// ============ Main Page ============ // ============ Main Page ============
export default function AdminPaymentMethods() { export default function AdminPaymentMethods() {
@@ -237,9 +218,9 @@ export default function AdminPaymentMethods() {
const queryClient = useQueryClient(); const queryClient = useQueryClient();
const { capabilities } = usePlatform(); const { capabilities } = usePlatform();
const notify = useNotify();
const [methods, setMethods] = useState<PaymentMethodConfig[]>([]); const [methods, setMethods] = useState<PaymentMethodConfig[]>([]);
const [orderChanged, setOrderChanged] = useState(false); const [orderChanged, setOrderChanged] = useState(false);
const [toastMessage, setToastMessage] = useState<string | null>(null);
// Fetch payment methods // Fetch payment methods
const { data: fetchedMethods, isLoading } = useQuery({ const { data: fetchedMethods, isLoading } = useQuery({
@@ -260,10 +241,10 @@ export default function AdminPaymentMethods() {
onSuccess: () => { onSuccess: () => {
setOrderChanged(false); setOrderChanged(false);
queryClient.invalidateQueries({ queryKey: ['admin-payment-methods'] }); queryClient.invalidateQueries({ queryKey: ['admin-payment-methods'] });
setToastMessage(t('admin.paymentMethods.orderSaved')); notify.success(t('admin.paymentMethods.orderSaved'));
}, },
onError: () => { onError: () => {
setToastMessage(t('common.error')); notify.error(t('common.error'));
}, },
}); });
@@ -290,8 +271,6 @@ export default function AdminPaymentMethods() {
saveOrderMutation.mutate(methods.map((m) => m.method_id)); saveOrderMutation.mutate(methods.map((m) => m.method_id));
}; };
const handleCloseToast = useCallback(() => setToastMessage(null), []);
return ( return (
<div className="space-y-6"> <div className="space-y-6">
{/* Header */} {/* Header */}
@@ -365,9 +344,6 @@ export default function AdminPaymentMethods() {
</div> </div>
)} )}
</div> </div>
{/* Toast */}
{toastMessage && <Toast message={toastMessage} onClose={handleCloseToast} />}
</div> </div>
); );
} }