add big truck alert to policy-vehicles page

src/layouts/policy-vehicles/policy-vehicles.vue

@@ -24,10 +24,17 @@
                             cmsWidgetName="PolicyVehiclesQuestion"
                             :vehicles="VehiclesForQuestions"
                             :validationRules="rules.optionRequired" />
+                        <alert
+                            ref="AlertNoService"
+                            v-if="displayNoServiceAlert"
+                            class="mt-5"
+                            cmsWidgetName="AlertVehicleSelection"
+                            alertClass="alert-danger"
+                            :isDismissable="false" />
                         <siteFooter
                             ref="siteFooter"
                             cmsWidgetName="SiteFooterWidget"
-                            :isForwardActionDisabled="!meta.valid"
+                            :isForwardActionDisabled="!meta.valid || displayNoServiceAlert"
                             @ForwardClicked="forwardButtonAction"
                             @backClicked="backButtonAction" />
                     </div>
@@ -58,6 +65,7 @@ import {
     repairWaivedForSelectedVehicle
 } from '@/helpers/policy-vehicle-helper';
 import coverageType from '@/constants/coverage-type';
+import alert from '@/ux-components/alert/alert.vue';
 
 export default {
     name: 'policy-vehicles',
@@ -67,7 +75,8 @@ export default {
         vehicleBanner,
         policyVehiclesQuestion,
         // eslint-disable-next-line vue/no-reserved-component-names
-        Form
+        Form,
+        alert
     },
     mixins: [BaseFormMixin],
     async beforeRouteEnter(to, from, next) {
@@ -89,7 +98,8 @@ export default {
             policyVinFound: true,
             rules: {
                 optionRequired: globalRules.OPTION_REQUIRED
-            }
+            },
+            displayNoServiceAlert: false
         };
     },
     computed: {
@@ -115,7 +125,6 @@ export default {
             if (this.selectedVehicleVin !== vehicleSelectionOptions.VEHICLE_NOT_LISTED) {
                 return this.policyVehicles.find((p) => p.vin === this.selectedVehicleVin);
             }
-
             return null;
         },
         noCoverageForSelectedVehicle() {
@@ -137,6 +146,7 @@ export default {
     },
     watch: {
         async selectedVehicleVin(value) {
+            this.resetAlert();
             if (value === vehicleSelectionOptions.VEHICLE_NOT_LISTED) {
                 // clear previously selected vehicle and image
                 this.mainStore.resetVehicleState();
@@ -151,6 +161,9 @@ export default {
                     this.displayGeneric = true;
                     return;
                 }
+                if (vehicle.data.isBigTruck && !vehicle.data.canSafeliteService) {
+                    this.displayNoServiceAlert = true;
+                }
                 if (vehicle) {
                     // save selected vehicle to the store
                     this.displayGeneric = false;
@@ -273,6 +286,9 @@ export default {
                     data: responseError.data
                 };
             }
+        },
+        resetAlert() {
+            this.displayNoServiceAlert = false;
         }
     }
 };