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

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

Browse source
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
Show stats Download patch file Download diff file Expand all files Collapse all files

6
src/iss-components/questions-page-layout/questions-page-layout.vue
View file

@ -2,9 +2,9 @@
<div :class="`page-container-grouped-styles questions-page`"> <div :class="`page-container-grouped-styles questions-page`">
<loadingModal ref="loadingModal" /> <loadingModal ref="loadingModal" />
<siteHeader cmsWidgetName="SiteHeaderWidget" /> <siteHeader cmsWidgetName="SiteHeaderWidget" />
<div class="fade-on-route-transition sub-container overflow-scroll">
<vehicleBanner class="mb-3" cmsWidgetName="VehicleBannerWidget" :displayGenericVehicleImage="false" /> <vehicleBanner class="mb-3" cmsWidgetName="VehicleBannerWidget" :displayGenericVehicleImage="false" />
<siteSubHeader cmsWidgetName="SiteSubHeaderWidget" /> <siteSubHeader cmsWidgetName="SiteSubHeaderWidget" />
<div class="fade-on-route-transition sub-container overflow-scroll">
<alert <alert
ref="alertFewMoreQuestions" ref="alertFewMoreQuestions"
cmsWidgetName="alertWidget" cmsWidgetName="alertWidget"
@ -95,8 +95,8 @@ export default {
</script> </script>
<style lang="scss"> <style lang="scss">
.overflow-scroll { .overflow-scroll {
height: calc(100% - 368px); height: calc(100% - 180px);
overflow-x: hidden !important; overflow-x: hidden !important;
} }
.questions-page { .questions-page {

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

@ -7,13 +7,13 @@
autocomplete="off"> autocomplete="off">
<div class="page-container-grouped-styles"> <div class="page-container-grouped-styles">
<siteHeader cmsWidgetName="SiteHeaderWidget" ref="siteHeader" /> <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"> <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 <alert
ref="alertVinNotFound" ref="alertVinNotFound"
v-if="displayVinNotFoundAlert" v-if="displayVinNotFoundAlert"
@ -182,13 +182,13 @@ export default {
if (this.isCarIdDifferent && carFound.carId !== this.previouslyEnteredCarId) { if (this.isCarIdDifferent && carFound.carId !== this.previouslyEnteredCarId) {
// Display Alert // Display Alert
this.previouslyEnteredCarId = carFound.carId; this.previouslyEnteredCarId = carFound.carId;
this.customAlertData.vehicleInfo = carFound; this.customAlertData.vehicleInfo = carFound;
if(this.isTwoIdenticalYMMVehicleFound){ if(this.isTwoIdenticalYMMVehicleFound){
this.displayMatchedTwoIdenticalYMMVehicleAlert = true; this.displayMatchedTwoIdenticalYMMVehicleAlert = true;
this.forwardButtonCarStyle= carFound.style; this.forwardButtonCarStyle= carFound.style;
} }
else{ else{
this.displayMatchedDifferentVehicleAlert = true; this.displayMatchedDifferentVehicleAlert = true;
} }
this.isSelectedGlassAvailableForVehicle = await isGlassAvailableForCarId( this.isSelectedGlassAvailableForVehicle = await isGlassAvailableForCarId(
@ -349,9 +349,9 @@ export default {
</script> </script>
<style lang="scss"> <style lang="scss">
.overflow-scroll { .overflow-scroll {
height: calc(100% - 368px); height: calc(100% - 180px);
overflow-X: hidden !important; overflow-X: hidden !important;
} }
</style> </style>

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

@ -5,12 +5,12 @@
v-slot="{ meta }"> v-slot="{ meta }">
<div class="page-container-grouped-styles"> <div class="page-container-grouped-styles">
<siteHeader cms-widget-name="SiteHeaderWidget" /> <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"> <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 <alert
ref="alertVinNotFound" ref="alertVinNotFound"
v-if="displayVinNotFoundAlert" v-if="displayVinNotFoundAlert"
@ -189,13 +189,13 @@ export default {
// Display Alert // Display Alert
this.previouslyEnteredCarId = vehicleFromLookup.carId; this.previouslyEnteredCarId = vehicleFromLookup.carId;
this.customAlertData.vehicleInfo = vehicleFromLookup; this.customAlertData.vehicleInfo = vehicleFromLookup;
if(this.isTwoIdenticalYMMVehicleFound){ if(this.isTwoIdenticalYMMVehicleFound){
this.displayMatchedTwoIdenticalYMMVehicleAlert = true; this.displayMatchedTwoIdenticalYMMVehicleAlert = true;
this.forwardButtonCarStyle= vehicleFromLookup.style; this.forwardButtonCarStyle= vehicleFromLookup.style;
} }
else{ else{
this.displayMatchedDifferentVehicleAlert = true; this.displayMatchedDifferentVehicleAlert = true;
} }
this.isSelectedGlassAvailableForVehicle = await isGlassAvailableForCarId( this.isSelectedGlassAvailableForVehicle = await isGlassAvailableForCarId(
@ -314,8 +314,8 @@ export default {
<style> <style>
.overflow-scroll { .overflow-scroll {
height: calc(100% - 392px); height: calc(100% - 220px);
overflow-x: hidden !important; overflow-x: hidden !important;
} }
#license-plate-question-wrapper .form-test-error { #license-plate-question-wrapper .form-test-error {

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

@ -2,11 +2,6 @@
<Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm" v-slot="{ meta }"> <Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm" v-slot="{ meta }">
<div class="page-container-grouped-styles vehicle-damage"> <div class="page-container-grouped-styles vehicle-damage">
<siteHeader cmsWidgetName="SiteHeaderWidget" /> <siteHeader cmsWidgetName="SiteHeaderWidget" />
<vehicleBanner
class="mb-3"
cmsWidgetName="VehicleBannerWidget"
:displayGenericVehicleImage="false" />
<siteSubHeader cmsWidgetName="SiteSubHeaderWidget" />
<div class="fade-on-route-transition sub-container overflow-scroll"> <div class="fade-on-route-transition sub-container overflow-scroll">
<alert <alert
ref="vehicleChangeAlert" ref="vehicleChangeAlert"
@ -15,6 +10,11 @@
cmsWidgetName="VehicleChangeAlert" cmsWidgetName="VehicleChangeAlert"
alertClass="alert-warning" alertClass="alert-warning"
:isDismissible="false" /> :isDismissible="false" />
<vehicleBanner
class="mb-3"
cmsWidgetName="VehicleBannerWidget"
:displayGenericVehicleImage="false" />
<siteSubHeader cmsWidgetName="SiteSubHeaderWidget" />
<damageLocationQuestion <damageLocationQuestion
ref="damageLocation" ref="damageLocation"
cmsWidgetName="DamageLocationQuestion" cmsWidgetName="DamageLocationQuestion"
@ -474,8 +474,8 @@ export default {
</script> </script>
<style lang="scss"> <style lang="scss">
.overflow-scroll { .overflow-scroll {
height: calc(100% - 368px); height: calc(100% - 180px);
overflow-X: hidden !important; overflow-X: hidden !important;
} }
</style> </style>

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

@ -7,15 +7,15 @@
<SiteHeader <SiteHeader
cms-widget-name="SiteHeaderWidget" 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"> <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 <VinLookupMethods
v-model="selectedVinLookupMethod" v-model="selectedVinLookupMethod"
cms-widget-name="VINLookupMethod" cms-widget-name="VINLookupMethod"
@ -119,8 +119,8 @@ export default {
</script> </script>
<style lang="scss"> <style lang="scss">
.overflow-scroll { .overflow-scroll {
height: calc(100% - 368px); height: calc(100% - 180px);
overflow-X: hidden !important; overflow-X: hidden !important;
} }
</style> </style>

18
src/layouts/vehicle-parts/vehicle-parts.vue
View file

@ -2,13 +2,13 @@
<Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm"> <Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm">
<div class="page-container-grouped-styles vehicle-parts"> <div class="page-container-grouped-styles vehicle-parts">
<siteHeader ref="siteHeader" cmsWidgetName="SiteHeaderWidget" /> <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"> <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="prevent-squish my-5">
<div class="row"> <div class="row">
<div class="col"> <div class="col">
@ -222,8 +222,8 @@ export default {
}; };
</script> </script>
<style lang="scss"> <style lang="scss">
.overflow-scroll { .overflow-scroll {
height: calc(100% - 368px); height: calc(100% - 180px);
overflow-x: hidden !important; overflow-x: hidden !important;
} }
</style> </style>

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

@ -1,26 +1,26 @@
<template> <template>
<Form <Form
@submit="onSubmit" @submit="onSubmit"
@invalidSubmit="onInvalidSubmit" @invalidSubmit="onInvalidSubmit"
v-slot="{ meta }" v-slot="{ meta }"
> >
<div class="page-container-grouped-styles "> <div class="page-container-grouped-styles ">
<siteHeader <siteHeader
cmsWidgetName="SiteHeaderWidget" cmsWidgetName="SiteHeaderWidget"
/> />
<vehicleBanner <div class="px-4 overflow-scroll ">
class="mb-3" <div class="fade-on-route-transition sub-container px-2 mt-5">
cmsWidgetName="VehicleBannerWidget" <vehicleBanner
:displayGenericVehicleImage="false" class="mb-3"
/> cmsWidgetName="VehicleBannerWidget"
<siteSubHeader :displayGenericVehicleImage="false"
cmsWidgetName="SiteSubHeaderWidget" />
/> <siteSubHeader
<div class="px-4 overflow-scroll "> cmsWidgetName="SiteSubHeaderWidget"
<div class="fade-on-route-transition sub-container px-2 mt-5"> />
<vinLookupAlerts <vinLookupAlerts
:activeAlertType="activeVehicleLookupAlertType" :activeAlertType="activeVehicleLookupAlertType"
/> />
<vinQuestion <vinQuestion
v-model="vin" v-model="vin"
@ -28,19 +28,19 @@
:isDisabled="vinPopulatedOnPageLoad" :isDisabled="vinPopulatedOnPageLoad"
/> />
<vinLocationInformation /> <vinLocationInformation />
<siteFooter <siteFooter
cmsWidgetName="SiteFooterWidget" cmsWidgetName="SiteFooterWidget"
:isForwardActionDisabled="!meta.valid" :isForwardActionDisabled="!meta.valid"
@backClicked="backButtonAction" @backClicked="backButtonAction"
@forwardClicked="forwardButtonAction" @forwardClicked="forwardButtonAction"
ref="siteFooter" ref="siteFooter"
/> />
</div>
</div> </div>
</div>
</div> </div>
</Form> </Form>
</template> </template>
<script> <script>
// Import Supporting Files // 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'; import vinQuestion from './vin-question/vin-question.vue';
export default { export default {
name: 'vin-lookup', name: 'vin-lookup',
mixins: [baseFormMixin, vehicleQuestionsMixin], mixins: [baseFormMixin, vehicleQuestionsMixin],
components: { components: {
siteFooter, siteFooter,
siteHeader, siteHeader,
siteSubHeader, siteSubHeader,
Form, Form,
vehicleBanner, vehicleBanner,
vinLocationInformation, vinLocationInformation,
vinLookupAlerts, vinLookupAlerts,
vinQuestion, vinQuestion,
}, },
setup() { setup() {
const mainStore = useMainStore(); const mainStore = useMainStore();
return { mainStore }; return { mainStore };
}, },
@ -100,15 +100,15 @@ export default {
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);
@ -156,23 +156,23 @@ export default {
// Temp solution to reset the 'disabled' style on the Continue button // Temp solution to reset the 'disabled' style on the Continue button
this.$refs.siteFooter.enableForwardAction(); this.$refs.siteFooter.enableForwardAction();
if (this.needToLookupVehicle) { if (this.needToLookupVehicle) {
const vehicleLookupResponse = await this.lookupVehicleByVin(this.vin); const vehicleLookupResponse = await this.lookupVehicleByVin(this.vin);
if (vehicleLookupResponse.error) { if (vehicleLookupResponse.error) {
this.activeVehicleLookupAlertType = vehicleLookupAlertTypes.NOT_FOUND; this.activeVehicleLookupAlertType = vehicleLookupAlertTypes.NOT_FOUND;
this.resetVehicleFromLookup(); this.resetVehicleFromLookup();
this.$refs.siteFooter.removeLoader(); this.$refs.siteFooter.removeLoader();
// Temp solution to turn on 'disabled' style on the Continue button // Temp solution to turn on 'disabled' style on the Continue button
// because the form itself actually passes its client-side validation. // because the form itself actually passes its client-side validation.
// SSR-189 Scenario #4. // SSR-189 Scenario #4.
this.$refs.siteFooter.disableForwardButton(); this.$refs.siteFooter.disableForwardButton();
return; return;
} }
// Add vin bcs the response from the service doesn't contain vin // Add vin bcs the response from the service doesn't contain vin
this.vehicleFromLookup = Object.assign(vehicleLookupResponse.data, { vin: this.vin }); this.vehicleFromLookup = Object.assign(vehicleLookupResponse.data, { vin: this.vin });
} }
if (this.needToLookupVehicle && this.isCarIdDifferentFromTheStore) { if (this.needToLookupVehicle && this.isCarIdDifferentFromTheStore) {
if(this.isTwoIdenticalYMMVehicleFound){ if(this.isTwoIdenticalYMMVehicleFound){
@ -187,30 +187,30 @@ export default {
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;
return; return;
} }
let isSelectedGlassAvailableForVehicle = true; let isSelectedGlassAvailableForVehicle = true;
if (this.isCarIdDifferentFromTheStore) { if (this.isCarIdDifferentFromTheStore) {
isSelectedGlassAvailableForVehicle = isSelectedGlassAvailableForVehicle =
await isGlassAvailableForCarId(this.vehicleFromLookup.carId); await isGlassAvailableForCarId(this.vehicleFromLookup.carId);
} }
// navigate back to vehicle-damage // navigate back to vehicle-damage
if (this.isCarIdDifferentFromTheStore && !isSelectedGlassAvailableForVehicle) { if (this.isCarIdDifferentFromTheStore && !isSelectedGlassAvailableForVehicle) {
this.mainStore.updateVehicle(this.vehicleFromLookup); this.mainStore.updateVehicle(this.vehicleFromLookup);
this.$router.navigate( this.$router.navigate(
this.navigationScenarios.SELECTED_VIN_WITH_MISMATCHED_GLASS, this.navigationScenarios.SELECTED_VIN_WITH_MISMATCHED_GLASS,
this.$route, this.$route,
{}, {},
{ [routerParams.DISPLAY_VEHICLE_CHANGE_ALERT]: true } { [routerParams.DISPLAY_VEHICLE_CHANGE_ALERT]: true }
); );
// navigate() doesn't stop the processing flow // navigate() doesn't stop the processing flow
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) {
@ -225,59 +225,59 @@ export default {
return; return;
} }
// Comes from vehicleQuestionsMixin.navigateForward() // Comes from vehicleQuestionsMixin.navigateForward()
await this.navigateForward(partsOrQuestionsResponse.data.partsOrQuestions, this); await this.navigateForward(partsOrQuestionsResponse.data.partsOrQuestions, this);
}, },
async getPartsOrQuestions() { async getPartsOrQuestions() {
try { try {
const response = await this.mainStore.getPartsOrQuestions(); const response = await this.mainStore.getPartsOrQuestions();
return response; return response;
} catch (responseError) { } catch (responseError) {
return { return {
error: { error: {
status: responseError.status, 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) { watch: {
try { vin() {
return await this.mainStore.lookupVehicleByVin(vin); this.resetActiveAlert();
} this.$refs.siteFooter.enableForwardAction();
catch (responseError) { this.needToLookupVehicle = true;
return { this.$refs.siteFooter.updateButtonText(
error: { this.getCmsContent('SiteFooterWidget', 'ForwardButtonText')
status: responseError.status, );
}, }
};
}
}, },
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> </script>
<style> <style>
.overflow-scroll { .overflow-scroll {
height: calc(100% - 368px); height: calc(100% - 180px);
overflow-X: hidden !important; overflow-X: hidden !important;
} }
</style> </style>