From 23d30d60370461d4cf24d2173382253e203577c6 Mon Sep 17 00:00:00 2001
From: Leah Schumann <leah.schumann@safelite.com>
Date: Wed, 25 Jan 2023 16:18:56 -0500
Subject: [PATCH] Manual open of modal

---
 src/digital-components/modal/modal.vue        |  19 +++-
 .../address-questions/address-questions.vue   |   5 +-
 .../mobile-location-modal-question.vue        | 100 ++++++++++++++++++
 .../service-location/service-location.vue     |   6 ++
 .../service-zip-modal-question.vue            |   8 +-
 5 files changed, 132 insertions(+), 6 deletions(-)
 create mode 100644 src/layouts/service-location/mobile-location-modal-question/mobile-location-modal-question.vue

diff --git a/src/digital-components/modal/modal.vue b/src/digital-components/modal/modal.vue
index 013a42168..ff02fb67c 100644
--- a/src/digital-components/modal/modal.vue
+++ b/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) {
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 2f21e49f6..33d17b1e5 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
@@ -117,7 +117,10 @@ export default {
             }),
         },
         validationRules: String,
-        captureApartmentNumberOrBusinessName: false,
+        captureApartmentNumberOrBusinessName: {
+            type: Boolean,
+            default: false,
+        },
     },
     data() {
         return {
diff --git a/src/layouts/service-location/mobile-location-modal-question/mobile-location-modal-question.vue b/src/layouts/service-location/mobile-location-modal-question/mobile-location-modal-question.vue
new file mode 100644
index 000000000..f3d83fe3b
--- /dev/null
+++ b/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>
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" />
+            <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,
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 @@
 <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;
         },