commit
This commit is contained in:
Kulbhushan Kaushik
parent
50d111811f
commit
20cbb9272e
3 changed files with 159 additions and 95 deletions
|
|
@ -65,6 +65,7 @@ export default {
|
||||||
handleBlur,
|
handleBlur,
|
||||||
handleChange,
|
handleChange,
|
||||||
meta,
|
meta,
|
||||||
|
errors
|
||||||
} = useField(props.inputId, props.validationRules, fieldOptions);
|
} = useField(props.inputId, props.validationRules, fieldOptions);
|
||||||
|
|
||||||
return {
|
return {
|
||||||
|
|
@ -72,6 +73,7 @@ export default {
|
||||||
handleBlur,
|
handleBlur,
|
||||||
handleChange,
|
handleChange,
|
||||||
meta,
|
meta,
|
||||||
|
errors
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
|
|
|
||||||
|
|
@ -24,14 +24,15 @@ const errorMessages = {
|
||||||
VIN_FORMAT: "Invalid VIN. Please make sure that you entered the correct 17-digit, alpha-numeric number. VINs do not contain the letters I, O, or Q",
|
VIN_FORMAT: "Invalid VIN. Please make sure that you entered the correct 17-digit, alpha-numeric number. VINs do not contain the letters I, O, or Q",
|
||||||
OPTION_REQUIRED: "Please select an option",
|
OPTION_REQUIRED: "Please select an option",
|
||||||
VEHICLE_REQUIRED: "Please select a vehicle",
|
VEHICLE_REQUIRED: "Please select a vehicle",
|
||||||
POLICY_NUMBER_REQUIRED: "Please enter policy number",
|
POLICY_NUMBER_REQUIRED: "Please enter your policy number",
|
||||||
PHONE_NUMBER_REQUIRED: "Please enter phone number",
|
PHONE_NUMBER_REQUIRED: "Please enter phone number",
|
||||||
POLICY_ZIP_REQUIRED: "Please enter policy zip",
|
POLICY_ZIP_REQUIRED: "Please enter your policy zip",
|
||||||
POLICY_ZIP_FORMAT: "Please enter a valid policy ZIP",
|
POLICY_ZIP_FORMAT: "Please enter a valid ZIP",
|
||||||
LOSS_CAUSE_REQUIRED: "Please enter loss cause",
|
LOSS_CAUSE_REQUIRED: "Please enter loss cause",
|
||||||
LOSS_CITY_REQUIRED: "Please enter loss city",
|
LOSS_CITY_REQUIRED: "Please enter a city",
|
||||||
LOSS_STATE_REQUIRED: "Please enter loss state",
|
LOSS_STATE_REQUIRED: "Please enter loss state",
|
||||||
LOSS_DATE_REQUIRED: "Please enter a loss date"
|
LOSS_DATE_REQUIRED: "Please enter a loss date",
|
||||||
|
DAMAGE_OPTION_REQUIRED: "Please select an option"
|
||||||
};
|
};
|
||||||
|
|
||||||
export { errorMessages };
|
export { errorMessages };
|
||||||
|
|
@ -4,107 +4,137 @@
|
||||||
<div class="fade-on-route-transition">
|
<div class="fade-on-route-transition">
|
||||||
<siteHeader cmsWidgetName="SiteHeaderWidget"/>
|
<siteHeader cmsWidgetName="SiteHeaderWidget"/>
|
||||||
<siteSubHeader cmsWidgetName="SiteSubHeaderWidget"/>
|
<siteSubHeader cmsWidgetName="SiteSubHeaderWidget"/>
|
||||||
<div class="row mt-2 mb-4">
|
<div class="row mt-4">
|
||||||
<textboxQuestion
|
<div class="col">
|
||||||
|
<textboxQuestion
|
||||||
inputId="policyNumberField"
|
inputId="policyNumberField"
|
||||||
cmsWidgetName="PolicyNumberQuestion"
|
cmsWidgetName="PolicyNumberQuestion"
|
||||||
v-model="policyNumber"
|
v-model="welcomePageModel.policyNumber"
|
||||||
isRequired
|
isRequired
|
||||||
|
disableAutoFill
|
||||||
validationRules="policy-number-required" />
|
validationRules="policy-number-required" />
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="row mt-2 mb-4">
|
<div class="row mt-4">
|
||||||
<textboxQuestion
|
<div class="col">
|
||||||
inputId="policyZipField"
|
<textboxQuestion
|
||||||
cmsWidgetName="PolicyZipQuestion"
|
inputId="policyZipField"
|
||||||
v-model="policyZip"
|
cmsWidgetName="PolicyZipQuestion"
|
||||||
isRequired
|
ref="policyZip"
|
||||||
validationRules="policy-zip-required" />
|
v-model="welcomePageModel.policyZipCode"
|
||||||
|
isRequired
|
||||||
|
disableAutoFill
|
||||||
|
mask="#####"
|
||||||
|
validationRules="policy-zip-required|policy-zip-format" />
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="row mt-2 mb-4">
|
<div class="row mt-4">
|
||||||
<textboxQuestion
|
<div class="col">
|
||||||
type="date"
|
<textboxQuestion
|
||||||
cmsWidgetName="DateOfLossQuestion"
|
type="date"
|
||||||
v-model="test"
|
cmsWidgetName="DateOfLossQuestion"
|
||||||
inputId="dateOfLossField"
|
v-model="welcomePageModel.dateOfLoss"
|
||||||
isRequired
|
inputId="dateOfLossField"
|
||||||
disableAutoFill
|
isRequired
|
||||||
:max="new Date().toJSON().slice(0,10)"
|
disableAutoFill
|
||||||
:min="'1972-12-01'"
|
:max="new Date().toJSON().slice(0,10)"
|
||||||
validationRules="loss-date-required"
|
:min="'1972-12-01'"
|
||||||
|
validationRules="loss-date-required"
|
||||||
/>
|
/>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="row mb-4">
|
<div class="row">
|
||||||
<textBlock cmsWidgetName="DamageDateEstimateWidget" typeStyle="caption" />
|
<div class="col">
|
||||||
|
<textBlock cmsWidgetName="DamageDateEstimateWidget" typeStyle="caption" />
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="row mt-2 mb-4">
|
<div class="row mt-4">
|
||||||
<dropdownQuestion
|
<div class="col">
|
||||||
cmsWidgetName="DamageCauseQuestion"
|
<dropdownQuestion
|
||||||
v-model="damageCause"
|
cmsWidgetName="DamageCauseQuestion"
|
||||||
ref="damageCause"
|
v-model="welcomePageModel.damageCause"
|
||||||
isRequired
|
ref="damageCause"
|
||||||
inputId="damageCauseQuestionField"
|
inputId="damageCauseQuestionField"
|
||||||
:options="DamageCauseOptions"
|
:options="DamageCauseOptions"
|
||||||
validationRules="loss-cause-required"
|
disableAutoFill
|
||||||
|
validationRules="loss-cause-required"
|
||||||
/>
|
/>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="row mt-2 mb-4">
|
<div class="row mt-4">
|
||||||
<textboxQuestion
|
<div class="col">
|
||||||
inputId="damageCityField"
|
<textboxQuestion
|
||||||
cmsWidgetName="DamageCityQuestion"
|
inputId="damageCityField"
|
||||||
v-model="damageCity"
|
cmsWidgetName="DamageCityQuestion"
|
||||||
isRequired
|
v-model="welcomePageModel.damageCity"
|
||||||
validationRules="loss-city-required" />
|
isRequired
|
||||||
|
disableAutoFill
|
||||||
|
validationRules="loss-city-required" />
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="row mt-2 mb-4">
|
<div class="row mt-4">
|
||||||
<dropdownQuestion
|
<div class="col">
|
||||||
cmsWidgetName="DamageStateQuestion"
|
<dropdownQuestion
|
||||||
v-model="state"
|
cmsWidgetName="DamageStateQuestion"
|
||||||
ref="state"
|
v-model="welcomePageModel.damageState"
|
||||||
inputId="8fdf9dc2e13e430eb57529499dceb3eb"
|
ref="state"
|
||||||
:options="stateOptions"
|
inputId="8fdf9dc2e13e430eb57529499dceb3eb"
|
||||||
validationRules="loss-state-required"
|
:options="stateOptions"
|
||||||
isRequired
|
validationRules="loss-state-required"
|
||||||
|
isRequired
|
||||||
|
disableAutoFill
|
||||||
/>
|
/>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="row mt-2 mb-4">
|
<div class="row mt-4">
|
||||||
<buttonQuestion
|
<buttonQuestion
|
||||||
cmsWidgetName="GlassOnlyQuestion"
|
cmsWidgetName="GlassOnlyQuestion"
|
||||||
v-model="isDamageGlassOnly"
|
v-model="welcomePageModel.isDamageGlassOnly"
|
||||||
inputId = "isDamageGlassOnly"
|
inputId = "isDamageGlassOnly"
|
||||||
:answers="DamageGlassOnlyOptions"
|
:answers="DamageGlassOnlyOptions"
|
||||||
:questionText="DamageGlassOnlyQuestion"
|
:questionText="DamageGlassOnlyQuestion"
|
||||||
buttonTypeString="listButtonHorizontal"
|
buttonTypeString="listButtonHorizontal"
|
||||||
isRequired />
|
validationRules="damage-option-required"
|
||||||
|
isRequired
|
||||||
|
disableAutoFill/>
|
||||||
</div>
|
</div>
|
||||||
<div class="row mt-2 mb-4">
|
<div class="row mt-4">
|
||||||
<textboxQuestion
|
<div class="col">
|
||||||
inputId="phoneNumberField"
|
<textboxQuestion
|
||||||
cmsWidgetName="PhoneNumberQuestion"
|
inputId="phoneNumberField"
|
||||||
v-model="phoneNumber"
|
cmsWidgetName="PhoneNumberQuestion"
|
||||||
validationRules="phone-number-required"
|
v-model="welcomePageModel.phoneNumber"
|
||||||
isRequired />
|
validationRules="phone-number-required"
|
||||||
|
isRequired
|
||||||
|
disableAutoFill />
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="row mt-2 mb-4">
|
<div class="row mt-4">
|
||||||
<textboxQuestion
|
<div class="col">
|
||||||
inputId="emailField"
|
<textboxQuestion
|
||||||
cmsWidgetName="EmailAddressQuestion"
|
inputId="emailField"
|
||||||
v-model="email"
|
cmsWidgetName="EmailAddressQuestion"
|
||||||
validationRules="email-address-required"
|
v-model="welcomePageModel.email"
|
||||||
isRequired />
|
validationRules="email-address-required|email-address-format"
|
||||||
|
isRequired
|
||||||
|
disableAutoFill />
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="row mt-2 mb-4">
|
<div class="row mt-4">
|
||||||
<site-footer
|
<div class="col">
|
||||||
cmsWidgetName="SiteFooterWidget"
|
<site-footer
|
||||||
:isForwardActionDisabled="!meta.valid"
|
cmsWidgetName="SiteFooterWidget"
|
||||||
@back-clicked="backButtonAction"
|
:isForwardActionDisabled="!meta.valid"
|
||||||
@ForwardClicked="forwardButtonAction" />
|
@back-clicked="backButtonAction"
|
||||||
|
@ForwardClicked="forwardButtonAction" />
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</Form>
|
</Form>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
// Components
|
// Components
|
||||||
import siteHeader from '@/common-components/site-header/site-header';
|
import siteHeader from '@/common-components/site-header/site-header';
|
||||||
import siteSubHeader from '@/common-components/site-sub-header/site-sub-header';
|
import siteSubHeader from '@/common-components/site-sub-header/site-sub-header';
|
||||||
|
|
@ -118,7 +148,7 @@
|
||||||
import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
|
import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
|
||||||
import { settleAllPromises } from "@/helpers/layout-helper";
|
import { settleAllPromises } from "@/helpers/layout-helper";
|
||||||
import { Form, defineRule } from "vee-validate";
|
import { Form, defineRule } from "vee-validate";
|
||||||
import { required } from "@/helpers/validation-rules";
|
import { required, regex } from "@/helpers/validation-rules";
|
||||||
import { errorMessages } from "@/constants/error-messages";
|
import { errorMessages } from "@/constants/error-messages";
|
||||||
import BaseFormMixin from '@/mixins/base-form-mixin.js';
|
import BaseFormMixin from '@/mixins/base-form-mixin.js';
|
||||||
|
|
||||||
|
|
@ -132,21 +162,40 @@
|
||||||
defineRule("loss-city-required", required(errorMessages.LOSS_CITY_REQUIRED));
|
defineRule("loss-city-required", required(errorMessages.LOSS_CITY_REQUIRED));
|
||||||
defineRule("phone-number-required", required(errorMessages.PHONE_NUMBER_REQUIRED));
|
defineRule("phone-number-required", required(errorMessages.PHONE_NUMBER_REQUIRED));
|
||||||
defineRule("email-address-required", required(errorMessages.EMAIL_ADDRESS_REQUIRED));
|
defineRule("email-address-required", required(errorMessages.EMAIL_ADDRESS_REQUIRED));
|
||||||
|
defineRule("damage-option-required", required(errorMessages.DAMAGE_OPTION_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
|
||||||
|
)
|
||||||
|
);
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: "welcome-page",
|
name: "welcome-page",
|
||||||
mixins: [BaseFormMixin],
|
mixins: [BaseFormMixin],
|
||||||
emits: ['update:modelValue'], // The component emits an event
|
data: {
|
||||||
props: {
|
modelValue: {
|
||||||
modelValue: {
|
type: Object,
|
||||||
type: Object,
|
default: () => ({
|
||||||
default: () => ({
|
welcomePageModel: {
|
||||||
lossState: "",
|
policyNumber: "",
|
||||||
}),
|
policyZipCode: "",
|
||||||
},
|
dateOfLoss: "",
|
||||||
validationRules: String,
|
damageCause: "",
|
||||||
},
|
damageState: "",
|
||||||
|
damageCity: "",
|
||||||
|
isDamageGlassOnly: "",
|
||||||
|
phoneNumber: "",
|
||||||
|
email: ""
|
||||||
|
},
|
||||||
|
}),
|
||||||
|
},
|
||||||
|
},
|
||||||
async beforeRouteEnter(to, from, next)
|
async beforeRouteEnter(to, from, next)
|
||||||
{
|
{
|
||||||
// Call APIs
|
// Call APIs
|
||||||
|
|
@ -253,6 +302,14 @@
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
welcomePageModel: {
|
||||||
|
get: function () {
|
||||||
|
return this.modelValue;
|
||||||
|
},
|
||||||
|
set: function (newValue) {
|
||||||
|
this.$emit("update:modelValue", newValue);
|
||||||
|
},
|
||||||
|
},
|
||||||
},
|
},
|
||||||
components: {
|
components: {
|
||||||
siteHeader,
|
siteHeader,
|
||||||
|
|
@ -284,5 +341,9 @@
|
||||||
color: #000000 !important;
|
color: #000000 !important;
|
||||||
margin-bottom: 16px !important;
|
margin-bottom: 16px !important;
|
||||||
}
|
}
|
||||||
|
.my-2
|
||||||
|
{
|
||||||
|
margin-bottom: 0rem !important;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue