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" /> :validationRules="validationRules" />
</div> </div>
<siteFooter <siteFooter
class="mt-3" class="mt-5"
ref="siteFooter" ref="siteFooter"
cmsWidgetName="SiteFooterWidget" cmsWidgetName="SiteFooterWidget"
:isForwardActionDisabled="!isMetaValid" :isForwardActionDisabled="!isMetaValid"

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

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

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

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

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

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

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

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