"Remove unnecessary console warnings and enhance product handling logic with immutability improvements, cleaner addon filtering, and updated basket management in POS and booking flows"

src/components/forms/department/pos/SelectProductsFormPOS.vue

@@ -361,7 +361,6 @@ const hideRecommendedProducts = () => {
 const selectedProductId = ref(null);
 
 const selectProduct = (product) => {
-  console.warn('Selecting product', product);
   emits('onSelectProduct', product);
   selectedProductId.value = product.id;
 };
@@ -411,7 +410,7 @@ const subtractProductAddon = (productId, addonId) => {
 const unselectProduct = () => {
   // Wait for the selection from the click to be done
   setTimeout(() => {
-    selectedProduct.value = null;
+    selectedProductId.value = null;
   }, 100);
 };
 
@@ -437,8 +436,8 @@ onMounted(() => {
 });
 
 const orderByOrderPriority = (productsList) => {
-  // If the subkey is set, sort the products by the subkey
-    return productsList.sort((a, b) => a.order_priority - b.order_priority);
+  // If the subkey is set, sort the products by the subkey without mutating the original array
+  return [...productsList].sort((a, b) => a.order_priority - b.order_priority);
 };
 
 const filterProductsVisibleOnCustomerBooking = (productsList) => {
@@ -460,13 +459,16 @@ const filterProductsIsWash = (productsList) => {
 }
 
 const filterProductAddonsVisibleOnCustomerBooking = (productsList) => {
+  if (!props.isCustomerBooking) {
+    return productsList;
+  }
+  // Return a new array of products with filtered addons to avoid mutating reactive sources during render
   return productsList.map((product) => {
-    if (props.isCustomerBooking) {
-      product.addons = product.addons.filter((addon) => {
-        return addon.product.display_in_booking_form;
-      });
-    }
-    return product;
+    const filteredAddons = (product.addons || []).filter((addon) => addon.product && addon.product.display_in_booking_form);
+    return {
+      ...product,
+      addons: filteredAddons
+    };
   });
 }
 

src/views/dashboards/userDashboard/bookings/MyBookingsBook.vue

@@ -417,7 +417,6 @@ const isUpdatingBasket = ref(false);
 const onAddProduct = (product: PosProduct) => {
   // Make the first selection visible immediately by rebuilding the basket with the base product
   if (isUpdatingBasket.value) return;
-  console.warn('Adding product to basket.', product);
   try {
     isUpdatingBasket.value = true;
     clearBasket();
@@ -461,14 +460,12 @@ const onSelectProduct = async (product: PosProduct) => {
   washInterior.value = false;
 
   selectedProduct.value = product;
-  console.warn('Selecting product.', product);
   // Defer to next tick so reactive updates settle before adding
   await nextTick();
   onAddProduct(product);
 }
 
 const onUpdateAddons = (addons: PosAddon[]) => {
-  console.warn('Updating addons.', addons);
   // Update the selected product's addons
   selectedProduct.value = {
     ...selectedProduct.value,
@@ -515,7 +512,6 @@ const getExteriorWash = (product: PosProduct) => {
 const completeBasket = computed({
   get: () => {
     if (!selectedProduct.value) return [];
-    console.warn('completeBasket getter triggered.', selectedProduct.value);
     const product = selectedProduct.value as PosProduct;
     const result: PosProduct[] = [];
     const interiorWashAddon = getInteriorWashAddon(product);
@@ -543,7 +539,6 @@ const completeBasket = computed({
       }
     });
 
-    console.warn('completeBasket triggered.', product, interiorWashAddon, exteriorWash, selectedAddons);
     return result;
   },
   set: () => {}
@@ -556,7 +551,6 @@ const completeBasket = computed({
     <ViewportResponsiveWrapper>
       <template #desktop>
         <div>
-          {{ selectedProduct }}
           <!--
           <p><strong>Basket length</strong>: {{ basket.length }}</p>
           <p><strong>Basket as order items</strong>: {{ basketAsOrderItems().length }}</p>