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

Merge pull request #729 from Safelite/feature/CSR-779

Browse source 
CSR-779 Repair view of estimate page
This commit is contained in:
CarlNation 2022-09-13 08:26:00 -04:00 committed by GitHub
commit b139ca0b08
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
7 changed files with 188 additions and 32 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -95,7 +95,7 @@ async function getLatestPageForRedirection() {
else if (partQuestionsComponent.methods.arePagePrerequisitesValid()) {
return fmgPageValues.PART_QUESTIONS;
}
else if (vinLookupComponent.methods.arePagePrerequisitesValid()) {
else if (vinLookupComponent.methods.arePagePrerequisitesValid() && !store.getters.damage.isRepair) {
return fmgPageValues.VIN_LOOKUP;
}
else {

14
src/layouts/estimate/estimate.spec.js
View file

@ -146,6 +146,20 @@ describe("estimate.vue", () => {
});
test("Changing zip should reset alert", async () => {
//Arrange
const { wrapper } = setupMocks({});
//Act
wrapper.vm.displayNonServiceableZipAlert = "true";
wrapper.vm.serviceZipCode = "43015";
await wrapper.vm.$nextTick();
//Assert
expect(wrapper.vm.displayNonServiceableZipAlert).toEqual(false);
});
});
function setupMocks({

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

@ -6,26 +6,78 @@
v-slot="{ meta }"
>
<div class="page-container-grouped-styles">
<loadingModal ref="loadingModal"/>
<funnelHeader cmsWidgetName="FunnelHeaderWidget" />
<vehicleBanner cmsWidgetName="VehicleBannerWidget" />
<funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" />
<div class="fade-on-route-transition sub-container make-tall">
<alert
class="vinLookupMethodHeading"
cmsWidgetName="AlertVinLookupQuestion"
alertClass=""
/>
<buttonQuestion
cmsWidgetName="VinLookupMethod"
:answers="answersFromCms"
groupName="vinLookupMethodOption"
buttonType="listButton"
v-model="selectedVinLookupMethod"
isRequired
validationRules="option-required"
/>
<div v-if="!isRepair">
<alert
class="vinLookupMethodHeading"
cmsWidgetName="AlertVinLookupQuestion"
alertClass=""
/>
<buttonQuestion
cmsWidgetName="VinLookupMethod"
:answers="answersFromCms"
groupName="vinLookupMethodOption"
buttonType="listButton"
v-model="selectedVinLookupMethod"
isRequired
validationRules="option-required"
/>
</div>
<div v-if="isRepair">
<alert
class="my-4"
cmsWidgetName="AlertQuoteReady"
alertClass="alert-info"
v-bind:isDismissible="false"
/>
<div class="row my-2">
<div class="col">
<textboxQuestion
cmsWidgetName="ServiceZipQuestionWidget"
v-model="serviceZipCode"
inputId="serviceZipCode"
mask="#####"
isRequired
disableAutoFill
validationRules="zip-required|zip-format"
/>
</div>
</div>
<div class="row my-2">
<div class="col">
<textboxQuestion
cmsWidgetName="EmailAddressQuestionWidget"
v-model="emailAddress"
inputId="emailAddress"
isRequired
disableAutoFill
validationRules="email-address-required|email-address-format"
/>
</div>
</div>
<alert ref="alertInvalidZip"
v-if="displayInvalidZipAlert"
class="my-4"
cmsWidgetName="AlertInvalidZipWidget"
alertClass="alert-danger"
v-bind:isDismissible="false"
/>
<alert
class="my-4"
:manualHeadline="AlertNonServiceableZipHeader"
:manualCopy="AlertNonServiceableZipBody"
v-model="customAlertData"
v-if="displayNonServiceableZipAlert"
alertClass="alert-danger"
/>
</div>
<funnel-footer
cmsWidgetName="FunnelFooterWidget"
ref="funnelFooter"
:isForwardActionDisabled="!meta.valid"
@isDisabled="!meta.valid"
@back-clicked="backButtonAction"
@ -44,22 +96,33 @@ 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";
import textboxQuestion from "@/common-components/textbox-question/textbox-question";
import loadingModal from '@/common-components/loading-modal/loading-modal.vue';
//Supporting Files
import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
import { settleAllPromises } from "@/helpers/layout-helper";
import { required } from "@/helpers/validation-rules";
import { required, regex } from "@/helpers/validation-rules";
import { errorMessages } from "@/constants/error-messages";
import { Form, defineRule } from "vee-validate";
import store from "@/store";
import { storeActions } from "@/constants/store-actions";
import { vinLookupMethodSelections } from "@/constants/vin-lookup-method-selections.js";
import { navigateToHeritageFunnel } from "@/helpers/heritage-integration/navigation-helper";
// Define Validation Rules
defineRule("zip-required", required(errorMessages.SERVICE_ZIP_REQUIRED));
defineRule("zip-format", regex(/(^\d{5}$)|(^\d{5}-\d{4}$)/, errorMessages.SERVICE_ZIP_FORMAT));
defineRule("email-address-required", required(errorMessages.EMAIL_ADDRESS_REQUIRED));
defineRule("email-address-format", regex(/^([a-zA-Z0-9_\-.+]+)@([a-zA-Z0-9_\-.]+)\.([a-zA-Z]{2,})$/, errorMessages.EMAIL_ADDRESS_FORMAT));
defineRule("option-required", required(errorMessages.OPTION_REQUIRED));
export default {
name: "estimate",
data() {
return {
selectedVinLookupMethod: "",
serviceZipCode: this.getZipFromStore(),
emailAddress: this.getEmailFromStore(),
displayInvalidZipAlert: false,
displayNonServiceableZipAlert: false,
};
},
@ -79,6 +142,12 @@ export default {
});
},
methods: {
getZipFromStore(){
return store.getters.order.serviceLocation.zipCode;
},
getEmailFromStore(){
return store.getters.order.customer.emailAddress;
},
arePagePrerequisitesValid() {
return store.getters.damage.isRepair || store.getters.damage.glassToReplace?.length > 0;
},
@ -90,6 +159,31 @@ export default {
);
},
async forwardButtonAction() {
if (this.isRepair){
const zipCodeData = await this.getZipCodeData(this.serviceZipCode);
//todo: validation
await this.dispatchStoreAction(storeActions.SAVE_EMAIL, this.emailAddress, false);
await this.dispatchStoreAction(storeActions.SAVE_SERVICE_LOCATION, {
zipCode: this.serviceZipCode,
state: zipCodeData.state,
}, false);
if (!zipCodeData.isZipValid) {
this.displayInvalidZipAlert = true;
return this.$refs.funnelFooter.removeLoader();
}
this.displayInvalidZipAlert = false;
if (!zipCodeData.isZipServiceable) {
this.displayNonServiceableZipAlert = true;
return this.$refs.funnelFooter.removeLoader();
}
this.displayNonServiceableZipAlert = false;
this.$refs.loadingModal.showModal();
navigateToHeritageFunnel();
}
if (this.selectedVinLookupMethod === vinLookupMethodSelections.MANUALVIN) {
await this.dispatchStoreAction(storeActions.CLEAR_VIN);
return this.$router.navigateWithSaving(
@ -112,13 +206,28 @@ export default {
},
},
computed: {
AlertNonServiceableZipHeader(){
console.log(this.getCmsContent("AlertNonServiceableZipWidget", "HeadlineText"));
return this.getCmsContent("AlertNonServiceableZipWidget", "HeadlineText").replaceAll("{custom:serviceZip}", this.serviceZipCode);
},
AlertNonServiceableZipBody(){
return this.getCmsContent("AlertNonServiceableZipWidget", "BodyText");
},
questionText() {
return this.getCmsContent("VinLookupMethod", "QuestionText");
},
answersFromCms() {
return this.getCmsContent("VinLookupMethod", "Answers");
},
isRepair() {
return store.getters.damage.isRepair;
},
},
watch: {
serviceZipCode() {
this.displayNonServiceableZipAlert = false;
},
},
components: {
funnelHeader,
vehicleBanner,
@ -127,6 +236,8 @@ export default {
buttonQuestion,
Form,
alert,
textboxQuestion,
loadingModal,
},
};
</script>

5
src/layouts/vin-lookup/vin-lookup.spec.js
View file

@ -224,10 +224,6 @@ function setupMocks({ customMountOptions }) {
function mockOutPromises(carId = 'C00000') {
const apiResponses = {
serviceZipValidationResponse: {
isValid: true,
isServiceable: true
},
vehicleLookupResponse: {
carId: carId
}
@ -239,6 +235,7 @@ function mockOutPromises(carId = 'C00000') {
function mockOutStubFunctions(wrapper) {
wrapper.vm.$refs.funnelFooter.updateButtonText = jest.fn();
wrapper.vm.$refs.funnelFooter.removeLoader = jest.fn();
wrapper.vm.getZipCodeData = jest.fn().mockReturnValue({ isValid: true, isServiceable: true, state: "OH" });
}
const mockMixin = {

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

@ -221,15 +221,10 @@ export default {
async forwardButtonAction() {
// If this is a new VIN Lookup, do both a Vehicle Lookup and a Zip Validation
if (!this.vinPopulatedOnPageLoad) {
const serviceZipValidationResponse = this.dispatchStoreAction(storeActions.VALIDATE_ZIP, { zip: this.serviceZipCode });
const vehicleLookupResponse = this.dispatchStoreAction(storeActions.LOOKUP_VEHICLE_BY_VIN, { vin: this.vin });
// Settle promises and get results
const promiseResultMap = [
{
resultKey: "serviceZipValidationResponse",
promise: serviceZipValidationResponse,
},
{
resultKey: "vehicleLookupResponse",
promise: vehicleLookupResponse,
@ -237,9 +232,10 @@ export default {
];
const resultMap = await settleAllPromises(promiseResultMap);
const zipCodeData = await this.getZipCodeData(this.serviceZipCode);
// If a Service Zip is entered and it is an invalid zip code (ex. 11111) then show an alert
const isZipValid = resultMap.serviceZipValidationResponse.isValid;
const isZipValid = zipCodeData.isValid;
if (this.serviceZipCode && !isZipValid) {
this.displayInvalidZipAlert = true;
return this.$refs.funnelFooter.removeLoader();
@ -247,14 +243,14 @@ export default {
this.displayInvalidZipAlert = false;
// If either lookup fails, remove the loader and stop processing the page.
if (!resultMap.vehicleLookupResponse || !resultMap.serviceZipValidationResponse.isServiceable) {
if (!resultMap.vehicleLookupResponse || !zipCodeData.isServiceable) {
// If the vehicle result is undefined, the vin entered was invalid.
if(!resultMap.vehicleLookupResponse) {
this.displayVinNotFoundAlert = true;
}
// Check if Service Zip entered is serviceable, if not display an alert
if (!resultMap.serviceZipValidationResponse.isServiceable) {
if (!zipCodeData.isServiceable) {
this.displayNonServiceableZipAlert = true;
}
@ -288,7 +284,7 @@ export default {
await this.dispatchStoreAction(storeActions.SAVE_EMAIL, this.emailAddress, false);
await this.dispatchStoreAction(storeActions.SAVE_SERVICE_LOCATION, {
zipCode: this.serviceZipCode,
state: resultMap.serviceZipValidationResponse.state,
state: zipCodeData.state,
}, false);
return await this.navigateForward();
@ -296,10 +292,10 @@ export default {
}
// If a VIN has already been found. Validate the Service Zip (in case of changes)
const zipValidationResponse = await this.dispatchStoreAction(storeActions.VALIDATE_ZIP, {zip: this.serviceZipCode});
const zipCodeData = await this.getZipCodeData(this.serviceZipCode);
// Check if Service Zip entered is serviceable
if (zipValidationResponse.data.isServiceable) {
if (zipCodeData.isServiceable) {
// If the Service Zip entered is serviceable then save the Zip Info and Email Address and navigate forward
if (this.$store.getters.order.serviceLocation.zipCode != this.serviceZipCode) {
const vehicleRegistrationInfo = this.$store.getters.vehicle.registration;
@ -314,7 +310,7 @@ export default {
else {
await this.dispatchStoreAction(storeActions.SAVE_SERVICE_LOCATION, {
zipCode: this.serviceZipCode,
state: zipValidationResponse.data.state
state: zipCodeData.state
}, false);
}
}

19
src/mixins/base-mixin.js
View file

@ -6,6 +6,7 @@ import { vehicleCategories } from "@/constants/vehicle-categories.js";
import { routerParams } from "@/router/router-constants/router-params";
import { queryStrings } from "@/constants/query-strings";
import { dynamicStrings } from "@/constants/dynamic-strings";
import { settleAllPromises } from "@/helpers/layout-helper";
export default {
data() {
@ -47,6 +48,24 @@ export default {
const footerInfoBox = document.querySelector(".footer#infoBox");
return footerInfoBox ? footerInfoBox.offsetHeight : 0;
},
async getZipCodeData(zipCode) {
const serviceZipValidationResponse = this.dispatchStoreAction(storeActions.VALIDATE_ZIP, { zip: zipCode });
const promiseResultMap = [
{
resultKey: "serviceZipValidationResponse",
promise: serviceZipValidationResponse,
}
];
const resultMap = await settleAllPromises(promiseResultMap);
return {
isZipValid: resultMap.serviceZipValidationResponse.isValid,
isZipServiceable: resultMap.serviceZipValidationResponse.isServiceable,
state: resultMap.serviceZipValidationResponse.state
};
}
},
computed: {
storeActions() {

19
src/mixins/base-mixin.spec.js
View file

@ -95,6 +95,25 @@ describe("baseMixin.js", () => {
// Assert
expect(global.document.querySelector).toBeCalledWith("[data-focus-target='fieldOne']");
});
test("getZipCodeData calls dispatch", () => {
const mixIn = getMixInInstance({});
mixIn.methods.dispatchStoreAction = jest.fn();
mixIn.methods.dispatchStoreAction.mockReturnValue({ isValid:true, isServiceable:true, state:"OH" });
const type = "";
const payload = { zip: 43015 };
const mockData = {
actionList: [{
actionName: storeActions.VALIDATE_ZIP
}],
}
mixIn.methods.getZipCodeData(type, payload);
expect(mixIn.methods.dispatchStoreAction).toBeCalled();
});
});
function getMixInInstance({ isDispatchSuccess = true }) {