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