From 7df267af5a1db558bc7efe864ec458be9c51bf1b Mon Sep 17 00:00:00 2001
From: Mohammed Al-yaseen <mohammed.o.alyaseen@gmail.com>
Date: Mon, 10 Nov 2025 16:19:57 +0300
Subject: [PATCH] add extra price

---
 src/features/order/orderSlice.ts               | 10 +++++++++-
 src/pages/product/components/Extra.tsx         | 12 ++++++++----
 src/pages/product/components/ProductFooter.tsx |  4 ++--
 src/pages/product/page.tsx                     |  4 ++--
 src/utils/types/appTypes.ts                    |  2 +-
 5 files changed, 22 insertions(+), 10 deletions(-)

diff --git a/src/features/order/orderSlice.ts b/src/features/order/orderSlice.ts
index 1e75495..fa1916a 100644
--- a/src/features/order/orderSlice.ts
+++ b/src/features/order/orderSlice.ts
@@ -626,7 +626,15 @@ export const selectCartItems = (state: RootState) => state.order.items;
 
 export const selectCartTotal = (state: RootState) =>
   state.order.items.reduce(
-    (total, item) => total + item.price * item.quantity,
+    // (total, item) => total + item.price * item.quantity,
+    (total, item) => {
+      const extrasPrice = (item.extras || []).reduce(
+        (extraTotal, extraItem) => extraTotal + extraItem.price,
+        0,
+      );
+      const itemTotalPrice = (item.price + extrasPrice) * item.quantity;
+      return total + itemTotalPrice;
+    },
     0,
   );
 
diff --git a/src/pages/product/components/Extra.tsx b/src/pages/product/components/Extra.tsx
index 208d796..55da04e 100644
--- a/src/pages/product/components/Extra.tsx
+++ b/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>
diff --git a/src/pages/product/components/ProductFooter.tsx b/src/pages/product/components/ProductFooter.tsx
index ad37554..95aacec 100644
--- a/src/pages/product/components/ProductFooter.tsx
+++ b/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;
diff --git a/src/pages/product/page.tsx b/src/pages/product/page.tsx
index b4fe64b..ec7047f 100644
--- a/src/pages/product/page.tsx
+++ b/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<
diff --git a/src/utils/types/appTypes.ts b/src/utils/types/appTypes.ts
index 3a1cd27..854a7e9 100644
--- a/src/utils/types/appTypes.ts
+++ b/src/utils/types/appTypes.ts
@@ -322,7 +322,7 @@ export interface CartItem {
   quantity: number;
   description: string;
   variant?: string;
-  extras?: string[];
+  extras?: Extra[];
   extrasgroup?: string[];
   isHasLoyalty?: boolean;
   no_of_stamps_give?: number;