110 lines
No EOL
3.9 KiB
TypeScript
110 lines
No EOL
3.9 KiB
TypeScript
import { Dialog, DialogContent, DialogHeader, DialogTitle, Button } from '@/components/ui';
|
|
import { useCallback, useState } from 'react';
|
|
import { TrashIcon, ExclamationTriangleIcon } from '@heroicons/react/24/outline';
|
|
|
|
interface DeleteExchangeDialogProps {
|
|
isOpen: boolean;
|
|
exchangeId: string;
|
|
exchangeName: string;
|
|
providerMappingCount: number;
|
|
onClose: () => void;
|
|
onConfirmDelete: (exchangeId: string) => Promise<boolean>;
|
|
}
|
|
|
|
export function DeleteExchangeDialog({
|
|
isOpen,
|
|
exchangeId,
|
|
exchangeName,
|
|
providerMappingCount,
|
|
onClose,
|
|
onConfirmDelete,
|
|
}: DeleteExchangeDialogProps) {
|
|
const [loading, setLoading] = useState(false);
|
|
|
|
const handleConfirm = useCallback(async () => {
|
|
setLoading(true);
|
|
try {
|
|
const success = await onConfirmDelete(exchangeId);
|
|
if (success) {
|
|
onClose();
|
|
}
|
|
} catch (error) {
|
|
// Error deleting exchange - could add toast notification here
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
}, [exchangeId, onConfirmDelete, onClose]);
|
|
|
|
return (
|
|
<Dialog open={isOpen} onOpenChange={onClose}>
|
|
<DialogContent className="max-w-md">
|
|
<DialogHeader>
|
|
<DialogTitle className="flex items-center gap-2 text-danger">
|
|
<ExclamationTriangleIcon className="h-5 w-5" />
|
|
Delete Exchange
|
|
</DialogTitle>
|
|
</DialogHeader>
|
|
|
|
<div className="space-y-4">
|
|
<div className="p-4 bg-danger/10 border border-danger/20 rounded-lg">
|
|
<p className="text-sm text-text-primary">
|
|
Are you sure you want to delete <strong>"{exchangeName}"</strong>?
|
|
</p>
|
|
</div>
|
|
|
|
<div className="space-y-2 text-sm text-text-secondary">
|
|
<p className="font-medium text-text-primary">This action will:</p>
|
|
<ul className="list-disc list-inside space-y-1 ml-2">
|
|
<li>Hide the exchange from all lists</li>
|
|
{providerMappingCount > 0 && (
|
|
<li className="text-yellow-400">
|
|
Delete {providerMappingCount} provider mapping{providerMappingCount !== 1 ? 's' : ''}
|
|
</li>
|
|
)}
|
|
<li>Make provider exchanges available for remapping</li>
|
|
</ul>
|
|
</div>
|
|
|
|
{providerMappingCount > 0 && (
|
|
<div className="p-3 bg-yellow-500/10 border border-yellow-500/20 rounded-md">
|
|
<div className="flex items-start gap-2">
|
|
<ExclamationTriangleIcon className="h-4 w-4 text-yellow-400 mt-0.5 flex-shrink-0" />
|
|
<div className="text-sm">
|
|
<p className="font-medium text-yellow-400">Warning</p>
|
|
<p className="text-text-secondary">
|
|
This exchange has {providerMappingCount} provider mapping{providerMappingCount !== 1 ? 's' : ''}.
|
|
Deleting will permanently remove these mappings and make the provider exchanges
|
|
available for mapping to other exchanges.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
<div className="bg-surface-secondary p-3 rounded-md">
|
|
<p className="text-xs text-text-muted">
|
|
<strong>Note:</strong> This action cannot be undone. The exchange will be hidden
|
|
but can be restored by directly updating the database if needed.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Action Buttons */}
|
|
<div className="flex justify-end gap-2 pt-4">
|
|
<Button type="button" variant="outline" onClick={onClose} disabled={loading}>
|
|
Cancel
|
|
</Button>
|
|
<Button
|
|
type="button"
|
|
onClick={handleConfirm}
|
|
disabled={loading}
|
|
className="bg-danger hover:bg-danger/90 text-white"
|
|
>
|
|
<TrashIcon className="h-4 w-4 mr-1" />
|
|
{loading ? 'Deleting...' : 'Delete Exchange'}
|
|
</Button>
|
|
</div>
|
|
</DialogContent>
|
|
</Dialog>
|
|
);
|
|
} |