Merge pull request #398 from Safelite/feature/CSR-520

Feature/csr 520

src/common-components/loading-modal/loading-modal.vue

@@ -0,0 +1,126 @@
+<template>
+  <div v-show="isModalVisible" class="loading-modal-backdrop" v-on:click="canClose" @close="closeModal">
+    <div class="loading-modal">
+    <button v-if="showCloseButton" type="button" class="loading-modal-close" @click="closeModal">x</button>
+      <section class="loading-modal-body">
+        <div class="modal-icon-container text-center">
+            <img class="loader-gif" alt="Loading" src="@/assets/img/loader.gif">
+            <img class="modal-icon" alt="" src="@/assets/img/windshield.png">
+        </div>
+        <div class="text-center fw-bold fs-5 loading-modal-text">
+            <slot name="body">
+                Default text
+            </slot>
+        </div>
+        <div class="text-center fs-5 loading-modal-text">
+            <slot name="subtext">
+                Default subtext
+            </slot>
+        </div>
+       </section>
+    </div>
+   </div>
+</template>
+
+<script>
+  export default {
+    name: 'Modal',
+    data() {
+      return {
+        isModalVisible: false,
+      };
+    },
+    props: {
+        showCloseButton:  {type: Boolean, default: false},
+        clickOutCloses:  {type: Boolean, default: false},
+    },
+    methods: {
+      showModal() {
+        this.isModalVisible = true;
+      },
+      closeModal() {
+        this.isModalVisible = false;
+      },
+      canClose() {
+        this.clickOutCloses ? this.closeModal() : null;
+      }
+    },
+  };
+</script>
+
+<style lang="scss">
+  .loading-modal-backdrop {
+    position: fixed;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    background-color: #e5e5e5;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    z-index: 1050;
+    width: 100vw;
+    height: 100vh;
+  }
+
+  .loading-modal {
+    position: absolute;
+    background: #ffffff;
+    padding: 0 0 32px 0;
+    box-shadow: 2px 2px 20px 1px;
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
+    border-radius: 4px;
+    top: 48px;
+    height: 246px;
+    width: 327px;
+  }
+
+  .loading-modal-body {
+    position: relative;
+    padding: 20px 10px;
+  }
+
+  .loading-modal-text {
+      padding: 0 24px 0 24px;
+  }
+
+  .loading-modal-close {
+    position: absolute;
+    top: 0;
+    right: 0;
+    border: none;
+    font-size: 20px;
+    padding: 10px;
+    cursor: pointer;
+    font-weight: bold;
+    color: $blue;
+    background: transparent;
+    z-index: 999;
+  }
+
+  .modal-icon-container {
+    position: relative;
+    width: 75px;
+    height: 75px;
+    margin: 15px auto;
+    padding-bottom: 26px;
+  }
+
+  .modal-icon-container img {
+      position: absolute;
+      vertical-align: middle;
+      border: 0;
+      left: 50%;
+      top: 50%;
+      transform: translate(-50%, -50%);
+  }
+
+  .loader-gif {
+      width: 75px;
+      height: 75px;
+  }
+</style>

src/layouts/address-lookup/address-lookup.vue

@@ -6,6 +6,14 @@
 		v-slot="{ meta }"
 		autocomplete="off" >
 		<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" ref="funnelHeader" />
 			<vehicleBanner ref="vehicleBanner" :displayGenericVehicleImage=false />
 			<funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" ref="funnelSubHeader" />	
@@ -68,6 +76,7 @@ import funnelSubHeader from "@/common-components/funnel-sub-header/funnel-sub-he
 import customerQuestions from "@/layouts/address-lookup/customer-questions/customer-questions";
 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';
 
 import { Form } from "vee-validate";
 import { defineRule } from "vee-validate";
