You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 

383 lines
12 KiB

import React, { useEffect, useState } from "react";
import { Link, useNavigate, NavLink } from "react-router-dom";
import { connect } from "react-redux";
import { userProduct, userFavorite } from "../../redux/actions";
import location from "../../utils/location";
import _ from "lodash";
//components
import Drawer from "../Drawer";
import Search from "../Search";
import SearchResult from "./SearchResult";
import Loading from "../Loading";
//assets
import cartIcon from "./cart-blue.svg";
import searchIcon from "./dark-crimson-search-box.svg";
import logoIcon from "../../assets/icons/logo.svg";
import qrIcon from "../../assets/icons/qr-white.svg";
import qrBlueIcon from "../../assets/icons/qr-blue.svg";
import arIcon from "../../assets/icons/ar-white.svg";
import arBlueIcon from "../../assets/icons/ar-blue.svg";
import hamburgerIcon from "../../assets/icons/hamburger.svg";
import hamburgerBlueIcon from "../../assets/icons/hamburger-blue.svg";
import arrowBlueIcon from "../../assets/icons/arrow-right-blue.svg";
import arrowWhiteIcon from "../../assets/icons/arrow-left-white.svg";
import dotsMenuDarkIcon from "../../assets/icons/dots-menu-dark.svg";
import bookmarkDeactiveDarkIcon from "../../assets/icons/bookmark-deactive-dark.svg";
import bookmarkActiveDarkIcon from "../../assets/icons/bookmark-active-dark.svg";
import dotsMenuLightIcon from "../../assets/icons/dots-menu-light.svg";
import bookmarkDeactiveLightIcon from "../../assets/icons/bookmark-deactive-light.svg";
import bookmarkActiveLightIcon from "../../assets/icons/bookmark-active-light.svg";
function Navbar({
getCartProducts,
getUserFavorite,
cartProductsLength,
pages,
isDark,
isMobile,
user,
headerOptions,
addToFavorite,
deleteBookmark,
bookmarkLoading,
userFavoriteList,
language,
}) {
const navigation = useNavigate();
const { logo, hamburgerMenu, qr, shown, menu, title, back, bookmark } =
headerOptions;
const [overLayer, setOverLayer] = useState(false);
const [top, setTop] = useState(false);
const [search, setSearch] = useState(null);
const [drawerOpen, setDrawerOpen] = useState(false);
const isActiveBookmark = React.useMemo(() => {
return userFavoriteList?.find((object) =>
headerOptions?.productId
? object?.productId === headerOptions?.productId
: object?.contentId === headerOptions?.contentId
);
}, [headerOptions, userFavoriteList]);
useEffect(() => {
if (window.scrollY === 0) {
setTop(() => true);
}
if (isMobile) {
// getUserFavorite();
window.addEventListener("scroll", () => {
if (window.scrollY === 0) {
setTop(() => true);
} else {
setTop(() => false);
}
});
}
}, []);
useEffect(() => {
if (!isMobile && user) {
getCartProducts();
}
}, [user]);
return (
<div
className="z-50 flex fixed left-0 top-0 w-full"
style={{
backgroundColor: !top ? (isDark ? "#061B30" : "white") : "white",
}}
>
<div className="w-full lg:w-11/12 lg:mx-auto relative flex items-center justify-between py-3 px-4" style={{
backgroundColor: isDark ? "#061B30" : "white"
}}>
{/* desktop */}
<div className=" items-center hidden lg:flex">
<Link
to="/"
className="flex items-center text-2xl font-black text-green7B"
>
<img src={logoIcon} className="w-8 relative bottom-1 ml-1" alt="" />
{window.t("دانوین")}
</Link>
<ul className="flex list-none items-center relative top-0.5 mr-4">
{pages.map((page, index) => (
<li key={index}>
<NavLink
to={page.link}
className="text-tiny py-2 px-4 mx-4"
style={({ isActive }) => ({
color: isActive ? "rgb(19, 123, 79)" : "#202020",
fontWeight: isActive ? "700" : "200",
})}
>
{page.name}
</NavLink>
</li>
))}
</ul>
</div>
{logo && (
<Link
to="/"
className="lg:hidden absolute left-1/2 transform -translate-y-1/2 top-1/2 -translate-x-1/2"
>
<img src={logoIcon} className="w-6 h-8" />
</Link>
)}
{/* desktop */}
{/* <div className="flex items-center"></div> */}
<div className="flex lg:hidden relative">
{hamburgerMenu && (
<>
<span className="w-2.5 h-2.5 rounded-full bg-redFF1 absolute -left-1 -top-1 animate-bounce"></span>
<img
onClick={() => setDrawerOpen((prevState) => !prevState)}
src={isDark ? hamburgerIcon : hamburgerBlueIcon}
alt=""
className="w-7 h-7.5"
/>
</>
)}
{!title && back ? (
<img
src={isDark ? arrowWhiteIcon : arrowBlueIcon}
alt="back"
className={`w-6 ${isDark ? "transform rotate-180" : ""}`}
onClick={() => navigation(-1)}
/>
) : null}
{title && (
<strong className="text-green4F text-lg font-semibold dark:text-white">
{title}
</strong>
)}
</div>
<div className="flex items-center">
{overLayer && (
<div
className="z-30 w-screen h-full fixed top-0 right-0 backdrop-filter blur-sm bg-opacity-60 bg-gray-600"
onClick={() => setOverLayer(false)}
>
<div className="relative w-full h-full">
<div
className="flex flex-col w-full absolute left-1/2 top-16 transform -translate-x-1/2 z-50 rounded-md"
style={{ maxWidth: "calc(100vw / 3)" }}
onClick={(e) => e.stopPropagation()}
>
<Search onChange={(val) => setSearch(val)} />
{search && <SearchResult text={search} setText={setSearch} />}
</div>
</div>
</div>
)}
{qr && (
<>
<Link
to="/scan"
className={`flex lg:hidden rounded-sm p-1.5 ${
isDark ? "bg-blueC0 bg-opacity-10 ml-2" : " ml-3 shadow-sm"
}`}
style={{
border: `1px solid ${isDark ? "#D7E3FC20" : "#D7E3FC"}`,
}}
>
<img
src={isDark ? qrIcon : qrBlueIcon}
alt=""
className={_.join(["w-6"], " ")}
/>
</Link>
<Link
to="/ar"
className={`flex lg:hidden rounded-sm p-1.5 ${
isDark ? "bg-blueC0 bg-opacity-10" : "shadow-sm"
}`}
style={{
border: `1px solid ${isDark ? "#D7E3FC20" : "#D7E3FC"}`,
}}
>
<img
src={isDark ? arIcon : arBlueIcon}
alt=""
className={_.join(["w-6"], " ")}
/>
</Link>
</>
)}
{bookmark ? (
bookmarkLoading ? (
<Loading size={2} color="bg-green-500" />
) : isActiveBookmark ? (
<img
src={
isDark ? bookmarkActiveDarkIcon : bookmarkActiveLightIcon
}
alt="bookmark"
className="w-7 flex lg:hidden"
onClick={() =>
deleteBookmark({
id: userFavoriteList?.find(
(object) => object?.productId === headerOptions?.productId
)?.id,
})
}
/>
) : (
<img
src={
isDark ? bookmarkDeactiveDarkIcon : bookmarkDeactiveLightIcon
}
alt="bookmark"
className="w-7 flex lg:hidden"
onClick={() => addToFavorite({ [bookmark]: location.getId() })}
/>
)
) : null}
{menu && (
<img
src={isDark ? dotsMenuDarkIcon : dotsMenuLightIcon}
alt="menu"
className="w-7 mr-2 flex lg:hidden"
/>
)}
{title && back ? (
<img
src={isDark ? arrowWhiteIcon : arrowBlueIcon}
alt="back"
className={`w-6 flex lg:hidden transform ${
isDark ? "" : "-rotate-180"
}`}
onClick={() => navigation(-1)}
/>
) : null}
{/* desktop */}
<select
style={{ width: "100px" }}
className="hidden lg:flex items-center text-blueC0 border border-blueC0 px-1 rounded base py-1.5 ml-4 cursor-pointer"
>
{language.map((item, index) => (
<option
className="border border-blueC0 shadow-0 text-blueC0 text-base "
key={index}
>
{item.name}
</option>
))}
</select>
<img
src={searchIcon}
alt=""
className="w-7 ml-3 cursor-pointer lg:flex hidden"
onClick={() => setOverLayer(true)}
/>
{user && (
<div className="hidden lg:flex justify-end items-center gap-4">
<Link to="/cart" className="relative">
<img src={cartIcon} alt="" className="w-8" />
<span className="absolute -right-2 -top-0.5 w-4 p-2.5 h-4 flex justify-center items-center bg-green-700 bg-opacity-100 rounded-full text-white text-xs">
{cartProductsLength}
</span>
</Link>
{/* <img src={whiteCartIcon} alt="" className="w-5 h-5 ml-2" /> */}
{/* <img src={profileIcon} alt="" className="w-5 h-5" /> */}
</div>
)}
{!user ? (
<Link
to="/signup"
className="bg-blueC0 font-semibold text-white rounded-md px-4 py-3 text-sm mr-7 hover:bg-opacity-90 shadow-sm"
>
{window.t("ورود یا ثبت نام")}
</Link>
) : (
<Link
to="/dashboard"
className="hidden lg:flex bg-blueC0 font-semibold text-white rounded-md px-4 py-3 text-sm mr-7 hover:bg-opacity-90 shadow-sm"
>
{window.t("حساب کاربری")}
</Link>
)}
{/* desktop */}
</div>
</div>
<Drawer drawerOpen={drawerOpen} setDrawerOpen={setDrawerOpen} />
</div>
);
}
const mapStateToProps = (state) => ({
isDark: state.publicApi.isDark,
isMobile: state.publicApi.isMobile,
headerOptions: state.publicApi.headerOptions,
user: state.user.status,
cartProductsLength: state.userProduct.list?.filter(
(product) => product.condition < 2
)?.length,
bookmarkLoading: state.userFavorite.loading,
userFavoriteList: state.userFavorite.list,
});
const mapDispatchToProps = {
getCartProducts: userProduct.list,
addToFavorite: userFavorite.add,
deleteBookmark: userFavorite.del,
getUserFavorite: userFavorite.list
};
export default connect(mapStateToProps, mapDispatchToProps)(Navbar);
Navbar.defaultProps = {
pages: [
{
link: "/products",
name: window.t("فروشگاه"),
},
{
link: "/contact-us",
name: window.t("تماس با ما"),
},
{
link: "/about-us",
name: window.t("درباره دانوین"),
},
{
link: "/blogs",
name: window.t("مجله دانوین"),
},
],
logo: true,
hamburgerMenu: true,
qr: true,
productCategoryTextColor: "text-productPrice",
menuItemsColor: "text-productPrice",
border: "border",
topHeader: true,
bottomHeader: true,
menuItems: [
`${window.t("محصولات")}`,
`${window.t("دسته بندی")}`,
`${window.t("تماس با ما")}`,
`${window.t("درباره ما")}`,
`${window.t("پیگیری")}`,
`${window.t("وبلاگ")}`,
],
category: true,
searchBox: true,
// icons
loginBtn: true,
language: [{ name: "فارسی" }, { name: "english" }, { name: "العربیه" }],
};