Commit Graph

10 Commits

Author SHA1 Message Date
dwindown
8312c18f64 fix: Standalone nav + REST URL + SVG upload support
##  Issue 1: Standalone Mode Navigation
**Problem:** Standalone mode not getting WNW_NAV_TREE from PHP
**Fixed:** Added WNW_NAV_TREE injection to StandaloneAdmin.php
**Result:** Navigation now works in standalone mode with PHP as single source

##  Issue 2: 404 Errors for branding and customer-settings
**Problem:** REST URLs had trailing slashes causing double slashes
**Root Cause:**
- `rest_url("woonoow/v1")` returns `https://site.com/wp-json/woonoow/v1/`
- Frontend: `restUrl + "/store/branding"` = double slash
- WP-admin missing WNW_CONFIG entirely

**Fixed:**
1. **Removed trailing slashes** from all REST URLs using `untrailingslashit()`
   - StandaloneAdmin.php
   - Assets.php (dev and prod modes)

2. **Added WNW_CONFIG to wp-admin** for API compatibility
   - Dev mode: Added WNW_CONFIG with restUrl, nonce, standaloneMode, etc.
   - Prod mode: Added WNW_CONFIG to localize_runtime()
   - Now both modes use same config structure

**Result:**
-  `/store/branding` works in all modes
-  `/store/customer-settings` works in all modes
-  Consistent API access across standalone and wp-admin

##  Issue 3: SVG Upload Error 500
**Problem:** WordPress blocks SVG uploads by default
**Security:** "Sorry, you are not allowed to upload this file type"

**Fixed:** Created MediaUpload.php with:
1. **Allow SVG uploads** for users with upload_files capability
2. **Fix SVG mime type detection** (WordPress issue)
3. **Sanitize SVG on upload** - reject files with:
   - `<script>` tags
   - `javascript:` protocols
   - Event handlers (onclick, onload, etc.)

**Result:**
-  SVG uploads work securely
-  Dangerous SVG content blocked
-  Only authorized users can upload

---

## Files Modified:
- `StandaloneAdmin.php` - Add nav tree + fix REST URL
- `Assets.php` - Add WNW_CONFIG + fix REST URLs
- `Bootstrap.php` - Initialize MediaUpload
- `MediaUpload.php` - NEW: SVG upload support with security

## Testing:
1.  Navigation works in standalone mode
2.  Branding endpoint works in all modes
3.  Customer settings endpoint works in all modes
4.  SVG logo upload works
5.  Dangerous SVG files rejected
2025-11-11 10:28:47 +07:00
dwindown
9c5bdebf6f fix: Complete UI/UX polish - all 7 issues resolved
##  Issue 1: Customers Submenu Missing in WP-Admin
**Problem:** Tax and Customer submenus only visible in standalone mode
**Root Cause:** PHP navigation registry did not include Customers
**Fixed:** Added Customers to NavigationRegistry.php settings children
**Result:** Customers submenu now shows in all modes

##  Issue 2: App Logo/Title in Topbar
**Problem:** Should show logo → store name → "WooNooW" fallback
**Fixed:** Header component now:
- Fetches branding from /store/branding endpoint
- Shows logo image if available
- Falls back to store name text
- Updates on store settings change event
**Result:** Proper branding hierarchy in app header

##  Issue 3: Zone Card Header Density on Mobile
**Problem:** "Indonesia Addons" row with 3 icons too cramped on mobile
**Fixed:** Shipping.tsx zone card header:
- Reduced gap from gap-3 to gap-2/gap-1 on mobile
- Smaller font size on mobile (text-sm md:text-lg)
- Added min-w-0 for proper text truncation
- flex-shrink-0 on icon buttons
**Result:** Better mobile spacing and readability

##  Issue 4: Go to WP Admin Button
**Problem:** Should show in standalone mode, not wp-admin
**Fixed:** More page now shows "Go to WP Admin" button:
- Only in standalone mode
- Before Logout button
- Links to /wp-admin
**Result:** Easy access to WP Admin from standalone mode

##  Issue 5: Customer Settings 403 Error
**Problem:** Permission check failing for customer-settings endpoint
**Fixed:** StoreController.php check_permission():
- Added fallback: manage_woocommerce OR manage_options
- Ensures administrators always have access
**Result:** Customer Settings page loads successfully

##  Issue 6: Dark Mode Logo Upload Field
**Problem:** No UI to upload dark mode logo
**Fixed:** Store settings page now has:
- "Store logo (Light mode)" field
- "Store logo (Dark mode)" field (optional)
- Backend support in StoreSettingsProvider
- Full save/load functionality
**Result:** Users can upload separate logos for light/dark modes

