From 05703387b4db3271556eb8809ea872ae33a94852 Mon Sep 17 00:00:00 2001
From: Leah Schumann <leah.schumann@safelite.com>
Date: Wed, 28 Jun 2023 07:23:14 -0400
Subject: [PATCH 1/2] WIP

---
 src/layouts/address-lookup/address-lookup.vue |  2 +-
 .../address-questions/address-questions.vue   | 22 +++++++++++-----
 .../customer-questions/customer-questions.vue |  6 ++---
 .../license-plate-lookup.vue                  |  6 ++---
 .../service-location/service-location.vue     | 25 ++++++++-----------
 .../service-zip-modal-question.vue            | 24 +++++++-----------
 src/layouts/vin-lookup/vin-lookup.vue         |  6 ++---
 7 files changed, 46 insertions(+), 45 deletions(-)

diff --git a/src/layouts/address-lookup/address-lookup.vue b/src/layouts/address-lookup/address-lookup.vue
index 9e27bbac7..727828649 100644
--- a/src/layouts/address-lookup/address-lookup.vue
+++ b/src/layouts/address-lookup/address-lookup.vue
@@ -59,7 +59,7 @@
                                     cmsWidgetName="ServiceZipQuestionWidget"
                                     v-model="serviceZipCode"
                                     ref="serviceZip"
-                                    inputId="7add1b26df344f2caf1678de5797803f"
+                                    customInputId="serviceZip"
                                     aria-haspopup=""
                                     mask="#####"
                                     validationRules="service-zip-required|service-zip-format" />
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 20434da4d..ecdfe1944 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
@@ -122,16 +122,16 @@ export default {
     },
     data() {
         return {
+            autocomplete: null,
+            autocompleteListener: null,
+            showAddressFields: false,
+            matchFound: null, // null = no attempted match, true = match was found, false = match was not found
             displayVerificationWarning: false,
             displayNoMatchWarning: false,
             alertHeadlineVerificationWarning: "",
             alertCopyVerificationWarning: "",
             alertHeadlineNoMatchWarning: "",
             alertCopyNoMatchWarning: "",
-            autocomplete: null,
-            autocompleteListener: null,
-            showAddressFields: false,
-            matchFound: null, // null = no attempted match, true = match was found, false = match was not found
         };
     },
     computed: {
@@ -209,7 +209,7 @@ export default {
             get: function () {
                 return document.getElementById("autocomplete");
             },
-        },
+        },     
     },
     methods: {
         loadGooglePlacesAutocompleteScript() {
@@ -218,7 +218,7 @@ export default {
             this.$loadScript(
                 `https://maps.googleapis.com/maps/api/js?key=${apiKey}&libraries=places&callback=Function.prototype`
             ).then(() => {
-                // When loaded trigger the setup
+                // When loaded, trigger the setup
                 this.initializeAutocomplete();
             });
         },
@@ -255,6 +255,11 @@ export default {
             });
 
             this.addressField1.addEventListener("keydown", (e) => {
+                // If a match has been previously attempted then do nothing
+                if (this.matchFound !== null) {
+                    return;
+                }
+                
                 const event = new Event("place_changed");
 
                 // When either of the two enter keys or the tab key are pressed
@@ -272,6 +277,7 @@ export default {
                         // Otherwise fill-in the address using first item from the list.
                         this.fillInAddressUsingFirstItem();
                     }
+
                 } else {
                     return;
                 }
@@ -334,6 +340,9 @@ export default {
 
                     // After filling in the address fields, disable the address autocomplete
                     this.unloadAutocomplete();
+
+                    // Restore focus to the first address field
+                    this.addressField1.focus();
                 });
             }
         },
@@ -425,6 +434,7 @@ export default {
                         },
                         { deep: true, flush: "post" }
                     );
+
                 }
             },
         },
diff --git a/src/layouts/address-lookup/customer-questions/customer-questions.vue b/src/layouts/address-lookup/customer-questions/customer-questions.vue
index 325f8c380..368ece0e4 100644
--- a/src/layouts/address-lookup/customer-questions/customer-questions.vue
+++ b/src/layouts/address-lookup/customer-questions/customer-questions.vue
@@ -6,7 +6,7 @@
                 cmsWidgetName="FirstNameQuestionWidget"
                 v-model="customerModel.firstName"
                 ref="firstName"
-                inputId="08497a2efd9a4a73a70360ab47b4838d"
+                customInputId="firstName"
                 validationRules="first-name-required" />
         </div>
     </div>
@@ -16,7 +16,7 @@
                 cmsWidgetName="LastNameQuestionWidget"
                 v-model="customerModel.lastName"
                 ref="lastName"
