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