add extra price

src/pages/product/components/Extra.tsx

@@ -12,8 +12,8 @@ export default function Extra({
   setSelectedExtras,
 }: {
   extrasList: ExtraType[];
-  selectedExtras: string[];
-  setSelectedExtras: Dispatch<SetStateAction<string[]>>;
+  selectedExtras: ExtraType[];
+  setSelectedExtras: Dispatch<SetStateAction<ExtraType[]>>;
 }) {
   const { t } = useTranslation();
 
@@ -51,8 +51,12 @@ export default function Extra({
                   price: `+${value.price}`,
                 };
               })}
-              value={selectedExtras}
-              onChange={(values: string[]) => setSelectedExtras(values)}
+              value={selectedExtras.map((ex) => ex.id.toString())}
+              onChange={(values) =>
+                setSelectedExtras(
+                  extrasList.filter((o) => values?.includes(o.id.toString())),
+                )
+              }
             />
           </div>
         </div>

src/pages/product/components/ProductFooter.tsx

@@ -7,7 +7,7 @@ import { useMemo, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { useAppDispatch, useAppSelector } from "redux/hooks";
 import { colors, ProBlack2 } from "ThemeConstants";
-import { Product, Variant } from "utils/types/appTypes";
+import { Product, Variant, Extra as ExtraType } from "utils/types/appTypes";
 import styles from "../product.module.css";
 
 export default function ProductFooter({
@@ -22,7 +22,7 @@ export default function ProductFooter({
   product: Product;
   isValid?: boolean;
   selectedVariant?: Variant;
-  selectedExtras: string[];
+  selectedExtras: ExtraType[];
   selectedGroups: string[];
   quantity: number;
   onClose?: () => void;

src/pages/product/page.tsx

@@ -10,7 +10,7 @@ import ArabicPrice from "components/ArabicPrice";
 import useBreakPoint from "hooks/useBreakPoint";
 import { useCallback, useMemo, useState } from "react";
 import { colors } from "ThemeConstants";
-import { Product } from "utils/types/appTypes";
+import { Product, Extra as ExtraType } from "utils/types/appTypes";
 import BackButton from "../menu/components/BackButton";
 import Extra from "./components/Extra";
 import ExtraGroups from "./components/ExtraGroups";
@@ -37,7 +37,7 @@ export default function ProductDetailPage({
   >({});
 
   // State for selected extras
-  const [selectedExtras, setSelectedExtras] = useState<string[]>([]);
+  const [selectedExtras, setSelectedExtras] = useState<ExtraType[]>([]);
 
   // State for selected extras by group
   const [selectedExtrasByGroup, setSelectedExtrasByGroup] = useState<