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:
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

View file

@ -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 {

View file

@ -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

View file

@ -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();

View file

@ -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,

View file

@ -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>

View file

@ -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() {},
},
};

View file

@ -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>

View file

@ -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;

View file

@ -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() {

View file

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

View file

@ -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>

View file

@ -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>

View file

@ -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" />

View file

@ -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")
}

View file

@ -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>

View file

@ -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;
},

View file

@ -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">

View file

@ -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;
}
}