license-plate-lookup alerts, back and continue button routing/methods

src/constants/endpoints.js

@@ -59,6 +59,10 @@ const endpoints = {
     url: "/vehicle/api/v1/vehicle/lookup",
     method: "POST",
   },
+  LookupVinByPlate: {
+    url: "/vehicle/api/v1/vehicle/lookup-vin-by-plate",
+    method: "POST",
+  },
   InitializeSession: {
       url: "/analytics/api/v1/analytics/initialize",
       method: "POST",

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

@@ -3,24 +3,24 @@
       id="vin-lookup-alerts-wrapper"
       :class="wrapperCssClass"
     >
-      <!-- <VehicleNotFoundAlert
+      <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';
+  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,
+      VehicleNotFoundAlert,
+      VehicleNotMatchedAlert,
     },
     props: {
       activeAlertType: {

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

@@ -0,0 +1,26 @@
+<template>
+    <Alert
+      alert-class="alert-danger"
+      cms-widget-name="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>
+  

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

@@ -0,0 +1,49 @@
+<template>
+    <Alert
+      alert-class="alert-warning"
+      cms-widget-name="AlertMatchedDifferentVehicleWidget"
+      :manual-copy="body"
+      :manual-headline="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>
+  

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

@@ -1,7 +1,8 @@
 <template>  
   <VeeValidateForm
     @submit="onSubmit"
-    @invalid-submit="onInvalidSubmit" >
+    @invalid-submit="onInvalidSubmit" 
+    v-slot="{ meta }">
     <div class="page-container-grouped-styles overflow-auto">
       <siteHeader cms-widget-name="SiteHeaderWidget" />
       <vehicleBanner
@@ -9,6 +10,9 @@
         :display-generic-vehicle-image="false" />
       <siteSubHeader cms-widget-name="SiteSubHeaderWidget" />
       <div class="fade-on-route-transition sub-container make-tall">
+        <license-plate-lookup-alerts
+          :activeAlertType="activeVehicleLookupAlertType"
+        />
         <div class="mt-5">
           <license-plate-question/>
         </div>
@@ -16,27 +20,29 @@
           <zip-question
             v-model="registrationZipCode"/>
         </div>
-        <!-- <alert
-          cmsWidgetName="AlertVinNotFoundWidget"
-          alertClass="alert-danger"
-          :isDismissable="false" /> -->
         <siteFooter
           cms-widget-name="SiteFooterWidget"
-          :is-forward-action-disabled="isForwardActionDisabled"
+          :is-forward-action-disabled="!meta.valid"
           @back-clicked="backButtonAction"
-          @forward-clicked="forwardButtonAction" />
+          @forward-clicked="forwardButtonAction"
+          ref="siteFooter" />
       </div>
     </div>
   </VeeValidateForm>
 </template>
 <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 { Form } from 'vee-validate';
-import BaseFormMixin from '@/mixins/base-form-mixin.js';
+import { useMainStore } from '@/store';
 
 // Import Component
+import BaseFormMixin from '@/mixins/base-form-mixin';
+import { Form } from 'vee-validate';
 import siteFooter from '@/common-components/site-footer/site-footer.vue';
 import siteHeader from '@/common-components/site-header/site-header.vue';
 import siteSubHeader from '@/common-components/site-sub-header/site-sub-header.vue';
@@ -44,6 +50,7 @@ import vehicleBanner from '@/common-components/vehicle-banner/vehicle-banner.vue
 import textboxQuestion from '../../common-components/textbox-question/textbox-question.vue';
 import LicensePlateQuestion from './license-plate-question/license-plate-question.vue';
 import ZipQuestion from './zip-question/zip-question.vue';
+import LicensePlateLookupAlerts from './license-plate-lookup-alerts/license-plate-lookup-alerts.vue';
 
 export default {
   name: 'license-plate-lookup',
@@ -55,15 +62,26 @@ export default {
     siteSubHeader,
     vehicleBanner,
     textboxQuestion,
-    alert,
     LicensePlateQuestion,
-    ZipQuestion,   
+    ZipQuestion,
+    LicensePlateLookupAlerts,   
+  },
+  setup() {
+    const mainStore = useMainStore();
   },
   data() {
     return {
-        registrationZipCode: null,
+      activeVehicleLookupAlertType: null,
+      vehicleFromLookup: null,
+      licensePlate: null, 
+      registrationZipCode: null,
    };
   },
+  provide() {
+    return {
+      vehicleFromLookup: computed(() => this.vehicleFromLookup),
+    };
+  },
   async beforeRouteEnter(to, from, next) {
     const cmsContentPromise = fetchCmsContentForPage(to.query.issPage);
 
@@ -81,14 +99,6 @@ export default {
       vm.setCmsContent(resultMap.cmsContent);      
     });
   },
-  props: {
-    validationRules: String,
-  },
-  computed: {
-    isForwardActionDisabled() {
-      return true;
-    }
-  },
   methods: {
     arePagePrerequisiteValid() {      
       if (this.mainStore.order.vehicle.carId) {
@@ -102,13 +112,57 @@ export default {
        */
       this.$router.navigate(this.navigationScenarios.CLICKED_BACK, this.$route);
     },
-    forwardButtonAction() {
-      return true;
-    },
-    resetDependentState() {
+    async forwardButtonAction() {
+      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);
 
+      if (vehicleLookupResponse.error) {
+        this.activeVehicleLookupAlertType = vehicleLookupAlertTypes.NOT_FOUND;
+        this.resetVehicleFromLookup();
+        this.$refs.siteFooter.removeLoader();
+        return;
+      }
+
+      this.vehicleFromLookup = vehicleLookupResponse.data;
+      if (this.vehicleFromLookup.carId !== this.mainStore.vehicle.carId) {
+        this.activeVehicleLookupAlertType = vehicleLookupAlertTypes.NOT_MATCHED;
+
+        const vehicleYearMakeModel = `${this.vehicleFromLookup.year} ${this.vehicleFromLookup.make} ${this.vehicleFromLookup.model}`;
+
+        this.$refs.siteFooter.updateButtonText(`Continue with ${vehicleYearMakeModel}`);
+        this.$refs.siteFooter.removeLoader();
+      }
+
+      // Continue
+    },
+    async lookupVinByPlate(licensePlate) {
+      try {
+        const response = await globalMethods.callHttpClient({
+          method: endpoints.LookupVinByPlate.method,
+          endpoint: endpoints.LookupVinByPlate.url,
+          payload: {
+            licensePlate,
+          },
+        });
+
+        return response;
+      } catch (responseError) {
+        return {
+          error: {
+            status: responseError.status,
+          },
+        };
+      }
+    },
+    resetActiveAlert() {
+      this.activeVehicleLookupAlertType = null;
+    },
+    resetVehicleFromLookup() {
+      this.vehicleFromLookup = null;
+    },
+    resetDependentState() {},
   },
 };
 </script>

src/router/router-constants/routing-table.js

@@ -103,6 +103,15 @@ const routingTable = function(store) {
           },          
       ],
     },
+    {
+      issPageValue: issPageValues.LICENSE_PLATE_LOOKUP,
+      maps: [
+          {
+              scenario: navigationScenarios.CLICKED_BACK,
+              destinationIssPageValue: issPageValues.VEHICLE_LOOKUP,
+          },          
+      ],
+    },
     {
       issPageValue: issPageValues.PART_QUESTIONS,
       maps: [