menu: on click on prduct open details as BS, also add redirect button to detials page if user click on redirect button

src/pages/menu/components/AddToCartButton/AddToCartButton.tsx

@@ -85,10 +85,6 @@ export function AddToCartButton({ item }: { item: Product }) {
       message.warning(t("menu.restaurantIsClosed"));
       return;
     }
-    if (restaurant && !restaurant.isOpened) {
-      message.warning(t("menu.restaurantIsClosed"));
-      return;
-    }
 
     if (basicCartItem && basicCartItem.uniqueId) {
       if (basicCartItem.quantity > 1) {

src/pages/menu/components/BackButton.tsx

@@ -1,6 +1,7 @@
 import { Button } from "antd";
 import BackIcon from "components/Icons/BackIcon";
-
+import NextIcon from "components/Icons/NextIcon";
+import { useAppSelector } from "redux/hooks";
 
 interface BackButtonProps {
   navigateBack?: boolean; // true = use router.back(), false = just clear state
@@ -10,6 +11,7 @@ export default function BackButton({ navigateBack = true }: BackButtonProps) {
   const handleBack = () => {
     if (navigateBack) window.history.back();
   };
+  const { isRTL } = useAppSelector((state) => state.locale);
 
   return (
     <Button
@@ -23,8 +25,14 @@ export default function BackButton({ navigateBack = true }: BackButtonProps) {
         borderRadius: "50%",
       }}
       icon={
-        <div style={{ position: "relative", top: 2.5, right: 1 }}>
-          <BackIcon />
+        <div
+          style={{
+            position: "relative",
+            top: 2.5,
+            [isRTL ? "left" : "right"]: 1,
+          }}
+        >
+          {isRTL ? <NextIcon /> : <BackIcon />}
         </div>
       }
       onClick={handleBack}

src/pages/menu/components/MenuList/MenuList.tsx

@@ -6,6 +6,8 @@ import { useAppSelector } from "redux/hooks";
 import { Product } from "utils/types/appTypes";
 import styles from "./MenuList.module.css";
 import ProductCard from "pages/menu/components/MenuList/ProductCard.tsx";
+import { ProductBottomSheet } from "pages/product/components/ProductBottomSheet";
+import { useState } from "react";
 
 interface MenuListProps {
   data:
@@ -20,6 +22,7 @@ interface MenuListProps {
 export function MenuList({ data, categoryRefs }: MenuListProps) {
   const { isRTL } = useAppSelector((state) => state.locale);
   const products = data?.products;
+  const [isBottomSheetOpen, setIsBottomSheetOpen] = useState(false);
 
   const { t } = useTranslation();
   const { themeName } = useAppSelector((state) => state.theme);
@@ -80,12 +83,20 @@ export function MenuList({ data, categoryRefs }: MenuListProps) {
               </ProTitle>
               <div className={styles.menuItemsGrid}>
                 {categoryProducts.map((item: Product) => (
-                  <ProductCard item={item} key={item.id} />
+                  <ProductCard
+                    item={item}
+                    key={item.id}
+                    setIsBottomSheetOpen={setIsBottomSheetOpen}
+                  />
                 ))}
               </div>
             </div>
           );
         })}
+        <ProductBottomSheet
+          isOpen={isBottomSheetOpen}
+          onClose={() => setIsBottomSheetOpen(false)}
+        />
       </div>
     </>
   );

src/pages/menu/components/MenuList/ProductCard.tsx

@@ -11,24 +11,25 @@ import { useAppSelector } from "redux/hooks.ts";
 import { ProductPreviewDialog } from "pages/menu/components/ProductPreviewDialog";
 import { useState } from "react";
 import { AddToCartButton } from "../AddToCartButton/AddToCartButton";
-import { useNavigate, useParams } from "react-router-dom";
 import { useTranslation } from "react-i18next";
 
 type Props = {
   item: Product;
+  setIsBottomSheetOpen: (isOpen: boolean) => void;
 };
-export default function ProductCard({ item }: Props) {
+export default function ProductCard({ item, setIsBottomSheetOpen }: Props) {
   const { isRTL } = useAppSelector((state) => state.locale);
   const { isMobile, isTablet, isDesktop } = useBreakPoint();
   const { items } = useAppSelector((state) => state.order);
   const [isDialogOpen, setIsDialogOpen] = useState(false);
-  const navigate = useNavigate();
-  const { subdomain } = useParams();
+  // const navigate = useNavigate();
+  // const { subdomain } = useParams();
   const { t } = useTranslation();
 
   // Handle dialog close
   const handleDialogClose = () => {
     setIsDialogOpen(false);
+    setIsBottomSheetOpen(false);
   };
 
   // Handle product click - open dialog on desktop, navigate on mobile/tablet
@@ -36,9 +37,11 @@ export default function ProductCard({ item }: Props) {
     localStorage.setItem("productId", item.id.toString());
     if (isDesktop) {
       setIsDialogOpen(true);
-    } else {
-      navigate(`/${subdomain}/product/${item.id}`);
     }
+    setIsBottomSheetOpen(true);
+    //  else {
+    //   navigate(`/${subdomain}/product/${item.id}`);
+    // }
   };
 
   return (

src/pages/menu/menu.module.css

@@ -45,10 +45,9 @@
   gap: 5px;
 }
 
-
 .closeButton {
-  background: #DD41434d;
-  color: #DD4143;
+  background: #dd41434d;
+  color: #dd4143;
   width: 62px !important;
   height: 20px !important;
   border: none;
@@ -503,11 +502,6 @@
   color: #fff !important;
 }
 
-.searchButtonContainer {
-  right: 20px;
-  border-radius: 50%;
-}
-
 .searchButton {
   width: 32px !important;
   height: 32px !important;
@@ -575,19 +569,24 @@
   color: #666;
 }
 
+.searchButtonContainer {
+  right: 20px;
+  border-radius: 50%;
+}
+
 /* RTL support for back button */
-.backButtonContainer[dir="rtl"] {
+:global(.ant-app-rtl) .backButtonContainer {
   left: auto;
   right: 20px;
 }
 
 /* RTL support for search button */
-.searchButtonContainer[dir="rtl"] {
-  right: auto;
+:global(.ant-app-rtl) .searchButtonContainer {
   left: 20px;
+  right: auto;
 }
 
-:global(.rtl) .dineInIcon {
+:global(.ant-app-rtl) .dineInIcon {
   margin-bottom: 1px;
 }
 

src/pages/menu/page.tsx

@@ -165,7 +165,7 @@ function MenuPage() {
           </div>
 
           <div className={`${styles.pageContainer}`}>
-            <Space direction="vertical" style={{ width: "100%" }}>
+            <Space orientation="vertical" style={{ width: "100%" }}>
               <div>
                 {restaurant?.loyalty_stamps &&
                   restaurant?.is_loyalty_enabled && <LoyaltyCard />}