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

src/pages/product/page.tsx

@@ -25,7 +25,6 @@ export default function ProductDetailPage({
   onClose?: () => void;
 }) {
   const { productId } = useParams();
-
   const { isRTL } = useAppSelector((state) => state.locale);
   const { restaurant } = useAppSelector((state) => state.order);
   const { isDesktop, isTablet } = useBreakPoint();
@@ -33,6 +32,14 @@ export default function ProductDetailPage({
   const [viewportHeight, setViewportHeight] = useState<number>(
     typeof window !== "undefined" ? window.innerHeight : 0,
   );
+  const isBottomSheetView = useMemo(() => {
+    return window.location.href.includes("menu");
+  }, []);
+
+  const currenctProductId = useMemo(() => {
+    // in case the prduct viewing from the bottom sheet, the product id is not passed in the url
+    return productId || localStorage.getItem("productId");
+  }, [localStorage.getItem("productId")]);
 
   // Update viewport height when browser UI changes (mobile address bar, etc.)
   useEffect(() => {
@@ -55,7 +62,10 @@ export default function ProductDetailPage({
       window.removeEventListener("resize", updateViewportHeight);
       window.removeEventListener("orientationchange", updateViewportHeight);
       if (window.visualViewport) {
-        window.visualViewport.removeEventListener("resize", updateViewportHeight);
+        window.visualViewport.removeEventListener(
+          "resize",
+          updateViewportHeight,
+        );
       }
     };
   }, []);
@@ -71,14 +81,15 @@ export default function ProductDetailPage({
     // because in desktop we open the product dialog from the menu list
     // and the product id is not passed in the url
     const productIdLocalStorage = localStorage.getItem("productId");
-    if (!menuData?.products || (!productId && !productIdLocalStorage))
+    if (!menuData?.products || (!currenctProductId && !productIdLocalStorage))
       return null;
 
     // Find the product with matching IDs
     return menuData.products.find(
-      (p: Product) => p.id.toString() === (productId || productIdLocalStorage),
+      (p: Product) =>
+        p.id.toString() === (currenctProductId || productIdLocalStorage),
     );
-  }, [menuData, productId]);
+  }, [menuData, currenctProductId]);
 
   // State for variant selections
   const [selectedVariants, setSelectedVariants] = useState<
@@ -205,14 +216,15 @@ export default function ProductDetailPage({
   return (
     <div
       style={{
-        height: viewportHeight > 0 
-          ? `${viewportHeight - 195}px` 
-          : "calc(100dvh - 195px)",
+        height:
+          viewportHeight > 0
+            ? `${viewportHeight - 195}px`
+            : "calc(100dvh - 195px)",
         overflow: "auto",
         scrollbarWidth: "none",
       }}
     >
-      {!isDesktop && (
+      {!isDesktop && !isBottomSheetView && (
         <div className={styles.backButtonContainer}>
           <BackButton />
         </div>
@@ -371,6 +383,7 @@ export default function ProductDetailPage({
             selectedGroups={selectedExtrasByGroup}
             quantity={quantity}
             setQuantity={(quantity: number) => setQuantity(quantity)}
+            onClose={onClose}
           />
         )}
       </div>