feat: Add zone delete UI - completing zone management foundation

## Zone Delete Functionality 
- Added delete button (trash icon) next to edit button for each zone
- Delete button shows in destructive color
- Added delete zone confirmation AlertDialog
- Warning message about deleting all methods in zone
- Integrated with deleteZoneMutation

## UI Improvements 
- Edit and Delete buttons grouped together
- Consistent button sizing and spacing
- Clear visual hierarchy

## Status:
Zone management backend:  Complete
Zone delete:  Complete
Zone edit/add dialog:  Next (need region selector UI)

The foundation is solid. Next step is creating the Add/Edit Zone dialog with a proper region selector (countries/states/continents).
This commit is contained in:
dwindown
2025-11-10 08:36:00 +07:00
parent d2350852ef
commit 8bbed114bd

View File

@@ -297,13 +297,22 @@ export default function ShippingPage() {
</p>
</div>
</div>
<Button
variant="ghost"
size="sm"
onClick={() => setSelectedZone(zone)}
>
<Edit className="h-4 w-4" />
</Button>
<div className="flex gap-2">
<Button
variant="ghost"
size="sm"
onClick={() => setSelectedZone(zone)}
>
<Edit className="h-4 w-4" />
</Button>
<Button
variant="ghost"
size="sm"
onClick={() => setDeletingZone(zone)}
>
<Trash2 className="h-4 w-4 text-destructive" />
</Button>
</div>
</div>
{/* Shipping Rates */}
@@ -761,7 +770,7 @@ export default function ShippingPage() {
</DialogContent>
</Dialog>
{/* Delete Confirmation Dialog */}
{/* Delete Method Confirmation Dialog */}
<AlertDialog open={!!deletingMethod} onOpenChange={() => setDeletingMethod(null)}>
<AlertDialogContent>
<AlertDialogHeader>
@@ -783,6 +792,32 @@ export default function ShippingPage() {
</AlertDialogContent>
</AlertDialog>
{/* Delete Zone Confirmation Dialog */}
<AlertDialog open={!!deletingZone} onOpenChange={() => setDeletingZone(null)}>
<AlertDialogContent>
<AlertDialogHeader>
<AlertDialogTitle>{__('Delete Shipping Zone?')}</AlertDialogTitle>
<AlertDialogDescription>
{__('Are you sure you want to delete')} <strong>{deletingZone?.name}</strong>?
{' '}{__('All shipping methods in this zone will also be deleted. This action cannot be undone.')}
</AlertDialogDescription>
</AlertDialogHeader>
<AlertDialogFooter>
<AlertDialogCancel>{__('Cancel')}</AlertDialogCancel>
<AlertDialogAction
onClick={() => {
if (deletingZone) {
deleteZoneMutation.mutate(deletingZone.id);
}
}}
className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
>
{__('Delete Zone')}
</AlertDialogAction>
</AlertDialogFooter>
</AlertDialogContent>
</AlertDialog>
</SettingsLayout>
);
}