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,
|
||||
handleChange,
|
||||
meta,
|
||||
errors
|
||||
} = useField(props.inputId, props.validationRules, fieldOptions);
|
||||
|
||||
return {
|
||||
|
|
@ -72,6 +73,7 @@ export default {
|
|||
handleBlur,
|
||||
handleChange,
|
||||
meta,
|
||||
errors
|
||||
};
|
||||
},
|
||||
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",
|
||||
OPTION_REQUIRED: "Please select an option",
|
||||
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",
|
||||
POLICY_ZIP_REQUIRED: "Please enter policy zip",
|
||||
POLICY_ZIP_FORMAT: "Please enter a valid policy ZIP",
|
||||
POLICY_ZIP_REQUIRED: "Please enter your policy zip",
|
||||
POLICY_ZIP_FORMAT: "Please enter a valid ZIP",
|
||||
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_DATE_REQUIRED: "Please enter a loss date"
|
||||
LOSS_DATE_REQUIRED: "Please enter a loss date",
|
||||
DAMAGE_OPTION_REQUIRED: "Please select an option"
|
||||
};
|
||||
|
||||
export { errorMessages };
|
||||
|
|
@ -4,107 +4,137 @@
|
|||
<div class="fade-on-route-transition">
|
||||
<siteHeader cmsWidgetName="SiteHeaderWidget"/>
|
||||
<siteSubHeader cmsWidgetName="SiteSubHeaderWidget"/>
|
||||
<div class="row mt-2 mb-4">
|
||||
<textboxQuestion
|
||||
<div class="row mt-4">
|
||||
<div class="col">
|
||||
<textboxQuestion
|
||||
inputId="policyNumberField"
|
||||
cmsWidgetName="PolicyNumberQuestion"
|
||||
v-model="policyNumber"
|
||||
v-model="welcomePageModel.policyNumber"
|
||||
isRequired
|
||||
disableAutoFill
|
||||
validationRules="policy-number-required" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="row mt-2 mb-4">
|
||||
<textboxQuestion
|
||||
inputId="policyZipField"
|
||||
cmsWidgetName="PolicyZipQuestion"
|
||||
v-model="policyZip"
|
||||
isRequired
|
||||
validationRules="policy-zip-required" />
|
||||
<div class="row mt-4">
|
||||
<div class="col">
|
||||
<textboxQuestion
|
||||
inputId="policyZipField"
|
||||
cmsWidgetName="PolicyZipQuestion"
|
||||
ref="policyZip"
|
||||
v-model="welcomePageModel.policyZipCode"
|
||||
isRequired
|
||||
disableAutoFill
|
||||
mask="#####"
|
||||
validationRules="policy-zip-required|policy-zip-format" />
|
||||
</div>
|
||||
</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 class="row mt-4">
|
||||
<div class="col">
|
||||
<textboxQuestion
|
||||
type="date"
|
||||
cmsWidgetName="DateOfLossQuestion"
|
||||
v-model="welcomePageModel.dateOfLoss"
|
||||
inputId="dateOfLossField"
|
||||
isRequired
|
||||
disableAutoFill
|
||||
:max="new Date().toJSON().slice(0,10)"
|
||||
:min="'1972-12-01'"
|
||||
validationRules="loss-date-required"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row mb-4">
|
||||
<textBlock cmsWidgetName="DamageDateEstimateWidget" typeStyle="caption" />
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<textBlock cmsWidgetName="DamageDateEstimateWidget" typeStyle="caption" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="row mt-2 mb-4">
|
||||
<dropdownQuestion
|
||||
cmsWidgetName="DamageCauseQuestion"
|
||||
v-model="damageCause"
|
||||
ref="damageCause"
|
||||
isRequired
|
||||
inputId="damageCauseQuestionField"
|
||||
:options="DamageCauseOptions"
|
||||
validationRules="loss-cause-required"
|
||||
<div class="row mt-4">
|
||||
<div class="col">
|
||||
<dropdownQuestion
|
||||
cmsWidgetName="DamageCauseQuestion"
|
||||
v-model="welcomePageModel.damageCause"
|
||||
ref="damageCause"
|
||||
inputId="damageCauseQuestionField"
|
||||
:options="DamageCauseOptions"
|
||||
disableAutoFill
|
||||
validationRules="loss-cause-required"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row mt-2 mb-4">
|
||||
<textboxQuestion
|
||||
inputId="damageCityField"
|
||||
cmsWidgetName="DamageCityQuestion"
|
||||
v-model="damageCity"
|
||||
isRequired
|
||||
validationRules="loss-city-required" />
|
||||
<div class="row mt-4">
|
||||
<div class="col">
|
||||
<textboxQuestion
|
||||
inputId="damageCityField"
|
||||
cmsWidgetName="DamageCityQuestion"
|
||||
v-model="welcomePageModel.damageCity"
|
||||
isRequired
|
||||
disableAutoFill
|
||||
validationRules="loss-city-required" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="row mt-2 mb-4">
|
||||
<dropdownQuestion
|
||||
cmsWidgetName="DamageStateQuestion"
|
||||
v-model="state"
|
||||
ref="state"
|
||||
inputId="8fdf9dc2e13e430eb57529499dceb3eb"
|
||||
:options="stateOptions"
|
||||
validationRules="loss-state-required"
|
||||
isRequired
|
||||
<div class="row mt-4">
|
||||
<div class="col">
|
||||
<dropdownQuestion
|
||||
cmsWidgetName="DamageStateQuestion"
|
||||
v-model="welcomePageModel.damageState"
|
||||
ref="state"
|
||||
inputId="8fdf9dc2e13e430eb57529499dceb3eb"
|
||||
:options="stateOptions"
|
||||
validationRules="loss-state-required"
|
||||
isRequired
|
||||
disableAutoFill
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row mt-2 mb-4">
|
||||
<buttonQuestion
|
||||
cmsWidgetName="GlassOnlyQuestion"
|
||||
v-model="isDamageGlassOnly"
|
||||
inputId = "isDamageGlassOnly"
|
||||
:answers="DamageGlassOnlyOptions"
|
||||
:questionText="DamageGlassOnlyQuestion"
|
||||
buttonTypeString="listButtonHorizontal"
|
||||
isRequired />
|
||||
<div class="row mt-4">
|
||||
<buttonQuestion
|
||||
cmsWidgetName="GlassOnlyQuestion"
|
||||
v-model="welcomePageModel.isDamageGlassOnly"
|
||||
inputId = "isDamageGlassOnly"
|
||||
:answers="DamageGlassOnlyOptions"
|
||||
:questionText="DamageGlassOnlyQuestion"
|
||||
buttonTypeString="listButtonHorizontal"
|
||||
validationRules="damage-option-required"
|
||||
isRequired
|
||||
disableAutoFill/>
|
||||
</div>
|
||||
<div class="row mt-2 mb-4">
|
||||
<textboxQuestion
|
||||
inputId="phoneNumberField"
|
||||
cmsWidgetName="PhoneNumberQuestion"
|
||||
v-model="phoneNumber"
|
||||
validationRules="phone-number-required"
|
||||
isRequired />
|
||||
<div class="row mt-4">
|
||||
<div class="col">
|
||||
<textboxQuestion
|
||||
inputId="phoneNumberField"
|
||||
cmsWidgetName="PhoneNumberQuestion"
|
||||
v-model="welcomePageModel.phoneNumber"
|
||||
validationRules="phone-number-required"
|
||||
isRequired
|
||||
disableAutoFill />
|
||||
</div>
|
||||
</div>
|
||||
<div class="row mt-2 mb-4">
|
||||
<textboxQuestion
|
||||
inputId="emailField"
|
||||
cmsWidgetName="EmailAddressQuestion"
|
||||
v-model="email"
|
||||
validationRules="email-address-required"
|
||||
isRequired />
|
||||
<div class="row mt-4">
|
||||
<div class="col">
|
||||
<textboxQuestion
|
||||
inputId="emailField"
|
||||
cmsWidgetName="EmailAddressQuestion"
|
||||
v-model="welcomePageModel.email"
|
||||
validationRules="email-address-required|email-address-format"
|
||||
isRequired
|
||||
disableAutoFill />
|
||||
</div>
|
||||
</div>
|
||||
<div class="row mt-2 mb-4">
|
||||
<site-footer
|
||||
cmsWidgetName="SiteFooterWidget"
|
||||
:isForwardActionDisabled="!meta.valid"
|
||||
@back-clicked="backButtonAction"
|
||||
@ForwardClicked="forwardButtonAction" />
|
||||
<div class="row mt-4">
|
||||
<div class="col">
|
||||
<site-footer
|
||||
cmsWidgetName="SiteFooterWidget"
|
||||
:isForwardActionDisabled="!meta.valid"
|
||||
@back-clicked="backButtonAction"
|
||||
@ForwardClicked="forwardButtonAction" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Form>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
<script>
|
||||
// Components
|
||||
import siteHeader from '@/common-components/site-header/site-header';
|
||||
import siteSubHeader from '@/common-components/site-sub-header/site-sub-header';
|
||||
|
|
@ -118,7 +148,7 @@
|
|||
import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
|
||||
import { settleAllPromises } from "@/helpers/layout-helper";
|
||||
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 BaseFormMixin from '@/mixins/base-form-mixin.js';
|
||||
|
||||
|
|
@ -132,21 +162,40 @@
|
|||
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));
|
||||
|
||||
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 {
|
||||
name: "welcome-page",
|
||||
mixins: [BaseFormMixin],
|
||||
emits: ['update:modelValue'], // The component emits an event
|
||||
props: {
|
||||
modelValue: {
|
||||
type: Object,
|
||||
default: () => ({
|
||||
lossState: "",
|
||||
}),
|
||||
},
|
||||
validationRules: String,
|
||||
},
|
||||
data: {
|
||||
modelValue: {
|
||||
type: Object,
|
||||
default: () => ({
|
||||
welcomePageModel: {
|
||||
policyNumber: "",
|
||||
policyZipCode: "",
|
||||
dateOfLoss: "",
|
||||
damageCause: "",
|
||||
damageState: "",
|
||||
damageCity: "",
|
||||
isDamageGlassOnly: "",
|
||||
phoneNumber: "",
|
||||
email: ""
|
||||
},
|
||||
}),
|
||||
},
|
||||
},
|
||||
async beforeRouteEnter(to, from, next)
|
||||
{
|
||||
// Call APIs
|
||||
|
|
@ -253,6 +302,14 @@
|
|||
};
|
||||
},
|
||||
},
|
||||
welcomePageModel: {
|
||||
get: function () {
|
||||
return this.modelValue;
|
||||
},
|
||||
set: function (newValue) {
|
||||
this.$emit("update:modelValue", newValue);
|
||||
},
|
||||
},
|
||||
},
|
||||
components: {
|
||||
siteHeader,
|
||||
|
|
@ -284,5 +341,9 @@
|
|||
color: #000000 !important;
|
||||
margin-bottom: 16px !important;
|
||||
}
|
||||
.my-2
|
||||
{
|
||||
margin-bottom: 0rem !important;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue