diff --git a/src/digital-components/modal/modal.vue b/src/digital-components/modal/modal.vue
index 0586b9f1a..0034b5155 100644
--- a/src/digital-components/modal/modal.vue
+++ b/src/digital-components/modal/modal.vue
@@ -75,7 +75,8 @@ export default {
},
methods: {
async validateAndEmit() {
- if (!this.isFooterButtonDisabled) {
+ const validationResult = await this.form.validate();
+ if (validationResult.valid) {
this.$emit("footer-button-event");
}
this.resetButtonStyle();
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 60f698ef4..aeb7a9607 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
@@ -25,11 +25,11 @@
@footer-button-event="setMobileLocation">
@@ -43,25 +43,15 @@ import alert from "@/ux-components/alert/alert";
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";
+import { useForm } from "vee-validate";
export default {
name: "mobile-location-modal-questions",
emits: ["update:modelValue"], // The component emits an event
data() {
return {
- mobileLocationQuestionsInput: {
- addressQuestions: {
- streetAddress: "",
- apartmentNumberOrBusinessName: "",
- city: "",
- state: "",
- zipCode: "",
- },
- isVehicleProtected: null,
- isZipServiceableMobile: null,
- isZipServiceableInShop: null,
- },
- };
+ internalModel: this.copyModel(this.modelValue),
+ }
},
props: {
modelValue: {
@@ -74,9 +64,9 @@ export default {
state: "",
zipCode: "",
},
- isVehicleProtected: Boolean,
- isZipServiceableMobile: Boolean,
- isZipServiceableInShop: Boolean,
+ isVehicleProtected: null,
+ isZipServiceableMobile: null,
+ isZipServiceableInShop: null,
}),
},
serviceZipCode: String,
@@ -88,9 +78,6 @@ export default {
alertInvalidZipWidgetName: String,
},
computed: {
- getModalId() {
- return "#" + this.modalWidgetName;
- },
mobileLocationLinkPromptText() {
return this.getCmsContent(this.linkWidgetName, "HeaderText");
},
@@ -114,73 +101,77 @@ export default {
modalName() {
return this.modalWidgetName;
},
- mobileLocationQuestionsModel: {
- get: function () {
- return this.modelValue;
- },
- set: function (newValue) {
- this.$emit("update:modelValue", newValue);
- },
- },
addressModel: {
get: function () {
- return this.mobileLocationQuestionsModel.addressQuestions;
- },
- },
- addressModelInput: {
- get: function () {
- return this.mobileLocationQuestionsInput.addressQuestions;
+ return this.modelValue.addressQuestions;
},
},
},
methods: {
+ copyModel(modelToCopy) {
+ return {
+ addressQuestions: {
+ streetAddress: modelToCopy.addressQuestions.streetAddress,
+ apartmentNumberOrBusinessName: modelToCopy.addressQuestions.apartmentNumberOrBusinessName,
+ city: modelToCopy.addressQuestions.city,
+ state: modelToCopy.addressQuestions.state,
+ zipCode: modelToCopy.addressQuestions.zipCode,
+ },
+ isVehicleProtected: modelToCopy.isVehicleProtected,
+ isZipServiceableMobile: modelToCopy.isZipServiceableMobile,
+ isZipServiceableInShop: modelToCopy.isZipServiceableInShop,
+ }
+ },
+
openModal() {
this.$refs[this.modalName].openModal();
},
- onModalOpened() {
- this.mobileLocationQuestionsInput = this.mobileLocationQuestionsModel;
- },
+
closeModal() {
this.$refs[this.modalName].closeModal();
},
- onModalClosed() {
- this.mobileLocationQuestionsInput = this.mobileLocationQuestionsModel;
- },
+
resetComponent() {
- // Address
- this.addressModelInput.streetAddress = "";
- this.addressModelInput.apartmentNumberOrBusinessName = "";
- this.addressModelInput.city = "";
- this.addressModelInput.state = "";
- this.addressModelInput.zipCode = "";
-
- // Is Vehicle Protected
- this.mobileLocationQuestionsInput.isVehicleProtected = null;
+ this.resetModel();
- this.$refs[this.modalName].form.resetForm();
+ // Reset the validation form
+ this.$refs[this.modalName].form.resetForm({
+ values: {
+ "8fdf9dc2e13e430eb57529499dceb3eb": "OH"
+ }
+
+
+ });
+ // Reinitialize the Address Auto Complete
this.$refs.addressQuestions.setupAddressLookup();
},
+
+ resetModel() {
+ // Address
+ this.internalModel.addressQuestions.streetAddress = "";
+ this.internalModel.addressQuestions.apartmentNumberOrBusinessName = "";
+ this.internalModel.addressQuestions.city = "";
+ this.internalModel.addressQuestions.state = "";
+ this.internalModel.addressQuestions.zipCode = "";
+
+ // Is Vehicle Protected
+ this.internalModel.isVehicleProtected = null;
+ },
+
async setMobileLocation() {
// TODO: Any lookups or actions to be taken before assigning the Mobile Location
- this.mobileLocationQuestionsModel = {
- addressQuestions: {
- streetAddress: this.addressModelInput.streetAddress,
- apartmentNumberOrBusinessName:
- this.addressModelInput.apartmentNumberOrBusinessName,
- city: this.addressModelInput.city,
- state: this.addressModelInput.state,
- zipCode: this.addressModelInput.zipCode,
- },
- isVehicleProtected: this.mobileLocationQuestionsInput.isVehicleProtected,
- isZipServiceableMobile: this.mobileLocationQuestionsInput.isZipServiceableMobile,
- isZipServiceableInShop: this.mobileLocationQuestionsInput.isZipServiceableInShop,
- };
+ this.$emit("update:modelValue", this.internalModel);
this.closeModal();
},
},
+ watch: {
+ modelValue(newValue) {
+ this.internalModel = this.copyModel(newValue);
+ }
+ },
components: {
textLink,
modal,
diff --git a/src/layouts/service-location/service-zip-modal-question/service-zip-modal-question.vue b/src/layouts/service-location/service-zip-modal-question/service-zip-modal-question.vue
index 27321d111..735dd6328 100644
--- a/src/layouts/service-location/service-zip-modal-question/service-zip-modal-question.vue
+++ b/src/layouts/service-location/service-zip-modal-question/service-zip-modal-question.vue
@@ -20,7 +20,7 @@
+ v-model="internalModel.zipCode" />
({
- serviceZipQuestion: {
- state: "",
- zipCode: "",
- isServiceable: null,
- },
+ state: "",
+ zipCode: "",
+ isServiceable: null,
}),
},
linkWidgetName: String,
@@ -87,14 +85,14 @@ export default {
modalName() {
return this.modalWidgetName;
},
- serviceZipModel: {
- get: function () {
- return this.modelValue;
- },
- set: function (newValue) {
- this.$emit("update:modelValue", newValue);
- },
- },
+ // serviceZipModel: {
+ // get: function () {
+ // return this.modelValue;
+ // },
+ // set: function (newValue) {
+ // this.$emit("update:modelValue", newValue);
+ // },
+ // },
},
methods: {
resetAlerts() {
@@ -111,6 +109,14 @@ export default {
input.focus();
},
+ copyModel(modelToCopy) {
+ return {
+ state: modelToCopy.state,
+ zipCode: modelToCopy.zipCode,
+ isServiceable: modelToCopy.isServiceable,
+ }
+ },
+
openModal() {
this.$refs[this.modalName].openModal();
},
@@ -119,35 +125,36 @@ export default {
this.$refs[this.modalName].closeModal();
},
- onModalOpened() {
- this.serviceZipCodeInput = this.serviceZipModel.zipCode;
- this.focusOnZipInput();
- },
+ // onModalOpened() {
+ // this.serviceZipCodeInput = this.serviceZipModel.zipCode;
+ // this.focusOnZipInput();
+ // },
- onModalClosed() {
- this.serviceZipCodeInput = this.serviceZipModel.zipCode;
- this.resetsOnZipInput();
- },
+ // onModalClosed() {
+ // this.serviceZipCodeInput = this.serviceZipModel.zipCode;
+ // this.resetsOnZipInput();
+ // },
async setZipCode() {
this.resetAlerts();
- const zipCodeData = await this.getZipCodeData(this.serviceZipCodeInput);
+ const zipCodeData = await this.getZipCodeData(this.internalModel.zipCode);
if (!zipCodeData.isValid) {
this.displayInvalidZipAlert = true;
this.focusOnZipInput();
} else {
- // if the service zip code changes we need to clear the Mobile Location Model
- if (this.serviceZipModel.zipCode !== "" && this.serviceZipCodeInput !== this.serviceZipModel.zipCode ) {
+ this.internalModel.state = zipCodeData.state;
+ this.internalModel.isServiceable = zipCodeData.isServiceable;
+
+ // if the service zip code is changing we need to clear the Mobile Location Model
+ if (this.modelValue.zipCode !== "" && this.internalModel.zipCode !== this.modelValue.zipCode ) {
this.$emit("service-zip-updated");
}
- this.serviceZipModel = {
- state: zipCodeData.state,
- zipCode: this.serviceZipCodeInput,
- isServiceable: zipCodeData.isServiceable,
- };
+ this.$emit("update:modelValue", this.internalModel);
+
+
this.closeModal();
}
@@ -157,6 +164,9 @@ export default {
serviceZipCodeInput() {
this.resetsOnZipInput();
},
+ modelValue(newValue) {
+ this.internalModel = this.copyModel(newValue);
+ }
},
components: {
textLink,