menu: UI enhancements in desktop sizes

- add product dialog
- enhance product page layout for desktop size

src/pages/product/components/ProductFooter.tsx

@@ -1,20 +1,18 @@
 import { ShoppingCartOutlined } from "@ant-design/icons";
-import { Button, Grid, message, Row } from "antd";
-import { BottomSheet } from "pages/cart/components/specialRequest/BottomSheet.tsx";
+import { Button, message, Row } from "antd";
 import {
   addItem,
   selectCart,
   updateSpecialRequest,
 } from "features/order/orderSlice";
-import { useState } from "react";
+import useBreakPoint from "hooks/useBreakPoint";
+import { BottomSheet } from "pages/cart/components/specialRequest/BottomSheet.tsx";
+import { useMemo, useState } from "react";
 import { useTranslation } from "react-i18next";
-import { useNavigate, useParams } from "react-router-dom";
 import { useAppDispatch, useAppSelector } from "redux/hooks";
 import { colors, ProBlack2 } from "ThemeConstants";
 import { Product } from "utils/types/appTypes";
 
-const { useBreakpoint } = Grid;
-
 export default function ProductFooter({
   product,
   isValid = true,
@@ -30,14 +28,25 @@ export default function ProductFooter({
   selectedGroups: string[];
   quantity: number;
 }) {
-  const { id } = useParams();
   const { t } = useTranslation();
   const dispatch = useAppDispatch();
   const { themeName } = useAppSelector((state) => state.theme);
   const { specialRequest } = useAppSelector(selectCart);
   const [isSpecialRequestOpen, setIsSpecialRequestOpen] = useState(false);
-  const { xs } = useBreakpoint();
-  const navigate = useNavigate();
+  const { isMobile, isDesktop } = useBreakPoint();
+
+  // Check if product has any customization options
+  const hasCustomizationOptions = useMemo(() => {
+    const hasVariants = product?.variants?.length > 0;
+    const hasExtras = product.extras.length > 0;
+    const hasExtraGroups = product?.theExtrasGroups?.length > 0;
+
+    return hasVariants || hasExtras || hasExtraGroups;
+  }, [
+    product?.variants?.length,
+    product.extras.length,
+    product?.theExtrasGroups?.length,
+  ]);
 
   const handleAddToCart = () => {
     if (!isValid) {
@@ -75,17 +84,27 @@ export default function ProductFooter({
     setIsSpecialRequestOpen(false);
   };
 
+  //
   return (
     <>
       <Row
         style={{
-          width: "100%",
           padding: "16px 16px 0",
-          position: "fixed",
-          bottom: 0,
-          left: 0,
+          ...(!isDesktop
+            ? {
+                position: "fixed",
+                bottom: 0,
+                left: 0,
+                width: "100%",
+                backgroundColor: themeName === "light" ? "white" : ProBlack2,
+              }
+            : {
+                position: "absolute",
+                bottom: 0,
+                left: 0,
+                width: hasCustomizationOptions ? "50%" : "100%",
+              }),
           height: "10vh",
-          backgroundColor: themeName === "light" ? "white" : ProBlack2,
         }}
       >
         <div style={{ width: "100%" }}>
@@ -103,8 +122,8 @@ export default function ProductFooter({
               disabled={!isValid}
               style={{
                 flex: 1,
-                height: xs ? "48px" : "48px",
-                fontSize: xs ? "1rem" : "16px",
+                height: isMobile ? "48px" : "48px",
+                fontSize: isMobile ? "1rem" : "16px",
                 transition: "all 0.3s ease",
                 width: "100%",
                 borderRadius: 888,
@@ -116,12 +135,12 @@ export default function ProductFooter({
                 cursor: isValid ? "pointer" : "not-allowed",
               }}
               onMouseEnter={(e) => {
-                if (!xs && isValid) {
+                if (!isMobile && isValid) {
                   e.currentTarget.style.transform = "translateY(-2px)";
                 }
               }}
               onMouseLeave={(e) => {
-                if (!xs) {
+                if (!isMobile) {
                   e.currentTarget.style.transform = "translateY(0)";
                 }
               }}
@@ -132,12 +151,14 @@ export default function ProductFooter({
         </div>
       </Row>
 
-      <BottomSheet
-        isOpen={isSpecialRequestOpen}
-        onClose={handleSpecialRequestClose}
-        initialValue={specialRequest}
-        onSave={handleSpecialRequestSave}
-      />
+      {!isDesktop && (
+        <BottomSheet
+          isOpen={isSpecialRequestOpen}
+          onClose={handleSpecialRequestClose}
+          initialValue={specialRequest}
+          onSave={handleSpecialRequestSave}
+        />
+      )}
     </>
   );
 }