From 298da3b24deecbb755dc50d95b08121905b6d643 Mon Sep 17 00:00:00 2001
From: bmauger <mauger.bryan@gmail.com>
Date: Tue, 31 May 2022 16:04:42 -0400
Subject: [PATCH] Footer modal updates.

---
 .../footer-menu-modal/footer-menu-modal.vue   |  52 --------
 .../funnel-footer/funnel-footer.vue           |  28 ++---
 .../funnel-header/funnel-header.vue           |  12 +-
 .../menu-button/menu-button.spec.js           |   1 -
 .../menu-button/menu-button.vue               |  65 ----------
 .../menu-modal.spec.js}                       |   0
 .../menu-modal/menu-modal.vue                 | 116 ++++++++++++++++++
 src/layouts/component-test/component-test.vue |   6 +-
 src/mixins/base-mixin.js                      |   4 +-
 9 files changed, 134 insertions(+), 150 deletions(-)
 delete mode 100644 src/common-components/footer-menu-modal/footer-menu-modal.vue
 delete mode 100644 src/common-components/menu-button/menu-button.spec.js
 delete mode 100644 src/common-components/menu-button/menu-button.vue
 rename src/common-components/{footer-menu-modal/footer-menu-modal.spec.js => menu-modal/menu-modal.spec.js} (100%)
 create mode 100644 src/common-components/menu-modal/menu-modal.vue

diff --git a/src/common-components/footer-menu-modal/footer-menu-modal.vue b/src/common-components/footer-menu-modal/footer-menu-modal.vue
deleted file mode 100644
index 929461a53..000000000
--- a/src/common-components/footer-menu-modal/footer-menu-modal.vue
+++ /dev/null
@@ -1,52 +0,0 @@
-<template>
-  <!-- Modal -->
-  <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
-    <div class="modal-dialog modal-fullscreen">
-      <div class="modal-content">
-        <div class="modal-body d-flex flex-column">
-          <textLink linkType="navigation" text="Terms of use" href="https://www.safelite.com/terms-of-use" />
-          <textLink linkType="navigation" text="Privacy policy" href="https://www.safelite.com/safelite-group-privacy-policy" />
-          <textLink linkType="navigation" text="Do not sell my information" href="https://privacyportal-cdn.onetrust.com/dsarwebform/d3b95a93-e22e-4d4d-a806-482052406557/9e371601-eae3-4338-9430-b90b9036022b.html" />
-        </div>
-        <div class="modal-footer d-flex justify-content-start">
-          &copy; {{new Date().getFullYear()}} Safelite Group
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-import textLink from "@/ux-components/text-link/text-link";
-export default {
-  name: 'footerMenuModal',
-  components: {
-    textLink,
-  },
-}
-</script>
-
-<style lang="scss">
-.modal {
-  max-width: 576px;
-  left: auto;
-  height: calc(100% - 72px);
-  top: 72px;
-  border-top: 1px solid $gray-300;
-  .modal-body {
-    padding: 2rem;
-  }
-    .modal-fullscreen {
-      width: 100vw;
-      max-width: 576px;
-  }
-  .navigation-link {
-    margin-bottom: 1.5rem;
-  }
-  .modal-footer {
-    border-top: none;
-    padding: 2rem;
-  }
-  //.modal-backdrop styles are in common-styles.scss
-}
-</style>
diff --git a/src/common-components/funnel-footer/funnel-footer.vue b/src/common-components/funnel-footer/funnel-footer.vue
index 4e7ce11c4..fb07779f0 100644
--- a/src/common-components/funnel-footer/funnel-footer.vue
+++ b/src/common-components/funnel-footer/funnel-footer.vue
@@ -1,21 +1,6 @@
 <template>
