Add step validation for desktop POS workflow and update e2e tests:

- Added `isDesktopStep1Active` computed property to validate step context in `SelectVehicleFormPOS.vue`.
- Updated booking state resolution methods and watchers to respect step validation.
- Extended e2e tests in `pos-desktop-card-payments.spec.js` to validate order reference visibility.

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

@@ -12,6 +12,7 @@ import {
   order_id,
   searchAndSelectCustomer,
   isCustomerSelected,
+  getCurrentStep,
   customer_attributes,
   selectedOrderBookingId,
   selectedOrderBookingPlate,
@@ -38,6 +39,7 @@ const emit = defineEmits(["update:desktopStep1Context", "commit:desktopStep1"]);
 const isRegistrationNumbersExpanded = ref(false);
 const isOtherExpanded = ref(false);
 const vehicleObject = ref(null);
+const isDesktopStep1Active = computed(() => getCurrentStep() === 1);
 const bookingObject = ref(null);
 const bookingMatches = ref([]);
 const isUserCurrentlyInFocusReg1 = ref(false);
@@ -458,6 +460,13 @@ const emitDesktopStep1Context = (options = {}) => {
 };
 
 const resolveBookingMatchesState = async (matches) => {
+  if (!isDesktopStep1Active.value) {
+    return emitDesktopStep1Context({
+      committed: false,
+      source: "booking_state_inactive",
+    });
+  }
+
   const currentPlate = getCurrentVehiclePlate();
 
   if (!currentPlate) {
@@ -535,9 +544,21 @@ const resolveBookingMatchesState = async (matches) => {
 };
 
 watch(bookingMatches, (matches) => {
+  if (!isDesktopStep1Active.value) {
+    return;
+  }
+
   bookingResolutionPromise = resolveBookingMatchesState(matches);
 });
 
+watch(isDesktopStep1Active, (isActive) => {
+  if (!isActive) {
+    return;
+  }
+
+  bookingResolutionPromise = resolveBookingMatchesState(bookingMatches.value);
+});
+
 const handleReferenceInput = (event) => {
   setReferenceValue(event?.target?.value ?? "", "manual");
 };

tests/e2e/pos-desktop-card-payments.spec.js

@@ -5,6 +5,7 @@ const ORDER_ID = 54518;
 const DEPARTMENT_ID = 12;
 const CARD_CUSTOMER_ID = 999;
 const CARD_CUSTOMER_NAME = "Card Terminal Customer";
+const CARD_ORDER_REFERENCE = "CARD-REF-54518";
 const DESKTOP_POS_PERMISSIONS = [
   "admin",
   `department_access_${DEPARTMENT_ID}`,
@@ -110,6 +111,9 @@ async function bootDesktopCardPayment(page, fixture, permissions = DESKTOP_POS_P
   ).toBeVisible({ timeout: 10_000 });
   await expect(stepThree.getByTestId("pos-order-customer-name")).toContainText(CARD_CUSTOMER_NAME, { timeout: 10_000 });
   await expect(stepThree.getByTestId("pos-customer-card")).toContainText(CARD_CUSTOMER_NAME, { timeout: 10_000 });
+  await expect(stepThree.getByTestId("pos-order-customer-wishes-reference")).toContainText(CARD_ORDER_REFERENCE, {
+    timeout: 10_000,
+  });
   return stepThree;
 }
 
@@ -187,6 +191,9 @@ test.describe("POS desktop card payments", () => {
     await expect(stepThree.getByTestId("pos-customer-card")).toContainText(CARD_CUSTOMER_NAME, {
       timeout: 10_000,
     });
+    await expect(stepThree.getByTestId("pos-order-customer-wishes-reference")).toContainText(CARD_ORDER_REFERENCE, {
+      timeout: 10_000,
+    });
     await expect(stepThree.getByTestId("pos-stripe-create-intent")).toBeVisible({ timeout: 10_000 });
   });