Cart: fix extras group

src/pages/product/page.tsx

@@ -13,7 +13,7 @@ import { colors } from "ThemeConstants";
 import { Extra, Product } from "utils/types/appTypes";
 import BackButton from "../menu/components/BackButton";
 import ExtraComponent from "./components/Extra";
-import ExtraGroups from "./components/ExtraGroups";
+import ExtraGroupsContainer from "pages/product/components/ExtraGroupsContainer.tsx";
 import ProductFooter from "./components/ProductFooter";
 import Variants from "./components/Variants";
 import styles from "./product.module.css";
@@ -40,9 +40,9 @@ export default function ProductDetailPage({
   const [selectedExtras, setSelectedExtras] = useState<Extra[]>([]);
 
   // State for selected extras by group
-  const [selectedExtrasByGroup, setSelectedExtrasByGroup] = useState<Extra[]>(
-    [],
-  );
+  const [selectedExtrasByGroup, setSelectedExtrasByGroup] = useState<
+    Record<number, Array<string>>
+  >([]);
 
   // Determine variant levels based on options array length
   const variantLevels = useMemo(() => {
@@ -126,9 +126,7 @@ export default function ProductDetailPage({
     const allRequiredExtraGroupsSatisfied = product.theExtrasGroups.every(
       (group) => {
         if (group.force_limit_selection === 1) {
-          const selectedCount =
-            selectedExtrasByGroup.filter((extra) => extra.id === group.id)
-              .length || 0;
+          const selectedCount = selectedExtrasByGroup[group.id]?.length || 0;
           return selectedCount === group.limit;
         }
         return true; // Optional groups are always satisfied
@@ -311,7 +309,7 @@ export default function ProductDetailPage({
                 )}
 
                 {product.theExtrasGroups.length > 0 && (
-                  <ExtraGroups
+                  <ExtraGroupsContainer
                     groupsList={product.theExtrasGroups}
                     selectedExtrasByGroup={selectedExtrasByGroup}
                     setSelectedExtrasByGroup={setSelectedExtrasByGroup}