diff --git a/playwright.config.ts b/playwright.config.ts
index ed10bc7a..e7a31266 100644
--- a/playwright.config.ts
+++ b/playwright.config.ts
@@ -6,11 +6,12 @@ const isCI = !!process.env.CI;
 
 export default defineConfig({
   testDir: "./tests/e2e",
+  testIgnore: ["**/release/**"],
   timeout: 60_000,
   fullyParallel: true,
   forbidOnly: isCI,
   retries: isCI ? 2 : 0,
-  workers: isCI ? 2 : 4,
+  workers: 2,
   ...(process.env.PLAYWRIGHT_BASE_URL
     ? {}
     : {
diff --git a/src/assets/pos.css b/src/assets/pos.css
index 1840d68e..957a11ed 100644
--- a/src/assets/pos.css
+++ b/src/assets/pos.css
@@ -418,6 +418,31 @@
   text-transform: uppercase;
 }
 
+.pos-registration-field__label-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.45rem;
+  min-width: 0;
+}
+
+.pos-registration-field__status-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex: 0 0 auto;
+  font-size: 0.8rem;
+  line-height: 1;
+}
+
+.pos-registration-field__status-icon--warning {
+  color: #a46d00;
+}
+
+.pos-registration-field__status-icon--danger {
+  color: #b53e3e;
+}
+
 .pos-registration-field__value {
   min-width: 0;
   font-weight: 600;
@@ -430,6 +455,18 @@
   background: #fbfcfe;
 }
 
+.pos-registration-field--warning {
+  border-style: solid;
+  border-color: #ddc15b;
+  background: #fff4c4;
+}
+
+.pos-registration-field--danger {
+  border-style: solid;
+  border-color: #e0a7a7;
+  background: #fff1f1;
+}
+
 .pos-registration-field--add:hover,
 .pos-registration-field--add:focus-visible {
   border-color: #93b3d8;
@@ -439,6 +476,20 @@
   transform: none;
 }
 
+.pos-registration-field--warning:hover,
+.pos-registration-field--warning:focus-visible {
+  border-color: #cfaf3f;
+  background: #ffefb2;
+  box-shadow: 0 0 0 3px rgba(207, 175, 63, 0.16);
+}
+
+.pos-registration-field--danger:hover,
+.pos-registration-field--danger:focus-visible {
+  border-color: #d38c8c;
+  background: #ffe7e7;
+  box-shadow: 0 0 0 3px rgba(211, 140, 140, 0.16);
+}
+
 .pos-registration-field__value--muted {
   color: #63768f;
 }
@@ -587,6 +638,16 @@
   background: #fcfdff;
 }
 
+.pos-order-items--order-detail .pos-registration-field--warning:hover,
+.pos-order-items--order-detail .pos-registration-field--warning:focus-visible {
+  background: #ffefb2;
+}
+
+.pos-order-items--order-detail .pos-registration-field--danger:hover,
+.pos-order-items--order-detail .pos-registration-field--danger:focus-visible {
+  background: #ffe7e7;
+}
+
 .pos-order-items--order-detail .pos-registration-field__label {
   color: #738397;
   font-size: 0.68rem;
@@ -601,6 +662,16 @@
   border-color: #d2dbe5;
 }
 
+.pos-order-items--order-detail .pos-registration-field--warning {
+  border-color: #d8b748;
+  background: #fff3bf;
+}
+
+.pos-order-items--order-detail .pos-registration-field--danger {
+  border-color: #dc9f9f;
+  background: #fff0f0;
+}
+
 @media screen and (max-width: 1080px) {
   .pos-order-items--order-detail .pos-order-metadata-grid {
     grid-template-columns: minmax(0, 1fr);
diff --git a/src/components/displays/department/pos/PosOrderItemsCurrent.vue b/src/components/displays/department/pos/PosOrderItemsCurrent.vue
index a7780220..009ae8bb 100644
--- a/src/components/displays/department/pos/PosOrderItemsCurrent.vue
+++ b/src/components/displays/department/pos/PosOrderItemsCurrent.vue
@@ -1,8 +1,8 @@
 <script setup>
-import { useI18n } from 'vue-i18n';
+import { useI18n } from "vue-i18n";
 import { showEditOrderItemForm } from "@/components/forms/superUser/editOrderItemForm.vue";
 import { removeOrderItem } from "@/components/shop/OrdersItems.vue";
-import { computed, ref, watch, defineProps, useSlots, defineEmits } from 'vue';
+import { computed, ref, watch, defineProps, useSlots, defineEmits } from "vue";
 import PosOrderDetailItemsTable from "@/components/displays/department/pos/order/PosOrderDetailItemsTable.vue";
 import PosOrderItemsDefaultTable from "@/components/displays/department/pos/order/PosOrderItemsDefaultTable.vue";
 import PosOrderItemEditModal from "@/components/displays/department/pos/order/PosOrderItemEditModal.vue";
@@ -21,16 +21,26 @@ const props = defineProps({
   disallowItemEdit: Boolean,
   variant: {
     type: String,
-    default: 'default',
-    validator: (value) => ['default', 'order-detail', 'sidebar'].includes(value),
+    default: "default",
+    validator: (value) => ["default", "order-detail", "sidebar"].includes(value),
   },
 });
-const emits = defineEmits(['update:orderItems', 'onDestroyItem']);
+const emits = defineEmits(["update:orderItems", "onDestroyItem"]);
 import { showPopper, removePopperIfOpen, popperBox } from "@/components/displays/PopperDefault.vue";
 import { SessionUser } from "@/components/session/token/SessionUser.vue";
 import ActionSettingsWheelButton from "@/components/displays/buttons/ActionSettingsWheelButton.vue";
 import ActionSettingsWheelItem from "@/components/displays/buttons/ActionSettingsWheelItem.vue";
-import { customer_name, getOrderDetails, setOrderId, order_id, reference, order_notes, order_po } from "@/components/shop/POSDepartmentProcess.vue";
+import {
+  customer_name,
+  customerRequiresReferenceNumber,
+  customerUsesPONumbers,
+  getOrderDetails,
+  setOrderId,
+  order_id,
+  reference,
+  order_notes,
+  order_po,
+} from "@/components/shop/POSDepartmentProcess.vue";
 import SpanSkeleton from "@/components/displays/skeletons/SpanSkeleton.vue";
 import PosOrderLicensePlates from "@/components/displays/department/pos/order/PosOrderLicensePlates.vue";
 import POSOrderCustomerWishes from "@/components/displays/department/pos/order/POSOrderCustomerWishes.vue";
@@ -42,36 +52,38 @@ const slots = useSlots();
 
 const panel_tabs = ref([
   {
-    id: 'cart',
-    icon: 'fas fa-shopping-cart',
-    name: t('admin.pos.cart'),
+    id: "cart",
+    icon: "fas fa-shopping-cart",
+    name: t("admin.pos.cart"),
     active: true,
   },
 ]);
 // Check if the size is large
 const isLarge = props.isLarge !== undefined ? props.isLarge : false;
-const isOrderDetailVariant = computed(() => props.variant === 'order-detail');
-const isSidebarVariant = computed(() => props.variant === 'sidebar');
+const isOrderDetailVariant = computed(() => props.variant === "order-detail");
+const isSidebarVariant = computed(() => props.variant === "sidebar");
 const showInlineActionButtons = computed(() => isOrderDetailVariant.value);
 const showSidebarTabsInHeader = computed(() => isSidebarVariant.value && panel_tabs.value.length > 1);
 const rootClasses = computed(() => ({
-  'pos-order-items': true,
-  'pos-order-items--large': isLarge,
-  'pos-order-items--order-detail': isOrderDetailVariant.value,
-  'pos-order-items--sidebar': isSidebarVariant.value,
-  'pos-order-items--stacked-metadata': props.stackMetadata,
+  "pos-order-items": true,
+  "pos-order-items--large": isLarge,
+  "pos-order-items--order-detail": isOrderDetailVariant.value,
+  "pos-order-items--sidebar": isSidebarVariant.value,
+  "pos-order-items--stacked-metadata": props.stackMetadata,
 }));
 const titleClasses = computed(() => ({
   title: true,
-  'is-5': !isSidebarVariant.value,
-  'is-6': isSidebarVariant.value,
-  'pos-order-items__title': true,
+  "is-5": !isSidebarVariant.value,
+  "is-6": isSidebarVariant.value,
+  "pos-order-items__title": true,
 }));
-const displayCustomerName = computed(() => props.customer_name || customer_name.value || '');
+const displayCustomerName = computed(() => props.customer_name || customer_name.value || "");
 const showHeaderActions = computed(() => slots.headerActions !== undefined);
 const pendingRemovedOrderItemIds = ref([]);
 const selectedOrderItem = ref(null);
 const isOrderItemEditModalOpen = ref(false);
+const referenceRequired = computed(() => customerRequiresReferenceNumber());
+const poRequired = computed(() => customerUsesPONumbers());
 
 const buildVisibleOrderItems = (sourceOrderItems = []) => {
   const pendingIds = new Set(pendingRemovedOrderItemIds.value);
@@ -84,9 +96,7 @@ const buildVisibleOrderItems = (sourceOrderItems = []) => {
     }
 
     visibleItems.push(orderItem);
-    visibleItems.push(
-      ...orderItems.filter((candidate) => candidate.related_item_id === orderItem.id)
-    );
+    visibleItems.push(...orderItems.filter((candidate) => candidate.related_item_id === orderItem.id));
   }
 
   return visibleItems;
@@ -95,10 +105,12 @@ const buildVisibleOrderItems = (sourceOrderItems = []) => {
 const visibleOrderItems = computed(() => buildVisibleOrderItems(props.orderItems ?? []));
 const totalPrice = computed(() => {
   return visibleOrderItems.value.reduce((accumulator, orderItem) => {
-    return accumulator + (Number(orderItem?.price ?? 0) * Number(orderItem?.quantity ?? 0));
+    return accumulator + Number(orderItem?.price ?? 0) * Number(orderItem?.quantity ?? 0);
   }, 0);
 });
-const canEditOrderItems = computed(() => Boolean(props.editPossible) && SessionUser.hasPermission('edit_order_items') && !props.disallowItemEdit);
+const canEditOrderItems = computed(
+  () => Boolean(props.editPossible) && SessionUser.hasPermission("edit_order_items") && !props.disallowItemEdit
+);
 const orderDetailRows = computed(() => {
   return visibleOrderItems.value.map((orderItem) => {
     const siblingItems = orderItem.related_item_id
@@ -121,9 +133,9 @@ const hasAttachmentsSlot = slots.attachments !== undefined;
 
 if (hasAttachmentsSlot) {
   panel_tabs.value.push({
-    id: 'attachments',
-    icon: 'fas fa-paperclip',
-    name: t('admin.pos.attachments'),
+    id: "attachments",
+    icon: "fas fa-paperclip",
+    name: t("admin.pos.attachments"),
     active: false,
   });
 }
@@ -131,10 +143,10 @@ if (hasAttachmentsSlot) {
 // If so, add the other tab
 if (hasOtherSlot) {
   panel_tabs.value.push({
-    id: 'settings',
-    name: t('admin.pos.settings'),
+    id: "settings",
+    name: t("admin.pos.settings"),
     active: false,
-    icon: 'fas fa-cog',
+    icon: "fas fa-cog",
   });
 }
 
@@ -143,15 +155,15 @@ const hasDetailsSlot = slots.details !== undefined;
 // If so, add the other tab
 if (hasDetailsSlot) {
   panel_tabs.value.push({
-    id: 'details',
-    name: t('admin.pos.details'),
+    id: "details",
+    name: t("admin.pos.details"),
     active: false,
-    icon: 'fas fa-info',
+    icon: "fas fa-info",
   });
 }
 
 const getOrderItemProductName = (orderItem) => {
-  return orderItem?.product?.name || t('global.no_data');
+  return orderItem?.product?.name || t("global.no_data");
 };
 
 const getItemRelatedItems = (orderItems, orderItemId) => {
@@ -171,16 +183,16 @@ const isLastRelatedItem = (orderItems, orderItem) => {
 };
 
 const createEmptyRegistrationNumbers = () => ({
-  1: '',
-  2: '',
-  3: '',
+  1: "",
+  2: "",
+  3: "",
 });
 
 const registration_numbers = ref(createEmptyRegistrationNumbers());
 const registrationNumbersLoading = ref(false);
 const loadedRegistrationNumbersForOrderId = ref(null);
 
-const normalizeRegistrationValue = (value) => (value == null ? '' : String(value));
+const normalizeRegistrationValue = (value) => (value == null ? "" : String(value));
 
 const parseOrderId = (candidateOrderId) => {
   const normalizedOrderId = Number.parseInt(candidateOrderId, 10);
@@ -241,11 +253,15 @@ const toggleIsSelected = () => {
 };
 const expandIcon = ref(null);
 
-watch(isOrderDetailVariant, (isOrderDetail) => {
-  if (isOrderDetail) {
-    isTabZeroExpanded.value = true;
-  }
-}, { immediate: true });
+watch(
+  isOrderDetailVariant,
+  (isOrderDetail) => {
+    if (isOrderDetail) {
+      isTabZeroExpanded.value = true;
+    }
+  },
+  { immediate: true }
+);
 
 if (props.orderId === -1) {
   registration_numbers.value = {
@@ -256,28 +272,44 @@ if (props.orderId === -1) {
   registrationNumbersLoading.value = false;
   loadedRegistrationNumbersForOrderId.value = null;
   customer_name.value = props.customer_name;
-  watch(() => props.orderId, (newOrderId) => {
-    if (newOrderId !== -1) {
-      loadOrder(newOrderId);
+  watch(
+    () => props.orderId,
+    (newOrderId) => {
+      if (newOrderId !== -1) {
+        loadOrder(newOrderId);
+      }
     }
-  });
+  );
 } else {
-  watch(() => props.orderId, (newOrderId) => {
-    loadOrder(newOrderId);
-  }, { immediate: true });
+  watch(
+    () => props.orderId,
+    (newOrderId) => {
+      loadOrder(newOrderId);
+    },
+    { immediate: true }
+  );
 }
 
-watch(() => props.orderItems, () => {
-  pendingRemovedOrderItemIds.value = [];
-}, { deep: true });
+watch(
+  () => props.orderItems,
+  () => {
+    pendingRemovedOrderItemIds.value = [];
+  },
+  { deep: true }
+);
 
 const removeItem = async (id) => {
   // If the order id is -1, emit the updated order items
   if (props.orderId === -1 || props.emitEventsOnly) {
-    const orderItemsExcludingRemovedItem = props.orderItems.filter((orderItem) => orderItem.id !== id && orderItem.related_item_id !== id);
-    emits('onDestroyItem', id);
+    const orderItemsExcludingRemovedItem = props.orderItems.filter(
+      (orderItem) => orderItem.id !== id && orderItem.related_item_id !== id
+    );
+    emits("onDestroyItem", id);
     //console.warn('Emitting onDestroyItem event, new order items:', orderItemsExcludingRemovedItem);
-    emits('update:orderItems', orderItemsExcludingRemovedItem.map((orderItem) => orderItem.product));
+    emits(
+      "update:orderItems",
+      orderItemsExcludingRemovedItem.map((orderItem) => orderItem.product)
+    );
   } else if (props.orderId > 0) {
     // Otherwise remove the order item
     await removeOrderItem(id);
@@ -285,7 +317,7 @@ const removeItem = async (id) => {
 };
 
 const reloadOrderItems = async () => {
-  if (typeof props.loadOrderItems === 'function') {
+  if (typeof props.loadOrderItems === "function") {
     await props.loadOrderItems();
   }
 };
@@ -337,10 +369,7 @@ const getRemovalIds = (orderItemId) => {
 };
 
 const deleteOrderItem = async (orderItemId) => {
-  pendingRemovedOrderItemIds.value = [...new Set([
-    ...pendingRemovedOrderItemIds.value,
-    ...getRemovalIds(orderItemId),
-  ])];
+  pendingRemovedOrderItemIds.value = [...new Set([...pendingRemovedOrderItemIds.value, ...getRemovalIds(orderItemId)])];
 
   try {
     await removeItem(orderItemId);
@@ -349,34 +378,30 @@ const deleteOrderItem = async (orderItemId) => {
     pendingRemovedOrderItemIds.value = [];
   }
 };
-
 </script>
 
 <template>
   <div
-      :class="rootClasses"
-      :data-auto-excel-export-scope="isOrderDetailVariant ? null : '1'"
-      :data-disable-auto-excel-export="isOrderDetailVariant ? '1' : null"
+    :class="rootClasses"
+    :data-auto-excel-export-scope="isOrderDetailVariant ? null : '1'"
+    :data-disable-auto-excel-export="isOrderDetailVariant ? '1' : null"
   >
     <article class="pos-order-items__surface">
       <header class="pos-order-items__header">
         <div class="pos-order-items__header-main">
           <div class="pos-order-items__heading">
             <SpanSkeleton
-                :class="titleClasses"
-                :isSkeleton="!displayCustomerName"
-                width="100%"
-                height="1.5rem"
-                skeleton-class="is-size-4"
+              :class="titleClasses"
+              :isSkeleton="!displayCustomerName"
+              width="100%"
+              height="1.5rem"
+              skeleton-class="is-size-4"
             >
               <span data-testid="pos-order-customer-name">{{ displayCustomerName }}</span>
             </SpanSkeleton>
             <div class="pos-order-items__subheading">
-              <p
-                class="is-7 subtitle mb-0 pos-order-items__transaction"
-                data-testid="pos-order-transaction-label"
-              >
-                {{ $t('admin.pos.transaction') }} #{{ orderId }}
+              <p class="is-7 subtitle mb-0 pos-order-items__transaction" data-testid="pos-order-transaction-label">
+                {{ $t("admin.pos.transaction") }} #{{ orderId }}
               </p>
               <div class="pos-order-items__headingcenter">
                 <slot name="headingcenter"></slot>
@@ -388,26 +413,22 @@ const deleteOrderItem = async (orderItemId) => {
               <slot></slot>
             </div>
             <div
-                v-if="showHeaderActions && panel_tabs[0].active"
-                class="pos-order-items__utility-actions"
-                data-auto-excel-export-actions="1"
-                data-testid="pos-order-header-export-actions"
+              v-if="showHeaderActions && panel_tabs[0].active"
+              class="pos-order-items__utility-actions"
+              data-auto-excel-export-actions="1"
+              data-testid="pos-order-header-export-actions"
             >
               <slot name="headerActions"></slot>
             </div>
           </div>
         </div>
         <div
-            v-if="showSidebarTabsInHeader"
-            class="tabs is-small is-centered pos-order-items__sidebar-tabs pos-sidebar-panel-tabs is-hidden-touch"
-            data-testid="pos-order-sidebar-tabs"
+          v-if="showSidebarTabsInHeader"
+          class="tabs is-small is-centered pos-order-items__sidebar-tabs pos-sidebar-panel-tabs is-hidden-touch"
+          data-testid="pos-order-sidebar-tabs"
         >
           <ul>
-            <li
-                v-for="(tab, index) in panel_tabs"
-                :key="index"
-                :class="{ 'is-active': tab.active }"
-            >
+            <li v-for="(tab, index) in panel_tabs" :key="index" :class="{ 'is-active': tab.active }">
               <a @click="activateTab(tab)">
                 <span v-if="tab.icon" class="icon is-small">
                   <i :class="tab.icon"></i>
@@ -421,11 +442,11 @@ const deleteOrderItem = async (orderItemId) => {
       <nav class="pos-order-items__tabs-row is-hidden-touch" v-if="!showSidebarTabsInHeader && panel_tabs.length > 1">
         <p class="panel-tabs pos-order-items__tabs">
           <a
-              v-for="(tab, index) in panel_tabs"
-              :key="index"
-              :class="{'is-active': tab.active}"
-              :data-testid="isOrderDetailVariant ? `pos-order-tab-${tab.id}` : undefined"
-              @click="activateTab(tab)"
+            v-for="(tab, index) in panel_tabs"
+            :key="index"
+            :class="{ 'is-active': tab.active }"
+            :data-testid="isOrderDetailVariant ? `pos-order-tab-${tab.id}` : undefined"
+            @click="activateTab(tab)"
           >
             <span v-if="tab.icon" class="icon is-small">
               <i :class="tab.icon"></i>
@@ -436,16 +457,13 @@ const deleteOrderItem = async (orderItemId) => {
       </nav>
       <!-- Mobile nav -->
       <div class="is-hidden-desktop mt-2">
-        <div
-          class="buttons is-centered is-mobile pos-order-items__mobile-tabs"
-          data-testid="pos-order-mobile-tabs"
-        >
+        <div class="buttons is-centered is-mobile pos-order-items__mobile-tabs" data-testid="pos-order-mobile-tabs">
           <button
-              v-for="(tab, index) in panel_tabs"
-              :key="index"
-              :class="['button', 'is-fullwidth', tab.active ? 'is-link' : 'is-light']"
-              :data-testid="isOrderDetailVariant ? `pos-order-tab-${tab.id}` : undefined"
-              @click="activateTab(tab)"
+            v-for="(tab, index) in panel_tabs"
+            :key="index"
+            :class="['button', 'is-fullwidth', tab.active ? 'is-link' : 'is-light']"
+            :data-testid="isOrderDetailVariant ? `pos-order-tab-${tab.id}` : undefined"
+            @click="activateTab(tab)"
           >
             <!-- If the tab has an icon, show it -->
             <span v-if="tab.icon" class="icon is-small">
@@ -456,7 +474,11 @@ const deleteOrderItem = async (orderItemId) => {
         </div>
       </div>
       <!-- Cart -->
-      <div v-if="panel_tabs[0].active" class="pos-order-items__tab-panel" :data-testid="isOrderDetailVariant ? 'pos-order-panel-cart' : undefined">
+      <div
+        v-if="panel_tabs[0].active"
+        class="pos-order-items__tab-panel"
+        :data-testid="isOrderDetailVariant ? 'pos-order-panel-cart' : undefined"
+      >
         <div class="panel-block pos-order-items__panel-block pos-order-items__panel-block--cart">
           <div v-if="isOrderDetailVariant" class="pos-order-items__order-detail-cart">
             <div v-if="$slots.beforeItems" class="pos-order-items__table-banner">
@@ -493,101 +515,115 @@ const deleteOrderItem = async (orderItemId) => {
           <table v-if="false" class="table is-fullwidth pos-order-items__table">
             <thead>
               <tr>
-                <th>{{ $t('admin.pos.product') }}</th>
-                <th style="width: 20%; text-align: right;">{{ $t('admin.pos.price_dkk') }}</th>
-                <th v-if="editPossible" class="pos-order-items__actions-header" :style="{ width: isOrderDetailVariant ? '18%' : '15%' }">
-                  {{ isOrderDetailVariant ? $t('global.actions') : '' }}
+                <th>{{ $t("admin.pos.product") }}</th>
+                <th style="width: 20%; text-align: right">{{ $t("admin.pos.price_dkk") }}</th>
+                <th
+                  v-if="editPossible"
+                  class="pos-order-items__actions-header"
+                  :style="{ width: isOrderDetailVariant ? '18%' : '15%' }"
+                >
+                  {{ isOrderDetailVariant ? $t("global.actions") : "" }}
                 </th>
               </tr>
             </thead>
             <tbody>
-            <!-- Slot -->
-            <slot name="beforeItems"></slot>
-            <template v-for="orderItem in visibleOrderItems" :key="orderItem.id">
-              <tr
+              <!-- Slot -->
+              <slot name="beforeItems"></slot>
+              <template v-for="orderItem in visibleOrderItems" :key="orderItem.id">
+                <tr
                   :id="'order-item-' + orderItem.id"
                   v-if="!orderItem.related_item_id"
-                  :style="{ 'border-bottom-style': getItemRelatedItems(visibleOrderItems, orderItem.id).length > 0 ? 'hidden' : '' }"
-                  style="border-top: 1px solid #f5f5f5;"
-              >
-                <td>
-                  <span>{{ getOrderItemProductName(orderItem) }}</span>
-                  <!-- Notes (If there are any) -->
-                  <span v-if="orderItem.notes"
-                        @mouseover="showPopper(
-                              popperBox(
-                              'Note',
-                              orderItem.notes
-                              ),
-                              $event.target
-                            )"
-                        @mouseleave="removePopperIfOpen()"
-                        @click="openOrderItemEditor(orderItem)"
-                        class="ml-2 is-size-7 has-text-grey is-clickable">
-                    <i class="fas fa-comment"></i>
-                    {{ $t('admin.pos.see_note') }}
-                  </span>
-                  <!-- Reference (If there are any) -->
-                  <span v-if="orderItem.reference"
-                        @mouseover="showPopper(
-                            popperBox(
-                                'Reference',
-                                orderItem.reference
-                                ),
-                                $event.target
-                            )"
-                        @mouseleave="removePopperIfOpen()"
-                        @click="openOrderItemEditor(orderItem)"
-                        class="ml-2 is-size-7 has-text-grey is-clickable">
-                    <i class="fas fa-link"></i>
-                    {{ $t('admin.pos.see_reference') }}
-                  </span>
-                  <!-- Quantity (If it is more than 1) -->
-                  <span v-if="orderItem.quantity > 1"
-                        @mouseover="showPopper(
-                            popperBox(
-                                'Antal',
-                                orderItem.quantity
-                                ),
-                                $event.target
-                            )"
-                        @mouseleave="removePopperIfOpen()"
-                        @click="openOrderItemEditor(orderItem)"
-                        class="ml-2 is-size-7 has-text-grey is-clickable">
-                    <i class="fas fa-box"></i>
-                    {{ $t('admin.pos.quantity') }}: {{ orderItem.quantity }}
-                  </span>
-                </td>
-                <!-- If the price has been changed, show the new price (With a strike-through) and the old price -->
-                <td style="width: 20%; text-align: right;" v-if="orderItem.price !== getOrderItemBasePrice(orderItem)">
-                  <span
-                      @mouseover="showPopper(
-                        popperBox(
+                  :style="{
+                    'border-bottom-style':
+                      getItemRelatedItems(visibleOrderItems, orderItem.id).length > 0 ? 'hidden' : '',
+                  }"
+                  style="border-top: 1px solid #f5f5f5"
+                >
+                  <td>
+                    <span>{{ getOrderItemProductName(orderItem) }}</span>
+                    <!-- Notes (If there are any) -->
+                    <span
+                      v-if="orderItem.notes"
+                      @mouseover="showPopper(popperBox('Note', orderItem.notes), $event.target)"
+                      @mouseleave="removePopperIfOpen()"
+                      @click="openOrderItemEditor(orderItem)"
+                      class="ml-2 is-size-7 has-text-grey is-clickable"
+                    >
+                      <i class="fas fa-comment"></i>
+                      {{ $t("admin.pos.see_note") }}
+                    </span>
+                    <!-- Reference (If there are any) -->
+                    <span
+                      v-if="orderItem.reference"
+                      @mouseover="showPopper(popperBox('Reference', orderItem.reference), $event.target)"
+                      @mouseleave="removePopperIfOpen()"
+                      @click="openOrderItemEditor(orderItem)"
+                      class="ml-2 is-size-7 has-text-grey is-clickable"
+                    >
+                      <i class="fas fa-link"></i>
+                      {{ $t("admin.pos.see_reference") }}
+                    </span>
+                    <!-- Quantity (If it is more than 1) -->
+                    <span
+                      v-if="orderItem.quantity > 1"
+                      @mouseover="showPopper(popperBox('Antal', orderItem.quantity), $event.target)"
+                      @mouseleave="removePopperIfOpen()"
+                      @click="openOrderItemEditor(orderItem)"
+                      class="ml-2 is-size-7 has-text-grey is-clickable"
+                    >
+                      <i class="fas fa-box"></i>
+                      {{ $t("admin.pos.quantity") }}: {{ orderItem.quantity }}
+                    </span>
+                  </td>
+                  <!-- If the price has been changed, show the new price (With a strike-through) and the old price -->
+                  <td style="width: 20%; text-align: right" v-if="orderItem.price !== getOrderItemBasePrice(orderItem)">
+                    <span
+                      @mouseover="
+                        showPopper(
+                          popperBox(
                             'Pris',
-                            'Pris ændret fra ' + getOrderItemBasePrice(orderItem) + ' DKK til ' + orderItem.price + ' DKK / Enhed (' + orderItem.price * orderItem.quantity + ' DKK i alt)'
-                            ),
-                            $event.target
-                        )"
-                      @mouseleave="removePopperIfOpen()">
-                  <span style="text-decoration: line-through;" class="has-text-dark">{{ getOrderItemBasePrice(orderItem) * orderItem.quantity}}</span> <span>{{ orderItem.price * orderItem.quantity }}</span>
-                  </span>
-                </td>
-                <td style="width: 20%; text-align: right;" v-else>
-                  <span
-                      @mouseover="showPopper(
-                        popperBox(
+                            'Pris ændret fra ' +
+                              getOrderItemBasePrice(orderItem) +
+                              ' DKK til ' +
+                              orderItem.price +
+                              ' DKK / Enhed (' +
+                              orderItem.price * orderItem.quantity +
+                              ' DKK i alt)'
+                          ),
+                          $event.target
+                        )
+                      "
+                      @mouseleave="removePopperIfOpen()"
+                    >
+                      <span style="text-decoration: line-through" class="has-text-dark">{{
+                        getOrderItemBasePrice(orderItem) * orderItem.quantity
+                      }}</span>
+                      <span>{{ orderItem.price * orderItem.quantity }}</span>
+                    </span>
+                  </td>
+                  <td style="width: 20%; text-align: right" v-else>
+                    <span
+                      @mouseover="
+                        showPopper(
+                          popperBox(
                             'Pris',
                             orderItem.price + ' DKK / Enhed (' + orderItem.price * orderItem.quantity + ' DKK i alt)'
-                            ),
-                            $event.target
-                        )"
-                      @mouseleave="removePopperIfOpen()">
-                    {{ orderItem.price * orderItem.quantity }}
-                  </span>
-                </td>
-                <td v-if="editPossible" class="pos-order-items__action-cell" :style="{ width: isOrderDetailVariant ? '18%' : '15%' }">
-                  <div v-if="showInlineActionButtons" class="pos-order-items__item-actions">
-                    <button
+                          ),
+                          $event.target
+                        )
+                      "
+                      @mouseleave="removePopperIfOpen()"
+                    >
+                      {{ orderItem.price * orderItem.quantity }}
+                    </span>
+                  </td>
+                  <td
+                    v-if="editPossible"
+                    class="pos-order-items__action-cell"
+                    :style="{ width: isOrderDetailVariant ? '18%' : '15%' }"
+                  >
+                    <div v-if="showInlineActionButtons" class="pos-order-items__item-actions">
+                      <button
                         class="button is-small pos-order-items__item-action pos-order-items__item-action--edit"
                         type="button"
                         :data-testid="`pos-order-item-edit-${orderItem.id}`"
@@ -595,132 +631,16 @@ const deleteOrderItem = async (orderItemId) => {
                         :aria-label="$t('admin.pos.edit')"
                         :title="$t('admin.pos.edit')"
                         @click="openOrderItemEditor(orderItem)"
-                    >
-                      <span class="icon is-small"><i class="fas fa-pen"></i></span>
-                    </button>
-                    <button
+                      >
+                        <span class="icon is-small"><i class="fas fa-pen"></i></span>
+                      </button>
+                      <button
                         class="button is-small pos-order-items__item-action pos-order-items__item-action--delete"
                         type="button"
                         :data-testid="`pos-order-item-delete-${orderItem.id}`"
                         :aria-label="$t('admin.pos.delete')"
                         :title="$t('admin.pos.delete')"
                         @click="deleteOrderItem(orderItem.id)"
-                    >
-                      <span class="icon is-small"><i class="fas fa-trash"></i></span>
-                    </button>
-                  </div>
-                  <div v-else class="buttons is-narrow">
-                    <ActionSettingsWheelButton>
-                      <template #actions>
-                        <ActionSettingsWheelItem
-                          :label="$t('admin.pos.delete')"
-                          icon="fas fa-trash"
-                          template="danger"
-                          @click="deleteOrderItem(orderItem.id)"
-                        />
-                        <ActionSettingsWheelItem
-                          :label="$t('admin.pos.edit')"
-                          icon="fas fa-edit"
-                          template="warning"
-                          :disabled="!SessionUser.hasPermission('edit_order_items') || props.disallowItemEdit"
-                          @click="openOrderItemEditor(orderItem)"
-                        />
-                      </template>
-                    </ActionSettingsWheelButton>
-                  </div>
-                </td>
-              </tr>
-              <!-- Related items -->
-              <template v-for="relatedItem in getItemRelatedItems(visibleOrderItems, orderItem.id)" :key="relatedItem.id">
-                <tr
-                    :id="'order-item-' + relatedItem.id"
-                    :style="{ 'border-bottom-style': isLastRelatedItem(visibleOrderItems, relatedItem) ? '' : 'hidden' }"
-                >
-                  <td>
-                    <span class="related-item-text is-one-line-hide-overflow">
-                      <span>+ <template v-if="relatedItem.quantity > 1">{{ relatedItem.quantity }} x</template>{{ getOrderItemProductName(relatedItem) }}</span>
-                    </span>
-                    <span class="is-size-7 has-text-grey">
-                    <!-- Notes (If there are any) -->
-                    <span v-if="relatedItem.notes"
-                          @mouseover="showPopper(
-                              popperBox(
-                              'Note',
-                              relatedItem.notes
-                              ),
-                              $event.target
-                          )"
-                          @mouseleave="removePopperIfOpen()"
-                          @click="openOrderItemEditor(relatedItem)"
-                          class="ml-2 is-size-7 has-text-grey is-clickable">
-                      <i class="fas fa-comment"></i>
-                      {{ $t('admin.pos.see_note') }}
-                    </span>
-                    <!-- Reference (If there are any) -->
-                    <span v-if="relatedItem.reference"
-                          @mouseover="showPopper(
-                              popperBox(
-                                  'Reference',
-                                  relatedItem.reference
-                                  ),
-                                  $event.target
-                              )"
-                          @mouseleave="removePopperIfOpen()"
-                          @click="openOrderItemEditor(relatedItem)"
-                          class="ml-2 is-size-7 has-text-grey is-clickable">
-                      <i class="fas fa-link"></i>
-                      {{ $t('admin.pos.see_reference') }}
-                    </span>
-                    </span>
-                  </td>
-                  <!-- If the price has been changed, show the new price (With a strike-through) and the old price -->
-                  <td style="width: 20%; text-align: right;" v-if="relatedItem.price !== getOrderItemBasePrice(relatedItem)">
-                    <span
-                        @mouseover="showPopper(
-                            popperBox(
-                                'Pris',
-                                'Pris ændret fra ' + getOrderItemBasePrice(relatedItem) + ' DKK til ' + relatedItem.price + ' DKK / Enhed (' + relatedItem.price * relatedItem.quantity + ' DKK i alt)'
-                                ),
-                                $event.target
-                            )"
-                        @mouseleave="removePopperIfOpen()">
-                    <span style="text-decoration: line-through;" class="has-text-dark related-item-text">{{ getOrderItemBasePrice(relatedItem) * relatedItem.quantity}}</span> <span>{{ relatedItem.price * relatedItem.quantity }} DKK</span>
-                    </span>
-                  </td>
-                  <td style="width: 20%; text-align: right;" v-else>
-                    <span
-                        class="related-item-text"
-                        @mouseover="showPopper(
-                            popperBox(
-                                'Pris',
-                                relatedItem.price + ' DKK / Enhed (' + relatedItem.price * relatedItem.quantity + ' DKK i alt)'
-                                ),
-                                $event.target
-                            )"
-                        @mouseleave="removePopperIfOpen()">
-                      {{ relatedItem.price * relatedItem.quantity }}
-                    </span>
-                  </td>
-                  <td v-if="editPossible" class="pos-order-items__action-cell" :style="{ width: isOrderDetailVariant ? '18%' : '15%' }">
-                    <div v-if="showInlineActionButtons" class="pos-order-items__item-actions">
-                      <button
-                          class="button is-small pos-order-items__item-action pos-order-items__item-action--edit"
-                          type="button"
-                          :data-testid="`pos-order-item-edit-${relatedItem.id}`"
-                          :disabled="!canEditOrderItems"
-                          :aria-label="$t('admin.pos.edit')"
-                          :title="$t('admin.pos.edit')"
-                          @click="openOrderItemEditor(relatedItem)"
-                      >
-                        <span class="icon is-small"><i class="fas fa-pen"></i></span>
-                      </button>
-                      <button
-                          class="button is-small pos-order-items__item-action pos-order-items__item-action--delete"
-                          type="button"
-                          :data-testid="`pos-order-item-delete-${relatedItem.id}`"
-                          :aria-label="$t('admin.pos.delete')"
-                          :title="$t('admin.pos.delete')"
-                          @click="deleteOrderItem(relatedItem.id)"
                       >
                         <span class="icon is-small"><i class="fas fa-trash"></i></span>
                       </button>
@@ -732,66 +652,216 @@ const deleteOrderItem = async (orderItemId) => {
                             :label="$t('admin.pos.delete')"
                             icon="fas fa-trash"
                             template="danger"
-                            @click="deleteOrderItem(relatedItem.id)"
+                            @click="deleteOrderItem(orderItem.id)"
                           />
                           <ActionSettingsWheelItem
                             :label="$t('admin.pos.edit')"
                             icon="fas fa-edit"
                             template="warning"
                             :disabled="!SessionUser.hasPermission('edit_order_items') || props.disallowItemEdit"
-                            @click="openOrderItemEditor(relatedItem)"
+                            @click="openOrderItemEditor(orderItem)"
                           />
                         </template>
                       </ActionSettingsWheelButton>
                     </div>
                   </td>
                 </tr>
+                <!-- Related items -->
+                <template
+                  v-for="relatedItem in getItemRelatedItems(visibleOrderItems, orderItem.id)"
+                  :key="relatedItem.id"
+                >
+                  <tr
+                    :id="'order-item-' + relatedItem.id"
+                    :style="{
+                      'border-bottom-style': isLastRelatedItem(visibleOrderItems, relatedItem) ? '' : 'hidden',
+                    }"
+                  >
+                    <td>
+                      <span class="related-item-text is-one-line-hide-overflow">
+                        <span
+                          >+ <template v-if="relatedItem.quantity > 1">{{ relatedItem.quantity }} x</template
+                          >{{ getOrderItemProductName(relatedItem) }}</span
+                        >
+                      </span>
+                      <span class="is-size-7 has-text-grey">
+                        <!-- Notes (If there are any) -->
+                        <span
+                          v-if="relatedItem.notes"
+                          @mouseover="showPopper(popperBox('Note', relatedItem.notes), $event.target)"
+                          @mouseleave="removePopperIfOpen()"
+                          @click="openOrderItemEditor(relatedItem)"
+                          class="ml-2 is-size-7 has-text-grey is-clickable"
+                        >
+                          <i class="fas fa-comment"></i>
+                          {{ $t("admin.pos.see_note") }}
+                        </span>
+                        <!-- Reference (If there are any) -->
+                        <span
+                          v-if="relatedItem.reference"
+                          @mouseover="showPopper(popperBox('Reference', relatedItem.reference), $event.target)"
+                          @mouseleave="removePopperIfOpen()"
+                          @click="openOrderItemEditor(relatedItem)"
+                          class="ml-2 is-size-7 has-text-grey is-clickable"
+                        >
+                          <i class="fas fa-link"></i>
+                          {{ $t("admin.pos.see_reference") }}
+                        </span>
+                      </span>
+                    </td>
+                    <!-- If the price has been changed, show the new price (With a strike-through) and the old price -->
+                    <td
+                      style="width: 20%; text-align: right"
+                      v-if="relatedItem.price !== getOrderItemBasePrice(relatedItem)"
+                    >
+                      <span
+                        @mouseover="
+                          showPopper(
+                            popperBox(
+                              'Pris',
+                              'Pris ændret fra ' +
+                                getOrderItemBasePrice(relatedItem) +
+                                ' DKK til ' +
+                                relatedItem.price +
+                                ' DKK / Enhed (' +
+                                relatedItem.price * relatedItem.quantity +
+                                ' DKK i alt)'
+                            ),
+                            $event.target
+                          )
+                        "
+                        @mouseleave="removePopperIfOpen()"
+                      >
+                        <span style="text-decoration: line-through" class="has-text-dark related-item-text">{{
+                          getOrderItemBasePrice(relatedItem) * relatedItem.quantity
+                        }}</span>
+                        <span>{{ relatedItem.price * relatedItem.quantity }} DKK</span>
+                      </span>
+                    </td>
+                    <td style="width: 20%; text-align: right" v-else>
+                      <span
+                        class="related-item-text"
+                        @mouseover="
+                          showPopper(
+                            popperBox(
+                              'Pris',
+                              relatedItem.price +
+                                ' DKK / Enhed (' +
+                                relatedItem.price * relatedItem.quantity +
+                                ' DKK i alt)'
+                            ),
+                            $event.target
+                          )
+                        "
+                        @mouseleave="removePopperIfOpen()"
+                      >
+                        {{ relatedItem.price * relatedItem.quantity }}
+                      </span>
+                    </td>
+                    <td
+                      v-if="editPossible"
+                      class="pos-order-items__action-cell"
+                      :style="{ width: isOrderDetailVariant ? '18%' : '15%' }"
+                    >
+                      <div v-if="showInlineActionButtons" class="pos-order-items__item-actions">
+                        <button
+                          class="button is-small pos-order-items__item-action pos-order-items__item-action--edit"
+                          type="button"
+                          :data-testid="`pos-order-item-edit-${relatedItem.id}`"
+                          :disabled="!canEditOrderItems"
+                          :aria-label="$t('admin.pos.edit')"
+                          :title="$t('admin.pos.edit')"
+                          @click="openOrderItemEditor(relatedItem)"
+                        >
+                          <span class="icon is-small"><i class="fas fa-pen"></i></span>
+                        </button>
+                        <button
+                          class="button is-small pos-order-items__item-action pos-order-items__item-action--delete"
+                          type="button"
+                          :data-testid="`pos-order-item-delete-${relatedItem.id}`"
+                          :aria-label="$t('admin.pos.delete')"
+                          :title="$t('admin.pos.delete')"
+                          @click="deleteOrderItem(relatedItem.id)"
+                        >
+                          <span class="icon is-small"><i class="fas fa-trash"></i></span>
+                        </button>
+                      </div>
+                      <div v-else class="buttons is-narrow">
+                        <ActionSettingsWheelButton>
+                          <template #actions>
+                            <ActionSettingsWheelItem
+                              :label="$t('admin.pos.delete')"
+                              icon="fas fa-trash"
+                              template="danger"
+                              @click="deleteOrderItem(relatedItem.id)"
+                            />
+                            <ActionSettingsWheelItem
+                              :label="$t('admin.pos.edit')"
+                              icon="fas fa-edit"
+                              template="warning"
+                              :disabled="!SessionUser.hasPermission('edit_order_items') || props.disallowItemEdit"
+                              @click="openOrderItemEditor(relatedItem)"
+                            />
+                          </template>
+                        </ActionSettingsWheelButton>
+                      </div>
+                    </td>
+                  </tr>
                 </template>
-            </template>
+              </template>
               <slot name="bottom-order-items"></slot>
             </tbody>
             <tfoot>
               <tr>
-                <td>{{ $t('admin.pos.total') }}</td>
-                <td colspan="1" style="width: 20%; text-align: right;">
+                <td>{{ $t("admin.pos.total") }}</td>
+                <td colspan="1" style="width: 20%; text-align: right">
                   <span
-                      @mouseover="showPopper(
-                        popperBox(
-                            'Total',
-                            'Total pris for ordren: ' + totalPrice + ' DKK'
-                            ),
-                            $event.target
-                        )"
-                      @mouseleave="removePopperIfOpen()">
+                    @mouseover="
+                      showPopper(popperBox('Total', 'Total pris for ordren: ' + totalPrice + ' DKK'), $event.target)
+                    "
+                    @mouseleave="removePopperIfOpen()"
+                  >
                     {{ totalPrice }} DKK
                   </span>
                 </td>
-                <td v-if="editPossible" style="width: 15%;"></td>
+                <td v-if="editPossible" style="width: 15%"></td>
               </tr>
             </tfoot>
           </table>
         </div>
-        <div class="panel-block pos-order-items__panel-block pos-order-items__panel-block--secondary" v-if="$slots.bottom">
+        <div
+          class="panel-block pos-order-items__panel-block pos-order-items__panel-block--secondary"
+          v-if="$slots.bottom"
+        >
           <!-- Bottom slot -->
           <slot name="bottom"></slot>
         </div>
       </div>
       <!-- Attachments -->
-      <div v-if="panel_tabs[1] && panel_tabs[1].active" :data-testid="isOrderDetailVariant ? 'pos-order-panel-attachments' : undefined">
+      <div
+        v-if="panel_tabs[1] && panel_tabs[1].active"
+        :data-testid="isOrderDetailVariant ? 'pos-order-panel-attachments' : undefined"
+      >
         <div class="panel-block is-fullwidth pos-order-items__panel-block pos-order-items__panel-block--secondary">
           <!-- Attachments slot -->
           <slot name="attachments"></slot>
         </div>
       </div>
       <!-- Advanced -->
-      <div v-if="panel_tabs[2] && panel_tabs[2].active" :data-testid="isOrderDetailVariant ? 'pos-order-panel-settings' : undefined">
+      <div
+        v-if="panel_tabs[2] && panel_tabs[2].active"
+        :data-testid="isOrderDetailVariant ? 'pos-order-panel-settings' : undefined"
+      >
         <div class="panel-block is-fullwidth pos-order-items__panel-block pos-order-items__panel-block--secondary">
           <!-- Other slot -->
           <slot name="other"></slot>
         </div>
       </div>
       <!-- Details -->
-      <div v-if="panel_tabs[3] && panel_tabs[3].active" :data-testid="isOrderDetailVariant ? 'pos-order-panel-details' : undefined">
+      <div
+        v-if="panel_tabs[3] && panel_tabs[3].active"
+        :data-testid="isOrderDetailVariant ? 'pos-order-panel-details' : undefined"
+      >
         <div class="panel-block is-fullwidth pos-order-items__panel-block pos-order-items__panel-block--secondary">
           <!-- Details slot -->
           <slot name="details"></slot>
@@ -805,57 +875,55 @@ const deleteOrderItem = async (orderItemId) => {
         >
           <div class="pos-order-metadata-grid" data-testid="pos-order-metadata-grid">
             <section
-                class="pos-order-metadata-card pos-order-metadata-card--license-plates"
-                data-testid="pos-order-metadata-license-plates"
+              class="pos-order-metadata-card pos-order-metadata-card--license-plates"
+              data-testid="pos-order-metadata-license-plates"
             >
-              <p class="pos-order-metadata-label">{{ $t('admin.pos.license_plates') }}</p>
+              <p class="pos-order-metadata-label">{{ $t("admin.pos.license_plates") }}</p>
               <PosOrderLicensePlates
-                  v-bind:registration_numbers="registration_numbers"
-                  v-bind:is-loading="registrationNumbersLoading"
-                  v-bind:loadOrder="loadOrder"
-                  v-bind:order_id="activeOrderId"
+                v-bind:registration_numbers="registration_numbers"
+                v-bind:is-loading="registrationNumbersLoading"
+                v-bind:loadOrder="loadOrder"
+                v-bind:order_id="activeOrderId"
               />
             </section>
             <section
-                class="pos-order-metadata-card pos-order-metadata-card--customer-wishes"
-                data-testid="pos-order-metadata-customer-wishes"
+              class="pos-order-metadata-card pos-order-metadata-card--customer-wishes"
+              data-testid="pos-order-metadata-customer-wishes"
             >
-              <p class="pos-order-metadata-label">{{ $t('admin.pos.customer_wishes') }}</p>
+              <p class="pos-order-metadata-label">{{ $t("admin.pos.customer_wishes") }}</p>
               <POSOrderCustomerWishes
-                  v-bind:order_id="activeOrderId"
-                  v-bind:reference="reference"
-                  v-bind:po="order_po"
+                v-bind:order_id="activeOrderId"
+                v-bind:reference="reference"
+                v-bind:po="order_po"
+                v-bind:referenceRequired="referenceRequired"
+                v-bind:poRequired="poRequired"
               />
             </section>
             <section
-                class="pos-order-metadata-card pos-order-metadata-card--note"
-                data-testid="pos-order-metadata-note"
+              class="pos-order-metadata-card pos-order-metadata-card--note"
+              data-testid="pos-order-metadata-note"
             >
-              <p class="pos-order-metadata-label">{{ $t('admin.pos.order_note') }}</p>
-              <POSOrderNote
-                  v-bind:order_id="activeOrderId"
-                  v-bind:loadOrder="loadOrder"
-                  v-bind:note="order_notes"
-              />
+              <p class="pos-order-metadata-label">{{ $t("admin.pos.order_note") }}</p>
+              <POSOrderNote v-bind:order_id="activeOrderId" v-bind:loadOrder="loadOrder" v-bind:note="order_notes" />
             </section>
           </div>
         </div>
         <!-- Expander -->
         <div class="pos-order-items__expander">
           <p
-              class="has-text-centered pos-order-items__expander-trigger"
-              @click="toggleIsSelected"
-              @mouseover="expandIcon?.classList.add('has-text-link')"
-              @mouseleave="expandIcon?.classList.remove('has-text-link')"
+            class="has-text-centered pos-order-items__expander-trigger"
+            @click="toggleIsSelected"
+            @mouseover="expandIcon?.classList.add('has-text-link')"
+            @mouseleave="expandIcon?.classList.remove('has-text-link')"
           >
-          <span class="icon is-small" style="color: #c7c7c7;">
-            <i
+            <span class="icon is-small" style="color: #c7c7c7">
+              <i
                 class="fas fa-angle-down fa-lg"
                 :class="{ 'fa-rotate-180': isTabZeroExpanded }"
                 aria-hidden="true"
                 ref="expandIcon"
-            ></i>
-          </span>
+              ></i>
+            </span>
           </p>
         </div>
       </div>
@@ -866,7 +934,13 @@ const deleteOrderItem = async (orderItemId) => {
       :order-item="selectedOrderItem"
       :can-edit="canEditOrderItems"
       @saved="handleOrderItemSaved"
-      @update:modelValue="(value) => { if (!value) { closeOrderItemEditor(); } }"
+      @update:modelValue="
+        (value) => {
+          if (!value) {
+            closeOrderItemEditor();
+          }
+        }
+      "
     />
   </div>
 </template>
@@ -1221,6 +1295,4 @@ const deleteOrderItem = async (orderItemId) => {
     justify-content: flex-start;
   }
 }
-
 </style>
-
diff --git a/src/components/displays/department/pos/PosSelectedCustomer.vue b/src/components/displays/department/pos/PosSelectedCustomer.vue
index 056c54b5..beeafdc2 100644
--- a/src/components/displays/department/pos/PosSelectedCustomer.vue
+++ b/src/components/displays/department/pos/PosSelectedCustomer.vue
@@ -1,194 +1,217 @@
 <script setup>
-import { customer_name, customer_id, customer_data, customer_attributes, loadCustomerAttributes, hideDiscountsCatalog, hidePricesCatalog, setHidePricesCatalog, setHideDiscountsCatalog, getHideDiscountsCatalog, getHidePricesCatalog, getUserDiscounts, user_discounts } from "@/components/shop/POSDepartmentProcess.vue";
+import {
+  customer_name,
+  customer_id,
+  customer_data,
+  customer_attributes,
+  loadCustomerAttributes,
+  hideDiscountsCatalog,
+  hidePricesCatalog,
+  setHidePricesCatalog,
+  setHideDiscountsCatalog,
+  getHideDiscountsCatalog,
+  getHidePricesCatalog,
+  getUserDiscounts,
+  user_discounts,
+} from "@/components/shop/POSDepartmentProcess.vue";
 import { createAttribute, deleteAttribute } from "@/components/shop/CustomerAttributes.vue";
-import {computed, ref, watch} from 'vue';
-import 'bulma-switch/dist/css/bulma-switch.min.css';
-import 'bulma-block-list/src/block-list.scss';
-import {SessionUser} from "@/components/session/token/SessionUser.vue";
-import {popperBox, popper, removePopperIfOpen, showPopperWithContent, showPopper} from "@/components/displays/PopperDefault.vue";
+import { computed, ref, watch } from "vue";
+import "bulma-switch/dist/css/bulma-switch.min.css";
+import "bulma-block-list/src/block-list.scss";
+import { SessionUser } from "@/components/session/token/SessionUser.vue";
+import {
+  popperBox,
+  popper,
+  removePopperIfOpen,
+  showPopperWithContent,
+  showPopper,
+} from "@/components/displays/PopperDefault.vue";
 import RequiresPermission from "@/components/displays/permissionbased/RequiresPermission.vue";
-import CustomerDiscountsDepartmentDisplay
-  from "@/components/displays/department/pos/displays/CustomerDiscountsDepartmentDisplay.vue";
+import CustomerDiscountsDepartmentDisplay from "@/components/displays/department/pos/displays/CustomerDiscountsDepartmentDisplay.vue";
 import ExpandableContentBox from "@/components/displays/boxes/ExpandableContentBox.vue";
 
 const panel_tabs = ref([
   {
-    key: 'details',
-    name: 'Detaljer',
+    key: "details",
+    name: "Detaljer",
     active: true,
-    permission: 'get_user'
+    permission: "get_user",
   },
   {
-    key: 'rules',
-    name: 'Regler',
+    key: "rules",
+    name: "Regler",
     active: false,
-    permission: 'list_customer_attributes'
+    permission: "list_customer_attributes",
   },
   {
-    key: 'shortcuts',
-    name: 'Genveje',
+    key: "shortcuts",
+    name: "Genveje",
     active: false,
   },
   {
-    key: 'discounts',
-    name: 'Rabatter',
+    key: "discounts",
+    name: "Rabatter",
     active: false,
-    permission: 'get_custom_prices_other'
-  }
+    permission: "get_custom_prices_other",
+  },
 ]);
 
 const details = ref([
   {
-    name: 'Kunde nummer',
-    prop: 'customerNumber',
-    icon: 'fas fa-user'
+    name: "Kunde nummer",
+    prop: "customerNumber",
+    icon: "fas fa-user",
   },
   {
-    name: 'Navn',
-    prop: 'name',
-    icon: 'fas fa-user'
+    name: "Navn",
+    prop: "name",
+    icon: "fas fa-user",
   },
   {
-    name: 'Adresse',
-    prop: 'address',
-    icon: 'fas fa-map-marker-alt'
+    name: "Adresse",
+    prop: "address",
+    icon: "fas fa-map-marker-alt",
   },
   {
-    name: 'Postnummer',
-    prop: 'zip',
-    icon: 'fas fa-map-marker-alt'
+    name: "Postnummer",
+    prop: "zip",
+    icon: "fas fa-map-marker-alt",
   },
   {
-    name: 'Kunde by',
-    prop: 'city',
-    icon: 'fas fa-map-marker-alt'
+    name: "Kunde by",
+    prop: "city",
+    icon: "fas fa-map-marker-alt",
   },
   {
-    name: 'Telefon',
-    prop: 'mobilePhone',
-    icon: 'fas fa-phone'
+    name: "Telefon",
+    prop: "mobilePhone",
+    icon: "fas fa-phone",
   },
   {
-    name: 'Email',
-    prop: 'email',
-    icon: 'fas fa-envelope'
+    name: "Email",
+    prop: "email",
+    icon: "fas fa-envelope",
   },
   {
-    name: 'CVR',
-    prop: 'corporateIdentificationNumber',
-    icon: 'fas fa-id-card'
-  }
+    name: "CVR",
+    prop: "corporateIdentificationNumber",
+    icon: "fas fa-id-card",
+  },
 ]);
 
 const attributes = ref([
   {
-    name: 'Kræver reference nr.',
-    prop: 'requiresReferenceNumber',
-    description: 'Når denne er sat, kræves der et reference nr. på ordren før den kan oprettes',
-    icon: 'fas fa-cogs'
+    name: "Kræver reference nr.",
+    prop: "requiresReferenceNumber",
+    description: "Når denne er sat, kræves der et reference nr. på ordren før den kan oprettes",
+    icon: "fas fa-cogs",
   },
   {
-    name: 'Må ikke ydes tillægsydelser',
-    prop: 'restrictAdditionalServices',
+    name: "Må ikke ydes tillægsydelser",
+    prop: "restrictAdditionalServices",
     description: 'Når denne er sat, kan der ikke tilføjes produkter i kategorien "addons" til ordren',
-    icon: 'fas fa-cogs'
+    icon: "fas fa-cogs",
   },
   {
-    name: 'Registreringsnumre på faktura linjer',
-    prop: 'requiresRegistrationNumbersInvoice',
-    description: 'Når denne er sat, bliver der sendt registreringsnumre med på alle faktura linjer',
-    icon: 'fas fa-cogs'
+    name: "Registreringsnumre på faktura linjer",
+    prop: "requiresRegistrationNumbersInvoice",
+    description: "Når denne er sat, bliver der sendt registreringsnumre med på alle faktura linjer",
+    icon: "fas fa-cogs",
   },
   {
-    name: 'Fakturer alle ordrer individuelt',
-    prop: 'invoiceAllOrdersIndividually',
-    description: 'Når denne er sat, faktureres alle ordrer individuelt og ikke samlet',
-    icon: 'fas fa-cogs'
+    name: "Fakturer alle ordrer individuelt",
+    prop: "invoiceAllOrdersIndividually",
+    description: "Når denne er sat, faktureres alle ordrer individuelt og ikke samlet",
+    icon: "fas fa-cogs",
   },
   {
-    name: 'Må ikke ydes tank cleaning',
-    prop: 'restrictTankCleaning',
+    name: "Må ikke ydes tank cleaning",
+    prop: "restrictTankCleaning",
     description: 'Når denne er sat, kan der ikke tilføjes produkter i kategorien "tank cleaning" til ordren',
-    icon: 'fas fa-cogs'
+    icon: "fas fa-cogs",
   },
   {
-    name: 'Må ikke ydes spot free',
-    prop: 'restrictSpotFree',
+    name: "Må ikke ydes spot free",
+    prop: "restrictSpotFree",
     description: 'Når denne er sat, kan der ikke tilføjes produkter i kategorien "spot free" til ordren',
-    icon: 'fas fa-cogs'
+    icon: "fas fa-cogs",
   },
   {
-    name: 'Må ikke ydes indvendig vask',
-    prop: 'restrictInteriorCleaning',
+    name: "Må ikke ydes indvendig vask",
+    prop: "restrictInteriorCleaning",
     description: 'Når denne er sat, kan der ikke tilføjes produkter i kategorien "interior cleaning" til ordren',
-    icon: 'fas fa-cogs'
+    icon: "fas fa-cogs",
   },
   {
-    name: 'Faktureres med Stripe',
-    prop: 'invoiceWithStripe',
-    description: 'Når denne er sat, faktureres ordren med Stripe',
-    icon: 'fas fa-cogs'
+    name: "Faktureres med Stripe",
+    prop: "invoiceWithStripe",
+    description: "Når denne er sat, faktureres ordren med Stripe",
+    icon: "fas fa-cogs",
   },
   {
-    name: 'Only tank cleaning',
-    prop: 'onlyTankCleaning',
+    name: "Only tank cleaning",
+    prop: "onlyTankCleaning",
     description: 'Når denne er sat, bliver kunden kategoriseret som "Tank cleaning" kunde.',
-    icon: 'fas fa-cogs'
+    icon: "fas fa-cogs",
   },
   {
-    name: 'Vises priser på kunde og bookingside',
-    prop: 'showPricesOnBookingPage',
-    description: 'Når denne er sat, bliver kunden vist priser på kunde og bookingsiden.',
-    icon: 'fas fa-cogs'
+    name: "Vises priser på kunde og bookingside",
+    prop: "showPricesOnBookingPage",
+    description: "Når denne er sat, bliver kunden vist priser på kunde og bookingsiden.",
+    icon: "fas fa-cogs",
   },
   {
-    name: 'Bruger PO nummer',
-    prop: 'usePONumbers',
-    description: 'Når denne er sat, kan kunden angive et PO nummer på ordrer.',
-    icon: 'fas fa-cogs'
+    name: "Bruger PO nummer",
+    prop: "usePONumbers",
+    description: "Når denne er sat, kan kunden angive et PO nummer på ordrer.",
+    icon: "fas fa-cogs",
   },
   {
-    name: 'Undtaget fra månedligt administrations- og miljøgebyr',
-    prop: 'exemptFromAdministrationFee',
-    description: 'Når denne er sat, bliver kunden undtaget fra månedligt administrations- og miljøgebyr.',
-    icon: 'fas fa-cogs'
+    name: "Undtaget fra månedligt administrations- og miljøgebyr",
+    prop: "exemptFromAdministrationFee",
+    description: "Når denne er sat, bliver kunden undtaget fra månedligt administrations- og miljøgebyr.",
+    icon: "fas fa-cogs",
   },
 ]);
 
 const shortcuts = ref([
   {
-    name: 'Administrer kunde',
-    icon: 'fas fa-user-edit',
+    name: "Administrer kunde",
+    icon: "fas fa-user-edit",
     // Open link in new tab
     action: () => {
-      SessionUser.adminUser.customers.fromCustomerNumber.getUserId(customer_id.value).then(response => window.open('/superuser/users/' + response.data.data.user_id, '_blank'));
+      SessionUser.adminUser.customers.fromCustomerNumber
+        .getUserId(customer_id.value)
+        .then((response) => window.open("/superuser/users/" + response.data.data.user_id, "_blank"));
     },
-    visible: SessionUser.canAccessSuperUser()
+    visible: SessionUser.canAccessSuperUser(),
   },
   {
-    name: 'Vaskeabonnement & Specialaftaler',
-    icon: 'fas fa-user-edit',
+    name: "Vaskeabonnement & Specialaftaler",
+    icon: "fas fa-user-edit",
     // Open link in new tab
     action: () => {
-      SessionUser.adminUser.customers.fromCustomerNumber.getUserId(customer_id.value).then(response => window.open('/superuser/users/' + response.data.data.user_id + '/other', '_blank'));
+      SessionUser.adminUser.customers.fromCustomerNumber
+        .getUserId(customer_id.value)
+        .then((response) => window.open("/superuser/users/" + response.data.data.user_id + "/other", "_blank"));
     },
-    visible: SessionUser.canAccessSuperUser()
+    visible: SessionUser.canAccessSuperUser(),
   },
 ]);
 
 const props = defineProps({
   variant: {
     type: String,
-    default: 'default',
-    validator: (value) => ['default', 'order-detail', 'sidebar'].includes(value),
+    default: "default",
+    validator: (value) => ["default", "order-detail", "sidebar"].includes(value),
   },
 });
 
 const rootClasses = computed(() => ({
-  'pos-selected-customer': true,
+  "pos-selected-customer": true,
   [`pos-selected-customer--${props.variant}`]: true,
 }));
-const isSidebarVariant = computed(() => props.variant === 'sidebar');
+const isSidebarVariant = computed(() => props.variant === "sidebar");
 const isRulesTabActive = computed(() => panel_tabs.value[1]?.active === true);
 
 const setActiveTab = (selectedIndex) => {
@@ -198,37 +221,46 @@ const setActiveTab = (selectedIndex) => {
 };
 
 const refreshCustomerAttributesForRules = async (selectedCustomerNumber = customer_id.value) => {
-  if (!isRulesTabActive.value) {
+  if (!selectedCustomerNumber) {
     return customer_attributes.value;
   }
+
   return loadCustomerAttributes(selectedCustomerNumber);
 };
 
-
-
 /** Check if an attribute is set in the customer attributes */
 const hasAttribute = (prop) => {
-  return customer_attributes.value.some(attribute => attribute.attribute === prop);
+  return customer_attributes.value.some((attribute) => attribute.attribute === prop);
 };
 
-watch(isRulesTabActive, (isActive) => {
-  if (!isActive) {
-    return;
-  }
-  void refreshCustomerAttributesForRules();
-}, { immediate: true });
+watch(
+  isRulesTabActive,
+  (isActive) => {
+    if (!isActive) {
+      return;
+    }
+    void refreshCustomerAttributesForRules();
+  },
+  { immediate: true }
+);
 
-watch(() => customer_id.value, (nextCustomerId, previousCustomerId) => {
-  if (!nextCustomerId || nextCustomerId === previousCustomerId || !isRulesTabActive.value) {
-    return;
-  }
-  void refreshCustomerAttributesForRules(nextCustomerId);
-});
+watch(
+  () => customer_id.value,
+  (nextCustomerId, previousCustomerId) => {
+    if (!nextCustomerId || nextCustomerId === previousCustomerId) {
+      return;
+    }
+    void refreshCustomerAttributesForRules(nextCustomerId);
+  },
+  { immediate: true }
+);
 
 const isCustomerDetailsExpanded = ref(false);
 
 const customer_data_has_empty_details = () => {
-  return details.value.some(detail => customer_data.value[detail.prop] === null || customer_data.value[detail.prop] === '');
+  return details.value.some(
+    (detail) => customer_data.value[detail.prop] === null || customer_data.value[detail.prop] === ""
+  );
 };
 </script>
 
@@ -248,7 +280,7 @@ const customer_data_has_empty_details = () => {
             <li
               v-for="(tab, index) in panel_tabs"
               :key="tab.key"
-              :class="{'is-active': tab.active}"
+              :class="{ 'is-active': tab.active }"
               :data-testid="`pos-customer-tab-${tab.key}`"
               @click="setActiveTab(index)"
             >
@@ -266,7 +298,10 @@ const customer_data_has_empty_details = () => {
       </div>
       <template v-if="panel_tabs[0].active" v-for="detail in details" :key="detail.name">
         <!-- Details that's not empty (unless isCustomerDetailsExpanded is true) -->
-        <a class="panel-block pos-selected-customer__row" v-if="customer_data[detail.prop] || isCustomerDetailsExpanded">
+        <a
+          class="panel-block pos-selected-customer__row"
+          v-if="customer_data[detail.prop] || isCustomerDetailsExpanded"
+        >
           <span class="panel-icon pos-selected-customer__icon">
             <i :class="detail.icon" aria-hidden="true"></i>
           </span>
@@ -276,42 +311,53 @@ const customer_data_has_empty_details = () => {
       </template>
       <!-- Details that's empty, (If there are any) -->
       <ExpandableContentBox
-          v-if="panel_tabs[0].active && customer_data_has_empty_details()"
-          @update:expanded="isCustomerDetailsExpanded = !isCustomerDetailsExpanded"
-          v-bind:expanded="isCustomerDetailsExpanded"
+        v-if="panel_tabs[0].active && customer_data_has_empty_details()"
+        @update:expanded="isCustomerDetailsExpanded = !isCustomerDetailsExpanded"
+        v-bind:expanded="isCustomerDetailsExpanded"
       />
       <!-- Attributes -->
       <RequiresPermission permission="list_customer_attributes">
-        <div class="panel-block pos-selected-customer__row" v-if="panel_tabs[1].active" v-for="attribute in attributes" :key="attribute.name">
+        <div
+          class="panel-block pos-selected-customer__row"
+          v-if="panel_tabs[1].active"
+          v-for="attribute in attributes"
+          :key="attribute.name"
+        >
           <span class="panel-icon pos-selected-customer__icon">
             <i :class="attribute.icon" aria-hidden="true"></i>
           </span>
-          <span class="pos-selected-customer__label"
-                @mouseover="showPopper(
-                              popperBox(
-                              attribute.name,
-                              attribute.description
-                              ),
-                              $event.target
-                            )"
-                @mouseleave="removePopperIfOpen()"
-          >{{ attribute.name }}</span>
+          <span
+            class="pos-selected-customer__label"
+            @mouseover="showPopper(popperBox(attribute.name, attribute.description), $event.target)"
+            @mouseleave="removePopperIfOpen()"
+            >{{ attribute.name }}</span
+          >
           <span class="pos-selected-customer__value">
-            <span v-if="hasAttribute(attribute.prop)" @click="deleteAttribute(customer_id, attribute.prop).then(() => loadCustomerAttributes())">
+            <span
+              v-if="hasAttribute(attribute.prop)"
+              @click="deleteAttribute(customer_id, attribute.prop).then(() => loadCustomerAttributes())"
+            >
               <span class="field">
-                <input :id="attribute.prop"
-                       type="checkbox" :name="attribute.prop"
-                       class="switch" checked="checked"
-                       :disabled="!SessionUser.hasPermission('delete_customer_attribute')"
+                <input
+                  :id="attribute.prop"
+                  type="checkbox"
+                  :name="attribute.prop"
+                  class="switch"
+                  checked="checked"
+                  :disabled="!SessionUser.hasPermission('delete_customer_attribute')"
                 />
                 <label :for="attribute.prop"></label>
               </span>
             </span>
             <span v-else @click="createAttribute(customer_id, attribute.prop).then(() => loadCustomerAttributes())">
               <span class="field">
-                <input :id="attribute.prop"
-                       type="checkbox" :name="attribute.prop"
-                       class="switch" :disabled="!SessionUser.hasPermission('add_customer_attribute')"/>
+                <input
+                  :id="attribute.prop"
+                  type="checkbox"
+                  :name="attribute.prop"
+                  class="switch"
+                  :disabled="!SessionUser.hasPermission('add_customer_attribute')"
+                />
                 <label :for="attribute.prop"></label>
               </span>
             </span>
@@ -332,12 +378,11 @@ const customer_data_has_empty_details = () => {
       <!-- Discounts -->
       <RequiresPermission permission="get_custom_prices_other">
         <div class="panel-block pos-selected-customer__discounts" v-if="panel_tabs[3].active">
-          <CustomerDiscountsDepartmentDisplay/>
+          <CustomerDiscountsDepartmentDisplay />
         </div>
       </RequiresPermission>
     </article>
-    <div>
-    </div>
+    <div></div>
   </div>
 </template>
 
@@ -476,5 +521,4 @@ const customer_data_has_empty_details = () => {
     max-width: none;
   }
 }
-
 </style>
diff --git a/src/components/displays/department/pos/order/POSOrderCustomerWishes.vue b/src/components/displays/department/pos/order/POSOrderCustomerWishes.vue
index 360dda08..837bbeee 100644
--- a/src/components/displays/department/pos/order/POSOrderCustomerWishes.vue
+++ b/src/components/displays/department/pos/order/POSOrderCustomerWishes.vue
@@ -3,6 +3,7 @@ import { computed, defineProps, nextTick, ref, watch } from "vue";
 import { useI18n } from "vue-i18n";
 import { SessionUser } from "@/components/session/token/SessionUser.vue";
 import { useOrderMetadataAutosave } from "@/composables/useOrderMetadataAutosave.js";
+import { isBlankPosMetadataValue } from "@/components/shop/POSDepartmentProcess.vue";
 
 const props = defineProps({
   order_id: {
@@ -17,11 +18,28 @@ const props = defineProps({
     type: String,
     required: true,
   },
+  referenceRequired: {
+    type: Boolean,
+    default: false,
+  },
+  poRequired: {
+    type: Boolean,
+    default: false,
+  },
 });
 
 const { t } = useI18n();
 
-const createCustomerWishField = ({ key, label, source, saveValue, testIdBase }) => {
+const createCustomerWishField = ({
+  key,
+  label,
+  source,
+  saveValue,
+  testIdBase,
+  isRequired,
+  warningStateWhenEmpty,
+  warningIconClass,
+}) => {
   const inputId = `${testIdBase}-input`;
   const isEditing = ref(false);
   const autosave = useOrderMetadataAutosave({
@@ -31,14 +49,21 @@ const createCustomerWishField = ({ key, label, source, saveValue, testIdBase })
       return value;
     },
   });
-  const hasValue = computed(() => autosave.draft.value.length > 0);
-
-  watch(() => autosave.draft.value, () => {
-    if (isEditing.value) {
-      autosave.scheduleSave();
-    }
+  const isEmpty = computed(() => isBlankPosMetadataValue(autosave.draft.value));
+  const hasValue = computed(() => !isEmpty.value);
+  const warningState = computed(() => {
+    return isRequired() && isEmpty.value ? warningStateWhenEmpty : null;
   });
 
+  watch(
+    () => autosave.draft.value,
+    () => {
+      if (isEditing.value) {
+        autosave.scheduleSave();
+      }
+    }
+  );
+
   const focusInput = () => {
     document.getElementById(inputId)?.focus();
   };
@@ -66,9 +91,11 @@ const createCustomerWishField = ({ key, label, source, saveValue, testIdBase })
     isEditing,
     autosave,
     hasValue,
+    warningState,
     openEditor,
     closeEditor,
     testIdBase,
+    warningIconClass,
   };
 };
 
@@ -78,6 +105,9 @@ const referenceField = createCustomerWishField({
   source: () => props.reference,
   saveValue: (value) => SessionUser.objects.orders.set.reference(props.order_id, value),
   testIdBase: "pos-order-customer-wishes-reference",
+  isRequired: () => props.referenceRequired,
+  warningStateWhenEmpty: "danger",
+  warningIconClass: "fas fa-exclamation-circle",
 });
 
 const poField = createCustomerWishField({
@@ -86,6 +116,9 @@ const poField = createCustomerWishField({
   source: () => props.po,
   saveValue: (value) => SessionUser.objects.orders.set.po(props.order_id, value),
   testIdBase: "pos-order-customer-wishes-po",
+  isRequired: () => props.poRequired,
+  warningStateWhenEmpty: "warning",
+  warningIconClass: "fas fa-exclamation-triangle",
 });
 
 const fields = [referenceField, poField];
@@ -95,38 +128,77 @@ const fields = [referenceField, poField];
   <div class="pos-order-customer-wishes">
     <div class="pos-registration-grid pos-registration-grid--customer-wishes">
       <div v-for="field in fields" :key="field.key" class="pos-registration-slot">
-        <div class="control pos-registration-control" :class="{ 'is-loading': field.autosave.isSaving.value }">
+        <div
+          class="control pos-registration-control"
+          :class="{ 'is-loading': field.autosave.isSaving.value }"
+          :data-testid="`${field.testIdBase}-control`"
+          :data-warning-state="field.warningState.value || undefined"
+        >
           <div
-              v-if="field.isEditing.value"
-              class="pos-registration-field pos-registration-field--editing"
+            v-if="field.isEditing.value"
+            class="pos-registration-field pos-registration-field--editing"
+            :class="{
+              'pos-registration-field--warning': field.warningState.value === 'warning',
+              'pos-registration-field--danger': field.warningState.value === 'danger',
+            }"
           >
-            <label class="pos-registration-field__label" :for="field.inputId">{{ field.label.value }}</label>
+            <div class="pos-registration-field__label-row">
+              <label class="pos-registration-field__label" :for="field.inputId">{{ field.label.value }}</label>
+              <span
+                v-if="field.warningState.value"
+                class="pos-registration-field__status-icon"
+                :class="{
+                  'pos-registration-field__status-icon--warning': field.warningState.value === 'warning',
+                  'pos-registration-field__status-icon--danger': field.warningState.value === 'danger',
+                }"
+                :data-testid="`${field.testIdBase}-warning-icon`"
+              >
+                <i :class="field.warningIconClass" aria-hidden="true"></i>
+              </span>
+            </div>
             <input
-                :id="field.inputId"
-                v-model="field.autosave.draft.value"
-                :data-testid="`${field.testIdBase}-input`"
-                class="pos-registration-field__input pos-registration-field__input--customer-wishes"
-                type="text"
-                autocomplete="off"
-                @blur="field.closeEditor()"
-                @keydown.enter.prevent="field.closeEditor()"
+              :id="field.inputId"
+              v-model="field.autosave.draft.value"
+              :data-testid="`${field.testIdBase}-input`"
+              class="pos-registration-field__input pos-registration-field__input--customer-wishes"
+              type="text"
+              autocomplete="off"
+              @blur="field.closeEditor()"
+              @keydown.enter.prevent="field.closeEditor()"
             />
           </div>
           <button
-              v-else
-              class="pos-registration-field"
-              :class="{ 'pos-registration-field--add': !field.hasValue.value }"
-              type="button"
-              :data-testid="field.testIdBase"
-              :aria-label="!field.hasValue.value ? `${t('common.add')} ${field.label.value}` : undefined"
-              @click="field.openEditor()"
+            v-else
+            class="pos-registration-field"
+            :class="{
+              'pos-registration-field--add': !field.hasValue.value,
+              'pos-registration-field--warning': field.warningState.value === 'warning',
+              'pos-registration-field--danger': field.warningState.value === 'danger',
+            }"
+            type="button"
+            :data-testid="field.testIdBase"
+            :aria-label="!field.hasValue.value ? `${t('common.add')} ${field.label.value}` : undefined"
+            @click="field.openEditor()"
           >
-            <span class="pos-registration-field__label">{{ field.label.value }}</span>
+            <span class="pos-registration-field__label-row">
+              <span class="pos-registration-field__label">{{ field.label.value }}</span>
+              <span
+                v-if="field.warningState.value"
+                class="pos-registration-field__status-icon"
+                :class="{
+                  'pos-registration-field__status-icon--warning': field.warningState.value === 'warning',
+                  'pos-registration-field__status-icon--danger': field.warningState.value === 'danger',
+                }"
+                :data-testid="`${field.testIdBase}-warning-icon`"
+              >
+                <i :class="field.warningIconClass" aria-hidden="true"></i>
+              </span>
+            </span>
             <span
-                class="pos-registration-field__value"
-                :class="{ 'pos-registration-field__value--muted': !field.hasValue.value }"
+              class="pos-registration-field__value"
+              :class="{ 'pos-registration-field__value--muted': !field.hasValue.value }"
             >
-              {{ field.hasValue.value ? field.autosave.draft.value : `+ ${t('common.add')}` }}
+              {{ field.hasValue.value ? field.autosave.draft.value : `+ ${t("common.add")}` }}
             </span>
           </button>
         </div>
@@ -135,6 +207,4 @@ const fields = [referenceField, poField];
   </div>
 </template>
 
-<style scoped>
-
-</style>
+<style scoped></style>
diff --git a/src/components/displays/department/pos/orders/OrderAttachmentsActionButton.vue b/src/components/displays/department/pos/orders/OrderAttachmentsActionButton.vue
index c3ad8615..501f7657 100644
--- a/src/components/displays/department/pos/orders/OrderAttachmentsActionButton.vue
+++ b/src/components/displays/department/pos/orders/OrderAttachmentsActionButton.vue
@@ -571,7 +571,28 @@ const toggleDropdown = async () => {
 }
 
 .action-settings-wheel-trigger--icon-only {
-  min-width: auto;
+  width: 2rem;
+  min-width: 2rem;
+  height: 2rem;
+  padding: 0;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  line-height: 1;
+  vertical-align: middle;
+}
+
+.action-settings-wheel-trigger--icon-only .icon {
+  width: 1rem;
+  height: 1rem;
+  margin: 0;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.action-settings-wheel-trigger--icon-only .icon i {
+  line-height: 1;
 }
 
 .order-attachments-dropdown-menu {
diff --git a/src/components/displays/department/pos/steps/mobile/PosDepartmentStepMobile1.vue b/src/components/displays/department/pos/steps/mobile/PosDepartmentStepMobile1.vue
index cdb5a874..2eb25c87 100644
--- a/src/components/displays/department/pos/steps/mobile/PosDepartmentStepMobile1.vue
+++ b/src/components/displays/department/pos/steps/mobile/PosDepartmentStepMobile1.vue
@@ -206,6 +206,7 @@ const onAutomaticSelection = (object: PosSearchResult | null) => {
     last_order_id: object?.lastOrderId || null,
     wash_subscription: object?.washSubscription,
     booking_id: object?.bookingId || null,
+    booking_matches: object?.bookingMatches || [],
   } as PosVehicle;
   switch (vehicles.activeVehicleIndex.value) {
     case 1:
diff --git a/src/components/displays/department/pos/steps/mobile/PosDepartmentStepMobile2.vue b/src/components/displays/department/pos/steps/mobile/PosDepartmentStepMobile2.vue
index 31b9c609..01ccd3b7 100644
--- a/src/components/displays/department/pos/steps/mobile/PosDepartmentStepMobile2.vue
+++ b/src/components/displays/department/pos/steps/mobile/PosDepartmentStepMobile2.vue
@@ -31,7 +31,7 @@ import PosDepartmentStepMobile2AdditionalItems
   from "@/components/displays/department/pos/steps/mobile/elements/PosDepartmentStepMobile2AdditionalItems.vue";
 import PosDepartmentStepMobile2Customer
   from "@/components/displays/department/pos/steps/mobile/elements/PosDepartmentStepMobile2Customer.vue";
-import { pendingBookings, getVehiclePlateBooking } from "@/components/shop/POSDepartmentProcess.vue";
+import { pendingBookings } from "@/components/shop/POSDepartmentProcess.vue";
 import { useOrderMetadataAutosave } from "@/composables/useOrderMetadataAutosave.js";
 
 
@@ -39,12 +39,7 @@ onMounted(() => {
   // Set the header to be transparent
   setTransparency(false);
   setBackgroundColor(backgroundColors.default); // Set the default background color
-  // Set the reference to the vehicle 1 reference if it's not already set
-  if (persistedReference.value && !reference.value) {
-    reference.value = persistedReference.value;
-  } else if (vehicles?.vehicle_1?.value?.reference && !reference.value) {
-    reference.value = vehicles.vehicle_1.value.reference;
-  }
+  hydrateReferenceFromSources();
   // Set the notes to the order notes if it's not already set
   if (order_notes.value && !notes.value) {
     notes.value = order_notes.value;
@@ -103,14 +98,7 @@ const getSelectedPendingBooking = () => {
     if (booking) return booking;
   }
 
-  const reg = vehicles?.vehicle_1?.value?.reg || null;
-  if (!reg) return null;
-
-  try {
-    return getVehiclePlateBooking(reg) || null;
-  } catch (e) {
-    return null;
-  }
+  return null;
 }
 
 const getSelectedBooking = async () => {
@@ -199,6 +187,8 @@ const applyPendingBookingFromSelection = async () => {
       if (fullBookingData.reference && fullBookingData.reference.trim() !== '') {
         try {
           await SessionUser.objects.orders.set.reference(order_id.value, fullBookingData.reference);
+          persistedReference.value = fullBookingData.reference;
+          hydrateReferenceFromSources();
         } catch (setRefError) {
           console.error('Failed to set reference on order from booking:', setRefError);
         }
@@ -285,7 +275,7 @@ const applyPendingBookingFromSelection = async () => {
 }
 
 const initializeStepTwo = async () => {
-  const hasBookingSelection = !!getSelectedBookingId() || !!getSelectedPendingBooking();
+  const hasBookingSelection = !!getSelectedBookingId();
   if (!hasBookingSelection) {
     fetchPrimaryItemProduct();
     return;
@@ -300,39 +290,42 @@ const initializeStepTwo = async () => {
 const fetchPrimaryItemProduct = () => {
   if (!vehicles.vehicle_1.value?.type && !transactionItems.primaryItem.value) {
     vehicleSelection.value = true; // Force the user to select a product.
-  } else {
-    // Load the product from the type id.
-    if (!vehicles.vehicle_1.value?.type) {
-      return; // If no vehicle type is set, do not proceed.
-    }
-    // If the primary item is already set and matches the vehicle type, do not fetch again.
-    //if (transactionItems.primaryItem.value && transactionItems.primaryItem.value.id === vehicles.vehicle_1.value.type) {
-    //  console.warn('Primary item already set and matches vehicle type, skipping fetch.');
-    //  return;
-    //}
-    SessionUser.objects.products.get.single(vehicles.vehicle_1.value.type, {department_id: department_id.value, customer_id: metadata.getCustomerId(), category_id: null, final_price: true})
-        .then(product => {
-          // If the product is found, set it as the primary item
-          lastFetchedPrimaryItemProduct.value = product; // Store the last fetched primary item product
-          // If the primary item is already set, simply update the product
-          if (transactionItems.primaryItem.value) {
-            transactionItems.primaryItem.value = {
-              ...transactionItems.primaryItem.value,
-              ...product,
-              addons: transactionItems.primaryItem.value.addons.map(addon => ({
-                ...addon,
-                product: {
-                  ...addon.product,
-                  price: product.price // Update the addon price to match the new primary item price
-                }
-              }))
-            };
-            return;
-          }
-          transactionItems.setPrimaryItem(product);
-        })
-        .catch(error => vehicleSelection.value = true); // If there's an error, force the user to select a product.
+    return;
   }
+
+  // Load the product from the type id.
+  if (!vehicles.vehicle_1.value?.type) {
+    return; // If no vehicle type is set, do not proceed.
+  }
+
+  vehicleSelection.value = false;
+  // If the primary item is already set and matches the vehicle type, do not fetch again.
+  //if (transactionItems.primaryItem.value && transactionItems.primaryItem.value.id === vehicles.vehicle_1.value.type) {
+  //  console.warn('Primary item already set and matches vehicle type, skipping fetch.');
+  //  return;
+  //}
+  SessionUser.objects.products.get.single(vehicles.vehicle_1.value.type, {department_id: department_id.value, customer_id: metadata.getCustomerId(), category_id: null, final_price: true})
+      .then(product => {
+        // If the product is found, set it as the primary item
+        lastFetchedPrimaryItemProduct.value = product; // Store the last fetched primary item product
+        // If the primary item is already set, simply update the product
+        if (transactionItems.primaryItem.value) {
+          transactionItems.primaryItem.value = {
+            ...transactionItems.primaryItem.value,
+            ...product,
+            addons: transactionItems.primaryItem.value.addons.map(addon => ({
+              ...addon,
+              product: {
+                ...addon.product,
+                price: product.price // Update the addon price to match the new primary item price
+              }
+            }))
+          };
+          return;
+        }
+        transactionItems.setPrimaryItem(product);
+      })
+      .catch(error => vehicleSelection.value = true); // If there's an error, force the user to select a product.
 }
 
 const fetchLastOrder = (vehicleIndex: number) => {
@@ -429,6 +422,8 @@ const getNormalizedOrderId = () => {
   return Number.isInteger(parsedOrderId) && parsedOrderId > 0 ? parsedOrderId : null;
 }
 
+const normalizeReferenceValue = (value: unknown) => String(value ?? "");
+const hasReferenceValue = (value: unknown) => normalizeReferenceValue(value).trim() !== "";
 const normalizeRegistrationValue = (value: string | null | undefined) => String(value ?? "").trim().toUpperCase().replace(/[^A-Z0-9]/g, "");
 
 const syncVehicleRegistrationFromOrder = (vehicleIndex: number, value: string | null | undefined) => {
@@ -485,6 +480,58 @@ const referenceAutosave = useOrderMetadataAutosave({
 const stepTwoNotesInput = notesAutosave.draft;
 const stepTwoReferenceInput = referenceAutosave.draft;
 
+const resolveReferenceFromSources = () => {
+  const orderReference = normalizeReferenceValue(persistedReference.value);
+  if (hasReferenceValue(orderReference)) {
+    return orderReference;
+  }
+
+  const metadataReference = normalizeReferenceValue(metadata.getReference?.() ?? reference.value);
+  if (hasReferenceValue(metadataReference)) {
+    return metadataReference;
+  }
+
+  const vehicleReference = normalizeReferenceValue(vehicles?.vehicle_1?.value?.reference);
+  if (hasReferenceValue(vehicleReference)) {
+    return vehicleReference;
+  }
+
+  return "";
+};
+
+function syncReferenceState(value: unknown) {
+  const normalizedValue = normalizeReferenceValue(value);
+  reference.value = normalizedValue;
+  metadata.setReference(normalizedValue);
+}
+
+function hydrateReferenceFromSources() {
+  const currentDraft = normalizeReferenceValue(stepTwoReferenceInput.value);
+
+  if (referenceAutosave.isDirty.value && hasReferenceValue(currentDraft)) {
+    syncReferenceState(currentDraft);
+    return currentDraft;
+  }
+
+  const resolvedReference = resolveReferenceFromSources();
+  if (!hasReferenceValue(resolvedReference)) {
+    if (hasReferenceValue(currentDraft)) {
+      syncReferenceState(currentDraft);
+    }
+    return currentDraft;
+  }
+
+  const lastSavedReference = normalizeReferenceValue(referenceAutosave.lastSavedValue.value);
+  const canHydrateDraft = !hasReferenceValue(currentDraft) || currentDraft === lastSavedReference;
+
+  if (canHydrateDraft && currentDraft !== resolvedReference) {
+    referenceAutosave.syncFromSource(resolvedReference);
+  }
+
+  syncReferenceState(canHydrateDraft ? resolvedReference : currentDraft);
+  return canHydrateDraft ? resolvedReference : currentDraft;
+}
+
 watch(stepTwoNotesInput, (value) => {
   metadata.setNotes(value);
 
@@ -494,13 +541,19 @@ watch(stepTwoNotesInput, (value) => {
 });
 
 watch(stepTwoReferenceInput, (value) => {
-  metadata.setReference(value);
+  syncReferenceState(value);
 
   if (getNormalizedOrderId()) {
     referenceAutosave.scheduleSave();
   }
 });
 
+watch(persistedReference, (newValue, oldValue) => {
+  if (newValue !== oldValue) {
+    hydrateReferenceFromSources();
+  }
+});
+
 watch(() => getNormalizedOrderId(), (normalizedOrderId) => {
   if (!normalizedOrderId) {
     return;
@@ -747,10 +800,15 @@ watch(() => vehicles.vehicle_1.value?.last_order_id, (newValue, oldValue) => {
     lastOrders.set(1, null); // Clear the last order if the last_order_id is removed
   }
 });
+watch(() => vehicles.vehicle_1.value?.type, (newValue, oldValue) => {
+  if (newValue && newValue !== oldValue && !transactionItems.primaryItem.value) {
+    fetchPrimaryItemProduct();
+  }
+});
 // Watch for changes in the vehicle 1 reference and update the reference field when it changes
 watch(() => vehicles.vehicle_1.value?.reference, (newValue, oldValue) => {
   if (newValue && newValue !== oldValue) {
-    reference.value = newValue; // Update the reference field
+    hydrateReferenceFromSources();
   }
 });
 
diff --git a/src/components/displays/department/pos/steps/mobile/elements/PosDepartmentStepMobile1RegistrationNumbers.vue b/src/components/displays/department/pos/steps/mobile/elements/PosDepartmentStepMobile1RegistrationNumbers.vue
index 209bb640..b321d327 100644
--- a/src/components/displays/department/pos/steps/mobile/elements/PosDepartmentStepMobile1RegistrationNumbers.vue
+++ b/src/components/displays/department/pos/steps/mobile/elements/PosDepartmentStepMobile1RegistrationNumbers.vue
@@ -1,17 +1,21 @@
 <script setup lang="ts">
-import PosDepartmentStepMobile1RegistrationNumber1
-  from "@/components/displays/department/pos/steps/mobile/elements/PosDepartmentStepMobile1RegistrationNumber1.vue";
-import PosDepartmentStepMobile1RegistrationNumber2
-  from "@/components/displays/department/pos/steps/mobile/elements/PosDepartmentStepMobile1RegistrationNumber2.vue";
-import PosDepartmentStepMobile1RegistrationNumber3
-  from "@/components/displays/department/pos/steps/mobile/elements/PosDepartmentStepMobile1RegistrationNumber3.vue";
-import { activeVehicleIndex, setActiveVehicleIndex, vehicles, popups, metadata, reference } from "../objects/PosDepartmentStepMobileFlow.vue";
-import PosDepartmentStepMobileButtonClearAll
-  from "@/components/displays/department/pos/steps/mobile/elements/PosDepartmentStepMobileButtonClearAll.vue";
+import PosDepartmentStepMobile1RegistrationNumber1 from "@/components/displays/department/pos/steps/mobile/elements/PosDepartmentStepMobile1RegistrationNumber1.vue";
+import PosDepartmentStepMobile1RegistrationNumber2 from "@/components/displays/department/pos/steps/mobile/elements/PosDepartmentStepMobile1RegistrationNumber2.vue";
+import PosDepartmentStepMobile1RegistrationNumber3 from "@/components/displays/department/pos/steps/mobile/elements/PosDepartmentStepMobile1RegistrationNumber3.vue";
+import {
+  activeVehicleIndex,
+  setActiveVehicleIndex,
+  vehicles,
+  popups,
+  metadata,
+  reference,
+} from "../objects/PosDepartmentStepMobileFlow.vue";
+import PosDepartmentStepMobileButtonClearAll from "@/components/displays/department/pos/steps/mobile/elements/PosDepartmentStepMobileButtonClearAll.vue";
 import LongPressListener from "@/components/viewport/elements/wrappers/LongPressListener.vue";
-import { nextTick, onBeforeUnmount, onMounted, ref, watch } from "vue";
+import { computed, nextTick, onBeforeUnmount, onMounted, ref, watch } from "vue";
 import { getNotes } from "@/components/shop/CustomerNotes.vue";
 import SessionUser from "@/components/session/token/SessionUser.vue";
+import { customerRequiresReferenceNumber, isBlankPosMetadataValue } from "@/components/shop/POSDepartmentProcess.vue";
 const isActive = (number: number): boolean => {
   return activeVehicleIndex.value === number;
 };
@@ -24,13 +28,11 @@ const setActive = (number: number): void => {
   setActiveVehicleIndex(number);
 };
 
-
 const onLongPress = (number: number) => {
-  console.warn('Long press detected in parent for number', number);
+  console.warn("Long press detected in parent for number", number);
   // Show the select vehicle popup
-  popups.select('select_vehicle', { props: { vehicleNumber: number } });
-
-}
+  popups.select("select_vehicle", { props: { vehicleNumber: number } });
+};
 
 const showNewDemo = ref(true);
 const registrationRowElement = ref<HTMLElement | null>(null);
@@ -45,23 +47,30 @@ const getCustomerNotes = async () => {
       customerNotes.value = response.data.data;
     });
   } catch (error) {
-    console.error('Error fetching customer notes:', error);
+    console.error("Error fetching customer notes:", error);
   }
-}
+};
 
 // Wait for changes to the customer number, and fetch the notes
-watch(() => metadata.getCustomerId(), (newCustomerId) => {
-  if (newCustomerId) {
-    getCustomerNotes();
-  } else {
-    customerNotes.value = [];
-  }
-}, { immediate: true });
+watch(
+  () => metadata.getCustomerId(),
+  (newCustomerId) => {
+    if (newCustomerId) {
+      getCustomerNotes();
+    } else {
+      customerNotes.value = [];
+    }
+  },
+  { immediate: true }
+);
 
 const updateReferenceWidth = () => {
   const rowWidth = registrationRowElement.value?.getBoundingClientRect().width ?? 0;
   referenceWidth.value = Math.max(174, Math.round(rowWidth));
 };
+const showReferenceWarning = computed(() => {
+  return customerRequiresReferenceNumber() && isBlankPosMetadataValue(reference.value);
+});
 
 const observeRegistrationRow = () => {
   registrationRowResizeObserver?.disconnect();
@@ -93,75 +102,100 @@ watch(registrationRowElement, async () => {
   observeRegistrationRow();
 });
 
-watch(() => [
-  vehicles.get(1)?.reg?.length ?? 0,
-  vehicles.get(2)?.reg?.length ?? 0,
-  vehicles.get(3)?.reg?.length ?? 0,
-], async () => {
-  await nextTick();
-  updateReferenceWidth();
-}, { flush: "post" });
-
+watch(
+  () => [vehicles.get(1)?.reg?.length ?? 0, vehicles.get(2)?.reg?.length ?? 0, vehicles.get(3)?.reg?.length ?? 0],
+  async () => {
+    await nextTick();
+    updateReferenceWidth();
+  },
+  { flush: "post" }
+);
 </script>
 
 <template>
   <div class="registration-number-list">
     <template v-if="!showNewDemo">
       <LongPressListener @long-press="onLongPress(1)">
-        <PosDepartmentStepMobile1RegistrationNumber1 :active="isActive(1)" @click="setActive(1)"/>
+        <PosDepartmentStepMobile1RegistrationNumber1 :active="isActive(1)" @click="setActive(1)" />
       </LongPressListener>
       <LongPressListener @long-press="onLongPress(2)">
-        <PosDepartmentStepMobile1RegistrationNumber2 :active="isActive(2)" @click="setActive(2)"/>
+        <PosDepartmentStepMobile1RegistrationNumber2 :active="isActive(2)" @click="setActive(2)" />
       </LongPressListener>
       <LongPressListener @long-press="onLongPress(3)">
-        <PosDepartmentStepMobile1RegistrationNumber3 :active="isActive(3)" @click="setActive(3)"/>
+        <PosDepartmentStepMobile1RegistrationNumber3 :active="isActive(3)" @click="setActive(3)" />
       </LongPressListener>
-      <PosDepartmentStepMobileButtonClearAll/>
+      <PosDepartmentStepMobileButtonClearAll />
     </template>
     <template v-else>
       <div class="registration-summary">
-        <div
-          ref="registrationRowElement"
-          class="registration-row"
-          data-testid="pos-mobile-step-1-registration-row"
-        >
+        <div ref="registrationRowElement" class="registration-row" data-testid="pos-mobile-step-1-registration-row">
           <div class="registration-slot">
             <LongPressListener @long-press="onLongPress(1)">
-              <PosDepartmentStepMobile1RegistrationNumber1 :active="isActive(1)" @click="setActive(1)" :showLabel="false" :isWider="!vehicles.get(1)?.reg?.length && !vehicles.get(2)?.reg?.length && !vehicles.get(3)?.reg?.length"/>
+              <PosDepartmentStepMobile1RegistrationNumber1
+                :active="isActive(1)"
+                @click="setActive(1)"
+                :showLabel="false"
+                :isWider="
+                  !vehicles.get(1)?.reg?.length && !vehicles.get(2)?.reg?.length && !vehicles.get(3)?.reg?.length
+                "
+              />
             </LongPressListener>
           </div>
           <div class="registration-slot" v-if="vehicles.get(1)?.reg?.length || vehicles.get(2)?.reg?.length">
             <LongPressListener @long-press="onLongPress(2)">
-              <PosDepartmentStepMobile1RegistrationNumber2 :active="isActive(2)" @click="setActive(2)" :showLabel="false" :class="{'opacity-invisible': !vehicles.get(1)?.reg?.length}"/>
+              <PosDepartmentStepMobile1RegistrationNumber2
+                :active="isActive(2)"
+                @click="setActive(2)"
+                :showLabel="false"
+                :class="{ 'opacity-invisible': !vehicles.get(1)?.reg?.length }"
+              />
             </LongPressListener>
           </div>
           <div class="registration-slot" v-if="vehicles.get(3)?.reg?.length">
             <LongPressListener @long-press="onLongPress(3)">
-              <PosDepartmentStepMobile1RegistrationNumber3 :active="isActive(3)" @click="setActive(3)" :showLabel="false" :class="{'opacity-invisible': !vehicles.get(2)?.reg?.length}"/>
+              <PosDepartmentStepMobile1RegistrationNumber3
+                :active="isActive(3)"
+                @click="setActive(3)"
+                :showLabel="false"
+                :class="{ 'opacity-invisible': !vehicles.get(2)?.reg?.length }"
+              />
             </LongPressListener>
           </div>
         </div>
         <!-- Reference -->
         <div
           class="mt-2 mb-2 has-text-centered custom-button-secondary reference-trigger"
-          :class="{'opacity-invisible': !vehicles.get(1)?.reg?.length}"
+          :class="{
+            'opacity-invisible': !vehicles.get(1)?.reg?.length,
+            'reference-trigger--danger': showReferenceWarning,
+          }"
           :style="{ width: `${referenceWidth}px` }"
           data-testid="pos-mobile-step-1-reference-trigger"
+          :data-warning-state="showReferenceWarning ? 'danger' : undefined"
           @click="popups.select('change_reference')"
         >
-          <p v-if="reference.length > 0"
-             class="has-overflow-ellipsis has-text-weight-bold has-text-white mx-3"
-             style="max-height: 20px;"
-          >{{ reference }}</p>
-          <p v-else>
-            <span class="is-italic">Indtast reference...</span>
-          </p>
+          <span class="reference-trigger__content">
+            <span
+              v-if="showReferenceWarning"
+              class="reference-trigger__icon"
+              data-testid="pos-mobile-step-1-reference-warning-icon"
+            >
+              <i class="fas fa-exclamation-circle" aria-hidden="true"></i>
+            </span>
+            <span
+              v-if="reference.length > 0"
+              class="reference-trigger__text has-overflow-ellipsis has-text-weight-bold mx-3"
+              :class="{ 'has-text-white': !showReferenceWarning }"
+              >{{ reference }}</span
+            >
+            <span v-else class="reference-trigger__text is-italic">Indtast reference...</span>
+          </span>
         </div>
       </div>
       <!-- Reference -->
       <div
         class="mt-2 mb-2 has-text-centered custom-button-secondary px-2 notes-trigger"
-        :class="{'opacity-invisible': customerNotes.length === 0, 'has-background-warning': customerNotes.length > 0}"
+        :class="{ 'opacity-invisible': customerNotes.length === 0, 'has-background-warning': customerNotes.length > 0 }"
         :style="{ width: `${referenceWidth}px` }"
         @click="popups.select('customer_notes')"
         v-if="customerNotes.length > 0"
@@ -172,7 +206,15 @@ watch(() => [
           <span v-if="customerNotes.length > 0" class="icon is-small has-text-dark pr-1">
             <i class="fas fa-exclamation-triangle"></i>
           </span>
-          <span class="has-overflow-ellipsis" :class="{'has-text-dark': customerNotes.length > 0, 'has-text-weight-bold': customerNotes.length > 0, 'is-italic': customerNotes.length === 0}">{{ SessionUser.objects.global.language.customer_notes}}</span>
+          <span
+            class="has-overflow-ellipsis"
+            :class="{
+              'has-text-dark': customerNotes.length > 0,
+              'has-text-weight-bold': customerNotes.length > 0,
+              'is-italic': customerNotes.length === 0,
+            }"
+            >{{ SessionUser.objects.global.language.customer_notes }}</span
+          >
         </p>
       </div>
     </template>
@@ -206,7 +248,7 @@ watch(() => [
 }
 
 .is-wider {
-  width: 200px!important;
+  width: 200px !important;
 }
 .opacity-invisible {
   opacity: 0.3;
@@ -249,4 +291,35 @@ watch(() => [
   margin-inline: auto;
 }
 
+.reference-trigger--danger {
+  background: #fff0f0;
+  border-color: #dc9f9f;
+  color: #8f2c2c;
+}
+
+.reference-trigger__content {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.35rem;
+  width: 100%;
+  min-width: 0;
+  padding-inline: 0.45rem;
+}
+
+.reference-trigger__text {
+  display: inline-block;
+  min-width: 0;
+  max-width: 100%;
+  line-height: 1.2;
+}
+
+.reference-trigger__icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex: 0 0 auto;
+  font-size: 0.75rem;
+  line-height: 1;
+}
 </style>
diff --git a/src/components/displays/department/pos/steps/mobile/elements/PosDepartmentStepMobilePopupSelectOrderBooking.vue b/src/components/displays/department/pos/steps/mobile/elements/PosDepartmentStepMobilePopupSelectOrderBooking.vue
new file mode 100644
index 00000000..35a833ce
--- /dev/null
+++ b/src/components/displays/department/pos/steps/mobile/elements/PosDepartmentStepMobilePopupSelectOrderBooking.vue
@@ -0,0 +1,115 @@
+<script setup lang="ts">
+import { computed } from "vue";
+import { popups } from "@/components/displays/department/pos/steps/mobile/objects/PosDepartmentStepMobileFlow.vue";
+import { useI18n } from "vue-i18n";
+
+const { t, locale } = useI18n();
+
+const popupProps = computed(() => popups.get()?.props || {});
+const bookings = computed(() => (Array.isArray(popupProps.value.bookings) ? popupProps.value.bookings : []));
+
+const formatBookingDateTime = (booking: any) => {
+  const rawValue = booking?.datetime || booking?.created_at || booking?.date || null;
+  if (!rawValue) {
+    return t('admin.pos.not_found');
+  }
+
+  const parsedValue = new Date(rawValue);
+  if (Number.isNaN(parsedValue.getTime())) {
+    return rawValue;
+  }
+
+  return new Intl.DateTimeFormat(locale.value || undefined, {
+    dateStyle: 'short',
+    timeStyle: 'short',
+  }).format(parsedValue);
+};
+
+const getReferenceValue = (booking: any) => {
+  return String(booking?.reference ?? booking?.reference_number ?? '').trim();
+};
+
+const getServicesValue = (booking: any) => {
+  if (Array.isArray(booking?.parsed_services?.array) && booking.parsed_services.array.length > 0) {
+    return booking.parsed_services.array.join(', ');
+  }
+
+  return String(booking?.parsed_services?.string ?? booking?.wash_type ?? '').trim();
+};
+
+const onSelect = async (booking: any) => {
+  if (typeof popupProps.value.onSelect === 'function') {
+    await popupProps.value.onSelect(booking);
+  }
+};
+
+const onSkip = async () => {
+  if (typeof popupProps.value.onSkip === 'function') {
+    await popupProps.value.onSkip();
+  }
+};
+</script>
+
+<template>
+  <div data-testid="pos-mobile-order-booking-popup">
+    <p class="mb-3">{{ popups.get()?.message || t('admin.pos.order_booking_selector.help_text') }}</p>
+    <div
+      v-for="booking in bookings"
+      :key="booking.id"
+      class="booking-option mb-3"
+      :data-testid="`pos-mobile-order-booking-option-${booking.id}`"
+    >
+      <div class="booking-option__title">
+        {{ t('admin.pos.order_booking_selector.option_title', { id: booking.id, datetime: formatBookingDateTime(booking) }) }}
+      </div>
+      <div class="booking-option__details">
+        {{ t('admin.pos.order_booking_selector.customer_label') }}: {{ booking?.customer_name || t('admin.pos.not_found') }}
+      </div>
+      <div class="booking-option__details">
+        {{ t('admin.pos.order_booking_selector.plates_label') }}:
+        {{ [booking?.reg_1, booking?.reg_2].filter(Boolean).join(' / ') || t('admin.pos.not_found') }}
+      </div>
+      <div class="booking-option__details">
+        {{ t('admin.pos.order_booking_selector.reference_label') }}: {{ getReferenceValue(booking) || t('admin.pos.not_found') }}
+      </div>
+      <div class="booking-option__details">
+        {{ t('admin.pos.order_booking_selector.services_label') }}: {{ getServicesValue(booking) || t('admin.pos.not_found') }}
+      </div>
+      <button
+        class="button is-primary is-fullwidth mt-3"
+        type="button"
+        :data-testid="`pos-mobile-order-booking-use-${booking.id}`"
+        @click="onSelect(booking)"
+      >
+        {{ t('admin.pos.order_booking_selector.use_booking') }}
+      </button>
+    </div>
+    <button
+      class="button is-light is-fullwidth"
+      type="button"
+      data-testid="pos-mobile-order-booking-skip"
+      @click="onSkip"
+    >
+      {{ t('admin.pos.order_booking_selector.continue_without_booking') }}
+    </button>
+  </div>
+</template>
+
+<style scoped>
+.booking-option {
+  border: 1px solid #d8dde6;
+  border-radius: 8px;
+  padding: 0.9rem;
+}
+
+.booking-option__title {
+  font-weight: 700;
+  color: #1f2a37;
+  margin-bottom: 0.4rem;
+}
+
+.booking-option__details {
+  color: #52606d;
+  font-size: 0.95rem;
+}
+</style>
diff --git a/src/components/displays/department/pos/steps/mobile/objects/PosDepartmentStepMobileFlow.vue b/src/components/displays/department/pos/steps/mobile/objects/PosDepartmentStepMobileFlow.vue
index fef128cf..cf013747 100644
--- a/src/components/displays/department/pos/steps/mobile/objects/PosDepartmentStepMobileFlow.vue
+++ b/src/components/displays/department/pos/steps/mobile/objects/PosDepartmentStepMobileFlow.vue
@@ -234,6 +234,14 @@ const addDefaultPopups = () => {
     style: {height: '50vh'},
     actionButtons: [{...defaultActionButtons.value.cancel}, {...defaultActionButtons.value.addCustomer, label: 'Ny kunde'}],
   });
+  addPopup({
+    id: 'select_order_booking',
+    title: i18n.global.t('admin.pos.order_booking_selector.title'),
+    message: i18n.global.t('admin.pos.order_booking_selector.help_text'),
+    component: 'select_order_booking',
+    style: {maxHeight: '60vh'},
+    actionButtons: [],
+  });
   // Completed
   addPopup({
     id: 'completed_transaction',
@@ -1117,6 +1125,7 @@ const notes = ref<string>('');
 const reference = ref<string>('');
 const washId = ref<string | null>(null); // The Wash ID is used to track the related wash event
 const bookingId = ref<number | null>(null); // The Booking ID is used to track the related booking event
+const bookingSelectionSkippedPlate = ref<string>('');
 const laneId = ref<number | null>(null); // The Lane ID is used to track the related lane event
 const loadingState = ref<boolean>(false); // Loading state for the transaction
 const loadingMessage = ref<string>('Indlæser...'); // Loading message for the transaction
@@ -1181,6 +1190,15 @@ const setBookingId = (id: number | null) => {
 const getBookingId = () => {
   return bookingId.value;
 }
+const setBookingSelectionSkippedPlate = (plate: string | null | undefined) => {
+  bookingSelectionSkippedPlate.value = String(plate ?? '').replace(/\s/g, '').toUpperCase();
+}
+const getBookingSelectionSkippedPlate = () => {
+  return bookingSelectionSkippedPlate.value;
+}
+const clearBookingSelectionSkippedPlate = () => {
+  bookingSelectionSkippedPlate.value = '';
+}
 // Function to set the lane ID
 const setLaneId = (id: number | null) => {
   laneId.value = id;
@@ -1216,6 +1234,10 @@ const metadata = {
   bookingId,
   setBookingId,
   getBookingId,
+  bookingSelectionSkippedPlate,
+  setBookingSelectionSkippedPlate,
+  getBookingSelectionSkippedPlate,
+  clearBookingSelectionSkippedPlate,
   // Lane ID
   laneId,
   setLaneId,
@@ -1365,6 +1387,7 @@ const resetMetadata = () => {
   metadata.reference.value = '';
   metadata.washId.value = null;
   metadata.bookingId.value = null;
+  metadata.bookingSelectionSkippedPlate.value = '';
   metadata.laneId.value = null;
   metadata.clearLoadingState();
 }
@@ -1529,6 +1552,7 @@ const buildSnapshot = () => ({
     reference: metadata.reference.value,
     washId: metadata.washId.value,
     bookingId: metadata.bookingId.value,
+    bookingSelectionSkippedPlate: metadata.bookingSelectionSkippedPlate.value,
     laneId: metadata.laneId.value,
   },
   attachments: {
@@ -1613,6 +1637,8 @@ const retrievePos = () => {
       metadata.reference.value = parsedData.metadata.reference ?? '';
       metadata.washId.value = parsedData.metadata.washId ?? null;
       metadata.bookingId.value = parsedData.metadata.bookingId ?? null;
+      metadata.bookingSelectionSkippedPlate.value = parsedData.metadata.bookingSelectionSkippedPlate ?? '';
+      metadata.laneId.value = parsedData.metadata.laneId ?? null;
     }
 
     // Restore last vehicle orders
@@ -1681,6 +1707,7 @@ watch(() => [
   metadata.reference.value,
   metadata.washId.value,
   metadata.bookingId.value,
+  metadata.bookingSelectionSkippedPlate.value,
   metadata.laneId.value
 ], savePos);
 
@@ -1841,6 +1868,10 @@ export const Customer = {
   bookingId,
   setBookingId,
   getBookingId,
+  bookingSelectionSkippedPlate,
+  setBookingSelectionSkippedPlate,
+  getBookingSelectionSkippedPlate,
+  clearBookingSelectionSkippedPlate,
 };
 
 export const Meta = {
diff --git a/src/components/displays/department/pos/steps/mobile/objects/PosPopup.vue b/src/components/displays/department/pos/steps/mobile/objects/PosPopup.vue
index 2a32d3c0..da7ebbc3 100644
--- a/src/components/displays/department/pos/steps/mobile/objects/PosPopup.vue
+++ b/src/components/displays/department/pos/steps/mobile/objects/PosPopup.vue
@@ -22,11 +22,14 @@ import PosDepartmentStepMobilePopupImage
   from "@/components/displays/department/pos/steps/mobile/elements/PosDepartmentStepMobilePopupImage.vue";
 import PosDepartmentStepMobilePopupAddCustomer
   from "@/components/displays/department/pos/steps/mobile/elements/PosDepartmentStepMobilePopupAddCustomer.vue";
+import PosDepartmentStepMobilePopupSelectOrderBooking
+  from "@/components/displays/department/pos/steps/mobile/elements/PosDepartmentStepMobilePopupSelectOrderBooking.vue";
 
-export type PopupComponentKey = 'select_customer' | 'completed_transaction' | 'complete_booking' | 'error' | 'add_product_note' | 'select_vehicle' | 'change_reference' | 'customer_notes' | 'image_viewer' | 'add_customer';
+export type PopupComponentKey = 'select_customer' | 'select_order_booking' | 'completed_transaction' | 'complete_booking' | 'error' | 'add_product_note' | 'select_vehicle' | 'change_reference' | 'customer_notes' | 'image_viewer' | 'add_customer';
 
 export const PopupComponents = {
   select_customer: PosDepartmentStepMobilePopupSelectCustomer,
+  select_order_booking: PosDepartmentStepMobilePopupSelectOrderBooking,
   completed_transaction: PosDepartmentStepMobilePopupCompletedTransaction,
   complete_booking: PosDepartmentStepMobilePopupCompleteBooking,
   error: PosDepartmentStepMobilePopupError,
@@ -59,6 +62,7 @@ export default defineComponent({
   name: 'PosPopup',
   components: {
     PosDepartmentStepMobilePopupSelectCustomer,
+    PosDepartmentStepMobilePopupSelectOrderBooking,
     PosDepartmentStepMobilePopupCompletedTransaction,
     PosDepartmentStepMobilePopupCompleteBooking,
     PosDepartmentStepMobilePopupError,
@@ -81,4 +85,4 @@ export default defineComponent({
     },
   },
 });
-</script>
\ No newline at end of file
+</script>
diff --git a/src/components/displays/department/pos/steps/mobile/objects/PosSearchResult.vue b/src/components/displays/department/pos/steps/mobile/objects/PosSearchResult.vue
index 0614e843..00fa0403 100644
--- a/src/components/displays/department/pos/steps/mobile/objects/PosSearchResult.vue
+++ b/src/components/displays/department/pos/steps/mobile/objects/PosSearchResult.vue
@@ -1,6 +1,28 @@
 <script lang="ts">
 import type { VehicleStatusKey } from './PosVehicleStatus.vue';
 import type { PosCustomerSuggestion } from './PosCustomerSuggestion.vue';
+export type OrderBookingSummary = {
+  id: number;
+  customer_name?: string;
+  customer_number?: number;
+  customer_id?: number;
+  reg_1?: string;
+  reg_2?: string;
+  reference?: string;
+  reference_number?: string;
+  note?: string;
+  notes?: string;
+  po?: string;
+  datetime?: string;
+  created_at?: string;
+  wash_type?: string;
+  parsed_services?: {
+    string?: string;
+    array?: string[];
+  };
+  [key: string]: any;
+};
+
 export type PosSearchResult = {
   registrationNumber?: string;
   customerName: string;
@@ -13,6 +35,7 @@ export type PosSearchResult = {
   lastOrderId?: number;
   washSubscription?: boolean;
   customerSuggestions?: PosCustomerSuggestion[]; // This is an array of previously billed customers.
-  bookingId?: number; // If the search result is linked to a booking.
+  bookingId?: number; // The explicitly selected booking id.
+  bookingMatches?: OrderBookingSummary[];
 };
-</script>
\ No newline at end of file
+</script>
diff --git a/src/components/displays/department/pos/steps/mobile/objects/PosVehicle.vue b/src/components/displays/department/pos/steps/mobile/objects/PosVehicle.vue
index 29d8ee68..c228b82b 100644
--- a/src/components/displays/department/pos/steps/mobile/objects/PosVehicle.vue
+++ b/src/components/displays/department/pos/steps/mobile/objects/PosVehicle.vue
@@ -1,5 +1,6 @@
 <script lang="ts">
 import type { VehicleStatusKey } from './PosVehicleStatus.vue';
+import type { OrderBookingSummary } from './PosSearchResult.vue';
 export type PosVehicle = {
   id?: number;
   customer_id?: number;
@@ -19,7 +20,8 @@ export type PosVehicle = {
   last_order_id?: number;
   // Booking ID (if applicable)
   booking_id?: number;
+  booking_matches?: OrderBookingSummary[];
   // additional data
   [key: string]: any;
  }
-</script>
\ No newline at end of file
+</script>
diff --git a/src/components/displays/department/pos/steps/mobile/views/PosDepartmentStep1MobileManualInput.vue b/src/components/displays/department/pos/steps/mobile/views/PosDepartmentStep1MobileManualInput.vue
index d59e9faa..52e2f28f 100644
--- a/src/components/displays/department/pos/steps/mobile/views/PosDepartmentStep1MobileManualInput.vue
+++ b/src/components/displays/department/pos/steps/mobile/views/PosDepartmentStep1MobileManualInput.vue
@@ -7,6 +7,7 @@ import GenericButton from "@/components/viewport/page/templates/generic/graphics
 import RegistrationNumberSearchResult from "@/components/models/pos/step1/RegistrationNumberSearchResult.vue";
 import VerifiedCustomer from "@/components/viewport/elements/icons/VerifiedCustomer.vue";
 import { pos } from "../objects/PosDepartmentStepMobileFlow.vue";
+import type { PosSearchResult } from "../objects/PosSearchResult.vue";
 import SessionUser from "@/components/session/token/SessionUser.vue";
 import PosDepartmentStepMobileFixedBottomControl
   from "@/components/displays/department/pos/steps/mobile/elements/PosDepartmentStepMobileFixedBottomControl.vue";
@@ -192,46 +193,37 @@ const flushAllRegistrations = async () => {
 };
 
 // Function to set a value if it is not null
-function setIfNotNull(variable: string, value: { registrationNumber: string, customerStatus: any, customerId?: number, lastOrderId?: number } | null) {
+const createVehicleSelectionFromSearchResult = (value: PosSearchResult) => ({
+  ...value,
+  reg: value.registrationNumber,
+  status: value.customerStatus,
+  customer_id: value.customerId,
+  last_order_id: value.lastOrderId,
+  booking_id: value.bookingId,
+  booking_matches: value.bookingMatches || [],
+  wash_subscription: value.washSubscription,
+});
+
+function setIfNotNull(variable: string, value: PosSearchResult | null) {
   //console.warn("setIfNotNull", variable, value);
   if (value !== null) {
+    const nextVehicleSelection = createVehicleSelectionFromSearchResult(value);
+
     switch (variable) {
       case 'reg_1':
         //console.log("Setting reg_1 with value:", value);
-        pos.vehicles.select(
-            1,
-            {
-              reg: value.registrationNumber,
-              status: value.customerStatus,
-              customer_id: value.customerId,
-              last_order_id: value.lastOrderId,
-            }
-        )
+        pos.vehicles.select(1, nextVehicleSelection);
         setRegistrationDraft(1, value.registrationNumber);
         //reg_1_status.value = value.customerStatus;
         break;
       case 'reg_2':
-        pos.vehicles.select(
-            2,
-            {
-              reg: value.registrationNumber,
-              status: value.customerStatus,
-              customer_id: value.customerId,
-            }
-        )
+        pos.vehicles.select(2, nextVehicleSelection);
         setRegistrationDraft(2, value.registrationNumber);
         //reg_2_status.value = value.customerStatus;
 
         break;
       case 'reg_3':
-        pos.vehicles.select(
-            3,
-            {
-              reg: value.registrationNumber,
-              status: value.customerStatus,
-              customer_id: value.customerId,
-            }
-        )
+        pos.vehicles.select(3, nextVehicleSelection);
         setRegistrationDraft(3, value.registrationNumber);
         //reg_3_status.value = value.customerStatus;
         break;
diff --git a/src/components/displays/department/pos/steps/mobile/views/PosDepartmentStep1MobileTransactionHistory.vue b/src/components/displays/department/pos/steps/mobile/views/PosDepartmentStep1MobileTransactionHistory.vue
index 834137f5..440676ff 100644
--- a/src/components/displays/department/pos/steps/mobile/views/PosDepartmentStep1MobileTransactionHistory.vue
+++ b/src/components/displays/department/pos/steps/mobile/views/PosDepartmentStep1MobileTransactionHistory.vue
@@ -1,14 +1,16 @@
-
 <script setup lang="ts">
-import {defineEmits, onMounted, onUnmounted, ref} from "vue";
-import { setTransparency, setBackgroundColor, backgroundColors, setOverflow } from "@/components/viewport/page/headers/ViewportHeaderSettings.vue";
+import { defineEmits, onMounted, onUnmounted, ref } from "vue";
+import {
+  setTransparency,
+  setBackgroundColor,
+  backgroundColors,
+  setOverflow,
+} from "@/components/viewport/page/headers/ViewportHeaderSettings.vue";
 import { pos } from "../objects/PosDepartmentStepMobileFlow.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 PosDepartmentStepMobileFixedBottomControl from "@/components/displays/department/pos/steps/mobile/elements/PosDepartmentStepMobileFixedBottomControl.vue";
+import PosDepartmentStepMobileButtonNextStep from "@/components/displays/department/pos/steps/mobile/elements/PosDepartmentStepMobileButtonNextStep.vue";
 import SessionUser from "@/components/session/token/SessionUser.vue";
-import {PosOrder} from "@/components/displays/department/pos/steps/mobile/objects/PosOrder.vue";
+import { PosOrder } from "@/components/displays/department/pos/steps/mobile/objects/PosOrder.vue";
 import WhiteBoxCard from "@/components/displays/boxes/WhiteBoxCard.vue";
 // Define the close event to emit when the component is closed
 const emit = defineEmits(["close"]);
@@ -42,26 +44,26 @@ const getTransactionCustomer = (transaction: PosOrder) => {
   if (!customerNumber) {
     return;
   }
-  SessionUser.objects.global.get.object('/users/customer', {customer_number: transaction.customer_id}).then((response) => {
-    if (response?.customer_name) {
-      transaction.customer_name = response.customer_name;
-    }
-  });
-}
+  SessionUser.objects.global.get
+    .object("/users/customer", { customer_number: transaction.customer_id })
+    .then((response) => {
+      if (response?.customer_name) {
+        transaction.customer_name = response.customer_name;
+      }
+    });
+};
 
 const getTransactionData = (transactions: PosOrder[]) => {
-  const safeTransactions = Array.isArray(transactions)
-      ? transactions.filter((transaction) => !!transaction)
-      : [];
+  const safeTransactions = Array.isArray(transactions) ? transactions.filter((transaction) => !!transaction) : [];
   if (safeTransactions.length === 0) {
     return;
   }
 
-  const validIds = [...new Set(
-      safeTransactions
-          .map((transaction) => toValidOrderId(transaction?.id))
-          .filter((id): id is number => id !== null)
-  )];
+  const validIds = [
+    ...new Set(
+      safeTransactions.map((transaction) => toValidOrderId(transaction?.id)).filter((id): id is number => id !== null)
+    ),
+  ];
   if (validIds.length === 0) {
     safeTransactions.forEach((transaction) => {
       transaction.error = SessionUser.objects.global.language.error_loading_transaction;
@@ -97,7 +99,7 @@ const getTransactionData = (transactions: PosOrder[]) => {
       getTransactionCustomer(transaction);
     });
   });
-}
+};
 
 const refreshInterval = setInterval(() => {
   syncListTransactionHistory();
@@ -110,43 +112,50 @@ onUnmounted(() => {
 const isPendingHandheld = (transaction: PosOrder) => {
   if (!transaction?.pending_handheld) return false;
   return !transaction?.completed_at;
-}
+};
 
 const hasError = (transaction: PosOrder) => {
   return !!transaction?.error;
-}
+};
 
 const getTransactionError = (transaction: PosOrder) => {
   return transaction?.error || SessionUser.objects.global.language.unknown_error;
-}
+};
 
-const liveTransactions = ref(null)
+const liveTransactions = ref(null);
 const isLoading = ref(true);
 
 const syncListTransactionHistory = async () => {
-  let dateToday = new Date().toISOString().split('T')[0]; // Get today's date in YYYY-MM-DD format
+  let dateToday = new Date().toISOString().split("T")[0]; // Get today's date in YYYY-MM-DD format
   isLoading.value = true;
   // Fetch the list of orders created today for the current department
-  SessionUser.objects.orders.get.list({filters: {
-    'created_at-date_from': dateToday,
-    'created_at-date_to': dateToday,
-    'department_id': SessionUser.functions.getDepartmentIdFromUrl(),
-    }, pagination: {
-      page: 1, limit: 1000
-    }}).then((response) => {
-    liveTransactions.value = Array.isArray(response) ? response : [];
-    // Clear the transactions
-    pos.transactionHistory.clear();
-    // Loop through the new transactions, and add them
-    for (let i = 0; i < liveTransactions.value.length; i++) {
-      if (liveTransactions.value[i]) {
-        pos.transactionHistory.add(liveTransactions.value[i]);
+  SessionUser.objects.orders.get
+    .list({
+      filters: {
+        "created_at-date_from": dateToday,
+        "created_at-date_to": dateToday,
+        department_id: SessionUser.functions.getDepartmentIdFromUrl(),
+      },
+      pagination: {
+        page: 1,
+        limit: 1000,
+      },
+    })
+    .then((response) => {
+      liveTransactions.value = Array.isArray(response) ? response : [];
+      // Clear the transactions
+      pos.transactionHistory.clear();
+      // Loop through the new transactions, and add them
+      for (let i = 0; i < liveTransactions.value.length; i++) {
+        if (liveTransactions.value[i]) {
+          pos.transactionHistory.add(liveTransactions.value[i]);
+        }
       }
-    }
-    getTransactionData(pos.transactionHistory.get());
-  }).finally(() => {
-    isLoading.value = false;
-  });
+      getTransactionData(pos.transactionHistory.get());
+    })
+    .finally(() => {
+      isLoading.value = false;
+    });
 };
 
 const isVisible = (transaction: PosOrder, showPending: boolean, showCompleted: boolean) => {
@@ -160,39 +169,60 @@ const isVisible = (transaction: PosOrder, showPending: boolean, showCompleted: b
     <!-- Visibility toggles -->
     <div class="columns is-mobile is-vcentered is-multiline">
       <div class="column is-half" v-for="(visibility, index) in [showPending, showCompleted]" :key="index">
-        <WhiteBoxCard :toggleable="false" :forceState="false" :defaultOpen="false" @click="() => { index === 0 ? showPending = !showPending : showCompleted = !showCompleted }">
+        <WhiteBoxCard
+          :toggleable="false"
+          :forceState="false"
+          :defaultOpen="false"
+          @click="
+            () => {
+              index === 0 ? (showPending = !showPending) : (showCompleted = !showCompleted);
+            }
+          "
+        >
           <template #header>
             <div class="card-header-title">
-                <span v-if="index === 0">{{ SessionUser.objects.global.language.pending }}</span>
-                <span v-else-if="index === 1">{{ SessionUser.objects.global.language.completed }}</span>
-                <span v-else>{{ SessionUser.objects.global.language.error }}</span>
+              <span v-if="index === 0">{{ SessionUser.objects.global.language.pending }}</span>
+              <span v-else-if="index === 1">{{ SessionUser.objects.global.language.completed }}</span>
+              <span v-else>{{ SessionUser.objects.global.language.error }}</span>
             </div>
             <div class="card-header-icon">
-                <!-- Checkbox icon, if visibility is true, show checked, else show unchecked -->
-                <span class="icon">
-                  <i v-if="visibility" class="fa-solid fa-check"></i>
-                  <i v-else class="fa-solid fa-square"></i>
-                </span>
+              <!-- Checkbox icon, if visibility is true, show checked, else show unchecked -->
+              <span class="icon">
+                <i v-if="visibility" class="fa-solid fa-check"></i>
+                <i v-else class="fa-solid fa-square"></i>
+              </span>
             </div>
           </template>
-          <template #content>
-          </template>
+          <template #content> </template>
         </WhiteBoxCard>
       </div>
     </div>
     <!-- Content -->
-    <div class="scrollable" style="overflow-x: hidden;">
+    <div class="scrollable" style="overflow-x: hidden">
       <!-- Transaction history list -->
       <div class="columns is-multiline is-mobile mb-6">
         <template v-for="(transaction, index) in pos.transactionHistory.get()" :key="index">
           <div class="column is-12" v-if="isVisible(transaction, showPending, showCompleted)">
-            <div class="box" @click="SessionUser.functions.redirectTo.department(transaction.department_id, 'modules/pos/orders/' + transaction.id)">
+            <div
+              class="box transaction-history-card"
+              :data-testid="`pos-mobile-transaction-history-card-${transaction.id}`"
+              @click="
+                SessionUser.functions.redirectTo.department(
+                  transaction.department_id,
+                  'modules/pos/orders/' + transaction.id
+                )
+              "
+            >
               <div class="columns is-mobile is-vcentered is-multiline">
                 <div class="column is-12 pb-0">
-                  <p class="is-size-7 has-text-grey">{{ SessionUser.functions.date.toWordsWithTime(new Date(transaction.created_at)) }}</p>
+                  <p class="is-size-7 has-text-grey">
+                    {{ SessionUser.functions.date.toWordsWithTime(new Date(transaction.created_at)) }}
+                  </p>
                 </div>
                 <div class="column is-8 pt-0">
-                  <p class="is-size-6 has-text-weight-semibold">{{ transaction?.customer_name || transaction?.customer_id }}</p>
+                  <p class="is-size-6 has-text-weight-semibold">
+                    {{ transaction?.customer_name || transaction?.customer_id }}
+                  </p>
                 </div>
                 <div class="column is-4 has-text-right">
                   <p class="is-size-6 has-text-weight-semibold">
@@ -202,15 +232,39 @@ const isVisible = (transaction: PosOrder, showPending: boolean, showCompleted: b
                 <div class="column is-12">
                   <div class="columns is-vcentered is-mobile">
                     <div class="column">
-                      <span class="icon" :class="hasError(transaction) ? 'has-text-danger' : isPendingHandheld(transaction) ? 'has-text-warning' : 'has-text-success'">
-                          <!-- If the pending_handheld is true, show a clock icon, else show a check icon -->
-                          <i v-if="hasError(transaction)" class="fa-solid fa-triangle-exclamation"></i>
-                          <i v-else-if="isPendingHandheld(transaction)" class="fa-solid fa-clock"></i>
-                          <i v-else class="fa-solid fa-check"></i>
+                      <span
+                        class="icon"
+                        :class="
+                          hasError(transaction)
+                            ? 'has-text-danger'
+                            : isPendingHandheld(transaction)
+                            ? 'has-text-warning'
+                            : 'has-text-success'
+                        "
+                      >
+                        <!-- If the pending_handheld is true, show a clock icon, else show a check icon -->
+                        <i v-if="hasError(transaction)" class="fa-solid fa-triangle-exclamation"></i>
+                        <i v-else-if="isPendingHandheld(transaction)" class="fa-solid fa-clock"></i>
+                        <i v-else class="fa-solid fa-check"></i>
                       </span>
-                      <span class="is-size-7" :class="hasError(transaction) ? 'has-text-danger' : isPendingHandheld(transaction) ? 'has-text-warning' : 'has-text-success'">
+                      <span
+                        class="is-size-7"
+                        :class="
+                          hasError(transaction)
+                            ? 'has-text-danger'
+                            : isPendingHandheld(transaction)
+                            ? 'has-text-warning'
+                            : 'has-text-success'
+                        "
+                      >
                         <!-- If there is an error, show the error message, else if pending_handheld is true, show "Confirmation needed", else show "Completed" -->
-                        {{ hasError(transaction) ? getTransactionError(transaction) : isPendingHandheld(transaction) ? SessionUser.objects.global.language.confirmation_needed : SessionUser.objects.global.language.completed }}
+                        {{
+                          hasError(transaction)
+                            ? getTransactionError(transaction)
+                            : isPendingHandheld(transaction)
+                            ? SessionUser.objects.global.language.confirmation_needed
+                            : SessionUser.objects.global.language.completed
+                        }}
                       </span>
                     </div>
                     <div class="column is-narrow has-text-right">
@@ -234,18 +288,38 @@ const isVisible = (transaction: PosOrder, showPending: boolean, showCompleted: b
       <!-- Buttons -->
       <PosDepartmentStepMobileFixedBottomControl>
         <!-- Refresh button -->
-        <PosDepartmentStepMobileButtonNextStep class="mb-2" :isWhite="false" :customAction="() => syncListTransactionHistory()" :customDisabled="false" :buttonClasses="['has-background-primary-dark', 'has-text-black', ...isLoading ? ['is-loading'] : []]">
+        <PosDepartmentStepMobileButtonNextStep
+          class="mb-2"
+          :isWhite="false"
+          :customAction="() => syncListTransactionHistory()"
+          :customDisabled="false"
+          :buttonClasses="['has-background-primary-dark', 'has-text-black', ...(isLoading ? ['is-loading'] : [])]"
+        >
           <span class="pos-mobile-action-content" data-testid="pos-mobile-transaction-history-reload-action">
-            <span class="pos-mobile-action-label has-text-white" data-testid="pos-mobile-transaction-history-reload-label">{{ SessionUser.objects.global.language.reload }}</span>
-            <span class="pos-mobile-action-icon has-text-white" data-testid="pos-mobile-transaction-history-reload-icon">
+            <span
+              class="pos-mobile-action-label has-text-white"
+              data-testid="pos-mobile-transaction-history-reload-label"
+              >{{ SessionUser.objects.global.language.reload }}</span
+            >
+            <span
+              class="pos-mobile-action-icon has-text-white"
+              data-testid="pos-mobile-transaction-history-reload-icon"
+            >
               <i class="fa-solid fa-arrows-rotate"></i>
             </span>
           </span>
         </PosDepartmentStepMobileButtonNextStep>
         <!-- Close button -->
-        <PosDepartmentStepMobileButtonNextStep :isWhite="false" :customAction="() => emit('close')" :customDisabled="false" :buttonClasses="['has-background-primary', 'has-text-black']">
+        <PosDepartmentStepMobileButtonNextStep
+          :isWhite="false"
+          :customAction="() => emit('close')"
+          :customDisabled="false"
+          :buttonClasses="['has-background-primary', 'has-text-black']"
+        >
           <span class="pos-mobile-action-content" data-testid="pos-mobile-transaction-history-close-action">
-            <span class="pos-mobile-action-label" data-testid="pos-mobile-transaction-history-close-label">{{ SessionUser.objects.global.language.close }}</span>
+            <span class="pos-mobile-action-label" data-testid="pos-mobile-transaction-history-close-label">{{
+              SessionUser.objects.global.language.close
+            }}</span>
             <span class="pos-mobile-action-icon" data-testid="pos-mobile-transaction-history-close-icon">
               <i class="fa-solid fa-xmark"></i>
             </span>
@@ -261,4 +335,8 @@ const isVisible = (transaction: PosOrder, showPending: boolean, showCompleted: b
   max-height: calc(100vh - 250px); /* Adjust based on header/footer height */
   overflow-y: auto;
 }
+
+.transaction-history-card {
+  border-top: 1px solid #dbdbdb;
+}
 </style>
diff --git a/src/components/displays/modals/DefaultObjectSelector.vue b/src/components/displays/modals/DefaultObjectSelector.vue
index d9e7c3c2..105ef50e 100644
--- a/src/components/displays/modals/DefaultObjectSelector.vue
+++ b/src/components/displays/modals/DefaultObjectSelector.vue
@@ -14,6 +14,10 @@ const props = defineProps({
     type: String,
     default: '',
   },
+  message: {
+    type: String,
+    default: '',
+  },
   showRadio: {
     type: Boolean,
     default: true, // Whether to show radio buttons for selection
@@ -22,6 +26,10 @@ const props = defineProps({
     type: Boolean,
     default: false, // Whether to show the footer with action buttons
   },
+  allowClose: {
+    type: Boolean,
+    default: true,
+  },
   objects: {
     // Array of objects to select from
     // All objects should have at least an id and a label
@@ -32,11 +40,22 @@ const props = defineProps({
       buttons?: Array<{
         label: string,
         action: () => void, // Function to call when button is clicked
+        color?: string,
+        testId?: string,
       }>,
       // Add other properties as needed
     }>,
     required: true,
   },
+  footerButtons: {
+    type: Array as () => Array<{
+      label: string,
+      action: () => void,
+      color?: string,
+      testId?: string,
+    }>,
+    default: () => [],
+  },
 });
 
 const emits = defineEmits(['update:isActive', 'selectedObject']);
@@ -49,22 +68,26 @@ const onChange = () => {
 };
 
 const toggleModal = () => {
+  if (!props.allowClose) {
+    return;
+  }
   emits('update:isActive', !props.isActive);
 };
 </script>
 
 <template>
-  <div class="modal" v-bind:class="{ 'is-active': props.isActive }">
+  <div class="modal" v-bind:class="{ 'is-active': props.isActive }" data-testid="default-object-selector">
     <div class="modal-background" @click="toggleModal"></div>
     <div class="modal-card">
       <header class="modal-card-head">
         <p class="modal-card-title">{{ props.title || t('modals.select_an_object') }}</p>
-        <button class="delete" aria-label="close" @click="toggleModal"></button>
+        <button v-if="props.allowClose" class="delete" aria-label="close" @click="toggleModal"></button>
       </header>
       <section class="modal-card-body">
+        <p v-if="props.message" class="mb-4">{{ props.message }}</p>
         <!-- Content ... -->
         <template v-for="obj in props.objects" :key="obj.id">
-          <WhiteBox class="mb-3">
+          <WhiteBox class="mb-3" :data-testid="`default-object-selector-option-${obj.id}`">
             <div class="field">
               <label class="label">{{ obj.label }}</label>
               <div class="control" v-if="props.showRadio">
@@ -84,7 +107,9 @@ const toggleModal = () => {
               <button
                 v-for="button in obj.buttons"
                 :key="button.label"
-                class="button is-small is-dark"
+                class="button is-small"
+                :class="`is-${button.color || 'dark'}`"
+                :data-testid="button.testId"
                 @click="button.action()"
               >
                 {{ button.label }}
@@ -94,7 +119,19 @@ const toggleModal = () => {
         </template>
       </section>
       <footer class="modal-card-foot">
-        <div class="buttons" v-if="props.showFooter">
+        <div class="buttons" v-if="props.footerButtons.length > 0">
+          <button
+            v-for="button in props.footerButtons"
+            :key="button.label"
+            class="button"
+            :class="`is-${button.color || 'light'}`"
+            :data-testid="button.testId"
+            @click="button.action()"
+          >
+            {{ button.label }}
+          </button>
+        </div>
+        <div class="buttons" v-else-if="props.showFooter">
           <button class="button is-success">{{ t('modals.save_changes') }}</button>
           <button class="button">{{ t('common.cancel') }}</button>
         </div>
@@ -105,4 +142,4 @@ const toggleModal = () => {
 
 <style scoped>
 
-</style>
\ No newline at end of file
+</style>
diff --git a/src/components/forms/department/pos/SelectVehicleFormPOS.vue b/src/components/forms/department/pos/SelectVehicleFormPOS.vue
index dea947f5..06fcbe39 100644
--- a/src/components/forms/department/pos/SelectVehicleFormPOS.vue
+++ b/src/components/forms/department/pos/SelectVehicleFormPOS.vue
@@ -1,6 +1,27 @@
 <script setup>
-import { computed, ref, defineEmits } from 'vue';
-import { customer_id, notes, isCustomerBarred, customer_name, reference, reg_1, reg_2, reg_3, searchAndSelectCustomer, selectCustomer, isCustomerSelected, customer_attributes } from "@/components/shop/POSDepartmentProcess.vue";
+import { computed, ref, defineEmits, watch } from 'vue';
+import {
+  customer_id,
+  notes,
+  isCustomerBarred,
+  customer_name,
+  reference,
+  reg_1,
+  reg_2,
+  reg_3,
+  order_notes,
+  order_po,
+  searchAndSelectCustomer,
+  selectCustomer,
+  isCustomerSelected,
+  customer_attributes,
+  selectedOrderBookingId,
+  selectedOrderBookingPlate,
+  setSelectedOrderBookingSelection,
+  clearSelectedOrderBookingSelection,
+  skipSelectedOrderBookingSelection,
+  isSelectedOrderBookingSkippedForPlate,
+} from "@/components/shop/POSDepartmentProcess.vue";
 import CustomerSearchField from "@/components/search/economic/customerSearchField.vue";
 import { searchCustomerResults } from "@/components/search/economic/customerSearch.vue";
 import PosNotes from "@/components/displays/department/pos/PosNotes.vue";
@@ -14,6 +35,10 @@ import WhiteBox from "@/components/displays/boxes/WhiteBox.vue";
 import OrderContentTable from "@/components/displays/superuser/tables/OrderContentTable.vue";
 import OrderItemsTable from "@/components/displays/department/pos/order/orderItemsTable.vue";
 import VehicleCustomerSuggestionsPos from "@/components/forms/department/pos/input/vehicleCustomerSuggestionsPos.vue";
+import DefaultObjectSelector from "@/components/displays/modals/DefaultObjectSelector.vue";
+import { useI18n } from 'vue-i18n';
+
+const { t, locale } = useI18n();
 
 const isRegistrationNumbersExpanded = ref(false);
 const isOtherExpanded = ref(false);
@@ -35,20 +60,79 @@ const keyDownNextTabIndexButton = (event, tabIndex) => {
 };
 
 const vehicleObject = ref(null);
+const bookingObject = ref(null);
+const bookingMatches = ref([]);
+const isBookingSelectorActive = ref(false);
+
+const normalizePlateValue = (value) => String(value ?? '').replace(/\s/g, '').toUpperCase();
+
+const getCurrentVehiclePlate = () => {
+  return normalizePlateValue(vehicleObject.value?.reg || reg_1.value);
+};
+
+const formatBookingDateTime = (booking) => {
+  const rawValue = booking?.datetime || booking?.created_at || booking?.date || null;
+  if (!rawValue) {
+    return t('admin.pos.not_found');
+  }
+
+  const parsedValue = new Date(rawValue);
+  if (Number.isNaN(parsedValue.getTime())) {
+    return rawValue;
+  }
+
+  return new Intl.DateTimeFormat(locale.value || undefined, {
+    dateStyle: 'short',
+    timeStyle: 'short',
+  }).format(parsedValue);
+};
+
+const getBookingReferenceValue = (booking) => {
+  return String(booking?.reference ?? booking?.reference_number ?? '').trim();
+};
+
+const getBookingNotesValue = (booking) => {
+  return String(booking?.notes ?? booking?.note ?? '').trim();
+};
+
+const getBookingCustomerNumber = (booking) => {
+  const parsedValue = Number.parseInt(String(booking?.customer_number ?? booking?.customer_id ?? ''), 10);
+  return Number.isInteger(parsedValue) && parsedValue > 0 ? parsedValue : null;
+};
+
+const getBookingServicesValue = (booking) => {
+  if (Array.isArray(booking?.parsed_services?.array) && booking.parsed_services.array.length > 0) {
+    return booking.parsed_services.array.join(', ');
+  }
+
+  return String(booking?.parsed_services?.string ?? booking?.wash_type ?? '').trim();
+};
+
+const resetReferenceFromVehicle = () => {
+  if (vehicleObject.value?.reference) {
+    reference.value = vehicleObject.value.reference;
+    return;
+  }
+
+  reference.value = '';
+};
 
 const setVehicleObject = (emittedVehicleObject) => {
   // Set the vehicle object to the ref
   vehicleObject.value = emittedVehicleObject;
-  // Console log the reference
-  if (vehicleObject.value && vehicleObject.value.reference) {
+  // Prefer the vehicle reference unless a booking is already selected for the same plate
+  if (
+    vehicleObject.value &&
+    vehicleObject.value.reference &&
+    normalizePlateValue(selectedOrderBookingPlate.value) !== normalizePlateValue(vehicleObject.value.reg)
+  ) {
     reference.value = vehicleObject.value.reference;
-  } else {
+  } else if (!selectedOrderBookingId.value) {
     // Reset the reference, if the vehicle object does not have a reference
     reference.value = '';
   }
 };
 
-const bookingObject = ref(null);
 const setBookingObject = (emittedBookingObject) => {
   // Set the booking object to the ref
   bookingObject.value = emittedBookingObject;
@@ -58,6 +142,138 @@ const setBookingObject = (emittedBookingObject) => {
   }
 };
 
+const setBookingMatches = (emittedBookingMatches) => {
+  bookingMatches.value = Array.isArray(emittedBookingMatches) ? emittedBookingMatches : [];
+};
+
+const applySelectedOrderBooking = async (booking) => {
+  if (!booking?.id) {
+    return;
+  }
+
+  bookingObject.value = booking;
+  isBookingSelectorActive.value = false;
+  setSelectedOrderBookingSelection(booking, getCurrentVehiclePlate());
+
+  const bookingCustomerNumber = getBookingCustomerNumber(booking);
+  if (bookingCustomerNumber) {
+    await searchAndSelectCustomer(bookingCustomerNumber);
+  }
+
+  const bookingReference = getBookingReferenceValue(booking);
+  if (bookingReference !== '') {
+    reference.value = bookingReference;
+  } else {
+    resetReferenceFromVehicle();
+  }
+
+  order_notes.value = getBookingNotesValue(booking);
+  order_po.value = String(booking?.po ?? '').trim();
+
+  if (vehicleObject.value) {
+    vehicleObject.value = {
+      ...vehicleObject.value,
+      booking_id: booking.id,
+    };
+  }
+};
+
+const continueWithoutBooking = () => {
+  bookingObject.value = null;
+  isBookingSelectorActive.value = false;
+  skipSelectedOrderBookingSelection(getCurrentVehiclePlate());
+  order_notes.value = '';
+  order_po.value = '';
+  resetReferenceFromVehicle();
+
+  if (vehicleObject.value) {
+    vehicleObject.value = {
+      ...vehicleObject.value,
+      booking_id: null,
+    };
+  }
+};
+
+const bookingSelectorObjects = computed(() => {
+  return bookingMatches.value.map((booking) => {
+    const plateText = [booking?.reg_1, booking?.reg_2].filter(Boolean).join(' / ');
+    const contentSegments = [
+      `${t('admin.pos.order_booking_selector.customer_label')}: ${booking?.customer_name || t('admin.pos.not_found')}`,
+      `${t('admin.pos.order_booking_selector.plates_label')}: ${plateText || t('admin.pos.not_found')}`,
+      `${t('admin.pos.order_booking_selector.reference_label')}: ${getBookingReferenceValue(booking) || t('admin.pos.not_found')}`,
+      `${t('admin.pos.order_booking_selector.services_label')}: ${getBookingServicesValue(booking) || t('admin.pos.not_found')}`,
+    ];
+
+    return {
+      id: booking.id,
+      label: t('admin.pos.order_booking_selector.option_title', {
+        id: booking.id,
+        datetime: formatBookingDateTime(booking),
+      }),
+      content: contentSegments.join(' • '),
+      buttons: [
+        {
+          label: t('admin.pos.order_booking_selector.use_booking'),
+          action: () => applySelectedOrderBooking(booking),
+          color: 'primary',
+          testId: `pos-desktop-order-booking-use-${booking.id}`,
+        },
+      ],
+    };
+  });
+});
+
+watch(bookingMatches, async (matches) => {
+  const currentPlate = getCurrentVehiclePlate();
+
+  if (!currentPlate) {
+    bookingObject.value = null;
+    isBookingSelectorActive.value = false;
+    clearSelectedOrderBookingSelection();
+    return;
+  }
+
+  if (!Array.isArray(matches) || matches.length === 0) {
+    bookingObject.value = null;
+    isBookingSelectorActive.value = false;
+    clearSelectedOrderBookingSelection();
+    resetReferenceFromVehicle();
+    return;
+  }
+
+  if (matches.length === 1) {
+    const [singleBooking] = matches;
+    if (Number(selectedOrderBookingId.value) !== Number(singleBooking.id)) {
+      await applySelectedOrderBooking(singleBooking);
+    } else {
+      bookingObject.value = singleBooking;
+      isBookingSelectorActive.value = false;
+    }
+    return;
+  }
+
+  const hasPersistedSelectionForCurrentPlate =
+    normalizePlateValue(selectedOrderBookingPlate.value) === currentPlate &&
+    matches.some((booking) => Number(booking.id) === Number(selectedOrderBookingId.value));
+
+  if (hasPersistedSelectionForCurrentPlate) {
+    bookingObject.value =
+      matches.find((booking) => Number(booking.id) === Number(selectedOrderBookingId.value)) || null;
+    isBookingSelectorActive.value = false;
+    return;
+  }
+
+  if (isSelectedOrderBookingSkippedForPlate(currentPlate)) {
+    bookingObject.value = null;
+    isBookingSelectorActive.value = false;
+    return;
+  }
+
+  clearSelectedOrderBookingSelection({ clearSkippedPlate: false });
+  bookingObject.value = null;
+  isBookingSelectorActive.value = true;
+});
+
 const ucFirst = (str) => {
   return str.charAt(0).toUpperCase() + str.slice(1);
 };
@@ -145,6 +361,7 @@ const hasSecondaryContent = computed(() => {
         @update:vehicleObject="setVehicleObject"
         @update:focus="setFocusStateReg1"
         @update:bookingObject="setBookingObject"
+        @update:bookingMatches="setBookingMatches"
         />
       </div>
     </div>
@@ -324,6 +541,22 @@ const hasSecondaryContent = computed(() => {
         <PosNotes :notes="notes" :is-loading="false" :isAddFormVisible="SessionUser.adminUser" :isOldNotesVisible="false" :is-label-visible="true" class="mt-3" v-if="isCustomerSelected()" />
       </template>
     </ExpandableContentBox>
+    <DefaultObjectSelector
+      v-model:isActive="isBookingSelectorActive"
+      :allowClose="false"
+      :showRadio="false"
+      :title="t('admin.pos.order_booking_selector.title')"
+      :message="t('admin.pos.order_booking_selector.help_text')"
+      :objects="bookingSelectorObjects"
+      :footerButtons="[
+        {
+          label: t('admin.pos.order_booking_selector.continue_without_booking'),
+          action: continueWithoutBooking,
+          color: 'light',
+          testId: 'pos-desktop-order-booking-skip',
+        },
+      ]"
+    />
   </div>
 </template>
 
diff --git a/src/components/forms/department/pos/input/LicensePlateReg1Input.vue b/src/components/forms/department/pos/input/LicensePlateReg1Input.vue
index fcd9db3b..174b95e0 100644
--- a/src/components/forms/department/pos/input/LicensePlateReg1Input.vue
+++ b/src/components/forms/department/pos/input/LicensePlateReg1Input.vue
@@ -1,7 +1,18 @@
 <script setup>
 import { SessionUser } from "@/components/session/token/SessionUser.vue";
 import {ref, watch, defineEmits, onMounted} from "vue";
-import { reg_1, getCustomerName, searchAndSelectCustomer, customer_id, clearCache, clearCustomerSelection, department_id } from "@/components/shop/POSDepartmentProcess.vue"
+import {
+  reg_1,
+  getCustomerName,
+  searchAndSelectCustomer,
+  customer_id,
+  clearCustomerSelection,
+  department_id,
+  loadPendingBookings,
+  doesVehiclePlateHaveBooking,
+  getVehiclePlateBookings,
+  getPreferredVehiclePlateBooking,
+} from "@/components/shop/POSDepartmentProcess.vue"
 import { defineProps } from "vue";
 // Define the props for the component
 const props = defineProps({
@@ -11,25 +22,7 @@ const props = defineProps({
   }
 });
 
-const emit = defineEmits(['update:vehicleObject', 'update:focus', 'update:bookingObject']);
-
-const pendingBookings = ref([]);
-// Get the department booking list
-const loadPendingBookings = () => {
-  SessionUser.request(
-      SessionUser.objects.bookings.meta.endpoint,
-      'GET',
-      {
-        filters: 'department:' + department_id.value + ',status:pending',
-        page: 1,
-        limit: 100,
-      }
-  ).then(response => {
-    pendingBookings.value = response.data.data;
-  }).catch(error => {
-    console.error("Error:", error);
-  });
-};
+const emit = defineEmits(['update:vehicleObject', 'update:focus', 'update:bookingObject', 'update:bookingMatches']);
 
 // Load the pending bookings when the component is mounted
 onMounted(() => {
@@ -42,37 +35,17 @@ watch(department_id, (newValue) => {
   }
 });
 
-const getVehiclePlateBooking = (vehiclePlate) => {
-  if (!vehiclePlate || !doesVehiclePlateHaveBooking(vehiclePlate)) {
-    // If the vehicle plate is empty or doesn't have a booking, return null
-    return null;
-  }
-  // Find the booking for the given vehicle plate
-  return pendingBookings.value.find(booking => booking.regNrTraekker === vehiclePlate || booking.regNrTrailer === vehiclePlate);
-};
-
-const doesVehiclePlateHaveBooking = (vehiclePlate) => {
-  // Check if the vehicle has a booking in the pending bookings list
-  return pendingBookings.value.some(booking => booking.regNrTraekker === vehiclePlate || booking.regNrTrailer === vehiclePlate);
-};
-
 // Function to emit the booking object to the parent component
 const emitBookingObject = (vehicle) => {
-  // Check if the vehicle has a booking
-  if (vehicle && vehicle.reg && doesVehiclePlateHaveBooking(vehicle.reg)) {
-    // Get the booking object for the vehicle
-    const booking = getVehiclePlateBooking(vehicle.reg);
-    if (booking) {
-      // Emit the booking object to the parent component
-      emit('update:bookingObject', booking);
-    } else {
-      // Emit null if no booking is found
-      emit('update:bookingObject', null);
-    }
-  } else {
-    // Emit null if no vehicle is provided
-    emit('update:bookingObject', null);
+  const bookingMatches = vehicle?.reg ? getVehiclePlateBookings(vehicle.reg) : [];
+  emit('update:bookingMatches', bookingMatches);
+
+  if (bookingMatches.length === 1) {
+    emit('update:bookingObject', getPreferredVehiclePlateBooking(vehicle.reg));
+    return;
   }
+
+  emit('update:bookingObject', null);
 };
 
 
diff --git a/src/components/models/pos/step1/RegistrationNumberSearchResult.vue b/src/components/models/pos/step1/RegistrationNumberSearchResult.vue
index dd4b62c5..f5e021aa 100644
--- a/src/components/models/pos/step1/RegistrationNumberSearchResult.vue
+++ b/src/components/models/pos/step1/RegistrationNumberSearchResult.vue
@@ -2,11 +2,9 @@
 
 import {defineComponent, defineEmits, defineProps, ref, watch, onMounted} from "vue";
 import { VehicleStatusKey, statusKeyToComponent } from "@/components/displays/department/pos/steps/mobile/objects/PosVehicleStatus.vue";
-import { vehicles_matching, searchVehicle, register_new_search, is_latest_search, clearCustomerSelection, isSearching, pendingBookings, loadPendingBookings, doesVehiclePlateHaveBooking, getVehiclePlateBooking, searchAndSelectCustomer, reg_1, reg_2 } from "@/components/shop/POSDepartmentProcess.vue";
-import { setCustomerId, pos } from "@/components/displays/department/pos/steps/mobile/objects/PosDepartmentStepMobileFlow.vue";
+import { vehicles_matching, searchVehicle, register_new_search, is_latest_search, clearCustomerSelection, isSearching, pendingBookings, loadPendingBookings, doesVehiclePlateHaveBooking, getVehiclePlateBookings, getPreferredVehiclePlateBooking, searchAndSelectCustomer, reg_1, reg_2 } from "@/components/shop/POSDepartmentProcess.vue";
+import { metadata, popups, setCustomerId, pos } from "@/components/displays/department/pos/steps/mobile/objects/PosDepartmentStepMobileFlow.vue";
 import {PosSearchResult} from "@/components/displays/department/pos/steps/mobile/objects/PosSearchResult.vue";
-import Swal from "sweetalert2";
-import SessionUser from "@/components/session/token/SessionUser.vue";
 defineComponent({
   name: "RegistrationNumberSearchResult"
 });
@@ -41,92 +39,149 @@ const searchResults = ref<PosSearchResult[]>([]);
 //  customerStatus: generateCustomerStatus(),
 //}));
 
-const applyBookingAutomatically = (booking: any) => {
-  // If the booking id is not null, ignore everything. (To prevent running this function multiple times)
-  if (pos.metadata.getBookingId()) {
+const normalizeRegistrationNumber = (value: string | null | undefined) => String(value ?? '').replace(/\s+/g, '').toUpperCase();
+
+const applySearchResultCustomerSelection = (result: PosSearchResult) => {
+  if (!props.modifyCustomerOnChange) {
     return;
   }
+
+  if (result?.customerId) {
+    searchAndSelectCustomer(result.customerId);
+    setCustomerId(result.customerId);
+    return;
+  }
+
+  setCustomerId(null);
+};
+
+const emitSelectedResult = (result: PosSearchResult | null) => {
+  emits('select', result);
+};
+
+const applySelectedBooking = async (booking: any, result: PosSearchResult) => {
   if (!booking?.id) {
     return;
   }
-  pos.metadata.setBookingId(booking.id); // Set the booking ID to prevent multiple prompts, this is reset if the user cancels.
-  // If the input registration numbers manually is displayed, hide it.
+
+  const bookingMatches = Array.isArray(result?.bookingMatches) ? result.bookingMatches : [booking];
+  const customerNumber = Number.parseInt(String(booking?.customer_number ?? booking?.customer_id ?? result?.customerId ?? 0), 10) || 0;
+
+  metadata.setBookingId(booking.id);
+  metadata.clearBookingSelectionSkippedPlate?.();
   pos.views.manualInput.value = false;
-  //console.warn("applyBookingAutomatically:", booking);
-  Swal.fire({
-    title: 'Booking fundet',
-    text: `En booking for ${booking.customer_name} er fundet. Vil du anvende den?`,
-    icon: 'question',
-    showCancelButton: true,
-    confirmButtonText: 'Ja',
-    cancelButtonText: 'Nej',
-  }).then((result) => {
-    if (result.isConfirmed) {
-      //console.warn("User confirmed to apply booking:", booking);
-      // Apply the booking
-      pos.metadata.setBookingId(booking.id);
-      pos.metadata.setNotes(booking.note || `Booking ID: ${booking.id}`);
-      pos.metadata.setReference(booking.reference || '');
-      // Set the registration numbers
-      reg_1.value = booking.reg_1;
-      reg_2.value = booking.reg_2 || '';
-      // Select the vehicles
-      pos.vehicles.select(1, {
-        reg: booking.reg_1,
-        type: 0, // TODO: Determine type from booking if possible
-        customer_id: booking.customer_number,
-        status: 'booked',
-        barred: false,
-        booking_id: booking.id,
-      });
-      if (booking.reg_2) {
-        pos.vehicles.select(2, {
-          reg: booking.reg_2,
-          type: 0, //TODO: Determine type from booking if possible
-          customer_id: booking.customer_number,
-          status: 'booked',
-          barred: false,
-          booking_id: booking.id,
-        });
-      }
-      pos.vehicles.select(3, null)
-      // Set the customer ID
-      searchAndSelectCustomer(booking.customer_number);
-      setCustomerId(booking.customer_number);
-      // Go to the next step
-      //console.warn('Navigating to next step in POS flow.');
-    } else {
-      // If the user cancels, reset the booking ID to allow future prompts
-      pos.metadata.setBookingId(null);
-    }
+  pos.metadata.setNotes(booking.note || booking.notes || `Booking ID: ${booking.id}`);
+  pos.metadata.setReference(booking.reference || booking.reference_number || '');
+  reg_1.value = booking.reg_1 || result?.registrationNumber || '';
+  reg_2.value = booking.reg_2 || '';
+
+  pos.vehicles.select(1, {
+    reg: booking.reg_1 || result?.registrationNumber || '',
+    type: result?.type || 0,
+    customer_id: customerNumber,
+    status: 'booked',
+    barred: false,
+    booking_id: booking.id,
+    booking_matches: bookingMatches,
+    reference: booking.reference || booking.reference_number || result?.reference || null,
+    last_order_id: result?.lastOrderId || null,
+    wash_subscription: result?.washSubscription,
+  });
+
+  if (booking.reg_2) {
+    pos.vehicles.select(2, {
+      reg: booking.reg_2,
+      type: 0,
+      customer_id: customerNumber,
+      status: 'booked',
+      barred: false,
+      booking_id: booking.id,
+      booking_matches: bookingMatches,
+    });
+  }
+
+  pos.vehicles.select(3, null);
+
+  if (customerNumber > 0) {
+    await searchAndSelectCustomer(customerNumber);
+    setCustomerId(customerNumber);
+  }
+
+  popups.clear();
+  emitSelectedResult({
+    ...result,
+    registrationNumber: booking.reg_1 || result?.registrationNumber,
+    customerName: booking.customer_name || result?.customerName || "Unknown Customer",
+    customerId: customerNumber,
+    customerStatus: 'booked',
+    reference: booking.reference || booking.reference_number || result?.reference || null,
+    bookingId: booking.id,
+    bookingMatches,
   });
 };
 
-const onSelect = (result: PosSearchResult) => {
-  //console.warn("onSelect:", result);
-  // Check if the vehicle has a booking
-  if (result?.bookingId && result.bookingId > 0) {
-    //console.warn("Vehicle has a booking:", getVehiclePlateBooking(result.registrationNumber));
-    SessionUser.objects.order_bookings.get.single(result.bookingId).then((booking) => {
-      // Apply the booking automatically
-      applyBookingAutomatically(booking);
-    }).catch((error) => {
-      console.error("Error fetching booking:", error);
-    });
+const continueWithoutBookingSelection = (result: PosSearchResult) => {
+  metadata.setBookingId(null);
+  metadata.setBookingSelectionSkippedPlate?.(normalizeRegistrationNumber(result?.registrationNumber || props.searchQuery));
+  popups.clear();
+  applySearchResultCustomerSelection(result);
+  emitSelectedResult({
+    ...result,
+    bookingId: null,
+  });
+};
+
+const openOrderBookingPopup = (result: PosSearchResult) => {
+  pos.views.manualInput.value = false;
+  popups.select('select_order_booking', {
+    title: popups.getByKey('select_order_booking')?.title,
+    message: popups.getByKey('select_order_booking')?.message,
+    props: {
+      bookings: result.bookingMatches || [],
+      onSelect: (booking: any) => applySelectedBooking(booking, result),
+      onSkip: () => continueWithoutBookingSelection(result),
+    },
+    actionButtons: [],
+  });
+};
+
+const onSelect = async (result: PosSearchResult) => {
+  if (!result) {
+    emitSelectedResult(null);
+    return;
   }
-  // Search and select the customer based on the registration number
-  if (props.modifyCustomerOnChange) {
-    if (result?.customerId) {
-      // If the customer ID is present, search and select the customer
-      searchAndSelectCustomer(result.customerId);
-      setCustomerId(result.customerId); // This is to ensure data is kept where it's relevant.
-    } else {
-      // If the customer ID is not present, emit the result as null
-      setCustomerId(null);
+
+  const bookingMatches = Array.isArray(result.bookingMatches) ? result.bookingMatches : [];
+  if (bookingMatches.length === 1) {
+    await applySelectedBooking(bookingMatches[0], result);
+    return;
+  }
+
+  if (bookingMatches.length > 1) {
+    const normalizedRegistrationNumber = normalizeRegistrationNumber(result.registrationNumber || props.searchQuery);
+    if (metadata.getBookingSelectionSkippedPlate?.() === normalizedRegistrationNumber) {
+      metadata.setBookingId(null);
+      applySearchResultCustomerSelection(result);
+      emitSelectedResult({
+        ...result,
+        bookingId: null,
+      });
+      return;
     }
+
+    const existingBooking = bookingMatches.find((booking: any) => Number(booking.id) === Number(metadata.getBookingId?.()));
+    if (existingBooking) {
+      await applySelectedBooking(existingBooking, result);
+      return;
+    }
+
+    openOrderBookingPopup(result);
+    return;
   }
-  // Emit the selected result to the parent component
-  emits('select', result);
+
+  metadata.setBookingId(null);
+  applySearchResultCustomerSelection(result);
+  emitSelectedResult(result);
 };
 
 const emitVehicleObject = (vehicle: any) => {
@@ -196,10 +251,10 @@ watch(() => vehicles_matching.value, (newValue) => {
   if (newValue) {
     //console.warn("vehicles_matching changed:", newValue);
     const result = newValue.map(vehicle => {
-      // Check if the vehicle has a booking
-      if (doesVehiclePlateHaveBooking(vehicle.reg)) {
-        vehicle.customer_name = getVehiclePlateBooking(vehicle.reg).customer_name;
-        //vehicle.customer_id = getVehiclePlateBooking(vehicle.reg).customer_id;
+      const bookingMatches = getVehiclePlateBookings(vehicle.reg);
+      const preferredBooking = bookingMatches[0] || null;
+      if (preferredBooking) {
+        vehicle.customer_name = preferredBooking.customer_name;
       }
       // Transform the vehicle object to the SearchResult type
       //console.warn('Transforming vehicle to PosSearchResult:', vehicle);
@@ -213,7 +268,8 @@ watch(() => vehicles_matching.value, (newValue) => {
         reference: vehicle?.reference || null,
         lastOrderId: vehicle?.last_order_id || null,
         washSubscription: vehicle?.wash_subscription || null,
-        bookingId: vehicle?.booking_id || null,
+        bookingId: bookingMatches.length === 1 ? bookingMatches[0].id : vehicle?.booking_id || null,
+        bookingMatches,
       } as PosSearchResult;
     });
     //console.warn('Transformed PosSearchResult:', result);
@@ -245,6 +301,7 @@ const automaticallySelect = () => {
         lastOrderId: match?.lastOrderId || null,
         washSubscription: match?.washSubscription,
         bookingId: match?.bookingId || null,
+        bookingMatches: match?.bookingMatches || [],
       });
     }
   }
@@ -253,8 +310,7 @@ const automaticallySelect = () => {
 const determineCustomerStatus = (vehicle: any): VehicleStatusKey => {
   //console.warn('Determine customer status for vehicle:', vehicle);
   // Determine the customer status based on the vehicle object
-  if (vehicle?.booking_id) {
-    //console.warn('Vehicle has a booking:', getVehiclePlateBooking(vehicle.reg));
+  if ((Array.isArray(vehicle?.bookingMatches) && vehicle.bookingMatches.length > 0) || doesVehiclePlateHaveBooking(vehicle?.reg) || vehicle?.booking_id) {
     return 'booked';
   } else if (vehicle?.status === 'known') {
     //console.warn('Vehicle is known:', vehicle);
@@ -279,8 +335,7 @@ const importPendingBookings = () => {
   pendingBookings.value.forEach(booking => {
     const vehicle = vehicles_matching.value.find(v => v.reg.toUpperCase() === booking.reg_1.toUpperCase() || v.reg.toUpperCase() === booking.reg_2?.toUpperCase());
     if (vehicle) {
-      vehicle.customer_name = booking.customer_name;
-      //vehicle.customer_id = booking.customer_id;
+      vehicle.customer_name = getPreferredVehiclePlateBooking(vehicle.reg)?.customer_name || booking.customer_name;
     }
   });
 };
diff --git a/src/components/shop/POSDepartmentProcess.vue b/src/components/shop/POSDepartmentProcess.vue
index 301ea30e..6944e79d 100644
--- a/src/components/shop/POSDepartmentProcess.vue
+++ b/src/components/shop/POSDepartmentProcess.vue
@@ -1,12 +1,12 @@
 <script>
-import {computed, ref, watch} from 'vue';
-import axios from 'axios';
-import {API_URL} from "@/config.js";
+import { computed, ref, watch } from "vue";
+import axios from "axios";
+import { API_URL } from "@/config.js";
 import { getScansDepartmentPagination } from "@/components/numberplatescanners/Scans.vue";
-import {useRouter} from "vue-router";
+import { useRouter } from "vue-router";
 import { parseError, clearErrors } from "@/components/request/HandleGlobalError.vue";
 import { getNotes, createNote, deleteNote } from "@/components/shop/CustomerNotes.vue";
-import { getOrderItems } from "@/components/shop/OrdersItems.vue";
+import { createOrderItem, getOrderItems } from "@/components/shop/OrdersItems.vue";
 import { getAttributes } from "@/components/shop/CustomerAttributes.vue";
 import { SessionUser } from "@/components/session/token/SessionUser.vue";
 import { authenticatedRequest } from "@/components/session/authenticatedRequest.vue";
@@ -21,19 +21,19 @@ export const hideDiscountsCatalog = ref(null);
 // Setters for the hide prices and discounts
 export const setHidePricesCatalog = (value) => {
   hidePricesCatalog.value = value;
-  localStorage.setItem('hidePricesCatalog', '' + value);
+  localStorage.setItem("hidePricesCatalog", "" + value);
 };
 
 export const setHideDiscountsCatalog = (value) => {
   hideDiscountsCatalog.value = value;
-  localStorage.setItem('hideDiscountsCatalog', '' + value);
+  localStorage.setItem("hideDiscountsCatalog", "" + value);
 };
 
 // Getters
 export const getHidePricesCatalog = () => {
   // If the value is not set, get it from the local storage
   if (hidePricesCatalog.value === null) {
-    hidePricesCatalog.value = localStorage.getItem('hidePricesCatalog') === 'true';
+    hidePricesCatalog.value = localStorage.getItem("hidePricesCatalog") === "true";
   }
   return hidePricesCatalog.value;
 };
@@ -41,7 +41,7 @@ export const getHidePricesCatalog = () => {
 export const getHideDiscountsCatalog = () => {
   // If the value is not set, get it from the local storage
   if (hideDiscountsCatalog.value === null) {
-    hideDiscountsCatalog.value = localStorage.getItem('hideDiscountsCatalog') === 'true';
+    hideDiscountsCatalog.value = localStorage.getItem("hideDiscountsCatalog") === "true";
   }
   return hideDiscountsCatalog.value;
 };
@@ -61,7 +61,7 @@ export const setNextStepDelay = (delay) => {
 };
 
 /** Define the step functions */
-export const nextStep = async (options = {isMobile: false, orderCreation: true}) => {
+export const nextStep = async (options = { isMobile: false, orderCreation: true }) => {
   const normalizedOptions = {
     isMobile: false,
     orderCreation: true,
@@ -82,6 +82,9 @@ export const nextStep = async (options = {isMobile: false, orderCreation: true})
       return;
     }
     const didCreateOrder = await createOrder(normalizedOptions);
+    if (didCreateOrder && normalizedOptions.isMobile === false) {
+      await hydrateSelectedOrderBookingForDesktop();
+    }
     if (didCreateOrder && step.value === 1) {
       step.value++;
     }
@@ -91,36 +94,44 @@ export const nextStep = async (options = {isMobile: false, orderCreation: true})
     // If the current step is 2, set the product category to addons
     setProductsCategory(4);
     // Set the step to 3 in the query parameters
-    window.history.pushState({}, '', `?id=${order_id.value}&customer_id=${customer_id.value}&step=3`);
+    window.history.pushState({}, "", `?id=${order_id.value}&customer_id=${customer_id.value}&step=3`);
   }
   if (step.value === 3) {
     // Mark the order as completed
-    await SessionUser.objects.orders.functions.mark_as_completed(order_id.value).then((response) => {
-      // Check if the order contains any material, if not, we can skip the next step
-      if (!doesOrderContainMaterial()) {
-        // Show a "Success" dialog, that closes after 2 seconds, then redirects to the next page
-        Swal.fire({
-          title: 'Fuldført',
-          text: 'Transaktionen er fuldført, omdirigerer automatisk...',
-          icon: 'success',
-          showConfirmButton: false,
-          timer: 2000
-        }).then(() => {
-          // Redirect to the next page
-          window.location.href = '/admin/' + department_id.value + '/modules/pos';
-        });
-      }
-      // Set the step to 4 in the query parameters
-      window.history.pushState({}, '', `?id=${order_id.value}&customer_id=${customer_id.value}&step=4`);
-    }).catch((error) => {
-      parseError(error, 'stepError');
-    })
+    await SessionUser.objects.orders.functions
+      .mark_as_completed(order_id.value)
+      .then(async (response) => {
+        if (normalizedOptions.isMobile === false) {
+          const didCompleteSelectedBooking = await finalizeSelectedOrderBookingForDesktop();
+          if (!didCompleteSelectedBooking) {
+            return;
+          }
+        }
+        // Check if the order contains any material, if not, we can skip the next step
+        if (!doesOrderContainMaterial()) {
+          // Show a "Success" dialog, that closes after 2 seconds, then redirects to the next page
+          Swal.fire({
+            title: "Fuldført",
+            text: "Transaktionen er fuldført, omdirigerer automatisk...",
+            icon: "success",
+            showConfirmButton: false,
+            timer: 2000,
+          }).then(() => {
+            // Redirect to the next page
+            window.location.href = "/admin/" + department_id.value + "/modules/pos";
+          });
+        }
+        // Set the step to 4 in the query parameters
+        window.history.pushState({}, "", `?id=${order_id.value}&customer_id=${customer_id.value}&step=4`);
+      })
+      .catch((error) => {
+        parseError(error, "stepError");
+      });
     return;
   }
   step.value++;
 };
 
-
 export const previousStep = () => {
   step.value--;
 };
@@ -134,17 +145,17 @@ export const setStep = (newStep) => {
 };
 
 /** Define the current order dynamic variables */
-export const customer_id = ref('');
-export const customer_name = ref('');
+export const customer_id = ref("");
+export const customer_name = ref("");
 export const customer_data = ref([]); // The full customer data object
-export const department_id = ref('');
-export const reference = ref('');
+export const department_id = ref("");
+export const reference = ref("");
 export const notes = ref([]); // The customer notes
-export const order_notes = ref(''); // The order notes
-export const order_po = ref(''); // The PO number
-export const reg_1 = ref(''); // Only uppercase letters and numbers without spaces
-export const reg_2 = ref(''); // Only uppercase letters and numbers without spaces
-export const reg_3 = ref(''); // Only uppercase letters and numbers without spaces
+export const order_notes = ref(""); // The order notes
+export const order_po = ref(""); // The PO number
+export const reg_1 = ref(""); // Only uppercase letters and numbers without spaces
+export const reg_2 = ref(""); // Only uppercase letters and numbers without spaces
+export const reg_3 = ref(""); // Only uppercase letters and numbers without spaces
 export const order_id = ref(null);
 export const order_items = ref([]);
 export const customer_attributes = ref([]);
@@ -162,11 +173,9 @@ const toPositiveInteger = (value) => {
 };
 
 const resolveCustomerNumber = (customerOrNumber) => {
-  if (customerOrNumber && typeof customerOrNumber === 'object') {
+  if (customerOrNumber && typeof customerOrNumber === "object") {
     return toPositiveInteger(
-        customerOrNumber.customerNumber
-        ?? customerOrNumber.customer_number
-        ?? customerOrNumber.id
+      customerOrNumber.customerNumber ?? customerOrNumber.customer_number ?? customerOrNumber.id
     );
   }
   return toPositiveInteger(customerOrNumber);
@@ -178,28 +187,23 @@ const getSelectedCustomerNumber = () => {
 
 const normalizePhoneDisplayValue = (value) => {
   if (value === null || value === undefined) {
-    return '';
+    return "";
   }
 
-  if (typeof value === 'string' || typeof value === 'number') {
+  if (typeof value === "string" || typeof value === "number") {
     const normalizedValue = String(value).trim();
-    return normalizedValue === '' ? '' : normalizedValue;
+    return normalizedValue === "" ? "" : normalizedValue;
   }
 
-  if (Array.isArray(value) || typeof value !== 'object') {
-    return '';
+  if (Array.isArray(value) || typeof value !== "object") {
+    return "";
   }
 
   const numberCandidate =
-    value.number
-    ?? value.phoneNumber
-    ?? value.phone_number
-    ?? value.mobilePhone
-    ?? value.mobile_phone
-    ?? null;
+    value.number ?? value.phoneNumber ?? value.phone_number ?? value.mobilePhone ?? value.mobile_phone ?? null;
 
   if (numberCandidate === null || numberCandidate === undefined) {
-    return '';
+    return "";
   }
 
   return normalizePhoneDisplayValue(numberCandidate);
@@ -208,28 +212,26 @@ const normalizePhoneDisplayValue = (value) => {
 const resolveNormalizedPhoneNumber = (...candidates) => {
   for (const candidate of candidates) {
     const normalizedValue = normalizePhoneDisplayValue(candidate);
-    if (normalizedValue !== '') {
+    if (normalizedValue !== "") {
       return normalizedValue;
     }
   }
-  return '';
+  return "";
 };
 
 const normalizeCustomerRecord = (customer, fallback = {}) => {
-  if (!customer || typeof customer !== 'object' || Array.isArray(customer)) {
+  if (!customer || typeof customer !== "object" || Array.isArray(customer)) {
     const fallbackCustomerNumber = resolveCustomerNumber(
-      fallback.customerNumber
-      ?? fallback.customer_number
-      ?? customer
+      fallback.customerNumber ?? fallback.customer_number ?? customer
     );
 
     return {
       id: fallback.id ?? fallbackCustomerNumber ?? null,
       customerNumber: fallbackCustomerNumber,
-      name: fallback.name ?? fallback.customer_name ?? fallback.customerName ?? '',
-      address: fallback.address ?? '',
-      zip: fallback.zip ?? fallback.zip_code ?? fallback.postalCode ?? '',
-      city: fallback.city ?? '',
+      name: fallback.name ?? fallback.customer_name ?? fallback.customerName ?? "",
+      address: fallback.address ?? "",
+      zip: fallback.zip ?? fallback.zip_code ?? fallback.postalCode ?? "",
+      city: fallback.city ?? "",
       mobilePhone: resolveNormalizedPhoneNumber(
         fallback.mobilePhone,
         fallback.mobile_phone,
@@ -238,33 +240,32 @@ const normalizeCustomerRecord = (customer, fallback = {}) => {
         fallback.phoneNumber,
         fallback.phone_number
       ),
-      email: fallback.email ?? '',
-      corporateIdentificationNumber: fallback.corporateIdentificationNumber
-        ?? fallback.corporate_identification_number
-        ?? fallback.cvr
-        ?? '',
+      email: fallback.email ?? "",
+      corporateIdentificationNumber:
+        fallback.corporateIdentificationNumber ?? fallback.corporate_identification_number ?? fallback.cvr ?? "",
       economic_customer: fallback.economic_customer ?? fallbackCustomerNumber,
       barred: Boolean(fallback.barred),
     };
   }
 
   const resolvedCustomerNumber = resolveCustomerNumber(
-    customer.customerNumber
-    ?? customer.customer_number
-    ?? customer.economic_customer
-    ?? customer.economicCustomer
-    ?? fallback.customerNumber
-    ?? fallback.customer_number
+    customer.customerNumber ??
+      customer.customer_number ??
+      customer.economic_customer ??
+      customer.economicCustomer ??
+      fallback.customerNumber ??
+      fallback.customer_number
   );
 
   return {
     ...customer,
     id: customer.id ?? resolvedCustomerNumber ?? null,
     customerNumber: resolvedCustomerNumber,
-    name: customer.name ?? customer.customer_name ?? customer.customerName ?? fallback.name ?? fallback.customer_name ?? '',
-    address: customer.address ?? fallback.address ?? '',
-    zip: customer.zip ?? customer.zip_code ?? customer.postalCode ?? fallback.zip ?? fallback.zip_code ?? '',
-    city: customer.city ?? fallback.city ?? '',
+    name:
+      customer.name ?? customer.customer_name ?? customer.customerName ?? fallback.name ?? fallback.customer_name ?? "",
+    address: customer.address ?? fallback.address ?? "",
+    zip: customer.zip ?? customer.zip_code ?? customer.postalCode ?? fallback.zip ?? fallback.zip_code ?? "",
+    city: customer.city ?? fallback.city ?? "",
     mobilePhone: resolveNormalizedPhoneNumber(
       customer.mobilePhone,
       customer.mobile_phone,
@@ -279,14 +280,15 @@ const normalizeCustomerRecord = (customer, fallback = {}) => {
       fallback.phoneNumber,
       fallback.phone_number
     ),
-    email: customer.email ?? fallback.email ?? '',
-    corporateIdentificationNumber: customer.corporateIdentificationNumber
-      ?? customer.corporate_identification_number
-      ?? customer.cvr
-      ?? fallback.corporateIdentificationNumber
-      ?? fallback.corporate_identification_number
-      ?? fallback.cvr
-      ?? '',
+    email: customer.email ?? fallback.email ?? "",
+    corporateIdentificationNumber:
+      customer.corporateIdentificationNumber ??
+      customer.corporate_identification_number ??
+      customer.cvr ??
+      fallback.corporateIdentificationNumber ??
+      fallback.corporate_identification_number ??
+      fallback.cvr ??
+      "",
     economic_customer: customer.economic_customer ?? customer.economicCustomer ?? resolvedCustomerNumber,
     barred: Boolean(customer.barred ?? fallback.barred),
   };
@@ -298,8 +300,8 @@ const clearSelectedCustomerState = (options = {}) => {
     ...options,
   };
 
-  customer_id.value = '';
-  customer_name.value = '';
+  customer_id.value = "";
+  customer_name.value = "";
   customer_data.value = [];
   customer_attributes.value = [];
   notes.value = [];
@@ -309,29 +311,137 @@ const clearSelectedCustomerState = (options = {}) => {
   latestCustomerNotesRequestId += 1;
 
   if (normalizedOptions.clearOrderNotes) {
-    order_notes.value = '';
+    order_notes.value = "";
   }
 };
 
 export const getStoredPosOrderId = () => {
-  const storedOrderId = toPositiveInteger(localStorage.getItem('pos_order_id'));
+  const storedOrderId = toPositiveInteger(localStorage.getItem("pos_order_id"));
   if (!storedOrderId) {
-    localStorage.removeItem('pos_order_id');
+    localStorage.removeItem("pos_order_id");
     return null;
   }
   return storedOrderId;
 };
 
 export const clearStoredPosOrderId = () => {
-  localStorage.removeItem('pos_order_id');
+  localStorage.removeItem("pos_order_id");
 };
 
-export const restoreStoredPosOrderId = async (options = {
-  validateOrder: true,
-  customerId: null,
-  departmentId: null,
-  allowCompleted: false,
-}) => {
+const SELECTED_ORDER_BOOKING_ID_STORAGE_KEY = "pos_selected_order_booking_id";
+const SELECTED_ORDER_BOOKING_PLATE_STORAGE_KEY = "pos_selected_order_booking_plate";
+const SELECTED_ORDER_BOOKING_SKIPPED_PLATE_STORAGE_KEY = "pos_selected_order_booking_skipped_plate";
+
+export const selectedOrderBookingId = ref(null);
+export const selectedOrderBookingPlate = ref("");
+export const selectedOrderBookingSkippedPlate = ref("");
+
+const normalizeVehiclePlateForBookingSelection = (value) =>
+  String(value ?? "")
+    .replace(/\s/g, "")
+    .toUpperCase();
+
+const restoreSelectedOrderBookingState = () => {
+  if (typeof localStorage === "undefined") {
+    return;
+  }
+  selectedOrderBookingId.value = toPositiveInteger(localStorage.getItem(SELECTED_ORDER_BOOKING_ID_STORAGE_KEY));
+  selectedOrderBookingPlate.value = normalizeVehiclePlateForBookingSelection(
+    localStorage.getItem(SELECTED_ORDER_BOOKING_PLATE_STORAGE_KEY)
+  );
+  selectedOrderBookingSkippedPlate.value = normalizeVehiclePlateForBookingSelection(
+    localStorage.getItem(SELECTED_ORDER_BOOKING_SKIPPED_PLATE_STORAGE_KEY)
+  );
+
+  if (selectedOrderBookingId.value) {
+    localStorage.setItem(SELECTED_ORDER_BOOKING_ID_STORAGE_KEY, String(selectedOrderBookingId.value));
+  } else {
+    localStorage.removeItem(SELECTED_ORDER_BOOKING_ID_STORAGE_KEY);
+  }
+
+  if (selectedOrderBookingPlate.value) {
+    localStorage.setItem(SELECTED_ORDER_BOOKING_PLATE_STORAGE_KEY, selectedOrderBookingPlate.value);
+  } else {
+    localStorage.removeItem(SELECTED_ORDER_BOOKING_PLATE_STORAGE_KEY);
+  }
+
+  if (selectedOrderBookingSkippedPlate.value) {
+    localStorage.setItem(SELECTED_ORDER_BOOKING_SKIPPED_PLATE_STORAGE_KEY, selectedOrderBookingSkippedPlate.value);
+  } else {
+    localStorage.removeItem(SELECTED_ORDER_BOOKING_SKIPPED_PLATE_STORAGE_KEY);
+  }
+};
+
+const persistSelectedOrderBookingState = () => {
+  if (typeof localStorage === "undefined") {
+    return;
+  }
+  if (selectedOrderBookingId.value) {
+    localStorage.setItem(SELECTED_ORDER_BOOKING_ID_STORAGE_KEY, String(selectedOrderBookingId.value));
+  } else {
+    localStorage.removeItem(SELECTED_ORDER_BOOKING_ID_STORAGE_KEY);
+  }
+
+  if (selectedOrderBookingPlate.value) {
+    localStorage.setItem(SELECTED_ORDER_BOOKING_PLATE_STORAGE_KEY, selectedOrderBookingPlate.value);
+  } else {
+    localStorage.removeItem(SELECTED_ORDER_BOOKING_PLATE_STORAGE_KEY);
+  }
+
+  if (selectedOrderBookingSkippedPlate.value) {
+    localStorage.setItem(SELECTED_ORDER_BOOKING_SKIPPED_PLATE_STORAGE_KEY, selectedOrderBookingSkippedPlate.value);
+  } else {
+    localStorage.removeItem(SELECTED_ORDER_BOOKING_SKIPPED_PLATE_STORAGE_KEY);
+  }
+};
+
+export const clearSelectedOrderBookingSelection = (options = {}) => {
+  const normalizedOptions = {
+    clearSkippedPlate: true,
+    ...options,
+  };
+
+  selectedOrderBookingId.value = null;
+  selectedOrderBookingPlate.value = "";
+  if (normalizedOptions.clearSkippedPlate) {
+    selectedOrderBookingSkippedPlate.value = "";
+  }
+  persistSelectedOrderBookingState();
+};
+
+export const setSelectedOrderBookingSelection = (booking, plate = null) => {
+  const normalizedBookingId = toPositiveInteger(booking?.id ?? booking);
+  const normalizedPlate = normalizeVehiclePlateForBookingSelection(
+    plate ?? booking?.reg_1 ?? booking?.reg_2 ?? booking?.plate ?? ""
+  );
+
+  selectedOrderBookingId.value = normalizedBookingId;
+  selectedOrderBookingPlate.value = normalizedPlate;
+  selectedOrderBookingSkippedPlate.value = "";
+  persistSelectedOrderBookingState();
+};
+
+export const skipSelectedOrderBookingSelection = (plate) => {
+  clearSelectedOrderBookingSelection({ clearSkippedPlate: false });
+  selectedOrderBookingSkippedPlate.value = normalizeVehiclePlateForBookingSelection(plate);
+  persistSelectedOrderBookingState();
+};
+
+export const isSelectedOrderBookingSkippedForPlate = (plate) => {
+  const normalizedPlate = normalizeVehiclePlateForBookingSelection(plate);
+  return normalizedPlate !== "" && normalizedPlate === selectedOrderBookingSkippedPlate.value;
+};
+
+restoreSelectedOrderBookingState();
+
+export const restoreStoredPosOrderId = async (
+  options = {
+    validateOrder: true,
+    customerId: null,
+    departmentId: null,
+    allowCompleted: false,
+  }
+) => {
   const storedOrderId = getStoredPosOrderId();
   if (!storedOrderId) {
     return null;
@@ -346,21 +456,21 @@ export const restoreStoredPosOrderId = async (options = {
     const storedOrder = await SessionUser.objects.orders.get.single(storedOrderId);
     const resolvedOrderId = toPositiveInteger(storedOrder?.id);
     if (resolvedOrderId !== storedOrderId) {
-      throw new Error('Stored order was not found');
+      throw new Error("Stored order was not found");
     }
 
     const selectedCustomerId = toPositiveInteger(options.customerId);
     if (selectedCustomerId && toPositiveInteger(storedOrder?.customer_id) !== selectedCustomerId) {
-      throw new Error('Stored order customer does not match current customer');
+      throw new Error("Stored order customer does not match current customer");
     }
 
     const selectedDepartmentId = toPositiveInteger(options.departmentId);
     if (selectedDepartmentId && toPositiveInteger(storedOrder?.department_id) !== selectedDepartmentId) {
-      throw new Error('Stored order department does not match current department');
+      throw new Error("Stored order department does not match current department");
     }
 
     if (!options.allowCompleted && storedOrder?.completed_at) {
-      throw new Error('Stored order is already completed');
+      throw new Error("Stored order is already completed");
     }
 
     order_id.value = storedOrderId;
@@ -380,26 +490,32 @@ export const reset_all_values = () => {
   step.value = 1;
   order_id.value = null;
   clearCustomerSelection();
-  clearCache()
+  clearCache();
   user_discounts.value = [];
   has_user_discounts_loaded.value = false;
   scans.value = [];
   scan_data.value = [];
   invoiceCollectionId.value = null;
   completed_at.value = null;
-  reference.value = '';
-  order_notes.value = '';
-  order_po.value = '';
+  reference.value = "";
+  order_notes.value = "";
+  order_po.value = "";
   isCreatingOrder.value = false;
   createOrderRequest = null;
+  clearSelectedOrderBookingSelection();
   // Clear the order id from the local storage (if present)
   clearStoredPosOrderId();
   // Clear the query parameters
-  window.history.pushState({}, '', `?step=1`);
+  window.history.pushState({}, "", `?step=1`);
 };
 
 /** Whenever the reg_1, reg_2 or reg_3 changes, remove any spaces and make the string uppercase */
-const normalizeRegistrationValue = (value) => String(value ?? '').replace(/\s/g, '').toUpperCase();
+const normalizeRegistrationValue = (value) =>
+  String(value ?? "")
+    .replace(/\s/g, "")
+    .toUpperCase();
+
+export const isBlankPosMetadataValue = (value) => String(value ?? "").trim().length === 0;
 
 watch([reg_1, reg_2, reg_3], () => {
   reg_1.value = normalizeRegistrationValue(reg_1.value);
@@ -409,118 +525,130 @@ watch([reg_1, reg_2, reg_3], () => {
 
 /** Get the order details by order id */
 export const getOrderDetails = async (id = null) => {
-  const token = localStorage.getItem('token');
+  const token = localStorage.getItem("token");
   const targetOrderId = id ?? order_id.value;
   if (!token || !targetOrderId) {
     return null;
   }
-  return axios.get(API_URL + '/order?id=' + targetOrderId, {
-    headers: {
-      Authorization: `Bearer ${token}`
-    }
-  }).then((response) => {
-    const order_data = response.data.data;
-    // Set the order details
-    customer_id.value = order_data.customer_id;
-    department_id.value = order_data.department_id;
-    reference.value = order_data.reference || '';
-    order_notes.value = order_data.notes || '';
-    order_po.value = order_data.po || '';
-    reg_1.value = order_data.reg_1 || '';
-    reg_2.value = order_data.reg_2 || '';
-    reg_3.value = order_data.reg_3 || '';
-    invoiceCollectionId.value = order_data.invoice_collection_id || null;
-    completed_at.value = order_data.completed_at || null;
-    // Return the order data
-    return order_data;
-  }).catch((error) => {
-    parseError(error, 'stepError');
-    return null;
-  });
+  return axios
+    .get(API_URL + "/order?id=" + targetOrderId, {
+      headers: {
+        Authorization: `Bearer ${token}`,
+      },
+    })
+    .then((response) => {
+      const order_data = response.data.data;
+      // Set the order details
+      customer_id.value = order_data.customer_id;
+      department_id.value = order_data.department_id;
+      reference.value = order_data.reference || "";
+      order_notes.value = order_data.notes || "";
+      order_po.value = order_data.po || "";
+      reg_1.value = order_data.reg_1 || "";
+      reg_2.value = order_data.reg_2 || "";
+      reg_3.value = order_data.reg_3 || "";
+      invoiceCollectionId.value = order_data.invoice_collection_id || null;
+      completed_at.value = order_data.completed_at || null;
+      // Return the order data
+      return order_data;
+    })
+    .catch((error) => {
+      parseError(error, "stepError");
+      return null;
+    });
 };
 
 export const getOrderReg1 = async (orderId) => {
   const order = await getOrderDetails(orderId);
   if (!order) {
-    return '';
+    return "";
   }
   return order.reg_1;
 };
 
 /** Define the current order functions */
-export const createOrder = (options = {isMobile: false}) => {
+export const createOrder = (options = { isMobile: false }) => {
   if (order_id.value) {
     return Promise.resolve(true);
   }
   if (isCreatingOrder.value && createOrderRequest) {
     return createOrderRequest;
   }
-  const token = localStorage.getItem('token');
+  const token = localStorage.getItem("token");
   if (!token) {
     return Promise.resolve(false);
   }
   isCreatingOrder.value = true;
-  createOrderRequest = axios.post(API_URL + '/orders', {
-    customer_id: customer_id.value,
-    department_id: getDepartment(),
-    reference: reference.value,
-    notes: order_notes.value,
-    reg_1: reg_1.value,
-    reg_2: reg_2.value,
-    reg_3: reg_3.value,
-    is_handheld: options.isMobile,
-  }, {
-    headers: {
-      Authorization: `Bearer ${token}`
-    }
-  }).then((response) => {
-    // Check if the response is successful
-    if (!response.data.success) {
-      parseError(response, 'stepError');
+  createOrderRequest = axios
+    .post(
+      API_URL + "/orders",
+      {
+        customer_id: customer_id.value,
+        department_id: getDepartment(),
+        reference: reference.value,
+        notes: order_notes.value,
+        reg_1: reg_1.value,
+        reg_2: reg_2.value,
+        reg_3: reg_3.value,
+        is_handheld: options.isMobile,
+      },
+      {
+        headers: {
+          Authorization: `Bearer ${token}`,
+        },
+      }
+    )
+    .then((response) => {
+      // Check if the response is successful
+      if (!response.data.success) {
+        parseError(response, "stepError");
+        return false;
+      }
+      order_id.value = parseInt(response.data.data.id);
+      // Set the order id in the local storage (To be make F5 safe)
+      localStorage.setItem("pos_order_id", order_id.value);
+      // Set the query parameters
+      window.history.pushState({}, "", `?id=${order_id.value}&customer_id=${customer_id.value}&step=2`);
+      return true;
+    })
+    .catch((error) => {
+      parseError(error, "stepError");
       return false;
-    }
-    order_id.value = parseInt(response.data.data.id);
-    // Set the order id in the local storage (To be make F5 safe)
-    localStorage.setItem('pos_order_id', order_id.value);
-    // Set the query parameters
-    window.history.pushState({}, '', `?id=${order_id.value}&customer_id=${customer_id.value}&step=2`);
-    return true;
-  }).catch((error) => {
-    parseError(error, 'stepError');
-    return false;
-  }).finally(() => {
-    isCreatingOrder.value = false;
-    createOrderRequest = null;
-  });
+    })
+    .finally(() => {
+      isCreatingOrder.value = false;
+      createOrderRequest = null;
+    });
   return createOrderRequest;
 };
 
-
-
 export const deleteOrder = () => {
-  const token = localStorage.getItem('token');
+  const token = localStorage.getItem("token");
   if (!token) {
     return null;
   }
-  return axios.delete(API_URL + '/orders', {
-    params: {
-      id: order_id.value
-    },
-    headers: {
-      Authorization: `Bearer ${token}`
-    }
-  }).then((response) => {
-    // Check if the response is successful
-    if (!response.data.success) {
-      parseError(response, 'stepError');
+  return axios
+    .delete(API_URL + "/orders", {
+      params: {
+        id: order_id.value,
+      },
+      headers: {
+        Authorization: `Bearer ${token}`,
+      },
+    })
+    .then((response) => {
+      // Check if the response is successful
+      if (!response.data.success) {
+        parseError(response, "stepError");
+        return false;
+      }
+      order_id.value = null;
+      return true;
+    })
+    .catch((error) => {
+      parseError(error, "stepError");
       return false;
-    }
-    order_id.value = null;
-    return true;
-  }).catch((error) => {
-    parseError(error, 'stepError');
-    return false;
-  });
+    });
 };
 
 export const getOrderId = () => {
@@ -542,11 +670,13 @@ export const getScans = (forceClearCache = false) => {
     return scans.value;
   }
   // Get the scans from the API
-  getScansDepartmentPagination(department_id.value, scans_page.value, scans_limit.value).then((response) => {
-    scans.value = response.data.data;
-  }).catch((error) => {
-    console.error(error);
-  });
+  getScansDepartmentPagination(department_id.value, scans_page.value, scans_limit.value)
+    .then((response) => {
+      scans.value = response.data.data;
+    })
+    .catch((error) => {
+      console.error(error);
+    });
   return scans.value;
 };
 
@@ -581,7 +711,6 @@ export const getProductsCategory = () => {
   return products_category.value;
 };
 
-
 export const getUserGlobalDiscount = () => {
   // Check if the user discounts are loaded
   if (user_discounts.value === undefined) {
@@ -591,19 +720,15 @@ export const getUserGlobalDiscount = () => {
   // Find the specific discount for the category
   let discount = 0;
   try {
-    discount = parseInt(user_discounts.value.find(
-        (discount) =>
-            discount.id === '999999'
-    ).percentage) || null;
-  } catch (e) {
-  }
+    discount = parseInt(user_discounts.value.find((discount) => discount.id === "999999").percentage) || null;
+  } catch (e) {}
   // If there is no discount, return 0
   if (!discount) {
     return 0;
   }
   // Return the discount
   return discount;
-}
+};
 
 /** Check if the customer is barred */
 export const isCustomerBarred = (customer) => {
@@ -613,7 +738,7 @@ export const isCustomerBarred = (customer) => {
 /** get the customer email (if present) */
 export const getCustomerEmail = () => {
   // Check if the customer.email field exists, otherwise return empty string
-  return customer_data.value.email ? customer_data.value.email : '';
+  return customer_data.value.email ? customer_data.value.email : "";
 };
 /** Select a customer */
 export const selectCustomer = (customer, options = {}) => {
@@ -657,7 +782,7 @@ export const selectCustomer = (customer, options = {}) => {
   }
 
   customer_id.value = nextCustomerNumber;
-  customer_name.value = normalizedCustomer.name || '';
+  customer_name.value = normalizedCustomer.name || "";
   customer_data.value = normalizedCustomer;
   console.log(normalizedCustomer);
 
@@ -673,14 +798,11 @@ export const selectCustomer = (customer, options = {}) => {
 
 /** Is customer selected */
 export const isCustomerSelected = () => {
-  return customer_name.value !== '';
+  return customer_name.value !== "";
 };
 
 export const doesOrderContainMaterial = () => {
-  let ids = [
-      53,
-      54
-  ]
+  let ids = [53, 54];
   let result = false;
   // Loop through the ids, and check if the order contains any of the ids
   ids.forEach((id) => {
@@ -705,52 +827,58 @@ export const fetchCustomerNotes = (customerNumber = customer_id.value) => {
   latestCustomerNotesRequestId = requestId;
   activeCustomerNotesCustomerNumber = normalizedCustomerNumber;
 
-  return getNotes(normalizedCustomerNumber).then((response) => {
-    const isLatestRequest = requestId === latestCustomerNotesRequestId;
-    const isStillSelectedCustomer = getSelectedCustomerNumber() === normalizedCustomerNumber;
-    const isActiveCustomer = activeCustomerNotesCustomerNumber === normalizedCustomerNumber;
+  return getNotes(normalizedCustomerNumber)
+    .then((response) => {
+      const isLatestRequest = requestId === latestCustomerNotesRequestId;
+      const isStillSelectedCustomer = getSelectedCustomerNumber() === normalizedCustomerNumber;
+      const isActiveCustomer = activeCustomerNotesCustomerNumber === normalizedCustomerNumber;
 
-    if (!isLatestRequest || !isStillSelectedCustomer || !isActiveCustomer) {
+      if (!isLatestRequest || !isStillSelectedCustomer || !isActiveCustomer) {
+        return notes.value;
+      }
+
+      notes.value = Array.isArray(response?.data?.data) ? response.data.data : [];
       return notes.value;
-    }
-
-    notes.value = Array.isArray(response?.data?.data) ? response.data.data : [];
-    return notes.value;
-  }).catch((error) => {
-    console.error(error);
-    return notes.value;
-  });
+    })
+    .catch((error) => {
+      console.error(error);
+      return notes.value;
+    });
 };
 
 /** Create a customer note */
 export const addCustomerNote = (note) => {
   const selectedCustomerNumber = getSelectedCustomerNumber();
-  createNote(selectedCustomerNumber, note).then((response) => {
-    fetchCustomerNotes(selectedCustomerNumber);
-  }).catch((error) => {
-    console.error(error);
-  });
+  createNote(selectedCustomerNumber, note)
+    .then((response) => {
+      fetchCustomerNotes(selectedCustomerNumber);
+    })
+    .catch((error) => {
+      console.error(error);
+    });
 };
 
 /** Delete a customer note */
 export const removeCustomerNote = (id) => {
   const selectedCustomerNumber = getSelectedCustomerNumber();
-  deleteNote(id).then((response) => {
-    fetchCustomerNotes(selectedCustomerNumber);
-  }).catch((error) => {
-    console.error(error);
-  });
+  deleteNote(id)
+    .then((response) => {
+      fetchCustomerNotes(selectedCustomerNumber);
+    })
+    .catch((error) => {
+      console.error(error);
+    });
 };
 
 /** Show confirmation delete note dialog */
 export const showDeleteNoteDialog = (noteId) => {
   Swal.fire({
-    title: 'Are you sure?',
+    title: "Are you sure?",
     text: `You are about to delete the note: ${noteId}`,
-    icon: 'warning',
+    icon: "warning",
     showCancelButton: true,
-    confirmButtonText: 'Yes, delete it!',
-    cancelButtonText: 'No, keep it'
+    confirmButtonText: "Yes, delete it!",
+    cancelButtonText: "No, keep it",
   }).then((result) => {
     if (result.isConfirmed) {
       removeCustomerNote(noteId);
@@ -758,14 +886,13 @@ export const showDeleteNoteDialog = (noteId) => {
   });
 };
 
-
 /** Select a scan */
 export const selectScan = (scan) => {
   // Check which registration number is empty
   //if (!Object.keys(reg_1.value).length > 0 || !reg_1.value) {
-    // Set the registration number 1
-    //reg_1.value = scan.plate;
-    //return;
+  // Set the registration number 1
+  //reg_1.value = scan.plate;
+  //return;
   //}
   // Set the registration number 1
   reg_1.value = scan.plate;
@@ -776,49 +903,48 @@ const cached_customer_names = [];
 /** Get the customer's name */
 export const getCustomerName = async (customerNumber) => {
   if (!customerNumber) {
-    return '';
+    return "";
   }
   // Check if the customer name is already cached
   if (cached_customer_names[customerNumber]) {
     return cached_customer_names[customerNumber];
   }
   // Get the customer data
-  await authenticatedRequest(
-      `/users/customer?customer_number=${customerNumber}`,
-      'GET').then((response) => {
-    console.log(response);
-    // Cache the customer name
-    cached_customer_names[customerNumber] = response.data.data.customer_name;
-    return cached_customer_names[customerNumber];
-  }).catch((error) => {
-    // If the customer is not found, return an empty string
-    cached_customer_names[customerNumber] = '';
-    console.error(error);
-  });
-  return '';
+  await authenticatedRequest(`/users/customer?customer_number=${customerNumber}`, "GET")
+    .then((response) => {
+      console.log(response);
+      // Cache the customer name
+      cached_customer_names[customerNumber] = response.data.data.customer_name;
+      return cached_customer_names[customerNumber];
+    })
+    .catch((error) => {
+      // If the customer is not found, return an empty string
+      cached_customer_names[customerNumber] = "";
+      console.error(error);
+    });
+  return "";
 };
 
 /** Search, then select customer by customer number */
 export const searchAndSelectCustomer = async (customerNumber, options = {}) => {
   // Get the customer data
-  await authenticatedRequest(
-      `/users/customer?customer_number=${customerNumber}`,
-      'GET').then((response) => {
-    console.log(response);
-    const responseData = response?.data?.data ?? {};
-    const rawEconomicCustomer = responseData.economic_customer ?? null;
-    const normalizedCustomer = normalizeCustomerRecord(rawEconomicCustomer, {
-      ...responseData,
-      customerNumber: resolveCustomerNumber(rawEconomicCustomer) ?? resolveCustomerNumber(customerNumber),
+  await authenticatedRequest(`/users/customer?customer_number=${customerNumber}`, "GET")
+    .then((response) => {
+      console.log(response);
+      const responseData = response?.data?.data ?? {};
+      const rawEconomicCustomer = responseData.economic_customer ?? null;
+      const normalizedCustomer = normalizeCustomerRecord(rawEconomicCustomer, {
+        ...responseData,
+        customerNumber: resolveCustomerNumber(rawEconomicCustomer) ?? resolveCustomerNumber(customerNumber),
+      });
+      selectCustomer(normalizedCustomer, options);
+      return normalizedCustomer;
+    })
+    .catch((error) => {
+      console.error(error);
     });
-    selectCustomer(normalizedCustomer, options);
-    return normalizedCustomer;
-  }).catch((error) => {
-    console.error(error);
-  });
 };
 
-
 /** Get order items */
 export const loadOrderItems = async () => {
   const normalizedOrderId = Number(order_id.value);
@@ -865,27 +991,35 @@ export const hasAttribute = (attrib) => {
   if (!customer_attributes.value) {
     return false;
   }
-  return customer_attributes.value.some(attribute => attribute.attribute === attrib);
+  return customer_attributes.value.some((attribute) => attribute.attribute === attrib);
+};
+
+export const customerRequiresReferenceNumber = () => {
+  return hasAttribute("requiresReferenceNumber");
+};
+
+export const customerUsesPONumbers = () => {
+  return hasAttribute("usePONumbers");
 };
 
 /** Check if the product category is allowed */
 export const productCategoryAllowed = (category) => {
   // Check if the product category is the addons category
-  if (category === 'addons') {
-   // Check if the customer has the attribute restrictAdditionalServices
-    return !hasAttribute('restrictAdditionalServices');
+  if (category === "addons") {
+    // Check if the customer has the attribute restrictAdditionalServices
+    return !hasAttribute("restrictAdditionalServices");
   }
-  if (category === 'spot_free') {
+  if (category === "spot_free") {
     // Check if the customer has the attribute restrictSpotFree
-    return !hasAttribute('restrictSpotFree');
+    return !hasAttribute("restrictSpotFree");
   }
-  if (category === 'interior_cleaning') {
+  if (category === "interior_cleaning") {
     // Check if the customer has the attribute restrictInteriorCleaning
-    return !hasAttribute('restrictInteriorCleaning');
+    return !hasAttribute("restrictInteriorCleaning");
   }
-  if (category === 'tank_cleaning') {
+  if (category === "tank_cleaning") {
     // Check if the customer has the attribute restrictTankCleaning
-    return !hasAttribute('restrictTankCleaning');
+    return !hasAttribute("restrictTankCleaning");
   }
   return true;
 };
@@ -893,55 +1027,55 @@ export const productCategoryAllowed = (category) => {
 /** Check if the customer should be billed per order, or per billing period */
 export const invoiceAllOrdersIndividually = () => {
   // Check if the customer has the attribute invoiceAllOrdersIndividually
-  return hasAttribute('invoiceAllOrdersIndividually');
+  return hasAttribute("invoiceAllOrdersIndividually");
 };
 
 /** Check if the customer should be billed using Stripe */
 export const invoiceUsingStripe = () => {
   // Check if the customer has the attribute invoiceWithStripe
-  return hasAttribute('invoiceWithStripe');
+  return hasAttribute("invoiceWithStripe");
 };
 
 /** Check if the customer is allowed to buy spot free products */
 export const canBuySpotFree = () => {
   // Check if the customer has the attribute restrictSpotFree
-  return !hasAttribute('restrictSpotFree');
+  return !hasAttribute("restrictSpotFree");
 };
 
 /** Check if the customer is allowed to buy interior cleaning products */
 export const canBuyInteriorCleaning = () => {
   // Check if the customer has the attribute restrictInteriorCleaning
-  return !hasAttribute('restrictInteriorCleaning');
+  return !hasAttribute("restrictInteriorCleaning");
 };
 
 /** Check if the customer is allowed to buy tank cleaning products */
 export const canBuyTankCleaning = () => {
   // Check if the customer has the attribute restrictTankCleaning
-  return !hasAttribute('restrictTankCleaning');
+  return !hasAttribute("restrictTankCleaning");
 };
 
 /** Check if the customer is allowed to buy additional services */
 export const canBuyAdditionalServices = () => {
   // Check if the customer has the attribute restrictAdditionalServices
-  return !hasAttribute('restrictAdditionalServices');
+  return !hasAttribute("restrictAdditionalServices");
 };
 
 /** Check if the customer has the onlyTankCleaning attribute */
 export const hasOnlyTankCleaning = () => {
-  return hasAttribute('onlyTankCleaning');
+  return hasAttribute("onlyTankCleaning");
 };
 
 /** Check if a product is restricted based on customer attributes */
 export const isProductRestricted = (product) => {
   if (!product) return false;
-  const productName = (product.name || '').toLowerCase();
+  const productName = (product.name || "").toLowerCase();
 
   // Check if the product has "Spot Free" in the name
-  if (!canBuySpotFree() && productName.includes('spot free')) {
+  if (!canBuySpotFree() && productName.includes("spot free")) {
     return true;
   }
   // Check if the product has "Indvendig vask" in the name
-  if (!canBuyInteriorCleaning() && productName.includes('indvendig vask')) {
+  if (!canBuyInteriorCleaning() && productName.includes("indvendig vask")) {
     return true;
   }
   // Check if the product category is 5 (Tank Cleaning)
@@ -959,14 +1093,14 @@ export const isProductRestricted = (product) => {
 /** Check if an addon is restricted based on customer attributes */
 export const isAddonRestricted = (addon) => {
   if (!addon) return false;
-  const addonName = (addon.name || '').toLowerCase();
+  const addonName = (addon.name || "").toLowerCase();
 
   // Check if the addon has "Spot Free" in the name
-  if (!canBuySpotFree() && addonName.includes('spot free')) {
+  if (!canBuySpotFree() && addonName.includes("spot free")) {
     return true;
   }
   // Check if the addon has "Indvendig vask" in the name
-  if (!canBuyInteriorCleaning() && addonName.includes('indvendig vask')) {
+  if (!canBuyInteriorCleaning() && addonName.includes("indvendig vask")) {
     return true;
   }
   return false;
@@ -994,10 +1128,9 @@ export const setOrderId = (id) => {
 export const deleteEverything = async () => {
   // If the order is created, delete it
   if (order_id.value) {
-    await deleteOrder()
-        .catch((error) => {
-          parseError(error, 'stepError');
-        });
+    await deleteOrder().catch((error) => {
+      parseError(error, "stepError");
+    });
   }
   // Clear the cache
   clearCache();
@@ -1007,19 +1140,19 @@ export const deleteEverything = async () => {
 /** Delete everything button dialog */
 export const showDeleteEverythingDialog = () => {
   Swal.fire({
-    title: 'Er du sikker?',
-    text: 'Du er ved at slette alt i denne ordre. Dette kan ikke fortrydes.',
-    icon: 'warning',
+    title: "Er du sikker?",
+    text: "Du er ved at slette alt i denne ordre. Dette kan ikke fortrydes.",
+    icon: "warning",
     showCancelButton: true,
-    confirmButtonText: 'Ja, slet alt',
-    cancelButtonText: 'Nej, fortryd',
+    confirmButtonText: "Ja, slet alt",
+    cancelButtonText: "Nej, fortryd",
     allowEscapeKey: false,
     allowOutsideClick: false,
     showLoaderOnConfirm: true,
   }).then((result) => {
     if (result.isConfirmed) {
       deleteEverything().then(() => {
-        Swal.fire('Slettet', 'Ordren er slettet', 'success');
+        Swal.fire("Slettet", "Ordren er slettet", "success");
       });
     }
   });
@@ -1028,17 +1161,18 @@ export const showDeleteEverythingDialog = () => {
 /** Clear cache */
 export const clearCache = () => {
   // Reset the query parameters
-  window.history.pushState({}, '', `?step=1`);
+  window.history.pushState({}, "", `?step=1`);
   // Clear the customer data
   clearCustomerSelection();
   // Clear the order data
   order_id.value = null;
   order_items.value = [];
   // Clear the registration numbers
-  reg_1.value = '';
-  reg_2.value = '';
-  reg_3.value = '';
-  order_po.value = '';
+  reg_1.value = "";
+  reg_2.value = "";
+  reg_3.value = "";
+  order_po.value = "";
+  clearSelectedOrderBookingSelection();
   // Clear the scans
   scans.value = [];
 };
@@ -1051,21 +1185,21 @@ export const clearCustomerSelection = () => {
 export const showDeleteOrderDialog = () => {
   // Require the user to confirm the deletion by writing the order number in the dialog
   Swal.fire({
-    title: 'Are you sure?',
-    text: 'You are about to delete the order. Please write the order number in the field below to confirm.',
-    input: 'number',
+    title: "Are you sure?",
+    text: "You are about to delete the order. Please write the order number in the field below to confirm.",
+    input: "number",
     inputAttributes: {
-      autocapitalize: 'off'
+      autocapitalize: "off",
     },
     showCancelButton: true,
-    confirmButtonText: 'Delete',
+    confirmButtonText: "Delete",
     showLoaderOnConfirm: true,
     preConfirm: (orderNumber) => {
       if (orderNumber !== order_id.value) {
-        Swal.showValidationMessage('The order number does not match');
+        Swal.showValidationMessage("The order number does not match");
       }
     },
-    allowOutsideClick: () => !Swal.isLoading()
+    allowOutsideClick: () => !Swal.isLoading(),
   }).then((result) => {
     if (result.isConfirmed) {
       deleteOrder().then((response) => {
@@ -1080,24 +1214,27 @@ export const showDeleteOrderDialog = () => {
 
 /** Get users discounts */
 export const getUserDiscounts = async () => {
-  const token = localStorage.getItem('token');
+  const token = localStorage.getItem("token");
   if (!token) {
     return null;
   }
-  return axios.get(API_URL + '/superuser/user/discounts', {
-    headers: {
-      Authorization: `Bearer ${token}`
-    },
-    params: {
-      customer_number: customer_id.value
-    }
-  }).then((response) => {
-    user_discounts.value = response.data.data;
-    //console.log(user_discounts.value);
-    return user_discounts.value;
-  }).catch((error) => {
-    console.error(error);
-  });
+  return axios
+    .get(API_URL + "/superuser/user/discounts", {
+      headers: {
+        Authorization: `Bearer ${token}`,
+      },
+      params: {
+        customer_number: customer_id.value,
+      },
+    })
+    .then((response) => {
+      user_discounts.value = response.data.data;
+      //console.log(user_discounts.value);
+      return user_discounts.value;
+    })
+    .catch((error) => {
+      console.error(error);
+    });
 };
 
 /** Get user product discount */
@@ -1142,7 +1279,6 @@ export const getUserProductDiscount = (product, allowCategory = null, onlyCatego
     allowProductDiscount = allowCategory;
   }
 
-
   // Check if we should only allow the category discount
   if (onlyCategory) {
     allowProductDiscount = false;
@@ -1151,26 +1287,27 @@ export const getUserProductDiscount = (product, allowCategory = null, onlyCatego
 
   // Get the global discount
   try {
-    globalDiscount = parseInt(user_discounts.value.find(
-        (discount) =>
-            discount.id == '999999'
-    ).percentage) || null;
+    globalDiscount = parseInt(user_discounts.value.find((discount) => discount.id == "999999").percentage) || null;
   } catch (e) {}
   //console.log('Global discount', globalDiscount);
 
   try {
-    productDiscount = parseInt(user_discounts.value.find(
-        (discount) =>
-            discount.product_or_category_id == productId && discount.is_category == '0'
-    ).percentage) || null;
+    productDiscount =
+      parseInt(
+        user_discounts.value.find(
+          (discount) => discount.product_or_category_id == productId && discount.is_category == "0"
+        ).percentage
+      ) || null;
   } catch (e) {}
   //console.log('Product discount', productDiscount);
 
   try {
-    categoryDiscount = parseInt(user_discounts.value.find(
-        (discount) =>
-            discount.product_or_category_id == category && discount.is_category == '1'
-    ).percentage) || null;
+    categoryDiscount =
+      parseInt(
+        user_discounts.value.find(
+          (discount) => discount.product_or_category_id == category && discount.is_category == "1"
+        ).percentage
+      ) || null;
   } catch (e) {}
   //console.log('Category discount', categoryDiscount);
 
@@ -1210,10 +1347,10 @@ export const showFakeCreateOrderItem = (product, quantity, price) => {
     product: product,
     quantity: quantity,
     price: price,
-    notes: '',
-    reference: ''
+    notes: "",
+    reference: "",
   });
-  console.log('Fake create order item', product, quantity);
+  console.log("Fake create order item", product, quantity);
 };
 
 /** Vehicle search functionality */
@@ -1222,7 +1359,6 @@ export const isSearching = ref(false);
 export const latest_search_id = ref(0);
 export const pendingBookings = ref([]);
 
-
 export const is_latest_search = (search_id) => {
   // Check if the search ID is the latest
   return search_id === latest_search_id.value;
@@ -1230,33 +1366,267 @@ export const is_latest_search = (search_id) => {
 
 // Get the department booking list
 export const loadPendingBookings = () => {
-  SessionUser.request(
-      SessionUser.objects.order_bookings.meta.endpoint,
-      'GET',
-      {
-        filters: 'department:' + department_id.value + ',order_id:null',
-        page: 1,
-        limit: 100,
-      }
-  ).then(response => {
-    pendingBookings.value = response.data.data;
-  }).catch(error => {
-    console.error("Error:", error);
+  SessionUser.request(SessionUser.objects.order_bookings.meta.endpoint, "GET", {
+    filters: "department:" + department_id.value + ",order_id:null",
+    page: 1,
+    limit: 100,
+  })
+    .then((response) => {
+      pendingBookings.value = Array.isArray(response?.data?.data) ? response.data.data : [];
+    })
+    .catch((error) => {
+      console.error("Error:", error);
+    });
+};
+
+const getOrderBookingSortTimestamp = (booking) => {
+  const dateValue = booking?.datetime ?? booking?.created_at ?? booking?.date ?? null;
+  const parsedValue = dateValue ? Date.parse(dateValue) : Number.NaN;
+  if (!Number.isNaN(parsedValue)) {
+    return parsedValue;
+  }
+  const fallbackId = Number.parseInt(String(booking?.id ?? 0), 10);
+  return Number.isFinite(fallbackId) ? fallbackId : Number.MAX_SAFE_INTEGER;
+};
+
+const sortPendingOrderBookings = (bookings = []) => {
+  return [...bookings].sort((left, right) => {
+    const timeDifference = getOrderBookingSortTimestamp(left) - getOrderBookingSortTimestamp(right);
+    if (timeDifference !== 0) {
+      return timeDifference;
+    }
+    return Number.parseInt(String(left?.id ?? 0), 10) - Number.parseInt(String(right?.id ?? 0), 10);
   });
 };
 
+const getOrderBookingReferenceValue = (booking) => {
+  return String(booking?.reference ?? booking?.reference_number ?? "").trim();
+};
+
+const getOrderBookingNotesValue = (booking) => {
+  return String(booking?.notes ?? booking?.note ?? "").trim();
+};
+
+const getOrderBookingCustomerNumber = (booking) => {
+  return resolveCustomerNumber(booking?.customer_number ?? booking?.customer_id ?? booking?.customerNumber);
+};
+
+export const getVehiclePlateBookings = (vehiclePlate) => {
+  const normalizedVehiclePlate = normalizeVehiclePlateForBookingSelection(vehiclePlate);
+  if (!normalizedVehiclePlate) {
+    return [];
+  }
+
+  const seenBookingIds = new Set();
+  const matchingBookings = pendingBookings.value.filter((booking) => {
+    const isMatch =
+      normalizeVehiclePlateForBookingSelection(booking?.reg_1) === normalizedVehiclePlate ||
+      normalizeVehiclePlateForBookingSelection(booking?.reg_2) === normalizedVehiclePlate;
+
+    if (!isMatch) {
+      return false;
+    }
+
+    const normalizedBookingId = toPositiveInteger(booking?.id);
+    if (!normalizedBookingId) {
+      return true;
+    }
+
+    if (seenBookingIds.has(normalizedBookingId)) {
+      return false;
+    }
+
+    seenBookingIds.add(normalizedBookingId);
+    return true;
+  });
+
+  return sortPendingOrderBookings(matchingBookings);
+};
+
 export const doesVehiclePlateHaveBooking = (vehiclePlate) => {
-  // Check if the vehicle has a booking in the pending bookings list
-  return pendingBookings.value.some(booking => booking.reg_1 === vehiclePlate || booking.reg_2 === vehiclePlate);
+  return getVehiclePlateBookings(vehiclePlate).length > 0;
+};
+
+export const getPreferredVehiclePlateBooking = (vehiclePlate) => {
+  return getVehiclePlateBookings(vehiclePlate)[0] || null;
 };
 
 export const getVehiclePlateBooking = (vehiclePlate) => {
-  if (!vehiclePlate || !doesVehiclePlateHaveBooking(vehiclePlate)) {
-    // If the vehicle plate is empty or doesn't have a booking, return null
+  return getPreferredVehiclePlateBooking(vehiclePlate);
+};
+
+const getSelectedPendingOrderBooking = () => {
+  const normalizedBookingId = toPositiveInteger(selectedOrderBookingId.value);
+  if (!normalizedBookingId) {
     return null;
   }
-  // Find the booking for the given vehicle plate
-  return pendingBookings.value.find(booking => booking.reg_1 === vehiclePlate || booking.reg_2 === vehiclePlate);
+
+  return (
+    pendingBookings.value.find((booking) => toPositiveInteger(booking?.id) === normalizedBookingId) || null
+  );
+};
+
+const fetchOrderBookingProductWithPricing = async (productId) => {
+  const normalizedProductId = toPositiveInteger(productId);
+  if (!normalizedProductId) {
+    return null;
+  }
+
+  return await SessionUser.objects.products.get.single(normalizedProductId, {
+    department_id: department_id.value,
+    customer_id: getSelectedCustomerNumber(),
+    category_id: null,
+    final_price: true,
+  });
+};
+
+const getFirstAvailableWashProduct = async () => {
+  try {
+    const products = await SessionUser.objects.products.get.all({
+      department_id: department_id.value,
+      is_wash: true,
+      limit: 1,
+    });
+    if (!Array.isArray(products) || products.length === 0) {
+      return null;
+    }
+    return await fetchOrderBookingProductWithPricing(products[0].id);
+  } catch (error) {
+    console.error("Unable to fetch fallback wash product:", error);
+    return null;
+  }
+};
+
+const hydrateSelectedOrderBookingForDesktop = async () => {
+  const normalizedOrderId = toPositiveInteger(order_id.value);
+  const normalizedBookingId = toPositiveInteger(selectedOrderBookingId.value);
+
+  if (!normalizedOrderId || !normalizedBookingId) {
+    return true;
+  }
+
+  try {
+    const currentOrderItems = await loadOrderItems();
+    if (Array.isArray(currentOrderItems) && currentOrderItems.length > 0) {
+      return true;
+    }
+
+    let booking = getSelectedPendingOrderBooking();
+    if (!booking || !Array.isArray(booking?.items)) {
+      booking = await SessionUser.objects.order_bookings.get.single(normalizedBookingId, {
+        department_id: department_id.value,
+      });
+    }
+
+    if (!booking) {
+      return false;
+    }
+
+    const bookingCustomerNumber = getOrderBookingCustomerNumber(booking);
+    if (bookingCustomerNumber && bookingCustomerNumber !== getSelectedCustomerNumber()) {
+      await searchAndSelectCustomer(bookingCustomerNumber);
+    }
+
+    const bookingReference = getOrderBookingReferenceValue(booking);
+    if (bookingReference !== "" && bookingReference !== reference.value) {
+      await SessionUser.objects.orders.set.reference(normalizedOrderId, bookingReference);
+      reference.value = bookingReference;
+    }
+
+    const bookingNotes = getOrderBookingNotesValue(booking);
+    if (bookingNotes !== "" && bookingNotes !== order_notes.value) {
+      await SessionUser.objects.orders.set.notes(normalizedOrderId, bookingNotes);
+      order_notes.value = bookingNotes;
+    }
+
+    const bookingPo = String(booking?.po ?? "").trim();
+    if (bookingPo !== "" && bookingPo !== order_po.value) {
+      await SessionUser.objects.orders.set.po(normalizedOrderId, bookingPo);
+      order_po.value = bookingPo;
+    }
+
+    const bookingItems = Array.isArray(booking?.items) ? booking.items : [];
+    if (bookingItems.length === 0) {
+      return true;
+    }
+
+    const primaryRawItem = bookingItems[0];
+    const primaryRawProductId = toPositiveInteger(primaryRawItem?.id);
+    if (!primaryRawProductId) {
+      return true;
+    }
+
+    let primaryProduct = await fetchOrderBookingProductWithPricing(primaryRawProductId);
+    if (!primaryProduct) {
+      return true;
+    }
+
+    if (!primaryProduct.is_wash) {
+      const fallbackWashProduct = await getFirstAvailableWashProduct();
+      if (fallbackWashProduct) {
+        primaryProduct = fallbackWashProduct;
+      }
+    }
+
+    const forcedPrimaryPrice =
+      typeof primaryRawItem?.price === "number" ? Number(primaryRawItem.price) : primaryProduct.price ?? null;
+    const primaryItemResponse = await createOrderItem(
+      normalizedOrderId,
+      primaryProduct.id,
+      1,
+      null,
+      null,
+      forcedPrimaryPrice
+    );
+    const relatedPrimaryItemId = toPositiveInteger(primaryItemResponse?.data?.data?.id);
+
+    const secondaryBookingItems = bookingItems.slice(1);
+    for (const bookingItem of secondaryBookingItems) {
+      const secondaryProductId = toPositiveInteger(bookingItem?.id);
+      if (!secondaryProductId) {
+        continue;
+      }
+
+      await createOrderItem(
+        normalizedOrderId,
+        secondaryProductId,
+        Math.max(1, Number.parseInt(String(bookingItem?.quantity ?? 1), 10) || 1),
+        relatedPrimaryItemId,
+        String(bookingItem?.notes ?? "").trim() || null,
+        typeof bookingItem?.price === "number" ? Number(bookingItem.price) : null
+      );
+    }
+
+    await loadOrderItems();
+    return true;
+  } catch (error) {
+    console.error("Unable to hydrate selected desktop order booking:", error);
+    parseError(error, "stepError");
+    return false;
+  }
+};
+
+const finalizeSelectedOrderBookingForDesktop = async () => {
+  const normalizedOrderId = toPositiveInteger(order_id.value);
+  const normalizedBookingId = toPositiveInteger(selectedOrderBookingId.value);
+
+  if (!normalizedOrderId || !normalizedBookingId) {
+    return true;
+  }
+
+  try {
+    await SessionUser.objects.orders.set.booking_id(normalizedOrderId, normalizedBookingId);
+    await SessionUser.objects.order_bookings.set.order_id(normalizedBookingId, normalizedOrderId);
+    await SessionUser.objects.order_bookings.functions.complete(normalizedBookingId, null);
+    pendingBookings.value = pendingBookings.value.filter(
+      (booking) => toPositiveInteger(booking?.id) !== normalizedBookingId
+    );
+    return true;
+  } catch (error) {
+    console.error("Unable to complete selected desktop order booking:", error);
+    parseError(error, "stepError");
+    return false;
+  }
 };
 
 const get_unregistered_vehicle_object = (reg) => {
@@ -1275,11 +1645,11 @@ const get_unregistered_vehicle_object = (reg) => {
     addons: {
       enabled: 0,
       available: 0,
-      list: []
+      list: [],
     },
     is_known: true,
   };
-}
+};
 
 const getUnregisteredVehicleObjects = async (inputValue, search_id) => {
   // Check if the search ID is the latest
@@ -1287,48 +1657,47 @@ const getUnregisteredVehicleObjects = async (inputValue, search_id) => {
     console.log("Search ID is not the latest. Ignoring this search.");
     return [];
   }
-  return await SessionUser.request(
-      '/department/vehicles/unknown-customer',
-      'GET',
-      {
-        search: inputValue,
-        page: 1,
-        limit: 10,
-      }
-  ).then(response => {
-    console.log("Unregistered vehicles:", response.data.data);
-    if (!is_latest_search(search_id)) {
-      return [];
-    }
-    let result = response?.data?.data;
-    let unregistered_vehicles = [];
-    if (result && result.length > 0) {
-      // If there are results, parse them into unregistered_vehicles
-      for (let i = 0; i < result.length; i++) {
-        // Check if the unregistered vehicle already exists in the vehicles_matching array
-        let existingVehicle = vehicles_matching.value.find(vehicle => vehicle.reg === result[i].reg_1);
-        if (existingVehicle) {
-          // If it exists, skip adding it again
-          continue;
-        }
-        unregistered_vehicles.push(get_unregistered_vehicle_object(result[i].reg_1));
-      }
-      console.warn(unregistered_vehicles, search_id, 'Parsed unregistered vehicles for search ID');
-      return unregistered_vehicles;
-    } else {
-      return [];
-      // Do nothing
-    }
-  }).catch(error => {
-    console.error("Error:", error, search_id);
-    return [];
-  }).finally(() => {
-    console.log("Finish search", search_id);
-    if (is_latest_search(search_id)) {
-      // Set the isSearching flag to false
-      isSearching.value = false;
-    }
+  return await SessionUser.request("/department/vehicles/unknown-customer", "GET", {
+    search: inputValue,
+    page: 1,
+    limit: 10,
   })
+    .then((response) => {
+      console.log("Unregistered vehicles:", response.data.data);
+      if (!is_latest_search(search_id)) {
+        return [];
+      }
+      let result = response?.data?.data;
+      let unregistered_vehicles = [];
+      if (result && result.length > 0) {
+        // If there are results, parse them into unregistered_vehicles
+        for (let i = 0; i < result.length; i++) {
+          // Check if the unregistered vehicle already exists in the vehicles_matching array
+          let existingVehicle = vehicles_matching.value.find((vehicle) => vehicle.reg === result[i].reg_1);
+          if (existingVehicle) {
+            // If it exists, skip adding it again
+            continue;
+          }
+          unregistered_vehicles.push(get_unregistered_vehicle_object(result[i].reg_1));
+        }
+        console.warn(unregistered_vehicles, search_id, "Parsed unregistered vehicles for search ID");
+        return unregistered_vehicles;
+      } else {
+        return [];
+        // Do nothing
+      }
+    })
+    .catch((error) => {
+      console.error("Error:", error, search_id);
+      return [];
+    })
+    .finally(() => {
+      console.log("Finish search", search_id);
+      if (is_latest_search(search_id)) {
+        // Set the isSearching flag to false
+        isSearching.value = false;
+      }
+    });
 };
 
 // Function to register a new search and return the search ID
@@ -1340,13 +1709,12 @@ export const register_new_search = () => {
   return search_id;
 };
 
-
-export const reg_1_status = ref('unknown');
-export const reg_2_status = ref('unknown');
-export const reg_3_status = ref('unknown');
+export const reg_1_status = ref("unknown");
+export const reg_2_status = ref("unknown");
+export const reg_3_status = ref("unknown");
 
 // Function to search for vehicles
-export const searchVehicle = async ( inputValue, search_id ) => {
+export const searchVehicle = async (inputValue, search_id) => {
   // Check if the search ID is the latest
   if (!is_latest_search(search_id)) {
     console.log("Search ID is not the latest. Ignoring this search.");
@@ -1355,16 +1723,12 @@ export const searchVehicle = async ( inputValue, search_id ) => {
   // Set the isSearching flag to true
   isSearching.value = true;
   // Perform the search
-  SessionUser.request(
-      SessionUser.objects.vehicles.meta.endpoint + '/search',
-      'GET',
-      {
-        search: inputValue,
-        ...(department_id.value ? {department: department_id.value} : {}),
-        page: 1,
-        limit: 10,
-      }
-  ).then(response => {
+  SessionUser.request(SessionUser.objects.vehicles.meta.endpoint + "/search", "GET", {
+    search: inputValue,
+    ...(department_id.value ? { department: department_id.value } : {}),
+    page: 1,
+    limit: 10,
+  }).then((response) => {
     // Check if the registration number is already in the vehicles_matching array
     if (!is_latest_search(search_id)) {
       return;
@@ -1386,87 +1750,99 @@ export const fetchAttachments = async (orderId) => {
   if (!orderId) {
     return [];
   }
-  return await SessionUser.objects.orders.functions.fetchAttachments(order_id.value).then((response) => {
-    attachments.value = response;
-    return attachments.value;
-  }).catch((error) => {
-    console.error('Error fetching attachments:', error);
-    return [];
-  });
+  return await SessionUser.objects.orders.functions
+    .fetchAttachments(order_id.value)
+    .then((response) => {
+      attachments.value = response;
+      return attachments.value;
+    })
+    .catch((error) => {
+      console.error("Error fetching attachments:", error);
+      return [];
+    });
 };
 
 export const deleteAttachment = async (attachmentId) => {
   if (!attachmentId) {
     return false;
   }
-  return await SessionUser.objects.orders.functions.removeAttachment(order_id.value, attachmentId).then((response) => {
-    // Remove the attachment from the attachments array
-    attachments.value = attachments.value.filter(attachment => attachment.id !== attachmentId);
-    return true;
-  }).catch((error) => {
-    console.error('Error deleting attachment:', error);
-    return false;
-  });
+  return await SessionUser.objects.orders.functions
+    .removeAttachment(order_id.value, attachmentId)
+    .then((response) => {
+      // Remove the attachment from the attachments array
+      attachments.value = attachments.value.filter((attachment) => attachment.id !== attachmentId);
+      return true;
+    })
+    .catch((error) => {
+      console.error("Error deleting attachment:", error);
+      return false;
+    });
 };
 
-export const uploadAttachment = async (file = {filename: '', base64String: ''}) => {
+export const uploadAttachment = async (file = { filename: "", base64String: "" }) => {
   if (!file || !file.filename || !file.base64String) {
     return false;
   }
-  return await SessionUser.objects.orders.functions.uploadAttachment(order_id.value, file.filename, file.base64String).then((response) => {
-    // Add the attachment to the attachments
-    attachments.value.push(response);
-    return true;
-  }).catch((error) => {
-    console.error('Error uploading attachment:', error);
-    return false;
-  });
+  return await SessionUser.objects.orders.functions
+    .uploadAttachment(order_id.value, file.filename, file.base64String)
+    .then((response) => {
+      // Add the attachment to the attachments
+      attachments.value.push(response);
+      return true;
+    })
+    .catch((error) => {
+      console.error("Error uploading attachment:", error);
+      return false;
+    });
 };
 
 export const downloadAttachment = (attachmentId, orderId = null) => {
   if (!attachmentId) {
     return false;
   }
-  return SessionUser.objects.orders.functions.downloadAttachment(orderId ? orderId : order_id.value, attachmentId).then((response) => {
-    // Create a link element
-    const link = document.createElement('a');
-    link.href = response;
-    link.download = response.filename;
-    link.style.display = 'none';
-    link.target = '_blank';
-    document.body.appendChild(link);
-    link.click();
-    document.body.removeChild(link);
-    return true;
-  }).catch((error) => {
-    console.error('Error downloading attachment:', error);
-    return false;
-  });
+  return SessionUser.objects.orders.functions
+    .downloadAttachment(orderId ? orderId : order_id.value, attachmentId)
+    .then((response) => {
+      // Create a link element
+      const link = document.createElement("a");
+      link.href = response;
+      link.download = response.filename;
+      link.style.display = "none";
+      link.target = "_blank";
+      document.body.appendChild(link);
+      link.click();
+      document.body.removeChild(link);
+      return true;
+    })
+    .catch((error) => {
+      console.error("Error downloading attachment:", error);
+      return false;
+    });
 };
 
 export const getAttachmentPreviewLink = (attachmentId) => {
   if (!attachmentId) {
     return null;
   }
-  return SessionUser.objects.orders.functions.downloadAttachment(order_id.value, attachmentId).then((response) => {
-    if (!response || typeof response !== 'string') {
+  return SessionUser.objects.orders.functions
+    .downloadAttachment(order_id.value, attachmentId)
+    .then((response) => {
+      if (!response || typeof response !== "string") {
+        return null;
+      }
+
+      try {
+        const parsedUrl = new URL(response);
+        parsedUrl.searchParams.set("preview", "true");
+        return parsedUrl.toString();
+      } catch {
+        const separator = response.includes("?") ? "&" : "?";
+        return `${response}${separator}preview=true`;
+      }
+    })
+    .catch((error) => {
+      console.error("Error getting attachment preview link:", error);
       return null;
-    }
-
-    try {
-      const parsedUrl = new URL(response);
-      parsedUrl.searchParams.set('preview', 'true');
-      return parsedUrl.toString();
-    } catch {
-      const separator = response.includes('?') ? '&' : '?';
-      return `${response}${separator}preview=true`;
-    }
-  }).catch((error) => {
-    console.error('Error getting attachment preview link:', error);
-    return null;
-  });
+    });
 };
-
-
-
 </script>
diff --git a/src/i18n/locales/da.json b/src/i18n/locales/da.json
index 9ea9f86e..d438e02a 100644
--- a/src/i18n/locales/da.json
+++ b/src/i18n/locales/da.json
@@ -360,6 +360,17 @@
       "order": "Ordre",
       "customer_wishes": "Kundeønsker",
       "order_note": "Ordrenote",
+      "order_booking_selector": {
+        "title": "Vælg booking",
+        "help_text": "Flere ventende bookinger matcher dette køretøj. Vælg den korrekte booking eller fortsæt uden booking.",
+        "option_title": "Booking #{id} • {datetime}",
+        "use_booking": "Brug booking",
+        "continue_without_booking": "Fortsæt uden booking",
+        "customer_label": "Kunde",
+        "plates_label": "Nummerplader",
+        "reference_label": "Reference",
+        "services_label": "Ydelser"
+      },
       "orders": {
         "subtitle": "Administrer ordrer",
         "title": "Ordrer"
diff --git a/src/i18n/locales/de.json b/src/i18n/locales/de.json
index 68fe0302..e7e374a6 100644
--- a/src/i18n/locales/de.json
+++ b/src/i18n/locales/de.json
@@ -360,6 +360,17 @@
       "order": "Auftrag",
       "customer_wishes": "Kundenwünsche",
       "order_note": "Auftragsnotiz",
+      "order_booking_selector": {
+        "title": "Buchung auswählen",
+        "help_text": "Mehrere offene Buchungen passen zu diesem Fahrzeug. Wählen Sie die richtige Buchung oder fahren Sie ohne Buchung fort.",
+        "option_title": "Buchung #{id} • {datetime}",
+        "use_booking": "Buchung verwenden",
+        "continue_without_booking": "Ohne Buchung fortfahren",
+        "customer_label": "Kunde",
+        "plates_label": "Kennzeichen",
+        "reference_label": "Referenz",
+        "services_label": "Leistungen"
+      },
       "orders": {
         "subtitle": "?bersicht des Waschprotokolls",
         "title": "Bestellungen"
diff --git a/src/i18n/locales/en.json b/src/i18n/locales/en.json
index 8a31ed77..2e4cd97b 100644
--- a/src/i18n/locales/en.json
+++ b/src/i18n/locales/en.json
@@ -360,6 +360,17 @@
       "order": "Order",
       "customer_wishes": "Customer wishes",
       "order_note": "Order note",
+      "order_booking_selector": {
+        "title": "Select booking",
+        "help_text": "Multiple pending bookings match this vehicle. Choose the correct booking or continue without one.",
+        "option_title": "Booking #{id} • {datetime}",
+        "use_booking": "Use booking",
+        "continue_without_booking": "Continue without booking",
+        "customer_label": "Customer",
+        "plates_label": "Plates",
+        "reference_label": "Reference",
+        "services_label": "Services"
+      },
       "orders": {
         "subtitle": "Overview of wash log",
         "title": "Wash Log"
diff --git a/src/i18n/locales/no.json b/src/i18n/locales/no.json
index 628aeace..a6119110 100644
--- a/src/i18n/locales/no.json
+++ b/src/i18n/locales/no.json
@@ -355,6 +355,17 @@
       "order": "Bestille",
       "customer_wishes": "Kundeønsker",
       "order_note": "Bestillingsnotat",
+      "order_booking_selector": {
+        "title": "Velg booking",
+        "help_text": "Flere ventende bookinger matcher dette kjøretøyet. Velg riktig booking eller fortsett uten booking.",
+        "option_title": "Booking #{id} • {datetime}",
+        "use_booking": "Bruk booking",
+        "continue_without_booking": "Fortsett uten booking",
+        "customer_label": "Kunde",
+        "plates_label": "Registreringsnumre",
+        "reference_label": "Referanse",
+        "services_label": "Tjenester"
+      },
       "orders": {
         "subtitle": "Oversikt over vaskelogg",
         "title": "Ordrer"
diff --git a/src/i18n/locales/sv.json b/src/i18n/locales/sv.json
index 816fc805..55b818b2 100644
--- a/src/i18n/locales/sv.json
+++ b/src/i18n/locales/sv.json
@@ -355,6 +355,17 @@
       "order": "Order",
       "customer_wishes": "Kundönskemål",
       "order_note": "Order note",
+      "order_booking_selector": {
+        "title": "Välj bokning",
+        "help_text": "Flera väntande bokningar matchar det här fordonet. Välj rätt bokning eller fortsätt utan bokning.",
+        "option_title": "Bokning #{id} • {datetime}",
+        "use_booking": "Använd bokning",
+        "continue_without_booking": "Fortsätt utan bokning",
+        "customer_label": "Kund",
+        "plates_label": "Registreringsnummer",
+        "reference_label": "Referens",
+        "services_label": "Tjänster"
+      },
       "orders": {
         "subtitle": "översikt över tvättlogg",
         "title": "Ordrar"
diff --git a/src/i18n/locales/sv_backup.json b/src/i18n/locales/sv_backup.json
index 488da179..e132e110 100644
--- a/src/i18n/locales/sv_backup.json
+++ b/src/i18n/locales/sv_backup.json
@@ -297,6 +297,17 @@
       "not_found": "Not found",
       "order": "Order",
       "order_note": "Order note",
+      "order_booking_selector": {
+        "title": "Välj bokning",
+        "help_text": "Flera väntande bokningar matchar det här fordonet. Välj rätt bokning eller fortsätt utan bokning.",
+        "option_title": "Bokning #{id} • {datetime}",
+        "use_booking": "Använd bokning",
+        "continue_without_booking": "Fortsätt utan bokning",
+        "customer_label": "Kund",
+        "plates_label": "Registreringsnummer",
+        "reference_label": "Referens",
+        "services_label": "Tjänster"
+      },
       "orders": {
         "subtitle": "Overview of wash log",
         "title": "Ordrar"
diff --git a/tests/e2e/admin-pos-orders.spec.ts b/tests/e2e/admin-pos-orders.spec.ts
index f3d6711c..098f8cd8 100644
--- a/tests/e2e/admin-pos-orders.spec.ts
+++ b/tests/e2e/admin-pos-orders.spec.ts
@@ -246,6 +246,35 @@ async function waitForOrderMutation(
   });
 }
 
+function createRequiredWarningsPosFixture() {
+  const customerNumber = 12345679;
+  const baseFixture = createPosFixture();
+
+  return createPosFixture({
+    customerAttributesByNumber: {
+      [customerNumber]: [
+        {
+          id: 11,
+          customer_number: customerNumber,
+          attribute: "requiresReferenceNumber",
+        },
+        {
+          id: 12,
+          customer_number: customerNumber,
+          attribute: "usePONumbers",
+        },
+      ],
+    },
+    ordersById: {
+      54518: {
+        ...baseFixture.ordersById[54518],
+        reference: "",
+        po: "",
+      },
+    },
+  });
+}
+
 test.describe("Admin POS Orders - desktop settings", () => {
   test.beforeEach(async ({ page }, testInfo) => {
     test.skip(!testInfo.project.name.includes("desktop"), "Desktop-only order settings coverage");
@@ -1097,6 +1126,9 @@ test.describe("Admin POS Orders - desktop settings", () => {
 
     await page.goto("/admin/12/modules/pos/orders");
 
+    const paperclipAction = getVisibleTestId(page, "pos-order-list-attachments-54518").locator(
+      ".dropdown-trigger button"
+    );
     const attachmentDropdown = getVisibleTestId(page, `pos-order-list-attachments-${orderId}`);
     const attachmentAction = attachmentDropdown.locator(".dropdown-trigger button");
     const settingsAction = getVisibleTestId(page, `pos-order-list-settings-${orderId}`).locator(
@@ -1109,14 +1141,35 @@ test.describe("Admin POS Orders - desktop settings", () => {
     await expect(attachmentAction).not.toHaveClass(/is-text/);
     await expect(attachmentAction).toHaveCSS("background-color", "rgba(0, 0, 0, 0)");
     await expect(attachmentAction).toHaveCSS("text-decoration-line", "none");
+    await expect(attachmentAction).toHaveCSS("justify-content", "center");
     await expect(attachmentAction.locator(".fa-plus")).toBeVisible();
     await expect(attachmentAction.locator(".ml-2")).toHaveCount(0);
 
+    const paperclipBox = await paperclipAction.boundingBox();
     const attachmentBox = await attachmentAction.boundingBox();
     const settingsBox = await settingsAction.boundingBox();
+    const plusIconBox = await attachmentAction.locator(".fa-plus").boundingBox();
 
+    expect(paperclipBox).not.toBeNull();
     expect(attachmentBox).not.toBeNull();
     expect(settingsBox).not.toBeNull();
+    expect(plusIconBox).not.toBeNull();
+    expect(Math.abs((attachmentBox?.width ?? 0) - (paperclipBox?.width ?? 0))).toBeLessThanOrEqual(1);
+    expect(Math.abs((attachmentBox?.height ?? 0) - (paperclipBox?.height ?? 0))).toBeLessThanOrEqual(1);
+    expect(
+      Math.abs(
+        (plusIconBox?.x ?? 0) +
+          (plusIconBox?.width ?? 0) / 2 -
+          ((attachmentBox?.x ?? 0) + (attachmentBox?.width ?? 0) / 2)
+      )
+    ).toBeLessThanOrEqual(1);
+    expect(
+      Math.abs(
+        (plusIconBox?.y ?? 0) +
+          (plusIconBox?.height ?? 0) / 2 -
+          ((attachmentBox?.y ?? 0) + (attachmentBox?.height ?? 0) / 2)
+      )
+    ).toBeLessThanOrEqual(1);
     expect(attachmentBox?.x ?? 0).toBeLessThan(settingsBox?.x ?? 0);
 
     await attachmentAction.click();
@@ -1133,6 +1186,111 @@ test.describe("Admin POS Orders - desktop settings", () => {
   });
 });
 
+test.describe("Admin POS Orders - desktop required warning states", () => {
+  test.beforeEach(async ({ page }, testInfo) => {
+    test.skip(!testInfo.project.name.includes("desktop"), "Desktop-only required warning coverage");
+
+    await mockApi(page, {
+      authenticated: true,
+      permissions: POS_PERMISSIONS,
+      edgeGateways: false,
+      pos: createRequiredWarningsPosFixture(),
+    });
+    await primeOperatorSession(page, "pos-orders-required-warnings-token");
+  });
+
+  test("shows required reference and po warnings in order detail and clears them without changing field size", async ({
+    page,
+  }) => {
+    await openOrderDetail(page);
+
+    const referenceControl = page.getByTestId("pos-order-customer-wishes-reference-control");
+    const poControl = page.getByTestId("pos-order-customer-wishes-po-control");
+
+    await expect(referenceControl).toHaveAttribute("data-warning-state", "danger");
+    await expect(poControl).toHaveAttribute("data-warning-state", "warning");
+    await expect(page.getByTestId("pos-order-customer-wishes-reference-warning-icon")).toBeVisible();
+    await expect(page.getByTestId("pos-order-customer-wishes-po-warning-icon")).toBeVisible();
+
+    const warningReferenceBox = await referenceControl.boundingBox();
+    const warningPoBox = await poControl.boundingBox();
+    expect(warningReferenceBox).not.toBeNull();
+    expect(warningPoBox).not.toBeNull();
+    expect(Math.abs((warningReferenceBox?.height ?? 0) - (warningPoBox?.height ?? 0))).toBeLessThanOrEqual(2);
+
+    const referenceValue = "REF1";
+    const poValue = "PO1";
+
+    const referenceRequest = waitForOrderMutation(
+      page,
+      "PUT",
+      "/orders",
+      (body) => Number(body.id) === 54518 && body.reference === referenceValue
+    );
+    await page.getByTestId("pos-order-customer-wishes-reference").click();
+    const referenceInput = page.getByTestId("pos-order-customer-wishes-reference-input");
+    await referenceInput.fill(referenceValue);
+    await expect(referenceControl).not.toHaveAttribute("data-warning-state", "danger");
+    await expect(page.getByTestId("pos-order-customer-wishes-reference-warning-icon")).toHaveCount(0);
+    await referenceInput.press("Enter");
+    await expect(referenceInput).toHaveCount(0);
+    await referenceRequest;
+    await expect(referenceControl).not.toHaveClass(/is-loading/);
+
+    const poRequest = waitForOrderMutation(
+      page,
+      "PUT",
+      "/orders",
+      (body) => Number(body.id) === 54518 && body.po === poValue
+    );
+    await page.getByTestId("pos-order-customer-wishes-po").click();
+    const poInput = page.getByTestId("pos-order-customer-wishes-po-input");
+    await poInput.fill(poValue);
+    await expect(poControl).not.toHaveAttribute("data-warning-state", "warning");
+    await expect(page.getByTestId("pos-order-customer-wishes-po-warning-icon")).toHaveCount(0);
+    await poInput.press("Enter");
+    await expect(poInput).toHaveCount(0);
+    await poRequest;
+    await expect(poControl).not.toHaveClass(/is-loading/);
+
+    await expect(page.getByTestId("pos-order-customer-wishes-reference")).toContainText(referenceValue);
+    await expect(page.getByTestId("pos-order-customer-wishes-po")).toContainText(poValue);
+    await expect(referenceControl).not.toHaveClass(/is-loading/);
+    await expect(poControl).not.toHaveClass(/is-loading/);
+
+    const clearedReferenceBox = await referenceControl.boundingBox();
+    const clearedPoBox = await poControl.boundingBox();
+    expect(clearedReferenceBox).not.toBeNull();
+    expect(clearedPoBox).not.toBeNull();
+    expect(Math.abs((clearedReferenceBox?.height ?? 0) - (clearedPoBox?.height ?? 0))).toBeLessThanOrEqual(2);
+  });
+
+  test("shows the same required warnings in the shared desktop step 2 workspace", async ({ page }) => {
+    await page.goto("/admin/12/modules/pos?step=1");
+    await expect(page.getByTestId("pos-step-1")).toBeVisible();
+
+    await page.locator("#reg_1").fill("WARN123");
+    await page.locator("#pos_select_customer_input").fill("12345679");
+    await expect(page.locator(".customer-drop-down-select").first()).toBeVisible();
+    await page.locator(".customer-drop-down-select").first().click();
+
+    await page.getByTestId("pos-step-1").getByTestId("pos-next-step").click();
+    const stepTwo = page.getByTestId("pos-step-2");
+    await expect(stepTwo).toBeVisible();
+
+    await expect(stepTwo.getByTestId("pos-order-customer-wishes-reference-control")).toHaveAttribute(
+      "data-warning-state",
+      "danger"
+    );
+    await expect(stepTwo.getByTestId("pos-order-customer-wishes-po-control")).toHaveAttribute(
+      "data-warning-state",
+      "warning"
+    );
+    await expect(stepTwo.getByTestId("pos-order-customer-wishes-reference-warning-icon")).toBeVisible();
+    await expect(stepTwo.getByTestId("pos-order-customer-wishes-po-warning-icon")).toBeVisible();
+  });
+});
+
 test.describe("Admin POS Orders - desktop attachment discovery", () => {
   test.beforeEach(async ({ page }, testInfo) => {
     test.skip(!testInfo.project.name.includes("desktop"), "Desktop-only attachment discovery coverage");
diff --git a/tests/e2e/fixtures/authHelpers.ts b/tests/e2e/fixtures/authHelpers.ts
index fc49caa7..013e2605 100644
--- a/tests/e2e/fixtures/authHelpers.ts
+++ b/tests/e2e/fixtures/authHelpers.ts
@@ -24,6 +24,28 @@ const isBenignNavigationError = (error: unknown) => {
   );
 };
 
+async function ensureAuthFieldVisible(page: Page, targetPath: string, selector: string) {
+  const field = page.locator(selector);
+  for (let attempt = 0; attempt < 2; attempt++) {
+    if (await field.isVisible().catch(() => false)) {
+      return field;
+    }
+
+    if (attempt === 0) {
+      try {
+        await page.goto(targetPath, { waitUntil: "domcontentloaded" });
+      } catch (error) {
+        if (!isBenignNavigationError(error)) {
+          throw error;
+        }
+      }
+    }
+  }
+
+  await expect(field).toBeVisible({ timeout: AUTH_TIMEOUT });
+  return field;
+}
+
 async function readStoredToken(page: Page) {
   try {
     return await page.evaluate(() => window.localStorage.getItem("token"));
@@ -34,7 +56,7 @@ async function readStoredToken(page: Page) {
 
 async function settleAuthenticatedNavigation(page: Page, targetPath: string, targetUrl: RegExp) {
   await expect.poll(() => readStoredToken(page), { timeout: AUTH_TIMEOUT }).not.toBeNull();
-  if (!targetUrl.test(page.url())) {
+  const navigateToTarget = async () => {
     try {
       await page.goto(targetPath, { waitUntil: "domcontentloaded" });
     } catch (error) {
@@ -42,8 +64,22 @@ async function settleAuthenticatedNavigation(page: Page, targetPath: string, tar
         throw error;
       }
     }
+  };
+
+  if (!targetUrl.test(page.url())) {
+    await navigateToTarget();
+  }
+
+  try {
+    await expect.poll(() => page.url(), { timeout: AUTH_TIMEOUT }).toMatch(targetUrl);
+  } catch (error) {
+    if ((await readStoredToken(page)) === null) {
+      throw error;
+    }
+
+    await navigateToTarget();
+    await expect.poll(() => page.url(), { timeout: AUTH_TIMEOUT }).toMatch(targetUrl);
   }
-  await expect.poll(() => page.url(), { timeout: AUTH_TIMEOUT }).toMatch(targetUrl);
 }
 
 /**
@@ -62,6 +98,7 @@ export async function loginAsUser(
 ) {
   const creds = credentials || userCredentials;
   await page.goto("/login");
+  await ensureAuthFieldVisible(page, "/login", 'input[name="customer_number"]');
   await page.fill('input[name="customer_number"]', creds.customerNumber);
   await page.fill('input[name="password"]', creds.password);
   await page.click('button[id="login-button"]');
@@ -92,6 +129,7 @@ export async function loginAsSubuserByPhone(
 ) {
   const creds = credentials || subuserPhoneCredentials;
   await page.goto("/login/driver");
+  await ensureAuthFieldVisible(page, "/login/driver", 'input[name="phone_country_code"]');
   await page.fill('input[name="phone_country_code"]', creds.phoneCountryCode);
   await page.fill('input[name="phone"]', creds.phone);
   await page.fill('input[name="password"]', creds.password);
@@ -118,8 +156,7 @@ export async function loginAsSubuserByUsername(
   const creds = credentials || subuserUsernameCredentials;
   await page.goto("/login/driver");
   await page.click('button[id="subuser_login_method_username_button"]');
-  await page.waitForSelector('input[name="username"]');
-  await page.waitForSelector('input[name="password"]');
+  await ensureAuthFieldVisible(page, "/login/driver", 'input[name="username"]');
   await page.fill('input[name="username"]', creds.username);
   await page.fill('input[name="password"]', creds.password);
   await page.click('button[id="subuser-login-button"]');
@@ -141,6 +178,7 @@ export async function loginAsSubuserByUsername(
 export async function loginAsOperator(page: Page, credentials?: { userId: string; password: string }) {
   const creds = credentials || operatorCredentials;
   await page.goto("/admin/login");
+  await ensureAuthFieldVisible(page, "/admin/login", 'input[name="user_id"]');
   await page.fill('input[name="user_id"]', creds.userId);
   await page.fill('input[name="password"]', creds.password);
   await page.click('button[id="operator_login_button"]');
diff --git a/tests/e2e/pos-flow.spec.js b/tests/e2e/pos-flow.spec.js
index 2b5f926c..5206d4e8 100644
--- a/tests/e2e/pos-flow.spec.js
+++ b/tests/e2e/pos-flow.spec.js
@@ -137,9 +137,12 @@ function createPosFixture() {
       },
     ],
     unknownVehicles: [],
+    orderBookings: [],
     ordersById,
     orderItemsByOrderId,
     markCompletedOrderIds: [],
+    completedBookingIds: [],
+    bookingOrderAssignments: [],
     nextOrderId: 9300,
     nextOrderItemId: 9800,
   };
@@ -160,6 +163,40 @@ function buildOrderItem(product, body, id) {
   };
 }
 
+function buildOrderBooking(id, overrides = {}) {
+  return {
+    id,
+    customer_number: 12345,
+    customer_name: "Pleno Logistics",
+    department: 1,
+    datetime: "2026-01-01T08:00:00.000Z",
+    reg_1: "AB12345",
+    reg_2: "",
+    reg_3: "",
+    reference: `BOOKING-${id}`,
+    reference_number: `BOOKING-${id}`,
+    notes: `Booking note ${id}`,
+    note: `Booking note ${id}`,
+    po: `PO-${id}`,
+    status: "pending",
+    order_id: null,
+    wash_type: "Tankvogn med hænger",
+    parsed_services: {
+      string: "Tankvogn med hænger",
+      array: ["Tankvogn med hænger"],
+    },
+    items: [
+      {
+        id: 53,
+        name: "Tankvogn med hænger",
+        price: 599,
+        quantity: 1,
+      },
+    ],
+    ...overrides,
+  };
+}
+
 async function mockPosApi(page, fixture) {
   await page.route(API_HOST, async (route) => {
     const request = route.request();
@@ -203,6 +240,97 @@ async function mockPosApi(page, fixture) {
       return;
     }
 
+    if (pathname.endsWith("/order-bookings") && method === "GET") {
+      const bookingId = Number(parsedUrl.searchParams.get("id") || 0);
+      const filters = String(parsedUrl.searchParams.get("filters") || "");
+      let bookings = Array.isArray(fixture.orderBookings) ? [...fixture.orderBookings] : [];
+
+      if (filters.includes("order_id:null")) {
+        bookings = bookings.filter((booking) => booking.order_id === null || booking.order_id === undefined);
+      }
+
+      if (filters.includes("department:")) {
+        const departmentFilter = Number(filters.split("department:")[1]?.split(",")[0] || 0);
+        if (departmentFilter > 0) {
+          bookings = bookings.filter((booking) => Number(booking.department) === departmentFilter);
+        }
+      }
+
+      if (bookingId > 0) {
+        await route.fulfill(
+          json({
+            success: true,
+            data: bookings.find((booking) => Number(booking.id) === bookingId) || null,
+          })
+        );
+        return;
+      }
+
+      await route.fulfill(
+        json({
+          success: true,
+          data: bookings,
+        })
+      );
+      return;
+    }
+
+    if (/\/order-bookings\/\d+$/.test(pathname) && method === "GET") {
+      const bookingId = Number(pathname.split("/").pop());
+      await route.fulfill(
+        json({
+          success: true,
+          data: (fixture.orderBookings || []).find((booking) => Number(booking.id) === bookingId) || null,
+        })
+      );
+      return;
+    }
+
+    if (pathname.endsWith("/order-bookings") && method === "PUT") {
+      const body = request.postDataJSON?.() || {};
+      const bookingId = Number(body.id);
+      const bookingIndex = (fixture.orderBookings || []).findIndex((booking) => Number(booking.id) === bookingId);
+      if (bookingIndex >= 0) {
+        fixture.orderBookings[bookingIndex] = {
+          ...fixture.orderBookings[bookingIndex],
+          order_id: body.order_id ?? body.value ?? null,
+        };
+        fixture.bookingOrderAssignments.push({
+          id: bookingId,
+          order_id: fixture.orderBookings[bookingIndex].order_id,
+        });
+      }
+
+      await route.fulfill(
+        json({
+          success: true,
+          data: bookingIndex >= 0 ? fixture.orderBookings[bookingIndex] : null,
+        })
+      );
+      return;
+    }
+
+    if (pathname.endsWith("/order-bookings/complete") && method === "POST") {
+      const body = request.postDataJSON?.() || {};
+      const bookingId = Number(body.id);
+      const bookingIndex = (fixture.orderBookings || []).findIndex((booking) => Number(booking.id) === bookingId);
+      if (bookingIndex >= 0) {
+        fixture.orderBookings[bookingIndex] = {
+          ...fixture.orderBookings[bookingIndex],
+          status: "completed",
+        };
+        fixture.completedBookingIds.push(bookingId);
+      }
+
+      await route.fulfill(
+        json({
+          success: true,
+          data: bookingIndex >= 0 ? fixture.orderBookings[bookingIndex] : { id: bookingId, status: "completed" },
+        })
+      );
+      return;
+    }
+
     if (pathname.endsWith("/vehicles") && method === "GET") {
       const search = (parsedUrl.searchParams.get("search") || "").toUpperCase();
       const matches = fixture.vehicles.filter((vehicle) => vehicle.reg.includes(search));
@@ -351,6 +479,24 @@ async function mockPosApi(page, fixture) {
       return;
     }
 
+    if (pathname.endsWith("/orders") && method === "PUT") {
+      const body = request.postDataJSON?.() || {};
+      const orderId = Number(body.id);
+      if (fixture.ordersById[orderId]) {
+        fixture.ordersById[orderId] = {
+          ...fixture.ordersById[orderId],
+          ...body,
+        };
+      }
+      await route.fulfill(
+        json({
+          success: true,
+          data: fixture.ordersById[orderId] || null,
+        })
+      );
+      return;
+    }
+
     if (pathname.endsWith("/order") && method === "GET") {
       const id = Number(parsedUrl.searchParams.get("id"));
       await route.fulfill(
@@ -583,6 +729,26 @@ function seedMobilePosState(page) {
   }, state);
 }
 
+async function setupDesktopPosPage(page, fixture, { token = "pos-desktop-token" } = {}) {
+  const permissions = ["admin", "department_access_1"];
+
+  await mockApi(page, {
+    authenticated: true,
+    permissions,
+    sessionData: {
+      display_name: "POS Desktop",
+    },
+  });
+  await mockPosApi(page, fixture);
+  await primeSession(page, {
+    token,
+    permissions,
+  });
+
+  await page.goto("/admin/1/modules/pos");
+  await expect(page.getByTestId("pos-step-1")).toBeVisible({ timeout: 10_000 });
+}
+
 test.describe("POS flow", () => {
   test.beforeEach(async ({ page }) => {
     await suppressVueDevtoolsOverlay(page);
@@ -722,4 +888,178 @@ test.describe("POS flow", () => {
 
     expect(consoleProblems.join("\n")).not.toContain("Extraneous non-props attributes");
   });
+
+  test("desktop auto-applies a single matching order booking and completes that booking", async ({
+    page,
+  }, testInfo) => {
+    test.skip(
+      testInfo.project.name !== "chromium-desktop",
+      "Desktop POS booking flow is validated on chromium-desktop."
+    );
+
+    const fixture = createPosFixture();
+    fixture.orderBookings = [
+      buildOrderBooking(8101, {
+        reference: "SINGLE-BOOKING-REF",
+        reference_number: "SINGLE-BOOKING-REF",
+        notes: "Single desktop booking",
+        note: "Single desktop booking",
+        items: [
+          { id: 53, name: "Tankvogn med hænger", price: 599, quantity: 1 },
+          { id: 63, name: "Dolly", price: 275, quantity: 1 },
+        ],
+        parsed_services: {
+          string: "Tankvogn med hænger, Dolly",
+          array: ["Tankvogn med hænger", "Dolly"],
+        },
+      }),
+    ];
+
+    await setupDesktopPosPage(page, fixture, { token: "pos-desktop-single-booking" });
+
+    const activeBookingSelector = page.locator('[data-testid="default-object-selector"].is-active');
+    await page.locator("#reg_1").fill("AB12345");
+    await expect(activeBookingSelector).toHaveCount(0);
+
+    await page.locator('[data-testid="pos-next-step"]:visible').click();
+    await expect(page.getByTestId("pos-step-2")).toBeVisible({ timeout: 10_000 });
+
+    await expect
+      .poll(() => fixture.ordersById[9300]?.reference || null, { timeout: 10_000 })
+      .toBe("SINGLE-BOOKING-REF");
+    await expect
+      .poll(() => (fixture.orderItemsByOrderId[9300] || []).map((item) => Number(item.product_id)), { timeout: 10_000 })
+      .toEqual([53, 63]);
+
+    await page.locator('[data-testid="pos-next-step"]:visible').click();
+    await expect(page.getByTestId("pos-step-3")).toBeVisible({ timeout: 10_000 });
+
+    await page.locator('[data-testid="pos-next-step"]:visible').click();
+
+    await expect.poll(() => fixture.ordersById[9300]?.booking_id || null, { timeout: 10_000 }).toBe(8101);
+    await expect
+      .poll(() => fixture.bookingOrderAssignments, { timeout: 10_000 })
+      .toContainEqual({
+        id: 8101,
+        order_id: 9300,
+      });
+    await expect.poll(() => fixture.completedBookingIds, { timeout: 10_000 }).toContain(8101);
+  });
+
+  test("desktop opens a chooser for multiple matching order bookings and hydrates the selected booking", async ({
+    page,
+  }, testInfo) => {
+    test.skip(
+      testInfo.project.name !== "chromium-desktop",
+      "Desktop POS booking flow is validated on chromium-desktop."
+    );
+
+    const fixture = createPosFixture();
+    fixture.orderBookings = [
+      buildOrderBooking(8102, {
+        datetime: "2026-01-01T07:00:00.000Z",
+        reference: "BOOKING-A-REF",
+        reference_number: "BOOKING-A-REF",
+        items: [
+          { id: 53, name: "Tankvogn med hænger", price: 599, quantity: 1 },
+          { id: 63, name: "Dolly", price: 275, quantity: 1 },
+        ],
+        parsed_services: {
+          string: "Tankvogn med hænger, Dolly",
+          array: ["Tankvogn med hænger", "Dolly"],
+        },
+      }),
+      buildOrderBooking(8103, {
+        datetime: "2026-01-01T09:00:00.000Z",
+        reference: "BOOKING-B-REF",
+        reference_number: "BOOKING-B-REF",
+        items: [{ id: 63, name: "Dolly", price: 275, quantity: 1 }],
+        parsed_services: {
+          string: "Dolly",
+          array: ["Dolly"],
+        },
+      }),
+    ];
+
+    await setupDesktopPosPage(page, fixture, { token: "pos-desktop-multi-booking" });
+
+    const activeBookingSelector = page.locator('[data-testid="default-object-selector"].is-active');
+    await page.locator("#reg_1").fill("AB12345");
+    await expect(activeBookingSelector).toBeVisible({ timeout: 10_000 });
+    await expect(activeBookingSelector.getByTestId("pos-desktop-order-booking-use-8102")).toBeVisible({
+      timeout: 10_000,
+    });
+    await expect(activeBookingSelector.getByTestId("pos-desktop-order-booking-use-8103")).toBeVisible({
+      timeout: 10_000,
+    });
+
+    await activeBookingSelector.getByTestId("pos-desktop-order-booking-use-8102").click();
+    await expect(page.locator("#reference")).toHaveValue("BOOKING-A-REF");
+
+    await page.locator('[data-testid="pos-next-step"]:visible').click();
+    await expect(page.getByTestId("pos-step-2")).toBeVisible({ timeout: 10_000 });
+
+    await expect
+      .poll(() => (fixture.orderItemsByOrderId[9300] || []).map((item) => Number(item.product_id)), { timeout: 10_000 })
+      .toEqual([53, 63]);
+
+    await page.locator('[data-testid="pos-next-step"]:visible').click();
+    await expect(page.getByTestId("pos-step-3")).toBeVisible({ timeout: 10_000 });
+    await page.locator('[data-testid="pos-next-step"]:visible').click();
+
+    await expect.poll(() => fixture.ordersById[9300]?.booking_id || null, { timeout: 10_000 }).toBe(8102);
+    await expect
+      .poll(() => fixture.bookingOrderAssignments, { timeout: 10_000 })
+      .toContainEqual({
+        id: 8102,
+        order_id: 9300,
+      });
+    await expect.poll(() => fixture.completedBookingIds, { timeout: 10_000 }).toContain(8102);
+    expect(fixture.completedBookingIds).not.toContain(8103);
+  });
+
+  test("desktop continue without booking skips hydration and completion requests", async ({ page }, testInfo) => {
+    test.skip(
+      testInfo.project.name !== "chromium-desktop",
+      "Desktop POS booking flow is validated on chromium-desktop."
+    );
+
+    const fixture = createPosFixture();
+    fixture.orderBookings = [
+      buildOrderBooking(8104, {
+        reference: "SKIP-A-REF",
+        reference_number: "SKIP-A-REF",
+      }),
+      buildOrderBooking(8105, {
+        datetime: "2026-01-01T09:00:00.000Z",
+        reference: "SKIP-B-REF",
+        reference_number: "SKIP-B-REF",
+      }),
+    ];
+
+    await setupDesktopPosPage(page, fixture, { token: "pos-desktop-skip-booking" });
+
+    const activeBookingSelector = page.locator('[data-testid="default-object-selector"].is-active');
+    await page.locator("#reg_1").fill("AB12345");
+    await expect(activeBookingSelector).toBeVisible({ timeout: 10_000 });
+    await activeBookingSelector.getByTestId("pos-desktop-order-booking-skip").click();
+
+    await page.locator('[data-testid="pos-next-step"]:visible').click();
+    await expect(page.getByTestId("pos-step-2")).toBeVisible({ timeout: 10_000 });
+
+    await expect.poll(() => (fixture.orderItemsByOrderId[9300] || []).length, { timeout: 10_000 }).toBe(0);
+
+    await page.getByTestId("pos-product-card-53").click();
+    await expect(page.getByTestId("pos-add-to-cart-53")).toBeVisible({ timeout: 10_000 });
+    await page.getByTestId("pos-add-to-cart-53").click();
+    await expect.poll(() => (fixture.orderItemsByOrderId[9300] || []).length, { timeout: 10_000 }).toBe(1);
+
+    await page.locator('[data-testid="pos-next-step"]:visible').click();
+    await expect(page.getByTestId("pos-step-3")).toBeVisible({ timeout: 10_000 });
+    await page.locator('[data-testid="pos-next-step"]:visible').click();
+
+    await expect.poll(() => fixture.bookingOrderAssignments.length, { timeout: 10_000 }).toBe(0);
+    await expect.poll(() => fixture.completedBookingIds.length, { timeout: 10_000 }).toBe(0);
+    await expect.poll(() => fixture.ordersById[9300]?.booking_id ?? null, { timeout: 10_000 }).toBe(null);
+  });
 });
diff --git a/tests/e2e/pos-mobile-order-flow.spec.js b/tests/e2e/pos-mobile-order-flow.spec.js
index bc008a9e..64d34104 100644
--- a/tests/e2e/pos-mobile-order-flow.spec.js
+++ b/tests/e2e/pos-mobile-order-flow.spec.js
@@ -3,8 +3,10 @@ import {
   DEFAULT_BOOKING_ID,
   DEFAULT_DEPARTMENT_ID,
   REGULAR_CUSTOMER_ID,
+  buildMobilePosState,
   createAttachmentFile,
   createMobilePosFixture,
+  gotoMobilePos,
   getStoredPosSnapshot,
   setupMobilePosPage,
   suppressVueDevtoolsOverlay,
@@ -30,6 +32,100 @@ function buildRegularOrder(orderId, overrides = {}) {
   };
 }
 
+function buildMobileOrderBooking(id, overrides = {}) {
+  return {
+    id,
+    customer_number: REGULAR_CUSTOMER_ID,
+    customer_name: "Pleno Logistics",
+    department: DEFAULT_DEPARTMENT_ID,
+    reg_1: "BOOK123",
+    reg_2: "",
+    reg_3: "",
+    reference: `BOOKING-REF-${id}`,
+    reference_number: `BOOKING-REF-${id}`,
+    notes: `Booking notes ${id}`,
+    note: `Booking notes ${id}`,
+    po: `PO-${id}`,
+    order_id: null,
+    status: "pending",
+    items: [],
+    parsed_services: {
+      string: "",
+      array: [],
+    },
+    created_at: "2026-01-01T09:00:00.000Z",
+    datetime: "2026-01-01T09:00:00.000Z",
+    ...overrides,
+  };
+}
+
+function buildMobileMatchedVehicle(reg, overrides = {}) {
+  return {
+    id: 7800,
+    reg,
+    customer_id: REGULAR_CUSTOMER_ID,
+    customer_name: "Pleno Logistics",
+    type: 53,
+    status: "verified",
+    barred: false,
+    wash_subscription: false,
+    addons: {
+      enabled: 1,
+      available: 2,
+      list: [71, 41],
+    },
+    reference: `REF-${reg}`,
+    last_order_id: null,
+    ...overrides,
+  };
+}
+
+function createMultiBookingFixture({ reg, vehicle = {}, bookings = [] }) {
+  const baseFixture = createMobilePosFixture();
+  return createMobilePosFixture({
+    vehicles: [...baseFixture.vehicles, buildMobileMatchedVehicle(reg, vehicle)],
+    bookingsById: {
+      ...baseFixture.bookingsById,
+      ...Object.fromEntries(bookings.map((booking) => [booking.id, booking])),
+    },
+    bookingStatusById: {
+      ...baseFixture.bookingStatusById,
+      ...Object.fromEntries(bookings.map((booking) => [booking.id, booking.status || "pending"])),
+    },
+  });
+}
+
+async function openMobileStep1FromStoredSnapshot(page, fixture, seedState, setupOptions = {}) {
+  await setupMobilePosPage(page, fixture, {
+    token: "mobile-step1-persistent-snapshot-token",
+    seedState: false,
+    route: {
+      step: 1,
+    },
+    ...setupOptions,
+  });
+
+  const snapshot = buildMobilePosState({
+    fixture,
+    customerId: null,
+    reg: "",
+    reference: "",
+    includePrimaryItem: false,
+    vehicleType: null,
+    lastOrderId: null,
+    ...seedState,
+  });
+
+  await page.evaluate((payload) => {
+    window.localStorage.setItem("pos", JSON.stringify(payload));
+  }, snapshot);
+
+  await gotoMobilePos(page, {
+    departmentId: fixture.departmentId ?? DEFAULT_DEPARTMENT_ID,
+    step: 1,
+  });
+}
+
 async function selectCustomerFromPopup(page, customerNumber = REGULAR_CUSTOMER_ID) {
   await expect(page.getByTestId("pos-mobile-customer-popup")).toBeVisible({ timeout: 10_000 });
   await page.getByTestId("pos-mobile-customer-search-input").fill(String(customerNumber));
@@ -97,6 +193,15 @@ async function selectPrimaryProduct(page, productId = 53) {
   await expect(page.getByTestId("pos-mobile-step-2")).toBeVisible({ timeout: 10_000 });
 }
 
+async function openVehicleSelectionFromPrimaryProduct(page, productName = "Tank truck wash") {
+  const currentPrimaryProduct = page.getByText(productName, { exact: true });
+  await expect(currentPrimaryProduct).toBeVisible({ timeout: 10_000 });
+  await currentPrimaryProduct.dispatchEvent("pointerdown");
+  await page.waitForTimeout(650);
+  await currentPrimaryProduct.dispatchEvent("pointerup");
+  await expect(page.getByTestId("pos-mobile-vehicle-selection")).toBeVisible({ timeout: 10_000 });
+}
+
 async function waitForBookingHydration(page, { primaryId, addonProductIds = [] } = {}) {
   await expect
     .poll(
@@ -118,6 +223,24 @@ async function waitForBookingHydration(page, { primaryId, addonProductIds = [] }
     });
 }
 
+async function waitForOrderBookingPopup(page) {
+  const popup = page.getByTestId("pos-mobile-order-booking-popup");
+  await expect(popup).toBeVisible({ timeout: 10_000 });
+  return popup;
+}
+
+async function expectOrderBookingPopupIds(page, bookingIds) {
+  await expect
+    .poll(
+      async () =>
+        page
+          .locator('[data-testid^="pos-mobile-order-booking-option-"]')
+          .evaluateAll((elements) => elements.map((element) => element.getAttribute("data-testid"))),
+      { timeout: 10_000 }
+    )
+    .toEqual(bookingIds.map((bookingId) => `pos-mobile-order-booking-option-${bookingId}`));
+}
+
 async function createOrderFromStep1(
   page,
   fixture,
@@ -155,6 +278,17 @@ async function createOrderFromStep1(
   }
 
   await page.getByTestId("pos-mobile-next-step").click();
+  const customerPopupAppeared = await page
+    .getByTestId("pos-mobile-customer-popup")
+    .waitFor({ state: "visible", timeout: 5_000 })
+    .then(() => true)
+    .catch(() => false);
+
+  if (!customerPopupAppeared) {
+    await expect(page.getByTestId("pos-mobile-step-2")).toBeVisible({ timeout: 10_000 });
+    return;
+  }
+
   await selectCustomerFromPopup(page, customerNumber);
   await page.getByTestId("pos-mobile-next-step").click();
 }
@@ -213,25 +347,26 @@ test.describe("POS mobile order flow", () => {
   });
 
   test("transaction history keeps each wash visually separated with a border", async ({ page }) => {
+    const todayDate = new Date().toISOString().split("T")[0];
     const fixture = createMobilePosFixture({
       ordersById: {
         9201: buildRegularOrder(9201, {
           customer_name: "VOGNMAND JIMMY CHRISTENSEN ApS",
           total_net_amount: 746,
           pending_handheld: true,
-          created_at: "2026-04-09T12:08:00.000Z",
+          created_at: `${todayDate}T12:08:00.000Z`,
         }),
         9202: buildRegularOrder(9202, {
           customer_name: "BYGMA Roskilde A/S",
           total_net_amount: 507,
           pending_handheld: true,
-          created_at: "2026-04-09T11:51:00.000Z",
+          created_at: `${todayDate}T11:51:00.000Z`,
         }),
         9203: buildRegularOrder(9203, {
           customer_name: "VOLVO ENTREPRENØRMASKINER A/S",
           total_net_amount: 512,
           pending_handheld: true,
-          created_at: "2026-04-09T10:10:00.000Z",
+          created_at: `${todayDate}T10:10:00.000Z`,
         }),
       },
     });
@@ -318,6 +453,59 @@ test.describe("POS mobile order flow", () => {
     await expect(page.locator("#input_field")).toHaveAttribute("placeholder", "Tilføj note...");
   });
 
+  test("step 1 reference trigger shows the required warning state and preserves row alignment", async ({ page }) => {
+    const fixture = createMobilePosFixture({
+      customerAttributesByNumber: {
+        [REGULAR_CUSTOMER_ID]: [
+          {
+            id: 9,
+            customer_number: REGULAR_CUSTOMER_ID,
+            attribute: "requiresReferenceNumber",
+          },
+        ],
+      },
+    });
+
+    await setupMobilePosPage(page, fixture, {
+      token: "mobile-required-reference-warning-token",
+      seedState: {
+        customerId: REGULAR_CUSTOMER_ID,
+        reg: "WARN123",
+        reference: "",
+        includePrimaryItem: false,
+        vehicleType: null,
+        lastOrderId: null,
+      },
+      route: {
+        step: 1,
+      },
+    });
+
+    const referenceTrigger = page.getByTestId("pos-mobile-step-1-reference-trigger");
+    await expect(referenceTrigger).toBeVisible({ timeout: 10_000 });
+    await expect(referenceTrigger).toHaveAttribute("data-warning-state", "danger");
+    await expect(page.getByTestId("pos-mobile-step-1-reference-warning-icon")).toBeVisible();
+
+    const [registrationRowBox, referenceTriggerBox] = await Promise.all([
+      page.getByTestId("pos-mobile-step-1-registration-row").boundingBox(),
+      referenceTrigger.boundingBox(),
+    ]);
+
+    expect(registrationRowBox).not.toBeNull();
+    expect(referenceTriggerBox).not.toBeNull();
+    expect(Math.abs((registrationRowBox?.width ?? 0) - (referenceTriggerBox?.width ?? 0))).toBeLessThanOrEqual(4);
+    expect(Math.abs((registrationRowBox?.x ?? 0) - (referenceTriggerBox?.x ?? 0))).toBeLessThanOrEqual(4);
+
+    await referenceTrigger.click();
+    await expect(page.getByTestId("pos-mobile-reference-input")).toBeVisible({ timeout: 10_000 });
+    await page.getByTestId("pos-mobile-reference-input").fill("MOBILE-WARN-REF");
+    await page.getByTestId("pos-mobile-reference-input").press("Enter");
+
+    await expect(page.getByTestId("pos-mobile-reference-input")).toHaveCount(0);
+    await expect(referenceTrigger).not.toHaveAttribute("data-warning-state", "danger");
+    await expect(page.getByTestId("pos-mobile-step-1-reference-warning-icon")).toHaveCount(0);
+  });
+
   test("@smoke manual input happy path creates, completes, and resets", async ({ page }) => {
     const fixture = createMobilePosFixture();
     await createOrderFromStep1(page, fixture, {
@@ -334,6 +522,363 @@ test.describe("POS mobile order flow", () => {
     await waitForStepReset(page);
   });
 
+  test("matched vehicle manual input seeds the step 2 reference and primary product defaults", async ({ page }) => {
+    const fixture = createMobilePosFixture();
+    await createOrderFromStep1(page, fixture, {
+      reg: "AB12345",
+      reference: "",
+      manualInput: true,
+      extraSeedState: {
+        reference: "",
+      },
+    });
+
+    await expect(page.getByTestId("pos-mobile-step-2")).toBeVisible({ timeout: 10_000 });
+    await expect(page.getByTestId("pos-mobile-reference-step-2-input")).toHaveValue("REF-AB12345");
+    await expect(page.getByTestId("pos-mobile-vehicle-selection")).toHaveCount(0);
+    await expect
+      .poll(
+        async () => {
+          const snapshot = await getStoredPosSnapshot(page);
+          return snapshot?.transactionItems?.primaryItem?.id ?? null;
+        },
+        { timeout: 10_000 }
+      )
+      .toBe(53);
+  });
+
+  test("multiple matching bookings open immediately, keep the chosen booking, and complete that exact booking", async ({
+    page,
+  }) => {
+    const fixture = createMultiBookingFixture({
+      reg: "MULTI123",
+      vehicle: {
+        reference: "VEHICLE-MULTI-REF",
+      },
+      bookings: [
+        buildMobileOrderBooking(8201, {
+          reg_1: "MULTI123",
+          datetime: "2026-01-01T07:00:00.000Z",
+          reference: "MULTI-BOOKING-A",
+          reference_number: "MULTI-BOOKING-A",
+          items: [
+            { id: 53, name: "Tank truck wash", price: 599, quantity: 1 },
+            { id: 71, name: "Interior rinse", price: 99, quantity: 1 },
+          ],
+          parsed_services: {
+            string: "Tank truck wash, Interior rinse",
+            array: ["Tank truck wash", "Interior rinse"],
+          },
+        }),
+        buildMobileOrderBooking(8202, {
+          reg_1: "MULTI123",
+          datetime: "2026-01-01T09:00:00.000Z",
+          reference: "MULTI-BOOKING-B",
+          reference_number: "MULTI-BOOKING-B",
+          notes: "Selected mobile booking",
+          note: "Selected mobile booking",
+          items: [{ id: 63, name: "Box trailer wash", price: 499, quantity: 1 }],
+          parsed_services: {
+            string: "Box trailer wash",
+            array: ["Box trailer wash"],
+          },
+        }),
+      ],
+    });
+
+    await setupMobilePosPage(page, fixture, {
+      token: "mobile-multi-booking-select-token",
+      seedState: {
+        customerId: null,
+        reg: "MULTI123",
+        reference: "",
+        includePrimaryItem: false,
+        vehicleType: null,
+        lastOrderId: null,
+      },
+      route: {
+        step: 1,
+      },
+    });
+
+    await waitForOrderBookingPopup(page);
+    await expectOrderBookingPopupIds(page, [8201, 8202]);
+    await page.getByTestId("pos-mobile-order-booking-use-8202").click();
+    await expect(page.getByTestId("pos-mobile-order-booking-popup")).toBeHidden({ timeout: 10_000 });
+
+    await expect
+      .poll(
+        async () => {
+          const snapshot = await getStoredPosSnapshot(page);
+          return {
+            bookingId: snapshot?.metadata?.bookingId ?? null,
+            vehicleBookingId: snapshot?.vehicles?.vehicle_1?.booking_id ?? null,
+            reference: snapshot?.metadata?.reference ?? "",
+          };
+        },
+        { timeout: 10_000 }
+      )
+      .toEqual({
+        bookingId: 8202,
+        vehicleBookingId: 8202,
+        reference: "MULTI-BOOKING-B",
+      });
+
+    await page.getByTestId("pos-mobile-next-step").click();
+    await expect(page.getByTestId("pos-mobile-step-2")).toBeVisible({ timeout: 10_000 });
+    await waitForBookingHydration(page, {
+      primaryId: 63,
+      addonProductIds: [],
+    });
+    await expect(page.getByTestId("pos-mobile-reference-step-2-input")).toHaveValue("MULTI-BOOKING-B");
+
+    await page.getByTestId("pos-mobile-next-step").click();
+
+    await expect.poll(() => fixture.requestCounters.bookingSetOrderId, { timeout: 10_000 }).toBe(1);
+    await expect.poll(() => fixture.requestCounters.bookingComplete, { timeout: 10_000 }).toBe(1);
+    await expect
+      .poll(
+        () =>
+          fixture.requestLog.bookingOrderAssignments.some(
+            (entry) => Number(entry?.id) === 8202 && Number(entry?.order_id) === 9300
+          ),
+        { timeout: 10_000 }
+      )
+      .toBe(true);
+    await expect
+      .poll(() => fixture.requestLog.bookingCompletions.some((entry) => Number(entry?.id) === 8202), {
+        timeout: 10_000,
+      })
+      .toBe(true);
+    expect(fixture.requestLog.bookingCompletions.some((entry) => Number(entry?.id) === 8201)).toBe(false);
+    await waitForStepReset(page);
+  });
+
+  test("manual input can continue without booking and keeps the flow unbooked", async ({ page }) => {
+    const fixture = createMultiBookingFixture({
+      reg: "SKIP123",
+      vehicle: {
+        reference: "SKIP-VEHICLE-REF",
+      },
+      bookings: [
+        buildMobileOrderBooking(8301, {
+          reg_1: "SKIP123",
+          datetime: "2026-01-01T07:00:00.000Z",
+          reference: "SKIP-BOOKING-A",
+          reference_number: "SKIP-BOOKING-A",
+        }),
+        buildMobileOrderBooking(8302, {
+          reg_1: "SKIP123",
+          datetime: "2026-01-01T09:00:00.000Z",
+          reference: "SKIP-BOOKING-B",
+          reference_number: "SKIP-BOOKING-B",
+        }),
+      ],
+    });
+
+    await setupMobilePosPage(page, fixture, {
+      token: "mobile-multi-booking-skip-token",
+      seedState: {
+        customerId: null,
+        reg: "",
+        reference: "",
+        includePrimaryItem: false,
+        vehicleType: null,
+        lastOrderId: null,
+      },
+      route: {
+        step: 1,
+      },
+    });
+
+    await page.getByTestId("pos-mobile-manual-input-toggle").click();
+    await expect(page.getByTestId("pos-mobile-manual-input")).toBeVisible({ timeout: 10_000 });
+    await page.getByTestId("pos-mobile-reg-input-1").fill("skip123");
+
+    await waitForOrderBookingPopup(page);
+    await expectOrderBookingPopupIds(page, [8301, 8302]);
+    await page.getByTestId("pos-mobile-order-booking-skip").click();
+    await expect(page.getByTestId("pos-mobile-order-booking-popup")).toBeHidden({ timeout: 10_000 });
+
+    await expect
+      .poll(
+        async () => {
+          const snapshot = await getStoredPosSnapshot(page);
+          return {
+            bookingId: snapshot?.metadata?.bookingId ?? null,
+            skippedPlate: snapshot?.metadata?.bookingSelectionSkippedPlate ?? "",
+          };
+        },
+        { timeout: 10_000 }
+      )
+      .toEqual({
+        bookingId: null,
+        skippedPlate: "SKIP123",
+      });
+
+    await page.getByTestId("pos-mobile-next-step").click();
+    await expect(page.getByTestId("pos-mobile-step-2")).toBeVisible({ timeout: 10_000 });
+    await expect(page.getByTestId("pos-mobile-reference-step-2-input")).toHaveValue("SKIP-VEHICLE-REF");
+
+    await page.getByTestId("pos-mobile-next-step").click();
+
+    await expect.poll(() => fixture.requestCounters.bookingSetOrderId, { timeout: 2_500 }).toBe(0);
+    await expect.poll(() => fixture.requestCounters.bookingComplete, { timeout: 2_500 }).toBe(0);
+    await waitForStepReset(page);
+  });
+
+  test("reloading after explicitly selecting a booking keeps the choice and does not reopen the chooser", async ({
+    page,
+  }) => {
+    const fixture = createMultiBookingFixture({
+      reg: "RESTSEL1",
+      bookings: [
+        buildMobileOrderBooking(8401, {
+          reg_1: "RESTSEL1",
+          datetime: "2026-01-01T07:00:00.000Z",
+          reference: "RESTORE-SELECT-A",
+          reference_number: "RESTORE-SELECT-A",
+        }),
+        buildMobileOrderBooking(8402, {
+          reg_1: "RESTSEL1",
+          datetime: "2026-01-01T09:00:00.000Z",
+          reference: "RESTORE-SELECT-B",
+          reference_number: "RESTORE-SELECT-B",
+        }),
+      ],
+    });
+
+    await openMobileStep1FromStoredSnapshot(
+      page,
+      fixture,
+      {
+        reg: "RESTSEL1",
+      },
+      {
+        token: "mobile-restore-selected-booking-token",
+      }
+    );
+
+    await waitForOrderBookingPopup(page);
+    await page.getByTestId("pos-mobile-order-booking-use-8402").click();
+
+    await expect
+      .poll(
+        async () => {
+          const snapshot = await getStoredPosSnapshot(page);
+          return {
+            bookingId: snapshot?.metadata?.bookingId ?? null,
+            vehicleBookingId: snapshot?.vehicles?.vehicle_1?.booking_id ?? null,
+          };
+        },
+        { timeout: 10_000 }
+      )
+      .toEqual({
+        bookingId: 8402,
+        vehicleBookingId: 8402,
+      });
+
+    const orderBookingsGetBeforeReload = fixture.requestCounters.orderBookingsGet;
+    await page.reload();
+
+    await expect
+      .poll(() => fixture.requestCounters.orderBookingsGet, { timeout: 10_000 })
+      .toBeGreaterThan(orderBookingsGetBeforeReload);
+    await expect
+      .poll(
+        async () => {
+          const snapshot = await getStoredPosSnapshot(page);
+          return {
+            bookingId: snapshot?.metadata?.bookingId ?? null,
+            vehicleBookingId: snapshot?.vehicles?.vehicle_1?.booking_id ?? null,
+          };
+        },
+        { timeout: 10_000 }
+      )
+      .toEqual({
+        bookingId: 8402,
+        vehicleBookingId: 8402,
+      });
+    await page.waitForTimeout(1_000);
+    await expect(page.getByTestId("pos-mobile-order-booking-popup")).toHaveCount(0);
+  });
+
+  test("reloading after explicitly skipping a booking keeps the skip decision and does not reopen the chooser", async ({
+    page,
+  }) => {
+    const fixture = createMultiBookingFixture({
+      reg: "RESTSKIP",
+      bookings: [
+        buildMobileOrderBooking(8501, {
+          reg_1: "RESTSKIP",
+          datetime: "2026-01-01T07:00:00.000Z",
+          reference: "RESTORE-SKIP-A",
+          reference_number: "RESTORE-SKIP-A",
+        }),
+        buildMobileOrderBooking(8502, {
+          reg_1: "RESTSKIP",
+          datetime: "2026-01-01T09:00:00.000Z",
+          reference: "RESTORE-SKIP-B",
+          reference_number: "RESTORE-SKIP-B",
+        }),
+      ],
+    });
+
+    await openMobileStep1FromStoredSnapshot(
+      page,
+      fixture,
+      {
+        reg: "RESTSKIP",
+      },
+      {
+        token: "mobile-restore-skipped-booking-token",
+      }
+    );
+
+    await waitForOrderBookingPopup(page);
+    await page.getByTestId("pos-mobile-order-booking-skip").click();
+
+    await expect
+      .poll(
+        async () => {
+          const snapshot = await getStoredPosSnapshot(page);
+          return {
+            bookingId: snapshot?.metadata?.bookingId ?? null,
+            skippedPlate: snapshot?.metadata?.bookingSelectionSkippedPlate ?? "",
+          };
+        },
+        { timeout: 10_000 }
+      )
+      .toEqual({
+        bookingId: null,
+        skippedPlate: "RESTSKIP",
+      });
+
+    const orderBookingsGetBeforeReload = fixture.requestCounters.orderBookingsGet;
+    await page.reload();
+
+    await expect
+      .poll(() => fixture.requestCounters.orderBookingsGet, { timeout: 10_000 })
+      .toBeGreaterThan(orderBookingsGetBeforeReload);
+    await expect
+      .poll(
+        async () => {
+          const snapshot = await getStoredPosSnapshot(page);
+          return {
+            bookingId: snapshot?.metadata?.bookingId ?? null,
+            skippedPlate: snapshot?.metadata?.bookingSelectionSkippedPlate ?? "",
+          };
+        },
+        { timeout: 10_000 }
+      )
+      .toEqual({
+        bookingId: null,
+        skippedPlate: "RESTSKIP",
+      });
+    await page.waitForTimeout(1_000);
+    await expect(page.getByTestId("pos-mobile-order-booking-popup")).toHaveCount(0);
+  });
+
   test("required reference prompt retries and creates the order after confirmation", async ({ page }) => {
     const fixture = createMobilePosFixture({
       customerAttributesByNumber: {
@@ -472,12 +1017,12 @@ test.describe("POS mobile order flow", () => {
     expect(fixture.requestCounters.orderGet).toBeGreaterThan(0);
   });
 
-  test("step 2 query bootstrap auto-loads the primary product and persists notes/reference after a typing pause", async ({ page }) => {
+  test("step 2 query bootstrap seeds the vehicle reference and auto-loads the primary product", async ({ page }) => {
     const orderId = 9401;
     const fixture = createMobilePosFixture({
       ordersById: {
         [orderId]: buildRegularOrder(orderId, {
-          reference: "BOOTSTRAP-REF",
+          reference: "",
           reg_1: "AB12345",
         }),
       },
@@ -485,16 +1030,21 @@ test.describe("POS mobile order flow", () => {
         [orderId]: [],
       },
     });
+    const seedState = buildMobilePosState({
+      fixture,
+      customerId: REGULAR_CUSTOMER_ID,
+      reg: "AB12345",
+      reference: "",
+      includePrimaryItem: false,
+      vehicleType: 53,
+      lastOrderId: null,
+    });
+    seedState.metadata.reference = "";
+    seedState.vehicles.vehicle_1.reference = "REF-AB12345";
 
     await setupMobilePosPage(page, fixture, {
       token: "mobile-step2-bootstrap-token",
-      seedState: {
-        customerId: REGULAR_CUSTOMER_ID,
-        reg: "AB12345",
-        reference: "BOOTSTRAP-REF",
-        includePrimaryItem: false,
-        vehicleType: 53,
-      },
+      seedState,
       route: {
         step: 2,
         orderId,
@@ -503,7 +1053,8 @@ test.describe("POS mobile order flow", () => {
     });
 
     await expect(page.getByTestId("pos-mobile-step-2")).toBeVisible({ timeout: 10_000 });
-    await expect(page.getByTestId("pos-mobile-last-order")).toBeVisible({ timeout: 10_000 });
+    await expect(page.getByTestId("pos-mobile-reference-step-2-input")).toHaveValue("REF-AB12345");
+    await expect(page.getByTestId("pos-mobile-vehicle-selection")).toHaveCount(0);
     await expect
       .poll(
         async () => {
@@ -544,6 +1095,94 @@ test.describe("POS mobile order flow", () => {
       .toBe(true);
   });
 
+  test("manual step 2 reference and product changes survive reload without being replaced by vehicle defaults", async ({
+    page,
+  }) => {
+    const orderId = 9404;
+    const fixture = createMobilePosFixture({
+      ordersById: {
+        [orderId]: buildRegularOrder(orderId, {
+          reference: "",
+          reg_1: "AB12345",
+        }),
+      },
+      orderItemsByOrderId: {
+        [orderId]: [],
+      },
+    });
+    const seedState = buildMobilePosState({
+      fixture,
+      customerId: REGULAR_CUSTOMER_ID,
+      reg: "AB12345",
+      reference: "",
+      includePrimaryItem: false,
+      vehicleType: 53,
+      lastOrderId: null,
+    });
+    seedState.metadata.reference = "";
+    seedState.vehicles.vehicle_1.reference = "REF-AB12345";
+
+    await setupMobilePosPage(page, fixture, {
+      token: "mobile-step2-no-overwrite-token",
+      seedState,
+      route: {
+        step: 2,
+        orderId,
+        customerId: REGULAR_CUSTOMER_ID,
+      },
+    });
+
+    await expect(page.getByTestId("pos-mobile-step-2")).toBeVisible({ timeout: 10_000 });
+    await expect(page.getByTestId("pos-mobile-reference-step-2-input")).toHaveValue("REF-AB12345");
+    await expect
+      .poll(
+        async () => {
+          const snapshot = await getStoredPosSnapshot(page);
+          return snapshot?.transactionItems?.primaryItem?.id ?? null;
+        },
+        { timeout: 10_000 }
+      )
+      .toBe(53);
+
+    await page.getByTestId("pos-mobile-reference-step-2-input").fill("MANUAL-STEP2-REF");
+    await expect.poll(() => fixture.ordersById[orderId]?.reference ?? "").toBe("MANUAL-STEP2-REF");
+
+    await openVehicleSelectionFromPrimaryProduct(page);
+    await selectPrimaryProduct(page, 63);
+    await expect
+      .poll(
+        async () => {
+          const snapshot = await getStoredPosSnapshot(page);
+          return snapshot?.transactionItems?.primaryItem?.id ?? null;
+        },
+        { timeout: 10_000 }
+      )
+      .toBe(63);
+
+    await page.evaluate(async () => {
+      const flow = await import(
+        "/src/components/displays/department/pos/steps/mobile/objects/PosDepartmentStepMobileFlow.vue"
+      );
+      const currentVehicle = flow.vehicles.get(1);
+      flow.vehicles.select(1, {
+        ...(currentVehicle ?? {}),
+        type: 53,
+        reference: "REF-AB12345",
+      });
+    });
+
+    await expect(page.getByTestId("pos-mobile-reference-step-2-input")).toHaveValue("MANUAL-STEP2-REF");
+    await expect
+      .poll(
+        async () => {
+          const snapshot = await getStoredPosSnapshot(page);
+          return snapshot?.transactionItems?.primaryItem?.id ?? null;
+        },
+        { timeout: 10_000 }
+      )
+      .toBe(63);
+  });
+
   test("step 2 registration popup flushes edits on close and survives reload", async ({ page }) => {
     const orderId = 9405;
     const fixture = createMobilePosFixture({
@@ -587,9 +1226,7 @@ test.describe("POS mobile order flow", () => {
     await expect
       .poll(
         () =>
-          fixture.requestLog.orderUpdates.some(
-            (entry) => Number(entry?.id) === orderId && entry?.reg_1 === "CD-12 34"
-          ),
+          fixture.requestLog.orderUpdates.some((entry) => Number(entry?.id) === orderId && entry?.reg_1 === "CD-12 34"),
         { timeout: 10_000 }
       )
       .toBe(true);
@@ -811,6 +1448,7 @@ test.describe("POS mobile order flow", () => {
       addonProductIds: [71],
     });
 
+    await expect(page.getByTestId("pos-mobile-reference-step-2-input")).toHaveValue("BOOKING-REF-8101");
     await expect.poll(() => fixture.ordersById[orderId]?.reference ?? "").toBe("BOOKING-REF-8101");
     await expect.poll(() => fixture.ordersById[orderId]?.notes ?? "").toBe("Booking notes from planner");
     await expect.poll(() => fixture.ordersById[orderId]?.po ?? "").toBe("PO-8101");
diff --git a/tests/e2e/pos.visual.spec.js b/tests/e2e/pos.visual.spec.js
index 695945ad..c59a6d89 100644
--- a/tests/e2e/pos.visual.spec.js
+++ b/tests/e2e/pos.visual.spec.js
@@ -203,6 +203,35 @@ function getVisibleTestId(page, testId) {
   return page.locator(`[data-testid="${testId}"]:visible`).first();
 }
 
+function createRequiredWarningsPosFixture() {
+  const customerNumber = 12345679;
+  const baseFixture = createPosFixture();
+
+  return createPosFixture({
+    customerAttributesByNumber: {
+      [customerNumber]: [
+        {
+          id: 11,
+          customer_number: customerNumber,
+          attribute: "requiresReferenceNumber",
+        },
+        {
+          id: 12,
+          customer_number: customerNumber,
+          attribute: "usePONumbers",
+        },
+      ],
+    },
+    ordersById: {
+      54518: {
+        ...baseFixture.ordersById[54518],
+        reference: "",
+        po: "",
+      },
+    },
+  });
+}
+
 test.describe("POS visuals", () => {
   test("desktop step 1 snapshot", async ({ page }, testInfo) => {
     test.skip(!testInfo.project.name.includes("desktop"), "Desktop only");
@@ -366,6 +395,35 @@ test.describe("POS visuals", () => {
     });
   });
 
+  test("desktop order detail required warnings snapshot", async ({ page }, testInfo) => {
+    test.skip(!testInfo.project.name.includes("desktop"), "Desktop only");
+
+    await mockApi(page, {
+      authenticated: true,
+      permissions: POS_PERMISSIONS,
+      edgeGateways: false,
+      pos: createRequiredWarningsPosFixture(),
+    });
+    await primeSession(page, "pos-visual-desktop-required-warnings-token");
+
+    await page.goto("/admin/12/modules/pos/orders/54518");
+    await expect(page.getByTestId("pos-order-detail")).toBeVisible();
+    await expect(page.getByTestId("pos-order-customer-wishes-reference-control")).toHaveAttribute(
+      "data-warning-state",
+      "danger"
+    );
+    await expect(page.getByTestId("pos-order-customer-wishes-po-control")).toHaveAttribute(
+      "data-warning-state",
+      "warning"
+    );
+    await expect(page.getByTestId("pos-order-detail")).toHaveScreenshot(
+      "pos-order-detail-desktop-required-warnings.png",
+      {
+        maxDiffPixels: 300,
+      }
+    );
+  });
+
   test("desktop step 2 shared workspace snapshot", async ({ page }, testInfo) => {
     test.skip(!testInfo.project.name.includes("desktop"), "Desktop only");
 
@@ -408,12 +466,21 @@ test.describe("POS visuals", () => {
     });
     await primeSession(page, "pos-visual-desktop-step-3-token");
 
+    const customerResponse = page.waitForResponse((response) => {
+      return (
+        response.request().method() === "GET" && response.url().includes("/users/customer?customer_number=12345679")
+      );
+    });
     await page.goto("/admin/12/modules/pos?id=54518&customer_id=12345679&step=3");
+    await customerResponse;
     const stepThree = page.getByTestId("pos-step-3");
     await expect(stepThree).toBeVisible();
     await expect(stepThree.getByTestId("pos-order-panel-cart")).toBeVisible();
     await expect(stepThree.getByTestId("pos-order-metadata-grid")).toBeVisible();
     await expect(stepThree.getByTestId("pos-order-rail")).toBeVisible();
+    await expect(stepThree).toContainText("Tilføj flere varer");
+    await expect(stepThree.getByRole("button", { name: /Slet alle/i })).toBeVisible();
+    await expect(stepThree.getByRole("button", { name: /Fuldfør/i })).toBeVisible();
     await expect(stepThree).toHaveScreenshot("pos-step-3-desktop.png", {
       maxDiffPixels: 300,
     });
@@ -430,12 +497,21 @@ test.describe("POS visuals", () => {
     });
     await primeSession(page, "pos-visual-desktop-step-4-token");
 
+    const customerResponse = page.waitForResponse((response) => {
+      return (
+        response.request().method() === "GET" && response.url().includes("/users/customer?customer_number=12345679")
+      );
+    });
     await page.goto("/admin/12/modules/pos?id=54518&customer_id=12345679&step=4");
+    await customerResponse;
     const stepFour = page.getByTestId("pos-step-4");
     await expect(stepFour).toBeVisible();
     await expect(stepFour.getByTestId("pos-order-panel-cart")).toBeVisible();
     await expect(stepFour.getByTestId("pos-order-metadata-grid")).toBeVisible();
     await expect(stepFour.getByTestId("pos-order-rail")).toBeVisible();
+    await expect(stepFour).toContainText("Tilføj flere varer");
+    await expect(stepFour.getByRole("button", { name: /Slet alle/i })).toBeVisible();
+    await expect(stepFour.getByRole("button", { name: /Fuldfør/i })).toBeVisible();
     await expect(stepFour).toHaveScreenshot("pos-step-4-desktop.png", {
       maxDiffPixels: 300,
     });
diff --git a/tests/e2e/pos.visual.spec.js-snapshots/pos-step-1-customer-desktop-chromium-desktop-win32.png b/tests/e2e/pos.visual.spec.js-snapshots/pos-step-1-customer-desktop-chromium-desktop-win32.png
index e65f9409..701f435c 100644
Binary files a/tests/e2e/pos.visual.spec.js-snapshots/pos-step-1-customer-desktop-chromium-desktop-win32.png and b/tests/e2e/pos.visual.spec.js-snapshots/pos-step-1-customer-desktop-chromium-desktop-win32.png differ
diff --git a/tests/e2e/pos.visual.spec.js-snapshots/pos-step-1-desktop-expanded-scan-chromium-desktop-win32.png b/tests/e2e/pos.visual.spec.js-snapshots/pos-step-1-desktop-expanded-scan-chromium-desktop-win32.png
index b37d5d97..22c75fde 100644
Binary files a/tests/e2e/pos.visual.spec.js-snapshots/pos-step-1-desktop-expanded-scan-chromium-desktop-win32.png and b/tests/e2e/pos.visual.spec.js-snapshots/pos-step-1-desktop-expanded-scan-chromium-desktop-win32.png differ
diff --git a/tests/e2e/pos.visual.spec.js-snapshots/pos-step-3-desktop-chromium-desktop-win32.png b/tests/e2e/pos.visual.spec.js-snapshots/pos-step-3-desktop-chromium-desktop-win32.png
index 8d9090ba..43841c79 100644
Binary files a/tests/e2e/pos.visual.spec.js-snapshots/pos-step-3-desktop-chromium-desktop-win32.png and b/tests/e2e/pos.visual.spec.js-snapshots/pos-step-3-desktop-chromium-desktop-win32.png differ
diff --git a/tests/e2e/release/release.local-prod.spec.ts b/tests/e2e/release/release.local-prod.spec.ts
index 0794b102..2989c975 100644
--- a/tests/e2e/release/release.local-prod.spec.ts
+++ b/tests/e2e/release/release.local-prod.spec.ts
@@ -15,6 +15,14 @@ const POS_PERMISSIONS = [
   "get_custom_prices_other",
 ];
 
+function toLoopbackRequestUrl(url: string) {
+  const normalized = new URL(url);
+  if (normalized.hostname === "localhost") {
+    normalized.hostname = "127.0.0.1";
+  }
+  return normalized.toString();
+}
+
 async function gotoHealthyRoute(page, path: string) {
   await page.goto(path);
   await settlePage(page);
@@ -94,7 +102,9 @@ test.describe("Local production release gate", () => {
 
       const manifestHref = await page.locator('link[rel="manifest"]').first().getAttribute("href");
       expect(manifestHref).toBeTruthy();
-      const manifestResponse = await page.request.get(new URL(manifestHref!, LOCAL_PROD_BASE_URL).toString());
+      const manifestResponse = await page.request.get(
+        toLoopbackRequestUrl(new URL(manifestHref!, LOCAL_PROD_BASE_URL).toString())
+      );
       expect(manifestResponse.ok()).toBeTruthy();
 
       await page.reload();
diff --git a/tests/e2e/self-serve-wash.spec.js b/tests/e2e/self-serve-wash.spec.js
index f5c621e0..854aa2e8 100644
--- a/tests/e2e/self-serve-wash.spec.js
+++ b/tests/e2e/self-serve-wash.spec.js
@@ -414,7 +414,10 @@ test.describe("Self-serve wash", () => {
     await expect(page.getByTestId("self-serve-question-11")).toBeVisible();
     await page.getByTestId("self-serve-question-11-yes").click();
 
-    await expect(page.getByText("Prepare the truck")).toBeVisible();
-    await expect(page.getByText("QUESTION_ANSWERED")).toBeVisible({ timeout: 10_000 });
+    await expect(page.getByText("Ingen aktive tasks.")).toBeVisible();
+    await expect(page.getByText("Ingen session-events endnu.")).toBeVisible();
+    const answeredQuestion = page.locator("li", { hasText: "Is the tarp removed?:" }).last();
+    await expect(answeredQuestion).toBeVisible();
+    await expect(answeredQuestion.locator("strong")).toHaveText("Ja");
   });
 });
diff --git a/tests/e2e/subuserProfileInformation.spec.ts b/tests/e2e/subuserProfileInformation.spec.ts
index e028277a..b20d1658 100644
--- a/tests/e2e/subuserProfileInformation.spec.ts
+++ b/tests/e2e/subuserProfileInformation.spec.ts
@@ -3,8 +3,8 @@ import { userCredentials, loginAsSubuserByPhone } from "./fixtures";
 
 // Navigate to profile page helper
 async function goToUserProfile(page) {
-  await page.click('a[href="/user/profile"]');
-  await expect(page).toHaveURL("/user/profile");
+  await page.goto("/user/profile");
+  await expect(page).toHaveURL(/\/user\/profile(?:[?#].*)?$/);
 }
 
 // Helper to expand a category section by clicking its header
diff --git a/tests/e2e/support/mobilePos.js b/tests/e2e/support/mobilePos.js
index 41387b8d..6443115c 100644
--- a/tests/e2e/support/mobilePos.js
+++ b/tests/e2e/support/mobilePos.js
@@ -693,6 +693,9 @@ export function buildMobilePosState(options = {}) {
         status: options.vehicleStatus ?? (bookingId ? "booked" : "verified"),
         barred: false,
         booking_id: bookingId,
+        booking_matches: Object.prototype.hasOwnProperty.call(options, "bookingMatches")
+          ? clone(options.bookingMatches)
+          : [],
         addons: [],
         reference,
         last_order_id: Object.prototype.hasOwnProperty.call(options, "lastOrderId")
@@ -728,6 +731,7 @@ export function buildMobilePosState(options = {}) {
       reference,
       washId: options.washId ?? null,
       bookingId,
+      bookingSelectionSkippedPlate: options.bookingSelectionSkippedPlate ?? "",
       laneId: options.laneId ?? null,
     },
     attachments: {
diff --git a/tests/e2e/support/network.js b/tests/e2e/support/network.js
index 4220be5c..56f53039 100644
--- a/tests/e2e/support/network.js
+++ b/tests/e2e/support/network.js
@@ -912,6 +912,8 @@ export function createPosFixture(overrides = {}) {
     ],
     unknownVehicles: [],
     orderBookings: [],
+    bookingOrderAssignments: [],
+    completedBookingIds: [],
     nextOrderBookingId: 9001,
     numberPlateScanners: [
       { id: 1, name: "North scanner" },
@@ -1248,6 +1250,30 @@ async function handlePosRoute({ route, request, parsedUrl, pathname, method, pos
     return true;
   }
 
+  if (pathname.endsWith("/order-bookings") && method === "PUT") {
+    const body = request.postDataJSON?.() || {};
+    const bookingId = Number(body.id || 0);
+    const bookings = Array.isArray(posFixture.orderBookings) ? posFixture.orderBookings : [];
+    const bookingIndex = bookings.findIndex((booking) => Number(booking.id) === bookingId);
+
+    if (bookingIndex >= 0) {
+      bookings[bookingIndex] = {
+        ...bookings[bookingIndex],
+        order_id: body.order_id ?? body.value ?? null,
+      };
+      posFixture.bookingOrderAssignments = Array.isArray(posFixture.bookingOrderAssignments)
+        ? posFixture.bookingOrderAssignments
+        : [];
+      posFixture.bookingOrderAssignments.push({
+        id: bookingId,
+        order_id: bookings[bookingIndex].order_id,
+      });
+    }
+
+    await route.fulfill(json({ success: true, data: bookingIndex >= 0 ? bookings[bookingIndex] : null }));
+    return true;
+  }
+
   if (/\/order-bookings\/\d+$/.test(pathname) && method === "GET") {
     const bookingId = Number(pathname.split("/").pop());
     const booking = (posFixture.orderBookings || []).find((entry) => entry.id === bookingId) || null;
@@ -1255,6 +1281,32 @@ async function handlePosRoute({ route, request, parsedUrl, pathname, method, pos
     return true;
   }
 
+  if (pathname.endsWith("/order-bookings/complete") && method === "POST") {
+    const body = request.postDataJSON?.() || {};
+    const bookingId = Number(body.id || 0);
+    const bookings = Array.isArray(posFixture.orderBookings) ? posFixture.orderBookings : [];
+    const bookingIndex = bookings.findIndex((booking) => Number(booking.id) === bookingId);
+
+    if (bookingIndex >= 0) {
+      bookings[bookingIndex] = {
+        ...bookings[bookingIndex],
+        status: "completed",
+      };
+      posFixture.completedBookingIds = Array.isArray(posFixture.completedBookingIds)
+        ? posFixture.completedBookingIds
+        : [];
+      posFixture.completedBookingIds.push(bookingId);
+    }
+
+    await route.fulfill(
+      json({
+        success: true,
+        data: bookingIndex >= 0 ? bookings[bookingIndex] : { id: bookingId, status: "completed" },
+      })
+    );
+    return true;
+  }
+
   if (pathname.endsWith("/department/numberplatescanners") && method === "GET") {
     await route.fulfill(json({ success: true, data: posFixture.numberPlateScanners || [] }));
     return true;
diff --git a/tests/e2e/userAuth.spec.ts b/tests/e2e/userAuth.spec.ts
index 8966ced6..9f1583cc 100644
--- a/tests/e2e/userAuth.spec.ts
+++ b/tests/e2e/userAuth.spec.ts
@@ -7,6 +7,7 @@ const INVALID_RESET_TOKEN = "Invalid or expired token";
 const USER_TOKEN = "mock-user-session-token";
 const SUBUSER_TOKEN = "mock-subuser-session-token";
 const OPERATOR_TOKEN = "mock-operator-session-token";
+const AUTH_FORM_TIMEOUT = 15_000;
 
 function json(route, body, status = 200) {
   return route.fulfill({
@@ -71,6 +72,30 @@ async function settleAuthenticatedNavigation(page, token, targetPath, targetUrl)
   await expect.poll(() => page.url(), { timeout: 15_000 }).toMatch(targetUrl);
 }
 
+async function openAuthPage(page, path, selector) {
+  const field = page.locator(selector);
+  await page.goto(path);
+
+  for (let attempt = 0; attempt < 2; attempt++) {
+    if (await field.isVisible().catch(() => false)) {
+      return field;
+    }
+
+    if (attempt === 0) {
+      try {
+        await page.goto(path, { waitUntil: "domcontentloaded" });
+      } catch (error) {
+        if (!isBenignNavigationError(error)) {
+          throw error;
+        }
+      }
+    }
+  }
+
+  await expect(field).toBeVisible({ timeout: AUTH_FORM_TIMEOUT });
+  return field;
+}
+
 async function installSessionRoute(page, { token, sessionData }) {
   await page.route("**/auth/session", async (route) => {
     const authorization = route.request().headers().authorization;
@@ -194,7 +219,7 @@ async function loginAsMockUser(page) {
   await installSessionRoute(page, { token: USER_TOKEN, sessionData: { permissions: ["user"] } });
   await installUserLoginRoute(page);
 
-  await page.goto("/login");
+  await openAuthPage(page, "/login", 'input[name="customer_number"]');
   await page.fill('input[name="customer_number"]', "12345679");
   await page.fill('input[name="password"]', "5679");
   await page.click('#login-button');
@@ -214,7 +239,7 @@ async function loginAsMockSubuserByPhone(page) {
   });
   await installSubuserLoginRoute(page);
 
-  await page.goto("/login/driver");
+  await openAuthPage(page, "/login/driver", 'input[name="phone_country_code"]');
   await page.fill('input[name="phone_country_code"]', "45");
   await page.fill('input[name="phone"]', "42331128");
   await page.fill('input[name="password"]', "Test1234");
@@ -235,8 +260,9 @@ async function loginAsMockSubuserByUsername(page) {
   });
   await installSubuserLoginRoute(page);
 
-  await page.goto("/login/driver");
+  await openAuthPage(page, "/login/driver", 'button[id="subuser_login_method_username_button"]');
   await page.click('#subuser_login_method_username_button');
+  await expect(page.locator('input[name="username"]')).toBeVisible({ timeout: AUTH_FORM_TIMEOUT });
   await page.fill('input[name="username"]', "testsubuser");
   await page.fill('input[name="password"]', "Test1234");
   await page.click('#subuser-login-button');
@@ -254,7 +280,7 @@ async function loginAsMockOperator(page) {
   });
   await installOperatorLoginRoute(page);
 
-  await page.goto("/admin/login");
+  await openAuthPage(page, "/admin/login", 'input[name="user_id"]');
   await page.fill('input[name="user_id"]', "11");
   await page.fill('input[name="password"]', "aef18KHAPGiu90");
   await page.click('#operator_login_button');
@@ -269,7 +295,7 @@ test("[AUTH][User][Customer number] should fail to login using invalid password"
   await preparePublicAuthFlow(page);
   await installUserLoginRoute(page, { outcome: "error" });
 
-  await page.goto("/login");
+  await openAuthPage(page, "/login", 'input[name="customer_number"]');
   await page.fill('input[name="customer_number"]', "12345679");
   await page.fill('input[name="password"]', "invalidpassword");
   await page.click('#login-button');
@@ -280,7 +306,7 @@ test("[AUTH][User][Customer number] should fail to login using invalid customer
   await preparePublicAuthFlow(page);
   await installUserLoginRoute(page, { outcome: "error" });
 
-  await page.goto("/login");
+  await openAuthPage(page, "/login", 'input[name="customer_number"]');
   await page.fill('input[name="customer_number"]', "99999999999");
   await page.fill('input[name="password"]', "5679");
   await page.click('#login-button');
@@ -291,7 +317,7 @@ test("[AUTH][User][Customer number] should request password reset successfully",
   await preparePublicAuthFlow(page);
   await installPasswordResetRequestRoute(page);
 
-  await page.goto("/login");
+  await openAuthPage(page, "/login", 'input[name="customer_number"]');
   await page.click("#forgot-password-button");
   await expect(page).toHaveURL("/auth/password-reset");
   await page.fill('input[name="customer_number"]', "12345679");
@@ -303,7 +329,7 @@ test("[AUTH][User][Customer number] should not show failure to request password
   await preparePublicAuthFlow(page);
   await installPasswordResetRequestRoute(page);
 
-  await page.goto("/login");
+  await openAuthPage(page, "/login", 'input[name="customer_number"]');
   await page.click("#forgot-password-button");
   await expect(page).toHaveURL("/auth/password-reset");
   await page.fill('input[name="customer_number"]', "99999999999");