From c18af0e897fe02554e938762da6fefea82d5e39e Mon Sep 17 00:00:00 2001 From: Leah Schumann Date: Fri, 27 Jan 2023 10:01:15 -0500 Subject: [PATCH] Fixed error issues with Address component, fixed spacing in modals --- src/digital-components/modal/modal.vue | 10 +-- .../address-questions/address-questions.vue | 52 ++++++++----- .../mobile-location-modal-questions.vue} | 76 ++++++++++++++++--- .../vehicle-protected-question.vue | 53 +++++++++++++ .../service-location/service-location.vue | 21 +++-- 5 files changed, 171 insertions(+), 41 deletions(-) rename src/layouts/service-location/{mobile-location-modal-question/mobile-location-modal-question.vue => mobile-location-modal-questions/mobile-location-modal-questions.vue} (60%) create mode 100644 src/layouts/service-location/mobile-location-modal-questions/vehicle-protected-question/vehicle-protected-question.vue diff --git a/src/digital-components/modal/modal.vue b/src/digital-components/modal/modal.vue index 6e8e7de07..acb545e52 100644 --- a/src/digital-components/modal/modal.vue +++ b/src/digital-components/modal/modal.vue @@ -17,7 +17,7 @@ data-bs-dismiss="modal" aria-label="Close"> -
+

