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

CSR-416 Finish adding serviceLocation

Browse source
This commit is contained in:
Katie 2022-05-10 14:23:54 -04:00
commit e834f2e1ae
8 changed files with 65 additions and 152 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

54
src/common-components/loading-modal/loading-modal.spec.js
View file

@ -17,7 +17,7 @@ jest.mock('@/assets/img/windshield.png', () => 'windshield.png')
describe("loadingModal", () => { describe("loadingModal", () => {
test("showModal sets modal visible", async () => { test("showModal sets modal visible", async () => {
// Arrange // Arrange
const { wrapper } = setupMocks({ clickOutCloses: false }); const { wrapper } = setupMocks();
wrapper.vm.isModalVisible = false; wrapper.vm.isModalVisible = false;
//Act //Act
@ -30,54 +30,7 @@ describe("loadingModal", () => {
}); });
describe("loadingModal", () => { function setupMocks() {
test("closeModal sets modal not visible", async () => {
// Arrange
const { wrapper } = setupMocks({ clickOutCloses: false });
wrapper.vm.isModalVisible = true;
//Act
wrapper.vm.closeModal();
// Assert
expect(wrapper.vm.isModalVisible).toEqual(false);
wrapper.unmount();
});
});
describe("loadingModal", () => {
test("canClose calls closeModal", async () => {
// Arrange
const { wrapper } = setupMocks({ clickOutCloses: true });
wrapper.vm.isModalVisible = true;
//Act
wrapper.vm.canClose();
// Assert
expect(wrapper.vm.isModalVisible).toEqual(false);
wrapper.unmount();
});
});
describe("loadingModal", () => {
test("canClose does not call closeModal", async () => {
// Arrange
const { wrapper } = setupMocks({ clickOutCloses: false });
wrapper.vm.isModalVisible = true;
//Act
wrapper.vm.canClose();
// Assert
expect(wrapper.vm.isModalVisible).toEqual(true);
wrapper.unmount();
});
});
function setupMocks({
clickOutCloses
}) {
//Mock store //Mock store
store.dispatch = jest.fn(() => {}); store.dispatch = jest.fn(() => {});
@ -89,9 +42,6 @@ function setupMocks({
}, },
}); });
//Mock props
mountOptions.propsData = { clickOutCloses: clickOutCloses };
const wrapper = shallowMount(loadingModal, mountOptions); const wrapper = shallowMount(loadingModal, mountOptions);
return { wrapper }; return { wrapper };
} }

35
src/common-components/loading-modal/loading-modal.vue
View file

@ -1,21 +1,16 @@
<template> <template>
<div v-show="isModalVisible" class="loading-modal-backdrop" v-on:click="canClose" @close="closeModal"> <div v-show="isModalVisible" class="loading-modal-backdrop">
<div class="loading-modal"> <div class="loading-modal">
<button v-if="showCloseButton" type="button" class="loading-modal-close" @click="closeModal">x</button>
<section class="loading-modal-body"> <section class="loading-modal-body">
<div class="modal-icon-container text-center"> <div class="modal-icon-container text-center">
<img class="loader-gif" alt="Loading" src="@/assets/img/loader.gif"> <img class="loader-gif" alt="Loading" src="@/assets/img/loader.gif">
<img class="modal-icon" alt="" src="@/assets/img/windshield.png"> <img class="modal-icon" alt="" src="@/assets/img/windshield.png">
</div> </div>
<div class="text-center fw-bold fs-5 loading-modal-text"> <div class="text-center fw-bold fs-5 loading-modal-text">
<slot name="body"> Please wait...
Default text
</slot>
</div> </div>
<div class="text-center fs-5 loading-modal-text"> <div class="text-center fs-5 loading-modal-text">
<slot name="subtext"> This process can take up 20 seconds.
Default subtext
</slot>
</div> </div>
</section> </section>
</div> </div>
@ -30,20 +25,10 @@
isModalVisible: false, isModalVisible: false,
}; };
}, },
props: {
showCloseButton: {type: Boolean, default: false},
clickOutCloses: {type: Boolean, default: false},
},
methods: { methods: {
showModal() { showModal() {
this.isModalVisible = true; this.isModalVisible = true;
}, },
closeModal() {
this.isModalVisible = false;
},
canClose() {
this.clickOutCloses ? this.closeModal() : null;
}
}, },
}; };
</script> </script>
@ -88,20 +73,6 @@
padding: 0 24px 0 24px; 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 { .modal-icon-container {
position: relative; position: relative;
width: 75px; width: 75px;

2
src/helpers/heritage-integration/navigation-helper.js
View file

@ -150,7 +150,7 @@ function isVinRelatedPage(toRoute) {
function setupOrderBeforeSave() { function setupOrderBeforeSave() {
const serviceLocation = store.getters.order.serviceLocation; const serviceLocation = store.getters.order.serviceLocation;
if (!serviceLocation.address && (!serviceLocation.zipCode || serviceLocation.zipCode == store.getters.vehicle.registration.zipCode)) { if (!serviceLocation.zipCode && serviceLocation.zipCode == store.getters.vehicle.registration.zipCode) {
baseMixin.methods.dispatchStoreAction( baseMixin.methods.dispatchStoreAction(
storeActions.UPDATE_SERVICE_LOCATION_WITH_VEHICLE_REGISTRATION storeActions.UPDATE_SERVICE_LOCATION_WITH_VEHICLE_REGISTRATION
); );

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

@ -1,14 +1,12 @@
<template> <template>
<Form ref="theForm" @submit="onSubmit" @invalid-submit="onInvalidSubmit" v-slot="{ meta }" autocomplete="off"> <Form
<div class="container-fluid shadow rounded-3 p-2 position-relative make-tall px-5"> @submit="onSubmit"
<loadingModal :showCloseButton=false :clickOutCloses=false ref="loadingModal"> @invalid-submit="onInvalidSubmit"
<template v-slot:body> ref="theForm"
Please wait... v-slot="{ meta }"
</template> autocomplete="off" >
<template v-slot:subtext> <div class="page-container-grouped-styles">
This process can take up 20 seconds. <loadingModal ref="loadingModal"/>
</template>
</loadingModal>
<funnelHeader cmsWidgetName="FunnelHeaderWidget" ref="funnelHeader" /> <funnelHeader cmsWidgetName="FunnelHeaderWidget" ref="funnelHeader" />
<vehicleBanner ref="vehicleBanner" :displayGenericVehicleImage=false /> <vehicleBanner ref="vehicleBanner" :displayGenericVehicleImage=false />
<funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" ref="funnelSubHeader" /> <funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" ref="funnelSubHeader" />
@ -178,6 +176,7 @@ export default {
return store.getters.order.serviceLocation.zipCode; return store.getters.order.serviceLocation.zipCode;
}, },
async forwardButtonAction() { async forwardButtonAction() {
console.log("AL forwardButtonAction")
this.resetWarningsAndErrors(); this.resetWarningsAndErrors();
// Lookup VIN(s) with the provided address // Lookup VIN(s) with the provided address

20
src/layouts/estimate/estimate.vue
View file

@ -10,9 +10,14 @@
<vehicleBanner cmsWidgetName="VehicleBannerWidget" /> <vehicleBanner cmsWidgetName="VehicleBannerWidget" />
<funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" /> <funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" />
<div class="fade-on-route-transition sub-container make-tall"> <div class="fade-on-route-transition sub-container make-tall">
<alert
class=""
v-model="customAlertData"
alertClass=""
cmsWidgetName="AlertVinLookupQuestion"
/>
<buttonQuestion <buttonQuestion
cmsWidgetName="VinLookupMethod" cmsWidgetName="VinLookupMethod"
:questionText="questionText"
:answers="answersFromCms" :answers="answersFromCms"
groupName="vinLookupMethodOption" groupName="vinLookupMethodOption"
buttonType="listButton" buttonType="listButton"
@ -39,6 +44,7 @@ import funnelFooter from "@/common-components/funnel-footer/funnel-footer";
import vehicleBanner from "@/common-components/vehicle-banner/vehicle-banner"; import vehicleBanner from "@/common-components/vehicle-banner/vehicle-banner";
import funnelSubHeader from "@/common-components/funnel-sub-header/funnel-sub-header"; import funnelSubHeader from "@/common-components/funnel-sub-header/funnel-sub-header";
import buttonQuestion from "@/common-components/button-question/button-question"; import buttonQuestion from "@/common-components/button-question/button-question";
import alert from "@/ux-components/alert/alert";
//Supporting Files //Supporting Files
import { fetchCmsContentForPage } from "@/helpers/cms-content-helper"; import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
import { settleAllPromises } from "@/helpers/layout-helper"; import { settleAllPromises } from "@/helpers/layout-helper";
@ -126,6 +132,18 @@ export default {
funnelFooter, funnelFooter,
buttonQuestion, buttonQuestion,
Form, Form,
alert,
}, },
}; };
</script> </script>
<style lang="scss">
.alert p{
font-size: 1rem;
font-weight: 500;
color: $black;
}
div .current_car_info-text{
padding-bottom: 16px;
}
</style>

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

@ -1,14 +1,7 @@
<template> <template>
<Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm" v-slot="{ meta }"> <Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm" v-slot="{ meta }">
<div class="page-container-grouped-styles"> <div class="page-container-grouped-styles">
<loadingModal :showCloseButton=false :clickOutCloses=false ref="loadingModal"> <loadingModal 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" /> <funnelHeader cmsWidgetName="FunnelHeaderWidget" />
<vehicleBanner cmsWidgetName="VehicleBannerWidget" :displayGenericVehicleImage="false" /> <vehicleBanner cmsWidgetName="VehicleBannerWidget" :displayGenericVehicleImage="false" />
<funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" /> <funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" />

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

@ -6,14 +6,7 @@
v-slot="{ meta }" v-slot="{ meta }"
> >
<div class="page-container-grouped-styles"> <div class="page-container-grouped-styles">
<loadingModal :showCloseButton=false :clickOutCloses=false ref="loadingModal"> <loadingModal 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" /> <funnelHeader cmsWidgetName="FunnelHeaderWidget" />
<vehicleBanner <vehicleBanner
cmsWidgetName="VehicleBannerWidget" cmsWidgetName="VehicleBannerWidget"
@ -64,14 +57,6 @@
/> />
</div> </div>
</div> </div>
<alert
class="my-3"
:manualHeadline="MatchedDifferentVehicleAlertHeader"
:manualCopy="MatchedDifferentVehicleAlertBody"
v-model="customAlertData"
v-if="matchedDifferentVehicle"
alertClass="alert-danger"
/>
<alert <alert
class="my-3" class="my-3"
v-model="customAlertData" v-model="customAlertData"
@ -87,13 +72,6 @@
v-if="noServiceZip" v-if="noServiceZip"
alertClass="alert-warning" alertClass="alert-warning"
/> />
<alert
class="my-3"
v-model="customAlertData"
v-if="foundWindshieldAlert"
alertClass="alert-warning"
cmsWidgetName="FoundWindshieldAlert"
/>
<alert <alert
class="my-3" class="my-3"
v-model="customAlertData" v-model="customAlertData"
@ -116,13 +94,6 @@
v-if="isVinFieldReadOnly" v-if="isVinFieldReadOnly"
alertClass="alert-success" alertClass="alert-success"
/> />
<funnelFooter
cmsWidgetName="FunnelFooterWidget"
ref="funnelFooter"
:isForwardActionDisabled="!meta.valid"
@back-clicked="backButtonAction"
@ForwardClicked="forwardButtonAction"
/>
</div> </div>
<alert <alert
class="my-3" class="my-3"
@ -154,6 +125,13 @@
alertClass="alert-success" alertClass="alert-success"
cmsWidgetName="PerfectMatchNewVinAlert" cmsWidgetName="PerfectMatchNewVinAlert"
/> />
<funnelFooter
cmsWidgetName="FunnelFooterWidget"
ref="funnelFooter"
:isForwardActionDisabled="!meta.valid"
@back-clicked="backButtonAction"
@ForwardClicked="forwardButtonAction"
/>
</div> </div>
</Form> </Form>
</template> </template>
@ -326,35 +304,36 @@ export default {
} }
}, },
async forwardButtonAction() { async forwardButtonAction() {
const zipValidation = await this.validateZip(this.zip); const zipValidation = this.validateZip(this.zip);
if (!zipValidation.data.isServiceable) { const vehicleLookup = this.lookupVehicle(this.vin);
console.log("2") const zipValidationResponse = await zipValidation;
const vehicleLookupResponse = await vehicleLookup.catch(() => {
this.vinNotFound = true;
this.$refs.funnelFooter.removeLoader();
this.noServiceZip = false;
return;
});
if (!zipValidationResponse.data.isServiceable) {
this.customAlertData.zip = this.zip; this.customAlertData.zip = this.zip;
this.$refs.funnelFooter.removeLoader(); this.$refs.funnelFooter.removeLoader();
this.noServiceZip = true; this.noServiceZip = true;
this.invalidZip = this.zip; this.invalidZip = this.zip;
return; return;
} }
const vehicleLookup = await this.lookupVehicle(this.vin).catch(() => { this.isCarIdDifferent = vehicleLookupResponse.data.carId !== store.getters.vehicle.carId;
this.vinNotFound = true;
this.$refs.funnelFooter.removeLoader();
this.noServiceZip = false;
return;
});
this.isCarIdDifferent = vehicleLookup.data.carId !== store.getters.vehicle.carId;
if (this.isCarIdDifferent && (vehicleLookup.data.carId !== this.previouslyEnteredCarId)) { if (this.isCarIdDifferent && (vehicleLookupResponse.data.carId !== this.previouslyEnteredCarId)) {
this.previouslyEnteredCarId = vehicleLookup.data.carId; this.previouslyEnteredCarId = vehicleLookupResponse.data.carId;
this.noServiceZip = false; this.noServiceZip = false;
this.customAlertData.vehicleInfo = vehicleLookup.data; this.customAlertData.vehicleInfo = vehicleLookupResponse.data;
this.$refs.funnelFooter.updateButtonText(`Continue with ${vehicleLookup.data.year} ${vehicleLookup.data.make} ${vehicleLookup.data.model}`); this.$refs.funnelFooter.updateButtonText(`Continue with ${vehicleLookupResponse.data.year} ${vehicleLookupResponse.data.make} ${vehicleLookupResponse.data.model}`);
this.isVinValid = true; this.isVinValid = true;
this.isSelectedGlassAvailableForVehicle = await isGlassAvailableForCarId(vehicleLookup.data.carId); this.isSelectedGlassAvailableForVehicle = await isGlassAvailableForCarId(vehicleLookupResponse.data.carId);
this.$refs.funnelFooter.removeLoader(); this.$refs.funnelFooter.removeLoader();
this.isCarIdDifferent = true; this.isCarIdDifferent = true;
return; return;
} }
this.updateStore(vehicleLookup.data); this.updateStore(vehicleLookupResponse.data);
this.navigateForward(); this.navigateForward();
}, },
navigateForward(){ navigateForward(){

3
src/store/index.js
View file

@ -249,6 +249,9 @@ export const mutations = {
state.order.lineItems.glassParts = orderInformation.parts; state.order.lineItems.glassParts = orderInformation.parts;
state.order.accountNumber = orderInformation.accountNumber; state.order.accountNumber = orderInformation.accountNumber;
state.order.serviceLocation.address = orderInformation.serviceLocation.streetAddress,
state.order.serviceLocation.city = orderInformation.serviceLocation.city,
state.order.serviceLocation.state = orderInformation.serviceLocation.state,
state.order.serviceLocation.zipCode = orderInformation.serviceLocation.zipCode; // TODO CSR-416 make sure customer vs service is different, add this to service state.order.serviceLocation.zipCode = orderInformation.serviceLocation.zipCode; // TODO CSR-416 make sure customer vs service is different, add this to service
state.order.payment.isInsurance = orderInformation.IsInsuranceOrder; state.order.payment.isInsurance = orderInformation.IsInsuranceOrder;