9214172c79
Issue 1 - Dashboard > Overview Never Active: Added debug logging to investigate why Overview submenu never shows active - Console logs path, pathname, and isActive state - Will help identify the root cause Issue 2 - Guest Wishlist Public Page: Problem: Guests couldn't access wishlist (redirected to login) Solution: Created public /wishlist route accessible to all users Implementation: 1. New Public Wishlist Page: - Route: /wishlist (not /my-account/wishlist) - Accessible to guests and logged-in users - Guest mode: Shows product IDs from localStorage - Logged-in mode: Shows full product details from API - Guests can view and remove items 2. Updated All Header Links: - ClassicLayout: /wishlist - ModernLayout: /wishlist - BoutiqueLayout: /wishlist - No more wp-login redirect for guests 3. Guest Experience: - See list of wishlisted product IDs - Click to view product details - Remove items from wishlist - Prompt to login for full details Issue 3 - Wishlist Page Selector Setting: Status: Deprecated/unused for SPA architecture - SPA uses React Router, not WordPress pages - Setting saved but has no effect - Shareable wishlist would also be SPA route - No need for page CPT selection Files Modified: - customer-spa/src/pages/Wishlist.tsx (new public page) - customer-spa/src/App.tsx (added /wishlist route) - customer-spa/src/hooks/useWishlist.ts (export productIds) - customer-spa/src/layouts/BaseLayout.tsx (all themes use /wishlist) - customer-spa/dist/app.js (rebuilt) - admin-spa/src/components/nav/SubmenuBar.tsx (debug logging) - admin-spa/dist/app.js (rebuilt) Result: ✅ Guests can access wishlist page ✅ Guests can view and manage localStorage wishlist ✅ No login redirect for guest wishlist ✅ Debug logging added for Overview issue
693 lines
32 KiB
TypeScript
693 lines
32 KiB
TypeScript
import React, { ReactNode, useState } from 'react';
|
|
import { Link } from 'react-router-dom';
|
|
import { Search, ShoppingCart, User, Menu, X, Heart } from 'lucide-react';
|
|
import { useLayout } from '../contexts/ThemeContext';
|
|
import { useCartStore } from '../lib/cart/store';
|
|
import { useHeaderSettings, useFooterSettings } from '../hooks/useAppearanceSettings';
|
|
import { SearchModal } from '../components/SearchModal';
|
|
import { NewsletterForm } from '../components/NewsletterForm';
|
|
import { LayoutWrapper } from './LayoutWrapper';
|
|
import { useModules } from '../hooks/useModules';
|
|
import { useModuleSettings } from '../hooks/useModuleSettings';
|
|
|
|
interface BaseLayoutProps {
|
|
children: ReactNode;
|
|
}
|
|
|
|
/**
|
|
* Base Layout Component
|
|
*
|
|
* Renders the appropriate layout based on header style from appearance settings
|
|
*/
|
|
export function BaseLayout({ children }: BaseLayoutProps) {
|
|
const headerSettings = useHeaderSettings();
|
|
|
|
// Map header styles to layouts
|
|
// classic -> ClassicLayout, centered -> ModernLayout, minimal -> LaunchLayout, split -> BoutiqueLayout
|
|
switch (headerSettings.style) {
|
|
case 'classic':
|
|
return <ClassicLayout>{children}</ClassicLayout>;
|
|
case 'centered':
|
|
return <ModernLayout>{children}</ModernLayout>;
|
|
case 'minimal':
|
|
return <LaunchLayout>{children}</LaunchLayout>;
|
|
case 'split':
|
|
return <BoutiqueLayout>{children}</BoutiqueLayout>;
|
|
default:
|
|
return <ClassicLayout>{children}</ClassicLayout>;
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Classic Layout - Traditional ecommerce
|
|
*/
|
|
function ClassicLayout({ children }: BaseLayoutProps) {
|
|
const { cart } = useCartStore();
|
|
const itemCount = cart.items.reduce((sum, item) => sum + item.quantity, 0);
|
|
const storeLogo = (window as any).woonoowCustomer?.storeLogo;
|
|
const storeName = (window as any).woonoowCustomer?.storeName || (window as any).woonoowCustomer?.siteTitle || 'Store Title';
|
|
const user = (window as any).woonoowCustomer?.user;
|
|
const headerSettings = useHeaderSettings();
|
|
const { isEnabled } = useModules();
|
|
const { settings: wishlistSettings } = useModuleSettings('wishlist');
|
|
const footerSettings = useFooterSettings();
|
|
const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
|
|
const [searchOpen, setSearchOpen] = useState(false);
|
|
|
|
const heightClass = headerSettings.height === 'compact' ? 'h-16' : headerSettings.height === 'tall' ? 'h-24' : 'h-20';
|
|
const hasActions = headerSettings.elements.search || headerSettings.elements.account || headerSettings.elements.cart || headerSettings.elements.wishlist;
|
|
|
|
const footerColsClass: Record<string, string> = {
|
|
'1': 'grid-cols-1',
|
|
'2': 'grid-cols-1 md:grid-cols-2',
|
|
'3': 'grid-cols-1 md:grid-cols-3',
|
|
'4': 'grid-cols-1 md:grid-cols-4',
|
|
};
|
|
const footerGridClass = footerColsClass[footerSettings.columns] || 'grid-cols-1 md:grid-cols-4';
|
|
|
|
const headerContent = (
|
|
<>
|
|
<SearchModal isOpen={searchOpen} onClose={() => setSearchOpen(false)} />
|
|
<header className="classic-header bg-white border-b sticky top-0 z-50 shadow-sm">
|
|
<div className="container mx-auto px-4">
|
|
<div className={`flex items-center ${headerSettings.mobile_logo === 'center' ? 'max-md:justify-center' : 'justify-between'} ${heightClass}`}>
|
|
{/* Logo */}
|
|
{headerSettings.elements.logo && (
|
|
<div className={`flex-shrink-0 ${headerSettings.mobile_logo === 'center' ? 'max-md:mx-auto' : ''}`}>
|
|
<Link to="/shop" className="flex items-center gap-3 group">
|
|
{storeLogo ? (
|
|
<img
|
|
src={storeLogo}
|
|
alt={storeName}
|
|
className="object-contain"
|
|
style={{
|
|
width: headerSettings.logo_width,
|
|
height: headerSettings.logo_height,
|
|
maxWidth: '100%'
|
|
}}
|
|
/>
|
|
) : (
|
|
<>
|
|
<div className="w-10 h-10 bg-gray-900 rounded-lg flex items-center justify-center">
|
|
<span className="text-white font-bold text-xl">W</span>
|
|
</div>
|
|
<span className="text-2xl font-serif font-light text-gray-900 hidden sm:block group-hover:text-gray-600 transition-colors">
|
|
{storeName}
|
|
</span>
|
|
</>
|
|
)}
|
|
</Link>
|
|
</div>
|
|
)}
|
|
|
|
{/* Navigation */}
|
|
{headerSettings.elements.navigation && (
|
|
<nav className="hidden md:flex items-center space-x-8">
|
|
<Link to="/shop" className="text-sm font-medium text-gray-700 hover:text-gray-900 transition-colors no-underline">Shop</Link>
|
|
<a href="/about" className="text-sm font-medium text-gray-700 hover:text-gray-900 transition-colors no-underline">About</a>
|
|
<a href="/contact" className="text-sm font-medium text-gray-700 hover:text-gray-900 transition-colors no-underline">Contact</a>
|
|
</nav>
|
|
)}
|
|
|
|
{/* Actions - Hidden on mobile when using bottom-nav */}
|
|
{hasActions && (
|
|
<div className={`flex items-center gap-3 ${headerSettings.mobile_menu === 'bottom-nav' ? 'max-md:hidden' : ''}`}>
|
|
{/* Search */}
|
|
{headerSettings.elements.search && (
|
|
<button
|
|
onClick={() => setSearchOpen(true)}
|
|
className="font-[inherit] flex items-center gap-2 px-3 py-2 hover:bg-gray-100 rounded-lg transition-colors"
|
|
>
|
|
<Search className="h-5 w-5 text-gray-600" />
|
|
</button>
|
|
)}
|
|
{/* Account */}
|
|
{headerSettings.elements.account && (user?.isLoggedIn ? (
|
|
<Link to="/my-account" className="flex items-center gap-2 text-sm font-medium text-gray-700 hover:text-gray-900 transition-colors no-underline">
|
|
<User className="h-5 w-5" />
|
|
<span className="hidden lg:block">Account</span>
|
|
</Link>
|
|
) : (
|
|
<a href="/wp-login.php" className="flex items-center gap-2 text-sm font-medium text-gray-700 hover:text-gray-900 transition-colors no-underline">
|
|
<User className="h-5 w-5" />
|
|
<span className="hidden lg:block">Account</span>
|
|
</a>
|
|
))}
|
|
|
|
{/* Wishlist */}
|
|
{headerSettings.elements.wishlist && isEnabled('wishlist') && (wishlistSettings.show_in_header ?? true) && (
|
|
<Link to="/wishlist" className="flex items-center gap-2 text-sm font-medium text-gray-700 hover:text-gray-900 transition-colors no-underline">
|
|
<Heart className="h-5 w-5" />
|
|
<span className="hidden lg:block">Wishlist</span>
|
|
</Link>
|
|
)}
|
|
|
|
{/* Cart */}
|
|
{headerSettings.elements.cart && (
|
|
<Link to="/cart" className="flex items-center gap-2 text-sm font-medium text-gray-700 hover:text-gray-900 transition-colors no-underline">
|
|
<div className="relative">
|
|
<ShoppingCart className="h-5 w-5" />
|
|
{itemCount > 0 && (
|
|
<span className="absolute -top-2 -right-2 h-5 w-5 rounded-full bg-gray-900 text-white text-xs flex items-center justify-center font-medium">
|
|
{itemCount}
|
|
</span>
|
|
)}
|
|
</div>
|
|
<span className="hidden lg:block">
|
|
Cart ({itemCount})
|
|
</span>
|
|
</Link>
|
|
)}
|
|
|
|
{/* Mobile Menu Toggle - Only for hamburger and slide-in */}
|
|
{(headerSettings.mobile_menu === 'hamburger' || headerSettings.mobile_menu === 'slide-in') && (
|
|
<button
|
|
className="font-[inherit] md:hidden flex items-center gap-2 px-3 py-2 hover:bg-gray-100 rounded-lg transition-colors"
|
|
onClick={() => setMobileMenuOpen(!mobileMenuOpen)}
|
|
>
|
|
{mobileMenuOpen ? <X className="h-5 w-5 text-gray-600" /> : <Menu className="h-5 w-5 text-gray-600" />}
|
|
</button>
|
|
)}
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{/* Mobile Menu - Hamburger Dropdown */}
|
|
{headerSettings.mobile_menu === 'hamburger' && mobileMenuOpen && (
|
|
<div className="md:hidden border-t py-4">
|
|
{headerSettings.elements.navigation && (
|
|
<nav className="flex flex-col space-y-2 mb-4">
|
|
<Link to="/shop" className="px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-100 no-underline">Shop</Link>
|
|
<a href="/about" className="px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-100 no-underline">About</a>
|
|
<a href="/contact" className="px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-100 no-underline">Contact</a>
|
|
</nav>
|
|
)}
|
|
</div>
|
|
)}
|
|
|
|
{/* Mobile Menu - Slide-in Drawer */}
|
|
{headerSettings.mobile_menu === 'slide-in' && mobileMenuOpen && (
|
|
<>
|
|
<div className="fixed inset-0 bg-black/50 z-40 md:hidden" onClick={() => setMobileMenuOpen(false)} />
|
|
<div className="fixed top-0 left-0 h-full w-64 bg-white shadow-xl z-50 md:hidden transform transition-transform">
|
|
<div className="p-4 border-b flex justify-between items-center">
|
|
<span className="font-semibold">Menu</span>
|
|
<button onClick={() => setMobileMenuOpen(false)} className="font-[inherit]">
|
|
<X className="h-5 w-5 text-gray-600" />
|
|
</button>
|
|
</div>
|
|
{headerSettings.elements.navigation && (
|
|
<nav className="flex flex-col p-4">
|
|
<Link to="/shop" onClick={() => setMobileMenuOpen(false)} className="px-4 py-3 text-sm font-medium text-gray-700 hover:bg-gray-100 rounded no-underline">Shop</Link>
|
|
<a href="/about" onClick={() => setMobileMenuOpen(false)} className="px-4 py-3 text-sm font-medium text-gray-700 hover:bg-gray-100 rounded no-underline">About</a>
|
|
<a href="/contact" onClick={() => setMobileMenuOpen(false)} className="px-4 py-3 text-sm font-medium text-gray-700 hover:bg-gray-100 rounded no-underline">Contact</a>
|
|
</nav>
|
|
)}
|
|
</div>
|
|
</>
|
|
)}
|
|
</div>
|
|
</header>
|
|
</>
|
|
);
|
|
|
|
const footerContent = (
|
|
<>
|
|
{/* Mobile Menu - Bottom Navigation */}
|
|
{headerSettings.mobile_menu === 'bottom-nav' && (
|
|
<nav className="md:hidden fixed bottom-0 left-0 right-0 bg-white border-t shadow-lg z-50">
|
|
<div className="flex justify-around items-center py-3">
|
|
<Link to="/shop" className="flex flex-col items-center gap-1 px-4 py-2 text-xs font-medium text-gray-700 hover:text-gray-900 no-underline">
|
|
<ShoppingCart className="h-5 w-5" />
|
|
<span>Shop</span>
|
|
</Link>
|
|
{headerSettings.elements.search && (
|
|
<button
|
|
onClick={() => setSearchOpen(true)}
|
|
className="font-[inherit] flex flex-col items-center gap-1 px-4 py-2 text-xs font-medium text-gray-700 hover:text-gray-900"
|
|
>
|
|
<Search className="h-5 w-5" />
|
|
<span>Search</span>
|
|
</button>
|
|
)}
|
|
{headerSettings.elements.cart && (
|
|
<Link to="/cart" className="flex flex-col items-center gap-1 px-4 py-2 text-xs font-medium text-gray-700 hover:text-gray-900 no-underline relative">
|
|
<ShoppingCart className="h-5 w-5" />
|
|
{itemCount > 0 && (
|
|
<span className="absolute top-1 right-2 h-4 w-4 rounded-full bg-gray-900 text-white text-xs flex items-center justify-center">
|
|
{itemCount}
|
|
</span>
|
|
)}
|
|
<span>Cart</span>
|
|
</Link>
|
|
)}
|
|
{headerSettings.elements.account && (
|
|
user?.isLoggedIn ? (
|
|
<Link to="/my-account" className="flex flex-col items-center gap-1 px-4 py-2 text-xs font-medium text-gray-700 hover:text-gray-900 no-underline">
|
|
<User className="h-5 w-5" />
|
|
<span>Account</span>
|
|
</Link>
|
|
) : (
|
|
<a href="/wp-login.php" className="flex flex-col items-center gap-1 px-4 py-2 text-xs font-medium text-gray-700 hover:text-gray-900 no-underline">
|
|
<User className="h-5 w-5" />
|
|
<span>Login</span>
|
|
</a>
|
|
)
|
|
)}
|
|
</div>
|
|
</nav>
|
|
)}
|
|
|
|
<footer className="classic-footer bg-gray-100 border-t mt-auto">
|
|
<div className="container mx-auto px-4 py-12">
|
|
<div className={`grid ${footerGridClass} gap-8`}>
|
|
{/* Render all sections dynamically */}
|
|
{footerSettings.sections
|
|
.filter((s: any) => s.visible)
|
|
.filter((s: any) => {
|
|
// Filter out newsletter section if module is disabled
|
|
if (s.type === 'newsletter' && !isEnabled('newsletter')) {
|
|
return false;
|
|
}
|
|
return true;
|
|
})
|
|
.map((section: any) => (
|
|
<div key={section.id}>
|
|
<h3 className="font-semibold mb-4">{section.title}</h3>
|
|
|
|
{/* Contact Section */}
|
|
{section.type === 'contact' && (
|
|
<div className="space-y-1 text-sm text-gray-600">
|
|
{footerSettings.contact_data?.show_email && footerSettings.contact_data?.email && (
|
|
<p>Email: {footerSettings.contact_data.email}</p>
|
|
)}
|
|
{footerSettings.contact_data?.show_phone && footerSettings.contact_data?.phone && (
|
|
<p>Phone: {footerSettings.contact_data.phone}</p>
|
|
)}
|
|
{footerSettings.contact_data?.show_address && footerSettings.contact_data?.address && (
|
|
<p>{footerSettings.contact_data.address}</p>
|
|
)}
|
|
</div>
|
|
)}
|
|
|
|
{/* Menu Section */}
|
|
{section.type === 'menu' && (
|
|
<ul className="space-y-2 text-sm">
|
|
<li><Link to="/shop" className="text-gray-600 hover:text-primary no-underline">Shop</Link></li>
|
|
<li><a href="/about" className="text-gray-600 hover:text-primary no-underline">About</a></li>
|
|
<li><a href="/contact" className="text-gray-600 hover:text-primary no-underline">Contact</a></li>
|
|
</ul>
|
|
)}
|
|
|
|
{/* Social Section */}
|
|
{section.type === 'social' && footerSettings.social_links?.length > 0 && (
|
|
<ul className="space-y-2 text-sm">
|
|
{footerSettings.social_links.map((link: any) => (
|
|
<li key={link.id}>
|
|
<a href={link.url} target="_blank" rel="noopener noreferrer" className="text-gray-600 hover:text-primary no-underline">
|
|
{link.platform}
|
|
</a>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
)}
|
|
|
|
{/* Newsletter Section */}
|
|
{section.type === 'newsletter' && (
|
|
<NewsletterForm description={footerSettings.labels?.newsletter_description} />
|
|
)}
|
|
|
|
{/* Custom HTML Section */}
|
|
{section.type === 'custom' && (
|
|
<div className="text-sm text-gray-600" dangerouslySetInnerHTML={{ __html: section.content }} />
|
|
)}
|
|
</div>
|
|
))}
|
|
</div>
|
|
|
|
{/* Payment Icons */}
|
|
{footerSettings.elements.payment && (
|
|
<div className="mt-8 pt-8 border-t">
|
|
<p className="text-xs text-gray-500 text-center mb-4">We accept</p>
|
|
<div className="flex justify-center gap-4 text-gray-400">
|
|
<span className="text-xs">💳 Visa</span>
|
|
<span className="text-xs">💳 Mastercard</span>
|
|
<span className="text-xs">💳 PayPal</span>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* Copyright */}
|
|
{footerSettings.elements.copyright && (
|
|
<div className="border-t mt-8 pt-8 text-center text-sm text-gray-600">
|
|
{footerSettings.copyright_text}
|
|
</div>
|
|
)}
|
|
</div>
|
|
</footer>
|
|
</>
|
|
);
|
|
|
|
return (
|
|
<LayoutWrapper header={headerContent} footer={footerContent}>
|
|
{children}
|
|
</LayoutWrapper>
|
|
);
|
|
}
|
|
|
|
/**
|
|
* Modern Layout - Minimalist, clean
|
|
*/
|
|
function ModernLayout({ children }: BaseLayoutProps) {
|
|
const { cart } = useCartStore();
|
|
const itemCount = cart.items.reduce((sum, item) => sum + item.quantity, 0);
|
|
const storeLogo = (window as any).woonoowCustomer?.storeLogo;
|
|
const storeName = (window as any).woonoowCustomer?.storeName || (window as any).woonoowCustomer?.siteTitle || 'Store Title';
|
|
const user = (window as any).woonoowCustomer?.user;
|
|
const headerSettings = useHeaderSettings();
|
|
const { isEnabled } = useModules();
|
|
const { settings: wishlistSettings } = useModuleSettings('wishlist');
|
|
const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
|
|
const [searchOpen, setSearchOpen] = useState(false);
|
|
|
|
const paddingClass = headerSettings.height === 'compact' ? 'py-4' : headerSettings.height === 'tall' ? 'py-8' : 'py-6';
|
|
const hasActions = headerSettings.elements.search || headerSettings.elements.account || headerSettings.elements.cart || headerSettings.elements.wishlist;
|
|
|
|
return (
|
|
<div className="modern-layout min-h-screen flex flex-col">
|
|
<SearchModal isOpen={searchOpen} onClose={() => setSearchOpen(false)} />
|
|
<header className="modern-header bg-white border-b sticky top-0 z-50">
|
|
<div className="container mx-auto px-4">
|
|
<div className={`flex flex-col items-center ${paddingClass}`}>
|
|
{/* Logo - Centered */}
|
|
{headerSettings.elements.logo && (
|
|
<Link to="/shop" className="mb-4">
|
|
{storeLogo ? (
|
|
<img
|
|
src={storeLogo}
|
|
alt={storeName}
|
|
className="object-contain"
|
|
style={{
|
|
width: headerSettings.logo_width,
|
|
height: headerSettings.logo_height,
|
|
maxWidth: '100%'
|
|
}}
|
|
/>
|
|
) : (
|
|
<span className="text-3xl font-bold text-gray-900">{storeName}</span>
|
|
)}
|
|
</Link>
|
|
)}
|
|
|
|
{/* Navigation & Actions - Centered */}
|
|
{(headerSettings.elements.navigation || hasActions) && (
|
|
<nav className="hidden md:flex items-center space-x-8">
|
|
{headerSettings.elements.navigation && (
|
|
<>
|
|
<Link to="/shop" className="text-sm font-medium text-gray-700 hover:text-gray-900 transition-colors no-underline">Shop</Link>
|
|
<a href="/about" className="text-sm font-medium text-gray-700 hover:text-gray-900 transition-colors no-underline">About</a>
|
|
<a href="/contact" className="text-sm font-medium text-gray-700 hover:text-gray-900 transition-colors no-underline">Contact</a>
|
|
</>
|
|
)}
|
|
{headerSettings.elements.search && (
|
|
<button
|
|
onClick={() => setSearchOpen(true)}
|
|
className="font-[inherit] flex items-center gap-1 text-sm font-medium text-gray-700 hover:text-gray-900 transition-colors"
|
|
>
|
|
<Search className="h-4 w-4" />
|
|
</button>
|
|
)}
|
|
{headerSettings.elements.account && (
|
|
user?.isLoggedIn ? (
|
|
<Link to="/my-account" className="flex items-center gap-1 text-sm font-medium text-gray-700 hover:text-gray-900 transition-colors no-underline">
|
|
<User className="h-4 w-4" /> Account
|
|
</Link>
|
|
) : (
|
|
<a href="/wp-login.php" className="flex items-center gap-1 text-sm font-medium text-gray-700 hover:text-gray-900 transition-colors no-underline">
|
|
<User className="h-4 w-4" /> Account
|
|
</a>
|
|
)
|
|
)}
|
|
{headerSettings.elements.wishlist && isEnabled('wishlist') && (wishlistSettings.show_in_header ?? true) && (
|
|
<Link to="/wishlist" className="flex items-center gap-1 text-sm font-medium text-gray-700 hover:text-gray-900 transition-colors no-underline">
|
|
<Heart className="h-4 w-4" /> Wishlist
|
|
</Link>
|
|
)}
|
|
{headerSettings.elements.cart && (
|
|
<Link to="/cart" className="flex items-center gap-1 text-sm font-medium text-gray-700 hover:text-gray-900 transition-colors no-underline">
|
|
<ShoppingCart className="h-4 w-4" /> Cart ({itemCount})
|
|
</Link>
|
|
)}
|
|
</nav>
|
|
)}
|
|
|
|
{/* Mobile Menu Toggle */}
|
|
<button
|
|
className="md:hidden mt-4 flex items-center gap-2 px-3 py-2 hover:bg-gray-100 rounded-lg transition-colors"
|
|
onClick={() => setMobileMenuOpen(!mobileMenuOpen)}
|
|
>
|
|
{mobileMenuOpen ? <X className="h-5 w-5 text-gray-600" /> : <Menu className="h-5 w-5 text-gray-600" />}
|
|
</button>
|
|
</div>
|
|
|
|
{/* Mobile Menu */}
|
|
{mobileMenuOpen && (
|
|
<div className="md:hidden border-t py-4">
|
|
{headerSettings.elements.navigation && (
|
|
<nav className="flex flex-col space-y-2 mb-4">
|
|
<Link to="/shop" className="px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-100 no-underline">Shop</Link>
|
|
<a href="/about" className="px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-100 no-underline">About</a>
|
|
<a href="/contact" className="px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-100 no-underline">Contact</a>
|
|
</nav>
|
|
)}
|
|
</div>
|
|
)}
|
|
</div>
|
|
</header>
|
|
|
|
<main className="modern-main flex-1">
|
|
{children}
|
|
</main>
|
|
|
|
<footer className="modern-footer bg-white border-t mt-auto">
|
|
<div className="container mx-auto px-4 py-12 text-center">
|
|
<div className="mb-6">
|
|
<a href="/" className="text-2xl font-bold" style={{ color: 'var(--color-primary)' }}>
|
|
Store Logo
|
|
</a>
|
|
</div>
|
|
<nav className="flex justify-center space-x-6 mb-6">
|
|
<a href="/shop" className="text-sm text-gray-600 hover:text-primary">Shop</a>
|
|
<a href="/about" className="text-sm text-gray-600 hover:text-primary">About</a>
|
|
<a href="/contact" className="text-sm text-gray-600 hover:text-primary">Contact</a>
|
|
</nav>
|
|
<p className="text-sm text-gray-600">
|
|
© 2024 Your Store. All rights reserved.
|
|
</p>
|
|
</div>
|
|
</footer>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
/**
|
|
* Boutique Layout - Luxury, elegant
|
|
*/
|
|
function BoutiqueLayout({ children }: BaseLayoutProps) {
|
|
const { cart } = useCartStore();
|
|
const itemCount = cart.items.reduce((sum, item) => sum + item.quantity, 0);
|
|
const storeLogo = (window as any).woonoowCustomer?.storeLogo;
|
|
const storeName = (window as any).woonoowCustomer?.storeName || (window as any).woonoowCustomer?.siteTitle || 'BOUTIQUE';
|
|
const user = (window as any).woonoowCustomer?.user;
|
|
const headerSettings = useHeaderSettings();
|
|
const { isEnabled } = useModules();
|
|
const { settings: wishlistSettings } = useModuleSettings('wishlist');
|
|
const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
|
|
const [searchOpen, setSearchOpen] = useState(false);
|
|
|
|
const heightClass = headerSettings.height === 'compact' ? 'h-20' : headerSettings.height === 'tall' ? 'h-28' : 'h-24';
|
|
const hasActions = headerSettings.elements.search || headerSettings.elements.account || headerSettings.elements.cart || headerSettings.elements.wishlist;
|
|
|
|
return (
|
|
<div className="boutique-layout min-h-screen flex flex-col font-serif">
|
|
<SearchModal isOpen={searchOpen} onClose={() => setSearchOpen(false)} />
|
|
<header className="boutique-header bg-white border-b sticky top-0 z-50">
|
|
<div className="container mx-auto px-4">
|
|
<div className={`flex items-center justify-between ${heightClass}`}>
|
|
{/* Logo */}
|
|
<div className="flex-1"></div>
|
|
|
|
{headerSettings.elements.logo && (
|
|
<div className="flex-shrink-0">
|
|
<Link to="/shop">
|
|
{storeLogo ? (
|
|
<img
|
|
src={storeLogo}
|
|
alt={storeName}
|
|
className="object-contain"
|
|
style={{
|
|
width: headerSettings.logo_width,
|
|
height: headerSettings.logo_height,
|
|
maxWidth: '100%'
|
|
}}
|
|
/>
|
|
) : (
|
|
<span className="text-3xl font-bold tracking-wide text-gray-900">{storeName}</span>
|
|
)}
|
|
</Link>
|
|
</div>
|
|
)}
|
|
|
|
<div className="flex-1 flex justify-end">
|
|
{(headerSettings.elements.navigation || hasActions) && (
|
|
<nav className="hidden md:flex items-center space-x-8">
|
|
{headerSettings.elements.navigation && (
|
|
<Link to="/shop" className="text-sm uppercase tracking-wider text-gray-700 hover:text-gray-900 transition-colors no-underline">Shop</Link>
|
|
)}
|
|
{headerSettings.elements.search && (
|
|
<button
|
|
onClick={() => setSearchOpen(true)}
|
|
className="font-[inherit] flex items-center gap-1 text-sm uppercase tracking-wider text-gray-700 hover:text-gray-900 transition-colors"
|
|
>
|
|
<Search className="h-4 w-4" />
|
|
</button>
|
|
)}
|
|
{headerSettings.elements.account && (user?.isLoggedIn ? (
|
|
<Link to="/my-account" className="flex items-center gap-1 text-sm uppercase tracking-wider text-gray-700 hover:text-gray-900 transition-colors no-underline">
|
|
<User className="h-4 w-4" /> Account
|
|
</Link>
|
|
) : (
|
|
<a href="/wp-login.php" className="flex items-center gap-1 text-sm uppercase tracking-wider text-gray-700 hover:text-gray-900 transition-colors no-underline">
|
|
<User className="h-4 w-4" /> Account
|
|
</a>
|
|
))}
|
|
{headerSettings.elements.wishlist && isEnabled('wishlist') && (wishlistSettings.show_in_header ?? true) && (
|
|
<Link to="/wishlist" className="flex items-center gap-1 text-sm uppercase tracking-wider text-gray-700 hover:text-gray-900 transition-colors no-underline">
|
|
<Heart className="h-4 w-4" /> Wishlist
|
|
</Link>
|
|
)}
|
|
{headerSettings.elements.cart && (
|
|
<Link to="/cart" className="flex items-center gap-1 text-sm uppercase tracking-wider text-gray-700 hover:text-gray-900 transition-colors no-underline">
|
|
<ShoppingCart className="h-4 w-4" /> Cart ({itemCount})
|
|
</Link>
|
|
)}
|
|
</nav>
|
|
)}
|
|
|
|
{/* Mobile Menu Toggle */}
|
|
<button
|
|
className="font-[inherit] md:hidden flex items-center gap-2 px-3 py-2 hover:bg-gray-100 rounded-lg transition-colors"
|
|
onClick={() => setMobileMenuOpen(!mobileMenuOpen)}
|
|
>
|
|
{mobileMenuOpen ? <X className="h-5 w-5 text-gray-600" /> : <Menu className="h-5 w-5 text-gray-600" />}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Mobile Menu */}
|
|
{mobileMenuOpen && (
|
|
<div className="md:hidden border-t py-4">
|
|
{headerSettings.elements.navigation && (
|
|
<nav className="flex flex-col space-y-2 mb-4">
|
|
<Link to="/shop" className="px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-100 no-underline">Shop</Link>
|
|
</nav>
|
|
)}
|
|
</div>
|
|
)}
|
|
</div>
|
|
</header>
|
|
|
|
<main className="boutique-main flex-1">
|
|
{children}
|
|
</main>
|
|
|
|
<footer className="boutique-footer bg-gray-50 border-t mt-auto">
|
|
<div className="container mx-auto px-4 py-16 text-center">
|
|
<div className="mb-8">
|
|
<a href="/" className="text-3xl font-bold tracking-wide" style={{ color: 'var(--color-primary)' }}>
|
|
BOUTIQUE
|
|
</a>
|
|
</div>
|
|
<nav className="flex justify-center space-x-8 mb-8">
|
|
<a href="/shop" className="text-sm uppercase tracking-wider text-gray-600 hover:text-primary">Shop</a>
|
|
<a href="/about" className="text-sm uppercase tracking-wider text-gray-600 hover:text-primary">About</a>
|
|
<a href="/contact" className="text-sm uppercase tracking-wider text-gray-600 hover:text-primary">Contact</a>
|
|
</nav>
|
|
<p className="text-sm text-gray-600 tracking-wide">
|
|
© 2024 BOUTIQUE. ALL RIGHTS RESERVED.
|
|
</p>
|
|
</div>
|
|
</footer>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
/**
|
|
* Launch Layout - Single product funnel
|
|
* Note: Landing page is custom (user's page builder)
|
|
* WooNooW only takes over from checkout onwards
|
|
*/
|
|
function LaunchLayout({ children }: BaseLayoutProps) {
|
|
const isCheckoutFlow = window.location.pathname.includes('/checkout') ||
|
|
window.location.pathname.includes('/my-account') ||
|
|
window.location.pathname.includes('/order-received');
|
|
|
|
if (!isCheckoutFlow) {
|
|
// For non-checkout pages, use minimal layout
|
|
return (
|
|
<div className="launch-layout min-h-screen flex flex-col">
|
|
{children}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
// For checkout flow: minimal header, no footer
|
|
const storeLogo = (window as any).woonoowCustomer?.storeLogo;
|
|
const storeName = (window as any).woonoowCustomer?.storeName || (window as any).woonoowCustomer?.siteTitle || 'Store Title';
|
|
const headerSettings = useHeaderSettings();
|
|
|
|
const heightClass = headerSettings.height === 'compact' ? 'h-12' : headerSettings.height === 'tall' ? 'h-20' : 'h-16';
|
|
|
|
return (
|
|
<div className="launch-layout min-h-screen flex flex-col bg-gray-50">
|
|
<header className="launch-header bg-white border-b">
|
|
<div className="container mx-auto px-4">
|
|
<div className={`flex items-center justify-center ${heightClass}`}>
|
|
{headerSettings.elements.logo && (
|
|
<Link to="/shop">
|
|
{storeLogo ? (
|
|
<img
|
|
src={storeLogo}
|
|
alt={storeName}
|
|
className="object-contain"
|
|
style={{
|
|
width: headerSettings.logo_width,
|
|
height: headerSettings.logo_height,
|
|
maxWidth: '100%'
|
|
}}
|
|
/>
|
|
) : (
|
|
<span className="text-xl font-bold text-gray-900">{storeName}</span>
|
|
)}
|
|
</Link>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<main className="launch-main flex-1 py-8">
|
|
<div className="container mx-auto px-4 max-w-2xl">
|
|
{children}
|
|
</div>
|
|
</main>
|
|
|
|
{/* Minimal footer for checkout */}
|
|
<footer className="launch-footer bg-white border-t py-4">
|
|
<div className="container mx-auto px-4 text-center text-sm text-gray-600">
|
|
© 2024 Your Store. Secure Checkout.
|
|
</div>
|
|
</footer>
|
|
</div>
|
|
);
|
|
}
|