From 6a14ea429ee0463a1528a8509a8e3274fff04fcf Mon Sep 17 00:00:00 2001
From: Scott Kiener <scott.kiener@safelite.com>
Date: Tue, 17 May 2022 16:07:25 -0400
Subject: [PATCH] CSR-563 | Further refactoring - changing alerts to v-if

---
 src/layouts/address-lookup/address-lookup.vue |  8 ++---
 .../address-questions/address-questions.vue   |  4 +--
 .../windshield-options/windshield-options.vue |  4 +--
 src/ux-components/alert/alert.vue             | 34 +++++++++++--------
 4 files changed, 28 insertions(+), 22 deletions(-)

diff --git a/src/layouts/address-lookup/address-lookup.vue b/src/layouts/address-lookup/address-lookup.vue
index cedc140d2..83f243250 100644
--- a/src/layouts/address-lookup/address-lookup.vue
+++ b/src/layouts/address-lookup/address-lookup.vue
@@ -12,27 +12,27 @@
 			<funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" ref="funnelSubHeader" />	
 			<div class="fade-on-route-transition sub-container make-tall">
 				<customerQuestions ref="customerQuestions" v-model="customerQuestions" />
-				<alert ref="alertVinNotFound" v-show="displayVinNotFoundAlert"
+				<alert ref="alertVinNotFound" v-if="displayVinNotFoundAlert"
 					class="my-3"
 					cmsWidgetName="AlertVinNotFoundWidget"
 					alertClass="alert-danger"
 					v-bind:isDismissible="false"
 				/>
-				<alert ref="alertMatchedDifferentVehicle" v-show="displayMatchedDifferentVehicleAlert"
+				<alert ref="alertMatchedDifferentVehicle" v-if="displayMatchedDifferentVehicleAlert"
 					class="my-3"
 					:manualHeadline="AlertMatchedDifferentVehicleHeader"
 					:manualCopy="AlertMatchedDifferentVehicleBody"
 					alertClass="alert-warning"
 					v-bind:isDismissible="false"
 				/>			
-				<alert ref="alertNonServiceableZip" v-show="displayNonServiceableZipAlert"
+				<alert ref="alertNonServiceableZip" v-if="displayNonServiceableZipAlert"
 					class="my-3"
 					alertClass="alert-danger"
 					:manualHeadline="AlertNonServiceableZipHeader"
 					:manualCopy="AlertNonServiceableZipBody"
 					v-bind:isDismissible="false"
 				/>			
-				<alert ref="alertVinLookupsByHomeAddressNotAllowed" v-show="displayVinLookupByHomeAddressNotAllowedAlert"
+				<alert ref="alertVinLookupsByHomeAddressNotAllowed" v-if="displayVinLookupByHomeAddressNotAllowedAlert"
 					class="my-3"
 					cmsWidgetName="AlertVinLookupsByHomeAddressNotAllowedWidget"
 					alertClass="alert-danger"
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 4408a803f..ae4390f70 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
@@ -21,12 +21,12 @@
 			</div>
 		</div>
 	</transition>		
-	<alert ref="alertVerificationWarning" v-show="displayVerificationWarning"
+	<alert ref="alertVerificationWarning" v-if="displayVerificationWarning"
 		cmsWidgetName="AlertVerificationWarningWidget"
 		alertClass="alert-warning"
 		v-bind:isDismissible="false"
 	/>
-	<alert ref="alertNoMatchWarning" v-show="displayNoMatchWarning"
+	<alert ref="alertNoMatchWarning" v-if="displayNoMatchWarning"
 		cmsWidgetName="AlertNoMatchWarningWidget"
 		alertClass="alert-warning"
 		v-bind:isDismissible="false"
diff --git a/src/layouts/vehicle-damage/windshield-options/windshield-options.vue b/src/layouts/vehicle-damage/windshield-options/windshield-options.vue
index 1e9cfbc0a..6e7c844ff 100644
--- a/src/layouts/vehicle-damage/windshield-options/windshield-options.vue
+++ b/src/layouts/vehicle-damage/windshield-options/windshield-options.vue
@@ -10,7 +10,7 @@
         <alert
             class="my-3"
             cmsWidgetName="NoReplacementAvailableError"
-            v-show="showNoReplacementAvailableError"
+            v-if="showNoReplacementAvailableError"
             alertClass="alert-danger"
             :isDismissible="false"
           />
@@ -32,7 +32,7 @@
         <alert
             class="my-3"
             cmsWidgetName="SplitSingleConflict"
-            v-show="hasSplitSingleConflict"
+            v-if="hasSplitSingleConflict"
             alertClass="alert-danger"
             :isDismissible="false"
           />
diff --git a/src/ux-components/alert/alert.vue b/src/ux-components/alert/alert.vue
index d80519f9a..5c0d7a270 100644
--- a/src/ux-components/alert/alert.vue
+++ b/src/ux-components/alert/alert.vue
@@ -52,7 +52,7 @@ export default {
     cmsWidgetName: String,
     manualHeadline: String,
     manualCopy: String,
-    doesScrollToOnAppear: {
+    shouldScrollToOnMount: {
       type: Boolean,
       default: true
     },
@@ -90,6 +90,14 @@ export default {
       // second split would return             'provide your VIN'
       return copy.split(':')[1].split(',')[1];
     },
+    ensureAlertIsInViewPort() {
+      if (this.shouldScrollToOnMount && this.$el.style.display != 'none') {
+        var footerHeight = this.getFooterInfoBoxHeight();
+        if (!this.isAlertInViewport(footerHeight)) {
+          this.scrollContainerToAlert(footerHeight);
+        }
+      }
+    },
     isAlertInViewport(footerHeight) {
       const rect = this.$el.getBoundingClientRect();
       return (
@@ -97,20 +105,18 @@ export default {
           // remove footerHeight from window height to avoid items being hidden behind footer
           rect.bottom <= (window.innerHeight - footerHeight || document.documentElement.clientHeight - footerHeight)
       );
-    }, 
+    },
+    scrollContainerToAlert(footerHeight) {
+      // alert position on page + height of alert + footer height
+          var scrollToHeight = this.$el.scrollHeight + this.$el.offsetHeight + footerHeight;
+          // find the div wrapped by the form element - this is the scrollable container
+          // should be a more future-proof selector in case of CSS class changes
+          var pageContainerScrollable = document.querySelector('form > div');
+          pageContainerScrollable.scrollTo(0, scrollToHeight);
+    },
   },
-  updated() {
-    if (this.doesScrollToOnAppear && this.$el.style.display != 'none') {
-      var footerHeight = this.getFooterInfoBoxHeight();
-      if (!this.isAlertInViewport(footerHeight)) {
-        // alert position on page + height of alert + footer height
-        var scrollToHeight = this.$el.scrollHeight + this.$el.offsetHeight + footerHeight;
-        // find the div wrapped by the form element - this is the scrollable container
-        // should be a more future-proof selector in case of CSS class changes
-        var pageContainerScrollable = document.querySelector('form > div');
-        pageContainerScrollable.scrollTo(0, scrollToHeight);
-      }
-    }
+  mounted() {
+    this.ensureAlertIsInViewPort();
   }
 };
 </script>