jason/DigitalConsumer.FixMyGlass
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Changes for consistency

Browse source
This commit is contained in:
Leah Schumann 2023-02-09 11:55:00 -05:00
parent c274e16aac
commit a5509b88f5
2 changed files with 47 additions and 60 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

17
src/layouts/service-location/mobile-location-modal-questions/mobile-location-modal-questions.vue
View file

@ -13,19 +13,16 @@
:text="this.mobileLocationLinkText"
href="#!"
@click-event="openModal"
:data-bs-target="getModalId"
aria-label="Modal window" />
</div>
<textBlock cmsWidgetName="MobileFeeDisclaimerWidget" typeStyle="caption" />
</div>
<modal
ref="mobileLocationModal"
:ref="modalName"
:headerText="modalHeaderText"
:modalId="this.modalWidgetName"
:onModalOpenedCallback="onModalOpened"
:footerButtonText="modalFooterText"
@footer-button-event="setMobileLocation"
:modalForm="modalForm">
@footer-button-event="setMobileLocation">
<addressQuestions
ref="addressQuestions"
v-model="mobileLocationQuestionModel.addressQuestions"
@ -97,15 +94,15 @@ export default {
mobileLocationLinkText() {
return this.getCmsContent(this.linkWidgetName, "BodyText");
},
getModalId() {
return "#" + this.modalWidgetName;
},
modalHeaderText() {
return this.getCmsContent(this.modalWidgetName, "HeaderText");
},
modalFooterText() {
return this.getCmsContent(this.modalWidgetName, "FooterText");
},
modalName() {
return this.modalWidgetName;
},
mobileLocationQuestionModel: {
get: function () {
return this.modelValue;
@ -117,10 +114,10 @@ export default {
},
methods: {
openModal() {
this.$refs.mobileLocationModal.openModal();
this.$refs[this.modalName].openModal();
},
closeModal() {
this.$refs.mobileLocationModal.closeModal();
this.$refs[this.modalName].closeModal();
},
async setMobileLocation() {
this.closeModal();

90
src/layouts/service-location/service-zip-modal-question/service-zip-modal-question.vue
View file

@ -2,9 +2,9 @@
<div class="text-center">
<div class="update-zip-text-link">
<textLink
id="serviceLocationLinkPromptId"
id="serviceZipLinkPromptId"
linkType="text"
:text="serviceZipDisplayText"
:text="serviceZipLinkText"
href="#!"
@click-event="openModal"
aria-label="Modal window" />
@ -12,21 +12,19 @@
</div>
<modal
:ref="modalName"
:headerText="modalHeaderText"
:onModalOpenedCallback="onModalOpened"
:footerButtonText="modalFooterText"
:headerText="textboxQuestionPrompt"
@footer-button-event="setZipCode"
:modalForm="modalForm">
@footer-button-event="setZipCode">
<textboxQuestion
ref="zipInputTextQuestion"
:cmsWidgetName="textboxQuestionWidgetName"
v-model="serviceZipCodeInput"
inputId="zipInputTextQuestionTextbox"
v-model="serviceZipModel.serviceZipCode"
inputId="serviceZipCode"
questionAlignment="center"
mask="#####"
:displayQuestionText="false"
isRequired
disableAutoFill
validationRules="zip-required|zip-format" />
<alert
ref="alertInvalidZip"
@ -85,11 +83,33 @@ export default {
modalForm,
};
},
methods: {
mobileLocationLinkPromptText() {
return this.getCmsContent(this.linkWidgetName, "HeaderText");
computed: {
serviceZipLinkText() {
const defaultText = this.getCmsContent(this.linkWidgetName, "BodyText");
if (this.modelValue.serviceZipCode.length > 0) {
return this.modelValue.serviceState + ", " + this.modelValue.serviceZipCode;
}
return this.serviceZipLinkPromptText || defaultText;
},
modalHeaderText() {
return this.getCmsContent(this.textboxQuestionWidgetName, "QuestionText");
},
modalFooterText() {
return this.getCmsContent(this.modalWidgetName, "FooterText");
},
modalName() {
return this.modalWidgetName;
},
serviceZipModel: {
get: function () {
return this.modelValue;
},
set: function (newValue) {
this.$emit("update:modelValue", newValue);
},
},
},
methods: {
resetAlerts() {
this.displayInvalidZipAlert = false;
},
@ -100,10 +120,8 @@ export default {
},
focusOnZipInput() {
this.$nextTick(() => {
const input = this.$refs.zipInputTextQuestion.$refs.zipInputTextQuestionTextbox;
input.focus();
});
const input = document.getElementById("serviceZipCode");
input.focus();
},
openModal() {
@ -115,7 +133,6 @@ export default {
},
onModalOpened() {
this.serviceZipCodeInput = this.serviceZipModel.serviceZipCode;
this.resetsOnZipInput();
this.focusOnZipInput();
},
@ -123,7 +140,7 @@ export default {
async setZipCode() {
this.resetAlerts();
const zipCodeData = await this.getZipCodeData(this.serviceZipCodeInput);
const zipCodeData = await this.getZipCodeData(this.serviceZipModel.serviceZipCode);
if (!zipCodeData.isValid) {
this.displayInvalidZipAlert = true;
@ -131,7 +148,7 @@ export default {
} else {
this.serviceZipModel = {
serviceState: zipCodeData.state,
serviceZipCode: this.serviceZipCodeInput,
serviceZipCode: this.serviceZipModel.serviceZipCode,
isServiceable: zipCodeData.isServiceable,
};
@ -139,38 +156,11 @@ export default {
}
},
},
computed: {
serviceZipLinkPromptText() {
return this.getCmsContent(this.linkWidgetName, "BodyText");
},
modalFooterText() {
return this.getCmsContent(this.modalWidgetName, "FooterText");
},
textboxQuestionPrompt() {
return this.getCmsContent(this.textboxQuestionWidgetName, "QuestionText");
},
modalName() {
return this.modalWidgetName;
},
serviceZipDisplayText() {
if (this.modelValue.serviceZipCode.length > 0) {
return this.modelValue.serviceState + ", " + this.modelValue.serviceZipCode;
}
return this.serviceZipLinkPromptText || "Enter your service ZIP";
},
serviceZipModel: {
get: function () {
return this.modelValue;
},
set: function (newValue) {
this.$emit("update:modelValue", newValue);
},
},
},
watch: {
serviceZipCodeInput() {
this.resetsOnZipInput();
serviceZipModel: {
handler() {
this.displayInvalidZipAlert = false;
},
},
},
components: {