CSR-1012 | service zip cms refactor
This commit is contained in:
Matt Caimi
parent
48f71c5a7d
commit
2118117c12
2 changed files with 32 additions and 25 deletions
|
|
@ -4,7 +4,12 @@ fmg
|
|||
<div class="page-container-grouped-styles">
|
||||
<funnelHeader cmsWidgetName="FunnelHeaderWidget" />
|
||||
<funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" />
|
||||
<serviceZipModalQuestion />
|
||||
<serviceZipModalQuestion
|
||||
cmsWidgetName="ServiceZipModalWidget"
|
||||
modalWidgetName="ZipModalWidget"
|
||||
textboxQuestionWidgetName="ServiceZipQuestionWidget"
|
||||
alertNonServiceableZipWidgetName="AlertNonServiceableZipWidget"
|
||||
alertInvalidZipWidgetName="AlertInvalidZipWidget" />
|
||||
<funnel-footer
|
||||
cmsWidgetName="FunnelFooterWidget"
|
||||
:isForwardActionDisabled="!meta.valid"
|
||||
|
|
|
|||
|
|
@ -12,14 +12,14 @@
|
|||
:text="this.serviceZipDisplayText"
|
||||
href="#!"
|
||||
data-bs-toggle="modal"
|
||||
data-bs-target="#ZipModal"
|
||||
:data-bs-target="getModalId"
|
||||
aria-label="Modal window" />
|
||||
</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">
|
||||
<textboxQuestion
|
||||
cmsWidgetName="ServiceZipQuestionWidget"
|
||||
:cmsWidgetName="this.textboxQuestionWidgetName"
|
||||
v-model="serviceZipCodeInput"
|
||||
inputId="serviceZipCodeInput"
|
||||
questionAlignment="center"
|
||||
|
|
@ -31,15 +31,15 @@
|
|||
ref="alertInvalidZip"
|
||||
v-if="displayInvalidZipAlert"
|
||||
class="my-4"
|
||||
cmsWidgetName="AlertInvalidZipWidget"
|
||||
:cmsWidgetName="this.alertInvalidZipWidgetName"
|
||||
alertClass="alert-danger"
|
||||
v-bind:isDismissible="false" />
|
||||
<alert
|
||||
ref="alertNonServiceableZip"
|
||||
v-if="displayNonServiceableZipAlert"
|
||||
class="my-4"
|
||||
cmsWidgetName="AlertNonServiceableZipWidget"
|
||||
:manualHeadline="AlertNonServiceableZipHeader"
|
||||
:cmsWidgetName="this.alertNonServiceableZipWidgetName"
|
||||
:manualHeadline="this.invalidAlertHeader"
|
||||
alertClass="alert-danger"
|
||||
v-bind:isDismissible="false" />
|
||||
</div>
|
||||
|
|
@ -48,17 +48,15 @@
|
|||
|
||||
<script>
|
||||
// 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 alert from "@/fmg-components/ux-components/alert/alert";
|
||||
import alert from "@/ux-components/alert/alert";
|
||||
import textboxQuestion from "@/digital-components/textbox-question/textbox-question";
|
||||
|
||||
//Supporting Files
|
||||
import { defineRule } from "vee-validate";
|
||||
import { required, regex } from "@/helpers/validation-rules";
|
||||
import { errorMessages } from "@/constants/error-messages";
|
||||
import store from "@/store";
|
||||
import baseMixin from "@/mixins/base-mixin";
|
||||
|
||||
// Define Validation Rules
|
||||
defineRule("zip-required", required(errorMessages.SERVICE_ZIP_REQUIRED));
|
||||
|
|
@ -73,18 +71,23 @@ export default {
|
|||
serviceZipCodeInput: this.getZipFromStore(),
|
||||
displayInvalidZipAlert: false,
|
||||
displayNonServiceableZipAlert: false,
|
||||
invalidAlertHeader: null,
|
||||
};
|
||||
},
|
||||
props: {
|
||||
cmsWidgetName: String,
|
||||
modalWidgetName: String,
|
||||
textboxQuestionWidgetName: String,
|
||||
alertNonServiceableZipWidgetName: String,
|
||||
alertInvalidZipWidgetName: String,
|
||||
},
|
||||
methods: {
|
||||
getZipFromStore() {
|
||||
return store.getters.order.serviceLocation.zipCode;
|
||||
return this.$store.getters.order.serviceLocation.zipCode;
|
||||
},
|
||||
|
||||
getZipStateFromStore() {
|
||||
return store.getters.order.serviceLocation.state;
|
||||
return this.$store.getters.order.serviceLocation.state;
|
||||
},
|
||||
|
||||
resetAlerts() {
|
||||
|
|
@ -96,16 +99,20 @@ export default {
|
|||
this.resetAlerts();
|
||||
|
||||
const zipLength = 5;
|
||||
if (this.serviceZipCodeInput.length < zipLength) {
|
||||
if (!this.serviceZipCodeInput || this.serviceZipCodeInput.length < zipLength) {
|
||||
// prevent reading 1111 as 01111
|
||||
return;
|
||||
}
|
||||
|
||||
const zipCodeData = await baseMixin.methods.getZipCodeData(this.serviceZipCodeInput);
|
||||
const zipCodeData = await this.getZipCodeData(this.serviceZipCodeInput);
|
||||
|
||||
if (!zipCodeData.isValid) {
|
||||
this.displayInvalidZipAlert = true;
|
||||
} else if (!zipCodeData.isServiceable) {
|
||||
this.invalidAlertHeader = this.getCmsContent(
|
||||
this.alertNonServiceableZipWidgetName,
|
||||
"HeadlineText"
|
||||
).replaceAll("{custom:serviceZipCodeInput}", this.serviceZipCodeInput);
|
||||
this.displayNonServiceableZipAlert = true;
|
||||
} else {
|
||||
this.serviceZip = this.serviceZipCodeInput;
|
||||
|
|
@ -116,22 +123,17 @@ export default {
|
|||
},
|
||||
},
|
||||
computed: {
|
||||
getModalId() {
|
||||
return "#" + this.modalWidgetName;
|
||||
},
|
||||
questionText() {
|
||||
return this.getCmsContent("LocationQuestionWidget", "QuestionText");
|
||||
return this.getCmsContent(this.cmsWidgetName, "HeaderText");
|
||||
},
|
||||
serviceZipDisplayText() {
|
||||
if (this.serviceZip && this.serviceZip != 0) {
|
||||
return this.serviceZipState + ", " + this.serviceZip;
|
||||
}
|
||||
return this.getCmsContent("ZipPlaceholderText", "QuestionText");
|
||||
},
|
||||
AlertNonServiceableZipHeader() {
|
||||
const zipCode = this.serviceZipCodeInput;
|
||||
const text = this.getCmsContent(
|
||||
"AlertNonServiceableZipWidget",
|
||||
"HeadlineText"
|
||||
).replaceAll("{custom:serviceZipCodeInput}", zipCode);
|
||||
return text;
|
||||
return this.getCmsContent(this.cmsWidgetName, "FooterText");
|
||||
},
|
||||
},
|
||||
components: {
|
||||
|
|
|
|||
Loading…
Reference in a new issue