Refactor MyWashStart.vue: integrate ScrollableSteps, refine guided wash flow, and update footer and assistance logic

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

@@ -21,7 +21,8 @@ import WhiteBoxCard from "@/components/displays/boxes/WhiteBoxCard.vue";
 
 import {getDepartmentsGuest} from "@/components/pagination/departmentTabs.vue";
 import {computed, onMounted, onUnmounted, ref, watch} from "vue";
-import ColorIndicator from "@/components/displays/buttons/ColorIndicator.vue";
+import ScrollableSteps from "@/components/displays/steps/ScrollableSteps.vue";
+import { setShowFooterInContent } from "@/components/viewport/conditions/ViewPortFooterOptions.vue";
 
 const guestDepartments = ref([]);
 
@@ -33,6 +34,7 @@ const lastDepartmentFetchTime = ref(null); // Used to make sure we don't fetch t
 const fetchIntervalMs = 10 * 1000; // 10 seconds
 
 onMounted(async () => {
+  setShowFooterInContent(false);
   guestDepartments.value = await getDepartmentsGuest({include_lanes: true});
   // Initialize customer number input
   customerNumberInput.value = SessionUser.user.customer_number.value || '';
@@ -314,6 +316,7 @@ onUnmounted(() => {
   // Best-effort save on unmount (navigation)
   saveProgress();
   window.removeEventListener('beforeunload', saveProgress);
+  setShowFooterInContent(true);
 });
 
 const getWashStatus = (laneId) => {
@@ -521,13 +524,13 @@ type guidedWashFlowStep = {
 }
 const guidedWashFlowSteps: guidedWashFlowStep[] = [
   {
-    title: 'Højtryksforvask',
-    content: '',
+    title: 'Højtryks forvask',
+    content: 'Spul med højtryk for at løsne skidt.',
     warning: '',
     brushes: [
       {
         label: 'Sort slange',
-        description: 'Spul med sort slange for at fjerne skidt.',
+        description: 'til højtryks forvask.',
         warning: 'Min. afstand til bil 20cm.',
         color: 'is-black',
         position: 'right',
@@ -536,11 +539,11 @@ const guidedWashFlowSteps: guidedWashFlowStep[] = [
   },
   {
     title: 'Sæbe-pålægning',
-    content: 'Dæk bilen ind i sæbe',
+    content: 'Dæk bilen ind i sæbe.',
     brushes: [
       {
         label: 'Blå børste',
-        description: '',
+        description: 'til at dække bilen i sæbe.',
         color: 'is-info',
         position: 'left',
       },
@@ -552,25 +555,25 @@ const guidedWashFlowSteps: guidedWashFlowStep[] = [
     brushes: [
       {
         label: 'Blå børste',
-        description: 'Bruges til lakerede overflader.',
+        description: 'til lakerede overflader.',
         color: 'is-link',
         position: 'left',
       },
       {
         label: 'Rød børste',
-        description: 'Bruges til undervogn og fælge.',
+        description: 'til undervogn og fælge.',
         color: 'is-danger',
         position: 'right',
       },
     ],
   },
   {
-    title: 'Højtryksskylning',
-    content: '',
+    title: 'Højtryks skylning',
+    content: 'Spul med vand indtil sæben er væk.',
     brushes: [
       {
         label: 'Sort slange',
-        description: 'Spul med vand indtil sæben er væk.',
+        description: 'til at spule sæben af.',
         color: 'is-black',
         position: 'right',
       },
@@ -578,11 +581,11 @@ const guidedWashFlowSteps: guidedWashFlowStep[] = [
   },
   {
     title: 'Voks pålægning',
-    content: '',
+    content: 'Pålæg voks på førerhuset.',
     brushes: [
       {
         label: 'Gul slange',
-        description: 'Påfør voks på førerhuset.',
+        description: 'til voks pålægning.',
         color: 'is-warning',
         position: 'left',
       },
@@ -590,11 +593,11 @@ const guidedWashFlowSteps: guidedWashFlowStep[] = [
   },
   {
     title: 'Spot Free skylning',
-    content: '',
+    content: 'Skyl hurtigt førerhuset med Spot Free for at undgå pletter.',
     brushes: [
       {
         label: 'Hvid slange',
-        description: 'Skyl hurtigt førerhuset med Spot Free for at undgå pletter.',
+        description: 'til Spot Free skylning.',
         color: 'is-white',
         position: 'right',
       },
@@ -796,12 +799,47 @@ watch(() => currentStep.value, () => {
             </b-step-item>
             <!-- Wash -->
             <b-step-item label="Vask" iconPack="fas" icon="soap" :step="steps.WASH_IN_PROGRESS" :clickable="clickableSteps[steps.WASH_IN_PROGRESS]()">
-              <h1 class="title has-text-centered">Vask i gang</h1>
-              <h2 class="subtitle has-text-centered">
-                <strong>{{ formattedElapsed }}</strong>
-              </h2>
+              <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">Vask i gang</h1>
+                <h2 class="subtitle has-text-centered">
+                  <strong>{{ formattedElapsed }}</strong>
+                </h2>
+              </div>
               <template v-if="guidedWashFlow">
-                <b-field label="Vasketrin">
+                <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">Følg de 6 trin for det bedste resultat:</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>Advarsel:</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"
@@ -867,10 +905,6 @@ watch(() => currentStep.value, () => {
                   </b-steps>
                 </b-field>
               </template>
-              <p class="has-text-centered">
-                Vasken er startet på bane {{ (currentLane && currentLane.name) ? currentLane.name : washLaneId }}.
-                Når vasken er færdig, skal du trykke på knappen "Færdig" nedenfor for at afslutte processen.
-              </p>
             </b-step-item>
             <!-- Completed -->
             <b-step-item label="Færdig" iconPack="fas" icon="check-circle" :step="steps.COMPLETED">
@@ -932,14 +966,14 @@ watch(() => currentStep.value, () => {
                     :disabled="isNextButtonDisabled()"
                     @click="() => onStartWash(radioLaneOption, licensePlateInput, customerNumberInput)"
                 >Bekræft</b-button>
-                <!-- Guided wash button -->
+                <!-- Help button during wash -->
                 <b-button
                     v-show="currentStep === steps.WASH_IN_PROGRESS"
                     type="is-link is-light"
                     icon-pack="fas"
                     icon-right="info-circle"
-                    @click.prevent="toggleGuidedWashFlow"
-                    >Vejledning</b-button>
+                    @click.prevent="SessionUser.functions.contact.onClickCallPhoneNumber()"
+                    >Assistance</b-button>
                 <!-- Complete button -->
                 <b-button
                     v-show="currentStep === steps.WASH_IN_PROGRESS"