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:
@@ -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>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user