jason/DigitalConsumer.FixMyGlass
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Fixed error issues with Address component, fixed spacing in modals

Browse source
This commit is contained in:
Leah Schumann 2023-01-27 10:01:15 -05:00
parent 23d30d6037
commit e684260e24
5 changed files with 172 additions and 43 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

13
src/digital-components/modal/modal.vue
View file

@ -17,7 +17,7 @@
data-bs-dismiss="modal"
aria-label="Close"></button>
</div>
<div class="modal-body ps-4 pe-4 pt-5 pb-4" v-if="showModalBody">
<div class="modal-body ps-5 pe-5 pt-5 pb-4" v-if="showModalBody">
<img :src="ModalImage" class="mw-100 d-flex mx-auto mb-4" alt="" />
<h5 class="mb-4" v-html="ModalHeadline"></h5>
<p class="fw-bold mb-2 subheader-text" v-html="ModalSubheadertext"></p>
@ -62,12 +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() {
@ -97,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) {

52
src/layouts/address-lookup/customer-questions/address-questions/address-questions.vue
View file

@ -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,

76
src/layouts/service-location/mobile-location-modal-question/mobile-location-modal-question.vue → src/layouts/service-location/mobile-location-modal-questions/mobile-location-modal-questions.vue
View file

@ -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" />
</div>
@ -22,8 +22,13 @@
:cmsWidgetName="this.modalWidgetName"
:onModalOpenedCallback="onModalOpened"
:footerButtonCallback="saveMobileLocationData">
<div class="ps-4 pe-4 pb-4">
<addressQuestions ref="addressQuestions" captureApartmentNumberOrBusinessName ="true" />
<div class="modal-body ps-5 pe-5 pt-5 pb-4">
<addressQuestions
ref="addressQuestions"
v-model="mobileQuestionModel.addressQuestions"
captureApartmentNumberOrBusinessName="true" />
<vehicleProtectedQuestion v-model="mobileQuestionModel.selectedValue"/>
<textBlock cmsWidgetName="QuoteEmailTextBlockWidget" typeStyle="caption" />
</div>
</modal>
</template>
@ -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
},
};
</script>

53
src/layouts/service-location/mobile-location-modal-questions/vehicle-protected-question/vehicle-protected-question.vue Normal file
View file

@ -0,0 +1,53 @@
<template>
<buttonQuestion
class="radioQuestion"
:questionText="questionText"
:answers="answers"
groupName="isVehicleProtected"
textPosition="text-center"
v-model="selectedValue"
isRequired />
</template>
<script>
import buttonQuestion from "@/digital-components/button-question/button-question";
// Supporting files
import { storeActions } from "@/constants/store-actions.js";
import baseMixin from "@/mixins/base-mixin.js";
export default {
name: "vehicle-protected-question",
data() {
return {
answers: [ "Yes", "No" ],
};
},
props: {
modelValue: String,
cmsWidgetName: String,
},
components: {
buttonQuestion,
},
computed: {
questionText() {
return this.getCmsContent(this.cmsWidgetName, "QuestionText");
},
selectedValue: {
get: function () {
return this.modelValue;
},
set: function (newValue) {
this.$emit("update:modelValue", newValue);
},
},
},
methods: {
loadInitialData() {
return baseMixin.methods.dispatchStoreAction(storeActions.GET_VEHICLE_YEARS, {});
},
initializeComponent(initialData) {
this.years = initialData;
},
},
};
</script>

21
src/layouts/service-location/service-location.vue
View file

@ -10,10 +10,11 @@ fmg
textboxQuestionWidgetName="ServiceZipQuestionWidget"
alertNonServiceableZipWidgetName="AlertNonServiceableZipWidget"
alertInvalidZipWidgetName="AlertInvalidZipWidget" />
<mobileLocationModalQuestion
<mobileLocationModalQuestions
v-model="mobileLocationQuestion"
cmsWidgetName="MobileLocationModalWidget"
modalWidgetName="LocationModalWidget"
textboxQuestionWidgetName="MobileLocationQuestionWidget" />
textboxQuestionWidgetName="MobileLocationQuestionWidget" />
<funnel-footer
cmsWidgetName="FunnelFooterWidget"
:isForwardActionDisabled="!meta.valid"
@ -26,7 +27,7 @@ fmg
<script>
// 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,