From 546915e39cdf8da6f68ef647ff9756f5fb79386c Mon Sep 17 00:00:00 2001
From: Kroell <Katie.Kroell@safelite.com>
Date: Thu, 12 Jan 2023 09:48:00 -0500
Subject: [PATCH 1/8] moved file to correct folder

---
 .../license-plate-lookup-alerts.spec.js                         | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)
 rename src/layouts/license-plate-lookup/{ => license-plate-lookup-alerts}/license-plate-lookup-alerts.spec.js (97%)

diff --git a/src/layouts/license-plate-lookup/license-plate-lookup-alerts.spec.js b/src/layouts/license-plate-lookup/license-plate-lookup-alerts/license-plate-lookup-alerts.spec.js
similarity index 97%
rename from src/layouts/license-plate-lookup/license-plate-lookup-alerts.spec.js
rename to src/layouts/license-plate-lookup/license-plate-lookup-alerts/license-plate-lookup-alerts.spec.js
index 781079ab..0c1c6aec 100644
--- a/src/layouts/license-plate-lookup/license-plate-lookup-alerts.spec.js
+++ b/src/layouts/license-plate-lookup/license-plate-lookup-alerts/license-plate-lookup-alerts.spec.js
@@ -4,7 +4,7 @@ import vehicleLookupAlertTypes from '@/constants/vehicle-lookup-alert-types';
 import { RouterLinkStub } from '@vue/test-utils';
 import { render } from '@testing-library/vue';
 import '@testing-library/jest-dom';
-import LicensePlateLookupAlertsComponent from './license-plate-lookup-alerts/license-plate-lookup-alerts.vue';
+import LicensePlateLookupAlertsComponent from './license-plate-lookup-alerts.vue';
 
 jest.mock('@/helpers/damage-helper');
 

From be1c078d58e31f57ee0a2a53d62e3a8f070b64cb Mon Sep 17 00:00:00 2001
From: Kroell <Katie.Kroell@safelite.com>
Date: Thu, 12 Jan 2023 09:59:11 -0500
Subject: [PATCH 2/8] moved lookupVinByPlate to store

---
 .../license-plate-lookup.vue                  | 21 +------------------
 src/store/index.js                            | 21 +++++++++++++++++++
 2 files changed, 22 insertions(+), 20 deletions(-)

diff --git a/src/layouts/license-plate-lookup/license-plate-lookup.vue b/src/layouts/license-plate-lookup/license-plate-lookup.vue
index dc0de3f8..e99fe78f 100644
--- a/src/layouts/license-plate-lookup/license-plate-lookup.vue
+++ b/src/layouts/license-plate-lookup/license-plate-lookup.vue
@@ -137,26 +137,7 @@ export default {
 
       // Continue
     },
-    async lookupVinByPlate(licensePlate) {
-      try {
-        const response = await globalMethods.callHttpClient({
-          method: endpoints.LookupVinByPlate.method,
-          endpoint: endpoints.LookupVinByPlate.url,
-          payload: {
-            licensePlate,
-            licenseState: "IL" // hard coded until Welcome Page is complete and license state can be pulled from store
-          },
-        });
-
-        return response;
-      } catch (responseError) {
-        return {
-          error: {
-            status: responseError.status,
-          },
-        };
-      }
-    },
+    
     resetActiveAlert() {
       this.activeVehicleLookupAlertType = null;
     },
diff --git a/src/store/index.js b/src/store/index.js
index 25ecd268..d112db60 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -232,6 +232,27 @@ export const useMainStore = defineStore({
         });
       },
 
