Merge branch 'develop' into feature/digital/SSR-448
This commit is contained in:
Kroell
commit
05c7e247a7
14 changed files with 591 additions and 79 deletions
|
|
@ -37,7 +37,12 @@ const errorMessages = {
|
|||
|
||||
POLICYHOLDER_FIRST_NAME_REQUIRED: "Please enter the policyholder first name",
|
||||
POLICYHOLDER_LAST_NAME_REQUIRED: "Please enter the policyholder last name",
|
||||
ACKNOWLEDGEMENT_REQUIRED: "You must agree to the terms to continue"
|
||||
ACKNOWLEDGEMENT_REQUIRED: "You must agree to the terms to continue",
|
||||
|
||||
YEAR_REQUIRED: "Please select your vehicle year",
|
||||
MAKE_REQUIRED: "Please select your vehicle make",
|
||||
MODEL_REQUIRED: "Please select your vehicle model",
|
||||
STYLE_REQUIRED: "Please select your vehicle style"
|
||||
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -147,6 +147,11 @@
|
|||
this.mainStore.issConfig.disabledFields.policyNumber = true;
|
||||
break;
|
||||
|
||||
case "policyzipcode":
|
||||
this.mainStore.order.policy.policyZipCode = value;
|
||||
this.mainStore.issConfig.disabledFields.policyZipCode = true;
|
||||
break;
|
||||
|
||||
case "lossdate":
|
||||
// NOTE: May need some date parsing logic in here depending on client.
|
||||
this.mainStore.order.policy.dateOfLoss = value;
|
||||
|
|
@ -167,7 +172,7 @@
|
|||
break;
|
||||
}
|
||||
}
|
||||
},
|
||||
}
|
||||
},
|
||||
computed:{
|
||||
},
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
<div class="page-container-grouped-styles">
|
||||
<div class="fade-on-route-transition position-relative">
|
||||
<siteHeader cmsWidgetName="SiteHeaderWidget" />
|
||||
<siteSubHeader cmsWidgetName="SiteSubHeaderWidget" id="sub-header" />
|
||||
<siteSubHeader cmsWidgetName="SiteSubHeaderWidget" id="sub-header" class="mt-5" />
|
||||
<div class="select-car">
|
||||
<div class="container-fluid pb-2">
|
||||
<div class="row px-3">
|
||||
|
|
|
|||
|
|
@ -95,9 +95,12 @@ export default {
|
|||
name: "vehicle-damage",
|
||||
mixins: [BaseFormMixin],
|
||||
async beforeRouteEnter(to, from, next) {
|
||||
|
||||
const store = useMainStore();
|
||||
|
||||
// Call APIs
|
||||
const cmsContentPromise = fetchCmsContentForPage(to.query.issPage);
|
||||
const damageOptionsPromise = useMainStore().getDamageOptions(useMainStore().order.vehicle.carId);
|
||||
const damageOptionsPromise = store.getDamageOptions(store.order.vehicle.carId);
|
||||
|
||||
// Settle promises and get results
|
||||
const promiseResultMap = [
|
||||
|
|
|
|||
|
|
@ -108,7 +108,7 @@ data() {
|
|||
},
|
||||
computed: {
|
||||
isForwardActionDisabled() {
|
||||
return this.selectedGlassPartNumbers.length !== this.PartsFromApi.partsOrQuestions.length
|
||||
return this.selectedGlassPartNumbers?.length !== this.PartsFromApi.partsOrQuestions?.length
|
||||
},
|
||||
selectedGlassPartNumbers() {
|
||||
// Compile all selected parts from the page.
|
||||
|
|
@ -124,7 +124,7 @@ computed: {
|
|||
const partsData = this.PartsFromApi;
|
||||
|
||||
// Map API result data, to vehicle-parts data structure
|
||||
const mappedData = partsData.partsOrQuestions.map((g) => {
|
||||
const mappedData = partsData.partsOrQuestions?.map((g) => {
|
||||
return {
|
||||
glassName: g.glassName,
|
||||
glassLocation: g.glassLocation,
|
||||
|
|
|
|||
|
|
@ -0,0 +1,76 @@
|
|||
<template>
|
||||
<dropdownQuestion
|
||||
cmsWidgetName="VehicleMakeQuestion"
|
||||
ref="makeQuestion"
|
||||
:options="makeOptions"
|
||||
disableAutoFill
|
||||
placeHolderText="Select an option"
|
||||
validationRules="make-required"
|
||||
inputId="makeQuestionField"
|
||||
v-model="selectedValue"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
import dropdownQuestion from '@/digital-components/dropdown-question/dropdown-question.vue';
|
||||
|
||||
import { errorMessages } from "@/constants/error-messages";
|
||||
import { required } from "@/helpers/validation-rules";
|
||||
import { defineRule } from "vee-validate";
|
||||
|
||||
defineRule("make-required", required(errorMessages.MAKE_REQUIRED));
|
||||
|
||||
export default {
|
||||
name: "make-question",
|
||||
data() {
|
||||
return {
|
||||
values: [],
|
||||
};
|
||||
},
|
||||
props: {
|
||||
modelValue: String,
|
||||
cmsWidgetName: String,
|
||||
validationRules: String,
|
||||
updateValues: Function,
|
||||
},
|
||||
components: {
|
||||
dropdownQuestion
|
||||
},
|
||||
computed: {
|
||||
questionText(){
|
||||
return this.getCmsContent(this.cmsWidgetName, 'QuestionText');
|
||||
},
|
||||
selectedValue: {
|
||||
get: function() {
|
||||
return this.modelValue;
|
||||
},
|
||||
set: function(newValue) {
|
||||
this.$emit("update:modelValue",newValue);
|
||||
}
|
||||
},
|
||||
makeOptions() {
|
||||
const makeAnswers = this.values;
|
||||
const makeAnswersObj ={};
|
||||
if(makeAnswers)
|
||||
{
|
||||
for (let answer of Object.values(makeAnswers)) {
|
||||
if (answer) {
|
||||
makeAnswersObj[answer] = answer;
|
||||
}
|
||||
}
|
||||
}
|
||||
return makeAnswersObj
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
async getNewValues() {
|
||||
const results = await this.updateValues();
|
||||
this.values = results?.data;
|
||||
},
|
||||
initializeComponent(initialData) {
|
||||
this.values = initialData;
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
|
@ -0,0 +1,77 @@
|
|||
<template>
|
||||
<dropdownQuestion
|
||||
cmsWidgetName="VehicleModelQuestion"
|
||||
ref="modelQuestion"
|
||||
:options="modelOptions"
|
||||
disableAutoFill
|
||||
placeHolderText="Select an option"
|
||||
validationRules="model-required"
|
||||
inputId="modelQuestionField"
|
||||
v-model="selectedValue"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
import dropdownQuestion from '@/digital-components/dropdown-question/dropdown-question.vue';
|
||||
|
||||
import { errorMessages } from "@/constants/error-messages";
|
||||
import { required } from "@/helpers/validation-rules";
|
||||
import { defineRule } from "vee-validate";
|
||||
|
||||
defineRule("model-required", required(errorMessages.MODEL_REQUIRED));
|
||||
|
||||
|
||||
export default {
|
||||
name: "model-question",
|
||||
data() {
|
||||
return {
|
||||
values: Array,
|
||||
};
|
||||
},
|
||||
props: {
|
||||
modelValue: String,
|
||||
cmsWidgetName: String,
|
||||
validationRules: String,
|
||||
updateValues: Function,
|
||||
},
|
||||
components: {
|
||||
dropdownQuestion
|
||||
},
|
||||
computed: {
|
||||
questionText(){
|
||||
return this.getCmsContent(this.cmsWidgetName, 'QuestionText');
|
||||
},
|
||||
modelOptions() {
|
||||
const modelAnswers = this.values;
|
||||
const modelAnswersObj ={};
|
||||
if(modelAnswers)
|
||||
{
|
||||
for (let answer of Object.values(modelAnswers)) {
|
||||
if (answer) {
|
||||
modelAnswersObj[answer] = answer;
|
||||
}
|
||||
}
|
||||
}
|
||||
return modelAnswersObj
|
||||
},
|
||||
selectedValue: {
|
||||
get: function() {
|
||||
return this.modelValue
|
||||
},
|
||||
set: function(newValue) {
|
||||
this.$emit("update:modelValue", newValue);
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
async getNewValues() {
|
||||
const results = await this.updateValues();
|
||||
this.values = results?.data;
|
||||
},
|
||||
initializeComponent(initialData) {
|
||||
this.values = initialData;
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
|
@ -0,0 +1,76 @@
|
|||
<template>
|
||||
<dropdownQuestion
|
||||
cmsWidgetName="VehicleStyleQuestion"
|
||||
ref="styleQuestion"
|
||||
:options="styleOptions"
|
||||
disableAutoFill
|
||||
placeHolderText="Select an option"
|
||||
validationRules="style-required"
|
||||
inputId="styleQuestionField"
|
||||
v-model="selectedValue"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
import dropdownQuestion from '@/digital-components/dropdown-question/dropdown-question.vue';
|
||||
import { errorMessages } from "@/constants/error-messages";
|
||||
import { required } from "@/helpers/validation-rules";
|
||||
import { defineRule } from "vee-validate";
|
||||
|
||||
defineRule("style-required", required(errorMessages.STYLE_REQUIRED));
|
||||
|
||||
|
||||
export default {
|
||||
name: "style-question",
|
||||
data() {
|
||||
return {
|
||||
values: [],
|
||||
};
|
||||
},
|
||||
props: {
|
||||
modelValue: String,
|
||||
cmsWidgetName: String,
|
||||
validationRules: String,
|
||||
updateValues: Function,
|
||||
},
|
||||
components: {
|
||||
dropdownQuestion
|
||||
},
|
||||
computed: {
|
||||
questionText(){
|
||||
return this.getCmsContent(this.cmsWidgetName, 'QuestionText');
|
||||
},
|
||||
styleOptions() {
|
||||
const styleAnswers = this.values;
|
||||
const styleAnswersObj ={};
|
||||
if(styleAnswers)
|
||||
{
|
||||
for (let answer of Object.values(styleAnswers)) {
|
||||
if (answer) {
|
||||
styleAnswersObj[answer] = answer;
|
||||
}
|
||||
}
|
||||
}
|
||||
return styleAnswersObj
|
||||
},
|
||||
selectedValue: {
|
||||
get: function() {
|
||||
return this.modelValue
|
||||
},
|
||||
set: function(newValue) {
|
||||
this.$emit("update:modelValue", newValue);
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
async getNewValues() {
|
||||
const results = await this.updateValues();
|
||||
this.values = results?.data;
|
||||
},
|
||||
initializeComponent(initialData) {
|
||||
this.values = initialData;
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
183
src/layouts/vehicle-selection/vehicle-selection.vue
Normal file
183
src/layouts/vehicle-selection/vehicle-selection.vue
Normal file
|
|
@ -0,0 +1,183 @@
|
|||
<template>
|
||||
<Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm" v-slot="{ meta }" >
|
||||
<div class="page-container-grouped-styles position-relative">
|
||||
<div class="fade-on-route-transition position-relative">
|
||||
<siteHeader cmsWidgetName="SiteHeaderWidget" />
|
||||
<div class="select-car">
|
||||
<div class="container-fluid pb-2">
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<div class="select-car-form rounded">
|
||||
<siteSubHeader cmsWidgetName="SiteSubHeaderWidget" class="subheader" />
|
||||
<yearQuestion class="px-4 mb-2 mt-4" v-model="selectedYear" ref="yearQuestion" />
|
||||
<makeQuestion class="px-4 mb-2 mt-4" v-model="selectedMake" :updateValues="updateMakeValues" ref="makeQuestion"/>
|
||||
<modelQuestion v-model="selectedModel" :updateValues="updateModelValues" ref="modelQuestion" class="px-4 mb-2 mt-4"/>
|
||||
<styleQuestion v-model="selectedStyle" :updateValues="updateStyleValues" ref="styleQuestion" class="px-4 mb-2 mt-4"/>
|
||||
<vehicleBanner cmsWidgetName="VehicleBannerWidget" :displayGenericVehicleImage="true" class="mt-2 mb-3" />
|
||||
<siteFooter
|
||||
cmsWidgetName="SiteFooterWidget"
|
||||
@ForwardClicked="forwardButtonAction"
|
||||
:isForwardActionDisabled="!meta.valid"
|
||||
@back-clicked="backButtonAction"
|
||||
ref="siteFooter"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Form>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// Components
|
||||
import siteHeader from "@/iss-components/site-header/site-header";
|
||||
import siteFooter from "@/iss-components/site-footer/site-footer";
|
||||
import siteSubHeader from "@/iss-components/site-sub-header/site-sub-header";
|
||||
import vehicleBanner from "@/iss-components/vehicle-banner/vehicle-banner";
|
||||
import yearQuestion from "@/layouts/vehicle-selection/year-question/year-question";
|
||||
import makeQuestion from "@/layouts/vehicle-selection/make-question/make-question";
|
||||
import modelQuestion from "@/layouts/vehicle-selection/model-question/model-question";
|
||||
import styleQuestion from "@/layouts/vehicle-selection/style-question/style-question";
|
||||
|
||||
// Supporting files
|
||||
import BaseFormMixin from '@/mixins/base-form-mixin.js';
|
||||
import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
|
||||
import { settleAllPromises } from "@/helpers/layout-helper";
|
||||
import {Form} from "vee-validate";
|
||||
|
||||
export default {
|
||||
name: "vehicle-selection",
|
||||
mixins: [BaseFormMixin],
|
||||
data() {
|
||||
return {
|
||||
selectedYear: null,
|
||||
selectedMake: null,
|
||||
selectedModel: null,
|
||||
selectedStyle: null,
|
||||
years: []
|
||||
};
|
||||
},
|
||||
|
||||
async beforeRouteEnter(to, from, next) {
|
||||
// Call APIs
|
||||
const cmsContentPromise = fetchCmsContentForPage(to.query.issPage);
|
||||
const yearQuestionInitialDataPromise = yearQuestion.methods.loadInitialData();
|
||||
const makeQuestionInitialDataPromise = makeQuestion.methods.getNewValues();
|
||||
const modelQuestionInitialDataPromise = modelQuestion.methods.getNewValues();
|
||||
const styleQuestionInitialDataPromise = styleQuestion.methods.getNewValues();
|
||||
|
||||
// Settle promises and get results
|
||||
const promiseResultMap = [
|
||||
{
|
||||
resultKey: "cmsContent",
|
||||
promise: cmsContentPromise,
|
||||
},
|
||||
{
|
||||
resultKey: "yearQuestionInitialData",
|
||||
promise: yearQuestionInitialDataPromise,
|
||||
},
|
||||
{
|
||||
resultKey: "makeQuestionInitialData",
|
||||
promise: makeQuestionInitialDataPromise,
|
||||
},
|
||||
{
|
||||
resultKey: "modelQuestionInitialData",
|
||||
promise: modelQuestionInitialDataPromise,
|
||||
},
|
||||
{
|
||||
resultKey: "styleQuestionInitialData",
|
||||
promise: styleQuestionInitialDataPromise,
|
||||
},
|
||||
|
||||
];
|
||||
|
||||
let resultMap = await settleAllPromises(promiseResultMap);
|
||||
|
||||
// Call the "next" function to complete the transition to this page.
|
||||
next((vm) => {
|
||||
vm.years = resultMap.yearQuestionInitialData;
|
||||
vm.setCmsContent(resultMap.cmsContent);
|
||||
vm.$refs.yearQuestion.initializeComponent(
|
||||
resultMap.yearQuestionInitialData
|
||||
);
|
||||
vm.$refs.makeQuestion.initializeComponent(
|
||||
resultMap.makeQuestionInitialData
|
||||
);
|
||||
|
||||
vm.$refs.modelQuestion.initializeComponent(
|
||||
resultMap.modelQuestionInitialData
|
||||
);
|
||||
vm.$refs.styleQuestion.initializeComponent(
|
||||
resultMap.styleQuestionInitialData
|
||||
);
|
||||
});
|
||||
|
||||
},
|
||||
watch: {
|
||||
selectedYear(yearIndex) {
|
||||
const parsedYearIndex = parseInt(yearIndex);
|
||||
this.mainStore.updateVehicleYear( this.years[parsedYearIndex] );
|
||||
|
||||
this.$refs["makeQuestion"].getNewValues();
|
||||
|
||||
},
|
||||
selectedMake(make) {
|
||||
this.mainStore.updateVehicleMake( make );
|
||||
this.$refs["modelQuestion"].getNewValues();
|
||||
},
|
||||
selectedModel(model) {
|
||||
this.mainStore.updateVehicleModel( model );
|
||||
this.$refs["styleQuestion"].getNewValues();
|
||||
},
|
||||
selectedStyle(style) {
|
||||
this.mainStore.updateVehicleStyle( style );
|
||||
},
|
||||
},
|
||||
|
||||
methods: {
|
||||
arePagePrerequisitesValid() {
|
||||
|
||||
return true;
|
||||
},
|
||||
backButtonAction() {
|
||||
this.$router.navigate(this.navigationScenarios.CLICKED_BACK, this.$route);
|
||||
},
|
||||
async forwardButtonAction() {
|
||||
return this.navigateForward();
|
||||
},
|
||||
|
||||
navigateForward() {
|
||||
this.mainStore.setVehicle().then(() => {
|
||||
this.$router.navigate(
|
||||
this.navigationScenarios.CLICKED_FORWARD,
|
||||
this.$route
|
||||
);
|
||||
});
|
||||
},
|
||||
async updateMakeValues() {
|
||||
return await this.mainStore.getVehicleMakes();
|
||||
},
|
||||
async updateModelValues() {
|
||||
return await this.mainStore.getVehicleModels();
|
||||
},
|
||||
async updateStyleValues() {
|
||||
return await this.mainStore.getVehicleStyles();
|
||||
}
|
||||
},
|
||||
|
||||
components: {
|
||||
yearQuestion,
|
||||
makeQuestion,
|
||||
modelQuestion,
|
||||
siteHeader,
|
||||
siteSubHeader,
|
||||
vehicleBanner,
|
||||
siteFooter,
|
||||
Form,
|
||||
styleQuestion,
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
|
@ -0,0 +1,63 @@
|
|||
<template>
|
||||
<dropdownQuestion
|
||||
cmsWidgetName="VehicleYearQuestion"
|
||||
ref="yearQuestion"
|
||||
:options="years"
|
||||
disableAutoFill
|
||||
inputId="yearQuestionField"
|
||||
placeHolderText="Select an option"
|
||||
validationRules="year-required"
|
||||
v-model="selectedValue"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
import { useMainStore } from '@/store';
|
||||
import dropdownQuestion from '@/digital-components/dropdown-question/dropdown-question.vue';
|
||||
|
||||
import { errorMessages } from "@/constants/error-messages";
|
||||
import { required } from "@/helpers/validation-rules";
|
||||
import { defineRule } from "vee-validate";
|
||||
|
||||
defineRule("year-required", required(errorMessages.YEAR_REQUIRED));
|
||||
|
||||
|
||||
|
||||
export default {
|
||||
name: "year-question",
|
||||
data() {
|
||||
return {
|
||||
years : Array,
|
||||
};
|
||||
},
|
||||
props: {
|
||||
modelValue: Number,
|
||||
cmsWidgetName: String,
|
||||
},
|
||||
components: {
|
||||
dropdownQuestion
|
||||
},
|
||||
computed: {
|
||||
questionText(){
|
||||
return this.getCmsContent(this.cmsWidgetName, 'QuestionText');
|
||||
},
|
||||
selectedValue: {
|
||||
get: function() {
|
||||
return this.modelValue;
|
||||
},
|
||||
set: function(newValue) {
|
||||
this.$emit("update:modelValue",newValue);
|
||||
},
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
loadInitialData() {
|
||||
return useMainStore().getVehicleYears();
|
||||
},
|
||||
initializeComponent(initialData) {
|
||||
this.years = initialData;
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
|
@ -5,7 +5,7 @@
|
|||
<siteHeader cmsWidgetName="SiteHeaderWidget"/>
|
||||
<siteSubHeader cmsWidgetName="SiteSubHeaderWidget" class="mt-4"/>
|
||||
<div class="container-fluid px-5">
|
||||
<div class="row mt-4">
|
||||
<div class="row mt-5">
|
||||
<div class="col">
|
||||
<textboxQuestion
|
||||
inputId="policyNumberField"
|
||||
|
|
@ -18,13 +18,15 @@
|
|||
validationRules="policy-number-required" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="row mt-4 " v-if="this.displayPolicyZip">
|
||||
<div class="row mt-4" v-if="this.displayPolicyZip">
|
||||
<div class="col">
|
||||
<textboxQuestion
|
||||
inputId="policyZipCode"
|
||||
cmsWidgetName="PolicyZipQuestion"
|
||||
v-model="welcomePageModel.policyZipCode"
|
||||
isRequired
|
||||
ref="policyZip" />
|
||||
ref="policyZip"
|
||||
validationRules="policy-zip-required|policy-zip-format" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="row mt-4">
|
||||
|
|
@ -152,51 +154,49 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
// Components
|
||||
import siteHeader from '@/iss-components/site-header/site-header';
|
||||
import siteSubHeader from '@/iss-components/site-sub-header/site-sub-header';
|
||||
import siteFooter from "@/iss-components/site-footer/site-footer";
|
||||
import textboxQuestion from "@/digital-components/textbox-question/textbox-question";
|
||||
import buttonQuestion from "@/digital-components/button-question/button-question";
|
||||
import dropdownQuestion from "@/digital-components/dropdown-question/dropdown-question";
|
||||
import textBlock from "@/digital-components/text-block/text-block";
|
||||
// Components
|
||||
import siteHeader from '@/iss-components/site-header/site-header';
|
||||
import siteSubHeader from '@/iss-components/site-sub-header/site-sub-header';
|
||||
import siteFooter from "@/iss-components/site-footer/site-footer";
|
||||
import textboxQuestion from "@/digital-components/textbox-question/textbox-question";
|
||||
import buttonQuestion from "@/digital-components/button-question/button-question";
|
||||
import dropdownQuestion from "@/digital-components/dropdown-question/dropdown-question";
|
||||
import textBlock from "@/digital-components/text-block/text-block";
|
||||
|
||||
// Supporting files
|
||||
import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
|
||||
import { settleAllPromises } from "@/helpers/layout-helper";
|
||||
import { Form, defineRule } from "vee-validate";
|
||||
import { required, regex } from "@/helpers/validation-rules";
|
||||
import { errorMessages } from "@/constants/error-messages";
|
||||
import BaseFormMixin from '@/mixins/base-form-mixin.js';
|
||||
import { useMainStore } from '@/store';
|
||||
import { states } from "@/constants/states"
|
||||
// Supporting files
|
||||
import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
|
||||
import { settleAllPromises } from "@/helpers/layout-helper";
|
||||
import { Form, defineRule } from "vee-validate";
|
||||
import { required, regex } from "@/helpers/validation-rules";
|
||||
import { errorMessages } from "@/constants/error-messages";
|
||||
import BaseFormMixin from '@/mixins/base-form-mixin.js';
|
||||
import { useMainStore } from '@/store';
|
||||
import { states } from "@/constants/states"
|
||||
|
||||
//define validation rules
|
||||
defineRule("loss-date-required", required(errorMessages.LOSS_DATE_REQUIRED));
|
||||
defineRule("loss-cause-required", required(errorMessages.LOSS_CAUSE_REQUIRED));
|
||||
defineRule("policy-number-required", required(errorMessages.POLICY_NUMBER_REQUIRED));
|
||||
defineRule("loss-date-required", required(errorMessages.LOSS_DATE_REQUIRED));
|
||||
defineRule("loss-state-required", required(errorMessages.LOSS_STATE_REQUIRED));
|
||||
defineRule("loss-city-required", required(errorMessages.LOSS_CITY_REQUIRED));
|
||||
defineRule("phone-number-required", required(errorMessages.PHONE_NUMBER_FORMAT));
|
||||
defineRule("email-address-required", required(errorMessages.EMAIL_ADDRESS_REQUIRED));
|
||||
defineRule("damage-option-required", required(errorMessages.DAMAGE_OPTION_REQUIRED));
|
||||
defineRule("policy-zip-required", required(errorMessages.POLICY_ZIP_REQUIRED));
|
||||
defineRule("policy-zip-format", regex(/(^\d{5}$)|(^\d{5}-\d{4}$)/, errorMessages.POLICY_ZIP_FORMAT));
|
||||
//define validation rules
|
||||
defineRule("loss-date-required", required(errorMessages.LOSS_DATE_REQUIRED));
|
||||
defineRule("loss-cause-required", required(errorMessages.LOSS_CAUSE_REQUIRED));
|
||||
defineRule("policy-number-required", required(errorMessages.POLICY_NUMBER_REQUIRED));
|
||||
defineRule("loss-date-required", required(errorMessages.LOSS_DATE_REQUIRED));
|
||||
defineRule("loss-state-required", required(errorMessages.LOSS_STATE_REQUIRED));
|
||||
defineRule("loss-city-required", required(errorMessages.LOSS_CITY_REQUIRED));
|
||||
defineRule("phone-number-required", required(errorMessages.PHONE_NUMBER_FORMAT));
|
||||
defineRule("email-address-required", required(errorMessages.EMAIL_ADDRESS_REQUIRED));
|
||||
defineRule("damage-option-required", required(errorMessages.DAMAGE_OPTION_REQUIRED));
|
||||
defineRule("policy-zip-required", required(errorMessages.POLICY_ZIP_REQUIRED));
|
||||
defineRule("policy-zip-format", regex(/(^\d{5}$)|(^\d{5}-\d{4}$)/, errorMessages.POLICY_ZIP_FORMAT));
|
||||
|
||||
defineRule("email-address-format",
|
||||
regex(
|
||||
/^([a-zA-Z0-9_\-.+]+)@([a-zA-Z0-9_\-.]+)\.([a-zA-Z]{2,})$/,
|
||||
errorMessages.EMAIL_ADDRESS_FORMAT
|
||||
)
|
||||
);
|
||||
defineRule("email-address-format",
|
||||
regex(
|
||||
/^([a-zA-Z0-9_\-.+]+)@([a-zA-Z0-9_\-.]+)\.([a-zA-Z]{2,})$/,
|
||||
errorMessages.EMAIL_ADDRESS_FORMAT
|
||||
));
|
||||
|
||||
defineRule("phone-number-format",
|
||||
regex(
|
||||
/^(\([0-9]{3}\)|[0-9]{3}) *[-.]? *[0-9]{3} *[-.]? *[0-9]{4}$/,
|
||||
errorMessages.PHONE_NUMBER_FORMAT
|
||||
)
|
||||
);
|
||||
defineRule("phone-number-format",
|
||||
regex(
|
||||
/^(\([0-9]{3}\)|[0-9]{3}) *[-.]? *[0-9]{3} *[-.]? *[0-9]{4}$/,
|
||||
errorMessages.PHONE_NUMBER_FORMAT
|
||||
));
|
||||
|
||||
export default {
|
||||
name: "welcome-page",
|
||||
|
|
@ -316,7 +316,8 @@ export default {
|
|||
|
||||
getWelcomePageModelFromStore() {
|
||||
return {
|
||||
policyNumber : this.mainStore.order.policy.policyNumber,
|
||||
policyNumber: this.mainStore.order.policy.policyNumber,
|
||||
policyZipCode: this.mainStore.order.policy.policyZipCode,
|
||||
dateOfLoss : this.mainStore.order.policy.dateOfLoss,
|
||||
damageCause : this.mainStore.order.policy.damageCause,
|
||||
damageState : this.mainStore.order.policy.damageState,
|
||||
|
|
@ -324,7 +325,7 @@ export default {
|
|||
isDamageGlassOnly : this.mainStore.order.policy.isDamageGlassOnly,
|
||||
phoneNumber : this.mainStore.order.customer.phoneNumber,
|
||||
email : this.mainStore.order.customer.emailAddress,
|
||||
isPolicyNumberDisabled: this.mainStore.order.policy.isPolicyNumberDisabled,
|
||||
isPolicyNumberDisabled: this.mainStore.order.policy.isPolicyNumberDisabled
|
||||
}
|
||||
},
|
||||
},
|
||||
|
|
@ -360,7 +361,8 @@ export default {
|
|||
return !!this.getCmsContent("GlassOnlyQuestion","QuestionText");
|
||||
},
|
||||
displayPolicyZip(){
|
||||
if(this.mainStore.issConfig.isAuthenticated){
|
||||
if (this.mainStore.issConfig.isAuthenticated &&
|
||||
!!this.mainStore.issConfig.disabledFields.policyZipCode) {
|
||||
return false;
|
||||
}
|
||||
else{
|
||||
|
|
|
|||
|
|
@ -29,6 +29,7 @@ export const issPageValues = {
|
|||
VEHICLE_PARTS: 'vehicle-parts',
|
||||
VEHICLE_STYLE: 'vehicle-style',
|
||||
VEHICLE_YEAR: 'vehicle-year',
|
||||
VEHICLE_SELECTION: 'vehicle-selection',
|
||||
VIN_LOOKUP: 'vin-lookup',
|
||||
TPA_SUBMIT: 'tpa-submit',
|
||||
BAILOUT_PAGE: 'bailout-page',
|
||||
|
|
|
|||
|
|
@ -4,6 +4,19 @@ import { navigationScenarios } from '@/router/router-constants/navigation-scenar
|
|||
// Get store from router/index.js instead of importing it here to get updated values
|
||||
const routingTable = function(store) {
|
||||
return [
|
||||
{
|
||||
issPageValue: issPageValues.VEHICLE_SELECTION,
|
||||
maps: [
|
||||
{
|
||||
scenario: navigationScenarios.CLICKED_BACK,
|
||||
destinationIssPageValue: issPageValues.POLICY_HOLDER_DETAILS
|
||||
},
|
||||
{
|
||||
scenario: navigationScenarios.CLICKED_FORWARD,
|
||||
destinationIssPageValue: issPageValues.VEHICLE_DAMAGE
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
issPageValue: issPageValues.VEHICLE_YEAR,
|
||||
maps: [
|
||||
|
|
|
|||
|
|
@ -43,6 +43,7 @@ const getDefaultState = () => {
|
|||
},
|
||||
policy: {
|
||||
policyNumber: null,
|
||||
policyZipCode: null,
|
||||
dateOfLoss: null,
|
||||
damageCause: null,
|
||||
damageState: null,
|
||||
|
|
@ -106,7 +107,8 @@ const getDefaultState = () => {
|
|||
returnURL: null,
|
||||
returnURL2: null,
|
||||
disabledFields: {
|
||||
policyNumber: null
|
||||
policyNumber: null,
|
||||
policyZipCode: null
|
||||
}
|
||||
}
|
||||
};
|
||||
|
|
@ -608,6 +610,7 @@ export const useMainStore = defineStore({
|
|||
|
||||
if (isDamageChanging) {
|
||||
//Reset dependent state when changing
|
||||
//Was resetGlassPartsState, added dependencies for SSR-290
|
||||
this.resetPartsAndDependencies();
|
||||
|
||||
// Save new values
|
||||
|
|
@ -668,7 +671,8 @@ export const useMainStore = defineStore({
|
|||
this.order.vehicle.imageVifNumber = vehicle.imageVifNumber;
|
||||
this.order.vehicle.imageColor = vehicle.imageVifColor;
|
||||
|
||||
this.resetDamagePartsAndDependencies();
|
||||
this.resetSupportingItemsState();
|
||||
this.resetVapsState();
|
||||
},
|
||||
|
||||
updateVehicleVin(vin) {
|
||||
|
|
@ -715,8 +719,8 @@ export const useMainStore = defineStore({
|
|||
resetMoldingAndCapabilityQuestionAnswersIfNeeded(matchedParts) {
|
||||
const partsOrQuestionsDataToCompareWith =
|
||||
this.pageData(issPageValues.MOLDING_QUESTIONS)?.partsOrQuestions ??
|
||||
this.pageData(issPageValues.CAPABILITY_QUESTIONS)?.partsOrQuestions ??
|
||||
[];
|
||||
this.pageData(issPageValues.CAPABILITY_QUESTIONS)?.partsOrQuestions ??
|
||||
[];
|
||||
|
||||
const previouslySelectedPartNumbers = getAllPartNumbers(partsOrQuestionsDataToCompareWith);
|
||||
const currentlySelectedPartNumbers = getAllPartNumbers(matchedParts);
|
||||
|
|
@ -725,11 +729,12 @@ export const useMainStore = defineStore({
|
|||
previouslySelectedPartNumbers !== currentlySelectedPartNumbers;
|
||||
|
||||
if (haveSelectedVehiclePartsChanged) {
|
||||
//was updateGlassParts, added dependencies for SSR-290
|
||||
this.resetPartsAndDependencies();
|
||||
this.updateMoldingQuestionAnswers(null);
|
||||
this.updateCapabilityQuestionAnswers(null);
|
||||
this.updatePageData({ page: issPageValues.MOLDING_QUESTIONS, data: null});
|
||||
this.updatePageData({ page: issPageValues.CAPABILITY_QUESTIONS, data: null});
|
||||
this.updatePageData({ page: issPageValues.MOLDING_QUESTIONS, data: null });
|
||||
this.updatePageData({ page: issPageValues.CAPABILITY_QUESTIONS, data: null });
|
||||
}
|
||||
},
|
||||
|
||||
|
|
@ -743,14 +748,15 @@ export const useMainStore = defineStore({
|
|||
this.issConfig.enableTPAFlow = false;
|
||||
this.issConfig.returnURL = null;
|
||||
this.issConfig.returnURL2 = null;
|
||||
this.issConfig.disabledFields.policyNumber = null;
|
||||
this.issConfig.disabledFields.policyNumber = false;
|
||||
this.issConfig.disabledFields.policyZipCode = false;
|
||||
},
|
||||
|
||||
updateVehicleYear(year) {
|
||||
if(this.order.vehicle.year !== year)
|
||||
{
|
||||
this.resetVehicleState();
|
||||
this.resetDamagePartsAndDependencies();
|
||||
this.resetDamageAndDependencies();
|
||||
|
||||
this.order.vehicle.year = year;
|
||||
}
|
||||
|
|
@ -762,7 +768,7 @@ export const useMainStore = defineStore({
|
|||
const year = this.order.vehicle.year;
|
||||
|
||||
this.resetVehicleState();
|
||||
this.resetDamagePartsAndDependencies();
|
||||
this.resetDamageAndDependencies();
|
||||
|
||||
this.order.vehicle.year = year;
|
||||
this.order.vehicle.make = make;
|
||||
|
|
@ -776,7 +782,7 @@ export const useMainStore = defineStore({
|
|||
const make = this.order.vehicle.make;
|
||||
|
||||
this.resetVehicleState();
|
||||
this.resetDamagePartsAndDependencies();
|
||||
this.resetDamageAndDependencies();
|
||||
|
||||
this.order.vehicle.year = year;
|
||||
this.order.vehicle.make = make;
|
||||
|
|
@ -793,7 +799,7 @@ export const useMainStore = defineStore({
|
|||
const model = this.order.vehicle.model;
|
||||
|
||||
this.resetVehicleState();
|
||||
this.resetDamagePartsAndDependencies();
|
||||
this.resetDamageAndDependencies();
|
||||
|
||||
this.order.vehicle.year = year;
|
||||
this.order.vehicle.make = make;
|
||||
|
|
@ -836,6 +842,7 @@ export const useMainStore = defineStore({
|
|||
updatePolicyData(welcomePageModel)
|
||||
{
|
||||
this.order.policy.policyNumber = welcomePageModel?.policyNumber;
|
||||
this.order.policy.policyZipCode = welcomePageModel?.policyZipCode;
|
||||
this.order.policy.dateOfLoss = welcomePageModel?.dateOfLoss;
|
||||
this.order.policy.damageCause = welcomePageModel?.damageCause;
|
||||
this.order.policy.damageState = welcomePageModel?.damageState;
|
||||
|
|
@ -874,16 +881,17 @@ export const useMainStore = defineStore({
|
|||
this.updateGlassParts(null);
|
||||
this.updateMoldingQuestionAnswers(null);
|
||||
this.updateCapabilityQuestionAnswers(null);
|
||||
this.updatePageData({ page: issPageValues.VEHICLE_PARTS, data: null});
|
||||
this.updatePageData({ page: issPageValues.MOLDING_QUESTIONS, data: null});
|
||||
this.updatePageData({ page: issPageValues.CAPABILITY_QUESTIONS, data: null});
|
||||
this.resetSupportingItemsState();
|
||||
this.resetVapsState();
|
||||
|
||||
this.updatePageData({ page: issPageValues.VEHICLE_PARTS, data: null });
|
||||
this.updatePageData({ page: issPageValues.MOLDING_QUESTIONS, data: null });
|
||||
this.updatePageData({ page: issPageValues.CAPABILITY_QUESTIONS, data: null });
|
||||
}
|
||||
|
||||
//Save new values
|
||||
this.updatePartQuestionAnswers(partQuestionAnswersArray);
|
||||
|
||||
this.resetSupportingItemsState();
|
||||
this.resetVapsState();
|
||||
},
|
||||
saveMoldingQuestionAnswers(moldingQuestionAnswersArray) {
|
||||
const sortedPreviousResultsArray = sortArrayOfObjectsByPropertyValue(
|
||||
|
|
@ -903,10 +911,7 @@ export const useMainStore = defineStore({
|
|||
if (haveMoldingQuestionAnswersChanged) {
|
||||
this.resetPartsAndDependencies();
|
||||
this.updateCapabilityQuestionAnswers(null);
|
||||
this.updatePageData({
|
||||
page: issPageValues.CAPABILITY_QUESTIONS,
|
||||
data: null
|
||||
});
|
||||
this.updatePageData({ page: issPageValues.CAPABILITY_QUESTIONS, data: null });
|
||||
}
|
||||
|
||||
// Save new values
|
||||
|
|
@ -929,8 +934,7 @@ export const useMainStore = defineStore({
|
|||
);
|
||||
|
||||
if (haveCapabilityQuestionAnswersChanged) {
|
||||
this.updateGlassParts(null);
|
||||
this.updateSupportingItems(null);
|
||||
this.resetPartsAndDependencies();
|
||||
}
|
||||
|
||||
// Save new values
|
||||
|
|
@ -1158,6 +1162,7 @@ export const useMainStore = defineStore({
|
|||
|
||||
if (!isSelectedGlassAvailableForVehicle) {
|
||||
this.resetDamageState();
|
||||
this.resetGlassPartsState();
|
||||
}
|
||||
|
||||
//Save new values
|
||||
|
|
@ -1173,6 +1178,7 @@ export const useMainStore = defineStore({
|
|||
|
||||
if (!isSelectedGlassAvailableForVehicle) {
|
||||
this.resetDamageState();
|
||||
this.resetGlassPartsState();
|
||||
}
|
||||
|
||||
//Save new values
|
||||
|
|
@ -1186,8 +1192,10 @@ export const useMainStore = defineStore({
|
|||
{
|
||||
this.resetRegistrationAndDependencies();
|
||||
|
||||
if (!isSelectedGlassAvailableForVehicle) {
|
||||
if (!isSelectedGlassAvailableForVehicle) {
|
||||
// Dependencies already cleared in above statement
|
||||
this.resetDamageState();
|
||||
this.resetGlassPartsState();
|
||||
}
|
||||
|
||||
//Save new values
|
||||
|
|
@ -1204,9 +1212,9 @@ export const useMainStore = defineStore({
|
|||
this.resetVapsState();
|
||||
},
|
||||
|
||||
resetDamagePartsAndDependencies() {
|
||||
//this.resetDamageState();
|
||||
//this.resetGlassPartsState();
|
||||
resetDamageAndDependencies() {
|
||||
this.resetDamageState();
|
||||
this.resetGlassPartsState();
|
||||
this.resetSupportingItemsState();
|
||||
this.resetVapsState();
|
||||
},
|
||||
|
|
|
|||
Loading…
Reference in a new issue