Merge pull request #40 from Safelite/feature/Digital/SSR-108

Created call to getVehicle, refactored setting vehicle properties, up…

src/constants/endpoints.js

@@ -27,6 +27,10 @@ const endpoints = {
     url: "/vehicle/api/v1/vehicle/styles",
     method: "GET",
   },
+  GetVehicle: {
+    url: "/vehicle/api/v1/vehicle/lookup",
+    method: "GET",
+  },
   LogExperimentExposureIfAssigned: {
     url: "/experiments/api/v1/experiments/log-exposure",
     method: "POST",

src/layouts/vehicle-make/vehicle-make.vue

@@ -90,7 +90,7 @@
         },
         watch: {
           selectedMake(make) {
-            this.mainStore.updateVehicleMake(make); 
+            this.mainStore.updateVehicleMake( make ); 
             this.$router.navigate(
               this.navigationScenarios.SELECTED_MAKE,
               this.$route

src/layouts/vehicle-model/vehicle-model.vue

@@ -83,7 +83,7 @@
   
     watch: {
       selectedModel(model) {
-        this.mainStore.updateVehicleModel(model);
+        this.mainStore.updateVehicleModel( model );
         this.$router.navigate(
           this.navigationScenarios.SELECTED_MODEL,
           this.$route

src/layouts/vehicle-style/vehicle-style.vue

@@ -76,11 +76,13 @@ export default {
 
     watch: {
         selectedStyle(style) {
-            this.mainStore.updateVehicleStyle(style);
-            this.$router.navigate(
-                this.navigationScenarios.SELECTED_STYLE,
-                this.$route
-            );
+            this.mainStore.updateVehicleStyle( style );
+            this.mainStore.setVehicle().then(() => {
+                this.$router.navigate(
+                    this.navigationScenarios.SELECTED_STYLE,
+                    this.$route
+                );
+            });
         },
     },
 

src/layouts/vehicle-year/vehicle-year.vue

@@ -69,7 +69,8 @@
     watch: {
       selectedYear(year) {
         const parsedYear = parseInt(year);
-        this.mainStore.updateVehicleYear(parsedYear); 
+        this.mainStore.updateVehicleYear( parsedYear ); 
+        
         this.$router.navigate(
           this.navigationScenarios.SELECTED_YEAR,
           this.$route

src/mixins/base-mixin.js

@@ -1,7 +1,6 @@
 
 import { mapStores } from "pinia";
 import { useMainStore } from "@/store";
-;
 import { navigationScenarios } from "@/router/router-constants/navigation-scenarios";
 import { vehicleCategories } from "@/constants/vehicle-categories.js";
 import { queryStrings } from "@/constants/query-strings";

src/store/index.js

@@ -190,34 +190,87 @@ export const useMainStore = defineStore({
         });
       },
 
-      // Vehicle API Actions
-      updateVehicleYear(year) 
+      setVehicle() {
+        return globalMethods
+          .callHttpClient({
+              methods: endpoints.GetVehicle.method,
+              endpoint: `${endpoints.GetVehicle.url}/${this.order.vehicle.year}/${this.order.vehicle.make}/${this.order.vehicle.model}/${this.order.vehicle.style}`,
+              payload: {},
+          })
+          .then((response) => {
+            updateVehicle(response.vehicle);
+            return response;
+          });
+      },
+
+      updateVehicle(vehicle) {
+        this.order.vehicle = { ...this.order.vehicle, ...vehicle };
+      },
+
+      resetVehicleState()
       {
-        if (this.order.vehicle.year !== year) {
+        this.order.vehicle.year = null;
+        this.order.vehicle.make = null;
+        this.order.vehicle.model = null;
+        this.order.vehicle.style = null;
+        this.order.vehicle.carId = null;
+        this.order.vehicle.category = null;
+        this.order.vehicle.vin = null;
+        this.order.vehicle.imageUrl = null;
+        this.order.vehicle.imageVifNumber = null;
+        this.order.vehicle.imageColor = null;
+      },
+
+      updateVehicleYear(year) {
+        if(this.order.vehicle.year != year)
+        {
+          this.resetVehicleState();
           this.order.vehicle.year = year;
         }
       },
 
-      updateVehicleMake(make) 
-      {
-        if (this.order.vehicle.make !== make) {
+      updateVehicleMake(make) {
+        if(this.order.vehicle.make != make)
+        {
+          const year = this.order.vehicle.year;
+          
+          this.resetVehicleState();
+          
+          this.order.vehicle.year = year;
           this.order.vehicle.make = make;
         }
       },
 
-      updateVehicleModel(model) 
-      {
-        if (this.order.vehicle.model !== model) {
+      updateVehicleModel(model) {
+        if(this.order.vehicle.model != model)
+        {
+          const year = this.order.vehicle.year;
+          const make = this.order.vehicle.make;
+
+          this.resetVehicleState();
+
+          this.order.vehicle.year = year;
+          this.order.vehicle.make = make;
           this.order.vehicle.model = model;
         }
       },
 
-      updateVehicleStyle(style) 
-      {
-        if (this.order.vehicle.style !== style) {
+      updateVehicleStyle(style) {
+        if(this.order.vehicle.style != style)
+        {
+          const year = this.order.vehicle.year;
+          const make = this.order.vehicle.make;
+          const model = this.order.vehicle.model;
+
+          this.resetVehicleState();
+
+          this.order.vehicle.year = year;
+          this.order.vehicle.make = make;
+          this.order.vehicle.model = model;
           this.order.vehicle.style = style;
         }
       },
+     
       addEventToBus (event) {
         this.applicationUser.eventBus.push(event);
       },

src/store/store.spec.js

@@ -1,6 +1,7 @@
-import { useMainStore } from "./"
+import { useMainStore } from "./@store";
 import { createApp } from 'vue';
 import { createPinia } from "pinia";
+import globalMethods from "@/global-methods";
 import App from '@/App.vue';
 
 
@@ -21,7 +22,7 @@ describe("Store", () => {
         
     it("Should Store Vehicle Year", () => {
         let testYear = "2001";
-        store.order.vehicle.year = testYear;
+        store.updateVehicleYear(testYear);
         expect(store.order.vehicle.year).toEqual(testYear);
     });
 
@@ -82,4 +83,61 @@ describe("Store", () => {
         expect(actual).toEqual(event.eventValue);
     });
 
+    it("UpdateVehicle should merge vehicle with response object", () => {
+        store.order.vehicle = {
+            year: 2020,
+            make: "Honda",
+            model: "Civic",
+            style: "4 door sedan",
+            carId: null,
+            category: null,
+            vin: null,
+            imageUrl: null,
+            imageVifNumber: null,
+            imageColor: null,
+        };
+
+        const response = {data: {
+            "carId": "CR00069299",
+            "category": "CAR",
+            "year": 2020,
+            "make": "Honda",
+            "model": "Civic",
+            "style": "4 door sedan",
+            "imageUrl": "https://dbhdyzvm8lm25.cloudfront.net/color_0320_032/MY2020/13996/13996_cc0320_032_WX.jpg",
+            "imageVifNumber": "13996",
+            "imageVifColor": "white"
+            }
+        };
+
+        store.updateVehicle(response.data);
+
+        expect(store.order.vehicle.imageUrl).toEqual(response.data.imageUrl);
+        expect(store.order.vehicle.imageVifNumber).toEqual(response.data.imageVifNumber);
+        expect(store.order.vehicle.imageVifColor).toEqual(response.data.imageVifColor);
+    });
+
+    it("setVehicle should call globalMethods.callHttpClient", () => {
+        store.order.vehicle = jest.fn();
+
+        const response = {data: {
+            "carId": "CR00069299",
+            "category": "CAR",
+            "year": 2020,
+            "make": "Honda",
+            "model": "Civic",
+            "style": "4 door sedan",
+            "imageUrl": "https://dbhdyzvm8lm25.cloudfront.net/color_0320_032/MY2020/13996/13996_cc0320_032_WX.jpg",
+            "imageVifNumber": "13996",
+            "imageVifColor": "white"
+            }
+        };
+
+        globalMethods.callHttpClient = jest.fn().mockReturnValue(Promise.resolve(response));
+        
+        store.setVehicle();
+
+        expect(globalMethods.callHttpClient).toHaveBeenCalled();
+    });
+
 });