From ac77ef69f27f584f885013ec0e05b329ae0cf240 Mon Sep 17 00:00:00 2001
From: Bryan Mauger <bryan.mauger@safelite.com>
Date: Wed, 8 Mar 2023 16:00:54 -0500
Subject: [PATCH] SSR-307 add CPPA links and fix header so background color
 fills available space.

---
 .../site-header/menu-modal/menu-modal.vue     | 273 +++++++++---------
 .../site-header/site-header.vue               | 137 ++++-----
 2 files changed, 212 insertions(+), 198 deletions(-)

diff --git a/src/iss-components/site-header/menu-modal/menu-modal.vue b/src/iss-components/site-header/menu-modal/menu-modal.vue
index 1b92ad6f..3dffe63d 100644
--- a/src/iss-components/site-header/menu-modal/menu-modal.vue
+++ b/src/iss-components/site-header/menu-modal/menu-modal.vue
@@ -1,155 +1,165 @@
 <template>
     <div class="menu-modal-container">
-      <button class="menu-button" type="button" :class="[isActive ? 'active' : '']" data-bs-toggle="modal" data-bs-target="#footerModal" aria-label="Hamburger Menu (modal window)">
-        <div class="bar1"></div>
-        <div class="bar2"></div>
-        <div class="bar3"></div>
-      </button>
+        <button class="menu-button" type="button" :class="[isActive ? 'active' : '']" data-bs-toggle="modal" data-bs-target="#footerModal" aria-label="Hamburger Menu (modal window)">
+            <div class="bar1"></div>
+            <div class="bar2"></div>
+            <div class="bar3"></div>
+        </button>
     </div>
     <!-- Modal -->
     <div class="modal menu-modal fade" data-bs-backdrop="false" id="footerModal" tabindex="-1" aria-labelledby="footerModalLabel" aria-hidden="true" v-on="{ 'show.bs.modal' : show, 'hide.bs.modal' : hide }" :style="`height: calc(100% - ${currentFooterAndHeaderHeight}px);`">
-      <div class="menu-modal-container">
+        <div class="menu-modal-container">
             <button
-                class="menu-button"
-                type="button"
-                :class="[isActive ? 'active' : '']"
-                data-bs-toggle="modal"
-                data-bs-target="#footerModal"
-                aria-label="Hamburger Menu (modal window)">
-                <div class="bar1"></div>
-                <div class="bar2"></div>
-                <div class="bar3"></div>
-            </button>
-      </div>
-      <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" target="_blank" />
-            <textLink
-              linkType="navigation"
-              text="Your privacy choices"
-              href="//www.safelite.com/privacy-center"
-              target="_blank"
-            >
-              <template v-slot:after-text>
-                <img
-                  class="ccpa-icon"
-                  src="~@/assets/img/icons/ccpa-icon.svg"
-                  alt="Your privacy choices"
-                  data-id="ccpa-icon"
-                />
-              </template>
-            </textLink>
-            <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" target="_blank" />
-          </div>
-          <div class="modal-footer d-flex justify-content-start">
-            &copy; {{new Date().getFullYear()}} Safelite Group
-          </div>
-        </div>
-      </div>
+            class="menu-button"
+            type="button"
+            :class="[isActive ? 'active' : '']"
+            data-bs-toggle="modal"
+            data-bs-target="#footerModal"
+            aria-label="Hamburger Menu (modal window)">
+            <div class="bar1"></div>
+            <div class="bar2"></div>
+            <div class="bar3"></div>
+        </button>
     </div>
-  </template>
+    <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="//www.safelite.com/terms-of-use"
+                target="_blank" />
+                <textLink
+                linkType="navigation"
+                text="Your privacy choices"
+                href="//www.safelite.com/privacy-center"
+                target="_blank">
+                <template v-slot:after-text>
+                    <img
+                    class="ccpa-icon"
+                    src="~@/assets/img/icons/ccpa-icon.svg"
+                    alt="Your privacy choices" />
+                </template>
+            </textLink>
+            <textLink
+            linkType="navigation"
+            text="Warranty"
+            href="//www.safelite.com/national-lifetime-warranty"
+            target="_blank" />
+            <textLink
+            linkType="navigation"
+            text="Notice at collection"
+            href="https://privacyportal-cdn.onetrust.com/dsarwebform/d3b95a93-e22e-4d4d-a806-482052406557/9e371601-eae3-4338-9430-b90b9036022b.html"
+            target="_blank" />
+        </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 {
+<script>
+import textLink from "@/ux-components/text-link/text-link";
+export default {
     name: 'menuModal',
     data() {
-      return {
-        isActive: false,
-        currentFooterAndHeaderHeight: 0,
-      };
+        return {
+            isActive: false,
+            currentFooterAndHeaderHeight: 0,
+        };
     },
     methods: {
-      show() {
-        this.currentFooterAndHeaderHeight = this.getFooterInfoBoxHeight() + 72;
-        this.isActive = true;
-        document.querySelector('.page-container-grouped-styles').scrollTo({
-          top: 0,  behavior: 'smooth'
-        });
-      },
-      hide() {
-        var self = this;
-        self.isActive = false;
-      },
+        show() {
+            this.currentFooterAndHeaderHeight = this.getFooterInfoBoxHeight() + 72;
+            this.isActive = true;
+            document.querySelector('.page-container-grouped-styles').scrollTo({
+                top: 0,  behavior: 'smooth'
+            });
+        },
+        hide() {
+            var self = this;
+            self.isActive = false;
+        },
     },
     components: {
-      textLink,
+        textLink,
     }
-  }
-  </script>
+}
+</script>
 
