71 lines
No EOL
2.4 KiB
Vue
71 lines
No EOL
2.4 KiB
Vue
<template>
|
|
<addressQuestions ref="addressQuestions" v-model="customerModel.addressQuestions" :alertNotifications="alertNotifications" />
|
|
<div class="row my-4">
|
|
<div class="col">
|
|
<textboxQuestion cmsWidgetName="FirstNameQuestionWidget" v-model="customerModel.firstName" ref="firstName" inputId="08497a2efd9a4a73a70360ab47b4838d" disableAutoFill validationRules="first-name-required" />
|
|
</div>
|
|
</div>
|
|
<div class="row my-4">
|
|
<div class="col">
|
|
<textboxQuestion cmsWidgetName="LastNameQuestionWidget" v-model="customerModel.lastName" ref="lastName" inputId="0030e56a57e74a4ab92de7fb8e97fec5" disableAutoFill validationRules="last-name-required" />
|
|
</div>
|
|
</div>
|
|
<div class="row my-4">
|
|
<div class="col">
|
|
<textboxQuestion cmsWidgetName="EmailAddressQuestionWidget" v-model="customerModel.emailAddress" ref="emailAddress" inputId="00450a91b8964a768ce3992e6feb890f" disableAutoFill validationRules="email-address-required|email-address-format"/>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import addressQuestions from "@/layouts/address-lookup/customer-questions/address-questions/address-questions";
|
|
import textboxQuestion from "@/common-components/textbox-question/textbox-question";
|
|
import { defineRule } from "vee-validate";
|
|
import { required } from "@/helpers/validation-rules";
|
|
import { regex } from "@/helpers/validation-rules";
|
|
import { errorMessages } from "@/constants/error-messages";
|
|
|
|
// DEFINE VALIDATION RULES
|
|
defineRule("first-name-required", required(errorMessages.FIRST_NAME_REQUIRED));
|
|
defineRule("last-name-required", required(errorMessages.LAST_NAME_REQUIRED));
|
|
defineRule("email-address-required", required(errorMessages.EMAIL_ADDRESS_REQUIRED));
|
|
defineRule("email-address-format", regex(/^([a-zA-Z0-9_\-.+]+)@([a-zA-Z0-9_\-.]+).([a-zA-Z]{2,})$/, errorMessages.EMAIL_ADDRESS_FORMAT));
|
|
|
|
export default ({
|
|
name: "customer-questions",
|
|
emits: ['update:modelValue'], // The component emits an event
|
|
props: {
|
|
modelValue: {
|
|
type: Object,
|
|
default: () => ({
|
|
customerQuestions: {
|
|
addressQuestions: {
|
|
streetAddress: "",
|
|
city: "",
|
|
state: "",
|
|
zip: "",
|
|
},
|
|
firstName: "",
|
|
lastName: "",
|
|
emailAddress: "",
|
|
}
|
|
}),
|
|
},
|
|
validationRules: String,
|
|
},
|
|
computed: {
|
|
customerModel: {
|
|
get: function() {
|
|
return this.modelValue;
|
|
},
|
|
set: function(newValue) {
|
|
this.$emit("update:modelValue", newValue);
|
|
}
|
|
},
|
|
},
|
|
components: {
|
|
addressQuestions,
|
|
textboxQuestion,
|
|
}
|
|
})
|
|
</script> |