fix: Single source nav + dark logo support + customer settings debug
## ✅ Issue 1: Single Source of Truth for Navigation **Problem:** Confusing dual nav sources (PHP + TypeScript fallback) **Solution:** Removed static TypeScript fallback tree **Result:** PHP NavigationRegistry is now the ONLY source - More flexible (can check WooCommerce settings, extend via addons) - Easier to maintain - Clear error if backend data missing ## ✅ Issue 2: Logo in All Modes **Already Working:** Header component renders in all modes - Standalone ✅ - WP-Admin normal ✅ - WP-Admin fullscreen ✅ ## ✅ Issue 5: Customer Settings 404 Debug **Added:** Debug logging to track endpoint calls **Note:** Routes are correctly registered - May need WordPress permalinks flush - Check debug.log for errors ## ✅ Issue 6: Dark Mode Logo Support **Implemented:** 1. **Backend:** - Added `store_logo_dark` to branding endpoint - Returns both light and dark logos 2. **Header Component:** - Detects dark mode via MutationObserver - Switches logo based on theme - Falls back to light logo if dark not set 3. **Login Screen:** - Same dark mode detection - Theme-aware logo display - Seamless theme switching 4. **SVG Support:** - Already supported via `accept="image/*"` - Works for all image formats **Result:** Perfect dark/light logo switching everywhere! 🌓 --- ## Files Modified: - `nav/tree.ts` - Removed static fallback - `App.tsx` - Dark logo in header - `Login.tsx` - Dark logo in login - `StoreController.php` - Dark logo in branding endpoint + debug logs - `Store.tsx` - Already has dark logo upload field - `StoreSettingsProvider.php` - Already has dark logo backend ## Testing: 1. Upload dark logo in Store settings 2. Switch theme - logo should change 3. Check customer-settings endpoint in browser console 4. Verify nav items from PHP only
This commit is contained in:
dwindown
@@ -272,9 +272,30 @@ function AddonRoute({ config }: { config: any }) {
|
||||
function Header({ onFullscreen, fullscreen, showToggle = true, scrollContainerRef, onVisibilityChange }: { onFullscreen: () => void; fullscreen: boolean; showToggle?: boolean; scrollContainerRef?: React.RefObject<HTMLDivElement>; onVisibilityChange?: (visible: boolean) => void }) {
|
||||
const [siteTitle, setSiteTitle] = React.useState((window as any).wnw?.siteTitle || 'WooNooW');
|
||||
const [storeLogo, setStoreLogo] = React.useState('');
|
||||
const [storeLogoDark, setStoreLogoDark] = React.useState('');
|
||||
const [isVisible, setIsVisible] = React.useState(true);
|
||||
const lastScrollYRef = React.useRef(0);
|
||||
const isStandalone = window.WNW_CONFIG?.standaloneMode ?? false;
|
||||
const [isDark, setIsDark] = React.useState(false);
|
||||
|
||||
// Detect dark mode
|
||||
React.useEffect(() => {
|
||||
const checkDarkMode = () => {
|
||||
const htmlEl = document.documentElement;
|
||||
setIsDark(htmlEl.classList.contains('dark'));
|
||||
};
|
||||
|
||||
checkDarkMode();
|
||||
|
||||
// Watch for theme changes
|
||||
const observer = new MutationObserver(checkDarkMode);
|
||||
observer.observe(document.documentElement, {
|
||||
attributes: true,
|
||||
attributeFilter: ['class']
|
||||
});
|
||||
|
||||
return () => observer.disconnect();
|
||||
}, []);
|
||||
|
||||
// Notify parent of visibility changes
|
||||
React.useEffect(() => {
|
||||
@@ -289,6 +310,7 @@ function Header({ onFullscreen, fullscreen, showToggle = true, scrollContainerRe
|
||||
if (response.ok) {
|
||||
const data = await response.json();
|
||||
if (data.store_logo) setStoreLogo(data.store_logo);
|
||||
if (data.store_logo_dark) setStoreLogoDark(data.store_logo_dark);
|
||||
if (data.store_name) setSiteTitle(data.store_name);
|
||||
}
|
||||
} catch (err) {
|
||||
@@ -302,6 +324,7 @@ function Header({ onFullscreen, fullscreen, showToggle = true, scrollContainerRe
|
||||
React.useEffect(() => {
|
||||
const handleStoreUpdate = (event: CustomEvent) => {
|
||||
if (event.detail?.store_logo) setStoreLogo(event.detail.store_logo);
|
||||
if (event.detail?.store_logo_dark) setStoreLogoDark(event.detail.store_logo_dark);
|
||||
if (event.detail?.store_name) setSiteTitle(event.detail.store_name);
|
||||
};
|
||||
|
||||
@@ -358,11 +381,14 @@ function Header({ onFullscreen, fullscreen, showToggle = true, scrollContainerRe
|
||||
return null;
|
||||
}
|
||||
|
||||
// Choose logo based on theme
|
||||
const currentLogo = isDark && storeLogoDark ? storeLogoDark : storeLogo;
|
||||
|
||||
return (
|
||||
<header className={`h-16 border-b border-border flex items-center px-4 justify-between sticky ${fullscreen ? `top-0` : `top-[32px]`} z-40 bg-background md:bg-background/95 md:backdrop-blur md:supports-[backdrop-filter]:bg-background/60 transition-transform duration-300 ${fullscreen && !isVisible ? '-translate-y-full md:translate-y-0' : 'translate-y-0'}`}>
|
||||
<div className="flex items-center gap-3">
|
||||
{storeLogo ? (
|
||||
<img src={storeLogo} alt={siteTitle} className="h-8 object-contain" />
|
||||
{currentLogo ? (
|
||||
<img src={currentLogo} alt={siteTitle} className="h-8 object-contain" />
|
||||
) : (
|
||||
<div className="font-semibold">{siteTitle}</div>
|
||||
)}
|
||||
|
||||
@@ -19,102 +19,18 @@ export type MainNode = {
|
||||
};
|
||||
|
||||
/**
|
||||
* Get navigation tree from backend (dynamic)
|
||||
* Falls back to static tree if backend data not available
|
||||
* Get navigation tree from backend (SINGLE SOURCE OF TRUTH)
|
||||
* Backend (PHP) is more flexible - can check WooCommerce settings, be extended by addons, etc.
|
||||
*/
|
||||
function getNavTreeFromBackend(): MainNode[] {
|
||||
const backendTree = (window as any).WNW_NAV_TREE;
|
||||
|
||||
if (Array.isArray(backendTree) && backendTree.length > 0) {
|
||||
return backendTree;
|
||||
if (!Array.isArray(backendTree) || backendTree.length === 0) {
|
||||
console.error('WNW_NAV_TREE not found! Navigation will be empty.');
|
||||
return [];
|
||||
}
|
||||
|
||||
// Fallback to static tree (for development/safety)
|
||||
return getStaticFallbackTree();
|
||||
}
|
||||
|
||||
/**
|
||||
* Static fallback tree (used if backend data not available)
|
||||
*/
|
||||
function getStaticFallbackTree(): MainNode[] {
|
||||
const admin =
|
||||
(window as any).wnw?.adminUrl ??
|
||||
(window as any).woonoow?.adminUrl ??
|
||||
'/wp-admin/admin.php';
|
||||
|
||||
return [
|
||||
{
|
||||
key: 'dashboard',
|
||||
label: 'Dashboard',
|
||||
path: '/dashboard',
|
||||
icon: 'layout-dashboard',
|
||||
children: [
|
||||
{ label: 'Overview', mode: 'spa', path: '/dashboard', exact: true },
|
||||
{ label: 'Revenue', mode: 'spa', path: '/dashboard/revenue' },
|
||||
{ label: 'Orders', mode: 'spa', path: '/dashboard/orders' },
|
||||
{ label: 'Products', mode: 'spa', path: '/dashboard/products' },
|
||||
{ label: 'Customers', mode: 'spa', path: '/dashboard/customers' },
|
||||
{ label: 'Coupons', mode: 'spa', path: '/dashboard/coupons' },
|
||||
{ label: 'Taxes', mode: 'spa', path: '/dashboard/taxes' },
|
||||
],
|
||||
},
|
||||
{
|
||||
key: 'orders',
|
||||
label: 'Orders',
|
||||
path: '/orders',
|
||||
icon: 'receipt-text',
|
||||
children: [],
|
||||
},
|
||||
{
|
||||
key: 'products',
|
||||
label: 'Products',
|
||||
path: '/products',
|
||||
icon: 'package',
|
||||
children: [
|
||||
{ label: 'All products', mode: 'spa', path: '/products' },
|
||||
{ label: 'New', mode: 'spa', path: '/products/new' },
|
||||
{ label: 'Categories', mode: 'spa', path: '/products/categories' },
|
||||
{ label: 'Tags', mode: 'spa', path: '/products/tags' },
|
||||
{ label: 'Attributes', mode: 'spa', path: '/products/attributes' },
|
||||
],
|
||||
},
|
||||
{
|
||||
key: 'coupons',
|
||||
label: 'Coupons',
|
||||
path: '/coupons',
|
||||
icon: 'tag',
|
||||
children: [
|
||||
{ label: 'All coupons', mode: 'spa', path: '/coupons' },
|
||||
{ label: 'New', mode: 'spa', path: '/coupons/new' },
|
||||
],
|
||||
},
|
||||
{
|
||||
key: 'customers',
|
||||
label: 'Customers',
|
||||
path: '/customers',
|
||||
icon: 'users',
|
||||
children: [
|
||||
{ label: 'All customers', mode: 'spa', path: '/customers' },
|
||||
],
|
||||
},
|
||||
{
|
||||
key: 'settings',
|
||||
label: 'Settings',
|
||||
path: '/settings/store',
|
||||
icon: 'settings',
|
||||
// Settings submenu available in all modes for consistent experience
|
||||
children: [
|
||||
// Core Settings (Shopify-inspired)
|
||||
{ label: 'Store Details', mode: 'spa' as const, path: '/settings/store' },
|
||||
{ label: 'Payments', mode: 'spa' as const, path: '/settings/payments' },
|
||||
{ label: 'Shipping & Delivery', mode: 'spa' as const, path: '/settings/shipping' },
|
||||
{ label: 'Tax', mode: 'spa' as const, path: '/settings/tax' },
|
||||
{ label: 'Customers', mode: 'spa' as const, path: '/settings/customers' },
|
||||
{ label: 'Notifications', mode: 'spa' as const, path: '/settings/notifications' },
|
||||
{ label: 'Developer', mode: 'spa' as const, path: '/settings/developer' },
|
||||
],
|
||||
},
|
||||
];
|
||||
return backendTree;
|
||||
}
|
||||
|
||||
/**
|
||||
|
||||
@@ -12,13 +12,31 @@ export function Login() {
|
||||
const [password, setPassword] = useState('');
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
const [error, setError] = useState('');
|
||||
const [branding, setBranding] = useState<{ logo: string; tagline: string; storeName: string }>({
|
||||
const [branding, setBranding] = React.useState({
|
||||
logo: '',
|
||||
tagline: '',
|
||||
storeName: 'WooNooW'
|
||||
logoDark: '',
|
||||
storeName: 'WooNooW',
|
||||
});
|
||||
const [isDark, setIsDark] = React.useState(false);
|
||||
const navigate = useNavigate();
|
||||
|
||||
// Detect dark mode
|
||||
React.useEffect(() => {
|
||||
const checkDarkMode = () => {
|
||||
setIsDark(document.documentElement.classList.contains('dark'));
|
||||
};
|
||||
|
||||
checkDarkMode();
|
||||
|
||||
const observer = new MutationObserver(checkDarkMode);
|
||||
observer.observe(document.documentElement, {
|
||||
attributes: true,
|
||||
attributeFilter: ['class']
|
||||
});
|
||||
|
||||
return () => observer.disconnect();
|
||||
}, []);
|
||||
|
||||
// Fetch branding (public endpoint - no auth required)
|
||||
useEffect(() => {
|
||||
fetch((window.WNW_CONFIG?.restUrl || '') + '/store/branding')
|
||||
@@ -26,8 +44,8 @@ export function Login() {
|
||||
.then(data => {
|
||||
setBranding({
|
||||
logo: data.store_logo || '',
|
||||
tagline: data.store_tagline || '',
|
||||
storeName: data.store_name || 'WooNooW'
|
||||
logoDark: data.store_logo_dark || '',
|
||||
storeName: data.store_name || 'WooNooW',
|
||||
});
|
||||
})
|
||||
.catch(err => console.error('Failed to load branding:', err));
|
||||
@@ -71,9 +89,9 @@ export function Login() {
|
||||
<div className="bg-white dark:bg-gray-900/50 dark:backdrop-blur-xl dark:border dark:border-gray-800 rounded-lg shadow-xl p-8">
|
||||
{/* Logo */}
|
||||
<div className="text-center mb-8">
|
||||
{branding.logo ? (
|
||||
{(isDark && branding.logoDark) || branding.logo ? (
|
||||
<img
|
||||
src={branding.logo}
|
||||
src={(isDark && branding.logoDark) || branding.logo}
|
||||
alt={branding.storeName}
|
||||
className="h-16 mx-auto mb-3 object-contain"
|
||||
/>
|
||||
|
||||
Reference in New Issue
Block a user