107 lines
3.6 KiB
Vue
107 lines
3.6 KiB
Vue
<template>
|
|
<div class="customer-questions">
|
|
<addressQuestions ref="addressQuestions" v-model="customerModel.addressQuestions" />
|
|
<div class="row mb-4">
|
|
<div class="col">
|
|
<textboxQuestion
|
|
cmsWidgetName="FirstNameQuestionWidget"
|
|
v-model="customerModel.firstName"
|
|
ref="firstName"
|
|
customInputId="firstName"
|
|
validationRules="first-name-required"
|
|
autocomplete="given-name" />
|
|
</div>
|
|
</div>
|
|
<div class="row mb-4">
|
|
<div class="col">
|
|
<textboxQuestion
|
|
cmsWidgetName="LastNameQuestionWidget"
|
|
v-model="customerModel.lastName"
|
|
ref="lastName"
|
|
customInputId="lastName"
|
|
validationRules="last-name-required"
|
|
autocomplete="family-name" />
|
|
</div>
|
|
</div>
|
|
<div class="row mt-4">
|
|
<div class="col">
|
|
<textboxQuestion
|
|
cmsWidgetName="EmailAddressQuestionWidget"
|
|
v-model="customerModel.emailAddress"
|
|
ref="emailAddress"
|
|
customInputId="emailAddress"
|
|
:isRequired="!isEmailOptional"
|
|
:validationRules="validationRules"
|
|
:addOptionalText="isEmailOptional"
|
|
autocomplete="email" />
|
|
</div>
|
|
</div>
|
|
<div class="row mb-0">
|
|
<div class="col">
|
|
<textBlock cmsWidgetName="QuoteEmailTextBlockWidget" typeStyle="caption" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import addressQuestions from "@/fmg-components/address-questions/address-questions";
|
|
import textboxQuestion from "@/digital-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";
|
|
import textBlock from "@/digital-components/text-block/text-block";
|
|
|
|
// 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: "",
|
|
zipCode: "",
|
|
},
|
|
firstName: "",
|
|
lastName: "",
|
|
emailAddress: "",
|
|
},
|
|
}),
|
|
},
|
|
validationRules: String,
|
|
isEmailOptional: Boolean,
|
|
},
|
|
computed: {
|
|
customerModel: {
|
|
get: function () {
|
|
return this.modelValue;
|
|
},
|
|
set: function (newValue) {
|
|
this.$emit("update:modelValue", newValue);
|
|
},
|
|
},
|
|
},
|
|
components: {
|
|
addressQuestions,
|
|
textboxQuestion,
|
|
textBlock,
|
|
},
|
|
};
|
|
</script>
|