Merge pull request #194 from Safelite/feature/Digital/SSR-280

SSR-280

src/constants/vehicle-lookup-alert-types.js

@@ -1,6 +1,7 @@
 const vehicleLookupAlertTypes = Object.freeze({
   NOT_FOUND: 'notFound',
   NOT_MATCHED: 'notMatched',
+  TWO_IDENTICAL_YMM_MATCHED:'twoIdenticalYMMMatched'
 });
 
 export default vehicleLookupAlertTypes;

src/layouts/address-lookup/address-lookup.spec.js

@@ -56,6 +56,43 @@ describe("address-lookup.vue", () => {
             );
         });
 
+        test("if the address matches two identical YMM vehicles, then display Two Identical YMM Vehicle alert", async () => {
+            // Arrange
+            const mockRegistrationAddress = {
+                streetAddress: "1234 Main St",
+                city: "Columbus",
+                state: "OH",
+                zipCode: "43215",
+            };
+
+            const { wrapper } = setupMocks({
+                vinVehicles: [
+                    {
+                        vehicle: {
+                            carId: "C00000",
+                        },
+                    },
+                ],
+            });
+
+            useMainStore().order.vehicle.carId = "CARID2";
+
+            await wrapper.setData({
+                customerQuestions: {
+                    addressQuestions: mockRegistrationAddress,
+                },
+                isTwoIdenticalYMMVehicleFound:true,
+            });
+
+            // Act
+            await wrapper.vm.forwardButtonAction();
+
+            // Assert
+            expect(wrapper.findComponent({ ref: "alertMatchedTwoIdenticalYMMVehicle" }).isVisible()).toBe(
+                true
+            );
+        });
+
         test("if the looking up VIN by address is not allowed in the state selected display the Vin Lookup By HomeAddress Not Allowed Alert", async () => {
             // Arrange
             const mockRegistrationAddress = {

src/layouts/address-lookup/address-lookup.vue

@@ -29,6 +29,15 @@
                     :manualCopy="AlertMatchedDifferentVehicleBody"
                     alertClass="alert-warning"
                     v-bind:isDismissible="false" />
+                <alert
+                        ref="alertMatchedTwoIdenticalYMMVehicle"
+                        v-if="displayMatchedTwoIdenticalYMMVehicleAlert"
+                        class="mb-4"
+                        cmsWidgetName="AlertMatchedTwoIdenticalYMMVehicleWidget"
+                        :manualHeadline="AlertMatchedTwoIdenticalYMMVehicleHeader"
+                        :manualCopy="AlertMatchedTwoIdenticalYMMVehicleBody"
+                        alertClass="alert-warning"
+                        v-bind:isDismissible="false" />
                 <alert
                     ref="alertVinLookupsByHomeAddressNotAllowed"
                     v-if="displayVinLookupByHomeAddressNotAllowedAlert"
@@ -101,10 +110,12 @@ export default {
             displayVinNotFoundAlert: false,
             displayMatchedDifferentVehicleAlert: false,
             displayVinLookupByHomeAddressNotAllowedAlert: false,
+            displayMatchedTwoIdenticalYMMVehicleAlert: false,
             previouslyEnteredCarId: "",
             isCarIdDifferent: false,
             isSelectedGlassAvailableForVehicle: true,
             customAlertData: {},
+            forwardButtonCarStyle:"",
         };
     },
     methods: {
@@ -172,7 +183,13 @@ export default {
                     // Display Alert
                     this.previouslyEnteredCarId = carFound.carId;
                     this.customAlertData.vehicleInfo = carFound;                    
-                    this.displayMatchedDifferentVehicleAlert = true;
+                    if(this.isTwoIdenticalYMMVehicleFound){
+                        this.displayMatchedTwoIdenticalYMMVehicleAlert = true;
+                        this.forwardButtonCarStyle= carFound.style;
+                    }
+                    else{
+                        this.displayMatchedDifferentVehicleAlert = true; 
+                    }
 
                     this.isSelectedGlassAvailableForVehicle = await isGlassAvailableForCarId(
                         carFound.carId
@@ -180,7 +197,7 @@ export default {
 
                     // Update button "Continue with..."
                     this.$refs.siteFooter.updateButtonText(
-                        `Continue with ${carFound.year} ${carFound.make} ${carFound.model} ${carFound.style}`
+                        `Continue with ${carFound.year} ${carFound.make} ${carFound.model} ${this.forwardButtonCarStyle}`
                     );
                     return this.$refs.siteFooter.removeLoader();
                 }
@@ -277,14 +294,34 @@ export default {
             ).replaceAll("{custom:damage}", getDamageString());
         },
         AlertMatchedDifferentVehicleBody() {
+            const vinYmmFound = `${this.customAlertData?.vehicleInfo?.year} ${this.customAlertData?.vehicleInfo?.make} ${this.customAlertData?.vehicleInfo?.model}`;
+            const vinYmmExpected = `${this.mainStore.order.vehicle.year} ${this.mainStore.order.vehicle.make} ${this.mainStore.order.vehicle.model}`;
+
+            return this.getCmsContent("AlertMatchedDifferentVehicleWidget", "BodyText")
+                .replaceAll("{custom:damage}", getDamageString())
+                .replaceAll("{custom:vinYmmFound}", vinYmmFound)
+                .replaceAll("{custom:vinYmmExpected}", vinYmmExpected);
+        },
+        AlertMatchedTwoIdenticalYMMVehicleHeader() {
+            return this.getCmsContent(
+                "AlertMatchedTwoIdenticalYMMVehicleWidget",
+                "HeadlineText"
+            ).replaceAll("{custom:damage}", getDamageString());
+        },
+        AlertMatchedTwoIdenticalYMMVehicleBody() {
             const vinYmmsFound = `${this.customAlertData?.vehicleInfo?.year} ${this.customAlertData?.vehicleInfo?.make} ${this.customAlertData?.vehicleInfo?.model} ${this.customAlertData?.vehicleInfo?.style}`;
             const vinYmmsExpected = `${this.mainStore.order.vehicle.year} ${this.mainStore.order.vehicle.make} ${this.mainStore.order.vehicle.model} ${this.mainStore.order.vehicle.style}`;
 
-            return this.getCmsContent("AlertMatchedDifferentVehicleWidget", "BodyText")
+            return this.getCmsContent("AlertMatchedTwoIdenticalYMMVehicleWidget", "BodyText")
                 .replaceAll("{custom:damage}", getDamageString())
                 .replaceAll("{custom:vinYmmsFound}", vinYmmsFound)
                 .replaceAll("{custom:vinYmmsExpected}", vinYmmsExpected);
         },
+        isTwoIdenticalYMMVehicleFound(){
+            const vinYmmFound = `${this.customAlertData?.vehicleInfo?.year} ${this.customAlertData?.vehicleInfo?.make} ${this.customAlertData?.vehicleInfo?.model}`;
+            const vinYmmExpected = `${this.mainStore.order.vehicle.year} ${this.mainStore.order.vehicle.make} ${this.mainStore.order.vehicle.model}`;
+            return(vinYmmFound.toLowerCase()==vinYmmExpected.toLowerCase());
+        }
     },
     watch: {
         customerQuestions: {

src/layouts/license-plate-lookup/license-plate-lookup.spec.js

@@ -48,6 +48,30 @@ describe("license-plate-lookup.vue", () => {
       );
     });
 
+    test("If license plate matches two identical YMM vehicles, display alertMatchedTwoIdenticalYMMVehicle", async () => {
+      // Arrange
+      const mockRegistrationLicensePlate = {
+        licensePlate: "UTN990",
+      };
+
+      const { wrapper } = setupMocks({});
+
+      useMainStore().order.vehicle.carId = "TESTCARID";
+
+      await wrapper.setData({
+        licensePlate: mockRegistrationLicensePlate,
+        isTwoIdenticalYMMVehicleFound:true,
+      });
+
+      // Act
+      await wrapper.vm.forwardButtonAction();
+
+      // Assert
+      expect(wrapper.findComponent({ ref: "alertMatchedTwoIdenticalYMMVehicle" }).isVisible()).toBe(
+        true
+      );
+    });
+
     test("If no vehicles found, display VinNotFound alert", async () => {
       // Arrange
       const mockRegistrationLicensePlate = {

src/layouts/license-plate-lookup/license-plate-lookup.vue

@@ -27,6 +27,15 @@
           :manualCopy="AlertMatchedDifferentVehicleBody"
           alertClass="alert-warning"
           v-bind:isDismissible="false" />
+          <alert
+          ref="alertMatchedTwoIdenticalYMMVehicle"
+          v-if="displayMatchedTwoIdenticalYMMVehicleAlert"
+          class="mb-4"
+          cmsWidgetName="AlertMatchedTwoIdenticalYMMVehicleWidget"
+          :manualHeadline="AlertMatchedTwoIdenticalYMMVehicleHeader"
+          :manualCopy="AlertMatchedTwoIdenticalYMMVehicleBody"
+          alertClass="alert-warning"
+          v-bind:isDismissible="false" />
         <textboxQuestion
           cmsWidgetName="LicensePlateNumberQuestionWidget"
           v-model="licensePlate"
@@ -112,10 +121,12 @@ export default {
       licenseState: useMainStore().order.customer.address.state,
       displayVinNotFoundAlert: false,
       displayMatchedDifferentVehicleAlert: false,
+      displayMatchedTwoIdenticalYMMVehicleAlert: false,
       previouslyEnteredCarId: "",
       isCarIdDifferent: false,
       customAlertData: {},
       isSelectedGlassAvailableForVehicle: true,
+      forwardButtonCarStyle:"",
    };
   },
   methods: {
@@ -178,15 +189,21 @@ export default {
           // Display Alert
           this.previouslyEnteredCarId = vehicleFromLookup.carId;
           this.customAlertData.vehicleInfo = vehicleFromLookup;
-          this.displayMatchedDifferentVehicleAlert = true;
+          
+          if(this.isTwoIdenticalYMMVehicleFound){
+            this.displayMatchedTwoIdenticalYMMVehicleAlert = true;
+            this.forwardButtonCarStyle= vehicleFromLookup.style;
+          }
+          else{
+            this.displayMatchedDifferentVehicleAlert = true; 
+          }
+
           this.isSelectedGlassAvailableForVehicle = await isGlassAvailableForCarId(
             vehicleFromLookup.carId
           );
 
           // Update button "Continue with..."
-          this.$refs.siteFooter.updateButtonText(
+          this.$refs.siteFooter.updateButtonText(`Continue with ${vehicleFromLookup.year} ${vehicleFromLookup.make} ${vehicleFromLookup.model} ${this.forwardButtonCarStyle}`);
-              `Continue with ${vehicleFromLookup.year} ${vehicleFromLookup.make} ${vehicleFromLookup.model} ${vehicleFromLookup.style}`
-          );
           return this.$refs.siteFooter.removeLoader();
       }
 
@@ -236,14 +253,34 @@ export default {
             ).replaceAll("{custom:damage}", getDamageString());
       },
       AlertMatchedDifferentVehicleBody() {
+            const vinYmmFound = `${this.customAlertData?.vehicleInfo?.year} ${this.customAlertData?.vehicleInfo?.make} ${this.customAlertData?.vehicleInfo?.model}`;
+            const vinYmmExpected = `${this.mainStore.order.vehicle.year} ${this.mainStore.order.vehicle.make} ${this.mainStore.order.vehicle.model}`;
+
+            return this.getCmsContent("AlertMatchedDifferentVehicleWidget", "BodyText")
+                .replaceAll("{custom:damage}", getDamageString())
+                .replaceAll("{custom:vinYmmFound}", vinYmmFound)
+                .replaceAll("{custom:vinYmmExpected}", vinYmmExpected);
+      },
+      AlertMatchedTwoIdenticalYMMVehicleHeader() {
+            return this.getCmsContent(
+                "AlertMatchedTwoIdenticalYMMVehicleWidget",
+                "HeadlineText"
+            ).replaceAll("{custom:damage}", getDamageString());
+      },
+      AlertMatchedTwoIdenticalYMMVehicleBody() {
             const vinYmmsFound = `${this.customAlertData?.vehicleInfo?.year} ${this.customAlertData?.vehicleInfo?.make} ${this.customAlertData?.vehicleInfo?.model} ${this.customAlertData?.vehicleInfo?.style}`;
             const vinYmmsExpected = `${this.mainStore.order.vehicle.year} ${this.mainStore.order.vehicle.make} ${this.mainStore.order.vehicle.model} ${this.mainStore.order.vehicle.style}`;
 
-            return this.getCmsContent("AlertMatchedDifferentVehicleWidget", "BodyText")
+            return this.getCmsContent("AlertMatchedTwoIdenticalYMMVehicleWidget", "BodyText")
                 .replaceAll("{custom:damage}", getDamageString())
                 .replaceAll("{custom:vinYmmsFound}", vinYmmsFound)
                 .replaceAll("{custom:vinYmmsExpected}", vinYmmsExpected);
       },
+      isTwoIdenticalYMMVehicleFound(){
+            const vinYmmFound = `${this.customAlertData?.vehicleInfo?.year} ${this.customAlertData?.vehicleInfo?.make} ${this.customAlertData?.vehicleInfo?.model}`;
+            const vinYmmExpected = `${this.mainStore.order.vehicle.year} ${this.mainStore.order.vehicle.make} ${this.mainStore.order.vehicle.model}`;
+            return(vinYmmFound.toLowerCase()==vinYmmExpected.toLowerCase());
+        },
       stateOptions: {
         get: function () {
             return states;

src/layouts/vin-lookup/vin-lookup-alerts/two-identical-ymm-vehicle-alert/two-identical-ymm-vehicle-alert.vue

@@ -0,0 +1,53 @@
+<template>
+    <alert
+      alertClass="alert-warning"
+      cmsWidgetName="AlertMatchedTwoIdenticalYMMVehicleWidget"
+      :manualCopy="body"
+      :manualHeadline="header"
+      aria-label="two-identical-ymm-vehicle-alert"
+    />
+  </template>
+  <script>
+  import { getDamageString } from '@/helpers/damage-helper';
+  
+  import alert from '@/ux-components/alert/alert.vue';
+  
+  export default {
+    name: 'two-identical-ymm-vehicle-alert',
+    components: {
+      alert,
+    },
+    inject: ['vehicleFromLookup'],
+    computed: {
+      header() {
+        return (
+          this.getCmsContent('AlertMatchedTwoIdenticalYMMVehicleWidget', 'HeadlineText')
+            .replaceAll('{custom:damage}', getDamageString())
+        );
+      },
+      body() {
+        let year = '';
+        let make = '';
+        let model = '';
+        let style = '';
+  
+        if (this.vehicleFromLookup) {
+          year = this.vehicleFromLookup.year;
+          make = this.vehicleFromLookup.make;
+          model = this.vehicleFromLookup.model;
+          style = this.vehicleFromLookup.style;
+        }
+  
+        return (
+          this.getCmsContent('AlertMatchedTwoIdenticalYMMVehicleWidget', 'BodyText')
+            .replaceAll('{custom:damage}', getDamageString())
+            .replaceAll('{custom:vinlookupYear}', year)
+            .replaceAll('{custom:vinlookupMake}', make)
+            .replaceAll('{custom:vinlookupModel}', model)
+            .replaceAll('{custom:vinlookupStyle}', style)
+        );
+      },
+    },
+  };
+  </script>
+  

src/layouts/vin-lookup/vin-lookup-alerts/vehicle-not-matched-alert/vehicle-not-matched-alert.vue

@@ -29,13 +29,11 @@ export default {
       let year = '';
       let make = '';
       let model = '';      
-      let style = '';
 
       if (this.vehicleFromLookup) {
         year = this.vehicleFromLookup.year;
         make = this.vehicleFromLookup.make;
         model = this.vehicleFromLookup.model;        
-        style = this.vehicleFromLookup.style;
       }
 
       return (
@@ -44,7 +42,6 @@ export default {
           .replaceAll('{custom:vinlookupYear}', year)
           .replaceAll('{custom:vinlookupMake}', make)
           .replaceAll('{custom:vinlookupModel}', model)          
-          .replaceAll('{custom:vinlookupStyle}', style)
       );
     },
   },

src/layouts/vin-lookup/vin-lookup-alerts/vin-lookup-alerts.spec.js

@@ -54,4 +54,18 @@ describe('vin-lookup-alerts.vue', () => {
     expect(vehicleNotFoundAlert).toEqual(null);
     expect(vehicleNotMatchedAlert).toBeVisible();
   });
+  test('TwoIdenticalYMMVehicleAlert is displayed on the screen', () => {
+    getDamageString.mockImplementation(() => 'Mock Damage String');
+    mountOptions.props = {
+      activeAlertType: vehicleLookupAlertTypes.TWO_IDENTICAL_YMM_MATCHED,
+    };
+    mountOptions.global.provide = {
+      vehicleFromLookup: {},
+    };
+
+    const { queryByRole } = render(VinLookupAlertsComponent, mountOptions);    
+    const twoIdenticalYMMVehicleAlert = queryByRole('alert', { name: 'two-identical-ymm-vehicle-alert' });
+    
+    expect(twoIdenticalYMMVehicleAlert).toBeVisible();
+  });
 });

src/layouts/vin-lookup/vin-lookup-alerts/vin-lookup-alerts.vue

@@ -6,6 +6,9 @@
     <vehicleNotFoundAlert
       v-if="isVehicleNotFoundVisible"
     />
+    <twoIdenticalYMMVehicleAlert
+      v-if="isTwoIdenticalYMMVehicleFoundVisible"
+    />
     <vehicleNotMatchedAlert
       v-else-if="isVehicleNotMatchedVisible"
     />
@@ -13,14 +16,17 @@
 </template>
 <script>
 import vehicleLookupAlertTypes from '@/constants/vehicle-lookup-alert-types';
-import vehicleNotFoundAlert from './vehicle-not-found-alert/vehicle-not-found-alert.vue';
+import vehicleNotFoundAlert from '@/layouts/vin-lookup/vin-lookup-alerts/vehicle-not-found-alert/vehicle-not-found-alert';
-import vehicleNotMatchedAlert from './vehicle-not-matched-alert/vehicle-not-matched-alert.vue';
+import vehicleNotMatchedAlert from '@/layouts/vin-lookup/vin-lookup-alerts/vehicle-not-matched-alert/vehicle-not-matched-alert';
+import twoIdenticalYMMVehicleAlert from '@/layouts/vin-lookup/vin-lookup-alerts/two-identical-ymm-vehicle-alert/two-identical-ymm-vehicle-alert'
+
 
 export default {
   name: 'vin-lookup-alerts',
   components: {
     vehicleNotFoundAlert,
     vehicleNotMatchedAlert,
+    twoIdenticalYMMVehicleAlert,
   },
   props: {
     activeAlertType: {
@@ -39,6 +45,9 @@ export default {
     isVehicleNotMatchedVisible() {
       return this.activeAlertType === vehicleLookupAlertTypes.NOT_MATCHED;
     },
+    isTwoIdenticalYMMVehicleFoundVisible(){
+      return this.activeAlertType === vehicleLookupAlertTypes.TWO_IDENTICAL_YMM_MATCHED;
+    },
     wrapperCssClass() {
       return {
         'mb-5': this.activeAlertType !== null,

src/layouts/vin-lookup/vin-lookup.vue

@@ -86,6 +86,7 @@ export default {
       needToLookupVehicle: true,
       vehicleFromLookup: null,
       vin: null,
+      forwardButtonCarStyle:"",
     };
   },
   provide() {
@@ -116,6 +117,11 @@ export default {
         this.vehicleFromLookup !== null
         && this.vehicleFromLookup.carId !== this.mainStore.vehicle.carId
       );
+    },
+    isTwoIdenticalYMMVehicleFound(){
+      const vinYmmFound = `${this.vehicleFromLookup.year} ${this.vehicleFromLookup.make} ${this.vehicleFromLookup.model}`;
+      const vinYmmExpected = `${this.mainStore.order.vehicle.year} ${this.mainStore.order.vehicle.make} ${this.mainStore.order.vehicle.model}`;
+      return(vinYmmFound.toLowerCase()==vinYmmExpected.toLowerCase());
     }
   },
   methods: {
@@ -153,9 +159,16 @@ export default {
       }
 
       if (this.needToLookupVehicle && this.isCarIdDifferentFromTheStore) {
-        this.activeVehicleLookupAlertType = vehicleLookupAlertTypes.NOT_MATCHED;
+        if(this.isTwoIdenticalYMMVehicleFound){
+          this.activeVehicleLookupAlertType = vehicleLookupAlertTypes.TWO_IDENTICAL_YMM_MATCHED;
+          this.forwardButtonCarStyle = this.vehicleFromLookup.style;
+        }
+        else{
+          this.activeVehicleLookupAlertType = vehicleLookupAlertTypes.NOT_MATCHED;
+        }
         
-        const vehicleYearMakeModelStyle = `${this.vehicleFromLookup.year} ${this.vehicleFromLookup.make} ${this.vehicleFromLookup.model} ${this.vehicleFromLookup.style}`;
+
+        const vehicleYearMakeModelStyle = `${this.vehicleFromLookup.year} ${this.vehicleFromLookup.make} ${this.vehicleFromLookup.model} ${this.forwardButtonCarStyle}`;
         this.$refs.siteFooter.updateButtonText(`Continue with ${vehicleYearMakeModelStyle}`);
         this.$refs.siteFooter.removeLoader();