92 lines
2.6 KiB
TypeScript
92 lines
2.6 KiB
TypeScript
|
import { useState } from 'react';
|
||
|
|
import { useMutation } from '@tanstack/react-query';
|
||
|
|
import { removeTariffs } from '@/app/actions/tariffActions';
|
||
|
|
import { toast } from 'sonner';
|
||
|
|
|
||
|
|
interface TariffDeleteModalProps {
|
||
|
|
tariffId: number;
|
||
|
|
tariffName: string;
|
||
|
|
onClose: () => void;
|
||
|
|
onSuccess: () => void;
|
||
|
|
}
|
||
|
|
|
||
|
|
export function TariffDeleteModal({ tariffId, tariffName, onClose, onSuccess }: TariffDeleteModalProps) {
|
||
|
|
const [isConfirmText, setIsConfirmText] = useState('');
|
||
|
|
const confirmText = 'УДАЛИТЬ';
|
||
|
|
|
||
|
|
const deleteTariffMutation = useMutation({
|
||
|
|
mutationFn: async () => {
|
||
|
|
return await removeTariffs(tariffId);
|
||
|
|
},
|
||
|
|
onSuccess: (data) => {
|
||
|
|
if (data !== null && data !== undefined) {
|
||
|
|
toast.success('Тариф успешно удален');
|
||
|
|
onSuccess();
|
||
|
|
} else {
|
||
|
|
toast.error('Не удалось удалить тариф');
|
||
|
|
}
|
||
|
|
},
|
||
|
|
onError: () => {
|
||
|
|
toast.error('Произошла ошибка при удалении тарифа');
|
||
|
|
},
|
||
|
|
});
|
||
|
|
|
||
|
|
const handleDelete = () => {
|
||
|
|
deleteTariffMutation.mutate();
|
||
|
|
};
|
||
|
|
|
||
|
|
const getDisplayName = (name: string) => {
|
||
|
|
if (name) {
|
||
|
|
return name.toUpperCase().replace(/_/g, ' ');
|
||
|
|
}
|
||
|
|
return `ID: ${tariffId}`;
|
||
|
|
};
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div className="tariff-delete-modal">
|
||
|
|
<h2 className="tariff-delete-modal__title">Удаление тарифа</h2>
|
||
|
|
|
||
|
|
<div className="tariff-delete-modal__content">
|
||
|
|
<div className="tariff-delete-modal__warning">
|
||
|
|
<p className="warning-text">
|
||
|
|
Вы действительно хотите удалить тариф <strong>"{getDisplayName(tariffName)}"</strong>?
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div className="tariff-delete-modal__info">
|
||
|
|
<p>Это действие невозможно отменить.</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div className="tariff-delete-modal__confirm">
|
||
|
|
<label className="confirm-label">
|
||
|
|
Для подтверждения введите <strong>{confirmText}</strong>
|
||
|
|
</label>
|
||
|
|
<input
|
||
|
|
type="text"
|
||
|
|
className="confirm-input"
|
||
|
|
value={isConfirmText}
|
||
|
|
onChange={(e) => setIsConfirmText(e.target.value)}
|
||
|
|
placeholder={`Введите "${confirmText}"`}
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div className="tariff-delete-modal__actions">
|
||
|
|
<button
|
||
|
|
onClick={onClose}
|
||
|
|
className="btn btn-secondary"
|
||
|
|
disabled={deleteTariffMutation.isPending}
|
||
|
|
>
|
||
|
|
Отмена
|
||
|
|
</button>
|
||
|
|
<button
|
||
|
|
onClick={handleDelete}
|
||
|
|
className="btn btn-danger"
|
||
|
|
disabled={isConfirmText !== confirmText || deleteTariffMutation.isPending}
|
||
|
|
>
|
||
|
|
{deleteTariffMutation.isPending ? 'Удаление...' : 'Удалить'}
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|