diff --git a/src/digital-components/date-picker/date-picker.vue b/src/digital-components/date-picker/date-picker.vue index f14075c16..e0c054071 100644 --- a/src/digital-components/date-picker/date-picker.vue +++ b/src/digital-components/date-picker/date-picker.vue @@ -1001,6 +1001,7 @@ export default { min-width: 2.5rem; width: 2.5rem; height: 2.5rem; + border: 2px solid transparent; span { &.small { diff --git a/src/fmg-components/address-questions/address-questions.vue b/src/fmg-components/address-questions/address-questions.vue index 4e4cf6b56..a9e92ea40 100644 --- a/src/fmg-components/address-questions/address-questions.vue +++ b/src/fmg-components/address-questions/address-questions.vue @@ -452,12 +452,6 @@ export default { this.loadGooglePlacesAutocompleteScript(); } }, - beforeUpdate() { - // It is necessary to set focus on the street address on this lifecycle hook when this component is used in a modal. - if (!this.addressField1.matches(":focus")) { - this.addressField1.focus(); - } - }, unmounted() { this.unloadAutocomplete(); }, diff --git a/src/layouts/service-location/mobile-location-modal-questions/mobile-location-modal-questions.vue b/src/layouts/service-location/mobile-location-modal-questions/mobile-location-modal-questions.vue index fc83f041a..bde24ed09 100644 --- a/src/layouts/service-location/mobile-location-modal-questions/mobile-location-modal-questions.vue +++ b/src/layouts/service-location/mobile-location-modal-questions/mobile-location-modal-questions.vue @@ -236,9 +236,12 @@ export default { }, async setMobileLocation() { this.resetAlerts(); + this.setMobileLocationInvalid(true); // Validate the Zip Code - if (this.internalModel.addressQuestions.zipCode === "") { - this.setMobileLocationInvalid(true); + if ( + this.internalModel.addressQuestions.zipCode === "" || + this.internalModel.addressQuestions.zipCode.length !== 5 + ) { return; } const zipCodeData = await this.getZipCodeData( @@ -248,11 +251,9 @@ export default { if (!zipCodeData.isValid) { this.displayInvalidZipAlert = true; - this.setMobileLocationInvalid(true); return; } else if (zipCodeData.state != this.internalModel.addressQuestions.state) { this.displayMismatchStateAndZipAlert = true; - this.setMobileLocationInvalid(true); return; } else if ( this.internalModel.addressQuestions.zipCode !== @@ -292,7 +293,6 @@ export default { } // update the page level model this.$emit("setMobileLocation", this.internalModel); - this.setMobileLocationInvalid(false); }, toggleMobileLocation() { this.isMobileLocationOpened = !this.isMobileLocationOpened; diff --git a/src/layouts/service-location/service-location.spec.js b/src/layouts/service-location/service-location.spec.js index 24030fb1f..8a8b7ae55 100644 --- a/src/layouts/service-location/service-location.spec.js +++ b/src/layouts/service-location/service-location.spec.js @@ -355,6 +355,7 @@ describe("service-location.vue", () => { zipCode: "61606", }, isVehicleProtected: null, + isMobileSelected: false, }; // Act @@ -468,6 +469,7 @@ describe("service-location.vue", () => { zipCode: "43054", }, isVehicleProtected: true, + isMobileSelected: false, }; //wrapper.vm.closeModalAction = jest.fn(); diff --git a/src/layouts/service-location/service-location.vue b/src/layouts/service-location/service-location.vue index 3b37c8406..76e42bad9 100644 --- a/src/layouts/service-location/service-location.vue +++ b/src/layouts/service-location/service-location.vue @@ -175,12 +175,12 @@ const MOBILE_FEE_PART_TYPE = "MOBILE FEE"; // DEFINE VALIDATION RULES defineRule("mobile-location-required", (value) => { if ( + value.isMobileSelected && (!value.addressQuestions.streetAddress || !value.addressQuestions.city || !value.addressQuestions.state || !value.addressQuestions.zipCode || - !value.isVehicleProtected) && - value.isMobileSelected + !value.isVehicleProtected) ) { return errorMessages.MOBILE_LOCATION_REQUIRED; } @@ -305,6 +305,9 @@ export default { zipCode: this.zipCode, }, isVehicleProtected: this.isVehicleProtected, + isMobileSelected: + this.selectedAppointmentType == AppointmentTypeStrings.MOBILE && + !this.getIsMobileLocationOpened(), }; }, }, @@ -523,6 +526,7 @@ export default { } if (this.isServiceableMobile) { this.setMobileLocation(newValue); + this.setMobileLocationInValid(false); } else { await getZipCodeData(newZipCode).then((zipCodeData) => { this.serviceZipCodeQuestion = { @@ -751,13 +755,18 @@ export default { setMobileLocationInValid(isMobileLocationInValid) { this.isMobileAddressValid = !isMobileLocationInValid; }, - displayMobileAddressQuestion(openMobileLocation) { + displayMobileAddressQuestion() { var mobileLocationQuestionsRef = this.$refs.mobileLocationQuestions; - var isMobileAddressComplete = mobileLocationQuestionsRef.isMobileAddressComplete; - if (isMobileAddressComplete) { - mobileLocationQuestionsRef.isMobileLocationOpened = openMobileLocation; + var isMobileAddressComplete = mobileLocationQuestionsRef?.isMobileAddressComplete; + if (isMobileAddressComplete?.()) { + mobileLocationQuestionsRef.isMobileLocationOpened = false; + } else { + mobileLocationQuestionsRef.isMobileLocationOpened = true; } }, + getIsMobileLocationOpened() { + return this.$refs.mobileLocationQuestions?.isMobileLocationOpened; + }, }, watch: { zipCode: { @@ -769,10 +778,8 @@ export default { this.selectedProvider = new Provider( this.shopProviderData.mobileProviderNumber ); - this.displayMobileAddressQuestion(true); } else { this.selectedProvider = new Provider(); - this.displayMobileAddressQuestion(false); } }); } @@ -784,10 +791,9 @@ export default { this.selectedProvider = new Provider( this.shopProviderData.mobileProviderNumber ); - this.displayMobileAddressQuestion(true); + this.displayMobileAddressQuestion(); } else { this.selectedProvider = new Provider(); - this.displayMobileAddressQuestion(false); } }, },