Refactor add-on handling in PosDepartmentStepMobile2Addons.vue and enhance reusability

- Replaced inline add-on logic with `PosDepartmentStepMobile2CategoryProduct` for streamlined handling.
- Updated `PosDepartmentStepMobile2CategoryProduct.vue` to support `customButton` prop for conditional button rendering.
- Simplified component template structure and improved slot-based customization.

src/components/displays/department/pos/steps/mobile/elements/PosDepartmentStepMobile2Addons.vue

@@ -4,6 +4,8 @@ import Plus from "@/components/viewport/elements/icons/Plus.vue";
 import ControlSelectAmount from "@/components/viewport/elements/controls/ControlSelectAmount.vue";
 import { SessionUser } from "@/components/session/token/SessionUser.vue";
 import { Addon } from "../objects/PosAddon.vue";
+import PosDepartmentStepMobile2CategoryProduct
+  from "@/components/displays/department/pos/steps/mobile/elements/PosDepartmentStepMobile2CategoryProduct.vue";
 
 const props = defineProps({
   label: {
@@ -31,7 +33,8 @@ const props = defineProps({
  */
 
 const getLabel = (addon: Addon) => {
-  return `${addon.name} / ${SessionUser.functions.currency.toLocal(addon.price)}`;
+  return addon.name;
+  //return `${addon.name} / ${SessionUser.functions.currency.toLocal(addon.price)}`;
 }
 
 </script>
@@ -39,18 +42,15 @@ const getLabel = (addon: Addon) => {
 <template>
   <template v-if="addons.length > 0"> <!-- If there are add-ons available -->
     <p class="custom-label">{{ props.label }}</p>
-    <div class="custom-container"> <!-- Contains the add-on entries -->
-      <div class="custom-container-entry-container" v-for="addon in props.addons" :key="addon.id"> <!-- Each add-on entry -->
-        <!-- Icon and name of the add-on -->
-        <template v-if="!addon.quantity"> <!-- If the add-on is not selected -->
-          <div class="custom-icon-container" @click="addon.quantity = (addon.min > 0 ? addon.min : 1)">
-            <!-- Click to select the add-on, setting quantity to min or 1 if min is <= 0 -->
-            <Plus class="custom-icon"/>
-          </div>
-          <span class="custom-addon-name">{{ getLabel(addon) }}</span>
-        </template>
-        <template v-else> <!-- If the add-on is selected -->
-          <span class="custom-select-quantity-container">
+    <div>
+    <template v-for="addon in props.addons" :key="addon.id">
+      <PosDepartmentStepMobile2CategoryProduct
+          :price="addon.price"
+          :label="getLabel(addon)"
+          :piktogram="addon.product.piktogram"
+          @addProduct="addon.quantity = (addon.min > 0 ? addon.min : 1)"
+          :customButton="addon.quantity > 0">
+        <span class="custom-select-quantity-container">
             <ControlSelectAmount
                 @update:quantity="addon.quantity = $event"
                 v-model:quantity="addon.quantity"
@@ -58,9 +58,8 @@ const getLabel = (addon: Addon) => {
                 :min="addon.min"
             />
           </span>
-          <span class="custom-addon-name">{{ getLabel(addon) }}</span>
-        </template>
-      </div>
+      </PosDepartmentStepMobile2CategoryProduct>
+    </template>
     </div>
   </template>
 </template>

src/components/displays/department/pos/steps/mobile/elements/PosDepartmentStepMobile2CategoryProduct.vue

@@ -19,6 +19,11 @@ const props = defineProps({
     type: Number,
     default: 579,
     required: true
+  },
+  customButton: {
+    type: Boolean,
+    default: false,
+    required: false
   }
 });
 
@@ -44,11 +49,12 @@ const onClick = () => {
         <h2 class="subtitle is-6">{{ SessionUser.functions.currency.toLocal(props.price) }}</h2>
       </div>
       <div class="column is-narrow">
-        <button class="custom-button" @click="onClick">
+        <button class="custom-button" @click="onClick" v-if="!props.customButton">
                 <span class="custom-icon">
                   <Plus width="100%" height="100%" />
                 </span>
         </button>
+        <slot v-else></slot>
       </div>
     </div>
   </div>