Merge 'develop' into feature/digital/SSR-254

This commit is contained in:
katie 2023-03-13 15:41:42 -04:00
commit fa9631da03
7 changed files with 183 additions and 183 deletions

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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