From a83d3dc3a34eee49124afdad2a43224e560457d3 Mon Sep 17 00:00:00 2001
From: dwindown <dwinx.ramz@gmail.com>
Date: Sat, 8 Nov 2025 22:45:23 +0700
Subject: [PATCH] feat: Add Shipping Zone Settings modal
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Implemented functional settings modal for shipping zones.

Features:
✅ Settings button now opens modal/drawer
✅ Shows zone information (name, regions)
✅ Lists all shipping methods with toggles
✅ Toggle methods directly in modal
✅ Responsive: Dialog on desktop, Drawer on mobile
✅ Link to WooCommerce for advanced settings
✅ Clean, modern UI matching Payments page

Modal Content:
- Zone name and regions (read-only for now)
- Shipping methods list with enable/disable toggles
- Price display for each method
- "Advanced Settings in WooCommerce" link
- Close button

User Experience:
✅ Click Settings button → Modal opens
✅ Toggle methods on/off in modal
✅ Click Advanced Settings → Opens WooCommerce
✅ Click Close → Modal closes
✅ Mobile-friendly drawer on small screens

Next Steps:
- Add editable fields for method settings (cost, conditions)
- Use GenericGatewayForm pattern for WooCommerce form fields
- Add save functionality for method settings
---
 admin-spa/src/routes/Settings/Shipping.tsx | 130 +++++++++++++++++++++
 1 file changed, 130 insertions(+)

diff --git a/admin-spa/src/routes/Settings/Shipping.tsx b/admin-spa/src/routes/Settings/Shipping.tsx
index 5f6995e..ea49c12 100644
--- a/admin-spa/src/routes/Settings/Shipping.tsx
+++ b/admin-spa/src/routes/Settings/Shipping.tsx
@@ -219,6 +219,136 @@ export default function ShippingPage() {
           <li>• {__('Configure detailed shipping settings in WooCommerce for full control')}</li>
         </ul>
       </div>
+
+      {/* Settings Modal/Drawer */}
+      {selectedZone && (
+        isDesktop ? (
+          <Dialog open={isModalOpen} onOpenChange={setIsModalOpen}>
+            <DialogContent className="max-w-3xl max-h-[90vh] flex flex-col p-0">
+              <DialogHeader className="px-6 py-4 border-b">
+                <DialogTitle>{selectedZone.name} {__('Settings')}</DialogTitle>
+              </DialogHeader>
+              <div className="flex-1 overflow-y-auto p-6 min-h-0">
+                <p className="text-sm text-muted-foreground mb-4">
+                  {__('Configure shipping zone and methods. For advanced settings, use WooCommerce.')}
+                </p>
+                <div className="space-y-4">
+                  <div>
+                    <h4 className="font-medium mb-2">{__('Zone Information')}</h4>
+                    <p className="text-sm text-muted-foreground">
+                      {__('Name')}: {selectedZone.name}
+                    </p>
+                    <p className="text-sm text-muted-foreground">
+                      {__('Regions')}: {selectedZone.regions}
+                    </p>
+                  </div>
+                  <div>
+                    <h4 className="font-medium mb-2">{__('Shipping Methods')}</h4>
+                    <div className="space-y-2">
+                      {selectedZone.rates?.map((rate: any) => (
+                        <div key={rate.id} className="border rounded-lg p-3">
+                          <div className="flex items-center justify-between mb-2">
+                            <span className="font-medium">{rate.name}</span>
+                            <ToggleField
+                              id={`modal-${selectedZone.id}-${rate.instance_id}`}
+                              label=""
+                              checked={rate.enabled}
+                              onCheckedChange={(checked) => {
+                                handleToggle(selectedZone.id, rate.instance_id, checked);
+                              }}
+                              disabled={togglingMethod === `${selectedZone.id}-${rate.instance_id}`}
+                            />
+                          </div>
+                          <p className="text-sm text-muted-foreground">
+                            {__('Price')}: <span dangerouslySetInnerHTML={{ __html: rate.price }} />
+                          </p>
+                        </div>
+                      ))}
+                    </div>
+                  </div>
+                </div>
+              </div>
+              <div className="px-6 py-4 border-t flex justify-between">
+                <Button
+                  variant="outline"
+                  asChild
+                >
+                  <a href={`${wcAdminUrl}/admin.php?page=wc-settings&tab=shipping&zone_id=${selectedZone.id}`} target="_blank" rel="noopener noreferrer">
+                    <ExternalLink className="h-4 w-4 mr-2" />
+                    {__('Advanced Settings in WooCommerce')}
+                  </a>
+                </Button>
+                <Button onClick={() => setIsModalOpen(false)}>
+                  {__('Close')}
+                </Button>
+              </div>
+            </DialogContent>
+          </Dialog>
+        ) : (
+          <Drawer open={isModalOpen} onOpenChange={setIsModalOpen}>
+            <DrawerContent className="max-h-[90vh] flex flex-col">
+              <DrawerHeader className="border-b">
+                <DrawerTitle>{selectedZone.name} {__('Settings')}</DrawerTitle>
+              </DrawerHeader>
+              <div className="flex-1 overflow-y-auto px-4 py-6 min-h-0">
+                <p className="text-sm text-muted-foreground mb-4">
+                  {__('Configure shipping zone and methods. For advanced settings, use WooCommerce.')}
+                </p>
+                <div className="space-y-4">
+                  <div>
+                    <h4 className="font-medium mb-2">{__('Zone Information')}</h4>
+                    <p className="text-sm text-muted-foreground">
+                      {__('Name')}: {selectedZone.name}
+                    </p>
+                    <p className="text-sm text-muted-foreground">
+                      {__('Regions')}: {selectedZone.regions}
+                    </p>
+                  </div>
+                  <div>
+                    <h4 className="font-medium mb-2">{__('Shipping Methods')}</h4>
+                    <div className="space-y-2">
+                      {selectedZone.rates?.map((rate: any) => (
+                        <div key={rate.id} className="border rounded-lg p-3">
+                          <div className="flex items-center justify-between mb-2">
+                            <span className="font-medium">{rate.name}</span>
+                            <ToggleField
+                              id={`drawer-${selectedZone.id}-${rate.instance_id}`}
+                              label=""
+                              checked={rate.enabled}
+                              onCheckedChange={(checked) => {
+                                handleToggle(selectedZone.id, rate.instance_id, checked);
+                              }}
+                              disabled={togglingMethod === `${selectedZone.id}-${rate.instance_id}`}
+                            />
+                          </div>
+                          <p className="text-sm text-muted-foreground">
+                            {__('Price')}: <span dangerouslySetInnerHTML={{ __html: rate.price }} />
+                          </p>
+                        </div>
+                      ))}
+                    </div>
+                  </div>
+                </div>
+              </div>
+              <div className="px-4 py-4 border-t flex flex-col gap-2">
+                <Button
+                  variant="outline"
+                  asChild
+                  className="w-full"
+                >
+                  <a href={`${wcAdminUrl}/admin.php?page=wc-settings&tab=shipping&zone_id=${selectedZone.id}`} target="_blank" rel="noopener noreferrer">
+                    <ExternalLink className="h-4 w-4 mr-2" />
+                    {__('Advanced Settings in WooCommerce')}
+                  </a>
+                </Button>
+                <Button onClick={() => setIsModalOpen(false)} className="w-full">
+                  {__('Close')}
+                </Button>
+              </div>
+            </DrawerContent>
+          </Drawer>
+        )
+      )}
     </SettingsLayout>
   );
 }