Fixing lpl page and nav scenario
This commit is contained in:
Max
parent
88dcff55af
commit
842a444e5c
2 changed files with 118 additions and 105 deletions
|
|
@ -175,7 +175,7 @@ describe("getPageToRouteExistingOrderTo", () => {
|
|||
expect(result).toBe('vehicle-damage');
|
||||
});
|
||||
|
||||
test("getPageToRouteExistingOrderTo, should return vin-lookup", async () => {
|
||||
test("getPageToRouteExistingOrderTo, should return license-plate-lookup", async () => {
|
||||
// Arrange
|
||||
const toRoute = {
|
||||
query: {}
|
||||
|
|
@ -228,7 +228,7 @@ describe("getPageToRouteExistingOrderTo", () => {
|
|||
const result = await getPageToRouteExistingOrderTo(toRoute, false);
|
||||
|
||||
//Assert
|
||||
expect(result).toBe('vin-lookup');
|
||||
expect(result).toBe('license-plate-lookup');
|
||||
});
|
||||
|
||||
test("getPageToRouteExistingOrderTo, should return estimate", async () => {
|
||||
|
|
|
|||
|
|
@ -1,46 +1,35 @@
|
|||
<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="container-fluid shadow rounded-3 p-2 position-relative make-tall px-5">
|
||||
<funnelHeader cmsWidgetName="FunnelHeaderWidget" />
|
||||
<vehicleBanner cmsWidgetName="VehicleBannerWidget" :displayGenericVehicleImage="false" />
|
||||
<funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" />
|
||||
<div class="row my-2">
|
||||
<div class="col">
|
||||
<textboxQuestion cmsWidgetName="LicensePlateNumber" v-model="licensePlate" isRequired inputId="license_plate" validationRules="license-plate-required" />
|
||||
</div>
|
||||
<funnelHeader cmsWidgetName="FunnelHeaderWidget" />
|
||||
<vehicleBanner cmsWidgetName="VehicleBannerWidget" :displayGenericVehicleImage="false" />
|
||||
<funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" />
|
||||
<div class="row my-2">
|
||||
<div class="col">
|
||||
<textboxQuestion cmsWidgetName="LicensePlateNumber" v-model="licensePlate" isRequired inputId="license_plate" validationRules="license-plate-required" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="row my-2">
|
||||
<div class="col">
|
||||
<textboxQuestion
|
||||
cmsWidgetName="RegistrationZip"
|
||||
v-model="registrationZip"
|
||||
inputId="zip"
|
||||
mask="#####"
|
||||
validationRules="zip-required"
|
||||
/>
|
||||
<textboxQuestion cmsWidgetName="RegistrationZip" v-model="registrationZip" inputId="zip" mask="#####" validationRules="zip-required" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="row my-2">
|
||||
<div class="col">
|
||||
<textboxQuestion
|
||||
cmsWidgetName="EmailAddress"
|
||||
v-model="email"
|
||||
inputId="email"
|
||||
validationRules="email-address-required|email-address-format"
|
||||
/>
|
||||
<textboxQuestion cmsWidgetName="EmailAddress" v-model="email" inputId="email" validationRules="email-address-required|email-address-format" />
|
||||
</div>
|
||||
<alert class="my-3" :manualHeadline="NoServiceZipHeader" :manualCopy="NoServiceZipBody" v-if="!isRegistrationZipServicable && isVinValid && !isCarIdDifferent" alertClass="alert-danger" />
|
||||
<div class="row my-2">
|
||||
<div class="col">
|
||||
<textboxQuestion v-if="!isRegistrationZipServicable" cmsWidgetName="ServiceZip" v-model="serviceZip" inputId="serviceZip" validationRules="zip-required" />
|
||||
</div>
|
||||
</div>
|
||||
<alert class="my-3" :manualHeadline="NoServiceZipHeader" :manualCopy="NoServiceZipBody" v-if="!isRegistrationZipServicable && isVinValid && !isCarIdDifferent" alertClass="alert-danger" />
|
||||
<div class="row my-2">
|
||||
<div class="col">
|
||||
<textboxQuestion v-if="!isRegistrationZipServicable" cmsWidgetName="ServiceZip" v-model="serviceZip" inputId="serviceZip" validationRules="zip-required" />
|
||||
</div>
|
||||
<alert class="my-3" cmsWidgetName="NoMatchAlertWidget" v-if="!isVinValid" alertClass="alert-danger" />
|
||||
<alert class="my-3" :manualHeadline="MatchedDifferentVehicleAlertHeader" :manualCopy="MatchedDifferentVehicleAlertBody" v-if="isCarIdDifferent" alertClass="alert-warning" />
|
||||
<funnelFooter ref="funnelFooter" cmsWidgetName="FunnelFooterWidget" :isForwardActionDisabled="!meta.valid" @back-clicked="backButtonAction" @ForwardClicked="forwardButtonAction" />
|
||||
</div>
|
||||
<alert class="my-3" cmsWidgetName="NoMatchAlertWidget" v-if="!isVinValid" alertClass="alert-danger" />
|
||||
<alert class="my-3" :manualHeadline="MatchedDifferentVehicleAlertHeader" :manualCopy="MatchedDifferentVehicleAlertBody" v-if="isCarIdDifferent" alertClass="alert-warning" />
|
||||
<funnelFooter ref="funnelFooter" cmsWidgetName="FunnelFooterWidget" :isForwardActionDisabled="!meta.valid" @back-clicked="backButtonAction" @ForwardClicked="forwardButtonAction" />
|
||||
</div>
|
||||
</Form>
|
||||
</Form>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
|
@ -52,52 +41,59 @@ 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";
|
||||
// Supporting files
|
||||
import {
|
||||
fetchCmsContentForPage
|
||||
import {
|
||||
fetchCmsContentForPage
|
||||
} from "@/helpers/cms-content-helper";
|
||||
import {
|
||||
settleAllPromises
|
||||
settleAllPromises
|
||||
} from "@/helpers/layout-helper";
|
||||
import store from "@/store";
|
||||
import baseMixin from "@/mixins/base-mixin.js";
|
||||
import {
|
||||
storeActions
|
||||
storeActions
|
||||
} from "@/constants/store-actions";
|
||||
import {
|
||||
storeMutations
|
||||
storeMutations
|
||||
} from "@/constants/store-mutations";
|
||||
import {
|
||||
errorMessages
|
||||
errorMessages
|
||||
} from "@/constants/error-messages";
|
||||
import {
|
||||
getDamageString,
|
||||
isGlassAvailableForCarId,
|
||||
getDamageString,
|
||||
isGlassAvailableForCarId,
|
||||
} from "@/helpers/damage-helper";
|
||||
import { required, regex } from "@/helpers/validation-rules";
|
||||
import { Form, defineRule } from "vee-validate";
|
||||
import {
|
||||
required,
|
||||
regex,
|
||||
} from "@/helpers/validation-rules";
|
||||
import {
|
||||
Form,
|
||||
defineRule,
|
||||
} from "vee-validate";
|
||||
|
||||
// DEFINE VALIDATION RULES
|
||||
defineRule(
|
||||
"license-plate-required",
|
||||
required(errorMessages.LICENSE_PLATE_REQUIRED)
|
||||
"license-plate-required",
|
||||
required(errorMessages.LICENSE_PLATE_REQUIRED)
|
||||
);
|
||||
defineRule("zip-required", required(errorMessages.ZIP_REQUIRED));
|
||||
defineRule(
|
||||
"email-address-required",
|
||||
required(errorMessages.EMAIL_ADDRESS_REQUIRED)
|
||||
"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
|
||||
)
|
||||
"email-address-format",
|
||||
regex(
|
||||
/^([a-zA-Z0-9_\-.+]+)@([a-zA-Z0-9_\-.]+).([a-zA-Z]{2,})$/,
|
||||
errorMessages.EMAIL_ADDRESS_FORMAT
|
||||
)
|
||||
);
|
||||
export default {
|
||||
name: "license-plate-lookup",
|
||||
async beforeRouteEnter(to, from, next) {
|
||||
// Call APIs
|
||||
const cmsContentPromise = fetchCmsContentForPage(to.query.fmgPage);
|
||||
|
||||
// Settle promises and get results
|
||||
const promiseResultMap = [
|
||||
{
|
||||
|
|
@ -166,50 +162,13 @@ export default {
|
|||
).replaceAll("{custom:zip}", this.registrationZip);
|
||||
return text;
|
||||
},
|
||||
mounted() {
|
||||
this.attachCustomEvents();
|
||||
NoServiceZipBody() {
|
||||
return this.getCmsContent("NoServiceZipWidget", "BodyText");
|
||||
},
|
||||
computed: {
|
||||
MatchedDifferentVehicleAlertHeader() {
|
||||
let text = this.getCmsContent(
|
||||
"MatchedDifferentVehicleAlertWidget",
|
||||
"HeadlineText"
|
||||
).replaceAll("{custom:damage}", getDamageString());
|
||||
|
||||
return text;
|
||||
},
|
||||
MatchedDifferentVehicleAlertBody() {
|
||||
let text = this.getCmsContent(
|
||||
"MatchedDifferentVehicleAlertWidget",
|
||||
"BodyText"
|
||||
)
|
||||
.replaceAll("{custom:damage}", getDamageString())
|
||||
.replaceAll(
|
||||
"{custom:plateLookupYear}",
|
||||
this.customAlertData?.vehicleInfo?.year
|
||||
)
|
||||
.replaceAll(
|
||||
"{custom:plateLookupMake}",
|
||||
this.customAlertData?.vehicleInfo?.make
|
||||
)
|
||||
.replaceAll(
|
||||
"{custom:plateLookupModel}",
|
||||
this.customAlertData?.vehicleInfo?.model
|
||||
);
|
||||
|
||||
return text;
|
||||
},
|
||||
NoServiceZipHeader() {
|
||||
let text = this.getCmsContent(
|
||||
"NoServiceZipWidget",
|
||||
"HeadlineText"
|
||||
).replaceAll("{custom:zip}", this.registrationZip);
|
||||
|
||||
return text;
|
||||
},
|
||||
NoServiceZipBody() {
|
||||
return this.getCmsContent("NoServiceZipWidget", "BodyText");
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
arePagePrerequisitesValid() {
|
||||
return store.getters.vehicle.carId !== null;
|
||||
},
|
||||
resetDependentState() {
|
||||
store.commit(storeMutations.UPDATE_REGISTRATION_ADDRESS, null);
|
||||
|
|
@ -244,9 +203,9 @@ export default {
|
|||
this.$router.navigate(this.navigationScenarios.CLICKED_BACK, this.$route);
|
||||
},
|
||||
async forwardButtonAction() {
|
||||
const zipValidation = this.serviceZip
|
||||
? await this.validateZip(this.serviceZip)
|
||||
: await this.validateZip(this.registrationZip);
|
||||
const zipValidation = this.serviceZip ?
|
||||
await this.validateZip(this.serviceZip) :
|
||||
await this.validateZip(this.registrationZip);
|
||||
if (!zipValidation.data.isServiceable) {
|
||||
this.$refs.funnelFooter.removeLoader();
|
||||
this.isVinValid = true;
|
||||
|
|
@ -254,6 +213,7 @@ export default {
|
|||
this.isCarIdDifferent = false;
|
||||
return;
|
||||
}
|
||||
|
||||
const vinLookup = await this.lookupVin(
|
||||
this.licensePlate,
|
||||
zipValidation.data.state
|
||||
|
|
@ -263,8 +223,10 @@ export default {
|
|||
this.isCarIdDifferent = false;
|
||||
return;
|
||||
});
|
||||
|
||||
this.isCarIdDifferent =
|
||||
vinLookup.data.vehicle.carId !== store.getters.vehicle.carId;
|
||||
|
||||
if (
|
||||
this.isCarIdDifferent &&
|
||||
vinLookup.data.vehicle.carId !== this.previouslyEnteredCarId
|
||||
|
|
@ -280,11 +242,13 @@ export default {
|
|||
this.$refs.funnelFooter.removeLoader();
|
||||
return;
|
||||
}
|
||||
|
||||
this.updateCustomerInfo(
|
||||
vinLookup.data.vin,
|
||||
vinLookup.data.vehicle,
|
||||
zipValidation.data.state
|
||||
);
|
||||
|
||||
this.navigateForward();
|
||||
},
|
||||
navigateForward() {
|
||||
|
|
@ -302,14 +266,63 @@ export default {
|
|||
return;
|
||||
}
|
||||
},
|
||||
components: {
|
||||
Form,
|
||||
funnelHeader,
|
||||
vehicleBanner,
|
||||
funnelSubHeader,
|
||||
textboxQuestion,
|
||||
alert,
|
||||
funnelFooter,
|
||||
validateZip(zip) {
|
||||
return baseMixin.methods.dispatchStoreAction(storeActions.VALIDATE_ZIP, {
|
||||
zip,
|
||||
});
|
||||
},
|
||||
lookupVin(plate, state) {
|
||||
return baseMixin.methods.dispatchStoreAction(
|
||||
storeActions.LOOKUP_VIN_BY_PLATE,
|
||||
{ licensePlate: plate, licenseState: state }
|
||||
);
|
||||
},
|
||||
updateCustomerInfo(vin, vehicleInfo, registrationState) {
|
||||
if (this.isCarIdDifferent && !this.isSelectedGlassAvailableForVehicle) {
|
||||
store.dispatch(storeActions.RESET_DAMAGE_STATE_AND_DEPENDENCIES);
|
||||
}
|
||||
store.commit(storeMutations.UPDATE_VEHICLE_VIN, vin);
|
||||
store.commit(storeMutations.UPDATE_YEAR, vehicleInfo.year);
|
||||
store.commit(storeMutations.UPDATE_MAKE, vehicleInfo.make);
|
||||
store.commit(storeMutations.UPDATE_MODEL, vehicleInfo.model);
|
||||
store.commit(storeMutations.UPDATE_STYLE, vehicleInfo.style);
|
||||
store.commit(storeMutations.UPDATE_CAR_ID, vehicleInfo.carId);
|
||||
store.commit(storeMutations.UPDATE_VEHICLE_CATEGORY, vehicleInfo.category);
|
||||
store.commit(storeMutations.UPDATE_VEHICLE_IMAGE_URL, vehicleInfo.imageUrl);
|
||||
store.commit(storeMutations.UPDATE_VEHICLE_IMAGE_VIF_NUMBER, vehicleInfo.imageVifNumber);
|
||||
store.commit(storeMutations.UPDATE_VEHICLE_IMAGE_COLOR, vehicleInfo.imageVifColor);
|
||||
store.commit(storeMutations.UPDATE_REGISTRATION_LICENSE_PLATE, this.licensePlate);
|
||||
store.commit(storeMutations.UPDATE_REGISTRATION_STATE, registrationState);
|
||||
store.commit(storeMutations.UPDATE_REGISTRATION_ZIP_CODE, this.registrationZip);
|
||||
store.commit(storeMutations.UPDATE_SERVICE_LOCATION_ZIP_CODE, this.serviceZip);
|
||||
store.commit(storeMutations.UPDATE_CUSTOMER_EMAIL_ADDRESS, this.email);
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
licensePlate() {
|
||||
this.$refs.funnelFooter.updateButtonText(
|
||||
this.getCmsContent("FunnelFooterWidget", "ForwardButtonText")
|
||||
);
|
||||
},
|
||||
registrationZip() {
|
||||
this.$refs.funnelFooter.updateButtonText(
|
||||
this.getCmsContent("FunnelFooterWidget", "ForwardButtonText")
|
||||
);
|
||||
},
|
||||
serviceZip() {
|
||||
this.$refs.funnelFooter.updateButtonText(
|
||||
this.getCmsContent("FunnelFooterWidget", "ForwardButtonText")
|
||||
);
|
||||
},
|
||||
},
|
||||
components: {
|
||||
Form,
|
||||
funnelHeader,
|
||||
vehicleBanner,
|
||||
funnelSubHeader,
|
||||
textboxQuestion,
|
||||
alert,
|
||||
funnelFooter,
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
|
|
|||
Loading…
Reference in a new issue