-  <footer class="footer pt-4">
-    <div class="container-fluid g-2">
-      <div class="row">
-        <div class="col-12 d-flex justify-content-center pb-2 fs-7">
-          &copy;&nbsp;{{new Date().getFullYear()}}&nbsp;Safelite Group
-        </div>
-      </div>
-      <div class="row" :style="`padding-bottom: ${paddingHeight}px`">
-        <div class="col d-flex justify-content-center justify-content-around text-center">
-          <textLink linkType="footer" text="Terms of use" href="https://www.safelite.com/terms-of-use" />
-          <textLink linkType="footer" text="Privacy policy" href="https://www.safelite.com/safelite-group-privacy-policy" />
-          <textLink linkType="footer" text="Do not sell my information" href="https://privacyportal-cdn.onetrust.com/dsarwebform/d3b95a93-e22e-4d4d-a806-482052406557/9e371601-eae3-4338-9430-b90b9036022b.html" />
-        </div>
-      </div>
-    </div>
-    <div class="container-fluid fixed-bottom g-5 bg-light py-4" id="infoBox">
-      <div class="row d-flex flex-row-reverse align-items-center">
+    <footer class="footer container-fluid fixed-bottom g-5 bg-light py-4" id="infoBox">
+      <div class="row d-flex flex-row-reverse align-items-center vw-100">
         <div class="col button-col d-flex" id="stacked">
           <buttonMain
             ref="buttonMain"
@@ -26,6 +11,7 @@
             :aria-disabled="isForwardActionDisabled"
             :isDisabled="isForwardActionDisabled"
             @click-event="buttonClick"
+            data-bs-target="#footerModal"
             data-bs-dismiss="modal"
           />
         </div>
@@ -35,11 +21,11 @@
             :text="backLink"
             @click-event="linkClick"
             href="javascript:void(0)"
+            data-bs-target="#footerModal"
             data-bs-dismiss="modal"
           />
         </div>
       </div>
-    </div>
   </footer>
 </template>
 
