CSR-563 | Further refactoring - changing alerts to v-if

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"

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"

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

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() {
+  mounted() {
-    if (this.doesScrollToOnAppear && this.$el.style.display != 'none') {
+    this.ensureAlertIsInViewPort();
-      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);
-      }
-    }
   }
 };
 </script>