From 55f49606f7bb10dae2a6831871f25fb3e2a7c9e4 Mon Sep 17 00:00:00 2001 From: Leah Schumann Date: Fri, 3 Feb 2023 16:01:43 -0500 Subject: [PATCH] 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 /> + +