CSR-520 loading modal

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

@@ -1,6 +1,14 @@
 <template>
   <Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm" v-slot="{ meta }">
     <div class="container-fluid shadow rounded-3 p-2 position-relative make-tall px-5">
+      <loadingModal :showCloseButton=false :clickOutCloses=false ref="loadingModal">
+        <template v-slot:body>
+          Please wait...
+        </template>
+        <template v-slot:subtext>
+          This process can take up 20 seconds.
+        </template>
+      </loadingModal>
       <funnelHeader cmsWidgetName="FunnelHeaderWidget" />
       <vehicleBanner cmsWidgetName="VehicleBannerWidget" :displayGenericVehicleImage="false" />
       <funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" />
@@ -44,7 +52,6 @@ import funnelSubHeader from "@/common-components/funnel-sub-header/funnel-sub-he
 import alert from "@/ux-components/alert/alert";
 import textboxQuestion from "@/common-components/textbox-question/textbox-question";
 import loadingModal from '@/common-components/loading-modal/loading-modal.vue';
-
 // Supporting files
 import { 
   fetchCmsContentForPage 
@@ -75,7 +82,6 @@ import {
    Form,
     defineRule,
 } from "vee-validate";
-
 // DEFINE VALIDATION RULES
 defineRule(
   "license-plate-required",
@@ -98,7 +104,6 @@ export default {
   async beforeRouteEnter(to, from, next) {
     // Call APIs
     const cmsContentPromise = fetchCmsContentForPage(to.query.fmgPage);
-
     // Settle promises and get results
     const promiseResultMap = [
       {
@@ -218,7 +223,6 @@ export default {
         this.isCarIdDifferent = false;
         return;
       }
-
       const vinLookup = await this.lookupVin(
         this.licensePlate,
         zipValidation.data.state
@@ -228,10 +232,8 @@ export default {
         this.isCarIdDifferent = false;
         return;
       });
-
       this.isCarIdDifferent =
         vinLookup.data.vehicle.carId !== store.getters.vehicle.carId;
-
       if (
         this.isCarIdDifferent &&
         vinLookup.data.vehicle.carId !== this.previouslyEnteredCarId
@@ -247,13 +249,11 @@ export default {
         this.$refs.funnelFooter.removeLoader();
         return;
       }
-
       this.updateCustomerInfo(
         vinLookup.data.vin,
         vinLookup.data.vehicle,
         zipValidation.data.state
       );
-
       this.navigateForward();
     },
     navigateForward() {
@@ -267,6 +267,7 @@ export default {
         );
         return;
       } else {
+        this.$refs.loadingModal.showModal();
         this.$router.navigateAfterSaveToHeritageFunnel(this.$route);
         return;
       }
@@ -275,15 +276,6 @@ export default {
       return baseMixin.methods.dispatchStoreAction(storeActions.VALIDATE_ZIP, {
         zip,
       });
-    components: {
-        Form,
-        funnelHeader,
-        vehicleBanner,
-        funnelSubHeader,
-        textboxQuestion,
-        alert,
-        funnelFooter,
-        loadingModal,
     },
     lookupVin(plate, state) {
       return baseMixin.methods.dispatchStoreAction(
@@ -337,6 +329,7 @@ export default {
     textboxQuestion,
     alert,
     funnelFooter,
+    loadingModal,
   },
 };
-</script>
+</script>