-                inputId="0030e56a57e74a4ab92de7fb8e97fec5"
+                customInputId="lastName"
                 validationRules="last-name-required" />
         </div>
     </div>
@@ -26,7 +26,7 @@
                 cmsWidgetName="EmailAddressQuestionWidget"
                 v-model="customerModel.emailAddress"
                 ref="emailAddress"
-                inputId="00450a91b8964a768ce3992e6feb890f"
+                customInputId="emailAddress"
                 validationRules="email-address-required|email-address-format" />
         </div>
     </div>
diff --git a/src/layouts/license-plate-lookup/license-plate-lookup.vue b/src/layouts/license-plate-lookup/license-plate-lookup.vue
index a3579318d..5d51d3df9 100644
--- a/src/layouts/license-plate-lookup/license-plate-lookup.vue
+++ b/src/layouts/license-plate-lookup/license-plate-lookup.vue
@@ -13,7 +13,7 @@
                             cmsWidgetName="LicensePlateNumberQuestionWidget"
                             v-model="licensePlate"
                             isRequired
-                            inputId="license_plate"
+                            customInputId="licensePlate"
                             validationRules="license-plate-required" />
                     </div>
                 </div>
@@ -22,7 +22,7 @@
                         <textboxQuestion
                             cmsWidgetName="RegistrationZipQuestionWidget"
                             v-model="registrationZipCode"
-                            inputId="zip"
+                            customInputId="zip"
                             mask="#####"
                             validationRules="zip-required|zip-format" />
                     </div>
@@ -32,7 +32,7 @@
                         <textboxQuestion
                             cmsWidgetName="EmailAddressQuestionWidget"
                             v-model="email"
-                            inputId="email"
+                            customInputId="email"
                             validationRules="email-address-required|email-address-format" />
                     </div>
                 </div>
diff --git a/src/layouts/service-location/service-location.vue b/src/layouts/service-location/service-location.vue
index b44f1c64c..3b4cd4458 100644
--- a/src/layouts/service-location/service-location.vue
+++ b/src/layouts/service-location/service-location.vue
@@ -68,15 +68,13 @@
                 linkWidgetName="MobileLocationLinkWidget"
                 modalWidgetName="MobileLocationModalWidget"
                 :onZipUpdateCallback="reloadShopData" />
-            <Transition name="fade" mode="out-in">
-                <shopQuestion
-                    ref="shopQuestion"
-                    v-show="isShopQuestionDisplayed"
-                    v-model="selectedProvider"
-                    :selectedAppointmentType="selectedAppointmentType"
-                    :isDisplayed="isShopQuestionDisplayed"
-                    cmsWidgetName="ShopQuestionWidget" />
-            </Transition>
+            <shopQuestion
+                ref="shopQuestion"
+                v-show="isShopQuestionDisplayed"
+                v-model="selectedProvider"
+                :selectedAppointmentType="selectedAppointmentType"
+                :isDisplayed="isShopQuestionDisplayed"
+                cmsWidgetName="ShopQuestionWidget" />
             <contentGroupModal ref="RecalModal" cmsWidgetName="RecalModal" />
             <funnel-footer
                 cmsWidgetName="FunnelFooterWidget"
@@ -108,7 +106,6 @@ import baseMixin from "@/mixins/base-mixin.js";
 
 import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
 import { settleAllPromises } from "@/helpers/layout-helper";
