jason/DigitalConsumer.FixMyGlass
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Merge branch 'develop' into lpl-test

Browse source
This commit is contained in:
Max 2022-05-06 16:22:21 -04:00
commit e6f1a0cf14
7 changed files with 167 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

BIN
src/assets/img/loader.gif Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 70 KiB

BIN
src/assets/img/windshield.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 1 KiB

126
src/common-components/loading-modal/loading-modal.vue Normal file
View file

@ -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>

12
src/layouts/address-lookup/address-lookup.vue
View file

@ -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
},
};

4
src/layouts/license-plate-lookup/license-plate-lookup.spec.js
View file

@ -11,6 +11,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.$refs.loadingModal.showModal = jest.fn();
wrapper.vm.getCmsContent = jest.fn().mockImplementation(() => {
return '';
});

17
src/layouts/license-plate-lookup/license-plate-lookup.vue
View file

@ -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
@ -221,7 +230,6 @@ export default {
this.zipToDisplay = this.serviceZip ? this.serviceZip : this.registrationZip;
return;
}
const vinLookup = await this.lookupVin(
this.licensePlate,
zipValidation.data.state
@ -231,7 +239,6 @@ export default {
this.isCarIdDifferent = false;
return;
});
this.isCarIdDifferent =
vinLookup.data.vehicle.carId !== store.getters.vehicle.carId;
@ -256,7 +263,7 @@ export default {
vinLookup.data.vehicle,
zipValidation.data.state
);
this.navigateForward();
},
navigateForward() {
@ -270,6 +277,7 @@ export default {
);
return;
} else {
this.$refs.loadingModal.showModal();
navigateAfterSaveToHeritageFunnel(this.$route);
return;
}
@ -331,6 +339,7 @@ export default {
textboxQuestion,
alert,
funnelFooter,
loadingModal,
},
};
</script>
</script>

15
src/layouts/vin-lookup/vin-lookup.vue
View file

@ -5,9 +5,15 @@
ref="theForm"
v-slot="{ meta }"
>
<div
class="container-fluid shadow rounded-3 p-2 position-relative make-tall px-5"
>
<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"
@ -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>