From 72236e4ed35ab0b626196a33d4aaecb757dc24ca Mon Sep 17 00:00:00 2001
From: "US\\katie.kroell" <katie.kroell@safelite.com>
Date: Thu, 13 Apr 2023 14:39:36 -0400
Subject: [PATCH] displau textLink with state and zip

---
 .../service-location/service-location.vue     | 67 ++++++++++++++-----
 .../service-zip-modal-question.vue            | 62 +++++++++++++++++
 2 files changed, 113 insertions(+), 16 deletions(-)
 create mode 100644 src/layouts/service-location/service-zip-modal-question/service-zip-modal-question.vue

diff --git a/src/layouts/service-location/service-location.vue b/src/layouts/service-location/service-location.vue
index 36fe02e1..693084d7 100644
--- a/src/layouts/service-location/service-location.vue
+++ b/src/layouts/service-location/service-location.vue
@@ -4,7 +4,8 @@
             <siteHeader cmsWidgetName="SiteHeaderWidget" class="siteHeader"/>
             <siteSubHeader cmsWidgetName="SiteSubHeaderWidget" id="sub-header" /> 
             <div class="fade-on-route-transition position-relative px-5 choose-option">
-
+                <serviceZipModalQuestion
+                    v-model="serviceZipCodeQuestion"/>
                 <buttonQuestion 
                     cmsWidgetName="ServiceTypeQuestionWidget" 
                     :questionText="questionText" 
@@ -41,6 +42,7 @@ import { settleAllPromises } from "@/helpers/layout-helper";
 import { required } from "@/helpers/validation-rules";
 import { errorMessages } from "@/constants/error-messages";
 import buttonQuestion from "@/digital-components/button-question/button-question";
+import { useMainStore } from "@/store";
 
 // Import Component
 import baseFormMixin from "@/mixins/base-form-mixin";
@@ -48,41 +50,66 @@ import { Form, defineRule } from "vee-validate";
 import siteFooter from "@/iss-components/site-footer/site-footer.vue";
 import siteHeader from "@/iss-components/site-header/site-header.vue";
 import siteSubHeader from "@/iss-components/site-sub-header/site-sub-header.vue";
+import serviceZipModalQuestion from '@/layouts/service-location/service-zip-modal-question/service-zip-modal-question.vue';
 
 // DEFINE VALIDATION RULES
 defineRule("selection-required", required(errorMessages.OPTION_REQUIRED));
 export default {
     name: "service-location",
     mixins: [baseFormMixin],
-    components: {
-        siteFooter,
-        siteHeader,
-        siteSubHeader,
-        buttonQuestion,
-        Form,
-    },
-    data() {
-        return {};
-    },
     async beforeRouteEnter(to, from, next) {
+        // Call APIs
         const cmsContentPromise = fetchCmsContentForPage(to.query.issPage);
+        
         // Settle promises and get results
-        const promiseResultMap = [{
-            resultKey: "cmsContent",
-            promise: cmsContentPromise,
-        }, ];
+        const promiseResultMap = [
+            {
+                resultKey: "cmsContent",
+                promise: cmsContentPromise,
+            }, 
+        ];
+
         const resultMap = await settleAllPromises(promiseResultMap);
+        
         next((vm) => {
             vm.setCmsContent(resultMap.cmsContent);
         });
     },
+    setup() {
+        const mainStore = useMainStore();
+        return { mainStore };
+    },
+    data() {
+        return {
+            serviceZip: this.mainStore.order.customer.address.zipCode,
+            serviceZipState: this.mainStore.order.customer.address.state,
+            isServiceZipServiceable: null,
+        };
+    },
     computed: {
         questionText() {
             return this.getCmsContent("ServiceTypeQuestionWidget", "QuestionText");
         },
         answersFromCms() {
             return this.getCmsContent("ServiceTypeQuestionWidget", "Answers");
-        },        
+        },
+        serviceZipCodeQuestion: {
+            get: function() {
+                return {
+                    serviceZip: this.serviceZip,
+                    serviceZipState: this.serviceZipState,
+                };
+            },
+            set: function (newValue) {
+                if (newValue.serviceZip !== this.serviceZip) {
+                    //this.resetMobileLocation();
+                    //this.selectedAppointmentType = null;
+                    //this.providerNumber = null;
+                }
+                this.serviceZip = newValue.serviceZip;
+                this.serviceZipState = newValue.serviceZipState;
+            },
+        }        
     },
     methods: {
         arePagePrerequisiteValid() {
@@ -97,6 +124,14 @@ export default {
         async forwardButtonAction() {},
         resetDependentState() {},
     },
+    components: {
+        siteFooter,
+        siteHeader,
+        siteSubHeader,
+        buttonQuestion,
+        Form,
+        serviceZipModalQuestion,
+    },
 };
 </script>
 
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 00000000..1e990ae9
--- /dev/null
+++ b/src/layouts/service-location/service-zip-modal-question/service-zip-modal-question.vue
@@ -0,0 +1,62 @@
+<template>
+    <div class="text-center mt-1">
+        <div class="update-zip-text-link">
+            <textLink
+                id="serviceZipTextLink"
+                linkType="text"
+                :text="serviceZipLinkText"
+                href="#!"
+                @click-event="openModal"
+                aria-label="Modal window" />
+        </div>
+    </div>
+    <contentGroupModal
+        cmsWidgetName="ServiceZipModalWidget" />
+</template>
+
+<script>
+import contentGroupModal from "@/iss-components/content-group-modal/content-group-modal.vue";
+import textLink from "@/ux-components/text-link/text-link";
+
+export default {
+    name: "service-zip-modal-question",
+    emits: ["update:modalValue"],
+    props: {
+        modelValue: {
+            type: Object,
+            default: () => ({
+                serviceZip: "",
+                serviceZipState: "",
+            })
+        }
+    },
+    computed: {
+        serviceZipLinkText() {
+            if (this.modelValue.serviceZip && this.modelValue.serviceZip.length > 0) {
+                return this.modelValue.serviceZipState + ", " + this.modelValue.serviceZip;
+            }
+        },
+    },
+    components: {
+        contentGroupModal,
+        textLink
+    },
+};
+</script>
+
+<style lang="scss" scoped>
+a#serviceZipTextLink {
+    line-height: 26px;
+}
+
+.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>