117 lines
3.3 KiB
TypeScript
117 lines
3.3 KiB
TypeScript
import React, { useState, ReactNode, useEffect } from "react";
|
|
import type { DrawerProps } from "antd";
|
|
import { Badge, Button, Drawer, Space } from "antd";
|
|
import CardItem from "../Cart/CardItem";
|
|
import { BsArrowLeft, BsCart } from "react-icons/bs";
|
|
import { Link } from "react-router-dom";
|
|
import { useTranslation } from "react-i18next";
|
|
import { useCartState } from "../../state/CartState";
|
|
import { Currency } from "../../Layout/app/Const";
|
|
import useAuthState from "../../state/AuthState";
|
|
import { LocalStorageEnum } from "../../api/utils/LocalStorage";
|
|
import { useAddOrder } from "../../api/order";
|
|
import { toast } from "react-toastify";
|
|
import { BiBasket } from "react-icons/bi";
|
|
|
|
const CartWithDrawer = () => {
|
|
const [open, setOpen] = useState(false);
|
|
const [placement, setPlacement] = useState<DrawerProps["placement"]>("right");
|
|
const { t } = useTranslation();
|
|
const { Cart, calculateTotalPrice, calculateTotalQuantity, removeCart } =
|
|
useCartState();
|
|
const { user ,isAuthenticated} = useAuthState();
|
|
const { mutate, isLoading, isSuccess } = useAddOrder();
|
|
const products = Cart?.map((item: any) => ({
|
|
quantity: item?.quantity,
|
|
id: item?.id,
|
|
}));
|
|
|
|
const addOrder = () => {
|
|
if (!isAuthenticated) {
|
|
toast.error("sorry you need to be authenticated");
|
|
return;
|
|
}
|
|
mutate({
|
|
email: user?.email,
|
|
products: products,
|
|
form: ["adding orders"],
|
|
});
|
|
};
|
|
|
|
useEffect(() => {
|
|
if (isSuccess) {
|
|
|
|
removeCart();
|
|
toast.success("order added success");
|
|
setOpen(false);
|
|
}
|
|
}, [isSuccess]);
|
|
|
|
return (
|
|
<>
|
|
<Space>
|
|
<Badge className="Badge_Button" count={calculateTotalQuantity()}>
|
|
<div onClick={() => setOpen(true)} className="icon_navbar">
|
|
<BiBasket />
|
|
</div>
|
|
</Badge>
|
|
</Space>
|
|
|
|
<Drawer
|
|
title={""}
|
|
placement={placement}
|
|
closable={false}
|
|
onClose={() => setOpen(false)}
|
|
open={open}
|
|
key={placement}
|
|
width={450}
|
|
style={{maxHeight:"60%", minHeight:"500px"}}
|
|
>
|
|
<div className="cart_first_section">
|
|
<span>{t("Cart")}</span>
|
|
<span onClick={() => setOpen(false)}>
|
|
<BsArrowLeft /> {t("Back To Shopping")}
|
|
</span>
|
|
</div>
|
|
|
|
<div className="Drawer_Body">
|
|
<div className="Card_Items">
|
|
{Cart.map((item: any, index: number) => (
|
|
<CardItem key={index} data={item} />
|
|
))}
|
|
</div>
|
|
|
|
|
|
{Cart?.length > 0 ? (
|
|
<div className="ViewCart_Button">
|
|
<p>
|
|
{t("Grand Total")}
|
|
<br />
|
|
<span>
|
|
{" "}
|
|
{calculateTotalPrice()} {Currency}{" "}
|
|
</span>
|
|
</p>
|
|
<Button
|
|
className="cart_checkout_button"
|
|
onClick={() => addOrder()}
|
|
type="primary"
|
|
block
|
|
>
|
|
{t("Checkout")}
|
|
</Button>
|
|
</div>
|
|
) : (
|
|
<div className="EmptyCard">
|
|
<img src="/Cart/empty_card.gif" alt="" />
|
|
<p>{t('You have not placed any orders yet')}</p>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</Drawer>
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default CartWithDrawer;
|