From 734f3d6643e548055359d4f93ec0f4873d7c30fa Mon Sep 17 00:00:00 2001
From: Matt Caimi <matt.caimi@safelite.com>
Date: Thu, 12 Jan 2023 11:20:43 -0500
Subject: [PATCH] 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 @@
             <div class="modal-content">
                 <div class="modal-header">
                     <button
+                        ref="modalXButton"
                         type="button"
                         class="btn-close"
                         data-bs-dismiss="modal"
                         aria-label="Close"></button>
                 </div>
-                <div class="modal-body ps-4 pe-4 pt-5 pb-4">
+                <div class="modal-body ps-4 pe-4 pt-5 pb-4" v-if="showModalBody">
                     <img :src="ModalImage" class="mw-100 d-flex mx-auto mb-4" alt="" />
                     <h5 class="mb-4" v-html="ModalHeadline"></h5>
                     <p class="fw-bold mb-2 subheader-text" v-html="ModalSubheadertext"></p>
@@ -26,6 +27,7 @@
                         v-if="ModalSubBodyText"
                         v-html="ModalSubBodyText"></p>
                 </div>
+                <slot></slot>
                 <div class="modal-footer px-5 py-4">
                     <buttonMain
                         isPrimary
@@ -33,8 +35,7 @@
                         ref="buttonMain"
                         suppressLoader
                         :buttonText="ModalCloseButtonText"
-                        @click-event="buttonClick"
-                        data-bs-dismiss="modal" />
+                        @click-event="buttonMainClick" />
                 </div>
             </div>
         </div>
@@ -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
         <div class="page-container-grouped-styles">
             <funnelHeader cmsWidgetName="FunnelHeaderWidget" />
             <funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" />
+            <serviceZipModalQuestion />
             <funnel-footer
                 cmsWidgetName="FunnelFooterWidget"
                 :isForwardActionDisabled="!meta.valid"
@@ -15,12 +16,13 @@ fmg
 
 <script>
 // 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 @@
+<template>
+    <div class="text-center">
+        <label
+            :for="serviceZipCodeInput"
+            :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
+                linkType="text"
+                :text="this.serviceZipDisplayText"
+                href="#!"
+                data-bs-toggle="modal"
+                data-bs-target="#ZipModal"
+                aria-label="Modal window" />
+        </div>
+    </div>
+    <modal ref="zipCodeInputModal" cmsWidgetName="ZipModal" :buttonClick="setZip">
+        <div class="ps-4 pe-4 pb-4">
+            <textboxQuestion
+                cmsWidgetName="ServiceZipQuestionWidget"
+                v-model="serviceZipCodeInput"
+                inputId="serviceZipCodeInput"
+                questionAlignment="center"
+                mask="#####"
+                isRequired
+                disableAutoFill
+                validationRules="zip-required|zip-format" />
+            <alert
+                ref="alertInvalidZip"
+                v-if="displayInvalidZipAlert"
+                class="my-4"
+                cmsWidgetName="AlertInvalidZipWidget"
+                alertClass="alert-danger"
+                v-bind:isDismissible="false" />
+            <alert
+                ref="alertNonServiceableZip"
+                v-if="displayNonServiceableZipAlert"
+                class="my-4"
+                cmsWidgetName="AlertNonServiceableZipWidget"
+                :manualHeadline="AlertNonServiceableZipHeader"
+                alertClass="alert-danger"
+                v-bind:isDismissible="false" />
+        </div>
+    </modal>
+</template>
+
+<script>
+// Components
+import textLink from "@/ux-components/text-link/text-link";
+import modal from "@/common-components/modal/modal";
+import alert from "@/ux-components/alert/alert";
+import textboxQuestion from "@/common-components/textbox-question/textbox-question";
+
+//Supporting Files
+import { defineRule } from "vee-validate";
+import { required, regex } from "@/helpers/validation-rules";
+import { errorMessages } from "@/constants/error-messages";
+import store from "@/store";
+import baseMixin from "@/mixins/base-mixin";
+
+// 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: "service-zip-modal-question",
+    data() {
+        return {
+            serviceZip: this.getZipFromStore(),
+            serviceZipState: this.getZipStateFromStore(),
+            serviceZipCodeInput: this.getZipFromStore(),
+            displayInvalidZipAlert: false,
+            displayNonServiceableZipAlert: false,
+        };
+    },
+    props: {
+        cmsWidgetName: String,
+    },
+    methods: {
+        getZipFromStore() {
+            return store.getters.order.serviceLocation.zipCode;
+        },
+
+        getZipStateFromStore() {
+            return store.getters.order.serviceLocation.state;
+        },
+
+        resetAlerts() {
+            this.displayInvalidZipAlert = false;
+            this.displayNonServiceableZipAlert = false;
+        },
+
+        async setZip() {
+            this.resetAlerts();
+
+            const zipLength = 5;
+            if (this.serviceZipCodeInput.length < zipLength) {
+                // prevent reading 1111 as 01111
+                return;
+            }
+
+            const zipCodeData = await baseMixin.methods.getZipCodeData(this.serviceZipCodeInput);
+
+            if (!zipCodeData.isValid) {
+                this.displayInvalidZipAlert = true;
+            } else if (!zipCodeData.isServiceable) {
+                this.displayNonServiceableZipAlert = true;
+            } else {
+                this.serviceZip = this.serviceZipCodeInput;
+                this.serviceZipState = zipCodeData.state;
+
+                this.$refs.zipCodeInputModal.closeModal();
+            }
+        },
+    },
+    computed: {
+        questionText() {
+            return this.getCmsContent("LocationQuestionWidget", "QuestionText");
+        },
+        serviceZipDisplayText() {
+            if (this.serviceZip && this.serviceZip != 0) {
+                return this.serviceZipState + ", " + this.serviceZip;
+            }
+            return this.getCmsContent("ZipPlaceholderText", "QuestionText");
+        },
+        AlertNonServiceableZipHeader() {
+            const zipCode = this.serviceZipCodeInput;
+            const text = this.getCmsContent(
+                "AlertNonServiceableZipWidget",
+                "HeadlineText"
+            ).replaceAll("{custom:serviceZipCodeInput}", zipCode);
+            return text;
+        },
+    },
+    components: {
+        textLink,
+        modal,
+        alert,
+        textboxQuestion,
+    },
+};
+</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>