From 44644c9ed301ff967ef00ee1935a824533079492 Mon Sep 17 00:00:00 2001
From: Leah Schumann <leah.schumann@safelite.com>
Date: Mon, 6 Mar 2023 13:18:12 -0500
Subject: [PATCH 01/22] Added initial stub for service-type-question

---
 .../service-type-question.spec.js             |  1 +
 .../service-type-question.vue                 | 50 +++++++++++++++++++
 2 files changed, 51 insertions(+)
 create mode 100644 src/layouts/service-location/service-type-question/service-type-question.spec.js
 create mode 100644 src/layouts/service-location/service-type-question/service-type-question.vue

diff --git a/src/layouts/service-location/service-type-question/service-type-question.spec.js b/src/layouts/service-location/service-type-question/service-type-question.spec.js
new file mode 100644
index 000000000..66012402c
--- /dev/null
+++ b/src/layouts/service-location/service-type-question/service-type-question.spec.js
@@ -0,0 +1 @@
+test.todo("some test to be written in the future");
\ No newline at end of file
diff --git a/src/layouts/service-location/service-type-question/service-type-question.vue b/src/layouts/service-location/service-type-question/service-type-question.vue
new file mode 100644
index 000000000..2a3cdfe22
--- /dev/null
+++ b/src/layouts/service-location/service-type-question/service-type-question.vue
@@ -0,0 +1,50 @@
+<template>
+    <transition name="fade" mode="out-in">
+        <div class="service-type-question" v-if="isAvailable" aria-live="polite">
+            <buttonQuestion
+                :questionText="questionText"
+                :answers="answersFromCms"
+                :groupName="groupName"
+                buttonTypeString="listCard"
+                v-model="selectedValues"
+                :suppressError="suppressError"
+                :validationRules="validationRules"
+                isRequired />
+        </div>
+    </transition>
+</template>
+
+<script>
+import buttonQuestion from "@/digital-components/button-question/button-question";
+
+export default {
+    name: "windshieldDamageTypeQuestion",
+    props: {
+        modelValue: String,
+        groupName: String,
+        isAvailable: Boolean,
+        suppressError: Boolean,
+        validationRules: String,
+        cmsWidgetName: String,
+    },
+    computed: {
+        questionText() {
+            return this.getCmsContent(this.cmsWidgetName, "QuestionText");
+        },
+        answersFromCms() {
+            return this.getCmsContent(this.cmsWidgetName, "Answers");
+        },
+        selectedValues: {
+            get: function () {
+                return this.modelValue;
+            },
+            set: function (newValue) {
+                this.$emit("update:modelValue", newValue);
+            },
+        },
+    },
+    components: {
+        buttonQuestion,
+    },
+};
+</script>

From eea249d3c27436e7d8fb91877cfd612162293c16 Mon Sep 17 00:00:00 2001
From: Leah Schumann <leah.schumann@safelite.com>
Date: Tue, 7 Mar 2023 14:04:28 -0500
Subject: [PATCH 02/22] Created service-type-question component

---
 .../service-type-question.spec.js                 |  2 +-
 .../service-type-question.vue                     | 15 +++++++++++++--
 2 files changed, 14 insertions(+), 3 deletions(-)

diff --git a/src/layouts/service-location/service-type-question/service-type-question.spec.js b/src/layouts/service-location/service-type-question/service-type-question.spec.js
index 66012402c..3d0843e10 100644
--- a/src/layouts/service-location/service-type-question/service-type-question.spec.js
+++ b/src/layouts/service-location/service-type-question/service-type-question.spec.js
@@ -1 +1 @@
-test.todo("some test to be written in the future");
\ No newline at end of file
+test.todo("some test to be written in the future");
diff --git a/src/layouts/service-location/service-type-question/service-type-question.vue b/src/layouts/service-location/service-type-question/service-type-question.vue
index 2a3cdfe22..359e44547 100644
--- a/src/layouts/service-location/service-type-question/service-type-question.vue
+++ b/src/layouts/service-location/service-type-question/service-type-question.vue
@@ -1,6 +1,6 @@
 <template>
     <transition name="fade" mode="out-in">
-        <div class="service-type-question" v-if="isAvailable" aria-live="polite">
+        <div class="service-type-question" aria-live="polite">
             <buttonQuestion
                 :questionText="questionText"
                 :answers="answersFromCms"
