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

Create CSM entries and markup for coverage statement page.

Browse source 
Remove hard-coded margin-bottom from vehicleBanner and replace it at the component level.

"Recalibration" link at bottom of page is for testing only and will be removed when textLink functionality is added to the CMS.
This commit is contained in:
Bryan Mauger 2023-02-13 15:40:52 -05:00
parent 36b1e9e19f
commit def94c9275
18 changed files with 150 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() {},
}, },
}; };

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

@ -11,13 +11,31 @@
<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"
typeStyle="h6"
class="mt-4"
/>
<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 +48,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 +56,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 +71,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 +105,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;
} }