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

WIP

Browse source
This commit is contained in:
Leah Schumann 2023-06-15 08:18:32 -04:00
parent 8746851f79
commit 1a6db3df0f
4 changed files with 79 additions and 51 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -90,10 +90,12 @@ export default {
openModal() {
const modal = Modal.getOrCreateInstance(document.getElementById(this.modalId));
modal.show();
this.$emit("modalOpened", true);
},
closeModal() {
const modal = Modal.getInstance(document.getElementById(this.modalId));
modal.hide();
this.$emit("modalOpened", false);
},
},
computed: {

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

@ -122,6 +122,7 @@ export default {
},
data() {
return {
componentKey: 0,
displayVerificationWarning: false,
displayNoMatchWarning: false,
alertHeadlineVerificationWarning: "",
@ -202,12 +203,14 @@ export default {
},
},
showAddressFields: {
get: function() {
return this.addressModel.streetAddress &&
this.addressModel.city &&
this.addressModel.state &&
this.addressModel.zipCode
}
get: function () {
return (
this.addressModel.streetAddress &&
this.addressModel.city &&
this.addressModel.state &&
this.addressModel.zipCode
);
},
},
showApartmentNumberOrBusinessNameField: {
get: function () {
@ -218,14 +221,15 @@ export default {
methods: {
initializeAutocomplete() {
this.addressField1 = document.getElementById("autocomplete");
// initialize the Google Places Autocomplete
this.autocomplete = new window.google.maps.places.Autocomplete(this.addressField1, {
componentRestrictions: { country: ["us"] },
fields: ["address_components"],
types: ["geocode"],
});
// Standard place_changed event handling
// Set up the Autocomplete place_changed event to call our method to fill in the address
this.autocompleteListener = window.google.maps.event.addListener(
this.autocomplete,
"place_changed",
@ -233,16 +237,30 @@ export default {
);
this.addressField1.addEventListener("focus", (e) => {
// Unfortunately this is the only place we can set the autocomplete attribute without the
// Google Places object resetting it to "off" which does nothing to prevent browser autofill
this.addressField1.setAttribute("autocomplete", "do-not-autofill");
// Make place results box stick to the input on scroll
// Due to the different ways we're using this component it is necessary to do this here instead of ahead of time
const streetAddressField = document.getElementById("streetAddressField");
const autocompleteResultsContainer = document.getElementsByClassName("pac-container")[0];
if (autocompleteResultsContainer) {
streetAddressField.appendChild(autocompleteResultsContainer);
}
});
this.addressField1.addEventListener("keydown", (e) => {
const event = new Event("place_changed");
// When either of the two enter keys or the tab key are pressed
if (e.code === "Enter" || e.code === "NumpadEnter" || e.code === "Tab") {
// Grab the selected item
const selectedItem = document.querySelector(
".pac-container .pac-item-selected"
);
// If an item was selected then fill in the address with the selected item
if (selectedItem !== null) {
// Fill-in the address using selected item in the list.
this.autocomplete.dispatchEvent(event);
@ -276,8 +294,7 @@ export default {
break;
}
case "route": {
self.addressModel.streetAddress +=
" " + component.short_name;
self.addressModel.streetAddress += " " + component.short_name;
break;
}
case "locality": {
@ -331,8 +348,12 @@ export default {
resetAlerts() {
this.displayVerificationWarning = false;
},
forceRerender() {
this.componentKey.value += 1;
}
},
mounted() {
console.log("mounted")
// Load the Google Places Autocomplete script
const apiKey = applicationConfig.GOOGLE_PLACES_API_KEY;
this.$loadScript(
@ -342,11 +363,13 @@ export default {
this.scriptLoaded = true;
});
},
beforeUpdate() {
unmounted() {
console.log("unmounted")
},
beforeUpdate() {
// Make place results box stick to the input on scroll
const streetAddressField = document.getElementById("streetAddressField");
const autocompleteResultsContainer =
document.getElementsByClassName("pac-container")[0];
const autocompleteResultsContainer = document.getElementsByClassName("pac-container")[0];
if (autocompleteResultsContainer) {
streetAddressField.appendChild(autocompleteResultsContainer);
}

64
src/layouts/service-location/mobile-location-modal-questions/mobile-location-modal-questions.vue
View file

@ -33,24 +33,28 @@
:footerButtonText="modalFooterText"
:onModalOpenedCallback="onModalOpened"
:onModalClosedCallback="onModalClosed"
@modalOpened="setModalOpened"
@footer-button-event="setMobileLocation">
<addressQuestions
ref="addressQuestions"
v-model="internalModel.addressQuestions"
captureApartmentNumberOrBusinessName="true"
preserveCityAndStateOnReset="true" />
<vehicleProtectedQuestion
ref="vehicleProtectedQuestion"
v-model="internalModel.isVehicleProtected"
cmsWidgetName="VehicleProtectedQuestionWidget" />
<textBlock cmsWidgetName="WorkspaceRequirementsWidget" typeStyle="caption" />
<alert
ref="alertInvalidZip"
v-if="displayInvalidZipAlert"
class="my-4"
cmsWidgetName="AlertInvalidZipWidget"
alertClass="alert-danger"
v-bind:isDismissible="false" />
<template v-if="modalOpened">
<addressQuestions
ref="addressQuestions"
v-model="internalModel.addressQuestions"
captureApartmentNumberOrBusinessName="true"
preserveCityAndStateOnReset="true" />
<vehicleProtectedQuestion
ref="vehicleProtectedQuestion"
v-model="internalModel.isVehicleProtected"
cmsWidgetName="VehicleProtectedQuestionWidget" />
<textBlock cmsWidgetName="WorkspaceRequirementsWidget" typeStyle="caption" />
<alert
ref="alertInvalidZip"
v-if="displayInvalidZipAlert"
class="my-4"
cmsWidgetName="AlertInvalidZipWidget"
alertClass="alert-danger"
v-bind:isDismissible="false" />
</template>
</modal>
</div>
</transition>
@ -82,6 +86,8 @@ export default {
return {
internalModel: deepClone(this.modelValue),
displayInvalidZipAlert: false,
addressQuestionsKey: 0,
modalOpened: false,
};
},
setup(props) {
@ -195,6 +201,10 @@ export default {
openModal() {
this.$refs[this.modalName].openModal();
},
setModalOpened(isOpened) {
this.modalOpened = isOpened;
console.log(this.modalOpened)
},
closeModal() {
this.$refs[this.modalName].closeModal();
},
@ -224,17 +234,17 @@ export default {
this.$refs[this.modalName].resetButtonStyle();
},
resetValidation() {
this.$refs.addressQuestions.resetAlerts();
//this.$refs.addressQuestions.resetAlerts();
this.$refs[this.modalName].resetForm({
values: {
autocomplete: this.internalModel.addressQuestions.streetAddress,
city: this.internalModel.addressQuestions.city,
state: this.internalModel.addressQuestions.state,
zipCode: this.internalModel.addressQuestions.zipCode,
isVehicleProtected: this.internalModel.isVehicleProtected,
},
});
// this.$refs[this.modalName].resetForm({
// values: {
// autocomplete: this.internalModel.addressQuestions.streetAddress,
// city: this.internalModel.addressQuestions.city,
// state: this.internalModel.addressQuestions.state,
// zipCode: this.internalModel.addressQuestions.zipCode,
// isVehicleProtected: this.internalModel.isVehicleProtected,
// },
// });
},
async setMobileLocation() {
if (

15
src/store/index.js
View file

@ -1105,17 +1105,10 @@ export const actions = {
"glassPieces"
);
return Promise.resolve({
"isGlassServiceableInshop": true,
"isRecalibrationServiceableInshop": true,
"isGlassServiceableMobile": true,
"isRecalibrationServiceableMobile": true
})
// return globalMethods.callHttpClient({
// method: endpoints.GetServiceabilityDetails.method,
// endpoint: `${endpoints.GetServiceabilityDetails.url}?zip=${serviceZipCode}&carId=${carId}&${lineItems}&${glassPieces}`,
// });
return globalMethods.callHttpClient({
method: endpoints.GetServiceabilityDetails.method,
endpoint: `${endpoints.GetServiceabilityDetails.url}?zip=${serviceZipCode}&carId=${carId}&${lineItems}&${glassPieces}`,
});
},
getProviders(context, { serviceZipCode }) {