Merge 'develop' into feature/digital/SSR-254
This commit is contained in:
commit
fa9631da03
7 changed files with 183 additions and 183 deletions
|
|
@ -2,9 +2,9 @@
|
|||
<div :class="`page-container-grouped-styles questions-page`">
|
||||
<loadingModal ref="loadingModal" />
|
||||
<siteHeader cmsWidgetName="SiteHeaderWidget" />
|
||||
<div class="fade-on-route-transition sub-container overflow-scroll">
|
||||
<vehicleBanner class="mb-3" cmsWidgetName="VehicleBannerWidget" :displayGenericVehicleImage="false" />
|
||||
<siteSubHeader cmsWidgetName="SiteSubHeaderWidget" />
|
||||
<div class="fade-on-route-transition sub-container overflow-scroll">
|
||||
<alert
|
||||
ref="alertFewMoreQuestions"
|
||||
cmsWidgetName="alertWidget"
|
||||
|
|
@ -95,8 +95,8 @@ export default {
|
|||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.overflow-scroll {
|
||||
height: calc(100% - 368px);
|
||||
.overflow-scroll {
|
||||
height: calc(100% - 180px);
|
||||
overflow-x: hidden !important;
|
||||
}
|
||||
.questions-page {
|
||||
|
|
|
|||
|
|
@ -7,13 +7,13 @@
|
|||
autocomplete="off">
|
||||
<div class="page-container-grouped-styles">
|
||||
<siteHeader cmsWidgetName="SiteHeaderWidget" ref="siteHeader" />
|
||||
<vehicleBanner
|
||||
class="mb-3"
|
||||
cmsWidgetName="VehicleBannerWidget"
|
||||
ref="vehicleBanner"
|
||||
:displayGenericVehicleImage="false" />
|
||||
<siteSubHeader cmsWidgetName="SiteSubHeaderWidget" ref="siteSubHeader" />
|
||||
<div class="fade-on-route-transition sub-container overflow-scroll px-5">
|
||||
<vehicleBanner
|
||||
class="mb-3"
|
||||
cmsWidgetName="VehicleBannerWidget"
|
||||
ref="vehicleBanner"
|
||||
:displayGenericVehicleImage="false" />
|
||||
<siteSubHeader cmsWidgetName="SiteSubHeaderWidget" ref="siteSubHeader" />
|
||||
<alert
|
||||
ref="alertVinNotFound"
|
||||
v-if="displayVinNotFoundAlert"
|
||||
|
|
@ -182,13 +182,13 @@ export default {
|
|||
if (this.isCarIdDifferent && carFound.carId !== this.previouslyEnteredCarId) {
|
||||
// Display Alert
|
||||
this.previouslyEnteredCarId = carFound.carId;
|
||||
this.customAlertData.vehicleInfo = carFound;
|
||||
this.customAlertData.vehicleInfo = carFound;
|
||||
if(this.isTwoIdenticalYMMVehicleFound){
|
||||
this.displayMatchedTwoIdenticalYMMVehicleAlert = true;
|
||||
this.forwardButtonCarStyle= carFound.style;
|
||||
}
|
||||
else{
|
||||
this.displayMatchedDifferentVehicleAlert = true;
|
||||
this.displayMatchedDifferentVehicleAlert = true;
|
||||
}
|
||||
|
||||
this.isSelectedGlassAvailableForVehicle = await isGlassAvailableForCarId(
|
||||
|
|
@ -349,9 +349,9 @@ export default {
|
|||
</script>
|
||||
<style lang="scss">
|
||||
|
||||
.overflow-scroll {
|
||||
height: calc(100% - 368px);
|
||||
.overflow-scroll {
|
||||
height: calc(100% - 180px);
|
||||
overflow-X: hidden !important;
|
||||
|
||||
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -5,12 +5,12 @@
|
|||
v-slot="{ meta }">
|
||||
<div class="page-container-grouped-styles">
|
||||
<siteHeader cms-widget-name="SiteHeaderWidget" />
|
||||
<vehicleBanner
|
||||
class="mb-3"
|
||||
cms-widget-name="VehicleBannerWidget"
|
||||
:display-generic-vehicle-image="false" />
|
||||
<siteSubHeader cms-widget-name="SiteSubHeaderWidget" />
|
||||
<div class="fade-on-route-transition sub-container overflow-scroll mt-5 px-5">
|
||||
<vehicleBanner
|
||||
class="mb-3"
|
||||
cms-widget-name="VehicleBannerWidget"
|
||||
:display-generic-vehicle-image="false" />
|
||||
<siteSubHeader cms-widget-name="SiteSubHeaderWidget" />
|
||||
<alert
|
||||
ref="alertVinNotFound"
|
||||
v-if="displayVinNotFoundAlert"
|
||||
|
|
@ -189,13 +189,13 @@ export default {
|
|||
// Display Alert
|
||||
this.previouslyEnteredCarId = vehicleFromLookup.carId;
|
||||
this.customAlertData.vehicleInfo = vehicleFromLookup;
|
||||
|
||||
|
||||
if(this.isTwoIdenticalYMMVehicleFound){
|
||||
this.displayMatchedTwoIdenticalYMMVehicleAlert = true;
|
||||
this.forwardButtonCarStyle= vehicleFromLookup.style;
|
||||
}
|
||||
else{
|
||||
this.displayMatchedDifferentVehicleAlert = true;
|
||||
this.displayMatchedDifferentVehicleAlert = true;
|
||||
}
|
||||
|
||||
this.isSelectedGlassAvailableForVehicle = await isGlassAvailableForCarId(
|
||||
|
|
@ -314,8 +314,8 @@ export default {
|
|||
|
||||
<style>
|
||||
|
||||
.overflow-scroll {
|
||||
height: calc(100% - 392px);
|
||||
.overflow-scroll {
|
||||
height: calc(100% - 220px);
|
||||
overflow-x: hidden !important;
|
||||
}
|
||||
#license-plate-question-wrapper .form-test-error {
|
||||
|
|
|
|||
|
|
@ -2,11 +2,6 @@
|
|||
<Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm" v-slot="{ meta }">
|
||||
<div class="page-container-grouped-styles vehicle-damage">
|
||||
<siteHeader cmsWidgetName="SiteHeaderWidget" />
|
||||
<vehicleBanner
|
||||
class="mb-3"
|
||||
cmsWidgetName="VehicleBannerWidget"
|
||||
:displayGenericVehicleImage="false" />
|
||||
<siteSubHeader cmsWidgetName="SiteSubHeaderWidget" />
|
||||
<div class="fade-on-route-transition sub-container overflow-scroll">
|
||||
<alert
|
||||
ref="vehicleChangeAlert"
|
||||
|
|
@ -15,6 +10,11 @@
|
|||
cmsWidgetName="VehicleChangeAlert"
|
||||
alertClass="alert-warning"
|
||||
:isDismissible="false" />
|
||||
<vehicleBanner
|
||||
class="mb-3"
|
||||
cmsWidgetName="VehicleBannerWidget"
|
||||
:displayGenericVehicleImage="false" />
|
||||
<siteSubHeader cmsWidgetName="SiteSubHeaderWidget" />
|
||||
<damageLocationQuestion
|
||||
ref="damageLocation"
|
||||
cmsWidgetName="DamageLocationQuestion"
|
||||
|
|
@ -474,8 +474,8 @@ export default {
|
|||
</script>
|
||||
<style lang="scss">
|
||||
|
||||
.overflow-scroll {
|
||||
height: calc(100% - 368px);
|
||||
overflow-X: hidden !important;
|
||||
.overflow-scroll {
|
||||
height: calc(100% - 180px);
|
||||
overflow-X: hidden !important;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -7,15 +7,15 @@
|
|||
<SiteHeader
|
||||
cms-widget-name="SiteHeaderWidget"
|
||||
/>
|
||||
<VehicleBanner
|
||||
class="mb-3"
|
||||
cms-widget-name="VehicleBannerWidget"
|
||||
:display-generic-vehicle-image="false"
|
||||
/>
|
||||
<SiteSubHeader
|
||||
cms-widget-name="SiteSubHeaderWidget"
|
||||
/>
|
||||
<div class="fade-on-route-transition sub-container overflow-scroll container gx-0">
|
||||
<VehicleBanner
|
||||
class="mb-3"
|
||||
cms-widget-name="VehicleBannerWidget"
|
||||
:display-generic-vehicle-image="false"
|
||||
/>
|
||||
<SiteSubHeader
|
||||
cms-widget-name="SiteSubHeaderWidget"
|
||||
/>
|
||||
<VinLookupMethods
|
||||
v-model="selectedVinLookupMethod"
|
||||
cms-widget-name="VINLookupMethod"
|
||||
|
|
@ -119,8 +119,8 @@ export default {
|
|||
</script>
|
||||
<style lang="scss">
|
||||
|
||||
.overflow-scroll {
|
||||
height: calc(100% - 368px);
|
||||
overflow-X: hidden !important;
|
||||
.overflow-scroll {
|
||||
height: calc(100% - 180px);
|
||||
overflow-X: hidden !important;
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -2,13 +2,13 @@
|
|||
<Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm">
|
||||
<div class="page-container-grouped-styles vehicle-parts">
|
||||
<siteHeader ref="siteHeader" cmsWidgetName="SiteHeaderWidget" />
|
||||
<vehicleBanner
|
||||
class="mb-3"
|
||||
ref="vehicleBanner"
|
||||
cmsWidgetName="VehicleBannerWidget"
|
||||
:displayGenericVehicleImage="false" />
|
||||
<siteSubHeader ref="siteSubHeader" cmsWidgetName="SiteSubHeaderWidget" />
|
||||
<div class="fade-on-route-transition sub-container overflow-scroll px-5">
|
||||
<vehicleBanner
|
||||
class="mb-3"
|
||||
ref="vehicleBanner"
|
||||
cmsWidgetName="VehicleBannerWidget"
|
||||
:displayGenericVehicleImage="false" />
|
||||
<siteSubHeader ref="siteSubHeader" cmsWidgetName="SiteSubHeaderWidget" />
|
||||
<div class="prevent-squish my-5">
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
|
|
@ -222,8 +222,8 @@ export default {
|
|||
};
|
||||
</script>
|
||||
<style lang="scss">
|
||||
.overflow-scroll {
|
||||
height: calc(100% - 368px);
|
||||
.overflow-scroll {
|
||||
height: calc(100% - 180px);
|
||||
overflow-x: hidden !important;
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,26 +1,26 @@
|
|||
<template>
|
||||
<Form
|
||||
<Form
|
||||
@submit="onSubmit"
|
||||
@invalidSubmit="onInvalidSubmit"
|
||||
v-slot="{ meta }"
|
||||
>
|
||||
>
|
||||
<div class="page-container-grouped-styles ">
|
||||
<siteHeader
|
||||
<siteHeader
|
||||
cmsWidgetName="SiteHeaderWidget"
|
||||
/>
|
||||
<vehicleBanner
|
||||
class="mb-3"
|
||||
cmsWidgetName="VehicleBannerWidget"
|
||||
:displayGenericVehicleImage="false"
|
||||
/>
|
||||
<siteSubHeader
|
||||
cmsWidgetName="SiteSubHeaderWidget"
|
||||
/>
|
||||
<div class="px-4 overflow-scroll ">
|
||||
<div class="fade-on-route-transition sub-container px-2 mt-5">
|
||||
<vinLookupAlerts
|
||||
:activeAlertType="activeVehicleLookupAlertType"
|
||||
/>
|
||||
/>
|
||||
<div class="px-4 overflow-scroll ">
|
||||
<div class="fade-on-route-transition sub-container px-2 mt-5">
|
||||
<vehicleBanner
|
||||
class="mb-3"
|
||||
cmsWidgetName="VehicleBannerWidget"
|
||||
:displayGenericVehicleImage="false"
|
||||
/>
|
||||
<siteSubHeader
|
||||
cmsWidgetName="SiteSubHeaderWidget"
|
||||
/>
|
||||
<vinLookupAlerts
|
||||
:activeAlertType="activeVehicleLookupAlertType"
|
||||
/>
|
||||
|
||||
<vinQuestion
|
||||
v-model="vin"
|
||||
|
|
@ -28,19 +28,19 @@
|
|||
:isDisabled="vinPopulatedOnPageLoad"
|
||||
/>
|
||||
|
||||
<vinLocationInformation />
|
||||
<vinLocationInformation />
|
||||
|
||||
<siteFooter
|
||||
cmsWidgetName="SiteFooterWidget"
|
||||
:isForwardActionDisabled="!meta.valid"
|
||||
@backClicked="backButtonAction"
|
||||
@forwardClicked="forwardButtonAction"
|
||||
ref="siteFooter"
|
||||
/>
|
||||
<siteFooter
|
||||
cmsWidgetName="SiteFooterWidget"
|
||||
:isForwardActionDisabled="!meta.valid"
|
||||
@backClicked="backButtonAction"
|
||||
@forwardClicked="forwardButtonAction"
|
||||
ref="siteFooter"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Form>
|
||||
</Form>
|
||||
</template>
|
||||
<script>
|
||||
// Import Supporting Files
|
||||
|
|
@ -65,20 +65,20 @@ import vinLookupAlerts from './vin-lookup-alerts/vin-lookup-alerts.vue';
|
|||
import vinQuestion from './vin-question/vin-question.vue';
|
||||
|
||||
export default {
|
||||
name: 'vin-lookup',
|
||||
mixins: [baseFormMixin, vehicleQuestionsMixin],
|
||||
components: {
|
||||
siteFooter,
|
||||
siteHeader,
|
||||
siteSubHeader,
|
||||
Form,
|
||||
vehicleBanner,
|
||||
vinLocationInformation,
|
||||
vinLookupAlerts,
|
||||
vinQuestion,
|
||||
},
|
||||
setup() {
|
||||
const mainStore = useMainStore();
|
||||
name: 'vin-lookup',
|
||||
mixins: [baseFormMixin, vehicleQuestionsMixin],
|
||||
components: {
|
||||
siteFooter,
|
||||
siteHeader,
|
||||
siteSubHeader,
|
||||
Form,
|
||||
vehicleBanner,
|
||||
vinLocationInformation,
|
||||
vinLookupAlerts,
|
||||
vinQuestion,
|
||||
},
|
||||
setup() {
|
||||
const mainStore = useMainStore();
|
||||
|
||||
return { mainStore };
|
||||
},
|
||||
|
|
@ -100,15 +100,15 @@ export default {
|
|||
async beforeRouteEnter(to, from, next) {
|
||||
const cmsContentPromise = fetchCmsContentForPage(to.query.issPage);
|
||||
|
||||
// Settle promises and get results
|
||||
const promiseResultMap = [
|
||||
{
|
||||
resultKey: 'cmsContent',
|
||||
promise: cmsContentPromise,
|
||||
},
|
||||
];
|
||||
// Settle promises and get results
|
||||
const promiseResultMap = [
|
||||
{
|
||||
resultKey: 'cmsContent',
|
||||
promise: cmsContentPromise,
|
||||
},
|
||||
];
|
||||
|
||||
const resultMap = await settleAllPromises(promiseResultMap);
|
||||
const resultMap = await settleAllPromises(promiseResultMap);
|
||||
|
||||
next((vm) => {
|
||||
vm.setCmsContent(resultMap.cmsContent);
|
||||
|
|
@ -156,23 +156,23 @@ export default {
|
|||
// 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);
|
||||
if (this.needToLookupVehicle) {
|
||||
const vehicleLookupResponse = await this.lookupVehicleByVin(this.vin);
|
||||
|
||||
if (vehicleLookupResponse.error) {
|
||||
this.activeVehicleLookupAlertType = vehicleLookupAlertTypes.NOT_FOUND;
|
||||
this.resetVehicleFromLookup();
|
||||
this.$refs.siteFooter.removeLoader();
|
||||
// Temp solution to turn on 'disabled' style on the Continue button
|
||||
// because the form itself actually passes its client-side validation.
|
||||
// SSR-189 Scenario #4.
|
||||
this.$refs.siteFooter.disableForwardButton();
|
||||
return;
|
||||
}
|
||||
if (vehicleLookupResponse.error) {
|
||||
this.activeVehicleLookupAlertType = vehicleLookupAlertTypes.NOT_FOUND;
|
||||
this.resetVehicleFromLookup();
|
||||
this.$refs.siteFooter.removeLoader();
|
||||
// Temp solution to turn on 'disabled' style on the Continue button
|
||||
// because the form itself actually passes its client-side validation.
|
||||
// SSR-189 Scenario #4.
|
||||
this.$refs.siteFooter.disableForwardButton();
|
||||
return;
|
||||
}
|
||||
|
||||
// Add vin bcs the response from the service doesn't contain vin
|
||||
this.vehicleFromLookup = Object.assign(vehicleLookupResponse.data, { vin: this.vin });
|
||||
}
|
||||
// Add vin bcs the response from the service doesn't contain vin
|
||||
this.vehicleFromLookup = Object.assign(vehicleLookupResponse.data, { vin: this.vin });
|
||||
}
|
||||
|
||||
if (this.needToLookupVehicle && this.isCarIdDifferentFromTheStore) {
|
||||
if(this.isTwoIdenticalYMMVehicleFound){
|
||||
|
|
@ -187,30 +187,30 @@ export default {
|
|||
this.$refs.siteFooter.updateButtonText(`Continue with ${vehicleYearMakeModelStyle}`);
|
||||
this.$refs.siteFooter.removeLoader();
|
||||
|
||||
this.needToLookupVehicle = false;
|
||||
this.needToLookupVehicle = false;
|
||||
|
||||
return;
|
||||
}
|
||||
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) {
|
||||
this.mainStore.updateVehicle(this.vehicleFromLookup);
|
||||
this.$router.navigate(
|
||||
this.navigationScenarios.SELECTED_VIN_WITH_MISMATCHED_GLASS,
|
||||
this.$route,
|
||||
{},
|
||||
{ [routerParams.DISPLAY_VEHICLE_CHANGE_ALERT]: true }
|
||||
);
|
||||
// navigate back to vehicle-damage
|
||||
if (this.isCarIdDifferentFromTheStore && !isSelectedGlassAvailableForVehicle) {
|
||||
this.mainStore.updateVehicle(this.vehicleFromLookup);
|
||||
this.$router.navigate(
|
||||
this.navigationScenarios.SELECTED_VIN_WITH_MISMATCHED_GLASS,
|
||||
this.$route,
|
||||
{},
|
||||
{ [routerParams.DISPLAY_VEHICLE_CHANGE_ALERT]: true }
|
||||
);
|
||||
|
||||
// navigate() doesn't stop the processing flow
|
||||
return;
|
||||
}
|
||||
// navigate() doesn't stop the processing flow
|
||||
return;
|
||||
}
|
||||
|
||||
// save vehicle to store if it hasn't already been saved
|
||||
if (!this.vinPopulatedOnPageLoad) {
|
||||
|
|
@ -225,59 +225,59 @@ export default {
|
|||
return;
|
||||
}
|
||||
|
||||
// Comes from vehicleQuestionsMixin.navigateForward()
|
||||
await this.navigateForward(partsOrQuestionsResponse.data.partsOrQuestions, this);
|
||||
},
|
||||
async getPartsOrQuestions() {
|
||||
try {
|
||||
const response = await this.mainStore.getPartsOrQuestions();
|
||||
// Comes from vehicleQuestionsMixin.navigateForward()
|
||||
await this.navigateForward(partsOrQuestionsResponse.data.partsOrQuestions, this);
|
||||
},
|
||||
async getPartsOrQuestions() {
|
||||
try {
|
||||
const response = await this.mainStore.getPartsOrQuestions();
|
||||
|
||||
return response;
|
||||
} catch (responseError) {
|
||||
return {
|
||||
error: {
|
||||
status: responseError.status,
|
||||
},
|
||||
};
|
||||
}
|
||||
return response;
|
||||
} catch (responseError) {
|
||||
return {
|
||||
error: {
|
||||
status: responseError.status,
|
||||
},
|
||||
};
|
||||
}
|
||||
},
|
||||
async lookupVehicleByVin(vin) {
|
||||
try {
|
||||
return await this.mainStore.lookupVehicleByVin(vin);
|
||||
}
|
||||
catch (responseError) {
|
||||
return {
|
||||
error: {
|
||||
status: responseError.status,
|
||||
},
|
||||
};
|
||||
}
|
||||
},
|
||||
resetActiveAlert() {
|
||||
this.activeVehicleLookupAlertType = null;
|
||||
},
|
||||
resetVehicleFromLookup() {
|
||||
this.vehicleFromLookup = null;
|
||||
},
|
||||
resetDependentState() {},
|
||||
},
|
||||
async lookupVehicleByVin(vin) {
|
||||
try {
|
||||
return await this.mainStore.lookupVehicleByVin(vin);
|
||||
}
|
||||
catch (responseError) {
|
||||
return {
|
||||
error: {
|
||||
status: responseError.status,
|
||||
},
|
||||
};
|
||||
}
|
||||
watch: {
|
||||
vin() {
|
||||
this.resetActiveAlert();
|
||||
this.$refs.siteFooter.enableForwardAction();
|
||||
this.needToLookupVehicle = true;
|
||||
this.$refs.siteFooter.updateButtonText(
|
||||
this.getCmsContent('SiteFooterWidget', 'ForwardButtonText')
|
||||
);
|
||||
}
|
||||
},
|
||||
resetActiveAlert() {
|
||||
this.activeVehicleLookupAlertType = null;
|
||||
},
|
||||
resetVehicleFromLookup() {
|
||||
this.vehicleFromLookup = null;
|
||||
},
|
||||
resetDependentState() {},
|
||||
},
|
||||
watch: {
|
||||
vin() {
|
||||
this.resetActiveAlert();
|
||||
this.$refs.siteFooter.enableForwardAction();
|
||||
this.needToLookupVehicle = true;
|
||||
this.$refs.siteFooter.updateButtonText(
|
||||
this.getCmsContent('SiteFooterWidget', 'ForwardButtonText')
|
||||
);
|
||||
}
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style>
|
||||
.overflow-scroll {
|
||||
height: calc(100% - 368px);
|
||||
overflow-X: hidden !important;
|
||||
.overflow-scroll {
|
||||
height: calc(100% - 180px);
|
||||
overflow-X: hidden !important;
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Reference in a new issue