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

WIP more pages updated to non-sticky header.

Browse source
This commit is contained in:
Bryan Mauger 2023-04-10 13:27:34 -04:00
parent 1f51638720
commit 4a3c61da1b
15 changed files with 1129 additions and 1062 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/iss-components/site-header/menu-modal/menu-modal.vue
View file

@ -78,7 +78,7 @@ export default {
show() { show() {
this.currentFooterAndHeaderHeight = this.getFooterInfoBoxHeight() + 72; this.currentFooterAndHeaderHeight = this.getFooterInfoBoxHeight() + 72;
this.isActive = true; this.isActive = true;
document.querySelector('.fade-on-route-transition','.page-container-grouped-styles').scrollTo({ document.querySelector('.page-container-grouped-styles').scrollTo({
top: 0, behavior: 'instant' top: 0, behavior: 'instant'
}); });
}, },

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

@ -1,60 +1,65 @@
<template> <template>
<Form <Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm" v-slot="{ meta }" >
@submit="onSubmit"
@invalid-submit="onInvalidSubmit"
ref="theForm"
v-slot="{ meta }"
autocomplete="off">
<div class="page-container-grouped-styles"> <div class="page-container-grouped-styles">
<siteHeader cmsWidgetName="SiteHeaderWidget" ref="siteHeader" /> <div class="fade-on-route-transition position-relative">
<div class="fade-on-route-transition sub-container overflow-scroll px-5"> <siteHeader cmsWidgetName="SiteHeaderWidget" />
<vehicleBanner <div class="select-car">
class="mb-3" <div class="container-fluid pb-2">
cmsWidgetName="VehicleBannerWidget" <div class="row px-3">
ref="vehicleBanner" <div class="col">
:displayGenericVehicleImage="false" /> <div class="select-car-form rounded">
<siteSubHeader cmsWidgetName="SiteSubHeaderWidget" ref="siteSubHeader" /> <vehicleBanner
<alert class="mb-3"
ref="alertVinNotFound" cmsWidgetName="VehicleBannerWidget"
v-if="displayVinNotFoundAlert" ref="vehicleBanner"
class="mb-4 mt-4" :displayGenericVehicleImage="false" />
cmsWidgetName="AlertVinNotFoundWidget" <siteSubHeader cmsWidgetName="SiteSubHeaderWidget" ref="siteSubHeader" />
alertClass="alert-danger" <alert
v-bind:isDismissible="false" /> ref="alertVinNotFound"
<alert v-if="displayVinNotFoundAlert"
ref="alertMatchedDifferentVehicle" class="mb-4 mt-4"
v-if="displayMatchedDifferentVehicleAlert" cmsWidgetName="AlertVinNotFoundWidget"
class="mb-4 mt-4" alertClass="alert-danger"
:manualHeadline="AlertMatchedDifferentVehicleHeader" v-bind:isDismissible="false" />
:manualCopy="AlertMatchedDifferentVehicleBody" <alert
alertClass="alert-warning" ref="alertMatchedDifferentVehicle"
v-bind:isDismissible="false" /> v-if="displayMatchedDifferentVehicleAlert"
<alert class="mb-4 mt-4"
ref="alertMatchedTwoIdenticalYMMVehicle" :manualHeadline="AlertMatchedDifferentVehicleHeader"
v-if="displayMatchedTwoIdenticalYMMVehicleAlert" :manualCopy="AlertMatchedDifferentVehicleBody"
class="mb-4 mt-4" alertClass="alert-warning"
cmsWidgetName="AlertMatchedTwoIdenticalYMMVehicleWidget" v-bind:isDismissible="false" />
:manualHeadline="AlertMatchedTwoIdenticalYMMVehicleHeader" <alert
:manualCopy="AlertMatchedTwoIdenticalYMMVehicleBody" ref="alertMatchedTwoIdenticalYMMVehicle"
alertClass="alert-warning" v-if="displayMatchedTwoIdenticalYMMVehicleAlert"
v-bind:isDismissible="false" /> class="mb-4 mt-4"
<alert cmsWidgetName="AlertMatchedTwoIdenticalYMMVehicleWidget"
ref="alertVinLookupsByHomeAddressNotAllowed" :manualHeadline="AlertMatchedTwoIdenticalYMMVehicleHeader"
v-if="displayVinLookupByHomeAddressNotAllowedAlert" :manualCopy="AlertMatchedTwoIdenticalYMMVehicleBody"
class="mb-4 mt-4" alertClass="alert-warning"
cmsWidgetName="AlertVinLookupsByHomeAddressNotAllowedWidget" v-bind:isDismissible="false" />
alertClass="alert-danger" <alert
v-bind:isDismissible="false" /> ref="alertVinLookupsByHomeAddressNotAllowed"
v-if="displayVinLookupByHomeAddressNotAllowedAlert"
class="mb-4 mt-4"
cmsWidgetName="AlertVinLookupsByHomeAddressNotAllowedWidget"
alertClass="alert-danger"
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"
:isDisabled="!meta.valid" :isDisabled="!meta.valid"
@ForwardClicked="forwardButtonAction" @ForwardClicked="forwardButtonAction"
@back-clicked="backButtonAction" @back-clicked="backButtonAction"
:isForwardActionDisabled="!meta.valid" /> :isForwardActionDisabled="!meta.valid" />
</div>
</div>
</div>
</div>
</div>
</div> </div>
</div> </div>
</Form> </Form>
@ -147,211 +152,218 @@ export default {
let vehicleInfoToCommit = {}; let vehicleInfoToCommit = {};
const vinLookupResponse = useMainStore().lookupVinByAddress ({ const vinLookupResponse = useMainStore().lookupVinByAddress ({
licenseLastName: this.customerQuestions.lastName, licenseLastName: this.customerQuestions.lastName,
licenseStreetAddress: this.customerQuestions.addressQuestions.streetAddress, licenseStreetAddress: this.customerQuestions.addressQuestions.streetAddress,
licenseZip: this.customerQuestions.addressQuestions.zipCode, licenseZip: this.customerQuestions.addressQuestions.zipCode,
licenseState: this.customerQuestions.addressQuestions.state, licenseState: this.customerQuestions.addressQuestions.state,
}
);
// Settle promises and get results
const promiseResultMap = [
{
resultKey: "vinLookupResponse",
promise: vinLookupResponse,
}
];
const resultMap = await settleAllPromises(promiseResultMap);
// If VIN Lookup by address is forbidden by State Restrictions then show an alert
if (!resultMap.vinLookupResponse.isStatePermissible) {
// State Restrictions forbid lookup by address
this.displayVinLookupByHomeAddressNotAllowedAlert = true;
this.$refs.siteFooter.disableForwardButton();
return this.$refs.siteFooter.removeLoader();
} }
);
const carsFound = resultMap.vinLookupResponse.vinVehicles; // Settle promises and get results
const promiseResultMap = [
// Handle cases for different amounts of VINS found for the address. {
if (carsFound.length == 1) { resultKey: "vinLookupResponse",
// Single VIN found promise: vinLookupResponse,
const carFound = carsFound[0].vehicle;
this.isCarIdDifferent = carFound.carId !== useMainStore().order.vehicle.carId;
if (this.isCarIdDifferent && carFound.carId !== this.previouslyEnteredCarId) {
// Display Alert
this.previouslyEnteredCarId = carFound.carId;
this.customAlertData.vehicleInfo = carFound;
if(this.isTwoIdenticalYMMVehicleFound){
this.displayMatchedTwoIdenticalYMMVehicleAlert = true;
this.forwardButtonCarStyle= carFound.style;
}
else{
this.displayMatchedDifferentVehicleAlert = true;
}
this.isSelectedGlassAvailableForVehicle = await isGlassAvailableForCarId(
carFound.carId
);
// Update button "Continue with..."
this.$refs.siteFooter.updateButtonText(
`Continue with ${carFound.year} ${carFound.make} ${carFound.model} ${this.forwardButtonCarStyle}`
);
return this.$refs.siteFooter.removeLoader();
}
// update data
vehicleInfoToCommit = Object.assign(carFound, { vin: carsFound[0].vin });
} else if (carsFound.length > 1) {
// If multiple cars were found and one and only one of them matches the carId entered, save the vehicle info
const matchingCars = carsFound.filter(
(vin) => vin.vehicle.carId === this.mainStore.order.vehicle.carId
);
if (matchingCars.length === 1) {
vehicleInfoToCommit = Object.assign(matchingCars[0].vehicle, {
vin: matchingCars[0].vin,
});
}
} else {
// No VINS found.
this.displayVinNotFoundAlert = true;
this.$refs.siteFooter.disableForwardButton();
return this.$refs.siteFooter.removeLoader();
} }
];
// Save vehicle, customer, service and registration information const resultMap = await settleAllPromises(promiseResultMap);
await useMainStore().saveRegistrationAddressLookup( // If VIN Lookup by address is forbidden by State Restrictions then show an alert
{ if (!resultMap.vinLookupResponse.isStatePermissible) {
isSelectedGlassAvailableForVehicle: this.isSelectedGlassAvailableForVehicle, // State Restrictions forbid lookup by address
vehicleInfo: this.displayVinLookupByHomeAddressNotAllowedAlert = true;
Object.keys(vehicleInfoToCommit).length === 0 this.$refs.siteFooter.disableForwardButton();
? useMainStore().order.vehicle return this.$refs.siteFooter.removeLoader();
: vehicleInfoToCommit,
registrationInfo: {
firstName: this.customerQuestions.firstName,
lastName: this.customerQuestions.lastName,
address: this.customerQuestions.addressQuestions.streetAddress,
city: this.customerQuestions.addressQuestions.city,
state: this.customerQuestions.addressQuestions.state,
zipCode: this.customerQuestions.addressQuestions.zipCode,
},
},
false
);
return await this.navigateForward(carsFound);
},
async navigateForward(carsFound) {
// Match vehicles found to vehicles in state.
const matchingCars = carsFound.filter(
(car) => car.vehicle.carId === useMainStore().order.vehicle.carId
);
// If a different vehicle is found than the one entered and the selected glass is not available for that vehicle then navigate back to "vehicle-damage"
// display vehicle changed alert on that page.
if (
this.isCarIdDifferent &&
!this.isSelectedGlassAvailableForVehicle
) {
this.$router.navigate(
this.navigationScenarios.SELECTED_VIN_WITH_MISMATCHED_GLASS,
this.$route,
{},
{ [routerParams.DISPLAY_VEHICLE_CHANGE_ALERT]: true }
);
} else if (matchingCars.length === 1) {
await this.navigateForwardWithSingleCarMatch();
} else {
this.$router.navigate(
this.navigationScenarios.CLICKED_FORWARD_WITH_MULTIPLE_VEHICLES,
this.$route,
{},
{},
carsFound
);
}
},
resetWarningsAndErrors() {
this.displayVinNotFoundAlert = false;
this.displayMatchedDifferentVehicleAlert = false;
this.displayVinLookupByHomeAddressNotAllowedAlert = false;
this.$refs.siteFooter.enableForwardAction();
},
},
mounted() {
this.attachCustomEvents();
},
computed: {
AlertMatchedDifferentVehicleHeader() {
return this.getCmsContent(
"AlertMatchedDifferentVehicleWidget",
"HeadlineText"
).replaceAll("{custom:damage}", getDamageString());
},
AlertMatchedDifferentVehicleBody() {
const vinYmmFound = `${this.customAlertData?.vehicleInfo?.year} ${this.customAlertData?.vehicleInfo?.make} ${this.customAlertData?.vehicleInfo?.model}`;
const vinYmmExpected = `${this.mainStore.order.vehicle.year} ${this.mainStore.order.vehicle.make} ${this.mainStore.order.vehicle.model}`;
return this.getCmsContent("AlertMatchedDifferentVehicleWidget", "BodyText")
.replaceAll("{custom:damage}", getDamageString())
.replaceAll("{custom:vinYmmFound}", vinYmmFound)
.replaceAll("{custom:vinYmmExpected}", vinYmmExpected);
},
AlertMatchedTwoIdenticalYMMVehicleHeader() {
return this.getCmsContent(
"AlertMatchedTwoIdenticalYMMVehicleWidget",
"HeadlineText"
).replaceAll("{custom:damage}", getDamageString());
},
AlertMatchedTwoIdenticalYMMVehicleBody() {
const vinYmmsFound = `${this.customAlertData?.vehicleInfo?.year} ${this.customAlertData?.vehicleInfo?.make} ${this.customAlertData?.vehicleInfo?.model} ${this.customAlertData?.vehicleInfo?.style}`;
const vinYmmsExpected = `${this.mainStore.order.vehicle.year} ${this.mainStore.order.vehicle.make} ${this.mainStore.order.vehicle.model} ${this.mainStore.order.vehicle.style}`;
return this.getCmsContent("AlertMatchedTwoIdenticalYMMVehicleWidget", "BodyText")
.replaceAll("{custom:damage}", getDamageString())
.replaceAll("{custom:vinYmmsFound}", vinYmmsFound)
.replaceAll("{custom:vinYmmsExpected}", vinYmmsExpected);
},
isTwoIdenticalYMMVehicleFound(){
const vinYmmFound = `${this.customAlertData?.vehicleInfo?.year} ${this.customAlertData?.vehicleInfo?.make} ${this.customAlertData?.vehicleInfo?.model}`;
const vinYmmExpected = `${this.mainStore.order.vehicle.year} ${this.mainStore.order.vehicle.make} ${this.mainStore.order.vehicle.model}`;
return(vinYmmFound.toLowerCase()==vinYmmExpected.toLowerCase());
} }
},
watch: { const carsFound = resultMap.vinLookupResponse.vinVehicles;
customerQuestions: {
handler(newValue) { // Handle cases for different amounts of VINS found for the address.
// if they modify one of the lookup fields (address, city, state, zipCode, or lastName), then modify the button text back to "Get my personalized quote" if (carsFound.length == 1) {
// Single VIN found
const carFound = carsFound[0].vehicle;
this.isCarIdDifferent = carFound.carId !== useMainStore().order.vehicle.carId;
if (this.isCarIdDifferent && carFound.carId !== this.previouslyEnteredCarId) {
// Display Alert
this.previouslyEnteredCarId = carFound.carId;
this.customAlertData.vehicleInfo = carFound;
if(this.isTwoIdenticalYMMVehicleFound){
this.displayMatchedTwoIdenticalYMMVehicleAlert = true;
this.forwardButtonCarStyle= carFound.style;
}
else{
this.displayMatchedDifferentVehicleAlert = true;
}
this.isSelectedGlassAvailableForVehicle = await isGlassAvailableForCarId(
carFound.carId
);
// Update button "Continue with..."
this.$refs.siteFooter.updateButtonText( this.$refs.siteFooter.updateButtonText(
this.getCmsContent("siteFooterWidget", "ForwardButtonText") `Continue with ${carFound.year} ${carFound.make} ${carFound.model} ${this.forwardButtonCarStyle}`
); );
this.resetWarningsAndErrors(); return this.$refs.siteFooter.removeLoader();
}
// update data
vehicleInfoToCommit = Object.assign(carFound, { vin: carsFound[0].vin });
} else if (carsFound.length > 1) {
// If multiple cars were found and one and only one of them matches the carId entered, save the vehicle info
const matchingCars = carsFound.filter(
(vin) => vin.vehicle.carId === this.mainStore.order.vehicle.carId
);
if (matchingCars.length === 1) {
vehicleInfoToCommit = Object.assign(matchingCars[0].vehicle, {
vin: matchingCars[0].vin,
});
}
} else {
// No VINS found.
this.displayVinNotFoundAlert = true;
this.$refs.siteFooter.disableForwardButton();
return this.$refs.siteFooter.removeLoader();
}
// Save vehicle, customer, service and registration information
await useMainStore().saveRegistrationAddressLookup(
{
isSelectedGlassAvailableForVehicle: this.isSelectedGlassAvailableForVehicle,
vehicleInfo:
Object.keys(vehicleInfoToCommit).length === 0
? useMainStore().order.vehicle
: vehicleInfoToCommit,
registrationInfo: {
firstName: this.customerQuestions.firstName,
lastName: this.customerQuestions.lastName,
address: this.customerQuestions.addressQuestions.streetAddress,
city: this.customerQuestions.addressQuestions.city,
state: this.customerQuestions.addressQuestions.state,
zipCode: this.customerQuestions.addressQuestions.zipCode,
},
}, },
deep: true, false
);
return await this.navigateForward(carsFound);
},
async navigateForward(carsFound) {
// Match vehicles found to vehicles in state.
const matchingCars = carsFound.filter(
(car) => car.vehicle.carId === useMainStore().order.vehicle.carId
);
// If a different vehicle is found than the one entered and the selected glass is not available for that vehicle then navigate back to "vehicle-damage"
// display vehicle changed alert on that page.
if (
this.isCarIdDifferent &&
!this.isSelectedGlassAvailableForVehicle
) {
this.$router.navigate(
this.navigationScenarios.SELECTED_VIN_WITH_MISMATCHED_GLASS,
this.$route,
{},
{ [routerParams.DISPLAY_VEHICLE_CHANGE_ALERT]: true }
);
} else if (matchingCars.length === 1) {
await this.navigateForwardWithSingleCarMatch();
} else {
this.$router.navigate(
this.navigationScenarios.CLICKED_FORWARD_WITH_MULTIPLE_VEHICLES,
this.$route,
{},
{},
carsFound
);
} }
}, },
components: { resetWarningsAndErrors() {
siteHeader, this.displayVinNotFoundAlert = false;
siteFooter, this.displayMatchedDifferentVehicleAlert = false;
vehicleBanner, this.displayVinLookupByHomeAddressNotAllowedAlert = false;
siteSubHeader, this.$refs.siteFooter.enableForwardAction();
customerQuestions,
textboxQuestion,
alert,
Form,
}, },
},
mounted() {
this.attachCustomEvents();
},
computed: {
AlertMatchedDifferentVehicleHeader() {
return this.getCmsContent(
"AlertMatchedDifferentVehicleWidget",
"HeadlineText"
).replaceAll("{custom:damage}", getDamageString());
},
AlertMatchedDifferentVehicleBody() {
const vinYmmFound = `${this.customAlertData?.vehicleInfo?.year} ${this.customAlertData?.vehicleInfo?.make} ${this.customAlertData?.vehicleInfo?.model}`;
const vinYmmExpected = `${this.mainStore.order.vehicle.year} ${this.mainStore.order.vehicle.make} ${this.mainStore.order.vehicle.model}`;
return this.getCmsContent("AlertMatchedDifferentVehicleWidget", "BodyText")
.replaceAll("{custom:damage}", getDamageString())
.replaceAll("{custom:vinYmmFound}", vinYmmFound)
.replaceAll("{custom:vinYmmExpected}", vinYmmExpected);
},
AlertMatchedTwoIdenticalYMMVehicleHeader() {
return this.getCmsContent(
"AlertMatchedTwoIdenticalYMMVehicleWidget",
"HeadlineText"
).replaceAll("{custom:damage}", getDamageString());
},
AlertMatchedTwoIdenticalYMMVehicleBody() {
const vinYmmsFound = `${this.customAlertData?.vehicleInfo?.year} ${this.customAlertData?.vehicleInfo?.make} ${this.customAlertData?.vehicleInfo?.model} ${this.customAlertData?.vehicleInfo?.style}`;
const vinYmmsExpected = `${this.mainStore.order.vehicle.year} ${this.mainStore.order.vehicle.make} ${this.mainStore.order.vehicle.model} ${this.mainStore.order.vehicle.style}`;
return this.getCmsContent("AlertMatchedTwoIdenticalYMMVehicleWidget", "BodyText")
.replaceAll("{custom:damage}", getDamageString())
.replaceAll("{custom:vinYmmsFound}", vinYmmsFound)
.replaceAll("{custom:vinYmmsExpected}", vinYmmsExpected);
},
isTwoIdenticalYMMVehicleFound(){
const vinYmmFound = `${this.customAlertData?.vehicleInfo?.year} ${this.customAlertData?.vehicleInfo?.make} ${this.customAlertData?.vehicleInfo?.model}`;
const vinYmmExpected = `${this.mainStore.order.vehicle.year} ${this.mainStore.order.vehicle.make} ${this.mainStore.order.vehicle.model}`;
return(vinYmmFound.toLowerCase()==vinYmmExpected.toLowerCase());
}
},
watch: {
customerQuestions: {
handler(newValue) {
// if they modify one of the lookup fields (address, city, state, zipCode, or lastName), then modify the button text back to "Get my personalized quote"
this.$refs.siteFooter.updateButtonText(
this.getCmsContent("siteFooterWidget", "ForwardButtonText")
);
this.resetWarningsAndErrors();
},
deep: true,
}
},
components: {
siteHeader,
siteFooter,
vehicleBanner,
siteSubHeader,
customerQuestions,
textboxQuestion,
alert,
Form,
},
}; };
</script> </script>
<style lang="scss"> <style lang="scss" scoped>
.fade-on-route-transition {
.overflow-scroll { margin-bottom: 100px;
height: calc(100% - 180px); }
overflow-X: hidden !important; .page-container-grouped-styles {
//height: calc(100% - 80px);
overflow: auto;
}
.modal-open {
.page-container-grouped-styles {
overflow: hidden;
}
} }
</style> </style>

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

