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

fix(admin): WC settings link uses siteUrl + /wp-admin

Browse Source 
The wpAdminUrl config already includes admin.php?page=woonoow,
so constructing /admin.php?page=wc-settings on top of it was wrong.

Now uses siteUrl + /wp-admin for external WC links.
This commit is contained in:
Dwindi Ramadhana
2026-01-08 10:22:26 +07:00
parent 068fbe3a26
commit 83836298ec
1 changed files with 115 additions and 116 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -31,7 +31,8 @@ interface ShippingZone {
export default function ShippingPage() {
const queryClient = useQueryClient();
const wcAdminUrl = (window as any).WNW_CONFIG?.wpAdminUrl || '/wp-admin';
// Use siteUrl + /wp-admin since wpAdminUrl already includes admin.php?page=woonoow
const wcAdminUrl = ((window as any).WNW_CONFIG?.siteUrl || '') + '/wp-admin';
const [togglingMethod, setTogglingMethod] = useState<string | null>(null);
const [selectedZone, setSelectedZone] = useState<any | null>(null);
const [showAddMethod, setShowAddMethod] = useState(false);
@@ -44,7 +45,7 @@ export default function ShippingPage() {
const [deletingZone, setDeletingZone] = useState<any | null>(null);
const [regionSearch, setRegionSearch] = useState('');
const isDesktop = useMediaQuery("(min-width: 768px)");
// Fetch shipping zones from WooCommerce
const { data: zones = [], isLoading, refetch } = useQuery({
queryKey: ['shipping-zones'],
@@ -125,7 +126,7 @@ export default function ShippingPage() {
// Fetch method settings when accordion expands
const fetchMethodSettings = async (instanceId: number) => {
if (!selectedZone || methodSettings[instanceId]) return;
try {
const settings = await api.get(`/settings/shipping/zones/${selectedZone.id}/methods/${instanceId}/settings`);
setMethodSettings(prev => ({ ...prev, [instanceId]: settings }));
@@ -174,9 +175,9 @@ export default function ShippingPage() {
const confirmDelete = () => {
if (deletingMethod) {
deleteMethodMutation.mutate({
zoneId: deletingMethod.zoneId,
instanceId: deletingMethod.instanceId
deleteMethodMutation.mutate({
zoneId: deletingMethod.zoneId,
instanceId: deletingMethod.instanceId
});
setDeletingMethod(null);
}
@@ -230,8 +231,8 @@ export default function ShippingPage() {
if (isLoading) {
return (
<SettingsLayout
title={__('Shipping & Delivery')}
<SettingsLayout
title={__('Shipping & Delivery')}
description={__('Manage how you ship products to customers')}
>
<div className="flex items-center justify-center py-12">
@@ -287,102 +288,102 @@ export default function ShippingPage() {
) : (
<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-2 md:gap-3 mb-3 md:mb-4">
<div className="flex items-start gap-2 md:gap-3 flex-1 min-w-0">
<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
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-2 md:gap-3 mb-3 md:mb-4">
<div className="flex items-start gap-2 md:gap-3 flex-1 min-w-0">
<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-sm md:text-lg">{zone.name}</h3>
<p className="text-xs md:text-sm text-muted-foreground truncate">
<span className="font-medium">{__('Available to:')}</span> {zone.regions}
</p>
<p className="text-xs md:text-sm text-muted-foreground">
{zone.rates.length} {zone.rates.length === 1 ? __('delivery option') : __('delivery options')}
</p>
</div>
</div>
<div className="min-w-0 flex-1">
<h3 className="font-semibold text-sm md:text-lg">{zone.name}</h3>
<p className="text-xs md:text-sm text-muted-foreground truncate">
<span className="font-medium">{__('Available to:')}</span> {zone.regions}
</p>
<p className="text-xs md:text-sm text-muted-foreground">
{zone.rates.length} {zone.rates.length === 1 ? __('delivery option') : __('delivery options')}
</p>
<div className="flex gap-1 md:gap-2 flex-shrink-0">
<Button
variant="ghost"
size="sm"
onClick={() => setEditingZone(zone)}
title={__('Edit zone name and regions')}
>
<Edit className="h-4 w-4" />
</Button>
<Button
variant="ghost"
size="sm"
onClick={() => setDeletingZone(zone)}
title={__('Delete zone')}
>
<Trash2 className="h-4 w-4 text-destructive" />
</Button>
<Button
variant="ghost"
size="sm"
onClick={() => setSelectedZone(zone)}
title={__('Manage delivery options')}
>
<Settings className="h-4 w-4" />
</Button>
</div>
</div>
<div className="flex gap-1 md:gap-2 flex-shrink-0">
<Button
variant="ghost"
size="sm"
onClick={() => setEditingZone(zone)}
title={__('Edit zone name and regions')}
>
<Edit className="h-4 w-4" />
</Button>
<Button
variant="ghost"
size="sm"
onClick={() => setDeletingZone(zone)}
title={__('Delete zone')}
>
<Trash2 className="h-4 w-4 text-destructive" />
</Button>
<Button
variant="ghost"
size="sm"
onClick={() => setSelectedZone(zone)}
title={__('Manage delivery options')}
>
<Settings className="h-4 w-4" />
</Button>
</div>
</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">
<div className={`p-1 rounded flex-shrink-0 ${rate.enabled ? 'bg-green-500/20 text-green-500' : 'bg-primary/10 text-primary'}`}>
<Truck className="h-3.5 w-3.5 md:h-4 md:w-4" />
{/* 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">
<div className={`p-1 rounded flex-shrink-0 ${rate.enabled ? 'bg-green-500/20 text-green-500' : 'bg-primary/10 text-primary'}`}>
<Truck className="h-3.5 w-3.5 md:h-4 md:w-4" />
</div>
<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-1 min-w-0">
<span
className="text-xs md:text-sm font-medium line-clamp-1"
dangerouslySetInnerHTML={{ __html: rate.name }}
<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}`}
/>
{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>
</div>
))}
<Button
variant="outline"
<Button
variant="outline"
className="w-full"
asChild
>
@@ -481,11 +482,10 @@ export default function ShippingPage() {
<div className="font-medium" dangerouslySetInnerHTML={{ __html: rate.name }} />
<div className="flex items-center gap-2 text-sm text-muted-foreground mt-1">
<span className="font-semibold" dangerouslySetInnerHTML={{ __html: rate.price }} />
<span className={`text-xs px-2 py-0.5 rounded-full ${
rate.enabled
? 'bg-green-100 text-green-700'
<span className={`text-xs px-2 py-0.5 rounded-full ${rate.enabled
? 'bg-green-100 text-green-700'
: 'bg-gray-100 text-gray-600'
}`}>
}`}>
{rate.enabled ? __('On') : __('Off')}
</span>
</div>
@@ -521,7 +521,7 @@ export default function ShippingPage() {
placeholder={methodSettings[rate.instance_id].settings.cost.placeholder || '0'}
/>
{methodSettings[rate.instance_id].settings.cost.description && (
<p
<p
className="text-xs text-muted-foreground mt-1"
dangerouslySetInnerHTML={{ __html: methodSettings[rate.instance_id].settings.cost.description }}
/>
@@ -541,7 +541,7 @@ export default function ShippingPage() {
placeholder={methodSettings[rate.instance_id].settings.min_amount.placeholder || '0'}
/>
{methodSettings[rate.instance_id].settings.min_amount.description && (
<p
<p
className="text-xs text-muted-foreground mt-1"
dangerouslySetInnerHTML={{ __html: methodSettings[rate.instance_id].settings.min_amount.description }}
/>
@@ -577,11 +577,11 @@ export default function ShippingPage() {
const titleInput = document.getElementById(`method-title-${rate.instance_id}`) as HTMLInputElement;
const costInput = document.getElementById(`method-cost-${rate.instance_id}`) as HTMLInputElement;
const minAmountInput = document.getElementById(`method-min-amount-${rate.instance_id}`) as HTMLInputElement;
if (titleInput) settings.title = titleInput.value;
if (costInput) settings.cost = costInput.value;
if (minAmountInput) settings.min_amount = minAmountInput.value;
updateSettingsMutation.mutate({
zoneId: selectedZone.id,
instanceId: rate.instance_id,
@@ -695,11 +695,10 @@ export default function ShippingPage() {
<div className="font-medium text-sm line-clamp-1" dangerouslySetInnerHTML={{ __html: rate.name }} />
<div className="flex items-center gap-2 text-xs text-muted-foreground mt-0.5">
<span className="font-semibold" dangerouslySetInnerHTML={{ __html: rate.price }} />
<span className={`px-1.5 py-0.5 rounded-full whitespace-nowrap ${
rate.enabled
? 'bg-green-100 text-green-700'
<span className={`px-1.5 py-0.5 rounded-full whitespace-nowrap ${rate.enabled
? 'bg-green-100 text-green-700'
: 'bg-gray-100 text-gray-600'
}`}>
}`}>
{rate.enabled ? __('On') : __('Off')}
</span>
</div>
@@ -732,7 +731,7 @@ export default function ShippingPage() {
placeholder={methodSettings[rate.instance_id].settings.cost.placeholder || '0'}
/>
{methodSettings[rate.instance_id].settings.cost.description && (
<p
<p
className="text-xs text-muted-foreground mt-1"
dangerouslySetInnerHTML={{ __html: methodSettings[rate.instance_id].settings.cost.description }}
/>
@@ -782,11 +781,11 @@ export default function ShippingPage() {
const titleInput = document.getElementById(`method-title-mobile-${rate.instance_id}`) as HTMLInputElement;
const costInput = document.getElementById(`method-cost-mobile-${rate.instance_id}`) as HTMLInputElement;
const minAmountInput = document.getElementById(`method-min-amount-mobile-${rate.instance_id}`) as HTMLInputElement;
if (titleInput) settings.title = titleInput.value;
if (costInput) settings.cost = costInput.value;
if (minAmountInput) settings.min_amount = minAmountInput.value;
updateSettingsMutation.mutate({
zoneId: selectedZone.id,
instanceId: rate.instance_id,
@@ -934,7 +933,7 @@ export default function ShippingPage() {
<p className="text-xs text-muted-foreground mb-3">
{__('Select countries, states, or continents for this zone')}
</p>
{/* Search Filter */}
<input
placeholder={__('Search regions...')}
@@ -942,7 +941,7 @@ export default function ShippingPage() {
onChange={(e) => setRegionSearch(e.target.value)}
className="w-full px-3 py-2 border rounded-md mb-2"
/>
<div className="border rounded-md max-h-[300px] overflow-y-auto">
{availableLocations.length === 0 ? (
<div className="p-4 text-center text-sm text-muted-foreground">
@@ -951,7 +950,7 @@ export default function ShippingPage() {
) : (
<div className="divide-y">
{availableLocations
.filter((location: any) =>
.filter((location: any) =>
location.label.toLowerCase().includes(regionSearch.toLowerCase())
)
.map((location: any) => (
@@ -969,13 +968,13 @@ export default function ShippingPage() {
<span className="text-sm">{location.label}</span>
</label>
))}
{availableLocations.filter((location: any) =>
{availableLocations.filter((location: any) =>
location.label.toLowerCase().includes(regionSearch.toLowerCase())
).length === 0 && (
<div className="p-4 text-center text-sm text-muted-foreground">
{__('No regions found')}
</div>
)}
<div className="p-4 text-center text-sm text-muted-foreground">
{__('No regions found')}
</div>
)}
</div>
)}
</div>