## 1. Fix Dark Mode Headings ✅
**Issue:** h1-h6 headings not changing color in dark mode
**Fix:**
```css
h1, h2, h3, h4, h5, h6 { @apply text-foreground; }
```
**Result:** All headings now use foreground color (adapts to theme)
---
## 2. Fix Settings Default Route ✅
**Issue:** Main Settings menu goes to /settings with placeholder page
**Fix:**
- Changed /settings to redirect to /settings/store
- Store Details is now the default settings page
- No more placeholder "Settings interface coming soon"
**Code:**
```tsx
useEffect(() => {
navigate('/settings/store', { replace: true });
}, [navigate]);
```
---
## 3. Fix "Cookie check failed" Upload Error ✅
**Issue:** Image upload failing with "Cookie check failed"
**Root Cause:** WordPress REST API nonce not available
**Fix:**
- Added `wpApiSettings` to both dev and prod modes
- Provides `root` and `nonce` for WordPress REST API
- Image upload component already checks multiple nonce sources
**Backend Changes:**
```php
// Dev mode
wp_localize_script($handle, 'wpApiSettings', [
'root' => esc_url_raw(rest_url()),
'nonce' => wp_create_nonce('wp_rest'),
]);
// Prod mode (same)
```
**Result:** Image upload now works with proper authentication
---
## 4. Add Theme Toggle to Mobile ✅
**Recommendation:** Yes, mobile should have theme toggle
**Implementation:** Added to More page (mobile hub)
**UI:**
- 3-column grid with theme cards
- ☀️ Light | 🌙 Dark | 🖥️ System
- Active theme highlighted with primary border
- Placed under "Appearance" section
**Location:**
```
More Page
├── Coupons
├── Settings
├── Appearance (NEW)
│ ├── ☀️ Light
│ ├── 🌙 Dark
│ └── 🖥️ System
└── Exit Fullscreen / Logout
```
**Why More page?**
- Mobile users go there for additional options
- Natural place for appearance settings
- Doesn't clutter main navigation
- Desktop has header toggle, mobile has More page
---
## Summary
✅ **Dark mode headings** - Fixed with text-foreground
✅ **Settings redirect** - /settings → /settings/store
✅ **Upload nonce** - wpApiSettings added (dev + prod)
✅ **Mobile theme toggle** - Added to More page with 3-card grid
**All issues resolved!** 🎉
**Note:** CSS lint warnings (@tailwind, @apply) are false positives - Tailwind directives are valid.
## ✅ Issue #1: WooCommerce Admin Notices
- Added proper CSS styling for .woocommerce-message/error/info
- Border-left color coding (green/red/blue)
- Proper padding, margins, and backgrounds
- Now displays correctly in SPA
## ✅ Issue #2: No Flag Emojis
- Keeping regions as text only (cleaner, more professional)
- Avoids rendering issues and political sensitivities
- Matches Shopify/marketplace approach
## ✅ Issue #3: Added "Available to:" Context
- Zone regions now show: "Available to: Indonesia"
- Makes it clear what the regions mean
- Better UX - no ambiguity
## ✅ Issue #4: Terminology Fixed - "Delivery Option"
- Changed ALL "Shipping Method" → "Delivery Option"
- Matches Shopify/marketplace terminology
- Consistent across desktop and mobile
- "4 delivery options" instead of "4 methods"
## ✅ Issue #5: Tax is Optional
- Tax menu only appears if wc_tax_enabled()
- Matches WooCommerce behavior (appears after enabling)
- Dynamic navigation based on store settings
- Cleaner menu for stores without tax
## ✅ Issue #6: Shipping Method Investigation
- Checked flexible-shipping-ups plugin
- Its a live rates plugin (UPS API)
- Does NOT require subdistrict - only needs:
- Country, State, City, Postal Code
- Issue: Create Order may be requiring subdistrict for ALL methods
- Need to make address fields conditional based on shipping method type
## Next: Fix Create Order address fields to be conditional
Implemented functional Shipping settings page with WooCommerce integration.
Features:
✅ Fetch shipping zones from WooCommerce API
✅ Display zones with rates in card layout
✅ Refresh button to reload data
✅ "View in WooCommerce" button for full settings
✅ Edit zone links to WooCommerce
✅ Add zone link to WooCommerce
✅ Loading states with spinner
✅ Empty state when no zones configured
✅ Internationalization (i18n) throughout
✅ Shipping tips help card
Implementation:
- Uses React Query for data fetching
- Integrates with WooCommerce shipping API
- Links to WooCommerce for detailed configuration
- Clean, modern UI matching Payments page
- Responsive design
API Endpoint:
- GET /settings/shipping/zones
Note: Full CRUD operations handled in WooCommerce for now.
Future: Add inline editing capabilities.
