Merge pull request #1190 from Safelite/defect/CSR-1467

Defect/csr 1467

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" />

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: {
@@ -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
@@ -334,6 +339,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();
                 });
             }
         },

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,8 +26,7 @@
                 cmsWidgetName="EmailAddressQuestionWidget"
                 v-model="customerModel.emailAddress"
                 ref="emailAddress"
-                inputId="00450a91b8964a768ce3992e6feb890f"
+                customInputId="emailAddress"
-                disableAutoFill
                 validationRules="email-address-format" />
         </div>
     </div>

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="registration-zip-required|zip-format" />
                     </div>
@@ -32,7 +32,7 @@
                         <textboxQuestion
                             cmsWidgetName="EmailAddressQuestionWidget"
                             v-model="email"
-                            inputId="email"
+                            customInputId="email"
                             validationRules="email-address-format" />
                     </div>
                 </div>

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

@@ -68,15 +68,13 @@
                 linkWidgetName="MobileLocationLinkWidget"
                 modalWidgetName="MobileLocationModalWidget"
                 :onZipUpdateCallback="reloadShopData" />
-            <Transition name="fade" mode="out-in">
+            <shopQuestion
-                <shopQuestion
+                ref="shopQuestion"
-                    ref="shopQuestion"
+                v-show="isShopQuestionDisplayed"
-                    v-show="isShopQuestionDisplayed"
+                v-model="selectedProvider"
-                    v-model="selectedProvider"
+                :selectedAppointmentType="selectedAppointmentType"
-                    :selectedAppointmentType="selectedAppointmentType"
+                :isDisplayed="isShopQuestionDisplayed"
-                    :isDisplayed="isShopQuestionDisplayed"
+                cmsWidgetName="ShopQuestionWidget" />
-                    cmsWidgetName="ShopQuestionWidget" />
-            </Transition>
             <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.streetAddress == "" ||
-        value.addressQuestions.city == null ||
+        value.addressQuestions.city == "" ||
-        value.addressQuestions.state == null ||
+        value.addressQuestions.state == "" ||
-        value.addressQuestions.zipCode == null ||
+        value.addressQuestions.zipCode == "" ||
         value.isVehicleProtected == null
     ) {
         return errorMessages.MOBILE_LOCATION_REQUIRED;

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;

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,8 +57,8 @@
                         <textboxQuestion
                             cmsWidgetName="EmailAddressQuestionWidget"
                             v-model="emailAddress"
-                            inputId="emailAddress"
+                            customInputId="emailAddress"
-                            disableAutoFill
+                            isRequired
                             validationRules="email-address-format" />
                     </div>
                 </div>