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

CSR-1012 | service zip cms refactor

Browse source
This commit is contained in:
Matt Caimi 2023-01-19 13:08:56 -05:00
parent 314fe42c18
commit 651a4fa0c3
2 changed files with 32 additions and 25 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
src/layouts/service-location/service-location.vue
View file

@ -4,7 +4,12 @@ fmg
<div class="page-container-grouped-styles"> <div class="page-container-grouped-styles">
<funnelHeader cmsWidgetName="FunnelHeaderWidget" /> <funnelHeader cmsWidgetName="FunnelHeaderWidget" />
<funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" /> <funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" />
<serviceZipModalQuestion /> <serviceZipModalQuestion
cmsWidgetName="ServiceZipModalWidget"
modalWidgetName="ZipModalWidget"
textboxQuestionWidgetName="ServiceZipQuestionWidget"
alertNonServiceableZipWidgetName="AlertNonServiceableZipWidget"
alertInvalidZipWidgetName="AlertInvalidZipWidget" />
<funnel-footer <funnel-footer
cmsWidgetName="FunnelFooterWidget" cmsWidgetName="FunnelFooterWidget"
:isForwardActionDisabled="!meta.valid" :isForwardActionDisabled="!meta.valid"

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

@ -12,14 +12,14 @@
:text="this.serviceZipDisplayText" :text="this.serviceZipDisplayText"
href="#!" href="#!"
data-bs-toggle="modal" data-bs-toggle="modal"
data-bs-target="#ZipModal" :data-bs-target="getModalId"
aria-label="Modal window" /> aria-label="Modal window" />
</div> </div>
</div> </div>
<modal ref="zipCodeInputModal" cmsWidgetName="ZipModal" :buttonClick="setZip"> <modal ref="zipCodeInputModal" :cmsWidgetName="this.modalWidgetName" :buttonClick="setZip">
<div class="ps-4 pe-4 pb-4"> <div class="ps-4 pe-4 pb-4">
<textboxQuestion <textboxQuestion
cmsWidgetName="ServiceZipQuestionWidget" :cmsWidgetName="this.textboxQuestionWidgetName"
v-model="serviceZipCodeInput" v-model="serviceZipCodeInput"
inputId="serviceZipCodeInput" inputId="serviceZipCodeInput"
questionAlignment="center" questionAlignment="center"
@ -31,15 +31,15 @@
ref="alertInvalidZip" ref="alertInvalidZip"
v-if="displayInvalidZipAlert" v-if="displayInvalidZipAlert"
class="my-4" class="my-4"
cmsWidgetName="AlertInvalidZipWidget" :cmsWidgetName="this.alertInvalidZipWidgetName"
alertClass="alert-danger" alertClass="alert-danger"
v-bind:isDismissible="false" /> v-bind:isDismissible="false" />
<alert <alert
ref="alertNonServiceableZip" ref="alertNonServiceableZip"
v-if="displayNonServiceableZipAlert" v-if="displayNonServiceableZipAlert"
class="my-4" class="my-4"
cmsWidgetName="AlertNonServiceableZipWidget" :cmsWidgetName="this.alertNonServiceableZipWidgetName"
:manualHeadline="AlertNonServiceableZipHeader" :manualHeadline="this.invalidAlertHeader"
alertClass="alert-danger" alertClass="alert-danger"
v-bind:isDismissible="false" /> v-bind:isDismissible="false" />
</div> </div>
@ -48,17 +48,15 @@
<script> <script>
// Components // Components
import textLink from "@/fmg-components/ux-components/text-link/text-link"; import textLink from "@/ux-components/text-link/text-link";
import modal from "@/digital-components/modal/modal"; import modal from "@/digital-components/modal/modal";
import alert from "@/fmg-components/ux-components/alert/alert"; import alert from "@/ux-components/alert/alert";
import textboxQuestion from "@/digital-components/textbox-question/textbox-question"; import textboxQuestion from "@/digital-components/textbox-question/textbox-question";
//Supporting Files //Supporting Files
import { defineRule } from "vee-validate"; import { defineRule } from "vee-validate";
import { required, regex } from "@/helpers/validation-rules"; import { required, regex } from "@/helpers/validation-rules";
import { errorMessages } from "@/constants/error-messages"; import { errorMessages } from "@/constants/error-messages";
import store from "@/store";
import baseMixin from "@/mixins/base-mixin";
// Define Validation Rules // Define Validation Rules
defineRule("zip-required", required(errorMessages.SERVICE_ZIP_REQUIRED)); defineRule("zip-required", required(errorMessages.SERVICE_ZIP_REQUIRED));
@ -73,18 +71,23 @@ export default {
serviceZipCodeInput: this.getZipFromStore(), serviceZipCodeInput: this.getZipFromStore(),
displayInvalidZipAlert: false, displayInvalidZipAlert: false,
displayNonServiceableZipAlert: false, displayNonServiceableZipAlert: false,
invalidAlertHeader: null,
}; };
}, },
props: { props: {
cmsWidgetName: String, cmsWidgetName: String,
modalWidgetName: String,
textboxQuestionWidgetName: String,
alertNonServiceableZipWidgetName: String,
alertInvalidZipWidgetName: String,
}, },
methods: { methods: {
getZipFromStore() { getZipFromStore() {
return store.getters.order.serviceLocation.zipCode; return this.$store.getters.order.serviceLocation.zipCode;
}, },
getZipStateFromStore() { getZipStateFromStore() {
return store.getters.order.serviceLocation.state; return this.$store.getters.order.serviceLocation.state;
}, },
resetAlerts() { resetAlerts() {
@ -96,16 +99,20 @@ export default {
this.resetAlerts(); this.resetAlerts();
const zipLength = 5; const zipLength = 5;
if (this.serviceZipCodeInput.length < zipLength) { if (!this.serviceZipCodeInput || this.serviceZipCodeInput.length < zipLength) {
// prevent reading 1111 as 01111 // prevent reading 1111 as 01111
return; return;
} }
const zipCodeData = await baseMixin.methods.getZipCodeData(this.serviceZipCodeInput); const zipCodeData = await this.getZipCodeData(this.serviceZipCodeInput);
if (!zipCodeData.isValid) { if (!zipCodeData.isValid) {
this.displayInvalidZipAlert = true; this.displayInvalidZipAlert = true;
} else if (!zipCodeData.isServiceable) { } else if (!zipCodeData.isServiceable) {
this.invalidAlertHeader = this.getCmsContent(
this.alertNonServiceableZipWidgetName,
"HeadlineText"
).replaceAll("{custom:serviceZipCodeInput}", this.serviceZipCodeInput);
this.displayNonServiceableZipAlert = true; this.displayNonServiceableZipAlert = true;
} else { } else {
this.serviceZip = this.serviceZipCodeInput; this.serviceZip = this.serviceZipCodeInput;
@ -116,22 +123,17 @@ export default {
}, },
}, },
computed: { computed: {
getModalId() {
return "#" + this.modalWidgetName;
},
questionText() { questionText() {
return this.getCmsContent("LocationQuestionWidget", "QuestionText"); return this.getCmsContent(this.cmsWidgetName, "HeaderText");
}, },
serviceZipDisplayText() { serviceZipDisplayText() {
if (this.serviceZip && this.serviceZip != 0) { if (this.serviceZip && this.serviceZip != 0) {
return this.serviceZipState + ", " + this.serviceZip; return this.serviceZipState + ", " + this.serviceZip;
} }
return this.getCmsContent("ZipPlaceholderText", "QuestionText"); return this.getCmsContent(this.cmsWidgetName, "FooterText");
},
AlertNonServiceableZipHeader() {
const zipCode = this.serviceZipCodeInput;
const text = this.getCmsContent(
"AlertNonServiceableZipWidget",
"HeadlineText"
).replaceAll("{custom:serviceZipCodeInput}", zipCode);
return text;
}, },
}, },
components: { components: {