modify slice to account for items with variants

src/features/order/orderSlice.ts

@@ -96,6 +96,16 @@ const getFromLocalStorage = <T>(key: string, defaultValue: T): T => {
   }
 };
 
+// Generate a unique identifier for cart items based on product ID, variant, extras, and comment
+const generateUniqueId = (item: Omit<CartItem, "quantity" | "uniqueId">): string => {
+  const variantStr = item.variant || '';
+  const extrasStr = item.extras ? item.extras.sort().join(',') : '';
+  const extrasGroupStr = item.extrasgroup ? item.extrasgroup.sort().join(',') : '';
+  const commentStr = item.comment || '';
+
+  return `${item.id}-${variantStr}-${extrasStr}-${extrasGroupStr}-${commentStr}`;
+};
+
 const initialState: CartState = {
   items: getFromLocalStorage(CART_STORAGE_KEYS.ITEMS, []),
   tmp: null,
@@ -169,14 +179,21 @@ const orderSlice = createSlice({
       }>,
     ) {
       const { item, quantity } = action.payload;
-      const existingItem = state.items.find((i) => i.id === item.id);
+
+      // Generate a unique ID for this item configuration
+      const uniqueId = generateUniqueId(item);
+
+      // Check if an item with the same configuration already exists
+      const existingItem = state.items.find((i) => i.uniqueId === uniqueId);
 
       if (existingItem) {
+        // Update quantity of existing item with same configuration
         state.items = state.items.map((i) =>
-          i.id === item.id ? { ...i, quantity: i.quantity + quantity } : i,
+          i.uniqueId === uniqueId ? { ...i, quantity: i.quantity + quantity } : i,
         );
       } else {
-        state.items = [...state.items, { ...item, quantity }];
+        // Add new item with its unique identifier
+        state.items = [...state.items, { ...item, quantity, uniqueId }];
       }
 
       // Validate loyalty points if enabled
@@ -203,11 +220,11 @@ const orderSlice = createSlice({
     },
     updateQuantity(
       state,
-      action: PayloadAction<{ id: number | string; quantity: number }>,
+      action: PayloadAction<{ id: number | string; uniqueId: string; quantity: number }>,
     ) {
-      const { id, quantity } = action.payload;
+      const { uniqueId, quantity } = action.payload;
       state.items = state.items.map((item) =>
-        item.id === id ? { ...item, quantity } : item,
+        item.uniqueId === uniqueId ? { ...item, quantity } : item,
       );
 
       // Sync to localStorage
@@ -218,8 +235,8 @@ const orderSlice = createSlice({
         );
       }
     },
-    removeItem(state, action: PayloadAction<number | string>) {
-      state.items = state.items.filter((item) => item.id !== action.payload);
+    removeItem(state, action: PayloadAction<string>) {
+      state.items = state.items.filter((item) => item.uniqueId !== action.payload);
 
       // Validate loyalty points if enabled
       if (state.useLoyaltyPoints) {
@@ -575,6 +592,13 @@ export const selectCartTotal = (state: RootState) =>
     0,
   );
 export const selectCartItemsQuantity =
+  (uniqueId: string) => (state: RootState) => {
+    const item = state.order.items.find((i) => i.uniqueId === uniqueId);
+    return item ? item.quantity : 0;
+  };
+
+// Keep backward compatibility for components that still use id
+export const selectCartItemsQuantityById =
   (id: number | string) => (state: RootState) => {
     const item = state.order.items.find((i) => i.id === id);
     return item ? item.quantity : 0;