swipe extra with group of extra & don't show the global extra if we have variants

src/pages/product/page.tsx

@@ -10,6 +10,8 @@ import ArabicPrice from "components/ArabicPrice";
 import useBreakPoint from "hooks/useBreakPoint";
 import ExtraGroupsContainer from "pages/product/components/ExtraGroupsContainer.tsx";
 import { useCallback, useMemo, useState } from "react";
+import { useParams } from "react-router-dom";
+import { useGetMenuQuery } from "redux/api/others.ts";
 import { colors } from "ThemeConstants";
 import { Extra, Product } from "utils/types/appTypes";
 import BackButton from "../menu/components/BackButton";
@@ -17,8 +19,6 @@ import ExtraComponent from "./components/Extra";
 import ProductFooter from "./components/ProductFooter";
 import Variants from "./components/Variants";
 import styles from "./product.module.css";
-import { useParams } from "react-router-dom";
-import { useGetMenuQuery } from "redux/api/others.ts";
 
 export default function ProductDetailPage({
   onClose,
@@ -120,16 +120,12 @@ export default function ProductDetailPage({
 
   const getExtras = useCallback(() => {
     const finalSelectedVariant = getFinalSelectedVariant();
-    if (finalSelectedVariant) {
-      const variant = product?.variants?.find(
-        (variant) => variant.id === finalSelectedVariant.id,
-      );
-      if (variant?.extras?.length && variant.extras.length > 0) {
-        return variant.extras;
-      }
-    }
-    return product?.extras;
-  }, [product?.variants, product?.extras, getFinalSelectedVariant]);
+    if (!finalSelectedVariant) return [];
+    const selectedVariant = product?.variants?.find(
+      (variant) => variant.id === finalSelectedVariant.id,
+    );
+    return selectedVariant?.extras || [];
+  }, [product?.variants, getFinalSelectedVariant]);
 
   // Validation function to check if all required selections are made
   const validateRequiredSelections = () => {
@@ -316,14 +312,6 @@ export default function ProductDetailPage({
                   />
                 )}
 
-                {getExtras()?.length > 0 && (
-                  <ExtraComponent
-                    extrasList={getExtras()}
-                    selectedExtras={selectedExtras}
-                    setSelectedExtras={setSelectedExtras}
-                  />
-                )}
-
                 {product.theExtrasGroups.length > 0 && (
                   <ExtraGroupsContainer
                     groupsList={product.theExtrasGroups}
@@ -331,6 +319,14 @@ export default function ProductDetailPage({
                     setSelectedExtrasByGroup={setSelectedExtrasByGroup}
                   />
                 )}
+
+                {getExtras()?.length > 0 && (
+                  <ExtraComponent
+                    extrasList={getExtras()}
+                    selectedExtras={selectedExtras}
+                    setSelectedExtras={setSelectedExtras}
+                  />
+                )}
               </Space>
             </div>
           )}