CASH-403 WIP

src/App.vue

@@ -5,6 +5,7 @@
             <component :is="Component" ref="component" @focusin="handleAnyComponentFocus" />
         </transition>
     </router-view>
+    <funnelFooter/>
     <loadingModal :showLoader="shouldShowLoader" :showTextCarousel="shouldShowTextCarousel" />
 </template>
 
@@ -12,6 +13,7 @@
 import { handleAnyComponentFocus } from "@/helpers/button-question-focus-helper";
 import loadingModal from "@/fmg-components/loading-modal/loading-modal.vue";
 import { showFmgLoadingModal } from "@/helpers/loading-modal-helper";
+import funnelFooter from "@/fmg-components/funnel-footer/funnel-footer.vue";
 
 export default {
     name: "app",
@@ -32,6 +34,8 @@ export default {
     },
     components: {
         loadingModal,
+        funnelFooter,
+
     },
 };
 

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

@@ -0,0 +1,83 @@
+<template>
+    <div class="funnel-footer">
+        <div class="footer-inner-wrapper">            
+            <textLink
+            linkType="newWindowLink"
+            text="Terms of service"
+            href="//www.safelite.com/terms-of-service"
+            target="_blank" />
+        <textLink
+            linkType="newWindowLink"
+            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="newWindowLink"
+            text="Warranty"
+            href="//www.safelite.com/national-lifetime-warranty"
+            target="_blank" />
+        <textLink
+            linkType="newWindowLink"
+            text="Notice at collection"
+            href="https://www.safelite.com/ccpa-privacy-policy"
+            target="_blank" />
+        </div>
+    </div>
+</template>
+
+<script>
+
+import textLink from "@/ux-components/text-link/text-link";
+
+export default {
+    name: "funnelFooter",
+    components: {
+        textLink,
+    },
+};
+</script>
+
+<style lang="scss" scoped>
+.funnel-footer {
+    border-top: none;
+    display: flex;
+    width: 100%;
+    background: #ffffff;
+    flex: 1 0 auto;
+    align-items: end;
+
+    .footer-inner-wrapper {
+        display: flex;
+        flex-direction: column;
+        border-top: 1px solid $gray;
+        padding: 2rem 0;
+        width: 100%;
+        justify-content: center;
+        align-items: center;
+        flex-direction: column;
+
+        :deep(a) {
+            &.new-window-link {
+                margin: 0 0.75rem;
+            }
+        }
+
+        .ccpa-icon {
+            width: 2.0625rem;
+            height: 1rem;
+            margin-left: 0.5rem;
+        }
+
+        @include media-breakpoint-up(md) {
+            flex-direction: row;
+        }
+    }
+}
+</style>

src/fmg-components/funnel-header/funnel-header.vue

@@ -3,7 +3,7 @@
         class="funnel-header d-flex justify-content-center align-items-center flex-column"
         v-if="imageSrc">
         <img class="logo-image img-fluid" :src="imageSrc" alt="Safelite logo" />
-        <menuModal />
+        <menuModal/>
     </div>
     <template v-for="globalAlert in globalAlertMessages" :key="globalAlert.id">
         <transition name="fade" mode="out-in">
@@ -88,6 +88,9 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+:deep(.menu-modal-container) {
+    display: none;
+}
 .funnel-header {
     position: relative;
     padding: 0.97rem 0;

src/styles/common-styles.scss

@@ -4,13 +4,17 @@ body {
     font-size: 16px;
     background-color: #fff;
     color: #4d5151;
+    #app {
+        display: flex;
+        flex-direction: column;
+        min-height: 100dvh;
+    }
     .container-fluid {
         padding: 0 1.5rem;
         .prevent-squish {
             overflow-x: unset;
         }
         &.page-container-grouped-styles {
-            height: 100dvh;
             display: flex;
             flex-direction: column;
         }