jason/DigitalConsumer.FixMyGlass
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

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

Browse source 
Csr 257 funnel footer requested changes
This commit is contained in:
bmauger 2022-02-09 13:55:21 -05:00 committed by GitHub
commit aa7e2c88c9
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
9 changed files with 107 additions and 100 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

38
src/common-components/funnel-footer/funnel-footer.spec.js
View file

@ -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");
});
});

134
src/common-components/funnel-footer/funnel-footer.vue
View file

@ -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;{{new Date().getFullYear()}}&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="col d-flex justify-content-end" id="stacked">
<buttonMain isPrimary buttonText="Button test" loaderColor="white" sizeInRem="1" />
<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" sizeInRem="1" @click-event="buttonClick"/>
</div>
<div class="col">
<textLink linkType="navigation" text="back" />
<div class="col-12 link-col py-1">
<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",
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: "",
currentYear: new Date().getFullYear(),
}
},
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 {
min-width: 200px;
.footer {
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>

13
src/layouts/vehicle-damage/vehicle-damage.spec.js
View file

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

8
src/layouts/vehicle-damage/vehicle-damage.vue
View file

@ -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,

4
src/layouts/vehicle-make/vehicle-make.vue
View file

@ -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"

2
src/layouts/vehicle-year/vehicle-year.vue
View file

@ -73,7 +73,7 @@ export default {
watch: {
selectedYear(year) {
this.$store.commit(this.storeMutations.UPDATE_YEAR, year);
this.$router.navigateAfterSave(
this.navigationScenarios.SELECTED_YEAR,

5
src/styles/common-styles.scss
View file

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

2
src/ux-components/button-main/button-main.vue
View file

@ -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"

1
src/ux-components/list-card/list-card.vue
View file

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