CSR-257 WIP do not merge.

2022-02-08 17:44:42 -05:00 · 2022-02-08 17:44:42 -05:00 · bb161ee97f
commit bb161ee97f
parent 5f9917e16a
6 changed files with 91 additions and 60 deletions
--- 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>
--- 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,
--- 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"
--- 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,
--- 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;
--- 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;