##  Issue 7: Login Card Background Too Dark
**Problem:** Login card same color as background in dark mode
**Fixed:** Login.tsx card styling:
- Changed from dark:bg-gray-800 (solid)
- To dark:bg-gray-900/50 (semi-transparent)
- Added backdrop-blur-xl for glass effect
- Added border for definition
**Result:** Login card visually distinct with modern glass effect

---

## Summary

**All 7 Issues Resolved:**
1.  Customers submenu in all modes
2.  Logo/title hierarchy in topbar
3.  Mobile zone card spacing
4.  Go to WP Admin in standalone
5.  Customer Settings permission fix
6.  Dark mode logo upload field
7.  Lighter login card background

**Files Modified:**
- NavigationRegistry.php - Added Customers to nav
- App.tsx - Logo/branding in header
- Shipping.tsx - Mobile spacing
- More/index.tsx - WP Admin button
- StoreController.php - Permission fallback
- Store.tsx - Dark logo field
- StoreSettingsProvider.php - Dark logo backend
- Login.tsx - Card background

**Ready for production!** 🎉
2025-11-11 09:49:31 +07:00
dwindown
5a4e2bab06 fix: Polish UI/UX across all modes
## Issue 1: Submenu Hidden in WP-Admin Modes 

**Problem:** Tax and Customer submenus visible in standalone but hidden in wp-admin modes

**Root Cause:** Incorrect `top` positioning calculation
- Was: `top-[calc(7rem+32px)]` (112px + 32px = 144px)
- Should be: `top-16` (64px - header height)

**Fixed:**
- `DashboardSubmenuBar.tsx` - Updated positioning
- `SubmenuBar.tsx` - Updated positioning

**Result:** Submenus now visible in all modes 

---

## Issue 2: Inconsistent Title in Standalone 

**Problem:** Title should prioritize: Logo → Store Name → WooNooW

**Fixed:**
- `StandaloneAdmin.php` - Use `woonoow_store_name` option first
- Falls back to `blogname`, then "WooNooW"

---

## Issue 3: Dense Card Header on Mobile 

**Problem:** Card header with title, description, and button too cramped on mobile

**Solution:** Stack vertically on mobile, horizontal on desktop

**Fixed:**
- `SettingsCard.tsx` - Changed from `flex-row` to `flex-col sm:flex-row`
- Button now full width on mobile, auto on desktop

**Result:** Better mobile UX, readable spacing 

---

## Issue 4: Missing "Go to WP Admin" Link 

**Added:**
- New button in More page (wp-admin modes only)
- Positioned before Exit Fullscreen/Logout
- Uses `ExternalLink` icon
- Links to `/wp-admin/`

---

## Issue 5: Customer Settings 403 Error ⚠️

**Status:** Backend ready, needs testing
- `CustomerSettingsProvider.php` exists and is autoloaded
- REST endpoints registered in `StoreController.php`
- Permission callback uses `manage_woocommerce`

**Next:** Test endpoint directly to verify

---

## Issue 6: Dark Mode Logo Support 

**Added:**
- New field: `store_logo_dark`
- Stored in: `woonoow_store_logo_dark` option
- Added to `StoreSettingsProvider.php`:
  - `get_settings()` - Returns dark logo
  - `save_settings()` - Saves dark logo

**Frontend:** Ready for implementation (use `useTheme()` to switch)

---

## Issue 7: Consistent Dark Background 

**Problem:** Login and Dashboard use different dark backgrounds
- Login: `dark:from-gray-900 dark:to-gray-800` (pure gray)
- Dashboard: `--background: 222.2 84% 4.9%` (dark blue-gray)

**Solution:** Use design system variables consistently

**Fixed:**
- `Login.tsx` - Changed to `dark:from-background dark:to-background`
- Card background: `dark:bg-card` instead of `dark:bg-gray-800`

**Result:** Consistent dark mode across all screens 

---

## Summary

 **Fixed 6 issues:**
1. Submenu visibility in all modes
2. Standalone title logic
3. Mobile card header density
4. WP Admin link in More page
5. Dark mode logo backend support
6. Consistent dark background colors

⚠️ **Needs Testing:**
- Customer Settings 403 error (backend ready, verify endpoint)

**Files Modified:**
- `DashboardSubmenuBar.tsx`
- `SubmenuBar.tsx`
- `StandaloneAdmin.php`
- `SettingsCard.tsx`
- `More/index.tsx`
- `StoreSettingsProvider.php`
- `Login.tsx`

**All UI/UX polish complete!** 🎨
2025-11-11 09:26:06 +07:00
dwindown
0e41d3ded5 fix: Login branding, submenu display, favicon standalone, notification strategy
## 1. Apply Logo to Standalone Login Screen 