-  <style lang="scss" scoped>
-  .menu-modal-container {
+<style lang="scss" scoped>
+.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;
-        padding: 0;//Required to prevent 'squish' on iPhone
-        z-index: 1050;
-        .bar1,
-        .bar2,
-        .bar3 {
-          width: 14px;
-          height: 2px;
-          background-color: $blue;
-          margin: 1px 0;
-          transition: 0.25s;
+        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;
+            padding: 0;//Required to prevent 'squish' on iPhone
+            z-index: 1050;
+            .bar1,
+            .bar2,
+            .bar3 {
+                width: 14px;
+                height: 2px;
+                background-color: $blue;
+                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);
+            }
         }
-        &.active .bar1 {
-          transform: rotate(-45deg) translate(-3px, 3px);
-        }
-        &.active .bar2 {opacity: 0;}
-        &.active .bar3 {
-          transform: rotate(45deg) translate(-3px, -3px);
-        }
-      }
     }
-  }
-  .modal {
+}
+.modal {
     &.menu-modal {
-      max-width: 576px;
-      left: auto;
-      height: calc(100% - 72px);
-      top: 72px;
-      border-top: 1px solid $gray-300;
-      overflow-x: visible;
-      overflow-y: visible;
-      .modal-body {
-        padding: 2rem;
-        .ccpa-icon {
-          width: 2.0625rem;
-          height: 1rem;
-          margin-left: 0.5rem;
+        max-width: 576px;
+        left: auto;
+        height: calc(100% - 72px);
+        top: 72px;
+        border-top: 1px solid $gray-300;
+        overflow-x: visible;
+        overflow-y: visible;
+        .modal-body {
+            padding: 2rem;
+            .ccpa-icon {
+                width: 2.0625rem;
+                height: 1rem;
+                margin-left: 0.5rem;
+            }
         }
-      }
-      .modal-fullscreen {
-          width: 100vw;
-          max-width: 576px;
-      }
-      .navigation-link {
-        margin-bottom: 1.5rem;
-      }
-      .modal-footer {
-        border-top: none;
-        padding: 2rem;
-      }
-      .menu-modal-container {
+        .modal-fullscreen {
+            width: 100vw;
+            max-width: 576px;
+        }
+        .navigation-link {
+            margin-bottom: 1.5rem;
+        }
+        .modal-footer {
+            border-top: none;
+            padding: 2rem;
+        }
+        .menu-modal-container {
             position: absolute;
             padding: 1.47rem 1rem 1.47rem 1.47rem;
             right: .5rem;
@@ -164,6 +174,7 @@
                     background-color: $white;
                     position: relative;
                     right: -.5rem;
+                    top: .5rem;
                     display: flex;
                     flex-direction: column;
                     justify-content: center;
@@ -191,7 +202,7 @@
                 }
             }
         }
-      //.modal-backdrop styles are in common-styles.scss
+        //.modal-backdrop styles are in common-styles.scss
     }
-  }
-  </style>
+}
+</style>
diff --git a/src/iss-components/site-header/site-header.vue b/src/iss-components/site-header/site-header.vue
index 39862840..d9d485be 100644
--- a/src/iss-components/site-header/site-header.vue
+++ b/src/iss-components/site-header/site-header.vue
@@ -5,13 +5,13 @@
             <menuModal/>
         </div>
         <alert
