"Add PosDepartmentStepMobile2Customer component and enhance customer ID change handling"

- Added new `PosDepartmentStepMobile2Customer.vue` component for managing customer selection.
- Introduced `watch` logic and metadata updates to track customer ID changes in `PosDepartmentStepMobile2.vue`.
- Updated UI to include customer selection in mobile step flow.

src/components/displays/department/pos/steps/mobile/PosDepartmentStepMobile2.vue

@@ -19,7 +19,7 @@ import PosDepartmentStep2MobileVehicleSelection
 import PosDepartmentStepMobileButtonNextStep
   from "@/components/displays/department/pos/steps/mobile/elements/PosDepartmentStepMobileButtonNextStep.vue";
 import { primaryItem } from "./objects/PosDepartmentStepMobileFlow.vue";
-import { order_id, order_notes, department_id, customer_id, getCustomerEmail } from "@/components/shop/POSDepartmentProcess.vue";
+import { order_id, order_notes, department_id, customer_id, getCustomerEmail, customer_name } from "@/components/shop/POSDepartmentProcess.vue";
 import { getOrderItems } from "@/components/shop/OrdersItems.vue";
 import { PosProduct } from "@/components/displays/department/pos/steps/mobile/objects/PosProduct.vue";
 import PosDepartmentStepMobileButtonClearAll
@@ -29,6 +29,9 @@ import PosDepartmentStepMobileFixedBottomControl
 import {PosOrderItem} from "@/components/displays/department/pos/steps/mobile/objects/PosOrderItem.vue";
 import PosDepartmentStepMobile2AdditionalItems
   from "@/components/displays/department/pos/steps/mobile/elements/PosDepartmentStepMobile2AdditionalItems.vue";
