Files
web-menu-react-version-/src/pages/checkout/components/BriefMenuCard.tsx

67 lines
2.0 KiB
TypeScript

import NextIcon from "components/Icons/NextIcon";
import InvoiceIcon from "components/Icons/order/InvoiceIcon";
import ProInputCard from "components/ProInputCard/ProInputCard.tsx";
import ProText from "components/ProText";
import { useTranslation } from "react-i18next";
import { useAppSelector } from "redux/hooks";
import { selectCart } from "features/order/orderSlice";
import { useNavigate, useParams } from "react-router-dom";
import { useGetOrderDetailsQuery } from "redux/api/others";
export default function BriefMenuCard() {
const { t } = useTranslation();
const { items } = useAppSelector(selectCart);
const { subdomain, orderId } = useParams();
const navigate = useNavigate();
const { data: orderDetails } = useGetOrderDetailsQuery(
{
orderID: orderId || "",
restaurantID: localStorage.getItem("restaurantID") || "",
},
{
skip: !orderId,
// return it t0 60000 after finish testing
},
);
const totalItems = items.length || orderDetails?.orderItems.length;
return (
<>
<ProInputCard
title={t("checkout.itemsSummary")}
dividerStyle={{ margin: "5px 0 0 0" }}
>
<div
style={{
display: "flex",
flexDirection: "row",
justifyContent: "space-between",
padding: "16px 0",
}}
onClick={() => {
navigate(`/${subdomain}/cart`);
}}
>
<ProText
style={{
fontWeight: 400,
fontStyle: "Regular",
fontSize: 12,
lineHeight: "140%",
letterSpacing: "0%",
color: "#777580",
cursor: "pointer",
}}
>
<span style={{ marginRight: 5, position: "relative", top: 3.5 }}>
<InvoiceIcon />
</span>
{t("checkout.viewOrder")} ( {totalItems} {t("cart.items")} )
</ProText>
<NextIcon />
</div>
</ProInputCard>
</>
);
}