dwindown/WooNooW
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: update all header login links to use SPA login

Browse Source 
- BaseLayout.tsx: Updated 4 guest account links
- Wishlist.tsx: Updated guest wishlist login link
- All now use Link to /login instead of href to /wp-login.php
This commit is contained in:
Dwindi Ramadhana
2025-12-31 22:50:58 +07:00
parent 4fcc69bfcd
commit e9e54f52a7
2 changed files with 190 additions and 190 deletions
Download Patch File Download Diff File Expand all files Collapse all files

372
customer-spa/src/layouts/BaseLayout.tsx
View File

@@ -21,7 +21,7 @@ interface BaseLayoutProps {
*/ */
export function BaseLayout({ children }: BaseLayoutProps) { export function BaseLayout({ children }: BaseLayoutProps) {
const headerSettings = useHeaderSettings(); const headerSettings = useHeaderSettings();
// Map header styles to layouts // Map header styles to layouts
// classic -> ClassicLayout, centered -> ModernLayout, minimal -> LaunchLayout, split -> BoutiqueLayout // classic -> ClassicLayout, centered -> ModernLayout, minimal -> LaunchLayout, split -> BoutiqueLayout
switch (headerSettings.style) { switch (headerSettings.style) {
@@ -53,10 +53,10 @@ function ClassicLayout({ children }: BaseLayoutProps) {
const footerSettings = useFooterSettings(); const footerSettings = useFooterSettings();
const [mobileMenuOpen, setMobileMenuOpen] = useState(false); const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
const [searchOpen, setSearchOpen] = useState(false); const [searchOpen, setSearchOpen] = useState(false);
const heightClass = headerSettings.height === 'compact' ? 'h-16' : headerSettings.height === 'tall' ? 'h-24' : 'h-20'; 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 hasActions = headerSettings.elements.search || headerSettings.elements.account || headerSettings.elements.cart || headerSettings.elements.wishlist;
const footerColsClass: Record<string, string> = { const footerColsClass: Record<string, string> = {
'1': 'grid-cols-1', '1': 'grid-cols-1',
'2': 'grid-cols-1 md:grid-cols-2', '2': 'grid-cols-1 md:grid-cols-2',
@@ -64,7 +64,7 @@ function ClassicLayout({ children }: BaseLayoutProps) {
'4': 'grid-cols-1 md:grid-cols-4', '4': 'grid-cols-1 md:grid-cols-4',
}; };
const footerGridClass = footerColsClass[footerSettings.columns] || 'grid-cols-1 md:grid-cols-4'; const footerGridClass = footerColsClass[footerSettings.columns] || 'grid-cols-1 md:grid-cols-4';
const headerContent = ( const headerContent = (
<> <>
<SearchModal isOpen={searchOpen} onClose={() => setSearchOpen(false)} /> <SearchModal isOpen={searchOpen} onClose={() => setSearchOpen(false)} />
@@ -75,31 +75,31 @@ function ClassicLayout({ children }: BaseLayoutProps) {
{headerSettings.elements.logo && ( {headerSettings.elements.logo && (
<div className={`flex-shrink-0 ${headerSettings.mobile_logo === 'center' ? 'max-md:mx-auto' : ''}`}> <div className={`flex-shrink-0 ${headerSettings.mobile_logo === 'center' ? 'max-md:mx-auto' : ''}`}>
<Link to="/shop" className="flex items-center gap-3 group"> <Link to="/shop" className="flex items-center gap-3 group">
{storeLogo ? ( {storeLogo ? (
<img <img
src={storeLogo} src={storeLogo}
alt={storeName} alt={storeName}
className="object-contain" className="object-contain"
style={{ style={{
width: headerSettings.logo_width, width: headerSettings.logo_width,
height: headerSettings.logo_height, height: headerSettings.logo_height,
maxWidth: '100%' maxWidth: '100%'
}} }}
/> />
) : ( ) : (
<> <>
<div className="w-10 h-10 bg-gray-900 rounded-lg flex items-center justify-center"> <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> <span className="text-white font-bold text-xl">W</span>
</div> </div>
<span className="text-2xl font-serif font-light text-gray-900 hidden sm:block group-hover:text-gray-600 transition-colors"> <span className="text-2xl font-serif font-light text-gray-900 hidden sm:block group-hover:text-gray-600 transition-colors">
{storeName} {storeName}
</span> </span>
</> </>
)} )}
</Link> </Link>
</div> </div>
)} )}
{/* Navigation */} {/* Navigation */}
{headerSettings.elements.navigation && ( {headerSettings.elements.navigation && (
<nav className="hidden md:flex items-center space-x-8"> <nav className="hidden md:flex items-center space-x-8">
@@ -108,60 +108,60 @@ function ClassicLayout({ children }: BaseLayoutProps) {
<a href="/contact" className="text-sm font-medium text-gray-700 hover:text-gray-900 transition-colors no-underline">Contact</a> <a href="/contact" className="text-sm font-medium text-gray-700 hover:text-gray-900 transition-colors no-underline">Contact</a>
</nav> </nav>
)} )}
{/* Actions - Hidden on mobile when using bottom-nav */} {/* Actions - Hidden on mobile when using bottom-nav */}
{hasActions && ( {hasActions && (
<div className={`flex items-center gap-3 ${headerSettings.mobile_menu === 'bottom-nav' ? 'max-md:hidden' : ''}`}> <div className={`flex items-center gap-3 ${headerSettings.mobile_menu === 'bottom-nav' ? 'max-md:hidden' : ''}`}>
{/* Search */} {/* Search */}
{headerSettings.elements.search && ( {headerSettings.elements.search && (
<button <button
onClick={() => setSearchOpen(true)} onClick={() => setSearchOpen(true)}
className="font-[inherit] flex items-center gap-2 px-3 py-2 hover:bg-gray-100 rounded-lg transition-colors" 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" /> <Search className="h-5 w-5 text-gray-600" />
</button> </button>
)} )}
{/* Account */} {/* Account */}
{headerSettings.elements.account && (user?.isLoggedIn ? ( {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"> <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" /> <User className="h-5 w-5" />
<span className="hidden lg:block">Account</span> <span className="hidden lg:block">Account</span>
</Link> </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"> <Link to="/login" 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" /> <User className="h-5 w-5" />
<span className="hidden lg:block">Account</span> <span className="hidden lg:block">Account</span>
</a> </Link>
))} ))}
{/* Wishlist */} {/* Wishlist */}
{headerSettings.elements.wishlist && isEnabled('wishlist') && (wishlistSettings.show_in_header ?? true) && ( {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"> <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" /> <Heart className="h-5 w-5" />
<span className="hidden lg:block">Wishlist</span> <span className="hidden lg:block">Wishlist</span>
</Link> </Link>
)} )}
{/* Cart */} {/* Cart */}
{headerSettings.elements.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"> <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"> <div className="relative">
<ShoppingCart className="h-5 w-5" /> <ShoppingCart className="h-5 w-5" />
{itemCount > 0 && ( {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"> <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} {itemCount}
</span> </span>
)} )}
</div> </div>
<span className="hidden lg:block"> <span className="hidden lg:block">
Cart ({itemCount}) Cart ({itemCount})
</span> </span>
</Link> </Link>
)} )}
{/* Mobile Menu Toggle - Only for hamburger and slide-in */} {/* Mobile Menu Toggle - Only for hamburger and slide-in */}
{(headerSettings.mobile_menu === 'hamburger' || headerSettings.mobile_menu === 'slide-in') && ( {(headerSettings.mobile_menu === 'hamburger' || headerSettings.mobile_menu === 'slide-in') && (
<button <button
className="font-[inherit] md:hidden flex items-center gap-2 px-3 py-2 hover:bg-gray-100 rounded-lg transition-colors" 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)} onClick={() => setMobileMenuOpen(!mobileMenuOpen)}
> >
@@ -171,7 +171,7 @@ function ClassicLayout({ children }: BaseLayoutProps) {
</div> </div>
)} )}
</div> </div>
{/* Mobile Menu - Hamburger Dropdown */} {/* Mobile Menu - Hamburger Dropdown */}
{headerSettings.mobile_menu === 'hamburger' && mobileMenuOpen && ( {headerSettings.mobile_menu === 'hamburger' && mobileMenuOpen && (
<div className="md:hidden border-t py-4"> <div className="md:hidden border-t py-4">
@@ -184,7 +184,7 @@ function ClassicLayout({ children }: BaseLayoutProps) {
)} )}
</div> </div>
)} )}
{/* Mobile Menu - Slide-in Drawer */} {/* Mobile Menu - Slide-in Drawer */}
{headerSettings.mobile_menu === 'slide-in' && mobileMenuOpen && ( {headerSettings.mobile_menu === 'slide-in' && mobileMenuOpen && (
<> <>
@@ -210,7 +210,7 @@ function ClassicLayout({ children }: BaseLayoutProps) {
</header> </header>
</> </>
); );
const footerContent = ( const footerContent = (
<> <>
{/* Mobile Menu - Bottom Navigation */} {/* Mobile Menu - Bottom Navigation */}
@@ -222,7 +222,7 @@ function ClassicLayout({ children }: BaseLayoutProps) {
<span>Shop</span> <span>Shop</span>
</Link> </Link>
{headerSettings.elements.search && ( {headerSettings.elements.search && (
<button <button
onClick={() => setSearchOpen(true)} 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" 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"
> >
@@ -248,16 +248,16 @@ function ClassicLayout({ children }: BaseLayoutProps) {
<span>Account</span> <span>Account</span>
</Link> </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"> <Link to="/login" 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" /> <User className="h-5 w-5" />
<span>Login</span> <span>Login</span>
</a> </Link>
) )
)} )}
</div> </div>
</nav> </nav>
)} )}
<footer className="classic-footer bg-gray-100 border-t mt-auto"> <footer className="classic-footer bg-gray-100 border-t mt-auto">
<div className="container mx-auto px-4 py-12"> <div className="container mx-auto px-4 py-12">
<div className={`grid ${footerGridClass} gap-8`}> <div className={`grid ${footerGridClass} gap-8`}>
@@ -272,59 +272,59 @@ function ClassicLayout({ children }: BaseLayoutProps) {
return true; return true;
}) })
.map((section: any) => ( .map((section: any) => (
<div key={section.id}> <div key={section.id}>
<h3 className="font-semibold mb-4">{section.title}</h3> <h3 className="font-semibold mb-4">{section.title}</h3>
{/* Contact Section */} {/* Contact Section */}
{section.type === 'contact' && ( {section.type === 'contact' && (
<div className="space-y-1 text-sm text-gray-600"> <div className="space-y-1 text-sm text-gray-600">
{footerSettings.contact_data?.show_email && footerSettings.contact_data?.email && ( {footerSettings.contact_data?.show_email && footerSettings.contact_data?.email && (
<p>Email: {footerSettings.contact_data.email}</p> <p>Email: {footerSettings.contact_data.email}</p>
)} )}
{footerSettings.contact_data?.show_phone && footerSettings.contact_data?.phone && ( {footerSettings.contact_data?.show_phone && footerSettings.contact_data?.phone && (
<p>Phone: {footerSettings.contact_data.phone}</p> <p>Phone: {footerSettings.contact_data.phone}</p>
)} )}
{footerSettings.contact_data?.show_address && footerSettings.contact_data?.address && ( {footerSettings.contact_data?.show_address && footerSettings.contact_data?.address && (
<p>{footerSettings.contact_data.address}</p> <p>{footerSettings.contact_data.address}</p>
)} )}
</div> </div>
)} )}
{/* Menu Section */} {/* Menu Section */}
{section.type === 'menu' && ( {section.type === 'menu' && (
<ul className="space-y-2 text-sm"> <ul className="space-y-2 text-sm">
<li><Link to="/shop" className="text-gray-600 hover:text-primary no-underline">Shop</Link></li> <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="/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> <li><a href="/contact" className="text-gray-600 hover:text-primary no-underline">Contact</a></li>
</ul> </ul>
)} )}
{/* Social Section */} {/* Social Section */}
{section.type === 'social' && footerSettings.social_links?.length > 0 && ( {section.type === 'social' && footerSettings.social_links?.length > 0 && (
<ul className="space-y-2 text-sm"> <ul className="space-y-2 text-sm">
{footerSettings.social_links.map((link: any) => ( {footerSettings.social_links.map((link: any) => (
<li key={link.id}> <li key={link.id}>
<a href={link.url} target="_blank" rel="noopener noreferrer" className="text-gray-600 hover:text-primary no-underline"> <a href={link.url} target="_blank" rel="noopener noreferrer" className="text-gray-600 hover:text-primary no-underline">
{link.platform} {link.platform}
</a> </a>
</li> </li>
))} ))}
</ul> </ul>
)} )}
{/* Newsletter Section */} {/* Newsletter Section */}
{section.type === 'newsletter' && ( {section.type === 'newsletter' && (
<NewsletterForm description={footerSettings.labels?.newsletter_description} /> <NewsletterForm description={footerSettings.labels?.newsletter_description} />
)} )}
{/* Custom HTML Section */} {/* Custom HTML Section */}
{section.type === 'custom' && ( {section.type === 'custom' && (
<div className="text-sm text-gray-600" dangerouslySetInnerHTML={{ __html: section.content }} /> <div className="text-sm text-gray-600" dangerouslySetInnerHTML={{ __html: section.content }} />
)} )}
</div> </div>
))} ))}
</div> </div>
{/* Payment Icons */} {/* Payment Icons */}
{footerSettings.elements.payment && ( {footerSettings.elements.payment && (
<div className="mt-8 pt-8 border-t"> <div className="mt-8 pt-8 border-t">
@@ -336,7 +336,7 @@ function ClassicLayout({ children }: BaseLayoutProps) {
</div> </div>
</div> </div>
)} )}
{/* Copyright */} {/* Copyright */}
{footerSettings.elements.copyright && ( {footerSettings.elements.copyright && (
<div className="border-t mt-8 pt-8 text-center text-sm text-gray-600"> <div className="border-t mt-8 pt-8 text-center text-sm text-gray-600">
@@ -347,7 +347,7 @@ function ClassicLayout({ children }: BaseLayoutProps) {
</footer> </footer>
</> </>
); );
return ( return (
<LayoutWrapper header={headerContent} footer={footerContent}> <LayoutWrapper header={headerContent} footer={footerContent}>
{children} {children}
@@ -369,10 +369,10 @@ function ModernLayout({ children }: BaseLayoutProps) {
const { settings: wishlistSettings } = useModuleSettings('wishlist'); const { settings: wishlistSettings } = useModuleSettings('wishlist');
const [mobileMenuOpen, setMobileMenuOpen] = useState(false); const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
const [searchOpen, setSearchOpen] = useState(false); const [searchOpen, setSearchOpen] = useState(false);
const paddingClass = headerSettings.height === 'compact' ? 'py-4' : headerSettings.height === 'tall' ? 'py-8' : 'py-6'; 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; const hasActions = headerSettings.elements.search || headerSettings.elements.account || headerSettings.elements.cart || headerSettings.elements.wishlist;
return ( return (
<div className="modern-layout min-h-screen flex flex-col"> <div className="modern-layout min-h-screen flex flex-col">
<SearchModal isOpen={searchOpen} onClose={() => setSearchOpen(false)} /> <SearchModal isOpen={searchOpen} onClose={() => setSearchOpen(false)} />
@@ -383,12 +383,12 @@ function ModernLayout({ children }: BaseLayoutProps) {
{headerSettings.elements.logo && ( {headerSettings.elements.logo && (
<Link to="/shop" className="mb-4"> <Link to="/shop" className="mb-4">
{storeLogo ? ( {storeLogo ? (
<img <img
src={storeLogo} src={storeLogo}
alt={storeName} alt={storeName}
className="object-contain" className="object-contain"
style={{ style={{
width: headerSettings.logo_width, width: headerSettings.logo_width,
height: headerSettings.logo_height, height: headerSettings.logo_height,
maxWidth: '100%' maxWidth: '100%'
}} }}
@@ -398,7 +398,7 @@ function ModernLayout({ children }: BaseLayoutProps) {
)} )}
</Link> </Link>
)} )}
{/* Navigation & Actions - Centered */} {/* Navigation & Actions - Centered */}
{(headerSettings.elements.navigation || hasActions) && ( {(headerSettings.elements.navigation || hasActions) && (
<nav className="hidden md:flex items-center space-x-8"> <nav className="hidden md:flex items-center space-x-8">
@@ -410,7 +410,7 @@ function ModernLayout({ children }: BaseLayoutProps) {
</> </>
)} )}
{headerSettings.elements.search && ( {headerSettings.elements.search && (
<button <button
onClick={() => setSearchOpen(true)} onClick={() => setSearchOpen(true)}
className="font-[inherit] flex items-center gap-1 text-sm font-medium text-gray-700 hover:text-gray-900 transition-colors" className="font-[inherit] flex items-center gap-1 text-sm font-medium text-gray-700 hover:text-gray-900 transition-colors"
> >
@@ -423,9 +423,9 @@ function ModernLayout({ children }: BaseLayoutProps) {
<User className="h-4 w-4" /> Account <User className="h-4 w-4" /> Account
</Link> </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"> <Link to="/login" 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 <User className="h-4 w-4" /> Account
</a> </Link>
) )
)} )}
{headerSettings.elements.wishlist && isEnabled('wishlist') && (wishlistSettings.show_in_header ?? true) && ( {headerSettings.elements.wishlist && isEnabled('wishlist') && (wishlistSettings.show_in_header ?? true) && (
@@ -440,16 +440,16 @@ function ModernLayout({ children }: BaseLayoutProps) {
)} )}
</nav> </nav>
)} )}
{/* Mobile Menu Toggle */} {/* Mobile Menu Toggle */}
<button <button
className="md:hidden mt-4 flex items-center gap-2 px-3 py-2 hover:bg-gray-100 rounded-lg transition-colors" 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)} onClick={() => setMobileMenuOpen(!mobileMenuOpen)}
> >
{mobileMenuOpen ? <X className="h-5 w-5 text-gray-600" /> : <Menu className="h-5 w-5 text-gray-600" />} {mobileMenuOpen ? <X className="h-5 w-5 text-gray-600" /> : <Menu className="h-5 w-5 text-gray-600" />}
</button> </button>
</div> </div>
{/* Mobile Menu */} {/* Mobile Menu */}
{mobileMenuOpen && ( {mobileMenuOpen && (
<div className="md:hidden border-t py-4"> <div className="md:hidden border-t py-4">
@@ -464,11 +464,11 @@ function ModernLayout({ children }: BaseLayoutProps) {
)} )}
</div> </div>
</header> </header>
<main className="modern-main flex-1"> <main className="modern-main flex-1">
{children} {children}
</main> </main>
<footer className="modern-footer bg-white border-t mt-auto"> <footer className="modern-footer bg-white border-t mt-auto">
<div className="container mx-auto px-4 py-12 text-center"> <div className="container mx-auto px-4 py-12 text-center">
<div className="mb-6"> <div className="mb-6">
@@ -504,10 +504,10 @@ function BoutiqueLayout({ children }: BaseLayoutProps) {
const { settings: wishlistSettings } = useModuleSettings('wishlist'); const { settings: wishlistSettings } = useModuleSettings('wishlist');
const [mobileMenuOpen, setMobileMenuOpen] = useState(false); const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
const [searchOpen, setSearchOpen] = useState(false); const [searchOpen, setSearchOpen] = useState(false);
const heightClass = headerSettings.height === 'compact' ? 'h-20' : headerSettings.height === 'tall' ? 'h-28' : 'h-24'; 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; const hasActions = headerSettings.elements.search || headerSettings.elements.account || headerSettings.elements.cart || headerSettings.elements.wishlist;
return ( return (
<div className="boutique-layout min-h-screen flex flex-col font-serif"> <div className="boutique-layout min-h-screen flex flex-col font-serif">
<SearchModal isOpen={searchOpen} onClose={() => setSearchOpen(false)} /> <SearchModal isOpen={searchOpen} onClose={() => setSearchOpen(false)} />
@@ -516,28 +516,28 @@ function BoutiqueLayout({ children }: BaseLayoutProps) {
<div className={`flex items-center justify-between ${heightClass}`}> <div className={`flex items-center justify-between ${heightClass}`}>
{/* Logo */} {/* Logo */}
<div className="flex-1"></div> <div className="flex-1"></div>
{headerSettings.elements.logo && ( {headerSettings.elements.logo && (
<div className="flex-shrink-0"> <div className="flex-shrink-0">
<Link to="/shop"> <Link to="/shop">
{storeLogo ? ( {storeLogo ? (
<img <img
src={storeLogo} src={storeLogo}
alt={storeName} alt={storeName}
className="object-contain" className="object-contain"
style={{ style={{
width: headerSettings.logo_width, width: headerSettings.logo_width,
height: headerSettings.logo_height, height: headerSettings.logo_height,
maxWidth: '100%' maxWidth: '100%'
}} }}
/> />
) : ( ) : (
<span className="text-3xl font-bold tracking-wide text-gray-900">{storeName}</span> <span className="text-3xl font-bold tracking-wide text-gray-900">{storeName}</span>
)} )}
</Link> </Link>
</div> </div>
)} )}
<div className="flex-1 flex justify-end"> <div className="flex-1 flex justify-end">
{(headerSettings.elements.navigation || hasActions) && ( {(headerSettings.elements.navigation || hasActions) && (
<nav className="hidden md:flex items-center space-x-8"> <nav className="hidden md:flex items-center space-x-8">
@@ -545,7 +545,7 @@ function BoutiqueLayout({ children }: BaseLayoutProps) {
<Link to="/shop" className="text-sm uppercase tracking-wider text-gray-700 hover:text-gray-900 transition-colors no-underline">Shop</Link> <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 && ( {headerSettings.elements.search && (
<button <button
onClick={() => setSearchOpen(true)} 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" className="font-[inherit] flex items-center gap-1 text-sm uppercase tracking-wider text-gray-700 hover:text-gray-900 transition-colors"
> >
@@ -557,9 +557,9 @@ function BoutiqueLayout({ children }: BaseLayoutProps) {
<User className="h-4 w-4" /> Account <User className="h-4 w-4" /> Account
</Link> </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"> <Link to="/login" 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 <User className="h-4 w-4" /> Account
</a> </Link>
))} ))}
{headerSettings.elements.wishlist && isEnabled('wishlist') && (wishlistSettings.show_in_header ?? true) && ( {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"> <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">
@@ -573,9 +573,9 @@ function BoutiqueLayout({ children }: BaseLayoutProps) {
)} )}
</nav> </nav>
)} )}
{/* Mobile Menu Toggle */} {/* Mobile Menu Toggle */}
<button <button
className="font-[inherit] md:hidden flex items-center gap-2 px-3 py-2 hover:bg-gray-100 rounded-lg transition-colors" 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)} onClick={() => setMobileMenuOpen(!mobileMenuOpen)}
> >
@@ -583,7 +583,7 @@ function BoutiqueLayout({ children }: BaseLayoutProps) {
</button> </button>
</div> </div>
</div> </div>
{/* Mobile Menu */} {/* Mobile Menu */}
{mobileMenuOpen && ( {mobileMenuOpen && (
<div className="md:hidden border-t py-4"> <div className="md:hidden border-t py-4">
@@ -596,11 +596,11 @@ function BoutiqueLayout({ children }: BaseLayoutProps) {
)} )}
</div> </div>
</header> </header>
<main className="boutique-main flex-1"> <main className="boutique-main flex-1">
{children} {children}
</main> </main>
<footer className="boutique-footer bg-gray-50 border-t mt-auto"> <footer className="boutique-footer bg-gray-50 border-t mt-auto">
<div className="container mx-auto px-4 py-16 text-center"> <div className="container mx-auto px-4 py-16 text-center">
<div className="mb-8"> <div className="mb-8">
@@ -628,10 +628,10 @@ function BoutiqueLayout({ children }: BaseLayoutProps) {
* WooNooW only takes over from checkout onwards * WooNooW only takes over from checkout onwards
*/ */
function LaunchLayout({ children }: BaseLayoutProps) { function LaunchLayout({ children }: BaseLayoutProps) {
const isCheckoutFlow = window.location.pathname.includes('/checkout') || const isCheckoutFlow = window.location.pathname.includes('/checkout') ||
window.location.pathname.includes('/my-account') || window.location.pathname.includes('/my-account') ||
window.location.pathname.includes('/order-received'); window.location.pathname.includes('/order-received');
if (!isCheckoutFlow) { if (!isCheckoutFlow) {
// For non-checkout pages, use minimal layout // For non-checkout pages, use minimal layout
return ( return (
@@ -640,14 +640,14 @@ function LaunchLayout({ children }: BaseLayoutProps) {
</div> </div>
); );
} }
// For checkout flow: minimal header, no footer // For checkout flow: minimal header, no footer
const storeLogo = (window as any).woonoowCustomer?.storeLogo; const storeLogo = (window as any).woonoowCustomer?.storeLogo;
const storeName = (window as any).woonoowCustomer?.storeName || (window as any).woonoowCustomer?.siteTitle || 'Store Title'; const storeName = (window as any).woonoowCustomer?.storeName || (window as any).woonoowCustomer?.siteTitle || 'Store Title';
const headerSettings = useHeaderSettings(); const headerSettings = useHeaderSettings();
const heightClass = headerSettings.height === 'compact' ? 'h-12' : headerSettings.height === 'tall' ? 'h-20' : 'h-16'; const heightClass = headerSettings.height === 'compact' ? 'h-12' : headerSettings.height === 'tall' ? 'h-20' : 'h-16';
return ( return (
<div className="launch-layout min-h-screen flex flex-col bg-gray-50"> <div className="launch-layout min-h-screen flex flex-col bg-gray-50">
<header className="launch-header bg-white border-b"> <header className="launch-header bg-white border-b">
@@ -656,12 +656,12 @@ function LaunchLayout({ children }: BaseLayoutProps) {
{headerSettings.elements.logo && ( {headerSettings.elements.logo && (
<Link to="/shop"> <Link to="/shop">
{storeLogo ? ( {storeLogo ? (
<img <img
src={storeLogo} src={storeLogo}
alt={storeName} alt={storeName}
className="object-contain" className="object-contain"
style={{ style={{
width: headerSettings.logo_width, width: headerSettings.logo_width,
height: headerSettings.logo_height, height: headerSettings.logo_height,
maxWidth: '100%' maxWidth: '100%'
}} }}
@@ -674,13 +674,13 @@ function LaunchLayout({ children }: BaseLayoutProps) {
</div> </div>
</div> </div>
</header> </header>
<main className="launch-main flex-1 py-8"> <main className="launch-main flex-1 py-8">
<div className="container mx-auto px-4 max-w-2xl"> <div className="container mx-auto px-4 max-w-2xl">
{children} {children}
</div> </div>
</main> </main>
{/* Minimal footer for checkout */} {/* Minimal footer for checkout */}
<footer className="launch-footer bg-white border-t py-4"> <footer className="launch-footer bg-white border-t py-4">
<div className="container mx-auto px-4 text-center text-sm text-gray-600"> <div className="container mx-auto px-4 text-center text-sm text-gray-600">

8
customer-spa/src/pages/Wishlist.tsx
View File

@@ -1,5 +1,5 @@
import React, { useEffect, useState } from 'react'; import React, { useEffect, useState } from 'react';
import { useNavigate } from 'react-router-dom'; import { useNavigate, Link } from 'react-router-dom';
import { Trash2, ShoppingCart, Heart } from 'lucide-react'; import { Trash2, ShoppingCart, Heart } from 'lucide-react';
import { useWishlist } from '@/hooks/useWishlist'; import { useWishlist } from '@/hooks/useWishlist';
import { useCartStore } from '@/lib/cart/store'; import { useCartStore } from '@/lib/cart/store';
@@ -88,7 +88,7 @@ export default function Wishlist() {
<div className="container mx-auto px-4 py-8"> <div className="container mx-auto px-4 py-8">
<div className="max-w-4xl mx-auto"> <div className="max-w-4xl mx-auto">
<h1 className="text-3xl font-bold mb-6">My Wishlist</h1> <h1 className="text-3xl font-bold mb-6">My Wishlist</h1>
<div className="text-center py-12 bg-gray-50 rounded-lg"> <div className="text-center py-12 bg-gray-50 rounded-lg">
<Heart className="w-16 h-16 mx-auto mb-4 text-gray-400" /> <Heart className="w-16 h-16 mx-auto mb-4 text-gray-400" />
<h2 className="text-xl font-semibold mb-2">Your wishlist is empty</h2> <h2 className="text-xl font-semibold mb-2">Your wishlist is empty</h2>
@@ -118,8 +118,8 @@ export default function Wishlist() {
{!isLoggedIn && hasGuestItems && ( {!isLoggedIn && hasGuestItems && (
<div className="mb-6 p-4 bg-blue-50 border border-blue-200 rounded-lg"> <div className="mb-6 p-4 bg-blue-50 border border-blue-200 rounded-lg">
<p className="text-sm text-blue-800"> <p className="text-sm text-blue-800">
<strong>Guest Wishlist:</strong> You have {guestProducts.length} items saved locally. <strong>Guest Wishlist:</strong> You have {guestProducts.length} items saved locally.
<a href="/wp-login.php" className="underline ml-1">Login</a> to sync your wishlist to your account. <Link to="/login" className="underline ml-1">Login</Link> to sync your wishlist to your account.
</p> </p>
</div> </div>
)} )}