Converted Spaces to Tabs for cleaner indentation
This commit is contained in:
Leah Schumann
parent
31450a374c
commit
e8e8632d2a
5 changed files with 585 additions and 537 deletions
|
|
@ -1,103 +1,103 @@
|
|||
<template>
|
||||
<div class="dropdown-question">
|
||||
<label :for="inputId" :aria-label="ariaLabelText" class="form-label" v-html="labelText"></label>
|
||||
<select v-model="selectedOption"
|
||||
class="form-select"
|
||||
:id="inputId"
|
||||
:name="inputId"
|
||||
:aria-disabled="isDisabled"
|
||||
:disabled="isDisabled"
|
||||
:aria-required="isRequired">
|
||||
<option v-for="(value, name, index) in options" :value="name" :key="index">
|
||||
{{ value }}
|
||||
</option>
|
||||
</select>
|
||||
<p class="mt-2 form-test-error" v-if="!suppressError">
|
||||
There has been an error!
|
||||
</p>
|
||||
</div>
|
||||
<div class="dropdown-question">
|
||||
<label :for="inputId" :aria-label="ariaLabelText" class="form-label" v-html="labelText"></label>
|
||||
<select v-model="selectedOption"
|
||||
class="form-select"
|
||||
:id="inputId"
|
||||
:name="inputId"
|
||||
:aria-disabled="isDisabled"
|
||||
:disabled="isDisabled"
|
||||
:aria-required="isRequired">
|
||||
<option v-for="(value, name, index) in options" :value="name" :key="index">
|
||||
{{ value }}
|
||||
</option>
|
||||
</select>
|
||||
<p class="mt-2 form-test-error" v-if="!suppressError">
|
||||
There has been an error!
|
||||
</p>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { useField } from "vee-validate";
|
||||
|
||||
export default {
|
||||
name: "dropdown-question",
|
||||
props: {
|
||||
modelValue: String,
|
||||
inputId: String,
|
||||
options: {
|
||||
type: Object,
|
||||
required: true
|
||||
},
|
||||
isDisabled: Boolean,
|
||||
isRequired: Boolean,
|
||||
disableAutoFill: Boolean,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
labelText: "",
|
||||
ariaLabelText: "",
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
initializeComponent(cmsContent) {
|
||||
var labelText = cmsContent;
|
||||
if (this.disableAutoFill) {
|
||||
var noBreakChar = "⁠";
|
||||
var position = 1;
|
||||
labelText = [labelText.slice(0, position), noBreakChar, labelText.slice(position)].join('');
|
||||
}
|
||||
name: "dropdown-question",
|
||||
props: {
|
||||
modelValue: String,
|
||||
inputId: String,
|
||||
options: {
|
||||
type: Object,
|
||||
required: true
|
||||
},
|
||||
isDisabled: Boolean,
|
||||
isRequired: Boolean,
|
||||
disableAutoFill: Boolean,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
labelText: "",
|
||||
ariaLabelText: "",
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
initializeComponent(cmsContent) {
|
||||
var labelText = cmsContent;
|
||||
if (this.disableAutoFill) {
|
||||
var noBreakChar = "⁠";
|
||||
var position = 1;
|
||||
labelText = [labelText.slice(0, position), noBreakChar, labelText.slice(position)].join('');
|
||||
}
|
||||
|
||||
this.labelText = labelText;
|
||||
this.ariaLabelText = cmsContent;
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
selectedOption: {
|
||||
get: function() {
|
||||
return this.modelValue;
|
||||
},
|
||||
set: function(newValue) {
|
||||
this.$emit("update:modelValue", newValue);
|
||||
}
|
||||
},
|
||||
},
|
||||
this.labelText = labelText;
|
||||
this.ariaLabelText = cmsContent;
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
selectedOption: {
|
||||
get: function() {
|
||||
return this.modelValue;
|
||||
},
|
||||
set: function(newValue) {
|
||||
this.$emit("update:modelValue", newValue);
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.dropdown-question {
|
||||
label {
|
||||
color: $black;
|
||||
}
|
||||
.form-label {
|
||||
margin-bottom: .25rem;
|
||||
}
|
||||
.form-select {
|
||||
color: $gray-600;
|
||||
background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 8.89' xml:space='preserve'%3e%3cpath d='M8 8.89c-.24 0-.46-.09-.63-.26L.26 1.53a.901.901 0 0 1 0-1.27C.43.1.66 0 .9 0s.47.1.64.26L8 6.74 14.47.27c.17-.17.4-.27.64-.27s.47.1.63.27c.17.17.26.4.26.64s-.1.47-.27.63l-7.1 7.09a.86.86 0 0 1-.63.26z' fill='%231474a2'/%3e%3c/svg%3e");
|
||||
border: 1px solid $gray-500;
|
||||
border-radius: .5rem;
|
||||
min-height: 3rem;
|
||||
&:focus,
|
||||
&:focus-visible {
|
||||
box-shadow: 0 0 0 2.5px $blue;
|
||||
}
|
||||
&:disabled,
|
||||
&.disabled {
|
||||
background-color: $gray-100;
|
||||
filter: grayscale(100%);
|
||||
&:hover {
|
||||
box-shadow: 0 0 0 4px transparent;
|
||||
border: 1px solid $gray-500;
|
||||
}
|
||||
}
|
||||
&:hover {
|
||||
border: 1px solid $gray-500;
|
||||
box-shadow: 0 0 0 4px $blue-300;
|
||||
}
|
||||
}
|
||||
label {
|
||||
color: $black;
|
||||
}
|
||||
.form-label {
|
||||
margin-bottom: .25rem;
|
||||
}
|
||||
.form-select {
|
||||
color: $gray-600;
|
||||
background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 8.89' xml:space='preserve'%3e%3cpath d='M8 8.89c-.24 0-.46-.09-.63-.26L.26 1.53a.901.901 0 0 1 0-1.27C.43.1.66 0 .9 0s.47.1.64.26L8 6.74 14.47.27c.17-.17.4-.27.64-.27s.47.1.63.27c.17.17.26.4.26.64s-.1.47-.27.63l-7.1 7.09a.86.86 0 0 1-.63.26z' fill='%231474a2'/%3e%3c/svg%3e");
|
||||
border: 1px solid $gray-500;
|
||||
border-radius: .5rem;
|
||||
min-height: 3rem;
|
||||
&:focus,
|
||||
&:focus-visible {
|
||||
box-shadow: 0 0 0 2.5px $blue;
|
||||
}
|
||||
&:disabled,
|
||||
&.disabled {
|
||||
background-color: $gray-100;
|
||||
filter: grayscale(100%);
|
||||
&:hover {
|
||||
box-shadow: 0 0 0 4px transparent;
|
||||
border: 1px solid $gray-500;
|
||||
}
|
||||
}
|
||||
&:hover {
|
||||
border: 1px solid $gray-500;
|
||||
box-shadow: 0 0 0 4px $blue-300;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
|
|
|
|||
|
|
@ -1,129 +1,129 @@
|
|||
<template>
|
||||
<div class="textbox-question" :class="hasError ? 'has-error' : ''">
|
||||
<label :for="inputId" :aria-label="ariaLabelText" class="form-label" v-html="labelText"></label>
|
||||
<input v-model="value"
|
||||
v-maska="mask"
|
||||
:type="type"
|
||||
class="form-control"
|
||||
:ref="inputId"
|
||||
:id="inputId"
|
||||
:name="inputId"
|
||||
:placeholder="placeholderText"
|
||||
:aria-disabled="isDisabled"
|
||||
:disabled="isDisabled"
|
||||
:aria-required="isRequired"
|
||||
autocomplete="off"
|
||||
:class="[hasIcon ? 'has-icon' : '', iconRight ? 'icon-right' : '']" />
|
||||
<p class="mt-2 form-test-error" v-if="!suppressError">
|
||||
There has been an error!
|
||||
</p>
|
||||
</div>
|
||||
<div class="textbox-question" :class="hasError ? 'has-error' : ''">
|
||||
<label :for="inputId" :aria-label="ariaLabelText" class="form-label" v-html="labelText"></label>
|
||||
<input v-model="value"
|
||||
v-maska="mask"
|
||||
:type="type"
|
||||
class="form-control"
|
||||
:ref="inputId"
|
||||
:id="inputId"
|
||||
:name="inputId"
|
||||
:placeholder="placeholderText"
|
||||
:aria-disabled="isDisabled"
|
||||
:disabled="isDisabled"
|
||||
:aria-required="isRequired"
|
||||
autocomplete="off"
|
||||
:class="[hasIcon ? 'has-icon' : '', iconRight ? 'icon-right' : '']" />
|
||||
<p class="mt-2 form-test-error" v-if="!suppressError">
|
||||
There has been an error!
|
||||
</p>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
export default {
|
||||
name: "textbox-question",
|
||||
props: {
|
||||
type: {
|
||||
type: String,
|
||||
default: 'text',
|
||||
},
|
||||
placeholderText: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
modelValue: String,
|
||||
inputId: String,
|
||||
isDisabled: Boolean,
|
||||
isRequired: Boolean,
|
||||
disableAutoFill: Boolean,
|
||||
hasIcon: Boolean,// If input has an icon
|
||||
iconRight: Boolean,// Place icon on right side of text input, otherwise default is left if hasIcon prop is used
|
||||
hasError: Boolean,
|
||||
mask: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
labelText: "",
|
||||
ariaLabelText: "",
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
initializeComponent(cmsContent){
|
||||
var labelText = cmsContent;
|
||||
if (this.disableAutoFill) {
|
||||
var noBreakChar = "⁠";
|
||||
var position = 1;
|
||||
labelText = [labelText.slice(0, position), noBreakChar, labelText.slice(position)].join('');
|
||||
}
|
||||
name: "textbox-question",
|
||||
props: {
|
||||
type: {
|
||||
type: String,
|
||||
default: 'text',
|
||||
},
|
||||
placeholderText: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
modelValue: String,
|
||||
inputId: String,
|
||||
isDisabled: Boolean,
|
||||
isRequired: Boolean,
|
||||
disableAutoFill: Boolean,
|
||||
hasIcon: Boolean,// If input has an icon
|
||||
iconRight: Boolean,// Place icon on right side of text input, otherwise default is left if hasIcon prop is used
|
||||
hasError: Boolean,
|
||||
mask: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
labelText: "",
|
||||
ariaLabelText: "",
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
initializeComponent(cmsContent){
|
||||
var labelText = cmsContent;
|
||||
if (this.disableAutoFill) {
|
||||
var noBreakChar = "⁠";
|
||||
var position = 1;
|
||||
labelText = [labelText.slice(0, position), noBreakChar, labelText.slice(position)].join('');
|
||||
}
|
||||
|
||||
this.labelText = labelText;
|
||||
this.ariaLabelText = cmsContent;
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
value: {
|
||||
get: function() {
|
||||
return this.modelValue;
|
||||
},
|
||||
set: function(newValue) {
|
||||
this.$emit("update:modelValue", newValue);
|
||||
}
|
||||
},
|
||||
},
|
||||
this.labelText = labelText;
|
||||
this.ariaLabelText = cmsContent;
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
value: {
|
||||
get: function() {
|
||||
return this.modelValue;
|
||||
},
|
||||
set: function(newValue) {
|
||||
this.$emit("update:modelValue", newValue);
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.textbox-question {
|
||||
label {
|
||||
color: $black;
|
||||
}
|
||||
input {
|
||||
&.has-icon {
|
||||
background-image: url(~@/assets/img/icons/location-pin.svg);
|
||||
background-repeat: no-repeat;
|
||||
background-position: .75rem 50%;
|
||||
background-size: 1rem auto;
|
||||
padding: 0 0.75rem 0 2.5rem;
|
||||
&.icon-right {
|
||||
background-position: calc(100% - .75rem) 50%;
|
||||
padding: 0 2.5rem 0 0.75rem
|
||||
}
|
||||
}
|
||||
}
|
||||
.form-label {
|
||||
margin-bottom: .25rem;
|
||||
}
|
||||
.form-control {
|
||||
border: 1px solid $gray-500;
|
||||
border-radius: .5rem;
|
||||
min-height: 3rem;
|
||||
&::placeholder {
|
||||
color: $gray-500;
|
||||
}
|
||||
&:focus {
|
||||
box-shadow: 0 0 0 2.5px $blue;
|
||||
}
|
||||
&:disabled,
|
||||
&.disabled {
|
||||
background-color: $gray-100;
|
||||
&:hover {
|
||||
box-shadow: 0 0 0 4px transparent;
|
||||
border: 1px solid $gray-500;
|
||||
}
|
||||
}
|
||||
&:hover {
|
||||
border: 1px solid $gray-500;
|
||||
box-shadow: 0 0 0 4px $blue-300;
|
||||
}
|
||||
}
|
||||
p {
|
||||
display: none;
|
||||
}
|
||||
label {
|
||||
color: $black;
|
||||
}
|
||||
input {
|
||||
&.has-icon {
|
||||
background-image: url(~@/assets/img/icons/location-pin.svg);
|
||||
background-repeat: no-repeat;
|
||||
background-position: .75rem 50%;
|
||||
background-size: 1rem auto;
|
||||
padding: 0 0.75rem 0 2.5rem;
|
||||
&.icon-right {
|
||||
background-position: calc(100% - .75rem) 50%;
|
||||
padding: 0 2.5rem 0 0.75rem
|
||||
}
|
||||
}
|
||||
}
|
||||
.form-label {
|
||||
margin-bottom: .25rem;
|
||||
}
|
||||
.form-control {
|
||||
border: 1px solid $gray-500;
|
||||
border-radius: .5rem;
|
||||
min-height: 3rem;
|
||||
&::placeholder {
|
||||
color: $gray-500;
|
||||
}
|
||||
&:focus {
|
||||
box-shadow: 0 0 0 2.5px $blue;
|
||||
}
|
||||
&:disabled,
|
||||
&.disabled {
|
||||
background-color: $gray-100;
|
||||
&:hover {
|
||||
box-shadow: 0 0 0 4px transparent;
|
||||
border: 1px solid $gray-500;
|
||||
}
|
||||
}
|
||||
&:hover {
|
||||
border: 1px solid $gray-500;
|
||||
box-shadow: 0 0 0 4px $blue-300;
|
||||
}
|
||||
}
|
||||
p {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,16 +1,17 @@
|
|||
<template>
|
||||
<div class="container-fluid shadow rounded-3 p-2 position-relative make-tall">
|
||||
<funnelHeader ref="funnelHeader" />
|
||||
<vehicleBanner ref="vehicleBanner" :displayGenericVehicleImage=false />
|
||||
<funnelSubHeader ref="funnelSubHeader" />
|
||||
<form autocomplete="off">
|
||||
<customerQuestions ref="customerQuestions" />
|
||||
<funnelFooter ref="funnelFooter" />
|
||||
</form>
|
||||
</div>
|
||||
<div class="container-fluid shadow rounded-3 p-2 position-relative make-tall">
|
||||
<funnelHeader ref="funnelHeader" />
|
||||
<vehicleBanner ref="vehicleBanner" :displayGenericVehicleImage=false />
|
||||
<funnelSubHeader ref="funnelSubHeader" />
|
||||
<form autocomplete="off">
|
||||
<customerQuestions ref="customerQuestions" v-model="customerQuestions" />
|
||||
<funnelFooter ref="funnelFooter" />
|
||||
</form>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
// Components
|
||||
import funnelHeader from "@/common-components/funnel-header/funnel-header";
|
||||
import funnelFooter from "@/common-components/funnel-footer/funnel-footer";
|
||||
|
|
@ -26,70 +27,80 @@ import store from "@/store";
|
|||
|
||||
|
||||
export default {
|
||||
name: "address-lookup",
|
||||
async beforeRouteEnter(to, from, next) {
|
||||
// Call APIs
|
||||
const cmsContentPromise = fetchCmsContentForPage(to.query.fmgPage);
|
||||
name: "address-lookup",
|
||||
async beforeRouteEnter(to, from, next) {
|
||||
// Call APIs
|
||||
const cmsContentPromise = fetchCmsContentForPage(to.query.fmgPage);
|
||||
|
||||
// Settle promises and get results
|
||||
const promiseResultMap = [
|
||||
{
|
||||
resultKey: "cmsContent",
|
||||
promise: cmsContentPromise,
|
||||
},
|
||||
];
|
||||
// Settle promises and get results
|
||||
const promiseResultMap = [
|
||||
{
|
||||
resultKey: "cmsContent",
|
||||
promise: cmsContentPromise,
|
||||
},
|
||||
];
|
||||
|
||||
const resultMap = await settleAllPromises(promiseResultMap);
|
||||
const resultMap = await settleAllPromises(promiseResultMap);
|
||||
|
||||
// Call the "next" function to complete the transition to this page.
|
||||
next((vm) => {
|
||||
vm.$refs.funnelHeader.initializeComponent(
|
||||
resultMap.cmsContent.FunnelHeaderWidget
|
||||
);
|
||||
vm.$refs.vehicleBanner.initializeComponent(
|
||||
resultMap.cmsContent.VehicleBannerWidget
|
||||
);
|
||||
vm.$refs.funnelSubHeader.initializeComponent(
|
||||
resultMap.cmsContent.FunnelSubHeaderWidget
|
||||
);
|
||||
vm.$refs.funnelFooter.initializeComponent(
|
||||
resultMap.cmsContent.FunnelFooterWidget
|
||||
);
|
||||
vm.$refs.customerQuestions.initializeComponent([
|
||||
resultMap.cmsContent.StreetAddressQuestionWidget,
|
||||
resultMap.cmsContent.CityQuestionWidget,
|
||||
resultMap.cmsContent.StateQuestionWidget,
|
||||
resultMap.cmsContent.ZipQuestionWidget,
|
||||
resultMap.cmsContent.AlertVerificationWarningWidget,
|
||||
resultMap.cmsContent.AlertNoMatchWarningWidget,
|
||||
resultMap.cmsContent.FirstNameQuestionWidget,
|
||||
resultMap.cmsContent.LastNameQuestionWidget,
|
||||
resultMap.cmsContent.EmailAddressQuestionWidget,
|
||||
// Call the "next" function to complete the transition to this page.
|
||||
next((vm) => {
|
||||
vm.$refs.funnelHeader.initializeComponent(
|
||||
resultMap.cmsContent.FunnelHeaderWidget
|
||||
);
|
||||
vm.$refs.vehicleBanner.initializeComponent(
|
||||
resultMap.cmsContent.VehicleBannerWidget
|
||||
);
|
||||
vm.$refs.funnelSubHeader.initializeComponent(
|
||||
resultMap.cmsContent.FunnelSubHeaderWidget
|
||||
);
|
||||
vm.$refs.funnelFooter.initializeComponent(
|
||||
resultMap.cmsContent.FunnelFooterWidget
|
||||
);
|
||||
vm.$refs.customerQuestions.initializeComponent([
|
||||
resultMap.cmsContent.StreetAddressQuestionWidget,
|
||||
resultMap.cmsContent.CityQuestionWidget,
|
||||
resultMap.cmsContent.StateQuestionWidget,
|
||||
resultMap.cmsContent.ZipQuestionWidget,
|
||||
resultMap.cmsContent.AlertVerificationWarningWidget,
|
||||
resultMap.cmsContent.AlertNoMatchWarningWidget,
|
||||
resultMap.cmsContent.FirstNameQuestionWidget,
|
||||
resultMap.cmsContent.LastNameQuestionWidget,
|
||||
resultMap.cmsContent.EmailAddressQuestionWidget,
|
||||
|
||||
]
|
||||
);
|
||||
});
|
||||
},
|
||||
data(){
|
||||
return {
|
||||
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
arePagePrerequisitesValid() {
|
||||
return store.getters.vehicle.carId !== null;
|
||||
},
|
||||
resetDependentState() {
|
||||
// Invokes
|
||||
store.dispatch(storeActions.RESET_PARTS_AND_DEPS);
|
||||
},
|
||||
},
|
||||
components: {
|
||||
funnelHeader,
|
||||
funnelFooter,
|
||||
vehicleBanner,
|
||||
funnelSubHeader,
|
||||
customerQuestions,
|
||||
},
|
||||
]
|
||||
);
|
||||
});
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
customerQuestions: {
|
||||
addressQuestions: {
|
||||
streetAddress: "",
|
||||
city: "",
|
||||
state: "",
|
||||
zip: "",
|
||||
},
|
||||
firstName: "",
|
||||
lastName: "",
|
||||
emailAddress: "",
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
arePagePrerequisitesValid() {
|
||||
return store.getters.vehicle.carId !== null;
|
||||
},
|
||||
resetDependentState() {
|
||||
// Invokes
|
||||
store.dispatch(storeActions.RESET_PARTS_AND_DEPS);
|
||||
},
|
||||
},
|
||||
components: {
|
||||
funnelHeader,
|
||||
funnelFooter,
|
||||
vehicleBanner,
|
||||
funnelSubHeader,
|
||||
customerQuestions,
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,38 +1,38 @@
|
|||
<template>
|
||||
<div class="row my-4">
|
||||
<div class="col">
|
||||
<textboxQuestion v-model="streetAddress" ref="autocomplete" inputId="autocomplete" placeholderText="Search" aria-haspopup="" hasIcon disableAutoFill />
|
||||
</div>
|
||||
</div>
|
||||
<transition name="fade" mode="out-in">
|
||||
<div class="address-fields" v-show="showAddressFields" aria-live="polite">
|
||||
<div class="row my-4">
|
||||
<div class="col">
|
||||
<textboxQuestion v-model="city" ref="city" inputId="cbf28188fdf2436688fd735915f7ee56" disableAutoFill />
|
||||
</div>
|
||||
</div>
|
||||
<div class="row my-4">
|
||||
<div class="col-6">
|
||||
<dropdownQuestion v-model="state" ref="state" inputId="8fdf9dc2e13e430eb57529499dceb3eb" :options="stateOptions" disableAutoFill />
|
||||
</div>
|
||||
<div class="col-6">
|
||||
<textboxQuestion v-model="zip" ref="zip" inputId="01a9a1c2de0b4c9da8e023c9ae3be498" mask="#####" disableAutoFill />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</transition>
|
||||
<alert ref="alertVerificationWarning" v-show="displayVerificationWarning"
|
||||
alertClass="alert-warning"
|
||||
:alertHeadline="alertHeadlineVerificationWarning"
|
||||
:alertCopy="alertCopyVerificationWarning"
|
||||
v-bind:isDismissible="false"
|
||||
/>
|
||||
<alert ref="alertNoMatchWarning" v-show="displayNoMatchWarning"
|
||||
alertClass="alert-warning"
|
||||
:alertHeadline="alertHeadlineNoMatchWarning"
|
||||
:alertCopy="alertCopyNoMatchWarning"
|
||||
v-bind:isDismissible="false"
|
||||
/>
|
||||
<div class="row my-4">
|
||||
<div class="col">
|
||||
<textboxQuestion v-model="addressModel.streetAddress" ref="autocomplete" inputId="autocomplete" placeholderText="Search" aria-haspopup="" hasIcon disableAutoFill />
|
||||
</div>
|
||||
</div>
|
||||
<transition name="fade" mode="out-in">
|
||||
<div class="address-fields" v-show="showAddressFields" aria-live="polite">
|
||||
<div class="row my-4">
|
||||
<div class="col">
|
||||
<textboxQuestion v-model="addressModel.city" ref="city" inputId="cbf28188fdf2436688fd735915f7ee56" disableAutoFill />
|
||||
</div>
|
||||
</div>
|
||||
<div class="row my-4">
|
||||
<div class="col-6">
|
||||
<dropdownQuestion v-model="addressModel.state" ref="state" inputId="8fdf9dc2e13e430eb57529499dceb3eb" :options="stateOptions" disableAutoFill />
|
||||
</div>
|
||||
<div class="col-6">
|
||||
<textboxQuestion v-model="addressModel.zip" ref="zip" inputId="01a9a1c2de0b4c9da8e023c9ae3be498" mask="#####" disableAutoFill />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</transition>
|
||||
<alert ref="alertVerificationWarning" v-show="displayVerificationWarning"
|
||||
alertClass="alert-warning"
|
||||
:alertHeadline="alertHeadlineVerificationWarning"
|
||||
:alertCopy="alertCopyVerificationWarning"
|
||||
v-bind:isDismissible="false"
|
||||
/>
|
||||
<alert ref="alertNoMatchWarning" v-show="displayNoMatchWarning"
|
||||
alertClass="alert-warning"
|
||||
:alertHeadline="alertHeadlineNoMatchWarning"
|
||||
:alertCopy="alertCopyNoMatchWarning"
|
||||
v-bind:isDismissible="false"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
|
@ -40,208 +40,219 @@ import textboxQuestion from "@/common-components/textbox-question/textbox-questi
|
|||
import dropdownQuestion from "@/common-components/dropdown-question/dropdown-question";
|
||||
import alert from "@/ux-components/alert/alert";
|
||||
import { applicationConfig } from "@/constants/application-config.js";
|
||||
import { computed } from 'vue';
|
||||
//import store from "@/store";
|
||||
|
||||
export default ({
|
||||
name: "address-questions",
|
||||
data() {
|
||||
return {
|
||||
showAddressFields: false,
|
||||
displayVerificationWarning: false,
|
||||
displayNoMatchWarning: false,
|
||||
streetAddress: "",
|
||||
city: "",
|
||||
state: "",
|
||||
zip: "",
|
||||
stateOptions: {
|
||||
'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',
|
||||
},
|
||||
alertHeadlineVerificationWarning: "",
|
||||
alertCopyVerificationWarning: "",
|
||||
alertHeadlineNoMatchWarning: "",
|
||||
alertCopyNoMatchWarning: "",
|
||||
}
|
||||
},
|
||||
props: {
|
||||
name: "address-questions",
|
||||
emits: ['update:modelValue'], // The component emits an event
|
||||
props: {
|
||||
modelValue: {
|
||||
type: Object,
|
||||
default: () => ({
|
||||
streetAddress: "",
|
||||
city: "",
|
||||
state: "",
|
||||
zip: "",
|
||||
}),
|
||||
},
|
||||
},
|
||||
setup(props, { emit }) {
|
||||
const addressModel = computed({ // Use computed to wrap the object
|
||||
get: () => props.modelValue,
|
||||
set: (value) => emit('update:modelValue', value),
|
||||
});
|
||||
|
||||
},
|
||||
methods: {
|
||||
initializeComponent(cmsContent) {
|
||||
this.$refs.autocomplete.initializeComponent(cmsContent[0].QuestionText);
|
||||
this.$refs.city.initializeComponent(cmsContent[1].QuestionText);
|
||||
this.$refs.state.initializeComponent(cmsContent[2].QuestionText);
|
||||
this.$refs.zip.initializeComponent(cmsContent[3].QuestionText);
|
||||
return { addressModel };
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
showAddressFields: false,
|
||||
displayVerificationWarning: false,
|
||||
displayNoMatchWarning: false,
|
||||
stateOptions: {
|
||||
'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',
|
||||
},
|
||||
alertHeadlineVerificationWarning: "",
|
||||
alertCopyVerificationWarning: "",
|
||||
alertHeadlineNoMatchWarning: "",
|
||||
alertCopyNoMatchWarning: "",
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
initializeComponent(cmsContent) {
|
||||
this.$refs.autocomplete.initializeComponent(cmsContent[0].QuestionText);
|
||||
this.$refs.city.initializeComponent(cmsContent[1].QuestionText);
|
||||
this.$refs.state.initializeComponent(cmsContent[2].QuestionText);
|
||||
this.$refs.zip.initializeComponent(cmsContent[3].QuestionText);
|
||||
|
||||
// assign alert texts to this component
|
||||
this.alertHeadlineVerificationWarning = cmsContent[4].HeadlineText;
|
||||
this.alertCopyVerificationWarning = cmsContent[4].BodyText;
|
||||
// assign alert texts to this component
|
||||
this.alertHeadlineVerificationWarning = cmsContent[4].HeadlineText;
|
||||
this.alertCopyVerificationWarning = cmsContent[4].BodyText;
|
||||
|
||||
this.alertHeadlineNoMatchWarning = cmsContent[5].HeadlineText;
|
||||
this.alertCopyNoMatchWarning = cmsContent[5].BodyText;
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
this.alertHeadlineNoMatchWarning = cmsContent[5].HeadlineText;
|
||||
this.alertCopyNoMatchWarning = cmsContent[5].BodyText;
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
|
||||
},
|
||||
mounted() {
|
||||
let addressField1 = document.getElementById("autocomplete");
|
||||
let self = this;
|
||||
|
||||
let addressField1 = document.getElementById("autocomplete");
|
||||
let self = this;
|
||||
let apiKey = applicationConfig.GOOGLE_PLACES_API_KEY;
|
||||
|
||||
let apiKey = applicationConfig.GOOGLE_PLACES_API_KEY;
|
||||
this.$loadScript(`https://maps.googleapis.com/maps/api/js?key=${apiKey}&libraries=places`)
|
||||
.then(() => {
|
||||
// Script is loaded, initialize the autocomplete textbox
|
||||
const autocomplete = new window.google.maps.places.Autocomplete(
|
||||
addressField1,
|
||||
{
|
||||
componentRestrictions: { country: ["us"] },
|
||||
fields: ["address_components"],
|
||||
types: ["address"],
|
||||
}
|
||||
);
|
||||
|
||||
this.$loadScript(`https://maps.googleapis.com/maps/api/js?key=${apiKey}&libraries=places`)
|
||||
.then(() => {
|
||||
// Script is loaded, initialize the autocomplete textbox
|
||||
const autocomplete = new window.google.maps.places.Autocomplete(
|
||||
addressField1,
|
||||
{
|
||||
componentRestrictions: { country: ["us"] },
|
||||
fields: ["address_components"],
|
||||
types: ["address"],
|
||||
}
|
||||
);
|
||||
// Standard place_changed event handling
|
||||
autocomplete.addListener('place_changed', fillInAddress);
|
||||
|
||||
// Standard place_changed event handling
|
||||
autocomplete.addListener('place_changed', fillInAddress);
|
||||
addressField1.onblur = function() {
|
||||
var hover = document.querySelector(".pac-container .pac-item:hover");
|
||||
|
||||
addressField1.onblur = function() {
|
||||
var hover = document.querySelector(".pac-container .pac-item:hover");
|
||||
// if an item has been clicked, do nothing, otherwise get first solution and use Geocoder to get the place
|
||||
if (hover === null) {
|
||||
var item = document.querySelector(".pac-container .pac-item");
|
||||
if (item != null) {
|
||||
var firstResult = item.textContent;
|
||||
var geocoder = new window.google.maps.Geocoder();
|
||||
geocoder.geocode({
|
||||
address: firstResult
|
||||
}, function (results, status) {
|
||||
if (status === window.google.maps.GeocoderStatus.OK) {
|
||||
fillInAddress(results[0]);
|
||||
self.displayVerificationWarning = true;
|
||||
self.displayNoMatchWarning = false;
|
||||
}
|
||||
});
|
||||
}
|
||||
else {
|
||||
self.addressModel.city = "";
|
||||
self.addressModel.state = "";
|
||||
self.addressModel.zip = "";
|
||||
self.showAddressFields = true;
|
||||
self.displayVerificationWarning = false;
|
||||
self.displayNoMatchWarning = true;
|
||||
}
|
||||
|
||||
// if an item has been clicked, do nothing, otherwise get first solution and use Geocoder to get the place
|
||||
if (hover === null) {
|
||||
var item = document.querySelector(".pac-container .pac-item");
|
||||
if (item != null) {
|
||||
var firstResult = item.textContent;
|
||||
var geocoder = new window.google.maps.Geocoder();
|
||||
geocoder.geocode({
|
||||
address: firstResult
|
||||
}, function (results, status) {
|
||||
if (status === window.google.maps.GeocoderStatus.OK) {
|
||||
fillInAddress(results[0]);
|
||||
self.displayVerificationWarning = true;
|
||||
self.displayNoMatchWarning = false;
|
||||
}
|
||||
});
|
||||
}
|
||||
else {
|
||||
self.city = "";
|
||||
self.state = "";
|
||||
self.zip = "";
|
||||
self.showAddressFields = true;
|
||||
self.displayVerificationWarning = false;
|
||||
self.displayNoMatchWarning = true;
|
||||
}
|
||||
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
}
|
||||
};
|
||||
function fillInAddress(place) {
|
||||
if (!place) {
|
||||
place = autocomplete.getPlace();
|
||||
}
|
||||
|
||||
function fillInAddress(place) {
|
||||
if (!place) {
|
||||
place = autocomplete.getPlace();
|
||||
}
|
||||
if (place && place.address_components) {
|
||||
self.addressModel.streetAddress= "";
|
||||
self.showAddressFields = true;
|
||||
|
||||
if (place && place.address_components) {
|
||||
self.streetAddress= "";
|
||||
self.showAddressFields = true;
|
||||
for (const component of place.address_components) {
|
||||
const componentType = component.types[0];
|
||||
|
||||
for (const component of place.address_components) {
|
||||
const componentType = component.types[0];
|
||||
switch (componentType) {
|
||||
case "street_number": {
|
||||
self.addressModel.streetAddress = component.long_name;
|
||||
break;
|
||||
}
|
||||
case "route": {
|
||||
self.addressModel.streetAddress += ' ' + component.short_name;
|
||||
break;
|
||||
}
|
||||
case "locality": {
|
||||
self.addressModel.city = component.long_name;
|
||||
break;
|
||||
}
|
||||
case "administrative_area_level_1": {
|
||||
self.addressModel.state = component.short_name;
|
||||
break;
|
||||
}
|
||||
case "postal_code": {
|
||||
self.addressModel.zip = component.long_name;
|
||||
break;
|
||||
}
|
||||
|
||||
switch (componentType) {
|
||||
case "street_number": {
|
||||
self.streetAddress = component.long_name;
|
||||
break;
|
||||
}
|
||||
case "route": {
|
||||
self.streetAddress += ' ' + component.short_name;
|
||||
break;
|
||||
}
|
||||
case "locality": {
|
||||
self.city = component.long_name;
|
||||
break;
|
||||
}
|
||||
case "administrative_area_level_1": {
|
||||
self.state = component.short_name;
|
||||
break;
|
||||
}
|
||||
case "postal_code": {
|
||||
self.zip = component.long_name;
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
self.displayVerificationWarning = false;
|
||||
self.displayNoMatchWarning = false;
|
||||
}
|
||||
else {
|
||||
self.displayVerificationWarning = true;
|
||||
self.displayNoMatchWarning = false;
|
||||
}
|
||||
}
|
||||
})
|
||||
.catch(() => {
|
||||
// Failed to fetch script
|
||||
console.log("Unable to load Google Places API script");
|
||||
});
|
||||
},
|
||||
components: {
|
||||
textboxQuestion,
|
||||
dropdownQuestion,
|
||||
alert,
|
||||
}
|
||||
self.displayVerificationWarning = false;
|
||||
self.displayNoMatchWarning = false;
|
||||
}
|
||||
else {
|
||||
self.displayVerificationWarning = true;
|
||||
self.displayNoMatchWarning = false;
|
||||
}
|
||||
}
|
||||
})
|
||||
.catch(() => {
|
||||
// Failed to fetch script
|
||||
console.log("Unable to load Google Places API script");
|
||||
});
|
||||
},
|
||||
components: {
|
||||
textboxQuestion,
|
||||
dropdownQuestion,
|
||||
alert,
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
|
@ -1,59 +1,85 @@
|
|||
<template>
|
||||
<addressQuestions ref="addressQuestions"/>
|
||||
<div class="row my-4">
|
||||
<div class="col">
|
||||
<textboxQuestion v-model="firstName" ref="firstName" inputId="08497a2efd9a4a73a70360ab47b4838d" disableAutoFill />
|
||||
</div>
|
||||
</div>
|
||||
<div class="row my-4">
|
||||
<div class="col">
|
||||
<textboxQuestion v-model="lastName" ref="lastName" inputId="0030e56a57e74a4ab92de7fb8e97fec5" disableAutoFill />
|
||||
</div>
|
||||
</div>
|
||||
<div class="row my-4">
|
||||
<div class="col">
|
||||
<textboxQuestion v-model="emailAddress" ref="emailAddress" inputId="00450a91b8964a768ce3992e6feb890f" disableAutoFill />
|
||||
</div>
|
||||
</div>
|
||||
<addressQuestions ref="addressQuestions" v-model="customerModel.addressQuestions" />
|
||||
<div class="row my-4">
|
||||
<div class="col">
|
||||
<textboxQuestion v-model="customerModel.firstName" ref="firstName" inputId="08497a2efd9a4a73a70360ab47b4838d" disableAutoFill />
|
||||
</div>
|
||||
</div>
|
||||
<div class="row my-4">
|
||||
<div class="col">
|
||||
<textboxQuestion v-model="customerModel.lastName" ref="lastName" inputId="0030e56a57e74a4ab92de7fb8e97fec5" disableAutoFill />
|
||||
</div>
|
||||
</div>
|
||||
<div class="row my-4">
|
||||
<div class="col">
|
||||
<textboxQuestion v-model="customerModel.emailAddress" ref="emailAddress" inputId="00450a91b8964a768ce3992e6feb890f" disableAutoFill />
|
||||
</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 { computed } from 'vue';
|
||||
//import store from "@/store";
|
||||
|
||||
export default ({
|
||||
name: "customer-questions",
|
||||
data(){
|
||||
return {
|
||||
firstName: "",
|
||||
lastName: "",
|
||||
emailAddress: "",
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
initializeComponent(cmsContent){
|
||||
// pass alert texts to addressQuestions component
|
||||
this.$refs.addressQuestions.initializeComponent(cmsContent);
|
||||
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: "",
|
||||
}
|
||||
}),
|
||||
}
|
||||
},
|
||||
data(){
|
||||
return {
|
||||
|
||||
this.$refs.firstName.initializeComponent(cmsContent[6].QuestionText);
|
||||
this.$refs.lastName.initializeComponent(cmsContent[7].QuestionText);
|
||||
this.$refs.emailAddress.initializeComponent(cmsContent[8].QuestionText);
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
value: {
|
||||
get: function() {
|
||||
return this.modelValue;
|
||||
},
|
||||
set: function(newValue) {
|
||||
this.$emit("update:modelValue", newValue);
|
||||
}
|
||||
},
|
||||
},
|
||||
components: {
|
||||
addressQuestions,
|
||||
textboxQuestion,
|
||||
}
|
||||
}
|
||||
},
|
||||
setup(props, { emit }) {
|
||||
const customerModel = computed({ // Use computed to wrap the object
|
||||
get: () => props.modelValue,
|
||||
set: (value) => emit('update:modelValue', value),
|
||||
});
|
||||
|
||||
return { customerModel };
|
||||
},
|
||||
methods: {
|
||||
initializeComponent(cmsContent){
|
||||
// pass alert texts to addressQuestions component
|
||||
this.$refs.addressQuestions.initializeComponent(cmsContent);
|
||||
|
||||
this.$refs.firstName.initializeComponent(cmsContent[6].QuestionText);
|
||||
this.$refs.lastName.initializeComponent(cmsContent[7].QuestionText);
|
||||
this.$refs.emailAddress.initializeComponent(cmsContent[8].QuestionText);
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
value: {
|
||||
get: function() {
|
||||
return this.modelValue;
|
||||
},
|
||||
set: function(newValue) {
|
||||
this.$emit("update:modelValue", newValue);
|
||||
}
|
||||
},
|
||||
},
|
||||
components: {
|
||||
addressQuestions,
|
||||
textboxQuestion,
|
||||
}
|
||||
})
|
||||
</script>
|
||||
Loading…
Reference in a new issue