CSR-563 | Snap to alerts when not fully visible

Added "doesScrollToOnAppear" property to alert component.
-defaults to true
-when an alert is not fully visible on the page when it becomes visible, the page will attempt to scroll the alert to the top

src/common-components/funnel-footer/funnel-footer.vue

@@ -63,7 +63,7 @@ export default {
     }
   },
   mounted() {
-    this.paddingHeight = document.querySelector(".footer #infoBox").offsetHeight + 24;
+    this.paddingHeight = this.getFooterInfoBoxHeight() + 24;
     this.$nextTick(() => {
       window.addEventListener('resize', this.onResize);
     })

src/mixins/base-mixin.js

@@ -42,6 +42,9 @@ export default {
         el && el.focus();
       }
     },
+    getFooterInfoBoxHeight() {
+      return document.querySelector(".footer #infoBox").offsetHeight;
+    }
   },
   computed: {
     storeActions() {

src/ux-components/alert/alert.vue

@@ -52,6 +52,10 @@ export default {
     cmsWidgetName: String,
     manualHeadline: String,
     manualCopy: String,
+    doesScrollToOnAppear: {
+      type: Boolean,
+      default: true
+    },
   },
   computed: {
     alertHeadline(){
@@ -85,8 +89,27 @@ export default {
       // first split would return     'estimate,provide your VIN'
       // second split would return             'provide your VIN'
       return copy.split(':')[1].split(',')[1];
-    }
+    },
+    isAlertInViewport() {
+      const rect = this.$el.getBoundingClientRect();
+      return (
+          rect.top >= 0 &&
+          rect.bottom <= (window.innerHeight || document.documentElement.clientHeight)
+    );
+}
   },
+  updated() {
+    if (this.doesScrollToOnAppear && this.$el.style.display != 'none') {
+      if (!this.isAlertInViewport()) {
+        // alert position on page + height of alert + footer height
+        var scrollToHeight = this.$el.scrollHeight + this.$el.offsetHeight + this.getFooterInfoBoxHeight();
+        // 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>