diff --git a/src/layouts/license-plate-lookup/license-plate-lookup.vue b/src/layouts/license-plate-lookup/license-plate-lookup.vue index 3d6111ba..c59d327a 100644 --- a/src/layouts/license-plate-lookup/license-plate-lookup.vue +++ b/src/layouts/license-plate-lookup/license-plate-lookup.vue @@ -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 + }, }; diff --git a/src/store/index.js b/src/store/index.js index cc05bf84..a9a7a8cf 100644 --- a/src/store/index.js +++ b/src/store/index.js @@ -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();