178 lines
6.2 KiB
TypeScript
178 lines
6.2 KiB
TypeScript
import { Button, Card, Divider, Form, Layout, Space } from "antd";
|
|
import { useGetOrderDetailsQuery } from "redux/api/others";
|
|
import { useAppSelector } from "redux/hooks";
|
|
import styles from "./OrderDetails.module.css";
|
|
import ProHeader from "components/ProHeader/ProHeader";
|
|
import { useTranslation } from "react-i18next";
|
|
import ProText from "components/ProText";
|
|
import useBreakPoint from "hooks/useBreakPoint";
|
|
import ImageWithFallback from "components/ImageWithFallback";
|
|
import { useParams } from "react-router-dom";
|
|
|
|
export default function OrderDetails() {
|
|
const { orderId } = useParams();
|
|
const { t } = useTranslation();
|
|
const { isRTL } = useAppSelector((state) => state.locale);
|
|
const { isMobile, isTablet } = useBreakPoint();
|
|
|
|
const { data: orderDetails } = useGetOrderDetailsQuery(
|
|
{
|
|
orderID: orderId || "",
|
|
restaurantID: localStorage.getItem("restaurantID") || "",
|
|
},
|
|
{
|
|
skip: !orderId,
|
|
},
|
|
);
|
|
|
|
const getMenuItemImageStyle = () => {
|
|
if (isMobile) {
|
|
return {
|
|
width: 115,
|
|
height: 96,
|
|
};
|
|
}
|
|
return {
|
|
width: 120,
|
|
height: 120,
|
|
};
|
|
};
|
|
|
|
return (
|
|
<Form layout="vertical">
|
|
<Layout>
|
|
<ProHeader>{t("order.yourOrder")}</ProHeader>
|
|
<Layout.Content className={styles.orderDetailsContainer}>
|
|
<Card className={styles.cartItem}>
|
|
{orderDetails?.orderItems.map((item: any, index: number) => (
|
|
<div key={index} style={{ position: "relative" }}>
|
|
<Space
|
|
size="middle"
|
|
style={{
|
|
display: "flex",
|
|
alignItems: "center",
|
|
justifyContent: "space-between",
|
|
height: "100%",
|
|
padding: 8,
|
|
}}
|
|
>
|
|
<Space orientation="vertical" size="small">
|
|
<div
|
|
style={{
|
|
position: "absolute",
|
|
top: 8,
|
|
[isRTL ? "right" : "left"]: 8,
|
|
}}
|
|
>
|
|
<ProText
|
|
style={{
|
|
margin: 0,
|
|
lineClamp: 1,
|
|
fontSize: isMobile ? 14 : isTablet ? 16 : 18,
|
|
fontWeight: 600,
|
|
}}
|
|
>
|
|
{item.name}
|
|
<span
|
|
style={{
|
|
fontWeight: 400,
|
|
}}
|
|
>
|
|
{/* {isRTL
|
|
? (item.variant as Variant)?.optionsAR?.[0]?.value
|
|
: (item.variant as Variant)?.options?.[0]?.value} */}
|
|
</span>
|
|
</ProText>
|
|
<br />
|
|
<ProText
|
|
type="secondary"
|
|
style={{
|
|
margin: 0,
|
|
lineClamp: 1,
|
|
padding: isMobile ? "3px 0" : isTablet ? 8 : 10,
|
|
fontSize: isMobile ? 14 : isTablet ? 18 : 20,
|
|
display: "-webkit-box",
|
|
WebkitBoxOrient: "vertical",
|
|
WebkitLineClamp: 1,
|
|
overflow: "hidden",
|
|
textOverflow: "ellipsis",
|
|
wordWrap: "break-word",
|
|
overflowWrap: "break-word",
|
|
lineHeight: "1.4",
|
|
maxHeight: isMobile
|
|
? "3em"
|
|
: isTablet
|
|
? "5em"
|
|
: "7em",
|
|
fontWeight: 500,
|
|
letterSpacing: "0.01em",
|
|
width: "55%",
|
|
}}
|
|
>
|
|
{item.description}
|
|
</ProText>
|
|
</div>
|
|
<div
|
|
style={{
|
|
position: "absolute",
|
|
bottom:
|
|
index !== orderDetails?.orderItems?.length - 1
|
|
? 20
|
|
: 7,
|
|
[isRTL ? "right" : "left"]: 8,
|
|
}}
|
|
>
|
|
<Button
|
|
shape="circle"
|
|
iconPlacement="start"
|
|
size="small"
|
|
className={styles.addButton}
|
|
style={{
|
|
background: "#F5F5F6",
|
|
width: 28,
|
|
height: 28,
|
|
border: "none",
|
|
}}
|
|
>
|
|
<ProText style={{ color: "#1F1C2E" }}>
|
|
{item.qty}{" "}
|
|
</ProText>
|
|
</Button>
|
|
</div>
|
|
</Space>
|
|
<div style={{ position: "relative" }}>
|
|
<ImageWithFallback
|
|
src={item.image}
|
|
alt={item.name}
|
|
className={`${styles.menuItemImage} responsive-image`}
|
|
{...getMenuItemImageStyle()}
|
|
fallbackSrc={
|
|
"https://fascano-space.s3.me-central-1.amazonaws.com/uploads/restorants/685a8fc884a8c_large.jpg"
|
|
}
|
|
/>
|
|
</div>
|
|
</Space>
|
|
|
|
{index !== orderDetails?.orderItems?.length - 1 && (
|
|
<Divider style={{ margin: "16px 0" }} />
|
|
)}
|
|
</div>
|
|
))}
|
|
</Card>
|
|
</Layout.Content>
|
|
|
|
<Layout.Footer className={styles.orderDetailsButtonContainer}>
|
|
<Button
|
|
type="primary"
|
|
shape="round"
|
|
className={styles.button}
|
|
onClick={() => {}}
|
|
>
|
|
{t("order.done")}
|
|
</Button>
|
|
</Layout.Footer>
|
|
</Layout>
|
|
</Form>
|
|
);
|
|
}
|