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

Merge pull request #164 from Safelite/SSR-219-create-coverage-statement-page

Browse source 
Create CSM entries and markup for coverage statement page.
This commit is contained in:
bmauger 2023-02-14 13:00:46 -05:00 committed by GitHub
commit 7d342213e9
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
18 changed files with 149 additions and 109 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
src/digital-components/text-block/text-block.vue
View file

@ -1,6 +1,6 @@
<template> <template>
<div <div
class="text-block w-100 mt-2" class="text-block w-100"
:class="[justifyText, typeStyle, fontWeight]" :class="[justifyText, typeStyle, fontWeight]"
v-html="this.TextBlockCopy"></div> v-html="this.TextBlockCopy"></div>
</template> </template>
@ -25,12 +25,15 @@ export default {
<style lang="scss" scoped> <style lang="scss" scoped>
.text-block { .text-block {
&.left { &.left {
display: flex;
justify-content: flex-start; justify-content: flex-start;
} }
&.right { &.right {
display: flex;
justify-content: flex-end; justify-content: flex-end;
} }
&.center { &.center {
display: flex;
justify-content: center; justify-content: center;
} }
&.bold { &.bold {

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

@ -2,7 +2,7 @@
<div :class="`page-container-grouped-styles questions-page`"> <div :class="`page-container-grouped-styles questions-page`">
<loadingModal ref="loadingModal" /> <loadingModal ref="loadingModal" />
<siteHeader cmsWidgetName="SiteHeaderWidget" /> <siteHeader cmsWidgetName="SiteHeaderWidget" />
<vehicleBanner cmsWidgetName="VehicleBannerWidget" :displayGenericVehicleImage="false" /> <vehicleBanner class="mb-3" cmsWidgetName="VehicleBannerWidget" :displayGenericVehicleImage="false" />
<siteSubHeader cmsWidgetName="SiteSubHeaderWidget" /> <siteSubHeader cmsWidgetName="SiteSubHeaderWidget" />
<div class="fade-on-route-transition sub-container make-tall"> <div class="fade-on-route-transition sub-container make-tall">
<alert <alert

6
src/iss-components/vehicle-banner/vehicle-banner.vue
View file

@ -1,5 +1,5 @@
<template> <template>
<div class="vehicle_banner mb-3 text-center"> <div class="vehicle_banner text-center">
<img <img
class="vehicle-image img-fluid" class="vehicle-image img-fluid"
:src="vehicleImageToDisplay" :src="vehicleImageToDisplay"
@ -21,9 +21,9 @@ export default {
computed: { computed: {
vehicleImageToDisplay(){ vehicleImageToDisplay(){
if (this.displayGenericVehicleImage){ if (this.displayGenericVehicleImage){
return this.genericVehicleImage; return this.genericVehicleImage;
} }
const imageUrl = this.mainStore.order.vehicle.imageUrl; const imageUrl = this.mainStore.order.vehicle.imageUrl;
if (!imageUrl || imageUrl === "NULL"){ if (!imageUrl || imageUrl === "NULL"){
return this.getUnmatchedVehicleIcon(); return this.getUnmatchedVehicleIcon();

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

@ -8,6 +8,7 @@
<div class="page-container-grouped-styles"> <div class="page-container-grouped-styles">
<siteHeader cmsWidgetName="SiteHeaderWidget" ref="siteHeader" /> <siteHeader cmsWidgetName="SiteHeaderWidget" ref="siteHeader" />
<vehicleBanner <vehicleBanner
class="mb-3"
cmsWidgetName="VehicleBannerWidget" cmsWidgetName="VehicleBannerWidget"
ref="vehicleBanner" ref="vehicleBanner"
:displayGenericVehicleImage="false" /> :displayGenericVehicleImage="false" />
@ -37,7 +38,7 @@
v-bind:isDismissible="false" /> v-bind:isDismissible="false" />
<customerQuestions ref="customerQuestions" v-model="customerQuestions" /> <customerQuestions ref="customerQuestions" v-model="customerQuestions" />
<siteFooter <siteFooter
cmsWidgetName="SiteFooterWidget" cmsWidgetName="SiteFooterWidget"
ref="siteFooter" ref="siteFooter"
@ -116,7 +117,7 @@ export default {
this.$router.navigate(this.navigationScenarios.CLICKED_BACK, this.$route); this.$router.navigate(this.navigationScenarios.CLICKED_BACK, this.$route);
}, },
attachCustomEvents() { attachCustomEvents() {
this.prependActionToMethod(this, this.forwardButtonAction, () => { this.prependActionToMethod(this, this.forwardButtonAction, () => {
this.pushEventToGA( this.pushEventToGA(
this.$route.query[this.queryStrings.ISS_PAGE], this.$route.query[this.queryStrings.ISS_PAGE],
@ -125,7 +126,7 @@ export default {
true true
); );
}); });
}, },
async forwardButtonAction() { async forwardButtonAction() {
@ -237,7 +238,7 @@ export default {
// display vehicle changed alert on that page. // display vehicle changed alert on that page.
if ( if (
this.isCarIdDifferent && this.isCarIdDifferent &&
!this.isSelectedGlassAvailableForVehicle !this.isSelectedGlassAvailableForVehicle
) { ) {
this.$router.navigate( this.$router.navigate(
this.navigationScenarios.SELECTED_VIN_WITH_MISMATCHED_GLASS, this.navigationScenarios.SELECTED_VIN_WITH_MISMATCHED_GLASS,

3
src/layouts/address-vehicles/address-vehicles.vue
View file

@ -8,6 +8,7 @@
<div class="page-container-grouped-styles overflow-auto"> <div class="page-container-grouped-styles overflow-auto">
<siteHeader cmsWidgetName="SiteHeaderWidget" /> <siteHeader cmsWidgetName="SiteHeaderWidget" />
<vehicleBanner <vehicleBanner
class="mb-3"
cmsWidgetName="VehicleBannerWidget" cmsWidgetName="VehicleBannerWidget"
:displayGenericVehicleImage="false" :displayGenericVehicleImage="false"
/> />
@ -264,4 +265,4 @@ export default {
#multiple-vehicles-alert p { #multiple-vehicles-alert p {
margin-bottom: 0 !important; // Overrides extra margin-bottom on alert body text margin-bottom: 0 !important; // Overrides extra margin-bottom on alert body text
} }
</style> </style>

9
src/layouts/capability-questions/capability-questions.vue
View file

@ -11,6 +11,7 @@
<vehicleBanner <vehicleBanner
cmsWidgetName="VehicleBannerWidget" cmsWidgetName="VehicleBannerWidget"
:displayGenericVehicleImage="false" :displayGenericVehicleImage="false"
class="mb-3"
/> />
<siteSubHeader <siteSubHeader
cmsWidgetName="SiteSubHeaderWidget" cmsWidgetName="SiteSubHeaderWidget"
@ -50,11 +51,11 @@ export default {
siteHeader, siteHeader,
siteSubHeader, siteSubHeader,
Form, Form,
vehicleBanner, vehicleBanner,
}, },
data() { data() {
return {}; return {};
}, },
async beforeRouteEnter(to, from, next) { async beforeRouteEnter(to, from, next) {
const cmsContentPromise = fetchCmsContentForPage(to.query.issPage); const cmsContentPromise = fetchCmsContentForPage(to.query.issPage);
@ -82,7 +83,7 @@ export default {
*/ */
this.$router.navigate(this.navigationScenarios.CLICKED_BACK, this.$route); this.$router.navigate(this.navigationScenarios.CLICKED_BACK, this.$route);
}, },
async forwardButtonAction() {}, async forwardButtonAction() {},
resetDependentState() {}, resetDependentState() {},
}, },
}; };

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

@ -11,13 +11,30 @@
<vehicleBanner <vehicleBanner
cmsWidgetName="VehicleBannerWidget" cmsWidgetName="VehicleBannerWidget"
:displayGenericVehicleImage="false" :displayGenericVehicleImage="false"
class="mb-0"
/> />
<siteSubHeader <div class="fade-on-route-transition sub-container make-tall">
cmsWidgetName="SiteSubHeaderWidget" <textBlock
/> cmsWidgetName="verifyingCoverageStatement"
<div class="fade-on-route-transition sub-container make-tall mt-5"> typeStyle="h5"
<p>Placeholder for coverage-statement page</p> justifyText="center"
class="mt-4 mb-4"
/>
<textBlock
cmsWidgetName="continueWithSchedulingCopy"
typeStyle="body"
class="mt-0"
/>
<textBlock
cmsWidgetName="whatHappensNextCopy"
class="mt-4 mb-2 fw-bold"
/>
<textBlock
cmsWidgetName="UnverifiedADASNextStepsWidget"
typeStyle="body"
/>
<a href="#!" data-bs-toggle="modal" data-bs-target="#RecalModal" aria-label="Modal window">Recalibration</a>
<modal cmsWidgetName="RecalModal" />
<siteFooter <siteFooter
cmsWidgetName="SiteFooterWidget" cmsWidgetName="SiteFooterWidget"
:isForwardActionDisabled="!meta.valid" :isForwardActionDisabled="!meta.valid"
@ -30,9 +47,6 @@
</Form> </Form>
</template> </template>
<script> <script>
// Import Supporting Files
import { fetchCmsContentForPage } from '@/helpers/cms-content-helper';
import { settleAllPromises } from '@/helpers/layout-helper';
// Import Component // Import Component
import baseFormMixin from '@/mixins/base-form-mixin'; import baseFormMixin from '@/mixins/base-form-mixin';
@ -41,6 +55,12 @@ import siteFooter from '@/iss-components/site-footer/site-footer.vue';
import siteHeader from '@/iss-components/site-header/site-header.vue'; import siteHeader from '@/iss-components/site-header/site-header.vue';
import siteSubHeader from '@/iss-components/site-sub-header/site-sub-header.vue'; import siteSubHeader from '@/iss-components/site-sub-header/site-sub-header.vue';
import vehicleBanner from '@/iss-components/vehicle-banner/vehicle-banner.vue'; import vehicleBanner from '@/iss-components/vehicle-banner/vehicle-banner.vue';
import textBlock from "@/digital-components/text-block/text-block";
import modal from "@/digital-components/modal/modal";
// Import Supporting Files
import { fetchCmsContentForPage } from '@/helpers/cms-content-helper';
import { settleAllPromises } from '@/helpers/layout-helper';
export default { export default {
name: 'coverage-statement', name: 'coverage-statement',
@ -50,11 +70,13 @@ export default {
siteHeader, siteHeader,
siteSubHeader, siteSubHeader,
Form, Form,
vehicleBanner, vehicleBanner,
}, textBlock,
modal,
},
data() { data() {
return {}; return {};
}, },
async beforeRouteEnter(to, from, next) { async beforeRouteEnter(to, from, next) {
const cmsContentPromise = fetchCmsContentForPage(to.query.issPage); const cmsContentPromise = fetchCmsContentForPage(to.query.issPage);
@ -82,8 +104,17 @@ export default {
*/ */
this.$router.navigate(this.navigationScenarios.CLICKED_BACK, this.$route); this.$router.navigate(this.navigationScenarios.CLICKED_BACK, this.$route);
}, },
async forwardButtonAction() {}, async forwardButtonAction() {},
resetDependentState() {}, resetDependentState() {},
}, },
}; };
</script> </script>
<style lang="scss">
ol {
margin-left: -1rem;
li {
margin-bottom: .5rem;
}
}
</style>

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

@ -1,11 +1,12 @@
<template> <template>
<Form <Form
@submit="onSubmit" @submit="onSubmit"
@invalid-submit="onInvalidSubmit" @invalid-submit="onInvalidSubmit"
v-slot="{ meta }"> v-slot="{ meta }">
<div class="page-container-grouped-styles overflow-auto"> <div class="page-container-grouped-styles overflow-auto">
<siteHeader cms-widget-name="SiteHeaderWidget" /> <siteHeader cms-widget-name="SiteHeaderWidget" />
<vehicleBanner <vehicleBanner
class="mb-3"
cms-widget-name="VehicleBannerWidget" cms-widget-name="VehicleBannerWidget"
:display-generic-vehicle-image="false" /> :display-generic-vehicle-image="false" />
<siteSubHeader cms-widget-name="SiteSubHeaderWidget" /> <siteSubHeader cms-widget-name="SiteSubHeaderWidget" />
@ -29,7 +30,7 @@
<textboxQuestion <textboxQuestion
cmsWidgetName="LicensePlateNumberQuestionWidget" cmsWidgetName="LicensePlateNumberQuestionWidget"
v-model="licensePlate" v-model="licensePlate"
isRequired isRequired
disableAutoFill disableAutoFill
id="license-plate-question-wrapper" id="license-plate-question-wrapper"
inputId="license-plate-question" inputId="license-plate-question"
@ -97,17 +98,17 @@ export default {
]; ];
const resultMap = await settleAllPromises(promiseResultMap); const resultMap = await settleAllPromises(promiseResultMap);
// 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);
}); });
}, },
data() { data() {
return { return {
activeVehicleLookupAlertType: null, activeVehicleLookupAlertType: null,
vehicleFromLookup: null, vehicleFromLookup: null,
licensePlate: null, licensePlate: null,
licenseState: null, licenseState: null,
displayVinNotFoundAlert: false, displayVinNotFoundAlert: false,
displayMatchedDifferentVehicleAlert: false, displayMatchedDifferentVehicleAlert: false,
@ -118,7 +119,7 @@ export default {
}; };
}, },
methods: { methods: {
arePagePrerequisitesValid() { arePagePrerequisitesValid() {
return this.mainStore.order.vehicle.carId !== null; return this.mainStore.order.vehicle.carId !== null;
}, },
loadDefaultsFromStore() { loadDefaultsFromStore() {
@ -162,7 +163,7 @@ export default {
this.$refs.siteFooter.disableForwardButton(); this.$refs.siteFooter.disableForwardButton();
return this.$refs.siteFooter.removeLoader(); return this.$refs.siteFooter.removeLoader();
}; };
// Vehicle found from VIN lookup // Vehicle found from VIN lookup
const vehicleFromLookup = resultMap.vinLookupResponse.vehicle; const vehicleFromLookup = resultMap.vinLookupResponse.vehicle;

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

@ -3,6 +3,7 @@
<div class="page-container-grouped-styles overflow-auto"> <div class="page-container-grouped-styles overflow-auto">
<siteHeader cmsWidgetName="SiteHeaderWidget" /> <siteHeader cmsWidgetName="SiteHeaderWidget" />
<vehicleBanner <vehicleBanner
class="mb-3"
cmsWidgetName="VehicleBannerWidget" cmsWidgetName="VehicleBannerWidget"
:displayGenericVehicleImage="false" /> :displayGenericVehicleImage="false" />
<siteSubHeader cmsWidgetName="SiteSubHeaderWidget" /> <siteSubHeader cmsWidgetName="SiteSubHeaderWidget" />
@ -123,7 +124,7 @@ export default {
}, },
setup() { setup() {
const mainStore = useMainStore(); const mainStore = useMainStore();
return { mainStore }; return { mainStore };
}, },
data() { data() {
@ -138,7 +139,7 @@ export default {
selectedRearReplaceOptions: this.getRearReplaceOptionsFromStore(), selectedRearReplaceOptions: this.getRearReplaceOptionsFromStore(),
}; };
}, },
methods: { methods: {
arePagePrerequisitesValid() { arePagePrerequisitesValid() {
if (this.mainStore.order.vehicle.carId) { if (this.mainStore.order.vehicle.carId) {
return true; return true;
@ -306,8 +307,8 @@ export default {
return this.navigateForward(); return this.navigateForward();
}, },
navigateForward() { navigateForward() {
if (this.mainStore.damage.isRepair) { if (this.mainStore.damage.isRepair) {
this.$router.navigate( this.$router.navigate(
this.navigationScenarios.CLICKED_FORWARD_WITH_REPAIR, this.navigationScenarios.CLICKED_FORWARD_WITH_REPAIR,
this.$route this.$route
@ -326,7 +327,7 @@ export default {
this.$route this.$route
); );
} }
} }
}, },
selectedGlassToReplace() { selectedGlassToReplace() {

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

@ -8,6 +8,7 @@
cms-widget-name="SiteHeaderWidget" cms-widget-name="SiteHeaderWidget"
/> />
<VehicleBanner <VehicleBanner
class="mb-3"
cms-widget-name="VehicleBannerWidget" cms-widget-name="VehicleBannerWidget"
:display-generic-vehicle-image="false" :display-generic-vehicle-image="false"
/> />

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

@ -3,21 +3,21 @@
<siteHeader cmsWidgetName="SiteHeaderWidget" /> <siteHeader cmsWidgetName="SiteHeaderWidget" />
<div class="select-car"> <div class="select-car">
<div class="select-car-form rounded text-center"> <div class="select-car-form rounded text-center">
<vehicleBanner cmsWidgetName="VehicleBannerWidget" :displayGenericVehicleImage="true"/> <vehicleBanner class="mb-3" cmsWidgetName="VehicleBannerWidget" :displayGenericVehicleImage="true"/>
<siteSubHeader <siteSubHeader
cmsWidgetName="SiteSubHeaderWidget" cmsWidgetName="SiteSubHeaderWidget"
:hasBackButton="true" :hasBackButton="true"
@click-event="backButtonAction" @click-event="backButtonAction"
/> />
<div class="fade-on-route-transition"> <div class="fade-on-route-transition">
<makeQuestion <makeQuestion
class="fade-on-route-transition" class="fade-on-route-transition"
v-model="selectedMake" v-model="selectedMake"
ref="makeQuestion" ref="makeQuestion"
cmsWidgetName="VehicleMakeQuestion" cmsWidgetName="VehicleMakeQuestion"
/> />
</div> </div>
<siteFooter cmsWidgetName="SiteFooterWidget" ref="siteFooter" <siteFooter cmsWidgetName="SiteFooterWidget" ref="siteFooter"
@back-clicked="backButtonAction" :isForwardButtonHidden="shouldHideForwardButton" /> @back-clicked="backButtonAction" :isForwardButtonHidden="shouldHideForwardButton" />
</div> </div>
</div> </div>
@ -45,11 +45,11 @@
}; };
}, },
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 makeQuestionInitialDataPromise = makeQuestion.methods.loadInitialData(); const makeQuestionInitialDataPromise = makeQuestion.methods.loadInitialData();
// Settle promises and get results // Settle promises and get results
const promiseResultMap = [ const promiseResultMap = [
{ {
@ -61,9 +61,9 @@
promise: makeQuestionInitialDataPromise, promise: makeQuestionInitialDataPromise,
}, },
]; ];
let resultMap = await settleAllPromises(promiseResultMap); let resultMap = await settleAllPromises(promiseResultMap);
// 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);
@ -95,12 +95,12 @@
}, },
watch: { watch: {
selectedMake(make) { selectedMake(make) {
this.mainStore.updateVehicleMake( make ); this.mainStore.updateVehicleMake( make );
this.$router.navigate( this.$router.navigate(
this.navigationScenarios.SELECTED_MAKE, this.navigationScenarios.SELECTED_MAKE,
this.$route this.$route
); );
}, },
} }
}; };
</script> </script>

21
src/layouts/vehicle-model/vehicle-model.vue
View file

@ -3,7 +3,7 @@
<siteHeader cmsWidgetName="SiteHeaderWidget" /> <siteHeader cmsWidgetName="SiteHeaderWidget" />
<div class="select-car"> <div class="select-car">
<div class="select-car-form rounded text-center"> <div class="select-car-form rounded text-center">
<vehicleBanner cmsWidgetName="VehicleBannerWidget" displayGenericVehicleImage /> <vehicleBanner class="mb-3" cmsWidgetName="VehicleBannerWidget" displayGenericVehicleImage />
<siteSubHeader <siteSubHeader
cmsWidgetName="SiteSubHeaderWidget" cmsWidgetName="SiteSubHeaderWidget"
:hasBackButton="true" :hasBackButton="true"
@ -13,13 +13,13 @@
<div class="fade-on-route-transition"> <div class="fade-on-route-transition">
<modelQuestion v-model="selectedModel" ref="modelQuestion" cmsWidgetName="VehicleModelQuestion" /> <modelQuestion v-model="selectedModel" ref="modelQuestion" cmsWidgetName="VehicleModelQuestion" />
</div> </div>
<siteFooter cmsWidgetName="SiteFooterWidget" ref="siteFooter" <siteFooter cmsWidgetName="SiteFooterWidget" ref="siteFooter"
@back-clicked="backButtonAction" :isForwardButtonHidden="shouldHideForwardButton" /> @back-clicked="backButtonAction" :isForwardButtonHidden="shouldHideForwardButton" />
</div> </div>
</div> </div>
</div> </div>
</template> </template>
<script> <script>
// Components // Components
import modelQuestion from "@/layouts/vehicle-model/model-question/model-question"; import modelQuestion from "@/layouts/vehicle-model/model-question/model-question";
@ -27,11 +27,11 @@
import siteSubHeader from "@/iss-components/site-sub-header/site-sub-header"; import siteSubHeader from "@/iss-components/site-sub-header/site-sub-header";
import vehicleBanner from "@/iss-components/vehicle-banner/vehicle-banner"; import vehicleBanner from "@/iss-components/vehicle-banner/vehicle-banner";
import siteFooter from "@/iss-components/site-footer/site-footer"; import siteFooter from "@/iss-components/site-footer/site-footer";
// Supporting files // Supporting files
import { fetchCmsContentForPage } from "@/helpers/cms-content-helper"; import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
import { settleAllPromises } from "@/helpers/layout-helper"; import { settleAllPromises } from "@/helpers/layout-helper";
export default { export default {
name: "vehicle-model", name: "vehicle-model",
data() { data() {
@ -45,7 +45,7 @@
const cmsContentPromise = fetchCmsContentForPage(to.query.issPage); const cmsContentPromise = fetchCmsContentForPage(to.query.issPage);
const modelQuestionInitialDataPromise = const modelQuestionInitialDataPromise =
modelQuestion.methods.loadInitialData(); modelQuestion.methods.loadInitialData();
// Settle promises and get results // Settle promises and get results
const promiseResultMap = [ const promiseResultMap = [
{ {
@ -57,9 +57,9 @@
promise: modelQuestionInitialDataPromise, promise: modelQuestionInitialDataPromise,
}, },
]; ];
const resultMap = await settleAllPromises(promiseResultMap); const resultMap = await settleAllPromises(promiseResultMap);
// 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);
@ -68,7 +68,7 @@
); );
}); });
}, },
methods: { methods: {
backButtonAction() { backButtonAction() {
// route to move backwards // route to move backwards
@ -77,7 +77,7 @@
this.$route this.$route
); );
}, },
arePagePrerequisitesValid() arePagePrerequisitesValid()
{ {
if(this.mainStore.order.vehicle.make){ if(this.mainStore.order.vehicle.make){
return true; return true;
@ -109,4 +109,3 @@
}, },
}; };
</script> </script>

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

@ -3,6 +3,7 @@
<div class="page-container-grouped-styles vehicle-parts"> <div class="page-container-grouped-styles vehicle-parts">
<siteHeader ref="siteHeader" cmsWidgetName="SiteHeaderWidget" /> <siteHeader ref="siteHeader" cmsWidgetName="SiteHeaderWidget" />
<vehicleBanner <vehicleBanner
class="mb-3"
ref="vehicleBanner" ref="vehicleBanner"
cmsWidgetName="VehicleBannerWidget" cmsWidgetName="VehicleBannerWidget"
:displayGenericVehicleImage="false" /> :displayGenericVehicleImage="false" />

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

@ -3,7 +3,7 @@
<siteHeader cmsWidgetName="SiteHeaderWidget" /> <siteHeader cmsWidgetName="SiteHeaderWidget" />
<div class="select-car"> <div class="select-car">
<div class="select-car-form rounded text-center"> <div class="select-car-form rounded text-center">
<vehicleBanner cmsWidgetName="VehicleBannerWidget" displayGenericVehicleImage /> <vehicleBanner cmsWidgetName="VehicleBannerWidget" class="mb-3" displayGenericVehicleImage />
<siteSubHeader <siteSubHeader
cmsWidgetName="SiteSubHeaderWidget" cmsWidgetName="SiteSubHeaderWidget"
:hasBackButton="true" :hasBackButton="true"
@ -15,7 +15,7 @@
ref="styleQuestion" ref="styleQuestion"
cmsWidgetName="VehicleStyleQuestion" /> cmsWidgetName="VehicleStyleQuestion" />
</div> </div>
<siteFooter cmsWidgetName="SiteFooterWidget" ref="siteFooter" <siteFooter cmsWidgetName="SiteFooterWidget" ref="siteFooter"
@back-clicked="backButtonAction" :isForwardButtonHidden="shouldHideForwardButton" /> @back-clicked="backButtonAction" :isForwardButtonHidden="shouldHideForwardButton" />
</div> </div>
</div> </div>
@ -65,7 +65,7 @@ export default {
]; ];
const resultMap = await settleAllPromises(promiseResultMap); const resultMap = await settleAllPromises(promiseResultMap);
const visitedVehicleDamage = useMainStore().pageData(issPageValues.VEHICLE_DAMAGE) ? true : false; const visitedVehicleDamage = useMainStore().pageData(issPageValues.VEHICLE_DAMAGE) ? true : false;
// If we have exactly one style then navigate directly to vehicle-damage // If we have exactly one style then navigate directly to vehicle-damage
@ -117,7 +117,7 @@ export default {
}, },
computed: { computed: {
backButtonAccessibleText() backButtonAccessibleText()
{ {
return this.getCmsContent(this.cmsWidgetName, "BackButtonAccessibleText") return this.getCmsContent(this.cmsWidgetName, "BackButtonAccessibleText")
} }

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

@ -3,23 +3,23 @@
<siteHeader cmsWidgetName="SiteHeaderWidget" /> <siteHeader cmsWidgetName="SiteHeaderWidget" />
<div class="select-car"> <div class="select-car">
<div class="select-car-form rounded text-center"> <div class="select-car-form rounded text-center">
<vehicleBanner cmsWidgetName="VehicleBannerWidget" :displayGenericVehicleImage="true"/> <vehicleBanner cmsWidgetName="VehicleBannerWidget" :displayGenericVehicleImage="true" class="mb-3" />
<siteSubHeader cmsWidgetName="SiteSubHeaderWidget" /> <siteSubHeader cmsWidgetName="SiteSubHeaderWidget" />
<div class="fade-on-route-transition"> <div class="fade-on-route-transition">
<yearQuestion <yearQuestion
class="fade-on-route-transition" class="fade-on-route-transition"
v-model="selectedYear" v-model="selectedYear"
ref="yearQuestion" ref="yearQuestion"
cmsWidgetName="VehicleYearQuestion" cmsWidgetName="VehicleYearQuestion"
/> />
</div> </div>
<siteFooter cmsWidgetName="SiteFooterWidget" ref="siteFooter" <siteFooter cmsWidgetName="SiteFooterWidget" ref="siteFooter"
@back-clicked="backButtonAction" :isForwardButtonHidden="shouldHideForwardButton" /> @back-clicked="backButtonAction" :isForwardButtonHidden="shouldHideForwardButton" />
</div> </div>
</div> </div>
</div> </div>
</template> </template>
<script> <script>
// Components // Components
import yearQuestion from "@/layouts/vehicle-year/year-question/year-question"; import yearQuestion from "@/layouts/vehicle-year/year-question/year-question";
@ -27,11 +27,11 @@
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 vehicleBanner from "@/iss-components/vehicle-banner/vehicle-banner"; import vehicleBanner from "@/iss-components/vehicle-banner/vehicle-banner";
// Supporting files // Supporting files
import { fetchCmsContentForPage } from "@/helpers/cms-content-helper"; import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
import { settleAllPromises } from "@/helpers/layout-helper"; import { settleAllPromises } from "@/helpers/layout-helper";
export default { export default {
name: "vehicle-year", name: "vehicle-year",
data() { data() {
@ -41,12 +41,12 @@
}; };
}, },
computed: {}, computed: {},
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 yearQuestionInitialDataPromise = yearQuestion.methods.loadInitialData(); const yearQuestionInitialDataPromise = yearQuestion.methods.loadInitialData();
// Settle promises and get results // Settle promises and get results
const promiseResultMap = [ const promiseResultMap = [
{ {
@ -58,9 +58,9 @@
promise: yearQuestionInitialDataPromise, promise: yearQuestionInitialDataPromise,
}, },
]; ];
let resultMap = await settleAllPromises(promiseResultMap); let resultMap = await settleAllPromises(promiseResultMap);
// 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);
@ -73,8 +73,8 @@
watch: { watch: {
selectedYear(year) { selectedYear(year) {
const parsedYear = parseInt(year); const parsedYear = parseInt(year);
this.mainStore.updateVehicleYear( parsedYear ); this.mainStore.updateVehicleYear( parsedYear );
this.$router.navigate( this.$router.navigate(
this.navigationScenarios.SELECTED_YEAR, this.navigationScenarios.SELECTED_YEAR,
this.$route this.$route
@ -89,7 +89,7 @@
this.$router.navigate(this.navigationScenarios.CLICKED_BACK, this.$route); this.$router.navigate(this.navigationScenarios.CLICKED_BACK, this.$route);
}, },
}, },
components: { components: {
yearQuestion, yearQuestion,
siteHeader, siteHeader,
@ -99,4 +99,3 @@
}, },
}; };
</script> </script>

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

@ -9,6 +9,7 @@
cmsWidgetName="SiteHeaderWidget" cmsWidgetName="SiteHeaderWidget"
/> />
<vehicleBanner <vehicleBanner
class="mb-3"
cmsWidgetName="VehicleBannerWidget" cmsWidgetName="VehicleBannerWidget"
:displayGenericVehicleImage="false" :displayGenericVehicleImage="false"
/> />
@ -82,7 +83,7 @@ export default {
activeVehicleLookupAlertType: null, activeVehicleLookupAlertType: null,
needToLookupVehicle: true, needToLookupVehicle: true,
vehicleFromLookup: null, vehicleFromLookup: null,
vin: null, vin: null,
}; };
}, },
provide() { provide() {
@ -130,7 +131,7 @@ export default {
this.resetActiveAlert(); this.resetActiveAlert();
// Temp solution to reset the 'disabled' style on the Continue button // Temp solution to reset the 'disabled' style on the Continue button
this.$refs.siteFooter.enableForwardAction(); this.$refs.siteFooter.enableForwardAction();
if (this.needToLookupVehicle) { if (this.needToLookupVehicle) {
const vehicleLookupResponse = await this.lookupVehicleByVin(this.vin); const vehicleLookupResponse = await this.lookupVehicleByVin(this.vin);
@ -146,29 +147,29 @@ export default {
} }
// Add vin bcs the response from the service doesn't contain vin // Add vin bcs the response from the service doesn't contain vin
this.vehicleFromLookup = Object.assign(vehicleLookupResponse.data, { vin: this.vin }); this.vehicleFromLookup = Object.assign(vehicleLookupResponse.data, { vin: this.vin });
} }
if (this.needToLookupVehicle && this.isCarIdDifferentFromTheStore) { if (this.needToLookupVehicle && this.isCarIdDifferentFromTheStore) {
this.activeVehicleLookupAlertType = vehicleLookupAlertTypes.NOT_MATCHED; this.activeVehicleLookupAlertType = vehicleLookupAlertTypes.NOT_MATCHED;
const vehicleYearMakeModel = `${this.vehicleFromLookup.year} ${this.vehicleFromLookup.make} ${this.vehicleFromLookup.model}`; const vehicleYearMakeModel = `${this.vehicleFromLookup.year} ${this.vehicleFromLookup.make} ${this.vehicleFromLookup.model}`;
this.$refs.siteFooter.updateButtonText(`Continue with ${vehicleYearMakeModel}`); this.$refs.siteFooter.updateButtonText(`Continue with ${vehicleYearMakeModel}`);
this.$refs.siteFooter.removeLoader(); this.$refs.siteFooter.removeLoader();
this.needToLookupVehicle = false; this.needToLookupVehicle = false;
return; return;
} }
let isSelectedGlassAvailableForVehicle = true; let isSelectedGlassAvailableForVehicle = true;
if (this.isCarIdDifferentFromTheStore) { if (this.isCarIdDifferentFromTheStore) {
isSelectedGlassAvailableForVehicle = isSelectedGlassAvailableForVehicle =
await isGlassAvailableForCarId(this.vehicleFromLookup.carId); await isGlassAvailableForCarId(this.vehicleFromLookup.carId);
} }
// navigate back to vehicle-damage // navigate back to vehicle-damage
if (this.isCarIdDifferentFromTheStore && !isSelectedGlassAvailableForVehicle) { if (this.isCarIdDifferentFromTheStore && !isSelectedGlassAvailableForVehicle) {
this.mainStore.updateVehicle(this.vehicleFromLookup); this.mainStore.updateVehicle(this.vehicleFromLookup);
this.$router.navigate( this.$router.navigate(
this.navigationScenarios.SELECTED_VIN_WITH_MISMATCHED_GLASS, this.navigationScenarios.SELECTED_VIN_WITH_MISMATCHED_GLASS,
@ -179,8 +180,8 @@ export default {
// navigate() doesn't stop the processing flow // navigate() doesn't stop the processing flow
return; return;
} }
this.mainStore.updateVehicle(this.vehicleFromLookup); this.mainStore.updateVehicle(this.vehicleFromLookup);
const partsOrQuestionsResponse = await this.getPartsOrQuestions(); const partsOrQuestionsResponse = await this.getPartsOrQuestions();
if (partsOrQuestionsResponse.error) { if (partsOrQuestionsResponse.error) {
@ -194,7 +195,7 @@ export default {
await this.navigateForward(partsOrQuestionsResponse.data.partsOrQuestions, this); await this.navigateForward(partsOrQuestionsResponse.data.partsOrQuestions, this);
}, },
async getPartsOrQuestions() { async getPartsOrQuestions() {
try { try {
const response = await this.mainStore.getPartsOrQuestions(); const response = await this.mainStore.getPartsOrQuestions();
return response; return response;
@ -209,15 +210,15 @@ export default {
async lookupVehicleByVin(vin) { async lookupVehicleByVin(vin) {
try { try {
return await this.mainStore.lookupVehicleByVin(vin); return await this.mainStore.lookupVehicleByVin(vin);
} }
catch (responseError) { catch (responseError) {
return { return {
error: { error: {
status: responseError.status, status: responseError.status,
}, },
}; };
} }
}, },
resetActiveAlert() { resetActiveAlert() {
this.activeVehicleLookupAlertType = null; this.activeVehicleLookupAlertType = null;
}, },

2
src/layouts/welcome-page/welcome-page.vue
View file

@ -34,7 +34,7 @@
</div> </div>
<div class="row"> <div class="row">
<div class="col"> <div class="col">
<textBlock cmsWidgetName="DamageDateEstimateWidget" typeStyle="caption" /> <textBlock cmsWidgetName="DamageDateEstimateWidget" typeStyle="caption" class="mt-2" />
</div> </div>
</div> </div>
<div class="row mt-4"> <div class="row mt-4">

4
src/styles/common-typography-styles.scss
View file

@ -25,7 +25,7 @@ h4,.h4 {
font-weight: 300; font-weight: 300;
} }
h5,.h5 { h5,.h5 {
line-height: 1.325; line-height: 1.6;
font-weight: 400; font-weight: 400;
} }
h6,.h6 { h6,.h6 {
@ -64,4 +64,4 @@ caption,
font-size: 1rem !important; font-size: 1rem !important;
line-height: 1.4; line-height: 1.4;
font-weight: 500; font-weight: 500;
} }