fix: Login logo 401, link focus styles, payment/shipping active colors

## 1. Fix Logo 401 Error on Login 

**Issue:** Logo image returns 401 Unauthorized on login page

**Root Cause:** `/store/settings` endpoint requires authentication

**Solution:** Created public branding endpoint
```php
// GET /woonoow/v1/store/branding (PUBLIC)
public function get_branding() {
    return [
        'store_name' => get_option('blogname'),
        'store_logo' => get_option('woonoow_store_logo'),
        'store_icon' => get_option('woonoow_store_icon'),
        'store_tagline' => get_option('woonoow_store_tagline'),
    ];
}
```

**Frontend:** Updated Login.tsx to use `/store/branding` instead

**Result:** Logo loads without authentication 

---

## 2. Override WordPress Link Focus Styles 

**Issue:** WordPress common.css applies focus/active styles to links

**Solution:** Added CSS override
```css
a:focus,
a:active {
  outline: none !important;
  box-shadow: none !important;
}
```

**Result:** Clean focus states, no WordPress interference

---

## 3. Active Color for Manual Payment Methods 

**Issue:** Manual payments use static gray icon, online payments use green/primary

**Solution:** Applied same active color logic
```tsx
<div className={`p-2 rounded-lg ${
  gateway.enabled
    ? 'bg-green-500/20 text-green-500'
    : 'bg-primary/10 text-primary'
}`}>
  <Banknote className="h-5 w-5" />
</div>
```

**Result:**
-  Enabled = Green background + green icon
-  Disabled = Primary background + primary icon
-  Consistent with online payments

---

## 4. Active Color for Shipping Icons 

**Issue:** Shipping icons always gray, no visual indicator of enabled state

**Solution:** Applied active color to all shipping icons
- Zone summary view
- Desktop accordion view
- Mobile accordion view

```tsx
<div className={`p-2 rounded-lg ${
  rate.enabled
    ? 'bg-green-500/20 text-green-500'
    : 'bg-primary/10 text-primary'
}`}>
  <Truck className="h-4 w-4" />
</div>
```

**Result:**
-  Enabled shipping = Green icon
-  Disabled shipping = Primary icon
-  Consistent visual language across payments & shipping

---

## 5. Notification Strategy 

**Acknowledged:** Clean structure, ready for implementation

---

## Summary

 Public branding endpoint (no auth required)
 Logo loads on login page
 WordPress link focus styles overridden
 Manual payments have active colors
 Shipping methods have active colors
 Consistent visual language (green = active, primary = inactive)

**Visual Consistency Achieved:**
- Payments (manual & online) ✓
- Shipping methods ✓
- All use same color system ✓
This commit is contained in:
dwindown
2025-11-11 00:03:14 +07:00
parent 0e41d3ded5
commit dd2ff2074f
5 changed files with 50 additions and 8 deletions

View File

@@ -32,6 +32,15 @@ class StoreController extends WP_REST_Controller {
* Register routes
*/
public function register_routes() {
// GET /woonoow/v1/store/branding (PUBLIC - for login page)
register_rest_route($this->namespace, '/' . $this->rest_base . '/branding', [
[
'methods' => WP_REST_Server::READABLE,
'callback' => [$this, 'get_branding'],
'permission_callback' => '__return_true', // Public endpoint
],
]);
// GET /woonoow/v1/store/settings
register_rest_route($this->namespace, '/' . $this->rest_base . '/settings', [
[
@@ -78,6 +87,26 @@ class StoreController extends WP_REST_Controller {
]);
}
/**
* Get store branding (PUBLIC - for login page)
*
* @param WP_REST_Request $request Request object
* @return WP_REST_Response Response object
*/
public function get_branding(WP_REST_Request $request) {
$branding = [
'store_name' => get_option('blogname', 'WooNooW'),
'store_logo' => get_option('woonoow_store_logo', ''),
'store_icon' => get_option('woonoow_store_icon', ''),
'store_tagline' => get_option('woonoow_store_tagline', ''),
];
$response = rest_ensure_response($branding);
$response->header('Cache-Control', 'max-age=300'); // Cache for 5 minutes
return $response;
}
/**
* Get store settings
*