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

Fixing lpl page and nav scenario

Browse source
This commit is contained in:
Max 2022-05-04 16:28:20 -04:00
parent 88dcff55af
commit 842a444e5c
2 changed files with 118 additions and 105 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -175,7 +175,7 @@ describe("getPageToRouteExistingOrderTo", () => {
expect(result).toBe('vehicle-damage'); expect(result).toBe('vehicle-damage');
}); });
test("getPageToRouteExistingOrderTo, should return vin-lookup", async () => { test("getPageToRouteExistingOrderTo, should return license-plate-lookup", async () => {
// Arrange // Arrange
const toRoute = { const toRoute = {
query: {} query: {}
@ -228,7 +228,7 @@ describe("getPageToRouteExistingOrderTo", () => {
const result = await getPageToRouteExistingOrderTo(toRoute, false); const result = await getPageToRouteExistingOrderTo(toRoute, false);
//Assert //Assert
expect(result).toBe('vin-lookup'); expect(result).toBe('license-plate-lookup');
}); });
test("getPageToRouteExistingOrderTo, should return estimate", async () => { test("getPageToRouteExistingOrderTo, should return estimate", async () => {

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

@ -1,46 +1,35 @@
<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="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">
<funnelHeader cmsWidgetName="FunnelHeaderWidget" /> <funnelHeader cmsWidgetName="FunnelHeaderWidget" />
<vehicleBanner cmsWidgetName="VehicleBannerWidget" :displayGenericVehicleImage="false" /> <vehicleBanner cmsWidgetName="VehicleBannerWidget" :displayGenericVehicleImage="false" />
<funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" /> <funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" />
<div class="row my-2"> <div class="row my-2">
<div class="col"> <div class="col">
<textboxQuestion cmsWidgetName="LicensePlateNumber" v-model="licensePlate" isRequired inputId="license_plate" validationRules="license-plate-required" /> <textboxQuestion cmsWidgetName="LicensePlateNumber" v-model="licensePlate" isRequired inputId="license_plate" validationRules="license-plate-required" />
</div>
</div> </div>
</div> </div>
<div class="row my-2"> <div class="row my-2">
<div class="col"> <div class="col">
<textboxQuestion <textboxQuestion cmsWidgetName="RegistrationZip" v-model="registrationZip" inputId="zip" mask="#####" validationRules="zip-required" />
cmsWidgetName="RegistrationZip"
v-model="registrationZip"
inputId="zip"
mask="#####"
validationRules="zip-required"
/>
</div> </div>
</div> </div>
<div class="row my-2"> <div class="row my-2">
<div class="col"> <div class="col">
<textboxQuestion <textboxQuestion cmsWidgetName="EmailAddress" v-model="email" inputId="email" validationRules="email-address-required|email-address-format" />
cmsWidgetName="EmailAddress"
v-model="email"
inputId="email"
validationRules="email-address-required|email-address-format"
/>
</div> </div>
<alert class="my-3" :manualHeadline="NoServiceZipHeader" :manualCopy="NoServiceZipBody" v-if="!isRegistrationZipServicable && isVinValid && !isCarIdDifferent" alertClass="alert-danger" /> </div>
<div class="row my-2"> <alert class="my-3" :manualHeadline="NoServiceZipHeader" :manualCopy="NoServiceZipBody" v-if="!isRegistrationZipServicable && isVinValid && !isCarIdDifferent" alertClass="alert-danger" />
<div class="col"> <div class="row my-2">
<textboxQuestion v-if="!isRegistrationZipServicable" cmsWidgetName="ServiceZip" v-model="serviceZip" inputId="serviceZip" validationRules="zip-required" /> <div class="col">
</div> <textboxQuestion v-if="!isRegistrationZipServicable" cmsWidgetName="ServiceZip" v-model="serviceZip" inputId="serviceZip" validationRules="zip-required" />
</div> </div>
<alert class="my-3" cmsWidgetName="NoMatchAlertWidget" v-if="!isVinValid" alertClass="alert-danger" /> </div>
<alert class="my-3" :manualHeadline="MatchedDifferentVehicleAlertHeader" :manualCopy="MatchedDifferentVehicleAlertBody" v-if="isCarIdDifferent" alertClass="alert-warning" /> <alert class="my-3" cmsWidgetName="NoMatchAlertWidget" v-if="!isVinValid" alertClass="alert-danger" />
<funnelFooter ref="funnelFooter" cmsWidgetName="FunnelFooterWidget" :isForwardActionDisabled="!meta.valid" @back-clicked="backButtonAction" @ForwardClicked="forwardButtonAction" /> <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> </div>
</Form> </Form>
</template> </template>
<script> <script>
@ -52,52 +41,59 @@ import funnelSubHeader from "@/common-components/funnel-sub-header/funnel-sub-he
import alert from "@/ux-components/alert/alert"; import alert from "@/ux-components/alert/alert";
import textboxQuestion from "@/common-components/textbox-question/textbox-question"; import textboxQuestion from "@/common-components/textbox-question/textbox-question";
// Supporting files // Supporting files
import { import {
fetchCmsContentForPage fetchCmsContentForPage
} from "@/helpers/cms-content-helper"; } from "@/helpers/cms-content-helper";
import { import {
settleAllPromises settleAllPromises
} from "@/helpers/layout-helper"; } from "@/helpers/layout-helper";
import store from "@/store"; import store from "@/store";
import baseMixin from "@/mixins/base-mixin.js"; import baseMixin from "@/mixins/base-mixin.js";
import { import {
storeActions storeActions
} from "@/constants/store-actions"; } from "@/constants/store-actions";
import { import {
storeMutations storeMutations
} from "@/constants/store-mutations"; } from "@/constants/store-mutations";
import { import {
errorMessages errorMessages
} from "@/constants/error-messages"; } from "@/constants/error-messages";
import { import {
getDamageString, getDamageString,
isGlassAvailableForCarId, isGlassAvailableForCarId,
} from "@/helpers/damage-helper"; } from "@/helpers/damage-helper";
import { required, regex } from "@/helpers/validation-rules"; import {
import { Form, defineRule } from "vee-validate"; required,
regex,
} from "@/helpers/validation-rules";
import {
Form,
defineRule,
} from "vee-validate";
// DEFINE VALIDATION RULES // DEFINE VALIDATION RULES
defineRule( defineRule(
"license-plate-required", "license-plate-required",
required(errorMessages.LICENSE_PLATE_REQUIRED) required(errorMessages.LICENSE_PLATE_REQUIRED)
); );
defineRule("zip-required", required(errorMessages.ZIP_REQUIRED)); defineRule("zip-required", required(errorMessages.ZIP_REQUIRED));
defineRule( defineRule(
"email-address-required", "email-address-required",
required(errorMessages.EMAIL_ADDRESS_REQUIRED) required(errorMessages.EMAIL_ADDRESS_REQUIRED)
); );
defineRule( defineRule(
"email-address-format", "email-address-format",
regex( regex(
/^([a-zA-Z0-9_\-.+]+)@([a-zA-Z0-9_\-.]+).([a-zA-Z]{2,})$/, /^([a-zA-Z0-9_\-.+]+)@([a-zA-Z0-9_\-.]+).([a-zA-Z]{2,})$/,
errorMessages.EMAIL_ADDRESS_FORMAT errorMessages.EMAIL_ADDRESS_FORMAT
) )
); );
export default { export default {
name: "license-plate-lookup", name: "license-plate-lookup",
async beforeRouteEnter(to, from, next) { async beforeRouteEnter(to, from, next) {
// Call APIs // Call APIs
const cmsContentPromise = fetchCmsContentForPage(to.query.fmgPage); const cmsContentPromise = fetchCmsContentForPage(to.query.fmgPage);
// Settle promises and get results // Settle promises and get results
const promiseResultMap = [ const promiseResultMap = [
{ {
@ -166,50 +162,13 @@ export default {
).replaceAll("{custom:zip}", this.registrationZip); ).replaceAll("{custom:zip}", this.registrationZip);
return text; return text;
}, },
mounted() { NoServiceZipBody() {
this.attachCustomEvents(); return this.getCmsContent("NoServiceZipWidget", "BodyText");
}, },
computed: { },
MatchedDifferentVehicleAlertHeader() { methods: {
let text = this.getCmsContent( arePagePrerequisitesValid() {
"MatchedDifferentVehicleAlertWidget", return store.getters.vehicle.carId !== null;
"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");
},
}, },
resetDependentState() { resetDependentState() {
store.commit(storeMutations.UPDATE_REGISTRATION_ADDRESS, null); store.commit(storeMutations.UPDATE_REGISTRATION_ADDRESS, null);
@ -244,9 +203,9 @@ export default {
this.$router.navigate(this.navigationScenarios.CLICKED_BACK, this.$route); this.$router.navigate(this.navigationScenarios.CLICKED_BACK, this.$route);
}, },
async forwardButtonAction() { async forwardButtonAction() {
const zipValidation = this.serviceZip const zipValidation = this.serviceZip ?
? await this.validateZip(this.serviceZip) await this.validateZip(this.serviceZip) :
: await this.validateZip(this.registrationZip); await this.validateZip(this.registrationZip);
if (!zipValidation.data.isServiceable) { if (!zipValidation.data.isServiceable) {
this.$refs.funnelFooter.removeLoader(); this.$refs.funnelFooter.removeLoader();
this.isVinValid = true; this.isVinValid = true;
@ -254,6 +213,7 @@ export default {
this.isCarIdDifferent = false; this.isCarIdDifferent = false;
return; return;
} }
const vinLookup = await this.lookupVin( const vinLookup = await this.lookupVin(
this.licensePlate, this.licensePlate,
zipValidation.data.state zipValidation.data.state
@ -263,8 +223,10 @@ export default {
this.isCarIdDifferent = false; this.isCarIdDifferent = false;
return; return;
}); });
this.isCarIdDifferent = this.isCarIdDifferent =
vinLookup.data.vehicle.carId !== store.getters.vehicle.carId; vinLookup.data.vehicle.carId !== store.getters.vehicle.carId;
if ( if (
this.isCarIdDifferent && this.isCarIdDifferent &&
vinLookup.data.vehicle.carId !== this.previouslyEnteredCarId vinLookup.data.vehicle.carId !== this.previouslyEnteredCarId
@ -280,11 +242,13 @@ export default {
this.$refs.funnelFooter.removeLoader(); this.$refs.funnelFooter.removeLoader();
return; return;
} }
this.updateCustomerInfo( this.updateCustomerInfo(
vinLookup.data.vin, vinLookup.data.vin,
vinLookup.data.vehicle, vinLookup.data.vehicle,
zipValidation.data.state zipValidation.data.state
); );
this.navigateForward(); this.navigateForward();
}, },
navigateForward() { navigateForward() {
@ -302,14 +266,63 @@ export default {
return; return;
} }
}, },
components: { validateZip(zip) {
Form, return baseMixin.methods.dispatchStoreAction(storeActions.VALIDATE_ZIP, {
funnelHeader, zip,
vehicleBanner, });
funnelSubHeader,
textboxQuestion,
alert,
funnelFooter,
}, },
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> </script>