From 939f1667274376545f37c02f75fd248cb42ac734 Mon Sep 17 00:00:00 2001
From: dwindown <dwinx.ramz@gmail.com>
Date: Sat, 8 Nov 2025 22:01:47 +0700
Subject: [PATCH] fix: Improve shipping toggle and simplify UI
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Fixed toggle functionality and cleaned up redundant buttons.

Backend Fix:
✅ Fixed toggle to properly update shipping method settings
✅ Get existing settings, update enabled field, save back
✅ Previously was trying to save wrong data structure

Frontend Changes:
✅ Removed "View in WooCommerce" from header (redundant)
✅ Changed "Edit zone" to "Settings" button (prepares for modal)
✅ Changed "+ Add shipping zone" to "Manage Zones in WooCommerce"
✅ Added modal state (selectedZone, isModalOpen)
✅ Added Dialog/Drawer imports for future modal implementation

Button Strategy:
- Header: Refresh only
- Zone card: Settings button (will open modal)
- Bottom: "Manage Zones in WooCommerce" (for add/edit/delete zones)

Next Step:
Implement settings modal similar to Payments page with zone/method configuration
---
 admin-spa/src/routes/Settings/Shipping.tsx | 54 ++++++++++------------
 includes/Api/ShippingController.php        |  5 +-
 2 files changed, 28 insertions(+), 31 deletions(-)

diff --git a/admin-spa/src/routes/Settings/Shipping.tsx b/admin-spa/src/routes/Settings/Shipping.tsx
index f209b21..dc04fb3 100644
--- a/admin-spa/src/routes/Settings/Shipping.tsx
+++ b/admin-spa/src/routes/Settings/Shipping.tsx
@@ -5,9 +5,12 @@ import { SettingsLayout } from './components/SettingsLayout';
 import { SettingsCard } from './components/SettingsCard';
 import { ToggleField } from './components/ToggleField';
 import { Button } from '@/components/ui/button';
-import { Globe, Truck, MapPin, Edit, Trash2, RefreshCw, Loader2, ExternalLink } from 'lucide-react';
+import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/components/ui/dialog';
+import { Drawer, DrawerContent, DrawerHeader, DrawerTitle } from '@/components/ui/drawer';
+import { Globe, Truck, MapPin, Edit, Trash2, RefreshCw, Loader2, ExternalLink, Settings } from 'lucide-react';
 import { toast } from 'sonner';
 import { __ } from '@/lib/i18n';
+import { useMediaQuery } from '@/hooks/use-media-query';
 
 interface ShippingRate {
   id: string;
@@ -28,6 +31,9 @@ export default function ShippingPage() {
   const queryClient = useQueryClient();
   const wcAdminUrl = (window as any).WNW_CONFIG?.wpAdminUrl || '/wp-admin';
   const [togglingMethod, setTogglingMethod] = useState<string | null>(null);
+  const [selectedZone, setSelectedZone] = useState<any | null>(null);
+  const [isModalOpen, setIsModalOpen] = useState(false);
+  const isDesktop = useMediaQuery("(min-width: 768px)");
   
   // Fetch shipping zones from WooCommerce
   const { data: zones = [], isLoading, refetch } = useQuery({
@@ -76,27 +82,15 @@ export default function ShippingPage() {
       title={__('Shipping & Delivery')}
       description={__('Manage how you ship products to customers')}
       action={
-        <div className="flex gap-2">
-          <Button
-            variant="outline"
-            size="sm"
-            onClick={() => refetch()}
-            disabled={isLoading}
-          >
-            <RefreshCw className="h-4 w-4 mr-2" />
-            {__('Refresh')}
-          </Button>
-          <Button
-            variant="outline"
-            size="sm"
-            asChild
-          >
-            <a href={`${wcAdminUrl}/admin.php?page=wc-settings&tab=shipping`} target="_blank" rel="noopener noreferrer">
-              <ExternalLink className="h-4 w-4 mr-2" />
-              {__('View in WooCommerce')}
-            </a>
-          </Button>
-        </div>
+        <Button
+          variant="outline"
+          size="sm"
+          onClick={() => refetch()}
+          disabled={isLoading}
+        >
+          <RefreshCw className="h-4 w-4 mr-2" />
+          {__('Refresh')}
+        </Button>
       }
     >
       {/* Shipping Zones */}
@@ -144,12 +138,13 @@ export default function ShippingPage() {
                   <Button 
                     variant="outline" 
                     size="sm"
-                    asChild
+                    onClick={() => {
+                      setSelectedZone(zone);
+                      setIsModalOpen(true);
+                    }}
                   >
-                    <a href={`${wcAdminUrl}/admin.php?page=wc-settings&tab=shipping&zone_id=${zone.id}`} target="_blank" rel="noopener noreferrer">
-                      <Edit className="h-4 w-4 mr-2" />
-                      {__('Edit zone')}
-                    </a>
+                    <Settings className="h-4 w-4 mr-2" />
+                    {__('Settings')}
                   </Button>
                 </div>
               </div>
@@ -204,8 +199,9 @@ export default function ShippingPage() {
               className="w-full"
               asChild
             >
-              <a href={`${wcAdminUrl}/admin.php?page=wc-settings&tab=shipping&action=add_zone`} target="_blank" rel="noopener noreferrer">
-                + {__('Add shipping zone')}
+              <a href={`${wcAdminUrl}/admin.php?page=wc-settings&tab=shipping`} target="_blank" rel="noopener noreferrer">
+                <ExternalLink className="h-4 w-4 mr-2" />
+                {__('Manage Zones in WooCommerce')}
               </a>
             </Button>
           </div>
diff --git a/includes/Api/ShippingController.php b/includes/Api/ShippingController.php
index 3c2781e..b476178 100644
--- a/includes/Api/ShippingController.php
+++ b/includes/Api/ShippingController.php
@@ -210,8 +210,9 @@ class ShippingController extends WP_REST_Controller {
 					$method_found = true;
 					
 					// Update the enabled status
-					$method->enabled = $enabled ? 'yes' : 'no';
-					update_option( $method->get_instance_option_key(), $method->instance_settings );
+					$settings = get_option( $method->get_instance_option_key(), array() );
+					$settings['enabled'] = $enabled ? 'yes' : 'no';
+					update_option( $method->get_instance_option_key(), $settings );
 					
 					break;
 				}