add extra group price

src/pages/product/page.tsx

@@ -10,9 +10,9 @@ import ArabicPrice from "components/ArabicPrice";
 import useBreakPoint from "hooks/useBreakPoint";
 import { useCallback, useMemo, useState } from "react";
 import { colors } from "ThemeConstants";
-import { Product, Extra as ExtraType } from "utils/types/appTypes";
+import { Extra, Product } from "utils/types/appTypes";
 import BackButton from "../menu/components/BackButton";
-import Extra from "./components/Extra";
+import ExtraComponent from "./components/Extra";
 import ExtraGroups from "./components/ExtraGroups";
 import ProductFooter from "./components/ProductFooter";
 import Variants from "./components/Variants";
@@ -37,12 +37,12 @@ export default function ProductDetailPage({
   >({});
 
   // State for selected extras
-  const [selectedExtras, setSelectedExtras] = useState<ExtraType[]>([]);
+  const [selectedExtras, setSelectedExtras] = useState<Extra[]>([]);
 
   // State for selected extras by group
-  const [selectedExtrasByGroup, setSelectedExtrasByGroup] = useState<
-    Record<number, string[]>
-  >({});
+  const [selectedExtrasByGroup, setSelectedExtrasByGroup] = useState<Extra[]>(
+    [],
+  );
 
   // Determine variant levels based on options array length
   const variantLevels = useMemo(() => {
@@ -126,7 +126,9 @@ export default function ProductDetailPage({
     const allRequiredExtraGroupsSatisfied = product.theExtrasGroups.every(
       (group) => {
         if (group.force_limit_selection === 1) {
-          const selectedCount = selectedExtrasByGroup[group.id]?.length || 0;
+          const selectedCount =
+            selectedExtrasByGroup.filter((extra) => extra.id === group.id)
+              .length || 0;
           return selectedCount === group.limit;
         }
         return true; // Optional groups are always satisfied
@@ -277,7 +279,7 @@ export default function ProductDetailPage({
                 isValid={isValid}
                 selectedVariant={getFinalSelectedVariant()}
                 selectedExtras={selectedExtras}
-                selectedGroups={Object.values(selectedExtrasByGroup).flat()}
+                selectedGroups={selectedExtrasByGroup}
                 quantity={quantity}
                 onClose={onClose}
               />
@@ -300,8 +302,8 @@ export default function ProductDetailPage({
                   />
                 )}
 
-                {getExtras().length > 0 && (
-                  <Extra
+                {getExtras().length && product.theExtrasGroups.length === 0 && (
+                  <ExtraComponent
                     extrasList={getExtras()}
                     selectedExtras={selectedExtras}
                     setSelectedExtras={setSelectedExtras}
@@ -326,7 +328,7 @@ export default function ProductDetailPage({
             isValid={isValid}
             selectedVariant={getFinalSelectedVariant()}
             selectedExtras={selectedExtras}
-            selectedGroups={Object.values(selectedExtrasByGroup).flat()}
+            selectedGroups={selectedExtrasByGroup}
             quantity={quantity}
           />
         )}