@@ -251,6 +260,7 @@ export default {
 
 				// if the car entered is the same as the car found OR the glass options for the found car match the users damage selections
 				if (carEntered.carId == carFound.carId || isGlassAvailableForCarId(carFound.carId)) {
+					this.$refs.loadingModal.showModal();
 					navigateAfterSaveToHeritageFunnel(this.$route);
 				} else {
 					// if not then navigate to the "vehicle-damage" page
@@ -260,6 +270,7 @@ export default {
 				// if multiple cars were found 
 				if (carsFound.find(car => car.carId === carEntered.carId)) {
 					// and one of them matches the car id entered
+					this.$refs.loadingModal.showModal();
 					navigateAfterSaveToHeritageFunnel(this.$route);
 				} else {
 					// and there is no match, navigate to "address-vehicle" page
@@ -359,6 +370,7 @@ export default {
 		customerQuestions,
 		textboxQuestion,
 		alert,
+		loadingModal,
 		Form
 	},
 };

src/layouts/license-plate-lookup/license-plate-lookup.spec.js

@@ -10,6 +10,9 @@ import { getMountOptions } from "@/helpers/unit-test-helper.js";
 import { nextTick } from "vue";
 import store from "@/store";
 
+jest.mock('@/assets/img/loader.gif', () => 'loader.gif')
+jest.mock('@/assets/img/windshield.png', () => 'windshield.png')
+
 // Mock our module for promises.
 jest.mock("@/helpers/layout-helper.js", () => ({
   settleAllPromises: jest.fn(),
@@ -378,6 +381,7 @@ describe("license-plate-lookup.vue", () => {
     //Act
     wrapper.vm.isCarIdDifferent = false;
     wrapper.vm.$router.navigateAfterSaveToHeritageFunnel = jest.fn();
+    wrapper.vm.$refs.loadingModal.showModal = jest.fn();
     wrapper.vm.getCmsContent = jest.fn().mockImplementation(() => {
       return '';
     });

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" />
@@ -43,6 +51,7 @@ import vehicleBanner from "@/common-components/vehicle-banner/vehicle-banner";
 import funnelSubHeader from "@/common-components/funnel-sub-header/funnel-sub-header";
 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 
@@ -216,7 +225,6 @@ export default {
         this.isCarIdDifferent = false;
         return;
       }
-
       const vinLookup = await this.lookupVin(
         this.licensePlate,
         zipValidation.data.state
@@ -226,7 +234,6 @@ export default {
         this.isCarIdDifferent = false;
         return;
       });
-
       this.isCarIdDifferent =
         vinLookup.data.vehicle.carId !== store.getters.vehicle.carId;
 
@@ -265,6 +272,7 @@ export default {
         );
         return;
       } else {
+        this.$refs.loadingModal.showModal();
         this.$router.navigateAfterSaveToHeritageFunnel(this.$route);
         return;
       }
@@ -326,6 +334,7 @@ export default {
     textboxQuestion,
     alert,
     funnelFooter,
+    loadingModal,
   },
 };
 </script>

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

@@ -5,9 +5,15 @@
     ref="theForm"
     v-slot="{ meta }"
   >
-    <div
+    <div class="container-fluid shadow rounded-3 p-2 position-relative make-tall px-5">
-      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"
@@ -161,6 +167,7 @@ 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 vinInformation from "@/layouts/vin-lookup/vin-information/vin-information";
+import loadingModal from '@/common-components/loading-modal/loading-modal.vue';
 
 // Supporting files
 import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
@@ -341,6 +348,7 @@ export default {
             this.$router.navigateAfterSave(this.navigationScenarios.CLICKED_FORWARD, this.$route, {}, { displayVehicleChangeAlert: true }, {});
             return;
         } else {
+            this.$refs.loadingModal.showModal();
             navigateAfterSaveToHeritageFunnel(this.$route);
             return;
         }
@@ -383,6 +391,7 @@ export default {
     alert,
     funnelFooter,
     vinInformation,
+    loadingModal,
   },
 };
 </script>