From 83836298ec73822c37e3e45bdd08ec26eadfcd58 Mon Sep 17 00:00:00 2001
From: Dwindi Ramadhana <dwindown@DwMacMiniM4.local>
Date: Thu, 8 Jan 2026 10:22:26 +0700
Subject: [PATCH] fix(admin): WC settings link uses siteUrl + /wp-admin

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.
---
 admin-spa/src/routes/Settings/Shipping.tsx | 231 ++++++++++-----------
 1 file changed, 115 insertions(+), 116 deletions(-)

diff --git a/admin-spa/src/routes/Settings/Shipping.tsx b/admin-spa/src/routes/Settings/Shipping.tsx
index 0336414..a786f39 100644
--- a/admin-spa/src/routes/Settings/Shipping.tsx
+++ b/admin-spa/src/routes/Settings/Shipping.tsx
@@ -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>