Merge pull request #203 from Safelite/CSR-257-funnel-footer-requested-changes

Csr 257 funnel footer requested changes

src/common-components/funnel-footer/funnel-footer.spec.js

@@ -9,10 +9,7 @@ describe("funnel-footer.vue", () => {
       const r = {
         test:"testing",
         clientHeight: 10,
-        classList: {
+        offsetHeight: 24,
-          add: jest.fn(() => ''),
-          remove: jest.fn()
-        },
       };
 
       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(link.attributes('class')).toContain("footer");
-      expect(global.document.getElementById).toBeCalled();
-      expect(r.classList.add).toBeCalledWith("justify-content-end");
-      expect(r.classList.remove).toBeCalledWith("justify-content-start");
 
   });
 
@@ -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");
-  });
-
 });

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

@@ -1,28 +1,30 @@
 <template>
-<div class="container-fluid g-2 footer">
+  <div class="footer pt-4">
-    <div class="row">
+    <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>
-    <div class="row" :style="`padding-bottom: ${paddingHeight}px`">
+      <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="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="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="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="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="row d-flex flex-row-reverse align-items-center">
+        <div class="col-12 button-col d-flex justify-content-end" id="stacked">
-        <div class="col d-flex justify-content-end" id="stacked">
+          <buttonMain isPrimary :buttonText="buttonText" loaderColor="white" sizeInRem="1" @click-event="buttonClick"/>
-            <buttonMain isPrimary buttonText="Button test" loaderColor="white" sizeInRem="1" />
         </div>
-        <div class="col">
+        <div class="col-12 link-col py-1">
-            <textLink linkType="navigation" text="back" />
+          <textLink linkType="navigation" :text="backLink" @click-event="linkClick"/>
         </div>
+      </div>
     </div>
-</div>
+  </div>
 </template>
 
 <script>
@@ -30,53 +32,69 @@ import textLink from "@/ux-components/text-link/text-link";
 import buttonMain from "@/ux-components/button-main/button-main";
 
 export default {
-    name: "funnelFooter",
+  name: "funnelFooter",
-    components: {
+  components: {
-        textLink,
+    textLink,
-        buttonMain
+    buttonMain
-    },
+  },
-    data() {
+  data() {
-        return {
+    return {
-            paddingHeight: 0
+      paddingHeight: 0,
-        }
+      backLink: "",
-    },
+      buttonText: "",
-    mounted() {
+      currentYear: new Date().getFullYear(),
-        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");
-            }
-        }
     }
+  },
+  mounted() {
+    this.paddingHeight = document.getElementById("infoBox").offsetHeight + 24;
+    this.$nextTick(() => {
+      window.addEventListener('resize', this.onResize);
+      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');
+    },
+    initializeComponent(cmsContent) {
+      this.backLink = cmsContent.BackButtonText;
+      this.buttonText = cmsContent.ForwardButtonText;
+    },
+    buttonClick() {
+      this.$emit("forwardClicked");
+    },
+    linkClick() {
+      this.$emit("backClicked");
+    },
+  }
 };
 </script>
 
 <style lang="scss" scoped>
-button {
+.footer {
-    min-width: 200px;
+  display: flex;
+  margin-top: auto;
+  .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>

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 };
 }

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,

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"

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,

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;

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"

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;