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

Merge pull request #196 from Safelite/SSR-312-un-sticky-header

Browse source 
SSR-312 update all pages to have non-sticky header.
This commit is contained in:
bmauger 2023-03-13 14:48:03 -04:00 committed by GitHub
commit b88f867acf
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
7 changed files with 265 additions and 265 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
src/iss-components/questions-page-layout/questions-page-layout.vue
View file

@ -2,9 +2,9 @@
<div :class="`page-container-grouped-styles questions-page`">
<loadingModal ref="loadingModal" />
<siteHeader cmsWidgetName="SiteHeaderWidget" />
<div class="fade-on-route-transition sub-container overflow-scroll">
<vehicleBanner class="mb-3" cmsWidgetName="VehicleBannerWidget" :displayGenericVehicleImage="false" />
<siteSubHeader cmsWidgetName="SiteSubHeaderWidget" />
<div class="fade-on-route-transition sub-container overflow-scroll">
<alert
ref="alertFewMoreQuestions"
cmsWidgetName="alertWidget"
@ -95,8 +95,8 @@ export default {
</script>
<style lang="scss">
.overflow-scroll {
height: calc(100% - 368px);
.overflow-scroll {
height: calc(100% - 180px);
overflow-x: hidden !important;
}
.questions-page {

22
src/layouts/address-lookup/address-lookup.vue
View file

@ -7,13 +7,13 @@
autocomplete="off">
<div class="page-container-grouped-styles">
<siteHeader cmsWidgetName="SiteHeaderWidget" ref="siteHeader" />
<vehicleBanner
class="mb-3"
cmsWidgetName="VehicleBannerWidget"
ref="vehicleBanner"
:displayGenericVehicleImage="false" />
<siteSubHeader cmsWidgetName="SiteSubHeaderWidget" ref="siteSubHeader" />
<div class="fade-on-route-transition sub-container overflow-scroll px-5">
<vehicleBanner
class="mb-3"
cmsWidgetName="VehicleBannerWidget"
ref="vehicleBanner"
:displayGenericVehicleImage="false" />
<siteSubHeader cmsWidgetName="SiteSubHeaderWidget" ref="siteSubHeader" />
<alert
ref="alertVinNotFound"
v-if="displayVinNotFoundAlert"
@ -182,13 +182,13 @@ export default {
if (this.isCarIdDifferent && carFound.carId !== this.previouslyEnteredCarId) {
// Display Alert
this.previouslyEnteredCarId = carFound.carId;
this.customAlertData.vehicleInfo = carFound;
this.customAlertData.vehicleInfo = carFound;
if(this.isTwoIdenticalYMMVehicleFound){
this.displayMatchedTwoIdenticalYMMVehicleAlert = true;
this.forwardButtonCarStyle= carFound.style;
}
else{
this.displayMatchedDifferentVehicleAlert = true;
this.displayMatchedDifferentVehicleAlert = true;
}
this.isSelectedGlassAvailableForVehicle = await isGlassAvailableForCarId(
@ -349,9 +349,9 @@ export default {
</script>
<style lang="scss">
.overflow-scroll {
height: calc(100% - 368px);
.overflow-scroll {
height: calc(100% - 180px);
overflow-X: hidden !important;
}
</style>

18
src/layouts/license-plate-lookup/license-plate-lookup.vue
View file

@ -5,12 +5,12 @@
v-slot="{ meta }">
<div class="page-container-grouped-styles">
<siteHeader cms-widget-name="SiteHeaderWidget" />
<vehicleBanner
class="mb-3"
cms-widget-name="VehicleBannerWidget"
:display-generic-vehicle-image="false" />
<siteSubHeader cms-widget-name="SiteSubHeaderWidget" />
<div class="fade-on-route-transition sub-container overflow-scroll mt-5 px-5">
<vehicleBanner
class="mb-3"
cms-widget-name="VehicleBannerWidget"
:display-generic-vehicle-image="false" />
<siteSubHeader cms-widget-name="SiteSubHeaderWidget" />
<alert
ref="alertVinNotFound"
v-if="displayVinNotFoundAlert"
@ -189,13 +189,13 @@ export default {
// Display Alert
this.previouslyEnteredCarId = vehicleFromLookup.carId;
this.customAlertData.vehicleInfo = vehicleFromLookup;
if(this.isTwoIdenticalYMMVehicleFound){
this.displayMatchedTwoIdenticalYMMVehicleAlert = true;
this.forwardButtonCarStyle= vehicleFromLookup.style;
}
else{
this.displayMatchedDifferentVehicleAlert = true;
this.displayMatchedDifferentVehicleAlert = true;
}
this.isSelectedGlassAvailableForVehicle = await isGlassAvailableForCarId(
@ -314,8 +314,8 @@ export default {
<style>
.overflow-scroll {
height: calc(100% - 392px);
.overflow-scroll {
height: calc(100% - 220px);
overflow-x: hidden !important;
}
#license-plate-question-wrapper .form-test-error {

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

@ -2,11 +2,6 @@
<Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm" v-slot="{ meta }">
<div class="page-container-grouped-styles vehicle-damage">
<siteHeader cmsWidgetName="SiteHeaderWidget" />
<vehicleBanner
class="mb-3"
cmsWidgetName="VehicleBannerWidget"
:displayGenericVehicleImage="false" />
<siteSubHeader cmsWidgetName="SiteSubHeaderWidget" />
<div class="fade-on-route-transition sub-container overflow-scroll">
<alert
ref="vehicleChangeAlert"
@ -15,6 +10,11 @@
cmsWidgetName="VehicleChangeAlert"
alertClass="alert-warning"
:isDismissible="false" />
<vehicleBanner
class="mb-3"
cmsWidgetName="VehicleBannerWidget"
:displayGenericVehicleImage="false" />
<siteSubHeader cmsWidgetName="SiteSubHeaderWidget" />
<damageLocationQuestion
ref="damageLocation"
cmsWidgetName="DamageLocationQuestion"
@ -474,8 +474,8 @@ export default {
</script>
<style lang="scss">
.overflow-scroll {
height: calc(100% - 368px);
overflow-X: hidden !important;
.overflow-scroll {
height: calc(100% - 180px);
overflow-X: hidden !important;
}
</style>

24
src/layouts/vehicle-lookup/vehicle-lookup.vue
View file

@ -7,15 +7,15 @@
<SiteHeader
cms-widget-name="SiteHeaderWidget"
/>
<VehicleBanner
class="mb-3"
cms-widget-name="VehicleBannerWidget"
:display-generic-vehicle-image="false"
/>
<SiteSubHeader
cms-widget-name="SiteSubHeaderWidget"
/>
<div class="fade-on-route-transition sub-container overflow-scroll container gx-0">
<VehicleBanner
class="mb-3"
cms-widget-name="VehicleBannerWidget"
:display-generic-vehicle-image="false"
/>
<SiteSubHeader
cms-widget-name="SiteSubHeaderWidget"
/>
<VinLookupMethods
v-model="selectedVinLookupMethod"
cms-widget-name="VINLookupMethod"
@ -117,8 +117,8 @@ export default {
</script>
<style lang="scss">
.overflow-scroll {
height: calc(100% - 368px);
overflow-X: hidden !important;
.overflow-scroll {
height: calc(100% - 180px);
overflow-X: hidden !important;
}
</style>
</style>

18
src/layouts/vehicle-parts/vehicle-parts.vue
View file

@ -2,13 +2,13 @@
<Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm">
<div class="page-container-grouped-styles vehicle-parts">
<siteHeader ref="siteHeader" cmsWidgetName="SiteHeaderWidget" />
<vehicleBanner
class="mb-3"
ref="vehicleBanner"
cmsWidgetName="VehicleBannerWidget"
:displayGenericVehicleImage="false" />
<siteSubHeader ref="siteSubHeader" cmsWidgetName="SiteSubHeaderWidget" />
<div class="fade-on-route-transition sub-container overflow-scroll px-5">
<vehicleBanner
class="mb-3"
ref="vehicleBanner"
cmsWidgetName="VehicleBannerWidget"
:displayGenericVehicleImage="false" />
<siteSubHeader ref="siteSubHeader" cmsWidgetName="SiteSubHeaderWidget" />
<div class="prevent-squish my-5">
<div class="row">
<div class="col">
@ -222,8 +222,8 @@ export default {
};
</script>
<style lang="scss">
.overflow-scroll {
height: calc(100% - 368px);
.overflow-scroll {
height: calc(100% - 180px);
overflow-x: hidden !important;
}
</style>
</style>

426
src/layouts/vin-lookup/vin-lookup.vue
View file

@ -1,44 +1,44 @@
<template>
<Form
<Form
@submit="onSubmit"
@invalidSubmit="onInvalidSubmit"
v-slot="{ meta }"
>
>
<div class="page-container-grouped-styles ">
<siteHeader
<siteHeader
cmsWidgetName="SiteHeaderWidget"
/>
<vehicleBanner
class="mb-3"
cmsWidgetName="VehicleBannerWidget"
:displayGenericVehicleImage="false"
/>
<siteSubHeader
cmsWidgetName="SiteSubHeaderWidget"
/>
<div class="px-4 overflow-scroll ">
<div class="fade-on-route-transition sub-container px-2 mt-5">
<vinLookupAlerts
:activeAlertType="activeVehicleLookupAlertType"
/>
/>
<div class="px-4 overflow-scroll ">
<div class="fade-on-route-transition sub-container px-2 mt-5">
<vehicleBanner
class="mb-3"
cmsWidgetName="VehicleBannerWidget"
:displayGenericVehicleImage="false"
/>
<siteSubHeader
cmsWidgetName="SiteSubHeaderWidget"
/>
<vinLookupAlerts
:activeAlertType="activeVehicleLookupAlertType"
/>
<vinQuestion
v-model="vin"
/>
<vinQuestion
v-model="vin"
/>
<vinLocationInformation />
<vinLocationInformation />
<siteFooter
cmsWidgetName="SiteFooterWidget"
:isForwardActionDisabled="!meta.valid"
@backClicked="backButtonAction"
@forwardClicked="forwardButtonAction"
ref="siteFooter"
/>
<siteFooter
cmsWidgetName="SiteFooterWidget"
:isForwardActionDisabled="!meta.valid"
@backClicked="backButtonAction"
@forwardClicked="forwardButtonAction"
ref="siteFooter"
/>
</div>
</div>
</div>
</div>
</Form>
</Form>
</template>
<script>
// Import Supporting Files
@ -63,202 +63,202 @@ import vinLookupAlerts from './vin-lookup-alerts/vin-lookup-alerts.vue';
import vinQuestion from './vin-question/vin-question.vue';
export default {
name: 'vin-lookup',
mixins: [baseFormMixin, vehicleQuestionsMixin],
components: {
siteFooter,
siteHeader,
siteSubHeader,
Form,
vehicleBanner,
vinLocationInformation,
vinLookupAlerts,
vinQuestion,
},
setup() {
const mainStore = useMainStore();
return { mainStore };
},
data() {
return {
activeVehicleLookupAlertType: null,
needToLookupVehicle: true,
vehicleFromLookup: null,
vin: null,
forwardButtonCarStyle:"",
};
},
provide() {
return {
vehicleFromLookup: computed(() => this.vehicleFromLookup),
};
},
async beforeRouteEnter(to, from, next) {
const cmsContentPromise = fetchCmsContentForPage(to.query.issPage);
// Settle promises and get results
const promiseResultMap = [
{
resultKey: 'cmsContent',
promise: cmsContentPromise,
},
];
const resultMap = await settleAllPromises(promiseResultMap);
next((vm) => {
vm.setCmsContent(resultMap.cmsContent);
});
},
computed: {
isCarIdDifferentFromTheStore() {
return (
this.vehicleFromLookup !== null
&& this.vehicleFromLookup.carId !== this.mainStore.vehicle.carId
);
name: 'vin-lookup',
mixins: [baseFormMixin, vehicleQuestionsMixin],
components: {
siteFooter,
siteHeader,
siteSubHeader,
Form,
vehicleBanner,
vinLocationInformation,
vinLookupAlerts,
vinQuestion,
},
isTwoIdenticalYMMVehicleFound(){
const vinYmmFound = `${this.vehicleFromLookup.year} ${this.vehicleFromLookup.make} ${this.vehicleFromLookup.model}`;
const vinYmmExpected = `${this.mainStore.order.vehicle.year} ${this.mainStore.order.vehicle.make} ${this.mainStore.order.vehicle.model}`;
return(vinYmmFound.toLowerCase()==vinYmmExpected.toLowerCase());
}
},
methods: {
arePagePrerequisiteValid() {
return true;
setup() {
const mainStore = useMainStore();
return { mainStore };
},
backButtonAction() {
/**
* this.navigationScenarios comes from base-mixin
*/
this.$router.navigate(this.navigationScenarios.CLICKED_BACK, this.$route);
},
// NOTE: If form is not valid, this method is not called when 'Continue' button is clicked
async forwardButtonAction() {
this.resetActiveAlert();
// Temp solution to reset the 'disabled' style on the Continue button
this.$refs.siteFooter.enableForwardAction();
if (this.needToLookupVehicle) {
const vehicleLookupResponse = await this.lookupVehicleByVin(this.vin);
if (vehicleLookupResponse.error) {
this.activeVehicleLookupAlertType = vehicleLookupAlertTypes.NOT_FOUND;
this.resetVehicleFromLookup();
this.$refs.siteFooter.removeLoader();
// Temp solution to turn on 'disabled' style on the Continue button
// because the form itself actually passes its client-side validation.
// SSR-189 Scenario #4.
this.$refs.siteFooter.disableForwardButton();
return;
}
// Add vin bcs the response from the service doesn't contain vin
this.vehicleFromLookup = Object.assign(vehicleLookupResponse.data, { vin: this.vin });
}
if (this.needToLookupVehicle && this.isCarIdDifferentFromTheStore) {
if(this.isTwoIdenticalYMMVehicleFound){
this.activeVehicleLookupAlertType = vehicleLookupAlertTypes.TWO_IDENTICAL_YMM_MATCHED;
this.forwardButtonCarStyle = this.vehicleFromLookup.style;
}
else{
this.activeVehicleLookupAlertType = vehicleLookupAlertTypes.NOT_MATCHED;
}
const vehicleYearMakeModelStyle = `${this.vehicleFromLookup.year} ${this.vehicleFromLookup.make} ${this.vehicleFromLookup.model} ${this.forwardButtonCarStyle}`;
this.$refs.siteFooter.updateButtonText(`Continue with ${vehicleYearMakeModelStyle}`);
this.$refs.siteFooter.removeLoader();
this.needToLookupVehicle = false;
return;
}
let isSelectedGlassAvailableForVehicle = true;
if (this.isCarIdDifferentFromTheStore) {
isSelectedGlassAvailableForVehicle =
await isGlassAvailableForCarId(this.vehicleFromLookup.carId);
}
// navigate back to vehicle-damage
if (this.isCarIdDifferentFromTheStore && !isSelectedGlassAvailableForVehicle) {
this.mainStore.updateVehicle(this.vehicleFromLookup);
this.$router.navigate(
this.navigationScenarios.SELECTED_VIN_WITH_MISMATCHED_GLASS,
this.$route,
{},
{ [routerParams.DISPLAY_VEHICLE_CHANGE_ALERT]: true }
);
// navigate() doesn't stop the processing flow
return;
}
this.mainStore.updateVehicle(this.vehicleFromLookup);
const partsOrQuestionsResponse = await this.getPartsOrQuestions();
if (partsOrQuestionsResponse.error) {
// To Do: Need requirement on what to do here
console.error('Error on retrieving PartsOrQuestions');
this.$refs.siteFooter.removeLoader();
return;
}
// Comes from vehicleQuestionsMixin.navigateForward()
await this.navigateForward(partsOrQuestionsResponse.data.partsOrQuestions, this);
},
async getPartsOrQuestions() {
try {
const response = await this.mainStore.getPartsOrQuestions();
return response;
} catch (responseError) {
data() {
return {
error: {
status: responseError.status,
},
activeVehicleLookupAlertType: null,
needToLookupVehicle: true,
vehicleFromLookup: null,
vin: null,
forwardButtonCarStyle:"",
};
}
},
async lookupVehicleByVin(vin) {
try {
return await this.mainStore.lookupVehicleByVin(vin);
}
catch (responseError) {
provide() {
return {
error: {
status: responseError.status,
},
vehicleFromLookup: computed(() => this.vehicleFromLookup),
};
}
},
resetActiveAlert() {
this.activeVehicleLookupAlertType = null;
async beforeRouteEnter(to, from, next) {
const cmsContentPromise = fetchCmsContentForPage(to.query.issPage);
// Settle promises and get results
const promiseResultMap = [
{
resultKey: 'cmsContent',
promise: cmsContentPromise,
},
];
const resultMap = await settleAllPromises(promiseResultMap);
next((vm) => {
vm.setCmsContent(resultMap.cmsContent);
});
},
resetVehicleFromLookup() {
this.vehicleFromLookup = null;
computed: {
isCarIdDifferentFromTheStore() {
return (
this.vehicleFromLookup !== null
&& this.vehicleFromLookup.carId !== this.mainStore.vehicle.carId
);
},
isTwoIdenticalYMMVehicleFound(){
const vinYmmFound = `${this.vehicleFromLookup.year} ${this.vehicleFromLookup.make} ${this.vehicleFromLookup.model}`;
const vinYmmExpected = `${this.mainStore.order.vehicle.year} ${this.mainStore.order.vehicle.make} ${this.mainStore.order.vehicle.model}`;
return(vinYmmFound.toLowerCase()==vinYmmExpected.toLowerCase());
}
},
methods: {
arePagePrerequisiteValid() {
return true;
},
backButtonAction() {
/**
* this.navigationScenarios comes from base-mixin
*/
this.$router.navigate(this.navigationScenarios.CLICKED_BACK, this.$route);
},
// NOTE: If form is not valid, this method is not called when 'Continue' button is clicked
async forwardButtonAction() {
this.resetActiveAlert();
// Temp solution to reset the 'disabled' style on the Continue button
this.$refs.siteFooter.enableForwardAction();
if (this.needToLookupVehicle) {
const vehicleLookupResponse = await this.lookupVehicleByVin(this.vin);
if (vehicleLookupResponse.error) {
this.activeVehicleLookupAlertType = vehicleLookupAlertTypes.NOT_FOUND;
this.resetVehicleFromLookup();
this.$refs.siteFooter.removeLoader();
// Temp solution to turn on 'disabled' style on the Continue button
// because the form itself actually passes its client-side validation.
// SSR-189 Scenario #4.
this.$refs.siteFooter.disableForwardButton();
return;
}
// Add vin bcs the response from the service doesn't contain vin
this.vehicleFromLookup = Object.assign(vehicleLookupResponse.data, { vin: this.vin });
}
if (this.needToLookupVehicle && this.isCarIdDifferentFromTheStore) {
if(this.isTwoIdenticalYMMVehicleFound){
this.activeVehicleLookupAlertType = vehicleLookupAlertTypes.TWO_IDENTICAL_YMM_MATCHED;
this.forwardButtonCarStyle = this.vehicleFromLookup.style;
}
else{
this.activeVehicleLookupAlertType = vehicleLookupAlertTypes.NOT_MATCHED;
}
const vehicleYearMakeModelStyle = `${this.vehicleFromLookup.year} ${this.vehicleFromLookup.make} ${this.vehicleFromLookup.model} ${this.forwardButtonCarStyle}`;
this.$refs.siteFooter.updateButtonText(`Continue with ${vehicleYearMakeModelStyle}`);
this.$refs.siteFooter.removeLoader();
this.needToLookupVehicle = false;
return;
}
let isSelectedGlassAvailableForVehicle = true;
if (this.isCarIdDifferentFromTheStore) {
isSelectedGlassAvailableForVehicle =
await isGlassAvailableForCarId(this.vehicleFromLookup.carId);
}
// navigate back to vehicle-damage
if (this.isCarIdDifferentFromTheStore && !isSelectedGlassAvailableForVehicle) {
this.mainStore.updateVehicle(this.vehicleFromLookup);
this.$router.navigate(
this.navigationScenarios.SELECTED_VIN_WITH_MISMATCHED_GLASS,
this.$route,
{},
{ [routerParams.DISPLAY_VEHICLE_CHANGE_ALERT]: true }
);
// navigate() doesn't stop the processing flow
return;
}
this.mainStore.updateVehicle(this.vehicleFromLookup);
const partsOrQuestionsResponse = await this.getPartsOrQuestions();
if (partsOrQuestionsResponse.error) {
// To Do: Need requirement on what to do here
console.error('Error on retrieving PartsOrQuestions');
this.$refs.siteFooter.removeLoader();
return;
}
// Comes from vehicleQuestionsMixin.navigateForward()
await this.navigateForward(partsOrQuestionsResponse.data.partsOrQuestions, this);
},
async getPartsOrQuestions() {
try {
const response = await this.mainStore.getPartsOrQuestions();
return response;
} catch (responseError) {
return {
error: {
status: responseError.status,
},
};
}
},
async lookupVehicleByVin(vin) {
try {
return await this.mainStore.lookupVehicleByVin(vin);
}
catch (responseError) {
return {
error: {
status: responseError.status,
},
};
}
},
resetActiveAlert() {
this.activeVehicleLookupAlertType = null;
},
resetVehicleFromLookup() {
this.vehicleFromLookup = null;
},
resetDependentState() {},
},
watch: {
vin() {
this.resetActiveAlert();
this.$refs.siteFooter.enableForwardAction();
this.needToLookupVehicle = true;
this.$refs.siteFooter.updateButtonText(
this.getCmsContent('SiteFooterWidget', 'ForwardButtonText')
);
}
},
resetDependentState() {},
},
watch: {
vin() {
this.resetActiveAlert();
this.$refs.siteFooter.enableForwardAction();
this.needToLookupVehicle = true;
this.$refs.siteFooter.updateButtonText(
this.getCmsContent('SiteFooterWidget', 'ForwardButtonText')
);
}
},
};
</script>
<style>
.overflow-scroll {
height: calc(100% - 368px);
overflow-X: hidden !important;
.overflow-scroll {
height: calc(100% - 180px);
overflow-X: hidden !important;
}
</style>
</style>