117 lines
3.1 KiB
Vue
117 lines
3.1 KiB
Vue
<template>
|
|
<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">
|
|
© {{new Date().getFullYear()}} Safelite Group
|
|
</div>
|
|
</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" />
|
|
</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="col-12 button-col d-flex justify-content-end" id="stacked">
|
|
<buttonMain
|
|
isPrimary
|
|
:buttonText="buttonText"
|
|
loaderColor="white"
|
|
:class="isDisabled && 'form-test-invalid'"
|
|
:aria-disabled="isDisabled"
|
|
:isDisabled="isDisabled"
|
|
@click-event="buttonClick"
|
|
/>
|
|
</div>
|
|
<div class="col-12 link-col py-1">
|
|
<textLink
|
|
linkType="navigation"
|
|
:text="backLink"
|
|
@click-event="linkClick"
|
|
href="javascript:void(0)"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import textLink from "@/ux-components/text-link/text-link";
|
|
import buttonMain from "@/ux-components/button-main/button-main";
|
|
|
|
export default {
|
|
name: "funnelFooter",
|
|
props: {
|
|
isDisabled: Boolean,
|
|
},
|
|
components: {
|
|
textLink,
|
|
buttonMain
|
|
},
|
|
data() {
|
|
return {
|
|
paddingHeight: 0,
|
|
backLink: "",
|
|
buttonText: "",
|
|
}
|
|
},
|
|
mounted() {
|
|
this.paddingHeight = document.querySelector(".footer #infoBox").offsetHeight + 24;
|
|
this.$nextTick(() => {
|
|
window.addEventListener('resize', this.onResize);
|
|
})
|
|
},
|
|
beforeUnmount() {
|
|
window.removeEventListener('resize', this.onResize);
|
|
},
|
|
methods: {
|
|
onResize() {
|
|
this.paddingHeight = document.querySelector(".footer #infoBox").offsetHeight;
|
|
},
|
|
initializeComponent(cmsContent) {
|
|
this.backLink = cmsContent.BackButtonText;
|
|
this.buttonText = cmsContent.ForwardButtonText;
|
|
},
|
|
buttonClick() {
|
|
this.$emit("ForwardClicked");
|
|
},
|
|
linkClick() {
|
|
this.$emit("BackClicked");
|
|
},
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.footer {
|
|
display: flex;
|
|
margin-top: auto;
|
|
.button-col,
|
|
.link-col,
|
|
.btn-primary {
|
|
width: 100%;
|
|
}
|
|
a {
|
|
display: flex;
|
|
justify-content: center;
|
|
}
|
|
@media only screen and (min-width: 340px) {
|
|
.button-col,
|
|
.link-col {
|
|
width: 50% !important;
|
|
}
|
|
.btn-primary {
|
|
width: auto;
|
|
}
|
|
a {
|
|
display: flex;
|
|
justify-content: flex-start;
|
|
}
|
|
}
|
|
}
|
|
</style>
|