feat: implement header/footer visibility controls for checkout and thankyou pages
- Created LayoutWrapper component to conditionally render header/footer based on route - Created MinimalHeader component (logo only) - Created MinimalFooter component (trust badges + policy links) - Created usePageVisibility hook to get visibility settings per page - Wrapped ClassicLayout with LayoutWrapper for conditional rendering - Header/footer visibility now controlled directly in React SPA - Settings: show/minimal/hide for both header and footer - Background color support for checkout and thankyou pages
This commit is contained in:
Dwindi Ramadhana
@@ -1,91 +1,197 @@
|
||||
import React from 'react';
|
||||
import { Link } from 'react-router-dom';
|
||||
import { Facebook, Instagram, Twitter, Youtube, Mail } from 'lucide-react';
|
||||
|
||||
export default function Footer() {
|
||||
const currentYear = new Date().getFullYear();
|
||||
|
||||
// Get logo and store name from WordPress global
|
||||
const storeLogo = (window as any).woonoowCustomer?.storeLogo;
|
||||
const storeName = (window as any).woonoowCustomer?.storeName || 'My Wordpress Store';
|
||||
|
||||
return (
|
||||
<footer className="border-t bg-muted/50 mt-auto">
|
||||
<div className="container-safe py-8">
|
||||
<div className="grid grid-cols-1 md:grid-cols-4 gap-8">
|
||||
{/* About */}
|
||||
<div>
|
||||
<h3 className="font-semibold mb-4">About</h3>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
Modern e-commerce experience powered by WooNooW.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Shop */}
|
||||
<div>
|
||||
<h3 className="font-semibold mb-4">Shop</h3>
|
||||
<ul className="space-y-2 text-sm">
|
||||
<li>
|
||||
<Link to="/" className="text-muted-foreground hover:text-foreground transition-colors">
|
||||
All Products
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link to="/cart" className="text-muted-foreground hover:text-foreground transition-colors">
|
||||
Shopping Cart
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link to="/checkout" className="text-muted-foreground hover:text-foreground transition-colors">
|
||||
Checkout
|
||||
</Link>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
{/* Account */}
|
||||
<div>
|
||||
<h3 className="font-semibold mb-4">Account</h3>
|
||||
<ul className="space-y-2 text-sm">
|
||||
<li>
|
||||
<Link to="/account" className="text-muted-foreground hover:text-foreground transition-colors">
|
||||
My Account
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link to="/account/orders" className="text-muted-foreground hover:text-foreground transition-colors">
|
||||
Order History
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link to="/account/profile" className="text-muted-foreground hover:text-foreground transition-colors">
|
||||
Profile Settings
|
||||
</Link>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
{/* Support */}
|
||||
<div>
|
||||
<h3 className="font-semibold mb-4">Support</h3>
|
||||
<ul className="space-y-2 text-sm">
|
||||
<li>
|
||||
<a href="#" className="text-muted-foreground hover:text-foreground transition-colors">
|
||||
Contact Us
|
||||
<footer className="bg-gray-50 border-t border-gray-200 mt-auto">
|
||||
<div className="container mx-auto px-4 sm:px-6 lg:px-8">
|
||||
{/* Main Footer Content */}
|
||||
<div className="py-12 lg:py-16">
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-5 gap-8 lg:gap-12">
|
||||
{/* Brand & Description */}
|
||||
<div className="lg:col-span-2">
|
||||
<Link to="/" className="flex items-center gap-3 mb-4">
|
||||
{storeLogo ? (
|
||||
<img src={storeLogo} alt={storeName} className="h-10 w-auto" />
|
||||
) : (
|
||||
<>
|
||||
<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-xl font-serif font-light text-gray-900">
|
||||
{storeName}
|
||||
</span>
|
||||
</>
|
||||
)}
|
||||
</Link>
|
||||
<p className="text-sm text-gray-600 leading-relaxed mb-6 max-w-sm">
|
||||
Your store description here. Modern e-commerce experience with quality products and exceptional customer service.
|
||||
</p>
|
||||
|
||||
{/* Social Media */}
|
||||
<div className="flex items-center gap-3">
|
||||
<a
|
||||
href="#"
|
||||
className="w-10 h-10 rounded-full bg-white border border-gray-200 flex items-center justify-center hover:bg-gray-900 hover:text-white transition-all"
|
||||
>
|
||||
<Facebook className="h-4 w-4" />
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" className="text-muted-foreground hover:text-foreground transition-colors">
|
||||
Shipping Info
|
||||
<a
|
||||
href="#"
|
||||
className="w-10 h-10 rounded-full bg-white border border-gray-200 flex items-center justify-center hover:bg-gray-900 hover:text-white transition-all"
|
||||
>
|
||||
<Instagram className="h-4 w-4" />
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" className="text-muted-foreground hover:text-foreground transition-colors">
|
||||
Returns
|
||||
<a
|
||||
href="#"
|
||||
className="w-10 h-10 rounded-full bg-white border border-gray-200 flex items-center justify-center hover:bg-gray-900 hover:text-white transition-all"
|
||||
>
|
||||
<Twitter className="h-4 w-4" />
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
<a
|
||||
href="#"
|
||||
className="w-10 h-10 rounded-full bg-white border border-gray-200 flex items-center justify-center hover:bg-gray-900 hover:text-white transition-all"
|
||||
>
|
||||
<Youtube className="h-4 w-4" />
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Quick Links */}
|
||||
<div>
|
||||
<h3 className="font-semibold text-gray-900 mb-4 text-sm uppercase tracking-wider">Shop</h3>
|
||||
<ul className="space-y-3">
|
||||
<li>
|
||||
<Link to="/" className="text-sm text-gray-600 hover:text-gray-900 transition-colors">
|
||||
All Products
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link to="/shop" className="text-sm text-gray-600 hover:text-gray-900 transition-colors">
|
||||
New Arrivals
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link to="/shop" className="text-sm text-gray-600 hover:text-gray-900 transition-colors">
|
||||
Best Sellers
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link to="/shop" className="text-sm text-gray-600 hover:text-gray-900 transition-colors">
|
||||
Sale
|
||||
</Link>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
{/* Customer Service */}
|
||||
<div>
|
||||
<h3 className="font-semibold text-gray-900 mb-4 text-sm uppercase tracking-wider">Customer Service</h3>
|
||||
<ul className="space-y-3">
|
||||
<li>
|
||||
<Link to="/contact" className="text-sm text-gray-600 hover:text-gray-900 transition-colors">
|
||||
Contact Us
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" className="text-sm text-gray-600 hover:text-gray-900 transition-colors">
|
||||
Shipping & Returns
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" className="text-sm text-gray-600 hover:text-gray-900 transition-colors">
|
||||
FAQ
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<Link to="/account" className="text-sm text-gray-600 hover:text-gray-900 transition-colors">
|
||||
My Account
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link to="/account/orders" className="text-sm text-gray-600 hover:text-gray-900 transition-colors">
|
||||
Track Order
|
||||
</Link>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
{/* Newsletter */}
|
||||
<div>
|
||||
<h3 className="font-semibold text-gray-900 mb-4 text-sm uppercase tracking-wider">Newsletter</h3>
|
||||
<p className="text-sm text-gray-600 mb-4">
|
||||
Subscribe to get special offers and updates.
|
||||
</p>
|
||||
<form className="space-y-2">
|
||||
<div className="relative">
|
||||
<input
|
||||
type="email"
|
||||
placeholder="Your email"
|
||||
className="w-full px-4 py-2.5 pr-12 border border-gray-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-gray-900 focus:border-transparent"
|
||||
/>
|
||||
<button
|
||||
type="submit"
|
||||
className="absolute right-1.5 top-1.5 p-1.5 bg-gray-900 text-white rounded-md hover:bg-gray-800 transition-colors"
|
||||
>
|
||||
<Mail className="h-4 w-4" />
|
||||
</button>
|
||||
</div>
|
||||
<p className="text-xs text-gray-500">
|
||||
By subscribing, you agree to our Privacy Policy.
|
||||
</p>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Payment Methods & Trust Badges */}
|
||||
<div className="py-6 border-t border-gray-200">
|
||||
<div className="flex flex-col md:flex-row items-center justify-between gap-4">
|
||||
<div className="flex items-center gap-4 flex-wrap justify-center md:justify-start">
|
||||
<span className="text-xs text-gray-500 uppercase tracking-wider">We Accept</span>
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="h-8 px-3 bg-white border border-gray-200 rounded flex items-center justify-center">
|
||||
<span className="text-xs font-semibold text-gray-700">VISA</span>
|
||||
</div>
|
||||
<div className="h-8 px-3 bg-white border border-gray-200 rounded flex items-center justify-center">
|
||||
<span className="text-xs font-semibold text-gray-700">MC</span>
|
||||
</div>
|
||||
<div className="h-8 px-3 bg-white border border-gray-200 rounded flex items-center justify-center">
|
||||
<span className="text-xs font-semibold text-gray-700">AMEX</span>
|
||||
</div>
|
||||
<div className="h-8 px-3 bg-white border border-gray-200 rounded flex items-center justify-center">
|
||||
<span className="text-xs font-semibold text-gray-700">PayPal</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-4 text-xs text-gray-500">
|
||||
<a href="#" className="hover:text-gray-900 transition-colors">Privacy Policy</a>
|
||||
<span>•</span>
|
||||
<a href="#" className="hover:text-gray-900 transition-colors">Terms of Service</a>
|
||||
<span>•</span>
|
||||
<a href="#" className="hover:text-gray-900 transition-colors">Sitemap</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Copyright */}
|
||||
<div className="mt-8 pt-8 border-t text-center text-sm text-muted-foreground">
|
||||
<p>© {currentYear} WooNooW. All rights reserved.</p>
|
||||
<div className="py-6 border-t border-gray-200">
|
||||
<div className="flex flex-col md:flex-row items-center justify-between gap-4">
|
||||
<p className="text-sm text-gray-600">
|
||||
© {currentYear} Your Store. All rights reserved.
|
||||
</p>
|
||||
<p className="text-xs text-gray-500">
|
||||
Powered by <span className="font-semibold text-gray-700">WooNooW</span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
Reference in New Issue
Block a user