Merge pull request #337 from Safelite/feature/digital/SSR-386

Feature/digital/ssr 386

src/layouts/policy-vehicles/policy-vehicles.spec.js

@@ -4,7 +4,6 @@ import { shallowMount } from "@vue/test-utils";
 import { getMountOptions } from "@/helpers/unit-test-helper.js";
 import { useMainStore } from "@/store";
 import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
-import {vehicleSelectionOptions} from "@/constants/vehicle-selection-options";
 import { navigationScenarios } from "@/router/router-constants/navigation-scenarios";
 
 // Mock fetchCmsContentForPage
@@ -33,17 +32,6 @@ describe("policy-vehicles.vue", () => {
         //Assert
         expect(wrapper.vm.$router.navigate).toBeCalled();
     });
-    test("Should navigate to CLICKED_BACK if backButtonAction is run", async () => {
-        // Arrange
-        const { wrapper } = setupMocks({});
-
-        // Act        
-        await wrapper.vm.backButtonAction();
-
-        //Assert
-        expect(wrapper.vm.$router.navigate).toBeCalled();
-    });
-
     test("Selected vehicle VIN do match vehicles listed in our system (CarIDs) found then navigate forward to vehicle-damage page.", async () => {
         //Arrange
         const { wrapper } = setupMocks({});
@@ -87,7 +75,7 @@ describe("policy-vehicles.vue", () => {
 
         // Act    
         await wrapper.setData({
-            selectedVehicleVin: vehicleSelectionOptions.VEHICLE_NOT_LISTED,
+            selectedVehicleVin: "Vehicle not listed",
         });    
         await wrapper.vm.forwardButtonAction();
 
@@ -99,6 +87,16 @@ describe("policy-vehicles.vue", () => {
             {}            
         );
     });
+    test("first vehicle is auto-selected if only one vehicle on policy", async () => {
+        //Arrange
+        const { wrapper } = setupMocks({});
+
+        // Act    
+        await wrapper.vm.$nextTick();
+
+        // Assert
+        expect(wrapper.vm.selectedVehicleVin).toBe("5NMS3CADXLH233004");
+    });
 });
 
 function setupMocks({
@@ -109,15 +107,15 @@ function setupMocks({
     useMainStore().applicationUser = {
         pageData: {
             "policy-vehicles": 
-                [
-                    {                     
-                        vehicleMake: "Hyundai",
-                        vehicleModel: "Santa Fe",
-                        vehicleStyle: "4 door utility",
-                        vehicleYear: 2020,                        
-                        vin: "5NMS3CADXLH233004",    
-                    },
-                ],
+            [
+                {                     
+                    vehicleMake: "Hyundai",
+                    vehicleModel: "Santa Fe",
+                    vehicleStyle: "4 door utility",
+                    vehicleYear: 2020,                        
+                    vin: "5NMS3CADXLH233004",    
+                },
+            ],
         }
     };
     useMainStore().lookupVehicleByVin = jest.fn().mockImplementation(() => {

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

@@ -8,7 +8,7 @@
                         <div class="row">
                             <div class="col">
                                 <div class="select-car-form rounded text-center">
-                                    <vehicleBanner cmsWidgetName="VehicleBannerWidget" :displayGenericVehicleImage="true" class="mt-2 mb-4" />
+                                    <vehicleBanner cmsWidgetName="VehicleBannerWidget" :displayGenericVehicleImage="displayGeneric" class="mt-2 mb-4" />
                                     <policyVehiclesQuestion 
                                     class="px-4" 
                                     cmsWidgetName="PolicyVehiclesQuestion" 
@@ -50,9 +50,13 @@ export default {
     mixins: [BaseFormMixin],
     data() {
     return {
-      selectedVehicleVin: "",
-      bailout: false
-        }
+        selectedVehicleVin: "",
+        displayGeneric: true,
+        bailout: false
+    }
+    },
+    mounted() {
+        this.autoSelectIfOneVehicle();
     },
     async beforeRouteEnter(to, from, next)
     {
@@ -122,8 +126,12 @@ export default {
                     },
                 };
             }
-            },        
-           
+            },   
+            autoSelectIfOneVehicle() {
+            if (this.VehiclesFromApi.length == 1) {
+               this.selectedVehicleVin = this.VehiclesFromApi[0].vin;
+            }
+        }     
         },
         computed:{
             VehiclesForQuestions() {
@@ -145,8 +153,52 @@ export default {
             },
             VehiclesFromApi() {
                 return useMainStore().pageData(issPageValues.POLICY_VEHICLES);
-            },            
-        },        
+            },
+            selectedVehicle() {
+                const vehicle = this.mainStore.lookupVehicleByVin(this.selectedVehicleVin);
+                return vehicle;
+            }, 
+        },
+        watch: {
+            async selectedVehicleVin(value) {
+                if (value === "Vehicle not listed") {
+                    // clear previously selected vehicle and image
+                    this.mainStore.resetVehicleState();
+                    this.displayGeneric = true;
+                }
+
+                else {
+                    // get vehicle details from selected VIN
+                    const vehicle = await this.lookupVehicleByVin(value);
+
+                    // handle error in case vehicle info doesn't come back for selected VIN
+                    if (vehicle.error) {
+                        this.mainStore.resetVehicleState();
+                        this.displayGeneric = true;
+                    }
+
+                    // save selected vehicle to the store
+                    this.mainStore.updateVehicle(vehicle.data);
+                    this.displayGeneric = true;
+
+                    // get the style(s) associated with the selected YMM
+                    const styleOptions = await this.mainStore.getVehicleStyles(
+                        vehicle.data.year,
+                        vehicle.data.make, 
+                        vehicle.data.model
+                    )
+
+                    // if there is more than 1 style for the selected vehicle, display generic/blurred image
+                    if (styleOptions?.data?.length > 1) {
+                        this.displayGeneric = true;
+                    }
+                    else {
+                        // display clear image of vehicle
+                        this.displayGeneric = false;
+                    }
+                }
+            }
+        },     
         components: {
             siteHeader,
             siteFooter,