From e390ae7ac7d7da6429c501c3655943b4433038f0 Mon Sep 17 00:00:00 2001
From: Adam Caouette <adam.caouette@safelite.com>
Date: Wed, 22 Jun 2022 21:18:17 -0400
Subject: [PATCH] CSR-417-fix: fix for address-vehicles page which stopped
 working

---
 .../address-vehicles-question.spec.js             |  2 +-
 .../address-vehicles-question.vue                 | 14 ++++++++------
 .../address-vehicles/address-vehicles.spec.js     | 14 +++++++-------
 src/layouts/address-vehicles/address-vehicles.vue | 15 +++++++++------
 4 files changed, 25 insertions(+), 20 deletions(-)

diff --git a/src/layouts/address-vehicles/address-vehicles-question/address-vehicles-question.spec.js b/src/layouts/address-vehicles/address-vehicles-question/address-vehicles-question.spec.js
index d030c7c76..04bcdb366 100644
--- a/src/layouts/address-vehicles/address-vehicles-question/address-vehicles-question.spec.js
+++ b/src/layouts/address-vehicles/address-vehicles-question/address-vehicles-question.spec.js
@@ -39,7 +39,7 @@ describe("addressVehiclesQuestion.vue", () => {
 
       // Act
       const localThis = { $emit: jest.fn() }
-      addressVehiclesQuestion.computed.selectedVehicleVin.set.call(localThis, 'newValue');
+      addressVehiclesQuestion.computed.selectedVehicleVinAsArray.set.call(localThis, ['newValue']);
 
       // Assert
       expect(localThis.$emit).toBeCalledWith("update:modelValue", "newValue");
diff --git a/src/layouts/address-vehicles/address-vehicles-question/address-vehicles-question.vue b/src/layouts/address-vehicles/address-vehicles-question/address-vehicles-question.vue
index 95d2b1fd0..0c7a75ea7 100644
--- a/src/layouts/address-vehicles/address-vehicles-question/address-vehicles-question.vue
+++ b/src/layouts/address-vehicles/address-vehicles-question/address-vehicles-question.vue
@@ -5,7 +5,7 @@
     groupName="ChooseAddressVehicle"
     :questionText="questionText"
     :answers="vehicles"
-    v-model="selectedVehicleVin"
+    v-model="selectedVehicleVinAsArray"
     isRequired=true
     :validation-rules="validationRules"
   />
@@ -62,16 +62,18 @@ export default {
     questionText() {
       return this.getCmsContent("VehicleConfirmationQuestion", "QuestionText");
     },
-    selectedVehicleVin: {
+    selectedVehicleVinAsArray: {
       get: function() {
-          return this.modelValue;
+        const modelValueAsArray = this.modelValue ? [this.modelValue] : [];
+        return modelValueAsArray;
       },
       set: function(newValue) {
-          this.$emit("update:modelValue", newValue);
+        const newValueAsScalar = newValue && newValue.length > 0 ? newValue[newValue.length-1] : null;
+        this.$emit("update:modelValue", newValueAsScalar);
       }
     },
-    selectedVehicle() {
-      return this.vehicles.find( ({ vin }) => vin === this.selectedVehicleVin[0] );
+    selectedVehicle() { // this computed is only needed for the computed differentVehicleAlertBody text above
+      return this.vehicles.find( ({ vin }) => vin === this.selectedVehicleVinAsArray[this.selectedVehicleVinAsArray.length-1] );
     },
   },
   components: {
diff --git a/src/layouts/address-vehicles/address-vehicles.spec.js b/src/layouts/address-vehicles/address-vehicles.spec.js
index 74b8a02bb..fcccb1d94 100644
--- a/src/layouts/address-vehicles/address-vehicles.spec.js
+++ b/src/layouts/address-vehicles/address-vehicles.spec.js
@@ -57,7 +57,7 @@ describe("addressVehicles.vue", () => {
       
       // Act
       await wrapper.setData({
-        selectedVehicleVin: ['5NMS3CADXLH233004'],
+        selectedVehicleVin: '5NMS3CADXLH233004',
       });
       wrapper.vm.backButtonAction();
 
@@ -87,7 +87,7 @@ describe("addressVehicles.vue", () => {
 
       // Act
       await wrapper.setData({
-        selectedVehicleVin: ['5NMS3CADXLH233004'],
+        selectedVehicleVin: '5NMS3CADXLH233004',
       });
       
       await wrapper.vm.forwardButtonAction();
@@ -117,7 +117,7 @@ describe("addressVehicles.vue", () => {
 
       // Act
       await wrapper.setData({
-        selectedVehicleVin: ['5NMS3CADXLH233004'],
+        selectedVehicleVin: '5NMS3CADXLH233004',
       });
       await wrapper.vm.forwardButtonAction();
       wrapper.vm.$nextTick();
@@ -144,7 +144,7 @@ describe("addressVehicles.vue", () => {
       
       // Act
       await wrapper.setData({
-        selectedVehicleVin: ['5NMS3CADXLH233004'],
+        selectedVehicleVin: '5NMS3CADXLH233004',
         isSelectedGlassAvailableForVehicle: false,
         isCarIdDifferent: true,
       });
@@ -176,7 +176,7 @@ describe("addressVehicles.vue", () => {
 
       // Act
       await wrapper.setData({
-        selectedVehicleVin: ['5NMS3CADXLH233004'],
+        selectedVehicleVin: '5NMS3CADXLH233004',
         isCarIdDifferent: false,
       });
       await wrapper.vm.resetDependentState();
@@ -194,7 +194,7 @@ describe("addressVehicles.vue", () => {
 
       // Act
       await wrapper.setData({
-        selectedVehicleVin: ['5NMS3CADXLH233004'],
+        selectedVehicleVin: '5NMS3CADXLH233004',
         isCarIdDifferent: false,
       });
       await wrapper.vm.resetDependentState();
@@ -213,7 +213,7 @@ describe("addressVehicles.vue", () => {
       
       // Act
       await wrapper.setData({
-        selectedVehicleVin: ['5NMS3CADXLH233004'],
+        selectedVehicleVin: '5NMS3CADXLH233004',
         isSelectedGlassAvailableForVehicle: false,
         isCarIdDifferent: true,
       });
diff --git a/src/layouts/address-vehicles/address-vehicles.vue b/src/layouts/address-vehicles/address-vehicles.vue
index c9bcb95bb..8a36bb51f 100644
--- a/src/layouts/address-vehicles/address-vehicles.vue
+++ b/src/layouts/address-vehicles/address-vehicles.vue
@@ -102,7 +102,7 @@ export default {
   },
   data() {
     return {
-      selectedVehicleVin: null,
+      selectedVehicleVin: "",
       isCarIdDifferent: false,
       isSelectedGlassAvailableForVehicle: true,
     };
@@ -145,7 +145,7 @@ export default {
       return store.getters.pageData(fmgPageValues.ADDRESS_VEHICLES);
     },
     selectedVehicle() {
-      return this.VehiclesForQuestions.find( ({ vin }) => vin === this.selectedVehicleVin[0] );
+      return this.VehiclesForQuestions.find( ({ vin }) => vin === this.selectedVehicleVin );
     },
   },
   methods: {
@@ -219,10 +219,13 @@ export default {
   },
 
   watch: {
-    selectedVehicleVin() {
-      // does this vehicle match the previously selected carId?
-      this.isCarIdDifferent = this.selectedVehicle.vehicle.carId !== store.getters.vehicle.carId;
-      this.$refs.funnelFooter.updateButtonText(`Continue with ${this.selectedVehicle.vehicle.year} ${this.selectedVehicle.vehicle.make} ${this.selectedVehicle.vehicle.model}`);
+    selectedVehicleVin: {
+      handler() {
+        // does this vehicle match the previously selected carId?
+        this.isCarIdDifferent = this.selectedVehicle.vehicle.carId !== store.getters.vehicle.carId;
+        this.$refs.funnelFooter.updateButtonText(`Continue with ${this.selectedVehicle.vehicle.year} ${this.selectedVehicle.vehicle.make} ${this.selectedVehicle.vehicle.model}`);
+      },
+      deep: true
     },
   },