@@ -77,12 +63,15 @@ export default {
     document.onkeydown = null;
   },
   computed: {
+    height () {
+      return this.$refs.infoBox.clientHeight;
+    },
     backLink(){
       return this.getCmsContent(this.cmsWidgetName, 'BackButtonText');
     },
     buttonText(){
       return this.customButtontext ? this.customButtontext : this.getCmsContent(this.cmsWidgetName, 'ForwardButtonText');
-    }
+    },
   },
   methods: {
     onResize() {
@@ -114,7 +103,6 @@ export default {
 <style lang="scss" scoped>
 .footer {
   display: flex;
-  margin-top: auto;
   a {
     display: flex;
     justify-content: center;
diff --git a/src/common-components/funnel-header/funnel-header.vue b/src/common-components/funnel-header/funnel-header.vue
index 7f477380d..24e6c53c1 100644
--- a/src/common-components/funnel-header/funnel-header.vue
+++ b/src/common-components/funnel-header/funnel-header.vue
@@ -4,8 +4,7 @@
     v-if="imageSrc"
   >
     <img class="logo-image img-fluid" :src="imageSrc" alt="Safelite logo" />
-    <menuButton/>
-    <footerMenuModal/>
+    <menuModal/>
   </div>
   <alert
     class="position-absolute rounded-0 w-100 border-0 shadow-sm"
@@ -21,14 +20,14 @@
 import alert from "@/ux-components/alert/alert";
 import eventBus from "@/helpers/event-bus/event-bus";
 import { globalEvents } from "@/constants/events";
-import menuButton from "@/common-components/menu-button/menu-button";
-import footerMenuModal from "@/common-components/footer-menu-modal/footer-menu-modal";
+import menuModal from "@/common-components/menu-modal/menu-modal";
 
 export default {
   name: "funnel-header",
   data() {
     return {
       displayGlobalAlert: false,
+      headerHeight: 0,
       globalAlertMessage: {
         isDismissible: false,
         messageCopy: "",
@@ -47,8 +46,7 @@ export default {
   },
   components: {
     alert,
-    menuButton,
-    footerMenuModal,
+    menuModal,
   },
   mounted() {
     // Check if alert event is on the bus
@@ -56,7 +54,6 @@ export default {
       globalEvents.Categories.GLOBAL_ALERT,
       globalEvents.SubCategories.PAGE_NOT_FOUND
     );
-
     // If alert event is on the bus, then display the alert
     if (alertEvent !== undefined) {
       this.displayGlobalAlert = true;
@@ -76,5 +73,6 @@ export default {
 }
 .alert {
   left: 0;
+  top: 72px;
 }
 </style>
diff --git a/src/common-components/menu-button/menu-button.spec.js b/src/common-components/menu-button/menu-button.spec.js
deleted file mode 100644
index 3d0843e10..000000000
--- a/src/common-components/menu-button/menu-button.spec.js
+++ /dev/null
@@ -1 +0,0 @@
-test.todo("some test to be written in the future");
diff --git a/src/common-components/menu-button/menu-button.vue b/src/common-components/menu-button/menu-button.vue
deleted file mode 100644
index 477ad4989..000000000
--- a/src/common-components/menu-button/menu-button.vue
+++ /dev/null
@@ -1,65 +0,0 @@
-<template>
-  <div class="menu-button-container">
-    <button class="menu-button" type="button" :class="[isActive ? 'active' : '']" @click="toggleClass()" data-bs-toggle="modal" data-bs-target="#exampleModal">
-      <div class="bar1"></div>
-      <div class="bar2"></div>
-      <div class="bar3"></div>
-    </button>
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'menuButton',
-  data() {
-    return {
-      isActive: false,
-    };
-  },
-  methods: {
-    toggleClass: function(event){
-      this.isActive = !this.isActive;
-    }
-  }
-}
-</script>
-
-<style lang="scss">
-.menu-button-container {
-  position: absolute;
-  top: 1.47rem;
-  right: 1.47rem;
-  button {
-    border: none;
-    &.menu-button {
-      width: 1.5rem;
-      height: 1.5rem;
-      border-radius: 50%;
-      box-shadow: 0 2px 8px 0 rgba(0,0,0,0.2);
-      background-color: $white;
-      position: relative;
-      display: flex;
-      flex-direction: column;
-      justify-content: center;
-      align-items: center;
-      z-index: 1056;
-      .bar1,
-      .bar2,
-      .bar3 {
-        width: 14px;
-        height: 2px;
-        background-color: $blue-400;
-        margin: 1px 0;
-        transition: 0.25s;
-      }
-      &.active .bar1 {
-        transform: rotate(-45deg) translate(-3px, 3px);
-      }
-      &.active .bar2 {opacity: 0;}
-      &.active .bar3 {
-        transform: rotate(45deg) translate(-3px, -3px);
-      }
-    }
-  }
-}
-</style>
diff --git a/src/common-components/footer-menu-modal/footer-menu-modal.spec.js b/src/common-components/menu-modal/menu-modal.spec.js
similarity index 100%
rename from src/common-components/footer-menu-modal/footer-menu-modal.spec.js
rename to src/common-components/menu-modal/menu-modal.spec.js
diff --git a/src/common-components/menu-modal/menu-modal.vue b/src/common-components/menu-modal/menu-modal.vue
new file mode 100644
index 000000000..905c17b63
--- /dev/null
+++ b/src/common-components/menu-modal/menu-modal.vue
@@ -0,0 +1,116 @@
+<template>
+  <div class="menu-modal-container">
+    <button class="menu-button" type="button" :class="[isActive ? 'active' : '']" data-bs-toggle="modal" data-bs-target="#footerModal">
+      <div class="bar1"></div>
+      <div class="bar2"></div>
+      <div class="bar3"></div>
+    </button>
+  </div>
+  <!-- Modal -->
+  <div class="modal fade" id="footerModal" tabindex="-1" aria-labelledby="footerModalLabel" aria-hidden="true" :style="`height: calc(100% - ${currentFooterAndHeaderHeight}px);`">
+    <div class="modal-dialog modal-fullscreen">
+      <div class="modal-content">
+        <div class="modal-header visually-hidden">
+          <h5 class="modal-title" id="footerModalLabel">Footer Navigation</h5>
+        </div>
+        <div class="modal-body d-flex flex-column">
+          <textLink linkType="navigation" text="Terms of use" href="https://www.safelite.com/terms-of-use" />
+          <textLink linkType="navigation" text="Privacy policy" href="https://www.safelite.com/safelite-group-privacy-policy" />
+          <textLink linkType="navigation" text="Do not sell my information" href="https://privacyportal-cdn.onetrust.com/dsarwebform/d3b95a93-e22e-4d4d-a806-482052406557/9e371601-eae3-4338-9430-b90b9036022b.html" />
+        </div>
+        <div class="modal-footer d-flex justify-content-start">
+          &copy; {{new Date().getFullYear()}} Safelite Group
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import textLink from "@/ux-components/text-link/text-link";
+export default {
+  name: 'menuModal',
+  data() {
+    return {
+      isActive: false,
+      currentFooterAndHeaderHeight: 0,
+    };
+  },
+  mounted() {
+    const myModalEl = document.getElementById('footerModal');
+    var self = this;
+    myModalEl.addEventListener('hide.bs.modal', function (event) {
+      self.isActive = false;
+    });
+    myModalEl.addEventListener('show.bs.modal', function (event) {
+      self.isActive = true;
+      self.currentFooterAndHeaderHeight = self.getFooterInfoBoxHeight() + 72;
+    })
+  },
+  components: {
+    textLink,
+  }
+}
+</script>
+
+<style lang="scss">
+.menu-modal-container {
+  position: absolute;
+  padding: 1.47rem 1rem 1.47rem 1.47rem;
+  right: 0;
+  button {
+    border: none;
+    &.menu-button {
+      width: 1.5rem;
+      height: 1.5rem;
+      border-radius: 50%;
+      box-shadow: 0 2px 8px 0 rgba(0,0,0,0.2);
+      background-color: $white;
+      position: relative;
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+      z-index: 1056;
+      .bar1,
+      .bar2,
+      .bar3 {
+        width: 14px;
+        height: 2px;
+        background-color: $blue-400;
+        margin: 1px 0;
+        transition: 0.25s;
+      }
+      &.active .bar1 {
+        transform: rotate(-45deg) translate(-3px, 3px);
+      }
+      &.active .bar2 {opacity: 0;}
+      &.active .bar3 {
+        transform: rotate(45deg) translate(-3px, -3px);
+      }
+    }
+  }
+}
+.modal {
+  max-width: 576px;
+  left: auto;
+  height: calc(100% - 72px);
+  top: 72px;
+  border-top: 1px solid $gray-300;
+  .modal-body {
+    padding: 2rem;
+  }
+    .modal-fullscreen {
+      width: 100vw;
+      max-width: 576px;
+  }
+  .navigation-link {
+    margin-bottom: 1.5rem;
+  }
+  .modal-footer {
+    border-top: none;
+    padding: 2rem;
+  }
+  //.modal-backdrop styles are in common-styles.scss
+}
+</style>
diff --git a/src/layouts/component-test/component-test.vue b/src/layouts/component-test/component-test.vue
index 268351417..9cc376249 100644
--- a/src/layouts/component-test/component-test.vue
+++ b/src/layouts/component-test/component-test.vue
@@ -7,7 +7,7 @@
       </div>
       <div class="row my-2">
         <div class="col">
-          <menuButton/>
+          <menuModal/>
         </div>
       </div>
       <div class="row my-4">
@@ -1089,7 +1089,7 @@
   import textboxQuestion from "@/common-components/textbox-question/textbox-question";
   import dropdownQuestion from "@/common-components/dropdown-question/dropdown-question";
   import vinInformation from "@/layouts/vin-lookup/vin-information/vin-information";
-  import menuButton from "@/common-components/menu-button/menu-button";
+  import menuModal from "@/common-components/menu-modal/menu-modal";
   export default {
     name: "App",
     components: {
@@ -1104,7 +1104,7 @@
       textboxQuestion,
       dropdownQuestion,
       vinInformation,
-      menuButton,
+      menuModal,
     },
     data() {
       return {
diff --git a/src/mixins/base-mixin.js b/src/mixins/base-mixin.js
index d0474d67b..0a30524ec 100644
--- a/src/mixins/base-mixin.js
+++ b/src/mixins/base-mixin.js
@@ -43,9 +43,9 @@ export default {
       }
     },
     getFooterInfoBoxHeight() {
-      const footerInfoBox = document.querySelector(".footer #infoBox");
+      const footerInfoBox = document.querySelector(".footer#infoBox");
       return footerInfoBox ? footerInfoBox.offsetHeight : 0;
-    }
+    },
   },
   computed: {
     storeActions() {