+      async lookupVinByPlate(licensePlate) {
+      try {
+        const response = await globalMethods.callHttpClient({
+          method: endpoints.LookupVinByPlate.method,
+          endpoint: endpoints.LookupVinByPlate.url,
+          payload: {
+            licensePlate,
+            licenseState: "IL" // hard coded until Welcome Page is complete and license state can be pulled from store
+          },
+        });
+
+        return response;
+      } catch (responseError) {
+        return {
+          error: {
+            status: responseError.status,
+          },
+        };
+      }
+      },
+
       // PartsOrQuestions API Actions
       async getPartsOrQuestions() {
         const vehicle = this.vehicle;

From cc9311de211875f0711ae3086c0dff6b84e39af8 Mon Sep 17 00:00:00 2001
From: Kroell <Katie.Kroell@safelite.com>
Date: Thu, 12 Jan 2023 11:36:58 -0500
Subject: [PATCH 3/8] change to calling lookupVinByPlate method

---
 src/layouts/license-plate-lookup/license-plate-lookup.vue | 3 +--
 src/store/index.js                                        | 2 +-
 2 files changed, 2 insertions(+), 3 deletions(-)

diff --git a/src/layouts/license-plate-lookup/license-plate-lookup.vue b/src/layouts/license-plate-lookup/license-plate-lookup.vue
index e99fe78f..a5d3a422 100644
--- a/src/layouts/license-plate-lookup/license-plate-lookup.vue
+++ b/src/layouts/license-plate-lookup/license-plate-lookup.vue
@@ -33,7 +33,6 @@
 import { computed } from 'vue';
 import { endpoints } from '@/constants/endpoints';
 import vehicleLookupAlertTypes from '@/constants/vehicle-lookup-alert-types';
-import globalMethods from '@/global-methods';
 import { fetchCmsContentForPage } from '@/helpers/cms-content-helper';
 import { settleAllPromises } from '@/helpers/layout-helper';
 import { useMainStore } from '@/store';
@@ -116,7 +115,7 @@ export default {
       this.resetActiveAlert();
 
       // NOTE: If form is not valid, this method is not called when 'Continue' button is clicked
-      const vehicleLookupResponse = await this.lookupVinByPlate(this.licensePlate);
+      const vehicleLookupResponse = await this.mainStore.lookupVinByPlate(this.licensePlate);
 
       if (vehicleLookupResponse.error) {
         this.activeVehicleLookupAlertType = vehicleLookupAlertTypes.NOT_FOUND;
diff --git a/src/store/index.js b/src/store/index.js
index d112db60..d5f1bbf3 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -238,7 +238,7 @@ export const useMainStore = defineStore({
           method: endpoints.LookupVinByPlate.method,
           endpoint: endpoints.LookupVinByPlate.url,
           payload: {
-            licensePlate,
+            licensePlate: licensePlate,
             licenseState: "IL" // hard coded until Welcome Page is complete and license state can be pulled from store
           },
         });

From 8370fc0b4663f83829013e7031cf5ef43b7f9284 Mon Sep 17 00:00:00 2001
From: Kroell <Katie.Kroell@safelite.com>
Date: Thu, 12 Jan 2023 13:12:26 -0500
Subject: [PATCH 4/8] removed license-plate-question and zip-question
 components

---
 .../license-plate-lookup.vue                  | 34 ++++++++++----
 .../license-plate-question.vue                | 43 ------------------
 .../zip-question/zip-question.vue             | 44 -------------------
 src/store/index.js                            |  2 +-
 4 files changed, 26 insertions(+), 97 deletions(-)
 delete mode 100644 src/layouts/license-plate-lookup/license-plate-question/license-plate-question.vue
 delete mode 100644 src/layouts/license-plate-lookup/zip-question/zip-question.vue

diff --git a/src/layouts/license-plate-lookup/license-plate-lookup.vue b/src/layouts/license-plate-lookup/license-plate-lookup.vue
index a5d3a422..33e202fc 100644
--- a/src/layouts/license-plate-lookup/license-plate-lookup.vue
+++ b/src/layouts/license-plate-lookup/license-plate-lookup.vue
@@ -13,11 +13,23 @@
         <licensePlateLookupAlerts
           :activeAlertType="activeVehicleLookupAlertType"
         />
-        <licensePlateQuestion
-          v-model="licensePlate"/>
-        <zipQuestion
+        <textboxQuestion
+          cmsWidgetName="LicensePlateNumberQuestionWidget"
+          v-model="licensePlate"
+          isRequired 
+          disableAutoFill
+          inputId="license-plate-question"
+          validationRules="license-plate-required"
+        />
+        <textboxQuestion
+          cmsWidgetName="RegistrationZipQuestionWidget"  
           v-model="registrationZipCode"
-          class="mt-4" />
+          isRequired
+          disableAutoFill
+          inputId="zip"
+          validationRules="zip-required|zip-format"
+          class="mt-4"
+        />
         <siteFooter
           :isForwardActionDisabled="!meta.valid"
           cms-widget-name="SiteFooterWidget"
@@ -31,11 +43,13 @@
 <script>
 // Import Supporting Files
 import { computed } from 'vue';
-import { endpoints } from '@/constants/endpoints';
 import vehicleLookupAlertTypes from '@/constants/vehicle-lookup-alert-types';
 import { fetchCmsContentForPage } from '@/helpers/cms-content-helper';
 import { settleAllPromises } from '@/helpers/layout-helper';
 import { useMainStore } from '@/store';
+import { defineRule } from 'vee-validate';
+import { regex, required } from '@/helpers/validation-rules';
+import { errorMessages } from '@/constants/error-messages';
 
 // Import Component
 import baseFormMixin from '@/mixins/base-form-mixin';
@@ -45,10 +59,14 @@ import siteHeader from '@/common-components/site-header/site-header.vue';
 import siteSubHeader from '@/common-components/site-sub-header/site-sub-header.vue';
 import vehicleBanner from '@/common-components/vehicle-banner/vehicle-banner.vue';
 import textboxQuestion from '@/common-components/textbox-question/textbox-question.vue';
-import licensePlateQuestion from '@/layouts/license-plate-lookup/license-plate-question/license-plate-question.vue';
-import zipQuestion from '@/layouts/license-plate-lookup/zip-question/zip-question.vue';
 import licensePlateLookupAlerts from '@/layouts/license-plate-lookup/license-plate-lookup-alerts/license-plate-lookup-alerts.vue';
 
+// Define Validation Rules
+defineRule("license-plate-required", required(errorMessages.LICENSE_PLATE_REQUIRED));
+defineRule("zip-required", required(errorMessages.REGISTRATION_ZIP_REQUIRED));
+defineRule("zip-format", regex(/(^\d{5}$)|(^\d{5}-\d{4}$)/, errorMessages.ZIP_FORMAT));
+
+
 export default {
   name: 'license-plate-lookup',
   mixins: [baseFormMixin],
@@ -59,8 +77,6 @@ export default {
     siteSubHeader,
     vehicleBanner,
     textboxQuestion,
-    licensePlateQuestion,
-    zipQuestion,
     licensePlateLookupAlerts
   },
   setup() {
diff --git a/src/layouts/license-plate-lookup/license-plate-question/license-plate-question.vue b/src/layouts/license-plate-lookup/license-plate-question/license-plate-question.vue
deleted file mode 100644
index 3757518d..00000000
--- a/src/layouts/license-plate-lookup/license-plate-question/license-plate-question.vue
+++ /dev/null
@@ -1,43 +0,0 @@
-<template>
-    <textboxQuestion
-        inputId="license-plate-question"
-        cmsWidgetName="LicensePlateNumberQuestionWidget"
-        v-model="licensePlate"
-        isRequired 
-        disableAutoFill
-        validationRules="license-plate-required"
-    />
-</template>
-<script>
-  // Import Other Supporting File(s)
-  import { defineRule } from 'vee-validate';
-  import { required } from '@/helpers/validation-rules';
-  import { errorMessages } from '@/constants/error-messages';
-  
-  // Import Component(s)
-  import textboxQuestion from '@/common-components/textbox-question/textbox-question.vue';
-  
-defineRule("license-plate-required", required(errorMessages.LICENSE_PLATE_REQUIRED));
-  
-export default {
-    name: 'license-plate-question',
-    props: {
-      modelValue: String,
-    },
-    emits: ['update:modelValue'],
-    components: {
-      textboxQuestion,
-    },
-    computed: {
-      licensePlate: {
-        get() {
-          return this.modelValue;
-        },
-        set(newValue) {
-          this.$emit('update:modelValue', newValue);
-        },
-      },
-    },
-  };
-  </script>
-  
\ No newline at end of file
diff --git a/src/layouts/license-plate-lookup/zip-question/zip-question.vue b/src/layouts/license-plate-lookup/zip-question/zip-question.vue
deleted file mode 100644
index 4af9a5b2..00000000
--- a/src/layouts/license-plate-lookup/zip-question/zip-question.vue
+++ /dev/null
@@ -1,44 +0,0 @@
-<template>
-    <textboxQuestion
-        inputId="zip"
-        cmsWidgetName="RegistrationZipQuestionWidget"
-        v-model="registrationZipCode"
-        isRequired
-        disableAutoFill
-        validationRules="zip-required|zip-format"
-    />
-</template>
-<script>
-// Import Other Supporting File(s)
-import { defineRule } from 'vee-validate';
-import { regex, required } from '@/helpers/validation-rules';
-import { errorMessages } from '@/constants/error-messages';
-  
-// Import Component(s)
-import textboxQuestion from '@/common-components/textbox-question/textbox-question.vue';
-  
-defineRule("zip-required", required(errorMessages.REGISTRATION_ZIP_REQUIRED));
-defineRule("zip-format", regex(/(^\d{5}$)|(^\d{5}-\d{4}$)/, errorMessages.ZIP_FORMAT));
-  
-export default {
-    name: 'zip-question',
-    props: {
-      modelValue: String,
-    },
-    emits: ['update:modelValue'],
-    components: {
-      textboxQuestion,
-    },
-    computed: {
-      registrationZipCode: {
-        get() {
-          return this.modelValue;
-        },
-        set(newValue) {
-          this.$emit('update:modelValue', newValue);
-        },
-      },
-    },
-  };
-  </script>
-  
\ No newline at end of file
diff --git a/src/store/index.js b/src/store/index.js
index d5f1bbf3..bbb214e8 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -239,7 +239,7 @@ export const useMainStore = defineStore({
           endpoint: endpoints.LookupVinByPlate.url,
           payload: {
             licensePlate: licensePlate,
-            licenseState: "IL" // hard coded until Welcome Page is complete and license state can be pulled from store
+            licenseState: "IL", // hard coded until Welcome Page is complete and license state can be pulled from store
           },
         });
 

From d3d78c088ec87b1831480e8505228e305724f01a Mon Sep 17 00:00:00 2001
From: Kroell <Katie.Kroell@safelite.com>
Date: Thu, 12 Jan 2023 14:59:22 -0500
Subject: [PATCH 5/8] removed folders for alerts - all alerts are within
 license-plate-lookup.vue

---
 .../license-plate-lookup-alerts.vue           | 49 ------------------
 .../vehicle-not-found-alert.vue               | 27 ----------
 .../vehicle-not-matched-alert.vue             | 50 -------------------
 3 files changed, 126 deletions(-)
 delete mode 100644 src/layouts/license-plate-lookup/license-plate-lookup-alerts/license-plate-lookup-alerts.vue
 delete mode 100644 src/layouts/license-plate-lookup/license-plate-lookup-alerts/vehicle-not-found-alert/vehicle-not-found-alert.vue
 delete mode 100644 src/layouts/license-plate-lookup/license-plate-lookup-alerts/vehicle-not-matched-alert/vehicle-not-matched-alert.vue

diff --git a/src/layouts/license-plate-lookup/license-plate-lookup-alerts/license-plate-lookup-alerts.vue b/src/layouts/license-plate-lookup/license-plate-lookup-alerts/license-plate-lookup-alerts.vue
deleted file mode 100644
index 42056eb9..00000000
--- a/src/layouts/license-plate-lookup/license-plate-lookup-alerts/license-plate-lookup-alerts.vue
+++ /dev/null
@@ -1,49 +0,0 @@
-<template>
-    <div
-      id="vin-lookup-alerts-wrapper"
-      :class="wrapperCssClass"
-    >
-      <vehicleNotFoundAlert
-        v-if="isVehicleNotFoundVisible"
-      />
-      <vehicleNotMatchedAlert
-        v-else-if="isVehicleNotMatchedVisible"
-      />
-    </div>
-  </template>
-  <script>
-  import vehicleLookupAlertTypes from '@/constants/vehicle-lookup-alert-types';
-  import vehicleNotFoundAlert from '@/layouts/license-plate-lookup/license-plate-lookup-alerts/vehicle-not-found-alert/vehicle-not-found-alert.vue';
-  import vehicleNotMatchedAlert from '@/layouts/license-plate-lookup/license-plate-lookup-alerts/vehicle-not-matched-alert/vehicle-not-matched-alert.vue';
-  
-  export default {
-    name: 'license-plate-lookup-alerts',
-    components: {
-      vehicleNotFoundAlert,
-      vehicleNotMatchedAlert,
-    },
-    props: {
-      activeAlertType: {
-        type: String,
-        validator(value) {
-          const acceptedValues = [null];
-          acceptedValues.push(...Object.values(vehicleLookupAlertTypes));
-          return acceptedValues.includes(value);
-        },
-      },
-    },
-    computed: {
-      isVehicleNotFoundVisible() {
-        return this.activeAlertType === vehicleLookupAlertTypes.NOT_FOUND;
-      },
-      isVehicleNotMatchedVisible() {
-        return this.activeAlertType === vehicleLookupAlertTypes.NOT_MATCHED;
-      },
-      wrapperCssClass() {
-        return {
-          'mb-5': this.activeAlertType !== null,
-        };
-      },
-    },
-  };
-  </script>
\ No newline at end of file
diff --git a/src/layouts/license-plate-lookup/license-plate-lookup-alerts/vehicle-not-found-alert/vehicle-not-found-alert.vue b/src/layouts/license-plate-lookup/license-plate-lookup-alerts/vehicle-not-found-alert/vehicle-not-found-alert.vue
deleted file mode 100644
index 805983ab..00000000
--- a/src/layouts/license-plate-lookup/license-plate-lookup-alerts/vehicle-not-found-alert/vehicle-not-found-alert.vue
+++ /dev/null
@@ -1,27 +0,0 @@
-<template>
-    <alert
-      alert-class="alert-danger"
-      cms-widget-name="AlertVinNotFoundWidget"
-      id="vehicle-not-found-alert"
-      aria-label="vehicle-not-found-alert"
-    />
-  </template>
-  <script>
-  import alert from '@/ux-components/alert/alert.vue';
-  
-  export default {
-    name: 'vehicle-not-found-alert',
-    components: {
-      alert,
-    },
-  };
-  </script>
-  <style>
-  /**
-    Override wrong margin-bottom rule in the Alert component.
-  */
-  #vehicle-not-found-alert p:last-of-type {
-    margin-bottom: 0 !important;
-  }
-  </style>
-  
\ No newline at end of file
diff --git a/src/layouts/license-plate-lookup/license-plate-lookup-alerts/vehicle-not-matched-alert/vehicle-not-matched-alert.vue b/src/layouts/license-plate-lookup/license-plate-lookup-alerts/vehicle-not-matched-alert/vehicle-not-matched-alert.vue
deleted file mode 100644
index 8b1d6878..00000000
--- a/src/layouts/license-plate-lookup/license-plate-lookup-alerts/vehicle-not-matched-alert/vehicle-not-matched-alert.vue
+++ /dev/null
@@ -1,50 +0,0 @@
-<template>
-    <alert
-      alert-class="alert-warning"
-      cms-widget-name="AlertMatchedDifferentVehicleWidget"
-      :manual-copy="body"
-      :manual-headline="header"
-      aria-label="vehicle-not-matched-alert"
-    />
-  </template>
-  <script>
-  import { getDamageString } from '@/helpers/damage-helper';
-  
-  import alert from '@/ux-components/alert/alert.vue';
-  
-  export default {
-    name: 'vehicle-not-matched-alert',
-    components: {
-      alert,
-    },
-    inject: ['vehicleFromLookup'],
-    computed: {
-      header() {
-        return (
-          this.getCmsContent('AlertMatchedDifferentVehicleWidget', 'HeadlineText')
-            .replaceAll('{custom:damage}', getDamageString())
-        );
-      },
-      body() {
-        let year = '';
-        let make = '';
-        let model = '';
-  
-        if (this.vehicleFromLookup) {
-          year = this.vehicleFromLookup.year;
-          make = this.vehicleFromLookup.make;
-          model = this.vehicleFromLookup.model;
-        }
-  
-        return (
-          this.getCmsContent('AlertMatchedDifferentVehicleWidget', 'BodyText')
-            .replaceAll('{custom:damage}', getDamageString())
-            .replaceAll('{custom:vinlookupYear}', year)
-            .replaceAll('{custom:vinlookupMake}', make)
-            .replaceAll('{custom:vinlookupModel}', model)
-        );
-      },
-    },
-  };
-  </script>
-  
\ No newline at end of file

From fadc90f9a37fe2a616fccd499715c8331455d49b Mon Sep 17 00:00:00 2001
From: Kroell <Katie.Kroell@safelite.com>
Date: Thu, 12 Jan 2023 14:59:58 -0500
Subject: [PATCH 6/8] moved all unit tests to license-plate-lookup.spec.js

---
 .../license-plate-lookup-alerts.spec.js       | 63 -------------------
 .../license-plate-lookup.spec.js              | 36 ++---------
 .../license-plate-lookup.vue                  | 54 ++++++++++++++--
 3 files changed, 54 insertions(+), 99 deletions(-)
 delete mode 100644 src/layouts/license-plate-lookup/license-plate-lookup-alerts/license-plate-lookup-alerts.spec.js

diff --git a/src/layouts/license-plate-lookup/license-plate-lookup-alerts/license-plate-lookup-alerts.spec.js b/src/layouts/license-plate-lookup/license-plate-lookup-alerts/license-plate-lookup-alerts.spec.js
deleted file mode 100644
index 0c1c6aec..00000000
--- a/src/layouts/license-plate-lookup/license-plate-lookup-alerts/license-plate-lookup-alerts.spec.js
+++ /dev/null
@@ -1,63 +0,0 @@
-/* eslint-env jest */
-import { getDamageString } from '@/helpers/damage-helper';
-import vehicleLookupAlertTypes from '@/constants/vehicle-lookup-alert-types';
-import { RouterLinkStub } from '@vue/test-utils';
-import { render } from '@testing-library/vue';
-import '@testing-library/jest-dom';
-import LicensePlateLookupAlertsComponent from './license-plate-lookup-alerts.vue';
-
-jest.mock('@/helpers/damage-helper');
-
-const mountOptions = {
-    global: {
-        stubs: {
-            RouterLink: RouterLinkStub,
-        },
-        mixins: [
-            {
-                methods: {
-                    getCmsContent: jest.fn(() => ''),
-                    getFooterInfoBoxHeight: jest.fn(() => 80),
-                    cssClassNameForCmsWidget: jest.fn(() => 'widget-name-mock-class'),
-                },
-            },
-        ],
-    },
-};
-
-describe('license-plate-lookup-alerts.vue', () => {
-    test('VehicleNotFoundAlert is displayed on the screen', () => {
-        // Arrange
-        mountOptions.props = {
-            activeAlertType: vehicleLookupAlertTypes.NOT_FOUND,
-        };
-
-        // Act
-        const { queryByRole } = render(LicensePlateLookupAlertsComponent, mountOptions);
-        const VehicleNotFoundAlert = queryByRole('alert', { name: 'vehicle-not-found-alert' });
-        const VehicleNotMatchedAlert = queryByRole('alert', { name: 'vehicle-not-matched-alert'});
-
-        // Assert
-        expect(VehicleNotFoundAlert).toBeVisible();
-        expect(VehicleNotMatchedAlert).toEqual(null);
-    });
-
-    test('VehicleNotMatchedAlert is displayed on the screen', () => {
-        // Arrange
-        getDamageString.mockImplementation(() => 'Mock Damage String');
-        mountOptions.props = {
-            activeAlertType: vehicleLookupAlertTypes.NOT_MATCHED,
-        };
-
-        // Act
-        const { queryByRole } = render(LicensePlateLookupAlertsComponent, mountOptions);
-        const VehicleNotFoundAlert = queryByRole('alert', { name: 'vehicle-not-found-alert' });
-        const VehicleNotMatchedAlert = queryByRole('alert', { name: 'vehicle-not-matched-alert'});
-
-        // Assert
-        expect(VehicleNotMatchedAlert).toBeVisible();
-        expect(VehicleNotFoundAlert).toEqual(null);
-    });
-
-
-})
\ No newline at end of file
diff --git a/src/layouts/license-plate-lookup/license-plate-lookup.spec.js b/src/layouts/license-plate-lookup/license-plate-lookup.spec.js
index 959a6451..784e75d3 100644
--- a/src/layouts/license-plate-lookup/license-plate-lookup.spec.js
+++ b/src/layouts/license-plate-lookup/license-plate-lookup.spec.js
@@ -1,6 +1,5 @@
 // Components
 import licensePlateLookup from "@/layouts/license-plate-lookup/license-plate-lookup.vue";
-import licensePlateQuestion from "@/layouts/license-plate-lookup/license-plate-question/license-plate-question.vue";
 
 // Supporting files
 import { shallowMount } from '@vue/test-utils';
@@ -22,16 +21,6 @@ jest.mock("@/helpers/cms-content-helper", () => ({
     fetchCmsContentForPage: jest.fn(),
 }));
 
-// Mock damage helper
-jest.mock("@/helpers/damage-helper", () => ({
-    isGlassAvailableForCarId: () => {
-        return false;
-    },
-    getDamageString: () => {
-        return "damage string";
-    },
-}));
-
 describe("license-plate-lookup.vue", () => {
     test("Vehicle make set, arePagePrerequisitesValid should be true", () => {
         //Arrange
@@ -97,8 +86,6 @@ describe("navigation", () => {
   });
 
 function setupMocks({
-    licensePlateQuestionCmsContent = {},
-    licensePlateQuestionInitialData = {},
     pageHeaderWidgetHeaderText = {},
     pageFooterWidgetCmsContent = {},
     mountOptionsMockData = {},
@@ -111,7 +98,6 @@ function setupMocks({
     const apiResponses = {
       cmsContent: {
         SiteSubHeaderWidget: pageHeaderWidgetHeaderText,
-        LicensePlateQuestion: licensePlateQuestionCmsContent,
         VehicleBannerWidget: {
           GenericVehicleImage:
             `${applicationConfig.ISS_DEV_CMS_DOMAIN}/images/default-source/default-album/blurred-image.jpg`,
@@ -123,15 +109,12 @@ function setupMocks({
         SiteFooterWidget: pageFooterWidgetCmsContent,
         
       },
-      licensePlateQuestionInitialData: licensePlateQuestionInitialData,
     };
   
     mountOptionsMockData = {
         ...mountOptionsMockData,
         router: {
             navigate: jest.fn(),
-            navigateWithoutSaving: jest.fn(),
-            navigateWithSaving: jest.fn(),
         },
         store: {
             getters: {
@@ -146,27 +129,16 @@ function setupMocks({
         },
     };
 
-    
     const apiPromise = Promise.resolve(apiResponses);
   
     settleAllPromises.mockImplementation(() => apiPromise);
     fetchCmsContentForPage.mockImplementation(() => Promise.resolve());
-  
-    //Mock make question methods
-    licensePlateQuestion.methods = {
-      loadInitialData: jest.fn(),
-      initializeComponent: jest.fn(),
-    };
-  
+    
     const mountOptions = getMountOptions(mountOptionsMockData);
-    
+
     const wrapper = shallowMount(licensePlateLookup, mountOptions);
-  
-    const licensePlateQuestionWrapper = wrapper.findComponent({ name: "licensePlateQuestion" });
-    licensePlateQuestionWrapper.vm.initializeComponent =
-      licensePlateQuestion.methods.initializeComponent;
-    
+
     wrapper.vm.setCmsContent = baseMixin.methods.setCmsContent;
     
     return { wrapper, apiPromise };
-  }  
\ No newline at end of file
+}
\ No newline at end of file
diff --git a/src/layouts/license-plate-lookup/license-plate-lookup.vue b/src/layouts/license-plate-lookup/license-plate-lookup.vue
index 33e202fc..32765c7d 100644
--- a/src/layouts/license-plate-lookup/license-plate-lookup.vue
+++ b/src/layouts/license-plate-lookup/license-plate-lookup.vue
@@ -10,8 +10,22 @@
         :display-generic-vehicle-image="false" />
       <siteSubHeader cms-widget-name="SiteSubHeaderWidget" />
       <div class="fade-on-route-transition sub-container make-tall mt-5">
-        <licensePlateLookupAlerts
+        <alert
+          v-if="isVehicleNotFoundVisible"
+          cmsWidgetName="AlertVinNotFoundWidget"
           :activeAlertType="activeVehicleLookupAlertType"
+          alertClass="alert-danger"
+          class="mb-5"
+          ref="vehicleNotFoundAlert"
+        />
+        <alert
+          v-if="isVehicleNotMatchedVisible"
+          cmsWidgetName="AlertMatchedDifferentVehicleWidget"
+          :activeAlertType="activeVehicleLookupAlertType"
+          :manualHeadline="header"
+          :manualCopy="body"
+          alertClass="alert-warning"
+          class="mb-5"
         />
         <textboxQuestion
           cmsWidgetName="LicensePlateNumberQuestionWidget"
@@ -50,6 +64,7 @@ import { useMainStore } from '@/store';
 import { defineRule } from 'vee-validate';
 import { regex, required } from '@/helpers/validation-rules';
 import { errorMessages } from '@/constants/error-messages';
+import { getDamageString } from "@/helpers/damage-helper";
 
 // Import Component
 import baseFormMixin from '@/mixins/base-form-mixin';
@@ -59,7 +74,7 @@ import siteHeader from '@/common-components/site-header/site-header.vue';
 import siteSubHeader from '@/common-components/site-sub-header/site-sub-header.vue';
 import vehicleBanner from '@/common-components/vehicle-banner/vehicle-banner.vue';
 import textboxQuestion from '@/common-components/textbox-question/textbox-question.vue';
-import licensePlateLookupAlerts from '@/layouts/license-plate-lookup/license-plate-lookup-alerts/license-plate-lookup-alerts.vue';
+import alert from '@/ux-components/alert/alert.vue';
 
 // Define Validation Rules
 defineRule("license-plate-required", required(errorMessages.LICENSE_PLATE_REQUIRED));
@@ -77,7 +92,7 @@ export default {
     siteSubHeader,
     vehicleBanner,
     textboxQuestion,
-    licensePlateLookupAlerts
+    alert,
   },
   setup() {
     const mainStore = useMainStore();
@@ -90,6 +105,8 @@ export default {
       vehicleFromLookup: null,
       licensePlate: null, 
       registrationZipCode: null,
+      isVehicleNotFoundVisible: false,
+      isVehicleNotMatchedVisible: false,
    };
   },
   provide() {
@@ -134,6 +151,7 @@ export default {
       const vehicleLookupResponse = await this.mainStore.lookupVinByPlate(this.licensePlate);
 
       if (vehicleLookupResponse.error) {
+        this.isVehicleNotFoundVisible = true;
         this.activeVehicleLookupAlertType = vehicleLookupAlertTypes.NOT_FOUND;
         this.resetVehicleFromLookup();
         this.$refs.siteFooter.removeLoader();
@@ -142,8 +160,9 @@ export default {
 
       this.vehicleFromLookup = vehicleLookupResponse.data.vehicle;
       if (this.vehicleFromLookup.carId !== this.mainStore.vehicle.carId) {
+        this.isVehicleNotMatchedVisible = true;
         this.activeVehicleLookupAlertType = vehicleLookupAlertTypes.NOT_MATCHED;
-
+        
         const vehicleYearMakeModel = `${this.vehicleFromLookup.year} ${this.vehicleFromLookup.make} ${this.vehicleFromLookup.model}`;
 
         this.$refs.siteFooter.updateButtonText(`Continue with ${vehicleYearMakeModel}`);
@@ -161,5 +180,32 @@ export default {
     },
     resetDependentState() {},
   },
+  computed: {
+      header() {
+        return (
+          this.getCmsContent('AlertMatchedDifferentVehicleWidget', 'HeadlineText')
+            .replaceAll('{custom:damage}', getDamageString())
+        );
+      },
+      body() {
+        let year = '';
+        let make = '';
+        let model = '';
+  
+        if (this.vehicleFromLookup) {
+          year = this.vehicleFromLookup.year;
+          make = this.vehicleFromLookup.make;
+          model = this.vehicleFromLookup.model;
+        }
+  
+        return (
+          this.getCmsContent('AlertMatchedDifferentVehicleWidget', 'BodyText')
+            .replaceAll('{custom:damage}', getDamageString())
+            .replaceAll('{custom:vinlookupYear}', year)
+            .replaceAll('{custom:vinlookupMake}', make)
+            .replaceAll('{custom:vinlookupModel}', model)
+        );
+      },
+    },
 };
 </script>

From 5d1faae9012e042bb889deebef65359540a00d95 Mon Sep 17 00:00:00 2001
From: Kroell <Katie.Kroell@safelite.com>
Date: Fri, 13 Jan 2023 11:39:31 -0500
Subject: [PATCH 7/8] refactoring to license-plate-lookup based on team convo

---
 .../license-plate-lookup-alerts.spec.js       |  0
 .../license-plate-lookup-alerts.vue           | 50 +++++++++++++++
 .../vehicle-not-found-alert.vue               | 26 ++++++++
 .../vehicle-not-matched-alert.vue             | 49 +++++++++++++++
 .../license-plate-lookup.vue                  | 61 +++----------------
 5 files changed, 132 insertions(+), 54 deletions(-)
 create mode 100644 src/layouts/license-plate-lookup/license-plate-lookup-alerts/license-plate-lookup-alerts.spec.js
 create mode 100644 src/layouts/license-plate-lookup/license-plate-lookup-alerts/license-plate-lookup-alerts.vue
 create mode 100644 src/layouts/license-plate-lookup/license-plate-lookup-alerts/vehicle-not-found-alert/vehicle-not-found-alert.vue
 create mode 100644 src/layouts/license-plate-lookup/license-plate-lookup-alerts/vehicle-not-matched-alert/vehicle-not-matched-alert.vue

diff --git a/src/layouts/license-plate-lookup/license-plate-lookup-alerts/license-plate-lookup-alerts.spec.js b/src/layouts/license-plate-lookup/license-plate-lookup-alerts/license-plate-lookup-alerts.spec.js
new file mode 100644
index 00000000..e69de29b
diff --git a/src/layouts/license-plate-lookup/license-plate-lookup-alerts/license-plate-lookup-alerts.vue b/src/layouts/license-plate-lookup/license-plate-lookup-alerts/license-plate-lookup-alerts.vue
new file mode 100644
index 00000000..69f83b9e
--- /dev/null
+++ b/src/layouts/license-plate-lookup/license-plate-lookup-alerts/license-plate-lookup-alerts.vue
@@ -0,0 +1,50 @@
+<template>
+    <div
+      id="vin-lookup-alerts-wrapper"
+      :class="wrapperCssClass"
+    >
+      <vehicleNotFoundAlert
+        v-if="isVehicleNotFoundVisible"
+      />
+      <vehicleNotMatchedAlert
+        v-else-if="isVehicleNotMatchedVisible"
+      />
+    </div>
+  </template>
+  <script>
+  import vehicleLookupAlertTypes from '@/constants/vehicle-lookup-alert-types';
+  import vehicleNotFoundAlert from './vehicle-not-found-alert/vehicle-not-found-alert.vue';
+  import vehicleNotMatchedAlert from './vehicle-not-matched-alert/vehicle-not-matched-alert.vue';
+  
+  export default {
+    name: 'license-plate-lookup-alerts',
+    components: {
+      vehicleNotFoundAlert,
+      vehicleNotMatchedAlert,
+    },
+    props: {
+      activeAlertType: {
+        type: String,
+        validator(value) {
+          const acceptedValues = [null];
+          acceptedValues.push(...Object.values(vehicleLookupAlertTypes));
+          return acceptedValues.includes(value);
+        },
+      },
+    },
+    computed: {
+      isVehicleNotFoundVisible() {
+        return this.activeAlertType === vehicleLookupAlertTypes.NOT_FOUND;
+      },
+      isVehicleNotMatchedVisible() {
+        return this.activeAlertType === vehicleLookupAlertTypes.NOT_MATCHED;
+      },
+      wrapperCssClass() {
+        return {
+          'mb-5': this.activeAlertType !== null,
+        };
+      },
+    },
+  };
+  </script>
+  
\ No newline at end of file
diff --git a/src/layouts/license-plate-lookup/license-plate-lookup-alerts/vehicle-not-found-alert/vehicle-not-found-alert.vue b/src/layouts/license-plate-lookup/license-plate-lookup-alerts/vehicle-not-found-alert/vehicle-not-found-alert.vue
new file mode 100644
index 00000000..d7cf121e
--- /dev/null
+++ b/src/layouts/license-plate-lookup/license-plate-lookup-alerts/vehicle-not-found-alert/vehicle-not-found-alert.vue
@@ -0,0 +1,26 @@
+<template>
+    <alert
+      alertClass="alert-danger"
+      cmsWidgetName="AlertVinNotFoundWidget"
+      id="vehicle-not-found-alert"
+    />
+  </template>
+  <script>
+  import alert from '@/ux-components/alert/alert.vue';
+  
+  export default {
+    name: 'vehicle-not-found-alert',
+    components: {
+      alert,
+    },
+  };
+  </script>
+  <style>
+  /**
+    Override wrong margin-bottom rule in the Alert component.
+  */
+  #vehicle-not-found-alert p:last-of-type {
+    margin-bottom: 0 !important;
+  }
+  </style>
+  
\ No newline at end of file
diff --git a/src/layouts/license-plate-lookup/license-plate-lookup-alerts/vehicle-not-matched-alert/vehicle-not-matched-alert.vue b/src/layouts/license-plate-lookup/license-plate-lookup-alerts/vehicle-not-matched-alert/vehicle-not-matched-alert.vue
new file mode 100644
index 00000000..13c5e188
--- /dev/null
+++ b/src/layouts/license-plate-lookup/license-plate-lookup-alerts/vehicle-not-matched-alert/vehicle-not-matched-alert.vue
@@ -0,0 +1,49 @@
+<template>
+    <alert
+      alertClass="alert-warning"
+      cmsWidgetName="AlertMatchedDifferentVehicleWidget"
+      :manualCopy="body"
+      :manualHeadline="header"
+    />
+  </template>
+  <script>
+  import { getDamageString } from '@/helpers/damage-helper';
+  
+  import alert from '@/ux-components/alert/alert.vue';
+  
+  export default {
+    name: 'vehicle-not-matched-alert',
+    components: {
+      alert,
+    },
+    inject: ['vehicleFromLookup'],
+    computed: {
+      header() {
+        return (
+          this.getCmsContent('AlertMatchedDifferentVehicleWidget', 'HeadlineText')
+            .replaceAll('{custom:damage}', getDamageString())
+        );
+      },
+      body() {
+        let year = '';
+        let make = '';
+        let model = '';
+  
+        if (this.vehicleFromLookup) {
+          year = this.vehicleFromLookup.year;
+          make = this.vehicleFromLookup.make;
+          model = this.vehicleFromLookup.model;
+        }
+  
+        return (
+          this.getCmsContent('AlertMatchedDifferentVehicleWidget', 'BodyText')
+            .replaceAll('{custom:damage}', getDamageString())
+            .replaceAll('{custom:vinlookupYear}', year)
+            .replaceAll('{custom:vinlookupMake}', make)
+            .replaceAll('{custom:vinlookupModel}', model)
+        );
+      },
+    },
+  };
+  </script>
+  
\ No newline at end of file
diff --git a/src/layouts/license-plate-lookup/license-plate-lookup.vue b/src/layouts/license-plate-lookup/license-plate-lookup.vue
index 32765c7d..7d417eee 100644
--- a/src/layouts/license-plate-lookup/license-plate-lookup.vue
+++ b/src/layouts/license-plate-lookup/license-plate-lookup.vue
@@ -10,22 +10,8 @@
         :display-generic-vehicle-image="false" />
       <siteSubHeader cms-widget-name="SiteSubHeaderWidget" />
       <div class="fade-on-route-transition sub-container make-tall mt-5">
-        <alert
-          v-if="isVehicleNotFoundVisible"
-          cmsWidgetName="AlertVinNotFoundWidget"
+        <licensePlateLookupAlerts
           :activeAlertType="activeVehicleLookupAlertType"
-          alertClass="alert-danger"
-          class="mb-5"
-          ref="vehicleNotFoundAlert"
-        />
-        <alert
-          v-if="isVehicleNotMatchedVisible"
-          cmsWidgetName="AlertMatchedDifferentVehicleWidget"
-          :activeAlertType="activeVehicleLookupAlertType"
-          :manualHeadline="header"
-          :manualCopy="body"
-          alertClass="alert-warning"
-          class="mb-5"
         />
         <textboxQuestion
           cmsWidgetName="LicensePlateNumberQuestionWidget"
@@ -61,10 +47,9 @@ import vehicleLookupAlertTypes from '@/constants/vehicle-lookup-alert-types';
 import { fetchCmsContentForPage } from '@/helpers/cms-content-helper';
 import { settleAllPromises } from '@/helpers/layout-helper';
 import { useMainStore } from '@/store';
-import { defineRule } from 'vee-validate';
-import { regex, required } from '@/helpers/validation-rules';
-import { errorMessages } from '@/constants/error-messages';
-import { getDamageString } from "@/helpers/damage-helper";
+import { errorMessages } from "@/constants/error-messages";
+import { required, regex } from "@/helpers/validation-rules";
+import { defineRule } from "vee-validate";
 
 // Import Component
 import baseFormMixin from '@/mixins/base-form-mixin';
@@ -74,13 +59,12 @@ import siteHeader from '@/common-components/site-header/site-header.vue';
 import siteSubHeader from '@/common-components/site-sub-header/site-sub-header.vue';
 import vehicleBanner from '@/common-components/vehicle-banner/vehicle-banner.vue';
 import textboxQuestion from '@/common-components/textbox-question/textbox-question.vue';
-import alert from '@/ux-components/alert/alert.vue';
+import licensePlateLookupAlerts from '@/layouts/license-plate-lookup/license-plate-lookup-alerts/license-plate-lookup-alerts.vue';
 
 // Define Validation Rules
 defineRule("license-plate-required", required(errorMessages.LICENSE_PLATE_REQUIRED));
 defineRule("zip-required", required(errorMessages.REGISTRATION_ZIP_REQUIRED));
-defineRule("zip-format", regex(/(^\d{5}$)|(^\d{5}-\d{4}$)/, errorMessages.ZIP_FORMAT));
-
+defineRule("zip-format", regex(/(^\d{5}$)|(^\d{5}-\d{4}$)/, errorMessages.SERVICE_ZIP_FORMAT));
 
 export default {
   name: 'license-plate-lookup',
@@ -92,7 +76,7 @@ export default {
     siteSubHeader,
     vehicleBanner,
     textboxQuestion,
-    alert,
+    licensePlateLookupAlerts,
   },
   setup() {
     const mainStore = useMainStore();
@@ -105,8 +89,6 @@ export default {
       vehicleFromLookup: null,
       licensePlate: null, 
       registrationZipCode: null,
-      isVehicleNotFoundVisible: false,
-      isVehicleNotMatchedVisible: false,
    };
   },
   provide() {
@@ -151,7 +133,6 @@ export default {
       const vehicleLookupResponse = await this.mainStore.lookupVinByPlate(this.licensePlate);
 
       if (vehicleLookupResponse.error) {
-        this.isVehicleNotFoundVisible = true;
         this.activeVehicleLookupAlertType = vehicleLookupAlertTypes.NOT_FOUND;
         this.resetVehicleFromLookup();
         this.$refs.siteFooter.removeLoader();
@@ -160,7 +141,6 @@ export default {
 
       this.vehicleFromLookup = vehicleLookupResponse.data.vehicle;
       if (this.vehicleFromLookup.carId !== this.mainStore.vehicle.carId) {
-        this.isVehicleNotMatchedVisible = true;
         this.activeVehicleLookupAlertType = vehicleLookupAlertTypes.NOT_MATCHED;
         
         const vehicleYearMakeModel = `${this.vehicleFromLookup.year} ${this.vehicleFromLookup.make} ${this.vehicleFromLookup.model}`;
@@ -180,32 +160,5 @@ export default {
     },
     resetDependentState() {},
   },
-  computed: {
-      header() {
-        return (
-          this.getCmsContent('AlertMatchedDifferentVehicleWidget', 'HeadlineText')
-            .replaceAll('{custom:damage}', getDamageString())
-        );
-      },
-      body() {
-        let year = '';
-        let make = '';
-        let model = '';
-  
-        if (this.vehicleFromLookup) {
-          year = this.vehicleFromLookup.year;
-          make = this.vehicleFromLookup.make;
-          model = this.vehicleFromLookup.model;
-        }
-  
-        return (
-          this.getCmsContent('AlertMatchedDifferentVehicleWidget', 'BodyText')
-            .replaceAll('{custom:damage}', getDamageString())
-            .replaceAll('{custom:vinlookupYear}', year)
-            .replaceAll('{custom:vinlookupMake}', make)
-            .replaceAll('{custom:vinlookupModel}', model)
-        );
-      },
-    },
 };
 </script>

From 7be1bd9b2420f04b61e6f4042dafcdf118205aa2 Mon Sep 17 00:00:00 2001
From: Kroell <Katie.Kroell@safelite.com>
Date: Fri, 13 Jan 2023 11:56:44 -0500
Subject: [PATCH 8/8] unit tests for alerts on license-plate-lookup

---
 .../license-plate-lookup-alerts.spec.js       | 61 +++++++++++++++++++
 .../vehicle-not-found-alert.vue               |  1 +
 .../vehicle-not-matched-alert.vue             |  1 +
 3 files changed, 63 insertions(+)

diff --git a/src/layouts/license-plate-lookup/license-plate-lookup-alerts/license-plate-lookup-alerts.spec.js b/src/layouts/license-plate-lookup/license-plate-lookup-alerts/license-plate-lookup-alerts.spec.js
index e69de29b..fbeac8a5 100644
--- a/src/layouts/license-plate-lookup/license-plate-lookup-alerts/license-plate-lookup-alerts.spec.js
+++ b/src/layouts/license-plate-lookup/license-plate-lookup-alerts/license-plate-lookup-alerts.spec.js
@@ -0,0 +1,61 @@
+/* eslint-env jest */
+import { getDamageString } from '@/helpers/damage-helper';
+import vehicleLookupAlertTypes from '@/constants/vehicle-lookup-alert-types';
+import { RouterLinkStub } from '@vue/test-utils';
+import { render } from '@testing-library/vue';
+import '@testing-library/jest-dom';
+import LicensePlateLookupAlertsComponent from '@/layouts/license-plate-lookup/license-plate-lookup-alerts/license-plate-lookup-alerts.vue';
+
+jest.mock('@/helpers/damage-helper');
+
+const mountOptions = {
+    global: {
+        stubs: {
+            RouterLink: RouterLinkStub,
+        },
+        mixins: [
+            {
+                methods: {
+                    getCmsContent: jest.fn(() => ''),
+                    getFooterInfoBoxHeight: jest.fn(() => 80),
+                    cssClassNameForCmsWidget: jest.fn(() => 'widget-name-mock-class'),
+                },
+            },
+        ],
+    },
+};
+
+describe('license-plate-lookup-alerts.vue', () => {
+    test('VehicleNotFoundAlert is displayed on the screen', () => {
+        // Arrange
+        mountOptions.props = {
+            activeAlertType: vehicleLookupAlertTypes.NOT_FOUND,
+        };
+
+        // Act
+        const { queryByRole } = render(LicensePlateLookupAlertsComponent, mountOptions);
+        const vehicleNotFoundAlert = queryByRole('alert', { name: 'vehicle-not-found-alert' });
+        const vehicleNotMatchedAlert = queryByRole('alert', { name: 'vehicle-not-matched-alert'});
+
+        // Assert
+        expect(vehicleNotFoundAlert).toBeVisible();
+        expect(vehicleNotMatchedAlert).toEqual(null);
+    });
+
+    test('VehicleNotMatchedAlert is displayed on the screen', () => {
+        // Arrange
+        getDamageString.mockImplementation(() => 'Mock Damage String');
+        mountOptions.props = {
+            activeAlertType: vehicleLookupAlertTypes.NOT_MATCHED,
+        };
+
+        // Act
+        const { queryByRole } = render(LicensePlateLookupAlertsComponent, mountOptions);
+        const vehicleNotFoundAlert = queryByRole('alert', { name: 'vehicle-not-found-alert' });
+        const vehicleNotMatchedAlert = queryByRole('alert', { name: 'vehicle-not-matched-alert'});
+
+        // Assert
+        expect(vehicleNotMatchedAlert).toBeVisible();
+        expect(vehicleNotFoundAlert).toEqual(null);
+    });
+})
\ No newline at end of file
diff --git a/src/layouts/license-plate-lookup/license-plate-lookup-alerts/vehicle-not-found-alert/vehicle-not-found-alert.vue b/src/layouts/license-plate-lookup/license-plate-lookup-alerts/vehicle-not-found-alert/vehicle-not-found-alert.vue
index d7cf121e..1d258f06 100644
--- a/src/layouts/license-plate-lookup/license-plate-lookup-alerts/vehicle-not-found-alert/vehicle-not-found-alert.vue
+++ b/src/layouts/license-plate-lookup/license-plate-lookup-alerts/vehicle-not-found-alert/vehicle-not-found-alert.vue
@@ -3,6 +3,7 @@
       alertClass="alert-danger"
       cmsWidgetName="AlertVinNotFoundWidget"
       id="vehicle-not-found-alert"
+      aria-label="vehicle-not-found-alert"
     />
   </template>
   <script>
diff --git a/src/layouts/license-plate-lookup/license-plate-lookup-alerts/vehicle-not-matched-alert/vehicle-not-matched-alert.vue b/src/layouts/license-plate-lookup/license-plate-lookup-alerts/vehicle-not-matched-alert/vehicle-not-matched-alert.vue
index 13c5e188..9c837fbf 100644
--- a/src/layouts/license-plate-lookup/license-plate-lookup-alerts/vehicle-not-matched-alert/vehicle-not-matched-alert.vue
+++ b/src/layouts/license-plate-lookup/license-plate-lookup-alerts/vehicle-not-matched-alert/vehicle-not-matched-alert.vue
@@ -4,6 +4,7 @@
       cmsWidgetName="AlertMatchedDifferentVehicleWidget"
       :manualCopy="body"
       :manualHeadline="header"
+          aria-label="vehicle-not-matched-alert"
     />
   </template>
   <script>