updates to navigation
This commit is contained in:
Kroell
parent
68731cac91
commit
15115716a9
2 changed files with 60 additions and 29 deletions
|
|
@ -10,8 +10,23 @@
|
|||
:display-generic-vehicle-image="false" />
|
||||
<siteSubHeader cms-widget-name="SiteSubHeaderWidget" />
|
||||
<div class="fade-on-route-transition sub-container make-tall mt-5">
|
||||
<licensePlateLookupAlerts
|
||||
:activeAlertType="activeVehicleLookupAlertType"
|
||||
<alert
|
||||
ref="alertVinNotFound"
|
||||
v-if="displayVinNotFoundAlert"
|
||||
class="mb-4"
|
||||
cmsWidgetName="AlertVinNotFoundWidget"
|
||||
alertClass="alert-danger"
|
||||
v-bind:isDismissible="false"
|
||||
/>
|
||||
<alert
|
||||
ref="alertMatchedDifferentVehicle"
|
||||
v-if="displayMatchedDifferentVehicleAlert"
|
||||
class="mb-4"
|
||||
cmsWidgetName="AlertMatchedDifferentVehicleWidget"
|
||||
:manualHeadline="AlertMatchedDifferentVehicleHeader"
|
||||
:manualCopy="AlertMatchedDifferentVehicleBody"
|
||||
alertClass="alert-warning"
|
||||
v-bind:isDismissible="false"
|
||||
/>
|
||||
<textboxQuestion
|
||||
cmsWidgetName="LicensePlateNumberQuestionWidget"
|
||||
|
|
@ -42,7 +57,6 @@
|
|||
</template>
|
||||
<script>
|
||||
// Import Supporting Files
|
||||
import { computed } from 'vue';
|
||||
import vehicleLookupAlertTypes from '@/constants/vehicle-lookup-alert-types';
|
||||
import { fetchCmsContentForPage } from '@/helpers/cms-content-helper';
|
||||
import { settleAllPromises } from '@/helpers/layout-helper';
|
||||
|
|
@ -50,7 +64,7 @@ import { useMainStore } from '@/store';
|
|||
import { errorMessages } from "@/constants/error-messages";
|
||||
import { required, regex } from "@/helpers/validation-rules";
|
||||
import { defineRule } from "vee-validate";
|
||||
import { isGlassAvailableForCarId } from '@/helpers/damage-helper.js';
|
||||
import { getDamageString, isGlassAvailableForCarId } from '@/helpers/damage-helper.js';
|
||||
import { routerParams } from '@/router/router-params.js'
|
||||
|
||||
// Import Component
|
||||
|
|
@ -63,6 +77,7 @@ import siteSubHeader from '@/common-components/site-sub-header/site-sub-header.v
|
|||
import vehicleBanner from '@/common-components/vehicle-banner/vehicle-banner.vue';
|
||||
import textboxQuestion from '@/common-components/textbox-question/textbox-question.vue';
|
||||
import licensePlateLookupAlerts from '@/layouts/license-plate-lookup/license-plate-lookup-alerts/license-plate-lookup-alerts.vue';
|
||||
import alert from "@/ux-components/alert/alert";
|
||||
|
||||
// Define Validation Rules
|
||||
defineRule("license-plate-required", required(errorMessages.LICENSE_PLATE_REQUIRED));
|
||||
|
|
@ -96,7 +111,9 @@ export default {
|
|||
activeVehicleLookupAlertType: null,
|
||||
vehicleFromLookup: null,
|
||||
licensePlate: null,
|
||||
licenseState: null,
|
||||
registrationZipCode: null,
|
||||
serviceZipCode: this.serviceZipCode,
|
||||
displayVinNotFoundAlert: false,
|
||||
displayMatchedDifferentVehicleAlert: false,
|
||||
previouslyEnteredCarId: "",
|
||||
|
|
@ -127,58 +144,72 @@ export default {
|
|||
async forwardButtonAction() {
|
||||
this.resetWarningsAndErrors();
|
||||
|
||||
// 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;
|
||||
}
|
||||
|
||||
// Lookup VIN
|
||||
const vinLookupResponse = useMainStore().lookupVinByPlate(
|
||||
this.licensePlate, this.licenseState);
|
||||
const registrationZipValidationResponse = useMainStore().validateZip( { zip: this.registrationZipCode });
|
||||
|
||||
// Settle promises and get results
|
||||
const promiseResultMap = [
|
||||
{
|
||||
resultKey: "vinLookupResponse",
|
||||
promise: vinLookupResponse,
|
||||
},
|
||||
{
|
||||
resultKey: "registrationZipValidationResponse",
|
||||
promise: registrationZipValidationResponse,
|
||||
},
|
||||
{
|
||||
// If serviceZipCode is not set, then sets the response to the registrationZipValidationResponse. Calls VALIDATE_ZIP if the serviceZipCode is set.
|
||||
resultKey: "serviceZipValidationResponse",
|
||||
promise: this.serviceZipCode
|
||||
? useMainStore().validateZip({zip: this.serviceZipCode})
|
||||
: registrationZipValidationResponse,
|
||||
},
|
||||
];
|
||||
|
||||
const resultMap = await settleAllPromises(promiseResultMap);
|
||||
|
||||
// No VIN found
|
||||
if (resultMap.vinLookupResponse.error) {
|
||||
this.displayVinNotFoundAlert = true;
|
||||
return this.$refs.siteFooter.removeLoader();
|
||||
}
|
||||
// If no VIN was found, stop processing after displaying alert
|
||||
if (!resultMap.vinLookupResponse) {
|
||||
return;
|
||||
}
|
||||
|
||||
const vehicleFromLookup = resultMap.vinLookupResponse.vehicle;
|
||||
|
||||
// Check if the CarId has changed.
|
||||
this.isCarIdDifferent =
|
||||
vinLookupResponse.vehicle.carId !== useMainStore().order.vehicle.carId;
|
||||
vehicleFromLookup.carId !== useMainStore().order.vehicle.carId;
|
||||
// Handle changing car
|
||||
if (
|
||||
this.isCarIdDifferent &&
|
||||
vinLookupResponse.data.carId !== this.previouslyEnteredCarId
|
||||
vehicleFromLookup.carId !== this.previouslyEnteredCarId
|
||||
) {
|
||||
// Display Alert
|
||||
this.previouslyEnteredCarId = vinLookupResponse.data.vehicle.carId;
|
||||
this.customAlertData.vehicleInfo = vinLookupResponse.data.vehicle;
|
||||
this.previouslyEnteredCarId = vehicleFromLookup.carId;
|
||||
this.customAlertData.vehicleInfo = vehicleFromLookup;
|
||||
this.displayMatchedDifferentVehicleAlert = true;
|
||||
this.isSelectedGlassAvailableForVehicle = await isGlassAvailableForCarId(
|
||||
vinLookupResponse.data.vehicle.carId
|
||||
vehicleFromLookup.carId
|
||||
);
|
||||
|
||||
// Update button "Continue with..."
|
||||
this.$refs.siteFooter.updateButtonText(
|
||||
`Continue with ${vinLookup.data.vehicle.year} ${vinLookup.data.vehicle.make} ${vinLookup.data.vehicle.model}`
|
||||
`Continue with ${vehicleFromLookup.year} ${vehicleFromLookup.make} ${vehicleFromLookup.model}`
|
||||
);
|
||||
return this.$refs.siteFooter.removeLoader();
|
||||
}
|
||||
|
||||
// Save vehicle, customer, service and registration information
|
||||
// Save vehicle, license plate, and registration information
|
||||
await useMainStore().saveRegistrationLicensePlateLookup(
|
||||
{
|
||||
isSelectedGlassAvailableForVehicle: this.isSelectedGlassAvailableForVehicle,
|
||||
vehicleInfo: Object.assign(vinLookup.data.vehicle, { vin: vinLookup.data.vin }),
|
||||
vehicleInfo: Object.assign(this.mainStore.order.vehicle),
|
||||
registrationInfo: {
|
||||
licensePlate: this.licensePlate,
|
||||
state: resultMap.registrationZipValidationResponse.state,
|
||||
|
|
@ -211,7 +242,7 @@ export default {
|
|||
},
|
||||
mounted() {
|
||||
this.attachCustomEvents();
|
||||
},
|
||||
},
|
||||
computed: {
|
||||
AlertMatchedDifferentVehicleHeader() {
|
||||
return this.getCmsContent(
|
||||
|
|
@ -249,7 +280,7 @@ export default {
|
|||
vehicleBanner,
|
||||
textboxQuestion,
|
||||
licensePlateLookupAlerts,
|
||||
isGlassAvailableForCarId
|
||||
alert
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -253,7 +253,7 @@ export const useMainStore = defineStore({
|
|||
});
|
||||
},
|
||||
|
||||
async lookupVinByPlate(licensePlate) {
|
||||
async lookupVinByPlate(licensePlate, licenseState) {
|
||||
try {
|
||||
const response = await globalMethods.callHttpClient({
|
||||
method: endpoints.LookupVinByPlate.method,
|
||||
|
|
|
|||
Loading…
Reference in a new issue