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

Fixing display image bug

Browse source
This commit is contained in:
brydon1 2023-07-11 14:40:31 -04:00
parent d3fa094f72
commit d52b8d6577
2 changed files with 182 additions and 190 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

54
src/layouts/policy-vehicles/policy-vehicles-question/policy-vehicles-question.vue
View file

@ -1,47 +1,49 @@
<template> <template>
<buttonQuestion <buttonQuestion
:questionText="questionText"
ref="policyVehiclesQuestion" ref="policyVehiclesQuestion"
buttonTypeString="listButton"
isOverflowScrollable
:answers="answers"
v-model="selectedVehicleVin" v-model="selectedVehicleVin"
:questionText="questionText"
buttonTypeString="listButton"
isOverflowScrollable
:answers="answers"
isRequired isRequired
:validation-rules="validationRules" /> :validationRules="validationRules" />
</template> </template>
<script> <script>
import buttonQuestion from "@/digital-components/button-question/button-question"; import buttonQuestion from '@/digital-components/button-question/button-question.vue';
export default ({ export default ({
name: "policy-vehicles-question", name: 'policy-vehicles-question',
components: { components: {
buttonQuestion, buttonQuestion
}, },
props:{ props: {
vehicles: Array, vehicles: Array,
validationRules: String, validationRules: String,
modelValue: String, modelValue: String
}, },
emits: ['update:modelValue'],
computed: { computed: {
questionText() { questionText() {
return this.getCmsContent("PolicyVehiclesQuestion", "QuestionText"); return this.getCmsContent('PolicyVehiclesQuestion', 'QuestionText');
}, },
answers(){ answers() {
const policyVehiclesAnswerfromCMS = this.getCmsContent("PolicyVehiclesQuestion", "Answers"); const policyVehiclesAnswerFromCMS = this.getCmsContent('PolicyVehiclesQuestion', 'Answers');
const combinedVehicles = [...this.vehicles, ...policyVehiclesAnswerfromCMS]; const combinedVehicles = [...this.vehicles, ...policyVehiclesAnswerFromCMS];
return combinedVehicles; return combinedVehicles;
}, },
selectedVehicleVin: { selectedVehicleVin: {
get: function () { get() {
return this.modelValue; return this.modelValue;
}, },
set: function (newValue) { set(newValue) {
this.$emit("update:modelValue", newValue); this.$emit('update:modelValue', newValue);
}, }
}, }
}, }
}) });
</script> </script>
<style lang="scss"> <style lang="scss" scoped>
.question-text { .question-text {
margin-top: 1rem; margin-top: 1rem;
& > span { & > span {
@ -50,4 +52,4 @@ export default ({
line-height: 2rem; line-height: 2rem;
} }
} }
</style> </style>

318
src/layouts/policy-vehicles/policy-vehicles.vue
View file

@ -1,22 +1,35 @@
<template> <template>
<Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm" v-slot="{ meta }" > <Form
ref="theForm"
v-slot="{ meta }"
@submit="onSubmit"
@invalidSubmit="onInvalidSubmit">
<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 class="mb-2 header" cmsWidgetName="SiteHeaderWidget"/> <siteHeader
class="mb-2 header"
cmsWidgetName="SiteHeaderWidget" />
<div class="select-car"> <div class="select-car">
<div class="container-fluid pb-2 px-5"> <div class="container-fluid pb-2 px-5">
<div class="row"> <div class="row">
<div class="col"> <div class="col">
<div class="select-car-form rounded text-center"> <div class="select-car-form rounded text-center">
<vehicleBanner cmsWidgetName="VehicleBannerWidget" :displayGenericVehicleImage="displayGeneric" class="mt-2 mb-4" /> <vehicleBanner
<policyVehiclesQuestion cmsWidgetName="VehicleBannerWidget"
class="px-4" :displayGenericVehicleImage="displayGeneric"
cmsWidgetName="PolicyVehiclesQuestion" class="mt-2 mb-4" />
:vehicles="VehiclesForQuestions" <policyVehiclesQuestion
validationRules="option-required" v-model="selectedVehicleVin"
v-model="selectedVehicleVin" class="px-4"
/> cmsWidgetName="PolicyVehiclesQuestion"
<siteFooter cmsWidgetName="SiteFooterWidget" ref="siteFooter" :isForwardActionDisabled="!meta.valid" @ForwardClicked="forwardButtonAction" @back-clicked="backButtonAction"/> :vehicles="VehiclesForQuestions"
validationRules="option-required" />
<siteFooter
ref="siteFooter"
cmsWidgetName="SiteFooterWidget"
:isForwardActionDisabled="!meta.valid"
@ForwardClicked="forwardButtonAction"
@backClicked="backButtonAction" />
</div> </div>
</div> </div>
</div> </div>
@ -28,70 +41,138 @@
</template> </template>
<script> <script>
// Components // Components
import siteHeader from '@/iss-components/site-header/site-header'; import siteHeader from '@/iss-components/site-header/site-header.vue';
import siteFooter from "@/iss-components/site-footer/site-footer"; import siteFooter from '@/iss-components/site-footer/site-footer.vue';
import vehicleBanner from "@/iss-components/vehicle-banner/vehicle-banner"; import vehicleBanner from '@/iss-components/vehicle-banner/vehicle-banner.vue';
import policyVehiclesQuestion from "@/layouts/policy-vehicles/policy-vehicles-question/policy-vehicles-question"; import policyVehiclesQuestion from '@/layouts/policy-vehicles/policy-vehicles-question/policy-vehicles-question.vue';
// Supporting files // Supporting files
import { fetchCmsContentForPage } from "@/helpers/cms-content-helper"; import { fetchCmsContentForPage } from '@/helpers/cms-content-helper';
import { settleAllPromises } from "@/helpers/layout-helper"; import { required } from '@/helpers/validation-rules';
import { required } from "@/helpers/validation-rules"; import { Form, defineRule } from 'vee-validate';
import { Form, defineRule } from "vee-validate"; import BaseFormMixin from '@/mixins/base-form-mixin';
import BaseFormMixin from '@/mixins/base-form-mixin.js'; import { issPageValues } from '@/router/router-constants/issPage-values';
import { issPageValues } from "@/router/router-constants/issPage-values";
import { useMainStore } from '@/store'; import { useMainStore } from '@/store';
import { errorMessages } from "@/constants/error-messages"; import { errorMessages } from '@/constants/error-messages';
import { vehicleSelectionOptions } from "@/constants/vehicle-selection-options"; import { vehicleSelectionOptions } from '@/constants/vehicle-selection-options';
import { endorsementOptions } from "@/constants/endorsement-options"; import { endorsementOptions } from '@/constants/endorsement-options';
// DEFINE VALIDATION RULES // DEFINE VALIDATION RULES
defineRule("option-required", required(errorMessages.OPTION_REQUIRED)); defineRule('option-required', required(errorMessages.OPTION_REQUIRED));
export default { export default {
name: "policy-vehicles", name: 'policy-vehicles',
components: {
siteHeader,
siteFooter,
vehicleBanner,
policyVehiclesQuestion,
// eslint-disable-next-line vue/no-reserved-component-names
Form
},
mixins: [BaseFormMixin], mixins: [BaseFormMixin],
async beforeRouteEnter(to, from, next) {
const cmsContentPromise = await fetchCmsContentForPage(to.query.issPage);
next((vm) => {
vm.setCmsContent(cmsContentPromise);
});
},
data() { data() {
const policyVehicles = useMainStore().pageData(issPageValues.POLICY_VEHICLES); const policyVehicles = useMainStore().pageData(issPageValues.POLICY_VEHICLES);
return { return {
policyVehicles: policyVehicles, policyVehicles,
selectedVehicleVin: (policyVehicles?.length ?? 0) == 1 selectedVehicleVin: (policyVehicles?.length ?? 0) === 1
? policyVehicles[0].vin ? policyVehicles[0].vin
: "", : '',
displayGeneric: true, displayGeneric: (policyVehicles?.length ?? 0) !== 1,
bailout: false bailout: false
};
},
computed: {
VehiclesForQuestions() {
// Map API result data, to address-vehicles data structure
const vehicles = this.policyVehicles;
const mappedData = vehicles?.map((v) => {
const maskSymbol = 'X';
const vinStart = maskSymbol.repeat(v.vin.length - 6);
const vinEnd = v.vin.substring(v.vin.length - 6);
return {
vin: v.vin,
vehicle: v,
Text: `${v.vehicleYear} ${v.vehicleMake} ${v.vehicleModel}`,
Name: v.vin,
SubText: `VIN ${vinStart}${vinEnd}`
};
}) ?? [];
return mappedData;
},
noCompensationForSelectedVehicle() {
const vehicle = this.policyVehicles.find((policyVehicle) =>
policyVehicle.vin === this.selectedVehicleVin);
return (vehicle?.coverages?.length ?? 0) === 0;
},
deductibleForSelectedVehicle() {
const vehicle = this.policyVehicles.find((policyVehicle) =>
policyVehicle?.vin === this.selectedVehicleVin);
if (!vehicle) {
return undefined;
}
return vehicle.coverages?.length ?? false
? vehicle?.coverages[0].deductible
: 0;
},
repairWaivedForSelectedVehicle() {
const vehicle = this.policyVehicles.find((policyVehicle) =>
policyVehicle.vin === this.selectedVehicleVin);
return vehicle?.endorsements?.includes(endorsementOptions.REPAIR_WAIVED) ?? false;
},
VehiclesFromApi() {
return useMainStore().pageData(issPageValues.POLICY_VEHICLES);
},
selectedVehicle() {
const vehicle = this.mainStore.lookupVehicleByVin(this.selectedVehicleVin);
return vehicle;
} }
}, },
async beforeRouteEnter(to, from, next) watch: {
{ async selectedVehicleVin(value) {
// Call APIs if (value === vehicleSelectionOptions.VEHICLE_NOT_LISTED) {
const cmsContentPromise = fetchCmsContentForPage(to.query.issPage); // clear previously selected vehicle and image
// Settle promises and get results this.mainStore.resetVehicleState();
const promiseResultMap = [ this.displayGeneric = true;
{ } else {
resultKey: "cmsContent", // get vehicle details from selected VIN
promise: cmsContentPromise, const vehicle = await this.lookupVehicleByVin(value);
},
]; // handle error in case vehicle info doesn't come back for selected VIN
//use resultMap to populate layout content. if (vehicle?.error === true) {
let resultMap = await settleAllPromises(promiseResultMap); this.mainStore.resetVehicleState();
next((vm) => { this.displayGeneric = true;
vm.setCmsContent(resultMap.cmsContent); return;
}); }
if (vehicle) {
// save selected vehicle to the store
this.mainStore.updateVehicle(vehicle.data);
this.displayGeneric = false;
}
}
}
}, },
methods: methods:
{ {
backButtonAction() { backButtonAction() {
useMainStore().issConfig.disabledFields.policyNumber = true; useMainStore().issConfig.disabledFields.policyNumber = true;
this.$router.navigate(this.navigationScenarios.CLICKED_BACK, this.$route); this.$router.navigate(this.navigationScenarios.CLICKED_BACK, this.$route);
}, },
async forwardButtonAction() { async forwardButtonAction() {
if (this.selectedVehicleVin != vehicleSelectionOptions.VEHICLE_NOT_LISTED){ if (this.selectedVehicleVin !== vehicleSelectionOptions.VEHICLE_NOT_LISTED) {
const vehicleLookupResponse = await this.lookupVehicleByVin(this.selectedVehicleVin); const vehicleLookupResponse
if (vehicleLookupResponse.error) { = await this.lookupVehicleByVin(this.selectedVehicleVin);
if (vehicleLookupResponse.error) {
this.bailout = true; this.bailout = true;
return this.navigateForward(); return this.navigateForward();
} }
this.vehicleFromLookup = Object.assign(vehicleLookupResponse.data, { this.vehicleFromLookup = Object.assign(vehicleLookupResponse.data, {
vin: this.selectedVehicleVin, vin: this.selectedVehicleVin,
noCompensation: this.noCompensationForSelectedVehicle, noCompensation: this.noCompensationForSelectedVehicle,
deductible: this.deductibleForSelectedVehicle, deductible: this.deductibleForSelectedVehicle,
@ -103,128 +184,37 @@ export default {
return this.navigateForward(); return this.navigateForward();
}, },
navigateForward() { navigateForward() {
if(this.bailout) if (this.bailout) {
this.$router.navigate( this.$router.navigate(this.navigationScenarios.CLICKED_FORWARD_WITH_BAILOUT,
this.navigationScenarios.CLICKED_FORWARD_WITH_BAILOUT, this.$route,
{},
{});
} else if (this.selectedVehicleVin === vehicleSelectionOptions.VEHICLE_NOT_LISTED) {
this.$router
.navigate(this.navigationScenarios.CLICKED_FORWARD_NON_LISTED_VEHICLE,
this.$route, this.$route,
{}, {},
{} {});
); } else {
else if(this.selectedVehicleVin == vehicleSelectionOptions.VEHICLE_NOT_LISTED) this.$router.navigate(this.navigationScenarios.CLICKED_FORWARD_LISTED_VEHICLE,
this.$router.navigate(
this.navigationScenarios.CLICKED_FORWARD_NON_LISTED_VEHICLE,
this.$route, this.$route,
{}, {},
{} {});
); }
else
this.$router.navigate(
this.navigationScenarios.CLICKED_FORWARD_LISTED_VEHICLE,
this.$route,
{},
{}
);
}, },
async lookupVehicleByVin(vin) { async lookupVehicleByVin(vin) {
try { try {
return await useMainStore().lookupVehicleByVin(vin); return await useMainStore().lookupVehicleByVin(vin);
} } catch (responseError) {
catch (responseError) {
return { return {
error: true, error: true
}; };
} }
},
},
computed:{
VehiclesForQuestions() {
// Map API result data, to address-vehicles data structure
const vehicles = this.policyVehicles;
const mappedData = vehicles?.map((v) => {
const maskSymbol = "X";
const vinStart = maskSymbol.repeat(v.vin.length - 6);
const vinEnd = v.vin.substring(v.vin.length - 6);
return {
vin: v.vin,
vehicle: v,
Text: v.vehicleYear + " " + v.vehicleMake + " " + v.vehicleModel,
Name: v.vin,
SubText: "VIN " + vinStart + vinEnd,
};
}) ?? [];
return mappedData;
},
noCompensationForSelectedVehicle() {
const vehicle = this.policyVehicles.find((vehicle) => { return vehicle.vin == this.selectedVehicleVin; });
return (vehicle?.coverages?.length ?? 0) == 0;
},
deductibleForSelectedVehicle() {
const vehicle = this.policyVehicles.find((vehicle) => { return vehicle?.vin == this.selectedVehicleVin; });
if (!vehicle){
return undefined;
}
return vehicle.coverages?.length ?? false
? vehicle?.coverages[0].deductible
: 0;
},
repairWaivedForSelectedVehicle() {
const vehicle = this.policyVehicles.find((vehicle) => { return vehicle.vin == this.selectedVehicleVin; });
return vehicle?.endorsements?.includes(endorsementOptions.REPAIR_WAIVED) ?? false;
},
VehiclesFromApi() {
return useMainStore().pageData(issPageValues.POLICY_VEHICLES);
},
selectedVehicle() {
const vehicle = this.mainStore.lookupVehicleByVin(this.selectedVehicleVin);
return vehicle;
},
},
watch: {
async selectedVehicleVin(value) {
if (value === vehicleSelectionOptions.VEHICLE_NOT_LISTED) {
// clear previously selected vehicle and image
this.mainStore.resetVehicleState();
this.displayGeneric = true;
}
else {
// get vehicle details from selected VIN
const vehicle = await this.lookupVehicleByVin(value);
// handle error in case vehicle info doesn't come back for selected VIN
if (vehicle?.error === true) {
this.mainStore.resetVehicleState();
this.displayGeneric = true;
return;
}
if (vehicle) {
// save selected vehicle to the store
this.mainStore.updateVehicle(vehicle.data);
this.displayGeneric = true;
// get the style(s) associated with the selected YMM
const styleOptions = await this.mainStore.getVehicleStyles(
vehicle.data.year,
vehicle.data.make,
vehicle.data.model,
);
// if there is more than 1 style for the selected vehicle, display generic/blurred image
this.displayGeneric = styleOptions?.data?.length > 1;
}
}
} }
}, }
components: { };
siteHeader,
siteFooter,
vehicleBanner,
policyVehiclesQuestion,
Form,
},
}
</script> </script>
<style lang="scss"> <style lang="scss" scoped>
.header{ .header{
margin-bottom: 0rem !important; margin-bottom: 0rem !important;
} }
@ -233,4 +223,4 @@ export default {
margin-top: 0rem !important; margin-top: 0rem !important;
line-height: 1.50rem; line-height: 1.50rem;
} }
</style> </style>