commit
This commit is contained in:
Kulbhushan Kaushik
parent
d86126c1e4
commit
dac63255f1
2 changed files with 183 additions and 27 deletions
|
|
@ -1,7 +1,7 @@
|
||||||
<template>
|
<template>
|
||||||
<div>
|
<div>
|
||||||
<div class="d-flex align-items-center justify-content-center container-fluid overflow-hidden">
|
<div class="d-flex align-items-center justify-content-center container-fluid overflow-hidden">
|
||||||
<h5 class="text-center fw-normal mb-0" :class="headerColor">
|
<h5 class="text-center fw-normal mb-0 subheader-primary" :class="headerColor">
|
||||||
<span>
|
<span>
|
||||||
{{ content }}
|
{{ content }}
|
||||||
</span>
|
</span>
|
||||||
|
|
@ -13,7 +13,7 @@
|
||||||
</h5>
|
</h5>
|
||||||
</div>
|
</div>
|
||||||
<div class="d-flex align-items-center justify-content-center container-fluid overflow-hidden">
|
<div class="d-flex align-items-center justify-content-center container-fluid overflow-hidden">
|
||||||
<p class="text-center small fw-normal mb-0">
|
<p class="text-center small fw-normal mb-0 subheader-secondary">
|
||||||
<span>
|
<span>
|
||||||
{{ subText }}
|
{{ subText }}
|
||||||
</span>
|
</span>
|
||||||
|
|
|
||||||
|
|
@ -1,35 +1,89 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="page-container-grouped-styles">
|
<Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm" v-slot="{ meta }">
|
||||||
<div class="fade-on-route-transition">
|
<div class="page-container-grouped-styles">
|
||||||
<siteHeader cmsWidgetName="Header"/>
|
<div class="fade-on-route-transition">
|
||||||
<siteSubHeader cmsWidgetName="SubHeader"/>
|
<siteHeader cmsWidgetName="SiteHeaderWidget"/>
|
||||||
<div class="row mt-2">
|
<siteSubHeader cmsWidgetName="SiteSubHeaderWidget"/>
|
||||||
<textboxQuestion
|
<div class="row mt-2 mb-4">
|
||||||
type="date"
|
|
||||||
cmsWidgetName="dmgDate"
|
|
||||||
v-model="test"
|
|
||||||
inputId="dmgDate"
|
|
||||||
isRequired
|
|
||||||
disableAutoFill
|
|
||||||
:max="new Date().toJSON().slice(0,10)"
|
|
||||||
:min="'1972-12-01'"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div class="row mt-2 mb-4">
|
|
||||||
<div class="col">
|
|
||||||
<textboxQuestion
|
<textboxQuestion
|
||||||
id="damageCauseField"
|
id="policyNumberField"
|
||||||
|
cmsWidgetName="PolicyNumberQuestion"
|
||||||
|
v-model="policyNumber"
|
||||||
|
validationRules="policy-number-required" />
|
||||||
|
</div>
|
||||||
|
<div class="row mt-2 mb-4">
|
||||||
|
<textboxQuestion
|
||||||
|
id="policyZipField"
|
||||||
|
cmsWidgetName="PolicyZipQuestion"
|
||||||
|
v-model="policyZip"
|
||||||
|
validationRules="policy-zip-required" />
|
||||||
|
</div>
|
||||||
|
<div class="row mt-2 mb-4">
|
||||||
|
<textboxQuestion
|
||||||
|
type="date"
|
||||||
|
cmsWidgetName="DateOfLossQuestion"
|
||||||
|
v-model="test"
|
||||||
|
inputId="dateOfLossField"
|
||||||
|
isRequired
|
||||||
|
disableAutoFill
|
||||||
|
:max="new Date().toJSON().slice(0,10)"
|
||||||
|
:min="'1972-12-01'"
|
||||||
|
validationRules="loss-date-required"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="row mt-2 mb-4">
|
||||||
|
<dropdownQuestion
|
||||||
cmsWidgetName="DamageCauseQuestion"
|
cmsWidgetName="DamageCauseQuestion"
|
||||||
v-model="damageCause"
|
v-model="damageCause"
|
||||||
|
ref="damageCause"
|
||||||
|
inputId="damageCauseQuestionField"
|
||||||
|
:options="DamageCauseOptions"
|
||||||
|
validationRules="loss-cause-required"
|
||||||
placeholderText="Select an option"
|
placeholderText="Select an option"
|
||||||
includeSelectIcon
|
/>
|
||||||
disableAutoFill
|
</div>
|
||||||
validationRules="damage-cause-required" />
|
<div class="row mt-2 mb-4">
|
||||||
|
<textboxQuestion
|
||||||
|
id="damageCityField"
|
||||||
|
cmsWidgetName="DamageCityQuestion"
|
||||||
|
v-model="damageCity"
|
||||||
|
validationRules="loss-city-required" />
|
||||||
|
</div>
|
||||||
|
<div class="row mt-2 mb-4">
|
||||||
|
<dropdownQuestion
|
||||||
|
cmsWidgetName="DamageStateQuestion"
|
||||||
|
v-model="state"
|
||||||
|
ref="state"
|
||||||
|
inputId="8fdf9dc2e13e430eb57529499dceb3eb"
|
||||||
|
:options="stateOptions"
|
||||||
|
validationRules="loss-state-required"
|
||||||
|
placeholderText="Select an option"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="row mt-2 mb-4">
|
||||||
|
<textboxQuestion
|
||||||
|
id="phoneNumberField"
|
||||||
|
cmsWidgetName="PhoneNumberQuestion"
|
||||||
|
v-model="phoneNumber"
|
||||||
|
validationRules="phone-number-required" />
|
||||||
|
</div>
|
||||||
|
<div class="row mt-2 mb-4">
|
||||||
|
<textboxQuestion
|
||||||
|
id="emailField"
|
||||||
|
cmsWidgetName="EmailAddressQuestion"
|
||||||
|
v-model="email"
|
||||||
|
validationRules="email-address-required" />
|
||||||
|
</div>
|
||||||
|
<div class="row mt-2 mb-4">
|
||||||
|
<site-footer
|
||||||
|
cmsWidgetName="SiteFooterWidget"
|
||||||
|
:isForwardActionDisabled="!meta.valid"
|
||||||
|
@back-clicked="backButtonAction"
|
||||||
|
@ForwardClicked="forwardButtonAction" />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<buttonQuestionModal cmsWidgetName="DamageCauseQuestion" validationRules="damage-cause-required" />
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</Form>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
|
@ -42,13 +96,25 @@
|
||||||
import { errorMessages } from "@/constants/error-messages";
|
import { errorMessages } from "@/constants/error-messages";
|
||||||
import textboxQuestion from "@/common-components/textbox-question/textbox-question";
|
import textboxQuestion from "@/common-components/textbox-question/textbox-question";
|
||||||
import buttonQuestionModal from "@/common-components/button-question-modal/button-question-modal";
|
import buttonQuestionModal from "@/common-components/button-question-modal/button-question-modal";
|
||||||
|
import dropdownQuestion from "@/common-components/dropdown-question/dropdown-question";
|
||||||
|
import siteFooter from "@/common-components/site-footer/site-footer";
|
||||||
|
import BaseFormMixin from '@/mixins/base-form-mixin.js';
|
||||||
|
|
||||||
//define validation rules
|
//define validation rules
|
||||||
defineRule("loss-date-required", required(errorMessages.LOSS_DATE_REQUIRED));
|
defineRule("loss-date-required", required(errorMessages.LOSS_DATE_REQUIRED));
|
||||||
defineRule("damage-cause-required", required(errorMessages.LOSS_CAUSE_REQUIRED));
|
defineRule("loss-cause-required", required(errorMessages.LOSS_CAUSE_REQUIRED));
|
||||||
|
defineRule("policy-number-required", required(errorMessages.POLICY_NUMBER_REQUIRED));
|
||||||
|
defineRule("policy-zip-required", required(errorMessages.POLICY_ZIP_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_REQUIRED));
|
||||||
|
defineRule("email-address-required", required(errorMessages.EMAIL_ADDRESS_REQUIRED));
|
||||||
|
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: "welcome-page",
|
name: "welcome-page",
|
||||||
|
mixins: [BaseFormMixin],
|
||||||
emits: ['update:modelValue'], // The component emits an event
|
emits: ['update:modelValue'], // The component emits an event
|
||||||
props: {
|
props: {
|
||||||
modelValue: {
|
modelValue: {
|
||||||
|
|
@ -79,12 +145,102 @@
|
||||||
vm.setCmsContent(resultMap.cmsContent);
|
vm.setCmsContent(resultMap.cmsContent);
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
|
computed:{
|
||||||
|
DamageCauseOptions() {
|
||||||
|
const damageCauseAnswers = this.getCmsContent("DamageCauseQuestion", "Answers");
|
||||||
|
const answerArray = [];
|
||||||
|
for (let answer of Object.values(damageCauseAnswers)) {
|
||||||
|
if (answer?.Name) {
|
||||||
|
answerArray.push(answer.Name);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return answerArray;
|
||||||
|
},
|
||||||
|
stateOptions: {
|
||||||
|
get: function () {
|
||||||
|
return {
|
||||||
|
AL: "Alabama",
|
||||||
|
AK: "Alaska",
|
||||||
|
AZ: "Arizona",
|
||||||
|
AR: "Arkansas",
|
||||||
|
CA: "California",
|
||||||
|
CO: "Colorado",
|
||||||
|
CT: "Connecticut",
|
||||||
|
DE: "Delaware",
|
||||||
|
DC: "District Of Columbia",
|
||||||
|
FL: "Florida",
|
||||||
|
GA: "Georgia",
|
||||||
|
HI: "Hawaii",
|
||||||
|
ID: "Idaho",
|
||||||
|
IL: "Illinois",
|
||||||
|
IN: "Indiana",
|
||||||
|
IA: "Iowa",
|
||||||
|
KS: "Kansas",
|
||||||
|
KY: "Kentucky",
|
||||||
|
LA: "Louisiana",
|
||||||
|
ME: "Maine",
|
||||||
|
MD: "Maryland",
|
||||||
|
MA: "Massachusetts",
|
||||||
|
MI: "Michigan",
|
||||||
|
MN: "Minnesota",
|
||||||
|
MS: "Mississippi",
|
||||||
|
MO: "Missouri",
|
||||||
|
MT: "Montana",
|
||||||
|
NE: "Nebraska",
|
||||||
|
NV: "Nevada",
|
||||||
|
NH: "New Hampshire",
|
||||||
|
NJ: "New Jersey",
|
||||||
|
NM: "New Mexico",
|
||||||
|
NY: "New York",
|
||||||
|
NC: "North Carolina",
|
||||||
|
ND: "North Dakota",
|
||||||
|
OH: "Ohio",
|
||||||
|
OK: "Oklahoma",
|
||||||
|
OR: "Oregon",
|
||||||
|
PA: "Pennsylvania",
|
||||||
|
RI: "Rhode Island",
|
||||||
|
SC: "South Carolina",
|
||||||
|
SD: "South Dakota",
|
||||||
|
TN: "Tennessee",
|
||||||
|
TX: "Texas",
|
||||||
|
UT: "Utah",
|
||||||
|
VT: "Vermont",
|
||||||
|
VA: "Virginia",
|
||||||
|
WA: "Washington",
|
||||||
|
WV: "West Virginia",
|
||||||
|
WI: "Wisconsin",
|
||||||
|
WY: "Wyoming",
|
||||||
|
};
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
components: {
|
components: {
|
||||||
siteHeader,
|
siteHeader,
|
||||||
siteSubHeader,
|
siteSubHeader,
|
||||||
buttonQuestionModal,
|
buttonQuestionModal,
|
||||||
textboxQuestion,
|
textboxQuestion,
|
||||||
|
dropdownQuestion,
|
||||||
|
siteFooter
|
||||||
},
|
},
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss">
|
||||||
|
.subheader-primary
|
||||||
|
{
|
||||||
|
font-weight: 300 !important;
|
||||||
|
font-size: 26px;
|
||||||
|
line-height: 36px !important;
|
||||||
|
margin-top: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.subheader-secondary
|
||||||
|
{
|
||||||
|
font-weight: 300 !important;
|
||||||
|
font-size: 26px;
|
||||||
|
line-height: 36px;
|
||||||
|
color: #000000 !important;
|
||||||
|
margin-bottom: 16px !important;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue