Manual open of modal

src/digital-components/modal/modal.vue

@@ -2,7 +2,7 @@
     <!-- Modal -->
     <div
         class="modal fade modal-component"
-        v-on="{ 'hidden.bs.modal': resetButtonStyle, 'shown.bs.modal': onShownCallback }"
+        v-on="{ 'hidden.bs.modal': resetButtonStyle, 'shown.bs.modal': onModalOpenedCallback }"
         :id="cmsWidgetName"
         tabindex="-1"
         aria-labelledby="ModalComponentLabel"
@@ -44,12 +44,13 @@
 
 <script>
 import buttonMain from "@/ux-components/button-main/button-main";
+import { Modal } from "bootstrap";
 
 export default {
     name: "modal",
     props: {
         cmsWidgetName: String,
-        onShownCallback: {
+        onModalOpenedCallback: {
             type: Function,
         },
 
@@ -59,6 +60,15 @@ export default {
             // if undefined, footer button closes modal
         },
     },
+    data() {
+        return {
+            myModal: null,
+        }        
+    },
+    mounted() {
+        this.myModal = new Modal(document.getElementById(this.cmsWidgetName));
+        
+    },
     computed: {
         ModalHeadline() {
             return this.getCmsContent(this.cmsWidgetName, "HeaderText");
@@ -86,8 +96,11 @@ export default {
         resetButtonStyle() {
             this.$refs.buttonMain.resetButtonStyle();
         },
+        openModal() {
+            this.myModal.show();
+        },
         closeModal() {
-            this.$refs.modalXButton.click();
+            this.myModal.hide();
         },
         async footerButtonClick() {
             if (this.footerButtonCallback) {

src/layouts/address-lookup/customer-questions/address-questions/address-questions.vue

@@ -117,7 +117,10 @@ export default {
             }),
         },
         validationRules: String,
-        captureApartmentNumberOrBusinessName: false,
+        captureApartmentNumberOrBusinessName: {
+            type: Boolean,
+            default: false,
+        },
     },
     data() {
         return {

src/layouts/service-location/mobile-location-modal-question/mobile-location-modal-question.vue

@@ -0,0 +1,100 @@
+<template>
+    <div class="text-center">
+        <label
+            :for="displayModalLink"
+            :aria-label="questionText"
+            class="form-label fw-bold w-100 ps-4 pe-4 pt-4"
+            :class="[questionAlignment === 'center' ? 'text-center w-100 mb-5' : '']"
+            v-html="questionText"></label>
+        <div class="update-mobile-location-text-link">
+            <textLink
+                id="displayModalLink"
+                linkType="text"
+                :text="this.mobileLocationDisplayText"
+                href="#!"
+                data-bs-toggle="modal"
+                :data-bs-target="getModalId"
+                aria-label="Modal window" />
+        </div>
+    </div>
+    <modal
+        ref="mobileServiceModal"
+        :cmsWidgetName="this.modalWidgetName"
+        :onModalOpenedCallback="onModalOpened"
+        :footerButtonCallback="saveMobileLocationData">
+        <div class="ps-4 pe-4 pb-4">
+            <addressQuestions ref="addressQuestions" captureApartmentNumberOrBusinessName ="true" />
+        </div>
+    </modal>
+</template>
+
+<script>
+// Components
+import textLink from "@/ux-components/text-link/text-link";
+import modal from "@/digital-components/modal/modal";
+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";
+
+//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";
+
+// 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",
+    data() {
+        return {
+
+        };
+    },
+    props: {
+        cmsWidgetName: String,
+        modalWidgetName: String,
+        textboxQuestionWidgetName: String,
+        alertNonServiceableZipWidgetName: String,
+        alertInvalidZipWidgetName: String,
+    },
+    methods: {
+ 
+    },
+    computed: {
+        getModalId() {
+            return "#" + this.modalWidgetName;
+        },
+        questionText() {
+            return this.getCmsContent(this.cmsWidgetName, "HeaderText");
+        },
+        mobileLocationDisplayText() {
+
+            return this.getCmsContent(this.cmsWidgetName, "FooterText");
+        },
+    },
+    mounted() {
+
+    },
+    components: {
+        textLink,
+        modal,
+        addressQuestions
+    },
+};
+</script>
+
+<style lang="scss" scoped>
+.update-zip-text-link::before {
+    content: "";
+    display: inline-block;
+    width: 13px;
+    height: 16px;
+    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 13 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6.49635 1.00142e-07C5.64734 -0.000153295 4.80722 0.175918 4.0274 0.517444C3.24757 0.858969 2.54443 1.35877 1.96099 1.98626C0.765713 3.27588 0.0999756 4.98141 0.0999756 6.75394C0.0999756 8.52646 0.765713 10.232 1.96099 11.5216L5.98324 15.777C6.04954 15.8475 6.12918 15.9036 6.21736 15.9419C6.30555 15.9802 6.40045 16 6.49635 16C6.59225 16 6.68716 15.9802 6.77534 15.9419C6.86353 15.9036 6.94317 15.8475 7.00946 15.777L11.0317 11.52C12.2391 10.2383 12.909 8.52914 12.8999 6.75394C12.9094 4.97818 12.2394 3.26832 11.0317 1.98626C10.4481 1.35899 9.74493 0.859347 8.96514 0.517839C8.18535 0.176331 7.34532 0.000130509 6.49635 1.00142e-07V1.00142e-07ZM6.49635 9.13131C6.02507 9.13131 5.56437 8.98913 5.17251 8.72275C4.78065 8.45637 4.47524 8.07776 4.29488 7.63479C4.11453 7.19181 4.06734 6.70438 4.15928 6.23412C4.25123 5.76387 4.47817 5.33191 4.81142 4.99287C5.14467 4.65384 5.56925 4.42295 6.03148 4.32941C6.49371 4.23587 6.97282 4.28388 7.40823 4.46736C7.84364 4.65085 8.21579 4.96157 8.47762 5.36023C8.73945 5.7589 8.87921 6.2276 8.87921 6.70707C8.87921 7.34974 8.62837 7.96611 8.18185 8.4207C7.73532 8.87528 7.12964 9.13088 6.49794 9.13131H6.49635Z' fill='%231574A1'/%3E%3C/svg%3E%0A");
+    background-size: contain;
+    vertical-align: middle;
+    margin-right: 0.5em;
+}
+</style>

src/layouts/service-location/service-location.vue

@@ -10,6 +10,10 @@ fmg
                 textboxQuestionWidgetName="ServiceZipQuestionWidget"
                 alertNonServiceableZipWidgetName="AlertNonServiceableZipWidget"
                 alertInvalidZipWidgetName="AlertInvalidZipWidget" />
+            <mobileLocationModalQuestion
+                cmsWidgetName="MobileLocationModalWidget"
+                modalWidgetName="LocationModalWidget"
+                textboxQuestionWidgetName="MobileLocationQuestionWidget" />    
             <funnel-footer
                 cmsWidgetName="FunnelFooterWidget"
                 :isForwardActionDisabled="!meta.valid"
@@ -22,6 +26,7 @@ fmg
 <script>
 // 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,

src/layouts/service-location/service-zip-modal-question/service-zip-modal-question.vue

@@ -1,17 +1,18 @@
 <template>
     <div class="text-center">
         <label
-            :for="serviceZipCodeInput"
+            :for="displayModalLink"
             :aria-label="questionText"
             class="form-label fw-bold w-100 ps-4 pe-4 pt-4"
             :class="[questionAlignment === 'center' ? 'text-center w-100 mb-5' : '']"
             v-html="questionText"></label>
         <div class="update-zip-text-link">
             <textLink
+                id="displayModalLink"
                 linkType="text"
                 :text="this.serviceZipDisplayText"
                 href="#!"
-                data-bs-toggle="modal"
+                @click-event="openZipCodeModal"
                 :data-bs-target="getModalId"
                 aria-label="Modal window" />
         </div>
@@ -87,6 +88,9 @@ export default {
         alertInvalidZipWidgetName: String,
     },
     methods: {
+        openZipCodeModal() {
+            this.$refs.zipCodeInputModal.myModal.show();
+        },
         getZipFromStore() {
             return this.$store.getters.order.serviceLocation.zipCode;
         },