Merge pull request #199 from Safelite/feature/Digital/SSR-279

Feature/digital/ssr 279

src/layouts/address-vehicles/address-vehicles-question/address-vehicles-question.spec.js

@@ -24,7 +24,7 @@ describe("address-vehicles-question.vue", () => {
         });
 
         // Assert
-        expect(wrapper.vm.differentVehicleAlertHeader).toEqual("FoundWindshieldTestReturn");
+        expect(wrapper.vm.differentVehicleAlertHeader).toEqual("AlertMatchedDifferentVehicleWidgetTestReturn");
     });
     test("Should return content for differentVehicleAlertBody", () => {
         // Arrange
@@ -37,15 +37,40 @@ describe("address-vehicles-question.vue", () => {
         });
 
         // Assert
-        expect(wrapper.vm.differentVehicleAlertBody).toEqual("FoundWindshieldTestReturn");
+        expect(wrapper.vm.differentVehicleAlertBody).toEqual("AlertMatchedDifferentVehicleWidgetTestReturn");
+    });
+    test("Should return content for AlertMatchedTwoIdenticalYMMVehicleHeader", () => {
+        // Arrange
+        const wrapper = shallowMount(addressVehiclesQuestion, {
+            mixins: [mockMixin],
+        });
+
+        // Assert
+        expect(wrapper.vm.AlertMatchedTwoIdenticalYMMVehicleHeader).toEqual("AlertMatchedTwoIdenticalYMMVehicleWidgetTestReturn");
+    });
+    test("Should return content for AlertMatchedTwoIdenticalYMMVehicleBody", () => {
+        // Arrange
+        const wrapper = shallowMount(addressVehiclesQuestion, {
+            mixins: [mockMixin],
+            propsData: {
+                vehicles: ["1", "2"],
+                modelValue: ["1", "2"],
+            },
+        });
+
+        // Assert
+        expect(wrapper.vm.AlertMatchedTwoIdenticalYMMVehicleBody).toEqual("AlertMatchedTwoIdenticalYMMVehicleWidgetTestReturn");
     });
 });
 
 const mockMixin = {
     methods: {
         getCmsContent: jest.fn((contentName) => {
-            if (contentName === "FoundWindshield") {
+            if (contentName === "AlertMatchedDifferentVehicleWidget") {
-                return "FoundWindshieldTestReturn";
+                return "AlertMatchedDifferentVehicleWidgetTestReturn";
+            }
+            if (contentName === "AlertMatchedTwoIdenticalYMMVehicleWidget") {
+                return "AlertMatchedTwoIdenticalYMMVehicleWidgetTestReturn";
             }
             return null;
         }),

src/layouts/address-vehicles/address-vehicles-question/address-vehicles-question.vue

@@ -2,14 +2,24 @@
     <div class="px-5">
         <alert
             ref="differentVehicleAlert"
-            v-if="isCarIdDifferent"
+            v-if="displayMatchedDifferentVehicleAlert"
             class="my-4"
-            cmsWidgetName="FoundWindshield"
+            cmsWidgetName="AlertMatchedDifferentVehicleWidget"
             :manualHeadline="differentVehicleAlertHeader"
             :manualCopy="differentVehicleAlertBody"
             alertClass="alert-warning"
             v-bind:isDismissible="false"
             id="address-vehicles-question-alert" />
+            <alert
+                        ref="alertMatchedTwoIdenticalYMMVehicle"
+                        v-if="displayMatchedTwoIdenticalYMMVehicleAlert"
+                        class="my-4"
+                        cmsWidgetName="AlertMatchedTwoIdenticalYMMVehicleWidget"
+                        :manualHeadline="AlertMatchedTwoIdenticalYMMVehicleHeader"
+                        :manualCopy="AlertMatchedTwoIdenticalYMMVehicleBody"
+                        alertClass="alert-warning"
+                        v-bind:isDismissible="false"
+                        id="address-vehicles-question-alert" />
     </div>
 
     <buttonQuestion
@@ -30,28 +40,49 @@ import buttonQuestion from "@/digital-components/button-question/button-question
 import alert from "@/ux-components/alert/alert";
 // Supporting files
 import { getDamageString } from "@/helpers/damage-helper";
+
 export default {
     name: "address-vehicles-question",
     props: {
         vehicles: Array,
+        vehicleSelected:Object,
         modelValue: String,
         cmsWidgetName: String,
         validationRules: String,
         isCarIdDifferent: Boolean,
+        displayMatchedDifferentVehicleAlert: Boolean,
+        displayMatchedTwoIdenticalYMMVehicleAlert: Boolean,
     },
     computed: {
         differentVehicleAlertHeader() {
-            return this.getCmsContent("FoundWindshield", "HeadlineText").replaceAll(
+            return this.getCmsContent("AlertMatchedDifferentVehicleWidget", "HeadlineText").replaceAll(
                 "{custom:damage}",
                 getDamageString()
             );
         },
         differentVehicleAlertBody() {
-            return this.getCmsContent("FoundWindshield", "BodyText")
+            const vinYmmFound = `${ this.selectedVehicle?.vehicle.year} ${this.selectedVehicle?.vehicle.make} ${this.selectedVehicle?.vehicle.model}`;
+            const vinYmmExpected = `${this.vehicleSelected?.year} ${this.vehicleSelected?.make} ${this.vehicleSelected?.model}`;
+
+            return this.getCmsContent("AlertMatchedDifferentVehicleWidget", "BodyText")
                 .replaceAll("{custom:damage}", getDamageString())
-                .replaceAll("{custom:vinlookupYear}", this.selectedVehicle?.vehicle.year)
+                .replaceAll("{custom:vinYmmFound}", vinYmmFound)
-                .replaceAll("{custom:vinlookupMake}", this.selectedVehicle?.vehicle.make)
+                .replaceAll("{custom:vinYmmExpected}", vinYmmExpected);
-                .replaceAll("{custom:vinlookupModel}", this.selectedVehicle?.vehicle.model);
+        },
+        AlertMatchedTwoIdenticalYMMVehicleHeader() {
+            return this.getCmsContent(
+                "AlertMatchedTwoIdenticalYMMVehicleWidget",
+                "HeadlineText"
+            ).replaceAll("{custom:damage}", getDamageString());
+        },
+        AlertMatchedTwoIdenticalYMMVehicleBody() {
+            const vinYmmsFound = `${ this.selectedVehicle?.vehicle.year} ${this.selectedVehicle?.vehicle.make} ${this.selectedVehicle?.vehicle.model} ${this.selectedVehicle?.vehicle.style}`;
+            const vinYmmsExpected = `${this.vehicleSelected?.year} ${this.vehicleSelected?.make} ${this.vehicleSelected?.model} ${this.vehicleSelected?.style}`;
+
+            return this.getCmsContent("AlertMatchedTwoIdenticalYMMVehicleWidget", "BodyText")
+                .replaceAll("{custom:damage}", getDamageString())
+                .replaceAll("{custom:vinYmmsFound}", vinYmmsFound)
+                .replaceAll("{custom:vinYmmsExpected}", vinYmmsExpected);
         },
         questionText() {
             return this.getCmsContent("VehicleConfirmationQuestion", "QuestionText");
@@ -68,6 +99,9 @@ export default {
             // this computed is only needed for the computed differentVehicleAlertBody text above
             return this.vehicles.find(({ vin }) => vin === this.selectedVehicleVin);
         },
+        vehicleSelected(){
+            return this.vehicleSelected;
+        }
     },
     components: {
         buttonQuestion,

src/layouts/address-vehicles/address-vehicles.vue

@@ -31,9 +31,13 @@
         ref="addressVehiclesQuestion"
         cmsWidgetName="VehicleConfirmationQuestion"
         :vehicles="VehiclesForQuestions"
+        :vehicleSelected ="VehicleSelected"
         validationRules="vehicle-required"
         v-model="selectedVehicleVin"
         :isCarIdDifferent="isCarIdDifferent"
+        :displayMatchedDifferentVehicleAlert = "displayMatchedDifferentVehicleAlert"
+        :displayMatchedTwoIdenticalYMMVehicleAlert = "displayMatchedTwoIdenticalYMMVehicleAlert"
+      
       />
       
       <div
@@ -129,6 +133,10 @@ export default {
       selectedVehicleVin: "",
       isCarIdDifferent: false,
       isSelectedGlassAvailableForVehicle: true,
+      displayMatchedDifferentVehicleAlert: false,
+      displayMatchedTwoIdenticalYMMVehicleAlert: false,
+      previouslyEnteredCarId: "",
+      forwardButtonCarStyle:"",
     };
   },
   computed: {
@@ -141,6 +149,11 @@ export default {
         "HeadlineText"
       ).replaceAll("{custom:vehicleCount}", this.vehicleCount);
     },
+    isTwoIdenticalYMMVehicleFound(){
+            const vinYmmFound = `${ this.selectedVehicle?.vehicle.year} ${this.selectedVehicle?.vehicle.make} ${this.selectedVehicle?.vehicle.model}`;
+            const vinYmmExpected = `${this.mainStore.order.vehicle.year} ${this.mainStore.order.vehicle.make} ${this.mainStore.order.vehicle.model}`;
+            return(vinYmmFound.toLowerCase()==vinYmmExpected.toLowerCase());
+        },
     AlertProvideVinBody() {
       return this.getCmsContent("ProvideVinAlert", "BodyText");
     },
@@ -172,6 +185,9 @@ export default {
         ({ vin }) => vin === this.selectedVehicleVin
       );
     },
+    VehicleSelected(){
+      return this.mainStore.order.vehicle;
+    }
   },
   methods: {
     doesCopyContainRouterLink,
@@ -226,16 +242,32 @@ export default {
         await this.navigateForwardWithSingleCarMatch();
       }
     },
+    resetWarningsAndErrors() {
+            this.displayMatchedDifferentVehicleAlert = false;
+            this.displayMatchedTwoIdenticalYMMVehicleAlert = false;
+            this.forwardButtonCarStyle = "";
+        }
   },
   watch: {
     selectedVehicleVin: {
       handler() {
+        this.resetWarningsAndErrors();
         // does this vehicle match the previously selected carId?
         this.isCarIdDifferent =
           this.selectedVehicle?.vehicle.carId !== useMainStore().vehicle.carId;
-        if (this.isCarIdDifferent) {
+        if (this.isCarIdDifferent &&
+        this.selectedVehicle?.vehicle.carId !== this.previouslyEnteredCarId) {
+          this.previouslyEnteredCarId = this.selectedVehicle?.vehicle.carId;
+          if(this.isTwoIdenticalYMMVehicleFound){
+            const carStyle = this.selectedVehicle?.vehicle.style;
+                        this.displayMatchedTwoIdenticalYMMVehicleAlert = true;
+                        this.forwardButtonCarStyle= carStyle;
+                    }
+                    else{
+                      this.displayMatchedDifferentVehicleAlert = true;
+                    }
           this.$refs.siteFooter.updateButtonText(
-            `Continue with ${this.selectedVehicle.vehicle.year} ${this.selectedVehicle.vehicle.make} ${this.selectedVehicle.vehicle.model}`
+            `Continue with ${this.selectedVehicle.vehicle.year} ${this.selectedVehicle.vehicle.make} ${this.selectedVehicle.vehicle.model} ${this.forwardButtonCarStyle}`
           );
         } else {
           this.$refs.siteFooter.updateButtonText(