state.locale);
- const { sm, md } = useBreakpoint();
- const isMobile = !sm;
- const isTablet = sm && !md;
- const { themeName } = useAppSelector((state) => state.theme);
- const dispatch = useAppDispatch();
- const cartItems = useAppSelector(selectCartItems);
- const getItemQuantity = (id: number | string) => {
- const item = cartItems.find((i) => i.id === id);
- return item ? item.quantity : 0;
- };
- const { t } = useTranslation();
-
- // Memoized handlers for better performance
- const handleQuickAdd = useCallback(
- (item: Product) => {
- dispatch(
- addItem({
- item: {
- id: item.id,
- name: item.name,
- price: item.price,
- image: item.image,
- description: item.description,
- variant: "None",
- extras: [],
- extrasgroup: [],
- },
- quantity: 1,
- })
- );
- },
- [dispatch]
- );
-
- const getMenuItemCardStyle = useCallback(
- (itemDescription: string) => {
- if (isMobile) {
- return {
- height: itemDescription?.length > 0 ? 160 : 130,
- padding: "12px 12px 12px 16px",
- };
- } else if (isTablet) {
- return {
- height: 160,
- padding: "16px",
- };
- } else {
- return {
- height: 180,
- padding: "20px",
- };
- }
- },
- [isMobile, isTablet]
- );
-
- const getMenuItemImageStyle = useCallback(() => {
- if (isMobile) {
- return {
- width: 90,
- height: 95,
- };
- } else if (isTablet) {
- return {
- width: 120,
- height: 120,
- };
- } else {
- return {
- width: 140,
- height: 140,
- };
- }
- }, [isMobile, isTablet]);
-
- return (
- <>
- {products?.map((item) => (
-
-
-
-
-
- {locale == "ar" ? item.nameOther : item.name}
-
-
- {item.description}
-
-
-
-
-
-
}
- style={{ width: 24, height: 24 }}
- onClick={(e) => {
- e.preventDefault();
- e.stopPropagation();
- console.log("heart");
- }}
- />
-
- }
- size={isMobile ? "small" : "middle"}
- onClick={(e) => {
- e.preventDefault();
- e.stopPropagation();
- handleQuickAdd(item);
- }}
- style={{
- position: "absolute",
- bottom: -10,
- [isRTL ? "right" : "left"]: isMobile ? "5%" : "15%",
- zIndex: 1,
- width: isMobile ? 82 : isTablet ? 90 : 100,
- height: isMobile ? 32 : isTablet ? 40 : 44,
- fontSize: isMobile ? "1rem" : isTablet ? 16 : 18,
- fontWeight: 600,
- border: 0,
- color: themeName === "light" ? "#333333" : "#FFFFFF",
- boxShadow:
- themeName === "light"
- ? "0 2px 0 rgba(0,0,0,0.02)"
- : "0 2px 0 #6b6b6b",
- }}
- >
- {t("common.add")}
-
- {/* Cart quantity badge - shows current quantity in cart */}
- {getItemQuantity(item.id) > 0 && (
-
- )}
-
-
-
- ))}
-
- );
-}
diff --git a/src/pages/menu/components/SearchMenu/SearchMenu.tsx b/src/pages/menu/components/SearchMenu/SearchMenu.tsx
new file mode 100644
index 0000000..d69aeb1
--- /dev/null
+++ b/src/pages/menu/components/SearchMenu/SearchMenu.tsx
@@ -0,0 +1,207 @@
+import { Badge, 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 useBreakPoint from "hooks/useBreakPoint";
+import { AddToCartButton } from "pages/menu/components/AddToCartButton/AddToCartButton.tsx";
+import { useTranslation } from "react-i18next";
+import { useNavigate } from "react-router-dom";
+import { useAppSelector } from "redux/hooks";
+import { colors } from "ThemeConstants";
+import { Product } from "utils/types/appTypes";
+import styles from "../MenuList/MenuList.module.css";
+
+interface MenuListProps {
+ products: Product[];
+}
+
+export function SearchMenu({ products }: MenuListProps) {
+ const { isRTL } = useAppSelector((state) => state.locale);
+ const { isMobile, isTablet } = useBreakPoint();
+ const { items } = useAppSelector((state) => state.order);
+ const restaurantName = localStorage.getItem("restaurantName");
+ const navigate = useNavigate();
+ const { t } = useTranslation();
+ const { themeName } = useAppSelector((state) => state.theme);
+
+ // Show error state if data exists but has no products
+ if (products && (!products || products.length === 0)) {
+ return (
+
+
{t("menu.noMenuItemsAvailable")}
+
+ );
+ }
+
+ return (
+ <>
+
+
+ {products.map((item: Product) => (
+
{
+ localStorage.setItem("product", JSON.stringify(item));
+ navigate(`/${restaurantName}/product/${item.id}`);
+ }}
+ >
+
+
+
+
+ {isRTL ? item.name : item.nameOther}
+
+ {item.description && (
+
+ {item.description}
+
+ )}
+
+
+ {item.original_price !== item.price && (
+
+ )}
+
+
+
+
+
+
+
+
+
+
+
+
+ {items.find((i) => i.id === item.id) && (
+
i.id === item.id)?.quantity}
+ className={
+ styles.cartBadge +
+ " " +
+ (isRTL ? styles.cartBadgeRTL : styles.cartBadgeLTR)
+ }
+ style={{
+ backgroundColor: colors.primary,
+ }}
+ title={`${
+ items.find((i) => i.id === item.id)?.quantity
+ } in cart`}
+ />
+ )}
+
+
+
+ ))}
+
+
+
+ );
+}
diff --git a/src/pages/search/page.tsx b/src/pages/search/page.tsx
index 5152092..4c1f179 100644
--- a/src/pages/search/page.tsx
+++ b/src/pages/search/page.tsx
@@ -4,13 +4,15 @@ import SearchIcon from "components/Icons/SearchIcon";
import LoadingSpinner from "components/LoadingSpinner";
import ProHeader from "components/ProHeader/ProHeader";
import ProText from "components/ProText";
+import useBreakPoint from "hooks/useBreakPoint";
+import { CartButton } from "pages/menu/components/CartButton/CartButton";
+import { SearchMenu } from "pages/menu/components/SearchMenu/SearchMenu";
import { useCallback, useEffect, useState } from "react";
import { useTranslation } from "react-i18next";
import { Link, useParams, useSearchParams } from "react-router-dom";
import { useGetMenuQuery } from "redux/api/others";
import { useAppSelector } from "redux/hooks";
import { Product } from "utils/types/appTypes";
-import { ProductCard } from "../menu/components/ProductCard/ProductCard";
import styles from "./search.module.css";
export default function SearchPage() {
@@ -22,6 +24,7 @@ export default function SearchPage() {
const [searchResults, setSearchResults] = useState
([]);
const [isSearching, setIsSearching] = useState(false);
const restaurantID = localStorage.getItem("restaurantID");
+ const { isDesktop } = useBreakPoint();
const { data: menuData } = useGetMenuQuery(restaurantID as string, {
skip: !restaurantID,
@@ -52,7 +55,7 @@ export default function SearchPage() {
setIsSearching(false);
}, 300);
},
- [menuData]
+ [menuData],
);
// Handle input change and update search params
@@ -67,7 +70,7 @@ export default function SearchPage() {
setSearchParams({});
}
},
- [setSearchParams]
+ [setSearchParams],
);
// Debounced search effect
@@ -93,7 +96,6 @@ export default function SearchPage() {