diff --git a/src/constants/error-messages.js b/src/constants/error-messages.js index 65acc9ae..ace5e564 100644 --- a/src/constants/error-messages.js +++ b/src/constants/error-messages.js @@ -25,6 +25,11 @@ const errorMessages = Object.freeze({ EMAIL_ADDRESS_FORMAT: 'Please enter a valid email address.', SERVICE_ZIP_REQUIRED: 'ZIP code is required', SERVICE_ZIP_FORMAT: 'Invalid ZIP, please enter a new ZIP (5 characters)', + MOBILE_SERVICE_ZIP_FORMAT: 'Invalid ZIP code', + NO_SERVICE_IN_ZIP: (zip) => `We're sorry, but we don't offer service in ${zip} at this time.`, + PROVIDER_REQUIRED: 'Please select a provider.', + INVALID_ZIP: 'The ZIP you entered was invalid. Please enter a valid ZIP.', + ZIP_CODE_NOT_SERVICED_FOR_VEHICLE: 'We do not currently offer glass service for your vehicle in this ZIP code. Please try another ZIP code.', VIN_REQUIRED: 'Please enter your VIN', VIN_FORMAT: // eslint-disable-next-line max-len diff --git a/src/digital-components/button-question/button-question.vue b/src/digital-components/button-question/button-question.vue index 5c380612..da7eb5c7 100644 --- a/src/digital-components/button-question/button-question.vue +++ b/src/digital-components/button-question/button-question.vue @@ -294,6 +294,11 @@ export default { this.resetField({ value: newValue }); + }, + answers() { + this.resetField({ + value: this.modelValue + }); } }, beforeMount() { diff --git a/src/digital-components/modal/modal.vue b/src/digital-components/modal/modal.vue index 3875cf0a..8f952d6b 100644 --- a/src/digital-components/modal/modal.vue +++ b/src/digital-components/modal/modal.vue @@ -86,6 +86,10 @@ export default { modalPosition: { type: String, default: modalPositions.edge + }, + allowInvalidSubmit: { + type: Boolean, + default: false } }, emits: ['footer-button-event', 'isModalOpened'], @@ -123,7 +127,7 @@ export default { methods: { async validateAndEmit() { const validationResult = await this.validate(); - if (validationResult.valid) { + if (validationResult.valid || this.allowInvalidSubmit) { this.$emit('footer-button-event'); } }, diff --git a/src/digital-components/text-block/text-block.vue b/src/digital-components/text-block/text-block.vue index f6d0d591..f6db4887 100644 --- a/src/digital-components/text-block/text-block.vue +++ b/src/digital-components/text-block/text-block.vue @@ -51,7 +51,7 @@ export default { props: { customText: String, // used to allow the insert of token values into textblock justifyText: String, // left, right, center - typeStyle: String, // h1-h6, body, small, label, caption + typeStyle: String, // h1-h6, body, small, label, caption, disclaimer // (see Figma or Confluence documentation) fontWeight: String, // bold=500, default is 400 cmsWidgetName: String, @@ -109,5 +109,12 @@ export default { &.dark { color: $black; } + &.disclaimer { + color: $lighter-gray; + font-weight: $font-weight-light; + font-size: .8125rem; + font-style: italic; + margin-top: .625rem; + } } diff --git a/src/digital-components/textbox-question/textbox-question.vue b/src/digital-components/textbox-question/textbox-question.vue index 7992abb7..028617e7 100644 --- a/src/digital-components/textbox-question/textbox-question.vue +++ b/src/digital-components/textbox-question/textbox-question.vue @@ -250,8 +250,10 @@ export default { this.$emit('click-event'); } }, - clickedTextButton() { - if (this.meta.valid) { + async clickedTextButton() { + const result = await validate(this.value, this.validationRules); + if (result.valid) { + this.handleChange(this.value); this.$emit('click-event'); } } @@ -378,8 +380,8 @@ input::-webkit-date-and-time-value { .form-control { border: $border-input; border-radius: $border-radius; - min-height: 3rem; - max-height: 3rem; + min-height: 2.8125rem; + max-height: 2.8125rem; padding: 0.75rem 1rem; letter-spacing: inherit; box-shadow: $box-shadow-input; diff --git a/src/iss-components/google-map/google-map.vue b/src/iss-components/google-map/google-map.vue index 4f2fa023..686cf5ec 100644 --- a/src/iss-components/google-map/google-map.vue +++ b/src/iss-components/google-map/google-map.vue @@ -55,7 +55,7 @@ export default { const { AdvancedMarkerElement, PinElement } = await window.google.maps.importLibrary('marker'); markers?.forEach((marker, index) => { const pinElement = new PinElement({ - glyph: String.fromCharCode('A'.charCodeAt(0) + index), + glyphText: String.fromCharCode('A'.charCodeAt(0) + index), glyphColor: '#000000', borderColor: '#000000' }); diff --git a/src/iss-components/shop-list-button/__snapshots__/shop-list-button.spec.js.snap b/src/iss-components/shop-list-button/__snapshots__/shop-list-button.spec.js.snap index 200d67d6..209c7610 100644 --- a/src/iss-components/shop-list-button/__snapshots__/shop-list-button.spec.js.snap +++ b/src/iss-components/shop-list-button/__snapshots__/shop-list-button.spec.js.snap @@ -2,13 +2,13 @@ exports[`Shop list button should render correctly with all relevant props 1`] = ` - + `; exports[`Shop list button should render correctly with required props 1`] = ` - + `; diff --git a/src/layouts/service-location/appointment-type-question/appointment-type-question.vue b/src/layouts/service-location/appointment-type-question/appointment-type-question.vue index 41c0353d..32dda198 100644 --- a/src/layouts/service-location/appointment-type-question/appointment-type-question.vue +++ b/src/layouts/service-location/appointment-type-question/appointment-type-question.vue @@ -57,16 +57,12 @@ export default { return retCms; }, answersToDisplay() { - const shouldShowMobile = this.isServiceableMobile && this.isItacOrNoComp; - const shouldShowMobileNotITACNotNoComp = this.isServiceableMobile && !this.isItacOrNoComp; + const shouldShowMobile = this.isServiceableMobile; const shouldShowInshop = this.isServiceableInshop; - const shouldShowDropoff = this.isServiceableInshop && !useMainStore().damage.isRepair; return this.answersFromCms ? this.answersFromCms.filter((answer) => ( (answer.Name === AppointmentTypeStrings.IN_SHOP && shouldShowInshop) || (answer.Name === AppointmentTypeStrings.MOBILE && shouldShowMobile) - || (answer.Name === AppointmentTypeStrings.MOBILE_NOT_ITAC_AND_NOT_NOCOMP && shouldShowMobileNotITACNotNoComp) - || (answer.Name === AppointmentTypeStrings.DROP_OFF && shouldShowDropoff) )) : []; }, @@ -97,14 +93,9 @@ export default { // If there is only one option to display and that option is 'Mobile' then select it if ( newValue.length === 1 - && newValue.findIndex((answer) => (answer.Name === AppointmentTypeStrings.MOBILE - || answer.Name === AppointmentTypeStrings.MOBILE_NOT_ITAC_AND_NOT_NOCOMP)) !== -1 + && newValue.findIndex((answer) => (answer.Name === AppointmentTypeStrings.MOBILE)) !== -1 ) { - if (this.isItacOrNoComp) { - this.selectedValues = AppointmentTypeStrings.MOBILE; - } else { - this.selectedValues = AppointmentTypeStrings.MOBILE_NOT_ITAC_AND_NOT_NOCOMP; - } + this.selectedValues = AppointmentTypeStrings.MOBILE; } }, immediate: true @@ -112,11 +103,7 @@ export default { isMobileOnly: { handler(newValue) { if (newValue) { - if (this.isItacOrNoComp) { - this.selectedValues = AppointmentTypeStrings.MOBILE; - } else { - this.selectedValues = AppointmentTypeStrings.MOBILE_NOT_ITAC_AND_NOT_NOCOMP; - } + this.selectedValues = AppointmentTypeStrings.MOBILE; } } } diff --git a/src/layouts/service-location/service-location.vue b/src/layouts/service-location/service-location.vue index 92f3ea7e..e38bc1cd 100644 --- a/src/layouts/service-location/service-location.vue +++ b/src/layouts/service-location/service-location.vue @@ -62,26 +62,39 @@ cmsWidgetName="AppointmentTypeQuestionWidget" validationRules="option-required" /> - + cmsWidgetName="ShopAddressWidget" + @zip-updated="handleInShopZipUpdated" /> +
+ +
+ {{ mobileZipError }} +
+ +
{ - if ( - value.addressQuestions.streetAddress === '' - || value.addressQuestions.city === '' - || value.addressQuestions.state === '' - || value.addressQuestions.zipCode === '' - || value.isVehicleProtected == null - ) { - return errorMessages.MOBILE_LOCATION_REQUIRED; - } - return true; -}); -defineRule('selection-required', required(errorMessages.OPTION_REQUIRED)); +import shopAddress from '@/layouts/service-location/shop-address/shop-address.vue'; +import serviceZipQuestion from '@/layouts/service-location/service-zip-question/service-zip-question.vue'; +import widgetFields from '@/constants/cms-widget-fields'; const RECAL_MODAL_REF_NAME = 'RecalModal'; const SITE_FOOTER_REF_NAME = 'siteFooter'; @@ -148,15 +149,16 @@ export default { name: 'service-location', components: { alert, + textBlock, appointmentTypeQuestion, contentGroupModal, - mobileLocationModalQuestions, siteFooter, siteHeader, siteSubHeader, // eslint-disable-next-line vue/no-reserved-component-names Form, - shopAddress + shopAddress, + serviceZipQuestion }, mixins: [baseFormMixin], async beforeRouteEnter(to, from, next) { @@ -232,8 +234,12 @@ export default { mobileProviderNumber: null, zipContainsMilitaryBase: false, zipCodeCtu: null, + mobileZipCode: '', + mobileZipError: '', + showMobileOption: false, RECAL_MODAL_REF_NAME, - SITE_FOOTER_REF_NAME + SITE_FOOTER_REF_NAME, + errorMessages }; }, computed: { @@ -246,35 +252,6 @@ export default { answersFromCms() { return this.getCmsContent('ServiceTypeQuestionWidget', 'Answers'); }, - mobileLocationQuestions: { - get() { - return { - addressQuestions: { - streetAddress: this.streetAddress, - streetAddress2: this.streetAddress2, - city: this.city, - state: this.state, - zipCode: this.zipCode - }, - isVehicleProtected: this.isVehicleProtected - }; - }, - set(newValue) { - this.streetAddress = newValue.addressQuestions.streetAddress; - this.streetAddress2 = newValue.addressQuestions.streetAddress2; - this.city = newValue.addressQuestions.city; - this.state = newValue.addressQuestions.state; - this.zipCode = newValue.addressQuestions.zipCode; - this.isVehicleProtected = newValue.isVehicleProtected; - - if (newValue.zipCode !== this.zipCode) { - if (!this.isMobile) { - this.selectedAppointmentType = null; - } - this.selectedProvider = null; - } - } - }, isServiceableMobile() { if (this.isRecalibrationServiceableMobile !== null) { return ( @@ -301,15 +278,10 @@ export default { ); }, isAppointmentTypeDisplayed() { - return this.zipCode && !this.displayNoShopsAlert; + return this.zipCode && !this.displayNoShopsAlert && this.showMobileOption; }, isMobile() { - return ( - this.selectedAppointmentType - === AppointmentTypeStrings.MOBILE - || this.selectedAppointmentType - === AppointmentTypeStrings.MOBILE_NOT_ITAC_AND_NOT_NOCOMP - ); + return this.selectedAppointmentType === AppointmentTypeStrings.MOBILE }, requiresInshopRecalibration() { // Specifically check for isRecalibrationServiceableMobile === false, not null or true. @@ -341,6 +313,9 @@ export default { displayServiceableMobileOnly() { return this.isServiceableMobile && !this.isServiceableInshop; }, + displayMobileFeeDisclaimer() { + return this.mainStore.isNoComp || this.mainStore.isITAC; + }, navigateBackScenario() { const { isNoComp, isITAC } = useMainStore(); return isNoComp || isITAC @@ -349,7 +324,10 @@ export default { }, isBigTruck() { return this.mainStore.order.vehicle.isBigTruck; - } + }, + mobileZipPlaceholder() { + return this.getCmsContent('MobileZipPlaceHolderWidget', widgetFields.TEXT_BLOCK_WIDGET.TEXT); + }, }, methods: { arePagePrerequisitesValid() { @@ -445,6 +423,7 @@ export default { if (serviceabilityDetails) { this.setServiceabilityDetails(serviceabilityDetails); + this.showMobileOption = this.isServiceableMobile; } if (mobileFeePart) { @@ -503,6 +482,65 @@ export default { serviceabilityDetails.isGlassServiceableMobile; this.isRecalibrationServiceableMobile = serviceabilityDetails.isRecalibrationServiceableMobile; + }, + async updateMobileZip() { + this.mobileZipError = ''; + + const zipCodeData = await getMobileZipCodeData(this.mobileZipCode); + + if (!zipCodeData.isValid) { + this.mobileZipError = errorMessages.INVALID_ZIP; + } else if (!zipCodeData.isServiceable) { + this.mobileZipError = errorMessages.NO_SERVICE_IN_ZIP(this.mobileZipCode); + } else { + this.zipCode = this.mobileZipCode; + this.setCtuForMobile(zipCodeData.zipCodeCtu); + this.setContainsMilitaryBase(zipCodeData.containsMilitaryBase); + + const serviceabilityDetailsPromise = getServiceabilityDetails(this.mobileZipCode); + serviceabilityDetailsPromise.then((result) => { + const details = result.data; + if (details) { + this.setServiceabilityDetails(details); + } + }); + + const providersPromise = useMainStore().getProviders(this.mobileZipCode); + providersPromise.then((result) => { + const providers = result.data; + if (providers) { + this.setMobileProviderNumber(providers.mobileProviderNumber); + if(providers.shopProviders.length > 0) { + this.selectedProvider = providers.shopProviders[0]; + } + } + }); + } + }, + async handleInShopZipUpdated(newZip) { + this.zipCode = newZip; + const zipCodeData = await getZipCodeData(this.zipCode); + this.setCtuForMobile(zipCodeData.zipCodeCtu); + this.setContainsMilitaryBase(zipCodeData.containsMilitaryBase); + + const serviceabilityDetailsPromise = getServiceabilityDetails(this.zipCode); + serviceabilityDetailsPromise.then((result) => { + const details = result.data; + if (details) { + this.setServiceabilityDetails(details); + this.showMobileOption = this.isServiceableMobile; + } + }); + } + }, + watch: { + mobileZipCode(newZip) { + if(newZip !== '') { + this.updateMobileZip(); + } + }, + selectedAppointmentType() { + this.mobileZipCode = ''; } } }; @@ -510,7 +548,6 @@ export default { diff --git a/src/layouts/service-location/shop-address/shop-address.vue b/src/layouts/service-location/shop-address/shop-address.vue index ce3e3deb..2417a52a 100644 --- a/src/layouts/service-location/shop-address/shop-address.vue +++ b/src/layouts/service-location/shop-address/shop-address.vue @@ -6,13 +6,6 @@ v-if="isDisplayed" class="shop-address" aria-live="polite"> -
{{ questionText }}
@@ -32,9 +25,9 @@ :ref="modalName" :headerText="modalHeaderText" :onModalOpenedCallback="onModalOpened" - :onModalClosedCallback="onModalClosed" :footerButtonText="modalFooterText" :modalPosition="modalPositions.center" + :allowInvalidSubmit="true" @footerButtonEvent="updateSelectedProvider"> - +
+ {{ errorMessage }} +
@@ -96,11 +90,17 @@ import googleMap from '@/iss-components/google-map/google-map.vue'; import baseMixin from '@/mixins/base-mixin.js'; import { toTitleCase } from '@/helpers/text-helper.js'; import { markRaw } from 'vue'; -import { getServiceabilityDetails, getZipCodeData,getAvailabilityRating } from '@/helpers/service-location-helper'; +import { getAvailabilityRating } from '@/helpers/service-location-helper'; import { useMainStore } from '@/store'; import widgetFields from '@/constants/cms-widget-fields'; import { dropdownVariants, modalPositions } from '@/constants/component-variants'; +import errorMessages from '@/constants/error-messages'; +import { defineRule } from 'vee-validate'; +import { required } from '@/helpers/validation-rules'; +defineRule('option-required', required(errorMessages.PROVIDER_REQUIRED)); + +const SERVICE_ZIP_QUESTION_REF_NAME = 'serviceZipCodeQuestion'; export default { name: 'shop-address', @@ -130,21 +130,21 @@ export default { return { toTitleCase, serviceZipCodeTextInputId: '', - displayInvalidZipAlert: false, internalZipcode: this.serviceZipcode, internalProviderNumber: this.modelValue.providerNumber, searchRadiusQuestionWidgetName: 'SearchRadiusQuestionWidget', textboxQuestionWidgetName: 'ChangeLocationZipQuestionWidget', - alertInvalidZipWidgetName: 'AlertInvalidZipWidget', shopListButton: markRaw(shopListButton), - searchRadiusInMiles: 100, + searchRadiusInMiles: "25", nearbyShops: [], modalPositions, dropdownVariants, - renderServiceZip: true + renderServiceZip: true, + errorMessage: '', + SERVICE_ZIP_QUESTION_REF_NAME }; }, - emits: ['update:modelValue'], + emits: ['update:modelValue', 'zip-updated'], computed: { questionText() { return this.getCmsContent(this.cmsWidgetName, widgetFields.INPUT_QUESTION_WIDGET.QUESTION_TEXT); @@ -199,12 +199,17 @@ export default { }; }); }, - searchRadiusOptions() { + searchRadiusArray() { const options = this.getCmsContent(this.searchRadiusQuestionWidgetName, widgetFields.INPUT_QUESTION_WIDGET.ANSWERS); + return options; + }, + searchRadiusOptions() { const optionsObj = {}; - options.forEach(option => { - optionsObj[option.Name] = option.Text; - }); + if(this.searchRadiusArray) { + this.searchRadiusArray.forEach(option => { + optionsObj[option.Name] = option.Text; + }); + } return optionsObj; }, providerAddresses() { @@ -217,19 +222,30 @@ export default { }, watch: { async internalZipcode() { - await this.resetsOnZipInput(); + const shopsUpdated = await this.updateShops(); + if (shopsUpdated) { + this.$refs[SERVICE_ZIP_QUESTION_REF_NAME].internalZipcode = ''; + } }, async searchRadiusInMiles() { - this.nearbyShops = await this.getNearbyShops(this.searchRadiusInMiles); + await this.updateShops(); + }, + nearbyShops(newShops) { + if (!newShops.find(shop => shop.providerNumber === this.internalProviderNumber)) { + this.internalProviderNumber = ''; + } } }, methods: { - resetAlerts() { - this.displayInvalidZipAlert = false; - }, - async resetsOnZipInput() { - this.resetAlerts(); - this.nearbyShops = await this.getNearbyShops(this.searchRadiusInMiles); + async updateShops() { + this.errorMessage = ''; + const result = await this.getNearbyShops(this.searchRadiusInMiles); + if (result.length === 0) { + this.errorMessage = errorMessages.ZIP_CODE_NOT_SERVICED_FOR_VEHICLE; + } + else { + this.nearbyShops = await this.getNearbyShops(this.searchRadiusInMiles); + } }, openModal() { this.$refs[this.modalName].openModal(); @@ -239,26 +255,19 @@ export default { }, onModalOpened() { this.internalZipcode = this.serviceZipcode; - this.searchRadiusInMiles = 25; - this.resetsOnZipInput().then(() => { + this.searchRadiusInMiles = "25"; + this.updateShops().then(() => { this.internalProviderNumber = this.nearbyShops[0]?.providerNumber; }); this.forceServiceZipRerender(); }, - onModalClosed() { - this.internalZipcode = this.serviceZipcode; - this.resetsOnZipInput().then(() => { - this.internalProviderNumber = this.nearbyShops[0]?.providerNumber; - }); - }, async updateSelectedProvider() { - if (this.internalProviderNumber !== this.modelValue.providerNumber) { - const selectedShop = this.nearbyShops.find(shop => shop.providerNumber === this.internalProviderNumber); - if (selectedShop) { - this.$emit('update:modelValue', selectedShop); - } + const selectedShop = this.nearbyShops.find(shop => shop.providerNumber === this.internalProviderNumber); + if (selectedShop) { + this.$emit('update:modelValue', selectedShop); + this.$emit('zip-updated', this.internalZipcode); + this.closeModal(); } - this.closeModal(); }, async getNearbyShops(radiusInMiles) { const result = await useMainStore().getProviders(this.internalZipcode, radiusInMiles); @@ -336,5 +345,22 @@ export default { :deep(#map) { height: 27rem; } + :deep(.textbox-question) { + &.has-error { + input.form-control { + border: $border-input; + &:focus { + border: $border-input-focus; + } + } + } + .form-label { + font-weight: $font-weight-normal; + color: $darker-gray; + } + .btn-primary { + margin-bottom: 1.25rem; + } + } } diff --git a/src/layouts/service-location/shop-question/shop-question.vue b/src/layouts/service-location/shop-question/shop-question.vue deleted file mode 100644 index fdbbdd79..00000000 --- a/src/layouts/service-location/shop-question/shop-question.vue +++ /dev/null @@ -1,294 +0,0 @@ - - - - - diff --git a/src/store/index.js b/src/store/index.js index 00995f29..ef1b7f52 100644 --- a/src/store/index.js +++ b/src/store/index.js @@ -1798,7 +1798,6 @@ export const useMainStore = defineStore({ this.order.vehicle.registration.lastName = registrationInfo?.lastName; }, updateServiceLocation(serviceLocationInfo) { - console.log('Updating service location info:', serviceLocationInfo); this.order.serviceLocation.address = serviceLocationInfo.address; this.order.serviceLocation.address2 = serviceLocationInfo.address2; this.order.serviceLocation.city = serviceLocationInfo.city; @@ -2708,7 +2707,6 @@ export const useMainStore = defineStore({ }, saveServiceLocation(serviceLocationInfo) { - console.log('Saving service location info:', serviceLocationInfo); if (this.order.serviceLocation) { if ( serviceLocationInfo.zipCode !== this.order.serviceLocation.zipCode @@ -2719,7 +2717,6 @@ export const useMainStore = defineStore({ || serviceLocationInfo.appointmentType !== this.order.serviceLocation.appointmentType ) { - console.log('Service location info has changed, resetting dependent state.'); this.resetSchedule(); } } diff --git a/src/styles/common-typography-styles.scss b/src/styles/common-typography-styles.scss index cdaf2ebf..a745b5d8 100644 --- a/src/styles/common-typography-styles.scss +++ b/src/styles/common-typography-styles.scss @@ -115,21 +115,3 @@ caption, font-weight: 800; font-style: normal; } - -@font-face { - font-family: "Urbanist"; - src: - url("@/assets/fonts/Urbanist-MediumItalic.woff2") format("woff2"), - url("@/assets/fonts/Urbanist-MediumItalic.woff") format("woff"); - font-weight: 500; - font-style: italic; -} - -@font-face { - font-family: "Urbanist"; - src: - url("@/assets/fonts/Urbanist-BoldItalic.woff2") format("woff2"), - url("@/assets/fonts/Urbanist-BoldItalic.woff") format("woff"); - font-weight: 700; - font-style: italic; -} \ No newline at end of file diff --git a/src/styles/ux-variables.scss b/src/styles/ux-variables.scss index 206716b6..b571d788 100644 --- a/src/styles/ux-variables.scss +++ b/src/styles/ux-variables.scss @@ -76,6 +76,7 @@ $heritage-blue-secondary: #167cac; // Darker gray $darker-gray: #525656; +$lighter-gray: #9aa1a3; // scss-docs-start colors-map $colors: ( @@ -220,5 +221,5 @@ $enable-important-utilities: false; // Letter Spacing $letter-spacing-primary: 0.03em; // Borders -$border-input: 1px solid rgba(179, 180, 181); +$border-input: 1px solid $gray-350; $border-input-focus: 2.5px solid $heritage-blue-primary;