**Issue:** Login page shows "WooNooW" text instead of brand logo

**Fix:**
- Fetch branding from `/store/settings` API
- Display logo image if available
- Fallback to store name text
- Show tagline below logo
- Use store name in footer

**Result:**
```tsx
{branding.logo ? (
  <img src={branding.logo} alt={storeName} className="h-16" />
) : (
  <h1>{branding.storeName}</h1>
)}
{branding.tagline && <p>{branding.tagline}</p>}
```

---

## 2. Fix Submenu Display Issue 

**Issue:**
- Click Settings → redirects to Store Details ✓
- Settings submenu shows correctly ✓
- Click other settings pages → Dashboard submenu appears ✗

**Root Cause:** `useActiveSection` hook didn't recognize `/settings` path

**Fix:**
```tsx
// Special case: /settings should match settings section
if (pathname === '/settings' || pathname.startsWith('/settings/')) {
  const settingsNode = navTree.find(n => n.key === 'settings');
  if (settingsNode) return settingsNode;
}
```

**Result:** Settings submenu now displays correctly on all settings pages

---

## 3. Apply Favicon in Standalone 

**Issue:** Favicon not showing in standalone mode (/admin)

**Root Cause:** Standalone doesn't call `wp_head()`, so Branding class hooks don't run

**Fix:** Added favicon directly to StandaloneAdmin.php
```php
$icon = get_option('woonoow_store_icon', '');
if (!empty($icon)) {
    echo '<link rel="icon" href="' . esc_url($icon) . '">'
    echo '<link rel="apple-touch-icon" href="' . esc_url($icon) . '">'
}
```

**Also:** Changed title to use store name dynamically

---

## 4. Notification Settings Strategy 

**Your Concern:** "We should not be optimistic the notification media is only email"

**Agreed!** Created comprehensive strategy document: `NOTIFICATION_STRATEGY.md`

### Architecture:

**Core (WooNooW):**
- Notification events system
- Email channel (built-in)
- Addon integration framework
- Settings UI with addon slots

**Addons:**
- WhatsApp
- Telegram
- SMS
- Discord
- Slack
- Push notifications
- etc.

### Settings Structure:
```
Notifications
├── Events (What to notify)
│   ├── Order Placed
│   │   ├── ✓ Email (to admin)
│   │   ├── ✓ WhatsApp (to customer) [addon]
│   │   └── ✗ Telegram [addon]
│   └── Low Stock Alert
│
├── Channels (How to notify)
│   ├── Email (Built-in) ✓
│   ├── WhatsApp [Addon]
│   ├── Telegram [Addon]
│   └── SMS [Addon]
│
└── Templates
    ├── Email Templates
    └── Channel Templates [per addon]
```

### Integration Points:
```php
// Register channel
add_filter('woonoow_notification_channels', function($channels) {
    $channels['whatsapp'] = [
        'id' => 'whatsapp',
        'label' => 'WhatsApp',
        'icon' => 'message-circle',
    ];
    return $channels;
});

// Send notification
add_action('woonoow_notification_send_whatsapp', function($event, $data) {
    // Send WhatsApp message
}, 10, 2);
```

### Benefits:
-  Extensible (any channel via addons)
-  Flexible (multiple channels per event)
-  No bloat (core = email only)
-  Revenue opportunity (premium addons)
-  Community friendly (free addons welcome)

---

## Summary

 Login screen shows brand logo + tagline
 Settings submenu displays correctly
 Favicon works in standalone mode
 Notification strategy documented (addon-based)

**Key Decision:** Notifications = Framework + Email core, everything else via addons

**Ready to implement notification system!**
2025-11-10 23:44:18 +07:00
dwindown
8960ee1149 feat: Add WooCommerce store settings (currency, formatting) to standalone mode 2025-11-04 23:43:07 +07:00
dwindown
0fbe35f198 fix: Add WNW_API config to standalone mode for API compatibility 2025-11-04 23:37:38 +07:00
dwindown
8a0f2e581e fix: Trust PHP auth check, skip redundant REST API call 2025-11-04 23:28:03 +07:00
dwindown
e8e380231e fix: Login flow - remove reload, sync auth state reactively 2025-11-04 23:19:53 +07:00
dwindown
4e1eb22c8f fix: Use parse_request hook for /admin + Dashboard menu now active on Overview (root path) 2025-11-04 22:43:20 +07:00
dwindown
4f75a5b501 fix: Remove blur on mobile for all bars + add template_redirect solution (no .htaccess needed) 2025-11-04 22:31:36 +07:00