@@ -18,7 +18,7 @@
 import buttonQuestion from "@/digital-components/button-question/button-question";
 
 export default {
-    name: "windshieldDamageTypeQuestion",
+    name: "service-type-question",
     props: {
         modelValue: String,
         groupName: String,
@@ -26,6 +26,10 @@ export default {
         suppressError: Boolean,
         validationRules: String,
         cmsWidgetName: String,
+        isGlassServiceableMobile: Boolean,
+        isGlassServiceableInShop: Boolean,
+        isRecalibrationServiceableInShop: Boolean,
+        isRecalibrationServiceableMobile: Boolean
     },
     computed: {
         questionText() {
@@ -48,3 +52,10 @@ export default {
     },
 };
 </script>
+
+<style lang="scss">
+.list-card img {
+    height: auto;
+    width: 3.417rem;
+}
+</style>
\ No newline at end of file

From 663682c7a423cec23cbcbfb99b16911a2336731e Mon Sep 17 00:00:00 2001
From: Leah Schumann <leah.schumann@safelite.com>
Date: Tue, 7 Mar 2023 14:05:15 -0500
Subject: [PATCH 03/22] Added service-type-location component to page

---
 .../service-location/service-location.vue     | 70 +++++++++++++------
 1 file changed, 47 insertions(+), 23 deletions(-)

diff --git a/src/layouts/service-location/service-location.vue b/src/layouts/service-location/service-location.vue
index 777cbde74..e274c120b 100644
--- a/src/layouts/service-location/service-location.vue
+++ b/src/layouts/service-location/service-location.vue
@@ -4,23 +4,32 @@
             <loadingModal ref="loadingModal" />
             <funnelHeader cmsWidgetName="FunnelHeaderWidget" />
             <funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" />
-            <serviceZipModalQuestion
-                v-model="serviceZipCodeQuestion"
-                @updated-service-zip-code="resetMobileLocation"
-                ref="serviceZipCodeQuestion"
-                linkWidgetName="ServiceZipLinkWidget"
-                modalWidgetName="ServiceZipModalWidget" />
-            <mobileLocationModalQuestions
-                v-model="mobileLocationQuestions"
-                ref="mobileLocationModalQuestions"
-                linkWidgetName="MobileLocationLinkWidget"
-                modalWidgetName="MobileLocationModalWidget" />
-            <funnel-footer
-                cmsWidgetName="FunnelFooterWidget"
-                ref="funnelFooter"
-                :isForwardActionDisabled="!meta.valid"
-                @back-clicked="backButtonAction"
-                @ForwardClicked="forwardButtonAction" />
+            <div class="fade-on-route-transition sub-container make-tall">
+                <serviceZipModalQuestion
+                    v-model="serviceZipCodeQuestion"
+                    @updated-service-zip-code="resetMobileLocation"
+                    ref="serviceZipCodeQuestion"
+                    linkWidgetName="ServiceZipLinkWidget"
+                    modalWidgetName="ServiceZipModalWidget" />
+                <serviceTypeQuestion
+                    v-model="selectedServiceType"
+                    ref="serviceType"
+                    groupName="ServiceTypeQuestion"
+                    cmsWidgetName="ServiceTypeQuestionWidget"/>
+                <mobileLocationModalQuestions 
+                    v-if="selectedServiceType === 'Mobile'"
+                    v-model="mobileLocationQuestions"
+                    ref="mobileLocationModalQuestions"
+                    linkWidgetName="MobileLocationLinkWidget"
+                    modalWidgetName="MobileLocationModalWidget" />
+                <funnel-footer
+                    cmsWidgetName="FunnelFooterWidget"
+                    ref="funnelFooter"
+                    :isForwardActionDisabled="!meta.valid"
+                    @back-clicked="backButtonAction"
+                    @ForwardClicked="forwardButtonAction" />
+            </div>
+
         </div>
     </Form>
 </template>
@@ -29,11 +38,15 @@
 // Components
 import serviceZipModalQuestion from "@/layouts/service-location/service-zip-modal-question/service-zip-modal-question";
 import mobileLocationModalQuestions from "@/layouts/service-location/mobile-location-modal-questions/mobile-location-modal-questions";
+import serviceTypeQuestion from "@/layouts/service-location/service-type-question/service-type-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";
 import loadingModal from "@/fmg-components/loading-modal/loading-modal.vue";
-import { Form } from "vee-validate";
+import { Form, defineRule } from "vee-validate";
+import { required, regex } from "@/helpers/validation-rules";
+import { errorMessages } from "@/constants/error-messages";
+
 import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
 import { settleAllPromises } from "@/helpers/layout-helper";
 import { navigateToHeritageFunnel } from "@/helpers/heritage-integration/navigation-helper";
@@ -53,6 +66,7 @@ export default {
             isZipServiceableMobile: null,
             isZipServiceableInShop: null,
             mobileFeePart: null,
+            selectedServiceType: null
         };
     },
     async beforeRouteEnter(to, from, next) {
@@ -129,11 +143,12 @@ export default {
     },
     methods: {
         arePagePrerequisitesValid() {
-            return (
-                store.getters.lineItems.supportingItems !== null &&
-                store.getters.order.serviceLocation.zipCode !== null &&
-                store.getters.payment.isInsurance !== null
-            );
+            return true;
+            // return (
+            //     store.getters.lineItems.supportingItems !== null &&
+            //     store.getters.order.serviceLocation.zipCode !== null &&
+            //     store.getters.payment.isInsurance !== null
+            // );
         },
         setData(mobileFeePart) {
             if (mobileFeePart) {
@@ -179,6 +194,7 @@ export default {
     },
     components: {
         serviceZipModalQuestion,
+        serviceTypeQuestion,
         mobileLocationModalQuestions,
         funnelHeader,
         funnelFooter,
@@ -188,3 +204,11 @@ export default {
     },
 };
 </script>
+
+<style lang="scss">
+.question-text {
+    & > span {
+        text-align: center;
+    }
+}   
+</style>
\ No newline at end of file

From 732672c105822a234525c0aa80ccbdab1372bf89 Mon Sep 17 00:00:00 2001
From: Leah Schumann <leah.schumann@safelite.com>
Date: Tue, 7 Mar 2023 14:13:09 -0500
Subject: [PATCH 04/22] Updated styling on vehicle-protected-question to ensure
 proper alignment

---
 .../vehicle-protected-question.vue                  | 13 +++++--------
 1 file changed, 5 insertions(+), 8 deletions(-)

diff --git a/src/layouts/service-location/mobile-location-modal-questions/vehicle-protected-question/vehicle-protected-question.vue b/src/layouts/service-location/mobile-location-modal-questions/vehicle-protected-question/vehicle-protected-question.vue
index f5754ea06..c1484500b 100644
--- a/src/layouts/service-location/mobile-location-modal-questions/vehicle-protected-question/vehicle-protected-question.vue
+++ b/src/layouts/service-location/mobile-location-modal-questions/vehicle-protected-question/vehicle-protected-question.vue
@@ -51,14 +51,11 @@ export default {
 </script>
 
 <style lang="scss">
-.question-text {
-    margin-top: 1.5rem;
-    margin-bottom: 1rem;
-    font-size: 1rem;
-    line-height: 1.625rem;
-
-    & > span {
-        text-align: left;
+.modal-dialog {
+    .question-text {
+        & > span {
+            text-align: left;
+        }
     }
 }
 </style>

From 04efdfcd0f031667f272c04816d4643f40ed8265 Mon Sep 17 00:00:00 2001
From: Leah Schumann <leah.schumann@safelite.com>
Date: Wed, 8 Mar 2023 10:11:48 -0500
Subject: [PATCH 05/22] temp chkin

---
 .../mobile-location-modal-questions.vue       |  1 -
 .../service-location/service-location.vue     | 24 +++++++++++--------
 .../service-type-question.vue                 | 13 ++++++++--
 3 files changed, 25 insertions(+), 13 deletions(-)

diff --git a/src/layouts/service-location/mobile-location-modal-questions/mobile-location-modal-questions.vue b/src/layouts/service-location/mobile-location-modal-questions/mobile-location-modal-questions.vue
index 0aa64594d..598af5438 100644
--- a/src/layouts/service-location/mobile-location-modal-questions/mobile-location-modal-questions.vue
+++ b/src/layouts/service-location/mobile-location-modal-questions/mobile-location-modal-questions.vue
@@ -130,7 +130,6 @@ export default {
         modalFooterText() {
             return this.getCmsContent(this.modalWidgetName, "FooterText");
         },
-
         addressModel: {
             get: function () {
                 return this.modelValue.addressQuestions;
diff --git a/src/layouts/service-location/service-location.vue b/src/layouts/service-location/service-location.vue
index e274c120b..37a79d9c8 100644
--- a/src/layouts/service-location/service-location.vue
+++ b/src/layouts/service-location/service-location.vue
@@ -13,10 +13,11 @@
                     modalWidgetName="ServiceZipModalWidget" />
                 <serviceTypeQuestion
                     v-model="selectedServiceType"
-                    ref="serviceType"
+                    ref="serviceTypeQuestion"
                     groupName="ServiceTypeQuestion"
-                    cmsWidgetName="ServiceTypeQuestionWidget"/>
-                <mobileLocationModalQuestions 
+                    cmsWidgetName="ServiceTypeQuestionWidget"
+                    validationRules="option-required" />
+                <mobileLocationModalQuestions
                     v-if="selectedServiceType === 'Mobile'"
                     v-model="mobileLocationQuestions"
                     ref="mobileLocationModalQuestions"
@@ -29,7 +30,6 @@
                     @back-clicked="backButtonAction"
                     @ForwardClicked="forwardButtonAction" />
             </div>
-
         </div>
     </Form>
 </template>
@@ -43,9 +43,7 @@ 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 loadingModal from "@/fmg-components/loading-modal/loading-modal.vue";
-import { Form, defineRule } from "vee-validate";
-import { required, regex } from "@/helpers/validation-rules";
-import { errorMessages } from "@/constants/error-messages";
+import { Form } from "vee-validate";
 
 import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
 import { settleAllPromises } from "@/helpers/layout-helper";
@@ -66,7 +64,7 @@ export default {
             isZipServiceableMobile: null,
             isZipServiceableInShop: null,
             mobileFeePart: null,
-            selectedServiceType: null
+            selectedServiceType: null,
         };
     },
     async beforeRouteEnter(to, from, next) {
@@ -113,6 +111,8 @@ export default {
                 this.state = newValue.state;
                 this.zipCode = newValue.zipCode;
                 this.isServiceable = newValue.isServiceable;
+
+                console.log(this);
             },
         },
         mobileLocationQuestions: {
@@ -176,6 +176,10 @@ export default {
             });
         },
         resetMobileLocation(updatedServiceZipCode) {
+            if (!this.$refs.mobileLocationModalQuestions) {
+                return;
+            }
+
             this.streetAddress = "";
             this.apartmentNumberOrBusinessName = "";
             this.city = "";
@@ -210,5 +214,5 @@ export default {
     & > span {
         text-align: center;
     }
-}   
-</style>
\ No newline at end of file
+}
+</style>
diff --git a/src/layouts/service-location/service-type-question/service-type-question.vue b/src/layouts/service-location/service-type-question/service-type-question.vue
index 359e44547..528f7487b 100644
--- a/src/layouts/service-location/service-type-question/service-type-question.vue
+++ b/src/layouts/service-location/service-type-question/service-type-question.vue
@@ -17,6 +17,8 @@
 <script>
 import buttonQuestion from "@/digital-components/button-question/button-question";
 
+import { useForm, useIsFormTouched, useIsFormDirty, useIsFormValid } from "vee-validate";
+
 export default {
     name: "service-type-question",
     props: {
@@ -29,7 +31,14 @@ export default {
         isGlassServiceableMobile: Boolean,
         isGlassServiceableInShop: Boolean,
         isRecalibrationServiceableInShop: Boolean,
-        isRecalibrationServiceableMobile: Boolean
+        isRecalibrationServiceableMobile: Boolean,
+    },
+    setup() {
+        const form = useForm();
+
+        return {
+            form
+        };
     },
     computed: {
         questionText() {
@@ -58,4 +67,4 @@ export default {
     height: auto;
     width: 3.417rem;
 }
-</style>
\ No newline at end of file
+</style>

From 59a307bafc47fc7fe93bc0897029ee482fb59c95 Mon Sep 17 00:00:00 2001
From: Leah Schumann <leah.schumann@safelite.com>
Date: Tue, 14 Mar 2023 15:26:30 -0400
Subject: [PATCH 06/22] Prettified

---
 src/layouts/service-location/service-location.vue           | 6 +++---
 .../service-type-question/service-type-question.vue         | 2 +-
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/layouts/service-location/service-location.vue b/src/layouts/service-location/service-location.vue
index 555d1b196..84bdd31c9 100644
--- a/src/layouts/service-location/service-location.vue
+++ b/src/layouts/service-location/service-location.vue
@@ -7,7 +7,7 @@
             <div class="fade-on-route-transition sub-container make-tall">
                 <serviceZipModalQuestion
                     v-model="serviceZipCodeQuestion"
-                        ref="serviceZipCodeQuestion"
+                    ref="serviceZipCodeQuestion"
                     linkWidgetName="ServiceZipLinkWidget"
                     modalWidgetName="ServiceZipModalWidget" />
                 <serviceTypeQuestion
@@ -20,7 +20,7 @@
                     v-if="selectedServiceType === 'Mobile'"
                     v-model="mobileLocationQuestions"
                     :mobileFeePart="mobileFeePart"
-                ref="mobileLocationModalQuestions"
+                    ref="mobileLocationModalQuestions"
                     linkWidgetName="MobileLocationLinkWidget"
                     modalWidgetName="MobileLocationModalWidget" />
                 <funnel-footer
@@ -184,7 +184,7 @@ export default {
                 this.mobileFeePart = pricedMobileFeePart;
             });
         },
-        resetMobileLocation(updatedServiceZipCode) {
+        resetMobileLocation(updatedServiceZipCodeInfo) {
             this.streetAddress = "";
             this.apartmentNumberOrBusinessName = "";
             this.city = "";
diff --git a/src/layouts/service-location/service-type-question/service-type-question.vue b/src/layouts/service-location/service-type-question/service-type-question.vue
index 528f7487b..cf27645c7 100644
--- a/src/layouts/service-location/service-type-question/service-type-question.vue
+++ b/src/layouts/service-location/service-type-question/service-type-question.vue
@@ -37,7 +37,7 @@ export default {
         const form = useForm();
 
         return {
-            form
+            form,
         };
     },
     computed: {

From 328a1d422a42e264258a1ed0d58f1938aa33ad08 Mon Sep 17 00:00:00 2001
From: Leah Schumann <leah.schumann@safelite.com>
Date: Tue, 14 Mar 2023 16:16:28 -0400
Subject: [PATCH 07/22] Moved alert to above service type question

---
 .../service-location/service-location.vue     | 32 ++++++++++---------
 1 file changed, 17 insertions(+), 15 deletions(-)

diff --git a/src/layouts/service-location/service-location.vue b/src/layouts/service-location/service-location.vue
index 105b8cdc1..64bf3d5f4 100644
--- a/src/layouts/service-location/service-location.vue
+++ b/src/layouts/service-location/service-location.vue
@@ -12,17 +12,17 @@
                     @set-mobile-fee-part="setMobileFeePart"
                     linkWidgetName="ServiceZipLinkWidget"
                     modalWidgetName="ServiceZipModalWidget" />
+                <alert
+                    class="my-4"
+                    cmsWidgetName="AlertMilitaryBaseZipWidget"
+                    v-if="zipContainsMilitaryBase"
+                    alertClass="alert-warning" />    
                 <serviceTypeQuestion
                     v-model="selectedServiceType"
                     ref="serviceTypeQuestion"
                     groupName="ServiceTypeQuestion"
                     cmsWidgetName="ServiceTypeQuestionWidget"
                     validationRules="option-required" />
-                <alert
-                    class="my-4"
-                    cmsWidgetName="AlertMilitaryBaseZipWidget"
-                    v-if="zipContainsMilitaryBase"
-                    alertClass="alert-warning" />
                 <mobileLocationModalQuestions
                     v-if="selectedServiceType === 'Mobile'"
                     v-model="mobileLocationQuestions"
@@ -87,6 +87,7 @@ export default {
         const serviceType = store.getters.damage.isRepair ? "Repair" : "Replace";
         const parentAccountNumber = store.getters.payment.parentAccountNumber;
         const billToAccountNumber = 1;
+        const getZipCodeData = baseMixin.methods.getZipCodeData(serviceZipCode);
 
         const mobileFeePartPromise = getPricedMobileFeePart(
             serviceZipCode,
@@ -107,7 +108,7 @@ export default {
             },
             {
                 resultKey: "zipCodeData",
-                promise: baseMixin.methods.getZipCodeData(serviceZipCode),
+                promise: getZipCodeData,
             },
         ];
 
@@ -117,8 +118,6 @@ export default {
         next((vm) => {
             vm.setCmsContent(resultMap.cmsContent);
             vm.setData(resultMap.mobileFeePart);
-            vm.zipContainsMilitaryBase = resultMap.zipCodeData.containsMilitaryBase;
-            vm.zipCode = serviceZipCode;
         });
     },
     computed: {
@@ -167,17 +166,20 @@ export default {
     },
     methods: {
         arePagePrerequisitesValid() {
-            return true;
-            // return (
-            //     store.getters.lineItems.supportingItems !== null &&
-            //     store.getters.order.serviceLocation.zipCode !== null &&
-            //     store.getters.payment.isInsurance !== null
-            // );
+            return (
+                store.getters.lineItems.supportingItems !== null &&
+                store.getters.order.serviceLocation.zipCode !== null &&
+                store.getters.payment.isInsurance !== null
+            );
         },
-        setData(mobileFeePart) {
+        setData(zipCodeData, mobileFeePart) {
             if (mobileFeePart) {
                 this.mobileFeePart = mobileFeePart;
             }
+
+            if (zipCodeData) {
+                this.zipContainsMilitaryBase = zipCodeData.containsMilitaryBase;
+            }
         },
         getServiceAddressFromStore() {
             return store.getters.order.serviceLocation.address;

From 977785a069563c3122fb7688a7ba9e70d3625da5 Mon Sep 17 00:00:00 2001
From: Leah Schumann <leah.schumann@safelite.com>
Date: Wed, 15 Mar 2023 08:08:23 -0400
Subject: [PATCH 08/22] WIP

---
 src/layouts/service-location/service-location.vue  | 10 ++++++----
 .../service-type-question.vue                      | 14 +++++++++++++-
 2 files changed, 19 insertions(+), 5 deletions(-)

diff --git a/src/layouts/service-location/service-location.vue b/src/layouts/service-location/service-location.vue
index 64bf3d5f4..5c6f9cbb1 100644
--- a/src/layouts/service-location/service-location.vue
+++ b/src/layouts/service-location/service-location.vue
@@ -16,7 +16,7 @@
                     class="my-4"
                     cmsWidgetName="AlertMilitaryBaseZipWidget"
                     v-if="zipContainsMilitaryBase"
-                    alertClass="alert-warning" />    
+                    alertClass="alert-warning" />
                 <serviceTypeQuestion
                     v-model="selectedServiceType"
                     ref="serviceTypeQuestion"
@@ -72,9 +72,11 @@ export default {
             city: this.getServiceCityFromStore(),
             state: this.getServiceStateFromStore(),
             zipCode: this.getServiceZipCodeFromStore(),
-            isVehicleProtected: null,
-            isZipServiceableMobile: null,
-            isZipServiceableInShop: null,
+            isVehicleProtected: null,       
+            isGlassServiceableInShop: null,
+            isRecalibrationServiceableInShop: null,
+            isGlassServiceableMobile: null,
+            isRecalibrationServiceableMobile: null,
             mobileFeePart: null,
             zipContainsMilitaryBase: false,
             selectedServiceType: null,
diff --git a/src/layouts/service-location/service-type-question/service-type-question.vue b/src/layouts/service-location/service-type-question/service-type-question.vue
index cf27645c7..5dda61d71 100644
--- a/src/layouts/service-location/service-type-question/service-type-question.vue
+++ b/src/layouts/service-location/service-type-question/service-type-question.vue
@@ -3,7 +3,7 @@
         <div class="service-type-question" aria-live="polite">
             <buttonQuestion
                 :questionText="questionText"
-                :answers="answersFromCms"
+                :answers="answersToDisplay"
                 :groupName="groupName"
                 buttonTypeString="listCard"
                 v-model="selectedValues"
@@ -47,6 +47,18 @@ export default {
         answersFromCms() {
             return this.getCmsContent(this.cmsWidgetName, "Answers");
         },
+        answersToDisplay() {
+            let filteredAnswers;
+            if (this.isGlassServiceableMobile && this.isRecalibrationServiceableMobile && this.isGlassServiceableInShop && this.isRecalibrationServiceableInShop) {
+                filteredAnswers = this.answersFromCms;
+            } else if (this.isGlassServiceableMobile && this.isRecalibrationServiceableMobile && !this.isGlassServiceableInShop && !this.isRecalibrationServiceableInShop) {
+                filteredAnswers = this.answersFromCms.filter(answer => answer.Name == "InShop" || answer.Name == "DropOff");
+            } else if (this.isGlassServiceableInShop && this.isRecalibrationServiceableInShop && !this.isGlassServiceableMobile && !this.isRecalibrationServiceableMobile) {
+                filteredAnswers = this.answersFromCms.filter(answer => answer.Name == "Mobile");
+            }
+
+            return filteredAnswers;
+        },
         selectedValues: {
             get: function () {
                 return this.modelValue;

From f8dc7f12f8873b5fff6c7ab0f5b0b5858bcb173e Mon Sep 17 00:00:00 2001
From: Leah Schumann <leah.schumann@safelite.com>
Date: Wed, 15 Mar 2023 08:18:20 -0400
Subject: [PATCH 09/22] WIP

---
 .../service-location/service-location.vue     | 31 +++++++++++++++----
 1 file changed, 25 insertions(+), 6 deletions(-)

diff --git a/src/layouts/service-location/service-location.vue b/src/layouts/service-location/service-location.vue
index 5c6f9cbb1..d5967f8c0 100644
--- a/src/layouts/service-location/service-location.vue
+++ b/src/layouts/service-location/service-location.vue
@@ -85,11 +85,19 @@ export default {
     async beforeRouteEnter(to, from, next) {
         // Call APIs
         const cmsContentPromise = fetchCmsContentForPage(to.query.fmgPage);
+     
+        const getZipCodeData = baseMixin.methods.getZipCodeData(serviceZipCode);
+
+        const lineItems = store.getters.order.lineItems;
+        const serviceabilityDetailsPromise = getServiceabilityDetails({
+            serviceZipCode: serviceZipCode,
+            lineItems: lineItems,
+        });
+
         const serviceZipCode = store.getters.order.serviceLocation.zipCode;
         const serviceType = store.getters.damage.isRepair ? "Repair" : "Replace";
         const parentAccountNumber = store.getters.payment.parentAccountNumber;
         const billToAccountNumber = 1;
-        const getZipCodeData = baseMixin.methods.getZipCodeData(serviceZipCode);
 
         const mobileFeePartPromise = getPricedMobileFeePart(
             serviceZipCode,
@@ -108,6 +116,10 @@ export default {
                 resultKey: "mobileFeePart",
                 promise: mobileFeePartPromise,
             },
+            {
+                resultKey: "serviceabilityDetails",
+                promise: serviceabilityDetailsPromise,
+            },
             {
                 resultKey: "zipCodeData",
                 promise: getZipCodeData,
@@ -119,7 +131,7 @@ export default {
         // Call the "next" function to complete the transition to this page.
         next((vm) => {
             vm.setCmsContent(resultMap.cmsContent);
-            vm.setData(resultMap.mobileFeePart);
+            vm.setData(resultMap.zipCodeData, resultMap.serviceabilityDetails, resultMap.mobileFeePart);
         });
     },
     computed: {
@@ -175,13 +187,20 @@ export default {
             );
         },
         setData(zipCodeData, mobileFeePart) {
-            if (mobileFeePart) {
-                this.mobileFeePart = mobileFeePart;
-            }
-
             if (zipCodeData) {
                 this.zipContainsMilitaryBase = zipCodeData.containsMilitaryBase;
             }
+
+            if (serviceabilityDetails) {
+                this.isGlassServiceableInShop = serviceabilityDetails.isGlassServiceableInShop;
+                this.isRecalibrationServiceableInShop = serviceabilityDetails.isRecalibrationServiceableInShop;
+                this.isGlassServiceableMobile = serviceabilityDetails.isGlassServiceableMobile;
+                this.isRecalibrationServiceableMobile = serviceabilityDetails.isRecalibrationServiceableMobile;
+            }
+
+            if (mobileFeePart) {
+                this.mobileFeePart = mobileFeePart;
+            }
         },
         getServiceAddressFromStore() {
             return store.getters.order.serviceLocation.address;

From 1a1cfc426a140c357f3df9d6107c207b64cc23aa Mon Sep 17 00:00:00 2001
From: Leah Schumann <leah.schumann@safelite.com>
Date: Wed, 15 Mar 2023 08:27:37 -0400
Subject: [PATCH 10/22] WIP

---
 .../service-location/service-location.vue     | 20 +++++++----
 .../service-type-question.vue                 | 34 ++++++++++++++++---
 src/store/index.js                            | 10 ++++++
 3 files changed, 52 insertions(+), 12 deletions(-)

diff --git a/src/layouts/service-location/service-location.vue b/src/layouts/service-location/service-location.vue
index d5967f8c0..5120685bc 100644
--- a/src/layouts/service-location/service-location.vue
+++ b/src/layouts/service-location/service-location.vue
@@ -60,7 +60,7 @@ import baseMixin from "@/mixins/base-mixin.js";
 import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
 import { settleAllPromises } from "@/helpers/layout-helper";
 import { navigateToHeritageFunnel } from "@/helpers/heritage-integration/navigation-helper";
-import { getPricedMobileFeePart } from "@/layouts/service-location/helpers/service-location-helper/service-location-helper";
+import { getPricedMobileFeePart, getServiceabilityDetails } from "@/layouts/service-location/helpers/service-location-helper/service-location-helper";
 import store from "@/store";
 
 export default {
@@ -72,7 +72,7 @@ export default {
             city: this.getServiceCityFromStore(),
             state: this.getServiceStateFromStore(),
             zipCode: this.getServiceZipCodeFromStore(),
-            isVehicleProtected: null,       
+            isVehicleProtected: null,
             isGlassServiceableInShop: null,
             isRecalibrationServiceableInShop: null,
             isGlassServiceableMobile: null,
@@ -85,7 +85,7 @@ export default {
     async beforeRouteEnter(to, from, next) {
         // Call APIs
         const cmsContentPromise = fetchCmsContentForPage(to.query.fmgPage);
-     
+
         const getZipCodeData = baseMixin.methods.getZipCodeData(serviceZipCode);
 
         const lineItems = store.getters.order.lineItems;
@@ -131,7 +131,11 @@ export default {
         // Call the "next" function to complete the transition to this page.
         next((vm) => {
             vm.setCmsContent(resultMap.cmsContent);
-            vm.setData(resultMap.zipCodeData, resultMap.serviceabilityDetails, resultMap.mobileFeePart);
+            vm.setData(
+                resultMap.zipCodeData,
+                resultMap.serviceabilityDetails,
+                resultMap.mobileFeePart
+            );
         });
     },
     computed: {
@@ -186,16 +190,18 @@ export default {
                 store.getters.payment.isInsurance !== null
             );
         },
-        setData(zipCodeData, mobileFeePart) {
+        setData(zipCodeData, serviceabilityDetails, mobileFeePart) {
             if (zipCodeData) {
                 this.zipContainsMilitaryBase = zipCodeData.containsMilitaryBase;
             }
 
             if (serviceabilityDetails) {
                 this.isGlassServiceableInShop = serviceabilityDetails.isGlassServiceableInShop;
-                this.isRecalibrationServiceableInShop = serviceabilityDetails.isRecalibrationServiceableInShop;
+                this.isRecalibrationServiceableInShop =
+                    serviceabilityDetails.isRecalibrationServiceableInShop;
                 this.isGlassServiceableMobile = serviceabilityDetails.isGlassServiceableMobile;
-                this.isRecalibrationServiceableMobile = serviceabilityDetails.isRecalibrationServiceableMobile;
+                this.isRecalibrationServiceableMobile =
+                    serviceabilityDetails.isRecalibrationServiceableMobile;
             }
 
             if (mobileFeePart) {
diff --git a/src/layouts/service-location/service-type-question/service-type-question.vue b/src/layouts/service-location/service-type-question/service-type-question.vue
index 5dda61d71..f3f73415e 100644
--- a/src/layouts/service-location/service-type-question/service-type-question.vue
+++ b/src/layouts/service-location/service-type-question/service-type-question.vue
@@ -49,12 +49,36 @@ export default {
         },
         answersToDisplay() {
             let filteredAnswers;
-            if (this.isGlassServiceableMobile && this.isRecalibrationServiceableMobile && this.isGlassServiceableInShop && this.isRecalibrationServiceableInShop) {
+            if (
+                this.isGlassServiceableMobile &&
+                this.isRecalibrationServiceableMobile &&
+                this.isGlassServiceableInShop &&
+                this.isRecalibrationServiceableInShop
+            ) {
                 filteredAnswers = this.answersFromCms;
-            } else if (this.isGlassServiceableMobile && this.isRecalibrationServiceableMobile && !this.isGlassServiceableInShop && !this.isRecalibrationServiceableInShop) {
-                filteredAnswers = this.answersFromCms.filter(answer => answer.Name == "InShop" || answer.Name == "DropOff");
-            } else if (this.isGlassServiceableInShop && this.isRecalibrationServiceableInShop && !this.isGlassServiceableMobile && !this.isRecalibrationServiceableMobile) {
-                filteredAnswers = this.answersFromCms.filter(answer => answer.Name == "Mobile");
+            } else if (
+                this.isGlassServiceableMobile &&
+                this.isRecalibrationServiceableMobile &&
+                !this.isGlassServiceableInShop &&
+                !this.isRecalibrationServiceableInShop
+            ) {
+                filteredAnswers = this.answersFromCms.filter(
+                    (answer) => answer.Name == "InShop" || answer.Name == "DropOff"
+                );
+            } else if (
+                this.isGlassServiceableInShop &&
+                this.isRecalibrationServiceableInShop &&
+                !this.isGlassServiceableMobile &&
+                !this.isRecalibrationServiceableMobile
+            ) {
+                filteredAnswers = this.answersFromCms.filter((answer) => answer.Name == "Mobile");
+            } else if (
+                !this.isGlassServiceableInShop &&
+                !this.isRecalibrationServiceableInShop &&
+                !this.isGlassServiceableMobile &&
+                !this.isRecalibrationServiceableMobile
+            ) {
+                filteredAnswers = [];
             }
 
             return filteredAnswers;
diff --git a/src/store/index.js b/src/store/index.js
index 9458b993d..1cdd77e80 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -926,6 +926,16 @@ export const actions = {
         });
     },
 
+    getServiceabilityDetails(context, { serviceZipCode, lineItems }) {
+        return globalMethods.callMockHttpClient({
+            method: endpoints.GetServiceabilityDetails.method,
+            //TODO: Remove Mocky Endpoints
+            endpoint: "https://run.mocky.io/v3/59e1a644-cf16-4f08-8069-1ab2a1e38f79", // NoShopsAvailable
+            //endpoint: "https://run.mocky.io/v3/4fe1fb89-dd56-4e4a-9af2-96bd1ab77847" // ForcedInShop
+            //endpoint: "https://run.mocky.io/v3/e2eaa097-6ea5-4906-af53-901edaa94939", // ForcedMobile
+        });
+    },
+
     getSupportingItems(context) {
         const glassPartsArray = context.getters.lineItems.glassParts ?? [];
         const carId = context.getters.vehicle.carId;

From 82e6d7c305eb69aa364787552c7224e9d242315a Mon Sep 17 00:00:00 2001
From: Leah Schumann <leah.schumann@safelite.com>
Date: Wed, 15 Mar 2023 08:45:31 -0400
Subject: [PATCH 11/22] WIP

---
 src/constants/store-actions.js                    |  1 +
 .../service-location-helper.js                    | 15 +++++++++++++++
 src/layouts/service-location/service-location.vue |  9 ++++++---
 src/store/index.js                                |  4 ++--
 4 files changed, 24 insertions(+), 5 deletions(-)

diff --git a/src/constants/store-actions.js b/src/constants/store-actions.js
index 2b7033e10..3fc664413 100644
--- a/src/constants/store-actions.js
+++ b/src/constants/store-actions.js
@@ -29,6 +29,7 @@ const storeActions = {
     GET_PART_FROM_CAPABILITY_QUESTION_ANSWER: "getPartFromCapabilityQuestionAnswer",
     GET_MOLDING_QUESTIONS: "getMoldingQuestions",
     GET_MOBILE_FEE_PART: "getMobileFeePart",
+    GET_SERVICEABILITY_DETAILS: "getServiceabilityDetails",
     SAVE_SESSION: "saveSession",
     LOAD_SESSION: "loadSession",
     UPDATE_STORE_WITH_SAVE_SESSION_RESPONSE: "updateStoreWithSaveSessionResponse",
diff --git a/src/layouts/service-location/helpers/service-location-helper/service-location-helper.js b/src/layouts/service-location/helpers/service-location-helper/service-location-helper.js
index ba81a973f..444147b72 100644
--- a/src/layouts/service-location/helpers/service-location-helper/service-location-helper.js
+++ b/src/layouts/service-location/helpers/service-location-helper/service-location-helper.js
@@ -28,3 +28,18 @@ export async function getPricedMobileFeePart(serviceZipCode) {
 
     return Promise.resolve(pricingResults[0]);
 }
+
+export async function getServiceabilityDetails(serviceZipCode, lineItems) {
+    
+    // Get the Mobile Fee Part
+    const serviceabilityDetails = await baseMixin.methods.dispatchStoreAction(
+        storeActions.GET_SERVICEABILITY_DETAILS,
+        {
+            serviceZipCode: serviceZipCode,
+            lineItems: lineItems,
+        },
+        false
+    );
+        const temp = Promise.resolve(serviceabilityDetails)
+    return Promise.resolve(serviceabilityDetails);
+}
diff --git a/src/layouts/service-location/service-location.vue b/src/layouts/service-location/service-location.vue
index 5120685bc..0fe9e54af 100644
--- a/src/layouts/service-location/service-location.vue
+++ b/src/layouts/service-location/service-location.vue
@@ -60,7 +60,10 @@ import baseMixin from "@/mixins/base-mixin.js";
 import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
 import { settleAllPromises } from "@/helpers/layout-helper";
 import { navigateToHeritageFunnel } from "@/helpers/heritage-integration/navigation-helper";
-import { getPricedMobileFeePart, getServiceabilityDetails } from "@/layouts/service-location/helpers/service-location-helper/service-location-helper";
+import {
+    getPricedMobileFeePart,
+    getServiceabilityDetails,
+} from "@/layouts/service-location/helpers/service-location-helper/service-location-helper";
 import store from "@/store";
 
 export default {
@@ -86,6 +89,7 @@ export default {
         // Call APIs
         const cmsContentPromise = fetchCmsContentForPage(to.query.fmgPage);
 
+        const serviceZipCode = store.getters.order.serviceLocation.zipCode;
         const getZipCodeData = baseMixin.methods.getZipCodeData(serviceZipCode);
 
         const lineItems = store.getters.order.lineItems;
@@ -94,10 +98,9 @@ export default {
             lineItems: lineItems,
         });
 
-        const serviceZipCode = store.getters.order.serviceLocation.zipCode;
         const serviceType = store.getters.damage.isRepair ? "Repair" : "Replace";
         const parentAccountNumber = store.getters.payment.parentAccountNumber;
-        const billToAccountNumber = 1;
+        const billToAccountNumber = 87291;
 
         const mobileFeePartPromise = getPricedMobileFeePart(
             serviceZipCode,
diff --git a/src/store/index.js b/src/store/index.js
index 1cdd77e80..b7f3fcf03 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -930,8 +930,8 @@ export const actions = {
         return globalMethods.callMockHttpClient({
             method: endpoints.GetServiceabilityDetails.method,
             //TODO: Remove Mocky Endpoints
-            endpoint: "https://run.mocky.io/v3/59e1a644-cf16-4f08-8069-1ab2a1e38f79", // NoShopsAvailable
-            //endpoint: "https://run.mocky.io/v3/4fe1fb89-dd56-4e4a-9af2-96bd1ab77847" // ForcedInShop
+            //endpoint: "https://run.mocky.io/v3/59e1a644-cf16-4f08-8069-1ab2a1e38f79", // NoShopsAvailable
+            endpoint: "https://run.mocky.io/v3/4fe1fb89-dd56-4e4a-9af2-96bd1ab77847", // ForcedInShop
             //endpoint: "https://run.mocky.io/v3/e2eaa097-6ea5-4906-af53-901edaa94939", // ForcedMobile
         });
     },

From 4d8dc49f97935effdfc70094ca885c3de1e1d7e1 Mon Sep 17 00:00:00 2001
From: Leah Schumann <leah.schumann@safelite.com>
Date: Wed, 15 Mar 2023 09:47:20 -0400
Subject: [PATCH 12/22] WIP

---
 src/constants/endpoints.js                    |  4 +
 .../service-location-helper.js                |  3 +-
 .../mobile-location-modal-questions.vue       |  2 +-
 .../service-location/service-location.vue     | 43 +++++++---
 .../service-type-question.vue                 | 83 ++++++++++++-------
 src/store/index.js                            |  3 +-
 6 files changed, 92 insertions(+), 46 deletions(-)

diff --git a/src/constants/endpoints.js b/src/constants/endpoints.js
index 0a67c8c96..fc94132d9 100644
--- a/src/constants/endpoints.js
+++ b/src/constants/endpoints.js
@@ -78,6 +78,10 @@ const endpoints = {
         url: "/parts/api/v1/parts/mobile-fee",
         method: "GET",
     },
+    GetServiceabilityDetails: {
+        url: "/location/serviceability-details",
+        method: "GET",
+    },
     GetSupportingItems: {
         url: "/parts/api/v1/parts/supporting-items",
         method: "POST",
diff --git a/src/layouts/service-location/helpers/service-location-helper/service-location-helper.js b/src/layouts/service-location/helpers/service-location-helper/service-location-helper.js
index 444147b72..157c28f2b 100644
--- a/src/layouts/service-location/helpers/service-location-helper/service-location-helper.js
+++ b/src/layouts/service-location/helpers/service-location-helper/service-location-helper.js
@@ -30,7 +30,6 @@ export async function getPricedMobileFeePart(serviceZipCode) {
 }
 
 export async function getServiceabilityDetails(serviceZipCode, lineItems) {
-    
     // Get the Mobile Fee Part
     const serviceabilityDetails = await baseMixin.methods.dispatchStoreAction(
         storeActions.GET_SERVICEABILITY_DETAILS,
@@ -40,6 +39,6 @@ export async function getServiceabilityDetails(serviceZipCode, lineItems) {
         },
         false
     );
-        const temp = Promise.resolve(serviceabilityDetails)
+
     return Promise.resolve(serviceabilityDetails);
 }
diff --git a/src/layouts/service-location/mobile-location-modal-questions/mobile-location-modal-questions.vue b/src/layouts/service-location/mobile-location-modal-questions/mobile-location-modal-questions.vue
index ac1be453d..531f17acf 100644
--- a/src/layouts/service-location/mobile-location-modal-questions/mobile-location-modal-questions.vue
+++ b/src/layouts/service-location/mobile-location-modal-questions/mobile-location-modal-questions.vue
@@ -90,7 +90,7 @@ export default {
             default: () => ({}),
         },
         isZipServiceableMobile: Boolean,
-        isZipServiceableInShop: Boolean,
+        isZipServiceableInshop: Boolean,
         linkWidgetName: String,
         modalWidgetName: String,
         alertNonServiceableZipWidgetName: String,
diff --git a/src/layouts/service-location/service-location.vue b/src/layouts/service-location/service-location.vue
index 0fe9e54af..889094264 100644
--- a/src/layouts/service-location/service-location.vue
+++ b/src/layouts/service-location/service-location.vue
@@ -19,6 +19,10 @@
                     alertClass="alert-warning" />
                 <serviceTypeQuestion
                     v-model="selectedServiceType"
+                    :isGlassServiceableInshop="isGlassServiceableInshop"
+                    :isRecalibrationServiceableInshop="isRecalibrationServiceableInshop"
+                    :isGlassServiceableMobile="isGlassServiceableMobile"
+                    :isRecalibrationServiceableMobile="isRecalibrationServiceableMobile"
                     ref="serviceTypeQuestion"
                     groupName="ServiceTypeQuestion"
                     cmsWidgetName="ServiceTypeQuestionWidget"
@@ -76,8 +80,8 @@ export default {
             state: this.getServiceStateFromStore(),
             zipCode: this.getServiceZipCodeFromStore(),
             isVehicleProtected: null,
-            isGlassServiceableInShop: null,
-            isRecalibrationServiceableInShop: null,
+            isGlassServiceableInshop: null,
+            isRecalibrationServiceableInshop: null,
             isGlassServiceableMobile: null,
             isRecalibrationServiceableMobile: null,
             mobileFeePart: null,
@@ -199,12 +203,7 @@ export default {
             }
 
             if (serviceabilityDetails) {
-                this.isGlassServiceableInShop = serviceabilityDetails.isGlassServiceableInShop;
-                this.isRecalibrationServiceableInShop =
-                    serviceabilityDetails.isRecalibrationServiceableInShop;
-                this.isGlassServiceableMobile = serviceabilityDetails.isGlassServiceableMobile;
-                this.isRecalibrationServiceableMobile =
-                    serviceabilityDetails.isRecalibrationServiceableMobile;
+                this.setServiceabilityDetails(serviceabilityDetails);
             }
 
             if (mobileFeePart) {
@@ -233,6 +232,14 @@ export default {
 
             this.isVehicleProtected = null;
         },
+        setServiceabilityDetails(serviceabilityDetails) {
+            this.isGlassServiceableInshop = serviceabilityDetails.isGlassServiceableInshop;
+            this.isRecalibrationServiceableInshop =
+                serviceabilityDetails.isRecalibrationServiceableInshop;
+            this.isGlassServiceableMobile = serviceabilityDetails.isGlassServiceableMobile;
+            this.isRecalibrationServiceableMobile =
+                serviceabilityDetails.isRecalibrationServiceableMobile;
+        },
         backButtonAction() {
             this.$router.navigateWithoutSaving(this.navigationScenarios.CLICKED_BACK, this.$route);
         },
@@ -241,13 +248,23 @@ export default {
         },
     },
     watch: {
-        zipCode(current, previous) {
-            if (current !== previous) {
-                baseMixin.methods.getZipCodeData(current).then((r) => {
-                    this.zipContainsMilitaryBase = r.containsMilitaryBase;
+        zipCode: {
+            async handler(newValue, oldValue) {
+                if (newValue !== oldValue) {
+                    baseMixin.methods.getZipCodeData(newValue).then((r) => {
+                        this.zipContainsMilitaryBase = r.containsMilitaryBase;
+                    });
+                }
+
+                const lineItems = store.getters.order.lineItems;
+                const serviceabilityDetails = await getServiceabilityDetails({
+                    serviceZipCode: newValue,
+                    lineItems: lineItems,
                 });
+
+                this.setServiceabilityDetails(serviceabilityDetails.data);
             }
-        },
+        }
     },
     components: {
         alert,
diff --git a/src/layouts/service-location/service-type-question/service-type-question.vue b/src/layouts/service-location/service-type-question/service-type-question.vue
index f3f73415e..f75ce94cf 100644
--- a/src/layouts/service-location/service-type-question/service-type-question.vue
+++ b/src/layouts/service-location/service-type-question/service-type-question.vue
@@ -29,8 +29,8 @@ export default {
         validationRules: String,
         cmsWidgetName: String,
         isGlassServiceableMobile: Boolean,
-        isGlassServiceableInShop: Boolean,
-        isRecalibrationServiceableInShop: Boolean,
+        isGlassServiceableInshop: Boolean,
+        isRecalibrationServiceableInshop: Boolean,
         isRecalibrationServiceableMobile: Boolean,
     },
     setup() {
@@ -49,40 +49,54 @@ export default {
         },
         answersToDisplay() {
             let filteredAnswers;
-            if (
-                this.isGlassServiceableMobile &&
-                this.isRecalibrationServiceableMobile &&
-                this.isGlassServiceableInShop &&
-                this.isRecalibrationServiceableInShop
-            ) {
+            if (this.serviceability == "All") {
                 filteredAnswers = this.answersFromCms;
-            } else if (
-                this.isGlassServiceableMobile &&
-                this.isRecalibrationServiceableMobile &&
-                !this.isGlassServiceableInShop &&
-                !this.isRecalibrationServiceableInShop
-            ) {
-                filteredAnswers = this.answersFromCms.filter(
-                    (answer) => answer.Name == "InShop" || answer.Name == "DropOff"
-                );
-            } else if (
-                this.isGlassServiceableInShop &&
-                this.isRecalibrationServiceableInShop &&
-                !this.isGlassServiceableMobile &&
-                !this.isRecalibrationServiceableMobile
-            ) {
+            } else if (this.serviceability == "MobileOnly") {
                 filteredAnswers = this.answersFromCms.filter((answer) => answer.Name == "Mobile");
-            } else if (
-                !this.isGlassServiceableInShop &&
-                !this.isRecalibrationServiceableInShop &&
-                !this.isGlassServiceableMobile &&
-                !this.isRecalibrationServiceableMobile
-            ) {
+            } else if (this.serviceability == "InshopOnly") {
+                filteredAnswers = this.answersFromCms.filter(
+                    (answer) => answer.Name == "Inshop" || answer.Name == "DropOff"
+                );
+            } else if (this.serviceability == "None") {
                 filteredAnswers = [];
             }
 
             return filteredAnswers;
         },
+        serviceability() {
+            let result;
+            if (
+                this.isGlassServiceableMobile &&
+                this.isRecalibrationServiceableMobile &&
+                this.isGlassServiceableInshop &&
+                this.isRecalibrationServiceableInshop
+            ) {
+                result = "All";
+            } else if (
+                !this.isGlassServiceableInshop &&
+                !this.isRecalibrationServiceableInshop &&
+                this.isGlassServiceableMobile &&
+                this.isRecalibrationServiceableMobile                
+            ) {
+                result = "MobileOnly"
+            } else if (
+                this.isGlassServiceableInshop &&
+                this.isRecalibrationServiceableInshop &&
+                !this.isGlassServiceableMobile &&
+                !this.isRecalibrationServiceableMobile
+            ) {
+                result = "InshopOnly"
+            } else if (
+                !this.isGlassServiceableInshop &&
+                !this.isRecalibrationServiceableInshop &&
+                !this.isGlassServiceableMobile &&
+                !this.isRecalibrationServiceableMobile
+            ) {
+                result = "None"
+            }
+
+            return result;
+        },
         selectedValues: {
             get: function () {
                 return this.modelValue;
@@ -92,6 +106,17 @@ export default {
             },
         },
     },
+    watch: {
+        serviceability: {
+            handler(newValue, oldValue) {
+                if (newValue == "MobileOnly") {
+                    this.selectedValues = "Mobile";
+                } else {
+                    this.selectedValues = null;
+                }
+            }
+        }
+    },
     components: {
         buttonQuestion,
     },
diff --git a/src/store/index.js b/src/store/index.js
index b7f3fcf03..5a0e86846 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -931,8 +931,9 @@ export const actions = {
             method: endpoints.GetServiceabilityDetails.method,
             //TODO: Remove Mocky Endpoints
             //endpoint: "https://run.mocky.io/v3/59e1a644-cf16-4f08-8069-1ab2a1e38f79", // NoShopsAvailable
-            endpoint: "https://run.mocky.io/v3/4fe1fb89-dd56-4e4a-9af2-96bd1ab77847", // ForcedInShop
+            //endpoint: "https://run.mocky.io/v3/4fe1fb89-dd56-4e4a-9af2-96bd1ab77847", // ForcedInshop
             //endpoint: "https://run.mocky.io/v3/e2eaa097-6ea5-4906-af53-901edaa94939", // ForcedMobile
+            endpoint: "https://run.mocky.io/v3/1811a1fe-12a7-48f3-939e-d10a9b77dd25", // All Options
         });
     },
 

From d704eee8e8e6b7b113e7db3b2d7f0733398f8d88 Mon Sep 17 00:00:00 2001
From: Leah Schumann <leah.schumann@safelite.com>
Date: Wed, 15 Mar 2023 10:17:11 -0400
Subject: [PATCH 13/22] WIP

---
 .../service-location/service-location.vue     |  4 ++--
 .../service-type-question.vue                 | 21 ++++++-------------
 2 files changed, 8 insertions(+), 17 deletions(-)

diff --git a/src/layouts/service-location/service-location.vue b/src/layouts/service-location/service-location.vue
index 889094264..3e8f506d5 100644
--- a/src/layouts/service-location/service-location.vue
+++ b/src/layouts/service-location/service-location.vue
@@ -263,8 +263,8 @@ export default {
                 });
 
                 this.setServiceabilityDetails(serviceabilityDetails.data);
-            }
-        }
+            },
+        },
     },
     components: {
         alert,
diff --git a/src/layouts/service-location/service-type-question/service-type-question.vue b/src/layouts/service-location/service-type-question/service-type-question.vue
index f75ce94cf..b8f82d35c 100644
--- a/src/layouts/service-location/service-type-question/service-type-question.vue
+++ b/src/layouts/service-location/service-type-question/service-type-question.vue
@@ -17,8 +17,6 @@
 <script>
 import buttonQuestion from "@/digital-components/button-question/button-question";
 
-import { useForm, useIsFormTouched, useIsFormDirty, useIsFormValid } from "vee-validate";
-
 export default {
     name: "service-type-question",
     props: {
@@ -33,13 +31,6 @@ export default {
         isRecalibrationServiceableInshop: Boolean,
         isRecalibrationServiceableMobile: Boolean,
     },
-    setup() {
-        const form = useForm();
-
-        return {
-            form,
-        };
-    },
     computed: {
         questionText() {
             return this.getCmsContent(this.cmsWidgetName, "QuestionText");
@@ -76,23 +67,23 @@ export default {
                 !this.isGlassServiceableInshop &&
                 !this.isRecalibrationServiceableInshop &&
                 this.isGlassServiceableMobile &&
-                this.isRecalibrationServiceableMobile                
+                this.isRecalibrationServiceableMobile
             ) {
-                result = "MobileOnly"
+                result = "MobileOnly";
             } else if (
                 this.isGlassServiceableInshop &&
                 this.isRecalibrationServiceableInshop &&
                 !this.isGlassServiceableMobile &&
                 !this.isRecalibrationServiceableMobile
             ) {
-                result = "InshopOnly"
+                result = "InshopOnly";
             } else if (
                 !this.isGlassServiceableInshop &&
                 !this.isRecalibrationServiceableInshop &&
                 !this.isGlassServiceableMobile &&
                 !this.isRecalibrationServiceableMobile
             ) {
-                result = "None"
+                result = "None";
             }
 
             return result;
@@ -114,8 +105,8 @@ export default {
                 } else {
                     this.selectedValues = null;
                 }
-            }
-        }
+            },
+        },
     },
     components: {
         buttonQuestion,

From 2fd0ce5f211698226b88b2c3a03cf0c26408c727 Mon Sep 17 00:00:00 2001
From: Leah Schumann <leah.schumann@safelite.com>
Date: Mon, 27 Mar 2023 09:47:30 -0400
Subject: [PATCH 14/22] Before merging from develop

---
 src/constants/endpoints.js                    |   2 +-
 src/digital-components/modal/modal.vue        |  14 +-
 .../service-location/service-location.vue     |  15 +-
 .../service-type-question.vue                 |  39 +---
 .../service-zip-modal-question.vue            |   2 +
 src/store/index.js                            |  22 ++-
 .../modal-button-main.spec.js                 | 187 ++++++++++++++++++
 .../modal-button-main/modal-button-main.vue   | 153 ++++++++++++++
 8 files changed, 379 insertions(+), 55 deletions(-)
 create mode 100644 src/ux-components/modal-button-main/modal-button-main.spec.js
 create mode 100644 src/ux-components/modal-button-main/modal-button-main.vue

diff --git a/src/constants/endpoints.js b/src/constants/endpoints.js
index fc94132d9..aaf221bd2 100644
--- a/src/constants/endpoints.js
+++ b/src/constants/endpoints.js
@@ -79,7 +79,7 @@ const endpoints = {
         method: "GET",
     },
     GetServiceabilityDetails: {
-        url: "/location/serviceability-details",
+        url: "/location/api/v1/location/serviceability-details",
         method: "GET",
     },
     GetSupportingItems: {
diff --git a/src/digital-components/modal/modal.vue b/src/digital-components/modal/modal.vue
index a18881796..7217e7478 100644
--- a/src/digital-components/modal/modal.vue
+++ b/src/digital-components/modal/modal.vue
@@ -26,7 +26,7 @@
                     <slot></slot>
                 </div>
                 <div class="modal-footer px-5 py-4">
-                    <buttonMain
+                    <modalButtonMain
                         isPrimary
                         class="w-100"
                         ref="buttonMain"
@@ -41,7 +41,7 @@
 </template>
 
 <script>
-import buttonMain from "@/ux-components/button-main/button-main";
+import modalButtonMain from "@/ux-components/modal-button-main/modal-button-main";
 import { Modal } from "bootstrap";
 import { useForm, useIsFormTouched, useIsFormDirty, useIsFormValid } from "vee-validate";
 
@@ -60,14 +60,14 @@ export default {
     setup() {
         const modalId = `modal-${crypto.randomUUID()}`;
 
-        const form = useForm();
+        const { validate } = useForm();
         const isFormTouched = useIsFormTouched();
         const isFormDirty = useIsFormDirty();
         const isFormValid = useIsFormValid();
 
         return {
             modalId,
-            form,
+            validate,
             isFormTouched,
             isFormDirty,
             isFormValid,
@@ -75,9 +75,9 @@ export default {
     },
     methods: {
         async validateAndEmit() {
-            const validationResult = await this.form.validate();
+            const validationResult = await this.validate();
             if (validationResult.valid) {
-                this.$emit("footer-button-event");
+               this.$emit("footer-button-event");
             } else {
                 this.resetButtonStyle();
             }
@@ -110,7 +110,7 @@ export default {
         },
     },
     components: {
-        buttonMain,
+        modalButtonMain,
     },
 };
 </script>
diff --git a/src/layouts/service-location/service-location.vue b/src/layouts/service-location/service-location.vue
index 3e8f506d5..cb22c5844 100644
--- a/src/layouts/service-location/service-location.vue
+++ b/src/layouts/service-location/service-location.vue
@@ -24,7 +24,7 @@
                     :isGlassServiceableMobile="isGlassServiceableMobile"
                     :isRecalibrationServiceableMobile="isRecalibrationServiceableMobile"
                     ref="serviceTypeQuestion"
-                    groupName="ServiceTypeQuestion"
+                    groupName="serviceTypeQuestion"
                     cmsWidgetName="ServiceTypeQuestionWidget"
                     validationRules="option-required" />
                 <mobileLocationModalQuestions
@@ -96,11 +96,7 @@ export default {
         const serviceZipCode = store.getters.order.serviceLocation.zipCode;
         const getZipCodeData = baseMixin.methods.getZipCodeData(serviceZipCode);
 
-        const lineItems = store.getters.order.lineItems;
-        const serviceabilityDetailsPromise = getServiceabilityDetails({
-            serviceZipCode: serviceZipCode,
-            lineItems: lineItems,
-        });
+        const serviceabilityDetailsPromise = getServiceabilityDetails(serviceZipCode);
 
         const serviceType = store.getters.damage.isRepair ? "Repair" : "Replace";
         const parentAccountNumber = store.getters.payment.parentAccountNumber;
@@ -256,11 +252,8 @@ export default {
                     });
                 }
 
-                const lineItems = store.getters.order.lineItems;
-                const serviceabilityDetails = await getServiceabilityDetails({
-                    serviceZipCode: newValue,
-                    lineItems: lineItems,
-                });
+                const serviceZipCode = store.getters.order.serviceLocation.zipCode;
+                const serviceabilityDetails = await getServiceabilityDetails(serviceZipCode);
 
                 this.setServiceabilityDetails(serviceabilityDetails.data);
             },
diff --git a/src/layouts/service-location/service-type-question/service-type-question.vue b/src/layouts/service-location/service-type-question/service-type-question.vue
index b8f82d35c..8f55b4b8a 100644
--- a/src/layouts/service-location/service-type-question/service-type-question.vue
+++ b/src/layouts/service-location/service-type-question/service-type-question.vue
@@ -55,37 +55,20 @@ export default {
             return filteredAnswers;
         },
         serviceability() {
+            const mobileAvailable = this.isGlassServiceableMobile && this.isRecalibrationServiceableMobile;
+            const inshopAvailable = this.isGlassServiceableInshop && this.isRecalibrationServiceableInshop;
+
             let result;
-            if (
-                this.isGlassServiceableMobile &&
-                this.isRecalibrationServiceableMobile &&
-                this.isGlassServiceableInshop &&
-                this.isRecalibrationServiceableInshop
-            ) {
+            if (inshopAvailable && mobileAvailable) {
                 result = "All";
-            } else if (
-                !this.isGlassServiceableInshop &&
-                !this.isRecalibrationServiceableInshop &&
-                this.isGlassServiceableMobile &&
-                this.isRecalibrationServiceableMobile
-            ) {
-                result = "MobileOnly";
-            } else if (
-                this.isGlassServiceableInshop &&
-                this.isRecalibrationServiceableInshop &&
-                !this.isGlassServiceableMobile &&
-                !this.isRecalibrationServiceableMobile
-            ) {
+            } else if (inshopAvailable && !mobileAvailable) {
                 result = "InshopOnly";
-            } else if (
-                !this.isGlassServiceableInshop &&
-                !this.isRecalibrationServiceableInshop &&
-                !this.isGlassServiceableMobile &&
-                !this.isRecalibrationServiceableMobile
-            ) {
+            } else if (!inshopAvailable && mobileAvailable) {
+                result = "MobileOnly";
+            } else if (!inshopAvailable && !mobileAvailable) {
                 result = "None";
             }
-
+            
             return result;
         },
         selectedValues: {
@@ -99,11 +82,9 @@ export default {
     },
     watch: {
         serviceability: {
-            handler(newValue, oldValue) {
+            handler(newValue) {
                 if (newValue == "MobileOnly") {
                     this.selectedValues = "Mobile";
-                } else {
-                    this.selectedValues = null;
                 }
             },
         },
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 2c1e0e588..a53bec1dc 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
@@ -19,6 +19,7 @@
         @footer-button-event="setZipCode">
         <serviceZipQuestion
             ref="serviceZipQuestion"
+            customInputId="serviceZipCode"
             v-model="internalModel.zipCode"
             v-on="{ 'textboxQuestionEvent.inputIdAssigned': onInputIdAssigned }"
             :cmsWidgetName="textboxQuestionWidgetName" />
@@ -49,6 +50,7 @@ export default {
             internalModel: this.copyModel(this.modelValue),
             serviceZipCodeTextInputId: "",
             displayInvalidZipAlert: false,
+
         };
     },
     props: {
diff --git a/src/store/index.js b/src/store/index.js
index 5a0e86846..a64c279b6 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -926,14 +926,13 @@ export const actions = {
         });
     },
 
-    getServiceabilityDetails(context, { serviceZipCode, lineItems }) {
-        return globalMethods.callMockHttpClient({
+    getServiceabilityDetails(context, { serviceZipCode }) {
+        const lineItems = context.getters.order.lineItems;
+        const lineItemsToSend = [...lineItems.supportingItems];
+        const encodedLineItems = encodeURIComponent(JSON.stringify(lineItemsToSend))
+        return globalMethods.callHttpClient({
             method: endpoints.GetServiceabilityDetails.method,
-            //TODO: Remove Mocky Endpoints
-            //endpoint: "https://run.mocky.io/v3/59e1a644-cf16-4f08-8069-1ab2a1e38f79", // NoShopsAvailable
-            //endpoint: "https://run.mocky.io/v3/4fe1fb89-dd56-4e4a-9af2-96bd1ab77847", // ForcedInshop
-            //endpoint: "https://run.mocky.io/v3/e2eaa097-6ea5-4906-af53-901edaa94939", // ForcedMobile
-            endpoint: "https://run.mocky.io/v3/1811a1fe-12a7-48f3-939e-d10a9b77dd25", // All Options
+            endpoint: `${endpoints.GetServiceabilityDetails.url}?zip=${serviceZipCode}&lineItems=${encodedLineItems}`,
         });
     },
 
@@ -1664,3 +1663,12 @@ function getLineItemQueryStringForPricing(lineItems) {
         })
         .join("");
 }
+
+function getLineItemQueryStringForServiceability(lineItems) {
+    return lineItems
+        .map((lineItem) => {
+            let queryStringSnippet = `&lineItems=${lineItem.partNumber}`;
+            return queryStringSnippet;
+        })
+        .join("");
+}
diff --git a/src/ux-components/modal-button-main/modal-button-main.spec.js b/src/ux-components/modal-button-main/modal-button-main.spec.js
new file mode 100644
index 000000000..41e244a72
--- /dev/null
+++ b/src/ux-components/modal-button-main/modal-button-main.spec.js
@@ -0,0 +1,187 @@
+import { shallowMount } from "@vue/test-utils";
+import buttonMain from "./button-main";
+import { getMountOptions } from "@/helpers/unit-test-helper.js";
+import { nextTick } from "vue";
+
+describe("buttonMain.vue", () => {
+    it("Should return btn-primary class", () => {
+        // Arrange/Act
+        const wrapper = shallowMount(
+            buttonMain,
+            setupMocks({
+                props: {
+                    isPrimary: true,
+                },
+            })
+        );
+        const button = wrapper.find("button");
+
+        // Assert
+        expect(button.attributes("class")).toContain("btn-primary");
+    });
+
+    it("Should return aria-disabled state", () => {
+        // Arrange/Act
+        const wrapper = shallowMount(
+            buttonMain,
+            setupMocks({
+                props: {
+                    isDisabled: true,
+                },
+            })
+        );
+        const button = wrapper.find("button");
+
+        // Assert
+        expect(button.attributes()["aria-disabled"]).toEqual("true");
+    });
+
+    it("Should return loader color", async () => {
+        // Arrange
+        const wrapper = shallowMount(
+            buttonMain,
+            setupMocks({
+                props: {
+                    loaderColor: "blue",
+                    loaderEnabled: true,
+                },
+            })
+        );
+
+        // Act
+        wrapper.vm.clicked();
+        await nextTick();
+
+        // Assert
+        const loader = wrapper.find("loader-stub");
+        expect(loader.attributes("class")).toContain("blue");
+    });
+
+    it("Should return loader position", async () => {
+        // Arrange
+        const wrapper = shallowMount(
+            buttonMain,
+            setupMocks({
+                props: {
+                    loaderPosition: "right",
+                    loaderEnabled: true,
+                },
+            })
+        );
+
+        // Act
+        wrapper.vm.clicked();
+        await nextTick();
+
+        // Assert
+        const loader = wrapper.find("loader-stub");
+        expect(loader.attributes("class")).toContain("right");
+    });
+
+    it("Should set 'isLoaderDisplayed' to false when calling 'removeLoader'", async () => {
+        // Arrange
+        const wrapper = shallowMount(
+            buttonMain,
+            setupMocks({
+                props: {
+                    loaderPosition: "right",
+                    loaderEnabled: true,
+                },
+            })
+        );
+
+        wrapper.setData({
+            isLoaderDisplayed: true,
+        });
+
+        // Act
+        wrapper.vm.removeLoader();
+        await nextTick();
+
+        // Assert
+        const loader = wrapper.find("loader-stub");
+        expect(wrapper.vm.isLoaderDisplayed).toBe(false);
+    });
+
+    it("Should set 'isLoaderDisplayed' to false when calling 'resetButtonStyle'", async () => {
+        // Arrange
+        const wrapper = shallowMount(
+            buttonMain,
+            setupMocks({
+                props: {
+                    loaderPosition: "right",
+                    loaderEnabled: true,
+                },
+            })
+        );
+
+        wrapper.setData({
+            isLoaderDisplayed: true,
+        });
+
+        // Act
+        wrapper.vm.resetButtonStyle();
+        await nextTick();
+
+        // Assert
+        expect(wrapper.vm.isLoaderDisplayed).toBe(false);
+    });
+
+    it("Should emit 'click-event' event when clicking if the button is enabled", async () => {
+        // Arrange
+        const wrapper = shallowMount(
+            buttonMain,
+            setupMocks({
+                props: {
+                    loaderPosition: "right",
+                    loaderEnabled: true,
+                    isDisabled: false,
+                },
+            })
+        );
+
+        const buttonElement = wrapper.find("button");
+
+        // Act
+        buttonElement.trigger("click");
+
+        await nextTick();
+
+        // Assert
+        expect(wrapper.emitted("click-event")).toBeTruthy();
+    });
+
+    it("Should not emit 'click-event' event when clicking if the button is disabled", async () => {
+        // Arrange
+        const wrapper = shallowMount(
+            buttonMain,
+            setupMocks({
+                props: {
+                    loaderPosition: "right",
+                    loaderEnabled: true,
+                    isDisabled: true,
+                },
+            })
+        );
+
+        const buttonElement = wrapper.find("button");
+
+        // Act
+        buttonElement.trigger("click");
+
+        await nextTick();
+
+        // Assert
+        expect(wrapper.emitted("click-event")).toBeFalsy();
+    });
+});
+
+function setupMocks(mountOptionsMockData = {}) {
+    const defaultMountOptions = { route: { query: { fmgPage: "page-name" } } };
+    const baseMountOptions = getMountOptions(
+        Object.assign(defaultMountOptions, mountOptionsMockData)
+    );
+    const allMountOptions = Object.assign(defaultMountOptions, baseMountOptions);
+
+    return allMountOptions;
+}
diff --git a/src/ux-components/modal-button-main/modal-button-main.vue b/src/ux-components/modal-button-main/modal-button-main.vue
new file mode 100644
index 000000000..eaffdf2d0
--- /dev/null
+++ b/src/ux-components/modal-button-main/modal-button-main.vue
@@ -0,0 +1,153 @@
+<template>
+    <button
+        type="button"
+        :aria-disabled="isDisabled"
+        class="btn d-flex align-items-center justify-content-center py-3 px-4 delay"
+        :class="[
+            isPrimary ? 'btn-primary' : 'btn-secondary',
+            isFloat ? 'float-end' : '',
+            isLoaderDisplayed ? 'has-loader' : '',
+        ]"
+        @click="clicked">
+        <span class="m-0">{{ this.buttonText }}</span>
+        <loader
+            class="ms-2"
+            v-if="isLoaderDisplayed && !suppressLoader"
+            v-bind:class="[this.loaderColor, this.loaderPosition]" />
+    </button>
+</template>
+
+<script>
+import loader from "@/ux-components/loader/loader";
+
+export default {
+    name: "modalButtonMain",
+    props: {
+        isPrimary: Boolean,
+        buttonText: String,
+        isDisabled: Boolean,
+        loaderColor: String,
+        loaderPosition: String,
+        isFloat: Boolean,
+        suppressLoader: Boolean,
+    },
+    data() {
+        return {
+            isLoaderDisplayed: false,
+        };
+    },
+    methods: {
+        removeLoader() {
+            this.isLoaderDisplayed = false;
+        },
+        clicked() {
+            this.pushEventToGA(
+                this.$route.query[this.queryStrings.FMG_PAGE],
+                this.GaActions.CLICKED,
+                this.buttonText,
+                true
+            );
+            if (!this.isDisabled) {
+                this.isLoaderDisplayed = true;
+                this.$emit("click-event");
+            }
+        },
+        resetButtonStyle() {
+            this.isLoaderDisplayed = false;
+        },
+    },
+    components: {
+        loader,
+    },
+};
+</script>
+
+<style lang="scss">
+.btn {
+    &.btn-primary {
+        position: relative;
+        background: linear-gradient(270deg, $blue 0%, $blue-800 100%);
+        border: none;
+        border-radius: $border-radius-lg;
+        color: $white;
+        justify-content: center;
+        font-weight: 500;
+        @media (hover: hover) {
+            background: linear-gradient(270deg, $blue 0%, $blue-800 100%);
+        }
+        &:focus {
+            box-shadow: 0 0 0 3px, 0 0 0 5.5px $blue-700;
+        }
+        &:focus, // Mouse, touch, stylus focus
+    &:focus-visible {
+            // Keyboard focus for accessibility
+            outline: none;
+            box-shadow: 0 0 0 3px, 0 0 0 5.5px $blue-700;
+            color: $white;
+            background: linear-gradient(270deg, rgba(6, 87, 124, 1) 0%, rgba(6, 87, 124, 1) 100%);
+        }
+        &:disabled {
+            background: $gray-200 !important;
+            background: linear-gradient(270deg, $gray-200 0%, $gray-200 100%) !important;
+            color: $gray-600 !important;
+            font-weight: 400;
+            height: 48px;
+            border: none;
+            border-radius: $border-radius-lg;
+            cursor: pointer;
+            pointer-events: all;
+        }
+        &.has-loader {
+            color: $white;
+            background: $blue-700;
+            box-shadow: 0 0 0 3px, 0 0 0 5.5px $blue-700;
+            pointer-events: none;
+        }
+        &.delay {
+            // fixes flicker while transitioning between states
+            transition: background 0s 0s ease-in-out;
+        }
+    }
+    &.btn-secondary {
+        position: relative;
+        background: transparent;
+        border: 1px solid $blue;
+        border-radius: $border-radius-lg;
+        color: $blue;
+        font-weight: 500;
+        transition: all 150ms linear;
+        height: 3rem;
+        &:hover {
+            color: $white;
+            @include blue-gradient;
+        }
+        &:focus, // Mouse, touch, stylus focus
+    &:focus-visible {
+            // Keyboard focus for accessibility
+            outline: none;
+            box-shadow: 0 0 0 3px $white, 0 0 0 5.5px $blue-700;
+            color: $white;
+            @include blue-gradient;
+        }
+        &:disabled {
+            background: transparent;
+            color: $gray-550 !important;
+            font-weight: 400;
+            height: 48px;
+            border: 1px solid $gray-550;
+            border-radius: $border-radius-lg;
+            cursor: pointer;
+            pointer-events: all;
+        }
+        &.has-loader {
+            color: $white;
+            @include blue-gradient;
+            pointer-events: none;
+        }
+        &.delay {
+            // fixes flicker while transitioning between states
+            transition: background 0s 0s ease-in-out;
+        }
+    }
+}
+</style>

From 6b25e8ea47601f60edb7981e30695fa89b90f09d Mon Sep 17 00:00:00 2001
From: Leah Schumann <leah.schumann@safelite.com>
Date: Mon, 27 Mar 2023 13:22:32 -0400
Subject: [PATCH 15/22] Merge outstanding changes

---
 .../mobile-location-modal-questions.vue            | 14 ++++++++++----
 src/layouts/service-location/service-location.vue  |  1 +
 2 files changed, 11 insertions(+), 4 deletions(-)

diff --git a/src/layouts/service-location/mobile-location-modal-questions/mobile-location-modal-questions.vue b/src/layouts/service-location/mobile-location-modal-questions/mobile-location-modal-questions.vue
index a319a85b9..d0128bcd3 100644
--- a/src/layouts/service-location/mobile-location-modal-questions/mobile-location-modal-questions.vue
+++ b/src/layouts/service-location/mobile-location-modal-questions/mobile-location-modal-questions.vue
@@ -61,7 +61,11 @@ import vehicleProtectedQuestion from "@/layouts/service-location/mobile-location
 
 // Helpers
 import { deepClone } from "@/layouts/service-location/helpers/object-cloning-helper/object-cloning-helper";
-import { getPricedMobileFeePart } from "@/layouts/service-location/helpers/service-location-helper/service-location-helper";
+
+import {
+    getPricedMobileFeePart,
+    getServiceabilityDetails,
+} from "@/layouts/service-location/helpers/service-location-helper/service-location-helper";
 
 export default {
     name: "mobile-location-modal-questions",
@@ -187,13 +191,15 @@ export default {
             } else {
                 // retrieve mobile fee part
                 const serviceZipCode = this.internalModel.addressQuestions.zipCode;
-
                 const mobileFeePart = await getPricedMobileFeePart(serviceZipCode);
-                
+
+                // retrieve serviceability details
+                const serviceabilityDetails = await getServiceabilityDetails(serviceZipCode);
+
                 // update content related to service zip code
                 this.$emit("updated-mobile-fee-part", mobileFeePart);
                 this.$emit("updated-serviceability", serviceabilityDetails.data);
-                this.$emit("updated-contains-military-base", zipCodeData.containsMilitaryBase); 
+                this.$emit("updated-contains-military-base", zipCodeData.containsMilitaryBase);
 
                 // Update the page level model
                 this.$emit("update:modelValue", this.internalModel);
diff --git a/src/layouts/service-location/service-location.vue b/src/layouts/service-location/service-location.vue
index b049bb0cb..4eaad2cbb 100644
--- a/src/layouts/service-location/service-location.vue
+++ b/src/layouts/service-location/service-location.vue
@@ -37,6 +37,7 @@
                 linkWidgetName="MobileLocationLinkWidget"
                 modalWidgetName="MobileLocationModalWidget" />
             <textboxQuestion
+                v-if="selectedServiceType === 'Mobile'"
                 ref="mobileLocationQuestionsError"
                 v-model="mobileLocationValidationField"
                 validationRules="mobile-location-required"

From 07c90341abf947d4872a30bc975f1a9fb4ad2419 Mon Sep 17 00:00:00 2001
From: Leah Schumann <leah.schumann@safelite.com>
Date: Mon, 27 Mar 2023 13:31:26 -0400
Subject: [PATCH 16/22] Patched in missing Military code

---
 src/layouts/service-location/service-location.vue | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/layouts/service-location/service-location.vue b/src/layouts/service-location/service-location.vue
index 4eaad2cbb..6b059079f 100644
--- a/src/layouts/service-location/service-location.vue
+++ b/src/layouts/service-location/service-location.vue
@@ -10,6 +10,7 @@
                 :mobileFeePart="mobileFeePart"
                 @updated-mobile-fee-part="setMobileFeePart"
                 @updated-serviceability="setServiceabilityDetails"
+                @updated-contains-military-base="setContainsMilitaryBase"
                 linkWidgetName="ServiceZipLinkWidget"
                 modalWidgetName="ServiceZipModalWidget" />
             <alert
@@ -33,6 +34,7 @@
                 :mobileFeePart="mobileFeePart"
                 @updated-mobile-fee-part="setMobileFeePart"
                 @updated-serviceability="setServiceabilityDetails"
+                @updated-contains-military-base="setContainsMilitaryBase"
                 ref="mobileLocationModalQuestions"
                 linkWidgetName="MobileLocationLinkWidget"
                 modalWidgetName="MobileLocationModalWidget" />

From 31355e1e735888a3b3283a099614b735592a14e1 Mon Sep 17 00:00:00 2001
From: Leah Schumann <leah.schumann@safelite.com>
Date: Mon, 27 Mar 2023 13:37:30 -0400
Subject: [PATCH 17/22] added comment

---
 .../service-zip-modal-question/service-zip-modal-question.vue   | 2 ++
 1 file changed, 2 insertions(+)

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 ed4a3ea69..0698fc340 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
@@ -149,6 +149,8 @@ export default {
                     // retrieve mobile fee part
                     const serviceZipCode = this.internalModel.zipCode;
                     const mobileFeePart = await getPricedMobileFeePart(serviceZipCode);
+
+                    // retrieve serviceability details
                     const serviceabilityDetails = await getServiceabilityDetails(serviceZipCode);
 
                     // update content related to service zip code

From 902cd698582cb44c5fb93bd609faf81336b55df2 Mon Sep 17 00:00:00 2001
From: Leah Schumann <leah.schumann@safelite.com>
Date: Tue, 28 Mar 2023 08:28:55 -0400
Subject: [PATCH 18/22] WIP

---
 src/layouts/service-location/service-location.vue     |  8 ++++----
 .../service-type-question/service-type-question.vue   | 11 +++++++++--
 src/store/index.js                                    |  1 +
 3 files changed, 14 insertions(+), 6 deletions(-)

diff --git a/src/layouts/service-location/service-location.vue b/src/layouts/service-location/service-location.vue
index 6b059079f..e6613cda8 100644
--- a/src/layouts/service-location/service-location.vue
+++ b/src/layouts/service-location/service-location.vue
@@ -190,10 +190,10 @@ export default {
             },
         },
         showMilitaryZipAlert() {
-            return (
-                this.zipContainsMilitaryBase &&
-                (this.isZipServiceableMobile == null || this.isZipServiceableMobile === true)
-            );
+            const isZipServiceableMobile =
+                this.isGlassServiceableMobile && this.isRecalibrationServiceableMobile;
+
+            return this.zipContainsMilitaryBase && isZipServiceableMobile;
         },
     },
     methods: {
diff --git a/src/layouts/service-location/service-type-question/service-type-question.vue b/src/layouts/service-location/service-type-question/service-type-question.vue
index b74ad989f..d8ba9e864 100644
--- a/src/layouts/service-location/service-type-question/service-type-question.vue
+++ b/src/layouts/service-location/service-type-question/service-type-question.vue
@@ -55,8 +55,13 @@ export default {
             return filteredAnswers;
         },
         serviceability() {
-            const mobileAvailable =
-                this.isGlassServiceableMobile && this.isRecalibrationServiceableMobile;
+            let mobileAvailable;
+            if (this.IsRecalibrationServiceableMobile == null) {
+                mobileAvailable = this.isGlassServiceableMobile;
+            } else {
+                mobileAvailable = this.isGlassServiceableMobile && this.isRecalibrationServiceableMobile;
+            }
+
             const inshopAvailable =
                 this.isGlassServiceableInshop && this.isRecalibrationServiceableInshop;
 
@@ -87,6 +92,8 @@ export default {
             handler(newValue) {
                 if (newValue == "MobileOnly") {
                     this.selectedValues = "Mobile";
+                } else {
+                    this.selectedValues = null;
                 }
             },
         },
diff --git a/src/store/index.js b/src/store/index.js
index 413d2f8b0..24d9e5b84 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -43,6 +43,7 @@ const getDefaultState = () => {
                 state: null,
                 zipCode: null,
                 zipCodeCtu: null,
+                serviceType: null,
             },
             customer: {
                 emailAddress: null,

From 04854a455cf3fbe1d1d589fe2a1a60f271ce7fc7 Mon Sep 17 00:00:00 2001
From: Leah Schumann <leah.schumann@safelite.com>
Date: Tue, 28 Mar 2023 08:39:54 -0400
Subject: [PATCH 19/22] WIP

---
 .../service-type-question/service-type-question.vue            | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/layouts/service-location/service-type-question/service-type-question.vue b/src/layouts/service-location/service-type-question/service-type-question.vue
index d8ba9e864..4f1a36ac7 100644
--- a/src/layouts/service-location/service-type-question/service-type-question.vue
+++ b/src/layouts/service-location/service-type-question/service-type-question.vue
@@ -59,7 +59,8 @@ export default {
             if (this.IsRecalibrationServiceableMobile == null) {
                 mobileAvailable = this.isGlassServiceableMobile;
             } else {
-                mobileAvailable = this.isGlassServiceableMobile && this.isRecalibrationServiceableMobile;
+                mobileAvailable =
+                    this.isGlassServiceableMobile && this.isRecalibrationServiceableMobile;
             }
 
             const inshopAvailable =

From 0bde42e0d2cda395b5be2aad279d20cf1763107c Mon Sep 17 00:00:00 2001
From: Leah Schumann <leah.schumann@safelite.com>
Date: Tue, 28 Mar 2023 13:20:12 -0400
Subject: [PATCH 20/22] WIP

---
 src/digital-components/modal/modal.vue                        | 4 ++--
 .../mobile-location-modal-questions.vue                       | 4 ++++
 src/layouts/service-location/service-location.vue             | 4 ++--
 3 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/src/digital-components/modal/modal.vue b/src/digital-components/modal/modal.vue
index 32a00ad15..ba7e60eb6 100644
--- a/src/digital-components/modal/modal.vue
+++ b/src/digital-components/modal/modal.vue
@@ -29,7 +29,7 @@
                     <modalButtonMain
                         isPrimary
                         class="w-100"
-                        ref="buttonMain"
+                        ref="modalButtonMain"
                         loaderColor="white"
                         :buttonText="footerButtonText"
                         @click-event="validateAndEmit"
@@ -79,7 +79,7 @@ export default {
             }
         },
         resetButtonStyle() {
-            this.$refs.buttonMain.resetButtonStyle();
+            this.$refs.modalButtonMain.resetButtonStyle();
         },
         onModalOpened() {
             this.onModalOpenedCallback?.();
diff --git a/src/layouts/service-location/mobile-location-modal-questions/mobile-location-modal-questions.vue b/src/layouts/service-location/mobile-location-modal-questions/mobile-location-modal-questions.vue
index d0128bcd3..bbed9923d 100644
--- a/src/layouts/service-location/mobile-location-modal-questions/mobile-location-modal-questions.vue
+++ b/src/layouts/service-location/mobile-location-modal-questions/mobile-location-modal-questions.vue
@@ -161,6 +161,7 @@ export default {
         },
         onModalClosed() {
             this.internalModel = deepClone(this.modelValue);
+            this.resetAlerts();
         },
         resetComponent(updatedServiceZipCodeInfo) {
             // Reset the validation form, setting the initial values
@@ -179,6 +180,9 @@ export default {
         resetModalButtonStyle() {
             this.$refs[this.modalName].resetButtonStyle();
         },
+        resetAlerts() {
+            this.$refs.addressQuestions.displayVerificationWarning = false;
+        },
         async setMobileLocation() {
             // Validate the Zip Code
             const zipCodeData = await this.getZipCodeData(
diff --git a/src/layouts/service-location/service-location.vue b/src/layouts/service-location/service-location.vue
index e6613cda8..d8167ad57 100644
--- a/src/layouts/service-location/service-location.vue
+++ b/src/layouts/service-location/service-location.vue
@@ -29,7 +29,7 @@
                 cmsWidgetName="ServiceTypeQuestionWidget"
                 validationRules="option-required" />
             <mobileLocationModalQuestions
-                v-if="selectedServiceType === 'Mobile'"
+                v-show="selectedServiceType === 'Mobile'"
                 v-model="mobileLocationQuestions"
                 :mobileFeePart="mobileFeePart"
                 @updated-mobile-fee-part="setMobileFeePart"
@@ -39,7 +39,7 @@
                 linkWidgetName="MobileLocationLinkWidget"
                 modalWidgetName="MobileLocationModalWidget" />
             <textboxQuestion
-                v-if="selectedServiceType === 'Mobile'"
+                v-show="selectedServiceType === 'Mobile'"
                 ref="mobileLocationQuestionsError"
                 v-model="mobileLocationValidationField"
                 validationRules="mobile-location-required"

From 314193eb43a8fa102caaf4791729c6261333a956 Mon Sep 17 00:00:00 2001
From: Leah Schumann <leah.schumann@safelite.com>
Date: Tue, 28 Mar 2023 13:47:09 -0400
Subject: [PATCH 21/22] Updated existing unit tests

---
 src/digital-components/modal/modal.spec.js    |  4 +-
 .../mobile-location-modal-questions.spec.js   | 14 +++++++
 .../service-location/service-location.spec.js | 14 +++++++
 .../service-zip-modal-question.spec.js        | 14 +++++++
 .../modal-button-main.spec.js                 | 38 +++++++++----------
 5 files changed, 63 insertions(+), 21 deletions(-)

diff --git a/src/digital-components/modal/modal.spec.js b/src/digital-components/modal/modal.spec.js
index a948fe99a..e4d8692d4 100644
--- a/src/digital-components/modal/modal.spec.js
+++ b/src/digital-components/modal/modal.spec.js
@@ -92,7 +92,7 @@ describe("modal.vue", () => {
         wrapper.vm.resetButtonStyle = resetButtonStyle;
 
         // Act
-        const buttonMain = wrapper.findComponent({ ref: "buttonMain" });
+        const buttonMain = wrapper.findComponent({ ref: "modalButtonMain" });
         await buttonMain.trigger("click-event");
 
         // Assert
@@ -124,7 +124,7 @@ describe("modal.vue", () => {
         wrapper.vm.resetButtonStyle = resetButtonStyle;
 
         // Act
-        const buttonMain = wrapper.findComponent({ ref: "buttonMain" });
+        const buttonMain = wrapper.findComponent({ ref: "modalButtonMain" });
         await buttonMain.trigger("click-event");
 
         // Assert
diff --git a/src/layouts/service-location/mobile-location-modal-questions/mobile-location-modal-questions.spec.js b/src/layouts/service-location/mobile-location-modal-questions/mobile-location-modal-questions.spec.js
index fbea693b9..66bd93799 100644
--- a/src/layouts/service-location/mobile-location-modal-questions/mobile-location-modal-questions.spec.js
+++ b/src/layouts/service-location/mobile-location-modal-questions/mobile-location-modal-questions.spec.js
@@ -110,12 +110,26 @@ const mockGetPricedMobileFeePart = (mockServiceZipCode) => {
     return Promise.resolve(mobileFeePart);
 };
 
+const mockGetServiceabilityDetails = (mockServiceZipCode) => {
+    const serviceabilityDetails = {
+        isGlassServiceableInshop: true,
+        isRecalibrationServiceableInshop: true,
+        isGlassServiceableMobile: true,
+        isRecalibrationServiceableMobile: true,
+    };
+
+    return Promise.resolve(serviceabilityDetails);
+};
+
 jest.mock(
     "@/layouts/service-location/helpers/service-location-helper/service-location-helper",
     () => ({
         getPricedMobileFeePart: jest.fn((mockServiceZipCode) => {
             return mockGetPricedMobileFeePart(mockServiceZipCode);
         }),
+        getServiceabilityDetails: jest.fn((mockServiceZipCode) => {
+            return mockGetServiceabilityDetails(mockServiceZipCode);
+        }),
     })
 );
 
diff --git a/src/layouts/service-location/service-location.spec.js b/src/layouts/service-location/service-location.spec.js
index b48fa2f06..2a056c4d1 100644
--- a/src/layouts/service-location/service-location.spec.js
+++ b/src/layouts/service-location/service-location.spec.js
@@ -32,12 +32,26 @@ const mockGetPricedMobileFeePart = (mockServiceZipCode) => {
     return Promise.resolve(mobileFeePart);
 };
 
+const mockGetServiceabilityDetails = (mockServiceZipCode) => {
+    const serviceabilityDetails = {
+        isGlassServiceableInshop: true,
+        isRecalibrationServiceableInshop: true,
+        isGlassServiceableMobile: true,
+        isRecalibrationServiceableMobile: true,
+    };
+
+    return Promise.resolve(serviceabilityDetails);
+};
+
 jest.mock(
     "@/layouts/service-location/helpers/service-location-helper/service-location-helper",
     () => ({
         getPricedMobileFeePart: jest.fn((mockServiceZipCode) => {
             return mockGetPricedMobileFeePart(mockServiceZipCode);
         }),
+        getServiceabilityDetails: jest.fn((mockServiceZipCode) => {
+            return mockGetServiceabilityDetails(mockServiceZipCode);
+        }),
     })
 );
 
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
index 407e129cf..6c9cf42f5 100644
--- 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
@@ -33,12 +33,26 @@ const mockGetPricedMobileFeePart = (mockServiceZipCode) => {
     return Promise.resolve(mobileFeePart);
 };
 
+const mockGetServiceabilityDetails = (mockServiceZipCode) => {
+    const serviceabilityDetails = {
+        isGlassServiceableInshop: true,
+        isRecalibrationServiceableInshop: true,
+        isGlassServiceableMobile: true,
+        isRecalibrationServiceableMobile: true,
+    };
+
+    return Promise.resolve(serviceabilityDetails);
+};
+
 jest.mock(
     "@/layouts/service-location/helpers/service-location-helper/service-location-helper",
     () => ({
         getPricedMobileFeePart: jest.fn((mockServiceZipCode) => {
             return mockGetPricedMobileFeePart(mockServiceZipCode);
         }),
+        getServiceabilityDetails: jest.fn((mockServiceZipCode) => {
+            return mockGetServiceabilityDetails(mockServiceZipCode);
+        }),
     })
 );
 
diff --git a/src/ux-components/modal-button-main/modal-button-main.spec.js b/src/ux-components/modal-button-main/modal-button-main.spec.js
index 41e244a72..bd3587f22 100644
--- a/src/ux-components/modal-button-main/modal-button-main.spec.js
+++ b/src/ux-components/modal-button-main/modal-button-main.spec.js
@@ -1,21 +1,21 @@
 import { shallowMount } from "@vue/test-utils";
-import buttonMain from "./button-main";
+import modalButtonMain from "./modal-button-main";
 import { getMountOptions } from "@/helpers/unit-test-helper.js";
 import { nextTick } from "vue";
 
-describe("buttonMain.vue", () => {
+describe("modal-button-main.vue", () => {
     it("Should return btn-primary class", () => {
         // Arrange/Act
         const wrapper = shallowMount(
-            buttonMain,
+            modalButtonMain,
             setupMocks({
-                props: {
+                propsData: {
                     isPrimary: true,
                 },
             })
         );
         const button = wrapper.find("button");
-
+        
         // Assert
         expect(button.attributes("class")).toContain("btn-primary");
     });
@@ -23,9 +23,9 @@ describe("buttonMain.vue", () => {
     it("Should return aria-disabled state", () => {
         // Arrange/Act
         const wrapper = shallowMount(
-            buttonMain,
+            modalButtonMain,
             setupMocks({
-                props: {
+                propsData: {
                     isDisabled: true,
                 },
             })
@@ -39,9 +39,9 @@ describe("buttonMain.vue", () => {
     it("Should return loader color", async () => {
         // Arrange
         const wrapper = shallowMount(
-            buttonMain,
+            modalButtonMain,
             setupMocks({
-                props: {
+                propsData: {
                     loaderColor: "blue",
                     loaderEnabled: true,
                 },
@@ -60,9 +60,9 @@ describe("buttonMain.vue", () => {
     it("Should return loader position", async () => {
         // Arrange
         const wrapper = shallowMount(
-            buttonMain,
+            modalButtonMain,
             setupMocks({
-                props: {
+                propsData: {
                     loaderPosition: "right",
                     loaderEnabled: true,
                 },
@@ -81,9 +81,9 @@ describe("buttonMain.vue", () => {
     it("Should set 'isLoaderDisplayed' to false when calling 'removeLoader'", async () => {
         // Arrange
         const wrapper = shallowMount(
-            buttonMain,
+            modalButtonMain,
             setupMocks({
-                props: {
+                propsData: {
                     loaderPosition: "right",
                     loaderEnabled: true,
                 },
@@ -106,9 +106,9 @@ describe("buttonMain.vue", () => {
     it("Should set 'isLoaderDisplayed' to false when calling 'resetButtonStyle'", async () => {
         // Arrange
         const wrapper = shallowMount(
-            buttonMain,
+            modalButtonMain,
             setupMocks({
-                props: {
+                propsData: {
                     loaderPosition: "right",
                     loaderEnabled: true,
                 },
@@ -130,9 +130,9 @@ describe("buttonMain.vue", () => {
     it("Should emit 'click-event' event when clicking if the button is enabled", async () => {
         // Arrange
         const wrapper = shallowMount(
-            buttonMain,
+            modalButtonMain,
             setupMocks({
-                props: {
+                propsData: {
                     loaderPosition: "right",
                     loaderEnabled: true,
                     isDisabled: false,
@@ -154,9 +154,9 @@ describe("buttonMain.vue", () => {
     it("Should not emit 'click-event' event when clicking if the button is disabled", async () => {
         // Arrange
         const wrapper = shallowMount(
-            buttonMain,
+            modalButtonMain,
             setupMocks({
-                props: {
+                propsData: {
                     loaderPosition: "right",
                     loaderEnabled: true,
                     isDisabled: true,

From 1639045d748524cf8ce9f0b7add773d8cae741a0 Mon Sep 17 00:00:00 2001
From: Leah Schumann <leah.schumann@safelite.com>
Date: Wed, 29 Mar 2023 07:46:42 -0400
Subject: [PATCH 22/22] Unit tests completed

---
 .../service-type-question.spec.js             | 186 +++++++++++++++++-
 .../modal-button-main.spec.js                 |   2 +-
 2 files changed, 186 insertions(+), 2 deletions(-)

diff --git a/src/layouts/service-location/service-type-question/service-type-question.spec.js b/src/layouts/service-location/service-type-question/service-type-question.spec.js
index 3d0843e10..13b727c54 100644
--- a/src/layouts/service-location/service-type-question/service-type-question.spec.js
+++ b/src/layouts/service-location/service-type-question/service-type-question.spec.js
@@ -1 +1,185 @@
-test.todo("some test to be written in the future");
+import { shallowMount } from "@vue/test-utils";
+import { getMountOptions } from "@/helpers/unit-test-helper.js";
+import serviceTypeQuestion from "./service-type-question";
+
+const mockCmsContent = {
+    QuestionText: "Choose a service option:",
+    Answers: [
+        {
+            AnswerImageUrl: "",
+            Name: "Mobile",
+            SubText: "",
+            SubWidgetName: "",
+            Text: "Mobile",
+        },
+        {
+            AnswerImageUrl: "",
+            Name: "Inshop",
+            SubText: "",
+            SubWidgetName: "",
+            Text: "In-shop",
+        },
+        {
+            AnswerImageUrl: "",
+            Name: "DropOff",
+            SubText: "",
+            SubWidgetName: "",
+            Text: "Drop-off",
+        },
+    ],
+};
+
+const cmsWidgetName = "ServiceTypeQuestionWidget";
+const mockMixin = {
+    methods: {
+        getCmsContent: jest.fn((widgetName, cmsFieldName) => {
+            if (widgetName === cmsWidgetName) {
+                return mockCmsContent[cmsFieldName];
+            }
+
+            return null;
+        }),
+    },
+};
+
+describe("service-type-question.vue", () => {
+    it("Should display all options if both in-shop and mobile are available", async () => {
+        // Arrange/Act
+        const { wrapper } = setupMocks({
+            mixins: [mockMixin],
+            props: {
+                cmsWidgetName: cmsWidgetName,
+                isGlassServiceableInshop: true,
+                isRecalibrationServiceableInshop: true,
+                isGlassServiceableMobile: true,
+                isRecalibrationServiceableMobile: true,
+            },
+            mountOptions: {
+                attachTo: document.body,
+            },
+        });
+
+        // Assert
+        expect(wrapper.vm.answersToDisplay).toEqual([
+            {
+                AnswerImageUrl: "",
+                Name: "Mobile",
+                SubText: "",
+                SubWidgetName: "",
+                Text: "Mobile",
+            },
+            {
+                AnswerImageUrl: "",
+                Name: "Inshop",
+                SubText: "",
+                SubWidgetName: "",
+                Text: "In-shop",
+            },
+            {
+                AnswerImageUrl: "",
+                Name: "DropOff",
+                SubText: "",
+                SubWidgetName: "",
+                Text: "Drop-off",
+            },
+        ]);
+    });
+
+    it("Should display only the In-Shop and Drop-Off answers when only in-shop service is available", async () => {
+        // Arrange/Act
+        const { wrapper } = setupMocks({
+            mixins: [mockMixin],
+            props: {
+                cmsWidgetName: cmsWidgetName,
+                isGlassServiceableInshop: true,
+                isRecalibrationServiceableInshop: true,
+                isGlassServiceableMobile: false,
+                isRecalibrationServiceableMobile: false,
+            },
+            mountOptions: {
+                attachTo: document.body,
+            },
+        });
+
+        // Assert
+        expect(wrapper.vm.answersToDisplay).toEqual([
+            {
+                AnswerImageUrl: "",
+                Name: "Inshop",
+                SubText: "",
+                SubWidgetName: "",
+                Text: "In-shop",
+            },
+            {
+                AnswerImageUrl: "",
+                Name: "DropOff",
+                SubText: "",
+                SubWidgetName: "",
+                Text: "Drop-off",
+            },
+        ]);
+    });
+
+    it("Should display only the Mobile answer when only mobile service is available", async () => {
+        // Arrange/Act
+        const { wrapper } = setupMocks({
+            mixins: [mockMixin],
+            props: {
+                cmsWidgetName: cmsWidgetName,
+                isGlassServiceableInshop: false,
+                isRecalibrationServiceableInshop: false,
+                isGlassServiceableMobile: true,
+                isRecalibrationServiceableMobile: true,
+            },
+            mountOptions: {
+                attachTo: document.body,
+            },
+        });
+
+        // Assert
+        expect(wrapper.vm.answersToDisplay).toEqual([
+            {
+                AnswerImageUrl: "",
+                Name: "Mobile",
+                SubText: "",
+                SubWidgetName: "",
+                Text: "Mobile",
+            },
+        ]);
+    });
+
+    it("Should display no answers if neither in-shop nor mobile service are available", async () => {
+        // Arrange/Act
+        const { wrapper } = setupMocks({
+            mixins: [mockMixin],
+            props: {
+                cmsWidgetName: cmsWidgetName,
+                isGlassServiceableInshop: false,
+                isRecalibrationServiceableInshop: false,
+                isGlassServiceableMobile: false,
+                isRecalibrationServiceableMobile: false,
+            },
+            mountOptions: {
+                attachTo: document.body,
+            },
+        });
+
+        // Assert
+        expect(wrapper.vm.answersToDisplay).toEqual([]);
+    });
+});
+
+function setupMocks({ mountOptions, mixins, props, isShallowMount = true }) {
+    const resultingMountOptions = getMountOptions({
+        ...mountOptions,
+        mixins,
+    });
+
+    if (props) resultingMountOptions.propsData = props;
+
+    const wrapper = isShallowMount
+        ? shallowMount(serviceTypeQuestion, resultingMountOptions)
+        : mount(serviceTypeQuestion, resultingMountOptions);
+
+    return { wrapper };
+}
diff --git a/src/ux-components/modal-button-main/modal-button-main.spec.js b/src/ux-components/modal-button-main/modal-button-main.spec.js
index bd3587f22..f212d8ec3 100644
--- a/src/ux-components/modal-button-main/modal-button-main.spec.js
+++ b/src/ux-components/modal-button-main/modal-button-main.spec.js
@@ -15,7 +15,7 @@ describe("modal-button-main.vue", () => {
             })
         );
         const button = wrapper.find("button");
-        
+
         // Assert
         expect(button.attributes("class")).toContain("btn-primary");
     });