From 3b397b924d324afde9669077b4f543359c16bffb Mon Sep 17 00:00:00 2001 From: Bryan Mauger Date: Wed, 25 Jan 2023 16:42:19 -0500 Subject: [PATCH 01/39] CSR-1051 remove unnecessary code for underline spacing (inherits from text-link) --- .../service-package-radio/service-package-radio.vue | 1 - 1 file changed, 1 deletion(-) diff --git a/src/layouts/quote/service-package-question/service-package-radio/service-package-radio.vue b/src/layouts/quote/service-package-question/service-package-radio/service-package-radio.vue index 9738d3dde..3a2e19080 100644 --- a/src/layouts/quote/service-package-question/service-package-radio/service-package-radio.vue +++ b/src/layouts/quote/service-package-question/service-package-radio/service-package-radio.vue @@ -233,7 +233,6 @@ export default { a { line-height: 1.714; padding: 0; - text-underline-offset: 0.1em; } } } From e9c6e35505393002dab578e0c5f07a8c08af7fe0 Mon Sep 17 00:00:00 2001 From: Bryan Mauger Date: Thu, 26 Jan 2023 13:54:13 -0500 Subject: [PATCH 02/39] CSR-1050 fix margin top spacing. --- src/layouts/quote/quote.vue | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/layouts/quote/quote.vue b/src/layouts/quote/quote.vue index 5a65933b0..21f5753bb 100644 --- a/src/layouts/quote/quote.vue +++ b/src/layouts/quote/quote.vue @@ -29,7 +29,7 @@ digital cmsWidgetName="quoteDisclaimer" justifyText="left" typeStyle="caption" - class="mt-4" /> + class="mt-7" /> From 386ac66c927cdf398360c134da65e4fe8c7e4731 Mon Sep 17 00:00:00 2001 From: Bryan Mauger Date: Fri, 27 Jan 2023 08:59:22 -0500 Subject: [PATCH 03/39] Set text underline spacing to 4px; --- src/layouts/address-vehicles/address-vehicles.vue | 2 +- src/ux-components/text-link/text-link.vue | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/layouts/address-vehicles/address-vehicles.vue b/src/layouts/address-vehicles/address-vehicles.vue index 35f441da7..b83bc6876 100644 --- a/src/layouts/address-vehicles/address-vehicles.vue +++ b/src/layouts/address-vehicles/address-vehicles.vue @@ -247,7 +247,7 @@ export default { line-height: 1.4; a { - text-underline-offset: 0.2em; + text-underline-offset: 4px;//Per Devyn. This can't be documented in Figma so there is a comment with the Prototype mocks on the Quote page in Figma line-height: inherit; } } diff --git a/src/ux-components/text-link/text-link.vue b/src/ux-components/text-link/text-link.vue index f28669a45..ff3e4cdb9 100644 --- a/src/ux-components/text-link/text-link.vue +++ b/src/ux-components/text-link/text-link.vue @@ -45,7 +45,7 @@ export default { From 48f71c5a7d0d9e4366f5d29e12ecbf2e138f1f9e Mon Sep 17 00:00:00 2001 From: Matt Caimi Date: Wed, 18 Jan 2023 12:27:33 -0500 Subject: [PATCH 08/39] 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 1ab55f165..c26b7743b 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, From c782dd7e9f3b5e26256a92ddeea37f145ea3c49b Mon Sep 17 00:00:00 2001 From: Matt Caimi Date: Fri, 27 Jan 2023 10:28:46 -0500 Subject: [PATCH 31/39] CSR-1012 | created content-group-modal --- src/digital-components/modal/modal.vue | 61 ++----------- .../content-group-modal.spec.js | 3 + .../content-group-modal.vue | 88 +++++++++++++++++++ .../service-location/service-location.vue | 1 - .../service-zip-modal-question.vue | 31 ++++--- 5 files changed, 116 insertions(+), 68 deletions(-) create mode 100644 src/fmg-components/content-group-modal/content-group-modal.spec.js create mode 100644 src/fmg-components/content-group-modal/content-group-modal.vue diff --git a/src/digital-components/modal/modal.vue b/src/digital-components/modal/modal.vue index acb545e52..a4efbba3e 100644 --- a/src/digital-components/modal/modal.vue +++ b/src/digital-components/modal/modal.vue @@ -3,7 +3,7 @@ @@ -49,16 +39,11 @@ import { Modal } from "bootstrap"; export default { name: "modal", props: { - cmsWidgetName: String, + modalId: String, + footerButtonText: String, onModalOpenedCallback: { type: Function, }, - - footerButtonCallback: { - type: Function, - // return true to close modal - // if undefined, footer button closes modal - }, }, data() { return { @@ -66,30 +51,7 @@ export default { }; }, mounted() { - this.modal = new Modal(document.getElementById(this.cmsWidgetName)); - }, - computed: { - ModalHeadline() { - return this.getCmsContent(this.cmsWidgetName, "HeaderText"); - }, - ModalSubheadertext() { - return this.getCmsContent(this.cmsWidgetName, "SubheaderText"); - }, - ModalBodyText() { - return this.getCmsContent(this.cmsWidgetName, "BodyText"); - }, - ModalSubBodyText() { - return this.getCmsContent(this.cmsWidgetName, "BodyText2"); - }, - ModalImage() { - return this.getCmsContent(this.cmsWidgetName, "Image"); - }, - ModalCloseButtonText() { - return this.getCmsContent(this.cmsWidgetName, "FooterText"); - }, - showModalBody() { - return this.ModalBodyText; - }, + this.modal = new Modal(document.getElementById(this.modalId)); }, methods: { resetButtonStyle() { @@ -101,15 +63,6 @@ export default { closeModal() { this.modal.hide(); }, - async footerButtonClick() { - if (this.footerButtonCallback) { - if (await this.footerButtonCallback()) { - this.closeModal(); - } - } else { - this.closeModal(); - } - }, }, components: { buttonMain, diff --git a/src/fmg-components/content-group-modal/content-group-modal.spec.js b/src/fmg-components/content-group-modal/content-group-modal.spec.js new file mode 100644 index 000000000..81946c2d0 --- /dev/null +++ b/src/fmg-components/content-group-modal/content-group-modal.spec.js @@ -0,0 +1,3 @@ +describe("content-group-modal.vue", () => { + test.todo("test this"); +}); diff --git a/src/fmg-components/content-group-modal/content-group-modal.vue b/src/fmg-components/content-group-modal/content-group-modal.vue new file mode 100644 index 000000000..a446a01d0 --- /dev/null +++ b/src/fmg-components/content-group-modal/content-group-modal.vue @@ -0,0 +1,88 @@ + + + + + diff --git a/src/layouts/service-location/service-location.vue b/src/layouts/service-location/service-location.vue index cece16fdd..a34875dbb 100644 --- a/src/layouts/service-location/service-location.vue +++ b/src/layouts/service-location/service-location.vue @@ -6,7 +6,6 @@ fmg 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 169281b71..e3b9a767a 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 @@ -17,10 +17,11 @@ + :ref="modalName" + :modalId="modalName" + :onModalOpenedCallback="onModalOpened" + :footerButtonText="footerButtonText" + @footer-button-event="setZip">
Date: Fri, 27 Jan 2023 10:46:04 -0500 Subject: [PATCH 32/39] CSR-1012 | moved body padding into modal component --- src/digital-components/modal/modal.vue | 4 +++- .../content-group-modal.vue | 18 +++++++-------- .../mobile-location-modal-questions.vue | 22 ++++++++++--------- .../service-zip-modal-question.vue | 2 -- 4 files changed, 23 insertions(+), 23 deletions(-) diff --git a/src/digital-components/modal/modal.vue b/src/digital-components/modal/modal.vue index a4efbba3e..a2151215a 100644 --- a/src/digital-components/modal/modal.vue +++ b/src/digital-components/modal/modal.vue @@ -17,7 +17,9 @@ data-bs-dismiss="modal" aria-label="Close">
- +
+ +
-
- -
-

-

-

-
+ +
+

+

+

diff --git a/src/layouts/service-location/mobile-location-modal-questions/mobile-location-modal-questions.vue b/src/layouts/service-location/mobile-location-modal-questions/mobile-location-modal-questions.vue index 7aea041e9..3a82b0362 100644 --- a/src/layouts/service-location/mobile-location-modal-questions/mobile-location-modal-questions.vue +++ b/src/layouts/service-location/mobile-location-modal-questions/mobile-location-modal-questions.vue @@ -19,17 +19,16 @@
-
- - - -
+ :footerButtonText="mobileLocationDisplayText" + @footer-button-event="saveMobileLocationData"> + + + @@ -106,6 +105,9 @@ export default { input.focus(); }); }, + saveMobileLocationData() { + + }, }, computed: { getModalId() { 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 e3b9a767a..478ac8766 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 @@ -22,7 +22,6 @@ :onModalOpenedCallback="onModalOpened" :footerButtonText="footerButtonText" @footer-button-event="setZip"> -
-
From c9736f6d4ba921c86c9bbceed9ddb07fce73eeb8 Mon Sep 17 00:00:00 2001 From: Matt Caimi Date: Fri, 27 Jan 2023 14:08:49 -0500 Subject: [PATCH 33/39] CSR-1012 | content group modals on quote page --- .../content-group-modal.vue | 24 --------- src/layouts/quote/quote.vue | 14 ++--- .../mobile-location-modal-questions.vue | 11 ++-- .../vehicle-protected-question.vue | 4 +- .../service-zip-modal-question.vue | 54 +++++++++---------- 5 files changed, 39 insertions(+), 68 deletions(-) diff --git a/src/fmg-components/content-group-modal/content-group-modal.vue b/src/fmg-components/content-group-modal/content-group-modal.vue index ab0bdee86..f0d2ba75a 100644 --- a/src/fmg-components/content-group-modal/content-group-modal.vue +++ b/src/fmg-components/content-group-modal/content-group-modal.vue @@ -60,27 +60,3 @@ export default { }, }; - - diff --git a/src/layouts/quote/quote.vue b/src/layouts/quote/quote.vue index 21f5753bb..620310d5e 100644 --- a/src/layouts/quote/quote.vue +++ b/src/layouts/quote/quote.vue @@ -29,11 +29,11 @@ digital cmsWidgetName="quoteDisclaimer" justifyText="left" typeStyle="caption" - class="mt-7" /> - - - - + class="mt-4" /> + + + + - + @@ -49,7 +49,7 @@ import { required, regex } from "@/helpers/validation-rules"; import { errorMessages } from "@/constants/error-messages"; import { storeActions } from "@/constants/store-actions.js"; import baseMixin from "@/mixins/base-mixin.js"; -import TextBlock from '../../../digital-components/text-block/text-block.vue'; +import TextBlock from "../../../digital-components/text-block/text-block.vue"; // Define Validation Rules defineRule("zip-required", required(errorMessages.SERVICE_ZIP_REQUIRED)); @@ -105,9 +105,7 @@ export default { input.focus(); }); }, - saveMobileLocationData() { - - }, + saveMobileLocationData() {}, }, computed: { getModalId() { @@ -127,7 +125,6 @@ export default { this.$emit("update:modelValue", newValue); }, }, - }, mounted() {}, components: { @@ -135,7 +132,7 @@ export default { modal, addressQuestions, vehicleProtectedQuestion, - textBlock + 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 index b8c795d5f..68dc5e7b4 100644 --- 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 @@ -18,7 +18,7 @@ export default { name: "vehicle-protected-question", data() { return { - answers: [ "Yes", "No" ], + answers: ["Yes", "No"], }; }, props: { @@ -50,4 +50,4 @@ export default { }, }, }; - \ No newline at end of file + 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 478ac8766..be33ddb86 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 @@ -22,31 +22,31 @@ :onModalOpenedCallback="onModalOpened" :footerButtonText="footerButtonText" @footer-button-event="setZip"> - - - + + + @@ -152,9 +152,7 @@ export default { if (this.serviceZip && this.serviceZip != 0) { return this.serviceZipState + ", " + this.serviceZip; } - return ( - this.getCmsContent(this.cmsWidgetName, "SubheaderText") || "Enter your service ZIP" - ); + return this.getCmsContent(this.cmsWidgetName, "SubheaderText"); }, footerButtonText() { return this.getCmsContent(this.cmsWidgetName, "FooterText"); From 66f1a0039fafe24aac3bede89c12639bfdefb94b Mon Sep 17 00:00:00 2001 From: Matt Caimi Date: Tue, 7 Feb 2023 14:36:07 -0500 Subject: [PATCH 34/39] CSR-1012 | modal loader and improved validation --- src/digital-components/modal/modal.spec.js | 65 ++++--------------- src/digital-components/modal/modal.vue | 10 ++- .../content-group-modal.spec.js | 63 +++++++++++++++++- .../service-zip-modal-question.vue | 10 ++- 4 files changed, 90 insertions(+), 58 deletions(-) diff --git a/src/digital-components/modal/modal.spec.js b/src/digital-components/modal/modal.spec.js index 2664accfa..40c1fd44a 100644 --- a/src/digital-components/modal/modal.spec.js +++ b/src/digital-components/modal/modal.spec.js @@ -1,68 +1,31 @@ import { shallowMount } from "@vue/test-utils"; import Modal from "./modal"; +const modalId = "modal-one"; +const footerButtonText = "Sample footer text here."; +const headerText = "Sample header text here."; + describe("modal.vue", () => { - it("Should display header text when HeaderText is defined in the CMS", async () => { - // Act + it("Should display footer button text when footerButtonText is defined", async () => { const wrapper = shallowMount(Modal, { - mixins: [mockMixin], props: { - cmsWidgetName: "test", + modalId: modalId, + footerButtonText: footerButtonText, }, attachTo: document.body, }); - expect(wrapper.html()).toEqual(expect.stringContaining(mockCmsContent["HeaderText"])); + expect(wrapper.html()).toEqual(expect.stringContaining(footerButtonText)); }); - it("Should display subheader text when SubheaderText is defined in the CMS", async () => { - // Act + it("Should display modal header text when headerText is defined", async () => { const wrapper = shallowMount(Modal, { - mixins: [mockMixin], props: { - cmsWidgetName: "test", + modalId: modalId, + footerButtonText: footerButtonText, + headerText: headerText, }, attachTo: document.body, }); - expect(wrapper.html()).toEqual(expect.stringContaining(mockCmsContent["SubheaderText"])); - }); - - it("Should insert image url when Image is defined in the CMS", async () => { - // Act - const wrapper = shallowMount(Modal, { - mixins: [mockMixin], - props: { - cmsWidgetName: "test", - }, - attachTo: document.body, - }); - expect(wrapper.html()).toEqual(expect.stringContaining(mockCmsContent["Image"])); - }); - - it("Should display body text when BodyText is defined in the CMS", async () => { - // Act - const wrapper = shallowMount(Modal, { - mixins: [mockMixin], - props: { - cmsWidgetName: "test", - }, - attachTo: document.body, - }); - expect(wrapper.html()).toEqual(expect.stringContaining(mockCmsContent["BodyText"])); - }); + expect(wrapper.html()).toEqual(expect.stringContaining(headerText)); + }); }); - -const mockMixin = { - methods: { - getCmsContent: jest.fn((widgetName, cmsFieldName) => { - return mockCmsContent[cmsFieldName]; - }), - }, -}; - -const mockCmsContent = { - HeaderText: "Sample header text here.", - SubheaderText: "Sample subheader text here.", - Image: "https://www.sampleImage.sample", - BodyText: "Sample body text here.", - FooterText: "Sample footer text here.", -}; diff --git a/src/digital-components/modal/modal.vue b/src/digital-components/modal/modal.vue index 89ff1f8ed..0a87d1633 100644 --- a/src/digital-components/modal/modal.vue +++ b/src/digital-components/modal/modal.vue @@ -30,7 +30,7 @@ isPrimary class="w-100" ref="buttonMain" - suppressLoader + loaderColor="white" :buttonText="footerButtonText" @click-event="validateAndEmit" /> @@ -58,8 +58,12 @@ export default { }, methods: { async validateAndEmit() { - const validationResult = await this.modalForm.validate(); - if (validationResult.valid) { + if (this.modalForm) { + const validationResult = await this.modalForm.validate(); + if (validationResult.valid) { + this.$emit("footer-button-event"); + } + } else { this.$emit("footer-button-event"); } diff --git a/src/fmg-components/content-group-modal/content-group-modal.spec.js b/src/fmg-components/content-group-modal/content-group-modal.spec.js index 81946c2d0..a8058b2d5 100644 --- a/src/fmg-components/content-group-modal/content-group-modal.spec.js +++ b/src/fmg-components/content-group-modal/content-group-modal.spec.js @@ -1,3 +1,64 @@ +import { mount } from "@vue/test-utils"; +import contentGroupModal from "./content-group-modal"; + describe("content-group-modal.vue", () => { - test.todo("test this"); + it("Should display header text when HeaderText is defined in the CMS", async () => { + const wrapper = mount(contentGroupModal, { + mixins: [mockMixin], + props: { + cmsWidgetName: "test", + }, + attachTo: document.body, + }); + expect(wrapper.html()).toEqual(expect.stringContaining(mockCmsContent["HeaderText"])); + }); + + it("Should display subheader text when SubheaderText is defined in the CMS", async () => { + const wrapper = mount(contentGroupModal, { + mixins: [mockMixin], + props: { + cmsWidgetName: "test", + }, + attachTo: document.body, + }); + expect(wrapper.html()).toEqual(expect.stringContaining(mockCmsContent["SubheaderText"])); + }); + + it("Should insert image url when Image is defined in the CMS", async () => { + const wrapper = mount(contentGroupModal, { + mixins: [mockMixin], + props: { + cmsWidgetName: "test", + }, + attachTo: document.body, + }); + expect(wrapper.html()).toEqual(expect.stringContaining(mockCmsContent["Image"])); + }); + + it("Should display body text when BodyText is defined in the CMS", async () => { + const wrapper = mount(contentGroupModal, { + mixins: [mockMixin], + props: { + cmsWidgetName: "test", + }, + attachTo: document.body, + }); + expect(wrapper.html()).toEqual(expect.stringContaining(mockCmsContent["BodyText"])); + }); }); + +const mockMixin = { + methods: { + getCmsContent: jest.fn((widgetName, cmsFieldName) => { + return mockCmsContent[cmsFieldName]; + }), + }, +}; + +const mockCmsContent = { + HeaderText: "Sample header text here.", + SubheaderText: "Sample subheader text here.", + Image: "https://www.sampleImage.sample", + BodyText: "Sample body text here.", + FooterText: "Sample footer text here.", +}; 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 d06c4dfda..8f0cbd049 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 @@ -22,7 +22,7 @@ :onModalOpenedCallback="onModalOpened" :footerButtonText="footerButtonText" :headerText="textboxQuestionPrompt" - @footer-button-event="setZip" + @footer-button-event="setZipCode" :modalForm="modalForm"> Date: Wed, 8 Feb 2023 08:39:57 -0500 Subject: [PATCH 35/39] Removed comments on address-questions --- .../address-questions/address-questions.vue | 25 ------------------- 1 file changed, 25 deletions(-) diff --git a/src/layouts/address-lookup/customer-questions/address-questions/address-questions.vue b/src/layouts/address-lookup/customer-questions/address-questions/address-questions.vue index 7afae044e..a3e49369c 100644 --- a/src/layouts/address-lookup/customer-questions/address-questions/address-questions.vue +++ b/src/layouts/address-lookup/customer-questions/address-questions/address-questions.vue @@ -277,26 +277,6 @@ export default { } }); - // addressField1.addEventListener("change", () => { - // // If a match has been previously attempted then do nothing - // if (self.matchFound !== null) { - // return; - // } - - // // Get the address that the user clicked on (if any) - // const clickedAddress = document.querySelector( - // ".pac-container .pac-item:hover" - // ); - - // // If the Street Address field changed without clicking (i.e. by pressing Tab, or clicking outside the field) - // if (clickedAddress === null) { - // // Fill-in the address using first item in the list. - // fillInAddressUsingFirstItem(); - // } - - // console.log("change"); - // }); - function fillInAddressUsingFirstItem() { // Fill-in the address using first item in the list. const item = document.querySelector(".pac-container .pac-item"); @@ -320,7 +300,6 @@ export default { } function fillInAddress(place) { - console.log("fillInAddress"); if (!place) { place = autocomplete.getPlace(); } @@ -329,10 +308,6 @@ export default { self.matchFound = true; self.$nextTick(function () { - //self.addressModel.streetAddress = ""; - - //self.$nextTick(); - self.showAddressFields = true; for (const component of place.address_components) { From d065181758cd000fcccc8f058eb8dc1faea57edd Mon Sep 17 00:00:00 2001 From: Leah Schumann Date: Wed, 8 Feb 2023 08:44:05 -0500 Subject: [PATCH 36/39] CSR-1012 - Prettified --- src/digital-components/modal/modal.spec.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/digital-components/modal/modal.spec.js b/src/digital-components/modal/modal.spec.js index 40c1fd44a..5feaf0216 100644 --- a/src/digital-components/modal/modal.spec.js +++ b/src/digital-components/modal/modal.spec.js @@ -27,5 +27,5 @@ describe("modal.vue", () => { attachTo: document.body, }); expect(wrapper.html()).toEqual(expect.stringContaining(headerText)); - }); + }); }); From 5100e5ec5b9d5586aa842ea5d178c6ffda4f18a5 Mon Sep 17 00:00:00 2001 From: Leah Schumann Date: Wed, 8 Feb 2023 09:19:20 -0500 Subject: [PATCH 37/39] CSR-1012 - Uncommented code that is for selecting the first item when clicking outside of box --- .../address-questions/address-questions.vue | 18 ++++++++++++++++++ 1 file changed, 18 insertions(+) diff --git a/src/layouts/address-lookup/customer-questions/address-questions/address-questions.vue b/src/layouts/address-lookup/customer-questions/address-questions/address-questions.vue index a3e49369c..9ed26f29d 100644 --- a/src/layouts/address-lookup/customer-questions/address-questions/address-questions.vue +++ b/src/layouts/address-lookup/customer-questions/address-questions/address-questions.vue @@ -277,6 +277,24 @@ export default { } }); + addressField1.addEventListener("change", () => { + // If a match has been previously attempted then do nothing + if (self.matchFound !== null) { + return; + } + + // Get the address that the user clicked on (if any) + const clickedAddress = document.querySelector( + ".pac-container .pac-item:hover" + ); + + // If the Street Address field changed without clicking (i.e. by pressing Tab, or clicking outside the field) + if (clickedAddress === null) { + // Fill-in the address using first item in the list. + fillInAddressUsingFirstItem(); + } + }); + function fillInAddressUsingFirstItem() { // Fill-in the address using first item in the list. const item = document.querySelector(".pac-container .pac-item"); From 7db466fc60262327ccfdd77cd9d5197814c5b111 Mon Sep 17 00:00:00 2001 From: Leah Schumann Date: Wed, 8 Feb 2023 13:33:10 -0500 Subject: [PATCH 38/39] Additional consistency changes between the two modals --- .../address-questions/address-questions.vue | 5 -- .../service-location/service-location.vue | 5 ++ .../service-zip-modal-question.vue | 61 ++++++++++++++++--- 3 files changed, 59 insertions(+), 12 deletions(-) diff --git a/src/layouts/address-lookup/customer-questions/address-questions/address-questions.vue b/src/layouts/address-lookup/customer-questions/address-questions/address-questions.vue index 9ed26f29d..aed1b5147 100644 --- a/src/layouts/address-lookup/customer-questions/address-questions/address-questions.vue +++ b/src/layouts/address-lookup/customer-questions/address-questions/address-questions.vue @@ -409,11 +409,6 @@ export default { } }, }, - "addressModel.streetAddress": { - handler(newValue, oldValue) { - console.log(`I got changed from ${oldValue} to ${newValue}`); - }, - }, }, components: { textboxQuestion, diff --git a/src/layouts/service-location/service-location.vue b/src/layouts/service-location/service-location.vue index f3627d362..2ed5f676b 100644 --- a/src/layouts/service-location/service-location.vue +++ b/src/layouts/service-location/service-location.vue @@ -5,6 +5,7 @@ fmg
+ v-html="serviceLocationLinkPromptText">
@@ -27,8 +27,8 @@ ({ + serviceZipQuestion: { + serviceState: "", + serviceZipCode: "", + }, + }), + }, cmsWidgetName: String, textboxQuestionWidgetName: String, alertNonServiceableZipWidgetName: String, @@ -94,6 +103,10 @@ export default { }; }, methods: { + mobileLocationLinkPromptText() { + return this.getCmsContent(this.cmsWidgetName, "HeaderText"); + }, + openZipCodeModal() { this.$refs[this.modalName].openModal(); }, @@ -150,6 +163,25 @@ export default { }, }, computed: { + serviceZipLinkPromptText() { + return this.getCmsContent(this.cmsWidgetName, "HeaderText"); + }, + serviceZipLinkText() { + return this.getCmsContent(this.cmsWidgetName, "BodyText"); + }, + modalHeaderText() { + return this.getCmsContent(this.textboxQuestionWidgetName, "QuestionText"); + }, + modalFooterText() { + return this.getCmsContent(this.modalWidgetName, "FooterText"); + }, + + + + + + + textboxQuestionPrompt() { return this.getCmsContent(this.textboxQuestionWidgetName, "QuestionText"); }, @@ -178,6 +210,21 @@ export default { ).replaceAll("{custom:serviceZipCodeInput}", zipCode); return text; }, + serviceZipModel: { + get: function () { + return this.modelValue; + }, + set: function (newValue) { + this.$emit("update:modelValue", newValue); + }, + }, + }, + watch: { + serviceZipModel: { + handler() { + this.displayNonServiceableZipAlert = false; + }, + }, }, mounted() { this.$watch( From d0842d6713be0fd8ed484e9bf40a4bfb058df743 Mon Sep 17 00:00:00 2001 From: Leah Schumann Date: Wed, 8 Feb 2023 13:34:14 -0500 Subject: [PATCH 39/39] Forgot to save file --- src/digital-components/modal/modal.vue | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/src/digital-components/modal/modal.vue b/src/digital-components/modal/modal.vue index 0a87d1633..39833ab4d 100644 --- a/src/digital-components/modal/modal.vue +++ b/src/digital-components/modal/modal.vue @@ -42,11 +42,11 @@