From bb161ee97f6978123ccebeadb072a6517e0c7cfa Mon Sep 17 00:00:00 2001
From: bmauger <mauger.bryan@gmail.com>
Date: Tue, 8 Feb 2022 17:44:42 -0500
Subject: [PATCH 1/3] CSR-257 WIP do not merge.

---
 .../funnel-footer/funnel-footer.vue           | 131 ++++++++++--------
 src/layouts/vehicle-damage/vehicle-damage.vue |   8 +-
 src/layouts/vehicle-make/vehicle-make.vue     |   4 +-
 src/layouts/vehicle-year/vehicle-year.vue     |   2 +-
 src/styles/common-styles.scss                 |   5 +
 src/ux-components/list-card/list-card.vue     |   1 +
 6 files changed, 91 insertions(+), 60 deletions(-)

diff --git a/src/common-components/funnel-footer/funnel-footer.vue b/src/common-components/funnel-footer/funnel-footer.vue
index 37879d2cf..b3f75d4c7 100644
--- a/src/common-components/funnel-footer/funnel-footer.vue
+++ b/src/common-components/funnel-footer/funnel-footer.vue
@@ -1,28 +1,30 @@
 <template>
-<div class="container-fluid g-2 footer">
-    <div class="row">
+  <div 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;<span id="years"></span>&nbsp;Safelite Group
+          &copy;&nbsp;<span id="years"></span>&nbsp;Safelite Group
         </div>
-    </div>
-    <div class="row" :style="`padding-bottom: ${paddingHeight}px`">
+      </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" />
+          <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>
-<div class="container-fluid fixed-bottom g-4 bg-light py-4" id="infoBox">
-    <div class="row d-flex flex-row-reverse align-items-center">
+    <div class="container-fluid fixed-bottom g-4 bg-light py-4" id="infoBox">
+      <div class="row d-flex flex-row-reverse align-items-center">
         <div class="col d-flex justify-content-end" id="stacked">
-            <buttonMain isPrimary buttonText="Button test" loaderColor="white" sizeInRem="1" />
+          <buttonMain isPrimary :buttonText="buttonText" loaderColor="white" sizeInRem="1" @click-event="buttonClick"/>
         </div>
         <div class="col">
-            <textLink linkType="navigation" text="back" />
+          <textLink linkType="navigation" :text="backLink" @click-event="linkClick"/>
         </div>
+      </div>
     </div>
-</div>
+  </div>
 </template>
 
 <script>
@@ -30,53 +32,70 @@ import textLink from "@/ux-components/text-link/text-link";
 import buttonMain from "@/ux-components/button-main/button-main";
 
 export default {
-    name: "funnelFooter",
-    components: {
-        textLink,
-        buttonMain
-    },
-    data() {
-        return {
-            paddingHeight: 0
-        }
-    },
-    mounted() {
-        this.paddingHeight = document.getElementById("infoBox").offsetHeight;
-        this.$nextTick(() => {
-            window.addEventListener('resize', this.onResize);
-        })
-        setTimeout(function () { // Give it a moment to set the date
-            document.getElementById('years').innerHTML += new Date().getFullYear();
-        }, 100);
-        this.checkHeight();
-    },
-    beforeUnmount() {
-        window.removeEventListener('resize', this.onResize);
-    },
-    methods: {
-        onResize() {
-            this.paddingHeight = document.getElementById("infoBox").offsetHeight;
-            this.checkHeight();
-        },
-        checkHeight() {
-            const parentHeight = document.getElementById('infoBox').clientHeight;
-            const wrapper2 = document.getElementById('stacked');
-
-            if (parentHeight > 80) {
-                wrapper2.classList.add("justify-content-start");
-                wrapper2.classList.remove("justify-content-end");
-            } else {
-                wrapper2.classList.add("justify-content-end");
-                wrapper2.classList.remove("justify-content-start");
-            }
-        }
+  name: "funnelFooter",
+  components: {
+    textLink,
+    buttonMain
+  },
+  data() {
+    return {
+      paddingHeight: 0,
+      backLink: "",
+      buttonText: "",
     }
+  },
+  mounted() {
+    this.paddingHeight = document.getElementById("infoBox").offsetHeight + 24;
+    this.$nextTick(() => {
+      window.addEventListener('resize', this.onResize);
+    })
+    this.$nextTick(function () { // Give it a moment to set the date
+      document.getElementById('years').innerHTML += new Date().getFullYear();
+      this.checkHeight();
+    })
+  },
+  beforeUnmount() {
+    window.removeEventListener('resize', this.onResize);
+  },
+  methods: {
+    onResize() {
+      this.paddingHeight = document.getElementById("infoBox").offsetHeight;
+      this.checkHeight();
+    },
+    checkHeight() {
+      const parentHeight = document.getElementById('infoBox').clientHeight;
+      const wrapper2 = document.getElementById('stacked');
+      console.log(parentHeight);
+
+      if (parentHeight > 80) {
+        wrapper2.classList.add("justify-content-start","w-100");
+        wrapper2.classList.remove("justify-content-end","w-auto");
+      } else {
+        wrapper2.classList.add("justify-content-end");
+        wrapper2.classList.remove("justify-content-start");
+      }
+    },
+    initializeComponent(cmsContent) {
+      this.buttonText = cmsContent.BackButtonText;
+      this.backLink = cmsContent.ForwardButtonText;
+    },
+    buttonClick() {
+      this.$emit("forwardClicked");
+    },
+    linkClick() {
+      this.$emit("backClicked");
+    },
+  }
 };
 </script>
 
 <style lang="scss" scoped>
-button {
-    min-width: 200px;
+.footer {
+  display: flex;
+  margin-top: auto;
+  button {
+    min-width: 135px;
     width: 100%;
+  }
 }
 </style>
diff --git a/src/layouts/vehicle-damage/vehicle-damage.vue b/src/layouts/vehicle-damage/vehicle-damage.vue
index c5b8df783..b59798e2e 100644
--- a/src/layouts/vehicle-damage/vehicle-damage.vue
+++ b/src/layouts/vehicle-damage/vehicle-damage.vue
@@ -1,16 +1,18 @@
 <template>
-    <div class="container-fluid shadow rounded-3 p-2 position-relative">
+    <div class="container-fluid shadow rounded-3 p-2 position-relative make-tall">
         <funnelHeader ref="funnelHeader" />
         <vehicleBanner ref="vehicleBanner" :displayGenericVehicleImage=false />
         <funnelSubHeader ref="funnelSubHeader" />
         <damageLocationQuestion ref="damageLocation" v-model="selectedDamageLocations" groupName="DamageLocationQuestion" />
         <replaceOptionsQuestion ref="driverSideOptions" isAvailable v-model="driverSideOptionsData" groupName="DriverSideReplaceOptionsQuestion" />
+        <funnelFooter ref="funnelFooter" />
     </div>
 </template>
 
 <script>
 // Components
 import funnelHeader from "@/common-components/funnel-header/funnel-header";
+import funnelFooter from "@/common-components/funnel-footer/funnel-footer";
 import vehicleBanner from "@/common-components/vehicle-banner/vehicle-banner";
 import funnelSubHeader from "@/common-components/funnel-sub-header/funnel-sub-header";
 import replaceOptionsQuestion from"@/layouts/vehicle-damage/replace-options-question/replace-options-question";
@@ -65,6 +67,9 @@ export default {
       vm.$refs.damageLocation.initializeComponent(
         resultMap.cmsContent.DamageLocationQuestion, resultMap.damageOptions
       );
+      vm.$refs.funnelFooter.initializeComponent(
+        resultMap.cmsContent.FunnelFooterWidget
+      );
     });
   },
   data(){
@@ -84,6 +89,7 @@ export default {
   },
   components: {
     funnelHeader,
+    funnelFooter,
     vehicleBanner,
     funnelSubHeader,
     replaceOptionsQuestion,
diff --git a/src/layouts/vehicle-make/vehicle-make.vue b/src/layouts/vehicle-make/vehicle-make.vue
index 023d24023..c91379318 100644
--- a/src/layouts/vehicle-make/vehicle-make.vue
+++ b/src/layouts/vehicle-make/vehicle-make.vue
@@ -1,10 +1,10 @@
 <template>
-  <div class="container-fluid shadow rounded-3 p-0 position-relative">
+  <div class="container-fluid shadow rounded-3 p-0 position-relative make-tall">
     <funnelHeader ref="funnelHeader" />
     <div class="select-car">
       <div class="select-car-form rounded text-center">
         <vehicleBanner ref="vehicleBanner" :displayGenericVehicleImage=true />
-        <funnelSubHeader 
+        <funnelSubHeader
             ref="funnelSubHeader"
             :hasBackButton="true"
             backButtonAccessibleText="Change Vehicle Year"
diff --git a/src/layouts/vehicle-year/vehicle-year.vue b/src/layouts/vehicle-year/vehicle-year.vue
index 1b10fba92..e8e69c29a 100644
--- a/src/layouts/vehicle-year/vehicle-year.vue
+++ b/src/layouts/vehicle-year/vehicle-year.vue
@@ -73,7 +73,7 @@ export default {
 
   watch: {
     selectedYear(year) {
-      
+
       this.$store.commit(this.storeMutations.UPDATE_YEAR, year);
       this.$router.navigateAfterSave(
         this.navigationScenarios.SELECTED_YEAR,
diff --git a/src/styles/common-styles.scss b/src/styles/common-styles.scss
index a4915049b..ae409dd36 100644
--- a/src/styles/common-styles.scss
+++ b/src/styles/common-styles.scss
@@ -9,6 +9,11 @@ body {
     &.container-shadow {
       box-shadow: 0px 0px 6px 0px rgba(0,0,0,0.15); //Use instead of Bootstrap's helper
     }
+    &.make-tall {
+      height: 100vh;
+      display: flex;
+      flex-direction: column;
+    }
   }
   .pointer {
     cursor: pointer;
diff --git a/src/ux-components/list-card/list-card.vue b/src/ux-components/list-card/list-card.vue
index caba00d0a..c3f399404 100644
--- a/src/ux-components/list-card/list-card.vue
+++ b/src/ux-components/list-card/list-card.vue
@@ -131,6 +131,7 @@ export default {
     height: auto;
     width: 6.5rem;
     margin-bottom: 3rem;
+    max-width: 100%;
   }
   &:hover {
     box-shadow: 0px 0px 0px 6px $blue-100;

From 18ead1be275d61f6a635fcde3a5e85b07c767466 Mon Sep 17 00:00:00 2001
From: bmauger <mauger.bryan@gmail.com>
Date: Wed, 9 Feb 2022 09:35:27 -0500
Subject: [PATCH 2/3] CSR-257 WIP

---
 .../funnel-footer/funnel-footer.vue                | 14 ++++++--------
 src/styles/common-styles.scss                      |  1 +
 2 files changed, 7 insertions(+), 8 deletions(-)

diff --git a/src/common-components/funnel-footer/funnel-footer.vue b/src/common-components/funnel-footer/funnel-footer.vue
index b3f75d4c7..56e483b6d 100644
--- a/src/common-components/funnel-footer/funnel-footer.vue
+++ b/src/common-components/funnel-footer/funnel-footer.vue
@@ -3,7 +3,7 @@
     <div class="container-fluid g-2">
       <div class="row">
         <div class="col-12 d-flex justify-content-center pb-2 fs-7">
-          &copy;&nbsp;<span id="years"></span>&nbsp;Safelite Group
+          &copy;&nbsp;{{new Date().getFullYear()}}&nbsp;Safelite Group
         </div>
       </div>
       <div class="row" :style="`padding-bottom: ${paddingHeight}px`">
@@ -16,10 +16,10 @@
     </div>
     <div class="container-fluid fixed-bottom g-4 bg-light py-4" id="infoBox">
       <div class="row d-flex flex-row-reverse align-items-center">
-        <div class="col d-flex justify-content-end" id="stacked">
+        <div class="col-auto d-flex justify-content-end" id="stacked">
           <buttonMain isPrimary :buttonText="buttonText" loaderColor="white" sizeInRem="1" @click-event="buttonClick"/>
         </div>
-        <div class="col">
+        <div class="col py-1">
           <textLink linkType="navigation" :text="backLink" @click-event="linkClick"/>
         </div>
       </div>
@@ -42,15 +42,13 @@ export default {
       paddingHeight: 0,
       backLink: "",
       buttonText: "",
+      currentYear: new Date().getFullYear(),
     }
   },
   mounted() {
     this.paddingHeight = document.getElementById("infoBox").offsetHeight + 24;
     this.$nextTick(() => {
       window.addEventListener('resize', this.onResize);
-    })
-    this.$nextTick(function () { // Give it a moment to set the date
-      document.getElementById('years').innerHTML += new Date().getFullYear();
       this.checkHeight();
     })
   },
@@ -76,8 +74,8 @@ export default {
       }
     },
     initializeComponent(cmsContent) {
-      this.buttonText = cmsContent.BackButtonText;
-      this.backLink = cmsContent.ForwardButtonText;
+      this.backLink = cmsContent.BackButtonText;
+      this.buttonText = cmsContent.ForwardButtonText;
     },
     buttonClick() {
       this.$emit("forwardClicked");
diff --git a/src/styles/common-styles.scss b/src/styles/common-styles.scss
index ae409dd36..8d7133884 100644
--- a/src/styles/common-styles.scss
+++ b/src/styles/common-styles.scss
@@ -6,6 +6,7 @@ body {
 
   .container-fluid {
     max-width: 576px; //Remove once desktop app is complete
+    // min-width: 360px;
     &.container-shadow {
       box-shadow: 0px 0px 6px 0px rgba(0,0,0,0.15); //Use instead of Bootstrap's helper
     }

From a3fd891d16867fe09c5b51c0eb633807686bcaa8 Mon Sep 17 00:00:00 2001
From: bmauger <mauger.bryan@gmail.com>
Date: Wed, 9 Feb 2022 12:50:45 -0500
Subject: [PATCH 3/3] Update unit test.

---
 .../funnel-footer/funnel-footer.spec.js       | 38 +------------------
 .../funnel-footer/funnel-footer.vue           | 27 ++++++-------
 .../vehicle-damage/vehicle-damage.spec.js     | 13 ++++++-
 src/styles/common-styles.scss                 |  1 -
 src/ux-components/button-main/button-main.vue |  2 +-
 5 files changed, 29 insertions(+), 52 deletions(-)

diff --git a/src/common-components/funnel-footer/funnel-footer.spec.js b/src/common-components/funnel-footer/funnel-footer.spec.js
index a4c127a3e..b6833ef7e 100644
--- a/src/common-components/funnel-footer/funnel-footer.spec.js
+++ b/src/common-components/funnel-footer/funnel-footer.spec.js
@@ -9,10 +9,7 @@ describe("funnel-footer.vue", () => {
       const r = {
         test:"testing",
         clientHeight: 10,
-        classList: {
-          add: jest.fn(() => ''),
-          remove: jest.fn()
-        },
+        offsetHeight: 24,
       };
 
       global.document.getElementById = jest.fn().mockImplementation(()=> {
@@ -27,10 +24,7 @@ describe("funnel-footer.vue", () => {
       console.log(wrapper.html());
 
       // Expect
-      expect(link.attributes('class')).toContain("footer-link");
-      expect(global.document.getElementById).toBeCalled();
-      expect(r.classList.add).toBeCalledWith("justify-content-end");
-      expect(r.classList.remove).toBeCalledWith("justify-content-start");
+      expect(link.attributes('class')).toContain("footer");
 
   });
 
@@ -63,32 +57,4 @@ describe("funnel-footer.vue", () => {
     expect(input.attributes("class")).toContain("btn-primary");
   });
 
-  it("Should return class justify-content-end if paddingHeight < 80px", async () => {
-
-    global.document.getElementById = jest.fn().mockImplementation(()=> {
-      return {
-        test:"testing",
-        clientHeight: 10,
-        classList: {
-          add: jest.fn(),
-          remove: jest.fn()
-        }
-      }
-    });
-
-    // Act
-      const wrapper = mount(funnelFooter, {
-        propsData: {
-          footer: true
-        },
-      });
-      const infoBox = document.getElementById('infoBox');
-      // Assert
-      const stacked = wrapper.find("#stacked");
-      wrapper.vm.paddingHeight = 100;
-
-      // Expect
-      expect(stacked.attributes('class')).toContain("justify-content-end");
-  });
-
 });
diff --git a/src/common-components/funnel-footer/funnel-footer.vue b/src/common-components/funnel-footer/funnel-footer.vue
index 56e483b6d..424e524fc 100644
--- a/src/common-components/funnel-footer/funnel-footer.vue
+++ b/src/common-components/funnel-footer/funnel-footer.vue
@@ -16,10 +16,10 @@
     </div>
     <div class="container-fluid fixed-bottom g-4 bg-light py-4" id="infoBox">
       <div class="row d-flex flex-row-reverse align-items-center">
-        <div class="col-auto d-flex justify-content-end" id="stacked">
+        <div class="col-12 button-col d-flex justify-content-end" id="stacked">
           <buttonMain isPrimary :buttonText="buttonText" loaderColor="white" sizeInRem="1" @click-event="buttonClick"/>
         </div>
-        <div class="col py-1">
+        <div class="col-12 link-col py-1">
           <textLink linkType="navigation" :text="backLink" @click-event="linkClick"/>
         </div>
       </div>
@@ -63,15 +63,6 @@ export default {
     checkHeight() {
       const parentHeight = document.getElementById('infoBox').clientHeight;
       const wrapper2 = document.getElementById('stacked');
-      console.log(parentHeight);
-
-      if (parentHeight > 80) {
-        wrapper2.classList.add("justify-content-start","w-100");
-        wrapper2.classList.remove("justify-content-end","w-auto");
-      } else {
-        wrapper2.classList.add("justify-content-end");
-        wrapper2.classList.remove("justify-content-start");
-      }
     },
     initializeComponent(cmsContent) {
       this.backLink = cmsContent.BackButtonText;
@@ -91,9 +82,19 @@ export default {
 .footer {
   display: flex;
   margin-top: auto;
-  button {
-    min-width: 135px;
+  .button-col,
+  .link-col,
+  .btn-primary {
     width: 100%;
   }
+  @media only screen and (min-width: 340px) {
+    .button-col,
+    .link-col {
+      width: 50% !important;
+    }
+    .btn-primary {
+      width: auto;
+    }
+  }
 }
 </style>
diff --git a/src/layouts/vehicle-damage/vehicle-damage.spec.js b/src/layouts/vehicle-damage/vehicle-damage.spec.js
index 49df756c2..949f4811b 100644
--- a/src/layouts/vehicle-damage/vehicle-damage.spec.js
+++ b/src/layouts/vehicle-damage/vehicle-damage.spec.js
@@ -1,6 +1,7 @@
 // Components
 import vehicleDamage from "@/layouts/vehicle-damage/vehicle-damage.vue";
 import funnelHeader from "@/common-components/funnel-header/funnel-header";
+import funnelFooter from "@/common-components/funnel-footer/funnel-footer";
 import vehicleBanner from "@/common-components/vehicle-banner/vehicle-banner";
 import funnelSubHeader from "@/common-components/funnel-sub-header/funnel-sub-header";
 import replaceOptionsQuestion from "@/layouts/vehicle-damage/replace-options-question/replace-options-question";
@@ -144,7 +145,7 @@ describe("vehicle-damage.vue", () => {
 
 describe("vehicle-damage.vue", () => {
   test("Call invalidation, ResetPartsAndDeps should be called", async () => {
-    
+
     //Arrange
     const { wrapper } = setupMocks({});
 
@@ -221,6 +222,10 @@ function setupMocks({
 
   damageLocationQuestion.methods = {
     initializeComponent: jest.fn(),
+  };
+
+  funnelFooter.methods = {
+    initializeComponent: jest.fn(),
   }
 
   const mountOptions = getMountOptions(mountOptionsMockData);
@@ -252,5 +257,11 @@ function setupMocks({
   damageLocationQuestionWrapper.vm.initializeComponent =
   damageLocationQuestion.methods.initializeComponent;
 
+  const funnelFooterWrapper = wrapper.findComponent({
+    name: "funnelFooter",
+  });
+
+  funnelFooterWrapper.vm.initializeComponent = funnelFooter.methods.initializeComponent;
+
   return { wrapper, apiPromise };
 }
diff --git a/src/styles/common-styles.scss b/src/styles/common-styles.scss
index 8d7133884..ae409dd36 100644
--- a/src/styles/common-styles.scss
+++ b/src/styles/common-styles.scss
@@ -6,7 +6,6 @@ body {
 
   .container-fluid {
     max-width: 576px; //Remove once desktop app is complete
-    // min-width: 360px;
     &.container-shadow {
       box-shadow: 0px 0px 6px 0px rgba(0,0,0,0.15); //Use instead of Bootstrap's helper
     }
diff --git a/src/ux-components/button-main/button-main.vue b/src/ux-components/button-main/button-main.vue
index e44550c30..2a4a68366 100644
--- a/src/ux-components/button-main/button-main.vue
+++ b/src/ux-components/button-main/button-main.vue
@@ -1,5 +1,5 @@
 <template>
-  <button :disabled="isDisabled" :aria-disabled="isDisabled" class="btn d-flex align-items-center py-3 px-4" :class="[isPrimary ? 'btn-primary' : 'btn-secondary',isFloat ? 'float-end' : '']" @click="clicked()">
+  <button :disabled="isDisabled" :aria-disabled="isDisabled" class="btn d-flex align-items-center py-3 px-2" :class="[isPrimary ? 'btn-primary' : 'btn-secondary',isFloat ? 'float-end' : '']" @click="clicked()">
     <span class="m-0">{{ this.buttonText }}</span>
     <loader
       class="ms-2"