menu: UI enhancements in desktop sizes

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

src/pages/product/components/ExtraGroups.tsx

@@ -4,7 +4,7 @@ import ProText from "components/ProText";
 import { Dispatch, SetStateAction } from "react";
 import { useTranslation } from "react-i18next";
 import { useAppSelector } from "redux/hooks";
-import { Extra4, TheExtrasGroup } from "utils/types/appTypes";
+import { TheExtrasGroup } from "utils/types/appTypes";
 import styles from "../product.module.css";
 
 export default function ExtraGroups({
@@ -89,7 +89,7 @@ export default function ExtraGroups({
 
           <div className={styles.productContainer}>
             <ProCheckboxGroups
-              options={group.extras.map((extra: Extra4) => ({
+              options={group.extras.map((extra: any) => ({
                 value: extra.id.toString(),
                 label: isRTL ? extra.name : extra.nameAR,
                 price: `+${extra.price}`,
@@ -99,7 +99,7 @@ export default function ExtraGroups({
                 // Check if the new selection would exceed the limit
                 if (values.length > group.limit) {
                   message.error(
-                    `You can only select up to ${group.limit} option${group.limit > 1 ? "s" : ""} from this group.`
+                    `You can only select up to ${group.limit} option${group.limit > 1 ? "s" : ""} from this group.`,
                   );
                   return;
                 }

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}
+        />
+      )}
     </>
   );
 }

src/pages/product/components/Variants.tsx

@@ -1,6 +1,7 @@
 import { Divider } from "antd";
 import ProRatioGroups from "components/ProRatioGroups/ProRatioGroups";
 import ProText from "components/ProText";
+import useBreakPoint from "hooks/useBreakPoint";
 import { Dispatch, SetStateAction, useMemo } from "react";
 import { useTranslation } from "react-i18next";
 import { useAppSelector } from "redux/hooks";
@@ -18,6 +19,7 @@ export default function Variants({
 }) {
   const { isRTL } = useAppSelector((state) => state.locale);
   const { t } = useTranslation();
+  const { isDesktop } = useBreakPoint();
 
   // Determine variant levels based on options array length
   const variantLevels = useMemo(() => {
@@ -108,7 +110,7 @@ export default function Variants({
     <>
       {variantsList?.length > 0 && variantLevels.length > 0 && (
         <>
-          <Divider style={{ margin: "0" }} />
+          {!isDesktop && <Divider style={{ margin: "0" }} />}
           <div>
             <div
               style={{