267914dbfe
Implemented complete CRUD for shipping methods within the SPA! Frontend Features: ✅ Tabbed modal (Methods / Details) ✅ Add shipping method button ✅ Method selection dialog ✅ Delete method with confirmation ✅ Active/Inactive status badges ✅ Responsive mobile drawer ✅ Real-time updates via React Query Backend API: ✅ GET /methods/available - List all method types ✅ POST /zones/{id}/methods - Add method to zone ✅ DELETE /zones/{id}/methods/{instance_id} - Remove method ✅ GET /zones/{id}/methods/{instance_id}/settings - Get settings ✅ PUT /zones/{id}/methods/{instance_id}/settings - Update settings User Flow: 1. Click Edit icon on zone card 2. Modal opens with 2 tabs: - Methods: Add/delete methods, see status - Details: View zone info 3. Click "Add Method" → Select from available methods 4. Click trash icon → Delete method (with confirmation) 5. All changes sync immediately What Users Can Do Now: ✅ Add any shipping method to any zone ✅ Delete methods from zones ✅ View method status (Active/Inactive) ✅ See zone details (name, regions, order) ✅ Link to WooCommerce for advanced settings Phase 2 Complete! 🎉
490 lines
21 KiB
TypeScript
490 lines
21 KiB
TypeScript
import React, { useState } from 'react';
|
|
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
|
|
import { api } from '@/lib/api';
|
|
import { SettingsLayout } from './components/SettingsLayout';
|
|
import { SettingsCard } from './components/SettingsCard';
|
|
import { ToggleField } from './components/ToggleField';
|
|
import { Button } from '@/components/ui/button';
|
|
import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/components/ui/dialog';
|
|
import { Drawer, DrawerContent, DrawerHeader, DrawerTitle } from '@/components/ui/drawer';
|
|
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
|
|
import { Globe, Truck, MapPin, Edit, Trash2, RefreshCw, Loader2, ExternalLink, Settings, Plus, X } from 'lucide-react';
|
|
import { toast } from 'sonner';
|
|
import { __ } from '@/lib/i18n';
|
|
import { useMediaQuery } from '@/hooks/use-media-query';
|
|
|
|
interface ShippingRate {
|
|
id: string;
|
|
name: string;
|
|
price: string;
|
|
condition?: string;
|
|
transitTime?: string;
|
|
}
|
|
|
|
interface ShippingZone {
|
|
id: string;
|
|
name: string;
|
|
regions: string;
|
|
rates: ShippingRate[];
|
|
}
|
|
|
|
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 [activeTab, setActiveTab] = useState('methods');
|
|
const [showAddMethod, setShowAddMethod] = useState(false);
|
|
const isDesktop = useMediaQuery("(min-width: 768px)");
|
|
|
|
// Fetch shipping zones from WooCommerce
|
|
const { data: zones = [], isLoading, refetch } = useQuery({
|
|
queryKey: ['shipping-zones'],
|
|
queryFn: () => api.get('/settings/shipping/zones'),
|
|
staleTime: 5 * 60 * 1000, // 5 minutes
|
|
});
|
|
|
|
// Fetch available shipping methods
|
|
const { data: availableMethods = [] } = useQuery({
|
|
queryKey: ['available-shipping-methods'],
|
|
queryFn: () => api.get('/settings/shipping/methods/available'),
|
|
enabled: showAddMethod,
|
|
});
|
|
|
|
// Toggle shipping method mutation
|
|
const toggleMutation = useMutation({
|
|
mutationFn: async ({ zoneId, instanceId, enabled }: { zoneId: number; instanceId: number; enabled: boolean }) => {
|
|
return api.post(`/settings/shipping/zones/${zoneId}/methods/${instanceId}/toggle`, { enabled });
|
|
},
|
|
onSuccess: () => {
|
|
queryClient.invalidateQueries({ queryKey: ['shipping-zones'] });
|
|
toast.success(__('Shipping method updated successfully'));
|
|
},
|
|
onError: (error: any) => {
|
|
toast.error(error?.message || __('Failed to update shipping method'));
|
|
},
|
|
onSettled: () => {
|
|
setTogglingMethod(null);
|
|
},
|
|
});
|
|
|
|
// Add shipping method mutation
|
|
const addMethodMutation = useMutation({
|
|
mutationFn: async ({ zoneId, methodId }: { zoneId: number; methodId: string }) => {
|
|
return api.post(`/settings/shipping/zones/${zoneId}/methods`, { method_id: methodId });
|
|
},
|
|
onSuccess: () => {
|
|
queryClient.invalidateQueries({ queryKey: ['shipping-zones'] });
|
|
toast.success(__('Shipping method added successfully'));
|
|
setShowAddMethod(false);
|
|
},
|
|
onError: (error: any) => {
|
|
toast.error(error?.message || __('Failed to add shipping method'));
|
|
},
|
|
});
|
|
|
|
// Delete shipping method mutation
|
|
const deleteMethodMutation = useMutation({
|
|
mutationFn: async ({ zoneId, instanceId }: { zoneId: number; instanceId: number }) => {
|
|
return api.delete(`/settings/shipping/zones/${zoneId}/methods/${instanceId}`);
|
|
},
|
|
onSuccess: () => {
|
|
queryClient.invalidateQueries({ queryKey: ['shipping-zones'] });
|
|
toast.success(__('Shipping method deleted successfully'));
|
|
},
|
|
onError: (error: any) => {
|
|
toast.error(error?.message || __('Failed to delete shipping method'));
|
|
},
|
|
});
|
|
|
|
const handleToggle = (zoneId: number, instanceId: number, enabled: boolean) => {
|
|
setTogglingMethod(`${zoneId}-${instanceId}`);
|
|
toggleMutation.mutate({ zoneId, instanceId, enabled });
|
|
};
|
|
|
|
const handleAddMethod = (methodId: string) => {
|
|
if (selectedZone) {
|
|
addMethodMutation.mutate({ zoneId: selectedZone.id, methodId });
|
|
}
|
|
};
|
|
|
|
const handleDeleteMethod = (instanceId: number) => {
|
|
if (selectedZone && confirm(__('Are you sure you want to delete this shipping method?'))) {
|
|
deleteMethodMutation.mutate({ zoneId: selectedZone.id, instanceId });
|
|
}
|
|
};
|
|
|
|
if (isLoading) {
|
|
return (
|
|
<SettingsLayout
|
|
title={__('Shipping & Delivery')}
|
|
description={__('Manage how you ship products to customers')}
|
|
>
|
|
<div className="flex items-center justify-center py-12">
|
|
<Loader2 className="h-8 w-8 animate-spin text-muted-foreground" />
|
|
</div>
|
|
</SettingsLayout>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<SettingsLayout
|
|
title={__('Shipping & Delivery')}
|
|
description={__('Manage how you ship products to customers')}
|
|
action={
|
|
<Button
|
|
variant="outline"
|
|
size="sm"
|
|
onClick={() => refetch()}
|
|
disabled={isLoading}
|
|
>
|
|
<RefreshCw className="h-4 w-4 mr-2" />
|
|
{__('Refresh')}
|
|
</Button>
|
|
}
|
|
>
|
|
{/* Shipping Zones */}
|
|
<SettingsCard
|
|
title={__('Shipping Zones')}
|
|
description={__('Create zones to group regions with similar shipping rates')}
|
|
>
|
|
{zones.length === 0 ? (
|
|
<div className="text-center py-8">
|
|
<p className="text-sm text-muted-foreground mb-4">
|
|
{__('No shipping zones configured yet.')}
|
|
</p>
|
|
<Button
|
|
variant="outline"
|
|
asChild
|
|
>
|
|
<a href={`${wcAdminUrl}/admin.php?page=wc-settings&tab=shipping`} target="_blank" rel="noopener noreferrer">
|
|
{__('Configure in WooCommerce')}
|
|
</a>
|
|
</Button>
|
|
</div>
|
|
) : (
|
|
<div className="space-y-4">
|
|
{zones.map((zone: any) => (
|
|
<div
|
|
key={zone.id}
|
|
className="border rounded-lg p-3 md:p-4 hover:border-primary/50 transition-colors"
|
|
>
|
|
<div className="flex items-start justify-between gap-3 mb-3 md:mb-4">
|
|
<div className="flex items-start gap-2 md:gap-3 flex-1">
|
|
<div className="p-1.5 md:p-2 bg-primary/10 rounded-lg text-primary flex-shrink-0">
|
|
<Globe className="h-4 w-4 md:h-5 md:w-5" />
|
|
</div>
|
|
<div className="min-w-0 flex-1">
|
|
<h3 className="font-semibold text-base md:text-lg">{zone.name}</h3>
|
|
<p className="text-xs md:text-sm text-muted-foreground truncate">
|
|
{zone.regions}
|
|
</p>
|
|
<p className="text-xs md:text-sm text-muted-foreground">
|
|
{zone.rates.length} {zone.rates.length === 1 ? 'method' : 'methods'}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<Button
|
|
variant="ghost"
|
|
size="sm"
|
|
onClick={() => {
|
|
setSelectedZone(zone);
|
|
setIsModalOpen(true);
|
|
}}
|
|
>
|
|
<Edit className="h-4 w-4" />
|
|
</Button>
|
|
</div>
|
|
|
|
{/* Shipping Rates */}
|
|
<div className="pl-0 md:pl-11 space-y-2">
|
|
{zone.rates?.map((rate: any) => (
|
|
<div
|
|
key={rate.id}
|
|
className="flex items-center justify-between gap-2 py-2 px-2 md:px-3 bg-muted/50 rounded-md"
|
|
>
|
|
<div className="flex items-center gap-1.5 md:gap-2 flex-1 min-w-0">
|
|
<Truck className="h-3.5 w-3.5 md:h-4 md:w-4 text-muted-foreground flex-shrink-0" />
|
|
<div className="flex-1 min-w-0">
|
|
<span
|
|
className="text-xs md:text-sm font-medium line-clamp-1"
|
|
dangerouslySetInnerHTML={{ __html: rate.name }}
|
|
/>
|
|
{rate.transitTime && (
|
|
<span className="text-xs text-muted-foreground ml-2">
|
|
• {rate.transitTime}
|
|
</span>
|
|
)}
|
|
{rate.condition && (
|
|
<span className="text-xs text-muted-foreground ml-2">
|
|
• {rate.condition}
|
|
</span>
|
|
)}
|
|
</div>
|
|
</div>
|
|
<div className="flex items-center gap-2 md:gap-3 flex-shrink-0">
|
|
<span
|
|
className="text-xs md:text-sm font-semibold whitespace-nowrap"
|
|
dangerouslySetInnerHTML={{ __html: rate.price }}
|
|
/>
|
|
<ToggleField
|
|
id={`${zone.id}-${rate.instance_id}`}
|
|
label=""
|
|
checked={rate.enabled}
|
|
onCheckedChange={(checked) => handleToggle(zone.id, rate.instance_id, checked)}
|
|
disabled={togglingMethod === `${zone.id}-${rate.instance_id}`}
|
|
/>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
))}
|
|
|
|
<Button
|
|
variant="outline"
|
|
className="w-full"
|
|
asChild
|
|
>
|
|
<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>
|
|
)}
|
|
</SettingsCard>
|
|
|
|
{/* Help Card */}
|
|
<div className="bg-muted/50 border rounded-lg p-4">
|
|
<p className="text-sm font-medium mb-2">💡 {__('Shipping tips')}</p>
|
|
<ul className="text-sm text-muted-foreground space-y-1">
|
|
<li>• {__('Offer free shipping for orders above a certain amount to increase average order value')}</li>
|
|
<li>• {__('Provide multiple shipping options to give customers flexibility')}</li>
|
|
<li>• {__('Set realistic delivery estimates to manage customer expectations')}</li>
|
|
<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-2xl max-h-[90vh] flex flex-col p-0">
|
|
<DialogHeader className="px-6 py-4 border-b">
|
|
<DialogTitle>{selectedZone.name}</DialogTitle>
|
|
<p className="text-sm text-muted-foreground mt-1">
|
|
{selectedZone.regions}
|
|
</p>
|
|
</DialogHeader>
|
|
<Tabs value={activeTab} onValueChange={setActiveTab} className="flex-1 flex flex-col min-h-0">
|
|
<TabsList className="mx-6 mt-4">
|
|
<TabsTrigger value="methods">{__('Shipping Methods')}</TabsTrigger>
|
|
<TabsTrigger value="details">{__('Zone Details')}</TabsTrigger>
|
|
</TabsList>
|
|
|
|
<TabsContent value="methods" className="flex-1 overflow-y-auto px-6 pb-6 mt-0">
|
|
<div className="space-y-4 mt-4">
|
|
{/* Add Method Button */}
|
|
<Button
|
|
variant="outline"
|
|
className="w-full"
|
|
onClick={() => setShowAddMethod(true)}
|
|
>
|
|
<Plus className="h-4 w-4 mr-2" />
|
|
{__('Add Shipping Method')}
|
|
</Button>
|
|
|
|
{/* Methods List */}
|
|
<div className="space-y-3">
|
|
{selectedZone.rates?.map((rate: any) => (
|
|
<div key={rate.id} className="border rounded-lg p-4">
|
|
<div className="flex items-start justify-between gap-3 mb-3">
|
|
<div className="flex-1">
|
|
<div className="flex items-center gap-2 mb-1">
|
|
<Truck className="h-4 w-4 text-muted-foreground" />
|
|
<span className="font-medium" dangerouslySetInnerHTML={{ __html: rate.name }} />
|
|
</div>
|
|
<div className="text-sm text-muted-foreground">
|
|
<span>{__('Cost')}:</span>{' '}
|
|
<span className="font-semibold" dangerouslySetInnerHTML={{ __html: rate.price }} />
|
|
</div>
|
|
</div>
|
|
<div className="flex items-center gap-2">
|
|
<span className={`text-xs px-2 py-1 rounded-full ${
|
|
rate.enabled
|
|
? 'bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-400'
|
|
: 'bg-gray-100 text-gray-600 dark:bg-gray-800 dark:text-gray-400'
|
|
}`}>
|
|
{rate.enabled ? __('Active') : __('Inactive')}
|
|
</span>
|
|
<Button
|
|
variant="ghost"
|
|
size="sm"
|
|
onClick={() => handleDeleteMethod(rate.instance_id)}
|
|
disabled={deleteMethodMutation.isPending}
|
|
>
|
|
<Trash2 className="h-4 w-4 text-destructive" />
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</TabsContent>
|
|
|
|
<TabsContent value="details" className="flex-1 overflow-y-auto px-6 pb-6 mt-0">
|
|
<div className="space-y-4 mt-4">
|
|
<div className="bg-muted/50 rounded-lg p-4">
|
|
<div className="space-y-3">
|
|
<div>
|
|
<p className="text-sm font-medium mb-1">{__('Zone Name')}</p>
|
|
<p className="text-sm text-muted-foreground">{selectedZone.name}</p>
|
|
</div>
|
|
<div>
|
|
<p className="text-sm font-medium mb-1">{__('Regions')}</p>
|
|
<p className="text-sm text-muted-foreground">{selectedZone.regions}</p>
|
|
</div>
|
|
<div>
|
|
<p className="text-sm font-medium mb-1">{__('Zone Order')}</p>
|
|
<p className="text-sm text-muted-foreground">{selectedZone.order}</p>
|
|
<p className="text-xs text-muted-foreground mt-1">{__('Priority in shipping calculations')}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<p className="text-sm text-muted-foreground">
|
|
{__('To edit zone name, regions, or order, use WooCommerce.')}
|
|
</p>
|
|
</div>
|
|
</TabsContent>
|
|
</Tabs>
|
|
<div className="px-6 py-4 border-t flex justify-between gap-3">
|
|
<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" />
|
|
{__('Edit in WooCommerce')}
|
|
</a>
|
|
</Button>
|
|
<Button onClick={() => setIsModalOpen(false)}>
|
|
{__('Done')}
|
|
</Button>
|
|
</div>
|
|
</DialogContent>
|
|
</Dialog>
|
|
) : (
|
|
<Drawer open={isModalOpen} onOpenChange={setIsModalOpen}>
|
|
<DrawerContent className="max-h-[90vh] flex flex-col">
|
|
<DrawerHeader className="border-b">
|
|
<DrawerTitle>{selectedZone.name}</DrawerTitle>
|
|
<p className="text-sm text-muted-foreground mt-1">
|
|
{selectedZone.regions}
|
|
</p>
|
|
</DrawerHeader>
|
|
<div className="flex-1 overflow-y-auto px-4 py-6 min-h-0">
|
|
<div className="space-y-6">
|
|
{/* Zone Summary */}
|
|
<div className="bg-muted/50 rounded-lg p-4">
|
|
<div className="flex items-center justify-between">
|
|
<div>
|
|
<p className="text-sm font-medium">{__('Zone Order')}</p>
|
|
<p className="text-xs text-muted-foreground">{__('Priority in shipping calculations')}</p>
|
|
</div>
|
|
<span className="text-2xl font-bold text-muted-foreground">{selectedZone.order}</span>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Shipping Methods */}
|
|
<div>
|
|
<div className="flex items-center justify-between mb-3">
|
|
<h4 className="font-semibold">{__('Shipping Methods')}</h4>
|
|
<span className="text-sm text-muted-foreground">
|
|
{selectedZone.rates?.length} {selectedZone.rates?.length === 1 ? 'method' : 'methods'}
|
|
</span>
|
|
</div>
|
|
<div className="space-y-3">
|
|
{selectedZone.rates?.map((rate: any) => (
|
|
<div key={rate.id} className="border rounded-lg p-3">
|
|
<div className="flex items-start justify-between gap-3">
|
|
<div className="flex-1">
|
|
<div className="flex items-center gap-2 mb-1">
|
|
<Truck className="h-4 w-4 text-muted-foreground" />
|
|
<span className="font-medium text-sm" dangerouslySetInnerHTML={{ __html: rate.name }} />
|
|
</div>
|
|
<div className="text-sm text-muted-foreground">
|
|
<span>{__('Cost')}:</span>{' '}
|
|
<span className="font-semibold" dangerouslySetInnerHTML={{ __html: rate.price }} />
|
|
</div>
|
|
</div>
|
|
<span className={`text-xs px-2 py-1 rounded-full whitespace-nowrap ${
|
|
rate.enabled
|
|
? 'bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-400'
|
|
: 'bg-gray-100 text-gray-600 dark:bg-gray-800 dark:text-gray-400'
|
|
}`}>
|
|
{rate.enabled ? __('Active') : __('Inactive')}
|
|
</span>
|
|
</div>
|
|
</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" />
|
|
{__('Edit in WooCommerce')}
|
|
</a>
|
|
</Button>
|
|
<Button onClick={() => setIsModalOpen(false)} className="w-full">
|
|
{__('Done')}
|
|
</Button>
|
|
</div>
|
|
</DrawerContent>
|
|
</Drawer>
|
|
)
|
|
)}
|
|
|
|
{/* Add Method Dialog */}
|
|
<Dialog open={showAddMethod} onOpenChange={setShowAddMethod}>
|
|
<DialogContent className="max-w-md">
|
|
<DialogHeader>
|
|
<DialogTitle>{__('Add Shipping Method')}</DialogTitle>
|
|
</DialogHeader>
|
|
<div className="space-y-4 py-4">
|
|
<p className="text-sm text-muted-foreground">
|
|
{__('Select a shipping method to add to this zone:')}
|
|
</p>
|
|
<div className="space-y-2">
|
|
{availableMethods.map((method: any) => (
|
|
<button
|
|
key={method.id}
|
|
onClick={() => handleAddMethod(method.id)}
|
|
disabled={addMethodMutation.isPending}
|
|
className="w-full text-left p-4 border rounded-lg hover:border-primary hover:bg-accent transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
|
|
>
|
|
<div className="font-medium">{method.title}</div>
|
|
{method.description && (
|
|
<div className="text-sm text-muted-foreground mt-1">
|
|
{method.description}
|
|
</div>
|
|
)}
|
|
</button>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</DialogContent>
|
|
</Dialog>
|
|
</SettingsLayout>
|
|
);
|
|
}
|