From f0413c2a908e84ec40a10552b1f8ed1761f34a56 Mon Sep 17 00:00:00 2001
From: Katie Kroell <Katie.Kroell@safelite.com>
Date: Mon, 8 Sep 2025 10:38:19 -0400
Subject: [PATCH] add big truck alert to vehicle selection page, get vehicle
 info

---
 .../vehicle-selection/vehicle-selection.vue   | 50 ++++++++++++++++---
 1 file changed, 42 insertions(+), 8 deletions(-)

diff --git a/src/layouts/vehicle-selection/vehicle-selection.vue b/src/layouts/vehicle-selection/vehicle-selection.vue
index 59b96b38..b8858e63 100644
--- a/src/layouts/vehicle-selection/vehicle-selection.vue
+++ b/src/layouts/vehicle-selection/vehicle-selection.vue
@@ -52,18 +52,23 @@
                         :updateValues="updateStyleValues"
                         validationRules="style-required"
                         inputId="styleQuestionField" />
-
                     <vehicleBanner
                         ref="banner"
                         cmsWidgetName="VehicleBannerWidget"
                         :displayGenericVehicleImage="displayGeneric"
                         class="mt-5 mb-3" />
-
+                    <alert
+                        ref="AlertNoService"
+                        v-if="displayNoServiceAlert"
+                        class="mt-5"
+                        cmsWidgetName="AlertVehicleSelection"
+                        alertClass="alert-danger"
+                        :isDismissable="false" />
                     <siteFooter
                         ref="siteFooter"
                         class="mt-5"
                         cmsWidgetName="SiteFooterWidget"
-                        :isForwardActionDisabled="!meta.valid"
+                        :isForwardActionDisabled="!meta.valid || displayNoServiceAlert"
                         @ForwardClicked="forwardButtonAction"
                         @backClicked="navigateBack" />
                 </div>
@@ -79,6 +84,7 @@ import siteFooter from '@/iss-components/site-footer/site-footer.vue';
 import siteSubHeader from '@/iss-components/site-sub-header/site-sub-header.vue';
 import vehicleBanner from '@/iss-components/vehicle-banner/vehicle-banner.vue';
 import vehicleQuestion from '@/layouts/vehicle-selection/vehicle-question/vehicle-question.vue';
+import alert from '@/ux-components/alert/alert.vue';
 import { useMainStore } from '@/store';
 
 // Supporting files
@@ -105,7 +111,8 @@ export default {
         siteFooter,
         // eslint-disable-next-line vue/no-reserved-component-names
         Form,
-        vehicleQuestion
+        vehicleQuestion,
+        alert
     },
     mixins: [baseFormMixin],
 
@@ -138,7 +145,8 @@ export default {
             selectedYear: year,
             selectedMake: make,
             selectedModel: model,
-            selectedStyle: style
+            selectedStyle: style,
+            displayNoServiceAlert: false
         };
     },
     computed: {
@@ -146,9 +154,9 @@ export default {
             return !this.selectedStyle;
         }
     },
-
     watch: {
         selectedYear(value) {
+            this.resetAlert();
             this.mainStore.updateVehicleYear(value);
             this.$refs.vehicleMakeQuestion.clearValues();
             if (value) {
@@ -156,6 +164,7 @@ export default {
             }
         },
         selectedMake(value) {
+            this.resetAlert();
             this.mainStore.updateVehicleMake(value);
             this.$refs.vehicleModelQuestion.clearValues();
             if (value) {
@@ -163,6 +172,7 @@ export default {
             }
         },
         selectedModel(value) {
+            this.resetAlert();
             this.mainStore.updateVehicleModel(value);
             this.$refs.vehicleStyleQuestion.clearValues();
             if (value) {
@@ -170,11 +180,16 @@ export default {
             }
         },
         selectedStyle(value) {
+            this.resetAlert();
             this.mainStore.updateVehicleStyle(value);
-            this.mainStore.setVehicle();
+            this.getVehicle(this.selectedYear, this.selectedMake, this.selectedModel, this.selectedStyle);
         }
     },
     mounted() {
+        this.$refs.vehicleYearQuestion.clearValues();
+        this.$refs.vehicleMakeQuestion.clearValues();
+        this.$refs.vehicleModelQuestion.clearValues();
+        this.$refs.vehicleStyleQuestion.clearValues();
         this.$refs.vehicleYearQuestion.getNewValues();
         if (this.selectedYear) {
             this.$refs.vehicleMakeQuestion.getNewValues();
@@ -185,6 +200,9 @@ export default {
         if (this.selectedModel) {
             this.$refs.vehicleStyleQuestion.getNewValues();
         }
+        if (this.selectedStyle) {
+            this.getVehicle(this.selectedYear, this.selectedMake, this.selectedModel, this.selectedStyle);
+        }
     },
     methods: {
         arePagePrerequisitesValid() {
@@ -196,6 +214,10 @@ export default {
 
         navigateForward() {
             this.mainStore.setVehicle().then(() => {
+                if (this.isBigTruck && !this.canSafeliteService) {
+                    this.$refs.vehicleSelectionAlert.show();
+                    return;
+                }
                 if (this.mainStore.isBailout) {
                     this.$router.navigate(
                         this.navigationScenarios.CLICKED_FORWARD_WITH_BAILOUT,
@@ -264,7 +286,19 @@ export default {
                     this.$route
                 );
             });
-        }
+        },
+        async getVehicle() {
+            const result = await this.mainStore.setVehicle(
+                this.selectedYear,
+                this.selectedMake,
+                this.selectedModel,
+                this.selectedStyle
+            );
+            this.displayNoServiceAlert = result.data.isBigTruck && !result.data.canSafeliteService; 
+        },
+        resetAlert() {
+            this.displayNoServiceAlert = false;
+        }   
     }
 };
 </script>