@ -1,50 +1,48 @@
<template> <template>
<Form <Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm" v-slot="{ meta }" >
@submit="onSubmit" <div class="page-container-grouped-styles">
@invalidSubmit="onInvalidSubmit" <div class="fade-on-route-transition position-relative">
v-slot="{ meta }" <siteHeader cmsWidgetName="SiteHeaderWidget" />
> <div class="select-car">
<div class="page-container-grouped-styles"> <div class="container-fluid pb-2">
<siteHeader <div class="row px-3">
cmsWidgetName="SiteHeaderWidget" <div class="col">
/> <div class="select-car-form rounded">
<div class="fade-on-route-transition sub-container overflow-scroll px-5"> <textBlock
<textBlock cmsWidgetName="verifyingCoverageStatement"
cmsWidgetName="verifyingCoverageStatement" typeStyle="h5"
typeStyle="h5" justifyText="center"
justifyText="center" class="mt-0 mb-4"
class="mt-0 mb-4" id="coverage-statement-text-block"
id="coverage-statement-text-block" />
/> <div>
<div> <p v-html="continueWithSchedulingBodyText" class="mt-0 small" ></p>
<p </div>
v-html="continueWithSchedulingBodyText" <textBlock
class="mt-0 small" > cmsWidgetName="whatHappensNextCopy"
</p> class="mt-4 mb-2 fw-bold"
id="coverage-statement-text-block"
/>
<div>
<p class="small" v-html="bodyText" ref="coverageStatementBodyText"></p>
</div>
<recalModal cmsWidgetName="RecalModal" />
<steeringText cmsWidgetName="MASteeringText" ></steeringText>
<siteFooter
cmsWidgetName="SiteFooterWidget"
:isForwardActionDisabled="!meta.valid"
@backClicked="navigateBack"
@forwardClicked="forwardButtonAction"
ref="siteFooter"
/>
</div>
</div>
</div>
</div>
</div>
</div>
</div> </div>
<textBlock </Form>
cmsWidgetName="whatHappensNextCopy"
class="mt-4 mb-2 fw-bold"
id="coverage-statement-text-block"
/>
<div>
<p class="small"
v-html="bodyText"
ref="coverageStatementBodyText">
</p>
</div>
<recalModal cmsWidgetName="RecalModal" />
<steeringText cmsWidgetName="MASteeringText" ></steeringText>
<siteFooter
cmsWidgetName="SiteFooterWidget"
:isForwardActionDisabled="!meta.valid"
@backClicked="navigateBack"
@forwardClicked="forwardButtonAction"
ref="siteFooter"
/>
</div>
</div>
</Form>
</template> </template>
<script> <script>
@ -65,107 +63,116 @@ import { useMainStore } from "@/store";
import vehicleQuestionsMixin from "@/mixins/vehicle-questions-mixin"; import vehicleQuestionsMixin from "@/mixins/vehicle-questions-mixin";
export default { export default {
name: 'coverage-statement', name: 'coverage-statement',
mixins: [baseFormMixin, vehicleQuestionsMixin], mixins: [baseFormMixin, vehicleQuestionsMixin],
components: { components: {
siteFooter, siteFooter,
siteHeader, siteHeader,
siteSubHeader, siteSubHeader,
Form, Form,
textBlock, textBlock,
recalModal, recalModal,
steeringText steeringText
}, },
computed: { computed: {
bodyText() { bodyText() {
if (useMainStore().order.damage.isRepair) { if (useMainStore().order.damage.isRepair) {
return this.unverifiedNonADASRepairBodyText; return this.unverifiedNonADASRepairBodyText;
} }
else { else {
let parts = useMainStore().order.lineItems.glassParts; let parts = useMainStore().order.lineItems.glassParts;
// if ADAS, display ADASNextSteps // if ADAS, display ADASNextSteps
if (parts.filter(part => part.requiresRecalibration).length > 0) { if (parts.filter(part => part.requiresRecalibration).length > 0) {
return this.unverifiedADASNextStepsBodyText; return this.unverifiedADASNextStepsBodyText;
} }
// if non-ADAS, display NonADASNextSteps // if non-ADAS, display NonADASNextSteps
else { else {
return this.unverifiedNonADASNextStepsBodyText; return this.unverifiedNonADASNextStepsBodyText;
} }
} }
},
continueWithSchedulingBodyText() {
return this.getCmsContent("continueWithSchedulingCopy", "BodyText");
},
unverifiedADASNextStepsBodyText() {
return this.getCmsContent("UnverifiedADASNextStepsWidget", "BodyText").replaceAll("{custom:damage}", this.damageText);
},
unverifiedNonADASNextStepsBodyText() {
return this.getCmsContent("UnverifiedNonADASNextStepsWidget", "BodyText").replaceAll("{custom:damage}", this.damageText);
},
unverifiedNonADASRepairBodyText() {
return this.getCmsContent("UnverifiedNonADASRepairWidget", "BodyText");
},
damageText() {
var damageString = getDamageString();
return damageString == "match" ? "" : damageString;
},
}, },
continueWithSchedulingBodyText() { async beforeRouteEnter(to, from, next) {
return this.getCmsContent("continueWithSchedulingCopy", "BodyText"); // Call APIs
}, const cmsContentPromise = fetchCmsContentForPage(to.query.issPage);
unverifiedADASNextStepsBodyText() {
return this.getCmsContent("UnverifiedADASNextStepsWidget", "BodyText").replaceAll("{custom:damage}", this.damageText);
},
unverifiedNonADASNextStepsBodyText() {
return this.getCmsContent("UnverifiedNonADASNextStepsWidget", "BodyText").replaceAll("{custom:damage}", this.damageText);
},
unverifiedNonADASRepairBodyText() {
return this.getCmsContent("UnverifiedNonADASRepairWidget", "BodyText");
},
damageText() {
var damageString = getDamageString();
return damageString == "match" ? "" : damageString;
},
},
async beforeRouteEnter(to, from, next) {
// Call APIs
const cmsContentPromise = fetchCmsContentForPage(to.query.issPage);
// Settle promises and get results // Settle promises and get results
const promiseResultMap = [ const promiseResultMap = [
{ {
resultKey: 'cmsContent', resultKey: 'cmsContent',
promise: cmsContentPromise, promise: cmsContentPromise,
}, },
]; ];
const resultMap = await settleAllPromises(promiseResultMap); const resultMap = await settleAllPromises(promiseResultMap);
next((vm) => { next((vm) => {
vm.setCmsContent(resultMap.cmsContent); vm.setCmsContent(resultMap.cmsContent);
}); });
},
methods: {
arePagePrerequisitesValid() {
if (useMainStore().order.vehicle.vin) {
return true;
}
return false;
}, },
methods: {
arePagePrerequisitesValid() {
if (useMainStore().order.vehicle.vin) {
return true;
}
return false;
},
async forwardButtonAction() { async forwardButtonAction() {
return this.navigateForward(); return this.navigateForward();
}, },
navigateForward() { navigateForward() {
this.$router.navigate( this.$router.navigate(
this.navigationScenarios.CLICKED_FORWARD_COVERAGE_STATEMENT, this.navigationScenarios.CLICKED_FORWARD_COVERAGE_STATEMENT,
this.$route this.$route
); );
},
}, },
},
}; };
</script> </script>
<style lang="scss"> <style lang="scss" scoped>
.overflow-scroll { .fade-on-route-transition {
height: calc(100% - 168px); margin-bottom: 100px;
overflow-X: hidden !important; }
.page-container-grouped-styles {
//height: calc(100% - 80px);
overflow: auto;
}
.modal-open {
.page-container-grouped-styles {
overflow: hidden;
}
} }
ol { ol {
margin-left: -1rem; margin-left: -1rem;
li { li {
margin-bottom: .5rem; margin-bottom: .5rem;
line-height: 1.5rem; line-height: 1.5rem;
a { a {
line-height: 1.5rem; line-height: 1.5rem;
padding: 0; padding: 0;
} }
} }
} }
#coverage-statement-text-block { #coverage-statement-text-block {
color: #000000; color: #000000;

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

