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

56
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", () => {
test("showModal sets modal visible", async () => {
// Arrange
const { wrapper } = setupMocks({ clickOutCloses: false });
const { wrapper } = setupMocks();
wrapper.vm.isModalVisible = false;
//Act
@ -30,54 +30,7 @@ describe("loadingModal", () => {
});
describe("loadingModal", () => {
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
}) {
function setupMocks() {
//Mock store
store.dispatch = jest.fn(() => {});
@ -89,9 +42,6 @@ function setupMocks({
},
});
//Mock props
mountOptions.propsData = { clickOutCloses: clickOutCloses };
const wrapper = shallowMount(loadingModal, mountOptions);
return { wrapper };
}
}

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

@ -1,21 +1,16 @@
<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">
<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>
Please wait...
</div>
<div class="text-center fs-5 loading-modal-text">
<slot name="subtext">
Default subtext
</slot>
This process can take up 20 seconds.
</div>
</section>
</div>
@ -30,20 +25,10 @@
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>
@ -88,20 +73,6 @@
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;

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

@ -150,7 +150,7 @@ function isVinRelatedPage(toRoute) {
function setupOrderBeforeSave() {
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(
storeActions.UPDATE_SERVICE_LOCATION_WITH_VEHICLE_REGISTRATION
);

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

@ -1,14 +1,12 @@
<template>
<Form ref="theForm" @submit="onSubmit" @invalid-submit="onInvalidSubmit" 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>
<Form
@submit="onSubmit"
@invalid-submit="onInvalidSubmit"
ref="theForm"
v-slot="{ meta }"
autocomplete="off" >
<div class="page-container-grouped-styles">
<loadingModal ref="loadingModal"/>
<funnelHeader cmsWidgetName="FunnelHeaderWidget" ref="funnelHeader" />
<vehicleBanner ref="vehicleBanner" :displayGenericVehicleImage=false />
<funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" ref="funnelSubHeader" />
@ -178,6 +176,7 @@ export default {
return store.getters.order.serviceLocation.zipCode;
},
async forwardButtonAction() {
console.log("AL forwardButtonAction")
this.resetWarningsAndErrors();
// Lookup VIN(s) with the provided address

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

@ -10,9 +10,14 @@
<vehicleBanner cmsWidgetName="VehicleBannerWidget" />
<funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" />
<div class="fade-on-route-transition sub-container make-tall">
<alert
class=""
v-model="customAlertData"
alertClass=""
cmsWidgetName="AlertVinLookupQuestion"
/>
<buttonQuestion
cmsWidgetName="VinLookupMethod"
:questionText="questionText"
:answers="answersFromCms"
groupName="vinLookupMethodOption"
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 funnelSubHeader from "@/common-components/funnel-sub-header/funnel-sub-header";
import buttonQuestion from "@/common-components/button-question/button-question";
import alert from "@/ux-components/alert/alert";
//Supporting Files
import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
import { settleAllPromises } from "@/helpers/layout-helper";
@ -126,6 +132,18 @@ export default {
funnelFooter,
buttonQuestion,
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>
<Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm" v-slot="{ meta }">
<div class="page-container-grouped-styles">
<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>
<loadingModal ref="loadingModal"/>
<funnelHeader cmsWidgetName="FunnelHeaderWidget" />
<vehicleBanner cmsWidgetName="VehicleBannerWidget" :displayGenericVehicleImage="false" />
<funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" />

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

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

3
src/store/index.js
View file

@ -249,6 +249,9 @@ export const mutations = {
state.order.lineItems.glassParts = orderInformation.parts;
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.payment.isInsurance = orderInformation.IsInsuranceOrder;