117 lines
3.6 KiB
JavaScript
117 lines
3.6 KiB
JavaScript
"use client";
|
|
|
|
import { useEffect, useState } from "react";
|
|
import { CUSTOMER_URL } from "./meshkee";
|
|
|
|
function CartIcon() {
|
|
return (
|
|
<svg viewBox="0 0 24 24" aria-hidden="true">
|
|
<path d="M3 4h2l2.2 11.2a2 2 0 0 0 2 1.6h7.6a2 2 0 0 0 2-1.5L21 7H6" />
|
|
<circle cx="10" cy="20" r="1.3" />
|
|
<circle cx="17" cy="20" r="1.3" />
|
|
</svg>
|
|
);
|
|
}
|
|
|
|
function UserIcon() {
|
|
return (
|
|
<svg viewBox="0 0 24 24" aria-hidden="true">
|
|
<circle cx="12" cy="8" r="4" />
|
|
<path d="M4 21c1.6-4.2 4.2-6.3 8-6.3s6.4 2.1 8 6.3" />
|
|
</svg>
|
|
);
|
|
}
|
|
|
|
export default function HeaderTools() {
|
|
const [cart, setCart] = useState([]);
|
|
const [user, setUser] = useState(null);
|
|
const [isOpen, setIsOpen] = useState(false);
|
|
|
|
useEffect(() => {
|
|
const loadCart = () => {
|
|
try {
|
|
setCart(JSON.parse(localStorage.getItem("asphp_cart") || "[]"));
|
|
} catch {
|
|
setCart([]);
|
|
}
|
|
};
|
|
|
|
const loadUser = async () => {
|
|
const token = localStorage.getItem("meshkee_token") || localStorage.getItem("asphp_token");
|
|
const savedUser = localStorage.getItem("meshkee_user");
|
|
if (savedUser) {
|
|
try {
|
|
setUser(JSON.parse(savedUser));
|
|
} catch {}
|
|
}
|
|
if (!token) return;
|
|
try {
|
|
const response = await fetch("/api/auth/me", { headers: { Authorization: `Bearer ${token}` } });
|
|
if (response.ok) {
|
|
const data = await response.json();
|
|
setUser(data.user || data);
|
|
}
|
|
} catch {}
|
|
};
|
|
|
|
loadCart();
|
|
loadUser();
|
|
window.addEventListener("asphp-cart-change", loadCart);
|
|
return () => window.removeEventListener("asphp-cart-change", loadCart);
|
|
}, []);
|
|
|
|
const count = cart.reduce((sum, item) => sum + Number(item.quantity || 1), 0);
|
|
const displayName = user?.firstName || user?.name || user?.fullName || user?.mobile || user?.cellNumber;
|
|
const isAdmin = user?.isAdmin || user?.role === "admin" || user?.type === "admin";
|
|
|
|
const logout = () => {
|
|
localStorage.removeItem("meshkee_token");
|
|
localStorage.removeItem("asphp_token");
|
|
localStorage.removeItem("meshkee_user");
|
|
setUser(null);
|
|
};
|
|
|
|
return (
|
|
<div className="header-tools">
|
|
{displayName ? (
|
|
<details className="user-menu">
|
|
<summary><UserIcon /> {displayName} عزیز</summary>
|
|
<div>
|
|
<a href={`${CUSTOMER_URL}/profile`}>پروفایل من</a>
|
|
{isAdmin ? <a href="https://business.asphp.ir">مدیریت وبسایت</a> : null}
|
|
<button type="button" onClick={logout}>خروج</button>
|
|
</div>
|
|
</details>
|
|
) : (
|
|
<a className="login user-login" href={CUSTOMER_URL} aria-label="ورود">
|
|
<UserIcon />
|
|
ورود
|
|
</a>
|
|
)}
|
|
|
|
<details className="cart-menu" open={isOpen} onToggle={(event) => setIsOpen(event.currentTarget.open)}>
|
|
<summary aria-label="سبد خرید">
|
|
<CartIcon />
|
|
{count > 0 ? <span className="cart-badge">{count}</span> : null}
|
|
</summary>
|
|
<div className="cart-popup">
|
|
<h3>سبد خرید</h3>
|
|
{cart.length ? (
|
|
<>
|
|
{cart.map((item) => (
|
|
<div className="cart-line" key={item.id}>
|
|
<span>{item.title}</span>
|
|
<strong>{item.quantity}</strong>
|
|
</div>
|
|
))}
|
|
<a className="cart-continue" href={`${CUSTOMER_URL}/cart`}>ادامه خرید</a>
|
|
</>
|
|
) : (
|
|
<p>سبد خرید شما خالی است.</p>
|
|
)}
|
|
</div>
|
|
</details>
|
|
</div>
|
|
);
|
|
}
|