From 8bbed114bd0ecf41fdb2c07aa715211592b86ca8 Mon Sep 17 00:00:00 2001
From: dwindown <dwinx.ramz@gmail.com>
Date: Mon, 10 Nov 2025 08:36:00 +0700
Subject: [PATCH] feat: Add zone delete UI - completing zone management
 foundation
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## 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).
---
 admin-spa/src/routes/Settings/Shipping.tsx | 51 ++++++++++++++++++----
 1 file changed, 43 insertions(+), 8 deletions(-)

diff --git a/admin-spa/src/routes/Settings/Shipping.tsx b/admin-spa/src/routes/Settings/Shipping.tsx
index a757f73..e1f690a 100644
--- a/admin-spa/src/routes/Settings/Shipping.tsx
+++ b/admin-spa/src/routes/Settings/Shipping.tsx
@@ -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>
   );
 }