-            v-if="displayGlobalAlert"
-            class="position-absolute rounded-0 w-100 border-0 shadow-sm start-0"
-            cmsWidgetName="GlobalAlert"
-            :manualHeadline="globalAlertMessage.messageHeadline"
-            :manualCopy="globalAlertMessage.messageCopy"
-            :alertClass="globalAlertMessage.type"
-            v-bind:isDismissible="globalAlertMessage.isDismissible" />
+        v-if="displayGlobalAlert"
+        class="position-absolute rounded-0 w-100 border-0 shadow-sm start-0"
+        cmsWidgetName="GlobalAlert"
+        :manualHeadline="globalAlertMessage.messageHeadline"
+        :manualCopy="globalAlertMessage.messageCopy"
+        :alertClass="globalAlertMessage.type"
+        v-bind:isDismissible="globalAlertMessage.isDismissible" />
     </div>
 </template>
 
@@ -21,60 +21,60 @@ import alert from "@/ux-components/alert/alert";
 import eventBus from "@/helpers/event-bus/event-bus";
 import { globalEvents } from "@/constants/events";
 
-    export default({
-        name: "siteHeader",
-        data() {
+export default({
+    name: "siteHeader",
+    data() {
+        return {
+            displayGlobalAlert: false,
+            globalAlertMessage: {
+                isDismissible: false,
+                messageCopy: "",
+                messageHeadline: "",
+                type: "",
+            },
+            headerAnswers: null
+        };
+    },
+    props: {
+        cmsWidgetName: String,
+    },
+    computed: {
+        imageSrc()
+        {
+            return this.headerAnswers ? this.headerAnswers.AnswerImageUrl : "";
+        },
+        altText()
+        {
+            return this.headerAnswers ?  this.headerAnswers.AltText : "";
+        },
+        logoBackgroundStyle() {
             return {
-                displayGlobalAlert: false,
-                globalAlertMessage: {
-                    isDismissible: false,
-                    messageCopy: "",
-                    messageHeadline: "",
-                    type: "",
-                },
-                headerAnswers: null
+                "background-color": this.headerAnswers ?  this.headerAnswers.HexCode : "#FFFFFF"
             };
         },
-        props: {
-            cmsWidgetName: String,
-        },
-        computed: {
-            imageSrc()
-            {
-                return this.headerAnswers ? this.headerAnswers.AnswerImageUrl : "";
-            },
-            altText()
-            {
-                return this.headerAnswers ?  this.headerAnswers.AltText : "";
-            },
-            logoBackgroundStyle() {
-                return {
-                    "background-color": this.headerAnswers ?  this.headerAnswers.HexCode : "#FFFFFF"
-                };
-            },
-        },
-        mounted() {
-            const answers = this.getCmsContent(this.cmsWidgetName, "Answers");
-            this.headerAnswers = Array.isArray(answers) 
-                ? answers.filter(x => x.AccountNumber == this.mainStore.issConfig.accountNumber)[0] 
-                : null;
-            
-             // Check if alert event is on the bus
-            const alertEvent = eventBus.readAndPopEventFromBus(
-                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;
-                this.globalAlertMessage = alertEvent;
-            }
+    },
+    mounted() {
+        const answers = this.getCmsContent(this.cmsWidgetName, "Answers");
+        this.headerAnswers = Array.isArray(answers)
+        ? answers.filter(x => x.AccountNumber == this.mainStore.issConfig.accountNumber)[0]
+        : null;
 
-            //load client customization overrides
-            const clientOverrideClass = this.mainStore.issConfig.styleSheet.trim();
-            if(clientOverrideClass 
-                && clientOverrideClass != ""
-                && !document.getElementsByTagName("body")[0].className.split(" ").includes(clientOverrideClass))
+        // Check if alert event is on the bus
+        const alertEvent = eventBus.readAndPopEventFromBus(
+            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;
+            this.globalAlertMessage = alertEvent;
+        }
+
+        //load client customization overrides
+        const clientOverrideClass = this.mainStore.issConfig.styleSheet.trim();
+        if(clientOverrideClass
+            && clientOverrideClass != ""
+            && !document.getElementsByTagName("body")[0].className.split(" ").includes(clientOverrideClass))
             {
                 document.getElementsByTagName("body")[0].className += " " + clientOverrideClass;
             }
@@ -84,15 +84,18 @@ import { globalEvents } from "@/constants/events";
             alert
         },
     })
-</script>
+    </script>
 
-<style lang="scss" scoped>
-.alert {
-    left: 0;
-    top: 72px;
-}
+    <style lang="scss" scoped>
+    .site-header {
+        height: 72px;
+    }
+    .alert {
+        left: 0;
+        top: 72px;
+    }
 
-#siteHeaderImage {
-    height: 2.5rem;
-}
-</style>
\ No newline at end of file
+    #siteHeaderImage {
+        height: 2.5rem;
+    }
+    </style>