-import { navigateToHeritageFunnel } from "@/helpers/heritage-integration/navigation-helper";
 import {
     getPricedMobileFeePart,
     getServiceabilityDetails,
@@ -122,10 +119,10 @@ import { errorMessages } from "@/constants/error-messages";
 // DEFINE VALIDATION RULES
 defineRule("mobile-location-required", (value) => {
     if (
-        value.addressQuestions.streetAddress == null ||
-        value.addressQuestions.city == null ||
-        value.addressQuestions.state == null ||
-        value.addressQuestions.zipCode == null ||
+        value.addressQuestions.streetAddress == "" ||
+        value.addressQuestions.city == "" ||
+        value.addressQuestions.state == "" ||
+        value.addressQuestions.zipCode == "" ||
         value.isVehicleProtected == null
     ) {
         return errorMessages.MOBILE_LOCATION_REQUIRED;
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 7a87a1e14..de6288a64 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
@@ -21,12 +21,12 @@
             customInputId="serviceZipCode"
             v-model="internalModel.zipCode"
             v-on="{ 'textboxQuestionEvent.inputIdAssigned': onInputIdAssigned }"
-            :cmsWidgetName="textboxQuestionWidgetName" />
+            cmsWidgetName="ServiceZipQuestionWidget" />
         <alert
             ref="alertInvalidZip"
             v-if="displayInvalidZipAlert"
             class="my-4"
-            :cmsWidgetName="alertInvalidZipWidgetName"
+            cmsWidgetName="AlertInvalidZipWidget"
             alertClass="alert-danger"
             v-bind:isDismissible="false" />
     </modal>
@@ -72,15 +72,6 @@ export default {
             type: Function,
         },
     },
-    setup() {
-        const textboxQuestionWidgetName = "ServiceZipQuestionWidget";
-        const alertInvalidZipWidgetName = "AlertInvalidZipWidget";
-
-        return {
-            textboxQuestionWidgetName,
-            alertInvalidZipWidgetName,
-        };
-    },
     computed: {
         serviceZipLinkText() {
             if (this.modelValue.zipCode && this.modelValue.zipCode.length > 0) {
@@ -89,7 +80,7 @@ export default {
             return this.getCmsContent(this.linkWidgetName, "BodyText");
         },
         modalHeaderText() {
-            return this.getCmsContent(this.textboxQuestionWidgetName, "QuestionText");
+            return this.getCmsContent("ServiceZipQuestionWidget", "QuestionText");
         },
         modalFooterText() {
             return this.getCmsContent(this.modalWidgetName, "FooterText");
@@ -97,6 +88,9 @@ export default {
         modalName() {
             return this.modalWidgetName;
         },
+        modal() {
+            return this.$refs[this.modalName];
+        }
     },
     methods: {
         resetAlerts() {
@@ -116,13 +110,13 @@ export default {
             };
         },
         openModal() {
-            this.$refs[this.modalName].openModal();
+            this.modal.openModal();
         },
         closeModal() {
-            this.$refs[this.modalName].closeModal();
+            this.modal.closeModal();
         },
         resetModalButtonStyle() {
-            this.$refs[this.modalName].resetButtonStyle();
+            this.modal.resetButtonStyle();
         },
         onInputIdAssigned(inputId) {
             this.serviceZipCodeTextInputId = inputId;
diff --git a/src/layouts/vin-lookup/vin-lookup.vue b/src/layouts/vin-lookup/vin-lookup.vue
index c1f2dd7ec..49d7dd4e3 100644
--- a/src/layouts/vin-lookup/vin-lookup.vue
+++ b/src/layouts/vin-lookup/vin-lookup.vue
@@ -13,7 +13,7 @@
                         <textboxQuestion
                             cmsWidgetName="VinNumberQuestionWidget"
                             v-model="vin"
-                            inputId="vin"
+                            customInputId="vin"
                             isRequired
                             validationRules="vin-required|vin-format"
                             :isDisabled="vinPopulatedOnPageLoad"
@@ -46,7 +46,7 @@
                         <textboxQuestion
                             cmsWidgetName="ServiceZipQuestionWidget"
                             v-model="serviceZipCode"
-                            inputId="serviceZipCode"
+                            customInputId="serviceZipCode"
                             mask="#####"
                             isRequired
                             validationRules="zip-required|zip-format" />
@@ -57,7 +57,7 @@
                         <textboxQuestion
                             cmsWidgetName="EmailAddressQuestionWidget"
                             v-model="emailAddress"
-                            inputId="emailAddress"
+                            customInputId="emailAddress"
                             isRequired
                             validationRules="email-address-required|email-address-format" />
                     </div>

From b1929252254af08a7cfe4a7f5db0085df380cd0d Mon Sep 17 00:00:00 2001
From: Leah Schumann <leah.schumann@safelite.com>
Date: Wed, 28 Jun 2023 08:18:10 -0400
Subject: [PATCH 2/2] Prettified

---
 .../address-questions/address-questions.vue                 | 6 ++----
 .../service-zip-modal-question.vue                          | 2 +-
 2 files changed, 3 insertions(+), 5 deletions(-)

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 ecdfe1944..3ad8a8df2 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
@@ -209,7 +209,7 @@ export default {
             get: function () {
                 return document.getElementById("autocomplete");
             },
-        },     
+        },
     },
     methods: {
         loadGooglePlacesAutocompleteScript() {
@@ -259,7 +259,7 @@ export default {
                 if (this.matchFound !== null) {
                     return;
                 }
-                
+
                 const event = new Event("place_changed");
 
                 // When either of the two enter keys or the tab key are pressed
@@ -277,7 +277,6 @@ export default {
                         // Otherwise fill-in the address using first item from the list.
                         this.fillInAddressUsingFirstItem();
                     }
-
                 } else {
                     return;
                 }
@@ -434,7 +433,6 @@ export default {
                         },
                         { deep: true, flush: "post" }
                     );
-
                 }
             },
         },
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 de6288a64..d24bb618a 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
@@ -90,7 +90,7 @@ export default {
         },
         modal() {
             return this.$refs[this.modalName];
-        }
+        },
     },
     methods: {
         resetAlerts() {