From abc033bb0593450eed7add1f35483a7bd535d1a6 Mon Sep 17 00:00:00 2001
From: Jeppe Bundgaard <jb@truckwash.dk>
Date: Tue, 17 Mar 2026 16:49:36 +0100
Subject: [PATCH] Remove `self-serve-logic.spec.js` and related integration
 tests.

- Delete outdated tests for `useSelfServeLogic` composable, step navigation, and validation related to the Self-Serve module.
- These tests have been deprecated in favor of newer, streamlined testing strategies and refactored logic.
---
 package-lock.json                             | 1062 ++++++++
 package.json                                  |    4 +-
 .../department/tables/SelfServeTryModal.vue   |   92 +-
 .../selfServe/SelfServeCompletedStep.vue      |   22 +
 .../selfServe/SelfServeDepartmentHeader.vue   |  102 +
 .../selfServe/SelfServeGuidedInstructions.vue |   85 +
 .../displays/selfServe/SelfServeLaneStep.vue  |  110 +
 .../selfServe/SelfServeQuestionCards.vue      |   46 +
 .../selfServe/SelfServeQuestionsStep.vue      |  141 ++
 .../displays/selfServe/SelfServeTaskList.vue  |   85 +
 .../displays/selfServe/SelfServeTasksStep.vue |   64 +
 .../selfServe/SelfServeVehicleStep.vue        |   95 +
 .../SelfServeVehicleTypeSelector.vue          |  185 ++
 src/composables/useSelfServeLogic.js          |  117 +-
 src/composables/useWashDepartments.js         |  224 ++
 src/composables/useWashFlowState.js           |  162 ++
 src/composables/useWashProgress.js            |  230 ++
 src/composables/useWashSessionActions.js      |  184 ++
 src/constants/guidedWashFlowSteps.js          |   82 +
 .../DepartmentSelfServeConditions.vue         |    4 +-
 .../DepartmentSelfServeQuestions.vue          |  131 +-
 .../self-serve/DepartmentSelfServeTasks.vue   |    4 +-
 .../modules/wash-lanes/DepartmentWashLane.vue |    9 +-
 .../dashboards/userDashboard/wash/MyWash.vue  |  135 +-
 .../userDashboard/wash/MyWashStart.vue        | 2174 +++++------------
 .../wash/displays/MyWashCompletedStep.vue     |   17 +-
 .../displays/MyWashStartDepartmentHeader.vue  |   75 +-
 .../MyWashStartVehicleTypeSelection.vue       |  172 +-
 test/specs/self-serve-logic.spec.js           |  923 -------
 tests/e2e/self-serve-wash.spec.js             |  347 +++
 tests/e2e/support/network.js                  |  370 +++
 tests/unit/helpers/mountWithApp.js            |   69 +
 tests/unit/my-wash-start.spec.js              |  356 +++
 tests/unit/self-serve-alignment.spec.js       |    4 +-
 .../self-serve-guided-and-completed.spec.js   |   54 +
 tests/unit/self-serve-questions-step.spec.js  |   56 +
 tests/unit/self-serve-task-list.spec.js       |   59 +
 .../unit/self-serve-vehicle-selector.spec.js  |   88 +
 tests/unit/setup.js                           |   19 +
 tests/unit/use-self-serve-logic.spec.js       |  181 ++
 tests/unit/use-wash-departments.spec.js       |  108 +
 tests/unit/use-wash-flow-state.spec.js        |   79 +
 42 files changed, 5587 insertions(+), 2939 deletions(-)
 create mode 100644 src/components/displays/selfServe/SelfServeCompletedStep.vue
 create mode 100644 src/components/displays/selfServe/SelfServeDepartmentHeader.vue
 create mode 100644 src/components/displays/selfServe/SelfServeGuidedInstructions.vue
 create mode 100644 src/components/displays/selfServe/SelfServeLaneStep.vue
 create mode 100644 src/components/displays/selfServe/SelfServeQuestionCards.vue
 create mode 100644 src/components/displays/selfServe/SelfServeQuestionsStep.vue
 create mode 100644 src/components/displays/selfServe/SelfServeTaskList.vue
 create mode 100644 src/components/displays/selfServe/SelfServeTasksStep.vue
 create mode 100644 src/components/displays/selfServe/SelfServeVehicleStep.vue
 create mode 100644 src/components/displays/selfServe/SelfServeVehicleTypeSelector.vue
 create mode 100644 src/composables/useWashDepartments.js
 create mode 100644 src/composables/useWashFlowState.js
 create mode 100644 src/composables/useWashProgress.js
 create mode 100644 src/composables/useWashSessionActions.js
 create mode 100644 src/constants/guidedWashFlowSteps.js
 delete mode 100644 test/specs/self-serve-logic.spec.js
 create mode 100644 tests/e2e/self-serve-wash.spec.js
 create mode 100644 tests/unit/helpers/mountWithApp.js
 create mode 100644 tests/unit/my-wash-start.spec.js
 create mode 100644 tests/unit/self-serve-guided-and-completed.spec.js
 create mode 100644 tests/unit/self-serve-questions-step.spec.js
 create mode 100644 tests/unit/self-serve-task-list.spec.js
 create mode 100644 tests/unit/self-serve-vehicle-selector.spec.js
 create mode 100644 tests/unit/use-self-serve-logic.spec.js
 create mode 100644 tests/unit/use-wash-departments.spec.js
 create mode 100644 tests/unit/use-wash-flow-state.spec.js

diff --git a/package-lock.json b/package-lock.json
index 9c0e29ba..b79b29a3 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -62,6 +62,8 @@
         "@types/event-calendar__core": "^3.7.0",
         "@vitejs/plugin-vue": "^5.1.4",
         "@vitejs/plugin-vue-jsx": "^4.1.2",
+        "@vue/test-utils": "^2.4.6",
+        "jsdom": "^29.0.0",
         "sass-embedded": "^1.81.0",
         "vite": "7.1.11",
         "vite-plugin-pwa": "^1.0.2",
@@ -109,6 +111,88 @@
         "ajv": ">=8"
       }
     },
+    "node_modules/@asamuzakjp/css-color": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/@asamuzakjp/css-color/-/css-color-5.0.1.tgz",
+      "integrity": "sha512-2SZFvqMyvboVV1d15lMf7XiI3m7SDqXUuKaTymJYLN6dSGadqp+fVojqJlVoMlbZnlTmu3S0TLwLTJpvBMO1Aw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@csstools/css-calc": "^3.1.1",
+        "@csstools/css-color-parser": "^4.0.2",
+        "@csstools/css-parser-algorithms": "^4.0.0",
+        "@csstools/css-tokenizer": "^4.0.0",
+        "lru-cache": "^11.2.6"
+      },
+      "engines": {
+        "node": "^20.19.0 || ^22.12.0 || >=24.0.0"
+      }
+    },
+    "node_modules/@asamuzakjp/css-color/node_modules/lru-cache": {
+      "version": "11.2.7",
+      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-11.2.7.tgz",
+      "integrity": "sha512-aY/R+aEsRelme17KGQa/1ZSIpLpNYYrhcrepKTZgE+W3WM16YMCaPwOHLHsmopZHELU0Ojin1lPVxKR0MihncA==",
+      "dev": true,
+      "license": "BlueOak-1.0.0",
+      "engines": {
+        "node": "20 || >=22"
+      }
+    },
+    "node_modules/@asamuzakjp/dom-selector": {
+      "version": "7.0.3",
+      "resolved": "https://registry.npmjs.org/@asamuzakjp/dom-selector/-/dom-selector-7.0.3.tgz",
+      "integrity": "sha512-Q6mU0Z6bfj6YvnX2k9n0JxiIwrCFN59x/nWmYQnAqP000ruX/yV+5bp/GRcF5T8ncvfwJQ7fgfP74DlpKExILA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@asamuzakjp/nwsapi": "^2.3.9",
+        "bidi-js": "^1.0.3",
+        "css-tree": "^3.2.1",
+        "is-potential-custom-element-name": "^1.0.1",
+        "lru-cache": "^11.2.7"
+      },
+      "engines": {
+        "node": "^20.19.0 || ^22.12.0 || >=24.0.0"
+      }
+    },
+    "node_modules/@asamuzakjp/dom-selector/node_modules/css-tree": {
+      "version": "3.2.1",
+      "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-3.2.1.tgz",
+      "integrity": "sha512-X7sjQzceUhu1u7Y/ylrRZFU2FS6LRiFVp6rKLPg23y3x3c3DOKAwuXGDp+PAGjh6CSnCjYeAul8pcT8bAl+lSA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "mdn-data": "2.27.1",
+        "source-map-js": "^1.2.1"
+      },
+      "engines": {
+        "node": "^10 || ^12.20.0 || ^14.13.0 || >=15.0.0"
+      }
+    },
+    "node_modules/@asamuzakjp/dom-selector/node_modules/lru-cache": {
+      "version": "11.2.7",
+      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-11.2.7.tgz",
+      "integrity": "sha512-aY/R+aEsRelme17KGQa/1ZSIpLpNYYrhcrepKTZgE+W3WM16YMCaPwOHLHsmopZHELU0Ojin1lPVxKR0MihncA==",
+      "dev": true,
+      "license": "BlueOak-1.0.0",
+      "engines": {
+        "node": "20 || >=22"
+      }
+    },
+    "node_modules/@asamuzakjp/dom-selector/node_modules/mdn-data": {
+      "version": "2.27.1",
+      "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.27.1.tgz",
+      "integrity": "sha512-9Yubnt3e8A0OKwxYSXyhLymGW4sCufcLG6VdiDdUGVkPhpqLxlvP5vl1983gQjJl3tqbrM731mjaZaP68AgosQ==",
+      "dev": true,
+      "license": "CC0-1.0"
+    },
+    "node_modules/@asamuzakjp/nwsapi": {
+      "version": "2.3.9",
+      "resolved": "https://registry.npmjs.org/@asamuzakjp/nwsapi/-/nwsapi-2.3.9.tgz",
+      "integrity": "sha512-n8GuYSrI9bF7FFZ/SjhwevlHc8xaVlb/7HmHelnc/PZXBD2ZR49NnN9sMMuDdEGPeeRQ5d0hqlSlEpgCX3Wl0Q==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/@azure/msal-browser": {
       "version": "4.12.0",
       "resolved": "https://registry.npmjs.org/@azure/msal-browser/-/msal-browser-4.12.0.tgz",
@@ -1568,6 +1652,40 @@
         "node": ">=6.9.0"
       }
     },
+    "node_modules/@bramus/specificity": {
+      "version": "2.4.2",
+      "resolved": "https://registry.npmjs.org/@bramus/specificity/-/specificity-2.4.2.tgz",
+      "integrity": "sha512-ctxtJ/eA+t+6q2++vj5j7FYX3nRu311q1wfYH3xjlLOsczhlhxAg2FWNUXhpGvAw3BWo1xBcvOV6/YLc2r5FJw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "css-tree": "^3.0.0"
+      },
+      "bin": {
+        "specificity": "bin/cli.js"
+      }
+    },
+    "node_modules/@bramus/specificity/node_modules/css-tree": {
+      "version": "3.2.1",
+      "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-3.2.1.tgz",
+      "integrity": "sha512-X7sjQzceUhu1u7Y/ylrRZFU2FS6LRiFVp6rKLPg23y3x3c3DOKAwuXGDp+PAGjh6CSnCjYeAul8pcT8bAl+lSA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "mdn-data": "2.27.1",
+        "source-map-js": "^1.2.1"
+      },
+      "engines": {
+        "node": "^10 || ^12.20.0 || ^14.13.0 || >=15.0.0"
+      }
+    },
+    "node_modules/@bramus/specificity/node_modules/mdn-data": {
+      "version": "2.27.1",
+      "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.27.1.tgz",
+      "integrity": "sha512-9Yubnt3e8A0OKwxYSXyhLymGW4sCufcLG6VdiDdUGVkPhpqLxlvP5vl1983gQjJl3tqbrM731mjaZaP68AgosQ==",
+      "dev": true,
+      "license": "CC0-1.0"
+    },
     "node_modules/@bubblewrap/cli": {
       "version": "1.23.0",
       "resolved": "https://registry.npmjs.org/@bubblewrap/cli/-/cli-1.23.0.tgz",
@@ -1731,6 +1849,146 @@
       "integrity": "sha512-Lx5MlUhgAnTF+wNZ5LXcaE1K0F2m0Pkwte1p08FBsIyRV6Oq7BuKPk/O9XJPcF+vR6BjCxNy/hjYFXtNmoXbNg==",
       "dev": true
     },
+    "node_modules/@csstools/color-helpers": {
+      "version": "6.0.2",
+      "resolved": "https://registry.npmjs.org/@csstools/color-helpers/-/color-helpers-6.0.2.tgz",
+      "integrity": "sha512-LMGQLS9EuADloEFkcTBR3BwV/CGHV7zyDxVRtVDTwdI2Ca4it0CCVTT9wCkxSgokjE5Ho41hEPgb8OEUwoXr6Q==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/csstools"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/csstools"
+        }
+      ],
+      "license": "MIT-0",
+      "engines": {
+        "node": ">=20.19.0"
+      }
+    },
+    "node_modules/@csstools/css-calc": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/@csstools/css-calc/-/css-calc-3.1.1.tgz",
+      "integrity": "sha512-HJ26Z/vmsZQqs/o3a6bgKslXGFAungXGbinULZO3eMsOyNJHeBBZfup5FiZInOghgoM4Hwnmw+OgbJCNg1wwUQ==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/csstools"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/csstools"
+        }
+      ],
+      "license": "MIT",
+      "engines": {
+        "node": ">=20.19.0"
+      },
+      "peerDependencies": {
+        "@csstools/css-parser-algorithms": "^4.0.0",
+        "@csstools/css-tokenizer": "^4.0.0"
+      }
+    },
+    "node_modules/@csstools/css-color-parser": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/@csstools/css-color-parser/-/css-color-parser-4.0.2.tgz",
+      "integrity": "sha512-0GEfbBLmTFf0dJlpsNU7zwxRIH0/BGEMuXLTCvFYxuL1tNhqzTbtnFICyJLTNK4a+RechKP75e7w42ClXSnJQw==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/csstools"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/csstools"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "@csstools/color-helpers": "^6.0.2",
+        "@csstools/css-calc": "^3.1.1"
+      },
+      "engines": {
+        "node": ">=20.19.0"
+      },
+      "peerDependencies": {
+        "@csstools/css-parser-algorithms": "^4.0.0",
+        "@csstools/css-tokenizer": "^4.0.0"
+      }
+    },
+    "node_modules/@csstools/css-parser-algorithms": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/@csstools/css-parser-algorithms/-/css-parser-algorithms-4.0.0.tgz",
+      "integrity": "sha512-+B87qS7fIG3L5h3qwJ/IFbjoVoOe/bpOdh9hAjXbvx0o8ImEmUsGXN0inFOnk2ChCFgqkkGFQ+TpM5rbhkKe4w==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/csstools"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/csstools"
+        }
+      ],
+      "license": "MIT",
+      "engines": {
+        "node": ">=20.19.0"
+      },
+      "peerDependencies": {
+        "@csstools/css-tokenizer": "^4.0.0"
+      }
+    },
+    "node_modules/@csstools/css-syntax-patches-for-csstree": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@csstools/css-syntax-patches-for-csstree/-/css-syntax-patches-for-csstree-1.1.1.tgz",
+      "integrity": "sha512-BvqN0AMWNAnLk9G8jnUT77D+mUbY/H2b3uDTvg2isJkHaOufUE2R3AOwxWo7VBQKT1lOdwdvorddo2B/lk64+w==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/csstools"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/csstools"
+        }
+      ],
+      "license": "MIT-0",
+      "peerDependencies": {
+        "css-tree": "^3.2.1"
+      },
+      "peerDependenciesMeta": {
+        "css-tree": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@csstools/css-tokenizer": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/@csstools/css-tokenizer/-/css-tokenizer-4.0.0.tgz",
+      "integrity": "sha512-QxULHAm7cNu72w97JUNCBFODFaXpbDg+dP8b/oWFAZ2MTRppA3U00Y2L1HqaS4J6yBqxwa/Y3nMBaxVKbB/NsA==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/csstools"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/csstools"
+        }
+      ],
+      "license": "MIT",
+      "engines": {
+        "node": ">=20.19.0"
+      }
+    },
     "node_modules/@esbuild/aix-ppc64": {
       "version": "0.25.12",
       "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.25.12.tgz",
@@ -2182,6 +2440,24 @@
         "svelte": "^5.28.2"
       }
     },
+    "node_modules/@exodus/bytes": {
+      "version": "1.15.0",
+      "resolved": "https://registry.npmjs.org/@exodus/bytes/-/bytes-1.15.0.tgz",
+      "integrity": "sha512-UY0nlA+feH81UGSHv92sLEPLCeZFjXOuHhrIo0HQydScuQc8s0A7kL/UdgwgDq8g8ilksmuoF35YVTNphV2aBQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": "^20.19.0 || ^22.12.0 || >=24.0.0"
+      },
+      "peerDependencies": {
+        "@noble/hashes": "^1.8.0 || ^2.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@noble/hashes": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@fullcalendar/core": {
       "version": "6.1.17",
       "resolved": "https://registry.npmjs.org/@fullcalendar/core/-/core-6.1.17.tgz",
@@ -2286,6 +2562,109 @@
         "url": "https://github.com/sponsors/kazupon"
       }
     },
+    "node_modules/@isaacs/cliui": {
+      "version": "8.0.2",
+      "resolved": "https://registry.npmjs.org/@isaacs/cliui/-/cliui-8.0.2.tgz",
+      "integrity": "sha512-O8jcjabXaleOG9DQ0+ARXWZBTfnP4WNAqzuiJK7ll44AmxGKv/J2M4TPjxjY3znBCfvBXFzucm1twdyFybFqEA==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "string-width": "^5.1.2",
+        "string-width-cjs": "npm:string-width@^4.2.0",
+        "strip-ansi": "^7.0.1",
+        "strip-ansi-cjs": "npm:strip-ansi@^6.0.1",
+        "wrap-ansi": "^8.1.0",
+        "wrap-ansi-cjs": "npm:wrap-ansi@^7.0.0"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@isaacs/cliui/node_modules/ansi-regex": {
+      "version": "6.2.2",
+      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.2.2.tgz",
+      "integrity": "sha512-Bq3SmSpyFHaWjPk8If9yc6svM8c56dB5BAtW4Qbw5jHTwwXXcTLoRMkpDJp6VL0XzlWaCHTXrkFURMYmD0sLqg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-regex?sponsor=1"
+      }
+    },
+    "node_modules/@isaacs/cliui/node_modules/ansi-styles": {
+      "version": "6.2.3",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-6.2.3.tgz",
+      "integrity": "sha512-4Dj6M28JB+oAH8kFkTLUo+a2jwOFkuqb3yucU0CANcRRUbxS0cP0nZYCGjcc3BNXwRIsUVmDGgzawme7zvJHvg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+      }
+    },
+    "node_modules/@isaacs/cliui/node_modules/emoji-regex": {
+      "version": "9.2.2",
+      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-9.2.2.tgz",
+      "integrity": "sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@isaacs/cliui/node_modules/string-width": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/string-width/-/string-width-5.1.2.tgz",
+      "integrity": "sha512-HnLOCR3vjcY8beoNLtcjZ5/nxn2afmME6lhrDrebokqMap+XbeW8n9TXpPDOqdGK5qcI3oT0GKTW6wC7EMiVqA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "eastasianwidth": "^0.2.0",
+        "emoji-regex": "^9.2.2",
+        "strip-ansi": "^7.0.1"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/@isaacs/cliui/node_modules/strip-ansi": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-7.2.0.tgz",
+      "integrity": "sha512-yDPMNjp4WyfYBkHnjIRLfca1i6KMyGCtsVgoKe/z1+6vukgaENdgGBZt+ZmKPc4gavvEZ5OgHfHdrazhgNyG7w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ansi-regex": "^6.2.2"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/strip-ansi?sponsor=1"
+      }
+    },
+    "node_modules/@isaacs/cliui/node_modules/wrap-ansi": {
+      "version": "8.1.0",
+      "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-8.1.0.tgz",
+      "integrity": "sha512-si7QWI6zUMq56bESFvagtmzMdGOtoxfR+Sez11Mobfc7tm+VkUckk9bW2UeffTGVUbOksxmSw0AA2gs8g71NCQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ansi-styles": "^6.1.0",
+        "string-width": "^5.0.1",
+        "strip-ansi": "^7.0.1"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/wrap-ansi?sponsor=1"
+      }
+    },
     "node_modules/@jimp/bmp": {
       "version": "0.22.12",
       "resolved": "https://registry.npmjs.org/@jimp/bmp/-/bmp-0.22.12.tgz",
@@ -2746,6 +3125,13 @@
         "@types/gapi.client.discovery-v1": "*"
       }
     },
+    "node_modules/@one-ini/wasm": {
+      "version": "0.1.1",
+      "resolved": "https://registry.npmjs.org/@one-ini/wasm/-/wasm-0.1.1.tgz",
+      "integrity": "sha512-XuySG1E38YScSJoMlqovLru4KTUNSjgVTIjyh7qMX6aNN5HY5Ct5LhRJdxO79JtTzKfzV/bnWpz+zquYrISsvw==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/@parcel/watcher": {
       "version": "2.5.0",
       "resolved": "https://registry.npmjs.org/@parcel/watcher/-/watcher-2.5.0.tgz",
@@ -3028,6 +3414,17 @@
         "url": "https://opencollective.com/parcel"
       }
     },
+    "node_modules/@pkgjs/parseargs": {
+      "version": "0.11.0",
+      "resolved": "https://registry.npmjs.org/@pkgjs/parseargs/-/parseargs-0.11.0.tgz",
+      "integrity": "sha512-+1VkjdD0QBLPodGrJUeqarH8VAIvQODIbwh9XpP5Syisf7YoQgsJKPNFoqqLQlu+VQ/tVSshMR6loPMn8U+dPg==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "engines": {
+        "node": ">=14"
+      }
+    },
     "node_modules/@playwright/test": {
       "version": "1.58.2",
       "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.58.2.tgz",
@@ -4454,6 +4851,17 @@
       "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.5.13.tgz",
       "integrity": "sha512-/hnE/qP5ZoGpol0a5mDi45bOd7t3tjYJBjsgCsivow7D48cJeV5l05RD82lPqi7gRiphZM37rnhW1l6ZoCNNnQ=="
     },
+    "node_modules/@vue/test-utils": {
+      "version": "2.4.6",
+      "resolved": "https://registry.npmjs.org/@vue/test-utils/-/test-utils-2.4.6.tgz",
+      "integrity": "sha512-FMxEjOpYNYiFe0GkaHsnJPXFHxQ6m4t8vI/ElPGpMWxZKpmRvQ33OIrvRXemy6yha03RxhOlQuy+gZMC3CQSow==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "js-beautify": "^1.14.9",
+        "vue-component-type-helpers": "^2.0.0"
+      }
+    },
     "node_modules/@vueuse/core": {
       "version": "12.7.0",
       "resolved": "https://registry.npmjs.org/@vueuse/core/-/core-12.7.0.tgz",
@@ -4611,6 +5019,16 @@
         "url": "https://github.com/sponsors/antfu"
       }
     },
+    "node_modules/abbrev": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/abbrev/-/abbrev-2.0.0.tgz",
+      "integrity": "sha512-6/mh1E2u2YgEsCHdY0Yx5oW+61gZU+1vXaoiHHrpKeuRNNgFvS+/jrwHiQhB5apAf5oB7UB7E19ol2R2LKH8hQ==",
+      "dev": true,
+      "license": "ISC",
+      "engines": {
+        "node": "^14.17.0 || ^16.13.0 || >=18.0.0"
+      }
+    },
     "node_modules/abort-controller": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/abort-controller/-/abort-controller-3.0.0.tgz",
@@ -4941,6 +5359,16 @@
         }
       ]
     },
+    "node_modules/bidi-js": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/bidi-js/-/bidi-js-1.0.3.tgz",
+      "integrity": "sha512-RKshQI1R3YQ+n9YJz2QQ147P66ELpa1FQEg20Dk8oW9t2KgLbpDLLp9aGZ7y8WHSshDknG0bknqGw5/tyCs5tw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "require-from-string": "^2.0.2"
+      }
+    },
     "node_modules/bignumber.js": {
       "version": "9.3.1",
       "resolved": "https://registry.npmjs.org/bignumber.js/-/bignumber.js-9.3.1.tgz",
@@ -5583,6 +6011,17 @@
         "typedarray": "^0.0.6"
       }
     },
+    "node_modules/config-chain": {
+      "version": "1.1.13",
+      "resolved": "https://registry.npmjs.org/config-chain/-/config-chain-1.1.13.tgz",
+      "integrity": "sha512-qj+f8APARXHrM0hraqXYb2/bOVSV4PvJQlNZ/DVj0QrmNM2q2euizkeuVckQ57J+W0mRH6Hvi+k50M4Jul2VRQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ini": "^1.3.4",
+        "proto-list": "~1.2.1"
+      }
+    },
     "node_modules/convert-source-map": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-2.0.0.tgz",
@@ -5758,6 +6197,58 @@
         "node": ">=12"
       }
     },
+    "node_modules/data-urls": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/data-urls/-/data-urls-7.0.0.tgz",
+      "integrity": "sha512-23XHcCF+coGYevirZceTVD7NdJOqVn+49IHyxgszm+JIiHLoB2TkmPtsYkNWT1pvRSGkc35L6NHs0yHkN2SumA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "whatwg-mimetype": "^5.0.0",
+        "whatwg-url": "^16.0.0"
+      },
+      "engines": {
+        "node": "^20.19.0 || ^22.12.0 || >=24.0.0"
+      }
+    },
+    "node_modules/data-urls/node_modules/tr46": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/tr46/-/tr46-6.0.0.tgz",
+      "integrity": "sha512-bLVMLPtstlZ4iMQHpFHTR7GAGj2jxi8Dg0s2h2MafAE4uSWF98FC/3MomU51iQAMf8/qDUbKWf5GxuvvVcXEhw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "punycode": "^2.3.1"
+      },
+      "engines": {
+        "node": ">=20"
+      }
+    },
+    "node_modules/data-urls/node_modules/webidl-conversions": {
+      "version": "8.0.1",
+      "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-8.0.1.tgz",
+      "integrity": "sha512-BMhLD/Sw+GbJC21C/UgyaZX41nPt8bUTg+jWyDeg7e7YN4xOM05YPSIXceACnXVtqyEw/LMClUQMtMZ+PGGpqQ==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "engines": {
+        "node": ">=20"
+      }
+    },
+    "node_modules/data-urls/node_modules/whatwg-url": {
+      "version": "16.0.1",
+      "resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-16.0.1.tgz",
+      "integrity": "sha512-1to4zXBxmXHV3IiSSEInrreIlu02vUOvrhxJJH5vcxYTBDAx51cqZiKdyTxlecdKNSjj8EcxGBxNf6Vg+945gw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@exodus/bytes": "^1.11.0",
+        "tr46": "^6.0.0",
+        "webidl-conversions": "^8.0.1"
+      },
+      "engines": {
+        "node": "^20.19.0 || ^22.12.0 || >=24.0.0"
+      }
+    },
     "node_modules/data-view-buffer": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/data-view-buffer/-/data-view-buffer-1.0.2.tgz",
@@ -5907,6 +6398,13 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/decimal.js": {
+      "version": "10.6.0",
+      "resolved": "https://registry.npmjs.org/decimal.js/-/decimal.js-10.6.0.tgz",
+      "integrity": "sha512-YpgQiITW3JXGntzdUmyUR1V812Hn8T1YVXhCu+wO3OpS4eU9l4YdD3qjyiKdV6mvV29zapkMeD390UVEf2lkUg==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/deep-eql": {
       "version": "5.0.2",
       "resolved": "https://registry.npmjs.org/deep-eql/-/deep-eql-5.0.2.tgz",
@@ -6058,6 +6556,13 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/eastasianwidth": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/eastasianwidth/-/eastasianwidth-0.2.0.tgz",
+      "integrity": "sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/ecdsa-sig-formatter": {
       "version": "1.0.11",
       "resolved": "https://registry.npmjs.org/ecdsa-sig-formatter/-/ecdsa-sig-formatter-1.0.11.tgz",
@@ -6066,6 +6571,74 @@
         "safe-buffer": "^5.0.1"
       }
     },
+    "node_modules/editorconfig": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/editorconfig/-/editorconfig-1.0.7.tgz",
+      "integrity": "sha512-e0GOtq/aTQhVdNyDU9e02+wz9oDDM+SIOQxWME2QRjzRX5yyLAuHDE+0aE8vHb9XRC8XD37eO2u57+F09JqFhw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@one-ini/wasm": "0.1.1",
+        "commander": "^10.0.0",
+        "minimatch": "^9.0.1",
+        "semver": "^7.5.3"
+      },
+      "bin": {
+        "editorconfig": "bin/editorconfig"
+      },
+      "engines": {
+        "node": ">=14"
+      }
+    },
+    "node_modules/editorconfig/node_modules/brace-expansion": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.2.tgz",
+      "integrity": "sha512-Jt0vHyM+jmUBqojB7E1NIYadt0vI0Qxjxd2TErW94wDz+E2LAm5vKMXXwg6ZZBTHPuUlDgQHKXvjGBdfcF1ZDQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "balanced-match": "^1.0.0"
+      }
+    },
+    "node_modules/editorconfig/node_modules/commander": {
+      "version": "10.0.1",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-10.0.1.tgz",
+      "integrity": "sha512-y4Mg2tXshplEbSGzx7amzPwKKOCGuoSRP/CjEdwwk0FOGlUbq6lKuoyDZTNZkmxHdJtp54hdfY/JUrdL7Xfdug==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=14"
+      }
+    },
+    "node_modules/editorconfig/node_modules/minimatch": {
+      "version": "9.0.9",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.9.tgz",
+      "integrity": "sha512-OBwBN9AL4dqmETlpS2zasx+vTeWclWzkblfZk7KTA5j3jeOONz/tRCnZomUyvNg83wL5Zv9Ss6HMJXAgL8R2Yg==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "brace-expansion": "^2.0.2"
+      },
+      "engines": {
+        "node": ">=16 || 14 >=14.17"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/editorconfig/node_modules/semver": {
+      "version": "7.7.4",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.7.4.tgz",
+      "integrity": "sha512-vFKC2IEtQnVhpT78h1Yp8wzwrf8CM+MzKMHGJZfBtzhZNycRFnXsHk6E5TxIkkMsgNS7mdX3AGB7x2QM2di4lA==",
+      "dev": true,
+      "license": "ISC",
+      "bin": {
+        "semver": "bin/semver.js"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
     "node_modules/ejs": {
       "version": "3.1.10",
       "resolved": "https://registry.npmjs.org/ejs/-/ejs-3.1.10.tgz",
@@ -6657,6 +7230,23 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/foreground-child": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/foreground-child/-/foreground-child-3.3.1.tgz",
+      "integrity": "sha512-gIXjKqtFuWEgzFRJA9WCQeSJLZDjgJUOMCMzxtvFq/37KojM1BFGufqsCy0r4qSQmYLsZYMeyRqzIWOMup03sw==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "cross-spawn": "^7.0.6",
+        "signal-exit": "^4.0.1"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
     "node_modules/form-data": {
       "version": "4.0.4",
       "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.4.tgz",
@@ -7161,6 +7751,19 @@
       "resolved": "https://registry.npmjs.org/hookable/-/hookable-5.5.3.tgz",
       "integrity": "sha512-Yc+BQe8SvoXH1643Qez1zqLRmbA5rCL+sSmk6TVos0LWVfNIB7PGncdlId77WzLGSIB5KaWgTaNTs2lNVEI6VQ=="
     },
+    "node_modules/html-encoding-sniffer": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/html-encoding-sniffer/-/html-encoding-sniffer-6.0.0.tgz",
+      "integrity": "sha512-CV9TW3Y3f8/wT0BRFc1/KAVQ3TUHiXmaAb6VW9vtiMFf7SLoMd1PdAc4W3KFOFETBJUb90KatHqlsZMWV+R9Gg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@exodus/bytes": "^1.6.0"
+      },
+      "engines": {
+        "node": "^20.19.0 || ^22.12.0 || >=24.0.0"
+      }
+    },
     "node_modules/html-tags": {
       "version": "3.3.1",
       "resolved": "https://registry.npmjs.org/html-tags/-/html-tags-3.3.1.tgz",
@@ -7270,6 +7873,13 @@
       "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
       "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ=="
     },
+    "node_modules/ini": {
+      "version": "1.3.8",
+      "resolved": "https://registry.npmjs.org/ini/-/ini-1.3.8.tgz",
+      "integrity": "sha512-JV/yugV2uzW5iMRSiZAyDtQd+nxtUnjeLt0acNdw98kKLrvuRVyB80tsREOE7yvGVgalhZ6RNXCmEHkUKBKxew==",
+      "dev": true,
+      "license": "ISC"
+    },
     "node_modules/inquirer": {
       "version": "8.2.6",
       "resolved": "https://registry.npmjs.org/inquirer/-/inquirer-8.2.6.tgz",
@@ -7639,6 +8249,13 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/is-potential-custom-element-name": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/is-potential-custom-element-name/-/is-potential-custom-element-name-1.0.1.tgz",
+      "integrity": "sha512-bCYeRA2rVibKZd+s2625gGnGF/t7DSqDs4dP7CrLA1m7jKWz6pps0LpYLJN8Q64HtmPKJ1hrN3nzPNKFEKOUiQ==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/is-reference": {
       "version": "3.0.3",
       "resolved": "https://registry.npmjs.org/is-reference/-/is-reference-3.0.3.tgz",
@@ -7871,6 +8488,22 @@
         "whatwg-fetch": "^3.4.1"
       }
     },
+    "node_modules/jackspeak": {
+      "version": "3.4.3",
+      "resolved": "https://registry.npmjs.org/jackspeak/-/jackspeak-3.4.3.tgz",
+      "integrity": "sha512-OGlZQpz2yfahA/Rd1Y8Cd9SIEsqvXkLVoSw/cgwhnhFMDbsQFeZYoJJ7bIZBS9BcamUW96asq/npPWugM+RQBw==",
+      "dev": true,
+      "license": "BlueOak-1.0.0",
+      "dependencies": {
+        "@isaacs/cliui": "^8.0.2"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      },
+      "optionalDependencies": {
+        "@pkgjs/parseargs": "^0.11.0"
+      }
+    },
     "node_modules/jake": {
       "version": "10.9.2",
       "resolved": "https://registry.npmjs.org/jake/-/jake-10.9.2.tgz",
@@ -7910,11 +8543,214 @@
       "resolved": "https://registry.npmjs.org/jpeg-js/-/jpeg-js-0.4.4.tgz",
       "integrity": "sha512-WZzeDOEtTOBK4Mdsar0IqEU5sMr3vSV2RqkAIzUEV2BHnUfKGyswWFPFwK5EeDo93K3FohSHbLAjj0s1Wzd+dg=="
     },
+    "node_modules/js-beautify": {
+      "version": "1.15.4",
+      "resolved": "https://registry.npmjs.org/js-beautify/-/js-beautify-1.15.4.tgz",
+      "integrity": "sha512-9/KXeZUKKJwqCXUdBxFJ3vPh467OCckSBmYDwSK/EtV090K+iMJ7zx2S3HLVDIWFQdqMIsZWbnaGiba18aWhaA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "config-chain": "^1.1.13",
+        "editorconfig": "^1.0.4",
+        "glob": "^10.4.2",
+        "js-cookie": "^3.0.5",
+        "nopt": "^7.2.1"
+      },
+      "bin": {
+        "css-beautify": "js/bin/css-beautify.js",
+        "html-beautify": "js/bin/html-beautify.js",
+        "js-beautify": "js/bin/js-beautify.js"
+      },
+      "engines": {
+        "node": ">=14"
+      }
+    },
+    "node_modules/js-beautify/node_modules/brace-expansion": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.2.tgz",
+      "integrity": "sha512-Jt0vHyM+jmUBqojB7E1NIYadt0vI0Qxjxd2TErW94wDz+E2LAm5vKMXXwg6ZZBTHPuUlDgQHKXvjGBdfcF1ZDQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "balanced-match": "^1.0.0"
+      }
+    },
+    "node_modules/js-beautify/node_modules/glob": {
+      "version": "10.5.0",
+      "resolved": "https://registry.npmjs.org/glob/-/glob-10.5.0.tgz",
+      "integrity": "sha512-DfXN8DfhJ7NH3Oe7cFmu3NCu1wKbkReJ8TorzSAFbSKrlNaQSKfIzqYqVY8zlbs2NLBbWpRiU52GX2PbaBVNkg==",
+      "deprecated": "Old versions of glob are not supported, and contain widely publicized security vulnerabilities, which have been fixed in the current version. Please update. Support for old versions may be purchased (at exorbitant rates) by contacting i@izs.me",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "foreground-child": "^3.1.0",
+        "jackspeak": "^3.1.2",
+        "minimatch": "^9.0.4",
+        "minipass": "^7.1.2",
+        "package-json-from-dist": "^1.0.0",
+        "path-scurry": "^1.11.1"
+      },
+      "bin": {
+        "glob": "dist/esm/bin.mjs"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/js-beautify/node_modules/minimatch": {
+      "version": "9.0.9",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.9.tgz",
+      "integrity": "sha512-OBwBN9AL4dqmETlpS2zasx+vTeWclWzkblfZk7KTA5j3jeOONz/tRCnZomUyvNg83wL5Zv9Ss6HMJXAgL8R2Yg==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "brace-expansion": "^2.0.2"
+      },
+      "engines": {
+        "node": ">=16 || 14 >=14.17"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/js-cookie": {
+      "version": "3.0.5",
+      "resolved": "https://registry.npmjs.org/js-cookie/-/js-cookie-3.0.5.tgz",
+      "integrity": "sha512-cEiJEAEoIbWfCZYKWhVwFuvPX1gETRYPw6LlaTKoxD3s2AkXzkCjnp6h0V77ozyqj0jakteJ4YqDJT830+lVGw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=14"
+      }
+    },
     "node_modules/js-tokens": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
       "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ=="
     },
+    "node_modules/jsdom": {
+      "version": "29.0.0",
+      "resolved": "https://registry.npmjs.org/jsdom/-/jsdom-29.0.0.tgz",
+      "integrity": "sha512-9FshNB6OepopZ08unmmGpsF7/qCjxGPbo3NbgfJAnPeHXnsODE9WWffXZtRFRFe0ntzaAOcSKNJFz8wiyvF1jQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@asamuzakjp/css-color": "^5.0.1",
+        "@asamuzakjp/dom-selector": "^7.0.2",
+        "@bramus/specificity": "^2.4.2",
+        "@csstools/css-syntax-patches-for-csstree": "^1.1.1",
+        "@exodus/bytes": "^1.15.0",
+        "css-tree": "^3.2.1",
+        "data-urls": "^7.0.0",
+        "decimal.js": "^10.6.0",
+        "html-encoding-sniffer": "^6.0.0",
+        "is-potential-custom-element-name": "^1.0.1",
+        "lru-cache": "^11.2.7",
+        "parse5": "^8.0.0",
+        "saxes": "^6.0.0",
+        "symbol-tree": "^3.2.4",
+        "tough-cookie": "^6.0.1",
+        "undici": "^7.24.3",
+        "w3c-xmlserializer": "^5.0.0",
+        "webidl-conversions": "^8.0.1",
+        "whatwg-mimetype": "^5.0.0",
+        "whatwg-url": "^16.0.1",
+        "xml-name-validator": "^5.0.0"
+      },
+      "engines": {
+        "node": "^20.19.0 || ^22.13.0 || >=24.0.0"
+      },
+      "peerDependencies": {
+        "canvas": "^3.0.0"
+      },
+      "peerDependenciesMeta": {
+        "canvas": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/jsdom/node_modules/css-tree": {
+      "version": "3.2.1",
+      "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-3.2.1.tgz",
+      "integrity": "sha512-X7sjQzceUhu1u7Y/ylrRZFU2FS6LRiFVp6rKLPg23y3x3c3DOKAwuXGDp+PAGjh6CSnCjYeAul8pcT8bAl+lSA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "mdn-data": "2.27.1",
+        "source-map-js": "^1.2.1"
+      },
+      "engines": {
+        "node": "^10 || ^12.20.0 || ^14.13.0 || >=15.0.0"
+      }
+    },
+    "node_modules/jsdom/node_modules/lru-cache": {
+      "version": "11.2.7",
+      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-11.2.7.tgz",
+      "integrity": "sha512-aY/R+aEsRelme17KGQa/1ZSIpLpNYYrhcrepKTZgE+W3WM16YMCaPwOHLHsmopZHELU0Ojin1lPVxKR0MihncA==",
+      "dev": true,
+      "license": "BlueOak-1.0.0",
+      "engines": {
+        "node": "20 || >=22"
+      }
+    },
+    "node_modules/jsdom/node_modules/mdn-data": {
+      "version": "2.27.1",
+      "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.27.1.tgz",
+      "integrity": "sha512-9Yubnt3e8A0OKwxYSXyhLymGW4sCufcLG6VdiDdUGVkPhpqLxlvP5vl1983gQjJl3tqbrM731mjaZaP68AgosQ==",
+      "dev": true,
+      "license": "CC0-1.0"
+    },
+    "node_modules/jsdom/node_modules/tough-cookie": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-6.0.1.tgz",
+      "integrity": "sha512-LktZQb3IeoUWB9lqR5EWTHgW/VTITCXg4D21M+lvybRVdylLrRMnqaIONLVb5mav8vM19m44HIcGq4qASeu2Qw==",
+      "dev": true,
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "tldts": "^7.0.5"
+      },
+      "engines": {
+        "node": ">=16"
+      }
+    },
+    "node_modules/jsdom/node_modules/tr46": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/tr46/-/tr46-6.0.0.tgz",
+      "integrity": "sha512-bLVMLPtstlZ4iMQHpFHTR7GAGj2jxi8Dg0s2h2MafAE4uSWF98FC/3MomU51iQAMf8/qDUbKWf5GxuvvVcXEhw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "punycode": "^2.3.1"
+      },
+      "engines": {
+        "node": ">=20"
+      }
+    },
+    "node_modules/jsdom/node_modules/webidl-conversions": {
+      "version": "8.0.1",
+      "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-8.0.1.tgz",
+      "integrity": "sha512-BMhLD/Sw+GbJC21C/UgyaZX41nPt8bUTg+jWyDeg7e7YN4xOM05YPSIXceACnXVtqyEw/LMClUQMtMZ+PGGpqQ==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "engines": {
+        "node": ">=20"
+      }
+    },
+    "node_modules/jsdom/node_modules/whatwg-url": {
+      "version": "16.0.1",
+      "resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-16.0.1.tgz",
+      "integrity": "sha512-1to4zXBxmXHV3IiSSEInrreIlu02vUOvrhxJJH5vcxYTBDAx51cqZiKdyTxlecdKNSjj8EcxGBxNf6Vg+945gw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@exodus/bytes": "^1.11.0",
+        "tr46": "^6.0.0",
+        "webidl-conversions": "^8.0.1"
+      },
+      "engines": {
+        "node": "^20.19.0 || ^22.12.0 || >=24.0.0"
+      }
+    },
     "node_modules/jsesc": {
       "version": "3.0.2",
       "resolved": "https://registry.npmjs.org/jsesc/-/jsesc-3.0.2.tgz",
@@ -8371,6 +9207,22 @@
       "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.19.tgz",
       "integrity": "sha512-xxOWJsBKtzAq7DY0J+DTzuz58K8e7sJbdgwkbMWQe8UYB6ekmsQ45q0M/tJDsGaZmbC+l7n57UV8Hl5tHxO9uw=="
     },
+    "node_modules/nopt": {
+      "version": "7.2.1",
+      "resolved": "https://registry.npmjs.org/nopt/-/nopt-7.2.1.tgz",
+      "integrity": "sha512-taM24ViiimT/XntxbPyJQzCG+p4EKOpgD3mxFwW38mGjVUrfERQOeY4EDHjdnptttfHuHQXFx+lTP08Q+mLa/w==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "abbrev": "^2.0.0"
+      },
+      "bin": {
+        "nopt": "bin/nopt.js"
+      },
+      "engines": {
+        "node": "^14.17.0 || ^16.13.0 || >=18.0.0"
+      }
+    },
     "node_modules/npm-run-path": {
       "version": "6.0.0",
       "resolved": "https://registry.npmjs.org/npm-run-path/-/npm-run-path-6.0.0.tgz",
@@ -8588,6 +9440,13 @@
         "node": ">=6"
       }
     },
+    "node_modules/package-json-from-dist": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/package-json-from-dist/-/package-json-from-dist-1.0.1.tgz",
+      "integrity": "sha512-UEZIS3/by4OC8vL3P2dTXRETpebLI2NiI5vIrjaD/5UtrkFX/tNbwjTSRAGC/+7CAo2pIcBaRgWmcBBHcsaCIw==",
+      "dev": true,
+      "license": "BlueOak-1.0.0"
+    },
     "node_modules/packrup": {
       "version": "0.1.2",
       "resolved": "https://registry.npmjs.org/packrup/-/packrup-0.1.2.tgz",
@@ -8637,6 +9496,32 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/parse5": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/parse5/-/parse5-8.0.0.tgz",
+      "integrity": "sha512-9m4m5GSgXjL4AjumKzq1Fgfp3Z8rsvjRNbnkVwfu2ImRqE5D0LnY2QfDen18FSY9C573YU5XxSapdHZTZ2WolA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "entities": "^6.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/inikulin/parse5?sponsor=1"
+      }
+    },
+    "node_modules/parse5/node_modules/entities": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/entities/-/entities-6.0.1.tgz",
+      "integrity": "sha512-aN97NXWF6AWBTahfVOIrB/NShkzi5H7F9r1s9mD3cDj4Ko5f2qhhVoYMibXF7GlLveb/D2ioWay8lxI97Ven3g==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "engines": {
+        "node": ">=0.12"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/entities?sponsor=1"
+      }
+    },
     "node_modules/path-exists": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz",
@@ -8669,6 +9554,30 @@
       "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.7.tgz",
       "integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw=="
     },
+    "node_modules/path-scurry": {
+      "version": "1.11.1",
+      "resolved": "https://registry.npmjs.org/path-scurry/-/path-scurry-1.11.1.tgz",
+      "integrity": "sha512-Xa4Nw17FS9ApQFJ9umLiJS4orGjm7ZzwUrwamcGQuHSzDyth9boKDaycYdDcZDuqYATXw4HFXgaqWTctW/v1HA==",
+      "dev": true,
+      "license": "BlueOak-1.0.0",
+      "dependencies": {
+        "lru-cache": "^10.2.0",
+        "minipass": "^5.0.0 || ^6.0.2 || ^7.0.0"
+      },
+      "engines": {
+        "node": ">=16 || 14 >=14.18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/path-scurry/node_modules/lru-cache": {
+      "version": "10.4.3",
+      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-10.4.3.tgz",
+      "integrity": "sha512-JNAzZcXrCt42VGLuYz0zfAzDfAvJWW6AfYlDBQyDV5DClI2m5sAmK+OIO7s59XfsRsWHp02jAJrRadPRGTt6SQ==",
+      "dev": true,
+      "license": "ISC"
+    },
     "node_modules/pathe": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/pathe/-/pathe-1.1.2.tgz",
@@ -8947,6 +9856,13 @@
       "resolved": "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-2.0.1.tgz",
       "integrity": "sha512-3ouUOpQhtgrbOa17J7+uxOTpITYWaGP7/AhoR3+A+/1e9skrzelGi/dXzEYyvbxubEF6Wn2ypscTKiKJFFn1ag=="
     },
+    "node_modules/proto-list": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/proto-list/-/proto-list-1.2.4.tgz",
+      "integrity": "sha512-vtK/94akxsTMhe0/cbfpR+syPuszcuwhqVjJq26CuNDgFGj682oRBXOP5MJpv2r7JtE8MsiepGIqvvOTBwn2vA==",
+      "dev": true,
+      "license": "ISC"
+    },
     "node_modules/proxy-from-env": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
@@ -9848,6 +10764,19 @@
       "resolved": "https://registry.npmjs.org/sax/-/sax-1.4.1.tgz",
       "integrity": "sha512-+aWOz7yVScEGoKNd4PA10LZ8sk0A/z5+nXQG5giUO5rprX9jgYsTdov9qCchZiPIZezbZH+jRut8nPodFAX4Jg=="
     },
+    "node_modules/saxes": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/saxes/-/saxes-6.0.0.tgz",
+      "integrity": "sha512-xAg7SOnEhrm5zI3puOOKyy1OMcMlIJZYNJY7xLBwSze0UjhPLnWfj2GF2EpT0jmzaJKIWKHLsaSSajf35bcYnA==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "xmlchars": "^2.2.0"
+      },
+      "engines": {
+        "node": ">=v12.22.7"
+      }
+    },
     "node_modules/sdp": {
       "version": "3.2.1",
       "resolved": "https://registry.npmjs.org/sdp/-/sdp-3.2.1.tgz",
@@ -10162,6 +11091,22 @@
         "node": ">=8"
       }
     },
+    "node_modules/string-width-cjs": {
+      "name": "string-width",
+      "version": "4.2.3",
+      "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
+      "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "emoji-regex": "^8.0.0",
+        "is-fullwidth-code-point": "^3.0.0",
+        "strip-ansi": "^6.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/string.prototype.matchall": {
       "version": "4.0.12",
       "resolved": "https://registry.npmjs.org/string.prototype.matchall/-/string.prototype.matchall-4.0.12.tgz",
@@ -10270,6 +11215,20 @@
         "node": ">=8"
       }
     },
+    "node_modules/strip-ansi-cjs": {
+      "name": "strip-ansi",
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
+      "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ansi-regex": "^5.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/strip-comments": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/strip-comments/-/strip-comments-2.0.1.tgz",
@@ -10394,6 +11353,13 @@
         "url": "https://github.com/sponsors/limonte"
       }
     },
+    "node_modules/symbol-tree": {
+      "version": "3.2.4",
+      "resolved": "https://registry.npmjs.org/symbol-tree/-/symbol-tree-3.2.4.tgz",
+      "integrity": "sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/sync-child-process": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/sync-child-process/-/sync-child-process-1.0.2.tgz",
@@ -10641,6 +11607,26 @@
         "node": ">=14.0.0"
       }
     },
+    "node_modules/tldts": {
+      "version": "7.0.26",
+      "resolved": "https://registry.npmjs.org/tldts/-/tldts-7.0.26.tgz",
+      "integrity": "sha512-WiGwQjr0qYdNNG8KpMKlSvpxz652lqa3Rd+/hSaDcY4Uo6SKWZq2LAF+hsAhUewTtYhXlorBKgNF3Kk8hnjGoQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "tldts-core": "^7.0.26"
+      },
+      "bin": {
+        "tldts": "bin/cli.js"
+      }
+    },
+    "node_modules/tldts-core": {
+      "version": "7.0.26",
+      "resolved": "https://registry.npmjs.org/tldts-core/-/tldts-core-7.0.26.tgz",
+      "integrity": "sha512-5WJ2SqFsv4G2Dwi7ZFVRnz6b2H1od39QME1lc2y5Ew3eWiZMAeqOAfWpRP9jHvhUl881406QtZTODvjttJs+ew==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/tmp": {
       "version": "0.0.33",
       "resolved": "https://registry.npmjs.org/tmp/-/tmp-0.0.33.tgz",
@@ -10843,6 +11829,16 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/undici": {
+      "version": "7.24.4",
+      "resolved": "https://registry.npmjs.org/undici/-/undici-7.24.4.tgz",
+      "integrity": "sha512-BM/JzwwaRXxrLdElV2Uo6cTLEjhSb3WXboncJamZ15NgUURmvlXvxa6xkwIOILIjPNo9i8ku136ZvWV0Uly8+w==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=20.18.1"
+      }
+    },
     "node_modules/undici-types": {
       "version": "7.8.0",
       "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-7.8.0.tgz",
@@ -12319,6 +13315,13 @@
         "vue": "^3.0.0-0 || ^2.7.0"
       }
     },
+    "node_modules/vue-component-type-helpers": {
+      "version": "2.2.12",
+      "resolved": "https://registry.npmjs.org/vue-component-type-helpers/-/vue-component-type-helpers-2.2.12.tgz",
+      "integrity": "sha512-YbGqHZ5/eW4SnkPNR44mKVc6ZKQoRs/Rux1sxC6rdwXb4qpbOSYfDr9DsTHolOTGmIKgM9j141mZbBeg05R1pw==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/vue-i18n": {
       "version": "9.14.5",
       "resolved": "https://registry.npmjs.org/vue-i18n/-/vue-i18n-9.14.5.tgz",
@@ -12407,6 +13410,19 @@
         "vue": "^3.2.0"
       }
     },
+    "node_modules/w3c-xmlserializer": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/w3c-xmlserializer/-/w3c-xmlserializer-5.0.0.tgz",
+      "integrity": "sha512-o8qghlI8NZHU1lLPrpi2+Uq7abh4GGPpYANlalzWxyWteJOCsr/P+oPBA49TOLu5FTZO4d3F9MnWJfiMo4BkmA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "xml-name-validator": "^5.0.0"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
     "node_modules/wasm-feature-detect": {
       "version": "1.8.0",
       "resolved": "https://registry.npmjs.org/wasm-feature-detect/-/wasm-feature-detect-1.8.0.tgz",
@@ -12444,6 +13460,16 @@
       "resolved": "https://registry.npmjs.org/whatwg-fetch/-/whatwg-fetch-3.6.20.tgz",
       "integrity": "sha512-EqhiFU6daOA8kpjOWTL0olhVOF3i7OrFzSYiGsEMB8GcXS+RrzauAERX65xMeNWVqxA6HXH2m69Z9LaKKdisfg=="
     },
+    "node_modules/whatwg-mimetype": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/whatwg-mimetype/-/whatwg-mimetype-5.0.0.tgz",
+      "integrity": "sha512-sXcNcHOC51uPGF0P/D4NVtrkjSU2fNsm9iog4ZvZJsL3rjoDAzXZhkm2MWt1y+PUdggKAYVoMAIYcs78wJ51Cw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=20"
+      }
+    },
     "node_modules/whatwg-url": {
       "version": "7.1.0",
       "resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-7.1.0.tgz",
@@ -12922,6 +13948,25 @@
         "node": ">=8"
       }
     },
+    "node_modules/wrap-ansi-cjs": {
+      "name": "wrap-ansi",
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz",
+      "integrity": "sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ansi-styles": "^4.0.0",
+        "string-width": "^4.1.0",
+        "strip-ansi": "^6.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/wrap-ansi?sponsor=1"
+      }
+    },
     "node_modules/wrappy": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz",
@@ -12955,6 +14000,16 @@
         "xtend": "^4.0.0"
       }
     },
+    "node_modules/xml-name-validator": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/xml-name-validator/-/xml-name-validator-5.0.0.tgz",
+      "integrity": "sha512-EvGK8EJ3DhaHfbRlETOWAS5pO9MZITeauHKJyb8wyajUfQUenkIg2MvLDTZ4T/TgIcm3HU0TFBgWWboAZ30UHg==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=18"
+      }
+    },
     "node_modules/xml-parse-from-string": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/xml-parse-from-string/-/xml-parse-from-string-1.0.1.tgz",
@@ -12980,6 +14035,13 @@
         "node": ">=4.0"
       }
     },
+    "node_modules/xmlchars": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/xmlchars/-/xmlchars-2.2.0.tgz",
+      "integrity": "sha512-JZnDKK8B0RCDw84FNdDAIpZK+JuJw+s7Lz8nksI7SIuU3UXJJslUthsi+uWBUYOwPFwW7W7PRLRfUKpxjtjFCw==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/xtend": {
       "version": "4.0.2",
       "resolved": "https://registry.npmjs.org/xtend/-/xtend-4.0.2.tgz",
diff --git a/package.json b/package.json
index 5b4e20fc..1a492a56 100644
--- a/package.json
+++ b/package.json
@@ -65,12 +65,14 @@
     "vuex": "^4.1.0"
   },
   "devDependencies": {
-    "@playwright/test": "^1.54.2",
     "@creativebulma/bulma-divider": "^1.1.0",
     "@event-calendar/core": "^4.1.0",
+    "@playwright/test": "^1.54.2",
     "@types/event-calendar__core": "^3.7.0",
     "@vitejs/plugin-vue": "^5.1.4",
     "@vitejs/plugin-vue-jsx": "^4.1.2",
+    "@vue/test-utils": "^2.4.6",
+    "jsdom": "^29.0.0",
     "sass-embedded": "^1.81.0",
     "vite": "7.1.11",
     "vite-plugin-pwa": "^1.0.2",
diff --git a/src/components/displays/department/tables/SelfServeTryModal.vue b/src/components/displays/department/tables/SelfServeTryModal.vue
index 5c77737e..d3767600 100644
--- a/src/components/displays/department/tables/SelfServeTryModal.vue
+++ b/src/components/displays/department/tables/SelfServeTryModal.vue
@@ -3,6 +3,8 @@ import { computed, onMounted, ref, watch } from "vue";
 import { useI18n } from "vue-i18n";
 import { SessionUser } from "@/components/session/token/SessionUser.vue";
 import { useSelfServeLogic } from "@/composables/useSelfServeLogic";
+import SelfServeQuestionCards from "@/components/displays/selfServe/SelfServeQuestionCards.vue";
+import SelfServeTaskList from "@/components/displays/selfServe/SelfServeTaskList.vue";
 
 const { t: $t } = useI18n();
 
@@ -36,7 +38,6 @@ const {
   session,
   events,
   questions,
-  tasks,
   answers,
   allowedServices,
   visibleQuestions,
@@ -49,6 +50,11 @@ const {
   syncVehicleAnswer,
 } = useSelfServeLogic();
 
+const emptyCompletedTasks = computed(() => ({}));
+const answeredQuestions = computed(() => (
+  visibleQuestions.value.filter((question) => answers.value[question.id] === true || answers.value[question.id] === false)
+));
+
 const loadLanes = async () => {
   const lanes = await SessionUser.objects.department_lanes.get.all();
   availableLanes.value = (lanes || []).filter((entry) => parseInt(entry.department) === parseInt(props.departmentId));
@@ -86,8 +92,6 @@ const closeModal = () => {
   emit("closeModal");
 };
 
-const answeredQuestions = computed(() => visibleQuestions.value.filter((question) => answers.value[question.id] === true || answers.value[question.id] === false));
-
 onMounted(async () => {
   await loadLanes();
   await refresh();
@@ -107,7 +111,7 @@ watch(() => [selectedLaneId.value, reg.value], async ([laneId, registration], [o
 </script>
 
 <template>
-  <div class="modal is-active">
+  <div class="modal is-active" data-testid="self-serve-try-modal">
     <div class="modal-background" @click="closeModal"></div>
     <div class="modal-card" style="width: 95%; max-width: 1200px;">
       <header class="modal-card-head">
@@ -122,13 +126,13 @@ watch(() => [selectedLaneId.value, reg.value], async ([laneId, registration], [o
               <div class="columns is-multiline">
                 <div class="column is-4">
                   <label class="label">Registreringsnummer</label>
-                  <input v-model="reg" class="input" type="text" placeholder="AB12345">
+                  <input v-model="reg" class="input" type="text" placeholder="AB12345" data-testid="self-serve-try-reg" />
                 </div>
                 <div v-if="!props.laneId" class="column is-4">
                   <label class="label">Bane</label>
                   <div class="select is-fullwidth">
-                    <select v-model="selectedLaneId">
-                      <option :value="null">Vælg bane</option>
+                    <select v-model="selectedLaneId" data-testid="self-serve-try-lane">
+                      <option :value="null">Vaelg bane</option>
                       <option v-for="entry in availableLanes" :key="entry.id" :value="entry.id">
                         {{ entry.name }} (ID: {{ entry.id }})
                       </option>
@@ -140,7 +144,7 @@ watch(() => [selectedLaneId.value, reg.value], async ([laneId, registration], [o
                   <input class="input" :value="selectedLaneId" type="text" disabled>
                 </div>
                 <div class="column is-4 is-flex is-align-items-flex-end">
-                  <button class="button is-link is-fullwidth" :class="{ 'is-loading': loading }" @click="refresh">
+                  <button class="button is-link is-fullwidth" data-testid="self-serve-try-refresh" :class="{ 'is-loading': loading }" @click="refresh">
                     Hent preview
                   </button>
                 </div>
@@ -148,13 +152,13 @@ watch(() => [selectedLaneId.value, reg.value], async ([laneId, registration], [o
 
               <div class="tags mt-4">
                 <span class="tag" :class="allowed ? 'is-success' : 'is-light'">
-                  Tilladt: {{ allowed ? 'Ja' : 'Nej' }}
+                  Tilladt: {{ allowed ? "Ja" : "Nej" }}
                 </span>
                 <span class="tag" :class="machineAvailable ? 'is-success' : 'is-light'">
-                  Maskine tilgængelig: {{ machineAvailable ? 'Ja' : 'Nej' }}
+                  Maskine tilgaengelig: {{ machineAvailable ? "Ja" : "Nej" }}
                 </span>
                 <span class="tag" :class="allVisibleQuestionsAnswered ? 'is-success' : 'is-warning'">
-                  Alle synlige spørgsmål besvaret: {{ allVisibleQuestionsAnswered ? 'Ja' : 'Nej' }}
+                  Alle synlige sporgsmal besvaret: {{ allVisibleQuestionsAnswered ? "Ja" : "Nej" }}
                 </span>
                 <span v-if="session" class="tag is-info">
                   Session: {{ session.status }} (#{{ session.id }})
@@ -177,46 +181,31 @@ watch(() => [selectedLaneId.value, reg.value], async ([laneId, registration], [o
 
           <div class="column is-6">
             <div class="box" style="height: 100%">
-              <h4 class="title is-5">Spørgsmål</h4>
+              <h4 class="title is-5">Sporgsmal</h4>
 
               <div v-if="currentQuestion" class="notification is-info is-light">
                 <p class="title is-6">{{ currentQuestion.question }}</p>
                 <p v-if="currentQuestion.description" class="is-size-7 mb-3">{{ currentQuestion.description }}</p>
                 <div class="buttons">
                   <button class="button is-success" :class="{ 'is-loading': loading }" @click="submitAnswer(currentQuestion.id, true)">
-                    {{ $t('common.yes') }}
+                    {{ $t("common.yes") }}
                   </button>
                   <button class="button is-danger" :class="{ 'is-loading': loading }" @click="submitAnswer(currentQuestion.id, false)">
-                    {{ $t('common.no') }}
+                    {{ $t("common.no") }}
                   </button>
                 </div>
               </div>
 
               <div v-else class="notification is-success is-light">
-                <p>{{ visibleQuestions.length === 0 ? 'Ingen synlige spørgsmål for denne preview.' : 'Alle synlige spørgsmål er besvaret.' }}</p>
+                <p>{{ visibleQuestions.length === 0 ? "Ingen synlige sporgsmal for denne preview." : "Alle synlige sporgsmal er besvaret." }}</p>
               </div>
 
-              <table class="table is-fullwidth is-striped">
-                <thead>
-                  <tr>
-                    <th>Spørgsmål</th>
-                    <th>Svar</th>
-                  </tr>
-                </thead>
-                <tbody>
-                  <tr v-for="question in visibleQuestions" :key="question.id">
-                    <td>{{ question.question }}</td>
-                    <td>
-                      <span v-if="answers[question.id] === true" class="tag is-success">{{ $t('common.yes') }}</span>
-                      <span v-else-if="answers[question.id] === false" class="tag is-danger">{{ $t('common.no') }}</span>
-                      <span v-else class="tag is-light">Ikke besvaret</span>
-                    </td>
-                  </tr>
-                  <tr v-if="questions.length === 0">
-                    <td colspan="2" class="has-text-centered is-italic">Ingen spørgsmål fundet.</td>
-                  </tr>
-                </tbody>
-              </table>
+              <SelfServeQuestionCards
+                :visibleQuestions="visibleQuestions"
+                :answers="answers"
+                @answer-question="submitAnswer"
+              />
+              <p v-if="questions.length === 0" class="has-text-centered is-italic">Ingen sporgsmal fundet.</p>
             </div>
           </div>
 
@@ -224,24 +213,19 @@ watch(() => [selectedLaneId.value, reg.value], async ([laneId, registration], [o
             <div class="box" style="height: 100%">
               <h4 class="title is-5">Tasks og session</h4>
 
-              <div v-for="task in activeTasks" :key="task.id || task.task_id || task.task" class="notification is-warning is-light mb-3">
-                <p><strong>{{ task.task }}</strong></p>
-                <p v-if="task.description" class="is-size-7">{{ task.description }}</p>
-                <div v-if="task.services?.length" class="tags mt-2">
-                  <span v-for="service in task.services" :key="service" class="tag is-success">{{ service }}</span>
-                </div>
-                <div v-if="task.buttons?.length" class="tags mt-2">
-                  <span v-for="buttonId in task.buttons" :key="buttonId" class="tag is-link is-light">
-                    Button {{ buttonId }}
-                  </span>
-                </div>
-              </div>
+              <SelfServeTaskList
+                :tasks="activeTasks"
+                :completedTasks="emptyCompletedTasks"
+                :show-checkboxes="false"
+                @toggle-task="() => {}"
+                @download-attachment="() => {}"
+              />
 
               <p v-if="activeTasks.length === 0" class="is-italic">Ingen aktive tasks.</p>
 
-              <hr>
+              <hr />
 
-              <h5 class="subtitle is-6">Seneste hændelser</h5>
+              <h5 class="subtitle is-6">Seneste haendelser</h5>
               <ul>
                 <li v-for="event in events" :key="event.id" class="mb-2">
                   <strong>{{ event.type }}</strong>
@@ -250,13 +234,13 @@ watch(() => [selectedLaneId.value, reg.value], async ([laneId, registration], [o
                 <li v-if="events.length === 0" class="is-italic">Ingen session-events endnu.</li>
               </ul>
 
-              <hr>
+              <hr />
 
-              <h5 class="subtitle is-6">Besvarede spørgsmål</h5>
+              <h5 class="subtitle is-6">Besvarede sporgsmal</h5>
               <ul>
                 <li v-for="question in answeredQuestions" :key="question.id" class="mb-1">
                   {{ question.question }}:
-                  <strong>{{ answers[question.id] ? $t('common.yes') : $t('common.no') }}</strong>
+                  <strong>{{ answers[question.id] ? $t("common.yes") : $t("common.no") }}</strong>
                 </li>
                 <li v-if="answeredQuestions.length === 0" class="is-italic">Ingen besvarelser endnu.</li>
               </ul>
@@ -267,7 +251,7 @@ watch(() => [selectedLaneId.value, reg.value], async ([laneId, registration], [o
 
       <footer class="modal-card-foot">
         <div class="buttons is-right" style="width: 100%">
-          <button class="button" @click="closeModal">{{ $t('common.close') }}</button>
+          <button class="button" @click="closeModal">{{ $t("common.close") }}</button>
         </div>
       </footer>
     </div>
diff --git a/src/components/displays/selfServe/SelfServeCompletedStep.vue b/src/components/displays/selfServe/SelfServeCompletedStep.vue
new file mode 100644
index 00000000..10f04d84
--- /dev/null
+++ b/src/components/displays/selfServe/SelfServeCompletedStep.vue
@@ -0,0 +1,22 @@
+<script setup lang="ts">
+defineProps<{
+  completedDurationMs: number | null;
+}>();
+</script>
+
+<template>
+  <div data-testid="self-serve-completed-step">
+    <h1 class="title has-text-centered">{{ $t("self_wash.wash_completed") }}</h1>
+    <p class="has-text-centered">
+      {{ $t("self_wash.wash_completed_message") }}
+    </p>
+    <p v-if="completedDurationMs !== null" class="has-text-centered">
+      <strong>
+        {{ $t("self_wash.total_time", { minutes: Math.floor(completedDurationMs / 60000), seconds: Math.floor((completedDurationMs % 60000) / 1000) }) }}
+      </strong>
+    </p>
+    <p class="has-text-centered">
+      {{ $t("self_wash.wash_completed_contact") }}
+    </p>
+  </div>
+</template>
diff --git a/src/components/displays/selfServe/SelfServeDepartmentHeader.vue b/src/components/displays/selfServe/SelfServeDepartmentHeader.vue
new file mode 100644
index 00000000..95b0c6a9
--- /dev/null
+++ b/src/components/displays/selfServe/SelfServeDepartmentHeader.vue
@@ -0,0 +1,102 @@
+<script setup lang="ts">
+import { nextTick, ref, watch } from "vue";
+import { BAutocomplete, BField, BSkeleton } from "buefy";
+
+const props = defineProps<{
+  nearestDepartment: { id?: number; name?: string; address?: string } | null;
+  isForcingNearestDepartment: boolean;
+  isSearchingDepartments: boolean;
+  isSearchingLoading: boolean;
+  guestDepartments: Array<{ id: number; name: string }>;
+  canAccessSuperUser: boolean;
+}>();
+
+const emit = defineEmits<{
+  (e: "start-search"): void;
+  (e: "select-department", departmentId: number): void;
+  (e: "clear-forced"): void;
+}>();
+
+const searchElement = ref<HTMLElement | null>(null);
+
+watch(() => props.isSearchingDepartments, (isSearching) => {
+  if (!isSearching) {
+    return;
+  }
+
+  nextTick(() => {
+    if (searchElement.value && (searchElement.value as any).focus) {
+      (searchElement.value as any).focus();
+    }
+  });
+});
+</script>
+
+<template>
+  <div data-testid="self-serve-department-header">
+    <h3 class="title is-4 has-text-centered mb-4 has-text-link">
+      <b-skeleton
+        v-if="!nearestDepartment"
+        :width="300"
+        :height="24"
+        class="mb-2 is-centered"
+      />
+      <span v-else>
+        <template v-if="isForcingNearestDepartment && isSearchingDepartments">
+          <b-field>
+            <b-autocomplete
+              ref="searchElement"
+              data-testid="self-serve-department-search"
+              :data="guestDepartments"
+              field="name"
+              :placeholder="$t('global.search_departments')"
+              :keep-first="true"
+              :loading="isSearchingLoading"
+              expanded
+              open-on-focus
+              clear-on-select
+              @select="option => { if (option) emit('select-department', option.id); }"
+            >
+              <template #empty>{{ $t("self_wash.no_departments_found") }}</template>
+              <template #default="slotProps">
+                {{ slotProps.option.name }}
+              </template>
+            </b-autocomplete>
+          </b-field>
+        </template>
+        <template v-else>
+          <span
+            data-testid="self-serve-department-name"
+            :class="{ 'has-text-link is-clickable': canAccessSuperUser }"
+            @click="emit('start-search')"
+          >
+            {{ nearestDepartment ? nearestDepartment.name : $t("self_wash.loading_department") }}
+          </span>
+          <span v-if="isForcingNearestDepartment" class="ml-2">
+            <button
+              data-testid="self-serve-department-clear"
+              class="button is-small is-light is-danger"
+              @click="emit('clear-forced')"
+            >
+              <span class="icon is-small">
+                <i class="fas fa-times"></i>
+              </span>
+              <span>{{ $t("common.clear") }}</span>
+            </button>
+          </span>
+        </template>
+      </span>
+    </h3>
+    <h5 class="subtitle is-6 has-text-centered mb-4">
+      <b-skeleton
+        v-if="!nearestDepartment"
+        :width="200"
+        :height="20"
+        class="mb-4 is-centered"
+      />
+      <span v-else data-testid="self-serve-department-address">
+        {{ nearestDepartment.address }}
+      </span>
+    </h5>
+  </div>
+</template>
diff --git a/src/components/displays/selfServe/SelfServeGuidedInstructions.vue b/src/components/displays/selfServe/SelfServeGuidedInstructions.vue
new file mode 100644
index 00000000..a3a3d5b8
--- /dev/null
+++ b/src/components/displays/selfServe/SelfServeGuidedInstructions.vue
@@ -0,0 +1,85 @@
+<script setup lang="ts">
+import { BButton, BField } from "buefy";
+import ScrollableSteps from "@/components/displays/steps/ScrollableSteps.vue";
+
+const props = defineProps<{
+  steps: Array<any>;
+  currentStep: number;
+}>();
+
+const emit = defineEmits<{
+  (e: "update:currentStep", value: number): void;
+}>();
+
+const goPrevious = () => {
+  if (props.currentStep > 0) {
+    emit("update:currentStep", props.currentStep - 1);
+  }
+};
+
+const goNext = () => {
+  if (props.currentStep < props.steps.length - 1) {
+    emit("update:currentStep", props.currentStep + 1);
+  }
+};
+</script>
+
+<template>
+  <div data-testid="self-serve-guided-instructions">
+    <ScrollableSteps :maxHeight="'100%'">
+      <template #header>
+        <div class="level is-mobile">
+          <div class="level-left">
+            <div class="level-item">
+              <h3 class="title is-6">{{ $t("self_wash.follow_steps") }}</h3>
+            </div>
+          </div>
+        </div>
+      </template>
+      <template #steps>
+        <template v-for="(step, index) in steps" :key="index">
+          <section class="my-2" :data-testid="`self-serve-guided-step-${index}`">
+            <b-field :label="`${index + 1}. ${step.title}`">
+              <div class="content">
+                <div class="is-block has-background-light p-3" style="border-radius: 4px;">
+                  <template v-if="step.content">
+                    <p>{{ step.content }}</p>
+                  </template>
+                  <template v-for="(brush, brushIndex) in step.brushes" :key="brushIndex">
+                    <p><strong>{{ brush.label }}</strong> {{ brush.description }}</p>
+                    <p v-if="brush.warning" class="has-text-danger">
+                      <strong>{{ $t("common.warning") }}:</strong> {{ brush.warning }}
+                    </p>
+                  </template>
+                </div>
+              </div>
+            </b-field>
+          </section>
+        </template>
+      </template>
+    </ScrollableSteps>
+
+    <div class="buttons is-centered mt-4">
+      <b-button
+        type="is-link is-light"
+        icon-pack="fas"
+        icon-left="arrow-left"
+        data-testid="self-serve-guided-prev"
+        :disabled="currentStep === 0"
+        @click="goPrevious"
+      >
+        {{ $t("common.previous") }}
+      </b-button>
+      <b-button
+        type="is-link"
+        icon-pack="fas"
+        icon-right="arrow-right"
+        data-testid="self-serve-guided-next"
+        :disabled="currentStep === steps.length - 1"
+        @click="goNext"
+      >
+        {{ $t("common.next") }}
+      </b-button>
+    </div>
+  </div>
+</template>
diff --git a/src/components/displays/selfServe/SelfServeLaneStep.vue b/src/components/displays/selfServe/SelfServeLaneStep.vue
new file mode 100644
index 00000000..e4cf2b18
--- /dev/null
+++ b/src/components/displays/selfServe/SelfServeLaneStep.vue
@@ -0,0 +1,110 @@
+<script setup lang="ts">
+import { BField, BIcon, BMessage, BRadioButton } from "buefy";
+
+defineProps<{
+  lanes: Array<any>;
+  selectedLaneId: number | string | null;
+  washType: string;
+  isLaneAvailable: (lane: any) => boolean;
+  isMachineAvailable: (laneId: number | string | null) => boolean;
+  departmentName: string | null;
+}>();
+
+const emit = defineEmits<{
+  (e: "update:selectedLaneId", value: number): void;
+  (e: "update:washType", value: string): void;
+}>();
+</script>
+
+<template>
+  <div data-testid="self-serve-lane-step">
+    <h1 class="title has-text-centered">{{ $t("self_wash.start_wash") }}</h1>
+    <b-field :label="$t('self_wash.wash_lane')">
+      <div class="columns is-multiline is-mobile" :class="{ 'is-centered': lanes.length >= 2 }">
+        <template v-for="lane in lanes" :key="lane.id">
+          <div class="column is-half-mobile is-one-third-tablet is-one-quarter-desktop">
+            <b-radio-button
+              :model-value="selectedLaneId"
+              :native-value="lane.id"
+              type="is-link"
+              :data-testid="`self-serve-lane-option-${lane.id}`"
+              @update:model-value="emit('update:selectedLaneId', lane.id)"
+              @input="emit('update:selectedLaneId', lane.id)"
+            >
+              <span>
+                <span>{{ $t("self_wash.lane") }} {{ lane.name }}<br /></span>
+                <span v-if="!isLaneAvailable(lane)">
+                  <small>
+                    <b-icon icon="times-circle" type="is-danger" pack="fas" class="mr-1" />
+                    {{ $t("self_wash.occupied") }}
+                  </small>
+                </span>
+                <span v-else>
+                  <small>
+                    <b-icon icon="check-circle" type="is-success" pack="fas" class="mr-1" />
+                    {{ $t("self_wash.available") }}
+                  </small>
+                </span>
+              </span>
+            </b-radio-button>
+          </div>
+        </template>
+        <div v-if="lanes.length === 0" class="column is-12">
+          <b-message type="is-warning" aria-close-label="Luk besked">
+            Ingen vaskebaner tilgaengelige for selvvask i <b>{{ departmentName || "denne" }}</b> afdeling.
+          </b-message>
+        </div>
+      </div>
+    </b-field>
+
+    <b-field label="Maskine eller manuel vask">
+      <div class="columns is-mobile is-centered is-multiline">
+        <div class="column is-half-mobile is-one-third-tablet is-one-quarter-desktop">
+          <b-radio-button
+            :model-value="washType"
+            native-value="Manual"
+            type="is-link"
+            data-testid="self-serve-wash-type-manual"
+            @update:model-value="emit('update:washType', 'Manual')"
+            @input="emit('update:washType', 'Manual')"
+          >
+            <span>
+              <span>Manuel<br /></span>
+              <small>
+                <b-icon icon="check-circle" type="is-success" pack="fas" class="mr-1" />
+                Tilgaengelig
+              </small>
+            </span>
+          </b-radio-button>
+        </div>
+        <div class="column is-half-mobile is-one-third-tablet is-one-quarter-desktop">
+          <b-radio-button
+            :model-value="washType"
+            native-value="Machine"
+            type="is-link"
+            :disabled="!isMachineAvailable(selectedLaneId)"
+            data-testid="self-serve-wash-type-machine"
+            @update:model-value="emit('update:washType', 'Machine')"
+            @input="emit('update:washType', 'Machine')"
+          >
+            <span>
+              <span>{{ $t("self_wash.machine") }}<br /></span>
+              <span v-if="!isMachineAvailable(selectedLaneId)">
+                <small>
+                  <b-icon icon="times-circle" type="is-danger" pack="fas" class="mr-1" />
+                  {{ $t("self_wash.unavailable") }}
+                </small>
+              </span>
+              <span v-else>
+                <small>
+                  <b-icon icon="check-circle" type="is-success" pack="fas" class="mr-1" />
+                  {{ $t("self_wash.available") }}
+                </small>
+              </span>
+            </span>
+          </b-radio-button>
+        </div>
+      </div>
+    </b-field>
+  </div>
+</template>
diff --git a/src/components/displays/selfServe/SelfServeQuestionCards.vue b/src/components/displays/selfServe/SelfServeQuestionCards.vue
new file mode 100644
index 00000000..0c9c9605
--- /dev/null
+++ b/src/components/displays/selfServe/SelfServeQuestionCards.vue
@@ -0,0 +1,46 @@
+<script setup lang="ts">
+import WhiteBoxCard from "@/components/displays/boxes/WhiteBoxCard.vue";
+
+defineProps<{
+  visibleQuestions: Array<{ id: number; question: string; description?: string }>;
+  answers: Record<number, boolean | undefined>;
+}>();
+
+const emit = defineEmits<{
+  (e: "answer-question", questionId: number, value: boolean): void;
+}>();
+</script>
+
+<template>
+  <div data-testid="self-serve-question-cards">
+    <div v-for="question in visibleQuestions" :key="question.id" class="box mb-4" :data-testid="`self-serve-question-${question.id}`">
+      <WhiteBoxCard :hideHeader="true" :toggleable="false" :default-open="true" :force-state="true" :force-state-footer="true">
+        <template #content>
+          <p class="title is-5">{{ question.question }}</p>
+        </template>
+        <template #footer>
+          <div class="card-footer-item">
+            <button
+              class="button is-fullwidth"
+              :class="answers[question.id] === true ? 'is-success' : 'is-light'"
+              :data-testid="`self-serve-question-${question.id}-yes`"
+              @click="emit('answer-question', question.id, true)"
+            >
+              {{ $t("common.yes") }}
+            </button>
+          </div>
+          <div class="card-footer-item">
+            <button
+              class="button is-fullwidth"
+              :class="answers[question.id] === false ? 'is-danger' : 'is-light'"
+              :data-testid="`self-serve-question-${question.id}-no`"
+              @click="emit('answer-question', question.id, false)"
+            >
+              {{ $t("common.no") }}
+            </button>
+          </div>
+        </template>
+      </WhiteBoxCard>
+    </div>
+  </div>
+</template>
diff --git a/src/components/displays/selfServe/SelfServeQuestionsStep.vue b/src/components/displays/selfServe/SelfServeQuestionsStep.vue
new file mode 100644
index 00000000..c9826e9d
--- /dev/null
+++ b/src/components/displays/selfServe/SelfServeQuestionsStep.vue
@@ -0,0 +1,141 @@
+<script setup lang="ts">
+import { BButton, BIcon, BTooltip } from "buefy";
+import SelfServeQuestionCards from "@/components/displays/selfServe/SelfServeQuestionCards.vue";
+
+defineProps<{
+  isLoading: boolean;
+  visibleQuestions: Array<any>;
+  answers: Record<number, boolean | undefined>;
+  editAnswers: boolean;
+  showDebug: boolean;
+  conditions: Array<any>;
+  rules: Array<any>;
+  evaluateCondition: (conditionId: number) => boolean;
+  evaluateRule: (rule: any, visited?: Set<number>) => boolean;
+  isQuestionVisible: (question: any) => boolean;
+  getConditionById: (conditionId: number) => any;
+  getRuleTypeLabel: (type: string) => string;
+}>();
+
+const emit = defineEmits<{
+  (e: "toggle-debug"): void;
+  (e: "toggle-edit"): void;
+  (e: "answer-question", questionId: number, value: boolean): void;
+}>();
+
+const emitAnswerQuestion = (questionId: number, value: boolean) => {
+  emit("answer-question", questionId, value);
+};
+</script>
+
+<template>
+  <div data-testid="self-serve-questions-step">
+    <div v-if="isLoading" class="has-text-centered p-6">
+      <b-icon pack="fas" icon="spinner" custom-class="fa-pulse" size="is-large" />
+      <p>{{ $t("self_wash.loading_data") }}</p>
+    </div>
+    <div v-else>
+      <div class="is-flex is-justify-content-center is-align-items-center mb-4">
+        <h1 class="title mb-0">{{ $t("self_wash.answer_questions") }}</h1>
+        <b-button
+          size="is-small"
+          icon-left="bug"
+          type="is-ghost"
+          class="ml-2"
+          data-testid="self-serve-toggle-debug"
+          @click="emit('toggle-debug')"
+        >
+          Debug
+        </b-button>
+        <b-button
+          v-if="editAnswers"
+          size="is-small"
+          icon-left="check"
+          type="is-success"
+          class="ml-2"
+          data-testid="self-serve-toggle-edit"
+          @click="emit('toggle-edit')"
+        >
+          {{ $t("common.done") }}
+        </b-button>
+      </div>
+
+      <div v-if="showDebug" class="box mb-4 has-background-light" data-testid="self-serve-debug-panel">
+        <h5 class="subtitle is-5">Debug: Betingelser</h5>
+        <div class="tags">
+          <b-tooltip
+            v-for="condition in conditions"
+            :key="condition.id"
+            position="is-top"
+            multilined
+            type="is-dark"
+          >
+            <template #content>
+              <div class="has-text-left">
+                <p v-if="condition.description" class="mb-2"><i>{{ condition.description }}</i></p>
+                <p class="is-size-7 has-text-weight-bold mb-1">Regler:</p>
+                <div
+                  v-for="rule in rules.filter(entry => parseInt(entry.condition_id as any) === parseInt(condition.id))"
+                  :key="rule.id"
+                  class="is-size-7"
+                >
+                  <span class="icon is-small">
+                    <i :class="evaluateRule(rule, new Set([parseInt(condition.id)])) ? 'fas fa-check has-text-success' : 'fas fa-times has-text-danger'" />
+                  </span>
+                  <span class="ml-1">[{{ getRuleTypeLabel(rule.type) }}] {{ rule.name }}</span>
+                </div>
+              </div>
+            </template>
+            <span class="tag" :class="evaluateCondition(condition.id) ? 'is-success' : 'is-light'">
+              <span class="icon is-small mr-1">
+                <i :class="evaluateCondition(condition.id) ? 'fas fa-check-circle' : 'fas fa-times-circle'" />
+              </span>
+              {{ condition.name }}
+            </span>
+          </b-tooltip>
+        </div>
+
+        <hr />
+
+        <h5 class="subtitle is-5">Debug: Alle mulige sporgsmal (synlighed)</h5>
+        <ul>
+          <li v-for="question in visibleQuestions" :key="question.id" class="is-size-7">
+            <span class="icon is-small">
+              <i :class="isQuestionVisible(question) ? 'fas fa-eye has-text-success' : 'fas fa-eye-slash has-text-grey-light'" />
+            </span>
+            {{ question.question }}
+            <b-tooltip v-if="question.condition_id" position="is-top" multilined type="is-dark">
+              <template #content>
+                <div v-if="getConditionById(question.condition_id)" class="has-text-left">
+                  <p v-if="getConditionById(question.condition_id).description" class="mb-2">
+                    <i>{{ getConditionById(question.condition_id).description }}</i>
+                  </p>
+                  <p class="is-size-7 has-text-weight-bold mb-1">Regler:</p>
+                  <div
+                    v-for="rule in rules.filter(entry => parseInt(entry.condition_id as any) === parseInt(question.condition_id))"
+                    :key="rule.id"
+                    class="is-size-7"
+                  >
+                    <span class="icon is-small">
+                      <i :class="evaluateRule(rule, new Set([parseInt(question.condition_id)])) ? 'fas fa-check has-text-success' : 'fas fa-times has-text-danger'" />
+                    </span>
+                    <span class="ml-1">[{{ getRuleTypeLabel(rule.type) }}] {{ rule.name }}</span>
+                  </div>
+                </div>
+              </template>
+              <span class="has-text-grey is-clickable">
+                (Hvis: {{ getConditionById(question.condition_id)?.name || question.condition_id }})
+              </span>
+            </b-tooltip>
+          </li>
+        </ul>
+      </div>
+
+      <SelfServeQuestionCards
+        :visibleQuestions="visibleQuestions"
+        :answers="answers"
+        @answer-question="emitAnswerQuestion"
+      />
+    </div>
+  </div>
+</template>
diff --git a/src/components/displays/selfServe/SelfServeTaskList.vue b/src/components/displays/selfServe/SelfServeTaskList.vue
new file mode 100644
index 00000000..4d60b483
--- /dev/null
+++ b/src/components/displays/selfServe/SelfServeTaskList.vue
@@ -0,0 +1,85 @@
+<script setup lang="ts">
+import { BCheckbox, BField, BIcon } from "buefy";
+
+const props = withDefaults(defineProps<{
+  tasks: Array<any>;
+  completedTasks: Record<number, boolean>;
+  showCheckboxes?: boolean;
+}>(), {
+  showCheckboxes: true,
+});
+
+const emit = defineEmits<{
+  (e: "toggle-task", taskId: number, value: boolean): void;
+  (e: "download-attachment", taskId: number, attachmentId: number): void;
+}>();
+
+const isImageAttachment = (attachment: any) => (
+  !!attachment.download_link
+  && !!attachment.content?.other
+  && attachment.content.other.match(/\.(jpg|jpeg|png|gif|webp|svg)$/i)
+);
+</script>
+
+<template>
+  <div data-testid="self-serve-task-list">
+    <div
+      v-for="task in tasks"
+      :key="task.id || task.task_id || task.task"
+      class="notification is-warning is-light mb-4"
+      :class="{ 'is-success': completedTasks[task.id] }"
+      :data-testid="`self-serve-task-${task.id}`"
+    >
+      <div class="columns is-mobile is-vcentered">
+        <div v-if="props.showCheckboxes" class="column is-narrow">
+          <b-field>
+            <b-checkbox
+              size="is-large"
+              :model-value="completedTasks[task.id] === true"
+              type="is-success"
+              :data-testid="`self-serve-task-${task.id}-toggle`"
+              @update:model-value="emit('toggle-task', task.id, $event)"
+              @input="emit('toggle-task', task.id, $event)"
+            />
+          </b-field>
+        </div>
+        <div class="column">
+          <p><strong>{{ task.task }}</strong></p>
+          <p v-if="task.description" class="is-size-7">{{ task.description }}</p>
+          <div v-if="task.services?.length" class="tags mt-2">
+            <span v-for="service in task.services" :key="service" class="tag is-success">{{ service }}</span>
+          </div>
+          <div v-if="task.buttons?.length" class="tags mt-2">
+            <span v-for="buttonId in task.buttons" :key="buttonId" class="tag is-link is-light">
+              Button {{ buttonId }}
+            </span>
+          </div>
+          <div v-if="task.attachments && task.attachments.length > 0" class="mt-2">
+            <div v-for="attachment in task.attachments" :key="attachment.id" class="mb-2">
+              <template v-if="isImageAttachment(attachment)">
+                <img
+                  :src="attachment.download_link"
+                  :alt="attachment.content?.other"
+                  style="max-width: 100%; height: auto; border-radius: 4px; display: block;"
+                  class="mb-1 is-clickable"
+                  :data-testid="`self-serve-task-${task.id}-attachment-${attachment.id}`"
+                  @click="emit('download-attachment', task.id, attachment.id)"
+                />
+              </template>
+              <div v-else class="is-flex is-align-items-center">
+                <b-icon pack="fas" icon="paperclip" size="is-small" class="mr-1" />
+                <a
+                  class="is-size-7"
+                  :data-testid="`self-serve-task-${task.id}-attachment-${attachment.id}`"
+                  @click="emit('download-attachment', task.id, attachment.id)"
+                >
+                  {{ attachment.content?.other || $t("self_wash.attached_file") }}
+                </a>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/src/components/displays/selfServe/SelfServeTasksStep.vue b/src/components/displays/selfServe/SelfServeTasksStep.vue
new file mode 100644
index 00000000..3649a60a
--- /dev/null
+++ b/src/components/displays/selfServe/SelfServeTasksStep.vue
@@ -0,0 +1,64 @@
+<script setup lang="ts">
+import { BIcon } from "buefy";
+import SelfServeTaskList from "@/components/displays/selfServe/SelfServeTaskList.vue";
+
+defineProps<{
+  isLoading: boolean;
+  formattedElapsed: string;
+  dynamicImageUrl: string | null;
+  activeTasks: Array<any>;
+  completedTasks: Record<number, boolean>;
+  allVisibleQuestionsAnswered: boolean;
+  editAnswers: boolean;
+}>();
+
+const emit = defineEmits<{
+  (e: "toggle-task", taskId: number, value: boolean): void;
+  (e: "download-attachment", taskId: number, attachmentId: number): void;
+  (e: "clear-dynamic-image"): void;
+}>();
+
+const emitToggleTask = (taskId: number, value: boolean) => {
+  emit("toggle-task", taskId, value);
+};
+
+const emitDownloadAttachment = (taskId: number, attachmentId: number) => {
+  emit("download-attachment", taskId, attachmentId);
+};
+</script>
+
+<template>
+  <div data-testid="self-serve-tasks-step">
+    <div v-if="isLoading" class="has-text-centered p-6">
+      <b-icon pack="fas" icon="spinner" custom-class="fa-pulse" size="is-large" />
+      <p>{{ $t("self_wash.loading_data") }}</p>
+    </div>
+    <div v-else class="mt-6">
+      <div style="position: sticky; top: 0; background-color: white; z-index: 10; padding-top: 1rem; padding-bottom: 1rem; border-bottom: 1px solid #ddd; margin-bottom: 1rem;">
+        <h1 class="title has-text-centered">{{ $t("self_wash.wash_in_progress") }}</h1>
+        <h2 class="subtitle has-text-centered">
+          <strong data-testid="self-serve-elapsed">{{ formattedElapsed }}</strong>
+        </h2>
+      </div>
+      <div v-if="dynamicImageUrl" class="mb-4">
+        <img
+          :src="dynamicImageUrl"
+          alt="Machine status"
+          data-testid="self-serve-dynamic-image"
+          style="max-width: 100%; height: auto; border-radius: 4px; display: block; margin-left: auto; margin-right: auto;"
+          @error="emit('clear-dynamic-image')"
+        />
+      </div>
+      <div v-show="allVisibleQuestionsAnswered && !editAnswers" class="notification is-info is-light mb-4">
+        <h1 class="title has-text-centered mb-2" v-if="activeTasks.length > 0">{{ $t("self_wash.start_machine") }}</h1>
+        <h1 class="title has-text-centered mb-2" v-else>{{ $t("self_wash.questions_answered") }}</h1>
+        <SelfServeTaskList
+          :tasks="activeTasks"
+          :completedTasks="completedTasks"
+          @toggle-task="emitToggleTask"
+          @download-attachment="emitDownloadAttachment"
+        />
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/src/components/displays/selfServe/SelfServeVehicleStep.vue b/src/components/displays/selfServe/SelfServeVehicleStep.vue
new file mode 100644
index 00000000..67207250
--- /dev/null
+++ b/src/components/displays/selfServe/SelfServeVehicleStep.vue
@@ -0,0 +1,95 @@
+<script setup lang="ts">
+import { BAutocomplete, BField, BInput, BMessage } from "buefy";
+import SelfServeVehicleTypeSelector from "@/components/displays/selfServe/SelfServeVehicleTypeSelector.vue";
+
+defineProps<{
+  customerNumber: string | number | null;
+  showCustomerNumberInput: boolean;
+  registrationNumber: string | null;
+  registrationOptions: string[];
+  isCustomerVehiclesLoading: boolean;
+  hasMatchingVehicle: boolean;
+  selectedVehicleTypeId: number | null;
+  selectedVehicleName: string | null;
+  selectedVehicleDescription: string | null;
+  availableProductIds: number[];
+  vehicleTypes: Array<any>;
+}>();
+
+const emit = defineEmits<{
+  (e: "update:customerNumber", value: string): void;
+  (e: "update:registrationNumber", value: string): void;
+  (e: "select-vehicle-type", selection: any): void;
+}>();
+
+const normalizeRegistration = (value: string | null | undefined) => (value || "").toUpperCase();
+</script>
+
+<template>
+  <div data-testid="self-serve-vehicle-step">
+    <h1 class="title has-text-centered">{{ $t("self_wash.vehicle") }}</h1>
+    <b-field v-if="showCustomerNumberInput" :label="$t('self_wash.customer_number')">
+      <b-input
+        :model-value="customerNumber || ''"
+        data-testid="self-serve-customer-number"
+        :placeholder="$t('self_wash.enter_customer_number')"
+        @input="emit('update:customerNumber', String($event || ''))"
+      />
+    </b-field>
+    <b-field :label="$t('self_wash.registration_number')">
+      <b-autocomplete
+        :model-value="registrationNumber || ''"
+        data-testid="self-serve-registration"
+        :data="registrationOptions"
+        :placeholder="$t('self_wash.enter_registration_number')"
+        :debounce="300"
+        :min-length="1"
+        :filter="(option, query) => option.toLowerCase().includes(query.toLowerCase())"
+        icon-pack="fas"
+        icon="car-side"
+        clearable
+        :loading="registrationOptions.length === 0 && isCustomerVehiclesLoading"
+        :selectable-header="true"
+        @select="emit('update:registrationNumber', normalizeRegistration(registrationNumber))"
+        @input="emit('update:registrationNumber', normalizeRegistration($event))"
+        @select-header="emit('update:registrationNumber', normalizeRegistration(registrationNumber))"
+      >
+        <template #header>
+          <template v-if="hasMatchingVehicle">
+            {{ $t("self_wash.select_from_vehicles", { plate: registrationNumber }) }}
+          </template>
+          <template v-else>
+            {{ $t("self_wash.add_as_new_vehicle", { plate: registrationNumber }) }}
+          </template>
+        </template>
+        <template #empty>{{ $t("self_wash.no_vehicles_found") }}</template>
+      </b-autocomplete>
+    </b-field>
+    <b-field :label="$t('self_wash.select_your_vehicle')">
+      <template v-if="availableProductIds.length > 0 && !selectedVehicleTypeId">
+        <SelfServeVehicleTypeSelector
+          :selectedVehicleTypeId="selectedVehicleTypeId"
+          :restrictToProductIds="availableProductIds"
+          @selected="emit('select-vehicle-type', $event)"
+        />
+      </template>
+      <template v-else-if="availableProductIds.length > 0 && selectedVehicleTypeId">
+        <div class="box has-background-light has-text-centered p-4" data-testid="self-serve-selected-vehicle-type">
+          <p class="title is-6 mb-2">{{ $t("self_wash.select_vehicle_type") }} {{ $t("common.selected") }}</p>
+          <p><strong>{{ selectedVehicleName }}</strong></p>
+          <p v-if="selectedVehicleDescription" class="is-size-7 mt-2">{{ selectedVehicleDescription }}</p>
+        </div>
+      </template>
+      <template v-else-if="vehicleTypes.length === 0">
+        <b-message type="is-info" :aria-close-label="$t('common.close')">
+          {{ $t("self_wash.loading_vehicle_types") }}
+        </b-message>
+      </template>
+      <template v-else>
+        <b-message type="is-warning" :aria-close-label="$t('common.close')">
+          {{ $t("self_wash.department_no_self_wash") }}
+        </b-message>
+      </template>
+    </b-field>
+  </div>
+</template>
diff --git a/src/components/displays/selfServe/SelfServeVehicleTypeSelector.vue b/src/components/displays/selfServe/SelfServeVehicleTypeSelector.vue
new file mode 100644
index 00000000..997a51e8
--- /dev/null
+++ b/src/components/displays/selfServe/SelfServeVehicleTypeSelector.vue
@@ -0,0 +1,185 @@
+<script setup lang="ts">
+import { computed, onMounted, ref, watch } from "vue";
+import { BSkeleton } from "buefy";
+import WhiteBoxCard from "@/components/displays/boxes/WhiteBoxCard.vue";
+import { SessionUser } from "@/components/session/token/SessionUser.vue";
+import { getPicture } from "@/components/displays/department/pos/displays/Piktogrammer.vue";
+import type { PosProduct } from "@/components/displays/department/pos/steps/mobile/objects/PosProduct.vue";
+
+type VehicleTypeTemplate = {
+  id: number;
+  name: string;
+  price: number;
+  product?: PosProduct;
+  selected?: boolean;
+  loading?: boolean;
+};
+
+const props = defineProps<{
+  selectedVehicleTypeId?: number | null;
+  restrictToProductIds?: number[];
+}>();
+
+const emit = defineEmits<{
+  (e: "selected", vehicleType: VehicleTypeTemplate): void;
+}>();
+
+const getLoadingVehicleTypes = (count: number): VehicleTypeTemplate[] => {
+  const loadingTypes: VehicleTypeTemplate[] = [];
+  for (let index = 0; index < count; index += 1) {
+    loadingTypes.push({
+      id: index,
+      name: "Indlaeser...",
+      price: 0,
+      loading: true,
+    });
+  }
+  return loadingTypes;
+};
+
+const vehicleTypes = ref<VehicleTypeTemplate[]>(getLoadingVehicleTypes(6));
+
+const filteredVehicleTypes = computed(() => {
+  if (!props.restrictToProductIds || props.restrictToProductIds.length === 0) {
+    return vehicleTypes.value;
+  }
+
+  return vehicleTypes.value.filter((type) => {
+    if (type.loading) {
+      return true;
+    }
+    if (!type.product) {
+      return false;
+    }
+    return props.restrictToProductIds?.includes(type.product.id);
+  });
+});
+
+const fetchVehicleTypes = async () => {
+  try {
+    const response = await SessionUser.objects.vehicles.columns.type.options(true, {
+      isWash: true,
+      addDefaultOption: true,
+      restrictToCategory4: null,
+      includeProductRaw: true,
+    });
+
+    vehicleTypes.value = response.map((type: any) => ({
+      id: type.id,
+      name: type.name,
+      price: type.price,
+      product: type.product as PosProduct,
+      selected: props.selectedVehicleTypeId === type.id,
+    }));
+  } catch (error) {
+    console.error("Error fetching vehicle types:", error);
+  }
+};
+
+const selectVehicleType = (vehicleType: VehicleTypeTemplate) => {
+  if (vehicleType.loading) {
+    return;
+  }
+
+  vehicleTypes.value.forEach((type) => {
+    if (!type.loading) {
+      type.selected = type.id === vehicleType.id;
+    }
+  });
+
+  emit("selected", vehicleType);
+};
+
+onMounted(() => {
+  fetchVehicleTypes();
+});
+
+watch(() => props.selectedVehicleTypeId, (newId) => {
+  vehicleTypes.value.forEach((type) => {
+    if (!type.loading) {
+      type.selected = type.id === newId;
+    }
+  });
+});
+</script>
+
+<template>
+  <div data-testid="self-serve-vehicle-selector">
+    <div class="columns is-multiline is-mobile is-gapless">
+      <template v-for="vehicleType in filteredVehicleTypes" :key="vehicleType.id">
+        <div class="column is-one-third">
+          <div class="vehicle-type-content">
+            <WhiteBoxCard
+              :toggleable="false"
+              :hideHeader="true"
+              :hasHoverEffect="true"
+              :hasSelectedStyle="vehicleType?.selected"
+              :hasSelectionStyle="!vehicleType?.selected"
+              :data-testid="`self-serve-vehicle-type-${vehicleType.id}`"
+              @click="selectVehicleType(vehicleType)"
+            >
+              <template #default>
+                <div class="is-align-content-center">
+                  <div style="height: 60px; width: 60px; margin: 0 auto;" class="centered-image-container">
+                    <img
+                      v-if="!vehicleType.loading"
+                      :src="getPicture(vehicleType.product?.piktogram)"
+                      :alt="vehicleType.name"
+                      class="image"
+                    />
+                    <b-skeleton v-else height="60px" width="60px" />
+                  </div>
+                </div>
+              </template>
+            </WhiteBoxCard>
+          </div>
+        </div>
+      </template>
+      <div class="column is-full mt-3">
+        <div class="vehicle-type-description" data-testid="self-serve-vehicle-selector-description">
+          <p class="has-text-centered p-2">
+            <template v-if="filteredVehicleTypes.some(type => type.selected)">
+              Du har valgt:
+              <strong>{{ filteredVehicleTypes.find(type => type.selected)?.name }}</strong>
+              <template v-if="filteredVehicleTypes.find(type => type.selected)?.product?.description">
+                <br />{{ filteredVehicleTypes.find(type => type.selected)?.product?.description }}
+              </template>
+            </template>
+            <template v-else>
+              Vaelg venligst din koretojstype ved at klikke pa ikonet ovenfor.
+            </template>
+          </p>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.centered-image-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.vehicle-type-content {
+  padding: 5px;
+}
+
+.vehicle-type-content:nth-child(3n + 1) {
+  padding-left: 0;
+}
+
+.vehicle-type-content:nth-child(3n) {
+  padding-right: 0;
+}
+
+.vehicle-type-description {
+  background-color: rgba(0, 0, 0, 0.08);
+  border-radius: 5px;
+  min-height: 64px;
+  justify-content: center;
+  display: flex;
+  align-items: center;
+}
+</style>
diff --git a/src/composables/useSelfServeLogic.js b/src/composables/useSelfServeLogic.js
index a6347712..d3047308 100644
--- a/src/composables/useSelfServeLogic.js
+++ b/src/composables/useSelfServeLogic.js
@@ -19,6 +19,23 @@ const normalizeQuestion = (question) => ({
   answered_at: question?.answered_at ?? null,
 });
 
+const normalizeCondition = (condition) => ({
+  id: parseInt(condition?.id ?? condition?.condition_id ?? 0),
+  condition_id: condition?.condition_id ? parseInt(condition.condition_id) : null,
+  name: condition?.name ?? "",
+  description: condition?.description ?? "",
+});
+
+const normalizeRule = (rule) => ({
+  id: parseInt(rule?.id ?? 0),
+  condition_id: parseInt(rule?.condition_id ?? 0),
+  object_type: rule?.object_type ?? "question",
+  object_id: parseInt(rule?.object_id ?? 0),
+  type: rule?.type ?? "",
+  name: rule?.name ?? "",
+  description: rule?.description ?? "",
+});
+
 const normalizeTask = (task) => ({
   id: parseInt(task?.id ?? task?.task_id ?? 0) || null,
   task_id: parseInt(task?.task_id ?? task?.id ?? 0) || null,
@@ -123,6 +140,13 @@ export function useSelfServeLogic() {
     questions.value = normalizedQuestions;
     answers.value = buildAnswersMap(normalizedQuestions);
 
+    conditions.value = Array.isArray(previewData?.conditions)
+      ? previewData.conditions.map(normalizeCondition)
+      : [];
+    rules.value = Array.isArray(previewData?.rules)
+      ? previewData.rules.map(normalizeRule)
+      : [];
+
     const normalizedTasks = Array.isArray(previewData?.tasks)
       ? previewData.tasks.map(normalizeTask).sort((a, b) => a.order_priority - b.order_priority)
       : [];
@@ -158,6 +182,14 @@ export function useSelfServeLogic() {
       answers.value = buildAnswersMap(normalizedQuestions);
     }
 
+    if (Array.isArray(summaryData?.conditions)) {
+      conditions.value = summaryData.conditions.map(normalizeCondition);
+    }
+
+    if (Array.isArray(summaryData?.rules)) {
+      rules.value = summaryData.rules.map(normalizeRule);
+    }
+
     if (Array.isArray(summaryData?.tasks)) {
       const normalizedTasks = summaryData.tasks
         .map(normalizeTask)
@@ -214,6 +246,8 @@ export function useSelfServeLogic() {
       vehicle.value = null;
       events.value = [];
       questions.value = [];
+      conditions.value = [];
+      rules.value = [];
       tasks.value = [];
       allowedServices.value = [];
       answers.value = {};
@@ -283,19 +317,38 @@ export function useSelfServeLogic() {
   };
 
   const answerQuestion = (questionId, value) => {
-    answers.value[questionId] = value;
+    answers.value = {
+      ...answers.value,
+      [questionId]: value,
+    };
   };
 
   const removeAnswer = (questionId) => {
-    delete answers.value[questionId];
+    const updatedAnswers = { ...answers.value };
+    delete updatedAnswers[questionId];
+    answers.value = updatedAnswers;
   };
 
   const visibleQuestions = computed(() => {
-    return [...questions.value].sort((a, b) => a.order_priority - b.order_priority);
+    return [...questions.value]
+      .filter((question) => {
+        if (!question.condition_id || parseInt(question.condition_id) === 0) {
+          return true;
+        }
+        return evaluateCondition(question.condition_id);
+      })
+      .sort((a, b) => a.order_priority - b.order_priority);
   });
 
   const activeTasks = computed(() => {
-    return [...tasks.value].sort((a, b) => a.order_priority - b.order_priority);
+    return [...tasks.value]
+      .filter((task) => {
+        if (!task.condition_id || parseInt(task.condition_id) === 0) {
+          return true;
+        }
+        return evaluateCondition(task.condition_id);
+      })
+      .sort((a, b) => a.order_priority - b.order_priority);
   });
 
   const activeTaskServices = computed(() => {
@@ -314,8 +367,60 @@ export function useSelfServeLogic() {
   const machineAvailable = computed(() => preview.value?.machine_available === true);
   const allowed = computed(() => preview.value?.allowed === true || session.value?.allowed === true);
 
-  const evaluateRule = () => false;
-  const evaluateCondition = () => false;
+  const evaluateCondition = (conditionId, visited = new Set()) => {
+    const normalizedConditionId = parseInt(conditionId);
+    if (!normalizedConditionId) {
+      return true;
+    }
+    if (visited.has(normalizedConditionId)) {
+      return false;
+    }
+
+    const conditionRules = rules.value.filter((rule) => parseInt(rule.condition_id) === normalizedConditionId);
+    if (conditionRules.length === 0) {
+      return false;
+    }
+
+    const nextVisited = new Set(visited);
+    nextVisited.add(normalizedConditionId);
+    return conditionRules.every((rule) => evaluateRule(rule, nextVisited));
+  };
+
+  const evaluateRule = (rule, visited = new Set()) => {
+    const objectId = parseInt(rule?.object_id ?? 0);
+    let targetValue = null;
+
+    if (rule?.object_type === "condition") {
+      targetValue = evaluateCondition(objectId, visited);
+    } else {
+      targetValue = answers.value[objectId];
+    }
+
+    switch (rule?.type) {
+      case "IS_TRUE":
+        return targetValue === true;
+      case "IS_FALSE":
+        return targetValue === false;
+      case "IS_TRUE_OR_NOT_SET":
+        return targetValue === true || targetValue === null || typeof targetValue === "undefined";
+      case "IS_FALSE_OR_NOT_SET":
+        return targetValue === false || targetValue === null || typeof targetValue === "undefined";
+      case "IS_SET":
+        return targetValue === true || targetValue === false;
+      case "IS_TRUE_OR_ANY_TRUE":
+        if (targetValue === true) {
+          return true;
+        }
+        if (rule?.object_type === "condition") {
+          const nestedRules = rules.value.filter((entry) => parseInt(entry.condition_id) === objectId);
+          return nestedRules.some((entry) => evaluateRule(entry, new Set(visited)));
+        }
+        return false;
+      default:
+        return false;
+    }
+  };
+
   const isQuestionVisible = (question) => visibleQuestions.value.some((entry) => entry.id === question.id);
   const isTaskActive = (taskId) => activeTasks.value.some((task) => extractTaskId(task) === parseInt(taskId));
 
diff --git a/src/composables/useWashDepartments.js b/src/composables/useWashDepartments.js
new file mode 100644
index 00000000..351adcc1
--- /dev/null
+++ b/src/composables/useWashDepartments.js
@@ -0,0 +1,224 @@
+import { computed, nextTick, onUnmounted, ref, watch } from "vue";
+import { getDepartmentsGuest } from "@/components/pagination/departmentTabs.vue";
+import { locations } from "@/components/displays/department/pos/steps/mobile/objects/PosDepartmentStepMobileFlow.vue";
+
+const toDepartmentViewModel = (department, distance = null) => ({
+  id: department.id,
+  distance,
+  name: department.name,
+  address: department.address,
+  lanes: department.lanes || [],
+  self_serve_enabled: department.self_serve_enabled,
+});
+
+export function useWashDepartments(options = {}) {
+  const {
+    includeLanes = false,
+    refreshIntervalMs = 0,
+    canAccessSuperUser = () => false,
+  } = options;
+
+  const guestDepartments = ref([]);
+  const nearestDepartment = ref(null);
+  const isForcingNearestDepartment = ref(false);
+  const forceNearestDepartmentEvaluationId = ref(0);
+  const isSearchingDepartments = ref(false);
+  const lastDepartmentFetchTime = ref(null);
+
+  let refreshInterval = null;
+
+  const availableProductIds = computed(() => {
+    const productIds = [];
+    const lanes = nearestDepartment.value?.lanes || [];
+
+    lanes.forEach((lane) => {
+      (lane.products || []).forEach((productId) => {
+        if (!productIds.includes(productId)) {
+          productIds.push(productId);
+        }
+      });
+    });
+
+    return productIds;
+  });
+
+  const doesCurrentDepartmentSelectionHaveSelfServeEnabled = computed(() => {
+    if (!nearestDepartment.value) {
+      return false;
+    }
+
+    return nearestDepartment.value.self_serve_enabled === true;
+  });
+
+  const buildGuestDepartmentParams = () => (
+    includeLanes ? { include_lanes: true } : {}
+  );
+
+  const fetchDepartments = async () => {
+    guestDepartments.value = await getDepartmentsGuest(buildGuestDepartmentParams());
+    lastDepartmentFetchTime.value = Date.now();
+    evaluateLocationDepartments(locations.location.value);
+    return guestDepartments.value;
+  };
+
+  const refreshDepartmentsIfStale = async () => {
+    if (!refreshIntervalMs) {
+      return guestDepartments.value;
+    }
+
+    const currentTime = Date.now();
+    if (
+      !lastDepartmentFetchTime.value
+      || (currentTime - lastDepartmentFetchTime.value) >= refreshIntervalMs
+    ) {
+      return fetchDepartments();
+    }
+
+    return guestDepartments.value;
+  };
+
+  const getForcedDepartment = () => guestDepartments.value.find(
+    (department) => department.id === forceNearestDepartmentEvaluationId.value
+  );
+
+  const evaluateLocationDepartments = (locationValue = locations.location.value) => {
+    if (isForcingNearestDepartment.value && forceNearestDepartmentEvaluationId.value) {
+      const forcedDepartment = getForcedDepartment();
+      if (forcedDepartment) {
+        nearestDepartment.value = toDepartmentViewModel(forcedDepartment);
+        return nearestDepartment.value;
+      }
+    }
+
+    let currentNearestDepartment = {
+      id: null,
+      distance: Infinity,
+    };
+
+    guestDepartments.value.forEach((department) => {
+      if (!locationValue?.coords) {
+        return;
+      }
+
+      const from = {
+        latitude: locationValue.coords.latitude,
+        longitude: locationValue.coords.longitude,
+      };
+      const to = {
+        latitude: department.latitude,
+        longitude: department.longitude,
+      };
+      const distance = locations.getDistance(from, to);
+
+      if (distance < currentNearestDepartment.distance) {
+        currentNearestDepartment = toDepartmentViewModel(department, distance);
+      }
+    });
+
+    if (currentNearestDepartment.id) {
+      nearestDepartment.value = currentNearestDepartment;
+    }
+
+    return nearestDepartment.value;
+  };
+
+  const orderDepartmentsByDistance = (departmentsList = guestDepartments.value) => {
+    if (!locations.location.value?.coords) {
+      return departmentsList;
+    }
+
+    return departmentsList.slice().sort((departmentA, departmentB) => {
+      const currentCoords = locations.location.value.coords;
+      const distanceA = locations.getDistance(
+        { latitude: currentCoords.latitude, longitude: currentCoords.longitude },
+        { latitude: departmentA.latitude, longitude: departmentA.longitude }
+      );
+      const distanceB = locations.getDistance(
+        { latitude: currentCoords.latitude, longitude: currentCoords.longitude },
+        { latitude: departmentB.latitude, longitude: departmentB.longitude }
+      );
+
+      return distanceA - distanceB;
+    });
+  };
+
+  const startDepartmentSearch = () => {
+    if (!canAccessSuperUser()) {
+      return;
+    }
+
+    isForcingNearestDepartment.value = true;
+    isSearchingDepartments.value = true;
+  };
+
+  const selectDepartment = (departmentId) => {
+    forceNearestDepartmentEvaluationId.value = departmentId;
+    isSearchingDepartments.value = false;
+    isForcingNearestDepartment.value = true;
+    evaluateLocationDepartments(locations.location.value);
+  };
+
+  const clearForcedDepartment = () => {
+    nextTick(() => {
+      isForcingNearestDepartment.value = false;
+      forceNearestDepartmentEvaluationId.value = 0;
+      isSearchingDepartments.value = false;
+      evaluateLocationDepartments(locations.location.value);
+    });
+  };
+
+  const startAutoRefresh = () => {
+    if (!refreshIntervalMs || refreshInterval) {
+      return;
+    }
+
+    refreshInterval = setInterval(() => {
+      refreshDepartmentsIfStale();
+    }, refreshIntervalMs);
+  };
+
+  const stopAutoRefresh = () => {
+    if (refreshInterval) {
+      clearInterval(refreshInterval);
+      refreshInterval = null;
+    }
+  };
+
+  watch(() => guestDepartments.value, () => {
+    evaluateLocationDepartments(locations.location.value);
+  }, { deep: true });
+
+  watch(() => locations.location.value, (newValue) => {
+    evaluateLocationDepartments(newValue);
+  }, { deep: true });
+
+  watch(() => isSearchingDepartments.value, (isSearching) => {
+    if (!isSearching) {
+      evaluateLocationDepartments(locations.location.value);
+    }
+  });
+
+  onUnmounted(() => {
+    stopAutoRefresh();
+  });
+
+  return {
+    guestDepartments,
+    nearestDepartment,
+    isForcingNearestDepartment,
+    forceNearestDepartmentEvaluationId,
+    isSearchingDepartments,
+    lastDepartmentFetchTime,
+    availableProductIds,
+    doesCurrentDepartmentSelectionHaveSelfServeEnabled,
+    fetchDepartments,
+    refreshDepartmentsIfStale,
+    evaluateLocationDepartments,
+    orderDepartmentsByDistance,
+    startDepartmentSearch,
+    selectDepartment,
+    clearForcedDepartment,
+    startAutoRefresh,
+    stopAutoRefresh,
+  };
+}
diff --git a/src/composables/useWashFlowState.js b/src/composables/useWashFlowState.js
new file mode 100644
index 00000000..9e459e90
--- /dev/null
+++ b/src/composables/useWashFlowState.js
@@ -0,0 +1,162 @@
+export const WASH_STEPS = {
+  VEHICLE: 0,
+  QUESTIONS: 1,
+  SELECT_LANE: 2,
+  TASKS: 3,
+  WASH_IN_PROGRESS: 4,
+  COMPLETED: 5,
+};
+
+export function useWashFlowState(options) {
+  const {
+    currentStep,
+    washInProgress,
+    customerNumberInput,
+    licensePlateInput,
+    vehicleTypeSelect,
+    availableProductIds,
+    radioLaneOption,
+    nearestDepartment,
+    allVisibleQuestionsAnswered,
+    isLoadingSelfServeData,
+    activeTasks,
+    completedTasks,
+    editAnswers,
+    isLaneAvailable,
+    isMachineAvailable,
+    onStartWash,
+    updateLaneAllowedServices,
+  } = options;
+
+  const steps = WASH_STEPS;
+
+  const targetStepForStart = () => (
+    activeTasks.value.length > 0 ? steps.TASKS : steps.WASH_IN_PROGRESS
+  );
+
+  const clickableSteps = {
+    [steps.VEHICLE]: () => {
+      if (washInProgress.value) {
+        return currentStep.value === steps.VEHICLE;
+      }
+
+      const customerNumberValid = !customerNumberInput.value || !!parseInt(customerNumberInput.value);
+      const licensePlateValid = !!(licensePlateInput.value && licensePlateInput.value.trim() !== "");
+      if (!vehicleTypeSelect.value || !availableProductIds.value.includes(parseInt(vehicleTypeSelect.value))) {
+        return false;
+      }
+
+      return customerNumberValid && licensePlateValid && !!vehicleTypeSelect.value;
+    },
+    [steps.QUESTIONS]: () => {
+      if (washInProgress.value && currentStep.value >= steps.TASKS) {
+        return true;
+      }
+      if (washInProgress.value) {
+        return currentStep.value === steps.QUESTIONS;
+      }
+
+      return !!(licensePlateInput.value && licensePlateInput.value.trim() !== "") && !!vehicleTypeSelect.value;
+    },
+    [steps.SELECT_LANE]: () => {
+      if (washInProgress.value) {
+        return currentStep.value === steps.SELECT_LANE;
+      }
+
+      return (
+        !!(licensePlateInput.value && licensePlateInput.value.trim() !== "")
+        && !!vehicleTypeSelect.value
+        && allVisibleQuestionsAnswered.value
+        && currentStep.value > steps.QUESTIONS
+      );
+    },
+    [steps.TASKS]: () => {
+      if (washInProgress.value && currentStep.value === steps.WASH_IN_PROGRESS) {
+        return true;
+      }
+      if (washInProgress.value) {
+        return currentStep.value === steps.TASKS;
+      }
+
+      return (
+        !!(licensePlateInput.value && licensePlateInput.value.trim() !== "")
+        && !!vehicleTypeSelect.value
+        && !!radioLaneOption.value
+        && allVisibleQuestionsAnswered.value
+        && currentStep.value >= steps.SELECT_LANE
+      );
+    },
+    [steps.WASH_IN_PROGRESS]: () => washInProgress.value,
+  };
+
+  const isNextButtonDisabled = () => {
+    if (currentStep.value === steps.VEHICLE) {
+      return !clickableSteps[steps.VEHICLE]();
+    }
+
+    if (currentStep.value === steps.SELECT_LANE) {
+      const selectedLane = nearestDepartment.value?.lanes.find((lane) => lane.id === radioLaneOption.value);
+      if (!selectedLane || !isLaneAvailable(selectedLane)) {
+        return true;
+      }
+
+      return radioLaneOption.value && currentStep.value === steps.SELECT_LANE
+        ? (options.radioWashType.value === "Machine" && !isMachineAvailable(radioLaneOption.value))
+        : false;
+    }
+
+    if (currentStep.value === steps.QUESTIONS) {
+      if (isLoadingSelfServeData.value) {
+        return true;
+      }
+      return !allVisibleQuestionsAnswered.value;
+    }
+
+    if (currentStep.value === steps.TASKS) {
+      if (washInProgress.value) {
+        return activeTasks.value.some((task) => !completedTasks.value[task.id]);
+      }
+      return false;
+    }
+
+    return false;
+  };
+
+  const handleConfirmNext = async () => {
+    if (currentStep.value === steps.QUESTIONS) {
+      editAnswers.value = false;
+      if (radioLaneOption.value && radioLaneOption.value !== "Any") {
+        await updateLaneAllowedServices(radioLaneOption.value);
+      }
+      currentStep.value = steps.SELECT_LANE;
+      return;
+    }
+
+    if (currentStep.value === steps.SELECT_LANE) {
+      if (washInProgress.value) {
+        currentStep.value = targetStepForStart();
+        return;
+      }
+
+      await onStartWash(
+        radioLaneOption.value,
+        licensePlateInput.value,
+        customerNumberInput.value,
+        targetStepForStart()
+      );
+      return;
+    }
+
+    if (currentStep.value === steps.TASKS) {
+      currentStep.value = steps.WASH_IN_PROGRESS;
+    }
+  };
+
+  return {
+    steps,
+    clickableSteps,
+    isNextButtonDisabled,
+    handleConfirmNext,
+    targetStepForStart,
+  };
+}
diff --git a/src/composables/useWashProgress.js b/src/composables/useWashProgress.js
new file mode 100644
index 00000000..16f952bb
--- /dev/null
+++ b/src/composables/useWashProgress.js
@@ -0,0 +1,230 @@
+import { computed, onUnmounted, ref } from "vue";
+
+const pad2 = (value) => value.toString().padStart(2, "0");
+
+export function useWashProgress(options) {
+  const {
+    storageKey = "mywash_progress_v6",
+    expirationMs = 2 * 60 * 60 * 1000,
+    currentStep,
+    washInProgress,
+    washLaneId,
+    washStartTime,
+    licensePlateInput,
+    vehicleTypeSelect,
+    radioWashType,
+    radioLaneOption,
+    customerNumberInput,
+    answers,
+    completedTasks,
+    nearestDepartmentId,
+    forceNearestDepartmentEvaluationId,
+    isForcingNearestDepartment,
+    applyRestoredState,
+  } = options;
+
+  const isRestoring = ref(true);
+  const isDestroying = ref(false);
+  const isDestroyingManual = ref(false);
+  const completedDurationMs = ref(null);
+  const now = ref(Date.now());
+
+  let timerInterval = null;
+  let isDestroyingGlobal = false;
+  let beforeUnloadHandler = null;
+
+  const timeSinceWashStart = computed(() => {
+    if (washInProgress.value && washStartTime.value) {
+      return now.value - washStartTime.value;
+    }
+
+    return 0;
+  });
+
+  const formattedElapsed = computed(() => {
+    const totalSeconds = Math.floor(timeSinceWashStart.value / 1000);
+    const minutes = Math.floor(totalSeconds / 60);
+    const seconds = totalSeconds % 60;
+
+    if (minutes < 0 || seconds < 0) {
+      return "00:00";
+    }
+
+    return `${pad2(minutes)}:${pad2(seconds)}`;
+  });
+
+  const loadProgress = () => {
+    try {
+      const raw = localStorage.getItem(storageKey);
+      if (!raw) {
+        return null;
+      }
+
+      return JSON.parse(raw);
+    } catch (error) {
+      console.warn("Failed to load wash progress:", error);
+      return null;
+    }
+  };
+
+  const clearProgress = () => {
+    try {
+      localStorage.removeItem(storageKey);
+    } catch {}
+  };
+
+  const saveProgress = (trigger = "manual") => {
+    if (isRestoring.value) {
+      return;
+    }
+
+    if (isDestroying.value || isDestroyingManual.value || isDestroyingGlobal) {
+      if (trigger !== "beforeunload") {
+        return;
+      }
+    }
+
+    if (
+      washInProgress.value
+      && currentStep.value === 0
+      && trigger !== "onStartWash"
+      && trigger !== "onCloseCompleted"
+    ) {
+      return;
+    }
+
+    try {
+      const payload = {
+        washInProgress: washInProgress.value,
+        washLaneId: washLaneId.value,
+        washStartTime: washStartTime.value,
+        currentStep: currentStep.value,
+        licensePlateInput: licensePlateInput.value,
+        vehicleTypeSelect: vehicleTypeSelect.value,
+        radioWashType: radioWashType.value,
+        radioLaneOption: radioLaneOption.value,
+        customerNumberInput: customerNumberInput.value,
+        answers: answers.value,
+        completedTasks: completedTasks.value,
+        nearestDepartmentId: nearestDepartmentId(),
+        forceNearestDepartmentEvaluationId: forceNearestDepartmentEvaluationId.value,
+        savedAt: Date.now(),
+        isForcingNearestDepartment: isForcingNearestDepartment.value,
+      };
+
+      localStorage.setItem(storageKey, JSON.stringify(payload));
+    } catch (error) {
+      console.warn("Failed to save wash progress:", error);
+    }
+  };
+
+  const startElapsedTimer = () => {
+    if (timerInterval) {
+      clearInterval(timerInterval);
+    }
+
+    timerInterval = setInterval(() => {
+      now.value = Date.now();
+      if (washInProgress.value) {
+        saveProgress("timer");
+      }
+    }, 1000);
+  };
+
+  const stopElapsedTimer = () => {
+    if (timerInterval) {
+      clearInterval(timerInterval);
+      timerInterval = null;
+    }
+  };
+
+  const markDestroying = () => {
+    isDestroyingGlobal = true;
+    isDestroyingManual.value = true;
+    isDestroying.value = true;
+  };
+
+  const restoreProgress = () => {
+    const savedProgress = loadProgress();
+    if (!savedProgress) {
+      isRestoring.value = false;
+      return null;
+    }
+
+    const timeDiff = Date.now() - (savedProgress.savedAt || 0);
+    if (timeDiff >= expirationMs) {
+      clearProgress();
+      isRestoring.value = false;
+      return null;
+    }
+
+    applyRestoredState(savedProgress);
+
+    if (washInProgress.value) {
+      startElapsedTimer();
+    }
+
+    const restoredStep = savedProgress.currentStep;
+    setTimeout(() => {
+      if (currentStep.value !== restoredStep) {
+        currentStep.value = restoredStep;
+      }
+      isRestoring.value = false;
+    }, 1500);
+
+    return savedProgress;
+  };
+
+  const registerBeforeUnload = () => {
+    if (typeof window === "undefined") {
+      return () => {};
+    }
+
+    beforeUnloadHandler = () => {
+      markDestroying();
+      saveProgress("beforeunload");
+    };
+
+    window.addEventListener("beforeunload", beforeUnloadHandler);
+
+    return () => {
+      if (beforeUnloadHandler) {
+        window.removeEventListener("beforeunload", beforeUnloadHandler);
+        beforeUnloadHandler = null;
+      }
+    };
+  };
+
+  const cleanup = () => {
+    markDestroying();
+    stopElapsedTimer();
+
+    if (typeof window !== "undefined" && beforeUnloadHandler) {
+      window.removeEventListener("beforeunload", beforeUnloadHandler);
+      beforeUnloadHandler = null;
+    }
+  };
+
+  onUnmounted(() => {
+    cleanup();
+  });
+
+  return {
+    completedDurationMs,
+    now,
+    isRestoring,
+    isDestroying,
+    isDestroyingManual,
+    timeSinceWashStart,
+    formattedElapsed,
+    loadProgress,
+    saveProgress,
+    clearProgress,
+    restoreProgress,
+    startElapsedTimer,
+    stopElapsedTimer,
+    markDestroying,
+    registerBeforeUnload,
+    cleanup,
+  };
+}
diff --git a/src/composables/useWashSessionActions.js b/src/composables/useWashSessionActions.js
new file mode 100644
index 00000000..977e8fa9
--- /dev/null
+++ b/src/composables/useWashSessionActions.js
@@ -0,0 +1,184 @@
+import { computed, ref, watch } from "vue";
+import { API_URL } from "@/config";
+
+export function useWashSessionActions(options) {
+  const {
+    request,
+    alertFn = (message) => window.alert(message),
+    nearestDepartment,
+    vehicleTypeSelect,
+    washLaneId,
+    washInProgress,
+    washStartTime,
+    completedDurationMs,
+    now,
+    currentStep,
+    steps,
+    radioWashType,
+    activeTasks,
+    completedTasks,
+    saveProgress,
+    clearProgress,
+    startElapsedTimer,
+    stopElapsedTimer,
+    updateLaneAllowedServices,
+    fetchWashSummary,
+    enableMachineRelay,
+    isServiceAllowed,
+  } = options;
+
+  const machineStartCurrentStep = ref(0);
+
+  const getButtonsToPress = () => {
+    const buttons = new Set();
+
+    activeTasks.value.forEach((task) => {
+      if (completedTasks.value[task.id]) {
+        return;
+      }
+
+      (task.buttons || []).forEach((button) => {
+        const buttonId = parseInt(button);
+        if (buttonId) {
+          buttons.add(buttonId);
+        }
+      });
+    });
+
+    return Array.from(buttons);
+  };
+
+  const getCompletedButtons = () => {
+    let totalButtonsCompleted = 0;
+
+    activeTasks.value.forEach((task) => {
+      if (completedTasks.value[task.id]) {
+        totalButtonsCompleted += (task.buttons || []).length;
+      }
+    });
+
+    machineStartCurrentStep.value = totalButtonsCompleted;
+    return totalButtonsCompleted;
+  };
+
+  const dynamicImageUrl = computed(() => {
+    const departmentId = nearestDepartment.value?.id;
+    const laneId = washLaneId.value;
+    const lane = nearestDepartment.value?.lanes?.find((entry) => entry.id === laneId);
+
+    if (!departmentId || !laneId || !lane) {
+      return null;
+    }
+
+    return `${API_URL}/department/lanes/dynamic-image?department=${departmentId}&lane=${laneId}&current_step=${machineStartCurrentStep.value}&buttons=${JSON.stringify(getButtonsToPress())}&vehicle_type=${vehicleTypeSelect.value}`;
+  });
+
+  const executeSelfServeCommand = async (laneId, command, args = {
+    customer_number: null,
+    license_plate: null,
+  }) => {
+    if (!nearestDepartment.value) {
+      alertFn("Ingen afdeling valgt.");
+      return null;
+    }
+
+    try {
+      return await request("/modules/self-serve/lane/command", "post", {
+        lane_id: laneId,
+        command,
+        ...args,
+      });
+    } catch (error) {
+      console.error(`Error executing command ${command} on lane ${laneId}:`, error);
+      alertFn("Der opstod en fejl ved udforelse af kommandoen. Prov igen senere.");
+      return null;
+    }
+  };
+
+  const onStartWash = async (laneId, licensePlate, customerNumber, targetStep = steps.WASH_IN_PROGRESS) => {
+    if (washInProgress.value && currentStep.value === targetStep) {
+      return;
+    }
+
+    if (washInProgress.value) {
+      currentStep.value = targetStep;
+      return;
+    }
+
+    if (!nearestDepartment.value) {
+      alertFn("Ingen afdeling valgt.");
+      return;
+    }
+
+    if (!licensePlate || licensePlate.trim() === "") {
+      alertFn("Indtast venligst et registreringsnummer.");
+      return;
+    }
+
+    if (!parseInt(customerNumber)) {
+      alertFn("Indtast venligst et kundenummer.");
+      return;
+    }
+
+    try {
+      await updateLaneAllowedServices(laneId);
+      await executeSelfServeCommand(laneId, "START", {
+        customer_number: parseInt(customerNumber),
+        license_plate: licensePlate.trim().toUpperCase(),
+      });
+
+      washLaneId.value = laneId;
+      washStartTime.value = Date.now();
+      completedDurationMs.value = null;
+      washInProgress.value = true;
+      startElapsedTimer();
+      currentStep.value = targetStep;
+      saveProgress("onStartWash");
+
+      await fetchWashSummary({
+        lane_id: laneId,
+        reg: licensePlate.trim().toUpperCase(),
+      });
+
+      if (radioWashType.value === "Machine" && isServiceAllowed("MACHINE")) {
+        await enableMachineRelay(laneId);
+      }
+    } catch (error) {
+      console.error("Error starting self-serve wash:", error);
+      alertFn("Der opstod en fejl ved start af vasken. Prov igen senere.");
+    }
+  };
+
+  const onStopWash = async (laneId) => {
+    if (!nearestDepartment.value) {
+      alertFn("Ingen afdeling valgt.");
+      return;
+    }
+
+    if (!washInProgress.value) {
+      alertFn("Ingen vask er i gang.");
+      return;
+    }
+
+    await executeSelfServeCommand(laneId, "STOP");
+    completedDurationMs.value = washStartTime.value ? (now.value - washStartTime.value) : 0;
+    washInProgress.value = false;
+    washLaneId.value = null;
+    stopElapsedTimer();
+    clearProgress();
+  };
+
+  watch([completedTasks, activeTasks], () => {
+    getCompletedButtons();
+  }, { deep: true });
+
+  return {
+    machineStartCurrentStep,
+    dynamicImageUrl,
+    getButtonsToPress,
+    getCompletedButtons,
+    executeSelfServeCommand,
+    onStartWash,
+    onStopWash,
+  };
+}
diff --git a/src/constants/guidedWashFlowSteps.js b/src/constants/guidedWashFlowSteps.js
new file mode 100644
index 00000000..8c4cb7dd
--- /dev/null
+++ b/src/constants/guidedWashFlowSteps.js
@@ -0,0 +1,82 @@
+export const guidedWashFlowSteps = [
+  {
+    title: "Hojtryks forvask",
+    content: "Spul med hojtryk for at losne skidt.",
+    warning: "",
+    brushes: [
+      {
+        label: "Sort slange",
+        description: "til hojtryks forvask.",
+        warning: "Min. afstand til bil 20cm.",
+        color: "is-black",
+        position: "right",
+      },
+    ],
+  },
+  {
+    title: "Saebe-palaegning",
+    content: "Daek bilen ind i saebe.",
+    brushes: [
+      {
+        label: "Bla borste",
+        description: "til at daekke bilen i saebe.",
+        color: "is-info",
+        position: "left",
+      },
+    ],
+  },
+  {
+    title: "Borstevask",
+    content: "Borst for at fjerne resterende snavs.",
+    brushes: [
+      {
+        label: "Bla borste",
+        description: "til lakerede overflader.",
+        color: "is-link",
+        position: "left",
+      },
+      {
+        label: "Rod borste",
+        description: "til undervogn og faelge.",
+        color: "is-danger",
+        position: "right",
+      },
+    ],
+  },
+  {
+    title: "Hojtryks skylning",
+    content: "Spul med vand indtil saeben er vaek.",
+    brushes: [
+      {
+        label: "Sort slange",
+        description: "til at spule saeben af.",
+        color: "is-black",
+        position: "right",
+      },
+    ],
+  },
+  {
+    title: "Voks palaegning",
+    content: "Palaeg voks pa forerhuset.",
+    brushes: [
+      {
+        label: "Gul slange",
+        description: "til voks palaegning.",
+        color: "is-warning",
+        position: "left",
+      },
+    ],
+  },
+  {
+    title: "Spot Free skylning",
+    content: "Skyl hurtigt forerhuset med Spot Free for at undga pletter.",
+    brushes: [
+      {
+        label: "Hvid slange",
+        description: "til Spot Free skylning.",
+        color: "is-white",
+        position: "right",
+      },
+    ],
+  },
+];
diff --git a/src/views/dashboards/departmentDashboard/modules/self-serve/DepartmentSelfServeConditions.vue b/src/views/dashboards/departmentDashboard/modules/self-serve/DepartmentSelfServeConditions.vue
index e3f1ce68..d2648f09 100644
--- a/src/views/dashboards/departmentDashboard/modules/self-serve/DepartmentSelfServeConditions.vue
+++ b/src/views/dashboards/departmentDashboard/modules/self-serve/DepartmentSelfServeConditions.vue
@@ -6,7 +6,7 @@ import DepartmentDashboardPageWrapper from "@/views/dashboards/departmentDashboa
 import NotFoundFallBackPageWrapper from "@/components/page/wrappers/NotFoundFallBackPageWrapper.vue";
 import SelfServeConditionsPagination from "@/components/displays/pagination/models/DepartmentDashboard/SelfServeConditionsPagination.vue";
 import PageTitle from "@/components/global/PageTitle.vue";
-import MyWashStartVehicleTypeSelection from "@/views/dashboards/userDashboard/wash/displays/MyWashStartVehicleTypeSelection.vue";
+import SelfServeVehicleTypeSelector from "@/components/displays/selfServe/SelfServeVehicleTypeSelector.vue";
 import { useI18n } from 'vue-i18n';
 
 const { t } = useI18n();
@@ -26,7 +26,7 @@ const selectVehicleType = (vehicleType) => {
 
         <div class="box">
           <h3 class="title is-5">{{ t('admin.self_serve.select_vehicle_type') }}</h3>
-          <MyWashStartVehicleTypeSelection @selected="selectVehicleType" :selectedVehicleTypeId="selectedVehicleType?.id" />
+          <SelfServeVehicleTypeSelector @selected="selectVehicleType" :selectedVehicleTypeId="selectedVehicleType?.id" />
         </div>
 
         <SelfServeConditionsPagination
diff --git a/src/views/dashboards/departmentDashboard/modules/self-serve/DepartmentSelfServeQuestions.vue b/src/views/dashboards/departmentDashboard/modules/self-serve/DepartmentSelfServeQuestions.vue
index bf4f42eb..9ce55e24 100644
--- a/src/views/dashboards/departmentDashboard/modules/self-serve/DepartmentSelfServeQuestions.vue
+++ b/src/views/dashboards/departmentDashboard/modules/self-serve/DepartmentSelfServeQuestions.vue
@@ -6,7 +6,7 @@ import DepartmentDashboardPageWrapper from "@/views/dashboards/departmentDashboa
 import NotFoundFallBackPageWrapper from "@/components/page/wrappers/NotFoundFallBackPageWrapper.vue";
 import SelfServeQuestionsPagination from "@/components/displays/pagination/models/DepartmentDashboard/SelfServeQuestionsPagination.vue";
 import PageTitle from "@/components/global/PageTitle.vue";
-import MyWashStartVehicleTypeSelection from "@/views/dashboards/userDashboard/wash/displays/MyWashStartVehicleTypeSelection.vue";
+import SelfServeVehicleTypeSelector from "@/components/displays/selfServe/SelfServeVehicleTypeSelector.vue";
 import SelfServeTryModal from "@/components/displays/department/tables/SelfServeTryModal.vue";
 import { useI18n } from 'vue-i18n';
 
@@ -24,74 +24,77 @@ const selectVehicleType = (vehicleType) => {
   <RestrictedPageWrapper :hasPermission="SessionUser.canAccessAdmin()">
     <DepartmentDashboardPageWrapper>
       <NotFoundFallBackPageWrapper :exists="SessionUser.functions.getDepartmentIdFromUrl() && SessionUser.canAccessDepartment(SessionUser.functions.getDepartmentIdFromUrl())" :error="$t('admin.errors.select_department')">
-        <PageTitle :title="SessionUser.objects.self_serve_questions.meta.title" :subtitle="SessionUser.objects.self_serve_questions.meta.description" />
+        <section data-testid="self-serve-admin-questions-page">
+          <PageTitle :title="SessionUser.objects.self_serve_questions.meta.title" :subtitle="SessionUser.objects.self_serve_questions.meta.description" />
 
-        <div class="box">
-          <h3 class="title is-5">{{ t('admin.self_serve.select_vehicle_type') }}</h3>
-          <MyWashStartVehicleTypeSelection @selected="selectVehicleType" :selectedVehicleTypeId="selectedVehicleType?.id" />
-        </div>
+          <div class="box">
+            <h3 class="title is-5">{{ t('admin.self_serve.select_vehicle_type') }}</h3>
+            <SelfServeVehicleTypeSelector @selected="selectVehicleType" :selectedVehicleTypeId="selectedVehicleType?.id" />
+          </div>
 
-        <SelfServeQuestionsPagination
-            :setDepartmentFilter="departmentId"
-            :setVehicleTypeFilter="selectedVehicleType?.id"
-            :autoLoad="true"
-        >
-          <template #buttons="{ loadList, totalItems }">
-            <div class="buttons">
-              <button
-                  class="button is-primary"
-                  @click="SessionUser.objects.self_serve_questions.showCreateObjectForm({
-                  order_priority: totalItems + 1
-                }, loadList)"
-              >
-              <span class="icon">
-                <i class="fas fa-plus"></i>
-              </span>
-                <span>{{ t('admin.self_serve.questions.add') }}</span>
-              </button>
-              <router-link :to="{ name: 'selfserveconditions', params: { departmentId: departmentId } }" class="button is-link is-light">
+          <SelfServeQuestionsPagination
+              :setDepartmentFilter="departmentId"
+              :setVehicleTypeFilter="selectedVehicleType?.id"
+              :autoLoad="true"
+          >
+            <template #buttons="{ loadList, totalItems }">
+              <div class="buttons">
+                <button
+                    class="button is-primary"
+                    @click="SessionUser.objects.self_serve_questions.showCreateObjectForm({
+                    order_priority: totalItems + 1
+                  }, loadList)"
+                >
                 <span class="icon">
-                  <i class="fas fa-filter"></i>
+                  <i class="fas fa-plus"></i>
                 </span>
-                <span>{{ t('admin.self_serve.conditions.manage') }}</span>
-              </router-link>
-              <router-link :to="{ name: 'selfservetasks', params: { departmentId: departmentId } }" class="button is-link is-light">
-                <span class="icon">
-                  <i class="fas fa-tasks"></i>
-                </span>
-                <span>{{ t('admin.self_serve.tasks.manage') }}</span>
-              </router-link>
-              <router-link :to="{ name: 'selfservemachinetypes', params: { departmentId: departmentId } }" class="button is-link is-light">
-                <span class="icon">
-                  <i class="fas fa-cubes"></i>
-                </span>
-                <span>Maskintyper</span>
-              </router-link>
-              <router-link :to="{ name: 'selfservevehicleconditions', params: { departmentId: departmentId } }" class="button is-link is-light">
-                <span class="icon">
-                  <i class="fas fa-car-side"></i>
-                </span>
-                <span>{{ t('admin.self_serve.vehicle_conditions.title') }}</span>
-              </router-link>
-              <button
-                  class="button is-warning is-light"
-                  @click="showTryModal = true"
-              >
-                <span class="icon">
-                  <i class="fas fa-play"></i>
-                </span>
-                <span>{{ t('admin.self_serve.try') }}</span>
-              </button>
-            </div>
-          </template>
-        </SelfServeQuestionsPagination>
+                  <span>{{ t('admin.self_serve.questions.add') }}</span>
+                </button>
+                <router-link :to="{ name: 'selfserveconditions', params: { departmentId: departmentId } }" class="button is-link is-light">
+                  <span class="icon">
+                    <i class="fas fa-filter"></i>
+                  </span>
+                  <span>{{ t('admin.self_serve.conditions.manage') }}</span>
+                </router-link>
+                <router-link :to="{ name: 'selfservetasks', params: { departmentId: departmentId } }" class="button is-link is-light">
+                  <span class="icon">
+                    <i class="fas fa-tasks"></i>
+                  </span>
+                  <span>{{ t('admin.self_serve.tasks.manage') }}</span>
+                </router-link>
+                <router-link :to="{ name: 'selfservemachinetypes', params: { departmentId: departmentId } }" class="button is-link is-light">
+                  <span class="icon">
+                    <i class="fas fa-cubes"></i>
+                  </span>
+                  <span>Maskintyper</span>
+                </router-link>
+                <router-link :to="{ name: 'selfservevehicleconditions', params: { departmentId: departmentId } }" class="button is-link is-light">
+                  <span class="icon">
+                    <i class="fas fa-car-side"></i>
+                  </span>
+                  <span>{{ t('admin.self_serve.vehicle_conditions.title') }}</span>
+                </router-link>
+                <button
+                    class="button is-warning is-light"
+                    data-testid="self-serve-admin-open-try-modal"
+                    @click="showTryModal = true"
+                >
+                  <span class="icon">
+                    <i class="fas fa-play"></i>
+                  </span>
+                  <span>{{ t('admin.self_serve.try') }}</span>
+                </button>
+              </div>
+            </template>
+          </SelfServeQuestionsPagination>
 
-        <SelfServeTryModal
-            v-if="showTryModal"
-            :departmentId="departmentId"
-            :vehicleTypeId="selectedVehicleType?.id"
-            @closeModal="showTryModal = false"
-        />
+          <SelfServeTryModal
+              v-if="showTryModal"
+              :departmentId="departmentId"
+              :vehicleTypeId="selectedVehicleType?.id"
+              @closeModal="showTryModal = false"
+          />
+        </section>
       </NotFoundFallBackPageWrapper>
     </DepartmentDashboardPageWrapper>
   </RestrictedPageWrapper>
diff --git a/src/views/dashboards/departmentDashboard/modules/self-serve/DepartmentSelfServeTasks.vue b/src/views/dashboards/departmentDashboard/modules/self-serve/DepartmentSelfServeTasks.vue
index 23a9a002..92ebab29 100644
--- a/src/views/dashboards/departmentDashboard/modules/self-serve/DepartmentSelfServeTasks.vue
+++ b/src/views/dashboards/departmentDashboard/modules/self-serve/DepartmentSelfServeTasks.vue
@@ -6,7 +6,7 @@ import DepartmentDashboardPageWrapper from "@/views/dashboards/departmentDashboa
 import NotFoundFallBackPageWrapper from "@/components/page/wrappers/NotFoundFallBackPageWrapper.vue";
 import SelfServeTasksPagination from "@/components/displays/pagination/models/DepartmentDashboard/SelfServeTasksPagination.vue";
 import PageTitle from "@/components/global/PageTitle.vue";
-import MyWashStartVehicleTypeSelection from "@/views/dashboards/userDashboard/wash/displays/MyWashStartVehicleTypeSelection.vue";
+import SelfServeVehicleTypeSelector from "@/components/displays/selfServe/SelfServeVehicleTypeSelector.vue";
 import { useI18n } from 'vue-i18n';
 
 const { t } = useI18n();
@@ -26,7 +26,7 @@ const selectVehicleType = (vehicleType) => {
 
         <div class="box">
           <h3 class="title is-5">{{ t('admin.self_serve.select_vehicle_type') }}</h3>
-          <MyWashStartVehicleTypeSelection @selected="selectVehicleType" :selectedVehicleTypeId="selectedVehicleType?.id" />
+          <SelfServeVehicleTypeSelector @selected="selectVehicleType" :selectedVehicleTypeId="selectedVehicleType?.id" />
         </div>
 
         <SelfServeTasksPagination
diff --git a/src/views/dashboards/departmentDashboard/modules/wash-lanes/DepartmentWashLane.vue b/src/views/dashboards/departmentDashboard/modules/wash-lanes/DepartmentWashLane.vue
index 3fe3e338..40ea467f 100644
--- a/src/views/dashboards/departmentDashboard/modules/wash-lanes/DepartmentWashLane.vue
+++ b/src/views/dashboards/departmentDashboard/modules/wash-lanes/DepartmentWashLane.vue
@@ -9,7 +9,7 @@ import PageTitle from "@/components/global/PageTitle.vue";
 import SelfServeQuestionsPagination from "@/components/displays/pagination/models/DepartmentDashboard/SelfServeQuestionsPagination.vue";
 import SelfServeTasksPagination from "@/components/displays/pagination/models/DepartmentDashboard/SelfServeTasksPagination.vue";
 import SelfServeConditionsPagination from "@/components/displays/pagination/models/DepartmentDashboard/SelfServeConditionsPagination.vue";
-import MyWashStartVehicleTypeSelection from "@/views/dashboards/userDashboard/wash/displays/MyWashStartVehicleTypeSelection.vue";
+import SelfServeVehicleTypeSelector from "@/components/displays/selfServe/SelfServeVehicleTypeSelector.vue";
 import SelfServeTryModal from "@/components/displays/department/tables/SelfServeTryModal.vue";
 import { useI18n } from 'vue-i18n';
 
@@ -52,7 +52,7 @@ onMounted(() => {
   <RestrictedPageWrapper :hasPermission="SessionUser.canAccessAdmin()">
     <DepartmentDashboardPageWrapper>
       <NotFoundFallBackPageWrapper :exists="departmentId && SessionUser.canAccessDepartment(departmentId)" :error="$t('admin.errors.select_department')">
-        <div v-if="lane">
+        <div v-if="lane" data-testid="department-wash-lane-page">
           <PageTitle :title="t('admin.wash_lanes.single.title') + ': ' + lane.name" :subtitle="'ID: ' + lane.id">
             <template #buttons>
               <button class="button is-dark" @click="router.push(`/admin/${departmentId}/modules/wash-lanes`)">
@@ -160,7 +160,7 @@ onMounted(() => {
               </div>
               <div class="box">
                 <h3 class="title is-5">Vælg køretøjstype</h3>
-                <MyWashStartVehicleTypeSelection @selected="selectVehicleType" :selectedVehicleTypeId="selectedVehicleType?.id" />
+                <SelfServeVehicleTypeSelector @selected="selectVehicleType" :selectedVehicleTypeId="selectedVehicleType?.id" />
               </div>
               <div class="box">
                 <SelfServeConditionsPagination
@@ -188,6 +188,7 @@ onMounted(() => {
                       </button>
                       <button
                           class="button is-warning is-light"
+                          data-testid="self-serve-admin-open-try-modal"
                           @click="showTryModal = true"
                       >
                         <span class="icon">
@@ -225,6 +226,7 @@ onMounted(() => {
                       </button>
                       <button
                           class="button is-warning is-light"
+                          data-testid="self-serve-admin-open-try-modal"
                           @click="showTryModal = true"
                       >
                         <span class="icon">
@@ -270,6 +272,7 @@ onMounted(() => {
                       </router-link>
                       <button
                           class="button is-warning is-light"
+                          data-testid="self-serve-admin-open-try-modal"
                           @click="showTryModal = true"
                       >
                         <span class="icon">
diff --git a/src/views/dashboards/userDashboard/wash/MyWash.vue b/src/views/dashboards/userDashboard/wash/MyWash.vue
index 984ce35e..66063f9e 100644
--- a/src/views/dashboards/userDashboard/wash/MyWash.vue
+++ b/src/views/dashboards/userDashboard/wash/MyWash.vue
@@ -1,112 +1,92 @@
 <script setup>
-import UserDashboardPageWrapper from "@/views/dashboards/userDashboard/UserDashboardPageWrapper.vue";
-import PosDepartmentStepMobile1Location
-  from "@/components/displays/department/pos/steps/mobile/elements/PosDepartmentStepMobile1Location.vue";
-
-import { getDepartmentsGuest} from "@/components/pagination/departmentTabs.vue";
-import {onMounted, ref, watch} from "vue";
-const guestDepartments = ref([]);
-onMounted(async () => {
-  guestDepartments.value = await getDepartmentsGuest();
-});
-
-const nearestDepartment = ref(null);
-
-import { locations } from "@/components/displays/department/pos/steps/mobile/objects/PosDepartmentStepMobileFlow.vue";
+import { computed, onMounted } from "vue";
 import { BLoading } from "buefy";
+import UserDashboardPageWrapper from "@/views/dashboards/userDashboard/UserDashboardPageWrapper.vue";
+import PosDepartmentStepMobile1Location from "@/components/displays/department/pos/steps/mobile/elements/PosDepartmentStepMobile1Location.vue";
 import WhiteBoxCard from "@/components/displays/boxes/WhiteBoxCard.vue";
+import { locations } from "@/components/displays/department/pos/steps/mobile/objects/PosDepartmentStepMobileFlow.vue";
+import { useWashDepartments } from "@/composables/useWashDepartments";
 
-// Watch for changes in the locations data
-watch(() => guestDepartments.value, (newValue) => {
-  evaluateLocationDepartments(locations.location.value);
-});
-watch(() => locations.location.value, (newValue) => {
-  evaluateLocationDepartments(newValue);
-});
+const {
+  guestDepartments,
+  nearestDepartment,
+  fetchDepartments,
+  evaluateLocationDepartments,
+  orderDepartmentsByDistance,
+} = useWashDepartments();
 
-const evaluateLocationDepartments = (newValue) => {
-  // Get the departments
-  let currentNearestDepartment = {
-    id: null, // Department ID
-    distance: Infinity // Distance in km
+const orderedDepartments = computed(() => orderDepartmentsByDistance(guestDepartments.value));
+
+const getDepartmentDistance = (department) => {
+  if (!locations.location.value?.coords) {
+    return null;
   }
-  // Find the nearest department
-  guestDepartments.value.forEach(department => {
-    if (!newValue?.coords) return;
-    const from = {latitude: newValue.coords.latitude, longitude: newValue.coords.longitude};
-    const to = {latitude: department.latitude, longitude: department.longitude};
-    const distance = locations.getDistance(from, to);
-    if (distance < currentNearestDepartment.distance) {
-      currentNearestDepartment = {
-        id: department.id,
-        distance: distance,
-        name: department.name,
-        address: department.address
-      };
+
+  return locations.getDistance(
+    {
+      latitude: locations.location.value.coords.latitude,
+      longitude: locations.location.value.coords.longitude,
+    },
+    {
+      latitude: department.latitude,
+      longitude: department.longitude,
     }
-  });
-  if (currentNearestDepartment.id) {
-    nearestDepartment.value = currentNearestDepartment;
-  }
-};
-
-const orderDepartmentsByDistance = (departmentsList) => {
-  if (!locations.location.value?.coords) return departmentsList;
-  return departmentsList.slice().sort((a, b) => {
-    const distanceA = locations.getDistance(
-      { latitude: locations.location.value.coords.latitude, longitude: locations.location.value.coords.longitude },
-      { latitude: a.latitude, longitude: a.longitude }
-    );
-    const distanceB = locations.getDistance(
-      { latitude: locations.location.value.coords.latitude, longitude: locations.location.value.coords.longitude },
-      { latitude: b.latitude, longitude: b.longitude }
-    );
-    return distanceA - distanceB;
-  });
+  );
 };
 
+onMounted(async () => {
+  await fetchDepartments();
+});
 </script>
 
 <template>
   <UserDashboardPageWrapper :title="$t('user_dashboard.wash.title')" :subtitle="$t('user_dashboard.wash.subtitle')">
-    <PosDepartmentStepMobile1Location @location-updated="evaluateLocationDepartments"/>
-    <div class="columns is-multiline">
+    <PosDepartmentStepMobile1Location @location-updated="evaluateLocationDepartments" />
+    <div class="columns is-multiline" data-testid="self-serve-wash-home">
       <div class="column is-12">
         <WhiteBoxCard :force-state="true" :defaultOpen="true" :toggleable="false" :loading="false">
           <template #header>
-            <div class="card-header-title has-text-link has-text-weight-bold">
-             {{ nearestDepartment ? nearestDepartment.name : $t('user_dashboard.wash.loading') }}
+            <div class="card-header-title has-text-link has-text-weight-bold" data-testid="self-serve-home-nearest-name">
+              {{ nearestDepartment ? nearestDepartment.name : $t("user_dashboard.wash.loading") }}
             </div>
             <div class="card-header-icon has-text-link">
               <i class="fas fa-map-marker-alt"></i>
             </div>
           </template>
           <template #content>
-            {{ $t('user_dashboard.wash.nearest_department', { name: nearestDepartment ? nearestDepartment.name : '-', distance: nearestDepartment ? nearestDepartment.distance.toFixed(2) : '-' }) }}
-            <BLoading :is-full-page="false" :model-value="!nearestDepartment" :can-cancel="true"/>
+            {{ $t("user_dashboard.wash.nearest_department", { name: nearestDepartment ? nearestDepartment.name : "-", distance: nearestDepartment ? nearestDepartment.distance.toFixed(2) : "-" }) }}
+            <b-loading :is-full-page="false" :model-value="!nearestDepartment" :can-cancel="true" />
           </template>
           <template #footer>
             <div class="card-footer-item">
-              <router-link v-if="nearestDepartment" to="/user/wash/start" class="button is-link is-fullwidth">
-                {{ $t('user_dashboard.wash.start_wash') }}
+              <router-link
+                v-if="nearestDepartment"
+                to="/user/wash/start"
+                class="button is-link is-fullwidth"
+                data-testid="self-serve-home-start"
+              >
+                {{ $t("user_dashboard.wash.start_wash") }}
               </router-link>
             </div>
           </template>
         </WhiteBoxCard>
       </div>
-      <template v-for="department in orderDepartmentsByDistance(guestDepartments)" :key="department.id">
-        <div class="column is-12-mobile is-6-tablet is-4-desktop" v-if="nearestDepartment && department.id !== nearestDepartment.id">
+
+      <template v-for="department in orderedDepartments" :key="department.id">
+        <div
+          v-if="nearestDepartment && department.id !== nearestDepartment.id"
+          class="column is-12-mobile is-6-tablet is-4-desktop"
+          :data-testid="`self-serve-home-department-${department.id}`"
+        >
           <WhiteBoxCard :force-state="true" :defaultOpen="false" :toggleable="false" :loading="false">
             <template #header>
               <div class="card-header-title has-text-grey has-text-weight-bold">
                 {{ department.name }}
               </div>
               <div class="card-header-icon has-text-grey">
-                <span>
-                {{ locations.getDistance(
-                  { latitude: locations.location.value?.coords.latitude, longitude: locations.location.value?.coords.longitude },
-                  { latitude: department.latitude, longitude: department.longitude }
-                ).toFixed(2) }} km</span>
+                <span v-if="getDepartmentDistance(department) !== null">
+                  {{ getDepartmentDistance(department)?.toFixed(2) }} km
+                </span>
                 <span class="icon">
                   <i class="fas fa-building"></i>
                 </span>
@@ -116,18 +96,13 @@ const orderDepartmentsByDistance = (departmentsList) => {
               <div class="card-footer-item">
                 <router-link :to="{ name: 'pos', params: { departmentId: department.id } }" class="button is-light is-fullwidth">
                   <span class="icon"><i class="fas fa-map-marker-alt"></i></span>
-                  <span>{{department.address}}</span>
+                  <span>{{ department.address }}</span>
                 </router-link>
               </div>
             </template>
           </WhiteBoxCard>
         </div>
       </template>
-      </div>
-    <!--{{SessionUser.user.customer_number.value}}-->
+    </div>
   </UserDashboardPageWrapper>
 </template>
-
-<style scoped>
-
-</style>
\ No newline at end of file
diff --git a/src/views/dashboards/userDashboard/wash/MyWashStart.vue b/src/views/dashboards/userDashboard/wash/MyWashStart.vue
index 0d62a5fd..ed5de28b 100644
--- a/src/views/dashboards/userDashboard/wash/MyWashStart.vue
+++ b/src/views/dashboards/userDashboard/wash/MyWashStart.vue
@@ -1,751 +1,76 @@
 <script setup lang="ts">
-import {SessionUser} from "@/components/session/token/SessionUser.vue";
+import { computed, onMounted, onUnmounted, ref, watch } from "vue";
+import { BButton, BMessage, BStepItem, BSteps } from "buefy";
+import { SessionUser } from "@/components/session/token/SessionUser.vue";
 import UserDashboardPageWrapper from "@/views/dashboards/userDashboard/UserDashboardPageWrapper.vue";
-import PosDepartmentStepMobile1Location
-  from "@/components/displays/department/pos/steps/mobile/elements/PosDepartmentStepMobile1Location.vue";
-import {locations} from "@/components/displays/department/pos/steps/mobile/objects/PosDepartmentStepMobileFlow.vue";
-import {
-  BButton,
-  BCheckbox,
-  BField,
-  BIcon,
-  BInput,
-  BMessage,
-  BRadioButton,
-  BSelect,
-  BStepItem,
-  BSteps,
-  BTooltip
-} from "buefy";
-import WhiteBoxCard from "@/components/displays/boxes/WhiteBoxCard.vue";
+import PosDepartmentStepMobile1Location from "@/components/displays/department/pos/steps/mobile/elements/PosDepartmentStepMobile1Location.vue";
+import { locations } from "@/components/displays/department/pos/steps/mobile/objects/PosDepartmentStepMobileFlow.vue";
+import { setShowFooterInContent } from "@/components/viewport/conditions/ViewPortFooterOptions.vue";
+import SelfServeDepartmentHeader from "@/components/displays/selfServe/SelfServeDepartmentHeader.vue";
+import SelfServeVehicleStep from "@/components/displays/selfServe/SelfServeVehicleStep.vue";
+import SelfServeQuestionsStep from "@/components/displays/selfServe/SelfServeQuestionsStep.vue";
+import SelfServeLaneStep from "@/components/displays/selfServe/SelfServeLaneStep.vue";
+import SelfServeTasksStep from "@/components/displays/selfServe/SelfServeTasksStep.vue";
+import SelfServeGuidedInstructions from "@/components/displays/selfServe/SelfServeGuidedInstructions.vue";
+import SelfServeCompletedStep from "@/components/displays/selfServe/SelfServeCompletedStep.vue";
+import { guidedWashFlowSteps } from "@/constants/guidedWashFlowSteps";
+import { useSelfServeLogic } from "@/composables/useSelfServeLogic";
+import { useWashDepartments } from "@/composables/useWashDepartments";
+import { useWashProgress } from "@/composables/useWashProgress";
+import { useWashFlowState } from "@/composables/useWashFlowState";
+import { useWashSessionActions } from "@/composables/useWashSessionActions";
+import type { PosProduct } from "@/components/displays/department/pos/steps/mobile/objects/PosProduct.vue";
 
-import {getDepartmentsGuest} from "@/components/pagination/departmentTabs.vue";
-import {computed, nextTick, onMounted, onUnmounted, ref, watch} from "vue";
-import ScrollableSteps from "@/components/displays/steps/ScrollableSteps.vue";
-import {setShowFooterInContent} from "@/components/viewport/conditions/ViewPortFooterOptions.vue";
-import MyWashStartVehicleTypeSelection
-  from "@/views/dashboards/userDashboard/wash/displays/MyWashStartVehicleTypeSelection.vue";
-import MyWashStartDepartmentHeader
-  from "@/views/dashboards/userDashboard/wash/displays/MyWashStartDepartmentHeader.vue";
-import MyWashCompletedStep from "@/views/dashboards/userDashboard/wash/displays/MyWashCompletedStep.vue";
-import type {PosProduct} from '@/components/displays/department/pos/steps/mobile/objects/PosProduct.vue';
-import {useSelfServeLogic} from "@/composables/useSelfServeLogic";
-import {API_URL} from "@/config";
-
-const instanceId = Math.floor(Math.random() * 1000);
-//console.log(`MyWashStart [${instanceId}]: script setup execution.`);
-
-const guestDepartments = ref([]);
-
-const licensePlateInput = ref(null);
-const customerNumberInput = ref(null);
-const nearestDepartment = ref(null);
-const availableProductIds = computed(() => {
-  const products = [];
-  if (nearestDepartment.value && nearestDepartment.value.lanes) {
-    nearestDepartment.value.lanes.forEach(lane => {
-      if (lane.products) {
-        lane.products.forEach(product => {
-          if (!products.includes(product)) {
-            products.push(product);
-          }
-        });
-      }
-    });
-  }
-  return products;
-});
-const forceNearestDepartmentEvaluationId = ref(0); // When this is set, force nearest department to be the one with this ID
-const isForcingNearestDepartment = ref(false); // Superuser switch to allow manual department selection
-const lastDepartmentFetchTime = ref(null); // Used to make sure we don't fetch too often
-const fetchIntervalMs = 10 * 1000; // 10 seconds
-const doesCurrentDepartmentSelectionHaveSelfServeEnabled = computed(() => {
-  if (!nearestDepartment.value) return false;
-  return nearestDepartment.value.self_serve_enabled;
-});
-
-onMounted(async () => {
-  setShowFooterInContent(false);
-  guestDepartments.value = await getDepartmentsGuest({include_lanes: true});
-  // Initialize customer number input
-  customerNumberInput.value = SessionUser.user.customer_number.value || '';
-  // Fetch the vehicles for the customer
-  await fetchCustomerVehicles();
-  // Fetch vehicle types
-  await fetchVehicleTypes();
-  // Load any in-progress wash from localStorage
-  const savedProgress = loadProgress();
-  //console.log(`MyWashStart [${instanceId}]: onMounted. savedProgress exists:`, !!savedProgress);
-  if (savedProgress) {
-    // If savedAt is more than 2 hours ago, don't load progress (wash probably finished or timed out)
-    const twoHoursMs = 2 * 60 * 60 * 1000;
-    const timeDiff = Date.now() - (savedProgress.savedAt || 0);
-    //console.log(`MyWashStart [${instanceId}]: timeDiff:`, timeDiff, 'twoHoursMs:', twoHoursMs, 'savedProgress.currentStep:', savedProgress.currentStep);
-    if (timeDiff < twoHoursMs) {
-      //console.log(`MyWashStart [${instanceId}]: STARTING RESTORATION.`);
-
-      // Update refs but don't allow saveProgress to trigger
-      washInProgress.value = savedProgress.washInProgress;
-      washLaneId.value = savedProgress.washLaneId;
-      washStartTime.value = savedProgress.washStartTime;
-      licensePlateInput.value = savedProgress.licensePlateInput;
-      vehicleTypeSelect.value = savedProgress.vehicleTypeSelect;
-      radioWashType.value = savedProgress.radioWashType;
-      radioLaneOption.value = savedProgress.radioLaneOption;
-      customerNumberInput.value = savedProgress.customerNumberInput;
-      isForcingNearestDepartment.value = !!savedProgress.isForcingNearestDepartment;
-      forceNearestDepartmentEvaluationId.value = savedProgress.forceNearestDepartmentEvaluationId || 0;
-
-      // If a wash was in progress, force nearest department to saved one
-      if (washInProgress.value && savedProgress.nearestDepartmentId) {
-        forceNearestDepartmentEvaluationId.value = savedProgress.nearestDepartmentId;
-      }
-      // Evaluate nearest department based on current location
-      evaluateLocationDepartments(locations.location.value);
-
-      if (washInProgress.value) {
-        startElapsedTimer();
-      }
-
-      // Restore answers and tasks before currentStep to ensure dependencies are met
-      answers.value = savedProgress.answers || {};
-      completedTasks.value = savedProgress.completedTasks || {};
-
-      // Set currentStep last, still under isRestoring protection
-      //console.log(`MyWashStart [${instanceId}]: Setting currentStep to:`, savedProgress.currentStep);
-      currentStep.value = savedProgress.currentStep;
-
-      // Ensure that if currentStep is NOT 0, we don't allow it to be 0 for a while
-      const restoredStep = savedProgress.currentStep;
-
-      // Wait for multiple ticks/frames to ensure b-steps and other components have settled
-      setTimeout(() => {
-        //console.log(`MyWashStart [${instanceId}]: Restoration timeout (1500ms) finished. currentStep is now:`, currentStep.value);
-        if (currentStep.value !== restoredStep) {
-          //console.warn(`MyWashStart [${instanceId}]: currentStep was CHANGED from ${restoredStep} to ${currentStep.value} during restoration! Reverting.`);
-          currentStep.value = restoredStep;
-        }
-        isRestoring.value = false;
-        //console.log(`MyWashStart [${instanceId}]: RESTORATION FINISHED. isRestoring set to false.`);
-      }, 1500);
-    } else {
-      //console.log(`MyWashStart [${instanceId}]: savedProgress expired.`);
-      clearProgress();
-      isRestoring.value = false;
-    }
-  } else {
-    isRestoring.value = false;
-  }
-  // Save progress on unload
-  window.addEventListener('beforeunload', () => {
-    //console.log(`MyWashStart [${instanceId}]: beforeunload event triggered.`);
-    isDestroyingGlobal = true;
-    isDestroyingManual.value = true;
-    isDestroying.value = true;
-    saveProgress('beforeunload');
-  });
-});
-// Refresh departments every 10 seconds if needed
-setInterval(async () => {
-  const currentTime = Date.now();
-  if (!lastDepartmentFetchTime.value || (currentTime - lastDepartmentFetchTime.value) >= fetchIntervalMs) {
-    guestDepartments.value = await getDepartmentsGuest({include_lanes: true});
-    lastDepartmentFetchTime.value = currentTime;
-  }
-}, fetchIntervalMs);
-
-// Watch for changes in the locations data
-watch(() => guestDepartments.value, (newValue) => {
-  evaluateLocationDepartments(locations.location.value);
-});
-watch(() => locations.location.value, (newValue) => {
-  evaluateLocationDepartments(newValue);
-});
-
-const evaluateLocationDepartments = (newValue) => {
-  // If we are forcing a department, don't evaluate by distance if the forced one is already set correctly
-  if (isForcingNearestDepartment.value && forceNearestDepartmentEvaluationId.value) {
-    const forcedDepartment = guestDepartments.value.find(dept => dept.id === forceNearestDepartmentEvaluationId.value);
-    if (forcedDepartment) {
-      nearestDepartment.value = {
-        id: forcedDepartment.id,
-        name: forcedDepartment.name,
-        address: forcedDepartment.address,
-        lanes: forcedDepartment.lanes || [],
-        self_serve_enabled: forcedDepartment.self_serve_enabled,
-      };
-      return;
-    }
-  }
-
-  // Get the departments
-  let currentNearestDepartment = {
-    id: null, // Department ID
-    distance: Infinity // Distance in km
-  }
-  // Find the nearest department
-  guestDepartments.value.forEach(department => {
-    if (!newValue?.coords) return;
-    const from = {latitude: newValue.coords.latitude, longitude: newValue.coords.longitude};
-    const to = {latitude: department.latitude, longitude: department.longitude};
-    const distance = locations.getDistance(from, to);
-    if (distance < currentNearestDepartment.distance) {
-      currentNearestDepartment = {
-        id: department.id,
-        distance: distance,
-        name: department.name,
-        address: department.address,
-        lanes: department.lanes || [],
-        self_serve_enabled: department.self_serve_enabled,
-      };
-    }
-  });
-  if (currentNearestDepartment.id) {
-    if (forceNearestDepartmentEvaluationId.value) {
-      // If forced, find that department
-      const forcedDepartment = guestDepartments.value.find(dept => dept.id === forceNearestDepartmentEvaluationId.value);
-      if (forcedDepartment) {
-        nearestDepartment.value = {
-          id: forcedDepartment.id,
-          name: forcedDepartment.name,
-          address: forcedDepartment.address,
-          lanes: forcedDepartment.lanes || [],
-          self_serve_enabled: forcedDepartment.self_serve_enabled,
-        };
-      }
-    } else {
-      nearestDepartment.value = currentNearestDepartment;
-    }
-  }
+type VehicleTypeTemplate = {
+  id: number;
+  name: string;
+  price: number;
+  product?: PosProduct;
+  selected?: boolean;
+  loading?: boolean;
 };
 
-const isLaneAvailable = (lane) => {
-  return lane.status === 'AVAILABLE'
-};
-
-const washInProgress = ref(false);
-const washLaneId = ref<null | number>(null);
-const washStartTime = ref<number | null>(null);
-// Store total duration when a wash completes
-const completedDurationMs = ref<number | null>(null);
-// Reactive "now" to drive the timer UI
-const now = ref<number>(Date.now());
-let timerInterval: ReturnType<typeof setInterval> | null = null;
-const machineStartCurrentStep = ref(0);
-
-const dynamicImageUrl = ref<null | string>(null);
-const getButtonsToPress = () => {
-  // Loop through the buttons keys in all visible tasks and gather the unique ones that are not completed
-  const buttons = new Set();
-  for (const task of activeTasks.value) {
-    if (!completedTasks.value[task.id]) {
-      console.warn(`MyWashStart [${instanceId}]: Task ${task.id} has buttons:`, task.buttons);
-        for (const button of task.buttons) {
-          if (parseInt(button)) {
-            buttons.add(parseInt(button));
-          }
-      }
-    }
-  }
-  return Array.from(buttons);
-}
-
-const getCompletedButtons = () => {
-  let totalButtonsCompleted = 0;
-  for (const task of activeTasks.value) {
-    console.warn(`MyWashStart [${instanceId}]: Checking completion for task ${task.id}. completedTasks:`, completedTasks.value);
-    if (completedTasks.value[task.id]) {
-      console.warn(`MyWashStart [${instanceId}]: Task ${task.id} is completed. buttons:`, task.buttons);
-      totalButtonsCompleted += task.buttons.length;
-    }
-  }
-  machineStartCurrentStep.value = totalButtonsCompleted;
-  setDynamicImageUrl();
-  return totalButtonsCompleted;
-}
-
-const setDynamicImageUrl = () => {
-  // Get the lane id
-  const tmp_laneId = washLaneId.value;
-  // Get the department id
-  const tmp_departmentId = nearestDepartment.value?.id;
-  const tmp_currentStep = machineStartCurrentStep.value;
-  const tmp_buttons = getButtonsToPress(); //[1,3];
-  const tmp_vehicleType = vehicleTypeSelect.value;
-  const tmp_lane = nearestDepartment.value?.lanes?.find((lane) => lane.id === tmp_laneId);
-  if (!tmp_departmentId || !tmp_laneId || !tmp_lane) {
-    dynamicImageUrl.value = null;
-    return;
-  }
-  dynamicImageUrl.value = `${API_URL}/department/lanes/dynamic-image?department=${tmp_departmentId}&lane=${tmp_laneId}&current_step=${tmp_currentStep}&buttons=${JSON.stringify(tmp_buttons)}&vehicle_type=${tmp_vehicleType}`;
-}
-
-watch([washLaneId, nearestDepartment], () => {
-  setDynamicImageUrl();
-});
-
-// --- Persistence (localStorage) for in-progress washes ---
-const STORAGE_KEY = 'mywash_progress_v5';
-
-let isDestroyingGlobal = false;
-const isDestroyingManual = ref(false);
-
-const saveProgress = (trigger = 'manual') => {
-  if (isRestoring.value) {
-    //console.log(`MyWashStart [${instanceId}]: saveProgress(${trigger}) BLOCKED because isRestoring is true.`);
-    return;
-  }
-
-  // Stricter protection against saving "reset" state during unmounting/destruction
-  if (isDestroying.value || isDestroyingManual.value || isDestroyingGlobal) {
-    if (trigger !== 'beforeunload') {
-      //console.log(`MyWashStart [${instanceId}]: saveProgress(${trigger}) BLOCKED because isDestroying is true. (currentStep: ${currentStep.value}, washInProgress: ${washInProgress.value})`);
-      return;
-    }
-  }
-
-  // If we're being asked to save a step 0 while we're in the middle of a wash, 
-  // it's almost certainly a reactive reset we don't want to persist.
-  if (washInProgress.value && currentStep.value === 0 && trigger !== 'onStartWash' && trigger !== 'onCloseCompleted') {
-    //console.warn(`MyWashStart [${instanceId}]: saveProgress(${trigger}) BLOCKED - Attempted to save step 0 while wash is in progress.`);
-    return;
-  }
-
-  try {
-    const payload = {
-      washInProgress: washInProgress.value,
-      washLaneId: washLaneId.value,
-      washStartTime: washStartTime.value,
-      currentStep: currentStep.value,
-      licensePlateInput: licensePlateInput.value,
-      vehicleTypeSelect: vehicleTypeSelect.value,
-      radioWashType: radioWashType.value,
-      radioLaneOption: radioLaneOption.value,
-      customerNumberInput: customerNumberInput.value,
-      answers: answers.value,
-      completedTasks: completedTasks.value,
-      nearestDepartmentId: nearestDepartment.value?.id || null,
-      forceNearestDepartmentEvaluationId: forceNearestDepartmentEvaluationId.value,
-      savedAt: Date.now(),
-      isForcingNearestDepartment: isForcingNearestDepartment.value,
-    };
-    //console.log(`MyWashStart [${instanceId}]: saveProgress(${trigger}). currentStep:`, payload.currentStep, 'washInProgress:', payload.washInProgress, 'isDestroying:', isDestroying.value, 'isDestroyingManual:', isDestroyingManual.value, 'isDestroyingGlobal:', isDestroyingGlobal);
-    localStorage.setItem(STORAGE_KEY, JSON.stringify(payload));
-  } catch (e) {
-    console.warn('Failed to save wash progress:', e);
-  }
-};
-
-const clearProgress = () => {
-  try { localStorage.removeItem(STORAGE_KEY); } catch {}
-};
-
-const loadProgress = () => {
-  try {
-    const raw = localStorage.getItem(STORAGE_KEY);
-    if (!raw) return null;
-    const data = JSON.parse(raw);
-    return data;
-  } catch (e) {
-    console.warn('Failed to load wash progress:', e);
-    return null;
-  }
-};
-
-const startElapsedTimer = () => {
-  // ensure only one interval
-  if (timerInterval) clearInterval(timerInterval);
-  timerInterval = setInterval(() => {
-    now.value = Date.now();
-    // periodically persist while in progress
-    if (washInProgress.value) saveProgress('timer');
-  }, 1000);
-};
-
-const stopElapsedTimer = () => {
-  if (timerInterval) {
-    clearInterval(timerInterval);
-    timerInterval = null;
-  }
-};
-
-const timeSinceWashStart = computed(() => {
-  if (washInProgress.value && washStartTime.value) {
-    return now.value - washStartTime.value;
-  }
-  return 0;
-});
-
-// Helpers for a cleaner in-progress display
-const pad2 = (n: number) => n.toString().padStart(2, '0');
-const formattedElapsed = computed(() => {
-  const totalSeconds = Math.floor(timeSinceWashStart.value / 1000);
-  const minutes = Math.floor(totalSeconds / 60);
-  const seconds = totalSeconds % 60;
-  // If the elapsed time is negative, return 00:00
-  if (minutes < 0 || seconds < 0) {
-    return '00:00';
-  }
-  // Format as MM:SS
-  return `${pad2(minutes)}:${pad2(seconds)}`;
-});
-const humanElapsed = computed(() => {
-  const totalSeconds = Math.floor(timeSinceWashStart.value / 1000);
-  const minutes = Math.floor(totalSeconds / 60);
-  const seconds = totalSeconds % 60;
-  return `${minutes} minutter og ${seconds} sekunder`;
-});
-
-// Current lane (for nicer labeling than just ID)
-const currentLane = computed(() => {
-  const lanes = nearestDepartment.value?.lanes || [];
-  return lanes.find((l: any) => l.id === washLaneId.value) || null;
-});
-
-
-
-
-const executeSelfServeCommand = (laneId: number, command: string, args = {
-  customer_number: null,
-  license_plate: null,
-}) => {
-  if (!nearestDepartment.value) {
-    alert('Ingen afdeling valgt.');
-    return;
-  }
-  // Create the request payload
-  const payload = {
-    lane_id: laneId,
-    command: command,
-    ...args,
-  }
-  // Send the request to execute the command
-  return SessionUser.request('/modules/self-serve/lane/command', 'post', payload).catch(error => {
-    console.error(`Error executing command ${command} on lane ${laneId}:`, error);
-    alert(`Der opstod en fejl ved udførelse af kommandoen. Prøv igen senere.`);
-  });
-};
-const onStartWash = (laneId, licensePlate, customerNumber, targetStep = steps.WASH_IN_PROGRESS) => {
-  if (washInProgress.value && currentStep.value === targetStep) {
-    return Promise.resolve();
-  }
-  if (washInProgress.value) {
-    currentStep.value = targetStep;
-    return Promise.resolve();
-  }
-  if (!nearestDepartment.value) {
-    alert('Ingen afdeling valgt.');
-    return;
-  }
-  if (!licensePlate || licensePlate.trim() === '') {
-    alert('Indtast venligst et registreringsnummer.');
-    return;
-  }
-  if (!parseInt(customerNumber)) {
-    alert('Indtast venligst et kundenummer.');
-    return;
-  }
-
-  // Save conditions first (only if the vehicle belongs to the user)
-  return updateLaneAllowedServices(laneId).then(() => {
-    return executeSelfServeCommand(laneId, 'START', {
-        customer_number: parseInt(customerNumber),
-        license_plate: licensePlate.trim().toUpperCase(),
-      }).then(async () => {
-        washLaneId.value = laneId;
-        washStartTime.value = Date.now();
-        completedDurationMs.value = null;
-        washInProgress.value = true;
-        startElapsedTimer();
-        currentStep.value = targetStep;
-        saveProgress('onStartWash');
-        await fetchWashSummary({
-          lane_id: laneId,
-          reg: licensePlate.trim().toUpperCase(),
-        });
-
-        if (radioWashType.value === 'Machine' && isServiceAllowed('MACHINE')) {
-          enableMachineRelay(laneId).catch(error => {
-            console.error('Error enabling machine relay:', error);
-          });
-        }
-      });
-  }).catch(error => {
-    console.error('Error starting self-serve wash:', error);
-    alert('Der opstod en fejl ved start af vasken. Prøv igen senere.');
-  });
-};
-const onStopWash = (laneId) => {
-  if (!nearestDepartment.value) {
-    alert('Ingen afdeling valgt.');
-    return;
-  }
-  if (!washInProgress.value) {
-    alert('Ingen vask er i gang.');
-    return;
-  }
-  executeSelfServeCommand(laneId, 'STOP').then(() => {
-    // Capture total duration before clearing state
-    completedDurationMs.value = washStartTime.value ? (now.value - washStartTime.value) : 0;
-    washInProgress.value = false;
-    washLaneId.value = null;
-    stopElapsedTimer();
-    clearProgress();
-  });
-};
-const onReserveWashLane = (laneId, customerNumber, licensePlate) => {
-  executeSelfServeCommand(laneId, 'RESERVE', {
-    customer_number: parseInt(customerNumber),
-    license_plate: licensePlate.trim().toUpperCase(),
-  }).then(() => {
-    alert('Vaskelane reserveret succesfuldt.');
-  });
-};
-const onReleaseWashLane = (laneId) => {
-  executeSelfServeCommand(laneId, 'RELEASE').then(() => {
-    // If the released lane was the current wash lane, clear state
-    if (washLaneId.value === laneId) {
-      washInProgress.value = false;
-      washLaneId.value = null;
-      stopElapsedTimer();
-      clearProgress();
-    }
-  });
-};
-
-onUnmounted(() => {
-  //console.log(`MyWashStart [${instanceId}]: onUnmounted triggered.`);
-  isDestroyingGlobal = true;
-  isDestroyingManual.value = true;
-  isDestroying.value = true;
-  stopElapsedTimer();
-  // We removed saveProgress('onUnmounted') because it often saves a half-destroyed state.
-  // beforeunload is more reliable for page reloads, and for navigation we rely on deep watchers.
-  window.removeEventListener('beforeunload', () => saveProgress('beforeunload'));
-  setShowFooterInContent(true);
-});
-
-const getWashStatus = (laneId) => {
-  if (!nearestDepartment.value) {
-    alert('Ingen afdeling valgt.');
-    return;
-  }
-  // Send the request to get the wash status
-  SessionUser.request('/modules/self-serve/lane/status', 'get', {
-    lane_id: laneId,
-  })
-      .then(response => {
-        if (response.data.success) {
-          alert('Vaskestatus: ' + (response.data.status || 'Ukendt status.'));
-        } else {
-          alert('Fejl ved hentning af vaskestatus: ' + (response.data.message || 'Ukendt fejl.'));
-        }
-      })
-      .catch(error => {
-        console.error('Error getting wash status:', error);
-        alert('Der opstod en fejl ved hentning af vaskestatus. Prøv igen senere.');
-      });
-};
-
-/**
- * Close action on the Completed step.
- * Resets the local flow state and returns to the first step.
- */
-const onCloseCompleted = () => {
-  // Stop any running timer just in case
-  stopElapsedTimer();
-  // Reset flow state
-  washInProgress.value = false;
-  washLaneId.value = null;
-  washStartTime.value = null;
-  completedDurationMs.value = null;
-  // Reset inputs
-  licensePlateInput.value = '';
-  answers.value = {};
-  editAnswers.value = false;
-  // Keep selected lane if still available, otherwise it will auto-pick via watcher
-  // Return to first step
-  currentStep.value = steps.VEHICLE;
-  clearProgress();
-  saveProgress('onCloseCompleted');
-};
-
-/**
- * Steps:
- * 0. Vehicle (license plate)
- * 1. Questions (if any)
- * 2. Select wash lane
- * 3. Wash in progress
- * 4. Completed
- */
-const steps = {
-  VEHICLE: 0,
-  QUESTIONS: 1,
-  SELECT_LANE: 2,
-  TASKS: 3,
-  WASH_IN_PROGRESS: 4,
-  COMPLETED: 5,
-}
-const clickableSteps = {
-  [steps.VEHICLE]: () => {
-    if (washInProgress.value) return currentStep.value === steps.VEHICLE;
-    const customerNumberValid = !!(customerNumberInput.value && parseInt(customerNumberInput.value));
-    const licensePlateValid = !!(licensePlateInput.value && licensePlateInput.value.trim() !== '');
-    // Make sure the vehicle type is in the list of available products
-    if (!vehicleTypeSelect.value || !availableProductIds.value.includes(parseInt(vehicleTypeSelect.value))) {
-      return false;
-    }
-    return customerNumberValid && licensePlateValid && !!vehicleTypeSelect.value;
-  },
-  [steps.QUESTIONS]: () => {
-    if (washInProgress.value && currentStep.value >= steps.TASKS) return true; // Allow clicking back from tasks or wash in progress
-    if (washInProgress.value) return currentStep.value === steps.QUESTIONS;
-    return !!(licensePlateInput.value && licensePlateInput.value.trim() !== '') && !!vehicleTypeSelect.value;
-  },
-  [steps.SELECT_LANE]: () => {
-    if (washInProgress.value) return currentStep.value === steps.SELECT_LANE;
-    return !!(licensePlateInput.value && licensePlateInput.value.trim() !== '') && !!vehicleTypeSelect.value && allVisibleQuestionsAnswered.value && currentStep.value > steps.QUESTIONS;
-  },
-  [steps.TASKS]: () => {
-    if (washInProgress.value && currentStep.value === steps.WASH_IN_PROGRESS) return true;
-    if (washInProgress.value) return currentStep.value === steps.TASKS;
-    return (!!(licensePlateInput.value && licensePlateInput.value.trim() !== '') && !!vehicleTypeSelect.value && !!radioLaneOption.value && allVisibleQuestionsAnswered.value && currentStep.value >= steps.SELECT_LANE);
-  },
-  [steps.WASH_IN_PROGRESS]: () => {
-    return washInProgress.value;
-  },
-}
-const currentStep = ref(steps.VEHICLE);
-const isRestoring = ref(true); // Default to true to prevent any saves during initialization
-const isDestroying = ref(false);
-const showDebug = ref(false); // Default to true for better visibility during fix verification
-
-const getRuleTypeLabel = (type: string) => {
-  const labels: Record<string, string> = {
-    'IS_TRUE': 'Er sand',
-    'IS_FALSE': 'Er falsk',
-    'IS_TRUE_OR_NOT_SET': 'Er sand eller ikke sat',
-    'IS_FALSE_OR_NOT_SET': 'Er falsk eller ikke sat',
-    'IS_SET': 'Er sat',
-    'IS_TRUE_OR_ANY_TRUE': 'Er sand eller ANY sand',
-  };
-  return labels[type] || type;
-};
-
-const getConditionById = (id: number) => {
-  return conditions.value.find(c => c.id === parseInt(id as any));
-};
-
-const handleConfirmNext = async (next: any) => {
-  const hasQuestions = visibleQuestions.value.length > 0;
-  const hasTasks = activeTasks.value.length > 0;
-
-  if (currentStep.value === steps.QUESTIONS) {
-    editAnswers.value = false;
-    // Update allowed services from server before showing lane selection
-    if (radioLaneOption.value && radioLaneOption.value !== 'Any') {
-      await updateLaneAllowedServices(radioLaneOption.value);
-    }
-    currentStep.value = steps.SELECT_LANE;
-  } else if (currentStep.value === steps.SELECT_LANE) {
-    if (washInProgress.value) {
-      currentStep.value = hasTasks ? steps.TASKS : steps.WASH_IN_PROGRESS;
-    } else {
-      onStartWash(radioLaneOption.value, licensePlateInput.value, customerNumberInput.value, hasTasks ? steps.TASKS : steps.WASH_IN_PROGRESS);
-    }
-  } else if (currentStep.value === steps.TASKS) {
-    currentStep.value = steps.WASH_IN_PROGRESS;
-  }
-}
-
-/**
- * Machine or manual start option
- */
-const radioWashType = ref('Manual');
-/**
- * Lane option
- */
-const radioLaneOption = ref('Any');
-/**
- * Check if machine is available for the selected lane.
- * Machine is available if:
- * 1. The lane has machine_available === true, AND
- * 2. The server says MACHINE is in the allowed services (based on tasks)
- */
-const isMachineAvailable = (laneId) => {
-  if (parseInt(selfServeLane.value?.id || 0) === parseInt(laneId || 0)) {
-    return selfServeMachineAvailable.value === true && allowedServices.value.includes('MACHINE');
-  }
-
-  const selectedLane = nearestDepartment.value?.lanes.find((entry: { id: number; }) => entry.id === laneId);
-  if (!selectedLane) return false;
-  return selectedLane?.machine_available === true && allowedServices.value.includes('MACHINE');
-}
-
-/**
- * Is the next button disabled
- */
-const isNextButtonDisabled = () => {
-  if (currentStep.value === steps.VEHICLE) {
-    return !clickableSteps[steps.VEHICLE]();
-  }
-  if (currentStep.value === steps.SELECT_LANE) {
-    // Check if a lane is selected and is available
-    const selectedLane = nearestDepartment.value?.lanes.find(lane => lane.id === radioLaneOption.value);
-    if (!selectedLane || !isLaneAvailable(selectedLane)) {
-      return true;
-    }
-    // If machine wash is selected, check if machine is available
-    return radioWashType.value === 'Machine' && !isMachineAvailable(radioLaneOption.value);
-
-  }
-  if (currentStep.value === steps.QUESTIONS) {
-    if (isLoadingSelfServeData.value) return true;
-    if (!allVisibleQuestionsAnswered.value) return true;
-    return false;
-  }
-  if (currentStep.value === steps.TASKS) {
-    if (washInProgress.value) {
-      return activeTasks.value.some(task => !completedTasks.value[task.id]);
-    }
-    return false;
-  }
-  return false;
-}
-/**
- * Customer vehicles
- */
-const customerVehicles = ref([]);
+const customerNumberInput = ref<string | null>(null);
+const licensePlateInput = ref<string | null>(null);
+const vehicleTypeSelect = ref<number | null>(null);
+const vehicleTypes = ref<any[]>([]);
+const customerVehicles = ref<any[]>([]);
 const isCustomerVehiclesLoading = ref(false);
-const fetchCustomerVehicles = async () => {
-  isCustomerVehiclesLoading.value = true;
-  try {
-    const response = await SessionUser.objects.vehicles.get.all();
-    customerVehicles.value = response || [];
-  } catch (error) {
-    console.error('Error fetching customer vehicles:', error);
-  } finally {
-    isCustomerVehiclesLoading.value = false;
-  }
-};
-/**
- * Type of vehicle
- */
-const vehicleTypeSelect = ref(null);
-const vehicleTypes = ref([]);
-const fetchVehicleTypes = async () => {
-  try {
-    const response = await SessionUser.objects.vehicles.columns.type.options();
-    vehicleTypes.value = response || [];
-  } catch (error) {
-    console.error('Error fetching vehicle types:', error);
-  }
-};
+const washInProgress = ref(false);
+const washLaneId = ref<number | null>(null);
+const washStartTime = ref<number | null>(null);
+const radioWashType = ref("Manual");
+const radioLaneOption = ref<any>("Any");
+const editAnswers = ref(false);
+const showDebug = ref(false);
+const currentGuidedWashStep = ref(0);
+const currentStep = ref(0);
+const hideDynamicImage = ref(false);
+
+const {
+  guestDepartments,
+  nearestDepartment,
+  isForcingNearestDepartment,
+  forceNearestDepartmentEvaluationId,
+  isSearchingDepartments,
+  availableProductIds,
+  doesCurrentDepartmentSelectionHaveSelfServeEnabled,
+  fetchDepartments,
+  evaluateLocationDepartments,
+  startDepartmentSearch,
+  selectDepartment,
+  clearForcedDepartment,
+  startAutoRefresh,
+  stopAutoRefresh,
+} = useWashDepartments({
+  includeLanes: true,
+  refreshIntervalMs: 10 * 1000,
+  canAccessSuperUser: () => SessionUser.canAccessSuperUser(),
+});
 
 const {
   loading: isLoadingSelfServeData,
   lane: selfServeLane,
-  session: selfServeSession,
   questions,
   conditions,
   rules,
@@ -755,7 +80,6 @@ const {
   allowedServices,
   visibleQuestions,
   activeTasks,
-  activeTaskServices,
   allVisibleQuestionsAnswered: selfServeQuestionsAnswered,
   machineAvailable: selfServeMachineAvailable,
   fetchSelfServeData: fetchSelfServeDataInternal,
@@ -764,281 +88,243 @@ const {
   evaluateRule,
   evaluateCondition,
   isQuestionVisible,
-  isTaskActive,
   isServiceAllowed,
   updateLaneAllowedServices,
   enableMachineRelay,
-  isImage,
   downloadAttachment,
   answerQuestion,
 } = useSelfServeLogic();
 
-const fetchSelfServeData = async () => {
-  if (!nearestDepartment.value || !radioLaneOption.value || !licensePlateInput.value?.trim()) return;
+const {
+  completedDurationMs,
+  now,
+  isRestoring,
+  formattedElapsed,
+  saveProgress,
+  clearProgress,
+  restoreProgress,
+  startElapsedTimer,
+  stopElapsedTimer,
+  registerBeforeUnload,
+  markDestroying,
+} = useWashProgress({
+  currentStep,
+  washInProgress,
+  washLaneId,
+  washStartTime,
+  licensePlateInput,
+  vehicleTypeSelect,
+  radioWashType,
+  radioLaneOption,
+  customerNumberInput,
+  answers,
+  completedTasks,
+  nearestDepartmentId: () => nearestDepartment.value?.id || null,
+  forceNearestDepartmentEvaluationId,
+  isForcingNearestDepartment,
+  applyRestoredState: (savedProgress) => {
+    washInProgress.value = savedProgress.washInProgress;
+    washLaneId.value = savedProgress.washLaneId;
+    washStartTime.value = savedProgress.washStartTime;
+    licensePlateInput.value = savedProgress.licensePlateInput;
+    vehicleTypeSelect.value = savedProgress.vehicleTypeSelect;
+    radioWashType.value = savedProgress.radioWashType || "Manual";
+    radioLaneOption.value = savedProgress.radioLaneOption || "Any";
+    customerNumberInput.value = savedProgress.customerNumberInput;
+    isForcingNearestDepartment.value = !!savedProgress.isForcingNearestDepartment;
+    forceNearestDepartmentEvaluationId.value = savedProgress.forceNearestDepartmentEvaluationId || 0;
 
-  const deptId = nearestDepartment.value.id;
-  const vTypeId = vehicleTypeSelect.value || null;
-  const laneId = radioLaneOption.value !== 'Any' ? radioLaneOption.value : null;
-
-  await fetchSelfServeDataInternal(deptId, vTypeId, laneId, licensePlateInput.value);
-};
-
-let fetchAnswersTimeout = null;
-const fetchPreviousAnswers = async () => {
-  if (fetchAnswersTimeout) clearTimeout(fetchAnswersTimeout);
-
-  fetchAnswersTimeout = setTimeout(async () => {
-    await fetchSelfServeData();
-  }, 500);
-};
-
-// Re-fetch when department, lane, registration number, or vehicle type changes
-watch([() => nearestDepartment.value?.id, () => radioLaneOption.value, () => vehicleTypeSelect.value, () => licensePlateInput.value], () => {
-  fetchSelfServeData();
-});
-
-
-const allVisibleQuestionsAnswered = computed(() => {
-  return selfServeQuestionsAnswered.value || visibleQuestions.value.every(q => answers.value[q.id] === true || answers.value[q.id] === false);
-});
-const doesUserVehicleExist = (licensePlate: string) => {
-  if (!licensePlate || licensePlate.trim() === '') return false;
-  return customerVehicles.value.some(vehicle => vehicle.reg.toUpperCase() === licensePlate.trim().toUpperCase());
-};
-watch(() => licensePlateInput.value, (newValue, oldValue) => {
-  if (oldValue !== null && newValue !== oldValue && !washInProgress.value && !isRestoring.value) {
-    // Clear previous answers when license plate changes
-    answers.value = {};
-    completedTasks.value = {};
-  }
-
-  if (newValue && doesUserVehicleExist(newValue)) {
-    const vehicle = customerVehicles.value.find(vehicle => vehicle.reg.toUpperCase() === newValue.trim().toUpperCase());
-    if (vehicle && !washInProgress.value && !isRestoring.value) {
-      vehicleTypeSelect.value = vehicle.type || null;
+    if (washInProgress.value && savedProgress.nearestDepartmentId) {
+      forceNearestDepartmentEvaluationId.value = savedProgress.nearestDepartmentId;
     }
-  } else if (!washInProgress.value && !isRestoring.value) {
-    vehicleTypeSelect.value = null;
+
+    evaluateLocationDepartments(locations.location.value);
+    answers.value = savedProgress.answers || {};
+    completedTasks.value = savedProgress.completedTasks || {};
+    currentStep.value = savedProgress.currentStep ?? 0;
+  },
+});
+
+const {
+  dynamicImageUrl,
+  onStartWash,
+  onStopWash,
+} = useWashSessionActions({
+  request: SessionUser.request,
+  nearestDepartment,
+  vehicleTypeSelect,
+  washLaneId,
+  washInProgress,
+  washStartTime,
+  completedDurationMs,
+  now,
+  currentStep,
+  steps: { VEHICLE: 0, QUESTIONS: 1, SELECT_LANE: 2, TASKS: 3, WASH_IN_PROGRESS: 4, COMPLETED: 5 },
+  radioWashType,
+  activeTasks,
+  completedTasks,
+  saveProgress,
+  clearProgress,
+  startElapsedTimer,
+  stopElapsedTimer,
+  updateLaneAllowedServices,
+  fetchWashSummary,
+  enableMachineRelay,
+  isServiceAllowed,
+});
+
+const isLaneAvailable = (lane: any) => lane.status === "AVAILABLE";
+
+const isMachineAvailable = (laneId: number | string | null) => {
+  if (parseInt(selfServeLane.value?.id || 0) === parseInt(laneId || 0)) {
+    return selfServeMachineAvailable.value === true && allowedServices.value.includes("MACHINE");
   }
 
-  if (newValue && newValue.trim().length >= 2 && !isRestoring.value) {
-    fetchSelfServeData();
+  const selectedLane = nearestDepartment.value?.lanes.find((entry: { id: number }) => entry.id === laneId);
+  if (!selectedLane) {
+    return false;
   }
+
+  return selectedLane.machine_available === true && allowedServices.value.includes("MACHINE");
+};
+
+const { steps, clickableSteps, isNextButtonDisabled, handleConfirmNext, targetStepForStart } = useWashFlowState({
+  currentStep,
+  washInProgress,
+  customerNumberInput,
+  licensePlateInput,
+  vehicleTypeSelect,
+  availableProductIds,
+  radioLaneOption,
+  radioWashType,
+  nearestDepartment,
+  allVisibleQuestionsAnswered: computed(() => selfServeQuestionsAnswered.value || visibleQuestions.value.every((question) => answers.value[question.id] === true || answers.value[question.id] === false)),
+  isLoadingSelfServeData,
+  activeTasks,
+  completedTasks,
+  editAnswers,
+  isLaneAvailable,
+  isMachineAvailable,
+  onStartWash,
+  updateLaneAllowedServices,
 });
-watch(() => currentStep.value, (newStep, oldStep) => {
-  //console.log(`MyWashStart [${instanceId}]: currentStep changed from`, oldStep, 'to', newStep, 'isRestoring:', isRestoring.value, 'isDestroying:', isDestroying.value, 'isDestroyingGlobal:', isDestroyingGlobal);
-  if (isRestoring.value && newStep === 0 && oldStep !== 0 && oldStep !== undefined) {
-    console.warn(`MyWashStart [${instanceId}]: DETECTED RESET OF currentStep TO 0 DURING RESTORATION! Attempting to revert...`);
-    // If b-steps resets it to 0, we force it back to the oldStep (which was our restored value)
-    currentStep.value = oldStep;
+
+currentStep.value = steps.VEHICLE;
+
+const unregisterBeforeUnload = ref<null | (() => void)>(null);
+
+const registrationOptions = computed(() => (
+  customerVehicles.value
+    .map((vehicle) => vehicle.reg)
+    .filter((reg) => reg && reg.trim() !== "" && reg.toUpperCase() !== (licensePlateInput.value || "").toUpperCase())
+));
+
+const selectedVehicleType = computed(() => {
+  if (!vehicleTypeSelect.value) {
+    return null;
+  }
+
+  return vehicleTypes.value.find((type) => parseInt(type.id) === parseInt(vehicleTypeSelect.value));
+});
+
+const selectedVehicleTypeName = computed(() => selectedVehicleType.value?.name || null);
+const selectedVehicleTypeDescription = computed(() => selectedVehicleType.value?.product?.description || null);
+
+const displayedDynamicImageUrl = computed(() => (
+  hideDynamicImage.value ? null : dynamicImageUrl.value
+));
+
+watch(dynamicImageUrl, () => {
+  hideDynamicImage.value = false;
+});
+
+const allVisibleQuestionsAnswered = computed(() => (
+  selfServeQuestionsAnswered.value
+  || visibleQuestions.value.every((question) => answers.value[question.id] === true || answers.value[question.id] === false)
+));
+
+const showCustomerNumberInput = computed(() => (
+  !SessionUser.user.customer_number.value || !customerNumberInput.value
+));
+
+const getRuleTypeLabel = (type: string) => {
+  const labels: Record<string, string> = {
+    IS_TRUE: "Er sand",
+    IS_FALSE: "Er falsk",
+    IS_TRUE_OR_NOT_SET: "Er sand eller ikke sat",
+    IS_FALSE_OR_NOT_SET: "Er falsk eller ikke sat",
+    IS_SET: "Er sat",
+    IS_TRUE_OR_ANY_TRUE: "Er sand eller ANY sand",
+  };
+
+  return labels[type] || type;
+};
+
+const getConditionById = (id: number) => conditions.value.find((condition) => condition.id === parseInt(id as any));
+
+const doesUserVehicleExist = (licensePlate: string | null) => {
+  if (!licensePlate || licensePlate.trim() === "") {
+    return false;
+  }
+
+  return customerVehicles.value.some((vehicle) => vehicle.reg.toUpperCase() === licensePlate.trim().toUpperCase());
+};
+
+const fetchCustomerVehicles = async () => {
+  isCustomerVehiclesLoading.value = true;
+  try {
+    const response = await SessionUser.objects.vehicles.get.all();
+    customerVehicles.value = response || [];
+  } catch (error) {
+    console.error("Error fetching customer vehicles:", error);
+  } finally {
+    isCustomerVehiclesLoading.value = false;
+  }
+};
+
+const fetchVehicleTypes = async () => {
+  try {
+    const response = await SessionUser.objects.vehicles.columns.type.options(true, {
+      isWash: true,
+      addDefaultOption: true,
+      restrictToCategory4: null,
+      includeProductRaw: true,
+    });
+    vehicleTypes.value = response || [];
+  } catch (error) {
+    console.error("Error fetching vehicle types:", error);
+  }
+};
+
+const fetchSelfServeData = async () => {
+  if (!nearestDepartment.value || !radioLaneOption.value || !licensePlateInput.value?.trim()) {
     return;
   }
-  if (oldStep === steps.QUESTIONS && newStep !== steps.QUESTIONS) {
-    editAnswers.value = false;
-  }
-  if (!isRestoring.value) {
-    saveProgress('watch-currentStep');
-  }
-});
-watch(() => SessionUser.user.customer_number.value, (newValue) => {
-  customerNumberInput.value = newValue;
-});
-watch(() => customerNumberInput.value, (newValue, oldValue) => {
-  if (oldValue !== null && newValue !== oldValue && !washInProgress.value && !isRestoring.value) {
-    // Clear previous answers when customer number changes
-    answers.value = {};
-    completedTasks.value = {};
-  }
-  if (licensePlateInput.value && newValue && !isRestoring.value) {
-    fetchSelfServeData();
-  }
-});
 
-// Persist when any critical state changes during an active wash
-watch([
-  () => washInProgress.value,
-  () => washLaneId.value,
-  () => washStartTime.value,
-  () => currentStep.value,
-  () => radioLaneOption.value,
-  () => radioWashType.value,
-  () => licensePlateInput.value,
-  () => vehicleTypeSelect.value,
-  () => customerNumberInput.value,
-  () => answers.value,
-  () => completedTasks.value,
-], (newValues) => {
-  if (!isRestoring.value) {
-    saveProgress('watch-deep');
-  }
-}, { deep: true });
-/**
- * If the lane isn't set, and there's an available lane, select it
- */
-watch(() => nearestDepartment.value, (newValue) => {
-  if (newValue && newValue.lanes && newValue.lanes.length > 0) {
-    // If the wash lane option is not set or is invalid, select the first available lane
-    if (!radioLaneOption.value || !newValue.lanes.find(lane => lane.id === radioLaneOption.value)) {
-      const availableLane = newValue.lanes.find(lane => isLaneAvailable(lane));
-      if (availableLane && !washInProgress.value && !isRestoring.value) {
-        radioLaneOption.value = availableLane.id;
-      }
-    }
-  }
-});
+  const departmentId = nearestDepartment.value.id;
+  const laneId = radioLaneOption.value !== "Any" ? radioLaneOption.value : null;
 
-// Refresh preview when the selected lane changes and fall back to the questions step if new answers are required.
-watch(() => radioLaneOption.value, (newLaneId) => {
-  if (newLaneId && newLaneId !== 'Any' && !isRestoring.value) {
-    fetchSelfServeData().then(() => {
-      if (!allVisibleQuestionsAnswered.value && !washInProgress.value && currentStep.value > steps.QUESTIONS) {
-        currentStep.value = steps.QUESTIONS;
-      }
-    });
-  }
-});
-
-/**
- * Guided wash flow
- */
-const guidedWashFlow = ref(true);
-type guidedWashFlowBrushColor = 'is-black' | 'is-info' | 'is-link' | 'is-danger' | 'is-warning' | 'is-white';
-type guidedWashFlowBrushes = {
-  label: string,
-  description: string,
-  warning?: string,
-  color: guidedWashFlowBrushColor,
-  position: 'left' | 'right',
-}[];
-type guidedWashFlowStep = {
-  title: string,
-  warning?: string,
-  content: string,
-  brushes: guidedWashFlowBrushes,
-}
-const guidedWashFlowSteps: guidedWashFlowStep[] = [
-  {
-    title: 'Højtryks forvask',
-    content: 'Spul med højtryk for at løsne skidt.',
-    warning: '',
-    brushes: [
-      {
-        label: 'Sort slange',
-        description: 'til højtryks forvask.',
-        warning: 'Min. afstand til bil 20cm.',
-        color: 'is-black',
-        position: 'right',
-      },
-    ],
-  },
-  {
-    title: 'Sæbe-pålægning',
-    content: 'Dæk bilen ind i sæbe.',
-    brushes: [
-      {
-        label: 'Blå børste',
-        description: 'til at dække bilen i sæbe.',
-        color: 'is-info',
-        position: 'left',
-      },
-    ],
-  },
-  {
-    title: 'Børstevask',
-    content: 'Børst for at fjerne resterende snavs.',
-    brushes: [
-      {
-        label: 'Blå børste',
-        description: 'til lakerede overflader.',
-        color: 'is-link',
-        position: 'left',
-      },
-      {
-        label: 'Rød børste',
-        description: 'til undervogn og fælge.',
-        color: 'is-danger',
-        position: 'right',
-      },
-    ],
-  },
-  {
-    title: 'Højtryks skylning',
-    content: 'Spul med vand indtil sæben er væk.',
-    brushes: [
-      {
-        label: 'Sort slange',
-        description: 'til at spule sæben af.',
-        color: 'is-black',
-        position: 'right',
-      },
-    ],
-  },
-  {
-    title: 'Voks pålægning',
-    content: 'Pålæg voks på førerhuset.',
-    brushes: [
-      {
-        label: 'Gul slange',
-        description: 'til voks pålægning.',
-        color: 'is-warning',
-        position: 'left',
-      },
-    ],
-  },
-  {
-    title: 'Spot Free skylning',
-    content: 'Skyl hurtigt førerhuset med Spot Free for at undgå pletter.',
-    brushes: [
-      {
-        label: 'Hvid slange',
-        description: 'til Spot Free skylning.',
-        color: 'is-white',
-        position: 'right',
-      },
-    ],
-  }
-];
-const currentGuidedWashStep = ref(0);
-const toggleGuidedWashFlow = () => {
-  guidedWashFlow.value = !guidedWashFlow.value;
-};
-const nextGuidedWashStep = () => {
-  if (currentGuidedWashStep.value < guidedWashFlowSteps.length - 1) {
-    currentGuidedWashStep.value += 1;
-  }
-};
-const previousGuidedWashStep = () => {
-  if (currentGuidedWashStep.value > 0) {
-    currentGuidedWashStep.value -= 1;
-  }
-}
-// Define the vehicle template object
-type VehicleTypeTemplate = {
-  id: number;
-  name: string;
-  price: number;
-  product?: PosProduct;
-  selected?: boolean; // Optional selected state
-  loading?: boolean; // Optional loading state
+  await fetchSelfServeDataInternal(
+    departmentId,
+    vehicleTypeSelect.value || null,
+    laneId,
+    licensePlateInput.value
+  );
 };
 
 const onSelectVehicleType = (selection: VehicleTypeTemplate) => {
-  if (isRestoring.value) return;
-  //console.warn('Vehicle type selected:', selection);
+  if (isRestoring.value) {
+    return;
+  }
+
   vehicleTypeSelect.value = selection.id;
 };
 
-const editAnswers = ref(false);
-const toggleEditAnswers = () => {
-  editAnswers.value = !editAnswers.value;
-};
-
-const onConfirmAndStartWash = () => {
-  // Used to start the wash without navigating away from the current step
-  const hasTasks = activeTasks.value.length > 0;
-  const targetStep = hasTasks ? steps.TASKS : steps.WASH_IN_PROGRESS;
-  //console.log('MyWashStart: onConfirmAndStartWash. hasTasks:', hasTasks, 'targetStep:', targetStep);
-  onStartWash(radioLaneOption.value, licensePlateInput.value, customerNumberInput.value, targetStep);
+const onToggleTask = (taskId: number, value: boolean) => {
+  completedTasks.value = {
+    ...completedTasks.value,
+    [taskId]: value,
+  };
 };
 
 const submitQuestionAnswer = async (questionId: number, value: boolean) => {
@@ -1052,629 +338,427 @@ const submitQuestionAnswer = async (questionId: number, value: boolean) => {
     await syncVehicleAnswer({
       departmentId: nearestDepartment.value.id,
       laneId: radioLaneOption.value,
-      customerNumber: parseInt(customerNumberInput.value) || SessionUser.user.customer_number.value || null,
+      customerNumber: parseInt(customerNumberInput.value || "") || SessionUser.user.customer_number.value || null,
       reg: licensePlateInput.value,
       questionId,
       value,
     });
   } catch (error) {
-    console.error('Error synchronizing self-serve answer:', error);
+    console.error("Error synchronizing self-serve answer:", error);
   }
 };
 
+const toggleEditAnswers = () => {
+  editAnswers.value = !editAnswers.value;
+};
+
+const onCloseCompleted = () => {
+  stopElapsedTimer();
+  washInProgress.value = false;
+  washLaneId.value = null;
+  washStartTime.value = null;
+  completedDurationMs.value = null;
+  licensePlateInput.value = "";
+  answers.value = {};
+  editAnswers.value = false;
+  currentStep.value = steps.VEHICLE;
+  clearProgress();
+  saveProgress("onCloseCompleted");
+};
+
+const onClearDynamicImage = () => {
+  hideDynamicImage.value = true;
+};
+
+onMounted(async () => {
+  setShowFooterInContent(false);
+  unregisterBeforeUnload.value = registerBeforeUnload();
+
+  await fetchDepartments();
+  startAutoRefresh();
+
+  customerNumberInput.value = SessionUser.user.customer_number.value || "";
+  await fetchCustomerVehicles();
+  await fetchVehicleTypes();
+  restoreProgress();
+});
+
+onUnmounted(() => {
+  if (unregisterBeforeUnload.value) {
+    unregisterBeforeUnload.value();
+  }
+
+  stopAutoRefresh();
+  markDestroying();
+  setShowFooterInContent(true);
+});
+
+watch([() => nearestDepartment.value?.id, () => radioLaneOption.value, () => vehicleTypeSelect.value, () => licensePlateInput.value], () => {
+  fetchSelfServeData();
+});
+
+watch(() => licensePlateInput.value, (newValue, oldValue) => {
+  if (oldValue !== null && newValue !== oldValue && !washInProgress.value && !isRestoring.value) {
+    answers.value = {};
+    completedTasks.value = {};
+  }
+
+  if (newValue && doesUserVehicleExist(newValue)) {
+    const vehicle = customerVehicles.value.find((entry) => entry.reg.toUpperCase() === newValue.trim().toUpperCase());
+    if (vehicle && !washInProgress.value && !isRestoring.value) {
+      vehicleTypeSelect.value = vehicle.type || null;
+    }
+  } else if (!washInProgress.value && !isRestoring.value) {
+    vehicleTypeSelect.value = null;
+  }
+
+  if (newValue && newValue.trim().length >= 2 && !isRestoring.value) {
+    fetchSelfServeData();
+  }
+});
+
+watch(() => currentStep.value, (newStep, oldStep) => {
+  if (isRestoring.value && newStep === 0 && oldStep !== 0 && typeof oldStep !== "undefined") {
+    currentStep.value = oldStep;
+    return;
+  }
+
+  if (oldStep === steps.QUESTIONS && newStep !== steps.QUESTIONS) {
+    editAnswers.value = false;
+  }
+
+  if (!isRestoring.value) {
+    saveProgress("watch-currentStep");
+  }
+});
+
+watch(() => SessionUser.user.customer_number.value, (newValue) => {
+  customerNumberInput.value = newValue;
+});
+
+watch(() => customerNumberInput.value, (newValue, oldValue) => {
+  if (oldValue !== null && newValue !== oldValue && !washInProgress.value && !isRestoring.value) {
+    answers.value = {};
+    completedTasks.value = {};
+  }
+
+  if (licensePlateInput.value && newValue && !isRestoring.value) {
+    fetchSelfServeData();
+  }
+});
+
+watch([
+  () => washInProgress.value,
+  () => washLaneId.value,
+  () => washStartTime.value,
+  () => currentStep.value,
+  () => radioLaneOption.value,
+  () => radioWashType.value,
+  () => licensePlateInput.value,
+  () => vehicleTypeSelect.value,
+  () => customerNumberInput.value,
+  () => answers.value,
+  () => completedTasks.value,
+], () => {
+  if (!isRestoring.value) {
+    saveProgress("watch-deep");
+  }
+}, { deep: true });
+
+watch(() => nearestDepartment.value, (newValue) => {
+  if (newValue && newValue.lanes && newValue.lanes.length > 0) {
+    if (!radioLaneOption.value || !newValue.lanes.find((lane) => lane.id === radioLaneOption.value)) {
+      const availableLane = newValue.lanes.find((lane) => lane.status === "AVAILABLE");
+      if (availableLane && !washInProgress.value && !isRestoring.value) {
+        radioLaneOption.value = availableLane.id;
+      }
+    }
+  }
+}, { deep: true });
+
+watch(() => radioLaneOption.value, (newLaneId) => {
+  if (newLaneId && newLaneId !== "Any" && !isRestoring.value) {
+    fetchSelfServeData().then(() => {
+      if (!allVisibleQuestionsAnswered.value && !washInProgress.value && currentStep.value > steps.QUESTIONS) {
+        currentStep.value = steps.QUESTIONS;
+      }
+    });
+  }
+});
+
 watch(() => isForcingNearestDepartment.value, (newValue) => {
   if (!newValue) {
     forceNearestDepartmentEvaluationId.value = 0;
   }
+
   evaluateLocationDepartments(locations.location.value);
-  saveProgress('isForcingNearestDepartment');
+  saveProgress("isForcingNearestDepartment");
 });
 
-watch(() => forceNearestDepartmentEvaluationId.value, (newValue) => {
-  saveProgress('forceNearestDepartmentEvaluationId');
+watch(() => forceNearestDepartmentEvaluationId.value, () => {
+  saveProgress("forceNearestDepartmentEvaluationId");
 });
 
 watch(() => allVisibleQuestionsAnswered.value, (newValue) => {
-  if (newValue && !editAnswers.value && !washInProgress.value && activeTasks.value.length === 0 && currentStep.value === steps.QUESTIONS && !isRestoring.value) {
-    onConfirmAndStartWash();
+  if (
+    newValue
+    && !editAnswers.value
+    && !washInProgress.value
+    && activeTasks.value.length === 0
+    && currentStep.value === steps.QUESTIONS
+    && !isRestoring.value
+  ) {
+    onStartWash(
+      radioLaneOption.value,
+      licensePlateInput.value,
+      customerNumberInput.value,
+      targetStepForStart()
+    );
   }
 });
-
-const isSearchingDepartments = ref(false);
-watch(() => isSearchingDepartments.value, (newValue) => {
-  if (!newValue) {
-    evaluateLocationDepartments(locations.location.value);
-  }
-});
-
-const onClickDepartmentName = () => {
-  if (!SessionUser.canAccessSuperUser()) return;
-  isForcingNearestDepartment.value = true;
-  isSearchingDepartments.value = true;
-};
-
-const onSelectDepartment = (departmentId: number) => {
-  forceNearestDepartmentEvaluationId.value = departmentId;
-  evaluateLocationDepartments(locations.location.value);
-  isSearchingDepartments.value = false;
-  isForcingNearestDepartment.value = true;
-};
-
-const onClearForcedDepartment = () => {
-  nextTick(() => {
-    isForcingNearestDepartment.value = false;
-    forceNearestDepartmentEvaluationId.value = 0;
-    isSearchingDepartments.value = false;
-    evaluateLocationDepartments(locations.location.value);
-  });
-};
-
-// Watch completed tasks and active tasks to determine the buttons that have been clicked
-watch([completedTasks, activeTasks], () => {
-  console.warn('Completed tasks or active tasks changed');
-  machineStartCurrentStep.value = getCompletedButtons();
-}, { deep: true });
-
 </script>
 
 <template>
   <UserDashboardPageWrapper :title="$t('user_dashboard.wash.title')" :subtitle="$t('user_dashboard.wash.subtitle')">
-    <PosDepartmentStepMobile1Location @location-updated="evaluateLocationDepartments"/>
+    <PosDepartmentStepMobile1Location @location-updated="evaluateLocationDepartments" />
     <div class="columns is-multiline">
-      <!-- Nearest department display -->
-      <div class="column is-12" v-show="false">
-        <WhiteBoxCard :force-state="true" :defaultOpen="false" :toggleable="false" :loading="false">
-          <template #header>
-            <div class="card-header-title has-text-link has-text-weight-bold">
-              {{ nearestDepartment ? nearestDepartment.name : 'Indlæser...' }}
-            </div>
-            <div class="card-header-icon has-text-link">
-              <i class="fas fa-map-marker-alt"></i>
-            </div>
-          </template>
-        </WhiteBoxCard>
-      </div>
-      <!-- Steps -->
       <div class="column is-12">
-        <section>
-          <MyWashStartDepartmentHeader
+        <section data-testid="self-serve-start-page">
+          <SelfServeDepartmentHeader
             :nearest-department="nearestDepartment"
             :is-forcing-nearest-department="isForcingNearestDepartment"
             :is-searching-departments="isSearchingDepartments"
             :is-searching-loading="guestDepartments.length === 0"
             :guest-departments="guestDepartments"
             :can-access-super-user="SessionUser.canAccessSuperUser()"
-            @start-search="onClickDepartmentName"
-            @select-department="onSelectDepartment"
-            @clear-forced="onClearForcedDepartment"
+            @start-search="startDepartmentSearch"
+            @select-department="selectDepartment"
+            @clear-forced="clearForcedDepartment"
           />
-          <!-- Self serve disabled icon with explanation -->
+
           <section v-if="nearestDepartment && !doesCurrentDepartmentSelectionHaveSelfServeEnabled" class="mb-5">
-            <div class="notification is-warning is-light has-text-centered">
+            <div class="notification is-warning is-light has-text-centered" data-testid="self-serve-disabled-warning">
               <span class="icon is-large">
                 <i class="fas fa-exclamation-triangle fa-2x"></i>
               </span>
-              <p class="mt-2 mb-0">{{ $t('self_wash.department_no_self_wash_in_staffed_hours') }}</p>
+              <p class="mt-2 mb-0">{{ $t("self_wash.department_no_self_wash_in_staffed_hours") }}</p>
             </div>
           </section>
-          <b-steps v-if="doesCurrentDepartmentSelectionHaveSelfServeEnabled" type="is-link" size="is-small" v-model="currentStep" :has-navigation="true">
-            <!-- Vehicle -->
-            <b-step-item :label="$t('self_wash.select_vehicle')" iconPack="fas" icon="car-side" :step="steps.VEHICLE" :clickable="clickableSteps[steps.VEHICLE]()">
-              <h1 class="title has-text-centered">{{ $t('self_wash.vehicle') }}</h1>
-              <!-- Customer number (if needed) -->
-              <b-field :label="$t('self_wash.customer_number')" v-if="!SessionUser.user.customer_number.value || !customerNumberInput">
-                <b-input v-model="customerNumberInput" :placeholder="$t('self_wash.enter_customer_number')"></b-input>
-              </b-field>
-              <b-field :label="$t('self_wash.registration_number')">
-                <b-autocomplete
-                    v-model="licensePlateInput"
-                    :data="customerVehicles.map(vehicle => vehicle.reg).filter(reg => reg && reg.trim() !== '' && reg.toUpperCase() !== (licensePlateInput || '').toUpperCase())"
-                    :placeholder="$t('self_wash.enter_registration_number')"
-                    :debounce="300"
-                    :min-length="1"
-                    :filter="(option, query) => option.toLowerCase().includes(query.toLowerCase())"
-                    icon-pack="fas"
-                    icon="car-side"
-                    clearable
-                    @select="licensePlateInput = licensePlateInput ? licensePlateInput.toUpperCase() : ''"
-                    @input="licensePlateInput = licensePlateInput ? licensePlateInput.toUpperCase() : ''"
-                    :loading="customerVehicles.length === 0 && isCustomerVehiclesLoading"
-                    :selectableHeader="true"
-                    @select-header="() => {licensePlateInput = licensePlateInput.toUpperCase();}"
-                >
-                  <template #header>
-                    <template v-if="doesUserVehicleExist(licensePlateInput)">
-                      {{ $t('self_wash.select_from_vehicles', { plate: licensePlateInput }) }}
-                    </template>
-                    <template v-else>
-                      {{ $t('self_wash.add_as_new_vehicle', { plate: licensePlateInput }) }}
-                    </template>
-                  </template>
-                  <template #empty>{{ $t('self_wash.no_vehicles_found') }}</template>
-                </b-autocomplete>
-              </b-field>
-              <!-- Select your vehicle -->
-              <b-field :label="$t('self_wash.select_your_vehicle')">
-                <template v-if="availableProductIds.length > 0 &amp;&amp; !vehicleTypeSelect">
-                  <MyWashStartVehicleTypeSelection @selected="onSelectVehicleType($event)" :selectedVehicleTypeId="vehicleTypeSelect" :restrictToProductIds="availableProductIds"/>
-                </template>
-                <template v-else-if="availableProductIds.length > 0 &amp;&amp; vehicleTypeSelect">
-                  <div class="box has-background-light has-text-centered p-4">
-                    <p class="title is-6 mb-2">{{ $t('self_wash.select_vehicle_type') }} {{ $t('common.selected') }}</p>
-                  </div>
-                </template>
-                <!-- Loading state -->
-                <template v-else-if="vehicleTypes.length === 0">
-                  <b-message type="is-info" :aria-close-label="$t('common.close')">
-                    {{ $t('self_wash.loading_vehicle_types') }}
-                  </b-message>
-                </template>
-                <template v-else>
-                  <b-message type="is-warning" :aria-close-label="$t('common.close')">
-                    {{ $t('self_wash.department_no_self_wash') }}
-                  </b-message>
-                </template>
-              </b-field>
-              <!-- Type of vehicle -->
-              <b-field :label="$t('self_wash.vehicle_type')" v-show="false"> <!-- TODO: Deprecate this field for "Select your vehicle" -->
-                <b-select v-model="vehicleTypeSelect" :placeholder="$t('self_wash.select_vehicle_type')" expanded style="max-height: 200px; overflow-y: auto;" :loading="vehicleTypes.length === 0">
-                  <template v-if="vehicleTypes.length === 0">
-                    <option disabled>{{ $t('self_wash.loading_types') }}</option>
-                  </template>
-                  <template v-for="type in vehicleTypes" :key="type.id">
-                    <option :value="type.id">
-                      {{ type.name }}
-                    </option>
-                  </template>
-                </b-select>
-              </b-field>
+
+          <b-steps
+            v-if="doesCurrentDepartmentSelectionHaveSelfServeEnabled"
+            v-model="currentStep"
+            type="is-link"
+            size="is-small"
+            :has-navigation="true"
+            data-testid="self-serve-steps"
+          >
+            <b-step-item
+              :label="$t('self_wash.select_vehicle')"
+              icon-pack="fas"
+              icon="car-side"
+              :step="steps.VEHICLE"
+              :clickable="clickableSteps[steps.VEHICLE]()"
+            >
+              <SelfServeVehicleStep
+                :customer-number="customerNumberInput"
+                :show-customer-number-input="showCustomerNumberInput"
+                :registration-number="licensePlateInput"
+                :registration-options="registrationOptions"
+                :is-customer-vehicles-loading="isCustomerVehiclesLoading"
+                :has-matching-vehicle="doesUserVehicleExist(licensePlateInput)"
+                :selected-vehicle-type-id="vehicleTypeSelect"
+                :selected-vehicle-name="selectedVehicleTypeName"
+                :selected-vehicle-description="selectedVehicleTypeDescription"
+                :available-product-ids="availableProductIds"
+                :vehicle-types="vehicleTypes"
+                @update:customer-number="customerNumberInput = $event"
+                @update:registration-number="licensePlateInput = $event"
+                @select-vehicle-type="onSelectVehicleType"
+              />
             </b-step-item>
-            <!-- Questions -->
-            <b-step-item :label="$t('self_wash.configure_wash')" iconPack="fas" icon="droplet" :step="steps.QUESTIONS" :clickable="clickableSteps[steps.QUESTIONS]()" :visible="currentStep === steps.VEHICLE || currentStep === steps.QUESTIONS || currentStep === steps.SELECT_LANE || currentStep === steps.TASKS || currentStep === steps.WASH_IN_PROGRESS || currentStep === steps.COMPLETED">
-              <div v-if="isLoadingSelfServeData" class="has-text-centered p-6">
-                <b-icon pack="fas" icon="spinner" custom-class="fa-pulse" size="is-large"></b-icon>
-                <p>{{ $t('self_wash.loading_data') }}</p>
-              </div>
-              <div v-else>
-                <div v-show="visibleQuestions.filter(q => answers[q.id] === undefined).length > 0 || editAnswers">
-                </div>
 
-                <div class="is-flex is-justify-content-center is-align-items-center mb-4">
-                  <h1 class="title mb-0">{{ $t('self_wash.answer_questions') }}</h1>
-                  <b-button size="is-small" icon-left="bug" @click="showDebug = !showDebug" type="is-ghost" class="ml-2" v-show="showDebug">Debug</b-button>
-                  <b-button v-if="editAnswers" size="is-small" icon-left="check" @click="toggleEditAnswers" type="is-success" class="ml-2">{{ $t('common.done') }}</b-button>
-                </div>
-
-                <div v-if="showDebug" class="box mb-4 has-background-light">
-                  <h5 class="subtitle is-5">Debug: Betingelser</h5>
-                  <div class="tags">
-                    <b-tooltip v-for="c in conditions" :key="c.id"
-                               position="is-top"
-                               multilined
-                               type="is-dark"
-                    >
-                      <template v-slot:content>
-                        <div class="has-text-left">
-                          <p v-if="c.description" class="mb-2"><i>{{ c.description }}</i></p>
-                          <p class="is-size-7 has-text-weight-bold mb-1">Regler:</p>
-                          <div v-for="r in rules.filter(rule => parseInt(rule.condition_id as any) === parseInt(c.id))" :key="r.id" class="is-size-7">
-                            <span class="icon is-small">
-                              <i :class="evaluateRule(r, new Set([parseInt(c.id)])) ? 'fas fa-check has-text-success' : 'fas fa-times has-text-danger'"></i>
-                            </span>
-                            <span class="ml-1">[{{ getRuleTypeLabel(r.type) }}] {{ r.name }}</span>
-                          </div>
-                          <div v-if="rules.filter(rule => parseInt(rule.condition_id as any) === parseInt(c.id)).length === 0" class="is-size-7 is-italic">
-                            Ingen regler
-                          </div>
-                        </div>
-                      </template>
-                      <span
-                          class="tag"
-                          :class="evaluateCondition(c.id) ? 'is-success' : 'is-light'"
-                      >
-                        <span class="icon is-small mr-1">
-                          <i :class="evaluateCondition(c.id) ? 'fas fa-check-circle' : 'fas fa-times-circle'"></i>
-                        </span>
-                        {{ c.name }}
-                      </span>
-                    </b-tooltip>
-                  </div>
-                  <p v-if="conditions.length === 0" class="is-italic">Ingen betingelser fundet</p>
-
-                  <hr>
-
-                  <h5 class="subtitle is-5">Debug: Alle mulige spørgsmål (synlighed)</h5>
-                  <ul>
-                    <li v-for="q in questions" :key="q.id" class="is-size-7">
-                      <span class="icon is-small">
-                        <i :class="isQuestionVisible(q) ? 'fas fa-eye has-text-success' : 'fas fa-eye-slash has-text-grey-light'"></i>
-                      </span>
-                      {{ q.question }}
-                      <b-tooltip v-if="q.condition_id"
-                                 position="is-top"
-                                 multilined
-                                 type="is-dark"
-                      >
-                        <template v-slot:content>
-                          <div v-if="getConditionById(q.condition_id)" class="has-text-left">
-                            <p v-if="getConditionById(q.condition_id).description" class="mb-2"><i>{{ getConditionById(q.condition_id).description }}</i></p>
-                            <p class="is-size-7 has-text-weight-bold mb-1">Regler:</p>
-                            <div v-for="r in rules.filter(rule => parseInt(rule.condition_id as any) === parseInt(q.condition_id))" :key="r.id" class="is-size-7">
-                              <span class="icon is-small">
-                                <i :class="evaluateRule(r, new Set([parseInt(q.condition_id)])) ? 'fas fa-check has-text-success' : 'fas fa-times has-text-danger'"></i>
-                              </span>
-                              <span class="ml-1">[{{ getRuleTypeLabel(r.type) }}] {{ r.name }}</span>
-                            </div>
-                            <div v-if="rules.filter(rule => parseInt(rule.condition_id as any) === parseInt(q.condition_id)).length === 0" class="is-size-7 is-italic">
-                              Ingen regler
-                            </div>
-                          </div>
-                        </template>
-                        <span class="has-text-grey is-clickable">(Hvis: {{ getConditionById(q.condition_id)?.name || q.condition_id }})</span>
-                      </b-tooltip>
-                    </li>
-                  </ul>
-                </div>
-
-                <div v-for="question in visibleQuestions" :key="question.id" class="box mb-4">
-                  <WhiteBoxCard :hideHeader="true" :toggleable="false" :default-open="true" :force-state="true" :force-state-footer="true">
-                    <template #content>
-                      <p class="title is-5">{{ question.question }}</p>
-                      <!--<p class="subtitle is-6" v-if="question.description">{{ question.description }}</p>-->
-                    </template>
-                    <template #footer>
-                      <!-- YES/NO answer Buttons -->
-                      <div class="card-footer-item">
-                        <b-button
-                            :type="answers[question.id] === true ? 'is-success' : 'is-light'"
-                            @click="submitQuestionAnswer(question.id, true)"
-                            expanded
-                        >{{ $t('common.yes') }}</b-button>
-                      </div>
-                      <div class="card-footer-item">
-                        <b-button
-                            :type="answers[question.id] === false ? 'is-danger' : 'is-light'"
-                            @click="submitQuestionAnswer(question.id, false)"
-                            expanded
-                        >{{ $t('common.no') }}</b-button>
-                      </div>
-                    </template>
-                  </WhiteBoxCard>
-                </div>
-                <!-- Confirm and start wash button -->
-                <div class="has-text-centered" v-if="allVisibleQuestionsAnswered && !editAnswers && !washInProgress" v-show="false">
-                  <b-button
-                      class="is-large is-link"
-                      @click="onConfirmAndStartWash()"
-                  >
-                    <span class="icon is-small">
-                      <i class="fas fa-check-circle"></i>
-                    </span>
-                    <span>{{ $t('self_wash.confirm_and_start') }}</span>
-                  </b-button>
-                </div>
-              </div>
+            <b-step-item
+              :label="$t('self_wash.configure_wash')"
+              icon-pack="fas"
+              icon="droplet"
+              :step="steps.QUESTIONS"
+              :clickable="clickableSteps[steps.QUESTIONS]()"
+              :visible="currentStep === steps.VEHICLE || currentStep === steps.QUESTIONS || currentStep === steps.SELECT_LANE || currentStep === steps.TASKS || currentStep === steps.WASH_IN_PROGRESS || currentStep === steps.COMPLETED"
+            >
+              <SelfServeQuestionsStep
+                :is-loading="isLoadingSelfServeData"
+                :visible-questions="visibleQuestions"
+                :answers="answers"
+                :edit-answers="editAnswers"
+                :show-debug="showDebug"
+                :conditions="conditions"
+                :rules="rules"
+                :evaluate-condition="evaluateCondition"
+                :evaluate-rule="evaluateRule"
+                :is-question-visible="isQuestionVisible"
+                :get-condition-by-id="getConditionById"
+                :get-rule-type-label="getRuleTypeLabel"
+                @toggle-debug="showDebug = !showDebug"
+                @toggle-edit="toggleEditAnswers"
+                @answer-question="submitQuestionAnswer"
+              />
             </b-step-item>
-            <!-- Lane selection -->
-            <b-step-item :label="$t('self_wash.configure_wash')" iconPack="fas" icon="droplet" :step="steps.SELECT_LANE" :clickable="clickableSteps[steps.SELECT_LANE]()" :visible="currentStep === steps.VEHICLE || currentStep === steps.SELECT_LANE || currentStep === steps.QUESTIONS">
-              <h1 class="title has-text-centered">{{ $t('self_wash.start_wash') }}</h1>
-              <b-field :label="$t('self_wash.wash_lane')">
-                <div class="columns is-multiline is-mobile" :class="{ 'is-centered': nearestDepartment && (nearestDepartment.lanes || []).length >= 2 }">
-                  <template v-for="lane in nearestDepartment?.lanes || []" :key="lane">
-                    <div class="column is-half-mobile is-one-third-tablet is-one-quarter-desktop">
-                      <!-- Radio button for lane selection -->
-                      <BRadioButton
-                          v-model="radioLaneOption"
-                          :native-value="lane.id"
-                          type="is-link"
-                      >
-                        <span>
-                          <span>
-                          {{ $t('self_wash.lane') }} {{ lane.name }}<br>
-                          </span>
-                          <span v-if="!isLaneAvailable(lane)">
-                            <small>
-                              <BIcon icon="times-circle" type="is-danger" pack="fas" class="mr-1"/>
-                              {{ $t('self_wash.occupied') }}
-                            </small>
-                          </span>
-                          <span v-else>
-                            <small>
-                              <BIcon icon="check-circle" type="is-success" pack="fas" class="mr-1"/>
-                              {{ $t('self_wash.available') }}
-                            </small>
-                          </span>
-                        </span>
-                      </BRadioButton>
-                    </div>
-                    <button v-show="false"
-                            class="button is-fullwidth"
-                            :class="isLaneAvailable(lane) ? 'is-link' : 'is-danger'"
-                            :disabled="!isLaneAvailable(lane)"
-                            @click="() => onStartWash(lane.id, licensePlateInput, customerNumberInput)"
-                    >
-                    </button>
-                  </template>
-                  <!-- If no lanes are available -->
-                  <div class="column is-12" v-if="nearestDepartment && (!nearestDepartment.lanes || nearestDepartment.lanes.length === 0)">
-                    <b-message type="is-warning" aria-close-label="Luk besked">
-                      Ingen vaskebaner tilgængelige for selvvask i <b>{{nearestDepartment ? nearestDepartment.name : 'denne'}}</b> afdeling.
-                    </b-message>
-                  </div>
-                </div>
-              </b-field>
-              <!-- Machine or manual start option -->
-              <b-field label="Maskine eller manuel vask">
-                <div class="columns is-mobile is-centered is-multiline">
-                  <div class="column is-half-mobile is-one-third-tablet is-one-quarter-desktop">
-                    <b-radio-button v-model="radioWashType" native-value="Manual" type="is-link">
-                      <span>
-                          <span>
-                          Manuel<br/>
-                          </span>
-                          <small>
-                            <BIcon icon="check-circle" type="is-success" pack="fas" class="mr-1"/>
-                            Tilgængelig
-                          </small>
-                        </span>
-                    </b-radio-button>
-                  </div>
-                  <div class="column is-half-mobile is-one-third-tablet is-one-quarter-desktop">
-                    <b-radio-button v-model="radioWashType" native-value="Machine" type="is-link" :disabled="!isMachineAvailable(radioLaneOption)">
-                      <span>
-                          <span>
-                          {{ $t('self_wash.machine') }}<br/>
-                          </span>
-                          <span v-if="!isMachineAvailable(radioLaneOption)">
-                            <small>
-                              <BIcon icon="times-circle" type="is-danger" pack="fas" class="mr-1"/>
-                              {{ $t('self_wash.unavailable') }}
-                            </small>
-                          </span>
-                          <span v-else>
-                            <small>
-                              <BIcon icon="check-circle" type="is-success" pack="fas" class="mr-1"/>
-                              {{ $t('self_wash.available') }}
-                            </small>
-                          </span>
-                        </span>
-                    </b-radio-button>
-                  </div>
-                </div>
-              </b-field>
+
+            <b-step-item
+              :label="$t('self_wash.configure_wash')"
+              icon-pack="fas"
+              icon="droplet"
+              :step="steps.SELECT_LANE"
+              :clickable="clickableSteps[steps.SELECT_LANE]()"
+              :visible="currentStep === steps.VEHICLE || currentStep === steps.SELECT_LANE || currentStep === steps.QUESTIONS"
+            >
+              <SelfServeLaneStep
+                :lanes="nearestDepartment?.lanes || []"
+                :selected-lane-id="radioLaneOption"
+                :wash-type="radioWashType"
+                :department-name="nearestDepartment?.name || null"
+                :is-lane-available="isLaneAvailable"
+                :is-machine-available="isMachineAvailable"
+                @update:selected-lane-id="radioLaneOption = $event"
+                @update:wash-type="radioWashType = $event"
+              />
             </b-step-item>
-            <!-- Tasks -->
-            <b-step-item :label="$t('self_wash.perform_wash')" iconPack="fas" icon="soap" :step="steps.TASKS" :clickable="clickableSteps[steps.TASKS]()" :visible="(currentStep === steps.TASKS || currentStep === steps.QUESTIONS || currentStep === steps.VEHICLE || currentStep === steps.SELECT_LANE)">
-              <div v-if="isLoadingSelfServeData" class="has-text-centered p-6">
-                <b-icon pack="fas" icon="spinner" custom-class="fa-pulse" size="is-large"></b-icon>
-                <p>{{ $t('self_wash.loading_data') }}</p>
-              </div>
-              <div v-else class="mt-6">
-                <div style="position: sticky; top: 0; background-color: white; z-index: 10; padding-top: 1rem; padding-bottom: 1rem; border-bottom: 1px solid #ddd; margin-bottom: 1rem;">
-                  <h1 class="title has-text-centered">{{ $t('self_wash.wash_in_progress') }}</h1>
-                  <h2 class="subtitle has-text-centered">
-                    <strong>{{ formattedElapsed }}</strong>
-                  </h2>
-                </div>
-                <!-- Dynamic machine UI for tasks -->
-                <div v-if="dynamicImageUrl" class="mb-4">
-                  <img :key="machineStartCurrentStep" :src="dynamicImageUrl" @error="dynamicImageUrl = null" alt="Machine status" style="max-width: 100%; height: auto; border-radius: 4px; display: block; margin-left: auto; margin-right: auto;">
-                </div>
-                <!-- Tasks -->
-                <div v-show="allVisibleQuestionsAnswered && !editAnswers" class="notification is-info is-light mb-4">
-                  <h1 class="title has-text-centered mb-2" v-if="activeTasks.length > 0">{{ $t('self_wash.start_machine') }}</h1>
-                  <h1 class="title has-text-centered mb-2" v-else>{{ $t('self_wash.questions_answered') }}</h1>
-                  <div v-for="task in activeTasks" :key="task.id" class="notification is-warning is-light mb-4" :class="{'is-success': completedTasks[task.id]}">
-                    <div class="columns is-mobile is-vcentered">
-                      <div class="column is-narrow">
-                        <b-field>
-                          <b-checkbox size="is-large" v-model="completedTasks[task.id]" type="is-success"></b-checkbox>
-                        </b-field>
-                      </div>
-                      <div class="column">
-                        <p><strong>{{ task.task }}</strong></p>
-                        <p class="is-size-7" v-if="task.description">{{ task.description }}</p>
-                        <div v-if="task.attachments && task.attachments.length > 0" class="mt-2">
-                          <div v-for="attachment in task.attachments" :key="attachment.id" class="mb-2">
-                            <template v-if="isImage(attachment) && attachment.download_link">
-                              <img :src="attachment.download_link" :alt="attachment.content?.other" style="max-width: 100%; height: auto; border-radius: 4px; display: block;" class="mb-1 is-clickable" @click="downloadAttachment(task.id, attachment.id)">
-                            </template>
-                            <div v-else class="is-flex is-align-items-center">
-                              <b-icon pack="fas" icon="paperclip" size="is-small" class="mr-1"></b-icon>
-                              <a @click="downloadAttachment(task.id, attachment.id)" class="is-size-7">{{ attachment.content?.other || $t('self_wash.attached_file') }}</a>
-                            </div>
-                          </div>
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </div>
+
+            <b-step-item
+              :label="$t('self_wash.perform_wash')"
+              icon-pack="fas"
+              icon="soap"
+              :step="steps.TASKS"
+              :clickable="clickableSteps[steps.TASKS]()"
+              :visible="currentStep === steps.TASKS || currentStep === steps.QUESTIONS || currentStep === steps.VEHICLE || currentStep === steps.SELECT_LANE"
+            >
+              <SelfServeTasksStep
+                :is-loading="isLoadingSelfServeData"
+                :formatted-elapsed="formattedElapsed"
+                :dynamic-image-url="displayedDynamicImageUrl"
+                :active-tasks="activeTasks"
+                :completed-tasks="completedTasks"
+                :all-visible-questions-answered="allVisibleQuestionsAnswered"
+                :edit-answers="editAnswers"
+                @toggle-task="onToggleTask"
+                @download-attachment="downloadAttachment"
+                @clear-dynamic-image="onClearDynamicImage"
+              />
             </b-step-item>
-            <!-- Wash -->
-            <b-step-item :label="$t('self_wash.perform_wash')" iconPack="fas" icon="soap" :step="steps.WASH_IN_PROGRESS" :clickable="clickableSteps[steps.WASH_IN_PROGRESS]()" :visible="currentStep === steps.WASH_IN_PROGRESS">
+
+            <b-step-item
+              :label="$t('self_wash.perform_wash')"
+              icon-pack="fas"
+              icon="soap"
+              :step="steps.WASH_IN_PROGRESS"
+              :clickable="clickableSteps[steps.WASH_IN_PROGRESS]()"
+              :visible="currentStep === steps.WASH_IN_PROGRESS"
+            >
               <div style="position: sticky; top: 0; background-color: white; z-index: 10; padding-top: 1rem; padding-bottom: 1rem; border-bottom: 1px solid #ddd; margin-bottom: 1rem;">
-                <h1 class="title has-text-centered">{{ $t('self_wash.wash_in_progress') }}</h1>
+                <h1 class="title has-text-centered">{{ $t("self_wash.wash_in_progress") }}</h1>
                 <h2 class="subtitle has-text-centered">
-                  <strong>{{ formattedElapsed }}</strong>
+                  <strong data-testid="self-serve-live-elapsed">{{ formattedElapsed }}</strong>
                 </h2>
               </div>
-              <template v-if="guidedWashFlow">
-                <ScrollableSteps :maxHeight="'100%'">
-                  <template v-slot:header>
-                    <div class="level is-mobile">
-                      <div class="level-left">
-                        <div class="level-item">
-                          <h3 class="title is-6">{{ $t('self_wash.follow_steps') }}</h3>
-                        </div>
-                      </div>
-                    </div>
-                  </template>
-                  <template v-slot:steps>
-                    <template v-for="(step, index) in guidedWashFlowSteps" :key="index">
-                      <section class="my-2">
-                        <b-field :label="`${index + 1}. ${step.title}`">
-                          <div class="content">
-                            <!-- Content & Brushes -->
-                            <div class="is-block has-background-light p-3" style="border-radius: 4px;">
-                              <!-- Content -->
-                              <template v-if="step.content">
-                                <p>{{ step.content }}</p>
-                              </template>
-                              <!-- Brushes -->
-                              <template v-for="(brush, bIndex) in step.brushes" :key="bIndex">
-                                <p><strong>{{ brush.label }}</strong> {{ brush.description }}</p>
-                                <p v-if="brush.warning" class="has-text-danger"><strong>{{ $t('common.warning') }}:</strong> {{ brush.warning }}</p>
-                              </template>
-                            </div>
-                          </div>
-                        </b-field>
-                      </section>
-                    </template>
-                  </template>
-                </ScrollableSteps>
-                <b-field label="Vasketrin" v-show="false">
-                  <b-steps type="is-link" size="is-small" v-model="currentGuidedWashStep">
-                    <b-step-item
-                        v-for="(step, index) in guidedWashFlowSteps"
-                        :key="index"
-                        :label="currentGuidedWashStep === index ? step.title : ''"
-                        :icon-pack="'fas'"
-                        :icon="index === currentGuidedWashStep ? 'brush' : 'soap'"
-                        :type="index === currentGuidedWashStep ? 'is-link' : 'is-light'"
-                        :step="index"
-                    >
-                      <h3 class="title is-5 has-text-centered">{{ step.title }}</h3>
-                      <!-- Warning -->
-                      <div v-if="step.warning" class="notification is-warning is-light has-text-centered">
-                        <span class="icon">
-                          <i class="fas fa-exclamation-triangle fa-lg"></i>
-                        </span>
-                        <span class="ml-2"><strong>{{ step.warning }}</strong></span>
-                      </div>
-                      <!-- Brushes -->
-                      <div class="columns is-centered">
-                        <div
-                            class="column is-narrow"
-                            v-for="(brush, bIndex) in step.brushes"
-                            :key="bIndex"
-                        >
-                          <div :class="['tag', 'is-medium', brush.color, 'mx-2', 'mb-0', 'mt-2']" style="display: flex; align-items: center; justify-content: center;">
-                            <span class="icon is-large">
-                              <i class="fas fa-droplet fa-lg"></i>
-                            </span>
-                            <span class="ml-1"><b>{{ brush.label }}</b></span>
-                          </div>
-                          <div class="is-block has-background-light p-2 mx-2" style="border-radius: 4px;">
-                            <p class="has-text-centered mt-1">{{ brush.description }}</p>
-                          </div>
-                          <div v-show="brush.warning"
-                               :class="['tag', 'is-medium', 'is-warning', 'mx-2', 'mb-0', 'mt-0']"
-                               style="display: flex; align-items: center; justify-content: center; border-top-left-radius: 0; border-top-right-radius: 0;">
-                            <span class="icon">
-                              <i class="fas fa-exclamation-triangle fa-lg"></i>
-                            </span>
-                            <span><strong>{{ brush.warning }}</strong></span>
-                          </div>
-                        </div>
-                      </div>
-                      <p class="has-text-centered">{{ step.content }}</p>
-                      <div class="buttons is-centered">
-                        <b-button
-                            type="is-link is-light"
-                            icon-pack="fas"
-                            icon-left="arrow-left"
-                            :disabled="currentGuidedWashStep === 0"
-                            @click="previousGuidedWashStep"
-                        >{{ $t('common.previous') }}</b-button>
-                        <b-button
-                            type="is-link"
-                            icon-pack="fas"
-                            icon-right="arrow-right"
-                            :disabled="currentGuidedWashStep === guidedWashFlowSteps.length - 1"
-                            @click="nextGuidedWashStep"
-                        >{{ $t('common.next') }}</b-button>
-                      </div>
-                    </b-step-item>
-                  </b-steps>
-                </b-field>
-              </template>
+
+              <SelfServeGuidedInstructions
+                :steps="guidedWashFlowSteps"
+                :current-step="currentGuidedWashStep"
+                @update:current-step="currentGuidedWashStep = $event"
+              />
             </b-step-item>
-            <!-- Completed -->
-            <b-step-item :label="$t('self_wash.perform_wash')" iconPack="fas" icon="soap" :step="steps.COMPLETED" :visible="currentStep === steps.COMPLETED">
-              <MyWashCompletedStep :completed-duration-ms="completedDurationMs" />
+
+            <b-step-item
+              :label="$t('self_wash.perform_wash')"
+              icon-pack="fas"
+              icon="soap"
+              :step="steps.COMPLETED"
+              :visible="currentStep === steps.COMPLETED"
+            >
+              <SelfServeCompletedStep :completed-duration-ms="completedDurationMs" />
             </b-step-item>
-            <!-- Navigation buttons -->
+
             <template #navigation="{ previous, next }">
-              <!--{{ currentStep }}-->
               <div class="buttons is-centered">
                 <b-button
-                    v-show="currentStep !== steps.WASH_IN_PROGRESS && currentStep !== steps.COMPLETED"
-                    type="is-link is-light"
-                    icon-pack="fas"
-                    icon-left="arrow-left"
-                    :disabled="previous.disabled || currentStep === steps.COMPLETED || washInProgress"
-                    @click.prevent="previous.action"
+                  v-show="currentStep !== steps.WASH_IN_PROGRESS && currentStep !== steps.COMPLETED"
+                  type="is-link is-light"
+                  icon-pack="fas"
+                  icon-left="arrow-left"
+                  data-testid="self-serve-nav-previous"
+                  :disabled="previous.disabled || currentStep === steps.COMPLETED || washInProgress"
+                  @click.prevent="previous.action"
                 >
-                  {{ $t('common.previous') }}
+                  {{ $t("common.previous") }}
                 </b-button>
-                <!-- Default next button for all steps except Completed -->
+
                 <b-button
-                    v-if="currentStep !== steps.COMPLETED"
-                    v-show="currentStep === steps.VEHICLE"
-                    type="is-link"
-                    icon-pack="fas"
-                    icon-right="arrow-right"
-                    :disabled="next.disabled || isNextButtonDisabled()"
-                    @click.prevent="next.action"
+                  v-if="currentStep !== steps.COMPLETED"
+                  v-show="currentStep === steps.VEHICLE"
+                  type="is-link"
+                  icon-pack="fas"
+                  icon-right="arrow-right"
+                  data-testid="self-serve-nav-next"
+                  :disabled="isNextButtonDisabled()"
+                  @click.prevent="currentStep = steps.QUESTIONS"
                 >
-                  {{ $t('common.next') }}
+                  {{ $t("common.next") }}
                 </b-button>
-                <!-- Close button on Completed step -->
+
                 <b-button
-                    v-if="currentStep === steps.COMPLETED"
-                    type="is-link"
-                    icon-pack="fas"
-                    icon-left="times"
-                    @click.prevent="onCloseCompleted"
+                  v-if="currentStep === steps.COMPLETED"
+                  type="is-link"
+                  icon-pack="fas"
+                  icon-left="times"
+                  data-testid="self-serve-nav-close"
+                  @click.prevent="onCloseCompleted"
                 >
-                  {{ $t('common.close') }}
+                  {{ $t("common.close") }}
                 </b-button>
-                <!-- Start wash button -->
+
                 <b-button
-                    v-show="currentStep === steps.SELECT_LANE || currentStep === steps.QUESTIONS || currentStep === steps.TASKS"
-                    type="is-link"
-                    icon-pack="fas"
-                    icon-right="arrow-right"
-                    :disabled="isNextButtonDisabled()"
-                    @click="handleConfirmNext(next)"
-                >{{ $t('common.confirm') }}</b-button>
-                <!-- Help button during wash -->
+                  v-show="currentStep === steps.SELECT_LANE || currentStep === steps.QUESTIONS || currentStep === steps.TASKS"
+                  type="is-link"
+                  icon-pack="fas"
+                  icon-right="arrow-right"
+                  data-testid="self-serve-nav-confirm"
+                  :disabled="isNextButtonDisabled()"
+                  @click="handleConfirmNext"
+                >
+                  {{ $t("common.confirm") }}
+                </b-button>
+
                 <b-button
-                    v-show="currentStep === steps.WASH_IN_PROGRESS"
-                    type="is-link is-light"
-                    icon-pack="fas"
-                    icon-right="info-circle"
-                    @click.prevent="SessionUser.functions.contact.onClickCallPhoneNumber()"
-                >{{ $t('self_wash.assistance') }}</b-button>
-                <!-- Complete button -->
+                  v-show="currentStep === steps.WASH_IN_PROGRESS"
+                  type="is-link is-light"
+                  icon-pack="fas"
+                  icon-right="info-circle"
+                  data-testid="self-serve-nav-help"
+                  @click.prevent="SessionUser.functions.contact.onClickCallPhoneNumber()"
+                >
+                  {{ $t("self_wash.assistance") }}
+                </b-button>
+
                 <b-button
-                    v-show="currentStep === steps.WASH_IN_PROGRESS"
-                    type="is-link"
-                    icon-pack="fas"
-                    icon-right="check"
-                    @click.prevent="onStopWash(washLaneId); currentStep = steps.COMPLETED"
-                >{{ $t('common.done') }}</b-button>
+                  v-show="currentStep === steps.WASH_IN_PROGRESS"
+                  type="is-link"
+                  icon-pack="fas"
+                  icon-right="check"
+                  data-testid="self-serve-nav-complete"
+                  @click.prevent="onStopWash(washLaneId); currentStep = steps.COMPLETED"
+                >
+                  {{ $t("common.done") }}
+                </b-button>
               </div>
             </template>
           </b-steps>
+
+          <b-message v-else type="is-info" :aria-close-label="$t('common.close')">
+            {{ $t("self_wash.loading_data") }}
+          </b-message>
         </section>
       </div>
     </div>
-    <!--{{SessionUser.user.customer_number.value}}-->
   </UserDashboardPageWrapper>
 </template>
-
-<style scoped>
-
-</style>
diff --git a/src/views/dashboards/userDashboard/wash/displays/MyWashCompletedStep.vue b/src/views/dashboards/userDashboard/wash/displays/MyWashCompletedStep.vue
index cde3a4b9..2f63c20d 100644
--- a/src/views/dashboards/userDashboard/wash/displays/MyWashCompletedStep.vue
+++ b/src/views/dashboards/userDashboard/wash/displays/MyWashCompletedStep.vue
@@ -1,20 +1,7 @@
 <script setup lang="ts">
-defineProps<{
-  completedDurationMs: number | null;
-}>();
+import SelfServeCompletedStep from "@/components/displays/selfServe/SelfServeCompletedStep.vue";
 </script>
 
 <template>
-  <h1 class="title has-text-centered">{{ $t('self_wash.wash_completed') }}</h1>
-  <p class="has-text-centered">
-    {{ $t('self_wash.wash_completed_message') }}
-  </p>
-  <p class="has-text-centered" v-if="completedDurationMs !== null">
-    <strong>
-      {{ $t('self_wash.total_time', { minutes: Math.floor(completedDurationMs / 60000), seconds: Math.floor((completedDurationMs % 60000) / 1000) }) }}
-    </strong>
-  </p>
-  <p class="has-text-centered">
-    {{ $t('self_wash.wash_completed_contact') }}
-  </p>
+  <SelfServeCompletedStep v-bind="$attrs" />
 </template>
diff --git a/src/views/dashboards/userDashboard/wash/displays/MyWashStartDepartmentHeader.vue b/src/views/dashboards/userDashboard/wash/displays/MyWashStartDepartmentHeader.vue
index 5a14cc0b..0f814e05 100644
--- a/src/views/dashboards/userDashboard/wash/displays/MyWashStartDepartmentHeader.vue
+++ b/src/views/dashboards/userDashboard/wash/displays/MyWashStartDepartmentHeader.vue
@@ -1,78 +1,7 @@
 <script setup lang="ts">
-import {nextTick, ref, watch} from 'vue';
-import {BAutocomplete, BField, BSkeleton} from 'buefy';
-
-const props = defineProps<{
-  nearestDepartment: { id?: number; name?: string; address?: string } | null;
-  isForcingNearestDepartment: boolean;
-  isSearchingDepartments: boolean;
-  isSearchingLoading: boolean;
-  guestDepartments: Array<{ id: number; name: string }>;
-  canAccessSuperUser: boolean;
-}>();
-
-const emit = defineEmits<{
-  (e: 'start-search'): void;
-  (e: 'select-department', departmentId: number): void;
-  (e: 'clear-forced'): void;
-}>();
-
-const searchElement = ref<HTMLElement | null>(null);
-
-watch(() => props.isSearchingDepartments, (isSearching) => {
-  if (!isSearching) return;
-  nextTick(() => {
-    if (searchElement.value && (searchElement.value as any).focus) {
-      (searchElement.value as any).focus();
-    }
-  });
-});
+import SelfServeDepartmentHeader from "@/components/displays/selfServe/SelfServeDepartmentHeader.vue";
 </script>
 
 <template>
-  <h3 class="title is-4 has-text-centered mb-4 has-text-link">
-    <b-skeleton v-if="!nearestDepartment" :width="300" :height="24" class="mb-2 is-centered"/>
-    <span v-else>
-      <template v-if="isForcingNearestDepartment && isSearchingDepartments">
-        <b-field>
-          <b-autocomplete
-            ref="searchElement"
-            :data="guestDepartments"
-            field="name"
-            :placeholder="$t('global.search_departments')"
-            :keep-first="true"
-            @select="option => { if (option) emit('select-department', option.id); }"
-            :loading="isSearchingLoading"
-            expanded
-            open-on-focus
-            clear-on-select
-          >
-            <template #empty>{{ $t('self_wash.no_departments_found') }}</template>
-            <template #default="props">
-              {{ props.option.name }}
-            </template>
-          </b-autocomplete>
-        </b-field>
-      </template>
-      <template v-else>
-        <span :class="{'has-text-link is-clickable': canAccessSuperUser}" @click="emit('start-search')">
-          {{ nearestDepartment ? nearestDepartment.name : $t('self_wash.loading_department') }}
-        </span>
-        <span v-if="isForcingNearestDepartment" class="ml-2">
-          <button class="button is-small is-light is-danger" @click="emit('clear-forced')">
-            <span class="icon is-small">
-              <i class="fas fa-times"></i>
-            </span>
-            <span>{{ $t('common.clear') }}</span>
-          </button>
-        </span>
-      </template>
-    </span>
-  </h3>
-  <h5 class="subtitle is-6 has-text-centered mb-4">
-    <b-skeleton v-if="!nearestDepartment" :width="200" :height="20" class="mb-4 is-centered"/>
-    <span v-else>
-      {{ nearestDepartment.address }}
-    </span>
-  </h5>
+  <SelfServeDepartmentHeader v-bind="$attrs" />
 </template>
diff --git a/src/views/dashboards/userDashboard/wash/displays/MyWashStartVehicleTypeSelection.vue b/src/views/dashboards/userDashboard/wash/displays/MyWashStartVehicleTypeSelection.vue
index 2d76ab14..e0b3de9f 100644
--- a/src/views/dashboards/userDashboard/wash/displays/MyWashStartVehicleTypeSelection.vue
+++ b/src/views/dashboards/userDashboard/wash/displays/MyWashStartVehicleTypeSelection.vue
@@ -1,175 +1,7 @@
 <script setup lang="ts">
-import {onMounted, ref, defineEmits, defineProps, watch, computed} from 'vue';
-import { SessionUser } from '@/components/session/token/SessionUser.vue';
-import type { PosProduct } from '@/components/displays/department/pos/steps/mobile/objects/PosProduct.vue';
-import WhiteBoxCard from "@/components/displays/boxes/WhiteBoxCard.vue";
-import { getPicture } from "@/components/displays/department/pos/displays/Piktogrammer.vue";
-import {BSkeleton} from "buefy";
-// Define props (selected id can be passed if needed)
-const props = defineProps<{
-  selectedVehicleTypeId?: number;
-  restrictToProductIds?: number[];
-}>();
-// Define emits
-const emits = defineEmits<{
-  (e: 'selected', vehicleType: VehicleTypeTemplate): void;
-}>();
-
-// Define the vehicle template object
-type VehicleTypeTemplate = {
-  id: number;
-  name: string;
-  price: number;
-  product?: PosProduct;
-  selected?: boolean; // Optional selected state
-  loading?: boolean; // Optional loading state
-};
-
-const getLoadingVehicleTypes = (count: number): VehicleTypeTemplate[] => {
-  const loadingTypes: VehicleTypeTemplate[] = [];
-  for (let i = 0; i < count; i++) {
-    loadingTypes.push({ id: i, name: 'Indlæser...', price: 0, loading: true });
-  }
-  return loadingTypes;
-};
-
-const loadingVehicleTypes = ref<VehicleTypeTemplate[]>([
-  ...getLoadingVehicleTypes(6)
-]);
-
-// Define the reactive objects
-const vehicleTypes = ref<VehicleTypeTemplate[]>(
-  loadingVehicleTypes.value
-);
-
-const filteredVehicleTypes = computed(() => {
-  if (!props.restrictToProductIds || props.restrictToProductIds.length === 0) {
-    return vehicleTypes.value;
-  }
-  return vehicleTypes.value.filter(type => {
-    if (type.loading) return true;
-    if (!type.product) return false;
-    return props.restrictToProductIds.includes(type.product.id);
-  });
-});
-
-// Fetch vehicle types from SessionUser or an API
-const fetchVehicleTypes = async () => {
-  try {
-    const response = await SessionUser.objects.vehicles.columns.type.options(true, {isWash: true, addDefaultOption: true, restrictToCategory4: null, includeProductRaw: true});
-    vehicleTypes.value = response.map((type: any) => ({
-      id: type.id,
-      name: type.name,
-      price: type.price,
-      product: type.product as PosProduct,
-      selected: props.selectedVehicleTypeId === type.id,
-    }));
-    // Load missing images or other data if necessary
-    console.warn(response);
-  } catch (error) {
-    console.error('Error fetching vehicle types:', error);
-  }
-};
-
-// Select a vehicle type
-const select = (vehicleType: VehicleTypeTemplate) => {
-  if (vehicleType.loading) {
-    return; // Prevent selection if still loading
-  }
-  // Update the selected state
-  vehicleTypes.value.forEach((type) => {
-    if (type.loading) {
-      return; // Skip loading types
-    }
-    type.selected = type.id === vehicleType.id;
-  });
-  // Emit the selected vehicle type
-  emits('selected', vehicleType);
-};
-
-// Fetch vehicle types on component mount
-onMounted(() => {
-  fetchVehicleTypes();
-});
-
-// Watch for changes in selectedVehicleTypeId prop
-watch(() => props.selectedVehicleTypeId, (newId) => {
-  vehicleTypes.value.forEach((type) => {
-    if (type.loading) {
-      return; // Skip loading types
-    }
-    type.selected = type.id === newId;
-  });
-});
-
+import SelfServeVehicleTypeSelector from "@/components/displays/selfServe/SelfServeVehicleTypeSelector.vue";
 </script>
 
 <template>
-  <div>
-    <div class="columns is-multiline is-mobile is-gapless">
-      <!-- Vehicle Type Template -->
-      <template v-for="vehicleType in filteredVehicleTypes" :key="vehicleType.id">
-        <div class="column is-one-third">
-          <div class="vehicle-type-content">
-            <WhiteBoxCard :toggleable="false" :hideHeader="true" :hasHoverEffect="true" :hasSelectedStyle="vehicleType?.selected" :hasSelectionStyle="!vehicleType?.selected" @click="select(vehicleType)">
-              <template v-slot:default>
-                <div class="is-align-content-center">
-                  <!-- Image -->
-                  <div style="height: 60px; width: 60px; margin: 0 auto;" class="centered-image-container">
-                    <img v-if="!vehicleType.loading" :src="getPicture(vehicleType.product.piktogram)" :alt="vehicleType.name" class="image" />
-                    <b-skeleton v-else height="60px" width="60px" />
-                  </div>
-                </div>
-              </template>
-            </WhiteBoxCard>
-          </div>
-        </div>
-      </template>
-      <!-- Selection description -->
-      <div class="column is-full mt-3">
-        <div class="vehicle-type-description">
-          <p class="has-text-centered p-2">
-            <template v-if="filteredVehicleTypes.some(type => type.selected)">
-              Du har valgt: <strong>{{ filteredVehicleTypes.find(type => type.selected)?.name }}</strong>
-              <template v-if="filteredVehicleTypes.find(type => type.selected)?.product.description && filteredVehicleTypes.find(type => type.selected)?.product.description.length > 0">
-                <br />{{ filteredVehicleTypes.find(type => type.selected)?.product.description }}
-              </template>
-            </template>
-            <template v-else>
-              Vælg venligst din køretøjstype ved at klikke på ikonet ovenfor.
-            </template>
-          </p>
-        </div>
-      </div>
-    </div>
-  </div>
+  <SelfServeVehicleTypeSelector v-bind="$attrs" />
 </template>
-
-<style scoped>
-/* Image styling */
-.centered-image-container {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-/* Vehicle type content styling */
-.vehicle-type-content {
-  padding: 5px;
-}
-/* Prevent padding on the left, and right-most columns */
-.vehicle-type-content:nth-child(3n + 1) {
-  padding-left: 0;
-}
-.vehicle-type-content:nth-child(3n) {
-  padding-right: 0;
-}
-/* Description styling */
-.vehicle-type-description {
-  background-color: rgba(0, 0, 0, 0.08);
-  border-radius: 5px;
-  min-height: 64px;
-  justify-content: center;
-  display: flex;
-  align-items: center;
-}
-</style>
\ No newline at end of file
diff --git a/test/specs/self-serve-logic.spec.js b/test/specs/self-serve-logic.spec.js
deleted file mode 100644
index 49a8473f..00000000
--- a/test/specs/self-serve-logic.spec.js
+++ /dev/null
@@ -1,923 +0,0 @@
-/**
- * Tests for useSelfServeLogic composable
- * Covers: activeTaskServices, isServiceAllowed, isMachineAvailable logic,
- * updateLaneAllowedServices, and enableMachineRelay functionality.
- */
-
-describe('useSelfServeLogic Composable', () => {
-    describe('activeTaskServices computation', () => {
-        it('should return empty array when no tasks have services defined', async () => {
-            await browser.url('/');
-            
-            const result = await browser.executeAsync(async (done) => {
-                try {
-                    const module = await import('/src/composables/useSelfServeLogic.js');
-                    const { tasks, activeTasks, activeTaskServices } = module.useSelfServeLogic();
-                    
-                    // Set up tasks with no services
-                    tasks.value = [
-                        { id: 1, condition_id: null },
-                        { id: 2, condition_id: null }
-                    ];
-                    
-                    done({
-                        success: true,
-                        activeTaskServicesLength: activeTaskServices.value.length,
-                        activeTaskServices: activeTaskServices.value
-                    });
-                } catch (e) {
-                    done({ success: false, error: 'Exception: ' + e.message });
-                }
-            });
-            
-            console.log('activeTaskServices empty result:', JSON.stringify(result));
-            expect(result.success).toBe(true);
-            expect(result.activeTaskServicesLength).toBe(0);
-        });
-
-        it('should collect unique services from active tasks', async () => {
-            await browser.url('/');
-            
-            const result = await browser.executeAsync(async (done) => {
-                try {
-                    const module = await import('/src/composables/useSelfServeLogic.js');
-                    const { tasks, activeTaskServices } = module.useSelfServeLogic();
-                    
-                    // Set up tasks with services (no condition_id means always active)
-                    tasks.value = [
-                        { id: 1, condition_id: null, services: ['MACHINE'] },
-                        { id: 2, condition_id: null, services: ['MACHINE'] }, // Duplicate
-                        { id: 3, condition_id: null, services: [] }
-                    ];
-                    
-                    done({
-                        success: true,
-                        activeTaskServices: activeTaskServices.value,
-                        hasMachine: activeTaskServices.value.includes('MACHINE')
-                    });
-                } catch (e) {
-                    done({ success: false, error: 'Exception: ' + e.message });
-                }
-            });
-            
-            console.log('activeTaskServices unique result:', JSON.stringify(result));
-            expect(result.success).toBe(true);
-            expect(result.hasMachine).toBe(true);
-            // Should only have one MACHINE (unique)
-            expect(result.activeTaskServices.length).toBe(1);
-        });
-    });
-
-    describe('isServiceAllowed function', () => {
-        it('should return true when service is in activeTaskServices', async () => {
-            await browser.url('/');
-            
-            const result = await browser.executeAsync(async (done) => {
-                try {
-                    const module = await import('/src/composables/useSelfServeLogic.js');
-                    const { tasks, isServiceAllowed } = module.useSelfServeLogic();
-                    
-                    // Set up task with MACHINE service
-                    tasks.value = [
-                        { id: 1, condition_id: null, services: ['MACHINE'] }
-                    ];
-                    
-                    done({
-                        success: true,
-                        machineAllowed: isServiceAllowed('MACHINE'),
-                        otherAllowed: isServiceAllowed('OTHER')
-                    });
-                } catch (e) {
-                    done({ success: false, error: 'Exception: ' + e.message });
-                }
-            });
-            
-            console.log('isServiceAllowed result:', JSON.stringify(result));
-            expect(result.success).toBe(true);
-            expect(result.machineAllowed).toBe(true);
-            expect(result.otherAllowed).toBe(false);
-        });
-
-        it('should return false when no active tasks have the service', async () => {
-            await browser.url('/');
-            
-            const result = await browser.executeAsync(async (done) => {
-                try {
-                    const module = await import('/src/composables/useSelfServeLogic.js');
-                    const { tasks, isServiceAllowed } = module.useSelfServeLogic();
-                    
-                    // Set up tasks without services
-                    tasks.value = [
-                        { id: 1, condition_id: null, services: [] },
-                        { id: 2, condition_id: null }
-                    ];
-                    
-                    done({
-                        success: true,
-                        machineAllowed: isServiceAllowed('MACHINE')
-                    });
-                } catch (e) {
-                    done({ success: false, error: 'Exception: ' + e.message });
-                }
-            });
-            
-            console.log('isServiceAllowed no services result:', JSON.stringify(result));
-            expect(result.success).toBe(true);
-            expect(result.machineAllowed).toBe(false);
-        });
-    });
-
-    describe('updateLaneAllowedServices function', () => {
-        it('should be a function that accepts laneId', async () => {
-            await browser.url('/');
-            
-            const result = await browser.executeAsync(async (done) => {
-                try {
-                    const module = await import('/src/composables/useSelfServeLogic.js');
-                    const { updateLaneAllowedServices } = module.useSelfServeLogic();
-                    
-                    done({
-                        success: true,
-                        isFunction: typeof updateLaneAllowedServices === 'function'
-                    });
-                } catch (e) {
-                    done({ success: false, error: 'Exception: ' + e.message });
-                }
-            });
-            
-            console.log('updateLaneAllowedServices function check:', JSON.stringify(result));
-            expect(result.success).toBe(true);
-            expect(result.isFunction).toBe(true);
-        });
-
-        it('should return early if no laneId provided', async () => {
-            await browser.url('/');
-            
-            const result = await browser.executeAsync(async (done) => {
-                try {
-                    const module = await import('/src/composables/useSelfServeLogic.js');
-                    const { updateLaneAllowedServices, allowedServices } = module.useSelfServeLogic();
-                    
-                    // Call without laneId
-                    const response = await updateLaneAllowedServices(null);
-                    
-                    done({
-                        success: true,
-                        response: response,
-                        allowedServicesLength: allowedServices.value.length
-                    });
-                } catch (e) {
-                    done({ success: false, error: 'Exception: ' + e.message });
-                }
-            });
-            
-            console.log('updateLaneAllowedServices no laneId result:', JSON.stringify(result));
-            expect(result.success).toBe(true);
-            expect(result.response).toBeUndefined();
-        });
-    });
-
-    describe('enableMachineRelay function', () => {
-        it('should be a function that accepts laneId and optional duration', async () => {
-            await browser.url('/');
-            
-            const result = await browser.executeAsync(async (done) => {
-                try {
-                    const module = await import('/src/composables/useSelfServeLogic.js');
-                    const { enableMachineRelay } = module.useSelfServeLogic();
-                    
-                    done({
-                        success: true,
-                        isFunction: typeof enableMachineRelay === 'function'
-                    });
-                } catch (e) {
-                    done({ success: false, error: 'Exception: ' + e.message });
-                }
-            });
-            
-            console.log('enableMachineRelay function check:', JSON.stringify(result));
-            expect(result.success).toBe(true);
-            expect(result.isFunction).toBe(true);
-        });
-
-        it('should return early if no laneId provided', async () => {
-            await browser.url('/');
-            
-            const result = await browser.executeAsync(async (done) => {
-                try {
-                    const module = await import('/src/composables/useSelfServeLogic.js');
-                    const { enableMachineRelay } = module.useSelfServeLogic();
-                    
-                    // Call without laneId
-                    const response = await enableMachineRelay(null);
-                    
-                    done({
-                        success: true,
-                        response: response
-                    });
-                } catch (e) {
-                    done({ success: false, error: 'Exception: ' + e.message });
-                }
-            });
-            
-            console.log('enableMachineRelay no laneId result:', JSON.stringify(result));
-            expect(result.success).toBe(true);
-            expect(result.response).toBeUndefined();
-        });
-    });
-
-    describe('allowedServices ref', () => {
-        it('should be exported and initialized as empty array', async () => {
-            await browser.url('/');
-            
-            const result = await browser.executeAsync(async (done) => {
-                try {
-                    const module = await import('/src/composables/useSelfServeLogic.js');
-                    const { allowedServices } = module.useSelfServeLogic();
-                    
-                    done({
-                        success: true,
-                        isArray: Array.isArray(allowedServices.value),
-                        length: allowedServices.value.length
-                    });
-                } catch (e) {
-                    done({ success: false, error: 'Exception: ' + e.message });
-                }
-            });
-            
-            console.log('allowedServices ref result:', JSON.stringify(result));
-            expect(result.success).toBe(true);
-            expect(result.isArray).toBe(true);
-            expect(result.length).toBe(0);
-        });
-    });
-
-    describe('Task condition evaluation', () => {
-        it('should include task in activeTasks when condition_id is null', async () => {
-            await browser.url('/');
-            
-            const result = await browser.executeAsync(async (done) => {
-                try {
-                    const module = await import('/src/composables/useSelfServeLogic.js');
-                    const { tasks, activeTasks } = module.useSelfServeLogic();
-                    
-                    tasks.value = [
-                        { id: 1, condition_id: null, services: ['MACHINE'] },
-                        { id: 2, condition_id: 0, services: [] }
-                    ];
-                    
-                    done({
-                        success: true,
-                        activeTasksCount: activeTasks.value.length,
-                        activeTaskIds: activeTasks.value.map(t => t.id)
-                    });
-                } catch (e) {
-                    done({ success: false, error: 'Exception: ' + e.message });
-                }
-            });
-            
-            console.log('activeTasks condition evaluation result:', JSON.stringify(result));
-            expect(result.success).toBe(true);
-            expect(result.activeTasksCount).toBe(2);
-        });
-
-        it('should filter out tasks with unmet conditions', async () => {
-            await browser.url('/');
-            
-            const result = await browser.executeAsync(async (done) => {
-                try {
-                    const module = await import('/src/composables/useSelfServeLogic.js');
-                    const { tasks, conditions, rules, activeTasks, answers } = module.useSelfServeLogic();
-                    
-                    // Set up a condition that requires question 1 to be true
-                    conditions.value = [
-                        { id: 100, name: 'Test Condition' }
-                    ];
-                    
-                    rules.value = [
-                        { id: 1, condition_id: 100, object_type: 'question', object_id: 1, type: 'IS_TRUE' }
-                    ];
-                    
-                    tasks.value = [
-                        { id: 1, condition_id: 100, services: ['MACHINE'] },
-                        { id: 2, condition_id: null, services: [] }
-                    ];
-                    
-                    // Answer question 1 as false
-                    answers.value = { 1: false };
-                    
-                    done({
-                        success: true,
-                        activeTasksCount: activeTasks.value.length,
-                        activeTaskIds: activeTasks.value.map(t => t.id)
-                    });
-                } catch (e) {
-                    done({ success: false, error: 'Exception: ' + e.message });
-                }
-            });
-            
-            console.log('activeTasks condition filtering result:', JSON.stringify(result));
-            expect(result.success).toBe(true);
-            // Only task 2 should be active (task 1's condition is not met)
-            expect(result.activeTasksCount).toBe(1);
-            expect(result.activeTaskIds).toContain(2);
-        });
-
-        it('should include task when condition is met', async () => {
-            await browser.url('/');
-            
-            const result = await browser.executeAsync(async (done) => {
-                try {
-                    const module = await import('/src/composables/useSelfServeLogic.js');
-                    const { tasks, conditions, rules, activeTasks, answers, activeTaskServices, isServiceAllowed } = module.useSelfServeLogic();
-                    
-                    // Set up a condition that requires question 1 to be true
-                    conditions.value = [
-                        { id: 100, name: 'Test Condition' }
-                    ];
-                    
-                    rules.value = [
-                        { id: 1, condition_id: 100, object_type: 'question', object_id: 1, type: 'IS_TRUE' }
-                    ];
-                    
-                    tasks.value = [
-                        { id: 1, condition_id: 100, services: ['MACHINE'] }
-                    ];
-                    
-                    // Answer question 1 as true
-                    answers.value = { 1: true };
-                    
-                    done({
-                        success: true,
-                        activeTasksCount: activeTasks.value.length,
-                        activeTaskIds: activeTasks.value.map(t => t.id),
-                        activeServices: activeTaskServices.value,
-                        machineAllowed: isServiceAllowed('MACHINE')
-                    });
-                } catch (e) {
-                    done({ success: false, error: 'Exception: ' + e.message });
-                }
-            });
-            
-            console.log('activeTasks condition met result:', JSON.stringify(result));
-            expect(result.success).toBe(true);
-            expect(result.activeTasksCount).toBe(1);
-            expect(result.activeTaskIds).toContain(1);
-            expect(result.activeServices).toContain('MACHINE');
-            expect(result.machineAllowed).toBe(true);
-        });
-    });
-
-    describe('Integration: Services flow end-to-end', () => {
-        it('should correctly determine MACHINE availability based on question answers', async () => {
-            await browser.url('/');
-            
-            const result = await browser.executeAsync(async (done) => {
-                try {
-                    const module = await import('/src/composables/useSelfServeLogic.js');
-                    const { 
-                        tasks, conditions, rules, questions, answers, 
-                        activeTasks, activeTaskServices, isServiceAllowed 
-                    } = module.useSelfServeLogic();
-                    
-                    // Setup: Question about machine wash, condition, and task
-                    questions.value = [
-                        { id: 1, question: 'Do you need machine wash?', condition_id: null }
-                    ];
-                    
-                    conditions.value = [
-                        { id: 100, name: 'Machine Requested' }
-                    ];
-                    
-                    rules.value = [
-                        { id: 1, condition_id: 100, object_type: 'question', object_id: 1, type: 'IS_TRUE' }
-                    ];
-                    
-                    tasks.value = [
-                        { id: 1, task: 'Enable Machine', condition_id: 100, services: ['MACHINE'] }
-                    ];
-                    
-                    // Initially no answer
-                    answers.value = {};
-                    const initialMachineAllowed = isServiceAllowed('MACHINE');
-                    const initialActiveTasks = activeTasks.value.length;
-                    
-                    // Answer YES to machine question
-                    answers.value = { 1: true };
-                    const afterYesMachineAllowed = isServiceAllowed('MACHINE');
-                    const afterYesActiveTasks = activeTasks.value.length;
-                    
-                    // Answer NO to machine question
-                    answers.value = { 1: false };
-                    const afterNoMachineAllowed = isServiceAllowed('MACHINE');
-                    const afterNoActiveTasks = activeTasks.value.length;
-                    
-                    done({
-                        success: true,
-                        initialMachineAllowed,
-                        initialActiveTasks,
-                        afterYesMachineAllowed,
-                        afterYesActiveTasks,
-                        afterNoMachineAllowed,
-                        afterNoActiveTasks
-                    });
-                } catch (e) {
-                    done({ success: false, error: 'Exception: ' + e.message });
-                }
-            });
-            
-            console.log('Integration test result:', JSON.stringify(result));
-            expect(result.success).toBe(true);
-            // Initially: no answer means condition not met
-            expect(result.initialMachineAllowed).toBe(false);
-            expect(result.initialActiveTasks).toBe(0);
-            // After YES: condition met, MACHINE allowed
-            expect(result.afterYesMachineAllowed).toBe(true);
-            expect(result.afterYesActiveTasks).toBe(1);
-            // After NO: condition not met, MACHINE not allowed
-            expect(result.afterNoMachineAllowed).toBe(false);
-            expect(result.afterNoActiveTasks).toBe(0);
-        });
-    });
-});
-
-/**
- * Tests for MyWashStart step navigation and validation
- * Covers: steps definition, clickableSteps validation, and step transitions
- */
-describe('MyWashStart Step Navigation', () => {
-    describe('Steps definition', () => {
-        it('should define all required steps with correct indices', async () => {
-            await browser.url('/');
-            
-            const result = await browser.executeAsync(async (done) => {
-                try {
-                    // Define expected steps matching MyWashStart.vue
-                    const expectedSteps = {
-                        VEHICLE: 0,
-                        QUESTIONS: 1,
-                        SELECT_LANE: 2,
-                        TASKS: 3,
-                        WASH_IN_PROGRESS: 4,
-                        COMPLETED: 5
-                    };
-                    
-                    done({
-                        success: true,
-                        steps: expectedSteps,
-                        stepCount: Object.keys(expectedSteps).length
-                    });
-                } catch (e) {
-                    done({ success: false, error: 'Exception: ' + e.message });
-                }
-            });
-            
-            console.log('Steps definition result:', JSON.stringify(result));
-            expect(result.success).toBe(true);
-            expect(result.stepCount).toBe(6);
-            expect(result.steps.VEHICLE).toBe(0);
-            expect(result.steps.QUESTIONS).toBe(1);
-            expect(result.steps.SELECT_LANE).toBe(2);
-            expect(result.steps.TASKS).toBe(3);
-            expect(result.steps.WASH_IN_PROGRESS).toBe(4);
-            expect(result.steps.COMPLETED).toBe(5);
-        });
-    });
-
-    describe('VEHICLE step validation', () => {
-        it('should require customer number, license plate, and valid vehicle type', async () => {
-            await browser.url('/');
-            
-            const result = await browser.executeAsync(async (done) => {
-                try {
-                    // Simulate validation logic from clickableSteps[steps.VEHICLE]
-                    const testCases = [
-                        {
-                            name: 'all empty',
-                            customerNumber: '',
-                            licensePlate: '',
-                            vehicleType: null,
-                            availableProducts: [1, 2],
-                            washInProgress: false,
-                            expected: false
-                        },
-                        {
-                            name: 'only customer number',
-                            customerNumber: '12345',
-                            licensePlate: '',
-                            vehicleType: null,
-                            availableProducts: [1, 2],
-                            washInProgress: false,
-                            expected: false
-                        },
-                        {
-                            name: 'customer and plate, no vehicle type',
-                            customerNumber: '12345',
-                            licensePlate: 'ABC123',
-                            vehicleType: null,
-                            availableProducts: [1, 2],
-                            washInProgress: false,
-                            expected: false
-                        },
-                        {
-                            name: 'all valid, vehicle type in available products',
-                            customerNumber: '12345',
-                            licensePlate: 'ABC123',
-                            vehicleType: '1',
-                            availableProducts: [1, 2],
-                            washInProgress: false,
-                            expected: true
-                        },
-                        {
-                            name: 'vehicle type not in available products',
-                            customerNumber: '12345',
-                            licensePlate: 'ABC123',
-                            vehicleType: '3',
-                            availableProducts: [1, 2],
-                            washInProgress: false,
-                            expected: false
-                        }
-                    ];
-                    
-                    const results = testCases.map(tc => {
-                        // Simulate the validation logic
-                        const customerNumberValid = !!(tc.customerNumber && parseInt(tc.customerNumber));
-                        const licensePlateValid = !!(tc.licensePlate && tc.licensePlate.trim() !== '');
-                        const vehicleTypeValid = !!tc.vehicleType && tc.availableProducts.includes(parseInt(tc.vehicleType));
-                        const isValid = customerNumberValid && licensePlateValid && vehicleTypeValid;
-                        
-                        return {
-                            name: tc.name,
-                            expected: tc.expected,
-                            actual: isValid,
-                            passed: isValid === tc.expected
-                        };
-                    });
-                    
-                    done({
-                        success: results.every(r => r.passed),
-                        results
-                    });
-                } catch (e) {
-                    done({ success: false, error: 'Exception: ' + e.message });
-                }
-            });
-            
-            console.log('VEHICLE step validation result:', JSON.stringify(result));
-            expect(result.success).toBe(true);
-        });
-    });
-
-    describe('QUESTIONS step validation', () => {
-        it('should require license plate and vehicle type to be clickable', async () => {
-            await browser.url('/');
-            
-            const result = await browser.executeAsync(async (done) => {
-                try {
-                    const testCases = [
-                        {
-                            name: 'no license plate or vehicle type',
-                            licensePlate: '',
-                            vehicleType: null,
-                            washInProgress: false,
-                            currentStep: 0,
-                            expected: false
-                        },
-                        {
-                            name: 'only license plate',
-                            licensePlate: 'ABC123',
-                            vehicleType: null,
-                            washInProgress: false,
-                            currentStep: 0,
-                            expected: false
-                        },
-                        {
-                            name: 'license plate and vehicle type set',
-                            licensePlate: 'ABC123',
-                            vehicleType: '1',
-                            washInProgress: false,
-                            currentStep: 0,
-                            expected: true
-                        },
-                        {
-                            name: 'whitespace only license plate',
-                            licensePlate: '   ',
-                            vehicleType: '1',
-                            washInProgress: false,
-                            currentStep: 0,
-                            expected: false
-                        }
-                    ];
-                    
-                    const results = testCases.map(tc => {
-                        // Simulate validation: !!(licensePlate && licensePlate.trim() !== '') && !!vehicleType
-                        const isValid = !!(tc.licensePlate && tc.licensePlate.trim() !== '') && !!tc.vehicleType;
-                        
-                        return {
-                            name: tc.name,
-                            expected: tc.expected,
-                            actual: isValid,
-                            passed: isValid === tc.expected
-                        };
-                    });
-                    
-                    done({
-                        success: results.every(r => r.passed),
-                        results
-                    });
-                } catch (e) {
-                    done({ success: false, error: 'Exception: ' + e.message });
-                }
-            });
-            
-            console.log('QUESTIONS step validation result:', JSON.stringify(result));
-            expect(result.success).toBe(true);
-        });
-
-        it('should allow clicking back from tasks when wash in progress', async () => {
-            await browser.url('/');
-            
-            const result = await browser.executeAsync(async (done) => {
-                try {
-                    // When washInProgress && currentStep >= steps.TASKS, should return true
-                    const steps = { VEHICLE: 0, QUESTIONS: 1, SELECT_LANE: 2, TASKS: 3, WASH_IN_PROGRESS: 4 };
-                    
-                    const testCases = [
-                        { washInProgress: true, currentStep: steps.TASKS, expected: true },
-                        { washInProgress: true, currentStep: steps.WASH_IN_PROGRESS, expected: true },
-                        { washInProgress: true, currentStep: steps.QUESTIONS, expected: true },
-                        { washInProgress: false, currentStep: steps.TASKS, expected: false } // Will use regular validation
-                    ];
-                    
-                    const results = testCases.map(tc => {
-                        let isValid;
-                        if (tc.washInProgress && tc.currentStep >= steps.TASKS) {
-                            isValid = true;
-                        } else if (tc.washInProgress) {
-                            isValid = tc.currentStep === steps.QUESTIONS;
-                        } else {
-                            isValid = false; // Simplified; actual needs license plate check
-                        }
-                        
-                        return {
-                            currentStep: tc.currentStep,
-                            washInProgress: tc.washInProgress,
-                            expected: tc.expected,
-                            actual: isValid,
-                            passed: isValid === tc.expected
-                        };
-                    });
-                    
-                    done({
-                        success: results.every(r => r.passed),
-                        results
-                    });
-                } catch (e) {
-                    done({ success: false, error: 'Exception: ' + e.message });
-                }
-            });
-            
-            console.log('QUESTIONS step wash in progress result:', JSON.stringify(result));
-            expect(result.success).toBe(true);
-        });
-    });
-
-    describe('SELECT_LANE step validation', () => {
-        it('should require license plate, vehicle type, questions answered, and currentStep > QUESTIONS', async () => {
-            await browser.url('/');
-            
-            const result = await browser.executeAsync(async (done) => {
-                try {
-                    const steps = { QUESTIONS: 1, SELECT_LANE: 2 };
-                    
-                    const testCases = [
-                        {
-                            name: 'all requirements met',
-                            licensePlate: 'ABC123',
-                            vehicleType: '1',
-                            allQuestionsAnswered: true,
-                            currentStep: steps.SELECT_LANE,
-                            washInProgress: false,
-                            expected: true
-                        },
-                        {
-                            name: 'questions not answered',
-                            licensePlate: 'ABC123',
-                            vehicleType: '1',
-                            allQuestionsAnswered: false,
-                            currentStep: steps.SELECT_LANE,
-                            washInProgress: false,
-                            expected: false
-                        },
-                        {
-                            name: 'still on questions step',
-                            licensePlate: 'ABC123',
-                            vehicleType: '1',
-                            allQuestionsAnswered: true,
-                            currentStep: steps.QUESTIONS,
-                            washInProgress: false,
-                            expected: false
-                        }
-                    ];
-                    
-                    const results = testCases.map(tc => {
-                        // Simulate validation logic
-                        const isValid = !!(tc.licensePlate && tc.licensePlate.trim() !== '') 
-                            && !!tc.vehicleType 
-                            && tc.allQuestionsAnswered 
-                            && tc.currentStep > steps.QUESTIONS;
-                        
-                        return {
-                            name: tc.name,
-                            expected: tc.expected,
-                            actual: isValid,
-                            passed: isValid === tc.expected
-                        };
-                    });
-                    
-                    done({
-                        success: results.every(r => r.passed),
-                        results
-                    });
-                } catch (e) {
-                    done({ success: false, error: 'Exception: ' + e.message });
-                }
-            });
-            
-            console.log('SELECT_LANE step validation result:', JSON.stringify(result));
-            expect(result.success).toBe(true);
-        });
-    });
-
-    describe('TASKS step validation', () => {
-        it('should require license plate, vehicle type, lane selected, and questions answered', async () => {
-            await browser.execute(() => localStorage.clear());
-            await browser.url('/');
-            
-            const result = await browser.executeAsync(async (done) => {
-                try {
-                    const steps = { QUESTIONS: 1, SELECT_LANE: 2, TASKS: 3 };
-                    
-                    const testCases = [
-                        {
-                            name: 'all requirements met',
-                            licensePlate: 'ABC123',
-                            vehicleType: '1',
-                            laneOption: 'Lane1',
-                            allQuestionsAnswered: true,
-                            currentStep: steps.TASKS,
-                            washInProgress: false,
-                            expected: true
-                        },
-                        {
-                            name: 'no lane selected',
-                            licensePlate: 'ABC123',
-                            vehicleType: '1',
-                            laneOption: null,
-                            allQuestionsAnswered: true,
-                            currentStep: steps.SELECT_LANE,
-                            washInProgress: false,
-                            expected: false
-                        },
-                        {
-                            name: 'wash in progress at WASH_IN_PROGRESS step',
-                            licensePlate: 'ABC123',
-                            vehicleType: '1',
-                            laneOption: 'Lane1',
-                            allQuestionsAnswered: true,
-                            currentStep: 4, // WASH_IN_PROGRESS
-                            washInProgress: true,
-                            expected: true
-                        }
-                    ];
-                    
-                    const results = testCases.map(tc => {
-                        let isValid;
-                        if (tc.washInProgress && tc.currentStep === 4) { // WASH_IN_PROGRESS
-                            isValid = true;
-                        } else if (tc.washInProgress) {
-                            isValid = tc.currentStep === steps.TASKS;
-                        } else {
-                            isValid = !!(tc.licensePlate && tc.licensePlate.trim() !== '') 
-                                && !!tc.vehicleType 
-                                && !!tc.laneOption 
-                                && tc.allQuestionsAnswered 
-                                && tc.currentStep >= steps.SELECT_LANE;
-                        }
-                        
-                        return {
-                            name: tc.name,
-                            expected: tc.expected,
-                            actual: isValid,
-                            passed: isValid === tc.expected
-                        };
-                    });
-                    
-                    done({
-                        success: results.every(r => r.passed),
-                        results
-                    });
-                } catch (e) {
-                    done({ success: false, error: 'Exception: ' + e.message });
-                }
-            });
-            
-            console.log('TASKS step validation result:', JSON.stringify(result));
-            expect(result.success).toBe(true);
-        });
-    });
-
-    describe('WASH_IN_PROGRESS step validation', () => {
-        it('should only be clickable when wash is in progress', async () => {
-            await browser.execute(() => localStorage.clear());
-            await browser.url('/');
-            
-            const result = await browser.executeAsync(async (done) => {
-                try {
-                    const testCases = [
-                        { washInProgress: true, expected: true },
-                        { washInProgress: false, expected: false }
-                    ];
-                    
-                    const results = testCases.map(tc => {
-                        // Validation is simply: return washInProgress.value
-                        const isValid = tc.washInProgress;
-                        
-                        return {
-                            washInProgress: tc.washInProgress,
-                            expected: tc.expected,
-                            actual: isValid,
-                            passed: isValid === tc.expected
-                        };
-                    });
-                    
-                    done({
-                        success: results.every(r => r.passed),
-                        results
-                    });
-                } catch (e) {
-                    done({ success: false, error: 'Exception: ' + e.message });
-                }
-            });
-            
-            console.log('WASH_IN_PROGRESS step validation result:', JSON.stringify(result));
-            expect(result.success).toBe(true);
-        });
-    });
-
-    describe('Step transition flow', () => {
-        it('should follow correct step progression', async () => {
-            await browser.execute(() => localStorage.clear());
-            await browser.url('/');
-            
-            const result = await browser.executeAsync(async (done) => {
-                try {
-                    const steps = {
-                        VEHICLE: 0,
-                        QUESTIONS: 1,
-                        SELECT_LANE: 2,
-                        TASKS: 3,
-                        WASH_IN_PROGRESS: 4,
-                        COMPLETED: 5
-                    };
-                    
-                    // Test the handleConfirmNext logic
-                    const transitions = [
-                        { from: steps.QUESTIONS, to: steps.SELECT_LANE, description: 'QUESTIONS -> SELECT_LANE' },
-                        { from: steps.SELECT_LANE, to: steps.TASKS, hasTasks: true, description: 'SELECT_LANE -> TASKS (with tasks)' },
-                        { from: steps.SELECT_LANE, to: steps.WASH_IN_PROGRESS, hasTasks: false, description: 'SELECT_LANE -> WASH_IN_PROGRESS (no tasks)' },
-                        { from: steps.TASKS, to: steps.WASH_IN_PROGRESS, description: 'TASKS -> WASH_IN_PROGRESS' }
-                    ];
-                    
-                    const results = transitions.map(t => {
-                        let nextStep;
-                        if (t.from === steps.QUESTIONS) {
-                            nextStep = steps.SELECT_LANE;
-                        } else if (t.from === steps.SELECT_LANE) {
-                            nextStep = t.hasTasks ? steps.TASKS : steps.WASH_IN_PROGRESS;
-                        } else if (t.from === steps.TASKS) {
-                            nextStep = steps.WASH_IN_PROGRESS;
-                        }
-                        
-                        return {
-                            description: t.description,
-                            expected: t.to,
-                            actual: nextStep,
-                            passed: nextStep === t.to
-                        };
-                    });
-                    
-                    done({
-                        success: results.every(r => r.passed),
-                        results
-                    });
-                } catch (e) {
-                    done({ success: false, error: 'Exception: ' + e.message });
-                }
-            });
-            
-            console.log('Step transition flow result:', JSON.stringify(result));
-            expect(result.success).toBe(true);
-        });
-    });
-});
diff --git a/tests/e2e/self-serve-wash.spec.js b/tests/e2e/self-serve-wash.spec.js
new file mode 100644
index 00000000..b94a62b6
--- /dev/null
+++ b/tests/e2e/self-serve-wash.spec.js
@@ -0,0 +1,347 @@
+import { expect, test } from "@playwright/test";
+import { mockApi, seedAuthenticatedState } from "./support/network.js";
+
+async function suppressVueDevtoolsOverlay(page) {
+  await page.addInitScript(() => {
+    const style = document.createElement("style");
+    style.textContent = "#__vue-devtools-container__, .vue-devtools__anchor-btn, .vue-devtools__panel-content { display: none !important; visibility: hidden !important; pointer-events: none !important; }";
+    document.documentElement.appendChild(style);
+  });
+}
+
+async function primeSession(page, { token, permissions, sessionData = {} }) {
+  await seedAuthenticatedState(page, token);
+  await page.goto("/login");
+  await page.evaluate(async ({ sessionToken, sessionPermissions, data }) => {
+    const sessionModule = await import("/src/components/session/token/SessionUser.vue");
+    window.localStorage.setItem("token", sessionToken);
+    sessionModule.SessionUser.token.value = sessionToken;
+    sessionModule.SessionUser.authenticated.value = true;
+    sessionModule.SessionUser.permissions.value = sessionPermissions;
+    sessionModule.SessionUser.initiated.value = true;
+    sessionModule.SessionUser.user.customer_number.value = data.customer_number ?? 12345;
+    sessionModule.SessionUser.user.display_name.value = data.display_name ?? "E2E User";
+  }, {
+    sessionToken: token,
+    sessionPermissions: permissions,
+    data: sessionData,
+  });
+}
+
+async function seedGeolocation(context) {
+  await context.grantPermissions(["geolocation"]);
+  await context.setGeolocation({
+    latitude: 55.6761,
+    longitude: 12.5683,
+  });
+}
+
+async function fillRegistration(page, value) {
+  const registration = page.locator('input[placeholder*="registreringsnummer"]').first();
+  await registration.fill(value);
+  await expect(registration).toHaveValue(value);
+  await registration.press("Escape");
+}
+
+async function selectVehicleType(page, vehicleTypeId = 2) {
+  await page.getByTestId(`self-serve-vehicle-type-${vehicleTypeId}`).click();
+  await expect(page.getByTestId("self-serve-selected-vehicle-type")).toContainText(/Truck|Van|Car/);
+}
+
+function buildSavedProgress(overrides = {}) {
+  return {
+    washInProgress: false,
+    washLaneId: null,
+    washStartTime: null,
+    currentStep: 0,
+    licensePlateInput: "AB12345",
+    vehicleTypeSelect: 2,
+    radioWashType: "Manual",
+    radioLaneOption: 7,
+    customerNumberInput: "12345",
+    answers: {},
+    completedTasks: {},
+    nearestDepartmentId: 1,
+    forceNearestDepartmentEvaluationId: 0,
+    isForcingNearestDepartment: false,
+    savedAt: Date.now(),
+    ...overrides,
+  };
+}
+
+async function seedSavedProgress(page, overrides = {}) {
+  const payload = buildSavedProgress(overrides);
+  await page.addInitScript((savedProgress) => {
+    window.localStorage.setItem("mywash_progress_v6", JSON.stringify(savedProgress));
+  }, payload);
+}
+
+test.describe("Self-serve wash", () => {
+  test.skip(({ browserName }) => browserName !== "chromium", "Self-serve coverage is maintained on Chromium desktop/mobile.");
+
+  test.beforeEach(async ({ page, context }) => {
+    await suppressVueDevtoolsOverlay(page);
+    await seedGeolocation(context);
+  });
+
+  test("@smoke landing route sorts departments, loads vehicle selection, and restores direct wash progress", async ({ page }) => {
+    await mockApi(page, {
+      authenticated: true,
+      permissions: ["user"],
+      selfServe: true,
+    });
+    await primeSession(page, {
+      token: "self-serve-user-token",
+      permissions: ["user"],
+    });
+
+    await page.goto("/user/wash");
+
+    await expect(page.getByTestId("self-serve-wash-home")).toBeVisible();
+    await expect(page.getByTestId("self-serve-home-nearest-name")).toContainText("Copenhagen");
+
+    const orderedDepartmentIds = await page.locator('[data-testid^="self-serve-home-department-"]').evaluateAll(
+      (elements) => elements.map((element) => element.getAttribute("data-testid"))
+    );
+    expect(orderedDepartmentIds).toEqual([
+      "self-serve-home-department-2",
+      "self-serve-home-department-3",
+    ]);
+
+    await page.getByTestId("self-serve-home-start").click();
+    await expect(page).toHaveURL(/\/user\/wash\/start$/);
+    await expect(page.getByTestId("self-serve-department-name")).toContainText("Copenhagen");
+
+    await fillRegistration(page, "ab12345");
+    await selectVehicleType(page, 2);
+
+    await seedSavedProgress(page, {
+      washInProgress: true,
+      washLaneId: 7,
+      washStartTime: Date.now() - 20_000,
+      currentStep: 4,
+      licensePlateInput: "ZZ00000",
+      answers: {
+        21: true,
+      },
+    });
+
+    await page.reload();
+    await expect(page.getByTestId("self-serve-live-elapsed")).toBeVisible({ timeout: 10_000 });
+
+    await page.getByTestId("self-serve-nav-complete").click();
+    await expect(page.getByTestId("self-serve-completed-step")).toBeVisible();
+    await page.getByTestId("self-serve-nav-close").click();
+    await expect(page.getByTestId("self-serve-vehicle-step")).toBeVisible();
+  });
+
+  test("superuser can force a department and clear the override", async ({ page }) => {
+    await mockApi(page, {
+      authenticated: true,
+      permissions: ["user", "superuser"],
+      selfServe: true,
+    });
+    await primeSession(page, {
+      token: "self-serve-superuser-token",
+      permissions: ["user", "superuser"],
+    });
+
+    await page.goto("/user/wash/start");
+
+    await expect(page.getByTestId("self-serve-department-name")).toContainText("Copenhagen");
+    await page.getByTestId("self-serve-department-name").click();
+
+    const departmentSearch = page.locator('input[placeholder*="afdelinger"]').first();
+    await departmentSearch.fill("Odense");
+    await page.getByRole("button", { name: "Odense" }).click();
+
+    await expect(page.getByTestId("self-serve-department-name")).toContainText("Odense");
+    await expect(page.getByTestId("self-serve-department-clear")).toBeVisible();
+
+    await page.getByTestId("self-serve-department-clear").click();
+    await expect(page.getByTestId("self-serve-department-name")).toContainText("Copenhagen");
+  });
+
+  test("lane flow gates invalid lanes, direct wash path auto-starts, and expired progress is discarded", async ({ page }) => {
+    await seedSavedProgress(page, {
+      washInProgress: true,
+      washLaneId: 7,
+      washStartTime: Date.now() - 30_000,
+      currentStep: 4,
+      licensePlateInput: "STALE01",
+      vehicleTypeSelect: 2,
+      radioWashType: "Manual",
+      radioLaneOption: 7,
+      customerNumberInput: "12345",
+      savedAt: Date.now() - (3 * 60 * 60 * 1000),
+    });
+
+    await mockApi(page, {
+      authenticated: true,
+      permissions: ["user"],
+      selfServe: true,
+    });
+    await primeSession(page, {
+      token: "self-serve-direct-token",
+      permissions: ["user"],
+    });
+
+    await page.goto("/user/wash/start");
+
+    await expect(page.getByTestId("self-serve-vehicle-step")).toBeVisible();
+    await expect(page.getByTestId("self-serve-nav-complete")).toBeHidden();
+    await expect.poll(async () => page.evaluate(() => window.localStorage.getItem("mywash_progress_v6"))).toBeNull();
+
+    await seedSavedProgress(page, {
+      currentStep: 2,
+      licensePlateInput: "ZZ00000",
+      radioLaneOption: 8,
+      radioWashType: "Machine",
+    });
+    await page.reload();
+
+    await expect(page.getByTestId("self-serve-lane-step")).toBeVisible({ timeout: 10_000 });
+    await expect(page.getByRole("radio", { name: /Maskine/i })).toBeDisabled();
+    await expect(page.getByTestId("self-serve-nav-confirm")).toBeDisabled();
+
+    await page.getByTestId("self-serve-lane-option-7").click();
+    await page.getByTestId("self-serve-wash-type-manual").click();
+    await expect(page.getByTestId("self-serve-nav-confirm")).toBeEnabled({ timeout: 10_000 });
+
+    await page.getByTestId("self-serve-nav-confirm").click();
+    await expect(page.getByTestId("self-serve-live-elapsed")).toBeVisible({ timeout: 10_000 });
+  });
+
+  test("tasks flow renders dynamic image, requires completion, and restores after reload", async ({ page }) => {
+    await seedSavedProgress(page, {
+      washInProgress: true,
+      washLaneId: 7,
+      washStartTime: Date.now() - 30_000,
+      currentStep: 3,
+      licensePlateInput: "AB12345",
+      vehicleTypeSelect: 2,
+      radioLaneOption: 7,
+      customerNumberInput: "12345",
+      completedTasks: {},
+    });
+
+    await mockApi(page, {
+      authenticated: true,
+      permissions: ["user"],
+      selfServe: {
+        previewByKey: {
+          "7:AB12345": {
+            allowed: true,
+            machine_available: true,
+            lane: { id: 7, name: "7" },
+            session: { id: 501, status: "IN_PROGRESS", allowed: true },
+            questions: [
+              { id: 11, question: "Is the tarp removed?", description: "Required before machine wash.", answer: true, order_priority: 1 },
+            ],
+            conditions: [],
+            rules: [],
+            tasks: [
+              { id: 9001, task: "Prepare the truck", description: "Complete the pre-wash checks.", order_priority: 1, services: ["MACHINE"], buttons: [1] },
+            ],
+            allowed_services: ["MACHINE"],
+          },
+        },
+        summaryBySessionId: {
+          501: {
+            session: { id: 501, status: "IN_PROGRESS", allowed: true },
+            lane: { id: 7, name: "7" },
+            questions: [
+              { id: 11, question: "Is the tarp removed?", description: "Required before machine wash.", answer: true, order_priority: 1 },
+            ],
+            conditions: [],
+            rules: [],
+            tasks: [
+              { id: 9001, task: "Prepare the truck", description: "Complete the pre-wash checks.", order_priority: 1, services: ["MACHINE"], buttons: [1] },
+            ],
+            events: [
+              { id: 3, type: "QUESTION_ANSWERED", created_at: "2026-01-01T10:01:00.000Z" },
+            ],
+          },
+        },
+      },
+    });
+    await primeSession(page, {
+      token: "self-serve-tasks-token",
+      permissions: ["user"],
+    });
+
+    await page.goto("/user/wash/start");
+
+    await expect(page.getByTestId("self-serve-tasks-step")).toBeVisible({ timeout: 10_000 });
+    await expect(page.getByTestId("self-serve-dynamic-image")).toBeVisible();
+    await expect(page.getByTestId("self-serve-task-9001-attachment-302")).toBeVisible();
+    await expect(page.getByTestId("self-serve-nav-confirm")).toBeDisabled();
+
+    await page.getByTestId("self-serve-task-9001-toggle").click();
+    await expect(page.getByTestId("self-serve-nav-confirm")).toBeEnabled();
+    await page.getByTestId("self-serve-nav-confirm").click();
+
+    await expect(page.getByTestId("self-serve-live-elapsed")).toBeVisible();
+    await seedSavedProgress(page, {
+      washInProgress: true,
+      washLaneId: 7,
+      washStartTime: Date.now() - 45_000,
+      currentStep: 4,
+      licensePlateInput: "AB12345",
+      vehicleTypeSelect: 2,
+      radioLaneOption: 7,
+      customerNumberInput: "12345",
+    });
+    await page.reload();
+    await expect(page.getByTestId("self-serve-live-elapsed")).toBeVisible({ timeout: 10_000 });
+  });
+
+  test("mobile layout keeps primary controls usable", async ({ page }, testInfo) => {
+    test.skip(!testInfo.project.name.includes("mobile"), "Mobile sanity runs on the mobile project only.");
+
+    await mockApi(page, {
+      authenticated: true,
+      permissions: ["user"],
+      selfServe: true,
+    });
+    await primeSession(page, {
+      token: "self-serve-mobile-token",
+      permissions: ["user"],
+    });
+
+    await page.goto("/user/wash/start");
+
+    await expect(page.getByTestId("self-serve-start-page")).toBeVisible();
+    await fillRegistration(page, "ab12345");
+    await selectVehicleType(page, 2);
+    await expect(page.getByTestId("self-serve-nav-next")).toBeVisible();
+    await expect(page.getByTestId("self-serve-selected-vehicle-type")).toContainText("Truck");
+  });
+
+  test("admin preview modal reuses shared question/task rendering", async ({ page }) => {
+    await mockApi(page, {
+      authenticated: true,
+      permissions: ["admin", "department_access_1"],
+      selfServe: true,
+    });
+    await primeSession(page, {
+      token: "self-serve-admin-token",
+      permissions: ["admin", "department_access_1"],
+    });
+
+    await page.goto("/admin/1/modules/wash-lanes/7");
+
+    await expect(page.getByTestId("department-wash-lane-page")).toBeVisible({ timeout: 10_000 });
+    await page.getByTestId("self-serve-admin-open-try-modal").first().click();
+
+    await expect(page.getByTestId("self-serve-try-modal")).toBeVisible();
+    await page.getByTestId("self-serve-try-reg").fill("ab12345");
+    await page.getByTestId("self-serve-try-refresh").click();
+
+    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 });
+  });
+});
diff --git a/tests/e2e/support/network.js b/tests/e2e/support/network.js
index 8e8fcd6e..5a6fa8b4 100644
--- a/tests/e2e/support/network.js
+++ b/tests/e2e/support/network.js
@@ -1,4 +1,8 @@
 const API_HOST = /https?:\/\/(?:api\.truckwash\.io|localhost|127\.0\.0\.1)(?::\d+)?\/api\/.*/i;
+const TINY_PNG = Buffer.from(
+  "iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mP8/x8AAukB9pY9ZxQAAAAASUVORK5CYII=",
+  "base64"
+);
 
 function json(body, status = 200) {
   return {
@@ -8,7 +12,264 @@ function json(body, status = 200) {
   };
 }
 
+function binary(body, contentType = "image/png", status = 200) {
+  return {
+    status,
+    contentType,
+    body,
+  };
+}
+
+function mergeFixture(base, overrides = {}) {
+  return {
+    ...base,
+    ...overrides,
+    previewByKey: {
+      ...(base.previewByKey || {}),
+      ...(overrides.previewByKey || {}),
+    },
+    summaryBySessionId: {
+      ...(base.summaryBySessionId || {}),
+      ...(overrides.summaryBySessionId || {}),
+    },
+    summaryByKey: {
+      ...(base.summaryByKey || {}),
+      ...(overrides.summaryByKey || {}),
+    },
+    answerResponseByKey: {
+      ...(base.answerResponseByKey || {}),
+      ...(overrides.answerResponseByKey || {}),
+    },
+    attachmentsByTaskId: {
+      ...(base.attachmentsByTaskId || {}),
+      ...(overrides.attachmentsByTaskId || {}),
+    },
+    attachmentDownloadByKey: {
+      ...(base.attachmentDownloadByKey || {}),
+      ...(overrides.attachmentDownloadByKey || {}),
+    },
+  };
+}
+
+function createSelfServeFixture(overrides = {}) {
+  const departments = [
+    {
+      id: 1,
+      name: "Copenhagen",
+      address: "Alpha 1",
+      latitude: 55.6761,
+      longitude: 12.5683,
+      self_serve_enabled: true,
+      lanes: [
+        {
+          id: 7,
+          department: 1,
+          name: "7",
+          status: "AVAILABLE",
+          machine_available: true,
+          products: [2, 3],
+          relay_in_id: "IN-7",
+          relay_out_id: "OUT-7",
+          relay_machine_id: "M-7",
+          dynamic_image_id: 77,
+          machine_type_id: null,
+        },
+        {
+          id: 8,
+          department: 1,
+          name: "8",
+          status: "FAULT",
+          machine_available: false,
+          products: [2, 3],
+          relay_in_id: "IN-8",
+          relay_out_id: "OUT-8",
+          relay_machine_id: "M-8",
+          dynamic_image_id: 78,
+          machine_type_id: null,
+        },
+      ],
+    },
+    {
+      id: 2,
+      name: "Odense",
+      address: "Beta 2",
+      latitude: 55.4038,
+      longitude: 10.4024,
+      self_serve_enabled: true,
+      lanes: [
+        {
+          id: 9,
+          department: 2,
+          name: "9",
+          status: "AVAILABLE",
+          machine_available: true,
+          products: [2, 4],
+          relay_in_id: "IN-9",
+          relay_out_id: "OUT-9",
+          relay_machine_id: "M-9",
+          dynamic_image_id: 79,
+          machine_type_id: null,
+        },
+      ],
+    },
+    {
+      id: 3,
+      name: "Aarhus",
+      address: "Gamma 3",
+      latitude: 56.1629,
+      longitude: 10.2039,
+      self_serve_enabled: true,
+      lanes: [
+        {
+          id: 10,
+          department: 3,
+          name: "10",
+          status: "AVAILABLE",
+          machine_available: false,
+          products: [3, 4],
+          relay_in_id: "IN-10",
+          relay_out_id: "OUT-10",
+          relay_machine_id: "M-10",
+          dynamic_image_id: 80,
+          machine_type_id: null,
+        },
+      ],
+    },
+  ];
+
+  const products = [
+    { id: 2, name: "Truck", price: 100, description: "Large truck", piktogram: "truck", is_wash: true, subscription_allowed: true, category: 4 },
+    { id: 3, name: "Van", price: 80, description: "Medium van", piktogram: "van", is_wash: true, subscription_allowed: true, category: 4 },
+    { id: 4, name: "Car", price: 60, description: "Small car", piktogram: "car", is_wash: true, subscription_allowed: true, category: 4 },
+  ];
+
+  const baseFixture = {
+    departments,
+    departmentLanes: departments.flatMap((department) => department.lanes),
+    products,
+    customerVehicles: [
+      { id: 1, reg: "AB12345", type: 2 },
+      { id: 2, reg: "CD67890", type: 3 },
+    ],
+    previewByKey: {
+      "7:AB12345": {
+        allowed: true,
+        machine_available: true,
+        lane: { id: 7, name: "7" },
+        session: { id: 501, status: "IN_PROGRESS", allowed: true },
+        questions: [
+          { id: 11, question: "Is the tarp removed?", description: "Required before machine wash.", answer: null, order_priority: 1 },
+        ],
+        conditions: [],
+        rules: [],
+        tasks: [
+          { id: 9001, task: "Prepare the truck", description: "Complete the pre-wash checks.", order_priority: 1, services: ["MACHINE"], buttons: [1] },
+        ],
+        allowed_services: ["MACHINE"],
+      },
+      "7:ZZ00000": {
+        allowed: true,
+        machine_available: true,
+        lane: { id: 7, name: "7" },
+        session: { id: 601, status: "IN_PROGRESS", allowed: true },
+        questions: [
+          { id: 21, question: "Ready for direct wash?", answer: null, order_priority: 1 },
+        ],
+        conditions: [],
+        rules: [],
+        tasks: [],
+        allowed_services: ["MACHINE"],
+      },
+    },
+    summaryBySessionId: {
+      501: {
+        session: { id: 501, status: "IN_PROGRESS", allowed: true },
+        lane: { id: 7, name: "7" },
+        questions: [
+          { id: 11, question: "Is the tarp removed?", description: "Required before machine wash.", answer: null, order_priority: 1 },
+        ],
+        conditions: [],
+        rules: [],
+        tasks: [
+          { id: 9001, task: "Prepare the truck", description: "Complete the pre-wash checks.", order_priority: 1, services: ["MACHINE"], buttons: [1] },
+        ],
+        events: [
+          { id: 1, type: "STARTED", created_at: "2026-01-01T10:00:00.000Z" },
+        ],
+      },
+      601: {
+        session: { id: 601, status: "IN_PROGRESS", allowed: true },
+        lane: { id: 7, name: "7" },
+        questions: [
+          { id: 21, question: "Ready for direct wash?", answer: null, order_priority: 1 },
+        ],
+        conditions: [],
+        rules: [],
+        tasks: [],
+        events: [
+          { id: 2, type: "STARTED", created_at: "2026-01-01T11:00:00.000Z" },
+        ],
+      },
+    },
+    summaryByKey: {},
+    answerResponseByKey: {
+      "7:AB12345:11:true": {
+        session: { id: 501, status: "IN_PROGRESS", allowed: true },
+        lane: { id: 7, name: "7" },
+        questions: [
+          { id: 11, question: "Is the tarp removed?", description: "Required before machine wash.", answer: true, order_priority: 1 },
+        ],
+        conditions: [],
+        rules: [],
+        tasks: [
+          { id: 9001, task: "Prepare the truck", description: "Complete the pre-wash checks.", order_priority: 1, services: ["MACHINE"], buttons: [1] },
+        ],
+        events: [
+          { id: 3, type: "QUESTION_ANSWERED", created_at: "2026-01-01T10:01:00.000Z" },
+        ],
+      },
+      "7:ZZ00000:21:true": {
+        session: { id: 601, status: "IN_PROGRESS", allowed: true },
+        lane: { id: 7, name: "7" },
+        questions: [
+          { id: 21, question: "Ready for direct wash?", answer: true, order_priority: 1 },
+        ],
+        conditions: [],
+        rules: [],
+        tasks: [],
+        events: [
+          { id: 4, type: "QUESTION_ANSWERED", created_at: "2026-01-01T11:01:00.000Z" },
+        ],
+      },
+    },
+    attachmentsByTaskId: {
+      9001: [
+        { id: 301, content: { other: "prep.pdf" } },
+        { id: 302, content: { other: "prep.jpg" } },
+      ],
+    },
+    attachmentDownloadByKey: {
+      "9001:301": { download_link: "https://cdn.example.test/prep.pdf" },
+      "9001:302": { download_link: "https://cdn.example.test/prep.jpg" },
+    },
+    laneAllowedServices: ["MACHINE"],
+    commandResponse: { success: true },
+    relayResponse: { success: true },
+    dynamicImage: TINY_PNG,
+  };
+
+  const fixture = mergeFixture(baseFixture, overrides);
+  fixture.departmentLanes = fixture.departments.flatMap((department) => department.lanes || []);
+  fixture.laneById = fixture.departmentLanes.reduce((accumulator, lane) => {
+    accumulator[String(lane.id)] = lane;
+    return accumulator;
+  }, {});
+  return fixture;
+}
+
 export async function mockApi(page, options = {}) {
+  const selfServe = options.selfServe ? createSelfServeFixture(options.selfServe === true ? {} : options.selfServe) : null;
+
   await page.route(API_HOST, async (route) => {
     const request = route.request();
     const url = request.url();
@@ -92,6 +353,115 @@ export async function mockApi(page, options = {}) {
       return;
     }
 
+    if (selfServe) {
+      if (pathname.endsWith("/guest/departments") && method === "GET") {
+        await route.fulfill(json({ data: selfServe.departments }));
+        return;
+      }
+
+      if (pathname.endsWith("/departments") && method === "GET") {
+        await route.fulfill(json({ data: selfServe.departments.map(({ lanes, ...department }) => department) }));
+        return;
+      }
+
+      if (pathname.endsWith("/products") && method === "GET") {
+        await route.fulfill(json({ data: selfServe.products }));
+        return;
+      }
+
+      if (pathname.endsWith("/vehicles") && method === "GET") {
+        await route.fulfill(json({ data: selfServe.customerVehicles }));
+        return;
+      }
+
+      if (pathname.endsWith("/department/lanes") && method === "GET") {
+        const laneId = parsedUrl.searchParams.get("id");
+
+        if (laneId) {
+          await route.fulfill(json({ data: selfServe.laneById[laneId] || null }));
+          return;
+        }
+
+        await route.fulfill(json({ data: selfServe.departmentLanes }));
+        return;
+      }
+
+      if (pathname.endsWith("/department/selfserve/vehicle/allowed") && method === "GET") {
+        const laneId = parsedUrl.searchParams.get("lane_id");
+        const reg = (parsedUrl.searchParams.get("reg") || "").toUpperCase();
+        const previewData = selfServe.previewByKey[`${laneId}:${reg}`] || null;
+        await route.fulfill(json({ data: previewData || { allowed: false, questions: [], tasks: [], conditions: [], rules: [] } }));
+        return;
+      }
+
+      if (pathname.endsWith("/department/selfserve/washes/summary") && method === "GET") {
+        const sessionId = parsedUrl.searchParams.get("session_id");
+        const laneId = parsedUrl.searchParams.get("lane_id");
+        const reg = (parsedUrl.searchParams.get("reg") || "").toUpperCase();
+
+        const summaryData = (
+          (sessionId ? selfServe.summaryBySessionId[sessionId] : null)
+          || selfServe.summaryByKey[`${laneId}:${reg}`]
+          || null
+        );
+
+        await route.fulfill(json({ data: summaryData || { events: [], questions: [], tasks: [], conditions: [], rules: [] } }));
+        return;
+      }
+
+      if (pathname.endsWith("/department/selfserve/vehicle/conditions") && method === "POST") {
+        const body = request.postDataJSON?.() || {};
+        const key = `${body.lane}:${String(body.reg || "").toUpperCase()}:${body.question}:${body.value}`;
+        const responseSummary = selfServe.answerResponseByKey[key] || null;
+
+        await route.fulfill(json({
+          data: {
+            selfserve: responseSummary,
+          },
+        }));
+        return;
+      }
+
+      if (pathname.endsWith("/department/selfserve/tasks/attachments") && method === "GET") {
+        const taskId = parsedUrl.searchParams.get("id");
+        await route.fulfill(json({
+          data: selfServe.attachmentsByTaskId[taskId] || [],
+        }));
+        return;
+      }
+
+      if (pathname.endsWith("/department/selfserve/tasks/attachments/download") && method === "GET") {
+        const taskId = parsedUrl.searchParams.get("task_id");
+        const attachmentId = parsedUrl.searchParams.get("attachment_id");
+        await route.fulfill(json(selfServe.attachmentDownloadByKey[`${taskId}:${attachmentId}`] || { download_link: null }));
+        return;
+      }
+
+      if (pathname.endsWith("/modules/self-serve/lane/services/allowed") && method === "POST") {
+        await route.fulfill(json({
+          data: {
+            allowed_services: selfServe.laneAllowedServices,
+          },
+        }));
+        return;
+      }
+
+      if (pathname.endsWith("/modules/self-serve/lane/relay/machine/enable") && method === "POST") {
+        await route.fulfill(json(selfServe.relayResponse));
+        return;
+      }
+
+      if (pathname.endsWith("/modules/self-serve/lane/command") && method === "POST") {
+        await route.fulfill(json(selfServe.commandResponse));
+        return;
+      }
+
+      if (pathname.endsWith("/department/lanes/dynamic-image") && method === "GET") {
+        await route.fulfill(binary(selfServe.dynamicImage));
+        return;
+      }
+    }
+
     if (options.invoiceDistribution) {
       const monthFromDate = parsedUrl.searchParams.get("dateFrom");
       const monthNumber = monthFromDate ? Number(monthFromDate.split("-")[1]) : 1;
diff --git a/tests/unit/helpers/mountWithApp.js b/tests/unit/helpers/mountWithApp.js
new file mode 100644
index 00000000..9ea64771
--- /dev/null
+++ b/tests/unit/helpers/mountWithApp.js
@@ -0,0 +1,69 @@
+import { mount } from "@vue/test-utils";
+import { createI18n } from "vue-i18n";
+import Buefy from "buefy";
+
+const WhiteBoxCardStub = {
+  emits: ["click"],
+  template: `
+    <div class="white-box-card-stub" v-bind="$attrs" @click="$emit('click', $event)">
+      <slot />
+      <slot name="default" />
+      <slot name="header" />
+      <slot name="content" />
+      <slot name="footer" />
+    </div>
+  `,
+};
+
+const ScrollableStepsStub = {
+  template: `
+    <div class="scrollable-steps-stub">
+      <slot name="header" />
+      <slot name="steps" />
+    </div>
+  `,
+};
+
+const UserDashboardPageWrapperStub = {
+  template: "<div class='user-dashboard-page-wrapper-stub'><slot /></div>",
+};
+
+const RouterLinkStub = {
+  props: ["to"],
+  template: "<a :href='typeof to === \"string\" ? to : \"#\"'><slot /></a>",
+};
+
+export const createTestI18n = (messages = { en: {} }) => createI18n({
+  legacy: false,
+  globalInjection: true,
+  locale: "en",
+  missingWarn: false,
+  fallbackWarn: false,
+  messages,
+});
+
+export const defaultStubs = {
+  WhiteBoxCard: WhiteBoxCardStub,
+  ScrollableSteps: ScrollableStepsStub,
+  UserDashboardPageWrapper: UserDashboardPageWrapperStub,
+  RouterLink: RouterLinkStub,
+  "router-link": RouterLinkStub,
+};
+
+export function mountWithApp(component, options = {}) {
+  const { messages = { en: {} }, ...mountOptions } = options;
+  const providedGlobal = mountOptions.global || {};
+  const providedStubs = providedGlobal.stubs || {};
+
+  return mount(component, {
+    ...mountOptions,
+    global: {
+      ...providedGlobal,
+      plugins: [createTestI18n(messages), Buefy, ...(providedGlobal.plugins || [])],
+      stubs: {
+        ...defaultStubs,
+        ...providedStubs,
+      },
+    },
+  });
+}
diff --git a/tests/unit/my-wash-start.spec.js b/tests/unit/my-wash-start.spec.js
new file mode 100644
index 00000000..c0a44897
--- /dev/null
+++ b/tests/unit/my-wash-start.spec.js
@@ -0,0 +1,356 @@
+// @vitest-environment jsdom
+import { flushPromises } from "@vue/test-utils";
+import { nextTick } from "vue";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+
+const mocks = vi.hoisted(() => {
+  const nearestDepartment = {
+    value: {
+      id: 1,
+      name: "Copenhagen",
+      address: "Main street 1",
+      self_serve_enabled: true,
+      lanes: [
+        { id: 7, name: "7", status: "AVAILABLE", products: [2], machine_available: true },
+      ],
+    },
+  };
+  const guestDepartments = { value: [nearestDepartment.value] };
+  const answers = { value: {} };
+  const completedTasks = { value: {} };
+  const visibleQuestions = { value: [{ id: 11, question: "Question 11" }] };
+  const activeTasks = { value: [] };
+  const conditions = { value: [] };
+  const rules = { value: [] };
+  const allowedServices = { value: ["MACHINE"] };
+
+  return {
+    nearestDepartment,
+    guestDepartments,
+    answers,
+    completedTasks,
+    visibleQuestions,
+    activeTasks,
+    conditions,
+    rules,
+    allowedServices,
+    fetchDepartments: vi.fn(async () => guestDepartments.value),
+    startAutoRefresh: vi.fn(),
+    stopAutoRefresh: vi.fn(),
+    startDepartmentSearch: vi.fn(),
+    selectDepartment: vi.fn(),
+    clearForcedDepartment: vi.fn(),
+    evaluateLocationDepartments: vi.fn(),
+    fetchSelfServeDataInternal: vi.fn(),
+    fetchWashSummary: vi.fn(),
+    syncVehicleAnswer: vi.fn(),
+    updateLaneAllowedServices: vi.fn(),
+    enableMachineRelay: vi.fn(),
+    downloadAttachment: vi.fn(),
+    answerQuestion: vi.fn((questionId, value) => {
+      answers.value = { ...answers.value, [questionId]: value };
+    }),
+    saveProgress: vi.fn(),
+    clearProgress: vi.fn(),
+    restoreProgress: vi.fn(),
+    startElapsedTimer: vi.fn(),
+    stopElapsedTimer: vi.fn(),
+    registerBeforeUnload: vi.fn(() => vi.fn()),
+    markDestroying: vi.fn(),
+    handleConfirmNext: vi.fn(),
+    isNextButtonDisabled: vi.fn(() => false),
+    onStartWash: vi.fn(),
+    onStopWash: vi.fn(),
+    setShowFooterInContent: vi.fn(),
+    fetchCustomerVehicles: vi.fn(),
+    fetchVehicleTypeOptions: vi.fn(),
+  };
+});
+
+vi.mock("@/components/session/token/SessionUser.vue", () => ({
+  SessionUser: {
+    user: {
+      customer_number: { value: 12345 },
+    },
+    canAccessSuperUser: () => true,
+    request: vi.fn(),
+    functions: {
+      contact: {
+        onClickCallPhoneNumber: vi.fn(),
+      },
+    },
+    objects: {
+      vehicles: {
+        get: {
+          all: vi.fn(async () => {
+            mocks.fetchCustomerVehicles();
+            return [{ reg: "AB12345", type: 2 }];
+          }),
+        },
+        columns: {
+          type: {
+            options: vi.fn(async () => {
+              mocks.fetchVehicleTypeOptions();
+              return [
+                { id: 2, name: "Truck", product: { id: 2, description: "Truck" } },
+              ];
+            }),
+          },
+        },
+      },
+    },
+  },
+}));
+
+vi.mock("@/components/displays/department/pos/steps/mobile/objects/PosDepartmentStepMobileFlow.vue", () => ({
+  locations: {
+    location: {
+      value: {
+        coords: {
+          latitude: 55.6,
+          longitude: 12.5,
+        },
+      },
+    },
+  },
+}));
+
+vi.mock("@/components/viewport/conditions/ViewPortFooterOptions.vue", () => ({
+  setShowFooterInContent: mocks.setShowFooterInContent,
+}));
+
+vi.mock("@/composables/useWashDepartments", () => ({
+  useWashDepartments: () => ({
+    guestDepartments: mocks.guestDepartments,
+    nearestDepartment: mocks.nearestDepartment,
+    isForcingNearestDepartment: { value: false },
+    forceNearestDepartmentEvaluationId: { value: 0 },
+    isSearchingDepartments: { value: false },
+    availableProductIds: { value: [2] },
+    doesCurrentDepartmentSelectionHaveSelfServeEnabled: { value: true },
+    fetchDepartments: mocks.fetchDepartments,
+    evaluateLocationDepartments: mocks.evaluateLocationDepartments,
+    startDepartmentSearch: mocks.startDepartmentSearch,
+    selectDepartment: mocks.selectDepartment,
+    clearForcedDepartment: mocks.clearForcedDepartment,
+    startAutoRefresh: mocks.startAutoRefresh,
+    stopAutoRefresh: mocks.stopAutoRefresh,
+  }),
+}));
+
+vi.mock("@/composables/useSelfServeLogic", () => ({
+  useSelfServeLogic: () => ({
+    loading: { value: false },
+    lane: { value: { id: 7 } },
+    questions: { value: [] },
+    conditions: mocks.conditions,
+    rules: mocks.rules,
+    tasks: { value: [] },
+    answers: mocks.answers,
+    completedTasks: mocks.completedTasks,
+    allowedServices: mocks.allowedServices,
+    visibleQuestions: mocks.visibleQuestions,
+    activeTasks: mocks.activeTasks,
+    allVisibleQuestionsAnswered: { value: false },
+    machineAvailable: { value: true },
+    fetchSelfServeData: mocks.fetchSelfServeDataInternal,
+    fetchWashSummary: mocks.fetchWashSummary,
+    syncVehicleAnswer: mocks.syncVehicleAnswer,
+    evaluateRule: () => true,
+    evaluateCondition: () => true,
+    isQuestionVisible: () => true,
+    isServiceAllowed: () => true,
+    updateLaneAllowedServices: mocks.updateLaneAllowedServices,
+    enableMachineRelay: mocks.enableMachineRelay,
+    downloadAttachment: mocks.downloadAttachment,
+    answerQuestion: mocks.answerQuestion,
+  }),
+}));
+
+vi.mock("@/composables/useWashProgress", () => ({
+  useWashProgress: () => ({
+    completedDurationMs: { value: null },
+    now: { value: Date.now() },
+    isRestoring: { value: false },
+    formattedElapsed: { value: "00:00" },
+    saveProgress: mocks.saveProgress,
+    clearProgress: mocks.clearProgress,
+    restoreProgress: mocks.restoreProgress,
+    startElapsedTimer: mocks.startElapsedTimer,
+    stopElapsedTimer: mocks.stopElapsedTimer,
+    registerBeforeUnload: mocks.registerBeforeUnload,
+    markDestroying: mocks.markDestroying,
+  }),
+}));
+
+vi.mock("@/composables/useWashFlowState", () => ({
+  useWashFlowState: () => ({
+    steps: {
+      VEHICLE: 0,
+      QUESTIONS: 1,
+      SELECT_LANE: 2,
+      TASKS: 3,
+      WASH_IN_PROGRESS: 4,
+      COMPLETED: 5,
+    },
+    clickableSteps: {
+      0: () => true,
+      1: () => true,
+      2: () => true,
+      3: () => true,
+      4: () => false,
+    },
+    isNextButtonDisabled: mocks.isNextButtonDisabled,
+    handleConfirmNext: mocks.handleConfirmNext,
+    targetStepForStart: () => 3,
+  }),
+}));
+
+vi.mock("@/composables/useWashSessionActions", async () => {
+  const { ref } = await import("vue");
+
+  return {
+    useWashSessionActions: () => ({
+      dynamicImageUrl: ref("https://cdn.example.test/dynamic.png"),
+      onStartWash: mocks.onStartWash,
+      onStopWash: mocks.onStopWash,
+    }),
+  };
+});
+
+import MyWashStart from "@/views/dashboards/userDashboard/wash/MyWashStart.vue";
+import { mountWithApp } from "./helpers/mountWithApp.js";
+
+const BStepsStub = {
+  template: `
+    <div class="b-steps-stub">
+      <slot />
+      <slot
+        name="navigation"
+        :previous="{ disabled: false, action: () => {} }"
+        :next="{ disabled: false, action: () => {} }"
+      />
+    </div>
+  `,
+};
+
+const BStepItemStub = {
+  template: "<div class='b-step-item-stub'><slot /></div>",
+};
+
+const BButtonStub = {
+  emits: ["click"],
+  template: "<button v-bind='$attrs' @click=\"$emit('click', $event)\"><slot /></button>",
+};
+
+const stubComponents = {
+  PosDepartmentStepMobile1Location: {
+    template: "<div data-testid='location-stub' />",
+  },
+  SelfServeDepartmentHeader: {
+    template: "<div data-testid='department-header-stub' />",
+  },
+  SelfServeVehicleStep: {
+    emits: ["update:registration-number", "update:customer-number", "select-vehicle-type"],
+    template: `
+      <div data-testid="vehicle-step-stub">
+        <button data-testid="emit-registration" @click="$emit('update:registration-number', 'AB12345')">registration</button>
+        <button data-testid="emit-vehicle-type" @click="$emit('select-vehicle-type', { id: 2, name: 'Truck' })">vehicle</button>
+      </div>
+    `,
+  },
+  SelfServeQuestionsStep: {
+    emits: ["answer-question"],
+    template: "<button data-testid='emit-answer' @click=\"$emit('answer-question', 11, true)\">answer</button>",
+  },
+  SelfServeLaneStep: {
+    emits: ["update:selected-lane-id"],
+    template: "<button data-testid='emit-lane' @click=\"$emit('update:selected-lane-id', 7)\">lane</button>",
+  },
+  SelfServeTasksStep: {
+    template: "<div data-testid='tasks-step-stub' />",
+  },
+  SelfServeGuidedInstructions: {
+    template: "<div data-testid='guided-step-stub' />",
+  },
+  SelfServeCompletedStep: {
+    template: "<div data-testid='completed-step-stub' />",
+  },
+  BSteps: BStepsStub,
+  BStepItem: BStepItemStub,
+  BButton: BButtonStub,
+  BMessage: {
+    template: "<div><slot /></div>",
+  },
+};
+
+describe("MyWashStart", () => {
+  beforeEach(() => {
+    mocks.fetchDepartments.mockClear();
+    mocks.startAutoRefresh.mockClear();
+    mocks.stopAutoRefresh.mockClear();
+    mocks.restoreProgress.mockClear();
+    mocks.registerBeforeUnload.mockClear();
+    mocks.markDestroying.mockClear();
+    mocks.fetchCustomerVehicles.mockClear();
+    mocks.fetchVehicleTypeOptions.mockClear();
+    mocks.fetchSelfServeDataInternal.mockClear();
+    mocks.syncVehicleAnswer.mockClear();
+    mocks.answerQuestion.mockClear();
+    mocks.setShowFooterInContent.mockClear();
+  });
+
+  it("loads initial wash context and tears down refresh state on unmount", async () => {
+    const wrapper = mountWithApp(MyWashStart, {
+      global: {
+        stubs: stubComponents,
+      },
+    });
+
+    await flushPromises();
+
+    expect(mocks.setShowFooterInContent).toHaveBeenCalledWith(false);
+    expect(mocks.fetchDepartments).toHaveBeenCalledTimes(1);
+    expect(mocks.startAutoRefresh).toHaveBeenCalledTimes(1);
+    expect(mocks.fetchCustomerVehicles).toHaveBeenCalledTimes(1);
+    expect(mocks.fetchVehicleTypeOptions).toHaveBeenCalledTimes(1);
+    expect(mocks.restoreProgress).toHaveBeenCalledTimes(1);
+    expect(mocks.registerBeforeUnload).toHaveBeenCalledTimes(1);
+
+    wrapper.unmount();
+
+    expect(mocks.stopAutoRefresh).toHaveBeenCalledTimes(1);
+    expect(mocks.markDestroying).toHaveBeenCalledTimes(1);
+    expect(mocks.setShowFooterInContent).toHaveBeenLastCalledWith(true);
+  });
+
+  it("wires child updates back into the self-serve runtime", async () => {
+    const wrapper = mountWithApp(MyWashStart, {
+      global: {
+        stubs: stubComponents,
+      },
+    });
+
+    await flushPromises();
+    await wrapper.get('[data-testid="emit-lane"]').trigger("click");
+    await wrapper.get('[data-testid="emit-registration"]').trigger("click");
+    await wrapper.get('[data-testid="emit-vehicle-type"]').trigger("click");
+    await nextTick();
+    await flushPromises();
+
+    expect(mocks.fetchSelfServeDataInternal).toHaveBeenCalledWith(1, 2, 7, "AB12345");
+
+    await wrapper.get('[data-testid="emit-answer"]').trigger("click");
+    await flushPromises();
+
+    expect(mocks.answerQuestion).toHaveBeenCalledWith(11, true);
+    expect(mocks.syncVehicleAnswer).toHaveBeenCalledWith({
+      departmentId: 1,
+      laneId: 7,
+      customerNumber: 12345,
+      reg: "AB12345",
+      questionId: 11,
+      value: true,
+    });
+  });
+});
diff --git a/tests/unit/self-serve-alignment.spec.js b/tests/unit/self-serve-alignment.spec.js
index 056d0ddd..f2544edf 100644
--- a/tests/unit/self-serve-alignment.spec.js
+++ b/tests/unit/self-serve-alignment.spec.js
@@ -50,7 +50,9 @@ describe("self-serve alignment", () => {
     expect(tryModalSource).toContain("syncVehicleAnswer");
     expect(tryModalSource).toContain("fetchSelfServeData");
     expect(washFlowSource).toContain("syncVehicleAnswer");
-    expect(washFlowSource).toContain("SessionUser.request('/modules/self-serve/lane/status', 'get'");
+    expect(washFlowSource).toContain("useWashDepartments");
+    expect(washFlowSource).toContain("useWashProgress");
+    expect(washFlowSource).toContain("useWashSessionActions");
   });
 
   it("adds the machine-types admin route", () => {
diff --git a/tests/unit/self-serve-guided-and-completed.spec.js b/tests/unit/self-serve-guided-and-completed.spec.js
new file mode 100644
index 00000000..18af9b13
--- /dev/null
+++ b/tests/unit/self-serve-guided-and-completed.spec.js
@@ -0,0 +1,54 @@
+// @vitest-environment jsdom
+import { describe, expect, it } from "vitest";
+import SelfServeCompletedStep from "@/components/displays/selfServe/SelfServeCompletedStep.vue";
+import SelfServeGuidedInstructions from "@/components/displays/selfServe/SelfServeGuidedInstructions.vue";
+import { mountWithApp } from "./helpers/mountWithApp.js";
+
+const messages = {
+  en: {
+    common: {
+      previous: "Previous",
+      next: "Next",
+      warning: "Warning",
+    },
+    self_wash: {
+      follow_steps: "Follow the steps",
+      wash_completed: "Wash completed",
+      wash_completed_message: "Your wash is complete.",
+      wash_completed_contact: "Contact support if needed.",
+      total_time: "Total time {minutes}:{seconds}",
+    },
+  },
+};
+
+describe("SelfServe guided/completed components", () => {
+  it("moves between guided steps with bounded navigation", async () => {
+    const wrapper = mountWithApp(SelfServeGuidedInstructions, {
+      props: {
+        currentStep: 0,
+        steps: [
+          { title: "Foam", content: "Apply foam", brushes: [] },
+          { title: "Rinse", content: "Rinse off", brushes: [] },
+        ],
+      },
+      messages,
+    });
+
+    expect(wrapper.get('[data-testid="self-serve-guided-prev"]').attributes("disabled")).toBeDefined();
+
+    await wrapper.get('[data-testid="self-serve-guided-next"]').trigger("click");
+
+    expect(wrapper.emitted("update:currentStep")).toEqual([[1]]);
+  });
+
+  it("formats the completed duration through the completion message", () => {
+    const wrapper = mountWithApp(SelfServeCompletedStep, {
+      props: {
+        completedDurationMs: 65_000,
+      },
+      messages,
+    });
+
+    expect(wrapper.text()).toContain("Total time 1:5");
+  });
+});
diff --git a/tests/unit/self-serve-questions-step.spec.js b/tests/unit/self-serve-questions-step.spec.js
new file mode 100644
index 00000000..3827aaac
--- /dev/null
+++ b/tests/unit/self-serve-questions-step.spec.js
@@ -0,0 +1,56 @@
+// @vitest-environment jsdom
+import { describe, expect, it } from "vitest";
+import SelfServeQuestionsStep from "@/components/displays/selfServe/SelfServeQuestionsStep.vue";
+import { mountWithApp } from "./helpers/mountWithApp.js";
+
+describe("SelfServeQuestionsStep", () => {
+  const baseProps = {
+    isLoading: false,
+    visibleQuestions: [
+      { id: 11, question: "Is the trailer closed?" },
+    ],
+    answers: { 11: true },
+    editAnswers: true,
+    showDebug: true,
+    conditions: [
+      { id: 21, name: "Closed trailer" },
+    ],
+    rules: [
+      { id: 31, condition_id: 21, type: "IS_TRUE", name: "Question 11 is true" },
+    ],
+    evaluateCondition: () => true,
+    evaluateRule: () => true,
+    isQuestionVisible: () => true,
+    getConditionById: () => ({ id: 21, name: "Closed trailer" }),
+    getRuleTypeLabel: () => "Is true",
+  };
+
+  it("renders question cards, emits answers, and exposes debug controls", async () => {
+    const wrapper = mountWithApp(SelfServeQuestionsStep, {
+      props: baseProps,
+    });
+
+    expect(wrapper.get('[data-testid="self-serve-debug-panel"]').text()).toContain("Closed trailer");
+
+    await wrapper.get('[data-testid="self-serve-toggle-debug"]').trigger("click");
+    await wrapper.get('[data-testid="self-serve-toggle-edit"]').trigger("click");
+    await wrapper.get('[data-testid="self-serve-question-11-no"]').trigger("click");
+
+    expect(wrapper.emitted("toggle-debug")).toHaveLength(1);
+    expect(wrapper.emitted("toggle-edit")).toHaveLength(1);
+    expect(wrapper.emitted("answer-question")).toEqual([[11, false]]);
+  });
+
+  it("shows the loading state while data is being fetched", () => {
+    const wrapper = mountWithApp(SelfServeQuestionsStep, {
+      props: {
+        ...baseProps,
+        isLoading: true,
+        showDebug: false,
+      },
+    });
+
+    expect(wrapper.text()).toContain("self_wash.loading_data");
+    expect(wrapper.find('[data-testid="self-serve-question-cards"]').exists()).toBe(false);
+  });
+});
diff --git a/tests/unit/self-serve-task-list.spec.js b/tests/unit/self-serve-task-list.spec.js
new file mode 100644
index 00000000..6a835e80
--- /dev/null
+++ b/tests/unit/self-serve-task-list.spec.js
@@ -0,0 +1,59 @@
+// @vitest-environment jsdom
+import { describe, expect, it } from "vitest";
+import SelfServeTaskList from "@/components/displays/selfServe/SelfServeTaskList.vue";
+import { mountWithApp } from "./helpers/mountWithApp.js";
+
+const BCheckboxStub = {
+  props: ["modelValue"],
+  emits: ["update:modelValue", "input"],
+  template: `
+    <button
+      type="button"
+      data-testid="checkbox-stub"
+      @click="$emit('update:modelValue', !modelValue); $emit('input', !modelValue)"
+    >
+      checkbox
+    </button>
+  `,
+};
+
+describe("SelfServeTaskList", () => {
+  it("emits task toggles and attachment downloads", async () => {
+    const wrapper = mountWithApp(SelfServeTaskList, {
+      props: {
+        tasks: [
+          {
+            id: 5,
+            task: "Wash mirrors",
+            description: "Use the soft brush",
+            services: ["MACHINE"],
+            buttons: [1, 2],
+            attachments: [
+              { id: 101, content: { other: "instruction.pdf" } },
+              { id: 102, content: { other: "mirror.jpg" }, download_link: "https://cdn.example.test/mirror.jpg" },
+            ],
+          },
+        ],
+        completedTasks: {
+          5: false,
+        },
+      },
+      global: {
+        stubs: {
+          BCheckbox: BCheckboxStub,
+          BField: { template: "<div><slot /></div>" },
+          BIcon: { template: "<span><slot /></span>" },
+        },
+      },
+    });
+
+    await wrapper.get('[data-testid="self-serve-task-5-toggle"]').trigger("click");
+    await wrapper.get('[data-testid="self-serve-task-5-attachment-101"]').trigger("click");
+    await wrapper.get('[data-testid="self-serve-task-5-attachment-102"]').trigger("click");
+
+    expect(wrapper.emitted("toggle-task")).toEqual([[5, true], [5, true]]);
+    expect(wrapper.emitted("download-attachment")).toEqual([[5, 101], [5, 102]]);
+    expect(wrapper.text()).toContain("MACHINE");
+    expect(wrapper.text()).toContain("Button 1");
+  });
+});
diff --git a/tests/unit/self-serve-vehicle-selector.spec.js b/tests/unit/self-serve-vehicle-selector.spec.js
new file mode 100644
index 00000000..b8f555b1
--- /dev/null
+++ b/tests/unit/self-serve-vehicle-selector.spec.js
@@ -0,0 +1,88 @@
+// @vitest-environment jsdom
+import { flushPromises } from "@vue/test-utils";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+
+const mocks = vi.hoisted(() => ({
+  vehicleTypeOptions: vi.fn(),
+}));
+
+vi.mock("@/components/session/token/SessionUser.vue", () => ({
+  SessionUser: {
+    objects: {
+      vehicles: {
+        columns: {
+          type: {
+            options: mocks.vehicleTypeOptions,
+          },
+        },
+      },
+    },
+  },
+}));
+
+vi.mock("@/components/displays/department/pos/displays/Piktogrammer.vue", () => ({
+  getPicture: (pictogram) => `/images/${pictogram || "placeholder"}.png`,
+}));
+
+import SelfServeVehicleTypeSelector from "@/components/displays/selfServe/SelfServeVehicleTypeSelector.vue";
+import { mountWithApp } from "./helpers/mountWithApp.js";
+
+describe("SelfServeVehicleTypeSelector", () => {
+  beforeEach(() => {
+    mocks.vehicleTypeOptions.mockReset();
+    mocks.vehicleTypeOptions.mockResolvedValue([
+      {
+        id: 1,
+        name: "Truck",
+        price: 100,
+        product: { id: 1, description: "Large truck", piktogram: "truck" },
+      },
+      {
+        id: 2,
+        name: "Van",
+        price: 80,
+        product: { id: 2, description: "Medium van", piktogram: "van" },
+      },
+      {
+        id: 3,
+        name: "Car",
+        price: 60,
+        product: { id: 3, description: "Small car", piktogram: "car" },
+      },
+    ]);
+  });
+
+  it("filters the rendered options by available product ids", async () => {
+    const wrapper = mountWithApp(SelfServeVehicleTypeSelector, {
+      props: {
+        restrictToProductIds: [2, 3],
+      },
+    });
+
+    await flushPromises();
+
+    expect(wrapper.find('[data-testid="self-serve-vehicle-type-1"]').exists()).toBe(false);
+    expect(wrapper.find('[data-testid="self-serve-vehicle-type-2"]').exists()).toBe(true);
+    expect(wrapper.find('[data-testid="self-serve-vehicle-type-3"]').exists()).toBe(true);
+  });
+
+  it("marks the selected option and emits the chosen vehicle type", async () => {
+    const wrapper = mountWithApp(SelfServeVehicleTypeSelector, {
+      props: {
+        selectedVehicleTypeId: 3,
+      },
+    });
+
+    await flushPromises();
+
+    expect(wrapper.get('[data-testid="self-serve-vehicle-selector-description"]').text()).toContain("Car");
+
+    await wrapper.get('[data-testid="self-serve-vehicle-type-2"]').trigger("click");
+
+    expect(wrapper.emitted("selected")).toHaveLength(1);
+    expect(wrapper.emitted("selected")?.[0]?.[0]).toMatchObject({
+      id: 2,
+      name: "Van",
+    });
+  });
+});
diff --git a/tests/unit/setup.js b/tests/unit/setup.js
index d0e24c61..3c612a36 100644
--- a/tests/unit/setup.js
+++ b/tests/unit/setup.js
@@ -26,3 +26,22 @@ if (!globalThis.window) {
 if (!globalThis.self) {
   globalThis.self = globalThis;
 }
+
+if (!globalThis.window.alert) {
+  globalThis.window.alert = () => {};
+}
+
+if (!globalThis.window.open) {
+  globalThis.window.open = () => {};
+}
+
+if (!globalThis.window.matchMedia) {
+  globalThis.window.matchMedia = () => ({
+    matches: false,
+    addListener() {},
+    removeListener() {},
+    addEventListener() {},
+    removeEventListener() {},
+    dispatchEvent() { return false; }
+  });
+}
diff --git a/tests/unit/use-self-serve-logic.spec.js b/tests/unit/use-self-serve-logic.spec.js
new file mode 100644
index 00000000..62b03c0e
--- /dev/null
+++ b/tests/unit/use-self-serve-logic.spec.js
@@ -0,0 +1,181 @@
+import { beforeEach, describe, expect, it, vi } from "vitest";
+
+const mocks = vi.hoisted(() => ({
+  previewAllowed: vi.fn(),
+  washSummary: vi.fn(),
+  add: vi.fn(),
+  attachmentsList: vi.fn(),
+  attachmentsDownload: vi.fn(),
+  request: vi.fn(),
+}));
+
+vi.mock("@/components/session/token/SessionUser.vue", () => ({
+  SessionUser: {
+    request: mocks.request,
+    objects: {
+      self_serve_vehicle_conditions: {
+        get: {
+          previewAllowed: mocks.previewAllowed,
+          washSummary: mocks.washSummary,
+        },
+        add: mocks.add,
+      },
+      self_serve_tasks: {
+        attachments: {
+          list: mocks.attachmentsList,
+          download: mocks.attachmentsDownload,
+        },
+      },
+    },
+  },
+}));
+
+import { useSelfServeLogic } from "@/composables/useSelfServeLogic.js";
+
+describe("useSelfServeLogic", () => {
+  beforeEach(() => {
+    mocks.previewAllowed.mockReset();
+    mocks.washSummary.mockReset();
+    mocks.add.mockReset();
+    mocks.attachmentsList.mockReset();
+    mocks.attachmentsDownload.mockReset();
+    mocks.request.mockReset();
+  });
+
+  it("hydrates preview and summary data, including attachment download links", async () => {
+    mocks.previewAllowed.mockResolvedValue({
+      allowed: true,
+      machine_available: true,
+      lane: { id: 7, name: "Lane 7" },
+      session: { id: 91, status: "IN_PROGRESS" },
+      questions: [
+        { id: 1, question: "Machine wash?", answer: null, order_priority: 1 },
+      ],
+      tasks: [
+        { id: 5, task: "Prepare", order_priority: 1, services: ["MACHINE"] },
+      ],
+      conditions: [],
+      rules: [],
+      allowed_services: ["MACHINE"],
+    });
+    mocks.washSummary.mockResolvedValue({
+      session: { id: 91, status: "IN_PROGRESS" },
+      lane: { id: 7, name: "Lane 7" },
+      questions: [
+        { id: 1, question: "Machine wash?", answer: true, order_priority: 1 },
+      ],
+      tasks: [
+        { id: 5, task: "Prepare", order_priority: 1, services: ["MACHINE"] },
+      ],
+      events: [
+        { id: 1, type: "STARTED", created_at: "2026-01-01T00:00:00.000Z" },
+      ],
+    });
+    mocks.attachmentsList.mockResolvedValue({
+      data: [
+        { id: 201, content: { other: "manual.pdf" } },
+        { id: 202, content: { other: "photo.jpg" } },
+      ],
+    });
+    mocks.attachmentsDownload.mockImplementation(async (_taskId, attachmentId) => (
+      attachmentId === 202
+        ? { download_link: "https://cdn.example.test/photo.jpg" }
+        : { download_link: "https://cdn.example.test/manual.pdf" }
+    ));
+
+    const logic = useSelfServeLogic();
+
+    await logic.fetchSelfServeData(1, 9, 7, "ab12345");
+
+    expect(mocks.previewAllowed).toHaveBeenCalledWith(7, "AB12345");
+    expect(mocks.washSummary).toHaveBeenCalledWith({ session_id: 91 });
+    expect(logic.allowed.value).toBe(true);
+    expect(logic.machineAvailable.value).toBe(true);
+    expect(logic.answers.value[1]).toBe(true);
+    expect(logic.events.value).toHaveLength(1);
+    expect(logic.tasks.value[0].attachments[1]).toMatchObject({
+      id: 202,
+      download_link: "https://cdn.example.test/photo.jpg",
+    });
+  });
+
+  it("evaluates conditional questions and tasks from normalized rules", () => {
+    const logic = useSelfServeLogic();
+
+    logic.questions.value = [
+      { id: 1, question: "Question 1", order_priority: 1, condition_id: null },
+      { id: 2, question: "Question 2", order_priority: 2, condition_id: 100 },
+    ];
+    logic.conditions.value = [
+      { id: 100, name: "Question 1 yes" },
+    ];
+    logic.rules.value = [
+      { id: 501, condition_id: 100, object_type: "question", object_id: 1, type: "IS_TRUE", name: "Q1 true" },
+    ];
+    logic.tasks.value = [
+      { id: 8, task: "Machine step", order_priority: 1, condition_id: 100, services: ["MACHINE"] },
+      { id: 9, task: "Always visible", order_priority: 2, condition_id: null, services: [] },
+    ];
+    logic.answers.value = { 1: false };
+
+    expect(logic.visibleQuestions.value.map((question) => question.id)).toEqual([1]);
+    expect(logic.activeTasks.value.map((task) => task.id)).toEqual([9]);
+
+    logic.answerQuestion(1, true);
+
+    expect(logic.visibleQuestions.value.map((question) => question.id)).toEqual([1, 2]);
+    expect(logic.activeTasks.value.map((task) => task.id)).toEqual([8, 9]);
+    expect(logic.isServiceAllowed("MACHINE")).toBe(true);
+  });
+
+  it("synchronizes answers and refreshes preview/summary state", async () => {
+    mocks.add.mockResolvedValue({
+      data: {
+        data: {
+          selfserve: {
+            session: { id: 44, status: "IN_PROGRESS" },
+            questions: [
+              { id: 2, question: "Doors closed?", answer: true, order_priority: 1 },
+            ],
+            tasks: [],
+            conditions: [],
+            rules: [],
+          },
+        },
+      },
+    });
+    mocks.previewAllowed.mockResolvedValue({
+      allowed: true,
+      session: { id: 44, status: "IN_PROGRESS" },
+      questions: [
+        { id: 2, question: "Doors closed?", answer: true, order_priority: 1 },
+      ],
+      tasks: [],
+      conditions: [],
+      rules: [],
+    });
+    mocks.washSummary.mockResolvedValue({
+      session: { id: 44, status: "IN_PROGRESS" },
+      questions: [
+        { id: 2, question: "Doors closed?", answer: true, order_priority: 1 },
+      ],
+      tasks: [],
+      events: [],
+    });
+
+    const logic = useSelfServeLogic();
+
+    await logic.syncVehicleAnswer({
+      departmentId: 3,
+      laneId: 7,
+      customerNumber: 12345,
+      reg: "cd67890",
+      questionId: 2,
+      value: true,
+    });
+
+    expect(mocks.add).toHaveBeenCalledWith(3, 7, 12345, "CD67890", 2, true);
+    expect(mocks.previewAllowed).toHaveBeenCalledWith(7, "CD67890");
+    expect(logic.answers.value[2]).toBe(true);
+  });
+});
diff --git a/tests/unit/use-wash-departments.spec.js b/tests/unit/use-wash-departments.spec.js
new file mode 100644
index 00000000..278d8e19
--- /dev/null
+++ b/tests/unit/use-wash-departments.spec.js
@@ -0,0 +1,108 @@
+// @vitest-environment jsdom
+import { defineComponent, h, nextTick } from "vue";
+import { mount } from "@vue/test-utils";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+
+const mocks = vi.hoisted(() => ({
+  getDepartmentsGuest: vi.fn(),
+  locationRef: {
+    value: {
+      coords: {
+        latitude: 55.5,
+        longitude: 12.4,
+      },
+    },
+  },
+  getDistance: vi.fn(),
+}));
+
+vi.mock("@/components/pagination/departmentTabs.vue", () => ({
+  getDepartmentsGuest: mocks.getDepartmentsGuest,
+}));
+
+vi.mock("@/components/displays/department/pos/steps/mobile/objects/PosDepartmentStepMobileFlow.vue", () => ({
+  locations: {
+    location: mocks.locationRef,
+    getDistance: mocks.getDistance,
+  },
+}));
+
+import { useWashDepartments } from "@/composables/useWashDepartments.js";
+
+const mountComposable = (factory) => {
+  let result;
+
+  mount(defineComponent({
+    setup() {
+      result = factory();
+      return () => h("div");
+    },
+  }));
+
+  return result;
+};
+
+describe("useWashDepartments", () => {
+  beforeEach(() => {
+    mocks.getDepartmentsGuest.mockReset();
+    mocks.getDistance.mockReset();
+    mocks.locationRef.value = {
+      coords: {
+        latitude: 55.5,
+        longitude: 12.4,
+      },
+    };
+
+    mocks.getDistance.mockImplementation((_from, to) => {
+      if (to.latitude === 55.6) {
+        return 8;
+      }
+      if (to.latitude === 55.7) {
+        return 2;
+      }
+      return 20;
+    });
+  });
+
+  it("fetches guest departments and resolves the nearest one", async () => {
+    mocks.getDepartmentsGuest.mockResolvedValue([
+      { id: 1, name: "North", address: "A", latitude: 55.6, longitude: 12.5, lanes: [{ id: 10, products: [1, 2] }], self_serve_enabled: true },
+      { id: 2, name: "South", address: "B", latitude: 55.7, longitude: 12.6, lanes: [{ id: 11, products: [2, 3] }], self_serve_enabled: true },
+    ]);
+
+    const departments = mountComposable(() => useWashDepartments({ includeLanes: true }));
+
+    await departments.fetchDepartments();
+
+    expect(mocks.getDepartmentsGuest).toHaveBeenCalledWith({ include_lanes: true });
+    expect(departments.nearestDepartment.value).toMatchObject({ id: 2, name: "South", distance: 2 });
+    expect(departments.availableProductIds.value).toEqual([2, 3]);
+    expect(departments.doesCurrentDepartmentSelectionHaveSelfServeEnabled.value).toBe(true);
+  });
+
+  it("allows forced selection and resets back to geolocation ordering", async () => {
+    mocks.getDepartmentsGuest.mockResolvedValue([
+      { id: 1, name: "North", address: "A", latitude: 55.6, longitude: 12.5, lanes: [], self_serve_enabled: true },
+      { id: 2, name: "South", address: "B", latitude: 55.7, longitude: 12.6, lanes: [], self_serve_enabled: true },
+    ]);
+
+    const departments = mountComposable(() => useWashDepartments({
+      canAccessSuperUser: () => true,
+    }));
+
+    await departments.fetchDepartments();
+    departments.startDepartmentSearch();
+    departments.selectDepartment(1);
+
+    expect(departments.isSearchingDepartments.value).toBe(false);
+    expect(departments.isForcingNearestDepartment.value).toBe(true);
+    expect(departments.nearestDepartment.value).toMatchObject({ id: 1, name: "North" });
+
+    departments.clearForcedDepartment();
+    await nextTick();
+
+    expect(departments.isForcingNearestDepartment.value).toBe(false);
+    expect(departments.forceNearestDepartmentEvaluationId.value).toBe(0);
+    expect(departments.nearestDepartment.value).toMatchObject({ id: 2, name: "South" });
+  });
+});
diff --git a/tests/unit/use-wash-flow-state.spec.js b/tests/unit/use-wash-flow-state.spec.js
new file mode 100644
index 00000000..94ae2fa2
--- /dev/null
+++ b/tests/unit/use-wash-flow-state.spec.js
@@ -0,0 +1,79 @@
+import { computed, ref } from "vue";
+import { describe, expect, it, vi } from "vitest";
+import { useWashFlowState, WASH_STEPS } from "@/composables/useWashFlowState.js";
+
+describe("useWashFlowState", () => {
+  const createState = (overrides = {}) => {
+    const state = {
+      currentStep: ref(WASH_STEPS.VEHICLE),
+      washInProgress: ref(false),
+      customerNumberInput: ref("12345"),
+      licensePlateInput: ref("AB12345"),
+      vehicleTypeSelect: ref(3),
+      availableProductIds: ref([3, 4]),
+      radioLaneOption: ref(7),
+      radioWashType: ref("Manual"),
+      nearestDepartment: ref({
+        id: 1,
+        lanes: [
+          { id: 7, status: "AVAILABLE" },
+        ],
+      }),
+      allVisibleQuestionsAnswered: computed(() => true),
+      isLoadingSelfServeData: ref(false),
+      activeTasks: ref([]),
+      completedTasks: ref({}),
+      editAnswers: ref(false),
+      isLaneAvailable: (lane) => lane.status === "AVAILABLE",
+      isMachineAvailable: () => true,
+      onStartWash: vi.fn(),
+      updateLaneAllowedServices: vi.fn(),
+      ...overrides,
+    };
+
+    return {
+      state,
+      flow: useWashFlowState(state),
+    };
+  };
+
+  it("validates the vehicle step against customer, registration, and allowed product ids", () => {
+    const { flow, state } = createState();
+
+    expect(flow.clickableSteps[WASH_STEPS.VEHICLE]()).toBe(true);
+
+    state.vehicleTypeSelect.value = 9;
+    expect(flow.clickableSteps[WASH_STEPS.VEHICLE]()).toBe(false);
+  });
+
+  it("moves from questions to lane selection after updating allowed services", async () => {
+    const { flow, state } = createState({
+      currentStep: ref(WASH_STEPS.QUESTIONS),
+      editAnswers: ref(true),
+    });
+
+    await flow.handleConfirmNext();
+
+    expect(state.updateLaneAllowedServices).toHaveBeenCalledWith(7);
+    expect(state.editAnswers.value).toBe(false);
+    expect(state.currentStep.value).toBe(WASH_STEPS.SELECT_LANE);
+  });
+
+  it("starts the wash from lane selection and branches to tasks when tasks exist", async () => {
+    const { flow, state } = createState({
+      currentStep: ref(WASH_STEPS.SELECT_LANE),
+      activeTasks: ref([{ id: 99 }]),
+      radioWashType: ref("Machine"),
+      isMachineAvailable: () => false,
+    });
+
+    expect(flow.isNextButtonDisabled()).toBe(true);
+
+    state.radioWashType.value = "Manual";
+    expect(flow.isNextButtonDisabled()).toBe(false);
+
+    await flow.handleConfirmNext();
+
+    expect(state.onStartWash).toHaveBeenCalledWith(7, "AB12345", "12345", WASH_STEPS.TASKS);
+  });
+});