add extra price

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,
   );
 

src/pages/product/components/Extra.tsx

@@ -12,8 +12,8 @@ export default function Extra({
   setSelectedExtras,
 }: {
   extrasList: ExtraType[];
-  selectedExtras: string[];
+  selectedExtras: ExtraType[];
-  setSelectedExtras: Dispatch<SetStateAction<string[]>>;
+  setSelectedExtras: Dispatch<SetStateAction<ExtraType[]>>;
 }) {
   const { t } = useTranslation();
 
@@ -51,8 +51,12 @@ export default function Extra({
                   price: `+${value.price}`,
                 };
               })}
-              value={selectedExtras}
+              value={selectedExtras.map((ex) => ex.id.toString())}
-              onChange={(values: string[]) => setSelectedExtras(values)}
+              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<

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;