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

Merge pull request #358 from Safelite/SSR-520-fix-footer-spacing

Browse source 
Update footer spacing on select pages.
This commit is contained in:
bmauger 2023-07-05 10:25:02 -04:00 committed by GitHub
commit eac760db83
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
6 changed files with 165 additions and 174 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -29,7 +29,7 @@
:validationRules="validationRules" />
</div>
<siteFooter
class="mt-3"
class="mt-5"
ref="siteFooter"
cmsWidgetName="SiteFooterWidget"
:isForwardActionDisabled="!isMetaValid"

11
src/layouts/coverage-statement/coverage-statement.vue
View file

@ -27,6 +27,7 @@
<steeringText cmsWidgetName="MASteeringText" ></steeringText>
</div>
<siteFooter
class="mt-5"
cmsWidgetName="SiteFooterWidget"
:isForwardActionDisabled="!meta.valid"
@backClicked="navigateBack"
@ -38,7 +39,7 @@
</div>
</div>
</div>
<recalModal ref="RecalModal" cmsWidgetName="RecalModal" />
<recalModal ref="RecalModal" cmsWidgetName="RecalModal" />
</Form>
</template>
<script>
@ -71,7 +72,7 @@ export default {
recalModal,
steeringText
},
mounted() {
mounted() {
setupModalLinks(this);
},
computed: {
@ -142,7 +143,7 @@ export default {
}
return false;
},
async forwardButtonAction() {
return this.navigateForward();
},
@ -174,10 +175,10 @@ ol {
color: $black;
}
p strong {
color: $black;
color: $black;
font-weight: 500;
}
p.small{
margin-bottom:0;
}
</style>
</style>

24
src/layouts/service-location/service-location.vue
View file

@ -31,22 +31,14 @@
validationRules="selection-required"
class="service-location-button-question mb-1"/>
<div class="select-car">
<div class="container-fluid pb-2 g-0">
<div class="row">
<div class="col px-0">
<div class="select-car-form rounded">
<siteFooter
class="mt-4"
cmsWidgetName="SiteFooterWidget"
:isForwardActionDisabled="!meta.valid"
@backClicked="backButtonAction"
@forwardClicked="forwardButtonAction"
ref="siteFooter"
/>
</div>
</div>
</div>
</div>
<siteFooter
class="mt-5"
cmsWidgetName="SiteFooterWidget"
:isForwardActionDisabled="!meta.valid"
@backClicked="backButtonAction"
@forwardClicked="forwardButtonAction"
ref="siteFooter"
/>
</div>
</div>
</div>

299
src/layouts/service-packages/service-packages.vue
View file

@ -1,30 +1,27 @@
<template>
<Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm" v-slot="{ meta }">
<Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm" v-slot="{ meta }">
<div class="page-container-grouped-styles">
<div class="fade-on-route-transition sub-container make-tall">
<siteHeader cmsWidgetName="SiteHeaderWidget" />
<siteSubHeader cmsWidgetName="SiteSubHeaderWidget"
justification="left"
issContainingPage="service-packages"
/>
justification="left"
issContainingPage="service-packages"
/>
<div class="mx-5">
<servicePackageQuestion ref="servicePackage"
cmsWidgetName="ServicePackage"
groupName="ServicePackageQuestion"
:availableLineItems="availableLineItems"
@vapsItemsSelected="vapsItemsSelectedAction"
v-on:link-event="openModalAction"
validationRules="option-required"
isRequired
cmsWidgetName="ServicePackage"
groupName="ServicePackageQuestion"
:availableLineItems="availableLineItems"
@vapsItemsSelected="vapsItemsSelectedAction"
v-on:link-event="openModalAction"
validationRules="option-required"
isRequired
/>
<p class="caption disclaimer" v-html="PriceDisclaimerText"></p>
<p class="caption disclaimer" v-html="PriceDisclaimerText"></p>
<siteFooter cmsWidgetName="SiteFooterWidget"
:isForwardActionDisabled="!meta.valid"
@back-clicked="backButtonAction"
@ForwardClicked="forwardButtonAction" />
:isForwardActionDisabled="!meta.valid"
@back-clicked="backButtonAction"
@ForwardClicked="forwardButtonAction" />
</div>
</div>
</div>
@ -33,155 +30,155 @@
<contentGroupModal ref="FrontWiperModal" cmsWidgetName="FrontWiperModal" />
<contentGroupModal ref="RearWiperModal" cmsWidgetName="RearWiperModal" />
<contentGroupModal ref="RecalModal" cmsWidgetName="RecalModal" />
</Form>
</template>
<script>
// Components
import baseFormMixin from '@/mixins/base-form-mixin';
import siteHeader from '@/iss-components/site-header/site-header';
import siteFooter from '@/iss-components/site-footer/site-footer';
import siteSubHeader from '@/iss-components/site-sub-header/site-sub-header';
import servicePackageQuestion from './service-package-question/service-package-question';
import textBlock from '@/digital-components/text-block/text-block';
import contentGroupModal from '@/iss-components/content-group-modal/content-group-modal';
import loadingModal from '@/iss-components/loading-modal/loading-modal.vue';
import { settleAllPromises } from '@/helpers/layout-helper';
import { useMainStore } from "@/store";
import { fetchCmsContentForPage } from '@/helpers/cms-content-helper';
import { required } from '@/helpers/validation-rules';
import { errorMessages } from '@/constants/error-messages';
import { Form, defineRule } from 'vee-validate';
import { allGlassPartsAndItemsHavePrices } from '@/layouts/service-packages/service-package-helper/service-package-helper'
// Components
import baseFormMixin from '@/mixins/base-form-mixin';
import siteHeader from '@/iss-components/site-header/site-header';
import siteFooter from '@/iss-components/site-footer/site-footer';
import siteSubHeader from '@/iss-components/site-sub-header/site-sub-header';
import servicePackageQuestion from './service-package-question/service-package-question';
import textBlock from '@/digital-components/text-block/text-block';
import contentGroupModal from '@/iss-components/content-group-modal/content-group-modal';
import loadingModal from '@/iss-components/loading-modal/loading-modal.vue';
import { settleAllPromises } from '@/helpers/layout-helper';
import { useMainStore } from "@/store";
import { fetchCmsContentForPage } from '@/helpers/cms-content-helper';
import { required } from '@/helpers/validation-rules';
import { errorMessages } from '@/constants/error-messages';
import { Form, defineRule } from 'vee-validate';
import { allGlassPartsAndItemsHavePrices } from '@/layouts/service-packages/service-package-helper/service-package-helper'
defineRule('option-required', required(errorMessages.OPTION_REQUIRED));
defineRule('option-required', required(errorMessages.OPTION_REQUIRED));
const store = useMainStore();
const store = useMainStore();
export default {
name: 'service-packages',
mixins: [baseFormMixin],
async beforeRouteEnter(to, from, next) {
// Call APIs
const cmsContentPromise = fetchCmsContentForPage(to.query.issPage);
export default {
name: 'service-packages',
mixins: [baseFormMixin],
async beforeRouteEnter(to, from, next) {
// Call APIs
const cmsContentPromise = fetchCmsContentForPage(to.query.issPage);
const wipersPromise = await store.getWipers();
const rainDefensePromise = await store.getRainDefense();
const supportingItemsPromise = await store.getSupportingItems();
const promiseResultMap = [
{
resultKey: 'cmsContent',
promise: cmsContentPromise,
},
{
resultKey: 'wipers',
promise: wipersPromise,
},
{
resultKey: 'rainDefense',
promise: rainDefensePromise,
},
{
resultKey: 'supportingItems',
promise: supportingItemsPromise,
},
];
const resultMap = await settleAllPromises(promiseResultMap);
const wipersPromise = await store.getWipers();
const rainDefensePromise = await store.getRainDefense();
const supportingItemsPromise = await store.getSupportingItems();
const promiseResultMap = [
{
resultKey: 'cmsContent',
promise: cmsContentPromise,
},
{
resultKey: 'wipers',
promise: wipersPromise,
},
{
resultKey: 'rainDefense',
promise: rainDefensePromise,
},
{
resultKey: 'supportingItems',
promise: supportingItemsPromise,
},
];
const resultMap = await settleAllPromises(promiseResultMap);
const clonedGlassParts = store.order.lineItems.glassParts
? JSON.parse(JSON.stringify(store.order.lineItems.glassParts))
: [];
const availableLineItems = [
resultMap.rainDefense,
...resultMap.supportingItems,
...resultMap.wipers,
...clonedGlassParts,
];
const clonedGlassParts = store.order.lineItems.glassParts
? JSON.parse(JSON.stringify(store.order.lineItems.glassParts))
: [];
const availableLineItems = [
resultMap.rainDefense,
...resultMap.supportingItems,
...resultMap.wipers,
...clonedGlassParts,
];
const pricingResults = await store.getPriceOrderItems(availableLineItems);
const pricingResults = await store.getPriceOrderItems(availableLineItems);
// Call the "next" function to complete the transition to this page.
next((vm) => {
vm.setCmsContent(resultMap.cmsContent);
vm.pricedGlassParts = clonedGlassParts;
vm.supportingItems = resultMap.supportingItems;
vm.availableLineItems = pricingResults;
});
// Call the "next" function to complete the transition to this page.
next((vm) => {
vm.setCmsContent(resultMap.cmsContent);
vm.pricedGlassParts = clonedGlassParts;
vm.supportingItems = resultMap.supportingItems;
vm.availableLineItems = pricingResults;
});
},
data() {
return {
selectedVaps: [],
availableLineItems: [],
supportingItems: [],
pricedGlassParts: []
};
},
computed: {
PriceDisclaimerText() {
return this.getCmsContent("PriceDisclaimerWidget", "Text");
},
data() {
return {
selectedVaps: [],
availableLineItems: [],
supportingItems: [],
pricedGlassParts: []
};
},
methods: {
openModalAction(modalName) {
this.$refs[modalName.args].openModal();
},
computed: {
PriceDisclaimerText() {
return this.getCmsContent("PriceDisclaimerWidget", "Text");
},
},
methods: {
openModalAction(modalName) {
this.$refs[modalName.args].openModal();
},
arePagePrerequisitesValid() {
return (
store.order.serviceLocation.zipCode &&
store.order.serviceLocation.zipCodeCtu &&
(store.order.damage.isRepair ||
(store.order.lineItems?.glassParts != null &&
store.order.lineItems.glassParts.length > 0)) &&
store.order.referralNumber?.length !== 6
);
},
vapsItemsSelectedAction(vapsItemsSelected) {
this.selectedVaps = vapsItemsSelected;
},
backButtonAction() {
this.$router.navigate(this.navigationScenarios.CLICKED_BACK, this.$route);
},
forwardButtonAction() {
const parts = { glassParts: this.pricedGlassParts, supportingItems: this.supportingItems, vaps: this.selectedVaps };
if (!allGlassPartsAndItemsHavePrices(parts)) {
console.error('One or more items have no price assigned!');
arePagePrerequisitesValid() {
return (
store.order.serviceLocation.zipCode &&
store.order.serviceLocation.zipCodeCtu &&
(store.order.damage.isRepair ||
(store.order.lineItems?.glassParts != null &&
store.order.lineItems.glassParts.length > 0)) &&
store.order.referralNumber?.length !== 6
);
},
vapsItemsSelectedAction(vapsItemsSelected) {
this.selectedVaps = vapsItemsSelected;
},
backButtonAction() {
this.$router.navigate(this.navigationScenarios.CLICKED_BACK, this.$route);
},
forwardButtonAction() {
const parts = { glassParts: this.pricedGlassParts, supportingItems: this.supportingItems, vaps: this.selectedVaps };
if (!allGlassPartsAndItemsHavePrices(parts)) {
console.error('One or more items have no price assigned!');
}
if (this.pricedGlassParts.length > 0) {
store.saveGlassParts(this.pricedGlassParts);
}
store.saveSupportingItems(this.supportingItems);
store.saveVaps(this.selectedVaps);
this.$router.navigate(this.navigationScenarios.CLICKED_FORWARD, this.$route);
}
if (this.pricedGlassParts.length > 0) {
store.saveGlassParts(this.pricedGlassParts);
}
store.saveSupportingItems(this.supportingItems);
store.saveVaps(this.selectedVaps);
this.$router.navigate(this.navigationScenarios.CLICKED_FORWARD, this.$route);
},
components: {
siteHeader,
siteFooter,
siteSubHeader,
Form, /* eslint-disable-line */
textBlock,
servicePackageQuestion,
loadingModal,
contentGroupModal
}
},
components: {
siteHeader,
siteFooter,
siteSubHeader,
Form, /* eslint-disable-line */
textBlock,
servicePackageQuestion,
loadingModal,
contentGroupModal
};
</script>
<style lang="scss">
.subheader-secondary {
margin-top: .5rem;
padding: 0px;
}
};
</script>
<style lang="scss">
.subheader-secondary {
margin-top: .5rem;
padding: 0px;
}
.disclaimer {
margin-top: 1.3rem;
.disclaimer {
margin: 1.3rem 0 1.5rem 0;
a {
color: #4D5151;
font-weight: 400;
a {
color: #4D5151;
font-weight: 400;
}
}
}
</style>
</style>

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

@ -11,7 +11,7 @@
<VehicleBanner class="mt-2 mb-4" cms-widget-name="VehicleBannerWidget" :display-generic-vehicle-image="false" />
<SiteSubHeader cms-widget-name="SiteSubHeaderWidget" class="mt-5 mb-2" />
<VinLookupMethods v-model="selectedVinLookupMethod" cms-widget-name="VINLookupMethod" group-name="VinLookupMethods" ref="VinLookupMethods" />
<SiteFooter cms-widget-name="SiteFooterWidget" :is-forward-action-disabled="isForwardActionDisabled" @back-clicked="backButtonAction" @forward-clicked="forwardButtonAction" class="mt-3"/>
<SiteFooter cms-widget-name="SiteFooterWidget" :is-forward-action-disabled="isForwardActionDisabled" @back-clicked="backButtonAction" @forward-clicked="forwardButtonAction" class="mt-5"/>
</div>
</div>
</div>

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

@ -38,6 +38,7 @@
:alreadyPopulatedPartsData="alreadyPopulatedPartsData" />
</div>
<siteFooter
class="mt-5"
cmsWidgetName="SiteFooterWidget"
ref="siteFooter"
:isForwardActionDisabled="isForwardActionDisabled"