Merge branch 'develop' into feature/digital/SSR-254

# Conflicts:
#	src/constants/vehicle-lookup-alert-types.js
#	src/layouts/coverage-statement/coverage-statement.vue
#	src/layouts/vin-lookup/vin-lookup-alerts/vin-lookup-alerts.vue
#	src/layouts/vin-lookup/vin-lookup.vue

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

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

src/digital-components/button-question/button-question.vue

@@ -229,7 +229,7 @@ export default {
 
     .overflow-scroll {
         // Height will be determined by overall height of content above list
-        height: calc(100% - 383px);
+        height: calc(100% - 400px);
         overflow-x: hidden !important;
         -webkit-overflow-scrolling: touch;
     }

src/iss-components/questions-page-layout/questions-page-layout.vue

@@ -4,7 +4,7 @@
         <siteHeader cmsWidgetName="SiteHeaderWidget" />
         <vehicleBanner class="mb-3" cmsWidgetName="VehicleBannerWidget" :displayGenericVehicleImage="false" />
         <siteSubHeader cmsWidgetName="SiteSubHeaderWidget" />
-        <div class="fade-on-route-transition sub-container make-tall">
+        <div class="fade-on-route-transition sub-container overflow-scroll">
             <alert
                 ref="alertFewMoreQuestions"
                 cmsWidgetName="alertWidget"
@@ -95,6 +95,10 @@ export default {
 </script>
 
 <style lang="scss">
+ .overflow-scroll {       
+        height: calc(100% - 368px);
+        overflow-x: hidden !important;
+ }
 .questions-page {
     .question-text {
         margin-bottom: 0.5rem;

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: {
@@ -171,8 +182,14 @@ export default {
                 if (this.isCarIdDifferent && carFound.carId !== this.previouslyEnteredCarId) {
                     // Display Alert
                     this.previouslyEnteredCarId = carFound.carId;
-                    this.customAlertData.vehicleInfo = carFound;
+                    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: {
@@ -313,7 +350,7 @@ export default {
 <style lang="scss">
 
 .overflow-scroll {    
-    height: calc(100% - 353px);   
+    height: calc(100% - 368px);   
     overflow-X: hidden !important;
    
 }

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

@@ -5,7 +5,7 @@
     ref="theForm"
     v-slot="{ meta }"
   >
-    <div class="page-container-grouped-styles overflow-auto">
+    <div class="page-container-grouped-styles ">
       <siteHeader cmsWidgetName="SiteHeaderWidget" />
       <vehicleBanner
         class="mb-3"
@@ -14,7 +14,7 @@
       />
       <siteSubHeader cmsWidgetName="SiteSubHeaderWidget" />
 
-      <div class="px-5">
+      <div class="px-5 ">
         <alert
           cmsWidgetName="FoundMultipleVehicles"
           ref="alertFoundMultipleVehicles"
@@ -26,7 +26,7 @@
           id="multiple-vehicles-alert"
         />
       </div>
-
+        <div class="overflow-scroll">
       <addressVehiclesQuestion
         ref="addressVehiclesQuestion"
         cmsWidgetName="VehicleConfirmationQuestion"
@@ -54,6 +54,7 @@
         </span>
       </div>
     </div>
+  </div>
     <siteFooter
       cmsWidgetName="SiteFooterWidget"
       :isForwardActionDisabled="!meta.valid"
@@ -270,4 +271,9 @@ export default {
 #multiple-vehicles-alert p {
   margin-bottom: 0 !important; // Overrides extra margin-bottom on alert body text
 }
+.overflow-scroll {    
+    height: calc(100% - 432px);   
+    overflow-X: hidden !important;
+   
+}
 </style>

src/layouts/coverage-statement/coverage-statement.vue

@@ -4,11 +4,11 @@
     @invalidSubmit="onInvalidSubmit"
     v-slot="{ meta }"
   >
-    <div class="page-container-grouped-styles overflow-auto">
+    <div class="page-container-grouped-styles">
       <siteHeader
         cmsWidgetName="SiteHeaderWidget"
       />
-      <div class="fade-on-route-transition sub-container make-tall px-5">
+      <div class="fade-on-route-transition sub-container overflow-scroll  px-5">
         <textBlock
             cmsWidgetName="verifyingCoverageStatement"
             typeStyle="h5"
@@ -141,10 +141,14 @@ export default {
 </script>
 
 <style lang="scss">
-
+.overflow-scroll {    
-// prevents vertical scrollbar from appearing when modal opens
+    height: calc(100% - 168px);   
-.modal {
+    overflow-X: hidden !important;   
-  overflow: hidden;
 }
-
+    ol {
+        margin-left: -1rem;
+        li {
+            margin-bottom: .5rem;
+        }
+    }
 </style>

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

@@ -3,14 +3,14 @@
       @submit="onSubmit"
       @invalid-submit="onInvalidSubmit"
       v-slot="{ meta }">
-    <div class="page-container-grouped-styles overflow-auto">
+    <div class="page-container-grouped-styles">
       <siteHeader cms-widget-name="SiteHeaderWidget" />
       <vehicleBanner
         class="mb-3"
         cms-widget-name="VehicleBannerWidget"
         :display-generic-vehicle-image="false" />
       <siteSubHeader cms-widget-name="SiteSubHeaderWidget" />
-      <div class="fade-on-route-transition sub-container make-tall mt-5 px-5">
+      <div class="fade-on-route-transition sub-container overflow-scroll mt-5 px-5">
         <alert
           ref="alertVinNotFound"
           v-if="displayVinNotFoundAlert"
@@ -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;
@@ -276,6 +313,11 @@ export default {
 </script>
 
 <style>
+
+ .overflow-scroll {       
+        height: calc(100% - 392px);
+        overflow-x: hidden !important;
+ }
 #license-plate-question-wrapper .form-test-error {
   /**
   Override extra margin-bottom in the error message in TextboxQuestion

src/layouts/policy-holder-details/policy-holder-details.vue

@@ -138,7 +138,7 @@ export default {
 </script>
 <style lang="scss">
 .overflow-scroll {    
-    height: calc(100% - 152px);   
+    height: calc(100% - 168px);   
     overflow-X: hidden !important;   
 }
 .alert.alert-warning

src/layouts/vehicle-damage/vehicle-damage.vue

@@ -475,7 +475,7 @@ export default {
 <style lang="scss">
 
 .overflow-scroll {    
-    height: calc(100% - 353px);   
+    height: calc(100% - 368px);   
     overflow-X: hidden !important;   
 }
 </style>

src/layouts/vehicle-lookup/vehicle-lookup.vue

@@ -118,7 +118,7 @@ export default {
 <style lang="scss">
 
 .overflow-scroll {    
-    height: calc(100% - 353px);   
+    height: calc(100% - 368px);   
     overflow-X: hidden !important;   
 }
 </style>

src/layouts/vehicle-parts/vehicle-parts.vue

@@ -8,7 +8,7 @@
                 cmsWidgetName="VehicleBannerWidget"
                 :displayGenericVehicleImage="false" />
             <siteSubHeader ref="siteSubHeader" cmsWidgetName="SiteSubHeaderWidget" />
-            <div class="fade-on-route-transition sub-container make-tall overflow-auto px-5">
+            <div class="fade-on-route-transition sub-container overflow-scroll px-5">
                 <div class="prevent-squish my-5">
                     <div class="row">
                         <div class="col">
@@ -221,3 +221,9 @@ export default {
     },
 };
 </script>
+<style lang="scss">
+ .overflow-scroll {       
+        height: calc(100% - 368px);
+        overflow-x: hidden !important;
+ }
+ </style>

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

@@ -28,14 +28,12 @@ export default {
     body() {
       let year = '';
       let make = '';
-      let model = '';
+      let model = '';      
-      let style = '';
 
       if (this.vehicleFromLookup) {
         year = this.vehicleFromLookup.year;
         make = this.vehicleFromLookup.make;
-        model = this.vehicleFromLookup.model;
+        model = this.vehicleFromLookup.model;        
-        style = this.vehicleFromLookup.style;
       }
 
       return (
@@ -43,8 +41,7 @@ export default {
           .replaceAll('{custom:damage}', getDamageString())
           .replaceAll('{custom:vinlookupYear}', year)
           .replaceAll('{custom:vinlookupMake}', make)
-          .replaceAll('{custom:vinlookupModel}', model)
+          .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"
     />
@@ -16,9 +19,9 @@
 </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 perfectMatchAlert from './perfect-match-alert/perfect-match-alert.vue';
+import twoIdenticalYMMVehicleAlert from '@/layouts/vin-lookup/vin-lookup-alerts/two-identical-ymm-vehicle-alert/two-identical-ymm-vehicle-alert'
 
 
 export default {
@@ -26,7 +29,7 @@ export default {
   components: {
     vehicleNotFoundAlert,
     vehicleNotMatchedAlert,
-    perfectMatchAlert,
+    twoIdenticalYMMVehicleAlert,
   },
   props: {
     activeAlertType: {
@@ -45,8 +48,8 @@ export default {
     isVehicleNotMatchedVisible() {
       return this.activeAlertType === vehicleLookupAlertTypes.NOT_MATCHED;
     },
-    isPerfectMatchVisible() {
+    isTwoIdenticalYMMVehicleFoundVisible(){
-      return this.activeAlertType === vehicleLookupAlertTypes.PERFECT_MATCH;
+      return this.activeAlertType === vehicleLookupAlertTypes.TWO_IDENTICAL_YMM_MATCHED;
     },
     wrapperCssClass() {
       return {

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

@@ -4,7 +4,7 @@
     @invalidSubmit="onInvalidSubmit"
     v-slot="{ meta }"
   >
-    <div class="page-container-grouped-styles overflow-auto">
+    <div class="page-container-grouped-styles ">
       <siteHeader
         cmsWidgetName="SiteHeaderWidget"
       />
@@ -16,16 +16,14 @@
       <siteSubHeader
         cmsWidgetName="SiteSubHeaderWidget"
       />
-      <div class="px-4">
+      <div class="px-4  overflow-scroll ">
-        <div class="fade-on-route-transition sub-container make-tall px-2 mt-5">
+        <div class="fade-on-route-transition sub-container px-2 mt-5">
           <vinLookupAlerts
             :activeAlertType="activeVehicleLookupAlertType"
           />
 
           <vinQuestion
             v-model="vin"
-            :isDisabled="vinPopulatedOnPageLoad"
-            :mask="vinMask"
           />
 
           <vinLocationInformation />
@@ -87,8 +85,8 @@ export default {
       activeVehicleLookupAlertType: null,
       needToLookupVehicle: true,
       vehicleFromLookup: null,
-      vin: this.getVinFromStore(),
+      vin: null,
-      vinPopulatedOnPageLoad: this.getVinFromStore()?.length > 0,
+      forwardButtonCarStyle:"",
     };
   },
   provide() {
@@ -120,23 +118,16 @@ export default {
         && this.vehicleFromLookup.carId !== this.mainStore.vehicle.carId
       );
     },
-    vinMask() {
+    isTwoIdenticalYMMVehicleFound(){
-      if (this.vinPopulatedOnPageLoad) {
+      const vinYmmFound = `${this.vehicleFromLookup.year} ${this.vehicleFromLookup.make} ${this.vehicleFromLookup.model}`;
-          this.activeVehicleLookupAlertType = vehicleLookupAlertTypes.PERFECT_MATCH;
+      const vinYmmExpected = `${this.mainStore.order.vehicle.year} ${this.mainStore.order.vehicle.make} ${this.mainStore.order.vehicle.model}`;
-          const lastSixChars = this.vin.substring(11, this.vin.length);
+      return(vinYmmFound.toLowerCase()==vinYmmExpected.toLowerCase());
-          return `!X!X!X!X!X!X!X!X!X!X!X${lastSixChars}`;
+    }
-      } else {
-          return "XXXXXXXXXXXXXXXXX";
-      }
-    },
   },
   methods: {
     arePagePrerequisiteValid() {
       return true;
     },
-    getVinFromStore() {
-      return this.mainStore.vehicle.vin;
-    },
     backButtonAction() {
       /**
        * this.navigationScenarios comes from base-mixin
@@ -168,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();
 
@@ -198,7 +196,7 @@ export default {
         // navigate() doesn't stop the processing flow
         return;
       }
-      this.activeVehicleLookupAlertType = vehicleLookupAlertTypes.PERFECT_MATCH;
+
       this.mainStore.updateVehicle(this.vehicleFromLookup);
       const partsOrQuestionsResponse = await this.getPartsOrQuestions();
       if (partsOrQuestionsResponse.error) {
@@ -256,3 +254,11 @@ export default {
   },
 };
 </script>
+<style>
+.overflow-scroll {    
+    height: calc(100% - 368px);   
+    overflow-X: hidden !important; 
+}
+
+
+</style>

src/layouts/welcome-page/welcome-page.vue

@@ -335,7 +335,7 @@
 <style lang="scss">
 
 .overflow-scroll {    
-    height: calc(100% - 152px);   
+    height: calc(100% - 165px);   
     overflow-X: hidden !important;   
 }
 .my-2