feat: Add Shipping Zone Settings modal
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
@@ -219,6 +219,136 @@ export default function ShippingPage() {
|
|||||||
<li>• {__('Configure detailed shipping settings in WooCommerce for full control')}</li>
|
<li>• {__('Configure detailed shipping settings in WooCommerce for full control')}</li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</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>
|
</SettingsLayout>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user