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

CSR-1012 | reorganized service-location page data

Browse source
This commit is contained in:
Matt Caimi 2023-02-10 13:50:17 -05:00
parent ce243fc296
commit 2be72ac348
3 changed files with 76 additions and 36 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
src/digital-components/modal/modal.vue
View file

@ -2,7 +2,7 @@
<!-- Modal -->
<div
class="modal fade modal-component"
v-on="{ 'hidden.bs.modal': resetButtonStyle, 'shown.bs.modal': onModalOpenedCallback }"
v-on="{ 'hidden.bs.modal': onModalClosed, 'shown.bs.modal': onModalOpened }"
:id="modalId"
tabindex="-1"
aria-labelledby="ModalComponentLabel"
@ -53,6 +53,9 @@ export default {
onModalOpenedCallback: {
type: Function,
},
onModalClosedCallback: {
type: Function,
},
},
setup() {
const modalId = `modal-${crypto.randomUUID()}`;
@ -78,6 +81,13 @@ export default {
resetButtonStyle() {
this.$refs.buttonMain.resetButtonStyle();
},
onModalOpened() {
this.onModalOpenedCallback?.();
},
onModalClosed() {
this.resetButtonStyle();
this.onModalClosedCallback?.();
},
openModal() {
const modal = Modal.getOrCreateInstance(document.getElementById(this.modalId));
modal.show();

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

@ -4,14 +4,13 @@
<funnelHeader cmsWidgetName="FunnelHeaderWidget" />
<funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" />
<serviceZipModalQuestion
v-model="serviceZipQuestion"
v-model="serviceZipQuestionModel"
linkWidgetName="ServiceZipLinkWidget"
modalWidgetName="ServiceZipModalWidget"
textboxQuestionWidgetName="ServiceZipQuestionWidget"
alertInvalidZipWidgetName="AlertInvalidZipWidget" />
<mobileLocationModalQuestions
v-model="mobileLocationQuestions"
:serviceZipCode="serviceZipQuestion.serviceZipCode"
v-model="mobileLocationQuestionsModel"
linkWidgetName="MobileLocationLinkWidget"
modalWidgetName="MobileLocationModalWidget"
mobileFeeDisclaimerWidgetName="MobileFeeDisclaimerWidget"
@ -42,25 +41,18 @@ export default {
name: "service-location",
data() {
return {
serviceZipQuestion: {
serviceState: "",
serviceZipCode: "",
isServiceable: null,
},
mobileLocationQuestions: {
addressQuestions: {
streetAddress: "",
apartmentNumberOrBusinessName: "",
city: "",
state: "",
zipCode: "",
},
isVehicleProtected: null,
isZipServiceableMobile: null,
isZipServiceableInShop: null,
},
isServiceable: null,
streetAddress: "",
apartmentNumberOrBusinessName: "",
city: "",
state: "",
zipCode: "",
isVehicleProtected: null,
isZipServiceableMobile: null,
isZipServiceableInShop: null,
};
},
async beforeRouteEnter(to, from, next) {
// Call APIs
const cmsContentPromise = fetchCmsContentForPage(to.query.fmgPage);
@ -80,6 +72,42 @@ export default {
vm.setCmsContent(resultMap.cmsContent);
});
},
computed: {
serviceZipQuestionModel: {
get: function () {
return {
state: this.state,
zipCode: this.zipCode,
isServiceable: this.isServiceable,
};
},
set: function (newValue) {
this.state = newValue.state;
this.zipCode = newValue.zipCode;
this.isServiceable = newValue.isServiceable;
},
},
mobileLocationQuestionsModel: {
get: function () {
return {
addressQuestions: {
streetAddress: this.streetAddress,
apartmentNumberOrBusinessName: this.apartmentNumberOrBusinessName,
city: this.city,
state: this.state,
zipCode: this.zipCode,
},
};
},
set: function (newValue) {
this.streetAddress = newValue.streetAddress;
this.apartmentNumberOrBusinessName = newValue.apartmentNumberOrBusinessName;
this.city = newValue.city;
this.state = newValue.state;
this.zipCode = newValue.zipCode;
},
},
},
methods: {
arePagePrerequisitesValid() {
return true;

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

@ -14,12 +14,13 @@
:ref="modalName"
:headerText="modalHeaderText"
:onModalOpenedCallback="onModalOpened"
:onModalClosedCallback="onModalClosed"
:footerButtonText="modalFooterText"
@footer-button-event="setZipCode">
<serviceZipQuestion
ref="serviceZipQuestion"
:cmsWidgetName="textboxQuestionWidgetName"
v-model="serviceZipModel.serviceZipCode" />
v-model="serviceZipCodeInput" />
<alert
ref="alertInvalidZip"
v-if="displayInvalidZipAlert"
@ -59,8 +60,8 @@ export default {
type: Object,
default: () => ({
serviceZipQuestion: {
serviceState: "",
serviceZipCode: "1234",
state: "",
zipCode: "",
isServiceable: null,
},
}),
@ -79,11 +80,10 @@ export default {
},
computed: {
serviceZipLinkText() {
const defaultText = this.getCmsContent(this.linkWidgetName, "BodyText");
if (this.modelValue.serviceZipCode.length > 0) {
return this.modelValue.serviceState + ", " + this.modelValue.serviceZipCode;
if (this.modelValue.zipCode.length > 0) {
return this.modelValue.state + ", " + this.modelValue.zipCode;
}
return this.serviceZipLinkPromptText || defaultText;
return this.getCmsContent(this.linkWidgetName, "BodyText");
},
modalHeaderText() {
return this.getCmsContent(this.textboxQuestionWidgetName, "QuestionText");
@ -127,22 +127,26 @@ export default {
},
onModalOpened() {
this.resetsOnZipInput();
this.focusOnZipInput();
},
onModalClosed() {
this.serviceZipCodeInput = this.serviceZipModel.zipCode;
this.resetsOnZipInput();
},
async setZipCode() {
this.resetAlerts();
const zipCodeData = await this.getZipCodeData(this.serviceZipModel.serviceZipCode);
const zipCodeData = await this.getZipCodeData(this.serviceZipCodeInput);
if (!zipCodeData.isValid) {
this.displayInvalidZipAlert = true;
this.focusOnZipInput();
} else {
this.serviceZipModel = {
serviceState: zipCodeData.state,
serviceZipCode: this.serviceZipModel.serviceZipCode,
state: zipCodeData.state,
zipCode: this.serviceZipCodeInput,
isServiceable: zipCodeData.isServiceable,
};
@ -151,10 +155,8 @@ export default {
},
},
watch: {
serviceZipModel: {
handler() {
this.displayInvalidZipAlert = false;
},
serviceZipCodeInput() {
this.resetsOnZipInput();
},
},
components: {