diff --git a/src/layouts/vin-lookup/vin-lookup-alerts/vin-lookup-alerts.vue b/src/layouts/vin-lookup/vin-lookup-alerts/vin-lookup-alerts.vue index f9be7ede..495881b9 100644 --- a/src/layouts/vin-lookup/vin-lookup-alerts/vin-lookup-alerts.vue +++ b/src/layouts/vin-lookup/vin-lookup-alerts/vin-lookup-alerts.vue @@ -3,15 +3,20 @@ id="vin-lookup-alerts-wrapper" :class="wrapperCssClass"> + v-if="isVehicleNotFoundVisible" + class="mt-5" /> + v-if="isTwoIdenticalYMMVehicleFoundVisible" + class="mt-5" /> + v-else-if="isVehicleNotMatchedVisible" + class="mt-5" /> + v-else-if="isPerfectMatchVisible" + class="mt-5" /> + v-else-if="isNoServiceVisible" + class="mt-5" /> + + diff --git a/src/layouts/vin-lookup/vin-lookup.vue b/src/layouts/vin-lookup/vin-lookup.vue index 6585d865..e4b5ea85 100644 --- a/src/layouts/vin-lookup/vin-lookup.vue +++ b/src/layouts/vin-lookup/vin-lookup.vue @@ -13,13 +13,12 @@
+ class="mt-4" /> @@ -48,6 +47,7 @@ import { isGlassAvailableForCarId } from '@/helpers/damage-helper'; import settleAllPromises from '@/helpers/layout-helper'; import routerParams from '@/router/router-constants/router-params'; import { useMainStore } from '@/store'; +import showIssLoadingModal from '@/helpers/loading-modal-helper.js'; // Import Component import baseFormMixin from '@/mixins/base-form-mixin'; @@ -140,7 +140,9 @@ export default { // TODO: Side effects in computed. if (this.vinPopulatedOnPageLoad) { // TODO: Modify to remove side effects in computed + // eslint-disable-next-line vue/no-side-effects-in-computed-properties this.activeVehicleLookupAlertType = vehicleLookupAlertTypes.PERFECT_MATCH; + // eslint-disable-next-line vue/no-side-effects-in-computed-properties this.needToLookupVehicle = false; const lastSixChars = this.vin.substring(11, this.vin.length); return `!X!X!X!X!X!X!X!X!X!X!X${lastSixChars}`; @@ -174,6 +176,7 @@ export default { this.resetActiveAlert(); // Temp solution to reset the 'disabled' style on the Continue button this.$refs.siteFooter.enableForwardAction(); + showIssLoadingModal(true); if (this.needToLookupVehicle) { const vehicleLookupResponse = await this.lookupVehicleByVin(this.vin); @@ -186,6 +189,7 @@ export default { // because the form itself actually passes its client-side validation. // SSR-189 Scenario #4. this.$refs.siteFooter.enableForwardAction(); + showIssLoadingModal(false); return; } @@ -193,6 +197,7 @@ export default { this.activeVehicleLookupAlertType = vehicleLookupAlertTypes.NO_SERVICE; this.resetVehicleFromLookup(); this.$refs.siteFooter.disableForwardButton(); + showIssLoadingModal(false); return; } @@ -220,8 +225,8 @@ export default { `${this.vehicleFromLookup.year} ${this.vehicleFromLookup.make} ${this.vehicleFromLookup.model} ${this.forwardButtonCarStyle}`; this.$refs.siteFooter.updateButtonText(`Continue with ${vehicleYearMakeModelStyle}`); this.needToLookupVehicle = false; - - return null; + showIssLoadingModal(false); + return; } let isSelectedGlassAvailableForVehicle = true; @@ -242,7 +247,7 @@ export default { ); // navigate() doesn't stop the processing flow - return null; + return; } // save vehicle to store if it hasn't already been saved @@ -255,7 +260,7 @@ export default { this.navigationScenarios.CORRECTED_VIN_FROM_POLICY_VEHICLE, this.$route ); - return null; + return; } const partsOrQuestionsResponse = await this.getPartsOrQuestions();