Merge pull request #164 from Safelite/SSR-219-create-coverage-statement-page
Create CSM entries and markup for coverage statement page.
This commit is contained in:
commit
7d342213e9
18 changed files with 149 additions and 109 deletions
|
|
@ -1,6 +1,6 @@
|
|||
<template>
|
||||
<div
|
||||
class="text-block w-100 mt-2"
|
||||
class="text-block w-100"
|
||||
:class="[justifyText, typeStyle, fontWeight]"
|
||||
v-html="this.TextBlockCopy"></div>
|
||||
</template>
|
||||
|
|
@ -25,12 +25,15 @@ export default {
|
|||
<style lang="scss" scoped>
|
||||
.text-block {
|
||||
&.left {
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
&.right {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
&.center {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
&.bold {
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
<div :class="`page-container-grouped-styles questions-page`">
|
||||
<loadingModal ref="loadingModal" />
|
||||
<siteHeader cmsWidgetName="SiteHeaderWidget" />
|
||||
<vehicleBanner cmsWidgetName="VehicleBannerWidget" :displayGenericVehicleImage="false" />
|
||||
<vehicleBanner class="mb-3" cmsWidgetName="VehicleBannerWidget" :displayGenericVehicleImage="false" />
|
||||
<siteSubHeader cmsWidgetName="SiteSubHeaderWidget" />
|
||||
<div class="fade-on-route-transition sub-container make-tall">
|
||||
<alert
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<div class="vehicle_banner mb-3 text-center">
|
||||
<div class="vehicle_banner text-center">
|
||||
<img
|
||||
class="vehicle-image img-fluid"
|
||||
:src="vehicleImageToDisplay"
|
||||
|
|
@ -21,9 +21,9 @@ export default {
|
|||
computed: {
|
||||
vehicleImageToDisplay(){
|
||||
if (this.displayGenericVehicleImage){
|
||||
return this.genericVehicleImage;
|
||||
return this.genericVehicleImage;
|
||||
}
|
||||
|
||||
|
||||
const imageUrl = this.mainStore.order.vehicle.imageUrl;
|
||||
if (!imageUrl || imageUrl === "NULL"){
|
||||
return this.getUnmatchedVehicleIcon();
|
||||
|
|
|
|||
|
|
@ -8,6 +8,7 @@
|
|||
<div class="page-container-grouped-styles">
|
||||
<siteHeader cmsWidgetName="SiteHeaderWidget" ref="siteHeader" />
|
||||
<vehicleBanner
|
||||
class="mb-3"
|
||||
cmsWidgetName="VehicleBannerWidget"
|
||||
ref="vehicleBanner"
|
||||
:displayGenericVehicleImage="false" />
|
||||
|
|
@ -37,7 +38,7 @@
|
|||
v-bind:isDismissible="false" />
|
||||
|
||||
<customerQuestions ref="customerQuestions" v-model="customerQuestions" />
|
||||
|
||||
|
||||
<siteFooter
|
||||
cmsWidgetName="SiteFooterWidget"
|
||||
ref="siteFooter"
|
||||
|
|
@ -116,7 +117,7 @@ export default {
|
|||
this.$router.navigate(this.navigationScenarios.CLICKED_BACK, this.$route);
|
||||
},
|
||||
attachCustomEvents() {
|
||||
|
||||
|
||||
this.prependActionToMethod(this, this.forwardButtonAction, () => {
|
||||
this.pushEventToGA(
|
||||
this.$route.query[this.queryStrings.ISS_PAGE],
|
||||
|
|
@ -125,7 +126,7 @@ export default {
|
|||
true
|
||||
);
|
||||
});
|
||||
|
||||
|
||||
},
|
||||
|
||||
async forwardButtonAction() {
|
||||
|
|
@ -237,7 +238,7 @@ export default {
|
|||
// display vehicle changed alert on that page.
|
||||
if (
|
||||
this.isCarIdDifferent &&
|
||||
!this.isSelectedGlassAvailableForVehicle
|
||||
!this.isSelectedGlassAvailableForVehicle
|
||||
) {
|
||||
this.$router.navigate(
|
||||
this.navigationScenarios.SELECTED_VIN_WITH_MISMATCHED_GLASS,
|
||||
|
|
|
|||
|
|
@ -8,6 +8,7 @@
|
|||
<div class="page-container-grouped-styles overflow-auto">
|
||||
<siteHeader cmsWidgetName="SiteHeaderWidget" />
|
||||
<vehicleBanner
|
||||
class="mb-3"
|
||||
cmsWidgetName="VehicleBannerWidget"
|
||||
:displayGenericVehicleImage="false"
|
||||
/>
|
||||
|
|
@ -264,4 +265,4 @@ export default {
|
|||
#multiple-vehicles-alert p {
|
||||
margin-bottom: 0 !important; // Overrides extra margin-bottom on alert body text
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -11,6 +11,7 @@
|
|||
<vehicleBanner
|
||||
cmsWidgetName="VehicleBannerWidget"
|
||||
:displayGenericVehicleImage="false"
|
||||
class="mb-3"
|
||||
/>
|
||||
<siteSubHeader
|
||||
cmsWidgetName="SiteSubHeaderWidget"
|
||||
|
|
@ -50,11 +51,11 @@ export default {
|
|||
siteHeader,
|
||||
siteSubHeader,
|
||||
Form,
|
||||
vehicleBanner,
|
||||
},
|
||||
vehicleBanner,
|
||||
},
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
},
|
||||
async beforeRouteEnter(to, from, next) {
|
||||
const cmsContentPromise = fetchCmsContentForPage(to.query.issPage);
|
||||
|
||||
|
|
@ -82,7 +83,7 @@ export default {
|
|||
*/
|
||||
this.$router.navigate(this.navigationScenarios.CLICKED_BACK, this.$route);
|
||||
},
|
||||
async forwardButtonAction() {},
|
||||
async forwardButtonAction() {},
|
||||
resetDependentState() {},
|
||||
},
|
||||
};
|
||||
|
|
|
|||
|
|
@ -11,13 +11,30 @@
|
|||
<vehicleBanner
|
||||
cmsWidgetName="VehicleBannerWidget"
|
||||
:displayGenericVehicleImage="false"
|
||||
class="mb-0"
|
||||
/>
|
||||
<siteSubHeader
|
||||
cmsWidgetName="SiteSubHeaderWidget"
|
||||
/>
|
||||
<div class="fade-on-route-transition sub-container make-tall mt-5">
|
||||
<p>Placeholder for coverage-statement page</p>
|
||||
|
||||
<div class="fade-on-route-transition sub-container make-tall">
|
||||
<textBlock
|
||||
cmsWidgetName="verifyingCoverageStatement"
|
||||
typeStyle="h5"
|
||||
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
|
||||
cmsWidgetName="SiteFooterWidget"
|
||||
:isForwardActionDisabled="!meta.valid"
|
||||
|
|
@ -30,9 +47,6 @@
|
|||
</Form>
|
||||
</template>
|
||||
<script>
|
||||
// Import Supporting Files
|
||||
import { fetchCmsContentForPage } from '@/helpers/cms-content-helper';
|
||||
import { settleAllPromises } from '@/helpers/layout-helper';
|
||||
|
||||
// Import Component
|
||||
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 siteSubHeader from '@/iss-components/site-sub-header/site-sub-header.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 {
|
||||
name: 'coverage-statement',
|
||||
|
|
@ -50,11 +70,13 @@ export default {
|
|||
siteHeader,
|
||||
siteSubHeader,
|
||||
Form,
|
||||
vehicleBanner,
|
||||
},
|
||||
vehicleBanner,
|
||||
textBlock,
|
||||
modal,
|
||||
},
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
},
|
||||
async beforeRouteEnter(to, from, next) {
|
||||
const cmsContentPromise = fetchCmsContentForPage(to.query.issPage);
|
||||
|
||||
|
|
@ -82,8 +104,17 @@ export default {
|
|||
*/
|
||||
this.$router.navigate(this.navigationScenarios.CLICKED_BACK, this.$route);
|
||||
},
|
||||
async forwardButtonAction() {},
|
||||
async forwardButtonAction() {},
|
||||
resetDependentState() {},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
ol {
|
||||
margin-left: -1rem;
|
||||
li {
|
||||
margin-bottom: .5rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,11 +1,12 @@
|
|||
<template>
|
||||
<Form
|
||||
<template>
|
||||
<Form
|
||||
@submit="onSubmit"
|
||||
@invalid-submit="onInvalidSubmit"
|
||||
v-slot="{ meta }">
|
||||
<div class="page-container-grouped-styles overflow-auto">
|
||||
<siteHeader cms-widget-name="SiteHeaderWidget" />
|
||||
<vehicleBanner
|
||||
class="mb-3"
|
||||
cms-widget-name="VehicleBannerWidget"
|
||||
:display-generic-vehicle-image="false" />
|
||||
<siteSubHeader cms-widget-name="SiteSubHeaderWidget" />
|
||||
|
|
@ -29,7 +30,7 @@
|
|||
<textboxQuestion
|
||||
cmsWidgetName="LicensePlateNumberQuestionWidget"
|
||||
v-model="licensePlate"
|
||||
isRequired
|
||||
isRequired
|
||||
disableAutoFill
|
||||
id="license-plate-question-wrapper"
|
||||
inputId="license-plate-question"
|
||||
|
|
@ -97,17 +98,17 @@ export default {
|
|||
];
|
||||
|
||||
const resultMap = await settleAllPromises(promiseResultMap);
|
||||
|
||||
|
||||
// Call the "next" function to complete the transition to this page.
|
||||
next((vm) => {
|
||||
vm.setCmsContent(resultMap.cmsContent);
|
||||
vm.setCmsContent(resultMap.cmsContent);
|
||||
});
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
activeVehicleLookupAlertType: null,
|
||||
vehicleFromLookup: null,
|
||||
licensePlate: null,
|
||||
licensePlate: null,
|
||||
licenseState: null,
|
||||
displayVinNotFoundAlert: false,
|
||||
displayMatchedDifferentVehicleAlert: false,
|
||||
|
|
@ -118,7 +119,7 @@ export default {
|
|||
};
|
||||
},
|
||||
methods: {
|
||||
arePagePrerequisitesValid() {
|
||||
arePagePrerequisitesValid() {
|
||||
return this.mainStore.order.vehicle.carId !== null;
|
||||
},
|
||||
loadDefaultsFromStore() {
|
||||
|
|
@ -162,7 +163,7 @@ export default {
|
|||
this.$refs.siteFooter.disableForwardButton();
|
||||
return this.$refs.siteFooter.removeLoader();
|
||||
};
|
||||
|
||||
|
||||
// Vehicle found from VIN lookup
|
||||
const vehicleFromLookup = resultMap.vinLookupResponse.vehicle;
|
||||
|
||||
|
|
|
|||
|
|
@ -3,6 +3,7 @@
|
|||
<div class="page-container-grouped-styles overflow-auto">
|
||||
<siteHeader cmsWidgetName="SiteHeaderWidget" />
|
||||
<vehicleBanner
|
||||
class="mb-3"
|
||||
cmsWidgetName="VehicleBannerWidget"
|
||||
:displayGenericVehicleImage="false" />
|
||||
<siteSubHeader cmsWidgetName="SiteSubHeaderWidget" />
|
||||
|
|
@ -123,7 +124,7 @@ export default {
|
|||
},
|
||||
setup() {
|
||||
const mainStore = useMainStore();
|
||||
|
||||
|
||||
return { mainStore };
|
||||
},
|
||||
data() {
|
||||
|
|
@ -138,7 +139,7 @@ export default {
|
|||
selectedRearReplaceOptions: this.getRearReplaceOptionsFromStore(),
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
methods: {
|
||||
arePagePrerequisitesValid() {
|
||||
if (this.mainStore.order.vehicle.carId) {
|
||||
return true;
|
||||
|
|
@ -306,8 +307,8 @@ export default {
|
|||
return this.navigateForward();
|
||||
},
|
||||
|
||||
navigateForward() {
|
||||
if (this.mainStore.damage.isRepair) {
|
||||
navigateForward() {
|
||||
if (this.mainStore.damage.isRepair) {
|
||||
this.$router.navigate(
|
||||
this.navigationScenarios.CLICKED_FORWARD_WITH_REPAIR,
|
||||
this.$route
|
||||
|
|
@ -326,7 +327,7 @@ export default {
|
|||
this.$route
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
selectedGlassToReplace() {
|
||||
|
|
|
|||
|
|
@ -8,6 +8,7 @@
|
|||
cms-widget-name="SiteHeaderWidget"
|
||||
/>
|
||||
<VehicleBanner
|
||||
class="mb-3"
|
||||
cms-widget-name="VehicleBannerWidget"
|
||||
:display-generic-vehicle-image="false"
|
||||
/>
|
||||
|
|
|
|||
|
|
@ -3,21 +3,21 @@
|
|||
<siteHeader cmsWidgetName="SiteHeaderWidget" />
|
||||
<div class="select-car">
|
||||
<div class="select-car-form rounded text-center">
|
||||
<vehicleBanner cmsWidgetName="VehicleBannerWidget" :displayGenericVehicleImage="true"/>
|
||||
<siteSubHeader
|
||||
<vehicleBanner class="mb-3" cmsWidgetName="VehicleBannerWidget" :displayGenericVehicleImage="true"/>
|
||||
<siteSubHeader
|
||||
cmsWidgetName="SiteSubHeaderWidget"
|
||||
:hasBackButton="true"
|
||||
@click-event="backButtonAction"
|
||||
/>
|
||||
<div class="fade-on-route-transition">
|
||||
<makeQuestion
|
||||
<makeQuestion
|
||||
class="fade-on-route-transition"
|
||||
v-model="selectedMake"
|
||||
ref="makeQuestion"
|
||||
cmsWidgetName="VehicleMakeQuestion"
|
||||
v-model="selectedMake"
|
||||
ref="makeQuestion"
|
||||
cmsWidgetName="VehicleMakeQuestion"
|
||||
/>
|
||||
</div>
|
||||
<siteFooter cmsWidgetName="SiteFooterWidget" ref="siteFooter"
|
||||
<siteFooter cmsWidgetName="SiteFooterWidget" ref="siteFooter"
|
||||
@back-clicked="backButtonAction" :isForwardButtonHidden="shouldHideForwardButton" />
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -45,11 +45,11 @@
|
|||
};
|
||||
},
|
||||
|
||||
async beforeRouteEnter(to, from, next) {
|
||||
async beforeRouteEnter(to, from, next) {
|
||||
// Call APIs
|
||||
const cmsContentPromise = fetchCmsContentForPage(to.query.issPage);
|
||||
const makeQuestionInitialDataPromise = makeQuestion.methods.loadInitialData();
|
||||
|
||||
|
||||
// Settle promises and get results
|
||||
const promiseResultMap = [
|
||||
{
|
||||
|
|
@ -61,9 +61,9 @@
|
|||
promise: makeQuestionInitialDataPromise,
|
||||
},
|
||||
];
|
||||
|
||||
|
||||
let resultMap = await settleAllPromises(promiseResultMap);
|
||||
|
||||
|
||||
// Call the "next" function to complete the transition to this page.
|
||||
next((vm) => {
|
||||
vm.setCmsContent(resultMap.cmsContent);
|
||||
|
|
@ -95,12 +95,12 @@
|
|||
},
|
||||
watch: {
|
||||
selectedMake(make) {
|
||||
this.mainStore.updateVehicleMake( make );
|
||||
this.mainStore.updateVehicleMake( make );
|
||||
this.$router.navigate(
|
||||
this.navigationScenarios.SELECTED_MAKE,
|
||||
this.$route
|
||||
);
|
||||
},
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
<siteHeader cmsWidgetName="SiteHeaderWidget" />
|
||||
<div class="select-car">
|
||||
<div class="select-car-form rounded text-center">
|
||||
<vehicleBanner cmsWidgetName="VehicleBannerWidget" displayGenericVehicleImage />
|
||||
<vehicleBanner class="mb-3" cmsWidgetName="VehicleBannerWidget" displayGenericVehicleImage />
|
||||
<siteSubHeader
|
||||
cmsWidgetName="SiteSubHeaderWidget"
|
||||
:hasBackButton="true"
|
||||
|
|
@ -13,13 +13,13 @@
|
|||
<div class="fade-on-route-transition">
|
||||
<modelQuestion v-model="selectedModel" ref="modelQuestion" cmsWidgetName="VehicleModelQuestion" />
|
||||
</div>
|
||||
<siteFooter cmsWidgetName="SiteFooterWidget" ref="siteFooter"
|
||||
<siteFooter cmsWidgetName="SiteFooterWidget" ref="siteFooter"
|
||||
@back-clicked="backButtonAction" :isForwardButtonHidden="shouldHideForwardButton" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
<script>
|
||||
// Components
|
||||
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 vehicleBanner from "@/iss-components/vehicle-banner/vehicle-banner";
|
||||
import siteFooter from "@/iss-components/site-footer/site-footer";
|
||||
|
||||
|
||||
// Supporting files
|
||||
import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
|
||||
import { settleAllPromises } from "@/helpers/layout-helper";
|
||||
|
||||
|
||||
export default {
|
||||
name: "vehicle-model",
|
||||
data() {
|
||||
|
|
@ -45,7 +45,7 @@
|
|||
const cmsContentPromise = fetchCmsContentForPage(to.query.issPage);
|
||||
const modelQuestionInitialDataPromise =
|
||||
modelQuestion.methods.loadInitialData();
|
||||
|
||||
|
||||
// Settle promises and get results
|
||||
const promiseResultMap = [
|
||||
{
|
||||
|
|
@ -57,9 +57,9 @@
|
|||
promise: modelQuestionInitialDataPromise,
|
||||
},
|
||||
];
|
||||
|
||||
|
||||
const resultMap = await settleAllPromises(promiseResultMap);
|
||||
|
||||
|
||||
// Call the "next" function to complete the transition to this page.
|
||||
next((vm) => {
|
||||
vm.setCmsContent(resultMap.cmsContent);
|
||||
|
|
@ -68,7 +68,7 @@
|
|||
);
|
||||
});
|
||||
},
|
||||
|
||||
|
||||
methods: {
|
||||
backButtonAction() {
|
||||
// route to move backwards
|
||||
|
|
@ -77,7 +77,7 @@
|
|||
this.$route
|
||||
);
|
||||
},
|
||||
arePagePrerequisitesValid()
|
||||
arePagePrerequisitesValid()
|
||||
{
|
||||
if(this.mainStore.order.vehicle.make){
|
||||
return true;
|
||||
|
|
@ -109,4 +109,3 @@
|
|||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
|
|
@ -3,6 +3,7 @@
|
|||
<div class="page-container-grouped-styles vehicle-parts">
|
||||
<siteHeader ref="siteHeader" cmsWidgetName="SiteHeaderWidget" />
|
||||
<vehicleBanner
|
||||
class="mb-3"
|
||||
ref="vehicleBanner"
|
||||
cmsWidgetName="VehicleBannerWidget"
|
||||
:displayGenericVehicleImage="false" />
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
<siteHeader cmsWidgetName="SiteHeaderWidget" />
|
||||
<div class="select-car">
|
||||
<div class="select-car-form rounded text-center">
|
||||
<vehicleBanner cmsWidgetName="VehicleBannerWidget" displayGenericVehicleImage />
|
||||
<vehicleBanner cmsWidgetName="VehicleBannerWidget" class="mb-3" displayGenericVehicleImage />
|
||||
<siteSubHeader
|
||||
cmsWidgetName="SiteSubHeaderWidget"
|
||||
:hasBackButton="true"
|
||||
|
|
@ -15,7 +15,7 @@
|
|||
ref="styleQuestion"
|
||||
cmsWidgetName="VehicleStyleQuestion" />
|
||||
</div>
|
||||
<siteFooter cmsWidgetName="SiteFooterWidget" ref="siteFooter"
|
||||
<siteFooter cmsWidgetName="SiteFooterWidget" ref="siteFooter"
|
||||
@back-clicked="backButtonAction" :isForwardButtonHidden="shouldHideForwardButton" />
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -65,7 +65,7 @@ export default {
|
|||
];
|
||||
|
||||
const resultMap = await settleAllPromises(promiseResultMap);
|
||||
|
||||
|
||||
const visitedVehicleDamage = useMainStore().pageData(issPageValues.VEHICLE_DAMAGE) ? true : false;
|
||||
|
||||
// If we have exactly one style then navigate directly to vehicle-damage
|
||||
|
|
@ -117,7 +117,7 @@ export default {
|
|||
},
|
||||
|
||||
computed: {
|
||||
backButtonAccessibleText()
|
||||
backButtonAccessibleText()
|
||||
{
|
||||
return this.getCmsContent(this.cmsWidgetName, "BackButtonAccessibleText")
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3,23 +3,23 @@
|
|||
<siteHeader cmsWidgetName="SiteHeaderWidget" />
|
||||
<div class="select-car">
|
||||
<div class="select-car-form rounded text-center">
|
||||
<vehicleBanner cmsWidgetName="VehicleBannerWidget" :displayGenericVehicleImage="true"/>
|
||||
<vehicleBanner cmsWidgetName="VehicleBannerWidget" :displayGenericVehicleImage="true" class="mb-3" />
|
||||
<siteSubHeader cmsWidgetName="SiteSubHeaderWidget" />
|
||||
<div class="fade-on-route-transition">
|
||||
<yearQuestion
|
||||
<yearQuestion
|
||||
class="fade-on-route-transition"
|
||||
v-model="selectedYear"
|
||||
ref="yearQuestion"
|
||||
cmsWidgetName="VehicleYearQuestion"
|
||||
v-model="selectedYear"
|
||||
ref="yearQuestion"
|
||||
cmsWidgetName="VehicleYearQuestion"
|
||||
/>
|
||||
</div>
|
||||
<siteFooter cmsWidgetName="SiteFooterWidget" ref="siteFooter"
|
||||
<siteFooter cmsWidgetName="SiteFooterWidget" ref="siteFooter"
|
||||
@back-clicked="backButtonAction" :isForwardButtonHidden="shouldHideForwardButton" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
<script>
|
||||
// Components
|
||||
import yearQuestion from "@/layouts/vehicle-year/year-question/year-question";
|
||||
|
|
@ -27,11 +27,11 @@
|
|||
import siteFooter from "@/iss-components/site-footer/site-footer";
|
||||
import siteSubHeader from "@/iss-components/site-sub-header/site-sub-header";
|
||||
import vehicleBanner from "@/iss-components/vehicle-banner/vehicle-banner";
|
||||
|
||||
|
||||
// Supporting files
|
||||
import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
|
||||
import { settleAllPromises } from "@/helpers/layout-helper";
|
||||
|
||||
|
||||
export default {
|
||||
name: "vehicle-year",
|
||||
data() {
|
||||
|
|
@ -41,12 +41,12 @@
|
|||
};
|
||||
},
|
||||
computed: {},
|
||||
|
||||
|
||||
async beforeRouteEnter(to, from, next) {
|
||||
// Call APIs
|
||||
const cmsContentPromise = fetchCmsContentForPage(to.query.issPage);
|
||||
const yearQuestionInitialDataPromise = yearQuestion.methods.loadInitialData();
|
||||
|
||||
|
||||
// Settle promises and get results
|
||||
const promiseResultMap = [
|
||||
{
|
||||
|
|
@ -58,9 +58,9 @@
|
|||
promise: yearQuestionInitialDataPromise,
|
||||
},
|
||||
];
|
||||
|
||||
|
||||
let resultMap = await settleAllPromises(promiseResultMap);
|
||||
|
||||
|
||||
// Call the "next" function to complete the transition to this page.
|
||||
next((vm) => {
|
||||
vm.setCmsContent(resultMap.cmsContent);
|
||||
|
|
@ -73,8 +73,8 @@
|
|||
watch: {
|
||||
selectedYear(year) {
|
||||
const parsedYear = parseInt(year);
|
||||
this.mainStore.updateVehicleYear( parsedYear );
|
||||
|
||||
this.mainStore.updateVehicleYear( parsedYear );
|
||||
|
||||
this.$router.navigate(
|
||||
this.navigationScenarios.SELECTED_YEAR,
|
||||
this.$route
|
||||
|
|
@ -89,7 +89,7 @@
|
|||
this.$router.navigate(this.navigationScenarios.CLICKED_BACK, this.$route);
|
||||
},
|
||||
},
|
||||
|
||||
|
||||
components: {
|
||||
yearQuestion,
|
||||
siteHeader,
|
||||
|
|
@ -99,4 +99,3 @@
|
|||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
|
|
@ -9,6 +9,7 @@
|
|||
cmsWidgetName="SiteHeaderWidget"
|
||||
/>
|
||||
<vehicleBanner
|
||||
class="mb-3"
|
||||
cmsWidgetName="VehicleBannerWidget"
|
||||
:displayGenericVehicleImage="false"
|
||||
/>
|
||||
|
|
@ -82,7 +83,7 @@ export default {
|
|||
activeVehicleLookupAlertType: null,
|
||||
needToLookupVehicle: true,
|
||||
vehicleFromLookup: null,
|
||||
vin: null,
|
||||
vin: null,
|
||||
};
|
||||
},
|
||||
provide() {
|
||||
|
|
@ -130,7 +131,7 @@ export default {
|
|||
this.resetActiveAlert();
|
||||
// Temp solution to reset the 'disabled' style on the Continue button
|
||||
this.$refs.siteFooter.enableForwardAction();
|
||||
|
||||
|
||||
if (this.needToLookupVehicle) {
|
||||
const vehicleLookupResponse = await this.lookupVehicleByVin(this.vin);
|
||||
|
||||
|
|
@ -146,29 +147,29 @@ export default {
|
|||
}
|
||||
|
||||
// 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) {
|
||||
this.activeVehicleLookupAlertType = vehicleLookupAlertTypes.NOT_MATCHED;
|
||||
|
||||
if (this.needToLookupVehicle && this.isCarIdDifferentFromTheStore) {
|
||||
this.activeVehicleLookupAlertType = vehicleLookupAlertTypes.NOT_MATCHED;
|
||||
|
||||
const vehicleYearMakeModel = `${this.vehicleFromLookup.year} ${this.vehicleFromLookup.make} ${this.vehicleFromLookup.model}`;
|
||||
this.$refs.siteFooter.updateButtonText(`Continue with ${vehicleYearMakeModel}`);
|
||||
this.$refs.siteFooter.removeLoader();
|
||||
|
||||
|
||||
this.needToLookupVehicle = false;
|
||||
|
||||
return;
|
||||
}
|
||||
|
||||
let isSelectedGlassAvailableForVehicle = true;
|
||||
if (this.isCarIdDifferentFromTheStore) {
|
||||
isSelectedGlassAvailableForVehicle =
|
||||
await isGlassAvailableForCarId(this.vehicleFromLookup.carId);
|
||||
}
|
||||
|
||||
let isSelectedGlassAvailableForVehicle = true;
|
||||
if (this.isCarIdDifferentFromTheStore) {
|
||||
isSelectedGlassAvailableForVehicle =
|
||||
await isGlassAvailableForCarId(this.vehicleFromLookup.carId);
|
||||
}
|
||||
|
||||
// navigate back to vehicle-damage
|
||||
if (this.isCarIdDifferentFromTheStore && !isSelectedGlassAvailableForVehicle) {
|
||||
if (this.isCarIdDifferentFromTheStore && !isSelectedGlassAvailableForVehicle) {
|
||||
this.mainStore.updateVehicle(this.vehicleFromLookup);
|
||||
this.$router.navigate(
|
||||
this.navigationScenarios.SELECTED_VIN_WITH_MISMATCHED_GLASS,
|
||||
|
|
@ -179,8 +180,8 @@ export default {
|
|||
|
||||
// navigate() doesn't stop the processing flow
|
||||
return;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
this.mainStore.updateVehicle(this.vehicleFromLookup);
|
||||
const partsOrQuestionsResponse = await this.getPartsOrQuestions();
|
||||
if (partsOrQuestionsResponse.error) {
|
||||
|
|
@ -194,7 +195,7 @@ export default {
|
|||
await this.navigateForward(partsOrQuestionsResponse.data.partsOrQuestions, this);
|
||||
},
|
||||
async getPartsOrQuestions() {
|
||||
try {
|
||||
try {
|
||||
const response = await this.mainStore.getPartsOrQuestions();
|
||||
|
||||
return response;
|
||||
|
|
@ -209,15 +210,15 @@ export default {
|
|||
async lookupVehicleByVin(vin) {
|
||||
try {
|
||||
return await this.mainStore.lookupVehicleByVin(vin);
|
||||
}
|
||||
catch (responseError) {
|
||||
}
|
||||
catch (responseError) {
|
||||
return {
|
||||
error: {
|
||||
status: responseError.status,
|
||||
},
|
||||
};
|
||||
}
|
||||
},
|
||||
},
|
||||
resetActiveAlert() {
|
||||
this.activeVehicleLookupAlertType = null;
|
||||
},
|
||||
|
|
|
|||
|
|
@ -34,7 +34,7 @@
|
|||
</div>
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<textBlock cmsWidgetName="DamageDateEstimateWidget" typeStyle="caption" />
|
||||
<textBlock cmsWidgetName="DamageDateEstimateWidget" typeStyle="caption" class="mt-2" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="row mt-4">
|
||||
|
|
|
|||
|
|
@ -25,7 +25,7 @@ h4,.h4 {
|
|||
font-weight: 300;
|
||||
}
|
||||
h5,.h5 {
|
||||
line-height: 1.325;
|
||||
line-height: 1.6;
|
||||
font-weight: 400;
|
||||
}
|
||||
h6,.h6 {
|
||||
|
|
@ -64,4 +64,4 @@ caption,
|
|||
font-size: 1rem !important;
|
||||
line-height: 1.4;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue