dwindown/WooNooW
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: Add Shipping Zone Settings modal

Browse Source 
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
This commit is contained in:
dwindown
2025-11-08 22:45:23 +07:00
parent 24dbd625db
commit a83d3dc3a3
1 changed files with 130 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

130
admin-spa/src/routes/Settings/Shipping.tsx
View File

@@ -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>
);
}