Merge branch 'develop' into feature/SSR-135

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 '@/layouts/license-plate-lookup/license-plate-lookup-alerts/license-plate-lookup-alerts.vue';
 
 jest.mock('@/helpers/damage-helper');
 
@@ -34,12 +34,12 @@ describe('license-plate-lookup-alerts.vue', () => {
 
         // Act
         const { queryByRole } = render(LicensePlateLookupAlertsComponent, mountOptions);
-        const VehicleNotFoundAlert = queryByRole('alert', { name: 'vehicle-not-found-alert' });
+        const vehicleNotFoundAlert = queryByRole('alert', { name: 'vehicle-not-found-alert' });
-        const VehicleNotMatchedAlert = queryByRole('alert', { name: 'vehicle-not-matched-alert'});
+        const vehicleNotMatchedAlert = queryByRole('alert', { name: 'vehicle-not-matched-alert'});
 
         // Assert
-        expect(VehicleNotFoundAlert).toBeVisible();
+        expect(vehicleNotFoundAlert).toBeVisible();
-        expect(VehicleNotMatchedAlert).toEqual(null);
+        expect(vehicleNotMatchedAlert).toEqual(null);
     });
 
     test('VehicleNotMatchedAlert is displayed on the screen', () => {
@@ -51,13 +51,11 @@ describe('license-plate-lookup-alerts.vue', () => {
 
         // Act
         const { queryByRole } = render(LicensePlateLookupAlertsComponent, mountOptions);
-        const VehicleNotFoundAlert = queryByRole('alert', { name: 'vehicle-not-found-alert' });
+        const vehicleNotFoundAlert = queryByRole('alert', { name: 'vehicle-not-found-alert' });
-        const VehicleNotMatchedAlert = queryByRole('alert', { name: 'vehicle-not-matched-alert'});
+        const vehicleNotMatchedAlert = queryByRole('alert', { name: 'vehicle-not-matched-alert'});
 
         // Assert
-        expect(VehicleNotMatchedAlert).toBeVisible();
+        expect(vehicleNotMatchedAlert).toBeVisible();
-        expect(VehicleNotFoundAlert).toEqual(null);
+        expect(vehicleNotFoundAlert).toEqual(null);
     });
-
-
 })

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

@@ -13,8 +13,8 @@
   </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 vehicleNotFoundAlert from './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';
+  import vehicleNotMatchedAlert from './vehicle-not-matched-alert/vehicle-not-matched-alert.vue';
   
   export default {
     name: 'license-plate-lookup-alerts',
@@ -47,3 +47,4 @@
     },
   };
   </script>
+  

src/layouts/license-plate-lookup/license-plate-lookup-alerts/vehicle-not-found-alert/vehicle-not-found-alert.vue

@@ -1,7 +1,7 @@
 <template>
     <alert
-      alert-class="alert-danger"
+      alertClass="alert-danger"
-      cms-widget-name="AlertVinNotFoundWidget"
+      cmsWidgetName="AlertVinNotFoundWidget"
       id="vehicle-not-found-alert"
       aria-label="vehicle-not-found-alert"
     />

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

@@ -1,10 +1,10 @@
 <template>
     <alert
-      alert-class="alert-warning"
+      alertClass="alert-warning"
-      cms-widget-name="AlertMatchedDifferentVehicleWidget"
+      cmsWidgetName="AlertMatchedDifferentVehicleWidget"
-      :manual-copy="body"
+      :manualCopy="body"
-      :manual-headline="header"
+      :manualHeadline="header"
-      aria-label="vehicle-not-matched-alert"
+          aria-label="vehicle-not-matched-alert"
     />
   </template>
   <script>

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 };
-  }  
+}

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

@@ -13,11 +13,23 @@
         <licensePlateLookupAlerts
           :activeAlertType="activeVehicleLookupAlertType"
         />
-        <licensePlateQuestion
+        <textboxQuestion
-          v-model="licensePlate"/>
+          cmsWidgetName="LicensePlateNumberQuestionWidget"
-        <zipQuestion
+          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,12 +43,13 @@
 <script>
 // Import Supporting Files
 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';
+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';
@@ -46,10 +59,13 @@ 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.SERVICE_ZIP_FORMAT));
+
 export default {
   name: 'license-plate-lookup',
   mixins: [baseFormMixin],
@@ -60,9 +76,7 @@ export default {
     siteSubHeader,
     vehicleBanner,
     textboxQuestion,
-    licensePlateQuestion,
+    licensePlateLookupAlerts,
-    zipQuestion,
-    licensePlateLookupAlerts
   },
   setup() {
     const mainStore = useMainStore();
@@ -116,7 +130,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;
@@ -137,26 +151,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;
     },

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

@@ -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>
-  

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

@@ -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>
-  

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: 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;