diff --git a/src/assets/img/loader.gif b/src/assets/img/loader.gif
new file mode 100644
index 000000000..c069b049d
Binary files /dev/null and b/src/assets/img/loader.gif differ
diff --git a/src/assets/img/windshield.png b/src/assets/img/windshield.png
new file mode 100644
index 000000000..4f0c5e5de
Binary files /dev/null and b/src/assets/img/windshield.png differ
diff --git a/src/common-components/loading-modal/loading-modal.vue b/src/common-components/loading-modal/loading-modal.vue
new file mode 100644
index 000000000..4f1365802
--- /dev/null
+++ b/src/common-components/loading-modal/loading-modal.vue
@@ -0,0 +1,126 @@
+
+
+
+
+
+
+
+
+
+
+
+ Default text
+
+
+
+
+ Default subtext
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/src/layouts/address-lookup/address-lookup.vue b/src/layouts/address-lookup/address-lookup.vue
index 6d0240ae0..395c519b3 100644
--- a/src/layouts/address-lookup/address-lookup.vue
+++ b/src/layouts/address-lookup/address-lookup.vue
@@ -6,6 +6,14 @@
v-slot="{ meta }"
autocomplete="off" >
+
+
+ Please wait...
+
+
+ This process can take up 20 seconds.
+
+
@@ -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
},
};
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 609ddcf2e..71a9e2a28 100644
--- a/src/layouts/license-plate-lookup/license-plate-lookup.spec.js
+++ b/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 '';
});
diff --git a/src/layouts/license-plate-lookup/license-plate-lookup.vue b/src/layouts/license-plate-lookup/license-plate-lookup.vue
index 356a8ec9e..a027f5e8b 100644
--- a/src/layouts/license-plate-lookup/license-plate-lookup.vue
+++ b/src/layouts/license-plate-lookup/license-plate-lookup.vue
@@ -1,6 +1,14 @@