@ -1,67 +1,71 @@
<template> <template>
<Form <Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm" v-slot="{ meta }" >
@submit="onSubmit" <div class="page-container-grouped-styles">
@invalid-submit="onInvalidSubmit" <div class="fade-on-route-transition position-relative">
v-slot="{ meta }"> <siteHeader cmsWidgetName="SiteHeaderWidget" />
<div class="page-container-grouped-styles"> <div class="select-car">
<siteHeader cms-widget-name="SiteHeaderWidget" /> <div class="container-fluid pb-2">
<div class="fade-on-route-transition sub-container overflow-scroll mt-5 px-5"> <div class="row px-3">
<vehicleBanner <div class="col">
class="mb-3" <div class="select-car-form rounded">
cms-widget-name="VehicleBannerWidget" <vehicleBanner class="mb-3" cms-widget-name="VehicleBannerWidget" :display-generic-vehicle-image="false" />
:display-generic-vehicle-image="false" /> <siteSubHeader cms-widget-name="SiteSubHeaderWidget" />
<siteSubHeader cms-widget-name="SiteSubHeaderWidget" /> <alert
<alert ref="alertVinNotFound"
ref="alertVinNotFound" v-if="displayVinNotFoundAlert"
v-if="displayVinNotFoundAlert" class="mb-4"
class="mb-4" cmsWidgetName="AlertVinNotFoundWidget"
cmsWidgetName="AlertVinNotFoundWidget" alertClass="alert-danger"
alertClass="alert-danger" v-bind:isDismissible="false" />
v-bind:isDismissible="false" /> <alert
<alert ref="alertMatchedDifferentVehicle"
ref="alertMatchedDifferentVehicle" v-if="displayMatchedDifferentVehicleAlert"
v-if="displayMatchedDifferentVehicleAlert" class="mb-4"
class="mb-4" cmsWidgetName="AlertMatchedDifferentVehicleWidget"
cmsWidgetName="AlertMatchedDifferentVehicleWidget" :manualHeadline="AlertMatchedDifferentVehicleHeader"
:manualHeadline="AlertMatchedDifferentVehicleHeader" :manualCopy="AlertMatchedDifferentVehicleBody"
:manualCopy="AlertMatchedDifferentVehicleBody" alertClass="alert-warning"
alertClass="alert-warning" v-bind:isDismissible="false" />
v-bind:isDismissible="false" /> <alert
<alert ref="alertMatchedTwoIdenticalYMMVehicle"
ref="alertMatchedTwoIdenticalYMMVehicle" v-if="displayMatchedTwoIdenticalYMMVehicleAlert"
v-if="displayMatchedTwoIdenticalYMMVehicleAlert" class="mb-4"
class="mb-4" cmsWidgetName="AlertMatchedTwoIdenticalYMMVehicleWidget"
cmsWidgetName="AlertMatchedTwoIdenticalYMMVehicleWidget" :manualHeadline="AlertMatchedTwoIdenticalYMMVehicleHeader"
:manualHeadline="AlertMatchedTwoIdenticalYMMVehicleHeader" :manualCopy="AlertMatchedTwoIdenticalYMMVehicleBody"
:manualCopy="AlertMatchedTwoIdenticalYMMVehicleBody" alertClass="alert-warning"
alertClass="alert-warning" v-bind:isDismissible="false" />
v-bind:isDismissible="false" /> <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" validationRules="license-plate-required" />
validationRules="license-plate-required" /> <dropdownQuestion
<dropdownQuestion cmsWidgetName="StateQuestionWidget"
cmsWidgetName="StateQuestionWidget" v-model="licenseState"
v-model="licenseState" ref="state"
ref="state" inputId="8fdf9dc2e13e430eb57529499dceb3eb"
inputId="8fdf9dc2e13e430eb57529499dceb3eb" :options="stateOptions"
:options="stateOptions" disableAutoFill
disableAutoFill validationRules="state-required"
validationRules="state-required" class="mt-4" />
class="mt-4" /> <siteFooter
<siteFooter :isForwardActionDisabled="!meta.valid"
:isForwardActionDisabled="!meta.valid" cms-widget-name="SiteFooterWidget"
cms-widget-name="SiteFooterWidget" @back-clicked="backButtonAction"
@back-clicked="backButtonAction" @forward-clicked="forwardButtonAction"
@forward-clicked="forwardButtonAction" ref="siteFooter" />
ref="siteFooter" /> </div>
</div> </div>
</div> </div>
</Form> </div>
</div>
</div>
</div>
</Form>
</template> </template>
<script> <script>
// Import Supporting Files // Import Supporting Files
@ -92,55 +96,55 @@ defineRule("license-plate-required", required(errorMessages.LICENSE_PLATE_REQUIR
defineRule("state-required", required(errorMessages.STATE_REQUIRED)); defineRule("state-required", required(errorMessages.STATE_REQUIRED));
export default { export default {
name: 'license-plate-lookup', name: 'license-plate-lookup',
mixins: [baseFormMixin, vinPagesMixin], mixins: [baseFormMixin, vinPagesMixin],
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);
// Settle promises and get results // Settle promises and get results
const promiseResultMap = [ const promiseResultMap = [
{ {
resultKey: 'cmsContent', resultKey: 'cmsContent',
promise: cmsContentPromise, promise: cmsContentPromise,
}, },
]; ];
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() {
return {
activeVehicleLookupAlertType: null,
vehicleFromLookup: null,
licensePlate: null,
licenseState: useMainStore().order.customer.address.state,
displayVinNotFoundAlert: false,
displayMatchedDifferentVehicleAlert: false,
displayMatchedTwoIdenticalYMMVehicleAlert: false,
previouslyEnteredCarId: "",
isCarIdDifferent: false,
customAlertData: {},
isSelectedGlassAvailableForVehicle: true,
forwardButtonCarStyle:"",
};
},
methods: {
arePagePrerequisitesValid() {
return this.mainStore.order.vehicle.carId !== null;
}, },
loadDefaultsFromStore() { data() {
this.customerQuestions = this.mainStore.customerData.addressQuestions.state; return {
activeVehicleLookupAlertType: null,
vehicleFromLookup: null,
licensePlate: null,
licenseState: useMainStore().order.customer.address.state,
displayVinNotFoundAlert: false,
displayMatchedDifferentVehicleAlert: false,
displayMatchedTwoIdenticalYMMVehicleAlert: false,
previouslyEnteredCarId: "",
isCarIdDifferent: false,
customAlertData: {},
isSelectedGlassAvailableForVehicle: true,
forwardButtonCarStyle:"",
};
}, },
backButtonAction() { methods: {
// route to move backwards arePagePrerequisitesValid() {
this.$router.navigate(this.navigationScenarios.CLICKED_BACK, this.$route); return this.mainStore.order.vehicle.carId !== null;
}, },
attachCustomEvents() { loadDefaultsFromStore() {
this.customerQuestions = this.mainStore.customerData.addressQuestions.state;
},
backButtonAction() {
// route to move backwards
this.$router.navigate(this.navigationScenarios.CLICKED_BACK, this.$route);
},
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],
@ -149,179 +153,187 @@ export default {
true true
); );
}); });
},
// NOTE: If form is not valid, this method is not called when 'Continue' button is clicked
async forwardButtonAction() {
this.resetWarningsAndErrors();
// Lookup VIN
const vinLookupResponse = await useMainStore().lookupVinByPlate(
this.licensePlate, this.licenseState);
// Settle promises and get results
const promiseResultMap = [
{
resultKey: "vinLookupResponse",
promise: vinLookupResponse,
}, },
]; // NOTE: If form is not valid, this method is not called when 'Continue' button is clicked
async forwardButtonAction() {
this.resetWarningsAndErrors();
const resultMap = await settleAllPromises(promiseResultMap); // Lookup VIN
const vinLookupResponse = await useMainStore().lookupVinByPlate(
this.licensePlate, this.licenseState);
// No VIN found // Settle promises and get results
if (resultMap.vinLookupResponse.error) { const promiseResultMap = [
this.displayVinNotFoundAlert = true; {
this.$refs.siteFooter.disableForwardButton(); resultKey: "vinLookupResponse",
return this.$refs.siteFooter.removeLoader(); promise: vinLookupResponse,
}; },
];
// Vehicle found from VIN lookup const resultMap = await settleAllPromises(promiseResultMap);
const vehicleFromLookup = resultMap.vinLookupResponse.vehicle;
// Check if the CarId has changed // No VIN found
this.isCarIdDifferent = if (resultMap.vinLookupResponse.error) {
vehicleFromLookup.carId !== useMainStore().order.vehicle.carId; this.displayVinNotFoundAlert = true;
// Handle changing car this.$refs.siteFooter.disableForwardButton();
if ( return this.$refs.siteFooter.removeLoader();
this.isCarIdDifferent && };
vehicleFromLookup.carId !== this.previouslyEnteredCarId
) {
// Display Alert
this.previouslyEnteredCarId = vehicleFromLookup.carId;
this.customAlertData.vehicleInfo = vehicleFromLookup;
if(this.isTwoIdenticalYMMVehicleFound){ // Vehicle found from VIN lookup
this.displayMatchedTwoIdenticalYMMVehicleAlert = true; const vehicleFromLookup = resultMap.vinLookupResponse.vehicle;
this.forwardButtonCarStyle= vehicleFromLookup.style;
}
else{
this.displayMatchedDifferentVehicleAlert = true;
}
this.isSelectedGlassAvailableForVehicle = await isGlassAvailableForCarId( // Check if the CarId has changed
vehicleFromLookup.carId this.isCarIdDifferent =
); vehicleFromLookup.carId !== useMainStore().order.vehicle.carId;
// Handle changing car
if (
this.isCarIdDifferent &&
vehicleFromLookup.carId !== this.previouslyEnteredCarId
) {
// Display Alert
this.previouslyEnteredCarId = vehicleFromLookup.carId;
this.customAlertData.vehicleInfo = vehicleFromLookup;
// Update button "Continue with..." if(this.isTwoIdenticalYMMVehicleFound){
this.$refs.siteFooter.updateButtonText(`Continue with ${vehicleFromLookup.year} ${vehicleFromLookup.make} ${vehicleFromLookup.model} ${this.forwardButtonCarStyle}`); this.displayMatchedTwoIdenticalYMMVehicleAlert = true;
return this.$refs.siteFooter.removeLoader(); this.forwardButtonCarStyle= vehicleFromLookup.style;
} }
else{
this.displayMatchedDifferentVehicleAlert = true;
}
// Save vehicle, license plate, and registration information this.isSelectedGlassAvailableForVehicle = await isGlassAvailableForCarId(
await useMainStore().saveRegistrationLicensePlateLookup( vehicleFromLookup.carId
{ );
isSelectedGlassAvailableForVehicle: this.isSelectedGlassAvailableForVehicle,
vehicleInfo: Object.assign(vinLookupResponse.data.vehicle, { vin: vinLookupResponse.data.vin }),
registrationInfo: {
licensePlate: this.licensePlate,
state: this.licenseState,
},
},
false
);
return await this.navigateForward(); // Update button "Continue with..."
}, this.$refs.siteFooter.updateButtonText(`Continue with ${vehicleFromLookup.year} ${vehicleFromLookup.make} ${vehicleFromLookup.model} ${this.forwardButtonCarStyle}`);
async navigateForward() { return this.$refs.siteFooter.removeLoader();
// If a different vehicle is found than the one entered and the selected glass is not available for that vehicle then navigate back to "vehicle-damage" }
// display vehicle changed alert on that page.
if (this.isCarIdDifferent && !this.isSelectedGlassAvailableForVehicle) {
this.$router.navigate(
this.navigationScenarios.SELECTED_VIN_WITH_MISMATCHED_GLASS,
this.$route,
{},
{ [routerParams.DISPLAY_VEHICLE_CHANGE_ALERT]: true }
);
} else {
await this.navigateForwardWithSingleCarMatch();
}
},
resetWarningsAndErrors() {
this.displayVinNotFoundAlert = false;
this.displayMatchedDifferentVehicleAlert = false;
},
},
mounted() {
this.attachCustomEvents();
this.loadDefaultsFromStore();
},
computed: {
AlertMatchedDifferentVehicleHeader() {
return this.getCmsContent(
"AlertMatchedDifferentVehicleWidget",
"HeadlineText"
).replaceAll("{custom:damage}", getDamageString());
},
AlertMatchedDifferentVehicleBody() {
const vinYmmFound = `${this.customAlertData?.vehicleInfo?.year} ${this.customAlertData?.vehicleInfo?.make} ${this.customAlertData?.vehicleInfo?.model}`;
const vinYmmExpected = `${this.mainStore.order.vehicle.year} ${this.mainStore.order.vehicle.make} ${this.mainStore.order.vehicle.model}`;
return this.getCmsContent("AlertMatchedDifferentVehicleWidget", "BodyText") // Save vehicle, license plate, and registration information
await useMainStore().saveRegistrationLicensePlateLookup(
{
isSelectedGlassAvailableForVehicle: this.isSelectedGlassAvailableForVehicle,
vehicleInfo: Object.assign(vinLookupResponse.data.vehicle, { vin: vinLookupResponse.data.vin }),
registrationInfo: {
licensePlate: this.licensePlate,
state: this.licenseState,
},
},
false
);
return await this.navigateForward();
},
async navigateForward() {
// If a different vehicle is found than the one entered and the selected glass is not available for that vehicle then navigate back to "vehicle-damage"
// display vehicle changed alert on that page.
if (this.isCarIdDifferent && !this.isSelectedGlassAvailableForVehicle) {
this.$router.navigate(
this.navigationScenarios.SELECTED_VIN_WITH_MISMATCHED_GLASS,
this.$route,
{},
{ [routerParams.DISPLAY_VEHICLE_CHANGE_ALERT]: true }
);
} else {
await this.navigateForwardWithSingleCarMatch();
}
},
resetWarningsAndErrors() {
this.displayVinNotFoundAlert = false;
this.displayMatchedDifferentVehicleAlert = false;
},
},
mounted() {
this.attachCustomEvents();
this.loadDefaultsFromStore();
},
computed: {
AlertMatchedDifferentVehicleHeader() {
return this.getCmsContent(
"AlertMatchedDifferentVehicleWidget",
"HeadlineText"
).replaceAll("{custom:damage}", getDamageString());
},
AlertMatchedDifferentVehicleBody() {
const vinYmmFound = `${this.customAlertData?.vehicleInfo?.year} ${this.customAlertData?.vehicleInfo?.make} ${this.customAlertData?.vehicleInfo?.model}`;
const vinYmmExpected = `${this.mainStore.order.vehicle.year} ${this.mainStore.order.vehicle.make} ${this.mainStore.order.vehicle.model}`;
return this.getCmsContent("AlertMatchedDifferentVehicleWidget", "BodyText")
.replaceAll("{custom:damage}", getDamageString()) .replaceAll("{custom:damage}", getDamageString())
.replaceAll("{custom:vinYmmFound}", vinYmmFound) .replaceAll("{custom:vinYmmFound}", vinYmmFound)
.replaceAll("{custom:vinYmmExpected}", vinYmmExpected); .replaceAll("{custom:vinYmmExpected}", vinYmmExpected);
}, },
AlertMatchedTwoIdenticalYMMVehicleHeader() { AlertMatchedTwoIdenticalYMMVehicleHeader() {
return this.getCmsContent( return this.getCmsContent(
"AlertMatchedTwoIdenticalYMMVehicleWidget", "AlertMatchedTwoIdenticalYMMVehicleWidget",
"HeadlineText" "HeadlineText"
).replaceAll("{custom:damage}", getDamageString()); ).replaceAll("{custom:damage}", getDamageString());
}, },
AlertMatchedTwoIdenticalYMMVehicleBody() { AlertMatchedTwoIdenticalYMMVehicleBody() {
const vinYmmsFound = `${this.customAlertData?.vehicleInfo?.year} ${this.customAlertData?.vehicleInfo?.make} ${this.customAlertData?.vehicleInfo?.model} ${this.customAlertData?.vehicleInfo?.style}`; const vinYmmsFound = `${this.customAlertData?.vehicleInfo?.year} ${this.customAlertData?.vehicleInfo?.make} ${this.customAlertData?.vehicleInfo?.model} ${this.customAlertData?.vehicleInfo?.style}`;
const vinYmmsExpected = `${this.mainStore.order.vehicle.year} ${this.mainStore.order.vehicle.make} ${this.mainStore.order.vehicle.model} ${this.mainStore.order.vehicle.style}`; const vinYmmsExpected = `${this.mainStore.order.vehicle.year} ${this.mainStore.order.vehicle.make} ${this.mainStore.order.vehicle.model} ${this.mainStore.order.vehicle.style}`;
return this.getCmsContent("AlertMatchedTwoIdenticalYMMVehicleWidget", "BodyText") return this.getCmsContent("AlertMatchedTwoIdenticalYMMVehicleWidget", "BodyText")
.replaceAll("{custom:damage}", getDamageString()) .replaceAll("{custom:damage}", getDamageString())
.replaceAll("{custom:vinYmmsFound}", vinYmmsFound) .replaceAll("{custom:vinYmmsFound}", vinYmmsFound)
.replaceAll("{custom:vinYmmsExpected}", vinYmmsExpected); .replaceAll("{custom:vinYmmsExpected}", vinYmmsExpected);
}, },
isTwoIdenticalYMMVehicleFound(){ isTwoIdenticalYMMVehicleFound(){
const vinYmmFound = `${this.customAlertData?.vehicleInfo?.year} ${this.customAlertData?.vehicleInfo?.make} ${this.customAlertData?.vehicleInfo?.model}`; const vinYmmFound = `${this.customAlertData?.vehicleInfo?.year} ${this.customAlertData?.vehicleInfo?.make} ${this.customAlertData?.vehicleInfo?.model}`;
const vinYmmExpected = `${this.mainStore.order.vehicle.year} ${this.mainStore.order.vehicle.make} ${this.mainStore.order.vehicle.model}`; const vinYmmExpected = `${this.mainStore.order.vehicle.year} ${this.mainStore.order.vehicle.make} ${this.mainStore.order.vehicle.model}`;
return(vinYmmFound.toLowerCase()==vinYmmExpected.toLowerCase()); return(vinYmmFound.toLowerCase()==vinYmmExpected.toLowerCase());
},
stateOptions: {
get: function () {
return states;
},
},
}, },
stateOptions: { watch: {
get: function () { licensePlate() {
return states; this.$refs.siteFooter.updateButtonText(
this.getCmsContent("SiteFooterWidget", "ForwardButtonText")
);
},
registrationZipCode() {
this.$refs.siteFooter.updateButtonText(
this.getCmsContent("SiteFooterWidget", "ForwardButtonText")
);
},
}, },
}, components: {
}, Form,
watch: { siteFooter,
licensePlate() { siteHeader,
this.$refs.siteFooter.updateButtonText( siteSubHeader,
this.getCmsContent("SiteFooterWidget", "ForwardButtonText") vehicleBanner,
); textboxQuestion,
}, dropdownQuestion,
registrationZipCode() { alert
this.$refs.siteFooter.updateButtonText( },
this.getCmsContent("SiteFooterWidget", "ForwardButtonText") };
); </script>
},
},
components: {
Form,
siteFooter,
siteHeader,
siteSubHeader,
vehicleBanner,
textboxQuestion,
dropdownQuestion,
alert
},
};
</script>
<style> <style lang="scss" scoped>
.fade-on-route-transition {
margin-bottom: 100px;
}
.page-container-grouped-styles {
//height: calc(100% - 80px);
overflow: auto;
}
.overflow-scroll { .modal-open {
height: calc(100% - 220px); .page-container-grouped-styles {
overflow-x: hidden !important; overflow: hidden;
} }
#license-plate-question-wrapper .form-test-error { }
/** #license-plate-question-wrapper .form-test-error {
Override extra margin-bottom in the error message in TextboxQuestion /**
*/ Override extra margin-bottom in the error message in TextboxQuestion
margin-bottom: 0 !important; */
} margin-bottom: 0 !important;
</style> }
</style>

