Merge pull request #1670 from Safelite/feature/CSR-1896

Csr-1896

src/layouts/vehicle/vehicle.spec.js

@@ -30,6 +30,18 @@ describe("vehicle.vue", () => {
         //Assert
         expect(arePagePrerequisitesValid).toBe(true);
     });
+    test("if the vehicle is not serviceable displays the displayNoServiceAlert", async () => {
+        //Arrange
+        const { wrapper } = setupMocks({
+            canSafeliteService: false,
+        });
+
+        //Act
+        await wrapper.vm.getVehicleDetails();
+
+        //Assert
+        expect(wrapper.findComponent({ ref: "AlertNoService" }).isVisible()).toBe(true);
+    });
 });
 describe("vehicle.vue", () => {
     describe("navigation", () => {

src/layouts/vehicle/vehicle.vue

@@ -56,11 +56,20 @@
                         :displayUnmatchedVehicleIcon="unmatchedVehicleIcon"
                         class="mt-5 vehicle-footer"
                         ref="banner" />
+                    <alert
+                        ref="AlertNoService"
+                        v-if="displayNoServiceAlert"
+                        class="mt-4 alert"
+                        cmsWidgetName="AlertNoServiceWidget"
+                        alertClass="alert-danger"
+                        :isDismissible="false" />
 
                     <navbar
                         cmsWidgetName="FunnelFooterWidget"
                         @ForwardClicked="forwardButtonAction"
-                        :isForwardActionDisabled="!meta.valid || !allDataRetrieved"
+                        :isForwardActionDisabled="
+                            !meta.valid || !allDataRetrieved || displayNoServiceAlert
+                        "
                         ref="navbar" />
                 </div>
             </div>
@@ -74,6 +83,7 @@ import funnelHeader from "@/fmg-components/funnel-header/funnel-header";
 import navbar from "@/fmg-components/nav-bar/nav-bar";
 import funnelSubHeader from "@/fmg-components/funnel-sub-header/funnel-sub-header";
 import vehicleBanner from "@/fmg-components/vehicle-banner/vehicle-banner";
+import alert from "@/ux-components/alert/alert";
 import vehicleQuestion from "@/layouts/vehicle/vehicle-question/vehicle-question";
 
 // Supporting files
@@ -111,6 +121,7 @@ export default {
             makeOptions: [],
             modelOptions: [],
             styleOptions: [],
+            displayNoServiceAlert: false,
         };
     },
 
@@ -225,6 +236,7 @@ export default {
 
     watch: {
         async selectedYear(year) {
+            this.resetAlert();
             this.makeOptions = [];
             this.selectedMake = null;
             this.selectedModel = null;
@@ -244,6 +256,7 @@ export default {
             }
         },
         async selectedMake(make) {
+            this.resetAlert();
             this.modelOptions = [];
             this.selectedModel = null;
             this.selectedStyle = null;
@@ -262,6 +275,7 @@ export default {
             }
         },
         async selectedModel(model) {
+            this.resetAlert();
             this.styleOptions = [];
             this.selectedStyle = null;
             this.carId = null;
@@ -287,6 +301,7 @@ export default {
             }
         },
         async selectedStyle(style) {
+            this.resetAlert();
             if (style) {
                 this.getVehicleDetails();
             } else {
@@ -345,8 +360,11 @@ export default {
             this.imageUrl = result?.data.imageUrl;
             this.imageVifNumber = result?.data.imageVifNumber;
             this.imageVifColor = result?.data.imageVifColor;
+            this.displayNoServiceAlert = !result?.data.canSafeliteService;
+        },
+        resetAlert() {
+            this.displayNoServiceAlert = false;
         },
-
         async forwardButtonAction() {
             await this.dispatchStoreAction(storeActions.RESET_SUBMITTED_ORDER);
             this.dispatchStoreAction(
@@ -441,6 +459,7 @@ export default {
         funnelSubHeader,
         vehicleBanner,
         Form,
+        alert,
         vehicleQuestion,
     },
 };