add extra group price

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 { TheExtrasGroup } from "utils/types/appTypes";
+import { Extra, TheExtrasGroup } from "utils/types/appTypes";
 import styles from "../product.module.css";
 
 export default function ExtraGroups({
@@ -13,8 +13,8 @@ export default function ExtraGroups({
   setSelectedExtrasByGroup,
 }: {
   groupsList: TheExtrasGroup[];
-  selectedExtrasByGroup: Record<number, string[]>;
-  setSelectedExtrasByGroup: Dispatch<SetStateAction<Record<number, string[]>>>;
+  selectedExtrasByGroup: Extra[];
+  setSelectedExtrasByGroup: Dispatch<SetStateAction<Extra[]>>;
 }) {
   const { isRTL } = useAppSelector((state) => state.locale);
   const { t } = useTranslation();
@@ -69,7 +69,10 @@ export default function ExtraGroups({
                 {group.force_limit_selection === 1 ? "Required" : "Optional"}
               </ProText>
               <ProText style={{ fontSize: "0.75rem", color: "#666" }}>
-                ({selectedExtrasByGroup[group.id]?.length || 0}/{group.limit})
+                (
+                {selectedExtrasByGroup.filter((extra) => extra.id === group.id)
+                  .length || 0}
+                /{group.limit})
               </ProText>
             </div>
           </div>
@@ -94,7 +97,7 @@ export default function ExtraGroups({
                 label: isRTL ? extra.name : extra.nameAR,
                 price: `+${extra.price}`,
               }))}
-              value={selectedExtrasByGroup[group.id] || []}
+              value={selectedExtrasByGroup.map((extra) => extra.id.toString())}
               onChange={(values: string[]) => {
                 // Check if the new selection would exceed the limit
                 if (values.length > group.limit) {
@@ -103,10 +106,9 @@ export default function ExtraGroups({
                   );
                   return;
                 }
-                setSelectedExtrasByGroup((prev) => ({
-                  ...prev,
-                  [group.id]: values,
-                }));
+                setSelectedExtrasByGroup(
+                  group.extras.filter((o) => values?.includes(o.id.toString())),
+                );
               }}
             />
           </div>

src/pages/product/components/ProductFooter.tsx

@@ -7,23 +7,23 @@ import { useMemo, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { useAppDispatch, useAppSelector } from "redux/hooks";
 import { colors, ProBlack2 } from "ThemeConstants";
-import { Product, Variant, Extra as ExtraType } from "utils/types/appTypes";
+import { Extra, Product, Variant } from "utils/types/appTypes";
 import styles from "../product.module.css";
 
 export default function ProductFooter({
   product,
   isValid = true,
-  selectedVariant,
   selectedExtras,
+  selectedVariant,
   selectedGroups,
   quantity,
   onClose,
 }: {
   product: Product;
   isValid?: boolean;
+  selectedExtras: Extra[];
   selectedVariant?: Variant;
-  selectedExtras: ExtraType[];
-  selectedGroups: string[];
+  selectedGroups: Extra[];
   quantity: number;
   onClose?: () => void;
 }) {
@@ -60,7 +60,10 @@ export default function ProductFooter({
           item: {
             id: product?.id,
             name: product?.name,
-            price: selectedVariant?.price || product?.price,
+            price:
+              (selectedVariant?.price || product?.price) +
+              selectedExtras.reduce((acc, extra) => acc + extra.price, 0),
+            // selectedGroups.reduce((acc, extra) => acc + extra.price, 0),
             image: product?.image,
             description: product?.description,
             comment: specialRequest,

src/pages/product/components/Variants.tsx

@@ -168,7 +168,7 @@ export default function Variants({
                         return {
                           value: value,
                           label: value,
-                          price: variant ? `+${variant.price}` : "",
+                          price: variant ? `+${Number(variant.price).toFixed(2)}` : "",
                         };
                       })}
                       value={selectedVariants[index] || ""}

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