WIP

src/digital-components/textbox-question/textbox-question.vue

@@ -26,6 +26,7 @@
                     iconRight ? 'icon-right' : '',
                     cornerStyle === 'rounded' ? 'rounded-pill' : '',
                 ]"
+                :autocomplete="preventAutoFill && 'do-not-autofill'"
                 :validationRules="validationRules"
                 @change="handleChange"
                 @blur="handleChange"
@@ -76,6 +77,7 @@ export default {
         questionAlignment: String, // Left or center. Left is default.
         cornerStyle: String, // Rounded or square. Square is default.
         includeSearchIcon: Boolean,
+        preventAutoFill: Boolean,
     },
     setup(props) {
         const propsClone = Object.assign({}, props);

src/layouts/address-lookup/customer-questions/address-questions/address-questions.vue

@@ -111,7 +111,7 @@ export default {
                 streetAddress: "",
                 apartmentNumberOrBusinessName: "",
                 city: "",
-                state: null,
+                state: "",
                 zipCode: "",
             }),
         },

src/layouts/service-location/mobile-location-modal-questions/mobile-location-modal-questions.vue

@@ -65,10 +65,10 @@ export default {
                     zipCode: "",
                 },
                 isVehicleProtected: null,
-                isZipServiceableMobile: null,
-                isZipServiceableInShop: null,
             }),
         },
+        isZipServiceableMobile: Boolean,
+        isZipServiceableInShop: Boolean,
         serviceZipCode: String,
         linkWidgetName: String,
         modalWidgetName: String,
@@ -173,6 +173,12 @@ export default {
         modelValue(newValue) {
             this.internalModel = this.copyModel(newValue);
         },
+        internalModel: {
+            handler(newValue) {
+                console.log(newValue);
+            },
+            deep: true     
+        }
     },
     components: {
         textLink,

src/layouts/service-location/service-location.vue

@@ -5,15 +5,15 @@
             <funnelHeader cmsWidgetName="FunnelHeaderWidget" />
             <funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" />
             <serviceZipModalQuestion
-                v-model="serviceZipQuestionModel"
+                v-model="serviceZipCodeQuestion"
                 @service-zip-updated="resetMobileLocation"
                 linkWidgetName="ServiceZipLinkWidget"
                 modalWidgetName="ServiceZipModalWidget"
                 textboxQuestionWidgetName="ServiceZipQuestionWidget"
                 alertInvalidZipWidgetName="AlertInvalidZipWidget" />
             <mobileLocationModalQuestions
+                v-model="mobileLocationQuestions"
                 ref="mobileLocationModalQuestions"
-                v-model="mobileLocationQuestionsModel"
                 linkWidgetName="MobileLocationLinkWidget"
                 modalWidgetName="MobileLocationModalWidget"
                 mobileFeeDisclaimerWidgetName="MobileFeeDisclaimerWidget"
@@ -45,15 +45,27 @@ export default {
     name: "service-location",
     data() {
         return {
+            // serviceState: "",
+            // serviceZipCode: "",
+            // isServiceable: null,
+            // isVehicleProtected: null,
+            // isZipServiceableMobile: null,
+            // isZipServiceableInShop: null,
+            serviceZipCodeQuestion: {
+                state: "",
+                zipCode: "",
                 isServiceable: null,
+            },
+            mobileLocationQuestions: {
+                addressQuestions: {
                     streetAddress: "",
                     apartmentNumberOrBusinessName: "",
                     city: "",
                     state: "",
                     zipCode: "",
+                },
                 isVehicleProtected: null,
-            isZipServiceableMobile: null,
+            },
-            isZipServiceableInShop: null,
         };
     },
 
@@ -76,65 +88,20 @@ export default {
             vm.setCmsContent(resultMap.cmsContent);
         });
     },
-    computed: {
-        serviceZipQuestionModel: {
-            get: function () {
-                return {
-                    state: this.state,
-                    zipCode: this.zipCode,
-                    isServiceable: this.isServiceable,
-                };
-            },
-            set: function (newValue) {
-                this.state = newValue.state;
-                this.zipCode = newValue.zipCode;
-                this.isServiceable = newValue.isServiceable;
-            },
-        },
-        mobileLocationQuestionsModel: {
-            get: function () {
-                return {
-                    addressQuestions: {
-                        streetAddress: this.streetAddress,
-                        apartmentNumberOrBusinessName: this.apartmentNumberOrBusinessName,
-                        city: this.city,
-                        state: this.state,
-                        zipCode: this.zipCode,
-                    },
-                    isVehicleProtected: this.isVehicleProtected,
-                    isZipServiceableMobile: this.isZipServiceableMobile,
-                    isZipServiceableInShop: this.isZipServiceableInShop,
-                };
-            },
-            set: function (newValue) {
-                this.streetAddress = newValue.addressQuestions.streetAddress;
-                this.apartmentNumberOrBusinessName =
-                    newValue.addressQuestions.apartmentNumberOrBusinessName;
-                this.city = newValue.addressQuestions.city;
-                this.state = newValue.addressQuestions.state;
-                this.zipCode = newValue.addressQuestions.zipCode;
-                this.isVehicleProtected = newValue.isVehicleProtected;
-                this.isZipServiceableMobile = newValue.isZipServiceableMobile;
-                this.isZipServiceableInShop = newValue.isZipServiceableInShop;
-            },
-        },
-    },
     methods: {
         arePagePrerequisitesValid() {
             return true;
         },
         resetMobileLocation() {
-            this.mobileLocationQuestionsModel = {
+            this.mobileLocationQuestions = {
                 addressQuestions: {
                     streetAddress: "",
                     apartmentNumberOrBusinessName: "",
                     city: "",
-                    state: null,
+                    state: "",
                     zipCode: "",
                 },
                 isVehicleProtected: null,
-                isZipServiceableMobile: null,
-                isZipServiceableInShop: null,
             };
 
             this.$refs.mobileLocationModalQuestions.resetComponent();

src/layouts/service-location/service-zip-modal-question/service-zip-question.vue

@@ -6,6 +6,7 @@
         inputId="serviceZipCode"
         questionAlignment="center"
         mask="#####"
+        :preventAutoFill="true"
         :displayQuestionText="false"
         isRequired
         validationRules="zip-required|zip-format" />