From 8c79581df013961cce80966420e28fc5ea0eae35 Mon Sep 17 00:00:00 2001 From: Matt Caimi Date: Thu, 12 Jan 2023 11:20:43 -0500 Subject: [PATCH 001/141] 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 002/141] 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 + + From 314fe42c189cfa92dd3b4d5207d2e7f2382cfe1d Mon Sep 17 00:00:00 2001 From: Matt Caimi Date: Wed, 18 Jan 2023 12:27:33 -0500 Subject: [PATCH 014/141] 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 @@ 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 734f3d6643e548055359d4f93ec0f4873d7c30fa Mon Sep 17 00:00:00 2001 From: Matt Caimi Date: Thu, 12 Jan 2023 11:20:43 -0500 Subject: [PATCH 027/141] 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 48f71c5a7d0d9e4366f5d29e12ecbf2e138f1f9e Mon Sep 17 00:00:00 2001 From: Matt Caimi Date: Wed, 18 Jan 2023 12:27:33 -0500 Subject: [PATCH 028/141] 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 051/141] 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 052/141] 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 053/141] 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 3abb66cf8edeff5cacd364afd960d58beb2a83d1 Mon Sep 17 00:00:00 2001 From: Leah Schumann Date: Fri, 27 Jan 2023 16:15:35 -0500 Subject: [PATCH 054/141] Got the programmatic opening of modals working on quote page, still need to handle the buttonQuestion issue --- .../button-question/button-question.vue | 4 ++ .../content-group-modal.vue | 4 +- src/layouts/quote/quote.vue | 18 ++++--- .../service-package-question.vue | 4 +- .../service-package-radio.vue | 12 ++++- .../mobile-location-modal-questions.vue | 11 ++-- .../vehicle-protected-question.vue | 4 +- .../service-zip-modal-question.vue | 50 +++++++++---------- 8 files changed, 62 insertions(+), 45 deletions(-) diff --git a/src/digital-components/button-question/button-question.vue b/src/digital-components/button-question/button-question.vue index 4c60b0708..7defb5b5d 100644 --- a/src/digital-components/button-question/button-question.vue +++ b/src/digital-components/button-question/button-question.vue @@ -53,6 +53,7 @@ https://safelite.atlassian.net/wiki/spaces/DC/pages/76644418/Button+Question+Com :lastValuePushedToGa="lastValuePushedToGa" :setLastValuePushedToGa="setLastValuePushedToGa" :suppressError="suppressError" + @openModal="openModal" v-model="selectedValues" /> @@ -214,6 +215,9 @@ export default { setLastValuePushedToGa(lastValuePushedToGa) { this.lastValuePushedToGa = lastValuePushedToGa; }, + openModal(modalName) { + this.$emit("openModal", modalName); + } }, components: { listButton, 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..d9d9da937 100644 --- a/src/fmg-components/content-group-modal/content-group-modal.vue +++ b/src/fmg-components/content-group-modal/content-group-modal.vue @@ -48,11 +48,11 @@ export default { }, methods: { openModal() { - this.$refs[this.ModalName()].openModal(); + this.$refs[this.ModalName].openModal(); }, footerButtonClick() { - this.$refs[this.ModalName()].closeModal(); + this.$refs[this.ModalName].closeModal(); }, }, components: { diff --git a/src/layouts/quote/quote.vue b/src/layouts/quote/quote.vue index 5a65933b0..b5eb3ff6e 100644 --- a/src/layouts/quote/quote.vue +++ b/src/layouts/quote/quote.vue @@ -1,4 +1,3 @@ -digital @@ -141,6 +142,7 @@ export default { shouldDisplayTierTwoPackage() { return this.frontWipersApplicableForTierTwo || this.rearWiperApplicableForTierTwo; }, + }, methods: { processIfStatements, 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..8286efde7 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 @@ -29,12 +29,19 @@ + @@ -88,6 +95,9 @@ export default { .split(/(?:)|(?:<\/li>)/g) .filter((lineItem) => lineItem); }, + openModal(modalName) { + this.$emit("openModal", modalName); + } }, }; 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 3a82b0362..6fa8728ba 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 @@ -27,7 +27,7 @@ ref="addressQuestions" v-model="mobileQuestionModel.addressQuestions" captureApartmentNumberOrBusinessName="true" /> - + @@ -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..687afa6a6 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"> - - - + + + From 9f363c5ed9007a5b2121916a08a82cab9866060a Mon Sep 17 00:00:00 2001 From: Leah Schumann Date: Tue, 31 Jan 2023 08:37:14 -0500 Subject: [PATCH 055/141] Checkpoint - Quote page models now opening programatically --- .../button-question/button-question.vue | 9 +++++---- .../address-questions/address-questions.vue | 6 ------ .../service-package-question.vue | 4 ++-- .../service-package-radio/service-package-radio.vue | 12 +++++++----- 4 files changed, 14 insertions(+), 17 deletions(-) diff --git a/src/digital-components/button-question/button-question.vue b/src/digital-components/button-question/button-question.vue index 7defb5b5d..7472c95f5 100644 --- a/src/digital-components/button-question/button-question.vue +++ b/src/digital-components/button-question/button-question.vue @@ -53,7 +53,7 @@ https://safelite.atlassian.net/wiki/spaces/DC/pages/76644418/Button+Question+Com :lastValuePushedToGa="lastValuePushedToGa" :setLastValuePushedToGa="setLastValuePushedToGa" :suppressError="suppressError" - @openModal="openModal" + @nestedComponentEvent="handleNestedComponentEvent" v-model="selectedValues" /> @@ -215,9 +215,10 @@ export default { setLastValuePushedToGa(lastValuePushedToGa) { this.lastValuePushedToGa = lastValuePushedToGa; }, - openModal(modalName) { - this.$emit("openModal", modalName); - } + handleNestedComponentEvent(event) { + const eventName = event.eventName; + this.$emit(`${eventName}`, event.args); + }, }, components: { listButton, 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 ff7fb0d9a..ff8e7d7a7 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 @@ -320,7 +320,6 @@ export default { } function fillInAddress(place) { - console.log("fillInAddress"); if (!place) { place = autocomplete.getPlace(); } @@ -416,11 +415,6 @@ export default { } }, }, - "addressModel.streetAddress": { - handler(newValue, oldValue) { - console.log(`I got changed from ${oldValue} to ${newValue}`); - }, - }, }, components: { textboxQuestion, diff --git a/src/layouts/quote/service-package-question/service-package-question.vue b/src/layouts/quote/service-package-question/service-package-question.vue index 25a0dfb2f..b0f3c1023 100644 --- a/src/layouts/quote/service-package-question/service-package-question.vue +++ b/src/layouts/quote/service-package-question/service-package-question.vue @@ -1,5 +1,6 @@ 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 83f430792..e806ac261 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 @@ -33,7 +33,7 @@ :text="getRouterLinkDisplayTextFromCopy(copy)" href="#!" @click-event=" - $emit('nestedComponentEvent', { + $emit('buttonEvent', { eventName: 'openModal', args: getRouterLinkRouteFromCopy(copy), }) From 55f49606f7bb10dae2a6831871f25fb3e2a7c9e4 Mon Sep 17 00:00:00 2001 From: Leah Schumann Date: Fri, 3 Feb 2023 16:01:43 -0500 Subject: [PATCH 060/141] Modal stuff, including validation for localized fields, modal header, etc --- src/digital-components/modal/modal.vue | 23 +++- .../textbox-question/textbox-question.vue | 6 +- .../address-questions/address-questions.vue | 11 +- .../mobile-location-modal-questions.vue | 112 +++++++++++------- .../vehicle-protected-question.vue | 10 ++ .../service-location/service-location.vue | 13 +- .../service-zip-modal-question.vue | 8 +- 7 files changed, 124 insertions(+), 59 deletions(-) diff --git a/src/digital-components/modal/modal.vue b/src/digital-components/modal/modal.vue index a2151215a..238f63aa6 100644 --- a/src/digital-components/modal/modal.vue +++ b/src/digital-components/modal/modal.vue @@ -9,15 +9,18 @@ aria-hidden="true">
-
+
+ + aria-label="Close">
-
+
@@ -27,7 +30,7 @@ ref="buttonMain" suppressLoader :buttonText="footerButtonText" - @click="$emit('footerButtonEvent')" /> + @click-event="$emit('footer-button-event')" />
@@ -42,6 +45,7 @@ export default { name: "modal", props: { modalId: String, + headerText: String, footerButtonText: String, onModalOpenedCallback: { type: Function, @@ -82,10 +86,19 @@ export default { color: $black; } .modal-header { - border-bottom: none; + border-bottom: none; .btn-close { + position: absolute; + right: 1rem; + top: 1rem; background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M15.6874 1.82179L9.50889 8L15.6874 14.1782C16.1042 14.595 16.1042 15.2707 15.6874 15.6875C15.4843 15.8907 15.2146 16 14.9328 16C14.6514 16 14.3818 15.8906 14.1787 15.6875L8.00017 9.50934L1.82171 15.6875C1.6182 15.8907 1.34876 16 1.06708 16C0.785733 16 0.516056 15.8906 0.312965 15.6875C-0.10429 15.2706 -0.10429 14.5952 0.312797 14.1784L6.03276 8.45867L6.49146 8L0.312945 1.82177C-0.10429 1.40483 -0.10429 0.729418 0.312797 0.31262C0.728936 -0.104145 1.40489 -0.104051 1.82185 0.31262L7.54152 6.03202L8.00017 6.49065L14.1786 0.312472C14.5955 -0.104107 15.2707 -0.104201 15.6874 0.312452C16.1042 0.729289 16.1042 1.40496 15.6874 1.82179Z' fill='%231574A1'/%3E%3C/svg%3E%0A"); opacity: 1; + + }; + + .modal-title { + font-weight: 500; + color: rgb(0, 0, 0); } } &.modal-component { diff --git a/src/digital-components/textbox-question/textbox-question.vue b/src/digital-components/textbox-question/textbox-question.vue index a19823b0d..ac963ca0f 100644 --- a/src/digital-components/textbox-question/textbox-question.vue +++ b/src/digital-components/textbox-question/textbox-question.vue @@ -1,6 +1,6 @@ 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 6fa8728ba..6102373aa 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 @@ -1,34 +1,39 @@ @@ -36,33 +41,36 @@ // 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 -import { defineRule } from "vee-validate"; +import { defineRule, useForm } from "vee-validate"; 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"; // 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-questions", emits: ["update:modelValue"], // The component emits an event data() { return { - isVehicleProtectedAnswers: [], + answers: [], }; }, + setup() { + const modalForm = useForm(); + + return { + modalForm, + } + }, props: { modelValue: { type: Object, @@ -81,43 +89,28 @@ export default { }, cmsWidgetName: String, modalWidgetName: String, - textboxQuestionWidgetName: String, + mobileFeeDisclaimerWidgetName: String, + workspaceRequirementsWidgetName: String, alertNonServiceableZipWidgetName: String, 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(); - }); - }, - saveMobileLocationData() {}, - }, computed: { + mobileLocationLinkPromptText() { + return this.getCmsContent(this.cmsWidgetName, "HeaderText"); + }, + mobileLocationLinkText() { + return this.getCmsContent(this.cmsWidgetName, "BodyText"); + }, getModalId() { return "#" + this.modalWidgetName; }, - questionText() { - return this.getCmsContent(this.cmsWidgetName, "HeaderText"); + modalHeaderText() { + return this.getCmsContent(this.modalWidgetName, "HeaderText"); }, - mobileLocationDisplayText() { - return this.getCmsContent(this.cmsWidgetName, "FooterText"); + modalFooterText() { + return this.getCmsContent(this.modalWidgetName, "FooterText"); }, - mobileQuestionModel: { + mobileLocationQuestionModel: { get: function () { return this.modelValue; }, @@ -126,6 +119,30 @@ export default { }, }, }, + methods: { + loadInitialData() { + return baseMixin.methods.dispatchStoreAction(storeActions.GET_VEHICLE_YEARS, {}); + }, + initializeComponent(initialData) { + this.answers = initialData; + }, + openModal() { + this.$refs.mobileLocationModal.openModal(); + }, + closeModal() { + this.$refs.mobileLocationModal.closeModal(); + }, + async saveMobileLocationData() { + const componentValidation = await this.modalForm.validate(); + if (componentValidation.valid) { + this.closeModal(); + } else { + this.$refs.mobileLocationModal.resetButtonStyle(); + } + + }, + }, + mounted() {}, components: { textLink, @@ -148,4 +165,9 @@ export default { vertical-align: middle; margin-right: 0.5em; } + +.address-questions { + margin-top: 0em; +} + 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 4fb06a201..45b80caa6 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 @@ -6,14 +6,24 @@ groupName="isVehicleProtected" textPosition="text-center" v-model="selectedValue" + validationRules="option-required" isRequired /> + + 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 6102373aa..dbce77065 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 @@ -30,9 +30,9 @@ v-model="mobileLocationQuestionModel.addressQuestions" captureApartmentNumberOrBusinessName="true" /> + cmsWidgetName="VehicleProtectedQuestionWidget" /> @@ -55,7 +55,6 @@ import baseMixin from "@/mixins/base-mixin.js"; // Define Validation Rules - export default { name: "mobile-location-modal-questions", emits: ["update:modelValue"], // The component emits an event @@ -68,9 +67,9 @@ export default { const modalForm = useForm(); return { - modalForm, - } - }, + modalForm, + }; + }, props: { modelValue: { type: Object, @@ -100,7 +99,7 @@ export default { }, mobileLocationLinkText() { return this.getCmsContent(this.cmsWidgetName, "BodyText"); - }, + }, getModalId() { return "#" + this.modalWidgetName; }, @@ -139,7 +138,6 @@ export default { } else { this.$refs.mobileLocationModal.resetButtonStyle(); } - }, }, @@ -169,5 +167,4 @@ export default { .address-questions { margin-top: 0em; } - 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 45b80caa6..3f7636fd1 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 @@ -10,8 +10,6 @@ isRequired /> - - 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 262d6e769..50090769a 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,8 @@ :onModalOpenedCallback="onModalOpened" :footerButtonText="footerButtonText" :headerText="textboxQuestionPrompt" - @footer-button-event="setZip"> + @footer-button-event="setZip" + :modalForm="modalForm"> Date: Mon, 6 Feb 2023 13:48:05 -0500 Subject: [PATCH 063/141] Prettified --- src/digital-components/modal/modal.vue | 6 +++--- .../mobile-location-modal-questions.vue | 2 +- .../service-zip-modal-question.vue | 2 +- 3 files changed, 5 insertions(+), 5 deletions(-) diff --git a/src/digital-components/modal/modal.vue b/src/digital-components/modal/modal.vue index b90449ffb..89ff1f8ed 100644 --- a/src/digital-components/modal/modal.vue +++ b/src/digital-components/modal/modal.vue @@ -60,9 +60,9 @@ export default { async validateAndEmit() { const validationResult = await this.modalForm.validate(); if (validationResult.valid) { - this.$emit('footer-button-event'); - } - + this.$emit("footer-button-event"); + } + this.resetButtonStyle(); }, resetButtonStyle() { 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 fc898fdfb..5dab5edf0 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 @@ -123,7 +123,7 @@ export default { this.$refs.mobileLocationModal.closeModal(); }, async setMobileLocation() { - this.closeModal(); + this.closeModal(); }, }, components: { 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 50090769a..d06c4dfda 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 @@ -132,7 +132,7 @@ export default { this.resetAlerts(); const zipCodeData = await this.getZipCodeData(this.serviceZipCodeInput); - + if (!zipCodeData.isValid) { this.displayInvalidZipAlert = true; } else if (!zipCodeData.isServiceable) { From 66f1a0039fafe24aac3bede89c12639bfdefb94b Mon Sep 17 00:00:00 2001 From: Matt Caimi Date: Tue, 7 Feb 2023 14:36:07 -0500 Subject: [PATCH 064/141] 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:22:03 -0500 Subject: [PATCH 065/141] Added code to enable / disable the Footer Button --- src/digital-components/modal/modal.vue | 30 ++++++++++++++++++++------ 1 file changed, 23 insertions(+), 7 deletions(-) diff --git a/src/digital-components/modal/modal.vue b/src/digital-components/modal/modal.vue index 89ff1f8ed..e206dd3e3 100644 --- a/src/digital-components/modal/modal.vue +++ b/src/digital-components/modal/modal.vue @@ -32,7 +32,8 @@ ref="buttonMain" suppressLoader :buttonText="footerButtonText" - @click-event="validateAndEmit" /> + @click-event="validateAndEmit" + :class="isFooterButtonDisabled && 'form-test-invalid'" />
@@ -42,6 +43,7 @@ From 4562f7679eec2c10f28b4be97c7a06b954e809e4 Mon Sep 17 00:00:00 2001 From: Leah Schumann Date: Fri, 17 Feb 2023 09:35:10 -0500 Subject: [PATCH 100/141] Added code to display invalid zip alert --- .../mobile-location-modal-questions.vue | 15 +++++++++++---- 1 file changed, 11 insertions(+), 4 deletions(-) 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 31378fc95..dc2df2e9a 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 @@ -36,7 +36,7 @@ ref="alertInvalidZip" v-if="displayInvalidZipAlert" class="my-4" - :cmsWidgetName="AlertInvalidZipWidget" + cmsWidgetName="AlertInvalidZipWidget" alertClass="alert-danger" v-bind:isDismissible="false" /> @@ -57,6 +57,7 @@ export default { data() { return { internalModel: this.copyModel(this.modelValue), + displayInvalidZipAlert: false, }; }, props: { @@ -162,11 +163,17 @@ export default { async setMobileLocation() { // TODO: Any lookups or actions to be taken before assigning the Mobile Location + const zipCodeData = await this.getZipCodeData(this.internalModel.addressQuestions.zipCode); - // Update the page level model - this.$emit("update:modelValue", this.internalModel); + if (!zipCodeData.isValid) { + this.displayInvalidZipAlert = true; + } else { + // Update the page level model + this.$emit("update:modelValue", this.internalModel); + + this.closeModal(); + } - this.closeModal(); }, }, watch: { From 487c83e3a0173b5ed2c9a94ff131ddd3bbcc0058 Mon Sep 17 00:00:00 2001 From: Leah Schumann Date: Fri, 17 Feb 2023 09:39:40 -0500 Subject: [PATCH 101/141] Resolving this issue: https://stackoverflow.com/questions/75179573/how-to-fix-loading-the-google-maps-javascript-api-without-a-callback-is-not-supp --- .../address-questions/address-questions.vue | 2 +- .../mobile-location-modal-questions.vue | 5 +++-- 2 files changed, 4 insertions(+), 3 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 8a28ea669..c37e596ef 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 @@ -215,7 +215,7 @@ export default { const apiKey = applicationConfig.GOOGLE_PLACES_API_KEY; this.$loadScript( - `https://maps.googleapis.com/maps/api/js?key=${apiKey}&libraries=places` + `https://maps.googleapis.com/maps/api/js?key=${apiKey}&libraries=places&callback=Function.prototype` ) .then(() => { // Script is loaded, initialize the autocomplete textbox 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 dc2df2e9a..6a6e6cc56 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 @@ -163,7 +163,9 @@ export default { async setMobileLocation() { // TODO: Any lookups or actions to be taken before assigning the Mobile Location - const zipCodeData = await this.getZipCodeData(this.internalModel.addressQuestions.zipCode); + const zipCodeData = await this.getZipCodeData( + this.internalModel.addressQuestions.zipCode + ); if (!zipCodeData.isValid) { this.displayInvalidZipAlert = true; @@ -173,7 +175,6 @@ export default { this.closeModal(); } - }, }, watch: { From 1fccadd678d929109944f21e57da878425bc3481 Mon Sep 17 00:00:00 2001 From: Matt Caimi Date: Fri, 17 Feb 2023 10:22:56 -0500 Subject: [PATCH 102/141] CSR-1012 some unit tests for service-location-modal-question --- .../service-zip-modal-question.spec.js | 80 ++++++++++++++++++- 1 file changed, 79 insertions(+), 1 deletion(-) 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 index a81727c73..4f18fd52a 100644 --- 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 @@ -1,3 +1,81 @@ +import { mount } from "@vue/test-utils"; +import serviceZipModalQuestion from "./service-zip-modal-question"; +import crypto from "crypto"; +global.crypto = crypto; + +jest.mock('@/digital-components/textbox-question/textbox-question', () => ({ + getCmsContent: jest.fn((widgetName, cmsFieldName) => { + return widgetName[cmsFieldName]; + }), +})); + +const linkWidgetName = "linkWidgetName"; +const modalWidgetName = "modalWidgetName"; +const textboxQuestionWidgetName = "textboxQuestionWidgetName"; + +const mockLinkCmsContent = { + BodyText: "Sample link body text here.", +}; + +const mockModalCmsContent = { + FooterText: "Sample modal footer text here.", +}; + +const mockTextboxQuestionCmsContent = { + QuestionText: "Sample question text here." +}; + +const mockMixin = { + methods: { + getCmsContent: jest.fn((widgetName, cmsFieldName) => { + if (widgetName === linkWidgetName) + return mockLinkCmsContent[cmsFieldName]; + + if (widgetName === modalWidgetName) + return mockModalCmsContent[cmsFieldName]; + + if (widgetName === textboxQuestionWidgetName) + return mockTextboxQuestionCmsContent[cmsFieldName]; + + return null; + }), + + getZipCodeData: jest.fn((zip) => { + return { + isValid: true, + state: "OH", + isServiceable: true, + }; + }), + }, +}; + describe("service-zip-modal-question.vue", () => { - test.todo("test this"); + + it("Should display text from textboxQuestionWidget", async () => { + const wrapper = mount(serviceZipModalQuestion, { + mixins: [mockMixin], + props: { + linkWidgetName: linkWidgetName, + modalWidgetName: modalWidgetName, + textboxQuestionWidgetName: textboxQuestionWidgetName, + }, + attachTo: document.body, + }); + expect(wrapper.html()).toEqual(expect.stringContaining(mockTextboxQuestionCmsContent["QuestionText"])); + }); + + it("Should display footer text from modalWidget", async () => { + const wrapper = mount(serviceZipModalQuestion, { + mixins: [mockMixin], + props: { + linkWidgetName: linkWidgetName, + modalWidgetName: modalWidgetName, + textboxQuestionWidgetName: textboxQuestionWidgetName, + }, + attachTo: document.body, + }); + expect(wrapper.html()).toEqual(expect.stringContaining(mockModalCmsContent["FooterText"])); + }); + }); From 66104b1d9e44b1cf0772a5a075f13550dc3c1374 Mon Sep 17 00:00:00 2001 From: Matt Caimi Date: Fri, 17 Feb 2023 10:28:21 -0500 Subject: [PATCH 103/141] CSR-1012 formatting --- .../service-zip-modal-question.spec.js | 19 +++++++++++-------- 1 file changed, 11 insertions(+), 8 deletions(-) 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 index 4f18fd52a..f0c022ba8 100644 --- 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 @@ -3,7 +3,7 @@ import serviceZipModalQuestion from "./service-zip-modal-question"; import crypto from "crypto"; global.crypto = crypto; -jest.mock('@/digital-components/textbox-question/textbox-question', () => ({ +jest.mock("@/digital-components/textbox-question/textbox-question", () => ({ getCmsContent: jest.fn((widgetName, cmsFieldName) => { return widgetName[cmsFieldName]; }), @@ -22,20 +22,23 @@ const mockModalCmsContent = { }; const mockTextboxQuestionCmsContent = { - QuestionText: "Sample question text here." + QuestionText: "Sample question text here.", }; const mockMixin = { methods: { getCmsContent: jest.fn((widgetName, cmsFieldName) => { - if (widgetName === linkWidgetName) + if (widgetName === linkWidgetName) { return mockLinkCmsContent[cmsFieldName]; + } - if (widgetName === modalWidgetName) + if (widgetName === modalWidgetName) { return mockModalCmsContent[cmsFieldName]; + } - if (widgetName === textboxQuestionWidgetName) + if (widgetName === textboxQuestionWidgetName) { return mockTextboxQuestionCmsContent[cmsFieldName]; + } return null; }), @@ -51,7 +54,6 @@ const mockMixin = { }; describe("service-zip-modal-question.vue", () => { - it("Should display text from textboxQuestionWidget", async () => { const wrapper = mount(serviceZipModalQuestion, { mixins: [mockMixin], @@ -62,7 +64,9 @@ describe("service-zip-modal-question.vue", () => { }, attachTo: document.body, }); - expect(wrapper.html()).toEqual(expect.stringContaining(mockTextboxQuestionCmsContent["QuestionText"])); + expect(wrapper.html()).toEqual( + expect.stringContaining(mockTextboxQuestionCmsContent["QuestionText"]) + ); }); it("Should display footer text from modalWidget", async () => { @@ -77,5 +81,4 @@ describe("service-zip-modal-question.vue", () => { }); expect(wrapper.html()).toEqual(expect.stringContaining(mockModalCmsContent["FooterText"])); }); - }); From 4ddc9c41d0756161d51914771fc1f8365810255b Mon Sep 17 00:00:00 2001 From: Leah Schumann Date: Mon, 20 Feb 2023 09:22:22 -0500 Subject: [PATCH 104/141] Suggested changes from Mark regarding inputIDs for textboxQuestion and dropdownQuestion --- .../dropdown-question/dropdown-question.vue | 3 ++ .../text-block/text-block.vue | 4 ++ .../textbox-question/textbox-question.vue | 7 +++- .../mobile-location-modal-questions.vue | 29 ++++++++++++--- .../service-location/service-location.vue | 37 +++++++++++++++---- .../service-zip-modal-question.vue | 20 +++++++--- 6 files changed, 81 insertions(+), 19 deletions(-) diff --git a/src/digital-components/dropdown-question/dropdown-question.vue b/src/digital-components/dropdown-question/dropdown-question.vue index 3dfc82947..e122837c4 100644 --- a/src/digital-components/dropdown-question/dropdown-question.vue +++ b/src/digital-components/dropdown-question/dropdown-question.vue @@ -86,6 +86,9 @@ export default { errors, }; }, + mounted() { + this.$emit("dropdownQuestionEvent.inputIdAssigned", this.inputId); + }, computed: { questionText() { return this.getCmsContent(this.cmsWidgetName, "QuestionText"); diff --git a/src/digital-components/text-block/text-block.vue b/src/digital-components/text-block/text-block.vue index 33854e143..9e7df6312 100644 --- a/src/digital-components/text-block/text-block.vue +++ b/src/digital-components/text-block/text-block.vue @@ -9,6 +9,7 @@ export default { name: "textBlock", props: { + customText: String, // used to allow the insert of token values into textblock justifyText: String, // left, right, center typeStyle: String, // h1-h6, body, small, label, caption (see Figma or Confluence documentation) fontWeight: String, // bold=500, default is 400 @@ -16,6 +17,9 @@ export default { }, computed: { TextBlockCopy() { + if (this.customText) { + return this.customText; + } return this.getCmsContent(this.cmsWidgetName, "Text"); }, }, diff --git a/src/digital-components/textbox-question/textbox-question.vue b/src/digital-components/textbox-question/textbox-question.vue index 90aa33ddf..2b14aac6b 100644 --- a/src/digital-components/textbox-question/textbox-question.vue +++ b/src/digital-components/textbox-question/textbox-question.vue @@ -76,7 +76,9 @@ export default { includeSearchIcon: Boolean, }, setup(props) { - const inputId = !props.customInputId ? `input-${crypto.randomUUID()}` : props.customInputId; + const inputId = !props.customInputId + ? `input-${crypto.randomUUID()}` + : props.customInputId; const propsClone = Object.assign({}, props); const modelValue = propsClone.modelValue; @@ -126,6 +128,9 @@ export default { }, }, }, + mounted() { + this.$emit("textboxQuestionEvent.inputIdAssigned", this.inputId); + }, watch: { async value(newValue) { const result = await validate(newValue, this.validationRules); // do a test validation check, without triggering full validation 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 6a6e6cc56..bb768fa14 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 @@ -15,7 +15,10 @@ @click-event="openModal" aria-label="Modal window" /> - + + v-model="internalModel.zipCode" + v-on="{ 'textboxQuestionEvent.inputIdAssigned': onInputIdAssigned }" + :cmsWidgetName="textboxQuestionWidgetName" /> Date: Mon, 20 Feb 2023 10:39:06 -0500 Subject: [PATCH 105/141] Checking in before writing some unit tests --- src/constants/endpoints.js | 4 +++ src/constants/store-actions.js | 1 + .../textbox-question/textbox-question.vue | 4 +-- .../mobile-location-modal-questions.vue | 27 ++++++++++++++++--- src/store/index.js | 7 +++++ 5 files changed, 36 insertions(+), 7 deletions(-) diff --git a/src/constants/endpoints.js b/src/constants/endpoints.js index 9f4c60d61..19019477b 100644 --- a/src/constants/endpoints.js +++ b/src/constants/endpoints.js @@ -70,6 +70,10 @@ const endpoints = { url: "/parts/api/v1/parts/rain-defense", method: "GET", }, + GetMobileFeePart: { + url: "/parts/api/v1/parts/mobile-fee", + method: "GET", + }, GetSupportingItems: { url: "/parts/api/v1/parts/supporting-items", method: "POST", diff --git a/src/constants/store-actions.js b/src/constants/store-actions.js index 428280d40..eb781b020 100644 --- a/src/constants/store-actions.js +++ b/src/constants/store-actions.js @@ -27,6 +27,7 @@ const storeActions = { GET_CAPABILITY_QUESTIONS: "getCapabilityQuestions", GET_PART_FROM_CAPABILITY_QUESTION_ANSWER: "getPartFromCapabilityQuestionAnswer", GET_MOLDING_QUESTIONS: "getMoldingQuestions", + GET_MOBILE_FEE_PART: "getMobileFeePart", SAVE_SESSION: "saveSession", LOAD_SESSION: "loadSession", UPDATE_STORE_WITH_SAVE_SESSION_RESPONSE: "updateStoreWithSaveSessionResponse", diff --git a/src/digital-components/textbox-question/textbox-question.vue b/src/digital-components/textbox-question/textbox-question.vue index 2b14aac6b..2766e2cd9 100644 --- a/src/digital-components/textbox-question/textbox-question.vue +++ b/src/digital-components/textbox-question/textbox-question.vue @@ -76,9 +76,7 @@ export default { includeSearchIcon: Boolean, }, setup(props) { - const inputId = !props.customInputId - ? `input-${crypto.randomUUID()}` - : props.customInputId; + const inputId = !props.customInputId ? `input-${crypto.randomUUID()}` : props.customInputId; const propsClone = Object.assign({}, props); const modelValue = propsClone.modelValue; 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 bb768fa14..9aeda710c 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 @@ -53,6 +53,8 @@ import alert from "@/ux-components/alert/alert"; 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"; +import baseMixin from "@/mixins/base-mixin.js"; +import { storeActions } from "@/constants/store-actions"; export default { name: "mobile-location-modal-questions", @@ -61,7 +63,7 @@ export default { return { internalModel: this.copyModel(this.modelValue), displayInvalidZipAlert: false, - mobileFee: this.getMobileFee(), + mobileFee: "" }; }, props: { @@ -88,6 +90,9 @@ export default { alertNonServiceableZipWidgetName: String, alertInvalidZipWidgetName: String, }, + async mounted() { + this.mobileFee = await this.getMobileFee(); + }, computed: { mobileFeeText() { const cmsContentText = this.getCmsContent("MobileFeeDisclaimerWidget", "Text"); @@ -142,10 +147,24 @@ export default { isZipServiceableInShop: modelToCopy.isZipServiceableInShop, }; }, + + async getMobileFee() { + // Get the Mobile Fee Part + const mobileFeePart = await baseMixin.methods.dispatchStoreAction( + storeActions.GET_MOBILE_FEE_PART, + null, + false + ); + + // Get the Mobile Fee Part Price + const pricingResults = await baseMixin.methods.dispatchStoreAction( + storeActions.PRICE_ORDER_ITEMS, + [ mobileFeePart.data ], + false + ); + + return await baseMixin.methods.getTotalLineItemPrice(pricingResults[0]); - getMobileFee() { - // TODO: Call new service endpoint to get the Mobile Fee price - return "34.99"; }, openModal() { diff --git a/src/store/index.js b/src/store/index.js index 93a3e5a25..10cf7d797 100644 --- a/src/store/index.js +++ b/src/store/index.js @@ -907,6 +907,13 @@ export const actions = { }); }, + getMobileFeePart(context) { + return globalMethods.callMockHttpClient({ + method: endpoints.GetMobileFeePart.method, + endpoint: "https://run.mocky.io/v3/795de4cb-d014-48b4-9338-dab33261adce", //TODO: Remove Mocky Endpoint + }); + }, + getSupportingItems(context) { const glassPartsArray = context.getters.lineItems.glassParts ?? []; const carId = context.getters.vehicle.carId; From 023a521ec11c834f386151032916ad7c3389fed5 Mon Sep 17 00:00:00 2001 From: Leah Schumann Date: Mon, 20 Feb 2023 13:14:51 -0500 Subject: [PATCH 106/141] Now retrieving the actual mobile fee but we're mocking the part call --- src/constants/endpoints.js | 2 +- .../mobile-location-modal-questions.vue | 9 ++++----- src/store/index.js | 2 +- 3 files changed, 6 insertions(+), 7 deletions(-) diff --git a/src/constants/endpoints.js b/src/constants/endpoints.js index 19019477b..6b1e69609 100644 --- a/src/constants/endpoints.js +++ b/src/constants/endpoints.js @@ -70,7 +70,7 @@ const endpoints = { url: "/parts/api/v1/parts/rain-defense", method: "GET", }, - GetMobileFeePart: { + GetMobileFeePart: { url: "/parts/api/v1/parts/mobile-fee", method: "GET", }, 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 9aeda710c..d1aa4dd4b 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 @@ -63,7 +63,7 @@ export default { return { internalModel: this.copyModel(this.modelValue), displayInvalidZipAlert: false, - mobileFee: "" + mobileFee: "", }; }, props: { @@ -147,24 +147,23 @@ export default { isZipServiceableInShop: modelToCopy.isZipServiceableInShop, }; }, - + async getMobileFee() { // Get the Mobile Fee Part const mobileFeePart = await baseMixin.methods.dispatchStoreAction( storeActions.GET_MOBILE_FEE_PART, - null, + null, false ); // Get the Mobile Fee Part Price const pricingResults = await baseMixin.methods.dispatchStoreAction( storeActions.PRICE_ORDER_ITEMS, - [ mobileFeePart.data ], + [mobileFeePart.data], false ); return await baseMixin.methods.getTotalLineItemPrice(pricingResults[0]); - }, openModal() { diff --git a/src/store/index.js b/src/store/index.js index 10cf7d797..5f4d7c1f5 100644 --- a/src/store/index.js +++ b/src/store/index.js @@ -912,7 +912,7 @@ export const actions = { method: endpoints.GetMobileFeePart.method, endpoint: "https://run.mocky.io/v3/795de4cb-d014-48b4-9338-dab33261adce", //TODO: Remove Mocky Endpoint }); - }, + }, getSupportingItems(context) { const glassPartsArray = context.getters.lineItems.glassParts ?? []; From c533cc4357eb751699d0c780df1c8ebbe6a20155 Mon Sep 17 00:00:00 2001 From: Leah Schumann Date: Tue, 21 Feb 2023 14:18:41 -0500 Subject: [PATCH 107/141] Added tests to verify that the footer-button-event emit is only fired when the form is valid --- src/digital-components/modal/modal.spec.js | 87 +++++++++++++++++++--- src/digital-components/modal/modal.vue | 4 +- 2 files changed, 78 insertions(+), 13 deletions(-) diff --git a/src/digital-components/modal/modal.spec.js b/src/digital-components/modal/modal.spec.js index 7ed8fff12..0ce53b761 100644 --- a/src/digital-components/modal/modal.spec.js +++ b/src/digital-components/modal/modal.spec.js @@ -1,6 +1,21 @@ +const veeValidate = require("vee-validate"); +jest.mock("vee-validate", () => ({ + useForm: jest.fn(), + useIsFormTouched: jest.fn(), + useIsFormDirty: jest.fn(), + useIsFormValid: jest.fn() +})); + + + + + +const mockValidate = (returnValue) => jest.fn(async () => Promise.resolve({ valid: returnValue })); + import { shallowMount } from "@vue/test-utils"; import Modal from "./modal"; import crypto from "crypto"; +import { useForm, useIsFormDirty, useIsFormTouched, useIsFormValid } from "vee-validate" const modalId = "modal-one"; const footerButtonText = "Sample footer text here."; @@ -8,18 +23,9 @@ const headerText = "Sample header text here."; global.crypto = crypto; -describe("modal.vue", () => { - it("Should display footer button text when footerButtonText is defined", async () => { - const wrapper = shallowMount(Modal, { - props: { - modalId: modalId, - footerButtonText: footerButtonText, - }, - attachTo: document.body, - }); - expect(wrapper.html()).toEqual(expect.stringContaining(footerButtonText)); - }); + +describe("modal.vue", () => { it("Should display modal header text when headerText is defined", async () => { const wrapper = shallowMount(Modal, { props: { @@ -31,4 +37,63 @@ describe("modal.vue", () => { }); expect(wrapper.html()).toEqual(expect.stringContaining(headerText)); }); + + it("Should display footer button text when footerButtonText is defined", async () => { + const wrapper = shallowMount(Modal, { + props: { + modalId: modalId, + footerButtonText: footerButtonText, + }, + attachTo: document.body, + }); + expect(wrapper.html()).toEqual(expect.stringContaining(footerButtonText)); + }); + + it("Should emit 'footer-button-event' if the form is valid", async () => { + useForm.mockReturnValue({ + validate: mockValidate(true) + }) + + const resetButtonStyle = jest.fn(); + const wrapper = shallowMount(Modal, { + props: { + modalId: modalId, + footerButtonText: footerButtonText, + headerText: headerText, + }, + attachTo: document.body, + }); + wrapper.vm.resetButtonStyle = resetButtonStyle; + + const buttonMain = wrapper.findComponent({ ref: "buttonMain" }); + await buttonMain.trigger("click-event"); + + expect(wrapper.emitted("footer-button-event")).toBeTruthy(); + + }); + + it("Should not emit 'footer-button-event' if the form is not valid", async () => { + useForm.mockReturnValue({ + validate: mockValidate(false) + }) + + const resetButtonStyle = jest.fn(); + const wrapper = shallowMount(Modal, { + props: { + modalId: modalId, + footerButtonText: footerButtonText, + headerText: headerText, + }, + attachTo: document.body, + }); + wrapper.vm.resetButtonStyle = resetButtonStyle; + + const buttonMain = wrapper.findComponent({ ref: "buttonMain" }); + await buttonMain.trigger("click-event"); + + expect(wrapper.emitted("footer-button-event")).toBeFalsy(); + + }); + }); + diff --git a/src/digital-components/modal/modal.vue b/src/digital-components/modal/modal.vue index 0034b5155..75e6ae665 100644 --- a/src/digital-components/modal/modal.vue +++ b/src/digital-components/modal/modal.vue @@ -74,8 +74,8 @@ export default { }; }, methods: { - async validateAndEmit() { - const validationResult = await this.form.validate(); + async validateAndEmit() { + const validationResult = await this.form.validate(); if (validationResult.valid) { this.$emit("footer-button-event"); } From 7af8d9d26edab200411007e3b85d87c7fef765c2 Mon Sep 17 00:00:00 2001 From: Leah Schumann Date: Wed, 22 Feb 2023 09:20:58 -0500 Subject: [PATCH 108/141] CSR-1088 Added unit tests for modal component --- src/digital-components/modal/modal.spec.js | 42 +++++++--------------- src/digital-components/modal/modal.vue | 4 +-- 2 files changed, 15 insertions(+), 31 deletions(-) diff --git a/src/digital-components/modal/modal.spec.js b/src/digital-components/modal/modal.spec.js index 0ce53b761..3d6375094 100644 --- a/src/digital-components/modal/modal.spec.js +++ b/src/digital-components/modal/modal.spec.js @@ -1,37 +1,28 @@ -const veeValidate = require("vee-validate"); jest.mock("vee-validate", () => ({ useForm: jest.fn(), useIsFormTouched: jest.fn(), useIsFormDirty: jest.fn(), - useIsFormValid: jest.fn() + useIsFormValid: jest.fn(), })); - - - - const mockValidate = (returnValue) => jest.fn(async () => Promise.resolve({ valid: returnValue })); -import { shallowMount } from "@vue/test-utils"; +import { mount, shallowMount } from "@vue/test-utils"; import Modal from "./modal"; import crypto from "crypto"; -import { useForm, useIsFormDirty, useIsFormTouched, useIsFormValid } from "vee-validate" +import { useForm, useIsFormDirty, useIsFormTouched, useIsFormValid } from "vee-validate"; -const modalId = "modal-one"; const footerButtonText = "Sample footer text here."; const headerText = "Sample header text here."; global.crypto = crypto; - - describe("modal.vue", () => { it("Should display modal header text when headerText is defined", async () => { const wrapper = shallowMount(Modal, { props: { - modalId: modalId, - footerButtonText: footerButtonText, headerText: headerText, + footerButtonText: footerButtonText, }, attachTo: document.body, }); @@ -41,7 +32,6 @@ describe("modal.vue", () => { it("Should display footer button text when footerButtonText is defined", async () => { const wrapper = shallowMount(Modal, { props: { - modalId: modalId, footerButtonText: footerButtonText, }, attachTo: document.body, @@ -51,49 +41,43 @@ describe("modal.vue", () => { it("Should emit 'footer-button-event' if the form is valid", async () => { useForm.mockReturnValue({ - validate: mockValidate(true) - }) - + validate: mockValidate(true), + }); + const resetButtonStyle = jest.fn(); const wrapper = shallowMount(Modal, { props: { - modalId: modalId, footerButtonText: footerButtonText, headerText: headerText, }, attachTo: document.body, - }); - wrapper.vm.resetButtonStyle = resetButtonStyle; + }); + wrapper.vm.resetButtonStyle = resetButtonStyle; const buttonMain = wrapper.findComponent({ ref: "buttonMain" }); await buttonMain.trigger("click-event"); expect(wrapper.emitted("footer-button-event")).toBeTruthy(); - }); - it("Should not emit 'footer-button-event' if the form is not valid", async () => { + it("Should not emit 'footer-button-event' if the form is not valid", async () => { useForm.mockReturnValue({ - validate: mockValidate(false) - }) + validate: mockValidate(false), + }); const resetButtonStyle = jest.fn(); const wrapper = shallowMount(Modal, { props: { - modalId: modalId, footerButtonText: footerButtonText, headerText: headerText, }, attachTo: document.body, - }); + }); wrapper.vm.resetButtonStyle = resetButtonStyle; const buttonMain = wrapper.findComponent({ ref: "buttonMain" }); await buttonMain.trigger("click-event"); expect(wrapper.emitted("footer-button-event")).toBeFalsy(); - }); - }); - diff --git a/src/digital-components/modal/modal.vue b/src/digital-components/modal/modal.vue index 75e6ae665..0034b5155 100644 --- a/src/digital-components/modal/modal.vue +++ b/src/digital-components/modal/modal.vue @@ -74,8 +74,8 @@ export default { }; }, methods: { - async validateAndEmit() { - const validationResult = await this.form.validate(); + async validateAndEmit() { + const validationResult = await this.form.validate(); if (validationResult.valid) { this.$emit("footer-button-event"); } From 96fec12f94517cd11771e5267031fb9899ce718d Mon Sep 17 00:00:00 2001 From: Leah Schumann Date: Wed, 22 Feb 2023 11:39:13 -0500 Subject: [PATCH 109/141] Updated Textbox Question and Dropdown Question unit tests --- .../dropdown-question.spec.js | 22 +-- src/digital-components/modal/modal.spec.js | 137 +++++++++++++++++- .../textbox-question/textbox-question.spec.js | 24 +-- 3 files changed, 137 insertions(+), 46 deletions(-) diff --git a/src/digital-components/dropdown-question/dropdown-question.spec.js b/src/digital-components/dropdown-question/dropdown-question.spec.js index a606e3d19..654709926 100644 --- a/src/digital-components/dropdown-question/dropdown-question.spec.js +++ b/src/digital-components/dropdown-question/dropdown-question.spec.js @@ -1,5 +1,6 @@ import { shallowMount } from "@vue/test-utils"; import dropdownQuestion from "./dropdown-question"; +import crypto from "crypto"; // Mock CMS content const questionText = "Question Text"; @@ -11,6 +12,8 @@ const mockMixin = { }, }; +global.crypto = crypto; + // TODO: Remove the following from dropdown-question.vue -> :class="(errors && errors.length) || hasError ? 'has-error' : ''" // It is not being used. describe("dropdownQuestion.vue", () => { @@ -46,23 +49,6 @@ describe("dropdownQuestion.vue", () => { expect(label.text()).toContain(questionText); }); - it("Should return input id as the id of the select field", async () => { - // Arrange - const wrapper = shallowMount(dropdownQuestion, { - propsData: { - inputId: "input ID", - options: {}, - }, - mixins: [mockMixin], - }); - - // Act - const select = wrapper.find("select"); - - // Assert - expect(select.attributes().id).toEqual("input ID"); - }); - it("Should render the 'questionText' data value as the aria-label attribute.", async () => { // Arrange const wrapper = shallowMount(dropdownQuestion, { @@ -118,7 +104,7 @@ describe("dropdownQuestion.vue", () => { const wrapper = shallowMount(dropdownQuestion, { propsData: { options: {}, - modelValue: 0, + modelValue: "0", }, mixins: [mockMixin], }); diff --git a/src/digital-components/modal/modal.spec.js b/src/digital-components/modal/modal.spec.js index 3d6375094..ace7d49a5 100644 --- a/src/digital-components/modal/modal.spec.js +++ b/src/digital-components/modal/modal.spec.js @@ -7,10 +7,11 @@ jest.mock("vee-validate", () => ({ const mockValidate = (returnValue) => jest.fn(async () => Promise.resolve({ valid: returnValue })); -import { mount, shallowMount } from "@vue/test-utils"; -import Modal from "./modal"; +import { shallowMount } from "@vue/test-utils"; +import modal from "./modal"; import crypto from "crypto"; import { useForm, useIsFormDirty, useIsFormTouched, useIsFormValid } from "vee-validate"; +import { Modal } from "bootstrap"; const footerButtonText = "Sample footer text here."; const headerText = "Sample header text here."; @@ -19,33 +20,40 @@ global.crypto = crypto; describe("modal.vue", () => { it("Should display modal header text when headerText is defined", async () => { - const wrapper = shallowMount(Modal, { + // Arrange / Act + const wrapper = shallowMount(modal, { props: { headerText: headerText, footerButtonText: footerButtonText, }, attachTo: document.body, }); + + // Assert expect(wrapper.html()).toEqual(expect.stringContaining(headerText)); }); it("Should display footer button text when footerButtonText is defined", async () => { - const wrapper = shallowMount(Modal, { + // Arrange / Act + const wrapper = shallowMount(modal, { props: { footerButtonText: footerButtonText, }, attachTo: document.body, }); + + // Assert expect(wrapper.html()).toEqual(expect.stringContaining(footerButtonText)); }); it("Should emit 'footer-button-event' if the form is valid", async () => { + // Arrange useForm.mockReturnValue({ validate: mockValidate(true), }); const resetButtonStyle = jest.fn(); - const wrapper = shallowMount(Modal, { + const wrapper = shallowMount(modal, { props: { footerButtonText: footerButtonText, headerText: headerText, @@ -54,19 +62,22 @@ describe("modal.vue", () => { }); wrapper.vm.resetButtonStyle = resetButtonStyle; + // Act const buttonMain = wrapper.findComponent({ ref: "buttonMain" }); await buttonMain.trigger("click-event"); + // Assert expect(wrapper.emitted("footer-button-event")).toBeTruthy(); }); - it("Should not emit 'footer-button-event' if the form is not valid", async () => { + it("Should not emit 'footer-button-event' if the form is invalid", async () => { + // Arrange useForm.mockReturnValue({ validate: mockValidate(false), }); const resetButtonStyle = jest.fn(); - const wrapper = shallowMount(Modal, { + const wrapper = shallowMount(modal, { props: { footerButtonText: footerButtonText, headerText: headerText, @@ -75,9 +86,121 @@ describe("modal.vue", () => { }); wrapper.vm.resetButtonStyle = resetButtonStyle; + // Act const buttonMain = wrapper.findComponent({ ref: "buttonMain" }); await buttonMain.trigger("click-event"); + // Assert expect(wrapper.emitted("footer-button-event")).toBeFalsy(); }); + + it("Should have a disabled footer button when the form has not been touched", async () => { + // Arrange / Act + useForm.mockReturnValue({ + validate: mockValidate(false), + }); + + useIsFormTouched.mockReturnValue(false); + + const resetButtonStyle = jest.fn(); + const wrapper = shallowMount(modal, { + props: { + footerButtonText: footerButtonText, + headerText: headerText, + }, + attachTo: document.body, + }); + wrapper.vm.resetButtonStyle = resetButtonStyle; + + // Assert + expect(wrapper.vm.isFooterButtonDisabled).toBe(true); + + }); + + it("Should have a disabled footer button when the form is invalid", async () => { + // Arrange / Act + useForm.mockReturnValue({ + validate: mockValidate(false), + }); + + useIsFormTouched.mockReturnValue(true); + useIsFormDirty.mockReturnValue(true); + useIsFormValid.mockReturnValue(false); + + const resetButtonStyle = jest.fn(); + const wrapper = shallowMount(modal, { + props: { + footerButtonText: footerButtonText, + headerText: headerText, + }, + attachTo: document.body, + }); + wrapper.vm.resetButtonStyle = resetButtonStyle; + + // Assert + expect(wrapper.vm.isFooterButtonDisabled).toBe(true); + + }); + + it("Should call bootstrap Modal method 'show' when calling 'openModal'", async () => { + // Arrange + useForm.mockReturnValue({ + validate: mockValidate(false), + }); + + useIsFormDirty.mockReturnValue(true); + useIsFormValid.mockReturnValue(true); + + const showMock = jest + .spyOn(Modal.prototype, "show"); + + const resetButtonStyle = jest.fn(); + const wrapper = shallowMount(modal, { + props: { + footerButtonText: footerButtonText, + headerText: headerText, + }, + attachTo: document.body, + }); + wrapper.vm.resetButtonStyle = resetButtonStyle; + + // Act + wrapper.vm.openModal(); + + // Assert + expect(showMock).toHaveBeenCalled(); + + }); + + it("Should call bootstrap Modal method 'hide' when calling 'closeModal'", async () => { + // Arrange + useForm.mockReturnValue({ + validate: mockValidate(false), + }); + + useIsFormDirty.mockReturnValue(true); + useIsFormValid.mockReturnValue(true); + + const hideMock = jest + .spyOn(Modal.prototype, "hide"); + + const resetButtonStyle = jest.fn(); + const wrapper = shallowMount(modal, { + props: { + footerButtonText: footerButtonText, + headerText: headerText, + }, + attachTo: document.body, + }); + wrapper.vm.resetButtonStyle = resetButtonStyle; + + // Act + wrapper.vm.openModal(); + wrapper.vm.closeModal(); + + // Assert + expect(hideMock).toHaveBeenCalled(); + + }); + }); diff --git a/src/digital-components/textbox-question/textbox-question.spec.js b/src/digital-components/textbox-question/textbox-question.spec.js index 694142fb9..dba54d544 100644 --- a/src/digital-components/textbox-question/textbox-question.spec.js +++ b/src/digital-components/textbox-question/textbox-question.spec.js @@ -1,5 +1,6 @@ import { shallowMount } from "@vue/test-utils"; import textboxQuestion from "./textbox-question"; +import crypto from "crypto"; // Mock CMS content const questionText = "Question Text"; @@ -12,6 +13,8 @@ const mockMixin = { }; const maska = jest.fn(); +global.crypto = crypto; + describe("textboxQuestion.vue", () => { it("Should render a text input", async () => { // Arrange @@ -73,27 +76,6 @@ describe("textboxQuestion.vue", () => { expect(paragraph.attributes("class")).toContain("form-control"); }); - it("Should return input id as the id of the input field", async () => { - // Arrange - const wrapper = shallowMount(textboxQuestion, { - global: { - directives: { - maska: maska, - }, - }, - propsData: { - inputId: "input ID", - }, - mixins: [mockMixin], - }); - - // Act - const input = wrapper.find("input"); - - // Assert - expect(input.attributes().id).toEqual("input ID"); - }); - it("Should render the 'questionText' data value as the aria-label attribute.", async () => { // Arrange const wrapper = shallowMount(textboxQuestion, { From 8af938177177fac54a5c9b21d24d5685b65f2553 Mon Sep 17 00:00:00 2001 From: Matt Caimi Date: Wed, 22 Feb 2023 12:49:05 -0500 Subject: [PATCH 110/141] CSR-1012 unit testing for service-zip-modal-question --- .../service-zip-modal-question.spec.js | 272 +++++++++++++++++- .../service-zip-modal-question.vue | 11 +- .../service-zip-question.vue | 0 3 files changed, 270 insertions(+), 13 deletions(-) rename src/layouts/service-location/service-zip-modal-question/{ => service-zip-question}/service-zip-question.vue (100%) 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 index f0c022ba8..4a0dec045 100644 --- 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 @@ -1,4 +1,4 @@ -import { mount } from "@vue/test-utils"; +import { mount, shallowMount } from "@vue/test-utils"; import serviceZipModalQuestion from "./service-zip-modal-question"; import crypto from "crypto"; global.crypto = crypto; @@ -9,6 +9,12 @@ jest.mock("@/digital-components/textbox-question/textbox-question", () => ({ }), })); +jest.mock("@/digital-components/modal/modal", () => ({ + methods: { + closeModal: jest.fn(), + }, +})); + const linkWidgetName = "linkWidgetName"; const modalWidgetName = "modalWidgetName"; const textboxQuestionWidgetName = "textboxQuestionWidgetName"; @@ -44,41 +50,287 @@ const mockMixin = { }), getZipCodeData: jest.fn((zip) => { + if (zip === "43235") { + return { + containsMilitaryBase: false, + isServiceable: true, + isValid: true, + state: "OH", + zipCodeCtu: "01820", + }; + } + + if (zip === "61606") { + return { + containsMilitaryBase: false, + isServiceable: true, + isValid: true, + state: "IL", + zipCodeCtu: "01526", + }; + } + return { - isValid: true, - state: "OH", - isServiceable: true, + containsMilitaryBase: false, + isServiceable: false, + isValid: false, + state: null, + zipCodeCtu: null, }; }), }, }; describe("service-zip-modal-question.vue", () => { - it("Should display text from textboxQuestionWidget", async () => { + it("Initial state on load with no existing location info", async () => { + let serviceZipCodeQuestion = { + state: "", + zipCode: "", + isServiceable: undefined, + }; + + // Arrange const wrapper = mount(serviceZipModalQuestion, { mixins: [mockMixin], props: { + modelValue: serviceZipCodeQuestion, linkWidgetName: linkWidgetName, modalWidgetName: modalWidgetName, textboxQuestionWidgetName: textboxQuestionWidgetName, }, attachTo: document.body, }); - expect(wrapper.html()).toEqual( - expect.stringContaining(mockTextboxQuestionCmsContent["QuestionText"]) - ); + + // Assert + expect(wrapper.html()).toEqual(expect.stringContaining(mockLinkCmsContent["BodyText"])); }); - it("Should display footer text from modalWidget", async () => { + it("Initial state on load with existing location info", async () => { + // Arrange + let serviceZipCodeQuestion = { + state: "OH", + zipCode: "43235", + isServiceable: true, + }; + const wrapper = mount(serviceZipModalQuestion, { mixins: [mockMixin], props: { + modelValue: serviceZipCodeQuestion, linkWidgetName: linkWidgetName, modalWidgetName: modalWidgetName, textboxQuestionWidgetName: textboxQuestionWidgetName, }, attachTo: document.body, }); - expect(wrapper.html()).toEqual(expect.stringContaining(mockModalCmsContent["FooterText"])); + + // Assert + expect(wrapper.html()).not.toEqual(expect.stringContaining(mockLinkCmsContent["BodyText"])); + }); + + it("Should emit update:modelValue on setZipCode for a valid, serviceable zip", async () => { + // Arrange + let serviceZipCodeQuestion = { + state: "IL", + zipCode: "61606", + isServiceable: true, + }; + + const zip = "43235"; + + const wrapper = mount(serviceZipModalQuestion, { + mixins: [mockMixin], + props: { + modelValue: serviceZipCodeQuestion, + linkWidgetName: linkWidgetName, + modalWidgetName: modalWidgetName, + textboxQuestionWidgetName: textboxQuestionWidgetName, + }, + attachTo: document.body, + }); + + // Act + wrapper.vm.internalModel.zipCode = zip; + await wrapper.vm.setZipCode(); + + let expectedEmit = [[{ isServiceable: true, state: "OH", zipCode: "43235" }]]; + + // Assert + expect(wrapper.emitted("update:modelValue")).toEqual(expectedEmit); + }); + + it("Should not emit update:modelValue on setZipCode for an invalid zip", async () => { + // Arrange + let serviceZipCodeQuestion = { + state: "IL", + zipCode: "61606", + isServiceable: true, + }; + + const zip = ""; + + const wrapper = mount(serviceZipModalQuestion, { + mixins: [mockMixin], + props: { + modelValue: serviceZipCodeQuestion, + linkWidgetName: linkWidgetName, + modalWidgetName: modalWidgetName, + textboxQuestionWidgetName: textboxQuestionWidgetName, + }, + attachTo: document.body, + }); + + // Act + wrapper.vm.internalModel.zipCode = zip; + await wrapper.vm.setZipCode(); + + // Assert + expect(wrapper.emitted("update:modelValue")).not.toBeTruthy(); + }); + + it("Should emit service-zip-updated on setZipCode for a valid, serviceable zip", async () => { + // Arrange + let serviceZipCodeQuestion = { + state: "IL", + zipCode: "61606", + isServiceable: true, + }; + + const zip = "43235"; + + const wrapper = mount(serviceZipModalQuestion, { + mixins: [mockMixin], + props: { + modelValue: serviceZipCodeQuestion, + linkWidgetName: linkWidgetName, + modalWidgetName: modalWidgetName, + textboxQuestionWidgetName: textboxQuestionWidgetName, + }, + attachTo: document.body, + }); + + // Act + wrapper.vm.internalModel.zipCode = zip; + await wrapper.vm.setZipCode(); + + // Assert + expect(wrapper.emitted("service-zip-updated")).toBeTruthy(); + }); + + it("Should not emit service-zip-updated on setZipCode for an invalid zip", async () => { + // Arrange + let serviceZipCodeQuestion = { + state: "IL", + zipCode: "61606", + isServiceable: true, + }; + + const zip = ""; + + const wrapper = mount(serviceZipModalQuestion, { + mixins: [mockMixin], + props: { + modelValue: serviceZipCodeQuestion, + linkWidgetName: linkWidgetName, + modalWidgetName: modalWidgetName, + textboxQuestionWidgetName: textboxQuestionWidgetName, + }, + attachTo: document.body, + }); + + // Act + wrapper.vm.internalModel.zipCode = zip; + await wrapper.vm.setZipCode(); + + // Assert + expect(wrapper.emitted("service-zip-updated")).not.toBeTruthy(); + }); + + it("Should display invalid zip alerts for invalid ip inputs", async () => { + // Arrange + let serviceZipCodeQuestion = { + state: "IL", + zipCode: "61606", + isServiceable: true, + }; + + const zip = "11111"; + + const wrapper = mount(serviceZipModalQuestion, { + mixins: [mockMixin], + props: { + modelValue: serviceZipCodeQuestion, + linkWidgetName: linkWidgetName, + modalWidgetName: modalWidgetName, + textboxQuestionWidgetName: textboxQuestionWidgetName, + }, + attachTo: document.body, + }); + + // Act + wrapper.vm.internalModel.zipCode = zip; + await wrapper.vm.setZipCode(); + + // Assert + expect(wrapper.vm.displayInvalidZipAlert).toBe(true); + }); + + it("Should reset all alerts on onModalClosed", async () => { + // Arrange + let serviceZipCodeQuestion = { + state: "IL", + zipCode: "61606", + isServiceable: true, + }; + + const zip = ""; + + const wrapper = mount(serviceZipModalQuestion, { + mixins: [mockMixin], + props: { + modelValue: serviceZipCodeQuestion, + linkWidgetName: linkWidgetName, + modalWidgetName: modalWidgetName, + textboxQuestionWidgetName: textboxQuestionWidgetName, + }, + attachTo: document.body, + }); + + // Act + wrapper.vm.internalModel.zipCode = zip; + await wrapper.vm.setZipCode(); + wrapper.vm.onModalClosed(); + + // Assert + expect(wrapper.vm.displayInvalidZipAlert).toBe(false); + }); + + it("Should prepopulate the zip on onModalOpened", async () => { + // Arrange + let serviceZipCodeQuestion = { + state: "IL", + zipCode: "61606", + isServiceable: true, + }; + + const zip = "123"; + + const wrapper = mount(serviceZipModalQuestion, { + mixins: [mockMixin], + props: { + modelValue: serviceZipCodeQuestion, + linkWidgetName: linkWidgetName, + modalWidgetName: modalWidgetName, + textboxQuestionWidgetName: textboxQuestionWidgetName, + }, + attachTo: document.body, + }); + + // Act + wrapper.vm.internalModel.zipCode = zip; + wrapper.vm.onModalOpened(); + + // Assert + expect(wrapper.vm.internalModel.zipCode).toEqual("61606"); }); }); 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 4ca6990b3..ef8e00c1d 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 @@ -35,7 +35,7 @@ From acc8e791af1b2dbeb36c55d101ddcf05d55db1b3 Mon Sep 17 00:00:00 2001 From: Leah Schumann Date: Mon, 6 Mar 2023 10:10:58 -0500 Subject: [PATCH 138/141] fixed unit tests --- .../mobile-location-modal-questions.spec.js | 2 - .../mobile-location-modal-questions.vue | 11 +-- .../service-location/service-location.spec.js | 67 +++++++++++++------ .../service-location/service-location.vue | 11 ++- 4 files changed, 58 insertions(+), 33 deletions(-) diff --git a/src/layouts/service-location/mobile-location-modal-questions/mobile-location-modal-questions.spec.js b/src/layouts/service-location/mobile-location-modal-questions/mobile-location-modal-questions.spec.js index f7a2238c8..d90f68b1f 100644 --- a/src/layouts/service-location/mobile-location-modal-questions/mobile-location-modal-questions.spec.js +++ b/src/layouts/service-location/mobile-location-modal-questions/mobile-location-modal-questions.spec.js @@ -332,8 +332,6 @@ describe("mobile-location-modal-questions.vue", () => { expect(wrapper.vm.internalModel.addressQuestions.streetAddress).toEqual(""); expect(wrapper.vm.internalModel.addressQuestions.apartmentNumberOrBusinessName).toEqual(""); expect(wrapper.vm.internalModel.addressQuestions.city).toEqual(""); - expect(wrapper.vm.internalModel.addressQuestions.state).toEqual(""); - expect(wrapper.vm.internalModel.addressQuestions.zipCode).toEqual(""); expect(wrapper.vm.internalModel.isVehicleProtected).toEqual(null); }); }); 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 ecd1345f0..6aceb6262 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 @@ -63,7 +63,6 @@ export default { return { internalModel: deepClone(this.modelValue), displayInvalidZipAlert: false, - modalName: "MobileLocationModalWidget", }; }, props: { @@ -108,6 +107,9 @@ export default { } return this.getCmsContent(this.linkWidgetName, "BodyText"); }, + modalName() { + return "MobileLocationModalWidget"; + }, modalHeaderText() { return this.getCmsContent(this.modalWidgetName, "HeaderText"); }, @@ -115,9 +117,6 @@ export default { const cmsContentText = this.getCmsContent("MobileFeeDisclaimerWidget", "Text"); return cmsContentText.replaceAll("{custom:mobileFee}", this.mobileFee); }, - modalFooterText() { - return this.getCmsContent(this.modalWidgetName, "FooterText"); - }, mobileFee() { if (!this.modelValue.mobileFeePart) { return 0; @@ -127,7 +126,11 @@ export default { this.modelValue.mobileFeePart.sellingPrice + this.modelValue.mobileFeePart.kitPrice ); + }, + modalFooterText() { + return this.getCmsContent(this.modalWidgetName, "FooterText"); }, + addressModel: { get: function () { return this.modelValue.addressQuestions; diff --git a/src/layouts/service-location/service-location.spec.js b/src/layouts/service-location/service-location.spec.js index 6e09b6fa3..d60de2603 100644 --- a/src/layouts/service-location/service-location.spec.js +++ b/src/layouts/service-location/service-location.spec.js @@ -177,6 +177,12 @@ describe("service-location.vue", () => { wrapper.vm.$refs.mobileLocationModalQuestions.resetComponent = jest.fn(); wrapper.vm.$refs.serviceZipCodeQuestion.resetMobileFeePart = jest.fn(); + const newServiceZipCodeQuestion = { + zipCode: "61606", + state: "IL", + isServiceable: true, + }; + const mobileLocationQuestions = { addressQuestions: { streetAddress: "5555 Sulgrave Dr", @@ -186,8 +192,7 @@ describe("service-location.vue", () => { zipCode: "43054", }, isVehicleProtected: true, - serviceZipCode: "43054", - mobileFee: 0, + mobileFeePart: null, }; wrapper.vm.mobileLocationQuestions = mobileLocationQuestions; @@ -196,11 +201,11 @@ describe("service-location.vue", () => { streetAddress: "", apartmentNumberOrBusinessName: "", city: "", - state: "", - zipCode: "", + state: "IL", + zipCode: "61606", }, isVehicleProtected: null, - serviceZipCode: "43081", + mobileFeePart: null }; const serviceZipCodeComponent = wrapper.findComponent({ @@ -208,7 +213,7 @@ describe("service-location.vue", () => { }); // Act - serviceZipCodeComponent.vm.$emit("updated-service-zip-code", "43081"); + serviceZipCodeComponent.vm.$emit("update:modelValue", newServiceZipCodeQuestion); // Assert expect(wrapper.vm.mobileLocationQuestions).toStrictEqual(newMobileLocationQuestions); @@ -230,7 +235,7 @@ describe("service-location.vue", () => { zipCode: "", }, isVehicleProtected: null, - serviceZipCode: "43081", + mobileFeePart: null, }; wrapper.vm.mobileLocationQuestions = mobileLocationQuestions; @@ -243,8 +248,7 @@ describe("service-location.vue", () => { zipCode: "43054", }, isVehicleProtected: true, - serviceZipCode: "43054", - mobileFee: 0, + mobileFeePart: null, }; const mobileLocationComponent = wrapper.findComponent({ @@ -264,29 +268,50 @@ describe("service-location.vue", () => { wrapper.vm.$refs.mobileLocationModalQuestions.resetComponent = jest.fn(); wrapper.vm.$refs.serviceZipCodeQuestion.resetMobileFeePart = jest.fn(); - const serviceZipCodeInfo = { - state: "OH", - zipCode: "43054", - isServiceable: true, + const mobileLocationQuestions = { + addressQuestions: { + streetAddress: "", + apartmentNumberOrBusinessName: "", + city: "", + state: "", + zipCode: "", + }, + isVehicleProtected: null, + mobileFeePart: null, }; + wrapper.vm.mobileLocationQuestions = mobileLocationQuestions; - const newServiceZipCodeInfo = { - state: "OH", - zipCode: "43081", - isServiceable: true, + const newMobileLocationQuestions = { + addressQuestions: { + streetAddress: "5555 Rustic Dr", + apartmentNumberOrBusinessName: "Apt 1", + city: "Westerville", + state: "OH", + zipCode: "43081", + }, + isVehicleProtected: true, + mobileFeePart: null, }; - wrapper.vm.serviceZipCodeQuestion = serviceZipCodeInfo; const mobileLocationComponent = wrapper.findComponent({ ref: "mobileLocationModalQuestions", }); - // Act - mobileLocationComponent.vm.$emit("updated-zip-code", { + wrapper.vm.serviceZipCodeQuestion = { + zipCode: "61606", + state: "IL", + isServiceable: true, + }; + + const newServiceZipCodeInfo = { state: "OH", zipCode: "43081", isServiceable: true, - }); + }; + + + // Act + mobileLocationComponent.vm.$emit("update:modelValue", newMobileLocationQuestions); // Assert expect(wrapper.vm.serviceZipCodeQuestion).toStrictEqual(newServiceZipCodeInfo); diff --git a/src/layouts/service-location/service-location.vue b/src/layouts/service-location/service-location.vue index 1be600ed8..8e7e22833 100644 --- a/src/layouts/service-location/service-location.vue +++ b/src/layouts/service-location/service-location.vue @@ -128,12 +128,11 @@ export default { }, methods: { arePagePrerequisitesValid() { - return true; - // return ( - // store.getters.lineItems.supportingItems !== null && - // store.getters.order.serviceLocation.zipCode !== null && - // store.getters.payment.isInsurance !== null - // ); + return ( + store.getters.lineItems.supportingItems !== null && + store.getters.order.serviceLocation.zipCode !== null && + store.getters.payment.isInsurance !== null + ); }, setData(mobileFeePart) { if (mobileFeePart) { From 9023c7d215ed89099462582b0ac144a5c4b3fc42 Mon Sep 17 00:00:00 2001 From: Leah Schumann Date: Mon, 6 Mar 2023 10:31:40 -0500 Subject: [PATCH 139/141] Fixed unit tests after merge --- jest.config.js | 1 + .../service-location/service-location.spec.js | 69 +++++++++++++++++++ .../service-location/service-location.vue | 17 ----- 3 files changed, 70 insertions(+), 17 deletions(-) diff --git a/jest.config.js b/jest.config.js index bfb4bf71f..4d8fd76b1 100644 --- a/jest.config.js +++ b/jest.config.js @@ -27,4 +27,5 @@ module.exports = { // Got the go ahead from Mark to temporarily lower this. Taking out initialize component made the year,make,model and style coverage drop a bit. Once unit tests for license plate lookup, vin lookup and address lookup are in the coverage should go back up to 90 }, }, + silent: true }; diff --git a/src/layouts/service-location/service-location.spec.js b/src/layouts/service-location/service-location.spec.js index d60de2603..0554f4952 100644 --- a/src/layouts/service-location/service-location.spec.js +++ b/src/layouts/service-location/service-location.spec.js @@ -43,6 +43,75 @@ jest.mock("@/store", () => ({ dispatch: jest.fn(), })); +const mockMixin = { + methods: { + getCmsContent: jest.fn((widgetName, cmsFieldName) => { + if (widgetName === linkWidgetName) { + return mockLinkCmsContent[cmsFieldName]; + } + + if (widgetName === modalWidgetName) { + return mockModalCmsContent[cmsFieldName]; + } + + if (widgetName === mobileFeeDisclaimerWidgetName) { + return mockMobileFeeDisclaimerContent[cmsFieldName]; + } + + return null; + }), + + getZipCodeData: jest.fn((zip) => { + if (zip === "43235" || zip === "55555") { + return Promise.resolve({ + containsMilitaryBase: false, + isServiceable: true, + isValid: true, + state: "OH", + zipCodeCtu: "01820", + }); + } + + return Promise.resolve({ + containsMilitaryBase: false, + isServiceable: false, + isValid: false, + state: null, + zipCodeCtu: null, + }); + }), + + dispatchStoreAction: jest.fn((actionName) => { + if (actionName === storeActions.GET_MOBILE_FEE_PART) { + return Promise.resolve({ + data: { + partNumber: "MOBILE FEE", + description: "MOBILE FEE", + partType: "FEE", + }, + }); + } + + if (actionName === storeActions.PRICE_ORDER_ITEMS_AND_SAVE_SERVER_DATA) { + return Promise.resolve([ + { + partNumber: "MOBILE FEE", + description: "MOBILE FEE", + partType: "FEE", + laborAmount: 49.99, + sellingPrice: 0, + kitPrice: 0, + }, + ]); + } + }), + + getTotalLineItemPrice: jest.fn((lineItem) => { + return 49.99; + }), + }, +}; + beforeEach(() => { store.getters = { lineItems: { diff --git a/src/layouts/service-location/service-location.vue b/src/layouts/service-location/service-location.vue index dafe9a3dd..11cf42daa 100644 --- a/src/layouts/service-location/service-location.vue +++ b/src/layouts/service-location/service-location.vue @@ -137,23 +137,6 @@ export default { this.mobileFeePart = newValue.mobileFeePart; }, }, - mobileLocationLinkPromptText() { - return this.getCmsContent("MobileLocationLinkWidget", "HeaderText"); - }, - mobileFeeDisclaimerText() { - const cmsContentText = this.getCmsContent("MobileFeeDisclaimerWidget", "Text"); - return cmsContentText.replaceAll("{custom:mobileFee}", this.mobileFee); - }, - mobileFee() { - if (!this.mobileFeePart) { - return 0; - } - return ( - this.mobileFeePart.laborAmount + - this.mobileFeePart.sellingPrice + - this.mobileFeePart.kitPrice - ); - }, }, methods: { arePagePrerequisitesValid() { From 81e71a007c89acb6a1eb183d32674eb524c273cc Mon Sep 17 00:00:00 2001 From: Leah Schumann Date: Mon, 6 Mar 2023 10:32:53 -0500 Subject: [PATCH 140/141] removed 'silent' from jest.config.js --- jest.config.js | 1 - 1 file changed, 1 deletion(-) diff --git a/jest.config.js b/jest.config.js index 4d8fd76b1..bfb4bf71f 100644 --- a/jest.config.js +++ b/jest.config.js @@ -27,5 +27,4 @@ module.exports = { // Got the go ahead from Mark to temporarily lower this. Taking out initialize component made the year,make,model and style coverage drop a bit. Once unit tests for license plate lookup, vin lookup and address lookup are in the coverage should go back up to 90 }, }, - silent: true }; From 3c73f54c74a84a9839357b2f9bb62febafdfa8d0 Mon Sep 17 00:00:00 2001 From: Matt Caimi Date: Mon, 6 Mar 2023 11:20:54 -0500 Subject: [PATCH 141/141] formatting --- .../mobile-location-modal-questions.vue | 2 +- src/layouts/service-location/service-location.spec.js | 5 ++--- 2 files changed, 3 insertions(+), 4 deletions(-) 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 9cc05c4c5..225d97e29 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 @@ -114,7 +114,7 @@ export default { this.modelValue.mobileFeePart.sellingPrice + this.modelValue.mobileFeePart.kitPrice ); - }, + }, modalFooterText() { return this.getCmsContent(this.modalWidgetName, "FooterText"); }, diff --git a/src/layouts/service-location/service-location.spec.js b/src/layouts/service-location/service-location.spec.js index 0554f4952..8f4572c95 100644 --- a/src/layouts/service-location/service-location.spec.js +++ b/src/layouts/service-location/service-location.spec.js @@ -274,7 +274,7 @@ describe("service-location.vue", () => { zipCode: "61606", }, isVehicleProtected: null, - mobileFeePart: null + mobileFeePart: null, }; const serviceZipCodeComponent = wrapper.findComponent({ @@ -371,14 +371,13 @@ describe("service-location.vue", () => { state: "IL", isServiceable: true, }; - + const newServiceZipCodeInfo = { state: "OH", zipCode: "43081", isServiceable: true, }; - // Act mobileLocationComponent.vm.$emit("update:modelValue", newMobileLocationQuestions);