+import PosDepartmentStepMobile2Customer
+  from "@/components/displays/department/pos/steps/mobile/elements/PosDepartmentStepMobile2Customer.vue";
+
 
 onMounted(() => {
   // Set the header to be transparent
@@ -45,6 +48,10 @@ onMounted(() => {
     notes.value = order_notes.value;
     console.warn('Setting notes to order notes:', notes.value);
   }
+  // Check for potential customer number changes
+  if (metadata.customerId.value !== parseInt(customer_id.value)) {
+    applyPotentialCustomerNumberChange(metadata.customerId.value, parseInt(customer_id.value));
+  }
 
   /** Last order */
   // This is used to fetch the last order details for the vehicles.
@@ -53,6 +60,18 @@ onMounted(() => {
   fetchLastOrder(3);
 });
 
+const applyPotentialCustomerNumberChange = (oldId, newId) => {
+  metadata.customerId.value = parseInt(newId);
+  console.warn('Customer ID changed from', oldId, 'to', newId)
+}
+
+// Watch the customer id, and if it changes, update it in the metadata
+watch(customer_id, (newId, oldId) => {
+  if (newId !== oldId) {
+    applyPotentialCustomerNumberChange(oldId, newId);
+  }
+});
+
 const lastFetchedPrimaryItemProduct = ref<PosProduct | null>(null); // This is used to make sure all the addons are fetched when the last order is selected.
 
 const fetchPrimaryItemProduct = () => {
@@ -402,6 +421,8 @@ watch(() => vehicles.vehicle_1.value.reference, (newValue, oldValue) => {
   </template>
   <template v-else>
     <div class="is-flex is-flex-direction-column is-justify-content-space-between is-gap-2">
+      <!-- Customer selection -->
+      <PosDepartmentStepMobile2Customer subtitle="" :label="customer_name"/>
       <!-- Registration numbers -->
       <PosDepartmentStepMobile2RegistrationNumbers :classes="layout.classes" />
       <!-- Product -->

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

@@ -198,25 +198,8 @@ const onClickAddProduct = async (product: PosProduct) => {
     </WhiteBoxCard>
     <!-- Fullscreen view, when selecting other products -->
     <template v-else>
-      <!-- Shortcuts / recommendations -->
-      <!--<WhiteBoxCard :toggleable="true" v-show="false">
-         Header
-        <template #header>
-          <div class="card-header-title">{{ SessionUser.objects.global.language.recommended }}</div>
-          <div class="card-header-icon">
-            <span class="icon">
-              Arrow right icon
-              <i class="fas fa-arrow-right"></i>
-            </span>
-          </div>
-        </template>
-      </WhiteBoxCard> -->
       <!-- Categories of products -->
       <PosDepartmentStep2MobileVehicleSelection :onAddProduct="onClickAddProduct" :onSearchClick="() => console.warn('AdditionalItem Search Clicked')"/><!-- :asAddons="true" :addons="availableAdditionalItems" @update:addons="availableAdditionalItems = $event"/>-->
-      <!--{{ availableAdditionalItems }}-->
-      <!-- Products in category -->
-      <!-- Back button -->
-
       <!-- Buttons -->
       <PosDepartmentStepMobileFixedBottomControl>
         <!-- Next button -->

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

@@ -0,0 +1,78 @@
+<script setup lang="ts">
+import { defineProps, ref, computed, watch } from "vue";
+import { PosOrder } from "../objects/PosOrder.vue";
+import { SessionUser } from "@/components/session/token/SessionUser.vue";
+import WhiteBoxCard from "@/components/displays/boxes/WhiteBoxCard.vue";
+import { pos } from "../objects/PosDepartmentStepMobileFlow.vue";
+import {PosProduct} from "@/components/displays/department/pos/steps/mobile/objects/PosProduct.vue";
+import PosDepartmentStepMobile2CategoryProduct
+  from "@/components/displays/department/pos/steps/mobile/elements/PosDepartmentStepMobile2CategoryProduct.vue";
+import PosDepartmentStepMobile2Addons
+  from "@/components/displays/department/pos/steps/mobile/elements/PosDepartmentStepMobile2Addons.vue";
+import {Addon} from "@/components/displays/department/pos/steps/mobile/objects/PosAddon.vue";
+import PosDepartmentStepMobileFixedBottomControl
+  from "@/components/displays/department/pos/steps/mobile/elements/PosDepartmentStepMobileFixedBottomControl.vue";
+import PosDepartmentStepMobileButtonNextStep
+  from "@/components/displays/department/pos/steps/mobile/elements/PosDepartmentStepMobileButtonNextStep.vue";
+import {
+  transactionItems
+} from "@/components/displays/department/pos/steps/mobile/objects/PosDepartmentStepMobileFlow.vue";
+import PosDepartmentStep2MobileVehicleSelection
+  from "@/components/displays/department/pos/steps/mobile/views/PosDepartmentStep2MobileVehicleSelection.vue";
+import GenericButton from "@/components/viewport/page/templates/generic/graphics/GenericButton.vue";
+import { order_id } from "@/components/shop/POSDepartmentProcess.vue";
+
+const props = defineProps({
+  label: {
+    type: String,
+    default: "Additional items",
+    required: true
+  },
+  subtitle: {
+    type: String,
+    default: "Click to modify your additional items",
+    required: true
+  },
+  defaultChecked: {
+    type: Boolean,
+    default: false
+  },
+});
+
+const displayLabel = computed(() => {
+  return props.label;
+})
+
+const displaySubtitle = computed(() => {
+  return props.subtitle;
+})
+
+
+const onClick = () => {
+  console.warn('Clicked on customer info');
+  SessionUser.objects.orders.functions.showChangeCustomerForm(order_id.value);
+}
+</script>
+
+<template>
+  <div>
+  <!-- Minimal view, when not set as fullscreen view -->
+    <WhiteBoxCard :toggleable="true"
+                  :defaultOpen="false"
+                  @toggle="onClick"
+                  :forceState="false">
+      <!-- Header -->
+      <template #header>
+        <div class="card-header-title">{{ displayLabel }}</div>
+        <div class="card-header-icon">
+          <!-- Right arrow, if there's no items, down arrow if there are items -->
+          <span class="icon">
+            <i class="fas fa-angle-right"></i>
+          </span>
+        </div>
+      </template>
+    </WhiteBoxCard>
+  </div>
+</template>
+<style scoped>
+</style>