mirror of
https://github.com/chillpadclub/bedolaga-cabinet.git
synced 2026-07-30 10:27:49 +00:00
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:
@@ -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>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user