291 lines
11 KiB
TypeScript
291 lines
11 KiB
TypeScript
import { StarOutlined } from "@ant-design/icons";
|
|
import { Badge, Button, Card } from "antd";
|
|
import ArabicPrice from "components/ArabicPrice";
|
|
import ImageWithFallback from "components/ImageWithFallback";
|
|
import { ItemDescriptionIcons } from "components/ItemDescriptionIcons/ItemDescriptionIcons";
|
|
import ProText from "components/ProText";
|
|
import ProTitle from "components/ProTitle";
|
|
import useBreakPoint from "hooks/useBreakPoint";
|
|
import { AddToCartButton } from "pages/menu/components/AddToCartButton/AddToCartButton.tsx";
|
|
import { ProductPreviewDialog } from "pages/menu/components/ProductPreviewDialog";
|
|
import { useState } from "react";
|
|
import { useTranslation } from "react-i18next";
|
|
import { useNavigate, useParams } from "react-router-dom";
|
|
import { useAppSelector } from "redux/hooks";
|
|
import { colors } from "ThemeConstants";
|
|
import { Product } from "utils/types/appTypes";
|
|
import styles from "./MenuList.module.css";
|
|
|
|
interface MenuListProps {
|
|
data:
|
|
| {
|
|
products: Product[];
|
|
categories: { id: number; name: string; image?: string }[];
|
|
}
|
|
| undefined;
|
|
categoryRefs: React.RefObject<{ [key: number]: HTMLDivElement | null }>;
|
|
}
|
|
|
|
export function MenuList({ data, categoryRefs }: MenuListProps) {
|
|
const { isRTL } = useAppSelector((state) => state.locale);
|
|
const products = data?.products;
|
|
const { isMobile, isTablet, isDesktop } = useBreakPoint();
|
|
const { items } = useAppSelector((state) => state.order);
|
|
const { subdomain } = useParams();
|
|
const navigate = useNavigate();
|
|
const { t } = useTranslation();
|
|
const { themeName } = useAppSelector((state) => state.theme);
|
|
|
|
// Dialog state
|
|
const [isDialogOpen, setIsDialogOpen] = useState(false);
|
|
|
|
// Handle product click - open dialog on desktop, navigate on mobile/tablet
|
|
const handleProductClick = (item: Product) => {
|
|
localStorage.setItem("product", JSON.stringify(item));
|
|
if (isDesktop) {
|
|
setIsDialogOpen(true);
|
|
} else {
|
|
navigate(`/${subdomain}/product/${item.id}`);
|
|
}
|
|
};
|
|
|
|
// Handle dialog close
|
|
const handleDialogClose = () => {
|
|
setIsDialogOpen(false);
|
|
};
|
|
|
|
// Show error state if data exists but has no products
|
|
if (data && (!data.products || data.products.length === 0)) {
|
|
return (
|
|
<div
|
|
className={styles.menuSections}
|
|
style={{ padding: "40px", textAlign: "center" }}
|
|
>
|
|
<ProText type="secondary">{t("menu.noMenuItemsAvailable")}</ProText>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
// Group products by category
|
|
const productsByCategory = products?.reduce(
|
|
(acc, product) => {
|
|
if (product.categoryId && !acc[product?.categoryId]) {
|
|
acc[product?.categoryId] = [];
|
|
}
|
|
acc[product?.categoryId || 0].push(product);
|
|
return acc;
|
|
},
|
|
{} as Record<number, Product[]>,
|
|
);
|
|
|
|
return (
|
|
<>
|
|
<div className={styles.menuSections}>
|
|
{data?.categories?.map((category) => {
|
|
const categoryProducts = productsByCategory?.[category.id] || [];
|
|
if (categoryProducts.length === 0) return null;
|
|
|
|
return (
|
|
<div
|
|
key={category.id}
|
|
ref={(el) => {
|
|
if (categoryRefs.current) {
|
|
categoryRefs.current[category.id] = el;
|
|
}
|
|
}}
|
|
style={{ marginBottom: "1rem" }}
|
|
>
|
|
<ProTitle
|
|
style={{
|
|
fontSize: "1.25rem",
|
|
fontWeight: "bold",
|
|
color: themeName === "dark" ? "#fff" : "#000044",
|
|
}}
|
|
level={5}
|
|
>
|
|
{isRTL ? category.name : category.name}
|
|
</ProTitle>
|
|
<div className={styles.menuItemsGrid}>
|
|
{categoryProducts.map((item: Product) => (
|
|
<div
|
|
key={item.id}
|
|
className={styles.productLink}
|
|
onClick={() => handleProductClick(item)}
|
|
>
|
|
<Card
|
|
key={item.id}
|
|
style={{
|
|
borderRadius: 8,
|
|
overflow: "hide",
|
|
width: "100%",
|
|
boxShadow: "none",
|
|
}}
|
|
styles={{
|
|
body: {
|
|
display: "flex",
|
|
flexDirection: "column",
|
|
justifyContent: "space-between",
|
|
padding: item.description
|
|
? "16px 16px 8px 16px"
|
|
: "16px 16px 24px 16px",
|
|
overflow: "hide",
|
|
boxShadow: "none",
|
|
},
|
|
}}
|
|
>
|
|
<div
|
|
style={{
|
|
display: "flex",
|
|
alignItems: "center",
|
|
justifyContent: "space-between",
|
|
height: "100%",
|
|
gap: isMobile ? 10 : 16,
|
|
}}
|
|
>
|
|
<div
|
|
style={{
|
|
display: "flex",
|
|
flexDirection: "column",
|
|
justifyContent: "space-between",
|
|
gap: "0.5rem",
|
|
}}
|
|
>
|
|
<ProText
|
|
style={{
|
|
margin: 0,
|
|
display: "inline-block",
|
|
fontSize: "1rem",
|
|
fontWeight: 600,
|
|
letterSpacing: "-0.01em",
|
|
lineHeight: 1.2,
|
|
color: themeName === "dark" ? "#fff" : "#000044",
|
|
}}
|
|
>
|
|
{isRTL ? item.name : item.nameOther}
|
|
</ProText>
|
|
{item.description && (
|
|
<ProText
|
|
type="secondary"
|
|
className={styles.itemDescription}
|
|
style={{
|
|
display: "-webkit-box",
|
|
WebkitBoxOrient: "vertical",
|
|
WebkitLineClamp: 2,
|
|
overflow: "hidden",
|
|
textOverflow: "ellipsis",
|
|
wordWrap: "break-word",
|
|
overflowWrap: "break-word",
|
|
lineHeight: "1.5rem",
|
|
maxHeight: "3em",
|
|
fontSize: "1rem",
|
|
letterSpacing: "0.01em",
|
|
}}
|
|
>
|
|
{item.description}
|
|
</ProText>
|
|
)}
|
|
|
|
<div>
|
|
{item.original_price !== item.price && (
|
|
<ArabicPrice
|
|
price={item.original_price}
|
|
strong
|
|
style={{
|
|
fontSize: "1rem",
|
|
fontWeight: 700,
|
|
color: colors.primary,
|
|
textDecoration: "line-through",
|
|
marginRight: isRTL ? 0 : 10,
|
|
marginLeft: isRTL ? 10 : 0,
|
|
}}
|
|
/>
|
|
)}
|
|
<ArabicPrice
|
|
price={item.price}
|
|
strong
|
|
style={{
|
|
fontSize: "1rem",
|
|
fontWeight: 700,
|
|
color: colors.primary,
|
|
}}
|
|
/>
|
|
</div>
|
|
|
|
<div
|
|
style={{
|
|
position: "relative",
|
|
...(isRTL ? { right: -5 } : {}),
|
|
}}
|
|
>
|
|
<ItemDescriptionIcons
|
|
className={styles.itemDescriptionIcons}
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div style={{ position: "relative" }}>
|
|
{item.isHasLoyalty && (
|
|
<Button
|
|
className={styles.loyaltyButton}
|
|
icon={<StarOutlined />}
|
|
style={{ width: 24, height: 24 }}
|
|
/>
|
|
)}
|
|
|
|
<ImageWithFallback
|
|
src={item.image_small || "/default.png"}
|
|
fallbackSrc="/default.png"
|
|
alt={item.name}
|
|
className={`${styles.popularMenuItemImage} ${
|
|
isMobile
|
|
? styles.popularMenuItemImageMobile
|
|
: isTablet
|
|
? styles.popularMenuItemImageTablet
|
|
: styles.popularMenuItemImageDesktop
|
|
}`}
|
|
width={90}
|
|
height={90}
|
|
/>
|
|
|
|
<AddToCartButton />
|
|
|
|
{items.some((i) => i.id === item.id) && (
|
|
<Badge
|
|
count={
|
|
items
|
|
.filter((i) => i.id === item.id)
|
|
.reduce((total, item) => total + item.quantity, 0)
|
|
}
|
|
className={
|
|
styles.cartBadge +
|
|
" " +
|
|
(isRTL
|
|
? styles.cartBadgeRTL
|
|
: styles.cartBadgeLTR)
|
|
}
|
|
style={{
|
|
backgroundColor: colors.primary,
|
|
}}
|
|
title={`${
|
|
items
|
|
.filter((i) => i.id === item.id)
|
|
.reduce((total, item) => total + item.quantity, 0)
|
|
} in cart`}
|
|
/>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</Card>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
|
|
{/* Product Preview Dialog for Desktop */}
|
|
<ProductPreviewDialog isOpen={isDialogOpen} onClose={handleDialogClose} />
|
|
</>
|
|
);
|
|
}
|