2
src/layouts/policy-holder-details/policy-holder-details.vue
View file

@ -3,7 +3,7 @@
<div class="page-container-grouped-styles"> <div class="page-container-grouped-styles">
<div class="fade-on-route-transition position-relative"> <div class="fade-on-route-transition position-relative">
<siteHeader cmsWidgetName="SiteHeaderWidget"/> <siteHeader cmsWidgetName="SiteHeaderWidget"/>
<div class="container-fluid"> <div class="container-fluid pb-2">
<div class="row mt-4 px-3"> <div class="row mt-4 px-3">
<div class="col"> <div class="col">
<siteSubHeader cmsWidgetName="SiteSubHeaderWidget" id="sub-header"/> <siteSubHeader cmsWidgetName="SiteSubHeaderWidget" id="sub-header"/>

210
src/layouts/provider-preference/provider-preference.vue
View file

@ -1,35 +1,44 @@
<template> <template>
<Form @submit="onSubmit" @invalidSubmit="onInvalidSubmit" v-slot="{ meta }"> <Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm" v-slot="{ meta }" >
<div class="page-container-grouped-styles overflow-auto"> <div class="page-container-grouped-styles">
<siteHeader cmsWidgetName="SiteHeaderWidget" /> <div class="fade-on-route-transition position-relative">
<siteSubHeader cmsWidgetName="SiteSubHeader" id="sub-header" /> <siteHeader cmsWidgetName="SiteHeaderWidget" />
<div class="fade-on-route-transition sub-container make-tall overflow-scroller px-5"> <div class="select-car">
<div v-html="ProviderPreferenceHeaderText" class="text-center mb-4 modal-link" ></div> <div class="container-fluid pb-2">
<div <div class="row px-3">
v-html="ProviderPreferenceBodyText" <div class="col">
class="mt-0 body-text" <div class="select-car-form rounded">
></div> <div v-html="ProviderPreferenceHeaderText" class="text-center mb-4 modal-link" ></div>
<shoppreferenceModal cmsWidgetName="ShopPreferenceDrawer" /> <div
v-html="ProviderPreferenceBodyText"
class="mt-0 body-text"
></div>
<shoppreferenceModal cmsWidgetName="ShopPreferenceDrawer" />
<buttonQuestion <buttonQuestion
cmsWidgetName="ServiceLocationQuestion" cmsWidgetName="ServiceLocationQuestion"
:questionText="questionText" :questionText="questionText"
:answers="answersFromCms" :answers="answersFromCms"
buttonTypeString="listButton" buttonTypeString="listButton"
isRequired isRequired
v-model="SelectedshopLocation" v-model="SelectedshopLocation"
validationRules="questions-required" /> validationRules="questions-required" />
<siteFooter <siteFooter
cmsWidgetName="SiteFooterWidget" cmsWidgetName="SiteFooterWidget"
:isForwardActionDisabled="isForwardActionDisabled" :isForwardActionDisabled="isForwardActionDisabled"
@backClicked="backButtonAction" @backClicked="backButtonAction"
@forwardClicked="forwardButtonAction" @forwardClicked="forwardButtonAction"
ref="siteFooter" ref="siteFooter"
/> />
</div> </div>
</div> </div>
</Form> </div>
</div>
</div>
</div>
</div>
</Form>
</template> </template>
<script> <script>
// Import Supporting Files // Import Supporting Files
@ -50,95 +59,104 @@ import shoppreferenceModal from '@/layouts/provider-preference/shoppreference-mo
// DEFINE VALIDATION RULES // DEFINE VALIDATION RULES
defineRule("questions-required", required(errorMessages.OPTION_REQUIRED)); defineRule("questions-required", required(errorMessages.OPTION_REQUIRED));
export default { export default {
name: "provider-preference", name: "provider-preference",
mixins: [baseFormMixin], mixins: [baseFormMixin],
components: { components: {
siteFooter, siteFooter,
siteHeader, siteHeader,
siteSubHeader, siteSubHeader,
Form, Form,
shoppreferenceModal, shoppreferenceModal,
buttonQuestion buttonQuestion
},
data() {
return {
SelectedshopLocation : null,
};
},
async beforeRouteEnter(to, from, next) {
const cmsContentPromise = fetchCmsContentForPage(to.query.issPage);
// Settle promises and get results
const promiseResultMap = [
{
resultKey: "cmsContent",
promise: cmsContentPromise,
},
];
const resultMap = await settleAllPromises(promiseResultMap);
next((vm) => {
vm.setCmsContent(resultMap.cmsContent);
});
},
computed: {
isForwardActionDisabled() {
return this.SelectedshopLocation === null;
}, },
ProviderPreferenceHeaderText(){ data() {
return this.getCmsContent("ProviderPreference", "HeaderText"); return {
SelectedshopLocation : null,
};
}, },
ProviderPreferenceBodyText(){ async beforeRouteEnter(to, from, next) {
return this.getCmsContent("ProviderPreference", "BodyText"); const cmsContentPromise = fetchCmsContentForPage(to.query.issPage);
// Settle promises and get results
const promiseResultMap = [
{
resultKey: "cmsContent",
promise: cmsContentPromise,
},
];
const resultMap = await settleAllPromises(promiseResultMap);
next((vm) => {
vm.setCmsContent(resultMap.cmsContent);
});
}, },
questionText() { computed: {
isForwardActionDisabled() {
return this.SelectedshopLocation === null;
},
ProviderPreferenceHeaderText(){
return this.getCmsContent("ProviderPreference", "HeaderText");
},
ProviderPreferenceBodyText(){
return this.getCmsContent("ProviderPreference", "BodyText");
},
questionText() {
return this.getCmsContent("ServiceLocationQuestion", "QuestionText"); return this.getCmsContent("ServiceLocationQuestion", "QuestionText");
}, },
answersFromCms() { answersFromCms() {
return this.getCmsContent("ServiceLocationQuestion", "Answers"); return this.getCmsContent("ServiceLocationQuestion", "Answers");
}, },
},
methods: {
arePagePrerequisiteValid() {
return true;
}, },
backButtonAction() { methods: {
/** arePagePrerequisiteValid() {
* this.navigationScenarios comes from base-mixin return true;
*/ },
this.$router.navigate(this.navigationScenarios.CLICKED_BACK, this.$route); backButtonAction() {
/**
* this.navigationScenarios comes from base-mixin
*/
this.$router.navigate(this.navigationScenarios.CLICKED_BACK, this.$route);
},
forwardButtonAction() {
if(this.SelectedshopLocation == "Schedule with Safelite")
{
this.$router.navigate(this.navigationScenarios.CLICKED_FORWARD_WITH_SAFELITE, this.$route);
}
},
resetDependentState() {},
}, },
forwardButtonAction() {
if(this.SelectedshopLocation == "Schedule with Safelite")
{
this.$router.navigate(this.navigationScenarios.CLICKED_FORWARD_WITH_SAFELITE, this.$route);
}
},
resetDependentState() {},
},
}; };
</script> </script>
<style lang="scss"> <style lang="scss" scoped>
.overflow-scroller { .fade-on-route-transition {
height: calc(100% - 220px) !important; margin-bottom: 100px;
overflow-X: hidden !important; }
.page-container-grouped-styles {
//height: calc(100% - 80px);
overflow: auto;
}
.modal-open {
.page-container-grouped-styles {
overflow: hidden;
}
} }
#sub-header span{ #sub-header span{
color: #000000; color: #000000;
} }
.body-text p{ .body-text p{
margin-bottom: 0.5rem; margin-bottom: 0.5rem;
} }
.body-text li{ .body-text li{
margin-bottom: 0.5rem; margin-bottom: 0.5rem;
} }
.modal-link a{ .modal-link a{
color:#06577C; color:#06577C;
font-size: 14px; font-size: 14px;
line-height: 24px; line-height: 24px;
font-weight: 500; font-weight: 500;
} }
.question-text { .question-text {
margin-top: 0; margin-top: 0;
& > span { & > span {
text-align: left; text-align: left;
} }

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

@ -1,25 +1,32 @@
<template> <template>
<div> <Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm" v-slot="{ meta }" >
<Form @submit="onSubmit" @invalidSubmit="onInvalidSubmit" v-slot="{ meta }"> <div class="page-container-grouped-styles">
<div class="page-container-grouped-styles overflow-auto"> <div class="fade-on-route-transition position-relative">
<siteHeader cmsWidgetName="SiteHeaderWidget" /> <siteHeader cmsWidgetName="SiteHeaderWidget" />
<siteSubHeader cmsWidgetName="SiteSubHeaderWidget" /> <div class="select-car">
<div class="fade-on-route-transition sub-container make-tall px-5"> <div class="container-fluid pb-2">
<p>Placeholder for service-location page</p> <div class="row px-3">
<siteFooter <div class="col">
cmsWidgetName="SiteFooterWidget" <div class="select-car-form rounded">
:isForwardActionDisabled="!meta.valid" <p>Placeholder for service-location page</p>
@backClicked="backButtonAction" <siteFooter
@forwardClicked="forwardButtonAction" cmsWidgetName="SiteFooterWidget"
ref="siteFooter" :isForwardActionDisabled="!meta.valid"
/> @backClicked="backButtonAction"
</div> @forwardClicked="forwardButtonAction"
</div> ref="siteFooter"
</Form> />
</div> </div>
</template> </div>
<script> </div>
// Import Supporting Files </div>
</div>
</div>
</div>
</Form>
</template>
<script>
// Import 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";
// Import Component // Import Component
@ -29,43 +36,59 @@ 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";
export default { export default {
name: "provider-preference", name: "provider-preference",
mixins: [baseFormMixin], mixins: [baseFormMixin],
components: { components: {
siteFooter, siteFooter,
siteHeader, siteHeader,
siteSubHeader, siteSubHeader,
Form, Form,
},
data() {
return {};
},
async beforeRouteEnter(to, from, next) {
const cmsContentPromise = fetchCmsContentForPage(to.query.issPage);
// Settle promises and get results
const promiseResultMap = [
{
resultKey: "cmsContent",
promise: cmsContentPromise,
},
];
const resultMap = await settleAllPromises(promiseResultMap);
next((vm) => {
vm.setCmsContent(resultMap.cmsContent);
});
},
methods: {
arePagePrerequisiteValid() {
return true;
}, },
backButtonAction() { data() {
/** return {};
* this.navigationScenarios comes from base-mixin },
*/ async beforeRouteEnter(to, from, next) {
this.$router.navigate(this.navigationScenarios.CLICKED_BACK, this.$route); const cmsContentPromise = fetchCmsContentForPage(to.query.issPage);
// Settle promises and get results
const promiseResultMap = [
{
resultKey: "cmsContent",
promise: cmsContentPromise,
},
];
const resultMap = await settleAllPromises(promiseResultMap);
next((vm) => {
vm.setCmsContent(resultMap.cmsContent);
});
},
methods: {
arePagePrerequisiteValid() {
return true;
},
backButtonAction() {
/**
* this.navigationScenarios comes from base-mixin
*/
this.$router.navigate(this.navigationScenarios.CLICKED_BACK, this.$route);
},
async forwardButtonAction() {},
resetDependentState() {},
}, },
async forwardButtonAction() {},
resetDependentState() {},
},
}; };
</script> </script>
<style lang="scss" scoped>
.fade-on-route-transition {
margin-bottom: 100px;
}
.page-container-grouped-styles {
//height: calc(100% - 80px);
overflow: auto;
}
.modal-open {
.page-container-grouped-styles {
overflow: hidden;
}
}
</style>

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

@ -3,7 +3,7 @@
<div class="page-container-grouped-styles"> <div class="page-container-grouped-styles">
<div class="fade-on-route-transition position-relative"> <div class="fade-on-route-transition position-relative">
<siteHeader cmsWidgetName="SiteHeaderWidget"/> <siteHeader cmsWidgetName="SiteHeaderWidget"/>
<div class="container-fluid"> <div class="container-fluid pb-2">
<div class="row mt-4 px-3"> <div class="row mt-4 px-3">
<div class="col"> <div class="col">
<alert <alert
@ -478,6 +478,7 @@ export default {
}, },
}; };
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.fade-on-route-transition { .fade-on-route-transition {
margin-bottom: 100px; margin-bottom: 100px;

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

@ -1,36 +1,25 @@
<template> <template>
<Form <Form @submit="onSubmit" @invalid-submit="onInvalidSubmit">
@submit="onSubmit" <div class="page-container-grouped-styles">
@invalid-submit="onInvalidSubmit" <div class="fade-on-route-transition position-relative">
> <siteHeader cmsWidgetName="SiteHeaderWidget" />
<div class="page-container-grouped-styles vehicle-lookup"> <div class="select-car">
<SiteHeader <div class="container-fluid pb-2">
cms-widget-name="SiteHeaderWidget" <div class="row px-3">
/> <div class="col">
<div class="fade-on-route-transition sub-container overflow-scroll container gx-0 px-5"> <div class="select-car-form rounded">
<VehicleBanner <VehicleBanner class="mb-3" cms-widget-name="VehicleBannerWidget" :display-generic-vehicle-image="false" />
class="mb-3" <SiteSubHeader cms-widget-name="SiteSubHeaderWidget" />
cms-widget-name="VehicleBannerWidget" <VinLookupMethods v-model="selectedVinLookupMethod" cms-widget-name="VINLookupMethod" group-name="VinLookupMethods" ref="VinLookupMethods" />
:display-generic-vehicle-image="false" <SiteFooter cms-widget-name="SiteFooterWidget" :is-forward-action-disabled="isForwardActionDisabled" @back-clicked="backButtonAction" @forward-clicked="forwardButtonAction" />
/> </div>
<SiteSubHeader </div>
cms-widget-name="SiteSubHeaderWidget" </div>
/> </div>
<VinLookupMethods </div>
v-model="selectedVinLookupMethod" </div>
cms-widget-name="VINLookupMethod" </div>
group-name="VinLookupMethods" </Form>
ref="VinLookupMethods"
/>
<SiteFooter
cms-widget-name="SiteFooterWidget"
:is-forward-action-disabled="isForwardActionDisabled"
@back-clicked="backButtonAction"
@forward-clicked="forwardButtonAction"
/>
</div>
</div>
</Form>
</template> </template>
<script> <script>
// Import Supporting Files // Import Supporting Files
@ -49,78 +38,87 @@ import VehicleBanner from '@/iss-components/vehicle-banner/vehicle-banner.vue';
import VinLookupMethods from './vin-lookup-methods/vin-lookup-methods.vue'; import VinLookupMethods from './vin-lookup-methods/vin-lookup-methods.vue';
export default { export default {
name: 'vehicle-lookup', name: 'vehicle-lookup',
mixins: [BaseFormMixin], mixins: [BaseFormMixin],
components: { components: {
Form, Form,
SiteFooter, SiteFooter,
SiteHeader, SiteHeader,
SiteSubHeader, SiteSubHeader,
VehicleBanner, VehicleBanner,
VinLookupMethods, VinLookupMethods,
}, },
data() { data() {
return { return {
selectedVinLookupMethod: null, selectedVinLookupMethod: null,
}; };
}, },
async beforeRouteEnter(to, from, next) { async beforeRouteEnter(to, from, next) {
const cmsContentPromise = fetchCmsContentForPage(to.query.issPage); const cmsContentPromise = fetchCmsContentForPage(to.query.issPage);
// Settle promises and get results // Settle promises and get results
const promiseResultMap = [ const promiseResultMap = [
{ {
resultKey: 'cmsContent', resultKey: 'cmsContent',
promise: cmsContentPromise, promise: cmsContentPromise,
}, },
]; ];
const resultMap = await settleAllPromises(promiseResultMap); const resultMap = await settleAllPromises(promiseResultMap);
next((vm) => { next((vm) => {
vm.setCmsContent(resultMap.cmsContent); vm.setCmsContent(resultMap.cmsContent);
vm.$refs.VinLookupMethods.initializeComponent(); vm.$refs.VinLookupMethods.initializeComponent();
}); });
},
computed: {
isForwardActionDisabled() {
return this.selectedVinLookupMethod === null;
}, },
}, computed: {
methods: { isForwardActionDisabled() {
arePagePrerequisiteValid() { return this.selectedVinLookupMethod === null;
return true; },
}, },
backButtonAction() { methods: {
/** arePagePrerequisiteValid() {
* this.navigationScenarios comes from base-mixin return true;
*/ },
this.$router.navigate(this.navigationScenarios.CLICKED_BACK, this.$route); backButtonAction() {
/**
* this.navigationScenarios comes from base-mixin
*/
this.$router.navigate(this.navigationScenarios.CLICKED_BACK, this.$route);
},
forwardButtonAction() {
switch (this.selectedVinLookupMethod) {
case vinLookupMethodSelections.MANUALVIN:
useMainStore().updateVehicleVin(null);
this.$router.navigate(this.navigationScenarios.SELECTED_MANUAL_VIN, this.$route);
break;
case vinLookupMethodSelections.LICENSEPLATE:
this.$router.navigate(this.navigationScenarios.SELECTED_LICENSE_PLATE, this.$route);
break;
case vinLookupMethodSelections.HOMEADDRESS:
this.$router.navigate(this.navigationScenarios.SELECTED_HOME_ADDRESS, this.$route);
break;
default:
break;
}
},
resetDependentState() {},
}, },
forwardButtonAction() {
switch (this.selectedVinLookupMethod) {
case vinLookupMethodSelections.MANUALVIN:
useMainStore().updateVehicleVin(null);
this.$router.navigate(this.navigationScenarios.SELECTED_MANUAL_VIN, this.$route);
break;
case vinLookupMethodSelections.LICENSEPLATE:
this.$router.navigate(this.navigationScenarios.SELECTED_LICENSE_PLATE, this.$route);
break;
case vinLookupMethodSelections.HOMEADDRESS:
this.$router.navigate(this.navigationScenarios.SELECTED_HOME_ADDRESS, this.$route);
break;
default:
break;
}
},
resetDependentState() {},
},
}; };
</script> </script>
<style lang="scss">
.overflow-scroll { <style lang="scss" scoped>
height: calc(100% - 180px); .fade-on-route-transition {
overflow-X: hidden !important; margin-bottom: 100px;
}
.page-container-grouped-styles {
//height: calc(100% - 80px);
overflow: auto;
}
.modal-open {
.page-container-grouped-styles {
overflow: hidden;
}
} }
</style> </style>

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

@ -1,15 +1,17 @@
<template> <template>
<div class="page-container-grouped-styles position-relative"> <div class="page-container-grouped-styles position-relative">
<siteHeader cmsWidgetName="SiteHeaderWidget" /> <div class="fade-on-route-transition position-relative">
<div class="select-car"> <siteHeader cmsWidgetName="SiteHeaderWidget" />
<div class="container-fluid"> <div class="select-car">
<div class="row"> <div class="container-fluid pb-2">
<div class="col"> <div class="row">
<div class="select-car-form rounded text-center"> <div class="col">
<vehicleBanner cmsWidgetName="VehicleBannerWidget" :displayGenericVehicleImage="true" class="mb-3" /> <div class="select-car-form rounded text-center">
<siteSubHeader cmsWidgetName="SiteSubHeaderWidget" :hasBackButton="true" @click-event="backButtonAction" /> <vehicleBanner cmsWidgetName="VehicleBannerWidget" :displayGenericVehicleImage="true" class="mb-3" />
<makeQuestion class="px-4" v-model="selectedMake" ref="makeQuestion" cmsWidgetName="VehicleMakeQuestion" /> <siteSubHeader cmsWidgetName="SiteSubHeaderWidget" :hasBackButton="true" @click-event="backButtonAction" />
<siteFooter cmsWidgetName="SiteFooterWidget" ref="siteFooter" @back-clicked="backButtonAction" :isForwardButtonHidden="shouldHideForwardButton" /> <makeQuestion class="px-4" v-model="selectedMake" ref="makeQuestion" cmsWidgetName="VehicleMakeQuestion" />
<siteFooter cmsWidgetName="SiteFooterWidget" ref="siteFooter" @back-clicked="backButtonAction" :isForwardButtonHidden="shouldHideForwardButton" />
</div>
</div> </div>
</div> </div>
</div> </div>

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

@ -1,15 +1,17 @@
<template> <template>
<div class="page-container-grouped-styles position-relative"> <div class="page-container-grouped-styles position-relative">
<siteHeader cmsWidgetName="SiteHeaderWidget" /> <div class="fade-on-route-transition position-relative">
<div class="select-car"> <siteHeader cmsWidgetName="SiteHeaderWidget" />
<div class="container-fluid"> <div class="select-car">
<div class="row"> <div class="container-fluid pb-2">
<div class="col"> <div class="row">
<div class="select-car-form rounded text-center"> <div class="col">
<vehicleBanner cmsWidgetName="VehicleBannerWidget" :displayGenericVehicleImage="true" class="mb-3" /> <div class="select-car-form rounded text-center">
<siteSubHeader cmsWidgetName="SiteSubHeaderWidget" :hasBackButton="true" :backButtonAccessibleText="backButtonAccessibleText" @click-event="backButtonAction" /> <vehicleBanner cmsWidgetName="VehicleBannerWidget" :displayGenericVehicleImage="true" class="mb-3" />
<modelQuestion v-model="selectedModel" ref="modelQuestion" cmsWidgetName="VehicleModelQuestion" class="px-4" /> <siteSubHeader cmsWidgetName="SiteSubHeaderWidget" :hasBackButton="true" :backButtonAccessibleText="backButtonAccessibleText" @click-event="backButtonAction" />
<siteFooter cmsWidgetName="SiteFooterWidget" ref="siteFooter" @back-clicked="backButtonAction" :isForwardButtonHidden="shouldHideForwardButton" /> <modelQuestion v-model="selectedModel" ref="modelQuestion" cmsWidgetName="VehicleModelQuestion" class="px-4" />
<siteFooter cmsWidgetName="SiteFooterWidget" ref="siteFooter" @back-clicked="backButtonAction" :isForwardButtonHidden="shouldHideForwardButton" />
</div>
</div> </div>
</div> </div>
</div> </div>

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

@ -1,15 +1,17 @@
<template> <template>
<div class="page-container-grouped-styles position-relative"> <div class="page-container-grouped-styles position-relative">
<siteHeader cmsWidgetName="SiteHeaderWidget" /> <div class="fade-on-route-transition position-relative">
<div class="select-car"> <siteHeader cmsWidgetName="SiteHeaderWidget" />
<div class="container-fluid"> <div class="select-car">
<div class="row"> <div class="container-fluid pb-2">
<div class="col"> <div class="row">
<div class="select-car-form rounded text-center"> <div class="col">
<vehicleBanner cmsWidgetName="VehicleBannerWidget" class="mb-3" displayGenericVehicleImage /> <div class="select-car-form rounded text-center">
<siteSubHeader cmsWidgetName="SiteSubHeaderWidget" :hasBackButton="true" :backButtonAccessibleText="backButtonAccessibleText" @click-event="backButtonAction" /> <vehicleBanner cmsWidgetName="VehicleBannerWidget" class="mb-3" displayGenericVehicleImage />
<styleQuestion v-model="selectedStyle" ref="styleQuestion" cmsWidgetName="VehicleStyleQuestion" class="px-4" /> <siteSubHeader cmsWidgetName="SiteSubHeaderWidget" :hasBackButton="true" :backButtonAccessibleText="backButtonAccessibleText" @click-event="backButtonAction" />
<siteFooter cmsWidgetName="SiteFooterWidget" ref="siteFooter" @back-clicked="backButtonAction" :isForwardButtonHidden="shouldHideForwardButton" /> <styleQuestion v-model="selectedStyle" ref="styleQuestion" cmsWidgetName="VehicleStyleQuestion" class="px-4" />
<siteFooter cmsWidgetName="SiteFooterWidget" ref="siteFooter" @back-clicked="backButtonAction" :isForwardButtonHidden="shouldHideForwardButton" />
</div>
</div> </div>
</div> </div>
</div> </div>

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

@ -1,15 +1,17 @@
<template> <template>
<div class="page-container-grouped-styles position-relative"> <div class="page-container-grouped-styles position-relative">
<siteHeader cmsWidgetName="SiteHeaderWidget" /> <div class="fade-on-route-transition position-relative">
<div class="select-car"> <siteHeader cmsWidgetName="SiteHeaderWidget" />
<div class="container-fluid"> <div class="select-car">
<div class="row"> <div class="container-fluid pb-2">
<div class="col"> <div class="row">
<div class="select-car-form rounded text-center"> <div class="col">
<vehicleBanner cmsWidgetName="VehicleBannerWidget" :displayGenericVehicleImage="true" class="mb-3" /> <div class="select-car-form rounded text-center">
<siteSubHeader cmsWidgetName="SiteSubHeaderWidget" /> <vehicleBanner cmsWidgetName="VehicleBannerWidget" :displayGenericVehicleImage="true" class="mb-3" />
<yearQuestion class="px-4" v-model="selectedYear" ref="yearQuestion" cmsWidgetName="VehicleYearQuestion" /> <siteSubHeader cmsWidgetName="SiteSubHeaderWidget" />
<siteFooter cmsWidgetName="SiteFooterWidget" ref="siteFooter" @back-clicked="backButtonAction" :isForwardButtonHidden="shouldHideForwardButton" /> <yearQuestion class="px-4" v-model="selectedYear" ref="yearQuestion" cmsWidgetName="VehicleYearQuestion" />
<siteFooter cmsWidgetName="SiteFooterWidget" ref="siteFooter" @back-clicked="backButtonAction" :isForwardButtonHidden="shouldHideForwardButton" />
</div>
</div> </div>
</div> </div>
</div> </div>

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

@ -1,47 +1,27 @@
<template> <template>
<Form <Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm" v-slot="{ meta }" >
@submit="onSubmit" <div class="page-container-grouped-styles">
@invalidSubmit="onInvalidSubmit" <div class="fade-on-route-transition position-relative">
v-slot="{ meta }" <siteHeader cmsWidgetName="SiteHeaderWidget" />
> <div class="select-car">
<div class="page-container-grouped-styles "> <div class="container-fluid pb-2">
<siteHeader <div class="row px-3">
cmsWidgetName="SiteHeaderWidget" <div class="col">
/> <div class="select-car-form rounded">
<div class="px-4 overflow-scroll "> <vehicleBanner class="mb-3" cmsWidgetName="VehicleBannerWidget" :displayGenericVehicleImage="false" />
<div class="fade-on-route-transition sub-container px-2"> <siteSubHeader cmsWidgetName="SiteSubHeaderWidget" />
<vehicleBanner <vinLookupAlerts class="mt-5" :activeAlertType="activeVehicleLookupAlertType" />
class="mb-3" <vinQuestion v-model="vin" :mask="vinMask" :isDisabled="vinPopulatedOnPageLoad" textPosition="left" />
cmsWidgetName="VehicleBannerWidget" <vinLocationInformation />
:displayGenericVehicleImage="false" <siteFooter cmsWidgetName="SiteFooterWidget" :isForwardActionDisabled="!meta.valid" @backClicked="backButtonAction" @forwardClicked="forwardButtonAction" ref="siteFooter" />
/> </div>
<siteSubHeader </div>
cmsWidgetName="SiteSubHeaderWidget" </div>
/> </div>
<vinLookupAlerts </div>
class="mt-5"
:activeAlertType="activeVehicleLookupAlertType"
/>
<vinQuestion
v-model="vin"
:mask="vinMask"
:isDisabled="vinPopulatedOnPageLoad"
/>
<vinLocationInformation />
<siteFooter
cmsWidgetName="SiteFooterWidget"
:isForwardActionDisabled="!meta.valid"
@backClicked="backButtonAction"
@forwardClicked="forwardButtonAction"
ref="siteFooter"
/>
</div> </div>
</div> </div>
</div> </Form>
</Form>
</template> </template>
<script> <script>
// Import Supporting Files // Import Supporting Files
@ -81,25 +61,25 @@ export default {
setup() { setup() {
const mainStore = useMainStore(); const mainStore = useMainStore();
return { mainStore }; return { mainStore };
}, },
data() { data() {
return { return {
activeVehicleLookupAlertType: null, activeVehicleLookupAlertType: null,
needToLookupVehicle: true, needToLookupVehicle: true,
vehicleFromLookup: null, vehicleFromLookup: null,
vin: this.getVinFromStore(), vin: this.getVinFromStore(),
forwardButtonCarStyle:"", forwardButtonCarStyle:"",
vinPopulatedOnPageLoad: this.getVinFromStore()?.length > 0, vinPopulatedOnPageLoad: this.getVinFromStore()?.length > 0,
}; };
}, },
provide() { provide() {
return { return {
vehicleFromLookup: computed(() => this.vehicleFromLookup), vehicleFromLookup: computed(() => this.vehicleFromLookup),
}; };
}, },
async beforeRouteEnter(to, from, next) { async beforeRouteEnter(to, from, next) {
const cmsContentPromise = fetchCmsContentForPage(to.query.issPage); const cmsContentPromise = fetchCmsContentForPage(to.query.issPage);
// Settle promises and get results // Settle promises and get results
const promiseResultMap = [ const promiseResultMap = [
@ -111,51 +91,51 @@ export default {
const resultMap = await settleAllPromises(promiseResultMap); const resultMap = await settleAllPromises(promiseResultMap);
next((vm) => { next((vm) => {
vm.setCmsContent(resultMap.cmsContent); vm.setCmsContent(resultMap.cmsContent);
}); });
},
computed: {
isCarIdDifferentFromTheStore() {
return (
this.vehicleFromLookup !== null
&& this.vehicleFromLookup.carId !== this.mainStore.vehicle.carId
);
}, },
isTwoIdenticalYMMVehicleFound(){ computed: {
const vinYmmFound = `${this.vehicleFromLookup.year} ${this.vehicleFromLookup.make} ${this.vehicleFromLookup.model}`; isCarIdDifferentFromTheStore() {
const vinYmmExpected = `${this.mainStore.order.vehicle.year} ${this.mainStore.order.vehicle.make} ${this.mainStore.order.vehicle.model}`; return (
return(vinYmmFound.toLowerCase()==vinYmmExpected.toLowerCase()); this.vehicleFromLookup !== null
&& this.vehicleFromLookup.carId !== this.mainStore.vehicle.carId
);
},
isTwoIdenticalYMMVehicleFound(){
const vinYmmFound = `${this.vehicleFromLookup.year} ${this.vehicleFromLookup.make} ${this.vehicleFromLookup.model}`;
const vinYmmExpected = `${this.mainStore.order.vehicle.year} ${this.mainStore.order.vehicle.make} ${this.mainStore.order.vehicle.model}`;
return(vinYmmFound.toLowerCase()==vinYmmExpected.toLowerCase());
},
vinMask() {
if (this.vinPopulatedOnPageLoad) {
this.activeVehicleLookupAlertType = vehicleLookupAlertTypes.PERFECT_MATCH;
this.needToLookupVehicle = false;
const lastSixChars = this.vin.substring(11, this.vin.length);
return `!X!X!X!X!X!X!X!X!X!X!X${lastSixChars}`;
} else {
return "XXXXXXXXXXXXXXXXX";
}
},
}, },
vinMask() { methods: {
if (this.vinPopulatedOnPageLoad) { arePagePrerequisiteValid() {
this.activeVehicleLookupAlertType = vehicleLookupAlertTypes.PERFECT_MATCH; return true;
this.needToLookupVehicle = false; },
const lastSixChars = this.vin.substring(11, this.vin.length); getVinFromStore() {
return `!X!X!X!X!X!X!X!X!X!X!X${lastSixChars}`; return this.mainStore.vehicle.vin;
} else { },
return "XXXXXXXXXXXXXXXXX"; backButtonAction() {
} /**
}, * this.navigationScenarios comes from base-mixin
}, */
methods: { this.$router.navigate(this.navigationScenarios.CLICKED_BACK, this.$route);
arePagePrerequisiteValid() { },
return true; // NOTE: If form is not valid, this method is not called when 'Continue' button is clicked
}, async forwardButtonAction() {
getVinFromStore() { this.resetActiveAlert();
return this.mainStore.vehicle.vin; // Temp solution to reset the 'disabled' style on the Continue button
}, this.$refs.siteFooter.enableForwardAction();
backButtonAction() {
/**
* this.navigationScenarios comes from base-mixin
*/
this.$router.navigate(this.navigationScenarios.CLICKED_BACK, this.$route);
},
// NOTE: If form is not valid, this method is not called when 'Continue' button is clicked
async forwardButtonAction() {
this.resetActiveAlert();
// Temp solution to reset the 'disabled' style on the Continue button
this.$refs.siteFooter.enableForwardAction();
if (this.needToLookupVehicle) { if (this.needToLookupVehicle) {
const vehicleLookupResponse = await this.lookupVehicleByVin(this.vin); const vehicleLookupResponse = await this.lookupVehicleByVin(this.vin);
@ -175,18 +155,18 @@ export default {
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) {
if(this.isTwoIdenticalYMMVehicleFound){ if(this.isTwoIdenticalYMMVehicleFound){
this.activeVehicleLookupAlertType = vehicleLookupAlertTypes.TWO_IDENTICAL_YMM_MATCHED; this.activeVehicleLookupAlertType = vehicleLookupAlertTypes.TWO_IDENTICAL_YMM_MATCHED;
this.forwardButtonCarStyle = this.vehicleFromLookup.style; this.forwardButtonCarStyle = this.vehicleFromLookup.style;
} }
else{ else{
this.activeVehicleLookupAlertType = vehicleLookupAlertTypes.NOT_MATCHED; this.activeVehicleLookupAlertType = vehicleLookupAlertTypes.NOT_MATCHED;
} }
const vehicleYearMakeModelStyle = `${this.vehicleFromLookup.year} ${this.vehicleFromLookup.make} ${this.vehicleFromLookup.model} ${this.forwardButtonCarStyle}`; const vehicleYearMakeModelStyle = `${this.vehicleFromLookup.year} ${this.vehicleFromLookup.make} ${this.vehicleFromLookup.model} ${this.forwardButtonCarStyle}`;
this.$refs.siteFooter.updateButtonText(`Continue with ${vehicleYearMakeModelStyle}`); this.$refs.siteFooter.updateButtonText(`Continue with ${vehicleYearMakeModelStyle}`);
this.$refs.siteFooter.removeLoader(); this.$refs.siteFooter.removeLoader();
this.needToLookupVehicle = false; this.needToLookupVehicle = false;
@ -213,18 +193,18 @@ export default {
return; return;
} }
// save vehicle to store if it hasn't already been saved // save vehicle to store if it hasn't already been saved
if (!this.vinPopulatedOnPageLoad) { if (!this.vinPopulatedOnPageLoad) {
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) {
// To Do: Need requirement on what to do here // To Do: Need requirement on what to do here
console.error('Error on retrieving PartsOrQuestions'); console.error('Error on retrieving PartsOrQuestions');
this.$refs.siteFooter.removeLoader(); this.$refs.siteFooter.removeLoader();
return; return;
} }
// Comes from vehicleQuestionsMixin.navigateForward() // Comes from vehicleQuestionsMixin.navigateForward()
await this.navigateForward(partsOrQuestionsResponse.data.partsOrQuestions, this); await this.navigateForward(partsOrQuestionsResponse.data.partsOrQuestions, this);
@ -274,11 +254,19 @@ export default {
}, },
}; };
</script> </script>
<style>
.overflow-scroll { <style lang="scss" scoped>
height: calc(100% - 180px); .fade-on-route-transition {
overflow-X: hidden !important; margin-bottom: 100px;
}
.page-container-grouped-styles {
//height: calc(100% - 80px);
overflow: auto;
} }
.modal-open {
.page-container-grouped-styles {
overflow: hidden;
}
}
</style> </style>

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

@ -4,7 +4,7 @@
<div class="fade-on-route-transition position-relative"> <div class="fade-on-route-transition position-relative">
<siteHeader cmsWidgetName="SiteHeaderWidget"/> <siteHeader cmsWidgetName="SiteHeaderWidget"/>
<siteSubHeader cmsWidgetName="SiteSubHeaderWidget"/> <siteSubHeader cmsWidgetName="SiteSubHeaderWidget"/>
<div class="container-fluid"> <div class="container-fluid pb-2">
<div class="row mt-4 px-3"> <div class="row mt-4 px-3">
<div class="col"> <div class="col">
<textboxQuestion <textboxQuestion