Merge pull request #362 from Safelite/feature/digital/SSR-386.2
Fixing display image bug
This commit is contained in:
michaela-brydon-safelite
GitHub
commit
1fcf87e340
3 changed files with 181 additions and 188 deletions
|
|
@ -32,7 +32,8 @@ module.exports = {
|
|||
},
|
||||
svg: 'always',
|
||||
math: 'always'
|
||||
}]
|
||||
}],
|
||||
'import/extensions': ['error', 'always', { vue: 'never' }]
|
||||
},
|
||||
settings: {
|
||||
'import/resolver': {
|
||||
|
|
|
|||
|
|
@ -1,47 +1,49 @@
|
|||
<template>
|
||||
<buttonQuestion
|
||||
:questionText="questionText"
|
||||
<buttonQuestion
|
||||
ref="policyVehiclesQuestion"
|
||||
buttonTypeString="listButton"
|
||||
isOverflowScrollable
|
||||
:answers="answers"
|
||||
v-model="selectedVehicleVin"
|
||||
:questionText="questionText"
|
||||
buttonTypeString="listButton"
|
||||
isOverflowScrollable
|
||||
:answers="answers"
|
||||
isRequired
|
||||
:validation-rules="validationRules" />
|
||||
:validationRules="validationRules" />
|
||||
</template>
|
||||
<script>
|
||||
import buttonQuestion from "@/digital-components/button-question/button-question";
|
||||
import buttonQuestion from '@/digital-components/button-question/button-question.vue';
|
||||
|
||||
export default ({
|
||||
name: "policy-vehicles-question",
|
||||
name: 'policy-vehicles-question',
|
||||
components: {
|
||||
buttonQuestion,
|
||||
buttonQuestion
|
||||
},
|
||||
props:{
|
||||
props: {
|
||||
vehicles: Array,
|
||||
validationRules: String,
|
||||
modelValue: String,
|
||||
validationRules: String,
|
||||
modelValue: String
|
||||
},
|
||||
emits: ['update:modelValue'],
|
||||
computed: {
|
||||
questionText() {
|
||||
return this.getCmsContent("PolicyVehiclesQuestion", "QuestionText");
|
||||
questionText() {
|
||||
return this.getCmsContent('PolicyVehiclesQuestion', 'QuestionText');
|
||||
},
|
||||
answers(){
|
||||
const policyVehiclesAnswerfromCMS = this.getCmsContent("PolicyVehiclesQuestion", "Answers");
|
||||
const combinedVehicles = [...this.vehicles, ...policyVehiclesAnswerfromCMS];
|
||||
answers() {
|
||||
const policyVehiclesAnswerFromCMS = this.getCmsContent('PolicyVehiclesQuestion', 'Answers');
|
||||
const combinedVehicles = [...this.vehicles, ...policyVehiclesAnswerFromCMS];
|
||||
return combinedVehicles;
|
||||
},
|
||||
selectedVehicleVin: {
|
||||
get: function () {
|
||||
get() {
|
||||
return this.modelValue;
|
||||
},
|
||||
set: function (newValue) {
|
||||
this.$emit("update:modelValue", newValue);
|
||||
},
|
||||
},
|
||||
},
|
||||
})
|
||||
set(newValue) {
|
||||
this.$emit('update:modelValue', newValue);
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
</script>
|
||||
<style lang="scss">
|
||||
<style lang="scss" scoped>
|
||||
.question-text {
|
||||
margin-top: 1rem;
|
||||
& > span {
|
||||
|
|
@ -50,4 +52,4 @@ export default ({
|
|||
line-height: 2rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,22 +1,35 @@
|
|||
<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="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="container-fluid pb-2 px-5">
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<div class="select-car-form rounded text-center">
|
||||
<vehicleBanner cmsWidgetName="VehicleBannerWidget" :displayGenericVehicleImage="displayGeneric" class="mt-2 mb-4" />
|
||||
<policyVehiclesQuestion
|
||||
class="px-4"
|
||||
cmsWidgetName="PolicyVehiclesQuestion"
|
||||
:vehicles="VehiclesForQuestions"
|
||||
:validationRules="rules.optionRequired"
|
||||
v-model="selectedVehicleVin"
|
||||
/>
|
||||
<siteFooter cmsWidgetName="SiteFooterWidget" ref="siteFooter" :isForwardActionDisabled="!meta.valid" @ForwardClicked="forwardButtonAction" @back-clicked="backButtonAction"/>
|
||||
<vehicleBanner
|
||||
cmsWidgetName="VehicleBannerWidget"
|
||||
:displayGenericVehicleImage="displayGeneric"
|
||||
class="mt-2 mb-4" />
|
||||
<policyVehiclesQuestion
|
||||
v-model="selectedVehicleVin"
|
||||
class="px-4"
|
||||
cmsWidgetName="PolicyVehiclesQuestion"
|
||||
:vehicles="VehiclesForQuestions"
|
||||
:validationRules="rules.optionRequired" />
|
||||
<siteFooter
|
||||
ref="siteFooter"
|
||||
cmsWidgetName="SiteFooterWidget"
|
||||
:isForwardActionDisabled="!meta.valid"
|
||||
@ForwardClicked="forwardButtonAction"
|
||||
@backClicked="backButtonAction" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -29,69 +42,137 @@
|
|||
<script>
|
||||
// Components
|
||||
import siteHeader from '@/iss-components/site-header/site-header';
|
||||
import siteFooter from "@/iss-components/site-footer/site-footer";
|
||||
import vehicleBanner from "@/iss-components/vehicle-banner/vehicle-banner";
|
||||
import policyVehiclesQuestion from "@/layouts/policy-vehicles/policy-vehicles-question/policy-vehicles-question";
|
||||
import siteFooter from '@/iss-components/site-footer/site-footer';
|
||||
import vehicleBanner from '@/iss-components/vehicle-banner/vehicle-banner';
|
||||
import policyVehiclesQuestion from '@/layouts/policy-vehicles/policy-vehicles-question/policy-vehicles-question';
|
||||
// Supporting files
|
||||
import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
|
||||
import { settleAllPromises } from "@/helpers/layout-helper";
|
||||
import { Form } from "vee-validate";
|
||||
import { fetchCmsContentForPage } from '@/helpers/cms-content-helper.js';
|
||||
import { Form } from 'vee-validate';
|
||||
import BaseFormMixin from '@/mixins/base-form-mixin.js';
|
||||
import { issPageValues } from "@/router/router-constants/issPage-values";
|
||||
import { useMainStore } from '@/store';
|
||||
import globalRules from '@/constants/global-rules';
|
||||
import { vehicleSelectionOptions } from "@/constants/vehicle-selection-options";
|
||||
import { endorsementOptions } from "@/constants/endorsement-options";
|
||||
import { issPageValues } from '@/router/router-constants/issPage-values.js';
|
||||
import { vehicleSelectionOptions } from '@/constants/vehicle-selection-options.js';
|
||||
import { endorsementOptions } from '@/constants/endorsement-options.js';
|
||||
import globalRules from '@/constants/global-rules.js';
|
||||
import { useMainStore } from '@/store/index.js';
|
||||
|
||||
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],
|
||||
async beforeRouteEnter(to, from, next) {
|
||||
const cmsContentPromise = await fetchCmsContentForPage(to.query.issPage);
|
||||
next((vm) => {
|
||||
vm.setCmsContent(cmsContentPromise);
|
||||
});
|
||||
},
|
||||
data() {
|
||||
const policyVehicles = useMainStore().pageData(issPageValues.POLICY_VEHICLES);
|
||||
return {
|
||||
policyVehicles: policyVehicles,
|
||||
selectedVehicleVin: (policyVehicles?.length ?? 0) == 1
|
||||
policyVehicles,
|
||||
selectedVehicleVin: (policyVehicles?.length ?? 0) === 1
|
||||
? policyVehicles[0].vin
|
||||
: "",
|
||||
displayGeneric: true,
|
||||
: '',
|
||||
displayGeneric: (policyVehicles?.length ?? 0) !== 1,
|
||||
bailout: false,
|
||||
rules: {
|
||||
optionRequired: globalRules.OPTION_REQUIRED
|
||||
}
|
||||
};
|
||||
},
|
||||
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)
|
||||
{
|
||||
// Call APIs
|
||||
const cmsContentPromise = fetchCmsContentForPage(to.query.issPage);
|
||||
// Settle promises and get results
|
||||
const promiseResultMap = [
|
||||
{
|
||||
resultKey: "cmsContent",
|
||||
promise: cmsContentPromise,
|
||||
},
|
||||
];
|
||||
//use resultMap to populate layout content.
|
||||
let resultMap = await settleAllPromises(promiseResultMap);
|
||||
next((vm) => {
|
||||
vm.setCmsContent(resultMap.cmsContent);
|
||||
});
|
||||
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 = false;
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
methods:
|
||||
methods:
|
||||
{
|
||||
backButtonAction() {
|
||||
backButtonAction() {
|
||||
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() {
|
||||
if (this.selectedVehicleVin != vehicleSelectionOptions.VEHICLE_NOT_LISTED){
|
||||
const vehicleLookupResponse = await this.lookupVehicleByVin(this.selectedVehicleVin);
|
||||
if (vehicleLookupResponse.error) {
|
||||
if (this.selectedVehicleVin !== vehicleSelectionOptions.VEHICLE_NOT_LISTED) {
|
||||
const vehicleLookupResponse
|
||||
= await this.lookupVehicleByVin(this.selectedVehicleVin);
|
||||
if (vehicleLookupResponse.error) {
|
||||
this.bailout = true;
|
||||
return this.navigateForward();
|
||||
return this.navigateForward();
|
||||
}
|
||||
|
||||
this.vehicleFromLookup = Object.assign(vehicleLookupResponse.data, {
|
||||
this.vehicleFromLookup = Object.assign(vehicleLookupResponse.data, {
|
||||
vin: this.selectedVehicleVin,
|
||||
noCompensation: this.noCompensationForSelectedVehicle,
|
||||
deductible: this.deductibleForSelectedVehicle,
|
||||
|
|
@ -103,128 +184,37 @@ export default {
|
|||
return this.navigateForward();
|
||||
},
|
||||
navigateForward() {
|
||||
if(this.bailout)
|
||||
this.$router.navigate(
|
||||
this.navigationScenarios.CLICKED_FORWARD_WITH_BAILOUT,
|
||||
if (this.bailout) {
|
||||
this.$router.navigate(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,
|
||||
{},
|
||||
{}
|
||||
);
|
||||
else if(this.selectedVehicleVin == vehicleSelectionOptions.VEHICLE_NOT_LISTED)
|
||||
this.$router.navigate(
|
||||
this.navigationScenarios.CLICKED_FORWARD_NON_LISTED_VEHICLE,
|
||||
{});
|
||||
} else {
|
||||
this.$router.navigate(this.navigationScenarios.CLICKED_FORWARD_LISTED_VEHICLE,
|
||||
this.$route,
|
||||
{},
|
||||
{}
|
||||
);
|
||||
else
|
||||
this.$router.navigate(
|
||||
this.navigationScenarios.CLICKED_FORWARD_LISTED_VEHICLE,
|
||||
this.$route,
|
||||
{},
|
||||
{}
|
||||
);
|
||||
{});
|
||||
}
|
||||
},
|
||||
async lookupVehicleByVin(vin) {
|
||||
try {
|
||||
return await useMainStore().lookupVehicleByVin(vin);
|
||||
}
|
||||
catch (responseError) {
|
||||
} catch (responseError) {
|
||||
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>
|
||||
<style lang="scss">
|
||||
<style lang="scss" scoped>
|
||||
.header{
|
||||
margin-bottom: 0rem !important;
|
||||
}
|
||||
|
|
@ -233,4 +223,4 @@ export default {
|
|||
margin-top: 0rem !important;
|
||||
line-height: 1.50rem;
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Reference in a new issue