"Refine addon handling in MyBookingsBook.vue to separate interior wash logic, enhance addon filtering, and update UI with visibleAddons for better usability"

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

@@ -466,19 +466,26 @@ const onSelectProduct = async (product: PosProduct) => {
 }
 
 const onUpdateAddons = (addons: PosAddon[]) => {
-  // Update the selected product's addons
-  selectedProduct.value = {
-    ...selectedProduct.value,
-    addons: addons.map(addon => ({
+  // Merge updates for non-interior addons while preserving the interior wash addon (handled by its own button)
+  const currentAddons = (selectedProduct.value?.addons || []) as any[];
+  const interiorEntry = currentAddons.find(a => a?.product?.name?.includes('Indvendig'));
+
+  const updatedNonInterior = addons
+    .filter(a => !((a?.product?.name || '').includes('Indvendig')))
+    .map(addon => ({
       ...addon,
       product: {
         ...addon.product,
         price: addon.price,
         quantity: addon.quantity,
       }
-    }))
+    }));
+
+  selectedProduct.value = {
+    ...selectedProduct.value,
+    addons: interiorEntry ? [interiorEntry, ...updatedNonInterior] : updatedNonInterior,
   } as PosProduct;
-  // Add the product to the basket
+  // Refresh basket to reflect addon changes
   onAddProduct(selectedProduct.value);
 }
 
@@ -528,6 +535,12 @@ const exteriorPriceLabel = computed(() => {
   return `Pris: ${formatDkk(base?.price)}`;
 });
 
+// Filtered list of addons for the UI: hide the interior wash addon (has its own dedicated button)
+const visibleAddons = computed(() => {
+  const addons = (selectedProduct.value?.addons || []) as any[];
+  return addons.filter(a => !a?.product?.name?.includes('Indvendig'));
+});
+
 const completeBasket = computed({
   get: () => {
     if (!selectedProduct.value) return [];
@@ -535,10 +548,10 @@ const completeBasket = computed({
     const result: PosProduct[] = [];
     const interiorWashAddon = getInteriorWashAddon(product);
     const exteriorWash = getExteriorWash(product);
-    // Selected addons with quantity > 0
+    // Selected addons with quantity > 0 (excluding interior wash which is controlled by its own toggle)
     const selectedAddons = (product.addons || [])
       .map((a: any) => a?.product)
-      .filter((p: any) => p && (p.quantity || 0) > 0) as PosProduct[];
+      .filter((p: any) => p && (p.quantity || 0) > 0 && !(p?.name || '').includes('Indvendig')) as PosProduct[];
 
     // Exterior/base product (default selected)
     if (washExterior.value && exteriorWash) {
@@ -601,7 +614,7 @@ const completeBasket = computed({
                 </div>
               </div>
               <!-- Addons -->
-              <PosDepartmentStepMobile2Addons :addons="selectedProduct?.addons || []" :label="'Add-ons'" :compact="true" @update:addons="onUpdateAddons"/>
+              <PosDepartmentStepMobile2Addons :addons="visibleAddons" :label="'Add-ons'" :compact="true" @update:addons="onUpdateAddons"/>
               <PosNotes :notes="notes" class="mt-3" :isAddFormVisible="false" :isOldNotesVisible="true"/>
             </div>
             <!-- Current order items -->