"use client"; import { useState, useEffect, useRef } from "react"; import Link from "next/link"; import { useRouter } from "next/navigation"; import { useSelector } from "react-redux"; import { ShoppingCart, Heart, User, Menu, X, ChevronDown, MapPin, LogOut, MessageSquare, Package, LayoutGrid, Info, Home } from "lucide-react"; import { useQueryClient } from "@tanstack/react-query"; import Swal from "sweetalert2"; import { useUserProfile } from "@/services/useUser"; import { removeAuthCookie } from "@/app/actions"; import Image from "next/image"; import LOGO from "@/../public/assets/images/logo/logo.png" // تعریف اینترفیس برای آدرس کاربر interface UserAddress { id: number; address: string; is_default: boolean; latitude: number; longitude: number; postal_code: string; } // تعریف اینترفیس برای ساختار دیتای کاربر بر اساس API interface UserProfile { id: number; user_id: string; name: string | null; phone_number: string; active: boolean; confirmed: boolean; default_address: UserAddress | null; favorites_count: number; orders_count: number; wallet_balance: number; } export const Header = () => { const router = useRouter(); const queryClient = useQueryClient(); const [isScrolled, setIsScrolled] = useState(false); const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false); // استیت برای دراپ‌دون پروفایل const [isProfileDropdownOpen, setIsProfileDropdownOpen] = useState(false); const dropdownRef = useRef(null); // استیت برای حل مشکل Hydration سبد خرید const [isMounted, setIsMounted] = useState(false); // دریافت اطلاعات کاربر از لوکال استوریج به صورت امن const getUserFromStorage = () => { if (typeof window !== "undefined") { const storedUser = localStorage.getItem("user"); return storedUser ? JSON.parse(storedUser) : null; } return null; }; const user = getUserFromStorage(); // دریافت اطلاعات کاربر از هوک اختصاصی const { data, isLoading: isUserLoading } = useUserProfile(!!user); //@ts-ignore const userData: UserProfile | null = data?.user || null; // دریافت لیست محصولات سبد خرید از Redux const cartItems = useSelector((state: any) => state.cart.items); const uniqueProductCount = cartItems?.length || 0; useEffect(() => { setIsMounted(true); // منطق اسکرول هدر const handleScroll = () => { setIsScrolled(window.scrollY > 20); }; window.addEventListener("scroll", handleScroll); return () => window.removeEventListener("scroll", handleScroll); }, []); // مدیریت کلیک خارج از دراپ‌دون پروفایل useEffect(() => { const handleClickOutside = (event: MouseEvent) => { if (dropdownRef.current && !dropdownRef.current.contains(event.target as Node)) { setIsProfileDropdownOpen(false); } }; if (isProfileDropdownOpen) { document.addEventListener("mousedown", handleClickOutside); } return () => { document.removeEventListener("mousedown", handleClickOutside); }; }, [isProfileDropdownOpen]); // متد خروج از حساب کاربری const handleLogout = async () => { // بستن منوها setIsProfileDropdownOpen(false); setIsMobileMenuOpen(false); // نمایش پاپ‌آپ تاییدیه const result = await Swal.fire({ title: "آیا مطمئن هستید؟", text: "می‌خواهید از حساب کاربری خود خارج شوید؟", icon: "warning", showCancelButton: true, confirmButtonColor: "#ef4444", cancelButtonColor: "#9ca3af", confirmButtonText: "بله، خارج میشوم", cancelButtonText: "انصراف", reverseButtons: true, }); if (result.isConfirmed) { try { // ۱. پاک کردن توکن از کوکی (فراخوانی Server Action) await removeAuthCookie(); // ۲. پاک کردن کش اطلاعات کاربر از React Query و لوکال استوریج queryClient.removeQueries({ queryKey: ["userProfile"] }); localStorage.removeItem("user"); // ۳. رفرش کردن دیتای Next.js و انتقال به صفحه اصلی router.refresh(); router.push("/"); // نمایش پیام موفقیت Swal.fire({ title: "موفق", text: "با موفقیت از حساب کاربری خارج شدید.", icon: "success", timer: 1500, showConfirmButton: false, }); } catch (error) { Swal.fire({ title: "خطا", text: "مشکلی در خروج از حساب پیش آمد. لطفا دوباره تلاش کنید.", icon: "error", confirmButtonText: "متوجه شدم", }); } } }; // تعیین عبارتی که باید به کاربر نمایش داده شود const displayName = userData?.name || userData?.phone_number; // متغیری برای بررسی وضعیت کلی بارگذاری بخش کاربری const isProfileSectionLoading = !isMounted || isUserLoading; return (
{/* بخش راست: لوگو و منوی دسکتاپ */}
{/* منوی موبایل و لوگو */}
{/* logo */} SALONA.
{/* ناوبری دسکتاپ */}
{/* بخش چپ: آیکون‌های اکشن */}
{isMounted && uniqueProductCount > 0 && ( {uniqueProductCount} )} {/* بخش پروفایل کاربر */}
{isProfileSectionLoading ? (
) : userData ? (
{/* دراپ‌دون حساب کاربری */}
کاربر سالونا {displayName}
setIsProfileDropdownOpen(false)} > ثبت آدرس
setIsProfileDropdownOpen(false)} > پشتیبانی و تیکت‌ها
) : ( ورود | ثبت‌نام )}
{/* منوی موبایل */}
setIsMobileMenuOpen(false)} >
e.stopPropagation()} >
SALONA
{isProfileSectionLoading ? (
) : userData ? (
خوش آمدید، {displayName}
) : ( setIsMobileMenuOpen(false)} > ورود به حساب کاربری )}
{/* دکمه خروج در پایین منوی موبایل (چسبیده به پایین) */} {userData && (
)}
); };