diff --git a/src/layouts/address-lookup/address-lookup.vue b/src/layouts/address-lookup/address-lookup.vue index f040fc93..58079a03 100644 --- a/src/layouts/address-lookup/address-lookup.vue +++ b/src/layouts/address-lookup/address-lookup.vue @@ -4,69 +4,67 @@ v-slot="{ meta }" @submit="onSubmit" @invalidSubmit="onInvalidSubmit"> -
-
- -
-
-
-
-
- - - - - - - - -
-
-
-
+
+
+
+ +
+
+
+
+ + + + + + + +
@@ -89,7 +87,10 @@ import { Form } from 'vee-validate'; import { fetchCmsContentForPage } from '@/helpers/cms-content-helper'; import settleAllPromises from '@/helpers/layout-helper'; import routerParams from '@/router/router-constants/router-params'; -import { getDamageString, isGlassAvailableForCarId } from '@/helpers/damage-helper'; +import { + getDamageString, + isGlassAvailableForCarId, +} from '@/helpers/damage-helper'; import vinPagesMixin from '@/mixins/vin-pages-mixin'; import { useMainStore } from '@/store/index.js'; @@ -104,7 +105,7 @@ export default { customerQuestions, alert, // eslint-disable-next-line vue/no-reserved-component-names - Form + Form, }, mixins: [baseFormMixin, vinPagesMixin], async beforeRouteEnter(to, from, next) { @@ -115,8 +116,8 @@ export default { const promiseResultMap = [ { resultKey: 'cmsContent', - promise: cmsContentPromise - } + promise: cmsContentPromise, + }, ]; const resultMap = await settleAllPromises(promiseResultMap); @@ -137,7 +138,7 @@ export default { isCarIdDifferent: false, isSelectedGlassAvailableForVehicle: true, customAlertData: {}, - forwardButtonCarStyle: '' + forwardButtonCarStyle: '', }; }, computed: { @@ -151,10 +152,14 @@ export default { const vinYmmFound = // eslint-disable-next-line max-len `${this.customAlertData?.vehicleInfo?.year} ${this.customAlertData?.vehicleInfo?.make} ${this.customAlertData?.vehicleInfo?.model}`; - const vinYmmExpected = - `${useMainStore().order.vehicle.year} ${useMainStore().order.vehicle.make} ${useMainStore().order.vehicle.model}`; + const vinYmmExpected = `${useMainStore().order.vehicle.year} ${ + useMainStore().order.vehicle.make + } ${useMainStore().order.vehicle.model}`; - return this.getCmsContent('AlertMatchedDifferentVehicleWidget', 'BodyText') + return this.getCmsContent( + 'AlertMatchedDifferentVehicleWidget', + 'BodyText' + ) .replaceAll('{custom:damage}', getDamageString()) .replaceAll('{custom:vinYmmFound}', vinYmmFound) .replaceAll('{custom:vinYmmExpected}', vinYmmExpected); @@ -171,9 +176,16 @@ export default { `${this.customAlertData?.vehicleInfo?.year} ${this.customAlertData?.vehicleInfo?.make} ${this.customAlertData?.vehicleInfo?.model} ${this.customAlertData?.vehicleInfo?.style}`; const vinYmmsExpected = // eslint-disable-next-line max-len - `${useMainStore().order.vehicle.year} ${useMainStore().order.vehicle.make} ${useMainStore().order.vehicle.model} ${useMainStore().order.vehicle.style}`; + `${useMainStore().order.vehicle.year} ${ + useMainStore().order.vehicle.make + } ${useMainStore().order.vehicle.model} ${ + useMainStore().order.vehicle.style + }`; - return this.getCmsContent('AlertMatchedTwoIdenticalYMMVehicleWidget', 'BodyText') + return this.getCmsContent( + 'AlertMatchedTwoIdenticalYMMVehicleWidget', + 'BodyText' + ) .replaceAll('{custom:damage}', getDamageString()) .replaceAll('{custom:vinYmmsFound}', vinYmmsFound) .replaceAll('{custom:vinYmmsExpected}', vinYmmsExpected); @@ -182,21 +194,24 @@ export default { const vinYmmFound = // eslint-disable-next-line max-len `${this.customAlertData?.vehicleInfo?.year} ${this.customAlertData?.vehicleInfo?.make} ${this.customAlertData?.vehicleInfo?.model}`; - const vinYmmExpected = - `${useMainStore().order.vehicle.year} ${useMainStore().order.vehicle.make} ${useMainStore().order.vehicle.model}`; - return (vinYmmFound.toLowerCase() === vinYmmExpected.toLowerCase()); - } + const vinYmmExpected = `${useMainStore().order.vehicle.year} ${ + useMainStore().order.vehicle.make + } ${useMainStore().order.vehicle.model}`; + return vinYmmFound.toLowerCase() === vinYmmExpected.toLowerCase(); + }, }, watch: { customerQuestions: { handler() { - // if they modify one of the lookup fields (address, city, state, zipCode, or lastName), - // then modify the button text back to "Get my personalized quote" - this.$refs.siteFooter.updateButtonText(this.getCmsContent('siteFooterWidget', 'ForwardButtonText')); + // if they modify one of the lookup fields (address, city, state, zipCode, or lastName), + // then modify the button text back to "Get my personalized quote" + this.$refs.siteFooter.updateButtonText( + this.getCmsContent('siteFooterWidget', 'ForwardButtonText') + ); this.resetWarningsAndErrors(); }, - deep: true - } + deep: true, + }, }, mounted() { this.attachCustomEvents(); @@ -224,23 +239,24 @@ export default { const vinLookupResponse = useMainStore().lookupVinByAddress({ licenseLastName: this.customerQuestions.lastName, - licenseStreetAddress: this.customerQuestions.addressQuestions.streetAddress, + licenseStreetAddress: + this.customerQuestions.addressQuestions.streetAddress, licenseZip: this.customerQuestions.addressQuestions.zipCode, - licenseState: this.customerQuestions.addressQuestions.state + licenseState: this.customerQuestions.addressQuestions.state, }); // Settle promises and get results const promiseResultMap = [ { resultKey: 'vinLookupResponse', - promise: vinLookupResponse - } + promise: vinLookupResponse, + }, ]; const resultMap = await settleAllPromises(promiseResultMap); // If VIN Lookup by address is forbidden by State Restrictions then show an alert if (!resultMap.vinLookupResponse.isStatePermissible) { - // State Restrictions forbid lookup by address + // State Restrictions forbid lookup by address this.displayVinLookupByHomeAddressNotAllowedAlert = true; this.$refs.siteFooter.disableForwardButton(); return this.$refs.siteFooter.removeLoader(); @@ -250,12 +266,16 @@ export default { // Handle cases for different amounts of VINS found for the address. if (carsFound.length === 1) { - // Single VIN found + // Single VIN found const carFound = carsFound[0].vehicle; - this.isCarIdDifferent = carFound.carId !== useMainStore().order.vehicle.carId; - if (this.isCarIdDifferent && carFound.carId !== this.previouslyEnteredCarId) { - // Display Alert + this.isCarIdDifferent = + carFound.carId !== useMainStore().order.vehicle.carId; + if ( + this.isCarIdDifferent && + carFound.carId !== this.previouslyEnteredCarId + ) { + // Display Alert this.previouslyEnteredCarId = carFound.carId; this.customAlertData.vehicleInfo = carFound; if (this.isTwoIdenticalYMMVehicleFound) { @@ -265,28 +285,39 @@ export default { this.displayMatchedDifferentVehicleAlert = true; } - this.isSelectedGlassAvailableForVehicle = await isGlassAvailableForCarId(carFound.carId); + this.isSelectedGlassAvailableForVehicle = + await isGlassAvailableForCarId(carFound.carId); // Update button "Continue with..." this.$refs.siteFooter // eslint-disable-next-line max-len - .updateButtonText(`Continue with ${carFound.year} ${carFound.make} ${carFound.model} ${this.forwardButtonCarStyle}`); + .updateButtonText( + `Continue with ${carFound.year} ${carFound.make} ${carFound.model} ${this.forwardButtonCarStyle}` + ); return this.$refs.siteFooter.removeLoader(); } // update data - vehicleInfoToCommit = Object.assign(carFound, { vin: carsFound[0].vin }); + vehicleInfoToCommit = Object.assign(carFound, { + vin: carsFound[0].vin, + }); } else if (carsFound.length > 1) { // If multiple cars were found and one and only one of them matches the carId entered, save the vehicle info - const matchingCars = carsFound.filter((vin) => vin.vehicle.carId === useMainStore().order.vehicle.carId); + const matchingCars = carsFound.filter( + (vin) => + vin.vehicle.carId === useMainStore().order.vehicle.carId + ); if (matchingCars.length === 1) { - vehicleInfoToCommit = Object.assign(matchingCars[0].vehicle, { - vin: matchingCars[0].vin - }); + vehicleInfoToCommit = Object.assign( + matchingCars[0].vehicle, + { + vin: matchingCars[0].vin, + } + ); } } else { - // No VINS found. + // No VINS found. this.displayVinNotFoundAlert = true; this.$refs.siteFooter.disableForwardButton(); return this.$refs.siteFooter.removeLoader(); @@ -295,19 +326,23 @@ export default { // Save vehicle, customer, service and registration information await useMainStore().saveRegistrationAddressLookup( { - isSelectedGlassAvailableForVehicle: this.isSelectedGlassAvailableForVehicle, + isSelectedGlassAvailableForVehicle: + this.isSelectedGlassAvailableForVehicle, vehicleInfo: - Object.keys(vehicleInfoToCommit).length === 0 - ? null - : vehicleInfoToCommit, + Object.keys(vehicleInfoToCommit).length === 0 + ? null + : vehicleInfoToCommit, registrationInfo: { firstName: this.customerQuestions.firstName, lastName: this.customerQuestions.lastName, - address: this.customerQuestions.addressQuestions.streetAddress, + address: + this.customerQuestions.addressQuestions + .streetAddress, city: this.customerQuestions.addressQuestions.city, state: this.customerQuestions.addressQuestions.state, - zipCode: this.customerQuestions.addressQuestions.zipCode - } + zipCode: + this.customerQuestions.addressQuestions.zipCode, + }, }, false ); @@ -315,15 +350,18 @@ export default { return this.navigateForward(carsFound); }, async navigateForward(carsFound) { - // Match vehicles found to vehicles in state. - const matchingCars = carsFound.filter((car) => car.vehicle.carId === useMainStore().order.vehicle.carId); + // Match vehicles found to vehicles in state. + const matchingCars = carsFound.filter( + (car) => + car.vehicle.carId === useMainStore().order.vehicle.carId + ); // 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.isCarIdDifferent - && !this.isSelectedGlassAvailableForVehicle + this.isCarIdDifferent && + !this.isSelectedGlassAvailableForVehicle ) { this.$router.navigate( this.navigationScenarios.SELECTED_VIN_WITH_MISMATCHED_GLASS, @@ -335,7 +373,8 @@ export default { await this.navigateForwardWithSingleCarMatch(); } else { this.$router.navigate( - this.navigationScenarios.CLICKED_FORWARD_WITH_MULTIPLE_VEHICLES, + this.navigationScenarios + .CLICKED_FORWARD_WITH_MULTIPLE_VEHICLES, this.$route, {}, {}, @@ -348,7 +387,7 @@ export default { this.displayMatchedDifferentVehicleAlert = false; this.displayVinLookupByHomeAddressNotAllowedAlert = false; this.$refs.siteFooter.enableForwardAction(); - } - } + }, + }, }; diff --git a/src/layouts/address-vehicles/address-vehicles.vue b/src/layouts/address-vehicles/address-vehicles.vue index 142eee57..397b0f69 100644 --- a/src/layouts/address-vehicles/address-vehicles.vue +++ b/src/layouts/address-vehicles/address-vehicles.vue @@ -1,66 +1,84 @@ diff --git a/src/layouts/capability-questions/capability-questions.vue b/src/layouts/capability-questions/capability-questions.vue index bfa557f0..c47b4e35 100644 --- a/src/layouts/capability-questions/capability-questions.vue +++ b/src/layouts/capability-questions/capability-questions.vue @@ -1,22 +1,22 @@ diff --git a/src/layouts/license-plate-lookup/license-plate-lookup.vue b/src/layouts/license-plate-lookup/license-plate-lookup.vue index 3128d9e9..a58830d5 100644 --- a/src/layouts/license-plate-lookup/license-plate-lookup.vue +++ b/src/layouts/license-plate-lookup/license-plate-lookup.vue @@ -4,72 +4,70 @@ v-slot="{ meta }" @submit="onSubmit" @invalidSubmit="onInvalidSubmit"> -
-
- -
-
-
-
-
- - - - - - - - -
-
-
-
+
+
+
+ +
+
+
+
+ + + + + + + +
@@ -83,7 +81,10 @@ import { useMainStore } from '@/store'; import errorMessages from '@/constants/error-messages'; import { required } from '@/helpers/validation-rules'; import { defineRule, Form } from 'vee-validate'; -import { getDamageString, isGlassAvailableForCarId } from '@/helpers/damage-helper.js'; +import { + getDamageString, + isGlassAvailableForCarId, +} from '@/helpers/damage-helper.js'; import routerParams from '@/router/router-constants/router-params.js'; import states from '@/constants/states'; @@ -100,7 +101,10 @@ import dropdownQuestion from '@/digital-components/dropdown-question/dropdown-qu import alert from '@/ux-components/alert/alert.vue'; // Define Validation Rules -defineRule('license-plate-required', required(errorMessages.LICENSE_PLATE_REQUIRED)); +defineRule( + 'license-plate-required', + required(errorMessages.LICENSE_PLATE_REQUIRED) +); defineRule('state-required', required(errorMessages.STATE_REQUIRED)); export default { @@ -114,7 +118,7 @@ export default { vehicleBanner, textboxQuestion, dropdownQuestion, - alert + alert, }, mixins: [baseFormMixin, vinPagesMixin], async beforeRouteEnter(to, from, next) { @@ -125,8 +129,8 @@ export default { const promiseResultMap = [ { resultKey: 'cmsContent', - promise: cmsContentPromise - } + promise: cmsContentPromise, + }, ]; const resultMap = await settleAllPromises(promiseResultMap); @@ -149,7 +153,7 @@ export default { isCarIdDifferent: false, customAlertData: {}, isSelectedGlassAvailableForVehicle: true, - forwardButtonCarStyle: '' + forwardButtonCarStyle: '', }; }, computed: { @@ -163,10 +167,12 @@ export default { const vinYmmFound = // eslint-disable-next-line max-len `${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}`; + const vinYmmExpected = `${this.mainStore.order.vehicle.year} ${this.mainStore.order.vehicle.make} ${this.mainStore.order.vehicle.model}`; - return this.getCmsContent('AlertMatchedDifferentVehicleWidget', 'BodyText') + return this.getCmsContent( + 'AlertMatchedDifferentVehicleWidget', + 'BodyText' + ) .replaceAll('{custom:damage}', getDamageString()) .replaceAll('{custom:vinYmmFound}', vinYmmFound) .replaceAll('{custom:vinYmmExpected}', vinYmmExpected); @@ -185,7 +191,10 @@ export default { // eslint-disable-next-line max-len `${this.mainStore.order.vehicle.year} ${this.mainStore.order.vehicle.make} ${this.mainStore.order.vehicle.model} ${this.mainStore.order.vehicle.style}`; - return this.getCmsContent('AlertMatchedTwoIdenticalYMMVehicleWidget', 'BodyText') + return this.getCmsContent( + 'AlertMatchedTwoIdenticalYMMVehicleWidget', + 'BodyText' + ) .replaceAll('{custom:damage}', getDamageString()) .replaceAll('{custom:vinYmmsFound}', vinYmmsFound) .replaceAll('{custom:vinYmmsExpected}', vinYmmsExpected); @@ -194,23 +203,26 @@ export default { const vinYmmFound = // eslint-disable-next-line max-len `${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 (vinYmmFound.toLowerCase() === vinYmmExpected.toLowerCase()); + const vinYmmExpected = `${this.mainStore.order.vehicle.year} ${this.mainStore.order.vehicle.make} ${this.mainStore.order.vehicle.model}`; + return vinYmmFound.toLowerCase() === vinYmmExpected.toLowerCase(); }, stateOptions: { get() { return states; - } - } + }, + }, }, watch: { licensePlate() { - this.$refs.siteFooter.updateButtonText(this.getCmsContent('SiteFooterWidget', 'ForwardButtonText')); + this.$refs.siteFooter.updateButtonText( + this.getCmsContent('SiteFooterWidget', 'ForwardButtonText') + ); }, registrationZipCode() { - this.$refs.siteFooter.updateButtonText(this.getCmsContent('SiteFooterWidget', 'ForwardButtonText')); - } + this.$refs.siteFooter.updateButtonText( + this.getCmsContent('SiteFooterWidget', 'ForwardButtonText') + ); + }, }, mounted() { this.attachCustomEvents(); @@ -221,7 +233,8 @@ export default { return useMainStore().order.vehicle.carId !== null; }, loadDefaultsFromStore() { - this.customerQuestions = this.mainStore.customerData.addressQuestions.state; + this.customerQuestions = + this.mainStore.customerData.addressQuestions.state; }, attachCustomEvents() { this.prependActionToMethod(this, this.forwardButtonAction, () => { @@ -238,14 +251,17 @@ export default { this.resetWarningsAndErrors(); // Lookup VIN - const vinLookupResponse = await useMainStore().lookupVinByPlate(this.licensePlate, this.licenseState); + const vinLookupResponse = await useMainStore().lookupVinByPlate( + this.licensePlate, + this.licenseState + ); // Settle promises and get results const promiseResultMap = [ { resultKey: 'vinLookupResponse', - promise: vinLookupResponse - } + promise: vinLookupResponse, + }, ]; const resultMap = await settleAllPromises(promiseResultMap); @@ -265,8 +281,8 @@ export default { vehicleFromLookup.carId !== useMainStore().order.vehicle.carId; // Handle changing car if ( - this.isCarIdDifferent - && vehicleFromLookup.carId !== this.previouslyEnteredCarId + this.isCarIdDifferent && + vehicleFromLookup.carId !== this.previouslyEnteredCarId ) { // Display Alert this.previouslyEnteredCarId = vehicleFromLookup.carId; @@ -279,24 +295,30 @@ export default { this.displayMatchedDifferentVehicleAlert = true; } - this.isSelectedGlassAvailableForVehicle = await isGlassAvailableForCarId(vehicleFromLookup.carId); + this.isSelectedGlassAvailableForVehicle = + await isGlassAvailableForCarId(vehicleFromLookup.carId); // Update button "Continue with..." this.$refs.siteFooter // eslint-disable-next-line max-len - .updateButtonText(`Continue with ${vehicleFromLookup.year} ${vehicleFromLookup.make} ${vehicleFromLookup.model} ${this.forwardButtonCarStyle}`); + .updateButtonText( + `Continue with ${vehicleFromLookup.year} ${vehicleFromLookup.make} ${vehicleFromLookup.model} ${this.forwardButtonCarStyle}` + ); return this.$refs.siteFooter.removeLoader(); } // Save vehicle, license plate, and registration information await useMainStore().saveRegistrationLicensePlateLookup( { - isSelectedGlassAvailableForVehicle: this.isSelectedGlassAvailableForVehicle, - vehicleInfo: Object.assign(vinLookupResponse.data.vehicle, { vin: vinLookupResponse.data.vin }), + isSelectedGlassAvailableForVehicle: + this.isSelectedGlassAvailableForVehicle, + vehicleInfo: Object.assign(vinLookupResponse.data.vehicle, { + vin: vinLookupResponse.data.vin, + }), registrationInfo: { licensePlate: this.licensePlate, - state: this.licenseState - } + state: this.licenseState, + }, }, false ); @@ -307,7 +329,10 @@ export default { // 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.isCarIdDifferent && !this.isSelectedGlassAvailableForVehicle) { + if ( + this.isCarIdDifferent && + !this.isSelectedGlassAvailableForVehicle + ) { this.$router.navigate( this.navigationScenarios.SELECTED_VIN_WITH_MISMATCHED_GLASS, this.$route, @@ -321,8 +346,8 @@ export default { resetWarningsAndErrors() { this.displayVinNotFoundAlert = false; this.displayMatchedDifferentVehicleAlert = false; - } - } + }, + }, }; diff --git a/src/layouts/molding-questions/molding-questions.vue b/src/layouts/molding-questions/molding-questions.vue index db7a7243..4926db11 100644 --- a/src/layouts/molding-questions/molding-questions.vue +++ b/src/layouts/molding-questions/molding-questions.vue @@ -1,23 +1,23 @@ diff --git a/src/layouts/order-confirmation/order-confirmation.vue b/src/layouts/order-confirmation/order-confirmation.vue index b7e1af75..40aef06a 100644 --- a/src/layouts/order-confirmation/order-confirmation.vue +++ b/src/layouts/order-confirmation/order-confirmation.vue @@ -32,7 +32,9 @@ overnightDropOffWidgetName="AddToCalendar_OvernightDropOff" allDayDropOffWidgetName="AddToCalendar_AllDayDropOff" sameDayDropOffWidgetName="AddToCalendar_SameDayDropOff" - :serviceLocationFullAddress="serviceLocationFullAddress" + :serviceLocationFullAddress=" + serviceLocationFullAddress + " :providerFullAddress="providerFullAddress" :appointmentType="appointmentType" :scheduleDate="appointmentDate" @@ -40,12 +42,10 @@ :scheduleEndTime="appointmentEndTime" />
-
+ v-html="appointmentWordingText">
-
+ v-html="appointmentWordingText2">