Merge pull request #1027 from Safelite/feature/humphries/INSR-7747

INSR-7747: address-lookup parity updates

src/App.vue

@@ -40,6 +40,17 @@ export default {
         shouldShowTextCarousel() {
             return this.globalNonpersistedState.showTextCarousel;
         }
+    },
+    watch: {
+        shouldShowLoader(newVal) {
+            // prevent keyboard input when loader is shown, re-enable when hidden
+            if(newVal) {
+                document.onkeydown = () => false;
+            }
+            else {
+                document.onkeydown = null;
+            }
+        }
     }
 };
 // Add a global Javascript exception handler for logging exceptions, this handler will log when there is an uncaught exception

src/digital-components/text-block/text-block.vue

@@ -7,7 +7,7 @@
         :key="copy">
             <span v-if="doesCopyContainRouterLink(copy)">
                 <routerLink
-                    class="bold"
+                    class="bold router-link"
                     :to="{
                         query: { issPage: `${getRouterLinkRouteFromCopy(copy)}` },
                         name: 'root',

src/iss-components/site-footer/site-footer.vue

@@ -82,9 +82,6 @@ export default {
     mounted() {
         this.paddingHeight = this.getFooterInfoBoxHeight() + 24;
     },
-    unmounted() {
-        document.onkeydown = null;
-    },
     methods: {
         onResize() {
             this.paddingHeight = this.getFooterInfoBoxHeight();
@@ -93,9 +90,6 @@ export default {
             this.customButtontext = newText;
         },
         buttonClick() {
-            // prevent keyboard input after button click
-            document.onkeydown = () => false;
-
             if ((!this.disableForwardAction && !this.isForwardActionDisabled && !this.isForwardButtonNavigationDisabled)) {
                 showIssLoadingModal(true);
             }

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

@@ -14,12 +14,16 @@
                         ref="siteSubHeader"
                         cmsWidgetName="SiteSubHeaderWidget"
                         class="mt-4" />
+                    <customerQuestions
+                        ref="customerQuestions"
+                        v-model="customerQuestions" />
                     <alert
                         v-if="displayVinNotFoundAlert"
                         ref="alertVinNotFound"
                         class="mb-4 mt-4"
                         cmsWidgetName="AlertVinNotFoundWidget"
                         alertClass="alert-danger"
+                        :isCollapsible="true"
                         :isDismissible="false" />
                     <alert
                         v-if="displayMatchedDifferentVehicleAlert"
@@ -29,6 +33,7 @@
                         :manualHeadline="AlertMatchedDifferentVehicleHeader"
                         :manualCopy="AlertMatchedDifferentVehicleBody"
                         alertClass="alert-warning"
+                        :isCollapsible="true"
                         :isDismissible="false" />
                     <alert
                         v-if="displayMatchedTwoIdenticalYMMVehicleAlert"
@@ -38,6 +43,7 @@
                         :manualHeadline="AlertMatchedTwoIdenticalYMMVehicleHeader"
                         :manualCopy="AlertMatchedTwoIdenticalYMMVehicleBody"
                         alertClass="alert-warning"
+                        :isCollapsible="true"
                         :isDismissible="false" />
                     <alert
                         v-if="displayVinLookupByHomeAddressNotAllowedAlert"
@@ -45,6 +51,7 @@
                         class="mt-4"
                         cmsWidgetName="AlertVinLookupsByHomeAddressNotAllowedWidget"
                         alertClass="alert-danger"
+                        :isCollapsible="true"
                         :isDismissible="false" />
                     <alert
                         v-if="displayNoServiceAlert"
@@ -52,10 +59,8 @@
                         class="mt-5"
                         cmsWidgetName="AlertNoServiceWidget"
                         alertClass="alert-danger"
+                        :isCollapsible="true"
                         :isDismissable="false" />
-                    <customerQuestions
-                        ref="customerQuestions"
-                        v-model="customerQuestions" />
                     <siteFooter
                         ref="siteFooter"
                         class="mt-5"
@@ -92,6 +97,7 @@ import {
 
 import vinPagesMixin from '@/mixins/vin-pages-mixin';
 import { useMainStore } from '@/store/index.js';
+import showIssLoadingModal from '@/helpers/loading-modal-helper';
 
 export default {
     name: 'address-lookup',
@@ -250,6 +256,7 @@ export default {
             if (!resultMap.vinLookupResponse.isStatePermissible) {
                 // State Restrictions forbid lookup by address
                 this.displayVinLookupByHomeAddressNotAllowedAlert = true;
+                showIssLoadingModal(false);
                 return this.$refs.siteFooter.disableForwardButton();
             }
 
@@ -262,6 +269,7 @@ export default {
 
                 if (!carFound.canSafeliteService) {
                     this.displayNoServiceAlert = true;
+                    showIssLoadingModal(false);
                     return this.$refs.siteFooter.disableForwardButton();
                 }
 
@@ -281,6 +289,7 @@ export default {
                         await isGlassAvailableForCarId(carFound.carId);
 
                     // Update button "Continue with..."
+                    showIssLoadingModal(false);
                     return this.$refs.siteFooter
                         // eslint-disable-next-line max-len
                         .updateButtonText(`Continue with ${carFound.year} ${carFound.make} ${carFound.model} ${this.forwardButtonCarStyle}`);
@@ -306,6 +315,7 @@ export default {
             } else {
                 // No VINS found.
                 this.displayVinNotFoundAlert = true;
+                showIssLoadingModal(false);
                 return this.$refs.siteFooter.disableForwardButton();
             }
 

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

@@ -2,7 +2,7 @@
     <addressQuestions
         ref="addressQuestions"
         v-model="customerModel.addressQuestions" />
-    <div class="row mb-4">
+    <div class="row">
         <div class="col">
             <textboxQuestion
                 ref="firstName"
@@ -13,7 +13,7 @@
                 :validationRules="rules.firstName" />
         </div>
     </div>
-    <div class="row mb-4">
+    <div class="row">
         <div class="col">
             <textboxQuestion
                 ref="lastName"
@@ -76,3 +76,8 @@ export default {
     }
 };
 </script>
+<style lang="scss" scoped>
+.textbox-question {
+    margin-bottom: 1.25rem;
+}
+</style>

src/styles/common-styles.scss

@@ -199,4 +199,16 @@ $heritage-btn-width: 9.0625rem; // 145px
         // fixes flicker while transitioning between states
         transition: background 0s 0s ease-in-out;
     }
+}
+
+a.router-link {
+    color: $heritage-blue-primary;
+    text-decoration: none;
+    font-weight: $font-weight-bold;
+
+    &:hover,
+    &:focus {
+        color: #125b7e;
+        text-decoration: underline;
+    }
 }

src/ux-components/alert/alert.vue

@@ -57,7 +57,7 @@
                         <textBlock
                             :customText="paragraph"
                             class="mb-1"
-                            marginTopSizeOverride="0" />
+                            :marginTopSizeOverride="0" />
                     </template>
                     <template
                         v-for="copy in splitCopyOnCMSPlaceHolder(paragraph)"