From 863c5999f38fa8fe04c2d51758129586ce0ac81a Mon Sep 17 00:00:00 2001
From: Matt Caimi <matt.caimi@safelite.com>
Date: Thu, 19 Jan 2023 13:08:56 -0500
Subject: [PATCH] CSR-1012 | service zip cms refactor

---
 .../service-location/service-location.vue     |  7 ++-
 .../service-zip-modal-question.vue            | 50 ++++++++++---------
 2 files changed, 32 insertions(+), 25 deletions(-)

diff --git a/src/layouts/service-location/service-location.vue b/src/layouts/service-location/service-location.vue
index 4f8230456..418a1ec2e 100644
--- a/src/layouts/service-location/service-location.vue
+++ b/src/layouts/service-location/service-location.vue
@@ -4,7 +4,12 @@ fmg
         <div class="page-container-grouped-styles">
             <funnelHeader cmsWidgetName="FunnelHeaderWidget" />
             <funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" />
-            <serviceZipModalQuestion />
+            <serviceZipModalQuestion
+                cmsWidgetName="ServiceZipModalWidget"
+                modalWidgetName="ZipModalWidget"
+                textboxQuestionWidgetName="ServiceZipQuestionWidget"
+                alertNonServiceableZipWidgetName="AlertNonServiceableZipWidget"
+                alertInvalidZipWidgetName="AlertInvalidZipWidget" />
             <funnel-footer
                 cmsWidgetName="FunnelFooterWidget"
                 :isForwardActionDisabled="!meta.valid"
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 fa49f50d0..9713c8156 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
@@ -12,14 +12,14 @@
                 :text="this.serviceZipDisplayText"
                 href="#!"
                 data-bs-toggle="modal"
-                data-bs-target="#ZipModal"
+                :data-bs-target="getModalId"
                 aria-label="Modal window" />
         </div>
     </div>
-    <modal ref="zipCodeInputModal" cmsWidgetName="ZipModal" :buttonClick="setZip">
+    <modal ref="zipCodeInputModal" :cmsWidgetName="this.modalWidgetName" :buttonClick="setZip">
         <div class="ps-4 pe-4 pb-4">
             <textboxQuestion
-                cmsWidgetName="ServiceZipQuestionWidget"
+                :cmsWidgetName="this.textboxQuestionWidgetName"
                 v-model="serviceZipCodeInput"
                 inputId="serviceZipCodeInput"
                 questionAlignment="center"
@@ -31,15 +31,15 @@
                 ref="alertInvalidZip"
                 v-if="displayInvalidZipAlert"
                 class="my-4"
-                cmsWidgetName="AlertInvalidZipWidget"
+                :cmsWidgetName="this.alertInvalidZipWidgetName"
                 alertClass="alert-danger"
                 v-bind:isDismissible="false" />
             <alert
                 ref="alertNonServiceableZip"
                 v-if="displayNonServiceableZipAlert"
                 class="my-4"
-                cmsWidgetName="AlertNonServiceableZipWidget"
-                :manualHeadline="AlertNonServiceableZipHeader"
+                :cmsWidgetName="this.alertNonServiceableZipWidgetName"
+                :manualHeadline="this.invalidAlertHeader"
                 alertClass="alert-danger"
                 v-bind:isDismissible="false" />
         </div>
@@ -48,17 +48,15 @@
 
 <script>
 // Components
-import textLink from "@/fmg-components/ux-components/text-link/text-link";
+import textLink from "@/ux-components/text-link/text-link";
 import modal from "@/digital-components/modal/modal";
-import alert from "@/fmg-components/ux-components/alert/alert";
+import alert from "@/ux-components/alert/alert";
 import textboxQuestion from "@/digital-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));
@@ -73,18 +71,23 @@ export default {
             serviceZipCodeInput: this.getZipFromStore(),
             displayInvalidZipAlert: false,
             displayNonServiceableZipAlert: false,
+            invalidAlertHeader: null,
         };
     },
     props: {
         cmsWidgetName: String,
+        modalWidgetName: String,
+        textboxQuestionWidgetName: String,
+        alertNonServiceableZipWidgetName: String,
+        alertInvalidZipWidgetName: String,
     },
     methods: {
         getZipFromStore() {
-            return store.getters.order.serviceLocation.zipCode;
+            return this.$store.getters.order.serviceLocation.zipCode;
         },
 
         getZipStateFromStore() {
-            return store.getters.order.serviceLocation.state;
+            return this.$store.getters.order.serviceLocation.state;
         },
 
         resetAlerts() {
@@ -96,16 +99,20 @@ export default {
             this.resetAlerts();
 
             const zipLength = 5;
-            if (this.serviceZipCodeInput.length < zipLength) {
+            if (!this.serviceZipCodeInput || this.serviceZipCodeInput.length < zipLength) {
                 // prevent reading 1111 as 01111
                 return;
             }
 
-            const zipCodeData = await baseMixin.methods.getZipCodeData(this.serviceZipCodeInput);
+            const zipCodeData = await this.getZipCodeData(this.serviceZipCodeInput);
 
             if (!zipCodeData.isValid) {
                 this.displayInvalidZipAlert = true;
             } else if (!zipCodeData.isServiceable) {
+                this.invalidAlertHeader = this.getCmsContent(
+                    this.alertNonServiceableZipWidgetName,
+                    "HeadlineText"
+                ).replaceAll("{custom:serviceZipCodeInput}", this.serviceZipCodeInput);
                 this.displayNonServiceableZipAlert = true;
             } else {
                 this.serviceZip = this.serviceZipCodeInput;
@@ -116,22 +123,17 @@ export default {
         },
     },
     computed: {
+        getModalId() {
+            return "#" + this.modalWidgetName;
+        },
         questionText() {
-            return this.getCmsContent("LocationQuestionWidget", "QuestionText");
+            return this.getCmsContent(this.cmsWidgetName, "HeaderText");
         },
         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;
+            return this.getCmsContent(this.cmsWidgetName, "FooterText");
         },
     },
     components: {