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,6 +297,7 @@ export default function ShippingPage() {
|
|||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<div className="flex gap-2">
|
||||||
<Button
|
<Button
|
||||||
variant="ghost"
|
variant="ghost"
|
||||||
size="sm"
|
size="sm"
|
||||||
@@ -304,6 +305,14 @@ export default function ShippingPage() {
|
|||||||
>
|
>
|
||||||
<Edit className="h-4 w-4" />
|
<Edit className="h-4 w-4" />
|
||||||
</Button>
|
</Button>
|
||||||
|
<Button
|
||||||
|
variant="ghost"
|
||||||
|
size="sm"
|
||||||
|
onClick={() => setDeletingZone(zone)}
|
||||||
|
>
|
||||||
|
<Trash2 className="h-4 w-4 text-destructive" />
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Shipping Rates */}
|
{/* Shipping Rates */}
|
||||||
@@ -761,7 +770,7 @@ export default function ShippingPage() {
|
|||||||
</DialogContent>
|
</DialogContent>
|
||||||
</Dialog>
|
</Dialog>
|
||||||
|
|
||||||
{/* Delete Confirmation Dialog */}
|
{/* Delete Method Confirmation Dialog */}
|
||||||
<AlertDialog open={!!deletingMethod} onOpenChange={() => setDeletingMethod(null)}>
|
<AlertDialog open={!!deletingMethod} onOpenChange={() => setDeletingMethod(null)}>
|
||||||
<AlertDialogContent>
|
<AlertDialogContent>
|
||||||
<AlertDialogHeader>
|
<AlertDialogHeader>
|
||||||
@@ -783,6 +792,32 @@ export default function ShippingPage() {
|
|||||||
</AlertDialogContent>
|
</AlertDialogContent>
|
||||||
</AlertDialog>
|
</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>
|
</SettingsLayout>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user