54 lines
1.6 KiB
TypeScript
54 lines
1.6 KiB
TypeScript
import { Button, Card, Form, Layout } from "antd";
|
|
import { useGetOrderDetailsQuery } from "redux/api/others";
|
|
import styles from "./OrderDetails.module.css";
|
|
import ProHeader from "components/ProHeader/ProHeader";
|
|
import { useTranslation } from "react-i18next";
|
|
|
|
import { useNavigate, useParams } from "react-router-dom";
|
|
import ProductChoicesCard from "components/productChoicesCard/ProductChoicesCard.tsx";
|
|
|
|
export default function OrderDetails() {
|
|
const { orderId } = useParams();
|
|
const { t } = useTranslation();
|
|
const navigate = useNavigate();
|
|
const { data: orderDetails } = useGetOrderDetailsQuery(
|
|
{
|
|
orderID: orderId || "",
|
|
restaurantID: localStorage.getItem("restaurantID") || "",
|
|
},
|
|
{
|
|
skip: !orderId,
|
|
},
|
|
);
|
|
|
|
return (
|
|
<Form layout="vertical">
|
|
<Layout>
|
|
<ProHeader>{t("order.yourOrder")}</ProHeader>
|
|
<Layout.Content className={styles.orderDetailsContainer}>
|
|
<Card className={styles.cartItem}>
|
|
{orderDetails?.orderItems.map((item, index) => (
|
|
<ProductChoicesCard
|
|
key={index}
|
|
product={{ ...item, type: "OrderItem" }}
|
|
addDividerAfter={index !== orderDetails?.orderItems.length - 1}
|
|
/>
|
|
))}
|
|
</Card>
|
|
</Layout.Content>
|
|
|
|
<Layout.Footer className={styles.orderDetailsButtonContainer}>
|
|
<Button
|
|
type="primary"
|
|
shape="round"
|
|
className={styles.button}
|
|
onClick={() => navigate(-1)}
|
|
>
|
|
{t("order.done")}
|
|
</Button>
|
|
</Layout.Footer>
|
|
</Layout>
|
|
</Form>
|
|
);
|
|
}
|