145 lines
3.9 KiB
Vue
145 lines
3.9 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-5 bg-light py-4" id="infoBox">
|
|
<div class="row d-flex flex-row-reverse align-items-center">
|
|
<div class="col button-col d-flex" id="stacked">
|
|
<buttonMain
|
|
ref="buttonMain"
|
|
isPrimary
|
|
:buttonText="buttonText"
|
|
loaderColor="white"
|
|
:class="isForwardActionDisabled && 'form-test-invalid'"
|
|
:aria-disabled="isForwardActionDisabled"
|
|
:isDisabled="isForwardActionDisabled"
|
|
@click-event="buttonClick"
|
|
/>
|
|
</div>
|
|
<div v-if="!isBackButtonHidden" class="col-auto link-col py-1 text-break">
|
|
<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: {
|
|
isForwardActionDisabled: Boolean,
|
|
isBackButtonHidden: {type: Boolean, default: false},
|
|
cmsWidgetName: String,
|
|
|
|
},
|
|
components: {
|
|
textLink,
|
|
buttonMain
|
|
},
|
|
data() {
|
|
return {
|
|
paddingHeight: 0,
|
|
customButtontext: '',
|
|
}
|
|
},
|
|
mounted() {
|
|
this.paddingHeight = document.querySelector(".footer #infoBox").offsetHeight + 24;
|
|
this.$nextTick(() => {
|
|
window.addEventListener('resize', this.onResize);
|
|
})
|
|
},
|
|
beforeUnmount() {
|
|
window.removeEventListener('resize', this.onResize);
|
|
},
|
|
unmounted() {
|
|
document.onkeydown = null;
|
|
},
|
|
computed: {
|
|
backLink(){
|
|
return this.getCmsContent(this.cmsWidgetName, 'BackButtonText');
|
|
},
|
|
buttonText(){
|
|
return this.customButtontext ? this.customButtontext : this.getCmsContent(this.cmsWidgetName, 'ForwardButtonText');
|
|
}
|
|
},
|
|
methods: {
|
|
onResize() {
|
|
this.paddingHeight = document.querySelector(".footer #infoBox").offsetHeight;
|
|
},
|
|
updateButtonText(newText) {
|
|
this.customButtontext = newText;
|
|
},
|
|
removeLoader(){
|
|
this.$refs.buttonMain.removeLoader();
|
|
document.onkeydown = function (e) {
|
|
return true;
|
|
};
|
|
},
|
|
buttonClick() {
|
|
//prevent keyboard input after button click
|
|
document.onkeydown = function (e) {
|
|
return false;
|
|
};
|
|
this.$emit("ForwardClicked");
|
|
},
|
|
linkClick() {
|
|
this.$emit("BackClicked");
|
|
},
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.footer {
|
|
display: flex;
|
|
margin-top: auto;
|
|
a {
|
|
display: flex;
|
|
justify-content: center;
|
|
}
|
|
.col,
|
|
.col-auto,
|
|
.col button {
|
|
width: 100%;
|
|
}
|
|
@media only screen and (min-width: 340px) {
|
|
.col,
|
|
.col-auto,
|
|
.col button {
|
|
width: auto;
|
|
justify-content: flex-end;
|
|
}
|
|
.btn-primary {
|
|
width: auto;
|
|
}
|
|
a {
|
|
display: flex;
|
|
justify-content: flex-start;
|
|
}
|
|
}
|
|
& > .container-fluid {
|
|
overflow-x: visible; // needed to fix hidden footer on some iphones
|
|
}
|
|
}
|
|
</style>
|