Adding dupe check to iss flow
This commit is contained in:
brydon1
parent
228d41a205
commit
89e852f3d1
8 changed files with 202 additions and 3 deletions
|
|
@ -16,7 +16,7 @@
|
|||
</div>
|
||||
<div
|
||||
class="subheader-secondary d-flex align-items-center container-fluid overflow-hidden"
|
||||
:class="justifySubheader">
|
||||
:class="justifySubheader ">
|
||||
<p
|
||||
class="fw-normal mb-0"
|
||||
:class="alternateFormatting">
|
||||
|
|
|
|||
|
|
@ -13,7 +13,6 @@
|
|||
<siteSubHeader
|
||||
id="sub-header"
|
||||
ref="siteSubHeader"
|
||||
class="mt-5"
|
||||
:cmsWidgetName="widget.siteSubHeader" />
|
||||
<textboxQuestion
|
||||
ref="firstNameQuestion"
|
||||
|
|
|
|||
0
src/layouts/duplicate-check/duplicate-check.spec.js
Normal file
0
src/layouts/duplicate-check/duplicate-check.spec.js
Normal file
169
src/layouts/duplicate-check/duplicate-check.vue
Normal file
169
src/layouts/duplicate-check/duplicate-check.vue
Normal file
|
|
@ -0,0 +1,169 @@
|
|||
<template>
|
||||
<Form
|
||||
ref="duplicate-check-form"
|
||||
v-slot="{ meta }"
|
||||
@submit="onSubmit"
|
||||
@invalidSubmit="onInvalidSubmit">
|
||||
<div class="page-container-grouped-styles">
|
||||
<div class="fade-on-route-transition">
|
||||
<siteHeader
|
||||
ref="siteHeader"
|
||||
:cmsWidgetName="widget.siteHeader"
|
||||
/>
|
||||
<div class="container-fluid px-6">
|
||||
<siteSubHeader
|
||||
id="sub-header"
|
||||
ref="siteSubHeader"
|
||||
class="mt-5 duplicate-check-subheader"
|
||||
:cmsWidgetName="widget.siteSubHeader" />
|
||||
|
||||
<buttonQuestion
|
||||
class="duplicate-check-question"
|
||||
v-model="selectedAnswer"
|
||||
:cmsWidgetName="widget.existingOrNewQuestion"
|
||||
:questionText="questionText"
|
||||
:answers="answers"
|
||||
buttonTypeString="listButton"
|
||||
isRequired
|
||||
:validationRules="rules.selectionRequired">
|
||||
</buttonQuestion>
|
||||
<siteFooter
|
||||
ref="siteFooter"
|
||||
class="my-5"
|
||||
:cmsWidgetName="widget.siteFooter"
|
||||
:isForwardActionDisabled="!meta.valid"
|
||||
@forwardClicked="forwardButtonAction"
|
||||
@backClicked="backButtonAction" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Form>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// Components
|
||||
import siteHeader from '@/iss-components/site-header/site-header.vue';
|
||||
import siteFooter from '@/iss-components/site-footer/site-footer.vue';
|
||||
import siteSubHeader from '@/iss-components/site-sub-header/site-sub-header.vue';
|
||||
import buttonQuestion from '@/digital-components/button-question/button-question.vue';
|
||||
|
||||
// Supporting files
|
||||
import { fetchCmsContentForPage } from '@/helpers/cms-content-helper.js';
|
||||
import { Form } from 'vee-validate';
|
||||
import BaseFormMixin from '@/mixins/base-form-mixin.js';
|
||||
import { useMainStore } from '@/store/index.js';
|
||||
import globalRules from '@/constants/global-rules.js';
|
||||
|
||||
export default {
|
||||
name: 'duplicate-check',
|
||||
components: {
|
||||
siteHeader,
|
||||
siteSubHeader,
|
||||
buttonQuestion,
|
||||
siteFooter,
|
||||
Form
|
||||
},
|
||||
mixins: [BaseFormMixin],
|
||||
async beforeRouteEnter(to, from, next) {
|
||||
const cmsContent = await fetchCmsContentForPage(to.query.issPage);
|
||||
|
||||
next((vm) => {
|
||||
vm.setCmsContent(cmsContent);
|
||||
});
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
widget: {
|
||||
siteHeader: 'SiteHeaderWidget',
|
||||
siteSubHeader: 'SiteSubHeaderWidget',
|
||||
existingOrNewQuestion: 'ExistingOrNewQuestion',
|
||||
siteFooter: 'SiteFooterWidget'
|
||||
},
|
||||
rules: {
|
||||
selectionRequired: globalRules.OPTION_REQUIRED
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
questionText() {
|
||||
return this.getCmsContent(this.widget.existingOrNewQuestion, 'QuestionText');
|
||||
},
|
||||
answersFromCms() {
|
||||
return this.getCmsContent(this.widget.existingOrNewQuestion, 'Answers');
|
||||
},
|
||||
testAnswers() {
|
||||
return [
|
||||
{
|
||||
Text: 'Finish Existing Claim',
|
||||
Name: "1",
|
||||
SubText: "2013 Honda Civic, 09/23/2023"
|
||||
},
|
||||
{
|
||||
Text: 'Finish Existing Claim',
|
||||
Name: "2",
|
||||
SubText: "08/01/2022"
|
||||
}
|
||||
];
|
||||
},
|
||||
answers(){
|
||||
return [...this.testAnswers, ...this.answersFromCms];
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
/**
|
||||
* @summary Steps to perform when back button clicked.
|
||||
*/
|
||||
backButtonAction() {
|
||||
this.$router.navigate(this.navigationScenarios.CLICKED_BACK, this.$route);
|
||||
},
|
||||
/**
|
||||
* @summary Steps to perform when forward button clicked.
|
||||
*/
|
||||
forwardButtonAction() {
|
||||
if (useMainStore().order.policy.policyLookupSuccessful){
|
||||
const policyVehicles = useMainStore().order.policy.vehicles;
|
||||
if (policyVehicles) {
|
||||
this.$router.navigate(
|
||||
this.navigationScenarios.CLICKED_FORWARD_POLICY_VERIFIED_WITH_VEHICLES,
|
||||
this.$route,
|
||||
{},
|
||||
{},
|
||||
policyVehicles
|
||||
);
|
||||
} else {policyVehicles
|
||||
this.$router.navigate(
|
||||
this.navigationScenarios.CLICKED_FORWARD_POLICY_VERIFIED_NO_VEHICLES,
|
||||
this.$route
|
||||
);
|
||||
}
|
||||
}
|
||||
this.$router.navigate(
|
||||
this.navigationScenarios.CLICKED_FORWARD_POLICY_UNVERIFIED,
|
||||
this.$route
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.duplicate-check-subheader {
|
||||
.subheader-secondary {
|
||||
margin-top: map-get($spacers, 3);
|
||||
}
|
||||
p {
|
||||
span {
|
||||
font-size: $h6-font-size;
|
||||
}
|
||||
}
|
||||
}
|
||||
.duplicate-check-question {
|
||||
.question-text {
|
||||
justify-content: left;
|
||||
display: inline-flex !important;
|
||||
margin-top: map-get($spacers, 5);
|
||||
margin-bottom: map-get($spacers, 3);
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
|
|
@ -337,6 +337,7 @@ export default {
|
|||
this.mainStore.order.serviceLocation.zipCode = policy.insureds?.[0]?.zipCode;
|
||||
|
||||
// populate vehicles
|
||||
this.mainStore.order.policy.vehicles = policy.vehicles;
|
||||
this.vehiclesFound = policy.vehicles;
|
||||
}
|
||||
return this.navigateForward(policy);
|
||||
|
|
|
|||
|
|
@ -9,6 +9,7 @@ const issPageValues = Object.freeze({
|
|||
CAPABILITY_QUESTIONS: 'capability-questions',
|
||||
CONTACT_CONFIRMATION: 'contact-confirmation',
|
||||
CONTACT_DETAILS: 'contact-details',
|
||||
DUPLICATE_CHECK: 'duplicate-check',
|
||||
ESTIMATE: 'estimate',
|
||||
COVERAGE_STATEMENT: 'coverage-statement',
|
||||
LICENSE_PLATE_LOOKUP: 'license-plate-lookup',
|
||||
|
|
|
|||
|
|
@ -370,6 +370,34 @@ const routingTable = () => [
|
|||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
issPageValue: issPageValues.DUPLICATE_CHECK,
|
||||
maps: [
|
||||
{
|
||||
scenario: navigationScenarios.CLICKED_BACK,
|
||||
destinationIssPageValue: issPageValues.WELCOME_PAGE
|
||||
},
|
||||
// TODO confirm all listed scenarios work
|
||||
{
|
||||
scenario: navigationScenarios.CLICKED_FORWARD_POLICY_UNVERIFIED,
|
||||
destinationIssPageValue: issPageValues.POLICY_HOLDER_DETAILS
|
||||
},
|
||||
{
|
||||
scenario: navigationScenarios.CLICKED_FORWARD_POLICY_VERIFIED_NO_VEHICLES,
|
||||
destinationIssPageValue: issPageValues.VEHICLE_SELECTION
|
||||
},
|
||||
{
|
||||
scenario: navigationScenarios.CLICKED_FORWARD_POLICY_VERIFIED_WITH_VEHICLES,
|
||||
destinationIssPageValue: issPageValues.POLICY_VEHICLES
|
||||
},
|
||||
// if previous claim selected
|
||||
// unverified => policyholder details
|
||||
// verified => policy-vehicle page
|
||||
// new claim
|
||||
// lookup fails => policyholder details
|
||||
// lookup succeeds => policy-vehicle page
|
||||
]
|
||||
},
|
||||
{
|
||||
issPageValue: issPageValues.POLICY_HOLDER_DETAILS,
|
||||
maps: [
|
||||
|
|
|
|||
|
|
@ -58,7 +58,8 @@ const getDefaultState = () => ({
|
|||
deductible: {
|
||||
repair: null, // numerical value; how much customer owes on deductible in repair case
|
||||
replace: null // numerical value; how much customer owes on deductible in replace case,
|
||||
}
|
||||
},
|
||||
vehicles: []
|
||||
},
|
||||
customer: {
|
||||
address: {
|
||||
|
|
|
|||
Loading…
Reference in a new issue