From 8c79581df013961cce80966420e28fc5ea0eae35 Mon Sep 17 00:00:00 2001 From: Matt Caimi Date: Thu, 12 Jan 2023 11:20:43 -0500 Subject: [PATCH 01/14] CSR-1012 | service zip modal question new component service-zip-modal-question added to the service-location page --- src/digital-components/modal/modal.vue | 28 +++- .../service-location/service-location.vue | 13 +- .../service-zip-modal-question.spec.js | 3 + .../service-zip-modal-question.vue | 157 ++++++++++++++++++ 4 files changed, 193 insertions(+), 8 deletions(-) create mode 100644 src/layouts/service-location/service-zip-modal-question/service-zip-modal-question.spec.js create mode 100644 src/layouts/service-location/service-zip-modal-question/service-zip-modal-question.vue diff --git a/src/digital-components/modal/modal.vue b/src/digital-components/modal/modal.vue index 7de269644..f8c5e01e5 100644 --- a/src/digital-components/modal/modal.vue +++ b/src/digital-components/modal/modal.vue @@ -11,12 +11,13 @@
-
+

@@ -26,6 +27,7 @@ v-if="ModalSubBodyText" v-html="ModalSubBodyText">

+
+ @click-event="buttonMainClick" />
@@ -48,6 +49,9 @@ export default { name: "modal", props: { cmsWidgetName: String, + buttonClick: { + type: Function, + }, }, computed: { ModalHeadline() { @@ -68,11 +72,29 @@ export default { ModalCloseButtonText() { return this.getCmsContent(this.cmsWidgetName, "FooterText"); }, + showModalBody() { + return ( + this.ModalImage || + this.ModalHeadline || + this.ModalSubheadertext || + this.ModalBodyText + ); + }, }, methods: { resetButtonStyle() { this.$refs.buttonMain.resetButtonStyle(); }, + closeModal() { + this.$refs.modalXButton.click(); + }, + buttonMainClick() { + if (this.buttonClick) { + this.buttonClick(); + } else { + this.closeModal(); + } + }, }, components: { buttonMain, diff --git a/src/layouts/service-location/service-location.vue b/src/layouts/service-location/service-location.vue index e29ebdb5e..aa32c1921 100644 --- a/src/layouts/service-location/service-location.vue +++ b/src/layouts/service-location/service-location.vue @@ -4,6 +4,7 @@ fmg
+ // Components -import funnelHeader from "@/fmg-components/funnel-header/funnel-header"; -import funnelFooter from "@/fmg-components/funnel-footer/funnel-footer"; -import funnelSubHeader from "@/fmg-components/funnel-sub-header/funnel-sub-header"; -import { Form } from "vee-validate"; +import serviceZipModalQuestion from "@/layouts/service-location/service-zip-modal-question/service-zip-modal-question"; +import funnelHeader from "@/common-components/funnel-header/funnel-header"; +import funnelFooter from "@/common-components/funnel-footer/funnel-footer"; +import funnelSubHeader from "@/common-components/funnel-sub-header/funnel-sub-header"; -// Supporting files +//Supporting Files +import { Form } from "vee-validate"; import { fetchCmsContentForPage } from "@/helpers/cms-content-helper"; import { settleAllPromises } from "@/helpers/layout-helper"; @@ -57,6 +59,7 @@ export default { forwardButtonAction() {}, }, components: { + serviceZipModalQuestion, funnelHeader, funnelFooter, funnelSubHeader, diff --git a/src/layouts/service-location/service-zip-modal-question/service-zip-modal-question.spec.js b/src/layouts/service-location/service-zip-modal-question/service-zip-modal-question.spec.js new file mode 100644 index 000000000..a81727c73 --- /dev/null +++ b/src/layouts/service-location/service-zip-modal-question/service-zip-modal-question.spec.js @@ -0,0 +1,3 @@ +describe("service-zip-modal-question.vue", () => { + test.todo("test this"); +}); diff --git a/src/layouts/service-location/service-zip-modal-question/service-zip-modal-question.vue b/src/layouts/service-location/service-zip-modal-question/service-zip-modal-question.vue new file mode 100644 index 000000000..0397609aa --- /dev/null +++ b/src/layouts/service-location/service-zip-modal-question/service-zip-modal-question.vue @@ -0,0 +1,157 @@ + + + + + From 4fd467af59f580cc8ab3b0bca8936bfe0bb4d400 Mon Sep 17 00:00:00 2001 From: Matt Caimi Date: Wed, 18 Jan 2023 12:27:33 -0500 Subject: [PATCH 02/14] CSR-1012 | file path updates --- src/layouts/service-location/service-location.vue | 6 +++--- .../service-zip-modal-question.vue | 8 ++++---- 2 files changed, 7 insertions(+), 7 deletions(-) diff --git a/src/layouts/service-location/service-location.vue b/src/layouts/service-location/service-location.vue index aa32c1921..4f8230456 100644 --- a/src/layouts/service-location/service-location.vue +++ b/src/layouts/service-location/service-location.vue @@ -17,9 +17,9 @@ fmg + + diff --git a/src/layouts/service-location/service-location.vue b/src/layouts/service-location/service-location.vue index 418a1ec2e..4d0a527c6 100644 --- a/src/layouts/service-location/service-location.vue +++ b/src/layouts/service-location/service-location.vue @@ -10,6 +10,10 @@ fmg textboxQuestionWidgetName="ServiceZipQuestionWidget" alertNonServiceableZipWidgetName="AlertNonServiceableZipWidget" alertInvalidZipWidgetName="AlertInvalidZipWidget" /> + // Components import serviceZipModalQuestion from "@/layouts/service-location/service-zip-modal-question/service-zip-modal-question"; +import mobileLocationModalQuestion from "@/layouts/service-location/mobile-location-modal-question/mobile-location-modal-question"; import funnelHeader from "@/fmg-components/funnel-header/funnel-header"; import funnelFooter from "@/fmg-components/funnel-footer/funnel-footer"; import funnelSubHeader from "@/fmg-components/funnel-sub-header/funnel-sub-header"; @@ -65,6 +70,7 @@ export default { }, components: { serviceZipModalQuestion, + mobileLocationModalQuestion, funnelHeader, funnelFooter, funnelSubHeader, diff --git a/src/layouts/service-location/service-zip-modal-question/service-zip-modal-question.vue b/src/layouts/service-location/service-zip-modal-question/service-zip-modal-question.vue index 78068a835..d05cca807 100644 --- a/src/layouts/service-location/service-zip-modal-question/service-zip-modal-question.vue +++ b/src/layouts/service-location/service-zip-modal-question/service-zip-modal-question.vue @@ -1,17 +1,18 @@ @@ -32,28 +37,49 @@ // Components import textLink from "@/ux-components/text-link/text-link"; import modal from "@/digital-components/modal/modal"; +import buttonQuestion from "@/digital-components/button-question/button-question"; import alert from "@/ux-components/alert/alert"; import textboxQuestion from "@/digital-components/textbox-question/textbox-question"; import addressQuestions from "@/layouts/address-lookup/customer-questions/address-questions/address-questions"; +import vehicleProtectedQuestion from "@/layouts/service-location/mobile-location-modal-questions/vehicle-protected-question/vehicle-protected-question"; +import textBlock from "@/digital-components/text-block/text-block"; -//Supporting Files +// Supporting Files import { defineRule } from "vee-validate"; import { required, regex } from "@/helpers/validation-rules"; import { errorMessages } from "@/constants/error-messages"; -import { isNoUnitNumericStyleProp } from "@vue/shared"; +import { storeActions } from "@/constants/store-actions.js"; +import baseMixin from "@/mixins/base-mixin.js"; +import TextBlock from '../../../digital-components/text-block/text-block.vue'; // Define Validation Rules defineRule("zip-required", required(errorMessages.SERVICE_ZIP_REQUIRED)); defineRule("zip-format", regex(/(^\d{5}$)|(^\d{5}-\d{4}$)/, errorMessages.SERVICE_ZIP_FORMAT)); export default { - name: "mobile-location-modal-question", + name: "mobile-location-modal-questions", + emits: ["update:modelValue"], // The component emits an event data() { return { - + isVehicleProtectedAnswers: [], }; }, props: { + modelValue: { + type: Object, + default: () => ({ + addressQuestions: { + streetAddress: "", + apartmentNumberOrBusinessName: "", + city: "", + state: "", + zipCode: "", + }, + isZipServiceableMobile: Boolean, + isZipServiceableInShop: Boolean, + isVehicleProtected: Boolean, + }), + }, cmsWidgetName: String, modalWidgetName: String, textboxQuestionWidgetName: String, @@ -61,7 +87,25 @@ export default { alertInvalidZipWidgetName: String, }, methods: { - + loadInitialData() { + return baseMixin.methods.dispatchStoreAction(storeActions.GET_VEHICLE_YEARS, {}); + }, + initializeComponent(initialData) { + this.isVehicleProtectedAnswers = initialData; + }, + openModal() { + this.$refs.mobileServiceModal.openModal(); + }, + closeModal() { + this.$refs.mobileServiceModal.closeModal(); + }, + focusOnZipInput() { + this.$nextTick(() => { + console.log(this.$refs); + const input = this.$refs.streetAddressField; + input.focus(); + }); + }, }, computed: { getModalId() { @@ -71,17 +115,25 @@ export default { return this.getCmsContent(this.cmsWidgetName, "HeaderText"); }, mobileLocationDisplayText() { - return this.getCmsContent(this.cmsWidgetName, "FooterText"); }, - }, - mounted() { + mobileQuestionModel: { + get: function () { + return this.modelValue; + }, + set: function (newValue) { + this.$emit("update:modelValue", newValue); + }, + }, }, + mounted() {}, components: { textLink, modal, - addressQuestions + addressQuestions, + vehicleProtectedQuestion, + textBlock }, }; diff --git a/src/layouts/service-location/mobile-location-modal-questions/vehicle-protected-question/vehicle-protected-question.vue b/src/layouts/service-location/mobile-location-modal-questions/vehicle-protected-question/vehicle-protected-question.vue new file mode 100644 index 000000000..b8c795d5f --- /dev/null +++ b/src/layouts/service-location/mobile-location-modal-questions/vehicle-protected-question/vehicle-protected-question.vue @@ -0,0 +1,53 @@ + + + \ No newline at end of file diff --git a/src/layouts/service-location/service-location.vue b/src/layouts/service-location/service-location.vue index 4d0a527c6..cece16fdd 100644 --- a/src/layouts/service-location/service-location.vue +++ b/src/layouts/service-location/service-location.vue @@ -10,10 +10,11 @@ fmg textboxQuestionWidgetName="ServiceZipQuestionWidget" alertNonServiceableZipWidgetName="AlertNonServiceableZipWidget" alertInvalidZipWidgetName="AlertInvalidZipWidget" /> - + textboxQuestionWidgetName="MobileLocationQuestionWidget" /> // Components import serviceZipModalQuestion from "@/layouts/service-location/service-zip-modal-question/service-zip-modal-question"; -import mobileLocationModalQuestion from "@/layouts/service-location/mobile-location-modal-question/mobile-location-modal-question"; +import mobileLocationModalQuestions from "@/layouts/service-location/mobile-location-modal-questions/mobile-location-modal-questions"; import funnelHeader from "@/fmg-components/funnel-header/funnel-header"; import funnelFooter from "@/fmg-components/funnel-footer/funnel-footer"; import funnelSubHeader from "@/fmg-components/funnel-sub-header/funnel-sub-header"; @@ -39,7 +40,17 @@ import { settleAllPromises } from "@/helpers/layout-helper"; export default { name: "service-location", data() { - return {}; + return { + mobileLocationQuestion: { + addressQuestions: { + streetAddress: "", + apartmentNumberOrBusinessName: "", + city: "", + state: "", + zipCode: "", + }, + }, + }; }, async beforeRouteEnter(to, from, next) { // Call APIs @@ -70,7 +81,7 @@ export default { }, components: { serviceZipModalQuestion, - mobileLocationModalQuestion, + mobileLocationModalQuestions, funnelHeader, funnelFooter, funnelSubHeader,