Additional consistency changes between the two modals
This commit is contained in:
parent
5100e5ec5b
commit
7db466fc60
3 changed files with 59 additions and 12 deletions
|
|
@ -409,11 +409,6 @@ export default {
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
"addressModel.streetAddress": {
|
|
||||||
handler(newValue, oldValue) {
|
|
||||||
console.log(`I got changed from ${oldValue} to ${newValue}`);
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
},
|
||||||
components: {
|
components: {
|
||||||
textboxQuestion,
|
textboxQuestion,
|
||||||
|
|
|
||||||
|
|
@ -5,6 +5,7 @@ fmg
|
||||||
<funnelHeader cmsWidgetName="FunnelHeaderWidget" />
|
<funnelHeader cmsWidgetName="FunnelHeaderWidget" />
|
||||||
<funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" />
|
<funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" />
|
||||||
<serviceZipModalQuestion
|
<serviceZipModalQuestion
|
||||||
|
v-model="serviceZipQuestion"
|
||||||
cmsWidgetName="ServiceZipModalWidget"
|
cmsWidgetName="ServiceZipModalWidget"
|
||||||
textboxQuestionWidgetName="ServiceZipQuestionWidget"
|
textboxQuestionWidgetName="ServiceZipQuestionWidget"
|
||||||
alertNonServiceableZipWidgetName="AlertNonServiceableZipWidget"
|
alertNonServiceableZipWidgetName="AlertNonServiceableZipWidget"
|
||||||
|
|
@ -41,6 +42,10 @@ export default {
|
||||||
name: "service-location",
|
name: "service-location",
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
|
serviceZipQuestion: {
|
||||||
|
serviceState: "",
|
||||||
|
serviceZipCode: "",
|
||||||
|
},
|
||||||
mobileLocationQuestions: {
|
mobileLocationQuestions: {
|
||||||
addressQuestions: {
|
addressQuestions: {
|
||||||
streetAddress: "",
|
streetAddress: "",
|
||||||
|
|
|
||||||
|
|
@ -1,16 +1,16 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="text-center">
|
<div class="text-center">
|
||||||
<label
|
<label
|
||||||
:for="displayModalLink"
|
:for="serviceLocationLinkPromptId"
|
||||||
:aria-label="questionText"
|
:aria-label="serviceLocationLinkPromptText"
|
||||||
class="form-label fw-bold w-100 ps-4 pe-4 pt-4"
|
class="form-label fw-bold w-100 ps-4 pe-4 pt-4"
|
||||||
:class="[questionAlignment === 'center' ? 'text-center w-100 mb-5' : '']"
|
:class="[questionAlignment === 'center' ? 'text-center w-100 mb-5' : '']"
|
||||||
v-html="questionText"></label>
|
v-html="serviceLocationLinkPromptText"></label>
|
||||||
<div class="update-zip-text-link">
|
<div class="update-zip-text-link">
|
||||||
<textLink
|
<textLink
|
||||||
id="displayModalLink"
|
id="serviceLocationLinkPromptId"
|
||||||
linkType="text"
|
linkType="text"
|
||||||
:text="this.serviceZipDisplayText"
|
:text="this.serviceZipLinkText"
|
||||||
href="#!"
|
href="#!"
|
||||||
@click-event="openZipCodeModal"
|
@click-event="openZipCodeModal"
|
||||||
aria-label="Modal window" />
|
aria-label="Modal window" />
|
||||||
|
|
@ -27,8 +27,8 @@
|
||||||
<textboxQuestion
|
<textboxQuestion
|
||||||
ref="zipInputTextQuestion"
|
ref="zipInputTextQuestion"
|
||||||
:cmsWidgetName="this.textboxQuestionWidgetName"
|
:cmsWidgetName="this.textboxQuestionWidgetName"
|
||||||
v-model="serviceZipCodeInput"
|
v-model="serviceZipCode"
|
||||||
inputId="serviceZipCodeInput"
|
inputId="serviceZipCode"
|
||||||
questionAlignment="center"
|
questionAlignment="center"
|
||||||
mask="#####"
|
mask="#####"
|
||||||
:displayQuestionText="false"
|
:displayQuestionText="false"
|
||||||
|
|
@ -81,6 +81,15 @@ export default {
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
props: {
|
props: {
|
||||||
|
modelValue: {
|
||||||
|
type: Object,
|
||||||
|
default: () => ({
|
||||||
|
serviceZipQuestion: {
|
||||||
|
serviceState: "",
|
||||||
|
serviceZipCode: "",
|
||||||
|
},
|
||||||
|
}),
|
||||||
|
},
|
||||||
cmsWidgetName: String,
|
cmsWidgetName: String,
|
||||||
textboxQuestionWidgetName: String,
|
textboxQuestionWidgetName: String,
|
||||||
alertNonServiceableZipWidgetName: String,
|
alertNonServiceableZipWidgetName: String,
|
||||||
|
|
@ -94,6 +103,10 @@ export default {
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
|
mobileLocationLinkPromptText() {
|
||||||
|
return this.getCmsContent(this.cmsWidgetName, "HeaderText");
|
||||||
|
},
|
||||||
|
|
||||||
openZipCodeModal() {
|
openZipCodeModal() {
|
||||||
this.$refs[this.modalName].openModal();
|
this.$refs[this.modalName].openModal();
|
||||||
},
|
},
|
||||||
|
|
@ -150,6 +163,25 @@ export default {
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
|
serviceZipLinkPromptText() {
|
||||||
|
return this.getCmsContent(this.cmsWidgetName, "HeaderText");
|
||||||
|
},
|
||||||
|
serviceZipLinkText() {
|
||||||
|
return this.getCmsContent(this.cmsWidgetName, "BodyText");
|
||||||
|
},
|
||||||
|
modalHeaderText() {
|
||||||
|
return this.getCmsContent(this.textboxQuestionWidgetName, "QuestionText");
|
||||||
|
},
|
||||||
|
modalFooterText() {
|
||||||
|
return this.getCmsContent(this.modalWidgetName, "FooterText");
|
||||||
|
},
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
textboxQuestionPrompt() {
|
textboxQuestionPrompt() {
|
||||||
return this.getCmsContent(this.textboxQuestionWidgetName, "QuestionText");
|
return this.getCmsContent(this.textboxQuestionWidgetName, "QuestionText");
|
||||||
},
|
},
|
||||||
|
|
@ -178,6 +210,21 @@ export default {
|
||||||
).replaceAll("{custom:serviceZipCodeInput}", zipCode);
|
).replaceAll("{custom:serviceZipCodeInput}", zipCode);
|
||||||
return text;
|
return text;
|
||||||
},
|
},
|
||||||
|
serviceZipModel: {
|
||||||
|
get: function () {
|
||||||
|
return this.modelValue;
|
||||||
|
},
|
||||||
|
set: function (newValue) {
|
||||||
|
this.$emit("update:modelValue", newValue);
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
watch: {
|
||||||
|
serviceZipModel: {
|
||||||
|
handler() {
|
||||||
|
this.displayNonServiceableZipAlert = false;
|
||||||
|
},
|
||||||
|
},
|
||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
this.$watch(
|
this.$watch(
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue