updates to navigation, saving data to store
This commit is contained in:
Kroell
parent
bbffb5f18d
commit
24a5eb7494
2 changed files with 150 additions and 84 deletions
|
|
@ -72,36 +72,8 @@ defineRule("zip-format", regex(/(^\d{5}$)|(^\d{5}-\d{4}$)/, errorMessages.SERVIC
|
|||
export default {
|
||||
name: 'license-plate-lookup',
|
||||
mixins: [baseFormMixin, vinPagesMixin],
|
||||
components: {
|
||||
Form,
|
||||
siteFooter,
|
||||
siteHeader,
|
||||
siteSubHeader,
|
||||
vehicleBanner,
|
||||
textboxQuestion,
|
||||
licensePlateLookupAlerts,
|
||||
isGlassAvailableForCarId
|
||||
},
|
||||
setup() {
|
||||
const mainStore = useMainStore();
|
||||
|
||||
return { mainStore };
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
activeVehicleLookupAlertType: null,
|
||||
needToLookupVehicle: true,
|
||||
vehicleFromLookup: null,
|
||||
licensePlate: null,
|
||||
registrationZipCode: null,
|
||||
};
|
||||
},
|
||||
provide() {
|
||||
return {
|
||||
vehicleFromLookup: computed(() => this.vehicleFromLookup),
|
||||
};
|
||||
},
|
||||
async beforeRouteEnter(to, from, next) {
|
||||
// Call APIs
|
||||
const cmsContentPromise = fetchCmsContentForPage(to.query.issPage);
|
||||
|
||||
// Settle promises and get results
|
||||
|
|
@ -113,66 +85,115 @@ export default {
|
|||
];
|
||||
|
||||
const resultMap = await settleAllPromises(promiseResultMap);
|
||||
|
||||
|
||||
// Call the "next" function to complete the transition to this page.
|
||||
next((vm) => {
|
||||
vm.setCmsContent(resultMap.cmsContent);
|
||||
});
|
||||
},
|
||||
computed: {
|
||||
isCarIdDifferentFromTheStore() {
|
||||
return (
|
||||
this.vehicleFromLookup !== null
|
||||
&& this.vehicleFromLookup.carId !== this.mainStore.vehicle.carId
|
||||
);
|
||||
}
|
||||
data() {
|
||||
return {
|
||||
activeVehicleLookupAlertType: null,
|
||||
vehicleFromLookup: null,
|
||||
licensePlate: null,
|
||||
registrationZipCode: null,
|
||||
displayVinNotFoundAlert: false,
|
||||
displayMatchedDifferentVehicleAlert: false,
|
||||
previouslyEnteredCarId: "",
|
||||
isCarIdDifferent: false,
|
||||
customAlertData: {},
|
||||
isSelectedGlassAvailableForVehicle: true,
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
arePagePrerequisitesValid() {
|
||||
if (this.mainStore.order.vehicle.carId) {
|
||||
return true;
|
||||
}
|
||||
return false;
|
||||
return this.mainStore.order.vehicle.carId !== null;
|
||||
},
|
||||
backButtonAction() {
|
||||
/**
|
||||
* this.navigationScenarios comes from base-mixin
|
||||
*/
|
||||
// route to move backwards
|
||||
this.$router.navigate(this.navigationScenarios.CLICKED_BACK, this.$route);
|
||||
},
|
||||
attachCustomEvents() {
|
||||
this.prependActionToMethod(this, this.forwardButtonAction, () => {
|
||||
this.pushEventToGA(
|
||||
this.$route.query[this.queryStrings.ISS_PAGE],
|
||||
this.GaActions.SUBMITTED,
|
||||
this.GaLabels.LICENSE_PLATE_LOOKUP,
|
||||
true
|
||||
);
|
||||
});
|
||||
},
|
||||
// NOTE: If form is not valid, this method is not called when 'Continue' button is clicked
|
||||
async forwardButtonAction() {
|
||||
this.resetActiveAlert();
|
||||
this.resetWarningsAndErrors();
|
||||
|
||||
if (this.needToLookupVehicle) {
|
||||
const vehicleLookupResponse = await this.mainStore.lookupVinByPlate(this.licensePlate);
|
||||
|
||||
if (vehicleLookupResponse.error) {
|
||||
this.activeVehicleLookupAlertType = vehicleLookupAlertTypes.NOT_FOUND;
|
||||
this.resetVehicleFromLookup();
|
||||
this.$refs.siteFooter.removeLoader();
|
||||
return;
|
||||
// Lookup vin
|
||||
const vinLookupResponse = useMainStore().lookupVinByPlate({
|
||||
licensePlate: this.licensePlate,
|
||||
}
|
||||
).catch(() => {
|
||||
// No VIN found
|
||||
this.displayVinNotFoundAlert = true;
|
||||
return this.$refs.siteFooter.removeLoader();
|
||||
});
|
||||
// If no VIN was found, stop processing after displaying alert
|
||||
if (!vinLookupResponse) {
|
||||
return;
|
||||
}
|
||||
|
||||
this.vehicleFromLookup = vehicleLookupResponse.data.vehicle;
|
||||
}
|
||||
// Settle promises and get results
|
||||
const promiseResultMap = [
|
||||
{
|
||||
resultKey: "vinLookupResponse",
|
||||
promise: vinLookupResponse,
|
||||
},
|
||||
];
|
||||
|
||||
if (this.needToLookupVehicle && this.isCarIdDifferentFromTheStore) {
|
||||
this.activeVehicleLookupAlertType = vehicleLookupAlertTypes.NOT_MATCHED;
|
||||
const vehicleYearMakeModel = `${this.vehicleFromLookup.year} ${this.vehicleFromLookup.make} ${this.vehicleFromLookup.model}`;
|
||||
const resultMap = await settleAllPromises(promiseResultMap);
|
||||
|
||||
this.$refs.siteFooter.updateButtonText(`Continue with ${vehicleYearMakeModel}`);
|
||||
this.$refs.siteFooter.removeLoader();
|
||||
// Check if the CarId has changed.
|
||||
this.isCarIdDifferent =
|
||||
vinLookupResponse.vehicle.carId !== useMainStore().order.vehicle.carId;
|
||||
// Handle changing car
|
||||
if (
|
||||
this.isCarIdDifferent &&
|
||||
vinLookupResponse.data.carId !== this.previouslyEnteredCarId
|
||||
) {
|
||||
// Display Alert
|
||||
this.previouslyEnteredCarId = vinLookupResponse.data.vehicle.carId;
|
||||
this.customAlertData.vehicleInfo = vinLookupResponse.data.vehicle;
|
||||
this.displayMatchedDifferentVehicleAlert = true;
|
||||
this.isSelectedGlassAvailableForVehicle = await isGlassAvailableForCarId(
|
||||
vinLookupResponse.data.vehicle.carId
|
||||
);
|
||||
|
||||
this.needToLookupVehicle = false;
|
||||
// Update button "Continue with..."
|
||||
this.$refs.siteFooter.updateButtonText(
|
||||
`Continue with ${vinLookup.data.vehicle.year} ${vinLookup.data.vehicle.make} ${vinLookup.data.vehicle.model}`
|
||||
);
|
||||
return this.$refs.siteFooter.removeLoader();
|
||||
}
|
||||
|
||||
|
||||
// Save vehicle, customer, service and registration information
|
||||
await useMainStore().saveRegistrationLicensePlateLookup(
|
||||
{
|
||||
isSelectedGlassAvailableForVehicle: this.isSelectedGlassAvailableForVehicle,
|
||||
vehicleInfo: Object.assign(vinLookup.data.vehicle, { vin: vinLookup.data.vin }),
|
||||
registrationInfo: {
|
||||
licensePlate: this.licensePlate,
|
||||
state: resultMap.registrationZipValidationResponse.state,
|
||||
zipCode: this.registrationZipCode,
|
||||
},
|
||||
},
|
||||
false
|
||||
);8
|
||||
|
||||
return await this.navigateForward();
|
||||
},
|
||||
|
||||
async navigateForward() {
|
||||
// If a different vehicle is found than the one entered and the selected glass is not available for that vehicle then navigate back to "vehicle-damage"
|
||||
// display vehicle changed alert on that page.
|
||||
if (this.isCarIdDifferentFromTheStore && !this.isSelectedGlassAvailableForVehicle) {
|
||||
if (this.isCarIdDifferent && !this.isSelectedGlassAvailableForVehicle) {
|
||||
this.$router.navigate(
|
||||
this.navigationScenarios.SELECTED_VIN_WITH_MISMATCHED_GLASS,
|
||||
this.$route,
|
||||
|
|
@ -183,29 +204,52 @@ export default {
|
|||
await this.navigateForwardWithSingleCarMatch();
|
||||
}
|
||||
},
|
||||
resetActiveAlert() {
|
||||
this.activeVehicleLookupAlertType = null;
|
||||
resetWarningsAndErrors() {
|
||||
this.displayVinNotFoundAlert = false;
|
||||
this.displayMatchedDifferentVehicleAlert = false;
|
||||
},
|
||||
resetVehicleFromLookup() {
|
||||
this.vehicleFromLookup = null;
|
||||
},
|
||||
mounted() {
|
||||
this.attachCustomEvents();
|
||||
},
|
||||
resetDependentState() {},
|
||||
computed: {
|
||||
AlertMatchedDifferentVehicleHeader() {
|
||||
return this.getCmsContent(
|
||||
"AlertMatchedDifferentVehicleWidget",
|
||||
"HeadlineText"
|
||||
).replaceAll("{custom:damage}", getDamageString());
|
||||
},
|
||||
AlertMatchedDifferentVehicleBody() {
|
||||
const vinYmmFound = `${this.customAlertData?.vehicleInfo?.year} ${this.customAlertData?.vehicleInfo?.make} ${this.customAlertData?.vehicleInfo?.model}`;
|
||||
const vinYmmExpected = `${this.mainStore.order.vehicle.year} ${this.mainStore.order.vehicle.make} ${this.mainStore.order.vehicle.model}`;
|
||||
|
||||
return this.getCmsContent("AlertMatchedDifferentVehicleWidget", "BodyText")
|
||||
.replaceAll("{custom:damage}", getDamageString())
|
||||
.replaceAll("{custom:vinYmmFound}", vinYmmFound)
|
||||
.replaceAll("{custom:vinYmmExpected}", vinYmmExpected);
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
licensePlate() {
|
||||
this.resetActiveAlert();
|
||||
this.needToLookupVehicle = true;
|
||||
this.$refs.siteFooter.updateButtonText(
|
||||
this.getCmsContent("SiteFooterWidget", "ForwardButtonText")
|
||||
);
|
||||
},
|
||||
registrationZipCode() {
|
||||
this.resetActiveAlert();
|
||||
this.needToLookupVehicle = true;
|
||||
this.$refs.siteFooter.updateButtonText(
|
||||
this.getCmsContent("SiteFooterWidget", "ForwardButtonText")
|
||||
);
|
||||
},
|
||||
}
|
||||
licensePlate() {
|
||||
this.$refs.siteFooter.updateButtonText(
|
||||
this.getCmsContent("SiteFooterWidget", "ForwardButtonText")
|
||||
);
|
||||
},
|
||||
registrationZipCode() {
|
||||
this.$refs.siteFooter.updateButtonText(
|
||||
this.getCmsContent("SiteFooterWidget", "ForwardButtonText")
|
||||
);
|
||||
},
|
||||
},
|
||||
components: {
|
||||
Form,
|
||||
siteFooter,
|
||||
siteHeader,
|
||||
siteSubHeader,
|
||||
vehicleBanner,
|
||||
textboxQuestion,
|
||||
licensePlateLookupAlerts,
|
||||
isGlassAvailableForCarId
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -820,6 +820,28 @@ export const useMainStore = defineStore({
|
|||
}
|
||||
},
|
||||
|
||||
saveRegistrationLicensePlateLookup({ isSelectedGlassAvailableForVehicle, vehicleInfo, registrationInfo }) {
|
||||
//Reset dependent state when changing
|
||||
if
|
||||
(
|
||||
registrationInfo?.licensePlate !== this.order.vehicle.registration?.licensePlate ||
|
||||
registrationInfo?.state !== this.order.vehicle.registration?.state ||
|
||||
registrationInfo?.zipCode !== this.order.vehicle.registration?.zipCode
|
||||
)
|
||||
{
|
||||
this.resetRegistrationAndDependencies();
|
||||
|
||||
if (!isSelectedGlassAvailableForVehicle) {
|
||||
this.resetDamageAndDependencies();
|
||||
this.resetPartsAndDependencies();
|
||||
}
|
||||
|
||||
//Save new values
|
||||
this.updateVehicle(vehicleInfo);
|
||||
this.updateRegistration(registrationInfo);
|
||||
}
|
||||
},
|
||||
|
||||
resetRegistrationAndDependencies() {
|
||||
this.resetRegistrationState();
|
||||
this.resetGlassPartsState();
|
||||
|
|
|
|||
Loading…
Reference in a new issue