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 @@ + + + + + \ 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" >
+ + + + @@ -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 @@