108 lines
3.7 KiB
TypeScript
108 lines
3.7 KiB
TypeScript
"use client";
|
|
|
|
import { useState, useEffect } from "react";
|
|
import Header from "../components/Header";
|
|
import Footer from "../components/Footer";
|
|
import { NetworkBanner } from "../components/NetworkBanner";
|
|
import { Toaster } from "sonner";
|
|
import { usePathname, useRouter } from 'next/navigation';
|
|
|
|
import CartDrawer from "../components/CartDrawer";
|
|
import LoginModal from "../components/LoginModal";
|
|
import B2BPortal from "../components/B2BPortal";
|
|
import { useUserStore } from "../lib/store/userStore";
|
|
import { useSettingsStore } from "../lib/store/settingsStore";
|
|
import { useUIStore } from "../lib/store/uiStore";
|
|
|
|
export default function ClientLayout({ children }: { children: React.ReactNode }) {
|
|
const {
|
|
isCartOpen, isLoginModalOpen, isB2BPortalOpen, advisorData,
|
|
setCartOpen, setLoginModalOpen, setB2BPortalOpen, clearAdvisorData
|
|
} = useUIStore();
|
|
|
|
const pathname = usePathname();
|
|
const router = useRouter();
|
|
|
|
const { fetchProfile } = useUserStore();
|
|
const fetchSettings = useSettingsStore(state => state.fetchSettings);
|
|
|
|
useEffect(() => {
|
|
fetchSettings();
|
|
const token = localStorage.getItem('accessToken');
|
|
if (token) {
|
|
fetchProfile().catch(e => console.error("Auth init failed:", e));
|
|
}
|
|
}, [fetchProfile, fetchSettings]);
|
|
|
|
// Derived currentView from pathname for Header
|
|
let currentView = "home";
|
|
if (pathname?.includes("/shop")) currentView = "shop";
|
|
if (pathname?.includes("/wiki")) currentView = "wiki";
|
|
if (pathname?.includes("/profile")) currentView = "profile";
|
|
if (pathname?.includes("/checkout")) currentView = "checkout";
|
|
if (pathname?.includes("/dashboard")) currentView = "user-dashboard";
|
|
|
|
const handleNavigate = (v: any) => {
|
|
if (typeof v === 'object') {
|
|
if (v.view === 'profile') router.push('/profile');
|
|
if (v.view === 'order-tracking') router.push('/order/tracking');
|
|
if (v.view === 'home') router.push('/');
|
|
} else {
|
|
if (v === 'home') router.push('/');
|
|
else if (v === 'user-dashboard') router.push('/dashboard');
|
|
else router.push(`/${v}`);
|
|
}
|
|
};
|
|
|
|
const navigateToShop = (category: string = "all", search: string = "") => {
|
|
const params = new URLSearchParams();
|
|
if (category && category !== "all") params.set("category", category);
|
|
if (search) params.set("search", search);
|
|
const newUrl = params.toString() ? `/shop?${params.toString()}` : "/shop";
|
|
router.push(newUrl);
|
|
};
|
|
|
|
const handleSearch = (q: string) => {
|
|
router.push(`/search?q=${encodeURIComponent(q)}`);
|
|
};
|
|
|
|
return (
|
|
<>
|
|
<NetworkBanner />
|
|
<Header
|
|
onNavigate={handleNavigate}
|
|
onShopNavigate={navigateToShop}
|
|
currentView={currentView}
|
|
onCartOpen={() => setCartOpen(true)}
|
|
onSearch={handleSearch}
|
|
onB2BOpen={() => setB2BPortalOpen(true)}
|
|
/>
|
|
<main className="min-h-screen">
|
|
{children}
|
|
</main>
|
|
<Footer onNavigate={handleNavigate} onShopNavigate={navigateToShop} onB2BOpen={() => setB2BPortalOpen(true)} />
|
|
|
|
{isB2BPortalOpen && <B2BPortal onClose={() => setB2BPortalOpen(false)} />}
|
|
<CartDrawer
|
|
isOpen={isCartOpen}
|
|
onClose={() => setCartOpen(false)}
|
|
onCheckout={() => { setCartOpen(false); router.push('/checkout'); }}
|
|
onShopNavigate={navigateToShop}
|
|
/>
|
|
<LoginModal
|
|
isOpen={isLoginModalOpen}
|
|
onClose={() => {
|
|
setLoginModalOpen(false);
|
|
clearAdvisorData();
|
|
}}
|
|
onLogin={() => {
|
|
setLoginModalOpen(false);
|
|
}}
|
|
petName={advisorData?.name}
|
|
isAdvisorContext={!!advisorData}
|
|
/>
|
|
<Toaster position="top-center" expand={true} richColors />
|
|
</>
|
|
);
|
|
}
|