Enhance Self-Serve progress display in MyWashStart.vue and SelfServeDepartmentHeader.vue:

- Add `progressRegistration` and `progressVehicleProduct` props for improved progress details.
- Update `SelfServeDepartmentHeader.vue` template and styles for better layout and item wrapping.
- Refactor computed properties in `MyWashStart.vue` to include `selectedVehicleTypeProductName`.

src/components/displays/selfServe/SelfServeDepartmentHeader.vue

@@ -13,11 +13,15 @@ const props = withDefaults(defineProps<{
   progressLabel?: string;
   progressValue?: string;
   progressTestId?: string;
+  progressRegistration?: string | null;
+  progressVehicleProduct?: string | null;
 }>(), {
   showProgress: false,
   progressLabel: "",
   progressValue: "",
   progressTestId: "self-serve-live-elapsed",
+  progressRegistration: null,
+  progressVehicleProduct: null,
 });
 
 const emit = defineEmits<{
@@ -122,10 +126,22 @@ watch(() => props.isSearchingDepartments, (isSearching) => {
       >
         <i class="fas fa-clock"></i>
       </span>
-      <span
-        class="self-serve-progress-inline-value"
-        :data-testid="progressTestId"
-      >{{ progressValue }}</span>
+      <span class="self-serve-progress-item">
+        <span
+          class="self-serve-progress-inline-value"
+          :data-testid="progressTestId"
+        >{{ progressValue }}</span>
+      </span>
+      <span v-if="progressRegistration" class="self-serve-progress-divider">|</span>
+      <span v-if="progressRegistration" class="self-serve-progress-item">
+        <i class="fas fa-car-side"></i>
+        <span>{{ progressRegistration }}</span>
+      </span>
+      <span v-if="progressVehicleProduct" class="self-serve-progress-divider">|</span>
+      <span v-if="progressVehicleProduct" class="self-serve-progress-item">
+        <i class="fas fa-truck"></i>
+        <span>{{ progressVehicleProduct }}</span>
+      </span>
     </div>
   </div>
 </template>
@@ -161,6 +177,7 @@ watch(() => props.isSearchingDepartments, (isSearching) => {
   display: flex;
   justify-content: center;
   align-items: center;
+  flex-wrap: wrap;
   gap: 0.35rem;
   margin-bottom: 0.6rem;
 }
@@ -177,10 +194,27 @@ watch(() => props.isSearchingDepartments, (isSearching) => {
 }
 
 .self-serve-progress-inline-value {
-  font-size: 1rem;
+  font-size: inherit;
+  font-weight: inherit;
+  color: inherit;
+  line-height: inherit;
+}
+
+.self-serve-progress-item {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.25rem;
+  font-size: 0.92rem;
   font-weight: 700;
   color: #112f5f;
   line-height: 1;
+  white-space: nowrap;
+}
+
+.self-serve-progress-divider {
+  color: #112f5f;
+  font-size: 0.9rem;
+  line-height: 1;
 }
 
 .department-clear-cross {

src/views/dashboards/userDashboard/wash/MyWashStart.vue

@@ -232,6 +232,11 @@ const selectedVehicleType = computed(() => {
 
 const selectedVehicleTypeName = computed(() => selectedVehicleType.value?.name || null);
 const selectedVehicleTypeDescription = computed(() => selectedVehicleType.value?.product?.description || null);
+const selectedVehicleTypeProductName = computed(() => (
+  selectedVehicleType.value?.product?.name
+  || selectedVehicleType.value?.name
+  || null
+));
 
 const displayedDynamicImageUrl = computed(() => (
   hideDynamicImage.value ? null : dynamicImageUrl.value
@@ -659,6 +664,8 @@ watch(() => forceNearestDepartmentEvaluationId.value, () => {
             :show-progress="currentStep === steps.TASKS || currentStep === steps.WASH_IN_PROGRESS"
             :progress-label="$t('self_wash.wash_in_progress')"
             :progress-value="formattedElapsed"
+            :progress-registration="licensePlateInput"
+            :progress-vehicle-product="selectedVehicleTypeProductName"
             @start-search="startDepartmentSearch"
             @select-department="selectDepartment"
             @clear-forced="clearForcedDepartment"