Notes

import React,{useState} from 'react';
import { useNavigate } from 'react-router-dom';
import { useMsal } from "@azure/msal-react";
import { useIsAuthenticated } from "@azure/msal-react";
import './Header.css';
import logo from '../../Assets/Icon/QBELogo.svg';
import cart from '../../Assets/Icon/ShoppingCartLight.svg';
import user from '../../Assets/Icon/UserAccountCircleLight.svg';
//import { IoClose, IoMenu } from "react-icons/io5";
import { Typography } from '@qbe/ui-core';
import EmptyCartModel from '../../Pages/Cart/EmptyCartModel';
import CartModel from '../../Pages/Cart/CartModel';
import Twoitemcart from '../../Pages/Cart/Twoitemcart';

const Header = ({ cartItems }) => {
const [isPopupOpen, setPopupOpen] = useState(false);
const [isEmptyPopupOpen, setEmptyPopupOpen] = useState(false);
const [isTwoitemcartOpen, setTwoitemcartOpen] = useState(false);

const isAuthenthicated = useIsAuthenticated();
const navigate = useNavigate();
const { instance } = useMsal();
const onClickLogout = () => {
instance.logoutPopup().then(() => {
navigate("/")
});

}

const handleCartClick = () => {



// Open CartModel when items in the cart
if (cartItems && cartItems.length > 0) {
setPopupOpen(true);
} else {

// Open EmptyCartModel when the cart empty
setEmptyPopupOpen(true);
}
};

// Handlers to close the popups
const handleClosePopup = () => {
setPopupOpen(false);
};

const handleEmptyClosePopup = () => {
setEmptyPopupOpen(false);
};

const handleonadditem = () => {
setPopupOpen(true);
setEmptyPopupOpen(false);
};
const handleOpenTwoitemcart = () => {
setTwoitemcartOpen(true);
setPopupOpen(false);
};
const handleCloseTwoitemcart = () => {
setTwoitemcartOpen(false);
}


return (
<>
{isAuthenthicated &&
<>
<header className="header">
<div>
<img src={logo} alt="Company Logo" className="logo-img" />
</div>
<div className='icon-container'>
{isAuthenthicated && <Typography onClick={onClickLogout} variant="body1" className='menu-container'
>Logout</Typography>}
<Typography variant="body1" className='menu-container'
>Help & Support</Typography>
<vr className="vr-line-dashboard" />
<img src={cart} alt="Cart"
className="cart-img"
onClick={handleCartClick}
/>
<vr className="vr-line-dashboard" />
<img src={user} alt="Company Logo" className="user-img" />
</div>
</header>
<EmptyCartModel
isOpen={isEmptyPopupOpen}
onClose={handleEmptyClosePopup}
onAddItem={handleonadditem}
/>
<CartModel
isOpen={isPopupOpen}
onClose={handleClosePopup}
onAddItem={handleOpenTwoitemcart}
/>
<Twoitemcart
isOpen={isTwoitemcartOpen}
onClose={handleCloseTwoitemcart}
/>
</>

}
{
!isAuthenthicated && null
}
</>
);
}

export default Header