@@ -62,11 +62,11 @@ export default { }, data() { return { - myModal: null, + modal: null, }; }, mounted() { - this.myModal = new Modal(document.getElementById(this.cmsWidgetName)); + this.modal = new Modal(document.getElementById(this.cmsWidgetName)); }, computed: { ModalHeadline() { @@ -96,10 +96,10 @@ export default { this.$refs.buttonMain.resetButtonStyle(); }, openModal() { - this.myModal.show(); + this.modal.show(); }, closeModal() { - this.myModal.hide(); + this.modal.hide(); }, async footerButtonClick() { if (this.footerButtonCallback) { diff --git a/src/layouts/address-lookup/customer-questions/address-questions/address-questions.vue b/src/layouts/address-lookup/customer-questions/address-questions/address-questions.vue index 33d17b1e5..ff7fb0d9a 100644 --- a/src/layouts/address-lookup/customer-questions/address-questions/address-questions.vue +++ b/src/layouts/address-lookup/customer-questions/address-questions/address-questions.vue @@ -93,7 +93,6 @@ import { applicationConfig } from "@/constants/application-config.js"; import { defineRule } from "vee-validate"; import { required, regex } from "@/helpers/validation-rules"; import { errorMessages } from "@/constants/error-messages"; -import { fill } from "lodash"; // DEFINE VALIDATION RULES defineRule("street-address-required", required(errorMessages.STREET_ADDRESS_REQUIRED)); @@ -258,13 +257,17 @@ export default { }); addressField1.addEventListener("keydown", (e) => { - if (e.code === "Enter" || e.code === "NumpadEnter") { + const autocomplete = document.getElementById("autocomplete"); + const event = new Event("place_changed"); + + if (e.code === "Enter" || e.code === "NumpadEnter" || e.code === "Tab") { const selectedItem = document.querySelector( ".pac-container .pac-item-selected" ); if (selectedItem !== null) { // Fill-in the address using selected item in the list. - fillInAddress(selectedItem); + autocomplete.dispatchEvent(event); + //fillInAddress(selectedItem.textContent); } else { // Fill-in the address using first item in the list. fillInAddressUsingFirstItem(); @@ -274,23 +277,25 @@ export default { } }); - addressField1.addEventListener("change", () => { - // If a match has been previously attempted then do nothing - if (self.matchFound !== null) { - return; - } + // addressField1.addEventListener("change", () => { + // // If a match has been previously attempted then do nothing + // if (self.matchFound !== null) { + // return; + // } - // Get the address that the user clicked on (if any) - const clickedAddress = document.querySelector( - ".pac-container .pac-item:hover" - ); + // // Get the address that the user clicked on (if any) + // const clickedAddress = document.querySelector( + // ".pac-container .pac-item:hover" + // ); - // If the Street Address field changed without clicking (i.e. by pressing Tab, or clicking outside the field) - if (clickedAddress === null) { - // Fill-in the address using first item in the list. - fillInAddressUsingFirstItem(); - } - }); + // // If the Street Address field changed without clicking (i.e. by pressing Tab, or clicking outside the field) + // if (clickedAddress === null) { + // // Fill-in the address using first item in the list. + // fillInAddressUsingFirstItem(); + // } + + // console.log("change"); + // }); function fillInAddressUsingFirstItem() { // Fill-in the address using first item in the list. @@ -315,6 +320,7 @@ export default { } function fillInAddress(place) { + console.log("fillInAddress"); if (!place) { place = autocomplete.getPlace(); } @@ -322,8 +328,11 @@ export default { if (place && place.address_components) { self.matchFound = true; - self.addressModel.streetAddress = ""; self.$nextTick(function () { + //self.addressModel.streetAddress = ""; + + //self.$nextTick(); + self.showAddressFields = true; for (const component of place.address_components) { @@ -407,6 +416,11 @@ export default { } }, }, + "addressModel.streetAddress": { + handler(newValue, oldValue) { + console.log(`I got changed from ${oldValue} to ${newValue}`); + }, + }, }, components: { textboxQuestion, diff --git a/src/layouts/service-location/mobile-location-modal-question/mobile-location-modal-question.vue b/src/layouts/service-location/mobile-location-modal-questions/mobile-location-modal-questions.vue similarity index 60% rename from src/layouts/service-location/mobile-location-modal-question/mobile-location-modal-question.vue rename to src/layouts/service-location/mobile-location-modal-questions/mobile-location-modal-questions.vue index f3d83fe3b..7aea041e9 100644 --- a/src/layouts/service-location/mobile-location-modal-question/mobile-location-modal-question.vue +++ b/src/layouts/service-location/mobile-location-modal-questions/mobile-location-modal-questions.vue @@ -12,7 +12,7 @@ linkType="text" :text="this.mobileLocationDisplayText" href="#!" - data-bs-toggle="modal" + @click-event="openModal" :data-bs-target="getModalId" aria-label="Modal window" />
@@ -22,8 +22,13 @@ :cmsWidgetName="this.modalWidgetName" :onModalOpenedCallback="onModalOpened" :footerButtonCallback="saveMobileLocationData"> -
- +
+ + +
@@ -32,28 +37,49 @@ // Components import textLink from "@/ux-components/text-link/text-link"; import modal from "@/digital-components/modal/modal"; +import buttonQuestion from "@/digital-components/button-question/button-question"; import alert from "@/ux-components/alert/alert"; import textboxQuestion from "@/digital-components/textbox-question/textbox-question"; import addressQuestions from "@/layouts/address-lookup/customer-questions/address-questions/address-questions"; +import vehicleProtectedQuestion from "@/layouts/service-location/mobile-location-modal-questions/vehicle-protected-question/vehicle-protected-question"; +import textBlock from "@/digital-components/text-block/text-block"; -//Supporting Files +// Supporting Files import { defineRule } from "vee-validate"; import { required, regex } from "@/helpers/validation-rules"; import { errorMessages } from "@/constants/error-messages"; -import { isNoUnitNumericStyleProp } from "@vue/shared"; +import { storeActions } from "@/constants/store-actions.js"; +import baseMixin from "@/mixins/base-mixin.js"; +import TextBlock from '../../../digital-components/text-block/text-block.vue'; // Define Validation Rules defineRule("zip-required", required(errorMessages.SERVICE_ZIP_REQUIRED)); defineRule("zip-format", regex(/(^\d{5}$)|(^\d{5}-\d{4}$)/, errorMessages.SERVICE_ZIP_FORMAT)); export default { - name: "mobile-location-modal-question", + name: "mobile-location-modal-questions", + emits: ["update:modelValue"], // The component emits an event data() { return { - + isVehicleProtectedAnswers: [], }; }, props: { + modelValue: { + type: Object, + default: () => ({ + addressQuestions: { + streetAddress: "", + apartmentNumberOrBusinessName: "", + city: "", + state: "", + zipCode: "", + }, + isZipServiceableMobile: Boolean, + isZipServiceableInShop: Boolean, + isVehicleProtected: Boolean, + }), + }, cmsWidgetName: String, modalWidgetName: String, textboxQuestionWidgetName: String, @@ -61,7 +87,25 @@ export default { alertInvalidZipWidgetName: String, }, methods: { - + loadInitialData() { + return baseMixin.methods.dispatchStoreAction(storeActions.GET_VEHICLE_YEARS, {}); + }, + initializeComponent(initialData) { + this.isVehicleProtectedAnswers = initialData; + }, + openModal() { + this.$refs.mobileServiceModal.openModal(); + }, + closeModal() { + this.$refs.mobileServiceModal.closeModal(); + }, + focusOnZipInput() { + this.$nextTick(() => { + console.log(this.$refs); + const input = this.$refs.streetAddressField; + input.focus(); + }); + }, }, computed: { getModalId() { @@ -71,17 +115,25 @@ export default { return this.getCmsContent(this.cmsWidgetName, "HeaderText"); }, mobileLocationDisplayText() { - return this.getCmsContent(this.cmsWidgetName, "FooterText"); }, - }, - mounted() { + mobileQuestionModel: { + get: function () { + return this.modelValue; + }, + set: function (newValue) { + this.$emit("update:modelValue", newValue); + }, + }, }, + mounted() {}, components: { textLink, modal, - addressQuestions + addressQuestions, + vehicleProtectedQuestion, + textBlock }, }; diff --git a/src/layouts/service-location/mobile-location-modal-questions/vehicle-protected-question/vehicle-protected-question.vue b/src/layouts/service-location/mobile-location-modal-questions/vehicle-protected-question/vehicle-protected-question.vue new file mode 100644 index 000000000..b8c795d5f --- /dev/null +++ b/src/layouts/service-location/mobile-location-modal-questions/vehicle-protected-question/vehicle-protected-question.vue @@ -0,0 +1,53 @@ + + + \ No newline at end of file diff --git a/src/layouts/service-location/service-location.vue b/src/layouts/service-location/service-location.vue index 4d0a527c6..cece16fdd 100644 --- a/src/layouts/service-location/service-location.vue +++ b/src/layouts/service-location/service-location.vue @@ -10,10 +10,11 @@ fmg textboxQuestionWidgetName="ServiceZipQuestionWidget" alertNonServiceableZipWidgetName="AlertNonServiceableZipWidget" alertInvalidZipWidgetName="AlertInvalidZipWidget" /> - + textboxQuestionWidgetName="MobileLocationQuestionWidget" /> // Components import serviceZipModalQuestion from "@/layouts/service-location/service-zip-modal-question/service-zip-modal-question"; -import mobileLocationModalQuestion from "@/layouts/service-location/mobile-location-modal-question/mobile-location-modal-question"; +import mobileLocationModalQuestions from "@/layouts/service-location/mobile-location-modal-questions/mobile-location-modal-questions"; import funnelHeader from "@/fmg-components/funnel-header/funnel-header"; import funnelFooter from "@/fmg-components/funnel-footer/funnel-footer"; import funnelSubHeader from "@/fmg-components/funnel-sub-header/funnel-sub-header"; @@ -39,7 +40,17 @@ import { settleAllPromises } from "@/helpers/layout-helper"; export default { name: "service-location", data() { - return {}; + return { + mobileLocationQuestion: { + addressQuestions: { + streetAddress: "", + apartmentNumberOrBusinessName: "", + city: "", + state: "", + zipCode: "", + }, + }, + }; }, async beforeRouteEnter(to, from, next) { // Call APIs @@ -70,7 +81,7 @@ export default { }, components: { serviceZipModalQuestion, - mobileLocationModalQuestion, + mobileLocationModalQuestions, funnelHeader, funnelFooter, funnelSubHeader,