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

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

@@ -75,29 +75,29 @@ 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 */}
@@ -121,42 +121,42 @@ function ClassicLayout({ children }: BaseLayoutProps) {
<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 */}
@@ -248,10 +248,10 @@ 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>
@@ -272,57 +272,57 @@ 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 */}
@@ -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) && (
@@ -519,23 +519,23 @@ function BoutiqueLayout({ children }: BaseLayoutProps) {
{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">
@@ -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">
@@ -629,8 +629,8 @@ function BoutiqueLayout({ children }: BaseLayoutProps) {
*/ */
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

4
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';
@@ -119,7 +119,7 @@ export default function Wishlist() {
<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>
)} )}