4452f718d0
CASH-256 prettier config change and prevent email and phone getting cleared when navigating back from payment to service-zip.
224 lines
8.4 KiB
Vue
224 lines
8.4 KiB
Vue
<template>
|
|
<div class="text-center">
|
|
<div class="update-zip-text-link">
|
|
<textLink
|
|
id="serviceZipLinkPromptId"
|
|
linkType="text"
|
|
:text="serviceZipLinkText"
|
|
href="#!"
|
|
@click-event="openModal">
|
|
<template v-slot:after-text v-if="editScreenReaderTextCmsWidgetName">
|
|
<span class="sr-only">{{ screenReaderOnlyText }}</span>
|
|
</template>
|
|
</textLink>
|
|
</div>
|
|
</div>
|
|
<modal
|
|
:ref="modalName"
|
|
:headerText="modalHeaderText"
|
|
:onModalOpenedCallback="onModalOpened"
|
|
:onModalClosedCallback="onModalClosed"
|
|
:footerButtonText="modalFooterText"
|
|
@footer-button-event="setZipCode">
|
|
<serviceZipQuestion
|
|
ref="serviceZipQuestion"
|
|
customInputId="serviceZipCode"
|
|
v-model="internalModel.zipCode"
|
|
v-on="{ 'textboxQuestionEvent.inputIdAssigned': onInputIdAssigned }"
|
|
cmsWidgetName="ServiceZipQuestionWidget" />
|
|
<alert
|
|
ref="alertInvalidZip"
|
|
v-if="displayInvalidZipAlert"
|
|
class="my-4"
|
|
cmsWidgetName="AlertInvalidZipWidget"
|
|
alertClass="alert-danger"
|
|
v-bind:isDismissible="false" />
|
|
</modal>
|
|
</template>
|
|
|
|
<script>
|
|
// Components
|
|
import textLink from "@/ux-components/text-link/text-link";
|
|
import serviceZipQuestion from "@/layouts/service-location/service-zip-modal-question/service-zip-question/service-zip-question";
|
|
import modal from "@/digital-components/modal/modal";
|
|
import alert from "@/ux-components/alert/alert";
|
|
|
|
import {
|
|
getPricedMobileFeePart,
|
|
getServiceabilityDetails,
|
|
getBillToAccountNumber,
|
|
} from "@/layouts/service-location/helpers/service-location-helper/service-location-helper";
|
|
|
|
export default {
|
|
name: "service-zip-modal-question",
|
|
emits: [
|
|
"update:modelValue",
|
|
"updated-mobile-fee-part",
|
|
"updated-contains-military-base",
|
|
"updated-bill-to-account-number",
|
|
],
|
|
data() {
|
|
return {
|
|
internalModel: this.copyModel(this.modelValue),
|
|
serviceZipCodeTextInputId: "",
|
|
displayInvalidZipAlert: false,
|
|
};
|
|
},
|
|
props: {
|
|
modelValue: {
|
|
type: Object,
|
|
default: () => ({
|
|
state: "",
|
|
zipCode: "",
|
|
}),
|
|
},
|
|
mobileFeePart: {
|
|
type: Object,
|
|
default: () => ({}),
|
|
},
|
|
linkWidgetName: String,
|
|
modalWidgetName: String,
|
|
editScreenReaderTextCmsWidgetName: String,
|
|
},
|
|
computed: {
|
|
screenReaderOnlyText() {
|
|
return this.getCmsContent(this.editScreenReaderTextCmsWidgetName, "Text");
|
|
},
|
|
serviceZipLinkText() {
|
|
if (this.modelValue.zipCode && this.modelValue.zipCode.length > 0) {
|
|
return this.modelValue.state + ", " + this.modelValue.zipCode;
|
|
}
|
|
return this.getCmsContent(this.linkWidgetName, "BodyText");
|
|
},
|
|
modalHeaderText() {
|
|
return this.getCmsContent("ServiceZipQuestionWidget", "QuestionText");
|
|
},
|
|
modalFooterText() {
|
|
return this.getCmsContent(this.modalWidgetName, "FooterText");
|
|
},
|
|
modalName() {
|
|
return this.modalWidgetName;
|
|
},
|
|
modal() {
|
|
return this.$refs[this.modalName];
|
|
},
|
|
},
|
|
methods: {
|
|
resetAlerts() {
|
|
this.displayInvalidZipAlert = false;
|
|
},
|
|
resetsOnZipInput() {
|
|
this.resetAlerts();
|
|
},
|
|
focusOnZipInput() {
|
|
const input = document.getElementById(this.serviceZipCodeTextInputId);
|
|
input?.focus();
|
|
},
|
|
copyModel(modelToCopy) {
|
|
return {
|
|
state: modelToCopy.state,
|
|
zipCode: modelToCopy.zipCode,
|
|
};
|
|
},
|
|
openModal() {
|
|
this.modal.openModal();
|
|
},
|
|
closeModal() {
|
|
this.modal.closeModal();
|
|
},
|
|
resetModalButtonStyle() {
|
|
this.modal.resetButtonStyle();
|
|
},
|
|
onInputIdAssigned(inputId) {
|
|
this.serviceZipCodeTextInputId = inputId;
|
|
},
|
|
onModalOpened() {
|
|
this.internalModel.zipCode = this.modelValue.zipCode;
|
|
this.focusOnZipInput();
|
|
},
|
|
onModalClosed() {
|
|
this.internalModel.zipCode = this.modelValue.zipCode;
|
|
this.resetsOnZipInput();
|
|
},
|
|
async setZipCode() {
|
|
if (this.internalModel.zipCode !== this.modelValue.zipCode) {
|
|
this.resetAlerts();
|
|
|
|
const zipCodeData = await this.getZipCodeData(
|
|
this.internalModel.zipCode,
|
|
"service-location"
|
|
);
|
|
|
|
if (!zipCodeData.isValid) {
|
|
this.displayInvalidZipAlert = true;
|
|
this.focusOnZipInput();
|
|
this.resetModalButtonStyle();
|
|
} else {
|
|
this.internalModel.state = zipCodeData.state;
|
|
this.internalModel.zipCodeCtu = zipCodeData.zipCodeCtu;
|
|
|
|
// retrieve mobile fee part
|
|
const serviceZipCode = this.internalModel.zipCode;
|
|
const mobileFeePart = await getPricedMobileFeePart(
|
|
serviceZipCode,
|
|
"service-location"
|
|
);
|
|
|
|
// retrieve serviceability details
|
|
const serviceabilityDetails = await getServiceabilityDetails(
|
|
serviceZipCode,
|
|
null,
|
|
"service-location"
|
|
);
|
|
|
|
const billToAccountNumber = await getBillToAccountNumber(
|
|
this.internalModel.zipCodeCtu
|
|
);
|
|
|
|
// update content related to service zip code
|
|
this.$emit("updated-mobile-fee-part", mobileFeePart);
|
|
this.$emit("updated-serviceability", serviceabilityDetails.data);
|
|
this.$emit("updated-contains-military-base", zipCodeData.containsMilitaryBase);
|
|
this.$emit("updated-bill-to-account-number", billToAccountNumber);
|
|
|
|
// update the page level model
|
|
this.$emit("update:modelValue", this.internalModel);
|
|
|
|
this.closeModal();
|
|
}
|
|
} else {
|
|
this.closeModal();
|
|
}
|
|
},
|
|
},
|
|
watch: {
|
|
modelValue(newValue) {
|
|
this.internalModel = this.copyModel(newValue);
|
|
},
|
|
"internalModel.zipCode": {
|
|
handler() {
|
|
this.resetsOnZipInput();
|
|
},
|
|
},
|
|
},
|
|
components: {
|
|
textLink,
|
|
serviceZipQuestion,
|
|
modal,
|
|
alert,
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.update-zip-text-link::before {
|
|
content: "";
|
|
display: inline-block;
|
|
width: 13px;
|
|
height: 16px;
|
|
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 13 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6.49635 1.00142e-07C5.64734 -0.000153295 4.80722 0.175918 4.0274 0.517444C3.24757 0.858969 2.54443 1.35877 1.96099 1.98626C0.765713 3.27588 0.0999756 4.98141 0.0999756 6.75394C0.0999756 8.52646 0.765713 10.232 1.96099 11.5216L5.98324 15.777C6.04954 15.8475 6.12918 15.9036 6.21736 15.9419C6.30555 15.9802 6.40045 16 6.49635 16C6.59225 16 6.68716 15.9802 6.77534 15.9419C6.86353 15.9036 6.94317 15.8475 7.00946 15.777L11.0317 11.52C12.2391 10.2383 12.909 8.52914 12.8999 6.75394C12.9094 4.97818 12.2394 3.26832 11.0317 1.98626C10.4481 1.35899 9.74493 0.859347 8.96514 0.517839C8.18535 0.176331 7.34532 0.000130509 6.49635 1.00142e-07V1.00142e-07ZM6.49635 9.13131C6.02507 9.13131 5.56437 8.98913 5.17251 8.72275C4.78065 8.45637 4.47524 8.07776 4.29488 7.63479C4.11453 7.19181 4.06734 6.70438 4.15928 6.23412C4.25123 5.76387 4.47817 5.33191 4.81142 4.99287C5.14467 4.65384 5.56925 4.42295 6.03148 4.32941C6.49371 4.23587 6.97282 4.28388 7.40823 4.46736C7.84364 4.65085 8.21579 4.96157 8.47762 5.36023C8.73945 5.7589 8.87921 6.2276 8.87921 6.70707C8.87921 7.34974 8.62837 7.96611 8.18185 8.4207C7.73532 8.87528 7.12964 9.13088 6.49794 9.13131H6.49635Z' fill='%231574A1'/%3E%3C/svg%3E%0A");
|
|
background-size: contain;
|
|
vertical-align: middle;
|
|
margin-right: 0.5em;
|
|
}
|
|
</style>
|