From ac8870c1043819738fd537fa7378e0d9753c041f Mon Sep 17 00:00:00 2001
From: dwindown <dwinx.ramz@gmail.com>
Date: Wed, 5 Nov 2025 23:20:54 +0700
Subject: [PATCH] fix: WordPress forms.css override and cache invalidation
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

🔴 Issue 1: WordPress forms.css Breaking Input Styling (FIXED)
Problem: /wp-admin/css/forms.css overriding our input styles
- box-shadow: 0 0 0 transparent
- border-radius: 4px
- background-color: #fff
- color: #2c3338

Solution:
- Added !important overrides to Input component
- !bg-transparent !border-input !rounded-md !shadow-sm
- Forces our shadcn styles over WordPress admin CSS

Result: ✅ Inputs now look consistent regardless of WP admin CSS

🔴 Issue 2: Toggle Not Saving + Toast Lying (FIXED)
Problem:
- Toggle appears to work but doesn't persist
- Response shows enabled: false but toast says 'enabled'
- WooCommerce gateway cache not clearing

Root Cause:
- WC()->payment_gateways()->payment_gateways() returns cached data
- wp_cache_delete not enough
- Need to force WooCommerce to reload gateways

Solution:
Backend (PaymentGatewaysProvider.php):
- wp_cache_flush() after save
- WC()->payment_gateways()->init() to reload
- Clear cache before fetching updated gateway

Frontend (Payments.tsx):
- await queryClient.invalidateQueries()
- Show toast AFTER refetch completes
- No more lying toast

Result: ✅ Toggle saves correctly + honest toast timing

📋 Technical Details:

WooCommerce Cache Layers:
1. wp_cache (object cache)
2. WC()->payment_gateways() internal cache
3. Gateway instance settings cache

Our Fix:
1. Save to DB
2. wp_cache_flush()
3. WC()->payment_gateways()->init()
4. Fetch fresh data
5. Return to frontend

Files Modified:
- input.tsx: !important overrides for WP admin CSS
- PaymentGatewaysProvider.php: Force WC reload
- PaymentsController.php: Clear cache before fetch
- Payments.tsx: Await invalidation before toast

🎯 Result:
✅ Inputs look perfect (no WP CSS interference)
✅ Toggle saves and persists correctly
✅ Toast shows after real state confirmed
---
 admin-spa/src/components/ui/input.tsx       | 2 ++
 admin-spa/src/routes/Settings/Payments.tsx  | 5 +++--
 includes/Api/PaymentsController.php         | 5 ++++-
 includes/Compat/PaymentGatewaysProvider.php | 8 +++++++-
 4 files changed, 16 insertions(+), 4 deletions(-)

diff --git a/admin-spa/src/components/ui/input.tsx b/admin-spa/src/components/ui/input.tsx
index 9da723d..ead367f 100644
--- a/admin-spa/src/components/ui/input.tsx
+++ b/admin-spa/src/components/ui/input.tsx
@@ -12,6 +12,8 @@ const Input = React.forwardRef<HTMLInputElement, React.ComponentProps<"input">>(
           "flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-base shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
           // Override browser default styles for all input types
           "appearance-none [-webkit-appearance:none] [-moz-appearance:textfield]",
+          // Override WordPress admin forms.css with !important
+          "!bg-transparent !border-input !rounded-md !shadow-sm",
           className
         )}
         ref={ref}
diff --git a/admin-spa/src/routes/Settings/Payments.tsx b/admin-spa/src/routes/Settings/Payments.tsx
index 6634781..71c6054 100644
--- a/admin-spa/src/routes/Settings/Payments.tsx
+++ b/admin-spa/src/routes/Settings/Payments.tsx
@@ -69,8 +69,9 @@ export default function PaymentsPage() {
       setTogglingGateway(id);
       return api.post(`/payments/gateways/${id}/toggle`, { enabled });
     },
-    onSuccess: () => {
-      queryClient.invalidateQueries({ queryKey: ['payment-gateways'] });
+    onSuccess: async () => {
+      // Wait for refetch to complete before showing toast
+      await queryClient.invalidateQueries({ queryKey: ['payment-gateways'] });
       toast.success('Gateway updated successfully');
       setTogglingGateway(null);
     },
diff --git a/includes/Api/PaymentsController.php b/includes/Api/PaymentsController.php
index b8f61f7..200508c 100644
--- a/includes/Api/PaymentsController.php
+++ b/includes/Api/PaymentsController.php
@@ -223,7 +223,10 @@ class PaymentsController extends WP_REST_Controller {
                 return $result;
             }
             
-            // Return updated gateway data
+            // Clear cache before fetching updated gateway
+            wp_cache_flush();
+            
+            // Return updated gateway data (fresh from DB)
             $gateway = PaymentGatewaysProvider::get_gateway($gateway_id);
             
             return rest_ensure_response([
diff --git a/includes/Compat/PaymentGatewaysProvider.php b/includes/Compat/PaymentGatewaysProvider.php
index 5283ebe..a6c649c 100644
--- a/includes/Compat/PaymentGatewaysProvider.php
+++ b/includes/Compat/PaymentGatewaysProvider.php
@@ -373,8 +373,14 @@ class PaymentGatewaysProvider {
         // Re-enable HTTP requests
         remove_filter('pre_http_request', '__return_true', 999);
         
-        // Clear cache
+        // Clear all WooCommerce caches
         wp_cache_delete('woocommerce_payment_gateways', 'options');
+        wp_cache_flush();
+        
+        // Force WooCommerce to reload payment gateways
+        if (function_exists('WC') && WC()->payment_gateways()) {
+            WC()->payment_gateways()->init();
+        }
         
         return true;
     }